/** Shopify CDN: Minification failed

Line 1173:0 Expected "}" to go with "{"

**/
/* ==========================================================================
   fxa-lp.css — capa de código de la landing de banners.

   Todo va bajo .fxa-lp* para no chocar con el tema. El prefijo y los
   colores los rellena armar-pagina.mjs; este archivo NO se edita a mano.

   REGLAS QUE NO SE TOCAN (cada una salió de una corrección en producción):
   - TIPOGRAFÍA IGUAL A LA DE LOS BANNERS y CARGADA en la sección header. Si
     solo se nombra la fuente, cae al fallback del sistema y la capa de código
     desentona con las imágenes.
   - Fondos con degradado: las bandas de código no deben "cortarse" contra los
     banners; la unión tiene que leerse como una sola página.
   - Banners en columna centrada en computador (bloque del final del archivo),
     igual de centrados que en el celular.
   - Un solo estilo de botón de compra. Convivir tres tamaños se nota al bajar.

   La PALETA no se elige: sale de medir-producto.mjs sobre la foto del envase.
   El único color fijo del archivo es el verde de WhatsApp, que es de marca.
   ========================================================================== */
/* Los colores NO se escriben a mano: los rellena armar-pagina.mjs con lo que
   midio medir-producto.mjs sobre la foto del envase. El acento es el color del
   propio producto, que es la unica eleccion que generaliza a cualquier rubro. */
.fxa-lp {
  --acento: #43c3fb; --acento-2: #3498C4; --acento-3: #85D8FC;
  --acento-txt: #43c3fb; --acento-3-txt: #85D8FC;
  --bg0: #08080A; --bg1: #121216; --bg2: #16171C;
  --tarjeta: rgba(242,244,248,0.06); --tarjeta-sel: rgba(67,195,251,0.12); --tarjeta-cinta: var(--bg1);
  --ivory: #F2F4F8; --warm: #9AA3AE;
  --borde: rgba(67,195,251,0.28);
  --line: rgba(67,195,251,0.22); --glow: 0 0 24px rgba(67,195,251,0.35);
  --ease: cubic-bezier(0.4,0,0.2,1); --grad-acento: linear-gradient(135deg, var(--acento), var(--acento-2));
  --serif: "Montserrat", "Segoe UI", Arial, sans-serif;
  --sans: "Poppins", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-family: var(--sans);
  /* Adorno de temporada. Sin `fondo_patron` vale none y no pinta nada. Las
     secciones que traen su propio degradado lo tapan: el patron se ve en las
     bandas de banners, que es el fondo que se ve de verdad. */
  --patron: none;
  background-image: var(--patron);
  background-repeat: repeat;
  background-size: 240px 240px;
}
.fxa-lp * { box-sizing: border-box; }
.fxa-lp img { max-width: 100%; }

/* botón base (dorado). NUNCA en 2 líneas (pedido del dueño, 2026-07-22):
   white-space:nowrap + copy corto en vez de "Pedir ahora · Paga al recibir"
   (esa reaseguranza ya vive en el marquee/trust line, no hace falta repetirla
   en el botón). Si el texto algún día se alarga, clamp() reduce la fuente
   antes de romper la línea. */
.fxa-lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, var(--acento-3), var(--acento)); color: #101216; font-family: var(--sans);
  font-weight: 700; font-size: 15px; text-decoration: none; border: 1px solid var(--acento); cursor: pointer;
  padding: 14px 26px; border-radius: 999px; box-shadow: 0 8px 24px rgba(67,195,251,0.2);
  white-space: nowrap; transition: background-image .3s cubic-bezier(.4,0,.2,1), color .3s cubic-bezier(.4,0,.2,1), border-color .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1); }
/* El hover del NMN NO empuja el boton: invierte el color y agranda el halo.
   El fondo va de gradiente a gradiente porque entre un gradiente y un color
   plano el navegador no interpola: saltaria de golpe. */
.fxa-lp-btn:hover { background-image: linear-gradient(180deg, var(--bg0), var(--bg0));
  color: var(--acento-txt); border-color: var(--acento);
  box-shadow: 0 12px 30px rgba(67,195,251,0.3); }
.fxa-lp-btn .arw { transition: transform .3s cubic-bezier(.4,0,.2,1); }
.fxa-lp-btn:hover .arw { transform: translateX(3px); }
.fxa-lp-btn.sm { padding: 10px 18px; font-size: 14px; }
.fxa-lp-btn.big { padding: 16px 34px; font-size: 17px; }

/* ---------------- HEADER (negro, funde con el hero) ---------------- */
.fxa-lp-header { position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, #0D0D0D, var(--bg0)); border-bottom: 1px solid rgba(67,195,251,0.16); }
/* Aire sobre la barra, portado del NMN (2026-08-28): alli el contenedor
   pone 24px en computador y 10px en movil, y el hero suma sus 20. La
   landing arrancaba pegada al borde. El header es sticky pero lleva fondo
   propio, asi que el padding no abre un hueco al bajar. */
.fxa-lp-header { border-top: 24px solid #000000; }
@media (max-width: 749px) { .fxa-lp-header { border-top-width: 10px; } }
.fxa-lp-header .in { max-width: 1200px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 20px 40px; }
/* El boton del header con la medida del NMN (14/28 y 15px): la clase
   `.sm` lo dejaba en 10/18 y 14px, mas bajo que su barra. */
.fxa-lp-header .fxa-lp-btn { padding: 14px 28px; font-size: 15px; }
@media (max-width: 749px) { .fxa-lp-header .in { padding: 12px 16px; } }
/* Tamano del logo (2026-08-18, pedido del dueno: se veia chico en las dos
   puntas de la pagina). La base subio de 23 a 30 px y todo va multiplicado por
   --logo-scale, que cada seccion emite desde su ajuste "Tamano del logo" del
   personalizador. Sin la variable el calc cae a 1 y queda la base, asi que una
   landing vieja que no la emita sigue funcionando. */
.fxa-lp-logo { font-family: var(--serif); font-weight: 800; font-size: calc(30px * var(--logo-scale, 1)); letter-spacing: -0.01em;
  color: var(--acento-txt); text-decoration: none; line-height: 1; }
.fxa-lp-logo span { display: block; font-family: var(--sans); font-weight: 600; font-size: calc(13px * var(--logo-scale, 1));
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm); margin-top: 4px; }
@media (max-width: 600px) { .fxa-lp-logo { font-size: calc(25px * var(--logo-scale, 1)); } .fxa-lp-logo span { font-size: calc(11px * var(--logo-scale, 1)); } }
/* logo por IMAGEN (asset oficial): la img manda su alto, el ancho se ajusta */
.fxa-lp-logo.has-img { display: inline-flex; align-items: center; }
/* 34px se quedaba corto: muchos logos son apaisados y con margen transparente
   propio, asi que la marca acaba ocupando la mitad de esa altura */
.fxa-lp-logo.has-img img { display: block; height: calc(70px * var(--logo-scale, 1)); width: auto; }
@media (max-width: 600px) { .fxa-lp-logo.has-img img { height: calc(56px * var(--logo-scale, 1)); } }
/* LOGO + TEXTO (2026-09-21, OM Style): para logos que son solo un sello o un
   icono. La imagen va a la izquierda y la marca al lado, con la tipografia
   del wordmark. El alt de la imagen va vacio: el texto ya nombra la marca.
   En computador el sello usa los 70 px de cualquier logo; en celular baja a 44
   para que sello y texto quepan en el header sin agrandarlo.
   Es <b> y no <span> porque `.fxa-lp-logo span` es la linea 2 (chica,
   en mayusculas). */
.fxa-lp-logo.con-texto { gap: 12px; }
.fxa-lp-logo-txt { font: inherit; color: inherit; white-space: nowrap; }
@media (max-width: 600px) { .fxa-lp-logo.con-texto { gap: 10px; } .fxa-lp-logo.con-texto img { height: calc(44px * var(--logo-scale, 1)); } }
/* MÓVIL (2026-07-21, pedido del dueño): el header muestra SOLO el logo,
   centrado; el botón "Pedir ahora" se oculta (los CTAs de la página y el
   sticky ya cubren la conversión). En desktop se mantiene logo + botón. */
@media (max-width: 749px) {
  .fxa-lp-header .in { justify-content: center; }
  .fxa-lp-header .in .js-releasit { display: none; }
  .fxa-lp-logo { text-align: center; }
}

/* ---------------- MARQUEE (banda negra, transición suave) ---------------- */
/* NAVEGACION DEL HEADER — portada del NMN (2026-08-28).
   En computador va como pildora translucida; en celular colapsa en el boton
   hamburguesa y se despliega como panel. Los enlaces apuntan a las anclas que
   la landing YA tiene: no se inventan secciones. */
.fxa-lp-header .in { position: relative; }
.fxa-lp-nav { display: flex; list-style: none; margin: 0; gap: 32px;
  background: rgba(242,244,248,0.03); padding: 10px 32px; border-radius: 100px;
  border: 1px solid rgba(242,244,248,0.08); }
.fxa-lp-nav a { color: rgba(242,244,248,0.7); text-decoration: none; font-family: var(--sans);
  font-size: 15px; font-weight: 500; transition: color .2s var(--ease); }
.fxa-lp-nav a:hover, .fxa-lp-nav a:focus-visible { color: var(--acento-txt); }
.fxa-lp-navact { display: flex; align-items: center; gap: 12px; }
.fxa-lp-burger { display: none; flex-direction: column; gap: 6px; padding: 4px;
  background: none; border: 0; cursor: pointer; }
.fxa-lp-burger span { display: block; width: 25px; height: 2px; background: var(--ivory);
  transition: transform .25s var(--ease), opacity .2s var(--ease); }
@media (max-width: 749px) {
  /* el header movil centraba el logo (regla del 2026-07-21, cuando no habia
     nada mas): con hamburguesa vuelve a repartirse logo | boton */
  .fxa-lp-header .in { justify-content: space-between; }
  .fxa-lp-nav { display: none; position: absolute; top: calc(100% + 10px); left: 24px; right: 24px;
    flex-direction: column; gap: 18px; padding: 26px; border-radius: 24px;
    background: var(--bg1); border: 1px solid var(--line); text-align: center;
    z-index: 100; box-shadow: 0 20px 44px rgba(0,0,0,0.5); }
  .fxa-lp-nav.open { display: flex; }
  .fxa-lp-nav a { font-size: 17px; }
  .fxa-lp-burger { display: flex; }
}

.fxa-lp-marquee { background: linear-gradient(180deg, var(--bg1), var(--bg0)); color: var(--ivory); overflow: hidden;
  border-top: 1px solid rgba(67,195,251,0.14); border-bottom: 1px solid rgba(67,195,251,0.14); }
/* La cinta horizontal SOLO en celular (2026-08-28): en computador el
   header ya lleva la navegacion y el NMN no la muestra. */
@media (min-width: 750px) { .fxa-lp.fxa-lp-marquee { display: none; } }
.fxa-lp-marquee .track { display: flex; width: max-content; align-items: center;
  animation: fxa-lp-scroll var(--dur, 26s) linear infinite; }
.fxa-lp-marquee:hover .track { animation-play-state: paused; }
.fxa-lp-marquee .it { display: inline-flex; align-items: center; gap: 10px; padding: 13px 0; margin-right: 34px;
  font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: 0.02em; white-space: nowrap; }
.fxa-lp-marquee .it::before { content: "✦"; color: var(--acento-txt); font-size: 11px; }
@keyframes fxa-lp-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fxa-lp-marquee .track { animation: none; } }

/* ---------------- CTA band (negro, funde con las imágenes) ---------------- */
.fxa-lp-cta { text-align: center; padding: 54px 20px;
  background: linear-gradient(180deg, var(--bg0) 0%, var(--bg2) 55%, var(--bg0) 100%); }
.fxa-lp-cta.alt { background: linear-gradient(180deg, var(--bg2) 0%, var(--bg1) 60%, var(--bg2) 100%); }
.fxa-lp-cta h3 { font-family: var(--serif); font-weight: 800; color: var(--ivory);
  font-size: clamp(24px, 5vw, 36px); letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 10px; max-width: 28ch; margin-left: auto; margin-right: auto; }
.fxa-lp-cta p { font-family: var(--sans); color: var(--warm); font-size: 15px; line-height: 1.6;
  max-width: 42ch; margin: 0 auto 22px; }
.fxa-lp-cta.onlybtn { padding: 22px 20px; }

/* ==========================================================================
   BOTONES DE COMPRA UNIFORMES (2026-07-28, pedido del dueño).
   Antes convivian TRES estilos y se notaba el salto al bajar por la pagina:
     - el bloque CTA de la seccion de banners: rectangulo de 10px de radio y 544px fijo
     - la seccion CTA con texto: pildora al ancho de su contenido
     - la seccion CTA sin texto: pildora de min(90%, 640px) y mas delgada
   Ahora los tres son el MISMO boton: pildora, mismo ancho, mismo alto y el
   mismo texto corto. El ancho se topa en 420px (no 640) para que en computador
   no se coma la columna de banners; en celular sigue al 90%.
   La reaseguranza larga NO va dentro del boton, va en la nota de abajo.
   ========================================================================== */
.fxa-lp-cta .fxa-lp-btn,
.fxa-lp-cta.onlybtn .fxa-lp-btn {
  /* CORREGIDO 2026-09-01: aqui habia `min(calc(100vw - 3rem), 420px)`, medido
     contra el VIEWPORT para salvar los 2px de diferencia entre el padding de
     las dos bandas. Ese apano dejo de valer cuando la pagina gano su marco
     lateral: el viewport ya no es el marco en el que vive el boton. En celular
     daba 342px dentro de una caja de 324 -> se salia 18px por la derecha y,
     al no caber en la linea, `text-align:center` no podia centrarlo y quedaba
     corrido. Ahora se mide contra el padre y la diferencia de padding se
     elimina en su origen: ambas bandas llevan 16px en celular (ver mas abajo). */
  width: min(100%, 420px);
  font-size: 17px;
  padding: 15px 28px;
}
/* Nota bajo el boton: el dueno la quiere, sirve de reaseguranza sin alargarlo. */
.fxa-lp-cta .nota { font-family: var(--sans); color: var(--warm); font-size: 13.5px;
  line-height: 1.5; margin: 10px auto 0; max-width: 42ch; }

/* ---------------- OFERTA: SELECTOR de opciones (negro, dorado) --- */
.fxa-lp-oferta { padding: 56px 20px;
  background: linear-gradient(180deg, var(--bg0) 0%, var(--bg2) 55%, var(--bg0) 100%); }
.fxa-lp-oferta .head { max-width: 640px; margin: 0 auto 26px; text-align: center; }
.fxa-lp-oferta .eyebrow { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--acento-txt); }
.fxa-lp-oferta h2 { font-family: var(--serif); font-weight: 800; color: var(--ivory);
  font-size: clamp(27px, 5.2vw, 40px); letter-spacing: -0.02em; line-height: 1.08; margin: 8px 0 6px; }
.fxa-lp-oferta .sub { font-family: var(--sans); color: var(--warm); font-size: 15px; margin: 0; }

.fxa-lp-sel { max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.fxa-lp-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: var(--tarjeta); border: 2px solid rgba(242,244,248,0.18); border-radius: 16px; padding: 14px 16px;
  transition: border-color .15s, background .15s; font-family: var(--sans); line-height: 1.7273; }
.fxa-lp-opt:hover { border-color: var(--acento); }
.fxa-lp-opt.sel { border-color: var(--acento); background: var(--tarjeta-sel); box-shadow: none; }
.fxa-lp-opt .rad { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(242,244,248,0.4);
  position: relative; transition: border-color .15s; }
.fxa-lp-opt.sel .rad { border-color: var(--acento); }
.fxa-lp-opt.sel .rad::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--acento); }
.fxa-lp-opt .main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.fxa-lp-opt .qty { font-family: var(--sans); font-weight: 800; font-size: 15px; color: var(--ivory); }
.fxa-lp-opt .sub2 { display: block; font-size: 12px; color: var(--warm); }
.fxa-lp-opt .bdg { align-self: flex-start; margin-top: 6px; background: var(--acento); color: #101216;
  font-weight: 800; font-size: 10px; letter-spacing: 0.02em; text-transform: uppercase; padding: 3px 9px;
  border-radius: 100px; white-space: nowrap; }
.fxa-lp-opt .pr { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.fxa-lp-opt .old { display: block; font-size: 12px; color: var(--warm); text-decoration: line-through; opacity: .75; }
.fxa-lp-opt .now { font-family: var(--sans); font-weight: 800; font-size: 17px; color: var(--ivory); white-space: nowrap; }
.fxa-lp-opt .cur { display: block; font-size: 11px; color: var(--warm); letter-spacing: 0.06em; }
/* Precio POR UNIDAD. Es lo que deja comparar dos packs de tamanos distintos:
   sin el, "$1.399 por 2" y "$1.799 por 3" obligan al cliente a dividir de
   cabeza. Va debajo de la moneda, en el mismo tono apagado, para que no
   compita con el precio del pack, que es el que se paga. */
.fxa-lp-opt .each { display: block; margin-top: 3px; font-size: 11px; font-weight: 600;
  color: var(--acento-3-txt); white-space: nowrap; }
.fxa-lp-selcta { max-width: 360px; margin: 20px auto 0; }
.fxa-lp-selcta .fxa-lp-btn { width: 100%; }
.fxa-lp-oferta .trust { text-align: center; max-width: 360px; margin: 14px auto 0;
  font-family: var(--sans); font-size: 12px; color: var(--warm); }
/* En COMPUTADOR las tarjetas se ensanchan hasta el 90% del ancho de los
   banners (580 de 640) para que la oferta no quede como una columna flaca en
   medio de la pagina. El valor se ajusta desde el personalizador, y en celular
   NO aplica: alli manda el ancho del contenedor. */
@media (min-width: 750px) {

}

/* disparador Releasit oculto — patrón NMN/MM (memoria releasit-solo-disparador):
   off-screen SIN clip ni white-space (el modal monta dentro y hereda esos
   estilos y se rompería). Cero estilos sobre .rsi-* (RULES.md 11). */
.fxa-lp-releasit,
.fxa-lp-hook { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* ---------------- CINTA de testimonios (giratoria, negro) ---------------- */
.fxa-lp-cinta { padding: 52px 0; background: linear-gradient(180deg, var(--bg2) 0%, var(--bg0) 100%); overflow: hidden; }
.fxa-lp-cinta .head { text-align: center; max-width: 720px; margin: 0 auto 28px; padding: 0 20px; }
.fxa-lp-cinta .eyebrow { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--acento-txt); }
.fxa-lp-cinta h2 { font-family: var(--serif); font-weight: 800; color: var(--ivory);
  font-size: clamp(25px, 4.8vw, 36px); letter-spacing: -0.02em; line-height: 1.1; margin: 8px 0 0; }
.fxa-lp-cinta .viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.fxa-lp-cinta .track { display: flex; width: max-content; align-items: stretch;
  animation: fxa-lp-scroll var(--dur, 40s) linear infinite; }
.fxa-lp-cinta .viewport:hover .track { animation-play-state: paused; }
/* Estructura de card (2026-07-22, pedido del dueño — referencia:
   rp-opiniones.liquid / reloj_presidencial_premium): estrellas arriba,
   luego avatar+nombre+FECHA (no ciudad), título en negrita, texto abajo.
   Candidata a ESTÁNDAR del catálogo, pendiente de confirmar tras revisar.
   Card MÁS ANGOSTA que antes (340→280px) y texto topado a 3 líneas para
   que no se vea tan ancho pasando en el carrusel. */
.fxa-lp-tcard { flex: 0 0 auto; width: min(280px, 72vw); margin-right: 16px; background: var(--tarjeta-cinta);
  border: 1px solid var(--borde); border-radius: 16px; padding: 20px; text-align: left;
  box-shadow: 0 8px 22px rgba(0,0,0,0.3); }
.fxa-lp-tcard .stars { margin-bottom: 10px; font-size: 14px; letter-spacing: 1px; }
.fxa-lp-tcard .stars .st { color: rgba(244,238,223,0.25); }
.fxa-lp-tcard .stars .st.on { color: var(--acento); }
.fxa-lp-tcard .who { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fxa-lp-tcard .av { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(135deg, var(--acento), var(--acento-2));
  color: #101216; font-family: var(--serif); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.fxa-lp-tcard .meta { min-width: 0; }
.fxa-lp-tcard .nm { font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--ivory); line-height: 1.25; }
.fxa-lp-tcard .dt { font-family: var(--sans); font-size: 11.5px; color: var(--warm); line-height: 1.25; }
.fxa-lp-tcard .ttl { font-family: var(--serif); font-weight: 700; font-size: 15.5px; color: var(--ivory);
  margin: 0 0 6px; line-height: 1.25; }
.fxa-lp-tcard .txt { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--warm); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fxa-lp-cinta .disc { text-align: center; font-family: var(--sans); font-size: 12px; color: var(--warm); margin: 22px auto 0; }
@media (prefers-reduced-motion: reduce) { .fxa-lp-cinta .track { animation: none; } }

/* ==========================================================================
   OPINIONES (2026-07-22, pedido del dueño): portado de
   reloj_presidencial_premium/theme-build-v2/assets/rp-styles.css (bloque
   .rv-*, escala .rp-wrap -> .fxa-lp-opiniones). Galería de fotos + lista
   paginada; contenido de la card alineado a la IZQUIERDA en desktop,
   CENTRADO en mobile (pedido explícito). Se omitió a propósito el filtro/
   orden/modal de "escribir reseña" (no se pidió esta ronda) — el CSS de esos
   bloques no se portó porque no hay HTML que lo use.
   ========================================================================== */
.fxa-lp-opiniones { background: linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 18%, var(--bg1) 82%, var(--bg0) 100%); padding: 56px 20px; }
.fxa-lp-opiniones .rv-wrap { max-width: 780px; margin: 0 auto; }
.fxa-lp-opiniones .rv-header { text-align: center; margin-bottom: 30px; }
.fxa-lp-opiniones .rv-eyebrow { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--acento-txt); margin: 0 0 8px; }
.fxa-lp-opiniones .rv-title { font-family: var(--serif); font-weight: 800; color: var(--ivory);
  font-size: clamp(25px, 4.8vw, 36px); letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 10px; }
.fxa-lp-opiniones .rv-sub { font-family: var(--sans); font-size: 15px; color: var(--warm); max-width: 560px; margin: 0 auto; }
.fxa-lp-opiniones .rv-ejemplo-note { font-family: var(--sans); font-size: 13px; color: var(--warm); margin: 10px 0 0; }
/* Resumen "4.8 ★★★★★ 32 opiniones" (2026-08-28, pedido del dueno).
   Estaba oculto con `display:none` y la nota "nunca inventar un rating
   agregado". No se inventa: el promedio y el conteo los CALCULA el JS de las
   reseñas cargadas por el dueno. Si un dia no hubiera reseñas, no se pinta. */
.fxa-lp-opiniones .rv-summary { display: inline-flex; align-items: center; gap: 10px;
  margin: 12px 0 0; }
.fxa-lp-opiniones .rv-avg { font-family: var(--serif); font-weight: 800; font-size: 22px;
  color: var(--ivory); line-height: 1; }
.fxa-lp-opiniones .rv-headstars { display: inline-flex; gap: 2px; font-size: 16.5px;
  letter-spacing: 0.99px; line-height: 1; }
.fxa-lp-opiniones .rv-count { font-family: var(--sans); font-size: 14px; color: var(--warm); }

/* Filtro/orden (2026-07-22, pedido del dueño: "agrega los filtros") */
.fxa-lp-opiniones .rv-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.fxa-lp-opiniones .rv-dd { position: relative; }
.fxa-lp-opiniones .rv-icon-btn { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line); background: var(--bg2); color: var(--acento-3-txt); cursor: pointer;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease); }
.fxa-lp-opiniones .rv-icon-btn:hover, .fxa-lp-opiniones .rv-icon-btn.is-active { border-color: var(--acento); box-shadow: var(--glow); }
/* El panel cuelga de un boton CENTRADO: con `right:0` y 250px fijos
   crecia hacia la izquierda y se salia de la pantalla (lo vio el dueno
   el 2026-08-28). Se centra sobre su boton y se topa al viewport. */
/* MODAL DE "ESCRIBA UN COMENTARIO" — portado del NMN (2026-08-28).
   DECORATIVO por decision del dueno: el del NMN tampoco envia la reseña a
   ningun sitio (no tiene fetch, ni action, ni localStorage; el paso 5 solo
   cierra). Recoge y descarta. Si algun dia hay que guardarlas, este es el
   punto donde cablear el destino. */
.fxa-lp-opiniones .rv-write { font-size: 14px; }
.fxa-lp-opiniones .rv-modal {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(3, 2, 1, 0.82);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    opacity: 0; transition: opacity 0.25s ease;
}
.fxa-lp-opiniones .rv-modal.is-open { opacity: 1; }
.fxa-lp-opiniones .rv-modal[hidden] { display: none; }
.fxa-lp-opiniones .rv-modal-panel {
    position: relative; width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto;
    background: var(--bg2); border: 1px solid var(--line); border-radius: 20px;
    padding: 40px 34px 30px; transform: translateY(14px); transition: transform 0.25s ease;
}
.fxa-lp-opiniones .rv-modal.is-open .rv-modal-panel { transform: translateY(0); }
.fxa-lp-opiniones .rv-modal-close {
    position: absolute; top: 16px; right: 18px; width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--line); background: transparent; color: var(--ivory);
    font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.fxa-lp-opiniones .rv-modal-close:hover { border-color: var(--acento); color: var(--acento-txt); }
.fxa-lp-opiniones .rv-modal-progress { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 2px 0 6px; }
.fxa-lp-opiniones .rv-modal-progress-bar { display: block; height: 100%; width: 20%; background: var(--acento); transition: width 0.3s ease; }
.fxa-lp-opiniones .rv-modal-stepind { font-size: 12px; color: var(--warm); text-align: center; margin-bottom: 18px; }
.fxa-lp-opiniones .rv-modal-title { font-family: var(--serif); font-size: 22px; font-weight: 800; color: var(--ivory); text-align: center; letter-spacing: -0.01em; }
.fxa-lp-opiniones .rv-modal-title2 { font-family: var(--serif); font-size: 18px; font-weight: 800; color: var(--ivory); text-align: center; margin-top: 24px; }
.fxa-lp-opiniones .rv-modal-sub { font-size: 14px; color: var(--warm); text-align: center; line-height: 1.55; margin-top: 8px; }
.fxa-lp-opiniones .rv-modal-product { margin: 22px 0 12px; text-align: center; }
.fxa-lp-opiniones .rv-modal-product img { width: 130px; height: 130px; object-fit: contain; display: inline-block; }
.fxa-lp-opiniones .rv-modal-product figcaption { font-family: var(--serif); font-weight: 800; color: var(--ivory); margin-top: 8px; }
.fxa-lp-opiniones .rv-modal-pname { font-family: var(--serif); font-weight: 800; color: var(--ivory); text-align: center; margin-bottom: 4px; }
.fxa-lp-opiniones .rv-rate, .fxa-lp-opiniones .rv-rate-ro { display: flex; justify-content: center; gap: 8px; margin: 14px 0 4px; }
.fxa-lp-opiniones .rv-rate-star { background: none; border: none; padding: 0; font-size: 38px; line-height: 1; color: var(--line); cursor: pointer; transition: color 0.12s ease, transform 0.12s ease; }
.fxa-lp-opiniones .rv-rate-star.on { color: var(--acento); }
.fxa-lp-opiniones .rv-rate-star:hover { transform: scale(1.08); }
.fxa-lp-opiniones .rv-rate-ro .rv-star { font-size: 26px; }
.fxa-lp-opiniones .rv-rate-labels { display: flex; justify-content: space-between; max-width: 232px; margin: 0 auto 6px; font-size: 12px; color: var(--warm); }
.fxa-lp-opiniones .rv-modal-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 26px; }
.fxa-lp-opiniones .rv-modal-nav-center { justify-content: center; }
@media(max-width: 768px) {
.fxa-lp-opiniones .rv-modal-panel { max-width: 95vw; padding: 32px 20px 24px; }
.fxa-lp-opiniones .rv-rate-star { font-size: 32px; }
}

.fxa-lp-opiniones .rv-dd-panel { position: absolute; left: 50%; right: auto;
  transform: translateX(-50%); top: calc(100% + 10px); z-index: 20;
  width: min(280px, calc(100vw - 28px)); text-align: left;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px; box-shadow: 0 20px 44px rgba(0,0,0,0.6); }
/* En MOVIL el panel se centra respecto a la FILA de acciones, no a su boton:
   con el boton "Escriba un comentario" delante, los iconos quedan a la derecha
   y un panel centrado sobre ellos se sale de la pantalla (medido: 38 y 92px).
   `.rv-dd` pasa a estatico para que el absolute se refiera a `.rv-actions`. */
@media (max-width: 749px) {
  .fxa-lp-opiniones .rv-actions { position: relative; flex-wrap: wrap; }
  .fxa-lp-opiniones .rv-dd { position: static; }
  .fxa-lp-opiniones .rv-dd-panel { left: 50%; right: auto; transform: translateX(-50%);
    top: calc(100% + 10px); width: min(300px, calc(100vw - 28px)); }
}
.fxa-lp-opiniones .rv-dd-title { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acento-txt); margin: 0 0 12px; }
.fxa-lp-opiniones .rv-dd-group { margin-bottom: 14px; }
.fxa-lp-opiniones .rv-dd-label { display: block; font-family: var(--sans); font-size: 13px; color: var(--warm); margin-bottom: 7px; }
.fxa-lp-opiniones .rv-dd-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.fxa-lp-opiniones .rv-dd-opts-col { flex-direction: column; }
.fxa-lp-opiniones .rv-chip, .fxa-lp-opiniones .rv-sort-opt { font-family: var(--sans); font-size: 13px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ivory);
  cursor: pointer; transition: border-color .3s var(--ease), background .3s var(--ease); }
.fxa-lp-opiniones .rv-sort-opt { border-radius: 10px; text-align: left; width: 100%; }
.fxa-lp-opiniones .rv-chip:hover, .fxa-lp-opiniones .rv-sort-opt:hover { border-color: var(--acento); }
.fxa-lp-opiniones .rv-chip.is-active, .fxa-lp-opiniones .rv-sort-opt.is-active { background: var(--grad-acento); color: #101216; border-color: transparent; }
.fxa-lp-opiniones .rv-dd-clear { width: 100%; font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 8px;
  border-radius: 10px; border: 1px dashed var(--line); background: transparent; color: var(--warm); cursor: pointer; }
.fxa-lp-opiniones .rv-dd-clear:hover { color: var(--acento-3-txt); border-color: var(--acento); }

.fxa-lp-opiniones .rv-gallery-wrap { position: relative; margin: 28px 0; }
/* UNA sola fila que se desliza a los lados (el dueno, 2026-10-21): con flex-wrap las fotos bajaban
   de linea y quedaba una cuadricula aunque el bloque tiene flechas. Los margenes auto de la primera y
   la ultima la centran si caben; si no caben, se desliza (con justify-content: center la parte que
   desbordaba a la izquierda quedaba fuera de alcance). */
.fxa-lp-opiniones .rv-gallery { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; flex-wrap: nowrap;
  scroll-snap-type: x proximity; scroll-behavior: smooth; }
.fxa-lp-opiniones .rv-gallery > :first-child { margin-left: auto; }
.fxa-lp-opiniones .rv-gallery > :last-child { margin-right: auto; }
.fxa-lp-opiniones .rv-gallery::-webkit-scrollbar { display: none; }
.fxa-lp-opiniones .rv-gallery-thumb { flex: 0 0 auto; width: 84px; height: 84px; padding: 0; scroll-snap-align: start;
  border-radius: 12px; overflow: hidden; cursor: pointer; border: 1px solid var(--line); background: var(--bg2); }
.fxa-lp-opiniones .rv-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fxa-lp-opiniones .rv-gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--acento);
  background: rgba(10,10,10,0.85); color: var(--acento-3); font-size: 18px; cursor: pointer; }
.fxa-lp-opiniones .rv-gallery-arrow.prev { left: -8px; }
.fxa-lp-opiniones .rv-gallery-arrow.next { right: -8px; }
.fxa-lp-opiniones .rv-gallery-wrap.is-static .rv-gallery-arrow { display: none; }

.fxa-lp-opiniones .rv-list { display: flex; flex-direction: column; }
.fxa-lp-opiniones .rv-card { padding: 24px 0; text-align: left; }
.fxa-lp-opiniones .rv-card-stars { color: rgba(244,238,223,0.25); font-size: 15px; letter-spacing: 2px; margin-bottom: 10px; }
.fxa-lp-opiniones .rv-star.is-on { color: var(--acento-2); }
.fxa-lp-opiniones .rv-card-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.fxa-lp-opiniones .rv-avatar { width: 44px; height: 44px; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg2); border: 1px solid var(--line); color: var(--acento-3-txt); font-family: var(--serif); font-size: 17px; font-weight: 700; }
.fxa-lp-opiniones .rv-avatar.has-img { padding: 0; overflow: hidden; }
.fxa-lp-opiniones .rv-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.fxa-lp-opiniones .rv-card-meta { display: flex; flex-direction: column; gap: 1px; }
.fxa-lp-opiniones .rv-card-name { font-family: var(--sans); font-size: 14.5px; font-weight: 700; color: var(--ivory); display: inline-flex; align-items: center; gap: 6px; }
.fxa-lp-opiniones .rv-verified { font-size: 12px; font-weight: 600; color: var(--acento-txt); }
.fxa-lp-opiniones .rv-card-date { font-family: var(--sans); font-size: 12.5px; color: var(--warm); }
.fxa-lp-opiniones .rv-card-title { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--ivory); margin: 0 0 6px; }
.fxa-lp-opiniones .rv-card-text { font-family: var(--sans); font-size: 14.5px; line-height: 1.6; color: var(--warm); max-width: 680px; margin: 0; }
.fxa-lp-opiniones .rv-card-source { font-size: 12.5px; color: var(--warm); margin-top: 8px; font-style: italic; }
.fxa-lp-opiniones .rv-card-img { display: block; margin-top: 12px; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: none; cursor: pointer; }
.fxa-lp-opiniones .rv-card-img img { width: 110px; height: 110px; object-fit: cover; }
.fxa-lp-opiniones .rv-sep { border: none; border-top: 1px solid rgba(67,195,251,0.14); margin: 0; }
.fxa-lp-opiniones .rv-empty { text-align: center; color: var(--warm); padding: 30px 0; }

/* `flex-wrap: wrap` (2026-09-01): con 7 paginas son 9 hijos contando las dos
   flechas -> 406px metidos en una caja de 324 en celular, y se salian por los
   dos lados. Al permitir el salto, en celular entran la flecha y SEIS paginas
   en la primera fila y el resto baja; en computador sigue cabiendo todo. */
.fxa-lp-opiniones .rv-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 26px; }
.fxa-lp-opiniones .rv-page, .fxa-lp-opiniones .rv-page-arrow { min-width: 38px; height: 38px; padding: 0 9px;
  border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ivory);
  font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer; }
.fxa-lp-opiniones .rv-page:hover, .fxa-lp-opiniones .rv-page-arrow:hover { border-color: var(--acento); }
.fxa-lp-opiniones .rv-page.is-active { background: var(--grad-acento); color: #101216; border-color: transparent; }
.fxa-lp-opiniones .rv-page-arrow { color: var(--acento-3-txt); }
.fxa-lp-opiniones .rv-page-arrow:disabled { opacity: 0.3; cursor: default; }
.fxa-lp-opiniones .rv-page-ellipsis { color: var(--warm); padding: 0 4px; }

.fxa-lp-opiniones .rv-lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.9); padding: 24px; }
.fxa-lp-opiniones .rv-lightbox[hidden] { display: none; }
.fxa-lp-opiniones .rv-lightbox-fig { max-width: min(900px, 92vw); }
.fxa-lp-opiniones .rv-lightbox-img { max-height: 78vh; width: auto; margin: 0 auto; border-radius: 12px; display: block; }
.fxa-lp-opiniones .rv-lightbox-caption { color: var(--warm); font-size: 13px; text-align: center; margin-top: 12px; font-family: var(--sans); }
.fxa-lp-opiniones .rv-lightbox-close, .fxa-lp-opiniones .rv-lightbox-arrow { position: absolute; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(10,10,10,0.7); color: var(--ivory); font-size: 19px; cursor: pointer; }
.fxa-lp-opiniones .rv-lightbox-close { top: 20px; right: 20px; }
.fxa-lp-opiniones .rv-lightbox-arrow.prev { left: 20px; top: 50%; transform: translateY(-50%); }
.fxa-lp-opiniones .rv-lightbox-arrow.next { right: 20px; top: 50%; transform: translateY(-50%); }

/* MOBILE: se probó centrado y el dueño pidió MANTENER la alineación a la
   IZQUIERDA también en mobile (2026-07-22) — la card ya no cambia de
   alineación entre anchos, queda izquierda siempre (regla base de
   .rv-card en la sección de arriba). Solo se ajusta el padding en mobile. */
@media (max-width: 749px) {
  .fxa-lp-opiniones { padding: 36px 16px; }
}

/* ==========================================================================
   FAQ (2026-07-22, pedido del dueño: "tal cual" como en el reloj). Portado de
   reloj_presidencial_premium/theme-build-v2/rp-styles.css (.faq*) + el
   acordeón de rp-script.js (cableado en fxa-lp.js).
   ========================================================================== */
.fxa-lp-faq { padding: 56px 20px; background: var(--bg1); }
.fxa-lp-faq .head { text-align: center; max-width: 640px; margin: 0 auto 26px; }
.fxa-lp-faq .head .sub { font-family: var(--sans); color: var(--warm);
  font-size: 15px; line-height: 1.6; max-width: 46ch; margin: 10px auto 0; }
.fxa-lp-faq .eyebrow { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--acento-txt); }
.fxa-lp-faq h2 { font-family: var(--serif); font-weight: 800; color: var(--ivory);
  font-size: clamp(25px, 4.8vw, 36px); letter-spacing: -0.02em; line-height: 1.1; margin: 8px 0 0; }
.fxa-lp-faq .faq-list { max-width: 720px; margin: 0 auto; }
.fxa-lp-faq .faq-item { border-bottom: 1px solid var(--line); }
.fxa-lp-faq .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; text-align: left; background: none; border: none; color: var(--ivory);
  font-family: var(--sans); font-size: 16px; font-weight: 600; padding: 18px 2px; cursor: pointer; }
.fxa-lp-faq .faq-ico { color: var(--acento-txt); font-size: 20px; font-weight: 400; transition: transform .3s var(--ease); flex: 0 0 auto; }
.fxa-lp-faq .faq-item.is-open .faq-ico { transform: rotate(45deg); }
.fxa-lp-faq .faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.fxa-lp-faq .faq-a p { padding: 0 2px 18px; margin: 0; color: var(--warm); font-family: var(--sans); font-size: 14.5px; line-height: 1.6; max-width: 620px; }

/* ---------------- FOOTER (negro, funde desde la cinta) --- */

/* Las cintas viven FUERA de .fxa-lp-opiniones, donde estaba todo el
   CSS de .rv-star / .rv-verified. Sin esto las estrellas salian casi
   negras sobre el fondo oscuro y el badge sin estilo: por eso "no se
   parecian al NMN". Mismas reglas, con el scope de la cinta. */
.fxa-rvcar .rv-rate-ro .rv-star { font-size: 26px; }
.fxa-rvcar .rv-star.is-on { color: var(--acento); }
.fxa-rvcar .rv-verified { display: inline-flex; align-items: center;
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  color: var(--acento-txt); background: rgba(67,195,251,0.12);
  border: 1px solid rgba(67,195,251,0.32); border-radius: 100px;
  padding: 2px 8px; white-space: nowrap; }
.fxa-rvcar .rv-card-stars { display: flex; gap: 2px; margin-bottom: 10px;
  font-size: 20px; letter-spacing: 1.1px; line-height: 1; }
/* ===== CINTAS DE RESEÑAS con auto-scroll — portadas del NMN (2026-08-28).
   Dos proyecciones de UNA fuente: leen window.<PFX>_REVIEWS, el mismo modulo
   de opiniones de la pagina. Cero datos duplicados.
   La de FOTOS se oculta sola si ninguna reseña trae imagen (lo hace el JS:
   `if (!cards.length) root.hidden = true`), que es justo lo pedido.
   OJO: el @keyframes va SIN prefijar por seccion — `from`/`to` no se scopean
   (CLAUDE.md, fix del 2026-07-18 en los scope-css*.cjs). */
.fxa-rvcar { max-width: 1200px; margin: 0 auto; overflow: hidden; padding: 16px 0; }
.fxa-rvcar[hidden] { display: none; }
.fxa-rvcar-head { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.fxa-rvcar-title { font-family: var(--serif); font-weight: 800; font-size: clamp(18px, 2.2vw, 24px); letter-spacing: -0.01em; color: var(--ivory); text-align: center; margin: 0; }
.fxa-rvcar-toggle { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid var(--line); color: var(--warm); font-family: var(--sans); font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 100px; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.fxa-rvcar-toggle:hover { border-color: var(--acento); color: var(--acento-txt); }
.fxa-rvcar-toggle .fxa-rvcar-toggle-ico::before { content: "❙❙"; letter-spacing: -2px; font-size: 10px; }
.fxa-rvcar-toggle.is-paused .fxa-rvcar-toggle-ico::before { content: "▶"; }
/* Viewport: recorta el track; máscara suave en los bordes */
.fxa-rvcar-viewport { position: relative; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.fxa-rvcar-track { display: flex; gap: 14px; width: max-content; will-change: transform; animation: fxa-rvcar-marquee 40s linear infinite; }
.fxa-rvcar[data-dir="rtl"] .fxa-rvcar-track { animation-direction: reverse; }
/* Pausa por hover (desktop) — el JS refuerza touch/foco/botón */
.fxa-rvcar-viewport:hover .fxa-rvcar-track { animation-play-state: paused; }
/* Tarjeta modo FOTOS */
.fxa-rvcar-photo { position: relative; flex: 0 0 auto; width: 160px; height: 214px; padding: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--bg2); cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.fxa-rvcar-photo:hover { border-color: var(--acento); transform: translateY(-2px); }
.fxa-rvcar-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fxa-rvcar-badge { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; background: var(--acento); color: #101216; font-family: var(--sans); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 100px; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
/* Tarjeta modo TEXTO — altura fija = marquee sin saltos */
.fxa-rvcar-quote { flex: 0 0 auto; width: 320px; height: 176px; display: flex; flex-direction: column; padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(242,244,248, 0.04); text-align: left; }
.fxa-rvcar-stars { display: flex; gap: 2px; margin-bottom: 10px;
  font-size: 20px; letter-spacing: 1.1px; line-height: 1; }
.fxa-rvcar-text { flex: 1; margin: 0; font-size: 15px; line-height: 1.55; color: var(--ivory); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.fxa-rvcar-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.fxa-rvcar-name { font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--ivory); }
.fxa-rvcar-ver { margin: 0; }
/* Móvil */
@media (max-width: 749px) {
  .fxa-rvcar-photo { width: 128px; height: 170px; }
  .fxa-rvcar-quote { width: 268px; height: 172px; padding: 18px 18px 16px; }
  .fxa-rvcar-text { font-size: 14.5px; }
}
/* Movimiento reducido: sin auto-scroll → scroll nativo con snap + swipe */
@media (prefers-reduced-motion: reduce) {
  .fxa-rvcar-track { animation: none !important; transform: none !important; }
  .fxa-rvcar-viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; -webkit-overflow-scrolling: touch; }
  .fxa-rvcar-card { scroll-snap-align: start; }
}
@keyframes fxa-rvcar-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* FOOTER — estilo del NMN Cata.Kor (2026-08-28). La estructura ya era la
   misma; lo que cambia es como se ve: pieza solida con las esquinas de abajo
   redondeadas, enlaces en FILA en computador, separadores de 1px y aire.
   El `margin-bottom` de movil NO es decorativo: sin el, la barra fija
   flotante tapa el copyright. */
.fxa-lp-footer { background: linear-gradient(180deg, var(--bg0) 0%, #050505 40%); color: var(--ivory);
  border-radius: 0 0 32px 32px; padding: 80px 60px 40px; }
.fxa-lp-footer .in { max-width: 1200px; margin: 0 auto; }
.fxa-lp-footer .top { display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 40px; padding-bottom: 40px;
  border-bottom: 1px solid rgba(242,244,248,0.08); }
.fxa-lp-footer .brand { max-width: 340px; }
.fxa-lp-footer .brand .lg { font-family: var(--serif); font-weight: 800;
  font-size: calc(30px * var(--logo-scale, 1)); color: var(--acento-txt); }
.fxa-lp-footer .brand .lg span { display: block; font-family: var(--sans); font-weight: 600;
  font-size: calc(13px * var(--logo-scale, 1)); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--warm); margin-top: 4px; }
.fxa-lp-footer .brand .lg.has-img { line-height: 0; }
.fxa-lp-footer .brand .lg.con-texto { display: inline-flex; align-items: center; gap: 12px; line-height: 1; }
.fxa-lp-footer .logo-pill { display: inline-block; width: max-content; max-width: 100%; }
.fxa-lp-footer .logo-pill img { display: block; height: calc(44px * var(--logo-scale, 1)); width: auto; }
.fxa-lp-footer .brand p { font-family: var(--sans); font-size: 14px; line-height: 1.5;
  color: var(--warm); margin: 16px 0 0; max-width: 300px; }
.fxa-lp-footer .links { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 40px; }
.fxa-lp-footer .links a { color: rgba(242,244,248,0.88); text-decoration: none;
  font-family: var(--sans); font-size: 15px; transition: color .2s var(--ease); }
.fxa-lp-footer .links a:hover { color: var(--acento-3-txt); }
.fxa-lp-footer .disc { max-width: 1200px; margin: 0 auto; padding: 24px 0;
  border-bottom: 1px solid rgba(242,244,248,0.08);
  font-family: var(--sans); font-size: 12px; line-height: 1.6; color: var(--warm); }
.fxa-lp-footer .bot { max-width: 1200px; margin: 0 auto; padding-top: 30px;
  display: flex; gap: 6px 18px; justify-content: space-between;
  font-family: var(--sans); font-size: 13px; color: var(--warm); }
@media (max-width: 600px) {
  .fxa-lp-footer { padding: 40px 24px; }
  .fxa-lp-footer .links { flex-direction: column; gap: 16px; }
}
/* sitio para la barra fija: sin esto tapa el copyright */
@media (max-width: 749px) {
  .fxa-lp-footer { margin-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
/* ---------------- STICKY CTA (negro, dorado) ---------------- */
.fxa-lp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: linear-gradient(180deg, var(--bg1), var(--bg0)); color: var(--ivory);
  border-top: 1px solid rgba(67,195,251,0.22);
  box-shadow: 0 -6px 20px rgba(0,0,0,0.4); transform: translateY(110%); transition: transform .28s ease; }
.fxa-lp-sticky.show { transform: translateY(0); }
.fxa-lp-sticky .in { max-width: 900px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; padding: 10px 16px; }
.fxa-lp-sticky .pr { line-height: 1.1; }
.fxa-lp-sticky .pr b { font-family: var(--serif); font-weight: 800; font-size: 23px; color: var(--acento-3-txt); }
.fxa-lp-sticky .pr small { display: block; font-family: var(--sans); font-size: 11px; color: var(--warm); }
.fxa-lp-sticky .pr s { margin-left: 7px; font-family: var(--sans); font-weight: 600; font-size: 14px;
  color: var(--warm); opacity: .7; text-decoration-thickness: 1.5px; }
.fxa-lp-sticky .fxa-lp-btn { white-space: nowrap; }
/* MOVIL (2026-08-28, orden del dueno): SOLO el boton, en pildora, y SIEMPRE
   a la vista — no se espera al scroll. El contenedor se vuelve transparente
   porque el boton ya es la pildora dorada; el precio se oculta (en pantalla
   estrecha competia con el CTA, y el bloque de ofertas ya lo lleva).
   El `transform: translateY(0)` va tambien en `.show` para que el JS, que
   sigue poniendo y quitando la clase con el scroll, no lo mueva. */
@media (max-width: 749px) {
  .fxa-lp-sticky { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: none; border-top: 0; box-shadow: none; border-radius: 100px;
    transform: translateY(0); }
  .fxa-lp-sticky.show { transform: translateY(0); }
  .fxa-lp-sticky .pr { display: none; }
  .fxa-lp-sticky .in { max-width: none; padding: 0; }
  .fxa-lp-sticky .fxa-lp-btn { width: 100%; justify-content: center;
    padding: 16px 24px; font-size: 15px; }
}
/* ---------------- COMPRAS RECIENTES (notificación flotante) ----------------
   Componente de prueba social. RULES.md 7: se alimenta SOLO de pedidos reales
   cargados por el dueño; arranca VACÍO (sin bloques no se pinta nada).

   CONVIVENCIA CON LO FIJO DE LA LANDING:
     .fxa-lp-header  sticky top:0             z-50
     .fxa-lp-proof   fixed                    z-54  <-- ESTE
     .fxa-lp-wa      fixed right:16 bottom:78 z-55  (52x52)
     .fxa-lp-sticky  fixed bottom:0 (100%)    z-60
   El aviso va DEBAJO del WhatsApp, de la barra de precio, del carrito lateral
   y del formulario de Releasit A PROPÓSITO: si algo llegara a solaparse, el
   que se pierde es el aviso, nunca el botón de compra ni el soporte. La
   separación real la dan los OFFSETS, no el z-index.
   Desktop: abajo-IZQUIERDA (WhatsApp está a la derecha), por encima de la
   barra de precio. Móvil: arriba-DERECHA pero POR DEBAJO del header, para no
   tapar el logo ni el CTA. Los altos van en variables: si el header o la
   barra crecen, se corrige aquí y no en cada regla.
   MEDIR SIEMPRE en vivo (offsetHeight) al instanciar: la primera versión de
   esta landing usaba top:12px y el aviso TAPABA el botón del header. */
/* --- seccion de animacion (GIF / WebP animado), duplicable ---------------- */
.fxa-lp-gif { background: var(--gif-fondo, #08080A); padding: var(--gif-pt, 0) 16px var(--gif-pb, 0); }
.fxa-lp-gif .head { max-width: 640px; margin: 0 auto 16px; text-align: center; }
.fxa-lp-gif .head h2 { font-family: var(--serif); font-weight: 800; color: var(--ivory);
  font-size: clamp(22px, 4.4vw, 32px); letter-spacing: -.02em; line-height: 1.1; margin: 0 0 6px; }
.fxa-lp-gif .head p { font-family: var(--sans); color: var(--warm); font-size: 15px; line-height: 1.5; margin: 0; }
.fxa-lp-gif .wrap { max-width: var(--gif-ancho, 640px); margin: 0 auto; line-height: 0;
  border-radius: var(--gif-radio, 16px); overflow: hidden; }
.fxa-lp-gif .wrap img { display: block; width: 100%; height: auto; }
.fxa-lp-gif .wrap.vacio { display: flex; align-items: center; justify-content: center; min-height: 180px;
  line-height: 1.4; border: 1px dashed var(--line); color: var(--warm);
  font-family: var(--sans); font-size: 14px; text-align: center; padding: 20px; }
.fxa-lp-gif .pie { max-width: var(--gif-ancho, 640px); margin: 12px auto 0; text-align: center;
  font-family: var(--sans); font-size: 13px; color: var(--warm); }

/* --- seccion de video (MP4 de Archivos), duplicable ----------------------- */
/* Mismo encabezado que las ofertas. El marco lleva el aspect-ratio del video
   desde el Liquid, asi la pagina no salta cuando carga. */
.fxa-lp-video { padding: var(--vid-pt, 44px) 16px var(--vid-pb, 44px); }
.fxa-lp-video .head { max-width: 640px; margin: 0 auto 18px; text-align: center; }
.fxa-lp-video .eyebrow { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--acento-txt); }
.fxa-lp-video .head h2 { font-family: var(--serif); font-weight: 800; color: var(--ivory);
  font-size: clamp(24px, 4.8vw, 34px); letter-spacing: -.02em; line-height: 1.1; margin: 8px 0 6px; }
.fxa-lp-video .head p { font-family: var(--sans); color: var(--warm); font-size: 15px; line-height: 1.5; margin: 0; }
.fxa-lp-video .wrap { position: relative; width: min(100%, var(--vid-ancho, 320px)); margin: 0 auto;
  border-radius: 20px; overflow: hidden; background: #000; line-height: 0; box-shadow: 0 14px 34px rgba(0,0,0,0.18); }
.fxa-lp-video .wrap video { display: block; width: 100%; height: 100%; object-fit: cover; }
.fxa-lp-video .sonido { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border: 0; border-radius: 999px; background: rgba(0,0,0,0.55); color: #fff;
  font-family: var(--sans); font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; }
.fxa-lp-video .sonido svg { width: 16px; height: 16px; flex: 0 0 auto; }
.fxa-lp-video .sonido .ico-on,
.fxa-lp-video .sonido[aria-pressed="true"] .ico-off { display: none; }
.fxa-lp-video .sonido[aria-pressed="true"] .ico-on { display: block; }
.fxa-lp-video .wrap.vacio { display: flex; align-items: center; justify-content: center; min-height: 180px;
  background: transparent; box-shadow: none; line-height: 1.4; border: 1px dashed var(--line); color: var(--warm);
  font-family: var(--sans); font-size: 14px; text-align: center; padding: 20px; }
.fxa-lp-video .pie { max-width: var(--vid-ancho, 320px); margin: 12px auto 0; text-align: center;
  font-family: var(--sans); font-size: 13px; color: var(--warm); }

/* --- seccion de VARIANTES (talla, color, personaje) ----------------------- */
/* El formulario de contraentrega lee el formulario de producto del tema; esta
   seccion es ese formulario, con la pinta de la landing. */
.fxa-lp-variantes { padding: var(--var-pt, 44px) 16px var(--var-pb, 20px); }
.fxa-lp-variantes .caja { max-width: 520px; margin: 0 auto; background: var(--tarjeta);
  border: 2px solid rgba(242,244,248,0.18); border-radius: 20px; padding: 22px 18px; text-align: center; }
.fxa-lp-variantes .head { margin-bottom: 16px; }
.fxa-lp-variantes .eyebrow { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--acento-txt); }
.fxa-lp-variantes .head h2 { font-family: var(--serif); font-weight: 800; color: var(--ivory);
  font-size: clamp(22px, 4.4vw, 30px); letter-spacing: -.02em; line-height: 1.1; margin: 8px 0 6px; }
.fxa-lp-variantes .head p { font-family: var(--sans); color: var(--warm); font-size: 15px; line-height: 1.5; margin: 0; }
.fxa-lp-variantes .campos { display: grid; gap: 12px; text-align: left; }
.fxa-lp-variantes .campo { display: block; }
.fxa-lp-variantes .rotulo { display: block; font-family: var(--sans); font-weight: 700; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--warm); margin-bottom: 6px; }
.fxa-lp-variantes select,
.fxa-lp-variantes input[type="number"] { width: 100%; font-family: var(--sans); font-size: 16px; font-weight: 600;
  color: var(--ivory); background: var(--bg0); border: 2px solid rgba(242,244,248,0.22); border-radius: 14px;
  padding: 13px 14px; line-height: 1.2; appearance: none; cursor: pointer; }
.fxa-lp-variantes select:focus,
.fxa-lp-variantes input[type="number"]:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
/* La cantidad tiene que estar en el formulario para que la app la lea, pero en
   una landing de una unidad no se toca: ocupa poco y no invita a cambiarla. */
.fxa-lp-variantes .cantidad { max-width: 120px; }
.fxa-lp-variantes .precio { font-family: var(--serif); font-weight: 800; font-size: 30px; color: var(--ivory);
  margin: 16px 0 14px; letter-spacing: -0.02em; }
.fxa-lp-variantes .precio small { display: block; font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--warm); margin-top: 4px; }
/* El atributo hidden lo pisaba el display:block de la linea de arriba: el
   aviso de agotado se veia siempre. */
.fxa-lp-variantes .precio small[hidden] { display: none; }
.fxa-lp-variantes .fxa-lp-btn { width: min(100%, 420px); }
.fxa-lp-variantes .nota { font-family: var(--sans); font-size: 13px; color: var(--warm); margin: 10px 0 0; }
/* Boton de pedido a la espera de que se elijan las opciones: el raton se
   apaga para que el clic NO llegue a la app (uno "bloqueado" con JS le sumaba
   una unidad al pedido). Sigue viendose normal: la pagina responde llevando a
   la persona al selector. */
.fxa-lp .fxa-freno { pointer-events: none; }
/* Sin envoltorio: los botones que inyecta la app de contraentrega viven fuera
   de la landing, y con la regla anidada se quedaban vivos mientras el resto
   estaba frenado. La clase es nuestra y lleva prefijo, asi que no pisa nada. */
.fxa-freno { pointer-events: none !important; }
/* Pastillas de la oferta cuando la eleccion vive en las listas de variantes:
   pulsarlas hace que la app de contraentrega fije la variante de ese momento y
   no vuelva a leerla. Aqui solo INDICAN lo elegido. */
.fxa-lp .fxa-solo-lectura { pointer-events: none; }
.fxa-lp-variantes .aviso { font-family: var(--sans); font-weight: 700; font-size: 14px; line-height: 1.4;
  color: var(--acento-txt); background: rgba(67,195,251,0.10); border: 1px solid var(--acento);
  border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; }
.fxa-lp-variantes .aviso[hidden] { display: none; }
/* Notas de lo que lleva cada opcion. NO se pintan como una advertencia: son
   una aclaracion amable, en el tono del resto de la tarjeta, con un punto del
   acento por vinieta. Una letra roja de alarma aqui asusta al que iba a pedir. */
.fxa-lp-variantes .notas { list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; text-align: left; }
.fxa-lp-variantes .notas li { position: relative; padding-left: 18px;
  font-family: var(--sans); font-size: 13px; line-height: 1.45; color: var(--warm); }
.fxa-lp-variantes .notas li::before { content: ""; position: absolute; left: 4px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--acento); }
.fxa-lp-variantes .notas li[hidden] { display: none; }
/* Parpadeo al llegar desde un boton de pedido: sin el, la pagina salta al
   selector y no queda claro que hay que hacer ahi. */
@keyframes fxa-pide-atencion {
  0%, 100% { box-shadow: 0 0 0 0 rgba(67,195,251,0); }
  30% { box-shadow: 0 0 0 6px rgba(67,195,251,0.30); }
}
.fxa-lp-variantes .caja.pide-atencion { animation: fxa-pide-atencion 1.1s ease-out 2; border-color: var(--acento); }
@media (prefers-reduced-motion: reduce) {
  .fxa-lp-variantes .caja.pide-atencion { animation: none; }
}

.fxa-lp-proof-host {
  --proof-header-h: 70px;   /* medido: .fxa-lp-header.offsetHeight (69 @390) */
  --proof-sticky-h: 74px;   /* medido: .fxa-lp-sticky.offsetHeight (68-74)   */
}
.fxa-lp-proof { position: fixed; z-index: 54;
  left: 20px; bottom: calc(var(--proof-sticky-h) + 18px);
  display: flex; align-items: center; gap: 12px;
  width: min(360px, 100vw - 32px);
  background: var(--bg2);
  border: 1px solid rgba(67,195,251,0.30); border-radius: 16px;
  padding: 12px 40px 12px 12px; box-shadow: 0 14px 34px rgba(0,0,0,0.45);
  font-family: var(--sans);
  opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .35s; }
.fxa-lp-proof.is-visible { opacity: 1; transform: translateY(0); }
.fxa-lp-proof[hidden] { display: none; }
.fxa-lp-proof .ava { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--acento); background: var(--bg1); }
.fxa-lp-proof .ava[hidden] { display: none; }
.fxa-lp-proof .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* 12 / 13,5 px son los del Cata.Kor: excepcion acotada al piso de 14px del
   workspace, igual que antes, por ser un elemento secundario y efimero. */
.fxa-lp-proof .top { font-size: 12px; color: var(--warm); line-height: 1.3; overflow-wrap: anywhere; }
.fxa-lp-proof .main { font-size: 13.5px; font-weight: 700; color: var(--ivory); line-height: 1.3; overflow-wrap: anywhere; }
.fxa-lp-proof .hace { font-size: 12px; color: var(--warm); line-height: 1.3; }
.fxa-lp-proof .hace[hidden], .fxa-lp-proof .hace:empty { display: none; }
.fxa-lp-proof .x { position: absolute; top: 7px; right: 8px; width: 22px; height: 22px;
  padding: 0; border: 0; background: transparent; color: var(--warm); font-size: 18px;
  line-height: 1; cursor: pointer; border-radius: 50%; transition: color .2s; }
.fxa-lp-proof .x:hover, .fxa-lp-proof .x:focus-visible { color: var(--acento-txt); }
.fxa-lp-proof .x:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
/* 749px, NO 768: mismo corte que oculta el boton del header. */
@media (max-width: 749px) {
  /* Medido contra el NMN a 390px: el suyo va `left:60px; right:10px; top:12px`
     -> 320 de ancho. El nuestro usaba `width: min(88vw,420px)` con `right:10px`,
     que a 390 da 343: 23px mas ancho y arrancando 23px mas a la izquierda, y
     por eso el aviso se veia mas grande que el del NMN al ponerlos al lado.
     Se pasa a los dos anclajes (sin `width`) para que sea el MISMO encaje a
     cualquier ancho, no una coincidencia a 390. El tope de 420 se conserva. */
  .fxa-lp-proof { bottom: auto; top: 12px; left: 60px; right: 10px;
    width: auto; max-width: 420px; margin-left: auto; transform: translateY(-14px); }
  .fxa-lp-proof.is-visible { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .fxa-lp-proof { transition: opacity .35s; transform: none; }
  .fxa-lp-proof.is-visible { transform: none; }
}

/* WhatsApp flotante */
.fxa-lp-wa { position: fixed; right: 16px; bottom: 82px; z-index: 55; width: 52px; height: 52px;
  border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); }
/* hover/foco del boton de WhatsApp (faltaban, 2026-08-28) */
.fxa-lp-wa:hover { background: #1EBE5B; transform: translateY(-2px) scale(1.06);
  box-shadow: 0 10px 26px rgba(37,211,102,0.45); }
.fxa-lp-wa:active { transform: translateY(0) scale(1.02); }
.fxa-lp-wa:focus-visible { outline: 2px solid #25D366; outline-offset: 3px; }
.fxa-lp-wa svg { width: 28px; height: 28px; fill: #fff; }

/* ==========================================================================
   BANNERS CENTRADOS (2026-07-21, pedido del dueño): las 10 imágenes 2:3 NO
   van full-bleed en desktop — columna centrada tipo funnel móvil, para que
   la información de cada imagen se aprecie completa. En móvil quedan igual
   (ancho completo). Este CSS solo carga en el template de la landing, así
   que no toca los image-banner de otras páginas del tema.
   ========================================================================== */
#MainContent { background: #08080A; }

/* OJO al portar desde la cadena: alli los banners son la seccion NATIVA del
   tema (.banner) y el CSS llevaba un `aspect-ratio: 848/1272` fijo para
   parchear un bug del modo "adapt", que colapsaba el contenedor a 110px.
   Aqui NO aplica y se elimino a proposito por dos razones:
     1. Los banners son .fxa-lp__banner, de la seccion propia fle-landing.
     2. Las piezas NO comparten proporcion: el hero y las verticales son
        1200x2150 y las demas 1200x1607. Un aspect-ratio unico las aplastaria.
   La seccion ya reserva el alto correcto con width:100% + height:auto sobre
   una <img> que declara sus dimensiones, asi que no hay salto de layout. */

/* Columna centrada en computador. Las imagenes NO van full-bleed: se leen
   completas en una columna tipo funnel movil, igual que en la cadena. En
   movil siguen a ancho completo. El ancho real lo fija cada seccion via
   --fle-ancho (ajustable desde el personalizador); 640px es el de la cadena. */
.fxa-lp__banner { position: relative; margin-left: auto; margin-right: auto; }
@media (min-width: 750px) {
  .fxa-lp__banner { max-width: var(--fle-ancho, 640px); }
}

/* Fundido entre banners: cada pieza difumina su borde superior e inferior
   contra el fondo, para que la union entre dos imagenes no se vea como un
   tajo al hacer scroll. Se apaga por seccion con --fle-fundido: 0px. */
.fxa-lp__banner::before, .fxa-lp__banner::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: var(--fle-fundido, 64px); z-index: 2; pointer-events: none;
}
.fxa-lp__banner::before { top: 0;
  background: linear-gradient(to bottom, var(--fle-fondo, #08080A), transparent); }
.fxa-lp__banner::after { bottom: 0;
  background: linear-gradient(to top, var(--fle-fondo, #08080A), transparent); }

/* ==========================================================================
   MÓVIL COMPACTO (2026-07-21, pedido del dueño: "que no haya tanto espacio").
   Las imágenes van pegadas entre sí (0 de separación), así que el aire viene
   del padding de las bandas de código: el CTA medía 300px de alto con 140px
   de puro padding. Se recorta SOLO en móvil; en desktop se mantiene la
   respiración original. Al instanciar, MEDIR de nuevo: el aire real se ve con
   alto de la sección menos la suma de los altos de sus hijos.
   ========================================================================== */
@media (max-width: 749px) {
  /* 16px, IGUAL que `.onlybtn`: al medir el boton contra el padre, un padding
     distinto en cada banda volveria a darles anchos distintos. */
  .fxa-lp-cta { padding: 30px 16px; }
  .fxa-lp-cta h3 { margin-bottom: 8px; }
  .fxa-lp-cta p { margin-bottom: 16px; }
  .fxa-lp-cta.onlybtn { padding: 18px 16px; }
  /* El ancho del boton NO se redefine aqui: lo fija el bloque de botones
     uniformes contra el padre, y los dos padres ya miden lo mismo. */
  .fxa-lp-oferta { padding: 32px 16px; }
  .fxa-lp-oferta .head { margin-bottom: 16px; }
  .fxa-lp-cinta { padding: 32px 0; }
  .fxa-lp-cinta .head { margin-bottom: 14px; }
  .fxa-lp-footer { padding: 40px 24px; }
}

/* ==========================================================================
   URGENCIA: barra superior + tarjeta de cierre (2026-08-24, regla general).

   El rojo NO sale de medir-producto: es un color de FUNCION, como el verde de
   WhatsApp. Marca "se acaba" en cualquier paleta y por eso no hereda el acento
   del envase, que en un producto amarillo o crema no se leeria como urgencia.
   Se puede cambiar desde el personalizador.

   Los digitos van con tabular-nums y ancho minimo: sin eso, la casilla cambia
   de tamano cada vez que el segundo pasa de 1 a 2 cifras y el bloque entero
   "tiembla" una vez por segundo.
   ========================================================================== */
.fxa-lp-urg { position: relative; overflow: hidden; padding: 34px 18px 30px;
  text-align: center; background: var(--bg0); isolation: isolate; }
.fxa-lp-urg .bg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; }
.fxa-lp-urg.has-img::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(6,6,8,calc(var(--urg-vel, 62%) / 100)); }
.fxa-lp-urg .in { position: relative; max-width: 900px; margin: 0 auto; }
.fxa-lp-urg .l1 { font-family: var(--sans); font-weight: 800; color: #fff; margin: 0;
  font-size: clamp(23px, 5.8vw, 40px); line-height: 1.15; letter-spacing: -0.01em; }
.fxa-lp-urg .l1 .emo { margin-right: 8px; }
.fxa-lp-urg .l2 { font-family: var(--sans); font-weight: 400; color: rgba(255,255,255,0.94);
  margin: 4px 0 0; font-size: clamp(18px, 4.4vw, 31px); line-height: 1.2; }
.fxa-lp-urg .nota { font-family: var(--sans); font-size: 12px; color: rgba(255,255,255,0.72);
  margin: 14px auto 0; max-width: 48ch; line-height: 1.5; }

/* el reloj, compartido por las dos secciones. Un digito por casilla, como la
   referencia: asi cada cifra puede animarse sola cuando cambia, que es lo que
   da la sensacion de reloj. Con la unidad entera en una sola caja, cambiar el
   segundo hace parpadear tambien la decena que no cambio. */
.fxa-lp-cd { display: flex; justify-content: center; align-items: flex-start; gap: 16px; margin-top: 20px; }
.fxa-lp-cd.fin { display: none; }
.fxa-lp-cd .g { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.fxa-lp-cd .dr { display: flex; gap: 4px; }
/* El ancho es FLUIDO, no fijo. Con 50px fijos las seis casillas mas los huecos
   median 347px: entraban en una pantalla de 375 y se salian en una de 360, que
   es de las mas comunes. */
.fxa-lp-cd .d { display: inline-flex; align-items: center; justify-content: center;
  width: clamp(38px, 12vw, 50px); height: clamp(44px, 13.6vw, 56px);
  background: var(--urg-rojo, #E5233D); color: #fff;
  font-family: var(--sans); font-weight: 700; font-size: clamp(27px, 8.6vw, 36px); line-height: 1;
  border-radius: 10px; font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35); }
.fxa-lp-cd .lb { font-family: var(--sans); font-size: 12px; color: rgba(255,255,255,0.82); }
/* la animacion del cambio de cifra (0.3s, escala 1 -> 1.1 -> 1) */
@keyframes fxa-cd-flip {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.1); opacity: 0.7; }
  100% { transform: scale(1);   opacity: 1; }
}
.fxa-lp-cd .d.flip { animation: fxa-cd-flip 0.3s ease; }
@media (prefers-reduced-motion: reduce) { .fxa-lp-cd .d.flip { animation: none; } }

/* tarjeta de cierre */
/* TARJETA DE CIERRE — rediseño 2026-08-28 ("no se ve nada llamativo").
   Antes la carta era var(--bg2) sobre una seccion bg1->bg0: tres grises casi
   iguales, borde de 1px al 28% y ningun contraste. No se leia como el ultimo
   empujon, se leia como un bloque mas. Ahora: halo de acento tras la carta,
   filo de acento arriba, borde y sombra de color, y la foto y el precio con
   el tamaño que les toca. El badge deja el rojo fijo (era el color del reloj,
   que ya no existe) y toma el acento del producto. */
.fxa-lp-cierre { padding: 46px 18px;
  background: radial-gradient(120% 78% at 50% 0%, rgba(67,195,251,0.13) 0%, transparent 62%),
              linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 100%); }
.fxa-lp-cierre .card { position: relative; max-width: 580px; margin: 0 auto;
  background: linear-gradient(180deg, rgba(67,195,251,0.09) 0%, var(--bg2) 38%, var(--bg2) 100%);
  border: 1px solid rgba(67,195,251,0.45); border-radius: 22px; overflow: hidden;
  padding: 34px 22px 28px; text-align: center;
  box-shadow: 0 20px 46px rgba(0,0,0,0.5), 0 0 38px rgba(67,195,251,0.16), inset 0 1px 0 rgba(242,244,248,0.07); }
.fxa-lp-cierre .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--acento), transparent); }
.fxa-lp-cierre .badge { position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--acento-3), var(--acento)); color: #101216;
  font-family: var(--sans); font-weight: 800; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 6px 16px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(67,195,251,0.45); }
.fxa-lp-cierre .top { display: flex; align-items: center; gap: 16px; text-align: left; margin-top: 26px; }
.fxa-lp-cierre .ph { flex: 0 0 auto; }
.fxa-lp-cierre .ph img { width: 104px; height: 104px; object-fit: contain; display: block;
  border-radius: 14px; background: var(--bg0); border: 1px solid rgba(242,244,248,0.10); }
.fxa-lp-cierre .txt { min-width: 0; }
.fxa-lp-cierre h3 { font-family: var(--serif); font-weight: 700; color: var(--ivory);
  font-size: 22px; line-height: 1.2; margin: 0; }
.fxa-lp-cierre .precio { margin: 8px 0 0; font-family: var(--sans); display: flex;
  align-items: baseline; flex-wrap: wrap; gap: 8px; }
.fxa-lp-cierre .precio .ahora { font-weight: 800; font-size: 33px; color: var(--acento-txt); line-height: 1.1; }
.fxa-lp-cierre .precio s { color: var(--warm); font-size: 15px; margin: 0; }
.fxa-lp-cierre .precio .off { display: inline-block; background: var(--acento); color: #101216;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 7px; margin: 0; }
.fxa-lp-cierre .datos { list-style: none; margin: 22px 0 4px; padding: 0; border-top: 1px solid rgba(242,244,248,0.12); }
.fxa-lp-cierre .datos li { display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  padding: 11px 2px; border-bottom: 1px solid rgba(242,244,248,0.12); font-family: var(--sans); font-size: 14px; }
.fxa-lp-cierre .datos li:last-child { border-bottom: none; }
.fxa-lp-cierre .datos .k { color: var(--warm); text-align: left; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; }
.fxa-lp-cierre .datos .v { color: var(--ivory); font-weight: 700; text-align: right; }
.fxa-lp-cierre .fxa-lp-btn { display: flex; margin: 24px auto 0;
  width: min(calc(100vw - 3rem), 420px); max-width: 100%; font-size: 17px; padding: 16px 28px; }
.fxa-lp-cierre .nota { font-family: var(--sans); font-size: 13px; color: var(--warm);
  margin: 12px auto 0; max-width: 40ch; line-height: 1.5; }

/* Mismo ancho que los demas botones de la pagina (se mide contra el viewport),
   pero CENTRADO en la tarjeta: el ancho puede quedar mas estrecho que la card,
   y sin los margenes automaticos el boton se recostaba a la izquierda. */
.fxa-lp-cierre .fxa-lp-btn { display: flex; margin: 22px auto 0;
  width: min(calc(100vw - 3rem), 420px); max-width: 100%;
  font-size: 17px; padding: 15px 28px; }
.fxa-lp-cierre .nota { font-family: var(--sans); font-size: 13px; color: var(--warm);
  margin: 12px auto 0; max-width: 40ch; line-height: 1.5; }

@media (max-width: 749px) {
  .fxa-lp-urg { padding: 26px 14px 24px; }
  .fxa-lp-cd { gap: 12px; margin-top: 16px; }
  .fxa-lp-cierre { padding: 34px 14px; }
  .fxa-lp-cierre .top { flex-direction: column; text-align: center; gap: 12px; }
  .fxa-lp-cierre .datos li { font-size: 13.5px; }
}

/* MARCO DE LA PAGINA (2026-08-28), portado del NMN: alli lo hace el
   contenedor con `padding: 24px 24px 0` sobre un fondo mas hondo que el de las
   secciones. Aqui cada seccion es hermana, asi que va como BORDE lateral: el
   padding se pintaria del fondo de cada banda y el marco cambiaria de color;
   el borde siempre es el mismo. Arriba lo cierra el padding del header. */
.fxa-lp { border-left: 24px solid #000000; border-right: 24px solid #000000; }
.fxa-lp-footer { border-bottom: 24px solid #000000; }
/* Lo que va FIJO sobre la pagina no entra en el marco. */
.fxa-lp-sticky, .fxa-lp-proof-host, .fxa-lp-proof { border-left: 0; border-right: 0; }
@media (max-width: 749px) {
  .fxa-lp { border-left-width: 10px; border-right-width: 10px; }
  .fxa-lp-footer { border-bottom-width: 10px; }
}

/* ESQUINAS DEL MARCO (2026-08-28), portadas del NMN: 32px arriba en la primera
   seccion y 32px abajo en el pie, igual en computador y en movil. Alli el
   marco es el PADDING de un contenedor sin radio y el radio del hijo curva
   solo el contenido; aqui el marco es el BORDE de la propia seccion y el
   navegador curva el EXTERIOR, dejando el interior en `radio - grosor`. Por
   eso se pide 32 + el grosor del marco: 56 en computador (24) y 42 en movil
   (10). El contenedor va del color del marco para que la esquina recortada no
   deje asomar el fondo del tema — `body` no vale, el tema lo pinta con
   `body.gradient` y gana por especificidad. */
main { background: #000000; }
.shopify-section:has(> .fxa-lp) { background: #000000; }
.fxa-lp-header { border-radius: 56px 56px 0 0; }
.fxa-lp-footer { border-radius: 0 0 56px 56px; }
@media (max-width: 749px) {
  .fxa-lp-header { border-radius: 42px 42px 0 0; }
  .fxa-lp-footer { border-radius: 0 0 42px 42px; }
}

/* ============================================================================
   OFERTAS · vista de TARJETAS y reparto por pantalla (2026-08-31)

   Molde del NMN: en computador las tres opciones son tarjetas con su precio,
   su descripcion, su boton y su lista de ✓; en celular sigue mandando la lista
   con radio, que es la que cabe. Las DOS vistas van en el HTML y las reparte
   este CSS: el personalizador no puede decidir por ancho de pantalla.

   `.is-radio` (por defecto) no toca nada: las 25 landings anteriores no
   declaran `vista` y siguen exactamente igual.
   ========================================================================== */

/* Boton secundario / de tarjeta no destacada. Mismo molde que el principal,
   sin relleno de acento. El hover INVIERTE el color, no empuja el boton. */
.fxa-lp .fxa-btn-ghost { background: transparent; background-image: none; color: var(--ivory);
  border: 1px solid var(--line); box-shadow: none; }
.fxa-lp .fxa-btn-ghost:hover { background: var(--bg1); background-image: none;
  border-color: var(--acento); color: var(--ivory); }

/* En CELULAR las tarjetas nunca se pintan: manda la lista con radio. */
.fxa-lp-cards { display: none; }

.fxa-ocard-badge { display: inline-block; align-self: flex-start; background: var(--acento);
  color: #101216; font-family: var(--sans); font-weight: 800; font-size: 12px;
  letter-spacing: 0.02em; padding: 6px 14px; border-radius: 100px; white-space: nowrap; }
.fxa-ocard-titulo { font-family: var(--serif); font-weight: 800; font-size: 20px; color: var(--ivory);
  margin: 0; letter-spacing: -0.01em; }
.fxa-ocard-precio { margin: 18px 0 0; font-family: var(--sans); line-height: 1.1; }
.fxa-ocard-precio s { font-weight: 700; font-size: 26px; color: var(--warm); text-decoration: line-through;
  margin-right: 10px; }
.fxa-ocard-precio strong { font-weight: 800; font-size: 40px; color: var(--ivory); letter-spacing: -0.02em; }
.fxa-ocard-precio small.each { margin-top: 4px; color: var(--acento-3-txt); letter-spacing: 0; }
.fxa-ocard-precio small { display: block; margin-top: 8px; font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--warm); }
.fxa-ocard-desc { margin: 16px 0 0; font-family: var(--sans); font-size: 15px; line-height: 1.55;
  color: var(--warm); }
.fxa-ocard-lista { list-style: none; margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 12px; }
.fxa-ocard-lista li { position: relative; padding-left: 26px; font-family: var(--sans); font-size: 14.5px;
  line-height: 1.45; color: var(--ivory); }
/* El ✓ va por CSS y no dentro del texto: asi la lista se edita sin pegar el
   simbolo en cada linea, y un renglon largo sangra bajo el texto, no bajo la marca. */
.fxa-ocard-lista li::before { content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--acento-txt); font-weight: 800; }

/* 990 y no 750: es el corte del tipo hibrido, el mismo en el que el hero pasa
   a una columna. Una tableta de 768 con el corte en 750 se quedaba sin selector
   de precios arriba Y sin barra fija: ni un solo precio en la primera pantalla. */
@media (min-width: 990px) {
  /* La oferta pegada al hero desaparece en computador: alli el hero ya muestra
     el precio y los packs completos se ven al cierre. */
  .fxa-lp-oferta.is-solo_movil { display: none; }

  /* En modo tarjetas, la lista con radio y su boton unico ceden el sitio. */
  .fxa-lp-oferta.is-tarjetas .fxa-lp-sel,
  .fxa-lp-oferta.is-tarjetas .fxa-lp-selcta,
  .fxa-lp-oferta.is-tarjetas .trust { display: none; }

  .fxa-lp-oferta.is-tarjetas .fxa-lp-cards { display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px;
    max-width: 1200px; margin: 34px auto 0; align-items: stretch; }

  .fxa-ocard { display: flex; flex-direction: column; text-align: left;
    background: rgba(242,244,248,0.04); border: 1px solid rgba(242,244,248,0.14);
    border-radius: 22px; padding: 30px 28px; }
  /* La destacada no crece de tamano: se marca con el acento. Escalarla
     desalinea las tres columnas y es justo lo que hace que una fila de precios
     se lea torcida. */
  .fxa-ocard.is-on { border-color: var(--acento); background: rgba(67,195,251,0.07); }
  .fxa-ocard .fxa-lp-btn { width: 100%; margin-top: 22px; }
}

/* ==========================================================================
   FRANJA DE AVISO. Lo que tiene que verse sin buscarlo: va en el acento, a
   ancho completo y con el texto grande. Nacio porque el aviso de "hasta el 1
   de octubre" estaba en cinco sitios de la pagina y ninguno se veia.
   ========================================================================== */
.fxa-lp-aviso { background: var(--acento); padding: 14px 20px; text-align: center; }
.fxa-lp-aviso .linea { margin: 0; font-family: var(--serif); font-weight: 800;
  font-size: 17px; line-height: 1.25; letter-spacing: 0.01em; color: #101216; }
.fxa-lp-aviso .sub { margin: 4px 0 0; font-family: var(--sans); font-weight: 600;
  font-size: 13px; line-height: 1.3; color: #101216; opacity: 0.82; }
@media (min-width: 750px) {
  .fxa-lp-aviso { padding: 18px 24px; }
  .fxa-lp-aviso .linea { font-size: 21px; }
  .fxa-lp-aviso .sub { font-size: 14px; }
}

/* GUIA DE TALLAS. Un desplegable nativo (<details>): abre y cierra sin JS, con
   teclado y con lector de pantalla. El rotulo va en el acento porque es lo que
   el cliente tiene que encontrar antes de elegir el pack; la tabla, en el tono
   del texto. Ningun texto baja de 14 px. */
.fxa-lp-guia { max-width: 360px; margin: 0 auto 16px; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(242,244,248,0.04); font-family: var(--sans); }
.fxa-lp-guia summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 13px 16px; color: var(--acento); font-weight: 700; font-size: 15px; }
.fxa-lp-guia summary::-webkit-details-marker { display: none; }
.fxa-lp-guia summary::after { content: "+"; font-size: 22px; font-weight: 400; line-height: 1; transition: transform .2s var(--ease); }
.fxa-lp-guia[open] summary::after { transform: rotate(45deg); }
.fxa-lp-guia summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 14px; }
/* La tabla lleva clase para que el tema no le aplique `table:not([class])`, y
   ademas se blindan las tres herencias del body del tema que la deformaban:
   el espaciado de letras, el corte de palabras y el ancho fijo de columnas. */
.fxa-lp-guia-tabla { width: calc(100% - 32px); margin: 0 16px; border-collapse: collapse; table-layout: auto;
  box-shadow: none; color: var(--ivory); font-size: 14px; letter-spacing: normal; }
.fxa-lp-guia-tabla th, .fxa-lp-guia-tabla td { padding: 9px 6px; text-align: left; border: 0;
  border-top: 1px solid rgba(242,244,248,0.1); letter-spacing: normal; word-break: normal; overflow-wrap: normal; }
.fxa-lp-guia-tabla td, .fxa-lp-guia-tabla tbody th { white-space: nowrap; }
/* La columna del medio es la de equivalencias ("CH, 5 o 7, 30 o 32") y es la
   unica que puede pasar a dos lineas: se corta entre palabras, nunca dentro. */
.fxa-lp-guia-tabla td:first-of-type { white-space: normal; }
.fxa-lp-guia-tabla thead th { border-top: 0; font-weight: 600; color: var(--warm); }
.fxa-lp-guia-tabla tbody th { font-weight: 800; color: var(--acento); }
.fxa-lp-guia .nota { margin: 12px 16px 14px; font-size: 14px; line-height: 1.5; color: var(--warm); }
/* En COMPUTADOR las tarjetas se ensanchan hasta el 90% del ancho de los
   banners (580 de 640) para que la oferta no quede como una columna flaca en
   medio de la pagina. El valor se ajusta desde el personalizador, y en celular
   NO aplica: alli manda el ancho del contenedor. */
@media (min-width: 750px) {
  .fxa-lp-sel, .fxa-lp-selcta, .fxa-lp-oferta .trust, .fxa-lp-guia { max-width: var(--of-ancho, 580px); }