/* =========================================================
   365 dias com Maria — paleta marian-litúrgica
   Override sobre Tailwind/Next.js do funil original
   ========================================================= */

@import url('https://fonts.bunny.net/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');

:root{
  --c-cream: #FBF7F0;
  --c-cream-soft: #F5EFE3;
  --c-marian: #1E3A8A;
  --c-marian-dark: #15296B;
  --c-marian-soft: #3B5BB5;
  --c-gold: #C9A66B;
  --c-gold-dark: #A8884C;
  --c-gold-light: #E0C896;
  --c-wine: #7F1D1D;
  --c-text: #1F2937;
  --c-text-soft: #4B5563;
  --serif: 'Cormorant Garamond', 'Georgia', serif;
}

/* ---------- Background creme litúrgico ---------- */
html, body{
  background-color: var(--c-cream) !important;
  color: var(--c-text) !important;
}
body.bg-gray-50,
.bg-white,
.bg-gray-50,
div.bg-white{
  background-color: var(--c-cream) !important;
}

/* ---------- Tipografia ---------- */
h1, h2,
.prose h1, .prose h2,
.text-lg p strong,
[style*="font-weight: 700"] p,
[style*="font-weight: 700"]{
  font-family: var(--serif) !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  color: var(--c-wine) !important;
}

.prose p{
  color: var(--c-text);
  line-height: 1.55;
}

/* azuis-saas (sky/cyan) usados para destaques inline → vira azul mariano */
[style*="color: rgb(14, 165, 233)"],
[style*="color: rgb(15, 141, 172)"],
[style*="color: rgb(29, 153, 182)"],
[style*="color: rgb(0, 160, 240)"],
[style*="color: rgb(40, 128, 210)"],
[style*="color: rgb(2, 132, 199)"],
[style*="color: rgb(126, 34, 206)"]{
  color: var(--c-marian) !important;
}

/* ---------- Cards de opção ---------- */
.shadow-lg.shadow-gray-500\/5,
[class*="rounded-xl border-b-4"]{
  background-color: #FFFFFF !important;
  border-color: var(--c-gold-light) !important;
  box-shadow: 0 2px 6px rgba(126, 29, 29, 0.08) !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.shadow-lg.shadow-gray-500\/5:hover,
[class*="rounded-xl border-b-4"]:hover{
  border-color: var(--c-gold) !important;
  box-shadow: 0 6px 16px rgba(201, 166, 107, 0.25) !important;
  transform: translateY(-1px);
}
.shadow-lg.shadow-gray-500\/5 button,
[class*="rounded-xl border-b-4"] a,
[class*="rounded-xl border-b-4"] button{
  color: var(--c-marian) !important;
}

/* ---------- Botões CTA primários (azul mariano + borda dourada) ---------- */
a[role="button"],
button.block-button,
.block-button{
  background: linear-gradient(180deg, var(--c-marian) 0%, var(--c-marian-dark) 100%) !important;
  background-image: linear-gradient(180deg, var(--c-marian) 0%, var(--c-marian-dark) 100%) !important;
  color: var(--c-cream) !important;
  border: 2px solid var(--c-gold) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(201, 166, 107, 0.30), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease;
  font-weight: 700 !important;
}
a[role="button"] *,
button.block-button *{
  color: inherit !important;
}
a[role="button"]:hover,
button.block-button:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(201, 166, 107, 0.55), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

/* ---------- Página de vendas: CTA dourado ---------- */
a[data-cta="sales"],
a[role="button"][data-cta="sales"]{
  background: linear-gradient(180deg, var(--c-gold) 0%, var(--c-gold-dark) 100%) !important;
  background-image: linear-gradient(180deg, var(--c-gold) 0%, var(--c-gold-dark) 100%) !important;
  color: var(--c-marian) !important;
  border: 2px solid var(--c-wine) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}
a[data-cta="sales"] *{ color: var(--c-marian) !important; }

/* ---------- Progress bar: azul mariano → dourado ---------- */
.xq-progress-bar{
  background-color: var(--c-marian) !important;
  background-image: linear-gradient(to right, var(--c-marian) 0%, var(--c-marian-soft) 50%, var(--c-gold) 100%) !important;
}
.xq-container{
  background-color: var(--c-cream-soft) !important;
}

/* ---------- Inputs (nome, prece, etc) ---------- */
input[type="text"], input:not([type]), textarea{
  background-color: #FFFFFF !important;
  border: 1.5px solid var(--c-gold-light) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  font-family: 'Poppins', sans-serif !important;
  color: var(--c-text) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="text"]:focus, input:not([type]):focus, textarea:focus{
  outline: none !important;
  border-color: var(--c-marian) !important;
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.15) !important;
}

/* ---------- Player de áudio ---------- */
[id*="prayer"] [class*="rounded-xl"],
[class*="bg-gray-50 border-gray-200"]{
  background-color: #FFFFFF !important;
  border-color: var(--c-gold-light) !important;
  box-shadow: 0 4px 14px rgba(30, 58, 138, 0.08) !important;
}

/* botão play do áudio (azul-saas → azul mariano) */
button[id] svg path[d^="M424.4"]{
  fill: var(--c-marian) !important;
}
[style*="background-color: rgb(37, 99, 235)"]{
  background-color: var(--c-marian) !important;
}
[style*="color: rgb(37, 99, 235)"]{
  color: var(--c-marian) !important;
}

/* ---------- Página 9 (loading) — barra dourada ---------- */
[style*="background-image: linear-gradient(to right, rgba(37, 99, 235, 0.6), rgb(37, 99, 235))"]{
  background-image: linear-gradient(to right, var(--c-marian) 0%, var(--c-gold) 100%) !important;
}

/* ---------- Tipografia auxiliar ---------- */
.text-base{ color: var(--c-text-soft); }
.text-sm  { color: var(--c-text-soft); }
strong, b{ color: var(--c-wine); }

/* dentro de botões e cards azuis, NÃO repintar os strong em vinho */
a[role="button"] strong,
a[role="button"] b,
.block-button strong{
  color: inherit !important;
}

/* ---------- Imagens com leve cantos arredondados ---------- */
img{ border-radius: 8px; }

/* ---------- Pequena animação de entrada das telas ---------- */
@keyframes liturgicalFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
main > div{
  animation: liturgicalFade .55s ease both;
}

/* ---------- Esconder ícone genérico de "user" dentro de inputs ---------- */
/* O lucide-user fica sobreposto ao placeholder e polui a UX. Removemos. */
.lucide-user{ display: none !important; }
.relative.block.w-full > .absolute.inset-y-0.left-0{ display: none !important; }
input.pl-12{ padding-left: 16px !important; }

/* ---------- Página 9 — fundo escuro litúrgico durante "Gerando..." ---------- */
/* (mantemos cream por consistência, mas reforçamos a barra) */

/* ---------- Página 10 — harmonizar imagens de fundo branco ---------- */
/* badges e mockups do produto têm fundo branco "duro" — suavizamos com creme.
   Estratégia: aplicar mix-blend-mode multiply nos tipos de imagem que
   tem fundo branco contra o creme do site. */
img[src*="aa7da68b-e8eb-4d54-b436-f1346e0d9766"],   /* selo 90 dias */
img[src*="b2cbab9c-4bec-47fc-8b96-9b337b50f772"]{    /* outro selo */
  mix-blend-mode: multiply;
}

/* Wrapper visual para depoimentos (whatsapp screenshots) — moldura dourada suave */
img[src*="2bc7a6a3-4c7b-47b2-aebb-dd84f9705c30"],
img[src*="7454eb68-53a7-4f45-bfea-3716a110c0a4"],
img[src*="f3df381b-98e1-40ca-8344-717a01edcb6c"],
img[src*="84c21624-a48d-4711-9020-00af378294de"],
img[src*="de356f25-754d-47fb-805b-253c6fdacd70"],
img[src*="1684146a-541f-4f5a-b834-2bec6f95ee3c"]{
  border: 1px solid var(--c-gold-light);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(126, 29, 29, 0.08);
}

/* Imagens centrais do produto (capa, mockups) — moldura sutil */
img[src*="d1b4cee7-436f-4b65-b77a-5313aebfaa01"],
img[src*="fa9b88e6-c282-43e0-b637-c41a51a9ed42"],
img[src*="a6a9289a-6999-4d17-938f-b5270c8126e0"],
img[src*="3afa1cfd-9241-4586-b5aa-e242fd211973"],
img[src*="9a18abc2-9eaf-46fa-9ccf-891353d8ca30"]{
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(30, 58, 138, 0.08);
}

/* Cor de fundo das seções verdes (lista de bônus, conexão espiritual etc.)
   está com fundo verde-claro original — substituímos por creme suave +
   borda dourada para coerência marian. */
[style*="background-color: rgb(220, 252, 231)"],   /* green-100 */
[style*="background-color: rgb(187, 247, 208)"],   /* green-200 */
[class*="bg-green"]{
  background-color: var(--c-cream-soft) !important;
  border-left: 4px solid var(--c-gold) !important;
  border-radius: 10px;
}
[style*="color: rgb(22, 163, 74)"],   /* green-600 */
[style*="color: rgb(21, 128, 61)"],   /* green-700 */
[style*="color: rgb(34, 197, 94)"]{   /* green-500 */
  color: var(--c-marian) !important;
}

/* Texto "DE R$97" tachado em vermelho original — mantém vermelho mas suaviza */
[style*="color: rgb(239, 68, 68)"],
[style*="color: rgb(220, 38, 38)"]{
  color: var(--c-wine) !important;
}

/* "POR APENAS R$37,00" em verde grande na home da venda → vinho elegante */
[style*="color: rgb(22, 163, 74)"][style*="font-size"],
[style*="color: rgb(21, 128, 61)"][style*="font-size"]{
  color: var(--c-wine) !important;
  font-family: var(--serif) !important;
}

/* ---------- Página 9 — CTA escondido até barra completar ---------- */
[data-progress-cta-hidden="1"]{
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .6s ease;
}

/* =========================================================
   CROSS-BROWSER MOBILE COMPATIBILITY (Android + iOS)
   ========================================================= */
*, *::before, *::after{
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Quebra de palavras inteligente — funciona em TODOS os browsers */
.step,
.step p,
.step .prose,
.step .prose p,
.step .xq-container p,
.step .tiptap-rendering p,
.step h1, .step h2, .step h3{
  overflow-wrap: break-word;
  word-wrap: break-word;        /* fallback IE/Android antigo */
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Progressive enhancement: text-wrap balance/pretty (Chrome 114+, Safari 17.5+) */
@supports (text-wrap: balance){
  .step .prose p,
  .step .xq-container p,
  .step .tiptap-rendering p{
    text-wrap: balance;
  }
}
@supports (text-wrap: pretty){
  .step .prose p{
    text-wrap: pretty;
  }
}

/* Fallback universal: evita órfãos forçando max 1 órfão e mín 2 widows */
.step p{
  orphans: 2;
  widows: 2;
}

/* Garante que emojis fiquem com a palavra anterior */
.step .prose strong{ white-space: normal; }

/* Touch-friendly tap targets (mínimo 44x44 — Apple HIG / Android Material) */
.step a[role="button"],
.step button,
.step .shadow-lg button,
.step [class*="rounded-xl border-b-4"] a{
  min-height: 44px;
  touch-action: manipulation;
}

/* Inputs no Android Chrome: previne zoom automático ao focar */
.step input[type="text"],
.step input:not([type]),
.step textarea{
  font-size: 16px !important;   /* iOS/Android NÃO da zoom se font-size >= 16px */
}

/* =========================================================
   MOBILE RESPONSIVE — proporções corrigidas para celular
   ========================================================= */
@media (max-width: 640px){
  /* HEADLINE PRINCIPAL (a pergunta/título de cada step) — MAIOR */
  .step .prose.text-lg p,
  .step .text-lg p strong,
  .step [style*="font-weight: 700"] p,
  .step .tiptap-rendering .text-lg{
    font-size: 1.25rem !important;       /* ~20px - destaque */
    line-height: 1.3 !important;
    letter-spacing: 0.1px !important;
    font-weight: 700 !important;
  }
  /* Headlines genéricas (h1, h2, h3) */
  h1, h2, h3, .prose h1, .prose h2{
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
  }
  /* Texto secundário — MENOR (era 14-15px) */
  .step .prose p:not([style*="font-weight: 700"]):not(.text-lg p),
  .step .text-base p,
  .step .text-base,
  .step .xq-container .prose p:not([style*="font-weight: 700"]){
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }
  .text-sm p, .text-sm{
    font-size: 0.78rem !important;
  }
  /* DECLARE com fé… — texto importante, maior + destaque */
  .step[data-step="pedido"] [data-xq-element-id] .xq-container.prose p,
  .step[data-step="pedido"] .prose p[style*="font-weight: 700"]{
    font-size: 1rem !important;
    line-height: 1.45 !important;
    color: var(--c-wine) !important;
  }
  /* Imagem da Maria no topo — MAIOR */
  img[src*="d3d0db68"]{
    width: 64px !important;
    max-width: 64px !important;
    height: auto !important;
  }

  /* Cards de opção (intenções, estado espiritual, desafios, caminho) */
  .shadow-lg.shadow-gray-500\/5,
  [class*="rounded-xl border-b-4"]{
    border-radius: 10px !important;
  }
  .step .shadow-lg.shadow-gray-500\/5 button,
  .step .shadow-lg.shadow-gray-500\/5 a,
  .step [class*="rounded-xl border-b-4"] button,
  .step [class*="rounded-xl border-b-4"] a,
  .step .flex.flex-auto.items-center.gap-3.p-4{
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  .step .shadow-lg.shadow-gray-500\/5 .text-4xl,
  .step [class*="rounded-xl border-b-4"] .text-4xl{
    font-size: 22px !important;          /* emoji menor (era ~36px) */
  }
  .step .shadow-lg.shadow-gray-500\/5 .text-sm p,
  .step [class*="rounded-xl border-b-4"] .text-sm p,
  .step .flex.flex-auto.items-center.gap-3.p-4 p{
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;     /* remove caps (estava em uppercase) */
  }

  /* Botões CTA (Continuar / Iniciar / Receber) */
  .step a[role="button"],
  .step button.block-button,
  .block-button{
    padding: 14px 16px !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.4px !important;
    border-radius: 10px !important;
  }
  .step a[role="button"] p,
  .step button.block-button p{
    font-size: 0.95rem !important;
    margin: 0 !important;
  }

  /* Imagens médias no mobile (mas hero da venda fica grande) */
  .step img:not([src*="d3d0db68"]):not([src*="frei-narrador"]):not([src*="d1b4cee7"]){
    max-width: 220px !important;
    height: auto !important;
  }
  /* Hero da página de vendas — MAIOR para destaque */
  .step[data-step="devocional"] img[src*="d1b4cee7"]{
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  /* Logo Maria — controlled by mobile-headline rule above */

  /* Pg #gerando — texto principal MAIOR */
  .step[data-step="gerando"] .prose p,
  .step[data-step="gerando"] .prose,
  .step[data-step="gerando"] [style*="font-weight: 700"],
  .step[data-step="gerando"] .text-lg p,
  .step[data-step="gerando"] .tiptap-rendering p{
    font-size: 1.15rem !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
  }
  /* "Gerando seu Devocional 🙏❤️" e "99%" */
  .step[data-step="gerando"] h1,
  .step[data-step="gerando"] .text-base p,
  .step[data-step="gerando"] .leading-6{
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }
  .step[data-step="gerando"] .absolute.w-full{
    font-size: 0.85rem !important;
  }
  .step[data-step="gerando"] img{
    max-width: 200px !important;
  }

  /* Pg #devocional — penúltima das mais importantes */
  .step[data-step="devocional"] h1,
  .step[data-step="devocional"] h2,
  .step[data-step="devocional"] h3{
    font-size: 1.05rem !important;
  }
  .step[data-step="devocional"] .custom-card-grid{
    padding: 16px 14px !important;
    gap: 10px !important;
  }
  .step[data-step="devocional"] .custom-card-grid h3{
    font-size: 1.1rem !important;
  }
  .step[data-step="devocional"] .custom-card-grid > div{
    padding: 12px !important;
    gap: 10px !important;
  }
  .step[data-step="devocional"] .custom-card-grid > div > div:first-child{
    font-size: 22px !important;     /* emoji */
  }
  .step[data-step="devocional"] .custom-card-grid > div strong{
    font-size: 0.95rem !important;
  }
  .step[data-step="devocional"] .custom-card-grid > div span{
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
  }
  /* Widget urgency */
  #urgency-widget{
    padding: 14px 12px !important;
  }
  #countdown-display{
    font-size: 24px !important;
    letter-spacing: 1.5px !important;
  }

  /* Container principal — menos padding lateral */
  .funnel-container,
  .box-border.flex.min-h-screen{
    padding: 18px 14px !important;
  }
  .funnel-main,
  main.flex.w-full{
    gap: 22px !important;
  }
  .step{
    gap: 22px !important;
  }
}

@media (max-width: 380px){
  /* iPhone SE / pequenos */
  h1, h2, h3, .prose h1, .prose h2{
    font-size: 0.98rem !important;
  }
  .step .text-4xl{ font-size: 20px !important; }
  .funnel-container{ padding: 14px 10px !important; }
}

/* ---------- Pg-10 — força wrap no container do widget de urgência ---------- */
/* :has() funciona em todos os browsers modernos (Chrome 105+, Safari 15.4+, FF 121+) */
.flex:has(#urgency-widget){
  flex-wrap: wrap !important;
  flex-direction: column !important;
}
#urgency-widget{
  width: 100% !important;
}
/* Remove imagem duplicada 3afa1cfd (mesmo conteúdo do nosso card HTML) */
img[src*="3afa1cfd-9241-4586-b5aa-e242fd211973"]{
  display: none !important;
}