/* 
   SECCIÓN DE CONTACTO
    */
.seccion-contacto {
    max-width: 600px;
    margin: 4rem auto 3rem;
    padding: 2rem;
    background: linear-gradient(135deg, var(--color-blanco) 0%, #f5f5f5 100%);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border-left: 4px solid var(--color-primario);
    /* Acento Natura */
}

/* Título de la sección */
.seccion-contacto h2 {
    color: var(--color-primario);
    margin-bottom: 0.5rem;
    font-size: 1.75rem;
    text-align: center;
}

/* Párrafo introductorio debajo del título */
.seccion-contacto>p {
    text-align: center;
    color: var(--color-texto-secundario);
    margin-bottom: 2rem;
}


/* 
   FORMULARIO DE CONTACTO
   Los campos se apilan verticalmente con gap entre ellos.
   gap: 1.5rem → separación más generosa que en login.css
   porque el formulario tiene más espacio disponible.
    */
.form-contacto {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}


/* 
   GRUPOS DE CAMPO
   Estructura igual a login.css: label arriba, input/textarea abajo.
   Nota: este bloque es paralelo al .form-grupo de login.css.
   Si en el futuro se unifican, mover a style.css.
    */
.form-grupo {
    display: flex;
    flex-direction: column;
}

/* Etiqueta del campo */
.form-grupo label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-texto);
    font-size: 0.95rem;
}

/* Inputs de texto y áreas de texto */
.form-grupo input,
.form-grupo textarea {
    padding: 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-family: inherit;
    /* Hereda Nunito del body */
    font-size: 1rem;
    transition: all 0.3s ease;
    background: var(--color-blanco);
}

/* Estado de enfoque: borde naranja + brillo suave */
.form-grupo input:focus,
.form-grupo textarea:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.1);
    background: #fafafa;
    /* Fondo levemente más claro al escribir */
}

/* El textarea se puede redimensionar verticalmente */
.form-grupo textarea {
    resize: vertical;
    min-height: 120px;
}


/* 
   BOTÓN DE ENVIAR
   Degradado de izquierda a derecha en tonos naranja.
   text-transform: uppercase + letter-spacing → apariencia
   más formal y destacada en el formulario.
   :hover → sube 2px con sombra para sensación de elevación.
   :active → vuelve a su posición al hacer clic.
   :disabled → opacidad reducida, sin interacción.
    */
.btn-enviar {
    background: linear-gradient(135deg, var(--color-primario) 0%, #e65100 100%);
    color: var(--color-blanco);
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-enviar:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 102, 0, 0.3);
}

.btn-enviar:active {
    transform: translateY(0);
    /* Regresa a posición al presionar */
}

.btn-enviar:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}


/* 
   RESPUESTA DEL SERVIDOR
   Aparece debajo del botón con un estado visual:
     .exito    → verde (operación exitosa)
     .error    → rojo (algo salió mal)
     .cargando → azul (esperando respuesta del servidor)
   La animación slideUp hace que aparezca suavemente.
   JS controla display:none/block y añade la clase de estado.
    */
.contacto-respuesta {
    padding: 1rem;
    border-radius: 6px;
    text-align: center;
    font-weight: 500;
    animation: slideUp 0.3s ease;
}

.contacto-respuesta.exito {
    background: #e8f5e9;
    border: 2px solid #4caf50;
    color: #2e7d32;
}

.contacto-respuesta.error {
    background: #ffebee;
    border: 2px solid #f44336;
    color: #c62828;
}

.contacto-respuesta.cargando {
    background: #e3f2fd;
    border: 2px solid #2196f3;
    color: #1565c0;
}

/* Animación de entrada desde abajo */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* 
   RESPONSIVE — Formulario de contacto
   En pantallas pequeñas:
     - Reducimos padding de la tarjeta
     - Agrandamos el font-size de los inputs a 16px para evitar
       que iOS haga zoom automático al hacer foco en un campo
    */
@media (max-width: 768px) {
    .seccion-contacto {
        padding: 1.5rem;
        margin: 2rem 1rem;
    }

    .seccion-contacto h2 {
        font-size: 1.5rem;
    }

    .form-grupo input,
    .form-grupo textarea {
        font-size: 16px;
        /* Mínimo para evitar zoom automático en iOS */
    }
}


/* 
   SECCIÓN DEL EQUIPO CON ROLES
   Grid de 4 tarjetas, cada una con nombre, rol y descripción.
   En mobile se apilan en 1 columna, en tablet 2, en desktop 4.
   */
.seccion-equipo {
    padding: 48px 20px;
    text-align: center;
    background-color: var(--color-fondo-suave, #f9f5f1);
}

.seccion-equipo h2 {
    margin-bottom: 8px;
    color: var(--color-primario);
}

.subtitulo-equipo {
    color: var(--color-texto-suave, #666);
    font-size: 0.97rem;
    margin-bottom: 32px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.equipo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.miembro-card {
    background: var(--color-blanco);
    border: 2px solid var(--color-borde);
    border-radius: var(--radio-carta);
    padding: 24px 20px;
    text-align: center;
    transition: var(--transicion);
}

.miembro-card:hover {
    border-color: var(--color-primario);
    box-shadow: var(--sombra-carta);
    transform: translateY(-4px);
}

.miembro-card h3 {
    font-size: 1.05rem;
    margin-bottom: 8px;
    color: var(--color-texto);
}

.miembro-card .rol {
    color: var(--color-primario);
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.miembro-card .descripcion {
    font-size: 0.86rem;
    color: var(--color-texto-suave, #666);
    line-height: 1.6;
}

/* RESPONSIVE — Equipo */
@media (max-width: 599px) {
    .equipo-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 600px) and (max-width: 999px) {
    .equipo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}