/* ======================================================
   CONTACTO.CSS – Coaching y Resulta2
   Estilos específicos para la página /contacto/
   ====================================================== */

/* ==============================
   1. HERO CONTACTO (ajustado)
   ============================== */
.hero-contacto {
  position: relative;
  width: 100%;
  min-height: 75vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blanco);
  overflow: hidden;
  isolation: isolate;
}

/* Degradado más emocional (azul profundo + negro) */
.hero-contacto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(30, 58, 138, 0.55),
    rgba(0, 0, 0, 0.7)
  );
  z-index: 1;
}

/* Desenfoque sutil sobre fondo para destacar texto */
.hero-contacto::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(2px);
  z-index: 0;
}

.hero-contacto .hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-16) var(--space-4);
  animation: fade-up 1s ease both;
}

.hero-contacto h1 {
  font-size: var(--fs-xl);
  color: var(--color-blanco);
  margin-bottom: var(--space-4);
  font-family: var(--fuente-secundaria);
  line-height: 1.3;
}

.hero-contacto p {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-sm);
  line-height: 1.9;
  max-width: 700px;
  margin: 0 auto var(--space-6);
}

/* CTA coherente con botones globales */
.hero-contacto .btn {
  background-color: var(--color-secundario);
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.3px;
  box-shadow: var(--sombra-suave);
}

.hero-contacto .btn:hover {
  background-color: var(--color-blanco);
  color: var(--color-primario);
  transform: translateY(-2px);
  box-shadow: var(--sombra-media);
}




/* ==============================
   2. INTRODUCCIÓN (ajustada)
   ============================== */
.intro-contacto {
  background: var(--color-fondo);
  text-align: center;
  padding: var(--space-16) var(--space-4);
  position: relative;
}

.intro-contacto .container {
  max-width: 850px;
  margin: 0 auto;
  animation: fade-up 1s ease both;
}

/* Icono superior */
.intro-contacto .intro-icono {
  margin-bottom: var(--space-4);
}
.intro-contacto .intro-icono img {
  opacity: 0.85;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* Título emocional */
.intro-contacto h2 {
  font-family: var(--fuente-secundaria);
  font-size: var(--fs-lg);
  color: var(--color-primario);
  margin-bottom: var(--space-6);
  line-height: 1.4;
}

/* Párrafo base */
.intro-contacto .intro-texto {
  font-size: var(--fs-sm);
  color: var(--color-texto);
  margin-bottom: var(--space-5);
  line-height: 1.9;
}

/* Párrafo final destacado */
.intro-contacto .intro-destacado {
  font-size: var(--fs-md);
  color: var(--color-primario);
  font-weight: 600;
  line-height: 1.9;
  max-width: 750px;
  margin: 0 auto;
}

/* Línea decorativa opcional */
.intro-contacto::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background: var(--color-secundario);
  border-radius: 2px;
  margin: var(--space-8) auto 0;
  opacity: 0.6;
}




/* ==============================
   3. FORMULARIO DE CONTACTO (ajustado)
   ============================== */

.formulario-contacto {
background: linear-gradient(180deg, #E9ECF7 0%, #FDF8EE 100%);
  position: relative;
  padding: var(--space-16) 0;
  text-align: center;
}

/* Encabezado del formulario */
.formulario-contacto .form-header {
  margin-bottom: var(--space-10);
  animation: fade-up 1s ease both;
}

.formulario-contacto .form-header img {
  opacity: 0.8;
  margin-bottom: var(--space-3);
}

.formulario-contacto .form-header h2 {
  color: var(--color-primario);
  font-family: var(--fuente-secundaria);
  margin-bottom: var(--space-2);
  font-size: var(--fs-lg);
}

.formulario-contacto .form-header p {
  color: var(--color-texto);
  font-size: var(--fs-sm);
  opacity: 0.9;
}

/* Contenedor del formulario */
.formulario-contacto .card {
  max-width: 700px;
  margin: 0 auto;
  padding: var(--space-8);
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
  border-top: 4px solid var(--color-secundario);
  transition: box-shadow 0.3s ease;
}

.formulario-contacto .card:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

/* Campos */
.formulario-contacto .campo {
  text-align: left;
  margin-bottom: var(--space-5);
}

.formulario-contacto label {
  font-weight: 600;
  color: var(--color-primario);
  margin-bottom: var(--space-2);
  display: block;
}

.formulario-contacto input,
.formulario-contacto select,
.formulario-contacto textarea {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-texto);
  background-color: #f8fafc;
  transition: var(--transicion-base);
}

.formulario-contacto input:focus,
.formulario-contacto select:focus,
.formulario-contacto textarea:focus {
  background-color: #fff;
  border-color: var(--color-secundario);
  box-shadow: 0 0 0 3px rgba(207, 165, 68, 0.25);
  outline: none;
}

/* Botón */
.formulario-contacto button {
  width: 100%;
  font-size: var(--fs-sm);
  margin-top: var(--space-4);
  letter-spacing: 0.3px;
  padding: var(--space-3) var(--space-5);
}

/* Mensaje de éxito */
.mensaje-exito {
  margin-top: var(--space-8);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-exito);
}

/* Estado de éxito */
.exito-activo {
  animation: fade-up 0.8s ease both;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-6);
  box-shadow: var(--sombra-suave);
}

.exito-activo h3 {
  color: var(--color-primario);
  font-size: var(--fs-lg);
  margin-bottom: var(--space-4);
}

.exito-activo p {
  color: var(--color-texto);
  line-height: 1.8;
  margin-bottom: var(--space-6);
}

.exito-activo a {
  display: inline-block;
  background: var(--color-secundario);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  transition: var(--transicion-base);
}

.exito-activo a:hover {
  background: var(--color-primario);
  transform: translateY(-2px);
}




/* ==============================
   4. CONTACTO DIRECTO
   ============================== */
.contacto-directo {
  background: var(--color-fondo);
  text-align: center;
}

.contacto-directo h2 {
  color: var(--color-primario);
  margin-bottom: var(--space-3);
}

.contacto-directo p {
  color: var(--color-texto);
  margin-bottom: var(--space-5);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.contacto-opciones {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.contacto-opciones a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: var(--transicion-base);
}

.btn--whatsapp {
  background-color: #25D366;
  color: #fff;
}
.btn--whatsapp:hover {
  background-color: #1ebe5d;
  transform: translateY(-2px);
}

/* ==============================
   5. CIERRE CONTACTO
   ============================== */
.cierre-contacto {
  background: linear-gradient(to right, #f9fafb, #eef2ff);
  text-align: center;
}

.cierre-contacto p {
  color: var(--color-texto);
  font-size: var(--fs-sm);
  line-height: 1.8;
  margin-bottom: var(--space-3);
}

.cierre-contacto h3 {
  font-size: var(--fs-lg);
  color: var(--color-primario);
  margin-top: var(--space-4);
}

.cierre-contacto .resaltar {
  color: var(--color-secundario);
}

/* ==============================
   6. ANIMACIONES Y RESPONSIVE
   ============================== */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

section {
  animation: fade-up 0.8s ease forwards;
}

@media (max-width: 768px) {
  .hero-contacto {
    min-height: 65vh;
    background-position: center;
  }

  .hero-contacto h1 {
    font-size: var(--fs-lg);
  }
    .hero-contacto p {
    font-size: 0.95rem;
  }

  .hero-contacto .btn {
    padding: var(--space-3) var(--space-5);
  }

  .formulario-contacto .card {
    padding: var(--space-6);
  }

  .contacto-opciones {
    flex-direction: column;
    gap: var(--space-3);
  }

  .intro-contacto h2 {
    font-size: 1.25rem;
  }
  .intro-contacto .intro-destacado {
    font-size: 1rem;
  }
}