/* ============================================================
   PRINTIO.PE — landing.css
   Landing page, topbar, about popup y botones globales
   ============================================================ */

/* ============================================================
   ABOUT POPUP
   ============================================================ */
.about-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,26,51,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  z-index: 300;
  backdrop-filter: blur(4px);
}
/* Mismo lenguaje visual que .overlay/.modal (modal.css): fade del fondo +
   pop del popup. Usado por about/tips/términos — Frank pidió que TODOS los
   overlays del sitio abran igual de suave, no solo el modal de pedido. */
.about-overlay.open {
  display: flex;
  animation: appFadeIn var(--dur-base) var(--ease-out);
}
.about-overlay.open .about-popup {
  animation: appScaleIn var(--dur-base) var(--ease-out);
}
.about-overlay.is-leaving {
  display: flex;
  animation: appFadeOut var(--dur-base) var(--ease-out);
}
.about-overlay.is-leaving .about-popup {
  animation: appScaleOut var(--dur-base) var(--ease-out);
}

.about-popup {
  background: var(--surface);
  border-radius: var(--radio-xl);
  padding: 2rem;
  max-width: 340px;
  width: 100%;
  position: relative;
  box-shadow: var(--sombra-md);
  text-align: center;
}

.about-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--bg);
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 17px;
  color: var(--texto-tenue);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.about-close:hover { background: var(--borde); color: var(--texto); }

.about-logo {
  font-size: 20px;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}

.about-texto {
  font-size: 16px;
  color: var(--texto-mid);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.about-wsp {
  display: inline-block;
  margin-top: 0.5rem;
  background: #0F2D5E;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--radio-lg);
  text-decoration: none;
  transition: background 0.15s;
}
.about-wsp:hover { background: #1A4F8A; }

/* ============================================================
   TOPBAR
   ============================================================ */
.landing-topbar {
  position: absolute;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1300px;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  /* margin-left:auto en vez de depender de justify-content:space-between
     del padre — con "Sobre nosotros" (topbar-info) oculto, queda un solo
     hijo visible en el flex y space-between lo pega a la izquierda en vez
     de a la derecha (bug real visto en vivo 2026-08-22). Así funciona
     tanto con topbar-info oculto como visible. */
  margin-left: auto;
}

.topbar-info {
  background: none;
  border: none;
  font-size: 14px;
  color: var(--texto-tenue);
  cursor: pointer;
  padding: 6px 8px;
  font-family: 'DM Sans', sans-serif;
  transition: color 0.15s;
}
.topbar-info:hover { color: var(--acento); }

.topbar-consulta {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--texto-tenue);
  cursor: pointer;
  padding: 6px 8px;
  font-family: 'DM Sans', sans-serif;
  transition: color 0.15s;
}
.topbar-consulta:hover { color: var(--acento); }

.topbar-login {
  background: none;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-full);
  font-size: 14px;
  font-weight: 500;
  color: var(--texto-mid);
  cursor: pointer;
  padding: 6px 14px;
  font-family: 'DM Sans', sans-serif;
  transition: border-color 0.15s, color 0.15s;
}
.topbar-login:hover { border-color: var(--texto-mid); color: var(--texto); }
.topbar-login-activo { background: var(--acento); border-color: var(--acento); color: #fff; }
.topbar-login-activo:hover { background: var(--acento-hover); border-color: var(--acento-hover); color: #fff; }

.topbar-wsp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0F2D5E;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radio-full);
  text-decoration: none;
  transition: background 0.15s;
}
.topbar-wsp:hover { background: #1A4F8A; }
.topbar-wsp svg  { fill: #25D366; flex-shrink: 0; }

/* ============================================================
   LANDING — pantalla principal
   ============================================================ */
.landing {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 5rem 2rem 2rem;
  text-align: center;
  background:
    radial-gradient(ellipse at 65% 0%, rgba(10,170,191,0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 15% 100%, rgba(15,45,94,0.15) 0%, transparent 55%),
    var(--bg);
}

/* ── Entrance: stagger sutil al cargar la landing ─────────────────
   Cada bloque entra con fade+slide-up escalonado. Total ~600ms,
   imperceptible pero le da vida al primer impacto. */
.brand,
.slogan-wrap,
.landing-mensaje,
.landing-tips-btn {
  animation: appFadeInUp 0.55s var(--ease-out) both;
}
.brand           { animation-delay: 0.05s; }
.slogan-wrap     { animation-delay: 0.15s; }
.landing-mensaje { animation-delay: 0.30s; }
.landing-tips-btn{ animation-delay: 0.55s; }

/* Cascada solo en la primera carga (clase body.landing-init que JS
   remueve después de ~1.6s). Vivaz en el primer impacto. */
body.landing-init .landing-opts .landing-opt,
body.landing-init .landing-opts .landing-otros {
  opacity: 0;
  animation: appFadeInUp 0.5s var(--ease-out) forwards;
}
body.landing-init .landing-opts .landing-opt:nth-child(1) { animation-delay: 0.40s; }
body.landing-init .landing-opts .landing-opt:nth-child(2) { animation-delay: 0.49s; }
body.landing-init .landing-opts .landing-opt:nth-child(3) { animation-delay: 0.58s; }
body.landing-init .landing-opts .landing-opt:nth-child(4) { animation-delay: 0.67s; }
body.landing-init .landing-opts .landing-otros            { animation-delay: 0.76s; }

/* "Más productos" — lista de texto (no botones, son de menos importancia
   que Tarjetas/Volantes). Anima entrada Y salida con las mismas clases
   is-entering/is-leaving que ya usa el fork de la landing (ver
   toggleMasProductos en el <script> de arriba y landingVistaEnter/Leave
   más abajo) — no alcanza con :not([hidden]) porque cerrar necesita
   esperar a que la animación de salida termine antes de ocultar. */
.mas-productos-links[hidden] { display: none !important; }
.mas-productos-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
/* Mismo salto/agrandado que las opciones de la lista (Frank: "al hacer
   hover sobre 'Más productos' debe agrandar/saltar para ver que es
   clickeable") — scoped al id del botón, no a .v2-ia-linea en general. */
#btn-mas-productos {
  transition: transform 0.15s, color 0.15s;
}
#btn-mas-productos:hover {
  transform: scale(1.1) translateY(-2px);
  color: var(--acento-hover);
}
/* .v2-ia-linea trae 18px de margin-top pensado para un link suelto — acá
   se apilan varios, así que se achica bastante (Frank: "juntalos un
   poquito para que no se abran tanto"). Sin <strong> en el HTML de estos
   5 (Adhesivos/Hojas/Calendarios/Folders/Afiches) ya evita el subrayado
   (ver .v2-ia-linea strong en v2.css) — "Cotiza tu impresión
   personalizada" sí sigue con <strong> a propósito, es el único que
   todavía es un link real. */
.mas-productos-links .v2-ia-linea { margin-top: 4px; font-size: 14px; }
/* Frank: "acá fallé yo, sepáralos un poquito más" (el 4px de arriba quedó
   muy junto) + "que sepan que son clickeables" — sin subrayado (pedido
   anterior), la pista es un chevron chico + un cambio de color al pasar
   el mouse (antes no tenían NINGÚN feedback: .v2-ia-linea:hover solo
   afecta a <strong>, y estos van sin <strong> a propósito). */
/* Cascada con salto (Frank: "que salte un poquito, igual en las opciones
   que vienen abajo") — cada ítem entra con su propio pequeño rebote,
   escalonado, en vez de moverse todos pegados al contenedor. Mismo
   criterio que prodDDOpcionIn (items.css) pero con más salto vertical. */
.mas-productos-links.is-entering .mas-productos-item,
.mas-productos-links.is-entering .mas-productos-otro {
  animation: masProductosItemSalto 0.32s cubic-bezier(.34, 1.56, .64, 1) both;
}
.mas-productos-links.is-entering .mas-productos-item:nth-of-type(1) { animation-delay: 0.03s; }
.mas-productos-links.is-entering .mas-productos-item:nth-of-type(2) { animation-delay: 0.07s; }
.mas-productos-links.is-entering .mas-productos-item:nth-of-type(3) { animation-delay: 0.11s; }
.mas-productos-links.is-entering .mas-productos-item:nth-of-type(4) { animation-delay: 0.15s; }
.mas-productos-links.is-entering .mas-productos-item:nth-of-type(5) { animation-delay: 0.19s; }
.mas-productos-links.is-entering .mas-productos-otro               { animation-delay: 0.23s; }
@keyframes masProductosItemSalto {
  0%   { opacity: 0; transform: translateY(-10px); }
  60%  { opacity: 1; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* Salida escalonada, mismo espíritu que la entrada (Frank 2026-08-24: "al
   cerrar no tiene el mismo ritmo de cuando se abre") — antes cerrar solo
   encogía el contenedor entero de golpe, sin el reboteo por ítem que sí
   tiene abrir. Escalonado AL REVÉS del orden de entrada (de abajo hacia
   arriba: "Cotiza tu impresión..." se va primero, "Adhesivos" al final) —
   se siente como que la lista se recoge hacia el botón "Más productos",
   no como una desaparición pareja. */
.mas-productos-links.is-leaving .mas-productos-item,
.mas-productos-links.is-leaving .mas-productos-otro {
  animation: masProductosItemSaltoSalida 0.28s cubic-bezier(.34, 1.56, .64, 1) both;
}
.mas-productos-links.is-leaving .mas-productos-otro               { animation-delay: 0s; }
.mas-productos-links.is-leaving .mas-productos-item:nth-of-type(5) { animation-delay: 0.04s; }
.mas-productos-links.is-leaving .mas-productos-item:nth-of-type(4) { animation-delay: 0.08s; }
.mas-productos-links.is-leaving .mas-productos-item:nth-of-type(3) { animation-delay: 0.12s; }
.mas-productos-links.is-leaving .mas-productos-item:nth-of-type(2) { animation-delay: 0.16s; }
.mas-productos-links.is-leaving .mas-productos-item:nth-of-type(1) { animation-delay: 0.20s; }
@keyframes masProductosItemSaltoSalida {
  0%   { opacity: 1; transform: translateY(0); }
  40%  { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 0; transform: translateY(-10px); }
}
/* Chevron del botón "Más productos": mismo saltito al abrir/cerrar, no
   solo la rotación que ya tenía. */
#mas-productos-chevron.saltar { animation: chevronSalto 0.32s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes chevronSalto {
  0%   { transform: scale(0.7) rotate(var(--rot, 0deg)); }
  60%  { transform: scale(1.25) rotate(var(--rot, 0deg)); }
  100% { transform: scale(1) rotate(var(--rot, 0deg)); }
}
.mas-productos-item {
  margin-top: 10px !important;
  color: var(--acento);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: transform 0.15s, color 0.15s;
  /* Necesario ahora que el contenedor anima su altura real por JS (ver
     toggleMasProductos) — sin esto, un flex-column ENCOGE a sus hijos por
     default mientras la altura todavía no alcanza el contenido natural,
     deformando el texto en vez de recortarlo limpio con overflow:hidden.
     Mismo bug ya resuelto para el "+" de ítem (items.css). */
  flex-shrink: 0;
}
.mas-productos-item i { font-size: 10px; opacity: 0.6; transition: transform 0.15s; }
/* Mismo efecto "salta/agranda" que el "+" de la tarjeta de ítem (items.css
   .mas-productos-links-item .mas-productos-item:hover) — Frank 2026-08-23:
   "hazlo acá también". El chevron (hijo) sigue con su propio translateX
   además de heredar visualmente el scale del padre — no compiten porque
   son transforms de elementos distintos. */
.mas-productos-item:hover {
  color: var(--acento-hover);
  transform: scale(1.1) translateY(-2px);
}
.mas-productos-item:hover i { transform: translateX(2px); opacity: 1; }
/* "¿Buscas otra cosa?" (Frank: "debe darse cuenta que es otra cosa, no una
   opción más") — separado del resto con un divisor arriba + más aire, en
   vez de quedar pegado como un ítem más de la misma lista. */
.mas-productos-otro {
  margin-top: 16px !important;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
  width: 100%;
  flex-shrink: 0;
  /* Un poquito más de peso que el resto de la lista (Frank 2026-08-24) —
     sigue chico, pero ya no se pierde igual que "Adhesivos"/"Afiches". */
  font-size: 15px;
  font-weight: 600;
}
/* Mismo salto/agrandado que los demás ítems, pero SOLO en "Cotiza tu
   impresión personalizada" (el <strong>) — Frank: "acá solo debe crecer
   Cotiza tu impresión personalizada, no todo" ("¿Buscas otra cosa?" se
   queda quieto). El subrayado del <strong> se queda (decisión a propósito:
   es el único link real de la lista, ver comentario arriba). */
.mas-productos-otro strong {
  display: inline-block;
  /* Frank: "debe crecer hacia la derecha, no centrado, porque se acerca
     demasiado a 'buscas otra cosa'" — con el origen a la izquierda, el
     borde izquierdo queda fijo y todo el crecimiento se va hacia la
     derecha, en vez de invadir el texto de al lado por ambos lados. */
  transform-origin: left center;
  /* Frank: "el crecimiento es casi automático, demórate un poco, animalo
     mejor" — 0.15s se sentía instantáneo; más duración + ease-out para que
     se note el movimiento en vez de solo "saltar" al tamaño final. */
  transition: transform 0.32s var(--ease-out);
}
.mas-productos-otro:hover strong {
  transform: scale(1.05) translateY(-2px);
}
/* El scaleY+opacity de acá (masProductosAbrir/Cerrar) se sacó — Frank:
   "cuando se esconde 'más productos' la animación no es buena". Causa:
   scaleY es un transform, no toca layout — el espacio reservado en la
   página NO se achicaba junto con el encogimiento visual, así que quedaba
   fijo hasta que `lista.hidden=true` lo sacaba de golpe al terminar la
   animación (un "salto" de layout justo al final). Mismo bug que ya se
   había diagnosticado y resuelto para el "+" a nivel de ítem
   (toggleItemMasProductos en items.js) — el fix real ahora vive en JS
   (toggleMasProductos, este mismo archivo): alto Y opacidad se animan
   JUNTOS con una `transition` inline, así que el espacio se libera en el
   mismo movimiento que el contenido desaparece, no después. El salto por
   ítem (masProductosItemSalto de arriba) se mantiene igual, sin tocar. */

/* Crossfade premium en cambios de vista (Linear/Notion style):
   - Grupo saliente: fade out + sube 6px (.is-leaving)
   - Grupo entrante: fade in + sube desde 6px abajo (.is-entering)
   Sin per-button stagger — el grupo se mueve como unidad. */
.landing-opts.is-entering {
  animation: landingVistaEnter 0.2s cubic-bezier(.22, 1, .36, 1) both;
}
.landing-opts.is-leaving {
  animation: landingVistaLeave 0.12s ease-in both;
}
@keyframes landingVistaEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes landingVistaLeave {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}

/* Logo */
.brand {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 2rem;
  letter-spacing: -0.02em;
}
.brand-print { font-weight: 400; color: var(--texto-mid); }
.brand-io    { font-weight: 700; color: var(--acento); }
.brand-pe    { font-weight: 400; color: var(--texto-tenue); font-size: 17px; }

/* Slogan / timer */
.slogan-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 0.75rem;
  min-height: 140px;
  justify-content: center;
}

/* Frank 2026-08-24: "no hay necesidad de que [la fecha] resalte tanto,
   que la segunda línea sea igual a la primera, misma fuente mismo peso" —
   la fecha ahora reusa esta MISMA clase (ver renderSlogan en el <script>
   de más abajo), en vez de tener su propio estilo más grande/en negrita.
   El protagonismo queda solo para el reloj. Texto bajado a minúsculas
   (antes MAYÚSCULAS) porque con las 2 líneas ya idénticas en tamaño/peso,
   la mayúscula en una sola se veía como error, no como jerarquía — y el
   letter-spacing de eyebrow (pensado para MAYÚSCULAS cortas) se ve
   apretado en una fecha con acentos, así que también se redujo. */
.slogan-line1 {
  font-size: clamp(12px, 2.3vw, 13px);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--texto-tenue);
  line-height: 1.3;
  margin-bottom: 4px;
}
.slogan-line1 strong { font-weight: 800; }

.slogan-timer {
  font-size: clamp(52px, 13vw, 80px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--texto);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Cada dígito se voltea al cambiar — el viejo sube y se va, el nuevo entra
   desde abajo (Frank 2026-08-24: "como la animación clásica de relojes").
   overflow:hidden + altura de 1 línea = la ventanita por la que se ve solo
   UN dígito a la vez mientras el otro pasa por detrás/debajo. */
.slogan-digito {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: top;
}
.slogan-digito-actual { display: block; }
/* Frank 2026-08-24: "casi funciona" — diagnóstico de un agente con
   mediciones reales: ease-out (curva usada arriba) hace ~60% del
   movimiento en el primer 22% de la duración, así que se veía como un
   parpadeo/glitch en vez de un volteo sólido. ease-in-out reparte el
   movimiento parejo en toda la duración. También se sacó el fundido de
   opacidad del dígito saliente — un flip-clock real no desvanece, desliza
   sólido fuera de cuadro (el overflow:hidden ya lo "corta" al salir). */
.slogan-digito-actual.digito-entra {
  animation: digitoEntra var(--dur-base) var(--ease-in-out);
}
.slogan-digito-saliente {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: digitoSale var(--dur-base) var(--ease-in-out) forwards;
  pointer-events: none;
}
@keyframes digitoEntra {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes digitoSale {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}

/* Bloque "mensaje" debajo del reloj: agrupa el slogan principal y la línea
   de pasos como una sola unidad visual ("qué hacemos + cómo lo hacemos").
   El reloj sigue siendo el protagonista pero acompañado, no aislado. */
.landing-mensaje {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 1rem;
  margin-bottom: 0.4rem;
}
/* Slogan principal — vive solo entre el reloj y los CTAs. Tamaño moderado:
   notorio pero sin competir con el reloj (que sigue siendo el protagonista). */
.slogan-hero {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.4;
  color: var(--texto-mid);
  max-width: 640px;
  text-align: center;
}
.slogan-hero strong {
  font-weight: 700;
  color: var(--texto);
}

.colon {
  display: inline-block;
  letter-spacing: 0;
  color: var(--texto);
  transition: opacity 0.4s ease;
  margin: 0 0.04em;
}
.colon-dim { opacity: 0.6; }

.slogan-timer-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}

.slogan-digit-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.slogan-digit-group .slogan-timer { line-height: 1; display: block; }

.slogan-unit {
  font-size: clamp(9px, 1.8vw, 10px);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--texto-tenue);
  line-height: 1;
  margin-top: -4px;
}

.slogan-timer-wrap > .colon {
  align-self: flex-start;
  padding-bottom: 0;
  line-height: 1;
}

.slogan-nocorte {
  font-size: clamp(18px, 4vw, 24px);
  font-weight: 700;
  color: var(--texto);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.slogan-nocorte-sub { font-size: 16px; color: var(--texto-mid); margin-top: 8px; font-weight: 400; }
.slogan-nocorte-sub strong { font-weight: 700; color: var(--texto); }

/* Pasos / subtítulo */
.landing-pasos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 0.5rem;
  margin-bottom: 0.1rem;
}
/* Cuando está dentro del wrapper .landing-mensaje (unidad visual con el
   slogan-hero), el spacing lo controla el gap del wrapper. */
.landing-mensaje .landing-pasos {
  margin: 0;
}
.landing-paso     {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--texto-mid);
  letter-spacing: 0.01em;
}
.landing-paso-sep {
  font-size: 12px;
  color: var(--borde-activo);
  opacity: 0.6;
}
.landing-paso-pregunta {
  font-size: 16px;
  font-weight: 600;
  color: var(--texto-mid);
  letter-spacing: -0.005em;
  transition: opacity 0.15s ease-out;
}

/* Botón "Volver" debajo de los productos — más visible que un link sutil */
.landing-volver-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
.landing-volver-wrap[hidden] { display: none !important; }
.landing-volver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--acento);
  background: var(--surface);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-full);
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.14s;
  font-family: 'DM Sans', sans-serif;
}
.landing-volver:hover {
  background: var(--acento-tenue);
  border-color: var(--borde-activo);
  color: var(--acento-hover);
  transform: translateY(-1px);
}

/* Envoltorio de las 2 vistas (productos / fork) que se cruzan en fade.
   position:relative = ancla para el position:absolute que toma el bloque
   saliente durante la transición (ver _landingTransicion en index.html). */
.landing-stage {
  position: relative;
  width: 100%;
  max-width: 480px;
}

/* Botones de la landing */
.landing-opts[hidden] { display: none !important; }
.landing-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  align-items: center;
}

.landing-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 30px;
  border-radius: var(--radio-lg);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s, border-color 0.15s;
  text-align: center;
  border: none;
  position: relative;
  width: 100%;
  max-width: 380px;
  /* Misma marquita de selección de texto que se vino corrigiendo en todo
     el sitio (dropdowns, "Más productos") — son botones, no texto. */
  user-select: none;
}
.landing-opt:active { transform: scale(0.98); }

.landing-opt-primary {
  background: linear-gradient(180deg, #143874 0%, #0F2D5E 100%);
  box-shadow: 0 2px 6px rgba(15, 45, 94, 0.18),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: background var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
/* Hover minimalista (Stripe/Linear style): lift sutil de 2px, sombra
   limpia de una sola capa, sin shimmer ni glow rings. El highlight
   interno superior queda como toque "premium" silencioso. */
.landing-opt-primary:hover {
  background: linear-gradient(180deg, #1A4F8A 0%, #143874 100%);
  box-shadow: 0 8px 20px rgba(15, 45, 94, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transform: translateY(-2px);
}
.landing-opt-primary .landing-opt-nombre { font-size: 17px; font-weight: 600; color: #ffffff; letter-spacing: -0.01em; }
.landing-opt-primary .landing-opt-precio { font-size: 14px; color: rgba(255,255,255,0.7); font-weight: 400; }

/* Opción secundaria (ej. "Ya tengo mi diseño"): se distingue por color, NO
   por opacity — un opacity fijo en un hijo pelea con la animación de fade
   del contenedor padre (.landing-opts.is-entering anima SU PROPIA opacity),
   así que el hijo terminaba entrando "más apagado" que sus hermanos y se
   sentía desincronizado. */
.landing-opt-secundario { background: var(--surface); border: 1px solid var(--borde); }
.landing-opt-secundario .landing-opt-nombre { color: var(--texto-mid); font-weight: 500; }
.landing-opt-secundario:hover { border-color: var(--borde-activo); background: var(--acento-tenue); }

/* ── Press tactile (Apple/Linear style) ────────────────────────────
   En lugar de un ripple que parpadea desde el click, el botón se
   "hunde" levemente: scale 0.97 + sombra interna sutil. Tactil y
   silencioso. La transición de salida es más lenta que la de entrada
   para que la sensación sea "presionar firme, soltar suave". */
.landing-opt,
.landing-volver {
  position: relative;
  isolation: isolate;
}
.landing-opt-primary:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 1px 3px rgba(15, 45, 94, 0.18),
              inset 0 2px 5px rgba(0, 0, 0, 0.18);
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
}
.landing-volver:active {
  transform: scale(0.96);
  box-shadow: inset 0 2px 4px rgba(15, 45, 94, 0.12);
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
}

/* ── "Otros" expandible (subtle, sin peso visual de botón) ── */
.landing-otros {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.landing-otros-toggle {
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--texto-mid);
  cursor: pointer;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s;
}
.landing-otros-toggle:hover { color: var(--acento); }
.landing-otros-arrow {
  font-size: 12px;
  display: inline-block;
  transition: transform 0.2s ease-out;
}
.landing-otros.abierto .landing-otros-arrow { transform: rotate(180deg); }

.landing-otros-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.25s ease-out,
    transform 0.25s ease-out,
    margin-top 0.25s ease-out;
  margin-top: 0;
  width: 100%;
}
.landing-otros.abierto .landing-otros-lista {
  max-height: 240px;
  opacity: 1;
  margin-top: 8px;
}

.landing-otros-chip {
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: var(--radio-full);
  padding: 7px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--texto-mid);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.1s;
}
.landing-otros-chip:hover {
  border-color: var(--acento);
  background: var(--acento-tenue);
  color: var(--acento);
}
.landing-otros-chip:active { transform: scale(0.96); }

/* ── Links móvil (ocultos en desktop) ── */
.landing-links-movil[hidden] { display: none !important; }
.landing-links-movil {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 1.25rem;
}
.landing-links-movil button {
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--texto-tenue);
  cursor: pointer;
  padding: 0;
}
.landing-links-movil button:hover { color: var(--acento); }
.landing-links-movil span { font-size: 12px; color: var(--borde-activo); }

/* ── Tips btn ── */
.landing-tips-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 1.25rem auto 0;
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--texto-tenue);
  cursor: pointer;
  transition: color 0.15s;
}
.landing-tips-btn:hover { color: var(--acento); }

/* ── Tips popup ── */
.tips-popup {
  max-width: 560px;
  text-align: left;
  max-height: 85vh;
  overflow-y: auto;
  padding: 2rem 2.25rem;
}
.tips-contenido { margin-top: 0.5rem; }
.tip-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
}
.tip-item:last-child { border-bottom: none; }
.tip-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--acento);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  margin-top: 2px;
}
.tip-item strong {
  font-size: 15px;
  color: var(--texto);
  display: block;
  margin-bottom: 2px;
}
.tip-item p {
  font-size: 14px;
  color: var(--texto-mid);
  line-height: 1.5;
}

/* ============================================================
   BOTONES GLOBALES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: var(--radio-md);
  padding: 12px 24px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, opacity 0.15s;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.btn:active   { transform: scale(0.98); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn-full     { width: 100%; justify-content: center; }

/* Primary CTA — usa los tokens unificados del brand.
   Antes estaba invertido (oscuro→claro al hover), por eso el botón del
   landing "pesaba" distinto que los CTAs del wizard y del modal. Ahora
   sigue la convención: claro → oscuro al hover (patrón Vistaprint/Stripe). */
.btn-primary       { background: var(--acento);       color: #FFFFFF; }
.btn-primary:hover { background: var(--acento-hover); }

.btn-ghost         { background: transparent; color: var(--texto-mid); border: 1px solid var(--borde); }
.btn-ghost:hover   { border-color: var(--texto); color: var(--texto); }

.btn-lg { padding: 14px 32px; font-size: 16px; border-radius: var(--radio-lg); }

/* ============================================================
   RESPONSIVE — MÓVIL
   ============================================================ */
@media (max-width: 640px) {
  /* ── Topbar ── */
  .landing-topbar {
    padding: 0 0.75rem;
    gap: 4px;
  }
  .topbar-info { display: none; }
  .topbar-consulta { display: none; }
  .topbar-login { font-size: 13px; padding: 5px 10px; }
  .topbar-wsp { font-size: 13px; padding: 5px 10px; gap: 4px; }
  .topbar-wsp svg { width: 14px; height: 14px; }
  .topbar-right { gap: 4px; }
  .landing-links-movil { display: flex; }
  .landing-tips-btn { display: none; }
  .topbar-wsp { display: none; }

  /* ── Landing ── */
  .landing { padding: 70px 1rem 2rem; }
  .brand { font-size: 20px; margin-bottom: 1.5rem; }
  .brand-pe { font-size: 15px; }

  /* Slogan / Timer */
  .slogan-timer { font-size: 52px; }
  .slogan-unit { font-size: 11px; }
  .slogan-nocorte { font-size: 20px; }
  .slogan-nocorte-sub { font-size: 15px; }

  /* Pasos */
  .landing-pasos { gap: 6px; margin-bottom: 1.5rem; }
  .landing-paso { font-size: 13px; }

  /* Opciones de producto */
  .landing-opts { gap: 6px; max-width: 100%; }
  .landing-opt { padding: 9px 16px; max-width: 300px; }
  .landing-opt-primary .landing-opt-nombre { font-size: 16px; }

  /* Tips */
  .landing-tips-btn { font-size: 13px; }

  /* About popup */
  .about-popup { max-width: 92vw; padding: 1.5rem; }
  .tips-popup { max-width: 92vw; }

  /* Botones globales */
  .btn-lg { padding: 12px 20px; font-size: 15px; }
}

/* ============================================================
   Puente lateral catálogo → IA
   Aparece debajo de las opciones de productos para clientes que
   entraron por "Ya tengo mi diseño" y descubren que en realidad no.
   ============================================================ */
.landing-puente-ia {
  margin-top: 20px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px dashed rgba(15, 45, 94, 0.25);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--texto-mid, #475569);
  text-align: center;
}
.landing-puente-texto {
  font-weight: 500;
}
.landing-puente-link {
  background: transparent;
  border: none;
  color: var(--acento, #0F2D5E);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  transition: all 0.15s;
}
.landing-puente-link:hover {
  background: rgba(15, 45, 94, 0.08);
  text-decoration: underline;
}
.landing-puente-link i {
  font-size: 11px;
}