/* ============================================================
   3i Academy — Landing page
   Built ON the 3i Residencial Sênior Design System tokens
   (colors · typography · spacing · effects, inlined below for a
   self-contained static deploy). Blue / white / warm-cream.
   Font: Nunito (Google Fonts). Icons: Lucide.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600;1,700&display=swap');

/* ============================================================
   3i Residencial Sênior — COLOR TOKENS
   Warm cream canvas + a trustworthy blue family drawn from the
   logo (#5696DC), the royal marketing bands (#1A4F9A) and the
   deep navy footer (#0E2742). Semantic colors are calm, never loud.
   ============================================================ */
:root {
  /* ---- Brand blue scale (logo → royal → navy) ---- */
  --blue-50:  #EEF4FC;
  --blue-100: #D9E7F7;
  --blue-200: #B3CEEF;
  --blue-300: #87B1E4;
  --blue-400: #5696DC; /* ★ brand primary — the logo blue */
  --blue-500: #2E72C2;
  --blue-600: #1A4F9A; /* ★ royal — marketing bands & primary action */
  --blue-700: #143B72; /* deep royal — gradients, hovers */
  --blue-800: #0E2742; /* ★ navy — footer, CTA overlays, ink */
  --blue-900: #091A2E; /* darkest navy */

  /* ---- Warm sand / cream (the page canvas) ---- */
  --sand-50:  #FCFAF5;
  --sand-100: #F7F3EB; /* ★ page background — cream */
  --sand-200: #EFE8DA; /* alternate band / quiet fills */
  --sand-300: #E3D9C6; /* warm divider on cream */
  --sand-400: #D2C4AA;

  /* ---- Cool neutral ink (text, borders, UI) — faintly blue ---- */
  --ink-900: #0E2742; /* primary text (= navy) */
  --ink-800: #1C3149;
  --ink-700: #2E4257; /* strong body text */
  --ink-600: #455871;
  --ink-500: #5E7186; /* secondary text */
  --ink-400: #889AAC; /* muted / captions */
  --ink-300: #B2BECB; /* disabled ink */
  --ink-200: #D6DEE6; /* borders */
  --ink-150: #E4EAF0; /* hairlines */
  --ink-100: #EEF2F6; /* quiet surface fills */
  --ink-50:  #F5F8FB; /* coolest surface */
  --white:   #FFFFFF;

  /* ---- Semantic (calm, harmonised) ---- */
  --green-600: #2F8F6B; --green-500: #3AA079; --green-100: #E2F1EA;
  --amber-600: #C98A2B; --amber-500: #E0A53D; --amber-100: #FAEFD8;
  --red-600:   #C7493F; --red-500:   #D85F54; --red-100:   #FAE6E3;
  --info-600:  var(--blue-600); --info-100: var(--blue-50);

  /* ============================================================
     SEMANTIC ALIASES — reach for these in product code
     ============================================================ */
  /* Brand */
  --color-brand: var(--blue-400);          /* signature logo blue */
  --color-brand-strong: var(--blue-600);   /* primary action / royal */
  --color-brand-deep: var(--blue-800);     /* navy */
  --color-brand-subtle: var(--blue-50);    /* tint background */
  --color-accent-soft: var(--blue-300);    /* highlight word, lighten on photo */

  /* Surfaces */
  --surface-page: var(--sand-100);         /* the warm cream canvas */
  --surface-page-alt: var(--sand-200);     /* quiet alternating band */
  --surface-card: var(--white);            /* default card */
  --surface-sunken: var(--sand-50);
  --surface-cool: var(--ink-50);           /* cool inset (thumbnails) */
  --surface-brand: var(--blue-600);        /* royal band */
  --surface-brand-gradient: linear-gradient(160deg, var(--blue-600) 0%, var(--blue-700) 60%, var(--blue-800) 100%);
  --surface-inverse: var(--blue-800);      /* navy footer / dark section */
  --surface-tint-blue: var(--blue-50);     /* google-reviews style card */

  /* Text */
  --text-strong: var(--ink-900);           /* headlines */
  --text-body: var(--ink-700);             /* paragraphs */
  --text-muted: var(--ink-500);            /* secondary */
  --text-subtle: var(--ink-400);           /* captions, meta */
  --text-brand: var(--blue-600);           /* links, eyebrows */
  --text-on-brand: var(--white);           /* on royal/navy */
  --text-on-inverse: rgba(255,255,255,.86);/* body on navy */
  --text-on-inverse-soft: rgba(255,255,255,.62);

  /* Borders & lines */
  --border-subtle: var(--ink-150);
  --border-default: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-on-inverse: rgba(255,255,255,.16);
  --divider-warm: var(--sand-300);

  /* States */
  --focus-ring: rgba(86,150,220,.50);
  --overlay-photo: linear-gradient(180deg, rgba(14,39,66,.20) 0%, rgba(14,39,66,.62) 100%); /* @kind color */
  --overlay-photo-side: linear-gradient(90deg, rgba(14,39,66,.78) 0%, rgba(14,39,66,.30) 100%); /* @kind color */

  /* Semantic surfaces/text */
  --success: var(--green-600); --success-surface: var(--green-100);
  --warning: var(--amber-600); --warning-surface: var(--amber-100);
  --danger:  var(--red-600);   --danger-surface:  var(--red-100);
  --info:    var(--info-600);  --info-surface:    var(--info-100);
}


/* ============================================================
   3i Residencial Sênior — TYPOGRAPHY TOKENS
   One warm, highly-legible family: Nunito (rounded, double-storey
   'a', friendly). Display weights are heavy (800/900); body sits
   at 400–700. Legibility for older readers guides the scale —
   generous sizes, open line-height, never below 14px in product.
   (Webfont substituted from the live site — see readme / fonts.css.)
   ============================================================ */
:root {
  /* Families */
  --font-display: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* Type scale (16px base, ~1.25 modular) */
  --text-2xs: 0.6875rem; /* 11 */
  --text-xs:  0.75rem;   /* 12 */
  --text-sm:  0.875rem;  /* 14 — product minimum */
  --text-base:1rem;      /* 16 */
  --text-md:  1.125rem;  /* 18 — comfortable body */
  --text-lg:  1.375rem;  /* 22 */
  --text-xl:  1.75rem;   /* 28 */
  --text-2xl: 2.25rem;   /* 36 */
  --text-3xl: 2.75rem;   /* 44 */
  --text-4xl: 3.5rem;    /* 56 */
  --text-5xl: 4.5rem;    /* 72 */

  /* Line height */
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.22;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tighter: -0.025em; /* big display */
  --tracking-tight: -0.015em;   /* headings */
  --tracking-normal: 0em;
  --tracking-wide: 0.02em;
  --tracking-eyebrow: 0.16em;   /* uppercase labels */

  /* ---- Semantic roles ---- */
  --font-eyebrow-size: var(--text-sm);
  --font-eyebrow-weight: var(--weight-bold);
  --font-eyebrow-tracking: var(--tracking-eyebrow);

  --font-display-family: var(--font-display);
  --font-display-weight: var(--weight-black);   /* hero / big titles */
  --font-display-leading: var(--leading-tight);
  --font-display-tracking: var(--tracking-tight);

  --font-heading-weight: var(--weight-extrabold);
  --font-heading-leading: var(--leading-snug);

  --font-body-family: var(--font-body);
  --font-body-weight: var(--weight-regular);
  --font-body-leading: var(--leading-relaxed);

  --font-label-weight: var(--weight-bold); /* buttons, chips */
}


/* ============================================================
   3i Residencial Sênior — SPACING & LAYOUT TOKENS
   4px base grid. Sections breathe — senior-facing layouts use
   generous vertical rhythm and roomy hit areas (min 44px).
   ============================================================ */
:root {
  --space-0: 0;
  --space-px: 1px;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 2.5rem;   /* 40 */
  --space-8: 3rem;     /* 48 */
  --space-9: 4rem;     /* 64 */
  --space-10: 5rem;    /* 80 */
  --space-11: 6rem;    /* 96 */
  --space-12: 8rem;    /* 128 */

  /* Component rhythm */
  --gap-inline: var(--space-3);     /* icon ↔ label */
  --gap-stack: var(--space-4);      /* paragraph rhythm */
  --gap-card: var(--space-5);       /* inside cards */
  --gap-grid: var(--space-5);       /* between cards */
  --pad-card: var(--space-6);       /* card padding */
  --pad-button-x: var(--space-5);
  --pad-button-y: var(--space-3);

  /* Touch target (accessibility) */
  --target-min: 44px;
  --target-comfortable: 52px;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;
  --container-wide: 1360px;
  --gutter: var(--space-6);
  --section-y: var(--space-11);     /* vertical section padding */
}


/* ============================================================
   3i Residencial Sênior — RADIUS, ELEVATION & MOTION
   Soft, rounded geometry everywhere (echoes the rounded type and
   the friendly logo). Shadows are low, diffuse and navy-tinted —
   never hard or grey. Motion is calm and reassuring: gentle fades
   and eases, no springy bounce.
   ============================================================ */
:root {
  /* ---- Corner radius ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;   /* default card */
  --radius-xl: 24px;   /* feature card / image */
  --radius-2xl: 32px;  /* hero panels */
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Elevation (soft, navy-tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(14,39,66,.06);
  --shadow-sm: 0 2px 8px rgba(14,39,66,.07);
  --shadow-md: 0 10px 24px -8px rgba(14,39,66,.13);
  --shadow-lg: 0 20px 44px -14px rgba(14,39,66,.17);
  --shadow-xl: 0 32px 64px -18px rgba(14,39,66,.22);
  --shadow-brand: 0 14px 30px -10px rgba(26,79,154,.40); /* royal button lift */
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.6);

  /* Focus ring */
  --ring-focus: 0 0 0 3px var(--focus-ring);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --ease-out: cubic-bezier(.16, 1, .3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* @kind other */
  --ease-gentle: cubic-bezier(.33, .7, .3, 1); /* @kind other */

  --duration-fast: 150ms; /* @kind other */
  --duration-base: 240ms; /* @kind other */
  --duration-slow: 400ms; /* @kind other */
  --duration-slower: 640ms; /* @kind other */

  --transition-base: all var(--duration-base) var(--ease-standard);
  --transition-colors: color var(--duration-fast) var(--ease-standard),
                       background-color var(--duration-fast) var(--ease-standard),
                       border-color var(--duration-fast) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;   /* @kind other */
    --duration-base: 0ms;   /* @kind other */
    --duration-slow: 0ms;   /* @kind other */
    --duration-slower: 0ms; /* @kind other */
  }
}


/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--surface-page); color: var(--text-body);
  font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }
[data-lucide] { display: inline-flex; }
:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-xs); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); }
.section { padding: clamp(56px, 8vw, var(--section-y)) 0; }
.section--tight { padding: clamp(40px, 6vw, 72px) 0; }
.band-cream { background: var(--surface-page); }
.band-alt { background: var(--surface-page-alt); }
.band-white { background: var(--surface-card); }
.band-navy { background: var(--surface-inverse); color: var(--text-on-inverse); }
.band-brand { background: var(--surface-brand-gradient); color: #fff; }
.center { text-align: center; }

/* ============================================================
   TYPE HELPERS
   ============================================================ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: var(--weight-extrabold);
  font-size: var(--text-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--text-brand); margin: 0 0 14px;
}
.eyebrow::before { content:""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow--plain::before { display: none; }
.eyebrow--ondark { color: var(--color-accent-soft); }
.display {
  font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight); color: var(--text-strong); margin: 0; text-wrap: balance;
}
.h2 {
  font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: clamp(1.7rem, 3.4vw, var(--text-2xl)); line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight); color: var(--text-strong); margin: 0; text-wrap: balance;
}
.h3 { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-strong); margin: 0; }
.lead { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-muted); margin: 0; }
.blue { color: var(--color-brand-strong); }
.on-navy .h2, .on-navy .display { color: #fff; }
.on-navy .lead { color: var(--text-on-inverse); }
.section-head { max-width: 640px; }
.section-head.center { margin: 0 auto; }
.section-head .h2 { margin-top: 4px; }
.section-head .lead { margin-top: 14px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  --btn-bg: var(--blue-600); --btn-fg: #fff; --btn-bd: var(--blue-600);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-base);
  line-height: 1; text-align: center; white-space: nowrap;
  padding: var(--pad-button-y) var(--space-6); min-height: var(--target-comfortable);
  border-radius: var(--radius-pill); border: 1.5px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg); cursor: pointer;
  transition: var(--transition-colors), transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .ico, .btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { --btn-bg: var(--blue-600); --btn-fg:#fff; --btn-bd: var(--blue-600); box-shadow: var(--shadow-brand); }
.btn--primary:hover { --btn-bg: var(--blue-700); --btn-bd: var(--blue-700); }
.btn--navy { --btn-bg: var(--blue-800); --btn-fg:#fff; --btn-bd: var(--blue-800); }
.btn--navy:hover { --btn-bg: var(--blue-900); --btn-bd: var(--blue-900); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--blue-700); --btn-bd: var(--border-strong); }
.btn--outline:hover { --btn-bg: var(--blue-50); --btn-bd: var(--blue-300); }
.btn--inverse { --btn-bg:#fff; --btn-fg: var(--blue-800); --btn-bd:#fff; }
.btn--inverse:hover { --btn-bg: var(--blue-50); --btn-bd: var(--blue-50); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--blue-700); --btn-bd: transparent; min-height: auto; padding: 8px 10px; }
.btn--ghost:hover { --btn-bg: var(--blue-50); }
.btn--wa { --btn-bg: var(--green-600); --btn-fg:#fff; --btn-bd: var(--green-600); }
.btn--wa:hover { --btn-bg: #26795c; --btn-bd:#26795c; }
.btn--wa-outline { --btn-bg: transparent; --btn-fg: var(--green-600); --btn-bd: var(--green-500); }
.btn--wa-outline:hover { --btn-bg: var(--green-100); }
.btn--lg { font-size: var(--text-md); min-height: 58px; padding: 16px 30px; }
.btn--sm { min-height: 44px; font-size: var(--text-sm); padding: 10px 18px; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.topbar { background: var(--blue-800); color: rgba(255,255,255,.92); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-align: center; padding: 9px 16px; letter-spacing: .01em; }
.topbar b { color: #fff; }
.topbar .dot { color: var(--color-accent-soft); margin: 0 8px; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px var(--space-6); max-width: var(--container-max); margin: 0 auto; }
.nav__links { display: flex; gap: 26px; align-items: center; }
.nav__links a { font-weight: var(--weight-semibold); font-size: var(--text-base); color: var(--text-body); transition: var(--transition-colors); }
.nav__links a:hover { color: var(--text-brand); }
.nav__right { display: flex; align-items: center; gap: 12px; }
.burger { display: none; width: 46px; height: 46px; align-items: center; justify-content: center; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: #fff; color: var(--blue-800); cursor: pointer; }
.burger svg { width: 24px; height: 24px; }
.nav__mobile { display: none; border-top: 1px solid var(--border-subtle); background: #fff; padding: 12px var(--space-6) 20px; }
.nav__mobile.open { display: block; }
.nav__mobile a { display: block; padding: 12px 0; font-weight: var(--weight-semibold); font-size: var(--text-md); color: var(--blue-800); border-bottom: 1px solid var(--border-subtle); }
.nav__mobile .btn { margin-top: 14px; }

/* Brand lockup (graduation-cap + 3i Academy) */
.brand { display: inline-flex; align-items: flex-end; gap: 9px; }
.brand__logo { position: relative; display: inline-block; line-height: 1; }
.brand__cap { position: absolute; top: -13px; left: 6px; color: var(--blue-600); }
.brand__cap svg { width: 30px; height: 30px; }
.brand__3i { font-family: var(--font-display); font-weight: var(--weight-black); font-size: 34px; letter-spacing: -0.02em; color: var(--blue-800); }
.brand__academy { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 15px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--blue-700); padding-bottom: 5px; }
.brand--light .brand__3i, .brand--light .brand__academy { color: #fff; }
.brand--light .brand__cap { color: var(--color-accent-soft); }

/* ============================================================
   HERO
   ============================================================ */
.hero { background: linear-gradient(180deg, var(--sand-50) 0%, var(--surface-page) 100%); overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 48px; align-items: center; padding: clamp(40px,5vw,68px) 0 clamp(48px,6vw,76px); }
.hero__copy { max-width: 560px; }
.hero .display { margin-top: 6px; }
.hero__sub { margin-top: 18px; max-width: 500px; font-size: var(--text-md); color: var(--text-muted); }
.hero__trust { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 26px 0 28px; }
.hero__trust li { display: flex; gap: 10px; align-items: flex-start; font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--text-body); }
.hero__trust .ico { width: 20px; height: 20px; color: var(--blue-500); flex: none; margin-top: 1px; }
.hero__aside { position: relative; min-height: 560px; }
.hero__photo { position: absolute; left: 0; top: 0; bottom: 0; width: 52%; height: 100%; object-fit: cover; object-position: 50% 28%; border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); }
.hero__form { position: absolute; top: 0; right: 0; width: 66%; max-width: 400px; }

/* Lead form card */
.formcard { background: rgba(255,255,255,.97); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 26px; }
.formcard__title { font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--text-strong); margin: 0; }
.formcard__sub { font-size: var(--text-sm); color: var(--text-muted); margin: 8px 0 18px; }
.formcard .note { display:flex; gap:8px; align-items:flex-start; margin-top: 12px; font-size: var(--text-xs); color: var(--text-subtle); }
.formcard .note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--green-600); }

/* ============================================================
   FORMS
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field > span { font-weight: var(--weight-bold); font-size: var(--text-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.input {
  font-family: inherit; font-size: var(--text-base); color: var(--text-strong); background: #fff;
  border: 1.5px solid var(--border-default); border-radius: var(--radius-sm); padding: 12px 14px; width: 100%;
  transition: var(--transition-colors), box-shadow var(--duration-fast) var(--ease-standard);
}
.input::placeholder { color: var(--ink-300); }
.input:focus { outline: none; border-color: var(--blue-400); box-shadow: var(--ring-focus); }
select.input { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E2742' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.hp { position: absolute; left: -9999px; opacity: 0; }

/* ============================================================
   FEATURE ROW (por que)
   ============================================================ */
.features { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 44px; }
.feature { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.feature__ic { width: 60px; height: 60px; border-radius: var(--radius-md); background: var(--blue-50); color: var(--blue-600); display: flex; align-items: center; justify-content: center; }
.feature__ic svg { width: 30px; height: 30px; }
.feature h3 { font-size: var(--text-base); font-weight: var(--weight-extrabold); color: var(--text-strong); font-family: var(--font-display); }
.feature p { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }

/* ============================================================
   CATALOG
   ============================================================ */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 30px auto 8px; }
.tab { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-sm); color: var(--text-body); background: #fff; border: 1.5px solid var(--border-default); border-radius: var(--radius-pill); padding: 10px 18px; min-height: 44px; cursor: pointer; transition: var(--transition-colors); }
.tab:hover { border-color: var(--blue-300); color: var(--text-brand); }
.tab.is-active { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.catalog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 34px; }
.course { display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.course:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.course.is-hidden { display: none; }
.course__media { position: relative; aspect-ratio: 16/10; background: var(--surface-cool); }
.course__media img { width: 100%; height: 100%; object-fit: cover; }
.course__cat { position: absolute; top: 12px; left: 12px; font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--blue-600); padding: 5px 10px; border-radius: var(--radius-pill); }
.course__cat--gold { background: var(--amber-600); color:#fff; }
.course__badge { position: absolute; top: 12px; right: 12px; font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-900); background: var(--amber-500); padding: 5px 10px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
.course__body { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 20px; }
.course__title { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-md); line-height: 1.25; color: var(--text-strong); }
.course__meta { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .03em; text-transform: uppercase; color: var(--text-subtle); margin-top: 8px; }
.course__desc { font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); margin-top: 10px; }
.course__price { margin-top: auto; padding-top: 16px; }
.course__price .big { font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--text-lg); color: var(--blue-600); line-height: 1.1; }
.course__price .small { font-size: var(--text-xs); color: var(--text-muted); margin-top: 3px; }
.course__cta { margin-top: 16px; white-space: normal; height: auto; min-height: 44px; line-height: 1.2; text-align: center; }

/* ============================================================
   SPLIT (lab / cert / generic 2-col)
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,60px); align-items: center; }
.split--media-left { grid-template-columns: 1fr 1fr; }
.shot { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); background: var(--surface-cool); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot--tall { aspect-ratio: 4/5; }
.shot--wide { aspect-ratio: 4/3; }
.minicards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.minicard { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 18px; box-shadow: var(--shadow-xs); }
.minicard .ic { width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--blue-50); color: var(--blue-600); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.minicard .ic svg { width: 22px; height: 22px; }
.minicard h4 { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-base); color: var(--text-strong); margin: 0 0 4px; }
.minicard p { font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); margin: 0; }
.minicards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .minicards--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .minicards--3 { grid-template-columns: 1fr; } }
.on-navy .minicard { background: rgba(255,255,255,.05); border-color: var(--border-on-inverse); }
.on-navy .minicard h4 { color: #fff; }
.on-navy .minicard p { color: var(--text-on-inverse); }
.on-navy .minicard .ic { background: rgba(255,255,255,.1); color: var(--color-accent-soft); }
.compliance { display: flex; gap: 10px; align-items: flex-start; margin-top: 22px; padding: 14px 16px; background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--radius-md); }
.compliance svg { width: 18px; height: 18px; color: var(--blue-600); flex: none; margin-top: 2px; }
.compliance p { font-size: var(--text-sm); line-height: 1.5; color: var(--ink-700); margin: 0; }
.on-navy .compliance { background: rgba(255,255,255,.06); border-color: var(--border-on-inverse); }
.on-navy .compliance p { color: var(--text-on-inverse); }
.on-navy .compliance svg { color: var(--color-accent-soft); }

/* ============================================================
   HOW IT WORKS (steps)
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 44px; counter-reset: step; }
.step { position: relative; }
.step__n { width: 46px; height: 46px; border-radius: var(--radius-circle); background: var(--blue-600); color: #fff; font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--text-md); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-brand); }
.step h4 { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-base); color: var(--text-strong); margin: 16px 0 6px; }
.step p { font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); margin: 0; }

/* ============================================================
   CERTIFICATION cards
   ============================================================ */
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.chip { display: flex; gap: 10px; align-items: center; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 14px 16px; box-shadow: var(--shadow-xs); }
.chip svg { width: 20px; height: 20px; color: var(--blue-600); flex: none; }
.chip span { font-weight: var(--weight-bold); font-size: var(--text-sm); color: var(--text-strong); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.testi { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.testi__media { aspect-ratio: 3/2; background: var(--surface-cool); }
.testi__media img { width: 100%; height: 100%; object-fit: cover; }
.testi__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.testi__quote { font-size: var(--text-md); line-height: 1.55; color: var(--text-body); }
.testi__quote::before { content: "\201C"; font-family: var(--font-display); font-weight: 900; color: var(--blue-300); font-size: 2rem; line-height: 0; vertical-align: -0.35em; margin-right: 4px; }
.testi__who { margin-top: auto; display: flex; align-items: center; gap: 6px; }
.testi__who strong { font-family: var(--font-display); font-weight: var(--weight-extrabold); color: var(--text-strong); font-size: var(--text-base); }
.testi__who span { font-size: var(--text-xs); color: var(--text-subtle); }
.stars { display: flex; gap: 2px; color: var(--amber-500); }
.stars svg { width: 16px; height: 16px; fill: currentColor; }

/* ============================================================
   COMMUNITY (navy band)
   ============================================================ */
.community { display: grid; grid-template-columns: 1.1fr 1fr 1.1fr; gap: 44px; align-items: center; }
.community__list li { display: flex; gap: 12px; align-items: center; padding: 9px 0; font-weight: var(--weight-semibold); color: #fff; }
.community__list .ico { width: 22px; height: 22px; color: var(--color-accent-soft); flex: none; }
.stats { display: flex; flex-direction: column; gap: 22px; text-align: center; }
.stat__v { font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--text-3xl); color: #fff; line-height: 1; }
.stat__l { font-size: var(--text-sm); color: var(--text-on-inverse); margin-top: 6px; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-radius: var(--radius-lg); overflow: hidden; }
.ig-grid img { aspect-ratio: 1; width: 100%; object-fit: cover; }
.ig-cap { margin-top: 16px; }
.ig-cap .ico { width: 20px; height: 20px; color: var(--color-accent-soft); vertical-align: -4px; margin-right: 6px; }

/* ============================================================
   LEAD MAGNET
   ============================================================ */
.gift { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 44px; align-items: center; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); padding: clamp(24px,4vw,44px); }
.gift__cover { aspect-ratio: 3/4; border-radius: var(--radius-lg); background: var(--surface-brand-gradient); box-shadow: var(--shadow-lg); padding: 26px; display: flex; flex-direction: column; gap: 12px; color: #fff; position: relative; overflow: hidden; }
.gift__cover .k { font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent-soft); }
.gift__cover .t { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); line-height: 1.15; margin-top: auto; }
.gift__form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.gift__form .full { grid-column: 1 / -1; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: var(--container-narrow); margin: 32px auto 0; border-top: 1px solid var(--border-default); }
.faq details { border-bottom: 1px solid var(--border-default); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-md); color: var(--text-strong); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { width: 22px; height: 22px; color: var(--blue-500); flex: none; transition: transform var(--duration-base) var(--ease-standard); }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq .ans { padding: 0 4px 22px; }
.faq .ans p { font-size: var(--text-base); line-height: 1.6; color: var(--text-muted); margin: 0; max-width: 640px; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.finalcta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.finalcta .display { color: #fff; max-width: 760px; }
.finalcta .lead { color: var(--text-on-inverse); max-width: 560px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--surface-card); border-top: 1px solid var(--border-subtle); padding: 44px 0 30px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; }
.footer__tag { font-size: var(--text-sm); color: var(--text-muted); margin-top: 14px; max-width: 260px; }
.footer__parent .k { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); }
.footer__parent .angel { font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--text-xl); color: var(--blue-800); margin-top: 6px; }
.footer__parent .angel i { color: var(--blue-500); font-weight: var(--weight-bold); }
.footer__contact h5 { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-base); color: var(--text-strong); margin: 0 0 12px; }
.footer__contact a { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-weight: var(--weight-semibold); color: var(--text-body); }
.footer__contact a svg { width: 18px; height: 18px; color: var(--green-600); flex: none; }
.footer__legal { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--border-subtle); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer__legal p { font-size: var(--text-xs); color: var(--text-subtle); max-width: 620px; line-height: 1.5; margin: 0; }
.footer__legal .cr { font-size: var(--text-xs); color: var(--text-subtle); }

/* ============================================================
   WHATSAPP FAB + MOBILE STICKY
   ============================================================ */
.wa-fab { position: fixed; right: 20px; bottom: 22px; z-index: 55; width: 58px; height: 58px; border-radius: 50%; background: var(--green-600); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); border: 2px solid #fff; transition: transform var(--duration-base) var(--ease-standard), background var(--duration-base); }
.wa-fab:hover { transform: translateY(-2px); background: #26795c; }
.wa-fab svg { width: 30px; height: 30px; }
.mobi-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 54; background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border-top: 1px solid var(--border-default); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); display: none; gap: 10px; }
.mobi-cta .btn { flex: 1; }

/* ============================================================
   MODAL
   ============================================================ */
.scrim { position: fixed; inset: 0; z-index: 200; background: rgba(14,39,66,.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity var(--duration-base) var(--ease-standard), visibility var(--duration-base); }
.scrim.open { opacity: 1; visibility: visible; }
.modal { width: 460px; max-width: 100%; max-height: 92vh; overflow-y: auto; background: var(--surface-page); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); transform: translateY(10px); transition: transform var(--duration-base) var(--ease-out); }
.scrim.open .modal { transform: none; }
.modal__head { background: var(--surface-brand-gradient); color: #fff; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; }
.modal__head h3 { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-md); margin: 0; }
.modal__head .k { font-size: var(--text-xs); color: var(--color-accent-soft); font-weight: 700; letter-spacing:.08em; text-transform:uppercase; }
.modal__close { background: rgba(255,255,255,.15); border: 0; color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.modal__close svg { width: 20px; height: 20px; }
.modal__body { padding: 22px 24px 26px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
  .features { grid-template-columns: repeat(3, 1fr); gap: 28px 16px; }
  .catalog { grid-template-columns: repeat(2, 1fr); }
  .community { grid-template-columns: 1fr; gap: 34px; }
  .stats { flex-direction: row; justify-content: space-around; }
}
@media (max-width: 960px) {
  .nav__links, .nav__right .btn { display: none; }
  .burger { display: inline-flex; }
  .hero__inner { grid-template-columns: 1fr; gap: 30px; }
  .hero__aside { min-height: 0; }
  .hero__photo { position: static; width: 100%; height: 240px; }
  .hero__form { position: static; width: 100%; max-width: 100%; margin-top: 16px; }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .gift { grid-template-columns: 1fr; }
  .gift__cover { max-width: 220px; }
  .mobi-cta { display: flex; }
  .wa-fab { bottom: 84px; }
  body { padding-bottom: 78px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .testis { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}
@media (max-width: 620px) {
  .hero__trust { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr 1fr; }
  .catalog { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; }
  .chips { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .minicards { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .stats { flex-direction: column; }
  .gift__form { grid-template-columns: 1fr; }
  .brand__3i { font-size: 28px; } .brand__cap svg { width: 26px; height: 26px; } .brand__academy { font-size: 13px; }
}