/* ============================================================
   POPUP DE CAMPAÑA
   Referencia: el T-sale 2026 (395974 en A), elegido por la usuaria
   el 2026-09-28. Medidas en DESIGN-SYSTEM.md §3.9terdecies.
   Ningún color literal — todo sale de tokens.css.

   Todo prefijado con `.t-popup`, media queries incluidos.
   Ver CLAUDE.md → «Especificidad contra Elementor».
   ============================================================ */

/* ---------- El diálogo ----------
   Un `<dialog>` nativo abierto con `showModal()`: va a la capa superior
   del navegador, así que queda encima de todo sin pelear z-index con el
   header, y el foco, `Esc` y el lector de pantalla vienen solos.

   El diálogo en sí es transparente: la caja visible es `.t-popup__caja`,
   que es la que se desplaza si no entra en pantalla.
   ------------------------------------------------- */

.t-popup {
  background: none;
  border: 0;
  box-sizing: border-box;
  color: var(--t-navy);
  margin: auto;
  max-height: calc(100dvh - 32px);
  max-width: calc(100% - 32px);
  overflow: visible;
  padding: 0;
  width: 816px;
}

/* El velo de A: negro al 80 %. */
.t-popup::backdrop {
  background-color: var(--t-backdrop);
}

/* Con el popup abierto, la página de atrás no se desplaza. */
html:has(.t-popup[open]) {
  overflow: hidden;
}

/* ---------- La caja ----------
   816 × 591 en A, radio 20 y 20 px de aire. La pieza gráfica va de fondo
   y el contenido ocupa la columna derecha, el 55 %: la izquierda es de la
   pieza, que tiene el «2x1» dibujado ahí.
   ------------------------------------------------- */

.t-popup .t-popup__caja {
  align-items: center;
  background-color: var(--t-white);
  border-radius: 20px;
  box-shadow: var(--t-shadow-popup);
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  max-height: calc(100dvh - 32px);
  min-height: 591px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px;
  position: relative;
}

.t-popup .t-popup__pieza {
  inset: 0;
  position: absolute;
}

.t-popup .t-popup__pieza img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.t-popup .t-popup__contenido {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: center;
  width: 55%;
}

/* Sin pieza, el contenido ocupa la caja entera. */
.t-popup:not(.t-popup--con-pieza) .t-popup__contenido {
  width: 100%;
}

/* ---------- El título ----------
   A declara la «TT Travels Next Trial» a 600, pero de esa familia solo
   existe el 800: el navegador ya dibujaba 800. Ver DESIGN-SYSTEM §3.10.
   ------------------------------------------------- */

.t-popup .t-popup__titulo {
  color: var(--t-navy);
  font-family: var(--t-font-display);
  font-size: 22px;
  font-weight: var(--t-weight-display);
  line-height: 1.3;
  margin: 0 0 16px;
  text-transform: uppercase;
}

/* ---------- La cuenta regresiva ----------
   Cuatro cajas con borde de 1 px y radio 8, separadas 16 px, en el 79 %
   de la columna. Números en Georama 600 a 22 px; unidades en 500 a 15.
   ------------------------------------------------- */

.t-popup .t-popup__cuenta {
  display: flex;
  gap: 16px;
  max-width: 79%;
  width: 100%;
}

.t-popup .t-popup__cuenta[hidden] {
  display: none;
}

.t-popup .t-popup__cuenta-item {
  border: 1px solid var(--t-navy);
  border-radius: 8px;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  padding: 6px;
}

.t-popup .t-popup__digitos {
  font-family: var(--t-font-body);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  font-weight: var(--t-weight-semibold);
  line-height: 1.2;
}

.t-popup .t-popup__unidad {
  font-family: var(--t-font-body);
  font-size: 15px;
  font-weight: var(--t-weight-medium);
  line-height: 1.3;
}

.t-popup .t-popup__bajada {
  color: var(--t-navy);
  font-family: var(--t-font-body);
  font-size: 16px;
  font-weight: var(--t-weight-bold);
  line-height: 1.3;
  margin: 0;
  padding-top: 20px;
  text-transform: uppercase;
}

/* ---------- La acción ---------- */

.t-popup .t-popup__accion {
  margin-top: 12px;
  width: 100%;
}

.t-popup .t-popup__boton {
  background-color: var(--t-accent);
  border-radius: 8px;
  color: var(--t-white);
  display: inline-block;
  font-family: var(--t-font-body);
  font-size: 16px;
  font-weight: var(--t-weight-bold);
  padding: 12px 28px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.3s;
}

.t-popup .t-popup__boton:hover,
.t-popup .t-popup__boton:focus-visible {
  background-color: var(--t-accent-hover);
  color: var(--t-white);
}

/* La letra chica, debajo de la acción. El T-sale no la usaba; el tamaño es el
   de la del diseño «foto al costado», que sí está medido (más abajo). */
.t-popup .t-popup__legal {
  color: var(--t-navy);
  font-family: var(--t-font-body);
  font-size: 16px;
  line-height: 1.3;
  margin: 12px 0 0;
}

/* El formulario de WPForms, el del T-sale 2026. A pinta las etiquetas y el
   botón en navy, y el botón al 86 % del ancho.

   ⚠️ El `!important` del ancho es para la regla global de
   `typsense-woocommerce`, que le pone `width: 90% !important` a todo
   `input` del sitio. Contra eso la especificidad no alcanza: ver
   INVENTARIO.md §8.4 y CLAUDE.md → «CSS fuera del theme». */
.t-popup .t-popup__accion .wpforms-container {
  /* WPForms «moderno» dibuja campos y botón con estas variables. Si no se
     declaran, sus valores por defecto dependen de un estilo que el plugin
     imprime aparte, y sin él los campos quedan sin borde ni fondo y el
     botón, con el texto del mismo color que el fondo. */
  --wpforms-field-background-color: var(--t-white);
  --wpforms-field-border-color: var(--t-border-strong);
  --wpforms-field-border-radius: 8px;
  --wpforms-field-border-size: 1px;
  --wpforms-field-border-style: solid;
  --wpforms-field-size-checkbox-size: 16px;
  --wpforms-field-text-color: var(--t-ink);
  --wpforms-label-color: var(--t-navy);
  --wpforms-button-background-color: var(--t-navy);
  --wpforms-button-text-color: var(--t-white);
  --wpforms-button-border-radius: 8px;
  margin: 0;
}

.t-popup .t-popup__accion .wpforms-form input[type="text"],
.t-popup .t-popup__accion .wpforms-form input[type="email"],
.t-popup .t-popup__accion .wpforms-form input[type="tel"] {
  background-color: var(--t-white);
  border: 1px solid var(--t-border-strong);
  border-radius: 8px;
  color: var(--t-ink);
}

.t-popup .t-popup__accion .wpforms-field {
  padding: 7px 0;
}

.t-popup .t-popup__accion .wpforms-field-label,
.t-popup .t-popup__accion .wpforms-field-label-inline {
  color: var(--t-navy) !important;
  font-family: var(--t-font-body);
}

.t-popup .t-popup__accion input[type="text"],
.t-popup .t-popup__accion input[type="email"],
.t-popup .t-popup__accion input[type="tel"] {
  box-sizing: border-box;
  max-width: 100%;
  width: 100% !important;
}

.t-popup .t-popup__accion button[type="submit"] {
  background-color: var(--t-navy) !important;
  border: 0;
  border-radius: 8px;
  color: var(--t-white) !important;
  cursor: pointer;
  font-family: var(--t-font-body);
  font-weight: var(--t-weight-bold);
  text-transform: uppercase;
  width: 86%;
}

.t-popup .t-popup__accion button[type="submit"]:hover,
.t-popup .t-popup__accion button[type="submit"]:focus-visible {
  background-color: var(--t-navy-surface) !important;
}

/* ---------- Cerrar ----------
   Arriba a la derecha, sobre un círculo blanco para que se vea encima de
   cualquier pieza.

   Es un `<button>`, así que reset completo y dos `!important`, los mismos
   del carrusel (producto-carrusel.css): el kit de Elementor le pone a todo
   `button:hover` un fondo naranja con `!important` en la portada, y debajo
   de 769 px un `padding: 16px 28px !important` que se come la caja entera.
   Se borran en la Fase 4.
   ------------------------------------------------- */

.t-popup .t-popup__cerrar-form {
  margin: 0;
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 1;
}

.t-popup button.t-popup__cerrar,
.t-popup button.t-popup__cerrar:hover,
.t-popup button.t-popup__cerrar:focus,
.t-popup button.t-popup__cerrar:active {
  align-items: center;
  appearance: none;
  background-color: var(--t-white) !important;
  border: 0;
  border-radius: 50%;
  box-shadow: var(--t-shadow-header);
  color: var(--t-navy);
  cursor: pointer;
  display: flex;
  height: 36px;
  justify-content: center;
  padding: 0 !important;
  width: 36px;
}

.t-popup button.t-popup__cerrar:focus-visible {
  outline: 2px solid var(--t-navy);
  outline-offset: 2px;
}

.t-popup .t-popup__cerrar svg {
  height: 20px;
  width: 20px;
}

/* ---------- La entrada ----------
   Aparece con una curva que arranca rápido y frena largo (CLAUDE.md →
   Movimiento). Sin la animación, abre de golpe y funciona igual.
   ------------------------------------------------- */

.t-popup[open] {
  animation: t-popup-entra 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.t-popup[open]::backdrop {
  animation: t-popup-velo 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes t-popup-entra {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}

@keyframes t-popup-velo {
  from {
    opacity: 0;
  }
}

/* ---------- Mobile ----------
   En A la pieza de celular va arriba, como imagen, y el contenido abajo
   sobre blanco. La caja deja de tener aire propio y alto mínimo.
   ------------------------------------------------- */

@media (max-width: 767px) {
  .t-popup .t-popup__caja {
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    padding: 0;
  }

  .t-popup .t-popup__pieza {
    position: static;
  }

  .t-popup .t-popup__pieza img {
    height: auto;
  }

  .t-popup .t-popup__contenido {
    padding: 20px 20px 24px;
    width: 100%;
    box-sizing: border-box;
  }

  .t-popup .t-popup__titulo {
    font-size: 18px;
  }

  /* 303 px en A, con 19 de separación. */
  .t-popup .t-popup__cuenta {
    gap: 19px;
    max-width: 303px;
  }

  .t-popup .t-popup__digitos {
    font-size: 14px;
  }

  .t-popup .t-popup__unidad {
    font-size: 12px;
  }

  .t-popup .t-popup__bajada {
    padding-top: 16px;
  }
}

/* ============================================================
   DISEÑO «FOTO AL COSTADO» (`.t-popup--imagen`)
   Referencia: «30%OFF de camisetas 2026» (403224 en producción),
   medido en su previsualización el 2026-10-01. No estaba en A cuando se
   congeló. Ver DESIGN-SYSTEM.md §3.9terdecies.

   Caja de 816 × 500, radio 20. La foto llena la mitad izquierda —408,
   recortada al centro— y la promo va escrita en la derecha, centrada en
   las dos direcciones con 20 px entre piezas. En celular la foto va
   arriba, en una franja de 217 px pegada al borde superior.

   Lo de la caja, el velo, la sombra, cerrar y la entrada es el mismo del
   T-sale: acá solo se declara lo que cambia.
   ============================================================ */

.t-popup--imagen .t-popup__caja {
  align-items: stretch;
  min-height: 500px;
  padding: 0;
}

.t-popup--imagen .t-popup__pieza {
  flex: 0 0 50%;
  position: relative;
}

/* La foto queda absoluta dentro de su mitad: así su alto no estira la caja
   —una foto de 1200 px dejaría el popup de 1200—, y la caja la decide el
   contenido, con los 500 de mínimo. */
.t-popup--imagen .t-popup__pieza img {
  inset: 0;
  position: absolute;
}

.t-popup--imagen .t-popup__contenido {
  box-sizing: border-box;
  flex: 1 1 50%;
  gap: 20px;
  justify-content: center;
  padding: 40px 20px;
  width: auto;
}

/* Sin foto, el contenido ocupa la caja entera, como en el T-sale. */
.t-popup--imagen:not(.t-popup--con-pieza) .t-popup__contenido {
  flex-basis: 100%;
}

/* «PROMOCIÓN EXCLUSIVA»: el mismo título del T-sale, 22 px. El aire lo da
   el `gap` de la columna. */
.t-popup--imagen .t-popup__titulo {
  margin: 0;
}

/* «30% OFF». A: «TT Travels Next Trial» 600 —se dibuja 800, la única cara
   (§3.10)—, 46 px con interlineado 1.3, en el naranja del secundario. */
.t-popup--imagen .t-popup__destacado {
  color: var(--t-accent);
  font-family: var(--t-font-display);
  font-size: 36px;
  font-weight: var(--t-weight-display);
  line-height: 1.3;
  margin: 0;
  text-transform: uppercase;
}

@media screen and (max-width:767px){
	.t-popup--imagen .t-popup__destacado{
		font-size: 28px;
	}
}

/* «EN CAMISETAS 2026», pegado al destacado: A le pone −18 px contra los 20
   del `gap`, así que quedan 2. Georama 700 a 26 px. */
.t-popup--imagen .t-popup__bajada {
  font-size: 26px;
  margin-top: 0px;
  padding-top: 0;
}

/* El botón, 54 px debajo de la bajada y de 44 de alto: en A el texto va en
   la tipografía de los títulos, con 14 / 28 de relleno y radio 8. */
.t-popup--imagen .t-popup__accion {
  margin-top: 34px;
  width: auto;
}

.t-popup--imagen .t-popup__boton {
  font-family: var(--t-font-display);
  font-weight: var(--t-weight-display);
  line-height: 1;
  padding: 14px 28px;
}

/* La vigencia, 13 px debajo del botón: −7 contra el `gap`. Georama 400 a 16,
   en navy. */
.t-popup--imagen .t-popup__legal {
  margin: -7px 0 0;
}

@media (max-width: 767px) {
  .t-popup--imagen .t-popup__caja {
    min-height: 0;
  }

  /* La franja de la foto: 217 px, recortada desde arriba —en una foto de
     una persona, ahí está la cara—. */
  .t-popup--imagen .t-popup__pieza {
    flex: 0 0 217px;
  }

  .t-popup--imagen .t-popup__pieza img {
    height: 100%;
    object-position: center top;
  }

  /* En A, 10 px entre piezas; la volanta arranca 29 px debajo de la foto y
     la letra chica termina 29 arriba del borde. La caja, 500 de alto. */
  .t-popup--imagen .t-popup__contenido {
    gap: 10px;
    padding: 30px 20px 29px;
  }

  .t-popup--imagen .t-popup__titulo {
    font-size: 15px;
  }

  /* En A la bajada se monta 9 px sobre el interlineado del destacado: −19
     contra los 10 del `gap`. Las letras no se tocan, es el aire de la
     línea de 46. */
  .t-popup--imagen .t-popup__bajada {
    font-size: 16px;
    margin-top: 0px;
  }

  .t-popup--imagen .t-popup__accion {
    margin-top: 17px;
  }

  .t-popup--imagen .t-popup__legal {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-popup[open],
  .t-popup[open]::backdrop {
    animation: none;
  }

  .t-popup .t-popup__boton {
    transition: none;
  }
}

/* ============================================================
   BOTÓN FLOTANTE DE CAMPAÑA
   Referencia: BtnFlotanteTsale (381092 en A). Una píldora fija con la
   etiqueta y el nombre de la campaña, que lleva a su categoría.
   Medidas en DESIGN-SYSTEM.md §3.9terdecies.

   Lo muestra el JS quitándole `hidden`, solo con la campaña al aire.
   ============================================================ */

/* ---------- La píldora ----------
   A: Georama 500 a 14 px, `padding: 10px 25px`, radio 40, fondo
   `#010B61`. Ese navy no está en ninguna lista del design system: se
   absorbe en --t-navy, como los otros navies sueltos (§1.2).

   **Encima de la burbuja de WhatsApp, no sobre ella.** La burbuja queda
   fija a 29 px de la derecha y 80 del borde, y mide 55 (medido en B a
   390 px el 2026-09-28). El botón va 16 px más arriba. En A se ubicaba
   con dos corrimientos que dependían del alto de la pantalla.
   ------------------------------------------------- */

.t-campana-boton {
  align-items: center;
  background-color: var(--t-navy);
  border-radius: 40px;
  bottom: calc(151px + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--t-shadow-header);
  color: var(--t-white);
  display: inline-flex;
  font-family: var(--t-font-body);
  font-size: 14px;
  font-weight: var(--t-weight-medium);
  gap: 8px;
  line-height: 1.2;
  padding: 10px 25px;
  position: fixed;
  right: 20px;
  text-decoration: none;
  transition: background-color 0.3s;
  z-index: 99;
}

.t-campana-boton[hidden] {
  display: none;
}

/* El enlace no se subraya ni cambia de color por la regla de enlaces del
   theme (CLAUDE.md → Enlaces): la píldora es un botón y se lee como tal. */
.t-campana-boton:hover,
.t-campana-boton:focus-visible {
  background-color: var(--t-navy-surface);
  color: var(--t-white);
}

.t-campana-boton:focus-visible {
  outline: 2px solid var(--t-white);
  outline-offset: -4px;
}

.t-campana-boton .t-campana-boton__icono {
  flex: 0 0 auto;
  height: 14px;
  width: 14px;
}

/* «Solo en celulares», que es lo que hacía A: desde 768 no se ve. */
@media (min-width: 768px) {
  .t-campana-boton--mobile {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-campana-boton {
    transition: none;
  }
}