/* Header */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: var(--s4); min-height: 88px; }
.brand img { height: 52px; width: auto; }
.main-nav { margin-left: auto; display: flex; align-items: center; gap: var(--s4); }
.main-nav ul { display: flex; gap: var(--s4); list-style: none; margin: 0; padding: 0; }
.main-nav ul a { text-decoration: none; color: var(--brown); font-weight: 500; padding: .5rem 0; }
.main-nav ul a:hover, .main-nav ul a[aria-current="page"] { color: var(--bronze); }
.nav-reserve { text-decoration: none; background: var(--bronze); color: #fff; padding: 0 1.5rem; min-height: 48px; display: inline-flex; align-items: center; border-radius: var(--radius); font-weight: 600; font-size: .9375rem; letter-spacing: .1em; text-transform: uppercase; }
.nav-reserve:hover { background: var(--bronze-hover); color: #fff; }
.nav-toggle { display: none; }
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; align-items: center; margin-left: auto; min-height: 48px; padding: 0 1.25rem; border: 1px solid var(--brown); border-radius: var(--radius); background: none; color: var(--brown); font: 500 1rem var(--font); }
  .main-nav { display: none; position: absolute; inset: 88px 0 auto; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: var(--s2) 1.25rem var(--s4); }
  .main-nav.is-open { display: flex; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav ul a { display: block; font-size: 1.375rem; font-weight: 400; padding: .75rem 0; border: 0; }
  .nav-reserve { margin-top: var(--s3); justify-content: center; }
  .brand img { height: 42px; }
}

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 2rem; border-radius: var(--radius); background: var(--bronze); color: #fff; border: 1px solid var(--bronze); text-decoration: none; font-weight: 600; font-size: .9375rem; letter-spacing: .1em; text-transform: uppercase; }
.btn:hover { background: var(--bronze-hover); border-color: var(--bronze-hover); color: #fff; }
.btn-outline { background: transparent; color: var(--bronze); }
.btn-outline:hover { background: var(--bronze); color: #fff; }
.btn-dark { background: var(--night); border-color: var(--night); }
.btn-dark:hover { background: #000; border-color: #000; }
.text-link { font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin-top: var(--s5); }
.actions-tight { margin-top: 0; }

/* Breadcrumb */
.breadcrumb { padding-top: var(--s4); font-size: 1rem; }
.breadcrumb a { display: inline-flex; align-items: center; gap: .375rem; text-decoration: none; color: var(--text); font-weight: 400; }
.breadcrumb a:hover { color: var(--bronze); }
.breadcrumb .icon { color: var(--gold); }
.breadcrumb .sep { margin: 0 .625rem; color: var(--line); }
.breadcrumb [aria-current] { color: var(--bronze); font-weight: 500; }

/* Seções */
.section { padding-block: var(--s12); }
.section.section-flush { padding-top: var(--s4); }
.section.tone { background: var(--tone); }
.section-intro { margin-bottom: var(--s6); max-width: 720px; }
.section-intro h2 { margin-bottom: var(--s3); }
.section-intro p { font-size: var(--t-large); }
.two-col { display: grid; gap: var(--s4) var(--s8); align-items: end; }
.two-col-top { align-items: start; }
@media (min-width: 900px) { .two-col { grid-template-columns: 5fr 7fr; } }

/* Hero */
.hero { padding-top: var(--s10); }
.hero h1 { margin-bottom: var(--s5); }
.hero-sub { max-width: 620px; padding-bottom: var(--s10); }
@media (min-width: 900px) { .hero-sub { margin-left: 41.66%; } }
.page-head { padding-block: var(--s8) var(--s10); }
.page-head h1 { margin-bottom: var(--s4); }

/* Placeholders de foto */
.ph { margin: 0; background: var(--photo); border-radius: var(--radius); position: relative; overflow: hidden; }
.ph figcaption { position: absolute; left: var(--s3); bottom: var(--s2); font-size: .9375rem; color: var(--text); }
.ph-21x9 { aspect-ratio: 21 / 9; } .ph-3x2 { aspect-ratio: 3 / 2; } .ph-4x5 { aspect-ratio: 4 / 5; } .ph-tall { aspect-ratio: 4 / 5; }
@media (max-width: 700px) { .ph-21x9 { aspect-ratio: 4 / 3; } }

/* Suítes: texto + mosaico (grande + duas menores), como na referência */
.suite-row { display: grid; gap: var(--s5); align-items: center; }
.suite-row + .suite-row { margin-top: var(--s12); }
@media (min-width: 900px) { .suite-row { grid-template-columns: 4fr 8fr; gap: var(--s8); } }
.suite-row-text h2, .suite-row-text h3 { font-size: var(--t-h2); margin-bottom: var(--s3); }
.suite-row-text p { font-size: var(--t-large); }
.price-line { color: var(--brown); font-weight: 500; }
.suite-row-text .btn { margin-top: var(--s2); }
.mosaic { display: grid; gap: var(--s2); grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.mosaic .m-main { grid-row: 1 / 3; aspect-ratio: auto; min-height: 100%; }
.mosaic .m-a, .mosaic .m-b { aspect-ratio: 4 / 3.4; }
@media (max-width: 600px) {
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .mosaic .m-main { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 3 / 2; }
}

/* Comodidades com ícones de linha */
.amen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4) var(--s5); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.amen li { display: flex; flex-direction: column; gap: var(--s2); font-weight: 500; color: var(--brown); line-height: 1.45; }
.body-large + .amen { margin-top: var(--s6); grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

/* Endereço grande */
.address-block { border-top: 1px solid var(--line); }
.address-big { font-size: var(--t-address); font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: var(--brown); max-width: none; margin-bottom: var(--s6); }
.address-big a { text-decoration: none; color: inherit; }
.address-big a:hover { color: var(--bronze); }
.address-block .two-col p { font-size: var(--t-large); }

/* Perto do hotel: cartões verticais com legenda, como "Pontos de interesse" */
.places { display: grid; gap: var(--s4) var(--s3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.place h3 { margin: var(--s3) 0 var(--s1); font-weight: 500; font-size: 1.25rem; }
.place h3 a { text-decoration: none; }
.place h3::after { content: ""; display: block; width: 32px; height: 2px; background: var(--gold); margin-top: var(--s2); }
.place p { margin-top: var(--s2); }

/* Galeria de suíte */
.gallery { display: grid; gap: var(--s2); }
.gallery-pair { display: grid; gap: var(--s2); }
@media (min-width: 700px) { .gallery-pair { grid-template-columns: 1fr 1fr; } }

/* Tabelas */
.table-wrap { overflow-x: auto; }
.price-table th, .price-table td { text-align: left; padding: 1rem 1.5rem 1rem 0; border-bottom: 1px solid var(--line); font-size: 1.0625rem; }
.price-table thead th { font-weight: 600; color: var(--brown); border-bottom: 2px solid var(--gold); }
.price-table tbody th { font-weight: 500; color: var(--brown); }
.price-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-block + .price-block { margin-top: var(--s10); }
.price-block h2 a { text-decoration: none; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; min-height: 56px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h2, .faq-item summary h3 { font-size: 1.1875rem; font-weight: 500; line-height: 1.45; }
.faq-item summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(45deg) translateY(-4px); transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(-135deg) translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .faq-item summary::after, .site-footer a { transition: none; } }
.faq-item p { padding-bottom: var(--s3); }
.after-faq { margin-top: var(--s4); }

/* Dicas (Autódromo) */
.tips { display: grid; gap: var(--s6) var(--s8); }
@media (min-width: 800px) { .tips { grid-template-columns: 1fr 1fr; } }
.tip h3 { margin-bottom: var(--s2); font-weight: 500; }
.tip p { font-size: var(--t-large); }

/* Faixa de reserva (no lugar da faixa de newsletter da referência) */
.closing { background: var(--band); padding-block: var(--s8); }
.closing-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); }
.closing h2 { color: #2B2218; margin-bottom: var(--s2); }
.closing p { color: #3A2E1B; font-size: var(--t-large); margin: 0; max-width: 44ch; }

/* Rodapé escuro */
.site-footer { background: var(--night); color: var(--night-muted); padding-block: var(--s10) var(--s4); }
.site-footer a { color: var(--night-text); text-decoration: none; font-weight: 400; }
.site-footer a { transition: color .15s ease; }
.site-footer a:hover, .site-footer a:focus-visible { color: #C9A55A; text-decoration: none; }
.site-footer .icon { color: #C9A55A; }
.footer-grid { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: auto 1fr 1.3fr 1.2fr; gap: var(--s8); } }
.footer-brand img { width: 120px; }
.footer-title { color: var(--night-text); font-size: 1rem; font-weight: 600; margin-bottom: var(--s3); }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li + li { margin-top: .75rem; }
.footer-contact li, .footer-address { display: flex; gap: .75rem; align-items: flex-start; }
.footer-contact .icon, .footer-address .icon { margin-top: .2rem; }
.footer-address { margin-bottom: var(--s2); }
.footer-map { font-weight: 500; color: #C9A55A !important; }
.footer-map:hover { color: var(--night-text) !important; }
.footer-bottom { margin-top: var(--s8); padding-top: var(--s3); border-top: 1px solid #36312B; display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.footer-bottom p { margin: 0; font-size: 1rem; }
.social { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid #4A443C; border-radius: 50%; }


/* Celular: duas colunas para encurtar a rolagem */
@media (max-width: 600px) {
  .amen, .body-large + .amen { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s3); }
  .places { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s2); }
  .place h3 { font-size: 1.0625rem; }
  .place p { font-size: 1rem; }
  .section { padding-block: var(--s8); }
  .suite-row + .suite-row { margin-top: var(--s8); }
}

/* Seção escura de comodidades: caixas só com linha, 4 + 3 */
.section.dark { background: var(--night); }
.section.dark h2 { color: var(--night-text); }
.section.dark .section-intro p { color: var(--night-muted); }
.section.dark .ruled::after { background: #C9A55A; }
.amen-boxed { display: grid; gap: var(--s2); grid-template-columns: repeat(12, 1fr); }
.amen-boxed li { grid-column: span 3; border: 1px solid #4A443C; border-radius: var(--radius); padding: var(--s4) var(--s3); gap: var(--s3); color: var(--night-text); font-size: 1.0625rem; min-height: 168px; }
.amen-boxed li:nth-child(n+5) { grid-column: span 4; }
.amen-boxed .icon { color: #C9A55A; }
@media (max-width: 900px) {
  .amen-boxed li, .amen-boxed li:nth-child(n+5) { grid-column: span 6; }
  .amen-boxed li:last-child { grid-column: span 12; }
}
@media (max-width: 600px) {
  .amen-boxed { grid-template-columns: repeat(12, 1fr); gap: var(--s2); }
  .amen-boxed li { min-height: 0; padding: var(--s3) var(--s2); font-size: 1rem; }
}

/* Variante clara das caixas (páginas internas) */
.suite-intro { margin-bottom: var(--s8); }
.amen-light li { border-color: var(--line); color: var(--brown); background: transparent; min-height: 152px; }
.amen-light .icon { color: var(--gold); }
.amen-8 li, .amen-8 li:nth-child(n+5) { grid-column: span 3; }
@media (max-width: 900px) {
  .amen-8 li, .amen-8 li:nth-child(n+5), .amen-8 li:last-child { grid-column: span 6; }
}

/* Cartões com contorno: ícone, título e texto curto */
.cards { display: grid; gap: var(--s2); grid-template-columns: repeat(4, 1fr); }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4) var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.card h3 { font-size: 1.25rem; font-weight: 500; margin-top: var(--s1); }
.card p { margin: 0; }
.section.tone .card { border-color: #D6CCBC; }
@media (max-width: 1000px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }

/* Seta em todos os links de conteúdo (no lugar do sublinhado) */
.text-link { display: inline-flex; align-items: center; gap: .4em; }
main a:not(.btn):not(.text-link):not(.nav-reserve)::after { display: inline-block; margin-left: .35em; vertical-align: -.12em; }
.address-big a { font-weight: inherit; }
.text-link::after,
main a:not(.btn):not(.text-link):not(.nav-reserve)::after {
  content: ""; width: .95em; height: .95em; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s ease;
}
main .address-big a::after { width: .55em; height: .55em; margin-left: .25em; vertical-align: .05em; }
.text-link { font-weight: 600; }
a:hover::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { a::after { transition: none; } a:hover::after { transform: none; } }

main h1 a::after, main h2 a::after, main h3 a::after { display: none !important; }

/* Fotos reais */
.ph.has-img { background: var(--photo); }
.ph.has-img picture, .ph.has-img img { display: block; width: 100%; height: 100%; }
.ph.has-img img { object-fit: cover; object-position: center; }
.mosaic .m-main.has-img { min-height: 100%; }
.places { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .places { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .places { grid-template-columns: 1fr; } }
.mosaic-page { grid-template-columns: 2fr 1fr; }
.mosaic-page .m-a, .mosaic-page .m-b { aspect-ratio: 4 / 3; }

/* Mosaico: a foto principal sempre acompanha a altura das duas menores, seja qual for o formato dela */
.mosaic .m-main.has-img { position: relative; aspect-ratio: auto; min-height: 0; height: 100%; }
.mosaic .m-main.has-img picture { position: absolute; inset: 0; }
@media (max-width: 600px) {
  .mosaic .m-main.has-img { aspect-ratio: 3 / 2; height: auto; }
}
@media (max-width: 600px) {
  .mosaic-page { grid-template-columns: 1fr 1fr; }
  .mosaic .m-a, .mosaic .m-b, .mosaic-page .m-a, .mosaic-page .m-b { aspect-ratio: 4 / 3; }
}
.ph.has-img img[src*="campainha-recepcao"] { object-position: center 30%; }

/* WhatsApp flutuante: verde oficial, contorno branco e etiqueta no desktop */
.wa-float { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.wa-icon { position: relative; width: 64px; height: 64px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; border: 3px solid #fff; box-shadow: 0 10px 28px rgb(18 60 34 / .28), 0 2px 6px rgb(0 0 0 / .12); transition: transform .2s ease, background .2s ease; }
.wa-icon svg { width: 32px; height: 32px; }
.wa-label { display: none; background: #fff; color: var(--brown); padding: .625rem 1rem; border-radius: 12px; box-shadow: 0 8px 24px rgb(0 0 0 / .12); line-height: 1.3; text-align: right; }
.wa-label strong { display: block; font-size: .9375rem; font-weight: 600; }
.wa-label small { display: block; font-size: .8125rem; color: var(--text); font-weight: 400; }
.wa-float:hover .wa-icon, .wa-float:focus-visible .wa-icon { transform: scale(1.06); background: #1FBE5C; }
.wa-float:hover .wa-label strong { color: var(--bronze); }
@media (min-width: 900px) { .wa-label { display: block; } }
/* um único chamado de atenção, alguns segundos após abrir a página */
.wa-icon::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #25D366; opacity: 0; animation: wa-ping 1.6s ease-out 3s 2; pointer-events: none; }
@keyframes wa-ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wa-icon::after { animation: none; } .wa-icon { transition: none; } }

/* Crédito de desenvolvimento no rodapé */
.footer-bottom .credit { margin-left: auto; }
.footer-bottom .credit a { color: var(--night-text); font-weight: 600; }
.footer-bottom .credit a:hover { color: #C9A55A; }
@media (max-width: 600px) { .footer-bottom .credit { margin-left: 0; } }
.site-footer { padding-bottom: 6.5rem; }

/* Celular: áreas de toque com no mínimo 44px (WCAG 2.5.5) */
@media (max-width: 900px) {
  .footer-list a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-list li + li { margin-top: 0; }
  .footer-contact li { align-items: center; }
  .text-link { min-height: 44px; }
  h2 a, h3 a { display: inline-block; padding-block: .35rem; }
  .brand { display: inline-flex; align-items: center; min-height: 48px; }
  .footer-bottom .credit a, .footer-map { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Celular: botões em linha única e largura total; sem seta solta no endereço grande */
@media (max-width: 600px) {
  .btn { width: 100%; padding: 0 1.25rem; font-size: .875rem; letter-spacing: .06em; white-space: nowrap; }
  .actions { flex-direction: column; align-items: stretch; gap: var(--s2); }
  .actions .text-link { align-self: flex-start; }
  main .address-big a::after { display: none; }
  .amen-boxed li { padding: var(--s3) .875rem; font-size: .9375rem; hyphens: manual; }
}

/* Aviso de feriado junto das tabelas de preço */
.price-note { display: flex; gap: .625rem; align-items: flex-start; margin-top: var(--s3); color: var(--text); }
.price-note .icon { margin-top: .2rem; }
.price-note a { font-weight: 600; }
.price-note a::after { display: none !important; }