/* =========================================
   MAPSTORE.UY
   HOJA DE ESTILOS PRINCIPAL
========================================= */


/* =========================================
   VARIABLES
========================================= */

:root {

    --fondo-principal: #101010;

    --fondo-header: #151515;

    --fondo-producto: #191919;

    --fondo-producto-resultados: #181818;

    --fondo-secundario: #242424;

    --fondo-imagen: #222222;

    --borde: #292929;

    --magenta: #e6006a;

    --turquesa: #027c7d;

    --texto-principal: white;

    --texto-secundario: #cccccc;

    --texto-gris: #999999;

    --texto-resultados: #aaaaaa;

}


/* =========================================
   BASE
========================================= */

* {

    box-sizing:
        border-box;

}


body {

    margin:
        0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        var(--fondo-principal);

    color:
        var(--texto-principal);

}


/* =========================================
   ENCABEZADO
========================================= */

header {

    background:
        var(--fondo-header);

    padding:
        12px 40px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        25px;

    border-bottom:
        2px solid var(--magenta);

}


.logo img {

    height:
        60px;

    width:
        auto;

    display:
        block;

}


/* =========================================
   BUSCADOR
========================================= */

.busqueda {

    display:
        flex;

    flex:
        1;

    max-width:
        500px;

}


.busqueda input {

    width:
        100%;

    padding:
        12px 18px;

    border:
        2px solid var(--borde);

    border-radius:
        25px 0 0 25px;

    background:
        var(--fondo-secundario);

    color:
        white;

    font-size:
        15px;

    outline:
        none;

}


.busqueda input:focus {

    border-color:
        var(--turquesa);

}


.busqueda input::placeholder {

    color:
        var(--texto-gris);

}


.busqueda button {

    border:
        none;

    padding:
        0 18px;

    border-radius:
        0 25px 25px 0;

    background:
        var(--magenta);

    color:
        white;

    font-size:
        17px;

    cursor:
        pointer;

}


.busqueda button:hover {

    background:
        #ff1680;

}


/* =========================================
   BOTÓN CARRITO DEL ENCABEZADO
========================================= */

.carrito {

    background:
        var(--turquesa);

    color:
        white;

    border:
        none;

    padding:
        11px 18px;

    border-radius:
        25px;

    font-weight:
        bold;

    font-size:
        15px;

    cursor:
        pointer;

    transition:
        0.2s;

}


.carrito:hover {

    background:
        var(--magenta);

    transform:
        scale(1.05);

}


/* =========================================
   HERO
========================================= */

.hero {

    min-height:
        430px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    text-align:
        center;

    padding:
        40px 20px;

    background:
        radial-gradient(
            circle at 20% 30%,
            #e6006a55,
            transparent 30%
        ),

        radial-gradient(
            circle at 80% 70%,
            #027c7d55,
            transparent 30%
        ),

        var(--fondo-principal);

}


.hero h1 {

    font-size:
        52px;

    margin:
        0 0 15px;

}


.hero h1 span {

    color:
        var(--magenta);

}


.hero p {

    font-size:
        20px;

    color:
        var(--texto-secundario);

    max-width:
        600px;

}


/* =========================================
   BOTÓN PRINCIPAL
========================================= */

.boton-principal {

    margin-top:
        25px;

    padding:
        15px 30px;

    background:
        var(--magenta);

    color:
        white;

    text-decoration:
        none;

    border-radius:
        30px;

    font-weight:
        bold;

    transition:
        0.2s;

}


.boton-principal:hover {

    transform:
        scale(1.05);

}


/* =========================================
   PRODUCTOS
========================================= */

.productos {

    max-width:
        1200px;

    margin:
        auto;

    padding:
        60px 25px;

}


.productos h2 {

    text-align:
        center;

    font-size:
        32px;

    margin-bottom:
        40px;

}


.grid-productos {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(230px, 1fr)
        );

    gap:
        25px;

}


.producto {

    background:
        var(--fondo-producto);

    border:
        1px solid var(--borde);

    border-radius:
        18px;

    padding:
        20px;

    text-align:
        center;

}


.producto:hover {

    transform:
        translateY(-5px);

    border-color:
        var(--magenta);

}


/* =========================================
   IMAGEN DEL PRODUCTO
========================================= */

.producto-imagen {

    width:
        100%;

    height:
        200px;

    background:
        var(--fondo-secundario);

    border-radius:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        20px;

    overflow:
        hidden;

}


.producto-imagen img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

}


/* =========================================
   INFORMACIÓN PRODUCTO
========================================= */

.producto h3 {

    margin:
        10px 0;

}


.precio {

    font-size:
        24px;

    font-weight:
        bold;

    color:
        var(--magenta);

    margin:
        15px 0;

}


/* =========================================
   BOTÓN AGREGAR AL CARRITO
========================================= */

.boton-carrito {

    width:
        100%;

    border:
        none;

    padding:
        12px;

    border-radius:
        25px;

    background:
        var(--turquesa);

    color:
        white;

    font-weight:
        bold;

    cursor:
        pointer;

    transition:
        0.2s;

}


.boton-carrito:hover {

    background:
        var(--magenta);

}


/* =========================================
   RESULTADOS
========================================= */

.contenido {

    max-width:
        1200px;

    margin:
        40px auto;

    padding:
        0 25px;

}


.titulo-resultados {

    margin-bottom:
        30px;

}


.titulo-resultados h1 {

    margin:
        0 0 10px 0;

    font-size:
        30px;

}


#texto-busqueda {

    color:
        var(--texto-resultados);

    font-size:
        16px;

}


/* =========================================
   SIN RESULTADOS
========================================= */

#sin-resultados {

    display:
        none;

    text-align:
        center;

    padding:
        60px 20px;

    color:
        var(--texto-resultados);

}


#sin-resultados h2 {

    color:
        white;

    margin-bottom:
        10px;

}


/* =========================================
   BOTÓN VOLVER
========================================= */

.volver {

    display:
        inline-block;

    margin-top:
        35px;

    color:
        white;

    background:
        var(--borde);

    padding:
        11px 20px;

    border-radius:
        25px;

    text-decoration:
        none;

    transition:
        0.2s;

}


.volver:hover {

    background:
        var(--turquesa);

}


/* =========================================
   CARRITO
========================================= */

.carrito-contenido {

    min-height:
        500px;

}


#carrito-vacio {

    text-align:
        center;

    padding:
        60px 20px;

    color:
        var(--texto-resultados);

}


#carrito-vacio h2 {

    color:
        white;

    margin-bottom:
        10px;

}


.lista-carrito {

    display:
        flex;

    flex-direction:
        column;

    gap:
        15px;

}


.item-carrito {

    background:
        var(--fondo-producto-resultados);

    border:
        1px solid var(--borde);

    border-radius:
        14px;

    padding:
        15px;

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

}


.item-carrito-imagen {

    width:
        90px;

    height:
        90px;

    background:
        var(--fondo-secundario);

    border-radius:
        10px;

    overflow:
        hidden;

    flex-shrink:
        0;

}


.item-carrito-imagen img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

}


.item-carrito-info {

    flex:
        1;

}


.item-carrito-info h3 {

    margin:
        0 0 8px;

}


.item-carrito-precio {

    margin:
        0;

    color:
        var(--magenta);

    font-weight:
        bold;

}


.cantidad-carrito {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.cantidad-carrito button {

    width:
        32px;

    height:
        32px;

    border:
        none;

    border-radius:
        50%;

    background:
        var(--turquesa);

    color:
        white;

    font-size:
        20px;

    font-weight:
        bold;

    cursor:
        pointer;

}


.cantidad-carrito button:hover {

    background:
        var(--magenta);

}


.cantidad-carrito span {

    min-width:
        25px;

    text-align:
        center;

    font-weight:
        bold;

}


.subtotal-carrito {

    min-width:
        100px;

    text-align:
        right;

    font-size:
        18px;

    font-weight:
        bold;

}


.boton-eliminar {

    border:
        none;

    background:
        transparent;

    color:
        #999999;

    font-size:
        20px;

    cursor:
        pointer;

    padding:
        8px;

}


.boton-eliminar:hover {

    color:
        var(--magenta);

}


/* =========================================
   RESUMEN DEL CARRITO
========================================= */

.resumen-carrito {

    margin-top:
        30px;

    padding:
        25px;

    background:
        var(--fondo-header);

    border:
        1px solid var(--borde);

    border-radius:
        14px;

}


.total-carrito {

    text-align:
        right;

    font-size:
        25px;

    font-weight:
        bold;

}


#total-carrito {

    color:
        var(--magenta);

}


.boton-vaciar {

    margin-top:
        20px;

    padding:
        12px 22px;

    border:
        none;

    border-radius:
        25px;

    background:
        var(--borde);

    color:
        white;

    font-weight:
        bold;

    cursor:
        pointer;

}


.boton-vaciar:hover {

    background:
        var(--magenta);

}


/* =========================================
   FICHA DE PRODUCTO
========================================= */

.producto-detalle {

    max-width:
        1200px;

    margin:
        50px auto;

    padding:
        0 25px;

}


.detalle-producto {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        50px;

    align-items:
        center;

}


.detalle-imagen {

    width:
        100%;

    min-height:
        450px;

    background:
        var(--fondo-secundario);

    border:
        1px solid var(--borde);

    border-radius:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

}


.detalle-imagen img {

    width:
        100%;

    height:
        450px;

    object-fit:
        contain;

}


.detalle-informacion {

    padding:
        10px;

}


.detalle-categoria {

    color:
        var(--turquesa);

    font-weight:
        bold;

    text-transform:
        uppercase;

    font-size:
        14px;

}


.detalle-informacion h1 {

    font-size:
        38px;

    margin:
        10px 0 20px;

}


.detalle-descripcion {

    color:
        var(--texto-secundario);

    font-size:
        17px;

    line-height:
        1.6;

}


.detalle-precio {

    font-size:
        34px;

    font-weight:
        bold;

    color:
        var(--magenta);

    margin:
        15px 0 5px;

}


.precio-anterior {

    color:
        var(--texto-gris);

    text-decoration:
        line-through;

    margin:
        0;

}


.stock-disponible {

    color:
        #42c98a;

    font-weight:
        bold;

}


.stock-agotado {

    color:
        var(--magenta);

    font-weight:
        bold;

}


.detalle-boton {

    margin-top:
        15px;

    padding:
        15px;

    font-size:
        16px;

}


.detalle-boton:disabled {

    background:
        #444444;

    color:
        #999999;

    cursor:
        not-allowed;

}


#producto-no-encontrado {

    display:
        none;

    text-align:
        center;

    padding:
        80px 20px;

}


#producto-no-encontrado h1 {

    margin-bottom:
        30px;

}


/* =========================================
   PIE
========================================= */

footer {

    margin-top:
        60px;

    padding:
        30px;

    text-align:
        center;

    background:
        var(--fondo-header);

    color:
        var(--texto-gris);

    border-top:
        1px solid var(--borde);

}


/* =========================================
   MÓVIL
========================================= */

@media (max-width: 700px) {

    .detalle-producto {

        grid-template-columns:
            1fr;

        gap:
            25px;

    }


    .detalle-imagen {

        min-height:
            300px;

    }


    .detalle-imagen img {

        height:
            300px;

    }


    .detalle-informacion h1 {

        font-size:
            30px;

    }


    .detalle-precio {

        font-size:
            28px;

    }


    header {

        padding:
            12px 20px;

        flex-wrap:
            wrap;

    }


    .logo {

        order:
            1;

    }


    .carrito {

        order:
            2;

    }


    .busqueda {

        order:
            3;

        flex-basis:
            100%;

        max-width:
            none;

    }


    .hero h1 {

        font-size:
            38px;

    }


    .hero p {

        font-size:
            17px;

    }


    .contenido {

        margin-top:
            30px;

    }


    .titulo-resultados h1 {

        font-size:
            25px;

    }


    .grid-productos {

        grid-template-columns:
            repeat(2, 1fr);

        gap:
            15px;

    }


    .producto {

        padding:
            12px;

    }


    .producto-imagen {

        height:
            150px;

    }


    .producto h3 {

        font-size:
            16px;

    }


    .precio {

        font-size:
            19px;

    }


    .item-carrito {

        flex-wrap:
            wrap;

        gap:
            12px;

    }


    .item-carrito-info {

        min-width:
            calc(100% - 105px);

    }


    .cantidad-carrito {

        margin-left:
            105px;

    }


    .subtotal-carrito {

        margin-left:
            auto;

    }

}


/* =========================================
   ENLACE DE PRODUCTO
========================================= */

.producto-enlace {

    color:
        inherit;

    text-decoration:
        none;

    display:
        block;

}


.producto-enlace h3 {

    color:
        white;

}


.producto-enlace:hover h3 {

    color:
        var(--magenta);

}


/* =========================================
   SELECTOR DE CANTIDAD - FICHA DE PRODUCTO
========================================= */

.selector-cantidad {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin-top:
        20px;

}


.selector-cantidad-titulo {

    font-weight:
        bold;

    color:
        var(--texto-secundario);

}


.control-cantidad {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.control-cantidad button {

    width:
        36px;

    height:
        36px;

    border:
        none;

    border-radius:
        50%;

    background:
        var(--turquesa);

    color:
        white;

    font-size:
        22px;

    font-weight:
        bold;

    cursor:
        pointer;

    transition:
        0.2s;

}


.control-cantidad button:hover {

    background:
        var(--magenta);

    transform:
        scale(1.05);

}


.control-cantidad button:disabled {

    background:
        #444444;

    color:
        #999999;

    cursor:
        not-allowed;

    transform:
        none;

}


.control-cantidad span {

    min-width:
        30px;

    text-align:
        center;

    font-size:
        18px;

    font-weight:
        bold;

}


/* =========================================
   MENSAJE TEMPORAL DEL CARRITO
========================================= */

#mensaje-carrito {

    position:
        fixed;

    bottom:
        30px;

    right:
        30px;

    z-index:
        9999;

    background:
        var(--turquesa);

    color:
        white;

    padding:
        14px 22px;

    border-radius:
        10px;

    font-weight:
        bold;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.35);

    opacity:
        0;

    transform:
        translateY(15px);

    pointer-events:
        none;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;

}


#mensaje-carrito.mostrar {

    opacity:
        1;

    transform:
        translateY(0);

}


/* =========================================
   MENSAJE TEMPORAL - MÓVIL
========================================= */

@media (max-width: 700px) {

    #mensaje-carrito {

        left:
            20px;

        right:
            20px;

        bottom:
            20px;

        text-align:
            center;

    }

}


/* =========================================
   MENÚ PRINCIPAL MAPSTORE.UY
========================================= */

#menu-mapstore {

    position:
        relative;

    flex-shrink:
        0;

}


.menu-boton {

    border:
        none;

    background:
        transparent;

    color:
        var(--texto-principal);

    font-size:
        14px;

    font-weight:
        bold;

    padding:
        10px 14px;

    cursor:
        pointer;

    white-space:
        nowrap;

}


.menu-boton:hover {

    color:
        var(--turquesa);

}


.menu-contenido {

    display:
        none;

    position:
        absolute;

    top:
        calc(100% + 8px);

    left:
        0;

    min-width:
        240px;

    background:
        var(--fondo-secundario);

    border:
        1px solid var(--borde);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.35);

}


.menu-contenido.menu-abierto {

    display:
        block;

}


.menu-item {

    position:
        relative;

}


.menu-enlace {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border:
        none;

    background:
        transparent;

    color:
        var(--texto-principal);

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        bold;

    padding:
        14px 18px;

    cursor:
        pointer;

    text-align:
        left;

}


.menu-enlace:hover {

    background:
        var(--fondo-producto);

    color:
        var(--turquesa);

}


.menu-flecha {

    margin-left:
        20px;

    font-size:
        13px;

}


.menu-submenu {

    display:
        none;

    position:
        absolute;

    top:
        0;

    left:
        100%;

    min-width:
        220px;

    background:
        var(--fondo-secundario);

    border:
        1px solid var(--borde);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.35);

}


.menu-submenu.submenu-abierto {

    display:
        block;

}


.menu-subtitulo {

    padding:
        12px 18px;

    color:
        var(--texto-gris);

    font-size:
        12px;

    font-weight:
        bold;

    border-bottom:
        1px solid var(--borde);

    text-transform:
        uppercase;

}


.menu-categoria {

    display:
        block;

    padding:
        12px 18px;

    color:
        var(--texto-principal);

    text-decoration:
        none;

    font-size:
        14px;

}


.menu-categoria:hover {

    background:
        var(--fondo-producto);

    color:
        var(--magenta);

}


/* =========================================
   MENÚ EN MÓVIL
========================================= */

@media (max-width: 700px) {

    #menu-mapstore {

        order:
            2;

    }


    .menu-boton {

        padding:
            8px 10px;

        font-size:
            13px;

    }


    .menu-contenido {

        left:
            0;

        right:
            auto;

        min-width:
            230px;

    }


    .menu-submenu {

        position:
            static;

        width:
            100%;

        box-shadow:
            none;

        border:
            none;

        border-top:
            1px solid var(--borde);

    }


    .menu-categoria {

        padding-left:
            30px;

    }

}


/* =========================
   CHECKOUT
========================= */

.checkout-contenido {

    max-width:
        900px;

    margin:
        0 auto;

}


.checkout-seccion {

    background:
        var(--fondo-producto);

    border:
        1px solid var(--borde);

    border-radius:
        10px;

    padding:
        24px;

    margin-bottom:
        20px;

}


.checkout-seccion h2 {

    margin-top:
        0;

    margin-bottom:
        20px;

}


.checkout-campo {

    display:
        flex;

    flex-direction:
        column;

    margin-bottom:
        16px;

}


.checkout-campo:last-child {

    margin-bottom:
        0;

}


.checkout-campo label {

    margin-bottom:
        7px;

    color:
        var(--texto-secundario);

    font-weight:
        bold;

}


.checkout-campo input,
.checkout-campo select,
.checkout-campo textarea {

    width:
        100%;

    box-sizing:
        border-box;

    padding:
        12px;

    background:
        var(--fondo-secundario);

    color:
        var(--texto-principal);

    border:
        1px solid var(--borde);

    border-radius:
        6px;

    font-family:
        inherit;

    font-size:
        15px;

}


.checkout-campo textarea {

    resize:
        vertical;

}


.checkout-campo input:focus,
.checkout-campo select:focus,
.checkout-campo textarea:focus {

    outline:
        none;

    border-color:
        var(--magenta);

}


#resumen-checkout {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

}


.checkout-item {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    padding:
        14px 0;

    border-bottom:
        1px solid var(--borde);

}


.checkout-item strong {

    display:
        block;

    margin-bottom:
        5px;

}


.checkout-item p {

    margin:
        0;

    color:
        var(--texto-gris);

}


.checkout-item span {

    white-space:
        nowrap;

    font-weight:
        bold;

}


.checkout-total {

    display:
        flex;

    justify-content:
        space-between;

    margin-top:
        20px;

    padding-top:
        20px;

    border-top:
        2px solid var(--borde);

    font-size:
        22px;

    font-weight:
        bold;

}


/* =========================================
   BOTÓN FINALIZAR - CARRITO
========================================= */

.boton-finalizar {

    width:
        100%;

    padding:
        14px;

    margin-top:
        16px;

    margin-bottom:
        10px;

    background:
        var(--magenta);

    color:
        white;

    border:
        none;

    border-radius:
        6px;

    font-weight:
        bold;

    cursor:
        pointer;

}


.boton-finalizar:hover {

    opacity:
        0.9;

}


/* =========================================
   BOTONES DEL CHECKOUT
   MISMO ESTILO QUE WHATSAPP ORIGINAL
========================================= */

.boton-pedido {

    width:
        100%;

    padding:
        16px;

    margin-top:
        10px;

    margin-bottom:
        20px;

    background:
        var(--turquesa);

    color:
        white;

    border:
        none;

    border-radius:
        6px;

    font-weight:
        bold;

    font-size:
        16px;

    cursor:
        pointer;

}


.boton-pedido:hover {

    opacity:
        0.9;

}


.boton-pedido:disabled {

    opacity:
        0.6;

    cursor:
        not-allowed;

}


.mensaje-checkout {

    display:
        none;

    margin:
        15px 0;

    padding:
        12px;

    border:
        1px solid var(--magenta);

    border-radius:
        6px;

    color:
        var(--texto-principal);

    background:
        var(--fondo-secundario);

}


@media (max-width: 600px) {

    .checkout-seccion {

        padding:
            18px;

    }


    .checkout-item {

        align-items:
            flex-start;

    }


    .checkout-total {

        font-size:
            19px;

    }

}


/* =========================================
   CATÁLOGO - FILTRO POR CATEGORÍA
========================================= */

.filtro-categoria {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        -10px;

    margin-bottom:
        35px;

}


.filtro-categoria label {

    font-weight:
        bold;

    color:
        var(--texto-resultados);

}


.filtro-categoria select {

    appearance:
        none;

    -webkit-appearance:
        none;

    background:
        var(--fondo-producto);

    color:
        var(--texto);

    border:
        1px solid var(--borde);

    border-radius:
        25px;

    padding:
        10px 42px 10px 16px;

    font-size:
        15px;

    font-weight:
        bold;

    cursor:
        pointer;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            var(--turquesa) 50%
        ),

        linear-gradient(
            135deg,
            var(--turquesa) 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 19px) 50%,
        calc(100% - 13px) 50%;

    background-size:
        6px 6px,
        6px 6px;

    background-repeat:
        no-repeat;

    transition:
        0.2s;

}


.filtro-categoria select:hover {

    border-color:
        var(--turquesa);

}


.filtro-categoria select:focus {

    outline:
        none;

    border-color:
        var(--turquesa);

    box-shadow:
        0 0 0 2px rgba(0, 200, 200, 0.15);

}


/* =========================================
   SEPARACIÓN DEL TÍTULO DEL CATÁLOGO
========================================= */

.titulo-resultados {

    margin-bottom:
        25px;

}


/* =========================================
   AJUSTE EN EL CATÁLOGO
========================================= */

.filtro-categoria + .grid-productos {

    margin-top:
        0;

}


/* =========================================
   VERSIÓN MÓVIL
========================================= */

@media (max-width: 600px) {

    .filtro-categoria {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            8px;

        margin-bottom:
            30px;

    }


    .filtro-categoria select {

        width:
            100%;

    }

}


/* =========================================
   PREGUNTAS FRECUENTES
========================================= */

.faq-lista {

    max-width:
        900px;

    margin:
        20px auto 50px auto;

}


/* -----------------------------------------
   CADA PREGUNTA
----------------------------------------- */

.faq-item {

    background:
        var(--fondo-producto);

    border:
        1px solid var(--borde);

    border-radius:
        16px;

    margin-bottom:
        20px;

    overflow:
        hidden;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


/* -----------------------------------------
   EFECTO AL PASAR EL RATÓN
----------------------------------------- */

.faq-item:hover {

    transform:
        translateY(-3px);

    border-color:
        var(--turquesa);

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.08);

}


/* -----------------------------------------
   PREGUNTA
----------------------------------------- */

.faq-item summary {

    position:
        relative;

    padding:
        22px 60px 22px 24px;

    font-weight:
        bold;

    font-size:
        19px;

    cursor:
        pointer;

    list-style:
        none;

    transition:
        color 0.2s ease,
        *background* 0.2s ease;

}


.faq-item summary::-webkit-details-marker {

    display:
        none;

}


/* -----------------------------------------
   ICONO +
----------------------------------------- */

.faq-item summary::after {

    content:
        "+";

    position:
        absolute;

    right:
        24px;

    top:
        50%;

    transform:
        translateY(-50%)
        rotate(0deg);

    color:
        var(--turquesa);

    font-size:
        28px;

    font-weight:
        bold;

    transition:
        transform 0.3s ease;

}


/* -----------------------------------------
   ICONO CUANDO ESTÁ ABIERTA
----------------------------------------- */

.faq-item[open] summary::after {

    content:
        "+";

    transform:
        translateY(-50%)
        rotate(45deg);

}


/* -----------------------------------------
   PREGUNTA ACTIVA
----------------------------------------- */

.faq-item[open] summary {

    color:
        var(--turquesa);

    background:
        rgba(0, 0, 0, 0.02);

}


/* -----------------------------------------
   RESPUESTA
----------------------------------------- */

.faq-respuesta {

    padding:
        0 24px 24px 24px;

    color:
        var(--texto-resultados);

    font-size:
        16px;

    line-height:
        1.7;

}


/* -----------------------------------------
   ANIMACIÓN DE APERTURA
----------------------------------------- */

.faq-item[open] .faq-respuesta {

    animation:
        faqApertura 0.3s ease-out;

}


@keyframes faqApertura {

    from {

        opacity:
            0;

        transform:
            translateY(-8px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* -----------------------------------------
   VERSIÓN MÓVIL
----------------------------------------- */

@media (max-width: 600px) {

    .faq-lista {

        margin-top:
            15px;

        margin-bottom:
            35px;

    }


    .faq-item {

        margin-bottom:
            15px;

        border-radius:
            13px;

    }


    .faq-item summary {

        padding:
            18px 50px 18px 18px;

        font-size:
            17px;

    }


    .faq-item summary::after {

        right:
            18px;

        font-size:
            25px;

    }


    .faq-respuesta {

        padding:
            0 18px 20px 18px;

        font-size:
            15px;

        line-height:
            1.6;

    }

}


/* =========================================
   FOOTER - CONTACTO Y REDES
========================================= */

footer {

    margin-top:
        60px;

}


/* -----------------------------------------
   CONTENIDO DEL FOOTER
----------------------------------------- */

.footer-contenido {

    max-width:
        1200px;

    margin:
        0 auto;

    padding:
        40px 25px;

    display:
        grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr;

    gap:
        40px;

    text-align:
        left;

}


/* -----------------------------------------
   BLOQUES
----------------------------------------- */

.footer-bloque {

    min-width:
        0;

}


/* -----------------------------------------
   TÍTULOS
----------------------------------------- */

.footer-titulo {

    margin-bottom:
        12px;

    font-size:
        15px;

    font-weight:
        bold;

    letter-spacing:
        0.5px;

}


/* -----------------------------------------
   TEXTO
----------------------------------------- */

.footer-texto {

    font-size:
        14px;

    line-height:
        1.6;

    opacity:
        0.8;

}


/* -----------------------------------------
   ENLACES
----------------------------------------- */

.footer-enlaces {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        10px;

}


.footer-enlace {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        inherit;

    text-decoration:
        none;

    font-size:
        14px;

    transition:
        color 0.2s ease,
        transform 0.2s ease;

}


.footer-enlace:hover {

    color:
        var(--turquesa);

    transform:
        translateX(3px);

}


/* -----------------------------------------
   ICONOS
----------------------------------------- */

.footer-icono {

    width:
        22px;

    height:
        22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

}


.footer-icono svg {

    width:
        20px;

    height:
        20px;

    display:
        block;

}


/* -----------------------------------------
   DERECHOS
----------------------------------------- */

.footer-derechos {

    max-width:
        1200px;

    margin:
        0 auto;

    padding:
        18px 25px 25px 25px;

    border-top:
        1px solid
        rgba(128, 128, 128, 0.25);

    font-size:
        13px;

    opacity:
        0.7;

    text-align:
        center;

}


/* -----------------------------------------
   MÓVIL
----------------------------------------- */

@media (max-width: 700px) {

    .footer-contenido {

        grid-template-columns:
            1fr;

        gap:
            30px;

        padding:
            35px 20px;

    }


    .footer-bloque {

        text-align:
            center;

    }


    .footer-enlaces {

        align-items:
            center;

    }


    .footer-derechos {

        padding:
            18px 20px 25px 20px;

    }

}


/* =========================================
   SLIDER DE OFERTAS
========================================= */

.slider-ofertas {

    position:
        relative;

    width:
        100%;

    max-width:
        1100px;

    margin:
        0 auto;

    overflow:
        hidden;

}


/* =========================================
   CADA OFERTA
========================================= */

.oferta {

    display:
        none;

    width:
        100%;

    text-align:
        center;

    box-sizing:
        border-box;

}


/* =========================================
   OFERTA ACTIVA
========================================= */

.oferta.activa {

    display:
        block;

}


/* =========================================
   ANIMACIÓN HORIZONTAL
========================================= */

.oferta.fade-in {

    animation:
        ofertaFadeIn 0.45s ease-in-out;

}


@keyframes ofertaFadeIn {

    from {

        opacity:
            0;

        transform:
            translateX(25px);

    }

    to {

        opacity:
            1;

        transform:
            translateX(0);

    }

}


/* =========================================
   IMAGEN DE LA OFERTA
========================================= */

.oferta-imagen {

    width:
        100%;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

}


.oferta-imagen img {

    max-width:
        100%;

    height:
        auto;

    display:
        block;

}


/* =========================================
   NOMBRE
========================================= */

.oferta h3 {

    margin:
        15px 0 8px;

}


/* =========================================
   PRECIO ANTERIOR
========================================= */

.oferta .precio-anterior {

    text-decoration:
        line-through;

    margin:
        0;

}


/* =========================================
   PRECIO DE OFERTA
========================================= */

.oferta .precio {

    font-size:
        1.5rem;

    font-weight:
        bold;

    margin:
        5px 0 15px;

}


/* =========================================
   BOTONES DEL SLIDER
========================================= */

.slider-boton {

    position:
        absolute;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        42px;

    height:
        42px;

    border:
        1px solid var(--borde);

    border-radius:
        50%;

    background:
        var(--turquesa);

    color:
        var(--texto-principal);

    font-size:
        20px;

    font-weight:
        bold;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    cursor:
        pointer;

    z-index:
        10;

    transition:
        *background* 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease;

}


.slider-boton:hover {

    background:
        var(--magenta);

    border-color:
        var(--magenta);

    transform:
        translateY(-50%)
        scale(1.05);

}


.slider-boton.anterior {

    left:
        15px;

}


.slider-boton.siguiente {

    right:
        15px;

}


/* =========================================
   INDICADORES
========================================= */

.indicadores-ofertas {

    display:
        flex;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        15px;

}


.indicador-oferta {

    border:
        none;

    cursor:
        pointer;

}
body {
    background-image: url("../imagenes/fondo map.png");
    background-repeat: repeat;
    background-position: top left;
    background-attachment: fixed;
}