/* ============================================================
   PULP STUDIOS — EDITORIAL DESIGN SYSTEM (override layer)
   Loaded LAST so it overrides styles.css and styles-pages.css.
   Implements the editorial premium spec literally:
     - Tipografia grotesca (Inter 500, tracking -0.04em)
     - 48-col grid + full-bleed
     - Easings, durations, spacings exatos
     - Border-radius hierarchy (0 dominante, pills CTA)
     - Hover de imagem lento (2s)
     - Sem sombras pesadas
   ============================================================ */

/* ============================================
   1. DESIGN TOKEN SYSTEM
   ============================================ */
:root {
  /* Spacing (do spec, exatos) */
  --pad-base:   clamp(0.75rem, 1.5vw, 1.25rem);
  --pad-medium: clamp(3rem, 6vw, 6rem);
  --pad-large:  clamp(4rem, 8vw, 8rem);
  --pad-huge:   clamp(6rem, 10vw, 10rem);
  --pad-x:      clamp(1em, 1.5vw, 2em);

  /* Easings (do spec) */
  --ease-primary:   cubic-bezier(0.19, 1, 0.22, 1);
  --ease-cinematic: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-strong:    cubic-bezier(0.65, 0, 0, 1);
  --ease-inout:     cubic-bezier(0.645, 0.045, 0.355, 1);

  /* Typography */
  --tracking-tight: -0.04em;
  --font-display: 'Inter', 'Neue Haas Grotesk Text', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Pulp brand colors (preserved) */
  --red: #FE0000;
}

/* ============================================
   2. BASE — replaces Zen Dots + Outfit globally
   ============================================ */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea,
select {
  font-family: var(--font-display);
  font-weight: 500;
  font-feature-settings: 'ss01', 'cv11';
}

body {
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

/* Kill bold everywhere (spec: NUNCA bold/700) */
strong, b {
  font-weight: 600;
}

/* Override every Zen Dots usage in one shot */
.hero-headline,
.hero-headline .word,
.hero-headline .red,
.big-headline,
.page-headline,
.full-headline,
.cta-headline,
.mega-headline,
.mega-headline .huge,
.mega-headline .huge-sub,
.nav-pill-label,
.section-label,
.section-label span,
.menu-card-pill,
.menu-card-name,
.bento-feature-title,
.bento-stat-card h3,
.bento-pill,
.bento-invest-label strong,
.bento-invest-btn,
.bento-media-label,
.bento-media-label span,
.service-num,
.service-tag,
.service-card h3,
.service-tag-big,
.visual-p,
.btn,
.full-tag,
.filter-btn,
.divider-track,
.numero-num,
.numero-label,
.numero-sub,
.team-name,
.team-index,
.valor-num,
.valor-card h3,
.etapa-num,
.etapa-content h3,
.meta-label,
.meta-value,
.stat-num,
.stat-label,
.footer-tagline,
.footer-col h4,
.footer-logo span,
.case-modal h2,
.case-modal-block h4,
.nav-menu-links a,
.nav-menu-cta,
.contact-info h2,
.contact-form-wrap h2,
.form-label {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
}

/* ============================================
   3. HEADINGS — exact clamp() scale from spec
   ============================================ */
.hero-headline {
  font-size: clamp(6em, 13vw, 14em) !important;
  line-height: 0.8 !important;
  letter-spacing: var(--tracking-tight) !important;
  text-transform: none !important;
  margin-bottom: clamp(2rem, 3vw, 3rem) !important;
}

.hero-headline .line {
  display: block;
  overflow: visible;
  padding-bottom: 0 !important;
}

.hero-headline .word {
  display: inline-block;
  letter-spacing: var(--tracking-tight) !important;
}

/* PERFORMANCE word — preserve the difference blend, just retune */
.hero-headline .red {
  color: #ffffff;
  font-size: clamp(6em, 13.5vw, 14.5em) !important;
  letter-spacing: var(--tracking-tight) !important;
  mix-blend-mode: difference;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
}

.big-headline,
.page-headline,
.full-headline,
.cta-headline {
  font-size: clamp(3.2em, 6.5vw, 6.5em) !important;
  line-height: 0.85 !important;
  letter-spacing: var(--tracking-tight) !important;
  text-transform: none;
  margin-bottom: clamp(2rem, 3vw, 3rem) !important;
}

.big-headline em,
.page-headline em,
.full-headline em,
.cta-headline em {
  font-style: normal;
  color: var(--red);
  font-weight: 500 !important;
}

.big-headline .reveal-line,
.page-headline .reveal-line,
.full-headline .reveal-line,
.cta-headline .reveal-line {
  padding-bottom: 0.05em !important;
}

/* Mega — for the "15 DIAS" section */
.mega-headline .huge {
  font-size: clamp(6.5em, 14vw, 15em) !important;
  line-height: 0.8 !important;
  letter-spacing: var(--tracking-tight) !important;
  font-weight: 500 !important;
}

.mega-headline .huge-sub {
  font-size: clamp(2em, 4vw, 4em) !important;
  line-height: 1 !important;
  letter-spacing: var(--tracking-tight) !important;
  font-weight: 500 !important;
}

/* ============================================
   4. EYEBROW — section labels use mono
   ============================================ */
.section-label,
.section-label span {
  font-family: var(--font-mono) !important;
  font-size: clamp(0.6em, 0.7vw, 0.7rem) !important;
  letter-spacing: 0.18em !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  color: var(--red);
}

/* ============================================
   5. BODY TEXT
   ============================================ */
.hero-sub,
.section-intro,
.vsl-intro,
.positioning-text,
.manifesto-text,
.prazo-text p,
.service-info > p,
.pulp-full p,
.cta-final p,
.page-sub,
.team-bio,
.valor-card p,
.faq-item p,
.etapa-content p {
  font-size: clamp(1em, 1.2vw, 1.3em) !important;
  line-height: 1.45 !important;
  letter-spacing: -0.005em !important;
  font-weight: 500 !important;
}

/* ============================================
   6. CONTAINER — FULL BLEED
   ============================================ */
.container {
  max-width: none !important;
  width: 100% !important;
  padding-left: var(--pad-x) !important;
  padding-right: var(--pad-x) !important;
  margin: 0 !important;
}

/* Restore content alignment for narrow centered blocks */
.full-content,
.cta-final .container > * {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   7. SECTION PADDING — new spacing scale
   ============================================ */
.vsl,
.positioning,
.bento-section,
.prazo,
.resultados,
.metodologia,
.faq,
.cta-final,
.service-detail,
.pulp-full,
.cases-grid-section,
.sobre-manifesto,
.sobre-numeros,
.sobre-time,
.sobre-valores,
.featured-quote,
.contact-section,
.method,
.servicos-resumo {
  padding-top: var(--pad-medium) !important;
  padding-bottom: var(--pad-medium) !important;
}

.hero {
  padding-left: var(--pad-x) !important;
  padding-right: var(--pad-x) !important;
}

.page-hero {
  padding-top: clamp(8rem, 14vw, 14rem) !important;
  padding-bottom: var(--pad-large) !important;
}

/* ============================================
   8. BORDER RADIUS — Editorial Flat (0px dominant)
   ============================================ */
.numero-card,
.valor-card,
.team-card,
.team-card-media,
.team-card-info,
.bento-item,
.bento-feature,
.bento-invest,
.bento-stat-card,
.bento-media-card,
.case-card,
.case-card--grid,
.grid-card-media,
.grid-card-info,
.case-modal,
.case-modal-media,
.case-modal-body,
.contact-form-wrap,
.form-field,
.form-input,
.form-textarea,
.menu-card,
.menu-card-visual,
.service-visual,
.visual-box,
.visual-browser,
.visual-chart,
.bento-chart,
.bento-qr,
.bento-feature-cta,
.team-index,
.bento-pill,
.full-tag,
.faq-item {
  border-radius: 0 !important;
}

/* ============================================
   9. BUTTONS — pill system (1.1875rem)
   ============================================ */
.btn {
  border-radius: 1.1875rem !important;
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem !important;
  transition: 0.35s var(--ease-primary) !important;
  gap: 0.6rem;
}

.btn-lg {
  padding: 0.95rem 1.85rem !important;
  font-size: 0.875rem !important;
}

.btn-primary {
  background: var(--red);
  color: #F6F6F6;
  border: 1px solid var(--red);
}

.btn-primary:hover {
  background: transparent;
  color: var(--red);
  box-shadow: none !important;
}

.btn-ghost {
  border: 1px solid currentColor;
  background: transparent;
}

/* Filter pills (cases page) */
.filter-btn {
  border-radius: 100em !important;
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.04em !important;
  padding: 0.55em 1.2em !important;
  transition: 0.35s var(--ease-primary) !important;
}

/* Bento CTAs */
.bento-invest-btn {
  border-radius: 1.1875rem !important;
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  transition: 0.35s var(--ease-primary) !important;
}

/* Nav menu CTA pill */
.nav-menu-cta {
  border-radius: 100em !important;
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  transition: 0.35s var(--ease-primary) !important;
}

/* Eyebrow CTA (small uppercase next to forms etc) */
.bento-stat-header span:first-child,
.bento-media-label span,
.meta-label,
.team-role,
.full-tag,
.bento-pill {
  font-family: var(--font-mono) !important;
  font-size: clamp(0.6em, 0.7vw, 0.72rem) !important;
  letter-spacing: 0.15em !important;
  font-weight: 500 !important;
  text-transform: uppercase;
}

/* ============================================
   10. CARD ASPECT-RATIO UTILITIES (available globally)
   ============================================ */
.card-square    { aspect-ratio: 1 / 1; }
.card-portrait  { aspect-ratio: 2 / 3; }
.card-landscape { aspect-ratio: 3 / 2; }
.card-content   { aspect-ratio: 1.2 / 1; }
.card-cta       { aspect-ratio: 1 / 1.4; }
.card-service   { aspect-ratio: 1 / 1.2; }
.card-feature   { aspect-ratio: 1 / 1.3; }
.card-slide     { aspect-ratio: 2 / 1; }

/* ============================================
   11. IMAGE HOVER — SLOW PREMIUM (2s)
   ============================================ */
.team-card-media img,
.grid-card-media img,
.bento-media-card img,
.bento-media-card video,
.case-card img,
.menu-card-visual {
  transition: transform 2s var(--ease-primary) !important;
}

.team-card:hover .team-card-media img,
.case-card--grid:hover .grid-card-media img,
.case-card:hover img,
.bento-media-card:hover video {
  transform: scale(1.08) !important;
}

/* ============================================
   12. KILL HEAVY SHADOWS — editorial is flat
   ============================================ */
.team-card,
.team-card:hover,
.valor-card,
.valor-card:hover,
.numero-card,
.numero-card:hover,
.bento-item,
.bento-item:hover,
.case-card,
.case-card:hover,
.btn-primary:hover,
.case-modal {
  box-shadow: none !important;
}

/* Subtle red glow only on key CTAs */
.btn-primary:hover {
  box-shadow: 0 0 0 1px var(--red) inset !important;
}

/* ============================================
   13. TEAM CARDS — editorial restyle
   ============================================ */
.team-name {
  font-size: clamp(1.5em, 2vw, 2.2em) !important;
  line-height: 0.9 !important;
  letter-spacing: var(--tracking-tight) !important;
}

.team-role,
.team-divider {
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  font-size: 0.7em !important;
  letter-spacing: 0.18em !important;
}

.team-bio {
  font-size: 0.95em !important;
  line-height: 1.5 !important;
  letter-spacing: -0.005em !important;
}

.team-index {
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.2em !important;
  border-radius: 100em !important;
  padding: 0.45rem 0.85rem !important;
}

/* ============================================
   14. NUMERO CARDS — bigger, flatter
   ============================================ */
.numero-num {
  font-size: clamp(4em, 7vw, 6em) !important;
  line-height: 0.85 !important;
  letter-spacing: var(--tracking-tight) !important;
  font-weight: 500 !important;
}

.numero-label {
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.18em !important;
  font-weight: 500 !important;
}

.numero-sub {
  font-weight: 500 !important;
}

/* ============================================
   15. VALOR CARDS — editorial cards
   ============================================ */
.valor-num {
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.22em !important;
  font-weight: 500 !important;
  margin-bottom: 1.5rem !important;
}

.valor-card h3 {
  font-size: clamp(1.4em, 1.8vw, 1.8em) !important;
  line-height: 1.05 !important;
  letter-spacing: var(--tracking-tight) !important;
  font-weight: 500 !important;
}

/* ============================================
   16. BENTO — editorial typography
   ============================================ */
.bento-feature-title {
  font-size: clamp(2.2em, 4vw, 3.8em) !important;
  line-height: 0.9 !important;
  letter-spacing: var(--tracking-tight) !important;
  font-weight: 500 !important;
}

.bento-stat-card h3 {
  font-size: clamp(1.15em, 1.4vw, 1.5em) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  font-weight: 500 !important;
}

.bento-pill {
  font-size: 1.6em !important;
  letter-spacing: -0.03em !important;
}

/* ============================================
   17. SERVICES (home horizontal scroll)
   ============================================ */
.service-num {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.22em !important;
  font-weight: 500 !important;
}

.service-tag {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.22em !important;
  font-weight: 500 !important;
}

.service-card h3 {
  font-size: clamp(1.5em, 2.4vw, 2.4em) !important;
  line-height: 1 !important;
  letter-spacing: var(--tracking-tight) !important;
  font-weight: 500 !important;
}

.service-tag-big {
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.22em !important;
  font-weight: 500 !important;
}

.service-title {
  font-size: clamp(2.6em, 5vw, 5em) !important;
  line-height: 1 !important;
  letter-spacing: var(--tracking-tight) !important;
  font-weight: 500 !important;
}

/* ============================================
   18. METODOLOGIA — etapas
   ============================================ */
.etapa-num {
  font-family: var(--font-mono) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.18em !important;
  font-weight: 500 !important;
}

.etapa-content h3 {
  font-size: clamp(1.4em, 2vw, 2em) !important;
  letter-spacing: var(--tracking-tight) !important;
  font-weight: 500 !important;
}

/* ============================================
   19. PRAZO stats
   ============================================ */
.stat-num {
  font-size: clamp(2.5em, 4vw, 4em) !important;
  letter-spacing: var(--tracking-tight) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

.stat-label {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  font-weight: 500 !important;
}

/* ============================================
   20. RED DIVIDER MARQUEE — Inter, monoesque
   ============================================ */
.divider-track {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.22em !important;
}

/* ============================================
   21. NAV — progressive blur
   ============================================ */
.nav {
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.nav-pill-label {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.2em !important;
  font-weight: 500 !important;
}

.nav-menu-links a {
  font-size: clamp(2.4em, 5vw, 5em) !important;
  line-height: 1 !important;
  letter-spacing: var(--tracking-tight) !important;
  font-weight: 500 !important;
}

/* ============================================
   22. FAQ
   ============================================ */
.faq-item summary > span:first-child {
  font-family: var(--font-display) !important;
  font-size: clamp(1.05em, 1.4vw, 1.5em) !important;
  line-height: 1.1 !important;
  letter-spacing: var(--tracking-tight) !important;
  font-weight: 500 !important;
}

.faq-item {
  border-radius: 0 !important;
}

/* ============================================
   23. FOOTER — clean
   ============================================ */
.footer-tagline {
  font-size: clamp(1.4em, 2vw, 1.8em) !important;
  letter-spacing: var(--tracking-tight) !important;
  font-weight: 500 !important;
}

.footer-col h4 {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.2em !important;
  font-weight: 500 !important;
}

.footer-col a,
.footer-col span {
  font-size: 0.95rem !important;
  font-weight: 500 !important;
}

.footer-logo span {
  font-size: 0.95rem !important;
  letter-spacing: 0.05em !important;
}

/* ============================================
   24. CONTACT FORM
   ============================================ */
.form-input,
.form-textarea {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  letter-spacing: -0.005em !important;
  transition: 75ms linear, border-color 0.2s var(--ease-primary) !important;
}

.form-label {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.18em !important;
  font-weight: 500 !important;
}

/* ============================================
   25. GLOBAL TRANSITIONS — apply spec easings
   ============================================ */
a, button {
  transition-timing-function: var(--ease-primary) !important;
}

.nav-toggle,
.theme-toggle {
  transition: 0.35s var(--ease-primary) !important;
}

/* ============================================
   26. PROGRESSIVE BLUR utility (use over hero)
   ============================================ */
.progressive-blur {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.progressive-blur::before,
.progressive-blur::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.progressive-blur::before {
  bottom: 0;
  height: 18vh;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
  mask-image: linear-gradient(to top, black 0%, transparent 100%);
}

.progressive-blur::after {
  bottom: 0;
  height: 9vh;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
  mask-image: linear-gradient(to top, black 0%, transparent 100%);
}

/* ============================================
   27. SCROLL-REVEAL HEADLINE — dim → bright via JS
   ============================================ */
.headline-fade {
  color: rgba(246, 246, 246, 0.18);
  transition: color 0.6s var(--ease-primary);
}

[data-theme="light"] .headline-fade {
  color: rgba(11, 11, 11, 0.2);
}

.headline-fade.is-revealed {
  color: var(--text);
}

.headline-fade em {
  color: rgba(254, 0, 0, 0.25);
  transition: color 0.6s var(--ease-primary);
}

.headline-fade.is-revealed em {
  color: var(--red);
}

/* ============================================
   28. MENU CARDS — flatten
   ============================================ */
.menu-card {
  border-radius: 0 !important;
}

.menu-card-pill,
.menu-card-name {
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
}

/* ============================================
   29. PAGE SUB / HERO SUB readability
   ============================================ */
.hero-sub {
  font-size: clamp(1.05em, 1.3vw, 1.4em) !important;
  line-height: 1.45 !important;
  max-width: 36em;
  letter-spacing: -0.005em !important;
  font-weight: 500 !important;
}

.page-sub {
  font-size: clamp(1.1em, 1.4vw, 1.5em) !important;
  line-height: 1.4 !important;
  max-width: 36em;
  letter-spacing: -0.005em !important;
  font-weight: 500 !important;
}

/* ============================================
   30. RESPONSIVE — keep editorial scale sane
   ============================================ */
@media (max-width: 768px) {
  body { font-size: 14px; }
  .hero-headline { font-size: clamp(3.5em, 14vw, 6em) !important; }
  .big-headline,
  .page-headline,
  .full-headline,
  .cta-headline { font-size: clamp(2.4em, 8vw, 4em) !important; }
  .mega-headline .huge { font-size: clamp(4em, 16vw, 8em) !important; }
}