/* Estilos generales */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
}

body {
    background-color: #1e1e2f; /* Fondo oscuro con tono azulado */
    color: #ffffff; /* Texto blanco para contraste */
}

/* Fondo animado con burbujas grandes */
.background {
    width: 100vw;
    height: 100vh;
    background: #2b07079c;
    position: fixed; /* Fondo fijo para que no se desplace con la página */
    top: 0;
    left: 0;
    z-index: -1; /* Coloca el fondo detrás de todo */
    overflow: hidden;
  }
  
  .background span {
    --particleSize: 20vmin;
    --animationDuration: 6s;
    width: var(--particleSize);
    height: var(--particleSize);
    border-radius: var(--particleSize);
    backface-visibility: hidden;
    position: absolute;
    animation-name: move;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
 /* Estilos base para móviles - Manteniendo tus valores exactos pero responsive */
.modal-contenido {
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 90%;
    margin: 2rem auto;
    padding: 1.5rem;
    box-sizing: border-box;
}

/* Barra de scroll (manteniendo tu estilo) */
.modal-contenido::-webkit-scrollbar {
    width: 6px;
}
.modal-contenido::-webkit-scrollbar-thumb {
    background-color: #3498db;
    border-radius: 3px;
}

/* Manteniendo exactamente tus estilos pero con unidades relativas */
.seccion-datos {
    margin-bottom: 1.25rem; /* ~20px */
    padding: 0.9375rem; /* ~15px */
    background: #f8f9fa;
    border-radius: 0.5rem; /* ~8px */
    border-left: 0.25rem solid #3498db; /* ~4px */
}

.seccion-datos h3 {
    margin-top: 0;
    margin-bottom: 0.9375rem; /* ~15px */
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 0.625rem; /* ~10px */
    font-size: 1.1rem;
}

.seccion-datos h3 i {
    color: #3498db;
    font-size: 1.2rem;
}

.datos-grid {
    display: grid;
    grid-template-columns: 1fr; /* Una columna en móviles */
    gap: 0.75rem; /* ~12px */
}

.datos-grid.full-width {
    grid-template-columns: 1fr; /* Una columna en móviles */
}

.dato-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0; /* ~8px */
    border-bottom: 1px dashed #e0e0e0;
}

.dato-label {
    font-weight: 600;
    color: #34495e;
    font-size: 0.9rem;
}

.dato-value {
    font-weight: 500;
    color: #e74c3c;
    font-size: 0.9rem;
    text-align: right;
}

.dato-value.clean {
    color: #27ae60;
}

.actualizacion {
    text-align: right;
    color: #7f8c8d;
    margin-top: 1.25rem; /* ~20px */
    font-size: 0.85em;
}

/* Ajustes para tablets pequeñas (≥400px) */
@media (min-width: 400px) {
    .datos-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas */
    }
    
    .datos-grid.full-width {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Ajustes para tablets grandes (≥600px) */
@media (min-width: 600px) {
    .modal-contenido {
        width: 85%;
        max-width: 600px;
    }
    
    .datos-grid.full-width {
        grid-template-columns: repeat(3, 1fr); /* Tres columnas */
    }
    
    .seccion-datos h3 {
        font-size: 1.2rem;
    }
    
    .dato-label, 
    .dato-value {
        font-size: 1rem;
    }
}

/* Ajustes para pantallas grandes (≥900px) */
@media (min-width: 900px) {
    .modal-contenido {
        padding: 2rem;
    }
}
  
  /* Definición de colores */
  .background span:nth-child(1) { color: #ff0000; }
  .background span:nth-child(2) { color: #ff0000; }
  .background span:nth-child(3) { color: #15fa00; }
  .background span:nth-child(4) { color: #583C87; }
  .background span:nth-child(5) { color: #15fa00; }
  .background span:nth-child(6) { color: #FFACAC; }
  .background span:nth-child(7) { color: #15fa00; }
  .background span:nth-child(8) { color: #E45A84; }
  .background span:nth-child(9) { color: #FFACAC; }
  .background span:nth-child(10) { color: #583C87; }
  .background span:nth-child(11) { color: #E45A84; }
  .background span:nth-child(12) { color: #FFACAC; }
  .background span:nth-child(13) { color: #583C87; }
  .background span:nth-child(14) { color: #E45A84; }
  .background span:nth-child(15) { color: #FFACAC; }
  .background span:nth-child(16) { color: #583C87; }
  .background span:nth-child(17) { color: #E45A84; }
  .background span:nth-child(18) { color: #FFACAC; }
  .background span:nth-child(19) { color: #583C87; }
  .background span:nth-child(20) { color: #E45A84; }
  .background span:nth-child(21) { color: #FFACAC; }
  .background span:nth-child(22) { color: #583C87; }
  .background span:nth-child(23) { color: #E45A84; }
  .background span:nth-child(24) { color: #FFACAC; }
  .background span:nth-child(25) { color: #583C87; }
  .background span:nth-child(26) { color: #E45A84; }
  .background span:nth-child(27) { color: #FFACAC; }
  .background span:nth-child(28) { color: #583C87; }
  .background span:nth-child(29) { color: #E45A84; }
  .background span:nth-child(30) { color: #FFACAC; }
  .background span:nth-child(31) { color: #583C87; }
  .background span:nth-child(32) { color: #E45A84; }
  .background span:nth-child(33) { color: #FFACAC; }
  .background span:nth-child(34) { color: #583C87; }
  .background span:nth-child(35) { color: #E45A84; }
  .background span:nth-child(36) { color: #FFACAC; }
  .background span:nth-child(37) { color: #583C87; }
  .background span:nth-child(38) { color: #E45A84; }
  
  .background span:nth-child(1) {
    top: 10%;
    left: 20%;
    animation-duration: 3s; /* Reducido de 6s a 3s */
    animation-delay: -4s; /* Ajustado para mantener la proporción */
    transform-origin: 15vw -10vh;
    box-shadow: 40vmin 0 10vmin #ff0000;
}
.background span:nth-child(2) {
    top: 50%;
    left: 80%;
    animation-duration: 7s; /* Reducido de 14s a 7s */
    animation-delay: -6s; /* Ajustado para mantener la proporción */
    transform-origin: -20vw 15vh;
    box-shadow: -40vmin 0 12vmin #ff0000;
}
.background span:nth-child(3) {
    top: 70%;
    left: 30%;
    animation-duration: 8s; /* Reducido de 16s a 8s */
    animation-delay: -5s; /* Ajustado para mantener la proporción */
    transform-origin: 10vw -25vh;
    box-shadow: 40vmin 0 15vmin #FFACAC;
}
.background span:nth-child(4) {
    top: 20%;
    left: 60%;
    animation-duration: 9s; /* Reducido de 18s a 9s */
    animation-delay: -7s; /* Ajustado para mantener la proporción */
    transform-origin: -15vw 20vh;
    box-shadow: -40vmin 0 8vmin #583C87;
}
.background span:nth-child(5) {
    top: 90%;
    left: 50%;
    animation-duration: 10s; /* Reducido de 20s a 10s */
    animation-delay: -8s; /* Ajustado para mantener la proporción */
    transform-origin: 25vw -15vh;
    box-shadow: 40vmin 0 14vmin #15fa00;
}
.background span:nth-child(6) {
    top: 40%;
    left: 10%;
    animation-duration: 11s; /* Reducido de 22s a 11s */
    animation-delay: -9s; /* Ajustado para mantener la proporción */
    transform-origin: -10vw 25vh;
    box-shadow: -40vmin 0 9vmin #15fa00;
}
.background span:nth-child(7) {
    top: 60%;
    left: 90%;
    animation-duration: 12s; /* Reducido de 24s a 12s */
    animation-delay: -10s; /* Ajustado para mantener la proporción */
    transform-origin: 20vw -20vh;
    box-shadow: 40vmin 0 11vmin #583C87;
}
.background span:nth-child(8) {
    top: 30%;
    left: 40%;
    animation-duration: 13s; /* Reducido de 26s a 13s */
    animation-delay: -11s; /* Ajustado para mantener la proporción */
    transform-origin: -25vw 10vh;
    box-shadow: -40vmin 0 13vmin #15fa00;
}
.background span:nth-child(9) {
    top: 80%;
    left: 70%;
    animation-duration: 14s; /* Reducido de 28s a 14s */
    animation-delay: -12s; /* Ajustado para mantener la proporción */
    transform-origin: 15vw -25vh;
    box-shadow: 40vmin 0 16vmin #FFACAC;
}
.background span:nth-child(10) {
    top: 10%;
    left: 90%;
    animation-duration: 15s; /* Reducido de 30s a 15s */
    animation-delay: -13s; /* Ajustado para mantener la proporción */
    transform-origin: -15vw 20vh;
    box-shadow: -40vmin 0 10vmin #583C87;
}
.background span:nth-child(11) {
    top: 50%;
    left: 20%;
    animation-duration: 16s; /* Reducido de 32s a 16s */
    animation-delay: -14s; /* Ajustado para mantener la proporción */
    transform-origin: 25vw -15vh;
    box-shadow: 40vmin 0 12vmin #E45A84;
}
.background span:nth-child(12) {
    top: 70%;
    left: 60%;
    animation-duration: 17s; /* Reducido de 34s a 17s */
    animation-delay: -15s; /* Ajustado para mantener la proporción */
    transform-origin: -10vw 25vh;
    box-shadow: -40vmin 0 14vmin #FFACAC;
}
.background span:nth-child(13) {
    top: 20%;
    left: 30%;
    animation-duration: 18s; /* Reducido de 36s a 18s */
    animation-delay: -16s; /* Ajustado para mantener la proporción */
    transform-origin: 15vw -20vh;
    box-shadow: 40vmin 0 9vmin #583C87;
}
.background span:nth-child(14) {
    top: 90%;
    left: 80%;
    animation-duration: 19s; /* Reducido de 38s a 19s */
    animation-delay: -17s; /* Ajustado para mantener la proporción */
    transform-origin: -25vw 10vh;
    box-shadow: -40vmin 0 11vmin #E45A84;
}
.background span:nth-child(15) {
    top: 40%;
    left: 50%;
    animation-duration: 20s; /* Reducido de 40s a 20s */
    animation-delay: -18s; /* Ajustado para mantener la proporción */
    transform-origin: 20vw -25vh;
    box-shadow: 40vmin 0 13vmin #FFACAC;
}
.background span:nth-child(16) {
    top: 60%;
    left: 10%;
    animation-duration: 21s; /* Reducido de 42s a 21s */
    animation-delay: -19s; /* Ajustado para mantener la proporción */
    transform-origin: -15vw 20vh;
    box-shadow: -40vmin 0 15vmin #15fa00;
}
.background span:nth-child(17) {
    top: 30%;
    left: 70%;
    animation-duration: 22s; /* Reducido de 44s a 22s */
    animation-delay: -20s; /* Ajustado para mantener la proporción */
    transform-origin: 25vw -15vh;
    box-shadow: 40vmin 0 10vmin #ff0000;
}
.background span:nth-child(18) {
    top: 80%;
    left: 40%;
    animation-duration: 23s; /* Reducido de 46s a 23s */
    animation-delay: -21s; /* Ajustado para mantener la proporción */
    transform-origin: -10vw 25vh;
    box-shadow: -40vmin 0 12vmin #FFACAC;
}
.background span:nth-child(19) {
    top: 10%;
    left: 60%;
    animation-duration: 24s; /* Reducido de 48s a 24s */
    animation-delay: -22s; /* Ajustado para mantener la proporción */
    transform-origin: 15vw -20vh;
    box-shadow: 40vmin 0 14vmin #583C87;
}
.background span:nth-child(20) {
    top: 50%;
    left: 90%;
    animation-duration: 25s; /* Reducido de 50s a 25s */
    animation-delay: -23s; /* Ajustado para mantener la proporción */
    transform-origin: -25vw 10vh;
    box-shadow: -40vmin 0 16vmin #E45A84;
}
  .background span:nth-child(21) {
    top: 80%;
    left: 40%;
    animation-duration: 46s;
    animation-delay: -42s;
    transform-origin: -10vw 25vh;
    box-shadow: -40vmin 0 12vmin #FFACAC;
  }
  .background span:nth-child(22) {
    top: 10%;
    left: 60%;
    animation-duration: 48s;
    animation-delay: -44s;
    transform-origin: 15vw -20vh;
    box-shadow: 40vmin 0 14vmin #583C87;
  }
  .background span:nth-child(23) {
    top: 50%;
    left: 90%;
    animation-duration: 50s;
    animation-delay: -46s;
    transform-origin: -25vw 10vh;
    box-shadow: -40vmin 0 16vmin #E45A84;
  }
  .background span:nth-child(24) {
    top: 80%;
    left: 40%;
    animation-duration: 46s;
    animation-delay: -42s;
    transform-origin: -10vw 25vh;
    box-shadow: -40vmin 0 12vmin #FFACAC;
  }
  .background span:nth-child(25) {
    top: 10%;
    left: 60%;
    animation-duration: 48s;
    animation-delay: -44s;
    transform-origin: 15vw -20vh;
    box-shadow: 40vmin 0 14vmin #583C87;
  }
  .background span:nth-child(26) {
    top: 50%;
    left: 90%;
    animation-duration: 50s;
    animation-delay: -46s;
    transform-origin: -25vw 10vh;
    box-shadow: -40vmin 0 16vmin #E45A84;
  }
  .background span:nth-child(27) {
    top: 80%;
    left: 40%;
    animation-duration: 46s;
    animation-delay: -42s;
    transform-origin: -10vw 25vh;
    box-shadow: -40vmin 0 12vmin #FFACAC;
  }
  .background span:nth-child(28) {
    top: 10%;
    left: 60%;
    animation-duration: 48s;
    animation-delay: -44s;
    transform-origin: 15vw -20vh;
    box-shadow: 40vmin 0 14vmin #583C87;
  }
  .background span:nth-child(29) {
    top: 50%;
    left: 90%;
    animation-duration: 50s;
    animation-delay: -46s;
    transform-origin: -25vw 10vh;
    box-shadow: -40vmin 0 16vmin #E45A84;
  }
  .background span:nth-child(30) {
    top: 80%;
    left: 40%;
    animation-duration: 46s;
    animation-delay: -42s;
    transform-origin: -10vw 25vh;
    box-shadow: -40vmin 0 12vmin #FFACAC;
  }
  .background span:nth-child(31) {
    top: 10%;
    left: 60%;
    animation-duration: 48s;
    animation-delay: -44s;
    transform-origin: 15vw -20vh;
    box-shadow: 40vmin 0 14vmin #583C87;
  }
  .background span:nth-child(32) {
    top: 50%;
    left: 90%;
    animation-duration: 50s;
    animation-delay: -46s;
    transform-origin: -25vw 10vh;
    box-shadow: -40vmin 0 16vmin #E45A84;
  }
  .background span:nth-child(33) {
    top: 80%;
    left: 40%;
    animation-duration: 46s;
    animation-delay: -42s;
    transform-origin: -10vw 25vh;
    box-shadow: -40vmin 0 12vmin #FFACAC;
  }
  .background span:nth-child(34) {
    top: 10%;
    left: 60%;
    animation-duration: 48s;
    animation-delay: -44s;
    transform-origin: 15vw -20vh;
    box-shadow: 40vmin 0 14vmin #583C87;
  }
  .background span:nth-child(35) {
    top: 50%;
    left: 90%;
    animation-duration: 50s;
    animation-delay: -46s;
    transform-origin: -25vw 10vh;
    box-shadow: -40vmin 0 16vmin #E45A84;
  }
  .background span:nth-child(36) {
    top: 80%;
    left: 40%;
    animation-duration: 46s;
    animation-delay: -42s;
    transform-origin: -10vw 25vh;
    box-shadow: -40vmin 0 12vmin #FFACAC;
  }
  .background span:nth-child(37) {
    top: 10%;
    left: 60%;
    animation-duration: 48s;
    animation-delay: -44s;
    transform-origin: 15vw -20vh;
    box-shadow: 40vmin 0 14vmin #583C87;
  }
  .background span:nth-child(38) {
    top: 50%;
    left: 90%;
    animation-duration: 50s;
    animation-delay: -46s;
    transform-origin: -25vw 10vh;
    box-shadow: -40vmin 0 16vmin #E45A84;
  }


  
  @keyframes move {
    100% {
      transform: translate3d(0, 0, 1px) rotate(360deg);
    }
  }

header, .container, .vehicle-info, .descripcion, .mapa, .contacto {
    background-color: #2a2a405d; /* Fondo oscuro con tono morado */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
    border-radius: 10px;
}

/* Barra superior con logo y menú */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #ff000000; /* Fondo oscuro con tono morado */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.007); /* Sombra más pronunciada */
}

header .logo img {
    height: 100px; /* Ajusta el tamaño del logo */
}

header .menu {
    display: flex;
    gap: 20px;
}

header .menu a {
    text-decoration: none;
    color: #ffffff; /* Texto blanco */
    font-weight: 500;
    transition: color 0.3s;
}

header .menu a:hover {
    color: #ff6b6b; /* Rojo coral al pasar el mouse */
}

/* Contenedor principal */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Estilo base para el fondo oscuro (overlay) */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro semitransparente */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    justify-content: center;
    align-items: center;
}

/* Estilo para el contenido del modal */
.modal-contenido {
    background-color: #2a2a40; /* Fondo oscuro con tono morado */
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra pronunciada */
    position: relative;
    color: #dbf372; /* Texto blanco */
    font-family: 'Arial', sans-serif; /* Fuente moderna */
    text-align: center; /* Centrar el texto */
}

/* Estilo para el botón de cerrar */
.cerrar {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #ff0000;
    cursor: pointer;
    transition: color 0.3s ease;
}

.cerrar:hover {
    color: #ff4757; /* Cambia el color al pasar el mouse */
}

/* Estilo para los títulos */
.modal-contenido h2 {
    margin-top: 0;
    font-size: 24px;
    color: #ffffff;
}

/* Estilo para los párrafos */
.modal-contenido p {
    margin: 10px 0;
    font-size: 16px;
    line-height: 1.5;
}

/* Animación para abrir el modal */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Aplicar animación al modal */
.modal-contenido {
    animation: fadeIn 0.3s ease-in-out;
}
.cerrar:hover {
    color: #ff6b6b; /* Rojo coral al pasar el mouse */
}

/* Información destacada arriba del carrusel */
.info-destacada {
    text-align: left;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 10px;
    color: #ffffff; /* Texto blanco */
}

.info-destacada h1 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #ff6b6b; /* Rojo coral para títulos */
}

.info-destacada .precio {
    font-size: 1.5rem;
    color: #4ecdc4; /* Turquesa para el precio */
    font-weight: 600;
    margin-bottom: 10px;
}

.info-destacada .detalles {
    display: flex;
    gap: 10px;
    font-size: 1rem;
}

/* Carrusel de imágenes */
.carrusel {
    position: relative;
    width: 100%;
    max-width: 800px; /* Ancho máximo del carrusel */
    margin: 0 auto 20px; /* Centrado y margen inferior */
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
}

.carrusel-img {
    width: 100%;
    height: 400px; /* Altura fija para el carrusel */
    object-fit: scale-down; /* Ajusta la imagen sin cortarla */
    display: none;
    background-color: #2a2a4065; /* Fondo oscuro con tono morado */
    border-radius: 10px;
}

.carrusel-img.active {
    display: block;
}

.carrusel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    color: #2a2a40; /* Texto oscuro */
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    font-size: 1.5rem;
    transition: background-color 0.3s;
}

.carrusel-btn:hover {
    background-color: rgba(255, 255, 255, 1);
    color: #ff6b6b; /* Rojo coral al pasar el mouse */
}

.carrusel-btn.prev {
    left: 10px;
}

.carrusel-btn.next {
    right: 10px;
}

/* Información del vehículo */
.vehicle-info {
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.vehicle-info h2 {
    font-size: 1.5rem;
    color: #ff6b6b; /* Rojo coral para títulos */
    margin-bottom: 15px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #3a3a5a; /* Fondo más oscuro */
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
}

.info-label {
    font-weight: 500;
    color: #4ecdc4; /* Turquesa para etiquetas */
}

.info-value {
    font-weight: 400;
    color: #ffffff; /* Texto blanco */
}

/* Descripción del vehículo */
.descripcion {
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.descripcion h2 {
    font-size: 1.5rem;
    color: #ff6b6b; /* Rojo coral para títulos */
    margin-bottom: 15px;
}

.descripcion p {
    font-size: 1rem;
    color: #ffffff; /* Texto blanco */
    line-height: 1.5;
}

/* Sección de video y contacto */
.video-contacto {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    margin-left: 0px; /* Mueve la sección un poco a la derecha */
}

.tiktok-video {
    flex: 1;
}

.tiktok-video h2 {
    font-size: 1.5rem;
    color: #ff6b6b; /* Rojo coral para títulos */
    margin-bottom: 15px;
}

.tiktok-video video {
    width: 100%;
    max-width: 900px; /* Tamaño reducido del video */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
}

.tiktok-video p {
    margin-top: 10px;
    font-size: 15px;
    color: #4ecdc4; /* Turquesa para texto secundario */
}

/* Mapa y contactos */
.mapa-contactos {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mapa {
    padding: 20px;
    border-radius: 10px;
}

.mapa h2 {
    font-size: 1.5rem;
    color: #ff6b6b; /* Rojo coral para títulos */
    margin-bottom: 15px;
}

.mapa iframe {
    width: 100%;
    height: 200px;
    border: 0;
    border-radius: 10px;
}

.mapa p {
    margin-top: 10px;
    font-size: 1rem;
    color: #ffffff; /* Texto blanco */
}

.contacto {
    padding: 20px;
    border-radius: 10px;
}

.contacto h2 {
    font-size: 1.5rem;
    color: #7cff6b; /* Rojo coral para títulos */
    margin-bottom: 15px;
}

.contacto-botones {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-contacto {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background-color: #607776; /* Turquesa para botones */
    color: #ffffff; /* Texto blanco */
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
    transition: background-color 0.3s;
}

.btn-contacto:hover {
    background-color: #a87c3a; /* Turquesa más oscuro al hover */
}




/* ================================================== */
/* Estilos específicos para dispositivos móviles */
/* ================================================== */

@media only screen and (max-width: 768px) {
    /* Ajustes para el header en móviles */
    header {
        flex-direction: column;
        padding: 10px;
    }

    header .logo img {
        height: 80px; /* Reducir el tamaño del logo en móviles */
    }

    header .menu {
        gap: 10px;
        align-items: center;
    }

    /* Ajustes para el carrusel en móviles */
    .carrusel {
        max-width: 100%; /* Ocupar todo el ancho en móviles */
    }

    .carrusel-img {
        height: 250px; /* Reducir la altura del carrusel en móviles */
    }

    /* Ajustes para la información destacada en móviles */
    .info-destacada h1 {
        font-size: 1.5rem; /* Reducir el tamaño del título */
    }

    .info-destacada .precio {
        font-size: 1.2rem; /* Reducir el tamaño del precio */
    }

    .info-destacada .detalles {
   /* Apilar detalles en móviles */
        gap: 5px;
    }

    /* Ajustes para la sección de video y contacto en móviles */
    .video-contacto {
        flex-direction: column; /* Apilar video y contacto en móviles */
        margin-left: 0;
    }

    .tiktok-video video {
        max-width: 100%; /* Ajustar el video al ancho de la pantalla */
    }

    /* Ajustes para el mapa en móviles */
    .mapa iframe {
        height: 150px; /* Reducir la altura del mapa en móviles */
    }

    /* Ajustes para los botones de contacto en móviles */
    .contacto-botones {
        flex-direction: column; /* Apilar botones en móviles */
    }

    .btn-contacto {
        justify-content: center; /* Centrar texto en botones */
    }

    /* Ajustes para el modal en móviles */
    .modal-contenido {
        width: 95%; /* Ocupar más ancho en móviles */
        padding: 15px;
    }

    /* Ajustes para la información del vehículo en móviles */
    .info-grid {
        grid-template-columns: 1fr; /* Una columna en móviles */
    }

    /* Ajustes para la descripción en móviles */
    .descripcion h2 {
        font-size: 1.2rem; /* Reducir el tamaño del título */
    }

    .descripcion p {
        font-size: 0.9rem; /* Reducir el tamaño del texto */
    }
    
}