/* ============================================================================
 * 3M — popup de captura de email (cupón de descuento)
 * ----------------------------------------------------------------------------
 * Estilo 3M (bordó / crema / Montserrat). Hereda los tokens de css/tokens.css
 * (--accent, --white, --ink, --sub, --border, --accent-ink, --radius-*); cada
 * uso lleva fallback en hex por si el popup se cargara sin tokens.css.
 * Clases con prefijo `v3m-pop-` para no colisionar con el sitio.
 * ========================================================================= */

.v3m-pop-overlay{
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
  background: rgba(28, 27, 24, .58);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.v3m-pop-overlay.is-open{ opacity: 1; pointer-events: auto; }
.v3m-pop-overlay[hidden]{ display: none; }

/* Modal = banda bordó arriba + cuerpo crema/blanco */
.v3m-pop-modal{
  position: relative; width: 100%; max-width: 440px;
  background: var(--white, #FFFFFF); color: var(--ink, #1C1B18);
  border-radius: var(--radius-card, 16px); overflow: hidden;
  box-shadow: 0 24px 56px rgba(28,27,24,.30), 0 8px 18px rgba(28,27,24,.14);
  font-family: var(--font-base, "Montserrat", sans-serif);
  transform: translateY(8px) scale(.985); opacity: 0;
  transition: transform .26s ease, opacity .22s ease;
}
.v3m-pop-overlay.is-open .v3m-pop-modal{ transform: none; opacity: 1; }

.v3m-pop-band{ height: 8px; background: var(--accent, #652428); }

.v3m-pop-card{ padding: 2rem 1.8rem 1.6rem; }
@media (max-width: 480px){ .v3m-pop-card{ padding: 1.6rem 1.3rem 1.3rem; } }

/* Botón cerrar */
.v3m-pop-close{
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg, #F7F5EF); border: 1px solid var(--border, #E1DBCB);
  border-radius: 999px; color: var(--ink, #1C1B18); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.v3m-pop-close:hover, .v3m-pop-close:focus-visible{
  background: var(--accent, #652428); color: var(--accent-ink, #F7F1E6); outline: none;
}

/* Tipografía */
.v3m-pop-eyebrow{
  display: inline-block; background: var(--accent, #652428); color: var(--accent-ink, #F7F1E6);
  font-weight: 600; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 14px;
}
.v3m-pop-title{
  margin: 0 0 .7rem; font-size: 1.65rem; line-height: 1.15; font-weight: 800;
  color: var(--accent, #652428);
}
.v3m-pop-desc{ margin: 0 0 1.3rem; font-size: 1rem; line-height: 1.5; color: var(--sub, #5B5952); }
@media (max-width: 480px){ .v3m-pop-title{ font-size: 1.4rem; } }

/* Form */
.v3m-pop-form{ display: flex; flex-direction: column; gap: .7rem; }
.v3m-pop-input{
  font-family: inherit; font-size: 1rem; padding: .8rem 1rem; min-height: 46px;
  border: 1.5px solid var(--border, #E1DBCB); border-radius: var(--radius-input, 10px);
  background: var(--white, #FFFFFF); color: var(--ink, #1C1B18);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.v3m-pop-input::placeholder{ color: var(--sub, #5B5952); }
.v3m-pop-input:focus{
  outline: none; border-color: var(--accent, #652428);
  box-shadow: 0 0 0 3px rgba(101, 36, 40, .14);
}
.v3m-pop-input:disabled{ background: var(--bg, #F7F5EF); cursor: not-allowed; }

.v3m-pop-submit{
  font-family: inherit; font-weight: 600; font-size: 14.5px;
  padding: 13px 26px; border-radius: var(--radius-pill, 999px); border: none; cursor: pointer;
  background: var(--accent, #652428); color: var(--accent-ink, #F7F1E6);
  transition: background .15s ease;
}
.v3m-pop-submit:hover:not(:disabled){ background: var(--accent-hover, #8A3236); }
.v3m-pop-submit:disabled{ cursor: not-allowed; opacity: .65; }

/* Honeypot: invisible al usuario, visible para bots simples */
.v3m-pop-hp{ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Status inline */
.v3m-pop-status{ margin: .6rem 0 0; min-height: 1.1em; font-size: .85rem; color: var(--sub, #5B5952); }
.v3m-pop-status--err{ color: #B3261E; font-weight: 600; }

/* Consentimiento / política */
.v3m-pop-consent{ margin: 1rem 0 0; font-size: .78rem; line-height: 1.45; color: var(--sub, #5B5952); }
.v3m-pop-link{ color: var(--accent, #652428); text-decoration: underline; text-underline-offset: 2px; }

/* Panel de éxito */
.v3m-pop-exito{ text-align: center; }
.v3m-pop-exito-eyebrow{
  margin: 0 0 .6rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 800; color: var(--accent, #652428);
}
.v3m-pop-exito-msg{ margin: 0; font-size: .98rem; color: var(--ink, #1C1B18); line-height: 1.5; }

@media (prefers-reduced-motion: reduce){
  .v3m-pop-overlay, .v3m-pop-modal{ transition: none; }
  .v3m-pop-overlay.is-open .v3m-pop-modal{ transform: none; }
}