/* Founder Hub · hidalgougalde.cl — estilos de la página.
   Colores, curva y duraciones: tokens.css (copia del módulo 08 de identidad). Capas, de atrás hacia delante:
   color · manchas oscuras (mosaico sin costura que deriva a la izquierda) · partículas del puntero · contenido (manual de marca v1.3.0). */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--hu-fondo);color:var(--hu-tinta);font:400 17px/1.55 var(--hu-sans);overflow-x:clip}
button{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--hu-acento);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Fondo ── */
.fondo-manchas{position:fixed;top:0;left:0;height:100%;width:250%;z-index:-2;pointer-events:none;background:url(fondo-manchas.webp) 0 0/auto 100% repeat-x}   /* mosaico SIN costura de manchas oscuras; hub-pagina.js fija su ancho a un número exacto de mosaicos y lo desplaza a la izquierda un mosaico por vuelta */
#particulas{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* ── Sin JavaScript: la lista es la página. Con JavaScript, la escena; hub-base.js retira la lista al arrancar ── */
.lista-sin-js{max-width:720px;margin:0 auto;padding:56px clamp(16px,5vw,32px)}
.lista-sin-js h1{font:600 clamp(34px,6vw,52px)/1.05 var(--hu-serif);margin:0 0 28px}
.lista-sin-js ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.lista-sin-js li{padding:18px 20px;border:1px solid var(--hu-linea);border-radius:16px;background:var(--hu-superficie)}
.lista-sin-js h2{font:600 26px/1.1 var(--hu-serif);margin:0 0 6px}
.lista-sin-js p{margin:0 0 8px;color:var(--hu-tinta)}
.lista-sin-js a{display:inline-flex;align-items:center;min-height:44px;color:var(--hu-acento);font-weight:700}
html:not(.sin-js) .lista-sin-js{display:none}
html.sin-js .escena{display:none}
/* Con JavaScript, la escena no se muestra hasta estar armada (hub-pagina.js pone .listo): nada de tarjeta vacía ni de lista un instante antes */
html.js:not(.listo) .escena{opacity:0}
/* La entrada es un fundido por opacidad (regla del sistema: todo aparece 0→1, nada de golpe). Transición CSS, no @keyframes: es interrumpible y solo toca opacity.
   Escena y las tres capas de fondo se encienden juntas cuando .listo llega; con movimiento reducido el fundido se acorta, no se quita. */
.escena{transition:opacity var(--hu-t-lento,1.1s) var(--hu-curva-firma,ease-out)}
.fondo-manchas{opacity:.5;transition:opacity calc(var(--hu-t-lento,1.1s) * 1.4) var(--hu-curva-firma,ease-out)}
#particulas{transition:opacity calc(var(--hu-t-lento,1.1s) * 1.4) var(--hu-curva-firma,ease-out)}
html.js:not(.listo) .fondo-manchas,html.js:not(.listo) #particulas{opacity:0}
@media (prefers-reduced-motion:reduce){.escena,.fondo-manchas,#particulas{transition-duration:.3s}}

/* ── A · Constelación ── */
.escena{position:relative;height:100vh;height:100dvh;min-height:560px;overflow:hidden;--x:50%;--y:50%;--r:220px}
.escena svg.red{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nodo{position:absolute;border-radius:50%;box-shadow:0 0 0 1px rgba(232,146,122,0),0 0 60px 8px rgba(232,146,122,0);border:1px solid var(--hu-linea);background:var(--hu-superficie);color:var(--hu-tinta);cursor:pointer;display:grid;place-items:center;padding:0}
.nodo .marca{display:grid;place-items:center;width:64%;height:64%}
.nodo .marca svg{max-width:100%;max-height:100%;width:auto;height:auto}
/* La tarjeta central es el ancla de la escena: por encima de la oscuridad */
.centro{position:absolute;z-index:3;aspect-ratio:1;border-radius:22px;background:#16292C;border:1px solid #3B5F63;box-shadow:0 0 0 1px rgba(232,146,122,0),0 0 60px 8px rgba(232,146,122,0),0 18px 40px rgba(0,0,0,.35);color:#E6D5C3;cursor:pointer;padding:0}   /* el halo ya está declarado en transparente: si la sombra cambia de número de capas, GSAP no puede interpolarla y salta */
.centro .hu-logo{position:absolute;left:10%;top:50%;width:80%}   /* el centrado vertical lo pone GSAP (yPercent), que también la achica al pie */
.centro .rotulo{position:absolute;left:0;right:0;bottom:8%;text-align:center;font:700 13px var(--hu-sans);letter-spacing:.14em;text-transform:uppercase;color:#A6A197;padding:0 12px}
#materia{position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none}   /* sobre la tarjeta: el polvo llega en espiral y se asienta encima de ella */

/* ── C · Luz: oscuridad encima de red y nodos, perforada en dos sitios (el nodo elegido y la tarjeta central). No recibe el puntero ── */
.oscuridad{position:absolute;inset:0;z-index:2;pointer-events:none;background:rgba(13,26,28,.86);--cr:0px;
  -webkit-mask:radial-gradient(circle var(--r) at var(--x) var(--y),transparent 0 40%,rgba(0,0,0,.5) 65%,#000 100%),radial-gradient(circle var(--cr) at var(--cx) var(--cy),transparent 0 45%,rgba(0,0,0,.5) 70%,#000 100%);
  -webkit-mask-composite:source-in;
          mask:radial-gradient(circle var(--r) at var(--x) var(--y),transparent 0 40%,rgba(0,0,0,.5) 65%,#000 100%),radial-gradient(circle var(--cr) at var(--cx) var(--cy),transparent 0 45%,rgba(0,0,0,.5) 70%,#000 100%);
          mask-composite:intersect}

/* ── Hoja de iniciativa (plantilla 21 · Perfil): sube desde abajo, en crema con su textura clara para contrastar con la escena
   oscura. Color literal: flota sobre la escena. Contrastes sobre #E6D5C3: #1F3A3D 8,9:1 · #455957 5,3:1 · #8C2F24 5,8:1 ── */
.velo-h{position:fixed;inset:0;z-index:30;background:#0B1416;opacity:0;visibility:hidden}
.hoja{position:fixed;z-index:31;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;background:#E6D5C3;color:#1F3A3D;border-radius:28px 28px 0 0;padding:clamp(56px,7vh,80px) clamp(20px,6vw,90px) 48px;visibility:hidden;box-shadow:0 -20px 60px rgba(0,0,0,.35)}
/* La textura clara pesa ~300 KB y la hoja no se ve al cargar: se pide en reposo, no compite con la escena (hub-base.js pone .papel-listo) */
.hoja::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.14}   /* más baja que en el manual (.24): con más, el crema se agrisaba */
.papel-listo .hoja::before{background:url(papel-claro.webp) center/cover}
.hoja.abierta{visibility:visible}
.hoja>*{position:relative}
.hoja-cerrar{position:absolute;top:18px;right:18px;width:48px;height:48px;border-radius:50%;border:1px solid #A6A197;background:transparent;color:#1F3A3D;cursor:pointer;display:grid;place-items:center;z-index:1}
.hoja-cerrar svg{width:20px;height:20px}
.hoja-dos{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:center;max-width:1180px;margin:0 auto}
.hoja-marca{position:relative;aspect-ratio:4/5;max-height:62vh;border-radius:22px;background:#1F3A3D;display:grid;place-items:center;overflow:hidden;color:#E6D5C3}
.hoja-marca::before{content:"";position:absolute;inset:0;background:url(fondo-textura.webp) center/cover;opacity:.3}
.hoja-marca .m{position:relative;display:grid;place-items:center;width:74%;height:60%}
.hoja-marca svg{max-width:100%;max-height:100%;width:auto;height:auto}
.hoja .rot{font-size:14px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#455957;margin:0 0 12px}
.hoja .tit{font:600 clamp(40px,5.6vw,80px)/1 var(--hu-serif);margin:0 0 14px}
.hoja .tit .ln{display:block;overflow:hidden;padding-bottom:.08em}
.hoja .tit .ln span{display:inline-block}
.hoja .baj{font-size:20px;color:#8C2F24;font-weight:600;margin:0 0 14px}
.hoja .txt{font-size:18px;margin:0 0 26px;max-width:46ch;color:#1F3A3D}
.hoja .ir{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;background:#8C2F24;color:#E6D5C3;text-decoration:none;font-weight:700}
.hoja .ir svg{width:18px;height:18px}
.hoja .ir .barra-ir{position:absolute;left:0;bottom:0;height:4px;width:100%;background:#E8927A;transform:scaleX(0);transform-origin:left}
.hoja .ir .et{position:relative}
@media (max-width:760px){.hoja-dos{grid-template-columns:1fr}.hoja-marca{aspect-ratio:4/3;max-height:34vh}.hoja-marca .m{width:62%;height:66%}}

/* ── Despedida al ir al sitio: un iris desde el botón cubre la hoja con la marca en grande, justo antes de abrir la pestaña ── */
.iris{position:fixed;inset:0;z-index:40;background:#1F3A3D;color:#E6D5C3;display:grid;place-items:center;pointer-events:none;visibility:hidden;clip-path:circle(0 at 50% 50%)}
.iris::before{content:"";position:absolute;inset:0;background:url(fondo-textura.webp) center/cover;opacity:.3}
.iris .m{position:relative;display:grid;place-items:center;width:min(46vw,420px);height:min(30vh,260px)}
.iris .m svg{max-width:100%;max-height:100%;width:auto;height:auto}
.iris p{position:absolute;left:0;right:0;bottom:12vh;margin:0;text-align:center;font-size:14px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#A6A197}
.iris .abrir-a-mano{color:#E6D5C3;display:inline-flex;align-items:center;min-height:44px}



/* ── Logo fijo arriba a la izquierda: sigue a la página y cambia de color según el fondo de cada sección [data-fondo]. Dos copias apiladas (crema para fondo
   oscuro, verde para fondo claro) que se funden por opacidad al cruzar el límite de sección (hub-cabecera.js). ── */
.cab-logo{position:fixed;z-index:20;left:clamp(16px,3vw,32px);top:16px;display:block;height:54px;width:203px}   /* 2560x683 → proporción 3,75:1 */
.cab-logo span{position:absolute;inset:0}
.cab-logo svg{width:100%;height:100%;display:block}
.cab-o{color:#E6D5C3}
.cab-c{color:#1F3A3D;opacity:0}
.cab-logo.arriba{pointer-events:none}   /* arriba del todo, volver al inicio no haría nada: no responde (y sale del recorrido con Tab) */
html.sin-js .cab-logo{display:none}
html.js:not(.listo) .cab-logo{opacity:0}
.cab-logo{transition:opacity var(--hu-t-lento,1.1s) var(--hu-curva-firma,ease-out)}

/* v1.3.1 · Cabecera compacta sobre franja (C + A). Al bajar, el logotipo completo se reduce (54 → 38 px de alto, sin reescribir nada)
   y se apoya en una franja fija con el fondo de la sección que pasa por debajo: así nunca queda sobre texto. Arriba del todo no hay franja. */
.cab-franja{position:fixed;z-index:19;left:0;right:0;top:0;height:70px;pointer-events:none;
  background:#1F3A3D;border-bottom:1px solid rgba(230,213,195,.16);box-shadow:0 8px 20px rgba(0,0,0,.28);   /* v1.4: banda lisa, sin la textura grunge ni el degradado que la difuminaba (no gustó detrás del menú) */
  transition:opacity var(--hu-t-normal,.6s) var(--hu-curva-firma,ease-out),background-color var(--hu-t-normal,.6s),border-color var(--hu-t-normal,.6s)}
.cab-franja.claro{background:#E6D5C3;border-bottom-color:rgba(31,58,61,.16);box-shadow:0 8px 20px rgba(31,58,61,.14)}
.cab-franja.arriba{opacity:0}
.cab-logo{transform-origin:0 0;transition:opacity var(--hu-t-lento,1.1s) var(--hu-curva-firma,ease-out),transform var(--hu-t-normal,.6s) var(--hu-curva-firma,ease-out)}
.cab-logo:not(.arriba){transform:scale(.7)}   /* v1.4: centrado en la banda de 70 px (antes se subía 4 px) */
html.sin-js .cab-franja{display:none}
/* Franja Popupsty (módulo 06/04, vendorizado y traducido a la identidad HidalgoUgalde). Va al final, sin animación de entrada. */
.popupsty{position:relative;z-index:2;background:url(fondo-textura.webp) center/520px,#1F3A3D;background-blend-mode:screen,normal;border-top:1px solid rgba(230,213,195,.18);color:#E6D5C3}
.popupsty__in{max-width:1380px;margin:0 auto;padding:22px 8vw;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.popupsty__logo{display:block;width:120px;color:#E8B84A}.popupsty__logo svg{display:block;width:100%;height:auto}
.popupsty__txt{margin:0;font:300 14px/1.5 var(--hu-sans);color:#E6D5C3;text-align:left}
.popupsty__txt a{color:#E8B84A;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.popupsty__ver{font-size:13px;opacity:.85}
.popupsty{overflow:hidden}.popupsty__part{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.popupsty__in{position:relative}


/* Menú principal (v1.4): botón «Menú» arriba a la derecha + panel a pantalla completa (hub-menu.js). El botón toma el color de la cabecera: crema sobre fondo oscuro, verde sobre crema */
.cab-menu{position:fixed;z-index:31;top:0;right:clamp(16px,3vw,32px);height:70px;display:flex;align-items:center;transition:top var(--hu-t-normal,.6s) var(--hu-curva-firma,ease-out)}
.cab-menu.arriba{top:8px}   /* sin banda, el logotipo grande ocupa 16-70 px: el botón se centra con él */
.cab-boton{position:relative;display:inline-flex;align-items:center;gap:12px;height:46px;padding:0 18px 0 20px;border:0;border-radius:999px;background:transparent;color:#E6D5C3;font:700 15px/1 var(--hu-sans);letter-spacing:.02em;cursor:pointer;box-shadow:inset 0 0 0 1.5px currentColor;overflow:hidden;isolation:isolate;transition:color .35s var(--hu-curva-firma,ease-out)}
.cab-boton::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#E8927A;transform:translateY(101%);transition:transform .45s var(--hu-curva-firma,ease-out)}   /* el relleno sube desde abajo al pasar el puntero */
.cab-boton:hover::before,.cab-boton:focus-visible::before,.cab-boton[aria-expanded="true"]::before{transform:none}
.cab-boton:hover,.cab-boton:focus-visible,.cab-boton[aria-expanded="true"]{color:#1F3A3D}
.cab-boton:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.cab-menu.claro .cab-boton{color:#1F3A3D}
.cab-menu.claro .cab-boton::before{background:#8C2F24}
.cab-menu.claro .cab-boton:hover,.cab-menu.claro .cab-boton:focus-visible{color:#E6D5C3}
.cb-ico{position:relative;width:22px;height:12px;display:block}
.cb-ico i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor}
.cb-ico i:first-child{top:0}.cb-ico i:last-child{bottom:0}
html.sin-js .cab-menu{display:none}
html.js:not(.listo) .cab-menu{opacity:0}
@media (max-width:420px){.cab-boton{height:44px;padding:0 14px 0 16px;gap:10px;font-size:14px}}
/* Panel a pantalla completa: verde con grano y manchas; los títulos son grandes y suben desde una máscara */
.mnu{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;padding:96px 8vw 28px;background:#1F3A3D;color:#E6D5C3;overflow-y:auto;overscroll-behavior:contain}
.mnu[hidden]{display:none}
.mnu-fondo{position:fixed;inset:0;z-index:-1;pointer-events:none;background:url(fondo-textura.webp) center/cover,#1F3A3D;opacity:.5}
.mnu-fondo::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 85% 10%,rgba(232,146,122,.18),transparent 70%),radial-gradient(ellipse 60% 55% at 10% 95%,rgba(159,217,191,.12),transparent 70%)}
.mnu-nav{max-width:1100px;width:100%;margin:auto auto 0}   /* margen automático arriba y abajo: centra cuando sobra alto y, si falta, la lista empieza arriba y se desplaza (con «align-content:center» se cortaba la parte de arriba) */
.mnu-lista{list-style:none;margin:0;padding:0}
.mnu-li{overflow:hidden}   /* la máscara: el título sube desde abajo */
.mnu-a{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 22px;padding:5px 0;color:#E6D5C3;text-decoration:none}
.mnu-t{display:inline-block;font:600 clamp(34px,6.4vw,76px)/1.04 var(--hu-serif);transition:color .3s var(--hu-curva-firma,ease-out)}
.mnu-c{display:inline-block;will-change:transform}
.mnu-a small{font:600 clamp(12px,1.3vw,15px)/1.3 var(--hu-sans);letter-spacing:.03em;color:#A6A197}
.mnu-sub{position:absolute;left:0;bottom:-2px;width:min(100%,560px);height:12px;color:#E8927A;pointer-events:none;overflow:visible}
.mnu-a:hover .mnu-t,.mnu-a:focus-visible .mnu-t,.mnu-a.act .mnu-t{color:#E8927A}
.mnu-a:focus-visible{outline:2px solid #E6D5C3;outline-offset:2px;border-radius:6px}
.mnu-a.act::before{content:"";position:absolute;left:-18px;top:.78em;width:8px;height:8px;border-radius:50%;background:#E8927A}   /* la sección en la que se está */
.mnu-pie{list-style:none;display:flex;gap:16px;flex-wrap:wrap;margin:clamp(20px,4vh,40px) auto auto;padding:0;max-width:1100px;width:100%}
.mnu-pie a{position:relative;display:grid;place-items:center;width:60px;height:60px;border-radius:16px;color:#E6D5C3;background:url(fondo-textura.webp) center/260px,#2B5054;background-blend-mode:screen,normal;box-shadow:inset 0 0 0 1px rgba(230,213,195,.16),inset 0 -4px 0 rgba(0,0,0,.28),0 6px 14px rgba(0,0,0,.3);transition:transform .45s var(--hu-curva-firma,ease-out),color .3s,box-shadow .3s}
.mnu-pie svg{width:26px;height:26px;transition:transform .45s var(--hu-curva-firma,ease-out)}
.mnu-pie a:hover,.mnu-pie a:focus-visible{transform:translateY(-5px) rotate(-4deg);color:#1F3A3D;background-color:#E8927A}
.mnu-pie a:hover svg,.mnu-pie a:focus-visible svg{transform:scale(1.12)}
.mnu-pie a:focus-visible{outline:2px solid #E6D5C3;outline-offset:4px}
.mnu-pie a::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%);white-space:nowrap;font:700 13px var(--hu-sans);color:#1F3A3D;background:#E6D5C3;padding:6px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s ease-out}   /* nombre al señalar; capa sobre el espacio libre sobre los botones */
.mnu-pie a:hover::after,.mnu-pie a:focus-visible::after{opacity:1}
@media (max-width:640px){.mnu{padding:88px 24px 24px}.mnu-a{grid-template-columns:1fr}.mnu-a.act::before{left:-14px;top:.7em}}
@media (prefers-reduced-motion:reduce){.cab-boton,.cab-boton::before{transition:none}}

@media (prefers-reduced-motion:reduce){.mnu-pie a:hover,.mnu-pie a:focus-visible,.mnu-pie a:hover svg{transform:none}}
@media (max-width:640px){.popupsty__in{flex-direction:column;text-align:center}.popupsty__txt{text-align:center}}   /* móvil: logotipo y textos del pie de Popupsty, centrados */

/* Pantallas bajas (teléfono o tableta en horizontal): menos aire, títulos más chicos y las secciones en dos columnas para que quepan sin cortarse */
@media (max-height:560px){
  .mnu{padding:72px 6vw 16px}
  .mnu-lista{display:grid;grid-template-columns:1fr 1fr;column-gap:4vw}
  .mnu-t{font-size:clamp(26px,7.2vh,40px)}
  .mnu-a{grid-template-columns:1fr;gap:0;padding:2px 0}
  .mnu-a small{display:none}
  .mnu-pie{margin-top:14px}
  .mnu-pie a{width:48px;height:48px;border-radius:14px}
  .mnu-pie svg{width:22px;height:22px}
}
/* Alturas medias (tableta horizontal, portátil bajo): el título del menú también sigue a la altura, para que las nueve secciones quepan sin desplazarse */
@media (min-height:561px) and (max-height:900px){.mnu-t{font-size:clamp(30px,min(6.4vw,6.4vh),76px)}.mnu{padding-top:84px}}