/* ============================================================
   CLM THEME — Remodelación 2026
   Reposicionamiento: software a medida, automatización e IA.

   Esta hoja se carga DESPUÉS de clm-style.css para poder ajustar
   sin tocar el fichero original. Todo lo nuevo va aquí.
   ============================================================ */

/* ── HERO ──────────────────────────────────────────────────── */
/* Capas, de abajo a arriba:
     0  degradado base (visible si el vídeo no llega a cargar)
     0  .hero-video-bg  — vídeo/poster, atenuado y desenfocado
     2  .hero-bg        — velo oscuro que garantiza la legibilidad
     2  .hero-gradient  — radiales de color de marca
     2  .hero-grid      — retícula decorativa
     3  .hero-inner     — contenido                                      */
.hero-section--tech {
  position: relative;
  min-height: auto;
  padding-top: 132px;
  padding-bottom: 40px;
  background:
    linear-gradient(165deg, #081627 0%, #0B1F3A 46%, #0E2C50 100%);
}

/* El vídeo es parte del diseño: se deja bien visible. El desenfoque queda en
   4px —lo justo para que no se lea el texto del metraje y para disimular que el metraje es de 640x360 y se amplía ~3x—
   y la legibilidad se resuelve con un velo DIRECCIONAL, no oscureciéndolo
   todo. Detrás del H1 el fondo compuesto queda en L≈0,05 (~10:1 con blanco);
   del 60% hacia la derecha el vídeo se ve casi limpio. */
.hero-section--tech .hero-video-bg {
  z-index: 0;
  /* La opacidad va en una variable porque la regla :not(.is-playing) tiene
     más especificidad que las media queries y, si no, ganaba también en
     móvil e ignoraba los valores responsive. */
  --hero-video-opacity: .82;
  opacity: var(--hero-video-opacity);
  filter: blur(4px) saturate(.9) contrast(1.03);
  transform: scale(1.06);          /* evita que el desenfoque deje bordes */
  transform-origin: center;
  pointer-events: none;
  transition: opacity .8s ease;
}
/* El poster entra algo más tenue; al arrancar el vídeo sube a su opacidad final. */
.hero-section--tech .hero-video-bg:not(.is-playing) {
  opacity: calc(var(--hero-video-opacity) * .85);
}

/* Velo direccional en UNA sola capa. La zona densa cubre la columna de
   texto (0–48% del ancho) y cae rápido a partir de ahí. */
.hero-section--tech .hero-bg {
  background: linear-gradient(96deg,
    rgba(5,15,28,.93) 0%,
    rgba(5,15,28,.90) 30%,
    rgba(5,15,28,.78) 48%,
    rgba(5,15,28,.40) 62%,
    rgba(5,15,28,.16) 78%,
    rgba(5,15,28,.08) 100%);
}

/* Franja superior: protege la legibilidad del menú sin oscurecer el resto. */
.hero-section--tech .hero-bg::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 150px;
  background: linear-gradient(180deg, rgba(5,15,28,.82) 0%, rgba(5,15,28,0) 100%);
}

/* Franja inferior: funde el vídeo con la sección siguiente. */
.hero-section--tech .hero-bg::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 170px;
  background: linear-gradient(180deg, rgba(11,31,58,0) 0%, rgba(11,31,58,.92) 100%);
}

/* Radiales y retícula muy suavizados: con el vídeo visible ya no hacen
   falta y antes se sumaban al velo hasta apagarlo todo. */
.hero-section--tech .hero-gradient {
  background:
    radial-gradient(ellipse 70% 60% at 80% 40%, rgba(30,111,255,.12) 0%, transparent 62%),
    radial-gradient(ellipse 46% 42% at 10% 84%, rgba(25,195,125,.07) 0%, transparent 55%);
}
.hero-section--tech .hero-grid { opacity: .35; }

/* minmax(0, …) es imprescindible: por defecto una columna `fr` tiene
   min-width:auto, así que el ancho mínimo del CRM (sidebar + 4 columnas)
   ensanchaba la columna y el panel se salía del viewport a 1280px. */
.hero-section--tech .hero-inner {
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  gap: 64px;
  padding-bottom: 40px;
}

.hero-section--tech .hero-title { letter-spacing: -.015em; }
.hero-section--tech .hero-subtitle { max-width: 560px; }

/* ── Mockup de aplicación (hero) ───────────────────────────── */
/* min-width:0 además del minmax() de la rejilla: el ítem de grid también
   tiene min-width:auto por defecto y se desbordaba por el ancho mínimo
   del kanban. */
.hero-visual--app { position: relative; min-width: 0; }

/* ── CLM CRM: maqueta de aplicación del hero ────────────────
   Objetivo: que lea como una captura de software real, no como
   una tarjeta decorativa. Panel casi opaco para que se siga
   leyendo con el vídeo en movimiento por detrás.
   Tamaños en px: la maqueta no debe escalar con el tipo raíz. */
.crm {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  font-family: var(--font-body);
  background: rgba(13, 25, 43, .965);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 28px 60px rgba(0,0,0,.52),
    0 6px 18px rgba(0,0,0,.34);
  /* Perspectiva muy contenida: da profundidad sin parecer un truco. */
  transform: perspective(1600px) rotateY(-2.6deg) rotateX(1deg);
  transform-origin: 70% 50%;
}

/* Barra de ventana */
.crm__chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 12px;
  background: rgba(255,255,255,.045);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.crm__dots { display: flex; gap: 5px; }
.crm__dots i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
}
.crm__crumb {
  font-size: 10px;
  letter-spacing: .01em;
  color: rgba(255,255,255,.42);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm__crumb em { font-style: normal; color: rgba(255,255,255,.22); margin: 0 4px; }

.crm__body { display: flex; align-items: stretch; }

/* ── Sidebar ─────────────────────────────────────────────── */
.crm__side {
  width: 120px;
  flex-shrink: 0;
  padding: 12px 8px 10px;
  background: rgba(6,14,26,.72);
  border-right: 1px solid rgba(255,255,255,.07);
  display: flex;
  flex-direction: column;
}
.crm__brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  padding: 0 4px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.crm__mark {
  width: 19px; height: 19px;
  flex-shrink: 0;
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #2F7BFF, #19C37D);
}
.crm__nav { display: flex; flex-direction: column; gap: 1px; }
.crm__nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
}
.crm__nav-item svg { flex-shrink: 0; opacity: .75; }
.crm__nav-item.is-active {
  background: rgba(47,123,255,.20);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 2px 0 0 #2F7BFF;
}
.crm__nav-item.is-active svg { opacity: 1; color: #6BA5FF; }

.crm__side-foot {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  gap: 7px;
}
.crm__side-user {
  display: flex;
  flex-direction: column;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,.72);
  line-height: 1.25;
  min-width: 0;
}
.crm__side-user em {
  font-style: normal;
  font-size: 9px;
  font-weight: 400;
  color: rgba(255,255,255,.38);
}

/* Avatares */
.crm__av {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(135deg, #35507F, #22405f);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10);
}
.crm__av--sm { width: 20px; height: 20px; font-size: 8px; }
.crm__av--xs { width: 15px; height: 15px; font-size: 7px; }

/* ── Panel principal ─────────────────────────────────────── */
.crm__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.crm__top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.crm__search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 10px;
  color: rgba(255,255,255,.36);
  white-space: nowrap;
  overflow: hidden;
}
.crm__search svg { flex-shrink: 0; opacity: .55; }
.crm__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  background: #2F7BFF;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(47,123,255,.35);
}
.crm__bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  flex-shrink: 0;
  color: rgba(255,255,255,.5);
}
.crm__badge {
  position: absolute;
  top: 4px; right: 4px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #FF5C5C;
  box-shadow: 0 0 0 1.5px rgba(13,25,43,.95);
}

/* Cabecera de vista */
.crm__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px 10px;
}
.crm__title { display: flex; flex-direction: column; line-height: 1.2; }
.crm__title strong {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.94);
}
.crm__title span { font-size: 9.5px; color: rgba(255,255,255,.4); margin-top: 2px; }

.crm__kpis { display: flex; gap: 7px; }
.crm__kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 9px;
  border-radius: 7px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07);
  white-space: nowrap;
}
.crm__kpi span {
  font-size: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}
.crm__kpi b {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
}

/* ── Kanban ──────────────────────────────────────────────── */
.crm__board {
  position: relative;
  display: flex;
  gap: 8px;
  padding: 2px 11px 12px;
  overflow: hidden;    /* la 4a columna queda cortada, como un kanban real */
}
/* Degradado que insinua que el tablero continua a la derecha */
.crm__board::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 22px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(13,25,43,0) 0%, rgba(13,25,43,.75) 100%);
}
.crm__col {
  width: 122px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.crm__col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 4px;
}
.crm__col-name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(255,255,255,.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm__pip { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.crm__pip--blue  { background: #4C8DFF; }
.crm__pip--cyan  { background: #35C4E8; }
.crm__pip--amber { background: #F0A431; }
.crm__pip--green { background: #19C37D; }
.crm__col-count {
  font-size: 8.5px;
  font-weight: 700;
  color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.07);
  border-radius: 20px;
  padding: 1px 6px;
}

/* Tarjeta de oportunidad */
.crm__card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 9px 7px;
  border-radius: 7px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.075);
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
}
.crm__card-top { display: flex; align-items: center; justify-content: space-between; }
.crm__tag {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 20px;
}
.crm__tag--blue  { background: rgba(76,141,255,.20);  color: #8FB8FF; }
.crm__tag--cyan  { background: rgba(53,196,232,.18);  color: #7FDCF2; }
.crm__tag--amber { background: rgba(240,164,49,.18);  color: #F3C078; }
.crm__tag--green { background: rgba(25,195,125,.18);  color: #6FE0B4; }
.crm__tag--grey  { background: rgba(255,255,255,.09); color: rgba(255,255,255,.55); }
.crm__more { font-size: 11px; line-height: 1; color: rgba(255,255,255,.30); letter-spacing: .5px; }

.crm__card-title {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255,255,255,.93);
  margin-top: 1px;
}
.crm__card-co { font-size: 9px; color: rgba(255,255,255,.45); line-height: 1.3; }

.crm__card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 5px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.crm__amount {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 700;
  color: #7FE3BC;
  white-space: nowrap;
}
.crm__card-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 8.5px;
  color: rgba(255,255,255,.40);
  white-space: nowrap;
}

/* Pie de la vista */
.crm__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
  font-size: 8.5px;
  color: rgba(255,255,255,.34);
  white-space: nowrap;
}
.crm__demo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.5);
  font-weight: 600;
  letter-spacing: .03em;
}
.crm__records { overflow: hidden; text-overflow: ellipsis; }

/* Chips flotantes */
.clm-float {
  position: absolute;
  z-index: 4;
  background: rgba(9,25,45,.92);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.clm-float--chat {
  left: -40px;
  bottom: -18px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  animation: clmFloatY 6s ease-in-out infinite;
}
.float-avatar {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: .66rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #1E6FFF, #19C37D);
}
.float-lines .line {
  display: block;
  height: 6px; width: 96px;
  border-radius: 100px;
  background: rgba(255,255,255,.24);
}
.float-lines .line + .line { margin-top: 6px; }
.float-lines .line.short { width: 58px; }

.clm-float--flow {
  right: -18px;
  top: -20px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 15px;
  animation: clmFloatY 7.5s ease-in-out infinite reverse;
}
.flow-node {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #1E6FFF;
}
.flow-node--green { background: #19C37D; }
.flow-link {
  width: 20px; height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.26);
}

@keyframes clmFloatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.clm-visual-note {
  margin-top: 18px;
  text-align: center;
  font-size: .69rem;
  letter-spacing: .05em;
  color: rgba(255,255,255,.32);
}

/* ── PILARES (Tecnología adaptada a tu empresa) ────────────── */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}

.pillar-card {
  position: relative;
  background: var(--clm-white);
  border: 1px solid var(--clm-mid-gray);
  border-radius: var(--radius-lg);
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.pillar-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--clm-blue), var(--clm-green));
  opacity: .9;
}
.pillar-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(30,111,255,.32);
}

.pillar-num {
  display: block;
  font-family: var(--font-heading);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--clm-blue);
  margin-bottom: 14px;
}
.pillar-card h3 { font-size: 1.28rem; margin-bottom: 10px; }
.pillar-card p  { font-size: .9375rem; line-height: 1.65; }

.pillar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 22px;
}
.pillar-tags li {
  font-size: .72rem;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 100px;
  background: var(--clm-light);
  border: 1px solid var(--clm-mid-gray);
  color: var(--clm-text-gray);
}

.pillar-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 600;
  color: var(--clm-blue);
}
.pillar-link svg { transition: transform var(--transition); }
.pillar-card:hover .pillar-link svg { transform: translateX(4px); }

/* 04 — Marketing digital: deliberadamente con menos peso visual */
.pillar-card--secondary {
  grid-column: 1 / -1;
  background: var(--clm-light);
  border-style: solid;
  padding: 26px 30px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}
.pillar-card--secondary::before { display: none; }
.pillar-card--secondary:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--clm-mid-gray);
}
.pillar-card--secondary .pillar-num {
  margin-bottom: 0;
  color: var(--clm-text-gray);
  font-size: .9rem;
}
.pillar-card--secondary h3 {
  font-size: 1.05rem;
  margin-bottom: 4px;
  grid-column: 2;
}
.pillar-card--secondary p {
  font-size: .875rem;
  margin: 0;
  grid-column: 2;
}
.pillar-card--secondary .pillar-tags {
  grid-column: 2;
  margin: 12px 0 0;
}
.pillar-card--secondary .pillar-tags li { background: var(--clm-white); }
.pillar-card--secondary .pillar-link {
  margin-top: 0;
  color: var(--clm-text-gray);
}
.pillar-card--secondary:hover .pillar-link { color: var(--clm-blue); }

/* ── SOLUCIONES · showcases de software ─────────────────────
   Tres bloques a lo ancho, alternando lado, en lugar de la antigua
   cuadrícula 2x2 de tarjetas. Cada uno lleva una maqueta de interfaz
   realista construida con HTML/CSS (medidas en px: no deben escalar
   con el tipo raíz). */

/* Menos aire entre la cabecera de sección y el primer showcase. */
.section-header--tight { margin-bottom: 46px; }

.showcase {
  display: grid;
  /* minmax(0,…) obligatorio: las maquetas tienen columnas de ancho fijo y
     su min-content ensancharía la rejilla. Reparto ~41% texto / 59% app. */
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.12fr);
  gap: 56px;
  align-items: center;
  margin-bottom: 76px;
}
.showcase:last-of-type { margin-bottom: 40px; }

/* En escritorio el 02 invierte el orden; en el DOM el texto va siempre
   primero, así que en móvil se lee texto → software en los tres. */
.showcase--reverse {
  /* Al reordenar con `order`, los ítems cambian de columna: hay que
     invertir también la plantilla para que el software siga siendo la
     columna ancha (~59%) en los tres bloques. */
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .78fr);
}
.showcase--reverse .showcase__text { order: 2; }
.showcase--reverse .showcase__app  { order: 1; }

.showcase__text { min-width: 0; }
.showcase__app  { min-width: 0; }

.showcase__num {
  display: block;
  font-family: var(--font-heading);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--clm-blue);
  margin-bottom: 12px;
}
.showcase__text h3 {
  font-size: 1.55rem;
  line-height: 1.22;
  margin-bottom: 14px;
}
.showcase__text p {
  font-size: 1rem;
  line-height: 1.7;
  max-width: 44ch;
}
.showcase__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px;
}
.showcase__chips li {
  font-size: .75rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--clm-white);
  border: 1px solid var(--clm-mid-gray);
  color: var(--clm-text-gray);
}

/* ── Marco de aplicación (compartido CRM/ERP) ──────────────── */
.app {
  --app-bg:      rgba(13,25,43,.98);
  --app-side:    rgba(6,14,26,.6);
  --app-line:    rgba(255,255,255,.08);
  --app-txt:     rgba(255,255,255,.92);
  --app-mut:     rgba(255,255,255,.45);
  --app-soft:    rgba(255,255,255,.05);
  --app-accent:  #2F7BFF;

  position: relative;
  border-radius: 12px;
  overflow: hidden;
  font-family: var(--font-body);
  background: var(--app-bg);
  border: 1px solid var(--app-line);
  box-shadow: 0 22px 48px rgba(11,31,58,.20), 0 4px 12px rgba(11,31,58,.10);
}

/* Variante clara para el ERP: misma familia, lectura distinta. */
.app--light {
  --app-bg:     #FFFFFF;
  --app-side:   #F7F9FC;
  --app-line:   #E3E8EF;
  --app-txt:    #16233A;
  --app-mut:    #7A889E;
  --app-soft:   #F2F5F9;
  --app-accent: #1E6FFF;
  box-shadow: 0 22px 48px rgba(11,31,58,.14), 0 3px 10px rgba(11,31,58,.07);
}

.app__chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 29px;
  padding: 0 12px;
  background: var(--app-soft);
  border-bottom: 1px solid var(--app-line);
}
.app__dots { display: flex; gap: 5px; }
.app__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--app-mut); opacity: .45; }
.app__crumb {
  font-size: 9.5px;
  color: var(--app-mut);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app__crumb em { font-style: normal; opacity: .5; margin: 0 4px; }

.app__body { display: flex; align-items: stretch; }

.app__side {
  width: 118px;
  flex-shrink: 0;
  padding: 11px 8px;
  background: var(--app-side);
  border-right: 1px solid var(--app-line);
}
.app__brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  color: var(--app-txt);
  padding: 0 4px 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--app-line);
}
.app__mark {
  width: 18px; height: 18px;
  flex-shrink: 0;
  border-radius: 5px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #2F7BFF, #19C37D);
}
.app__mark--erp { background: linear-gradient(135deg, #1E6FFF, #35C4E8); }

.app__nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5.5px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
  color: var(--app-mut);
  white-space: nowrap;
}
.app__nav-item svg { flex-shrink: 0; opacity: .8; }
.app__nav-item.is-active {
  background: color-mix(in srgb, var(--app-accent) 16%, transparent);
  color: var(--app-txt);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--app-accent);
}
.app__nav-item.is-active svg { opacity: 1; color: var(--app-accent); }

.app__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app__top {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--app-line);
}
.app__search {
  flex: 1;
  min-width: 0;
  display: flex; align-items: center; gap: 6px;
  height: 23px; padding: 0 9px;
  border-radius: 6px;
  background: var(--app-soft);
  border: 1px solid var(--app-line);
  font-size: 9.5px;
  color: var(--app-mut);
  white-space: nowrap; overflow: hidden;
}
.app__filter {
  display: inline-flex; align-items: center; gap: 5px;
  height: 23px; padding: 0 9px;
  border-radius: 6px;
  border: 1px solid var(--app-line);
  background: var(--app-soft);
  font-size: 9.5px;
  color: var(--app-mut);
  white-space: nowrap;
}
.app__btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 23px; padding: 0 10px;
  border-radius: 6px;
  background: var(--app-accent);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 9.5px; font-weight: 600;
  white-space: nowrap;
}
.app__av {
  width: 21px; height: 21px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-heading);
  font-size: 8px; font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #35507F, #22405f);
}
.app--light .app__av { background: linear-gradient(135deg, #2F7BFF, #6BA5FF); }
.app__av--xs { width: 16px; height: 16px; font-size: 6.5px; }

.app__view { padding: 11px 11px 9px; }
.app__view-title { display: flex; align-items: baseline; gap: 9px; }
.app__view-title strong {
  font-family: var(--font-heading);
  font-size: 12.5px; font-weight: 700;
  color: var(--app-txt);
}
.app__view-title span { font-size: 9px; color: var(--app-mut); }

/* KPIs del ERP */
.kpis { display: flex; gap: 7px; margin-top: 10px; }
.kpi {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 9px;
  border-radius: 7px;
  background: var(--app-soft);
  border: 1px solid var(--app-line);
}
.kpi span {
  font-size: 7.5px;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--app-mut);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi b { font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--app-txt); }

/* ── Tabla ─────────────────────────────────────────────────── */
.tbl { padding: 0 11px; }
.tbl__row {
  display: grid;
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  border-bottom: 1px solid var(--app-line);
  font-size: 9.5px;
  color: var(--app-txt);
}
.tbl__row:last-child { border-bottom: 0; }
.tbl--crm .tbl__row { grid-template-columns: 1.45fr 1.15fr .95fr .75fr .8fr; }
.tbl--erp .tbl__row { grid-template-columns: .8fr 1fr .8fr 1.15fr .65fr; }

.tbl__row--head {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--app-mut);
  padding-bottom: 6px;
}
.tbl__row--head span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tbl__name {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600;
  min-width: 0;
}
.tbl__name, .tbl__muted, .tbl__code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl__muted { color: var(--app-mut); }
.tbl__num { text-align: right; }
.tbl__amount { font-family: var(--font-heading); font-weight: 700; color: #7FE3BC; }
.app--light .tbl__amount { color: #12855C; }
.tbl__code { font-family: var(--font-heading); font-weight: 700; font-size: 9px; color: var(--app-accent); }

/* Etiquetas de estado */
.pill {
  display: inline-block;
  font-style: normal;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2.5px 7px;
  border-radius: 20px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pill--blue  { background: rgba(76,141,255,.18);  color: #8FB8FF; }
.pill--cyan  { background: rgba(53,196,232,.16);  color: #7FDCF2; }
.pill--amber { background: rgba(240,164,49,.18);  color: #F3C078; }
.pill--green { background: rgba(25,195,125,.18);  color: #6FE0B4; }
.pill--grey  { background: rgba(255,255,255,.09); color: rgba(255,255,255,.55); }
.app--light .pill--blue  { background: #E7F0FF; color: #1B5FD9; }
.app--light .pill--green { background: #E2F7EF; color: #0F7A55; }
.app--light .pill--amber { background: #FDF1DF; color: #A96D0C; }
.app--light .pill--grey  { background: #EEF1F6; color: #6B7A90; }

/* Indicador de avance: solo en las órdenes realmente en proceso */
.prog {
  display: block;
  height: 3px;
  margin-top: 5px;
  border-radius: 3px;
  background: var(--app-line);
  overflow: hidden;
}
.prog b { display: block; height: 100%; border-radius: 3px; background: var(--app-accent); }

.app__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 8px 12px;
  border-top: 1px solid var(--app-line);
  background: var(--app-soft);
  font-size: 8px;
  color: var(--app-mut);
  white-space: nowrap;
}
.app__demo {
  display: inline-flex; align-items: center;
  padding: 2px 7px;
  border-radius: 20px;
  border: 1px solid var(--app-line);
  font-weight: 600;
  letter-spacing: .03em;
}
.app__pager { display: inline-flex; align-items: center; gap: 6px; }
.app__pager i {
  font-style: normal;
  display: inline-grid; place-items: center;
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1px solid var(--app-line);
  opacity: .55;
}
.app__pager i.is-on { opacity: 1; color: var(--app-accent); border-color: currentColor; }

/* ── Flujo de automatización ───────────────────────────────── */
.flow { display: flex; flex-direction: column; align-items: stretch; }

.flow__card {
  background: var(--clm-white);
  border: 1px solid var(--clm-mid-gray);
  border-radius: 10px;
  padding: 12px 13px;
  box-shadow: 0 6px 18px rgba(11,31,58,.07);
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.flow__row { display: flex; align-items: stretch; }
.flow__row > .flow__card { flex: 1; min-width: 0; }

.flow__head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  color: var(--clm-text);
}
.flow__ico {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 6px;
  display: grid; place-items: center;
}
.flow__ico--chat { background: #E2F7EF; color: #0F7A55; }
.flow__ico--crm  { background: #E7F0FF; color: #1B5FD9; }
.flow__ico--opp  { background: #E7F0FF; color: #1B5FD9; }
.flow__ico--doc  { background: #FDF1DF; color: #A96D0C; }
.flow__ico--team { background: #EDE9FE; color: #6D46C8; }
.flow__live {
  margin-left: auto;
  font-style: normal;
  font-size: 8px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: #0F7A55;
  background: #E2F7EF;
  padding: 2px 7px;
  border-radius: 20px;
}

.flow__chat { display: flex; flex-direction: column; gap: 6px; }
.bub {
  font-size: 10.5px;
  line-height: 1.45;
  padding: 7px 10px;
  border-radius: 10px;
  max-width: 88%;
  margin: 0;
}
.bub--in  { background: var(--clm-light); color: var(--clm-text); border-bottom-left-radius: 3px; align-self: flex-start; }
.bub--out { background: #E7F0FF; color: #17408F; border-bottom-right-radius: 3px; align-self: flex-end; }

.flow__fields { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.flow__fields > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  border-bottom: 1px dashed var(--clm-mid-gray);
  padding-bottom: 3px;
}
.flow__fields dt { font-size: 9px; color: var(--clm-text-gray); }
.flow__fields dd {
  margin: 0;
  font-size: 9.5px; font-weight: 600; color: var(--clm-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flow__card .pill { align-self: flex-start; font-size: 7.5px; }
.flow__card .pill--green { background: #E2F7EF; color: #0F7A55; }

.flow__amount {
  font-family: var(--font-heading);
  font-size: 1.32rem; font-weight: 800;
  color: #12855C;
  line-height: 1;
}
.flow__meta { font-size: 9px; color: var(--clm-text-gray); }
.flow__file {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 600; color: var(--clm-text);
  background: var(--clm-light);
  border: 1px solid var(--clm-mid-gray);
  border-radius: 7px;
  padding: 6px 9px;
  min-width: 0;
}
.flow__file i {
  font-style: normal;
  font-size: 7px; font-weight: 800; letter-spacing: .05em;
  color: #A96D0C; background: #FDF1DF;
  padding: 2px 5px; border-radius: 4px;
  flex-shrink: 0;
}
.flow__assignee {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 600; color: var(--clm-text);
  min-width: 0;
}

/* Conectores */
.flow__link {
  display: grid;
  place-items: center;
  height: 26px;
}
.flow__link i {
  position: relative;
  display: block;
  width: 2px; height: 100%;
  background: linear-gradient(180deg, rgba(30,111,255,.10), rgba(30,111,255,.42));
}
.flow__link i::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 6px; height: 6px;
  border-right: 2px solid rgba(30,111,255,.42);
  border-bottom: 2px solid rgba(30,111,255,.42);
  transform: translateX(-50%) rotate(45deg);
}
.flow__link--h { width: 30px; height: auto; flex-shrink: 0; }
.flow__link--h i {
  width: 100%; height: 2px;
  background: linear-gradient(90deg, rgba(30,111,255,.10), rgba(30,111,255,.42));
}
.flow__link--h i::after {
  left: auto; right: 0; bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

.flow__demo {
  margin-top: 14px;
  text-align: center;
  font-size: .69rem;
  letter-spacing: .05em;
  color: var(--clm-text-gray);
}

/* Enlace final de la sección */
.solutions-cta { text-align: center; margin-top: 8px; }
.solutions-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--clm-blue);
}
.solutions-cta svg { transition: transform var(--transition); }
.solutions-cta a:hover svg { transform: translateX(4px); }

/* Compatibilidad: .mock sigue usándose por el diagrama del CTA de proyecto. */
.mock { width: 100%; position: relative; z-index: 1; }

/* ── CTA DE PROYECTO (sustituye a la sección de precios) ───── */
.proyecto-cta {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 52px;
  align-items: center;
  padding: 54px 56px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #0B1F3A 0%, #143A66 62%, #10508C 100%);
  box-shadow: var(--shadow-xl);
}
.proyecto-cta .section-eyebrow { color: rgba(255,255,255,.62); }
.proyecto-cta h2 { color: var(--clm-white); margin-bottom: 16px; }
.proyecto-cta .text-blue { color: #7FB2FF; }
.proyecto-cta p { color: rgba(255,255,255,.72); font-size: 1.0625rem; line-height: 1.75; }

.proyecto-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}
.proyecto-cta .btn-outline {
  color: var(--clm-white);
  border-color: rgba(255,255,255,.34);
  background: transparent;
}
.proyecto-cta .btn-outline:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.6);
  color: var(--clm-white);
}

.mock--flow-wide { max-width: none; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.fw-node {
  padding: 15px 20px;
  border-radius: 12px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
}
.fw-node--mid { background: rgba(30,111,255,.18); border-color: rgba(30,111,255,.42); }
.fw-node--end {
  background: rgba(25,195,125,.16);
  border-color: rgba(25,195,125,.45);
  color: var(--clm-white);
}
.fw-arrow {
  width: 2px;
  height: 22px;
  margin: 0 auto;
  background: rgba(255,255,255,.28);
  position: relative;
}
.fw-arrow::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 7px; height: 7px;
  border-right: 2px solid rgba(255,255,255,.28);
  border-bottom: 2px solid rgba(255,255,255,.28);
  transform: translateX(-50%) rotate(45deg);
}

/* ── RESEÑAS ───────────────────────────────────────────────── */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.review-card {
  background: var(--clm-white);
  border: 1px solid var(--clm-mid-gray);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
}
.review-stars { display: flex; gap: 3px; margin-bottom: 16px; }
.review-card blockquote {
  font-size: .9375rem;
  line-height: 1.72;
  color: var(--clm-text);
  margin-bottom: 20px;
}
.review-card figcaption {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 16px;
  border-top: 1px solid var(--clm-mid-gray);
}
.review-name    { font-family: var(--font-heading); font-weight: 700; font-size: .9375rem; color: var(--clm-text); }
.review-company { font-size: .8125rem; color: var(--clm-text-gray); }
.review-service { font-size: .75rem; color: var(--clm-blue); margin-top: 5px; font-weight: 600; }

/* ── MARKETING DIGITAL (banda secundaria) ──────────────────── */
.marketing-strip__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 44px;
  background: var(--clm-light);
  border: 1px solid var(--clm-mid-gray);
  border-radius: var(--radius-xl);
  padding: 40px 46px;
}
.marketing-strip__head h2 {
  font-size: 1.5rem;
  margin: 6px 0 8px;
}
.marketing-strip__head p {
  font-size: .9375rem;
  max-width: 520px;
  margin: 0;
}
.marketing-strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.marketing-strip__list a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--clm-white);
  border: 1px solid var(--clm-mid-gray);
  border-radius: 100px;
  padding: 10px 18px;
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 600;
  color: var(--clm-text);
  transition: all var(--transition);
}
.marketing-strip__list a:hover {
  border-color: var(--clm-blue);
  color: var(--clm-blue);
  transform: translateY(-2px);
}
.marketing-strip__list svg { opacity: .55; transition: transform var(--transition); }
.marketing-strip__list a:hover svg { opacity: 1; transform: translateX(3px); }

/* ── FOOTER: segundo grupo de enlaces en la misma columna ──── */
.footer-col__second { margin-top: 26px; }

/* ── HEADER: el menú pasa de 7 a 9 entradas ─────────────────── */
/* El .container está limitado a 1200px, lo que dejaba un carril de solo
   719px para un menú que ahora mide 754px: la última entrada quedaba
   recortada. Se ensancha únicamente la barra del header y se compacta
   ligeramente el espaciado. */
.site-header .header-inner { max-width: 1320px; }

.header-nav .nav-menu a {
  padding: 6px 7px;
  font-size: .755rem;
  letter-spacing: .01em;
}

/* ── AGENTES: la sección ya no usa el canvas de partículas ─── */
.agents-section .section-header p { max-width: 640px; margin-left: auto; margin-right: auto; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

/* Por debajo de 1200px el menú de escritorio ya no cabe (antes se recortaba
   en silencio entre 768 y 1100px). A partir de aquí se usa el menú móvil,
   que contiene exactamente las mismas entradas más el CTA. */
@media (max-width: 1260px) {
  .header-nav, .header-cta { display: none; }
  .mobile-menu-toggle { display: flex; }
}

@media (max-width: 1100px) {
  /* Tablet: el vídeo también se reproduce. Con el contenido centrado el
     velo direccional descuadra, así que pasa a vertical y uniforme.
     Con opacidad .7 y velo .74 el contraste tras el H1 queda en ~7:1. */
  .hero-section--tech .hero-bg {
    background: linear-gradient(180deg,
      rgba(5,15,28,.80) 0%,
      rgba(5,15,28,.74) 34%,
      rgba(5,15,28,.74) 72%,
      rgba(11,31,58,.92) 100%);
  }
  .hero-section--tech .hero-bg::before { height: 130px; }
  .hero-section--tech .hero-video-bg { --hero-video-opacity: .7; }

  /* El mockup del hero SÍ se muestra en tablet y móvil:
     es el elemento que comunica el nuevo posicionamiento. */
  .hero-section--tech .hero-visual { display: block; }
  /* minmax(0,…) también aquí: si no, el ancho mínimo del CRM ensancha la
     fila apilada y desborda todo el hero en móvil. */
  .hero-section--tech .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 52px;
  }
  /* width:100% es necesario: `margin:0 auto` desactiva el stretch del ítem
     de rejilla y, sin él, se dimensiona al contenido del CRM (534px). */
  .hero-visual--app { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }

  .pillars-grid   { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid   { grid-template-columns: repeat(2, 1fr); }

  .proyecto-cta {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 44px 40px;
  }
  .marketing-strip__inner { grid-template-columns: 1fr; gap: 28px; }
  .marketing-strip__list  { justify-content: flex-start; }

  /* Showcases apilados: el texto queda siempre primero, también en el 02. */
  .showcase {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    margin-bottom: 56px;
  }
  .showcase--reverse .showcase__text,
  .showcase--reverse .showcase__app { order: 0; }
  .showcase__text p { max-width: none; }
  .section-header--tight { margin-bottom: 36px; }
}



@media (max-width: 768px) {
  /* Móvil: el script no descarga el vídeo, queda el poster de 36 KB.
     El fotograma del poster es oscuro (Y=84 sobre 255), así que admite
     más opacidad que el vídeo sin comprometer la lectura (~15:1). */
  .hero-section--tech .hero-video-bg {
    --hero-video-opacity: .55;
    filter: blur(4px) saturate(.75);
  }
  .hero-section--tech .hero-bg {
    background: linear-gradient(180deg,
      rgba(5,15,28,.78) 0%,
      rgba(5,15,28,.70) 30%,
      rgba(5,15,28,.74) 70%,
      rgba(11,31,58,.94) 100%);
  }
  .hero-section--tech .hero-bg::before { height: 110px; }
  .hero-section--tech .hero-bg::after  { height: 140px; }

  .hero-section--tech {
    padding-top: 108px;
    padding-bottom: 24px;
  }
  .hero-section--tech .hero-inner { gap: 44px; padding-bottom: 24px; }
  .hero-section--tech .hero-title { font-size: clamp(2rem, 8vw, 2.6rem); }
  .hero-section--tech .hero-subtitle { font-size: 1rem; }
  .hero-section--tech .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-trust { gap: 12px 20px; }

  /* CRM en móvil: sin sidebar ni perspectiva, y la vista se centra en el
     kanban, que es lo que comunica que hay un producto real detrás. */
  .crm { transform: none; }
  .crm__side   { display: none; }
  .crm__search { display: none; }
  .crm__top    { padding: 8px 10px; }
  .crm__btn    { flex: 1; justify-content: center; }
  .crm__head   { flex-direction: column; align-items: flex-start; gap: 9px; padding: 10px 10px 8px; }
  .crm__kpis   { width: 100%; }
  .crm__kpi    { flex: 1; }
  .crm__board  { padding: 2px 10px 10px; }
  .crm__foot   { padding: 6px 10px; }
  .crm__records { display: none; }

  .clm-float--chat { left: -8px; bottom: 18px; padding: 10px 13px; }
  .float-lines .line { width: 72px; }
  .float-lines .line.short { width: 44px; }

  .pillars-grid { grid-template-columns: 1fr; gap: 18px; }
  .pillar-card  { padding: 28px 24px 26px; }

  .pillar-card--secondary {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 24px;
  }
  .pillar-card--secondary h3,
  .pillar-card--secondary p,
  .pillar-card--secondary .pillar-tags { grid-column: 1; }
  .pillar-card--secondary .pillar-num { margin-bottom: 6px; }
  .pillar-card--secondary .pillar-link { margin-top: 14px; }


  .reviews-grid { grid-template-columns: 1fr; }

  /* Maquetas en móvil: se retiran sidebar y columnas secundarias en lugar
     de encoger la pantalla de escritorio hasta hacerla ilegible. */
  .app__side   { display: none; }
  .app__filter { display: none; }
  .app__search { flex: 1; }
  .app__btn    { padding: 0 8px; }
  .tbl--crm .tbl__row { grid-template-columns: 1.5fr 1fr .9fr; }
  .tbl--crm .tbl__row > *:nth-child(2),
  .tbl--crm .tbl__row > *:nth-child(5) { display: none; }
  .tbl--erp .tbl__row { grid-template-columns: .9fr 1fr 1.1fr; }
  .tbl--erp .tbl__row > *:nth-child(3),
  .tbl--erp .tbl__row > *:nth-child(5) { display: none; }
  .kpis .kpi:last-child { display: none; }
  .app__pager  { display: none; }

  /* El flujo pasa a una sola columna con conectores verticales. */
  .flow__row { flex-direction: column; }
  .flow__link--h { width: auto; height: 22px; }
  .flow__link--h i {
    width: 2px; height: 100%;
    background: linear-gradient(180deg, rgba(30,111,255,.10), rgba(30,111,255,.42));
  }
  .flow__link--h i::after {
    left: 50%; right: auto; bottom: 0;
    transform: translateX(-50%) rotate(45deg);
    border-right: 2px solid rgba(30,111,255,.42);
    border-bottom: 2px solid rgba(30,111,255,.42);
  }
  .showcase__text h3 { font-size: 1.35rem; }

  .proyecto-cta { padding: 34px 24px; border-radius: var(--radius-lg); }
  .proyecto-cta p { font-size: 1rem; }
  .proyecto-cta__actions .btn { width: 100%; justify-content: center; }

  .marketing-strip__inner { padding: 30px 24px; }
  .marketing-strip__list a { padding: 9px 15px; font-size: .8125rem; }
}

@media (max-width: 480px) {
  .crm__crumb  { font-size: 9px; }
  .crm__kpis .crm__kpi:last-child { display: none; }
  .tbl--crm .tbl__row { grid-template-columns: 1.5fr 1fr; }
  .tbl--crm .tbl__row > *:nth-child(4) { display: none; }
  .tbl--erp .tbl__row { grid-template-columns: .9fr 1.1fr; }
  .tbl--erp .tbl__row > *:nth-child(2) { display: none; }
  .clm-float--chat { bottom: 10px; }
  .pillar-tags li { font-size: .68rem; padding: 3px 9px; }
}

/* ── Accesibilidad: respetar reducción de movimiento ───────── */
@media (prefers-reduced-motion: reduce) {
  /* El script ya evita descargar el vídeo en este caso; esto lo cubre
     también si el usuario activa la preferencia con la página abierta. */
  .hero-section--tech .hero-video-bg { display: none; }

  .clm-float--chat,
  .hero-section--tech .hero-gradient { animation: none !important; }
  .pillar-card:hover,
  .marketing-strip__list a:hover { transform: none; }
}