/* ===== reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* ===== nav mobile (hambúrguer) ===== */
@media (max-width:760px){
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  .nav-mobile-overlay{display:block;}
}

/* ===== BREAKPOINT: Laptops pequenos e Tablets (761-1180px) =====
   Mantém o layout lado a lado (desktop), mas espreme proporções e tamanhos 
   para garantir que caiba perfeitamente até chegar no layout de celular (760px). */
@media (max-width:1180px) and (min-width:761px){
  .hero h1 { font-size: clamp(32px, 4vw, 42px); max-width: 50vw; }
  .hero p.lead { font-size: 15px; max-width: 48vw; }
  .hero-actions { max-width: 50vw; }
  .hero-bg-portrait { width: 54%; right: 5%; }
  .hero-stats { 
    right: 20px; 
    transform: scale(0.75); 
    transform-origin: bottom right; 
  }
}

/* ===== hero: foto de fundo (portrait) =====
   Layout empilhado (foto acima do texto) agora ativa apenas a partir de 760px. */
@media (max-width:760px){
  .hero-bg-portrait img{
    position:absolute;
    inset:0;
    z-index:1;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:100% 20%; /* 100% ancora a imagem à direita, cobrindo toda a largura sem deixar gap */
  }
}

/* ===== hero-stats em telas menores =====
   No mobile os cards flutuantes sobre a foto ficam feios e atrapalham o
   recorte (ver telas <=760px), então escondemos por completo em vez de
   reposicionar. */
@media (max-width:760px){
  .hero-stats{
    display:none;
  }
}

/* ===== hero: layout em grid para mobile/tablet ===== */
@media (max-width:760px){
  .hero{
    display:grid;
    grid-template-columns:100%;
    grid-template-areas:
      "photo"
      "badge"
      "title"
      "text"
      "actions";
    row-gap:0;
    padding:0;
    min-height:0;
    overflow:hidden;
  }
  .hero-eyebrow-desktop{display:none;}
  .hero-eyebrow-mobile{
    grid-area:badge;
    display:block !important;
    background:none;
    padding:0 32px;
    margin:24px 0 8px 0;
    justify-self:start;
    width:100%;
    border-radius:0;
    position:relative;
    z-index:10;
  }
  .hero-eyebrow-mobile .star-icon{margin-right:6px; vertical-align:middle;}
  .hero-bg-portrait{
    grid-area:photo;
    position:relative;
    top:auto; right:auto; bottom:auto; left:auto;
    width:100% !important;
    margin:0 !important;
    aspect-ratio:1/1.02;
    border-radius:0 !important;
    overflow:visible;
    display:block;
    background: linear-gradient(155deg, #E6F0F7 0%, #C9DDEB 100%);
    box-shadow:none !important;
  }
  .hero-bg-portrait::before{
    display:none;
  }
  .hero-bg-portrait::after{display:none;}
  .hero-bg-portrait .laptop-shadow{display:none;}
  .hero-photo-crop{
    display:block;
    position:absolute;
    inset:0;
    border-radius:inherit;
    overflow:hidden;
  }
  .hero h1{
    grid-area:title;
    align-self:start;
    font-size:27px;
    line-height:1.18;
    padding:0 32px;
    margin:12px 0 0;
    max-width:100%;
  }
  .hero p.lead{grid-area:text; padding:0 32px; margin:16px 0 0; max-width:100%;}
  .hero-actions{
    grid-area:actions;
    padding:0 32px 24px;
    margin:24px auto 0;
    max-width:100%;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:16px;
}
  .hero-proof{display:none;}
  .hero-mesh svg{display:none;}
  .hero-mesh{
    background:
      radial-gradient(75% 55% at 22% 0%, rgba(27,75,102,.24), transparent 72%),
      radial-gradient(60% 50% at 85% 100%, rgba(27,75,102,.12), transparent 70%),
      var(--base-soft);
  }
}

/* ===== BREAKPOINT: tablet portrait / ajustes de empilhamento (601-760px) ===== */
@media (max-width:760px) and (min-width:601px){
  .hero-bg-portrait{aspect-ratio:16/10; max-width:520px; margin:0 auto;}
  .hero h1{font-size:30px; max-width:560px; margin-left:auto; margin-right:auto;}
  .hero p.lead{font-size:16px; max-width:560px; margin-left:auto; margin-right:auto;}
  .hero-actions{max-width:560px; margin-left:auto; margin-right:auto;}
}

@media (max-width:480px){
  .hero-eyebrow-mobile{padding:0 20px;}
  .hero h1{padding:0 20px; font-size:23px; margin-top:8px;}
  .hero p.lead{padding:0 20px;}
  .hero-actions{padding:0 20px 20px;}
}

/* ===== BREAKPOINT: celulares muito estreitos (≤360px) ===== */
@media (max-width:360px){
  .hero h1{font-size:20px; padding:0 16px;}
  .hero p.lead{padding:0 16px; font-size:14px;}
  .hero-actions{padding:0 16px 16px;}
  .hero-eyebrow-mobile{padding:0 16px; font-size:11px;}
}

/* ===== roles-grid (Pra quem) ===== */
@media (max-width:900px) and (min-width:821px){
  .roles-grid{gap:16px;}
  .role-card{padding:22px;}
}
@media (max-width:820px){.roles-grid{grid-template-columns:1fr;}}

/* ===== 4 frentes ===== */
@media (max-width:900px){.frentes-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.frentes-grid{grid-template-columns:1fr;}}

/* ===== autoridade ===== */
@media (max-width:900px) and (min-width:861px){
  .auth-grid{gap:36px;}
}
@media (max-width:560px){
  .auth-stats{gap:10px; justify-content:space-between;}
  .auth-stat{flex:1; min-width:0;}
  .auth-stat .num{font-size:13px; white-space:nowrap; letter-spacing:-0.01em;}
  .auth-stat .lbl{font-size:10px; line-height:1.3;}
}
@media (max-width:860px){.auth-grid{grid-template-columns:1fr;} .auth-portrait{max-width:320px; margin:0 auto;}}

/* ===== metodo sim (pilares) ===== */
@media (max-width:820px){.pilares-grid{grid-template-columns:1fr;}}

/* ===== eixos ===== */
@media (max-width:480px){
  .eixos-strip{gap:10px;}
  .eixo-pill{padding:10px 14px; font-size:12.5px;}
}

/* ===== formatos (flip cards) ===== */
@media (hover:hover){
  .formato-flip:hover .formato-inner{transform:rotateY(180deg);}
}
@media (max-width:940px){.formatos-grid{grid-template-columns:1fr;} .formato-flip.destaque{transform:none;}}

/* ===== FAQ ===== */
@media (max-width:480px){
  details.faq-item{padding:4px 16px;}
  details.faq-item summary{font-size:14.5px; padding:15px 0;}
}

/* ===== sticky mobile bar ===== */
@media (max-width:760px){
  .sticky-bar{display:block;}
  body{padding-bottom:78px;}
  .section-pad{padding:64px 0;}
  .reforma-banner{padding:36px 28px;}
  .reforma-banner::before{display:none;}
  .reforma-cta{width:100%;}
  .reforma-cta .btn-light{width:100%; justify-content:center;}
}

/* ===== botão flutuante do whatsapp ===== */
@media (max-width:760px){
  .whatsapp-float{right:18px; bottom:96px; width:52px; height:52px;}
  .whatsapp-float svg{width:26px; height:26px;}
}

/* ===== telas pequenas de smartphone (geral) ===== */
@media (max-width:480px){
  .wrap{padding:0 20px;}
  .nav{padding:14px 20px;}
  .nav-cta{padding:9px 14px; font-size:13px;}
  .brand{font-size:14px;}
  .brand .mark{width:28px; height:28px; font-size:11.5px;}
  .eyebrow{font-size:12px; padding:5px 12px 5px 8px;}
  .hero h1{line-height:1.2;}
  .hero p.lead{font-size:15.5px; margin-top:16px;}
  .hero-actions{gap:14px; margin-top:26px;}
  .hero-cta-group{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
}
  .btn-primary{padding:13px 20px; font-size:14px; width:100%; justify-content:center;}
  .btn-hero-primary{padding:18px 28px; font-size:15.5px;}
  .btn-ghost-link{width:100%; justify-content:center;}
  .hero-card{padding:22px;}
  .hero-stat-row{gap:16px;}
  .hero-stat .num{font-size:26px;}
  .section-pad{padding:48px 0;}
  .section-head h2{font-size:25px;}
  .section-head p{font-size:14.5px;}
  .role-card, .pilar-card, .formato-card, .formato-back{padding:22px;}
  .formato-flip{min-height:420px;}
  .frente-card{padding:24px 18px;}
  .auth-copy h2{font-size:24px;}
  .auth-stats{gap:6px;}
  .auth-stat .num{font-size:12px;}
  .auth-stat .lbl{font-size:9px;}
  .reforma-text h2{font-size:22px;}
  .reforma-banner{gap:24px;}
  .btn-light{width:100%; justify-content:center;}
  .final-cta h2{font-size:26px;}
  .footer-row{flex-direction:column; align-items:flex-start; gap:10px;}
  .quiz-modal{padding:24px 18px;}
  .quiz-nav-row{gap:10px;}
  .quiz-option{padding:14px;}
}