/* ============================================================
   Rede Tropicalis · Design Tokens (DS oficial · marca-mãe)
   Azul-petróleo + areia-dourado · Final Six. Maceió/AL.
   ============================================================ */

/* -------- Final Six (comercial · fonnts.com) -------- */
@font-face{font-family:"Final Six";font-weight:300;font-display:swap;src:url("../fonts/FinalSix-300.woff2") format("woff2")}
@font-face{font-family:"Final Six";font-weight:400;font-display:swap;src:url("../fonts/FinalSix-400.woff2") format("woff2")}
@font-face{font-family:"Final Six";font-weight:500;font-display:swap;src:url("../fonts/FinalSix-500.woff2") format("woff2")}
@font-face{font-family:"Final Six";font-weight:700;font-display:swap;src:url("../fonts/FinalSix-700.woff2") format("woff2")}
@font-face{font-family:"Final Six";font-weight:900;font-display:swap;src:url("../fonts/FinalSix-900.woff2") format("woff2")}

:root{
  /* ============ PALETA OFICIAL TROPICALIS ============ */
  --tr-gold:   #F0D283;  /* areia-dourado · PANTONE 7403c · secundária (decorativo · texto SÓ sobre petróleo) */
  --tr-brown:  #004D71;  /* azul-petróleo · PANTONE 3025c · primária / superfície escura */
  --tr-dark:   #00374F;  /* petróleo escuro · faixas escuras */
  --tr-ink:    #173A48;  /* texto de corpo / títulos (petróleo-tinta) */
  --tr-azul:   #004D71;  /* link / acento = petróleo */
  --tr-bg:     #FFFFFF;
  --tr-soft:   #F5F0E1;  /* superfície clara calorosa (areia clara) */
  --tr-line:   #DCD8CC;  /* bordas */
  --tr-mute:   #5A6E78;  /* texto secundário */

  /* ============ PARES ACESSÍVEIS (WCAG · daltonismo) ============
     Branco sobre petróleo 9.13 AA · ink/petróleo sobre branco e areia AA.
     Areia-dourado é decorativo/sobre escuro · FALHA como texto sobre branco. */
  --on-white-ink:   var(--tr-ink);
  --on-white-brown: var(--tr-brown);
  --on-brown-white: var(--tr-bg);
  --on-brown-gold:  var(--tr-gold);
  --on-dark-gold:   var(--tr-gold);

  /* ============ TIPOGRAFIA · Final Six ============ */
  --tr-font-display: "Final Six", system-ui, Helvetica, Arial, sans-serif; /* títulos · 700/900 */
  --tr-font-body:    "Final Six", system-ui, Helvetica, Arial, sans-serif; /* corpo / nav / botões */

  --text-xs:12px; --text-sm:14px; --text-base:16px; --text-md:18px;
  --text-lg:20px; --text-xl:24px; --text-2xl:30px; --text-3xl:38px;
  --text-4xl:50px; --text-5xl:64px;
  --lh-tight:1.08; --lh-snug:1.2; --lh-base:1.55; --lh-loose:1.7;
  --tracking-wide:0.04em; --tracking-wider:0.16em;

  /* ============ RAIOS (marca institucional · suave) ============ */
  --tr-radius-sm: 6px; --tr-radius: 4px; --tr-radius-pill: 999px;

  /* ============ SOMBRAS / ESPAÇO ============ */
  --tr-shadow-e1: 0 6px 18px rgba(0,55,79,0.10);
  --tr-shadow-e2: 0 16px 40px rgba(0,55,79,0.16);
  --tr-sp-1:4px;--tr-sp-2:8px;--tr-sp-3:12px;--tr-sp-4:16px;--tr-sp-5:24px;--tr-sp-6:32px;--tr-sp-8:48px;--tr-sp-10:64px;
}

/* ============ TEMA · wrapper .v-tropicalis ============ */
.v-tropicalis{
  --brand-primary: var(--tr-brown);
  --brand-accent: var(--tr-gold);
  --brand-bg: var(--tr-bg);
  --brand-text: var(--tr-ink);
  background: var(--tr-bg);
  color: var(--tr-ink);
  font-family: var(--tr-font-body);
  line-height: var(--lh-base);
}
.v-tropicalis .t-eyebrow{font-family:var(--tr-font-body);font-size:var(--text-sm);font-weight:600;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--tr-brown)}
.v-tropicalis .t-h1{font-family:var(--tr-font-display);font-weight:900;font-size:clamp(34px,5vw,var(--text-4xl));line-height:var(--lh-tight);color:var(--tr-ink)}
.v-tropicalis .t-h2{font-family:var(--tr-font-display);font-weight:700;font-size:clamp(26px,3.4vw,var(--text-2xl));color:var(--tr-ink)}
.v-tropicalis .t-lead{font-family:var(--tr-font-body);font-size:var(--text-md);font-weight:300;color:var(--tr-mute);line-height:var(--lh-loose)}

.v-tropicalis .btn{font-family:var(--tr-font-body);font-weight:500;font-size:var(--text-base);padding:13px 26px;border-radius:var(--tr-radius-sm);border:1.5px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:9px;letter-spacing:.02em}
.v-tropicalis .btn--brown{background:var(--tr-brown);color:#fff}              /* AA */
.v-tropicalis .btn--gold{background:var(--tr-gold);color:var(--tr-dark)}      /* areia c/ texto petróleo (AA) */
.v-tropicalis .btn--ghost{background:transparent;color:var(--tr-brown);border-color:var(--tr-brown)}
.v-tropicalis .card{background:#fff;border:1px solid var(--tr-line);border-radius:var(--tr-radius-sm);padding:var(--tr-sp-6);box-shadow:var(--tr-shadow-e1)}
.v-tropicalis .rule{height:2px;width:54px;background:var(--tr-gold)} /* fio areia-dourado decorativo */