/* ============================================================
   v2-shell.css — SOLO el shell v2 (nav + menú móvil + footer teal)
   para páginas cuyo CONTENIDO sigue siendo legacy (artículos del blog).
   Sin selectores de elemento globales: no toca el contenido.
   Fuente de verdad: v2.css / DESIGN.md. Generado en F6 del rollout.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Montserrat:wght@300;400;500;600;700&display=swap');
/* Fondo también en html (mismo motivo que v2.css: Safari iOS y el lienzo) */
html{scroll-behavior:smooth;scrollbar-gutter:stable;background:var(--paper)}
:root{
  /* color */
  --paper:#FFF8E7;          /* Cosmic Latte · Pantone 9060 C — uniforme en toda la web */
  --ink:#111111;
  --ink-soft:#111111a8;
  --paper-on-ink:#FFF8E7;
  --paper-on-ink-dim:#FFF8E7b0;
  --teal:#23727a;           /* teal de TEXTO — 5.28:1 sobre latte, cumple AA */
  --teal-b:#47AAB4;         /* teal vivo histórico — RESERVADO, sin uso en la web */
  --line:#1111112b;
  --rule:#111111;
  /* type */
  --font-sans:'Montserrat',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  /* space */
  --sp-1:.5rem;--sp-2:1rem;--sp-3:1.5rem;--sp-4:2.5rem;--sp-5:4rem;--sp-6:7rem;
  /* motion */
  --ease-out:cubic-bezier(.2,.8,.2,1);
}

.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(1.25rem,5vw,4rem)}
/* ================= NAV ================= */
/* Nav con latte SÓLIDO (sin translucidez ni blur): Safari 26 muestrea el
   background-color del elemento fixed del borde para teñir sus barras y con
   fondos translúcidos el resultado es impredecible (salían blancas) */
nav.main{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line)}
nav.main .nav-content{display:flex;justify-content:space-between;align-items:center;height:80px}
.nav-logo img{height:4rem;width:auto;display:block}
.navlinks{display:flex;align-items:center}
.navlinks a{font-family:var(--font-sans);color:var(--ink);text-decoration:none;padding:.75rem;font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition:color .3s,transform .3s}
.navlinks a:hover{color:var(--teal);transform:translateY(-2px)}
.navlinks a.active{color:var(--teal)}
.navlinks a.hot{color:var(--teal);font-weight:700}
.menu-toggle{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:.4rem}
@media(max-width:980px){.navlinks{display:none}.menu-toggle{display:block}}
.mobile-menu{position:fixed;inset:0;z-index:70;background:var(--paper);display:none;flex-direction:column;padding:1.5rem}
.mobile-menu.active{display:flex}
.mm-head{display:flex;justify-content:space-between;align-items:center;height:80px}
.mm-head img{height:4rem;width:auto}
.mm-close{background:none;border:none;color:var(--ink);cursor:pointer}
.mm-nav{display:flex;flex-direction:column;gap:1.2rem;margin-top:2.5rem}
.mm-nav a{font-family:var(--font-sans);color:var(--ink);text-decoration:none;font-size:1.3rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.mm-nav a.hot{color:var(--teal)}
.mm-foot{margin-top:auto;font-size:.75rem;color:var(--ink-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.mm-foot a{color:var(--ink);text-decoration:none}

/* ================= FOOTER (única superficie de color) ================= */
footer.v2{background:var(--teal);color:var(--paper-on-ink);padding:var(--sp-5) 0 var(--sp-4);margin-top:var(--sp-6)}
footer.v2 .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-4)}
footer.v2 .fh{font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:lowercase;color:var(--paper-on-ink);margin-bottom:.9rem}
footer.v2 .fh::before{content:"// "}
footer.v2 p,footer.v2 address{color:#FFF8E7f2;font-weight:400;font-size:.85rem;line-height:2;font-style:normal}
footer.v2 a{color:var(--paper-on-ink);text-decoration:none;transition:color .3s}
footer.v2 a:hover{color:#ffffff;text-decoration:underline}
footer.v2 .fsocial a{display:inline-flex;align-items:center;gap:.5rem;margin-right:1.2rem}
footer.v2 .fbottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:var(--sp-5);padding-top:var(--sp-3);border-top:1px solid #FFF8E73d;font-size:.8rem;color:#FFF8E7f2;font-weight:400}

nav.main a:focus-visible,footer.v2 a:focus-visible,.menu-toggle:focus-visible,.mm-close:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
/* el body legacy es oscuro: asegurar que el nav fijo no herede transparencia rara */
nav.main{background:var(--paper)}
/* En móvil, el N.I.T. baja a su propia línea (pedido de JM) */
@media(max-width:640px){
  footer.v2 .fbottom .nit{display:block}
  footer.v2 .fbottom .nit-sep{display:none}
}
.mm-foot .nit{display:block}
.mm-foot .nit-sep{display:none}
/* Salto de línea solo-móvil del pie ("hecho en Santa Marta / con criterio
   humano + IA") — mismas reglas que v2.css; faltaban en el shell y el pie
   de los artículos rompía en dos líneas también en escritorio */
.br-movil{display:none}
@media(max-width:767px){.br-movil{display:inline}}