/* ============================================================================
   CONTACTO — la página a la que apunta todo el sitio
   ============================================================================
   Formulario limpio y canales. No tiene sv-cierre porque esta página ES el
   cierre: poner otro CTA de "agendar reunión" debajo de un formulario de
   contacto sería redundante.

   Estilos de formulario propios (no reutiliza .form-arrep de styles.css
   porque ese es del arrepentimiento legal y tiene otro ancho y otra lógica).
   ============================================================================ */

/* --- FORMULARIO ---------------------------------------------------------- */
.ct-formulario{
  background: var(--crema);
  padding: clamp(50px, 8vh, 90px) 0 clamp(40px, 6vh, 60px);
}

.ct-cuerpo{
  max-width: 680px;
}

.ct-intro{
  margin-bottom: clamp(24px, 4vh, 40px);
}
.ct-intro h2{ margin: 0 0 10px; }
.ct-intro p{
  max-width: 50ch;
  color: rgba(5,25,72,.68);
  margin: 0;
}

/* Grilla de campos: dos columnas en escritorio, una en móvil */
.ct-fila{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(16px, 3vw, 28px);
}

.ct-campo{ margin-bottom: 18px; }
.ct-campo-ancho{ grid-column: 1 / -1; }

.ct-campo label{
  display: block;
  font-weight: 700;
  font-size: .9375rem;
  margin-bottom: 6px;
  color: var(--navy);
}

.ct-opcional{
  font-weight: 400;
  color: rgba(5,25,72,.72);   /* .50 daba 3,3:1; minimo 4,5:1 */
}

.form-contacto input,
.form-contacto textarea{
  width: 100%;
  font-family: var(--texto);
  font-size: 1rem;
  padding: 13px 15px;
  border: 1.5px solid var(--linea-cla);
  border-radius: var(--r-chico);
  background: #fff;
  color: var(--navy);
  transition: border-color var(--t-hover) var(--ease-out);
}

.form-contacto input:focus,
.form-contacto textarea:focus{
  border-color: var(--navy);
}
/* El anillo de foco se saca SOLO cuando el foco viene de un clic, nunca
   cuando viene del teclado. Antes decía `outline: none` a secas y anulaba el
   anillo turquesa del sistema justo acá, en la página de conversión: quien
   navega con teclado no tenía forma de saber en qué campo estaba parado.
   El comentario de abajo ya decía que el anillo venía de styles.css — la
   intención estaba escrita, el CSS hacía lo contrario. */
.form-contacto input:focus:not(:focus-visible),
.form-contacto textarea:focus:not(:focus-visible){ outline: none; }

/* El outline accesible de :focus-visible ya está en styles.css (turquesa).
   Lo que hacemos acá es que con clic de mouse (focus sin visible) el borde
   se oscurece suavemente; con tab el outline turquesa aparece encima. */

.form-contacto input::placeholder,
.form-contacto textarea::placeholder{
  color: rgba(5,25,72,.34);
}

.form-contacto textarea{
  min-height: 120px;
  resize: vertical;
}

.form-contacto .btn{
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

.ct-nota{
  margin: 18px 0 0;
  font-size: var(--t--1);
  color: rgba(5,25,72,.72);   /* .55 daba 3,3:1; minimo 4,5:1 */
}

/* --- CANALES ------------------------------------------------------------- */
.ct-canales{
  background: var(--crema-2);
  padding: clamp(44px, 7vh, 72px) 0 clamp(56px, 9vh, 96px);
  border-top: 1px solid var(--linea-cla);
}

.ct-canales h2{
  margin: 0 0 clamp(22px, 3vh, 36px);
}

.ct-lista-canales{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 22px);
}

.ct-canal{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(18px, 3vw, 26px);
  background: #fff;
  border: 1px solid var(--linea-cla);
  border-radius: var(--r-panel);
  text-decoration: none;
  color: var(--navy);
  transition:
    border-color var(--t-hover) var(--ease-out),
    box-shadow   var(--t-hover) var(--ease-out),
    transform    var(--t-press) var(--ease-out);
}
.ct-canal:hover{
  border-color: rgba(5,25,72,.28);
  box-shadow: 0 4px 16px -6px rgba(5,25,72,.10);
}
.ct-canal:active{ transform: scale(.97); }

.ct-canal-icono{
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5,25,72,.06);
  border-radius: var(--r-chico);
  color: var(--navy);
}
.ct-canal-icono svg{
  width: 22px;
  height: 22px;
}

.ct-canal-txt{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ct-canal-txt strong{
  font-size: .9375rem;
  font-weight: 700;
}
.ct-canal-txt span:last-child{
  font-size: var(--t--1);
  color: rgba(5,25,72,.72);   /* .55 daba 3,3:1; minimo 4,5:1 */
}

/* --- RESPONSIVE ---------------------------------------------------------- */
@media (max-width: 900px){
  .ct-lista-canales{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px){
  .ct-fila{
    grid-template-columns: 1fr;
  }
}



/* ============================================================================
   ESTADO DEL FORMULARIO Y TRASPASO DEL DIAGNÓSTICO
   ============================================================================
   El formulario antes usaba mailto: y en celular no hacía nada — ni enviaba
   ni avisaba. Estos dos bloques existen para que eso no pueda volver a pasar:
   siempre hay algo en pantalla diciendo qué ocurrió.
   ============================================================================ */

/* Reconoce lo que eligió en el diagnóstico del inicio. Sin esto, llegar a un
   formulario en blanco después de haber contado el problema se siente como
   que no lo escucharon. */
.ct-viene-de{
  margin: 0 0 22px;
  padding: 14px 18px;
  background: var(--crema-2);
  border-left: 3px solid var(--naranja);
  border-radius: 0 var(--r-chico) var(--r-chico) 0;
  font-size: .9375rem;
  color: rgba(5,25,72,.82);
}
.ct-viene-de b{ color: var(--navy); }

.ct-estado{
  margin: 14px 0 0;
  font-size: .9375rem;
  font-weight: 500;
  min-height: 1.4em;   /* reserva el lugar: el botón no salta al aparecer */
}
.ct-estado:empty{ margin: 0; min-height: 0; }

/* Los tres estados se distinguen por color Y por peso, no solo por color:
   quien no distingue rojo de verde igual ve la diferencia. */
.ct-estado-yendo{ color: rgba(5,25,72,.72); font-weight: 400; }
.ct-estado-ok{
  color: #1B6B3A;      /* verde oscuro: 5.9:1 sobre crema, medido */
  font-weight: 700;
}
.ct-estado-error{
  color: #A32015;      /* rojo oscuro: 6.82:1 sobre crema, medido */
  font-weight: 700;
}
.ct-estado-error a{ color: inherit; }

/* Marca los campos que faltan cuando el envío se frena por validación.
   :user-invalid y no :invalid, para que no se pinten de rojo antes de que la
   persona haya llegado a escribir. */
.form-contacto input:user-invalid,
.form-contacto textarea:user-invalid{
  border-color: #A32015;
}