/*
 * Guia de Guarapari — Praias em Guarapari
 * v19.0.0 — contrato visual público canônico
 *
 * Arquitetura:
 * 1. Usa os tokens do Public Design System (--gg-*).
 * 2. Usa o mesmo shell de 1200px/gutter das páginas públicas.
 * 3. Todos os componentes são namespaced em .guia-praias-page.
 * 4. Não redefine .guia-btn, .guia-section, .guia-share-btn, .container etc.
 * 5. O atributo HTML [hidden] é respeitado pelo contrato global do tema.
 */

main.guia-praias-page,
main.guia-praias-page * {
    box-sizing: border-box;
}

main.guia-praias-page {
    --praias-hero-focal-x: 50%;
    --praias-hero-focal-y: 50%;
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: clip;
    color: var(--gg-text);
    background: var(--gg-surface);
}

main.guia-praias-page .guia-praias-shell {
    width: min(var(--gg-container), calc(100% - (var(--gg-gutter) * 2)));
    max-width: var(--gg-container);
    margin-inline: auto;
}

/* ==========================================================
   HERO
   ========================================================== */

main.guia-praias-page .guia-praias-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    width: 100%;
    min-width: 0;
    height: 350px;
    min-height: 350px;
    max-height: 350px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--gg-ink);
}

main.guia-praias-page .guia-praias-hero__media,
main.guia-praias-page .guia-praias-hero__media picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

main.guia-praias-page .guia-praias-hero__media {
    z-index: 0;
    background: var(--gg-ink);
}

main.guia-praias-page .guia-praias-hero__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100% !important;
    max-width: none;
    min-width: 100%;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: var(--praias-hero-focal-x) var(--praias-hero-focal-y);
}

main.guia-praias-page .guia-praias-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(4, 15, 27, .03) 0%,
        rgba(4, 16, 29, .08) 24%,
        rgba(5, 18, 32, .20) 43%,
        rgba(6, 21, 37, .46) 64%,
        rgba(7, 24, 42, .74) 82%,
        rgba(8, 27, 46, .91) 100%
    );
}

main.guia-praias-page .guia-praias-hero__content {
    position: relative;
    z-index: 2;
    width: min(var(--gg-container), calc(100% - (var(--gg-gutter) * 2)));
    min-width: 0;
    margin-inline: auto;
    padding: 0 0 28px;
    color: #fff;
}

main.guia-praias-page .guia-praias-hero__inner {
    display: grid;
    grid-template-columns: minmax(270px, .78fr) minmax(430px, 1.22fr);
    align-items: end;
    gap: clamp(36px, 5vw, 72px);
    width: 100%;
    min-width: 0;
}

main.guia-praias-page .guia-praias-hero__copy,
main.guia-praias-page .guia-praias-hero__tools {
    min-width: 0;
}

main.guia-praias-page .guia-praias-hero h1 {
    width: 100%;
    max-width: 560px;
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: var(--gg-font-sans);
    font-size: clamp(2.35rem, 3.8vw, 3.3rem);
    font-weight: 760;
    line-height: .96;
    letter-spacing: -.047em;
    text-wrap: balance;
    text-shadow: 0 1px 18px rgba(0, 0, 0, .08);
}

main.guia-praias-page .guia-praias-lead {
    width: 100%;
    max-width: 430px;
    margin: 13px 0 0;
    padding: 0;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(.98rem, 1.35vw, 1.08rem);
    font-weight: 400;
    line-height: 1.48;
    letter-spacing: -.01em;
}

main.guia-praias-page .guia-praias-hero__tools {
    width: 100%;
}

main.guia-praias-page .guia-praias-search-wrapper {
    width: 100%;
    max-width: 650px;
    margin: 0;
}

main.guia-praias-page .guia-praias-search-input {
    appearance: none;
    display: block;
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: var(--gg-r-sm);
    outline: 0;
    background: rgba(255, 255, 255, .975);
    color: var(--gg-ink);
    font: 500 16px/1.2 var(--gg-font-sans);
    box-shadow: 0 8px 26px rgba(2, 12, 24, .08);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

main.guia-praias-page .guia-praias-search-input::placeholder {
    color: #758293;
    opacity: 1;
}

main.guia-praias-page .guia-praias-search-input:hover,
main.guia-praias-page .guia-praias-search-input:focus-visible {
    background: #fff;
}

main.guia-praias-page .guia-praias-search-input:focus-visible {
    border-color: #fff;
    box-shadow: 0 0 0 4px rgba(125, 180, 255, .28), 0 10px 28px rgba(2, 12, 24, .10);
}

/* Chips: componente próprio da página; não usa .filter-btn/.guia-btn. */
main.guia-praias-page .guia-praias-filters-wrapper {
    width: 100%;
    margin: 14px 0 0;
    overflow: hidden;
}

main.guia-praias-page .guia-praias-filters {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    gap: 8px;
    margin: 0;
    padding: 2px 0 5px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

main.guia-praias-page .guia-praias-filters::-webkit-scrollbar { display: none; }

main.guia-praias-page .guia-praias-chip {
    appearance: none;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 999px;
    background: rgba(7, 24, 42, .34);
    color: rgba(255, 255, 255, .96);
    font: 650 14px/1 var(--gg-font-sans);
    white-space: nowrap;
    cursor: pointer;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .12s ease;
}

main.guia-praias-page .guia-praias-chip:hover {
    border-color: rgba(255, 255, 255, .66);
    background: rgba(7, 24, 42, .48);
}

main.guia-praias-page .guia-praias-chip:active { transform: scale(.975); }

main.guia-praias-page .guia-praias-chip.is-active,
main.guia-praias-page .guia-praias-chip[aria-pressed="true"] {
    border-color: #fff;
    background: #fff;
    color: var(--gg-ink);
}

main.guia-praias-page .guia-praias-chip:focus-visible {
    outline: 3px solid rgba(125, 180, 255, .90);
    outline-offset: 2px;
}

main.guia-praias-page .guia-praias-filter-status {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    min-height: 30px;
    gap: 12px;
    margin: 7px 0 0;
    color: rgba(255, 255, 255, .72);
    font-size:14px;
    line-height: 1.4;
}

main.guia-praias-page .guia-praias-filter-status p { margin: 0; }
main.guia-praias-page .guia-praias-filter-status strong { color: rgba(255, 255, 255, .96); }

main.guia-praias-page .guia-praias-clear {
    appearance: none;
    min-height: 32px;
    margin: 0;
    padding: 4px 2px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .92);
    font: 650 14px/1.2 var(--gg-font-sans);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
}

main.guia-praias-page .guia-praias-clear:hover { color: #fff; }

/* ==========================================================
   INTRO / SEÇÕES
   ========================================================== */

main.guia-praias-page .guia-praias-intro {
    width: 100%;
    margin: 0;
    padding: 30px 0 34px;
    background: var(--gg-surface);
    border-bottom: 1px solid var(--gg-line);
}

main.guia-praias-page .guia-praias-intro__inner > p {
    width: min(820px, 100%);
    margin: 0;
    color: var(--gg-muted);
    font-size: var(--gg-body);
    line-height: 1.7;
}

main.guia-praias-page .guia-praias-section {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

main.guia-praias-page .guia-praias-selection {
    padding: 58px 0 64px;
    background: var(--gg-surface);
}

main.guia-praias-page .guia-praias-section-alt {
    background: var(--gg-surface-soft);
}

main.guia-praias-page .guia-praias-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 26px;
}

main.guia-praias-page .guia-praias-section-head h2 {
    margin: 0;
    padding: 0;
    color: var(--gg-ink);
    font: 730 clamp(1.75rem, 3vw, 2.25rem)/1.14 var(--gg-font-sans);
    letter-spacing: -.035em;
    text-wrap: balance;
}

main.guia-praias-page .guia-praias-section-head p {
    max-width: 460px;
    margin: 0;
    color: var(--gg-muted);
    font: 400 .875rem/1.55 var(--gg-font-sans);
    text-align: right;
}

/* ==========================================================
   SELEÇÃO EDITORIAL
   ========================================================== */

main.guia-praias-page .guia-praias-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: 24px;
    width: 100%;
    min-width: 0;
}

main.guia-praias-page .guia-praias-feature-wrapper,
main.guia-praias-page .guia-praias-selection-side {
    min-width: 0;
}

main.guia-praias-page .guia-praias-feature-card {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(260px, .95fr);
    width: 100%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    background: var(--gg-surface);
    border: 1px solid var(--gg-line);
    border-radius: 6px;
    box-shadow: var(--gg-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

main.guia-praias-page .guia-praias-feature-card:hover {
    color: inherit;
    text-decoration: none;
    transform: translateY(-2px);
    border-color: #d5dce5;
    box-shadow: 0 16px 38px rgba(15, 29, 51, .10);
}

main.guia-praias-page .guia-praias-feature-media {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    background: var(--gg-surface-soft);
}

main.guia-praias-page .guia-praias-feature-media img {
    display: block;
    width: 100%;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
}

main.guia-praias-page .guia-praias-feature-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    padding: clamp(24px, 3vw, 38px);
}

main.guia-praias-page .guia-praias-feature-body h3 {
    margin: 0 0 9px;
    color: var(--gg-ink);
    font: 700 clamp(1.55rem, 2.6vw, 2.25rem)/1.08 var(--gg-font-sans);
    letter-spacing: -.035em;
}

main.guia-praias-page .guia-praias-feature-body p {
    margin: 0 0 13px;
    color: var(--gg-muted);
    font-size: .9375rem;
    line-height: 1.65;
}

main.guia-praias-page .guia-praias-feature-body p.guia-praias-benefit {
    margin-bottom: 10px;
    color: var(--gg-primary);
    font-size:14px;
    font-weight: 700;
}

main.guia-praias-page .guia-praias-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 8px;
    padding: 0 17px;
    border: 1px solid var(--gg-primary);
    border-radius: var(--gg-r-sm);
    background: var(--gg-primary);
    color: #fff;
    font: 700 0.875rem/1 var(--gg-font-sans);
    text-decoration: none;
    box-shadow: none;
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

main.guia-praias-page .guia-praias-cta:hover {
    border-color: var(--gg-primary-dark);
    background: var(--gg-primary-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

main.guia-praias-page .guia-praias-selection-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

main.guia-praias-page .guia-praias-mini-list {
    display: grid;
    gap: 8px;
}

main.guia-praias-page .guia-praias-mini-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding: 15px 16px;
    color: inherit;
    text-decoration: none;
    background: var(--gg-surface);
    border: 1px solid var(--gg-line);
    border-radius: var(--gg-r-md);
    transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

main.guia-praias-page .guia-praias-mini-item:hover {
    color: inherit;
    text-decoration: none;
    background: #fbfcfd;
    border-color: #cfd8e3;
    transform: translateX(2px);
}

main.guia-praias-page .guia-praias-mini-info {
    display: grid;
    gap: 3px;
    min-width: 0;
}

main.guia-praias-page .guia-praias-mini-title {
    overflow: hidden;
    color: var(--gg-ink);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

main.guia-praias-page .guia-praias-mini-attr {
    color: var(--gg-muted);
    font-size:14px;
    line-height: 1.3;
}

main.guia-praias-page .guia-praias-mini-arrow {
    flex: 0 0 auto;
    color: var(--gg-primary);
    font-size: 18px;
    line-height: 1;
}

main.guia-praias-page .guia-praias-selection-more {
    margin-top: 4px;
    border: 1px solid var(--gg-line);
    border-radius: var(--gg-r-md);
    background: var(--gg-surface);
}

main.guia-praias-page .guia-praias-selection-more summary {
    padding: 13px 16px;
    color: var(--gg-primary);
    font-size:14px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

main.guia-praias-page .guia-praias-selection-more summary::-webkit-details-marker { display: none; }
main.guia-praias-page .guia-praias-selection-more__open { display: none; }
main.guia-praias-page .guia-praias-selection-more[open] .guia-praias-selection-more__closed { display: none; }
main.guia-praias-page .guia-praias-selection-more[open] .guia-praias-selection-more__open { display: inline; }
main.guia-praias-page .guia-praias-selection-more .guia-praias-mini-list--more { padding: 0 10px 10px; }

/* ==========================================================
   DIRETÓRIO / REGIÕES / CARDS
   ========================================================== */

main.guia-praias-page #praias-lista {
    padding: 60px 0 70px;
}

main.guia-praias-page .guia-praias-region {
    margin: 0 0 42px;
    padding: 0;
}

main.guia-praias-page .guia-praias-region:last-child { margin-bottom: 0; }

main.guia-praias-page .guia-praias-region__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

main.guia-praias-page .guia-praias-region__head h2 {
    margin: 0;
    color: var(--gg-ink);
    font: 730 clamp(1.35rem, 2.2vw, 1.8rem)/1.15 var(--gg-font-sans);
    letter-spacing: -.025em;
}

main.guia-praias-page .guia-praias-region__head h2 a {
    color: inherit;
    text-decoration: none;
}

main.guia-praias-page .guia-praias-region__head h2 a:hover {
    color: var(--gg-primary);
    text-decoration: none;
}

main.guia-praias-page .guia-praias-region__head > span {
    flex: 0 0 auto;
    color: var(--gg-muted);
    font-size:14px;
    font-weight: 600;
}

main.guia-praias-page .guia-praias-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    min-width: 0;
}

main.guia-praias-page .guia-praias-card {
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background: var(--gg-surface);
    border: 1px solid var(--gg-line);
    border-radius: 6px;
    box-shadow: var(--gg-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

main.guia-praias-page .guia-praias-card:hover {
    transform: translateY(-2px);
    border-color: #d3dbe5;
    box-shadow: 0 12px 28px rgba(15, 29, 51, .09);
}

main.guia-praias-page .guia-praias-card > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

main.guia-praias-page .guia-praias-card > a:hover {
    color: inherit;
    text-decoration: none;
}

main.guia-praias-page .guia-praias-card__media {
    position: relative;
    height: 205px;
    min-height: 205px;
    overflow: hidden;
    background: var(--gg-surface-soft);
}

main.guia-praias-page .guia-praias-card__media img {
    display: block;
    width: 100%;
    height: 100% !important;
    max-width: none;
    margin: 0;
    object-fit: cover;
    object-position: center;
    transition: transform .28s ease;
}

main.guia-praias-page .guia-praias-card:hover .guia-praias-card__media img { transform: scale(1.025); }

main.guia-praias-page .guia-praias-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    max-width: calc(100% - 24px);
    overflow: hidden;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(11, 31, 51, .82);
    color: #fff;
    font-size:14px;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

main.guia-praias-page .guia-praias-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #dfe7ed, #f3f6f8);
    color: #7a8795;
    font-size: 18px;
    font-weight: 700;
}

main.guia-praias-page .guia-praias-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: 17px 17px 19px;
}

main.guia-praias-page .guia-praias-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

main.guia-praias-page .guia-praias-card__top h3 {
    min-width: 0;
    margin: 0;
    color: var(--gg-ink);
    font: 700 1.0625rem/1.25 var(--gg-font-sans);
    letter-spacing: -.015em;
}

main.guia-praias-page .guia-praias-rating {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--gg-surface-soft);
    color: #344054;
    font-size:14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

main.guia-praias-page .guia-praias-rating small {
    color: #7b8794;
    font-size:14px;
    font-weight: 500;
}

main.guia-praias-page .guia-praias-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

main.guia-praias-page .guia-praias-tag {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 8px;
    border: 1px solid var(--gg-line);
    border-radius: 999px;
    background: #f8fafb;
    color: #526071;
    font-size:14px;
    font-weight: 650;
    line-height: 1;
}

main.guia-praias-page .guia-praias-review {
    min-width: 0;
    margin: 14px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid #e8edf3;
}

main.guia-praias-page .guia-praias-review blockquote {
    display: -webkit-box;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    color: #344054;
    font: italic 400 .9375rem/1.62 var(--gg-font-sans);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

main.guia-praias-page .guia-praias-review figcaption {
    margin-top: 10px;
    color: var(--gg-muted);
    font: 600 0.875rem/1.4 var(--gg-font-sans);
}

main.guia-praias-page .guia-praias-review figcaption::before { content: "— "; font-weight: 400; }

/* ==========================================================
   SHARE / CONTINUE — namespaced para não colidir com o tema
   ========================================================== */

main.guia-praias-page .guia-praias-share-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 56px;
    padding: 26px 28px;
    border: 1px solid var(--gg-line);
    border-radius: var(--gg-r-md);
    background: var(--gg-surface);
    box-shadow: var(--gg-shadow-sm);
}

main.guia-praias-page .guia-praias-share-box > div:first-child { min-width: 0; }

main.guia-praias-page .guia-praias-share-box h2 {
    margin: 0 0 5px;
    color: var(--gg-ink);
    font: 700 1.1875rem/1.2 var(--gg-font-sans);
}

main.guia-praias-page .guia-praias-share-box p {
    margin: 0;
    color: var(--gg-muted);
    font-size:14px;
    line-height: 1.5;
}

main.guia-praias-page .guia-praias-share-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

main.guia-praias-page .guia-praias-share-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 38px;
    width: auto;
    height: auto;
    padding: 8px 12px;
    border: 1px solid var(--gg-line);
    border-radius: var(--gg-r-sm);
    background: var(--gg-surface);
    color: var(--gg-text);
    font: 650 0.875rem/1 var(--gg-font-sans);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease;
}

main.guia-praias-page .guia-praias-share-btn:hover {
    border-color: #b9c5d2;
    background: var(--gg-surface-soft);
    color: var(--gg-primary);
    transform: translateY(-1px);
}

main.guia-praias-page .guia-praias-share-feedback {
    width: 100%;
    margin: 10px 0 0;
}

main.guia-praias-page .guia-praias-continue {
    margin-top: 46px;
    padding-top: 32px;
    border-top: 1px solid var(--gg-line);
}

main.guia-praias-page .guia-praias-continue h2 {
    margin: 0 0 15px;
    color: var(--gg-ink);
    font: 700 1.1875rem/1.2 var(--gg-font-sans);
}

main.guia-praias-page .guia-praias-continue-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

main.guia-praias-page .guia-praias-continue-links a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid var(--gg-line);
    border-radius: var(--gg-r-sm);
    background: var(--gg-surface);
    color: var(--gg-text);
    font: 650 0.875rem/1 var(--gg-font-sans);
    text-decoration: none;
    transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

main.guia-praias-page .guia-praias-continue-links a:hover {
    border-color: #b9c5d2;
    background: var(--gg-surface-soft);
    color: var(--gg-primary);
    text-decoration: none;
}

/* Empty state: hidden means hidden, inclusive of legacy/global display rules. */
main.guia-praias-page .guia-praias-empty-state {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 48px 20px;
    border: 1px dashed #cfd8e3;
    border-radius: var(--gg-r-md);
    background: var(--gg-surface);
    color: var(--gg-muted);
    text-align: center;
}

main.guia-praias-page .guia-praias-empty-state[hidden] {
    display: none !important;
}

main.guia-praias-page .guia-praias-empty-state strong { color: var(--gg-ink); }

main.guia-praias-page .guia-praias-empty-state button {
    appearance: none;
    margin-top: 6px;
    padding: 8px 12px;
    border: 1px solid var(--gg-line);
    border-radius: var(--gg-r-sm);
    background: var(--gg-surface);
    color: var(--gg-primary);
    font: 650 0.875rem/1 var(--gg-font-sans);
    cursor: pointer;
}

/* ==========================================================
   RESPONSIVIDADE — mesmos limites estruturais do sistema público
   ========================================================== */

@media (max-width: 1024px) {
    main.guia-praias-page .guia-praias-hero {
        height: 360px;
        min-height: 360px;
        max-height: 360px;
        --praias-hero-focal-y: 48%;
    }

    main.guia-praias-page .guia-praias-hero__inner { display: block; }
    main.guia-praias-page .guia-praias-hero__copy { max-width: 600px; }
    main.guia-praias-page .guia-praias-hero__tools { max-width: 620px; margin-top: 19px; }
    main.guia-praias-page .guia-praias-hero h1 { max-width: 540px; font-size: clamp(2.15rem, 6.8vw, 3rem); }
    main.guia-praias-page .guia-praias-lead { margin-top: 9px; }
    main.guia-praias-page .guia-praias-top-grid { grid-template-columns: 1fr; }
    main.guia-praias-page .guia-praias-feature-card { grid-template-columns: 1.1fr .9fr; }
    main.guia-praias-page .guia-praias-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    main.guia-praias-page .guia-praias-share-box { align-items: flex-start; flex-direction: column; }
    main.guia-praias-page .guia-praias-share-buttons { justify-content: flex-start; }
}

@media (max-width: 768px) {
    /* Mobile: mesmo princípio editorial da Home — fotografia full-bleed + conteúdo ancorado no rodapé. */
    main.guia-praias-page .guia-praias-hero {
        display:flex;
        align-items:flex-end;
        height:clamp(340px,92vw,390px);
        min-height:340px;
        max-height:390px;
        background:var(--gg-ink);
        overflow:hidden;
    }
    main.guia-praias-page .guia-praias-hero__media,
    main.guia-praias-page .guia-praias-hero__media picture {
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
    }
    main.guia-praias-page .guia-praias-hero__media img {
        position:absolute;
        inset:0;
        width:100%;
        height:100% !important;
        min-width:100%;
        object-fit:cover;
        object-position:50% 48%;
    }
    main.guia-praias-page .guia-praias-hero__overlay {
        inset:0;
        height:auto;
        background:linear-gradient(
            180deg,
            rgba(4,15,27,.02) 0%,
            rgba(4,15,27,.06) 30%,
            rgba(5,18,32,.22) 48%,
            rgba(6,21,37,.68) 70%,
            rgba(7,24,42,.96) 100%
        );
    }
    main.guia-praias-page .guia-praias-hero__content {
        position:relative;
        z-index:2;
        width:min(var(--gg-container),calc(100% - (var(--gg-gutter) * 2)));
        padding:0 0 24px;
        background:transparent;
    }
    main.guia-praias-page .guia-praias-hero__inner {
        display:block;
        width:100%;
        margin:0;
    }
    main.guia-praias-page .guia-praias-hero__copy { max-width:none; }
    main.guia-praias-page .guia-praias-hero h1 {
        max-width:340px;
        font-size:clamp(2.15rem,10.3vw,2.75rem);
        line-height:.98;
        letter-spacing:-.043em;
    }
    main.guia-praias-page .guia-praias-lead {
        max-width:320px;
        margin-top:7px;
        font-size:.94rem;
        line-height:1.42;
    }
    main.guia-praias-page .guia-praias-hero__tools {
        width:100%;
        max-width:none;
        margin-top:17px;
    }
    main.guia-praias-page .guia-praias-search-input {
        height:50px;
        padding-inline:15px;
        border-radius:var(--gg-r-sm);
    }
    main.guia-praias-page .guia-praias-filters-wrapper {
        width:calc(100% + 16px);
        margin-right:-16px;
    }
    main.guia-praias-page .guia-praias-filters {
        padding-right:16px;
        scroll-padding-right:16px;
    }
    main.guia-praias-page .guia-praias-chip {
        min-height:40px;
        padding:8px 14px;
        font-size:14px;
    }
    main.guia-praias-page .guia-praias-filter-status {
        min-height:27px;
        margin-top:5px;
        font-size:14px;
    }
    main.guia-praias-page .guia-praias-intro { padding:24px 0 27px; }
    main.guia-praias-page .guia-praias-intro__inner > p { font-size:.9375rem; line-height:1.62; }
    main.guia-praias-page .guia-praias-selection,
    main.guia-praias-page #praias-lista { padding:42px 0 48px; }
    main.guia-praias-page .guia-praias-section-head { display:block; margin-bottom:20px; }
    main.guia-praias-page .guia-praias-section-head h2 { font-size:var(--gg-h2); }
    main.guia-praias-page .guia-praias-section-head p { max-width:none; margin-top:7px; font-size:14px; text-align:left; }
    main.guia-praias-page .guia-praias-feature-card { grid-template-columns:1fr; }
    main.guia-praias-page .guia-praias-feature-media { min-height:235px; }
    main.guia-praias-page .guia-praias-feature-body { padding:22px 20px 24px; }
    main.guia-praias-page .guia-praias-feature-body h3 { font-size:1.65rem; }
    main.guia-praias-page .guia-praias-card-grid { grid-template-columns:1fr; gap:14px; }
    main.guia-praias-page .guia-praias-card__media { height:210px; min-height:210px; }
    main.guia-praias-page .guia-praias-card__body { padding:16px 17px 17px; }
    main.guia-praias-page .guia-praias-share-box { padding:20px; }
    main.guia-praias-page .guia-praias-share-buttons { width:100%; }
    main.guia-praias-page .guia-praias-share-btn { flex:1 1 calc(50% - 8px); }
    main.guia-praias-page .guia-praias-continue-links { grid-template-columns:1fr; }
}

@media (max-width: 380px) {
    main.guia-praias-page .guia-praias-hero { min-height:420px; }
    main.guia-praias-page .guia-praias-hero h1 { font-size: clamp(2rem, 10vw, 2.4rem); }
    main.guia-praias-page .guia-praias-lead { font-size: .9rem; }
    main.guia-praias-page .guia-praias-card__media { height: 190px; min-height: 190px; }
    main.guia-praias-page .guia-praias-share-btn { flex-basis: calc(50% - 8px); }
}

@media (prefers-reduced-motion: reduce) {
    main.guia-praias-page *,
    main.guia-praias-page *::before,
    main.guia-praias-page *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}