/* Landing page de Flubyx — identidad propia: la conexión de varios ERP a un tablero en vivo */
.landing {
  --lp-tinta: #0B3D4A; --lp-vivo: #11A39A; --lp-niebla: #EEF4F5; --lp-grafito: #1C2A30; --lp-ambar: #F2A531; --lp-linea: #D5E3E6;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--lp-grafito); background: #fff; font-size: 1.0625rem; line-height: 1.6;
}
.landing h1, .landing h2, .landing h3 { color: var(--lp-tinta); letter-spacing: -.02em; }
.landing h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; margin-bottom: 1.75rem; max-width: 22ch; }
.landing h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .35rem; }
.landing a { color: var(--lp-tinta); }
.lp-contenedor { width: min(1160px, 100% - 2.5rem); margin-inline: auto; }
.lp-estrecho { max-width: 760px; } /* ancho cómodo de lectura, alineado a la izquierda como las demás secciones */

/* Barra superior */
.lp-barra { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--lp-linea); }
.lp-barra-fila { display: flex; align-items: center; gap: 1.5rem; min-height: 4.25rem; }
.lp-marca { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.15rem; text-decoration: none; color: var(--lp-tinta); }
.lp-marca .marca-logo, .lp-pie-marca .marca-logo { height: 34px; width: auto; }
.lp-marca .marca-simbolo { height: 28px; }
.lp-nav { display: flex; gap: 1.4rem; margin-left: .5rem; }
.lp-nav a { text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--lp-grafito); }
.lp-nav a:hover { color: var(--lp-vivo); }
.lp-acciones { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.lp-idioma { text-decoration: none; font-weight: 700; font-size: .85rem; padding: .35rem .5rem; border-radius: .4rem; }
.lp-idioma:hover { background: var(--lp-niebla); }

/* Botones */
.lp-boton { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem 1.05rem; border-radius: .55rem; font-weight: 700; font-size: .95rem;
  text-decoration: none; background: var(--lp-tinta); color: #fff !important; border: 2px solid var(--lp-tinta); transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.lp-boton:hover { background: #072a33; border-color: #072a33; }
.lp-boton:focus-visible { outline: 3px solid var(--lp-vivo); outline-offset: 2px; }
.lp-boton-linea { background: transparent; color: var(--lp-tinta) !important; }
.lp-boton-linea:hover { background: var(--lp-niebla); border-color: var(--lp-tinta); }
.lp-boton-grande { padding: .8rem 1.4rem; font-size: 1.02rem; }
.lp-boton-claro { background: transparent; color: var(--lp-tinta) !important; border-color: var(--lp-linea); }
.lp-boton-claro:hover { background: #fff; border-color: var(--lp-tinta); }
.lp-boton-acento { background: var(--lp-vivo); border-color: var(--lp-vivo); }
.lp-boton-acento:hover { background: #0d8a82; border-color: #0d8a82; }
.lp-boton-fantasma { background: transparent; border-color: rgba(255,255,255,.45); }
.lp-boton-fantasma:hover { background: rgba(255,255,255,.08); border-color: #fff; }

/* Portada: texto a la izquierda, la conexión a la derecha */
.lp-hero { background: linear-gradient(180deg, var(--lp-niebla) 0%, #fff 100%); padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); }
.lp-hero-fila { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.lp-hero h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.07; margin-bottom: 1.1rem; max-width: 16ch; }
.lp-hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 54ch; color: #3a4d55; margin-bottom: 1.75rem; }
.lp-hero-botones { display: flex; flex-wrap: wrap; gap: .75rem; }
.lp-hero-nota { margin-top: 1rem; font-size: .9rem; color: #587078; }

.lp-diagrama { display: grid; grid-template-columns: auto 1fr 1.35fr; align-items: center; min-height: 320px; }
.lp-diagrama-erps { display: flex; flex-direction: column; justify-content: space-around; gap: .9rem; height: 100%; }
.lp-chip { background: #fff; border: 1px solid var(--lp-linea); border-radius: .6rem; padding: .55rem .9rem; font-weight: 800; color: var(--lp-tinta); min-width: 7.5rem;
  text-align: center; box-shadow: 0 1px 0 var(--lp-linea); }
.lp-chip img { max-height: 26px; max-width: 110px; }
.lp-lineas { width: 100%; height: 100%; min-height: 260px; overflow: visible; }
.lp-lineas path { fill: none; stroke: var(--lp-linea); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.lp-lineas .lp-pulso { stroke: var(--lp-vivo); stroke-width: 2.4; stroke-dasharray: 14 160; stroke-dashoffset: 174; animation: lp-flujo 2.8s linear infinite; }
@keyframes lp-flujo { to { stroke-dashoffset: 0; } }
.lp-panel { background: var(--lp-tinta); color: #fff; border-radius: 1rem; padding: 1.1rem 1.2rem 1rem; box-shadow: 0 24px 48px -24px rgba(11,61,74,.55); }
.lp-panel-cab { font-size: .8rem; font-weight: 700; color: #bfe3df; display: flex; align-items: center; gap: .45rem; }
.lp-vivo { width: .55rem; height: .55rem; border-radius: 50%; background: var(--lp-ambar); box-shadow: 0 0 0 4px rgba(242,165,49,.25); }
.lp-panel-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: .9rem 0 1rem; }
.lp-panel-kpis small { display: block; color: #9cc3c7; font-size: .72rem; }
.lp-panel-kpis strong { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.lp-panel-kpis em { font-style: normal; font-size: .75rem; font-weight: 700; color: #6fe0c9; }
.lp-panel-kpis em.lp-baja { color: #ffb4a3; }
.lp-panel-barras { display: flex; align-items: flex-end; gap: .35rem; height: 96px; }
.lp-panel-barras span { flex: 1; background: linear-gradient(180deg, var(--lp-vivo), #0d7f78); border-radius: .25rem .25rem 0 0; }

/* Secciones */
.lp-seccion { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.lp-intro { margin: -1rem 0 2rem; color: #3a4d55; } /* sin límite de ancho: la frase queda en una línea en escritorio */
.lp-conectores { background: var(--lp-niebla); }
.lp-conectores-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem 2.5rem; }
.lp-conector { border-top: 3px solid var(--lp-tinta); padding-top: 1rem; }
.lp-conector-logo { height: 44px; display: flex; align-items: center; margin-bottom: .5rem; }
.lp-conector-logo img { max-height: 40px; max-width: 170px; }
.lp-conector-logo span { font-size: 1.45rem; font-weight: 800; color: var(--lp-tinta); }
.lp-conector p { margin: 0; color: #3a4d55; font-size: .98rem; }

.lp-beneficios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3.5rem; }
.lp-beneficio { display: flex; gap: 1rem; padding: 1.35rem 0; border-top: 1px solid var(--lp-linea); }
.lp-beneficio > i { font-size: 1.45rem; color: var(--lp-vivo); line-height: 1.2; }
.lp-beneficio p { margin: 0; color: #3a4d55; max-width: 48ch; }

.lp-pasos-seccion { background: linear-gradient(180deg, #fff, var(--lp-niebla)); }
.lp-pasos { list-style: none; counter-reset: paso; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 0; margin: 0; position: relative; }
.lp-pasos::before { content: ""; position: absolute; top: 1.2rem; left: 1.2rem; right: 10%; height: 2px; background: var(--lp-linea); }
.lp-pasos li { position: relative; counter-increment: paso; padding-top: 3.4rem; }
.lp-pasos li::before { content: counter(paso); position: absolute; top: 0; left: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--lp-tinta); color: #fff;
  font-weight: 800; display: flex; align-items: center; justify-content: center; }
.lp-pasos p { color: #3a4d55; margin: 0; }

.lp-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.lp-plan { border: 1px solid var(--lp-linea); border-radius: .9rem; padding: 1.5rem; display: flex; flex-direction: column; }
.lp-precio { font-size: 1.9rem; font-weight: 800; color: var(--lp-tinta); letter-spacing: -.02em; margin: .25rem 0 .5rem; }
.lp-precio small { font-size: .9rem; font-weight: 600; color: #587078; }
.lp-plan-desc { color: #3a4d55; font-size: .95rem; }
/* Mensual / Anual y ahorro del pago anual */
.lp-ciclo { display: inline-flex; gap: .25rem; padding: .25rem; margin: 0 0 1.5rem; background: var(--lp-niebla); border: 1px solid var(--lp-linea); border-radius: 999px; }
.lp-ciclo button { border: 0; background: transparent; color: var(--lp-tinta); font: inherit; font-weight: 700; font-size: .95rem; padding: .45rem 1.1rem; border-radius: 999px; cursor: pointer; }
.lp-ciclo button.activo { background: var(--lp-tinta); color: #fff; }
.lp-ciclo button:focus-visible { outline: 3px solid var(--lp-vivo); outline-offset: 2px; }
.lp-ciclo button.activo .lp-ahorro { background: var(--lp-vivo); color: #fff; }
.lp-ahorro { display: inline-block; background: #DDF4F1; color: #0B6E67; font-weight: 800; font-size: .8rem; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap; }
.lp-precio-nota { color: #3a4d55; font-size: .9rem; margin: -.25rem 0 .75rem; line-height: 1.7; }
.lp-precio-nota s { color: #7a8b91; }
.lp-plan ul { list-style: none; padding: 0; margin: 0 0 1.25rem; flex: 1; }
.lp-plan li { padding: .35rem 0; border-top: 1px dashed var(--lp-linea); font-size: .95rem; }
.lp-atenuado { color: #8aa0a6; }

.lp-pregunta { border-top: 1px solid var(--lp-linea); padding: 1rem 0; }
.lp-pregunta:last-child { border-bottom: 1px solid var(--lp-linea); }
.lp-pregunta summary { cursor: pointer; font-weight: 700; color: var(--lp-tinta); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.lp-pregunta summary::after { content: "+"; font-weight: 800; color: var(--lp-vivo); }
.lp-pregunta[open] summary::after { content: "−"; }
.lp-pregunta p { margin: .6rem 0 0; color: #3a4d55; max-width: 70ch; }

.lp-cta { background: var(--lp-tinta); padding: clamp(3rem, 6vw, 4.5rem) 0; }
.lp-cta-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.lp-cta h2 { color: #fff; margin: 0; max-width: 20ch; }

.lp-pie { background: #06262f; color: #b6ccd0; padding: 3rem 0 1.5rem; font-size: .92rem; }
.lp-pie a { color: #e3f1f2; }
.lp-pie-fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.lp-pie-marca { font-weight: 800; color: #fff; font-size: 1.1rem; display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.lp-pie-texto { max-width: 52ch; margin-bottom: .4rem; }
.lp-pie-nota { font-size: .8rem; color: #85a3a9; }
.lp-redes { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .9rem; }
.lp-redes a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); color: #e3f1f2; font-size: 1.1rem; text-decoration: none; transition: background .15s, color .15s; }
.lp-redes a:hover { background: var(--lp-vivo); color: #fff; }
.lp-redes a:focus-visible { outline: 3px solid var(--lp-vivo); outline-offset: 2px; }
.lp-pie-enlaces { display: flex; flex-direction: column; gap: .45rem; }
.lp-copy { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .82rem; color: #85a3a9; }

@media (max-width: 991.98px) {
  .lp-nav { display: none; }
  .lp-hero-fila { grid-template-columns: 1fr; }
  .lp-diagrama { min-height: 240px; }
  .lp-beneficios { grid-template-columns: 1fr; }
  .lp-pasos { grid-template-columns: 1fr; }
  .lp-pasos::before { display: none; }
}
@media (max-width: 575.98px) {
  .lp-acciones .lp-boton-linea { display: none; }
  .lp-barra-fila { gap: .75rem; }
  .lp-diagrama { grid-template-columns: auto .6fr 1.4fr; }
  .lp-chip { min-width: 5.5rem; padding: .45rem .6rem; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { .lp-lineas .lp-pulso { animation: none; stroke-dasharray: none; stroke-width: 1.4; opacity: .5; } }