/* ==========================================================================
   Ajustes sobre la plantilla original
   --------------------------------------------------------------------------
   Se carga despues de style.css para no tocar la hoja del tema, que puede
   regenerarse desde style.scss.

   Motivo: las tarjetas fijan un alto en pixeles y un ancho del 100% sin
   declarar object-fit, asi que la imagen se estira hasta llenar el rectangulo.
   Una foto vertical (las de WhatsApp lo son casi siempre) sale aplastada y
   deformada. Con object-fit: cover la imagen se recorta en lugar de
   deformarse, y todas las tarjetas de una parrilla quedan alineadas.
   ========================================================================== */

/* --- Imagenes de producto: recortar, nunca deformar ---------------------- */
.package-card .package-card-img-wrap .card-img img,
.package-card2 .package-card-img img,
.package-card3 .package-card-img img,
.package-card4 .package-card-img img,
.package-card5 > img,
.destination-card .destination-card-img img,
.destination-card2 .destination-card-img img,
.destination-card3 .card-img img,
.destination-card4 .card-img img,
.activity-card .activity-card-img img,
.hotel-card .hotel-card-img img,
.room-suits-card .room-img img,
.transport-card .transport-card-img img,
.blog-card .blog-card-img img,
.modern-tour-card .tour-image,
.tour-image-container .tour-image {
    object-fit: cover;
    object-position: center;
}

/* La ficha de destino define su tarjeta en la propia plantilla. */
.modern-tour-card .tour-image-container {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.modern-tour-card .tour-image {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- Miniaturas y avatares: circulos que no deben ovalarse --------------- */
.author-img img,
.testi-img img,
.teams-card .teams-img img,
.recent-post-widget .recent-post-img img,
.checkout-page .cart-body .item-img img,
.single-comment-area .author-img img {
    object-fit: cover;
    object-position: center;
}

/* --- Galerias ------------------------------------------------------------ */
.gallery-img img,
.tour-gallery img,
.hotel-img-slider img,
.transport-img img,
.product-gallery img {
    object-fit: cover;
    object-position: center;
}

/* --- Reserva de espacio --------------------------------------------------
   Sin alto declarado, el navegador coloca el texto y luego lo empuja hacia
   abajo cuando llega la imagen. El salto se nota y penaliza en las auditorias
   de rendimiento.                                                          */
.package-card .package-card-img-wrap .card-img {
    display: block;
    aspect-ratio: 3 / 2;   /* coincide con la medida recomendada 1200x800 */
    background-color: #eef1f0;
}

.package-card .package-card-img-wrap .card-img img {
    width: 100%;
    height: 100%;
}

/* --- Marcador de posicion ------------------------------------------------ */
img[src$="placeholder.jpg"] {
    object-fit: contain;
    background-color: #eef1f0;
    padding: 12%;
}

/* --- Imagenes rotas ------------------------------------------------------
   Si una imagen no carga, el icono roto del navegador desencuadra la tarjeta.
   Este fondo mantiene el hueco con un aspecto neutro.                      */
.package-card img,
.destination-card2 img,
.modern-tour-card img {
    background-color: #eef1f0;
}

/* ==========================================================================
   Simetria de las tarjetas
   --------------------------------------------------------------------------
   Las tarjetas de una parrilla crecen segun su contenido: un titulo de tres
   lineas hace la tarjeta mas alta que la de al lado y la fila queda irregular,
   con el precio y el boton a distinta altura en cada columna.

   La solucion es que todas las tarjetas de una fila midan lo mismo y que el
   texto que sobra se recorte con puntos suspensivos, que indican al lector que
   el titulo continua.
   ========================================================================== */

/* --- Cada columna estira su tarjeta a la altura de la fila ---------------- */
.row > [class*="col-"] > .package-card,
.row > [class*="col-"] > .package-card2,
.row > [class*="col-"] > .package-card3,
.row > [class*="col-"] > .package-card4,
.row > [class*="col-"] > .hotel-card,
.row > [class*="col-"] > .activity-card,
.row > [class*="col-"] > .transport-card,
.row > [class*="col-"] > .blog-card,
.row > [class*="col-"] > .visa-card,
.row > [class*="col-"] > .modern-tour-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* El bloque de contenido ocupa el espacio sobrante, de modo que el precio y el
   boton quedan pegados al pie en todas las tarjetas. */
.package-card .package-card-content,
.hotel-card .hotel-card-content,
.blog-card .blog-card-content,
.visa-card .card-content,
.modern-tour-card .tour-card-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.package-card .card-content-bottom,
.hotel-card .price-and-book,
.visa-card .card-content-bottom,
.modern-tour-card .tour-card-footer {
    margin-top: auto;
}

/* --- Recorte de titulos y descripciones ---------------------------------- */
.package-card .package-card-content h5,
.package-card .package-card-content h5 a,
.package-card2 .package-card2-content h5,
.hotel-card .hotel-card-content h5,
.blog-card .blog-card-content h4,
.visa-card .card-content h5,
.modern-tour-card .tour-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* dos lineas y puntos suspensivos */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Reserva la altura de dos lineas aunque el titulo ocupe solo una, para que la
   linea divisoria de abajo quede a la misma altura en toda la fila. */
.package-card .package-card-content h5,
.modern-tour-card .tour-card-title {
    min-height: 2.6em;
    line-height: 1.3;
}

.package-card .package-card-content p,
.blog-card .blog-card-content p,
.modern-tour-card .tour-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* La lista de subdestinos puede traer muchos elementos; se limita a una linea. */
.package-card .location-area .location-list {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Las filas usan estiramiento, no alineacion al inicio ---------------- */
.package-section .row,
.tour-section .row,
.hotel-section .row,
.activities-section .row,
.destination-section .row,
.blog-section .row {
    align-items: stretch;
}

/* ==========================================================================
   Contenido incrustado y desbordamiento horizontal
   --------------------------------------------------------------------------
   Un solo elemento mas ancho que la pantalla obliga al navegador a ensanchar
   toda la pagina: aparece una barra de desplazamiento lateral y un margen
   vacio a la derecha en todas las secciones, no solo en la que desborda.
   ========================================================================== */

/* --- Video con proporcion fija ------------------------------------------- */
.video-responsivo {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    background-color: #000;
}

.video-responsivo iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Cualquier otro incrustado ------------------------------------------- */
iframe,
embed,
object,
video {
    max-width: 100%;
}

/* Los mapas y videos del contenido enriquecido llegan con medidas fijas
   escritas por el editor. */
.package-details-area iframe,
.transport-details-section iframe,
.room-details-area iframe,
.destination-details-wrap iframe,
.blog-details-section iframe,
.map-area iframe {
    max-width: 100%;
    width: 100%;
}

/* --- Freno al desbordamiento --------------------------------------------- */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Las tablas y bloques de codigo del contenido se desplazan por si mismos en
   lugar de estirar la pagina. */
.package-details-area table,
.transport-details-section table,
.blog-details-section table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* Un titulo largo sin espacios (una URL pegada) tambien desborda. */
.package-details-area h1, .package-details-area h2, .package-details-area h3,
.transport-details-section h1, .transport-details-section h2, .transport-details-section h3,
.package-card h5, .modern-tour-card .tour-card-title {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ==========================================================================
   Menu lateral en movil
   --------------------------------------------------------------------------
   El panel deslizante funcionaba, pero se leia como una lista suelta: sin
   separacion entre entradas, con el area pulsable justa, el logo pegado al
   borde y el boton de cerrar sin fondo. En un telefono, donde el dedo cubre
   mas de lo que se ve, eso se traduce en pulsaciones fallidas.
   ========================================================================== */
@media (max-width: 991px) {

    /* --- Cabecera del panel: logo y boton de cerrar ---------------------- */
    header.style-1 .main-menu .mobile-logo-area {
        padding: 18px 20px;
        border-bottom: 1px solid #ECEFEE;
        margin-bottom: 8px;
    }

    header.style-1 .main-menu .mobile-logo-wrap img {
        max-height: 42px;
        width: auto;
    }

    header.style-1 .main-menu .menu-close-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #F2F5F4;
        color: #3D4E50;
        transition: background-color .2s ease;
    }

    header.style-1 .main-menu .menu-close-btn:hover,
    header.style-1 .main-menu .menu-close-btn:active {
        background: #E2E8E6;
    }

    header.style-1 .main-menu .menu-close-btn i {
        font-size: 20px;
        line-height: 1;
    }

    /* --- Entradas: area pulsable comoda y separacion visible ------------- */
    header.style-1 .main-menu ul.menu-list > li {
        display: block;
        padding: 0;
        border-bottom: 1px solid #F1F4F3;
    }

    header.style-1 .main-menu ul.menu-list > li:last-child {
        border-bottom: none;
    }

    header.style-1 .main-menu ul.menu-list > li > a {
        display: block;
        padding: 15px 20px;      /* 48px de alto: el minimo comodo para el dedo */
        font-size: 15px;
        line-height: 1.3;
    }

    header.style-1 .main-menu ul.menu-list > li > a:active {
        background: #F6F8F7;
    }

    /* El signo + de los submenus necesita su propia area pulsable, separada
       del enlace, para no abrir la pagina al querer desplegar. */
    header.style-1 .main-menu ul.menu-list > li .dropdown-icon {
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 2px;
        right: 6px;
        font-size: 18px;
        color: #6C7E80;
        border-radius: 8px;
    }

    header.style-1 .main-menu ul.menu-list > li .dropdown-icon:active {
        background: #F1F4F3;
    }

    /* --- Submenus: sangria que deja claro la jerarquia ------------------- */
    header.style-1 .main-menu ul.menu-list .sub-menu {
        background: #FAFBFB;
        border-top: 1px solid #F1F4F3;
    }

    header.style-1 .main-menu ul.menu-list .sub-menu > li > a {
        padding: 13px 20px 13px 36px;
        font-size: 14.5px;
    }

    /* --- Bloque de contacto al pie del panel ----------------------------- */
    header.style-1 .main-menu .hotline-area {
        margin-top: 20px;
        padding: 18px 20px;
        border-top: 1px solid #ECEFEE;
        align-items: center;
        gap: 12px;
    }

    header.style-1 .main-menu .hotline-area .hotline-content h6 a {
        font-size: 16px;
        font-weight: 700;
    }

    /* --- El panel se desplaza si el menu no cabe ------------------------- */
    header.style-1 .main-menu {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 30px;
    }
}

/* --- Reserva de transporte ------------------------------------------------ */
.dias-reserva {
    margin: 6px 0 0;
    font-size: 13.5px;
    color: #5B6E7A;
}

.dias-reserva .dias_texto {
    font-weight: 600;
}

.number-input-lable .por-dia {
    font-style: normal;
    font-size: 13px;
    opacity: .75;
    margin-left: 2px;
}

.number-input-lable small {
    font-size: 12px;
    opacity: .7;
    margin-left: 4px;
}

/* --- Reserva de transporte: contadores que no desbordan -------------------
   La fila «etiqueta + contador» estaba pensada para una etiqueta corta. Con el
   nombre del vehiculo, el precio y «por dia», el contador quedaba fuera de la
   columna: en pantallas medianas se salia del panel.                        */
.booking-form-item-type .number-input-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.booking-form-item-type .number-input-item .number-input-lable {
    flex: 1 1 auto;
    min-width: 0;              /* permite que el texto se ajuste en vez de empujar */
    overflow-wrap: break-word;
}

.booking-form-item-type .number-input-item .quantity-counter {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.booking-form-item-type .quantity-counter .quantity__input {
    width: 46px;
    min-width: 46px;
    text-align: center;
}

/* En movil la etiqueta ocupa su propia linea y el contador queda debajo. */
@media (max-width: 480px) {
    .booking-form-item-type .number-input-item .number-input-lable,
    .booking-form-item-type .number-input-item .quantity-counter {
        flex: 1 1 100%;
    }

    .booking-form-item-type .number-input-item .quantity-counter {
        justify-content: flex-start;
    }
}

/* --- Resumen del alquiler ------------------------------------------------- */
.single-total .resumen-concepto {
    font-weight: 600;
}

.single-total .flecha-resumen {
    flex: 0 0 auto;
}

.resumen-servicios {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Nada del formulario de reserva puede sobresalir de su columna. */
.booking-form-wrap,
.sidebar-booking-form {
    max-width: 100%;
    overflow-x: hidden;
}

/* ==========================================================================
   Sección de blog de la portada
   --------------------------------------------------------------------------
   El bloque tiene dos formas de tarjeta: la grande de la izquierda, una por
   columna, y las horizontales de la derecha, que se apilan varias dentro de
   una sola columna.

   La regla general de «cada columna estira su tarjeta» está pensada para la
   primera. Aplicada a las segundas les daba a cada una el alto completo de la
   columna —tres tarjetas al 100% cada una— y les giraba la dirección, así que
   la imagen saltaba encima del texto. El resultado desbordaba la sección y se
   montaba sobre las de abajo.
   ========================================================================== */
.row > [class*="col-"] > .blog-card.two {
    height: auto;
}

@media (min-width: 577px) {
    /* La horizontal vuelve a serlo: imagen a la izquierda, texto a la derecha. */
    .row > [class*="col-"] > .blog-card.two {
        flex-direction: row;
    }
}

/* La columna reparte su alto entre las tarjetas que contenga, sean dos o tres,
   y termina a la misma altura que la tarjeta grande de al lado. */
.blog-section .row > .col-lg-7 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-section .row > .col-lg-7 > .blog-card.two {
    flex: 1 1 0;
    min-height: 0;
}

/* La imagen cubre su recuadro en lugar de imponer su alto original. */
.blog-card.two .blog-card-img-wrap {
    align-self: stretch;
    flex: 0 0 auto;
}

.blog-card.two .blog-card-img-wrap .card-img {
    display: block;
    height: 100%;
}

.blog-card.two .blog-card-img-wrap .card-img img {
    width: 100%;
    height: 100%;
    min-height: 150px;
    object-fit: cover;
    object-position: center;
}

/* El texto no empuja la tarjeta: el título se corta en dos líneas. */
.blog-card.two .blog-card-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.blog-card.two .blog-card-content h5 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card.two .blog-card-content .bottom-area {
    margin-top: auto;
}

/* La tarjeta grande: proporción fija para que no dependa del original. */
.blog-section .col-lg-5 .blog-card .blog-card-img-wrap .card-img {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.blog-section .col-lg-5 .blog-card .blog-card-img-wrap .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 576px) {
    /* Apiladas: la imagen recupera una proporción propia. */
    .blog-card.two .blog-card-img-wrap .card-img img {
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

/* Aviso que sustituye al formulario de comentarios cuando no hay sesión. */
.aviso-comentario {
    margin: 0;
    padding: 18px 20px;
    border: 1px solid #E8EAEC;
    border-radius: 5px;
    background: #F8F9FA;
    font-size: 15px;
    color: #6C757D;
}

.aviso-comentario a {
    font-weight: 700;
    color: var(--primary-color1, #63AB45);
}

.aviso-comentario a:hover { text-decoration: underline; }

/* ==========================================================================
   Mapa de ubicación
   --------------------------------------------------------------------------
   La plantilla lo teñía con `grayscale(199%) invert(98%) contrast(122%)`. El
   resultado era un mapa en gris y negativo: el mar salía blanco, la tierra
   oscura y las carreteras casi no se distinguían. Un mapa se consulta para
   ubicarse, así que se muestra tal cual lo sirve Google.

   Va aquí y no en style.css para que una actualización de la plantilla no lo
   revierta.
   ========================================================================== */
.map-area iframe,
.tour-location .map-area iframe,
.room-details-area .tour-location .map-area iframe,
.package-details-area .map-area iframe,
.transport-details-area .map-area iframe,
.activities-details-area .map-area iframe,
.visa-details-area .map-area iframe {
    filter: none;
    width: 100%;
    border: 0;
    border-radius: 10px;
}

/* El título que explica el error, bajo el código. */
.error-wrapper .error-titulo {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 700;
    color: #1F2937;
}

/* ==========================================================================
   Tarjeta del listado del blog
   --------------------------------------------------------------------------
   El marcado de estas tarjetas se reescribió con nombres de clase propios
   —blog-card-modern, date-badge, blog-title-modern…— pero las reglas nunca se
   escribieron: ni style.css ni esta hoja tenían una sola declaración para
   ninguna de ellas.

   El resultado era el que se ve: el día y el mes apilados en dos líneas donde
   debía haber un distintivo sobre la foto, el título heredando un gris casi
   del color del fondo, y el enlace de leer más perdido entre el texto.
   ========================================================================== */
.blog-card-modern {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}

.blog-card-modern:hover {
    box-shadow: 0 10px 30px rgba(31, 41, 55, .08);
    transform: translateY(-3px);
}

/* --- Imagen y distintivo de fecha ------------------------------------------ */
.blog-image-container {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #F1F2F4;
}

.blog-featured-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .5s ease;
}

.blog-card-modern:hover .blog-featured-image { transform: scale(1.04); }

/* La fecha es un distintivo sobre la foto, no dos líneas sueltas debajo. */
.date-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 8px 10px;
    background: var(--primary-color1, #63AB45);
    border-radius: 8px;
    color: #FFFFFF;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.date-badge .date-day {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.01em;
}

.date-badge .date-month {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .92;
}

/* --- Contenido -------------------------------------------------------------- */
.blog-content-area {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 24px 26px 26px;
}

.blog-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #6C757D;
}

.blog-stats .stat-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.blog-stats .stat-item i { font-size: 14px; opacity: .7; }

.blog-stats .stat-separator { color: #D8DCDF; }

/* El título era lo menos legible de la página: gris claro sobre blanco. */
.blog-title-modern {
    margin: 0 0 12px;
    font-size: 26px;
    line-height: 1.3;
    font-weight: 800;
}

.blog-title-modern a {
    color: #1F2937;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s ease;
}

.blog-title-modern a:hover {
    color: var(--primary-color1, #63AB45);
    text-decoration: none;
}

.blog-excerpt-modern {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.75;
    color: #5A6570;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Leer más ---------------------------------------------------------------- */
.blog-read-more {
    margin: auto 0 0;   /* al pie de la tarjeta, sea cual sea el alto del texto */
}

.read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color1, #63AB45);
    text-decoration: none;
    transition: gap .2s ease;
}

.read-more-link:hover {
    color: var(--primary-color1, #63AB45);
    gap: 12px;
    text-decoration: none;
}

.read-more-link i { font-size: 15px; }

@media (max-width: 575px) {
    .blog-content-area { padding: 20px 18px 22px; }
    .blog-title-modern { font-size: 21px; }
    .date-badge { top: 12px; left: 12px; min-width: 50px; padding: 7px 9px; }
    .date-badge .date-day { font-size: 19px; }
}

/* ==========================================================================
   Fecha de las tarjetas del blog: cinta en lugar de círculo
   --------------------------------------------------------------------------
   La plantilla dibuja la fecha en un círculo de 65 px y mete el texto dentro
   con posicionamiento absoluto. Con una fecha completa —21-01-2024— el texto
   no cabe en el círculo: se sale por los lados o hay que empequeñecerlo hasta
   que cuesta leerlo.

   Pasa a ser una cinta: un rectángulo cuyo borde inferior lleva una muesca en
   uve, que deja dos puntas a los lados. Es la forma del extremo de una cinta
   de regalo. Al no ser un círculo, se ensancha con el texto y la fecha se lee
   entera.

   La muesca se hace recortando el propio elemento, así que funciona sobre
   cualquier foto sin necesidad de una imagen de fondo.
   ========================================================================== */
.blog-card .blog-card-img-wrap .date,
.blog-card .blog-card-img .date,
.blog-card.style-2 .blog-card-img-wrap .date,
.blog-card.style-3 .blog-card-img-wrap .date {
    width: auto;
    height: auto;
    min-width: 0;
    padding: 9px 13px 17px;
    border-radius: 4px 4px 0 0;

    /* Esquinas superiores, punta derecha, muesca central, punta izquierda. */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* El texto deja de ir centrado en absoluto: ahora es lo que da el ancho. */
.blog-card .blog-card-img-wrap .date span,
.blog-card .blog-card-img .date span,
.blog-card.style-2 .blog-card-img-wrap .date span,
.blog-card.style-3 .blog-card-img-wrap .date span {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    display: block;
    white-space: nowrap;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

/* Cuando la plantilla separa día y mes, el día manda. */
.blog-card .blog-card-img-wrap .date span strong {
    display: block;
    margin-bottom: 2px;
    font-size: 17px;
    font-weight: 700;
}

/* La cinta arranca pegada al borde superior de la foto, como colgando. */
.blog-card .blog-card-img-wrap .date,
.blog-card .blog-card-img .date {
    top: 0;
    left: 16px;
}

@media (max-width: 767px) {
    .blog-card .blog-card-img-wrap .date,
    .blog-card .blog-card-img .date {
        left: 12px;
        padding: 8px 11px 15px;
    }

    .blog-card .blog-card-img-wrap .date span { font-size: 10.5px; }
}

/* --------------------------------------------------------------------------
   Listado del blog en dos columnas
   --------------------------------------------------------------------------
   Las entradas se apilaban en una sola columna dentro de un espacio que da
   para dos: cada tarjeta ocupaba una pantalla entera y ver cinco entradas
   exigía cinco desplazamientos.

   Dos columnas en escritorio y tableta, una en móvil. La paginación y el
   estado vacío cruzan las dos, que si no caerían en una celda como si fueran
   otra entrada más.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .blog-standard-wrapper {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 30px;
    }

    /* La separación la da el gap; el margen de la plantilla sobra. */
    .blog-standard-wrapper > .blog-card-modern.mb-60 { margin-bottom: 0; }

    .blog-standard-wrapper > .blog-pagination,
    .blog-standard-wrapper > .no-blogs-found { grid-column: 1 / -1; }

    /* A la mitad de ancho, el título de 26px se comía la tarjeta. */
    .blog-standard-wrapper .blog-title-modern { font-size: 20px; }
    .blog-standard-wrapper .blog-content-area { padding: 20px 22px 22px; }
    .blog-standard-wrapper .blog-excerpt-modern { font-size: 14.5px; }
}

/* Con la barra lateral al lado, dos columnas aprietan: se ensancha el hueco. */
@media (min-width: 992px) and (max-width: 1199px) {
    .blog-standard-wrapper { gap: 22px; }
    .blog-standard-wrapper .blog-title-modern { font-size: 18.5px; }
}

/* La paginación del blog se centra bajo la rejilla, no pegada a la izquierda. */
.blog-standard-wrapper > .blog-pagination {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.blog-standard-wrapper > .blog-pagination .pagination {
    display: flex;
    gap: 6px;
    margin: 0;
}

/* ==========================================================================
   Logos del sitio público
   --------------------------------------------------------------------------
   Ninguna regla limitaba su tamaño: el navegador los dibujaba al natural. El
   del pie es un PNG de 748×724, así que ocupaba media columna.

   La medida se fija aquí, no en el archivo, para que dé igual lo que suba el
   cliente: un isotipo cuadrado o un logotipo apaisado caben los dos, porque se
   limitan alto y ancho a la vez y la imagen se ajusta dentro sin deformarse.
   ========================================================================== */
.footer-section .footer-logo {
    display: block;
    line-height: 0;
}

.footer-section .footer-logo a {
    display: inline-block;
    max-width: 100%;
}

.footer-section .footer-logo img {
    max-height: 88px;
    max-width: 260px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* El de la cabecera comparte el problema: un PNG de 2172px de ancho. */
.header-logo img,
.header-section .logo img,
.navbar-brand img {
    max-height: 52px;
    max-width: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 991px) {
    .header-logo img,
    .header-section .logo img,
    .navbar-brand img { max-height: 42px; max-width: 160px; }

    .footer-section .footer-logo img { max-height: 74px; max-width: 220px; }
}

/* Red de seguridad: ningún logo del sitio se dibuja a tamaño natural. */
img[src*="/assets/logo/"] {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   Tarjetas de «Procesamiento de Visas»
   --------------------------------------------------------------------------
   Estas tarjetas no viven en una columna de rejilla sino en un carrusel, así
   que la regla que iguala alturas —escrita para `.row > [class*="col-"]`— no
   las alcanzaba: cada una medía lo que midiera su foto, y las tres imágenes
   tienen proporciones distintas (1,63 · 1,49 · 1,43).

   Peor: la regla que pone el contenido en columna sí las alcanzaba, y en esta
   tarjeta el título y el precio van UNO AL LADO DEL OTRO, cada uno al 50 % de
   la franja inferior. Apilados, «Precio a consultar» pasaba a dos líneas y
   levantaba esa tarjeta por encima de las otras dos.
   -------------------------------------------------------------------------- */

/* El título y el precio vuelven a repartirse la franja en horizontal. */
.package-card2 .package-card2-content {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* Todas las diapositivas del carrusel miden lo mismo. */
.package-card2-slider .swiper-wrapper { align-items: stretch; }

.package-card2-slider .swiper-slide {
    height: auto;
    display: flex;
}

.package-card2-slider .package-card2 {
    width: 100%;
    height: 100%;
}

/* La foto adopta una proporción fija: da igual cómo venga el original. */
.package-card2 > a {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.package-card2 > a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Un nombre largo se corta en lugar de estirar la franja. */
.package-card2 .package-card2-content .title h6 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* «Precio a consultar» ocupa más que una cifra: se le baja el cuerpo para que
   quepa en una línea, como al resto. */
.package-card2 .package-card2-content .price-area .price-on-request {
    font-size: 19px;
    line-height: 1.25;
    display: block;
}

/* --------------------------------------------------------------------------
   Portada: la imagen del hero, a sangre
   --------------------------------------------------------------------------
   La plantilla la mete en un contenedor con 70px de relleno a cada lado y le
   redondea las esquinas: la foto quedaba flotando en un recuadro, con dos
   franjas blancas a los costados justo debajo del encabezado.

   La barra de búsqueda vive fuera de esta área, así que sigue centrada y con
   su ancho: solo cambia la imagen.
   -------------------------------------------------------------------------- */
.home1-banner-area {
    padding: 0;
    border-radius: 0;
}

/* El .container-fluid de Bootstrap añade su propia gotera. */
.home1-banner-area > .container-fluid {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}

.home1-banner-area .home1-banner-wrapper {
    border-radius: 0;
}

/* Los mismos límites en cada punto de corte, para que ninguna regla de la
   plantilla vuelva a meter relleno. */
@media (min-width: 1400px) and (max-width: 1599px) {
    .home1-banner-area { padding: 0; }
}

@media (max-width: 1399px) {
    .home1-banner-area { padding: 0; }
}

/* A sangre, las flechas se separan demasiado del contenido si van al 8%. */
@media (min-width: 1600px) {
    .home1-banner-area .slider-btn-grp .home1-banner-prev { left: 4%; }
    .home1-banner-area .slider-btn-grp .home1-banner-next { right: 4%; }
}

/* --------------------------------------------------------------------------
   Portada: el hero llega hasta debajo del buscador
   --------------------------------------------------------------------------
   La barra de pestañas y el buscador se suben 100px sobre el hero
   (`margin-top: -100px`), pero la imagen terminaba antes: quedaba una franja
   blanca a izquierda y derecha del grupo de pestañas, justo donde el fondo
   debería seguir.

   Se alarga el fondo por abajo lo mismo que sube la barra, así la imagen pasa
   por detrás de ella de lado a lado.
   -------------------------------------------------------------------------- */
.home1-banner-area .home1-banner-wrapper {
    padding-bottom: 110px;
}

@media (max-width: 767px) {
    /* Ahí la barra sube 56px en lugar de 100. */
    .home1-banner-area .home1-banner-wrapper { padding-bottom: 64px; }
}

/* El degradado oscuro del hero debe cubrir también esa franja nueva, para que
   el texto de las pestañas se lea sobre cualquier foto. */
.home1-banner-area .home1-banner-wrapper {
    background-size: cover;
    background-position: center center;
}

/* --------------------------------------------------------------------------
   Portada: altura del hero
   --------------------------------------------------------------------------
   La plantilla le da 180px de relleno arriba y abajo al contenido. Sumados al
   encabezado y a la franja que añadimos por debajo para que la imagen pase
   tras el buscador, el hero se comía la pantalla entera y la barra de filtros
   quedaba por debajo del pliegue: hay que desplazarse para verla, justo la
   pieza con la que se empieza a buscar.

   El relleno pasa a depender del alto de la ventana, con un mínimo y un
   máximo, de modo que en una pantalla baja el hero se encoge y deja ver los
   filtros, y en una alta no se queda corto.
   -------------------------------------------------------------------------- */
.home1-banner-area .home1-banner-wrapper .home1-banner-content {
    padding: clamp(70px, 9vh, 150px) 0 clamp(60px, 7vh, 120px);
}

@media (max-width: 991px) {
    .home1-banner-area .home1-banner-wrapper .home1-banner-content {
        padding: clamp(60px, 8vh, 120px) 0 clamp(50px, 6vh, 100px);
    }
}

@media (max-width: 767px) {
    .home1-banner-area .home1-banner-wrapper .home1-banner-content {
        padding: clamp(50px, 7vh, 90px) 0 clamp(40px, 5vh, 70px);
    }
}

/* En pantallas bajas el relleno ya está al mínimo y lo que sobra es el propio
   texto: el titular a 65px ocupa dos líneas de 143px. Aquí se encoge para que
   la barra de filtros siga entrando sin desplazarse. */
@media (max-height: 820px) and (min-width: 992px) {
    .home1-banner-area .home1-banner-wrapper .home1-banner-content h1,
    .home1-banner-area .home1-banner-wrapper .home1-banner-content h2 {
        font-size: 46px;
        margin-bottom: 14px;
    }

    .home1-banner-area .home1-banner-wrapper .home1-banner-content p {
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 24px;
    }

    .home1-banner-area .home1-banner-wrapper .home1-banner-content .eg-tag {
        padding: 9px 56px;
        margin-bottom: 10px;
    }
}

@media (max-height: 700px) and (min-width: 992px) {
    .home1-banner-area .home1-banner-wrapper .home1-banner-content h1,
    .home1-banner-area .home1-banner-wrapper .home1-banner-content h2 {
        font-size: 38px;
    }

    /* La descripción se recorta a una línea: el titular y el botón mandan. */
    .home1-banner-area .home1-banner-wrapper .home1-banner-content p {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 18px;
    }
}

/* ==========================================================================
   Botón flotante de WhatsApp
   --------------------------------------------------------------------------
   Antes iba en un <style> dentro del pie, así que se descargaba entero en
   cada página aunque el botón estuviera apagado. Aquí viaja en la hoja, que
   el navegador guarda una sola vez.

   El icono es un SVG incrustado: el anterior se traía de un CDN ajeno, de
   modo que el botón dependía de que ese servicio siguiera en pie y cada
   visitante quedaba anotado en un servidor de terceros sin motivo.
   ========================================================================== */
.whatsapp-flotante {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 9990;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Tawk planta su burbuja en la misma esquina. Cuando los dos están
   encendidos, WhatsApp sube para que no se solapen. */
.whatsapp-flotante.con-tawk {
    bottom: 100px;
}

.whatsapp-flotante-boton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    color: #FFFFFF;
    background: #25D366;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
    transition: transform .25s ease, box-shadow .25s ease;
}

.whatsapp-flotante-boton:hover,
.whatsapp-flotante-boton:focus-visible {
    color: #FFFFFF;
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}

.whatsapp-flotante-boton:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 3px;
}

/* El texto se asoma al cargar, se retira solo y vuelve al pasar el ratón:
   así se ve para qué sirve el botón sin tapar la página el resto del rato. */
.whatsapp-flotante-texto {
    padding: 9px 14px;
    font-size: 14px;
    line-height: 1.3;
    color: #1F2937;
    white-space: nowrap;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
    opacity: 0;
    transform: translateX(10px);
    pointer-events: none;
    animation: whatsapp-asomar .5s ease .8s forwards,
               whatsapp-retirar .5s ease 6s forwards;
}

.whatsapp-flotante:hover .whatsapp-flotante-texto {
    opacity: 1;
    transform: translateX(0);
    animation: none;
}

@keyframes whatsapp-asomar {
    to { opacity: 1; transform: translateX(0); }
}

@keyframes whatsapp-retirar {
    to { opacity: 0; transform: translateX(10px); visibility: hidden; }
}

/* En el móvil no hay ratón que pasar por encima y el rótulo solo quita
   sitio: queda el botón. */
@media (max-width: 767px) {
    .whatsapp-flotante-texto { display: none; }

    .whatsapp-flotante {
        right: 16px;
        bottom: 16px;
    }

    .whatsapp-flotante.con-tawk { bottom: 88px; }

    .whatsapp-flotante-boton {
        width: 52px;
        height: 52px;
    }

    .whatsapp-flotante-boton svg {
        width: 27px;
        height: 27px;
    }
}

/* Quien pide menos movimiento no ve el rótulo entrar y salir solo. */
@media (prefers-reduced-motion: reduce) {
    .whatsapp-flotante-texto {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .whatsapp-flotante-boton { transition: none; }
}

/* ==========================================================================
   Acceso y registro
   --------------------------------------------------------------------------
   La ventana de acceso y las páginas de entrada y registro comparten estilo:
   son la misma acción y no tienen por qué verse distintas.

   Nombres propios a propósito. Las clases de la plantilla van encadenadas
   hasta seis niveles —`.login-modal .modal-dialog .modal-content .modal-body
   .login-registration-form .form-inner`— y cualquier ajuste habría que hacerlo
   a la fuerza, con !important encima de !important. Con marcado propio no hay
   nada contra lo que pelear.

   Aviso: la plantilla declara `input { border: none }` en global, así que aquí
   hay que reponer el borde explícitamente.
   ========================================================================== */

:root {
    --acceso-verde: #63AB45;
    --acceso-tinta: #1F2937;
    --acceso-apagado: #6C757D;
    --acceso-borde: #DDE1E4;
    --acceso-error: #DD344A;
}

/* --- La ventana ------------------------------------------------------------ */
.acceso-modal .modal-dialog {
    max-width: 440px;
    margin: 1.5rem auto;
}

.acceso-modal .modal-content {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
}

.acceso-cerrar {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: #FFFFFF;
    background: rgba(17, 24, 39, .42);
    border: 0;
    border-radius: 50%;
    backdrop-filter: blur(4px);
    transition: background-color .18s ease;
}

.acceso-cerrar:hover,
.acceso-cerrar:focus-visible { background: rgba(17, 24, 39, .68); }

.acceso-cerrar:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* La foto era un tercio de la ventana y en un portátil bajo empujaba el
   formulario fuera de la pantalla. Aquí es una banda. */
.acceso-portada {
    position: relative;
    height: 116px;
    overflow: hidden;
}

.acceso-portada img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}

/* Degradado hacia el blanco del cuerpo: sin él la foto corta en seco. */
.acceso-portada-velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .92) 100%);
}

.acceso-cuerpo { padding: 22px 32px 30px; }

/* --- Cabecera del formulario ----------------------------------------------- */
.acceso-titulo {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--acceso-tinta);
    text-wrap: balance;
}

.acceso-entradilla {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--acceso-apagado);
}

/* --- Aviso de errores ------------------------------------------------------
   Antes se volcaban todos bajo el primer campo: un fallo de contraseña
   aparecía debajo del usuario. */
.acceso-aviso {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 18px;
    padding: 11px 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #8C1D2C;
    background: #FDF2F3;
    border: 1px solid #F6D6DA;
    border-radius: 8px;
}

/* --- Campos ---------------------------------------------------------------- */
.acceso-campo { margin-bottom: 16px; }

.acceso-campo > label,
.acceso-campo-cabecera label {
    display: block;
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--acceso-tinta);
}

.acceso-campo .obligatorio { color: var(--acceso-error); }

.acceso-campo-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.acceso-olvido {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--acceso-verde);
}

.acceso-olvido:hover { text-decoration: underline; }

.acceso-campo input[type="text"],
.acceso-campo input[type="email"],
.acceso-campo input[type="password"] {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    font-size: 14.5px;
    color: var(--acceso-tinta);
    background: #FFFFFF;
    /* La plantilla quita el borde a todo <input> en global. */
    border: 1px solid var(--acceso-borde);
    border-radius: 9px;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.acceso-campo input::placeholder { color: #9AA1A8; }

.acceso-campo input:focus {
    border-color: var(--acceso-verde);
    box-shadow: 0 0 0 3px rgba(99, 171, 69, .16);
}

.acceso-campo input.tiene-error {
    border-color: var(--acceso-error);
    background: #FFFBFB;
}

.acceso-error {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--acceso-error);
}

/* --- Mostrar y ocultar la contraseña ---------------------------------------- */
.acceso-clave-caja { position: relative; }

.acceso-clave-caja input { padding-right: 44px !important; }

.acceso-ojo {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 15px;
    color: var(--acceso-apagado);
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.acceso-ojo:hover { color: var(--acceso-tinta); background: #F2F4F5; }

.acceso-ojo:focus-visible {
    outline: 2px solid var(--acceso-verde);
    outline-offset: 1px;
}

/* --- Botón principal -------------------------------------------------------- */
.acceso-boton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    margin-top: 4px;
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
    background: var(--acceso-verde);
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: filter .16s ease, box-shadow .16s ease;
}

.acceso-boton:hover {
    filter: brightness(.95);
    box-shadow: 0 6px 16px rgba(99, 171, 69, .28);
}

.acceso-boton:focus-visible {
    outline: 2px solid var(--acceso-tinta);
    outline-offset: 2px;
}

/* --- Separador -------------------------------------------------------------
   El de la plantilla dejaba la palabra flotando sin líneas a los lados. */
.acceso-separador {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    font-size: 12.5px;
    color: var(--acceso-apagado);
}

.acceso-separador::before,
.acceso-separador::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #E6E9EA;
}

/* --- Entrar con Google ------------------------------------------------------ */
.acceso-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--acceso-tinta);
    background: #FFFFFF;
    border: 1px solid var(--acceso-borde);
    border-radius: 9px;
    transition: background-color .16s ease, border-color .16s ease;
}

.acceso-google:hover {
    color: var(--acceso-tinta);
    background: #F7F8F9;
    border-color: #C9CFD3;
}

.acceso-google img { width: 18px; height: 18px; }

/* --- Pie -------------------------------------------------------------------- */
.acceso-pie {
    margin: 20px 0 0;
    font-size: 13.5px;
    text-align: center;
    color: var(--acceso-apagado);
}

.acceso-pie a {
    font-weight: 700;
    color: var(--acceso-verde);
}

.acceso-pie a:hover { text-decoration: underline; }

/* ==========================================================================
   Páginas de entrada y registro
   ========================================================================== */
.registro-pagina {
    padding: 70px 0 90px;
    background: #F7F8F9;
}

.registro-caja {
    max-width: 620px;
    margin: 0 auto;
    padding: 34px 38px 38px;
    background: #FFFFFF;
    border: 1px solid #EDEFF1;
    border-radius: 16px;
    box-shadow: 0 10px 34px rgba(15, 23, 42, .07);
}

.registro-caja-estrecha { max-width: 460px; }

.registro-cabecera { margin-bottom: 24px; }

.registro-cabecera h1 {
    margin: 0 0 6px;
    font-size: 27px;
    font-weight: 800;
    color: var(--acceso-tinta);
    text-wrap: balance;
}

.registro-cabecera p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--acceso-apagado);
}

/* Nombre y apellido, y las dos contraseñas, van de dos en dos. */
.registro-rejilla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}

/* --- Condiciones y recordarme ----------------------------------------------- */
.registro-condiciones {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 6px 0 20px;
}

.registro-condiciones input[type="checkbox"] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: var(--acceso-verde);
    cursor: pointer;
}

.registro-condiciones label {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--acceso-tinta);
    cursor: pointer;
}

.registro-condiciones a {
    font-weight: 700;
    color: var(--acceso-verde);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.registro-formulario .g-recaptcha { margin-bottom: 18px; }

/* --- Móvil ------------------------------------------------------------------ */
@media (max-width: 575px) {
    .acceso-cuerpo { padding: 20px 22px 26px; }

    .acceso-titulo { font-size: 21px; }

    .acceso-portada { height: 96px; }

    .registro-pagina { padding: 40px 0 60px; }

    .registro-caja { padding: 26px 20px 30px; }

    .registro-cabecera h1 { font-size: 23px; }

    /* Dos columnas en un móvil dejan campos de siete caracteres. */
    .registro-rejilla { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .acceso-boton,
    .acceso-google,
    .acceso-campo input,
    .acceso-cerrar { transition: none; }
}

/* ==========================================================================
   Avisos emergentes
   --------------------------------------------------------------------------
   El de la plantilla salía a 15 px del borde superior, así que en el sitio
   público quedaba medio tapado por la barra de arriba, y el texto iba a 13 px
   en blanco sobre un rosa pálido: se leía mal justo cuando más importa, que es
   cuando algo ha fallado.

   Aquí baja por debajo de la cabecera, gana cuerpo y contraste, y lleva una
   banda de color a la izquierda que dice de un vistazo si ha ido bien o mal.
   ========================================================================== */
.toast-container {
    top: 96px;
    right: 20px;
    max-width: calc(100vw - 40px);
}

.toast-content {
    min-width: 320px;
    max-width: 440px;
    border-radius: 10px;
    /* La sombra de la plantilla era tan suave que el aviso se confundía con la
       página. */
    box-shadow: 0 12px 32px rgba(15, 23, 42, .22);
}

/* El color de fondo lo pone la librería con `.error-bg` / `.success-bg`.
   Se sustituye por blanco con una banda lateral: el texto oscuro sobre blanco
   se lee siempre, y el color sigue estando donde se nota. */
.toast-content.success-bg,
.toast-content.info-bg,
.toast-content.warning-bg {
    background: #FFFFFF !important;
    border: 1px solid #E6E9EA;
}

/* El error lleva fondo: un rojo apagado, suficiente para que salte a la
   vista sin gritar, y con el texto todavia legible encima. */
.toast-content.error-bg {
    background: #FDF0F1 !important;
    border: 1px solid #F3CDD2;
    border-left: 5px solid #DD344A;
}
.toast-content.success-bg { border-left: 5px solid #10B981; }
.toast-content.warning-bg { border-left: 5px solid #F59E0B; }
.toast-content.info-bg    { border-left: 5px solid #3B82F6; }

.toast-frame {
    height: auto;
    min-height: 66px;
    padding: 14px 18px;
}

.toast-body-img {
    height: 30px;
    flex: 0 0 auto;
}

.toast-title {
    font-size: 15px !important;
    font-weight: 800;
    color: #1F2937;
    margin-left: 13px;
}

.toast-message {
    /* 13 px en blanco sobre rosa era la raíz del problema. */
    font-size: 14.5px !important;
    font-weight: 500;
    line-height: 1.5;
    color: #3F4750;
    margin-left: 13px;
    /* Un mensaje largo se corta con puntos suspensivos si no se le deja
       envolver. */
    white-space: normal;
    overflow-wrap: anywhere;
}

.toast-content.error-bg .toast-title   { color: #B02334; }
.toast-content.success-bg .toast-title { color: #0B7B5D; }

/* En el móvil ocupa el ancho: un aviso de 320 px en una pantalla de 360 se
   sale por un lado. */
@media (max-width: 575px) {
    .toast-container {
        top: 76px;
        right: 12px;
        left: 12px;
        max-width: none;
    }

    .toast-content {
        min-width: 0;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast-content { animation: none; }
}

/* ==========================================================================
   Barra superior
   --------------------------------------------------------------------------
   Tres bloques: el correo a la izquierda, el aviso en medio y las redes a la
   derecha. Para que el aviso quede centrado en la PÁGINA —y no solo entre sus
   vecinos— los dos bloques laterales tienen que ocupar lo mismo: sin esto, el
   correo mide 235 px y las redes 120, y el aviso se corre hacia la derecha.
   ========================================================================== */
.top-bar.style-2 .topbar-left {
    flex: 1 1 0;
    max-width: none;
}

.top-bar.style-2 .topbar-aviso {
    flex: 0 1 auto;
    text-align: center;
    line-height: 1.4;
}

.top-bar.style-2 .topbar-right {
    flex: 1 1 0;
    /* La plantilla topa este bloque en 235 px. Con el tope puesto, el bloque
       de la izquierda crecía libre y el de la derecha no: los dos lados dejaban
       de medir lo mismo y el aviso se iba hacia la derecha. */
    max-width: none;
    display: flex;
    justify-content: flex-end;
}

/* Sin el correo configurado no hay bloque izquierdo, y el aviso se iría a la
   izquierda. Un hueco del mismo ancho que las redes lo mantiene en el centro. */
.top-bar.style-2:not(:has(.topbar-left))::before {
    content: "";
    flex: 1 1 0;
}

/* Los separadores verticales de la plantilla van pegados al BORDE de cada
   bloque lateral. Mientras esos bloques medían 235 px fijos, el borde caía
   justo al lado del contenido; ahora que se estiran para repartir el ancho,
   las dos rayas quedarían flotando en medio del vacío. Se anclan al contenido
   en lugar de al bloque. */
.top-bar.style-2 .topbar-left::after,
.top-bar.style-2 .topbar-right::after {
    display: none;
}

/* Blanco al 20 %, que es lo que usa esta variante: la barra es #222 y una
   línea oscura sobre negro no se ve. */
.top-bar.style-2 .topbar-left .content {
    padding-right: 22px;
    border-right: 1px solid rgba(255, 255, 255, .2);
}

.top-bar.style-2 .topbar-right .social-icon-area {
    padding-left: 22px;
    border-left: 1px solid rgba(255, 255, 255, .2);
}

/* El mismo recuadro, pero cuando la noticia es buena. */
.acceso-aviso.acceso-aviso-bien {
    color: #0B5B45;
    background: #EFFAF5;
    border-color: #C6EBDC;
}

/* ==========================================================================
   Bloque de imágenes de la ficha
   --------------------------------------------------------------------------
   La plantilla parte el bloque por la mitad: la imagen principal a la
   izquierda y hasta cuatro recuadros a la derecha. Con menos de cinco fotos
   quedaban huecos en blanco.

   POR QUÉ CON REJILLA Y NO CON FLEXBOX. Lo intenté tres veces encadenando
   «stretch» y alturas al 100 %, y las tres se rompió por un lado o por el
   otro: primero desaparecían los recuadros pequeños, luego se descuadraba la
   principal, luego desaparecía la principal. Siempre la misma causa —una
   altura que se mide contra un padre que no tiene altura propia—.

   La rejilla no tiene ese problema: se le dice «dos filas iguales» y las
   reparte, sin que nadie tenga que preguntarle su altura a nadie.

   QUIÉN MANDA. La imagen principal, con una proporción de 4:3 sobre media
   columna. La rejilla de la derecha se estira hasta esa altura y la reparte
   entre sus recuadros. Las fotos van fuera del flujo y solo rellenan: da igual
   que el archivo sea un cartel vertical, una panorámica o un cuadrado.
   ========================================================================== */

/* --- Una sola foto: ancho completo ----------------------------------------- */
.package-img-group.galeria-de-0 > .row > .col-lg-6:last-child,
.room-img-group.galeria-de-0 > .row > .col-lg-6:last-child {
    display: none;
}

.package-img-group.galeria-de-0 > .row > .col-lg-6:first-child,
.room-img-group.galeria-de-0 > .row > .col-lg-6:first-child {
    flex: 0 0 100%;
    max-width: 100%;
}

.package-img-group.galeria-de-0 .gallery-img-wrap,
.room-img-group.galeria-de-0 .gallery-img-wrap {
    /* A todo el ancho, la proporción natural de una foto vertical ocuparía dos
       pantallas. */
    aspect-ratio: 21 / 9;
}

/* --- Con columna derecha ---------------------------------------------------- */
.package-img-group:not(.galeria-de-0) > .row,
.room-img-group:not(.galeria-de-0) > .row {
    /* ESTA es la regla de la que dependia todo, y llevaba semanas perdiendo
       en silencio: la plantilla centra verticalmente con la clase de utilidad
       «align-items-center», y las utilidades de Bootstrap se declaran con
       !important. Sin repetirlo aqui, la columna derecha no se estiraba
       nunca, se quedaba a la altura de su contenido —cero, con las fotos
       fuera del flujo— y desaparecia.

       Es la causa de que el arreglo funcionara en la ficha de hotel y no en
       las de tour y actividad: el hotel no lleva esa clase. */
    align-items: stretch !important;
}

/* La principal marca la altura del bloque. */
.package-img-group:not(.galeria-de-0) > .row > .col-lg-6:first-child .gallery-img-wrap,
.room-img-group:not(.galeria-de-0) > .row > .col-lg-6:first-child .gallery-img-wrap {
    aspect-ratio: 4 / 3;
    height: auto;
}

/* La columna derecha se estira hasta esa altura.
   Hay que anular el «h-100» de la plantilla: un alto en porcentaje la sacaba
   del reparto y la dejaba a su contenido. */
.package-img-group:not(.galeria-de-0) > .row > .col-lg-6:last-child,
.room-img-group:not(.galeria-de-0) > .row > .col-lg-6:last-child {
    height: auto !important;
    display: flex;
}

/* La fila de recuadros pasa a ser una rejilla que ocupa toda esa altura. */
.package-img-group:not(.galeria-de-0) > .row > .col-lg-6:last-child > .row,
.room-img-group:not(.galeria-de-0) > .row > .col-lg-6:last-child > .row {
    flex: 1;
    height: auto !important;
    display: grid;
    gap: 1rem;
    margin: 0;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* Los recuadros dejan de ser columnas de Bootstrap: los coloca la rejilla. */
.package-img-group:not(.galeria-de-0) > .row > .col-lg-6:last-child > .row > .col-6,
.room-img-group:not(.galeria-de-0) > .row > .col-lg-6:last-child > .row > .col-6 {
    width: auto;
    max-width: none;
    flex: initial;
    padding: 0;
    margin: 0;
    display: flex;
    min-height: 0;
}

/* Y cada foto llena su celda sin que nadie tenga que calcular alturas. */
.package-img-group:not(.galeria-de-0) > .row > .col-lg-6:last-child .gallery-img-wrap,
.room-img-group:not(.galeria-de-0) > .row > .col-lg-6:last-child .gallery-img-wrap {
    flex: 1;
    height: auto;
    aspect-ratio: auto;
    min-height: 0;
}

/* --- Dos fotos: la de la derecha ocupa su mitad entera --------------------- */
.package-img-group.galeria-de-1 > .row > .col-lg-6:last-child > .row,
.room-img-group.galeria-de-1 > .row > .col-lg-6:last-child > .row {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

/* --- Tres fotos: 50 + 25 + 25, las dos de la derecha APILADAS --------------
   Puestas en fila salían dos tiras estrechas y altas. */
.package-img-group.galeria-de-2 > .row > .col-lg-6:last-child > .row,
.room-img-group.galeria-de-2 > .row > .col-lg-6:last-child > .row {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
}

/* --- Cuatro fotos: una ancha arriba y dos debajo ---------------------------
   En una rejilla de dos por dos, tres fotos dejan un hueco vacío; la primera
   cruza el ancho y lo llena. */
.package-img-group.galeria-de-3 > .row > .col-lg-6:last-child > .row > .col-6:first-child,
.room-img-group.galeria-de-3 > .row > .col-lg-6:last-child > .row > .col-6:first-child {
    grid-column: 1 / -1;
}

/* --- El recuadro y su foto -------------------------------------------------- */
.package-img-group[class*="galeria-de-"] .gallery-img-wrap,
.room-img-group[class*="galeria-de-"] .gallery-img-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

/* La foto va EN ABSOLUTO dentro de su recuadro: así no aporta altura a nadie.
   Mientras contaba como contenido, un cartel vertical estiraba su recuadro y
   descuadraba el bloque entero. */
.package-img-group[class*="galeria-de-"] .gallery-img-wrap img,
.room-img-group[class*="galeria-de-"] .gallery-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* --- En el móvil todo va apilado -------------------------------------------
   Las columnas dejan de estar una al lado de la otra, así que ya no hay altura
   que repartir: cada recuadro necesita su propia proporción o se queda sin
   alto, porque su foto no cuenta como contenido. */
@media (max-width: 991px) {
    .package-img-group:not(.galeria-de-0) > .row > .col-lg-6:last-child,
    .room-img-group:not(.galeria-de-0) > .row > .col-lg-6:last-child {
        display: block;
    }

    .package-img-group:not(.galeria-de-0) > .row > .col-lg-6:last-child > .row,
    .room-img-group:not(.galeria-de-0) > .row > .col-lg-6:last-child > .row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .package-img-group[class*="galeria-de-"] .gallery-img-wrap,
    .room-img-group[class*="galeria-de-"] .gallery-img-wrap {
        aspect-ratio: 16 / 10;
        height: auto;
        flex: initial;
    }
}

/* ==========================================================================
   Separación bajo la cabecera de una ficha
   --------------------------------------------------------------------------
   Las fichas abren con la banda del título y debajo dejaban 120 px en blanco
   antes de empezar el contenido. Es el espacio que la plantilla usa ENTRE
   secciones, pero aquí no separa dos bloques: separa el título de lo que
   titula, y lo que hace es empujar el contenido fuera de la primera pantalla.

   La regla se ancla al hermano siguiente de la banda, así que solo afecta a
   ese primer hueco. El resto del sitio conserva su espaciado.
   ========================================================================== */
.breadcrumb-section + .pt-120 {
    padding-top: 55px;
}

@media (max-width: 991px) {
    .breadcrumb-section + .pt-120 { padding-top: 42px; }
}

@media (max-width: 575px) {
    .breadcrumb-section + .pt-120 { padding-top: 32px; }
}

/* --- Rótulos con icono en el formulario de reserva -------------------------- */
.sidebar-booking-form .titulo-con-icono,
.booking-form-wrap .titulo-con-icono {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-booking-form .titulo-con-icono i,
.booking-form-wrap .titulo-con-icono i {
    font-size: 15px;
    color: var(--primary-color1, #63AB45);
}

/* --- Tipos de transporte disponibles ---------------------------------------
   La plantilla reparte las opciones en dos columnas. Cuando el vehículo solo
   admite un tipo —que es lo normal: un coche es un coche— quedaba una caja
   arriba a la izquierda y un hueco vacío al lado.

   Con una sola opción no hay nada que elegir, así que ocupa el ancho entero y
   se lee como lo que es: el dato del vehículo, no un selector.

   El botón de radio sigue en la página aunque no se vea: de él sale la tarifa
   con la que el formulario calcula el importe. */
.transport-type ul:has(> li:only-child) {
    columns: auto;
}

.transport-type ul > li:only-child {
    width: 100%;
    padding-top: 8px;
}

/* ==========================================================================
   Panel del cliente
   --------------------------------------------------------------------------
   Mismo lenguaje que el panel de administración: tarjeta neutra, un punto de
   color que significa algo, y una nota que explica la cifra.

   Antes eran cinco tarjetas de colores saturados distintos —verde, azul,
   naranja, oliva y turquesa— y cuatro de ellas enseñaban un cero con el mismo
   peso visual que un dato real. El color no decía nada y el cero pesaba igual
   que una reserva.
   ========================================================================== */
.cliente-saludo {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.cliente-saludo img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 50%;
    background: #EEF0F1;
}

.cliente-saludo h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
    color: #1F2937;
}

.cliente-saludo p {
    margin: 3px 0 0;
    font-size: 13.5px;
    color: #6C757D;
}

/* --- Indicadores ------------------------------------------------------------ */
.cliente-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}

.cliente-kpis .kpi {
    display: block;
    padding: 16px 18px;
    background: #FFFFFF;
    border: 1px solid #EDEFF1;
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.cliente-kpis .kpi:hover {
    border-color: #D6DBDE;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
}

/* Un cero no es una noticia: se ve, pero no compite con un dato real. */
.cliente-kpis .kpi-vacio { background: #FBFCFC; }
.cliente-kpis .kpi-vacio .kpi-value { color: #9AA1A8; }

.cliente-kpis .kpi-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6C757D;
}

.cliente-kpis .kpi-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #C4CAD0;
}

.cliente-kpis .kpi-dot.ok { background: #63AB45; }

.cliente-kpis .kpi-value {
    margin: 0 0 4px;
    font-size: 27px;
    font-weight: 800;
    line-height: 1;
    color: #1F2937;
    font-variant-numeric: tabular-nums;
}

.cliente-kpis .kpi-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #8B9298;
}

/* --- Bloque de reservas ------------------------------------------------------ */
.cliente-bloque {
    background: #FFFFFF;
    border: 1px solid #EDEFF1;
    border-radius: 12px;
    overflow: hidden;
}

.cliente-bloque-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid #F1F2F3;
}

.cliente-bloque-cabecera h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #1F2937;
}

.cliente-bloque-cabecera p {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: #6C757D;
}

.cliente-ver-todo {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 700;
    color: #63AB45;
}

.cliente-ver-todo:hover { text-decoration: underline; color: #63AB45; }

/* --- Tabla -------------------------------------------------------------------- */
.cliente-tabla { overflow-x: auto; }

.cliente-tabla table {
    width: 100%;
    border-collapse: collapse;
}

.cliente-tabla th {
    padding: 11px 16px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6C757D;
    text-align: left;
    white-space: nowrap;
    background: #FAFBFB;
    border-bottom: 1px solid #F1F2F3;
}

.cliente-tabla td {
    padding: 13px 16px;
    font-size: 13.5px;
    color: #3F4750;
    vertical-align: middle;
    border-bottom: 1px solid #F4F5F6;
}

.cliente-tabla tr:last-child td { border-bottom: 0; }

.cliente-producto {
    display: flex;
    align-items: center;
    gap: 11px;
}

.cliente-producto img {
    width: 46px;
    height: 40px;
    object-fit: cover;
    border-radius: 7px;
    flex: 0 0 auto;
}

.cliente-producto a,
.cliente-producto > div > span {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #1F2937;
    line-height: 1.35;
}

.cliente-producto a:hover { color: #63AB45; }

.cliente-producto small {
    display: block;
    font-size: 11.5px;
    color: #8B9298;
}

.cliente-detalle {
    display: inline-block;
    padding: 6px 13px;
    font-size: 12.5px;
    font-weight: 700;
    color: #1F2937;
    background: #FFFFFF;
    border: 1px solid #DFE3E5;
    border-radius: 6px;
    white-space: nowrap;
}

.cliente-detalle:hover {
    color: #1F2937;
    background: #F5F6F7;
    border-color: #C9CFD3;
}

/* --- Sin reservas ------------------------------------------------------------
   Un «No hay registros» suelto no dice qué hacer a continuación. */
.cliente-vacio {
    padding: 46px 24px;
    text-align: center;
}

.cliente-vacio i {
    display: block;
    margin-bottom: 10px;
    font-size: 30px;
    color: #C4CAD0;
}

.cliente-vacio p {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: #1F2937;
}

.cliente-vacio span {
    display: block;
    max-width: 380px;
    margin: 0 auto 18px;
    font-size: 13px;
    line-height: 1.55;
    color: #6C757D;
}

/* --- Responsive ---------------------------------------------------------------- */
@media (max-width: 1199px) {
    .cliente-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .cliente-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

    .cliente-saludo h1 { font-size: 20px; }

    .cliente-saludo img { width: 52px; height: 52px; }
}

@media (max-width: 479px) {
    .cliente-kpis { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .cliente-kpis .kpi { transition: none; }
}

/* --- Resto del área del cliente ---------------------------------------------
   Las pantallas de reservas, depósitos, transacciones y perfil traían la caja
   de la plantilla: sin borde, con la tabla pegada al borde y el título dentro.
   Aquí comparten la misma tarjeta y la misma tabla que el panel, para que las
   cinco se lean igual.
   -------------------------------------------------------------------------- */
.main-content .recent-listing-area {
    padding: 0;
    background: #FFFFFF;
    border: 1px solid #EDEFF1;
    border-radius: 12px;
    overflow: hidden;
}

.main-content .recent-listing-area > h6,
.main-content .recent-listing-area > .title-and-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 800;
    color: #1F2937;
    border-bottom: 1px solid #F1F2F3;
}

.main-content .recent-listing-table { overflow-x: auto; }

.main-content table.eg-table2 {
    width: 100%;
    border-collapse: collapse;
}

.main-content table.eg-table2 th {
    padding: 11px 16px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6C757D;
    text-align: left;
    white-space: nowrap;
    background: #FAFBFB;
    border-bottom: 1px solid #F1F2F3;
}

.main-content table.eg-table2 td {
    padding: 13px 16px;
    font-size: 13.5px;
    color: #3F4750;
    vertical-align: middle;
    border-bottom: 1px solid #F4F5F6;
}

.main-content table.eg-table2 tr:last-child td { border-bottom: 0; }

/* La celda del estado vacío ocupa toda la fila: sin relleno propio, o el
   bloque queda descentrado. */
.main-content table.eg-table2 td:has(> .cliente-vacio) { padding: 0; }

/* --- Botón de la marca -------------------------------------------------------- */
.cliente-boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 700;
    color: #FFFFFF;
    background: var(--primary-color1, #63AB45);
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    transition: filter .15s ease;
}

.cliente-boton:hover { color: #FFFFFF; filter: brightness(.94); }

/* --- Selector de cuántos movimientos mostrar ---------------------------------- */
.main-content .paginate_filter {
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
    color: #1F2937;
    background: #FFFFFF;
    border: 1px solid #DFE3E5;
    border-radius: 7px;
}

/* --- Cancelar no destruye nada: no lleva el color de una acción destructiva --- */
.main-content .primary-btn3.cancel {
    display: inline-flex;
    align-items: center;
    color: #1F2937;
    background: #FFFFFF;
    border: 1px solid #DFE3E5;
}

.main-content .primary-btn3.cancel:hover {
    color: #1F2937;
    background: #F5F6F7;
    border-color: #C9CFD3;
}

@media (prefers-reduced-motion: reduce) {
    .cliente-boton { transition: none; }
}

/* ---------------------------------------------------------------------------
   Días ya reservados

   Un vehículo o un alojamiento aprobados para unas fechas no se pueden volver
   a alquilar. El calendario apaga esos días; aquí se hace que se note, porque
   el gris que trae la biblioteca es el mismo que usa para los días del mes
   anterior y el cliente no distingue «no es de este mes» de «está cogido».
--------------------------------------------------------------------------- */
.daterangepicker td.disabled,
.daterangepicker option.disabled {
    color: #B9BFC7;
    text-decoration: line-through;
    background-color: #F1F3F5;
    cursor: not-allowed;
}

.fechas-ocupadas-nota,
.fechas-ocupadas-error {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.45;
}

.fechas-ocupadas-nota {
    color: #6C757D;
}

.fechas-ocupadas-error {
    padding: 8px 12px;
    border-radius: 6px;
    color: #A32133;
    background-color: #FDECEE;
    border: 1px solid #F5C2C9;
}

/* ---------------------------------------------------------------------------
   Pago por transferencia

   El cliente tiene que salir de aquí con un número de cuenta bien copiado, así
   que ese número manda: monospaciado, grande y con un botón para copiarlo.
--------------------------------------------------------------------------- */
.pago-transferencia {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid #E9ECEF;
}

.transferencia-aviso {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 22px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #F1F6EE;
    border: 1px solid #D5E7CB;
}

.transferencia-aviso i {
    flex: none;
    margin-top: 2px;
    color: #63AB45;
    font-size: 17px;
}

.transferencia-aviso p {
    margin: 0;
    color: #3F5C33;
    font-size: 14px;
    line-height: 1.55;
}

.transferencia-cuentas {
    display: grid;
    gap: 12px;
    margin-bottom: 26px;
}

.transferencia-cuenta {
    position: relative;
    display: block;
    margin: 0;
    padding: 16px 18px 16px 46px;
    border: 1px solid #E1E5EA;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.transferencia-cuenta:hover {
    border-color: #B8D6A9;
}

.transferencia-cuenta input[type="radio"] {
    position: absolute;
    top: 20px;
    left: 18px;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #63AB45;
}

.transferencia-cuenta:has(input:checked) {
    border-color: #63AB45;
    box-shadow: 0 0 0 1px #63AB45;
}

.transferencia-cuenta-cuerpo {
    display: block;
}

.transferencia-banco {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #1F2937;
}

.transferencia-moneda {
    padding: 1px 8px;
    border-radius: 10px;
    background: #F1F3F5;
    color: #6C757D;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
}

.transferencia-numero {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #1F2937;
}

.transferencia-copiar {
    padding: 3px 7px;
    border: 1px solid #E1E5EA;
    border-radius: 6px;
    background: #fff;
    color: #6C757D;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.transferencia-copiar:hover,
.transferencia-copiar.copiado {
    color: #63AB45;
    border-color: #63AB45;
}

.transferencia-detalle {
    display: block;
    margin-top: 6px;
    color: #6C757D;
    font-size: 13px;
}

.transferencia-instrucciones {
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #E9ECEF;
    color: #5A6772;
    font-size: 13px;
    line-height: 1.5;
}

.transferencia-formulario .form-inner small {
    display: block;
    margin-top: 6px;
    color: #6C757D;
    font-size: 12.5px;
}

.transferencia-formulario input[type="file"] {
    width: 100%;
    padding: 11px 14px;
    border: 1px dashed #C7CDD4;
    border-radius: 8px;
    background: #FAFBFC;
    font-size: 14px;
}

.transferencia-error {
    display: block;
    margin-top: 6px;
    color: #A32133;
    font-size: 13px;
}

/* El estado de un comprobante, en el área del cliente. */
.transferencia-estado {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.transferencia-estado.pendiente {
    color: #8A6100;
    background: #FFF3D6;
}

.transferencia-estado.aprobada {
    color: #2F6B1C;
    background: #E7F4E1;
}

.transferencia-estado.rechazada {
    color: #A32133;
    background: #FDECEE;
}

.transferencia-motivo-cliente {
    display: block;
    margin-top: 6px;
    color: #A32133;
    font-size: 12.5px;
    line-height: 1.45;
}

.cliente-seccion-titulo {
    margin-bottom: 18px;
}

.cliente-seccion-titulo h5 {
    margin: 0 0 4px;
    font-size: 18px;
    color: #1F2937;
}

.cliente-seccion-titulo span {
    color: #6C757D;
    font-size: 13.5px;
}

/* ---------------------------------------------------------------------------
   Páginas de contenido: términos, privacidad, sobre nosotros…

   Todas salen del mismo widget de texto, y ese widget reutiliza la clase
   «banner-content» del banner de portada, donde el texto va BLANCO sobre una
   foto oscura. Sobre fondo blanco eso deja los enlaces —el correo, el
   teléfono, el WhatsApp— prácticamente invisibles.

   La causa de fondo es una regla global de la plantilla: «a { color: rgb(241
   241 241) }» pinta de casi blanco todos los enlaces del sitio. No se toca ahí
   porque media plantilla se apoya en ella sobre fondos oscuros; se corrige
   donde importa, que es aquí.

   De paso se baja el tono general. Un documento legal se lee de arriba abajo y
   se consulta a saltos: pide una columna estrecha, títulos que se distingan
   sin gritar y un negro que no sea negro puro.
--------------------------------------------------------------------------- */
.page-content-area .banner-content {
    /* Nadie lee cómodamente una línea de 1100 píxeles. La unidad «ch» mide
       el ancho del cero, más ancho que la letra media, así que 56ch dan
       unos 78 caracteres por línea: el largo que se lee sin perder el
       renglón al saltar. */
    max-width: 56ch;
    margin-inline: auto;
    color: #454C56;
    font-size: 16.5px;
    line-height: 1.75;
}

.page-content-area .banner-content > p {
    /* El widget envuelve todo en un <p>, y un párrafo no puede contener
       títulos: el navegador lo cierra por su cuenta. Se neutraliza para que no
       aporte ni márgenes ni tamaño propios. */
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.page-content-area .banner-content p {
    margin: 0 0 18px;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* --- Títulos de apartado ---------------------------------------------------
   Antes: negro puro, peso máximo y el mismo cuerpo que un titular de portada.
   En un texto de dieciocho apartados eso es un martilleo. */
.page-content-area .banner-content h2,
.page-content-area .banner-content h3,
.page-content-area .banner-content h4 {
    margin: 46px 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #EAEDF0;
    color: #262B33;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.page-content-area .banner-content h2 { font-size: 26px; }
.page-content-area .banner-content h3 { font-size: 21px; }
.page-content-area .banner-content h4 { font-size: 18px; border-bottom: none; padding-bottom: 0; }

/* El primero no necesita separarse de nada. */
.page-content-area .banner-content h2:first-child,
.page-content-area .banner-content h3:first-child,
.page-content-area .banner-content h4:first-child {
    margin-top: 0;
}

/* Los títulos vienen del editor con <strong> dentro; no deben pesar más aún. */
.page-content-area .banner-content h2 strong,
.page-content-area .banner-content h3 strong,
.page-content-area .banner-content h4 strong {
    font-weight: inherit;
    color: inherit;
}

/* --- Énfasis ---------------------------------------------------------------
   Un «negrita» dentro del párrafo marca el concepto, no chilla. */
.page-content-area .banner-content strong,
.page-content-area .banner-content b {
    color: #262B33;
    font-weight: 600;
}

.page-content-area .banner-content em {
    color: #6B7480;
    font-style: italic;
}

/* --- Enlaces: el arreglo que se ve ----------------------------------------- */
.page-content-area .banner-content a {
    color: #3F7029;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(63, 112, 41, .35);
    transition: color .15s ease, text-decoration-color .15s ease;
    overflow-wrap: anywhere;   /* un correo largo no debe desbordar en el móvil */
}

.page-content-area .banner-content a:hover,
.page-content-area .banner-content a:focus-visible {
    color: #63AB45;
    text-decoration-color: currentColor;
}

/* --- Listas ---------------------------------------------------------------- */
.page-content-area .banner-content ul,
.page-content-area .banner-content ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.page-content-area .banner-content li {
    margin-bottom: 8px;
}

/* --- Bloque de contacto del final ------------------------------------------
   Es una dirección postal partida con <br>: se le da aire y un fondo tenue
   para que se lea como una ficha y no como un párrafo más. */
.page-content-area .banner-content p:has(br) {
    padding: 16px 20px;
    border-radius: 10px;
    border: 1px solid #EAEDF0;
    background: #FAFBFC;
    line-height: 1.9;
}

@media (max-width: 767px) {
    .page-content-area .banner-content {
        font-size: 16px;
    }

    .page-content-area .banner-content h2 { font-size: 23px; }
    .page-content-area .banner-content h3 { font-size: 19px; }

    .page-content-area .banner-content h2,
    .page-content-area .banner-content h3,
    .page-content-area .banner-content h4 {
        margin-top: 36px;
    }
}

/* ---------------------------------------------------------------------------
   Barra inferior del pie

   Traía las redes a un extremo, el copyright al otro y los enlaces legales
   detrás. Como los tres no caben seguidos, el tercero se descolgaba a una
   segunda línea pegado a la izquierda: parecía un despiste, no un diseño.

   Ahora los tres van centrados y juntos. Si no caben, envuelven centrados, que
   sigue leyéndose como un bloque.
--------------------------------------------------------------------------- */
.footer-section .footer-bottom .pie-inferior {
    column-gap: 26px;
    row-gap: 12px;
    text-align: center;
}

/* Un interletrado de 0,42 px sobre una línea de cien caracteres son cuarenta
   píxeles de aire que aquí no sobran. */
.footer-section .footer-bottom .pie-inferior p {
    letter-spacing: 0.01em;
}

.footer-section .footer-bottom .pie-inferior .footer-right ul {
    gap: 26px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-section .footer-bottom .pie-inferior .footer-right ul li::before {
    left: -15px;
}

@media (max-width: 575px) {
    .footer-section .footer-bottom .pie-inferior {
        column-gap: 18px;
    }
}

/* ---------------------------------------------------------------------------
   Columnas del pie

   Las cuatro columnas competían entre sí. La de contacto llevaba TRES títulos
   del mismo tamaño y color que los títulos de columna, así que parecía tres
   columnas metidas en una; la de la derecha llevaba dos. El resultado eran
   siete titulares gritando a la vez donde debería haber cuatro.

   Aquí se pone una jerarquía sencilla: un título por columna, y dentro las
   etiquetas de cada dato en pequeño. Lo que se lee primero es el título; lo
   que se busca —el teléfono, el correo— se lee entero y claro.
--------------------------------------------------------------------------- */

/* --- Título de columna --------------------------------------------------- */
.footer-section .footer-top .footer-widget > .widget-title {
    margin-bottom: 22px;
}

.footer-section .footer-top .footer-widget > .widget-title h5 {
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

/* --- Etiquetas de cada dato de contacto -----------------------------------
   No son títulos: son el nombre del dato que viene debajo. */
.footer-section .footer-top .footer-widget .single-contact .widget-title,
.footer-section .footer-top .footer-widget .payment-partner .widget-title {
    margin-bottom: 6px;
    gap: 8px;
}

.footer-section .footer-top .footer-widget .single-contact .widget-title h5,
.footer-section .footer-top .footer-widget .payment-partner .widget-title h5 {
    color: rgba(255, 255, 255, 0.62);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.4;
}

.footer-section .footer-top .footer-widget .single-contact .widget-title svg,
.footer-section .footer-top .footer-widget .payment-partner .widget-title svg {
    width: 13px;
    height: 13px;
    flex: none;
}

/* --- El dato en sí --------------------------------------------------------
   Es lo que la gente viene a buscar, así que se lee más que su etiqueta. */
.footer-section .footer-top .footer-widget .single-contact a {
    display: inline-block;
    max-width: 30ch;          /* la dirección parte por donde toca, no a mitad */
    color: rgba(255, 255, 255, 0.82);
    font-size: 15.5px;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

/* Un espacio igual entre los tres bloques, en lugar de 30, 35 y ninguno. */
.footer-section .footer-top .footer-widget .single-contact {
    margin-bottom: 26px;
}

.footer-section .footer-top .footer-widget .single-contact:last-child {
    margin-bottom: 0;
}

/* --- Enlaces y texto ------------------------------------------------------- */
.footer-section .footer-top .footer-widget .widget-list li a {
    font-size: 15.5px;
    line-height: 1.6;
}

.footer-section .footer-top .footer-widget > p {
    max-width: 34ch;
    margin-bottom: 28px;
    font-size: 15.5px;
    line-height: 1.65;
}

.footer-section .footer-top .footer-widget .payment-partner {
    margin-top: 4px;
}

/* --- Barra inferior en una línea ------------------------------------------
   Con estos tamaños los tres bloques caben seguidos en pantallas de 1400 px o
   más. Por debajo envuelven, pero centrados: se lee como un bloque, no como
   una pieza descolgada. --------------------------------------------------- */
.footer-section .footer-bottom .pie-inferior p {
    font-size: 13.5px;
}

.footer-section .footer-bottom .pie-inferior .footer-right ul li a {
    font-size: 14px;
}

.footer-section .footer-bottom .pie-inferior .social-list {
    gap: 8px;
}

.footer-section .footer-bottom .pie-inferior .social-list li a {
    width: 30px;
    height: 30px;
}

/* El reclamo de la primera columna iba a 30 px con interlineado 1,6: en una
   columna estrecha partía en tres renglones muy separados y dejaba un hueco
   debajo del resto. Bajarlo un punto y juntar las líneas lo cuadra con las
   demás columnas sin quitarle presencia. */
.footer-section .footer-top .footer-widget h3 {
    font-size: 26px;
    line-height: 1.3;
    margin-bottom: 24px;
    max-width: 16ch;
}

@media (max-width: 1399px) {
    .footer-section .footer-top .footer-widget h3 {
        font-size: 23px;
    }
}

.footer-section .footer-top .footer-widget .footer-logo img {
    max-width: 210px;
}

/* ---------------------------------------------------------------------------
   Contadores por tipo de viajero
--------------------------------------------------------------------------- */
.viajero-fila .number-input-lable {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.viajero-edades {
    padding: 1px 8px;
    border-radius: 10px;
    background: #F1F3F5;
    color: #6C757D;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .02em;
}

.viajero-precio {
    color: #63AB45;
    font-weight: 600;
}

.viajero-fila .quantity-counter .viajero-menos,
.viajero-fila .quantity-counter .viajero-mas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6C757D;
    cursor: pointer;
    transition: color .15s ease;
}

.viajero-fila .quantity-counter .viajero-menos:hover,
.viajero-fila .quantity-counter .viajero-mas:hover {
    color: #63AB45;
}

.viajeros-aviso {
    margin: 10px 0 0;
    padding: 9px 13px;
    border-radius: 8px;
    background: #FFF3D6;
    border: 1px solid #FBE0A2;
    color: #8A6100;
    font-size: 13px;
    line-height: 1.45;
}

/* Una rejilla por fila: nombre y edades a la izquierda, precio pegado al
   contador. Sin esto cada fila se colocaba a su aire según lo largo que
   fuera el nombre —«Niño» dejaba sitio al contador en la misma línea y
   «Envejeciente» no—, y las tres parecían de formularios distintos. */
.sidebar-booking-form .viajeros-bloque .viajero-fila {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6px 18px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.sidebar-booking-form .viajeros-bloque .viajero-fila:last-of-type {
    border-bottom: none;
}

.sidebar-booking-form .viajeros-bloque .viajero-fila .number-input-lable {
    margin: 0;
    min-width: 0;
}

.sidebar-booking-form .viajeros-bloque .viajero-fila .quantity-counter {
    margin: 0;
    justify-self: end;
}

.viajero-precio {
    margin-left: auto;
    white-space: nowrap;
}

/* El nombre y el precio caben en dos renglones cortos; sin esto la fila queda
   tan alta como la caja entera. */
.sidebar-booking-form .viajeros-bloque .viajero-fila .number-input-lable {
    row-gap: 2px;
    font-size: 17px;
    line-height: 1.3;
}

.sidebar-booking-form .viajeros-bloque .viajero-fila {
    padding: 12px 0;
}

/* ---------------------------------------------------------------------------
   Solicitud de presupuesto

   Lo que se pide aquí no es una reserva: es una pregunta. Por eso el bloque no
   grita como una caja de compra, y el botón dice «Solicitar cotización», no
   «Reservar».
--------------------------------------------------------------------------- */
.solicitud-cotizacion {
    padding-top: 4px;
}

.solicitud-cabecera h4 {
    margin: 0 0 6px;
    font-size: 20px;
    color: #1F2937;
}

.solicitud-cabecera p {
    margin: 0 0 22px;
    color: #6C757D;
    font-size: 14px;
    line-height: 1.55;
}

.solicitud-subtitulo {
    margin: 24px 0 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6C757D;
}

.solicitud-formulario .form-inner label {
    display: block;
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 500;
    color: #454C56;
}

.solicitud-formulario input[type="date"],
.solicitud-formulario input[type="number"],
.solicitud-formulario select,
.solicitud-formulario textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #E1E5EA;
    border-radius: 8px;
    background: #fff;
    font-size: 14.5px;
    color: #1F2937;
}

.solicitud-formulario input:focus,
.solicitud-formulario select:focus,
.solicitud-formulario textarea:focus {
    outline: none;
    border-color: #63AB45;
    box-shadow: 0 0 0 1px #63AB45;
}

.solicitud-error {
    display: block;
    margin-top: 5px;
    color: #A32133;
    font-size: 12.5px;
}

.solicitud-pie {
    margin: 12px 0 0;
    color: #6C757D;
    font-size: 12.5px;
    text-align: center;
}

.solicitud-aviso {
    padding: 20px;
    border-radius: 10px;
    background: #F1F6EE;
    border: 1px solid #D5E7CB;
    text-align: center;
}

.solicitud-aviso i {
    font-size: 26px;
    color: #63AB45;
}

.solicitud-aviso p {
    margin: 10px 0 16px;
    color: #3F5C33;
    font-size: 14px;
    line-height: 1.55;
}

/* --- Viajeros de la solicitud ---------------------------------------------
   El nombre y el tramo de edad iban en la misma linea, dentro de una columna
   de menos de trescientos pixeles. La pastilla de la edad se comprimia hasta
   partirse en tres renglones —«12-» «64» «años»— y, como cada nombre mide lo
   suyo, los contadores acababan cada uno a una altura y a una anchura.

   Aqui cada fila es la misma rejilla: una columna para el texto y otra fija
   para el contador. El tramo de edad baja debajo del nombre, que es donde cabe,
   y no se parte nunca. */
.solicitud-viajeros-lista {
    display: grid;
    gap: 8px;
}

.solicitud-viajero {
    display: grid;
    grid-template-columns: 1fr 92px;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(31, 41, 55, .07);
}

.solicitud-viajero:last-child {
    border-bottom: 0;
}

.solicitud-viajero label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.25;
    color: #2E3540;
    cursor: pointer;
}

/* Que no se parta: es lo que hacia que la fila creciera a tres renglones. */
.viajero-edades {
    white-space: nowrap;
}

.solicitud-viajero .viajero-edades {
    padding: 0;
    background: none;
    font-size: 11.5px;
    color: #8A929C;
}

/* El contador ocupa toda su columna: asi los tres quedan alineados, midan
   lo que midan los nombres. */
.solicitud-viajero .solicitud-cantidad {
    width: 100%;
    padding: 8px 10px;
    text-align: center;
    font-weight: 600;
}

/* --- El «desde» de un hotel ----------------------------------------------- */
.hotel-desde {
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #EAEDF0;
}

.hotel-desde > span:first-child {
    color: #6C757D;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.hotel-desde strong {
    display: block;
    margin: 2px 0;
    font-size: 28px;
    color: #1F2937;
}

.hotel-desde-nota {
    color: #6C757D;
    font-size: 13px;
}

/* --- Extras del hotel y modalidades de visado ------------------------------ */
.hotel-extras-lista,
.visa-modalidades-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hotel-extras-lista li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #F1F3F5;
    font-size: 14px;
    color: #454C56;
}

.hotel-extras-lista li:last-child {
    border-bottom: none;
}

.hotel-extras-lista .price {
    color: #63AB45;
    font-weight: 600;
    white-space: nowrap;
}

.visa-modalidades-lista li {
    padding: 12px 0;
    border-bottom: 1px solid #F1F3F5;
}

.visa-modalidades-lista li:last-child {
    border-bottom: none;
}

.visa-modalidad-nombre {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #1F2937;
}

.visa-modalidad-plazo,
.visa-modalidad-desde {
    display: inline-block;
    margin-top: 3px;
    margin-right: 10px;
    color: #6C757D;
    font-size: 13px;
}

.visa-modalidad-desde {
    color: #63AB45;
    font-weight: 600;
}

/* --- Las cotizaciones en el área del cliente ------------------------------- */
.cotizacion-fecha {
    display: block;
    margin-top: 3px;
    color: #6C757D;
    font-size: 12.5px;
}

.cotizacion-plazo {
    display: block;
    margin-top: 4px;
    color: #8A6100;
    font-size: 12.5px;
    font-weight: 600;
}

.cotizacion-caducada {
    display: block;
    margin-top: 4px;
    color: #A32133;
    font-size: 12.5px;
}

.cotizacion-respuesta {
    display: block;
    margin-top: 6px;
    max-width: 34ch;
    color: #6C757D;
    font-size: 12.5px;
    line-height: 1.45;
}

.cotizacion-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cotizacion-rechazar {
    padding: 8px 14px;
    border: 1px solid #E1E5EA;
    border-radius: 8px;
    background: #fff;
    color: #6C757D;
    font-size: 13.5px;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.cotizacion-rechazar:hover {
    color: #A32133;
    border-color: #F5C2C9;
}

/* Los mismos colores de estado que en el panel. */
.transferencia-estado.cotizada {
    color: #1D4ED8;
    background: #E7EDFD;
}

.transferencia-estado.caducada {
    color: #6C757D;
    background: #F1F3F5;
}

.transf-estado.cotizada {
    color: #1D4ED8;
    background: #E7EDFD;
    border: 1px solid #C7D7FA;
}

.transf-estado.caducada {
    color: #6C757D;
    background: #F1F3F5;
    border: 1px solid #E1E5EA;
}

/* ---------------------------------------------------------------------------
   Alojamientos completos
--------------------------------------------------------------------------- */
.alojamiento-cabecera h2 {
    margin: 0 0 8px;
    font-size: 30px;
    color: #1F2937;
    line-height: 1.25;
}

.alojamiento-donde {
    margin: 0 0 10px;
    color: #6C757D;
    font-size: 15px;
}

.alojamiento-resumen {
    margin: 0 0 26px;
    color: #454C56;
    font-size: 15.5px;
}

.alojamiento-descripcion {
    margin-bottom: 30px;
    color: #454C56;
    font-size: 16px;
    line-height: 1.7;
}

.alojamiento-bloque {
    padding-top: 26px;
    margin-bottom: 26px;
    border-top: 1px solid #EAEDF0;
}

.alojamiento-bloque h4 {
    margin: 0 0 16px;
    font-size: 19px;
    color: #1F2937;
}

.alojamiento-comodidades {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.alojamiento-comodidades li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #454C56;
    font-size: 15px;
}

.alojamiento-comodidades i {
    color: #63AB45;
}

.alojamiento-normas {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.alojamiento-normas li {
    padding: 7px 0;
    border-bottom: 1px solid #F1F3F5;
    color: #454C56;
    font-size: 15px;
}

.alojamiento-normas-texto {
    margin: 0;
    color: #6C757D;
    font-size: 14.5px;
    line-height: 1.65;
}

/* --- La caja de reserva --------------------------------------------------- */
.alojamiento-precio {
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid #EAEDF0;
}

.alojamiento-precio strong {
    font-size: 28px;
    color: #1F2937;
}

.alojamiento-precio > span {
    color: #6C757D;
    font-size: 15px;
}

.alojamiento-precio-nota {
    display: block;
    margin-top: 6px;
    color: #6C757D;
    font-size: 13px;
}

.alojamiento-huespedes {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid rgba(0, 0, 0, .06);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.alojamiento-huespedes .number-input-lable {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 17px;
}

.alojamiento-huespedes .quantity-counter .huespedes-menos,
.alojamiento-huespedes .quantity-counter .huespedes-mas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6C757D;
    cursor: pointer;
}

.alojamiento-huespedes .quantity-counter .huespedes-menos:hover,
.alojamiento-huespedes .quantity-counter .huespedes-mas:hover {
    color: #63AB45;
}

.alojamiento-aviso {
    margin: 12px 0 0;
    padding: 9px 13px;
    border-radius: 8px;
    background: #FFF3D6;
    border: 1px solid #FBE0A2;
    color: #8A6100;
    font-size: 13px;
}

.alojamiento-desglose {
    margin: 20px 0 4px;
}

.alojamiento-linea {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    color: #454C56;
    font-size: 14.5px;
}

.alojamiento-linea-importe {
    font-variant-numeric: tabular-nums;
}

/* --- Miniaturas del panel -------------------------------------------------- */
.alojamiento-miniatura {
    max-width: 180px;
    border-radius: 8px;
}

.alojamiento-galeria {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.alojamiento-galeria figure {
    position: relative;
    margin: 0;
}

.alojamiento-galeria img {
    width: 118px;
    height: 88px;
    object-fit: cover;
    border-radius: 8px;
}

.alojamiento-quitar-foto {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: #DD344A;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.comodidad-fila {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.comodidad-fila .username-input {
    flex: 1;
}

/* --- Galería de la ficha --------------------------------------------------- */
.galeria-ficha {
    display: grid;
    gap: 10px;
    margin-bottom: 30px;
}

.galeria-ficha figure {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.galeria-ficha img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Una sola foto ocupa el ancho entero: dejar media caja vacía queda peor. */
.galeria-de-1 { grid-template-columns: 1fr; }
.galeria-de-1 figure { aspect-ratio: 16 / 9; }

.galeria-de-2 { grid-template-columns: 1fr 1fr; }
.galeria-de-2 figure { aspect-ratio: 4 / 3; }

/* Con tres: una grande a la izquierda y dos apiladas a la derecha. */
.galeria-de-3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.galeria-de-3 .galeria-principal {
    grid-row: 1 / 3;
}

.galeria-de-3 figure { min-height: 170px; }
.galeria-de-3 .galeria-principal { min-height: 350px; }

.galeria-de-4 {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.galeria-de-4 .galeria-principal {
    grid-row: 1 / 3;
    min-height: 350px;
}

.galeria-de-4 figure { min-height: 170px; }

.galeria-mas {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

@media (max-width: 575px) {
    .galeria-ficha {
        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;
    }

    .galeria-ficha figure {
        aspect-ratio: 16 / 10;
        min-height: 0 !important;
    }

    .galeria-ficha .galeria-principal {
        grid-row: auto !important;
        min-height: 0 !important;
    }
}

/* --- Tarjeta de alojamiento en el listado ---------------------------------- */
.alojamiento-tarjeta {
    height: 100%;
    border: 1px solid #E9ECEF;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.alojamiento-tarjeta:hover {
    border-color: #B8D6A9;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}

.alojamiento-tarjeta-foto {
    display: block;
    aspect-ratio: 4 / 3;
    background: #F1F3F5;
}

.alojamiento-tarjeta-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.alojamiento-tarjeta-cuerpo {
    padding: 16px 18px 18px;
}

.alojamiento-tarjeta-donde {
    color: #6C757D;
    font-size: 13px;
}

.alojamiento-tarjeta-cuerpo h5 {
    margin: 6px 0 4px;
    font-size: 17px;
    line-height: 1.35;
}

.alojamiento-tarjeta-cuerpo h5 a {
    color: #1F2937;
}

.alojamiento-tarjeta-cuerpo h5 a:hover {
    color: #63AB45;
}

.alojamiento-tarjeta-casa {
    margin: 0 0 14px;
    color: #6C757D;
    font-size: 13.5px;
}

.alojamiento-tarjeta-pie {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid #F1F3F5;
}

.alojamiento-tarjeta-precio strong {
    font-size: 19px;
    color: #1F2937;
}

.alojamiento-tarjeta-precio {
    color: #6C757D;
    font-size: 13px;
}

.alojamiento-tarjeta-gente {
    color: #6C757D;
    font-size: 13px;
    white-space: nowrap;
}

/* El contador de huéspedes con su propia forma. Heredar la de la plantilla no
   servía: coloca los botones en absoluto y espera otra estructura. */
.sidebar-booking-form .alojamiento-huespedes .quantity-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border: 1px solid #E1E5EA;
    border-radius: 30px;
    background: #fff;
}

.sidebar-booking-form .alojamiento-huespedes .quantity-counter a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #E1E5EA;
    border-radius: 50%;
    color: #6C757D;
    font-size: 15px;
    transition: color .15s ease, border-color .15s ease;
}

.sidebar-booking-form .alojamiento-huespedes .quantity-counter a:hover {
    color: #63AB45;
    border-color: #63AB45;
}

.sidebar-booking-form .alojamiento-huespedes .quantity-counter .quantity__input {
    width: 42px;
    height: auto;
    padding: 0;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #1F2937;
}

.sidebar-booking-form .alojamiento-huespedes .number-input-lable {
    white-space: nowrap;
}

.sidebar-booking-form .alojamiento-huespedes .viajero-edades {
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Rutas aéreas
--------------------------------------------------------------------------- */
.vuelo-foto {
    margin-bottom: 26px;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.vuelo-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vuelo-cabecera h2 {
    margin: 0 0 10px;
    font-size: 30px;
    line-height: 1.25;
    color: #1F2937;
}

.vuelo-ruta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 26px;
    font-size: 18px;
    color: #454C56;
}

.vuelo-ruta i {
    color: #63AB45;
}

.vuelo-datos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px 24px;
    margin: 0 0 30px;
    padding: 22px 0;
    border-top: 1px solid #EAEDF0;
    border-bottom: 1px solid #EAEDF0;
    list-style: none;
}

.vuelo-datos li span {
    display: block;
    color: #6C757D;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.vuelo-datos li strong {
    display: block;
    margin-top: 3px;
    color: #1F2937;
    font-size: 15.5px;
}

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

.vuelo-relacionados li {
    padding: 11px 0;
    border-bottom: 1px solid #F1F3F5;
}

.vuelo-relacionados li:last-child {
    border-bottom: none;
}

.vuelo-relacionados a {
    color: #1F2937;
    font-weight: 600;
    font-size: 15px;
}

.vuelo-relacionados a:hover {
    color: #63AB45;
}

.vuelo-relacionados span {
    display: block;
    margin-top: 2px;
    color: #6C757D;
    font-size: 13px;
}

/* --- Tarjeta del listado --------------------------------------------------- */
.vuelo-tarjeta {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #E9ECEF;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.vuelo-tarjeta:hover {
    border-color: #B8D6A9;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}

.vuelo-tarjeta-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 7;
    background: #F1F6EE;
}

.vuelo-tarjeta-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vuelo-tarjeta-sinfoto {
    color: #B8D6A9;
    font-size: 40px;
}

.vuelo-tarjeta-cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 18px 18px;
}

.vuelo-tarjeta-ruta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    color: #1F2937;
}

.vuelo-tarjeta-ruta i {
    color: #63AB45;
}

.vuelo-tarjeta-datos {
    margin: 0 0 16px;
    color: #6C757D;
    font-size: 13.5px;
}

.vuelo-tarjeta-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #F1F3F5;
}

.vuelo-tarjeta-precio {
    color: #6C757D;
    font-size: 13px;
}

.vuelo-tarjeta-precio strong {
    display: block;
    color: #1F2937;
    font-size: 19px;
}

.vuelo-tarjeta-boton {
    padding: 8px 14px;
    border: 1px solid #63AB45;
    border-radius: 8px;
    color: #3F7029;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.vuelo-tarjeta-boton:hover {
    background: #63AB45;
    color: #fff;
}

/* ==========================================================================
   Descripción de las fichas del catálogo
   --------------------------------------------------------------------------
   Lo que escribe la agencia en el editor son párrafos, títulos y listas. Las
   cinco fichas lo metían dentro de un <p>, y un párrafo no puede contener un
   <h3> ni un <ul>: el navegador cierra el párrafo al llegar al primer bloque.
   Resultado, el primer párrafo salía con estilo y todo lo demás —los títulos
   de apartado, las listas de lugares incluidos— en negro plano y sin viñetas.

   Aquí el contenedor es un <div> con reglas propias, las mismas que rigen las
   páginas legales, para que un texto con formato se lea igual en todo el sitio.
   ========================================================================== */
.descripcion-rica {
    color: #454C56;
    font-size: 16px;
    line-height: 1.75;
}

.descripcion-rica p {
    margin: 0 0 16px;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.descripcion-rica > :last-child {
    margin-bottom: 0;
}

/* --- Títulos de apartado --------------------------------------------------- */
.descripcion-rica h2,
.descripcion-rica h3,
.descripcion-rica h4,
.descripcion-rica h5 {
    margin: 32px 0 14px;
    color: #262B33;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.descripcion-rica h2 { font-size: 23px; }
.descripcion-rica h3 { font-size: 20px; }
.descripcion-rica h4 { font-size: 17px; }
.descripcion-rica h5 { font-size: 16px; }

.descripcion-rica > :first-child {
    margin-top: 0;
}

/* El editor deja <span style="font-size:15px"> dentro de los títulos: no debe
   encoger un titular por debajo del texto que encabeza. */
.descripcion-rica h2 span,
.descripcion-rica h3 span,
.descripcion-rica h4 span,
.descripcion-rica h5 span {
    font-size: inherit !important;
}

.descripcion-rica h2 strong,
.descripcion-rica h3 strong,
.descripcion-rica h4 strong,
.descripcion-rica h5 strong {
    font-weight: inherit;
    color: inherit;
}

/* --- Listas ---------------------------------------------------------------- */
.descripcion-rica ul,
.descripcion-rica ol {
    margin: 0 0 16px;
    padding-left: 22px;
}

.descripcion-rica ul { list-style: disc; }
.descripcion-rica ol { list-style: decimal; }

.descripcion-rica li {
    margin-bottom: 7px;
    color: inherit;
}

.descripcion-rica li::marker {
    color: #63AB45;
}

/* --- Énfasis y enlaces ----------------------------------------------------- */
.descripcion-rica strong,
.descripcion-rica b {
    color: #262B33;
    font-weight: 600;
}

.descripcion-rica em { font-style: italic; }

.descripcion-rica a {
    color: #3F7029;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(63, 112, 41, .35);
    overflow-wrap: anywhere;
}

.descripcion-rica a:hover,
.descripcion-rica a:focus-visible {
    color: #63AB45;
    text-decoration-color: currentColor;
}

/* Una imagen pegada dentro del texto no debe desbordar la columna. */
.descripcion-rica img {
    max-width: 100%;
    height: auto;
}

/* Una tabla tampoco: se desplaza ella, no la página. */
.descripcion-rica table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* Los paneles de AirBNB y Vuelos usaban marcado propio (`buscador-simple`) con
   una paleta gris heredada de antes de que la barra fuese ambar: sin icono,
   con otro alto y otro boton, se veian de otra mano. Ahora usan las mismas
   piezas que los cinco de la plantilla, asi que no necesitan estilo propio.
   El unico ajuste es el ancho minimo del campo del numero de huespedes, que
   por defecto se estira mas de lo que hace falta. */
/* Con dos o tres campos en vez de cuatro, la columna es mas ancha que la caja
   y `justify-content-center` la deja flotando en medio: el panel arrancaba a
   trescientos pixeles del borde mientras los demas empiezan pegados. Que la
   caja ocupe su columna. */
#alojamiento .single-search-box,
#vuelo .single-search-box {
    width: 100%;
}

#alojamiento .searchbox-input input[type="number"] {
    max-width: 90px;
}
/* ==========================================================================
   Búsqueda sin resultados
   --------------------------------------------------------------------------
   Antes era un <h1> centrado con «No hay registros», del tamaño de un titular
   de portada y sin nada que hacer después. Quien llega aquí no necesita que le
   griten que no hay nada: necesita una salida.
   ========================================================================== */
.busqueda-vacia {
    max-width: 480px;
    margin: 40px auto 60px;
    text-align: center;
    color: #6C757D;
}

.busqueda-vacia svg {
    color: #C6CCD2;
    margin-bottom: 18px;
}

.busqueda-vacia h2 {
    margin: 0 0 10px;
    color: #1F2937;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
}

.busqueda-vacia p {
    margin: 0 0 26px;
    font-size: 15.5px;
    line-height: 1.6;
}

.busqueda-vacia-acciones {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}


/* ==========================================================================
   Caja de búsqueda de la portada
   --------------------------------------------------------------------------
   Un solo bloque. Lo que hay que saber de la plantilla, porque explica cada
   línea de aquí:

   · El color es #EDF2DE, un verde crema de la marca con la que venía.
   · La caja va redondeada «0 0 30px 30px» y el botón «0 0 30px 0»: cuadrado
     arriba y muy redondo abajo a la derecha.
   · El botón de los cinco paneles originales es un <button> SIN CLASE, así que
     no le llega nada escrito para .primary-btn1.
   · El desplegable de cada campo cuelga por debajo (position:absolute), así que
     basta con que un contenedor recorte para que no se vea.
   · Su estado abierto lo levanta una animación; si no corre, se queda plegado.

   Aquí: el color de la marca, cuatro esquinas iguales, nada que recorte, y el
   estado abierto declarado en lugar de animado.
   ========================================================================== */

/* --- 1. Color y forma ------------------------------------------------------ */
/* La fila de pestañas comparte el color de la barra: son la misma pieza, y
   en blanco parecían dos cosas pegadas. La activa se queda en azul, que es
   lo unico que tiene que destacar ahi. */
.home1-banner-bottom .filter-wrapper .nav-buttons .nav-pills {
    background: #FCCE85;
    background: color-mix(in srgb, var(--primary-color2, #FBB03B) 62%, #FFFFFF);
    border-radius: 8px 8px 0 0;

    /* Una sola fila, pase lo que pase. Con siete servicios la tira no cabia a
       partir de unos 1350 px y se partia en dos: la segunda fila quedaba
       descolgada, sin esquinas y sin separador, como si sobrara. Si algun dia
       no cabe, se desliza de lado en vez de romperse. */
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    max-width: 100%;
}

.home1-banner-bottom .filter-wrapper .nav-buttons .nav-pills::-webkit-scrollbar {
    display: none;
}

/* La plantilla pone las pestañas a media anchura por debajo de 576 px: con
   cinco servicios daban tres filas, con siete dan cuatro. */
.home1-banner-bottom .filter-wrapper .nav-buttons .nav-pills .nav-item {
    flex: 0 0 auto;
    width: auto;
}

/* Una pestaña sin elegir no lleva fondo propio: se ve la barra. */
.home1-banner-bottom .filter-wrapper .nav-pills .nav-link {
    background: transparent;
    color: #2E1E03;
    border-radius: 0;
}

.home1-banner-bottom .filter-wrapper .nav-pills .nav-link svg {
    fill: currentColor;
}

/* Un filo entre pestañas, del mismo negro translucido que separa los
   campos: asi la fila se lee como una sola tira. */
.home1-banner-bottom .filter-wrapper .nav-pills .nav-item + .nav-item .nav-link {
    border-left: 1px solid rgba(46, 30, 3, .14);
}

.home1-banner-bottom .filter-wrapper .nav-pills .nav-link:hover {
    background: rgba(46, 30, 3, .07);
}

.home1-banner-bottom .filter-wrapper .nav-pills .nav-link.active {
    background: var(--primary-color1, #024190);
    color: #FFFFFF;
    border-radius: 0;
}

/* El dorado de la marca a plena saturación llena demasiado: sobre una
   fotografía tira del ojo más que el propio contenido. Rebajado con blanco
   queda un arena cálido que sigue siendo el color de la casa —se deriva del
   mismo ajuste— pero acompaña en vez de gritar.

   La primera declaración es el respaldo para navegadores sin color-mix. */
.home1-banner-bottom .filter-wrapper .filter-group,
.home1-banner-bottom .filter-wrapper .tab-content {
    background: #FCCE85;
    background: color-mix(in srgb, var(--primary-color2, #FBB03B) 62%, #FFFFFF);
}

.home1-banner-bottom .filter-wrapper .filter-group {
    border-radius: 8px;
    box-shadow: 0 10px 34px rgba(16, 24, 40, .18);
}

/* --- 2. Nada puede recortar ------------------------------------------------
   El panel desplegable sale fuera de la caja: un solo overflow:hidden en la
   cadena lo deja invisible. */
/* La tira de pestañas NO va en esta lista: dentro no se abre nada, y dejarla
   en «visible» anulaba su desplazamiento lateral —la fila se salia de la
   pantalla y arrastraba consigo el ancho de toda la pagina—. */
.home1-banner-bottom .filter-wrapper .tab-content,
.home1-banner-bottom .filter-wrapper .tab-pane,
.home1-banner-bottom .filter-wrapper .filter-group,
.home1-banner-bottom .filter-wrapper .filter-area,
.home1-banner-bottom .filter-wrapper .single-search-box {
    overflow: visible;
}

/* --- 3. Apilado -------------------------------------------------------------
   La caja por delante del carrusel, y el campo abierto por delante de sus
   hermanos: sin esto el panel queda debajo del campo de al lado. */
.home1-banner-bottom {
    position: relative;
    z-index: 6;
}

.home1-banner-bottom .filter-wrapper .searchbox-input {
    position: relative;
    z-index: 1;
}

.home1-banner-bottom .filter-wrapper .searchbox-input.abierto {
    z-index: 30;
}

/* --- 4. El panel abierto, declarado ----------------------------------------
   Se repite la cadena completa de la plantilla porque encadena nueve clases;
   con menos, pierde por especificidad. Este archivo carga después, así que a
   igual peso gana esta regla. */
.home1-banner-bottom .filter-wrapper .filter-group form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap.active {
    transform: none;
    visibility: visible;
    opacity: 1;
    animation: none;
}

.home1-banner-bottom .filter-wrapper .custom-select-wrap {
    z-index: 40;
    top: 60px;
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .18);
}

/* --- 5. El texto, legible sobre el dorado ---------------------------------- */
.home1-banner-bottom .filter-wrapper .searchbox-input label {
    color: #6B4A0C;
}

.home1-banner-bottom .filter-wrapper .select-input input,
.home1-banner-bottom .filter-wrapper .searchbox-input input,
.home1-banner-bottom .filter-wrapper .searchbox-input select {
    color: #2E1E03;
}

.home1-banner-bottom .filter-wrapper .select-input input::placeholder {
    color: #7A5A16;
}

/* El filo entre campos, negro translúcido: sobre un color cálido se integra
   mejor que un gris frío. */
.home1-banner-bottom .filter-wrapper .searchbox-input {
    border-right: 1px solid rgba(46, 30, 3, .14);
}

/* La flecha gira: dice si el panel está abierto sin mirar debajo. */
.home1-banner-bottom .filter-wrapper .select-input i {
    transition: transform .18s ease;
}

.home1-banner-bottom .filter-wrapper .searchbox-input.abierto .select-input i {
    transform: rotate(180deg);
}

/* --- 6. El botón -----------------------------------------------------------
   Su selector real: los cinco paneles del tema usan un <button> sin clase. */
.home1-banner-bottom .filter-wrapper .filter-group form button {
    border-radius: 0 8px 8px 0;
    padding: 0 48px;
    align-self: stretch;
    font-size: 17px;
}

/* La banda que entra al pasar el ratón era casi negra (--title-color). Un azul
   más oscuro dice lo mismo sin meter un color ajeno. */
.home1-banner-bottom .filter-wrapper .filter-group form button::after {
    background-color: #012E66;
    border-radius: 0;
}

.home1-banner-bottom .filter-wrapper .filter-group form {
    align-items: stretch;
}

.home1-banner-bottom .filter-wrapper .filter-group form .filter-area {
    display: flex;
    align-items: center;
}

.home1-banner-bottom .filter-wrapper .filter-group form .filter-area > .row {
    width: 100%;
}

/* --- 7. En pantalla estrecha ----------------------------------------------- */
@media (max-width: 1199px) {
    .home1-banner-bottom .filter-wrapper .filter-group form button {
        border-radius: 0 0 8px 8px;
        padding: 18px 48px;
        width: 100%;
    }

    .home1-banner-bottom .filter-wrapper .searchbox-input {
        border-right: 0;
        border-bottom: 1px solid rgba(46, 30, 3, .14);
    }
}

/* El aire vertical de la fila. La plantilla solo lo declara en las pantallas
   pequeñas; en escritorio lo daba el relleno del botón, y al estirarlo la
   barra se quedó estrecha. Va donde corresponde: en los campos. */
.home1-banner-bottom .filter-wrapper .filter-group form .filter-area {
    padding-block: 18px;
}

/* --- El campo de duración ---------------------------------------------------
   No es lo que parece. La vista escribe un <select> normal, pero la plantilla
   ejecuta `$("select").niceSelect()` sobre TODOS los <select> de la página: el
   original queda oculto y en su lugar aparece un <div class="nice-select"> con
   su propia lista, que es otro <div>.

   Eso importa por dos motivos. Uno, que lo que se ve no es un desplegable del
   navegador sino un trozo de página, así que hay que vestirlo como a los demás
   campos —de fábrica viene con fondo blanco, borde gris y esquinas de 5px, que
   sobre la barra dorada canta—. Y dos, que su lista se apila DENTRO del campo,
   y el campo estaba en un plano por debajo del botón: por eso «Buscar» se
   comía la lista de duraciones. El apilado se arregla más abajo. */
.home1-banner-bottom .filter-wrapper .searchbox-input .nice-select {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    float: none;
    width: 100%;
    height: auto;
    line-height: 1.45;
    padding: 0 26px 0 0;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: #2E1E03;
}

.home1-banner-bottom .filter-wrapper .searchbox-input .nice-select::after {
    border-bottom: 2px solid #2E1E03;
    border-right: 2px solid #2E1E03;
    width: 7px;
    height: 7px;
    right: 6px;
    opacity: .55;
}

/* La lista, con la misma forma y la misma sombra que los otros desplegables de
   la caja. Se ensancha con su contenido: «7 días / 6 noches» no cabe en el
   ancho del campo. */
.home1-banner-bottom .filter-wrapper .searchbox-input .nice-select .list {
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .18);
    margin-top: 10px;
    width: max-content;
    min-width: 100%;
    max-height: 260px;
    overflow-y: auto;
}

/* Sin la excepcion, esta regla —mas especifica— pisaria el blanco de la fila
   elegida y volveria a dejarla ilegible. */
.home1-banner-bottom .filter-wrapper .searchbox-input .nice-select .option:not(.selected):not(:hover):not(.focus) {
    color: #2E1E03;
    line-height: 34px;
    min-height: 34px;
    padding-left: 14px;
    padding-right: 22px;
}

/* ==========================================================================
   Las diapositivas del hero, todas del mismo alto
   --------------------------------------------------------------------------
   El alto de cada diapositiva salía del texto que lleva dentro: el relleno de
   .home1-banner-content y nada más. Medido en el navegador, las tres del sitio
   daban 477, 477 y 435 píxeles —la tercera tiene un titular más corto—, así
   que al pasar de una a otra la imagen encogía y parecía que no cargaba
   expandida.

   Con el efecto de fundido las diapositivas se superponen, de modo que esa
   diferencia se ve como un salto. Aquí se les da un alto común y el contenido
   se centra: el texto puede ser más largo o más corto sin mover la caja de
   búsqueda que va debajo.

   La medida crece con la pantalla pero con tope: en un monitor muy alto, un
   hero de mil píxeles empuja todo lo demás fuera de la vista.
   ========================================================================== */
.home1-banner-area .home1-banner-wrapper {
    min-height: clamp(420px, 54vh, 620px);
    display: flex;
    align-items: center;
}

.home1-banner-area .home1-banner-wrapper > .container {
    width: 100%;
}

/* El relleno enorme ya no hace falta para dar alto: lo da el min-height, y
   así el contenido queda centrado de verdad. */
.home1-banner-area .home1-banner-wrapper .home1-banner-content {
    padding: 48px 0;
}

@media (max-width: 991px) {
    .home1-banner-area .home1-banner-wrapper {
        min-height: clamp(360px, 46vh, 480px);
    }

    .home1-banner-area .home1-banner-wrapper .home1-banner-content {
        padding: 36px 0;
    }
}

/* Un mínimo común no basta: las diapositivas con más texto lo superan y
   vuelven a descuadrar. Estirándolas todas a la más alta, la caja no se mueve
   pase lo que pase con la longitud del titular. */
.home1-banner-slider .swiper-wrapper {
    align-items: stretch;
}

.home1-banner-slider .swiper-slide {
    height: auto;
}

.home1-banner-slider .swiper-slide .home1-banner-wrapper {
    height: 100%;
}

/* ==========================================================================
   El desplegable de orden de los listados
   --------------------------------------------------------------------------
   Tenía un ancho fijo de 195 píxeles, calculado para el texto en inglés
   («Default Sorting»). En español la misma opción se llama «Orden
   predeterminado» y «Precio de mayor a menor», que no caben: el texto se salía
   por debajo de la flecha.

   Se ajusta al contenido con un mínimo, y se reserva sitio para la flecha para
   que el texto no pase por debajo. La lista desplegada se ensancha con él.
   ========================================================================== */
.package-inner-title-section .selector-and-grid .selector .nice-select {
    width: auto;
    min-width: 195px;
    max-width: 100%;
    padding-right: 46px;
    white-space: nowrap;
}

/* La lista tenía `width: 100%` del cerrado; con el ancho ya ajustado, basta con
   que no baje de él. */
.package-inner-title-section .selector-and-grid .selector .nice-select .list {
    width: max-content;
    min-width: 100%;
}

.package-inner-title-section .selector-and-grid .selector .nice-select .option {
    white-space: nowrap;
}

@media (max-width: 576px) {
    .package-inner-title-section .selector-and-grid .selector .nice-select {
        width: 100%;
        min-width: 0;
    }
}

/* ==========================================================================
   La barra de navegación
   --------------------------------------------------------------------------
   Las entradas van en `inline-block`, así que cuando no caben se parten en dos
   filas: la última bajaba debajo del logotipo y el encabezado crecía de golpe.
   Con nueve entradas de primer nivel —«Páginas» de cajón de sastre, y AirBNB y
   Vuelos sueltos al final— eso pasaba ya a 1366 píxeles.

   El menú se reordenó en siete entradas (Servicios y Nosotros agrupan lo suyo),
   y aquí queda la red de seguridad: la fila no se parte nunca, y entre 992 y
   1199 —donde el ancho aprieta de verdad— se ajustan holguras, logotipo y
   cuerpo de letra en lugar de dejar que salte de línea.
   ========================================================================== */
@media (min-width: 992px) {
    header.style-1 > .main-menu > ul.menu-list {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    header.style-1 > .main-menu > ul.menu-list > li > a {
        white-space: nowrap;
    }

    /* El «+» es del acordeón del móvil; en pantalla ancha lo que se espera es
       una flecha. Se usa la misma que la plantilla ya trae para el mega-menú. */
    header.style-1 > .main-menu > ul.menu-list > li > i.dropdown-icon {
        display: none;
    }

    header.style-1 > .main-menu > ul.menu-list > li.menu-item-has-children > a {
        padding-right: 26px;
    }

    /* La flecha se dibuja con dos bordes girados, no con un glifo de la fuente
       de iconos: alli el codigo no salia como flecha, y asi ademas hereda el
       color del enlace y no depende de que la fuente haya cargado. */
    header.style-1 > .main-menu > ul.menu-list > li.menu-item-has-children > a::after {
        content: "";
        position: absolute;
        right: 9px;
        top: calc(50% - 4px);
        width: 6px;
        height: 6px;
        border-right: 1.6px solid currentColor;
        border-bottom: 1.6px solid currentColor;
        transform: rotate(45deg);
        opacity: .55;
        transition: transform .3s ease-out, opacity .3s ease-out;
    }

    header.style-1 > .main-menu > ul.menu-list > li.menu-item-has-children:hover > a::after {
        transform: rotate(-135deg);
        top: calc(50% - 2px);
        opacity: .9;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    header.style-1 {
        padding: 0 1.5%;
    }

    header.style-1 .company-logo img {
        width: 125px;
    }

    header.style-1 .nav-right {
        gap: 14px;
    }

    header.style-1 > .main-menu > ul.menu-list > li {
        padding: 0 1px;
    }

    header.style-1 > .main-menu > ul.menu-list > li > a {
        padding: 15px 7px;
        font-size: 13.5px;
        letter-spacing: 0;
    }

    header.style-1 > .main-menu > ul.menu-list > li.menu-item-has-children > a {
        padding-right: 20px;
    }

    header.style-1 > .main-menu > ul.menu-list > li.menu-item-has-children > a::after {
        right: 4px;
        font-size: 11px;
    }
}


/* ==========================================================================
   La caja de búsqueda en pantallas que no son anchas
   --------------------------------------------------------------------------
   La plantilla venía calculada para cinco servicios. Con siete, cada pestaña
   con sus cuarenta píxeles de relleno a cada lado suma más de mil doscientos:
   por debajo de unos 1350 px la fila se partía y «Vuelos» caía sola en una
   segunda línea, sin esquinas y sin filo, como un trozo suelto.

   Aquí el relleno se ajusta al ancho disponible en lugar de dejar que la fila
   se rompa. Cuando ni así cabe —tabletas y móviles— la tira se desliza de
   lado, que es lo que se espera de una fila de pestañas estrecha.
   ========================================================================== */

/* La plantilla redondea la primera y la última a 15 px; la tira redondea a 8 y
   recorta ella sola, así que las esquinas de las pestañas sobran. */
.home1-banner-bottom .filter-wrapper .nav-buttons .nav-pills .nav-item:first-child .nav-link,
.home1-banner-bottom .filter-wrapper .nav-buttons .nav-pills .nav-item:last-child .nav-link {
    border-radius: 0;
}

@media (max-width: 1399px) {
    .home1-banner-bottom .filter-wrapper .nav-buttons .nav-pills .nav-item .nav-link {
        padding: 15px 24px;
    }
}

@media (max-width: 1199px) {
    .home1-banner-bottom .filter-wrapper .nav-buttons .nav-pills .nav-item .nav-link {
        padding: 14px 18px;
        font-size: 15px;
    }
}

@media (max-width: 991px) {
    .home1-banner-bottom .filter-wrapper .nav-buttons .nav-pills .nav-item .nav-link {
        padding: 14px 16px;
        font-size: 15px;
    }

    /* La tira se desliza: se pega al borde izquierdo en lugar de centrarse,
       porque centrada empieza a la mitad y no se ve dónde arranca. */
    .home1-banner-bottom .filter-wrapper .nav-buttons {
        justify-content: flex-start;
    }
}
/* ==========================================================================
   El apilado de la caja de búsqueda
   --------------------------------------------------------------------------
   El botón «Buscar» es hermano de la zona de campos y va DESPUÉS en el
   documento, así que sin nada dicho al respecto se pinta encima. Cualquier
   lista que se abriera en el último campo quedaba cortada por él —justo lo
   que pasaba con la de duraciones—.

   Se declara el orden: los campos por delante, el botón por detrás. Y el campo
   cuya lista está abierta sube por encima de sus vecinos, porque si no, la
   caja del campo de al lado le recorta el panel por un costado.
   ========================================================================== */
.home1-banner-bottom .filter-wrapper .filter-group form .filter-area {
    position: relative;
    z-index: 2;
}

.home1-banner-bottom .filter-wrapper .filter-group form button {
    position: relative;
    z-index: 1;
}

/* Los campos con desplegable propio ya suben solos: buscador.js les pone
   «abierto». El de duración lo lleva niceSelect, que marca «open» en su propio
   div, así que se mira hacia dentro. */
.home1-banner-bottom .filter-wrapper .searchbox-input:has(.nice-select.open) {
    z-index: 30;
}

/* ==========================================================================
   La opción elegida de un desplegable, legible
   --------------------------------------------------------------------------
   La plantilla pinta así la fila seleccionada —y la que está bajo el ratón—
   de todos los desplegables que pasan por niceSelect:

       background-color: var(--primary-color1);   ->  #024190, azul oscuro
       color:            var(--title-color);      ->  casi negro

   Negro sobre azul marino. No es que se lea mal: es que no se lee. Y no pasa
   solo en la caja de búsqueda —el mismo desplegable está en el orden de los
   listados y en los formularios—, así que la corrección va a la regla, no al
   sitio donde se notó.
   ========================================================================== */
.nice-select .list .option.selected,
.nice-select .list .option:hover,
.nice-select .list .option.focus,
.nice-select .list .option.selected.focus {
    background-color: var(--primary-color1, #024190);
    color: #FFFFFF;
}


/* En el tramo de 1200 a 1399 los cuatro campos siguen en fila —es lo que hace
   la plantilla— pero el hueco de cada uno ya no da para el texto en español:
   «Seleccione Tipo de Tour» se cortaba a media palabra y la flecha se le
   montaba encima. Se ajusta el cuerpo de letra y se le reserva sitio a la
   flecha, en vez de mover la rejilla y dejar el botón hecho un bloque. */
@media (min-width: 1200px) and (max-width: 1399px) {
    /* Fluido y no un escalon: a 1200 hace falta un punto menos que a 1399, y
       un salto seco se nota al redimensionar. */
    .home1-banner-bottom .filter-wrapper .searchbox-input .select-input input,
    .home1-banner-bottom .filter-wrapper .searchbox-input .nice-select {
        font-size: clamp(13px, 1.08vw, 15px);
    }

    .home1-banner-bottom .filter-wrapper .searchbox-input label {
        font-size: 12px;
    }

    .home1-banner-bottom .filter-wrapper .searchbox-input .select-input input {
        padding-right: 16px;
    }

    .home1-banner-bottom .filter-wrapper .filter-group form button {
        padding: 0 32px;
    }

    /* Y sobre todo esto: la plantilla mete cincuenta pixeles de relleno a cada
       lado de la zona de campos SOLO en esta banda. Cien pixeles menos para
       cuatro campos que ya iban justos; de ahi salia el texto cortado. */
    .home1-banner-bottom .filter-wrapper .filter-group form .filter-area {
        padding-inline: 0;
    }
}
/* La tira de pestañas, por debajo de 576 px
   --------------------------------------------------------------------------
   La plantilla le pone ahí `justify-content: center`. Cuando el contenido cabe
   da igual, pero con siete servicios no cabe: en un contenedor que se desplaza,
   centrar reparte lo que sobra a AMBOS lados, y lo que se sale por la izquierda
   no se alcanza desplazando. Medido a 500 px: la tira mide 646 y el hueco 476,
   y «Tour» —la pestaña activa— quedaba en -158. Fuera de la vista y fuera del
   alcance.

   Alineada al principio, lo que sobra se va todo a la derecha, que es adonde se
   desliza. */
@media (max-width: 576px) {
    .home1-banner-bottom .filter-wrapper .nav-buttons .nav-pills {
        justify-content: flex-start;
    }
}