/* ============================================
   MÓNICA SILVA — Mentora de Comunicação & Negócio
   ============================================ */

@font-face {
  font-family: 'Boowie';
  src: url('../fonts/Boowie3.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'SansSerifFLF';
  src: url('../fonts/SansSerifFLF.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SansSerifFLF';
  src: url('../fonts/SansSerifFLF-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SansSerifFLF';
  src: url('../fonts/SansSerifBldFLF.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --- */
:root {
  --charcoal:   #1F2122;
  --navy:       #363644;
  --taupe:      #9B8F86;
  --terracotta: #865137;
  --champagne:  #D7BDA6;
  --cream:      #EFECE7;
  --white:      #FFFFFF;

  --font-display: 'Boowie', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'SansSerifFLF', 'Source Sans 3', Arial, sans-serif;

  --nav-h: 76px;
  --max-w: 1280px;
  --r-card: 24px;
  --r-pill: 999px;

  --sh-soft:   0 4px 24px rgba(31,33,34,.08);
  --sh-med:    0 12px 40px rgba(31,33,34,.12);
  --sh-strong: 0 24px 60px rgba(31,33,34,.22);

  --ease: cubic-bezier(.25,.46,.45,.94);
}

/* --- Reset --- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--charcoal);
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; border:none; background:none; }

/* Global: prevent headings from overflowing */
h1, h2, h3, h4 {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

/* Sections with overflow:hidden must not clip text — contain only backgrounds */
section { overflow-x: hidden; }

/* --- Container --- */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
}

/* ============================================
   NAVIGATION
   ============================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: var(--nav-h);
  background: var(--charcoal);
  border-bottom: 1px solid rgba(215,189,166,.1);
  transition: background .4s var(--ease);
}
.nav-inner {
  max-width: var(--max-w);
  height: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Logo */
.nav-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}
.nav-symbol {
  height: 46px;
  width: auto;
  filter: invert(1);
  mix-blend-mode: screen;
  flex-shrink: 0;
}
.nav-brand-text { display:flex; flex-direction:column; line-height:1; }
.nav-brand-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: .12em;
  color: var(--cream);
}
.nav-brand-role {
  font-family: var(--font-body);
  font-size: .52rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-top: 3px;
}

/* Links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
}
.nav-links a {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--champagne);
  position: relative;
  transition: color .3s;
}
.nav-links a::after {
  content:'';
  position: absolute;
  bottom: -3px; left:0; right:0;
  height: 1px;
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-links a:hover { color: var(--cream); }
.nav-links a:hover::after { transform: scaleX(1); }

/* CTA nav button */
.nav-cta {
  font-size: .68rem !important;
  letter-spacing: .2em !important;
  color: var(--charcoal) !important;
  background: var(--champagne);
  padding: .6rem 1.5rem;
  border-radius: var(--r-pill);
  transition: background .3s, color .3s !important;
  white-space: nowrap;
}
.nav-cta::after { display:none !important; }
.nav-cta:hover { background: var(--terracotta); color: var(--cream) !important; }

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--champagne);
  transition: .3s;
}

/* Mobile overlay */
.nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 199;
  background: var(--charcoal);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}
.nav-mobile.open { display:flex; }
.nav-mobile a {
  font-family: var(--font-display);
  font-size: 2.25rem;
  letter-spacing: .08em;
  color: var(--cream);
  transition: color .3s;
}
.nav-mobile a:hover { color: var(--champagne); }
.nav-mobile-close {
  position: absolute;
  top: 1.5rem; right: 2rem;
  font-size: 2rem;
  color: var(--champagne);
  line-height: 1;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--terracotta);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 1rem 2.25rem;
  border-radius: var(--r-pill);
  transition: background .35s var(--ease), transform .2s, box-shadow .35s var(--ease);
}
.btn-primary:hover {
  background: var(--champagne);
  color: var(--charcoal);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(134,81,55,.35);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  color: var(--champagne);
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 1rem 2.25rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(215,189,166,.35);
  transition: all .35s var(--ease);
}
.btn-secondary:hover {
  border-color: var(--champagne);
  background: rgba(215,189,166,.1);
}
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--charcoal);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 1rem 2.25rem;
  border-radius: var(--r-pill);
  transition: background .35s, transform .2s;
}
.btn-dark:hover { background: var(--navy); transform: translateY(-2px); }

/* ============================================
   SECTION HELPERS
   ============================================ */
.section-eyebrow {
  display: block;
  font-size: .65rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 1rem;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem,4vw,3.75rem);
  line-height: 1.08;
  letter-spacing: .02em;
  color: var(--charcoal);
}
.section-title.light { color: var(--cream); }
.section-sub {
  font-size: 1rem;
  color: var(--taupe);
  line-height: 1.75;
  max-width: 560px;
}
.section-header { margin-bottom: 4rem; }
.section-header.centered { text-align:center; }
.section-header.centered .section-sub { margin: 1.25rem auto 0; }

/* Decorative line */
.deco-line {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.deco-line::before {
  content:'';
  width: 40px;
  height: 1px;
  background: var(--terracotta);
}

/* Pattern overlay (reusable) */
.pattern-overlay {
  position: absolute;
  inset: 0;
  background-image: url('../images/pattern-champagne.png');
  background-size: 360px;
  background-repeat: repeat;
  opacity: .04;
  pointer-events: none;
}

/* ============================================
   HERO
   ============================================ */
.hero {
  min-height: 100vh;
  background: var(--charcoal);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  padding-top: var(--nav-h);
}
.hero-content {
  padding: 6rem 4rem 6rem 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 2.25rem;
}
.hero-eyebrow::before { content:''; width:40px; height:1px; background:var(--champagne); }
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 5.5rem);
  line-height: 1.04;
  letter-spacing: .02em;
  color: var(--cream);
  margin-bottom: 2rem;
}
.hero-title em { color: var(--champagne); font-style: normal; }
.hero-sub {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--taupe);
  max-width: 480px;
  margin-bottom: 3rem;
}
.hero-actions { display:flex; gap:1.25rem; flex-wrap:wrap; }
.hero-image-col {
  position: relative;
  overflow: hidden;
}
.hero-image-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .9s var(--ease);
}
.hero-image-col:hover img { transform: scale(1.04); }

/* ============================================
   STATS BAR
   ============================================ */
.stats {
  background: var(--navy);
  padding: 3.25rem 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.stat-item {
  text-align: center;
  padding: 1rem 1.5rem;
  border-right: 1px solid rgba(215,189,166,.12);
}
.stat-item:last-child { border-right: none; }
.stat-number {
  font-family: var(--font-display);
  font-size: 2.75rem;
  color: var(--champagne);
  line-height: 1;
  margin-bottom: .4rem;
  display: block;
}
.stat-label {
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* ============================================
   PARA QUEM
   ============================================ */
.para-quem { padding: 8rem 0; background: var(--cream); }
.pq-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2rem;
  margin-top: 3.5rem;
}
.pq-card {
  background: var(--white);
  border-radius: var(--r-card);
  padding: 3rem 2.5rem;
  border: 1px solid rgba(155,143,134,.15);
  position: relative;
  overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pq-card::before {
  content:'';
  position: absolute;
  top:0; left:0; right:0;
  height: 3px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.pq-card:hover { transform: translateY(-6px); box-shadow: var(--sh-med); }
.pq-card:hover::before { transform: scaleX(1); }
.pq-num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  color: rgba(155,143,134,.18);
  line-height: 1;
  margin-bottom: 1.5rem;
}
.pq-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--charcoal);
  margin-bottom: 1rem;
  line-height: 1.2;
}
.pq-text { font-size: .94rem; color: var(--taupe); line-height: 1.75; }

/* ============================================
   CURSOS (Homepage preview)
   ============================================ */
.cursos-section {
  padding: 8rem 0;
  background: var(--charcoal);
  position: relative;
  overflow: hidden;
}
.cursos-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.75rem;
  margin-top: 3.5rem;
}
.curso-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(215,189,166,.15);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all .45s var(--ease);
}
.curso-card:hover {
  border-color: rgba(215,189,166,.35);
  transform: translateY(-6px);
  box-shadow: 0 24px 64px rgba(0,0,0,.45);
}

/* Cover image at top of card */
.curso-card-cover {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.curso-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform .7s var(--ease);
  display: block;
}
.curso-card:hover .curso-card-cover img { transform: scale(1.06); }
.curso-card-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(31,33,34,.9) 100%);
}

/* Card body */
.curso-card-body {
  padding: 1.75rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.curso-tag {
  font-size: .58rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: .65rem;
}
.curso-title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: var(--cream);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.curso-desc {
  font-size: .9rem;
  color: var(--taupe);
  line-height: 1.75;
  flex: 1;
  margin-bottom: 1.75rem;
}
.curso-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--champagne);
  border: 1px solid rgba(215,189,166,.28);
  padding: .8rem 1.5rem;
  border-radius: var(--r-pill);
  align-self: flex-start;
  transition: all .35s var(--ease);
}
.curso-link svg { transition: transform .3s; }
.curso-link:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--cream);
}
.curso-link:hover svg { transform: translateX(4px); }

/* ============================================
   SOBRE (preview)
   ============================================ */
.sobre-preview { padding: 8rem 0; background: var(--cream); }
.sobre-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}
.sobre-img-wrap { position: relative; }
.sobre-img-frame {
  border-radius: 40px 40px 160px 40px;
  overflow: hidden;
  aspect-ratio: 3/4;
  max-height: 620px;
}
.sobre-img-frame img {
  width:100%; height:100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .7s var(--ease);
}
.sobre-img-frame:hover img { transform: scale(1.04); }
.sobre-badge {
  position: absolute;
  bottom: -1.5rem; right: -1.5rem;
  background: var(--terracotta);
  color: var(--cream);
  border-radius: var(--r-card);
  padding: 1.5rem 2rem;
  text-align: center;
  box-shadow: var(--sh-med);
}
.sobre-badge-n {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
  display: block;
}
.sobre-badge-l {
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .88;
  margin-top: .25rem;
  display: block;
}
.sobre-text {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--charcoal);
  opacity: .8;
  margin-bottom: 1.5rem;
}
.sobre-valores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  margin: 2rem 0 2.5rem;
}
.valor-row { display:flex; align-items:flex-start; gap:.75rem; }
.valor-dot { width:5px; height:5px; border-radius:50%; background:var(--terracotta); margin-top:.55rem; flex-shrink:0; }
.valor-label { font-size: .84rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }

/* ============================================
   QUOTE / MUG SECTION
   ============================================ */
.quote-section {
  padding: 8rem 0;
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.quote-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}
.quote-mark {
  font-family: var(--font-display);
  font-size: 7rem;
  color: var(--champagne);
  opacity: .18;
  line-height: .5;
  margin-bottom: 2rem;
}
.quote-text {
  font-family: var(--font-display);
  font-size: clamp(2rem,3.5vw,3.25rem);
  color: var(--cream);
  line-height: 1.15;
  letter-spacing: .02em;
  margin-bottom: 1.5rem;
}
.quote-text em { color: var(--champagne); font-style:normal; }
.quote-author {
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--taupe);
}
.quote-img-frame {
  border-radius: 40px 160px 40px 40px;
  overflow: hidden;
  aspect-ratio: 3/4;
  max-height: 560px;
}
.quote-img-frame img {
  width:100%; height:100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.quote-img-frame:hover img { transform: scale(1.04); }

/* ============================================
   DEPOIMENTOS
   ============================================ */
.depoimentos { padding: 8rem 0; background: var(--cream); }
.depo-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2rem;
  margin-top: 3.5rem;
}
.depo-card {
  background: var(--white);
  border-radius: var(--r-card);
  padding: 2.5rem;
  border: 1px solid rgba(155,143,134,.12);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.depo-card:hover { transform: translateY(-4px); box-shadow: var(--sh-med); }
.depo-stars { display:flex; gap:3px; margin-bottom:1.5rem; color:var(--terracotta); }
.depo-quote {
  font-size: .96rem;
  line-height: 1.8;
  color: var(--charcoal);
  opacity: .78;
  font-style: italic;
  margin-bottom: 2rem;
}
.depo-author { display:flex; align-items:center; gap:1rem; }
.depo-avatar {
  width:44px; height:44px;
  border-radius:50%;
  background: var(--champagne);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--terracotta);
  flex-shrink: 0;
}
.depo-name { font-size:.88rem; font-weight:700; display:block; }
.depo-role { font-size:.74rem; color:var(--taupe); letter-spacing:.04em; }

/* ============================================
   CTA SECTION
   ============================================ */
.cta-final {
  padding: 8rem 0;
  background: var(--charcoal);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-final-inner { position:relative; z-index:1; max-width:640px; margin:0 auto; }
.cta-final-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem,4vw,3.5rem);
  color: var(--cream);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}
.cta-final-sub { font-size:1rem; color:var(--taupe); line-height:1.75; margin-bottom:3rem; }
.cta-actions { display:flex; gap:1.25rem; justify-content:center; flex-wrap:wrap; }

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: #161A1B;
  padding: 5rem 0 2.5rem;
  border-top: 1px solid rgba(215,189,166,.07);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 4rem;
  margin-bottom: 4rem;
}
.footer-brand-symbol {
  height: 56px;
  width: auto;
  filter: invert(1);
  mix-blend-mode: screen;
  margin-bottom: 1.5rem;
}
.footer-tagline { font-size:.88rem; color:var(--taupe); line-height:1.75; max-width:260px; }
.footer-social { display:flex; gap:1rem; margin-top:1.5rem; }
.footer-social a {
  width:36px; height:36px;
  border-radius:50%;
  border: 1px solid rgba(215,189,166,.2);
  display:flex; align-items:center; justify-content:center;
  color: var(--champagne);
  font-size:.9rem;
  transition: all .3s;
}
.footer-social a:hover { background:var(--terracotta); border-color:var(--terracotta); }
.footer-col-title {
  font-size: .62rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color: var(--champagne);
  margin-bottom:1.5rem;
}
.footer-links { list-style:none; display:flex; flex-direction:column; gap:.75rem; }
.footer-links a { font-size:.9rem; color:var(--taupe); transition:color .3s; }
.footer-links a:hover { color:var(--champagne); }
.footer-bottom {
  border-top: 1px solid rgba(215,189,166,.07);
  padding-top: 2rem;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap: wrap; gap: 1rem;
}
.footer-copy { font-size:.76rem; color:rgba(155,143,134,.45); letter-spacing:.06em; }

/* ============================================
   PAGE HERO (inner pages)
   ============================================ */
.page-hero {
  padding: 10rem 0 6rem;
  background: var(--charcoal);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero-inner { position:relative; z-index:1; }
.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem,6vw,5.5rem);
  color: var(--cream);
  line-height: 1.05;
  letter-spacing: .02em;
}
.page-hero-sub {
  font-size: 1.05rem;
  color: var(--taupe);
  max-width: 520px;
  margin: 1.5rem auto 0;
  line-height: 1.75;
}

/* ============================================
   SOBRE PAGE
   ============================================ */
.sobre-bio { padding: 8rem 0; background: var(--cream); }
.sobre-bio-inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 6rem;
  align-items: start;
}
.sobre-bio-img-wrap {
  border-radius: 40px;
  overflow: hidden;
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
}
.sobre-bio-img-wrap img {
  width: 100%;
  height: 620px;
  object-fit: cover;
  object-position: top;
}
.sobre-bio-content h2 {
  font-family: var(--font-display);
  font-size: 2.25rem;
  color: var(--charcoal);
  margin-bottom: 1.5rem;
  line-height: 1.18;
}
.sobre-bio-content p {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--charcoal);
  opacity: .78;
  margin-bottom: 1.5rem;
}
.sobre-valores-section { padding: 7rem 0; background: var(--white); }
.valores-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2.5rem;
  margin-top: 3.5rem;
}
.valor-card {
  text-align:center;
  padding: 3rem 2rem;
  border-radius: var(--r-card);
  border: 1px solid rgba(155,143,134,.15);
  transition: all .4s var(--ease);
}
.valor-card:hover { border-color:var(--terracotta); transform:translateY(-4px); box-shadow:var(--sh-soft); }
.valor-emoji { font-size: 2.25rem; margin-bottom:1.5rem; }
.valor-card-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--charcoal);
  margin-bottom: .75rem;
}
.valor-card-text { font-size:.92rem; color:var(--taupe); line-height:1.75; }

/* ============================================
   CURSOS PAGE
   ============================================ */
.cursos-page { padding: 6rem 0 8rem; background: var(--cream); }
.curso-detail {
  background: var(--white);
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid rgba(155,143,134,.15);
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 340px;
  transition: box-shadow .4s var(--ease);
}
.curso-detail:hover { box-shadow: var(--sh-med); }
.curso-detail-visual {
  background: var(--charcoal);
  display: flex;
  align-items: stretch;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 340px;
}
.curso-detail-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .7s var(--ease);
  display: block;
}
.curso-detail:hover .curso-detail-visual img { transform: scale(1.05); }
.curso-detail-letter {
  font-family: var(--font-display);
  font-size: 6rem;
  color: var(--champagne);
  opacity: .25;
  position: relative;
  z-index:1;
  letter-spacing: .05em;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.curso-detail-body { padding: 3rem; display:flex; flex-direction:column; }
.curso-detail-tag {
  font-size: .6rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: .75rem;
}
.curso-detail-title {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--charcoal);
  margin-bottom: 1.25rem;
  line-height: 1.15;
}
.curso-detail-desc {
  font-size: .96rem;
  line-height: 1.85;
  color: var(--charcoal);
  opacity: .75;
  margin-bottom: 2rem;
  flex: 1;
}
.curso-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 2rem;
}
.tag-chip {
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(134,81,55,.07);
  color: var(--terracotta);
  border: 1px solid rgba(134,81,55,.2);
  padding: .35rem .9rem;
  border-radius: var(--r-pill);
}

/* ============================================
   CONTACTO PAGE
   ============================================ */
.contacto-page { padding: 6rem 0 8rem; background: var(--cream); }
.contacto-inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 6rem;
  align-items: start;
}
.contacto-info h2 {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--charcoal);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}
.contacto-info p { font-size:1rem; line-height:1.85; color:var(--charcoal); opacity:.75; margin-bottom:2.5rem; }
.contact-items { display:flex; flex-direction:column; gap:1rem; }
.contact-item {
  display:flex; align-items:center; gap:1rem;
  padding: 1.25rem 1.5rem;
  background: var(--white);
  border-radius: 16px;
  border: 1px solid rgba(155,143,134,.15);
  transition: all .35s var(--ease);
}
.contact-item:hover { border-color:var(--terracotta); transform:translateX(6px); }
.contact-icon {
  width:44px; height:44px;
  border-radius:50%;
  background: rgba(134,81,55,.1);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  color: var(--terracotta);
  flex-shrink:0;
}
.contact-label { font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color:var(--taupe); display:block; }
.contact-value { font-size:.96rem; font-weight:700; color:var(--charcoal); }
.contacto-form {
  background: var(--white);
  border-radius: var(--r-card);
  padding: 3.5rem;
  border: 1px solid rgba(155,143,134,.15);
  box-shadow: var(--sh-soft);
}
.form-group { margin-bottom: 1.75rem; }
.form-label { display:block; font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--charcoal); margin-bottom:.6rem; }
.form-input, .form-textarea, .form-select {
  width:100%;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(155,143,134,.25);
  border-radius: 12px;
  background: var(--cream);
  font-family: var(--font-body);
  font-size: .96rem;
  color: var(--charcoal);
  transition: border-color .3s, background .3s;
  outline: none;
  appearance: none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--terracotta);
  background: var(--white);
}
.form-textarea { min-height:140px; resize:vertical; }

/* ============================================
   WHATSAPP FLOAT BUTTON
   ============================================ */
.whatsapp-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 300;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.4);
  transition: transform .3s var(--ease), box-shadow .3s;
  color: #fff;
}
.whatsapp-float:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 8px 32px rgba(37,211,102,.55);
}

/* ============================================
   SCROLL REVEAL
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:.1s; }
.reveal-d2 { transition-delay:.2s; }
.reveal-d3 { transition-delay:.3s; }
.reveal-d4 { transition-delay:.4s; }

/* Video grid */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.5rem;
}

/* ============================================
   RESPONSIVE — TABLET (≤1200px)
   ============================================ */
@media (max-width:1200px) {
  .cursos-grid { grid-template-columns: repeat(2,1fr); }
  .video-grid  { grid-template-columns: repeat(2,1fr); }
}

/* ============================================
   RESPONSIVE — TABLET (≤1024px)
   ============================================ */
@media (max-width:1024px) {
  .hero { grid-template-columns:1fr; min-height:auto; }
  .hero-content { padding:8rem 2rem 4rem; text-align:center; }
  .hero-eyebrow { justify-content:center; }
  .hero-sub { margin:0 auto 3rem; }
  .hero-actions { justify-content:center; }
  .hero-image-col { height:65vw; max-height:460px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .sobre-inner, .quote-inner { grid-template-columns:1fr; gap:3rem; }
  .sobre-img-frame { max-height:400px; }
  .footer-inner { grid-template-columns:1fr 1fr; gap:3rem; }
  .contacto-inner { grid-template-columns:1fr; }
  .curso-detail { grid-template-columns:1fr; }
  .curso-detail-visual { min-height:240px; }
  .sobre-bio-inner { grid-template-columns:1fr; gap:3rem; }
  .sobre-bio-img-wrap { position:static; }
  .sobre-bio-img-wrap img { height:380px; }
}

/* ============================================
   RESPONSIVE — MOBILE (≤768px)
   ============================================ */
@media (max-width:768px) {
  /* Nav */
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .nav-brand-role { display:none; }
  .nav-brand-name { font-size:1.05rem; }
  .nav-symbol { height:36px; }

  /* Section padding */
  .para-quem,
  .sobre-preview,
  .quote-section,
  .depoimentos,
  .cta-final { padding:4.5rem 0; }
  .cursos-section { padding:4.5rem 0; }
  .page-hero { padding:7rem 0 3.5rem; overflow:visible; }
  .sobre-bio { padding:4.5rem 0; }
  .sobre-valores-section { padding:4rem 0; }
  .cursos-page { padding:3.5rem 0 5rem; }
  .contacto-page { padding:3.5rem 0 5rem; }

  /* Grids — single column */
  .pq-grid { grid-template-columns:1fr; gap:1.25rem; }
  .cursos-grid { grid-template-columns:1fr; gap:1.25rem; }
  .depo-grid { grid-template-columns:1fr; gap:1.25rem; }
  .valores-grid { grid-template-columns:1fr; gap:1.25rem; }
  .sobre-valores { grid-template-columns:1fr; }
  .video-grid { grid-template-columns:1fr; gap:1.25rem; }

  /* Hero — remove overflow:hidden so text is never clipped */
  .hero { overflow: visible; }
  .hero-content { padding:7rem 1.25rem 3rem; }
  .hero-title { font-size: 1.75rem !important; letter-spacing:.01em; }
  .hero-sub { font-size:.96rem; }
  .hero-image-col { height:75vw; max-height:360px; overflow:hidden; }
  .hero-actions { flex-direction:column; align-items:stretch; gap:1rem; }
  .hero-actions a { justify-content:center; }

  /* Course cards */
  .curso-card-cover { height:210px; }
  .curso-card-body { padding:1.25rem 1.25rem 1.5rem; }
  .curso-title { font-size:1.3rem; }

  /* Stats */
  .stat-number { font-size:2.25rem; }
  .stat-item { padding:1.25rem 1rem; }

  /* Sobre badge */
  .sobre-badge { position:static; display:inline-block; margin-top:1.5rem; }
  .sobre-img-frame { border-radius:24px; max-height:360px; }
  .quote-img-frame { border-radius:24px; max-height:340px; }

  /* Footer */
  .footer-inner { grid-template-columns:1fr; gap:2rem; }
  .footer { padding:3rem 0 2rem; }
  .footer-bottom { flex-direction:column; text-align:center; gap:.75rem; }
  .footer-tagline { max-width:100%; }

  /* Form */
  .contacto-form { padding:2rem 1.25rem; }

  /* Typography */
  .section-title { font-size:clamp(1.85rem,6.5vw,2.5rem); }
  .section-sub { font-size:.92rem; }
  .page-hero-title { font-size:clamp(2.25rem,8vw,3.5rem); }

  /* Buttons — full width on mobile */
  .cta-actions { flex-direction:column; align-items:center; gap:1rem; }
  .cta-actions .btn-primary,
  .cta-actions .btn-secondary { width:100%; max-width:300px; justify-content:center; }

  /* Depo cards */
  .depo-card { padding:1.5rem; }

  /* Inline style grids — collapse to single column */
  [style*="grid-template-columns:1fr 1fr"]:not(.stats-grid),
  [style*="grid-template-columns:1fr 1.2fr"],
  [style*="grid-template-columns:1fr 1.5fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns:2fr 3fr"],
  [style*="grid-template-columns:1.5fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* WhatsApp button */
  .whatsapp-float { bottom:1.25rem; right:1.25rem; width:50px; height:50px; }
  .whatsapp-float svg { width:24px; height:24px; }

  /* Contact form 2-col row */
  .contacto-form div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* About bio */
  .sobre-bio-img-wrap img { height:300px; }
}

/* ============================================
   RESPONSIVE — SMALL MOBILE (≤480px)
   ============================================ */
@media (max-width:480px) {
  .container { padding:0 1rem; }
  .stats-grid { grid-template-columns:1fr 1fr; gap:.5rem; }
  .stat-number { font-size:1.9rem; }
  .stat-label { font-size:.58rem; }

  /* Font sizes — safe fixed values for small screens */
  .hero-title        { font-size: 1.65rem !important; letter-spacing:.01em; }
  .section-title     { font-size: 1.45rem !important; letter-spacing:.01em; }
  .page-hero-title   { font-size: 1.55rem !important; letter-spacing:.01em; }
  .cta-final-title   { font-size: 1.55rem !important; }
  .sobre-bio-content h2 { font-size: 1.4rem !important; }
  .quote-text        { font-size: 1.45rem !important; }
  .curso-detail-title { font-size: 1.3rem !important; }
  /* All sections: never clip content on x-axis */
  section { overflow-x: visible !important; }

  .curso-card-cover { height:190px; }
  .nav-symbol { height:30px; }
  .nav-brand-name { font-size:.9rem; }
  .video-grid video { aspect-ratio:9/16; max-height:380px; }
  .hero-image-col { height:85vw; }
  .pq-card, .depo-card { padding:1.5rem 1.25rem; }
}

/* ============================================
   RESPONSIVE — VERY SMALL (≤360px)
   ============================================ */
@media (max-width:360px) {
  .hero-title      { font-size: clamp(1.45rem, 7.5vw, 1.9rem) !important; }
  .page-hero-title { font-size: clamp(1.35rem, 7vw, 1.85rem) !important; }
  .section-title   { font-size: clamp(1.3rem,  7vw, 1.7rem)  !important; }
  .container { padding:0 .875rem; }
}