/* ==========================================================================
   Area de agencias (/es/agencias, /en/agents) — brief 1.2
   Se carga solo en esta pagina, con 'pageStyles' => ['css/pages/agents.css'].
   Usa las variables de main.css (--primary-color, --secondary-color...) para
   no abrir una paleta paralela.
   ========================================================================== */

.agents-page {
    /* Alto de la cabecera fija y de la subnavegacion, medidos en el navegador.
       De estos dos valores dependen el "top" de la barra pegajosa y el freno
       del desplazamiento a las anclas; con un solo sitio donde tocarlos no se
       descuadran. */
    --agents-nav-h: 48px;
    --agents-subnav-h: 57px;
    --agents-border: #dde3ea;
    --agents-alt-bg: #eef2f7;
    --agents-ink-soft: #52616b;
}

@media (min-width: 1024px) {
    .agents-page {
        --agents-nav-h: 56px;
        --agents-subnav-h: 52px;
    }
}

/* ----------------------------------------------------------------- portada */

.agents-hero {
    background: linear-gradient(135deg, #00355F 0%, #004E89 100%);
    color: #fff;
    padding: 1.75rem 0 2rem;
}

/* main.css tine de naranja cualquier "h1" hijo directo de .container y pinta
   los parrafos en gris claro; sobre el azul de la portada eso da un contraste
   que no pasa AA. Estas dos reglas ganan por especificidad (0-2-0). */
.agents-hero .agents-hero__title,
.agents-cta .agents-cta__title {
    color: #fff;
}

.agents-hero p,
.agents-cta p {
    color: #fff;
}

.agents-hero__breadcrumb {
    font-size: 0.8125rem;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.75);
}

.agents-hero__breadcrumb a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.agents-hero__breadcrumb a:hover,
.agents-hero__breadcrumb a:focus {
    color: #fff;
    text-decoration: underline;
}

.agents-hero__breadcrumb span {
    margin-left: 0.35rem;
}

.agents-hero__eyebrow {
    color: var(--accent-color);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.agents-hero .agents-hero__title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.9rem;
    color: #fff;
}

.agents-hero__lead {
    font-size: 1.0625rem;
    max-width: 62ch;
    margin-bottom: 0.75rem;
}

.agents-hero .agents-hero__sub {
    color: rgba(255, 255, 255, 0.85);
    max-width: 68ch;
    font-size: 0.9375rem;
    margin-top: 1.25rem;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .agents-hero { padding: 2.5rem 0 2.75rem; }
    .agents-hero .agents-hero__title { font-size: 2.125rem; }
}

@media (min-width: 1200px) {
    .agents-hero .agents-hero__title { font-size: 2.375rem; }
}

/* Distintivos: datos comprobables, nunca adjetivos. */
.agents-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.agents-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.08);
}

.agents-chips--light .agents-chip {
    border-color: var(--agents-border);
    background: #fff;
    color: var(--text-dark);
}

.agents-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.agents-hero__actions .btn {
    border-radius: 8px;
}

.agents-hero__whatsapp {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    padding: 0.5rem 0;
}

.agents-hero__whatsapp:hover,
.agents-hero__whatsapp:focus {
    color: var(--accent-color);
    text-decoration: underline;
}

/* --------------------------------------------------------- subnavegacion */

.agents-subnav {
    position: sticky;
    top: var(--agents-nav-h);
    /* Por debajo de la barra de navegacion (1020), por encima del contenido. */
    z-index: 1010;
    background: #fff;
    border-bottom: 1px solid var(--agents-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.agents-subnav__list {
    display: flex;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    /* Desplazamiento horizontal nativo: en movil caben tres o cuatro
       secciones y el resto se alcanza arrastrando, sin JavaScript. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.agents-subnav__list::-webkit-scrollbar { display: none; }

.agents-subnav__link {
    display: inline-block;
    white-space: nowrap;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dark);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.agents-subnav__link:hover,
.agents-subnav__link:focus {
    background: var(--agents-alt-bg);
    color: var(--primary-color);
}

/* accessibility.css subraya todos los enlaces con a:not(.btn):not(.nav-link),
   que gana por especificidad. En una barra de pastillas y en las tarjetas de
   circuito el subrayado sobra: ahi el enlace ya se lee como boton. En el texto
   corrido se mantiene, que es lo que esa regla busca. */
.agents-page .agents-subnav .agents-subnav__link,
.agents-page .agents-programmes a {
    text-decoration: none;
}

/* main.css pinta una marca de agua en body::before, position:fixed y
   z-index:0: sin posicionar, el fondo blanco de estas cajas queda POR DEBAJO
   y el logo se transparenta dentro de las fichas. Posicionarlas las devuelve
   por encima, que es lo que hace .card de Bootstrap en el resto del sitio. */
.agents-facts,
.agents-card,
.agents-type,
.agents-rate-section,
.agents-rates__header,
.agents-callout,
.agents-doc,
.agents-faq,
.agents-region,
.agents-programmes a {
    position: relative;
}

/* ---------------------------------------------------------------- secciones */

.agents-section {
    padding: 2.25rem 0;
    background: #fff;
    /* Posicionada por lo mismo que las fichas: si no, la marca de agua del
       body se cuela por encima del fondo de la seccion. */
    position: relative;
    /* El anclaje se detiene bajo la cabecera Y bajo la subnavegacion; con el
       scroll-margin global de 5rem el titulo quedaba tapado. */
    scroll-margin-top: calc(var(--agents-nav-h) + var(--agents-subnav-h) + 8px);
}

/* Bandas alternas. Se calcula con nth-of-type y no con una clase escrita a
   mano porque hay secciones que aparecen y desaparecen segun los datos
   (documentacion, preguntas): con clases fijas, ocultar una dejaba dos bandas
   blancas seguidas. La portada cuenta como seccion 1, asi que las impares son
   las de fondo gris. El cierre tiene su propio fondo y queda excluido. */
.agents-page .agents-section:nth-of-type(odd):not(.agents-cta) {
    background: var(--agents-alt-bg);
}

@media (min-width: 768px) {
    .agents-section { padding: 3rem 0; }
}

.agents-section .section-title {
    margin-bottom: 1.25rem;
}

.agents-section__intro {
    color: var(--agents-ink-soft);
    max-width: 70ch;
    margin-bottom: 1.5rem;
}

.agents-subheading {
    margin-top: 2.25rem;
    margin-bottom: 0.5rem;
}

.agents-more {
    margin: 1.25rem 0 0;
}

.agents-more a {
    font-weight: 600;
    text-decoration: none;
}

.agents-more a:hover,
.agents-more a:focus {
    text-decoration: underline;
}

/* ------------------------------------------------- listas de datos (dl) */

.agents-facts {
    margin: 0;
    border: 1px solid var(--agents-border);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.agents-facts__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--agents-border);
}

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

.agents-facts dt {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--agents-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.agents-facts dd {
    margin: 0;
    color: var(--text-dark);
}

.agents-facts a {
    color: var(--primary-color);
}

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

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

/* ------------------------------------------------------ tarjetas y listas */

.agents-card {
    background: #fff;
    border: 1px solid var(--agents-border);
    border-radius: 12px;
    padding: 1.25rem;
}

.agents-card h3 {
    margin-bottom: 0.85rem;
}

.agents-card--do h3 i { color: #1B7F4B; }
.agents-card--dont h3 i { color: #B3261E; }

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

.agents-list li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.6rem;
    color: var(--text-dark);
}

.agents-list li:last-child { margin-bottom: 0; }

.agents-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary-color);
}

.agents-list--do li::before { background: #1B7F4B; }
.agents-list--dont li::before { background: #B3261E; }

/* --------------------------------------------------------- donde operamos */

/* Rejilla automatica: son siete regiones y su numero cambia con los circuitos
   publicados, asi que no se fija un numero de columnas por breakpoint. */
.agents-regions {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.75rem;
}

.agents-region {
    background: #fff;
    border: 1px solid var(--agents-border);
    border-left: 3px solid var(--primary-color);
    border-radius: 12px;
    padding: 0.9rem 1rem;
}

.agents-region__name {
    margin: 0 0 0.2rem;
    font-weight: 700;
    color: var(--text-dark);
}

/* Es el titulo de la ficha, no un enlace en texto corrido: sin subrayado en
   reposo, como las fichas de circuito, y subrayado al pasar o al enfocar para
   que se siga leyendo como enlace. */
.agents-page .agents-region__name a {
    color: var(--secondary-color);
    text-decoration: none;
}

.agents-page .agents-region__name a:hover,
.agents-page .agents-region__name a:focus {
    color: var(--primary-color);
    text-decoration: underline;
}

.agents-region__cities,
.agents-region__programme {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--agents-ink-soft);
}

.agents-region__programme {
    margin-top: 0.35rem;
    font-size: 0.875rem;
}

/* Las extensiones van subordinadas: no son destino propio y la pagina no debe
   dejar que se lean como uno. */
.agents-regions__extensions {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--agents-ink-soft);
}

/* -------------------------------------------------------------- los pasos */

.agents-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: agents-step;
}

.agents-step {
    display: flex;
    gap: 1rem;
    position: relative;
    padding-bottom: 1.5rem;
}

.agents-step:last-child { padding-bottom: 0; }

/* Linea que une los pasos: deja ver que es una secuencia, no una lista. */
.agents-step::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 38px;
    bottom: 0;
    width: 2px;
    background: var(--agents-border);
}

.agents-step:last-child::before { display: none; }

.agents-step__number {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.agents-step__title {
    margin-bottom: 0.35rem;
}

.agents-step__body p {
    margin-bottom: 0;
    max-width: 75ch;
    color: var(--agents-ink-soft);
}

.agents-step__note {
    margin-top: 0.5rem !important;
    color: var(--text-dark) !important;
}

/* ------------------------------------------------------- tipos de viaje */

.agents-type {
    background: #fff;
    border: 1px solid var(--agents-border);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}

.agents-type__icon {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.agents-type h3 { margin-bottom: 0.4rem; }

.agents-type p {
    color: var(--agents-ink-soft);
    margin-bottom: 0.75rem;
}

.agents-type__actions {
    margin-top: auto;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.agents-type__actions a {
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
}

.agents-type__actions a:hover,
.agents-type__actions a:focus { text-decoration: underline; }

.agents-programmes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .agents-programmes { grid-template-columns: repeat(2, 1fr); }
}

.agents-programmes a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--agents-border);
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    color: var(--text-dark);
}

.agents-programmes a:hover,
.agents-programmes a:focus {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.agents-programmes__title { font-weight: 600; }

.agents-programmes__meta {
    font-size: 0.875rem;
    color: var(--agents-ink-soft);
}

/* ---------------------------------------------------------------- tarifario */

.agents-rates__header {
    border: 1px solid var(--agents-border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--agents-alt-bg);
}

.agents-rates__header h3 { margin-bottom: 0.75rem; }

.agents-rates__header .agents-chips { margin-bottom: 0; }

.agents-rates__validity,
.agents-rates__hotels {
    color: var(--agents-ink-soft);
}

.agents-rates__hotels { margin-top: 1rem; }

.agents-rates__seasons { margin: 0.75rem 0 0; }

.agents-rate-section {
    border: 1px solid var(--agents-border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    background: #fff;
}

.agents-rate-section h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.agents-rate-section__code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--secondary-color);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
}

.agents-rate-section p {
    color: var(--agents-ink-soft);
    font-size: 0.9375rem;
    margin-bottom: 0.4rem;
}

.agents-rate-section p:last-child { margin-bottom: 0; }

.agents-rate-section__columns { font-size: 0.875rem !important; }

/* ------------------------------------------------------------- llamadas */

.agents-callout {
    margin-top: 1.5rem;
    border: 1px solid var(--agents-border);
    border-left: 4px solid var(--primary-color);
    border-radius: 12px;
    padding: 1.25rem;
    background: #fff;
}

.agents-callout h3 { margin-bottom: 0.5rem; }

.agents-callout p {
    color: var(--agents-ink-soft);
    max-width: 70ch;
}

.agents-callout--net {
    margin-top: 0;
    margin-bottom: 1.5rem;
    border-left-color: var(--secondary-color);
}

.agents-terms__rest {
    color: var(--agents-ink-soft);
    max-width: 70ch;
    margin-top: 1.25rem;
}

/* ------------------------------------------------------------- descargas */

.agents-doc {
    background: #fff;
    border: 1px solid var(--agents-border);
    border-radius: 12px;
    padding: 1.25rem;
}

.agents-doc h3 { margin-bottom: 0.4rem; }

.agents-doc p {
    color: var(--agents-ink-soft);
    margin-bottom: 0.75rem;
}

.agents-doc__files {
    list-style: none;
    margin: 0;
    padding: 0;
}

.agents-doc__files li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--agents-border);
}

.agents-doc__files a {
    font-weight: 600;
    text-decoration: none;
}

.agents-doc__files a:hover,
.agents-doc__files a:focus { text-decoration: underline; }

.agents-doc__meta {
    font-size: 0.8125rem;
    color: var(--agents-ink-soft);
}

/* -------------------------------------------------------- preguntas frecuentes */

.agents-faq {
    border: 1px solid var(--agents-border);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.agents-faq__item {
    border-bottom: 1px solid var(--agents-border);
}

.agents-faq__item:last-child { border-bottom: 0; }

.agents-faq__item summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    cursor: pointer;
    list-style: none;
}

.agents-faq__item summary::-webkit-details-marker { display: none; }

.agents-faq__item summary::after {
    content: "\F282"; /* bi-chevron-down */
    font-family: "bootstrap-icons";
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--agents-ink-soft);
    transition: transform 0.2s ease;
}

.agents-faq__item[open] summary::after { transform: rotate(180deg); }

.agents-faq__question { margin: 0; }

.agents-faq__answer {
    margin: 0;
    padding: 0 1rem 1rem;
    color: var(--agents-ink-soft);
    max-width: 80ch;
}

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

.agents-cta {
    background: linear-gradient(135deg, #00355F 0%, #004E89 100%);
    color: #fff;
}

.agents-cta__title { color: #fff; }

.agents-cta .agents-cta__text {
    color: rgba(255, 255, 255, 0.9);
    max-width: 60ch;
}

.agents-cta .agents-hero__actions { margin-bottom: 1rem; }

.agents-cta .agents-cta__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.75);
}

.agents-cta__links a {
    color: #fff;
    font-weight: 600;
}

.agents-cta .agents-facts {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.25);
}

.agents-cta .agents-facts__row { border-bottom-color: rgba(255, 255, 255, 0.2); }

.agents-cta .agents-facts dt { color: rgba(255, 255, 255, 0.75); }

.agents-cta .agents-facts dd,
.agents-cta .agents-facts a,
.agents-cta .agents-facts address {
    color: #fff;
}

/* En movil, los botones del bloque final ocupan el ancho: son el objetivo de
   la pagina y main.css ya les da 48 px de alto tactil. */
@media (max-width: 575.98px) {
    .agents-hero__actions .btn { width: 100%; }

    /* Hueco para el boton flotante de WhatsApp, que el pie declara fijo a
       20 px del borde derecho y 60 px de ancho (partials/footer.php). A 390 px
       de ancho el boton "Descargar dossier (PDF)" nace a y=766 —sin desplazar
       la pagina— y sus ultimos 60 px quedaban DEBAJO del flotante, que se
       llevaba el toque. Se reserva la esquina en vez de mover el flotante
       porque el pie no es de este grupo; si mas adelante se define un area
       segura compartida para todo el sitio, este relleno sobra y se quita.
       4.75rem = 76 px = 60 del boton + 20 de margen, redondeado. */
    .agents-hero__actions { padding-right: 4.75rem; }
}