/* ═══════════════════════════════════════════
   Modal de Contacto (compartido)
   Extraído de resources/css/main.css para las páginas self-contained
   (cuenta / qr-studio) que no cargan main.css vía Vite. Usa las mismas
   variables (--red, --ash, --display, --mono, …) que esas vistas definen
   en su :root inline.
═══════════════════════════════════════════ */
.dt-modal{
  position:fixed;inset:0;z-index:300;
  background:rgba(8,5,5,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:none;align-items:center;justify-content:center;
  padding:24px 16px;
  opacity:0;transition:opacity .22s ease;
}
.dt-modal.open{display:flex;opacity:1}
.dt-modal-box{
  background:#fff;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  position:relative;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.5), 0 0 0 1px rgba(26,26,26,.08);
  transform:scale(.97);transition:transform .3s cubic-bezier(.2,.9,.3,1.1);
  scrollbar-width:thin;
  scrollbar-color:rgba(179,37,44,.3) transparent;
}
.dt-modal.open .dt-modal-box{transform:scale(1)}
.contact-box{border-radius:20px;max-width:520px}
.dt-modal-close{
  position:absolute;top:18px;right:18px;z-index:2;
  width:36px;height:36px;border-radius:50%;
  background:#f5f5f5;border:1px solid rgba(26,26,26,.12);
  color:#1a1a1a;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-family:var(--mono);font-size:15px;
  transition:background .2s, color .2s, transform .15s;
}
.dt-modal-close:hover{background:var(--red);color:#fff;border-color:var(--red);transform:rotate(90deg)}

/* Header */
.co-header{padding:32px 32px 20px}
.contact-box .co-header{border-left:6px solid var(--red);padding-left:24px;background:linear-gradient(90deg,rgba(179,37,44,.03),transparent)}
.co-badge{
  border-radius:10px;
  display:inline-block;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);
  border:1px solid var(--red);padding:4px 12px;margin-bottom:14px;
}
.co-title{
  font-family:var(--display);font-weight:800;font-size:clamp(22px,4vw,30px);
  letter-spacing:-.02em;margin:0 0 10px;line-height:1.1;
}
.co-title em{font-style:normal;color:var(--red)}
.co-subtitle{font-size:14px;color:var(--ash);margin:0;line-height:1.5}
.co-divider{height:1px;background:rgba(26,26,26,.1);margin:0 32px}

/* Form */
.co-form{padding:20px 32px 28px;display:flex;flex-direction:column;gap:14px}
.co-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.co-field-row{grid-template-columns:1fr}}
.co-field{display:flex;flex-direction:column;gap:6px}
.co-field label{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--graphite);
}
.co-optional{color:var(--ash-2);font-style:normal}
.co-field input,
.co-field textarea{
  border:1px solid rgba(26,26,26,.18);
  padding:11px 14px;
  font-family:var(--sans);font-size:14px;color:var(--ink);
  background:#fff;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
  border-radius:10px;
  resize:vertical;
}
.co-field input:focus,
.co-field textarea:focus{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(179,37,44,.1);
}
.co-field input::placeholder,
.co-field textarea::placeholder{color:var(--ash-2)}

.contact-send-note{
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--graphite);
  border:1px dashed rgba(26,26,26,.18);
  padding:8px 10px;background:rgba(247,241,227,.4);
  line-height:1.5;
}

/* Submit button */
.co-submit-btn{
  border-radius:10px;
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:16px 22px;
  background:var(--red);color:#fff;
  border:none;cursor:pointer;
  font-family:var(--mono);font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;
  transition:background .2s, transform .1s;
  margin-top:4px;gap:10px;
  box-shadow:0 6px 20px rgba(179,37,44,.18);
}
.co-submit-btn:hover{background:var(--red-deep);transform:translateY(-3px)}
.co-submit-btn:active{transform:scale(.99)}
.co-submit-price{
  font-family:var(--display);font-size:18px;font-weight:800;
  letter-spacing:-.01em;opacity:.9;
}
.co-legal{
  font-size:11px;color:var(--ash);text-align:center;line-height:1.5;
}
.co-legal a{color:var(--red);text-decoration:underline}

/* Success state */
.co-success{
  padding:48px 32px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.co-success-icon{
  width:64px;height:64px;border-radius:50%;
  background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:800;
  transform:scale(.8);opacity:0;transition:transform .32s cubic-bezier(.2,.9,.3,1),opacity .28s;
}
.co-success.visible .co-success-icon{
  transform:scale(1);opacity:1;box-shadow:0 10px 30px rgba(179,37,44,.18);
}
.co-success h4{
  font-family:var(--display);font-size:24px;font-weight:800;
  letter-spacing:-.02em;margin:0;
}
.co-success p{font-size:14px;color:var(--ash);margin:0;line-height:1.6;max-width:380px}

/* Mobile */
@media (max-width:720px){
  .dt-modal{padding:12px}
  .dt-modal-box{max-height:calc(100vh - 40px)}
}