/* static/css/css_index/contacto.css */
/* =========================================================
   PÁGINA CONTÁCTENOS (diseño de Gemini adaptado a la paleta de marca)
   ---------------------------------------------------------
   1) PÁGINA Y ENCABEZADO
   2) CAMPO TRAMPA CONTRA BOTS
   3) TARJETA VERDE DE DATOS DE CONTACTO
   4) FORMULARIO Y CAMPOS
   ========================================================= */

/* =========================================================
   1) PÁGINA Y ENCABEZADO
   ========================================================= */
.pagina-contacto { background: #ebf5ec; font-family: 'Poppins', sans-serif; padding: 140px 0 3rem; }          /* la barra de navegación es fija (~116 px): el título arranca justo debajo */
.titulo-contacto { font-size: 2.2rem; font-weight: 700; color: var(--brand-green-dark); }

/* =========================================================
   2) CAMPO TRAMPA CONTRA BOTS
   ========================================================= */
.hp-wrapper {
  opacity: 0;
  position: absolute;
  top: 0; left: 0;
  height: 0; width: 0;
  z-index: -1;
  overflow: hidden;
}

/* =========================================================
   3) TARJETA VERDE DE DATOS DE CONTACTO
   ========================================================= */
.tarjeta-contacto { background: var(--brand-green-dark); color: #fff; border-radius: 16px; box-shadow: 0 10px 25px rgba(27, 94, 32, 0.2); }
.tarjeta-contacto h2 { color: #fff; }
.nota-contacto { background: rgba(255, 255, 255, 0.12); padding: 12px 16px; border-radius: 8px; border-left: 4px solid #81c784; }
.linea-contacto { border-color: rgba(255, 255, 255, 0.25); opacity: 1; }
.circulo-icono-contacto {
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: #a5d6a7; font-size: 1.2rem;
}
.etiqueta-tarjeta { font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); }
.enlace-tarjeta-contacto { color: #fff; font-weight: 600; text-decoration: none; }
.enlace-tarjeta-contacto:hover { color: #a5d6a7; text-decoration: underline; }

/* =========================================================
   4) FORMULARIO Y CAMPOS
   ========================================================= */
.formulario-contacto { background: #fff; border: 1px solid #d1d5db; border-radius: 16px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04); }
.etiqueta-contacto { font-weight: 600; color: #1a202c; }
.icono-campo-contacto { background: #f8fafc; color: var(--brand-green-dark); font-size: 1.1rem; padding: 0 14px; }
.campo-contacto { padding: 12px 14px; font-size: 1rem; }
.campo-contacto:focus { border-color: var(--brand-green); box-shadow: 0 0 0 0.25rem rgba(46, 125, 50, 0.18); }
.campo-contacto-texto { border-radius: 8px; }
.boton-enviar-contacto {
  background: var(--brand-green); color: #fff; font-weight: 700; font-size: 1.1rem;
  min-height: 52px; border: none; border-radius: 8px; transition: background .2s ease, transform .2s ease;
}
.boton-enviar-contacto:hover,
.boton-enviar-contacto:focus-visible { background: var(--brand-green-dark); color: #fff; transform: translateY(-2px); }
.boton-enviar-contacto:disabled { opacity: .7; transform: none; }