@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;700;900&family=Nunito:wght@400;600&family=Poppins:wght@300;400;600;700&display=swap');

:root {
    --primary-color: #a67c52;
    --dark-color: #2d2d2d;
    --light-color: #f4f4f4;
    --title-font: 'Merriweather', serif;
    --body-font: 'Nunito', sans-serif;

    --scrollbar-width: 10px;
    --scrollbar-track: #f1f1f1;
    --scrollbar-thumb: var(--primary-color);
    --scrollbar-thumb-hover: #8a6542;
}

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scroll-padding-top: 50px;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 0px;
    border: 2px solid var(--scrollbar-track);
    /* Da un efecto de margen */
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--body-font);
    background-color: #fff;
    color: var(--dark-color);
    line-height: 1.8;
    overflow-x: hidden;
}


body.loading {
    overflow: hidden;
}

/* --- LOADER --- */
#loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s;
}

.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loader {
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
}

.truckWrapper {
    width: 200px;
    height: 100px;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    justify-content: flex-end;
    overflow-x: hidden;
}

.truckBody {
    width: 130px;
    height: fit-content;
    margin-bottom: 6px;
    animation: motion 1s linear infinite;
}

@keyframes motion {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(3px);
    }

    100% {
        transform: translateY(0px);
    }
}

.truckTires {
    width: 130px;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 10px 0px 15px;
    position: absolute;
    bottom: 0;
}

.truckTires svg {
    width: 24px;
}

.road {
    width: 100%;
    height: 1.5px;
    background-color: #282828;
    position: relative;
    bottom: 0;
    align-self: flex-end;
    border-radius: 3px;
}

.road::before,
.road::after {
    content: "";
    position: absolute;
    background-color: #282828;
    border-radius: 3px;
    animation: roadAnimation 1.4s linear infinite;
}

.road::before {
    width: 20px;
    height: 100%;
    right: -50%;
    border-left: 10px solid white;
}

.road::after {
    width: 10px;
    height: 100%;
    right: -65%;
    border-left: 4px solid white;
}

.lampPost {
    position: absolute;
    bottom: 0;
    right: -90%;
    height: 90px;
    animation: roadAnimation 1.4s linear infinite;
}

@keyframes roadAnimation {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(-350px);
    }
}

/* --- MEDIA QUERIES PARA EL LOADER --- */

@media screen and (max-width: 480px) {
    .truckWrapper {
        width: 150px;
        height: 80px;
    }

    .truckBody {
        width: 100px;
        margin-bottom: 4px;
    }

    .truckTires {
        width: 100px;
        padding: 0px 8px 0px 12px;
    }

    .truckTires svg {
        width: 18px;
    }

    .lampPost {
        height: 60px;
    }

    @keyframes roadAnimation {
        0% {
            transform: translateX(0px);
        }

        100% {
            transform: translateX(-250px);
        }

    }
}

@media screen and (min-width: 481px) and (max-width: 1024px) {
    .truckWrapper {
        width: 180px;
    }

    .truckBody {
        width: 115px;
    }

    .truckTires {
        width: 115px;
    }
}

@media screen and (min-width: 1440px) {
    .truckWrapper {
        width: 250px;
        height: 120px;
    }

    .truckBody {
        width: 160px;
    }

    .truckTires {
        width: 160px;
    }

    .truckTires svg {
        width: 30px;
    }

    .lampPost {
        height: 110px;
    }

    @keyframes roadAnimation {
        0% {
            transform: translateX(0px);
        }

        100% {
            transform: translateX(-450px);
        }

    }
}

@media screen and (max-height: 450px) {
    .truckWrapper {
        transform: scale(0.7);
    }
}


/* TOASTIFY */
.toastify {
    background: var(--dark-color) !important;
    color: var(--light-color) !important;
    font-family: var(--body-font);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 16px 25px;
    font-weight: 700;
    margin-top: 80px !important;
    position: relative;
    overflow: hidden;
}

.toastify::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background-color: var(--primary-color);
    animation: toastProgress 5s linear forwards;
}

@keyframes toastProgress {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}


/* =============================================
   POPUP DE HORARIOS (CORREGIDO)
   ============================================= */

.schedule-popup {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #a67c52;
    color: #fff;
    width: 50px;
    height: 50px;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    z-index: 999;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3);
    animation: bounceLeft 2s infinite;
    transition: background 0.3s ease;
}

.schedule-popup.active {
    animation: none !important;
    background: #8a6542;
}

.schedule-popup i {
    font-size: 28px;
}

.schedule-window {
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%) scale(0.9);
    background: #1a1a1a;
    border: 1px solid #a67c52;
    width: 220px;
    border-radius: 8px;
    padding: 15px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

@media (hover: hover) {
    .schedule-popup:hover .schedule-window {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: translateY(-50%) scale(1);
    }
}

.schedule-popup.active .schedule-window {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

.schedule-header {
    border-bottom: 1px solid rgba(166, 124, 82, 0.3);
    padding-bottom: 8px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a67c52;
    font-weight: 700;
    font-size: 0.9rem;
}

.schedule-content p {
    font-size: 0.85rem;
    color: #ccc;
    margin-bottom: 10px;
}

.status-open {
    color: #25D366 !important;
    font-weight: 600;
}

.status-closed {
    color: #e4405f !important;
    font-weight: 600;
}

@keyframes bounceLeft {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(-50%) translateX(0);
    }

    40% {
        transform: translateY(-50%) translateX(10px);
    }

    60% {
        transform: translateY(-50%) translateX(5px);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@media screen and (max-width: 480px) {
    .schedule-window {
        left: 15px;
        bottom: 70px;
        top: auto;
        width: 260px;
        transform: scale(0.9);
    }

    .schedule-popup.active .schedule-window {
        transform: scale(1);
        opacity: 1;
    }
}


/* Navbar */
header {
    background: rgba(255, 255, 255, 0.95);
    padding: 1.2rem 8%;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

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

.logo {
    font-family: var(--title-font);
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -1px;
}

.logo span {
    color: var(--primary-color);
}

.nav-links {
    display: flex;
    list-style: none;
}

.nav-links li {
    margin-left: 2.5rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--dark-color);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding: 5px 0;
    transition: color 0.3s ease;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 50%;
    background-color: var(--primary-color);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translateX(-50%);
}

.nav-links a:hover {
    color: var(--primary-color);
}

.nav-links a:hover::after {
    width: 100%;
}

.toastify {
    opacity: 1;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.toast-progress {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* --- MENU TOGGLE --- */
.menu-toggle {
    display: none;
    cursor: pointer;
    font-size: 2rem;
    color: var(--dark-color);
    transition: all 0.3s ease;
    z-index: 2100;
    padding: 5px;
}



/* =========================================
   CARRITO DE COMPRAS - ESTILOS COMPLETOS
   ========================================= */

/* 1. Contenedor e Icono en la Navbar */
.cart-container {
    position: relative;
    display: flex;
    align-items: center;
}

.cart-icon {
    font-size: 1.5rem;
    color: var(--dark-color);
    text-decoration: none;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    position: relative;
}

.cart-icon:hover {
    color: var(--primary-color);
}

/* 2. Burbuja del Contador */
.cart-count {
    position: absolute;
    top: -8px;
    right: -12px;
    background-color: var(--primary-color);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    font-family: var(--body-font);
}

/* 3. Menú Desplegable (Dropdown) */
.cart-dropdown {
    position: absolute;
    top: 50px;
    right: 0;
    width: 320px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    padding: 20px;
    z-index: 2000;
    display: none;
    /* Se activa con JS agregando la clase .active */
    transform-origin: top right;
    animation: fadeInScale 0.3s ease-out;
}

.cart-dropdown.active {
    display: block;
}

/* Animación de entrada */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 4. Lista de Productos dentro del Carrito */
#cart-items {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 15px;
}

#cart-items p {
    text-align: center;
    color: #888;
    font-family: var(--body-font);
    padding: 20px 0;
}

.cart-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    animation: slideIn 0.2s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.cart-item-row span:first-child {
    font-weight: 600;
    color: var(--dark-color);
    font-family: var(--body-font);
    flex: 2;
}

.cart-item-row span:nth-child(2) {
    color: var(--primary-color);
    font-weight: 700;
    flex: 1;
    text-align: right;
    margin-right: 10px;
}

/* Botón de eliminar (X) */
.remove-item {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    font-size: 1.2rem;
    transition: color 0.2s ease;
    padding: 0 5px;
}

.remove-item:hover {
    color: #e74c3c;
}

/* 5. Totales y Separadores */
.divider {
    height: 1px;
    background-color: #eee;
    margin: 15px 0;
}

#cart-total {
    font-family: var(--title-font);
    font-size: 1.1rem;
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    color: var(--dark-color);
    border-top: 2px solid var(--light-color);
}

/* 6. Botones de Acción */
.btn-mini {
    display: block;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    color: var(--primary-color);
    font-family: var(--body-font);
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.3s;
}

.btn-mini:hover {
    background-color: #fafafa;
}

.btn-checkout {
    width: 100%;
    background-color: var(--dark-color);
    color: #ffffff;
    border: none;
    padding: 14px;
    font-family: var(--body-font);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.3s ease;
}

.btn-checkout:hover {
    background-color: var(--primary-color);
}

/* Personalización del scroll interno del carrito */
#cart-items::-webkit-scrollbar {
    width: 5px;
}

#cart-items::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 10px;
}


/* HERO SECTION */
.hero {
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)),
        url('https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 0 20px;
}

.hero-content {
    max-width: 800px;
    /* Animación de entrada suave */
    animation: fadeIn 1.2s ease-out;
}

.hero h1 {
    font-family: var(--title-font);
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    /* Tamaño fluido: se ajusta al móvil */
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

.hero p {
    font-family: var(--body-font);
    font-size: clamp(1rem, 3vw, 1.25rem);
    font-weight: 300;
    letter-spacing: 0.5px;
    max-width: 550px;
    margin: 0 auto 2.5rem auto;
    opacity: 0.9;
}

/* Botón Estético */
.btn {
    display: inline-block;
    /* Arreglado: era necesario para padding y transform */
    background: var(--primary-color);
    color: white;
    padding: 1.1rem 2.8rem;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    border: 2px solid transparent;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn:hover {
    background: transparent;
    border-color: white;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Secciones de Contenido Mejoradas */
.content-section {
    padding: 120px 10%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.content-section h2 {
    font-family: var(--title-font);
    font-size: 2.8rem;
    color: var(--dark-color);
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
}

/* Adorno debajo del título H2 */
.content-section h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--primary-color);
    margin: 15px auto 0;
}

/* Animación Simple */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* HISTORIA */

#historia {
    background-color: #fcfbfa;
    padding: 140px 10%;
    position: relative;
    display: flex;
    justify-content: center;
}

.historia-container {
    max-width: 950px;
    text-align: center;
    position: relative;
    z-index: 1;
}

#historia h2 {
    font-family: var(--title-font);
    font-size: 2.8rem;
    margin-bottom: 2.5rem;
    text-align: center;
}


.intro-text {
    font-family: var(--body-font);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--dark-color);
    margin-bottom: 2rem;
    position: relative;
    text-align: justify;
    hyphens: auto;
}


.intro-text::first-letter {
    font-family: var(--title-font);
    font-size: 4.5rem;
    float: left;
    margin-top: 5px;
    margin-right: 15px;
    line-height: 1;
    color: var(--primary-color);
}


.historia-body {
    font-family: var(--body-font);
    font-size: 1.1rem;
    color: #666;
    line-height: 1.9;
    column-gap: 50px;
    margin-top: 3rem;
    text-align: justify;
}

.historia-body p {
    margin-bottom: 1.5rem;
    text-indent: 20px;
}

#historia::before {
    content: '1985';
    position: absolute;
    font-family: var(--title-font);
    font-size: clamp(10rem, 20vw, 15rem);
    font-weight: 900;
    color: rgba(166, 124, 82, 0.03);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}


/* CATALOGO */
#catalogo {
    padding: 100px 2%;
}

.product-grid {
    display: grid;
    max-width: 1800px;
    margin: 0 auto;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 40px 0;
}


.card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
}


.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}


.card-img {
    height: 380px;
    width: 100%;
    overflow: hidden;
    background-color: #eee;
}

.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

.card:hover .card-img img {
    transform: scale(1.1);
}


.card-info {
    padding: 2.5rem 2rem;
    text-align: left;
    background: #ffffff;
    display: flex;
    /* Añadido */
    flex-direction: column;
    /* Añadido */
    flex-grow: 1;
    /* Añadido para empujar el contenido */
}

.card-info h3 {
    font-family: var(--title-font);
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
    color: var(--dark-color);
}

.card-info p {
    font-family: var(--body-font);
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.card-info .price {
    margin-top: auto;
    /* Esto empuja el precio y el botón al fondo */
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* ESTILO DEL BOTÓN FANCY */
.fancy {
    background-color: transparent;
    border: 2px solid var(--dark-color);
    border-radius: 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 20px 0 0 0;
    /* Margen superior para separarlo del precio */
    outline: none;
    overflow: visible;
    padding: 1.25rem 2rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
    user-select: none;
    font-size: 13px;
    font-family: var(--body-font);
    width: 100%;
    /* Opcional: para que ocupe el ancho de la card */
}

.fancy::before {
    content: " ";
    width: 1.5625rem;
    height: 2px;
    background: var(--dark-color);
    top: 50%;
    left: 1.5rem;
    position: absolute;
    transform: translateY(-50%);
    transform-origin: center;
    transition: background 0.3s linear, width 0.3s linear;
}

.fancy .text {
    font-size: 1.125em;
    line-height: 1.33333em;
    padding-left: 2em;
    display: block;
    text-align: left;
    transition: all 0.3s ease-in-out;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--dark-color);
}

.fancy .top-key {
    height: 2px;
    width: 1.5625rem;
    background: #e8e8e8;
    position: absolute;
    top: -2px;
    left: 0.625rem;
    transition: width 0.5s ease-out, left 0.3s ease-out;
}

.fancy .bottom-key-1 {
    height: 2px;
    width: 1.5625rem;
    background: #e8e8e8;
    position: absolute;
    bottom: -2px;
    right: 1.25rem;
    transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy .bottom-key-2 {
    height: 2px;
    width: 0.625rem;
    background: #e8e8e8;
    position: absolute;
    bottom: -2px;
    right: 0.625rem;
    transition: width 0.5s ease-out, right 0.3s ease-out;
}

/* HOVER EFFECTS */
.fancy:hover {
    color: white;
    background: var(--dark-color);
}

.fancy:hover::before {
    width: 0.9375rem;
    background: white;
}

.fancy:hover .text {
    color: white;
    padding-left: 1.5em;
}

.fancy:hover .top-key {
    left: -2px;
    width: 0px;
}

.fancy:hover .bottom-key-1,
.fancy:hover .bottom-key-2 {
    right: 0;
    width: 0;
}

/* REPARACIÓN */
#reparacion {
    background-color: #ffffff;
    padding: 100px 5%;
}

.form-container {
    max-width: 900px;

    margin: 0 auto;
    text-align: center;
}


.repair-form {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 20px;

    margin-top: 40px;
    text-align: left;
}


.full-width {
    grid-column: span 2;
}


.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 15px 18px;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    font-family: var(--body-font);
    font-size: 0.95rem;
    background-color: #fcfcfc;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary-color);
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.form-group select {
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23a67c52" d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 15px;
}

.file-upload {
    justify-content: center;
}

.file-upload label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 5px;
}

.file-upload input[type="file"] {
    padding: 10px;
    font-size: 0.8rem;
    border: 1px dashed #ccc;
}

.btn-submit {
    grid-column: span 2;
    background-color: var(--primary-color);
    color: white;
    padding: 20px;
    border: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.4s;
}

.btn-submit:hover {
    background-color: var(--dark-color);
    transform: translateY(-2px);
}

/* ALQUILER */

/* =========================================
   SECCIÓN ALQUILER - CONTENEDORES
   ========================================= */
#alquiler {
    background-color: var(--light-color);
    padding: 100px 8%;
}

.alquiler-container {
    max-width: 1200px;
    margin: 0 auto;
}

.header-alquiler {
    text-align: center;
    margin-bottom: 60px;
}

.header-alquiler h2 {
    font-family: var(--title-font);
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.alquiler-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start;
}

/* =========================================
   CALENDARIO DINÁMICO
   ========================================= */
.calendar-box {
    background: #fff;
    border: 1px solid #eee;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.calendar-header h4 {
    font-family: var(--title-font);
    font-size: 1.1rem;
    color: var(--dark-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cal-nav {
    cursor: pointer;
    font-weight: bold;
    color: var(--primary-color);
    padding: 5px 15px;
    font-size: 1.2rem;
    transition: 0.3s;
    user-select: none;
}

.cal-nav:hover {
    background: #fdf5ed;
    border-radius: 50%;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    text-align: center;
}

.calendar-grid span {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-family: var(--body-font);
    transition: all 0.3s ease;
    border-radius: 4px;
}

/* Cabecera de días (L, M, M...) */
.calendar-grid span:nth-child(-n+7) {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 0.75rem;
}

/* --- ESTADOS DEL CALENDARIO --- */

/* Día Activo (Seleccionado) */
.calendar-grid span.active {
    background: var(--primary-color) !important;
    color: white !important;
    font-weight: 700;
    border-radius: 50%;
}

/* Rango de fechas */
.calendar-grid span.range {
    background: #f8f1eb;
    color: var(--primary-color);
    border-radius: 0;
}

/* Días de otros meses */
.calendar-grid span.muted {
    color: #eee;
}

/* NUEVA CLASE: Días pasados */
.calendar-grid span.past-day {
    color: #e0e0e0;
    cursor: not-allowed;
    background: transparent;
    pointer-events: none;
    /* Evita interacción */
}

/* Días Ocupados (Firebase) */
.calendar-grid span.booked {
    background-color: #eee;
    color: #bbb;
    text-decoration: line-through;
    cursor: not-allowed;
    position: relative;
}

.calendar-grid span.booked::after {
    content: 'Ocupado';
    position: absolute;
    font-size: 0.5rem;
    bottom: 2px;
    text-decoration: none;
    text-transform: uppercase;
}

/* =========================================
   GARANTÍAS Y COMPROMISOS
   ========================================= */
.garantias-box {
    margin-top: 40px;
    padding: 20px;
    border-top: 1px solid #eee;
}

.garantias-box h4 {
    font-family: var(--title-font);
    margin-bottom: 20px;
    font-size: 1rem;
    text-transform: uppercase;
}

.garantias-box li {
    font-size: 0.9rem;
    margin-bottom: 12px;
    color: #555;
    list-style: none;
    padding-left: 25px;
    position: relative;
    line-height: 1.4;
}

.garantias-box li::before {
    content: '→';
    color: var(--primary-color);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* =========================================
   FORMULARIO DE RESERVA
   ========================================= */
.alquiler-form-box {
    background: #fff;
    padding: 45px;
    border: 1px solid #eee;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04);
}

.form-group {
    margin-bottom: 15px;
}

.booking-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.booking-form label {
    font-family: var(--body-font);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 1.5px;
    color: #888;
}

.booking-form input,
.booking-form select {
    border: 1px solid #e2e2e2;
    padding: 15px;
    font-size: 0.9rem;
    transition: border-color 0.3s;
    outline: none;
    width: 100%;
    /* Asegura que ocupen todo el espacio */
}

.booking-form input:focus,
.booking-form select:focus {
    border-color: var(--primary-color);
}

/* --- RESUMEN DE PRECIOS --- */
.price-summary {
    background: #fcfcfc;
    padding: 25px;
    margin: 20px 0;
    border-left: 3px solid var(--primary-color);
}

.price-summary h4 {
    margin-bottom: 15px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.price-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #666;
}

.price-line.total {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #ddd;
    color: var(--dark-color);
    font-size: 1.2rem;
    font-family: var(--title-font);
}

.garantia-nota {
    font-size: 0.7rem;
    color: #999;
    font-style: italic;
    margin: 5px 0 15px 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.garantia-nota i {
    color: var(--primary-color);
}

/* --- BOTÓN --- */
.btn-booking {
    background: var(--dark-color);
    color: #fff;
    padding: 22px;
    border: none;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.4s ease;
    width: 100%;
}

.btn-booking:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
}


.coupon-group {
    display: flex;
    gap: 10px;
}

.coupon-group input {
    margin-bottom: 0 !important;
    /* Quitar margen para alinear con botón */
}

.btn-small {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0 20px;
    height: 52px;

    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}

.btn-small:hover {
    background: var(--dark-color);
}

/* =========================================
   SECCIÓN NEWSLETTER - REDISEÑO ESTÉTICO
   ========================================= */

.newsletter-section {
    background-color: #111;
    /* Fondo muy oscuro para contraste */
    padding: 120px 5%;
    margin-top: 100px;
    /* SEPARACIÓN de la sección de alquiler */
    position: relative;
}

.newsletter-wrapper {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.newsletter-wrapper .sub-title {
    font-family: var(--body-font);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 0.8rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    display: block;
}

.newsletter-wrapper h2 {
    font-family: var(--title-font);
    font-size: clamp(2rem, 5vw, 3rem);
    color: #fff;
    margin-bottom: 20px;
}

.newsletter-wrapper p {
    font-family: var(--body-font);
    font-size: 1.1rem;
    color: #999;
    margin-bottom: 40px;
}

/* --- Formulario Estilo Cápsula --- */
.newsletter-form {
    max-width: 700px;
    margin: 0 auto;
}

.input-group {
    display: flex;
    background: #fff;
    padding: 6px;
    border-radius: 50px;
    /* Forma de píldora */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
    overflow: hidden;
}

.input-group input {
    flex: 1;
    padding: 15px 25px;
    border: none;
    outline: none;
    font-family: var(--body-font);
    font-size: 0.95rem;
    background: transparent;
}

/* Línea divisoria entre inputs */
.input-group input[type="text"] {
    border-right: 1px solid #eee;
}

.btn-news {
    background-color: var(--primary-color);
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: 40px;
    font-family: var(--body-font);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-news:hover {
    background-color: var(--dark-color);
    transform: scale(1.03);
}

.btn-news:disabled {
    background-color: #555;
    cursor: not-allowed;
}

/* Consentimiento */
.consent {
    font-family: var(--body-font);
    font-size: 0.8rem;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.consent input {
    accent-color: var(--primary-color);
}


/* FOOTER */
/* =========================================
   FOOTER PREMIUM - MUEBLES FP
   ========================================= */
.main-footer {
    margin-top: 100px;
    /* Más espacio con la sección anterior */
    background-color: #0d0d0d;
    color: #fff;
    padding: 80px 8% 30px;
    font-family: 'Poppins', sans-serif;
    border-top: 1px solid rgba(166, 124, 82, 0.2);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* Ajuste de columnas para que se vean equilibradas */
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* Encabezados de Columna */
.main-footer h4 {
    font-size: 0.85rem;
    margin-bottom: 30px;
    color: #a67c52;
    /* Color primario */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

/* COLUMNA 1: MARCA */
.footer-brand .logo {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
}

.footer-brand .logo span {
    color: #a67c52;
}

.footer-brand p {
    color: #888;
    line-height: 1.8;
    font-size: 0.9rem;
    max-width: 320px;
}

/* COLUMNA 2: REDES (ESTILO UIVERSE) */
.wrapper-horizontal {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 15px;
}

.wrapper-horizontal .icon {
    position: relative;
    background: #1a1a1a;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.wrapper-horizontal .icon i {
    font-size: 20px;
}

/* Tooltips */
.wrapper-horizontal .tooltip {
    position: absolute;
    top: 0;
    font-size: 12px;
    background: #fff;
    color: #1a1a1a;
    padding: 5px 12px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    font-weight: 600;
}

.wrapper-horizontal .tooltip::before {
    position: absolute;
    content: "";
    height: 6px;
    width: 6px;
    background: #fff;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}

.wrapper-horizontal .icon:hover .tooltip {
    top: -45px;
    opacity: 1;
}

/* Hovers Personalizados */
.icon.instagram:hover {
    background: #e4405f;
    color: #fff;
}

.icon.whatsapp:hover {
    background: #25D366;
    color: #fff;
}

.icon.tiktok:hover {
    background: #000;
    border-color: #fff;
    color: #fff;
}

.icon.linkedin:hover {
    background: #0077b5;
    color: #fff;
}

/* Elimina el subrayado azul de los enlaces de los iconos */
.icon-link {
    text-decoration: none !important;
    /* El !important asegura que sobreescriba cualquier estilo por defecto */
    outline: none;
}

/* También es bueno asegurar que el li interno no herede estilos de texto */
.wrapper-horizontal .icon {
    text-decoration: none;
    display: flex;
    /* Asegura que el icono esté centrado */
    justify-content: center;
    align-items: center;
}

.wrapper-horizontal .icon:hover .tooltip {
    background: inherit;
    /* Toma el color de la red social */
    color: #fff;
}

.wrapper-horizontal .icon:hover .tooltip::before {
    background: inherit;
}

/* COLUMNA 3: CONTACTO Y LEGAL */
.email-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #ccc;
    font-size: 0.9rem;
    margin-bottom: 35px;
    transition: color 0.3s;
}

.email-link i {
    font-size: 1.3rem;
    color: #a67c52;
}

.email-link:hover {
    color: #fff;
}

.legal-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.legal-links a {
    color: #555;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    width: fit-content;
}

.legal-links a:hover {
    color: #a67c52;
    transform: translateX(5px);
}

/* FOOTER BOTTOM */
.footer-bottom {
    margin-top: 80px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.footer-bottom p {
    color: #444;
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* --- MODAL STYLES --- */
/* =========================================
   MODAL LEGAL - MUEBLES FP (ESTILO PRO)
   ========================================= */

/* 1. Fondo del Modal (Overlay) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    /* Oscurecimiento profundo */
    display: none;
    /* Se activa con .modal-active */
    justify-content: center;
    align-items: center;
    z-index: 2000;
    /* Por encima de todo */
    backdrop-filter: blur(8px);
    /* Desenfoque de fondo premium */
    padding: 20px;
    transition: all 0.3s ease;
}

/* 2. Contenedor Principal */
.modal-container {
    background: #1a1a1a;
    width: 100%;
    max-width: 650px;
    max-height: 90vh;
    /* Evita que el modal sea más alto que la pantalla */
    border-radius: 15px;
    border: 1px solid rgba(166, 124, 82, 0.3);
    /* Borde sutil color oro */
    display: flex;
    flex-direction: column;
    /* Organiza Header, Body y Footer verticalmente */
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: modalAppear 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Animación de entrada */
@keyframes modalAppear {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 3. Encabezado del Modal */
.modal-header {
    padding: 25px 30px;
    background: #0d0d0d;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-header h3 {
    color: #a67c52;
    font-size: 1.1rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
}

.close-btn {
    background: rgba(255, 255, 255, 0.03);
    border: none;
    color: #888;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.close-btn i {
    font-size: 24px;
}

.close-btn:hover {
    background: #a67c52;
    /* Color de acento al cerrar */
    color: #fff;
    transform: rotate(90deg);
}

/* 4. Cuerpo del Modal (CON SCROLL INTERNO) */
.modal-body {
    padding: 30px;
    overflow-y: auto;
    /* Habilita scroll vertical */
    color: #bbb;
    line-height: 1.8;
    font-size: 0.95rem;
    background: linear-gradient(to bottom, #1a1a1a, #161616);
}

/* Estilo de la barra de scroll para navegadores Webkit (Chrome, Safari, Edge) */
.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: #0d0d0d;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #a67c52;
    border-radius: 10px;
}

/* Estilos de texto interno */
.modal-body h4 {
    color: #fff;
    margin: 25px 0 12px;
    font-size: 1.05rem;
    border-left: 3px solid #a67c52;
    padding-left: 12px;
}

.modal-body h5 {
    color: #a67c52;
    margin: 20px 0 8px;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.modal-body p {
    margin-bottom: 15px;
}

.modal-body ul {
    margin-bottom: 20px;
    padding-left: 20px;
}

.modal-body li {
    margin-bottom: 8px;
    list-style-type: square;
    color: #999;
}

.modal-body hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin: 30px 0;
}

/* 5. Pie del Modal (Botón de acción) */
.modal-footer-btn {
    padding: 20px 30px;
    background: #0d0d0d;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: right;
}

.btn-primary-modal {
    background: #a67c52;
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary-modal:hover {
    background: #8e6843;
    box-shadow: 0 5px 15px rgba(166, 124, 82, 0.3);
    transform: translateY(-2px);
}

/* 6. Clase de Activación (Vía JS) */
.modal-active {
    display: flex;
}

.year-highlight {
    color: #a67c52;
    /* El color dorado de MueblesFP */
    font-weight: 600;
    /* Un poco más de grosor para que resalte */
    margin-right: 3px;
}





/* ==========================================================================
   MEDIA QUERIES - SCHEDULE POPUP (Starting from 320px)
   ========================================================================== */

@media screen and (min-width: 320px) {

    /* Ajuste del botón flotante */
    .schedule-popup {
        width: 45px;
        /* Ligeramente más pequeño para no estorbar */
        height: 45px;
        border-radius: 0 8px 8px 0;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    }

    .schedule-popup i {
        font-size: 22px;
        /* Icono más proporcionado */
    }

    /* Reposicionamiento de la ventana para pantallas pequeñas */
    .schedule-window {
        left: 55px;
        /* Ajustado al nuevo ancho del popup */
        width: 240px;
        /* Un poco más ancha para mejor lectura de texto */
        padding: 12px;
        font-size: 14px;
        /* En móviles pequeños preferimos que no use escalado extremo para evitar borrosidad */
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Ajustes de contenido interno */
    .schedule-header {
        font-size: 0.85rem;
        gap: 6px;
    }

    .schedule-content p {
        font-size: 0.8rem;
        margin-bottom: 8px;
    }

    /* Animación: Reducimos la intensidad del rebote en móvil para no distraer */
    @keyframes bounceLeft {

        0%,
        20%,
        50%,
        80%,
        100% {
            transform: translateY(-50%) translateX(0);
        }

        40% {
            transform: translateY(-50%) translateX(5px);
        }

        60% {
            transform: translateY(-50%) translateX(2px);
        }
    }
}

/* Ajustes para Tablets y Escritorio (768px en adelante) */
@media screen and (min-width: 768px) {
    .schedule-popup {
        width: 50px;
        height: 50px;
    }

    .schedule-popup i {
        font-size: 28px;
    }

    .schedule-window {
        left: 60px;
        width: 220px;
        padding: 15px;
    }

    .schedule-header {
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   MEDIA QUERIES - NAVBAR & NAVIGATION (Starting from 320px)
   ========================================================================== */

.menu-toggle {
    cursor: pointer;
    font-size: 1.8rem;
    color: var(--dark-color);
    z-index: 2100;
    /* Siempre por encima del menú */
    padding: 5px;
    display: block;
    /* Visible por defecto en móviles */
}

@media screen and (min-width: 320px) {
    header {
        padding: 0.8rem 5%;
    }

    .logo {
        font-size: 1.3rem;
    }

    .nav-links {
        /* Estructura del panel lateral */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        position: fixed;
        top: 0;
        /* IMPORTANTE: Usamos transform para asegurar que el navegador lo mueva */
        right: -100%;
        width: 100%;
        /* Ocupa todo el ancho en móviles pequeños */
        height: 100vh;
        background-color: #ffffff;

        /* Transición suave y limpia */
        transition: right 0.4s ease-in-out;
        z-index: 2000;
        box-shadow: -10px 0 20px rgba(0, 0, 0, 0.1);
        visibility: hidden;
        /* Evita que los links sean clickeables mientras está oculto */
    }

    /* ESTADO ACTIVO: Cuando el JS añade la clase .active */
    .nav-links.active {
        right: 0;
        /* Entra a la pantalla */
        visibility: visible;
    }

    .nav-links li {
        margin: 1.5rem 0;
        margin-left: 0;
    }

    .nav-links a {
        font-size: 1.3rem;
        color: var(--dark-color);
        font-weight: 700;
        text-transform: uppercase;
        display: block;
    }

    /* Ajuste para que el icono de la cama/X no se pierda */
    .menu-toggle i {
        display: block;
    }
}


@media screen and (min-width: 768px) {
    .nav-links {
        width: 300px;
        /* En tablet ya no necesita ocupar todo el ancho */
    }
}

@media screen and (min-width: 992px) {
    .menu-toggle {
        display: none;
        /* Escondemos la hamburguesa */
    }

    .nav-links {
        /* Reseteamos el comportamiento de panel lateral a menú horizontal */
        position: static;
        display: flex;
        flex-direction: row;
        width: auto;
        height: auto;
        background: transparent;
        box-shadow: none;
        visibility: visible;
        transition: none;
        right: auto;
    }

    .nav-links li {
        margin-left: 2.5rem;
        margin-bottom: 0;
    }

    .nav-links a {
        font-size: 0.95rem;
        font-weight: 500;
    }
}

/* ==========================================================================
   MEDIA QUERIES - SHOPPING CART (Starting from 320px)
   ========================================================================== */

@media screen and (min-width: 320px) {

    /* Ajuste del icono y burbuja */
    .cart-icon {
        font-size: 1.3rem;
        /* Un poco más pequeño para dejar espacio al logo */
    }

    .cart-count {
        width: 18px;
        height: 18px;
        font-size: 10px;
        top: -5px;
        right: -10px;
    }

    /* El Dropdown en móvil: lo hacemos casi de ancho completo */
    .cart-dropdown {
        position: fixed;
        /* Cambiamos a fixed para que no dependa del contenedor */
        top: 65px;
        /* Justo debajo del header */
        right: 5%;
        left: 5%;
        width: 90%;
        /* Ocupa la mayor parte del ancho */
        max-height: 80vh;
        /* Evita que se salga de la pantalla verticalmente */
        overflow-y: auto;
        border-radius: 12px;
        padding: 15px;
    }

    /* Ajustes de la lista de productos */
    #cart-items {
        max-height: 250px;
        /* Reducimos altura interna para pantallas pequeñas */
    }

    .cart-item-row {
        padding: 15px 0;
        /* Más espacio para facilitar el clic en la "X" */
    }

    .cart-item-row span:first-child {
        font-size: 0.9rem;
        /* Texto más compacto */
    }

    /* Botón de finalizar compra más grande para dedos */
    .btn-checkout {
        padding: 16px;
        font-size: 0.95rem;
    }
}

/* Ajustes para Tablets y Escritorio (768px en adelante) */
@media screen and (min-width: 768px) {
    .cart-icon {
        font-size: 1.5rem;
    }

    /* Volvemos al comportamiento de menú desplegable pequeño */
    .cart-dropdown {
        position: absolute;
        top: 50px;
        right: 0;
        left: auto;
        width: 320px;
        border-radius: 0px;
        /* Estilo original */
    }

    #cart-items {
        max-height: 300px;
    }
}

/* Para pantallas de escritorio muy amplias (992px+) */
@media screen and (min-width: 992px) {
    .cart-dropdown {
        top: 60px;
        /* Ajuste por el padding del header de escritorio */
    }
}

/* ==========================================================================
   MEDIA QUERIES - HERO & CONTENT SECTIONS (Starting from 320px)
   ========================================================================== */

@media screen and (min-width: 320px) {

    /* Hero: Ajustamos la altura para móviles con barras de navegación del navegador */
    .hero {
        height: 100svh;
        /* 'svh' es mejor para móviles (Small Viewport Height) */
        padding: 0 15px;
    }

    .hero-content {
        width: 100%;
    }

    /* Reducción de márgenes para que el botón no quede fuera de la pantalla inicial */
    .hero h1 {
        margin-bottom: 1rem;
        line-height: 1.2;
    }

    .hero p {
        margin-bottom: 1.8rem;
        padding: 0 10px;
    }

    /* Botón: Un poco más compacto pero con área de toque suficiente */
    .btn {
        padding: 1rem 2rem;
        font-size: 0.8rem;
        letter-spacing: 1px;
    }

    /* Secciones de Contenido: Reducimos drásticamente el padding excesivo */
    .content-section {
        padding: 60px 5%;
    }

    .content-section h2 {
        font-size: 1.8rem;
        /* Título h2 más proporcionado a móvil */
    }

    .content-section h2::after {
        width: 40px;
        /* Adorno más corto */
        margin-top: 10px;
    }
}

/* Ajustes para Tablets (768px en adelante) */
@media screen and (min-width: 768px) {
    .hero {
        height: 100vh;
    }

    .btn {
        padding: 1.1rem 2.8rem;
        font-size: 0.85rem;
    }

    .content-section {
        padding: 100px 8%;
    }

    .content-section h2 {
        font-size: 2.4rem;
    }
}

/* Ajustes para Escritorio (1024px en adelante) */
@media screen and (min-width: 1024px) {
    .content-section {
        padding: 120px 10%;
    }

    .content-section h2 {
        font-size: 2.8rem;
    }
}

/* ==========================================================================
   MEDIA QUERIES - HISTORY & CATALOG (Starting from 320px)
   ========================================================================== */

@media screen and (min-width: 320px) {

    /* --- Sección Historia --- */
    #historia {
        padding: 60px 6%;
        /* Reducimos padding lateral y vertical */
    }

    #historia h2 {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }

    .intro-text {
        font-size: 1.1rem;
        /* Texto más legible en móvil */
        text-align: left;
        /* Evita huecos blancos raros en pantallas pequeñas */
    }

    .intro-text::first-letter {
        font-size: 3.5rem;
        /* Capitular más pequeña */
        margin-right: 10px;
    }

    .historia-body {
        margin-top: 1.5rem;
        font-size: 1rem;
        text-align: left;
        /* Consistencia con el intro */
    }

    #historia::before {
        font-size: 8rem;
        /* El año de fondo más pequeño para no distraer */
        opacity: 0.05;
    }

    /* --- Sección Catálogo (Grid) --- */
    #catalogo {
        padding: 40px 5%;
    }

    .product-grid {
        grid-template-columns: 1fr;
        /* Una sola columna en móviles */
        gap: 30px;
        padding: 20px 0;
    }

    .card-img {
        height: 300px;
        /* Altura más manejable para scroll vertical */
    }

    .card-info {
        padding: 1.5rem;
        /* Reducimos padding interno de la card */
    }

    .card-info h3 {
        font-size: 1.5rem;
    }

    .card-info p {
        font-size: 1rem;
    }

    /* Botón Fancy: Ajuste para que el texto quepa bien */
    .fancy {
        padding: 1rem 1.5rem;
    }

    .fancy .text {
        font-size: 1rem;
        padding-left: 1.5em;
    }
}

/* Tablets (768px en adelante) */
@media screen and (min-width: 768px) {
    #historia {
        padding: 100px 10%;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Dos columnas en tablets */
    }

    .intro-text {
        font-size: 1.3rem;
        text-align: justify;
    }

    .card-img {
        height: 350px;
    }
}

/* Escritorio (1024px en adelante) */
@media screen and (min-width: 1024px) {
    #historia {
        padding: 140px 10%;
    }

    .product-grid {
        grid-template-columns: repeat(3, 1fr);
        /* Volvemos a tres columnas */
    }

    .historia-body {
        column-count: 2;
        /* Opcional: añade lectura en columnas en pantallas grandes */
        column-gap: 50px;
    }
}

/* ==========================================================================
   MEDIA QUERIES - REPAIR FORM (Starting from 320px)
   ========================================================================== */

@media screen and (min-width: 320px) {
    #reparacion {
        padding: 60px 6%;
        /* Reducimos padding para aprovechar el ancho */
    }

    .form-container {
        width: 100%;
    }

    .repair-form {
        /* Pasamos de 2 columnas a 1 sola columna */
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 30px;
    }

    /* En móvil, todos los elementos ocupan el ancho completo */
    .full-width,
    .form-group,
    .btn-submit {
        grid-column: span 1;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 12px 15px;
        /* Ligeramente más compacto */
        font-size: 16px;
        /* Evita que iOS haga zoom automático al enfocar */
    }

    .btn-submit {
        padding: 18px;
        letter-spacing: 1px;
    }
}

/* Ajustes para Tablets y Escritorio (768px en adelante) */
@media screen and (min-width: 768px) {
    #reparacion {
        padding: 100px 5%;
    }

    .repair-form {
        grid-template-columns: 1fr 1fr;
        /* Restauramos las 2 columnas */
        gap: 20px;
    }

    .full-width {
        grid-column: span 2;
    }

    .btn-submit {
        grid-column: span 2;
        padding: 20px;
    }
}

/* ==========================================================================
   MEDIA QUERIES - RENTAL & CALENDAR (Starting from 320px)
   ========================================================================== */

@media screen and (min-width: 320px) {
    #alquiler {
        padding: 60px 5%;
        /* Más espacio lateral en móviles */
    }

    .header-alquiler {
        margin-bottom: 35px;
    }

    .header-alquiler h2 {
        font-size: 1.8rem;
    }

    /* El grid principal pasa a una sola columna */
    .alquiler-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Caja del calendario */
    .calendar-box {
        padding: 20px 15px;
        /* Más compacto */
    }

    .calendar-header h4 {
        font-size: 0.9rem;
    }

    .calendar-grid {
        gap: 4px;
        /* Menos espacio entre días */
    }

    .calendar-grid span {
        height: 35px;
        /* Días un poco más pequeños para que quepan 7 en línea */
        font-size: 0.75rem;
    }

    .calendar-grid span.booked::after {
        font-size: 0.4rem;
        /* Texto 'Ocupado' minúsculo */
        bottom: 1px;
    }

    /* Formulario de reserva */
    .alquiler-form-box {
        padding: 25px 20px;
    }

    .booking-form .form-row {
        grid-template-columns: 1fr;
        /* Inputs uno debajo de otro */
        gap: 0;
    }

    .coupon-group {
        flex-direction: column;
        /* Input y botón de cupón apilados */
    }

    .btn-small {
        width: 100%;
        height: 45px;
    }

    /* Resumen de precios */
    .price-line.total {
        font-size: 1rem;
    }

    .btn-booking {
        padding: 18px;
        font-size: 0.8rem;
    }
}

/* Tablets (768px en adelante) */
@media screen and (min-width: 768px) {
    .alquiler-grid {
        grid-template-columns: 1fr;
        /* Mantenemos una columna pero con ancho máximo */
        max-width: 700px;
        margin: 0 auto;
    }

    .booking-form .form-row {
        grid-template-columns: 1fr 1fr;
        /* Recuperamos 2 columnas para inputs cortos */
        gap: 20px;
    }

    .coupon-group {
        flex-direction: row;
    }
}

/* Escritorio (1024px en adelante) */
@media screen and (min-width: 1024px) {
    #alquiler {
        padding: 100px 8%;
    }

    .alquiler-grid {
        grid-template-columns: 1fr 1.2fr;
        /* Volvemos al diseño original de dos columnas */
        max-width: 1200px;
        gap: 60px;
    }

    .calendar-grid span {
        height: 40px;
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   MEDIA QUERIES - NEWSLETTER (Starting from 320px)
   ========================================================================== */

@media screen and (min-width: 320px) {
    .newsletter-section {
        padding: 60px 6%;
        margin-top: 60px;
        /* Reducimos el margen superior en móvil */
    }

    .newsletter-wrapper .sub-title {
        letter-spacing: 3px;
        /* Reducimos un poco el espaciado para que no rompa línea */
        font-size: 0.7rem;
    }

    .newsletter-wrapper p {
        font-size: 0.95rem;
        margin-bottom: 30px;
    }

    /* Rompemos el estilo cápsula para que sea vertical */
    .input-group {
        flex-direction: column;
        background: transparent;
        /* Quitamos el fondo blanco del contenedor */
        padding: 0;
        box-shadow: none;
        border-radius: 0;
    }

    .input-group input {
        background: #fff;
        /* El fondo blanco va ahora en cada input */
        margin-bottom: 10px;
        border-radius: 30px !important;
        /* Cada input se vuelve su propia píldora */
        width: 100%;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    /* Quitamos la línea divisoria que ya no tiene sentido en vertical */
    .input-group input[type="text"] {
        border-right: none;
    }

    .btn-news {
        width: 100%;
        padding: 18px;
        margin-top: 10px;
        border-radius: 30px;
    }

    .consent {
        font-size: 0.75rem;
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        padding: 0 10px;
    }
}

/* Tablets (768px en adelante) */
@media screen and (min-width: 768px) {
    .newsletter-section {
        padding: 100px 5%;
    }

    /* Restauramos el estilo cápsula original */
    .input-group {
        flex-direction: row;
        background: #fff;
        padding: 6px;
        border-radius: 50px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    }

    .input-group input {
        margin-bottom: 0;
        border-radius: 0 !important;
        box-shadow: none;
    }

    .input-group input[type="text"] {
        border-right: 1px solid #eee;
    }

    .btn-news {
        width: auto;
    }
}

/* Escritorio (1024px en adelante) */
@media screen and (min-width: 1024px) {
    .newsletter-section {
        padding: 120px 5%;
    }
}

/* ==========================================================================
   MEDIA QUERIES - FOOTER (Starting from 320px)
   ========================================================================== */

@media screen and (min-width: 320px) {
    .main-footer {
        padding: 60px 6% 30px;
        margin-top: 60px;
        text-align: center;
        /* Centramos todo el contenido en móviles */
    }

    .footer-container {
        grid-template-columns: 1fr;
        /* Una sola columna */
        gap: 40px;
    }

    /* Ajuste Columna 1: Marca */
    .footer-brand p {
        margin: 0 auto;
        /* Centramos el párrafo de descripción */
        font-size: 0.85rem;
    }

    /* Ajuste Columna 2: Redes Sociales */
    .wrapper-horizontal {
        justify-content: center;
        /* Centramos los iconos */
    }

    .wrapper-horizontal .tooltip {
        display: none !important;
        /* Desactivamos tooltips en dispositivos táctiles */
    }

    .main-footer h4 {
        margin-bottom: 20px;
        font-size: 0.8rem;
    }

    /* Ajuste Columna 3: Contacto y Legal */
    .email-link {
        justify-content: center;
        margin-bottom: 25px;
    }

    .legal-links {
        align-items: center;
        /* Centramos los enlaces legales */
    }

    .legal-links a {
        font-size: 0.8rem;
    }

    /* Footer Bottom */
    .footer-bottom {
        margin-top: 50px;
    }
}

/* Tablets (768px en adelante) */
@media screen and (min-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
        /* Dos columnas para aprovechar el ancho */
        text-align: left;
    }

    .footer-brand {
        grid-column: span 2;
        /* La marca ocupa todo el ancho arriba */
        text-align: center;
    }

    .footer-brand p {
        max-width: 500px;
    }

    .wrapper-horizontal,
    .email-link,
    .legal-links {
        justify-content: flex-start;
        align-items: flex-start;
    }

    .footer-brand,
    .legal-links {
        text-align: left;
    }
}

/* Escritorio (1024px en adelante) */
@media screen and (min-width: 1024px) {
    .main-footer {
        padding: 80px 8% 30px;
    }

    .footer-container {
        grid-template-columns: 1.5fr 1fr 1fr;
        /* Restauramos las tres columnas originales */
    }

    .footer-brand {
        grid-column: span 1;
        text-align: left;
    }

    .wrapper-horizontal .tooltip {
        display: block !important;
        /* Reactivamos tooltips en escritorio */
    }
}

/* ==========================================================================
   MEDIA QUERIES - LEGAL MODAL (Starting from 320px)
   ========================================================================== */

@media screen and (min-width: 320px) {

    /* Fondo del modal: ajustamos el padding para ganar espacio */
    .modal-overlay {
        padding: 10px;
    }

    /* Contenedor: Lo hacemos casi de pantalla completa */
    .modal-container {
        max-height: 95vh;
        /* Un poco más de altura disponible */
        border-radius: 10px;
        /* Bordes menos pronunciados en móvil */
    }

    /* Header: Reducimos el padding y ajustamos el título */
    .modal-header {
        padding: 15px 20px;
    }

    .modal-header h3 {
        font-size: 0.9rem;
        letter-spacing: 1px;
    }

    .close-btn {
        width: 30px;
        height: 30px;
    }

    .close-btn i {
        font-size: 20px;
    }

    /* Cuerpo: Reducimos padding y tipografía */
    .modal-body {
        padding: 20px;
        font-size: 0.85rem;
    }

    .modal-body h4 {
        font-size: 0.95rem;
        margin-top: 15px;
    }

    .modal-body h5 {
        font-size: 0.8rem;
    }

    /* Footer: Botón de ancho completo para facilitar el cierre */
    .modal-footer-btn {
        padding: 15px 20px;
        text-align: center;
    }

    .btn-primary-modal {
        width: 100%;
        padding: 15px;
        font-size: 0.85rem;
    }
}

/* Tablets (768px en adelante) */
@media screen and (min-width: 768px) {
    .modal-overlay {
        padding: 20px;
    }

    .modal-container {
        max-height: 90vh;
        max-width: 650px;
        /* Recuperamos el ancho máximo */
    }

    .modal-header {
        padding: 25px 30px;
    }

    .modal-header h3 {
        font-size: 1.1rem;
    }

    .modal-body {
        padding: 30px;
        font-size: 0.95rem;
    }

    .btn-primary-modal {
        width: auto;
        /* El botón vuelve a su tamaño normal */
        padding: 12px 30px;
    }

    .modal-footer-btn {
        text-align: right;
    }
}