/* ═══════════════════════════════════════════════════════
   Ensō Universe · assets/contacto.css · el formulario de contacto
   Lo cargan la portada (sección #contacto) y /contacto/, después de
   style.css: usa sus colores (--eg, --linen, --white…). Mobile-first.
   Breakpoints: 480px · 768px · 900px · 1100px
═══════════════════════════════════════════════════════ */

/* El enlace de la cabecera, hermano de «Iniciar sesión». */
.header-contacto {
  font-family:'Jost', sans-serif;
  font-size:10px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--eg); text-decoration:none;
  padding:9px 2px; white-space:nowrap;
  border-bottom:1.5px solid transparent;
  transition:border-color .25s;
}
.header-contacto:hover,
.header-contacto:focus-visible { border-color:var(--eg); outline:none; }

/* ─── La sección ─── */
.contacto {
  position:relative;
  background:var(--linen);
  padding:80px 20px;
  scroll-margin-top:calc(40px + env(safe-area-inset-top));   /* la cabecera fija no tapa el título al llegar desde el enlace */
}
.contacto-inner { max-width:1100px; margin:0 auto; display:grid; gap:40px; }
.contacto-intro .section-p { max-width:460px; }
.contacto-directo { margin-top:4px; font-size:13px; letter-spacing:.02em; color:rgba(44,41,37,.58); }
.contacto-directo a {
  color:var(--eg); text-decoration:none;
  border-bottom:1px solid rgba(74,107,88,.35); padding-bottom:1px;
  transition:border-color .25s;
}
.contacto-directo a:hover,
.contacto-directo a:focus-visible { border-color:var(--eg); outline:none; }

/* La tarjeta: papel claro sobre el lino, una sombra que apenas se ve. */
.contacto-caja {
  position:relative;
  background:var(--white);
  border:1px solid rgba(221,214,200,.9);
  padding:32px 22px 26px;
  box-shadow:0 34px 60px -44px rgba(28,42,34,.4);
}
.contacto-form { display:grid; gap:28px; transition:opacity .45s ease, transform .45s ease; }
.contacto-caja.se-envia .contacto-form { opacity:0; transform:translateY(-6px); }
.contacto-form[hidden] { display:none; }
.contacto-campos { display:grid; gap:28px; }

/* ─── Los campos: una sola línea fina, que se dibuja al escribir ─── */
.contacto-campo { display:grid; gap:6px; min-width:0; }
.contacto-etiqueta {
  font-size:10px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--eg);
}
.contacto-etiqueta small {
  margin-left:6px; font-size:inherit; font-weight:400;
  letter-spacing:inherit; color:rgba(44,41,37,.4);
}
.contacto-linea { position:relative; display:block; }
.contacto-linea::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--eg);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .55s cubic-bezier(.22,.61,.36,1), background-color .3s;
}
.contacto-linea:focus-within::after { transform:scaleX(1); }
.contacto-campo input,
.contacto-campo textarea {
  display:block; width:100%;
  font-family:'Jost', sans-serif; font-size:16px; font-weight:300;
  color:var(--charcoal); background:transparent;
  border:0; border-bottom:1px solid rgba(44,41,37,.2); border-radius:0;
  padding:8px 0 10px; margin:0;
  outline:none; -webkit-appearance:none; appearance:none;
}
.contacto-campo textarea { min-height:132px; resize:vertical; line-height:1.7; }
.contacto-campo input::placeholder,
.contacto-campo textarea::placeholder { color:rgba(44,41,37,.32); }

/* ─── El tema: cuatro píldoras que se tocan ─── */
.contacto-temas { border:0; padding:0; margin:0; min-width:0; }
.contacto-temas legend { padding:0; margin-bottom:12px; }
.contacto-pildoras { display:flex; flex-wrap:wrap; gap:8px; }
.contacto-pildora { position:relative; display:inline-flex; }
.contacto-pildora input {
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:pointer;
}
.contacto-pildora span {
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px;
  border:1px solid rgba(44,41,37,.18); border-radius:999px;
  font-size:13px; letter-spacing:.04em; color:rgba(44,41,37,.75);
  transition:background-color .3s, border-color .3s, color .3s;
}
.contacto-pildora input:checked + span { background:var(--eg-deep); border-color:var(--eg-deep); color:var(--white); }
.contacto-pildora input:focus-visible + span { outline:2px solid var(--eg-mid); outline-offset:2px; }
@media (hover:hover) {
  .contacto-pildora:hover input:not(:checked) + span { border-color:var(--eg); color:var(--eg); }
}

/* ─── La casilla de privacidad ─── */
.contacto-consent {
  display:flex; align-items:flex-start; gap:12px;
  min-height:44px; cursor:pointer;
  font-size:12.5px; line-height:1.65; color:rgba(44,41,37,.62);
}
.contacto-consent input {
  flex-shrink:0; width:18px; height:18px; margin:2px 0 0;
  accent-color:var(--eg); cursor:pointer;
}
.contacto-consent a { color:var(--eg); }

/* ─── Los avisos ─── */
.contacto-error { font-size:12px; line-height:1.5; color:var(--terra); }
.contacto-error:empty { display:none; }
.contacto-campo.es-error .contacto-linea::after { transform:scaleX(1); background:var(--terra); }
.contacto-temas.es-error .contacto-pildora span { border-color:rgba(139,107,74,.55); }
.contacto-estado { margin-top:12px; font-size:13px; line-height:1.6; color:var(--terra); }
.contacto-estado:empty { display:none; }

/* ─── El botón ─── */
.contacto-boton {
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  width:100%; min-height:54px; padding:0 34px;
  font-family:'Jost', sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--white); background:var(--eg-deep);
  border:0; border-radius:0; cursor:pointer;
  transition:background-color .3s, opacity .3s;
}
.contacto-boton__flecha { display:inline-block; transition:transform .35s cubic-bezier(.22,.61,.36,1); }
.contacto-boton:hover { background:var(--eg-dark); }
.contacto-boton:hover .contacto-boton__flecha { transform:translateX(4px); }
.contacto-boton:focus-visible { outline:2px solid var(--eg-mid); outline-offset:3px; }
.contacto-boton[aria-busy="true"] { opacity:.7; cursor:progress; }

/* ─── La información básica de protección de datos ─── */
.contacto-rgpd {
  padding-top:18px; border-top:1px solid rgba(221,214,200,.85);
  font-size:11px; line-height:1.75; color:rgba(44,41,37,.5);
}
.contacto-rgpd a { color:inherit; }

/* El campo trampa: fuera de la vista y del teclado; solo lo rellena un robot. */
.contacto-trampa { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ─── «Mensaje recibido»: el ensō se dibuja ─── */
.contacto-gracias {
  display:grid; justify-items:center; gap:14px;
  padding:34px 6px 20px; text-align:center; outline:none;
}
.contacto-gracias[hidden] { display:none; }
.contacto-enso { width:84px; height:84px; overflow:visible; }
.contacto-enso path {
  fill:none; stroke:var(--eg); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
}
.contacto-caja.es-enviado .contacto-enso path { animation:contacto-traza 1.8s .15s cubic-bezier(.45,0,.2,1) forwards; }
@keyframes contacto-traza { to { stroke-dashoffset:0; } }
.contacto-gracias__t {
  font-family:'Cormorant Garamond', serif; font-weight:300;
  font-size:32px; line-height:1.2; color:var(--charcoal);
}
.contacto-gracias__p { max-width:360px; font-size:15px; line-height:1.8; color:rgba(44,41,37,.68); }

/* ─── La página propia, /contacto/ ─── */
.contacto.contacto--pagina {
  min-height:100vh;
  padding-top:calc(120px + env(safe-area-inset-top));
  background:var(--sand);
}

@media (min-width:480px) {
  .contacto-caja { padding:38px 32px 30px; }
  .contacto-boton { width:auto; }
}
@media (min-width:768px) {
  .contacto { padding:100px 40px; }
  .contacto-campos { grid-template-columns:1fr 1fr; column-gap:28px; }
  .contacto-campos > .contacto-campo--ancho,
  .contacto-campos > .contacto-temas { grid-column:1 / -1; }
}
@media (min-width:900px) {
  .contacto-inner { grid-template-columns:5fr 7fr; gap:72px; align-items:start; }
  .contacto-intro { position:sticky; top:120px; }
  .contacto-caja { padding:48px 46px 38px; }
  .contacto.contacto--pagina { padding-top:150px; }
}
@media (min-width:1100px) {
  .contacto { padding:120px 40px; }
  .contacto-inner { gap:96px; }
}

@media (prefers-reduced-motion: reduce) {
  .contacto-form, .contacto-linea::after, .contacto-boton__flecha { transition:none; }
  .contacto-enso path { stroke-dashoffset:0; }
  .contacto-caja.es-enviado .contacto-enso path { animation:none; }
}