/* =========================================================
   Findex — sistema de estilos del sitio (v5)
   Un solo archivo para todas las páginas.
   Los colores salen de la marca actual de findex.la.
   ========================================================= */

:root{
  /* --- Color de marca --- */
  --indigo:        #1f1266;   /* primario: titulares, superficies oscuras */
  --indigo-2:      #363b70;   /* indigo secundario, degradados */
  --naranja:       #ff6500;   /* acento: CTAs. Es el único color fuerte */
  --naranja-oscuro:#e05800;   /* hover del acento */
  --lavanda:       #f1eefe;   /* fondo suave para secciones alternas */
  --tinta:         #04121f;   /* pie de página */

  /* --- Neutros (con un sesgo hacia el indigo, no gris puro) --- */
  --papel:         #ffffff;
  --papel-2:       #faf9fd;
  --borde:         #e6e0f5;
  --texto:         #1c1730;
  --texto-suave:   #625c72;

  /* --- Semánticos (separados del acento) --- */
  --ok:            #157a4a;
  --ok-suave:      #e6f5ec;
  --alerta:        #a35b00;
  --alerta-suave:  #fdf1e3;

  /* --- Tipografía --- */
  --fuente:      'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-dato: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-display: clamp(2.1rem, 4.6vw, 3.35rem);
  --t-h2:      clamp(1.55rem, 2.9vw, 2.2rem);
  --t-h3:      1.15rem;
  --t-body:    1rem;
  --t-small:   0.875rem;
  --t-micro:   0.75rem;

  /* --- Ritmo --- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;

  --ancho: 1180px;
  --radio: 18px;
  --radio-s: 10px;
  --sombra: 0 1px 2px rgba(31,18,102,.05), 0 12px 32px -18px rgba(31,18,102,.28);
  --sombra-alta: 0 2px 4px rgba(31,18,102,.06), 0 28px 60px -28px rgba(31,18,102,.35);
}

/* =========================================================
   Base
   ========================================================= */

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

h1, h2, h3{ color: var(--indigo); line-height: 1.15; text-wrap: balance; margin: 0; }
h1{ font-size: var(--t-display); font-weight: 700; letter-spacing: -.02em; }
h2{ font-size: var(--t-h2);      font-weight: 700; letter-spacing: -.01em; }
h3{ font-size: var(--t-h3);      font-weight: 600; }
p{ margin: 0; }

a{ color: var(--indigo); }

:focus-visible{
  outline: 3px solid var(--naranja);
  outline-offset: 3px;
  border-radius: 4px;
}

.contenedor{
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--e5);
}

.seccion{ padding-block: var(--e9); }
.seccion--compacta{ padding-block: var(--e8); }
.seccion--lavanda{ background: var(--lavanda); }
.seccion--papel2{ background: var(--papel-2); }

.eyebrow{
  font-family: var(--fuente-dato);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--naranja);
  margin-bottom: var(--e3);
}

.plomo{
  color: var(--texto-suave);
  font-size: 1.05rem;
  max-width: 62ch;
}

.encabezado-seccion{
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  margin-bottom: var(--e7);
  max-width: 70ch;
}

/* =========================================================
   Botones
   ========================================================= */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  padding: 15px 28px;
  border-radius: 999px;           /* la marca usa botones de píldora */
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover{ transform: translateY(-1px); }

.btn--primario{ background: var(--naranja); color: #fff; }
.btn--primario:hover{ background: var(--naranja-oscuro); }

.btn--secundario{ background: transparent; color: var(--indigo); border-color: var(--borde); }
.btn--secundario:hover{ border-color: var(--indigo); }

.btn--sobre-oscuro{ background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.32); }
.btn--sobre-oscuro:hover{ background: rgba(255,255,255,.2); }

.grupo-btn{ display: flex; flex-wrap: wrap; gap: var(--e3); }

/* =========================================================
   Encabezado y navegación (se despliega con el cursor)
   ========================================================= */

.sitio-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}

.sitio-header__fila{
  display: flex;
  align-items: center;
  gap: var(--e6);
  min-height: 74px;
}

/* El logo es el archivo oficial de la marca, no texto imitado */
.logo{
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}
.logo img{
  height: 32px;
  width: auto;
  display: block;
}

.nav{ margin-left: auto; }
.nav__lista{
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin: 0; padding: 0;
}
.nav__item{ position: relative; }

.nav__enlace{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--radio-s);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--texto);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.nav__enlace:hover,
.nav__item:hover > .nav__enlace,
.nav__item:focus-within > .nav__enlace{ background: var(--lavanda); color: var(--indigo); }
.nav__enlace[aria-current="page"]{ color: var(--indigo); font-weight: 600; }

.nav__flecha{ width: 9px; height: 9px; flex: none; transition: transform .18s ease; }
.nav__item:hover .nav__flecha,
.nav__item:focus-within .nav__flecha{ transform: rotate(180deg); }

/* El submenú abre al pasar el cursor, sin clic (Duemint) */
.submenu{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 290px;
  list-style: none;
  margin: 0;
  padding: var(--e2);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav__item:hover > .submenu,
.nav__item:focus-within > .submenu{ opacity: 1; visibility: visible; transform: translateY(0); }

.submenu__enlace{
  display: block;
  padding: 11px 14px;
  border-radius: var(--radio-s);
  text-decoration: none;
  color: var(--texto);
  transition: background-color .15s ease;
}
.submenu__enlace:hover{ background: var(--lavanda); }
.submenu__titulo{ display: block; font-weight: 600; font-size: 0.94rem; color: var(--indigo); }
.submenu__desc{ display: block; font-size: var(--t-small); color: var(--texto-suave); line-height: 1.45; }

.header__acciones{ display: flex; align-items: center; gap: var(--e3); flex: none; }
.header__sesion{
  font-size: 0.95rem; font-weight: 500; color: var(--texto);
  text-decoration: none; padding: 10px 4px;
}
.header__sesion:hover{ color: var(--indigo); }

.menu-boton{
  display: none;
  background: none; border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  padding: 10px 12px; cursor: pointer;
  font: inherit; color: var(--indigo);
}

/* =========================================================
   Hero
   ========================================================= */

.hero{
  padding-block: var(--e9) var(--e8);
  background:
    radial-gradient(1100px 480px at 78% -8%, #ede8ff 0%, rgba(255,255,255,0) 62%),
    var(--papel);
}
.hero__rejilla{
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: var(--e8);
  align-items: center;
}
.hero__titulo{ margin-bottom: var(--e4); }
.hero__sub{
  color: var(--texto-suave);
  font-size: 1.12rem;
  max-width: 54ch;
  margin-bottom: var(--e6);
}
.hero__pie{
  margin-top: var(--e5);
  font-size: var(--t-small);
  color: var(--texto-suave);
}

/* Beneficios inmediatamente después del titular (Bind ERP) */
.beneficios{
  list-style: none;
  margin: 0 0 var(--e6);
  padding: 0;
  display: grid;
  gap: var(--e3);
}
.beneficios li{
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  font-size: 0.98rem;
}
.beneficios .marca{
  flex: none;
  width: 22px; height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--ok-suave);
  color: var(--ok);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
}

/* =========================================================
   Vista previa del producto (la lección de Chipax)
   Maqueta dibujada con CSS: se sustituye por capturas reales.
   ========================================================= */

.preview{
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}
.preview__barra{
  display: flex; align-items: center; gap: 7px;
  padding: 12px var(--e4);
  background: var(--papel-2);
  border-bottom: 1px solid var(--borde);
}
.preview__punto{ width: 10px; height: 10px; border-radius: 50%; background: #d9d2ee; }
.preview__ruta{
  font-family: var(--fuente-dato);
  font-size: var(--t-micro);
  color: var(--texto-suave);
  margin-left: var(--e3);
}
.preview__cuerpo{ padding: var(--e5); display: grid; gap: var(--e4); }

.kpis{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e3); }
.kpi{
  background: var(--papel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  padding: var(--e3) var(--e4);
}
.kpi__rotulo{
  font-size: var(--t-micro); color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .07em;
}
.kpi__valor{
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-size: 1.22rem; font-weight: 600; color: var(--indigo);
  margin-top: 3px;
}
.kpi__delta{ font-size: var(--t-micro); font-weight: 600; }
.kpi__delta--ok{ color: var(--ok); }
.kpi__delta--alerta{ color: var(--alerta); }

.grafico{
  display: flex; align-items: stretch; gap: 8px;
  height: 108px;
  padding: var(--e3) var(--e4) var(--e2);
  background: var(--papel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
}
.grafico__col{
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center;
  gap: 6px;
  height: 100%;              /* la barra necesita un alto definido para que el % resuelva */
}
.grafico__barra{
  width: 100%;
  min-height: 4px;
  background: linear-gradient(180deg, #b3a8e8, #8a7bd6);
  border-radius: 4px 4px 0 0;
}
.grafico__col--activa .grafico__barra{ background: linear-gradient(180deg, #ff9248, var(--naranja)); }
.grafico__mes{ font-family: var(--fuente-dato); font-size: 9.5px; color: var(--texto-suave); }

.lista-cartera{ display: grid; gap: 6px; }
.fila-cartera{
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--e3);
  padding: 9px var(--e4);
  background: var(--papel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  font-size: var(--t-small);
}
.fila-cartera__monto{
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--indigo);
}
.pastilla{
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  white-space: nowrap;
}
.pastilla--ok{ background: var(--ok-suave); color: var(--ok); }
.pastilla--alerta{ background: var(--alerta-suave); color: var(--alerta); }

.nota-maqueta{
  margin-top: var(--e3);
  font-size: var(--t-micro);
  color: var(--texto-suave);
  text-align: center;
}

/* =========================================================
   Métricas y logos
   ========================================================= */

.metricas{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e5); }
.metrica{ border-top: 3px solid var(--naranja); padding-top: var(--e4); }
.metrica__cifra{
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  font-weight: 600;
  color: var(--indigo);
  line-height: 1.1;
}
.metrica__texto{ color: var(--texto-suave); font-size: 0.96rem; margin-top: var(--e2); }

/* Franja de logos de clientes.
   Cada logo se escala dentro de una caja del mismo tamaño: los que son
   anchos quedan más bajos y los cuadrados más altos, que es como se
   equilibran a la vista logos de proporciones muy distintas. */
.logos{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e5) var(--e6);
  padding: var(--e6) var(--e5);
  background: var(--papel-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.logos__item{
  display: grid;
  place-items: center;
  filter: saturate(.92);
  transition: filter .18s ease, opacity .18s ease;
}
.logos__item:hover{ filter: saturate(1); }
.logos__item img{
  display: block;
  width: auto;
  height: auto;
  max-width: 130px;
  max-height: 42px;
  object-fit: contain;
}
.logos__titulo{
  text-align: center;
  font-size: var(--t-small);
  color: var(--texto-suave);
  margin-bottom: var(--e5);
}

/* =========================================================
   Tarjetas de dolor → producto
   ========================================================= */

.rejilla-dolores{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e4); }

.dolor{
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: var(--e5);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.dolor:hover{ border-color: #c9bff0; box-shadow: var(--sombra); transform: translateY(-2px); }
.dolor__etiqueta{
  font-family: var(--fuente-dato);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--naranja);
}
.dolor__titulo{ font-size: 1.22rem; }
.dolor__texto{ color: var(--texto-suave); font-size: 0.96rem; }
.dolor__pie{
  margin-top: auto;
  padding-top: var(--e3);
  border-top: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--indigo);
}
.dolor__flecha{ color: var(--naranja); }

/* =========================================================
   Funcionalidades (Home) — el alcance de la plataforma
   ========================================================= */

.rejilla-funciones{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.funcion{
  background: var(--papel);
  padding: var(--e5);
  transition: background-color .18s ease;
}
.funcion:hover{ background: var(--papel-2); }
.funcion__nombre{
  font-size: 1.05rem;
  color: var(--indigo);
  margin-bottom: var(--e2);
}
.funcion__nombre::before{
  content: '';
  display: block;
  width: 22px; height: 3px;
  border-radius: 2px;
  background: var(--naranja);
  margin-bottom: var(--e3);
}
.funcion__texto{ color: var(--texto-suave); font-size: 0.94rem; }

/* =========================================================
   Perfiles a los que le pega un producto (landings)
   ========================================================= */

.perfil{
  border-left: 3px solid var(--naranja);
  padding: var(--e2) 0 var(--e2) var(--e5);
}
.perfil__nombre{ font-size: 1.08rem; margin-bottom: var(--e2); }
.perfil__texto{ color: var(--texto-suave); font-size: 0.95rem; }

/* =========================================================
   Reseña de cliente (landings)
   ========================================================= */

.resena{
  margin: 0;
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
  padding: var(--e7) var(--e5);
  border: 1.5px dashed var(--borde);
  border-radius: var(--radio);
  background: var(--papel);
}
.resena__cita{
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--texto);
  text-wrap: balance;
}
.resena__firma{ margin-top: var(--e5); font-size: var(--t-small); }
.resena__persona{ display: block; font-weight: 600; color: var(--indigo); }
.resena__cargo{ display: block; color: var(--texto-suave); }

/* Estado pendiente: se ve el lugar que ocupará, sin inventar la cita */
.resena--pendiente .resena__marcador{
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--indigo);
}
.resena--pendiente .resena__marcador::before{
  content: '“';
  display: block;
  font-size: 3.4rem;
  line-height: .6;
  color: var(--naranja);
  margin-bottom: var(--e3);
}
.resena__ayuda{
  margin-top: var(--e3);
  font-size: var(--t-small);
  color: var(--texto-suave);
  max-width: 52ch;
  margin-inline: auto;
}

/* =========================================================
   Plan de implementación (la lección de Bind ERP)
   Es una secuencia real, por eso va numerado.
   ========================================================= */

.pasos{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e5);
  counter-reset: paso;
}
.paso{ position: relative; padding-top: var(--e5); }
.paso::before{
  counter-increment: paso;
  content: counter(paso, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--fuente-dato);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--naranja);
}
.paso::after{
  content: '';
  position: absolute; top: 8px; left: 34px; right: calc(-1 * var(--e5));
  height: 1px; background: var(--borde);
}
.paso:last-child::after{ display: none; }

/* Seis pasos: dos filas de tres. El orden es el argumento, por eso van numerados. */
.pasos--seis{ grid-template-columns: repeat(3, 1fr); gap: var(--e7) var(--e5); }
.pasos--seis .paso:nth-child(3n)::after{ display: none; }

.remate{
  margin-top: var(--e7);
  padding: var(--e5) var(--e6);
  border-left: 3px solid var(--naranja);
  background: var(--lavanda);
  border-radius: 0 var(--radio-s) var(--radio-s) 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--texto);
  max-width: 76ch;
}
.paso__titulo{ font-size: 1.02rem; margin-bottom: var(--e2); }
.paso__texto{ color: var(--texto-suave); font-size: 0.93rem; }
.paso__tiempo{
  display: inline-block; margin-top: var(--e3);
  font-family: var(--fuente-dato); font-size: var(--t-micro);
  color: var(--texto-suave);
  background: var(--papel-2); border: 1px solid var(--borde);
  border-radius: 999px; padding: 3px 10px;
}

/* =========================================================
   Bloque oscuro (asistente de IA, cierre)
   ========================================================= */

.bloque-oscuro{
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-2) 100%);
  color: #fff;
}
.bloque-oscuro h2, .bloque-oscuro h3{ color: #fff; }
.bloque-oscuro .plomo{ color: rgba(255,255,255,.78); }
.bloque-oscuro .eyebrow{ color: #ffb37a; }

.rejilla-ia{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: var(--e8);
  align-items: center;
}
.chat{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radio);
  padding: var(--e5);
  display: grid; gap: var(--e3);
}
.chat__burbuja{
  padding: 12px var(--e4);
  border-radius: 14px;
  font-size: 0.94rem;
  line-height: 1.55;
  max-width: 88%;
}
.chat__burbuja--persona{
  background: rgba(255,255,255,.16);
  justify-self: end;
  border-bottom-right-radius: 5px;
}
.chat__burbuja--findex{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-bottom-left-radius: 5px;
}
.chat__dato{
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  color: #ffb37a;
  font-weight: 600;
}
.ejemplos{ list-style: none; margin: var(--e5) 0 0; padding: 0; display: grid; gap: var(--e3); }
.ejemplos li{
  display: flex; gap: var(--e3); align-items: flex-start;
  font-size: 0.96rem; color: rgba(255,255,255,.82);
}
.ejemplos .punto{
  flex: none; width: 6px; height: 6px; margin-top: 9px;
  border-radius: 50%; background: var(--naranja);
}

/* =========================================================
   Preguntas frecuentes
   ========================================================= */

.faq{ display: grid; gap: var(--e2); max-width: 820px; }
.faq__item{
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  padding: var(--e4) var(--e5);
}
.faq__item[open]{ border-color: #c9bff0; }
.faq__pregunta{
  cursor: pointer;
  font-weight: 600;
  color: var(--indigo);
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
}
.faq__pregunta::-webkit-details-marker{ display: none; }
.faq__pregunta::after{
  content: '+';
  font-family: var(--fuente-dato);
  font-size: 1.2rem;
  color: var(--naranja);
  flex: none;
}
.faq__item[open] .faq__pregunta::after{ content: '−'; }
.faq__respuesta{ color: var(--texto-suave); font-size: 0.97rem; margin-top: var(--e3); max-width: 68ch; }

/* =========================================================
   Cierre y pie
   ========================================================= */

.cierre{ text-align: center; display: grid; gap: var(--e5); justify-items: center; }

.pie{
  background: var(--tinta);
  color: rgba(255,255,255,.62);
  padding-block: var(--e8) var(--e5);
  font-size: var(--t-small);
}
.pie a{ color: rgba(255,255,255,.62); text-decoration: none; }
.pie a:hover{ color: #fff; }
.pie__rejilla{
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--e6);
  padding-bottom: var(--e6);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.pie__logo{ height: 34px; width: auto; display: block; margin-bottom: var(--e4); }
.pie__titulo{
  color: #fff; font-size: var(--t-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--e3);
}
.pie__lista{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }

/* Redes sociales.
   Hoy el nombre va escrito; el hueco .red__icono está listo para
   recibir el SVG oficial de cada plataforma cuando lo tengamos. */
.redes{
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e5);
}
.red{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  font-size: var(--t-micro);
  font-weight: 500;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.red:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.4);
  color: #fff;
}
.red__icono{ width: 15px; height: 15px; flex: none; }

/* Icono real: toma el color del texto del botón */
svg.red__icono{ fill: currentColor; }


/* Recursos: es la columna del contenido que se publica cada mes,
   por eso lleva su propia nota y un acento naranja. */
.pie__recursos{ position: relative; }
.pie__recursos .pie__titulo{ color: var(--naranja); }
.pie__nota{
  font-size: var(--t-micro);
  color: rgba(255,255,255,.45);
  margin: -6px 0 var(--e3);
}
.pie__base{
  display: flex; flex-wrap: wrap; gap: var(--e4);
  justify-content: space-between;
  padding-top: var(--e5);
  font-size: var(--t-micro);
}

/* =========================================================
   Página interior (encabezado de landing)
   ========================================================= */

.migas{
  font-family: var(--fuente-dato);
  font-size: var(--t-micro);
  color: var(--texto-suave);
  margin-bottom: var(--e4);
}
.migas a{ color: var(--texto-suave); text-decoration: none; }
.migas a:hover{ color: var(--naranja); }

.cabecera-interior{
  padding-block: var(--e8) var(--e7);
  background: var(--lavanda);
  border-bottom: 1px solid var(--borde);
}

.rejilla-2{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e5); }
.rejilla-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e4); }
.rejilla-4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e4); }

.tarjeta{
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e5);
  display: flex; flex-direction: column; gap: var(--e3);
}
.tarjeta__titulo{ font-size: 1.08rem; }
.tarjeta__texto{ color: var(--texto-suave); font-size: 0.95rem; }
.tarjeta--enlace{ text-decoration: none; color: inherit; transition: border-color .18s ease, transform .18s ease; }
.tarjeta--enlace:hover{ border-color: #c9bff0; transform: translateY(-2px); }

/* Tarjeta de escenario (Clientes): se selecciona entera, no solo el enlace */
.tarjeta--escenario{
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tarjeta--escenario:hover{
  border-color: #c9bff0;
  box-shadow: var(--sombra);
  transform: translateY(-2px);
}
.tarjeta--escenario .caso{ display: block; }
.tarjeta--escenario .caso__cifra,
.tarjeta--escenario .caso__texto{ display: block; }
.tarjeta__ir{
  padding-top: var(--e3);
  border-top: 1px solid var(--borde);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--indigo);
}
.tarjeta--escenario:hover .tarjeta__ir{ color: var(--naranja); }

/* =========================================================
   Cierre que cuadra (landing de ERP)
   Cada área cierra con una cifra distinta — barras de largos
   distintos — hasta que todas se alinean y pasan a naranja.
   ========================================================= */

.cuadre{
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e6) var(--e5) var(--e5);
}
.cuadre__titulo{
  font-family: var(--fuente-dato);
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: var(--e5);
}

.cuadre__panel{ display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 0 var(--e4); }
.cuadre__nombres,
.cuadre__barras{ display: grid; grid-auto-rows: 26px; align-items: center; }
.cuadre__nombres span{ font-size: var(--t-small); color: var(--texto-suave); }
.cuadre__barras{ position: relative; }

.area-barra{
  height: 14px;
  border-radius: 3px;
  background: #b3abc7;
  animation-duration: 6s;
  animation-timing-function: cubic-bezier(.65,0,.35,1);
  animation-iteration-count: infinite;
}

.area-barra--0{ animation-name: cuadrar-0; }
@keyframes cuadrar-0{
  0%,  18% { width: 84%;      background: #b3abc7; }
  44%, 74% { width: 82%;  background: var(--naranja); }
  92%,100% { width: 84%;      background: #b3abc7; }
}
.area-barra--1{ animation-name: cuadrar-1; }
@keyframes cuadrar-1{
  0%,  18% { width: 68%;      background: #b3abc7; }
  44%, 74% { width: 82%;  background: var(--naranja); }
  92%,100% { width: 68%;      background: #b3abc7; }
}
.area-barra--2{ animation-name: cuadrar-2; }
@keyframes cuadrar-2{
  0%,  18% { width: 96%;      background: #b3abc7; }
  44%, 74% { width: 82%;  background: var(--naranja); }
  92%,100% { width: 96%;      background: #b3abc7; }
}
.area-barra--3{ animation-name: cuadrar-3; }
@keyframes cuadrar-3{
  0%,  18% { width: 76%;      background: #b3abc7; }
  44%, 74% { width: 82%;  background: var(--naranja); }
  92%,100% { width: 76%;      background: #b3abc7; }
}

/* La guía vertical aparece cuando las cuatro coinciden */
.cuadre__guia{
  position: absolute;
  left: 82%;
  top: 2px; bottom: 2px;
  border-left: 2px dashed var(--naranja);
  transform-origin: center;
  animation: guia-cuadre 6s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes guia-cuadre{
  0%,  26% { opacity: 0; transform: scaleY(.4); }
  46%, 74% { opacity: 1; transform: scaleY(1); }
  88%,100% { opacity: 0; transform: scaleY(.4); }
}

.cuadre__estado{
  position: relative;
  height: 30px;
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--borde);
}
.estado{
  position: absolute;
  left: 0; top: var(--e4);
  font-size: var(--t-small);
  font-weight: 600;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.estado--mal{ color: var(--texto-suave); animation-name: chip-mal; }
.estado--bien{ color: var(--naranja); animation-name: chip-bien; }
.estado--bien::before{ content: '✓ '; }

@keyframes chip-mal{  0%,20%{opacity:1} 34%,78%{opacity:0} 92%,100%{opacity:1} }
@keyframes chip-bien{ 0%,30%{opacity:0} 46%,74%{opacity:1} 86%,100%{opacity:0} }

/* Sin movimiento: se muestra el cierre ya cuadrado */
@media (prefers-reduced-motion: reduce){
  .area-barra{ animation: none; width: 82%; background: var(--naranja); }
  .cuadre__guia{ animation: none; opacity: 1; transform: none; }
  .estado{ animation: none; }
  .estado--mal{ opacity: 0; }
  .estado--bien{ opacity: 1; }
}

/* =========================================================
   Sucursales que se unen (landing de punto de venta)
   Cuatro casitas grises giran, se juntan al centro y quedan
   como una sola en naranja. El ciclo se repite.
   ========================================================= */

.convergencia{
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e6) var(--e5) var(--e5);
  text-align: center;
}
.convergencia__titulo{
  font-family: var(--fuente-dato);
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: var(--e3);
}
.convergencia svg{ display: block; margin-inline: auto; max-width: 300px; }
.convergencia__sedes{
  margin-top: var(--e3);
  font-size: var(--t-small);
  color: var(--texto-suave);
}

/* La constelación gira; cada casita se mantiene derecha */
.giro{
  transform-box: view-box;
  transform-origin: 130px 130px;
  animation: girar 6s ease-in-out infinite;
}
@keyframes girar{
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(300deg); }
  57%  { transform: rotate(320deg); }
  100% { transform: rotate(360deg); }
}
.glifo{
  transform-box: fill-box;
  transform-origin: center;
  animation: contragirar 6s ease-in-out infinite;
}
@keyframes contragirar{
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(-300deg); }
  57%  { transform: rotate(-320deg); }
  100% { transform: rotate(-360deg); }
}

.casa path{ fill: #9d96b3; }
.casa{ animation-duration: 6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }

.casa--0{ animation-name: juntar-0; }
@keyframes juntar-0{
  0%,  14% { transform: translate(80px, 0px); opacity: 1; }
  50%      { transform: translate(0px, 0px);       opacity: 1; }
  57%, 86% { transform: translate(0px, 0px);       opacity: 0; }
  87%      { transform: translate(80px, 0px); opacity: 0; }
  96%,100% { transform: translate(80px, 0px); opacity: 1; }
}
.casa--1{ animation-name: juntar-1; }
@keyframes juntar-1{
  0%,  14% { transform: translate(0px, 80px); opacity: 1; }
  50%      { transform: translate(0px, 0px);       opacity: 1; }
  57%, 86% { transform: translate(0px, 0px);       opacity: 0; }
  87%      { transform: translate(0px, 80px); opacity: 0; }
  96%,100% { transform: translate(0px, 80px); opacity: 1; }
}
.casa--2{ animation-name: juntar-2; }
@keyframes juntar-2{
  0%,  14% { transform: translate(-80px, 0px); opacity: 1; }
  50%      { transform: translate(0px, 0px);       opacity: 1; }
  57%, 86% { transform: translate(0px, 0px);       opacity: 0; }
  87%      { transform: translate(-80px, 0px); opacity: 0; }
  96%,100% { transform: translate(-80px, 0px); opacity: 1; }
}
.casa--3{ animation-name: juntar-3; }
@keyframes juntar-3{
  0%,  14% { transform: translate(0px, -80px); opacity: 1; }
  50%      { transform: translate(0px, 0px);       opacity: 1; }
  57%, 86% { transform: translate(0px, 0px);       opacity: 0; }
  87%      { transform: translate(0px, -80px); opacity: 0; }
  96%,100% { transform: translate(0px, -80px); opacity: 1; }
}

/* La casa única, en naranja */
.casa-final{
  transform-box: fill-box;
  transform-origin: center;
  animation: fusionar 6s ease-in-out infinite;
}
.casa-final path{ fill: var(--naranja); }
@keyframes fusionar{
  0%,  48% { opacity: 0; transform: scale(.45); }
  58%      { opacity: 1; transform: scale(1); }
  84%      { opacity: 1; transform: scale(1); }
  90%,100% { opacity: 0; transform: scale(.45); }
}

/* Sin movimiento: se muestra el resultado, la casa única */
@media (prefers-reduced-motion: reduce){
  .giro, .glifo, .casa, .casa-final{ animation: none; }
  .casa{ opacity: 0; }
  .casa-final{ opacity: 1; transform: none; }
}

/* =========================================================
   Reporte de antigüedad de saldos (landing de cuentas por cobrar)
   Presentado como panel de la app: es el documento que el cliente
   ya reconoce, no un gráfico genérico.
   Los cuatro tramos son una escala de severidad; cada uno lleva su
   nombre y su monto escritos, así que nunca dependen del color.
   ========================================================= */

.reporte{
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}
.reporte__barra{
  display: flex; align-items: center; gap: 7px;
  padding: 12px var(--e4);
  background: var(--papel-2);
  border-bottom: 1px solid var(--borde);
}
.reporte__punto{ width: 10px; height: 10px; border-radius: 50%; background: #d9d2ee; }
.reporte__ruta{
  font-family: var(--fuente-dato);
  font-size: var(--t-micro);
  color: var(--texto-suave);
  margin-left: var(--e3);
}
.reporte__cuerpo{ padding: var(--e5); display: grid; gap: var(--e5); }

.reporte__cabecera{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e4); flex-wrap: wrap;
}
.reporte__titulo{ font-weight: 600; color: var(--indigo); font-size: 1.02rem; }
.reporte__total{
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-small);
  color: var(--texto-suave);
}

.reporte__comparacion{ display: grid; gap: var(--e4); }

.edad{
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 116px;
  align-items: center;
  gap: var(--e4);
}
.edad--encabezado{ margin-bottom: -6px; }
.edad__rotulo{
  font-family: var(--fuente-dato);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-suave); text-align: right;
}
.edad__estado{
  font-family: var(--fuente-dato);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.edad--ahora .edad__estado{ color: var(--naranja); }

/* Barra apilada: 2px de aire entre tramos para que se lean separados */
.edad__barra{ display: flex; gap: 2px; height: 30px; }
.tramo{
  position: relative;
  border-radius: 3px;
  min-width: 6px;
  transition: filter .16s ease;
}
.edad__barra:hover .tramo{ filter: saturate(.35) opacity(.55); }
.edad__barra .tramo:hover{ filter: none; }

.tramo--t0{ background: #8a7bd6; }
.tramo--t1{ background: #e0a800; }
.tramo--t2{ background: #e04a12; }
.tramo--t3{ background: #9c2610; }

.tramo__tip{
  position: absolute;
  bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  background: var(--tinta); color: #fff;
  font-family: var(--fuente-dato); font-size: 11px;
  padding: 5px 9px; border-radius: 6px;
  opacity: 0; visibility: hidden;
  transition: opacity .14s ease, visibility .14s;
  pointer-events: none;
  z-index: 2;
}
.tramo:hover .tramo__tip{ opacity: 1; visibility: visible; }

.edad__vencido{
  text-align: right;
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--texto-suave);
}
.edad--ahora .edad__vencido{ color: var(--indigo); }
.edad__chip{
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--naranja);
  letter-spacing: .04em;
}

/* Leyenda: da nombre a cada color sin repetir las cifras */
.leyenda-edad{
  list-style: none;
  margin: 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--borde);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e5);
}
.leyenda-edad li{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-small);
  color: var(--texto-suave);
}

.punto{ width: 10px; height: 10px; border-radius: 3px; flex: none; }
.punto--t0{ background: #8a7bd6; }
.punto--t1{ background: #e0a800; }
.punto--t2{ background: #e04a12; }
.punto--t3{ background: #9c2610; }

@media (max-width: 620px){
  .edad{ grid-template-columns: 66px minmax(0, 1fr) 92px; gap: var(--e3); }
}

/* =========================================================
   Comparación del cierre contable: una semana antes, un día ahora.
   Los días se encienden en secuencia y el ciclo se repite.
   ========================================================= */

.semana{
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e6);
  display: grid;
  gap: var(--e5);
}
.semana__fila{
  display: flex;
  align-items: center;
  gap: var(--e4);
  flex-wrap: wrap;
}
.semana__rotulo{
  flex: none;
  min-width: 92px;
  font-family: var(--fuente-dato);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.semana__rotulo--ok{ color: var(--naranja); }

.semana__dias{ display: flex; gap: 7px; }

.dia{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radio-s);
  border: 1.5px solid var(--borde);
  background: var(--papel-2);
  color: #b3abc7;
  font-family: var(--fuente-dato);
  font-size: 0.82rem;
  font-weight: 600;
}

/* El "antes": los cinco días se van gastando uno por uno */
.dia--antes{
  animation: dia-gastado 5s ease-in-out infinite;
  animation-delay: calc(var(--i) * .32s);
}
@keyframes dia-gastado{
  0%,   4%  { background: var(--papel-2); border-color: var(--borde);  color: #b3abc7; }
  10%,  66% { background: #ded7f5;        border-color: #c3b8ec;       color: var(--indigo); }
  76%, 100% { background: var(--papel-2); border-color: var(--borde);  color: #b3abc7; }
}

/* El "ahora": basta el primer día */
.dia--ahora{
  animation: dia-resuelto 5s ease-in-out infinite;
}
@keyframes dia-resuelto{
  0%,   4%  { background: var(--papel-2); border-color: var(--borde);  color: #b3abc7; }
  10%,  66% { background: var(--naranja); border-color: var(--naranja); color: #fff; }
  76%, 100% { background: var(--papel-2); border-color: var(--borde);  color: #b3abc7; }
}

.semana__total{
  margin-left: auto;
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--texto-suave);
}
.semana__total--ok{ color: var(--naranja); font-size: 1.6rem; }

.semana__pie{
  border-top: 1px solid var(--borde);
  padding-top: var(--e4);
  font-size: var(--t-small);
  color: var(--texto-suave);
}

/* Sin movimiento: se muestra el estado final, no el inicial */
@media (prefers-reduced-motion: reduce){
  .dia--antes{ animation: none; background: #ded7f5; border-color: #c3b8ec; color: var(--indigo); }
  .dia--ahora{ animation: none; background: var(--naranja); border-color: var(--naranja); color: #fff; }
}

/* =========================================================
   Tarjeta de producto (índice de Productos)
   El nombre del producto manda; la estadística va en segundo plano.
   ========================================================= */

.producto{
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  min-height: 268px;
  padding: var(--e6);
  border-radius: var(--radio);
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-2) 100%);
  color: #fff;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.producto:hover{ transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.producto__eyebrow{
  font-family: var(--fuente-dato);
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffb37a;
}
.producto__nombre{
  font-size: clamp(1.7rem, 2.7vw, 2.15rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.producto__stat{
  margin-top: auto;
  padding-top: var(--e4);
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: var(--t-small);
  line-height: 1.5;
  color: rgba(255,255,255,.7);
}
.producto__stat b{
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #fff;
}
.producto__ir{ font-size: var(--t-small); font-weight: 600; color: #fff; }
.producto:hover .producto__ir{ color: #ffb37a; }

.caso{
  background: var(--lavanda);
  border-radius: var(--radio-s);
  padding: var(--e4);
  margin-top: auto;
}
.caso__cifra{
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-size: 1.4rem; font-weight: 600; color: var(--indigo);
}
.caso__texto{ font-size: var(--t-small); color: var(--texto-suave); }

.aviso{
  border-left: 3px solid var(--naranja);
  background: var(--alerta-suave);
  padding: var(--e4) var(--e5);
  border-radius: 0 var(--radio-s) var(--radio-s) 0;
  font-size: 0.95rem;
  color: #6b3d05;
}

/* =========================================================
   Formulario de diagnóstico
   Las preguntas de perfil y de dolor son el filtro de calce:
   califican al prospecto sin ventana emergente que moleste.
   ========================================================= */

.rejilla-form{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--e8);
  align-items: start;
}

.formulario{
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--e6);
  display: grid;
  gap: var(--e4);
}

.campos{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e4); }
.campo{ display: grid; gap: 6px; }
.campo--ancho{ grid-column: 1 / -1; }

.campo label{
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--indigo);
}
.campo label .opcional{ font-weight: 400; color: var(--texto-suave); }

.campo input,
.campo select,
.campo textarea{
  font-family: inherit;
  font-size: 0.97rem;
  color: var(--texto);
  background: var(--papel-2);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-s);
  padding: 12px 14px;
  width: 100%;
  transition: border-color .16s ease, background-color .16s ease;
}
.campo textarea{ resize: vertical; min-height: 96px; }
.campo input:hover,
.campo select:hover,
.campo textarea:hover{ border-color: #c9bff0; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus{
  outline: none;
  background: var(--papel);
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px rgba(255,101,0,.14);
}
.campo select{
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231f1266' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px;
  padding-right: 38px;
}

.form-nota{ font-size: var(--t-small); color: var(--texto-suave); }
.form-oculto{ position: absolute; left: -9999px; }

.lista-espera{ list-style: none; margin: var(--e5) 0 0; padding: 0; display: grid; gap: var(--e4); }
.lista-espera li{ display: flex; gap: var(--e4); align-items: flex-start; }
.lista-espera .num{
  flex: none;
  font-family: var(--fuente-dato);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--naranja);
  padding-top: 2px;
}
.lista-espera b{ display: block; color: var(--indigo); font-size: 0.99rem; }
.lista-espera span{ color: var(--texto-suave); font-size: 0.94rem; }

.confirmacion{
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
  display: grid;
  gap: var(--e5);
  justify-items: center;
}
.confirmacion__marca{
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--ok-suave);
  color: var(--ok);
  display: grid; place-items: center;
  font-size: 28px; font-weight: 700;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 980px){
  .hero__rejilla,
  .rejilla-ia,
  .rejilla-2{ grid-template-columns: 1fr; gap: var(--e6); }
  .rejilla-4{ grid-template-columns: repeat(2, 1fr); }
  .rejilla-funciones{ grid-template-columns: repeat(2, 1fr); }
  .pasos{ grid-template-columns: repeat(2, 1fr); }
  .paso::after{ display: none; }
  .pie__rejilla{ grid-template-columns: 1fr 1fr; }
  .logos{ grid-template-columns: repeat(3, 1fr); }
  .rejilla-form{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
  :root{ --e9: 64px; --e8: 48px; }

  .menu-boton{ display: block; margin-left: auto; }
  .nav{ display: none; width: 100%; }
  .nav.esta-abierto{ display: block; padding-bottom: var(--e4); }
  .sitio-header__fila{ flex-wrap: wrap; }
  .nav__lista{ flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__enlace{ justify-content: space-between; }
  /* En móvil no hay cursor: los submenús quedan siempre visibles */
  .submenu{
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; padding: 0 0 var(--e3) var(--e4);
    min-width: 0;
  }
  .header__acciones{ width: 100%; }
  .header__acciones .btn{ flex: 1; }

  .rejilla-dolores,
  .metricas,
  .rejilla-3,
  .rejilla-4,
  .kpis,
  .pasos,
  .rejilla-funciones,
  .campos{ grid-template-columns: 1fr; }
  .logos{ grid-template-columns: repeat(2, 1fr); }

  .pie__rejilla{ grid-template-columns: 1fr; gap: var(--e5); }
}

/* =========================================================
   /empresa/como-trabajamos/ — los seis pasos, intercalados
   ========================================================= */

/* Mapa de los seis, en la cabecera: dice de entrada que esto es una cadena. */
.mapa-pasos{
  list-style: none; margin: var(--e6) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3);
  counter-reset: mp;
}
.mapa-pasos li{
  counter-increment: mp;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-small); color: var(--texto-suave);
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: 999px; padding: 5px 13px 5px 8px;
}
.mapa-pasos li::before{
  content: counter(mp, decimal-leading-zero);
  font-family: var(--fuente-dato); font-size: var(--t-micro); font-weight: 600;
  color: var(--naranja); background: var(--lavanda);
  border-radius: 999px; padding: 2px 6px;
}
.mapa-pasos li + li::after{ content: none; }

/* --- La secuencia --- */
.secuencia{ padding-block: var(--e8) 0; }

.paso-bloque{ padding-block: var(--e7); }
.paso-bloque:nth-child(even){ background: var(--papel-2); }

.paso-bloque__rejilla{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e8);
  align-items: center;
}
/* Intercalado: en los pares el arte va a la izquierda. */
.paso-bloque:nth-child(even) .paso-bloque__texto{ order: 2; }
.paso-bloque:nth-child(even) .paso-bloque__arte{ order: 1; }

@media (max-width: 860px){
  .paso-bloque__rejilla{ grid-template-columns: 1fr; gap: var(--e6); }
  .paso-bloque:nth-child(even) .paso-bloque__texto{ order: 0; }
  .paso-bloque:nth-child(even) .paso-bloque__arte{ order: 0; }
}

.paso-num{
  display: inline-flex; align-items: baseline; gap: var(--e2);
  font-family: var(--fuente-dato); font-weight: 600;
  color: var(--naranja); margin: 0 0 var(--e3);
  font-size: 1.9rem; line-height: 1;
}
.paso-num span{
  font-size: var(--t-micro); font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--texto-suave);
}
.paso-bloque__titulo{ font-size: var(--t-h2); margin: 0 0 var(--e4); }
.paso-bloque__nota{
  margin: var(--e5) 0 0;
  padding-left: var(--e4);
  border-left: 3px solid var(--naranja);
  color: var(--texto); font-weight: 500;
  line-height: 1.55; max-width: 46ch;
}

/* --- Panel común de los gráficos --- */
.arte{
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--e6);
  display: grid; gap: var(--e4); justify-items: center;
}
.paso-bloque:nth-child(even) .arte{ background: var(--papel); }
.arte__pie{
  margin: 0; text-align: center;
  font-size: var(--t-small); color: var(--texto-suave); max-width: 40ch;
}

/* 01 Registro */
.fuentes{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e3); }
.ficha{
  font-size: var(--t-small); color: var(--texto-suave);
  background: var(--papel-2); border: 1px solid var(--borde);
  border-radius: 999px; padding: 6px 14px;
}
.confluencia{ width: 100%; height: 66px; margin-top: calc(var(--e4) * -1); }
.destino{
  display: inline-flex; align-items: center; gap: var(--e3);
  background: var(--indigo); color: #fff;
  border-radius: var(--radio-s); padding: 11px 20px;
  font-weight: 600; font-size: 0.97rem;
}
.destino__punto{
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--naranja); flex: none;
}

/* 02 Facturación */
.documento{
  width: 100%; max-width: 250px;
  background: var(--papel-2); border: 1px solid var(--borde);
  border-radius: var(--radio-s); padding: var(--e4);
  display: grid; gap: 9px;
}
.documento__sello{
  font-family: var(--fuente-dato); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--indigo);
}
.documento__linea{ height: 7px; border-radius: 4px; background: #ddd6f0; }
.documento__linea--corta{ width: 58%; }
.bifurca{ width: 100%; height: 44px; margin-block: calc(var(--e3) * -1); }
.ramas{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); width: 100%; }
.rama{
  background: var(--papel-2); border: 1px solid var(--borde);
  border-radius: var(--radio-s); padding: var(--e4); text-align: center;
}
.rama--acento{
  background: #fff4ec; border-color: #ffcfae;
}
.rama__etiqueta{
  margin: 0 0 var(--e2); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave);
}
.rama__valor{ margin: 0; font-size: 0.92rem; line-height: 1.4; font-weight: 600; color: var(--texto); }
.rama--acento .rama__valor{ color: #b34600; }

/* 03 Cobro */
.linea-cobro{
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.hito{ display: grid; grid-template-rows: 17px 13px auto; justify-items: center;
       gap: 6px; position: relative; }
.hito::before{
  content: ""; position: absolute; top: 28px; left: 50%; width: 100%;
  height: 2px; background: #cfc6e8;
}
.hito:last-child::before{ display: none; }
.hito--fin::before{ display: none; }
.hito:nth-child(3)::before{ background: linear-gradient(to right, #cfc6e8, var(--naranja)); }
.hito__dia{
  font-family: var(--fuente-dato); font-size: var(--t-micro); color: var(--texto-suave);
}
.hito__punto{
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--papel); border: 2.5px solid #c9c1e6; position: relative; z-index: 1;
}
.hito--fin .hito__punto{ background: var(--naranja); border-color: var(--naranja); }
.hito__que{ font-size: var(--t-small); color: var(--texto); text-align: center; }
.hito--fin .hito__que{ font-weight: 600; color: #b34600; }
.medios{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e2); }
.medio{
  font-size: var(--t-micro); color: var(--texto-suave);
  background: var(--papel-2); border: 1px solid var(--borde);
  border-radius: 999px; padding: 4px 11px;
}

/* 04 Conciliación */
.concilia__encabezado{
  display: grid; grid-template-columns: 1fr 44px 1fr; width: 100%;
  font-family: var(--fuente-dato); font-size: var(--t-micro);
  letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave);
}
.concilia__encabezado span:last-child{ grid-column: 3; text-align: right; }
.pares{ list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: var(--e3); }
.par{
  display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center;
  background: var(--papel-2); border: 1px solid var(--borde);
  border-radius: var(--radio-s); padding: 11px var(--e4);
}
.par--cuadra{ border-color: #cfe8db; background: var(--ok-suave); }
.par--pendiente{ border-color: #f0dcc0; background: var(--alerta-suave); }
.par__monto{
  font-family: var(--fuente-dato); font-size: 0.9rem; font-variant-numeric: tabular-nums;
  color: var(--texto);
}
.par__monto:last-child{ text-align: right; }
.par__monto--vacio{ color: var(--alerta); font-family: var(--fuente); font-size: var(--t-small); }
.par__union{ display: grid; place-items: center; color: var(--ok); }
.par__union svg{ width: 19px; height: 19px; }
.par__union--corte{ color: var(--alerta); }

/* 05 Contabilidad */
.entradas{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e2); }
.entrada{
  font-size: var(--t-small); color: var(--texto-suave);
  background: var(--papel-2); border: 1px solid var(--borde);
  border-radius: 7px; padding: 5px 12px;
}
.caida{ width: 100%; height: 38px; margin-block: calc(var(--e4) * -1); }
.catalogo{
  width: 100%; background: var(--papel-2);
  border: 1px solid var(--borde); border-radius: var(--radio-s);
  padding: var(--e4);
}
.catalogo__titulo{
  margin: 0 0 var(--e3); font-family: var(--fuente-dato);
  font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--indigo);
}
.cuentas{ list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cuentas li{ display: flex; align-items: baseline; gap: var(--e3); font-size: 0.88rem; }
.cuenta__codigo{
  font-family: var(--fuente-dato); font-variant-numeric: tabular-nums;
  color: var(--naranja); font-weight: 600; flex: none;
}
.cuenta__nombre{ color: var(--texto-suave); }
.catalogo__pie{
  margin: var(--e4) 0 0; padding-top: var(--e3);
  border-top: 1px solid var(--borde);
  font-size: var(--t-micro); color: var(--texto-suave);
}

/* 06 Finanzas */
.razones{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e2); }
.razon{
  font-size: var(--t-small); color: var(--texto-suave);
  background: var(--papel-2); border: 1px solid var(--borde);
  border-radius: 999px; padding: 5px 13px;
}
.razon b{ color: var(--texto); font-weight: 600; }
.proyeccion{ width: 100%; max-width: 320px; height: auto; }

/* --- El resultado: separado de los pasos y con más peso --- */
.resultado{
  margin-top: var(--e9);
  background: var(--indigo);
  color: #fff;
  text-align: center;
}
.resultado .eyebrow{ color: #ffb37a; }
.resultado__titulo{
  color: #fff; font-size: clamp(2rem, 4.4vw, 3rem);
  margin: var(--e4) 0 var(--e5); text-wrap: balance;
}
.resultado__plomo{
  color: rgba(255,255,255,.8); font-size: 1.08rem; line-height: 1.6;
  max-width: 56ch; margin: 0 auto var(--e8);
}
.resultado__dos{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e5);
  max-width: 860px; margin: 0 auto; text-align: left;
}
@media (max-width: 720px){ .resultado__dos{ grid-template-columns: 1fr; } }
.resultado__caso{
  padding: var(--e6);
  border-radius: var(--radio);
  border: 1px solid rgba(255,255,255,.18);
}
.resultado__caso--si{ background: var(--naranja); border-color: var(--naranja); }
.resultado__caso--no{ background: rgba(255,255,255,.06); }
.resultado__marca{
  margin: 0 0 var(--e3);
  font-family: var(--fuente-dato); font-size: var(--t-micro);
  letter-spacing: .14em; text-transform: uppercase;
}
.resultado__caso--si .resultado__marca{ color: rgba(255,255,255,.85); }
.resultado__caso--no .resultado__marca{ color: rgba(255,255,255,.55); }
.resultado__frase{
  margin: 0; font-size: 1.14rem; line-height: 1.5; font-weight: 500; color: #fff;
}
.resultado__caso--no .resultado__frase{ color: rgba(255,255,255,.82); }

/* Eventos destacado en el pie */
.pie__destacado{ color: var(--naranja) !important; font-weight: 600; }
.pie__destacado:hover{ color: #ff8a3d !important; }

/* Punto de venta — el costo sube, el precio no: la brecha se estrecha */
.margen{
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--e5);
  display: grid; gap: var(--e3);
}
.margen__leyenda{ display: flex; flex-wrap: wrap; gap: var(--e4); }
.clave{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-small); color: var(--texto-suave);
}
.clave::before{
  content: ""; width: 15px; height: 3px; border-radius: 2px; flex: none;
}
.clave--precio::before{ background: var(--naranja); }
.clave--costo::before{ background: var(--indigo); }
.margen__lienzo{ width: 100%; height: auto; }
.margen__nota{
  margin: 0; padding-top: var(--e3); border-top: 1px solid var(--borde);
  font-size: var(--t-small); color: var(--texto-suave);
}
/* La brecha se cierra a la vista; en reposo queda en su estado final. */
.margen__area{ transform-origin: center; animation: aparece-area 1.1s ease-out both; }
@keyframes aparece-area{ from{ opacity:.35 } to{ opacity:1 } }
@media (prefers-reduced-motion: reduce){
  .margen__area{ animation: none; opacity: 1; }
}

.metricas__nota{
  margin: var(--e5) 0 0;
  font-size: var(--t-micro);
  color: var(--texto-suave);
}

/* Marca que los datos de un panel son de ejemplo, no de un cliente real */
.rotulo-ejemplo{
  font-family: var(--fuente-dato); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-suave); background: var(--papel-2);
  border: 1px solid var(--borde); border-radius: 999px;
  padding: 2px 8px; margin-left: var(--e2); vertical-align: middle;
}