/* ==========================================================================
   MIUSH — sistema visual
   --------------------------------------------------------------------------
   Todo sale de dos sitios reales, no de un gusto:

   1. El LOGO. Su degradado va del magenta-púrpura al índigo. Textil se queda
      con el extremo magenta (el toque femenino), Escolar con el índigo (el
      toque serio). El inicio no toma partido: ahí los dos siguen fundidos.
   2. Las dos REFERENCIAS del hero que entregó el cliente. Las proporciones
      de la portada no son a ojo: están medidas sobre esas dos imágenes
      (1630x965 y 941x1672) y escritas abajo como múltiplos de `--u`.

   La única forma de recolorear el sitio entero es el bloque `:root` y los
   dos bloques `[data-mundo]`. Ni una regla más escribe un color a mano.
   ========================================================================== */

/* Respaldo de Playfair escalado para que, mientras la fuente web carga, los títulos
   ocupen casi las mismas líneas y al cambiar no empujen la cabecera (layout shift).
   94 % se eligió midiendo la altura real de las tres cabeceras en 15 anchos contra
   Playfair: la diferencia total bajó de 1070 px a 257 px. La cursiva lleva su propia
   cara porque sin ella Chrome inclina la Georgia normal, que es más angosta.
   ponytail: Android no trae Georgia ni Times y cae a su serif sin ajustar. */
@font-face{ font-family:"Playfair Georgia"; src:local("Georgia"); size-adjust:94%; }
@font-face{ font-family:"Playfair Georgia"; font-style:italic; src:local("Georgia Italic"), local("Georgia-Italic"); size-adjust:94%; }
@font-face{ font-family:"Playfair Georgia"; font-style:italic; font-weight:600 700; src:local("Georgia Bold Italic"), local("Georgia-BoldItalic"); size-adjust:94%; }
@font-face{ font-family:"Playfair Times"; src:local("Times New Roman"); size-adjust:107.35%; }

:root{
  /* --- Superficie ------------------------------------------------------- */
  --papel:   #F2ECF6;   /* perla lila: el promedio del fondo fotográfico */
  --papel-2: #E9E1F0;
  --papel-3: #FBF8FC;

  /* --- Tinta (medida sobre el titular de la referencia) ------------------ */
  --tinta:   #120B26;   /* casi negro con sesgo violeta, nunca neutro */
  --tinta-2: #4E466B;   /* cuerpo secundario */
  --tinta-3: #372A60;   /* bajada del hero */

  /* --- Los dos extremos del degradado del logo --------------------------- */
  --textil:  #B01A7D;   /* 5.72:1 sobre --papel */
  --escolar: #3D28A8;   /* 9.24:1 sobre --papel */
  --grad-a:  #A3218A;   /* arranque de la cursiva del titular */
  --grad-b:  #4634A0;   /* cierre de la cursiva del titular */

  --linea:   color-mix(in srgb, var(--tinta) 14%, transparent);
  --linea-2: color-mix(in srgb, var(--tinta) 8%, transparent);
  --vidrio:  color-mix(in srgb, #FFFFFF 68%, transparent);
  --vidrio-borde: color-mix(in srgb, #FFFFFF 78%, transparent);

  --acento:       var(--tinta);
  --acento-texto: var(--tinta);
  --acento-suave: var(--papel-2);

  /* --- Tipografía -------------------------------------------------------- */
  --display: "Playfair Display", "Playfair Georgia", "Playfair Times", serif;
  --texto:   "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --t-base:  clamp(1rem, .96rem + .18vw, 1.075rem);
  --t-guia:  clamp(1.05rem, .99rem + .3vw, 1.2rem);
  --t-h2:    clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
  --t-h3:    clamp(1.18rem, 1.06rem + .5vw, 1.42rem);
  --t-micro: .78rem;
  --ancho-texto: 58ch;

  /* --- Ritmo -------------------------------------------------------------*/
  --e-1:.5rem; --e-2:.85rem; --e-3:1.35rem; --e-4:2.1rem; --e-5:3.4rem;
  --e-seccion: clamp(4.5rem, 2.5rem + 7vw, 9rem);
  --envoltura: 1180px;
  --barra: 5rem;   /* la isla + su aire, para el `top` de lo pegajoso */

  --r-1:10px; --r-2:16px; --r-3:22px; --r-4:30px;
  --sal: cubic-bezier(.16,1,.3,1);
  --sal-2: cubic-bezier(.32,.72,0,1);

  /* Sombras teñidas de violeta, nunca negro puro. */
  --s-1: 0 1px 2px color-mix(in srgb, var(--tinta) 7%, transparent);
  --s-2: 0 2px 4px color-mix(in srgb, var(--tinta) 6%, transparent),
         0 12px 28px -14px color-mix(in srgb, var(--tinta) 30%, transparent);
  --s-vidrio: 0 1px 1px color-mix(in srgb,#fff 70%,transparent) inset,
              0 -1px 1px color-mix(in srgb,var(--tinta) 6%,transparent) inset,
              0 2px 6px color-mix(in srgb, var(--tinta) 7%, transparent),
              0 18px 40px -22px color-mix(in srgb, var(--tinta) 45%, transparent);
}

[data-mundo="textil"]{
  --acento: var(--textil); --acento-texto: var(--textil);
  --acento-suave: #F9E9F4;
  --filete: solid;                     /* marco de bastidor de serigrafía */
  --trama:
    repeating-linear-gradient( 45deg, color-mix(in srgb,var(--tinta) 4%,transparent) 0 .5px, transparent .5px 9px),
    repeating-linear-gradient(-45deg, color-mix(in srgb,var(--tinta) 4%,transparent) 0 .5px, transparent .5px 9px);
  --trama-tam: auto;
}
[data-mundo="escolar"]{
  --acento: var(--escolar); --acento-texto: var(--escolar);
  --acento-suave: #E9E5F9;
  --filete: dotted;                    /* pauta de cuaderno */
  --trama: radial-gradient(color-mix(in srgb,var(--tinta) 7%,transparent) .6px, transparent .6px);
  --trama-tam: 6px 6px;
}
:root{
  --filete: solid;
  --trama: radial-gradient(color-mix(in srgb,var(--tinta) 6%,transparent) .5px, transparent .5px);
  --trama-tam: 4px 4px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--texto);
  font-size:var(--t-base);
  line-height:1.62;
  color:var(--tinta);
  background:
    radial-gradient(120% 80% at 15% 0%, #FBF6FD 0%, transparent 60%),
    radial-gradient(90% 70% at 95% 20%, #F4EAF7 0%, transparent 55%),
    linear-gradient(180deg, var(--papel) 0%, var(--papel-2) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Grano fino sobre todo el documento: rompe la planitud del degradado.
   Fijo y sin eventos, nunca dentro de un contenedor que hace scroll. */
.trama{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:var(--trama); background-size:var(--trama-tam);
  /* Medido a ojo sobre la foto: por encima de .35 la malla se lee como un
     defecto de impresion en vez de como textura. */
  opacity:.32;
}
/* Sube el contenido por encima de la trama fija. Excluye a los dos hijos que
   traen su propia posicion: `body > *:not(.trama)` pesa (0,1,1) y le ganaba a
   `.saltar` (absolute) y a `.barra` (fixed), dejandolas en `relative`. El
   enlace de salto volvia asi al flujo y abria 28px de franja sobre la portada
   -- justo el hueco que se veia arriba del hero. */
body > *:not(.trama):not(.saltar):not(.barra){ position:relative; z-index:1; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3{ font-family:var(--display); font-weight:700; line-height:1.12;
  letter-spacing:-.015em; margin:0; text-wrap:balance; }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); letter-spacing:-.01em; }
p{ margin:0; text-wrap:pretty; }
em,i{ font-style:italic; }

::selection{ background:color-mix(in srgb, var(--acento) 24%, transparent); color:var(--tinta); }
:focus-visible{ outline:2px solid var(--acento-texto); outline-offset:3px; border-radius:4px; }
:root{ accent-color:var(--acento); scrollbar-color: color-mix(in srgb,var(--tinta) 28%,transparent) transparent; }

.envoltura{ width:min(100% - 2 * clamp(1.1rem, 4vw, 2.4rem), var(--envoltura)); margin-inline:auto; }
.micro{ font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--tinta-2); }
.guia{ font-size:var(--t-guia); color:var(--tinta-2); max-width:var(--ancho-texto); }
.sec{ color:var(--tinta-2); }
.pendiente{ font-style:italic; color:var(--tinta-2); opacity:.85; }
.num{ font-variant-numeric:tabular-nums; }

.saltar{
  position:absolute; left:.6rem; top:-4rem; z-index:60;
  background:var(--tinta); color:var(--papel-3); padding:.75rem 1.1rem;
  border-radius:var(--r-1); text-decoration:none; font-weight:600;
  transition:top .2s var(--sal);
}
.saltar:focus{ top:.6rem; }

/* ==========================================================================
   LA ISLA
   --------------------------------------------------------------------------
   No es una barra pegada al borde: es una pastilla de vidrio flotando, con el
   logotipo real dentro. Se esconde al bajar y vuelve completa al primer gesto
   de subir, para que la lectura no compita con la navegacion.

   Esto si necesita un listener de scroll -- la direccion del gesto no se puede
   sacar de un IntersectionObserver ni de una timeline de CSS. Es pasivo, lee
   `scrollY` UNA vez por fotograma y solo cambia un atributo; el movimiento lo
   hace el compositor con `transform`. No es lo mismo que animar por scroll,
   que sigue prohibido en este proyecto.
   ========================================================================== */
.barra{
  /* Fija, no pegajosa: pegajosa seguia ocupando su alto en el flujo y abria
     una franja clara sobre la foto de la portada. Se escribe con `body >`
     porque `body > *:not(.trama)` de la base pesa (0,1,1) y le ganaba a
     `.barra` a secas (0,1,0), dejandola en `relative`. */
  position:fixed; top:0; left:0; right:0; z-index:30;
  padding-block:.7rem;
  pointer-events:none;                     /* solo la isla recibe clics */
  transition:transform .5s var(--sal-2), opacity .35s var(--sal-2);
}
.barra[data-oculta="si"]{ transform:translateY(-140%); opacity:0; }
.barra[data-sobre-portada="si"]{ transform:translateY(-140%); opacity:0; }

.barra__isla{
  pointer-events:auto;
  display:flex; align-items:center; gap:clamp(.5rem, 2vw, 1.4rem);
  min-height:3.4rem;
  padding:.45rem .5rem .45rem clamp(.8rem, 2.5vw, 1.2rem);
  border-radius:999px;
  /* Vidrio: tinte + borde interior claro + sombra contenida (no un panel plano) */
  background:linear-gradient(180deg,
    color-mix(in srgb,#fff 72%,transparent),
    color-mix(in srgb, var(--acento) 5%, color-mix(in srgb,#fff 58%,transparent)));
  border:1px solid var(--vidrio-borde);
  box-shadow:var(--s-vidrio);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .barra__isla{ backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5); }
}
@media (prefers-reduced-transparency: reduce){
  .barra__isla{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--papel-3); }
}
@media (prefers-reduced-motion: reduce){
  .barra{ transition:none; }
}

.barra nav{ display:flex; gap:.2rem; margin-left:auto; }
.barra nav a{
  text-decoration:none; font-weight:500; color:var(--tinta-2);
  padding:.7rem .8rem; min-height:44px; display:inline-flex; align-items:center;
  border-radius:999px; transition:color .25s var(--sal), background .25s var(--sal);
  white-space:nowrap;
}
.barra nav a:hover{ color:var(--tinta); background:color-mix(in srgb,var(--tinta) 6%,transparent); }
.barra nav a[aria-current="page"]{ color:var(--acento-texto); font-weight:600;
  background:color-mix(in srgb, var(--acento) 10%, transparent); }

/* La marca: el logotipo real, no un texto que lo imita. */
.marca{
  display:inline-flex; align-items:center; gap:.5rem;
  text-decoration:none; flex:none; min-height:44px;
}
.marca img{ height:clamp(1.35rem, 3.4vw, 1.75rem); width:auto; }
.marca__division{
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:clamp(.92rem, 2.4vw, 1.08rem); color:var(--acento-texto);
  letter-spacing:-.01em;
}
/* En el pie el logotipo va sobre oscuro: se aclara sin repintarlo. */
.pie .marca img{ height:1.6rem; filter:brightness(1.35) saturate(1.1); }
.pie .marca__division{ color:#C9B6E4; }

.barra .btn{ min-height:44px; padding:.6rem 1.05rem; box-shadow:var(--s-1); }

/* ==========================================================================
   Botones
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:48px; padding:.8rem 1.35rem;
  background:var(--tinta); color:var(--papel-3);
  border:1px solid transparent; border-radius:999px;
  font:inherit; font-weight:600; text-decoration:none; cursor:pointer;
  box-shadow:var(--s-2);
  transition:transform .35s var(--sal-2), box-shadow .35s var(--sal-2), background .25s var(--sal);
}
.btn svg{ width:1.05em; height:1.05em; flex:none; transition:transform .35s var(--sal-2); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 6px 12px -4px color-mix(in srgb,var(--tinta) 22%,transparent), 0 22px 44px -20px color-mix(in srgb,var(--tinta) 55%,transparent); }
.btn:hover svg{ transform:translateX(3px); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn--linea{
  background:color-mix(in srgb,#fff 55%,transparent); color:var(--tinta);
  border-color:var(--linea); box-shadow:var(--s-1);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.btn--linea:hover{ background:color-mix(in srgb,#fff 82%,transparent); }
.btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; box-shadow:none; }
.btn[aria-disabled="true"]:hover{ transform:none; }
.acciones{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-4); }
/* Bajo 400px los dos botones de la cabecera ya quedan en dos filas con la fuente
   cargada, pero con la de respaldo (más angosta) entraban en una y saltaban al
   cargar Instrument Sans (CLS 0.12 medido en Escolar a 390px). En columna desde el
   inicio se ven igual y no saltan con ninguna fuente. */
@media (max-width:399px){ .encabezado-division .acciones{ flex-direction:column; align-items:flex-start; } }

/* ==========================================================================
   LA PORTADA
   --------------------------------------------------------------------------
   `--u` es la unidad de la composición: vale 1% del ancho de la referencia
   cuando la ventana tiene su misma proporción, y se encoge con el lado que
   primero se acabe — por eso `min(vw, svh)`. Es lo que hace que el logo, el
   titular y las dos tarjetas quepan juntos sobre el pliegue tanto en un
   monitor de 27" como en un iPhone SE, sin medir nada con JavaScript.

   Referencia horizontal: 1630x965 (proporción 1.6891) -> 1u = 16.30px
   Referencia vertical:    941x1672 (proporción 0.5628) -> 1u =  9.41px

   Todos los múltiplos de abajo salen de medir esas dos imágenes. Dos avisos
   para quien los toque:

   a) Los huecos verticales NO son los medidos de tinta a tinta. Una caja de
      texto de CSS ya trae su medio-interlineado arriba y abajo; sumarle el
      hueco medido lo cuenta dos veces. Los `margin-top` de abajo ya llevan
      ese descuento (el titular perdió 1.35u, la bajada 0.46u).
   b) El coeficiente de `svh` tampoco es la proporción de la referencia, por
      lo mismo: la composición armada en CSS mide 61u de alto, no 53u, así
      que el techo real es 100svh/61 = 1.63; se usa 1.55 para dejar aire.
   ========================================================================== */
.entrada{
  --u: clamp(3px, min(1vw, .80svh), 9.5px);     /* vertical por defecto */
  position:relative; isolation:isolate;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding-block: calc(6 * var(--u)) calc(15 * var(--u));
  text-align:center;
  background-image:url("img/fondo-hero-movil.webp");
  background-size:cover; background-position:center; background-color:var(--papel);
}
@media (min-width:900px) and (min-aspect-ratio:1/1){
  .entrada{
    --u: clamp(8.5px, min(1vw, 1.62svh), 17px);
    background-image:url("img/fondo-hero.webp");
    padding-block: calc(4.6 * var(--u)) calc(8 * var(--u));
  }
}

/* Velo mínimo: sube el contraste del texto sobre la seda sin apagar la foto. */
.entrada::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    /* El canto de abajo se disuelve en el papel. Sin esto la foto termina
       en una línea recta y la página se lee como dos piezas pegadas. */
    linear-gradient(180deg, transparent 58%,
      color-mix(in srgb, var(--papel) 55%, transparent) 82%,
      var(--papel) 100%),
    radial-gradient(72% 55% at 50% 42%,
      color-mix(in srgb,#fff 34%,transparent) 0%, transparent 72%);
}

.entrada__aire{
  display:flex; flex-direction:column; align-items:center;
  padding-inline:clamp(.9rem, 4vw, 2rem);
  width:100%;
}

/* --- Logo --------------------------------------------------------------- */
.entrada__logo{
  width:calc(51.6 * var(--u));           /* medido: 486/941 */
  max-width:min(88%, 460px);
  filter:drop-shadow(0 6px 18px color-mix(in srgb,var(--grad-b) 22%,transparent));
}
@media (min-width:900px) and (min-aspect-ratio:1/1){
  .entrada__logo{ width:calc(24.6 * var(--u)); max-width:none; }  /* medido: 401/1630 */
}

/* --- Filigrana: hilo fino con un destello al centro ---------------------- */
.filigrana{
  display:flex; align-items:center; justify-content:center; gap:calc(1.2 * var(--u));
  width:calc(24 * var(--u)); margin-top:calc(3.2 * var(--u));
}
.filigrana i{
  flex:1; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--grad-b) 45%,transparent));
}
.filigrana i:last-child{ transform:scaleX(-1); }
.filigrana svg{ width:calc(2.6 * var(--u)); height:calc(2.6 * var(--u)); flex:none; color:var(--grad-a); }
@media (min-width:900px) and (min-aspect-ratio:1/1){
  .filigrana{ width:calc(11.4 * var(--u)); margin-top:calc(1.9 * var(--u)); gap:calc(.8 * var(--u)); }
  .filigrana svg{ width:calc(1.5 * var(--u)); height:calc(1.5 * var(--u)); }
}

/* --- Titular ------------------------------------------------------------ */
.entrada__titular{
  font-size:calc(8.65 * var(--u));       /* medido: altura de la 'T' = 57/941 */
  line-height:1.28;
  letter-spacing:-.022em;
  margin-top:calc(1.2 * var(--u));
  color:var(--tinta);
  text-wrap:nowrap;                       /* los saltos los pone el <br> */
}
.entrada__titular em{
  display:inline-block;
  background:linear-gradient(96deg, var(--grad-a) 8%, #7B2C9B 46%, var(--grad-b) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-inline:.06em;                   /* la cursiva se sale de su caja */
}
@media (min-width:900px) and (min-aspect-ratio:1/1){
  .entrada__titular{
    font-size:calc(5.89 * var(--u));      /* medido: altura de la 'T' = 67/1630 */
    line-height:1.15; margin-top:calc(.5 * var(--u));
  }
}

/* --- Bajada ------------------------------------------------------------- */
.entrada__bajada{
  font-size:max(1rem, calc(3.27 * var(--u)));
  line-height:1.56;
  margin-top:calc(3.1 * var(--u));
  color:var(--tinta-3);
  font-weight:500;
}
@media (min-width:900px) and (min-aspect-ratio:1/1){
  .entrada__bajada{
    font-size:max(.95rem, calc(1.35 * var(--u))); line-height:1.64;
    margin-top:calc(.6 * var(--u));
  }
}

/* --- Las dos puertas ---------------------------------------------------- */
.puertas{
  display:grid; grid-template-columns:1fr 1fr;
  gap:calc(4 * var(--u));
  width:min(100%, calc(73 * var(--u)));     /* medido 68.3 (643/941); se sube a 73
     porque a tamaño legible "MIUSH Escolar" no entra en una línea con 68.3,
     y la referencia SÍ lo muestra en una. Manda el resultado, no el número. */
  margin-top:calc(8 * var(--u));
}
@media (min-width:900px) and (min-aspect-ratio:1/1){
  .puertas{
    gap:calc(1.5 * var(--u));
    width:min(100%, calc(58.2 * var(--u)));  /* medido: 948/1630 */
    margin-top:calc(3.15 * var(--u));
  }
}

.puerta{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:calc(2 * var(--u));
  /* Medido a 375px: la tarjeta mide 121px y "MIUSH Textil" pide 103px al
     tamaño mínimo legible. Con 2.4u de relleno lateral quedaban 101px y el
     nombre partía en dos; 1.6u deja 111px y entra en una línea. */
  padding:calc(4.4 * var(--u)) calc(1.6 * var(--u)) calc(4 * var(--u));
  border-radius:calc(2.8 * var(--u));
  text-decoration:none; text-align:center;
  min-height:44px;
  /* Vidrio: tinte del acento + blanco, borde interior claro, sombra contenida.
     El tinte no es decorativo — es lo que estabiliza el contraste del texto
     sobre una foto que cambia de luminosidad de un lado al otro. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #fff 74%, transparent) 0%,
      color-mix(in srgb, var(--acento) 7%, color-mix(in srgb,#fff 62%, transparent)) 100%);
  border:1px solid var(--vidrio-borde);
  box-shadow:var(--s-vidrio);
  transition:transform .5s var(--sal-2), box-shadow .5s var(--sal-2);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .puerta{ backdrop-filter:blur(14px) saturate(1.35); -webkit-backdrop-filter:blur(14px) saturate(1.35); }
}
/* El resplandor de color bajo la tarjeta: es lo que dice de qué negocio es
   antes de leer una sola palabra. */
.puerta::after{
  content:""; position:absolute; z-index:-1;
  left:14%; right:14%; bottom:-14px; height:24%;
  border-radius:999px;
  background:var(--acento); opacity:.26; filter:blur(30px);
  transition:opacity .5s var(--sal-2), transform .5s var(--sal-2);
}
.puerta:hover{ transform:translateY(-4px); }
.puerta:hover::after{ opacity:.42; transform:translateY(4px) scaleX(1.06); }
.puerta:active{ transform:translateY(-1px) scale(.995); }

.puerta__icono{
  display:grid; place-items:center; flex:none;
  width:calc(10.6 * var(--u)); height:calc(10.6 * var(--u));
  border-radius:50%;
  background:color-mix(in srgb, #fff 55%, transparent);
  border:1px solid color-mix(in srgb, var(--acento) 22%, transparent);
  color:var(--acento-texto);
}
.puerta__icono svg{ width:52%; height:52%; }
.puerta__texto{ display:flex; flex-direction:column; gap:calc(1.1 * var(--u)); min-width:0; }
.puerta__nombre{
  font-family:var(--display); font-weight:700;
  font-size:max(1.04rem, calc(3.5 * var(--u))); line-height:1.18; color:var(--tinta);
  letter-spacing:-.01em;
}
.puerta__nombre em{ color:var(--acento-texto); }
.puerta__que{ font-size:max(.875rem, calc(2.45 * var(--u))); line-height:1.42; color:var(--tinta-2); }
.puerta__ir{ display:none; }

@media (min-width:900px) and (min-aspect-ratio:1/1){
  .puerta{
    flex-direction:row; align-items:center; text-align:left;
    gap:calc(1.35 * var(--u));
    padding:calc(2 * var(--u)) calc(1.8 * var(--u));
    border-radius:calc(1.45 * var(--u));
    min-height:calc(11.8 * var(--u));          /* medido: 193/1630 */
  }
  .puerta__icono{ width:calc(3.9 * var(--u)); height:calc(3.9 * var(--u)); }
  .puerta__texto{ gap:calc(.5 * var(--u)); margin-right:auto; }
  .puerta__nombre{ font-size:max(1.05rem, calc(1.84 * var(--u))); }
  .puerta__que{ font-size:max(.82rem, calc(1.05 * var(--u))); line-height:1.45; }
  .puerta__ir{
    display:grid; place-items:center; flex:none;
    width:calc(2.9 * var(--u)); height:calc(2.9 * var(--u));
    border-radius:50%; color:var(--acento-texto);
    border:1px solid color-mix(in srgb, var(--acento) 40%, transparent);
    transition:background .35s var(--sal-2), transform .35s var(--sal-2);
  }
  .puerta__ir svg{ width:48%; height:48%; }
  .puerta:hover .puerta__ir{ background:color-mix(in srgb, var(--acento) 12%, transparent); transform:translateX(3px); }
}

/* --- Bajar -------------------------------------------------------------- */
.entrada__baja{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(2.5 * var(--u));
  display:flex; flex-direction:column; align-items:center; gap:calc(1.6 * var(--u));
  color:#4A2D8A; text-decoration:none; min-height:44px; padding:.4rem 1rem;
}
.entrada__baja span{
  font-size:max(.7rem, calc(1.9 * var(--u))); letter-spacing:.2em; text-transform:uppercase;
  font-weight:600;
}
.entrada__baja svg{ width:calc(2.6 * var(--u)); height:calc(2.6 * var(--u)); }
@media (min-width:900px) and (min-aspect-ratio:1/1){
  .entrada__baja{ bottom:calc(2 * var(--u)); gap:calc(.9 * var(--u)); }
  .entrada__baja span{ font-size:max(.68rem, calc(.85 * var(--u))); }
  .entrada__baja svg{ width:calc(1.3 * var(--u)); height:calc(1.3 * var(--u)); }
}
@media (prefers-reduced-motion: no-preference){
  .entrada__baja svg{ animation:respirar 2.8s var(--sal) infinite; }
}
@keyframes respirar{ 0%,100%{ transform:translateY(0); opacity:.75 } 50%{ transform:translateY(4px); opacity:1 } }

/* --- Entrada escalonada de la portada ----------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .entrada__aire > *{ animation:emerger .9s var(--sal) both; }
  .entrada__logo{    animation-delay:.05s; }
  .filigrana{        animation-delay:.20s; }
  .entrada__titular{ animation-delay:.28s; }
  .entrada__bajada{  animation-delay:.40s; }
  .puertas{          animation-delay:.52s; }
  .entrada__baja{    animation:asomar .9s .70s var(--sal) both; }
}
@keyframes asomar{
  from{ opacity:0; transform:translate(-50%, 18px); }
  to  { opacity:1; transform:translate(-50%, 0);    }
}
@keyframes emerger{
  from{ opacity:0; transform:translateY(18px); filter:blur(7px); }
  to  { opacity:1; transform:none;             filter:blur(0);   }
}

/* Sin transparencia: superficie casi opaca, mismo contraste. */
@media (prefers-reduced-transparency: reduce){
  .puerta{ backdrop-filter:none; -webkit-backdrop-filter:none;
    background:color-mix(in srgb, var(--acento) 5%, #fff); }
  .puerta::after{ display:none; }
  .barra{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--papel-3); }
}

/* ==========================================================================
   Encabezado de las dos divisiones — la misma seda, con más velo para que
   el texto largo se lea sin esfuerzo.
   ========================================================================== */
.encabezado-division{
  position:relative; isolation:isolate;
  padding-block:calc(var(--barra) + clamp(1rem, 2vw, 2rem)) var(--e-seccion);
  background-image:url("img/fondo-hero.webp");
  background-size:cover; background-position:center 30%;
}
.encabezado-division::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--papel-3) 62%, transparent) 0%,
    color-mix(in srgb, var(--papel) 88%, transparent) 82%,
    var(--papel) 100%);
}
.migaja{ font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--tinta-2); margin-bottom:var(--e-3); }
.migaja a{ color:inherit; text-decoration:none; padding:.6rem .1rem;
  min-height:44px; display:inline-flex; align-items:center; }
.migaja a:hover{ color:var(--acento-texto); }

.encabezado-division__rejilla{ display:grid; gap:var(--e-5); align-items:center; }
.encabezado-division h1{
  font-size:clamp(2.2rem, 1.2rem + 3.8vw, 3.9rem);
  line-height:1.09; letter-spacing:-.025em;
}
.encabezado-division h1 i{
  background:linear-gradient(96deg, var(--grad-a), var(--grad-b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-inline:.04em;
}
.encabezado-division .guia{ margin-top:var(--e-3); }
@media (min-width:820px){
  .encabezado-division__rejilla{ grid-template-columns:1.1fr .9fr; }
}

/* ==========================================================================
   Secciones
   ========================================================================== */
.seccion{ padding-block:var(--e-seccion); position:relative; }
/* Las secciones se montan unas sobre otras lo justo para que ningún borde
   coincida con el final de un fondo. La página se lee como una sola tela. */
.seccion + .seccion{ margin-top:calc(-1 * var(--e-2)); }
.seccion--corta{ padding-block:clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.encabezado-seccion{ max-width:var(--ancho-texto); margin-bottom:var(--e-5); }
.encabezado-seccion .guia{ margin-top:var(--e-3); }

/* Panel: la sección de contraste. Es una capa más profunda del MISMO mundo
   claro, no un salto a negro a mitad de página — eso rompía la seda. */
/* El fondo va en un ::before enmascarado, no en la propia sección. Motivo
   medido: el `radial-gradient` está centrado en `0%`, o sea sobre el borde
   superior, así que entraba a plena intensidad en la primera fila de píxeles
   (240.1 → 245.6 de luminancia en 1px, a todo lo ancho). Esa era la raya que
   se veía al empezar la sección; el degradado vertical de abajo no tenía la
   culpa. Enmascarando la capa entera, las dos entran y salen en transparente. */
.panel::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(80% 60% at 20% 0%, color-mix(in srgb,#fff 55%,transparent), transparent 65%),
    linear-gradient(180deg,
      transparent 0%, #EAE2F3 9%, #E4DAF0 55%, #EDE6F5 92%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
/* La trama local del panel se retira: la de fondo (fija) ya se ve a través,
   y dos retículas de 4px superpuestas con movimiento relativo producían
   muaré al hacer scroll. Se conserva el span por el marcado del pie. */
.panel .trama-local{ display:none; }
.panel > *{ position:relative; z-index:1; }

/* ==========================================================================
   Placa: el marco que sostiene cada imagen (doble bisel, no un borde suelto)
   ========================================================================== */
.placa{
  position:relative;
  padding:6px; border-radius:calc(var(--r-3) + 6px);
  background:color-mix(in srgb, #fff 46%, transparent);
  border:1px solid var(--vidrio-borde);
  box-shadow:var(--s-2);
}
.placa::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  border:1px var(--filete) color-mix(in srgb, var(--acento) 26%, transparent);
  transform:translate(-3px,3px); pointer-events:none;  /* marca de registro */
}
.placa > *{ border-radius:var(--r-3); overflow:hidden; }
.pie-foto{ display:block; margin-top:var(--e-2); color:var(--tinta-2); }

/* Hueco de imagen: reserva la proporción exacta para que nada salte al
   colocar la foto real. Ver IMAGENES.md. */
.slot{
  margin:0; position:relative; aspect-ratio:var(--ratio, 4/3);
  display:flex; flex-direction:column; justify-content:flex-end; gap:.4rem;
  padding:var(--e-3);
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb,var(--tinta) 4%,transparent) 0 8px,
      transparent 8px 16px),
    var(--papel-2);
  border:1px dashed color-mix(in srgb,var(--tinta) 18%,transparent);
  color:var(--tinta-2);
}
.slot__id{ font-size:var(--t-micro); font-weight:700; letter-spacing:.12em;
  color:var(--acento-texto); }
.slot__desc{ font-size:.82rem; line-height:1.4; max-width:44ch; }
.slot img{
  /* Absoluta, no hija de flexbox: `.slot` lleva `padding` para el texto del
     hueco, y una imagen en el flujo se quedaba dentro de ese relleno dejando
     un anillo con la trama del hueco alrededor de cada foto. */
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.slot:has(img){ background:none; border:0; }

/* ==========================================================================
   Cruce (inicio) · qué hacemos
   ========================================================================== */
.cruce{ display:grid; gap:var(--e-5); align-items:start; }
@media (min-width:900px){ .cruce{ grid-template-columns:1.05fr .95fr; } }

.cruce__lista{ list-style:none; margin:var(--e-4) 0 0; padding:0;
  display:flex; flex-direction:column; gap:var(--e-3); }
.cruce__lista li{ display:flex; gap:var(--e-3); align-items:flex-start; }
.cruce__lista svg{ width:24px; height:24px; flex:none; margin-top:.2rem; color:var(--acento-texto); }
.cruce__lista b{ display:block; }
.cruce__lista span span{ display:block; color:var(--tinta-2); font-size:.96em; max-width:52ch; }
/* Variante sin bajada: con una sola línea, el ícono se alinea al centro del
   texto y no a la primera línea de un párrafo que ya no existe. */
.cruce__lista--simple li{ align-items:center; }
.cruce__lista--simple svg{ margin-top:0; }
.cruce__lista--simple b{ font-size:1.02rem; }

/* Tres bloques de servicio: lo que el cliente hace, dicho con sus palabras */
.oficios{ display:grid; gap:var(--e-4); margin-top:var(--e-5); }
@media (min-width:760px){ .oficios{ grid-template-columns:repeat(3,1fr); } }
.oficio{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column;
  padding:var(--e-4);
  border-radius:var(--r-4);
  background:linear-gradient(180deg,
    color-mix(in srgb,#fff 72%,transparent),
    color-mix(in srgb, var(--acento) 6%, color-mix(in srgb,#fff 55%,transparent)));
  border:1px solid var(--vidrio-borde);
  box-shadow:var(--s-vidrio);
}
.oficio__marca{
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:color-mix(in srgb,#fff 60%,transparent);
  border:1px solid color-mix(in srgb, var(--acento) 24%, transparent);
  color:var(--acento-texto); margin-bottom:var(--e-3);
}
.oficio__marca svg{ width:22px; height:22px; }
.oficio h3{ margin-bottom:var(--e-2); }
.oficio p{ color:var(--tinta-2); font-size:.98rem; }
.oficio ul{ list-style:none; margin:var(--e-3) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.4rem; }
.oficio li{
  font-size:.82rem; font-weight:500; padding:.34rem .7rem; border-radius:999px;
  background:color-mix(in srgb, var(--acento) 12%, transparent);
  /* Medido: el acento puro daba 4.30:1 a 13px, por debajo de AA. */
  color:color-mix(in srgb, var(--acento) 74%, var(--tinta));
}
.oficio .btn{ margin-top:auto; padding-top:var(--e-3); }
.oficio__ir{
  margin-top:auto; padding-top:var(--e-4);
  display:inline-flex; align-items:center; gap:.45rem;
  min-height:44px; font-weight:600; text-decoration:none; color:var(--acento-texto);
}
.oficio__ir svg{ width:1em; height:1em; transition:transform .35s var(--sal-2); }
.oficio__ir:hover svg{ transform:translateX(4px); }

/* ==========================================================================
   Pasos
   ========================================================================== */
.pasos{ list-style:none; margin:0; padding:0; counter-reset:paso;
  display:grid; gap:var(--e-4); }
@media (min-width:700px){ .pasos{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1050px){ .pasos{ grid-template-columns:repeat(4,1fr); } }
.paso{ counter-increment:paso; padding-top:var(--e-3);
  border-top:1px var(--filete) var(--linea); }
.paso__marca{ display:block; font-family:var(--display); font-weight:700;
  font-size:1.1rem; color:var(--acento-texto); margin-bottom:var(--e-2); }
.paso__marca::before{ content:counter(paso,decimal-leading-zero); }
.paso h3{ margin-bottom:var(--e-2); }
.paso p{ color:var(--tinta-2); font-size:.97rem; max-width:56ch; }

/* ==========================================================================
   Técnicas · trabajos · prendas · útiles
   ========================================================================== */
/* Flex y no grid a propósito: con grid, las tarjetas de la última fila se pegan
   a la izquierda y la fila queda coja; con flex envuelto, la fila incompleta se
   centra sola en cualquier ancho. */
.tecnicas{ display:flex; flex-wrap:wrap; gap:var(--e-3); }
.tecnicas > *{ flex:1 1 100%; }
@media (min-width:640px){ .tecnicas > *{ flex:0 1 calc((100% - var(--e-3)) / 2); } }
/* Son cuatro técnicas: 2x2 desde 640px y las cuatro en una sola fila desde
   1100px. La retícula de tres columnas era de cuando eran cinco (3 + 2); con
   cuatro dejaba una tarjeta sola abajo, que se lee como error de maquetación
   la centres o la cuelgues a la izquierda. Si algún día vuelven a ser cinco,
   este bloque vuelve a ser `/ 3` con `justify-content:center`. */
@media (min-width:1100px){
  .tecnicas > *{ flex:0 1 calc((100% - 3 * var(--e-3)) / 4); }
}
.tecnica{
  padding:var(--e-4); border-radius:var(--r-4);
  background:color-mix(in srgb,#fff 56%,transparent);
  border:1px solid var(--vidrio-borde); box-shadow:var(--s-1);
  display:flex; flex-direction:column;
}
.tecnica h3{ margin-bottom:var(--e-2); }
.tecnica p{ color:var(--tinta-2); font-size:.97rem; }
.tecnica dl{ display:flex; gap:.6rem; margin:var(--e-2) 0 0; font-size:.88rem;
  border-top:1px var(--filete) var(--linea-2); padding-top:var(--e-2); }
.tecnica dl:first-of-type{ margin-top:auto; padding-top:var(--e-3); }
.tecnica dt{ color:var(--tinta-2); flex:none; }
.tecnica dd{ margin:0; font-weight:600; }

/* Mismo motivo que .tecnicas: la fila incompleta tiene que centrarse, no colgar
   de la izquierda. */
.prendas,.trabajos{ display:flex; flex-wrap:wrap; gap:var(--e-4); }
.prendas > *,.trabajos > *{ flex:1 1 100%; }
@media (min-width:480px){
  .prendas > *,.trabajos > *{ flex:0 1 calc((100% - var(--e-4)) / 2); }
}
@media (min-width:900px){
  .trabajos{ justify-content:center; }
  .prendas > *,.trabajos > *{ flex:0 1 calc((100% - 2 * var(--e-4)) / 3); }
}
.prenda h3,.trabajo h3{ margin:var(--e-3) 0 var(--e-1); }
.prenda p,.trabajo p{ color:var(--tinta-2); font-size:.95rem; max-width:50ch; }

/* En celular (una sola columna) el título y la bajada van antes que la foto,
   solo en Textil. Escritorio y tablet (>=480px, ya en grilla) no cambian. */
@media (max-width:479px){
  .prenda{ display:flex; flex-direction:column; }
  .prenda h3{ order:-2; margin-top:0; }
  .prenda p{ order:-1; }
  .prenda .placa{ order:0; margin-top:var(--e-3); }
}

.utiles{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e-3); }
@media (min-width:640px){ .utiles{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .utiles{ grid-template-columns:repeat(3,1fr); } }
.utiles li{ padding:var(--e-3) var(--e-4); border-radius:var(--r-3);
  background:color-mix(in srgb,#fff 48%,transparent);
  border:1px solid var(--linea-2); }
.utiles b{ display:block; margin-bottom:.2rem; }
.utiles span{ color:var(--tinta-2); font-size:.93rem; }

/* Tarifa */
.tarifa{ border-top:1px var(--filete) var(--linea); }
.tarifa__fila{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem 1rem;
  padding:var(--e-3) 0; border-bottom:1px var(--filete) var(--linea-2);
}
.tarifa__fila b{ font-size:1.05rem; }
.tarifa__fila small{ color:var(--tinta-2); font-size:.92rem; }

/* Urgente */
.urgente{
  display:grid; gap:var(--e-3); align-items:center;
  padding:var(--e-4); border-radius:var(--r-4);
  background:linear-gradient(120deg,
    color-mix(in srgb, var(--acento) 9%, color-mix(in srgb,#fff 62%,transparent)),
    color-mix(in srgb,#fff 68%,transparent));
  border:1px solid color-mix(in srgb, var(--acento) 22%, transparent);
  box-shadow:var(--s-2);
}
.urgente > svg{ width:34px; height:34px; color:var(--acento-texto); }
.urgente p{ max-width:54ch; margin-top:.3rem; }
.urgente .acciones{ margin-top:0; }
@media (min-width:900px){
  .urgente{ grid-template-columns:auto 1fr auto; gap:var(--e-4); }
}

/* ==========================================================================
   Cierre y ficha
   ========================================================================== */
.cierre{ display:grid; gap:var(--e-5); align-items:start; }
@media (min-width:900px){ .cierre{ grid-template-columns:1.1fr .9fr; } }
.ficha{
  margin:0; padding:var(--e-4); border-radius:var(--r-4);
  background:color-mix(in srgb,#fff 58%,transparent);
  border:1px solid var(--vidrio-borde); box-shadow:var(--s-1);
}
.ficha > div{ display:flex; flex-wrap:wrap; gap:.2rem 1rem;
  padding:var(--e-2) 0; border-bottom:1px var(--filete) var(--linea-2); }
.ficha > div:last-child{ border-bottom:0; }
.ficha dt{ min-width:9.5rem; color:var(--tinta-2); font-size:.9rem;
  letter-spacing:.05em; text-transform:uppercase; font-weight:600; }
.ficha dd{ margin:0; font-weight:500; }
/* En celular la etiqueta va siempre arriba del dato. Sin esto, cada fila salta de
   linea o no segun lo largo del valor, y la ficha se ve dispareja. */
@media (max-width:560px){ .ficha dt{ flex-basis:100%; } }

/* ==========================================================================
   Pie
   --------------------------------------------------------------------------
   Entra por un degradado, no por un salto a oscuro: el ultimo tramo de la
   pagina se hunde en violeta profundo en vez de cortarse.
   ========================================================================== */
.pie{
  position:relative;
  padding-block:calc(var(--e-5) + 4rem) var(--e-5);
  margin-top:-4rem;
  background:linear-gradient(180deg,
    color-mix(in srgb, #3A2C60 0%, transparent) 0%,
    color-mix(in srgb, #33265A 58%, transparent) 28%,
    #241A3D 64%, #1A1230 100%);
  color:#E4DAF0;
}
.pie .trama-local{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,#F2ECF6 9%,transparent) .5px, transparent .5px);
  background-size:4px 4px;
}
.pie > *{ position:relative; z-index:1; }

.pie__fila{
  display:grid; gap:var(--e-4);
  align-items:start;
  padding-bottom:var(--e-4);
  border-bottom:1px solid color-mix(in srgb,#F2ECF6 12%,transparent);
}
@media (min-width:820px){
  .pie__fila{ grid-template-columns:auto 1fr auto; gap:var(--e-5); align-items:center; }
}
.pie .marca img{
  height:2.4rem; width:auto;
  /* El logotipo es el mismo archivo con alfa; sobre oscuro se levanta el
     brillo en vez de servir una segunda version del asset. */
  filter:brightness(1.4) saturate(1.05)
         drop-shadow(0 2px 10px color-mix(in srgb,#A3218A 35%,transparent));
}
.pie__linea{ color:#CDC2E0; font-size:.95rem; line-height:1.6; max-width:38ch; }
.pie nav{ display:flex; flex-wrap:wrap; gap:.2rem; }
.pie nav a{
  text-decoration:none; color:#CBBEE0; padding:.7rem .85rem;
  min-height:44px; display:inline-flex; align-items:center; border-radius:999px;
  transition:color .25s var(--sal), background .25s var(--sal);
}
.pie nav a:hover{ color:#fff; background:color-mix(in srgb,#fff 10%,transparent); }

.pie__legal{
  display:flex; flex-wrap:wrap; gap:.4rem 1.5rem;
  justify-content:space-between; padding-top:var(--e-3);
}
.pie__legal small{ color:#9A8DB4; font-size:.85rem; }

/* ==========================================================================
   Aparición al entrar en pantalla (IntersectionObserver en main.js)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  .js [data-aparece]{ opacity:0; transform:translateY(20px); filter:blur(5px); }
  .js [data-aparece].visible{
    opacity:1; transform:none; filter:blur(0);
    transition:opacity .8s var(--sal), transform .8s var(--sal), filter .8s var(--sal);
  }
}

/* ==========================================================================
   Ajustes por alto real de pantalla (laptops de 14" y 15.6" a 768px)
   ========================================================================== */
@media (max-height:820px) and (min-width:900px){
  :root{ --e-seccion:clamp(3.2rem, 2rem + 5vw, 6rem); --barra:3.6rem; }
}
/* Celular apaisado o pantalla muy baja: ahi la composicion esta limitada por
   el ANCHO, asi que bajar el coeficiente de svh no ayuda. Lo que cede son los
   huecos. Medido a 320x568: sin esto se pasaba 9px. */
@media (max-height:700px) and (max-width:899px){
  .entrada__baja{ display:none; }
  .entrada{ padding-block:calc(3.5 * var(--u)) calc(3.5 * var(--u)); }
  .filigrana{ margin-top:calc(2.2 * var(--u)); }
  .entrada__titular{ margin-top:calc(.6 * var(--u)); }
  .entrada__bajada{ margin-top:calc(2 * var(--u)); }
  .puertas{ margin-top:calc(5 * var(--u)); }
}

/* Debajo de 420px la barra suelta su botón: el ancho no da y cada sección
   ya tiene su propia llamada. */
/* La barra en pantallas angostas: suelta primero el enlace secundario y
   despues el boton. Medido: por encima de 700px de ancho los tres caben; por
   debajo, el boton se salia de la ventana (127px fuera a 430px de ancho). */
.barra nav a.solo-ancho{ display:none; }   /* `.barra nav a` gana por tipos:
   `.solo-ancho` a secas (0,1,0) pierde contra `.barra nav a` (0,1,2). */
@media (min-width:640px){ .barra nav a.solo-ancho{ display:inline-flex; } }
@media (max-width:780px){
  .barra nav a{ padding-inline:.55rem; font-size:.94rem; }
  .barra .btn{ padding-inline:.9rem; }
  .barra .btn svg{ display:none; }
}
/* Medido a 320px: logotipo + tres enlaces + boton piden 351px de isla y solo
   hay 275. Lo que cede es el boton, no la navegacion: en el movil llegar a la
   otra division importa mas que un CTA que ya se repite en cada seccion.
   `Inicio` tambien se va -- el logotipo ya lleva ahi. */
@media (max-width:620px){
  .barra .btn{ display:none; }
  .barra nav a[href="index.html"]{ display:none; }
  .barra__isla{ gap:.4rem; padding:.4rem .8rem; min-height:3rem; }
}
@media (max-width:400px){
  .marca__division{ display:none; }
  .barra nav a{ padding-inline:.5rem; font-size:.9rem; }
}

/* Escalonado que reparte main.js, y la barra al despegarse del borde. */
.js [data-aparece].visible{ transition-delay:var(--retraso, 0ms); }

/* Debajo de 360px el titular no cabe en una línea al tamaño de la referencia. */
@media (max-width:360px){
  .entrada__titular{ font-size:calc(7.9 * var(--u)); }
  .entrada__bajada{ font-size:max(.94rem, calc(3.05 * var(--u))); }
}


/* ==========================================================================
   LOS DOS MOMENTOS CON SCROLL
   --------------------------------------------------------------------------
   Uno por landing, no efectos repartidos. La imagen queda pegada mientras el
   texto pasa por delante; el navegador mueve la escena con `animation-timeline`
   nativa, en el hilo del compositor, sin un solo listener de scroll.

   Estado base = escena YA RESUELTA. La animacion solo se engancha donde hay
   soporte y sin movimiento reducido. Asi, sin JavaScript, sin soporte o con
   `prefers-reduced-motion`, se ve la escena terminada y no una a medio armar.
   ========================================================================== */
.pase, .armado{
  position:relative;
  /* Mismo ancho de columna que el resto del sitio: antes eran hijos sueltos
     del <section> y el texto se pegaba al borde de la ventana. */
  width:min(100% - 2 * clamp(1.1rem, 4vw, 2.4rem), var(--envoltura));
  margin-inline:auto;
}
.pase__pegado, .armado__pegado{
  position:sticky; top:calc(var(--barra) + 1rem);
  height:min(78svh, 640px);
  width:52%;                           /* columna izquierda */
  display:grid; place-items:center;
}
.pase__texto, .armado__texto{
  position:relative;
  margin-top:calc(-1 * min(78svh, 640px));
  width:44%; margin-inline-start:auto; /* columna derecha */
  display:grid;
  /* Huecos mas cortos: con 265px entre pasos quedaban tramos largos de
     escena sin nada al lado. Ahora siempre hay una tarjeta cerca. */
  padding-block:min(16svh,120px) min(18svh,140px);
  gap:min(24svh,175px);
  pointer-events:none;
}
.pase__paso, .armado__paso{
  pointer-events:auto;
  width:100%;
  padding:var(--e-4);
  border-radius:var(--r-4);
  background:linear-gradient(180deg,
    color-mix(in srgb,#fff 78%,transparent),
    color-mix(in srgb, var(--acento) 6%, color-mix(in srgb,#fff 64%,transparent)));
  border:1px solid var(--vidrio-borde);
  box-shadow:var(--s-vidrio);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .pase__paso, .armado__paso{
    backdrop-filter:blur(12px) saturate(1.3);
    -webkit-backdrop-filter:blur(12px) saturate(1.3);
  }
}
.pase__paso h3, .armado__paso h3{ margin-bottom:var(--e-2); }
.pase__paso p, .armado__paso p{ color:var(--tinta-2); font-size:.97rem; max-width:40ch; }

/* --- Textil: el pase de tinta ------------------------------------------- */
.pase__marco{ height:100%; aspect-ratio:4/5; width:auto; max-width:100%; }
.pase__lienzo{ position:relative; height:100%; }
.pase__prenda, .pase__arte{
  position:absolute; inset:0; margin:0;
  /* `.slot` trae `aspect-ratio` y le ganaba al alto que impone `inset:0`:
     las dos capas quedaban a 4/3 dentro de un lienzo 4/5 y sobraba una
     banda vacia debajo de la prenda. */
  aspect-ratio:auto;
}
.pase__arte{ background:transparent; border:0; }
.pase__rasqueta{
  position:absolute; left:-4%; right:-4%; top:0; height:8px; border-radius:4px;
  background:linear-gradient(90deg, transparent, var(--textil) 12%, #6B2A9E 50%, var(--textil) 88%, transparent);
  box-shadow:0 6px 18px -4px color-mix(in srgb, var(--textil) 70%, transparent);
  opacity:0;
}

/* --- Escolar: el armado -------------------------------------------------- */
.armado__mesa{ position:relative; width:100%; aspect-ratio:1/1; }
.armado__pieza{ position:absolute; }
.armado__guia{
  position:absolute; left:50%; top:4%; bottom:4%; width:1px;
  background:linear-gradient(180deg, transparent, var(--escolar), transparent);
  opacity:0;
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .pase{ view-timeline-name:--pase; }
    .pase__arte{ animation:pasada linear both; animation-timeline:--pase;
                 animation-range:contain 0% contain 100%; }
    .pase__rasqueta{ animation:rasqueta linear both; animation-timeline:--pase;
                     animation-range:contain 0% contain 100%; }
    .armado{ view-timeline-name:--armado; }
    .armado__pieza{ animation:encaje linear both; animation-timeline:--armado;
                    animation-range:contain 0% contain 100%; }
    .armado__guia{ animation:guia linear both; animation-timeline:--armado;
                   animation-range:contain 0% contain 100%; }
  }
}
@keyframes pasada{ from{ clip-path:inset(0 0 100% 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes rasqueta{
  0%{ transform:translateY(-14px); opacity:0; } 7%{ opacity:1; }
  93%{ opacity:1; } 100%{ transform:translateY(min(70svh,500px)); opacity:0; }
}
@keyframes encaje{
  from{ transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.94); }
  to  { transform:translate(0,0) rotate(0deg) scale(1); }
}
@keyframes guia{ from{ opacity:1; } 70%{ opacity:.55; } to{ opacity:0; } }

/* Por debajo de 900px el texto no puede pasar por un costado: la escena se
   resuelve arriba y los pasos van debajo, en una sola columna. */
@media (max-width:899px){
  .pase__pegado, .armado__pegado{ position:relative; top:auto; height:auto; width:100%; }
  .pase__texto, .armado__texto{
    margin-top:0; width:100%; padding-block:var(--e-4) 0; gap:var(--e-3);
  }
  .pase__marco{ width:min(100%, 360px); }
  .armado__mesa{ width:min(100%, 480px); }
  .pase__arte{ animation:none; clip-path:none; }
  .pase__rasqueta{ display:none; }   /* se sale del ancho y ahi no anima */
  .armado__pieza{ animation:none; transform:none; }
  .armado__guia{ animation:none; opacity:0; }
}