/* Estilos de las páginas estáticas (pagemaker). */

.pm-page {
    padding: 0;
}

.pm-page--narrow {
    padding-top: 32px;
}

.pm-page img {
    max-width: 100%;
    height: auto;
}

/* Excepción: las imágenes de las cards de los widgets (paquetes, circuitos,
   productos) van en un contenedor de alto fijo con object-fit: deben llenarlo
   (height:100%). La regla responsive de arriba (`.pm-page img`) les pisaría el
   alto por especificidad y dejaría un hueco entre la imagen y el contenido. */
.pm-page .package-card__image,
.pm-page .circuit-image,
.pm-page .prodcard__media img {
    height: 100%;
}

/* ===== Layout hero ===== */
.pm-hero {
    /* Colores del hero: los define el tema de la agencia (agency_theme →
       render_theme_css publica --pm-hero-bg / --pm-hero-text). Fallback al
       default si el dominio no tiene tema. La imagen de portada (inline) gana
       sobre el gradiente por especificidad. */
    background-color: #16213e;
    background-image: var(--pm-hero-bg, none);
    background-size: cover;
    background-position: center;
    color: var(--pm-hero-text, #fff);
    margin-bottom: 10px;
}

.pm-hero__overlay {
    padding: 72px 0;
    background: rgba(0, 0, 0, .35);
}

.pm-hero--image .pm-hero__overlay {
    background: rgba(0, 0, 0, .5);
}

.pm-hero__title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
}

.pm-hero__subtitle {
    font-size: 1.25rem;
    margin: 12px 0 0;
    opacity: .9;
}

/* ===== Bloques prediseñados (pagemaker-blocks.js) ===== */
.pm-block {
    padding: 56px 0;
}

.pm-block-btn {
    background: #c0336d;
    color: #fff;
    border: none;
}

.pm-block-btn:hover {
    background: #a02a5b;
    color: #fff;
}

.pm-block-hero {
    background: #16213e;
    color: #fff;
}

.pm-block-hero__title {
    font-size: 2.4rem;
    font-weight: 700;
}

.pm-block-hero__subtitle {
    font-size: 1.2rem;
    opacity: .9;
    margin: 12px 0 24px;
}

.pm-block-feature {
    padding: 16px;
}

.pm-block-feature__icon {
    font-size: 2rem;
    color: #c0336d;
    margin-bottom: 12px;
}

.pm-block-cta {
    background: #f2e8ee;
}

.pm-block-cta__title {
    margin: 0 0 4px;
}

.pm-block-quote {
    background: #f7f7f9;
    border-left: 4px solid #c0336d;
    padding: 20px;
    border-radius: 6px;
    font-style: italic;
}

.pm-block-quote footer {
    margin-top: 10px;
    font-style: normal;
    font-weight: 600;
    color: #666;
}

/* Widget dentro del hero (debajo del título/subtítulo) */
.pm-hero__widget { margin-top: 22px; }

/* Fecha de actualización (frescura SEO/GEO) al pie del contenido de cada página. */
.pm-updated { text-align: center; color: #8a94a0; font-size: .9rem; margin: 28px 0 0; }

/* Widget "Destinos relacionados": interlinking automático entre hermanos del silo. */
.pm-related { margin: 40px 0 8px; }
.pm-related__title { font-size: 1.35rem; margin: 0 0 16px; }
.pm-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.pm-related__card {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 14px 16px; border: 1px solid #e6e8ec; border-radius: 10px;
    background: #fff; color: var(--brand-ink, #1d2430); text-decoration: none;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pm-related__card:hover {
    border-color: var(--brand-accent, #c0336d);
    box-shadow: 0 4px 14px rgba(0,0,0,.06); transform: translateY(-1px);
    color: var(--brand-ink, #1d2430); text-decoration: none;
}
.pm-related__name { font-weight: 600; }
.pm-related__arrow { color: var(--brand-accent, #c0336d); }

/* Widget "Índice de destinos": landings agrupadas por país (silos SEO/GEO). */
.pm-destinations { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.pm-destinations__group { }
.pm-destinations__country { font-size: 1.05rem; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--brand-accent, #c0336d); }
.pm-destinations__country a { color: var(--brand-ink, #1d2430); text-decoration: none; }
.pm-destinations__country a:hover { color: var(--brand-accent, #c0336d); }
.pm-destinations__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pm-destinations__item {
    display: inline-flex; align-items: center; gap: 8px; color: var(--brand-ink, #1d2430);
    text-decoration: none; padding: 4px 0; transition: color .15s ease, padding-left .15s ease;
}
.pm-destinations__item::before { content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--brand-accent, #c0336d); }
.pm-destinations__item:hover { color: var(--brand-accent, #c0336d); padding-left: 4px; text-decoration: none; }

/* Sección contenedora del índice de destinos (ej. "Viajar con..." en la home). */
.pm-dest-section { max-width: 1140px; margin: 56px auto; padding: 0 16px; }
.pm-dest-section__title { text-align: center; font-size: 1.8rem; margin: 0 0 8px; }
.pm-dest-section__sub { text-align: center; color: #5a6472; margin: 0 0 32px; }