/* ─────────────────────────────────────────────────────────────
   Loomi — hoja compartida del sitio
   Se carga ANTES del <style> propio de cada página, para que
   una página pueda sobrescribir lo que necesite (p. ej. Loomi
   Voice, que es oscura y redefine sus propios tokens).
   Paleta V2 y especificación: docs/DESIGN-SYSTEM.md §3 y §5
   ───────────────────────────────────────────────────────────── */

/* ══ 1. TOKENS ══════════════════════════════════════════════ */
:root {
  /* Color — nombres canónicos (CLAUDE.md §2) */
  --navy:      #071525;   /* titulares, footer, fondos oscuros   */
  --navy-mid:  #0C1E38;
  --navy-deep: #060E1A;
  --blue:      #004A97;   /* Loomi Cobalt — primario             */
  --blue-h:    #00366F;   /* hover del primario. OJO: es OSCURO  */
  --blue-l:    #EAF2FA;   /* fondo claro de badges y hovers      */
  --blue-pastel: #93c5fd; /* SOLO como texto sobre navy          */
  --accent:    #10B981;   /* Emerald — secundario, métricas      */
  --accent-l:  #ECFDF5;
  --accent-t:  #047857;   /* esmeralda legible como TEXTO sobre fondo claro */
  --bg:        #F6F8FC;   /* Porcelana Tech — lienzo             */
  --bg2:       #FFFFFF;   /* tarjetas, navbar, inputs            */
  --border:    #E2E8F0;
  --text:      #071525;
  --t2:        #526071;   /* párrafos y subtítulos               */
  --t3:        #5C6B7F;   /* texto terciario, notas al pie       */
  --danger:    #C53030;   /* estados de error (el #E53E3E daba 3.7:1) */
  --white:     #FFFFFF;

  /* Tipografía */
  --fh: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fb: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Motion */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast:   150ms;
  --dur-ui:     200ms;
  --dur-modal:  250ms;
  --dur-reveal: 500ms;

  /* Métricas compartidas */
  --nav-h: 80px;
  --wrap:  1280px;
  --pad:   clamp(20px, 4vw, 48px);
}

/* Alias de compatibilidad: 15 páginas nacieron con estos nombres.
   --blue-light NO es un azul claro, es el hover oscuro. Se mantienen
   apuntando al token correcto para que nada se rompa durante la
   migración; se eliminan cuando el grep de cada uno dé 0. */
:root {
  --blue-light: var(--blue-h);
  --blue-hover: var(--blue-h);
  --blue-pale:  var(--blue-l);
  --accent-pale: var(--accent-l);
  --gray-text:   var(--t2);
  --gray-subtle: var(--t3);
  --gray-light:  var(--bg);
}

/* ══ 2. BASE ════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

h1, h2, h3 { text-wrap: balance; }

/* El nav es fijo y mide 80px: sin esto, saltar a un ancla deja el objetivo
   debajo de la barra. Aplica a los enlaces internos y a cualquier índice
   o TOC que enlace secciones de la propia página. */
html { scroll-padding-top: calc(var(--nav-h) + 16px); }

/* Medida de lectura: SOLO en prosa, nunca en títulos ni contenedores */
.prose p, .prose li { max-width: 72ch; }

.container {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* Foco visible global — reemplaza el outline por defecto del navegador
   sin quitarlo nunca (WCAG 2.4.7). */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}
.nav-mobile :focus-visible,
.dark-section :focus-visible { outline-color: var(--accent); }

/* ══ 3. BOTONES ═════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--fh);
  font-size: 15px; font-weight: 700; line-height: 1;
  padding: 14px 26px; border-radius: 50px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-ui) var(--ease-out),
              border-color var(--dur-ui) var(--ease-out),
              color var(--dur-ui) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn-primary { background: var(--blue); color: var(--white); }
.btn-emerald { background: var(--accent); color: var(--navy); }  /* texto navy: sobre esmeralda el blanco da 2.5:1 */
.btn-ghost   { background: transparent; color: var(--t2); border-color: var(--border); }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--blue-h); color: var(--white); transform: translateY(-1px); }
  .btn-emerald:hover { background: #0EA271; color: var(--navy); transform: translateY(-1px); }
  .btn-ghost:hover   { border-color: var(--blue); color: var(--blue); }
}
.btn:active, .nav-cta:active, .form-submit:active { transform: scale(.97); }

/* ══ 4. NAV — idéntico en las 17 páginas ════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}
.nav-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad);
  height: var(--nav-h);
  display: flex; align-items: center; gap: 8px;
}
.nav-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; text-decoration: none; }
.nav-logo  { height: 36px; width: auto; max-width: 180px; object-fit: contain; display: block; }

.nav-links {
  display: flex; align-items: center; gap: 2px;
  margin: 0 auto; padding: 0; list-style: none;
}
.nav-links > li { position: relative; }
.nav-link {
  font-family: var(--fh);
  font-size: 13px; font-weight: 500; color: var(--t2);
  background: none; border: 0; cursor: pointer;
  text-decoration: none; padding: 9px 12px; border-radius: 6px;
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
  transition: color var(--dur-ui), background var(--dur-ui);
}
.chevron { font-size: 9px; opacity: 0.55; transition: transform var(--dur-ui) var(--ease-out); }

/* Página actual: se marca con aria-current="page" en el HTML */
.nav-links a.is-active,
.nav-links a[aria-current="page"],
.nav-links .nav-drop-btn.is-active {
  color: var(--blue); font-weight: 700; background: var(--blue-l);
}

/* ── Dropdown ── */
.dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding-top: 12px;
  opacity: 0; pointer-events: none; z-index: 200;
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.dropdown-inner {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 8px; min-width: 268px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.dropdown a {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--navy);
  background: none; text-decoration: none;
  transition: color var(--dur-ui), background var(--dur-ui);
}
/* Abierto por: hover (ratón), foco de teclado, o click (táctil, vía site.js) */
.nav-has-drop:hover > .dropdown,
.nav-has-drop:focus-within > .dropdown,
.nav-has-drop.is-open > .dropdown {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-has-drop:hover > .nav-link .chevron,
.nav-has-drop.is-open > .nav-link .chevron { transform: rotate(180deg); }

@media (hover: hover) and (pointer: fine) {
  .nav-link:hover  { color: var(--blue); background: var(--blue-l); }
  .dropdown a:hover { color: var(--blue); background: var(--blue-l); }
}
.dropdown a.is-active, .dropdown a[aria-current="page"] {
  color: var(--blue); font-weight: 700; background: var(--blue-l);
}

/* ── Acciones del nav ── */
.nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-wa {
  font-family: var(--fh);
  font-size: 13px; font-weight: 600; color: var(--t2);
  text-decoration: none; padding: 9px 16px; border-radius: 50px;
  border: 1.5px solid var(--border); white-space: nowrap;
  transition: border-color var(--dur-ui), color var(--dur-ui);
}
.nav-cta {
  background: var(--blue); color: var(--white);
  font-family: var(--fh); font-size: 13px; font-weight: 700;
  text-decoration: none; padding: 11px 20px; border-radius: 50px;
  white-space: nowrap; display: inline-block;
  transition: background var(--dur-ui), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav-wa:hover  { border-color: var(--accent); color: var(--navy); }
  .nav-cta:hover { background: var(--blue-h); color: var(--white); transform: translateY(-1px); }
}

/* ── Botón hamburguesa ── */
.nav-toggle {
  display: none;
  width: 44px; height: 44px; flex-shrink: 0;
  align-items: center; justify-content: center;
  margin-left: auto;
  background: none; border: 1.5px solid var(--border); border-radius: 10px;
  color: var(--navy); cursor: pointer;
  transition: border-color var(--dur-ui), background var(--dur-ui);
}
.nav-toggle svg { width: 22px; height: 22px; display: block; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ── Panel móvil ── */
.nav-mobile {
  position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
  z-index: 999;
  background: var(--bg2);
  padding: 8px var(--pad) 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.nav-mobile[hidden] { display: none; }
.nav-mobile-group + .nav-mobile-group { border-top: 1px solid var(--border); }
.nav-mobile-title {
  font-family: var(--fh);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--t3); padding: 20px 0 8px; margin: 0;
}
.nav-mobile a {
  display: block; padding: 13px 12px; margin: 0 -12px; border-radius: 10px;
  font-family: var(--fh); font-size: 16px; font-weight: 600;
  color: var(--navy); text-decoration: none;
  min-height: 44px;
}
.nav-mobile a.is-sub { font-size: 15px; font-weight: 500; color: var(--t2); }
.nav-mobile a.is-active, .nav-mobile a[aria-current="page"] {
  color: var(--blue); font-weight: 700; background: var(--blue-l);
}
.nav-mobile-actions {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 10px; padding-top: 24px; margin-top: 20px;
  border-top: 1px solid var(--border);
}
.nav-mobile-actions .btn { width: 100%; font-size: 15px; padding: 15px 20px; }

/* Bloquea el scroll del documento con el panel abierto */
body.nav-open { overflow: hidden; }

/* ── Punto de quiebre único del nav: 960px (antes había 5 distintos) ── */
@media (max-width: 960px) {
  .nav-links, .nav-actions { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (min-width: 961px) {
  .nav-mobile { display: none !important; }
}
/* Entre 961 y 1140 no cabe el par WhatsApp + CTA: el CTA manda.
   WhatsApp sigue disponible en el botón flotante y en el footer. */
@media (max-width: 1140px) and (min-width: 961px) {
  .nav-wa { display: none; }
}

/* ══ 5. MOTION ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══ 6. FOOTER ÚNICO (idéntico en las 17 páginas) ══════════ */
.site-footer {
  background: #F6F8FC;
  border-top: 1px solid #E2E8F0;
  padding: 64px 0 28px;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: #526071;
  text-align: left;
}
.site-footer .foot-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
.site-footer .foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px);
  margin-bottom: 44px;
}
.site-footer .foot-col, .site-footer .foot-brand {
  position: static; inset: auto; z-index: auto; float: none;
  width: auto; height: auto; background: none; border: 0; box-shadow: none;
}
.site-footer .foot-brand-logo { display: inline-block; margin-bottom: 14px; }
.site-footer .foot-brand-logo img { height: 32px; width: auto; display: block; }
.site-footer .foot-desc {
  font-size: 14px; line-height: 1.65; color: #526071;
  margin: 0 0 20px; max-width: 30ch;
}
.site-footer .foot-cta {
  display: inline-block; font-size: 13.5px; font-weight: 700;
  color: #ffffff; background: #004A97; text-decoration: none;
  padding: 11px 20px; border-radius: 50px;
  transition: background 0.2s;
}
.site-footer .foot-cta:hover { background: #00366F; color: #ffffff; }
.site-footer .foot-col-t {
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: #071525;
  margin: 0 0 14px;
}
.site-footer .foot-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.site-footer .foot-links a {
  font-size: 13.5px; line-height: 1.45; color: #526071;
  text-decoration: none; transition: color 0.15s;
}
.site-footer .foot-links a:hover { color: #004A97; }
.site-footer .foot-bottom {
  border-top: 1px solid #E2E8F0; padding-top: 22px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
.site-footer .foot-copy { font-size: 13px; color: #526071; margin: 0; }
.site-footer .foot-soc { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer .foot-soc a {
  font-size: 13px; color: #526071; text-decoration: none; transition: color 0.15s;
}
.site-footer .foot-soc a:hover { color: #004A97; }
.site-footer :focus-visible { outline: 2px solid #004A97; outline-offset: 2px; border-radius: 4px; }

@media (max-width: 1024px) {
  .site-footer .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer .foot-brand { grid-column: 1 / -1; }
  .site-footer .foot-desc { max-width: 46ch; }
}
@media (max-width: 768px) {
  .site-footer { padding: 48px 0 24px; }
  .site-footer .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-footer * { transition: none !important; }
}

/* ── Estado de envío de formularios (site.js §4) ─────────────
   Lo crea loomiSubmit; data-kind="ok" | "error". */
.form-status {
  margin-top: 14px;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.5;
}
.form-status[data-kind="ok"]    { color: var(--accent-t); }
.form-status[data-kind="error"] { color: var(--danger); }

/* ── ESCALA TIPOGRÁFICA ÚNICA (B3 T6) ─────────────────────────
   Base para las 17 páginas; los estilos de página pueden afinar,
   pero la familia es una sola: Plus Jakarta Sans. */
body { font-family: var(--fb); }
h1 { font-family: var(--fh); font-size: clamp(2.4rem, 4.2vw, 3.6rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-family: var(--fh); font-size: clamp(1.8rem, 2.8vw, 2.5rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; }
h3 { font-family: var(--fh); font-size: 1.125rem; font-weight: 700; line-height: 1.3; }

/* Táctil: áreas de toque amplias en los enlaces del footer (B3 T8) */
@media (pointer: coarse) {
  .site-footer .foot-links { gap: 0; }
  .site-footer .foot-links a { display: inline-block; padding: 11px 0; }
}

/* Táctil: los hover con transform no aplican sin puntero fino (B3 T7) */
@media (hover: none), (pointer: coarse) {
  a:hover, button:hover { transform: none !important; }
}