/* GERUX — Landing pública (Area Web/FrontPages)
   Estilos específicos para la landing consolidada.
   No tocar Sneat base; estos son overrides puntuales. */

/* Cards del rediseño (bento, seguridad, quotes): borde fino,
   radio grande y hover con lift + halo primary */
.bento-card {
  border-radius: 1rem;
  border: 1px solid var(--bs-border-color);
  box-shadow: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.bento-card:hover {
  transform: translateY(-4px);
  border-color: rgba(105, 108, 255, 0.55);
  box-shadow: 0 16px 40px -16px rgba(105, 108, 255, 0.35);
}

/* Badge de plan (posicionado sobre el card) */
.plan-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .plan-badge {
    position: static;
    transform: none;
    display: inline-block;
    margin-bottom: 0.5rem;
  }
}

/* Barra de stats inline en el hero */
.hero-stats > span {
  white-space: nowrap;
}

/* ============================================================
   Contraste del texto del hero en modo claro
   El fondo del hero es un gradiente lavanda→rosa muy claro
   (#eae8fd → #fce5e6, ver front-page-landing.css). Sobre él, el
   `text-muted` de Sneat (gris claro) queda lavado y difícil de
   leer: subtítulo, barra de stats y la línea de garantías.
   Acá oscurecemos esos textos solo dentro del hero y solo en
   modo claro — el modo oscuro mantiene sus propios colores.
   ============================================================ */
.light-style .landing-hero .hero-sub-title,
.light-style .landing-hero .hero-stats,
.light-style .landing-hero .hero-text-box p.text-muted {
  color: #4b4b5c !important;
}

/* CTA final con gradient (antes inline-style) */
.landing-cta-final {
  background: linear-gradient(135deg, var(--bs-primary) 0%, #6f42c1 100%);
}

/* El contraste del footer en modo claro se movió a front-custom.css
   (lo carga el layout en TODAS las front pages): el footer es del
   layout, así que el fix no puede vivir en un CSS sólo de la landing. */

/* Respetar prefers-reduced-motion: desactiva animaciones decorativas */
@media (prefers-reduced-motion: reduce) {
  .bento-card,
  .bento-card:hover,
  .hero-title,
  .animation-img,
  html.landing-reveal .reveal {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  html.landing-reveal .reveal {
    opacity: 1 !important;
  }
}

/* ============================================================
   Scroll por sección (snap)
   Cada rueda del mouse / swipe avanza a la próxima sección
   completa. En secciones más altas que el viewport (ej. FAQ)
   el scroll queda libre dentro y vuelve a snappear en los
   bordes. Solo aplica en la landing (este CSS no se carga en
   otras páginas).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-snap-type: y mandatory;
    /* La .landing-navbar de Sneat tiene margin-top: 1rem propio
       además de su altura interna, así que ~90px es lo real. */
    scroll-padding-top: 90px;
    scroll-behavior: smooth;
  }

  .scrollspy-example > section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: calc(100vh - 90px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* El footer vive FUERA de .scrollspy-example, así que sin un punto
     de snap propio el `mandatory` rebota a la última sección y nunca
     lo deja ver. Lo hacemos target de snap alineado al final (su
     borde inferior contra el fondo del viewport) para que quede
     alcanzable como último "descanso" del scroll. */
  .landing-footer {
    scroll-snap-align: end;
  }
}

/* En móvil el snap molesta más que ayuda (teclado, barras
   dinámicas del navegador, secciones muy altas) — se desactiva. */
@media (max-width: 767.98px) {
  html {
    scroll-snap-type: none;
  }
  .scrollspy-example > section {
    min-height: 0;
    display: block;
  }
}

/* ============================================================
   Sección de Planes y Precios — versión compacta
   Comprimida para entrar en un solo viewport junto con el
   toggle Mensual/Anual y el CTA "¿Tenés dudas...". Scopeado a
   .landing-pricing (no afecta a /Web/PricingPage que reusa el
   mismo _PricingPartial sin ese wrapper).
   ============================================================ */
@media (min-width: 992px) {
  .landing-pricing.section-py {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  /* Encabezado de la sección: títulos más juntos */
  .landing-pricing h4 {
    margin-bottom: 0.25rem;
    font-size: 1.5rem;
  }
  .landing-pricing > .container > .text-center.mb-4 {
    margin-bottom: 0.5rem !important;
  }
  .landing-pricing > .container > p {
    margin-bottom: 0.25rem !important;
  }
  .landing-pricing > .container > p.text-danger {
    margin-bottom: 0.5rem !important;
  }

  /* Banner de oferta de lanzamiento: ocupa menos alto (con la
     oferta vigente el banner + el precio tachado son los que
     empujan la sección fuera del viewport). */
  .landing-pricing .pricing-oferta {
    margin-bottom: 0.75rem !important;
  }
  .landing-pricing .pricing-oferta .badge {
    font-size: 0.8125rem !important;
    padding: 0.35rem 0.75rem !important;
  }
  .landing-pricing .pricing-oferta p {
    margin-top: 0.375rem !important;
  }

  /* Toggle Mensual/Anual: menos aire abajo */
  .landing-pricing .text-center.mb-10 {
    margin-bottom: 0.5rem !important;
  }

  /* Row de tarjetas: sacar el pt grande */
  .landing-pricing .row.g-6.pt-lg-5 {
    padding-top: 0 !important;
    --bs-gutter-y: 1rem;
    --bs-gutter-x: 1rem;
  }

  /* Row de tarjetas: pegar las cards al toggle */
  .landing-pricing .card-header {
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
  }
  .landing-pricing .card-header img {
    width: 48px;
    height: auto;
    margin-bottom: 0.375rem !important;
    padding-bottom: 0 !important;
  }
  .landing-pricing .card-header h4 {
    font-size: 1.125rem;
  }
  .landing-pricing .card-header .h2 {
    font-size: 1.375rem;
  }
  /* Precio de lista tachado (oferta): menos aire arriba */
  .landing-pricing .pricing-plan-lista {
    margin-top: 0.375rem !important;
  }
  .landing-pricing .card-body {
    padding-top: 0.5rem;
    padding-bottom: 0.875rem;
  }
  .landing-pricing .pricing-list li h6 {
    margin-bottom: 0.375rem !important;
    font-size: 0.8125rem;
    line-height: 1.25;
  }
  .landing-pricing .pricing-list .badge.badge-center {
    width: 1.1rem;
    height: 1.1rem;
    margin-right: 0.5rem !important;
  }
  .landing-pricing .card-body .d-grid.mt-8 {
    margin-top: 0.75rem !important;
  }

  /* Garantías + CTA final de la sección */
  .landing-pricing > .container > p.mt-8 {
    margin-top: 0.75rem !important;
  }
  .landing-pricing > .container > p.mt-3 {
    margin-top: 0.375rem !important;
  }
}

/* Laptops de poca altura (≈768px de alto): un escalón más de
   compactación para que la sección de precios siga entrando en
   un viewport aun con la oferta de lanzamiento vigente. */
@media (min-width: 992px) and (max-height: 860px) {
  .landing-pricing.section-py {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
  .landing-pricing h4 {
    font-size: 1.375rem;
  }
  .landing-pricing > .container > p,
  .landing-pricing > .container > p.text-danger {
    font-size: 0.875rem;
  }
  .landing-pricing .pricing-oferta {
    margin-bottom: 0.5rem !important;
  }
  .landing-pricing .pricing-oferta p {
    font-size: 0.75rem !important;
  }
  .landing-pricing .text-center.mb-10 {
    margin-bottom: 0.25rem !important;
  }
  .landing-pricing .card-header img {
    width: 40px;
    margin-bottom: 0.25rem !important;
  }
  .landing-pricing .pricing-list li h6 {
    margin-bottom: 0.25rem !important;
    font-size: 0.78125rem;
  }
  .landing-pricing .card-body {
    padding-bottom: 0.625rem;
  }
  .landing-pricing > .container > p.mt-8 {
    margin-top: 0.5rem !important;
    font-size: 0.8125rem;
  }
}

/* ============================================================
   Sección Hero — dos columnas en desktop (texto | dashboard)
   El Sneat base apila texto arriba e imagen abajo, con la
   imagen "flotando" hacia la sección siguiente vía margin
   negativo + un blank que lo compensa. En >=992px pasamos a
   texto a la izquierda y dashboard a la derecha (row/cols en
   la vista), sin overflow ni blank: todo entra en un viewport
   y se centra verticalmente. Por debajo de 992px se mantiene
   el layout apilado original de Sneat.
   ============================================================ */
@media (min-width: 992px) {
  /* IMPORTANTE: no le ponemos padding-top al <section> porque
     la imagen de fondo vive en el <div> hijo .landing-hero, y
     cualquier padding acá deja visible el bg del body como una
     franja gris/blanca arriba. Todo el padding va al hijo. */
  #hero-animation {
    justify-content: flex-start !important;
  }

  /* El hero llena el alto de la sección snap y centra la row
     verticalmente entre el padding-top (despeje del navbar
     fijo, ~90px) y el padding-bottom. */
  .landing-hero.section-py {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 7.5rem;
    padding-bottom: 2.5rem;
  }

  /* Caja del título: dentro de la col-lg-5 ocupa todo el ancho
     (Sneat la limita a 34.375rem y la centra con margin auto). */
  .landing-hero .hero-text-box {
    max-width: none !important;
    margin: 0;
  }
  /* El <br> del subtítulo sí lo escondemos: que el navegador
     acomode el wrapping en el ancho de la columna. El <br> del
     título lo dejamos para que la frase con gradiente arranque
     en línea propia. */
  .landing-hero .hero-sub-title br {
    display: none !important;
  }

  /* Título y subtítulo más juntos */
  .landing-hero .hero-title.display-6 {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
  }
  .landing-hero .hero-sub-title {
    margin-bottom: 1rem !important;
  }
  .landing-hero .hero-stats {
    margin-bottom: 1.25rem !important;
  }
  .landing-hero .landing-hero-btn .btn-lg {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }

  /* Dashboard image: columna derecha, sin overflow hacia abajo
     (anula el margin-bottom negativo y el width 80% de Sneat). */
  .landing-hero .hero-animation-img {
    margin-bottom: 0;
  }
  .landing-hero .hero-animation-img .hero-dashboard-img {
    width: 100%;
  }

  /* Sin overflow de imagen no hace falta blank que lo compense. */
  #hero-animation .landing-hero-blank {
    padding-top: 0;
  }
}

/* Por debajo de 992px no aplican los ajustes del hero de arriba
   (están scopeados a min-width:992px) y queda el section-py por
   defecto (3-4rem), que es menor que el navbar fijo y tapa el
   título. Forzamos un padding-top que lo despeje. */
@media (max-width: 991.98px) {
  .landing-hero.section-py {
    padding-top: 7rem;
  }
}

/* En pantallas muy chatas (laptops 768px de alto) achicamos
   la tipografía del hero para que la columna de texto no
   empuje el layout (la imagen ya no desborda: la limita el
   aspect-ratio del frame dentro de su columna). */
@media (min-width: 992px) and (max-height: 820px) {
  /* Antes 2rem: con el navbar fijo (~90px) el título quedaba
     tapado. Mínimo que lo despeje aun apretando el hero. */
  .landing-hero.section-py {
    padding-top: 5.5rem;
  }
  .landing-hero .hero-title.display-6 {
    font-size: 1.875rem;
  }
  .landing-hero .hero-sub-title {
    font-size: 0.875rem;
  }
}

/* =============================================================
   Cards de precios: alineación vertical entre planes.
   Cada sección del header reserva su altura aunque el contenido
   varíe (descripción de 1 o 2 líneas, Trial sin descuento anual),
   así el precio y los bullets arrancan a la misma altura en las
   cuatro cards. El alto total y el CTA al fondo los resuelve
   h-100 + flex-column en la vista.
   ============================================================= */
.pricing-plan-desc {
  /* 2 líneas de .small: la desc más larga ocupa 2, las de 1 reservan igual */
  min-height: 3em;
}
.pricing-plan-ahorro {
  /* 1 línea (texto verde mensual o badge anual); vacío en Trial pero reserva */
  min-height: 2em;
}

/* ============================================================
   REDISEÑO VISUAL — tipografía, gradientes, timeline, bento,
   quotes editoriales, frame del dashboard y reveal on-scroll.
   Reemplaza los assets decorativos del demo de Sneat
   (section-title-icon.png, faq-boy, hero-elements, íconos de
   planes) por acentos CSS propios.
   ============================================================ */

/* --- Titulares: tracking apretado + acento de gradiente --- */
.landing-title {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.text-gradient-primary {
  background: linear-gradient(92deg, var(--bs-primary, #696cff) 0%, #9055fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --- Hero: screenshot enmarcado como ventana de navegador --- */
.landing-browser-frame {
  border-radius: 0.875rem;
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 24px 60px -12px rgba(30, 34, 60, 0.3);
  overflow: hidden;
  padding-top: 2rem;
  background: var(--bs-body-bg);
  /* Altura fija por proporción: la ventana muestra la parte superior
     del dashboard y recorta el resto (si no, con la imagen llenando
     todo el ancho el hero se pasa del fold en pantallas estándar). */
  aspect-ratio: 16 / 10;
}
.landing-browser-frame::before {
  /* barra superior de la "ventana" */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2rem;
  background: rgba(133, 146, 163, 0.12);
  border-bottom: 1px solid var(--bs-border-color);
}
.landing-browser-frame::after {
  /* semáforo de la ventana (3 puntos) */
  content: '';
  position: absolute;
  top: 0.72rem;
  left: 1rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 0.95rem 0 0 #febc2e, 1.9rem 0 0 #28c840;
}
/* El asset es el screenshot real del Panel Principal (1919×1199,
   relación ~16:10, igual a la del frame): llena la ventana de borde
   a borde sin recortes. */
.landing-hero .hero-animation-img .hero-dashboard-img.landing-browser-frame img {
  display: block;
  width: 100%;
}

/* --- Cómo funciona: línea de tiempo de 3 pasos --- */
.landing-steps .step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bs-primary, #696cff);
  background: rgba(105, 108, 255, 0.12);
  border: 1px dashed rgba(105, 108, 255, 0.5);
  position: relative;
  z-index: 1;
  margin-bottom: 1rem;
}
.landing-steps .step-num-active {
  color: #fff;
  background: linear-gradient(135deg, var(--bs-primary, #696cff) 0%, #9055fd 100%);
  border: 0;
  box-shadow: 0 8px 20px -6px rgba(105, 108, 255, 0.6);
}
@media (min-width: 992px) {
  .landing-step {
    position: relative;
  }
  /* conector entre el círculo de un paso y el del siguiente */
  .landing-step + .landing-step::before {
    content: '';
    position: absolute;
    top: 28px;
    left: calc(-50% + 44px);
    right: calc(50% + 44px);
    border-top: 2px dashed rgba(105, 108, 255, 0.35);
  }
}

/* --- Bento: chips dentro de las cards anchas --- */
.bento-chips .badge {
  font-weight: 500;
}

/* --- Testimonios: quote editorial (sin estrellitas) --- */
.landing-quote .card-body::before {
  content: '\201C';
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.5rem;
  line-height: 0.9;
  color: var(--bs-primary, #696cff);
  opacity: 0.35;
  margin-bottom: 0.25rem;
}

/* --- CTA final: radio grande + glow radial sutil --- */
.landing-cta-final {
  border-radius: 1.25rem;
  position: relative;
  overflow: hidden;
}
.landing-cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 300px at 80% -20%, rgba(255, 255, 255, 0.25), transparent 60%);
  pointer-events: none;
}
.landing-cta-final .card-body {
  position: relative;
}

/* --- Precios: sin íconos ilustrados del template (solo en la
       landing; /Web/PricingPage los conserva) --- */
.landing-pricing .card-header img {
  display: none;
}

/* --- Reveal on-scroll ---
   Solo oculta cuando LandingReveal.js agregó html.landing-reveal:
   sin JS (o con reduced-motion) todo es visible desde el primer
   paint. El bloque prefers-reduced-motion de arriba también lo
   fuerza visible. */
html.landing-reveal .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.landing-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}
html.landing-reveal .reveal-delay-1 {
  transition-delay: 0.12s;
}
html.landing-reveal .reveal-delay-2 {
  transition-delay: 0.24s;
}

/* --- Hero: anular el gradiente arcoíris animado ("shine") que
       Sneat le pone a .hero-title en front-page-landing.css.
       El titular queda en color de heading del tema y el acento
       lo pone el span .text-gradient-primary. --- */
.landing-hero .hero-title {
  background: none;
  animation: none;
  color: var(--bs-heading-color);
  -webkit-text-fill-color: currentColor;
}

/* =============================================================
   Oferta de lanzamiento (banner + precio de lista tachado).
   Config en AppConfig.OfertaLanzamiento*; aplica a la landing y a
   /Web/FrontPages/Pricing (mismo _PricingPartial), por eso vive
   fuera del scope .landing-pricing.
   ============================================================= */
.pricing-plan-lista {
  /* 1 línea (precio de lista tachado); vacía en el plan gratis pero
     reserva la altura para que los precios de las 4 cards se alineen */
  min-height: 1.6em;
}
.pricing-plan-lista s {
  /* Línea fina: con 2px el trazo tapaba los dígitos del precio de lista */
  text-decoration-thickness: 1px;
}