/* ═══════════════════════════════════════════════════════════════════════════
   PRONTO · VENTANA DE CONTACTO                 capa aditiva · r65 · 2026-08-30
   ───────────────────────────────────────────────────────────────────────────
   El enlace «Contact» abría el programa de correo del visitante, que en un
   teléfono suele ser un cliente sin configurar y en un ordenador de trabajo
   directamente no abre nada: el mensaje se perdía antes de escribirse. Ahora
   abre una ventanita aquí mismo y lo que se escribe entra en GHL.

   Todo cuelga de `html.pvc-on`, que pone el JS. Si el JS no carga, el enlace
   sigue siendo un `mailto:` y funciona como toda la vida.
   ═══════════════════════════════════════════════════════════════════════════ */

#pvContacto{
  position:fixed;inset:0;z-index:2147483200;display:none;
  align-items:center;justify-content:center;padding:20px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Roboto,Arial,sans-serif}
#pvContacto.on{display:flex}
#pvContacto .pvc-bd{
  position:absolute;inset:0;background:rgba(9,9,11,.86);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s ease}
#pvContacto.on .pvc-bd{opacity:1}

#pvContacto .pvc-caja{
  position:relative;z-index:2;width:min(440px,100%);
  max-height:calc(100svh - 40px);overflow-y:auto;
  background:#141416;border:1px solid rgba(255,255,255,.10);border-radius:20px;
  padding:26px 24px 22px;color:#fff;
  box-shadow:0 34px 80px -30px rgba(0,0,0,.9);
  opacity:0;transform:translateY(12px) scale(.985);
  transition:opacity .32s ease,transform .38s cubic-bezier(.16,1,.3,1)}
#pvContacto.on .pvc-caja{opacity:1;transform:none}

#pvContacto .pvc-x{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border:0;
  border-radius:50%;background:rgba(255,255,255,.07);color:#fff;cursor:pointer;
  display:grid;place-items:center;font-size:19px;line-height:1;
  transition:background .2s}
#pvContacto .pvc-x:hover{background:rgba(255,255,255,.16)}

#pvContacto .pvc-t{font-size:1.28rem;font-weight:900;letter-spacing:-.02em;margin:0 0 6px}
#pvContacto .pvc-s{font-size:.88rem;color:rgba(255,255,255,.52);line-height:1.6;margin:0 0 20px}

#pvContacto label{
  display:block;font-size:.68rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.44);margin:14px 0 6px}
#pvContacto label:first-of-type{margin-top:0}
#pvContacto input,#pvContacto textarea{
  width:100%;padding:11px 13px;border-radius:10px;font:inherit;font-size:.95rem;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.12);
  color:#fff;outline:none;transition:border-color .2s,background .2s}
#pvContacto input:focus,#pvContacto textarea:focus{
  border-color:#F97316;background:rgba(255,255,255,.07)}
#pvContacto textarea{min-height:104px;resize:vertical;line-height:1.55}
#pvContacto input::placeholder,#pvContacto textarea::placeholder{color:rgba(255,255,255,.28)}

#pvContacto .pvc-enviar{
  width:100%;margin-top:20px;padding:13px;border:0;border-radius:999px;
  background:linear-gradient(135deg,#FB923C,#EA580C);color:#fff;cursor:pointer;
  font:800 .92rem/1 inherit;letter-spacing:.03em;
  transition:transform .16s,box-shadow .22s,opacity .2s}
#pvContacto .pvc-enviar:hover{box-shadow:0 12px 30px -10px rgba(234,88,12,.75)}
#pvContacto .pvc-enviar:disabled{opacity:.6;cursor:default;transform:none}

#pvContacto .pvc-pie{
  font-size:.72rem;color:rgba(255,255,255,.34);margin:14px 0 0;line-height:1.6;text-align:center}
#pvContacto .pvc-pie a{color:rgba(255,255,255,.55);text-decoration:underline}

/* aviso de error, solo cuando hace falta */
#pvContacto .pvc-mal{
  display:none;margin-top:12px;padding:10px 12px;border-radius:10px;
  background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);
  font-size:.82rem;color:#fecaca;line-height:1.5}
#pvContacto.es-malo .pvc-mal{display:block}

/* estado «enviado» */
#pvContacto .pvc-ok{display:none;text-align:center;padding:8px 0 4px}
#pvContacto.es-ok .pvc-ok{display:block}
#pvContacto.es-ok .pvc-form,#pvContacto.es-ok .pvc-s{display:none}
#pvContacto .pvc-tic{
  width:54px;height:54px;margin:0 auto 14px;border-radius:50%;
  background:linear-gradient(135deg,#10B981,#059669);display:grid;place-items:center}
#pvContacto .pvc-tic svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}

@media(max-width:520px){
  #pvContacto{padding:14px}
  #pvContacto .pvc-caja{padding:22px 18px 18px;border-radius:18px}
  #pvContacto .pvc-t{font-size:1.15rem}
  /* En iOS, un input de menos de 16px hace que Safari haga zoom al enfocarlo
     y el formulario se sale de la pantalla. */
  #pvContacto input,#pvContacto textarea{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  #pvContacto .pvc-bd,#pvContacto .pvc-caja{transition:none}
}