/* tiendasweb.com.mx — la portada de México.

   La quinta portada de la casa y la más distinta de todas. engalicia y engandia
   son cálidas y regionales; tiendasweb.net es tinta casi negra y retícula
   técnica, sin una sola foto; Colombia es esmeralda, oro viejo y un serif
   antiguo sobre papel crema.

   Ésta va por otro lado: **Barragán**. Planos de color macizos, cantos duros,
   luz cortada y una tipografía de palo seco pesada y apretada. Rosa mexicano,
   amarillo ocre, barro y cal. Es arquitectura mexicana de verdad, no el
   folclore de siempre: ni un sombrero, ni papel picado, ni una Catrina. Ese
   material lo devuelve cualquier banco de imágenes a la primera y le habla a un
   turista, no a quien tiene una tortillería abierta el martes a las siete.

   El radio de esquina es CERO en toda la hoja, y no es un descuido. Un plano de
   Barragán no tiene la esquina redondeada; en cuanto se le pone, deja de ser un
   muro y se convierte en una tarjeta más de panel de administración.

   Las reglas de la casa, que en este dominio además son una promesa por escrito
   en la página de privacidad: sin fuentes externas, sin cookies, sin
   JavaScript y sin una sola petición a un servidor ajeno. Las fotos se
   descargaron de Pexels y se sirven desde aquí.
*/

:root{
  /* Cal y tinta */
  --cal:#F7F2E8;              /* muro encalado */
  --cal-2:#EFE7D7;
  --tinta:#231719;            /* negro cálido, con rojo dentro */
  --tinta-2:#3A2A2C;
  --suave:#6E5C58;
  --tenue:#9E8C85;
  --linea:#E2D7C4;
  --linea-2:#CDBCA3;
  --blanco:#FFFFFF;

  /* Los tres planos */
  --rosa:#D2225E;             /* rosa mexicano: el color de marca */
  --rosa-2:#A81447;
  --rosa-tenue:#FBE4EC;
  --ocre:#E0A126;             /* el amarillo de la luz */
  --ocre-2:#A87611;
  --ocre-tenue:#FAEFD7;
  --barro:#5E2320;            /* muro de barro, para lo oscuro */
  --barro-2:#7C332D;
  --anil:#2E3B6B;             /* añil: un acento frío, muy poco */

  --sans:ui-sans-serif,"Segoe UI Variable Text","Segoe UI",system-ui,Roboto,
    "Helvetica Neue",Arial,sans-serif;
  --disp:ui-sans-serif,"Segoe UI Variable Display","Segoe UI Semibold","Segoe UI",
    system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --ancho:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--cal); color:var(--tinta); font-family:var(--sans);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0; font-family:var(--disp); font-weight:800; line-height:1.02;
  letter-spacing:-.035em}
p{margin:0}
a{color:inherit}
img{display:block; max-width:100%; height:auto}
:focus-visible{outline:3px solid var(--rosa); outline-offset:2px}
.wrap{width:min(var(--ancho),100% - 44px); margin-inline:auto}

/* La cejilla: versalitas anchas. Aparece en cada sección y es media identidad. */
.ceja,.kick{font-size:12px; font-weight:800; letter-spacing:.24em;
  text-transform:uppercase; color:var(--rosa-2)}
.kick.claro{color:var(--ocre)}

/* ── cabecera ──────────────────────────────────────────────────────────── */
.top{position:sticky; top:0; z-index:30; background:rgba(247,242,232,.94);
  backdrop-filter:blur(10px); border-bottom:2px solid var(--tinta)}
.top .wrap{display:flex; align-items:center; gap:26px; padding:13px 0}
.mark{display:inline-flex; align-items:center; gap:9px; text-decoration:none; flex:none}
.mark b{font-family:var(--disp); font-size:21px; font-weight:800; letter-spacing:-.04em}
.mark span{font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:800; color:var(--blanco); background:var(--rosa); padding:3px 7px}
.top nav{margin-left:auto; display:flex; gap:26px; font-size:15px; font-weight:600;
  color:var(--suave)}
.top nav a{text-decoration:none}
.top nav a:hover{color:var(--rosa)}

/* ── botones: rectángulos, sin radio, con un desplazamiento al pulsar ──── */
.btn{display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--disp); font-weight:800; font-size:16.5px; padding:14px 26px;
  border:2px solid var(--tinta); background:var(--rosa); color:var(--blanco);
  box-shadow:5px 5px 0 var(--tinta);
  transition:transform .12s ease, box-shadow .12s ease, background .16s ease}
.btn:hover{transform:translate(2px,2px); box-shadow:3px 3px 0 var(--tinta)}
.btn:active{transform:translate(5px,5px); box-shadow:0 0 0 var(--tinta)}
.btn.sm{padding:9px 17px; font-size:14.5px; box-shadow:4px 4px 0 var(--tinta)}
.btn.ocre{background:var(--ocre); color:var(--tinta)}
.btn.hueca{background:transparent; color:var(--tinta); box-shadow:none}
.btn.hueca:hover{background:var(--tinta); color:var(--cal); transform:none}
.btn.hueca.claro{color:var(--cal); border-color:var(--cal)}
.btn.hueca.claro:hover{background:var(--cal); color:var(--tinta)}
.arw{font-size:1.05em; line-height:1}

/* ── portada: un muro rosa encima de la foto ───────────────────────────── */
.hero{position:relative; background:var(--cal); overflow:hidden}
.hero-foto{position:absolute; inset:0 0 0 38%; display:block}
.hero-foto img{width:100%; height:100%; object-fit:cover; object-position:60% 50%}
/* La rendija de luz: una franja ocre que cruza el encuentro de los dos planos,
   que es lo que hace Barragán con el sol y una pared. */
.hero::after{content:""; position:absolute; top:0; bottom:0; left:calc(38% - 14px);
  width:14px; background:var(--ocre); z-index:2}
.hero .wrap{position:relative; z-index:3}
.hero-muro{background:var(--rosa); color:var(--blanco); max-width:640px;
  padding:60px 52px 56px; margin:64px 0 96px; box-shadow:14px 14px 0 var(--barro)}
.hero-muro .ceja{color:var(--ocre-tenue)}
.hero h1{font-size:clamp(40px,6.4vw,74px); margin:16px 0 20px}
.hero .lede{font-size:19.5px; line-height:1.5; color:#FFF0F5}
.hero .firma{margin-top:18px; font-family:var(--disp); font-weight:800;
  font-size:19px; letter-spacing:-.02em}
.hero .cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.hero .btn{border-color:var(--barro); box-shadow:5px 5px 0 var(--barro)}
.hero .btn.hueca{background:transparent; color:var(--blanco); border-color:var(--blanco);
  box-shadow:none}
.hero .btn.hueca:hover{background:var(--blanco); color:var(--rosa)}
.hero .nota{margin-top:20px; font-size:14.5px; color:#FFD9E5; font-weight:600}

/* ── franja de fichas ──────────────────────────────────────────────────── */
.franja{background:var(--tinta); color:var(--cal); padding:22px 0}
.franja .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px}
.franja b{font-family:var(--disp); font-size:15px; letter-spacing:.02em}
.fichas{display:flex; flex-wrap:wrap; gap:8px}
.fichas span{border:1.5px solid var(--barro-2); color:var(--ocre); padding:5px 12px;
  font-size:13.5px; font-weight:700; letter-spacing:.02em}

/* ── secciones ─────────────────────────────────────────────────────────── */
.sec{padding:96px 0}
.sec-hd{max-width:820px}
.sec-hd.centro{margin-inline:auto; text-align:center}
.sec-hd h2{font-size:clamp(31px,4.3vw,52px); margin:14px 0 18px}
.sec-sub{color:var(--suave); font-size:18px; max-width:74ch}
.sec-hd.centro .sec-sub{margin-inline:auto}
.sec-sub + .sec-sub{margin-top:14px}

/* ── la rejilla de doce: bloques de color con el número recortado ──────── */
.rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:2px; margin-top:52px; background:var(--tinta); border:2px solid var(--tinta)}
.celda{position:relative; background:var(--cal); padding:30px 26px 28px; overflow:hidden}
.celda:nth-child(3n+2){background:var(--ocre-tenue)}
.celda:nth-child(3n+3){background:var(--rosa-tenue)}
.celda .n{position:absolute; right:-10px; top:-22px; font-family:var(--disp);
  font-size:88px; font-weight:800; letter-spacing:-.06em; color:var(--tinta);
  opacity:.075; line-height:1}
.celda h3{font-size:20.5px; margin-bottom:9px}
.celda p{font-size:15.5px; color:var(--suave); line-height:1.55}
.rejilla-pie{margin-top:26px; font-size:15.5px; color:var(--suave); max-width:88ch}

/* ── dupla: foto con un muro de color detrás, desplazado ───────────────── */
.dupla{padding:88px 0}
.dupla .wrap{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.dupla.alterna .dupla-foto{order:2}
.dupla-foto{position:relative}
.dupla-foto::before{content:""; position:absolute; inset:26px -26px -26px 26px;
  background:var(--ocre)}
.dupla.alterna .dupla-foto::before{inset:26px 26px -26px -26px; background:var(--rosa)}
.dupla-foto img{position:relative; z-index:1; width:100%}
.dupla-texto h2{font-size:clamp(28px,3.5vw,42px); margin:14px 0 16px}
.dupla-texto > p{color:var(--suave); font-size:17.5px}
.lista{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:13px}
.lista li{position:relative; padding-left:26px; font-size:16px; line-height:1.55}
.lista li::before{content:""; position:absolute; left:0; top:9px; width:12px; height:12px;
  background:var(--rosa)}
.lista li b{font-weight:700}

/* ── el bloque oscuro: muro de barro ───────────────────────────────────── */
.oscura{background:var(--barro); color:var(--cal); padding:100px 0}
.oscura h2{font-size:clamp(31px,4.3vw,50px)}
.oscura .sec-sub{color:#E7CFC6}
.tablero{display:grid; grid-template-columns:400px 1fr; gap:56px; margin-top:58px;
  align-items:start}

/* Dibujo del panel, no una captura: una captura envejece con el primer cambio
   de pantalla y ésta se mantiene sola. */
.mini{background:var(--cal); color:var(--tinta); display:grid;
  grid-template-columns:150px 1fr; border:2px solid var(--tinta);
  box-shadow:12px 12px 0 var(--ocre); font-size:12px; overflow:hidden}
.mini-lat{background:var(--tinta); color:var(--cal-2); padding:14px 0}
.mini-marca{display:block; padding:0 13px 12px; font-family:var(--disp);
  font-weight:800; font-size:13px; color:var(--blanco)}
.mini-grp{display:block; padding:11px 13px 5px; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ocre)}
.mini-it{display:flex; justify-content:space-between; padding:6px 13px; color:#D8C9C4}
.mini-it.on{background:var(--rosa); color:var(--blanco); font-weight:700}
.mini-it i{font-style:normal; background:var(--ocre); color:var(--tinta);
  padding:0 6px; font-size:10px; font-weight:800}
/* En columna y con el botón abajo del todo: la barra lateral es más alta que
   las cuatro filas de ejemplo, y sin esto queda un hueco blanco debajo de
   «Publicar» que parece un dibujo a medio hacer. */
.mini-cuerpo{padding:14px; display:flex; flex-direction:column}
.mini-fila{display:flex; align-items:center; gap:8px; padding:8px 0;
  border-bottom:1px solid var(--linea)}
.mini-fila.cifras{gap:20px; border-bottom:2px solid var(--tinta); padding-bottom:12px}
.mini-fila.cifras span{display:flex; flex-direction:column; font-size:10px;
  color:var(--suave); text-transform:uppercase; letter-spacing:.08em}
.mini-fila.cifras b{font-family:var(--disp); font-size:20px; color:var(--tinta);
  letter-spacing:-.02em}
.pt{width:9px; height:9px; background:var(--rosa); flex:none}
.pt.am{background:var(--ocre)}
.mini-fila.tenue{color:var(--tenue); border-bottom:0}
.mini-pub{margin-top:auto; padding-top:10px; background:var(--rosa); color:var(--blanco);
  text-align:center; padding:8px; font-weight:800; font-family:var(--disp)}

.tablero-txt{display:grid; grid-template-columns:repeat(2,1fr); gap:28px 34px}
.tt h3{font-size:18px; color:var(--ocre); margin-bottom:7px}
.tt p{font-size:15.3px; color:#E9D6CE; line-height:1.55}
.tt p b{color:var(--blanco)}

/* ── mosaico de oficios ────────────────────────────────────────────────── */
.mosaico{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:2px; margin-top:48px; background:var(--tinta); border:2px solid var(--tinta)}
.mosaico figure{margin:0; position:relative; background:var(--cal)}
.mosaico img{width:100%; aspect-ratio:1/1; object-fit:cover}
/* Alto mínimo para dos líneas: «Artesanía y hecho a mano» parte y sin esto su
   franja queda más alta que las otras cinco, que en una retícula de cantos
   duros se nota inmediatamente. */
.mosaico figcaption{background:var(--cal); padding:12px 14px; font-family:var(--disp);
  font-weight:800; font-size:14.5px; letter-spacing:-.01em; min-height:66px;
  display:flex; align-items:center}
.mosaico figure:nth-child(2n) figcaption{background:var(--ocre-tenue)}
.mosaico figure:nth-child(3n) figcaption{background:var(--rosa-tenue)}
.mosaico-pie{margin-top:24px; color:var(--suave); font-size:16px; max-width:80ch}

/* ── pasos ─────────────────────────────────────────────────────────────── */
.pasos{background:var(--cal-2)}
.pasos-lista{list-style:none; margin:52px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:40px}
.pasos-lista li{border-top:4px solid var(--tinta); padding-top:22px}
.paso-n{display:block; font-family:var(--disp); font-size:58px; font-weight:800;
  line-height:.9; letter-spacing:-.06em; color:transparent;
  -webkit-text-stroke:2px var(--rosa); margin-bottom:14px}
.pasos-lista h3{font-size:21px; margin-bottom:9px}
.pasos-lista p{color:var(--suave); font-size:16px}

/* ── precio: un muro rosa con la cifra encima ──────────────────────────── */
.precio .tarifa{margin-top:52px; background:var(--rosa); color:var(--blanco);
  border:2px solid var(--tinta); box-shadow:14px 14px 0 var(--tinta);
  padding:52px 46px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:52px; align-items:start}
.cifra{font-family:var(--disp); display:flex; align-items:baseline; gap:12px;
  letter-spacing:-.05em}
.cifra b{font-size:clamp(46px,7vw,80px); font-weight:800; line-height:.9}
.cifra span{font-size:17px; font-weight:700; letter-spacing:0; color:#FFD9E5}
.cifra-nota{margin-top:16px; font-size:15.5px; color:#FFE6EE; max-width:36ch}
/* La anual se separa con una raya: es una decisión distinta de la mensual y
   leerlas seguidas hace que ninguna de las dos se lea. */
.cifra-anual{margin-top:16px; padding-top:16px;
  border-top:1.5px solid rgba(255,255,255,.35); font-size:16px; max-width:36ch}
.cifra-anual b{font-family:var(--disp)}
.tarifa .btn{margin-top:26px; background:var(--ocre); color:var(--tinta);
  border-color:var(--barro); box-shadow:5px 5px 0 var(--barro)}
.incluye{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.incluye li{display:grid; gap:2px; padding-left:24px; position:relative; font-size:15.5px}
.incluye li::before{content:""; position:absolute; left:0; top:8px; width:11px;
  height:11px; background:var(--ocre)}
.incluye b{font-family:var(--disp); font-size:16px}
.incluye span{color:#FFDCE7; line-height:1.45}
.precio-legal{margin-top:30px; font-size:14.5px; color:var(--suave); max-width:80ch}

/* ── preguntas ─────────────────────────────────────────────────────────── */
.faq{margin-top:44px; max-width:900px; margin-inline:auto; border-top:2px solid var(--tinta)}
.faq details{border-bottom:2px solid var(--tinta)}
.faq summary{cursor:pointer; list-style:none; padding:20px 42px 20px 0; position:relative;
  font-family:var(--disp); font-weight:800; font-size:18.5px; letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:6px; top:16px; font-size:26px;
  font-weight:800; color:var(--rosa); line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--rosa)}
.faq-a{padding:0 42px 22px 0; color:var(--suave); font-size:16.5px}

/* ── cierre ────────────────────────────────────────────────────────────── */
.cierre{background:var(--barro); color:var(--cal); padding:104px 0; text-align:center}
.cierre h2{font-size:clamp(31px,4.8vw,56px); margin-bottom:18px}
.cierre p{color:#E7CFC6; font-size:18px; max-width:62ch; margin-inline:auto}
.cierre .cta{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:32px}
.cierre .btn{border-color:var(--tinta); box-shadow:5px 5px 0 var(--tinta)}

/* ── pie ───────────────────────────────────────────────────────────────── */
.pie{background:var(--tinta); color:#C9B8B3; padding:56px 0 40px; font-size:15px}
.pie .mark b{color:var(--cal)}
.pie-lema{margin:14px 0 22px; max-width:52ch; color:#B5A29C}
.pie-nav{display:flex; flex-wrap:wrap; gap:12px 24px; padding:22px 0;
  border-top:1px solid var(--barro-2); border-bottom:1px solid var(--barro-2)}
.pie-nav a{text-decoration:none; color:#C9B8B3}
.pie-nav a:hover{color:var(--ocre)}
.pie-ent{margin:22px 0 16px; line-height:1.7; color:#B5A29C}
.pie-ent b{color:var(--cal)}
.pie-ent a{color:var(--ocre)}
.pie-copy{font-size:13.5px; color:#8E7B76}

/* ── pantallas estrechas ───────────────────────────────────────────────── */
@media (max-width:1000px){
  .tablero{grid-template-columns:1fr; gap:44px}
  .tablero-txt{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .precio .tarifa{grid-template-columns:1fr; gap:38px; padding:40px 30px;
    box-shadow:9px 9px 0 var(--tinta)}
}
@media (max-width:900px){
  .dupla .wrap{grid-template-columns:1fr; gap:56px}
  .dupla.alterna .dupla-foto{order:0}
  .dupla-foto::before{inset:20px -18px -18px 18px}
  .dupla.alterna .dupla-foto::before{inset:20px 18px -18px -18px}
}
@media (max-width:820px){
  .top nav{display:none}
  /* La portada deja de ser dos muros y pasa a ser uno encima del otro: el
     recorte lateral se come la cara de la foto en un teléfono. */
  .hero-foto{position:relative; inset:auto; height:52vw; max-height:340px}
  .hero::after{display:none}
  .hero-muro{margin:0 0 0; max-width:none; padding:40px 26px 44px;
    box-shadow:none; width:100%}
  .hero .wrap{width:100%}
  .sec,.dupla{padding:64px 0}
  .oscura,.cierre{padding:70px 0}
}
@media (max-width:520px){
  body{font-size:16.5px}
  .mini{grid-template-columns:1fr}
  .mini-lat{display:flex; gap:10px; overflow-x:auto; padding:10px}
  .mini-grp{display:none}
  .mini-it{white-space:nowrap; padding:5px 9px}
  .mosaico{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
  .btn:hover,.btn:active{transform:none}
}

/* ── Por qué nosotros ───────────────────────────────────────────────
   Una lista de filas, no una tabla: en el celular una tabla de dos
   columnas se estruja hasta ser ilegible, y esto se apila solo.
   La última fila es la nuestra y es la única con color, para que el
   ojo llegue a ella después de haber leído lo que cuestan las demás. */
.pq-lista{list-style:none; margin:0; padding:0; border-top:1px solid var(--linea-2)}
.pq-fila{display:grid; grid-template-columns:minmax(0,.4fr) minmax(0,1fr);
  gap:6px 34px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--linea)}
.pq-que{font-size:16px; font-weight:700; color:var(--tinta)}
.pq-cuesta{font-size:16.5px; color:var(--suave)}
.pq-fila.nuestra{background:var(--barro); border-bottom:0; margin-top:14px;
  padding:24px clamp(18px,2.6vw,28px)}
.pq-fila.nuestra .pq-que{color:var(--ocre)}
.pq-fila.nuestra .pq-cuesta{color:#fff; font-size:18px; line-height:1.55}
.pq-cierre{margin-top:26px; max-width:62ch; font-size:17px; color:var(--suave)}

@media (max-width:640px){
  .pq-fila{grid-template-columns:1fr; gap:4px}
  .pq-fila.nuestra{padding:20px}
}