/* ============================================================================
 * contact.css — Página de contacto pública
 * ----------------------------------------------------------------------------
 * Extraído del <style> inline de contact.php en la armonización G1 (Lote 4).
 * Usa los tokens definidos en _tokens.css. Sin :root local, sin hex
 * hardcoded fuera de focus rings y shadows custom (documentados).
 *
 * Cambios cromáticos respecto al original:
 *  - 16 vars del :root local migradas a tokens canónicos.
 *  - Alert success: era azul (bug del :root local que llamaba a
 *    --bg-green-soft con un valor azul #dbeafe). Restaurado a verde
 *    semántico var(--color-success-*), coherente con terms-privacy.css
 *    del Lote 2 y el resto del proyecto.
 *  - Alert error: tokens canónicos var(--color-danger-*).
 *  - Hero / botón / cards: mismos azules pero vía tokens.
 *  - Email del usuario: antes ofuscado vía JS, ahora mailto: real con
 *    estilo .contact-email-link.
 * ============================================================================ */

/* ─── Body ──────────────────────────────────────────────────────────────────── */
body {
    background: linear-gradient(
        135deg,
        var(--bg-blue-soft) 0%,
        var(--color-blue-100) 50%,
        var(--bg-blue-softer) 100%
    );
    min-height: 100vh;
}

/* ─── Hero ──────────────────────────────────────────────────────────────────── */
.contact-hero {
    background: linear-gradient(
        135deg,
        var(--color-blue-900) 0%,
        var(--color-blue-400) 50%,
        var(--color-sky) 100%
    );
    color: var(--color-white);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}
.contact-hero::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}
.contact-hero .container {
    position: relative;
    z-index: 1;
}

/* ─── Form card ─────────────────────────────────────────────────────────────── */
.contact-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 40px;
    box-shadow: var(--shadow-xl);
    margin-top: -60px;
    position: relative;
    z-index: 10;
}

/* Inputs flotantes */
.form-floating > .form-control,
.form-floating > .form-select {
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    height: 60px;
    padding: 1rem 1rem;
}
.form-floating > .form-select {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}
.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
    border-color: var(--color-blue-900);
    /* Focus ring custom: no hay token de focus en _tokens.css todavía.
       Si más adelante se añade --shadow-focus-blue, sustituir aquí. */
    box-shadow: 0 0 0 4px rgba(0, 61, 122, 0.1);
}
.form-floating > label {
    padding: 1rem 1rem;
}
.form-floating > .form-select ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Textarea de contacto: clase específica para no afectar otros textareas
   con .form-control en el resto del proyecto. */
.contact-textarea {
    height: 150px;
}

/* ─── Send button ───────────────────────────────────────────────────────────── */
.btn-send {
    background: linear-gradient(135deg, var(--color-blue-900), var(--color-blue-400));
    border: none;
    padding: 16px 40px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    color: var(--color-white);
    transition: all 0.3s;
    box-shadow: var(--shadow-blue);
}
.btn-send:hover {
    transform: translateY(-3px);
    /* Hover-shadow más intensa que --shadow-blue (alpha 0.4 vs 0.12).
       No hay token equivalente; mantener este rgba custom. */
    box-shadow: 0 8px 30px rgba(0, 61, 122, 0.4);
    color: var(--color-white);
}

/* ─── Info cards ────────────────────────────────────────────────────────────── */
.info-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}
.info-card {
    background: linear-gradient(135deg, var(--bg-body), var(--color-white));
    border-radius: var(--radius-lg);
    padding: 25px;
    text-align: center;
    border: 2px solid var(--border-color);
    transition: all 0.3s;
}
.info-card:hover {
    border-color: var(--color-blue-900);
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}
.info-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
    color: var(--color-white);
}
/* El background del icono lo aporta una clase modificadora utility
   (.grad-care / .grad-tech / .grad-research) según el tipo de info card.
   Esto da personalidad cromática al bloque sin caer en monotonía azul,
   mismo patrón que become-partner.css y association.css. */
.info-card h5 {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.info-card p {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.95rem;
}

/* Email link en info-card. Sustituye al anterior sistema de ofuscación JS,
   que rompía accesibilidad y ya no protegía contra scrapers modernos. */
.contact-email-link {
    color: var(--color-blue-700);
    text-decoration: none;
}
.contact-email-link:hover {
    color: var(--color-navy);
    text-decoration: underline;
}

/* ─── FAQ section ───────────────────────────────────────────────────────────── */
.faq-section {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 40px;
    margin-top: 40px;
    box-shadow: var(--shadow-md);
}
.faq-item {
    padding: 20px 0;
    border-bottom: 1px solid var(--bg-subtle);
}
.faq-item:last-child {
    border-bottom: none;
}
.faq-question {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.faq-question i {
    color: var(--color-blue-900);
}
.faq-answer {
    color: var(--text-muted);
    padding-left: 30px;
}

/* ─── Alerts (success/error) ────────────────────────────────────────────────── */
.alert-modern {
    border-radius: var(--radius-lg);
    padding: 20px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}
/* Success: verde semántico restaurado (estaba en azul por bug del :root local) */
.alert-modern.success {
    background: var(--color-success-soft);
    border: 2px solid var(--color-success);
    color: var(--color-success-dark);
}
.alert-modern.error {
    background: var(--color-danger-soft);
    border: 2px solid var(--color-danger);
    color: var(--color-danger-dark);
}
.alert-modern i {
    font-size: 1.5rem;
}

/* ─── Turnstile widget wrapper ──────────────────────────────────────────────── */
/* turnstile_helper.php pinta .turnstile-wrapper. Centramos el widget. */
.turnstile-wrapper {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

/* ─── Utility gradient classes ──────────────────────────────────────────────── */
/* Replicadas de become-partner.css y association.css mientras no exista
   _components.css (Fase 4/G3). Los 4 gradientes aportan personalidad
   cromática a iconos y elementos decorativos. Los hex sin token canónico
   exacto (#f59e0b ámbar, --color-red, --color-violet-dark, --color-pink,
   --color-green) son decoración intencional, mismo criterio que los
   archivos de referencia.

   Asignación en esta página:
     - .grad-care      → Email card (calor humano, contacto)
     - .grad-tech      → Tiempo respuesta card (eficiencia, agilidad)
     - .grad-research  → Seguridad card (verde "todo OK")
     - .grad-control   → no usado aquí, se replica para coherencia. */
.grad-care {
    /* ámbar a rojo — calor humano, marca, cuidado */
    background: linear-gradient(135deg, #f59e0b, var(--color-red));
}
.grad-tech {
    /* azul a violeta — tecnología, idea creativa */
    background: linear-gradient(135deg, var(--color-blue-400), var(--color-violet-dark));
}
.grad-research {
    /* verde — crecimiento, ciencia, alcance positivo */
    background: linear-gradient(135deg, var(--color-green), var(--color-success));
}
.grad-control {
    /* violeta a rosa — auditoría, supervisión */
    background: linear-gradient(135deg, var(--color-violet-dark), var(--color-pink));
}

/* ─── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .contact-card {
        padding: 25px;
        margin-top: -40px;
    }
    .info-cards {
        grid-template-columns: 1fr;
    }
}