/* ═══════════════════════════════════════════════════════════
   APEX PUBLIC — Nav público, botones, footer
   Cargado en páginas públicas (home, login, registro, legales)
   ═══════════════════════════════════════════════════════════ */

/* ══ NAV PÚBLICO ══ */
.nav{display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top,0px) 48px 0;height:calc(60px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(10,30,38,.97);backdrop-filter:blur(14px);z-index:100}
.logo{font-family:var(--font-display);font-weight:900;font-size:26px;letter-spacing:.01em;color:var(--text);display:inline-flex;align-items:center;gap:0;line-height:1}
.logo-apex-text{display:inline-flex;align-items:center;line-height:1}
.logo-apex-text .lx{color:var(--accent)}
.logo-academy-wrap{display:flex;flex-direction:column;justify-content:center;padding-left:8px;border-left:2px solid var(--accent);margin-left:8px;height:22px}
.logo-academy{font-family:var(--font-display);font-weight:600;font-size:10px;letter-spacing:.22em;color:var(--gray);line-height:1;text-transform:uppercase}
.nav-right{display:flex;align-items:center;gap:10px}

/* ══ BOTONES PÚBLICOS ══ */
.btn-academia{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);background:var(--bg3);border:1px solid var(--border2);padding:8px 16px;border-radius:2px;transition:border-color .15s,color .15s}
.btn-academia:hover{border-color:var(--accent-bd);color:var(--accent)}
.btn-accent{background:var(--accent);color:var(--accent-t);font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:10px 22px;border-radius:2px;border:none;transition:filter .15s,transform .1s;display:inline-flex;align-items:center;gap:8px}
.btn-accent:hover{filter:brightness(1.08);transform:translateY(-1px)}
a.btn-accent{color:var(--accent-t) !important;text-decoration:none !important}
.btn-outline{font-size:13px;font-weight:500;color:var(--gray);border:1px solid var(--border2);padding:10px 22px;border-radius:2px;background:transparent;transition:border-color .15s,color .15s}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}

/* ══ FOOTER ══ */
.footer-main{background:var(--bg-deeper);border-top:1px solid var(--border);padding:60px 48px 36px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-logo{font-family:var(--font-display);font-weight:900;font-size:20px;color:var(--text);letter-spacing:.04em;margin-bottom:12px;display:flex;align-items:center;gap:5px}
.footer-tagline{font-size:13px;color:var(--gray);line-height:1.65;max-width:240px;margin-bottom:20px}
.social-links{display:flex;gap:8px;flex-wrap:wrap}
.social-btn{display:flex;align-items:center;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text);background:var(--bg3);border:1px solid var(--border);padding:8px 12px;border-radius:2px;transition:border-color .15s,color .15s;text-decoration:none}
.social-btn:hover{border-color:var(--accent-bd);color:var(--accent)}
.footer-col-title{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray2);margin-bottom:16px}
.footer-links-list{display:flex;flex-direction:column;gap:10px;list-style:none}
.footer-links-list a{font-size:13px;color:var(--gray);transition:color .15s}
.footer-links-list a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid var(--border);padding-top:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-bottom-copy{font-size:11px;color:var(--gray2);font-family:var(--font-mono);letter-spacing:.04em}

/* ══ LEGAL CONTENT ══ */
.legal-wrap{max-width:820px;margin:0 auto;padding:64px 24px 96px}
.legal-eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.legal-h1{font-family:var(--font-display);font-size:52px;font-weight:900;line-height:1;letter-spacing:-.01em;margin:0 0 16px;color:var(--text);text-transform:uppercase}
.legal-meta{font-family:var(--font-mono);font-size:11px;color:var(--gray);letter-spacing:.06em;padding-bottom:24px;border-bottom:1px solid var(--border-acc);margin-bottom:40px}
.legal-toc{background:var(--bg2);border:1px solid var(--border-acc);border-radius:6px;padding:22px 26px;margin-bottom:48px}
.legal-toc-label{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);margin-bottom:12px}
.legal-toc ol{margin:0;padding-left:20px;font-size:14px;line-height:1.9}
.legal-toc a{color:var(--gray);transition:color .15s}
.legal-toc a:hover{color:var(--accent)}
h2.legal-h2{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:52px 0 16px;padding-top:8px}
h3.legal-h3{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--text);margin:28px 0 10px}
.legal-wrap p{font-size:15px;line-height:1.75;color:var(--text);margin-bottom:16px}
.legal-wrap ul,.legal-wrap ol{margin:0 0 18px;padding-left:22px}
.legal-wrap li{font-size:15px;line-height:1.75;color:var(--text);margin-bottom:8px}
.legal-wrap strong{color:var(--accent);font-weight:700}
.legal-wrap a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.legal-card{background:var(--bg2);border:1px solid var(--border-acc);border-radius:6px;padding:28px;margin:24px 0;display:grid;grid-template-columns:1fr 1fr;gap:0}
.legal-card-row{padding:14px 0;border-bottom:1px solid var(--border-acc);display:contents}
.legal-card-label{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--gray);padding:14px 16px 14px 0;border-bottom:1px solid var(--border-acc);display:flex;align-items:center}
.legal-card-value{font-size:15px;font-weight:600;color:var(--text);padding:14px 0;border-bottom:1px solid var(--border-acc);display:flex;align-items:center}
.legal-card-label:last-of-type,.legal-card-value:last-of-type{border-bottom:none}
.legal-callout{background:var(--bg2);border-left:3px solid var(--accent);padding:18px 22px;margin:24px 0;border-radius:0 6px 6px 0}
.legal-callout p:last-child{margin:0}
.legal-warn{background:var(--red-bg);border-left:3px solid var(--red);padding:18px 22px;margin:24px 0;border-radius:0 6px 6px 0}
.legal-warn-label{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.legal-warn p:last-child{margin:0}

/* ══ RESPONSIVE PÚBLICO ══ */
/* 2026-09-02 — Sergio: "no quiero dos filas, quiero APEX FLOW al lado de
   AYUDA al lado de LEGALES" (y "lo mismo en la app y en la web", "version
   celular" = confirmado que tambien vale para el ancho real de un telefono).
   Antes, .footer-grid quedaba en 1fr 1fr (2 columnas) con 4 hijos —logo +
   3 columnas de links— y el cuarto se caia a una segunda fila. Con logo
   ocupando la fila entera (grid-column:1/-1) y las 3 columnas de links
   compartiendo la fila de abajo, entran las 3 juntas sin importar si son
   4, 5 columnas de contenido (Academia visible agrega una) o 3 (Flow). */
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr 1fr;gap:28px}
  .footer-grid > div:first-child{grid-column:1 / -1}
  .legal-h1{font-size:38px}
  .legal-card{grid-template-columns:1fr}
}
@media(max-width:600px){
  .footer-grid{grid-template-columns:1fr 1fr 1fr;gap:20px}
  .footer-grid > div:first-child{grid-column:1 / -1}
  .nav{padding:env(safe-area-inset-top,0px) 20px 0}
  .footer-main{padding:40px 20px 28px}
  .legal-wrap{padding:40px 20px 64px}
  .legal-h1{font-size:32px}
  .btn-accent{display:none}
}

/* 2026-09-02 — ÁREA SEGURA SUPERIOR EN .nav
   Se vio en el iPhone de Sergio, dentro de la app: el logo "APEX" de la portada
   quedaba PISADO por el reloj de la barra de estado. La causa: .nav es
   position:sticky con top:0, y en un WebView a pantalla completa el top real es
   el borde del vidrio, donde vive la barra de estado. En Safari no se notaba
   porque el navegador pone su propia barra arriba.
   Se aplicó el MISMO patrón que ya usaban las pantallas que sí funcionaban
   (apex-shell-nav.css:344 y apex-pwa.css:22): padding-top + height con calc().
   env(safe-area-inset-top) vale 0 en un navegador de escritorio, así que en la
   web no cambia absolutamente nada; solo empuja dentro de la app. */