/*
Theme Name: Banho sem Conflito
Theme URI: https://banho-calmo-agora.lovable.app
Author: Banho sem Conflito
Author URI: https://banho-calmo-agora.lovable.app
Description: Tema de página de vendas para o eBook "Banho sem Conflito - Cuidados calmos na Higiene de Idosos". Replica fielmente a landing page Lovable em HTML/CSS/PHP nativo, sem dependências de build.
Version: 1.0.0
License: GPL v2 or later
Text Domain: banho-sem-conflito
*/

/* =========================================================
   DESIGN TOKENS  (HSL — equivalente ao index.css do projeto)
   ========================================================= */
:root{
  --background: 36 40% 97%;
  --foreground: 200 35% 14%;
  --card: 0 0% 100%;
  --card-foreground: 200 35% 14%;
  --primary: 198 55% 26%;
  --primary-foreground: 36 40% 97%;
  --secondary: 35 55% 92%;
  --muted-foreground: 200 15% 38%;
  --accent: 28 75% 58%;
  --accent-foreground: 0 0% 100%;
  --warm: 24 70% 95%;
  --border: 35 30% 88%;
  --radius: 0.875rem;

  --gradient-hero: linear-gradient(135deg, hsl(28 60% 95%) 0%, hsl(35 55% 92%) 60%, hsl(198 30% 88%) 100%);
  --gradient-cta: linear-gradient(135deg, hsl(28 80% 58%), hsl(20 75% 52%));
  --shadow-soft: 0 10px 40px -12px hsl(200 40% 20% / 0.18);
  --shadow-book: 0 30px 60px -20px hsl(200 50% 15% / 0.35);
  --shadow-cta: 0 12px 30px -8px hsl(28 80% 50% / 0.45);
}

/* =========================================================
   RESET LIGHT + BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color: hsl(var(--primary));}
h1,h2,h3,h4{font-family: 'Fraunces', Georgia, serif; font-weight:600; line-height:1.2; color: hsl(var(--primary)); margin:0 0 1rem;}
p{margin:0 0 1rem;}
em{font-style:italic;}
strong{font-weight:600;color:hsl(var(--foreground));}

*:focus-visible{outline:3px solid hsl(var(--accent)); outline-offset:2px; border-radius:6px;}

/* =========================================================
   LAYOUT
   ========================================================= */
.container{max-width: 64rem; margin:0 auto; padding: 0 1.25rem;}
.section{padding: 3.5rem 1.25rem;}
.section .inner{max-width: 48rem; margin: 0 auto;}
@media (min-width: 768px){ .section{padding: 5rem 1.25rem;} }

.bg-warm{background: hsl(var(--warm));}
.bg-hero{background: var(--gradient-hero);}
.bg-primary{background: hsl(var(--primary)); color: hsl(var(--primary-foreground));}
.bg-primary h2{color: hsl(var(--primary-foreground));}

/* =========================================================
   HERO
   ========================================================= */
.hero{background: var(--gradient-hero);}
.hero-inner{max-width: 80rem; margin:0 auto; padding: 3rem 1.25rem 2.5rem;}
@media (min-width: 768px){ .hero-inner{padding: 5rem 1.25rem 4rem;} }
.hero-grid{display:grid; gap: 2.5rem; align-items:center; grid-template-columns: 1fr;}
@media (min-width: 768px){ .hero-grid{grid-template-columns: 1fr 1fr;} }
.hero-text{text-align:center;}
@media (min-width: 768px){ .hero-text{text-align:left;} }
.badge{
  display:inline-block; font-size:.75rem; font-weight:500; letter-spacing:.05em;
  text-transform:uppercase; color: hsl(var(--primary) / .85);
  background: hsl(var(--warm)); padding:.375rem 1rem; border-radius:9999px; margin-bottom:1.25rem;
}
.h1{font-size: clamp(1.875rem, 4vw, 3rem); margin-bottom:1.25rem;}
.lead{font-size: clamp(1rem, 1.6vw, 1.25rem); color: hsl(var(--muted-foreground)); margin-bottom:1.75rem;}
.hero-img{border-radius:1rem; box-shadow: var(--shadow-soft); width:100%; object-fit:cover;}
.note{font-size:.875rem; color: hsl(var(--muted-foreground)); margin-top:1rem;}

/* =========================================================
   CTA BUTTON
   ========================================================= */
.btn-cta{
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--gradient-cta);
  color: hsl(var(--accent-foreground));
  font-weight:600; font-size:1rem;
  padding: 1.1rem 2rem;
  border-radius:9999px;
  box-shadow: var(--shadow-cta);
  text-decoration:none;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s;
  border:none; cursor:pointer;
}
.btn-cta:hover{opacity:.95; transform: scale(1.02); color: hsl(var(--accent-foreground));}
@media (min-width: 768px){ .btn-cta{font-size:1.125rem;} }
.cta-wrap{text-align:center; margin-top: 2.5rem;}

/* =========================================================
   EBOOK MOCKUP
   ========================================================= */
.ebook-grid{display:grid; gap: 2.5rem; align-items:center; grid-template-columns: 1fr;}
@media (min-width: 768px){ .ebook-grid{grid-template-columns: 1fr 1fr;} }
.ebook-img{
  width: 16rem; max-width: 24rem; margin: 0 auto;
  filter: drop-shadow(0 30px 40px hsl(200 50% 15% / 0.35));
}
@media (min-width: 768px){ .ebook-img{width:100%;} }
.eyebrow{
  font-size:.875rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color: hsl(var(--accent)); margin-bottom:.75rem;
}
.h2{font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom:1.25rem;}
.muted{color: hsl(var(--muted-foreground));}

/* =========================================================
   BENEFICIOS — lista com check
   ========================================================= */
.benefit-list{list-style:none; padding:0; margin: 0 0 2rem;}
.benefit-list li{
  display:flex; gap:1rem; align-items:flex-start;
  background: hsl(var(--card)); padding: 1.25rem;
  border-radius: 1rem; box-shadow: var(--shadow-soft);
  border:1px solid hsl(var(--border) / .6); margin-bottom:1rem;
}
.check-circle{
  flex-shrink:0; width:2.25rem; height:2.25rem; border-radius:9999px;
  background: var(--gradient-cta);
  display:flex; align-items:center; justify-content:center;
  color: hsl(var(--accent-foreground)); font-weight:bold;
}
.check-circle svg{width:1.1rem;height:1.1rem;}

/* =========================================================
   GRID DE APRENDIZAGEM
   ========================================================= */
.learn-grid{display:grid; gap:1.25rem; grid-template-columns:1fr;}
@media (min-width: 768px){ .learn-grid{grid-template-columns:1fr 1fr;} }
.learn-card{
  background: hsl(var(--card)); padding:1.5rem; border-radius:1rem;
  box-shadow: var(--shadow-soft); border:1px solid hsl(var(--border) / .6);
}
.learn-icon{
  width:2.75rem; height:2.75rem; border-radius:9999px;
  background: hsl(var(--secondary));
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
  color: hsl(var(--primary));
}
.learn-icon svg{width:1.25rem;height:1.25rem;}
.learn-card h3{font-size:1.25rem; margin-bottom:.5rem;}

/* =========================================================
   EMOCIONAL
   ========================================================= */
.quote{
  font-family:'Fraunces',serif; font-style:italic;
  font-size: clamp(1.25rem, 2.4vw, 1.875rem);
  text-align:center; line-height:1.6; margin:0;
}
.handheart{display:block; margin: 0 auto 1.5rem; opacity:.8;}

/* =========================================================
   OBJEÇÕES
   ========================================================= */
.obj{background: hsl(var(--warm)); padding:1.5rem; border-radius:1rem;
  border:1px solid hsl(var(--border) / .6); margin-bottom:1rem;}
.obj p:first-child{font-weight:600; color: hsl(var(--primary)); margin-bottom:.5rem;}
.obj p:last-child{color: hsl(var(--foreground) / .85); margin:0;}

/* =========================================================
   PREÇO + CARD CTA
   ========================================================= */
.price-card{
  background: hsl(var(--card)); border-radius: 1.5rem;
  box-shadow: var(--shadow-book); padding: 2rem; text-align:center;
  border:1px solid hsl(var(--border) / .6);
}
@media (min-width: 768px){ .price-card{padding:3rem;} }
.price-card .h2{font-size: clamp(1.875rem, 4vw, 3rem); margin-bottom:1rem;}

/* Countdown */
.countdown{
  display:inline-flex; flex-direction:column; align-items:center; gap:.5rem;
  background: hsl(var(--warm));
  border:1px solid hsl(var(--accent) / .3);
  border-radius:1rem; padding:1rem 1.25rem; margin: 0 auto 1.5rem;
  box-shadow: var(--shadow-soft);
}
.countdown-label{
  font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color: hsl(var(--primary)); display:flex; align-items:center; gap:.5rem;
}
.countdown-time{
  display:flex; align-items:center; gap:.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.75rem; font-weight:bold; color: hsl(var(--accent));
}
@media (min-width:768px){ .countdown-time{font-size:2rem;} }
.countdown-time .num{
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  border-radius:.5rem; padding: .35rem .75rem;
}
.countdown-time .sep{color: hsl(var(--primary));}

.selo{width:8rem; margin: 1.5rem auto 0;}
@media (min-width: 768px){ .selo{width:10rem;} }

.trust{display:flex; align-items:center; justify-content:center; gap:.75rem;
  font-size:.875rem; color: hsl(var(--muted-foreground)); margin-top:.75rem;}
.trust:first-of-type{margin-top:2rem;}
.trust svg{width:1.25rem;height:1.25rem;color:hsl(var(--primary));}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground) / .9);
  padding: 3rem 1.25rem;
}
.site-footer .inner{max-width:48rem; margin:0 auto; text-align:center; font-size:.875rem;}
.site-footer .brand{font-family:'Fraunces',serif; font-size:1.25rem; color:hsl(var(--primary-foreground));}
.site-footer .tag{opacity:.7; font-size:.75rem; margin-top:.25rem;}
.site-footer nav{margin: 1.5rem 0; display:flex; flex-wrap:wrap; gap: 1rem 1.5rem; justify-content:center;}
.site-footer nav a{color: hsl(var(--primary-foreground)); opacity:.9; text-decoration:none;}
.site-footer nav a:hover{opacity:1; text-decoration:underline; text-underline-offset:4px;}
.site-footer .copy{opacity:.6; font-size:.75rem; padding-top:1rem;
  border-top:1px solid hsl(var(--primary-foreground) / .15);}

/* =========================================================
   PÁGINAS DE TEXTO (Termos / Privacidade / Obrigado)
   ========================================================= */
.text-page{max-width:48rem; margin:0 auto; padding: 4rem 1.25rem;}
.text-page h1{font-size:2rem; margin-bottom:2rem;}
.text-page h2{font-size:1.35rem; margin-top:2rem; margin-bottom:.75rem;}
.text-page p, .text-page li{color: hsl(var(--foreground) / .9);}
.text-page ul{padding-left:1.25rem;}
.back-link{display:inline-block; margin-bottom:1.5rem; color: hsl(var(--primary)); text-decoration:none;}
.back-link:hover{text-decoration:underline;}

.thanks{text-align:center; max-width:42rem; margin:0 auto; padding: 5rem 1.25rem;}
.thanks .check-big{
  width:5rem;height:5rem;border-radius:9999px;
  background: var(--gradient-cta);
  display:flex; align-items:center; justify-content:center; margin: 0 auto 1.5rem;
  color: hsl(var(--accent-foreground));
}
.thanks .check-big svg{width:2.5rem;height:2.5rem;}