@charset "UTF-8";
  /* Paleta Afrotex: azul rey, verde neón, naranja y blanco */
  :root {
    color-scheme: light;
    --azul: #1d3fd6;
    --azul-deep: #0a1766;
    --noche: #060c33;
    --neon: #3dff7a;
    --naranja: #ff6b1a;
    --naranja-soft: #ffd9c2;
    --blanco: #ffffff;
    --claro: #f3f5ff;
    --ink: #0a0f2e;
    --ink-soft: #454b6b;
    --linea: #dde2f5;
    --on-dark: #d3d9ff;
    --on-dark-soft: #8e96c4;
    --dark-line: #1c2560;
    --dark-card: #0d1545;
    --display: "Syne", "Arial Black", system-ui, sans-serif;
    --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
    --serif: "Instrument Serif", Georgia, serif;
    --wrap: 1240px;
    --gutter: clamp(16px, 4vw, 48px);
    --head: 72px;
    --ease: cubic-bezier(.2,.7,.1,1);
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--blanco); color: var(--ink);
    font-family: var(--body); font-size: 16px; line-height: 1.65;
    -webkit-font-smoothing: antialiased; overflow-x: clip;
  }
  a { color: inherit; }
  :focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; }
  ::selection { background: var(--neon); color: var(--ink); }
  .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
  h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1; letter-spacing: -.025em; text-wrap: balance; margin: 0; }
  h2 { font-size: clamp(2.2rem, 5vw, 4rem); }
  h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: -.015em; line-height: 1.1; }
  .serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
  p { margin: 0; max-width: 62ch; }
  .eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--azul); display: inline-flex; align-items: center; gap: .7rem; }
  .eyebrow::before { content: ""; width: 30px; height: 3px; background: var(--naranja); }
  .on-dark .eyebrow { color: var(--neon); }
  section { padding-block: clamp(4.5rem, 10vw, 8rem); }

  /* ---------- Logo ---------- */
  .logo { display: flex; align-items: center; gap: .2rem; text-decoration: none; }
  .logo-a { width: 44px; height: 44px; flex: none; margin-right: -3px; transition: transform .7s var(--ease); }
  .logo:hover .logo-a { transform: translateY(-2px) rotate(-4deg); }
  .logo-text { display: grid; gap: 3px; line-height: 1; }
  .logo-word { display: flex; align-items: center; font-family: var(--display); font-weight: 800; font-size: 1.55rem; letter-spacing: -.045em; line-height: .9; }
  .logo-lens { width: .74em; height: .74em; margin-inline: .03em; margin-top: .08em; }
  .aperture { animation: spin 14s linear infinite; }
  .logo:hover .aperture { animation-duration: 1.4s; }
  .logo-text small { font-family: var(--body); font-size: .5rem; font-weight: 700; letter-spacing: .42em; opacity: .75; display: flex; align-items: center; gap: .4em; }
  .logo-text small::before, .logo-text small::after { content: ""; height: 1px; flex: 1; background: currentColor; opacity: .6; }
  .logo-text small::before { max-width: 8px; }
  header.top:not(.solid) .logo-lens, .menu-open .logo-lens { --lens-core: #1d3fd6; }
  footer .logo-lens { --lens-core: #060c33; }

  /* ---------- Pantalla de entrada ---------- */
  .intro {
    position: fixed; inset: 0; z-index: 100; background: var(--azul); color: var(--blanco);
    display: grid; place-items: center; pointer-events: none;
    animation: introOut .9s 1.3s var(--ease) forwards;
  }
  .intro-inner { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.4rem); }
  .intro-inner { gap: 0; }
  .intro-a { width: clamp(3.6rem, 13vw, 9.4rem); height: auto; margin-right: -.1em; animation: markIn .9s var(--ease) both; }
  .intro-lens { width: .74em; height: .74em; display: block; margin-top: .1em; }
  .intro-word { font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 11vw, 8rem); letter-spacing: -.04em; line-height: 1; display: flex; overflow: hidden; padding-block: .08em; }
  .intro-word span { display: inline-block; animation: letterUp .7s var(--ease) both; }
  .intro-bar { position: absolute; left: 50%; bottom: 18%; width: min(260px, 60vw); height: 3px; translate: -50% 0; background: rgba(255,255,255,.2); overflow: hidden; border-radius: 3px; }
  .intro-bar::after { content: ""; position: absolute; inset: 0; background: var(--neon); transform-origin: 0 50%; animation: load 1.15s var(--ease) both; }
  @keyframes markIn { from { transform: scale(.4) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes letterUp { from { transform: translateY(110%); } to { transform: none; } }
  @keyframes load { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes introOut { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }

  /* ---------- Cursor ---------- */
  .cursor, .cursor-dot { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; border-radius: 50%; translate: -50% -50%; display: none; opacity: 0; }
  .cursor { width: 38px; height: 38px; border: 1.5px solid var(--naranja); place-items: center; transition-property: width, height, background, border-color, opacity; transition-duration: .35s; transition-timing-function: var(--ease); mix-blend-mode: normal; }
  .cursor span { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity .2s; }
  .cursor.big { width: 86px; height: 86px; background: var(--neon); border-color: var(--neon); }
  .cursor.big span { opacity: 1; }
  .cursor.hover { width: 58px; height: 58px; background: rgba(255,107,26,.15); }
  .cursor-dot { width: 6px; height: 6px; background: var(--naranja); }
  .cursor.live, .cursor-dot.live { opacity: 1; }
  @media (hover: hover) and (pointer: fine) {
    .has-cursor .cursor { display: grid; }
    .has-cursor .cursor-dot { display: block; }
  }

  /* ---------- Botones ---------- */
  .btn {
    display: inline-flex; align-items: center; gap: .6rem; position: relative; overflow: hidden; isolation: isolate;
    font: 600 .95rem/1 var(--body); letter-spacing: .01em; padding: 1.05rem 1.6rem; border-radius: 999px;
    text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: color .35s var(--ease), border-color .35s;
  }
  .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: translateY(101%); transition: transform .45s var(--ease); }
  .btn:hover::before { transform: none; }
  .btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
  .btn:hover svg { transform: translateX(4px) rotate(-45deg); }
  .btn-naranja { background: var(--naranja); color: var(--ink); }
  .btn-naranja::before { background: var(--neon); }
  .btn-line { border-color: currentColor; color: var(--ink); }
  .btn-line::before { background: var(--ink); }
  .btn-line:hover { color: var(--blanco); }
  .on-dark .btn-line { color: var(--blanco); }
  .on-dark .btn-line::before { background: var(--blanco); }
  .on-dark .btn-line:hover { color: var(--azul); border-color: var(--blanco); }
  .btn-azul { background: var(--azul); color: var(--blanco); }
  .btn-azul::before { background: var(--ink); }
  .actions { display: flex; flex-wrap: wrap; gap: .8rem; }

  /* ---------- Encabezado ---------- */
  header.top {
    position: fixed; left: 0; right: 0; top: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px);
    color: var(--blanco); transition: background .4s, color .4s, transform .5s var(--ease), box-shadow .4s;
  }
  header.top.solid { background: rgba(255,255,255,.92); backdrop-filter: blur(12px); color: var(--ink); box-shadow: 0 10px 30px rgba(10,23,102,.08); }
  header.top.hide { transform: translateY(-100%); }
  .top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--head); }
  nav.main { display: flex; align-items: center; gap: 2rem; font-size: .92rem; font-weight: 500; }
  nav.main a:not(.btn) { text-decoration: none; position: relative; }
  nav.main a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--naranja); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .4s var(--ease); }
  nav.main a:not(.btn):hover::after, nav.main a.active::after { transform: scaleX(1); transform-origin: 0 50%; }
  nav.main .btn { padding: .75rem 1.25rem; }
  .progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--neon), var(--naranja)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
  .menu-btn { display: none; background: none; border: 0; padding: .6rem; cursor: pointer; color: inherit; }
  .menu-btn span { display: block; width: 26px; height: 2px; background: currentColor; margin: 6px 0; transition: transform .4s var(--ease), opacity .3s; }
  .menu-open .menu-btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-open .menu-btn span:nth-child(2) { opacity: 0; }
  .menu-open .menu-btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  @media (max-width: 860px) {
    .menu-btn { display: block; position: relative; z-index: 2; }
    nav.main {
      position: fixed; inset: 0; z-index: 1; flex-direction: column; justify-content: center; align-items: flex-start;
      gap: 1.2rem; padding: 6rem var(--gutter) 3rem; background: var(--azul); color: var(--blanco);
      clip-path: circle(0 at calc(100% - 40px) 36px); transition: clip-path .7s var(--ease); visibility: hidden;
    }
    .menu-open nav.main { clip-path: circle(150% at calc(100% - 40px) 36px); visibility: visible; }
    nav.main a:not(.btn) { font-family: var(--display); font-weight: 700; font-size: 2.4rem; letter-spacing: -.03em; line-height: 1.1; }
    nav.main .btn { margin-top: 1rem; }
    .menu-open header.top { color: var(--blanco); background: transparent; box-shadow: none; backdrop-filter: none; }
  }

  /* ---------- Portada ---------- */
  .hero { position: relative; background: var(--azul); color: var(--blanco); overflow: hidden; padding-block: 0; }
  .hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: calc(var(--head) + clamp(3rem, 6vw, 4.5rem)) clamp(3.5rem, 7vw, 6rem); }
  .hero-copy { display: grid; gap: 1.8rem; min-width: 0; }
  .hero h1 { font-size: clamp(2.5rem, 6.6vw, 5.8rem); letter-spacing: -.04em; }
  .hero h1 .ln { display: block; overflow: hidden; padding-block: .06em; margin-block: -.06em; }
  .hero h1 .ln.serif { font-size: 1.02em; color: var(--neon); line-height: .95; }
  .hero h1 .ch { display: inline-block; animation: charUp 1s var(--ease) both; animation-delay: calc(1.5s + var(--i) * .025s); }
  .hero-copy > p { font-size: 1.12rem; color: var(--on-dark); }
  .hero-copy > .eyebrow, .hero-copy > p, .hero-copy > .actions, .hero-copy > .stats { animation: fadeUp 1s var(--ease) both; }
  .hero-copy > .eyebrow { animation-delay: 1.45s; }
  .hero-copy > p { animation-delay: 1.95s; }
  .hero-copy > .actions { animation-delay: 2.1s; }
  .hero-copy > .stats { animation-delay: 2.25s; }
  @keyframes charUp { from { transform: translateY(110%) rotate(6deg); } to { transform: none; } }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  .stats { display: flex; gap: clamp(1.5rem, 5vw, 4rem); padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.2); }
  .stat b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 4.6vw, 3.8rem); letter-spacing: -.04em; line-height: 1; color: var(--neon); font-variant-numeric: tabular-nums; }
  .stat span { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark); }

  .hero-visual { position: relative; animation: fadeUp 1.2s 1.6s var(--ease) both; }
  .arch {
    position: relative; aspect-ratio: 4 / 5; max-width: 100%; border-radius: 999px 999px 18px 18px; overflow: hidden;
    background: var(--naranja); transform: translate3d(var(--ax, 0), var(--ay, 0), 0); transition: transform .8s var(--ease);
  }
  .arch .rings { position: absolute; inset: 0; background: repeating-radial-gradient(circle at 50% 38%, transparent 0 22px, rgba(255,255,255,.14) 22px 24px); animation: ringPulse 8s linear infinite; }
  @keyframes ringPulse { to { background-size: 110% 110%; background-position: center; } }
  .arch .portrait { position: absolute; inset: 0; }
  .arch .label { position: absolute; left: 1rem; bottom: 1rem; z-index: 3; background: var(--blanco); color: var(--ink); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .5rem .85rem; border-radius: 999px; white-space: nowrap; }
  .spark { position: absolute; z-index: 2; width: 8px; height: 8px; border-radius: 50%; background: var(--neon); bottom: -10px; animation: rise linear infinite; opacity: .9; }
  @keyframes rise { from { transform: translateY(0) scale(1); opacity: 0; } 10% { opacity: 1; } to { transform: translateY(-520px) scale(.3); opacity: 0; } }
  .badge { position: absolute; z-index: 4; width: clamp(110px, 11vw, 150px); aspect-ratio: 1; left: -10%; bottom: 12%; border-radius: 50%; background: var(--noche); color: var(--ink); display: grid; place-items: center; box-shadow: 0 20px 40px rgba(6,12,51,.3); }
  .badge > svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
  .badge svg text { font: 700 9px var(--body); letter-spacing: .3em; fill: var(--neon); }
  .badge .logo-mark { width: 46%; height: auto; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .scroll-hint { position: absolute; left: 50%; bottom: 1.4rem; translate: -50% 0; width: 22px; height: 36px; border: 1.5px solid rgba(255,255,255,.45); border-radius: 12px; }
  .scroll-hint::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--neon); animation: wheel 1.8s ease-in-out infinite; }
  @keyframes wheel { 60% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }
  @media (max-width: 860px) {
    .hero .wrap { grid-template-columns: 1fr; }
    .hero-visual { max-width: 400px; width: 100%; margin-inline: auto; }
    .badge { left: auto; right: -4%; bottom: -6%; }
    .scroll-hint { display: none; }
  }

  .arch-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }

  /* Portada con foto horizontal completa */
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.2rem); }
  @media (min-width: 1000px) {
    .hero h1 { font-size: clamp(3rem, 6vw, 5.4rem); }
    .hero-copy { grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: end;
      grid-template-areas: "eye eye" "title text" "title actions" "title stats"; }
    .hero-copy > .eyebrow { grid-area: eye; } .hero-copy > h1 { grid-area: title; }
    .hero-copy > p { grid-area: text; } .hero-copy > .actions { grid-area: actions; } .hero-copy > .stats { grid-area: stats; }
  }
  .hero-visual { max-width: none !important; width: 100%; }
  .arch { aspect-ratio: 16 / 9; border-radius: clamp(22px, 4vw, 44px); box-shadow: 0 40px 90px rgba(6,12,51,.45); }
  .arch-photo { object-position: 50% 50% !important; }
  .arch-photo { animation: kenburns 18s ease-in-out 2s infinite alternate; transform-origin: 50% 55%; }
  @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, -1%); } }
  .hero-visual { animation: fadeUp 1.2s 1.6s var(--ease) both, floaty 7s 3s ease-in-out infinite; }
  @keyframes floaty { 50% { translate: 0 -10px; } }
  @media (prefers-reduced-motion: reduce) { .arch-photo, .hero-visual { animation: none; } }
  .badge { left: auto; right: clamp(12px, 3vw, 40px); top: auto; bottom: clamp(-60px, -4vw, -36px); }
  .arch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(29,63,214,.35)); pointer-events: none; }
  .prog-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx) var(--fy); transform-origin: var(--fx) var(--fy); transform: scale(var(--z)); transition: transform 1.2s var(--ease); }
  .programa:hover .prog-photo { transform: scale(calc(var(--z) * 1.06)); }
  /* ---------- Retratos ilustrados ---------- */
  .portrait svg { width: 100%; height: 100%; display: block; }
  .portrait .figure { animation: breathe 6s ease-in-out infinite; transform-origin: 200px 500px; transform-box: view-box; }
  .portrait .hair-bump { animation: bump 5s ease-in-out infinite; transform-box: view-box; }
  .portrait .hoop { animation: swing 3.2s ease-in-out infinite; transform-box: view-box; }
  .portrait .locs { animation: sway 5s ease-in-out infinite; transform-box: view-box; transform-origin: 200px 170px; }
  .portrait .wrap-pat { animation: slidePat 14s linear infinite; }
  .portrait .blink { animation: blink 6s infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes breathe { 50% { transform: translateY(-5px) scale(1.008); } }
  @keyframes bump { 50% { transform: scale(1.02); } }
  @keyframes swing { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
  @keyframes sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
  @keyframes slidePat { to { transform: translateX(-48px); } }
  @keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

  /* ---------- Cinta ---------- */
  .cinta { background: var(--neon); color: var(--ink); overflow: hidden; padding-block: 1.1rem; }
  .cinta-track { display: flex; width: max-content; will-change: transform; }
  .cinta span { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; padding-inline: 1.4rem; display: flex; align-items: center; gap: 2.8rem; white-space: nowrap; }
  .cinta span:nth-child(even) { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
  .cinta span::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--azul); }
  .cinta span:nth-child(3n)::after { background: var(--naranja); }

  /* ---------- Toma cinematográfica ---------- */
  .cine { position: relative; height: 100vh; height: 100svh; background: #02030d; color: var(--blanco); padding-block: 0; }
  .cine-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
  .cine canvas.bokeh { position: absolute; inset: 0; width: 100%; height: 100%; }
  .cine-cam { position: absolute; inset: 0;
    transform-origin: var(--ox, 50%) var(--oy, 40%); transform: translate3d(var(--cx, 0), var(--cy, 0), 0) scale(var(--cs, 1)) rotate(var(--cr, 0deg));
    filter: blur(var(--cb, 0px)); will-change: transform, filter; }
  .cine-cam img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; }
  .cine-cam .grade { display: none; }
  
  .cine-light { position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(85% 85% at var(--ox, 50%) var(--oy, 40%), transparent 60%, rgba(0,0,0,.25) 100%),
      linear-gradient(180deg, transparent 65%, rgba(0,0,0,.4));
    mix-blend-mode: normal; }
  .cine-flare { position: absolute; width: 60vmax; height: 60vmax; left: calc(var(--fx, 20) * 1%); top: -20vmax; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(255,160,90,.35), rgba(255,107,26,.08) 40%, transparent 65%); mix-blend-mode: screen; }
  .grain { position: absolute; inset: -50%; pointer-events: none; opacity: .06; mix-blend-mode: overlay; animation: grain .6s steps(4) infinite;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
  @keyframes grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }
  .bar { position: absolute; left: 0; right: 0; height: calc(var(--lb, 0) * 9vh); background: #000; z-index: 3; }
  .bar.t { top: 0; } .bar.b { bottom: 0; }
  .hud { position: absolute; inset: calc(var(--lb, 0) * 9vh + 18px) clamp(16px, 4vw, 40px); z-index: 4; pointer-events: none;
    font: 600 .72rem/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; }
  .hud .tl, .hud .tr, .hud .bl, .hud .br { position: absolute; display: flex; align-items: center; gap: .6rem; }
  .hud .tl { left: 0; top: 0; } .hud .tr { right: 0; top: 0; } .hud .bl { left: 0; bottom: 0; } .hud .br { right: 0; bottom: 0; }
  .rec { width: 9px; height: 9px; border-radius: 50%; background: #ff2d4a; animation: blinkDot 1s steps(2) infinite; }
  .zoom { width: 120px; height: 3px; background: rgba(255,255,255,.2); position: relative; border-radius: 3px; overflow: hidden; }
  .zoom::after { content: ""; position: absolute; inset: 0; background: var(--neon); transform-origin: 0 50%; transform: scaleX(var(--zp, 0)); }
  .focus { position: absolute; left: var(--ox, 50%); top: var(--oy, 40%); z-index: 4; width: calc(var(--fw, 38) * 1vmin); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; opacity: var(--fo, 1); transition: border-color .3s; }
  .focus i { position: absolute; width: 22px; height: 22px; border: 2px solid var(--fc, rgba(255,255,255,.9)); }
  .focus i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
  .focus i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
  .focus i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
  .focus i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
  .focus.locked { --fc: var(--neon); }
  .beats { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none; text-align: center; padding-inline: var(--gutter); }
  .beat { grid-area: 1 / 1; opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .8s var(--ease); display: grid; gap: .8rem; justify-items: center; }
  .beat.on { opacity: 1; transform: none; }
  .beat .k { font-size: .74rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--neon); }
  .beat h2 { font-size: clamp(2.6rem, 8vw, 7rem); letter-spacing: -.045em; text-shadow: 0 10px 40px rgba(0,0,0,.5); }
  .beat h2 .serif { color: var(--naranja); }
  .beat.left { justify-items: start; text-align: left; justify-self: start; align-self: end; margin-bottom: 18vh; }
  .beat.right { justify-items: end; text-align: right; justify-self: end; align-self: end; margin-bottom: 18vh; }
  .cine-end { position: absolute; inset: 0; z-index: 6; background: #02030d; opacity: var(--fade, 0); pointer-events: none; }
  @media (max-width: 700px) {
    .hud .tr .zoom { display: none; }
    .beat.left, .beat.right { justify-self: center; justify-items: center; text-align: center; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cine { height: auto; }
    .cine-sticky { position: relative; height: 90vh; }
    .beat.b1 { opacity: 1; transform: none; }
  }

  /* ---------- Manifiesto ---------- */
  .manifiesto .wrap { display: grid; gap: 2rem; }
  .manifiesto p.big { font-family: var(--display); font-weight: 700; letter-spacing: -.035em; font-size: clamp(2rem, 4.8vw, 4.2rem); line-height: 1.06; max-width: 22ch; color: var(--ink); }
  .manifiesto p.big .gold-src, .manifiesto p.big .w.gold { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
  .js-scroll .manifiesto p.big .w { color: #d3d8ea; transition: color .3s; }
  .js-scroll .manifiesto p.big .w.lit { color: var(--ink); }
  .js-scroll .manifiesto p.big .w.lit.gold { color: var(--azul); }

  /* ---------- Programas ---------- */
  .programas-sec { background: var(--claro); padding-block: 0; }
  .programas-sticky { padding-block: clamp(4.5rem, 10vw, 7rem); }
  .programas-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
  .programas-head .txt { display: grid; gap: 1rem; }
  .programas-head h2 { max-width: 18ch; font-size: clamp(2.1rem, 4.2vw, 3.6rem); }
  .track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .programa { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--blanco); border-radius: 22px; overflow: hidden; }
  .programa-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
  .programa-img .portrait { position: absolute; inset: 0; transition: transform 1.2s var(--ease); }
  .programa:hover .programa-img .portrait { transform: scale(1.06); }
  .programa-img .label { position: absolute; z-index: 2; left: .9rem; bottom: .9rem; background: var(--blanco); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .38rem .75rem; border-radius: 999px; }
  .programa-body { padding: 1.7rem; display: grid; gap: .8rem; align-content: start; }
  .programa-body .tag { justify-self: start; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--azul); background: var(--claro); padding: .35rem .7rem; border-radius: 999px; }
  .programa-body p { color: var(--ink-soft); font-size: .96rem; }
  @media (min-width: 1000px) {
    .js-scroll .programas-sec { height: var(--hs-height, auto); }
    .js-scroll .programas-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
    .js-scroll .programas-sticky > .wrap { width: 100%; }
    .js-scroll .track { display: flex; gap: 1.8rem; width: max-content; transform: translate3d(var(--hx, 0), 0, 0); will-change: transform; }
    .js-scroll .programa { width: min(440px, 36vw); }
    .js-scroll .programa-img { aspect-ratio: 1 / 1; max-height: 46vh; }
    .js-scroll .programas-sticky { padding-top: 88px; padding-bottom: 1.5rem; }
    .js-scroll .programas-head { margin-bottom: clamp(1rem, 3vh, 2.5rem); }
    .js-scroll .programas-head h2 { font-size: clamp(1.8rem, min(4.2vw, 5.4vh), 3.6rem); }
    .js-scroll .programa-img { aspect-ratio: auto; height: min(440px, 36vw, 38vh); max-height: none; }
    .js-scroll .programa-body { padding: clamp(1rem, 2.4vh, 1.7rem) 1.7rem; gap: .6rem; }
    .hs-count { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .85rem; letter-spacing: .1em; color: var(--ink-soft); display: flex; align-items: center; gap: .8rem; }
    .hs-bar { width: 120px; height: 3px; border-radius: 3px; background: var(--linea); position: relative; overflow: hidden; }
    .hs-bar::after { content: ""; position: absolute; inset: 0; background: var(--azul); transform-origin: 0 50%; transform: scaleX(var(--hp, 0)); }
  }
  @media (max-width: 999px) { .track { grid-template-columns: 1fr; } .hs-count { display: none; } }
  @media (min-width: 600px) and (max-width: 999px) {
    .programa { grid-template-columns: 240px 1fr; grid-template-rows: none; }
    .programa-img { aspect-ratio: auto; min-height: 240px; }
  }


  /* ---------- Fundadora ---------- */
  .lider { background: var(--claro); }
  .lider .wrap { display: grid; justify-items: center; gap: clamp(1.8rem, 4vw, 2.8rem); text-align: center; }
  .lider-head { display: grid; gap: 1rem; justify-items: center; }
  .lider-head h2 .serif { color: var(--azul); }
  .bio-img { display: block; width: 100%; max-width: 860px; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px rgba(6,12,51,.18); cursor: zoom-in; }
  .bio-img img { display: block; width: 100%; height: auto; }

  /* ---------- Galería de eventos ---------- */
  .galeria { background: var(--blanco); }
  .galeria-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
  .galeria-head .txt { display: grid; gap: 1rem; }
  .galeria-head p { color: var(--ink-soft); max-width: 42ch; }
  .galeria-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(220px, 26vw, 340px)) clamp(280px, 38vw, 560px); gap: 1.2rem; }
  .g-item { position: relative; margin: 0; border-radius: 22px; overflow: hidden; background: var(--claro); cursor: zoom-in; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; }
  .g-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
  .g-item:hover img, .g-item:focus-visible img { transform: scale(1.06); }
  .g-item .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.2rem 1.1rem; color: var(--blanco); background: linear-gradient(180deg, transparent, rgba(6,12,51,.85)); display: grid; gap: .2rem; }
  .g-item .cap b { font-family: var(--display); font-size: 1.15rem; letter-spacing: -.02em; line-height: 1.15; }
  .g-item .cap span { font-size: .78rem; color: var(--on-dark); }
  .g-item .tag { position: absolute; top: 1rem; left: 1rem; z-index: 1; background: var(--neon); color: var(--ink); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .38rem .7rem; border-radius: 999px; }
  .g-premio { grid-column: 1 / 3; grid-row: 1; }
  .g-premio img { object-position: 50% 30%; }
  .g-visita { grid-column: 3; grid-row: 1 / 3; }
  .g-visita img { object-position: 50% 78%; }
  .g-jovenes { grid-column: 1 / 3; grid-row: 2; }
  .g-jovenes img { object-position: 50% 40%; }
  .g-video { grid-column: 1 / -1; grid-row: 3; }
  .g-item video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; transition: transform 1.2s var(--ease); }
  .g-item:hover video, .g-item:focus-visible video { transform: scale(1.04); }
  .g-video .play { position: absolute; right: 1.2rem; bottom: 1.1rem; z-index: 1; width: 56px; height: 56px; border-radius: 50%; background: var(--naranja); color: var(--ink); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .4s var(--ease); }
  .g-video:hover .play { transform: scale(1.1); }
  .g-video .cap { padding-right: 5.5rem; }
  .g-video .play svg { width: 20px; height: 20px; margin-left: 3px; }
  .lightbox video { max-width: 100%; max-height: 82vh; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.5); background: #000; }
  @media (max-width: 760px) {
    .galeria-grid { grid-template-columns: 1fr; grid-template-rows: none; }
    .g-premio, .g-visita, .g-jovenes, .g-video { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
    .g-video { aspect-ratio: 4 / 3; }
    .g-visita { aspect-ratio: 3 / 4; }
  }
  .lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(6,12,51,.94); display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); }
  .lightbox img { max-width: 100%; max-height: 82vh; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
  .lightbox figure { margin: 0; display: grid; gap: .8rem; justify-items: center; }
  .lightbox figcaption { color: var(--on-dark); font-size: .92rem; text-align: center; max-width: 60ch; }
  .lightbox .close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 16px); right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4); background: transparent; color: var(--blanco); font-size: 1.4rem; cursor: pointer; }
  .lightbox .close:hover { background: var(--naranja); border-color: var(--naranja); color: var(--ink); }


  /* ---------- Movimiento extra ---------- */
  .media-in { position: relative; }
  .media-in::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, var(--azul), var(--naranja)); transform-origin: 100% 50%; transition: transform 1.1s var(--ease) calc(var(--d, 0s) + .15s); pointer-events: none; }
  .media-in.in::before { transform: scaleX(0); }
  .media-in img, .media-in video { scale: 1.3; transition: scale 1.8s var(--ease) var(--d, 0s), transform 1.2s var(--ease); }
  .media-in.in img, .media-in.in video { scale: var(--base, 1); }
  [data-par] { translate: 0 var(--py, 0px); --base: 1.14; }
  .media-in [data-par] { scale: 1.3; }
  .g-item img, .g-item video, .comunidad-foto img { will-change: translate; }
  .comunidad-foto { overflow: hidden; border-radius: 22px; }
  .comunidad-foto img { scale: var(--base, 1.14); }
  .drift { translate: var(--dx, 0px) 0; will-change: translate; }
  .tilt-glow { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .4s; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.28), transparent 45%); }
  .tilting .tilt-glow { opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .media-in::before { display: none; }
    .media-in img, .media-in video, [data-par], .comunidad-foto img { scale: 1; translate: none; }
    .drift { translate: none; }
  }

  /* ---------- Casos ambientales ---------- */
  .casos { background: var(--noche); color: var(--blanco); }
  .casos-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); }
  .casos-sticky { position: sticky; top: calc(var(--head) + 2rem); align-self: start; display: grid; gap: 1.5rem; }
  .casos-sticky > p { color: var(--on-dark); font-size: 1.05rem; }
  .casos h2 .serif { color: var(--neon); }
  .rio-svg { width: 100%; height: auto; max-width: 480px; }
  .rio-svg .base { stroke: var(--dark-line); }
  .rio-svg .flow { stroke: var(--neon); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--rp, 1)); }
  .rio-svg text { font: 600 11px var(--body); letter-spacing: .12em; fill: var(--on-dark-soft); }
  .rio-svg circle { fill: var(--noche); stroke: #3a4585; stroke-width: 2; transition: fill .4s, stroke .4s; }
  .rio-svg circle.on { fill: var(--naranja); stroke: var(--naranja); }
  .paso { padding-block: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--dark-line); display: grid; gap: .8rem; transition: opacity .5s; }
  .js-scroll .paso { opacity: .3; }
  .js-scroll .paso.on { opacity: 1; }
  .paso .k { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--naranja); }
  .paso p { color: var(--on-dark); }
  .paso-final { display: grid; gap: 1.2rem; padding-top: 2rem; border-top: 1px solid var(--dark-line); }
  .informe { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: var(--dark-card); border: 1px solid var(--dark-line); text-decoration: none; transition: background .3s, border-color .3s; }
  .informe:hover { border-color: var(--neon); }
  .informe svg { flex: none; width: 38px; height: 38px; color: var(--neon); }
  .informe b { display: block; letter-spacing: .05em; }
  .informe small { color: var(--on-dark-soft); }
  @media (max-width: 860px) {
    .casos-grid { grid-template-columns: 1fr; }
    .casos-sticky { position: static; }
    .rio-svg { display: none; }
    .js-scroll .paso { opacity: 1; }
  }

  /* Fotos del Caso Zaragoza */
  .casos { padding-top: 0; }
  .caso-cover { position: relative; height: clamp(360px, 78vh, 760px); overflow: hidden; margin-bottom: clamp(3.5rem, 8vw, 6rem); }
  .caso-cover img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; transform: translate3d(0, var(--py, 0), 0) scale(var(--ps, 1.12)); will-change: transform; }
  .caso-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,12,51,.1) 30%, rgba(6,12,51,.55) 70%, var(--noche)); }
  .caso-cover .cap { position: absolute; z-index: 1; left: 0; right: 0; bottom: clamp(1.5rem, 4vw, 3rem); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; }
  .caso-cover .cap h2 { font-size: clamp(3rem, 9vw, 8rem); letter-spacing: -.05em; }
  .caso-cover .cap h2 .serif { color: var(--neon); }
  .caso-cover .cap small { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark); display: flex; align-items: center; gap: .5rem; }
  .caso-cover .cap small::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--naranja); }
  .paso-foto { margin: .6rem 0 0; display: grid; gap: .6rem; }
  .paso-foto .frame { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 70vh; }
  .paso-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(var(--ps, 1.1)); transition: transform .2s linear; }
  .paso-foto figcaption { font-size: .8rem; color: var(--on-dark-soft); }

  /* ---------- Eventos ---------- */
  .eventos .box { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 2rem; align-items: center; background: var(--naranja); border-radius: 28px; padding: clamp(2rem, 6vw, 4.5rem); }
  .eventos .box::before { content: ""; position: absolute; right: -90px; top: -90px; width: 340px; height: 340px; border-radius: 50%; border: 56px solid rgba(255,255,255,.22); transform: translateY(var(--ey, 0)); }
  .eventos .box > * { position: relative; }
  .eventos .box > div:first-child { display: grid; gap: 1.2rem; }
  .eventos .box p { color: #3b1a05; }
  .eventos .eyebrow { color: var(--ink); }
  .eventos .eyebrow::before { background: var(--ink); }
  .agenda { background: var(--blanco); border-radius: 18px; padding: 1.5rem; display: grid; gap: .9rem; box-shadow: 0 20px 50px rgba(59,26,5,.2); }
  .agenda .label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--azul); display: flex; align-items: center; gap: .5rem; }
  .agenda .label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 0 3px rgba(61,255,122,.3); animation: blinkDot 1.6s ease-in-out infinite; }
  @keyframes blinkDot { 50% { opacity: .3; } }
  .agenda .empty { font-weight: 600; }
  .agenda p { font-size: .9rem; color: var(--ink-soft) !important; }
  @media (max-width: 820px) { .eventos .box { grid-template-columns: 1fr; } }

  /* ---------- Comunidad ---------- */
  .global { background: var(--azul); color: var(--blanco); overflow: hidden; }
  .gigante { font-family: var(--display); font-weight: 800; letter-spacing: -.05em; font-size: clamp(5rem, 18vw, 16rem); line-height: .9; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(61,255,122,.6); transform: translate3d(var(--gx, 0), 0, 0); will-change: transform; user-select: none; }
  .global .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; margin-top: clamp(2rem, 5vw, 3.5rem); }
  .global h2 { max-width: 16ch; }
  .global h2 .serif { color: var(--neon); }
  .comunidad-foto { grid-column: 1 / -1; margin: clamp(1rem, 3vw, 2rem) 0 0; position: relative; box-shadow: 0 30px 80px rgba(6,12,51,.35); }
  .comunidad-foto img { width: 100%; height: auto; display: block; }
  .comunidad-foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 3rem 1.4rem 1.1rem; font-size: .9rem; font-weight: 600; color: var(--blanco); background: linear-gradient(180deg, transparent, rgba(6,12,51,.8)); }
  @media (max-width: 760px) { .global .wrap { grid-template-columns: 1fr; } }

  /* ---------- Contacto ---------- */
  .contacto-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); }
  .contacto .info { display: grid; gap: 1.5rem; align-content: start; }
  .contacto .info p { color: var(--ink-soft); }
  .contacto h2 .serif { color: var(--azul); }
  .redes { display: flex; gap: .7rem; }
  .redes a { width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid var(--linea); display: grid; place-items: center; transition: background .3s, border-color .3s, color .3s, transform .3s var(--ease); }
  .redes a:hover { background: var(--azul); border-color: var(--azul); color: var(--blanco); transform: translateY(-3px); }
  .redes svg { width: 20px; height: 20px; }
  form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.4rem; }
  .field { position: relative; }
  .field.full { grid-column: 1 / -1; }
  .field input, .field textarea { width: 100%; font: 400 1.05rem var(--body); color: var(--ink); background: transparent; border: 0; border-bottom: 1.5px solid var(--linea); padding: 1.6rem 0 .7rem; border-radius: 0; }
  .field textarea { min-height: 140px; resize: vertical; }
  .field label { position: absolute; left: 0; top: 1.5rem; font-size: 1rem; color: var(--ink-soft); pointer-events: none; transform-origin: 0 0; transition: transform .35s var(--ease), color .3s; }
  .field input:focus, .field textarea:focus { outline: none; }
  .field input:focus + label, .field input:not(:placeholder-shown) + label,
  .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-1.35rem) scale(.78); color: var(--azul); font-weight: 600; }
  .field .line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--naranja); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); }
  .field textarea ~ .line { bottom: 6px; }
  .field input:focus ~ .line, .field textarea:focus ~ .line { transform: scaleX(1); }
  .form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
  .form-msg { font-size: .9rem; color: var(--azul); font-weight: 600; }
  @media (max-width: 860px) { .contacto-grid { grid-template-columns: 1fr; } }
  @media (max-width: 520px) { form { grid-template-columns: 1fr; } }

  /* ---------- Pie ---------- */
  footer { background: var(--noche); color: var(--on-dark); font-size: .88rem; overflow: hidden; }
  footer .wrap { display: grid; gap: 2.5rem; padding-block: 4rem 2rem; }
  .foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem; }
  footer .logo { color: var(--blanco); }
  footer nav { display: flex; flex-wrap: wrap; gap: 1.6rem; }
  footer nav a { text-decoration: none; transition: color .3s; }
  footer nav a:hover { color: var(--neon); }
  .foot-word { font-family: var(--display); font-weight: 800; letter-spacing: -.05em; font-size: clamp(4rem, 16.5vw, 15rem); line-height: .85; color: var(--azul); white-space: nowrap; text-align: center; }
  .foot-a { width: .92em; height: .92em; display: block; margin-right: -.06em; }
  .foot-lens { width: .74em; height: .74em; display: block; }
  .foot-word span { display: inline-block; vertical-align: -.02em; transition: transform .6s var(--ease), color .4s; }
  .foot-word:hover span { transform: translateY(-8%); color: var(--neon); }
  .foot-word:hover span:nth-child(even) { transform: translateY(8%); color: var(--naranja); }
  .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--dark-line); padding-top: 1.4rem; font-size: .78rem; color: var(--on-dark-soft); }

  /* ---------- Aparición al hacer scroll ---------- */
  .will-reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
  .will-reveal.in { opacity: 1; transform: none; }
  .mask-reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease); }
  .mask-reveal.in { clip-path: inset(0 0 0 0); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
    .intro, .spark { display: none; }
    .will-reveal, .mask-reveal { opacity: 1; transform: none; clip-path: none; }
    .hero canvas { display: none; }
  }

/* WordPress: que el tema (Poppins) no cambie las letras del diseño */
.afx-landing { font-family: var(--body) !important; }
.afx-landing p, .afx-landing li, .afx-landing a, .afx-landing button, .afx-landing input, .afx-landing textarea { font-family: inherit !important; }
.afx-landing h1, .afx-landing h2, .afx-landing h3 { font-family: var(--display) !important; }
.afx-landing .serif { font-family: var(--serif) !important; }