/* ============================================================
   RAÚL FERRAZZANO — Intendente Yerba Buena 2027
   Design system: editorial, azul marino + dorado
   ============================================================ */

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

/* ------------------------------------------------------------
   TOKENS
   ------------------------------------------------------------ */
:root {
  /* Color — tinta azul marino */
  --ink-900: #001b3d;
  --ink-800: #002046;
  --ink-700: #1b365d;
  /* #2e476f es el azul claro del degradado del hero (inline en index.html) */

  /* Neutros fríos */
  --paper: #f8f9fa;
  --paper-2: #edeeef;
  --line: #d8dde3;
  --line-dark: rgb(255 255 255 / 0.14);
  --muted: #44474e;
  --muted-dark: #a5b4cd;

  /* Acento — dorado */
  --accent: #ffb957;
  --accent-deep: #8a5a00;
  --accent-soft: rgb(255 185 87 / 0.14);

  --wa: #25d366;

  /* Tipografía — escala fluida (Utopia 360→1240) */
  --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
  --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
  --step-hero: clamp(2.55rem, 1.5rem + 4.7vw, 5.6rem);

  --font-display: "Montserrat", "Trebuchet MS", sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, sans-serif;

  /* Espaciado fluido */
  --space-xs: clamp(0.5rem, 0.45rem + 0.2vw, 0.65rem);
  --space-s: clamp(0.75rem, 0.68rem + 0.34vw, 1rem);
  --space-m: clamp(1.5rem, 1.36rem + 0.68vw, 2rem);
  --space-l: clamp(3rem, 2.5rem + 2.27vw, 5rem);
  --section-y: clamp(4.5rem, 3rem + 6.8vw, 8.5rem);

  /* Forma y sombra */
  --radius: 14px;
  --radius-s: 8px;
  --shadow-lift: 0 12px 32px -12px rgb(0 27 61 / 0.18);
  --shadow-fab: 0 6px 20px rgb(0 0 0 / 0.22);

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-panel: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-hover: 0.18s;
  --dur-lift: 0.22s;
  --dur-reveal: 0.6s;

  /* Layout */
  --header-h: 76px;

  /* Grain — feTurbulence data-URI */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   RESET
   ------------------------------------------------------------ */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 12px);
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  body {
    min-height: 100svh;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

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

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    cursor: pointer;
  }

  ul[class],
  ol[class] {
    list-style: none;
    padding: 0;
  }
}

/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */
@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    color: var(--ink-900);
    background: var(--paper);
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--step-hero);
    line-height: 1.02;
  }

  h2 {
    font-size: var(--step-3);
    line-height: 1.12;
  }

  h3 {
    font-size: var(--step-1);
    line-height: 1.25;
  }

  p {
    max-width: 62ch;
  }

  a {
    color: inherit;
  }

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

  :focus-visible {
    outline: 2px solid var(--accent-deep);
    outline-offset: 3px;
    border-radius: 4px;
  }

  .band--dark :focus-visible {
    outline-color: var(--accent);
  }

  .skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 200;
    padding: 0.75rem 1.25rem;
    background: var(--ink-900);
    color: var(--paper);
    border-radius: var(--radius-s);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--step--1);
  }

  .skip-link:focus {
    top: 12px;
  }
}

/* ------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------ */
@layer layout {
  .wrap {
    width: min(100% - 2.5rem, 1200px);
    margin-inline: auto;
  }

  .wrap--narrow {
    width: min(100% - 2.5rem, 780px);
    margin-inline: auto;
  }

  .band {
    position: relative;
    padding-block: var(--section-y);
  }

  .band--paper {
    background: var(--paper);
  }

  .band--paper2 {
    background: var(--paper-2);
  }

  .band--dark {
    background: var(--ink-900);
    color: var(--paper);
    /* lo oscuro comprime visualmente: más aire */
    padding-block: calc(var(--section-y) * 1.18);
  }

  .band--dark p {
    letter-spacing: 0.005em;
    font-weight: 400;
  }

  /* Grano sobre bandas oscuras */
  .grain::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: var(--grain);
  }

  .section-head {
    margin-bottom: var(--space-l);
  }

  .section-head h2 {
    margin-top: 0.5rem;
  }

  .section-head .lede {
    margin-top: var(--space-s);
    font-size: var(--step-1);
    line-height: 1.45;
    max-width: 48ch;
    color: var(--muted);
  }

  .band--dark .section-head .lede {
    color: var(--muted-dark);
  }
}

/* ------------------------------------------------------------
   COMPONENTS
   ------------------------------------------------------------ */
@layer components {
  /* --- Eyebrow ------------------------------------------------ */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-deep);
  }

  .eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--accent);
  }

  .band--dark .eyebrow {
    color: var(--accent);
  }

  /* --- Botones ------------------------------------------------ */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0.95rem 1.75rem;
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.005em;
    text-decoration: none;
    border-radius: var(--radius-s);
    border: 1px solid transparent;
    transition:
      background-color var(--dur-hover) ease-out,
      border-color var(--dur-hover) ease-out,
      color var(--dur-hover) ease-out,
      box-shadow var(--dur-lift) ease-out,
      transform 0.1s ease-out;
  }

  .btn svg {
    transition: transform var(--dur-hover) ease-out;
  }

  .btn:hover svg {
    transform: translateX(3px);
  }

  .btn:active {
    transform: scale(0.985);
  }

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

  .btn--primary:hover {
    background: #ffc875;
    box-shadow: 0 8px 24px -10px rgb(255 185 87 / 0.55);
  }

  .btn--ghost {
    background: transparent;
    color: var(--ink-900);
    border-color: var(--line);
  }

  .btn--ghost:hover {
    border-color: var(--ink-700);
    background: rgb(0 27 61 / 0.04);
  }

  .band--dark .btn--ghost,
  .hero .btn--ghost {
    color: var(--paper);
    border-color: rgb(255 255 255 / 0.35);
  }

  .band--dark .btn--ghost:hover,
  .hero .btn--ghost:hover {
    border-color: var(--paper);
    background: rgb(255 255 255 / 0.08);
  }

  /* --- Link subrayado que crece ------------------------------- */
  .link-grow {
    text-decoration: none;
    font-weight: 600;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease;
    padding-bottom: 2px;
  }

  .link-grow:hover {
    background-size: 100% 1px;
  }

  /* --- Header ------------------------------------------------- */
  .site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    transition:
      background-color 0.25s ease-out,
      border-color 0.25s ease-out,
      backdrop-filter 0.25s ease-out;
    border-bottom: 1px solid transparent;
  }

  .site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
  }

  .site-header.is-scrolled {
    background: color-mix(in srgb, var(--ink-900) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: rgb(255 255 255 / 0.1);
  }

  /* En páginas interiores (hero corto claro) el header arranca sólido */
  .site-header--solid {
    background: var(--ink-900);
  }

  .wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.01em;
    color: var(--paper);
    text-decoration: none;
    line-height: 1.1;
    display: flex;
    flex-direction: column;
  }

  .wordmark small {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.75rem);
  }

  .site-nav a:not(.btn) {
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--paper);
    text-decoration: none;
    padding-bottom: 3px;
    background-image: linear-gradient(var(--accent), var(--accent));
    background-size: 0 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease;
  }

  .site-nav a:not(.btn):hover,
  .site-nav a[aria-current="page"] {
    background-size: 100% 2px;
  }

  .site-nav .btn {
    min-height: 42px;
    padding: 0.7rem 1.3rem;
  }

  .nav-toggle {
    display: none;
    color: var(--paper);
    font-weight: 600;
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.5rem 0.25rem;
  }

  .nav-toggle .bars {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    width: 22px;
  }

  .nav-toggle .bars span {
    height: 2px;
    background: currentColor;
    transition: transform 0.24s var(--ease-panel), opacity 0.2s ease;
  }

  .nav-toggle[aria-expanded="true"] .bars span:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .bars span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }

  @media (max-width: 899px) {
    .nav-toggle {
      display: inline-flex;
      /* por encima del overlay (z-index 90) para que la X sea visible y clickeable */
      position: relative;
      z-index: 95;
    }

    /* backdrop-filter convierte al header en bloque contenedor de sus hijos
       position:fixed — sin esto el overlay se recorta a la altura del header */
    body.nav-locked .site-header {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: var(--ink-900);
      border-bottom-color: transparent;
    }

    .site-nav {
      position: fixed;
      inset: 0;
      z-index: 90;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 0;
      /* padding vertical simétrico: con los margin auto de abajo, el bloque
         queda centrado en pantalla y compensa el peso visual del header */
      padding: calc(var(--header-h) + var(--space-m)) clamp(1.25rem, 6vw, 2rem)
        calc(var(--header-h) + var(--space-m) + env(safe-area-inset-bottom));
      background: var(--ink-900);
      overflow-y: auto;
      overscroll-behavior: contain;
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.3s var(--ease-panel), visibility 0s 0.3s;
    }

    .site-nav.is-open {
      visibility: visible;
      opacity: 1;
      transition: opacity 0.3s var(--ease-panel);
    }

    /* centra el bloque sin recortarlo si desborda (a diferencia de
       justify-content: center, los margin auto se resuelven a 0) */
    .site-nav a:not(.btn):first-child {
      margin-top: auto;
    }

    .site-nav .btn {
      margin-bottom: auto;
    }

    .site-nav a:not(.btn) {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      font-family: var(--font-display);
      font-size: var(--step-2);
      font-weight: 600;
      letter-spacing: -0.01em;
      padding: 0.9rem 0;
      border-bottom: 1px solid var(--line-dark);
      /* el subrayado creciente del desktop no aplica en el panel */
      background-image: none;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.35s var(--ease-out-expo), transform 0.35s var(--ease-out-expo),
        color var(--dur-hover) ease-out;
    }

    /* chevron a la derecha de cada item */
    .site-nav a:not(.btn)::after {
      content: "";
      flex: none;
      width: 9px;
      height: 9px;
      border-right: 2px solid currentColor;
      border-top: 2px solid currentColor;
      border-radius: 1px;
      transform: rotate(45deg);
      opacity: 0.4;
    }

    .site-nav a[aria-current="page"] {
      color: var(--accent);
    }

    .site-nav.is-open a:not(.btn) {
      opacity: 1;
      transform: none;
    }

    .site-nav.is-open a:nth-child(1) { transition-delay: 0.04s; }
    .site-nav.is-open a:nth-child(2) { transition-delay: 0.08s; }
    .site-nav.is-open a:nth-child(3) { transition-delay: 0.12s; }
    .site-nav.is-open a:nth-child(4) { transition-delay: 0.16s; }
    .site-nav.is-open a:nth-child(5) { transition-delay: 0.2s; }
    .site-nav.is-open a:nth-child(6) { transition-delay: 0.24s; }
    .site-nav.is-open .btn { transition-delay: 0.28s; }

    .site-nav .btn {
      margin-top: var(--space-m);
      min-height: 52px;
      padding: 0.95rem 1.75rem;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.35s var(--ease-out-expo), transform 0.35s var(--ease-out-expo);
    }

    .site-nav.is-open .btn {
      opacity: 1;
      transform: none;
    }

    body.nav-locked {
      overflow: hidden;
    }
  }

  /* --- Hero (home) -------------------------------------------- */
  .hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    color: var(--paper);
    background: var(--ink-900);
    overflow: hidden;
  }

  .hero__bg {
    position: absolute;
    inset: 0;
  }

  .hero__bg svg,
  .hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
  }

  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(100deg, rgb(0 27 61 / 0.94) 0%, rgb(0 27 61 / 0.72) 38%, rgb(0 27 61 / 0.18) 72%, transparent 100%),
      linear-gradient(to top, rgb(0 27 61 / 0.8) 0%, transparent 45%);
  }

  .hero .wrap {
    position: relative;
    z-index: 2;
    display: grid;
    gap: var(--space-m);
    padding-block: calc(var(--header-h) + 1.5rem) clamp(2.5rem, 6vh, 4rem);
  }

  /* Mobile: retrato circular compacto arriba del titular */
  .hero__portrait {
    position: relative;
    isolation: isolate;
    order: -1;
    width: clamp(88px, 24vw, 124px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgb(255 185 87 / 0.5);
    box-shadow: 0 14px 34px -14px rgb(0 0 0 / 0.5);
    background: var(--ink-800);
  }

  .hero__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    /* Baja el calor de la foto para que conviva con el azul del hero */
    filter: saturate(0.85) contrast(1.06) brightness(0.96);
  }

  /* Velo azul + viñeta: integra la foto al degradado en vez de recortarla encima */
  .hero__portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(165deg, rgb(0 27 61 / 0.34) 0%, rgb(0 27 61 / 0.04) 45%, rgb(0 27 61 / 0.52) 100%),
      radial-gradient(120% 100% at 50% 35%, transparent 45%, rgb(0 27 61 / 0.45) 100%);
    mix-blend-mode: multiply;
  }

  @media (min-width: 900px) {
    .hero .wrap {
      grid-template-columns: 1fr auto;
      align-items: end;
      gap: var(--space-l);
      padding-block: calc(var(--header-h) + 3rem) clamp(3.5rem, 8vh, 6rem);
    }

    /* Desktop: marco grande al costado, filo dorado y halo cálido */
    .hero__portrait {
      order: 0;
      width: clamp(260px, 24vw, 360px);
      aspect-ratio: 4 / 5;
      border-radius: var(--radius);
      border: 0;
      box-shadow:
        0 0 0 1px rgb(255 185 87 / 0.30),
        0 34px 80px -30px rgb(0 0 0 / 0.78),
        0 0 110px -24px rgb(255 185 87 / 0.20);
    }

    .hero__portrait img {
      object-position: center 18%;
    }
  }

  .hero__content {
    max-width: 640px;
    display: grid;
    gap: var(--space-m);
  }

  .hero h1 .line {
    display: block;
    overflow: hidden;
  }

  .hero h1 .line > span {
    display: block;
  }

  .js-motion .hero h1 .line > span {
    transform: translateY(110%);
    animation: rise-in 0.8s var(--ease-out-expo) forwards;
  }

  .js-motion .hero h1 .line:nth-child(2) > span { animation-delay: 0.09s; }
  .js-motion .hero h1 .line:nth-child(3) > span { animation-delay: 0.18s; }

  @keyframes rise-in {
    to { transform: translateY(0); }
  }

  .hero__lede {
    font-size: var(--step-1);
    line-height: 1.45;
    max-width: 44ch;
    color: rgb(248 249 250 / 0.88);
  }

  .hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin-top: var(--space-xs);
  }

  /* Doble chevron dorado con rebote suave */
  .scroll-cue {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: clamp(14px, 3vh, 26px);
    width: 24px;
    height: 22px;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .scroll-cue::before,
  .scroll-cue::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    border-radius: 1px;
    transform: translate(-50%, 0) rotate(45deg);
  }

  .scroll-cue::before {
    opacity: 0.35;
  }

  .scroll-cue::after {
    top: 7px;
  }

  .js-motion .scroll-cue::before,
  .js-motion .scroll-cue::after {
    animation: cue-bob 1.9s ease-in-out infinite;
  }

  .js-motion .scroll-cue::after {
    animation-delay: 0.15s;
  }

  @keyframes cue-bob {
    0%,
    100% {
      transform: translate(-50%, 0) rotate(45deg);
      opacity: 0.9;
    }

    50% {
      transform: translate(-50%, 6px) rotate(45deg);
      opacity: 0.45;
    }
  }

  /* --- Hero interior (páginas) -------------------------------- */
  .page-hero {
    position: relative;
    background: var(--ink-900);
    color: var(--paper);
    padding-block: calc(var(--header-h) + var(--space-l)) var(--space-l);
    overflow: hidden;
  }

  .page-hero .eyebrow {
    color: var(--accent);
  }

  .page-hero h1 {
    font-size: var(--step-5);
    margin-top: var(--space-s);
    max-width: 20ch;
  }

  .page-hero .lede {
    margin-top: var(--space-m);
    font-size: var(--step-1);
    line-height: 1.45;
    max-width: 48ch;
    color: var(--muted-dark);
  }

  .page-hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    gap: var(--space-l);
  }

  .page-hero__portrait {
    width: min(200px, 55vw);
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgb(248 249 250 / 0.22);
    box-shadow: 0 18px 44px -18px rgb(0 0 0 / 0.5);
    background: var(--ink-800);
  }

  @media (min-width: 900px) {
    .page-hero__grid {
      grid-template-columns: 1fr auto;
      align-items: center;
    }

    .page-hero__portrait {
      width: clamp(200px, 20vw, 280px);
    }
  }

  .page-hero__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .page-hero__ghost {
    position: absolute;
    right: -0.05em;
    bottom: -0.22em;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(8rem, 22vw, 20rem);
    line-height: 1;
    color: rgb(255 255 255 / 0.045);
    pointer-events: none;
    user-select: none;
  }

  /* --- Cards de credenciales ---------------------------------- */
  .cred-grid {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  }

  .cred-card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    display: grid;
    gap: 0.75rem;
    align-content: start;
    text-decoration: none;
    transition: transform var(--dur-lift) var(--ease-out-expo),
      box-shadow var(--dur-lift) var(--ease-out-expo),
      border-color var(--dur-hover) ease-out;
  }

  a.cred-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    border-color: var(--muted);
  }

  .cred-card .num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-2);
    color: var(--accent-deep);
    font-variant-numeric: tabular-nums;
  }

  .cred-card h3 {
    font-size: var(--step-1);
  }

  .cred-card p {
    font-size: var(--step--1);
    color: var(--muted);
    line-height: 1.55;
  }

  /* --- Stats / contadores ------------------------------------- */
  .stats-grid {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    text-align: left;
  }

  @media (max-width: 719px) {
    .stats-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  .stat .stat__num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-4);
    line-height: 1;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    display: inline-block;
    min-width: 2ch;
  }

  .stat .stat__suffix {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-4);
    line-height: 1;
    color: var(--accent);
  }

  .stat .stat__label {
    display: block;
    margin-top: 0.5rem;
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-dark);
    max-width: 22ch;
  }

  /* --- Video facade ------------------------------------------- */
  .video-facade {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink-800);
    display: grid;
    place-items: center;
    padding: 0;
  }

  .video-facade__poster {
    position: absolute;
    inset: 0;
  }

  .video-facade__poster svg,
  .video-facade__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .video-facade__play {
    position: relative;
    z-index: 2;
    width: clamp(64px, 8vw, 84px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent);
    display: grid;
    place-items: center;
    transition: transform var(--dur-lift) var(--ease-out-expo);
  }

  .video-facade__play::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 0 11px 19px;
    border-color: transparent transparent transparent var(--ink-900);
    margin-left: 4px;
  }

  .video-facade:hover .video-facade__play {
    transform: scale(1.08);
  }

  .video-facade iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .video-facade__caption {
    position: absolute;
    z-index: 2;
    left: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    text-align: left;
    color: var(--paper);
    font-size: var(--step--1);
    font-weight: 500;
    max-width: 34ch;
    text-shadow: 0 1px 8px rgb(0 0 0 / 0.4);
  }

  /* --- News cards --------------------------------------------- */
  .news-grid {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  }

  .news-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    display: grid;
    grid-template-rows: auto 1fr;
    transition: transform var(--dur-lift) var(--ease-out-expo),
      box-shadow var(--dur-lift) var(--ease-out-expo),
      border-color var(--dur-hover) ease-out;
  }

  /* el lift solo en tarjetas que son enlaces: en novedades.html son
     <article> sin destino y no deben animarse como clickeables */
  a.news-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    border-color: var(--muted);
  }

  .news-card__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--paper-2);
  }

  .news-card__media svg,
  .news-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease-out;
  }

  a.news-card:hover .news-card__media svg,
  a.news-card:hover .news-card__media img {
    transform: scale(1.04);
  }

  .news-card__body {
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    display: grid;
    gap: 0.6rem;
    align-content: start;
  }

  .news-card__meta {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-deep);
  }

  .news-card__meta time {
    color: var(--muted);
    letter-spacing: 0.04em;
  }

  .news-card h3 {
    font-size: var(--step-1);
  }

  .news-card p {
    font-size: var(--step--1);
    color: var(--muted);
    line-height: 1.55;
  }

  /* --- Quote slab --------------------------------------------- */
  .quote-slab blockquote {
    position: relative;
    max-width: 24ch;
    margin-inline: auto;
    text-align: center;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--step-4);
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .quote-slab blockquote::before {
    content: "\201C";
    position: absolute;
    top: -0.35em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3em;
    line-height: 1;
    color: var(--accent);
    opacity: 0.35;
    font-style: normal;
  }

  .quote-slab figcaption {
    margin-top: var(--space-m);
    text-align: center;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-dark);
  }

  /* --- Timeline (Quién soy) ----------------------------------- */
  .chapter {
    display: grid;
    gap: var(--space-m) var(--space-l);
    padding-block: var(--space-l);
    border-top: 1px solid var(--line);
  }

  .chapter:first-of-type {
    border-top: 0;
  }

  @media (min-width: 900px) {
    .chapter {
      grid-template-columns: minmax(240px, 34%) 1fr;
    }

    .chapter__label {
      position: sticky;
      top: calc(var(--header-h) + 44px);
      align-self: start;
    }
  }

  .chapter__num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-5);
    line-height: 1;
    color: var(--line);
    font-variant-numeric: tabular-nums;
    transition: color 0.4s ease-out;
  }

  /* accent-deep, no accent: el dorado claro sobre papel no llega a 3:1 */
  .chapter.is-active .chapter__num {
    color: var(--accent-deep);
  }

  .chapter__label h2 {
    font-size: var(--step-2);
    margin-top: 0.5rem;
  }

  .chapter__label .years {
    display: block;
    margin-top: 0.5rem;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-deep);
  }

  .chapter__body {
    display: grid;
    gap: var(--space-m);
  }

  .chapter__body p + p {
    margin-top: 0;
  }

  .chapter__figure {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
  }

  .chapter__figure svg,
  .chapter__figure img {
    width: 100%;
    height: auto;
  }

  .chapter__figure figcaption {
    padding: 0.75rem 1rem;
    font-size: var(--step--2);
    color: var(--muted);
    background: var(--paper);
    border-top: 1px solid var(--line);
  }

  .milestone-list {
    display: grid;
    gap: var(--space-s);
    border-left: 2px solid var(--line);
    padding-left: var(--space-m);
  }

  .milestone-list li {
    position: relative;
    font-size: var(--step--1);
    line-height: 1.55;
  }

  .milestone-list li::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--space-m) - 6px);
    top: 0.45em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
  }

  .milestone-list strong {
    display: block;
    font-weight: 600;
  }

  /* --- Bento propuestas --------------------------------------- */
  .props-grid {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  }

  @media (min-width: 720px) {
    .props-grid .is-anchor {
      grid-column: span 2;
    }
  }

  .prop-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: grid;
    gap: var(--space-s);
    align-content: start;
    transition: transform var(--dur-lift) var(--ease-out-expo),
      box-shadow var(--dur-lift) var(--ease-out-expo),
      border-color var(--dur-hover) ease-out;
  }

  .prop-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    border-color: var(--muted);
  }

  .prop-card--dark {
    position: relative;
    background: var(--ink-900);
    color: var(--paper);
    border-color: var(--ink-700);
    overflow: hidden;
  }

  .prop-card--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: var(--grain);
  }

  .prop-card--dark .prop-card__eyebrow .num {
    color: var(--accent);
  }

  .prop-card--dark .prop-card__eyebrow .tag {
    color: var(--muted-dark);
  }

  .prop-card--dark .prop-block h3 {
    color: var(--accent);
  }

  .prop-card--dark .prop-block p {
    color: rgb(248 249 250 / 0.88);
  }

  .prop-card--dark details {
    border-top-color: var(--line-dark);
  }

  .prop-card--dark summary {
    color: var(--paper);
  }

  .prop-card--dark summary::after {
    color: var(--accent);
  }

  .prop-card__eyebrow {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
  }

  .prop-card__eyebrow .num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-2);
    color: var(--accent-deep);
    font-variant-numeric: tabular-nums;
  }

  .prop-card__eyebrow .tag {
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .prop-card h2 {
    font-size: var(--step-2);
  }

  .prop-block {
    display: grid;
    gap: 0.35rem;
  }

  .prop-block h3 {
    font-family: var(--font-body);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-deep);
  }

  .prop-block p {
    font-size: var(--step--1);
    line-height: 1.6;
  }

  .prop-card details {
    border-top: 1px solid var(--line);
    padding-top: var(--space-s);
  }

  .prop-card summary {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--step--1);
    color: var(--ink-700);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

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

  .prop-card summary::after {
    content: "+";
    font-family: var(--font-display);
    font-size: 1.3em;
    color: var(--accent-deep);
    transition: transform 0.2s ease;
  }

  .prop-card details[open] summary::after {
    transform: rotate(45deg);
  }

  .prop-card details > *:not(summary) {
    margin-top: var(--space-s);
  }

  /* --- Entradas "Lo que hice" --------------------------------- */
  .record {
    display: grid;
    gap: var(--space-m);
    padding: clamp(1.75rem, 4vw, 3rem);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }

  .record + .record {
    margin-top: var(--space-m);
  }

  .record__head {
    display: grid;
    gap: 0.5rem;
  }

  .record__head h2 {
    font-size: var(--step-3);
  }

  .record__grid {
    display: grid;
    gap: var(--space-m);
  }

  @media (min-width: 900px) {
    .record__grid {
      grid-template-columns: 1fr 1fr;
    }

  }

  .record__step {
    display: grid;
    gap: 0.35rem;
    align-content: start;
  }

  .record__step h3 {
    font-family: var(--font-body);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-deep);
  }

  .record__step p {
    font-size: var(--step--1);
    line-height: 1.6;
  }

  .record__evidence {
    border-top: 1px solid var(--line);
    padding-top: var(--space-s);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    font-size: var(--step--1);
  }

  .record__evidence .link-grow {
    color: var(--ink-700);
  }

  /* --- Formularios -------------------------------------------- */
  .form-grid {
    display: grid;
    gap: var(--space-m);
  }

  .field {
    display: grid;
    gap: 0.45rem;
  }

  .field label {
    font-size: var(--step--1);
    font-weight: 600;
  }

  .field label .req {
    color: var(--accent-deep);
  }

  .field input,
  .field textarea,
  .field select {
    min-height: 52px;
    padding: 0.85rem 1rem;
    font-size: 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    transition: border-color var(--dur-hover) ease-out, box-shadow var(--dur-hover) ease-out;
  }

  .field textarea {
    min-height: 130px;
    resize: vertical;
  }

  .field input:focus,
  .field textarea:focus,
  .field select:focus {
    outline: none;
    border-color: var(--accent-deep);
    box-shadow: 0 0 0 3px rgb(138 90 0 / 0.2);
  }

  .field input[aria-invalid="true"],
  .field textarea[aria-invalid="true"] {
    border-color: #b3261e;
  }

  .field .error {
    font-size: var(--step--2);
    font-weight: 500;
    color: #b3261e;
    min-height: 1.2em;
  }

  .form-foot {
    display: grid;
    gap: 0.75rem;
    justify-items: start;
  }

  .form-foot .privacy {
    font-size: var(--step--2);
    color: var(--muted);
  }

  .form-success {
    display: grid;
    gap: var(--space-s);
    padding: clamp(1.75rem, 4vw, 2.5rem);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
  }

  .form-success h2 {
    font-size: var(--step-2);
  }

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

  /* --- Contacto ------------------------------------------------ */
  .contact-grid {
    display: grid;
    gap: var(--space-l);
  }

  @media (min-width: 1024px) {
    .contact-grid {
      grid-template-columns: 1.4fr 1fr;
      align-items: start;
    }
  }

  @media (min-width: 1024px) {
    .contact-aside {
      position: sticky;
      top: calc(var(--header-h) + 24px);
    }
  }

  .contact-card {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    display: grid;
    gap: var(--space-s);
  }

  .contact-card h2 {
    font-size: var(--step-2);
  }

  .contact-card p {
    font-size: var(--step--1);
    color: var(--muted);
    line-height: 1.6;
  }

  .btn--wa-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0.95rem 1.75rem;
    font-size: var(--step--1);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border-radius: var(--radius-s);
    background: var(--wa);
    color: var(--ink-900);
    transition: filter var(--dur-hover) ease-out, transform 0.1s ease-out;
  }

  .btn--wa-solid:hover {
    filter: brightness(1.08);
  }

  .btn--wa-solid:active {
    transform: scale(0.985);
  }

  .btn--wa-solid svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .contact-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding-top: var(--space-xs);
    border-top: 1px solid var(--line);
  }

  .contact-social a {
    font-size: var(--step--1);
    color: var(--ink-700);
  }

  .contact-note {
    font-size: var(--step--2) !important;
  }

  /* --- WhatsApp FAB ------------------------------------------- */
  .wa-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 80;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--wa);
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-fab);
    color: var(--ink-900);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.6);
    transition: opacity 0.35s var(--ease-out-expo), transform 0.35s var(--ease-out-expo);
  }

  .wa-fab.is-visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }

  .wa-fab svg {
    width: 30px;
    height: 30px;
  }

  @media (min-width: 900px) {
    .wa-fab {
      width: 60px;
      height: 60px;
      right: 24px;
      bottom: 24px;
    }
  }

  @media (max-width: 899px) {
    body.has-ctabar .wa-fab.is-visible {
      /* la barra inferior integra WhatsApp: FAB se oculta */
      opacity: 0;
      visibility: hidden;
      transform: scale(0.6);
      pointer-events: none;
    }
  }

  /* --- Sticky CTA bar (mobile) -------------------------------- */
  .cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 85;
    display: flex;
    gap: 0.6rem;
    padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--ink-900) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgb(255 255 255 / 0.1);
    transform: translateY(110%);
    /* visibility saca los links del tab order mientras la barra está oculta */
    visibility: hidden;
    transition: transform 0.26s ease-out, visibility 0s linear 0.26s;
  }

  .cta-bar.is-visible {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }

  .cta-bar .btn--primary {
    flex: 1.6;
  }

  .cta-bar .btn--wa {
    flex: 1;
    background: var(--wa);
    color: var(--ink-900);
  }

  .cta-bar .btn--wa svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
  }

  @media (min-width: 900px) {
    .cta-bar {
      display: none;
    }
  }

  /* --- CTA band ----------------------------------------------- */
  .cta-band {
    text-align: center;
    display: grid;
    gap: var(--space-m);
    justify-items: center;
  }

  .cta-band h2 {
    font-size: var(--step-4);
    max-width: 18ch;
  }

  .cta-band p {
    font-size: var(--step-1);
    line-height: 1.45;
    max-width: 42ch;
    color: var(--muted-dark);
  }

  /* --- Footer ------------------------------------------------- */
  .site-footer {
    background: var(--ink-900);
    color: var(--paper);
    padding-block: var(--space-l) calc(var(--space-l) + 64px);
    position: relative;
  }

  .site-footer .wrap {
    display: grid;
    gap: var(--space-l);
  }

  @media (min-width: 900px) {
    .site-footer .wrap {
      grid-template-columns: 1.4fr 1fr 1fr;
      gap: var(--space-m);
    }
  }

  .site-footer .wordmark {
    font-size: 1.4rem;
  }

  .site-footer p {
    font-size: var(--step--1);
    color: var(--muted-dark);
    max-width: 34ch;
    margin-top: var(--space-s);
  }

  .footer-col h3 {
    font-family: var(--font-body);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--space-s);
  }

  .footer-col ul {
    display: grid;
    gap: 0.6rem;
  }

  .footer-col a {
    font-size: var(--step--1);
    color: var(--paper);
    text-decoration: none;
  }

  .footer-col a:hover {
    color: var(--accent);
  }

  .footer-legal {
    border-top: 1px solid var(--line-dark);
    margin-top: var(--space-l);
    padding-top: var(--space-m);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    justify-content: space-between;
    font-size: var(--step--2);
    color: var(--muted-dark);
  }

  /* --- Reveals ------------------------------------------------- */
  .js-motion [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-reveal) var(--ease-out-expo),
      transform var(--dur-reveal) var(--ease-out-expo);
  }

  .js-motion [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  .js-motion [data-reveal][data-delay="1"] { transition-delay: 0.08s; }
  .js-motion [data-reveal][data-delay="2"] { transition-delay: 0.16s; }
  .js-motion [data-reveal][data-delay="3"] { transition-delay: 0.24s; }
}

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

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

  .mt-l {
    margin-top: var(--space-l);
  }

  .mt-m {
    margin-top: var(--space-m);
  }
}

/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .js-motion [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .js-motion .hero h1 .line > span {
    transform: none;
    animation: none;
  }

  .scroll-cue {
    display: none;
  }
}