/* Colores base */
:root {
    --rosa: #f4bddf;
    --rosa-fucsia: #ef4da6;
    --rojo: #c40000;
    --crema: #ffeecc;
    --azul: #9fd6ff;
    --azul-oscuro: #0089dd;
    --verde: #b4dbaf;
    --amarillo: #ffd87d;
    --naranja: #ff8000;
}

.contacto-contenedor {
    display: flex;
    gap: 80px;
    padding: 80px 100px;
    background-color: var(--verde);
}

/* 1. Contenedor y Etiquetas (Form y Label) */
.modern-form {
    width: 50%;
    padding: 0;
    background-color: transparent;
}



.modern-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    /* USO DE VARIABLES */
    color: var(--color-form-bg);
}

/* 2. Campos de Entrada de Texto (Input, Select, Textarea) */
.modern-form input[type="text"],
.modern-form input[type="email"],
.modern-form input[type="password"],
.modern-form select,
.modern-form textarea {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.5;

    /* USO DE VARIABLES */
    color: var(--rosa-fucsia);
    background-color: var(--crema);
    border: 1px solid var(--crema);
    border-radius: 6px;
    box-shadow: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* 3. Estado de Foco (Focus State) */
.modern-form input:focus,
.modern-form select:focus,
.modern-form textarea:focus {
    /* USO DE VARIABLES */
    border-color: var(--amarillo);
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--amarillo);
}

/* 4. Botones (Button) */
.modern-form button[type="submit"] {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    /* ... otras propiedades ... */

    /* USO DE VARIABLES */
    color: var(--rosa-fucsia);
    background-color: var(--rosa);
    border: 1px solid var(--rosa);
    border-radius: 4px;
    box-shadow: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.modern-form button[type="submit"]:hover {
    /* USO DE VARIABLES */
    color: var(--rosa-fucsia);
    /* Mantiene el texto blanco */
    background-color: var(--color-button-hover-bg);
    border-color: var(--color-button-hover-border);
}

.contacto-info {
    width: 50%;
    font-family: 'roboto', sans-serif;
}

.contacto-info h3 {
    margin-bottom: 15px;
}

.contacto-info p {
    margin-bottom: 10px;
}

.contacto-info i {
    margin-right: 10px;
    color: var(--rosa-fucsia);
}

.redes {
    list-style: none;   /* 🔥 quita los puntos */
    padding: 0;
    margin: 0;
}

.redes li {
    margin-bottom: 12px;
    font-size: 16px;
}

.redes i {
    margin-right: 10px;
    color: var(--rosa-fucsia);
}

/* LINKS DE CONTACTO */
.contacto-info a {
    color: var(--rosa-fucsia);
    font-weight: 500;
    transition: color 0.2s ease, transform 0.2s ease;
}

.contacto-info a:hover {
    color: var(--rojo);
    transform: translateX(3px);
    /* pequeño movimiento elegante */
}