/* Blog: artículos, tarjetas de artículo y paginación del listado. Se carga en todo el sitio,
   así que también lleva los estilos comunes (migas, popups).
   Artículos: textos que antes eran títulos (H2/H3), con el mismo aspecto.
   Los valores salen de los títulos originales de Flatsome; en móvil (≤549px) Flatsome
   reduce h2 y h3, y aquí también. */

/* Migas: lista en lugar de H3 (artículos y páginas con cabecera de banner, como /destinos).
   Fuente, color y sombra, de .banner .cpt-travel-breadcrumb */
.lp-blog-migas ol {
    display: flex;
    flex-wrap: wrap;
    margin: 3.2px 0;
    padding: 0;
    list-style: none;
    line-height: 1;
}
.lp-blog-migas li { margin: 0; }
.lp-blog-migas li + li::before { content: ">"; margin: 0 .3em; }
.lp-blog-migas a { color: inherit; }

/* País sobre el título (antes H2). Fuente y color, de .banner .cpt-travel-category */
.banner p.cpt-travel-category { margin: 7.2px 0; line-height: 1; }

/* «Suscríbete a la newsletter» (antes H3) */
.travel-contact-form .lp-blog-titulo {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
}

/* «Sobre el autor» (antes H3). Margen y peso, de .knowledge-content-autor .cpt-knowledge-about.
   Está dentro de una .row (flex): ocupa toda la fila, como el H3, para que la foto baje */
.knowledge-content-autor p.cpt-knowledge-about {
    flex-basis: 100%;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.6;
}

/* «Próximas salidas» (antes H2). Fuente, de .petrona-title */
.cpt-travel-content .col-inner > p.petrona-title {
    margin: 0 0 10px;
    color: #e3a72c;
    line-height: 1.3;
}

/* «Salidas programadas relacionadas» (antes H2) */
.cpt-travel-content .lp-blog-subtitulo {
    margin: 0 0 12.8px;
    color: #472914;
    font-size: 25.6px;
    font-weight: 600;
    line-height: 1.3;
}

/* Título de las tarjetas del carrusel de viajes relacionados (antes H2) */
.cpt-item p.cpt-subtitle {
    margin: 0 0 10px;
    font-weight: 600;
}

/* Tarjetas de artículo (listado, home, autores): la foto es un <img> con alt, colocado
   como el fondo de antes (cover, centrado), debajo del overlay */
.cpt-item.lp-tarjeta-con-foto { position: relative; overflow: hidden; }
.cpt-item .lp-tarjeta-foto {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}
/* Etiqueta del país o del subtítulo (antes H2). Fuente, de .petrona-title */
.cpt-item p.lp-tarjeta-etiqueta {
    margin: 0 0 10px;
    color: #e3a72c;
    line-height: 1.3;
}
/* Título del artículo en el listado (antes H3, ahora H2): mismo tamaño que antes */
.cpt-item h2.lp-tarjeta-titulo { margin: 0 0 10px; font-size: 1.25rem; font-weight: 600; line-height: normal; }

/* Tarjeta de destino (/destinos): «Viajar a [país]» sigue en H2 con el estilo de
   .petrona-title; el gancho pasa de H3 a párrafo con el mismo aspecto */
.cpt-item h2.lp-tarjeta-titulo-destino { margin: 0 0 10px; line-height: 1.3; }
.cpt-item p.lp-tarjeta-gancho { margin: 0 0 10px; font-weight: 600; line-height: normal; }

/* Página /destinos: textos del contenido de UX Builder que eran títulos (H2/H3).
   Con p. delante: el CSS personalizado del sitio (posterior) tiene .title { font-size: 2rem } */
p.lp-texto-etiqueta { margin: 0 0 10px; color: #e3a72c; line-height: 1.3; }
p.lp-texto-intro { margin: 0 0 10px; font-size: 20px; font-weight: 300; line-height: 1.6; }
p.lp-texto-filtro { margin: 0 0 9px; color: #472914; font-size: 18px; font-weight: 700; line-height: 1.3; }
/* Home, sección «Viajes» para móvil (copia de la de escritorio, que conserva los títulos):
   el titular, con el aspecto del H2 en móvil */
p.lp-texto-titulo { margin: 0 0 9.6px; font-size: 19.2px; font-weight: 600; line-height: 1.3; }

/* Paginación numerada del listado del blog */
/* El CSS personalizado del sitio pone .search-filter-results .pagination en flex */
.search-filter-results nav.lp-paginacion { display: flex; justify-content: center; margin: 30px 0 0; }
.lp-paginacion ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lp-paginacion li { margin: 0; }
.lp-paginacion .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    border: 1px solid #472914;
    border-radius: 4px;
    color: #472914;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
}
.lp-paginacion a.page-numbers:hover,
.lp-paginacion a.page-numbers:focus-visible { background: #e3a72c; border-color: #e3a72c; color: #472914; }
.lp-paginacion .page-numbers.current { background: #472914; color: #fbf6ee; font-weight: 600; }
.lp-paginacion .page-numbers.dots { min-width: 0; border: 0; }
.lp-paginacion .prev span[aria-hidden],
.lp-paginacion .next span[aria-hidden] { font-family: "Petrona", sans-serif; font-size: 22px; font-weight: 600; }
.lp-paginacion .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Popups (Popup Maker) y ventana de acceso: mensajes ocultos que eran H2, H3 y H4.
   Color y alineación, en el style de cada párrafo cuando lo tenía el título */
.pum p.lp-emergente-h2 { margin: 0 0 12.8px; color: #e3a72c; font-size: 25.6px; font-weight: 600; line-height: 1.3; }
.pum p.lp-emergente-h3 { margin: 0 0 10px; font-size: 20px; font-weight: 600; line-height: normal; }
.pum p.lp-emergente-h4 { margin: 0 0 9px; font-size: 18px; font-weight: 600; line-height: normal; }
#login-form-popup p.lp-emergente-h3 { margin: 0 0 10px; color: #e3a72c; font-size: 20px; font-weight: 600; line-height: 1.2; }

@media (max-width: 549px) {
    .travel-contact-form .lp-blog-titulo,
    .knowledge-content-autor p.cpt-knowledge-about { margin-bottom: 8px; font-size: 16px; }
    .cpt-travel-content .lp-blog-subtitulo { margin-bottom: 9.6px; font-size: 19.2px; }
    .pum p.lp-emergente-h2 { margin-bottom: 9.6px; font-size: 19.2px; }
    .pum p.lp-emergente-h3,
    #login-form-popup p.lp-emergente-h3 { margin-bottom: 8px; font-size: 16px; }
}