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

/* Cards de features con hover sutil */
.feature-icon-box {
  transition: transform 0.2s ease;
}
.feature-icon-box:hover {
  transform: translateY(-4px);
}

/* 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;
}

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

/* Respetar prefers-reduced-motion: desactiva animaciones decorativas */
@media (prefers-reduced-motion: reduce) {
  .feature-icon-box,
  .feature-icon-box:hover,
  .hero-title,
  .animation-img {
    transition: none !important;
    animation: none !important;
    transform: none !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;
  }
}

/* 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: 2.5rem;
    padding-bottom: 2.5rem;
  }

  /* 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.75rem !important;
  }

  /* Toggle Mensual/Anual: menos aire abajo */
  .landing-pricing .text-center.mb-10 {
    margin-bottom: 1rem !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;
  }

  /* Tarjetas: contenido más denso */
  .landing-pricing .card-header {
    padding-top: 1rem;
    padding-bottom: 0.5rem;
  }
  .landing-pricing .card-header img {
    width: 60px;
    height: auto;
    margin-bottom: 0.5rem !important;
    padding-bottom: 0 !important;
  }
  .landing-pricing .card-header h4 {
    font-size: 1.125rem;
  }
  .landing-pricing .card-header .h2 {
    font-size: 1.5rem;
  }
  .landing-pricing .card-body {
    padding-top: 0.5rem;
    padding-bottom: 1rem;
  }
  .landing-pricing .pricing-list li h6 {
    margin-bottom: 0.5rem !important;
    font-size: 0.8125rem;
    line-height: 1.3;
  }
  .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: 1rem !important;
  }
  .landing-pricing > .container > p.mt-3 {
    margin-top: 0.5rem !important;
  }
}

/* ============================================================
   Sección Hero — versión compacta para snap
   El Sneat base tiene padding-top: 10.2rem y deja un blank de
   26rem para que la imagen del dashboard flote por debajo
   con margin-bottom negativo. En conjunto la sección mide
   ~1300px y no entra en un viewport. Acá la apretamos.
   ============================================================ */
@media (min-width: 992px) {
  /* Para el hero: empezar arriba (no centrar verticalmente). Si
     centramos, cuando el contenido sobra por unos pixels se va
     para arriba y queda tapado por el navbar.
     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;
  }

  /* Caja del título: ancho intermedio entre el Sneat original
     (34.375rem / 550px) y el full-flow. Permite líneas más
     largas pero mantiene el quiebre en 2 renglones. */
  .landing-hero .hero-text-box {
    max-width: 42rem !important;
  }
  /* El <br> del subtítulo sí lo escondemos: que el navegador
     acomode el wrapping. El <br> del título lo dejamos para
     que se mantengan las dos líneas balanceadas. */
  .landing-hero .hero-sub-title br {
    display: none !important;
  }

  /* Padding-top del div con la imagen de fondo. La sección
     snappea a y=90 (debajo del navbar); le sumamos 6rem
     (~96px) para que el título quede claramente separado del
     navbar. */
  .landing-hero.section-py {
    padding-top: 6rem;
    padding-bottom: 0;
  }

  /* 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: menos overflow hacia abajo */
  .landing-hero .hero-animation-img {
    margin-bottom: -12rem;
  }
  .landing-hero .hero-animation-img .hero-dashboard-img {
    width: 62%;
  }

  /* Blank space que compensa el margin negativo:
     antes 26rem (~416px), ahora apenas el necesario para que
     la imagen del dashboard se vea arriba del fold. */
  #hero-animation .landing-hero-blank {
    padding-top: 9rem;
  }
}

/* En pantallas muy chatas (laptops 768px de alto) achicamos
   todavía más el hero para que entre todo. */
@media (min-width: 992px) and (max-height: 820px) {
  .landing-hero.section-py {
    padding-top: 2rem;
  }
  .landing-hero .hero-title.display-6 {
    font-size: 1.875rem;
  }
  .landing-hero .hero-sub-title {
    font-size: 0.875rem;
  }
  .landing-hero .hero-animation-img {
    margin-bottom: -9rem;
  }
  .landing-hero .hero-animation-img .hero-dashboard-img {
    width: 52%;
  }
  #hero-animation .landing-hero-blank {
    padding-top: 6rem;
  }
}