@font-face {
  font-family: 'Avenir SLI';
  src: url('../fonts/AvenirLTStd-Book.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --primary: #071321;
  --accent: #4A9CC7;
  /* Variante oscurecida de --accent, solo para texto sobre fondo claro: #4A9CC7 da
     ~3.06:1 de contraste sobre blanco (falla WCAG AA 4.5:1 en texto normal/pequeño).
     #2D7CA3 da ~4.65:1. Mismo tono, uso exclusivo en texto (no en fondos/iconos,
     donde el accent original sí cumple). */
  --accent-text: #2D7CA3;
  --success: #2AA040;
  --card-bg: #F0F2F5;
  --border: #D0D5DD;
  --text-primary: #1A1A2E;
  --text-secondary: #6B7C93;
  --surface: #ffffff;
  --font-body: 'Avenir SLI', system-ui, sans-serif;
  --font-heading: 'Inter', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
[data-lang="en"] [lang="es"] { display: none; }
[data-lang="es"] [lang="en"] { display: none; }
/* Ancho fluido real: crece proporcional al viewport (92%) hasta un tope de 1320px,
   nunca se queda "congelado" en un número fijo antes de eso. Mismo contenedor para
   toda la página — una sola regla, no un ancho distinto por sección. */
.wrap { width: clamp(320px, 92vw, 1320px); margin: 0 auto; padding: 0 1.25rem; }

/* ===== Header ===== */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--border);
}
header.site .bar { display: flex; align-items: center; gap: 2.2rem; padding: 0.85rem 0; }
header.site .brand { display: flex; align-items: center; gap: 0.6rem; flex: none; }
header.site .brand img.isotipo { height: 32px; width: 32px; object-fit: contain; margin-left: 0.4rem; }
nav.main { display: flex; align-items: center; gap: 1.7rem; margin-right: auto; }
nav.main a.navlink { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
nav.main a.navlink:hover { color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 0.9rem; flex: none; }
.btn-login {
  background: var(--primary); color: #fff; padding: 0.55rem 1.2rem; border-radius: 0.375rem;
  font-size: 0.85rem; font-weight: 600; white-space: nowrap;
  border: none; cursor: pointer; font-family: inherit; line-height: normal;
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: background .15s;
}
.btn-login svg { stroke: #fff; }
.btn-login:hover { background: var(--accent); }

/* Selector de idioma — lista desplegable con bandera */
.lang-dd { position: relative; }
.lang-dd .lang-current {
  display: flex; align-items: center; gap: 0.4rem;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 0.375rem;
  padding: 0.4rem 0.65rem; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700;
  color: var(--text-primary); cursor: pointer;
}
.lang-dd .lang-current .flag-icon[hidden] { display: none; }
.lang-dd .lang-current .flag-icon { display: inline-flex; line-height: 1; }
.lang-dd .lang-current svg[width="18"] { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); display: block; }
.lang-dd .lang-current svg { stroke: var(--text-secondary); transition: transform .15s; }
.lang-dd.open .lang-current svg { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 152px;
  background: #fff; border: 1px solid var(--border); border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(16,24,40,0.12); padding: 0.35rem; display: none; z-index: 60;
}
.lang-dd.open .lang-menu { display: block; }
.lang-menu button {
  display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; padding: 0.5rem 0.6rem; border-radius: 0.375rem;
  font-family: var(--font-body); font-size: 0.85rem; color: var(--text-primary);
}
.lang-menu button:hover { background: var(--card-bg); }
.lang-menu button svg { flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
.lang-menu button.active { font-weight: 700; color: var(--accent-text); }

.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.4rem; }
.menu-toggle svg { stroke: var(--primary); }
@media (max-width: 860px) {
  nav.main.desktop-nav { display: none; }
  .login-dd.desktop-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-actions { margin-left: auto; }
}
#mobileNav {
  display: none; flex-direction: column; gap: 0.2rem;
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border-top: 1px solid var(--border);
  box-shadow: 0 16px 28px rgba(16,24,40,0.14);
  padding: 0.6rem 1.25rem 1.1rem;
}
#mobileNav.open { display: flex; }
#mobileNav a { padding: 0.6rem 0.2rem; font-weight: 600; }
#mobileNav .btn-login { justify-content: center; text-align: center; width: 100%; display: flex; }
#mobileNav .login-menu { left: 0; right: 0; }

/* Selector "Iniciar sesión" — dropdown anclado al botón, mismo patrón que .lang-dd */
.login-dd { position: relative; }
.login-dd .btn-login svg { transition: transform .15s; }
.login-dd.open .btn-login svg { transform: rotate(180deg); }
.login-menu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 270px;
  background: #fff; border: 1px solid var(--border); border-radius: 0.85rem;
  box-shadow: 0 18px 40px rgba(16,24,40,0.18); padding: 0.55rem; display: none;
  flex-direction: column; gap: 0.4rem; z-index: 60;
}
.login-dd.open .login-menu { display: flex; }
.login-choice {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.7rem;
  border-radius: 0.6rem; transition: background .15s;
}
.login-choice:hover { background: var(--card-bg); }
.login-choice-icon { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.login-choice-icon svg { stroke: var(--accent-text); }
.login-choice-text { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.login-choice-text strong { font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
.login-choice-desc { font-size: 0.74rem; color: var(--text-secondary); line-height: 1.3; }
.login-choice-arrow { flex: none; stroke: var(--text-secondary); transition: stroke .15s, transform .15s; }
.login-choice:hover .login-choice-arrow { stroke: var(--accent-text); transform: translateX(2px); }

/* ===== Hero (gradiente + partículas real del login) ===== */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #060e1a 0%, #0a1e30 60%, #0d2840 100%);
  padding: clamp(3.8rem, 6.5vw, 7rem) 0 clamp(3rem, 5vw, 5.5rem);
}
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .wrap { position: relative; z-index: 2; }
.hero .eyebrow { font-family: var(--font-heading); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 1.2rem; }
.hero h1 { font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(1.9rem, 3.2vw, 2.8rem); color: #fff; margin: 0 0 1.2rem; text-wrap: balance; }
.hero p.dek { color: rgba(255,255,255,0.78); font-size: clamp(0.95rem, 1.05vw, 1.15rem); line-height: 1.6; max-width: 64ch; margin: 0 0 2.2rem; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 2.75rem; padding: 0 1.5rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.95rem; cursor: pointer; border: none; }
.btn-accent { background: var(--accent); color: #fff; transition: background .15s; }
.btn-accent:hover { background: var(--accent-text); }
.btn-ghost-light { background: transparent; border: 1px solid rgba(255,255,255,0.35); color: #fff; transition: background .15s, border-color .15s; }
.btn-ghost-light:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); }

/* ===== Módulos ===== */
.section { padding: clamp(2.5rem, 3.6vw, 3.75rem) 0; }
.section-head { max-width: 640px; margin: 0 auto 2rem; text-align: center; }
.section-head.wide { max-width: 820px; }
.nowrap-heading { white-space: normal; }
@media (min-width: 640px) { .nowrap-heading { white-space: nowrap; } }

/* ===== Vista previa de la plataforma (recreación real del login) ===== */
.device-frame { background: #fff; border-radius: 1rem; overflow: hidden; box-shadow: 0 24px 60px rgba(7,19,33,0.22); border: 1px solid var(--border); }
.device-bar { display: flex; gap: 6px; padding: 0.65rem 0.9rem; background: #eef0f3; border-bottom: 1px solid var(--border); }
.device-dot { width: 9px; height: 9px; border-radius: 50%; background: #d4d8de; }

.login-replica { display: flex; min-height: 440px; }
@media (max-width: 760px) { .login-replica { flex-direction: column; min-height: 0; } }

.lp-dark { flex: 1 1 56%; position: relative; overflow: hidden; background: linear-gradient(145deg, #060e1a 0%, #0a1e30 60%, #0d2840 100%); padding: clamp(1.4rem, 3vw, 2.2rem); display: flex; flex-direction: column; justify-content: space-between; color: #fff; min-width: 0; }
.lp-dark canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-eyebrow { position: relative; z-index: 2; font-family: var(--font-heading); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); font-weight: 700; }
.lp-stats { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem 1rem; margin: auto 0; }
.lp-stat-num { font-family: var(--font-heading); font-weight: 800; font-size: 1.7rem; }
.lp-stat-num.muted { color: rgba(255,255,255,0.55); }
.lp-stat-num.accent { color: var(--accent); }
.lp-stat-label { font-size: 0.66rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 0.2rem; }
.lp-tagline { position: relative; z-index: 2; font-size: 0.84rem; color: rgba(255,255,255,0.68); line-height: 1.6; max-width: 30ch; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 1rem; margin-top: 1rem; }
.lp-footer { position: relative; z-index: 2; display: flex; align-items: center; gap: 0.6rem; margin-top: 1.1rem; font-size: 0.7rem; color: rgba(255,255,255,0.45); }
.lp-dots { display: flex; gap: 4px; }
.lp-dots span { width: 15px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.25); }
.lp-dots span.on { background: var(--accent); width: 24px; }

.lp-card { flex: 1 1 44%; background: #fff; padding: clamp(1.5rem, 3.5vw, 2.4rem); display: flex; flex-direction: column; justify-content: center; gap: 0.95rem; min-width: 0; }
.lp-card img { height: 32px; margin: 0 auto 0.3rem; }
.lp-card h3 { font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; margin: 0; }
.lp-card .lp-sub { color: var(--text-secondary); font-size: 0.82rem; margin: -0.55rem 0 0; }
.lp-field label { font-size: 0.74rem; font-weight: 600; display: block; margin-bottom: 0.3rem; }
.lp-field .lp-input { height: 2.2rem; border: 1px solid var(--border); border-radius: 0.375rem; background: var(--card-bg); display: flex; align-items: center; padding: 0 0.7rem; font-size: 0.8rem; color: var(--text-secondary); position: relative; }
.lp-field .lp-input svg { position: absolute; right: 0.65rem; stroke: var(--text-secondary); }
.lp-row-between { display: flex; align-items: center; justify-content: space-between; font-size: 0.76rem; }
.lp-row-between .lp-remember { display: flex; align-items: center; gap: 0.4rem; color: var(--text-secondary); }
.lp-row-between .lp-remember input { margin: 0; }
.lp-row-between a { color: var(--accent-text); font-weight: 600; }
.lp-btn { height: 2.4rem; border-radius: 0.375rem; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.86rem; }
.lp-help { text-align: center; font-size: 0.76rem; color: var(--text-secondary); }
.lp-help a { color: var(--accent-text); font-weight: 600; }

/* ===== CTA banner (full-bleed, cubre todo el ancho) ===== */
.cta-banner-section {
  background: linear-gradient(120deg, var(--primary) 0%, #0d2840 100%);
  padding: clamp(2.4rem, 3.4vw, 3.5rem) 0;
}
.cta-banner-grid {
  display: grid; grid-template-columns: 3fr 2fr; column-gap: 2.5rem;
  align-items: center; text-align: left;
}
.cta-banner-copy { grid-column: 1; max-width: 100%; }
.cta-banner-title { margin: 0 0 1.4rem; }
.cta-banner-section h2 { font-family: var(--font-heading); font-weight: 800; color: #fff; font-size: clamp(1.4rem, 1.8vw, 1.9rem); }
.cta-banner-section p { color: rgba(255,255,255,0.75); margin: 0 0 0.6rem; }
.cta-banner-section p:last-child { margin-bottom: 0; }
.cta-banner-section p strong { color: #fff; font-weight: 700; }
.cta-banner-btn { grid-column: 2; justify-self: center; display: inline-flex; align-items: center; white-space: nowrap; padding: 1.1rem 2.2rem; font-size: 1.05rem; }
@media (max-width: 760px) {
  .cta-banner-grid { grid-template-columns: 1fr; row-gap: 1.2rem; }
  .cta-banner-copy, .cta-banner-btn { grid-column: 1; }
  .cta-banner-btn { justify-self: start; }
}
.module-card .card-cta svg { stroke: currentColor; transition: transform .15s; }
.module-card .card-cta:hover svg { transform: translateX(3px); }
.eyebrow-light { font-family: var(--font-heading); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); font-weight: 700; margin-bottom: 0.7rem; }
.section-head h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.6rem, 2.1vw, 2.2rem); margin: 0 0 0.7rem; letter-spacing: -0.01em; }
.section-head p { color: var(--text-secondary); font-size: 1rem; line-height: 1.6; margin: 0; }
.section-head p + p { margin-top: 1rem; }
.section-head p strong { color: var(--text-primary); font-weight: 700; }

/* ===== Mockup de laptop para capturas reales del producto ===== */
.laptop-mockup { max-width: 960px; margin: 2.2rem auto 0; }
.laptop-screen {
  position: relative; background: #0d1620; border-radius: 16px 16px 5px 5px;
  padding: 16px 16px 12px; box-shadow: 0 30px 70px rgba(7,19,33,0.28);
}
.laptop-cam { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.22); }
.laptop-screen img { display: block; width: 100%; height: auto; border-radius: 4px; }
.laptop-base { width: 108%; margin: 0 -4%; height: 16px; background: linear-gradient(180deg, #1a2531, #0d1620); border-radius: 0 0 10px 10px; position: relative; }
.laptop-base::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 5px; background: #060e1a; border-radius: 0 0 6px 6px; }

/* ===== Evolución de la plataforma: texto + lista "próximamente" (2 columnas,
   mismo grid 1fr 1fr que .trust, versión clara porque va entre 2 secciones
   blancas) ===== */
.evolution { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 760px) { .evolution { grid-template-columns: 1fr; } }
.evolution h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.4rem, 1.8vw, 1.9rem); margin: 0.7rem 0 0.9rem; letter-spacing: -0.01em; }
.evolution p { color: var(--text-secondary); font-size: 0.98rem; line-height: 1.65; margin: 0; }
.evolution p + p { margin-top: 0.9rem; }
.evolution-list { display: flex; flex-direction: column; gap: 0.6rem; }
.evolution-item {
  display: flex; align-items: center; gap: 0.85rem;
  border: 1.5px dashed var(--border); border-radius: 0.5rem;
  padding: 0.7rem 1rem; font-size: 0.88rem; font-weight: 600; color: var(--text-primary);
  background: var(--card-bg);
}
.evolution-icon {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; color: var(--accent-text);
}
.evolution-icon svg { stroke: currentColor; }

/* Regla de construcción de card, validada en maqueta 2026-10-26 — ver
   D:\8. Desarrollo\14_diseno_ux\ para la versión documentada transversal:
   1. .module-card = la tarjeta completa (con botón), altura igual entre las 4 (grid stretch).
   2. .card-content = ícono + texto, pegado entre sí (gap chico, SIN padding propio) —
      es un solo bloque, nunca dos espaciados por separado.
   3. Ese bloque se centra vertical Y horizontalmente en el espacio disponible arriba
      del botón (flex:1 + justify-content:center + align-items:center en .card-content).
   4. El botón vive fuera de .card-content, fijo al fondo de la tarjeta. */
.module-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
@media (max-width: 980px) { .module-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .module-grid { grid-template-columns: 1fr; } }

.module-card {
  display: flex;
  flex-direction: column;
  min-height: 450px; /* da aire real arriba/abajo del bloque de contenido centrado */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,0.05);
}
.module-card .card-content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 0.9rem; }
.module-card .icon { padding: 0 1.4rem; display: flex; align-items: center; justify-content: center; }
.module-card .icon svg { stroke: var(--accent); }
.module-card .text-block { display: flex; flex-direction: column; gap: 0.5rem; }
.module-card h3 { padding: 0 1.4rem; margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 1.08rem; text-align: center; }
.module-card .tagline { padding: 0 1.4rem; margin-top: 0.3rem; color: var(--accent-text); font-weight: 600; font-size: 0.86rem; text-align: center; line-height: 1.3; }
.module-card p.body { padding: 0 1.4rem; margin: 0; color: var(--text-secondary); font-size: 0.86rem; line-height: 1.5; text-align: center; }
.module-card ul { padding: 0 1.4rem; margin: 0.6rem 0 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.module-card ul li { font-size: 0.82rem; line-height: 1.4; color: var(--text-primary); display: flex; gap: 0.5rem; align-items: flex-start; text-align: left; }
.module-card ul li svg { flex: none; stroke: var(--success); margin-top: 0.15rem; }
.module-card .card-cta { background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.7rem; font-weight: 600; font-size: 0.85rem; }
.module-card .card-cta:hover { background: var(--accent); }

/* ===== Seguridad / confianza ===== */
.trust {
  background: var(--primary);
  border-radius: 1rem;
  padding: 1.5rem clamp(2.2rem, 3.1vw, 3.2rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
@media (max-width: 760px) { .trust { grid-template-columns: 1fr; } }
.trust h2 { font-family: var(--font-heading); font-weight: 800; color: #fff; font-size: clamp(1.4rem, 1.8vw, 1.9rem); margin: 0 0 0.8rem; letter-spacing: -0.01em; }
.trust p { color: rgba(255,255,255,0.75); font-size: 0.98rem; line-height: 1.65; margin: 0; }
.trust-stat {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.16);
  padding-top: 1rem; margin-top: 1.4rem;
}
.trust-stat .num { color: var(--accent); font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
.trust-stat .label { color: rgba(255,255,255,0.68); font-size: 0.9rem; max-width: 42ch; }

/* ===== .trust apilado: texto arriba a ancho completo + organigrama debajo
   (Empresa A/B/C en fila, reemplaza la versión anterior de 2 columnas) ===== */
.trust-stacked {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(1.8rem, 2.6vw, 2.6rem) clamp(2.2rem, 3.1vw, 3.2rem);
}
.trust-rings { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.trust-stacked::before, .trust-stacked::after {
  content: ''; position: absolute; border-radius: 50%; z-index: 0; pointer-events: none;
  filter: blur(70px); mix-blend-mode: screen;
}
.trust-stacked::before {
  width: 320px; height: 320px; background: rgba(94,170,210,0.3); top: -90px; left: 6%;
  animation: trust-blob-a 15s ease-in-out infinite;
}
.trust-stacked::after {
  width: 260px; height: 260px; background: rgba(56,189,248,0.22); bottom: -90px; right: 10%;
  animation: trust-blob-b 19s ease-in-out infinite;
}
@keyframes trust-blob-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(140px, 50px); } }
@keyframes trust-blob-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-120px, -40px); } }
@media (prefers-reduced-motion: reduce) { .trust-stacked::before, .trust-stacked::after { animation: none; } }
.trust-stacked .trust-copy { position: relative; z-index: 1; max-width: 100%; text-align: left; }
.trust-stacked .trust-copy p + p { margin-top: 0.9rem; }

/* ===== Organigrama Plataforma SLI / Empresas: ramas y tarjetas viven en EL MISMO
   grid (org-tree), no en dos grids separados — así el centro de cada curva
   SIEMPRE coincide con el centro de su tarjeta, para cualquier ancho de pantalla
   (dos grids distintos con el mismo grid-template-columns pueden desalinearse
   levemente porque el gap es un valor fijo en px, no un % del ancho). ===== */
.org-diagram { display: flex; flex-direction: column; align-items: center; width: 100%; padding: clamp(2.2rem, 3.5vw, 3.2rem) 0 0.5rem; }
.org-root {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  background: var(--primary); border: 1.5px solid var(--accent); border-radius: 0.7rem;
  padding: 0.7rem 1.6rem;
}
.org-root-title { font-family: var(--font-heading); font-weight: 800; color: #fff; font-size: 0.82rem; letter-spacing: 0.03em; }
.org-root-tagline { color: var(--accent); font-weight: 600; font-size: 0.78rem; }
.org-root-stem { width: 2px; height: 28px; background: var(--border); }
.org-tree {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 48px auto;
  column-gap: 2rem; row-gap: 0;
  width: 100%;
}
/* Recorte EXACTO (no aproximado) al centro de la 1ra/3ra columna: con 3
   columnas iguales de ancho c y 2 gaps de 2rem, c = (100% - 4rem) / 3, y el
   centro de la columna de los extremos queda a c/2 del borde — calc() permite
   mezclar % y rem en una sola fórmula, así que SÍ se puede calcular exacto
   en CSS puro sin JS (a diferencia de curvas/ángulos, que si lo requieren). */
.org-bar { position: absolute; top: 0; left: calc((100% - 4rem) / 6); right: calc((100% - 4rem) / 6); height: 2px; background: var(--border); grid-column: 1 / -1; }
.org-stem { grid-row: 1; justify-self: center; position: relative; width: 2px; height: 100%; background: var(--border); }
.org-stem-a { grid-column: 1; }
.org-stem-b { grid-column: 2; }
.org-stem-c { grid-column: 3; }

/* Punto animado que recorre el trayecto completo: sale del centro (bajo
   Plataforma SLI), viaja por la barra horizontal y luego baja por su rama —
   misma fórmula exacta que .org-bar para llegar justo donde está cada línea. */
.org-flow { grid-column: 1 / -1; grid-row: 1; position: relative; }
.org-flow-dot {
  position: absolute; top: 0; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; margin-top: -3.5px;
  border-radius: 50%; background: var(--accent);
  animation-duration: 2.6s; animation-timing-function: linear; animation-iteration-count: infinite;
}
.org-flow-left { animation-name: org-flow-left; }
.org-flow-mid { animation-name: org-flow-mid; animation-delay: .5s; }
.org-flow-right { animation-name: org-flow-right; animation-delay: 1s; }
/* 3 tramos sin pausas: sale de Plataforma SLI (-28px, la altura de
   .org-root-stem) hacia la barra, viaja por la barra, y baja a la tarjeta.
   Nunca hay 2 keyframes consecutivos con el mismo valor (eso es lo que se
   siente como una pausa), y el tramo horizontal ocupa la mayor parte del
   tiempo porque es el más largo de los 3. */
@keyframes org-flow-left {
  0% { left: 50%; top: -28px; }
  12% { left: 50%; top: 0; }
  78% { left: calc((100% - 4rem) / 6); top: 0; }
  100% { left: calc((100% - 4rem) / 6); top: 100%; }
}
@keyframes org-flow-mid {
  0% { left: 50%; top: -28px; }
  12% { left: 50%; top: 0; }
  100% { left: 50%; top: 100%; }
}
@keyframes org-flow-right {
  0% { left: 50%; top: -28px; }
  12% { left: 50%; top: 0; }
  78% { left: calc(100% - (100% - 4rem) / 6); top: 0; }
  100% { left: calc(100% - (100% - 4rem) / 6); top: 100%; }
}
@media (prefers-reduced-motion: reduce) { .org-flow-dot { animation: none; } }
.org-card {
  grid-row: 2;
  display: flex; flex-direction: column; gap: 0.25rem;
  background: var(--primary); border: 1px solid rgba(255,255,255,0.14); border-radius: 0.6rem;
  padding: 0.75rem 0.9rem; text-align: center;
}
.org-card-a { grid-column: 1; }
.org-card-b { grid-column: 2; }
.org-card-c { grid-column: 3; }
.org-card-title { color: #fff; font-weight: 700; font-size: 0.86rem; }
.org-card-label { color: rgba(255,255,255,0.65); font-size: 0.74rem; line-height: 1.3; }
.org-tree-flow-dot { display: none; }
@media (max-width: 760px) {
  /* Tallo de Plataforma SLI: baja al centro y dobla a la izquierda para
     entroncar exactamente con la línea vertical (mismo eje x: 0.4rem desde
     el borde de .org-tree). */
  .org-root-stem { width: 100%; height: 28px; background: none; position: relative; }
  .org-root-stem::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
    background: var(--border); transform: translateX(-50%);
  }
  .org-root-stem::after {
    content: ''; position: absolute; bottom: 0; left: 0.4rem; right: 50%; height: 2px;
    background: var(--border);
  }

  .org-tree {
    grid-template-columns: 1fr; grid-template-rows: none; gap: 1.1rem;
    position: relative; padding-left: 1.5rem; padding-top: 0.7rem;
  }
  .org-bar, .org-stem, .org-flow { display: none; }
  .org-card { grid-row: auto; position: relative; }
  .org-card-a, .org-card-b, .org-card-c { grid-column: 1; }

  /* Tramo de línea vertical POR TARJETA (no una sola línea larga adivinando
     la altura total): cada tarjeta dibuja el tramo "desde el hueco de
     arriba" hasta "su propio borde inferior" con bottom:0 — así se ajusta
     sola a la altura real de cada una, sin importar cuánto ocupe el texto.
     Solo la última tarjeta corta el tramo justo en su punto de conexión,
     para que la línea no se pase de largo más allá de Empresa C. */
  .org-card::before {
    content: ''; position: absolute; left: calc(0.4rem - 1.5rem); transform: translateX(-50%);
    top: -1.2rem; bottom: -2px; width: 2px; background: var(--border);
  }
  .org-card-a::before { top: -0.8rem; }
  .org-card-c::before { bottom: auto; height: 2.5rem; }

  /* Línea horizontal corta desde la vertical hasta el borde de cada tarjeta */
  .org-card::after {
    content: ''; position: absolute; left: calc(0.4rem - 1.5rem); width: calc(1.5rem - 0.4rem); top: 1.3rem;
    height: 2px; background: var(--border);
  }

  /* 3 puntos viajeros, misma lógica que en escritorio: cada uno sale del
     tallo de Plataforma SLI (-28px, la altura de .org-root-stem), dobla
     hacia la línea vertical, y baja hasta la altura de SU propia empresa.
     El destino de cada uno es un % aproximado de la altura total (no hay
     forma exacta sin JS de saber la altura real de cada tarjeta, pero el
     margen de error es mínimo para un punto en movimiento). */
  .org-tree-flow-dot {
    display: block; position: absolute; left: 50%; top: -28px; transform: translate(-50%, -50%);
    width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
    animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite;
  }
  .org-tree-flow-a { animation-name: org-tree-flow-a; }
  .org-tree-flow-b { animation-name: org-tree-flow-b; animation-delay: .4s; }
  .org-tree-flow-c { animation-name: org-tree-flow-c; animation-delay: .8s; }
  @keyframes org-tree-flow-a {
    0% { left: 50%; top: -28px; }
    15% { left: 50%; top: 0; }
    30% { left: 0.4rem; top: 0; }
    70% { left: 0.4rem; top: var(--flow-a-y, 15%); }
    100% { left: 1.5rem; top: var(--flow-a-y, 15%); }
  }
  @keyframes org-tree-flow-b {
    0% { left: 50%; top: -28px; }
    15% { left: 50%; top: 0; }
    30% { left: 0.4rem; top: 0; }
    70% { left: 0.4rem; top: var(--flow-b-y, 50%); }
    100% { left: 1.5rem; top: var(--flow-b-y, 50%); }
  }
  @keyframes org-tree-flow-c {
    0% { left: 50%; top: -28px; }
    15% { left: 50%; top: 0; }
    30% { left: 0.4rem; top: 0; }
    70% { left: 0.4rem; top: var(--flow-c-y, 83%); }
    100% { left: 1.5rem; top: var(--flow-c-y, 83%); }
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .org-tree-flow-dot { animation: none; } }
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .org-node-dot { animation: none; } }
/* ===== Contacto ===== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-copy { display: flex; flex-direction: column; align-items: flex-start; }
.contact-copy .contact-icon { margin-bottom: 1.1rem; }
.contact-copy h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.5rem, 1.9vw, 2rem); margin: 0 0 0.8rem; }
.contact-copy p { color: var(--text-secondary); line-height: 1.6; max-width: 42ch; }
.contact-form { background: var(--card-bg); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem; }
.field label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--text-primary); }
.field input, .field textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 0.375rem; background: #fff;
  padding: 0.55rem 0.75rem; font-size: 0.9rem; font-family: var(--font-body); color: var(--text-primary);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(74,156,199,0.18); }
.contact-form .btn-accent { align-self: flex-start; }
.form-note { font-size: 0.82rem; }
.form-note.ok { color: var(--success); font-weight: 600; }
.form-note.error { color: #DC2626; font-weight: 600; }

/* Honeypot anti-spam: oculto visualmente (no display:none/type=hidden, para que los
   bots que sí rellenan campos "ocultos" caigan igual) e inaccesible por teclado/lector
   de pantalla para no confundir a una persona real. */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ===== Footer ===== */
footer.site { background: var(--primary); color: rgba(255,255,255,0.7); padding: 2.5rem 0; margin-top: 2rem; }
footer.site .foot-row { display: grid; grid-template-columns: 1fr auto; column-gap: 1.2rem; row-gap: 1.4rem; align-items: center; }
footer.site .brand-line { grid-row: 1; grid-column: 1; display: flex; align-items: center; }
footer.site .brand-line img { height: 48px; width: auto; }
footer.site .legal-links { grid-row: 1; grid-column: 2; display: flex; gap: 1.4rem; font-size: 0.82rem; }
footer.site .legal-links .link-btn:hover { color: #fff; }
footer.site .copy { grid-row: 2; grid-column: 1 / -1; text-align: center; font-size: 0.76rem; color: rgba(255,255,255,0.45); }
@media (max-width: 620px) {
  footer.site .foot-row { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  footer.site .brand-line, footer.site .legal-links { grid-column: 1; }
  footer.site .legal-links { grid-row: 2; flex-wrap: wrap; justify-content: center; }
  footer.site .copy { grid-row: 3; }
}

.link-btn { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; }

/* ===== Modal flotante (Privacidad / Términos / Seguridad) ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(6,10,16,0.55); display: none; align-items: center; justify-content: center; padding: 1.25rem; z-index: 100; }
.modal-overlay.open { display: flex; }
.modal-box { background: #fff; border-radius: 1rem; max-width: 640px; width: 100%; max-height: 82vh; display: flex; flex-direction: column; box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--border); flex: none; }
.modal-head h3 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; }
.modal-close { background: var(--card-bg); border: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); flex: none; }
.modal-close:hover { background: var(--border); color: var(--text-primary); }
.modal-close svg { stroke: currentColor; }
.modal-body { padding: 1.2rem 1.4rem 1.6rem; overflow-y: auto; font-size: 0.88rem; line-height: 1.65; color: var(--text-secondary); }
.modal-body h4 { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: var(--text-primary); margin: 1.2rem 0 0.4rem; }
.modal-body h4:first-child { margin-top: 0; }
.modal-body ul { margin: 0.4rem 0; padding-left: 1.2rem; }
.modal-body li { margin-bottom: 0.3rem; }
.modal-body strong { color: var(--text-primary); }
body.modal-lock { overflow: hidden; }


.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }