/* LG2AI -- sitio público. Paleta extraída del isotipo oficial (navy +
   teal), sin azules/violetas ajenos a la marca. Verde reservado
   exclusivamente para estados positivos/seguridad, nunca como color de
   marca dominante. */
:root {
  --navy: #0b1b2b;
  --navy-2: #10283d;
  --ink: #0c1d2d;
  --teal: #18516c;
  --teal-2: #1a5370;
  --teal-dark: #123e54;
  --teal-light: #2b7a99;
  --cyan: #4fb8d6;
  --positive: #0f7a4a;
  --positive-bg: #e8f7f1;
  --muted: #52667a;
  --line: #dde5ec;
  --soft: #f6f9fb;
  --soft-2: #eef4f7;
  --white: #ffffff;
  --shadow-sm: 0 8px 24px rgba(11, 27, 43, 0.08);
  --shadow: 0 24px 60px rgba(11, 27, 43, 0.14);
  --radius: 14px;
  --radius-sm: 8px;
  --font-display: "Space Grotesk", "Inter", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  text-wrap: balance;
}

.container {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--navy);
  color: var(--white);
  border-radius: 0 0 8px 0;
  font-weight: 700;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 2px solid var(--teal-light);
  outline-offset: 2px;
}

/* Header / nav ------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.nav {
  min-height: 76px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 26px;
}

.brand img {
  display: block;
  width: 155px;
  height: auto;
  mix-blend-mode: multiply;
}

.nav-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  font-weight: 600;
  font-size: 0.92rem;
}

.nav-menu a[data-nav-link] {
  position: relative;
  padding: 27px 0 24px;
  color: var(--muted);
  transition: color 0.15s ease;
}

.nav-menu a[data-nav-link]:hover {
  color: var(--navy);
}

.nav-menu a.is-active {
  color: var(--navy);
}

.nav-menu a.is-active::after,
.nav-menu a[data-nav-link]:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--teal-2);
}

.nav-menu__actions {
  display: none;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.94rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  color: var(--white);
  background: linear-gradient(180deg, var(--teal-2), var(--teal-dark));
  box-shadow: 0 14px 30px rgba(24, 81, 108, 0.28);
}

.btn-primary:hover {
  background: linear-gradient(180deg, var(--teal-light), var(--teal-2));
}

.btn-large {
  min-height: 52px;
  padding: 0 28px;
  font-size: 1rem;
}

.btn-small {
  min-height: 38px;
  padding: 0 16px;
  font-size: 0.86rem;
}

.btn-ghost {
  color: var(--teal-dark);
  background: transparent;
  border-color: var(--line);
}

.btn-ghost:hover {
  border-color: var(--teal-2);
  background: var(--soft);
}

.btn-light {
  color: var(--teal-dark);
  background: var(--white);
}

.btn-light:hover {
  background: var(--soft);
}

.nav-toggle {
  display: none;
}

/* Eyebrows / section headers ----------------------------------------- */

.eyebrow {
  margin: 0 0 14px;
  color: var(--teal-2);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.eyebrow--dark {
  color: var(--teal-2);
}

.eyebrow--center {
  text-align: center;
}

.section-title {
  max-width: 760px;
  margin: 0 auto 14px;
  text-align: center;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}

.section-intro {
  max-width: 640px;
  margin: 0 auto 44px;
  color: var(--muted);
  text-align: center;
  font-size: 1rem;
}

section {
  padding: 84px 0;
}

.section-cta {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 44px;
}

.section-cta--left {
  justify-content: flex-start;
  margin-top: 26px;
}

/* Scroll reveal -- discreto, respeta prefers-reduced-motion ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Navegación por teclado -- un enlace/botón dentro de un bloque que aún
   no se reveló por scroll nunca debe quedar enfocado pero invisible;
   :focus-within lo muestra de inmediato sin esperar al IntersectionObserver. */
.reveal:focus-within {
  opacity: 1;
  transform: none;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--delay.is-visible {
  transition-delay: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 56px 0 72px;
  overflow: hidden;
  background: linear-gradient(180deg, #f9fcfd 0%, #ffffff 70%);
}

.hero__field {
  position: absolute;
  inset: -20% -10% auto auto;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(24, 81, 108, 0.1), transparent 62%);
  pointer-events: none;
  animation: hero-drift 18s ease-in-out infinite alternate;
}

@keyframes hero-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(-30px, 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__field {
    animation: none;
  }
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 0.95fr 1fr;
  align-items: center;
  gap: 64px;
}

.hero-copy h1 {
  max-width: 600px;
  margin: 0 0 18px;
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
  line-height: 1.1;
  font-weight: 700;
}

.hero-copy h1 span {
  color: var(--teal-2);
}

.hero-lead {
  max-width: 520px;
  margin: 0 0 28px;
  color: #2d4058;
  font-size: 1.06rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 28px;
}

.hero-audience {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-audience li {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--teal-dark);
  font-size: 0.78rem;
  font-weight: 700;
}

/* Product frame (representación ilustrativa, nunca clichés de IA) ---- */

.product-frame {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.product-frame__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid #e6edf4;
}

.product-frame__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.product-frame__brand img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.product-frame__brand strong {
  font-size: 0.92rem;
  color: var(--navy);
}

.pill {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--soft-2);
  color: var(--teal-dark);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.pill--live {
  background: var(--positive-bg);
  color: var(--positive);
}

.product-frame__body {
  padding: 22px;
}

.product-frame__caption {
  margin: 0;
  padding: 12px 22px 18px;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

/* Mini-representación de producto (sidebar + score + tabla) -- sustituye
   al mockup abstracto anterior; sin datos de cliente reales. */
.product-frame__body--app {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 0;
  padding: 0;
}

.mock-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  background: var(--soft);
  border-right: 1px solid var(--line);
}

.mock-sidebar__item {
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.mock-sidebar__item.is-active {
  background: var(--white);
  color: var(--teal-dark);
  box-shadow: var(--shadow-sm);
}

.mock-main {
  padding: 18px;
  min-width: 0;
}

.mock-score-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.mock-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  border-radius: var(--radius-sm);
  background: var(--soft);
  border: 1px solid var(--line);
}

.mock-score__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--teal-dark);
}

.mock-score__label {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}

.mock-table-wrap {
  overflow-x: auto;
}

.mock-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 0.72rem;
}

.mock-table th,
.mock-table td {
  padding: 7px 8px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.mock-table th {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mock-table--wide {
  min-width: 920px;
}

.mock-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 700;
}

.mock-tag--alta {
  background: #fdeceb;
  color: #b3261e;
}

.mock-tag--media {
  background: #fff3e0;
  color: #a15c00;
}

/* Qué es LG2AI --------------------------------------------------------- */

.que-es {
  background: var(--soft);
}

.que-es-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.que-es h2 {
  text-align: left;
  margin: 0 0 18px;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.lead-text {
  color: var(--muted);
  font-size: 1.02rem;
  margin: 0 0 22px;
}

/* Panel interactivo "Qué es LG2AI" -- patrón ARIA tabs: 5 disparadores
   (hover/click/teclado) cambian el detalle mostrado en .signal-panel__stage.
   Reemplaza la matriz estática anterior por un componente con más
   jerarquía/dinamismo, sin perder el contenido conceptual. */
.signal-panel {
  padding: 10px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.signal-panel__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  border-radius: calc(var(--radius) - 4px);
  background: var(--soft);
}

.signal-panel__tab {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.signal-panel__tab:hover {
  color: var(--navy);
}

.signal-panel__tab.is-active {
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}

.signal-panel__tab-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  color: var(--white);
  background: var(--teal-2);
  transition: background-color 0.2s ease;
}

.signal-panel__tab-icon svg {
  width: 14px;
  height: 14px;
}

.signal-panel__tab[data-tone="riesgo"] .signal-panel__tab-icon {
  background: #b3261e;
}

.signal-panel__tab[data-tone="atencion"] .signal-panel__tab-icon {
  background: #a15c00;
}

.signal-panel__tab[data-tone="prioridad"] .signal-panel__tab-icon {
  background: var(--navy);
}

.signal-panel__tab[data-tone="accion"] .signal-panel__tab-icon {
  background: var(--positive);
}

.signal-panel__stage {
  position: relative;
  min-height: 190px;
  padding: 30px 28px;
}

.signal-panel__detail {
  display: none;
  animation: signal-fade-in 0.35s ease;
}

@keyframes signal-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .signal-panel__detail {
    animation: none;
  }
}

.signal-panel__detail.is-active {
  display: block;
}

.signal-panel__badge {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--teal-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.signal-panel__detail[data-tone="riesgo"] .signal-panel__badge {
  color: #b3261e;
}

.signal-panel__detail[data-tone="atencion"] .signal-panel__badge {
  color: #a15c00;
}

.signal-panel__detail[data-tone="prioridad"] .signal-panel__badge {
  color: var(--navy);
}

.signal-panel__detail[data-tone="accion"] .signal-panel__badge {
  color: var(--positive);
}

.signal-panel__detail h3 {
  margin: 0 0 10px;
  font-size: 1.3rem;
}

.signal-panel__detail p {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 0.96rem;
}

/* Áreas de análisis ---------------------------------------------------- */

.areas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.areas-grid > li {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal-2);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.areas-grid > li:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
  .areas-grid > li:hover {
    transform: none;
  }
}

.areas-grid h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
}

.areas-grid p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.88rem;
}

/* Chips de capacidades por módulo -- reutiliza .chips/.chips li (misma
   pastilla que ya usa el spotlight de Consulta Global), sólo se fija al
   fondo de la tarjeta para que las 10 tarjetas queden alineadas aunque la
   descripción varíe de longitud. Los overrides de abajo son un refuerzo
   explícito -- con .areas-grid > li ya no hay fuga hacia estos <li>
   anidados, pero se fijan igual por si algún otro estilo hereda hacia
   aquí en el futuro. */
.areas-grid .chips {
  margin-top: auto;
  align-items: flex-start;
  justify-content: flex-start;
}

.areas-grid .chips li {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  min-height: 0;
  height: auto;
  max-width: 100%;
  line-height: 1.3;
  white-space: normal;
}

/* Cómo funciona -- flujo visual ---------------------------------------- */

.como-funciona {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
}

.como-funciona .eyebrow,
.como-funciona .section-title,
.como-funciona .section-intro {
  color: var(--white);
}

.como-funciona .eyebrow {
  color: var(--cyan);
}

.como-funciona .section-intro {
  color: #b9cbdb;
}

.flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.flow__step {
  position: relative;
  padding: 22px 18px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.flow__index {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.86rem;
}

.flow__step h3 {
  margin: 0 0 8px;
  color: var(--white);
  font-size: 0.96rem;
}

.flow__step p {
  margin: 0;
  color: #b9cbdb;
  font-size: 0.82rem;
}

/* Casos de uso ---------------------------------------------------------- */

.casos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.casos-grid li {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--soft);
  border: 1px solid var(--line);
}

.casos-grid__area {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--teal-2);
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.casos-grid p {
  margin: 0;
  color: #27384f;
  font-size: 0.94rem;
}

/* Plataforma / capacidades ------------------------------------------- */

.capacidades-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.capacidades-grid li {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 22px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  background: var(--white);
  transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
}

.capacidades-grid li:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-sm);
  border-color: var(--teal-2);
}

@media (prefers-reduced-motion: reduce) {
  .capacidades-grid li:hover {
    transform: none;
  }
}

.capacidad-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 10px;
  color: var(--teal-2);
  background: var(--soft-2);
  transition: background 0.26s ease, color 0.26s ease;
}

.capacidad-icon svg {
  width: 20px;
  height: 20px;
}

.capacidades-grid li:hover .capacidad-icon {
  color: var(--white);
  background: var(--teal-2);
}

.capacidades-grid h4 {
  margin: 0 0 8px;
  font-size: 0.98rem;
  font-family: var(--font-display);
  color: var(--navy);
}

.capacidades-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.capacidad-valor {
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  color: var(--ink) !important;
  font-size: 0.82rem !important;
}

.capacidad-valor strong {
  color: var(--teal-2);
}

/* Trazabilidad / Consulta Global / Kardex: mismas capacidades que las
   demás, pero con protagonismo visual (ver spotlights más abajo en esta
   misma sección) -- fondo distinto, acento superior e enlace directo al
   ejemplo ilustrativo correspondiente. */
.capacidades-grid li.is-featured {
  border-left-color: var(--teal-2);
  background: linear-gradient(180deg, var(--soft-2) 0%, var(--white) 55%);
}

.capacidades-grid li.is-featured::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--teal-2), var(--cyan));
}

.capacidades-grid li.is-featured:hover {
  border-color: var(--teal-2);
  box-shadow: 0 14px 28px -18px rgba(11, 27, 43, 0.35);
}

.capacidad-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  color: var(--teal-2);
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
}

.capacidad-link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.capacidad-link:hover {
  text-decoration: underline;
}

.capacidad-link:hover svg {
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .capacidad-link:hover svg {
    transform: none;
  }
}

/* Categorías de Soluciones -- agrupa las 9 capacidades en 3 categorías
   con encabezado propio (ícono + nombre), en vez de 9 tarjetas idénticas
   sueltas. */
.solucion-categoria {
  margin-bottom: 40px;
}

.solucion-categoria:last-of-type {
  margin-bottom: 56px;
}

.solucion-categoria__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.solucion-categoria__icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--white);
  background: var(--teal-2);
  box-shadow: var(--shadow-sm);
}

.solucion-categoria__icon svg {
  width: 22px;
  height: 22px;
}

.solucion-categoria__icon[data-tone="b"] {
  background: var(--cyan);
  color: var(--navy);
}

.solucion-categoria__icon[data-tone="c"] {
  background: var(--navy);
}

.solucion-categoria__head h3 {
  margin: 0;
  font-size: 1.12rem;
}

.solucion-categoria__desc {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

/* Spotlights -- Trazabilidad / Consulta Global / Kardex: bloque
   destacado de 2 columnas (copy + visual ilustrativo), alternando lado
   con .spotlight--reverse para variar el ritmo visual entre los 3. */
.spotlight {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 40px;
  align-items: center;
  padding: 36px;
  margin-bottom: 28px;
  border-radius: var(--radius);
  background: var(--soft);
  border: 1px solid var(--line);
}

.spotlight--reverse {
  grid-template-columns: 1.15fr 0.85fr;
}

.spotlight--reverse .spotlight__copy {
  order: 2;
}

.spotlight--reverse .spotlight__visual {
  order: 1;
}

.spotlight__eyebrow {
  margin: 0 0 8px;
  color: var(--teal-2);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.spotlight__copy h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}

.spotlight__copy > p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.92rem;
}

.spotlight__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.spotlight__list li {
  position: relative;
  padding-left: 22px;
  color: #27384f;
  font-size: 0.86rem;
  font-weight: 600;
}

.spotlight__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--teal-2);
}

.spotlight__visual {
  min-width: 0;
}

.spotlight__caption {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.5;
}

/* Cadena horizontal (Matriz/Línea -> ... -> Trayectoria) -- variante
   clara del mismo lenguaje visual que .flow (fondo oscuro), reutilizado
   aquí sobre fondo claro. */
.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chain li {
  display: flex;
  align-items: center;
}

.chain li span {
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.82rem;
  white-space: nowrap;
}

.chain li:not(:last-child)::after {
  content: "→";
  margin: 0 8px;
  color: var(--teal-2);
  font-weight: 700;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--teal-2);
  color: var(--teal-dark);
  font-size: 0.78rem;
  font-weight: 700;
}

.kardex-saldo {
  display: flex;
  gap: 14px;
  margin-top: 8px;
}

.kardex-saldo div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--white);
  border: 1px solid var(--line);
}

.kardex-saldo span {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.kardex-saldo strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--teal-dark);
}

/* Chip reutilizado por las tarjetas del carrusel de casos reales. */
.caso-chip {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--cyan);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Carrusel "Casos reales" -- scroll-snap nativo (swipe táctil sin JS
   adicional) + flechas/dots/autoplay, ver initCasosCarrusel en main.js. */
.casos-carrusel {
  margin-top: 28px;
}

.casos-carrusel__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.casos-carrusel__viewport::-webkit-scrollbar {
  display: none;
}

.casos-carrusel__track {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 4px 4px 8px;
  list-style: none;
}

.caso-card {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: min(280px, 78vw);
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--soft);
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(11, 27, 43, 0.05);
  overflow: hidden;
  transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
}

.caso-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal-2), var(--cyan));
  opacity: 0;
  transition: opacity 0.26s ease;
}

.caso-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
  border-color: var(--teal-2);
}

.caso-card:hover::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .caso-card:hover {
    transform: none;
  }
}

.caso-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  margin-bottom: 14px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
}

.caso-card__logo img {
  display: block;
  max-width: 100%;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* El wordmark de GRACO se percibe más chico que el resto con el mismo
   max-height compartido -- override puntual sólo para esta instancia
   (misma caja de 64px de alto: menos padding + más max-height), sin
   tocar la regla general ni los demás logos. */
.caso-card__logo.caso-card__logo--graco {
  padding: 6px;
}

.caso-card__logo.caso-card__logo--graco img {
  max-height: 50px;
}

/* Medical Recovery y Altafini son isotipos cuadrados (1:1): con el mismo
   max-height compartido su ancho renderizado queda muy por debajo del de
   CBX/CADAVSHMEIP (rectangulares), así que se perciben más chicos aunque
   compartan la misma altura. Mismo tratamiento puntual que GRACO -- menos
   padding + más max-height dentro de la misma caja de 64px, sin tocar la
   regla general, el fondo del logo ni los demás logos. */
.caso-card__logo.caso-card__logo--medical {
  padding: 6px;
}

.caso-card__logo.caso-card__logo--medical img {
  max-height: 50px;
}

.caso-card__logo.caso-card__logo--altafini {
  padding: 6px;
}

.caso-card__logo.caso-card__logo--altafini img {
  max-height: 50px;
}

.caso-card .caso-chip {
  align-self: flex-start;
  color: var(--teal-dark);
  background: var(--white);
  border-color: var(--teal-2);
}

.caso-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.casos-carrusel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
}

.casos-carrusel__arrow {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.casos-carrusel__arrow:hover {
  border-color: var(--teal-2);
  background: var(--soft);
}

.casos-carrusel__arrow svg {
  width: 18px;
  height: 18px;
}

.casos-carrusel__dots {
  display: flex;
  gap: 8px;
}

.casos-carrusel__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.casos-carrusel__dot.is-active {
  background: var(--teal-2);
  transform: scale(1.25);
}

.logos-grid__nota {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  text-align: center;
}

/* Por qué LG2AI / diferenciadores + fundador -------------------------- */

.diferenciador-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.diferenciador-grid li {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.diferenciador-grid h3 {
  margin: 0 0 8px;
  font-size: 0.94rem;
  color: var(--teal-dark);
}

.diferenciador-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

/* Seguridad -------------------------------------------------------------- */

.seguridad-panel {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  padding: 44px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color: var(--white);
}

.seguridad-copy h2 {
  color: var(--white);
  text-align: left;
  margin: 0 0 14px;
}

.seguridad-copy p {
  margin: 0;
  color: #cfe0ec;
  font-size: 0.98rem;
}

.seguridad-lista {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seguridad-lista li {
  position: relative;
  padding-left: 28px;
  color: #eaf3f8;
  font-weight: 600;
  font-size: 0.92rem;
}

.seguridad-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--positive);
}

/* CTA final / contacto --------------------------------------------------- */

.bottom-cta {
  padding-top: 0;
}

.bottom-cta-panel {
  text-align: center;
  padding: 44px 40px;
  margin-bottom: 48px;
  color: var(--white);
  background: linear-gradient(180deg, var(--teal-2), var(--teal-dark));
  border-radius: 18px;
}

.bottom-cta-panel h2 {
  margin: 0 0 12px;
  color: var(--white);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}

.bottom-cta-panel p {
  margin: 0;
  color: #d9edf2;
  font-size: 1rem;
  max-width: 560px;
  margin-inline: auto;
}

.contacto-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 32px;
  align-items: start;
}

.contacto-form {
  padding: 32px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.contacto-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.contacto-form__full {
  grid-column: 1 / -1;
}

.contacto-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.86rem;
}

.contacto-form__hint {
  margin-top: -2px;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.78rem;
}

.contacto-form input,
.contacto-form select,
.contacto-form textarea {
  font: inherit;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--ink);
}

.contacto-form input:focus,
.contacto-form select:focus,
.contacto-form textarea:focus {
  outline: 2px solid var(--teal-2);
  outline-offset: 1px;
}

.contacto-form textarea {
  resize: vertical;
  min-height: 96px;
}

.contacto-form .btn {
  width: 100%;
}

.contacto-form .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.contacto-info {
  padding: 26px;
  border-radius: var(--radius);
  background: var(--soft);
  border: 1px solid var(--line);
}

.contacto-info h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.contacto-info p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Honeypot -- oculto visualmente pero presente en el DOM (nunca
   display:none/visibility:hidden, que algunos bots evitan): un humano
   jamás lo ve ni lo completa; tabindex="-1" en el input también lo saca
   del recorrido con teclado. */
.contacto-form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.contacto-form__estado {
  margin: 0 0 14px;
  font-size: 0.86rem;
  font-weight: 700;
  min-height: 1.2em;
}

.contacto-form__estado[data-tipo="exito"] {
  color: var(--positive);
}

.contacto-form__estado[data-tipo="error"] {
  color: #b3261e;
}

/* Footer ------------------------------------------------------------------ */

.site-footer {
  padding: 40px 0 28px;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 28px;
}

.footer-block h3 {
  margin: 0 0 10px;
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--white);
}

.footer-logo img {
  display: block;
  width: auto;
  height: 30px;
}

.footer-block--identidad p {
  margin: 0 0 4px;
  color: #b9cbdb;
  font-size: 0.88rem;
}

.footer-block--identidad p:last-child {
  margin-bottom: 0;
}

.footer-block--identidad p.footer-brand {
  color: var(--white);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}

.footer-block--contacto a {
  display: block;
  margin-bottom: 8px;
  color: var(--cyan);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

.footer-block--contacto a:last-child {
  margin-bottom: 0;
}

.footer-block--contacto a:hover {
  text-decoration: underline;
}

.footer-copy {
  margin: 0;
  color: #b9cbdb;
  font-size: 0.78rem;
}