/* ============================================================
   Calculadora de Enxoval Dutete - estilo
   Paleta e fontes da marca. Mobile-first.
   ============================================================ */

:root{
  --taupe:#6f5f50;
  --taupe-dark:#4a3d32;
  --taupe-light:#9a8a7a;
  --creme:#f6efe5;
  --bg:#fffefa;
  --oliva:#7d8a52;
  --oliva-bg:#eef0e3;
  --rosa:#f2eeef;
  --white:#fafaf8;
  --linha:#e3d9cb;
  --ink:#3a3128;        /* corpo (alto contraste no creme) */
  --muted:#6c5f51;      /* apoio (>=4.5:1 no creme) */

  --r:14px;
  --maxw:620px;
  --ease:cubic-bezier(.22,1,.36,1);   /* ease-out-quint */

  --z-atmos:0; --z-base:1; --z-topo:10;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"DM Sans",system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  min-height:100dvh;
  overflow-x:hidden;
  position:relative;
}

/* ---- atmosfera (fundo com profundidade, nao cor chapada) ---- */
.atmosphere{position:fixed;inset:0;z-index:var(--z-atmos);pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5}
.blob.b1{width:46vmax;height:46vmax;left:-14vmax;top:-12vmax;
  background:radial-gradient(circle,rgba(154,138,122,.45),transparent 70%);animation:drift1 34s var(--ease) infinite alternate}
.blob.b2{width:40vmax;height:40vmax;right:-16vmax;top:18vmax;
  background:radial-gradient(circle,rgba(242,238,239,.9),transparent 70%);animation:drift2 40s var(--ease) infinite alternate}
.blob.b3{width:34vmax;height:34vmax;left:8vmax;bottom:-16vmax;
  background:radial-gradient(circle,rgba(111,95,80,.18),transparent 70%);animation:drift1 46s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate(6vmax,5vmax) scale(1.08)}}
@keyframes drift2{to{transform:translate(-5vmax,4vmax) scale(1.05)}}

/* ---- layout ---- */
.wrap{
  position:relative;z-index:var(--z-base);
  max-width:var(--maxw);margin:0 auto;
  min-height:100dvh;
  padding:24px 22px 40px;
  display:flex;flex-direction:column;
}

/* ---- topo ---- */
.topo{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.logo{height:34px;width:auto;display:block}
.progresso{flex:1;max-width:230px}
.passo-label{font-size:12px;color:var(--muted);text-align:right;margin-bottom:6px;letter-spacing:.02em}
.barra{height:4px;background:var(--linha);border-radius:99px;overflow:hidden}
.barra span{display:block;height:100%;width:0;background:var(--taupe);border-radius:99px;transition:width .5s var(--ease)}

/* ---- telas (passos) ---- */
.tela{
  flex:1;display:none;flex-direction:column;justify-content:center;
  padding:18px 0;
}
.tela.ativa{display:flex;animation:entra .5s var(--ease) both}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---- tipografia das telas ---- */
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe-light);margin-bottom:18px}
.display{
  font-family:"Fraunces",serif;font-weight:400;
  font-size:clamp(2.3rem,8vw,3.4rem);line-height:1.04;letter-spacing:-.02em;
  color:var(--taupe-dark);text-wrap:balance;
}
.display em{font-style:italic;font-weight:300;color:var(--taupe)}
.lead{font-size:1.05rem;color:var(--muted);margin-top:18px;max-width:34ch}
.microcopy{font-size:13px;color:var(--taupe-light);margin-top:14px}

.pergunta-num{font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe-light);margin-bottom:14px}
.pergunta{font-family:"Fraunces",serif;font-weight:400;font-size:clamp(1.7rem,5.4vw,2.3rem);line-height:1.12;letter-spacing:-.015em;color:var(--taupe-dark);text-wrap:balance}
.apoio{font-size:1rem;color:var(--muted);margin-top:12px;max-width:42ch}

/* ---- campos ---- */
.campo{margin-top:24px}
.campo label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:8px;letter-spacing:.01em}
.select,.input{
  width:100%;font-family:inherit;font-size:1.05rem;color:var(--ink);
  background:var(--white);border:1.5px solid var(--linha);border-radius:var(--r);
  padding:15px 16px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.select:focus,.input:focus{outline:none;border-color:var(--taupe);box-shadow:0 0 0 3px rgba(111,95,80,.12)}
/* date nao pode estourar a margem (native control tem min-width proprio) */
.campo{max-width:100%}
input[type="date"]{width:100%;min-width:0;max-width:100%;min-height:54px;line-height:1.4;-webkit-appearance:none;appearance:none}
/* iOS: data vazia nao colapsa a altura (fica igual com ou sem valor) */
input[type="date"]::-webkit-date-and-time-value{text-align:left;min-height:1.4em}

/* termos (politica de privacidade na abertura) */
.termos{font-size:12px;color:var(--taupe-light);margin-top:16px;max-width:38ch;line-height:1.5}
.termos a{color:var(--taupe);text-decoration:underline}

/* loading mais leve: pausa os blobs enquanto monta */
body.busy .blob{animation-play-state:paused}

/* ---- opcoes ---- */
.opcoes{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.opcao{
  font-family:inherit;text-align:left;cursor:pointer;
  background:var(--white);border:1.5px solid var(--linha);border-radius:var(--r);
  padding:16px 18px;font-size:1.05rem;color:var(--ink);
  display:flex;flex-direction:column;gap:3px;
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .12s var(--ease);
}
.opcao:hover{border-color:var(--taupe-light)}
.opcao:active{transform:scale(.99)}
.opcao strong{font-weight:600}
.opcao span{font-size:.9rem;color:var(--muted)}
.opcao em{font-style:italic;color:var(--taupe)}
.opcao.sel{border-color:var(--oliva);background:var(--oliva-bg);box-shadow:0 0 0 3px rgba(125,138,82,.16)}
.opcao.sel span{color:var(--taupe-dark)}

/* ---- botoes ---- */
.btn{font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;border:none;border-radius:99px;padding:15px 30px;transition:transform .12s var(--ease),background .2s var(--ease),opacity .2s}
.btn:active{transform:scale(.97)}
.btn.primario{background:var(--taupe);color:var(--creme)}
.btn.primario:hover{background:var(--taupe-dark)}
.btn.primario[disabled]{opacity:.4;cursor:not-allowed}
.btn.texto{background:transparent;color:var(--muted);padding:15px 10px}
.btn.texto:hover{color:var(--taupe-dark)}
.tela[data-tela="intro"] .btn.primario{align-self:flex-start;margin-top:30px}
.navrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:34px}
.navrow .btn.primario{flex:0 0 auto}

/* ============================================================
   RESULTADO
   ============================================================ */
.tela-resultado{justify-content:flex-start}
.res-hero{padding:14px 0 6px}
.res-eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe-light);margin-bottom:12px}
.res-titulo{font-family:"Fraunces",serif;font-weight:400;font-size:clamp(1.9rem,6vw,2.6rem);line-height:1.08;letter-spacing:-.02em;color:var(--taupe-dark);text-wrap:balance}
.res-titulo em{font-style:italic;color:var(--taupe)}
.res-resumo{font-size:1rem;color:var(--muted);margin-top:14px}
.res-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tag{font-size:13px;color:var(--taupe-dark);background:var(--rosa);border:1px solid var(--linha);border-radius:99px;padding:6px 13px}

.bloco{margin-top:34px}
.bloco-tit{font-family:"Fraunces",serif;font-size:1.4rem;color:var(--taupe-dark);font-weight:500;letter-spacing:-.01em;display:flex;align-items:baseline;gap:10px}
.bloco-tit .cont{font-size:.85rem;color:var(--taupe-light);font-family:"DM Sans",sans-serif}
.bloco-sub{font-size:.92rem;color:var(--muted);margin-top:4px}

/* roupas (linha Dutete = clicavel) */
.roupas{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.roupa{display:flex;align-items:center;gap:14px;background:var(--white);border:1.5px solid var(--linha);border-radius:var(--r);padding:14px 16px}
.roupa .qtd{font-family:"Fraunces",serif;font-size:1.5rem;color:var(--taupe);min-width:42px;text-align:center}
.roupa .desc{flex:1}
.roupa .desc b{font-weight:600;color:var(--ink)}
.roupa .desc small{display:block;color:var(--muted);font-size:.85rem;margin-top:2px}
.roupa .selo{font-size:12px;font-weight:600;color:var(--taupe);background:var(--rosa);border-radius:99px;padding:5px 11px;white-space:nowrap;text-decoration:none;border:1px solid var(--linha)}
.roupa .selo:hover{background:var(--creme)}

/* checklist categorias */
.cat{margin-top:22px}
.cat h4{font-family:"DM Sans",sans-serif;font-size:1.02rem;font-weight:600;color:var(--taupe-dark);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--linha)}
.cat ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.cat li{display:flex;gap:10px;align-items:flex-start;font-size:.97rem;color:var(--ink)}
.cat li .mark{color:var(--taupe);flex:0 0 auto;margin-top:.18em}
.cat li .q{font-weight:600;color:var(--taupe)}
.cat li small{display:block;color:var(--muted);font-size:.84rem}
.cat li a.timo{color:var(--oliva);font-size:.82rem;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(125,138,82,.4);white-space:nowrap}
.cat li a.timo:hover{border-bottom-color:var(--oliva)}

/* fases */
.fase{margin-top:26px;background:var(--white);border:1.5px solid var(--linha);border-radius:18px;padding:18px 18px 6px}
.fase-tit{font-family:"Fraunces",serif;font-size:1.2rem;color:var(--taupe-dark);font-weight:500}
.fase-num{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe-light)}

/* box evite */
.evite{margin-top:30px;background:var(--rosa);border:1.5px solid var(--linha);border-radius:18px;padding:20px}
.evite h4{font-family:"Fraunces",serif;font-size:1.2rem;color:var(--taupe-dark);font-weight:500;margin-bottom:6px}
.evite p.intro{font-size:.92rem;color:var(--muted);margin-bottom:12px}
.evite ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.evite li{font-size:.94rem;color:var(--ink)}
.evite li b{color:var(--taupe-dark)}
.evite li small{display:block;color:var(--muted);font-size:.84rem}

/* oferta */
.oferta{margin-top:34px;background:var(--taupe-dark);color:var(--creme);border-radius:20px;padding:28px 24px;text-align:center}
.oferta h3{font-family:"Fraunces",serif;font-weight:400;font-size:1.7rem;line-height:1.12;margin-bottom:10px}
.oferta h3 em{font-style:italic;color:#e6d8c4}
.oferta p{font-size:.98rem;color:#e8ddca;max-width:38ch;margin:0 auto 8px}
.oferta .cupom{display:inline-block;margin-top:14px;font-family:"DM Sans";font-weight:600;letter-spacing:.16em;font-size:1.1rem;background:var(--creme);color:var(--taupe-dark);border-radius:10px;padding:12px 22px}
.oferta .cta-btn{display:inline-block;margin-top:16px;background:#e6d8c4;color:var(--taupe-dark);text-decoration:none;font-weight:600;border-radius:12px;padding:14px 28px;font-size:1rem}
.oferta .cta-btn:hover{background:#fff}
.oferta .grupo-txt{font-size:.9rem;color:#e8ddca;max-width:34ch;margin:16px auto 0}
.oferta .grupo-box{margin-top:20px;padding-top:20px;border-top:1px solid rgba(230,216,196,.22)}
.oferta .grupo-intro{font-size:.98rem;color:#f2e9d8;max-width:40ch;margin:0 auto 14px}
.oferta .grupo-benef{list-style:none;padding:0;margin:0 auto 4px;max-width:34ch;text-align:left;display:inline-block}
.oferta .grupo-benef li{position:relative;padding:6px 0 6px 26px;font-size:.94rem;color:#e8ddca;line-height:1.4}
.oferta .grupo-benef li::before{content:"";position:absolute;left:4px;top:12px;width:7px;height:7px;
  border-radius:50%;background:#e6d8c4}
.oferta .grupo-drop{font-size:.88rem;color:#d8c9b2;margin:14px auto 0}
.oferta .grupo-drop b{color:#f2e9d8;font-weight:600}
.wpp-btn{display:inline-flex;align-items:center;gap:10px;margin-top:14px;background:#25D366;color:#0b1a10;text-decoration:none;font-weight:700;font-family:"DM Sans";border-radius:100px;padding:14px 26px;font-size:.98rem;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.wpp-btn:hover{background:#1ebc59}
.wpp-btn svg{flex-shrink:0}

/* captura */
.captura{margin-top:18px;background:var(--white);border:1.5px solid var(--linha);border-radius:20px;padding:24px}
.captura h4{font-family:"Fraunces",serif;font-weight:500;font-size:1.3rem;color:var(--taupe-dark)}
.captura p.cap-sub{font-size:.92rem;color:var(--muted);margin:6px 0 18px}
.captura .campo{margin-top:14px}
.captura .btn.primario{width:100%;margin-top:20px}
.cap-nota{font-size:12px;color:var(--taupe-light);text-align:center;margin-top:12px;line-height:1.5}
.cap-erro{color:#9a4a3a;font-size:.88rem;margin-top:10px;display:none}
.cap-ok{display:none;text-align:center;padding:10px 0}
.cap-ok .check{font-size:2.4rem}
.cap-ok p{color:var(--taupe-dark);font-size:1rem;margin-top:6px}
.cap-ok .ok-tit{font-family:"Fraunces",serif;font-size:1.35rem;color:var(--taupe-dark);margin-top:8px}
.cap-ok .spam{font-size:.9rem;color:var(--muted);margin-top:14px;background:var(--oliva-bg);border:1px solid var(--linha);border-radius:12px;padding:12px 14px}
.cap-ok .cupom-guard{font-size:.92rem;color:var(--taupe-dark);margin-top:12px}
.cap-ok .cupom-guard b{letter-spacing:.08em}

.rodape{margin-top:40px;text-align:center;font-size:13px;color:var(--taupe-light)}
.refazer{margin-top:14px;text-align:center}

/* loading */
.calc-load{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:50dvh;text-align:center}
.spin{width:34px;height:34px;border:3px solid var(--linha);border-top-color:var(--taupe);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.calc-load p{font-family:"Fraunces",serif;font-style:italic;color:var(--muted);font-size:1.1rem}

@media (min-width:560px){
  .wrap{padding:30px 28px 50px}
  .roupa .selo{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .blob{animation:none}
}