section {
    margin-bottom: 0;
}

.banner--estatico img {
    width: 100%;
}

.banner--estatico picture {
    display: flex;
}

.fondo--img {
    background-image: url(/descuentos-beneficios/PublishingImages/Privilegios-personas/ferias/Muevete-sobre-ruedas/fonod-cifras.webp);
    background-repeat: no-repeat;
    background-size: cover;
}

.cifras>div {

    flex-wrap: wrap;
    border-bottom: 2px solid;
    border-image: linear-gradient(to right, #ff6118, #ff68c0, #61b8ff) 1;
    padding: 30px 0;
}

.cifras>div div {
    padding: 20px;
    width: 25%;
    display: flex;
}

.cifras img {
    width: 50px;
    margin-right: 15px;
}

.cifras p {
    color: var(--color--neutral--0);
    text-align: left;
}

.cifras span {
    font-weight: var(--font--weight--bold);
    font-size: var(--font--size--h1);
}

/* CATEGORIAS */
.menu__lateral__botones {
    position: relative;
}

.menu__lateral h2,
.menu__lateral p {
    text-align: left;
    color: var(--color--neutral--0);
    margin-bottom: 20px;
    margin-left: 0;
}

.menu__lateral__botones a {
    width: 25%;
    display: block;
    text-align: center;
    padding: 15px;
    text-decoration: none;
    color: var(--color--neutral--0);
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1.5px solid #ff6600;
    transition: 1s;
}

.menu__lateral__botones a:hover {
    background: #ff6600;
    transition: 1s;
}

/** transición botón */
.menu__lateral__botones a {
    width: 25%;
    display: block;
    text-align: center;
    padding: 15px;
    text-decoration: none;
    color: var(--color--neutral--0);
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1.5px solid #ff6600;
    transition: color .3s ease;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.menu__lateral__botones a.active {
    inset: 0;
    /* top:0 right:0 bottom:0 left:0 */
    background: linear-gradient(90deg, rgba(255, 102, 0, 1) 40%, rgba(49, 49, 49, 0.299) 120%);
    /* color del “relleno” */
    transform: translateX(0%);

}

/* Fondo deslizante */
.menu__lateral__botones a::before {
    content: "";
    position: absolute;
    inset: 0;
    /* top:0 right:0 bottom:0 left:0 */
    background: linear-gradient(90deg, rgba(255, 102, 0, 1) 40%, rgba(49, 49, 49, 0.299) 120%);
    /* color del “relleno” */
    transform: translateX(-100%);
    /* empieza fuera a la izquierda */
    transition: transform .45s ease;
    /* velocidad del deslizamiento */
    z-index: -1;
    /* queda detrás del texto */
}

/* Hover y focus accesible: el fondo se desplaza a cubrir el botón */
.menu__lateral__botones a:hover::before,
.menu__lateral__botones a:focus-visible::before {
    transform: translateX(0);
}

/* Cambiamos color del texto cuando el fondo ya está debajo */
.menu__lateral__botones a:hover,
.menu__lateral__botones a:focus-visible,
.menu__lateral__botones a.active {
    color: var(--color--neutral--0);
    /* o var(--color--neutral--900) si lo tienes */
    outline: none;
}

/* Para navegación por teclado, resalta el borde */
.menu__lateral__botones a:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 102, 0, .35);
    border-color: #ff6600;
}

/* Respeto por usuarios con “reducción de movimiento” */
@media (prefers-reduced-motion: reduce) {

    .menu__lateral__botones a,
    .menu__lateral__botones a::before {
        transition: none;
    }
}

.categoria__contenido {
    position: absolute;
    width: 70%;
    height: auto;
    right: 0;
    top: -200px;
}

.categoria__contenido h3 {
    text-transform: uppercase;
}

.categoria__contenido p {
    font-size: 0.9em;
}

.categoria__contenido h3,
.categoria__contenido p {
    color: var(--color--neutral--0);
    text-align: left;
    margin-bottom: 15px;
}

.categorias .guia__contenido .categoria__contenido.active-content>div {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    bottom: 20%;
    right: 5%;
    width: 370px;
    height: auto;
    padding: 20px 30px 10px 30px;
    border-radius: 15px;
    border: 2px solid #ff6600;
    background: rgba(54, 54, 54, 0.8);
}

.categorias.componente--guia .guia__contenido .active-content {
    position: absolute;
    width: 70%;
    height: auto;
    right: 0;
    top: -250px;
}

.categorias.componente--guia .guia__contenido .active-content img {

    width: 100%;
    object-fit: none;
    object-position: left;

}

/* OFERTA ALIADOS*/
.oferta__aliados .swiper {
    padding: 0 15px;
}

.oferta__aliados .swiper img {
    width: 100%;
}

/* Acciones */
.acciones {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(/descuentos-beneficios/PublishingImages/Privilegios-personas/ferias/Muevete-sobre-ruedas/fondo-actividades.webp);
}

.acciones .background-img {
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(305deg, rgba(72, 191, 212, .5) 0%, rgba(239, 181, 255, .5) 50%, rgba(255, 102, 0, .9) 100%);
}

.acciones__contenedor>div {
    width: 28%;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
    background-color: #303030dc;
}


.acciones__titulo h3 {
    text-align: left;
    color: var(--color--neutral--0);
}

.acciones__contenedor p {

    font-size: var(--font--size--p--M);
    color: var(--color--neutral--0);
}

.acciones__contenedor ul {
    padding-left: 20px;
}

.acciones__contenedor ul li {
    text-align: left;
    font-size: var(--font--size--p--M);
    margin: 15px 0;
    color: var(--color--neutral--0);

}

.acciones .acciones__titulo {
    display: flex;
    margin-bottom: 15px;
}

.acciones .acciones__titulo img {
    width: 80px;
    margin-right: 15px;
}

/* Galería */
:root {
    /* Ajustes rápidos */
    --w: 500px;
    /* ancho base de imagen */
    --h: 300px;
    /* alto base de imagen */
    --gap: 24px;
    /* separación entre cartas */
    --scale-center: 1.12;
    --scale-side: 0.86;
    --scale-far: 0.72;
    /* por si mostramos vecinos lejanos */
    --shadow: 0 12px 30px rgba(0, 0, 0, .25);
    --duration: 420ms;
    --easing: cubic-bezier(.22, .61, .36, 1);
    --dragX: 0px;
    /* offset temporal al arrastrar */
}

/* Layout principal */
.carousel {
    position: relative;
    width: min(100%, calc(var(--w) * 3 + var(--gap) * 2 + 40px));
    /* 3 imágenes + gaps + margen control */
    margin: auto;
    padding: 40px 40px;
    /* espacio para botones */
    box-sizing: border-box;
}

.viewport {
    position: relative;
    overflow: visible;
    /* importante para que se vean los bordes escalados */
    height: calc(var(--h) * var(--scale-center) + 30px);
    /* margen vertical por escala */
    perspective: 1000px;
    /* leve profundidad */
}

/* Pista de slides */
.slides {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    transform: translateX(var(--dragX));
    transition: transform var(--duration) var(--easing);
}

/* Tarjetas (slides) */
.slide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: var(--w);
    height: var(--h);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform var(--duration) var(--easing),
        filter var(--duration) var(--easing),
        opacity var(--duration) var(--easing),
        z-index var(--duration) var(--easing);
    will-change: transform;
    background: #111;
}

/* Imágenes dentro del slide */
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Posiciones relativas respecto al índice actual --- */

/* Offset horizontal para laterales (depende del ancho + gap) */
:root {
    --offsetX: calc(var(--w) * 0.9 + var(--gap));
    --farOffsetX: calc(var(--w) * 1.1 + var(--gap) * 2);
}

/* Centro (activa) */
.pos-0 {
    transform: translate(-50%, -50%) translateX(0) scale(var(--scale-center));
    z-index: 3;
    filter: brightness(1);
    opacity: 1;
}

/* Lateral izquierdo y derecho inmediatos */
.pos--1 {
    transform: translate(-50%, -50%) translateX(calc(-1 * var(--offsetX))) scale(var(--scale-side)) rotateY(6deg);
    z-index: 2;
    filter: brightness(.92) saturate(.96);
    opacity: .95;
}

.pos-1 {
    transform: translate(-50%, -50%) translateX(var(--offsetX)) scale(var(--scale-side)) rotateY(-6deg);
    z-index: 2;
    filter: brightness(.92) saturate(.96);
    opacity: .95;
}

/* Vecinos lejanos (opcional: aparecen sutiles al fondo) */
.pos--2 {
    transform: translate(-50%, -50%) translateX(calc(-1 * var(--farOffsetX))) scale(var(--scale-far)) rotateY(10deg);
    z-index: 1;
    filter: brightness(.85) saturate(.9) blur(.2px);
    opacity: .7;
}

.pos-2 {
    transform: translate(-50%, -50%) translateX(var(--farOffsetX)) scale(var(--scale-far)) rotateY(-10deg);
    z-index: 1;
    filter: brightness(.85) saturate(.9) blur(.2px);
    opacity: .7;
}

/* Botones */
.nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    color: #fff;
    background: #ff6600;
    backdrop-filter: blur(4px);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 5;
    transition: background .2s ease, transform .2s ease;
}

.nav:hover {
    background: rgba(0, 0, 0, .7);
    transform: translateY(-50%) scale(1.05);
}

.nav:active {
    transform: translateY(-50%) scale(.98);
}

.prev {
    left: 8px;
}

.next {
    right: 8px;
}

/* Arrastre más suave en táctil */
.viewport,
.slides {
    touch-action: pan-y;
    /* permite desplazar vertical en página; manejamos horizontal aquí */
}

.btn-controlador .anterior::after {
    content: "\f104";
    margin-left: -5px;
    
}

.btn-controlador .siguiente::after {
    content: "\f105";
      color: var(--color--neutral--0);
    font: normal normal lighter 35px / 1 FontAwesome;
}
.btn-controlador .anterior::after {
    content: "\f104";
    margin-left: -5px;
      color: var(--color--neutral--0);
    font: normal normal lighter 35px / 1 FontAwesome;
    
}

.btn-controlador .siguiente::before, .btn-controlador .anterior::before {
    color: var(--color--neutral--0);
    font: normal normal lighter 35px / 1 FontAwesome;
}


/* Accesibilidad: respeta reducciones de movimiento */
@media (prefers-reduced-motion: reduce) {

    .slides,
    .slide {
        transition: none !important;
    }
}

/*Oferta--interna*/
.oferta--interna>div>div {
    width: 50%;
}

.oferta--interna img {
    width: 100%;
}

/*Contenido de valor*/

.contenido .guia__contenido>h2,
.contenido .guia__contenido>p {
    color: var(--color--neutral--0);
}


.tab-content {
  display: none;
}

.tab-content.active {
  display: flex;
}


/*------------ Contenidos Paso a paso versión extendida -------------*/
.contenido .guia__contenido {
    padding: 80px 30px;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: relative;
}

.contenido .guia__contenido>h2,
.contenido .guia__contenido>p {
    width: 30%;
    margin-left: 0;
}

.contenido .guia__contenido>a {
    font-size: 1em;
    text-decoration: none;
    color: var(--color--neutral--0);
    font-weight: var(--font--weight--semibold);
    transition: 0.5s;
    width: 30%;
    border-radius: 10px;
    border: 1px solid #ff6600;
    display: inline-flex;
    align-items: center;
    margin-top: 15px;
    padding: 12px 20px;
}

.contenido .guia__contenido>a.active {
    background: linear-gradient(90deg, rgba(255, 102, 0, 1) 40%, rgba(49, 49, 49, 0.299) 120%);
    color: var(--color--neutral--0);
}

.contenido .guia__contenido>a:hover {
    background: linear-gradient(90deg, rgba(255, 102, 0, 1) 40%, rgba(49, 49, 49, 0.299) 120%);
}

.contenido .guia__contenido>a div {
    margin-right: 20px;
}

.contenido .guia__contenido .active-content {
    width: 67%;
    height: 406px;
    border-radius: 15px;
    position: absolute;
    right: 0;
}

.contenido .guia__contenido .active-content div {
    width: 60%;
    padding: 0 30px;
}

.contenido .guia__contenido .active-content div h3 {
    margin-bottom: 20px;
    color: var(--color--neutral--0);
}

.contenido .guia__contenido .active-content div p {
    color: var(--color--neutral--0);
}

.contenido .guia__contenido .active-content img {
    width: 40%;
    border-radius: 0 10px 10px 0;
    margin-bottom: 0;
    object-fit: contain;
    object-position: bottom;
    border-radius: 12px;
}

/* 
Preguntas frecuentes  */

.preguntas-frecuentes {
    background-color: var(--color--neutral--80);
}

.preguntas-frecuentes .accordion-button.collapsed {
    border: 1px solid transparent;
    border-top-color: rgba(255, 128, 0, 0.614);
    font-family: var(--font--fuente--principal);
    background-color: #ffffff00;
    color: var(--color--neutral--0);
   
}

.preguntas-frecuentes .accordion-button {
    border-top-color: rgba(255, 128, 0, 0.614);
    background-color: var(--color--main);
    color: var(--color--neutral--0);
}
.preguntas-frecuentes .accordion-button.collapsed:hover {
    background-color: var(--color--main);
    color: var(--color--neutral--0);
}
.preguntas-frecuentes h2 {
    color: var(--color--principal--70);
}

.preguntas-frecuentes .accordion-body p, .preguntas-frecuentes .accordion-body li {
    color: var(--color--neutral--0);
}

.preguntas-frecuentes h3 span {
    color: var(--color--main-dark);
}


@media (max-width: 1400px) {

    /* Galería */
    :root {
        /* Ajustes rápidos */
        --w: 400px;
        /* ancho base de imagen */
        --h: 250px;
        /* alto base de imagen */
        --gap: 20px;
        /* separación entre cartas */
    }
}

@media (max-width: 1200px) {

    /*Acciones y exhibiciones*/
    .acciones__contenedor>div {
        width: 30%;
    }

    .acciones .acciones__titulo {
        flex-wrap: wrap;
    }

    .acciones .acciones__titulo img {
        margin: auto;
        margin-bottom: 20px;
    }

    .acciones__titulo h3 {
        text-align: center;
    }

    /* galeria */
    :root {
        /* Ajustes rápidos */
        --w: 350px;
        /* ancho base de imagen */
        --h: 220px;
    }
}

@media (max-width: 1024px) {

    /* categorias */
    .categoria__contenido {
        height: 500px;
    }

    .categoria__contenido img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: top;
    }

    .categorias .guia__contenido .categoria__contenido.active-content>div {
        bottom: 10%;
    }

    /* galeria */
    :root {
        /* Ajustes rápidos */
        --w: 310px;
        /* ancho base de imagen */
        --h: 210px;
    }
}

@media (max-width: 992px) {}

@media (max-width: 768px) {

    /* Cifras */
    .cifras>div div {
        width: 50%;
        flex-wrap: wrap;
    }

    /* categorías */
    .categoria__contenido {
        position: relative;
        width: 100%;
        height: auto;
        top: 0px;
        margin-bottom: 30px;
    }

    .menu__lateral__botones a {
        width: 50%;
        margin: auto;
        margin-bottom: 15px;
    }

    /* galeria */
    :root {
        /* Ajustes rápidos */
        --w: 270px;
        /* ancho base de imagen */
        --h: 170px;
    }

    /* acciones */
    .acciones__contenedor>div {
        width: 45%;
    }

    .galeria {
        overflow: hidden;
    }

    /*------------ Paso a paso versión extendida -------------*/
    .contenido .guia__contenido .active-content {
        flex-wrap: wrap;
    }

    .contenido .guia__contenido .active-content div {
        width: 100%;
        padding: 0 30px 30px;
    }

    .contenido .guia__contenido>h2,
    .contenido .guia__contenido>p {
        width: 40%;
    }

    .contenido .guia__contenido>a {
        width: 40%;
    }

    .contenido .guia__contenido .active-content {
        width: 60%;
    }

    .contenido .guia__contenido {
        height: auto;
    }

    .contenido .guia__contenido a div {
        margin-right: 10px;
    }


    .contenido .guia__contenido .active-content {
        height: auto;
    }


    .contenido .guia__contenido .active-content img {
        width: 100%;
        height: 245px;
        object-fit: cover;
        object-position: center;
    }

    .contenido .guia__contenido .active-content div h3 {
        font-size: 20px;
    }

}

@media (max-width: 576px) {

    .cifras>div div {
        width: 100%;
        justify-content: center;
    }

    .cifras p {
        width: 75%;
    }

    /* categorias */
    .menu__lateral__botones a {
        width: 100%;
    }

    .categorias .guia__contenido .categoria__contenido.active-content>div {
        position: relative;
        bottom: 0%;
        right: initial;
        width: 100%;
        height: auto;
    }

    .categoria__contenido {
        flex-wrap: wrap;
    }

    /*  acciones */
    .acciones__contenedor>div {
        width: 100%;
    }

    .oferta--interna>div>div {
        width: 100%;
    }

    .oferta--interna img {
        margin-bottom: 20px;
    }


    .contenido .guia__contenido {
        height: auto;
    }

    .contenido .guia__contenido>h2,
    .contenido .guia__contenido>p {
        width: 100%;
    }

    .contenido .guia__contenido a {
        font-size: 15px;
        width: 100%;
        margin-top: 20px;
    }

    .contenido .guia__contenido .active-content {
        width: 100%;
        height: auto;
        position: relative;
        margin-top: 20px;
    }

    .contenido .guia__contenido .active-content div {
        padding: 20px 0;
        order: 2;
    }

    .contenido .guia__contenido .active-content img {
        order: 1;
    }

    .contenido .guia__contenido .active-content div h3 {
        font-size: 17px;
    }


}