/* ==========================================================================
   FERNANDA MEYER — COMPONENTS
   Built strictly from tokens.css + base.css. Every component must work
   correctly in both [data-mode="autoridade"] and [data-mode="dossie"].
   ========================================================================== */

/* ==========================================================================
   BUTTONS & CTAs
   Editorial, not SaaS: sharp corners, mono uppercase label, no drop shadow,
   no rounded-pill. Motion is a decisive color swap, not a scale/bounce.
   ========================================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-nav);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  border: 1px solid currentColor;
  border-radius: var(--radius-none);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.btn:active{ transform: translateY(1px); }

/* Fixed burgundy, not var(--color-accent): the accent token is tuned per
   mode for TEXT legibility (lightened on the dark ground), which would
   fail as a fill behind white button text — verified 2.4:1 with the
   autoridade accent value, vs 8.2:1 with the fixed burgundy. Buttons need a
   consistently dark, saturated fill in both modes. */
.btn-primary{
  background: var(--color-burgundy);
  color: #fff;
  border-color: var(--color-burgundy);
}
.btn-primary:hover{ background: var(--color-burgundy-hover); border-color: var(--color-burgundy-hover); }

.btn-secondary{
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}
.btn-secondary:hover{ background: var(--color-text); color: var(--color-bg); }

.btn-dark{
  background: var(--color-dark);
  color: var(--color-light);
  border-color: var(--color-dark);
}
.btn-dark:hover{ background: #352821; }

.btn-light{
  background: var(--color-light);
  color: var(--color-dark);
  border-color: var(--color-dark);
}
.btn-light:hover{ background: #CBC0AB; }

.btn-whatsapp{
  background: var(--color-dark);
  color: var(--color-light);
  border-color: var(--color-dark);
  position: relative;
  padding-left: var(--space-4);
}
.btn-whatsapp::before{
  content: "";
  width: 6px; height: 6px;
  background: #3FA65A;
  display: inline-block;
  margin-right: var(--space-1);
}
.btn-whatsapp:hover{ background: #352821; }

/* Text / arrow links — the primary CTA voice throughout the site */
.link-text{
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-nav);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color var(--duration-fast) var(--ease-standard);
}
.link-text:hover{ color: var(--color-accent); }

.link-arrow{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-nav);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-text);
  text-decoration: none;
}
.link-arrow .arrow{ display: inline-block; transition: transform var(--duration-base) var(--ease-decisive); }
.link-arrow:hover{ color: var(--color-accent); }
.link-arrow:hover .arrow{ transform: translateX(4px); }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
/* Background/text color come from [data-mode] (see tokens.css) — the header
   carries whichever mode the section under it is currently in, set on load
   and kept in sync on scroll. This replaced an earlier "transparent over a
   dark hero" version: with no reliable way to guarantee cascade order against
   a page's own dark first section, that version silently rendered dark text
   on a dark hero at first paint. Solid + mode-synced is the robust version. */
.site-header.is-scrolled{ border-bottom-color: var(--color-border); box-shadow: var(--shadow-sm); }
.site-header .logo{
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
}
/* MD07: white-ink, transparent-background lockup (logo-fernanda-meyer-white.png,
   derived from the original black-on-white mark via a luminance→alpha
   invert) — reads directly on the near-black header/footer with no white
   plate behind it. Height-constrained so the wide horizontal lockup reads
   correctly as a compact mark. */
.site-header .logo img{ height: 30px; width: auto; display: block; }
.site-footer .logo-mark img{ height: 40px; width: auto; display: block; }
.site-header nav{ display: flex; gap: var(--space-5); }
.site-header nav a{
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-nav);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  text-decoration: none;
  color: inherit;
  opacity: 0.85;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.site-header nav a:hover{ opacity: 1; }
.site-header .header-actions{ display: flex; align-items: center; gap: var(--space-4); }
/* CTA text shortens before it ever wraps or squeezes the nav — MD05 §2:
   never shrink the nav/CTA type scale to make it fit, adapt the copy instead. */
.site-header .btn-primary .cta-short{ display: none; }
@media (max-width: 1180px){
  .site-header .btn-primary .cta-full{ display: none; }
  .site-header .btn-primary .cta-short{ display: inline; }
}

.nav-toggle{
  display: none;
  background: none; border: none; color: inherit; cursor: pointer;
  width: 28px; height: 20px; position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: currentColor;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.nav-toggle span{ top: 9px; }
.nav-toggle span::before{ top: -8px; }
.nav-toggle span::after{ top: 8px; }

.nav-toggle[aria-expanded="true"] span{ background: transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 768px){
  .site-header nav{ display: none; }
  .nav-toggle{ display: block; }
}

/* Mobile menu panel — the toggle's counterpart, same [data-mode] contract as
   the header so it always matches the header's current mode exactly. */
.mobile-menu{
  display: none;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-2) var(--gutter) var(--space-6);
  border-bottom: var(--border-hairline);
}
.mobile-menu.is-open{ display: flex; }
.mobile-menu a:not(.btn){
  font-family: var(--font-body); font-weight: 500; font-size: var(--text-nav); text-transform: uppercase;
  letter-spacing: var(--tracking-nav); text-decoration: none; color: inherit;
}
@media (min-width: 769px){ .mobile-menu{ display: none !important; } }

/* ==========================================================================
   CARDS & CONTENT BLOCKS — only the components the site actually needs.
   ========================================================================== */

/* Editorial block: the base "text + optional image" unit used everywhere */
.editorial-block{ display: grid; gap: var(--space-5); }
.editorial-block .eyebrow{ font-family: var(--font-body); font-weight: 600; font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-accent); }

/* Service presentation: Consultoria / Mentoria / VisageVision — no icon, no card shadow */
.service-block{
  border: var(--border-hairline);
  padding: var(--space-6);
  background: var(--color-surface);
}
.service-block .service-label{ font-family: var(--font-body); font-weight: 600; font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-muted); }
.service-block h3{ margin-top: var(--space-2); }
.service-block p{ color: var(--color-muted); margin-top: var(--space-3); max-width: var(--container-text); }
.service-block .link-arrow{ margin-top: var(--space-5); }

/* Quote: display italic, no quotation marks glyph, attribution in mono */
.quote-block{ max-width: 44ch; }
.quote-block .mark{ font-family: var(--font-body); font-weight: 600; font-size: var(--text-caption); color: var(--color-accent); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.quote-block blockquote{ margin: var(--space-3) 0 0; }
.quote-block cite{ display: block; margin-top: var(--space-4); font-style: normal; font-family: var(--font-body); font-size: var(--text-caption); color: var(--color-muted); }

/* Testimonial: same visual family as quote, plus a labeled audience tag —
   never mixes Consultoria and Mentoria testimonials in one row */
.testimonial{ border-top: var(--border-hairline); padding-top: var(--space-5); }
.testimonial .audience-tag{
  display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 10px; text-transform: uppercase;
  letter-spacing: var(--tracking-label); border: 1px solid var(--color-border); padding: 2px 8px; color: var(--color-muted);
  margin-bottom: var(--space-3);
}
.testimonial .audience-tag.client{ color: var(--color-accent); border-color: var(--color-accent); }

/* Media proof: press mentions — logo/name + context line, mono metadata,
   confirm-tag reserved for anything needing usage rights */
.media-proof{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; border-top: var(--border-hairline); }
.media-proof:first-child{ border-top: none; }
.media-proof .outlet{ font-family: var(--font-display); font-size: 1.125rem; }
.media-proof .meta{ font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-muted); text-align: right; }

/* Method block: VisageVision® / Lapide-se — institutional seal treatment,
   distinct from service-block (no price, no "buy" framing by default) */
.method-block{ border: 1px solid var(--color-text); padding: var(--space-7) var(--space-6); text-align: center; }
.method-block .seal{ font-family: var(--font-body); font-weight: 600; font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-accent); }
.method-block h3{ margin-top: var(--space-3); }
.method-block p{ max-width: var(--container-text); margin: var(--space-3) auto 0; color: var(--color-muted); }

/* Product block: method-block + acquisition — used only when a direct
   purchase path is confirmed (see VisageVision® scenario toggle) */
.product-block{ border: 1px solid var(--color-accent); padding: var(--space-6); }
.product-block .scenario-label{ font-family: var(--font-body); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-accent); }
.product-block .includes{ list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.product-block .includes li{ font-size: var(--text-small); padding-left: var(--space-4); position: relative; }
.product-block .includes li::before{ content: "—"; position: absolute; left: 0; color: var(--color-muted); }

/* Image gallery: asymmetric, not a uniform grid of equal thumbnails */
.gallery{ display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); }
.gallery > *:nth-child(1){ grid-column: span 4; }
.gallery > *:nth-child(2){ grid-column: span 2; }
.gallery > *:nth-child(3){ grid-column: span 2; }
.gallery > *:nth-child(4){ grid-column: span 4; }
@media (max-width: 768px){
  .gallery{ grid-template-columns: repeat(2, 1fr); }
  .gallery > *{ grid-column: span 1 !important; }
}

/* FAQ: hairline-divided disclosure list, no accordion chevron icon —
   a mono "+" / "–" does the job */
.faq-item{ border-top: var(--border-hairline); }
.faq-item:last-child{ border-bottom: var(--border-hairline); }
.faq-item summary{
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) 0; cursor: pointer; font-family: var(--font-body); font-weight: 600; list-style: none;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{ content: "+"; font-family: var(--font-mono); color: var(--color-accent); }
.faq-item[open] summary::after{ content: "–"; }
.faq-item .faq-a{ padding: 0 0 var(--space-4); color: var(--color-muted); max-width: var(--container-text); }

/* ==========================================================================
   METHOD FEATURE — evolution of .method-block for Home/Métodos hub, carries
   more typographic weight so Lapide-se/VisageVision® read as intellectual
   property, not as items in a service list (MD03 §G). */
.method-feature{ text-align: left; padding: var(--space-7) 0; border-top: var(--border-hairline); }
.method-feature:last-child{ border-bottom: var(--border-hairline); }
.method-feature .seal{ font-family: var(--font-body); font-weight: 600; font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-accent); }
.method-feature .method-name{ font-family: var(--font-display); font-size: var(--text-display); margin-top: var(--space-3); line-height: 1.05; }
.method-feature p{ max-width: 56ch; margin-top: var(--space-4); color: var(--color-muted); }

/* ==========================================================================
   CASE STUDY — a full editorial case (Resultados / Home prova), never a
   testimonial card. Composed of a labeled kicker, a short real quote, and
   an optional image pair (antes/depois). Only real, documented content;
   never invents a "problema"/"processo" beyond what the source material
   shows (MD03 §H). */
.case-study{ padding-block: var(--space-8); border-top: var(--border-hairline); }
.case-study:last-child{ border-bottom: var(--border-hairline); }
.case-study .case-kicker{ font-family: var(--font-body); font-weight: 600; font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-accent); }
.case-study h3{ font-family: var(--font-display); font-size: var(--text-h2); margin-top: var(--space-3); max-width: 26ch; }
.case-study .case-quote{ font-family: var(--font-display); font-style: italic; font-size: var(--text-quote); line-height: var(--leading-snug); max-width: 34ch; margin-top: var(--space-5); }
.case-study .case-quote cite{ display: block; margin-top: var(--space-4); font-style: normal; font-family: var(--font-body); font-size: var(--text-caption); color: var(--color-muted); }
.case-study .case-media{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-6); }
@media (max-width: 640px){ .case-study .case-media{ grid-template-columns: 1fr; } }

/* CTA section: the asymmetric dual-conversion block (Home §7, Contato) */
.cta-split{ display: grid; grid-template-columns: 1.6fr 1fr; gap: 1px; background: var(--color-border); border: var(--border-hairline); }
@media (max-width: 640px){ .cta-split{ grid-template-columns: 1fr; } }
.cta-split .primary{ background: var(--color-dark); color: var(--color-light); padding: var(--space-7); }
.cta-split .secondary{ background: var(--color-surface); color: var(--color-text); padding: var(--space-6); }
.cta-split .eyebrow{ font-family: var(--font-body); font-weight: 600; font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.cta-split .primary .eyebrow{ color: #D9B27E; }
/* --color-secondary (camel) alone is ~2.4:1 on the light surface — darkened
   via mix for AA text contrast; the raw token is unchanged for other uses. */
.cta-split .secondary .eyebrow{ color: color-mix(in srgb, var(--color-secondary) 50%, var(--color-text) 50%); }
.cta-split h3{ margin-top: var(--space-3); }

/* Footer */
.site-footer{ background: var(--color-surface); color: var(--color-text); padding: var(--space-8) 0 var(--space-6); border-top: var(--border-hairline); }
.site-footer .brand{ font-family: var(--font-display); font-size: 1.5rem; }
.site-footer .tagline{ font-size: var(--text-small); color: var(--color-muted); margin-top: var(--space-2); max-width: 30ch; }
.site-footer h5{ font-family: var(--font-body); font-weight: 600; font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-muted); margin: 0 0 var(--space-3); }
.site-footer ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-small); }
.site-footer .legal{ margin-top: var(--space-7); padding-top: var(--space-5); border-top: var(--border-hairline); font-family: var(--font-body); font-size: var(--text-caption); color: var(--color-muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }