/* PURE — /contacto, construida contra docs/referencia/03-contacto.webp.
   Reusa el sistema de la home: bandas, arco, marco, rotulo. Aqui solo vive
   lo que esta pagina tiene y ninguna otra: la rejilla de entrada, la
   tarjeta del formulario y el acordeon.

   La spec decia que las fotografias generadas no iban. Eso quedo derogado
   por Wilmar el 2026-09-21 ("generalas... realistas"): el retrato del arco
   es una imagen generada de personas anonimas, que es ilustracion. Lo que
   sigue prohibido es una imagen generada que haga de Claudia o Maria
   Ximena, de un testimonio, o de un evento de Pure que ocurrio. */

.banda--rosa{background:var(--rosa);color:var(--tinta)}

/* Salta-al-contenido: fuera de pantalla hasta que recibe el foco. Iba en
   atributos `onfocus` inline en index.html, que no sobrevive a una CSP. */
.saltar{position:absolute;left:-9999px;top:0;z-index:60}
.saltar:focus{left:12px;top:12px}

.titular{
  font-family:var(--script);
  font-weight:400;
  font-size:clamp(2.3rem,5.4vw,4.1rem);
  line-height:1.12;
  margin:14px 0 0;
}
.titular.centrado{text-align:center;margin-inline:auto}

/* ——— 01 · Entrada ——————————————————————————————————————— */

.entrada-contacto{padding-block:clamp(38px,7vh,86px) clamp(56px,9vh,110px)}
.rejilla-entrada{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(26px,5vw,72px);
  align-items:center;
}
/* El retrato es alto: en la maqueta ocupa media pagina. Se le pone tope por
   altura y no por ancho, si no en pantallas anchas empuja el titular fuera. */
.retrato{max-height:clamp(320px,58vh,560px);aspect-ratio:3/4;margin-inline:auto;width:100%}
.retrato img{width:100%;height:100%;object-fit:cover;display:block}

/* ——— 02 · El formulario ————————————————————————————————— */

.banda--crema{padding-block:clamp(48px,8vh,100px)}
.rejilla-forma{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(30px,5vw,70px);
  align-items:center;
}
.columna-voz .entrada{max-width:32ch}

.whatsapp{
  display:inline-flex;align-items:center;gap:12px;
  margin-top:clamp(22px,3.5vh,36px);
  color:var(--tinta);text-decoration:none;font-weight:600;
  border-bottom:1.5px solid transparent;
}
.whatsapp svg{color:var(--cian);flex:none}
/* La flecha va DENTRO del texto, no como hermana suya. Como hermana era un
   item mas del flex: cuando la frase saltaba a dos lineas, la flecha se
   quedaba sola al otro extremo del bloque, apuntando a nada. */
.whatsapp span{border-bottom:1.5px solid currentColor;padding-bottom:1px}
.whatsapp span::after{
  content:" →";color:var(--cian);
  display:inline-block;
  transition:transform 180ms cubic-bezier(.32,.72,0,1);
}
.whatsapp:hover span::after,.whatsapp:focus-visible span::after{transform:translateX(4px)}

/* La direccion escrita, debajo de WhatsApp. Es la salida de quien pulsa el
   boton y no ve abrirse nada, asi que se lee sin interactuar con nada: en
   texto, seleccionable, y ademas enlazada. */
.directo{margin:14px 0 0;font-size:.88rem;opacity:.72}
.directo a{color:var(--tinta);font-weight:600}

.tarjeta-forma{
  background:var(--papel);
  border-radius:22px;
  padding:clamp(22px,3vw,38px);
  box-shadow:0 1px 2px #21264f0a, 0 14px 40px -18px #21264f2e;
}

.campo{display:block;margin:0 0 16px}
.campo label{display:block;font-size:.88rem;font-weight:600;margin-bottom:6px}
.opcional{font-weight:300;opacity:.6}
/* Etiqueta encima, nunca dentro: un placeholder que hace de etiqueta
   desaparece al escribir y deja a la persona sin saber que puso. Es un
   fallo de accesibilidad, no un estilo. */
.campo input[type=text],
.campo input[type=email],
.campo select,
.campo textarea{
  width:100%;
  font:inherit;font-size:.96rem;
  color:var(--tinta);
  background:#fff;
  border:1.5px solid #21264f24;
  border-radius:12px;
  padding:12px 14px;
  min-height:46px;
  transition:border-color 140ms ease, box-shadow 140ms ease;
}
.campo textarea{resize:vertical;min-height:112px;line-height:1.6}
.campo select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2310b6de' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;
  padding-right:38px;
}
.campo :is(input,select,textarea):focus{
  border-color:var(--cian);
  box-shadow:0 0 0 3px #10b6de26;
  outline:none;
}
.campo :is(input,select,textarea)[aria-invalid="true"]{border-color:var(--c-rose)}
.ayuda{display:block;font-size:.8rem;opacity:.62;margin-top:5px}
/* Rosa sobre el papel da 2.69:1 y AA pide 4.5:1 — y este aviso aparece ahora
   al salir del campo, no solo al pulsar enviar, asi que se lee mucho mas. El
   rosa sigue puesto donde se ve sin leer: en el borde del propio campo
   (`[aria-invalid]`, arriba). */
.error{display:block;font-size:.82rem;color:var(--tinta);margin-top:5px;font-weight:600}

.casilla{display:flex;align-items:flex-start;gap:10px;margin-top:20px}
.casilla input{flex:none;width:19px;height:19px;margin-top:2px;accent-color:var(--coral)}
.casilla label{font-weight:300;font-size:.9rem;margin:0}
.casilla a{color:var(--tinta)}

.despues{font-size:.82rem;line-height:1.55;opacity:.68;margin:18px 0 20px}
.cta.ancho{width:100%;text-align:center}

/* El aviso aparece justo debajo del boton que lo provoca, no arriba de la
   pagina: el sitio que lo dice esta donde se mira al pulsar. Entra subiendo
   4 px con la misma curva que el resto de la pagina; es el unico movimiento
   que tiene, y bajo `reduce` se queda solo con la opacidad. */
/* El aviso aparece justo debajo del boton que lo provoca, no arriba de la
   pagina: el sitio que lo dice esta donde se mira al pulsar. Entra subiendo
   4 px con la misma curva que el resto de la pagina; es el unico movimiento
   que tiene, y bajo `reduce` se queda solo con la opacidad.

   El color va en la barra, no en la letra. El aviso era menta (#79bdae) o
   rosa (#f17575) sobre el papel de la tarjeta: 2.09:1 y 2.69:1 medidos,
   cuando AA pide 4.5:1. Y ESTE es el texto que dice si el mensaje llego, y
   que hacer cuando no llego — o sea, el que mas gente necesita poder leer. Con la tinta sobre el papel son
   13.93:1, y el menta y el rosa siguen separando los dos casos como
   superficie. Es la salida 2 de las tres que propone F7 (reservar el color
   para superficies y no para texto), aplicada a los dos colores de estado,
   que no son el coral ni el cian de la marca: no se toca ningun token ni se
   inventa ningun color, y F7 sigue sin decidirse. */
.estado{
  margin:14px 0 0;font-size:.9rem;font-weight:600;line-height:1.5;
  color:var(--tinta);
  padding-left:12px;border-left:3px solid transparent;
  /* `contacto.js` acerca este aviso a la vista al aparecer. Sin margen, el
     navegador lo deja pegado al borde de abajo —y por redondeo de subpixel,
     medio pixel POR DEBAJO del borde, sin querer moverse mas—. Con esto entra
     entero y con aire. */
  scroll-margin-bottom:24px;
  opacity:0;transform:translateY(4px);
  transition:opacity 200ms ease, transform 200ms cubic-bezier(.32,.72,0,1);
}
.estado.visible{opacity:1;transform:none}
.estado.ok{border-left-color:var(--c-mint)}
.estado.mal{border-left-color:var(--c-rose)}
/* Mientras el envio esta en el aire no se sabe todavia cual de los dos casos
   es, y la barra no lo insinua: la tinta del texto es la misma. */
.estado.espera{border-left-color:var(--tinta)}

/* ——— 03 · Preguntas ————————————————————————————————————— */

.banda--rosa{padding-block:clamp(44px,7vh,92px)}
.preguntas{max-width:820px;margin:clamp(26px,4vh,44px) auto 0;display:grid;gap:12px}
.preguntas details{
  background:#fffffff2;
  border-radius:16px;
  padding:2px 20px;
  transition:background 160ms ease;
}
.preguntas summary{
  list-style:none;
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;
  font-weight:600;font-size:1rem;
  min-height:44px;
}
.preguntas summary::-webkit-details-marker{display:none}
/* El signo lo dibuja el CSS y gira al abrir: un "+" que se vuelve "×" dice
   que la accion es reversible sin necesitar una segunda etiqueta. */
.preguntas summary::after{
  content:"";flex:none;width:15px;height:15px;
  background:
    linear-gradient(var(--cian),var(--cian)) center/100% 1.8px no-repeat,
    linear-gradient(var(--cian),var(--cian)) center/1.8px 100% no-repeat;
  transition:transform 220ms cubic-bezier(.32,.72,0,1);
}
.preguntas details[open] summary::after{transform:rotate(135deg)}
.preguntas details p{margin:0 0 18px;font-size:.95rem;line-height:1.65;opacity:.82;max-width:64ch}

/* ——— 04 · Cierre ———————————————————————————————————————— */

/* Mas alta que las 34vh de antes: a 375px de ancho la banda quedaba en
   276px y el recorte `cover` del video se comia las caras, que es lo que
   esta banda tiene que mostrar (Wilmar, 2026-09-22: "que esta seccion salga
   mas grande para que se vean las caras del video"). */
.cierre{min-height:clamp(380px,56vh,560px)}
.cierre::after{background:#21264f80}
.firma{
  font-family:var(--script);
  font-size:clamp(1.9rem,4.2vw,3.1rem);
  line-height:1.2;
  text-align:center;
  color:#fff;
}

/* ——— Telefono —————————————————————————————————————————— */

@media(max-width:820px){
  .rejilla-entrada,.rejilla-forma{grid-template-columns:1fr}
  /* El retrato baja del titular, no al reves: la frase es lo que tiene que
     leerse primero. En la maqueta van lado a lado; apilados, el orden de
     lectura manda sobre la composicion. */
  .retrato{max-height:clamp(260px,42vh,420px);order:2}
  .columna-voz .entrada{max-width:none}
}

@media(prefers-reduced-motion:reduce){
  .whatsapp span::after,.preguntas summary::after{transition:none}
  /* El aviso sigue apareciendo — enterarse de que falta un campo no es
     decoracion. Lo que se retira es el desplazamiento: queda el fundido. */
  .estado{transform:none;transition:opacity 200ms ease}
}