/* Este tema NO carga Tailwind: las utilidades del markup (fixed, inset-0,
   z-[1100], items-center, justify-center, p-4) no existen en ningún CSS
   encolado. Sin declararlas aquí el modal se renderiza como bloque estático al
   final del body y queda invisible bajo el footer. */
#modal-suscribete {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Por encima del WhatsApp flotante (.whatsapp-float, z-index 49 en custom.css)
     y de cualquier otro fijo del tema. */
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0,0,0,0.5);
  /* Sin esto, cuando el panel es más alto que la pantalla el centrado por flex
     empuja su borde superior (donde está la X) fuera del viewport y no hay forma
     de alcanzarlo. Mismo patrón que .modal-tablesetting. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#modal-suscribete.hidden { display: none; }
#modal-suscribete:not(.hidden) { display: flex; min-height: 100%; }
/* overlay: absolute inset-0 bg-black/50 */
#modal-suscribete .modal-suscribete__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
/* panel: relative w-full overflow-hidden rounded-3xl bg-white shadow-2xl */
#modal-suscribete .modal-suscribete__panel {
  position: relative;
  z-index: 10;
  width: 100%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  /* Sin tope de altura el panel se sale del viewport en ventanas bajas (y en
     móvil en horizontal): el form quedaba cortado por debajo del borde. */
  max-height: calc(100vh - 2rem);
}
#modal-suscribete .modal-suscribete__close { position: absolute; }
/* grid grid-cols-1 md:grid-cols-2 */
#modal-suscribete .modal-suscribete__panel > .grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Hereda el tope de altura del panel para que las columnas no lo desborden. */
  max-height: calc(100vh - 2rem);
}
@media (min-width: 768px) {
  #modal-suscribete .modal-suscribete__panel > .grid { grid-template-columns: 1fr 1fr; }
}
/* Las celdas de un grid tienen min-width:auto: un hijo ancho (el input al 100%
   más su padding) las estira y desborda el panel por la derecha. */
#modal-suscribete .modal-suscribete__panel > .grid > * {
  min-width: 0;
}
/* Bootstrap ya pone border-box global, pero lo declaramos aquí para no depender
   de su orden de carga: sin esto el padding de los inputs se suma al 100% y el
   formulario se sale del panel. */
#modal-suscribete,
#modal-suscribete *,
#modal-suscribete *::before,
#modal-suscribete *::after {
  box-sizing: border-box;
}
#modal-suscribete .modal-suscribete__media { position: relative; }
#modal-suscribete .modal-suscribete__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* flex flex-col justify-center p-8 md:p-12 */
#modal-suscribete .modal-suscribete__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  /* Si el contenido no cabe en la altura disponible, scrollea aquí dentro en vez
     de empujar el panel fuera de la pantalla. min-height:0 es necesario para que
     un hijo flex pueda encogerse por debajo de su contenido. */
  min-height: 0;
  overflow-y: auto;
}
@media (min-width: 768px) {
  #modal-suscribete .modal-suscribete__content { padding: 3rem; }
}
/* badge 10% OFF */
#modal-suscribete .modal-suscribete__badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  border-radius: 3px;
  background: var(--rojo, #F20206);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
/* honeypot: el markup usa .hidden de Tailwind */
#modal-suscribete .modal-suscribete__form .hidden { display: none; }
#modal-suscribete .modal-suscribete__panel { max-width: 950px; margin: auto; border-radius: 4px; }
#modal-suscribete .modal-suscribete__close {
  /* La clase z-20 del markup no existe en el tailwind.css compilado: sin este
     z-index la imagen (posicionada y posterior en el DOM) tapa la X. */
  z-index: 30;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 2px solid #fff;
  border-radius: 4px;
  background: var(--rojo, #F20206);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: background 0.2s ease;
}
#modal-suscribete .modal-suscribete__close:hover { background: #C60105; }

/* ── Contenido / tipografía alineada al sitio ── */
#modal-suscribete .modal-suscribete__content {
  font-family: var(--fuente-principal, "Gotham", sans-serif);
}
#modal-suscribete .modal-suscribete__eyebrow {
  font-family: var(--fuente-principal, "Gotham", sans-serif);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rojo, #F20206);
  margin-bottom: 14px;
  display: none;
}
#modal-suscribete .modal-suscribete__title {
  font-family: var(--fuente-titulo, "Perpetua Titling MT Std", serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--negro, #161616);
}
#modal-suscribete .modal-suscribete__text {
  font-family: var(--fuente-principal, "Gotham", sans-serif);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: #5a5a5a;
  margin: 15px 0 30px;
  max-width: 38ch;
}
#modal-suscribete .modal-suscribete__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
}
#modal-suscribete .modal-suscribete__input {
  width: 100%;
  border: 1px solid #d8d4c8;
  border-radius: 6px;
  background: #fff;
  padding: 15px 22px;
  font-family: var(--fuente-principal, "Gotham", sans-serif);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--negro, #161616);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#modal-suscribete .modal-suscribete__input::placeholder {
  color: #a8a8a8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
}
#modal-suscribete .modal-suscribete__input:focus {
  outline: none;
  border-color: var(--rojo, #F20206);
  box-shadow: 0 0 0 1px var(--rojo, #F20206);
}
#modal-suscribete .modal-suscribete__submit {
  width: 100%;
  border: none;
  border-radius: 6px;
  background: var(--rojo, #F20206);
  padding: 15px 22px;
  font-family: var(--fuente-principal, "Gotham", sans-serif);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: background 0.25s ease;
}
#modal-suscribete .modal-suscribete__submit:hover {
  background: #C60105;
}
#modal-suscribete .modal-suscribete__msg {
  border-radius: 4px;
  border: 1px solid #a0d9a0;
  background: #e6f7e6;
  padding: 10px 14px;
  font-family: var(--fuente-principal, "Gotham", sans-serif);
  font-size: 13px;
  font-weight: 300;
  color: #2a7a2a;
}
/* El JS conmuta clases de error/éxito; reflejamos el estado de error. */
#modal-suscribete .modal-suscribete__msg.bg-\[\#ffeeee\] {
  border-color: #ffaaaa;
  background: #ffeeee;
  color: #ff4444;
}
#modal-suscribete .modal-suscribete__msg.hidden { display: none; }
@media (max-width: 768px) {
  #modal-suscribete .modal-suscribete__title { font-size: clamp(24px, 6.5vw, 32px); }
  #modal-suscribete .modal-suscribete__eyebrow { margin-bottom: 10px; font-size: 10px; }
  #modal-suscribete .modal-suscribete__text { font-size: 13px; line-height: 1.5; }
  #modal-suscribete .modal-suscribete__form { margin-top: 24px; }
  #modal-suscribete .modal-suscribete__content { padding: 24px; }
  /* En una sola columna la imagen no tiene alto de referencia (el h-full del <img>
     colapsa), así que se lo damos aquí. Usamos SOLO height: combinar aspect-ratio
     con max-height hacía que el ratio recalculara el ancho desde el alto topado y
     la imagen ocupara media columna, dejando un hueco blanco a la derecha. */
  #modal-suscribete .modal-suscribete__media {
    width: 100%;
    height: 34vh;
    min-height: 160px;
  }
  #modal-suscribete .modal-suscribete__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}
@media (max-width: 767px) {
  #modal-suscribete .modal-suscribete__panel{
    max-width: 550px;
  }
}
/* El WhatsApp del tema (.whatsapp-float, custom.css) es fixed abajo a la derecha
   en escritorio y abajo a la IZQUIERDA desde 768px, con z-index 49. Este botón
   comparte esquina en móvil, así que lo apilamos encima del WhatsApp en vez de
   al lado: con z-index menor el WhatsApp tapaba su X de cerrar. */
#boton-descuento-flotante {
  display: none;
  position: fixed;
  bottom: 28px;
  left: 20px;
  z-index: 50;
  width: 68px;
  height: 68px;
  font-family: Arial, Helvetica, sans-serif;
}
#boton-descuento-flotante .discount-text {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 50%;
  background: var(--rojo, #F20206);
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(242, 2, 6, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#boton-descuento-flotante .discount-text:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(242, 2, 6, 0.45);
}
#boton-descuento-flotante .discount-num {
  font-size: 20px;
  font-weight: 800;
}
#boton-descuento-flotante .discount-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: 2px;
}
#boton-descuento-flotante .discount-close {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #1a1a1a;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s ease;
}
#boton-descuento-flotante .discount-close:hover {
  background: #000;
}
/* Desde 768px el WhatsApp salta a la izquierda (left:16px, bottom:16px, 72px de
   alto) y ocupaba exactamente este sitio: los dos botones se solapaban. Nos
   colocamos ENCIMA de él, alineados al mismo eje: 16 + 72 + 14 de aire = 102px. */
@media (max-width: 768px) {
  #boton-descuento-flotante {
    bottom: 82px;
    left: 16px;
    width: 60px;
    height: 60px;
  }
  #boton-descuento-flotante .discount-num { font-size: 18px; }
  #boton-descuento-flotante .discount-label { font-size: 10px; }
}
/* Oculta el mensaje nativo de Brevo durante el ciclo: mostramos el nuestro. */
.of-hide-brevo-msg .sib_msg_disp { display: none !important; }
.of-coupon-msg[hidden] { display: none; }
.of-coupon-msg .sib-alert-message { margin: 12px 0 0; }

/* ── Formulario de Brevo dentro del modal ──
   Cuando el campo ACF "formulario" trae el shortcode, el markup es el de Brevo
   (#brevo-suscribete > .sib-email-area / .sib-default-btn) y no lleva ninguna
   clase .modal-suscribete__*. Sin esto cae sin estilos. Ojo: .sib-email-area
   está tanto en el div contenedor como en el <input>, así que separamos por
   elemento en vez de por clase. */
#modal-suscribete #brevo-suscribete {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 10px;
  padding: 0;
  background: transparent;
}
/* Brevo envuelve cada control en un <p>: lo anulamos para que el flex mande. */
#modal-suscribete #brevo-suscribete p {
  margin: 0;
  padding: 0;
}
#modal-suscribete #brevo-suscribete input[type="email"] {
  width: 100%;
  border: 1px solid #d8d4c8;
  border-radius: 6px;
  background: #fff;
  padding: 15px 22px;
  box-shadow: none;
  font-family: var(--fuente-principal, "Gotham", sans-serif);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--negro, #161616);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#modal-suscribete #brevo-suscribete input[type="email"]::placeholder {
  color: #a8a8a8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
}
#modal-suscribete #brevo-suscribete input[type="email"]:focus {
  outline: none;
  border-color: var(--rojo, #F20206);
  box-shadow: 0 0 0 1px var(--rojo, #F20206);
}
#modal-suscribete #brevo-suscribete .sib-default-btn,
#modal-suscribete #brevo-suscribete input[type="submit"] {
  width: 100%;
  border: none;
  border-radius: 6px;
  background: var(--rojo, #F20206);
  padding: 15px 22px;
  font-family: var(--fuente-principal, "Gotham", sans-serif);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: background 0.25s ease;
}
#modal-suscribete #brevo-suscribete .sib-default-btn:hover,
#modal-suscribete #brevo-suscribete input[type="submit"]:hover {
  background: #C60105;
}
#modal-suscribete #brevo-suscribete .sib-default-btn:disabled,
#modal-suscribete #brevo-suscribete input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* El widget de reCAPTCHA mide 304px fijos: en la columna estrecha del modal se
   desborda, así que lo escalamos cuando no cabe. Sin sitekey no pinta nada y el
   div queda a cero, sin hueco. */
#modal-suscribete #brevo-suscribete #sib_captcha:empty { display: none; }
#modal-suscribete #brevo-suscribete #sib_captcha {
  display: flex;
  justify-content: center;
  overflow: hidden;
}
@media (max-width: 400px) {
  #modal-suscribete #brevo-suscribete #sib_captcha {
    transform: scale(0.85);
    transform-origin: center top;
  }
}
/* Textos sueltos que Brevo mete entre bloques (labels, avisos legales). */
#modal-suscribete #brevo-suscribete label {
  font-family: var(--fuente-principal, "Gotham", sans-serif);
  font-size: 12px;
  font-weight: 300;
  color: #5a5a5a;
}

/* Mensajes de estado (.of-coupon-msg) que pinta subscription-coupon.js. Fuera del
   footer no tenían color: .suscribete-msg solo cubre el form del footer. */
#modal-suscribete .of-coupon-msg .sib-alert-message {
  margin: 0;
  padding: 10px 16px;
  border-radius: 4px;
  font-family: var(--fuente-principal, "Gotham", sans-serif);
  font-size: 13px;
  font-weight: 300;
}
#modal-suscribete .of-coupon-msg .sib-alert-message-success {
  border: 1px solid #a0d9a0;
  background: #e6f7e6;
  color: #2a7a2a;
}
#modal-suscribete .of-coupon-msg .sib-alert-message-warning {
  border: 1px solid #ffaaaa;
  background: #ffeeee;
  color: #d33;
}
#modal-suscribete .of-coupon-msg .sib-alert-message-info {
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #f7f7f7;
  color: #555;
}
#modal-suscribete .modal-suscribete__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}