/* Refinamiento visual sobre la landing original.
   No altera los grids, las dimensiones ni los estados internos de las escenas.
   Hanken: títulos, lectura y controles. Las escenas conservan sus fuentes. */

/* Superficies de marca: blanco, haze, índigo, tinta y naranja de foco. */
body {
  background: #f7f7fc;
}
.hero {
  background: #f7f7fc;
}
.hero .haze-glow,
.hero .blob,
.hero-visual::before,
.hero-visual::after {
  opacity: 0;
}
.sec.dark .glow {
  opacity: .28;
}
.sec.dark > .grid-bg {
  opacity: .18;
}
.sec.dark::after {
  opacity: .12;
}

/* Jerarquía de lectura, sin cambiar las columnas ni el orden de contenido. */
.hero h1,
.h2,
.k-h,
.pain-q,
.why-tile h3,
.faql-all,
.foot-brand {
  font-family: 'Hanken Grotesk', sans-serif;
}
.k-h,
.pain-q,
.why-tile h3 {
  font-weight: 500;
  letter-spacing: -.03em;
}
.hero h1 {
  font-weight: 500;
  font-size: clamp(36px, 4.3vw, 52px);
  text-wrap: initial;
  line-height: 1.07;
  letter-spacing: -.055em;
}
.h2 {
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.13;
}
.hero .sub strong,
.lead strong {
  font-weight: 600;
}
.hero .sub,
.lead {
  color: #5f5d70;
}
.sec.dark .lead {
  color: #c0bdce;
}
.hero-micro {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  color: #656175;
}

/* Las etiquetas editoriales dejan de parecer estados o controles. */
.eyebrow,
.eyebrow.dark {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .025em;
  color: #514c85;
}
.eyebrow.dark {
  color: #bab6ef;
}
.eyebrow > .dot {
  display: none;
}

/* Controles de navegación y CTA: superficies planas y contraste estable. */
.nav,
.nav.scrolled {
  background: rgba(255, 255, 255, .97);
  box-shadow: none;
  border-bottom-color: #e5e3ee;
}
.nav-links a {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 500;
}
.btn {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  border-radius: 7px;
}
.btn.primary,
.btn.primary:hover,
.btn.orange,
.btn.orange:hover {
  box-shadow: none;
}
.btn.primary::after,
.btn.orange::after {
  display: none;
}
.btn.orange {
  background: #ff5a2c;
  color: #0e0e16;
}
.btn.orange:hover {
  background: #ff724a;
  color: #0e0e16;
}

/* Preguntas clickeables: siguen siendo botones; los estados de las demos
   (.sh-chip, badges, indicadores) conservan exactamente su apariencia original. */
.chip {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  border-radius: 6px;
  background: #fff;
  border-color: #d9d6ec;
  box-shadow: none;
}
.chip:hover {
  box-shadow: none;
}
.ltile {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
}

/* Sólo las envolventes: ningún selector toca el interior de una escena. */
.demo-card {
  border-radius: 12px;
  box-shadow: 0 10px 30px -24px rgba(14, 14, 22, .28);
}
.int-card,
.why-tile {
  border-radius: 10px;
  border-color: #e5e3ee;
  box-shadow: none;
}
.int-card:hover,
.why-tile:hover {
  box-shadow: 0 8px 22px -18px rgba(14, 14, 22, .25);
}
.int-card p,
.why-tile p {
  color: #605d70;
}
.int-freq {
  font-family: 'Hanken Grotesk', sans-serif;
  letter-spacing: .02em;
}
.faql {
  border-radius: 10px;
  border-color: #e5e3ee;
  box-shadow: none;
}
.faql-more,
.foot-tag {
  font-family: 'Hanken Grotesk', sans-serif;
  letter-spacing: 0;
}

@media (max-width: 700px) {
  .hero h1 {
    font-size: clamp(32px, 8.4vw, 42px);
    line-height: 1.08;
  }
}

.term {
  border-radius: 12px;
  box-shadow: 0 18px 40px -24px rgba(14, 14, 22, .45);
}
.sec.dark .demo-card {
  border-color: transparent;
  /* Conserva los gradientes originales sobre su base oscura original. */
  background-color: #0b0b12;
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .5);
}

/* El CTA de la cabecera no se parte en dos líneas en pantallas angostas. */
.nav .btn.sm {
  white-space: nowrap;
}
@media (max-width: 700px) {
  .nav-in {
    gap: 12px;
  }
  .nav .btn.sm {
    font-size: 12px;
    padding-inline: 12px;
  }
}
@media (max-width: 380px) {
  .nav-in {
    gap: 8px;
  }
  .nav .btn.sm {
    font-size: 11px;
    padding-inline: 10px;
  }
}

/* FAQ: misma capa visual en portada y lectura continua.
   No cambia el posicionamiento del índice, el buscador ni los anclajes. */
body.faq-body {
  background: #f7f7fc;
}
.faq-hero::before,
.p-hero .haze-glow {
  opacity: 0;
}
.faq-hero h1,
.p-hero h1 {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 500;
  line-height: 1.09;
  letter-spacing: -.04em;
}
.faq-sec > h2,
.faq-banda h2,
.valor b,
.parte-card b,
.faq-hits b {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
}
.faq-sec > h2,
.faq-banda h2 {
  font-weight: 500;
}
.qa-q {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
}
.faq-hero-nota,
.faq-trust li,
.parte-card-secs,
.faq-resultados-n,
.faq-totop {
  font-family: 'Hanken Grotesk', sans-serif;
  letter-spacing: 0;
}
.faq-trust li {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  padding-left: 0;
  padding-right: 18px;
}
.valor-tag,
.parte-card-n,
.faq-salto-label,
.faq-paso a span,
.faq-hits .hit-sec {
  font-family: 'Hanken Grotesk', sans-serif;
  letter-spacing: .025em;
}
.valores,
.parte-card a,
.faq-banda {
  border-radius: 10px;
  border-color: #e5e3ee;
  box-shadow: none;
}
.parte-card a:hover {
  box-shadow: 0 8px 22px -18px rgba(14, 14, 22, .25);
}
.faq-banda {
  background: #fff;
}
.faq-totop {
  border-radius: 7px;
  box-shadow: 0 6px 18px -12px rgba(14, 14, 22, .35);
}

/* Precios: preserva el render de planes, importes y tabla comparativa. */
.plan,
.plan.hot {
  border-radius: 10px;
  box-shadow: none;
}
.plan:hover {
  box-shadow: 0 8px 22px -18px rgba(14, 14, 22, .25);
}
.plan .flag {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
  letter-spacing: .025em;
  border-radius: 5px;
}
.plan h2,
.plan .price {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 500;
}
.plan .price {
  font-variant-numeric: tabular-nums;
}
.plan .price small,
.plans-note,
.cta-alt {
  font-family: 'Hanken Grotesk', sans-serif;
  letter-spacing: 0;
}
.plans-note,
.plan .bajada {
  color: #605d70;
}
.cmp-wrap {
  border-radius: 10px;
  border-color: #e5e3ee;
}
.cmp th {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
  letter-spacing: .025em;
  color: #605d70;
}
.cta-alt {
  color: #c0bdce;
}

/* Azul en costeo y cierre. El sistema de logos recupera su fondo original.
   Las tarjetas de la escena de food cost no reciben estas reglas de color. */
#inventario,
#foodcost.sec.dark,
#prueba.sec.dark,
footer {
  background: #2b2ae6;
}
/* Contraste de selección sobre las superficies azules, incluso en texto anidado. */
:is(#inventario, #foodcost, #prueba, footer)::selection,
:is(#inventario, #foodcost, #prueba, footer) ::selection {
  background: #ffb59d;
  color: #0e0e16;
}
#foodcost > .glow,
#foodcost > .grid-bg,
#foodcost::after,
#prueba > .glow,
#prueba > .grid-bg,
#prueba::after {
  opacity: 0;
}
#foodcost .pilar-copy .eyebrow,
#prueba .eyebrow,
footer .foot-tag {
  color: #d3d1ff;
}
#foodcost .pilar-copy .lead,
#foodcost .pilar-copy .feat-list li,
#prueba .lead,
#prueba .cta-micro,
#prueba .cta-alt,
footer .foot-links a,
footer .foot-base,
footer .foot-base a {
  color: #e2e0ff;
}
#foodcost .pilar-copy strong,
#foodcost .pilar-copy .feat-list b,
footer .foot-brand,
footer .foot-links a:hover {
  color: #fff;
}
footer {
  border-top: 1px solid rgba(255, 255, 255, .18);
}
footer :focus-visible {
  outline-color: #fff;
}

/* Integraciones: conjunto estático, monocromático y sin duplicados.
   El wrapping natural mantiene todos los logos visibles en móvil. */
.integration-logos {
  margin-top: 17px;
}
.integration-logos .ltiles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 24px;
}
.integration-logos .ltile {
  padding: 0;
  border: 0;
  color: #53515e;
  filter: grayscale(1);
}
.integration-logos .ltile img.lg-solo {
  height: 19px;
  max-width: 105px;
}
.integration-logos .ltile img.lg-solo.lg-arca {
  height: 14px;
}
.integration-logos .ltile img,
.integration-logos .ltile svg {
  opacity: .8;
}
#integraciones .int-logo {
  filter: grayscale(1);
}
.hero-visual .logos-row {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12px;
  letter-spacing: 0;
}
@media (max-width: 700px) {
  .integration-logos .ltiles {
    gap: 18px 22px;
  }
}

/* El original oficial de Payway es blanco; se adapta al fondo claro. */
.integration-logos .ltile img.lg-payway,
#integraciones .int-logo img.lg-payway {
  width: 100px;
  height: auto;
  filter: brightness(0);
  opacity: .65;
}

/* Inventario comparte el azul exterior; las escenas conservan su paleta. */
#inventario .iv-wrap > .eyebrow {
  color: #d3d1ff;
}
#inventario .iv-lead {
  color: #e2e0ff;
}
#inventario .iv-card {
  /* Base opaca bajo sus gradientes: el azul exterior no tiñe la animación. */
  background-color: #0b0b12;
}