/* ==================================================
   PAGINA DE CONTACTO
   ==================================================

   Este archivo tenia 11 115 lineas: dentro venia un Bootstrap 4.3.1 completo y
   una plantilla de terceros, porque el marcado usaba su rejilla. Eso se filtraba
   al resto de la pagina —su `.navbar { display: flex }` encogia el contenedor del
   menu a 765 px cuando en las demas vistas mide 1200—, y por eso el navbar de
   esta vista no se parecia al de ninguna otra.

   Ahora el marcado no depende de ninguna rejilla ajena y esto son ~230 lineas
   propias. Los valores no se inventaron: se midieron sobre la version que estaba
   en produccion, para que el diseño no cambiara.
   ================================================== */

.contact-page {
    /* 120px arriba por el navbar fijo, que mide 80 en escritorio */
    padding: 120px 20px 60px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: 100vh;
}

.contact-wrap {
    max-width: 1140px;
    margin: 0 auto;
}

/* ==================================================
   ENCABEZADO
   ================================================== */

.contact-page .page-header {
    text-align: center;
    margin-bottom: 50px;
}

.contact-page .page-header h1 {
    font-family: var(--fuente-base);
    font-size: var(--titulo-2);
    font-weight: var(--peso-fuerte);
    color: #2c3e50;
    margin-bottom: 20px;
}

.contact-page .page-header p {
    font-size: var(--texto-lg);
    line-height: var(--interlineado-amplio);
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
}

/* ==================================================
   REJILLA: formulario ancho + informacion estrecha
   ================================================== */

.contact-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    align-items: start;
}

.contact-form-container,
.contact-info {
    background: #fff;
    border-radius: 15px;
}

.contact-form-container {
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.contact-info {
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.contact-form-container h3,
.contact-info h3 {
    font-family: var(--fuente-base);
    font-weight: var(--peso-semi);
    /* 1.3 y no el 1.6 heredado del cuerpo: a 1.6 los titulos de tarjeta quedaban
       con 92px de alto y demasiado aire debajo */
    line-height: var(--interlineado-medio);
    color: #2c3e50;
    margin-bottom: 30px;
}

.contact-form-container h3 {
    font-size: var(--titulo-3);
}

/* La columna de informacion es estrecha (370px): a 1.8rem, "Informacion de
   contacto" parte en dos lineas. Medido. */
.contact-info h3 {
    font-size: var(--titulo-4);
}

/* ==================================================
   FORMULARIO
   ================================================== */

.campos-pareados {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.campo {
    margin-bottom: 20px;
}

.modern-form .form-control {
    display: block;
    width: 100%;
    padding: 15px 20px;
    font-family: inherit;
    font-size: var(--texto-base);
    color: #212529;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.modern-form .form-control::placeholder {
    color: #6c757d;
}

.modern-form .form-control:hover {
    background: #fff;
}

.modern-form .form-control:focus {
    background: #fff;
    border-color: #0056b3;
}

.modern-form textarea.form-control {
    resize: vertical;
    min-height: 150px;
}

.boton-enviar {
    /* #0056b3 y no #007bff: con blanco encima da 7.04 de contraste; el azul
       original daba 3.47 y no llegaba al minimo de 4.5 */
    background: #0056b3;
    color: #fff;
    border: none;
    border-radius: 25px;
    padding: 15px 40px;
    font-family: inherit;
    font-size: var(--texto-base);
    font-weight: var(--peso-semi);
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.boton-enviar:hover {
    background: #00479b;
    transform: translateY(-2px);
}

/* ==================================================
   INFORMACION DE CONTACTO
   ================================================== */

.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.contact-item:last-child {
    margin-bottom: 0;
}

.contact-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    margin-right: 15px;
    border-radius: 50%;
    background: linear-gradient(45deg, #007bff, #0056b3);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-details {
    min-width: 0;
}

.contact-details h4 {
    font-size: var(--texto-md);
    font-weight: var(--peso-semi);
    color: #2c3e50;
    margin-bottom: 5px;
}

.contact-details p {
    font-size: var(--texto-base);
    line-height: var(--interlineado-base);
    color: #6c757d;
    margin: 0;
}

.contact-details a {
    /* 7.04 sobre blanco; #007bff daba 3.98 */
    color: #0056b3;
    text-decoration: none;
    /* El correo es largo y en la columna estrecha no cabe entero */
    overflow-wrap: anywhere;
}

.contact-details a:hover,
.contact-details a:focus {
    color: #00479b;
    text-decoration: underline;
}

/* ==================================================
   RESPONSIVE
   ================================================== */

@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-form-container {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .contact-page {
        /* El navbar baja a ~70px por debajo de este ancho */
        padding: 100px 15px 40px;
    }

    .contact-page .page-header h1 {
        font-size: var(--titulo-2);
    }

    .contact-page .page-header p {
        font-size: var(--texto-base);
    }

    .campos-pareados {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-form-container h3,
    .contact-info h3 {
        font-size: var(--titulo-4);
        margin-bottom: 20px;
    }

    .boton-enviar {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .contact-page {
        padding: 100px 10px 30px;
    }

    .contact-form-container,
    .contact-info {
        padding: 20px;
    }

    .contact-icon {
        width: 40px;
        height: 40px;
        margin-right: 12px;
    }

    .contact-icon svg {
        width: 16px;
        height: 16px;
    }
}

/* ==================================================
   FORMULARIO: SEÑUELO, AVISOS Y CAPTCHA
   ==================================================

   Agregado el 2026-09-02, cuando el formulario paso a entregar de verdad.
   ================================================== */

/*
 * El campo señuelo.
 *
 * Se saca de la pantalla con posicion absoluta, **no con `display: none` ni
 * `visibility: hidden`**: hay robots que se saltan los campos que no se pintan,
 * y entonces el señuelo no atraparia a ninguno. Asi ocupa cero para la vista y
 * sigue existiendo para quien rellena por programa.
 *
 * De quien usa teclado o lector de pantalla ya lo esconden el `tabindex="-1"` y
 * el `aria-hidden` del marcado, que es lo que corresponde: esto es CSS, y CSS
 * no debe ser lo unico que oculte algo a una persona.
 */
.campo-senuelo {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* El widget del captcha. Cuando no hay clave capturada no se pinta nada, asi
   que este bloque simplemente no encuentra a nadie. */
.cf-turnstile {
  margin-bottom: 1rem;
}

.aviso-formulario {
  margin: 1rem 0 0;
  padding: 0;
  font-size: var(--texto-sm);
  line-height: var(--interlineado-medio);
}

/*
 * Vacio no ocupa, pero **no se oculta**.
 *
 * Aqui habia un `display: none`, y contradecia al comentario del marcado: la
 * region viva tiene que existir y estar renderizada desde el principio para que
 * el lector de pantalla anuncie el cambio de contenido. Ocultarla mientras esta
 * vacia —que es su estado hasta el primer envio— es justo lo que se queria
 * evitar. Con el margen a cero no deja hueco y sigue estando.
 */
.aviso-formulario:empty {
  margin: 0;
}

.aviso-formulario--trabajando {
  color: #5a6b82;
}

/* 6.74:1 sobre blanco. */
.aviso-formulario--bien {
  color: #10693f;
  font-weight: 600;
}

/* 6.54:1 sobre blanco. El rojo de la paleta, #ff4757, da 3.34:1 y no llega
   al 4.5 que exige un texto. */
.aviso-formulario--mal {
  color: #b3261e;
  font-weight: 600;
}

.campo-con-error {
  border-color: #b3261e !important;
}

/*
 * Pista de foco dentro del widget del captcha.
 *
 * Cloudflare pinta sus propios elementos enfocables dentro de `.cf-turnstile`,
 * y **ninguno trae contorno de foco**: el auditor de accesibilidad encontro
 * tres paradas de tabulacion sin pista visual en cuanto se agrego el widget, y
 * dejo `contacto.php` como la unica de las doce paginas con un fallo. Es un
 * incumplimiento del criterio 2.4.7 de WCAG y lo introduce un tercero, no
 * nosotros — pero se ve en nuestra pagina, asi que se arregla aqui.
 *
 * **Hasta donde llega, y hasta donde no.** El reto interactivo de Cloudflare
 * vive dentro de un `<iframe>` de `challenges.cloudflare.com`, que es **otro
 * documento**: ninguna hoja de esta pagina lo alcanza. Lo mas que hace esta
 * regla es dibujar el contorno **sobre el propio `<iframe>`** cuando recibe el
 * foco, que es util —se ve donde esta uno— pero no cubre el 2.4.7 de lo que hay
 * dentro. Eso es cosa de Cloudflare.
 *
 * Aqui decia que cubria «los dos» casos sin mas. No es cierto, y conviene que
 * no lo parezca.
 */
.cf-turnstile :focus-visible,
.cf-turnstile:focus-visible {
  outline: 3px solid #2c5aa0;
  outline-offset: 2px;
  border-radius: 4px;
}