/* build: brand.css + colors_and_type.css + site.css + modelo.css */
/* ===================================================================
   Well Clinic Odontologia — Brand Tokens
   Brandbook 2026 · v1.0 · Abril 2026
   Pronto para uso em qualquer projeto Web da marca.
   =================================================================== */

:root {
  /* -------------------------------------------------------------
     1. Cores principais
     ------------------------------------------------------------- */
  --wc-teal:           #00B8B0; /* Primária · logo · CTAs       */
  --wc-teal-medium:    #3FB5A0; /* Backgrounds, transições       */
  --wc-green-teal:     #5EA87A; /* Secundária, destaques         */
  --wc-blue-clinical:  #1E90C0; /* Dados, protocolos             */
  --wc-blue-medium:    #3C80B0; /* Subtítulos                    */
  --wc-indigo:         #4E6898; /* Âncora escura, títulos        */
  --wc-white:          #FFFFFF; /* Fundos principais             */

  /* Neutros aprovados (uso secundário) */
  --wc-ivory:          #FAF7F2; /* Card WhatsApp                 */
  --wc-gray:           #5A6776; /* Texto secundário, contato     */

  /* -------------------------------------------------------------
     2. Gradiente oficial
     ------------------------------------------------------------- */
  --wc-gradient:       linear-gradient(135deg, #00B8B0 0%, #4E6898 100%);

  /* -------------------------------------------------------------
     3. Tipografia
     ------------------------------------------------------------- */
  --wc-font:           "Louis George Cafe", Arial, system-ui, sans-serif;
  --wc-fw-light:       300;
  --wc-fw-regular:     400;
  --wc-fw-bold:        700;

  --wc-fs-h1:          22pt;   /* Títulos de seção  */
  --wc-fs-h2:          16pt;   /* Subtítulos        */
  --wc-fs-h3:          13pt;   /* Títulos menores   */
  --wc-fs-body:        10.5pt; /* Texto principal   */
  --wc-fs-caption:     9pt;    /* Legendas, notas   */

  --wc-lh-tight:       1.2;
  --wc-lh-default:     1.3;
  --wc-lh-relaxed:     1.5;

  /* -------------------------------------------------------------
     4. Espaçamento e raios (consistência com o site)
     ------------------------------------------------------------- */
  --wc-radius-sm:      4px;
  --wc-radius-md:      8px;
  --wc-radius-lg:      16px;

  --wc-shadow-soft:    0 4px 20px rgba(78, 104, 152, 0.08);
  --wc-shadow-medium:  0 8px 32px rgba(78, 104, 152, 0.12);
}

/* ===================================================================
   Cores PROIBIDAS — somente referência. Nunca use no Well Clinic.
   #B85C4A  Terracota          → voz da Dra. Jacqueline
   #C4A192  Rose Assinatura    → voz da Dra. Jacqueline
   #0F1F3A  Azul Profundo      → voz da Dra. Jacqueline / Hub
   Fontes proibidas: Lora, Poppins, Georgia, Calibri.
   =================================================================== */

/* -------------------------------------------------------------------
   Carregamento da fonte (sete TTFs locais em /assets/fonts/)
   ------------------------------------------------------------------- */
@font-face {
  font-family: "Louis George Cafe";
  src: url("/fonts/louis-george-cafe.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Louis George Cafe";
  src: url("/fonts/louis-george-cafe-italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Louis George Cafe";
  src: url("/fonts/Louis_George_Cafe_Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Louis George Cafe";
  src: url("/fonts/louis-george-cafe-bold-italic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Louis George Cafe";
  src: url("/fonts/louis-george-cafe-light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Louis George Cafe";
  src: url("/fonts/louis-george-cafe-light-italic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* -------------------------------------------------------------------
   Base
   ------------------------------------------------------------------- */
body {
  font-family: var(--wc-font);
  font-weight: var(--wc-fw-regular);
  font-size:   var(--wc-fs-body);
  line-height: var(--wc-lh-default);
  color:       var(--wc-indigo);
  background:  var(--wc-white);
}

h1 { font-size: var(--wc-fs-h1); font-weight: var(--wc-fw-bold); color: var(--wc-indigo); line-height: var(--wc-lh-tight); }
h2 { font-size: var(--wc-fs-h2); font-weight: var(--wc-fw-bold); color: var(--wc-indigo); }
h3 { font-size: var(--wc-fs-h3); font-weight: var(--wc-fw-bold); color: var(--wc-indigo); }

small, .caption {
  font-size: var(--wc-fs-caption);
  font-weight: var(--wc-fw-light);
  color: var(--wc-gray);
}

a {
  color: var(--wc-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--wc-blue-clinical);
}

/* -------------------------------------------------------------------
   Utility classes (opcionais)
   ------------------------------------------------------------------- */
.wc-bg-gradient   { background: var(--wc-gradient); color: var(--wc-white); }
.wc-bg-teal       { background: var(--wc-teal);    color: var(--wc-white); }
.wc-bg-indigo     { background: var(--wc-indigo);  color: var(--wc-white); }
.wc-bg-ivory      { background: var(--wc-ivory);   color: var(--wc-indigo); }

.wc-text-teal     { color: var(--wc-teal); }
.wc-text-indigo   { color: var(--wc-indigo); }
.wc-text-gray     { color: var(--wc-gray); }

.wc-btn-primary {
  display: inline-block;
  padding: 12px 24px;
  background: var(--wc-teal);
  color: var(--wc-white);
  font-family: var(--wc-font);
  font-weight: var(--wc-fw-bold);
  text-decoration: none;
  border: none;
  border-radius: var(--wc-radius-md);
  transition: background 200ms ease;
}

.wc-btn-primary:hover {
  background: var(--wc-blue-clinical);
}

/* ============================================================================
   Well Clinic — Colors & Type
   Source of truth: Brandbook 2026 v1.0 (reference/official-brand-tokens.json).
   This file extends the official tokens with a responsive web scale + semantic
   aliases. Official token values are mirrored verbatim and must not drift.
   ========================================================================== */

/* ---------- Typeface (Louis George Cafe — 300 / 400 / 700) ---------- */

@font-face {
  font-family: "Louis George Cafe";
  src: url("/fonts/louis-george-cafe-light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Louis George Cafe";
  src: url("/fonts/louis-george-cafe-light-italic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Louis George Cafe";
  src: url("/fonts/louis-george-cafe.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Louis George Cafe";
  src: url("/fonts/louis-george-cafe-italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Louis George Cafe";
  src: url("/fonts/louis-george-cafe-bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Louis George Cafe";
  src: url("/fonts/louis-george-cafe-bold-italic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  /* ============================================================
     OFFICIAL BRAND TOKENS — copied verbatim from brand.css v1.0
     ============================================================ */

  --wc-teal:           #00B8B0;   /* Primária · logo · CTAs */
  --wc-teal-medium:    #3FB5A0;   /* Backgrounds, transições */
  --wc-green-teal:     #5EA87A;   /* Secundária, destaques */
  --wc-blue-clinical:  #1E90C0;   /* Dados, protocolos */
  --wc-blue-medium:    #3C80B0;   /* Subtítulos */
  --wc-indigo:         #4E6898;   /* Âncora escura, títulos (default text color) */
  --wc-white:          #FFFFFF;   /* Fundos principais */

  --wc-ivory:          #FAF7F2;   /* Card WhatsApp / alt surface */
  --wc-gray:           #5A6776;   /* Texto secundário */

  /* Official gradient — the only sanctioned gradient direction & stops */
  --wc-gradient:       linear-gradient(135deg, #00B8B0 0%, #4E6898 100%);

  /* Print-spec type scale (from brandbook; small, document-oriented) */
  --wc-fs-h1:          22pt;
  --wc-fs-h2:          16pt;
  --wc-fs-h3:          13pt;
  --wc-fs-body:        10.5pt;
  --wc-fs-caption:     9pt;

  --wc-lh-tight:       1.2;
  --wc-lh-default:     1.3;
  --wc-lh-relaxed:     1.5;

  --wc-fw-light:       300;
  --wc-fw-regular:     400;
  --wc-fw-bold:        700;

  --wc-radius-sm:      4px;
  --wc-radius-md:      8px;
  --wc-radius-lg:      16px;

  --wc-shadow-soft:    0 4px 20px rgba(78, 104, 152, 0.08);
  --wc-shadow-medium:  0 8px 32px rgba(78, 104, 152, 0.12);

  /* ============================================================
     FORBIDDEN — for documentation only. Never apply these.
     #B85C4A Terracota · #C4A192 Rose · #0F1F3A Azul Profundo
     (Belong to Dra. Jacqueline's personal voice / Hub brand)
     Forbidden font families: Lora, Poppins, Georgia, Calibri.
     ============================================================ */

  /* ============================================================
     EXTENSIONS — web-only additions, derived (not invented).
     Every shade below is a tint/shade of an official token, used
     to make the brand usable in modern UI without breaking it.
     ============================================================ */

  /* Teal tints (derived from --wc-teal #00B8B0) */
  --wc-teal-50:        #E5F8F7;
  --wc-teal-100:       #C2EFEC;
  --wc-teal-200:       #8AE0DA;
  --wc-teal-300:       #4FCEC5;
  --wc-teal-400:       #1FC0B5;
  --wc-teal-500:       #00B8B0;   /* === --wc-teal */
  --wc-teal-600:       #009994;
  --wc-teal-700:       #007A76;
  --wc-teal-800:       #005B58;
  --wc-teal-900:       #003E3C;

  /* Indigo tints (derived from --wc-indigo #4E6898) */
  --wc-indigo-50:      #EFF2F8;
  --wc-indigo-100:     #D9E0EE;
  --wc-indigo-200:     #B3C1DC;
  --wc-indigo-300:     #8B9DC4;
  --wc-indigo-400:     #6B82AE;
  --wc-indigo-500:     #4E6898;   /* === --wc-indigo */
  --wc-indigo-600:     #3E537B;
  --wc-indigo-700:     #2F405E;
  --wc-indigo-800:     #1F2D42;
  --wc-indigo-900:     #131C2A;

  /* Clinical blue tints (derived from --wc-blue-clinical #1E90C0) */
  --wc-blue-50:        #E6F3FA;
  --wc-blue-100:       #C2E1F2;
  --wc-blue-200:       #8DC8E6;
  --wc-blue-300:       #57AED5;
  --wc-blue-400:       #339FCB;
  --wc-blue-500:       #1E90C0;   /* === --wc-blue-clinical */
  --wc-blue-600:       #18789F;

  /* Cool neutrals — derived from indigo, used for hairlines & inset bg */
  --wc-paper:          #F7F8FB;   /* default page bg */
  --wc-bone:           #ECEFF5;   /* subtle inset */
  --wc-border:         #D6DCE7;   /* hairline */
  --wc-border-strong:  #B6C0D1;

  /* Semantic, calibrated to brand palette */
  --wc-success:        var(--wc-green-teal);   /* #5EA87A */
  --wc-warning:        #C99B3B;                /* warm sand, not in palette but harmonious */
  --wc-danger:         #B85C4A;                /* terracota — RESERVED. Use ONLY for destructive states in UI (errors / delete confirmations). Never as brand surface color. */
  --wc-info:           var(--wc-blue-clinical);

  /* ---------- Semantic foreground / background aliases ---------- */

  --fg-1:              var(--wc-indigo);          /* default body text — indigo per brand */
  --fg-2:              var(--wc-gray);            /* secondary text */
  --fg-3:              #7A8593;                   /* tertiary / captions */
  --fg-mute:           #99A2B0;                   /* placeholder / disabled */
  --fg-on-brand:       var(--wc-white);
  --fg-link:           var(--wc-teal);            /* per brand: anchors are teal */
  --fg-link-hover:     var(--wc-blue-clinical);   /* per brand: anchors hover to clinical blue */

  --bg-1:              var(--wc-white);           /* default page */
  --bg-2:              var(--wc-white);           /* card surface */
  --bg-3:              var(--wc-bone);            /* inset / alt */
  --bg-warm:           var(--wc-ivory);           /* warm alternate band */
  --bg-ink:            var(--wc-indigo);          /* dark editorial sections */

  --border-1:          var(--wc-border);
  --border-2:          var(--wc-border-strong);
  --border-focus:      var(--wc-teal);

  /* ---------- Web type scale (responsive, derived) ----------
     Brandbook sizes are document/print (pt). Web designs use the
     px scale below; the pt scale stays available for print exports
     and for keeping social cards/PDFs on-brand.
  */
  --font-sans:    "Louis George Cafe", Arial, system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-38: 2.375rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-88: 5.5rem;
  --fs-120: 7.5rem;

  --ls-tight: -0.02em;
  --ls-snug:  -0.01em;
  --ls-base:  0;
  --ls-wide:  0.04em;
  --ls-loud:  0.18em;       /* the "ODONTOLOGIA" lockup tracking */

  /* ---------- Spacing (4px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Extended radii (small/medium/large match official; xl + pill added for web UI) */
  --radius-xs: 4px;          /* === --wc-radius-sm */
  --radius-sm: 8px;          /* === --wc-radius-md */
  --radius-md: 16px;         /* === --wc-radius-lg */
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Extended elevation */
  --shadow-1: 0 1px 2px rgba(78, 104, 152, 0.05);
  --shadow-2: var(--wc-shadow-soft);
  --shadow-3: var(--wc-shadow-medium);
  --shadow-4: 0 24px 60px rgba(78, 104, 152, 0.16);
  --shadow-brand: 0 18px 40px -12px rgba(0, 184, 176, 0.30);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

/* ============================================================
   Base bindings (re-exported from official brand.css)
   ============================================================ */

body {
  font-family: var(--font-sans);
  font-weight: var(--wc-fw-regular);
  line-height: var(--wc-lh-default);
  color:       var(--wc-indigo);
  background:  var(--wc-white);
}

/* ============================================================
   Web-friendly semantic type classes (preferred for digital UI)
   ============================================================ */

.wc-display, .wc-h1, .wc-h2, .wc-h3, .wc-h4, .wc-h5,
.wc-body, .wc-body-lg, .wc-caption, .wc-eyebrow, .wc-lead, .wc-quote {
  font-family: var(--font-sans);
  color: var(--wc-indigo);
  margin: 0;
  text-wrap: pretty;
}

.wc-display {
  font-size: clamp(3.5rem, 7vw, var(--fs-120));
  font-weight: 300;
  line-height: var(--wc-lh-tight);
  letter-spacing: var(--ls-tight);
}

.wc-h1 {
  font-size: clamp(2.5rem, 5vw, var(--fs-64));
  font-weight: 300;
  line-height: var(--wc-lh-tight);
  letter-spacing: var(--ls-tight);
}

.wc-h2 {
  font-size: clamp(2rem, 4vw, var(--fs-48));
  font-weight: 400;
  line-height: var(--wc-lh-tight);
  letter-spacing: var(--ls-snug);
}

.wc-h3 {
  font-size: var(--fs-30);
  font-weight: 700;
  line-height: var(--wc-lh-tight);
}

.wc-h4 {
  font-size: var(--fs-24);
  font-weight: 700;
  line-height: var(--wc-lh-default);
}

.wc-h5 {
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: var(--wc-lh-default);
}

.wc-lead {
  font-size: var(--fs-20);
  font-weight: 300;
  line-height: var(--wc-lh-relaxed);
  color: var(--wc-gray);
}

.wc-body-lg {
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: var(--wc-lh-relaxed);
  color: var(--wc-gray);
}

.wc-body {
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: var(--wc-lh-relaxed);
  color: var(--wc-gray);
}

.wc-caption {
  font-size: var(--fs-14);
  font-weight: 300;
  line-height: var(--wc-lh-default);
  color: var(--wc-gray);
}

.wc-eyebrow {
  font-size: var(--fs-12);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-loud);
  text-transform: uppercase;
  color: var(--wc-teal);
}

.wc-quote {
  font-size: var(--fs-30);
  font-weight: 300;
  font-style: italic;
  line-height: var(--wc-lh-tight);
  color: var(--wc-indigo);
}

/* Print-spec sizes — for branded PDFs / social documents only. */
.wc-print-h1     { font-size: var(--wc-fs-h1);      font-weight: 700; color: var(--wc-indigo); line-height: var(--wc-lh-tight); }
.wc-print-h2     { font-size: var(--wc-fs-h2);      font-weight: 700; color: var(--wc-indigo); }
.wc-print-h3     { font-size: var(--wc-fs-h3);      font-weight: 700; color: var(--wc-indigo); }
.wc-print-body   { font-size: var(--wc-fs-body);    font-weight: 400; color: var(--wc-gray); }
.wc-print-caption{ font-size: var(--wc-fs-caption); font-weight: 300; color: var(--wc-gray); }

/* ============================================================
   Utility classes (mirrors official brand.css + a few additions)
   ============================================================ */

.wc-bg-gradient   { background: var(--wc-gradient); color: var(--wc-white); }
.wc-bg-teal       { background: var(--wc-teal);    color: var(--wc-white); }
.wc-bg-indigo     { background: var(--wc-indigo);  color: var(--wc-white); }
.wc-bg-ivory      { background: var(--wc-ivory);   color: var(--wc-indigo); }

.wc-text-teal     { color: var(--wc-teal); }
.wc-text-indigo   { color: var(--wc-indigo); }
.wc-text-gray     { color: var(--wc-gray); }

.wc-text-gradient {
  background: var(--wc-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Buttons — primary mirrors official .wc-btn-primary verbatim */
.wc-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--wc-teal);
  color: var(--wc-white);
  font-family: var(--font-sans);
  font-weight: var(--wc-fw-bold);
  font-size: var(--fs-16);
  text-decoration: none;
  border: none;
  border-radius: var(--wc-radius-md);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.wc-btn-primary:hover { background: var(--wc-blue-clinical); }
.wc-btn-primary:active { transform: scale(0.99); }
.wc-btn-primary:focus-visible { outline: 2px solid var(--wc-teal); outline-offset: 2px; }

.wc-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 23px;
  background: transparent;
  color: var(--wc-indigo);
  font-family: var(--font-sans);
  font-weight: var(--wc-fw-bold);
  font-size: var(--fs-16);
  text-decoration: none;
  border: 1px solid var(--wc-indigo);
  border-radius: var(--wc-radius-md);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.wc-btn-secondary:hover { background: var(--wc-indigo); color: var(--wc-white); }
.wc-btn-secondary:active { transform: scale(0.99); }

.wc-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  background: transparent;
  color: var(--wc-teal);
  font-family: var(--font-sans);
  font-weight: var(--wc-fw-bold);
  font-size: var(--fs-16);
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.wc-btn-ghost:hover { color: var(--wc-blue-clinical); }

/* ============================================================
   site.css — reset e base
   Invisalign em São Paulo · Well Clinic Odontologia
   As cores e a tipografia vêm de assets/brand.css (fonte oficial).
   O layout da direção B vive em site-novo/modelo.css.
   ============================================================ */

/* NÃO declarar @font-face aqui.
   A família "Louis George Cafe" já é declarada por inteiro (300/400/700, normal
   e itálico) em assets/brand.css e em colors_and_type.css, que o build concatena
   antes deste arquivo.
   Redeclarar a família aqui fez o texto de corpo (400 normal) renderizar em
   itálico, mesmo com os descritores corretos, porque duplicar faces da mesma
   família com descritores repetidos torna a resolução do navegador imprevisível.
   Diagnóstico de 20/08/2026: o mesmo arquivo louis-george-cafe.ttf renderiza
   reto quando declarado sob um nome de família exclusivo. */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--wc-font);
  font-weight:400;
  font-size:17px;
  line-height:1.55;
  color:var(--ink);
  background:var(--wc-white);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

h1,h2,h3,h4{margin:0 0 18px;line-height:1.14;font-weight:700;letter-spacing:-.018em}
p{margin:0 0 18px}
ul,ol{margin:0 0 18px}

table{width:100%;border-collapse:collapse}

:focus-visible{outline:3px solid var(--wc-teal);outline-offset:3px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--wc-teal);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:700;
}
.skip-link:focus{left:0}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ============================================================
   modelo.css — Direção B "Editorial Preciso"
   Invisalign em São Paulo · Well Clinic Odontologia
   Aprovada pelo dono em 20/08/2026.

   Princípio: a estrutura visual argumenta junto com o texto.
   Indigo como âncora tipográfica, teal como acento único,
   numeração visível, tabelas comparativas, grid assimétrico.
   ============================================================ */

:root{
  --ink:#2C3A56;              /* indigo aprofundado, texto principal   */
  --ink-soft:#5A6776;         /* texto secundário (= --wc-gray)        */
  --line:rgba(78,104,152,.16);
  --line-strong:rgba(78,104,152,.30);
  --maxw:1140px;
  --gut:28px;
}

body{background:var(--wc-white);color:var(--ink)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.sec{padding:92px 0}
.sec--tight{padding:52px 0}
.sec--ivory{background:var(--wc-ivory)}
.sec--ink{background:var(--ink);color:#fff}
.sec--ink h2,.sec--ink h3{color:#fff}
.sec--ink p,.sec--ink li{color:rgba(255,255,255,.78)}
.sec--ink .eyebrow{color:var(--wc-teal-medium)}
.sec--ink th{color:rgba(255,255,255,.58)}
.sec--ink td{border-bottom-color:rgba(255,255,255,.16);color:rgba(255,255,255,.88)}
.sec--ink .cmp__wrap{border-color:rgba(255,255,255,.18)}

.grid{display:grid;gap:26px}
@media(min-width:760px){
  .g2{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:repeat(3,1fr)}
}

/* ---------- tipografia ---------- */
.eyebrow{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--wc-teal);margin:0 0 18px;
}
.h1{font-size:clamp(36px,5.4vw,60px);letter-spacing:-.032em;color:var(--ink)}
.h2{font-size:clamp(27px,3.5vw,40px);color:var(--ink)}
.h3{font-size:clamp(18px,2vw,21px);color:var(--ink)}
.accent{color:var(--wc-teal)}
.lead{font-size:clamp(18px,2.1vw,21px);font-weight:300;line-height:1.5;color:var(--ink-soft);max-width:62ch}
.kicker{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.prose{max-width:66ch;color:var(--ink-soft)}
.note{font-size:15px;color:var(--ink-soft);max-width:66ch}
.byline{font-size:13px;color:var(--ink-soft);margin-top:30px}

/* ---------- botões ---------- */
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 30px;border-radius:999px;
  background:var(--wc-teal);color:#fff;font-weight:700;font-size:15px;
  border:2px solid var(--wc-teal);transition:background .18s ease,border-color .18s ease;
}
.btn:hover{background:#00a49d;border-color:#00a49d}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{background:transparent;border-color:var(--wc-teal)}
.btn--onink{background:var(--wc-teal);border-color:var(--wc-teal);color:#fff}

/* No mobile os botões empilham. Larguras intrínsecas diferentes deixavam a
   pilha desalinhada, então aqui eles ocupam a linha inteira. */
@media(max-width:520px){
  .btns{flex-direction:column;align-items:stretch}
  .btn{width:100%}
}

/* ---------- cabeçalho ---------- */
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 0;border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.nav__brand{display:inline-flex;align-items:center}
.nav__brand img{height:42px;width:auto;display:block}
@media(max-width:520px){.nav__brand img{height:34px}}
.nav__mark{color:var(--wc-teal)}
.nav__meta{font-size:13.5px;color:var(--ink-soft)}

/* ---------- hero ---------- */
.hero{padding:56px 0 70px}
.hero__grid{display:grid;gap:50px}
@media(min-width:960px){.hero__grid{grid-template-columns:1.02fr .98fr;align-items:center}}
.hero .lead{border-left:3px solid var(--wc-teal);padding-left:22px;max-width:52ch}
.hero__aside{display:grid;gap:24px}
.hero__img{border-radius:10px;overflow:hidden;box-shadow:var(--wc-shadow-medium)}
.hero__img img{width:100%;height:auto;display:block}

/* ---------- placeholder de imagem ---------- */
.ph{
  background:
    repeating-linear-gradient(135deg,rgba(78,104,152,.05) 0 12px,transparent 12px 24px),
    rgba(78,104,152,.06);
  border:1px dashed var(--line-strong);border-radius:4px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--ink-soft);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:20px;min-height:300px;
}

/* ---------- selo / stat ---------- */
.stats{display:grid;gap:22px}
@media(min-width:520px){.stats{grid-template-columns:1fr 1fr}}
.stat{border-top:3px solid var(--wc-teal);padding-top:16px}
.stat__label{
  display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wc-teal);font-weight:700;margin-bottom:9px;
}
.stat p{font-size:15px;color:var(--ink-soft);margin:0}
.sec--ink .stat p{color:rgba(255,255,255,.72)}

/* ---------- bloco Em resumo (AEO) ---------- */
.tldr{
  border:1px solid var(--line);border-left:4px solid var(--wc-teal);
  border-radius:0 6px 6px 0;padding:34px 38px;background:var(--wc-ivory);
}
.tldr__label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--wc-teal);margin:0 0 14px}
.tldr__answer{font-size:18px;margin:0;max-width:80ch;color:var(--ink)}
.tldr__facts{margin:18px 0 0;padding-left:20px;color:var(--ink-soft);font-size:15.5px}
.tldr__facts li{margin-bottom:9px}

/* ---------- passos numerados (o método) ---------- */
.steps{counter-reset:passo;margin-top:10px}
.step{
  counter-increment:passo;display:grid;grid-template-columns:auto 1fr;gap:26px;
  padding:30px 0;border-top:1px solid var(--line);
}
.step::before{
  content:counter(passo,decimal-leading-zero);
  font-size:13px;font-weight:700;color:var(--wc-teal);letter-spacing:.1em;padding-top:7px;
}
.step__body h3{margin-bottom:8px}
.step__body p{color:var(--ink-soft);font-size:16px;margin:0;max-width:62ch}

/* ---------- tabela comparativa ----------
   Lida com "tem / não tem": cada célula traz um sinal antes do texto, e a coluna
   da casa fica destacada. Sem isso a tabela vira parágrafo em grade e ninguém lê. */
.cmp__wrap{border:1px solid var(--line);border-radius:8px;overflow-x:auto;margin-top:26px;background:var(--wc-white)}
.cmp{font-size:15px;min-width:640px}
.cmp th,.cmp td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp tr:last-child td{border-bottom:0}
.cmp th{font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);background:var(--wc-ivory)}
.cmp td:first-child{font-weight:700;color:var(--ink);width:27%}
/* coluna da casa em destaque */
.cmp th:last-child{color:var(--wc-teal);background:rgba(0,184,176,.09)}
.cmp td:last-child{background:rgba(0,184,176,.045)}
.sec--ink .cmp__wrap{background:transparent}
.sec--ink .cmp th{background:rgba(255,255,255,.06)}
.sec--ink .cmp th:last-child{background:rgba(0,184,176,.18);color:var(--wc-teal-medium)}
.sec--ink .cmp td:last-child{background:rgba(0,184,176,.09)}
.sec--ink .cmp td:first-child{color:#fff}

/* sinal de sim/não dentro da célula */
.mark{display:inline-flex;align-items:center;gap:9px}
.mark svg{flex:0 0 18px;width:18px;height:18px}
.mark--yes svg{color:var(--wc-teal)}
.mark--no svg{color:#B9433F}
.mark--partial svg{color:#C08A2E}
.sec--ink .mark--no svg{color:#E88A86}
.sec--ink .mark--partial svg{color:#E3B45F}

/* ---------- faixa de selos ---------- */
.selos{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0}
.selos__grid{display:flex;align-items:center;justify-content:center;gap:clamp(28px,6vw,72px);flex-wrap:wrap}
.selos__item{display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center}
.selos__item img{height:38px;width:auto;object-fit:contain}
.selos__item span{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- imagens de seção ---------- */
.fig{margin:0}
.fig img{width:100%;height:auto;display:block;border-radius:8px;background:var(--wc-ivory)}
.fig figcaption{font-size:13px;color:var(--ink-soft);padding:12px 2px 0}
/* na seção escura a legenda é clara: o fundo do figure precisa sair do caminho,
   senão fica texto branco sobre ivory e some. */
.sec--ink .fig figcaption{color:rgba(255,255,255,.62)}
.media{display:grid;gap:38px;align-items:center}
@media(min-width:900px){
  .media{grid-template-columns:1fr 1fr}
  .media--flip .media__txt{order:2}
}
.media__txt p:last-child{margin-bottom:0}
.media--flip .media__img{order:1}

/* trio de imagens da rotina.
   Os arquivos originais têm proporções diferentes (dois quadrados e um 16:9).
   Sem proporção fixa a linha fica com três alturas diferentes, que foi o que o
   dono apontou. aspect-ratio + object-fit padroniza sem distorcer. */
.trio{display:grid;gap:18px;margin-top:34px}
@media(min-width:700px){.trio{grid-template-columns:repeat(3,1fr)}}
.trio img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center;
  border-radius:8px;display:block;background:var(--wc-ivory);
}

/* mapa embutido */
.mapa{border:0;width:100%;height:320px;border-radius:8px;display:block;background:var(--wc-ivory)}
.mapa__wrap{margin-top:20px}
.link-mapa{color:var(--wc-teal);text-decoration:underline;text-underline-offset:3px}
.link-mapa:hover{text-decoration:none}

/* ---------- cards de indicação ---------- */
.card{border-top:3px solid var(--wc-teal);padding-top:16px}
.card__title{
  display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wc-teal);font-weight:700;margin-bottom:9px;
}
.card p{font-size:15px;color:var(--ink-soft);margin:0}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);margin-top:34px}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  cursor:pointer;padding:22px 40px 22px 0;font-weight:700;font-size:17px;
  color:var(--ink);position:relative;list-style:none;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+";position:absolute;right:6px;top:20px;
  font-size:22px;font-weight:400;color:var(--wc-teal);line-height:1;
}
.faq__item[open] summary::after{content:"–"}
.faq__body{padding:0 40px 24px 0}
.faq__body p{color:var(--ink-soft);margin:0;max-width:70ch}
.faq__byline{font-size:13px;color:var(--ink-soft);margin-top:26px}

/* ---------- local ---------- */
.local{display:grid;gap:34px}
@media(min-width:860px){.local{grid-template-columns:1fr 1fr}}
.local__list{list-style:none;padding:0;margin:0}
.local__list li{padding:13px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink-soft)}
.local__list b{color:var(--ink);font-weight:700}

/* ---------- rodapé ---------- */
.foot{padding:52px 0 40px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-soft)}
.foot__grid{display:grid;gap:26px}
@media(min-width:760px){.foot__grid{grid-template-columns:1.4fr 1fr}}
.foot__nap p{margin:0 0 6px}
.foot__legal{font-size:12.5px;color:var(--ink-soft);margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}

/* ---------- WhatsApp flutuante ---------- */
.wa{
  position:fixed;right:20px;bottom:20px;z-index:60;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--wc-teal);color:#fff;font-weight:700;font-size:14.5px;
  padding:14px 22px;border-radius:999px;box-shadow:var(--wc-shadow-medium);
}
.wa:hover{background:#00a49d}

/* ---------- animação de entrada ----------
   O padrão só esconde quando há JS (a classe .js é posta pelo script inline do
   head). Sem isso, uma falha de JS deixaria seções inteiras invisíveis para
   sempre, e o conteúdo existe no HTML justamente para não depender de script. */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- 404 ---------- */
.err{padding:120px 0 90px;text-align:center}
.err p{margin-left:auto;margin-right:auto}