/* Quick-nav index (section jump links right under the hero).
   Bootstrap's py-2/gap-2/gap-md-4 utilities aren't present in the theme's
   compiled CSS bundle (theme.style.min.css only ships the utility subset
   its own templates already used), so they silently no-op and the nav
   collapses flush against the hero with 14px text. Set spacing explicitly
   instead of depending on those utility classes. */
.rental-quicknav {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.rental-quicknav ul {
    row-gap: 0.5rem;
}

.rental-quicknav li a {
    font-size: 0.95rem;
}

.rental-quicknav li:not(:last-child) {
    margin-right: 0.5rem;
}

@media (min-width: 768px) {
    .rental-quicknav li:not(:last-child) {
        margin-right: 1.5rem;
    }
}

/* Rental location intro heading sizes.
   Scoped to .rental-intro-content to avoid affecting global heading styles.
   These headings live inside body text, so they're intentionally smaller
   than the page-level introTitle h2 (32px, primary colour, fw-bold).
   Paragraph/list spacing for this content comes from the shared
   .cms-rich-text class (cms-rich-text.css) applied alongside this one. */

.rental-intro-content h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    color: inherit;
}

.rental-intro-content h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.375rem;
    color: inherit;
}

/* Rental company card (guía de empresas de alquiler).
   Main image is the real vehicle photo (16:9), not the company logo -
   the logo only appears as a small brand mark next to the company name. */
.rental-company-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* El tema solo incluye las utilidades .order-lg-* de Bootstrap, no las
   versiones base .order-* (sin usar antes en el sitio) - se añaden aquí
   para que el reordenamiento móvil de la ficha horizontal funcione. */
.order-1 {
    order: 1 !important;
}

.order-2 {
    order: 2 !important;
}

/* Ficha horizontal: contenido a la izquierda, carrusel a la derecha (>= lg),
   apilado con el carrusel arriba en móvil. La fila NO estira la columna del
   carrusel a su altura completa (el texto puede ser mucho más alto que un
   16:9): así la imagen conserva su proporción real en vez de recortarse a
   una franja vertical deformada. */
.rental-company-card > .row.g-0 {
    align-items: flex-start;
}

.rental-company-media-col {
    position: relative;
}

.rental-company-carousel {
    overflow: hidden;
    border-radius: var(--bs-card-border-radius, 0.375rem);
}

.rental-company-carousel .carousel-caption {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
    bottom: 0;
    padding-top: 2rem;
}

/* El tema no incluye el CSS del componente carousel de Bootstrap (nunca se
   había usado antes en el sitio); se reimplementa aquí, con alcance acotado
   a .rental-company-carousel para no afectar a nada más. */
.rental-company-carousel .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.rental-company-carousel .carousel-item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    backface-visibility: hidden;
    transition: transform 0.6s ease-in-out;
}

.rental-company-carousel .carousel-item.active,
.rental-company-carousel .carousel-item-next,
.rental-company-carousel .carousel-item-prev {
    display: block;
}

.rental-company-carousel .carousel-item-next:not(.carousel-item-start),
.rental-company-carousel .active.carousel-item-end {
    transform: translateX(100%);
}

.rental-company-carousel .carousel-item-prev:not(.carousel-item-end),
.rental-company-carousel .active.carousel-item-start {
    transform: translateX(-100%);
}

.rental-company-carousel .carousel-control-prev,
.rental-company-carousel .carousel-control-next {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    padding: 0;
    color: #fff;
    text-align: center;
    background: none;
    border: 0;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.rental-company-carousel .carousel-control-prev:hover,
.rental-company-carousel .carousel-control-next:hover {
    color: #fff;
    opacity: 1;
}

.rental-company-carousel .carousel-control-prev {
    left: 0;
}

.rental-company-carousel .carousel-control-next {
    right: 0;
}

.rental-company-carousel .carousel-control-prev-icon,
.rental-company-carousel .carousel-control-next-icon {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
}

.rental-company-carousel .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.rental-company-carousel .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.rental-company-carousel .carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 0;
    margin-right: 15%;
    margin-bottom: 1rem;
    margin-left: 15%;
    list-style: none;
}

.rental-company-carousel .carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 30px;
    height: 3px;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: 0.5;
    transition: opacity 0.6s ease;
}

.rental-company-carousel .carousel-indicators .active {
    opacity: 1;
}

.rental-company-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.rental-editorial-note {
    background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.06);
    border-left: 3px solid var(--bs-primary, #0d6efd);
    border-radius: 0.25rem;
    padding: 0.75rem 1rem;
}

/* El tema no incluye las utilidades .m-3/.mx-3 de Bootstrap (solo variantes
   con eje único como .mb-3), así que el espaciado de este bloque se define
   aquí en vez de con clases utilitarias que no existen en el bundle. */
.rental-editorial-note-media {
    margin: 1.25rem 1rem 1rem;
}