*{
    box-sizing: border-box;
    margin: 0;
}
html{
    scroll-behavior: smooth;
}

body{
    font-family: 'Roboto','sans-serif';
    margin: 0;
}
  
  
h1{

    font-size: 3.5em;
}
h2{

    font-size: 2.7em;
}
h3{
    font-size: 2em;
}
p{
    margin-top: 10px;
    font-size: 1.25em;
   
}
.parrafo{
    text-align: justify;
    font-family:'Open Sans';
}


button{
    font-size: 1.5em;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 10px;
    border: 2px solid rgba(0,0,0,0.5);
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    color: white;
   /*
    background-color: rgb(154, 96, 167);*/
    background-color: blueviolet;
}

button:hover{
    /*background-color: rgb(99, 85, 164);*/
    background-color: rgb(101, 33, 165);
}

.container{
    max-width: 1400px;
    margin: auto;
}

header{
    background-color: rgb(245,245,245);
}

/*header .logo{
    margin: 0;
    padding: 25px 30px;
    font-weight: bold;
    color: violet;
    font-size:2em;
}*/

/* Contenedor del enlace para quitar subrayados, etc. */
.logo-link, .logo-link-footer {
    text-decoration: none;
    display: inline-block; /* Para controlar márgenes */
}

/* LA REGLA DE ORO: Control del tamaño de la imagen en Móvil */
.logo-img {
    max-width: 200px; /* Ajusta este valor según el ancho real de tu logo png */
    height: auto; /* Mantiene la proporción siempre */
    padding: 15px 0; /* Espaciado arriba y abajo en móvil */
}

/* Estilo específico para el logo del Footer en Móvil */
.logo-img-footer {
    max-width: 150px; /* Un poco más pequeño en el footer */
    height: auto;
    margin-bottom: 15px;
    display: block; /* Para centrarlo fácil en móvil */
    margin-left: auto;
    margin-right: auto;
}
.logo1{
    color: rgb(99, 85, 164);
}
.logo2{
    color: rgb(154, 96, 167);
   /* font-family: 'Dancing Script', cursive;
    font-weight: 700;*/ /* Para que se vea gruesa como en el logo */
}
header .container {
    display: flex;
    flex-direction: row; /* Cambiado a fila para que logo y botón estén alineados */
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    position: relative;
}

.menu-toggle {
    display: block;
    background-color: blueviolet; /* Color de tu marca */
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

header nav {
    display: none; 
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: rgba(30, 30, 30, 0.95); /* Fondo oscuro elegante */
    z-index: 1000;
    padding: 10px 0;
}

header nav.active {
    display: flex;
}
header a{
    text-decoration: none;
    padding: 5px 12px;
    font-weight: bold;
    color: black;
}

header a:hover{
    color:  blueviolet;
}

header nav a {
    color: white !important;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-align: left;
    width: 100%;
}

#hero{
   /* display:  flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    height: 90vh;
    color: white;
    background-image: linear-gradient(
        0deg,
         rgba(0,0,0,0.5),
         rgba(0,0,0,0.5)
         )
    ,url("media/hero1.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;*/
    position: relative; /* Clave para que el video se posicione respecto a esto */
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden; /* Para que el video no se salga de los bordes */
    color: white;

}

.video-fondo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantiene la proporción del video del dron */
    z-index: 1;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Tu degradado oscuro */
    z-index: 2;
}

.contenido {
    position: relative;
    z-index: 3; /* Asegura que el texto esté por delante de todo */
}

#video-movil
{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    height: 80vh;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

#hero h1{
    color: white;
}

#hero button{
    font-size:1.75em ;
}
#somos-taxiwoman{

}

#somos-taxiwoman .container{
    text-align: center;
    padding: 200px 12px;
}

.valores {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    flex-direction: column;
}

.valor-item {
    flex: 1;
    background-color: rgba(154, 96, 167, 0.1); /* Un lila muy suave */
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid blueviolet;
    text-align: left;
}

.valor-item i {
    font-size: 1.5em;
    color: blueviolet;
    margin-bottom: 10px;
}

.valor-item h3 {
    font-size: 1.2em;
    margin: 5px 0;
    color: rgb(30, 30, 30);
}

.valor-item p {
    font-size: 0.95em !important; /* Un poco más pequeña para que no compita con el texto principal */
    line-height: 1.4;
}

ul{
   /* display: none;*/
}
/*SECCION CONDUCTORAS*/
#conductoras {
    padding: 80px 20px;
    background-color: #ffffff;
}

.conductoras-flex {
    display: flex;
    flex-direction: column; /* Apilado en móvil */
    gap: 40px;
    align-items: center;
}

.video-container {
    width: 100%;
    max-width: 300px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(90, 45, 130, 0.2); /* Sombra con el morado de la marca */
}

.video-presentacion {
    width: 100%;
    display: block;
}

.info-conductoras {
    text-align: left;
}

.tag {
    background: #e91e63;
    color: white;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
}

.info-conductoras h2 {
    margin: 15px 0;
    color: #5a2d82;
}

.lista-checks {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.lista-checks li {
    margin-bottom: 12px;
    font-weight: 500;
}

.lista-checks i {
    color: #e91e63;
    margin-right: 10px;
}
/*SECCION CONDUCTORAS*/
/*SECCION TESTIMONIOS*/
#testimonios {
    padding: 80px 20px;
    background-color: #f3e5f5; /* Un morado muy clarito de fondo */
    text-align: center;
}

.testimonios-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 40px;
}

.video-test {
    width: 100%;
    max-width: 400px;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.testimonio-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card-t {
    background: white;
    padding: 20px;
    border-radius: 15px;
    text-align: left;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-left: 5px solid #e91e63; /* Detalle fucsia */
}

.estrellas {
    color: #ffc107;
    margin-bottom: 10px;
}

.card-t p {
    font-style: italic;
    font-size: 0.95rem;
    color: #444;
}

.card-t span {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    color: #5a2d82;
}
/*SECCION TESTIMONIOS*/
#nuestros-servicios{
    background-color: rgb(40, 40, 40);
    color: white;
    text-align: center;
}

#nuestros-servicios .container{
    padding: 100px 0px;
}

#nuestros-servicios h2{
    margin-top: 0;
    font-size: 3.2em;
}
#nuestros-servicios p{
   /* display: none;*/
}

#nuestros-servicios .carta{
           background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 50px;
    margin: 20px;
    border-radius: 15px;

    position: relative;
    background-size: cover;
    background-position: center;
    color: white;

    padding: 40px 20px; /* Más espacio arriba y a los lados */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    min-height: 450px; /* Altura consistente para todas las cartas */
}
#nuestros-servicios .carta p{
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 25px;
    /* Sombra de texto para asegurar legibilidad extrema */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
#nuestros-servicios li {
    list-style: none; /* Quita el punto/viñeta */
    padding: 0;       /* Elimina sangrías automáticas */
    margin-bottom: 15px; /* Espacio entre los párrafos de servicio */
}
.carta:first-of-type{
    background-image: linear-gradient(
        0deg,
         rgba(0,0,0,0.6),
         rgba(0,0,0,0.2)
         )
    ,url("media/transterrestre1.png");
}

.carta:nth-of-type(2){
    background-image: linear-gradient(
        0deg,
        rgba(0,0,0,0.6),
        rgba(0,0,0,0.2)
    )
    ,url("media/especial1.png");
 
}

.carta:nth-of-type(3){
    background-image: linear-gradient(
        0deg,
        rgba(0,0,0,0.6),
        rgba(0,0,0,0.2)
    )
    ,url("media/otras1.png");
}

/* =========================================
   Sección: Socios Comerciales
   ========================================= */

.socio-item a {
    display: flex; /* O usa display: block; pero flex es mejor para centrar */
    width: 100%;
    height: 100%;
    justify-content: center; /* Centra la imagen horizontalmente si es necesario */
    align-items: center;    /* Centra la imagen verticalmente si es necesario */
    text-decoration: none;  /* Quita subrayados por si acaso */
}
.socio-item figure {
    margin: 0;
    padding: 10px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: justify;
}
/* Estilo para la descripción del socio */
.socio-item figcaption {
    font-size: 0.85em; /* Texto pequeño para que quepa */
    color: #444;
    margin-top: 8px;
    line-height: 1.2;
    text-align: justify; /* Justifica el texto para que se vea más profesional */
    /* Opcional: ocultar en móvil y mostrar solo en PC si se ve muy lleno */
}
.socio-item a img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
.negrita {
    font-weight: bold;

    color: rgb(154, 96, 167);
}
#socios-comerciales {
    background-color: rgb(245, 245, 245); /* Un gris muy claro para diferenciarla */
    padding: 100px 0; /* Espaciado arriba y abajo, igual que Servicios */
    text-align: center; /* Centra el título H2 */
}

#socios-comerciales h2 {
    margin-top: 0;
    margin-bottom: 60px; /* Espacio antes de los logos */
    color: rgb(30, 30, 30); /* Color oscuro para el texto */
    font-size: 3.2em;
}

/* El contenedor principal de los logos (Usando Flexbox) */
.logos-container {
    display: flex;
    flex-wrap: wrap; /* ¡CLAVE! Permite que los logos bajen de línea */
    justify-content: center; /* Centra el grupo de logos horizontalmente */
    align-items: center; /* Centra los logos verticalmente entre sí */
    gap: 50px 80px; /* gap: [espacio vertical] [espacio horizontal] */
    padding: 0 20px; /* Pequeño colchón a los lados para móviles */
}

/* Cada "cajita" que contiene un logo */
.socio-item {

  width: 250px; 
    min-height: 180px; /* Cambiado de height a min-height */
    height: auto;      /* Permite que crezca con el figcaption */
    background-color: white; /* Asegura fondo sólido para que se vea la sombra */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   /* filter: grayscale(100%);*/
   /* opacity: 0.7;*/
    transition: all 0.4s ease;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1); /* Sombra más suave */
    border-radius: 8px; /* Un poco de redondeado */
    padding: 10px;
}

/* Aplicamos la animación a una clase */
.texto-parpadeante {
    animation: parpadeo 1s infinite; /* Dura 1 segundo y se repite infinitamente */
    color: #0c0c0c; /* Opcional: color para resaltar */
    font-weight: bold; /* Opcional: negrita para destacar aún más */
}


/* Efecto al pasar el mouse sobre el logo */
.socio-item:hover {
   /* filter: grayscale(0%); /* Vuelve a su color original */
   /* opacity: 1; /* Se pone 100% opaco */
   /* transform: scale(1.05); /* Se agranda un poquito (efecto sutil) */
   filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 4px 4px 15px rgba(0,0,0,0.2);
}

/* La imagen real dentro de la cajita */
.socio-item img {
   /* max-width: 100%; /* La imagen no se sale de su cajita */
   /* max-height: 100%; /* La imagen no se deforma a lo alto */
   /* width: auto; /* Mantiene la proporción */
   /* height: auto; /* Mantiene la proporción */
   max-width: 120px; /* Limita el ancho del logo para dejar espacio al texto */
    height: auto;
    margin-bottom: 5px;
}

/*CONTACTENOS*/
#contactanos {
    padding: 60px 20px;
    background-color: #ffffff; /* O el color de fondo de tu proyecto */
    text-align: center;
}

.main-flex-container {
    display: flex;
    flex-direction: column; /* Apilados en móvil */
    align-items: center;
    gap: 30px; /* Espacio entre imagen y formulario en móvil */
}

.info-form-wrapper {
    width: 100%;
    text-align: center; /* Centrado en móvil */
}

#contactanos h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #333;
}

#contactanos .subtitulo {
    font-size: 1rem;
    color: #666;
    margin-bottom: 40px;
}

#contacto-img {
    width: 100%;
    max-width: 450px; /* Ancho máximo en móvil */
    margin: 0;
}
#contacto-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px; /* Opcional: bordes redondeados */
    object-fit: cover;
}
/* Contenedor del Formulario */
.form-container {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Grupo de Input con Floating Labels */
.input-group {
    position: relative;
    width: 100%;
}

.input-group input, 
.input-group textarea {
    width: 100%;
    padding: 15px 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    outline: none;
    font-size: 1rem;
    background: transparent;
    transition: border-color 0.3s;
}

.input-group textarea {
    resize: none;
}

/* La etiqueta (label) por defecto encima del input */
.input-group label {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
    transition: all 0.3s ease;
    background-color: #ffffff; /* Debe coincidir con el fondo para tapar la línea del borde */
    padding: 0 5px;
}

/* Ajuste específico para el label del textarea */
.input-group textarea + label {
    top: 25px;
}

/* Efecto de Flotado: Cuando el input tiene foco o no está vacío */
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label,
.input-group textarea:focus + label,
.input-group textarea:not(:placeholder-shown) + label {
    top: 0;
    font-size: 0.85rem;
    color: #e91e63; /* Tu color principal de TaxiWoman */
    font-weight: bold;
}

.input-group input:focus, 
.input-group textarea:focus {
    border: 2px solid #e91e63;
}

/* Botón de Envío */
#btn-enviar-contacto {
    background-color: #e91e63;
    color: white;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
    width: 100%; /* Botón grande en móviles */
}

#btn-enviar-contacto:active {
    transform: scale(0.98);
}
/*CONTACTENOS*/

#final{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: rgb(30,30,30);
    color:white;
    height: 80vh;
}

#final h2{
    font-size: 3em;
}
#final button{
    font-size: 1.75em;
}

footer {
    background-color: rgb(30, 30, 30); /* Color oscuro para contrastar */
    color: white;
    padding: 60px 0 20px;
}

.footer-content {
    display: flex;
    flex-wrap: wrap; /* Para que en móviles las columnas se apilen */
    justify-content: space-between;
    gap: 40px;
}

.footer-col {
   /* flex: 1; /* Las columnas se reparten el espacio */
   /* min-width: 200px; /* Evita que se aplasten demasiado */
   flex: 1 1 100%; /* Forzamos a que intente ocupar el 100% en móviles */
    text-align: center; /* Centramos el texto para que se vea mejor en vertical */
    margin-bottom: 30px; /* Espacio entre bloques cuando están apilados */
    justify-content: center;
}

.footer-col h4 {
    color: rgb(154, 96, 167); /* El rosado de Woman para títulos */
    margin-bottom: 20px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col a {
    color: #ccc;
    text-decoration: none;
    transition: 0.3s;
}

.footer-col a:hover {
    color: white;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 40px;
    padding-top: 20px;
    font-size: 0.9em;
    color: #888;
}

/* Estilo para los links de redes sociales */
.social-links a {
    display: block;
    margin-bottom: 10px;
}

/* =========================================
   Estilo específico para los Logos de Redes
   ========================================= */

/* El contenedor de los 3 logos */
.social-links {
    display: flex; /* Alinea los logos en fila horizontal */
    gap: 15px; /* Espacio de 15px entre cada logo */
    /*justify-content: start; /* Los alinea a la izquierda de su columna */
    justify-content: center;
}

/* El enlace <a> que envuelve al icono */
.social-links a {
    text-decoration: none; /* Quita el subrayado */
    font-size: 2em; /* ¡CLAVE! Hace que el icono sea grande y visible */
    color: #ccc; /* Color gris suave por defecto */
    transition: all 0.3s ease; /* Animación suave para el hover */
}

/* Efecto hover general: Los logos se iluminan y suben un poquito */
.social-links a:hover {
    color: white; /* Se ponen blancos al pasar el mouse */
    transform: translateY(-5px); /* Efecto sutil de subir 5px */
}

/* OPCIONAL: Efecto hover con color oficial de la red social */

/* Facebook Oficial Blue */
.social-links a:hover .fa-facebook {
    color: #1877F2;
}

/* Instagram Gradient (aproximado) */
.social-links a:hover .fa-instagram {
    color: #E4405F; /* Tono magenta */
}

/* TikTok Oficial (aproximado) */
.social-links a:hover .fa-tiktok {
    color: #000000; /* Tono oscuro */
    text-shadow: 1px 1px #ff0050, -1px -1px #00f2ea; /* Efecto glitch de TikTok */
}

/*BOTON DE WHATSAPP*/
/* Contenedor del botón flotante */
.whatsapp-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25d366; /* Verde oficial de WhatsApp */
    color: white;
    padding: 12px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 9999; /* Asegura que esté por encima de todo */
    transition: all 0.3s ease;
    font-family: Arial, sans-serif;
}

/* Icono de WhatsApp (asumiendo que usas FontAwesome) */
.whatsapp-btn i {
    font-size: 24px;
}

/* Animación de Pulso */
.whatsapp-btn {
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Efecto Hover */
.whatsapp-btn:hover {
    background-color: #128c7e;
    transform: translateY(-5px);
    color: white;
}
/*ESTILO DE CLIMA*/
#weather-widget-container {
    position: fixed;
    bottom: 100px; /* Ajusta para que no tape el de WhatsApp */
    left: 20px;
    z-index: 1000;
    font-family: sans-serif;
}

/* Burbuja Flotante */
#weather-badge {
    background-color: #e91e63; /* Rosa TaxiWoman */
    border: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    transition: transform 0.3s;
}

#weather-badge:hover { transform: scale(1.1); }

#badge-temp { font-size: 0.9rem; font-weight: bold; }
#badge-icon { width: 30px; }

/* Panel de Información */
#weather-panel {
    position: absolute;
    bottom: 70px;
    left: 0;
    background: white;
    width: 220px;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    border: 2px solid #e91e63;
}

#weather-panel.hidden { display: none; }

.weather-search { display: flex; gap: 5px; margin-bottom: 10px; }
.weather-search input { flex: 1; padding: 5px; border: 1px solid #ccc; border-radius: 4px; }
.weather-search button { background: #e91e63; color: white; border: none; padding: 5px 10px; border-radius: 4px; }

#weather-details { text-align: center; color: #333; }
.temp-row { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.5rem; font-weight: bold; }
/*ESTILO DE CLIMA*/
/* Ajuste para dispositivos móviles (solo mostrar el icono si la pantalla es pequeña) */
@media (max-width: 768px) {
    .whatsapp-btn {
        padding: 15px;
        bottom: 15px;
        right: 15px;
    }
    .whatsapp-btn span {
        display: none; /* Esconde el texto en móviles para no tapar contenido */
    }
}
/**/

@media (min-width: 720px) {

    .container: {;
        max-width: 1400px;
    margin: auto;}

header .container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center; /* Centra verticalmente logo y enlaces */
       /* padding: 15px 40px;  /* Más espacio a los lados en PC */
       /* max-width: 1200px;   /* Evita que se estire demasiado en monitores 4K */
        margin: 0 auto;
    }
.menu-toggle {
        display: none !important;
    }

    .logos-container {
    display: flex;
    flex-wrap: wrap; /* Para que bajen si no caben */
    justify-content: center;
    gap: 20px;
    align-items: stretch; /* ESTO es lo que iguala las alturas */
}

header nav {
        display: flex !important;
        flex-direction: row !important;
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
        width: auto !important;
        padding: 0 !important;
        font-size: 25px;
    }

header nav a {
display: inline-block !important;
        padding: 10px 15px !important;
        border-bottom: none !important; /* Quitamos la línea divisoria de móvil */
        color: black !important;         /* Color original de tus links */
        width: auto !important;
        text-align: center;
        font-weight: bold;
    } 

header a:hover{
    color:  blueviolet !important;
}

    .video-fondo, .overlay {
        display: none; /* Quitamos el video en PC */
    }

    #hero {
        height: 90vh;
        background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                          url("media/hero1.png");
        background-size: cover;
        background-position: center;
    }

     #hero h1{
        font-size: 5em;
    }
    #somos-taxiwoman .container{

        display: flex;

        justify-content: space-evenly;

    }

    #somos-taxiwoman .texto{
        width: 50%;
        max-width: 600px;
        text-align: initial;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #somos-proya h2{
        margin-top: 0px;
    }

    #somos-taxiwoman .img-container{
        background-image: url("media/somos1.png");
        background-size: cover;
        background-position: center center;
        height: 500px;
        width: 400px;
    }  
/*SECCION CONDUCTORAS*/
.conductoras-flex {
        flex-direction: row; /* Video al lado del texto */
        justify-content: space-between;
    }
    
    .video-container, .info-conductoras {
        flex: 1;
    }
/*SECCION CONDUCTORAS*/
/*TESTIMONIOS*/
.testimonios-grid {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .testimonio-video, .testimonio-cards {
        flex: 1;
        max-width: 500px;
    }
/*TESTIMONIOS*/
#nuestros-servicios .servicios {
        display: flex;
        align-items: stretch; 
        justify-content: center;
        gap: 20px;
        max-width: 1300px; /* Un poco más de ancho para que el texto respire */
        margin: 0 auto;
    }

#nuestros-servicios .carta {
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: rgb(50, 50, 50);
        border-radius: 15px;
        padding: 0; /* Quitamos padding general para controlar márgenes internos */
        background-size: 100% 200px; /* Imagen un poco más alta */
        background-position: top center;
        background-repeat: no-repeat;
        min-width: 350px;
        overflow: hidden;
    }

#nuestros-servicios h3 {
        margin-top: 210px; /* Espacio exacto para la imagen */
        min-height: 90px;  /* Altura fija para el título */
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

#nuestros-servicios .carta ul {
        flex-grow: 1; 
        display: flex;
        flex-direction: column;
        padding: 0 30px 30px 30px;
        margin: 0;
        list-style: none;
    }
#nuestros-servicios .carta li {
        margin-bottom: 20px;
    }
#nuestros-servicios .carta p {
        font-size: 18px;/*0.95em; /* Un poco más pequeño para evitar saltos de línea innecesarios */
        line-height: 1.5;
        margin: 0;
        text-align: left; /* Alineación a la izquierda es más profesional para listas */
        
        /* OPCIONAL: Si quieres que cada párrafo ocupe el mismo espacio */
        min-height: 80px; 
    }
    
    /* Si decides poner botones +Info después, este código los alineará abajo */
    #nuestros-servicios .carta button {
        margin-top: auto;
        align-self: center;
    }

.socio-item a {
    display: flex; /* O usa display: block; pero flex es mejor para centrar */
    width: 100%;
    height: 100%;
    justify-content: center; /* Centra la imagen horizontalmente si es necesario */
    align-items: center;    /* Centra la imagen verticalmente si es necesario */
    text-decoration: none;  /* Quita subrayados por si acaso */
}
.socio-item a img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.socio-item {
        /* Si quieres que los logos se vean un poco más imponentes en PC */
      /*  width: 250px; 
        height: 150px;
         box-shadow: 2px 2px 10px rgba(0,0,0,0.5);*/
         width: 230px; /* Ancho fijo para que queden alineados en filas */
        min-height: 250px; 
        margin: 0; /* Quitamos el margen auto del móvil */
        filter: grayscale(100%);
        opacity: 0.8;
    }

/*CONTACTENOS*/
.main-flex-container {
        flex-direction: row;
        justify-content: center; /* Centra el conjunto en la pantalla */
        align-items: flex-start;
        gap: 40px; /* Espacio moderado entre imagen y formulario */
        max-width: 1100px;
        margin: 0 auto;
    }

    /* Columna Izquierda: La Imagen */
    #contacto-img {
        flex: 1; /* Toma el espacio disponible según su proporción */
        max-width: 500px; /* Ajusta este valor según el tamaño real de tu imagen */
    }

    #contacto-img img {
        width: 100%;
        height: auto;
        border-radius: 15px;
    }

    /* Columna Derecha: Títulos + Inputs */
    .info-form-wrapper {
        flex: 1.2; /* Le damos un poco más de peso al formulario */
        text-align: left;
    }

    /* Ajuste de los inputs para que ocupen todo el ancho del recuadro verde */
    .form-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .input-group {
        width: 100%; /* Cada input se estira al ancho de su columna */
    }

    .input-group input, 
    .input-group textarea {
        width: 100%; /* Asegura que el borde llegue hasta el final */
        box-sizing: border-box; /* Importante para que el padding no rompa el ancho */
    }

    /* El botón también debe seguir el ancho o alinearse a la derecha */
    #btn-enviar-contacto {
        width: 100%; /* Si quieres que ocupe todo el ancho como los inputs */
        max-width: 250px; /* O puedes limitarlo si prefieres que no sea tan gigante */
        padding: 15px;
    }
/*CONTACTENOS*/

    .footer-col {
    flex: 1; /* Las columnas se reparten el espacio */
    min-width: 200px; 
    }

    .social-links {
    display: flex; /* Alinea los logos en fila horizontal */
    gap: 15px; /* Espacio de 15px entre cada logo */
    }

    /* Aumentamos un poco el logo del Header en PC */
    .logo-img {
        max-width: 20px; /* Un tamaño más corporativo */
        padding:  0;

        max-width: 150px; /* Un tamaño más corporativo */
        margin-left: 0; /* Vuelve a la izquierda */
        margin-right: 0;
    }

    /* Alineamos el logo del Footer a la izquierda en PC */
    .logo-img-footer {
        max-width: 180px;
        margin-left: 0; /* Vuelve a la izquierda */
        margin-right: 0;
        margin-bottom: 20px;
    }
}