/* =============================================================
   Escolhi Pra Casa — Landing Page VIP WhatsApp
   CSS puro, mobile-first. Breakpoints: base(375) · 480 · 768 · 1280
   ============================================================= */

/* -------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------- */
:root {
  /* Cores — base da marca */
  --c-bg:            #FAF6F2; /* off-white quente */
  --c-bg-rose:       #F4E8E3; /* rosa muito claro (gradiente hero) */
  --c-wine:          #7A2E3F; /* headlines · 8.5:1 sobre --c-bg */
  --c-body:          #5A4A4F; /* texto corrido · 7.7:1 */
  --c-muted:         #7A6B6F; /* secundário/legível · 4.7:1 (substitui opacidade que reprovava AA) */

  /* Terracota — ajustado para WCAG AA (original #D87856 dava só 2.9:1) */
  --c-terracota:     #C2592F; /* destaque script/texto · 4.1:1 */
  --c-terracota-soft:#D87856; /* SÓ acentos decorativos não-textuais */

  /* CTA — verde WhatsApp aprofundado para AA em texto grande (#25D366 dava 2.0:1) */
  --c-cta:           #1FA851; /* base · branco 18px/700 = 3.1:1 (large text) */
  --c-cta-hover:     #178C45; /* hover · 4.3:1 */
  --c-tick:          #34B7F1; /* tique-duplo azul WhatsApp (decorativo) */

  /* Superfícies e linhas */
  --c-card:          #FFFFFF;
  --c-divider:       #E8D5D0; /* rosa pálido */

  /* Tipografia */
  --f-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-script:  "Allura", "Brush Script MT", cursive;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala de fonte — floor = tamanho mobile exato, ceiling = desktop exato */
  --fs-h1:      clamp(2.125rem, 4.5vw + 1.2rem, 3.5rem);  /* 34 → 56 (mobile subiu de 32→34, há folga na dobra) */
  --fs-section: clamp(1.75rem, 3.2vw + 1rem,   2.75rem);  /* 28 → 44 */
  --fs-sub:     clamp(1rem,    1vw   + .8rem,  1.25rem);  /* 16 → 20 */
  --fs-lead:    clamp(1rem,    .6vw  + .9rem,  1.125rem); /* 16 → 18 */
  --fs-body:    clamp(1rem,    .3vw  + .95rem, 1.0625rem);/* 16 → 17 */
  --fs-cta:     clamp(1.0625rem,.3vw + 1rem,  1.125rem);  /* 17 → 18 */
  --fs-sm:      .875rem; /* 14px — piso mínimo no mobile */

  /* Espaçamento */
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;   --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;
  --sp-section: clamp(3.75rem, 8vw, 7.5rem); /* 60 → 120 */
  --container:   760px;
  --pad-inline:  clamp(1.25rem, 5vw, 2rem);

  /* Raios */
  --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;

  /* Sombras — halo difuso, nunca dura */
  --shadow-card: 0 12px 32px -14px rgba(122, 46, 63, .22),
                 0 4px 12px -8px rgba(122, 46, 63, .14);
  --shadow-cta:  0 10px 24px -8px rgba(31, 168, 81, .50);
  --shadow-soft: 0 8px 24px -12px rgba(122, 46, 63, .18);

  /* Movimento */
  --t-fast: 160ms cubic-bezier(.4, 0, .2, 1);
  --t-base: 220ms cubic-bezier(.4, 0, .2, 1);
}

/* -------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--c-body);
  background-color: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

ul { list-style: none; padding: 0; }

:focus-visible {
  outline: 3px solid var(--c-terracota);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------------------------------------------------------------
   3. UTILITÁRIOS
   ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  background: var(--c-wine);
  color: #fff;
  padding: .6rem 1.1rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  z-index: 100;
  transition: top var(--t-base);
}
.skip-link:focus { top: 0; }

/* Palavra-chave em script terracota */
.script {
  font-family: var(--f-script);
  font-weight: 400;
  color: var(--c-terracota);
  font-size: 1.35em;
  line-height: .85;
  display: inline-block;
}

.section-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-section);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--c-wine);
  text-align: center;
  margin-bottom: var(--sp-3);
}
.section-title--left { text-align: left; }

/* -------------------------------------------------------------
   4. COMPONENTE — CTA (botão WhatsApp)
   ------------------------------------------------------------- */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;               /* tap target ≥ 48px */
  padding: .75rem 1.75rem;
  background-color: var(--c-cta);
  color: #fff;
  font-size: var(--fs-cta);
  font-weight: 700;               /* texto grande → AA 3:1 */
  line-height: 1;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-cta);
  transition: background-color var(--t-base), transform var(--t-fast), box-shadow var(--t-base);
  will-change: transform;
}
.cta__icon { width: 22px; height: 22px; flex: none; }
.cta:hover {
  background-color: var(--c-cta-hover);
  transform: translateY(-2px) scale(1.025);
  box-shadow: 0 14px 30px -8px rgba(23, 140, 69, .55);
}
.cta:active { transform: translateY(0) scale(.99); }

/* -------------------------------------------------------------
   5. COMPONENTE — BALÃO DE CHAT (reaproveitado: mockup + pilares)
   ------------------------------------------------------------- */
.bubble {
  position: relative;
  background: var(--c-card);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}
.bubble--in {
  border-top-left-radius: 4px;     /* canto do "rabicho" */
}
.bubble--in::before {              /* rabicho triangular à esquerda */
  content: "";
  position: absolute;
  left: -7px;
  top: 0;
  width: 12px;
  height: 14px;
  background: var(--c-card);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.tick { width: 16px; height: 11px; color: var(--c-tick); flex: none; }

/* -------------------------------------------------------------
   6. HERO
   ------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(160deg, var(--c-bg) 0%, var(--c-bg-rose) 100%);
}

/* Fundo focal (mobile: recorte à esquerda — onde está a "casa organizada") */
.hero__bg {
  position: absolute;
  inset: -8px;                     /* sangra para o blur não vazar borda */
  z-index: -2;
  background-image: url("../img/hero-bg.png");
  background-image: -webkit-image-set(url("../img/hero-bg.webp") type("image/webp"), url("../img/hero-bg.png") type("image/png"));
  background-image: image-set(url("../img/hero-bg.webp") type("image/webp"), url("../img/hero-bg.png") type("image/png"));
  background-size: cover;
  background-position: left center;
  filter: blur(3px);
  opacity: .45;
}
/* Wash de legibilidade (auxílio leve, não substitui a imagem) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
              rgba(250, 246, 242, .35) 0%,
              rgba(250, 246, 242, .55) 55%,
              rgba(244, 232, 227, .80) 100%);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-8);
}

.hero__brand {
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  color: var(--c-wine);
  margin-bottom: var(--sp-3);
}

.hero__avatar {
  width: clamp(10.5rem, 12vw + 5rem, 12.5rem); /* 168 → 200 (compactado p/ CTA caber na dobra mobile) */
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #fff;
  box-shadow: var(--shadow-card);
  margin-bottom: var(--sp-4);
}
.hero__avatar img { width: 100%; height: 100%; object-fit: cover; }

.hero__headline {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--c-wine);
  max-width: 16ch;
  margin-bottom: var(--sp-3);
}

.hero__sub {
  font-size: var(--fs-sub);
  color: var(--c-body);
  line-height: 1.45;
  max-width: 32ch;
  margin-bottom: var(--sp-4);
}

.hero .cta { margin-bottom: var(--sp-3); }

.hero__redirect {
  font-size: var(--fs-sm);
  color: var(--c-muted);          /* 4.7:1 — legível, sem opacidade que reprova */
  max-width: 30ch;
}

/* -------------------------------------------------------------
   7. PILARES (cards-balão)
   ------------------------------------------------------------- */
.pillars { padding-block: var(--sp-section); background: var(--c-bg-rose); }

.pillars__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

.pillar { padding: var(--sp-6); }
.pillar__emoji { font-size: 1.9rem; display: block; margin-bottom: var(--sp-2); }
.pillar__title {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--c-wine);
  margin-bottom: var(--sp-2);
}
.pillar__text { color: var(--c-body); font-size: var(--fs-body); }

/* -------------------------------------------------------------
   8. QUEM É VOCÊ
   ------------------------------------------------------------- */
.about { padding-block: var(--sp-section); }
.about__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-6);
}
.about__photo {
  width: 200px; height: 200px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #fff;
  box-shadow: var(--shadow-card);
  flex: none;
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__text p { margin-bottom: var(--sp-3); }
.about__text p:last-child { margin-bottom: 0; }
.about .section-title { margin-bottom: var(--sp-4); }

/* -------------------------------------------------------------
   9. FAQ (accordion)
   ------------------------------------------------------------- */
.faq { padding-block: var(--sp-section); background: var(--c-bg-rose); }

.faq__list {
  background: var(--c-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.faq__item + .faq__item { border-top: 1px solid var(--c-divider); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  min-height: 56px;               /* tap target confortável */
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--c-wine);
}
.faq__chevron {
  width: 11px; height: 11px;
  border-right: 2px solid var(--c-terracota);
  border-bottom: 2px solid var(--c-terracota);
  transform: rotate(45deg);
  transition: transform var(--t-base);
  flex: none;
  margin-top: -4px;
}
.faq__q[aria-expanded="true"] .faq__chevron { transform: rotate(-135deg); margin-top: 2px; }

/* Animação de altura via grid-rows (sem max-height mágico) */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base);
}
.faq__a > p {
  overflow: hidden;
  min-height: 0;
  padding: 0 var(--sp-5);
  color: var(--c-body);
  display: flex;
  gap: .5rem;
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__item.is-open .faq__a > p { padding-top: var(--sp-1); padding-bottom: var(--sp-5); }

.tick--inline { color: var(--c-cta); margin-top: 5px; }

/* -------------------------------------------------------------
   10. CTA FINAL
   ------------------------------------------------------------- */
.final {
  padding-block: var(--sp-section);
  background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-rose) 100%);
}
.final__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.final__avatar {
  width: 110px; height: 110px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: var(--shadow-card);
  margin-bottom: var(--sp-5);
}
.final__avatar img { width: 100%; height: 100%; object-fit: cover; }
.final__headline {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-section);
  line-height: 1.15;
  color: var(--c-wine);
  max-width: 18ch;
  margin-bottom: var(--sp-8);
}

/* -------------------------------------------------------------
   11. FOOTER
   ------------------------------------------------------------- */
.footer {
  padding-block: var(--sp-10);
  border-top: 1px solid var(--c-divider);
  text-align: center;
}
.footer__handle {
  font-weight: 700;
  color: var(--c-wine);
  font-size: 1.0625rem;
  display: inline-block;
  padding: var(--sp-2);
}
.footer__credit { color: var(--c-muted); font-size: var(--fs-sm); margin: var(--sp-2) 0 var(--sp-4); }
.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-6);   /* ≥ 8px entre links clicáveis */
}
.footer__links a {
  color: var(--c-muted);
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: var(--sp-2);            /* área de toque ampliada */
}
.footer__links a:hover { color: var(--c-wine); }

/* -------------------------------------------------------------
   12. ANIMAÇÕES DE ENTRADA (IntersectionObserver adiciona .is-visible)
   ------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Stagger leve dos elementos da hero (todos visíveis no load) */
.hero__inner .reveal:nth-child(2) { transition-delay: .05s; }
.hero__inner .reveal:nth-child(3) { transition-delay: .12s; }
.hero__inner .reveal:nth-child(4) { transition-delay: .19s; }
.hero__inner .reveal:nth-child(5) { transition-delay: .26s; }
.hero__inner .reveal:nth-child(6) { transition-delay: .33s; }

/* -------------------------------------------------------------
   13. RESPONSIVO
   ------------------------------------------------------------- */

/* ≥ 480px — iPhone Pro Max e acima: pilares em 2 colunas, hero respira */
@media (min-width: 480px) {
  .pillars__list { grid-template-columns: 1fr 1fr; }
  .hero__inner { padding-top: var(--sp-6); }
  .stores__label { flex-basis: auto; }  /* tudo em uma linha quando há largura */
}

/* ≥ 768px — tablet: about em 2 colunas, mais ar, fundo posicionado à direita */
@media (min-width: 768px) {
  .hero__bg {
    background-position: right center; /* parede clara vira canvas do texto */
    opacity: .7;
    filter: blur(2px);
  }
  .hero::after {
    background: linear-gradient(105deg,
                rgba(250, 246, 242, .80) 0%,
                rgba(250, 246, 242, .45) 55%,
                rgba(244, 232, 227, .35) 100%);
  }
  .hero__inner { padding-top: var(--sp-8); padding-bottom: var(--sp-10); }
  .hero__avatar { margin-bottom: var(--sp-5); }

  .about__inner {
    flex-direction: row;
    text-align: left;
    gap: var(--sp-12);
    align-items: center;
  }
  .about__photo { width: 220px; height: 220px; }

  .final__avatar { width: 130px; height: 130px; }
}

/* ≥ 1280px — desktop padrão */
@media (min-width: 1280px) {
  :root { --container: 800px; }
  .hero__inner { padding-block: var(--sp-10); }
  .pillars__list { gap: var(--sp-6); }
}

/* -------------------------------------------------------------
   14. PÁGINAS INSTITUCIONAIS (política / termos)
   ------------------------------------------------------------- */
.doc-header {
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--c-divider);
  background: var(--c-bg);
}
.doc-header .container { display: flex; flex-direction: column; gap: var(--sp-2); }
.doc-header__brand {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: .04em;
  color: var(--c-wine);
}
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  width: max-content;
  font-size: var(--fs-sm);
  color: var(--c-muted);
  padding: var(--sp-1) 0;
}
.breadcrumb:hover { color: var(--c-wine); }

.legal { padding-block: var(--sp-12); }
.legal h1 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-section);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--c-wine);
  margin-bottom: var(--sp-3);
}
.legal__updated { color: var(--c-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-8); }
.legal h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--c-wine);
  margin: var(--sp-8) 0 var(--sp-3);
}
.legal p { color: var(--c-body); line-height: 1.6; margin-bottom: var(--sp-3); }
.legal__list { list-style: disc; padding-left: 1.4rem; margin-bottom: var(--sp-4); }
.legal__list li { color: var(--c-body); line-height: 1.6; margin-bottom: var(--sp-2); }
.legal .inline-link {
  color: var(--c-terracota);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Marca os campos que precisam ser preenchidos antes de publicar */
.doc-placeholder {
  background: #FFF1E6;
  color: var(--c-terracota);
  font-weight: 600;
  padding: .05em .4em;
  border-radius: 4px;
}

/* -------------------------------------------------------------
   16. LOJAS PARCEIRAS (faixa de logos Shopee + Mercado Livre)
   ------------------------------------------------------------- */
.stores {
  padding-block: var(--sp-6);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-divider);
}
.stores__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3) var(--sp-5);
}
.stores__label {
  flex-basis: 100%;               /* mobile: label em linha própria, logos abaixo (sem corte) */
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-muted);
  letter-spacing: .02em;
}
.store {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.store__icon { width: 26px; height: 26px; flex: none; }
.store__name {
  font-weight: 800;
  /* ≥18.66px bold = "texto grande" (WCAG): exige só 3:1, então o laranja
     oficial #EE4D2D (3.4:1 sobre o fundo) passa AA sem mudar a cor da marca. */
  font-size: 1.25rem;
  letter-spacing: -.01em;
  line-height: 1;
}
.store__name--shopee { color: #EE4D2D; }
.store__name--ml { color: #2D3277; }

/* -------------------------------------------------------------
   17. ESCASSEZ — barra de progresso slim (dentro da hero)
   ------------------------------------------------------------- */
.hero-progress {
  width: 100%;
  max-width: 30ch;
  margin-bottom: var(--sp-5);
}
.hero-progress__label {
  font-size: var(--fs-sm);
  color: var(--c-body);
  text-align: center;
  margin-bottom: var(--sp-2);
}
.hero-progress__label strong { color: var(--c-wine); font-weight: 700; }
.hero-progress__bar {
  height: 7px;
  border-radius: var(--r-pill);
  background: rgba(122, 46, 63, .14);  /* trilho discreto sobre o fundo da hero */
  overflow: hidden;
}
.hero-progress__fill {
  display: block;
  height: 100%;
  width: 0;                       /* JS controla a largura (sobe devagar) */
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-cta) 0%, #2BC463 100%);
  transition: width 1.4s cubic-bezier(.25, .8, .35, 1);
}

/* -------------------------------------------------------------
   18. TOAST DE PROVA SOCIAL (nomes entrando)
   ------------------------------------------------------------- */
.social-toast {
  position: fixed;
  left: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: min(20rem, calc(100vw - 2rem));
  padding: .6rem .85rem;
  background: var(--c-card);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
  /* Fora de tela por padrão; entra/sai só por transform+opacity (sem reflow) */
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform var(--t-base), opacity var(--t-base), visibility 0s linear var(--t-base);
  will-change: transform, opacity;
}
.social-toast.is-shown {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform var(--t-base), opacity var(--t-base), visibility 0s;
}
.social-toast__avatar {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  background: var(--c-terracota);  /* JS varia o tom por inicial */
}
.social-toast__body { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.social-toast__name { font-weight: 700; font-size: var(--fs-sm); color: var(--c-wine); }
.social-toast__meta { font-size: .75rem; color: var(--c-muted); }
.social-toast__tick { width: 16px; height: 11px; color: var(--c-cta); flex: none; }

/* ≥ 768px — toast um pouco maior e mais afastado no desktop */
@media (min-width: 768px) {
  .social-toast { left: var(--sp-6); bottom: var(--sp-6); }
}

/* -------------------------------------------------------------
   15. ACESSIBILIDADE — movimento reduzido
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .cta:hover { transform: none; }
}