html, body {
    //font-family: Lato, sans-serif !important;
    //background-color: #ffffff;
    //background: linear-gradient(to bottom, white, black);
    color: #5c5757;
    margin: 0;
    //font-family: "Bebas Neue", sans-serif;
    font-family: "Oswald", sans-serif;
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.site-content {
    flex-grow: 1;
    flex-shrink: 0;
  
}

.main-content {
    flex-grow: 1; /* Permite que este div ocupe todo el espacio disponible */
    flex-shrink: 0; /* Asegura que no se encoja */
    padding: 20px; /* Ya lo tienes, es un buen padding general */
    box-sizing: border-box;

    /* --- Añade o modifica estas propiedades para centrar el contenido --- */
    display: flex;             /* Convierte este contenedor en un flex container */
    flex-direction: column;    /* Asegura que los elementos hijos se apilen verticalmente */
    justify-content: center;   /* Centra los ítems hijos verticalmente (en la columna) */
    align-items: center;       /* Centra los ítems hijos horizontalmente (en la columna) */
    text-align: center;        /* Centra el texto dentro de los elementos hijos (si no lo hace solo) */
    
    /* Asegúrate de que no haya un padding-bottom residual que no quieras */
    padding-bottom: 0; /* Si esto era lo que te causaba el espacio extra */
}

header, footer {
    flex-shrink: 0;
}

.datos-reserva {
    background-color: #00bfba; /* Tu color de fondo */
    color: #ffffff;
    padding: 15px 20px; /* Padding interno */
    display: flex; /* Habilitamos Flexbox */
    justify-content: center; /* Distribuye el espacio entre los hijos directos (info-reserva y editar-reserva) */
    align-items: center; /* Centra verticalmente los hijos */
    position: sticky; /* Si quieres que se pegue al top */
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    flex-wrap: wrap; /* Permitir que los elementos se envuelvan en pantallas pequeñas */
    gap: 25px; /* Espacio entre los elementos flexibles (info-reserva y editar-reserva) */
}
.datos-reserva .info-reserva {
    display: flex; /* Habilitamos Flexbox para los párrafos de info */
    flex-direction: row; /* Por defecto, en fila */
    gap: 20px; /* Espacio entre los párrafos */
    //flex-grow: 1; /* Permite que este div ocupe el espacio disponible */
    flex-wrap: wrap; /* Importante: permite que los párrafos se envuelvan si no hay espacio */
    align-items: center; /* Centra los párrafos verticalmente */
}
.datos-reserva .info-reserva p {
    margin: 0; /* Eliminar márgenes por defecto de los párrafos */
    color: #5c5757; /* Asegúrate de que el texto sea blanco */
    white-space: nowrap; /* Evita que el texto de la fecha se rompa en varias líneas en pantallas medianas */
}
.datos-reserva .info-reserva p strong {
    color: #ffffff; /* Ligeramente más claro para las etiquetas, como el ejemplo */
    margin-right: 5px; /* Pequeño espacio entre etiqueta y valor */
}
.datos-reserva .editar-reserva {
    flex-shrink: 0; /* Evita que el SVG se encoja */
    /* margin-left: 20px;  Esto ya lo controlará el 'gap' del padre */
}
.datos-reserva .editar-reserva svg {
    /*display: block; /* Asegura que el SVG se comporte como un bloque */
    fill: none; /* Asegura que no tenga relleno si se hereda */
    stroke: #ffffff; /* Color del borde (blanco) */
}

.politica-privacidad h2 {
    text-align: left; /* Por ejemplo, quieres que estén alineados a la izquierda */
    color: #4A4A4A;   /* Un color de texto diferente */
    margin-top: 30px; /* Un margen superior diferente para estos títulos */
    font-size: 1.8em; /* Un tamaño de fuente diferente */
    /* ... cualquier otra propiedad CSS que quieras cambiar solo aquí ... */
}

.content-layout-two-columns {
    display: grid;
    /* Define las columnas para el h3 y luego para la lista y el mapa */
    grid-template-columns: 1fr 1fr; /* Por defecto, dos columnas de igual ancho para la lista y el mapa */
    grid-template-rows: auto; /* Las filas se ajustan al contenido */
    gap: var(--spacing-lg); /* Espacio entre los elementos de la cuadrícula */
    margin-top: var(--spacing-lg); /* Margen para separarlo del texto superior */
    margin-bottom: var(--spacing-lg); /* Margen para separarlo del texto inferior */
}

.content-layout-two-columns h3 {
    grid-column: 1 / -1; /* Hace que el h3 ocupe todas las columnas disponibles (desde la primera hasta la última) */
    text-align: left; /* Alinea el h3 a la izquierda */
    margin-bottom: var(--spacing-md); /* Espacio debajo del h3 */
    font-size: 1.8em; /* Asegúrate de que el tamaño sea el que deseas */
    color: var(--text-color); /* O el color que desees para este h3 */
}

.content-layout-two-columns .ventajas-list-simple {
    /* grid-column: 1 / 2; Esto es implícito si no hay más elementos antes */
    /* Quita flex: 2; y min-width si los tenías de la configuración Flexbox */
    /* width: 100%; para asegurar que ocupe su columna en grid */
    min-width: 250px; /* Asegura que la lista no sea demasiado estrecha */
}

.content-layout-two-columns .side-content-block {
    /* grid-column: 2 / 3; Esto es implícito si va después de la lista */
    /* Quita flex: 1; y min-width si los tenías de la configuración Flexbox */
    /* width: 100%; para asegurar que ocupe su columna en grid */
    min-width: 250px; /* Asegura que el div lateral no sea demasiado estrecho */
    background-color: var(--background-color-white);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
}

/* Estilos para los elementos dentro del div lateral */
.side-content-block h4 {
    font-size: 1.4em;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.side-content-block p {
    font-size: 0.95em;
    color: var(--secondary-color);
    margin-bottom: var(--spacing-md);
}

.principal_text {
    //max-width: 1200px; /* Limita el ancho máximo del contenido */
    //margin: 0 auto;    /* Centra el contenido horizontalmente */
    padding: 20px 100px;
    background-color: var(--background-color-light); /* Fondo para la zona de contenido principal */

    /* Otros estilos que podrías añadir: */
    /* box-shadow: var(--shadow-light); */
    /* border-radius: var(--border-radius); */
}

#quienes-somos p:last-of-type {
    margin-bottom: 0; /* Elimina margen inferior del último párrafo */
}


.ventajas-list {
    display: grid; /* Usa CSS Grid para un diseño responsivo */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Columnas automáticas */
    gap: 10px; /* Espacio entre los elementos de la cuadrícula */
    margin-top: 50px;
    margin-bottom: 50px;
}

.ventajas-list li {
    background-color: #00bfba;
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    border-left: 5px solid var(--primary-color); /* Un detalle de color */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    padding: 20px;
    color: #ffffff
}

.ventajas-list li:hover {
    transform: translateY(-5px); /* Pequeño efecto al pasar el ratón */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.ventajas-list li p {
    font-size: 0.95em;
    color: var(--secondary-color);
    margin-bottom: 0; /* Elimina margen inferior del último párrafo en la lista */
}

/* --- Estilos para la frase final de ventajas --- */
#ventajas-scooter-electrico > p:last-of-type {
    text-align: center;
    font-weight: bold;
    font-size: 2em;
    margin-top: 30px;
    Margin-bottom: 30px;
    color: var(--primary-color);
}

.titulo {
    margin-top: 40px;
}

h2 {
    margin-bottom: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.faq-section {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        
.faq-grid {
            display: flex;
            flex-wrap: wrap; /* Permite que las columnas se envuelvan en pantallas pequeñas */
            gap: 40px; /* Espacio entre las columnas y filas */
        }

        .faq-item {
            flex: 1; /* Permite que los elementos se expandan */
            min-width: 45%; /* Ancho mínimo para que quepan dos columnas, ajusta si es necesario */
            box-sizing: border-box; /* Incluye padding y borde en el ancho */
            margin-bottom: 20px; /* Espacio entre filas de preguntas */
        }

        .faq-item p {
            font-size: 1em;
            color: #555; /* Un tono ligeramente más claro para la respuesta */
        }
        
        .principal_text_contacto {
    display: flex;
    padding: 40px;
    
}

.contacto-left {
    flex: 1;
  padding: 20px;
  background: #00bfba;
  color: #fff;
  font-size: 20px;
  display: grid;
    
}

.contacto-right {
    flex: 1;
  padding: 20px;
  border: 30px solid #00bfba;
    
}
 .contacto-left h2{
    margin-bottom: 20px;
    margin-bottom: 20px;
    text-align: left;
    font-size: 40px;
}

 .contacto-right h2{
    margin-bottom: 20px;
    margin-bottom: 20px;
    text-align: left;
    font-size: 40px;
}

.sub-contact-form {
    display: flex;
    gap: 20px; /* Space between the contact-form groups within a sub-contact-form */
    margin-bottom: 15px; /* Space between rows of form fields */
    width: 100%; /* Ensure it takes full width of its parent */
    flex-wrap: wrap;
}
.contact-form {
    display: flex;
    flex-direction: column; /* Stack label and input vertically */
    flex: 1; /* Allow items to grow and shrink */
    min-width: 200px;
}

.contact-form label {
    font-size: 16px; /* Adjust font size as needed */
    color: #555; /* Slightly darker color for labels */
    margin-bottom: 5px; /* Space between label and input */
   
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="date"],
.contact-form input[type="time"],
.contact-form select,
.contact-form textarea {
    width: 100%; /* Make them take the full width of their parent .contact-form */
    padding: 10px; /* Add padding inside the fields */
    border: 1px solid #ccc; /* Light grey border */
    border-radius: 4px; /* Slightly rounded corners */
    font-size: 16px; /* Consistent font size */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    /* Add a slight box-shadow for a subtle depth effect, similar to the image */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
}

.contacto-right button[type="submit"] {
    display: block; /* Make the button take full width if desired or use inline-block to fit content */
    width: 100%; /* Example: make button full width */
    padding: 15px 20px;
    background-color: #00bfba; /* Dark red background */
    color: #fff; /* White text */
    border: none;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
    margin-top: 20px; /* Space above the button */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

.contacto-right button[type="submit"]:hover {
    background-color: #009e9a; /* Slightly darker red on hover */
}

.text-contact-left {
    
}
.text-contact-left1 {
    
}

.faq-link {
  color: #fff; /* O el color que desees */
  
}

@media (max-width: 767px) {
    
    
    
h2 {
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;
}
    
    .titulo {
        margin-top: 0px;
        padding-bottom: 10px;
        padding-top: 10px;
    }
    
    .datos-reserva {
        display: flex;
        flex-direction: row; /* Apila los elementos principales (info y editar) */
        justify-content: space-between;
        align-items: flex-start; /* Alinea los elementos a la izquierda */
        padding: 10px 15px; /* Reduce el padding en móviles */
        gap: 10px; /* Espacio entre la info y el SVG */
    }
    .datos-reserva .info-reserva {
        flex: 1; /* Allow info-reserva to take up available space */
        display: flex; /* <--- Make info-reserva a flex container as well */
        flex-direction: column; /* Apila los párrafos de información */
        gap: 5px; /* Menos espacio entre los párrafos apilados */
        width: 100%; /* Ocupa todo el ancho */
        align-items: flex-start; /* Alinea el texto a la izquierda */
    }
    .datos-reserva .info-reserva p {
        white-space: normal; /* Permitir que el texto de la fecha se rompa si es necesario */
        font-size: 0.9em; /* Reduce el tamaño de fuente para que quepa mejor */
    }
    .datos-reserva .editar-reserva {
        width: 100%; /* Ocupa todo el ancho */
        text-align: right; /* Mueve el SVG a la derecha */
        margin-left: 0; /* Elimina el margen izquierdo si está a la derecha */
        padding-top: 5px; /* Pequeño espacio si hay línea divisoria */
    }
    .datos-reserva .editar-reserva svg {
        width: 20px; /* Tamaño del SVG un poco más pequeño en móviles */
        height: 20px;
    }
    .content-layout-two-columns {
        grid-template-columns: 1fr; /* Una sola columna en pantallas pequeñas */
    }

    .content-layout-two-columns h3 {
        text-align: center; /* Centra el título en móvil si lo deseas */
    }

    .content-layout-two-columns .ventajas-list-simple,
    .content-layout-two-columns .side-content-block {
        width: 100%; /* Ocupa todo el ancho disponible */
        max-width: 500px; /* Limita el ancho en pantallas pequeñas si no quieres que se extienda demasiado */
        margin-left: auto; /* Centrar en móvil */
        margin-right: auto; /* Centrar en móvil */
    }
    .principal_text {
        padding: 20px 30px; /* Reduce el padding lateral a 30px */
    }
    .ventajas-list {
        grid-template-columns: 1fr; /* Una sola columna para las cajas */
        /* Eliminamos el padding o margen que pueda estar empujándolas a la izquierda/derecha */
        padding-left: 0; /* Aseguramos que ocupe todo el ancho disponible de su padre */
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        /* Para centrar los elementos de la cuadrícula, aunque 'margin: auto' en li es más fuerte */
        align-items: center;
        justify-content: center;
    }

    .ventajas-list li {
        /* ESTO ES CLAVE para el "no-padding" lateral y el centrado */
        max-width: 350px; /* Limita el ancho de la caja en móvil */
        margin: 0 auto 20px auto; /* Centra horizontalmente y añade margen inferior entre cajas */
        /* Asegúrate de que el padding interno (25px en este caso) se mantenga, si lo quieres */
    }

    .ventajas-list-simple {
        grid-template-columns: 1fr; /* Una sola columna para las cajas */
        /* Eliminamos el padding o margen que pueda estar empujándolas a la izquierda/derecha */
        padding-left: 0; /* Aseguramos que ocupe todo el ancho disponible de su padre */
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        /* Para centrar los elementos de la cuadrícula, aunque 'margin: auto' en li es más fuerte */
        align-items: center;
        justify-content: center;
    }

    .ventajas-list-simple li {
        /* ESTO ES CLAVE para el "no-padding" lateral y el centrado */
        max-width: 350px; /* Limita el ancho de la caja en móvil */
        margin: 0 auto 20px auto; /* Centra horizontalmente y añade margen inferior entre cajas */
        /* Asegúrate de que el padding interno (25px en este caso) se mantenga, si lo quieres */
    }
     .side-content-block {
        /* Clave para centrar el bloque y darle "padding" visual */
        max-width: 350px; /* Limita el ancho del bloque del mapa (ajusta este valor) */
        margin: 0 auto;    /* Centra el bloque horizontalmente */
        margin-top: var(--spacing-md); /* Agrega un poco de margen superior si se apila debajo de la lista */
        /* Asegúrate de que tenga su padding interno si lo deseas */
        padding: var(--spacing-md); /* Por ejemplo, 20px de padding interno */
        background-color: var(--background-color-white);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-light);
    }

    /* Estilos para el IFRAME del mapa dentro del bloque lateral */
    .side-content-block iframe {
        width: 100%; /* El iframe ocupa el 100% del ancho de su padre (.side-content-block) */
        height: 200px; /* Puedes ajustar la altura del mapa en móvil para que no sea demasiado largo */
        /* Otras propiedades del iframe (border, allowfullscreen, loading, referrerpolicy) se mantienen del HTML */
    }
    .faq-grid {
                flex-direction: column; /* Apila las columnas en pantallas más pequeñas */
            }
            .faq-item {
                min-width: 100%; /* Ocupa todo el ancho en pantallas pequeñas */
                margin-right: 0;
            }

    .principal_text_contacto {
  display: block;
  padding: 20px;
}

.contacto-right {
  flex: 1;
  padding: 20px;
  border: 0px solid #5c5757;
}

}


.paso-titulo {
  color: #5c5757;
}
.paso-subtitulo {
  color: #00bfba;
}
.body-main {
  background-color: #FAFAFA;  
}

.precio-boton {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    //gap: 0.5rem;
    padding-top: 20px;
}
.precio {
    margin: 0 0 4px 0; /* margen inferior de 4px */
    text-align: right;
}
.importe {
  font-size: 24px; /* o el tamaño que prefieras */
}
select,
input[type="date"],
button {
    width: 100%;
    padding: 5px;
    border-radius: 4px;
    //border: 1px solid #ccc;
    color: #5c5757;
}
button {
    background-color: #555;
    color: white;
    //font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    display: block;
    //margin: 10px auto 0 auto;
}
.boton-detalles {
  background-color: #00bfba;
  color: white;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  display: block;
  padding: 20px;
  margin-top: 15px;
  text-decoration: none; /* elimina subrayado */
  text-align: center;
  border: none;
  //border-radius: 6px; /* opcional */
}
.boton-detalles:hover {
  background-color: #009e9a; /* un tono más oscuro del original */
}
.boton-normal {
  background-color: #00bfba;
  color: white;
  font-weight: bold;
  font-size: 25px;
  cursor: pointer;
  display: block;
  padding: 20px;
  margin-top: 15px;
  text-decoration: none; /* elimina subrayado */
  text-align: center;
  border: none;
  margin: 30px auto 0 auto;
  font-family: "Bebas Neue", sans-serif !important;
  //border-radius: 6px; /* opcional */
}
.boton-normal:hover {
  background-color: #009e9a; /* un tono más oscuro del original */
}
.boton-search {
  background-color: #00bfba;
  color: white;
  font-weight: bold;
  font-size: 25px;
  cursor: pointer;
  display: block;
  padding: 20px;
  margin-top: 15px;
  text-decoration: none; /* elimina subrayado */
  text-align: center;
  border: none;
  margin: 30px auto 0 auto;
  font-family: "Bebas Neue", sans-serif !important;
  border: 2px solid #ffffff;
  //border-radius: 6px; /* opcional */
}
.boton-search:hover {
  background-color: #009e9a; /* un tono más oscuro del original */
}
button:hover {
    background-color: ##555;
}
.error-msg {
    color: red;
    text-align: center;
    margin-bottom: 15px;
}

/* CSS para la lupa */
        .magnifier-glass {
            position: absolute;
            border: 3px solid #00bfba; /* Color del borde de la lupa */
            border-radius: 50%; /* Forma circular */
            cursor: none; /* Oculta el cursor normal al pasar sobre la lupa */
            width: 200px; /* Tamaño de la lupa */
            height: 200px; /* Tamaño de la lupa */
            visibility: hidden; /* Oculta por defecto */
            background-repeat: no-repeat;
            pointer-events: none; /* Permite que el ratón interactúe con el elemento debajo */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Sombra para el efecto */
        }

        /* Asegurarse de que el contenedor de la imagen principal sea relativo */
        .aspect-ratio-box-main {
            position: relative; /* CRÍTICO: Asegura que la lupa se posicione correctamente */
            overflow: hidden; /* Opcional: Recorta si la imagen es más grande que el contenedor */
        }