/*
 * Hubs de destino, landings por tipo de viaje, sus dos indices y la pagina
 * de credenciales (Fase 4, B7). Misma tipografia, paleta y radios que
 * css/pages/product.css y agents.css (variables de main.css); pesos de fuente
 * solo 400/600/700, las caras de Poppins autoalojadas.
 *
 * Se carga junto a css/pages/listing.css (cabecera de indice, FAQ en
 * <details>, lecturas) y, en las fichas, css/pages/product-lite.css (galeria y
 * barra pegajosa). La tarjeta (.listing-card) y las fichas (.hub-chip) viven
 * en main.css porque se pintan tambien en paginas que no cargan esta hoja.
 *
 * Movil primero: a 390x844 el heroe deja el boton de cotizar y el compromiso
 * de respuesta en la primera pantalla incluso con el aviso de cookies abajo
 * (imagen 16:9 de 219 px + miga + H1 + entradilla + boton ~ 560 px). Nada
 * cambia de tamano despues de pintarse: sin desplazamiento de maquetacion.
 */

/* ------------------------------------------------------------- heroe */

.hub-hero {
    position: relative;
    margin-bottom: 1.5rem;
    background: linear-gradient(180deg, #f3f6fa 0%, #fff 100%);
    border-bottom: 1px solid #e3e8ee;
}

.hub-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 2.5rem;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

.hub-hero__media {
    margin: 0;
    line-height: 0;
}

.hub-hero__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 14px;
    background: #e9eef3;
}

.hub-hero__caption {
    line-height: 1.4;
    font-size: 0.8125rem;
    color: var(--text-muted, #6c757d);
    margin: 0.5rem 0 0;
}

.hub-hero__body {
    min-width: 0;
}

.hub-hero__body .product-lite-breadcrumb {
    margin-top: 0;
}

.hub-eyebrow {
    margin: 0.5rem 0 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary-color, #004E89);
}

.hub-title {
    font-size: clamp(1.55rem, 2.4vw + 0.8rem, 2.3rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    text-wrap: balance;
}

.hub-lead {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: #4A5561;
    max-width: 60ch;
}

.hub-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 1rem;
}

.hub-hero__cta {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.5rem;
    font-weight: 600;
}

.hub-hero__commitment {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-dark, #2C3E50);
}

/* Centinela de la barra pegajosa: js/pages/product-lite.js observa el primer
   ".tour-hero, .show-hero" y muestra la barra cuando sale por arriba. Aqui es
   un div vacio al final del heroe; product-lite.css le daria altura minima,
   relleno y fondo negro, y esta hoja (cargada despues) lo deja a cero. */
.hub-hero__sentinel {
    display: block;
    position: static;
    min-height: 0;
    height: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    overflow: visible;
}

@media (min-width: 992px) {
    .hub-hero__grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        align-items: center;
        padding-top: 1.5rem;
        padding-bottom: 2rem;
    }

    .hub-hero__body { grid-column: 1; grid-row: 1; }
    .hub-hero__media { grid-column: 2; grid-row: 1; }

    .hub-hero__media img {
        aspect-ratio: 4 / 3;
        max-height: 440px;
    }
}

/* -------------------------------------------------- "En esta pagina"
   Una sola fila que NO envuelve y se desplaza en horizontal. Medido por CDP a
   1366: con envoltura, el cambio de fuente (Poppins llega tras el primer
   pintado) pasaba la lista de una fila a dos y empujaba todo el cuerpo 35 px
   (layout-shift 0,08). Con una fila fija de altura conocida no hay nada que
   empujar. Las etiquetas van recortadas al primer ":" desde la plantilla. */

.hub-jump {
    display: flex;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0 0 1.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #e3e8ee;
    font-size: 0.9rem;
    min-height: 3rem;
}

.hub-jump__title {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--text-muted, #6c757d);
    white-space: nowrap;
}

.hub-jump__list {
    list-style: none;
    margin: 0;
    padding: 0 0 0.25rem;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    /* Senal de que la fila sigue: se difumina por el lado que queda fuera.
       Es solo pintado -no cambia la caja-, asi que no mueve nada ni anade
       el salto de maquetacion que la envoltura costaba a 1366. */
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 3rem), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 3rem), transparent 100%);
}

/* Por debajo de 992 el titulo ocupa su propia linea y la lista se queda con
   el ancho entero de la columna. A 390 px el titulo fijo de 112 px dejaba a
   la lista 233 de los 357 disponibles: un enlace visible de siete. La altura
   sigue siendo conocida (dos filas de alto fijo), asi que no hay nada que
   empujar cuando Poppins termina de cargar. */
@media (max-width: 991.98px) {
    .hub-jump {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .hub-jump__list {
        width: 100%;
    }
}

.hub-jump__list li {
    flex: 0 0 auto;
}

.hub-jump__link {
    display: inline-block;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    color: var(--primary-color, #004E89);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

.hub-jump__link:hover,
.hub-jump__link:focus-visible {
    background: #f3f6fa;
    text-decoration: underline;
}

/* --------------------------------------- indices y credenciales: cabecera
   Los indices y /credenciales no cargan product-lite.css, asi que la miga de
   pan compartida (partials/product-lite-breadcrumb.php) se estila aqui con
   las mismas medidas. Los selectores llevan el prefijo de la pagina para no
   pisar la hoja original cuando las dos se cargan a la vez. */
.hub-index .product-lite-breadcrumb,
.hub--credentials .product-lite-breadcrumb { margin: 0 0 1rem; }

.hub-index .product-lite-breadcrumb-list,
.hub--credentials .product-lite-breadcrumb-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; padding: 0; margin: 0; font-size: 0.9rem; }

.hub-index .product-lite-breadcrumb-item,
.hub--credentials .product-lite-breadcrumb-item { display: flex; align-items: center; gap: 0.5rem; color: #6b7280; }

.hub-index .product-lite-breadcrumb-item + .product-lite-breadcrumb-item::before,
.hub--credentials .product-lite-breadcrumb-item + .product-lite-breadcrumb-item::before { content: "\203A"; color: #9ca3af; }

.hub-index .product-lite-breadcrumb-item a,
.hub--credentials .product-lite-breadcrumb-item a { color: var(--primary-color, #004E89); text-decoration: none; }

.hub-index .product-lite-breadcrumb-item a:hover,
.hub--credentials .product-lite-breadcrumb-item a:hover { text-decoration: underline; }

.hub-index .product-lite-breadcrumb-item [aria-current="page"],
.hub--credentials .product-lite-breadcrumb-item [aria-current="page"] { color: var(--text-dark, #2C3E50); font-weight: 600; }

.hub-page-head {
    max-width: 68ch;
    margin-bottom: 2rem;
}

.hub-page-head .hub-lead {
    margin-bottom: 0;
}

/* ------------------------------------------------------------- cuerpo */

.hub-body {
    padding-bottom: 3rem;
}

.hub-section {
    margin: 2.25rem 0;
}

.hub-section__title {
    font-size: 1.375rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hub-intro {
    font-size: 1.0625rem;
    max-width: 72ch;
}

.hub-intro > :last-child,
.hub-section__body > :last-child {
    margin-bottom: 0;
}

.hub-section__body {
    max-width: 72ch;
}

.hub-section__body h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 1.25rem;
}

.hub-highlights {
    padding-left: 1.25rem;
    max-width: 72ch;
}

.hub-highlights li + li {
    margin-top: 0.35rem;
}

.hub-section__intro {
    max-width: 72ch;
    color: #4A5561;
    margin-bottom: 0.75rem;
}

.hub-section__foot {
    max-width: 72ch;
    margin: 1rem 0 0;
    color: #4A5561;
}

.hub-section__foot a {
    font-weight: 600;
}

/* La rejilla de tarjetas de las fichas (package-card / tour-card) usa las
   columnas de ListingHelper::card(); tres por fila en escritorio como en los
   listados, dos en tableta, una en movil. */
.hub .listing-card-col { display: flex; }

/* La FAQ reutiliza los <details> de listing.css; el titulo de la seccion
   lleva la misma clase que el resto para que la jerarquia visual sea una. */
.hub .listing-section { margin-bottom: 0; }

/* ---------------------------------------------------- datos operativos */

.hub-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.hub-fact {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.6rem;
    padding: 0.85rem 1rem;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    background: #fff;
}

.hub-fact .bi {
    grid-row: 1 / span 2;
    font-size: 1.25rem;
    color: var(--primary-color, #0d6efd);
}

.hub-fact__label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-muted, #6c757d);
}

.hub-fact__value {
    font-weight: 600;
    color: var(--text-dark, #212529);
}

@media (min-width: 576px) {
    .hub-facts { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .hub-facts { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------- fichas
   .hub-chips-block, .hub-chips y .hub-chip estan en main.css (se usan tambien
   en fichas de producto y blog). Aqui solo el ajuste dentro de un hub: el
   bloque de fichas comparte margen con el resto de secciones. */
.hub .hub-chips-block {
    margin: 2.25rem 0;
}

/* ------------------------------------------------------------- CTA */

.hub-cta {
    margin: 2.5rem 0 0;
    padding: 1.75rem 1.25rem;
    border-radius: 16px;
    background: #f3f6fa;
    text-align: center;
}

.hub-cta__title {
    font-size: 1.375rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.hub-cta__note {
    color: var(--text-muted, #6c757d);
    margin-bottom: 1rem;
}

.hub-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.hub-empty {
    padding: 2rem 0;
    color: var(--text-muted, #6c757d);
}

/* ------------------------------------------------------ credenciales */

.cred-facts {
    margin: 0;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.cred-facts__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #e3e8ee;
}

.cred-facts__row:last-child {
    border-bottom: 0;
}

.cred-facts dt {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-muted, #6c757d);
}

.cred-facts dd {
    margin: 0;
    color: var(--text-dark, #212529);
}

.cred-facts__link {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .cred-facts__row {
        grid-template-columns: 15rem 1fr;
        gap: 1rem;
        align-items: baseline;
    }
}

/* --------------------------------------- canal para los botones flotantes
   El boton de WhatsApp (60x60, abajo a la derecha con 20 px de margen) y el
   "volver arriba" son position:fixed y ninguna pagina les reservaba sitio: en
   los hubs y en /credenciales caian sobre las etiquetas y los VALORES de las
   tablas de datos -la licencia, el telefono 24/7, la direccion-, que son el
   argumento entero de estas paginas, no decoracion. Se reservan los 76 px de
   la derecha en las filas de datos por debajo de 992, que es donde el boton
   comparte franja con el texto; en escritorio la columna ya no llega ahi.
   (La franja de "En esta pagina" se resolvio dandole la fila entera.) */
@media (max-width: 991.98px) {
    .cred-facts__row,
    .hub-fact {
        padding-right: 76px;
    }

    /* Las fichas envuelven, asi que la ultima fila puede caer bajo el boton. */
    .hub-chips {
        padding-right: 76px;
    }
}

.cred-steps {
    padding-left: 1.25rem;
    max-width: 72ch;
}

.cred-steps li + li {
    margin-top: 0.5rem;
}

.cred-steps__link {
    margin-left: 0.35rem;
}

.cred-note {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: #f3f6fa;
    font-size: 0.9375rem;
}

.cred-docs {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cred-docs li + li {
    margin-top: 0.4rem;
}

.cred-docs__request {
    margin: 0.75rem 0 0;
    color: #4A5561;
}

/* La barra pegajosa (product-lite.css) reserva su hueco con
   body.has-product-sticky; en escritorio no existe. Aqui solo el hueco del
   boton flotante de WhatsApp para que la ultima seccion no quede debajo. */
@media (max-width: 991.98px) {
    .hub-body { padding-bottom: 4.5rem; }
}

/* La caja de autor del blog (partials/blog-author.php) se estila en
   css/pages/blog.css, que es la hoja que carga el blog; esta hoja no se
   carga alli. La franja "Donde operamos" de la portada usa las clases de
   seccion de css/pages/home.css. */