/* ============================================================================
   SREAL ECOSYSTEM — Landing shared layer (E3)
   Componentes comunes de las 8 landings core + especializados.
   Hereda tokens/clases de design-system.css. Sin CDNs, sin librerías.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   NAV (idéntica a la home, compartida por todas las landings)
   --------------------------------------------------------------------------- */
nav.site {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem var(--gutter);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
nav.site.scrolled { border-bottom-color: var(--gray-200); box-shadow: var(--sh-1); }
nav.site .nav-links { display: flex; align-items: center; gap: 1.6rem; }
nav.site .nav-links a { font-size: var(--fs-sm); color: var(--gray-600); font-weight: 500; transition: color var(--dur-1) var(--ease); }
nav.site .nav-links a:hover { color: var(--ink); }
nav.site .nav-actions { display: flex; align-items: center; gap: 0.7rem; }
@media (max-width: 860px) { nav.site .nav-links { display: none; } }

/* Migaja de servicio en la nav */
.nav-crumb { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-xs); color: var(--gray-500); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }
.nav-crumb img { height: 22px; width: auto; }
@media (max-width: 520px) { .nav-crumb .nc-name { display: none; } }

/* ---------------------------------------------------------------------------
   HERO de landing (bloque 1) — isologo + nombre + tagline + frase resultado
   --------------------------------------------------------------------------- */
.lhero { position: relative; padding-top: clamp(7rem, 15vh, 10rem); padding-bottom: var(--section-y); text-align: center; overflow: hidden; }
.lhero .container { position: relative; z-index: 1; }
.lhero-arc { position: absolute; left: 50%; top: 34%; width: min(120vw, 1100px); height: 1100px; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(196,196,202,0.20), transparent 58%); filter: blur(30px); z-index: 0; pointer-events: none; }
.lhero__iso { height: clamp(96px, 15vw, 140px); width: auto; margin: 0 auto; filter: drop-shadow(0 10px 24px rgba(20,20,25,0.16)); }
.lhero__name { margin-top: 1.1rem; font-size: clamp(2.1rem,5vw,3.2rem); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.lhero__kicker { margin-top: 0.7rem; }
.lhero h1 { margin: 1rem auto 0; max-width: 16ch; }
.lhero .sub { margin: 1.3rem auto 0; max-width: 42ch; }
.lhero .cta-row { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-top: 2.1rem; }

/* ---------------------------------------------------------------------------
   DEMO VIVA (bloque 3) — contenedor común
   --------------------------------------------------------------------------- */
.demo { margin-top: var(--sp-5); }
.demo-shell {
  background: var(--grad-alu);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3), var(--sh-inset);
  overflow: hidden;
}
.demo-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--gray-200); background: rgba(255,255,255,0.6); }
.demo-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-200); }
.demo-bar .demo-title { margin-left: 0.5rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-500); }
.demo-bar .demo-live { margin-left: auto; font-size: var(--fs-xs); color: #0b8a43; font-weight: 600; }
.demo-bar .demo-live::before { content:'●'; font-size: 8px; margin-right: 5px; vertical-align: 1px; }
.demo-body { padding: clamp(1.2rem, 3vw, 2rem); }
.demo-hint { text-align: center; margin-top: 1rem; font-size: var(--fs-xs); color: var(--gray-500); }

/* Selector de giro (chips segmentados, reusado por varias demos) */
.giro-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.giro-chip {
  font-size: var(--fs-sm); font-weight: 600; padding: 0.55em 1.1em; border-radius: var(--r-pill);
  background: var(--white); border: 1px solid var(--gray-200); color: var(--gray-600);
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.giro-chip:hover { border-color: var(--gray-300); transform: translateY(-1px); }
.giro-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* Campo de control (inputs de calculadoras) */
.ctrl { display: flex; flex-direction: column; gap: 0.4rem; }
.ctrl label { font-size: var(--fs-sm); font-weight: 600; color: var(--gray-600); }
.ctrl input[type="number"], .ctrl input[type="text"], .ctrl select {
  font-family: inherit; font-size: var(--fs-body); color: var(--ink);
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-sm);
  padding: 0.7em 0.9em; width: 100%;
}
.ctrl input:focus, .ctrl select:focus { outline: none; border-color: var(--ink); }
.ctrl input[type="range"] { width: 100%; accent-color: var(--ink); }
.ctrl .rng-val { font-weight: 700; color: var(--ink); }
.ctrl-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Salidas numéricas de las demos */
.out-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: var(--sp-3); }
.out { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r); padding: var(--sp-3); text-align: center; box-shadow: var(--sh-1); }
.out .num { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.out .lbl { margin-top: 0.5rem; font-size: var(--fs-xs); color: var(--gray-500); }

/* Barras dataviz puras CSS/SVG */
.bars { display: flex; flex-direction: column; gap: 0.9rem; margin-top: var(--sp-2); }
.bar-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 0.8rem; }
.bar-row .bl { font-size: var(--fs-sm); color: var(--gray-600); }
.bar-track { height: 14px; border-radius: var(--r-pill); background: var(--gray-100); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--r-pill); width: 0; transition: width 900ms var(--ease-out); }
.bar-fill.chrome-bar { background: var(--grad-chrome); }
.bar-fill.ink-bar { background: linear-gradient(90deg, #3A3A3F, #1D1D1F); }
.bar-fill.soft-bar { background: var(--gray-300); }
.bar-row .bv { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); white-space: nowrap; }
@media (max-width: 560px) { .bar-row { grid-template-columns: 92px 1fr auto; gap: 0.5rem; } .bar-row .bl { font-size: var(--fs-xs); } }

/* ---------------------------------------------------------------------------
   CÓMO FUNCIONA (bloque 4) — 3 pasos
   --------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); counter-reset: step; }
.step { position: relative; padding: var(--sp-4) var(--sp-3); }
.step .step-n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--grad-alu); border: 1px solid var(--gray-200); box-shadow: var(--sh-1), var(--sh-inset); font-weight: 700; color: var(--ink); }
.step h3 { margin-top: 1rem; font-size: var(--fs-h3); }
.step p { margin-top: 0.5rem; font-size: var(--fs-sm); color: var(--gray-600); }

/* ---------------------------------------------------------------------------
   RESULTADOS (bloque 5) — KPIs + dataviz
   --------------------------------------------------------------------------- */
.results-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; margin-top: var(--sp-4); align-items: stretch; }
@media (min-width: 820px) { .results-grid { grid-template-columns: 1fr 1fr; } }
.kpi-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: var(--sp-3); }
.kpi { padding: var(--sp-3); text-align: center; }
.kpi .big { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.kpi .lbl { margin-top: 0.6rem; font-size: var(--fs-sm); color: var(--gray-500); }
.viz-card { padding: var(--sp-4); display: flex; flex-direction: column; justify-content: center; }
.viz-card .viz-title { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); margin-bottom: 0.4rem; }
.viz-card .viz-note { margin-top: 1rem; font-size: var(--fs-xs); color: var(--gray-500); }

/* ---------------------------------------------------------------------------
   QUÉ INCLUYE + PRECIO (bloque 6)
   --------------------------------------------------------------------------- */
.pricing { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; margin-top: var(--sp-4); align-items: stretch; }
@media (min-width: 820px) { .pricing { grid-template-columns: 1.3fr 1fr; } }
.incl-card { padding: var(--sp-4); }
.incl-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.6rem; }
.incl-card li { font-size: var(--fs-sm); color: var(--gray-600); padding-left: 1.5em; position: relative; }
.incl-card li::before { content:""; position:absolute; left:0; top:0.55em; width:7px; height:7px; border-radius:50%; background: var(--grad-chrome); box-shadow: 0 0 0 1px var(--gray-200); }
.price-card { padding: var(--sp-4); display: flex; flex-direction: column; }
.price-card .price-setup { font-size: clamp(1.9rem, 3.6vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.price-card .price-mo { font-size: var(--fs-sm); color: var(--gray-500); margin-top: 0.2rem; }
.price-card .price-note { font-size: var(--fs-xs); color: var(--gray-500); margin-top: 0.9rem; }
.price-card .better { margin-top: auto; padding-top: var(--sp-3); }
.price-card .better p { font-size: var(--fs-sm); color: var(--gray-600); }
.price-card .better b { color: var(--ink); }
.price-card .btn { margin-top: 1rem; }

/* ---------------------------------------------------------------------------
   CTA final (bloque 7)
   --------------------------------------------------------------------------- */
.lcta { text-align: center; }
.lcta .cta-row { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }
.lcta .assurance { margin-top: 1.3rem; font-size: var(--fs-xs); color: var(--gray-500); }

/* Footer compartido */
footer.site { padding-block: var(--sp-5); border-top: 1px solid var(--gray-100); background: var(--warm-white); }
footer.site .frow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); }
footer.site a { color: var(--gray-500); font-size: var(--fs-sm); }
footer.site a:hover { color: var(--ink); }

/* Navegación entre servicios (pie de landing) */
.svc-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }
.svc-nav a { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); color: var(--gray-600); }
.svc-nav a:hover { color: var(--ink); }
.svc-nav img { height: 28px; width: auto; }