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

/* ============================= RESET ============================= */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  img, picture { max-width: 100%; display: block; }
  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: none; cursor: pointer; }
  input, textarea { font: inherit; }
}

/* ============================= TOKENS ============================= */
@layer tokens {
  :root {
    color-scheme: dark;

    /* Tier 1 — literal tokens sampled from the CT Caraguatá brand deck */
    --navy-950: #030d1e;
    --navy-900: #061530;
    --navy-800: #0a2047;
    --navy-700: #0e2c5c;
    --navy-600: #14396f;
    --blue-500: #1b4a86;
    --cyan-500: #00a6d2;
    --cyan-400: #2fc2e8;
    --cyan-300: #7edcf3;
    --white: #ffffff;
    --ink-100: #eef5fc;
    --ink-300: #b9cbe0;
    --ink-500: #7f95b3;
    --gold-400: #e8b64a;

    /* Tier 2 — semantic tokens */
    --color-bg: var(--navy-900);
    --color-bg-deep: var(--navy-950);
    --color-surface: var(--navy-800);
    --color-surface-raised: var(--navy-700);
    --color-accent: var(--cyan-500);
    --color-accent-strong: var(--cyan-400);
    --color-text: var(--ink-100);
    --color-text-muted: var(--ink-300);
    --color-text-faint: var(--ink-500);
    --color-border: color-mix(in oklab, var(--cyan-500) 25%, transparent);

    /* Tier 3 — UI tokens */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --shadow-soft: 0 20px 60px -20px rgb(0 10 30 / 0.6);
    --shadow-lift: 0 30px 80px -24px rgb(0 10 30 / 0.75);
    --ease-out: cubic-bezier(.16,.8,.3,1);

    --font-display: "Oswald", "Arial Narrow", sans-serif;
    --font-body: "Inter", system-ui, sans-serif;

    --content-max: 1240px;
    --gutter: clamp(1.25rem, 4vw, 3rem);

    --in-oklab: ;
    --in-oklch: ;
  }

  @supports (background: linear-gradient(in oklab, white, black)) {
    :root {
      --in-oklab: in oklab;
      --in-oklch: in oklch;
    }
  }

  @property --animation-reduced {
    syntax: "*";
    inherits: false;
    initial-value: none;
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: var(--animation-reduced) !important; }
  }
}

/* ============================= BASE ============================= */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
  }

  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: clip;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.06;
    text-wrap: balance;
  }

  p { text-wrap: pretty; }

  ::selection {
    background: var(--color-accent);
    color: var(--navy-950);
  }

  :focus-visible {
    outline: 2px solid var(--cyan-300);
    outline-offset: 3px;
  }

  a:focus-visible, button:focus-visible {
    border-radius: var(--radius-sm);
  }

  scrollbar-color: var(--cyan-500) transparent;
  scrollbar-width: thin;
}

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

  section {
    position: relative;
    padding-block: clamp(4rem, 9vw, 7.5rem);
  }

  .section-head {
    max-width: 62ch;
    margin-block-end: clamp(2rem, 5vw, 3.5rem);
  }
  .section-head.center { max-width: 46rem; margin-inline: auto; text-align: center; }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    color: var(--cyan-400);
    margin-block-end: 0.9rem;
  }
  .eyebrow::before {
    content: "";
    width: 1.6rem;
    height: 2px;
    background: var(--cyan-400);
  }

  .section-head h2 {
    font-size: clamp(1.9rem, 4.2vw, 2.9rem);
    color: var(--white);
  }
  .section-head p {
    margin-block-start: 0.9rem;
    color: var(--color-text-muted);
    font-size: 1.05rem;
  }

  .grid-2 {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: 1fr;
  }
  @media (min-width: 860px) {
    .grid-2 { grid-template-columns: 1fr 1fr; align-items: center; }
  }
}

/* ============================= COMPONENTS ============================= */
@layer components {

  /* ---- background texture shared by dark sections ---- */
  .bg-texture {
    background-image:
      radial-gradient(circle at 14px 14px, color-mix(in oklab, var(--cyan-500) 14%, transparent) 1.4px, transparent 0);
    background-size: 28px 28px;
  }

  .bg-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(60% 50% at 80% 0%, color-mix(in oklab, var(--blue-500) 55%, transparent), transparent 70%),
      radial-gradient(50% 40% at 10% 100%, color-mix(in oklab, var(--navy-600) 60%, transparent), transparent 70%);
  }

  /* ---- header ---- */
  .site-header {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 100;
    height: 5.25rem;
    display: flex;
    align-items: center;
    background: color-mix(in oklab, var(--navy-950) 78%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid color-mix(in oklab, var(--cyan-500) 14%, transparent);
  }

  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
    @media (prefers-reduced-motion: no-preference) {
      .site-header {
        animation: header-shrink auto linear both;
        animation-timeline: scroll(root);
        animation-range: 0px 320px;
      }
      @keyframes header-shrink {
        to {
          height: 4rem;
          background: color-mix(in oklab, var(--navy-950) 94%, transparent);
          box-shadow: var(--shadow-soft);
        }
      }
    }
  }

  .site-header.is-compact {
    height: 4rem;
    background: color-mix(in oklab, var(--navy-950) 94%, transparent);
    box-shadow: var(--shadow-soft);
  }

  .site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .brand img { height: 2.5rem; width: auto; }

  .main-nav {
    display: none;
    align-items: center;
    gap: clamp(0.9rem, 2vw, 1.7rem);
  }
  @media (min-width: 980px) {
    .main-nav { display: flex; }
  }
  .main-nav a {
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    padding-block: 0.4rem;
    position: relative;
    transition: color 0.25s var(--ease-out);
  }
  .main-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--cyan-400);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease-out);
  }
  .main-nav a:hover, .main-nav a:focus-visible { color: var(--white); }
  .main-nav a:hover::after, .main-nav a:focus-visible::after { transform: scaleX(1); }

  .header-cta { display: none; }
  @media (min-width: 660px) {
    .header-cta { display: inline-flex; }
  }

  .nav-toggle {
    display: inline-flex;
    width: 2.6rem; height: 2.6rem;
    align-items: center; justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }
  @media (min-width: 980px) { .nav-toggle { display: none; } }

  /* ---- buttons ---- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background 0.3s;
    min-block-size: 2.75rem;
  }
  .btn-primary {
    background: linear-gradient(135deg var(--in-oklch), var(--cyan-400), var(--cyan-500));
    color: var(--navy-950);
    box-shadow: 0 10px 30px -8px color-mix(in oklab, var(--cyan-500) 70%, transparent);
  }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -8px color-mix(in oklab, var(--cyan-500) 80%, transparent); }
  .btn-ghost {
    border: 1px solid color-mix(in oklab, var(--white) 30%, transparent);
    color: var(--white);
    background: color-mix(in oklab, var(--white) 4%, transparent);
  }
  .btn-ghost:hover { background: color-mix(in oklab, var(--white) 12%, transparent); transform: translateY(-2px); }

  /* ---- hero ---- */
  .hero {
    position: relative;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding-block-start: 5.25rem;
    overflow: clip;
  }
  .hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
  }
  .hero-media img {
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .hero-media::after {
    content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg var(--in-oklab), color-mix(in oklab, var(--navy-950) 55%, transparent) 0%, color-mix(in oklab, var(--navy-950) 88%, transparent) 68%, var(--navy-950) 100%),
      linear-gradient(100deg var(--in-oklab), color-mix(in oklab, var(--navy-950) 92%, transparent) 6%, color-mix(in oklab, var(--navy-950) 20%, transparent) 60%);
  }

  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
    @media (prefers-reduced-motion: no-preference) {
      .hero-media img {
        animation: hero-parallax auto linear both;
        animation-timeline: scroll(root);
        animation-range: 0px 90dvh;
      }
      @keyframes hero-parallax {
        from { transform: scale(1.08) translateY(0); }
        to { transform: scale(1.16) translateY(6%); }
      }
    }
  }

  .hero-content { max-width: 44rem; width: 100%; min-width: 0; }

  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--navy-800) 60%, transparent);
    border: 1px solid var(--color-border);
    backdrop-filter: blur(8px);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cyan-300);
    margin-block-end: 1.5rem;
  }
  .hero-badge .dot {
    width: 0.45rem; height: 0.45rem; border-radius: 50%;
    background: var(--cyan-400);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--cyan-400) 30%, transparent);
  }

  .hero h1 {
    font-size: clamp(3rem, 9vw, 6rem);
    color: var(--white);
    letter-spacing: 0.005em;
  }
  .hero h1 span {
    display: block;
    font-size: clamp(1.05rem, 2.4vw, 1.5rem);
    letter-spacing: 0.14em;
    color: var(--cyan-300);
    font-weight: 500;
    margin-block-end: 0.6rem;
  }

  .hero p.lead {
    margin-block-start: 1.4rem;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    color: var(--ink-300);
    max-width: 38rem;
  }

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

  .hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1.4rem;
    margin-block-start: clamp(2.5rem, 6vw, 4rem);
    max-width: 42rem;
    padding-block-start: 2rem;
    border-top: 1px solid var(--color-border);
  }
  .hero-stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: var(--white);
  }
  .hero-stat span {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .scroll-cue {
    position: absolute;
    bottom: clamp(1.2rem, 3vw, 2.2rem);
    left: 50%;
    translate: -50% 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink-300);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .scroll-cue .stick {
    width: 1px; height: 2.4rem;
    background: linear-gradient(var(--in-oklab), var(--cyan-400), transparent);
  }
  @media (prefers-reduced-motion: no-preference) {
    .scroll-cue .stick { animation: cue-pulse 2s ease-in-out infinite; }
    @keyframes cue-pulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
  }

  /* ---- reveal-on-scroll (progressive enhancement) ---- */
  .reveal {
    opacity: 1;
    translate: 0 0;
  }
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @media (prefers-reduced-motion: no-preference) {
      .reveal {
        opacity: 0;
        animation: reveal-in linear both;
        animation-timeline: view();
        animation-range: entry 4% cover 32%;
      }
      @keyframes reveal-in {
        from { opacity: 0; translate: 0 2.2rem; }
        to { opacity: 1; translate: 0 0; }
      }
    }
  }
  .reveal-group > * { animation-delay: calc(var(--i, 0) * 70ms); }

  /* ---- cards ---- */
  .card {
    background: color-mix(in oklab, var(--navy-800) 82%, transparent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3vw, 2.1rem);
  }

  .glass {
    background: color-mix(in oklab, var(--navy-700) 46%, transparent);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid color-mix(in oklab, var(--white) 12%, transparent);
  }

  /* ---- timeline (O Projeto) ---- */
  .timeline { display: grid; gap: 2.2rem; }
  .timeline-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.2rem;
  }
  .timeline-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .timeline-marker .node {
    width: 2.75rem; height: 2.75rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg var(--in-oklch), var(--cyan-500), var(--blue-500));
    color: var(--navy-950);
    font-weight: 700;
    box-shadow: 0 8px 22px -6px color-mix(in oklab, var(--cyan-500) 65%, transparent);
    flex-shrink: 0;
  }
  .timeline-marker .line {
    width: 2px;
    flex: 1;
    margin-block: 0.4rem;
    background: linear-gradient(var(--in-oklab), var(--cyan-500), transparent);
  }
  .timeline-item:last-child .timeline-marker .line { display: none; }
  .timeline-body h3 {
    font-size: 1.15rem;
    color: var(--white);
    margin-block-end: 0.5rem;
  }
  .timeline-body p { color: var(--color-text-muted); }

  /* ---- stat strip ---- */
  .stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .stat-strip .stat {
    background: var(--color-surface);
    padding: 1.6rem 1.4rem;
    text-align: center;
  }
  .stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    background: linear-gradient(135deg var(--in-oklch), var(--white), var(--cyan-300));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .stat span { font-size: 0.82rem; color: var(--color-text-muted); }

  /* ---- athlete cards (Nosso Time) ---- */
  .athlete-grid {
    display: grid;
    gap: 1.6rem;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  }
  .athlete-card {
    container-type: inline-size;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--navy-800);
    box-shadow: var(--shadow-soft);
  }
  .athlete-card img.bg-photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease-out);
  }
  .athlete-card:hover img.bg-photo, .athlete-card:focus-within img.bg-photo { transform: scale(1.06); }
  .athlete-card::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(0deg var(--in-oklab), color-mix(in oklab, var(--navy-950) 96%, transparent) 5%, transparent 62%);
  }
  .athlete-info {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 1.4rem;
    z-index: 1;
  }
  .athlete-info .role {
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cyan-300);
    background: color-mix(in oklab, var(--navy-950) 55%, transparent);
    border: 1px solid var(--color-border);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-pill);
    margin-block-end: 0.6rem;
  }
  .athlete-info h3 { color: var(--white); font-size: 1.4rem; }
  .athlete-info p {
    color: var(--ink-300);
    font-size: 0.86rem;
    margin-block-start: 0.3rem;
  }

  /* ---- profile split (Atletas em evidência) ---- */
  .profile {
    display: grid;
    gap: 2.4rem;
    grid-template-columns: 1fr;
    align-items: end;
  }
  @media (min-width: 780px) {
    .profile { grid-template-columns: minmax(14rem, 20rem) 1fr; }
    .profile.reverse { grid-template-columns: 1fr minmax(14rem, 20rem); }
    .profile.reverse .profile-media { order: 2; }
  }
  .profile-media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(160deg var(--in-oklch), var(--navy-700), var(--navy-900));
    aspect-ratio: 4 / 5;
  }
  .profile-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: bottom;
  }
  .profile-name {
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--white);
    margin-block-end: 1rem;
  }
  .profile-name em {
    display: block;
    font-style: normal;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cyan-400);
    margin-block-end: 0.4rem;
  }
  .achv-cols {
    display: grid;
    gap: 1.6rem;
    grid-template-columns: 1fr;
  }
  @media (min-width: 560px) { .achv-cols { grid-template-columns: 1fr 1fr; } }
  .achv-cols h4 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--white);
    margin-block-end: 0.7rem;
  }
  .achv-cols ul { display: grid; gap: 0.55rem; }
  .achv-cols li {
    position: relative;
    padding-inline-start: 1.2rem;
    color: var(--color-text-muted);
    font-size: 0.92rem;
  }
  .achv-cols li::before {
    content: "";
    position: absolute; left: 0; top: 0.5em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cyan-400);
  }

  /* ---- staff cards ---- */
  .staff-grid {
    display: grid;
    gap: 1.8rem;
    grid-template-columns: 1fr;
  }
  @media (min-width: 780px) { .staff-grid { grid-template-columns: 1fr 1fr; } }
  .staff-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.3rem;
    padding: 1.6rem;
  }
  .staff-card img {
    width: 5.5rem; height: 5.5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid color-mix(in oklab, var(--cyan-500) 55%, transparent);
  }
  .staff-card h3 { color: var(--white); font-size: 1.15rem; }
  .staff-card .role { color: var(--cyan-400); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; margin-block: 0.2rem 0.6rem; }
  .staff-card p { color: var(--color-text-muted); font-size: 0.9rem; }

  /* ---- ranking table ---- */
  .table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
  }
  table.ranking { width: 100%; border-collapse: collapse; min-width: 640px; }
  table.ranking th, table.ranking td {
    padding: 0.85rem 1.1rem;
    text-align: start;
    font-size: 0.92rem;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
  }
  table.ranking thead th {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cyan-300);
    background: var(--color-surface);
    font-size: 0.78rem;
  }
  table.ranking tbody tr { background: color-mix(in oklab, var(--navy-800) 60%, transparent); }
  table.ranking tbody tr.highlight {
    background: color-mix(in oklab, var(--cyan-500) 16%, var(--navy-800));
    box-shadow: inset 3px 0 0 var(--cyan-400);
  }
  table.ranking tbody tr.highlight td { color: var(--white); font-weight: 600; }

  /* ---- goals grid ---- */
  .goal-grid {
    display: grid;
    gap: 1.4rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
  .goal-card { position: relative; padding-block-start: 2.6rem; }
  .goal-num {
    position: absolute;
    top: -0.6rem; left: 1.6rem;
    font-family: var(--font-display);
    font-size: 3.2rem;
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in oklab, var(--cyan-500) 60%, transparent);
    opacity: 0.7;
  }
  .goal-card h3 { color: var(--white); font-size: 1.05rem; margin-block-end: 0.5rem; }
  .goal-card p { color: var(--color-text-muted); font-size: 0.92rem; }

  /* ---- gallery (podium / conquests) ---- */
  .gallery-scroll {
    display: flex;
    gap: 1.1rem;
    overflow-x: auto;
    padding-block-end: 1rem;
    scroll-snap-type: x proximity;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .gallery-scroll figure {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: clamp(11rem, 30vw, 15rem);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    aspect-ratio: 3/4;
    background: var(--navy-800);
  }
  .gallery-scroll img { width: 100%; height: 100%; object-fit: cover; }
  .gallery-scroll figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 0.8rem;
    font-size: 0.78rem;
    color: var(--white);
    background: linear-gradient(0deg var(--in-oklab), color-mix(in oklab, var(--navy-950) 92%, transparent), transparent);
  }

  /* ---- clipping ---- */
  .clip-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
  .clip-card {
    padding: 1.2rem 1.3rem;
    font-size: 0.9rem;
    color: var(--ink-300);
    border-left: 3px solid var(--cyan-500);
  }
  .clip-card strong { display: block; color: var(--white); font-size: 0.98rem; margin-block-end: 0.35rem; }

  /* ---- media return (contrapartidas) ---- */
  .return-grid {
    display: grid;
    gap: 1.4rem;
    grid-template-columns: 1fr;
  }
  @media (min-width: 700px) { .return-grid { grid-template-columns: repeat(3, 1fr); } }
  .return-card { text-align: start; }
  .return-icon {
    width: 3rem; height: 3rem;
    display: grid; place-items: center;
    border-radius: var(--radius-sm);
    background: color-mix(in oklab, var(--cyan-500) 18%, var(--navy-800));
    color: var(--cyan-300);
    margin-block-end: 1rem;
  }
  .return-card h3 { color: var(--white); font-size: 1.05rem; margin-block-end: 0.5rem; }
  .return-card p { color: var(--color-text-muted); font-size: 0.9rem; }
  .return-card .detail { margin-block-start: 0.6rem; font-size: 0.8rem; color: var(--cyan-300); font-weight: 600; }

  /* ---- budget bars ---- */
  .budget-list { display: grid; gap: 1.1rem; }
  .budget-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.4rem 1rem;
    align-items: baseline;
  }
  .budget-row .label { font-size: 0.92rem; color: var(--ink-300); }
  .budget-row .value { font-family: var(--font-display); color: var(--white); font-size: 1.05rem; }
  .budget-bar-track {
    grid-column: 1 / -1;
    height: 10px;
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--white) 8%, transparent);
    overflow: hidden;
    container-type: inline-size;
  }
  .budget-bar-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg var(--in-oklch), var(--cyan-500), var(--cyan-300));
    width: var(--pct, 0%);
    transform-origin: left center;
  }
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @media (prefers-reduced-motion: no-preference) {
      .budget-bar-fill {
        scale: 0 1;
        animation: bar-grow linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 40%;
      }
      @keyframes bar-grow { to { scale: 1 1; } }
    }
  }
  .budget-total {
    margin-block-start: 0.6rem;
    padding-block-start: 1.4rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .budget-total .label { font-family: var(--font-display); text-transform: uppercase; color: var(--white); font-size: 1rem; }
  .budget-total .value { font-family: var(--font-display); font-size: 1.8rem; color: var(--cyan-300); }

  /* ---- pricing / cotas ---- */
  .tier-grid {
    display: grid;
    gap: 1.4rem;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    align-items: stretch;
  }
  .tier-card {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    padding: 1.8rem 1.6rem;
    position: relative;
    transition: transform 0.35s var(--ease-out), border-color 0.35s;
  }
  .tier-card:hover { transform: translateY(-6px); }
  .tier-card.featured {
    border-color: color-mix(in oklab, var(--cyan-400) 60%, transparent);
    background: linear-gradient(165deg var(--in-oklch), color-mix(in oklab, var(--cyan-500) 16%, var(--navy-800)), var(--navy-800));
    box-shadow: var(--shadow-lift);
  }
  .tier-featured-badge {
    position: absolute; top: -0.85rem; left: 1.6rem;
    background: linear-gradient(135deg var(--in-oklch), var(--cyan-400), var(--cyan-500));
    color: var(--navy-950);
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-pill);
  }
  .tier-name { font-size: 1.3rem; color: var(--white); margin-block-end: 0.3rem; }
  .tier-price { font-family: var(--font-display); font-size: clamp(1.4rem, 3cqi, 1.9rem); color: var(--cyan-300); margin-block-end: 0.15rem; }
  .tier-price small { display: block; font-family: var(--font-body); font-size: 0.76rem; color: var(--color-text-faint); font-weight: 400; text-transform: none; letter-spacing: 0; }
  .tier-card ul { margin-block-start: 1.1rem; display: grid; gap: 0.55rem; flex: 1; }
  .tier-card li {
    position: relative;
    padding-inline-start: 1.3rem;
    font-size: 0.86rem;
    color: var(--color-text-muted);
  }
  .tier-card li::before {
    content: "✓";
    position: absolute; left: 0; top: 0;
    color: var(--cyan-400);
    font-size: 0.8rem;
    font-weight: 700;
  }
  .tier-card .btn { margin-block-start: 1.4rem; align-self: stretch; }

  /* ---- final CTA / contato ---- */
  .final-cta {
    border-radius: var(--radius-lg);
    padding: clamp(2.5rem, 6vw, 4rem);
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg var(--in-oklch), var(--navy-700), var(--navy-950));
    border: 1px solid var(--color-border);
  }
  .final-cta h2 { color: var(--white); font-size: clamp(2rem, 4.5vw, 3rem); }
  .final-cta p { color: var(--ink-300); max-width: 42rem; margin-inline: auto; margin-block-start: 1rem; }
  .contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-block-start: 2.2rem;
  }
  .contact-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.3rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: color-mix(in oklab, var(--navy-800) 70%, transparent);
    font-size: 0.9rem;
    transition: border-color 0.3s, transform 0.3s var(--ease-out);
  }
  .contact-pill:hover { border-color: var(--cyan-400); transform: translateY(-2px); }

  .signature {
    margin-block-start: 2.4rem;
    padding-block-start: 1.6rem;
    border-top: 1px solid var(--color-border);
    color: var(--ink-300);
    font-size: 0.92rem;
  }
  .signature strong { display: block; color: var(--white); font-size: 1.05rem; }

  /* ---- mobile nav popover ---- */
  .mobile-nav-sheet {
    position: fixed;
    inset: auto 1rem auto auto;
    top: 4.5rem;
    margin: 0;
    width: min(15rem, 80vw);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: color-mix(in oklab, var(--navy-950) 92%, transparent);
    backdrop-filter: blur(16px);
    padding: 0.75rem;
    box-shadow: var(--shadow-lift);
    transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), display 0.25s allow-discrete;
    opacity: 0;
    transform: translateY(-8px);
  }
  .mobile-nav-sheet:popover-open {
    opacity: 1;
    transform: translateY(0);
  }
  @starting-style {
    .mobile-nav-sheet:popover-open {
      opacity: 0;
      transform: translateY(-8px);
    }
  }
  .mobile-nav-sheet nav { display: grid; gap: 0.2rem; }
  .mobile-nav-sheet a {
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ink-100);
  }
  .mobile-nav-sheet a:hover, .mobile-nav-sheet a:focus-visible {
    background: color-mix(in oklab, var(--cyan-500) 16%, transparent);
    color: var(--white);
  }

  /* ---- footer ---- */
  .site-footer {
    padding-block: 2.5rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
    color: var(--color-text-faint);
    font-size: 0.82rem;
  }
  .site-footer img { height: 1.8rem; margin-inline: auto; margin-block-end: 0.8rem; }
}

/* ============================= UTILITIES ============================= */
@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .center-text { text-align: center; }
  .text-cyan { color: var(--cyan-400); }
  .mt-lg { margin-block-start: clamp(2rem, 5vw, 3.5rem); }
}