/* Techduto 2026 — Main Stylesheet (Design System) */
/* Adapted from preview-homepage-v3.css for WordPress */

/* ========== RESET & BASE ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red: #EE3124;
  --dark-red: #AA2C1C;
  --very-dark-red: #6B2111;
  --salmon: #FBC3B4;
  --gray6: #A7A8A9;
  --gray9: #777B83;
  --gray4: #C1C5CA;
  --gray11: #53565A;
  --dark-bg: #2b2b2b;
  --light-bg: #f8f9fa;
  --white: #ffffff;
  --font: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #333;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  padding-top: 0;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ========== HIGHLIGHT BAR (Brand Guide) ========== */
.section-header {
  margin-bottom: 28px;
  position: relative;
}

.section-header .bars {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 12px;
}

.section-header .bar-gray {
  height: 4px; width: 120px;
  background: var(--gray6); margin-bottom: 4px;
}

.section-header .bar-red {
  height: 6px; width: 100px;
  background: var(--red);
}

.section-header h2 {
  font-size: 32px; font-weight: 700;
  color: var(--red);
  display: flex; align-items: center; gap: 10px;
}

.section-header h2 .marker {
  color: var(--red); font-size: 18px; line-height: 1;
}

/* ========== PILL BUTTON ========== */
.btn-pill {
  display: inline-block; padding: 10px 28px;
  border-radius: 50px; font-weight: 600; font-size: 14px;
  cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  border: none; text-transform: uppercase; letter-spacing: 0.5px;
}
.btn-pill-red { background: var(--red-dark); color: var(--white); }
.btn-pill-red:hover { background: var(--dark-red); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.btn-pill-white { background: var(--white); color: var(--red); }
.btn-pill-white:hover { background: #f0f0f0; transform: translateY(-1px); }
.btn-pill-green { background: #25D366; color: var(--white); }
.btn-pill-green:hover { background: #1da851; transform: translateY(-1px); }

/* ========== REVEAL DE CARDS (entrada por scroll) ==========
   Par de classes aplicado por assets/js/main.js. Substitui (03/08/2026) o estilo
   inline que o JS escrevia em opacity/transform/transition — inline vencia a folha e
   matava silenciosamente todo `:hover { transform }` nas 15 classes de card, o que
   fazia duas seções da MESMA página se comportarem diferente.
   AMBAS são adicionadas pelo JS, nunca pelo HTML: sem JS, com reduced-motion, ou se o
   IntersectionObserver não disparar, o card nunca recebe .tdt-reveal e fica visível.
   Usa ANIMATION, não transition, de propósito: os CSS de página carregam depois de
   base.css e declaram `transition` própria nos cards (transform/box-shadow) com a mesma
   especificidade — uma transition aqui perderia a disputa e o fade sumiria em 6 tipos de
   card. Animation não compete com transition, então o reveal funciona em todos e o
   `:hover` continua com a duração que cada página definiu.
   Sem `forwards`: ao terminar, o transform volta ao valor da folha, deixando o hover livre. */
.tdt-reveal   { opacity: 0; }
.tdt-revealed { opacity: 1; animation: tdt-reveal-in .45s ease; }
@keyframes tdt-reveal-in {
  from { opacity: 0; transform: translateY(24px); }
}