/* =========================================
   REVOLUX — Design System Theme
   
   Aplicação da identidade visual sobre
   o site existente.
   
   Estratégia: sobrescrever apenas os tokens
   de cor e tipografia via :root e seletores
   de baixa especificidade. Nenhuma estrutura,
   layout ou animação é alterada.
   ========================================= */

/* ══════════════════════════════════════════
   1. COLOR TOKENS  (Paleta Revolux — PDF)
   ══════════════════════════════════════════
   
   --revolux-green-deep  #175347  → cor protagonista
   --revolux-green-dark  #13302C  → variante mais escura / fundos
   --revolux-beige       #F9ECCC  → leveza, cuidado, precisão
   --revolux-amber       #C79B74  → calor, materialidade, amadeirado
   --revolux-black       #000000
   --revolux-white       #FFFFFF
*/
:root {
  /* ── Revolux Palette ─────────────────── */
  --revolux-green-deep : #175347;
  --revolux-green-dark : #13302C;
  --revolux-beige      : #F9ECCC;
  --revolux-amber      : #C79B74;
  --revolux-black      : #000000;
  --revolux-white      : #FFFFFF;

  /* ── Derived tones ───────────────────── */
  --revolux-green-mid  : #1c6659;   /* hover intermediário */
  --revolux-beige-dim  : rgba(249,236,204,0.65);
  --revolux-amber-dim  : rgba(199,155,116,0.55);
  --revolux-green-line : rgba(23,83,71,0.25);

  /* ── Typography families ─────────────── */
  --font-display : 'Condor', 'Corbel', serif;   /* headings, nav, labels */
  --font-body    : 'Corbel', serif;             /* body text, descriptions */

  /* ══════════════════════════════════════
     2. OVERRIDE EXISTING TOKENS
     (substituição direta das variáveis CSS
      definidas em style.css)
     ══════════════════════════════════════ */

  /* Core site tokens → Revolux equivalents */
  --gold        : var(--revolux-amber);
  --gold-light  : var(--revolux-beige);
  --orange      : var(--revolux-amber);

  /* Text + line */
  --gray-text   : var(--revolux-beige-dim);
  --gray-line   : var(--revolux-green-line);

  /* Card surfaces */
  --card-bg     : rgba(19, 48, 44, 0.82);    /* green-dark translúcido */
  --card-border : rgba(199,155,116,0.18);    /* amber sutil */

  /* Section background */
  --section-bg  : var(--revolux-green-dark);

  /* Border radius (mantidos) */
  --radius      : 12px;
  --radius-lg   : 18px;
}

/* ══════════════════════════════════════════
   2. GLOBAL TYPOGRAPHY SWAP
   ══════════════════════════════════════════ */

/* Base body — Corbel substituindo Sora/Roboto */
body {
  font-family: var(--font-body) !important;
  background  : var(--revolux-green-dark);
  color       : var(--revolux-beige);
}

/* All headings → Condor */
h1, h2, h3, h4, h5, h6 {
  font-family : var(--font-display) !important;
  color       : var(--revolux-beige);
}

/* Navigation items → Condor Bold (display role) */
.hero__nav-item {
  font-family     : var(--font-display) !important;
  font-weight     : 700 !important;
  letter-spacing  : 0.14em;
  color           : var(--revolux-beige-dim);
}
.hero__nav-item:hover { color: var(--revolux-beige); }

/* Section labels → Condor Regular */
.section-label {
  font-family    : var(--font-display) !important;
  font-weight    : 400 !important;
  letter-spacing : 0.22em;
  color          : var(--revolux-beige-dim);
}

/* Card titles → Condor Bold */
.product-card__title,
.contact-card__title,
.conheca-card h3 {
  font-family    : var(--font-display) !important;
  font-weight    : 700 !important;
  letter-spacing : 0.07em;
  color          : var(--revolux-beige);
}

/* Card descriptions → Corbel Light */
.product-card__desc,
.contact-card__desc,
.conheca-card p,
.hero__subtitle {
  font-family : var(--font-body) !important;
  font-weight : 300 !important;
  color       : var(--revolux-beige-dim);
}

/* Price → Condor Bold */
.product-card__price {
  font-family : var(--font-display) !important;
  font-weight : 700 !important;
  color       : var(--revolux-beige);
}

/* Rating numbers → Corbel */
.product-card__rating,
.product-card__viewers {
  font-family : var(--font-body) !important;
}

/* Buttons → Corbel Bold */
.btn-whatsapp,
.btn-instagram {
  font-family    : var(--font-body) !important;
  font-weight    : 700 !important;
  letter-spacing : 0.08em;
}

/* ══════════════════════════════════════════
   3. COLOR APPLICATION
   ══════════════════════════════════════════ */

/* ── Page background ─────────────────── */
body,
.main-content {
  background: var(--revolux-green-dark);
}

/* ── Hero section ────────────────────── */
.hero {
  background: var(--revolux-green-dark);
}
/* overlay over video */
.hero__video-wrap::after {
  background: linear-gradient(
    to right,
    rgba(19, 48, 44, 0.82) 0%,
    rgba(19, 48, 44, 0.55) 55%,
    rgba(19, 48, 44, 0.22) 100%
  );
}

/* ── Navigation underline → amber ───── */
.hero__nav-item::after {
  background: var(--revolux-amber);
}

/* wave text hover → amber */
.wave-text .char .back {
  color: var(--revolux-amber);
}

/* ── Social icons ────────────────────── */
.hero__social-icon {
  background   : rgba(23, 83, 71, 0.55);
  border-color : rgba(199,155,116,0.22);
}
.hero__social-icon:hover {
  background: rgba(23, 83, 71, 0.85);
}

/* ── Section label line ──────────────── */
.section-label::before {
  background: var(--revolux-amber);
}

/* ── Cards ───────────────────────────── */
.product-card {
  background  : var(--card-bg);
  border-color: rgba(199,155,116,0.18);
  backdrop-filter: blur(14px);
}
.product-card:hover {
  border-color: rgba(199,155,116,0.45);
}
/* shimmer tint on hover */
.product-card::before {
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(199,155,116,0.06) 50%,
    transparent 100%
  );
}

.contact-card {
  background  : var(--card-bg);
  border-color: rgba(199,155,116,0.18);
}
.contact-card:hover {
  border-color: rgba(199,155,116,0.4);
}

.conheca-card {
  background  : var(--card-bg);
  border-color: rgba(199,155,116,0.18);
}
.conheca-card:hover {
  border-color: rgba(199,155,116,0.4);
}

/* ── Stars rating ────────────────────── */
.star             { color: var(--revolux-amber) !important; }

/* ── Buttons ─────────────────────────── */
.btn-whatsapp {
  background   : rgba(23, 83, 71, 0.6);
  border-color : rgba(199,155,116,0.3);
  color        : var(--revolux-beige);
}
.btn-whatsapp:hover {
  background  : rgba(28, 102, 89, 0.85);
  border-color: rgba(199,155,116,0.6);
}
.btn-whatsapp .wa-icon { color: var(--revolux-amber); }

.btn-instagram {
  background   : rgba(23, 83, 71, 0.6);
  border-color : rgba(199,155,116,0.3);
  color        : var(--revolux-beige);
}
.btn-instagram:hover {
  background  : rgba(28, 102, 89, 0.85);
  border-color: rgba(199,155,116,0.6);
}

/* ── Scroll-to-top button ────────────── */
.scroll-top {
  background: var(--revolux-green-deep);
  border: 1px solid var(--revolux-amber);
}
.scroll-top:hover {
  background: var(--revolux-amber);
}

/* ── Section divider ─────────────────── */
.section-divider {
  background: var(--revolux-green-line);
}

/* ── Arrow icons ─────────────────────── */
.product-card__arrow {
  background: rgba(19,48,44,0.7);
  border: 1px solid rgba(199,155,116,0.35);
}
.product-card__arrow svg path {
  stroke: var(--revolux-beige);
}

/* ── Coupon card glow on hover ───────── */
.coupon-card:hover {
  box-shadow: 0 20px 50px rgba(0,0,0,0.45),
              0 0 0 1px rgba(199,155,116,0.25);
}

/* ── Conheca card image border ───────── */
.conheca-card img {
  border: 2px solid rgba(199,155,116,0.3);
}

/* ── Product card arrow bg on hover ─── */
.product-card:hover .product-card__arrow {
  background: rgba(23, 83, 71, 0.85);
}

/* ══════════════════════════════════════════
   4. ANIMATIONS — color tokens only
      (nenhuma keyframe ou timing alterado)
   ══════════════════════════════════════════ */

/* Glow pulse → amber */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0px  rgba(199,155,116,0); }
  50%       { box-shadow: 0 24px 60px rgba(0,0,0,0.55),
                          0 0 28px rgba(199,155,116,0.2); }
}

/* ══════════════════════════════════════════
   5. MOBILE — inherits all tokens above
      (nenhuma media query de layout alterada)
   ══════════════════════════════════════════ */
