@layer reset, tokens, base, layout, components, utilities, motion;

/* ---------- font ---------- */
@font-face {
  font-family: "Instrument Sans";
  src: url("../../fonts/InstrumentSans-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../../fonts/PlayfairDisplay-Variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans";
  src: url("../../fonts/GoogleSans-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-height: 100svh; line-height: 1.5; -webkit-font-smoothing: antialiased; }
  img, svg, video { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
}

/* ---------- tokens (dark-first: el sitio es oscuro por diseño, sin theme toggle) ---------- */
@layer tokens {
  :root {
    /* primitivos de marca */
    --green-500:#97ca3d; --blue-500:#45aadf; --gray-500:#6f6e6f;

    /* superficies azul nocturno */
    --bg:#080c18;
    --bg-elevated:#0e1424;
    --bg-raised:#141b30;
    --fg:#f2f4fa; --fg-muted:#97a0b8; --fg-subtle:#5d6680;
    --border:color-mix(in oklab, #aebbe0 14%, transparent);
    --border-strong:color-mix(in oklab, #aebbe0 24%, transparent);
    --nav-bg:color-mix(in oklab, var(--bg) 70%, transparent);
    --accent:var(--green-500);
    --accent-fg:#080c18; /* reserved: text on a future accent-filled surface */

    /* radius / sombras / foco / z */
    --radius-sm:8px; --radius-md:12px; --radius-lg:24px; --radius-full:9999px;
    --shadow-screen:0 24px 64px rgb(0 0 0/.55), 0 4px 16px rgb(0 0 0/.4);

    /* receta "glass" compartida (la misma de la nav): superficie translúcida + luz interior */
    --surface-glass:color-mix(in oklab, var(--bg-elevated) 72%, transparent);
    --inset-light:inset 0 1px 0 color-mix(in oklab, #fff 5%, transparent);
    --focus-ring:0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring-color, var(--accent));
    /* la nav (48) queda POR ENCIMA de .crt-warp-layer (45): el header no se deforma;
       el canvas CRT (50) sigue pintando scanlines/marco encima de todo */
    --z-sticky:20; --z-header:48; --z-overlay:49;

    /* layout */
    --container:72rem; --container-wide:90rem;
    --gutter:clamp(1.25rem, .5rem + 3vw, 3rem);
    --measure:60ch; --header-h:4rem;

    /* spacing: pasos fijos en componentes, fluido en ritmo de sección */
    --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
    --space-6:1.5rem; --space-8:2rem; --space-12:3rem; --space-16:4rem;
    --space-section-y:clamp(5rem, 3rem + 8vw, 10rem);
    --gap-grid:clamp(1rem, .75rem + 1.5vw, 1.75rem);

    /* type */
    --font-system:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --font-sans:"Instrument Sans", var(--font-system);
    --font-display-family:"Google Sans", var(--font-system); /* titulares */
    --font-mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --font-label:.6875rem;            /* etiquetas técnicas mono: tamaño fijo, no fluido */
    --font-eyebrow:clamp(.75rem,.72rem + .12vw,.8125rem);
    --font-caption:clamp(.8125rem,.79rem + .12vw,.875rem);
    --font-sm:clamp(.875rem,.85rem + .12vw,.9375rem);
    --font-body:clamp(1rem,.95rem + .25vw,1.1875rem);
    --font-lead:clamp(1.125rem,1rem + .6vw,1.5rem);
    --font-h4:clamp(1.25rem,1.15rem + .5vw,1.5rem);
    --font-h3:clamp(1.5rem,1.3rem + 1vw,2rem);
    --font-h2:clamp(2.5rem,1.9rem + 3vw,4.25rem);
    --font-display:clamp(3rem,2rem + 6vw,7rem);

    /* motion */
    --ease-out:cubic-bezier(.16,1,.3,1);
    --dur-fast:150ms; --dur-reveal:500ms;
    --reveal-y:20px; --stagger:75ms;
  }
}

/* ---------- base ---------- */
@layer base {
  body {
    font-family:var(--font-sans);
    font-size:var(--font-body);
    line-height:1.6;
    background:var(--bg);
    color:var(--fg);
  }
  h1,h2,h3,h4 { font-family:var(--font-display-family); line-height:1.1; font-weight:480; text-wrap:balance; }
  h1 { font-size:var(--font-display); font-weight:460; letter-spacing:-.025em; line-height:1.0; }
  h2 { font-size:var(--font-h2); font-weight:450; letter-spacing:-.02em; }
  h1 .serif, h2 .serif { font-size:1.06em; letter-spacing:-.015em; } /* la serif rinde óptimamente algo mayor que la sans */
  h3 { font-size:var(--font-h3); }
  h4 { font-size:var(--font-h4); }
  p  { max-width:var(--measure); text-wrap:pretty; }
  html { scroll-behavior:smooth; }  /* fallback sin Lenis */
  html.lenis, html.lenis body { height:auto; }
  .lenis.lenis-smooth { scroll-behavior:auto !important; }
  @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
  ::selection { background:color-mix(in oklab, var(--blue-500) 35%, transparent); }
}

@layer layout {
  .container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
  .container--wide { max-width:var(--container-wide); }
  .section { padding-block:var(--space-section-y); }
  section { color:var(--fg); } /* el fondo lo da .ambient */
  .flow > * + * { margin-block-start:var(--flow-space, 1em); }

  /* capa ambiental fija: gradientes de marca muy difusos detrás de todo.
     Base de respaldo del fondo dither (.dither, z-index:-2): si no hay JS/WebGL
     o con reduced-motion, esta capa queda visible por sí sola. */
  .ambient {
    position:fixed; inset:-12% 0; z-index:-3; pointer-events:none;
    background:
      radial-gradient(55rem 40rem at 12% -10%, color-mix(in oklab, var(--blue-500) 10%, transparent), transparent 65%),
      radial-gradient(45rem 36rem at 88% 12%, color-mix(in oklab, var(--green-500) 7%, transparent), transparent 65%),
      radial-gradient(60rem 50rem at 50% 110%, color-mix(in oklab, #3550c8 12%, transparent), transparent 70%),
      var(--bg);
    will-change:transform;
  }
  /* grano fílmico estático encima del ambiente: rompe el banding de los gradientes */
  .ambient::after {
    content:""; position:absolute; inset:0; opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  /* raíles verticales hairline al ancho del contenedor: estructura "engineered" */
  body::before {
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    max-width:var(--container); margin-inline:auto;
    border-inline:1px solid color-mix(in oklab, #aebbe0 7%, transparent);
  }
  @media (max-width:64rem) { body::before { display:none; } }
}

@layer utilities {
  .visually-hidden {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  /* eyebrow como chip cápsula: mismo lenguaje que la barra de navegación */
  .eyebrow {
    display:inline-flex; align-items:center; gap:.7em;
    padding:.6em 1.1em;
    font-family:var(--font-mono); font-size:var(--font-label);
    font-weight:500; letter-spacing:.18em;
    text-transform:uppercase; color:var(--fg-muted);
    border:1px solid var(--border); border-radius:var(--radius-full);
    background:color-mix(in oklab, var(--bg-elevated) 55%, transparent);
    box-shadow:var(--inset-light);
  }
  .eyebrow::before {
    content:""; width:6px; height:6px; flex-shrink:0;
    background:linear-gradient(135deg, var(--green-500), var(--blue-500));
    border-radius:1.5px; transform:rotate(45deg);
  }
  /* variante "live": punto verde con halo pulsante (badge de disponibilidad) */
  .eyebrow--live::before {
    border-radius:var(--radius-full); transform:none;
    background:var(--green-500);
    animation:halo 2.4s var(--ease-out) infinite;
  }
  @keyframes halo {
    from { box-shadow:0 0 0 0 color-mix(in oklab, var(--green-500) 45%, transparent); }
    to   { box-shadow:0 0 0 10px transparent; }
  }
  @media (prefers-reduced-motion:reduce) { .eyebrow--live::before { animation:none; } }

  /* cabecera estructural de sección: chip + regla hairline + índice mono */
  .section-head { display:flex; align-items:center; gap:var(--space-6); }
  .section-head::after { content:""; order:1; flex:1; height:1px; background:var(--border); }
  .section-head__idx {
    order:2; font-family:var(--font-mono); font-size:var(--font-label);
    letter-spacing:.1em; color:var(--fg-subtle); white-space:nowrap;
  }
  .section-head__idx::before { content:"+"; margin-inline-end:1em; color:color-mix(in oklab, #aebbe0 30%, transparent); }
  .section-head + h2 { margin-block-start:var(--space-6); }
  .serif {
    font-family: "Playfair Display", Georgia, serif;
    font-style: normal;
    font-weight: 450; /* ligera, acompasada con los titulares light */
    letter-spacing: -.01em;
  }
  /* fondos WebGL de fondo (los inyecta su JS): detrás de todo, sobre .ambient (-3),
     no capturan interacción. Si no se montan, queda .ambient de respaldo.
     .metaballs = vigente; .dither = aparcado (su JS ya no se carga). */
  .metaballs,
  .dither {
    position:fixed; inset:0; z-index:-2;
    width:100%; height:100%;
    pointer-events:none;
  }
  /* overlay CRT (aparcado: crt.js ya no se carga): por encima de todo, sin capturar interacción.
     Alfa directa (sin blend mode): el shader oscurece sutilmente y pinta el marco curvo. */
  .crt {
    position:fixed; inset:0; z-index:50;
    width:100%; height:100%;
    pointer-events:none;
  }
  /* capa de deformación (backdrop-filter de barril, ver crt.js): warpa lo pintado detrás
     en el compositor; transparente y sin capturar interacción */
  .crt-warp-layer {
    position:fixed; inset:0; z-index:45;
    pointer-events:none;
  }
  .skip-link {
    position:absolute; left:var(--space-4); top:-3rem; z-index:var(--z-overlay);
    background:var(--bg-elevated); color:var(--fg); padding:var(--space-2) var(--space-4);
    border-radius:var(--radius-sm); transition:top var(--dur-fast) var(--ease-out);
  }
  .skip-link:focus { top:var(--space-4); }
}

@layer components {
  /* nav: píldora flotante contenida — hairline, blur siempre, más opaca tras el hero (data-solid) */
  .nav {
    position:fixed; inset-block-start:0; inset-inline:0; z-index:var(--z-header);
    padding-inline:var(--gutter); padding-block-start:.75rem;
    pointer-events:none; /* sólo la barra interior captura clics */
  }
  .nav__bar {
    pointer-events:auto;
    max-width:var(--container); margin-inline:auto;
    height:3.25rem;
    display:flex; align-items:center; gap:var(--space-6);
    padding-inline:1.1rem .45rem;
    border:1px solid var(--border); border-radius:var(--radius-full);
    background:color-mix(in oklab, var(--bg) 55%, transparent);
    backdrop-filter:saturate(160%) blur(18px);
    -webkit-backdrop-filter:saturate(160%) blur(18px);
    box-shadow:inset 0 1px 0 color-mix(in oklab, #fff 5%, transparent);
    transition:background var(--dur-fast) var(--ease-out),
               border-color var(--dur-fast) var(--ease-out),
               box-shadow var(--dur-fast) var(--ease-out);
  }
  .nav[data-solid="true"] .nav__bar {
    background:color-mix(in oklab, var(--bg-elevated) 86%, transparent);
    border-color:var(--border-strong);
    box-shadow:inset 0 1px 0 color-mix(in oklab, #fff 6%, transparent),
               0 12px 32px -12px rgb(0 0 0/.6);
  }
  .nav__logo { height:1.35rem; width:auto; }
  .nav__links {
    display:flex; gap:var(--space-6); margin-inline:auto;
    font-family:var(--font-mono); font-size:var(--font-label);
    font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  }
  .nav__link { color:var(--fg-muted); padding-block:.5em; transition:color var(--dur-fast) var(--ease-out); }
  .nav__link:hover { color:var(--fg); }
  .nav__actions { display:flex; align-items:center; gap:var(--space-3); margin-inline-start:auto; }
  .nav__links + .nav__actions { margin-inline-start:0; }
  .nav__cta {
    font-family:var(--font-mono); font-size:var(--font-label);
    font-weight:560; letter-spacing:.1em; text-transform:uppercase;
    padding:.7em 1.3em; border-radius:var(--radius-full);
    background:var(--fg); color:var(--bg);
    transition:opacity var(--dur-fast) var(--ease-out);
  }
  .nav__cta:hover { opacity:.85; }
  .lang-switch {
    display:inline-flex; align-items:center; padding:2px;
    font-family:var(--font-mono); font-size:var(--font-label); letter-spacing:.06em;
    border:1px solid var(--border); border-radius:var(--radius-full);
  }
  .lang-switch a {
    padding:.45em .75em; border-radius:var(--radius-full);
    color:var(--fg-subtle); line-height:1;
    transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  }
  .lang-switch a:hover { color:var(--fg); }
  .lang-switch a[aria-current="page"] {
    color:var(--fg); background:color-mix(in oklab, #aebbe0 12%, transparent);
  }
  .footer .lang-switch { border-color:transparent; } /* en el footer, sin caja */
  @media (max-width:48rem) {
    .nav__links { display:none; } /* anchors secondary on mobile; brand rail is primary */
    .nav__bar { gap:var(--space-3); }
  }
}

@layer components {
  .grad {
    background:linear-gradient(90deg, var(--green-500), var(--blue-500));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .lead { font-size:var(--font-lead); color:var(--fg-muted); line-height:1.4; }

  /* hero centrado editorial */
  .hero { position:relative; overflow:hidden; padding-block:8.5rem 0; }
  .hero::before { /* retícula de puntos técnica, desvanecida radialmente tras el titular */
    content:""; position:absolute; inset:0 0 35%; z-index:-1; pointer-events:none;
    background-image:radial-gradient(color-mix(in oklab, #aebbe0 16%, transparent) 1px, transparent 1px);
    background-size:26px 26px;
    -webkit-mask-image:radial-gradient(58rem 30rem at 50% 14%, #000, transparent 72%);
    mask-image:radial-gradient(58rem 30rem at 50% 14%, #000, transparent 72%);
  }
  .hero__copy { display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-6); }
  .hero__title { max-width:18ch; text-wrap:balance; }
  .hero__sub { max-width:52ch; }
  .hero__ctas { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-4); }

  /* aurora ambiental: dos haces difusos de marca cruzándose tras el titular, deriva lenta */
  .hero__aurora {
    position:relative; height:clamp(8rem, 6rem + 10vw, 15rem);
    margin-block-start:calc(-1 * var(--space-8));
    pointer-events:none;
  }
  .hero__aurora::before, .hero__aurora::after {
    content:""; position:absolute; inset:-60% 10%;
    filter:blur(36px);
  }
  .hero__aurora::before {
    background:
      radial-gradient(42rem 12rem at 38% 55%, color-mix(in oklab, var(--blue-500) 22%, transparent), transparent 70%),
      radial-gradient(30rem 9rem at 70% 40%, color-mix(in oklab, #3550c8 24%, transparent), transparent 70%);
    rotate:-4deg;
    animation:aurora 16s ease-in-out infinite alternate;
  }
  .hero__aurora::after {
    background:radial-gradient(34rem 8rem at 55% 52%, color-mix(in oklab, var(--green-500) 13%, transparent), transparent 72%);
    rotate:3deg;
    animation:aurora 12s ease-in-out -6s infinite alternate-reverse;
  }
  @keyframes aurora {
    from { translate:-3% 0; opacity:.85; }
    to   { translate:3% 6%; opacity:1; }
  }
  @media (prefers-reduced-motion:reduce) {
    .hero__aurora::before, .hero__aurora::after { animation:none; }
  }

  /* marquee de dominios: bucle CSS, pausa en hover, estático con reduced-motion */
  .marquee {
    margin-block-start:0; padding-block:var(--space-6); /* el aire lo da .hero__aurora */
    border-block:1px solid var(--border); overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .marquee__track { display:flex; width:max-content; animation:marquee 32s linear infinite; }
  .marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state:paused; }
  .marquee__row { display:flex; list-style:none; padding:0; margin:0; }
  .marquee__row li { padding-inline:clamp(2.5rem, 2rem + 2.5vw, 4.5rem); white-space:nowrap; }
  .marquee__row a { display:inline-flex; align-items:center; }
  .marquee__logo { /* logo en blanco atenuado: presencia sutil, despierta al hover */
    height:1.75rem; width:auto;
    filter:brightness(0) invert(1); opacity:.42;
    transition:opacity var(--dur-fast) var(--ease-out);
  }
  .marquee__row a:hover .marquee__logo { opacity:.85; }
  .marquee__row a:hover { color:var(--fg); }
  @keyframes marquee { to { transform:translateX(-50%); } }
  @media (prefers-reduced-motion:reduce) {
    .marquee__track { animation:none; width:auto; flex-wrap:wrap; justify-content:center; }
    .marquee__row[aria-hidden] { display:none; }
    .marquee__row { flex-wrap:wrap; justify-content:center; row-gap:var(--space-2); }
  }

  .btn-ghost {
    display:inline-flex; align-items:center; gap:.6em;
    font-family:var(--font-mono); font-size:.75rem;
    font-weight:520; letter-spacing:.1em; text-transform:uppercase;
    padding:.95em 1.6em; border:1px solid var(--border-strong);
    border-radius:var(--radius-full);
    background:color-mix(in oklab, var(--bg-elevated) 55%, transparent);
    transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  }
  .btn-ghost:hover { border-color:var(--fg-subtle); background:var(--bg-raised); }

  /* marco de navegador / móvil para capturas */
  .shot {
    border:1px solid var(--border-strong); border-radius:var(--radius-md);
    overflow:hidden; background:var(--bg-raised); box-shadow:var(--shadow-screen);
    margin:0;
  }
  .shot__bar {
    display:flex; align-items:center; gap:var(--space-2);
    padding:.45rem .7rem; border-block-end:1px solid var(--border);
    background:color-mix(in oklab, #aebbe0 6%, var(--bg-raised));
    box-shadow:var(--inset-light);
  }
  .shot__dots { display:inline-flex; gap:.3rem; }
  .shot__dots i { width:.5rem; height:.5rem; border-radius:var(--radius-full); background:color-mix(in oklab, #fff 16%, transparent); }
  .shot__domain { margin-inline:auto; font-family:var(--font-mono); font-size:var(--font-label); letter-spacing:.04em; color:var(--fg-subtle); line-height:1; }
  .shot img { width:100%; height:auto; }
  .shot--phone { border-radius:1.4rem; }
  .shot__notch { width:5rem; height:.35rem; border-radius:var(--radius-full); background:color-mix(in oklab, #fff 16%, transparent); margin:.55rem auto; }
}

@layer components {
  /* bento flush: 2 featured (2 por fila) + compactas a 3 por fila, sin gap — hairlines compartidos */
  .bento { list-style:none; padding:0; margin-block-start:var(--space-8); display:grid; gap:0; grid-template-columns:1fr; }
  @media (min-width:48rem) { .bento { grid-template-columns:repeat(2, 1fr); } }
  @media (min-width:64rem) {
    .bento { grid-template-columns:repeat(6, 1fr); }
    .cell { grid-column:span 2; }
  }
  .cell--featured { grid-column:span 1; }
  @media (min-width:48rem) { .cell--featured { grid-column:span 2; } }
  @media (min-width:64rem) { .cell--featured { grid-column:span 3; } }

  .cell {
    --pad:var(--space-6);
    position:relative; display:flex; flex-direction:column;
    padding:var(--pad); background:var(--surface-glass);
    backdrop-filter:saturate(140%) blur(14px);
    -webkit-backdrop-filter:saturate(140%) blur(14px);
    border:1px solid var(--border); border-radius:0; overflow:hidden;
    margin-block-start:-1px; margin-inline-start:-1px; /* colapsa hairlines vecinos en 1 sola línea */
    box-shadow:var(--inset-light);
    transition:border-color var(--dur-fast) var(--ease-out);
  }
  .cell::before {
    content:""; position:absolute; inset:-30% -10% 40%; pointer-events:none;
    background:radial-gradient(ellipse at 50% 0%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%);
    opacity:0; transition:opacity var(--dur-fast) var(--ease-out);
  }
  .cell:hover, .cell:focus-within {
    z-index:1; /* el anillo de acento pasa por encima de los hairlines compartidos */
    border-color:color-mix(in oklab, var(--accent) 45%, transparent);
  }
  .cell:focus-within { outline:2px solid color-mix(in oklab, var(--accent) 70%, white); outline-offset:-2px; }
  .cell:hover::before, .cell:focus-within::before { opacity:1; }
  .cell--featured::before { opacity:.3; } /* glow tenue siempre presente */
  .cell--featured:hover::before, .cell--featured:focus-within::before { opacity:1; }
  .cell--featured { --pad:var(--space-8); }

  /* cabecera de celda = "barra" mono con divisor hairline a sangre, como la nav */
  .cell__head {
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
    margin-inline:calc(-1 * var(--pad));
    padding:0 var(--pad) var(--space-4);
    border-block-end:1px solid var(--border);
  }
  .cell__num { font-family:var(--font-mono); font-size:var(--font-label); color:var(--fg-subtle); }
  .cell__num::after { content:" /"; color:color-mix(in oklab, var(--accent) 55%, transparent); }
  .cell__domain {
    margin-inline-start:auto; padding:.45em .85em;
    font-family:var(--font-mono); font-size:var(--font-label); letter-spacing:.03em;
    color:var(--fg-subtle); line-height:1;
    background:color-mix(in oklab, #aebbe0 7%, transparent);
    border:1px solid var(--border); border-radius:var(--radius-full);
    box-shadow:var(--inset-light);
    white-space:nowrap;
  }
  .cell__name { display:block; margin-block-start:var(--space-6); font-family:var(--font-display-family); font-size:clamp(1.0625rem, 1rem + .3vw, 1.1875rem); font-weight:480; letter-spacing:-.01em; line-height:1.2; text-wrap:balance; }
  .cell--featured .cell__name { font-size:var(--font-h4); font-weight:470; letter-spacing:-.015em; }
  .cell__one { margin-block-start:var(--space-3); margin-block-end:var(--space-6); color:var(--fg-muted); font-size:var(--font-sm); line-height:1.65; max-width:46ch; text-wrap:pretty; }
  /* captura a sangre: panel visual de borde a borde entre el contenido y la barra CTA */
  .cell__shot { margin-block-start:auto; margin-inline:calc(-1 * var(--pad)); }
  .cell .shot {
    box-shadow:none; border:0; border-block-start:1px solid var(--border); border-radius:0;
  }
  /* mock fotográfico: mismo panel a sangre pero sin chrome, sólo el hairline superior */
  .cell__mock { position:relative; margin-block-end:0; border-block-start:1px solid var(--border); overflow:hidden; }
  .cell__mock picture img { width:100%; height:auto; transition:transform 600ms var(--ease-out); }
  .cell:hover .cell__mock picture img, .cell:focus-within .cell__mock picture img { transform:scale(1.03); }
  /* scrim lateral permanente: oscurece la izquierda — separa fotos vecinas en la rejilla flush
     y da asiento al logo; no desaparece al hover (sólo la firma se desvanece) */
  .cell__mock::after {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(105deg, rgb(4 6 14/.72), rgb(4 6 14/.26) 30%, transparent 58%);
  }
  .cell__watermark {
    position:absolute; z-index:1;
    inset-block-end:var(--space-4); inset-inline-start:var(--space-4);
    height:1.75rem; width:auto; max-width:55%;
    filter:brightness(0) invert(1); opacity:.92;
    transition:opacity 600ms var(--ease-out);
  }
  .cell--featured .cell__watermark { height:2.1rem; }
  .cell:hover .cell__watermark, .cell:focus-within .cell__watermark { opacity:0; }
  @media (prefers-reduced-motion:reduce) {
    .cell__mock img { transition:none; }
    .cell:hover .cell__mock img, .cell:focus-within .cell__mock img { transform:none; }
  }
  .cell .shot img { transition:transform 600ms var(--ease-out); }
  .cell:hover .shot img, .cell:focus-within .shot img { transform:scale(1.03); }
  .cell__cta .arrow { display:inline-block; transition:transform var(--dur-fast) var(--ease-out); }
  .cell:hover .cell__cta .arrow, .cell:focus-within .cell__cta .arrow { transform:translate(2px, -2px); }
  .cell__plate {
    display:grid; place-items:center; min-height:8rem; margin-block-start:auto;
    font-size:clamp(4rem, 3rem + 4vw, 7rem); font-weight:700; line-height:.8;
    color:color-mix(in oklab, var(--accent) 22%, transparent);
    letter-spacing:-.04em; font-variant-numeric:tabular-nums;
  }
  /* CTA como barra inferior a sangre: espejo de la cabecera (anatomía barra/contenido/barra) */
  .cell__cta {
    margin-block-start:0; /* el empuje lo hace .cell__shot / .cell__plate con margin auto */
    margin-inline:calc(-1 * var(--pad)); margin-block-end:calc(-1 * var(--pad));
    padding:var(--space-4) var(--pad);
    border-block-start:1px solid var(--border);
    display:flex; align-items:center;
    font-family:var(--font-mono); font-size:var(--font-label);
    font-weight:540; letter-spacing:.1em; text-transform:uppercase;
    color:color-mix(in oklab, var(--accent) 75%, white);
    transition:background var(--dur-fast) var(--ease-out);
  }
  .cell__cta .arrow { margin-inline-start:auto; }
  .cell:hover .cell__cta, .cell:focus-within .cell__cta { background:color-mix(in oklab, #aebbe0 5%, transparent); }
  .cell__cta::after { content:""; position:absolute; inset:0; } /* celda entera clicable */
  .cell__cta:focus-visible { outline:none; box-shadow:none; } /* el foco lo pinta .cell:focus-within */
  @media (prefers-reduced-motion:reduce) {
    .cell .shot img { transition:none; }
    .cell:hover .shot img, .cell:focus-within .shot img { transform:none; }
  }
}

@layer components {
  /* intro editorial: titular a la izquierda, lead + valores a la derecha, alineados abajo */
  .about__intro { display:grid; gap:var(--space-8); grid-template-columns:1fr; margin-block-start:var(--space-6); }
  @media (min-width:64rem) {
    .about__intro { grid-template-columns:7fr 5fr; gap:clamp(3rem, 2rem + 4vw, 6rem); align-items:end; }
  }
  .about__intro h2 { max-width:15ch; }
  .about__aside .values { margin-block-start:var(--space-6); }

  /* galería: tres fotos en cascada escalonada; duotono suave que revela color */
  .about__gallery { display:grid; gap:var(--gap-grid); grid-template-columns:1fr; margin-block-start:var(--space-12); }
  @media (min-width:48rem) {
    .about__gallery { grid-template-columns:5fr 4fr 3fr; align-items:start; }
    .about__photo--offset { margin-block-start:var(--space-8); }
    .about__photo--detail { margin-block-start:var(--space-16); }
    .about__photo--detail img { aspect-ratio:3/4; object-fit:cover; }
  }
  .about__photo {
    position:relative; margin:0; border-radius:var(--radius-lg); overflow:hidden;
    border:1px solid var(--border); box-shadow:var(--inset-light);
  }
  .about__photo .media-tag { /* anotación técnica sobre la foto, estilo pill de dominio */
    position:absolute; z-index:1; inset-block-start:var(--space-4); inset-inline-start:var(--space-4);
    padding:.45em .85em;
    font-family:var(--font-mono); font-size:var(--font-label); letter-spacing:.06em;
    color:var(--fg-muted); line-height:1;
    background:color-mix(in oklab, var(--bg) 65%, transparent);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid var(--border); border-radius:var(--radius-full);
    box-shadow:var(--inset-light);
  }
  .about__photo img {
    width:100%; height:auto; display:block;
    filter:grayscale(.7) contrast(1.02) brightness(.95);
    transition:filter 700ms var(--ease-out), transform 700ms var(--ease-out);
  }
  .about__photo::before {
    content:""; position:absolute; inset:0; background:rgb(8 12 24/.14);
    transition:opacity 700ms var(--ease-out);
  }
  .about__photo::after {
    content:""; position:absolute; inset:0;
    background:linear-gradient(160deg, color-mix(in oklab, var(--blue-500) 20%, transparent), color-mix(in oklab, var(--green-500) 12%, transparent) 60%, transparent);
    mix-blend-mode:overlay;
    transition:opacity 700ms var(--ease-out);
  }
  .about__photo:hover img { filter:none; transform:scale(1.02); }
  .about__photo:hover::before, .about__photo:hover::after { opacity:0; }
  @media (prefers-reduced-motion:reduce) {
    .about__photo img { transition:none; }
    .about__photo:hover img { transform:none; }
  }

  /* banda de métricas enmarcada: hairline en los 4 lados + divisores internos, pieza glass */
  .metrics {
    margin-block-start:var(--space-16); display:grid; grid-template-columns:1fr;
    border:1px solid var(--border); border-radius:0; overflow:hidden;
    background:color-mix(in oklab, var(--bg-elevated) 55%, transparent);
    box-shadow:var(--inset-light);
  }
  .metric { padding:var(--space-8) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
  @media (max-width:40rem) {
    .metric + .metric { border-block-start:1px solid var(--border); }
  }
  @media (min-width:40rem) and (max-width:64rem) {
    .metrics { grid-template-columns:1fr 1fr; }
    .metric:nth-child(even) { border-inline-start:1px solid var(--border); }
    .metric:nth-child(n+3) { border-block-start:1px solid var(--border); }
  }
  @media (min-width:64rem) {
    .metrics { grid-template-columns:repeat(4, 1fr); }
    .metric + .metric { border-inline-start:1px solid var(--border); }
  }
  .metric__num {
    display:block; font-family:var(--font-mono);
    font-size:clamp(2rem, 1.6rem + 2vw, 3.25rem);
    font-weight:480; letter-spacing:-.05em; line-height:1;
    font-variant-numeric:tabular-nums;
  }
  .metric__label {
    display:block; margin-block-start:var(--space-3);
    color:var(--fg-subtle); font-family:var(--font-mono); font-size:var(--font-label);
    font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  }
  .values { list-style:none; padding:0; display:flex; flex-direction:column; gap:var(--space-3); }
  /* valores como cápsulas glass: mismo lenguaje que la barra de navegación */
  .value { display:flex; align-items:center; gap:var(--space-3); font-size:var(--font-sm);
           padding:var(--space-2) var(--space-4) var(--space-2) var(--space-2);
           border:1px solid var(--border); border-radius:var(--radius-full);
           background:var(--surface-glass); box-shadow:var(--inset-light); }
  .value__icon {
    display:inline-grid; place-items:center; flex-shrink:0;
    width:2.25rem; height:2.25rem; border-radius:var(--radius-full);
    background:color-mix(in oklab, var(--blue-500) 16%, transparent); color:var(--blue-500);
    border:1px solid color-mix(in oklab, var(--blue-500) 25%, transparent);
  }
  .value__icon svg { width:1.25rem; height:1.25rem; }
}

@layer components {
  /* cierre: panel glass contenido (la nav a escala de sección) con glow ascendente dentro */
  .contact { text-align:center; }
  .contact .section-head { margin-block-end:var(--space-8); }
  .contact__panel {
    position:relative; overflow:hidden;
    padding:clamp(3rem, 2rem + 4vw, 5.5rem) var(--gutter);
    border:1px solid var(--border); border-radius:0; /* caja a hueso, como la rejilla flush */
    background:var(--surface-glass);
    backdrop-filter:saturate(140%) blur(14px);
    -webkit-backdrop-filter:saturate(140%) blur(14px);
    box-shadow:var(--inset-light);
  }
  .contact__panel::before {
    content:""; position:absolute; inset-inline:-10%; inset-block-end:-14rem; height:24rem;
    pointer-events:none;
    background:radial-gradient(ellipse at 50% 100%, color-mix(in oklab, var(--blue-500) 16%, transparent), transparent 70%);
  }
  .contact__panel::after { /* cruces "+" de registro en las 4 esquinas */
    content:""; position:absolute; inset:0; pointer-events:none;
    --cross:color-mix(in oklab, #aebbe0 32%, transparent);
    background-image:
      linear-gradient(var(--cross), var(--cross)), linear-gradient(var(--cross), var(--cross)),
      linear-gradient(var(--cross), var(--cross)), linear-gradient(var(--cross), var(--cross)),
      linear-gradient(var(--cross), var(--cross)), linear-gradient(var(--cross), var(--cross)),
      linear-gradient(var(--cross), var(--cross)), linear-gradient(var(--cross), var(--cross));
    background-repeat:no-repeat;
    background-size:11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px;
    background-position:
      left 13px top 18px,    left 18px top 13px,
      right 13px top 18px,   right 18px top 13px,
      left 13px bottom 18px, left 18px bottom 13px,
      right 13px bottom 18px, right 18px bottom 13px;
  }
  .contact__panel > * { position:relative; z-index:1; }
  /* título contenido y neutro: el protagonista del cierre es el email en gradiente */
  .contact__title {
    margin-block-end:var(--space-6); margin-inline:auto;
    font-size:var(--font-h3); font-weight:440; font-stretch:100%;
    letter-spacing:-.015em; color:var(--fg-muted);
  }
  /* fila meta: disponibilidad en vivo + compromisos, en mono */
  .contact__meta {
    list-style:none; padding:0;
    margin-block-start:var(--space-8); margin-inline:auto;
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
    gap:var(--space-2) var(--space-6);
    font-family:var(--font-mono); font-size:var(--font-label);
    letter-spacing:.1em; text-transform:uppercase; color:var(--fg-subtle);
  }
  .contact__meta li { display:inline-flex; align-items:center; gap:.7em; }
  .contact__meta-live::before {
    content:""; width:6px; height:6px; flex-shrink:0; border-radius:var(--radius-full);
    background:var(--green-500);
    animation:halo 2.4s var(--ease-out) infinite;
  }
  @media (prefers-reduced-motion:reduce) { .contact__meta-live::before { animation:none; } }
  .contact__email { font-family:var(--font-display-family); font-size:var(--font-h2); font-weight:460; letter-spacing:-.02em; display:inline-block; }
  .footer { border-block-start:1px solid var(--border); padding-block:var(--space-16) var(--space-8); overflow:hidden; }
  /* wordmark gigante desvanecido: cierre memorable, eco de marcas tipo dev-tool premium */
  .footer__wordmark {
    margin-block-start:var(--space-12);
    margin-block-end:calc(-1 * var(--space-8)); /* sangra hasta el borde inferior, el mask lo desvanece */
    font-family:var(--font-display-family);
    font-size:clamp(3.5rem, 12.5vw, 12rem);
    font-weight:460; letter-spacing:-.025em; line-height:.75;
    text-align:center; white-space:nowrap;
    user-select:none; pointer-events:none;
    color:color-mix(in oklab, #aebbe0 11%, transparent);
    -webkit-mask-image:linear-gradient(180deg, #000 15%, transparent 92%);
    mask-image:linear-gradient(180deg, #000 15%, transparent 92%);
  }
  .footer__grid { display:grid; gap:var(--space-12) var(--gap-grid); grid-template-columns:1fr; }
  @media (min-width:48rem) { .footer__grid { grid-template-columns:1fr 1fr; } }
  @media (min-width:64rem) { .footer__grid { grid-template-columns:2fr 1fr 1fr 1.5fr; } }
  .footer__brand { display:flex; flex-direction:column; gap:var(--space-4); align-items:flex-start; }
  .footer__tagline { color:var(--fg-muted); font-size:var(--font-sm); line-height:1.65; max-width:34ch; }
  .footer__head {
    font-family:var(--font-mono); font-size:var(--font-label);
    font-weight:500; letter-spacing:.16em;
    text-transform:uppercase; color:var(--fg-subtle); margin-block-end:var(--space-4);
  }
  .footer__col ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:var(--space-3); }
  .footer__col a { color:var(--fg-muted); font-size:var(--font-sm); }
  .footer__col a:hover { color:var(--fg); }
  .footer__touch { display:flex; flex-direction:column; align-items:flex-start; }
  .footer__legal {
    margin-block-start:var(--space-12); padding-block-start:var(--space-6);
    border-block-start:1px solid var(--border);
    display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:space-between; align-items:center;
    color:var(--fg-subtle); font-family:var(--font-mono); font-size:var(--font-label); letter-spacing:.02em;
  }
}

/* ---------- redesign: shared dark components ---------- */
@layer components {
  /* botón primario sólido sobre oscuro (CTA del hero) */
  .btn-solid {
    display:inline-flex; align-items:center; gap:.6em;
    font-family:var(--font-mono); font-size:.75rem;
    font-weight:560; letter-spacing:.1em; text-transform:uppercase;
    padding:.95em 1.8em;
    background:linear-gradient(180deg, #fff, #dde3f0);
    color:var(--bg);
    border-radius:var(--radius-full);
    box-shadow:inset 0 1px 0 #fff, 0 8px 24px -10px rgb(255 255 255/.25);
    transition:transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
  }
  .btn-solid:hover { filter:brightness(.94); transform:translateY(-1px); }
}

@layer motion {
  .reveal { opacity:1; transform:none; filter:none; }            /* visible without JS */
  .js .reveal {
    opacity:0; transform:translateY(24px) scale(.98); filter:blur(4px);
    transition:opacity 650ms var(--ease-out), transform 650ms var(--ease-out), filter 650ms var(--ease-out);
    transition-delay:var(--reveal-delay, 0ms);
    will-change:opacity, transform, filter;
  }
  .js .reveal[data-revealed] { opacity:1; transform:none; filter:none; }
  @media (prefers-reduced-motion:reduce) {
    .js .reveal { opacity:1; transform:none; filter:none; transition:none; will-change:auto; }
  }
}