/* =====================================================================
   Caderno de viagem · tema visual do site
   Papel, fita, polaroid, cartão-postal, anotação à mão e carimbo.
   Carrega por último: redefine cores, fontes e o visual de cada parte.
   Fontes: Fraunces (títulos), Caveat (anotações), Work Sans (texto).
   ===================================================================== */
:root {
  --paper: #F3ECDD;
  --sand: #EADFC9;
  --sand-2: #DCCFB4;
  --cartao: #FFFBF2;
  --ink: #22313A;
  --ink-2: #3A4950;
  --muted: #6A7176;
  --sea: #2E6F86;
  --lagoon: #2E6F86;
  --sun: #C2552C;
  --mango: #D9A441;
  --leaf: #4E7A4B;
  --line: rgba(34, 49, 58, .16);
  --fita: rgba(232, 205, 140, .78);
  --radius: 3px;
  --shadow: 0 16px 30px -20px rgba(45, 30, 5, .55);
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Caveat', 'Segoe Print', cursive;
}

body {
  background: var(--paper) radial-gradient(rgba(70, 45, 10, .055) 1px, transparent 1.3px) 0 0 / 6px 6px;
  color: var(--ink);
  font-family: var(--body);
}
h1, h2, h3 { font-family: var(--display); letter-spacing: -.015em; }
h2 { font-weight: 300; font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.02; }
h2 em, h1 em { font-style: italic; font-weight: 600; color: var(--sun); }
::selection { background: var(--mango); color: var(--ink); }

/* ---------- botões: retos, sem brilho ---------- */
.btn { border-radius: 4px; font: 600 15px/1 var(--body); box-shadow: none; }
.btn:hover { transform: none; filter: brightness(1.06); }
.btn-sun { background: var(--sun); color: #fff; box-shadow: none; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-wa { background: #2B8A55; }

/* ---------- logo ---------- */
.eh-word b { font: italic 600 1.3em/1 var(--display); letter-spacing: -.01em; }
.eh-word em { color: var(--sun); }
.eh-word small { font: 700 1.05em/1 var(--hand); letter-spacing: 0; text-transform: none; opacity: 1; color: var(--sea); margin-left: .1em; }

/* ---------- topo fixo: uma linha fina, sem pílula flutuante ---------- */
.nav { inset: 0 0 auto; border-radius: 0; padding: 10px var(--gutter); background: rgba(243, 236, 221, .95); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 0 var(--line); }
.nav.scrolled { box-shadow: 0 1px 0 var(--line); }
.nav-links { gap: 28px; }
.nav-links a { color: var(--ink); font-weight: 500; border-bottom: 1px solid transparent; padding: 4px 0; }
.nav-links a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.lang, .nav .lang { background: none !important; box-shadow: none !important; padding: 0; gap: 0; }
.lang button { background: none !important; color: var(--muted) !important; font: 600 12px/1 var(--body); letter-spacing: .08em; border-radius: 0; box-shadow: none !important; }
.lang button[aria-pressed="true"] { color: var(--ink) !important; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.lang button + button::before { content: none; }
.nav-burger { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); border-radius: 4px; }
.nav-burger span { background: var(--ink); }
.mmenu-panel { top: 64px; border-radius: 3px; background: var(--cartao); box-shadow: var(--shadow); }
.mmenu-panel > a:not(.btn) { font: 400 1.35rem/1 var(--display); border-radius: 0; border-bottom: 1px solid var(--line); }
.mmenu-bg { background: rgba(34, 49, 58, .25); backdrop-filter: none; }
.scroll-progress { height: 2px; background: var(--ink); }

/* ---------- topo da página ---------- */
.hero { padding-top: 110px; }
.kicker { font: 500 12.5px/1.4 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--sea); }
.kicker .dot { display: none; }
.hero-title { font: 300 clamp(2.9rem, 6vw, 5.6rem)/.98 var(--display) !important; letter-spacing: -.025em; }
.hero-title .hl { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--sun); font-style: italic; font-weight: 600; }
.lead { color: var(--ink-2); }
.lead b { font-weight: 600; }
.hero-cta .btn-ghost { box-shadow: none; padding-left: 4px; padding-right: 4px; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.hero-cta .btn-ghost::after { content: ' →'; }
/* a nota da média vira anotação à mão */
.stats { display: block; margin-top: 34px; }
.stats div { min-width: 0; }
.stats dt { font: 700 clamp(1.4rem, 2vw, 1.75rem)/1.1 var(--hand); color: var(--sea); letter-spacing: 0; display: inline; transform: none; }
.stats dd { display: inline; margin: 0 0 0 6px; font: 700 clamp(1.4rem, 2vw, 1.75rem)/1.1 var(--hand); color: var(--sun); }
.stats div { display: inline-block; transform: rotate(-2deg); transform-origin: left; }

/* colagem: polaroids com fita, bilhete da balsa e carimbo */
.deck { aspect-ratio: 1 / 1.02; width: min(100%, 580px); perspective: none; cursor: default; }
.pol { position: absolute; margin: 0; background: #fff; padding: 11px 11px 46px; box-shadow: 0 20px 40px -22px rgba(40, 25, 0, .6); transition: transform .35s ease; }
.pol img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pol figcaption { position: absolute; left: 6px; right: 6px; bottom: 9px; text-align: center; font: 700 clamp(1.15rem, 1.6vw, 1.45rem)/1 var(--hand); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pol::before { content: ''; position: absolute; top: -13px; left: 50%; width: 92px; height: 26px; margin-left: -46px; background: var(--fita); transform: rotate(-4deg); }
.pol[data-id] { cursor: pointer; }
.pol[data-id]:hover, .pol[data-id]:focus-visible { transform: rotate(0deg) scale(1.02) !important; z-index: 6; outline: none; }
.pol-1 { width: 58%; left: 0; top: 7%; transform: rotate(-5deg); z-index: 2; }
.pol-2 { width: 50%; right: 0; top: 0; transform: rotate(4deg); z-index: 1; }
.pol-3 { width: 45%; right: 7%; bottom: 0; transform: rotate(-2deg); z-index: 3; }
.bilhete { position: absolute; left: 3%; bottom: 5%; z-index: 4; width: min(58%, 260px); padding: 13px 18px; background: #FFF8E6; border: 1.5px solid var(--ink); transform: rotate(3deg); box-shadow: 0 12px 22px -16px rgba(0, 0, 0, .45); }
.bilhete::after { content: ''; position: absolute; right: -1.5px; top: 8px; bottom: 8px; border-right: 3px dotted var(--paper); }
.bilhete small { display: block; font: 600 10.5px/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.bilhete b { display: block; margin: 3px 0; font: italic 600 clamp(1.05rem, 1.6vw, 1.3rem)/1.15 var(--display); }
.carimbo { position: absolute; right: 1%; top: 45%; z-index: 5; width: 112px; height: 112px; border-radius: 50%; border: 3px double var(--sun); color: var(--sun); display: grid; place-items: center; text-align: center; font: 600 10.5px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-14deg); opacity: .88; background: rgba(243, 236, 221, .5); }
.carimbo b { display: block; font: italic 700 26px/1 var(--display); letter-spacing: 0; margin: 2px 0; }
.deck-hint { display: none; }
@media (max-width: 900px) {
  .deck { order: -1; width: min(100%, 460px); margin: 6px auto 30px; }
  .carimbo { width: 88px; height: 88px; font-size: 9px; } .carimbo b { font-size: 20px; }
  .bilhete { width: min(62%, 220px); padding: 10px 14px; }
}

/* a faixa rolando sai: era enfeite, não informação */
.marquee { display: none; }

/* ---------- cabeçalhos de seção ---------- */
.eyebrow, .eyebrow.light { display: inline-block; font: 700 1.6rem/1 var(--hand); letter-spacing: 0; text-transform: none; color: var(--sea); margin: 0 0 10px; transform: rotate(-1.5deg); }
.sec-head h2 { max-width: 18em; }
.sec-lead { color: var(--ink-2); }

/* ---------- bairros: fichas com fita e mapa colado ---------- */
.bairro-tab { background: var(--cartao) !important; border-radius: 2px !important; box-shadow: var(--shadow) !important; border: 0 !important; position: relative; color: var(--ink) !important; }
.bairro-tab::before { content: ''; position: absolute; top: -12px; left: 28px; width: 80px; height: 24px; background: var(--fita); transform: rotate(-3deg); }
.bairro-tab:nth-child(2) { transform: rotate(.6deg); }
.bairro-tab[aria-selected="true"] { outline: 2px dashed var(--c); outline-offset: 5px; }
.bairro-tab .count { font: 700 1.3rem/1 var(--hand); color: var(--muted); background: none; padding: 0; }
.bairro-tab h3 { font: italic 600 clamp(1.8rem, 2.6vw, 2.2rem)/1 var(--display); }
.bairro-tab .frase { font: 700 1.45rem/1.1 var(--hand); color: var(--c); }
.bairro-tab .marca-chip { background: none; padding: 0; letter-spacing: .14em; }
.bairro-tab li { background: none; padding: 2px 0; border-radius: 0; border-bottom: 1px dashed var(--line); margin-right: 12px; font-weight: 500; }
.bairro-tab .tab-ig { color: var(--c); }
.map-wrap { background: #fff; padding: 10px; border-radius: 2px; box-shadow: var(--shadow); transform: rotate(.5deg); position: relative; }
.map-wrap::before { content: ''; position: absolute; z-index: 500; top: -12px; right: 40px; width: 96px; height: 26px; background: var(--fita); transform: rotate(5deg); }
.map-wrap #map { border-radius: 0; }
.map-wrap .leaflet-tile-pane { filter: sepia(.28) saturate(.85) contrast(.98); }
.map-note { font: 700 1.2rem/1.2 var(--hand) !important; color: var(--sea) !important; background: rgba(255, 251, 242, .92) !important; border-radius: 0 !important; }

/* ---------- filtro das casas: ficha de caderno, não painel ---------- */
.match { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.match .mf + .mf { border-left: 1px dashed var(--line) !important; }
.match-label { font: 700 1.3rem/1 var(--hand) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--sea) !important; }
.match .stepper, .stepper { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--ink) !important; border-radius: 4px !important; }
.stepper button { border-radius: 2px !important; }
.chip, .match .chip { background: transparent !important; color: var(--ink) !important; box-shadow: none !important; border-radius: 0 !important; padding: 6px 4px !important; font-weight: 500; }
.match .chip .chip-ic { display: none !important; }
.match .chip .chip-ok { display: inline-grid !important; width: 19px; height: 19px; border: 1.5px solid var(--ink); border-radius: 2px; color: transparent !important; }
.match .chip:has(input:checked) .chip-ok { color: var(--sun) !important; }
.match .chip:has(input:checked) { text-decoration: underline; text-decoration-color: var(--sun); text-underline-offset: 4px; }
.match .chips { -webkit-mask-image: none !important; mask-image: none !important; }
.seg { background: transparent !important; padding: 0 !important; gap: 14px !important; }
.seg-op { border-radius: 0 !important; padding: 6px 2px !important; box-shadow: none !important; border-bottom: 2px solid transparent; background: transparent !important; color: var(--ink-2) !important; }
.seg-op:has(input:checked) { color: var(--ink) !important; border-bottom-color: var(--c); background: transparent !important; }
.mf-result { background: var(--sand) !important; border-radius: 0 !important; }
.mf-result em, #match-count em { font: italic 700 1.4em var(--display); color: var(--sun); }

/* ---------- casas: cartões-postais ---------- */
.house { background: var(--cartao) !important; border-radius: 2px !important; padding: 10px 10px 2px; box-shadow: var(--shadow) !important; border: 0 !important; transition: transform .35s ease, box-shadow .35s; }
.grid > .house:nth-child(3n+1) { transform: rotate(-.8deg); }
.grid > .house:nth-child(3n+2) { transform: rotate(.6deg); }
.grid > .house:nth-child(3n) { transform: rotate(-.3deg); }
.grid > .house:hover { transform: rotate(0) translateY(-4px); box-shadow: 0 26px 40px -24px rgba(45, 30, 5, .6) !important; }
.house-media { border-radius: 0 !important; }
.house-bars i { border-radius: 0; }
.match-badge { background: var(--cartao) !important; color: var(--ink) !important; border-radius: 0 !important; font: 700 1.2rem/1 var(--hand) !important; padding: 6px 10px !important; transform: rotate(-3deg); box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .4); letter-spacing: 0 !important; }
.match-badge.no { color: var(--sun) !important; }
.bairro-badge { border-radius: 2px !important; background: rgba(255, 251, 242, .92) !important; }
.house-top h3 { font: italic 600 clamp(1.5rem, 2.2vw, 1.85rem)/1 var(--display) !important; letter-spacing: -.01em; }
.house .rating .i { color: var(--sun); }
.house .sub { font: 700 1.35rem/1.15 var(--hand) !important; color: var(--sea) !important; }
.house .facts .i { color: var(--muted); }
.why span { background: none !important; padding: 0 !important; border-radius: 0 !important; font-weight: 500; margin-right: 10px; }
.why span.ok { color: var(--leaf) !important; }
.why span.bad { color: var(--muted) !important; }

/* ---------- consultar datas: ficha presa com fita ---------- */
.datas { background: var(--sand) radial-gradient(rgba(70, 45, 10, .05) 1px, transparent 1.3px) 0 0 / 6px 6px; }
.datas-card { position: relative; background: var(--cartao) !important; border-radius: 2px !important; box-shadow: var(--shadow) !important; transform: rotate(.4deg); }
.datas-card::before, .cp-cq::before, .sheet-cq::before { content: ''; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; margin-left: -55px; background: var(--fita); transform: rotate(-2deg); z-index: 2; }
.datas-passos li::before { background: transparent !important; color: var(--sun) !important; border: 1.5px dashed var(--sun); font: 700 1.5rem/1 var(--hand) !important; }
.datas-passos b { font: italic 600 1.15rem/1.2 var(--display) !important; }
.cq-box { border-radius: 3px !important; background: #fff !important; }
.cq-casa small, .cq-data small { font: 700 1.05rem/1 var(--hand) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--sea) !important; }
.cq-casa > .i, .cq-data > .i { color: var(--sun); }
.cq-atalhos button { border-radius: 0 !important; background: transparent !important; box-shadow: none !important; border-bottom: 1.5px dashed var(--ink) !important; padding: 6px 2px !important; min-height: 34px !important; }
.cq-atalhos button[aria-pressed="true"] { border-bottom: 2px solid var(--sun) !important; color: var(--sun) !important; background: transparent !important; }
.cq-resumo.ok { background: transparent !important; color: var(--leaf) !important; border-left: 3px solid var(--leaf); border-radius: 0 !important; font: 700 1.3rem/1.2 var(--hand); padding: 2px 0 2px 12px !important; }
.cq-resumo.erro { background: transparent !important; border-left: 3px solid var(--sun); border-radius: 0 !important; }
.cq .cq-step button, .cq .cq-step button:hover:not(:disabled) { border-radius: 3px !important; box-shadow: inset 0 0 0 1.5px var(--ink) !important; }
.cq-obs summary::before { border-radius: 2px !important; }
.sheet-cq, .cp-cq { position: relative; border-radius: 2px !important; }

/* ---------- avaliações: bilhetes em papel pautado, assinados ---------- */
.dep-card { position: relative; background: var(--cartao) repeating-linear-gradient(transparent 0 29px, rgba(46, 111, 134, .13) 29px 30px) !important; border-radius: 2px !important; border: 0 !important; box-shadow: var(--shadow) !important; }
.dep-card::before { content: ''; position: absolute; top: -11px; left: 26px; width: 70px; height: 22px; background: var(--fita); transform: rotate(-5deg); }
.dep-track .dep-card:nth-child(odd) { transform: rotate(-.7deg); }
.dep-track .dep-card:nth-child(even) { transform: rotate(.6deg); }
.dep-card blockquote { font: italic 400 1.08rem/1.75 var(--display) !important; color: var(--ink) !important; }
.dep-card blockquote::before { content: none !important; }
.dep-stars .i { color: var(--sun) !important; }
.dep-av { display: none !important; }
.dep-ass b { font: 700 1.6rem/1 var(--hand) !important; color: var(--ink); }
.dep-ass b::before { content: '— '; }
.dep-ass > span { font-size: 13px; color: var(--muted); }
.dep-casa { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; text-decoration: underline; text-underline-offset: 3px; padding: 4px 0 !important; }
.dep-casa img { border-radius: 2px !important; }
.dep-nav button { border-radius: 4px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.dep-nav button:hover { background: var(--ink); }
.dep-track { padding-top: 18px; }

/* ---------- como funciona: um caminho tracejado, não quatro caixas ---------- */
.steps { gap: 0 !important; counter-reset: none; }
.steps li { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 24px 0 0 !important; }
.steps li::after { content: '' !important; display: block !important; position: absolute; top: 27px; left: 64px; right: 10px; width: auto; height: 0; background: none !important; border-top: 2px dashed var(--sand-2); }
.steps li:last-child::after { display: none !important; }
.step-n { width: 54px !important; height: 54px !important; border-radius: 50% !important; background: var(--paper) !important; color: var(--sun) !important; border: 1.5px solid var(--ink); font: 700 1.9rem/1 var(--hand) !important; margin-bottom: 18px !important; }
.steps b { font: italic 600 1.35rem/1.15 var(--display) !important; }
@media (max-width: 960px) {
  .steps { gap: 28px 20px !important; }
  .steps li::after { display: none !important; }
}
@media (max-width: 700px) {
  .steps li { grid-template-columns: 54px 1fr !important; padding: 0 !important; }
  .steps li .step-n { margin: 0 !important; }
}

/* ---------- guia da casa ---------- */
.app-sec { background: var(--sand) radial-gradient(rgba(70, 45, 10, .05) 1px, transparent 1.3px) 0 0 / 6px 6px !important; border-radius: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
.app-sec::before { display: none !important; }
.app-sec .eyebrow { color: var(--sea) !important; }
.feat { counter-reset: f; }
.feat li { counter-increment: f; }
.feat .ic { background: none !important; box-shadow: none !important; border: 0 !important; width: 34px !important; }
.feat .ic .i { display: none; }
.feat .ic::before { content: counter(f); font: 700 1.7rem/1 var(--hand); color: var(--sun); }
.feat b { font: italic 600 1.15rem/1.2 var(--display); }
.sw-group { border-radius: 2px !important; background: var(--cartao) !important; box-shadow: none !important; border: 1px solid var(--line); }
.sw-items button { border-radius: 3px !important; }
.mini-plate { border-radius: 4px; }
#app-open { border-radius: 4px; }

/* ---------- passeios: cartões-postais ---------- */
.parc-card { background: var(--cartao) !important; border-radius: 2px !important; box-shadow: var(--shadow) !important; padding: 10px; border: 0 !important; }
.parc-card:nth-child(odd) { transform: rotate(-.5deg); }
.parc-card:nth-child(even) { transform: rotate(.5deg); }
.parc-media { border-radius: 0 !important; }
.parc-tipo { border-radius: 0 !important; background: var(--cartao) !important; color: var(--ink) !important; font: 700 1.3rem/1 var(--hand) !important; transform: rotate(-3deg); box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .4); }
.parc-tipo .i { color: var(--c); }
.parc-head h3 { font: italic 600 1.7rem/1 var(--display) !important; }
.parc-tags li { background: none !important; border-radius: 0 !important; padding: 2px 0 !important; border-bottom: 1px dashed var(--line); margin-right: 12px; }
.parc-cta .btn { border-radius: 4px; }

/* ---------- guia de Ilhabela: polaroids ---------- */
.art-links.com-foto a { background: #fff !important; padding: 10px 10px 0 !important; border-radius: 2px !important; box-shadow: var(--shadow) !important; }
.art-links.com-foto a:nth-child(odd) { transform: rotate(-.8deg); }
.art-links.com-foto a:nth-child(even) { transform: rotate(.7deg); }
.art-links.com-foto a:hover { transform: rotate(0) translateY(-4px); }
.art-links.com-foto a::after, .art-links.com-foto .al-ic { display: none !important; }
.art-links.com-foto a > img { border-radius: 0; }
.art-links.com-foto a > span { padding: 16px 8px 18px !important; background: transparent !important; }
.art-links.com-foto b { font: italic 600 1.35rem/1.1 var(--display) !important; }
.art-go { color: var(--sun) !important; font-weight: 600 !important; }
.ig-certa b { font: 700 1.45rem/1 var(--hand) !important; color: var(--sea); }
.ig-certa a { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; border-bottom: 1.5px dashed var(--ink); padding: 6px 2px !important; min-height: 0 !important; }
.ig-certa a:last-child { background: var(--ink) !important; color: var(--paper) !important; border-radius: 4px !important; border: 0; padding: 10px 14px !important; }
@media (max-width: 600px) { .ig-links.com-foto a { padding: 8px !important; } .ig-links.com-foto a > span { padding: 6px 4px 6px 14px !important; } }

/* ---------- dúvidas: linhas de caderno ---------- */
.faq details { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; border-bottom: 1px solid var(--line); padding: 0 4px !important; }
.faq details[open] { box-shadow: none !important; }
.faq-list { gap: 0 !important; border-top: 1.5px solid var(--ink); }
.faq summary { font: 500 1.2rem/1.3 var(--display) !important; }
.faq details[open] summary { font-style: italic; color: var(--sun); }
.faq .plus { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--ink); border-radius: 3px !important; }
.faq-mais span { font: 700 1.4rem/1.1 var(--hand); color: var(--sea); }

/* ---------- quem cuida ---------- */
.quem-promessas { counter-reset: q; }
.quem-promessas li { counter-increment: q; }
.qp-ic { background: none !important; box-shadow: none !important; border: 0 !important; }
.qp-ic .i { display: none; }
.qp-ic::before { content: '✓'; font: 700 1.8rem/1 var(--hand); color: var(--sun); }
.quem-promessas b { font: italic 600 1.15rem/1.2 var(--display); }
.quem-wa { border-radius: 4px !important; background: #2B8A55 !important; box-shadow: none !important; }
.qw-ic { border-radius: 3px !important; }
.quem-photos img { border-radius: 0 !important; background: #fff; padding: 8px 8px 26px; box-shadow: var(--shadow); }
.quem-photos img:nth-child(1) { transform: rotate(-2deg); }
.quem-photos img:nth-child(2) { transform: rotate(2.5deg) translateY(20px); }
.quem-photos img:nth-child(3) { transform: rotate(1deg); }
.quem-photos img:nth-child(4) { transform: rotate(-1.5deg); }
.quem-badge { border-radius: 50% !important; width: 150px; height: 150px; display: grid !important; place-items: center; align-content: center; text-align: center; padding: 10px !important; background: rgba(243, 236, 221, .9) !important; border: 3px double var(--sun); color: var(--sun) !important; box-shadow: none !important; transform: rotate(-12deg); gap: 2px !important; }
.quem-badge b { font: italic 700 2.1rem/1 var(--display) !important; color: var(--sun) !important; }
.quem-badge span { font-size: 9.5px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--sun) !important; }
.quem-badge .qb-stars .i { color: var(--sun) !important; width: 11px; height: 11px; }
.ig-card { border-radius: 3px !important; background: var(--cartao) !important; }

/* ---------- rodapé ---------- */
.foot { border-top: 1.5px dashed var(--ink) !important; }
.foot-marca { border-radius: 2px !important; background: var(--cartao) !important; box-shadow: none !important; border: 1px solid var(--line); }
.foot-casas b { font: italic 600 1.15rem/1.2 var(--display) !important; }

/* ---------- barra fixa do celular ---------- */
.mobile-cta { border-radius: 0 !important; background: rgba(243, 236, 221, .97) !important; box-shadow: 0 -1px 0 var(--line) !important; backdrop-filter: none !important; inset: auto 0 0 !important; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important; }
.mobile-cta .btn { border-radius: 4px !important; }

/* ---------- detalhe da casa ---------- */
.sheet-body { background: var(--paper) !important; border-radius: 6px 6px 0 0 !important; }
.sheet-content h2, #sheet-title { font: italic 600 clamp(2rem, 4vw, 2.8rem)/1 var(--display) !important; }
.sheet-content h4 { font: italic 600 1.3rem/1.2 var(--display) !important; }
.sheet-cta { background: rgba(243, 236, 221, .97) !important; backdrop-filter: none !important; }
.tag-list span, .rule-list > div { border-radius: 2px !important; }
.big-facts > div { border-radius: 2px !important; background: var(--cartao) !important; }
.sheet-close { border-radius: 4px !important; }
.gallery figure, .gallery img { border-radius: 2px !important; }

/* ---------- animações mais calmas: sem palavras voando ---------- */
.split .wd > span, .split .wd { transition-duration: .5s !important; }

/* =====================================================================
   Páginas fixas: casas (/casas/...) e guia de Ilhabela (/ilhabela/...)
   ===================================================================== */
.cp { padding-top: 96px; }
.crumbs { font: 500 13px var(--body); }
.cp-photos { border-radius: 0 !important; background: #fff; padding: 10px; box-shadow: var(--shadow); transform: rotate(-.5deg); }
.cp-brand { font: 700 1.35rem/1 var(--hand) !important; color: var(--sea) !important; }
.cp-intro h1, .art-head h1 { font-weight: 300 !important; letter-spacing: -.02em; }
.cp-facts li, .cp-tags li, .rec-fatos li { background: transparent !important; border-radius: 0 !important; border-bottom: 1px dashed var(--line); padding: 4px 2px !important; }
.cp-box { background: var(--cartao) !important; border-radius: 2px !important; box-shadow: none !important; border: 1px solid var(--line); }
.cp-box h2, .cp-gallery h2, .cp-book h2, .cp-others h2, .cp-planeje h2, .art-casas h2, .art-mais h2, .art-grupo h2, .art-cq h2, .art-body h2 { font-weight: 400 !important; font-style: italic; }
.cp-rules li, .cp-deps figure { border-radius: 2px !important; background: var(--paper) !important; }
.cp-deps figure { border-left: 0 !important; }
.cp-deps blockquote { font: italic 400 1.05rem/1.7 var(--display); }
.cp-deps figcaption b { font: 700 1.4rem/1 var(--hand); }
.cp-gal img { border-radius: 0 !important; background: #fff; padding: 5px; box-shadow: 0 8px 16px -12px rgba(0, 0, 0, .5); }
.cp-book { background: var(--sand) !important; border-radius: 2px !important; }
.cp-card { border-radius: 2px !important; background: #fff !important; padding: 8px 8px 14px !important; box-shadow: var(--shadow) !important; }
.cp-card img { border-radius: 0 !important; }
.cp-card b { font: italic 600 1.2rem/1.1 var(--display) !important; }
.cp-links a { border-radius: 0 !important; background: transparent !important; box-shadow: none !important; border-bottom: 1.5px dashed var(--ink); padding: 6px 2px !important; min-height: 0 !important; margin-right: 10px; }
.art-kicker { font: 700 1.4rem/1 var(--hand) !important; color: var(--sea) !important; }
.art-kicker .i { display: none; }
.art-foto { border-radius: 0 !important; background: #fff; padding: 10px; box-shadow: var(--shadow) !important; transform: rotate(1.2deg); position: relative; overflow: visible !important; }
.art-foto::before { content: ''; position: absolute; top: -13px; left: 50%; width: 110px; height: 26px; margin-left: -55px; background: var(--fita); transform: rotate(-3deg); z-index: 2; }
.art-foto img { aspect-ratio: 4 / 3; height: auto !important; }
.art-toc { background: transparent !important; border-radius: 0 !important; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line); padding: 16px 4px !important; }
.art-toc b { font: 700 1.4rem/1 var(--hand) !important; color: var(--sea); }
.art-dica { background: transparent !important; border-left: 3px solid var(--mango) !important; border-radius: 0 !important; font-family: var(--hand); font-size: 1.35rem !important; line-height: 1.3 !important; color: var(--ink) !important; }
.art-body details { border-bottom: 1px solid var(--line); }
.rec { border-radius: 2px !important; background: var(--cartao) !important; box-shadow: var(--shadow) !important; padding: 10px; gap: 10px; }
.rec:nth-child(odd) { transform: rotate(-.4deg); }
.rec:nth-child(even) { transform: rotate(.4deg); }
.rec-foto { border-radius: 0; }
.rec-marca { font: 700 1.3rem/1 var(--hand) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--sea) !important; }
.rec-txt h2 { font-style: italic; font-weight: 600 !important; }
.art-casas .cp-cards .cp-card:nth-child(odd) { transform: rotate(-.6deg); }
.art-casas .cp-cards .cp-card:nth-child(even) { transform: rotate(.6deg); }
@media (max-width: 860px) { .art-foto { order: -1; } }

/* ajustes da primeira revisão */
.pol img { height: auto; }
.faq-mais > span { font: 700 1.4rem/1.1 var(--hand); color: var(--sea); }
.faq-mais span { color: inherit; font: inherit; }
.faq-mais > span:first-child { font: 700 1.4rem/1.1 var(--hand); color: var(--sea); }
#faq-wa, #faq-wa span { color: #fff !important; font: 600 15px/1 var(--body) !important; }
.quem-badge > span:not(.qb-stars) { display: none !important; }
.quem-badge::after { content: 'Airbnb'; font: 600 10px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--sun); }
.quem-badge { width: 128px; height: 128px; }
.steps li::after { border-top: 1.5px dashed rgba(34, 49, 58, .35) !important; }
@media (max-width: 900px) {
  .deck { margin-bottom: 54px; }
  .bilhete { left: 0; bottom: -9%; transform: rotate(2deg); }
}

/* mesmo visual de "marcado" sem depender de :has (navegadores antigos) */
.match .chip.on .chip-ok { color: var(--sun) !important; }
.match .chip.on { text-decoration: underline; text-decoration-color: var(--sun); text-underline-offset: 4px; }
.seg-op.on { color: var(--ink) !important; border-bottom-color: var(--c); background: transparent !important; }

/* contraste mínimo de leitura (WCAG AA) */
:root { --muted: #5A6166; }
.btn-wa, .quem-wa, .mobile-cta .btn-wa, .cq-go, #faq-wa { background: #217346 !important; }
.app-switch button[aria-pressed="true"], .app-switch .sw-items button[aria-pressed="true"] { background: var(--c); color: #fff; box-shadow: none; }
.app-switch .sw-items button[aria-pressed="true"] img { box-shadow: 0 0 0 2px #fff; }
/* polaroid como link */
a.pol { display: block; color: var(--ink); text-decoration: none; }
.pol .cap { position: absolute; left: 6px; right: 6px; bottom: 9px; text-align: center; font: 700 clamp(1.15rem, 1.6vw, 1.45rem)/1 var(--hand); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.pol:hover, a.pol:focus-visible { transform: rotate(0deg) scale(1.02) !important; z-index: 6; }
a.pol:focus-visible { outline: 2px solid var(--sun); outline-offset: 4px; }

/* celulares bem estreitos (320–340px: iPhone SE, Android pequeno) */
@media (max-width: 360px) {
  .match .seg { width: auto !important; max-width: 100%; flex-wrap: wrap; gap: 4px 12px !important; }
  .match .seg-op { font-size: 13px !important; }
  .cq-data b { font-size: 14px !important; }
  .cq-casa, .cq-data { padding: 8px !important; gap: 6px !important; }
  .cp-cq, .sheet-cq, .datas-card { padding: 10px !important; }
}

/* fontes de reserva com a mesma largura das fontes do site: o texto não "pula" quando a fonte chega */
@font-face { font-family: "Fraunces Fallback"; src: local("Times New Roman"), local("Times"), local("Liberation Serif"), local("Noto Serif"), local("DejaVu Serif"); size-adjust: 92%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "Work Sans Fallback"; src: local("Arial"), local("Helvetica"), local("Roboto"), local("Liberation Sans"); size-adjust: 108%; ascent-override: 93%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Caveat Fallback"; src: local("Arial"), local("Helvetica"), local("Roboto"), local("Liberation Sans"); size-adjust: 75%; ascent-override: 96%; descent-override: 30%; line-gap-override: 0%; }
:root {
  --display: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --body: "Work Sans", "Work Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Caveat", "Caveat Fallback", cursive;
}