/* =============================================================================
   motor.css - EL SISTEMA del Estudio. Se hereda; no se edita por prototipo.

   Aqui vive lo que NO sale del negocio: la escala, el ritmo, la inversion de
   tema, la barra, la camara del heroe, la mocion, la accion que siempre esta
   y el corte de telefono.

   Lo que SI sale del negocio -la paleta, las dos familias tipograficas, la
   composicion propia y la firma visual- vive en el `piel.css` de cada
   prototipo, que se carga DESPUES.

   No se copia a mano: `estudio/herramientas/sembrar.py <prototipo>` lo lleva
   a assets/ junto con las tres librerias.

   Los nombres de bloque son genericos a proposito: `.capitulo` es una foto a
   sangre con su texto abajo, y en Gumba's era un plato y en un taller es un
   servicio. Si un bloque solo tiene sentido en un rubro, va en su piel.
   ========================================================================== */

/* -- 1 · el numero que manda -------------------------------------------
   Toda la pagina reescala desde --paso... o mas exactamente desde el
   font-size de la raiz. Cambiarlo mueve la composicion entera sin que ningun
   componente se entere. Los VALORES de color y las FAMILIAS tipograficas NO
   estan aqui: salen del negocio y viven en su piel.css.                  */
:root{
  font-size: clamp(11.5px, .75vw + 8.6px, 16px);

  /* escala tipografica, en em contra la raiz */
  --t-1:.833em; --t0:1.111em; --t1:1.667em; --t2:2.222em;
  --t3:3.333em; --t4:5em;     --t5:7.222em;

  /* escalera de espacio, no lineal porque la percepcion no lo es */
  --s1:.277em; --s2:.416em; --s3:.833em; --s4:1.666em; --s5:2.5em;
  --s6:4.167em; --s7:6.666em; --s8:10.833em; --s9:15em;

  --ancho:82em;
  --canal:clamp(1.25rem,5vw,4rem);
  --r-sm:.555em; --r-md:1.111em; --r-pill:999em;
  --barra:4.4em;
}

/* La inversion de tema. No se escriben dos hojas de estilo: se escribe una y
   se cambia QUE SIGNIFICAN los dos anclajes. Cada componente usa solo --fg,
   --bg, --fg-soft, --hairline y --c-accent-t, asi que cae bien en los dos. */
/* ⚠️ EL ACENTO ES DECORATIVO Y TIENE DOS TINTAS DE TEXTO, NO UNA.
   Lo destapo el segundo prototipo: el rojo de las cajas de herramienta de un
   taller (#B02E1E) da 5,46:1 sobre hormigon claro -pasa- pero **2,84:1 sobre
   el negro frio**: como texto en tema oscuro no vale. En Gumba's daba 7,76
   en los dos, asi que con un solo prototipo el sistema parecia correcto y no
   lo era.
   Asi que cada piel declara TRES: --c-accent (fondo de boton, sellos, bordes)
   y las dos tintas de texto. Si una piel no las declara, se cae al acento y
   el medidor lo caza. */
.theme-dark { --fg:var(--c-paper); --bg:var(--c-ink);   --fg-soft:var(--c-muted-on-dark);  --hairline:var(--c-paper-15); --c-accent-t:var(--c-accent-claro,  var(--c-accent)); }
.theme-light{ --fg:var(--c-ink);   --bg:var(--c-paper); --fg-soft:var(--c-muted-on-light); --hairline:var(--c-ink-15);   --c-accent-t:var(--c-accent-oscuro, var(--c-accent)); }

/* -- 2 · base ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--text); font-size:var(--t0); line-height:1.55;
  letter-spacing:-.011em; color:var(--fg); background:var(--bg);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* las superficies del navegador. Salir con los colores de fabrica es la senal
   mas barata de que una pagina se monto en vez de construirse. */
::selection{background:var(--c-accent); color:var(--c-ink)}
:root{caret-color:var(--c-accent); scrollbar-color:var(--c-surface) var(--c-ink)}
img,svg,video,canvas{display:block; max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--c-accent); outline-offset:3px; border-radius:2px}

h1,h2,h3,h4{font-family:var(--display); font-weight:500; margin:0;
  font-optical-sizing:auto; overflow-wrap:break-word}
h1{font-size:var(--t5); line-height:.846; letter-spacing:-.04em}
h2{font-size:var(--t4); line-height:.889; letter-spacing:-.035em}
h3{font-size:var(--t3); line-height:1;    letter-spacing:-.03em}
h4{font-size:var(--t2); line-height:1.125;letter-spacing:-.025em}
p{margin:0 0 var(--s4)}
.lede{font-size:var(--t1); line-height:1.35; letter-spacing:-.02em}
.ceja{font-family:var(--text); font-size:.72em; font-weight:500;
      letter-spacing:.22em; text-transform:uppercase; color:var(--c-accent-t);
      margin:0 0 var(--s4)}
.fina{font-size:var(--t-1); line-height:1.4; color:var(--fg-soft)}

.wrap{width:min(var(--ancho),100% - var(--canal)*2); margin-inline:auto}
.banda{position:relative; padding-block:var(--s8); background:var(--bg); color:var(--fg)}
.banda + .banda{padding-top:var(--s8)}
.banda--cambia{padding-block:var(--s9)}

/* -- 3 · la barra ------------------------------------------------------ */
.barra{
  position:fixed; inset:0 0 auto; z-index:40; height:var(--barra);
  display:flex; align-items:center; gap:var(--s4);
  padding-inline:var(--canal);
  background:var(--c-ink); color:var(--c-paper);          /* SOLIDA, nunca translucida */
  border-bottom:1px solid var(--c-paper-15);
  transition:background-color .3s ease, color .3s ease, border-color .3s ease;
}
.barra.theme-light{background:var(--c-paper); color:var(--c-ink); border-bottom-color:var(--c-ink-15)}
.barra__marca{font-family:var(--display); font-weight:500; font-size:1.45em;
  letter-spacing:.02em; text-decoration:none; line-height:1; white-space:nowrap;
  transform-origin:50% 50%; will-change:auto}
.barra__marca sup{font-size:.32em; vertical-align:1.25em; letter-spacing:.2em;
  margin-left:.55em; font-family:var(--text); font-weight:500; opacity:.55}
.barra__enlaces{margin-left:auto; display:flex; gap:var(--s5); align-items:center;
                font-size:var(--t-1); letter-spacing:.1em; text-transform:uppercase}
.barra__enlaces a{text-decoration:none; opacity:.82; transition:opacity .2s}
.barra__enlaces a:hover{opacity:1}
.barra__tel{font-variant-numeric:tabular-nums; letter-spacing:.04em}
@media (max-width:860px){ .barra__enlaces .oculta-movil{display:none} }

/* -- 4 · el heroe: la camara ------------------------------------------- */
.dolly{position:relative; height:250vh}
.dolly__escena{
  position:sticky; top:0; height:100vh; height:100svh;
  overflow:hidden; background:#704122;                    /* medido del fondo */
}
/* SIN will-change y SIN translateZ: promover una capa que luego se escala es
   exactamente lo que hace que Chrome deje de pintarla. */
.dolly__fondo,.dolly__lamina{position:absolute; inset:0}
.dolly__fondo img,.dolly__lamina img{width:100%; height:100%; max-width:none; object-fit:cover}
.dolly__lamina{z-index:2}
.dolly__vineta{position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 48%,rgba(0,0,0,0) 0%,rgba(20,14,11,.28) 76%,rgba(20,14,11,.52) 100%)}
/* el velo que sostiene el contraste del texto: sube segun la sala se aclara */
.dolly__velo{position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.34;
  background:linear-gradient(180deg,rgba(15,10,8,.72) 0%,rgba(15,10,8,.42) 46%,rgba(15,10,8,.78) 100%)}
.dolly__ui{position:absolute; inset:0; z-index:5; display:grid; place-items:center;
  pointer-events:none; color:var(--c-paper); text-align:center}
.dolly__ui a{pointer-events:auto}
.dolly__titulo{font-size:clamp(2.8rem,9.5vw,7.5rem); line-height:.9; letter-spacing:-.045em;
  margin:0; display:grid; gap:.04em; max-width:14ch}
.dolly__titulo span{display:block}
.dolly__pie{position:absolute; left:0; right:0; bottom:var(--s8); z-index:5;
  display:flex; justify-content:center; gap:var(--s5); color:var(--c-paper);
  font-size:var(--t-1); letter-spacing:.18em; text-transform:uppercase}
.dolly__destino{position:absolute; left:50%; top:31%; width:9.5em; height:2.1em;
  transform:translate(-50%,-50%); pointer-events:none; visibility:hidden}

/* -- 5 · la afirmacion ------------------------------------------------- */
.claim{min-height:78vh; display:grid; align-content:center}
.claim h2{max-width:16ch}
.claim p{max-width:44ch; color:var(--fg-soft); margin-top:var(--s5)}

/* -- 6 · la prueba ----------------------------------------------------- */
.prueba{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4);
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  padding-block:var(--s6)}
.prueba div{display:grid; gap:var(--s2)}
.prueba b{font-family:var(--display); font-weight:500; font-size:var(--t3);
  line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.prueba span{font-size:var(--t-1); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-soft)}
@media (max-width:760px){ .prueba{grid-template-columns:repeat(2,1fr); gap:var(--s5)} }

/* -- 7 · el capitulo: foto a sangre con su texto abajo ---------------------------------- */
.banda.capitulo{position:relative; min-height:100vh; min-height:100svh;
  display:grid; align-items:end; padding:0; overflow:clip}
.capitulo__txt{padding-block:var(--s7)}
.capitulo__foto{position:absolute; inset:0; z-index:0}
.capitulo__foto img{width:100%; height:100%; object-fit:cover}
/* El velo va POR ENCIMA del lienzo del shader (z-index 2 contra 1). Sin
   esto el canvas de WebGL lo tapaba y el texto quedaba sobre la foto pelada:
   ilegible, y ademas era invisible en el CSS porque el degradado si estaba.
   El contraste sobre una foto no se arregla con text-shadow; eso es la senal
   de que nadie resolvio el problema. */
.capitulo__foto::after{content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(0deg,
    rgba(14,10,8,.95) 0%, rgba(14,10,8,.9) 30%,
    rgba(14,10,8,.62) 52%, rgba(14,10,8,.22) 76%, rgba(14,10,8,.05) 100%)}
.capitulo__txt{position:relative; z-index:3; color:var(--c-paper); max-width:34em}
.capitulo__txt h3{margin-bottom:var(--s3)}
.capitulo__precio{font-family:var(--display); font-size:var(--t2); color:var(--c-accent-t);
  font-variant-numeric:tabular-nums}
.capitulo__d{color:#EAE1D8; max-width:44ch}

/* -- 8 · el bloque partido, con sitio para el aire caliente (WebGL) ------------------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch}
.split__media{position:relative; min-height:34em; overflow:hidden; background:var(--c-deep)}
.split__media img,.split__media canvas{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* NO se le pone position: .capitulo__foto ya es absolute y .split__media
   relative. Al ir esta regla despues en el archivo, un position aqui le
   ganaba por orden y convertia la foto de fondo en una fila de la rejilla
   de 1877 px de alto. Medido el 26 ago 2026. */
[data-haze] canvas{position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity .8s ease; z-index:1}
[data-haze].webgl canvas{opacity:1}
[data-haze].webgl > img{opacity:0}
.split__txt{display:grid; align-content:center; padding:var(--s7) var(--canal);
  background:var(--c-surface); color:var(--c-paper)}
.split__txt h3{margin-bottom:var(--s4)}
.claim h2,.banda .wrap > h2{margin-bottom:var(--s4)}
.split__txt p{color:#D6C9C0; max-width:38ch}
@media (max-width:900px){ .split{grid-template-columns:1fr} .split__media{min-height:22em} }

/* -- 10 · las preguntas ------------------------------------------------ */
.faq{display:grid; gap:0; max-width:52em}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer; list-style:none; padding:var(--s4) 0;
  font-family:var(--display); font-size:var(--t1); letter-spacing:-.02em;
  display:flex; justify-content:space-between; gap:var(--s4); align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"\002B"; color:var(--c-accent-t); font-family:var(--text); font-size:.7em}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:0 0 var(--s4); color:var(--fg-soft); max-width:56ch}
.aviso{color:var(--c-accent-t); font-weight:500}

/* -- 11 · el cierre ---------------------------------------------------- */
.cierre{min-height:92vh; display:grid; align-content:center; gap:var(--s6)}
.cierre__grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s7); align-items:start}
.canal{display:grid; gap:var(--s4); align-content:start}
.canal a{display:flex; align-items:center; gap:var(--s4); text-decoration:none;
  padding:var(--s4); border:1px solid var(--hairline); border-radius:var(--r-md);
  transition:border-color .25s, transform .25s}
.canal a:hover{border-color:var(--c-accent)}
.canal a:active{transform:translateY(1px)}
.canal strong{display:block; font-family:var(--display); font-size:var(--t1); letter-spacing:-.02em}
.canal small{color:var(--fg-soft)}
.canal .flecha{margin-left:auto; color:var(--c-accent); font-size:var(--t1)}
.mapa{border:1px solid var(--hairline); border-radius:var(--r-md); overflow:hidden;
  background:#EDE3CF}
.mapa svg{width:100%; height:auto; display:block}
@media (max-width:900px){ .cierre__grid{grid-template-columns:1fr; gap:var(--s6)} }

/* -- 12 · el pie ------------------------------------------------------- */
.pie{padding-block:var(--s6); border-top:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; gap:var(--s4) var(--s6); align-items:baseline;
  font-size:var(--t-1); color:var(--fg-soft)}
.pie a{text-decoration:none}
.pie a:hover{color:var(--fg)}
.pie__nota{margin-left:auto; max-width:34ch; text-align:right}
@media (max-width:760px){ .pie__nota{margin-left:0; text-align:left} }

/* -- 13 · la accion que siempre esta -------------------------------- */
.pastilla{
  position:fixed; left:50%; bottom:var(--s4); transform:translateX(-50%);
  z-index:45; display:inline-flex; align-items:center; gap:var(--s3);
  padding:var(--s2) var(--s2) var(--s2) var(--s5);
  background:var(--c-accent); color:var(--on-accent, var(--c-ink)); text-decoration:none;
  border-radius:var(--r-pill); font-family:var(--display); font-weight:500;
  font-size:var(--t0); letter-spacing:-.01em;
  box-shadow:0 2px 14px rgba(0,0,0,.28);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.pastilla:hover{box-shadow:0 4px 22px rgba(0,0,0,.34)}
.pastilla:active{transform:translateX(-50%) translateY(2px) scale(.985)}
.pastilla__punta{display:grid; place-items:center; width:2.4em; height:2.4em;
  border-radius:50%; background:var(--on-accent, var(--c-ink)); color:var(--c-accent); font-size:.9em}
/* En el telefono la pastilla se encoge y baja: a 390 px se comia una linea
   de la carta. Sigue siendo la unica accion principal de la pagina. */
@media (max-width:760px){
  .pastilla{font-size:.92em; bottom:var(--s3); padding-left:var(--s4)}
  .pastilla__punta{width:2.1em; height:2.1em}
}
.ultimo{padding-bottom:var(--s8)}

/* -- 14 · idioma ------------------------------------------------------- */
.lang{display:inline-flex; border:1px solid var(--c-paper-25); border-radius:var(--r-pill);
  overflow:hidden; font-size:.9em}
.barra.theme-light .lang{border-color:var(--c-ink-15)}
.lang button{all:unset; cursor:pointer; padding:.3em .7em; letter-spacing:.1em; color:inherit}
.lang button:active{opacity:.7}
.lang button[aria-pressed="true"]{background:var(--c-paper); color:var(--c-ink)}
.barra.theme-light .lang button[aria-pressed="true"]{background:var(--c-ink); color:var(--c-paper)}

/* -- 15 · la mocion ---------------------------------------------------- */
/* Nada nace invisible sin JavaScript: la clase .js la pone un script del head.
   Sin ella todo esto no existe y la pagina se ve entera. */
.js .rv{opacity:0; transform:translateY(1.4em)}
.js .rv-blur{opacity:0; filter:blur(28px)}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv-blur{opacity:1; transform:none; filter:none}
  .dolly{height:100vh}
  .dolly__lamina{transform:scale(1.55)}
  .dolly__fondo{transform:scale(1.28)}
  .dolly__velo{opacity:.55}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
@media (max-width:991px){ .dolly{height:200vh} }

/* -- 16 · el telefono --------------------------------------------------
   La escala editorial que hace que esto parezca caro en un escritorio se
   sale de la pantalla en un movil: a 390 px el h2 daba seis caracteres por
   linea y las palabras se cortaban por el borde derecho. Se baja un peldano
   entero la escala de titulares, y la barra se aprieta: a 390 px se llevaba
   por delante el conmutador de idioma.
   Medido con `mirar-movil.py`, que renderiza a 390 px de verdad. NO vale
   redimensionar la ventana: se piden 402 y innerWidth devuelve 606. */
@media (max-width:760px){
  h1{font-size:var(--t4)}
  h2{font-size:var(--t3)}
  h3{font-size:var(--t2)}
  h4{font-size:var(--t1)}
  .lede{font-size:var(--t0)}
  .claim h2{max-width:none}
  .claim{min-height:auto}
  .banda{padding-block:var(--s7)}
  .banda + .banda{padding-top:var(--s7)}
  .banda--cambia{padding-block:var(--s7)}
  .barra{gap:var(--s3)}
  .barra__marca{font-size:1.12em}
  .barra__marca sup{font-size:.3em; margin-left:.35em}
  .barra__enlaces{gap:var(--s4)}
  .barra__tel{font-size:.84em}
  .lang{font-size:.76em}
  .prueba b{font-size:var(--t2)}
  .cierre{min-height:auto}
  .split__txt{padding:var(--s6) var(--canal)}
}