/*
 * Páginas internas do site (sobre, atrações, eventos, galeria, horários, reservas, contato).
 * Depende de site.css (tokens, menu, rodapé, botões). Mobile primeiro.
 * Substitui o antigo styles.css: todo componente de conteúdo usa os tokens (--surface, --line, --primary…).
 */

/* ── Cabeçalho da página ────────────────────────────────────────── */
.page-hero {
    position: relative; padding: calc(var(--nav-h) + 2.2rem) 0 2.2rem; text-align: center; isolation: isolate;
    background: radial-gradient(900px 340px at 50% 0, rgba(255, 107, 0, .22), transparent 70%), radial-gradient(700px 300px at 90% 100%, rgba(139, 92, 246, .18), transparent 70%), var(--bg-2);
    border-bottom: 1px solid var(--line);
}
.page-hero h1 { font-family: 'Montserrat', 'Poppins', sans-serif; font-weight: 900; line-height: 1.1; color: var(--heading); font-size: clamp(1.9rem, 6vw, 3.1rem); margin: 0; }
.page-hero h1 span { color: var(--hl); }
.page-hero p { color: var(--muted); max-width: 36rem; margin: .7rem auto 0; font-size: clamp(.98rem, 2.4vw, 1.1rem); }
.crumbs { display: flex; justify-content: center; gap: .5rem; list-style: none; padding: 0; margin: 0 0 .9rem; font-size: .82rem; color: var(--muted); }
.crumbs a { color: var(--text); text-decoration: none; }
.crumbs a:hover { color: var(--hl); }
.crumbs li + li::before { content: '/'; margin-right: .5rem; opacity: .5; }

.page-section { padding: 2.5rem 0 3.5rem; }
.page-section + .page-section { padding-top: 0; }
@media (min-width: 768px) { .page-section { padding: 3.5rem 0 4.5rem; } }
.block-title { font-family: 'Montserrat', 'Poppins', sans-serif; font-weight: 900; color: var(--heading); font-size: clamp(1.4rem, 4.5vw, 2rem); text-align: center; margin: 0 0 1.5rem; }
.block-title span { color: var(--hl); }
.row > * { min-width: 0; }
.page-section .row { --bs-gutter-y: 1.25rem; }

/* ── Cartões ────────────────────────────────────────────────────── */
.content-card, .base-card, .horario-card, .preco-card, .info-card, .card-contato, .reserva-card, .evento-card, .atracao-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 20px; color: var(--text);
}
.content-card, .base-card, .horario-card, .info-card, .card-contato { padding: 1.4rem; }
.base-card { height: 100%; transition: transform .2s, border-color .2s; }
.hover-effect:hover { transform: translateY(-4px); border-color: rgba(255, 107, 0, .45); }
.content-card h3, .base-card h3, .horario-card h3, .info-card h4, .card-contato h3, .evento-content h3, .atracao-content h3, .preco-header h3 {
    color: var(--heading); font-weight: 700; font-size: 1.15rem; line-height: 1.35; margin: 0 0 .75rem;
}
.content-card h3 i, .base-card h3 i, .horario-card h3 i, .info-card h4 i, .card-contato h3 i { color: var(--hl); margin-right: .5rem; }
.highlight-text { color: var(--accent-text); font-weight: 700; font-size: 1.05rem; }
.highlight-text i { margin-right: .4rem; }
.content-card p, .base-card p, .info-card li, .card-contato p, .evento-content p, .atracao-content p { color: var(--muted); }
.content-card p[style] { text-align: left !important; }
.card-img-wrapper { border-radius: 20px; overflow: hidden; box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }
.card-img-wrapper img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; }

/* listas com check */
.icon-list, .check-list, .preco-lista, .info-card ul { list-style: none; padding: 0; margin: 0; }
.icon-list li, .check-list li, .preco-lista li, .info-card li { display: flex; gap: .6rem; align-items: flex-start; padding: .3rem 0; color: var(--muted); font-size: .95rem; }
.icon-list .fa-check, .check-list .fa-check, .info-card .fa-check { color: var(--ok); margin-top: .35rem; font-size: .8rem; flex: none; }
.preco-lista li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--ok); font-size: .8rem; margin-top: .35rem; flex: none; }
.info-card .fa-tag, .info-card .fa-info-circle { color: var(--hl); }

/* números */
.numero { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: clamp(1.9rem, 6vw, 2.7rem); color: var(--hl); line-height: 1.1; }
.descricao { color: var(--muted); font-size: .92rem; margin-top: .25rem; }
.section-subtitle { color: var(--heading); font-weight: 800; font-size: clamp(1.25rem, 4vw, 1.7rem); }

/* ── Botões das páginas ─────────────────────────────────────────── */
.btn-custom, .btn-contato, .preco-card .btn, .evento-content .btn, .reserva-card .btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .65rem 1.4rem; border-radius: 999px;
    font-weight: 700; font-size: .98rem; text-decoration: none; border: 2px solid transparent; cursor: pointer;
    background: var(--primary); color: var(--on-primary); transition: transform .15s, background .2s;
}
.btn-custom:hover, .btn-contato:hover, .preco-card .btn:hover, .evento-content .btn:hover, .reserva-card .btn-primary:hover { background: var(--primary-hover); color: var(--on-primary); transform: translateY(-2px); }
.btn-contato { background: transparent; color: var(--heading); border-color: rgba(255, 255, 255, .3); min-height: 44px; font-size: .92rem; }
.btn-contato:hover { background: var(--primary); border-color: var(--primary); }
.preco-card .btn { width: 100%; }

/* ── Atrações ───────────────────────────────────────────────────── */
.atracao-card { overflow: hidden; height: 100%; transition: transform .25s, border-color .25s; }
.atracao-card:hover { transform: translateY(-5px); border-color: rgba(255, 107, 0, .45); }
.atracao-img { overflow: hidden; background: var(--surface-2); }
.atracao-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .5s; }
.atracao-card:hover .atracao-img img { transform: scale(1.05); }
.atracao-content { padding: 1.2rem 1.3rem 1.4rem; }
.atracao-content p { margin: 0; font-size: .95rem; }

/* ── Eventos ────────────────────────────────────────────────────── */
.evento-card { overflow: hidden; display: flex; flex-direction: column; padding: 0 !important; box-shadow: none !important; }
.evento-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-radius: 0 !important; }
.evento-content { padding: 1.4rem !important; display: flex; flex-direction: column; flex-grow: 1; }
.evento-content .mt-auto { padding-top: 1.2rem; }
.evento-content .btn { width: 100%; }

/* ── Horários e preços ──────────────────────────────────────────── */
.horario-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: .8rem; }
.periodo { color: var(--muted); }
.hora { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--hl); }
.preco-card { padding: 1.5rem; height: 100%; display: flex; flex-direction: column; transition: transform .25s, border-color .25s; }
.preco-card:hover { transform: translateY(-4px); border-color: rgba(255, 107, 0, .45); }
.preco-header { margin-bottom: .75rem; }
.preco-header p { color: var(--muted); font-size: .85rem; margin: 0; }
.preco-valor { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 2.2rem; color: var(--hl); line-height: 1.2; }
.preco-lista { flex-grow: 1; margin-bottom: 1.2rem; border-top: 1px solid var(--line); padding-top: .8rem; }

/* ── Galeria ────────────────────────────────────────────────────── */
.galeria-filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.5rem !important; }
.galeria-filtros .btn {
    min-height: 44px; padding: .4rem 1.1rem; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--text);
    background: var(--surface); border: 1px solid var(--line);
}
.galeria-filtros .btn:hover { background: var(--surface-2); color: var(--heading); border-color: rgba(255, 255, 255, .3); }
.galeria-filtros .btn.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.galeria-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.galeria-item { position: relative; border-radius: 16px; overflow: hidden; background: var(--surface); aspect-ratio: 1; }
.galeria-item a { display: block; height: 100%; }
.galeria-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.galeria-item:hover img { transform: scale(1.06); }
.galeria-overlay { position: absolute; inset: auto 0 0 0; padding: 1.6rem .8rem .6rem; font-weight: 700; font-size: .85rem; color: #fff; background: linear-gradient(to top, rgba(10, 14, 28, .88), transparent); }
@media (min-width: 768px) { .galeria-grid { grid-template-columns: repeat(3, 1fr); gap: .9rem; } }
@media (min-width: 1200px) { .galeria-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Reservas (formulário) ──────────────────────────────────────── */
.reserva-card { padding: 1.4rem; }
@media (min-width: 768px) { .reserva-card { padding: 2.2rem; } }
.reserva-card h2 { display: none; }  /* o título agora está no cabeçalho da página */
.form-label { color: var(--heading); font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
.reserva-card .form-control, .reserva-card .form-select {
    min-height: 48px; background-color: var(--surface-2); border: 1px solid var(--line); color: var(--heading); border-radius: 12px; font-size: 1rem;
}
.reserva-card .form-control::placeholder { color: #7F86A6; }
.reserva-card .form-control:focus { background-color: var(--surface-2); color: var(--heading); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255, 107, 0, .3); }
.reserva-card option { background: var(--surface); color: var(--heading); }
.reserva-card .form-text { color: var(--muted) !important; font-size: .85rem; }
.reserva-card .btn-primary { width: 100%; min-height: 52px; font-size: 1.02rem; }
.needs-validation.was-validated .form-control:invalid { border-color: var(--bad); }

/* ── Contato ────────────────────────────────────────────────────── */
.contato-grid { display: grid; gap: 1.25rem; }
.contato-info { display: grid; gap: 1rem; align-content: start; }
.card-contato p { margin-bottom: 1rem; color: var(--text); }
.card-contato small { color: var(--muted); }
.botoes-sociais { display: flex; flex-wrap: wrap; gap: .6rem; }
.mapa { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); min-height: 320px; background: var(--surface); }
.mapa iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }
@media (min-width: 992px) { .contato-grid { grid-template-columns: 5fr 7fr; } .mapa, .mapa iframe { min-height: 100%; } }

/* ── Lightbox (galeria): botões legíveis no tema escuro ─────────── */
.lb-data .lb-caption { font-family: 'Poppins', sans-serif; }