/* Pagina de Camarotes (/camarotes-carnaval-salvador), prototipo aprovado docs/prototipo/Camarotes Carnaval Salvador 2027.html.
   So o que e proprio desta pagina; o resto vem do loja.css (topo, rodape, chips, botoes, duvidas). */
.c-hero{padding-block:20px 6px}
.c-hero h1{font-size:clamp(28px,7vw,44px);line-height:1.04;font-weight:900;margin-top:4px}
.c-hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--yellow) 62%);padding:0 2px}
.lead{color:var(--ink-2);margin:10px 0 0;max-width:62ch;font-size:15.5px}
.facts{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.facts li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:9px 12px;line-height:1.2}
.facts b{display:block;font-family:var(--display);font-stretch:85%;font-size:20px;font-weight:900}
.facts span{font-size:12.5px;color:var(--muted)}
@media (min-width:760px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.c-nav{margin-top:14px}
.c-nav .chips{padding-block:0}
.sec{padding-top:26px;scroll-margin-top:120px}
.hint .lg{margin-left:6px}

/* Cards */
.cgrid{display:grid;gap:12px}
@media (min-width:760px){.cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.cc-top{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:center}
.cc-top .thumb{width:112px}
.ccard h3{font-family:var(--display);font-stretch:85%;font-size:20px;font-weight:800;line-height:1.1}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.tg{font-size:11.5px;font-weight:700;color:var(--ink-2);background:var(--chip);padding:2px 7px;border-radius:5px}
.cc-info{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:13.5px}
.cc-info li{display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px}
.cc-info span{color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding-top:1px}
.cc-info b{font-weight:600;color:var(--ink)}
.cc-info small{color:var(--muted);font-weight:500}
.cc-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:auto;padding-top:8px;border-top:1px solid var(--line)}
.from{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.from small{width:100%;font-size:11.5px;color:var(--muted)}
.gp{font-family:var(--display);font-stretch:80%;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.gp.g-F{color:var(--fem)}.gp.g-M{color:var(--mas)}.gp.g-U{color:var(--ink)}
.cc-acts{display:flex;gap:6px;flex:none}
.btn.sm{min-height:40px;padding:8px 14px;font-size:14px;text-decoration:none;display:inline-flex;align-items:center}
a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn.ghost{background:var(--surface)}
.cc-days{display:grid;gap:4px;background:var(--chip);border-radius:12px;padding:8px}
.ddrow{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center;font-size:13.5px;line-height:1.3}
.ddrow.off{color:var(--muted)}
.dd{text-align:center;line-height:1}
.dd small{display:block;font-size:10px;font-weight:800;text-transform:uppercase;color:var(--muted)}
.dd b{font-family:var(--display);font-stretch:75%;font-size:18px}
.soon{margin-top:12px;display:grid;gap:6px;padding:12px;border:1px dashed var(--line);border-radius:14px}
.soon-h{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.soon-i{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:14px}
.soon-i span{color:var(--muted);font-size:13px}
.soon-cta{font-weight:700;color:var(--ok);font-size:14px;text-decoration:none}

/* Atracoes por dia */
.dtab{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;background:var(--chip);padding:4px;border-radius:14px;position:sticky;top:120px;z-index:5}
.dtab button{border:0;background:transparent;border-radius:10px;padding:7px 2px;line-height:1.15;font-weight:800;font-size:13px}
.dtab button small{display:block;font-weight:600;color:var(--muted);font-size:11px}
.dtab button[aria-selected="true"]{background:var(--yellow);color:var(--yellow-ink)}
.dtab button[aria-selected="true"] small{color:inherit}
.dtab .ds{display:none}
@media (max-width:520px){.dtab .dl{display:none}.dtab .ds{display:inline}}
.dpanel{margin-top:10px;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.dp-h{padding:10px 14px;font-weight:800;font-size:14px;border-bottom:1px solid var(--line);background:var(--chip)}
.drow2{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.drow2 .thumb{border-radius:7px}
.dr-m{min-width:0;display:grid;gap:1px}
.dr-m b{font-size:14.5px}
.dr-a{font-weight:700;font-size:15px;line-height:1.3}
.dr-s{font-size:12px;color:var(--muted)}
.dr-p{display:grid;justify-items:end;gap:1px}
.dr-p .gp{font-size:16px}
.dr-p a{font-size:13px;font-weight:800;color:var(--action);text-decoration:none;margin-top:3px}
.dp-off{margin:0;padding:10px 14px;font-size:13px;color:var(--muted)}
@media (max-width:520px){.drow2{grid-template-columns:56px minmax(0,1fr)}.drow2 .thumb{width:56px!important}.dr-p{grid-column:2;justify-items:start;grid-auto-flow:column;align-items:baseline;gap:10px}.dr-p a{margin:0}}

/* Comparativo */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.cmp{border-collapse:collapse;width:100%;min-width:680px;font-size:14px}
.cmp th,.cmp td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--chip)}
.cmp tbody th{font-weight:800;position:sticky;left:0;background:var(--surface);white-space:nowrap}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp small{color:var(--muted)}
.cmp .pr .gp{display:block;font-size:16px}
.yes{color:var(--ok);font-weight:700}.no{color:var(--muted);font-weight:700}


/* CTA */
.cta{margin-top:28px;display:grid;gap:12px;align-items:center;background:var(--ink);color:var(--bg);border-radius:18px;padding:18px}
.cta h2{font-size:22px;font-weight:900}
.cta p{margin:4px 0 0;opacity:.8;font-size:14.5px}
.cta .btn{background:var(--yellow);color:var(--yellow-ink)}
@media (min-width:760px){.cta{grid-template-columns:minmax(0,1fr) auto;padding:22px 26px}}
.legal{padding-bottom:18px}

a.icon-btn{text-decoration:none}
/* v2 */
.perks{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--ink-2)}
.perks li{display:flex;align-items:center;gap:6px}
.perks li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.perks b{color:var(--ink)}
.frase{margin:2px 0 0;font-size:13.5px;color:var(--ink-2);font-style:italic;line-height:1.3}
.selo.lote{background:var(--warn-soft);color:var(--warn)}
.from .cparc{width:100%;font-size:12px;color:var(--muted);margin-top:2px}
.lg i.u{background:var(--ink)}
.cmp td.fr{font-style:italic;color:var(--ink-2);min-width:180px}
.cmp tbody th .selo{margin-top:4px;display:inline-block}
.cc-foot{flex-wrap:wrap}
.cc-foot .from{flex:1 1 220px}
@media (max-width:520px){.cc-acts{width:100%}.cc-acts .btn{flex:1}}
.cc-acts .btn{justify-content:center}
/* Mapa */
:root{--map-land:#efe7d6;--map-sea:#bfe0f2;--map-road:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--map-land:#1c2436;--map-sea:#123049;--map-road:#33415c}}
:root[data-theme="dark"]{--map-land:#1c2436;--map-sea:#123049;--map-road:#33415c}
.map-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--map-land)}
.map{display:block;width:100%;min-width:640px;height:auto}
.m-sea{font:italic 600 15px var(--body);fill:#4a7f9c;letter-spacing:.1em}
.m-dir{font:700 14px var(--body);fill:var(--ink-2)}
.m-mk{font:600 12.5px var(--body);fill:var(--ink-2)}
.m-pin circle{fill:var(--action);stroke:#fff;stroke-width:3}
.m-pin text{font:800 15px var(--body);fill:#fff}
.m-pin.soon circle{fill:var(--muted)}
.m-pin.tbc circle{stroke:var(--warn);stroke-dasharray:4 3}
.m-pin:hover circle,.m-pin:focus circle{fill:var(--ink)}
.map-leg{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.map-leg a{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);text-decoration:none;line-height:1.2}
.map-leg a:hover{border-color:var(--action)}
.map-leg .n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--action);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px}
.map-leg .soon .n{background:var(--muted)}
.map-leg .tbc .n{outline:2px dashed var(--warn);outline-offset:1px}
.map-leg small{display:block;color:var(--muted);font-size:12px}
.map-leg em{font-style:normal;font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase}
.map-note{font-size:12.5px;color:var(--muted);margin:8px 0 0}
.tbc-t{color:var(--warn)}
/* Mapa v2 (interativo) */
:root{--map-land:#e9ece3;--map-sea:#bfe0f2;--map-sea2:#a9d4ec;--map-road-b:#e8c400}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--map-land:#1c2436;--map-sea:#123049;--map-sea2:#0f2940;--map-road-b:#a88c00}}
:root[data-theme="dark"]{--map-land:#1c2436;--map-sea:#123049;--map-sea2:#0f2940;--map-road-b:#a88c00}
.map{min-width:720px}
.m-title{font:900 30px var(--display);font-stretch:85%;fill:var(--ink)}
.m-sub{font:600 13px var(--body);fill:var(--ink-2)}
.m-bairro{font:800 18px var(--body);letter-spacing:.12em;fill:#2f6f94}
.m-sea{font:italic 600 14px var(--body);fill:#2f6f94;letter-spacing:.1em}
.m-av{font:700 13px var(--body);fill:#7a6400;letter-spacing:.04em}
.m-mk{font:700 13px var(--body);fill:var(--ink-2)}
.m-badge circle{stroke:#fff;stroke-width:3}
.m-badge text{font:800 13px var(--body);fill:#fff}
.m-badge.go circle{fill:#4c8a2b}.m-badge.end circle{fill:#d6334a}
.m-pin{cursor:pointer;outline:none}
.m-pin line{stroke:var(--ink);stroke-width:2}
.m-pin .dot{fill:var(--ink);stroke:none}
.m-pin .ring{fill:#fff;stroke:var(--ink);stroke-width:2;transition:stroke-width .15s}
.m-pin .ph{fill:var(--muted)}
.m-pin .ph-t{font:800 14px var(--body);fill:#fff}
.m-pin:hover .ring,.m-pin:focus-visible .ring{stroke:var(--action);stroke-width:4}
.m-pin.on .ring{stroke:var(--action);stroke-width:5}
.m-pin.soon{opacity:.75}
.map-info{margin-top:10px;display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px}
.mi-t{display:grid;gap:2px;min-width:0}
.mi-t b{font-family:var(--display);font-stretch:85%;font-size:19px}
.mi-t .frase{margin:0}
.mi-t small{color:var(--muted);font-size:12.5px}
.mi-p{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.mi-p small{color:var(--muted);font-size:12px}
.mi-a{display:flex;gap:6px;margin-left:auto}
@media (min-width:760px){.map-info{grid-template-columns:96px minmax(0,1fr) auto}.mi-p{grid-column:auto;justify-content:flex-end}.mi-a{width:100%;justify-content:flex-end}}
.map-leg{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.map-leg button{width:100%;display:flex;gap:8px;align-items:center;padding:7px 10px;border:1px solid var(--line);border-radius:11px;background:var(--surface);font-weight:700;font-size:13.5px;text-align:left}
.map-leg button[aria-pressed="true"]{border-color:var(--action);background:var(--action-soft)}
.map-leg .n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--action);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px}
.map-leg .soon .n{background:var(--muted)}
.map-leg em{font-style:normal;font-size:10.5px;font-weight:800;color:var(--muted);text-transform:uppercase}
.m-hill path{fill:#9dbb7e}
.more{border:0;background:none;padding:0;margin-left:4px;color:var(--action);font-weight:700;font-size:13px;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.cc-days{margin-top:-2px}
/* Pagina real (CamarotesPage.cs): ajustes sobre o prototipo */
.gp{position:relative}
.vh{position:absolute!important;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cc-t{min-width:0}
.ccard h3 a,.dr-m b a,.soon-i b a{color:inherit;text-decoration:none}
.ccard h3 a:hover,.dr-m b a:hover,.soon-i b a:hover{text-decoration:underline;text-underline-offset:2px}
.drow2 .thumb{width:76px}
.map-info .thumb{width:96px}
h3.dp-h{margin:0;font-family:inherit;font-stretch:normal;line-height:1.3}
.dr-x{font-size:12.5px;font-weight:800;color:var(--muted)}
#duvidas.faq{padding-block:26px 0;scroll-margin-top:120px}
.dtab button{cursor:pointer;color:inherit}
.map-leg button{cursor:pointer;color:var(--ink)}
.more{cursor:pointer}
.map-leg .breve .n{background:var(--muted)}
.cmp tbody th{box-shadow:inset 0 -1px 0 var(--line),inset -1px 0 0 var(--line)}
.cmp tbody tr:last-child th{box-shadow:inset -1px 0 0 var(--line)}
.map-leg li{display:flex}
.map-leg button{flex:1}
.map-leg .nm{display:grid;line-height:1.2;min-width:0}
.map-leg .nm em{font-size:10px;letter-spacing:.04em}
/* Botao "+ Atracoes" do card (abre as atracoes de cada dia) */
.cc-more{margin-top:-2px}
.more{display:inline-flex;align-items:center;gap:6px;margin:0;padding:6px 12px 6px 8px;border:1px solid var(--line);border-radius:999px;background:var(--action-soft);color:var(--action);font-weight:800;font-size:13px;text-decoration:none;white-space:nowrap}
.more:hover{border-color:var(--action)}
.more .mi{position:relative;width:18px;height:18px;border-radius:50%;background:var(--action);flex:none}
.more .mi::before,.more .mi::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:2px;margin:-1px 0 0 -4.5px;background:#fff;border-radius:2px;transition:transform .15s}
.more .mi::after{transform:rotate(90deg)}
.more[aria-expanded="true"] .mi::after{transform:rotate(0)}
.mut{color:var(--muted)}
/* Card: "+ Atracoes" no fim dos destaques; rodape em cartoes (a partir de / cartao / boleto) e botoes meio a meio */
.cc-info b .more{margin-left:6px;vertical-align:middle;padding:3px 10px 3px 5px;font-size:12.5px}
.cc-foot{display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:10px;align-items:stretch}
.cc-pays{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.cc-pays .pay{padding:7px 9px}
.cc-pays .pay b{font-size:17px}
.cc-pays .pay>span{color:var(--muted);font-weight:600}
.cc-pays .pay>span.ok{color:var(--ok);font-weight:700}
.cc-pays .pay.ini{background:var(--chip);border-color:transparent}
.cc-pays .pay.ini b{display:flex;flex-direction:column;white-space:normal;overflow:visible;line-height:1.15}
.cc-pays .pay.ini .gp{font-size:17px}
.cc-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
.cc-acts>:only-child{grid-column:1/-1}
.cc-acts .btn{min-height:46px;font-size:15px}