/* ════════════════════════════════════════════════════════════════════════════
   ORBITALL — estilos compartidos de las páginas que NO son de la web nueva
   (blog, Centro de Ayuda, baja de correos, solicitar demo).

   Replica el diseño de la web nueva (Pagina_Web/nueva_pagina): mismos tokens de
   color, misma tipografía Inter, mismo encabezado y pie. Si cambias el diseño de
   la web nueva, actualiza también este archivo para que todo el sitio se vea igual.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;
  --background: #FFFFFF; --foreground: #0F172A; --primary: #0066CC;
  --brand-cyan: #00CCFF; --brand-blue: #0066CC; --brand-violet: #818CF8;
  --secondary: #EDF7FF; --muted: #F7FAFC; --muted-foreground: #475569; --text-dim: #64748B;
  --border: #E2E8F0; --card: #FFFFFF; --warning: #F59E0B; --success: #10B981;
  --gradient-brand: linear-gradient(135deg, var(--brand-cyan), var(--brand-blue));
  --gradient-title: linear-gradient(135deg, var(--brand-blue), color-mix(in srgb, var(--brand-violet) 70%, var(--brand-blue)));
  --shadow-float: 0 8px 30px color-mix(in srgb, var(--primary) 14%, transparent);
  --shadow-tech: 0 8px 26px color-mix(in oklch, var(--primary) 13%, transparent);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ── Encabezado (idéntico al de la web nueva) ── */
.site-header { position: sticky; top: 0; z-index: 40; height: 86px; border-bottom: 1px solid var(--border); background: color-mix(in oklch, var(--background) 94%, transparent); backdrop-filter: blur(18px); }
.header-inner { max-width: 1280px; height: 100%; margin: auto; padding: 0 38px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.wordmark { display: flex; align-items: center; }
.wordmark img { display: block; width: 124px; height: 76px; object-fit: contain; }
.desktop-nav { display: flex; gap: 30px; align-items: center; font-size: 13px; color: var(--muted-foreground); }
.desktop-nav a { position: relative; transition: color .2s; }
.desktop-nav a::after { content: ''; position: absolute; bottom: -12px; left: 0; width: 100%; height: 2px; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.desktop-nav a:hover, .desktop-nav a.activo { color: var(--primary); }
.desktop-nav a:hover::after, .desktop-nav a.activo::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 16px; }

.btn-brand { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 12px; background: var(--gradient-brand); color: #020617; font-weight: 700; font-size: 14px; box-shadow: var(--shadow-float); transition: filter .15s; white-space: nowrap; }
.btn-brand:hover { filter: brightness(1.1); }
.btn-brand svg, .btn-outline svg { width: 16px; height: 16px; }
.btn-outline { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--border); background: var(--background); color: var(--foreground); font-weight: 600; font-size: 14px; transition: border-color .15s, color .15s; }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }

/* Menú móvil sin JavaScript (<details>) */
.mnav { display: none; position: relative; }
.mnav summary { list-style: none; cursor: pointer; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--foreground); }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary:hover { background: var(--muted); }
.mnav nav { position: fixed; top: 72px; left: 0; right: 0; background: var(--background); padding: 20px; display: flex; flex-direction: column; gap: 18px; border-bottom: 1px solid var(--border); font-size: 15px; box-shadow: 0 16px 30px rgba(15,23,42,.06); }
.mnav nav a:hover { color: var(--primary); }

/* ── Intro de página (igual que .page-intro de la web nueva) ── */
.page-intro { border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--secondary), var(--background)); }
.page-intro .inner { max-width: 1180px; margin: auto; padding: 62px 34px 52px; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--primary); }
.page-intro h1 { font-size: 48px; font-weight: 600; line-height: 1.2; max-width: 920px; margin: 18px auto; text-wrap: balance; background: var(--gradient-title); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-intro p { margin: 0 auto; max-width: 640px; font-size: 15px; line-height: 1.8; color: var(--muted-foreground); }

/* ── Índice del blog ── */
.blog-grid { max-width: 1180px; margin: auto; padding: 56px 34px 80px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.post { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--card); transition: border-color .2s, transform .2s, box-shadow .2s; }
.post:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); transform: translateY(-3px); box-shadow: var(--shadow-tech); }
.post-img { height: 150px; display: grid; place-items: center; font-size: 46px; background: linear-gradient(135deg, var(--secondary), color-mix(in srgb, var(--brand-violet) 14%, var(--background))); border-bottom: 1px solid var(--border); }
.post-body { flex: 1; display: flex; flex-direction: column; padding: 24px; }
.post-cat { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--primary); margin-bottom: 10px; }
.post h2 { font-size: 19px; font-weight: 600; line-height: 1.35; margin: 0 0 10px; color: var(--foreground); }
.post p { flex: 1; margin: 0 0 18px; font-size: 14px; line-height: 1.7; color: var(--muted-foreground); }
.post .read { font-size: 13.5px; font-weight: 600; color: var(--primary); }

/* ── Artículo ── */
.articulo { max-width: 760px; margin: auto; padding: 44px 24px 72px; font-size: 16.5px; line-height: 1.8; }
.crumb { font-size: 13px; color: var(--text-dim); margin-bottom: 22px; }
.crumb a { color: var(--muted-foreground); }
.crumb a:hover { color: var(--primary); }
.articulo h1 { font-size: clamp(30px, 4.6vw, 42px); font-weight: 600; line-height: 1.2; margin: 0 0 16px; letter-spacing: -.01em; color: var(--foreground); }
.articulo .meta { font-size: 13.5px; color: var(--text-dim); padding-bottom: 24px; margin-bottom: 30px; border-bottom: 1px solid var(--border); }
.articulo .lead { font-size: 19px; line-height: 1.75; color: var(--foreground); margin: 0 0 28px; }
.articulo h2 { font-size: 26px; font-weight: 600; line-height: 1.3; margin: 44px 0 14px; color: var(--foreground); }
.articulo h3 { font-size: 19px; font-weight: 600; margin: 28px 0 10px; color: var(--foreground); }
.articulo p { margin: 0 0 18px; color: var(--muted-foreground); }
.articulo ul, .articulo ol { margin: 0 0 22px; padding-left: 22px; color: var(--muted-foreground); }
.articulo li { margin-bottom: 9px; }
.articulo li::marker { color: var(--primary); }
.articulo strong { color: var(--foreground); font-weight: 600; }
.articulo a:not(.btn-brand) { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.box { margin: 28px 0; padding: 18px 22px; border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 10px; background: var(--secondary); color: var(--foreground); font-size: 15.5px; }
.box b { color: var(--primary); }
.cta-final { margin: 52px 0 0; padding: 40px 30px; text-align: center; border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); border-radius: 18px; background: linear-gradient(135deg, var(--secondary), color-mix(in srgb, var(--brand-violet) 10%, var(--background))); }
.cta-final h3 { font-size: 24px; margin: 0 0 10px; }
.cta-final p { margin: 0 auto 24px; max-width: 520px; }

/* ── Pie (idéntico al de la web nueva) ── */
.footer { max-width: 1180px; margin: auto; padding: 35px 34px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 25px; border-top: 1px solid var(--border); }
.footer .wordmark img { width: 142px; height: 109px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 12px; }
.footer-nav a, .footer > a { color: var(--primary); font-size: 12px; }
.footer-nav a:hover, .footer > a:hover { text-decoration: underline; }
.footer p { width: 100%; margin: 0; font-size: 11px; color: var(--muted-foreground); order: 3; }

/* ── Botón flotante de WhatsApp (apilado sobre la burbuja del widget) ── */
.whatsapp-float { position: fixed; bottom: 92px; right: 26px; z-index: 35; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-cyan); color: #020617; box-shadow: var(--shadow-float); }
.whatsapp-float svg { width: 24px; height: 24px; }

/* ── Responsive (mismos puntos de quiebre que la web nueva) ── */
@media (max-width: 1050px) { .blog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 761px) and (max-width: 1180px) { .header-inner { padding-inline: 20px; gap: 15px; } .desktop-nav { gap: 14px; font-size: 12px; } .wordmark img { width: 110px; } .btn-brand.header-cta { padding-inline: 12px; font-size: 12px; } }
@media (min-width: 761px) and (max-width: 920px) { .desktop-nav { display: none; } .mnav { display: block; } }
@media (max-width: 760px) {
  .site-header { height: 72px; } .header-inner { padding: 0 18px; gap: 10px; }
  .wordmark img { width: 92px; height: 64px; }
  .desktop-nav, .header-cta { display: none; } .mnav { display: block; }
  .page-intro .inner { padding: 42px 22px 36px; } .page-intro h1 { font-size: 32px; }
  .blog-grid { grid-template-columns: 1fr; padding: 32px 20px 56px; gap: 18px; }
  .articulo { padding: 30px 20px 56px; font-size: 16px; }
  .articulo h2 { font-size: 23px; } .articulo .lead { font-size: 17.5px; }
  .footer { padding: 28px 22px; } .footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 18px; }
  .footer .wordmark img { width: 124px; height: 95px; }
  .whatsapp-float { width: 45px; height: 45px; bottom: 90px; right: 28px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

/* Nombre legal + NIT (verificación de empresa en Meta) */
.footer .footer-legal { width:100%; order:10; text-align:center; font-size:11px; color:var(--muted-foreground); margin:0; }