/* ============================================================
   mobile.css — Otimizações mobile-first aplicadas em todas as
   páginas do site Avantis Benefícios. Carregado após o CSS inline
   para sobrescrever regras que escaparam ao design responsivo.
   ============================================================ */

/* ───── Tap targets e UX básica (sempre ativo) ───── */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  text-rendering: optimizeLegibility;
}
a, button, .btn-primary, .btn-outline, .nav-cta, .plataforma-card, .seguro-card, .plano-card, .benef-card, .contact-item, .logos-track img, .dropdown-toggle, .nav-links a {
  -webkit-tap-highlight-color: rgba(229, 25, 158, .15);
  touch-action: manipulation;
}
img {
  -webkit-user-drag: none;
  user-select: none;
  max-width: 100%;
  height: auto;
}
input, select, textarea, button {
  font-size: max(16px, 1rem);  /* evita zoom automático no iOS ao focar campo */
}

/* ───── Tipografia fluida (clamp) para h1/h2 e parágrafos ───── */
.section-title, .hero-title, h1 { font-size: clamp(28px, 7vw, 48px); }
h2 { font-size: clamp(22px, 5.5vw, 36px); }
h3 { font-size: clamp(17px, 4vw, 22px); }

/* ───── Container fluido: nunca larga que o viewport ───── */
.container, .wrap-inner { max-width: min(100%, 1200px); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }

/* ───── Grid genérico de cards: cai pra 1 coluna no mobile ───── */
@media (max-width: 900px) {
  .cards-grid, .plataformas-grid, .benef-grid, .planos-grid, .logos-grid, .seguros-grid, .auto-grid, .grade-grid, .cat-grid, .recursos-grid, .stat-grid, .quick-grid, .step-grid, .grid-cards, .categoria-grid, .cards-4, .cards-3, .cards-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ───── Menu hambúrguer — comportamento garantido no mobile ─────
   NOTA: .nav-links/.hamburger já têm regras no CSS inline de cada página.
   Aqui só complementamos para o breakpoint ≤900px (hambúrguer). */
@media (max-width: 900px) {
  .nav-links { display: none !important; }
  .hamburger { display: flex !important; cursor: pointer; z-index: 1000; -webkit-tap-highlight-color: transparent; }
}
.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg, #0a0d18);
  z-index: 999;
  padding: 80px 24px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s ease;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 17px;
  color: #fff;
  text-decoration: none;
}

/* ───── Botão WhatsApp flutuante — não cobrir conteúdo importante ───── */
#btnWA, .btn-floating, a[href*="wa.me/55"][style*="position:fixed"] {
  width: 50px !important;
  height: 50px !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  right: max(16px, env(safe-area-inset-right)) !important;
}
#btnTop {
  bottom: max(78px, calc(env(safe-area-inset-bottom) + 62px)) !important;
  right: max(22px, env(safe-area-inset-right)) !important;
}

/* ───── Imagens: lazy loading e decode async (perf) ───── */
img:not([loading]) { loading: lazy; decoding: async; }
/* Sem placeholder fixo: as imagens do hero têm transparência real
   e qualquer background aparece nas bordas suaves (soft edges). */

/* ───── Formulários: padding e tamanho de fonte no mobile ───── */
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  font-size: 16px;
}
.form-group textarea { min-height: 100px; resize: vertical; }

/* ───── Tabelas: rolagem horizontal em vez de quebrar layout ───── */
table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

/* ───── Painéis / cards de produto: padding consistente ───── */
.seguro-card, .plano-card, .benef-card, .plataforma-card, .recursos-card {
  padding: 20px 18px !important;
}

/* ───── Sections: margens menores em mobile ───── */
section { padding-top: clamp(40px, 8vw, 80px); padding-bottom: clamp(40px, 8vw, 80px); }
.section-label { font-size: 11px !important; }

/* ───── Botões maiores para toque ───── */
.btn-primary, .btn-outline, button[type="submit"] {
  min-height: 44px;
  padding: 12px 20px;
  font-size: 15px;
}

/* ───── Animações desativadas no mobile (bateria +60fps) ───── */
@media (max-width: 768px) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.2s !important;
  }
  .float-anim, .pulse, .spin-slow { animation: none !important; }
}

/* ───── Media queries por breakpoint (de cima pra baixo, mobile-first) ───── */

/* Tablets pequenos e celulares em pé */
@media (max-width: 540px) {
  body { font-size: 15px; line-height: 1.6; }
  .container, .wrap-inner { padding: 0 16px; }
  h1 { font-size: 24px !important; line-height: 1.15; }
  h2 { font-size: 20px !important; line-height: 1.2; }
  h3 { font-size: 16px !important; }

  /* Grids específicos: viram 1 coluna */
  .plataformas-grid, .planos-grid, .cards-grid, .benef-grid, .grade-grid,
  .recursos-grid, .stat-grid, .quick-grid, .categoria-grid,
  .auto-grid, .logos-grid, .cat-grid, .grid-cards, .cards-4, .cards-3, .cards-2,
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Header: topbar some, vira só logo */
  .topbar, .header-extra, .header-info { display: none !important; }

  /* Sections: padding reduzido */
  section { padding: 36px 0; }

  /* Formulário: full width */
  .contact-form, form.contact-card { padding: 18px 16px !important; }

  /* Footer */
  footer { padding: 28px 16px !important; font-size: 12.5px; }

  /* Botões de plataformas (3 cards grandes) empilhados */
  .plataforma-card { padding: 18px 14px !important; }
  .plataforma-card .plat-icon { width: 60px !important; height: 60px !important; font-size: 1.8rem !important; }

  /* Track de logos de parceiros: deixa rolar naturalmente */
  .logos-track { gap: 18px !important; }
  .logos-track img { height: 32px !important; }

  /* Preço/destaque: font menor */
  .price-big, .preco, .valor, [class*="price"] { font-size: 1.6rem !important; }
}

/* Tablets em pé e pequenos laptops */
@media (min-width: 541px) and (max-width: 900px) {
  .plataformas-grid, .cards-3, .cards-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .planos-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-cols-2, [style*="grid-template-columns:repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
  .plataforma-card { padding: 22px 18px !important; }
  body { font-size: 15.5px; }
}

/* Acessibilidade: respeita usuários que pedem menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ───── iOS: evita "rubber band" em scroll horizontal ───── */
html, body { overscroll-behavior-x: none; }

/* ───── Print: esconde navegação e botões flutuantes ───── */
@media print {
  #btnWA, #btnTop, .hamburger, .mobile-menu, nav, footer { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: underline !important; }
}


/* Celular: cards compactos em 2 colunas (aproveita a largura) */
@media (max-width:767px){
  html .av-2col{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  html .av-2col>*{min-width:0;grid-column:auto!important;overflow-wrap:break-word}
  html .av-2col :is(h3,h4,h5,[class*="title"]){-webkit-hyphens:auto;hyphens:auto}
  html .av-2stack{flex-direction:column!important;align-items:flex-start!important;gap:.55rem!important}
}

@media (max-width:767px){
  html .espec-cards-grid .espec-cat-card{flex-direction:column!important;align-items:flex-start!important;gap:.55rem!important;padding:.9rem .85rem!important;min-width:0}
  html .espec-cards-grid .espec-cat-title{-webkit-hyphens:auto;hyphens:auto}
}


/* Planos no celular: resumo em 2 colunas + abrir/recolher detalhes */
.pc-toggle{display:none}
@media (max-width:767px){
  html body .pc-grid.pc-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-flow:row dense!important;gap:10px!important;align-items:start!important}
  html body .pc-grid.pc-grid > *{min-width:0}
  html body .pc-grid.pc-grid > .pc-card{grid-column:auto!important;margin:0!important;transform:none!important}
  html body .pc-grid.pc-grid > .pc-wide,
  html body .pc-grid.pc-grid > .pc-card.pc-open{grid-column:1/-1!important}
  html body .pc-card:not(.pc-open){padding:1.1rem .85rem!important}
  html body .pc-card:not(.pc-open) > .pc-detail{display:none!important}
  html body .pc-card:not(.pc-open) [class*="name"],html body .pc-card:not(.pc-open) [class*="title"]{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
  html body .pc-card:not(.pc-open) button,html body .pc-card:not(.pc-open) a[class*="btn"]{white-space:normal!important}
  .pc-toggle{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin:.75rem 0 .6rem;padding:.6rem .5rem;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:inherit;font:600 12.5px/1.2 inherit;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .pc-toggle svg{transition:transform .25s}
  .pc-card.pc-open .pc-toggle svg{transform:rotate(180deg)}
}


/* Planos no celular: acabamento do resumo */
@media (max-width:767px){
  html body .pc-grid.pc-grid{align-items:stretch!important;gap:12px!important;padding-top:8px!important}
  html body .pc-grid.pc-grid > .pc-card{position:relative!important;overflow:visible!important}
  html body .pc-card:not(.pc-open){display:flex!important;flex-direction:column!important;padding:1.3rem .9rem .9rem!important;border-radius:18px!important}
  html body .pc-card:not(.pc-open) > :is([class*="popular"],[class*="badge"]){position:absolute!important;top:0!important;left:50%!important;right:auto!important;transform:translate(-50%,-50%)!important;margin:0!important;font-size:9.5px!important;line-height:1.2!important;padding:4px 10px!important;white-space:nowrap!important;letter-spacing:.04em;z-index:2;box-shadow:0 4px 12px rgba(0,0,0,.25)}
  html body .pc-card:not(.pc-open) > :is([class*="name"],[class*="title"]){font-size:15px!important;line-height:1.25!important;min-height:2.5em;margin:0 0 .45rem!important}
  html body .pc-card:not(.pc-open) > [class*="price"]{margin:0!important;padding:0 0 .75rem!important;text-align:left!important}
  html body .pc-card:not(.pc-open) > [class*="price"] > [class*="-de"]{font-size:10.5px!important;line-height:1.35!important;margin:0 0 .35rem!important;opacity:.75}
  html body .pc-card:not(.pc-open) > [class*="price"] > :is([class*="val"]){font-size:2.1rem!important;line-height:1!important;margin:0 0 .35rem!important;letter-spacing:-.02em}
  html body .pc-card:not(.pc-open) > [class*="price"] > [class*="val"] sup{font-size:.75rem!important;vertical-align:.95rem;margin-right:2px}
  html body .pc-card:not(.pc-open) > [class*="price"] > [class*="val"] .cents{font-size:.85rem!important}
  html body .pc-card:not(.pc-open) > [class*="price"] > :is([class*="period"],[class*="note"]){font-size:10.5px!important;line-height:1.4!important;margin:0 0 .15rem!important}
  html body .pc-card:not(.pc-open) .pc-toggle{margin:auto 0 .5rem!important;padding:.45rem .4rem!important;border:0!important;border-top:1px solid rgba(255,255,255,.08)!important;border-radius:0!important;background:transparent!important;font-size:11.5px!important;font-weight:600!important;opacity:.8}
  html body .pc-card:not(.pc-open) > .pc-toggle ~ :is(button,a){width:100%!important;margin:0!important;padding:.6rem .5rem!important;min-height:0!important;height:auto!important;font-size:12.5px!important;line-height:1.2!important;border-radius:10px!important;white-space:nowrap!important;letter-spacing:0!important;box-shadow:0 6px 16px rgba(18,140,214,.22)!important}
  html body .pc-card.pc-open .pc-toggle{margin:.85rem 0 .9rem!important;padding:.55rem .6rem!important;font-size:12px!important;border-radius:10px!important}
}


/* Contato: cards de planos em 2 colunas no celular */
@media (max-width:767px){
  html body .contato-planos-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;padding-top:8px!important;align-items:stretch!important}
  html body .contato-planos-grid > [class*="plano-card"]{position:relative!important;overflow:visible!important;min-width:0;margin:0!important;transform:none!important;padding:1.25rem .75rem 1rem!important;border-radius:18px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;grid-column:auto!important}
  html body .contato-planos-grid [class*="plano-badge"]{position:absolute!important;top:0!important;left:50%!important;transform:translate(-50%,-50%)!important;margin:0!important;font-size:9.5px!important;padding:4px 10px!important;white-space:nowrap!important;z-index:2;box-shadow:0 4px 12px rgba(0,0,0,.25)}
  html body .contato-planos-grid [class*="plano-card"] > div:not([class]){font-size:1.3rem!important;margin:0 0 .35rem!important}
  html body .contato-planos-grid [class*="plano-card"] > h4{font-size:14px!important;line-height:1.25!important;margin:0 0 .3rem!important;-webkit-hyphens:auto;hyphens:auto}
  html body .contato-planos-grid [class*="plano-preco"]{font-size:1.25rem!important;line-height:1.15!important;margin:0 0 .3rem!important;white-space:nowrap}
  html body .contato-planos-grid :is([class*="cifrao"],[class*="plano-mes"]){font-size:.6em!important}
  html body .contato-planos-grid [class*="plano-tag"]{font-size:10.5px!important;line-height:1.35!important}
}


/* Comparativo de planos no celular: tabela compacta (benefício × planos) */
@media (max-width:767px){
  html body :has(> table.comp-table){overflow:visible!important;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.025);padding:0!important}
  html body table.comp-table{display:table!important;width:100%!important;min-width:0!important;table-layout:fixed!important;border-collapse:separate!important;border-spacing:0!important;font-size:12px!important;margin:0!important}
  html body table.comp-table thead{display:table-header-group!important}
  html body table.comp-table tbody{display:table-row-group!important}
  html body table.comp-table tr{display:table-row!important;border:0!important;background:none!important;box-shadow:none!important;margin:0!important;padding:0!important}
  html body table.comp-table :is(th,td){display:table-cell!important;padding:.6rem .35rem!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.06)!important;vertical-align:middle!important;text-align:center!important;font-size:12px!important;line-height:1.3!important;min-width:0!important;width:auto;white-space:normal!important;overflow-wrap:break-word}
  html body table.comp-table :is(th,td)::before{content:none!important;display:none!important}
  html body table.comp-table :is(th,td):first-child{text-align:left!important;padding-left:.8rem!important;width:auto}
  html body table.comp-table :is(th,td):not(:first-child){width:20%;padding-left:.2rem!important;padding-right:.2rem!important}
  html body table.comp-table thead th{font-size:10.5px!important;font-weight:700!important;text-transform:none!important;letter-spacing:0!important;padding-top:.8rem!important;padding-bottom:.7rem!important;line-height:1.2!important;border-bottom:1px solid rgba(255,255,255,.12)!important}
  html body table.comp-table tr.cat-row td,html body table.comp-table tr.app-sec td{text-align:left!important;font-size:10.5px!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;padding:.75rem .8rem .5rem!important;background:rgba(255,255,255,.035)!important}
  html body table.comp-table td:first-child{font-size:12px!important;font-weight:500}
  html body table.comp-table :is(.comp-yes,.comp-no){font-size:15px!important;line-height:1!important}
  html body table.comp-table td strong{font-size:11.5px!important;white-space:nowrap}
  html body table.comp-table tbody tr:last-child td{border-bottom:0!important}
}

@media (max-width:767px){
  html body .av-compare.is-on.is-on{display:none!important}
}


/* Celular: acabamento de listas, selos, botões e imagens */
@media (max-width:767px){
  html body .app-hcard{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;column-gap:.85rem!important;row-gap:0!important;align-items:start!important;padding:1.1rem 1rem!important}
  html body .app-hcard > .app-hicon{grid-column:1!important;grid-row:1 / span 12!important;margin:0!important;font-size:1.5rem;line-height:1.2}
  html body .app-hcard > :not(.app-hicon){grid-column:2!important;min-width:0}
  html body .app-hcard > .app-hicon + *{margin-top:0!important}
  html body .app-hcard > :last-child{margin-bottom:0!important}
  html body .app-pills{justify-content:center!important;gap:6px!important}
  html body .app-pills > *{font-size:11.5px!important;padding:6px 11px!important;margin:0!important}
  html body .app-btns{width:100%!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important}
  html body .app-btns > *{width:100%!important;max-width:none!important;justify-content:center!important;text-align:center!important;margin:0!important}
  html body .cr-wrap{min-height:0!important;height:auto!important;padding:2rem 0!important;overflow:hidden!important;gap:16px!important}
  html body .cr-wrap .cr-phone{width:150px!important;max-width:44%!important;flex:0 0 auto!important;height:auto!important}
  html body .cr-wrap .cr-phone img{width:100%!important;height:auto!important}
  html body .two-col > div:has(img[src*="tele-notebook"]){display:none!important}
}

@media (max-width:767px){
  html body :is([data-app-tight],.ha-2tight,.av-2tight){gap:8px!important}
  html body :is([data-app-tight],.ha-2tight,.av-2tight) > *{padding:.8rem .7rem!important}
  html body :is([data-app-tight],.ha-2tight,.av-2tight) > * > :first-child:not(:only-child){font-size:1.3rem!important;line-height:1.15!important}
  html body :is([data-app-tight],.ha-2tight,.av-2tight) > * > :nth-child(2){font-size:10.5px!important;line-height:1.4!important}
}

@media (max-width:767px){
  html body .two-col > div:has(img[alt="Notebook medicina online"]){display:none!important}
}


/* Card Empresas no celular: selo de desconto e botões */
@media (max-width:767px){
  html body .plano-empresa .empresa-desconto{display:inline-flex!important;align-items:center!important;gap:6px!important;max-width:100%!important;height:auto!important;white-space:normal!important;font-size:12px!important;line-height:1.3!important;padding:6px 12px!important;border-radius:999px!important;margin:0 0 14px!important;position:static!important;transform:none!important;text-align:left!important}
  html body .plano-empresa .plano-empresa-btns{flex-direction:column!important;align-items:stretch!important;gap:10px!important;width:100%!important}
  html body .plano-empresa .plano-empresa-btns > *{width:100%!important;max-width:none!important;justify-content:center!important;text-align:center!important;margin:0!important;white-space:nowrap!important}
}

@media (max-width:767px){
  html body .plano-empresa .empresa-desconto{justify-content:center!important;text-align:center!important}
}

/* Planos no celular: menos espaço entre o seletor Anual/Mensal e os cards */
@media (max-width:767px){
  html body .pc-grid.pc-grid{margin-top:22px!important}
  html body .page-hero + section:has(.pc-grid){padding-top:12px!important}
}

@media (max-width:767px){
  html body .page-hero:has(.toggle-wrap){padding-bottom:4px!important}
  html body .page-hero + section:has(.pc-grid) .pc-grid.pc-grid{margin-top:4px!important}
}

/* Rodapé no celular: informações centralizadas */
@media (max-width:767px){
  html body .site-footer .footer-inner{text-align:center!important;justify-items:center!important}
  html body .site-footer .footer-brand{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;grid-column:1/-1!important;width:100%!important}
  html body .site-footer .footer-brand > :first-child{justify-content:center!important;margin-left:auto!important;margin-right:auto!important}
  html body .site-footer .footer-brand > img{display:block!important}
  html body .site-footer .footer-brand > p{margin-left:auto!important;margin-right:auto!important;max-width:320px!important;text-align:center!important}
  html body .site-footer .footer-brand > div{justify-content:center!important;flex-wrap:wrap!important}
  html body .site-footer .footer-col{align-items:center!important;text-align:center!important;width:100%}
  html body .site-footer .footer-col > *{text-align:center!important}
  html body .site-footer .footer-bottom{justify-content:center!important;text-align:center!important}
}

/* Celular: sem espaços vazios em volta de ilustrações e entre seções */
@media (max-width:767px){
  html body .app-fit{min-height:0!important;height:auto!important;padding-top:1.5rem!important;padding-bottom:1.5rem!important;overflow:hidden!important}
}

@media (max-width:767px){
  html body section.app-secpt{padding-top:56px!important}
  html body section.app-secpb{padding-bottom:56px!important}
}