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

.pm-page {
    padding: 24px 0 48px;
}

.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);
}

.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; }