/* =========================================================================
   Mundoxpress · Modal de solicitudes bilingue
   Vanilla CSS. Sin dependencias. Todo el texto vive en mx-contact-modal.js
   ========================================================================= */

:root{
  /* Tokens de marca — no improvisar fuera de esta lista */
  --mx-ink:    #071523;  /* fondo profundo de pagina */
  --mx-panel:  #0E2438;  /* panel del modal */
  --mx-line:   #1D3A55;  /* bordes y separadores */
  --mx-paper:  #F2F4F7;  /* texto principal */
  --mx-mute:   #8FA6BC;  /* texto secundario y placeholders */
  --mx-gold:   #C9A227;  /* acento: foco, chips activos, boton de envio */
  --mx-wa:     #25D366;  /* exclusivo de la tarjeta de WhatsApp */

  /* Unico color de estado derivado: el error necesita leerse sin depender
     del borde rojo. Rojo claro para mantener AA sobre --mx-panel (5.8:1). */
  --mx-alert:  #F4796B;

  /* Tipografia: display condensada pesada para titulares,
     sans neutra para formulario y cuerpo. Nunca la misma familia. */
  --mx-font-display: 'Barlow Condensed', 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --mx-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --mx-radius: 22px;
  --mx-t: 250ms;
}

/* ---------- Boton flotante persistente ---------- */
.mx-fab{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:9998;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px;
  border:0; border-radius:999px;
  background:var(--mx-gold); color:var(--mx-ink);
  font-family:var(--mx-font-body); font-weight:700; font-size:15px; letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(7,21,35,.45), 0 2px 8px rgba(7,21,35,.3);
  transition:transform var(--mx-t) ease, box-shadow var(--mx-t) ease, opacity var(--mx-t) ease;
}
.mx-fab:hover{ transform:translateX(-50%) translateY(-2px); box-shadow:0 16px 38px rgba(7,21,35,.5); }
/* Se aparta mientras el comparador obra/render esta en pantalla: ambos
   compiten por el mismo centro-abajo y el tirador queda tapado si no. */
.mx-fab.is-yielding{ opacity:0; pointer-events:none; transform:translateX(-50%) translateY(12px); }
.mx-fab svg{ width:18px; height:18px; flex:none; }

/* ---------- Overlay ---------- */
.mx-overlay{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px;
  /* Scrim translucido, nunca negro solido: el panel flota sobre la pagina */
  background:rgba(7,21,35,.62);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity var(--mx-t) ease;
}
.mx-overlay[hidden]{ display:none; }
.mx-overlay.is-open{ opacity:1; }

/* ---------- Panel ---------- */
.mx-panel{
  position:relative;
  width:min(520px, 100%);
  max-height:min(88vh, 780px);
  display:flex; flex-direction:column;
  border-radius:var(--mx-radius);
  border:1px solid var(--mx-line);
  /* Translucido + blur de fondo 18px */
  background:rgba(14,36,56,.86);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  backdrop-filter:blur(18px) saturate(120%);
  box-shadow:0 40px 90px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.35);
  color:var(--mx-paper);
  font-family:var(--mx-font-body);
  overflow:hidden;
  transform:translateY(14px) scale(.985);
  opacity:0;
  transition:transform var(--mx-t) cubic-bezier(.2,.7,.3,1), opacity var(--mx-t) ease;
}
.mx-overlay.is-open .mx-panel{ transform:none; opacity:1; }

/* Vistas: compuerta de idioma / contacto / exito */
.mx-view{ display:none; flex-direction:column; min-height:0; flex:1; }
.mx-view.is-active{ display:flex; }
.mx-view.is-leaving{ opacity:0; transform:translateY(-8px); }
.mx-view.is-entering{ animation:mx-enter var(--mx-t) cubic-bezier(.2,.7,.3,1) both; }
@keyframes mx-enter{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

/* ---------- Cabecera del panel ---------- */
.mx-head{
  display:flex; align-items:center; gap:12px;
  padding:18px 20px 0 20px;
}
.mx-logo{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mx-font-display); font-weight:800; text-transform:uppercase;
  font-size:17px; letter-spacing:.06em; line-height:1; color:var(--mx-paper);
}
.mx-logo .mx-logo-mark{
  width:22px; height:22px; border-radius:6px; flex:none;
  background:var(--mx-gold); color:var(--mx-ink);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800;
}
.mx-head-tools{ margin-left:auto; display:flex; align-items:center; gap:8px; }

/* Conmutador ES | EN discreto */
.mx-langswitch{
  display:inline-flex; align-items:center;
  border:1px solid var(--mx-line); border-radius:999px; overflow:hidden;
}
.mx-langswitch button{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font-family:var(--mx-font-body); font-size:11px; font-weight:700; letter-spacing:.08em;
  color:var(--mx-mute); padding:5px 10px; line-height:1;
  transition:color var(--mx-t) ease, background var(--mx-t) ease;
}
.mx-langswitch button + button{ border-left:1px solid var(--mx-line); }
.mx-langswitch button[aria-pressed="true"]{ color:var(--mx-ink); background:var(--mx-gold); }

.mx-close{
  appearance:none; border:1px solid var(--mx-line); background:transparent;
  width:30px; height:30px; border-radius:50%; cursor:pointer;
  color:var(--mx-mute); display:inline-flex; align-items:center; justify-content:center;
  transition:color var(--mx-t) ease, border-color var(--mx-t) ease;
}
.mx-close:hover{ color:var(--mx-paper); border-color:var(--mx-mute); }
.mx-close svg{ width:14px; height:14px; }

/* ---------- Compuerta de idioma (elemento firma) ---------- */
.mx-gate-wrap{
  padding:34px 20px 24px;
  display:flex; flex-direction:column; justify-content:center; gap:22px;
}
.mx-gate-label{
  text-align:center; color:var(--mx-mute);
  font-size:13px; letter-spacing:.04em; margin:0;
}
/* Dos botones a ancho completo divididos por una linea fina: interruptor fisico */
.mx-gate{
  display:grid; grid-template-columns:1fr 1px 1fr;
  border:1px solid var(--mx-line); border-radius:16px; overflow:hidden;
  background:rgba(7,21,35,.35);
}
.mx-gate-sep{ background:var(--mx-line); }
.mx-gate-btn{
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding:30px 12px;
  font-family:var(--mx-font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(20px,5.5vw,26px); letter-spacing:.07em; line-height:1;
  color:var(--mx-paper);
  transition:background var(--mx-t) ease, color var(--mx-t) ease;
}
.mx-gate-btn:hover{ background:rgba(201,162,39,.10); }
.mx-gate-btn[data-suggested="true"]{ background:rgba(201,162,39,.14); color:var(--mx-gold); }
.mx-gate-btn small{
  display:block; margin-top:8px;
  font-family:var(--mx-font-body); font-weight:500; font-size:11px;
  letter-spacing:.1em; color:var(--mx-mute); text-transform:uppercase;
}

/* ---------- Cuerpo desplazable ---------- */
.mx-body{
  flex:1; min-height:0; overflow-y:auto;
  padding:16px 20px 8px;
  overscroll-behavior:contain;
}
.mx-title{
  font-family:var(--mx-font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(30px,8vw,42px); line-height:.94; letter-spacing:.01em;
  margin:8px 0 10px;
}
.mx-sub{ color:var(--mx-mute); font-size:14px; line-height:1.5; margin:0 0 18px; }

/* ---------- Tarjeta WhatsApp (ruta rapida) ---------- */
.mx-wa{
  display:flex; align-items:center; gap:14px;
  padding:15px 16px; border-radius:16px;
  border:1px solid rgba(37,211,102,.42);
  background:rgba(37,211,102,.09);
  color:var(--mx-paper); text-decoration:none;
  transition:background var(--mx-t) ease, border-color var(--mx-t) ease, transform var(--mx-t) ease;
}
.mx-wa:hover{ background:rgba(37,211,102,.16); border-color:var(--mx-wa); transform:translateY(-1px); }
.mx-wa-icon{
  flex:none; width:40px; height:40px; border-radius:12px;
  background:var(--mx-wa); color:#06331a;
  display:inline-flex; align-items:center; justify-content:center;
}
.mx-wa-icon svg{ width:23px; height:23px; }
.mx-wa-text{ flex:1; min-width:0; }
.mx-wa-title{ font-weight:700; font-size:14.5px; line-height:1.25; }
.mx-wa-help{ color:var(--mx-mute); font-size:12.5px; margin-top:2px; line-height:1.35; }
.mx-wa-arrow{ flex:none; color:var(--mx-wa); }
.mx-wa-arrow svg{ width:18px; height:18px; }

/* ---------- Separador con etiqueta ---------- */
.mx-divider{
  display:flex; align-items:center; gap:12px;
  margin:22px 0 18px;
  color:var(--mx-mute);
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.mx-divider::before, .mx-divider::after{
  content:""; flex:1; height:1px; background:var(--mx-line);
}

/* ---------- Formulario ---------- */
.mx-field{ margin-bottom:15px; }
.mx-label{
  display:block; margin-bottom:6px;
  font-size:12px; font-weight:600; letter-spacing:.03em; color:var(--mx-mute);
}
.mx-label .mx-req{ color:var(--mx-gold); }

.mx-input, .mx-select, .mx-textarea{
  width:100%; display:block;
  font-family:var(--mx-font-body); font-size:14.5px; line-height:1.4;
  color:var(--mx-paper);
  background:rgba(7,21,35,.45);
  border:1px solid var(--mx-line);
  border-radius:12px;
  padding:12px 13px;
  transition:border-color var(--mx-t) ease, background var(--mx-t) ease;
}
.mx-textarea{ resize:vertical; min-height:78px; }
.mx-input::placeholder, .mx-textarea::placeholder{ color:var(--mx-mute); opacity:1; }
.mx-select{
  appearance:none; cursor:pointer; padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FA6BC' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:15px;
}
.mx-select option{ background:#0E2438; color:var(--mx-paper); }
.mx-select optgroup{ background:#0E2438; color:var(--mx-mute); }

.mx-input:hover, .mx-select:hover, .mx-textarea:hover{ border-color:#2A5279; }
.mx-field.is-invalid .mx-input,
.mx-field.is-invalid .mx-select,
.mx-field.is-invalid .mx-textarea{ border-color:var(--mx-alert); }

/* El error se dice con palabras, no solo con un borde */
.mx-error{
  display:none; margin-top:6px;
  font-size:12.5px; line-height:1.35; color:var(--mx-alert);
}
.mx-field.is-invalid .mx-error{ display:block; }

/* Contador del textarea: aparece al pasar de 400 */
.mx-counter{
  display:none; text-align:right; margin-top:5px;
  font-size:11.5px; color:var(--mx-mute); font-variant-numeric:tabular-nums;
}
.mx-counter.is-visible{ display:block; }
.mx-counter.is-limit{ color:var(--mx-alert); }

/* ---------- Chips ---------- */
.mx-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.mx-chip{
  appearance:none; cursor:pointer;
  font-family:var(--mx-font-body); font-size:13px; font-weight:600; line-height:1;
  color:var(--mx-paper);
  background:rgba(7,21,35,.45);
  border:1px solid var(--mx-line);
  border-radius:999px;
  padding:10px 14px;
  transition:border-color var(--mx-t) ease, background var(--mx-t) ease, color var(--mx-t) ease;
}
.mx-chip:hover{ border-color:#2A5279; }
.mx-chip[aria-pressed="true"]{
  background:var(--mx-gold); border-color:var(--mx-gold); color:var(--mx-ink);
}

/* ---------- Acciones (fijas al fondo del panel) ---------- */
.mx-actions{
  position:sticky; bottom:0;
  padding:14px 20px 18px;
  border-top:1px solid var(--mx-line);
  background:rgba(14,36,56,.94);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
.mx-blocker{
  display:none; margin:0 0 9px;
  font-size:12.5px; line-height:1.35; color:var(--mx-alert);
}
.mx-blocker.is-visible{ display:block; }

.mx-submit{
  width:100%; appearance:none; border:0; cursor:pointer;
  border-radius:14px; padding:15px 18px;
  background:var(--mx-gold); color:var(--mx-ink);
  font-family:var(--mx-font-body); font-weight:700; font-size:15px; letter-spacing:.01em;
  transition:filter var(--mx-t) ease, opacity var(--mx-t) ease;
}
.mx-submit:hover:not(:disabled):not([aria-disabled="true"]){ filter:brightness(1.07); }
.mx-submit:disabled,
.mx-submit[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }
.mx-submit.is-loading{ opacity:.75; cursor:progress; }

.mx-alt{
  display:block; width:100%; margin-top:11px; text-align:center;
  background:none; border:0; padding:2px; cursor:pointer;
  font-family:var(--mx-font-body); font-size:12.5px; color:var(--mx-mute);
  text-decoration:underline; text-underline-offset:3px;
}
.mx-alt:hover{ color:var(--mx-paper); }

/* ---------- Estado de exito ---------- */
.mx-success{ padding:34px 22px 26px; text-align:center; }
.mx-success-mark{
  width:56px; height:56px; margin:0 auto 18px; border-radius:50%;
  background:rgba(37,211,102,.14); border:1px solid rgba(37,211,102,.45);
  display:flex; align-items:center; justify-content:center; color:var(--mx-wa);
}
.mx-success-mark svg{ width:26px; height:26px; }
.mx-success-title{
  font-family:var(--mx-font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(24px,6.5vw,32px); line-height:1; margin:0 0 12px;
}
.mx-success-text{ color:var(--mx-mute); font-size:14px; line-height:1.55; margin:0 0 6px; }
.mx-success-links{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.mx-success-links a{
  color:var(--mx-paper); font-size:13px; text-decoration:underline; text-underline-offset:3px;
}
.mx-success-links a:hover{ color:var(--mx-gold); }

/* ---------- Foco visible: anillo dorado de 2px en todo control ---------- */
.mx-fab:focus-visible,
.mx-panel button:focus-visible,
.mx-panel a:focus-visible,
.mx-panel input:focus-visible,
.mx-panel select:focus-visible,
.mx-panel textarea:focus-visible,
.mx-input:focus, .mx-select:focus, .mx-textarea:focus{
  outline:2px solid var(--mx-gold);
  outline-offset:2px;
  border-color:var(--mx-gold);
}
.mx-gate-btn:focus-visible{ outline-offset:-3px; }

/* Bloquear scroll de la pagina con el modal abierto */
body.mx-modal-open{ overflow:hidden; }

/* ---------- Movil: alto casi completo, scroll interno ---------- */
@media (max-width:560px){
  .mx-overlay{ padding:0; align-items:flex-end; }
  .mx-panel{
    width:100%; max-height:96vh; height:96vh;
    border-radius:var(--mx-radius) var(--mx-radius) 0 0;
    border-bottom:0;
  }
  .mx-gate-btn{ padding:26px 8px; }
  .mx-fab{ bottom:16px; padding:13px 22px; font-size:14.5px; }
}

/* ---------- Sin movimiento si el usuario lo pide ---------- */
@media (prefers-reduced-motion: reduce){
  .mx-fab, .mx-overlay, .mx-panel, .mx-wa,
  .mx-input, .mx-select, .mx-textarea, .mx-chip,
  .mx-submit, .mx-close, .mx-langswitch button, .mx-gate-btn{
    transition:none !important;
  }
  .mx-view.is-entering{ animation:none !important; }
  .mx-fab:hover, .mx-wa:hover{ transform:none; }
  .mx-fab:hover{ transform:translateX(-50%); }
}