@import url('https://fonts.googleapis.com/css2?family=Exo:wght@300;400&display=swap');

body {
    font-family: 'Exo', sans-serif;
    margin: 0;
    padding: 0;
    color: white;
    background-color: black;
    text-align: center;
}

header {
    background-color: black;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* Permite que los elementos se ajusten en pantallas pequeñas */
}

header .logo img {
    max-width: 150px;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
}

nav ul li {
    display: inline;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

/* Banner como fondo sin texto */
.hero {
    background: url('images/banner.jpg') no-repeat center center/cover;
    width: 100%;
    height: 55vh;
    /* Ajusta la altura del banner */
    position: relative;
    /* Para posicionar el contenido dentro */
}

.hero-content {
    display: flex;
    align-items: left;
    justify-content: center;
    height: 100%;
    /* Asegura que ocupe toda la altura del banner */
    position: absolute;
    /* Permite que el contenido se superponga */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: white;
    /* Color del texto */
    text-align: left;
    /* Centra el texto */
    padding: 20px;
    /* Espaciado interno */
}

.hero-text h1 {
    font-size: 2.5em;
    /* Tamaño de fuente para el encabezado */
    margin: 0;
    /* Elimina el margen */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    /* Sombra para mejorar la legibilidad */
}

.hero-image {
    display: none;
    /* Oculta la imagen en el banner */
}

/* Responsividad para el texto del banner */
@media (max-width: 768px) {
    .hero-text h1 {
        font-size: 1.8em;
        /* Reduce el tamaño de la fuente en pantallas pequeñas */
    }
}

/* SECCIÓN NOSOTROS */
.about-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
    flex-wrap: wrap;
    /* Permite que los elementos se ajusten en pantallas pequeñas */
}

.about-text {
    flex: 1;
    padding-right: 40px;
    text-align: left;
}

.about-image img {
    width: 100%;
    border-radius: 10px;
    height: auto;
    /* Cambiado a auto para mantener la proporción */
}

.about-image {
    flex: 1;
    text-align: right;
}

.container {
    width: 80%;
    margin: auto;
}

section {
    padding: 50px 0;
    border-bottom: 1px solid white;
}

.services,
.about,
.contact {
    text-align: center;
}

.services h3,
.about h2,
.contact h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

.service-item {
    margin-bottom: 40px;
}

.service-item h4 {
    font-size: 1.4em;
    margin-bottom: 10px;
}

.service-item p {
    font-size: 1.2em;
}

/* SECCIÓN SERVICIOS: Imagen a la izquierda y texto a la derecha */
.services-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 10px;
    gap: 40px;
    flex-wrap: wrap;
    /* Permite que los elementos se ajusten en pantallas pequeñas */
}

/* Imagen a la izquierda */
.services-image {
    flex: 1;
    text-align: left;
}

.services-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 10px;
}

/* Texto a la derecha */
.services-text {
    flex: 1;
    text-align: left;
}

.services-text h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    text-align: left;
}

.service-item {
    margin-bottom: 20px;
}

.service-item h3 {
    font-size: 1.4em;
    margin-bottom: 10px;
}

.service-item p {
    font-size: 1.2em;
    color: #ccc;
}

.start-button {

    background-color: white;
    /* Color de fondo del botón */

    color: black;
    /* Color del texto del botón */

    padding: 10px 20px;
    /* Espaciado interno */

    border: none;
    /* Sin borde */

    border-radius: 5px;
    /* Bordes redondeados */

    cursor: pointer;
    /* Cambia el cursor al pasar sobre el botón */

    font-size: 1.2em;
    /* Tamaño de fuente */

    margin-top: 20px;
    /* Espacio superior */

    transition: background-color 0.3s, color 0.3s;
    /* Transición suave para el hover */

}


/* Efecto hover para el botón */

.start-button:hover {

    background-color: #ccc;
    /* Color de fondo al pasar el mouse */

    color: black;
    /* Color del texto al pasar el mouse */

}


/* Responsividad para el botón */

@media (max-width: 768px) {

    .start-button {

        font-size: 1em;
        /* Reduce el tamaño de la fuente en pantallas pequeñas */

        padding: 8px 16px;
        /* Ajusta el espaciado interno */

    }

}

/* RESPONSIVE: En móviles, la imagen y el texto estarán en columna */
@media (max-width: 768px) {
    .services-container {
        flex-direction: column;
        text-align: center;
    }

    .services-image {
        text-align: center;
    }

    .services-image img {
        max-width: 100%;
    }

    .services-text {
        text-align: center;
    }

    .about-content {
        flex-direction: column;
        /* Cambia a columna en pantallas pequeñas */
        padding: 20px;
        /* Reduce el padding */
    }

    .about-text {
        padding-right: 0;
        /* Elimina el padding derecho */
        padding-bottom: 20px;
        /* Agrega un padding inferior */
    }

    .about-image {
        text-align: center;
        /* Centra la imagen */
    }

    .about-image img {
        height: auto;
        /* Mantiene la proporción de la imagen */
    }

    .services-text h2 {
        font-size: 2em;
        /* Reduce el tamaño de la fuente */
    }

    .services h3,
    .about h2,
    .contact h2 {
        font-size: 2em;
        /* Reduce el tamaño de la fuente */
    }

    .service-item h3 {
        font-size: 1.2em;
        /* Reduce el tamaño de la fuente */
    }

    .service-item p {
        font-size: 1em;
        /* Reduce el tamaño de la fuente */
    }
}

.contact form {
    max-width: 600px;

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

.contact label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.contact input,
.contact textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.contact button {
    background-color: white;
    color: black;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.vendido {
    background-color: green;
    color: white;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 5px;
}


/* Responsividad para pantallas más pequeñas */
@media (max-width: 480px) {
    header {
        flex-direction: column;
        /* Cambia a columna en pantallas muy pequeñas */
        align-items: flex-start;
        /* Alinea los elementos al inicio */
    }

    nav ul {
        flex-direction: column;
        /* Cambia la dirección de la lista de navegación */
        gap: 10px;
        /* Reduce el espacio entre los elementos */
    }

    .services h3,
    .about h2,
    .contact h2 {
        font-size: 1.8em;
        /* Reduce el tamaño de la fuente */
    }

    .service-item h3 {
        font-size: 1.1em;
        /* Reduce el tamaño de la fuente */
    }

    .service-item p {
        font-size: 0.9em;
        /* Reduce el tamaño de la fuente */
    }

    .about-content {
        padding: 20px;
        /* Reduce el padding */
    }

    .about-text {
        padding-right: 0;
        /* Elimina el padding derecho */
        padding-bottom: 20px;
        /* Agrega un padding inferior */
    }

    .about-image img {
        height: auto;
        /* Mantiene la proporción de la imagen */
    }

    .contact form {
        max-width: 60%;
        /* Agrega un poco de padding */
    }
}

.pespaña {
    color: red;
   
}
.pahorrdo {
    color: #00ff00;
    
}


footer {
    background-color: black;
    /* Color de fondo del footer */
    color: white;
    /* Color del texto del footer */
    text-align: center;
    /* Centra el texto */
    padding: 20px;
    /* Espaciado interno */
}

.catalogo {
    padding: 50px 20px;
    background-color: black;
    color: white;
}

.catalogo-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    /* Espacio entre las tarjetas */
}

.coche-card {
    background-color: #222;
    /* Fondo de la tarjeta */
    border-radius: 10px;
    /* Bordes redondeados */
    padding: 20px;
    text-align: center;
    width: 250px;
    /* Ancho de la tarjeta */
    transition: transform 0.3s;
    /* Transición para el efecto hover */
}

.coche-card img {
    width: 100%;
    /* Imagen ocupa todo el ancho de la tarjeta */
    border-radius: 10px;
    /* Bordes redondeados para la imagen */
}

.coche-card h3 {
    margin: 10px 0;
    /* Espacio superior e inferior */
}

.coche-card button {
    background-color: white;
    /* Color de fondo del botón */
    color: black;
    /* Color del texto del botón */
    padding: 10px 15px;
    /* Espaciado interno */
    border: none;
    /* Sin borde */
    border-radius: 5px;
    /* Bordes redondeados */
    cursor: pointer;
    /* Cambia el cursor al pasar sobre el botón */
    transition: background-color 0.3s;
    /* Transición suave para el hover */
}

/* Efecto hover para la tarjeta */
.coche-card:hover {
    transform: scale(1.05);
    /* Aumenta el tamaño de la tarjeta al pasar el mouse */
}

/* Efecto hover para el botón */
.coche-card button:hover {
    background-color: #ccc;
    /* Color de fondo al pasar el mouse */
}