/* ===== Fuentes autoalojadas (Lora, Inter) — subset latin + latin-ext ===== */
/* Descargadas de Google Fonts, servidas localmente en assets/fonts/. */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;
  src:url('assets/fonts/0QI8MX1D_JOuMw_hLdO6T2wV9KnW-MoFoqF2nOeZ.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;
  src:url('assets/fonts/0QI8MX1D_JOuMw_hLdO6T2wV9KnW-MoFoq92nA.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/0QIvMX1D_JOuMwT7I-NP.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/0QIvMX1D_JOuMwr7Iw.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/0QIvMX1D_JOuMwT7I-NP.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/0QIvMX1D_JOuMwr7Iw.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/0QIvMX1D_JOuMwT7I-NP.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/0QIvMX1D_JOuMwr7Iw.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
    --ink:#1A1A18;
    --cream:#F3EEE2;
    --paper:#FBF8F2;
    --sand:#B9A98C;
    --sand-text:#6E5E42;
    --serif:'Lora', Georgia, serif;
    --sans:'Inter', system-ui, sans-serif;
    --measure:34rem;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);background:var(--ink);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased}
  ::selection{background:var(--sand);color:var(--ink)}
  img{display:block;max-width:100%}

  .wrap{width:min(100% - 3rem, 68rem);margin-inline:auto}
  .kicker{font-size:.6875rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--sand-text);display:block;margin-bottom:1.5rem}
  .on-ink .kicker{color:var(--sand)}
  section{padding:6rem 0}
  @media(min-width:48rem){section{padding:9rem 0}}
  .on-cream{background:var(--cream)}
  .on-paper{background:var(--paper)}
  .on-ink{background:var(--ink);color:var(--cream)}
  h1,h2,h3,.num{font-family:var(--serif);font-weight:500;line-height:1.12}
  h2{font-size:clamp(1.75rem,4.5vw,2.75rem);letter-spacing:-.01em;max-width:26ch}
  p{max-width:var(--measure)}
  .lede{font-size:1.0625rem}

  /* Sin JS, .fade nunca queda oculto: solo document.documentElement.classList.add('js')
     (script inline sincrono en <head>) activa la animacion de entrada. */
  .js .fade{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
  .js .fade.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.js .fade{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

  /* ---------- accesibilidad: skip link ---------- */
  .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--sand);color:var(--ink);
    padding:.75rem 1.25rem;font-family:var(--sans);font-size:.8125rem;font-weight:600;text-decoration:none}
  .skip:focus{left:1rem;top:1rem}

  /* ---------- barra superior ---------- */
  .topbar{position:sticky;top:0;z-index:20;background:var(--ink);border-bottom:1px solid rgba(185,169,140,.24)}
  .topbar-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.875rem 0;flex-wrap:wrap}
  .brand{display:flex;align-items:center;gap:1rem;text-decoration:none}
  .brand img{width:26px;height:auto;transform:translateY(-6%)}
  .brand span{font-family:var(--sans);font-size:.8125rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--cream)}
  nav{display:flex;gap:1.5rem;flex-wrap:wrap}
  nav a{font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);opacity:.5;text-decoration:none;padding-bottom:.25rem;border-bottom:1px solid transparent;transition:opacity .3s ease,border-color .3s ease,color .3s ease}
  nav a:hover,nav a:focus-visible{opacity:1;color:var(--sand)}
  nav a.active{opacity:1;color:var(--cream);border-bottom-color:var(--sand)}
  .lang-switch{display:flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;
    border:1px solid rgba(185,169,140,.55);color:var(--sand);font-family:var(--sans);
    font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-decoration:none}
  .lang-switch:hover,.lang-switch:focus-visible{background:var(--sand);color:var(--ink)}
  .lang-switch:focus-visible{outline:2px solid var(--sand);outline-offset:3px}

  /* ---------- nav movil ----------
     Los cuatro enlaces envolvian en dos filas: 162px de topbar sticky (20% de
     una pantalla de 812px) y objetivos tactiles de 24px, por debajo de los
     44px que pide WCAG 2.5.5. Debajo de 48rem se colapsan tras un boton.
     Todo bajo `.js`: sin JavaScript el nav se queda visible como antes, que es
     feo pero navegable — nunca inaccesible. */
  .nav-toggle,.current-page{display:none}
  @media(max-width:47.99rem){
    /* El nombre de la pagina va FUERA del boton: el boton abre el menu, asi que
       su nombre accesible tiene que ser "Abrir menu". Si el texto visible dijera
       otra cosa, la etiqueta visible y la accesible no coincidirian. Va con
       aria-hidden porque el <title> y el aria-current del nav ya dicen donde
       estas: leerlo otra vez seria ruido. */
    .js .current-page{display:block;margin-left:auto;margin-right:.5rem;
      font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
      color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
      max-width:44vw}
    /* "ANCLA ONE «PROMETEO»" es la etiqueta mas larga y a 320px no entra con el
       espaciado normal. Se aprieta la letra en vez de recortar el nombre. */
    @media(max-width:23rem){
      /* El gap de 1.5rem de .topbar-in se comia 48px entre los tres elementos */
      .js .topbar-in{gap:.5rem}
      .js .current-page{letter-spacing:.08em;margin-right:.25rem;max-width:64vw}
    }
    /* En movil la marca se queda solo con el simbolo: con el nombre de la pagina
       al lado, el texto "ANCLA Labs" se duplicaria en labs.html. */
    .js .brand span{display:none}
    .js .nav-toggle{display:flex;align-items:center;min-height:44px;min-width:44px;
      justify-content:flex-end;
      padding:.5rem 0;background:none;border:0;cursor:pointer;color:var(--sand)}
    .js .nav-toggle:focus-visible{outline:2px solid var(--sand);outline-offset:4px}
    .nav-toggle-bars{position:relative;display:block;width:20px;height:1px;background:var(--sand)}
    .nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0;
      width:20px;height:1px;background:var(--sand);transition:transform .3s ease}
    .nav-toggle-bars::before{top:-6px}
    .nav-toggle-bars::after{top:6px}
    .js .nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
    .js .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
    .js .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}
    @media(prefers-reduced-motion:reduce){
      .nav-toggle-bars::before,.nav-toggle-bars::after{transition:none}
    }

    .js .topbar-in{flex-wrap:nowrap}
    .js nav{display:none;position:absolute;left:0;right:0;top:100%;
      flex-direction:column;gap:0;padding:0 1.5rem 1.25rem;background:var(--ink);
      border-bottom:1px solid rgba(185,169,140,.24)}
    .js nav[data-open]{display:flex}
    .js nav a{display:flex;align-items:center;min-height:48px;padding:0;
      border-bottom:1px solid rgba(185,169,140,.24);opacity:.72}
    .js nav a.active{opacity:1;border-bottom-color:var(--sand)}
  }

  /* ---------- retícula hexagonal ----------
     Fragmentos de panal recortados de la misma retícula que la rejilla del
     chasis: celdas regulares que COMPARTEN arista. La silueta irregular sale de
     quitar celdas del perímetro, nunca de moverlas de sitio — por eso se lee
     como un trozo de panal y no como hexágonos dibujados cerca unos de otros.
     Cada arista compartida se dibuja una sola vez (si no, sale del doble de
     gruesa) y las coordenadas van a medio píxel para que el trazo de 1px no se
     antialiase en una mancha gris.

     El no-solapamiento con el texto es GEOMÉTRICO, no un cálculo de píxeles:
     .hex-frag es hijo directo de .wrap y se ancla con right:100% / left:100%,
     así que su borde toca el borde de la caja de texto y nunca puede entrar.
     La sección recorta lo que sangra, de modo que no ensancha la página. */
  .hex-host{position:relative}
  /* Solo recortan las secciones con fragmento a la DERECHA: lo que se desborda
     por la izquierda no genera scroll en un documento LTR, y recortar el hero
     ademas cortaria el render del chasis, que sangra un 4% por su derecha. */
  .hex-clip{overflow-x:clip}
  .hex-frag{position:absolute;pointer-events:none;z-index:0;display:none}
  .hex-frag svg{display:block;width:100%;height:auto}
  .hex-frag line{fill:none;stroke:var(--sand);stroke-width:1;vector-effect:non-scaling-stroke}
  .on-ink .hex-frag line{stroke-opacity:.6}
  .on-cream .hex-frag line,.on-paper .hex-frag line{stroke-opacity:.85}
  .hex-frag.bleed-left{right:100%;margin-right:1rem}
  .hex-frag.bleed-right{left:100%;margin-left:1rem}

  /* --- offsets verticales ---
     Estos diez valores vivian en atributos style= en el HTML, y ahi eran una
     BOMBA DE RELOJERIA: la CSP de produccion (netlify.toml) lleva
     style-src 'self' sin 'unsafe-inline', asi que el navegador ignora el
     atributo entero y los diez panales caian a top:auto. Y como serve.ps1 no
     manda cabeceras CSP, en local se veia perfecto: el fallo solo aparecia
     DESPUES de desplegar. Comprobado midiendo: hasta 615px de desplazamiento en
     un fragmento, y dos de ellos superpuestos.
     Si anades un fragmento nuevo, su offset va aqui como clase. Nunca en un
     style= inline: la pagina no te avisara hasta que este publicada. */
  .hex-frag.t-neg8{top:-8%}
  .hex-frag.t-6{top:6%}
  .hex-frag.t-8{top:8%}
  .hex-frag.t-10{top:10%}
  .hex-frag.t-12{top:12%}
  .hex-frag.t-14{top:14%}
  .hex-frag.t-16{top:16%}
  .hex-frag.b-neg4{bottom:-4%}
  .hex-frag.b-6{bottom:6%}
  .hex-frag.b-8{bottom:8%}
  /* El fragmento vive en el margen exterior de .wrap, y ese margen depende del
     ancho: .wrap es min(100% - 3rem, 68rem), asi que hasta 71rem de viewport el
     margen es de solo 1,5rem y el fragmento queda ENTERO fuera de pantalla.
     Por eso el umbral va en 72rem y no antes: por debajo no se veria nada. */
  @media(min-width:72rem){.hex-frag{display:block;width:300px}}
  @media(min-width:82rem){.hex-frag{width:380px}}
  @media(min-width:96rem){.hex-frag{width:460px}}
  /* --- variante de borde de pantalla (solo el fragmento derecho del hero) ---
     Anclar al borde del .wrap funciona mientras el margen exterior sea estrecho.
     Deja de funcionar al ensanchar: el margen es (100vw - 68rem)/2, o sea 32px a
     1152 pero 400px a 1920, asi que a partir de ~1425px el fragmento cabia
     entero dentro de pantalla y se leia como una pegatina en una esquina vacia
     en vez de como un trozo de una reticula mayor.
     Aqui el ancla es el borde DERECHO DEL VIEWPORT: right:calc(50% - 50vw) lleva
     el borde derecho del fragmento al borde de la pantalla, y translateX(40%)
     -que en transform se resuelve sobre la propia caja, no sobre el padre- saca
     fuera de cuadro el 40% de su ancho a cualquier resolucion. El corte esta
     garantizado por construccion, no por que las cuentas cuadren a un ancho.
     100vw incluye la barra de scroll (~15px), asi que la cuenta se pasa ~7px
     hacia fuera: el error cae del lado seguro. Lo que sobresale lo recorta el
     overflow-x:clip del .hero, igual que antes.
     OJO: esta variante SI puede entrar horizontalmente en la caja del .wrap
     (a 1152 el margen es de 32px y el fragmento mide 380), asi que aqui el
     no-solapamiento con el texto ya no es geometrico. Lo sostiene la banda
     vertical: la franja vive por encima del render del chasis y muy a la
     derecha de la columna de texto, que mide 30rem como maximo. */
  .hex-frag.bleed-viewport{right:calc(50% - 50vw);transform:translateX(30%)}
  /* Racimo (512x368, 15 celdas, filas 3-5-4-2-1) para el hueco del hero a la
     derecha. Tercera silueta que se prueba en ese sitio: la primera eran filas
     largas y alineadas y salia un ladrillo, la segunda dos filas escalonadas y
     salia una cadena estirada. Esta es maciza, con el contorno roto por un hueco
     interior (falta la celda 3,0) y dos salientes (4,0 y 4,2).
     Las dos ultimas filas son la cola: bajan DESPLAZANDOSE A LA DERECHA porque
     justo debajo esta el render del chasis. Cayendo en vertical se lo comerian;
     escapandose por la esquina caben, y ademas se leen mejor.
     OJO al verificar: por eso mismo la caja del fragmento YA NO SIRVE como test
     de solapamiento. La caja se mete por debajo del borde superior del chasis a
     proposito, y lo que hay ahi abajo esta a su derecha. Hay que medir cada
     <line>, no el getBoundingClientRect del div.
     Los anchos van escalonados como los del resto, no en clamp, y elegidos para
     que la CELDA mida casi lo mismo que la del fragmento izquierdo del hero:
       racimo  430/515 -> celda 64 / 77 px
       izqdo   300/380/460 -> celda 64 / 81 / 98 px
     Si no, se ve la misma reticula a dos escalas distintas y lado a lado en la
     misma pantalla, que es lo que delata que son dos piezas y no una.
     No hay tercer escalon a 96rem, y ahi la escala se descuelga (77 contra 98).
     Es a proposito: el hueco util -del techo del .wrap al borde de arriba del
     chasis- no pasa de 275px por muy ancha que sea la pantalla, porque depende
     del ALTO de la ventana y no del ancho. Entre cuadrar la escala y no tocar el
     producto, gana el producto. */
  @media(min-width:72rem){.hex-frag.franja{top:0;width:430px}}
  @media(min-width:82rem){.hex-frag.franja{width:515px}}
  /* Portatiles de 768 (mismo umbral que el resto del hero comprimido): el chasis
     se ancla al 42% de un .hero-tail mas corto, asi que sube ~130px mientras el
     .wrap solo sube ~57px, y el hueco se queda en ~170px. Aqui la celda se
     descuelga de la del fragmento izquierdo (46 contra 98) y no hay arreglo: el
     alto disponible depende del ALTO de la ventana y el tamano del otro
     fragmento del ANCHO. Antes que pisar el producto, se encoge. */
  @media(min-width:72rem) and (max-height:52rem){.hex-frag.franja{top:0;width:285px}}

  /* ---------- hero ---------- */
  /* overflow-x:clip y no hidden: recorta en el borde del viewport sin crear
     contenedor de scroll ni tocar el eje vertical. El render del chasis sangra
     un 4% y en la franja de 1150-1153px se pasaba 1px del viewport, sacando una
     barra horizontal. Asi sangra hasta el borde y ni un pixel mas. */
  .hero{min-height:calc(100svh - 4.2rem);display:flex;flex-direction:column;justify-content:center;padding:3rem 0 3.5rem;overflow-x:clip}
  .hero-grid{display:flex;flex-direction:column}
  .hero-tail .hero-sub{margin-top:2rem}
  /* En movil el logo va arriba y el texto debajo, EN SU ORDEN. Antes esto era
     column-reverse, que con dos parrafos invertia tambien las frases entre si. */
  .hero-lead{display:flex;flex-direction:column}
  .hero-lead .mark{order:-1}
  @media(min-width:56rem){
    /* el contenedor ocupa todo el ancho y es el TEXTO el que se limita:
       asi la imagen se ancla al margen derecho real y nunca lo invade.
       La referencia de posicion es .hero-tail, no .hero-lead: colgada del parrafo
       dejaba 300px de columna derecha vacia bajo la imagen. Centrada contra todo
       el bloque de texto, el vacio se reparte arriba y abajo. */
    .hero-lead{display:block}
    .hero-tail{position:relative}
    .hero-head,.hero-tail,.hero-lead{width:100%}
  }
  .hero h1{font-size:clamp(2.25rem,6vw,4rem);color:var(--cream);max-width:13ch;letter-spacing:-.02em}
  /* UNA sola medida para toda la columna de texto. Antes cada bloque tenia la
     suya (480 / 464 / 339 / 544 px) y los cuatro terminaban en sitios distintos:
     eso es lo que hacia que la columna se leyera desordenada, no el borde
     dentado. Con la misma medida forman un bloque limpio. */
  .hero-sub,.hero-coda,.hero-proof{max-width:30rem}
  /* 33rem y no 30 como el resto: la frase larga del golpe mide 507px a su
     tamano tope y con 30rem (480) se partiria. Y no mas de 33: el render del
     chasis empieza a 532px del inicio del texto a 1920, que es donde menos
     hueco hay, asi que a partir de ahi la caja del parrafo se le montaria
     encima aunque la tinta no llegue. */
  .hero-claim{max-width:33rem}

  /* --- la escalera del hero ---
     El hero tenia siete tamanos: 11 / 64 / 24 / 17 / 21 / 15 / 13. Del titular
     al problema habia un abismo (64 a 24) y despues cuatro bloques que pesaban
     casi lo mismo entre si (24, 21, 17, 15). Cuatro cosas del mismo peso son
     cuatro cosas que el ojo lee igual, o sea ninguna. Y lo que hay que entender
     -el problema que resuelve ANCLA- era el TERCER peldano de siete.
     Ahora hay cuatro niveles y nada mas:
       11  el kicker
       64  el h1
       32  el problema
       16  todo lo demas (detalle, coda y prueba)
     La coda ya no se distingue por tamano sino por color, que es lo que hacia
     de verdad: el sand marca la bisagra del argumento y los 3px que la separaban
     del problema no los distinguia nadie.
     Ni una palabra cambia. Lo unico que cambia es cual se ve primero. */
  .hero-sub{margin-top:2.25rem;color:var(--cream);opacity:.72;font-size:1rem}
  /* Cada clausula en su renglon. Mismo texto: una frase larga con cuatro comas
     es un ladrillo, y partida por sus juntas naturales son cinco hechos que se
     escanean. En movil se dejan fluir, que si no salen doce renglones cortos. */
  @media(min-width:34rem){
    .hero-sub span{display:block}
    /* Interlineado mas corto que el del cuerpo (1.7). Ese 1.7 esta pensado para
       parrafos que fluyen; cinco renglones de una clausula cada uno con tanto
       aire se leen como una lista suelta, no como una idea. Y de paso recupera
       los 20px que la escalera le quita al hero. */
    .hero-sub{line-height:1.5}
  }

  /* El golpe del hero. El tope de 1.875rem no es estetico: es el tamano mayor
     al que "Tu computadora no piensa: pregunta." sigue cabiendo en un renglon
     dentro de la columna que deja libre el render del chasis. Medido: a 32px la
     frase mide 540 y a 1920 solo hay 532 de hueco, o sea que pisaba el chasis
     por 9px; a 30px mide 506 y sobran 26. Mas grande y se parte, y que se parta
     es justo lo que el cliente pidio evitar.
     El <br> separa las dos frases y la segunda va atenuada: primero el hecho,
     despues la consecuencia. Al 62% sobre tinta da 6,0:1, AA de sobra. */
  .hero-claim{font-family:var(--serif);font-size:clamp(1.1875rem,2.9vw,1.875rem);line-height:1.25;
    letter-spacing:-.015em;color:var(--cream);margin-top:2.25rem;text-wrap:nowrap}
  .hero-claim span{display:block;margin-top:.35em;opacity:.62}
  @media(max-width:34rem){.hero-claim{text-wrap:wrap}}
  .hero-coda{font-family:var(--serif);font-size:1rem;line-height:1.5;color:var(--sand);margin-top:2.25rem;padding-top:1.5rem;border-top:1px solid var(--sand)}
  .hero-proof{margin-top:1.25rem;color:var(--cream);opacity:.72;font-size:1rem;text-wrap:pretty}
  .hero-proof + .cta{margin-top:2rem}

  /* Escalon intermedio, para ventanas de 833 a 928px de alto (el 1440x900 de
     un MacBook cae justo aqui). No entraban en el bloque de 52rem de abajo y
     con la escalera del subtitulo -cinco renglones donde habia tres- el boton
     de reservar se les iba 20px por debajo del pliegue. Solo se recortan
     margenes, ningun tamano de letra. Medido: pasa de -20 a +12.
     Va ANTES del bloque de 52rem a proposito: los dos casan en pantallas muy
     bajas y ahi tienen que ganar los valores mas apretados, que son los de
     abajo. */
  @media(min-width:56rem) and (max-height:58rem){
    .hero-claim{margin-top:1.75rem}
    .hero-tail .hero-sub{margin-top:1.75rem}
    .hero-coda{margin-top:1.75rem;padding-top:1.25rem}
    .hero-proof{margin-top:1rem}
  }

  /* Portatiles bajos (1366x768 y similares): el hero lleva ahora cuatro bloques
     de texto y sin esto el boton de reservar cae por debajo del pliegue. */
  @media(min-width:56rem) and (max-height:52rem){
    .hero{padding:1.5rem 0 2rem}
    .hero h1{font-size:clamp(2rem,4.4vw,3rem)}
    /* En pantallas bajas el hero se comprime, pero el golpe no baja a 21px como
       antes: con el cuerpo a 16 eso son 1,3x de diferencia, o sea el problema
       que la escalera viene a arreglar. A 1,5rem son 24 contra 16, 1,5x, que es
       lo mismo que el h1 comprimido guarda con el golpe. */
    .hero-claim{margin-top:1.25rem;font-size:1.5rem}
    /* Margenes mas cortos que antes. La escalera del subtitulo son cinco
       renglones donde habia tres, y sin recortar aqui el boton de reservar caia
       9px por debajo del pliegue en un portatil de 768, que es justo lo que
       este bloque existe para evitar. Medido: sobran 42px. */
    .hero-tail .hero-sub{margin-top:1rem}
    .hero-coda{margin-top:1rem;padding-top:1rem}
    .hero-proof{margin-top:.75rem}
    .hero-proof + .cta{margin-top:1.25rem}
  }

  /* Imagen del hero: el chasis completo, recortado con alfa (1078x666). Nada de
     marco: el objeto flota sobre la tinta. Los PNG del render ya traian canal
     alfa — el rectangulo opaco anterior salio de guardarlos a 24 bits. */
  /* Sin marco: el render viene recortado con alfa de verdad, asi que el objeto
     flota sobre la tinta. El marco era el parche de cuando traia el fondo de
     estudio horneado. */
  .mark{width:min(92vw,460px);margin:0 auto 2rem}
  @media(max-width:56rem){
    .mark{width:min(92vw,420px);margin:0 auto 1.5rem}
    .hero-claim{margin-top:1.5rem}
    .hero-tail .hero-sub{margin-top:1.25rem}
    .hero-coda{margin-top:1.5rem;padding-top:1rem}
    .hero-proof{margin-top:1rem}
    .hero-proof + .cta{margin-top:1.5rem}
  }
  .mark img{width:100%;height:auto}
  @media(min-width:56rem){
    /* Apaisada y mas ancha que la estrella anterior: ademas de anclarse al margen
       derecho, cierra el hueco de 211px que quedaba entre el texto y la imagen. */
    /* Sangra un poco por el margen derecho y sube sobre el centro optico: el
       objeto parece continuar fuera del encuadre en vez de estar posado dentro. */
    .mark{position:absolute;right:-4%;top:42%;bottom:auto;transform:translateY(-50%);
          width:clamp(340px,40vw,600px);margin:0}
  }
  /* La respiracion era un recurso para el logotipo. Un producto no parpadea. */
  @media(prefers-reduced-motion:reduce){.mark img{animation:none;opacity:1}}

  .cta{display:inline-block;margin-top:3rem;padding:1rem 2.25rem;font-family:var(--sans);font-size:.8125rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);background:transparent;border:1px solid var(--sand);text-decoration:none;cursor:pointer;transition:background .3s ease,color .3s ease}
  .cta:hover,.cta:focus-visible{background:var(--sand);color:var(--ink)}
  .cta:focus-visible{outline:2px solid var(--sand);outline-offset:3px}

  /* ---------- piezas de galeria ----------
     Un hueco de proporcion fija con la imagen dentro. La proporcion la fija el
     CONTENEDOR y no la imagen a proposito: manana estos huecos llevan video
     (Higgsfield), y para sustituir un <img> por un <video> sin que el layout se
     mueva ni un pixel, la caja tiene que medir lo mismo antes de que cargue
     nada. Por eso aspect-ratio aqui y object-fit:cover en el hijo, que sirve
     igual para <img> que para <video>.
     Cuando llegue el video, el marcado es este y no hay que tocar el CSS:
       <div class="pieza-marco">
         <video autoplay muted loop playsinline poster="assets/pieza-x.jpg">
           <source src="assets/pieza-x.mp4" type="video/mp4"></video>
       </div>
     El CSP de netlify.toml ya lo permite: default-src 'self' cubre media-src, y
     los ficheros van autoalojados, que es lo que promete la pagina de privacidad.
     Las imagenes vienen aplanadas sobre el color EXACTO de su seccion (ver
     scratchpad/exportar-galeria.ps1), asi que no llevan marco ni borde: el
     fondo de la foto y el de la pagina son el mismo color y la pieza no se lee
     como una foto pegada encima. Por eso importa que una pieza de fondo cream
     no acabe en una seccion ink. */
  .pieza{margin:3.25rem 0 0;max-width:44rem}
  .pieza-marco{aspect-ratio:3/2;overflow:hidden}
  .pieza-marco img,.pieza-marco video{display:block;width:100%;height:100%;object-fit:cover}
  .pieza figcaption{margin-top:1rem;font-size:.8125rem;line-height:1.65;color:var(--sand-text);max-width:30rem}
  .on-ink .pieza figcaption{color:var(--sand)}

  /* Cada pieza lleva el ratio de lo que retrata y no uno comun. Forzarlas todas
     a 16:10 dejaba las tres unidades del tejido -un sujeto de 3,4:1- dentro de
     un marco de 1,6:1: dos tercios de esa imagen eran fondo vacio. Un
     rectangulo con una cosita en medio es lo que hace que una foto parezca
     puesta a mano. Estos ratios tienen que cuadrar con los del
     exportar-galeria.ps1; si cambia uno, cambian los dos. */
  .pieza--banda .pieza-marco{aspect-ratio:16/5}
  .pieza--alta .pieza-marco{aspect-ratio:4/3}

  /* Banda ancha: ocupa el .wrap entero, que es el doble que la columna de
     texto, pero NO se sale de el.
     Estuvo un rato a sangre, de borde a borde del viewport, y se volvio atras
     por dos motivos que aparecieron juntos. Se veia enorme -a 1920 eran 1920 de
     ancho por 600 de alto, con cada unidad a mas de 500px- y, sobre todo, al
     ocupar el margen exterior se comia el sitio donde viven los fragmentos de
     panal: el de la derecha de esta seccion le pintaba por encima al chasis.
     Dentro del .wrap las dos cosas se arreglan solas. El no-solapamiento con
     los fragmentos vuelve a ser geometrico -viven fuera del .wrap, la foto
     dentro, no comparten ni un pixel de ancho- y a 1920 la banda baja a
     1088x340. */
  .pieza--banda{max-width:none}

  /* Imagen AL LADO del texto, no debajo. La columna de texto tope son 34rem
     dentro de un .wrap de 68rem: hay media pagina permanentemente vacia a la
     derecha de cada parrafo. Apilar las fotos ahi debajo sumaba 2.184px de
     altura a 1440 (el 15% de la pagina) teniendo ese hueco al lado sin usar.
     Emparejadas, el alto es el del elemento mas alto y no la suma de los dos. */
  .dupla{display:grid;gap:2rem}
  .dupla .pieza{margin:0;max-width:none}
  @media(min-width:62rem){
    .dupla{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem;align-items:center}
  }

  /* ---------- cabecera de pestaña ---------- */
  .pagehead{padding:6rem 0 5rem}
  @media(min-width:48rem){.pagehead{padding:8rem 0 7rem}}
  .pagehead h1{font-size:clamp(2.125rem,5vw,3.25rem);color:var(--cream);max-width:18ch;letter-spacing:-.018em}
  .pagehead p{margin-top:2rem;color:var(--cream);opacity:.7;max-width:36rem}

  /* ---------- estadísticas ---------- */
  .stats{display:grid;gap:4rem;margin-top:4rem}
  @media(min-width:44rem){.stats{grid-template-columns:repeat(2,1fr);gap:3.5rem 3rem}}
  @media(min-width:62rem){.stats{grid-template-columns:repeat(3,1fr);gap:3.5rem 3rem}}
  .stat{border-top:1px solid var(--sand);padding-top:1.75rem;display:flex;flex-direction:column}
  .stat .num{font-size:clamp(2.75rem,5vw,3.75rem);display:block;letter-spacing:-.02em}
  .stat .num small{font-size:.45em;font-weight:400;letter-spacing:0}
  .stat p{margin-top:1rem;font-size:.875rem;opacity:.8;max-width:24rem;text-wrap:pretty}
  .stat p strong{display:block;font-weight:600;opacity:1;margin-bottom:.5rem;color:var(--ink);text-wrap:balance}

  /* ---------- cita ---------- */
  .quote blockquote{font-family:var(--serif);font-size:clamp(1.625rem,4.5vw,3rem);line-height:1.3;max-width:24ch;letter-spacing:-.01em}
  .quote cite{display:block;margin-top:2.5rem;font-family:var(--sans);font-style:normal;font-size:.6875rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sand)}
  .quote-note{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--sand);max-width:38rem;opacity:.75;font-size:.9375rem}

  /* ---------- listas con regla ---------- */
  .ruled{margin-top:3.5rem}
  .ruled-item{display:flex;align-items:baseline;gap:1.5rem;padding:2rem 0;border-top:1px solid var(--sand)}
  .ruled-item:last-child{border-bottom:1px solid var(--sand)}
  .ruled-item .tag{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--sand-text);flex:0 0 4.5rem}
  .on-ink .ruled-item .tag{color:var(--sand)}
  .ruled-item h3{font-size:1.375rem}
  .ruled-item p{margin-top:.5rem;font-size:.9375rem;opacity:.8}

  /* ---------- cifra héroe ---------- */
  .watts-coda{margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--sand);font-family:var(--serif);font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.35;max-width:28ch}
  .figures{display:grid;gap:2.5rem;margin-top:3rem}
  @media(min-width:48rem){.figures{grid-template-columns:repeat(2,1fr);gap:3rem;align-items:stretch}}
  .figure{padding:2.75rem 2.25rem}
  .figure p{margin-top:1.5rem;font-size:.9375rem;opacity:.8;max-width:24rem;text-wrap:pretty}
  /* la cifra que responde al medio litro va sobre tinta: es el remate */
  .figure--ink{background:var(--ink);color:var(--cream)}
  .figure--ink .num{color:var(--cream)}
  .figure--ink .num small{color:var(--sand)}
  .figure--ink p{opacity:.75}
  .glyph{height:.62em;width:auto;display:inline-block;margin-left:.16em;
         vertical-align:baseline;stroke:none;fill:var(--ink);opacity:.12}
  .figure--ink .glyph{fill:var(--cream);opacity:.15}
  .wip{display:none}
  .watts .num{font-size:clamp(5rem,14vw,10rem);letter-spacing:-.03em;display:block;line-height:1}
  .watts .num small{font-size:.32em;font-weight:400}
  .watts p{margin-top:2rem}

  /* ---------- grid de celdas ---------- */
  .grid4{display:grid;gap:1px;background:var(--sand);border:1px solid var(--sand);margin-top:3.5rem}
  @media(min-width:48rem){.grid4{grid-template-columns:repeat(2,1fr)}}
  .cell{background:var(--paper);padding:2.5rem 2rem;transition:background .3s ease}
  .cell:hover{background:var(--cream)}
  .cell h3{font-size:1.375rem}
  .cell .cellk{font-size:.625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sand-text);font-weight:600;display:block;margin-bottom:1rem}
  .cell p{margin-top:.75rem;font-size:.9375rem;opacity:.8}

  /* ---------- panteon ---------- */
  .altar{margin-top:3.5rem;background:var(--ink);color:var(--cream);padding:3rem 2.25rem}
  @media(min-width:48rem){.altar{padding:4rem 3.5rem}}
  .altar h3{font-size:clamp(2.25rem,5vw,3.25rem);letter-spacing:.02em;margin-top:.25rem}
  .altar p{margin-top:1.5rem;opacity:.78;max-width:36rem}
  .deityk{font-size:.625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sand-text);font-weight:600;display:block}
  .altar .deityk,.gap .deityk,.os .deityk{color:var(--sand)}

  /* ---------- la categoria: tabla de criterios ---------- */
  /* La seccion es clara y la tabla vive en un panel de tinta, para que pueda ir
     pegada al hero sin dejar dos oscuras seguidas. */
  .category-lede{margin-top:2rem;font-size:1.0625rem;max-width:40rem;text-wrap:pretty}
  .cmp-panel{margin-top:3rem;background:var(--ink);color:var(--cream);padding:2.5rem 1.75rem}
  @media(min-width:48rem){.cmp-panel{padding:3.5rem 3rem}}
  /* La tabla conserva scroll local como red de seguridad en pantallas estrechas. */
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cmp{width:100%;min-width:20rem;border-collapse:collapse;font-size:.875rem}
  .cmp th,.cmp td{padding:1rem .75rem;text-align:center;
    border-top:1px solid rgba(185,169,140,.28);vertical-align:baseline}
  /* .62 daba 3,73:1 en la cabecera y .4 daba 3,47:1 en las celdas: los dos por
     debajo de AA. Con .78 y .55 quedan en 5,13:1 y 5,38:1 y siguen atenuados
     respecto a la columna de ANCLA, que es lo que se busca. */
  .cmp thead th{border-top:0;padding-top:0;font-family:var(--sans);font-size:.625rem;
    font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);
    line-height:1.5;opacity:.78}
  .cmp thead th.own{opacity:1}
  .cmp thead td{border-top:0}
  .cmp tbody th{font-family:var(--sans);font-weight:400;text-align:left;
    padding-left:0;opacity:.82;min-width:13rem}
  .cmp td{width:7rem}
  .cmp .no{opacity:.55}
  /* La columna de ANCLA es la unica a opacidad plena y en el acento de marca:
     gana por contraste, no por relleno. */
  .cmp .si{color:var(--sand);font-weight:600}
  .category-coda{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--sand);
    font-family:var(--serif);font-size:clamp(1.125rem,2.4vw,1.5rem);line-height:1.45;
    color:var(--cream);max-width:34rem}
  .category-coda strong{font-weight:500;color:var(--sand)}
  @media(max-width:34rem){
    .cmp{font-size:.8125rem;min-width:18rem}
    .cmp th,.cmp td{padding:.8rem .4rem}
    .cmp tbody th{min-width:11rem}
    .cmp td{width:4.5rem}
  }

  /* ---------- como piensa / ANCLA OS ---------- */
  .howthinks-lede{margin-top:2rem;font-size:1.0625rem;max-width:38rem;text-wrap:pretty}
  /* Bloque de tinta incrustado sobre fondo claro, mismo patron que .altar y .gap */
  .os{margin-top:3.5rem;background:var(--ink);color:var(--cream);padding:3rem 2.25rem}
  @media(min-width:48rem){.os{padding:4rem 3.5rem}}
  .os h3{font-size:clamp(1.5rem,3vw,2.125rem);line-height:1.2;margin-top:.5rem;max-width:20ch}
  .os p{margin-top:1.5rem;opacity:.78;max-width:40rem;text-wrap:pretty}
  .os p + p{margin-top:1.25rem}
  /* Las cuatro afirmaciones seguidas, en frases cortas. Sustituye a la tabla que
     habia aqui: la portada ya tiene una dos secciones antes. */
  .os p.os-beats{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid rgba(185,169,140,.28);
    opacity:1;font-size:1rem;line-height:1.6;max-width:36rem}

  /* oculto visualmente, disponible para lectores de pantalla */
  .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .ternary{margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--sand);
    font-family:var(--serif);font-size:clamp(1.375rem,3.4vw,2.125rem);line-height:1.3;
    letter-spacing:-.01em;max-width:24ch}

  .pantheon{display:grid;gap:1px;background:var(--sand);border:1px solid var(--sand);border-top:none;margin-top:0}
  @media(min-width:44rem){.pantheon{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:68rem){.pantheon{grid-template-columns:repeat(3,1fr)}}
  .deity{background:var(--paper);padding:2.5rem 2rem;transition:background .3s ease}
  .deity:hover{background:var(--cream)}
  .deity h3{font-size:1.5rem;margin-top:.75rem}
  .deity p{margin-top:.75rem;font-size:.9375rem;opacity:.8;text-wrap:pretty}

  .pantheon-toggle{display:flex;align-items:center;gap:1.25rem;width:100%;
    padding:1.5rem 2rem;background:var(--paper);color:var(--ink);cursor:pointer;
    border:1px solid var(--sand);border-top:none;font-family:var(--sans);text-align:left;
    transition:background .3s ease}
  .pantheon-toggle:hover{background:var(--cream)}
  .pantheon-toggle:focus-visible{outline:2px solid var(--sand);outline-offset:-4px}
  .pantheon-toggle .plus-mark{font-family:var(--serif);font-size:1.75rem;line-height:1;
    color:var(--sand-text);transition:transform .35s ease;display:inline-block}
  .pantheon-toggle[aria-expanded="true"] .plus-mark{transform:rotate(45deg)}
  .pantheon-toggle .more-label{font-size:.6875rem;font-weight:600;letter-spacing:.28em;
    text-transform:uppercase;color:var(--sand-text)}
  .pantheon-more{border:1px solid var(--sand);border-top:none;background:var(--cream);padding:2.5rem 2rem}
  .extra-row{display:grid;gap:.75rem}
  @media(min-width:44rem){.extra-row{grid-template-columns:9rem 1fr;gap:2rem;align-items:baseline}}
  .extra-row h3{font-size:1.5rem}
  .extra-row p{margin-top:.75rem;font-size:.9375rem;opacity:.8;max-width:34rem;text-wrap:pretty}
  .extra-row + .extra-row{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--sand)}
  .extra-row--wip h3,.extra-row--wip p{opacity:.62}
  .status{display:block;margin-top:.5rem;font-size:.5625rem;letter-spacing:.24em;
    text-transform:uppercase;font-weight:600;color:var(--sand-text);
    border:1px solid var(--sand);padding:.3rem .55rem;width:max-content}
  .extra-note{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--sand);
    font-size:.9375rem;opacity:.8;max-width:44rem;text-wrap:pretty}

  .pantheon-note{margin-top:3rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1.5rem}
  .pantheon-note p{font-size:.9375rem;opacity:.8;max-width:32rem}
  .pantheon-note strong{font-weight:600;opacity:1}
  .pantheon-note .expand{font-size:.6875rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sand-text);font-weight:600;opacity:1}

  /* ---------- meaning inside ANCLA One ---------- */
  .name-story h2{color:var(--cream)}
  .name-pair{display:grid;gap:1px;margin-top:3.5rem;background:rgba(185,169,140,.45);border:1px solid rgba(185,169,140,.45)}
  @media(min-width:48rem){.name-pair{grid-template-columns:repeat(2,1fr)}}
  .name-entry{background:var(--ink);padding:2.5rem 2rem}
  @media(min-width:48rem){.name-entry{padding:3.5rem}}
  .name-word{display:block;font-family:var(--serif);font-size:clamp(2rem,5vw,3.25rem);line-height:1;color:var(--sand)}
  .name-entry p{margin-top:1.5rem;max-width:30rem;opacity:.78;text-wrap:pretty}

  /* Cierre de "La ruta": rescatado de la seccion "Adelantada", que se elimino
     por repetir el argumento de "Por que ahora". Esta linea no lo repetia: es
     el motivo para comprar ahora en vez de esperar, y aqui remata la cronologia. */
  .ruta-coda{margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--sand);
    font-family:var(--serif);font-size:clamp(1.25rem,2.8vw,1.875rem);line-height:1.35;
    max-width:26ch}

  /* ---------- las ramas de ANCLA Labs ---------- */
  .branches h2{color:var(--cream);max-width:24ch}

  /* ---------- como se fabrica ---------- */
  .making h2{color:var(--cream);max-width:20ch}
  .making-lede{margin-top:2rem;color:var(--cream);opacity:.72;max-width:38rem;text-wrap:pretty}
  .making-coda{margin-top:2.5rem;font-family:var(--serif);
    font-size:clamp(1.25rem,2.8vw,1.75rem);line-height:1.35;color:var(--cream);max-width:24ch}
  .making-note{margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid var(--sand);
    color:var(--cream);opacity:.72;font-size:.9375rem;max-width:40rem;text-wrap:pretty}

  /* ---------- tejido ---------- */
  .mesh h2{color:var(--cream);max-width:20ch}
  .mesh-lede{margin-top:2rem;color:var(--cream);opacity:.72;max-width:34rem}
  .mesh-beats{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--sand)}
  .mesh-beats span{font-size:.6875rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--sand)}
  .mesh-coda{margin-top:2.5rem;font-family:var(--serif);font-size:clamp(1.125rem,2.4vw,1.5rem);line-height:1.4;color:var(--cream);max-width:24ch}

  /* Los dos fragmentos de esta seccion no llevan regla propia: usan el
     .bleed-left y el .bleed-right de siempre, y estan donde han estado siempre.
     Aviso para quien vuelva por aqui: durante un rato la foto de esta seccion
     fue a sangre, de borde a borde del viewport, y eso metia la imagen en el
     margen exterior, que es donde viven los fragmentos. El de la derecha
     acababa pintando por encima del chasis (39 aristas a 1920), porque los
     .hex-frag son absolute y la imagen no esta posicionada.
     Se probo recolocarlo arriba y con silueta propia, y se probo reanclarlo al
     borde de pantalla con un min() de dos valores. Las dos cosas funcionaban y
     las dos se tiraron: la solucion buena era devolver la foto al ancho del
     .wrap. Asi el no-solapamiento vuelve a ser geometrico -foto dentro,
     fragmentos fuera, cero pixeles de ancho en comun- en vez de depender de que
     las cuentas cuadren. Si alguien vuelve a sacar una foto fuera del .wrap en
     una seccion con fragmentos, este bug vuelve. */

  /* ---------- ancla labs ---------- */
  .founder{margin-top:3rem;max-width:40rem}
  .founder p + p{margin-top:1.5rem}
  .founder p{max-width:40rem;text-wrap:pretty}
  .founder-lead{font-size:1.0625rem}
  .founder-lead strong{font-family:var(--serif);font-weight:500;font-size:1.15em}
  .founder strong{font-weight:600}
  /* La ultima linea es la declaracion de mision, no un parrafo mas del texto. */
  .founder p.founder-coda{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--sand);
    font-family:var(--serif);font-size:clamp(1.25rem,2.8vw,1.75rem);line-height:1.35;max-width:24ch}
  .signature{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--sand);
    font-family:var(--serif);font-size:1.0625rem}
  .gap{margin-top:3rem;background:var(--ink);color:var(--cream);padding:3rem 2.25rem}
  @media(min-width:48rem){.gap{padding:4rem 3.5rem}}
  .gap-lead{font-family:var(--serif);font-size:clamp(1.375rem,3vw,2rem);line-height:1.35;
    margin-top:1.25rem;max-width:30ch}
  .gap-lead strong{font-weight:500;color:var(--sand)}
  .gap-sub{margin-top:2rem;padding-top:1.75rem;border-top:1px solid var(--sand);
    font-size:.9375rem;opacity:.78;max-width:38rem}
  .gap-sub strong{font-weight:600;opacity:1}

  .mesh-lede-dark{margin-top:2.5rem;max-width:40rem;font-size:1.0625rem;text-wrap:pretty}
  .invest-note{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--sand);
    font-size:.875rem;opacity:.75;max-width:44rem;text-wrap:pretty}

  /* ---------- columnas ---------- */
  .cols{display:grid;gap:3.5rem;margin-top:3.5rem}
  @media(min-width:48rem){.cols{grid-template-columns:repeat(2,1fr);gap:4rem 5rem}}
  .col{border-top:1px solid var(--sand);padding-top:1.75rem}
  .col h3{font-size:1.375rem}
  .col p{margin-top:.75rem;font-size:.9375rem;opacity:.8}

  /* ---------- timeline ---------- */
  .timeline{margin-top:3.5rem}
  .milestone{position:relative;padding:0 0 3.5rem 2.25rem;border-left:1px solid var(--sand)}
  .milestone:last-child{padding-bottom:0}
  .milestone::before{content:"";position:absolute;left:-4px;top:.5em;width:7px;height:7px;background:var(--sand);border-radius:50%}
  .milestone .when{font-size:.6875rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sand-text);font-weight:600}
  .milestone h3{font-size:1.375rem;margin-top:.5rem}
  .milestone p{margin-top:.5rem;font-size:.9375rem;opacity:.8}

  /* ---------- tesis ---------- */
  .theses{margin-top:3.5rem}
  .thesis{border-top:1px solid var(--sand);padding:2.5rem 0;display:grid;gap:1rem}
  @media(min-width:48rem){.thesis{grid-template-columns:5rem 1fr;gap:2.5rem}}
  .thesis:last-child{border-bottom:1px solid var(--sand)}
  .thesis .n{font-family:var(--serif);font-size:.9375rem;color:var(--sand-text);letter-spacing:.1em}
  .thesis h3{font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.3;max-width:22ch}
  .thesis p{margin-top:1rem;font-size:.9375rem;opacity:.8}

  /* ---------- FAQ ---------- */
  .faq{margin-top:3rem;border-top:1px solid var(--sand)}
  .faq details{border-bottom:1px solid var(--sand)}
  .faq summary{list-style:none;cursor:pointer;padding:1.75rem 0;font-family:var(--serif);font-size:1.25rem;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;transition:color .3s ease}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary:hover{color:var(--sand)}
  .faq summary .plus{font-family:var(--sans);font-size:1.25rem;color:var(--sand-text);flex:0 0 auto;transition:transform .3s ease}
  .faq details[open] .plus{transform:rotate(45deg)}
  .faq details p{padding:0 0 1.75rem;font-size:.9375rem;opacity:.85}

  /* ---------- CTA final ---------- */
  .final h2{color:var(--cream)}
  .final p{margin-top:1.5rem;opacity:.7}
  .club{margin-top:3rem;display:grid;gap:0}
  @media(min-width:48rem){.club{grid-template-columns:repeat(2,1fr);column-gap:3.5rem}}
  .club-item{display:flex;gap:1.5rem;align-items:baseline;padding:1.75rem 0;border-top:1px solid var(--sand)}
  .club-n{font-family:var(--serif);font-size:.9375rem;color:var(--sand);flex:0 0 auto}
  .club-item h3{font-size:1.25rem}
  .club-item p{margin-top:.5rem;font-size:.9375rem;opacity:.72;text-wrap:pretty}

  .form{margin-top:3rem;display:flex;flex-direction:column;flex-wrap:wrap;gap:1rem;max-width:30rem}
  @media(min-width:36rem){.form{flex-direction:row;gap:0}}
  .form input{flex:1;background:transparent;border:1px solid var(--sand);border-radius:0;color:var(--cream);font-family:var(--sans);font-size:.9375rem;padding:1rem 1.25rem}
  @media(min-width:36rem){.form input{border-right:none}}
  .form input::placeholder{color:var(--cream);opacity:.6}
  .form input[disabled]{opacity:.5;cursor:not-allowed}
  .form input:focus-visible{outline:2px solid var(--sand);outline-offset:2px}
  .form .cta{margin-top:0}
  .form .cta[disabled]{opacity:.6;cursor:not-allowed}
  .form-note{margin-top:1.25rem;font-size:.75rem;opacity:.68}
  .form-ok{margin-top:1.25rem;font-size:.875rem;color:var(--sand)}
  .form-status{margin-top:1.25rem}
  .form-ok,.form-error{display:none}
  /* .final p impone opacity:.7 y tumbaba el mensaje de exito a 4,36:1.
     Hace falta ganarle en especificidad (0,2,1), no basta con .form-ok. */
  .final p.form-ok,.final p.form-error{opacity:1}
  .form-error{font-size:.875rem;color:var(--cream);border-left:2px solid var(--sand);padding-left:.875rem}

  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  .consent{display:flex;align-items:flex-start;gap:.6rem;flex-basis:100%;max-width:30rem;
    font-size:.8125rem;color:var(--cream);opacity:.78;cursor:pointer}
  .consent input{margin-top:.2rem;flex:0 0 auto}
  .consent a{color:var(--sand);text-decoration:underline;text-underline-offset:.15em}
  .consent a:hover,.consent a:focus-visible{color:var(--cream)}

  /* ---------- notas de fuente (estadisticas) ---------- */
  /* La cita completa robaba protagonismo a la cifra: cuatro renglones de texto
     que nadie pidio, compitiendo con el dato. Ahora va plegada tras un "Fuente"
     discreto — <details> nativo, sin JavaScript y accesible de serie.
     margin-top:auto la empuja al pie para que todas las de una fila compartan
     linea base; necesita ganar a `.stat p` (0,1,1). */
  .stat .src{margin-top:auto;padding-top:1rem}
  /* margin-left:auto lo empuja al margen derecho de la celda. La cita, cuando se
     abre, se queda alineada a la izquierda: es texto y se lee peor a la derecha. */
  .src summary{list-style:none;cursor:pointer;width:max-content;margin-left:auto;
    padding:.25rem 0;font-size:.75rem;color:var(--sand-text);
    text-decoration:underline;text-underline-offset:.2em;
    transition:color .3s ease}
  .src summary::-webkit-details-marker{display:none}
  .src summary:hover{color:var(--ink)}
  .src summary:focus-visible{outline:2px solid var(--sand-text);outline-offset:3px}
  .stat .src p{margin-top:.5rem;font-size:.75rem;line-height:1.5;opacity:1;
    color:var(--sand-text);text-wrap:pretty}
  .src a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
  .src a:hover,.src a:focus-visible{color:var(--ink)}
  .src i{font-style:italic}

  /* ---------- paginas legales / 404 ---------- */
  .legal h2{margin-top:3rem}
  .legal h2:first-child{margin-top:0}
  .legal p,.legal li{margin-top:1rem;font-size:.9375rem;opacity:.85;max-width:42rem}
  .legal ul{padding-left:1.25rem}
  .legal strong{font-weight:600}

  footer{background:var(--ink);color:var(--cream);padding:3rem 0;border-top:1px solid rgba(185,169,140,.3)}
  /* OJO: nada de opacity en .foot — un hijo no puede superar la opacidad de su
     padre, asi que .foot-sig/.foot-cry quedaban al 55% y fallaban AA (3,21:1).
     La atenuacion va en cada hijo que la necesita. */
  .foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem;font-size:.75rem}
  .foot-sig{font-family:var(--serif);font-size:.9375rem;color:var(--cream);opacity:.85}
  .foot-cry{font-size:.6875rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--sand)}
  .foot-legal{display:flex;gap:1rem}
  .foot-legal a{color:var(--cream);text-decoration:none}
  .foot-legal a:hover,.foot-legal a:focus-visible{color:var(--sand)}