/* Dormê: visual próprio por cima do loja.css (cores, fontes, botões e as seções novas) */
:root {
  --noite: #1e3a32;
  --noite-2: #2b5045;
  --noite-3: #3d6b5c;
  --lavanda: #ffd76a;
  --lavanda-clara: #fff4d6;
  --areia: #fbf6ee;
  --areia-2: #f3ead9;
  --texto: #1c211e;
  --suave: #5f665f;
  --borda: #e8e2d6;
  --coral: #ef5b3c;
  --coral-2: #d9472a;
  --raio: 18px;
  --sombra: 0 24px 60px rgba(30, 58, 50, .14);
  --sombra-leve: 0 8px 24px rgba(30, 58, 50, .08);
  --serif: "Bricolage Grotesque", "Segoe UI", Arial, sans-serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body { background: #fffdf9; }

/* Títulos: sem itálico, destaque com marca-texto amarelo */
.titulo h2, .info h1, .garantia h2, .final h2, .virada h3, .bloco h3 { font-family: var(--serif); font-weight: 800; letter-spacing: -1.2px; }
.titulo h2 em, .info h1 em, .garantia h2 em, .final h2 em, .virada h3 em {
  font-style: normal; color: inherit;
  background: linear-gradient(transparent 58%, var(--lavanda) 58%, var(--lavanda) 92%, transparent 92%);
  padding: 0 4px;
}
.escuro .titulo h2 em, .final h2 em { background: none; color: var(--lavanda); padding: 0; }
.olho { color: var(--coral); letter-spacing: 2px; }
.escuro .olho { color: var(--lavanda); }

/* Faixa de aviso */
.aviso-topo { background: var(--noite); color: #fff; font-size: 13px; font-weight: 700; display: flex; justify-content: center; gap: 14px; padding: 9px 16px; letter-spacing: .3px; }
.aviso-topo span:first-child::before { content: "✓ "; color: var(--lavanda); }

/* Cabeçalho e logo */
.cabecalho { background: #fffdf9; }
.logo span { font-family: var(--serif); font-weight: 800; letter-spacing: -1.4px; }
.menu a { letter-spacing: .4px; text-transform: none; font-size: 15px; font-weight: 700; }

/* Botões: coral, cantos menos redondos, com seta animada */
.btn { background: var(--coral); border-radius: 14px; text-transform: none; letter-spacing: 0; font-size: 17px; box-shadow: 0 12px 26px rgba(239, 91, 60, .32); }
.btn:hover { background: var(--coral-2); box-shadow: 0 16px 32px rgba(239, 91, 60, .38); }
.btn svg { transition: transform .25s; }
.btn:hover svg { transform: translateX(4px); }
#ctaComprar { animation: pulsar 2.4s ease-in-out infinite; }
@keyframes pulsar { 0%, 100% { box-shadow: 0 12px 26px rgba(239, 91, 60, .32), 0 0 0 0 rgba(239, 91, 60, .45); } 50% { box-shadow: 0 12px 26px rgba(239, 91, 60, .32), 0 0 0 12px rgba(239, 91, 60, 0); } }
.btn-claro { background: var(--lavanda); color: var(--noite); }
.btn-claro:hover { background: #ffe08c; }
.btn-sec { background: #fff; color: var(--noite); box-shadow: none; }
.btn-sec:hover { background: var(--areia); }

/* Produto */
.produto-sec { background: linear-gradient(180deg, var(--areia) 0, #fffdf9 70%); }
.principal { border-radius: 22px; overflow: hidden; }
.etiqueta-modelo { display: inline-block; background: var(--lavanda-clara); color: var(--noite); border: 1px solid var(--lavanda); font-size: 12.5px; font-weight: 800; padding: 5px 12px; border-radius: 999px; margin-bottom: 10px; }
.chips-pos { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 6px; }
.chips-pos span { font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 10px; background: #fff; border: 1.5px solid var(--borda); }
.chips-pos span::before { content: "✓ "; color: var(--verde); }
.variante { border-radius: 14px; }
.variante:has(input:checked) { border-color: var(--coral); background: #fff6f3; box-shadow: 0 0 0 1px var(--coral); }
.variante:has(input:checked) .radio { border-color: var(--coral); }
.variante:has(input:checked) .radio::after { background: var(--coral); }
.variante .selo { background: var(--noite); color: #fff; }
.pix-linha { text-align: center; font-size: 14px; color: var(--suave); margin-top: 10px; }
.pix-linha b { color: var(--verde); }

/* Faixa que corre */
.faixa-corre { background: var(--coral); color: #fff; overflow: hidden; padding: 13px 0; }
.faixa-trilho { display: flex; width: max-content; animation: correr 60s linear infinite; }
.faixa-trilho span { font-family: var(--serif); font-weight: 800; font-size: 17px; white-space: nowrap; padding: 0 22px; }
.faixa-trilho span::after { content: "✦"; margin-left: 44px; color: var(--lavanda); }
@keyframes correr { to { transform: translateX(-50%); } }

/* Dores e virada */
.dor { border-radius: var(--raio); background: #fff; border: 1.5px solid var(--borda); }
.dor .n { color: var(--coral); font-family: var(--serif); font-weight: 800; }
.virada { background: var(--noite); color: #fff; border-radius: 22px; }
.virada p { color: rgba(255, 255, 255, .82); }
.virada h3 em { background: none; color: var(--lavanda); padding: 0; }
.virada .lua { color: var(--lavanda); }

/* Casal */
.casal { padding: 90px 0; }
.casal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.casal-foto img { border-radius: 24px; box-shadow: var(--sombra); transform: rotate(-2deg); }
.casal .alturas { margin: 6px 0 24px; }
.casal-obs { font-size: 14px; color: var(--suave); margin-top: 12px; }

/* Original x cópia */
.orig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 920px; margin: 0 auto; }
.orig-card { border-radius: 22px; padding: 28px 26px; }
.orig-card ul { list-style: none; display: grid; gap: 12px; margin-top: 16px; }
.orig-card li { padding-left: 32px; position: relative; font-weight: 600; line-height: 1.45; }
.orig-card li::before { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 900; }
.orig-tag { display: inline-block; font-family: var(--serif); font-weight: 800; font-size: 20px; }
.orig-bom { background: #fff; color: var(--texto); box-shadow: 0 0 0 3px var(--lavanda), var(--sombra); }
.orig-bom li::before { content: "✓"; background: var(--verde); color: #fff; }
.orig-ruim { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .78); border: 1.5px dashed rgba(255, 255, 255, .25); }
.orig-ruim .orig-tag { color: #fff; }
.orig-ruim li::before { content: "✕"; background: rgba(255, 255, 255, .14); color: #ff9c86; }
.teste-dedo { display: grid; grid-template-columns: 140px 1fr; gap: 22px; align-items: center; max-width: 920px; margin: 26px auto 0; background: rgba(255, 255, 255, .07); border-radius: 22px; padding: 18px; }
.teste-dedo img { border-radius: 14px; aspect-ratio: 1; object-fit: cover; }
.teste-dedo h3 { font-family: var(--serif); font-weight: 800; font-size: 22px; color: var(--lavanda); margin-bottom: 4px; }
.teste-dedo p { color: rgba(255, 255, 255, .85); }

/* Como funciona em cards */
.cards-func { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.card-func { background: #fff; border: 1.5px solid var(--borda); border-radius: 22px; padding: 16px 16px 24px; transition: transform .3s, box-shadow .3s; }
.card-func:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.card-func img { border-radius: 14px; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; margin-bottom: 16px; }
.card-func .olho, .card-func h3, .card-func p, .card-func .checks { padding: 0 8px; }
.card-func h3 { font-family: var(--serif); font-weight: 800; font-size: 22px; letter-spacing: -.6px; line-height: 1.2; margin: 6px 0 8px; }
.card-func p { color: var(--suave); }
.card-func .checks { margin-top: 12px; }

/* Comparativo */
.comparativo th.nosso, .comparativo td.nosso { background: var(--lavanda-clara); }
.comparativo th.nosso { background: var(--noite); color: #fff; }

/* Posições lado a lado */
.posicoes-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.posicoes-3 .pos { background: var(--areia); border-radius: 20px; padding: 22px; }
.posicoes-3 .pos .n { font-family: var(--serif); font-weight: 800; color: #fff; background: var(--coral); width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-style: normal; }

/* Garantia, avaliações, rodapé */
.garantia { border-radius: 24px; border: 2px solid var(--lavanda); background: var(--lavanda-clara); }
.selo-g { background: var(--noite); }
.dep { border-radius: 18px; }
.final { background: var(--noite); }
.rodape { background: #16291f; }

@media (max-width: 860px) {
  .so-desk { display: none; }
  .casal { padding: 60px 0; }
  .casal-grid, .orig-grid, .cards-func, .posicoes-3 { grid-template-columns: 1fr; }
  .casal-grid { gap: 30px; }
  .casal .btn { width: 100%; }
  .teste-dedo { grid-template-columns: 96px 1fr; gap: 14px; }
  .teste-dedo h3 { font-size: 19px; }
  .teste-dedo p { font-size: 14.5px; }
  .faixa-trilho span { font-size: 15px; padding: 0 16px; }
  .faixa-trilho span::after { margin-left: 32px; }
}