/* =========================================================
   LP CSS - versão "robusta" para webview + 3G + low-end
   Objetivo: manter o layout, reduzir riscos de compatibilidade
   ========================================================= */

/* -------------------------
   Tokens + fallbacks
------------------------- */
:root {
  --container: 900px;
  --pad: 20px;
  --radius: 14px;
  --line: rgba(0, 0, 0, 0.12);
  --muted: rgba(0, 0, 0, 0.62);
  --bg: #ffffff;
  --surface: rgba(0, 0, 0, 0.03);
  --primary: #AE0025;
  --color-black: #000000;
  --color-gray: #9C9C9C;
  --font-h1-size: 48px;
  --font-h1-weight: 400;
  --font-h1-strong-weight: 600;
  --font-p-size: 16px;
  --font-p-weight: 400;
}

/* Fallbacks */
body { background: #ffffff; color: #111; }

/* -------------------------
   Reset básico
------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; }
html { scroll-behavior: auto; /* ✅ Removido smooth para evitar congelamento em WebView */ }

body {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji";
  background: var(--bg, #ffffff);
  color: #111;
}

/* -------------------------
   Tipografia
------------------------- */
h1 {
  font-size: var(--font-h1-size, 48px);
  font-style: normal;
  font-weight: var(--font-h1-weight, 400);
  letter-spacing: -1px;
  line-height: 48px;
}
h1.strong { font-weight: var(--font-h1-strong-weight, 600); }

h2 {
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 48px;
}

h3 {
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -0.96px;
}

h4 { font-size: 18px; font-weight: 400; }
.form-card h4 { font-size: 21px; }

p {
  font-size: var(--font-p-size, 16px);
  font-style: normal;
  font-weight: var(--font-p-weight, 400);
  line-height: 1.35;
  color: var(--color-gray, #9C9C9C);
}

/* Links */
a:not([data-variant="primary"]):not([data-variant="secondary"]) { color: var(--primary, #AE0025); }
a:not([data-variant="primary"]):not([data-variant="secondary"]):visited,
a:not([data-variant="primary"]):not([data-variant="secondary"]):hover,
a:not([data-variant="primary"]):not([data-variant="secondary"]):active,
a:not([data-variant="primary"]):not([data-variant="secondary"]):focus { color: var(--primary, #AE0025); }

/* Utilitários */
.text-center { text-align: center; }
.text-white { color: #fff; }
.text-primary { color: var(--primary, #AE0025); }
.text-gray { color: var(--color-gray, #9C9C9C); }
.text-dark { color: #000000; }

/* -------------------------
   Containers
------------------------- */
.container {
  max-width: var(--container, 900px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad, 20px);
  padding-right: var(--pad, 20px);
}

[data-block],
section {
  padding-left: var(--pad, 20px);
  padding-right: var(--pad, 20px);
}

/* -------------------------
   Cartões / forms
------------------------- */
.form-card {
  background: #fff;
  border: 1px solid #EEEEEE;
  border-radius: 16px;
  padding: 25px 35px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.form-card--flat {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.hero-form { position: relative; z-index: 2; }

.form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 500;
  color: #111;
}

.form-input {
  font-size: 16px;
  letter-spacing: inherit;
  color: #000000;
  display: block;
  width: 100%;
  background: rgba(0, 0, 0, 0.10);
  margin: 0;
  padding: 16px 14px;
  border-radius: 10px;
  border: none;
}

/* ✅ ALTERAÇÃO: Garante que inputs numéricos tenham tamanho mínimo de 16px para evitar zoom */
input[inputmode="numeric"],
input[type="tel"],
input[type="number"] {
  font-size: 16px;
}

/* ✅ ALTERAÇÃO: Desabilita zoom ao focar em inputs em iOS */
@supports (-webkit-touch-callout: none) {
  input[inputmode="numeric"],
  input[type="tel"],
  input[type="number"] {
    font-size: 16px;
    zoom: 1;
  }
}

/* input com bandeira */
.input-flag { position: relative; }
.input-flag__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 16px;
  border-radius: 2px;
  pointer-events: none;  /* ✅ CORREÇÃO: Impede que capture cliques */
}
.input-flag .form-input { padding-left: 48px; }

/* -------------------------
   Header
------------------------- */
header[data-block="header"] {
  position: static; /* ✅ Mudado de sticky para static (não funciona em WebView antigo) */
  top: auto;
  z-index: 10;
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--line, rgba(0,0,0,0.12));
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  padding: 10px 0;
}

.lp-v4 header[data-block="header"] { position: static; top: auto; }

header[data-block="header"] .nav-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

header .brand { font-weight: 800; text-decoration: none; color: #111; letter-spacing: -0.02em; }
header .brand img {
  width: 260px;
  height: auto;
}

header[data-block="header"] .link-ajuda-header {
  font-size: 14px;
  color: var(--primary, #AE0025) !important;
  text-decoration: none;
  -webkit-text-fill-color: var(--primary, #AE0025);
}

/* -------------------------
   Botões
------------------------- */
a[data-variant="primary"],
a[data-variant="secondary"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 25px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid transparent;
}

a[data-variant="primary"] { background: var(--primary, #AE0025); color: #fff; }
a[data-variant="secondary"] { background: transparent; color: #111; border-color: var(--line, rgba(0,0,0,0.12)); }

.btn-cta {
  overflow: hidden;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-transform: lowercase;
  line-height: normal;
  font-size: 14px;
  font-weight: 700;
  padding: 15px 35px;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 50px;
  background-color: var(--primary, #AE0025);
  color: #fff;
  border: none;
  box-shadow: none;
}

/* Bootstrap compat */
.btn-primary,
[data-variant="primary"] {
  background: var(--primary, #AE0025) !important;
  border-color: var(--primary, #AE0025) !important;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.btn-outline-secondary {
  color: #111;
  border-color: var(--line, rgba(0,0,0,0.12));
  background: transparent;
}

/* -------------------------
   Hero
------------------------- */
#hero {
  position: relative;
  color: #fff;
  display: flex;
  align-items: stretch;
}

#hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: linear-gradient(
    90deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.18) 35%,
    rgba(0,0,0,0.08) 60%,
    rgba(0,0,0,0) 100%
  );
  pointer-events: none;
}

.hero-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("../img/hero-figma.jpg");
  background-color: #ae0025; /* fallback */
  background-size: cover;
  background-position: top center;
  z-index: 0;
}

.hero-bg::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  align-items: flex-end;
  margin-bottom: -3rem;
}

.hero-content .row { align-items: flex-end; }

.hero-title {
  font-size: 64px;
  line-height: 1.02;
  margin: 0 0 12px 0;
}

.hero-subtitle {
  font-size: 16px;
  color: rgba(255,255,255,0.9);
  margin: 8px 0 0;
}

/* clamp fallback */
.hero-title[data-variant="h1"] {
  margin: 0;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
@media (min-width: 768px) { .hero-title[data-variant="h1"] { font-size: 44px; } }
@media (min-width: 1200px) { .hero-title[data-variant="h1"] { font-size: 56px; } }

/* -------------------------
   Seções
------------------------- */
.bg-light { background: #EEEEEE; }

/* ✅ FIX: estava errado (#features.container). O correto é #features .container */
#como-funciona .container,
#features .container {
  padding-left: 0;
  padding-right: 0;
}

/* -------------------------
   Prova social
------------------------- */
.prova-social {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 25px 10px 20px;
  background: #fff;
  border-radius: 50px;
  width: auto;
  max-width: 320px;
}

.prova-social__img { width: 70px; height: auto; }
.prova-social__text { color: #000; font-size: 12px; font-weight: 400; line-height: 16px; }

/* =========================
   FAQ aberto – alinhado à esquerda
========================= */
#faq, #faq .container, .faq-accordion { text-align: left; }

.faq-item {
  border: 1px solid #DFDFDF;
  border-radius: 16px;
  padding: 20px 22px;
  margin: 18px 0;
  background: #fff;
}

.faq-button {
  padding: 0;
  margin: 0 0 10px 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  cursor: default;
  text-align: left;
}

.faq-button span {
  display: block;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: #000;
}

.faq-icon { display: none; }

.faq-body { display: block; padding: 0; }

.faq-body p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(0,0,0,.65);
}

.faq-body ul {
  margin: 10px 0 0 18px;
  padding: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(0,0,0,.65);
}

/* -------------------------
   Vídeo thumb (link direto pro YouTube)
   ✅ CORREÇÃO: remove "height:0 + padding-top" que causava o bloco preto gigante
------------------------- */
.video-thumb-col {
  display: flex;
  justify-content: center;
  flex-direction: column; /* para caber fallback abaixo */
  align-items: center;
  gap: 10px;
}

.video-thumb-link {
  display: block;
  color: inherit;
  text-decoration: none;
  width: 100%;
}

/* ✅ thumb com altura real via aspect-ratio */
.video-thumb {
  position: relative;
  width: 100%;
  max-width: 380px;
  border-radius: 14px;
  overflow: hidden;
  background: #000;

  aspect-ratio: 4 / 5;
}

/* ✅ fallback para browsers antigos (se aspect-ratio falhar) */
@supports not (aspect-ratio: 4 / 5) {
  .video-thumb {
    height: auto;
  }
  .video-thumb::before {
    content: "";
    display: block;
    padding-top: 125%;
  }
  .video-thumb > * {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; /* ✅ Expandido de inset: 0 para compatibilidade */
  }
}

.video-thumb__image,
.video-thumb img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.video-thumb__overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  text-align: center;
}

.video-thumb__overlay::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
}

.video-thumb__overlay > * { position: relative; z-index: 1; }

.video-thumb__meta { text-align: center; color: #fff; }
.video-thumb__meta strong { display: block; font-size: 20px; font-weight: 700; }
.video-thumb__meta p { margin: 4px 0 0; font-size: 12px; color: #fff; }

.video-thumb__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  color: #111;
}

.video-thumb__icon { width: 16px; height: 16px; }
.video-thumb__label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111;
}

/* ✅ Fallback text */
.video-fallback {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(0,0,0,.65);
  text-align: center;
}
.video-fallback a { color: var(--primary, #AE0025); text-decoration: underline; }

/* ✅ Duplicação removida - definição única está abaixo */

/* -------------------------
   Footer
------------------------- */
.footer-powered-wrap { display: inline-flex; align-items: center; gap: 8px; }
.footer-powered { color: #000; font-size: 10px; font-weight: 400; line-height: 24px; letter-spacing: -0.4px; }
.footer-logo { width: 120px; height: auto; }

/* Outros */
.align-self-start { align-self: flex-start; }
.row-center { justify-content: center; }

/* Responsivo */
@media (max-width: 992px) {
  .hero-title { font-size: 44px; }
}

@media (max-width: 768px) {
  header[data-block="header"] { padding: 15px 0; }
  header .brand img { width: 180px; }

  .hero-title { font-size: 36px; line-height: 36px; }
  h2 { font-size: 35px; line-height: 35px; }

  /* ✅ Remove imagem do hero no mobile, mantém fundo vermelho */
  .hero-bg { background-image: none !important; background-color: #ae0025; }
  .hero-bg::after { display: none; }
  
  /* ✅ Remove overlay do hero no mobile para evitar dead clicks */
  #hero::before { display: none; }
  
  /* ✅ Remove margin-bottom negativo no mobile para evitar dead clicks */
  .hero-content {
    margin-bottom: 0;
  }

  #como-funciona .col-12.col-lg-8 { text-align: center; }
  #como-funciona .prova-social { margin: 0 auto; }
  #como-funciona .col-12.col-lg-4.align-self-start {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #faq .container,
  .hero-content .container {
    padding-left: 0;
    padding-right: 0;
  }}

/* -------------------------
   Modal de Video (CSS-only, sem JavaScript)
------------------------- */

.video-thumb-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
  color: inherit;
  text-decoration: none;
  width: 100%;
}

.video-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 999;
  background: rgba(0, 0, 0, 0.7);
}

/* Mostra o modal quando a URL tem #video-modal-sara */
.video-modal:target {
  display: flex;
}

.video-modal__content {
  position: relative;
  z-index: 1;
  width: 90vw;
  max-width: 720px;
  max-height: 90vh;
  background: #000;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.video-modal__close {
  align-self: flex-end;
  font-size: 24px;
  color: #fff;
  text-decoration: none;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.video-modal__close:hover {
  color: #ccc;
}

.video-modal__frame {
  position: relative;
  width: 100%;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.video-modal__frame iframe {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Fallback para browsers antigos (sem aspect-ratio) */
@supports not (aspect-ratio: 16 / 9) {
  .video-modal__frame {
    height: auto;
  }
  .video-modal__frame::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 */
  }
.video-modal__frame iframe {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; /* ✅ Expandido de inset: 0 para compatibilidade */
}
}

/* Responsivo para mobile */
@media (max-width: 768px) {
  .video-modal {
    padding: 10px;
  }
  
  .video-modal__content {
    width: 95vw;
    max-width: 100%;
    max-height: 80vh;
    padding: 12px;
  }
  
  .video-modal__frame {
    aspect-ratio: 9 / 16;
  }
  
  @supports not (aspect-ratio: 9 / 16) {
    .video-modal__frame::before {
      padding-top: 177.78%; /* 9:16 */
    }
  }
}
/* fim */