/* =====================================================================
   KAI — Design system · Dirección B «Sala de máquinas»
   -----------------------------------------------------------------------
   Concepto : el sitio ES el producto trabajando. Todo elemento
              decorativo es telemetría del bot — evidencia, no adorno.
   Día      : hueso cálido + tinta + verde señal + ámbar de estado.
   Noche    : "modo nocturno del sistema" — calibración propia, no una
              inversión: verde-negro profundo, señal fosforescente,
              recibos que pasan de papel térmico a terminal POS.
   Tipo     : Space Grotesk (voz) + IBM Plex Mono (datos: precios,
              timestamps, etiquetas, estados).
   Motion   : fade + rise en scroll-reveal, easing expo-out.
   ===================================================================== */

:root{
  /* ---- DÍA ---- */
  --bg:        #F2F1ED;
  --paper:     #FBFAF7;
  --paper-hover: #FFFFFF;
  --ink:       #141514;
  --ink-soft:  #5E625C;
  --line:      #DCDAD1;
  --line-soft: #E7E5DD;

  --senal:      #0B7A50;   /* verde señal — CTAs, estados */
  --senal-text: #086744;   /* variante texto (contraste AA) */
  --senal-dim:  rgba(11,122,80,.10);
  --on-senal:   #FFFFFF;
  --ambar:      #B67F1E;   /* ámbar de estado — actividad */
  --ambar-dim:  rgba(182,127,30,.12);

  /* sala oscura (contacto, footer, teléfono) — constante en ambos modos */
  --dark:         #0C110E;
  --on-dark:      #E7EAE3;
  --on-dark-soft: #8C968D;
  --dark-line:    rgba(231,234,227,.14);

  --phone-screen:  #EDE8E0;
  --bubble-in:     #FFFFFF;
  --bubble-in-ink: #1A1A1A;
  --bubble-out:    #0F8A5C;

  --nav-glass: rgba(242,241,237,.82);
  --sheet-bg:  rgba(242,241,237,.97);

  --shadow-card:  0 1px 2px rgba(20,21,20,.05), 0 12px 32px -12px rgba(20,21,20,.14);
  --shadow-phone: 0 40px 90px -30px rgba(20,21,20,.35);

  --grain-opacity: .05;

  --sans: "Space Grotesk", -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Courier New", monospace;

  --ease: cubic-bezier(.16,1,.3,1);
  --section-pad: 160px;
  --content: 1200px;
}

/* ---------- NOCHE — calibración propia, no inversión ---------- */
[data-theme="dark"]{
  --bg:        #0C110E;
  --paper:     #121915;
  --paper-hover: #17201B;
  --ink:       #E7EAE3;
  --ink-soft:  #8C968D;
  --line:      rgba(231,234,227,.14);
  --line-soft: rgba(231,234,227,.07);

  --senal:      #2BD48A;   /* la señal sube de brillo de noche */
  --senal-text: #2BD48A;
  --senal-dim:  rgba(43,212,138,.10);
  --on-senal:   #0C110E;
  --ambar:      #E2B15C;
  --ambar-dim:  rgba(226,177,92,.12);

  --dark:         #080B09;
  --dark-line:    rgba(231,234,227,.10);

  --phone-screen:  #0E1411;
  --bubble-in:     #1B241E;
  --bubble-in-ink: #E2E8E0;
  --bubble-out:    #0E6B45;

  --nav-glass: rgba(12,17,14,.8);
  --sheet-bg:  rgba(12,17,14,.97);

  --shadow-card:  0 1px 0 rgba(43,212,138,.06), 0 16px 40px -16px rgba(0,0,0,.6);
  --shadow-phone: 0 40px 100px -30px rgba(43,212,138,.14);

  --grain-opacity: .03;
}
[data-theme="dark"] .nav__mark,
[data-theme="dark"] .service-hero__icon img{
  filter: invert(1);
}

@media (max-width: 760px){
  :root{ --section-pad: 88px; }
}

/* Smooth native cross-fade between pages, where supported — no-op elsewhere. */
@view-transition{
  navigation: auto;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

/* ---------- accessibility ---------- */
:focus-visible{
  outline: 2px solid var(--senal);
  outline-offset: 3px;
  border-radius: 3px;
}
.skip-link{
  position: absolute;
  top: -100px; left: 16px;
  z-index: 1000;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  transition: top .25s var(--ease);
}
.skip-link:focus-visible{
  top: 16px;
  outline-color: var(--bg);
}

#servicios, #proceso, #contacto, #proceso-servicio, #precios{
  scroll-margin-top: 80px;
}

body{
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;
  transition: background-color .45s var(--ease), color .45s var(--ease);
}

/* grano de impresión — textura que da cuerpo al hueso/papel */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection{ background: var(--senal); color: var(--on-senal); }

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }

.br-desktop{ display: inline; }
@media (max-width: 640px){ .br-desktop{ display: none; } }

/* ---------- etiqueta mono del sistema ---------- */
.sys{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- reveal-on-scroll ---------- */
/* Solo se ocultan si el JS está activo (clase .js en <html>).
   Si el JS falla o no carga, la web se ve completa.
   La entrada corre como animation con fill "backwards": al terminar no
   queda ningún transform aplicado, así los :hover con transform de cada
   componente (recibos, planes, why) funcionan sin pelear especificidad. */
.js .reveal{ opacity: 0; }
.js .reveal.is-visible{
  opacity: 1;
  animation: reveal-in .8s var(--ease) backwards;
  animation-delay: calc(var(--d, 0) * 90ms);
}
@keyframes reveal-in{
  from{ opacity: 0; transform: translateY(24px); }
}
.js .reveal--hero.is-visible{
  animation-duration: .9s;
  animation-delay: calc(var(--d, 0) * 100ms);
}

/* ============ NAV ============ */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav.is-scrolled{
  background: var(--nav-glass);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.nav__inner{
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav__brand{
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
}
.nav__mark{ width: 20px; height: 20px; }
.nav__word{
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
}
.nav__links{
  display: flex;
  gap: 24px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.nav__links a{
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color .2s var(--ease), background-size .3s var(--ease);
}
.nav__links a:hover{
  color: var(--ink);
  background-size: 100% 1.5px;
}

.nav__cta{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 6px;
  background: var(--senal);
  color: var(--on-senal);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nav__cta:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px -8px var(--senal); }
.nav__cta:active{ transform: scale(.95); }

.nav__burger{
  display: none;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav__burger span{
  width: 16px; height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav__burger[aria-expanded="true"] span:first-child{ transform: translateY(3.3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform: translateY(-3.3px) rotate(-45deg); }

.nav__sheet{
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px 24px 20px;
  background: var(--sheet-bg);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav__sheet a{
  padding: 14px 4px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.nav__sheet-cta{
  margin-top: 12px;
  text-align: center;
  padding: 13px;
  border-radius: 8px;
  background: var(--senal);
  color: var(--on-senal) !important;
  font-weight: 600;
  border-bottom: none !important;
}
.nav__sheet.is-open{ display: flex; }

@media (max-width: 760px){
  .nav__links, .nav__cta, .nav__inner .currency-toggle{ display: none; }
  .nav__burger{ display: flex; }
}

.nav__sheet-controls{
  display: flex;
  align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}
.nav__sheet-controls .currency-toggle{
  display: inline-flex;
  height: 34px;
}
.nav__sheet-controls .currency-btn{ line-height: 34px; }

/* ============ NAV — controles (tema / idioma / moneda) ============ */
.theme-toggle{
  width: 34px; height: 34px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.theme-toggle:hover{ border-color: var(--ink-soft); transform: translateY(-1px); }
.theme-toggle:active{ transform: scale(.9); }
.theme-toggle svg{ width: 15px; height: 15px; }
.theme-toggle__sun{ display: none; }
.theme-toggle__moon{ display: block; }
[data-theme="dark"] .theme-toggle__sun{ display: block; }
[data-theme="dark"] .theme-toggle__moon{ display: none; }

.lang-toggle{
  height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.lang-toggle:hover{ border-color: var(--ink-soft); transform: translateY(-1px); }
.lang-toggle:active{ transform: scale(.9); }

.currency-toggle{
  display: flex;
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--line);
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color .25s var(--ease);
}
.currency-toggle:hover{ border-color: var(--ink-soft); }
.currency-btn{
  background: transparent;
  border: none;
  border-left: 1px solid var(--line);
  padding: 0 11px;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
  line-height: 1;
}
.currency-btn:first-child{ border-left: none; }
.currency-btn.is-active{
  background: var(--ink);
  color: var(--bg);
}
[data-theme="dark"] .currency-btn.is-active{
  background: var(--senal);
  color: var(--on-senal);
}
.currency-btn:not(.is-active):hover{ color: var(--ink); }

/* ============ HERO (index — dos columnas con demo en vivo) ============ */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 130px 24px 70px;
  overflow: hidden;
}
.hero__grid{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 56px;
  align-items: center;
}

/* marcas de registro "+" — cromo del sistema, orienta como un plano */
.corner-marks{
  position: absolute;
  inset: 110px 26px 34px;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
  opacity: .5;
  z-index: 0;
}
.corner-marks i{ position: absolute; font-style: normal; }
.corner-marks i:nth-child(1){ top: 0; left: 0; }
.corner-marks i:nth-child(2){ top: 0; right: 0; }
.corner-marks i:nth-child(3){ bottom: 0; left: 0; }
.corner-marks i:nth-child(4){ bottom: 0; right: 0; }

.hero__status{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
}
.hero__status .dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--senal);
  flex-shrink: 0;
  animation: pulse-dot 2.2s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{ box-shadow: 0 0 0 0 var(--senal-dim); }
  50%{ box-shadow: 0 0 0 7px var(--senal-dim); }
}
.hero__status b{ color: var(--senal-text); font-weight: 600; }

/* eyebrow legacy (subpáginas) */
.hero__eyebrow{
  position: relative; z-index: 1;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--senal-text);
  margin: 0 0 20px;
}
.hero__eyebrow::before{ content: "+ "; color: var(--ambar); }

.hero__title{
  position: relative; z-index: 1;
  margin: 0;
  font-size: clamp(34px, 5.2vw, 66px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -.03em;
}
.hero__title span{ display: block; }
.hero__title em{
  font-style: normal;
  color: var(--senal-text);
}
.hero__sub{
  position: relative; z-index: 1;
  max-width: 46ch;
  margin: 26px 0 0;
  font-size: clamp(16px, 2.2vw, 18px);
  line-height: 1.55;
  color: var(--ink-soft);
}
.hero__actions{
  position: relative; z-index: 1;
  margin-top: 36px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero__fine{ margin: 18px 0 0; }

/* ---------- compact hero (404) ---------- */
.hero--compact{
  min-height: auto;
  padding: 140px 24px 100px;
  text-align: center;
}
.hero--compact .hero__content{ position: relative; z-index: 1; width: 100%; }
.hero--compact .hero__sub{ margin-left: auto; margin-right: auto; max-width: 560px; }
.hero--compact .hero__actions{ justify-content: center; }
.hero__title--service{ font-size: clamp(30px, 4vw, 48px); }
.hero__orb{ display: none; }

/* ---------- service hero (subpáginas — dos columnas + panel de módulo) ---------- */
.hero--service{
  min-height: auto;
  padding: 150px 24px 90px;
}
.hero--service .breadcrumb{ margin-bottom: 24px; }
.hero--service .hero__status{ display: flex; }

/* panel de módulo — la ficha técnica del servicio */
.module{
  width: min(360px, 100%);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  box-shadow: var(--shadow-card);
  font-family: var(--mono);
  transition: background-color .45s var(--ease);
}
.module__head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}
.module__status{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--senal-text);
}
.module__status .dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--senal);
  animation: pulse-dot 2.2s ease-in-out infinite;
}
.module__icon{
  width: 104px; height: 104px;
  margin: 28px auto;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--senal-dim);
  color: var(--senal-text);
}
.module__icon svg{ width: 100%; height: 100%; }
.module__specs{
  list-style: none;
  margin: 0 0 18px;
  padding: 16px 0 0;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.module__specs .rline{ font-size: 12.5px; }
.module__cta{
  display: flex;
  justify-content: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--senal-text);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.module__cta:hover{
  background: var(--senal);
  border-color: var(--senal);
  color: var(--on-senal);
}

/* ---------- buttons — lenguaje "consola" ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease),
              border-color .25s var(--ease), color .25s var(--ease),
              box-shadow .25s var(--ease);
  white-space: nowrap;
}
.btn--primary{
  background: var(--senal);
  color: var(--on-senal);
}
.btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -10px var(--senal);
}
.btn--primary:active{ transform: scale(.97); }
.btn__cursor{
  display: inline-block;
  width: 8px; height: 15px;
  background: currentColor;
  opacity: .9;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity: 0; } }

.btn--ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover{ border-color: var(--ink); transform: translateY(-2px); }
.btn--ghost:active{ transform: scale(.97); }

.btn--light{ background: var(--on-dark); color: var(--dark); }
.btn--light:hover{ transform: translateY(-2px); background: var(--senal); color: var(--on-senal); }
.btn--light:active{ transform: scale(.97); }

.btn--outline-light{ background: transparent; color: var(--on-dark); border-color: rgba(231,234,227,.28); }
.btn--outline-light:hover{ border-color: var(--on-dark); transform: translateY(-2px); }
.btn--outline-light:active{ transform: scale(.97); }

/* ============ TELÉFONO — firma nº1: el bot trabajando en vivo ============ */
.hero__demo{
  position: relative;
  z-index: 1;
  justify-self: center;
}

.phone{
  position: relative;
  width: min(330px, 88vw);
  border-radius: 40px;
  background: var(--dark);
  padding: 12px;
  box-shadow: var(--shadow-phone);
  transition: box-shadow .5s var(--ease);
}
.phone__notch{
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 106px; height: 24px;
  border-radius: 0 0 14px 14px;
  background: var(--dark);
  z-index: 3;
}
.phone__statusbar{
  display: flex;
  justify-content: space-between;
  padding: 7px 22px 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: rgba(231,234,227,.85);
}
.phone__bar{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 12px 14px;
}
.phone__avatar{
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--senal);
  color: var(--on-senal);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.phone__who{
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 14px;
  font-weight: 600;
  color: var(--on-dark);
}
.phone__who small{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .05em;
  color: #57DD9E;
}
.phone__who small::before{
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #57DD9E;
}
.phone__screen{
  background: var(--phone-screen);
  border-radius: 28px;
  height: 370px;
  padding: 14px 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background-color .45s var(--ease);
}
.chat{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  transition: opacity .45s var(--ease);
}
.chat__bubble{
  max-width: 86%;
  padding: 9px 13px 7px;
  border-radius: 15px;
  font-size: 13.5px;
  line-height: 1.42;
  animation: bubble-in .38s var(--ease) both;
}
@keyframes bubble-in{
  from{ opacity: 0; transform: translateY(10px) scale(.97); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
.chat__bubble--in{
  align-self: flex-start;
  background: var(--bubble-in);
  color: var(--bubble-in-ink);
  border-bottom-left-radius: 4px;
}
.chat__bubble--out{
  align-self: flex-end;
  background: var(--bubble-out);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat__time{
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 9px;
  opacity: .55;
  text-align: right;
}
.chat__chip{
  align-self: center;
  margin-top: 4px;
  padding: 6px 13px;
  border-radius: 100px;
  background: var(--ambar-dim);
  border: 1px solid color-mix(in srgb, var(--ambar) 40%, transparent);
  color: var(--ambar);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .03em;
  animation: bubble-in .38s var(--ease) both;
}
.chat__typing{
  align-self: flex-end;
  display: flex;
  gap: 4px;
  padding: 12px 15px;
  border-radius: 15px;
  border-bottom-right-radius: 4px;
  background: var(--bubble-out);
  animation: bubble-in .3s var(--ease) both;
}
.chat__typing span{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  animation: typing-dot 1s ease-in-out infinite;
}
.chat__typing span:nth-child(2){ animation-delay: .15s; }
.chat__typing span:nth-child(3){ animation-delay: .3s; }
@keyframes typing-dot{
  0%,100%{ transform: translateY(0); opacity: .4; }
  50%{ transform: translateY(-3px); opacity: 1; }
}

.phone__caption{
  margin: 18px 4px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.phone__caption b{ color: var(--ink); font-weight: 600; }

/* contador de telemetría flotante */
.stat-chip{
  position: absolute;
  top: -18px; right: -26px;
  z-index: 2;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: var(--shadow-card);
  text-align: left;
  transition: background-color .45s var(--ease), border-color .45s var(--ease);
}
.stat-chip__num{
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--senal-text);
  line-height: 1;
}
.stat-chip__label{
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ============ TICKER — firma nº2: registro de actividad ============ */
.ticker{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  transition: background-color .45s var(--ease), border-color .45s var(--ease);
}
.ticker__label{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 22px;
  border-right: 1px solid var(--line);
  background: var(--bg);
  z-index: 2;
  transition: background-color .45s var(--ease);
}
.ticker__label .dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ambar);
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}
.ticker__viewport{ overflow: hidden; flex: 1; display: flex; align-items: center; }
.ticker__track{
  display: flex;
  gap: 44px;
  padding-left: 44px;
  width: max-content;
  animation: ticker-scroll 60s linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state: paused; }
@keyframes ticker-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.tk{
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
  color: var(--ink-soft);
}
.tk b{
  font-weight: 600;
  color: var(--ambar);
}

/* ============ SECTION HEAD ============ */
.section-head{
  position: relative;
  z-index: 1;
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 24px;
  margin-bottom: 60px;
}
.eyebrow{
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--senal-text);
  margin: 0 0 14px;
}
.eyebrow::before{
  content: "+";
  color: var(--ambar);
  font-weight: 600;
}
.eyebrow--light{ color: var(--senal); }
.section-head h2{
  margin: 0;
  font-size: clamp(30px, 4.6vw, 54px);
  font-weight: 600;
  letter-spacing: -.03em;
  max-width: 16ch;
  line-height: 1.08;
}

/* ============ SERVICES ============ */
.services{ padding: var(--section-pad) 0; }

.grid{
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
@media (max-width: 900px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .grid{ grid-template-columns: 1fr; border-radius: 12px; }
}

.card{
  position: relative;
  background: var(--paper);
  padding: 42px 30px;
  cursor: pointer;
  transition: background .3s var(--ease);
}
.card:hover{ background: var(--paper-hover); }
.card:hover .card__icon{ color: var(--senal-text); transform: translateY(-2px); }

/* Invisible overlay: stretches the "Ver más" link click area over the whole card. */
.card__more::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}

.card__icon{
  width: 38px; height: 38px;
  color: var(--ink);
  margin-bottom: 22px;
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.card__icon svg{ width: 100%; height: 100%; }

.card h3{
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.card p{
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.card__more{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--senal-text);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: gap .25s var(--ease), background-size .3s var(--ease);
}
.card:hover .card__more{
  gap: 10px;
  background-size: 100% 1.5px;
}

/* ============ SERVICES — collapsible "extra" block ============ */
.services-extra{
  max-width: var(--content);
  margin: 40px auto 0;
  padding: 0 24px;
  text-align: center;
}
.services-extra__toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--senal-text);
  padding: 12px 18px;
  transition: border-color .25s var(--ease), gap .25s var(--ease);
}
.services-extra__toggle:hover{ gap: 12px; border-color: var(--senal); }
.services-extra__arrow{ transition: transform .3s var(--ease); }
.services-extra__toggle[aria-expanded="true"] .services-extra__arrow{ transform: rotate(90deg); }
.services-extra__panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease);
}
.services-extra__inner{ overflow: hidden; }
.services-extra__grid{ margin-top: 32px; }
.services-extra.is-open .services-extra__panel{ grid-template-rows: 1fr; }

/* ============ EXAMPLE (practical use case) ============ */
.example{
  position: relative;
  padding: var(--section-pad) 0;
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  transition: background-color .45s var(--ease);
}
.example__inner{
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
}
.example__intro{
  margin: 0 0 28px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.example__list{
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.example__list li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.example__outro{
  margin: 0 0 36px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}

/* checkmarks animados de la lista de ejemplo */
.example__list .feature-list__check svg path{
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset .5s var(--ease);
}
.example__list.is-visible li:nth-child(1) .feature-list__check svg path{ stroke-dashoffset: 0; transition-delay: .4s; }
.example__list.is-visible li:nth-child(2) .feature-list__check svg path{ stroke-dashoffset: 0; transition-delay: .6s; }
.example__list.is-visible li:nth-child(3) .feature-list__check svg path{ stroke-dashoffset: 0; transition-delay: .8s; }
.example__list.is-visible li:nth-child(4) .feature-list__check svg path{ stroke-dashoffset: 0; transition-delay: 1.0s; }

/* ============ WHY KAI ============ */
.why{ position: relative; padding: var(--section-pad) 0; }
.why__grid{
  position: relative;
  z-index: 1;
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}
@media (max-width: 760px){
  .why__grid{ grid-template-columns: 1fr; gap: 36px; }
}
.why__item{
  padding-top: 24px;
  border-top: 1px solid var(--line);
  transition: transform .3s var(--ease);
}
.why__item:hover{ transform: translateY(-4px); }
.why__num{
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ambar);
  margin-bottom: 16px;
}
.why__num::before{ content: "[ "; color: var(--ink-soft); }
.why__num::after{ content: " ]"; color: var(--ink-soft); }
.why__item h3{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.why__item p{
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ============ PROCESS ============ */
.process{
  position: relative;
  padding: var(--section-pad) 0;
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  transition: background-color .45s var(--ease);
}
.process__inner{
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

.process__steps{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.process__steps::before{
  content: "";
  position: absolute;
  left: 20px; top: 24px; bottom: 24px;
  width: 1px;
  background: var(--line);
}
.step{ position: relative; padding-left: 64px; }
.step__num{
  position: absolute;
  left: 0; top: 0;
  width: 41px; height: 41px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  z-index: 1;
  transition: border-color .4s var(--ease), color .4s var(--ease),
              background .35s var(--ease), transform .35s var(--ease);
}
.step.is-visible .step__num{ border-color: var(--senal); color: var(--senal-text); }
.step h3{
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: color .25s var(--ease);
}
.step:hover h3{ color: var(--senal-text); }
.step p{
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 48ch;
}

/* el paso centrado en el viewport (ver script.js) */
.step.is-active .step__num{
  background: var(--senal);
  border-color: var(--senal);
  color: var(--on-senal);
  transform: scale(1.1);
}

/* ============ PRICING (index) — recibos ============
   Día: papel térmico. Noche: pantalla de terminal POS. */
.pricing{ position: relative; padding: var(--section-pad) 0; }
.pricing__intro{
  position: relative;
  z-index: 1;
  max-width: var(--content);
  margin: -36px auto 0;
  padding: 0 24px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.pricing__grid{
  position: relative;
  z-index: 1;
  max-width: var(--content);
  margin: 48px auto 56px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px){
  .pricing__grid{ grid-template-columns: 1fr; max-width: 480px; gap: 36px; }
}

.receipt{
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-bottom: none;
  padding: 26px 24px 30px;
  font-family: var(--mono);
  box-shadow: var(--shadow-card);
  transition: transform .3s var(--ease), background-color .45s var(--ease),
              box-shadow .3s var(--ease);
}
.receipt:hover{ transform: translateY(-5px) rotate(-.3deg); }
.receipt:nth-child(2):hover{ transform: translateY(-5px) rotate(.3deg); }

/* borde dentado inferior — el corte del papel */
.receipt::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -9px;
  height: 10px;
  background:
    linear-gradient(-45deg, var(--paper) 5.5px, transparent 0),
    linear-gradient(45deg, var(--paper) 5.5px, transparent 0);
  background-size: 15px 12px;
  background-position: left bottom;
  background-repeat: repeat-x;
  transition: background .45s var(--ease);
}

.receipt__head{
  text-align: center;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}
.receipt__brand{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--ink);
}
.receipt__meta{
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.receipt__title{
  margin: 16px 0 4px;
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}
.receipt__for{
  font-size: 11px;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

.receipt__items{
  list-style: none;
  margin: 0;
  padding: 0 0 16px;
  border-bottom: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.rline{
  display: flex;
  align-items: baseline;
  font-size: 12px;
  color: var(--ink-soft);
}
.rline .dots{
  flex: 1;
  margin: 0 8px;
  border-bottom: 1.5px dotted var(--line);
  transform: translateY(-3px);
}
.rline .val{
  font-weight: 600;
  color: var(--senal-text);
  white-space: nowrap;
}

.receipt__total{ padding: 18px 0 4px; }
.receipt__total-label{
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.receipt__total-value{
  margin-top: 6px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.15;
}
.receipt__total-value .plan__period{
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}
.receipt__extra{
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink-soft);
  min-height: 1em;
}
.receipt__note{
  margin: 14px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* código de barras decorativo — remata la metáfora de impresión */
.receipt__barcode{
  margin-top: 18px;
  height: 26px;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 4px,
    var(--ink) 4px 5px, transparent 5px 9px,
    var(--ink) 9px 12px, transparent 12px 14px,
    var(--ink) 14px 15px, transparent 15px 20px);
  opacity: .75;
}
[data-theme="dark"] .receipt__barcode{ opacity: .5; }

/* sello — solo el recibo de software lo lleva */
.receipt__stamp{
  position: absolute;
  top: 84px; right: 14px;
  transform: rotate(8deg);
  padding: 7px 12px;
  border: 2px dashed var(--ambar);
  border-radius: 8px;
  color: var(--ambar);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--ambar-dim);
}

.pricing__outro{
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto 28px;
  padding: 0 24px;
  text-align: center;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.pricing__cta{ position: relative; z-index: 1; text-align: center; }

/* ============ CONTACT — la sala oscura ============ */
.contact{
  position: relative;
  background: var(--dark);
  color: var(--on-dark);
  padding: var(--section-pad) 24px;
  text-align: center;
  overflow: hidden;
  transition: background-color .45s var(--ease);
}
.contact__glyph{
  position: absolute;
  top: 50%; left: 50%;
  width: min(800px, 130vw);
  transform: translate(-50%,-50%);
  opacity: .04;
  pointer-events: none;
}
.contact .eyebrow{ position: relative; z-index: 1; }
.contact h2{
  position: relative; z-index: 1;
  margin: 0;
  font-size: clamp(30px, 4.6vw, 50px);
  font-weight: 600;
  letter-spacing: -.02em;
}
.contact__sub{
  position: relative; z-index: 1;
  margin: 18px auto 0;
  max-width: 460px;
  color: var(--on-dark-soft);
  font-size: 17px;
  line-height: 1.5;
}
.contact__actions{
  position: relative; z-index: 1;
  margin-top: 40px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.contact__fine{
  position: relative; z-index: 1;
  margin: 20px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}

.contact__spotlight{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--x,50%) var(--y,30%), rgba(43,212,138,.14), transparent 55%);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.contact:hover .contact__spotlight{ opacity: 1; }
.contact__badge{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 8px 14px 8px 11px;
  border-radius: 6px;
  border: 1px solid var(--dark-line);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.contact__badge .dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2BD48A;
  box-shadow: 0 0 0 0 rgba(43,212,138,.6);
  animation: badgePulse 2s infinite;
}
@keyframes badgePulse{
  0%{ box-shadow: 0 0 0 0 rgba(43,212,138,.5); }
  70%{ box-shadow: 0 0 0 6px rgba(43,212,138,0); }
  100%{ box-shadow: 0 0 0 0 rgba(43,212,138,0); }
}

/* ============ FOOTER ============ */
.footer{
  background: var(--dark);
  border-top: 1px solid var(--dark-line);
  transition: background-color .45s var(--ease);
}
.footer__inner{
  max-width: var(--content);
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer__brand{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--on-dark);
  font-weight: 600;
  font-size: 14px;
}
.footer__brand img{ filter: invert(1); width: 16px; height: 16px; }
.footer p{
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--on-dark-soft);
}
.footer__phone{
  color: var(--on-dark-soft);
  transition: color .2s var(--ease);
}
.footer__phone:hover{ color: var(--on-dark); }

.footer__social{
  display: flex;
  gap: 10px;
}
.footer__social a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--dark-line);
  border-radius: 8px;
  color: var(--on-dark-soft);
  transition: color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.footer__social a:hover{
  color: #2BD48A;
  border-color: rgba(43,212,138,.5);
  transform: translateY(-2px);
}
.footer__social svg{ width: 16px; height: 16px; }

/* ============ FLOATING WHATSAPP ============ */
.float-wa{
  position: fixed;
  right: 22px; bottom: 22px;
  height: 56px;
  padding: 0 15px;
  border-radius: 14px;
  background: var(--senal);
  color: var(--on-senal);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  box-shadow: 0 10px 30px rgba(11,122,80,.4);
  z-index: 90;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), gap .3s var(--ease), padding .3s var(--ease);
  animation: floatPop .7s var(--ease) .6s both;
}
.float-wa:hover{ transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 34px rgba(11,122,80,.5); gap: 10px; }
.float-wa:active{ transform: scale(.95); }

.float-wa__icon{ width: 26px; height: 26px; flex-shrink: 0; display: flex; }
.float-wa__icon svg{ width: 100%; height: 100%; }

.float-wa__label{
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width .35s var(--ease), opacity .25s var(--ease);
}
.float-wa:hover .float-wa__label{ max-width: 190px; opacity: 1; }

.float-wa::before,
.float-wa::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: var(--senal);
  opacity: .5;
  animation: pulse 2.6s var(--ease) infinite;
  z-index: -1;
}
.float-wa::after{ animation-delay: 1.3s; }
.float-wa:hover::before,
.float-wa:hover::after{ animation-play-state: paused; opacity: 0; }
@keyframes pulse{
  0%{ transform: scale(1); opacity: .45; }
  100%{ transform: scale(1.5); opacity: 0; }
}
@keyframes floatPop{
  0%{ transform: scale(0) translateY(20px); opacity: 0; }
  60%{ transform: scale(1.08) translateY(-3px); opacity: 1; }
  100%{ transform: scale(1) translateY(0); opacity: 1; }
}

/* ============ SCROLL PROGRESS ============ */
.progress{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 200;
  pointer-events: none;
}
.progress__bar{
  height: 100%;
  width: 0%;
  background: var(--senal);
  transform-origin: left;
}

/* ============ SERVICE SUBPAGE ============ */
.breadcrumb{
  position: relative; z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color .2s var(--ease), gap .2s var(--ease);
}
.breadcrumb:hover{ color: var(--ink); gap: 9px; }

.service-hero__icon{
  position: relative; z-index: 1;
  width: 54px; height: 54px;
  margin: 0 auto 24px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--senal-text);
}
.service-hero__icon svg{ width: 100%; height: 100%; }

/* ---------- feature grid (qué incluye) ---------- */
.features{ position: relative; padding: var(--section-pad) 0; }
.feature-list{
  position: relative;
  z-index: 1;
  max-width: calc(var(--content) - 48px);
  margin: 0 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
@media (min-width: 1248px){
  .feature-list{ margin-left: auto; margin-right: auto; }
}
@media (max-width: 700px){
  .feature-list{ grid-template-columns: 1fr; border-radius: 12px; }
}
.feature-list li{
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--paper);
  padding: 32px 30px;
  transition: background .25s var(--ease);
}
.feature-list li:hover{ background: var(--paper-hover); }
.feature-list__check{
  flex-shrink: 0;
  width: 27px; height: 27px;
  margin-top: 2px;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--senal) 45%, transparent);
  background: var(--senal-dim);
  color: var(--senal-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.feature-list li:hover .feature-list__check{
  background: var(--senal);
  border-color: var(--senal);
  color: var(--on-senal);
}
.feature-list__check svg{ width: 13px; height: 13px; }
.feature-list h3{
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.feature-list p{
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- process en subpáginas: tres columnas, lectura de tablero ---------- */
.process--solo .process__inner{ max-width: var(--content); }
.process--solo .process__steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
}
.process--solo .process__steps::before{ display: none; }
.process--solo .step{
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
}
.process--solo .step__num{
  position: static;
  margin-bottom: 18px;
}
@media (max-width: 760px){
  .process--solo .process__steps{ grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- related services: directorio del sistema ---------- */
.related{ padding: 0 0 var(--section-pad); }
.related .section-head{ margin-bottom: 40px; }
.dir{
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 24px;
}
.dir__row{
  display: grid;
  grid-template-columns: 64px 42px 1fr auto;
  gap: 26px;
  align-items: center;
  padding: 28px 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: none;
  transition: background .25s var(--ease);
}
.dir__row:first-child{ border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; }
.dir__row:last-child{ border-radius: 0 0 14px 14px; }
.dir__row:hover{ background: var(--paper-hover); }
.dir__idx{
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ambar);
}
.dir__idx::before{ content: "[ "; color: var(--ink-soft); }
.dir__idx::after{ content: " ]"; color: var(--ink-soft); }
.dir__icon{
  width: 38px; height: 38px;
  color: var(--ink);
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.dir__icon svg{ width: 100%; height: 100%; }
.dir__row:hover .dir__icon{ color: var(--senal-text); transform: translateY(-2px); }
.dir__name{
  display: block;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
.dir__desc{
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 60ch;
}
.dir__go{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--senal-text);
  white-space: nowrap;
  transition: transform .25s var(--ease);
}
.dir__row:hover .dir__go{ transform: translateX(4px); }
@media (max-width: 700px){
  .dir__row{
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 10px 16px;
    padding: 22px 18px;
  }
  .dir__icon{ display: none; }
  .dir__go{ grid-column: 2; justify-self: start; }
}

/* ============ FAQ ACCORDION ============ */
.faq{ position: relative; z-index: 1; padding: var(--section-pad) 0; }
.faq__list{
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  counter-reset: faq;
}
.faq__item{ counter-increment: faq; }
.faq__q > span::before{
  content: "0" counter(faq);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ambar);
  margin-right: 14px;
}
.faq__item{ border-bottom: 1px solid var(--line); }
.faq__item:first-child{ border-top: 1px solid var(--line); }
.faq__q{
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 4px;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.faq__q::before{
  content: '';
  position: absolute;
  left: -4px; top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px; height: 60%;
  border-radius: 2px;
  background: var(--senal);
  transition: transform .3s var(--ease);
}
.faq__item.is-open .faq__q::before{ transform: translateY(-50%) scaleY(1); }
.faq__q:hover{ color: var(--senal-text); }
.faq__q:hover .faq__chev{ color: var(--senal-text); }
.faq__chev{
  flex-shrink: 0;
  width: 20px; height: 20px;
  color: var(--ink-soft);
  transition: transform .3s var(--ease), color .3s var(--ease);
}
.faq__q[aria-expanded="true"] .faq__chev{ transform: rotate(180deg); color: var(--senal-text); }
.faq__a{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
.faq__a-inner{ overflow: hidden; }
.faq__a p{
  margin: 0;
  padding: 0 4px 22px;
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.faq__item.is-open .faq__a{ grid-template-rows: 1fr; }

/* ============ PLANS (subpáginas) — hojas de especificación ============ */
.plans{ position: relative; padding: var(--section-pad) 0; }

.plans__group-label{
  max-width: var(--content);
  margin: 0 auto 20px;
  padding: 0 24px 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.plans__gap{ height: 56px; }

.plans__grid{
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: start;
}
.plans__grid--3{ grid-template-columns: repeat(3, 1fr); }
.plans__grid--2{ grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1100px){
  .plans__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px){
  .plans__grid--3{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .plans__grid,
  .plans__grid--2{ grid-template-columns: 1fr; }
}

.plan{
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: border-color .3s var(--ease), transform .3s var(--ease),
              background-color .45s var(--ease);
}
.plan:hover{ border-color: color-mix(in srgb, var(--senal) 55%, transparent); transform: translateY(-3px); }
.plan--featured{ border-color: var(--senal); }

.plan__tag{
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.plan__tag::before{ content: "[ "; color: var(--ambar); }
.plan__tag::after{ content: " ]"; color: var(--ambar); }
.plan--featured .plan__tag{ color: var(--senal-text); }
.plan--featured .plan__tag::before,
.plan--featured .plan__tag::after{ color: var(--senal-text); }

.plan__name{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.plan__problem{
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.plan__price{
  padding: 14px 0;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  margin-bottom: 18px;
}
.plan__amount{
  display: block;
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.plan__period{
  font-size: .58em;
  font-weight: 500;
  color: var(--ink-soft);
}
.plan__sub{
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-soft);
  margin-top: 5px;
}

.plan__list{
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.plan__list li{
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.plan__list li::before{
  content: "+";
  font-family: var(--mono);
  color: var(--senal-text);
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}

.plan__cta{
  display: block;
  text-align: center;
  padding: 12px 16px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: border-color .25s var(--ease), background .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease);
}
.plan__cta:hover{ border-color: var(--senal); background: var(--senal); color: var(--on-senal); transform: translateY(-1px); }
.plan--featured .plan__cta{ background: var(--senal); border-color: var(--senal); color: var(--on-senal); }
.plan--featured .plan__cta:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px -8px var(--senal); }

/* diseño puntual — tabla de precios */
.plans__puntual{
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
}
.plans__puntual-inner{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: background-color .45s var(--ease);
}
.puntual__item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  gap: 20px;
  font-size: 14px;
  border-bottom: 1px solid var(--line-soft);
  transition: background .2s var(--ease);
}
.puntual__item:last-child{ border-bottom: none; }
.puntual__item:hover{ background: var(--paper-hover); }
.puntual__item span:first-child{ color: var(--ink-soft); }
.puntual__item span:last-child{
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12.5px;
  flex-shrink: 0;
  color: var(--senal-text);
}

/* ============ elementos retirados del diseño anterior ============ */
.float-block, .hero__orb, .cursor-dot{ display: none !important; }

/* ============ responsive — hero ============ */
@media (max-width: 980px){
  .hero__grid{
    grid-template-columns: 1fr;
    gap: 64px;
  }
  .hero{ min-height: auto; padding-top: 120px; }
  .corner-marks{ display: none; }
  .hero__demo{ width: 100%; display: flex; flex-direction: column; align-items: center; }
  .stat-chip{ right: 0; }
}
@media (max-width: 420px){
  .stat-chip{ top: -14px; right: -2px; padding: 10px 12px; }
  .stat-chip__num{ font-size: 18px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  .reveal, .js .reveal{ opacity: 1; transform: none; }
}