/* =====================================================================
   PANTALLA DE TIENDA (señalización digital)
   Se ve de lejos y corre todo el día: letra grande, poco texto por diapositiva y
   animaciones que solo mueven transform/opacity (las que no cansan al equipo).

   Todo se mide en --u para que se vea igual en 1080p, 4K o en vertical: en 16:9,
   1u = 1% del ancho (19.2px en 1920). Diseñar en px aquí rompe la pantalla grande.
   ===================================================================== */

.pantalla {
  --u: min(1vw, 1.7778vh);

  --pt-bg: #000144;               /* el azul exacto del fondo del logo: así el logo se funde */
  --pt-bg-2: #070a52;
  --pt-tinta: #ffffff;
  --pt-suave: rgba(255, 255, 255, .72);
  --pt-tenue: rgba(255, 255, 255, .48);
  --pt-linea: rgba(255, 255, 255, .12);
  --pt-panel: rgba(255, 255, 255, .06);
  --pt-panel-fuerte: rgba(255, 255, 255, .1);
  --pt-magenta: #E526C9;
  --pt-cyan: #4CB7E5;
  --pt-verde: #34d399;
  --pt-sombra: 0 calc(var(--u) * 1.6) calc(var(--u) * 5) rgba(0, 0, 20, .55);
  --pt-degradado: linear-gradient(95deg, #ff6ae6 0%, #E526C9 38%, #a46cff 70%, #4CB7E5 100%);
  --pt-dur: 10s;                  /* duración de la diapositiva actual (la pone el JS) */

  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  background: var(--pt-bg);
  color: var(--pt-tinta);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

.pantalla.sin-cursor,
.pantalla.sin-cursor * { cursor: none !important; }

/* Vertical: la misma composición apilada. El ancho manda, así que la unidad crece un poco. */
@media (orientation: portrait) {
  .pantalla { --u: min(1.6vw, .9vh); }
}

/* ---------- Tema claro ---------- */
.pantalla.tema-claro {
  --pt-bg: #f2f3fa;
  --pt-bg-2: #e6e8f5;
  --pt-tinta: #14163A;
  --pt-suave: rgba(20, 22, 58, .72);
  --pt-tenue: rgba(20, 22, 58, .5);
  --pt-linea: rgba(20, 22, 58, .1);
  --pt-panel: rgba(255, 255, 255, .75);
  --pt-panel-fuerte: #ffffff;
  --pt-sombra: 0 calc(var(--u) * 1.2) calc(var(--u) * 4) rgba(20, 22, 58, .14);
  --pt-degradado: linear-gradient(95deg, #c615aa 0%, #E526C9 35%, #7a3cf0 70%, #1f8fc4 100%);
}

/* =====================================================================
   FONDO: dos luces que se mueven muy lento + una retícula tenue
   ===================================================================== */
.pt-fondo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.pt-aurora {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  opacity: .42;
  will-change: transform;
}
.pt-aurora.a1 {
  top: -30vmax; left: -22vmax;
  background: radial-gradient(circle, rgba(229, 38, 201, .75), transparent 62%);
  animation: pt-deriva-a 38s ease-in-out infinite alternate;
}
.pt-aurora.a2 {
  bottom: -34vmax; right: -24vmax;
  background: radial-gradient(circle, rgba(76, 183, 229, .7), transparent 62%);
  animation: pt-deriva-b 46s ease-in-out infinite alternate;
}
.tema-claro .pt-aurora { opacity: .22; }

.pt-reticula {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--pt-linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--pt-linea) 1px, transparent 1px);
  background-size: calc(var(--u) * 4) calc(var(--u) * 4);
  opacity: .35;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 72%);
          mask-image: radial-gradient(ellipse at center, #000 10%, transparent 72%);
}

@keyframes pt-deriva-a { to { transform: translate(18vmax, 14vmax) scale(1.15); } }
@keyframes pt-deriva-b { to { transform: translate(-16vmax, -12vmax) scale(1.1); } }

/* =====================================================================
   ESTRUCTURA: barra superior · escenario · pie
   ===================================================================== */
.pt-lienzo {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* Sin esto la columna toma el ancho de la cinta de mensajes (que es larguísima a
     propósito) y todo se sale de la pantalla. */
  grid-template-columns: minmax(0, 1fr);
  transition: transform 3s ease-in-out;   /* el corrimiento anti-quemado */
}

.pt-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--u) * 1.3) calc(var(--u) * 3);
  position: relative;
  z-index: 3;
}

.pt-marca {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * .9);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: calc(var(--u) * 1.35);
  letter-spacing: -.01em;
  transition: opacity .6s ease;
}
.pt-marca img {
  width: calc(var(--u) * 2.8);
  height: calc(var(--u) * 2.8);
  border-radius: calc(var(--u) * .7);
}
.pt-marca b { font-weight: 700; background: var(--pt-degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pantalla.en-intro .pt-marca { opacity: 0; }

.pt-barra-der {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.6);
  font-size: calc(var(--u) * 1.05);
  color: var(--pt-suave);
}
.pt-barra-der i { color: var(--pt-cyan); margin-right: calc(var(--u) * .4); }
.pt-reloj {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  color: var(--pt-tinta);
  padding: calc(var(--u) * .45) calc(var(--u) * 1.1);
  border-radius: 999px;
  background: var(--pt-panel);
  border: 1px solid var(--pt-linea);
  font-variant-numeric: tabular-nums;
}
.pt-reloj span { color: var(--pt-tenue); font-weight: 500; margin-left: calc(var(--u) * .6); }

.pt-escenario { position: relative; overflow: hidden; min-height: 0; }

.pt-pie {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  height: calc(var(--u) * 3.6);
  padding: 0 calc(var(--u) * 3);
  background: rgba(0, 0, 0, .22);
  border-top: 1px solid var(--pt-linea);
  position: relative;
  z-index: 3;
}
.tema-claro .pt-pie { background: rgba(255, 255, 255, .6); }

.pt-ticker {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.pt-ticker-pista {
  display: inline-flex;
  font-size: calc(var(--u) * 1.05);
  font-weight: 600;
  color: var(--pt-suave);
  animation: pt-ticker var(--dur-ticker, 40s) linear infinite;
  will-change: transform;
}
.pt-ticker-pista span { padding-right: calc(var(--u) * 2.5); }
.pt-ticker-pista i { color: var(--pt-magenta); margin-right: calc(var(--u) * 2.5); font-size: .8em; }
@keyframes pt-ticker { to { transform: translateX(-50%); } }

.pt-contacto {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * .6);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: calc(var(--u) * 1.25);
  white-space: nowrap;
}
.pt-contacto i { color: #25d366; font-size: 1.15em; }

.pt-progreso {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--u) * .28);
  z-index: 4;
}
.pt-progreso span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--pt-degradado);
  transform-origin: left center;
  transform: scaleX(0);
}
.pt-progreso span.corriendo { animation: pt-progreso var(--pt-dur) linear forwards; }
.pantalla.pausada .pt-progreso span { animation-play-state: paused; }
@keyframes pt-progreso { to { transform: scaleX(1); } }

.pt-pausa {
  position: absolute;
  top: calc(var(--u) * 5.5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  padding: calc(var(--u) * .5) calc(var(--u) * 1.4);
  border-radius: 999px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-weight: 700;
  font-size: calc(var(--u) * 1);
  display: none;
}
.pantalla.pausada .pt-pausa { display: block; }

/* Controles: solo aparecen si alguien mueve el mouse o toca la pantalla */
.pt-controles {
  position: absolute;
  top: calc(var(--u) * 1.2);
  left: 50%;
  transform: translateX(-50%) translateY(-150%);
  z-index: 7;
  display: flex;
  gap: calc(var(--u) * .5);
  padding: calc(var(--u) * .5);
  border-radius: 999px;
  background: rgba(10, 12, 50, .85);
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: var(--pt-sombra);
  transition: transform .35s ease;
}
.pantalla.mostrar-controles .pt-controles { transform: translateX(-50%) translateY(0); }
.pt-controles button {
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: calc(var(--u) * 1.1);
  padding: calc(var(--u) * .5) calc(var(--u) * 1.1);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .45);
  cursor: pointer;
}
.pt-controles button:hover { background: rgba(255, 255, 255, .22); }
.pt-controles .pt-salir { background: var(--pt-magenta); }

/* =====================================================================
   DIAPOSITIVAS Y TRANSICIONES
   ===================================================================== */
.pt-slide {
  position: absolute;
  inset: 0;
  padding: calc(var(--u) * .8) calc(var(--u) * 3) calc(var(--u) * 2);
}

.pt-slide.entrando.t-desvanecer { animation: pt-entra-fade 1s ease both; }
.pt-slide.saliendo.t-desvanecer { animation: pt-sale-fade .8s ease both; }
.pt-slide.entrando.t-deslizar   { animation: pt-entra-desliza 1s cubic-bezier(.2, .8, .2, 1) both; }
.pt-slide.saliendo.t-deslizar   { animation: pt-sale-desliza .8s cubic-bezier(.6, 0, .8, .2) both; }
.pt-slide.entrando.t-zoom       { animation: pt-entra-zoom 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.pt-slide.saliendo.t-zoom       { animation: pt-sale-zoom .8s ease both; }

@keyframes pt-entra-fade    { from { opacity: 0; } }
@keyframes pt-sale-fade     { to   { opacity: 0; } }
@keyframes pt-entra-desliza { from { opacity: 0; transform: translateX(8%); } }
@keyframes pt-sale-desliza  { to   { opacity: 0; transform: translateX(-8%); } }
@keyframes pt-entra-zoom    { from { opacity: 0; transform: scale(1.08); } }
@keyframes pt-sale-zoom     { to   { opacity: 0; transform: scale(.94); } }

/* La cascada: cada bloque entra un poco después del anterior (el JS le pone --i) */
.pt-c {
  animation: pt-cascada .85s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--i, 0) * 110ms + 250ms);
}
@keyframes pt-cascada {
  from { opacity: 0; transform: translateY(calc(var(--u) * 2.2)); }
}

/* Texto con el degradado de la marca */
.pt-grad {
  background: var(--pt-degradado);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pt-pastilla {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .45);
  padding: calc(var(--u) * .42) calc(var(--u) * 1);
  border-radius: 999px;
  background: var(--pt-panel);
  border: 1px solid var(--pt-linea);
  font-size: calc(var(--u) * .95);
  font-weight: 600;
  color: var(--pt-suave);
  white-space: nowrap;
}
.pt-pastilla i { color: var(--pt-cyan); }
.pt-pastilla.promo {
  background: var(--pt-degradado);
  border-color: transparent;
  color: #fff;
}
.pt-pastilla.promo i { color: #fff; }

/* =====================================================================
   PRESENTACIÓN (logo + datos del negocio)
   ===================================================================== */
.pt-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 4);
  align-items: center;
  height: 100%;
  padding: 0 calc(var(--u) * 2);
}

.pt-intro-marca { text-align: center; }

.pt-logo-escena {
  position: relative;
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  margin: 0 auto calc(var(--u) * 1.5);
}
.pt-logo-halo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(229, 38, 201, .55), rgba(76, 183, 229, .55), rgba(164, 108, 255, .5), rgba(229, 38, 201, .55));
  filter: blur(calc(var(--u) * 3));
  opacity: .55;
  animation: pt-halo 14s linear infinite;
}
@keyframes pt-halo { to { transform: rotate(360deg); } }
.pt-logo-escena img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* logo-transparente.png: el favicon con el azul del fondo recortado. Con mix-blend-mode
     no se podía: dentro de una diapositiva animada se mezcla contra la nada y el cuadro se ve. */
  filter: drop-shadow(0 0 calc(var(--u) * 1.5) rgba(229, 38, 201, .35));
  animation: pt-flota 7s ease-in-out infinite alternate;
}
/* En claro no hay fondo con qué fundirlo: se muestra como ícono de app, que se ve intencional */
.tema-claro .pt-logo-escena img {
  filter: none;
  border-radius: 22%;
  box-shadow: var(--pt-sombra);
  width: 78%;
  height: 78%;
  margin: 11%;
}
@keyframes pt-flota { to { transform: translateY(calc(var(--u) * -1.2)); } }

.pt-intro-nombre {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: calc(var(--u) * 5.2);
  line-height: .95;
  letter-spacing: -.04em;
}
.pt-intro-nombre span { display: block; }
.pt-intro-eslogan {
  font-size: calc(var(--u) * 1.75);
  color: var(--pt-suave);
  margin-top: calc(var(--u) * 1.2);
}
.pt-intro-conteo {
  margin-top: calc(var(--u) * 1.8);
  font-size: calc(var(--u) * 1.2);
  padding: calc(var(--u) * .6) calc(var(--u) * 1.5);
}
.pt-intro-conteo b { color: var(--pt-tinta); font-size: 1.2em; }

.pt-intro-datos { display: flex; flex-direction: column; gap: calc(var(--u) * 1.1); }

.pt-dato {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.3);
  padding: calc(var(--u) * 1.05) calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 1.3);
  background: var(--pt-panel);
  border: 1px solid var(--pt-linea);
}
.pt-dato-icono {
  flex: 0 0 auto;
  width: calc(var(--u) * 3.3);
  height: calc(var(--u) * 3.3);
  border-radius: calc(var(--u) * .9);
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 1.6);
  color: #fff;
  background: var(--pt-degradado);
}
.pt-dato-etiqueta {
  font-size: calc(var(--u) * .8);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--pt-tenue);
  font-weight: 600;
}
.pt-dato-valor {
  font-size: calc(var(--u) * 1.5);
  font-weight: 600;
  line-height: 1.2;
}
.pt-dato-texto { flex: 1; min-width: 0; }
.pt-dato-nota {
  margin-top: calc(var(--u) * .35);
  font-size: calc(var(--u) * .9);
  font-weight: 600;
  color: var(--pt-cyan);
}

/* La tarjeta que lleva el QR: el código a la derecha, en su recuadro blanco */
.pt-dato.con-qr { padding-top: calc(var(--u) * .8); padding-bottom: calc(var(--u) * .8); }
.pt-qr-mini {
  flex: 0 0 auto;
  padding: calc(var(--u) * .45);
  border-radius: calc(var(--u) * .8);
  background: #fff;
}
.pt-qr-mini .pt-qr-codigo { width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); }
.pt-qr-mini.sin-qr { display: none; }

.pt-fuertes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * .7) calc(var(--u) * 1.4);
  padding: calc(var(--u) * .4) calc(var(--u) * .4) 0;
}
.pt-fuerte {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * .55);
  font-size: calc(var(--u) * 1.05);
  font-weight: 600;
  color: var(--pt-suave);
}
.pt-fuerte i { color: var(--pt-verde); font-size: 1.2em; }

/* =====================================================================
   QR
   ===================================================================== */
.pt-qr {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * .9);
  padding: calc(var(--u) * .75);
  padding-right: calc(var(--u) * 1.2);
  border-radius: calc(var(--u) * 1.1);
  background: #fff;
  color: #14163A;
  box-shadow: var(--pt-sombra);
}
.pt-qr-codigo {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  flex: 0 0 auto;
}
.pt-qr-codigo img { width: 100%; height: 100%; display: block; }
.pt-qr-texto { max-width: calc(var(--u) * 10); }
.pt-qr-texto b {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: calc(var(--u) * 1.15);
  line-height: 1.1;
}
.pt-qr-texto span { font-size: calc(var(--u) * .8); color: #5B5F80; line-height: 1.25; display: block; margin-top: calc(var(--u) * .3); }
.pt-qr.sin-qr { display: none; }

/* =====================================================================
   EQUIPO
   ===================================================================== */
.pt-producto {
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  gap: calc(var(--u) * 3);
  height: 100%;
}

/* ---- Fotos ---- */
.pt-foto {
  position: relative;
  border-radius: calc(var(--u) * 2);
  overflow: hidden;
  background: var(--pt-panel);
  border: 1px solid var(--pt-linea);
  box-shadow: var(--pt-sombra);
  min-height: 0;
}
.pt-foto-capa {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.3s ease;
  overflow: hidden;
}
.pt-foto-capa.activa { opacity: 1; }
.pt-foto-capa.fallo { display: none; }

.pt-foto-fondo {
  position: absolute;
  inset: -12%;
  background-size: cover;
  background-position: center;
  filter: blur(calc(var(--u) * 2.5)) saturate(1.25) brightness(.8);
  transform: scale(1.05);
}
.pt-foto-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Modo "Completa sobre fondo blanco" */
.pt-foto.modo-blanco { background: #fff; }
.pt-foto.modo-blanco .pt-foto-capa { background: #fff; }
.pt-foto.modo-blanco .pt-foto-img { inset: calc(var(--u) * 1.5); width: calc(100% - var(--u) * 3); height: calc(100% - var(--u) * 3); }

/* Modo "Llenar el recuadro" (recorta las orillas) */
.pt-foto.modo-recortar .pt-foto-img { object-fit: cover; }

/* Movimiento lento sobre la foto que está al frente */
.pt-foto.con-movimiento .pt-foto-capa.activa .pt-foto-img {
  animation: pt-ken-a var(--dur-foto, 6s) ease-out both;
}
.pt-foto.con-movimiento .pt-foto-capa.activa:nth-child(even) .pt-foto-img {
  animation-name: pt-ken-b;
}
@keyframes pt-ken-a { from { transform: scale(1); } to { transform: scale(1.07) translate(-1%, -1%); } }
@keyframes pt-ken-b { from { transform: scale(1.07) translate(1%, 0); } to { transform: scale(1); } }

.pt-foto-vacia {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--pt-tenue);
  font-size: calc(var(--u) * 6);
}

.pt-insignias {
  position: absolute;
  top: calc(var(--u) * 1.2);
  left: calc(var(--u) * 1.2);
  right: calc(var(--u) * 1.2);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * .6);
  z-index: 2;
}
.pt-insignia {
  padding: calc(var(--u) * .45) calc(var(--u) * 1.05);
  border-radius: 999px;
  font-weight: 700;
  font-size: calc(var(--u) * 1);
  color: #fff;
  background: rgba(8, 10, 45, .72);
  box-shadow: 0 calc(var(--u) * .3) calc(var(--u) * 1) rgba(0, 0, 0, .25);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .4);
}
.pt-insignia.oferta { background: var(--pt-magenta); }
.pt-insignia.destacado { background: var(--pt-degradado); }
.pt-insignia.stock { background: var(--pt-cyan); color: #002233; }

.pt-puntos {
  position: absolute;
  bottom: calc(var(--u) * 1.3);
  left: calc(var(--u) * 1.4);
  display: flex;
  gap: calc(var(--u) * .45);
  z-index: 2;
}
.pt-puntos span {
  width: calc(var(--u) * .65);
  height: calc(var(--u) * .65);
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
  transition: width .4s ease, background .4s ease;
}
.pt-puntos span.activo { width: calc(var(--u) * 2); background: #fff; }

/* Sobre la foto va compacto: tapa lo menos posible del equipo */
.pt-foto .pt-qr {
  position: absolute;
  right: calc(var(--u) * 1.1);
  bottom: calc(var(--u) * 1.1);
  z-index: 2;
  padding: calc(var(--u) * .55);
  padding-right: calc(var(--u) * .9);
  gap: calc(var(--u) * .7);
}
.pt-foto .pt-qr-codigo { width: calc(var(--u) * 6.2); height: calc(var(--u) * 6.2); }
.pt-foto .pt-qr-texto { max-width: calc(var(--u) * 7.5); }
.pt-foto .pt-qr-texto b { font-size: calc(var(--u) * 1); }
.pt-foto .pt-qr-texto span { font-size: calc(var(--u) * .72); }

/* ---- Información ---- */
.pt-info {
  display: flex;
  flex-direction: column;
  justify-content: safe center;   /* "safe": si no cabe, se recorta abajo y nunca el título */
  gap: calc(var(--u) * 1.3);
  min-height: 0;
  overflow: hidden;
  padding: calc(var(--u) * .5) 0;
}

/* Ningún bloque se encoge: si no cabe todo, ajustar_info_pantalla quita bloques enteros. */
.pt-info > * { flex-shrink: 0; }

.pt-etiquetas { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .6); }

.pt-titulo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: calc(var(--u) * 3.5);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pt-titulo.largo { font-size: calc(var(--u) * 2.7); }

.pt-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * .75);
}
.pt-spec {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * .9);
  padding: calc(var(--u) * .8) calc(var(--u) * 1);
  border-radius: calc(var(--u) * 1);
  background: var(--pt-panel);
  border: 1px solid var(--pt-linea);
  min-width: 0;
}
.pt-spec-icono {
  flex: 0 0 auto;
  width: calc(var(--u) * 2.6);
  height: calc(var(--u) * 2.6);
  border-radius: calc(var(--u) * .7);
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 1.3);
  color: var(--pt-cyan);
  background: rgba(76, 183, 229, .14);
}
.pt-spec:nth-child(2) .pt-spec-icono { color: var(--pt-magenta); background: rgba(229, 38, 201, .14); }
.pt-spec:nth-child(3) .pt-spec-icono { color: #a78bfa; background: rgba(167, 139, 250, .16); }
.pt-spec:nth-child(4) .pt-spec-icono { color: var(--pt-verde); background: rgba(52, 211, 153, .14); }
.pt-spec-texto { min-width: 0; }
.pt-spec-etiqueta {
  font-size: calc(var(--u) * .72);
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--pt-tenue);
  font-weight: 600;
}
.pt-spec-valor {
  font-size: calc(var(--u) * 1.18);
  font-weight: 600;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pt-precio { display: flex; flex-direction: column; gap: calc(var(--u) * .3); }
.pt-precio-antes {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * .9);
  font-size: calc(var(--u) * 1.3);
  color: var(--pt-tenue);
}
.pt-precio-antes s { text-decoration-thickness: 2px; }
.pt-ahorro {
  font-size: calc(var(--u) * .95);
  font-weight: 700;
  color: #04361f;
  background: var(--pt-verde);
  padding: calc(var(--u) * .25) calc(var(--u) * .8);
  border-radius: 999px;
}
.pt-precio-linea { display: flex; align-items: baseline; gap: calc(var(--u) * 1); flex-wrap: wrap; }
.pt-precio-actual {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: calc(var(--u) * 5.4);
  line-height: 1;
  letter-spacing: -.035em;
}
.pt-precio-nota { font-size: calc(var(--u) * 1.05); color: var(--pt-tenue); font-weight: 600; }
.pt-meses {
  font-size: calc(var(--u) * 1.3);
  color: var(--pt-suave);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * .6);
}
.pt-meses i { color: var(--pt-cyan); }
.pt-meses b { color: var(--pt-tinta); }

.pt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * .55);
  max-height: calc(var(--u) * 5.6);
  overflow: hidden;
}
.pt-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .45);
  padding: calc(var(--u) * .45) calc(var(--u) * .95);
  border-radius: 999px;
  background: var(--pt-panel);
  border: 1px solid var(--pt-linea);
  font-size: calc(var(--u) * 1);
  font-weight: 600;
  white-space: nowrap;
}
.pt-chip i { color: var(--pt-verde); }

.pt-programas-titulo {
  font-size: calc(var(--u) * .78);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--pt-tenue);
  font-weight: 600;
  margin-bottom: calc(var(--u) * .5);
}
.pt-programas-lista {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * .5);
  max-height: calc(var(--u) * 2.6);
  overflow: hidden;
}
.pt-programa {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .45);
  padding: calc(var(--u) * .3) calc(var(--u) * .8) calc(var(--u) * .3) calc(var(--u) * .35);
  border-radius: 999px;
  background: var(--pt-panel-fuerte);
  font-size: calc(var(--u) * .92);
  font-weight: 600;
  white-space: nowrap;
}
.pt-programa img,
.pt-programa .chip-programa-icono-generico {
  width: calc(var(--u) * 1.6);
  height: calc(var(--u) * 1.6);
  border-radius: 50%;
  background: #fff;
  padding: calc(var(--u) * .2);
  display: inline-grid;
  place-items: center;
  color: #14163A;
  font-size: calc(var(--u) * .8);
}

.pt-desc {
  font-size: calc(var(--u) * 1.08);
  line-height: 1.45;
  color: var(--pt-suave);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* =====================================================================
   PORTADA DE CATEGORÍA
   ===================================================================== */
.pt-portada {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: calc(var(--u) * 3);
  height: 100%;
  padding: 0 calc(var(--u) * 2);
}
.pt-portada-eyebrow {
  font-size: calc(var(--u) * 1.1);
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--pt-tenue);
  font-weight: 600;
}
.pt-portada-nombre {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: calc(var(--u) * 7);
  line-height: .95;
  letter-spacing: -.045em;
  margin: calc(var(--u) * 1) 0 calc(var(--u) * 1.6);
}
.pt-portada-conteo { font-size: calc(var(--u) * 1.8); color: var(--pt-suave); }
.pt-portada-conteo b { color: var(--pt-tinta); }

.pt-abanico { position: relative; height: 80%; }
.pt-abanico-foto {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: calc(var(--u) * 1.6);
  background: #fff center / contain no-repeat;
  box-shadow: var(--pt-sombra);
  border: calc(var(--u) * .35) solid #fff;
}
.pt-abanico-foto:nth-child(1) { transform: translate(-95%, -45%) rotate(-9deg); }
.pt-abanico-foto:nth-child(2) { transform: translate(-5%, -55%) rotate(8deg); }
.pt-abanico-foto:nth-child(3) { transform: translate(-50%, -50%) rotate(-1deg); z-index: 2; }

/* =====================================================================
   MOSAICO ("más opciones")
   ===================================================================== */
.pt-mosaico { display: flex; flex-direction: column; height: 100%; gap: calc(var(--u) * 1.6); }
.pt-mosaico-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 2); }
.pt-mosaico-titulo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: calc(var(--u) * 3.4);
  letter-spacing: -.035em;
  margin: 0;
}
.pt-mosaico-sub { font-size: calc(var(--u) * 1.3); color: var(--pt-suave); }
.pt-mosaico-rejilla {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: calc(var(--u) * 1.3);
}
.pt-tarjeta {
  display: flex;
  flex-direction: column;
  border-radius: calc(var(--u) * 1.3);
  overflow: hidden;
  background: var(--pt-panel);
  border: 1px solid var(--pt-linea);
  min-height: 0;
}
.pt-tarjeta-foto { flex: 1; min-height: 0; background: #fff center / contain no-repeat; }
.pt-tarjeta-texto { padding: calc(var(--u) * .8) calc(var(--u) * 1); }
.pt-tarjeta-nombre {
  font-weight: 600;
  font-size: calc(var(--u) * 1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-tarjeta-precio {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: calc(var(--u) * 1.6);
}

/* =====================================================================
   ANUNCIO
   ===================================================================== */
.pt-anuncio {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  text-align: center;
  padding: 0 calc(var(--u) * 6);
}
.pt-anuncio.con-imagen { grid-template-columns: 1fr 1.1fr; text-align: left; gap: calc(var(--u) * 3); padding: 0 calc(var(--u) * 1); }
.pt-anuncio-imagen {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  border-radius: calc(var(--u) * 2);
  background: center / contain no-repeat;
}
.pt-anuncio-titulo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: calc(var(--u) * 6);
  line-height: 1;
  letter-spacing: -.045em;
  margin: 0 0 calc(var(--u) * 1.6);
}
.pt-anuncio.con-imagen .pt-anuncio-titulo { font-size: calc(var(--u) * 4.6); }
.pt-anuncio-texto { font-size: calc(var(--u) * 2); color: var(--pt-suave); line-height: 1.35; }

/* =====================================================================
   VERTICAL
   ===================================================================== */
@media (orientation: portrait) {
  .pt-intro, .pt-portada, .pt-anuncio.con-imagen {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    text-align: center;
  }
  .pt-producto { grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: calc(var(--u) * 2); }
  .pt-info { justify-content: flex-start; overflow: visible; }
  .pt-abanico { height: calc(var(--u) * 40); }
  .pt-mosaico-rejilla { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); }
  .pt-barra-der .pt-web { display: none; }
  .pt-fuertes { justify-items: start; }
  .pt-dato { text-align: left; }
}

/* =====================================================================
   MODO LIGERO: para pantallas con procesador modesto
   ===================================================================== */
.pantalla.ligero .pt-aurora,
.pantalla.ligero .pt-logo-halo { display: none; }
.pantalla.ligero .pt-foto-fondo { filter: none; opacity: .18; }
.pantalla.ligero .pt-foto.con-movimiento .pt-foto-capa.activa .pt-foto-img,
.pantalla.ligero .pt-logo-escena img { animation: none; }
.pantalla.ligero .pt-c { animation-duration: .4s; }

/* =====================================================================
   SIN BARRA DE SCROLL
   La página del catálogo sigue detrás de la pantalla, y su barra de scroll se dibujaba
   encima del diseño. Mientras la pantalla corre, la página no se mueve ni muestra barra.
   ===================================================================== */
html.con-pantalla,
body.con-pantalla {
  overflow: hidden !important;
  scrollbar-width: none;            /* Firefox */
}
html.con-pantalla::-webkit-scrollbar,
body.con-pantalla::-webkit-scrollbar,
.pantalla ::-webkit-scrollbar { display: none; width: 0; height: 0; }
.pantalla, .pantalla * { scrollbar-width: none; }

/* =====================================================================
   MODO DEMOSTRACIÓN (lo manda el celular; ver pantalla.js)
   ===================================================================== */
.pantalla.en-demo .pt-progreso { opacity: 0; }
.pt-demo { height: 100%; }

/* ---- Galería con miniaturas ---- */
.pt-demo-col-foto {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1);
  min-height: 0;
  height: 100%;
}
.pt-demo-col-foto .pt-foto { flex: 1; }
.pt-demo-contador {
  position: absolute;
  top: calc(var(--u) * 1.1);
  right: calc(var(--u) * 1.1);
  z-index: 2;
  padding: calc(var(--u) * .35) calc(var(--u) * .9);
  border-radius: 999px;
  background: rgba(8, 10, 45, .72);
  color: #fff;
  font-weight: 700;
  font-size: calc(var(--u) * .95);
  font-variant-numeric: tabular-nums;
}
.pt-miniaturas {
  display: flex;
  gap: calc(var(--u) * .6);
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  padding-top: calc(var(--u) * .3);
}
.pt-miniatura {
  flex: 0 0 auto;
  width: calc(var(--u) * 4.6);
  height: calc(var(--u) * 4.6);
  border-radius: calc(var(--u) * .7);
  background: #fff center / cover no-repeat;
  opacity: .45;
  border: calc(var(--u) * .18) solid transparent;
  transition: opacity .4s ease, border-color .4s ease, transform .4s ease;
}
.pt-miniatura.activa { opacity: 1; border-color: var(--pt-magenta); transform: translateY(calc(var(--u) * -.3)); }

/* ---- Ficha ---- */
.pt-demo-ficha {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: calc(var(--u) * 3);
}
.pt-demo-info { gap: calc(var(--u) * 1.05); }
.pt-demo-chips { max-height: calc(var(--u) * 5.6); }
.pt-demo-programas { max-height: calc(var(--u) * 2.6); }
.pt-demo-desc { -webkit-line-clamp: 2; font-size: calc(var(--u) * 1); }
.pt-demo-galeria .pt-qr { position: absolute; right: calc(var(--u) * 1.1); bottom: calc(var(--u) * 1.1); z-index: 2; }

/* ---- Fotos a pantalla completa ---- */
.pt-demo-fotos {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1);
}
.pt-demo-fotos .pt-foto { flex: 1; }
.pt-demo-fotos-cartela {
  position: absolute;
  left: calc(var(--u) * 1.6);
  bottom: calc(var(--u) * 7.2);
  z-index: 3;
  max-width: 60%;
  padding: calc(var(--u) * 1) calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 1.3);
  background: rgba(8, 10, 45, .78);
  color: #fff;
  box-shadow: var(--pt-sombra);
}
.pt-demo-fotos-nombre {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: calc(var(--u) * 1.9);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.pt-demo-fotos-precio {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: calc(var(--u) * 2.8);
  line-height: 1.1;
}

/* ---- Formas de pago ---- */
.pt-demo-pagos {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: calc(var(--u) * 3);
}
.pt-demo-pagos-equipo {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.2);
  min-height: 0;
}
.pt-demo-pagos-equipo .pt-demo-col-foto { flex: 1; height: auto; }
.pt-demo-pagos-equipo .pt-titulo { font-size: calc(var(--u) * 2.4); }
.pt-demo-pagos-opciones {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 1);
  min-height: 0;
}
.pt-pago {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.5);
  border-radius: calc(var(--u) * 1.2);
  background: var(--pt-panel);
  border: 1px solid var(--pt-linea);
}
.pt-pago-contado { border-color: rgba(229, 38, 201, .55); box-shadow: 0 0 calc(var(--u) * 2) rgba(229, 38, 201, .18); }
.pt-pago-etiqueta {
  font-weight: 700;
  font-size: calc(var(--u) * 1.3);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * .5);
}
.pt-pago-etiqueta i { color: var(--pt-cyan); }
.pt-pago-nota { font-size: calc(var(--u) * .95); color: var(--pt-suave); max-width: calc(var(--u) * 32); margin-top: calc(var(--u) * .2); }
.pt-pago-monto {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: calc(var(--u) * 2.6);
  white-space: nowrap;
}
.pt-plazos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 9.5), 1fr));
  gap: calc(var(--u) * .8);
}
.pt-plazo {
  padding: calc(var(--u) * .9) calc(var(--u) * .8);
  border-radius: calc(var(--u) * 1);
  background: var(--pt-panel);
  border: 1px solid var(--pt-linea);
  text-align: center;
}
.pt-plazo-meses {
  font-size: calc(var(--u) * .8);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--pt-tenue);
  font-weight: 700;
}
.pt-plazo-mensual {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: calc(var(--u) * 1.9);
  line-height: 1.2;
}
.pt-plazo-mensual span { font-size: .5em; color: var(--pt-suave); font-weight: 600; }
.pt-plazo-total { font-size: calc(var(--u) * .8); color: var(--pt-tenue); }

/* ---- Comparar de 2 a 4 ---- */
.pt-comparar { display: flex; flex-direction: column; gap: calc(var(--u) * 1.1); }
.pt-cmp-rejilla {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: calc(var(--u) * 9) repeat(var(--columnas), minmax(0, 1fr));
  grid-template-rows: minmax(calc(var(--u) * 9), 1fr);   /* el renglón de fotos toma lo que sobre */
  grid-auto-rows: auto;
  column-gap: calc(var(--u) * 1.2);
}
.pt-cmp-etiqueta {
  align-self: stretch;
  display: flex;
  align-items: center;
  font-size: calc(var(--u) * .78);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--pt-tenue);
  font-weight: 700;
  border-top: 1px solid var(--pt-linea);
}
.pt-cmp-etiqueta:empty { border-top: 0; }
.pt-cmp-celda {
  background: var(--pt-panel);
  padding: calc(var(--u) * .5) calc(var(--u) * 1.1);
  border-top: 1px solid var(--pt-linea);
  min-width: 0;
  min-height: 0;
}
.pt-cmp-celda.arriba {
  border-top: 0;
  border-radius: calc(var(--u) * 1.4) calc(var(--u) * 1.4) 0 0;
  padding-top: calc(var(--u) * 1);
}
.pt-cmp-celda.abajo {
  border-radius: 0 0 calc(var(--u) * 1.4) calc(var(--u) * 1.4);
  padding-bottom: calc(var(--u) * 1);
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: calc(var(--u) * .4);
  min-height: calc(var(--u) * 3.4);
}
.pt-cmp-foto {
  position: relative;
  height: 100%;
  min-height: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 1);
  overflow: hidden;
}
.pt-cmp-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Muchos renglones (equipos de categorías distintas): todo más apretado para que quepa */
.pt-cmp-rejilla.compacta .pt-cmp-celda { padding-top: calc(var(--u) * .28); padding-bottom: calc(var(--u) * .28); }
.pt-cmp-rejilla.compacta .pt-cmp-celda.arriba { padding-top: calc(var(--u) * .8); }
.pt-cmp-rejilla.compacta .pt-cmp-valor { font-size: calc(var(--u) * .9); -webkit-line-clamp: 1; }
.pt-cmp-rejilla.compacta .pt-cmp-valor.lista { -webkit-line-clamp: 2; }
.pt-cmp-rejilla.compacta .pt-cmp-etiqueta { font-size: calc(var(--u) * .68); }
.pt-cmp-rejilla.compacta .pt-cmp-precio { font-size: calc(var(--u) * 1.9); }
.pt-cmp-rejilla.compacta .pt-cmp-nombre { font-size: calc(var(--u) * 1.2); }
.pt-cmp-valor.lista { font-size: calc(var(--u) * .88); font-weight: 500; color: var(--pt-suave); -webkit-line-clamp: 3; }
.pt-cmp-nombre {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: calc(var(--u) * 1.4);
  line-height: 1.1;
  letter-spacing: -.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pt-cmp-promo {
  display: inline-flex;
  gap: calc(var(--u) * .3);
  align-items: center;
  margin-top: calc(var(--u) * .35);
  padding: calc(var(--u) * .15) calc(var(--u) * .6);
  border-radius: 999px;
  background: var(--pt-degradado);
  color: #fff;
  font-size: calc(var(--u) * .78);
  font-weight: 700;
}
.pt-cmp-precio {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: calc(var(--u) * 2.3);
  line-height: 1.1;
}
.pt-cmp-meses { font-size: calc(var(--u) * .85); color: var(--pt-suave); }
.pt-cmp-valor {
  font-size: calc(var(--u) * 1.05);
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pt-cmp-precio.mejor, .pt-cmp-valor.mejor { color: var(--pt-verde); }
.pt-cmp-valor.mejor::after { content: " \25B2"; font-size: .7em; }
.pt-cmp-insignia {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .3);
  padding: calc(var(--u) * .25) calc(var(--u) * .7);
  border-radius: 999px;
  background: rgba(52, 211, 153, .16);
  color: var(--pt-verde);
  font-size: calc(var(--u) * .8);
  font-weight: 700;
  white-space: nowrap;
}
.pt-cmp-insignia.precio { background: var(--pt-magenta); color: #fff; }

@media (orientation: portrait) {
  .pt-demo-ficha, .pt-demo-pagos { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: calc(var(--u) * 2); }
  .pt-cmp-rejilla { grid-template-columns: calc(var(--u) * 7) repeat(var(--columnas), minmax(0, 1fr)); column-gap: calc(var(--u) * .7); }
}

/* Para medir si la información cabe (ajustar_info_pantalla) sin la animación de entrada */
.pt-slide.midiendo .pt-c { animation: none !important; }