/* Estilos Generales */
*, *::before, *::after {
    box-sizing: border-box;
}

/* CORREGIDO: Ahora centra el contenido horizontalmente y deja espacio con el header/footer */
main {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px; /* Margen arriba y abajo para que no choque con header/footer */
    width: 100%;
}

/* CONTENEDOR PRINCIPAL: Controla el flujo de las dos tarjetas */
.layout-principal {
    display: flex;
    flex-direction: row; /* Uno al lado del otro en PC */
    gap: 30px;           /* Separación entre las dos tarjetas */
    width: 100%;
    max-width: 1000px;   /* Ancho máximo combinado de ambas tarjetas */
    align-items: stretch; /* Hace que ambas tarjetas tengan la misma altura */
}
.contenido-texto p {
    font-size: 1.2rem;
}
/* ... (Mantené todos tus estilos intermedios iguales hasta llegar acá) ... */

/* ==========================================================
   ESTILOS NUEVOS: Botón de WhatsApp
   ========================================================== */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 10px 18px;
    background-color: #25d366; /* Verde oficial de WhatsApp */
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    font-size: 14px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.btn-whatsapp:hover {
    background-color: #128c7e; /* Un verde un poco más oscuro al pasar el mouse */
    transform: translateY(-2px); /* Pequeño efecto de elevación */
}

.icono-wsp {
    width: 20px;
    height: 20px;
}

/* ==========================================================
   MEDIA QUERIES: Adaptación para Tablets y Celulares
   ========================================================== */

/* Cuando la pantalla es menor a 850px (Tablets y Celulares) */
@media (max-width: 850px) {
    .layout-principal {
        flex-direction: column; /* Las tarjetas se ponen una abajo de la otra */
    }
}

/* Cuando la pantalla es muy chica (Celulares de menos de 480px) */
@media (max-width: 480px) {
    .tarjeta-presentacion {
        flex-direction: column; /* La foto se pone arriba del texto dentro de su tarjeta */
        text-align: center;     /* Centra el texto */
        padding: 20px;
    }
    
    .contenedor-formulario {
        padding: 20px;
    }
    
    .btn-whatsapp {
        justify-content: center; /* Centra el contenido del botón en celular */
        width: 100%;             /* Hace que ocupe todo el ancho en pantallas chicas */
    }
    .formulario-contacto textarea {
        min-height: 180px; /* En celulares es un poco más bajo para mejorar la usabilidad */
    }
}



/* --- TARJETA IZQUIERDA: Presentación --- */
.tarjeta-presentacion {
    /* Fondo blanco con 85% de opacidad para el efecto semitransparente */
    background: rgba(255, 255, 255, 0.45); 
    padding: 30px;
    border-radius: 8px;
    /* Agregamos un borde fino sutil para definir mejor el "enmarcado" */
    border: 1px solid rgba(255, 255, 255, 0.5); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    flex: 1;             
    
    display: flex;       /* Flexbox activa la alineación interna */
    flex-direction: row; /* FUERZA: Foto a la izquierda, texto a la derecha en PC */
    align-items: center; /* Centra verticalmente la foto con el texto */
    gap: 20px;           /* Espacio de separación entre foto y texto */
}
.tarjeta-presentacion h3{
    color:black;
}

/* --- TARJETA DERECHA: Formulario --- */
.contenedor-formulario {
    /* Mismo fondo blanco semitransparente para que hagan juego */
    background: rgba(255, 255, 255, 0.45); 
    padding: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.5); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    flex: 1;             
}
.contenedor-formulario label{
    color: black;
}
.contenedor-formulario h2{
    color: rgb(0, 0, 0);
}
.formulario-contacto textarea {
    width: 100%;          /* Ocupa todo el ancho disponible de la tarjeta */
    min-height: 250px;    /* Hace que de entrada sea bien alto y grande (antes tenías 180px) */
    max-height: 500px;    /* Opcional: le pone un límite máximo para que no lo estiren al infinito */
    padding: 15px;        /* Más espacio interno para que el texto no pegue a los bordes */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;      /* Evita el zoom automático molesto en iPhones al escribir */
    resize: vertical;     /* CLAVE: El usuario puede agrandarlo, pero SOLO hacia abajo */
}