/* PURE — la home, construida contra docs/referencia/01-home.webp.
   La maqueta manda sobre cualquier cosa que este escrita: la primera vez
   esas imagenes vivieron solo en el chat, se perdieron, y esta pagina se
   construyo desde un documento. Por eso ahora estan en el repo.

   Paleta y tipografia: los archivos de logo v2 de `Diseno de Marca Pure #2`
   (Wilmar, 2026-09-21). La mostaza #f39c13, el azul marino y el coral
   #eb5947 son de la primera marca y estan derogados. */

:root{
  --coral:#f39583;        /* muestreado de PURE-1.png e ICONO-COLOR.png */
  --cian:#10b6de;         /* R=16 G=182 B=222, verificado contra el PNG */
  --tinta:#21264f;        /* muestreado del vector de las manos v2 */
  --crema:#f6e5db;        /* complementario 1 de PURE 2025.pdf */
  --rosa:#fec2ba;         /* complementario 2 */
  --papel:#fffaf7;
  --gutter:clamp(18px,5vw,64px);
  --arco:clamp(26px,4.5vw,84px);   /* la flecha del arco: 2-4% del ancho */
}

/* ——— Bandas ——————————————————————————————————————————————
   Cada capitulo es una banda. Las de imagen llevan el medio detras y el
   texto encima; las de papel llevan las hojas al margen. El borde entre
   dos bandas es un arco, nunca una recta. */

.banda{
  position:relative;isolation:isolate;
  /* `clip`, no `hidden`. Las hojas se salen a proposito del margen para que
     la marca de agua muera fuera de la pagina y no contra un borde; medido
     el 2026-09-21, eso agregaba 18px de scroll horizontal en /esencia, que
     en un telefono es la pagina entera moviendose de lado al deslizar.
     `hidden` lo arreglaria tambien, pero crea un contenedor de scroll y
     rompe el `position:sticky` del retrato de esa misma pagina. `clip` no. */
  overflow-x:clip;
}
.banda>*{position:relative;z-index:2}

.banda--papel{background:var(--papel);color:var(--tinta)}
.banda--crema{background:var(--crema);color:var(--tinta)}
.banda--medio{color:#fff;min-height:clamp(440px,74vh,760px);display:flex;align-items:center}
.banda--medio::after{
  /* Vela sobre la imagen: sin ella el texto blanco no siempre pasa contraste. */
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,#21264fcc 0%,#21264f80 42%,#21264f26 72%,transparent 100%);
}

/* `clip` y no `hidden`: recortan igual, pero `hidden` convierte al elemento
   en contenedor de scroll, y entonces el `animation-timeline:view()` de la
   imagen se resuelve contra ese contenedor — que nunca se mueve. Medido el
   2026-09-22 en la home: el parallax nativo estaba congelado en su punto
   medio (transform translateY 0, scale fija) en todas las bandas, y el
   repuesto de home.js no entraba porque CSS.supports decia que si. Es decir:
   el sitio decia tener parallax y no se movia nada. */
.lienzo{position:absolute;inset:0;z-index:0;overflow:clip}
.lienzo img,.lienzo video{
  /* Absolutos los dos, y superpuestos. Si el poster queda en flujo normal,
     el video se apila debajo, sale del recorte, nunca entra en pantalla y
     el IntersectionObserver no dispara nunca: dos de los tres videos no se
     montaban. Medido, no supuesto. */
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  /* El parallax vive aqui: el medio deriva y escala, el texto no se mueve. */
  will-change:transform;transform:translate3d(0,var(--deriva,0px),0) scale(var(--zoom,1.04));
}

/* El arco lo dibuja la linea de la marca, y recorta la banda de abajo. */
.arco{
  display:block;width:100%;height:var(--arco);
  /* El arco y la banda de abajo se tocan exactamente: medido, el hueco es 0.
     La linea fina que cruzaba el ancho encima del pie no era un hueco, era
     el borde del propio trazo: terminaba justo en el limite del viewBox y,
     con `preserveAspectRatio:none`, esa ultima fila cae en una fraccion de
     pixel del aparato y el antialias la mezclaba con la banda oscura. Se
     arregla en el trazo, que ahora se pasa de largo hasta y=8 y lo recorta
     el SVG (ver el `path` en el HTML), no aqui. */
  margin-block:calc(var(--arco) * -1) 0;
  position:relative;z-index:3;pointer-events:none;
}
.arco path{fill:var(--arco-color,var(--papel))}

/* El arco calado va encima de la banda de video, no encima de la de arriba,
   y pinta el hueco de fuera de la curva en el color de la seccion anterior.
   Antes se pintaba entero de tinta sobre una seccion crema: 18px de azul
   cruzando el ancho justo encima del video (Wilmar, 2026-09-22: "en algunos
   footers sale esa linea azul... el video deberia llenar todo"). Medido en
   /esencia: el arco daba rgb(33,38,79) sobre una banda de rgb(255,250,247).
   Ahora el video llega hasta la curva y es el video quien dibuja el arco. */
.arco--calado{margin-block:0 calc(var(--arco) * -1)}

/* Hojas: marca de agua de margen. Nunca sobre texto — de ahi el z-index 0
   y el ancho acotado a los costados. */
.hojas{position:absolute;top:0;bottom:0;width:min(30vw,340px);z-index:0;opacity:.9;pointer-events:none}
.hojas.izq{left:calc(var(--gutter) * -.4)}
.hojas.der{right:calc(var(--gutter) * -.4);transform:scaleX(-1)}
.hojas img{width:100%;height:100%;object-fit:cover;object-position:top}
.cinta{position:absolute;right:-2%;top:-6%;width:min(26vw,300px);z-index:1;pointer-events:none}

/* ——— Tipografia ————————————————————————————————————————— */

.envoltorio{max-width:1180px;margin-inline:auto;padding-inline:var(--gutter);width:100%}
.centrado{text-align:center;max-width:820px;margin-inline:auto}

.rotulo{
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:var(--cian);margin:0 0 18px
}
.banda--medio .rotulo{color:#ffffffcc}
.rotulo::after{content:"";display:block;width:34px;height:2px;background:var(--cian);margin:10px auto 0}
.rotulo.izquierda::after{margin-left:0}

h1,h2,.guion{font-family:var(--script);font-weight:400;line-height:1.08;letter-spacing:.005em;margin:0}
h1{font-size:clamp(2.6rem,6.4vw,5rem)}
h2{font-size:clamp(2.1rem,4.6vw,3.6rem)}
.acento{color:var(--coral);display:block}
.banda--medio .acento{color:#fff}

.entrada{font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.62;max-width:56ch;margin:20px 0 0;color:inherit;opacity:.92}
.centrado .entrada{margin-inline:auto}
.nota{font-size:.82rem;opacity:.72;margin-top:14px}

.trio{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;margin-top:26px;
      font-size:.94rem;letter-spacing:.06em;color:var(--tinta);opacity:.8}
.trio span::before{content:"·";margin-right:26px;opacity:.5}
.trio span:first-child::before{content:none;margin:0}

/* ——— El heroe ———————————————————————————————————————————
   El video NO es el LCP. El poster pinta primero y es el diseño; el video
   entra cuando esta listo y, como el poster es su primer fotograma, el
   cambio no se ve. Si el video nunca llega, nada se ve roto. */

.heroe{min-height:clamp(560px,86vh,880px)}
.heroe .envoltorio{padding-block:clamp(90px,14vh,150px)}
/* El video aparece por encima del poster cuando ya esta reproduciendo.
   Vale para las tres bandas, no solo el heroe. */
.lienzo video{opacity:0;transition:opacity .9s ease}
.lienzo video.listo{opacity:1}

.desliza{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  color:#fff;font-size:.76rem;letter-spacing:.14em;text-align:center;opacity:.85
}
.desliza svg{display:block;margin:8px auto 0;animation:respira 2.6s ease-in-out infinite}
@keyframes respira{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(7px);opacity:1}}

/* ——— La secuencia 01 · 02 · 03 ————————————————————————————
   Numerada porque el contenido ES una secuencia — Escuchar, Reconocer,
   Integrar — y aparece igual en la home y en la pagina de taller. No se
   le inventan pasos a un taller que no los declara. */

.secuencia{list-style:none;margin-inline:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,34px);margin-top:clamp(28px,4vh,46px);max-width:620px;position:relative}
.secuencia::before{content:"";position:absolute;left:8%;right:8%;top:7px;height:2px;background:#ffffff4d}
.paso{position:relative;padding-top:26px}
.paso::before{content:"";position:absolute;top:1px;left:0;width:13px;height:13px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 3px #ffffff40}
.paso:nth-child(2)::before{background:var(--cian)}
.paso:nth-child(3)::before{background:var(--cian)}
.paso b{display:block;font-size:.84rem;letter-spacing:.1em;opacity:.75;font-weight:600}
.paso span{display:block;font-size:clamp(.95rem,1.2vw,1.06rem);margin-top:3px}

/* ——— Tarjetas de taller, en arco ———————————————————————— */

.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(34px,5vh,56px)}
.tarjeta{display:block;text-decoration:none;color:inherit;
         transition:transform 120ms cubic-bezier(.32,.72,0,1)}
/* Se hunde al pulsar, no al soltar. La tarjeta que no lleva a ningun sitio
   (.tarjeta--propuesta) no se hunde: prometer respuesta donde no hay destino
   es peor que no responder. */
.tarjeta:not(.tarjeta--propuesta):active{transform:scale(.985)}
.marco{
  /* `display:block` no es cosmetico: .marco es un <span>, y en un elemento
     en linea ni `overflow:hidden` ni `aspect-ratio` hacen nada, asi que el
     arco salia cuadrado. */
  display:block;
  /* El arco de la marca, tambien aqui: redondo arriba, recto abajo. */
  border-radius:50% 50% 14px 14px / 34% 34% 14px 14px;
  overflow:clip;aspect-ratio:4/5;background:var(--rosa);position:relative
}
/* 114% de alto y -7% arriba: la holgura de la que come la deriva. Con
   height:100% cualquier movimiento descubriria el rosa del marco por un
   borde. El zoom del hover va en `scale` y no en `transform` a proposito:
   son propiedades distintas y se componen, asi que el hover y el parallax
   no se pisan — con las dos en `transform`, la ultima ganaba y el arco se
   quedaba quieto al pasar el raton. */
.marco img{position:absolute;inset:0;width:100%;height:100%;
           object-fit:cover;display:block;
           transition:scale .7s cubic-bezier(.22,1,.36,1)}
.tarjeta:hover .marco img,.tarjeta:focus-visible .marco img{scale:1.045}
.tarjeta h3{font-size:1.32rem;margin:18px 0 2px;font-weight:600}
.tarjeta p{margin:0;opacity:.7;font-size:.94rem}
.tarjeta .ir{display:inline-block;margin-top:10px;color:var(--cian);font-weight:600;font-size:.94rem;
             border-bottom:1.5px solid transparent}
.tarjeta:hover .ir,.tarjeta:focus-visible .ir{border-bottom-color:var(--cian)}
.tarjeta:focus-visible{outline:3px solid var(--cian);outline-offset:6px;border-radius:6px}

/* ——— Manuscrita del cierre ———————————————————————————— */
.guion{font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.5;opacity:.92;transform:rotate(-4deg);
       max-width:15ch}

/* ——— Pie ————————————————————————————————————————————— */
.pie{background:var(--papel);color:var(--tinta);padding:clamp(30px,5vh,52px) 0 clamp(34px,6vh,60px)}
.pie .envoltorio{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px}
.pie img.logo{height:40px;width:auto;display:block}
.pie nav{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.92rem}
.pie nav a{color:inherit;text-decoration:none;border-bottom:1.5px solid transparent;
           transition:transform 100ms cubic-bezier(.32,.72,0,1),border-bottom-color 140ms ease}
.pie nav a:active{transform:scale(.96)}
.pie nav a:hover,.pie nav a:focus-visible{border-bottom-color:var(--coral)}
.pie .lema{font-size:.7rem;letter-spacing:.3em;opacity:.55;display:flex;align-items:center;gap:14px}
.pie .lema::before{content:"";width:46px;height:1px;background:var(--cian)}

/* En telefono siete enlaces envueltos a lo ancho dejaban "Terminos" solo en
   su propia fila, sin nada al lado — el defecto que Zaira frena. Una lista
   de una columna no tiene ese modo de fallo: cada fila es la fila entera, y
   cada una llega a 44px de alto de toque real, no de linea de texto. */
@media(max-width:779px){
  .pie nav{flex-direction:column;flex-wrap:nowrap;gap:0;width:100%}
  .pie nav a{
    display:flex;align-items:center;width:100%;min-height:44px;
    border-bottom:1px solid color-mix(in srgb, var(--tinta) 10%, transparent);
  }
  .pie nav a:last-child{border-bottom:0}
}

/* ——— Movimiento ligado al scroll ————————————————————————
   Nativo donde existe; thread.js hace lo mismo a mano donde no. */
@supports (animation-timeline: view()){
  /* `:not([data-scrub])`: en las bandas scrubeadas el movimiento lo pone el
     propio video contra el scroll. Si ademas derivara, serian dos parallax
     encima de la misma imagen, desfasados entre si. */
  .lienzo img,.lienzo video:not([data-scrub]){
    animation:deriva linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
  @keyframes deriva{
    /* <=8% de deriva y <=3% de escala: los limites de la direccion de arte. */
    from{transform:translate3d(0,-4%,0) scale(1.08)}
    to{transform:translate3d(0,4%,0) scale(1.02)}
  }
}

@media (prefers-reduced-motion:reduce){
  .lienzo img,.lienzo video,.marco img{animation:none!important;transform:none!important}
  .tarjeta:active,.pie nav a:active{transform:none}
  .desliza svg{animation:none}
  .marco img{transition:none;scale:none}
  .lienzo video{display:none}     /* ni se descarga: home.js no lo monta */
}

@media print{
  .lienzo video,.desliza,.cinta,.hojas{display:none!important}
  .banda--medio{color:#000;min-height:0}
  .banda--medio::after{display:none}
}

@media(max-width:700px){
  :root{--arco:clamp(18px,3vw,30px)}   /* aplanado en telefono */
  .secuencia{grid-template-columns:1fr;gap:16px;max-width:none}
  .secuencia::before{display:none}
  .guion{transform:none;max-width:none;margin-top:18px}
  .hojas{width:44vw;opacity:.7}
}


/* Una propuesta no tiene pagina todavia, asi que su tarjeta no es un enlace.
   Si conserva el cursor y la flecha que se mueve, le miente al visitante dos
   veces antes de que llegue a hacer clic. Wilmar, 2026-09-21: las paginas no
   estaban entrelazadas — estas dos apuntaban a `#0`. */
.tarjeta--propuesta{cursor:default}
.tarjeta--propuesta .ir{opacity:.6}
.tarjeta--propuesta:hover .ir{transform:none}