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

/* ---------------------------------------------------------------- */
/* 1. Reset                                                          */
/* ---------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  h1, h2, h3, h4, p, figure { margin: 0; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  input, textarea { font: inherit; color: inherit; }

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

/* ---------------------------------------------------------------- */
/* 2. Design tokens                                                  */
/* ---------------------------------------------------------------- */
@layer tokens {
  :root {
    color-scheme: light dark;

    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;

    /* Tier 1 — literal */
    --white: #ffffff;
    --black: #0a0a0c;
    --blue: light-dark(#0866ff, #0a84ff);
    --violet: light-dark(#6e56cf, #8a7bff);

    /* Tier 2 — semantic */
    --color-bg: light-dark(#fbfbfd, #000000);
    --color-bg-elevated: light-dark(#ffffff, #131316);
    --color-bg-alt: light-dark(#f3f3f5, #0c0c0f);
    --color-text: light-dark(#1d1d1f, #f5f5f7);
    --color-text-secondary: light-dark(#6e6e73, #a1a1a6);
    --color-border: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.12));
    --color-accent: var(--blue);
    --color-accent-2: var(--violet);

    /* Tier 3 — ui */
    --glass-bg: light-dark(rgba(255, 255, 255, 0.38), rgba(30, 30, 34, 0.38));
    --glass-border: light-dark(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.16));
    --glass-highlight: light-dark(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.14));
    --glass-blur: blur(28px) saturate(200%);
    --nav-bg: light-dark(rgba(251, 251, 253, 0.6), rgba(0, 0, 0, 0.5));

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12);

    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-full: 999px;

    --wrap: min(75rem, 100% - 3rem);
    --header-offset: 5.75rem;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* Type scale — every text size in the site pulls from one of these.
       xs/sm/base cover UI chrome and running text; lead is for intro
       paragraphs; h3/h2-sm/h2/h1 are the heading tiers. */
    --text-xs: 0.8rem;
    --text-sm: 0.875rem;
    --text-base: 0.95rem;
    --text-lead: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
    --text-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.375rem);
    --text-h2-sm: clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
    --text-h2: clamp(2rem, 1.6rem + 1.6vw, 3.25rem);
    --text-h1: clamp(2.75rem, 3.2rem + 2.2vw, 5.5rem);
  }
}

/* ---------------------------------------------------------------- */
/* 3. Base                                                           */
/* ---------------------------------------------------------------- */
@layer base {
  body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  h1 {
    font-size: var(--text-h1);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.038em;
    text-wrap: balance;
  }

  h2 {
    font-size: var(--text-h2);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  h3 {
    font-size: var(--text-h3);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.012em;
  }

  p { color: var(--color-text-secondary); text-wrap: pretty; }
  strong, b { font-weight: 600; }

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

  .skip-link {
    position: absolute;
    inset-block-start: -3rem;
    inset-inline-start: 1rem;
    background: var(--color-bg-elevated);
    color: var(--color-text);
    padding: 0.6rem 1rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 100;
    transition: inset-block-start 0.2s var(--ease-out);
  }
  .skip-link:focus { inset-block-start: 1rem; }
}

/* ---------------------------------------------------------------- */
/* 4. Layout                                                         */
/* ---------------------------------------------------------------- */
@layer layout {
  .wrap {
    width: var(--wrap);
    margin-inline: auto;
    padding-inline: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  }

  /* On mobile, --wrap already insets content by the same margin the
     floating header pill uses. Adding this padding on top of that made
     every card/form/section noticeably narrower than the header above it
     (double inset). Drop it below the point where layouts go single-column,
     so mobile content lines up flush with the header's own edges. */
  @media (max-width: 48rem) {
    .wrap { padding-inline: 0; }
  }

  .section {
    position: relative;
    padding-block: clamp(4.5rem, 4rem + 4vw, 8rem);
  }

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

  .section-glow-host { overflow: hidden; }

  .section-head {
    max-width: 42rem;
    margin-inline: auto;
    text-align: center;
    margin-block-end: clamp(2.5rem, 2rem + 2vw, 4.5rem);
  }

  .section-lead {
    margin-block-start: 1.1rem;
    font-size: var(--text-lead);
    line-height: 1.6;
  }

  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.25rem;
  }

  .pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2rem 3rem;
    padding-block: clamp(3.5rem, 3rem + 2vw, 5rem);
  }

  .process-list {
    display: grid;
    gap: 1.5rem;
    max-width: 46rem;
    margin-inline: auto;
  }

  .process-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: baseline;
    padding-block: 1.5rem;
    border-block-end: 1px solid var(--color-border);
  }
  .process-step:last-child { border-block-end: none; }

  .formacion-note {
    max-width: 42rem;
    margin: 2.5rem auto 0;
    text-align: center;
    font-size: var(--text-sm);
  }

  .enfoque-inner { max-width: 46rem; }
  .enfoque .section-head { text-align: start; margin-inline: 0; }

  /* -- Simple sub-pages (Nosotros, Legal) -- */
  .page-hero {
    padding-block-start: calc(var(--header-offset) + clamp(3rem, 2.5rem + 2vw, 5rem));
    padding-block-end: clamp(2.5rem, 2rem + 2vw, 4rem);
  }

  .page-hero-inner { max-width: 42rem; }

  /* These are page titles, not the marketing hero on the homepage — keep
     them at the section-heading size so a longer title (e.g. "Nosotros")
     doesn't balloon to fill the first screen. */
  .page-hero-inner h1 {
    font-size: var(--text-h2);
    line-height: 1.08;
  }

  /* -- Sector chips (reused in "A quién ayudamos", Nosotros) -- */
  .location-sectors {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-block-start: 0.85rem;
    list-style: none;
  }

  .location-sectors li {
    padding: 0.45rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: color-mix(in oklab, var(--color-accent) 8%, transparent);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
  }

  /* -- Principles tree (Nosotros: "Cómo trabajamos") -- */
  .principles-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-block-start: clamp(2.5rem, 2rem + 2vw, 4rem);
    padding-block-start: 2.75rem;
  }

  /* Horizontal branch, spanning from the first node's center to the last
     node's center. Anchored to .principles-grid itself (not a second grid)
     so it can't drift out of alignment with the nodes from independent
     sub-pixel rounding between two separate grid contexts. */
  .principles-grid::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: calc((100% - 5rem) / 6);
    block-size: 1px;
    background: var(--color-border);
  }

  .principle-node { position: relative; text-align: center; }

  /* Stem from the horizontal branch down to this node's icon. */
  .principle-node::before {
    content: "";
    position: absolute;
    inset-block-start: -2.75rem;
    inset-inline-start: 50%;
    inline-size: 1px;
    block-size: 2.75rem;
    background: var(--color-border);
    transform: translateX(-50%);
  }

  .principle-icon {
    display: inline-grid;
    place-items: center;
    inline-size: 4.5rem;
    block-size: 4.5rem;
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    color: var(--color-accent);
    font-size: 1.4rem;
    box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-highlight);
    margin-block-end: 1.25rem;
  }
  .principle-icon svg { inline-size: 1.6rem; block-size: 1.6rem; }

  .principle-node h3 { margin-block-end: 0.5rem; }

  .principle-node p {
    max-width: 22rem;
    margin-inline: auto;
    font-size: var(--text-sm);
  }

  @media (max-width: 48rem) {
    .principles-grid { grid-template-columns: 1fr; gap: 2.5rem; padding-block-start: 0; }
    .principles-grid::before,
    .principle-node::before { display: none; }
  }

  /* -- Who we help (Nosotros) -- */
  .who-we-help {
    max-width: 46rem;
    margin: clamp(3rem, 2.5rem + 2vw, 4.5rem) auto 0;
    padding: clamp(2.25rem, 1.9rem + 1.6vw, 3.25rem);
    border-radius: var(--radius-lg);
    text-align: center;
  }
  .who-we-help .eyebrow { margin-block-end: 0.75rem; }

  .who-we-help-lead {
    font-size: var(--text-lead);
    line-height: 1.6;
    color: var(--color-text-secondary);
  }

  .who-we-help .location-sectors {
    margin-block-start: 1.5rem;
  }

  .who-we-help-quote {
    margin-block-start: 1.75rem;
    padding-block-start: 1.75rem;
    border-block-start: 1px solid var(--color-border);
    font-size: var(--text-lead);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.5;
  }

  .prose { max-width: 42rem; }

  .prose h2 {
    font-size: var(--text-h2-sm);
    margin-block: 2.5rem 1rem;
  }
  .prose h2:first-of-type { margin-block-start: 0; }

  .prose p { margin-block-end: 1.1rem; line-height: 1.7; }

  .prose ul {
    list-style: disc;
    padding-inline-start: 1.25rem;
    margin-block-end: 1.1rem;
  }
  .prose li { margin-block-end: 0.6rem; line-height: 1.6; color: var(--color-text-secondary); }
  .prose li strong { color: var(--color-text); }

  .prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.15em; }

  .prose code {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 0.85em;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 0.3rem;
    padding: 0.1rem 0.4rem;
  }

  .prose-disclaimer {
    font-size: var(--text-sm);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
  }

  .section-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    text-align: center;
    max-width: 36rem;
    margin-inline: auto;
  }

  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(2.5rem, 2rem + 3vw, 5rem);
    align-items: start;
  }

  @media (max-width: 55rem) {
    .contact-grid { grid-template-columns: 1fr; }
  }

  /* -- About split (Nosotros: "Por qué existimos") -- */
  .about-split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(2.5rem, 2rem + 3vw, 5rem);
    align-items: center;
  }
  .about-split .prose { max-width: none; }

  .about-illustration {
    margin: 0;
    padding: 0;
  }

  @media (max-width: 55rem) {
    .about-split { grid-template-columns: 1fr; }
    .about-illustration { max-width: 24rem; margin-inline: auto; }
  }

  .about-illustration canvas {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 400 / 340;
  }

  .footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 2.5rem;
  }
}

/* ---------------------------------------------------------------- */
/* 5. Components                                                     */
/* ---------------------------------------------------------------- */
@layer components {

  /* -- Header / nav -- */
  .site-header {
    position: fixed;
    inset-block-start: 1.25rem;
    inset-inline: 0;
    z-index: 50;
    inline-size: var(--wrap);
    margin-inline: auto;
    border-radius: var(--radius-full);
    background: var(--nav-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight);
    transition: border-radius 0.3s var(--ease-out);
  }

  .site-header.is-open { border-radius: var(--radius-lg); }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    block-size: 3.75rem;
    padding-inline: 1.5rem 0.4rem;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
  }

  .brand-mark {
    display: inline-block;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    padding: 0.3rem;
    border-radius: 0.6rem;
    background: light-dark(transparent, #ffffff);
    object-fit: contain;
  }

  .brand-name {
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
  }
  .brand-name em { font-style: normal; color: var(--color-text-secondary); font-weight: 500; }

  .main-nav {
    display: flex;
    gap: 2.25rem;
    font-size: var(--text-sm);
    font-weight: 500;
  }
  .main-nav a { color: var(--color-text-secondary); transition: color 0.15s var(--ease-out); }
  .main-nav a:hover { color: var(--color-text); }

  .header-actions { display: flex; align-items: center; gap: 1rem; }

  .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    /* Whole pixels, not 0.3rem (4.8px): a fractional gap throws the three
       centered lines off whole-pixel alignment, so some land crisp and
       others get anti-aliased — one line ends up reading thicker/wider
       than the rest even though all three share the same CSS width. */
    gap: 5px;
    inline-size: 2.25rem;
    block-size: 2.25rem;
  }
  .nav-toggle span {
    inline-size: 100%;
    block-size: 2px;
    background: var(--color-text);
    border-radius: 1px;
    transition: transform 0.25s var(--ease-out), opacity 0.2s var(--ease-out);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .mobile-nav {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.25rem 1.25rem 1.25rem;
    border-block-start: 1px solid var(--color-border);
    margin-inline: 0.75rem;
  }
  .mobile-nav a { padding-block: 0.75rem; font-weight: 500; }
  .mobile-nav .btn { margin-block-start: 0.5rem; }

  .site-header.is-open .mobile-nav { display: flex; }

  @media (max-width: 78rem) {
    .main-nav { display: none; }
    .header-actions .btn-sm { display: none; }
    .nav-toggle { display: flex; }

    /* The 0.4rem end-padding above is tuned for the "Solicitar
       asesoramiento" button's edge, not the hamburger icon: on the pill's
       curved cap that tiny padding reads as an odd gap next to the icon
       rather than flush. Give the icon more room to sit away from the
       curve instead. */
    .header-inner { padding-inline-end: 1.25rem; }
  }

  /* -- Buttons -- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.35rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: var(--text-sm);
    min-block-size: 2.75rem;
    transition: transform 0.15s var(--ease-out), background 0.15s var(--ease-out), opacity 0.15s var(--ease-out);
    white-space: nowrap;
  }
  .btn:active { transform: scale(0.97); }

  .btn-primary {
    background: var(--color-text);
    color: var(--color-bg);
  }
  .btn-primary:hover { opacity: 0.85; }

  .btn-ghost {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
  }
  .btn-ghost:hover { background: var(--color-bg-elevated); }

  .btn-lg { padding: 0.85rem 1.75rem; font-size: var(--text-base); min-block-size: 3.25rem; }
  .btn-sm { padding: 0.5rem 1.1rem; font-size: var(--text-xs); min-block-size: 2.25rem; }
  .btn-block { inline-size: 100%; }

  @media (pointer: coarse) {
    .btn { min-block-size: 3rem; }
  }

  /* -- Hero -- */
  .hero {
    position: relative;
    padding-block-start: calc(var(--header-offset) + clamp(5rem, 4rem + 6vw, 9rem));
    padding-block-end: clamp(4rem, 3rem + 4vw, 6rem);
    overflow: hidden;
  }

  .hero-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    overflow: hidden;
  }

  .hero-glow::before {
    content: "";
    position: absolute;
    inset: -4%;
    background-image: url("hero-bg.webp");
    background-size: cover;
    background-position: center 55%;
    filter: blur(4px) saturate(0.95);
    opacity: 0.55;
  }

  .hero-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(40rem 26rem at 14% 0%, color-mix(in oklab, var(--blue) 18%, transparent), transparent 70%),
      radial-gradient(36rem 24rem at 90% 2%, color-mix(in oklab, var(--violet) 15%, transparent), transparent 70%),
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--color-bg) 42%, transparent) 0%,
        color-mix(in oklab, var(--color-bg) 42%, transparent) 76%,
        var(--color-bg) 100%
      );
  }

  /* -- Reusable colored glow, sits behind glass elements so the blur has
     something to blur -- */
  .section-glow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
  }
  .section-glow::before,
  .section-glow::after {
    content: "";
    position: absolute;
    inline-size: 46rem;
    block-size: 46rem;
    border-radius: 50%;
    filter: blur(30px);
  }
  .section-glow::before {
    inset-block-start: 2rem;
    inset-inline-start: -12rem;
    background: radial-gradient(circle, color-mix(in oklab, var(--blue) 26%, transparent), transparent 70%);
  }
  .section-glow::after {
    inset-block-start: 16rem;
    inset-inline-end: -16rem;
    background: radial-gradient(circle, color-mix(in oklab, var(--violet) 24%, transparent), transparent 70%);
  }

  .hero-inner { max-width: 50rem; }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-block-end: 1.4rem;
  }

  .eyebrow::before {
    content: "";
    display: inline-block;
    inline-size: 0.4rem;
    block-size: 0.4rem;
    border-radius: 50%;
    background: currentColor;
  }

  .hero-lead {
    margin-block-start: 1.5rem;
    font-size: var(--text-lead);
    max-width: 40rem;
    line-height: 1.6;
    color: light-dark(#3c3c40, #d4d4d8);
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-block-start: 2.5rem;
  }

  /* -- Pillars -- */
  .pillar { border-block-start: 1px solid var(--color-border); padding-block-start: 1.5rem; }
  .pillar-num {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: 0.04em;
    margin-block-end: 0.75rem;
  }
  .pillar h3 { margin-block-end: 0.5rem; }

  /* -- Glass card -- */
  .glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-highlight);
  }

  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .glass,
    .principle-icon {
      --glass-bg: light-dark(#ffffff, #1c1c1e);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  .card {
    border-radius: var(--radius-lg);
    padding: 1.85rem;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  }
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

  .card-icon {
    display: inline-grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 0.85rem;
    background: color-mix(in oklab, var(--color-accent) 12%, transparent);
    color: var(--color-accent);
    font-size: 1.25rem;
    margin-block-end: 1.1rem;
  }

  .card h3 { margin-block-end: 0.6rem; }
  .card p { font-size: var(--text-base); }

  /* -- Testimonials -- */
  .testimonial-columns {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-block-start: clamp(2.5rem, 2rem + 2vw, 4rem);
    max-block-size: 44rem;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  }

  .testimonial-col {
    inline-size: min(21rem, 100%);
  }

  /* Below 48rem only the single base column shows (--md/--lg columns are
     hidden), so let it fill the wrap's full width instead of capping at
     21rem — otherwise the cards read as narrower than the header above them. */
  @media (max-width: 48rem) {
    .testimonial-col { inline-size: 100%; }
  }

  .testimonial-col--md,
  .testimonial-col--lg {
    display: none;
  }

  @media (min-width: 52rem) {
    .testimonial-col--md { display: block; }
  }
  @media (min-width: 72rem) {
    .testimonial-col--lg { display: block; }
  }

  .testimonial-track {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    animation: testimonial-scroll var(--duration, 32s) linear infinite;
  }

  .testimonial-track:hover,
  .testimonial-track:focus-within {
    animation-play-state: paused;
  }

  @keyframes testimonial-scroll {
    to { translate: 0 -50%; }
  }

  .testimonial-card blockquote { margin: 0; }

  .testimonial-card p {
    font-size: var(--text-base);
    line-height: 1.6;
    color: light-dark(#3c3c40, #d4d4d8);
  }

  .testimonial-card footer {
    margin-block-start: 1.25rem;
  }

  .testimonial-card cite {
    display: block;
    font-style: normal;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-text);
  }

  .testimonial-card footer span {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin-block-start: 0.15rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .testimonial-track { animation-play-state: paused; }
  }

  /* -- Tools marquee (Nosotros) -- */
  .tools-marquee {
    position: relative;
    margin-block-start: clamp(2.5rem, 2rem + 2vw, 4rem);
    padding-block: clamp(2rem, 1.6rem + 1.6vw, 3rem);
    overflow: hidden;
  }

  /* The certificados section ends right on the marquee (no closing prose
     below it), so its own bottom padding on .section would otherwise stack
     with the next section's top padding into a much bigger gap than reads
     as intentional. */
  #certificados { padding-block-end: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

  /* Same stacking issue at the end of "Nuestro stack": the marquee's own
     bottom padding plus the section's own bottom padding plus the CTA
     section's top padding added up to a much bigger gap than the spacing
     used between other sections on the page. Trimmed further (and on the
     CTA section's own top padding below) since even the first pass still
     read as too much space before "Hablemos sobre el próximo paso...". */
  #herramientas { padding-block-end: clamp(0.75rem, 0.5rem + 1vw, 1.5rem); }
  #herramientas + .section-cta { padding-block-start: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

  .tools-dotgrid {
    position: absolute;
    inset: 0;
    opacity: 0.6;
    background-image: radial-gradient(circle at center, color-mix(in oklab, var(--color-text) 16%, transparent) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
  }

  .tools-rows {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  }

  .tools-track {
    display: flex;
    align-items: center;
    inline-size: max-content;
    gap: 1.25rem;
    animation: tools-scroll-left 90s linear infinite;
  }

  .tools-track--reverse {
    animation-name: tools-scroll-right;
  }

  .tools-track:hover,
  .tools-track:focus-within {
    animation-play-state: paused;
  }

  @keyframes tools-scroll-left {
    to { translate: -50% 0; }
  }
  @keyframes tools-scroll-right {
    from { translate: -50% 0; }
    to { translate: 0 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .tools-track { animation-play-state: paused; }
  }

  .tool-badge {
    display: inline-grid;
    place-items: center;
    inline-size: 4rem;
    block-size: 4rem;
    border-radius: 50%;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
  }
  .tool-badge svg { inline-size: 1.75rem; block-size: 1.75rem; }

  .tool-badge--n8n svg { fill: #ea4b71; }
  .tool-badge--openai svg { fill: var(--color-text); }
  .tool-badge--claude svg { fill: #d97757; }
  .tool-badge--google svg { fill: #4285f4; }
  .tool-badge--make svg { fill: #6d00cc; }
  .tool-badge--hostinger svg { fill: #673de6; }
  .tool-badge--microsoft svg { fill: #0078d4; }
  .tool-badge--calendly svg { fill: #006bff; }
  .tool-badge--zoom svg { fill: #0b5cff; }
  .tool-badge--googlemeet svg { fill: #00897b; }
  .tool-badge--googlesheets svg { fill: #34a853; }
  .tool-badge--supabase svg { fill: #3fcf8e; }
  .tool-badge--postgresql svg { fill: #4169e1; }
  .tool-badge--docker svg { fill: #2496ed; }
  .tool-badge--dokploy svg { fill: var(--color-text); }
  .tool-badge--github svg { fill: var(--color-text); }
  .tool-badge--react svg { fill: #61dafb; }
  .tool-badge--javascript svg { fill: #f7df1e; }
  .tool-badge--css3 svg { fill: #1572b6; }
  .tool-badge--zapier svg { fill: #ff4f00; }
  .tool-badge--whatsapp svg { fill: #25d366; }
  .tool-badge--discord svg { fill: #5865f2; }
  .tool-badge--telegram svg { fill: #26a5e4; }
  .tool-badge--linkedin svg { fill: #0a66c2; }
  .tool-badge--instagram svg { fill: #ff0069; }
  .tool-badge--x svg { fill: var(--color-text); }
  .tool-badge--facebook svg { fill: #0866ff; }
  .tool-badge--meta svg { fill: #0467df; }
  .tool-badge--notion svg { fill: var(--color-text); }
  .tool-badge--asana svg { fill: #f06a6a; }
  .tool-badge--gmail svg { fill: #ea4335; }
  .tool-badge--canva svg { fill: #00c4cc; }
  .tool-badge--appstore svg { fill: #0d96f6; }
  .tool-badge--googleplay svg { fill: var(--color-text); }
  .tool-badge--capcut svg { fill: var(--color-text); }
  .tool-badge--airtable svg { fill: #18bfff; }
  .tool-badge--shopify svg { fill: #7ab55c; }
  .tool-badge--stripe svg { fill: #635bff; }
  .tool-badge--paypal svg { fill: #002991; }
  .tool-badge--googlecalendar svg { fill: #4285f4; }
  .tool-badge--mailchimp svg { fill: #ffe01b; }
  .tool-badge--googleforms svg { fill: #7248b9; }
  .tool-badge--visualstudiocode svg { fill: #007acc; }
  .tool-badge--claudecode svg { fill: #d97757; }
  .tool-badge--googledrive svg { fill: #4285f4; }
  .tool-badge--dropbox svg { fill: #0061ff; }
  .tool-badge--amazonaws svg { fill: #ff9900; }
  .tool-badge--googlegemini svg { fill: #8e75b2; }
  .tool-badge--deepseek svg { fill: #5786fe; }
  .tool-badge--midjourney svg { fill: none; stroke: var(--color-text); }

  /* -- Certification / recognition logos (Nosotros) -- */
  .cert-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    block-size: 4.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-lg);
    /* Fixed white, not theme-aware: several of these third-party logos are
       flat PNG/JPG files with their own opaque (often white) background
       baked in, so the card needs to stay white in dark mode too or those
       logos would show an ugly box. */
    background: #ffffff;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
  }
  .cert-badge img {
    display: block;
    max-inline-size: 9rem;
    max-block-size: 2.75rem;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* -- Process -- */
  .process-index {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 0.02em;
    padding-block-start: 0.15rem;
  }
  .process-step h3 { margin-block-end: 0.4rem; }
  .process-step p { font-size: var(--text-base); }

  /* -- Contact -- */
  .contact-email {
    display: inline-block;
    margin-block-start: 1.75rem;
    font-weight: 600;
    color: var(--color-accent);
    border-block-end: 1px solid color-mix(in oklab, var(--color-accent) 40%, transparent);
    padding-block-end: 0.15rem;
  }

  .contact-form {
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
    display: grid;
    gap: 1.15rem;
  }

  .form-row { display: grid; gap: 0.5rem; }
  .form-row label { font-size: var(--text-sm); font-weight: 600; }

  .form-row input,
  .form-row select,
  .form-row textarea {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 0.7rem;
    padding: 0.75rem 0.9rem;
    /* iOS Safari auto-zooms the page on focus if a field's font-size
       computes under 16px — 1rem (not --text-base, which is 15.2px)
       keeps it at exactly the threshold so tapping into a field never
       triggers that zoom. */
    font-size: 1rem;
    min-block-size: 2.75rem;
    resize: vertical;
    transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out);
  }
  .form-row textarea { min-block-size: 6rem; }

  .form-row select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236e6e73' stroke-width='1.6'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.1rem;
    padding-inline-end: 2.25rem;
  }

  /* Where supported (Chrome/Edge 135+), style the dropdown panel itself to
     match the site instead of the plain OS list. Everywhere else this is
     silently ignored and the select falls back to the native picker. */
  @supports (appearance: base-select) {
    .form-row select,
    .form-row select::picker(select) {
      appearance: base-select;
    }

    .form-row select {
      background-image: none;
    }

    .form-row select::picker-icon {
      color: var(--color-text-secondary);
      transition: rotate 0.15s var(--ease-out);
    }
    .form-row select:open::picker-icon { rotate: 180deg; }

    .form-row select::picker(select) {
      margin-block-start: 0.4rem;
      padding: 0.4rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-bg-elevated);
      box-shadow: var(--shadow-lg);
    }

    .form-row select option {
      margin-block: 1px;
      padding: 0.6rem 0.7rem;
      border-radius: 0.5rem;
      font-size: var(--text-base);
      color: var(--color-text);
      transition: background 0.1s var(--ease-out);
    }

    /* Only :hover carries a fill — the browser also focuses an option
       automatically the instant the panel opens (for keyboard users),
       and giving that the same fill as :hover made it look like two
       rows were "selected" at once. Keyboard focus gets a ring instead,
       kept separate from the fill that marks the current value. */
    .form-row select option:hover {
      background: color-mix(in oklab, var(--color-accent) 10%, transparent);
    }

    .form-row select option:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: -2px;
    }

    .form-row select option:checked {
      background: color-mix(in oklab, var(--color-accent) 14%, transparent);
      font-weight: 600;
    }

    .form-row select option::checkmark {
      color: var(--color-accent);
    }
  }

  .form-row input:focus,
  .form-row select:focus,
  .form-row textarea:focus { border-color: var(--color-accent); }

  .form-row input:user-invalid,
  .form-row select:user-invalid,
  .form-row textarea:user-invalid {
    border-color: #d93025;
  }

  .form-status {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    min-block-size: 1.2em;
  }
  .form-status[data-state="ok"] { color: #1a8046; }
  .form-status[data-state="error"] { color: #d93025; }

  /* -- Diagnostic wizard -- */
  .diagnostic-section {
    padding-block-start: calc(var(--header-offset) + clamp(2.5rem, 2rem + 2vw, 4rem));
  }

  .diagnostic-shell {
    position: relative;
    max-width: 42rem;
    margin-inline: auto;
    padding: clamp(2rem, 1.7rem + 1.5vw, 3rem);
    border-radius: var(--radius-lg);
  }

  .diagnostic-progress {
    /* Inset from the shell's edges rather than flush with them — a 24px
       card corner and a 3px-tall bar don't share a radius that looks
       right together, so this reads as its own pill-shaped bar instead
       of a (failed) attempt to trace the card's corner curve. */
    position: absolute;
    inset-block-start: 1rem;
    inset-inline: 1.5rem;
    block-size: 4px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
  }
  /* Nothing to show progress toward yet on the intro screen — an empty
     track there just reads as a stray line, not a progress bar. */
  #diagnostic-shell[data-step="intro"] .diagnostic-progress {
    display: none;
  }
  .diagnostic-progress-bar {
    block-size: 100%;
    width: 0%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg in oklch, var(--blue), var(--violet));
    transition: width 0.4s var(--ease-out);
  }

  .diagnostic-step {
    display: none;
    opacity: 0;
    translate: 0 0.75rem;
  }
  .diagnostic-step.is-active {
    display: block;
    animation: diagnostic-step-in 0.45s var(--ease-out) forwards;
  }
  @keyframes diagnostic-step-in {
    from { opacity: 0; translate: 0 0.75rem; }
    to { opacity: 1; translate: 0 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .diagnostic-step.is-active { animation: none; opacity: 1; translate: 0 0; }
  }

  .diagnostic-step .eyebrow { margin-block-end: 1rem; }
  .diagnostic-step h1 { font-size: var(--text-h2); }
  .diagnostic-step h2 { margin-block-end: 0.5rem; }
  .diagnostic-step .hero-lead { max-width: none; margin-block-start: 1rem; }
  .diagnostic-step .btn { margin-block-start: 1.75rem; }

  /* Question text is dynamic and can run long — keep it well below the
     section h2 size so a whole question + its options fits on screen. */
  #question-text {
    font-size: var(--text-h2-sm);
    line-height: 1.3;
    margin-block-end: 0.25rem;
  }

  .diagnostic-fineprint {
    margin-block-start: 1rem;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
  }

  .diagnostic-step-label {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-block-end: 0.75rem;
  }

  .diagnostic-step-hint {
    margin-block: 0.5rem 0;
    font-size: var(--text-sm);
  }

  .diagnostic-fieldset {
    border: 0;
    padding: 0;
    margin: 1.75rem 0 0;
  }
  .diagnostic-fieldset legend {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
    padding: 0;
    margin-block-end: 0.9rem;
  }

  .diagnostic-field-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem;
  }
  @media (max-width: 32rem) {
    .diagnostic-field-grid { grid-template-columns: 1fr; }
  }

  .diagnostic-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-start: 2rem;
  }
  .diagnostic-nav--result {
    flex-direction: column;
    gap: 1rem;
  }

  .diagnostic-back {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    padding: 0.5rem;
    transition: color 0.15s var(--ease-out);
  }
  .diagnostic-back:hover { color: var(--color-text); }

  .btn.is-sent {
    color: #1a8046;
    border-color: color-mix(in oklab, #1a8046 35%, var(--color-border));
    background: color-mix(in oklab, #1a8046 8%, transparent);
    cursor: default;
  }
  .btn.is-sent:hover { opacity: 1; background: color-mix(in oklab, #1a8046 8%, transparent); }

  .diagnostic-resend {
    display: block;
    margin: 0.85rem auto 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: color 0.15s var(--ease-out);
  }
  .diagnostic-resend:hover { color: var(--color-text); }

  .diagnostic-options {
    display: grid;
    gap: 0.75rem;
    margin-block-start: 1.5rem;
  }

  .diagnostic-option {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    font-size: var(--text-base);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out), transform 0.15s var(--ease-out);
  }
  .diagnostic-option:hover { border-color: color-mix(in oklab, var(--color-accent) 45%, var(--color-border)); }
  .diagnostic-option:active { transform: scale(0.99); }

  .diagnostic-option-input {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    accent-color: var(--color-accent);
    flex-shrink: 0;
  }

  .diagnostic-option.is-selected {
    border-color: var(--color-accent);
    background: color-mix(in oklab, var(--color-accent) 8%, var(--color-bg-elevated));
  }

  /* -- Result -- */
  .diagnostic-gauge-wrap {
    position: relative;
    inline-size: 9rem;
    block-size: 9rem;
    margin-inline: auto;
    margin-block-end: 1.5rem;
  }

  .diagnostic-gauge { inline-size: 100%; block-size: 100%; transform: rotate(-90deg); }

  .diagnostic-gauge-track {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 9;
  }

  .diagnostic-gauge-fill {
    fill: none;
    stroke: url(#gaugeGradient);
    stroke-width: 9;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.1s var(--ease-out);
  }
  @media (prefers-reduced-motion: reduce) {
    .diagnostic-gauge-fill { transition: none; }
  }

  .diagnostic-gauge-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .diagnostic-gauge-value {
    font-size: var(--text-h2-sm);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text);
  }
  .diagnostic-gauge-caption {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  #result-step { text-align: center; }
  #result-step .diagnostic-options,
  #result-step .diagnostic-step-hint { text-align: start; }

  .diagnostic-level-eyebrow {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    margin-block-end: 0.5rem;
  }

  .diagnostic-recommendation {
    margin-block-start: 1rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--color-accent) 8%, transparent);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 500;
    text-align: start;
  }

  /* -- Footer -- */
  .site-footer {
    border-block-start: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    padding-block: clamp(3rem, 2.5rem + 2vw, 4.5rem) 2rem;
  }

  .footer-top {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 2.5rem;
    padding-block-end: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  }

  @media (max-width: 52rem) {
    .footer-top { grid-template-columns: repeat(2, 1fr); }
    .footer-brand-col { grid-column: 1 / -1; }
  }

  @media (max-width: 30rem) {
    .footer-top { grid-template-columns: 1fr; }
  }

  .footer-brand { opacity: 0.9; }

  .footer-tagline {
    margin-block-start: 1rem;
    max-width: 22rem;
    font-size: var(--text-sm);
    line-height: 1.55;
  }

  .footer-social {
    display: flex;
    gap: 0.6rem;
    margin-block-start: 1.5rem;
  }

  .social-icon {
    display: inline-grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    opacity: 0.55;
    cursor: default;
  }

  .social-icon svg { inline-size: 1rem; block-size: 1rem; }

  .footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .footer-col-title {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text);
    margin-block-end: 0.15rem;
  }

  .footer-col a {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    transition: color 0.15s var(--ease-out);
  }
  .footer-col a:hover { color: var(--color-text); }

  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block-start: 1.75rem;
    border-block-start: 1px solid var(--color-border);
  }

  .footer-note, .footer-email { font-size: var(--text-sm); color: var(--color-text-secondary); }
  .footer-email:hover { color: var(--color-text); }

  .footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
  }
  .footer-bottom-links a {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    transition: color 0.15s var(--ease-out);
  }
  .footer-bottom-links a:hover { color: var(--color-text); }

  /* -- Splash screen --
     Configure via custom properties. --splash-bg expects a solid, flat
     color (not light-dark()) since the logo mark is a fixed brand color
     (#2B3741) and needs a light backdrop to stay legible without a card.
     If you switch --splash-bg to a dark value, also add
     `filter: invert(1) brightness(1.6)` to .splash-logo so the mark stays
     visible against it. */
  #splash-screen {
    --splash-bg: #fbfbfd;
    --splash-logo-size: 5rem;
    --splash-zoom-scale: 38;
    --splash-duration: 800ms;
    --splash-ease: cubic-bezier(0.1, 0.8, 0.3, 1);

    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: var(--splash-bg);
    /* Background fade trails the logo's own anticipation dip (see
       splash-zoom below) so the whole screen dissolves once the zoom
       actually kicks off, instead of fading uniformly with it. */
    transition: opacity calc(var(--splash-duration) * 0.7) linear calc(var(--splash-duration) * 0.3);
  }

  #splash-screen.is-exiting {
    opacity: 0;
  }

  #splash-screen.is-hidden {
    visibility: hidden;
    display: none;
    pointer-events: none;
  }

  .splash-logo-wrap {
    display: grid;
    place-items: center;
  }

  .splash-logo {
    inline-size: var(--splash-logo-size);
    block-size: var(--splash-logo-size);
    object-fit: contain;
    scale: 1;
    opacity: 1;
    will-change: transform, opacity;
  }

  /* Anticipation dip (0% -> 30%) then a massive blast past the viewport
     edges (30% -> 100%), fading out as it grows so it reads as flying
     toward the viewer rather than just a giant flat shape. */
  @keyframes splash-zoom {
    0% { scale: 1; opacity: 1; }
    30% { scale: 0.75; opacity: 1; }
    100% { scale: var(--splash-zoom-scale); opacity: 0; }
  }

  #splash-screen.is-exiting .splash-logo {
    animation: splash-zoom var(--splash-duration) var(--splash-ease) forwards;
  }

  @media (prefers-reduced-motion: reduce) {
    #splash-screen { --splash-duration: 200ms; }
    .splash-logo { transition: opacity 200ms ease; }
    #splash-screen.is-exiting .splash-logo { animation: none; opacity: 0; scale: 1; }
  }
}

/* ---------------------------------------------------------------- */
/* 6. Scroll reveal + reduced motion                                 */
/* ---------------------------------------------------------------- */
@layer utilities {
  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      @keyframes reveal-in {
        from { opacity: 0; translate: 0 1.25rem; }
      }

      .reveal {
        animation: reveal-in 0.6s var(--ease-out) both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
      }
    }

    @supports not ((animation-timeline: view()) and (animation-range: entry)) {
      .reveal {
        opacity: 0;
        translate: 0 1.25rem;
        transition: opacity 0.6s var(--ease-out), translate 0.6s var(--ease-out);
      }
      .reveal.in-view {
        opacity: 1;
        translate: 0 0;
      }
    }
  }
}