/* Varalzinho — design system (ver DESIGN.md e MARCA.md) */
@font-face { font-family: "Quicksand"; src: url("/fontes/quicksand.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("/fontes/nunito-sans.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  --fundo: #FBF7F9; --superficie: #FFFFFF; --tinta: #3B3240; --suave: #6B6170; --linha: #EDE3E8;
  --rosa: #A0506A; --rosa-escuro: #86405A; --rosa-cha: #F3DCE2;
  --salvia: #466454; --salvia-cha: #DCE8E0; --azul: #3F6585; --azul-cha: #DCE8F3;
  --pessego: #8A5233; --pessego-cha: #FBE6D8;
  --titulo: "Quicksand", ui-rounded, "Nunito", system-ui, sans-serif;
  --texto: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-grande: 20px; --r: 12px; --sombra: 0 10px 30px -18px rgba(90, 50, 70, .35);
  --larg: 1080px; --leitura: 68ch;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 400 17px/1.6 var(--texto); }
@media (min-width: 900px) { body { font-size: 16.5px; } }
img, svg { display: block; }
a { color: var(--rosa); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--rosa-escuro); }
:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); }
h3 { font-size: 1.15rem; font-weight: 650; }
p { margin: 0 0 1rem; }
strong { font-weight: 700; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -999px; top: 8px; background: var(--superficie); padding: .6rem 1rem; border-radius: var(--r); z-index: 10; }
.pular:focus { left: 8px; }
.ic { width: 1.25em; height: 1.25em; flex: none; }
.ic.mini { width: .95em; height: .95em; }

/* ---------- cabeçalho ---------- */
.topo { background: color-mix(in srgb, var(--fundo) 88%, transparent); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--linha); }
.topo-dentro { max-width: var(--larg); margin: 0 auto; padding: .55rem 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marca { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--tinta); }
.marca .simbolo { width: 66px; height: auto; }
.marca span { font: 700 1.3rem/1 var(--titulo); letter-spacing: -.02em; }
.menu summary { list-style: none; cursor: pointer; font: 650 .95rem/1 var(--texto); padding: .7rem .95rem; border: 1px solid var(--linha); border-radius: 999px; background: var(--superficie); min-height: 44px; display: flex; align-items: center; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; right: 1rem; top: calc(100% + 6px); background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r); box-shadow: var(--sombra); padding: .4rem; display: grid; min-width: 240px; }
.menu nav a { padding: .75rem .9rem; border-radius: 8px; text-decoration: none; color: var(--tinta); font-weight: 600; }
.menu nav a:hover { background: var(--fundo); }
.menu nav a[aria-current] { color: var(--rosa); background: var(--rosa-cha); }
.nav-desk { display: none; }
@media (min-width: 960px) {
  .menu { display: none; }
  .nav-desk { display: flex; gap: .1rem; }
  .nav-desk a { padding: .55rem .7rem; font-size: .95rem; font-weight: 600; color: var(--suave); text-decoration: none; border-radius: 999px; }
  .nav-desk a:hover { color: var(--tinta); background: var(--superficie); }
  .nav-desk a[aria-current] { color: var(--rosa-escuro); background: var(--rosa-cha); }
}

main { max-width: var(--larg); margin: 0 auto; padding: 1.5rem 1.1rem 4rem; }
.lead { font-size: 1.1rem; color: var(--suave); max-width: var(--leitura); }
.lead strong { color: var(--tinta); }

/* ---------- hero + cartão do gerador (o elemento de destaque) ---------- */
.hero { display: grid; gap: 1.5rem; align-items: start; margin: .5rem 0 2rem; }
.hero h1 { margin-bottom: .9rem; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.05fr 1fr; gap: 3rem; margin: 2rem 0 2.5rem; } .hero-texto { padding-top: 1.2rem; } }
.cartao-gerador { background: var(--superficie); border-radius: var(--r-grande); box-shadow: var(--sombra); padding: 1.4rem; border: 1px solid var(--linha); position: relative; overflow: hidden; }
.varal-deco { position: absolute; top: -6px; right: -4px; width: 150px; opacity: .95; pointer-events: none; }
.calc .varal-deco { display: none; }
.cartao-gerador h2 { font-size: 1.3rem; margin: .3rem 0 1.1rem; padding-right: 130px; }
.campos { display: grid; gap: .9rem; }
@media (min-width: 560px) { .campos { grid-template-columns: 1fr 1fr; } .campos .modo { grid-column: 1 / -1; } }
.calc .campos { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
label { font-size: .9rem; font-weight: 600; color: var(--suave); }
.campos > label { display: grid; gap: .35rem; }
select, input[type=number] {
  font: 500 1rem/1.2 var(--texto); color: var(--tinta); background: var(--fundo); border: 1px solid var(--linha);
  border-radius: var(--r); padding: .75rem .85rem; min-height: 48px; width: 100%; appearance: none;
}
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6170' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 18px; padding-right: 2.4rem; }
select:hover, input[type=number]:hover { border-color: #DCCBD3; }
.modo { border: 0; padding: 0; margin: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.modo legend { font-size: .9rem; font-weight: 600; color: var(--suave); margin-bottom: .35rem; padding: 0; }
.modo label { position: relative; }
.modo input { position: absolute; opacity: 0; inset: 0; }
.modo span { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--linha); background: var(--fundo); color: var(--tinta); font-weight: 600; cursor: pointer; }
.modo input:checked + span { background: var(--rosa-cha); border-color: var(--rosa-cha); color: var(--rosa-escuro); }
.modo input:focus-visible + span { outline: 3px solid var(--rosa); outline-offset: 2px; }
.resumo { margin: 1.1rem 0 0; display: flex; gap: .6rem; align-items: center; font-size: .97rem; color: var(--suave); }
.selo-clima[hidden] { display: none; }
.selo-clima { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; font-weight: 700; font-size: .85rem; white-space: nowrap; }
.selo-clima.frio { background: var(--azul-cha); color: var(--azul); }
.selo-clima.quente { background: var(--pessego-cha); color: var(--pessego); }

/* ---------- barra de ações ---------- */
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; margin: 0 0 1.5rem; }
.botao { display: inline-flex; align-items: center; gap: .5rem; font: 700 1rem/1 var(--texto); background: var(--rosa); color: #fff; border: 1px solid var(--rosa); border-radius: 999px; padding: .8rem 1.25rem; min-height: 48px; cursor: pointer; transition: background .15s ease-out; }
.botao:hover { background: var(--rosa-escuro); border-color: var(--rosa-escuro); }
.botao.secundario { background: var(--superficie); color: var(--rosa); border-color: #E6CBD4; }
.botao.secundario:hover { background: var(--rosa-cha); }
.progresso { display: flex; align-items: center; gap: .6rem; color: var(--suave); font-size: .92rem; flex: 1 1 220px; }
.progresso .trilho { flex: 0 1 160px; height: 8px; border-radius: 999px; background: var(--linha); overflow: hidden; }
.progresso .trilho span { display: block; height: 100%; width: 0; background: var(--salvia); border-radius: inherit; transition: width .2s ease-out; }

/* ---------- lista de itens ---------- */
.lista { display: grid; gap: 1.1rem; }
@media (min-width: 1100px) { .lista.duas { grid-template-columns: 1fr 1fr; align-items: start; } }
.categoria { background: var(--superficie); border-radius: var(--r); border: 1px solid var(--linha); padding: 1.1rem 1.1rem .4rem; }
.cat-topo { display: flex; align-items: center; gap: .7rem; margin-bottom: .3rem; }
.cat-titulo { font-size: 1.15rem; font-weight: 650; }
.cat-icone { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--rosa-cha); color: var(--rosa-escuro); flex: none; }
.cat-icone .ic { width: 22px; height: 22px; }
.cat-higiene, .cat-documentos { background: var(--azul-cha); color: var(--azul); }
.cat-sono, .cat-acompanhante { background: #E6E1F2; color: #5A4E84; }
.cat-passeio, .cat-mae { background: var(--salvia-cha); color: var(--salvia); }
.cat-alimentacao, .cat-presentes { background: var(--pessego-cha); color: var(--pessego); }
.dica { font-size: .93rem; color: var(--suave); margin: .2rem 0 .6rem; max-width: var(--leitura); }
.itens { list-style: none; margin: 0; padding: 0; }
.item { display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--linha); }
.item[hidden] { display: none; }
.marcar { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; color: var(--tinta); font-size: 1rem; font-weight: 500; min-height: 32px; }
.marcar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.caixa { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #D8C6CF; flex: none; display: grid; place-items: center; background: var(--superficie); transition: background .15s ease-out, border-color .15s ease-out; margin-top: -1px; }
.caixa::after { content: ""; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.marcar input:checked + .caixa { background: var(--salvia); border-color: var(--salvia); }
.marcar input:checked + .caixa::after { opacity: 1; }
.marcar input:focus-visible + .caixa { outline: 3px solid var(--rosa); outline-offset: 2px; }
.marcar input:checked ~ .nome { color: var(--suave); text-decoration: line-through; text-decoration-color: #CDBFC6; }
.nome small { display: block; font-size: .84rem; color: var(--suave); font-weight: 400; margin-top: .1rem; }
.qtd { display: inline-flex; gap: .3rem; justify-self: end; }
.qtd > b, .clima { display: inline-flex; align-items: center; gap: .25rem; min-width: 2.4rem; justify-content: center; padding: .25rem .6rem; border-radius: 999px; background: var(--fundo); font-weight: 700; font-size: .95rem; }
.clima.calor { background: var(--pessego-cha); color: var(--pessego); }
.clima.frio { background: var(--azul-cha); color: var(--azul); }
.compra { grid-column: 1; padding-left: calc(26px + .75rem); }
.compra:empty { display: none; }
.amz { font-size: .85rem; font-weight: 600; color: var(--rosa); }
@media (min-width: 600px) {
  .item { grid-template-columns: 1fr auto auto; }
  .compra { grid-column: auto; padding-left: 0; min-width: 7.5rem; text-align: right; }
}

/* ---------- blocos de conteúdo ---------- */
.cabecalho { margin: 1rem 0 2rem; max-width: 760px; }
.cab-icone { width: 52px; height: 52px; border-radius: 16px; background: var(--rosa-cha); color: var(--rosa-escuro); display: grid; place-items: center; margin-bottom: 1rem; }
.cab-icone .ic { width: 28px; height: 28px; }
.cabecalho h1 { margin-bottom: .8rem; }
.bloco { margin-top: 3rem; max-width: 760px; }
.bloco h2 { margin: 2.2rem 0 .8rem; }
.bloco h2:first-child { margin-top: 0; }
.dicas { padding-left: 1.2rem; max-width: var(--leitura); }
.dicas li { margin: .45rem 0; }
.dicas li::marker { color: var(--rosa); }
.link-forte { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; }
.fonte { color: var(--suave); font-size: .88rem; margin-top: 1.5rem; max-width: var(--leitura); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips .amz { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; border-radius: 999px; background: var(--superficie); border: 1px solid #E6CBD4; text-decoration: none; }
.chips .amz:hover { background: var(--rosa-cha); }

details { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r); margin: .6rem 0; }
summary { cursor: pointer; font-weight: 700; padding: 1rem 1.1rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; list-style: none; min-height: 48px; }
summary::-webkit-details-marker { display: none; }
summary .seta { color: var(--rosa); transition: transform .2s ease-out; }
details[open] summary .seta { transform: rotate(90deg); }
details p { padding: 0 1.1rem 1rem; margin: 0; color: var(--suave); max-width: var(--leitura); }
.perguntas { max-width: 760px; }

.relacionados ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
@media (min-width: 640px) { .relacionados ul { grid-template-columns: 1fr 1fr; } }
.relacionados a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .95rem 1.1rem; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r); text-decoration: none; color: var(--tinta); font-weight: 650; min-height: 52px; }
.relacionados a:hover { border-color: #E6CBD4; color: var(--rosa); }
.relacionados .seta { color: var(--rosa); }

/* ---------- calculadora e barras ---------- */
.calc { display: grid; gap: 1.2rem; align-items: start; }
@media (min-width: 900px) { .calc { grid-template-columns: 1fr 1fr; } }
.resultado { background: var(--superficie); border-radius: var(--r-grande); border: 1px solid var(--linha); padding: 1.4rem; box-shadow: var(--sombra); }
.resultado.estatico { box-shadow: none; border-radius: var(--r); }
.resultado .grande { font: 700 clamp(2.4rem, 1.8rem + 2vw, 3.2rem)/1 var(--titulo); color: var(--rosa); margin: 0 0 .3rem; }
.resultado .sub { color: var(--suave); margin-bottom: 1.1rem; }
.barras { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .65rem; }
.barras li { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .7rem; align-items: center; }
.barras .tam { font-weight: 800; font-family: var(--titulo); }
.barras .trilho { height: 14px; background: var(--fundo); border-radius: 999px; overflow: hidden; }
.barras .trilho span { display: block; height: 100%; background: var(--rosa-cha); border-right: 3px solid var(--rosa); border-radius: inherit; }
.barras .val { font-weight: 700; min-width: 5.5rem; text-align: right; font-size: .95rem; }
.barras .val small { display: block; color: var(--suave); font-weight: 500; font-size: .8rem; }
.tabela { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--r); background: var(--superficie); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: .65rem .9rem; border-bottom: 1px solid var(--linha); }
tbody tr:last-child td { border-bottom: 0; }
th { font-size: .85rem; color: var(--suave); font-weight: 700; background: var(--fundo); }
.num { text-align: right; }

/* ---------- rodapé ---------- */
.rodape { background: var(--superficie); border-top: 1px solid var(--linha); margin-top: 2rem; }
.rodape-dentro { max-width: var(--larg); margin: 0 auto; padding: 2.2rem 1.1rem 2.6rem; display: grid; gap: 1.2rem; color: var(--suave); font-size: .92rem; }
.rodape-marca { font: 700 1.3rem/1 var(--titulo); color: var(--tinta); margin-bottom: .4rem; }
.rodape-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.rodape-links a { color: var(--suave); }
.aviso { font-size: .85rem; max-width: 80ch; margin: 0; }
@media (min-width: 900px) { .rodape-dentro { grid-template-columns: 1fr 2fr; } .aviso { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

@media print {
  .topo, .cartao-gerador, .acoes, .rodape, .compra, .perguntas, .relacionados, .fonte, .pular { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  main { padding: 0; }
  .hero { display: block; margin: 0 0 1rem; }
  .lead { display: none; }
  .lista { display: block; }
  .categoria { border: 0; padding: 0; margin-bottom: 1rem; break-inside: avoid; }
  .item { padding: .3rem 0; }
}