/* Disparadores del formulario de soporte.
   Son <button> para que respondan a teclado y lectores de pantalla, pero
   deben leerse como un enlace: sin la caja gris que pinta el navegador. */
.link-soporte{
  all: unset;
  cursor: pointer;
  color: var(--huum);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0, 255, 164, .4);
  transition: text-decoration-color .15s ease, opacity .15s ease;
}
.link-soporte:hover{ text-decoration-color: var(--huum); }
.link-soporte:focus-visible{ outline: 2px solid var(--huum); outline-offset: 3px; border-radius: 3px; }

/* ═══ DIÁLOGO DE SOPORTE ═════════════════════════════════════════════════════
   "¿Problemas con tu compra?" abre este formulario y no WhatsApp: quien tiene
   un problema con un cobro necesita dejar constancia con su número de orden,
   no empezar una conversación. Usa <dialog> nativo — sin librerías, con
   cierre por Esc y fondo bloqueado gratis.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Centrado en la pantalla: <dialog> centra solo con showModal, pero el
   margen automático se pierde en cuanto algo toca el layout, así que se fija. */
.dlg{width:min(560px,calc(100vw - 32px));max-height:88vh;padding:0;margin:auto;
  border:1px solid var(--t500);border-radius:20px;
  background:linear-gradient(150deg,#0c110e,#080808);color:var(--hueso);
  overflow:auto;box-shadow:0 30px 90px rgba(0,0,0,.7)}
.dlg:modal{position:fixed;inset:0}
.dlg::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.dlg[open]{animation:dlgEntra .26s cubic-bezier(.16,1,.3,1)}
@keyframes dlgEntra{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.dlg[open]{animation:none}}
.dlg-x{position:sticky;top:0;display:flex;justify-content:flex-end;padding:12px 12px 0;z-index:2}
.dlg-x button{width:34px;height:34px;border-radius:50%;border:none;background:var(--t700);
  color:var(--tenue);font-size:19px;line-height:1;cursor:pointer;transition:.15s}
.dlg-x button:hover{background:var(--t500);color:#fff}
.dlg-in{padding:4px 26px 28px}
@media(min-width:600px){.dlg-in{padding:4px 32px 32px}}
.dlg h2{font-family:var(--disp);font-weight:800;font-size:1.5rem;letter-spacing:-.03em;
  font-variation-settings:'wdth' 86}
.dlg-sub{font-size:13.5px;line-height:1.65;color:var(--tenue);margin-top:9px}
.dlg-form{margin-top:22px}
.dlg-form label{display:block;margin-bottom:13px}
.dlg-form label span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tenue);margin-bottom:7px}
.dlg-form label span i{font-style:normal;text-transform:none;letter-spacing:0;opacity:.6;font-weight:400}
.dlg-form input,.dlg-form select,.dlg-form textarea{width:100%;background:var(--negro);
  border:1px solid var(--t500);border-radius:11px;padding:12px 13px;font-size:13.5px;
  color:var(--hueso);font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s;resize:vertical}
.dlg-form input:focus,.dlg-form select:focus,.dlg-form textarea:focus{
  border-color:var(--huum);box-shadow:0 0 0 3px rgba(0,255,164,.12)}
.dlg-form ::placeholder{color:var(--tenue)}
.dlg-2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:520px){.dlg-2{grid-template-columns:1fr;gap:0}}
.dlg-enviar{width:100%;background:var(--huum);color:#000;border:none;border-radius:12px;padding:14px;
  font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s;margin-top:6px}
.dlg-enviar:hover{transform:translateY(-1px);box-shadow:0 9px 26px rgba(0,255,164,.28)}
.dlg-nota{text-align:center;font-size:10.5px;color:var(--tenue);margin-top:10px}
.dlg-ok{text-align:center;padding:26px 0 8px}
.dlg-tic{width:52px;height:52px;margin:0 auto 16px;border-radius:50%;background:rgba(0,255,164,.14);
  color:var(--huum);display:grid;place-items:center;font-size:24px}
.dlg-ok h3{font-family:var(--disp);font-weight:800;font-size:1.4rem;font-variation-settings:'wdth' 86}
.dlg-ok p{font-size:13.5px;color:var(--tenue);margin-top:9px;margin-bottom:20px}