@layer tokens, base, layout, components, sections, utilities;

/* ==========================================================================
   TOKENS
   ========================================================================== */
@layer tokens {
  :root {
    /* Marca — paleta tomada del banner publicitario (MagicBrain.webm) */
    --black: #04070f;
    --ink: #0a0b10;
    --ink-soft: #141821;
    --gold: #f2b739;
    --gold-mid: #dda847;
    --gold-deep: #8a6600;
    --gold-soft: #fbdd7e;
    --cream: #f9f1e6;
    --sand: #e8ddc9;
    --line: #e6dccb;
    --line-dark: #232833;
    --white: #ffffff;
    --wa: #25d366;

    /* Texto */
    --text: #0a0b10;
    --text-muted: #5a5750;
    --text-soft: #6f6b62;
    --text-on-dark: #f9f1e6;
    --text-on-dark-muted: #b9b2a4;

    /* Superficies */
    --surface: #ffffff;
    --surface-alt: var(--cream);

    /* Tipografía */
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Montserrat", "Inter", system-ui, -apple-system, sans-serif;
    --fs-eyebrow: 0.6875rem;
    --fs-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
    --fs-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
    --fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
    --fs-h4: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    --fs-h3: clamp(1.25rem, 1.12rem + 0.6vw, 1.625rem);
    --fs-h2: clamp(1.875rem, 1.4rem + 2.1vw, 3.25rem);
    --fs-h1: clamp(2.375rem, 1.5rem + 3.6vw, 4.25rem);

    /* Espaciado */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);

    /* Formas */
    --radius-sm: 4px;
    --radius: 10px;
    --radius-lg: 18px;
    --radius-pill: 999px;
    --border: 1px solid var(--line);

    /* Sombras */
    --shadow: 0 12px 32px -12px rgb(0 0 0 / 0.18);
    --shadow-lg: 0 40px 80px -32px rgb(0 0 0 / 0.55);
    --shadow-gold: 0 24px 60px -24px rgb(242 183 57 / 0.45);

    /* Layout */
    --container: 1240px;
    --container-narrow: 920px;
    --gutter: clamp(1.25rem, 0.8rem + 2.2vw, 3rem);
    --nav-h: 72px;

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Capas */
    --z-bg: 0;
    --z-content: 1;
    --z-nav: 100;
    --z-overlay: 200;
    --z-modal: 300;
  }

  /* Bloques con tema oscuro: redefinen los mismos tokens */
  [data-theme="dark"] {
    --text: var(--text-on-dark);
    --text-muted: var(--text-on-dark-muted);
    --text-soft: #948d80;
    --surface: var(--black);
    --surface-alt: var(--ink);
    --line: var(--line-dark);
    --border: 1px solid var(--line-dark);
    --gold-deep: var(--gold);
    color-scheme: dark;
    /* Sin esto el bloque hereda el color del contenedor claro y el texto queda ilegible. */
    color: var(--text);
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 1rem);
  }

  body {
    margin: 0;
    background: var(--cream);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  body.is-locked {
    overflow: hidden;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--fs-h1);
  }
  h2 {
    font-size: var(--fs-h2);
  }
  h3 {
    font-size: var(--fs-h3);
  }
  h4 {
    font-size: var(--fs-h4);
    letter-spacing: -0.02em;
  }

  p {
    margin: 0;
    text-wrap: pretty;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  img,
  video,
  svg,
  iframe {
    display: block;
    max-width: 100%;
  }

  button {
    font: inherit;
    color: inherit;
    border: 0;
    background: none;
    cursor: pointer;
  }

  :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  ::selection {
    background: var(--gold);
    color: var(--ink);
  }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .container--narrow {
    max-width: var(--container-narrow);
  }

  .section {
    position: relative;
    padding-block: var(--section-y);
    background: var(--surface);
    color: var(--text);
  }

  .section--alt {
    background: var(--surface-alt);
  }

  .section--tight {
    padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  }

  .section--statement {
    padding-block: clamp(3.5rem, 2rem + 4vw, 6rem);
  }

  #que-hacemos {
    overflow-x: hidden;
  }

  /* --- Video de fondo por bloque --- */
  .section--fx {
    isolation: isolate;
  }

  .section--fx > .container {
    position: relative;
    z-index: var(--z-content);
  }

  .section__fx {
    position: absolute;
    inset: 0;
    z-index: var(--z-bg);
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 25%, transparent 100%);
    mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 25%, transparent 100%);
  }

  .section__fx video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Arranca en la opacidad final para que el poster se vea sin esperar al video. */
    opacity: var(--fx-opacity, 0.3);
  }

  .section--fx-dark {
    --fx-opacity: 0.32;
  }

  /* En bloques claros el video va invertido: multiply deja el fondo limpio y solo marca las líneas. */
  .section--fx-light {
    --fx-opacity: 0.16;
  }

  .section--fx-light .section__fx video {
    mix-blend-mode: multiply;
  }

  /* En el hero el fondo va de borde a borde: solo se desvanece arriba y abajo. */
  .hero .section__fx {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 84%, transparent 100%);
  }

  /* Velo sobre el video del hero: mantiene legible la columna de texto. */
  .hero .section__fx::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgb(4 7 15 / 0.94) 0%, rgb(4 7 15 / 0.76) 36%, rgb(4 7 15 / 0.36) 66%, rgb(4 7 15 / 0.16) 100%);
  }

  /* Con una sola columna el texto ocupa todo el ancho, así que el velo pasa a ser vertical. */
  @media (max-width: 979px) {
    .hero .section__fx::after {
      background: linear-gradient(180deg, rgb(4 7 15 / 0.92) 0%, rgb(4 7 15 / 0.74) 42%, rgb(4 7 15 / 0.6) 100%);
    }
  }

  /* Curva dorada del banner: el color de destino sube en el centro con un filo de oro. */
  .wave {
    position: relative;
    height: clamp(3rem, 1.75rem + 4.5vw, 7rem);
    overflow: hidden;
    background: var(--wave-from);
  }

  .wave::after {
    content: "";
    position: absolute;
    left: -4%;
    right: -4%;
    top: 0;
    bottom: -1px;
    background: var(--wave-to);
    border-top: 3px solid var(--gold);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  }

  .wave--to-dark {
    --wave-from: var(--cream);
    --wave-to: var(--black);
  }

  .wave--to-light {
    --wave-from: var(--black);
    --wave-to: var(--cream);
  }

  .wave--to-white {
    --wave-from: var(--black);
    --wave-to: var(--white);
  }

  /* Se combina con --to-dark cuando la seccion de arriba es blanca en vez de crema. */
  .wave--from-white {
    --wave-from: var(--white);
  }

  /* Divisor de onda irregular. El arco de .wave sale de un border-radius y por eso
     siempre es simétrico; esta forma necesita un path. */
  .divider {
    display: block;
    height: clamp(3.25rem, 1.75rem + 4.5vw, 7.5rem);
    background: var(--wave-from);
    line-height: 0;
  }

  .divider svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .divider__fill {
    fill: var(--wave-to);
  }

  .divider__edge {
    fill: none;
    stroke: var(--gold);
    stroke-width: 3;
    /* El SVG se estira en horizontal; sin esto el filo dorado se deformaría. */
    vector-effect: non-scaling-stroke;
  }

  .divider--white-to-cream {
    --wave-from: var(--white);
    --wave-to: var(--cream);
  }

  .skip-link {
    position: absolute;
    top: -100px;
    left: var(--gutter);
    z-index: var(--z-modal);
    padding: 0.75rem 1.25rem;
    background: var(--gold);
    color: var(--ink);
    font-weight: 700;
    border-radius: var(--radius);
    transition: top 0.2s;
  }

  .skip-link:focus {
    top: 1rem;
  }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {
  /* --- Etiquetas y encabezados --- */
  .eyebrow {
    display: block;
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-eyebrow);
    font-weight: 800;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--gold-deep);
  }

  .section-head {
    max-width: 62ch;
    margin-bottom: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  }

  .section-head p {
    margin-top: var(--sp-4);
    font-size: var(--fs-lead);
    color: var(--text-muted);
  }

  .section--statement .section-head {
    margin-bottom: 0;
  }

  .section-head--split {
    display: grid;
    gap: var(--sp-5);
    max-width: none;
    align-items: end;
  }

  @media (min-width: 900px) {
    .section-head--split {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
      gap: var(--sp-8);
    }
    .section-head--split p {
      margin-top: 0;
      padding-bottom: 0.35rem;
    }
  }

  .rule {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
  }

  .rule b {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .rule::after {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--gold);
  }

  .gold {
    color: var(--gold);
  }

  .badge {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    background: var(--gold);
    color: var(--ink);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* --- Botones --- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    max-width: 100%;
    padding: 0.9rem 1.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: center;
    border: 1px solid transparent;
    transition: transform 0.2s var(--ease), background-color 0.2s, border-color 0.2s, color 0.2s;
  }

  .btn:hover {
    transform: translateY(-2px);
  }

  .btn svg {
    width: 1.1em;
    height: 1.1em;
    flex: none;
  }

  .btn--primary {
    background: var(--gold);
    color: var(--ink);
  }

  .btn--primary:hover {
    background: var(--gold-soft);
  }

  .btn--dark {
    background: var(--ink);
    color: var(--white);
  }

  .btn--dark:hover {
    background: #000;
  }

  .btn--ghost {
    border-color: currentColor;
    color: var(--text);
  }

  .btn--ghost:hover {
    background: var(--text);
    color: var(--surface);
  }

  .btn--wa {
    background: var(--wa);
    color: #04301a;
  }

  .btn--wa:hover {
    background: #34e57a;
  }

  .btn--lg {
    padding: 1.1rem 2rem;
    font-size: 1rem;
  }

  .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
  }

  .btn-row--stack {
    flex-direction: column;
    align-items: stretch;
  }

  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--gold-deep);
    border-bottom: 2px solid var(--gold);
    padding-bottom: 2px;
    transition: gap 0.2s var(--ease);
  }

  .link-arrow:hover {
    gap: 0.8rem;
  }

  .link-arrow svg {
    width: 0.9em;
    height: 0.9em;
  }

  /* --- Navegación --- */
  .nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--z-nav);
    height: var(--nav-h);
    display: flex;
    align-items: center;
    background: rgb(11 11 11 / 0);
    border-bottom: 1px solid transparent;
    transition: background-color 0.3s, backdrop-filter 0.3s, border-color 0.3s;
  }

  .nav.is-stuck {
    background: rgb(11 11 11 / 0.88);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: var(--line-dark);
  }

  .nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
  }

  .brand__mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: var(--cream);
    flex: none;
  }

  .brand__mark img {
    width: 24px;
    height: auto;
  }

  .brand__name {
    line-height: 1;
  }

  .brand__name strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--white);
  }

  .brand__name span {
    display: block;
    margin-top: 3px;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: var(--gold);
  }

  .nav__menu {
    display: none;
    align-items: center;
    gap: var(--sp-5);
  }

  .nav__link {
    position: relative;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(255 255 255 / 0.75);
    transition: color 0.2s;
  }

  .nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: width 0.25s var(--ease);
  }

  .nav__link:hover,
  .nav__link[aria-current="page"] {
    color: var(--white);
  }

  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after {
    width: 100%;
  }

  /* --- Control del jingle en el header --- */
  .jingle-ctl {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  /* El <audio> del jingle vive suelto al final del body. No se usa display:none
     porque algunos WebView de Android no reproducen medios ocultos asi: se lo
     saca del flujo y se lo deja en 1px, sin nada que pintar y sin capa propia
     dentro del header fijo. */
  #jingleAudio {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .jingle-ctl__label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.5);
  }

  /* Solo hay lugar para el rotulo cuando el menu de escritorio ya esta visible. */
  @media (max-width: 979px) {
    .jingle-ctl__label {
      display: none;
    }
  }

  .jingle-ctl__btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid rgb(255 255 255 / 0.2);
    color: var(--white);
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
  }

  .jingle-ctl__btn:hover {
    border-color: var(--gold);
    color: var(--gold);
  }

  .jingle-ctl__btn svg {
    width: 14px;
    height: 14px;
  }

  /* Mientras suena, el boton de play/pausa queda encendido. */
  .jingle-ctl.is-playing .jingle-ctl__btn--main {
    border-color: var(--gold);
    background: rgb(242 183 57 / 0.16);
    color: var(--gold);
  }

  /* Sin nada cargado todavia, detener no hace nada: se apaga. */
  .jingle-ctl__btn[disabled] {
    opacity: 0.4;
    pointer-events: none;
  }

  /* En pantallas chicas el header queda justo: marca + 2 botones + hamburguesa. */
  @media (max-width: 560px) {
    .nav__inner {
      gap: var(--sp-3);
    }

    .jingle-ctl__btn {
      width: 30px;
      height: 30px;
    }
  }

  .nav__toggle {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    border: 1px solid rgb(255 255 255 / 0.2);
    color: var(--white);
  }

  .nav__toggle svg {
    width: 20px;
    height: 20px;
  }

  @media (min-width: 980px) {
    .nav__menu {
      display: flex;
    }
    .nav__toggle {
      display: none;
    }
  }

  /* --- Menú móvil --- */
  .drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--nav-h) var(--gutter) var(--sp-7);
    background: var(--black);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.4s var(--ease), visibility 0s linear 0.4s;
  }

  .drawer.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.4s var(--ease), visibility 0s linear 0s;
  }

  .drawer__link {
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--line-dark);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--white);
  }

  .drawer__link:hover {
    color: var(--gold);
  }

  .drawer .btn {
    margin-top: var(--sp-6);
    align-self: flex-start;
  }

  .drawer__close {
    position: absolute;
    top: 15px;
    right: var(--gutter);
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    border: 1px solid rgb(255 255 255 / 0.2);
    color: var(--white);
  }

  .drawer__close svg {
    width: 20px;
    height: 20px;
  }

  /* --- Tarjetas --- */
  .card {
    position: relative;
    padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
    background: var(--surface);
    border: var(--border);
    overflow: hidden;
    transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
  }

  .card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--gold);
    transform: scaleY(0.3);
    transform-origin: top;
    transition: transform 0.4s var(--ease);
  }

  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
  }

  .card:hover::before {
    transform: scaleY(1);
  }

  .card__tag {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--gold-deep);
  }

  .card h3,
  .card h4 {
    margin-bottom: var(--sp-3);
  }

  .card p {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.55;
  }

  .card--dark {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--text-on-dark);
  }

  .card--dark p {
    color: #d0d0ca;
  }

  .card--dark .card__tag {
    color: var(--gold);
  }

  .card--link:hover {
    border-color: var(--gold);
  }

  .card__foot {
    display: block;
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: var(--border);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-soft);
  }

  /* --- Grillas --- */
  .grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  }

  .grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  }

  /* --- Atlas editorial de capacidades --- */
  .capability-atlas {
    --atlas-progress: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    border-top: var(--border);
    list-style: none;
  }

  .js .capability-atlas {
    --atlas-progress: 0%;
  }

  .capability {
    display: grid;
    grid-template-areas:
      "index"
      "media"
      "body";
    gap: var(--sp-4);
    padding-block: clamp(2rem, 1.35rem + 2.4vw, 4rem);
    border-bottom: var(--border);
    align-items: center;
  }

  .capability__index {
    position: relative;
    grid-area: index;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
  }

  .capability__index b {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 1.8rem + 2vw, 3.75rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.85;
    color: var(--gold-deep);
  }

  .capability__index span {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-align: right;
    text-transform: uppercase;
    color: var(--text-soft);
  }

  .capability__media {
    position: relative;
    grid-area: media;
    min-width: 0;
    margin: 0;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--ink);
  }

  .capability__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 45%, rgb(4 7 15 / 0.46));
    pointer-events: none;
  }

  .capability__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.78) contrast(1.04);
    transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
  }

  .capability:hover .capability__media img {
    transform: scale(1.03);
    filter: saturate(0.98) contrast(1.06);
  }

  .capability__body {
    grid-area: body;
    min-width: 0;
  }

  .capability__body h3 {
    margin-bottom: var(--sp-4);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  }

  .capability__body p {
    max-width: 46ch;
    color: var(--text-muted);
    line-height: 1.65;
  }

  .capability__examples {
    position: relative;
    display: block;
    margin-top: var(--sp-5);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-deep);
  }

  .capability__motif {
    position: absolute;
    right: var(--sp-4);
    bottom: var(--sp-4);
    z-index: 1;
    width: 104px;
    height: 52px;
    border: 1px solid rgb(242 183 57 / 0.72);
    background-color: rgb(4 7 15 / 0.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  .capability__motif::before,
  .capability__motif::after {
    content: "";
    position: absolute;
  }

  .capability__motif--conversation::before {
    inset: 12px 44px 16px 12px;
    border: 2px solid var(--gold);
    border-radius: 50%;
  }

  .capability__motif--conversation::after {
    right: 13px;
    bottom: 10px;
    width: 38px;
    height: 22px;
    border: 2px solid var(--gold);
    border-radius: 50%;
  }

  .capability__motif--interface {
    background-image:
      linear-gradient(var(--gold), var(--gold)),
      repeating-linear-gradient(90deg, rgb(242 183 57 / 0.55) 0 1px, transparent 1px 20px),
      repeating-linear-gradient(rgb(242 183 57 / 0.42) 0 1px, transparent 1px 14px);
    background-position: 10px 9px, 10px 22px, 10px 22px;
    background-size: 42px 3px, 84px 22px, 84px 22px;
    background-repeat: no-repeat;
  }

  .capability__motif--flow::before {
    left: 13px;
    right: 13px;
    top: 25px;
    height: 2px;
    background: var(--gold);
  }

  .capability__motif--flow::after {
    top: 19px;
    left: 12px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 33px 0 0 var(--gold), 66px 0 0 var(--gold);
  }

  .capability__motif--data::before {
    inset: 10px;
    background: linear-gradient(153deg, transparent 0 34%, var(--gold) 35% 38%, transparent 39% 52%, var(--gold) 53% 56%, transparent 57% 69%, var(--gold) 70% 73%, transparent 74%);
  }

  .capability__motif--data::after {
    left: 10px;
    right: 10px;
    bottom: 9px;
    height: 1px;
    background: rgb(242 183 57 / 0.45);
  }

  .capability__motif--network::before {
    top: 10px;
    left: 11px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 35px 22px 0 var(--gold), 70px 4px 0 var(--gold);
  }

  .capability__motif--network::after {
    inset: 13px 18px;
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
    transform: skewY(-16deg);
  }

  .capability__motif--waveform::before {
    inset: 10px;
    background: repeating-linear-gradient(90deg, var(--gold) 0 3px, transparent 3px 9px);
    clip-path: polygon(0 45%, 6% 45%, 6% 30%, 12% 30%, 12% 60%, 18% 60%, 18% 10%, 24% 10%, 24% 76%, 30% 76%, 30% 35%, 36% 35%, 36% 56%, 42% 56%, 42% 20%, 48% 20%, 48% 72%, 54% 72%, 54% 43%, 60% 43%, 60% 28%, 66% 28%, 66% 61%, 72% 61%, 72% 16%, 78% 16%, 78% 70%, 84% 70%, 84% 38%, 90% 38%, 90% 53%, 100% 53%, 100% 58%, 0 58%);
  }

  @media (min-width: 760px) {
    .capability-atlas::before,
    .capability-atlas::after {
      content: "";
      position: absolute;
      top: 2rem;
      left: 5.75rem;
      z-index: 2;
      width: 1px;
      pointer-events: none;
    }

    .capability-atlas::before {
      bottom: 2rem;
      background: var(--line);
    }

    .capability-atlas::after {
      height: var(--atlas-progress);
      max-height: calc(100% - 4rem);
      background: var(--gold);
      transition: height 0.14s linear;
    }

    .capability {
      grid-template-columns: minmax(95px, 0.7fr) minmax(0, 1.45fr) minmax(0, 1.15fr);
      grid-template-areas: "index media body";
      gap: clamp(1.5rem, 0.5rem + 2.6vw, 4.5rem);
    }

    .capability:nth-child(even) {
      grid-template-columns: minmax(95px, 0.7fr) minmax(0, 1.15fr) minmax(0, 1.45fr);
      grid-template-areas: "index body media";
    }

    .capability__index {
      align-self: stretch;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      padding-block: var(--sp-2);
    }

    .capability__index span {
      text-align: left;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
    }

    .capability__index::after {
      content: "";
      position: absolute;
      top: 0.75rem;
      left: calc(5.75rem - 3px);
      z-index: 3;
      width: 7px;
      height: 7px;
      border: 2px solid var(--white);
      border-radius: 50%;
      background: var(--line);
      box-shadow: 0 0 0 1px var(--line);
      transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
    }

    .capability.is-in .capability__index::after {
      background: var(--gold);
      box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgb(242 183 57 / 0.42);
    }
  }

  /* Cada capítulo se ensambla al entrar en el viewport; sin .js queda visible. */
  .js .capability__index,
  .js .capability__body {
    opacity: 0;
    transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
  }

  .js .capability__index {
    transform: translateX(-22px);
  }

  .js .capability__body {
    transform: translateX(28px);
    transition-delay: 0.16s;
  }

  .js .capability:nth-child(even) .capability__body {
    transform: translateX(-28px);
  }

  .js .capability__media {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.85s var(--ease);
    transition-delay: 0.06s;
  }

  .js .capability:nth-child(even) .capability__media {
    clip-path: inset(0 0 0 100%);
  }

  .js .capability__media img {
    transform: scale(1.06);
  }

  .js .capability__motif {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateY(8px);
    transition: opacity 0.35s var(--ease), clip-path 0.55s var(--ease), transform 0.45s var(--ease);
    transition-delay: 0.36s;
  }

  .js .capability__examples {
    border-color: transparent;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
    transition-delay: 0.3s;
  }

  .js .capability__examples::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--line);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.7s var(--ease);
    transition-delay: 0.28s;
  }

  .js .capability.is-in .capability__index,
  .js .capability.is-in .capability__body,
  .js .capability.is-in .capability__examples {
    opacity: 1;
    transform: none;
  }

  .js .capability.is-in .capability__media,
  .js .capability:nth-child(even).is-in .capability__media,
  .js .capability.is-in .capability__motif {
    clip-path: inset(0);
  }

  .js .capability.is-in .capability__media img {
    transform: scale(1);
  }

  .js .capability.is-in .capability__motif {
    opacity: 1;
    transform: none;
  }

  .js .capability.is-in .capability__examples::before {
    transform: scaleX(1);
  }

  .capability-principle {
    display: grid;
    gap: var(--sp-5);
    margin-top: clamp(3rem, 2rem + 4vw, 6rem);
    padding: clamp(2rem, 1.4rem + 3vw, 4.5rem);
    background: var(--ink);
    color: var(--text-on-dark);
  }

  .capability-principle .eyebrow {
    margin: 0;
    color: var(--gold);
  }

  .capability-principle h3 {
    font-size: clamp(1.75rem, 1.25rem + 1.7vw, 3rem);
  }

  .capability-principle p {
    max-width: 70ch;
    color: var(--text-on-dark-muted);
    line-height: 1.65;
  }

  @media (min-width: 850px) {
    .capability-principle {
      grid-template-columns: minmax(100px, 0.45fr) minmax(0, 1.35fr) minmax(0, 1fr);
      align-items: center;
    }
  }

  .outcome-rail {
    display: grid;
    margin-top: var(--sp-6);
    border-top: var(--border);
    border-bottom: var(--border);
  }

  .outcome-rail > div {
    padding: var(--sp-5) var(--sp-3);
    text-align: center;
    border-bottom: var(--border);
  }

  .outcome-rail > div:last-child {
    border-bottom: 0;
  }

  .outcome-rail b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 1.05rem + 1.1vw, 2rem);
    letter-spacing: -0.03em;
    line-height: 1;
  }

  .outcome-rail span {
    display: block;
    margin-top: var(--sp-2);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
  }

  @media (min-width: 700px) {
    .outcome-rail {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .outcome-rail > div {
      border-right: var(--border);
      border-bottom: 0;
    }

    .outcome-rail > div:last-child {
      border-right: 0;
    }
  }

  /* --- Marquee de clientes --- */
  .marquee {
    position: relative;
    overflow: hidden;
    padding-block: var(--sp-5);
    -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;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    animation: marquee 42s linear infinite;
  }

  .marquee:hover .marquee__track {
    animation-play-state: paused;
  }

  .marquee__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgb(255 255 255 / 0.58);
    white-space: nowrap;
    transition: color 0.25s;
  }

  .marquee__item:hover {
    color: var(--white);
  }

  .marquee__item::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--gold);
    flex: none;
  }

  @keyframes marquee {
    to {
      transform: translateX(-50%);
    }
  }

  /* --- Mockup de teléfono --- */
  .phone {
    position: relative;
    width: min(300px, 100%);
    aspect-ratio: 9 / 16;
    padding: 10px;
    border-radius: 38px;
    background: linear-gradient(150deg, #2f2f2f, #0a0a0a 55%);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgb(255 255 255 / 0.08) inset;
  }

  .phone::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 78px;
    height: 20px;
    border-radius: var(--radius-pill);
    background: #0a0a0a;
    z-index: 2;
  }

  .phone video,
  .phone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 28px;
    background: var(--ink);
  }

  /* --- Botón de sonido --- */
  .sound-btn {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-pill);
    background: rgb(11 11 11 / 0.75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgb(255 255 255 / 0.2);
    color: var(--white);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  }

  .sound-btn:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
  }

  .sound-btn svg {
    width: 15px;
    height: 15px;
  }

  /* --- Indicadores del rotador del hero --- */
  .phone__nav {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: var(--sp-4);
  }

  .phone__dot {
    width: 58px;
    padding: 0.6rem 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .phone__bar {
    display: block;
    height: 3px;
    background: rgb(255 255 255 / 0.22);
    overflow: hidden;
  }

  .phone__fill {
    display: block;
    width: 0;
    height: 100%;
    background: var(--gold);
  }

  .phone__dot[aria-current="true"] .phone__bar {
    background: rgb(255 255 255 / 0.34);
  }

  .phone__dot:hover .phone__bar {
    background: rgb(255 255 255 / 0.45);
  }

  .phone__dot:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }

  /* --- Tarjeta de video (facade) --- */
  .video-card {
    position: relative;
    display: block;
    border: var(--border);
    background: var(--surface);
    overflow: hidden;
    transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
  }

  .video-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--gold);
  }

  .video-card__thumb {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    aspect-ratio: 16 / 9;
    background: var(--ink-soft);
  }

  .video-card--vertical .video-card__thumb {
    aspect-ratio: 4 / 5;
  }

  /* Piezas de campaña: verticales, con controles nativos. */
  .reels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-4);
  }

  .video-card__player {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    background: var(--ink);
    object-fit: cover;
  }

  .video-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.88;
    transition: opacity 0.3s, transform 0.5s var(--ease);
  }

  .video-card:hover .video-card__thumb img {
    opacity: 1;
    transform: scale(1.04);
  }

  .video-card__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
  }

  .video-card__play span {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--ink);
    box-shadow: var(--shadow-gold);
    transition: transform 0.3s var(--ease);
  }

  .video-card:hover .video-card__play span {
    transform: scale(1.1);
  }

  .video-card__play svg {
    width: 22px;
    height: 22px;
    margin-left: 3px;
  }

  .video-card__body {
    padding: var(--sp-4);
  }

  .video-card__body strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
  }

  .video-card__body span {
    display: block;
    margin-top: var(--sp-2);
    font-size: 0.75rem;
    color: var(--text-soft);
  }

  .video-card iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
  }

  /* --- Acordeón --- */
  .faq {
    border-top: var(--border);
  }

  .faq details {
    border-bottom: var(--border);
  }

  .faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-5) 0;
    font-size: var(--fs-h4);
    font-weight: 700;
    letter-spacing: -0.02em;
    cursor: pointer;
    list-style: none;
  }

  .faq summary::-webkit-details-marker {
    display: none;
  }

  .faq summary::after {
    content: "";
    flex: none;
    width: 11px;
    height: 11px;
    border-right: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: rotate(45deg) translate(-3px, -3px);
    transition: transform 0.3s var(--ease);
  }

  .faq details[open] summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  .faq details > p {
    padding-bottom: var(--sp-5);
    max-width: 75ch;
    color: var(--text-muted);
  }

  /* --- Modal --- */
  .modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: var(--gutter);
    background: rgb(0 0 0 / 0.9);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0s linear 0.3s;
  }

  .modal.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s, visibility 0s linear 0s;
  }

  .modal__body {
    position: relative;
    width: min(330px, 100%);
  }

  .modal__body video {
    width: 100%;
    max-height: 78vh;
    border-radius: var(--radius-lg);
    background: #000;
  }

  .modal__close {
    position: absolute;
    top: -52px;
    right: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.14);
    color: var(--white);
  }

  .modal__close svg {
    width: 18px;
    height: 18px;
  }

  /* --- Pie --- */
  .footer {
    padding-block: var(--sp-8) var(--sp-6);
    background: var(--black);
    color: var(--text-on-dark);
    border-top: 3px solid var(--gold);
  }

  .footer__grid {
    display: grid;
    gap: var(--sp-7);
    padding-bottom: var(--sp-7);
  }

  @media (min-width: 800px) {
    .footer__grid {
      grid-template-columns: 1.6fr 1fr 1fr;
      gap: var(--sp-8);
    }
  }

  .footer h5 {
    margin-bottom: var(--sp-4);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
  }

  .footer p {
    font-size: var(--fs-sm);
    color: var(--text-on-dark-muted);
    max-width: 42ch;
  }

  .footer__about p {
    margin-top: var(--sp-4);
  }

  .footer__note {
    font-style: italic;
  }

  .footer ul {
    display: grid;
    gap: var(--sp-3);
  }

  .footer li a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-sm);
    color: var(--text-on-dark-muted);
    transition: color 0.2s;
  }

  .footer li a:hover {
    color: var(--gold);
  }

  .footer li a svg {
    width: 15px;
    height: 15px;
    flex: none;
  }

  .footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--line-dark);
    font-size: 0.75rem;
    color: #85857f;
  }

  /* --- Burbuja de WhatsApp --- */
  /* El chat de Brian se monta en shadow DOM, anclado a bottom:20px right:20px con un
     botón de 56px, y desde acá no hay forma de moverlo. Así que el que se corre es este:
     sube 88px (76 del botón + aire) y quedan los dos apilados en la esquina. */
  .wa-fab {
    position: fixed;
    right: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
    bottom: 88px;
    z-index: var(--z-nav);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.8rem 1.1rem;
    border-radius: var(--radius-pill);
    background: var(--wa);
    color: #04301a;
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 16px 36px -14px rgb(37 211 102 / 0.7);
    transform: translateY(140%);
    opacity: 0;
    transition: transform 0.4s var(--ease), opacity 0.3s;
  }

  .wa-fab.is-visible {
    transform: translateY(0);
    opacity: 1;
  }

  .wa-fab svg {
    width: 20px;
    height: 20px;
    flex: none;
  }

  .wa-fab span {
    display: none;
  }

  @media (min-width: 600px) {
    .wa-fab span {
      display: inline;
    }
  }
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
@layer sections {
  /* --- Hero --- */
  .hero {
    position: relative;
    --fx-opacity: 0.55;
    padding-block: calc(var(--nav-h) + clamp(1.25rem, 0.5rem + 2.4vw, 2.75rem)) clamp(3rem, 2rem + 4vw, 5.5rem);
    background: var(--black);
    color: var(--text-on-dark);
    overflow: hidden;
    isolation: isolate;
  }

  .hero__bg {
    position: absolute;
    inset: 0;
    /* Negativo a propósito: deja el contenido arriba sin que este necesite z-index,
       que crearía un contexto de apilado y rompería el blend de Brian. */
    z-index: -1;
    pointer-events: none;
  }

  .hero__bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
  }

  .hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
    animation: float 16s ease-in-out infinite;
  }

  .hero__glow--1 {
    top: -14%;
    right: -8%;
    width: min(48vw, 620px);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgb(242 184 23 / 0.55), transparent 65%);
  }

  .hero__glow--2 {
    bottom: -22%;
    left: -12%;
    width: min(42vw, 520px);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgb(155 114 0 / 0.5), transparent 65%);
    animation-delay: -8s;
  }

  @keyframes float {
    0%,
    100% {
      transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
      transform: translate3d(0, -28px, 0) scale(1.07);
    }
  }

  .hero__inner {
    position: relative;
    display: grid;
    gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
    align-items: center;
  }

  @media (min-width: 980px) {
    .hero__inner {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }

    /* Brian define el alto de la fila y empuja el texto hacia abajo. Su base ya se
       desvanece, asi que se le deja invadir el padding inferior: la fila se acorta
       y el bloque de texto sube. */
    .hero__media {
      margin-bottom: -3.5rem;
    }
  }

  .hero h1 {
    font-size: clamp(2.125rem, 1.4rem + 3vw, 3.625rem);
    letter-spacing: -0.045em;
    line-height: 0.95;
  }

  .hero__lead {
    max-width: 54ch;
    margin-top: var(--sp-5);
    font-size: var(--fs-lead);
    color: #c8c8c2;
  }

  .hero .btn-row {
    margin-top: var(--sp-6);
  }

  .hero__note {
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--line-dark);
    font-size: var(--fs-sm);
    color: #8f8f89;
    max-width: 50ch;
  }

  .hero__media {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .hero__brian {
    position: relative;
    width: min(515px, 100%);
    margin: 0;
  }

  /* El video se compone con lighten: sin un fondo casi opaco propio, el video de
     fondo del hero se cuela por las partes oscuras de Brian y se ve como una mancha.
     z-index negativo para quedar por encima del fondo pero debajo del halo dorado. */
  .hero__brian::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -4% -10%;
    background: radial-gradient(ellipse 56% 52% at 50% 47%,
      rgb(4 7 15 / 0.97) 0%,
      rgb(4 7 15 / 0.94) 46%,
      rgb(4 7 15 / 0.62) 72%,
      rgb(4 7 15 / 0) 100%);
  }

  /* --- Botones circulares del hero --- */
  .btn-row--pads {
    gap: clamp(1.75rem, 0.5rem + 4vw, 4rem);
  }

  .pad {
    --pad-glow: rgb(242 183 57 / 0.5);
    display: block;
    width: clamp(102px, 11.5vw, 138px);
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.14s var(--ease), filter 0.25s var(--ease);
  }

  .pad--wa {
    --pad-glow: rgb(37 211 102 / 0.55);
  }

  .pad img {
    display: block;
    width: 100%;
    height: auto;
  }

  .pad:hover {
    transform: translateY(-3px);
    filter: brightness(1.08) drop-shadow(0 10px 26px var(--pad-glow));
  }

  /* El botón se hunde: escala hacia adentro y se apaga. */
  .pad:active {
    transform: scale(0.93) translateY(3px);
    filter: brightness(0.82) saturate(0.9);
    transition-duration: 0.06s;
  }

  .pad:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 6px;
  }

  .hero__media::before {
    content: "";
    position: absolute;
    inset: 12% -6%;
    background: radial-gradient(circle, rgb(242 184 23 / 0.3), transparent 68%);
    filter: blur(50px);
  }

  /* --- Brian --- */
  .brian {
    overflow: hidden;
    /* Acota el mix-blend-mode del video al fondo de la sección. */
    isolation: isolate;
  }

  .brian__inner {
    display: grid;
    gap: clamp(2.5rem, 1.5rem + 4vw, 4rem);
    align-items: center;
  }

  @media (min-width: 900px) {
    .brian__inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    }
  }

  .brian__lead {
    max-width: 54ch;
    margin-top: var(--sp-4);
    font-size: var(--fs-lead);
    color: #c8c8c2;
  }

  .brian__figure {
    position: relative;
    justify-self: center;
    width: min(580px, 100%);
    margin: 0;
  }

  /* Brian arranca a la altura del eyebrow, no centrado contra la columna de texto. */
  @media (min-width: 900px) {
    .brian__figure {
      align-self: start;
    }
  }

  .brian__figure::before {
    content: "";
    position: absolute;
    inset: -8% -14% 10%;
    background: radial-gradient(circle at 50% 35%, rgb(242 183 57 / 0.35), transparent 65%);
    filter: blur(60px);
  }

  /* La imagen fija tiene canal alfa: es un recorte, no una tarjeta. */
  .brian__figure img {
    position: relative;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(#000 90%, transparent 100%);
    mask-image: linear-gradient(#000 90%, transparent 100%);
  }

  /* El video viene con fondo negro puro: lighten lo hace desaparecer sobre la sección oscura. */
  .brian__video {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    mix-blend-mode: lighten;
    -webkit-mask-image: linear-gradient(#000 88%, transparent 100%);
    mask-image: linear-gradient(#000 88%, transparent 100%);
  }

  .brian__caps {
    display: grid;
    margin-top: var(--sp-6);
  }

  .cap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--line-dark);
  }

  .cap__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--ink);
  }

  .cap__icon svg {
    width: 20px;
    height: 20px;
  }

  .cap__body strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .cap__body span {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-sm);
    color: var(--text-on-dark-muted);
  }

  .brian__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 100%;
    margin-top: var(--sp-6);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius);
    background: var(--ink);
    border: 1px solid var(--line-dark);
    font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--white);
    transition: border-color 0.2s;
  }

  .brian__phone:hover {
    border-color: var(--wa);
  }

  .brian__phone svg {
    width: 24px;
    height: 24px;
    color: var(--wa);
    flex: none;
  }

  /* --- Clientes y desarrollos --- */
  .work-carousel {
    position: relative;
  }

  .work-carousel__controls {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
  }

  .js .work-carousel__controls {
    display: flex;
  }

  .work-carousel__button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    transition: border-color 0.2s, background-color 0.2s, color 0.2s, transform 0.2s var(--ease);
  }

  .work-carousel__button:hover:not(:disabled) {
    border-color: var(--gold);
    background: var(--gold);
    color: var(--ink);
    transform: translateY(-2px);
  }

  .work-carousel__button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  .work-carousel__button svg {
    width: 18px;
    height: 18px;
  }

  .work-carousel__button--prev svg {
    transform: rotate(180deg);
  }

  .work-carousel__status {
    min-width: 4.25rem;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-align: center;
  }

  .work {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    gap: var(--sp-4);
    padding-block: 2px var(--sp-4);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 0;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .work::-webkit-scrollbar {
    display: none;
  }

  .work__item {
    --work-pad: clamp(1.35rem, 1rem + 1.1vw, 2rem);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: var(--sp-4);
    min-width: 0;
    padding: var(--work-pad);
    border: var(--border);
    border-top: 3px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--surface);
    align-items: start;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease);
  }

  .work__item.is-current {
    border-top-color: var(--gold);
    box-shadow: var(--shadow);
  }

  .work__logo {
    display: grid;
    place-items: center;
    height: 116px;
    margin: calc(var(--work-pad) * -1) calc(var(--work-pad) * -1) var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: var(--border);
    background: var(--white);
    overflow: hidden;
  }

  .work__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .work__logo--dark,
  .work__logo--brand {
    background: var(--ink);
  }

  .work__logo--brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    color: var(--text-on-dark);
  }

  .work__brandmark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 2px solid var(--gold);
    color: var(--gold);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 900;
  }

  .work__wordmark {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    font-weight: 800;
    letter-spacing: 0.08em;
  }

  .work__client strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .work__client span {
    display: block;
    margin-top: var(--sp-2);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-deep);
  }

  .work__impact {
    margin-top: var(--sp-3);
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--text-muted);
  }

  .work__impact b {
    display: block;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
  }

  .work__desc {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.62;
  }

  .work__desc a {
    border-bottom: 2px solid var(--gold);
    font-weight: 600;
    color: var(--text);
  }

  .work__stack {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-self: end;
    align-content: start;
    padding-top: var(--sp-2);
  }

  .work-carousel__progress {
    display: none;
    height: 2px;
    margin-top: var(--sp-2);
    background: var(--line);
    overflow: hidden;
  }

  .js .work-carousel__progress {
    display: block;
  }

  .work-carousel__progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--gold);
    transform: scaleX(calc(1 / 11));
    transform-origin: left;
    transition: transform 0.3s var(--ease);
  }

  @media (min-width: 600px) {
    .work {
      grid-auto-columns: 64%;
    }
  }

  @media (min-width: 960px) {
    .work {
      grid-auto-columns: 43%;
    }
  }

  @media (min-width: 1280px) {
    .work {
      grid-auto-columns: 37%;
    }
  }

  .chip {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border: var(--border);
    border-radius: var(--radius-pill);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
  }

  /* --- Planes --- */
  .tiers {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  }

  .tier {
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    background: var(--ink);
    border: 1px solid var(--line-dark);
    transition: border-color 0.3s, transform 0.3s var(--ease);
  }

  .tier:hover {
    border-color: var(--gold);
    transform: translateY(-4px);
  }

  .tier--featured {
    border-color: var(--gold);
    background: linear-gradient(180deg, rgb(242 184 23 / 0.12), transparent 55%), var(--ink);
  }

  .tier h3 {
    margin-bottom: var(--sp-2);
  }

  .tier .badge + h3 {
    margin-top: var(--sp-4);
  }

  .tier > p {
    font-size: var(--fs-sm);
    color: var(--text-on-dark-muted);
    margin-bottom: var(--sp-5);
  }

  .tier ul {
    display: grid;
    gap: var(--sp-3);
    margin-top: auto;
    padding-top: var(--sp-5);
    border-top: 1px solid var(--line-dark);
  }

  .tier li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.6rem;
    font-size: var(--fs-sm);
    color: #cfcfc9;
  }

  .tier li svg {
    width: 15px;
    height: 15px;
    margin-top: 0.3em;
    color: var(--gold);
    flex: none;
  }

  /* --- CTA final --- */
  .cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .cta::before {
    content: "";
    position: absolute;
    inset: auto -10% -60% 20%;
    aspect-ratio: 2 / 1;
    background: radial-gradient(circle, rgb(242 184 23 / 0.3), transparent 65%);
    filter: blur(80px);
    z-index: var(--z-bg);
  }

  .cta__inner {
    position: relative;
    z-index: var(--z-content);
    display: grid;
    gap: var(--sp-6);
    align-items: end;
  }

  @media (min-width: 900px) {
    .cta__inner {
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
      gap: var(--sp-8);
    }
  }

  .cta p {
    margin-top: var(--sp-4);
    max-width: 52ch;
    font-size: var(--fs-lead);
    color: #c8c8c2;
  }

  /* --- Jingle --- */
  .jingle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-5);
    margin-top: var(--sp-6);
    background: var(--surface-alt);
    border: var(--border);
    border-left: 3px solid var(--gold);
  }

  .jingle div {
    flex: 1 1 220px;
  }

  .jingle strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
  }

  .jingle span {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
  }

  .jingle audio {
    flex: 1 1 260px;
    height: 40px;
    max-width: 340px;
  }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .sprite {
    display: none;
  }

  .u-center {
    text-align: center;
  }

  .mt-6 {
    margin-top: var(--sp-6);
  }

  .js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }

  .js .reveal.is-in {
    opacity: 1;
    transform: none;
  }

  .js .reveal-stagger > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }

  .js .reveal-stagger.is-in > * {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
    .js .reveal,
    .js .reveal-stagger > * {
      opacity: 1;
      transform: none;
    }
    .capability:hover .capability__media img {
      transform: none;
    }
    .js .capability__index,
    .js .capability__body,
    .js .capability__examples,
    .js .capability__motif {
      opacity: 1;
      transform: none;
    }
    .js .capability__media,
    .js .capability:nth-child(even) .capability__media,
    .js .capability__motif {
      clip-path: none;
    }
    .js .capability__examples::before {
      transform: scaleX(1);
    }
    .js .capability-atlas {
      --atlas-progress: 100%;
    }
  }
}