/* Casa Deck IPTV — folha própria (2026). Tema claro creme + marinho + coral, com modo escuro automático. */
:root{
  --fundo:#fff9f3; --papel:#ffffff; --areia:#f6ece1; --tinta:#13233f; --texto:#2d3a52; --suave:#5d6880;
  --coral:#ff6b57; --coral-forte:#e8503c; --coral-claro:#ffe3dd; --menta:#16a07a; --linha:#eadfd2;
  --sombra:0 1px 2px rgb(19 35 63/.06),0 8px 24px -12px rgb(19 35 63/.18);
  --raio:18px; --largura:1160px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --fundo:#0e1729; --papel:#15213a; --areia:#1b2946; --tinta:#f4f1ec; --texto:#d5dae5; --suave:#9aa5bb;
    --coral:#ff7d6b; --coral-forte:#ff6b57; --coral-claro:#3a2430; --menta:#34d399; --linha:#26365a;
    --sombra:0 1px 2px rgb(0 0 0/.3),0 10px 30px -14px rgb(0 0 0/.6);
  }
}
@view-transition{navigation:auto}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--fundo);color:var(--texto);font:400 1.0625rem/1.7 "Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--coral-forte);text-underline-offset:3px}
@media (prefers-color-scheme:dark){a{color:var(--coral)}}
h1,h2,h3,h4{color:var(--tinta);line-height:1.18;font-weight:700;letter-spacing:-.015em;text-wrap:balance;margin:0 0 .6em}
h1{font-size:clamp(2.1rem,1.4rem + 3vw,3.5rem);letter-spacing:-.03em}
h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem)}
h3{font-size:1.22rem}
p{margin:0 0 1.1em;text-wrap:pretty}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:6px}
.pular{position:absolute;left:-9999px}.pular:focus{left:12px;top:12px;z-index:99;background:var(--papel);padding:10px 14px}
.casca{width:min(100% - 32px,var(--largura));margin-inline:auto}

/* topo */
.topo{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--fundo) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--linha)}
.topo .casca{display:flex;align-items:center;gap:18px;min-height:70px}
.marca{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;color:var(--tinta);text-decoration:none;letter-spacing:-.02em;margin-right:auto}
.marca img{width:36px;height:36px}
.marca b{color:var(--coral)}
.menu{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.menu a{display:block;padding:8px 12px;border-radius:10px;color:var(--texto);text-decoration:none;font-weight:500;font-size:.97rem}
.menu a:hover,.menu a[aria-current=page]{background:var(--areia);color:var(--tinta)}
.gaveta{display:none}
@media (max-width:980px){
  .menu{display:none}
  .gaveta{display:block;position:relative}
  .gaveta summary{list-style:none;cursor:pointer;padding:9px 12px;border:1px solid var(--linha);border-radius:12px;font-weight:600;color:var(--tinta)}
  .gaveta summary::-webkit-details-marker{display:none}
  .gaveta[open] .menu{display:grid;position:absolute;right:0;top:calc(100% + 10px);background:var(--papel);border:1px solid var(--linha);border-radius:16px;padding:8px;min-width:250px;box-shadow:var(--sombra)}
  .topo .botao{display:none}
}

/* botões */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:999px;font-weight:700;text-decoration:none;background:var(--coral);color:#fff;border:0;cursor:pointer;transition:transform .15s,background .15s;box-shadow:0 6px 18px -8px var(--coral)}
.botao:hover{background:var(--coral-forte);transform:translateY(-1px)}
.botao.fantasma{background:transparent;color:var(--tinta);border:1.5px solid var(--linha);box-shadow:none}
.botao.fantasma:hover{border-color:var(--coral);background:transparent}
a.botao{color:#fff}a.botao.fantasma{color:var(--tinta)}

/* capa (hero) */
.capa{padding:clamp(40px,6vw,84px) 0 clamp(36px,5vw,64px)}
.capa .casca{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:900px){.capa .casca{grid-template-columns:1fr}}
.selo{display:inline-flex;align-items:center;gap:8px;background:var(--coral-claro);color:var(--coral-forte);font-weight:700;font-size:.85rem;padding:6px 14px;border-radius:999px;margin-bottom:18px;letter-spacing:.02em;text-transform:uppercase}
@media (prefers-color-scheme:dark){.selo{color:var(--coral)}}
.selo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--menta);box-shadow:0 0 0 4px color-mix(in srgb,var(--menta) 25%,transparent)}
.chamada{font-size:1.2rem;color:var(--suave);max-width:60ch}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 20px}
.garantias{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;padding:0;margin:0;color:var(--suave);font-size:.95rem}
.garantias li::before{content:"✓ ";color:var(--menta);font-weight:800}

/* relógio de 6h no hero */
.janela{background:var(--papel);border:1px solid var(--linha);border-radius:28px;padding:28px;box-shadow:var(--sombra);position:relative}
.janela h2{font-size:1.15rem;margin:0 0 4px}
.janela small{color:var(--suave)}
.relogio{display:grid;place-items:center;margin:18px auto;width:min(230px,70%)}
.relogio svg{width:100%}
.horas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.horas span{background:var(--areia);border-radius:12px;padding:8px;text-align:center;font-size:.85rem;color:var(--texto)}
.horas b{display:block;color:var(--tinta);font-size:1rem}

/* faixa de números */
.fita{background:var(--tinta);color:#fff}
@media (prefers-color-scheme:dark){.fita{background:var(--areia)}}
.fita .casca{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:26px 0}
.fita div{text-align:center}
.fita strong{display:block;font-size:1.7rem;color:var(--coral);letter-spacing:-.02em}
.fita span{font-size:.93rem;opacity:.85;color:#fff}
@media (prefers-color-scheme:dark){.fita span{color:var(--texto)}}
@media (max-width:700px){.fita .casca{grid-template-columns:repeat(2,1fr)}}

/* seções */
.comodo{padding:clamp(48px,6vw,88px) 0}
.comodo.tom{background:var(--areia)}
.cabeca{max-width:760px;margin-bottom:34px}
.cabeca.centro{margin-inline:auto;text-align:center}
.cabeca p{color:var(--suave);font-size:1.1rem}
.sobretitulo{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:var(--coral-forte);font-weight:700;margin-bottom:8px}
@media (prefers-color-scheme:dark){.sobretitulo{color:var(--coral)}}

/* grade de cartões */
.mosaico{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.peca{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:24px;box-shadow:var(--sombra)}
.peca .icone{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--coral-claro);color:var(--coral-forte);font-size:1.35rem;margin-bottom:14px}
.peca p{margin:0;color:var(--suave)}
.peca a.leve{display:inline-block;margin-top:12px;font-weight:600}

/* passos */
.trilha{counter-reset:passo;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;list-style:none;padding:0;margin:0}
.trilha li{counter-increment:passo;position:relative;background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:58px 22px 22px}
.trilha li::before{content:counter(passo);position:absolute;top:18px;left:22px;width:30px;height:30px;border-radius:50%;background:var(--tinta);color:var(--fundo);display:grid;place-items:center;font-weight:800;font-size:.95rem}
.trilha strong{display:block;color:var(--tinta);margin-bottom:4px}
.trilha p{margin:0;color:var(--suave);font-size:.98rem}

/* planos */
.cardapio{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
@media (max-width:1050px){.cardapio{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cardapio{grid-template-columns:1fr}}
.prato{background:var(--papel);border:1.5px solid var(--linha);border-radius:22px;padding:26px 22px;display:flex;flex-direction:column;position:relative}
.prato.estrela{border-color:var(--coral);box-shadow:0 18px 40px -22px var(--coral)}
.prato .fita-topo{position:absolute;top:-13px;left:22px;background:var(--coral);color:#fff;font-size:.75rem;font-weight:800;padding:4px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em}
.prato h2,.prato h3{margin:0 0 2px;font-size:1.22rem;letter-spacing:-.01em}
.prato .prazo{color:var(--suave);font-size:.93rem}
.valor{font-size:2.6rem;font-weight:800;color:var(--tinta);letter-spacing:-.04em;margin:14px 0 0;line-height:1}
.valor sup{font-size:1rem;vertical-align:super;margin-right:3px}
.pormes{color:var(--menta);font-weight:700;font-size:.95rem;margin:6px 0 16px}
.prato ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:7px;font-size:.96rem}
.prato li::before{content:"●";color:var(--coral);font-size:.6rem;margin-right:9px;vertical-align:middle}
.prato .botao{margin-top:auto}

/* conteúdo de artigo */
.miolo{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
@media (max-width:960px){.miolo{grid-template-columns:minmax(0,1fr)}}
.texto h2{margin-top:1.8em}
.texto h2:first-child{margin-top:0}
.texto h3{margin-top:1.4em}
.texto ul,.texto ol{padding-left:1.25em;margin:0 0 1.2em}
.texto li{margin-bottom:.35em}
.texto table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.97rem;background:var(--papel);border-radius:14px;overflow:hidden;border:1px solid var(--linha)}
.texto th,.texto td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--linha)}
.texto th{background:var(--areia);color:var(--tinta)}
.rolagem{overflow-x:auto}
.resumo{background:var(--papel);border:1px solid var(--linha);border-left:5px solid var(--coral);border-radius:14px;padding:18px 22px;margin:0 0 30px}
.resumo strong{display:block;color:var(--tinta);margin-bottom:6px}
.resumo ul{margin:0;padding-left:1.1em}
.dica{background:var(--coral-claro);border-radius:14px;padding:16px 20px;margin:0 0 1.4em;color:var(--tinta)}
.lateral{position:sticky;top:96px;display:grid;gap:16px}
.cartaz{background:var(--tinta);color:#fff;border-radius:22px;padding:24px}
@media (prefers-color-scheme:dark){.cartaz{background:#0a1120;border:1px solid var(--linha)}}
.cartaz h3{color:#fff;margin-bottom:6px}
@media (prefers-color-scheme:dark){.cartaz h3{color:#fff}}
.cartaz p{opacity:.85;font-size:.97rem}
.cartaz .botao{width:100%}
.atalhos{background:var(--papel);border:1px solid var(--linha);border-radius:22px;padding:20px 22px}
.atalhos h3{font-size:1rem;margin-bottom:10px}
.atalhos ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.atalhos a{color:var(--texto);text-decoration:none;font-size:.96rem}
.atalhos a:hover{color:var(--coral-forte)}
.carimbo{color:var(--suave);font-size:.9rem;margin-top:-6px;margin-bottom:24px}

/* migalhas */
.migalhas{font-size:.88rem;color:var(--suave);padding-top:22px}
.migalhas ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.migalhas li+li::before{content:"›";margin-right:6px}
.migalhas a{color:var(--suave)}
.titulo-pagina{padding:18px 0 8px}
.titulo-pagina .chamada{margin-bottom:0}

/* perguntas */
.duvidas{display:grid;gap:10px;max-width:880px}
.duvidas.centro{margin-inline:auto}
.duvidas details{background:var(--papel);border:1px solid var(--linha);border-radius:16px;padding:0 22px}
.duvidas summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;font-weight:600;color:var(--tinta);position:relative}
.duvidas summary::-webkit-details-marker{display:none}
.duvidas summary::after{content:"+";position:absolute;right:0;top:12px;font-size:1.6rem;color:var(--coral);transition:transform .2s}
.duvidas details[open] summary::after{transform:rotate(45deg)}
.duvidas details>div{padding:0 0 18px;color:var(--suave)}
.duvidas details>div p:last-child{margin:0}

/* convite final */
.varanda{padding:clamp(48px,6vw,80px) 0}
.varanda .casca{background:linear-gradient(135deg,var(--tinta),#24406f);border-radius:30px;padding:clamp(30px,5vw,58px);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;color:#dfe6f3}
@media (prefers-color-scheme:dark){.varanda .casca{background:linear-gradient(135deg,#1c2c4d,#2a1f3a)}}
.varanda h2{color:#fff;margin:0 0 8px}
.varanda p{margin:0}
@media (max-width:760px){.varanda .casca{grid-template-columns:1fr}}

/* rodapé */
.rodape{border-top:1px solid var(--linha);padding:48px 0 30px;font-size:.95rem;color:var(--suave)}
.rodape .colunas{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
@media (max-width:820px){.rodape .colunas{grid-template-columns:1fr 1fr}}
.rodape h3{font-size:.95rem;margin-bottom:10px}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rodape a{color:var(--suave);text-decoration:none}
.rodape a:hover{color:var(--coral-forte)}
.rodape .fim{border-top:1px solid var(--linha);margin-top:32px;padding-top:20px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:.87rem}

/* botão flutuante do WhatsApp — lado direito */
.zap{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:10px;height:60px;min-width:60px;padding:0 15px;border-radius:999px;background:#25d366;color:#fff;text-decoration:none;font-weight:700;box-shadow:0 10px 28px -8px rgb(37 211 102/.7),0 2px 6px rgb(0 0 0/.15);transition:transform .18s,background .18s}
.zap:hover{background:#1ebe5b;transform:translateY(-2px) scale(1.03);color:#fff}
.zap svg{flex:none}
.zap::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid #25d366;animation:zap-pulso 2.4s ease-out infinite;pointer-events:none}
@keyframes zap-pulso{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}
.zap-txt{white-space:nowrap;padding-right:4px}
@media (max-width:700px){.zap{right:16px;bottom:16px;padding:0;width:58px;height:58px;justify-content:center}.zap-txt{display:none}}
@media print{.zap{display:none}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}@view-transition{navigation:none}.zap::before{animation:none}}