/* Base compartida del demo de Aera: tokens de marca, tipografía y la barra del demo.
   Cada página agrega sus propios estilos encima. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;600;700&family=Figtree:wght@400;500;600;700&display=swap");

:root{
  --verde:#154A3A;--verde-d:#0E3329;--verde-2:#1F5C49;--verde-c:#8FB8A2;--verde-s:#DCEBE1;
  --nieve:#F3F6EA;--papel:#FAFBF5;--blanco:#FFFFFF;--lima:#E6ECC7;--lima-a:#9DB65A;
  --frutos:#D9406F;--frutos-s:#FBE3EA;--mora:#6F84C4;--mora-s:#E6EBF7;
  --ok:#2F7A55;--ok-s:#E2F1E8;--ambar:#A86A12;--ambar-s:#FBF0DA;--rojo:#B3261E;--rojo-s:#FBE5E3;
  --txt:#13281F;--txt2:#4B5B53;--txt3:#66746C;--borde:#E1E8DA;--borde-2:#CCD8C8;
  --ml:#E8C400;--ml-s:#FFF6C7;--amz:#F08A24;--amz-s:#FDEBD8;
  --display:'Montserrat Alternates','Figtree',system-ui,sans-serif;
  --sans:'Figtree','Segoe UI',system-ui,sans-serif;
  --sombra:0 1px 0 rgba(21,74,58,.04),0 18px 40px -24px rgba(21,74,58,.30);
  --radio:16px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--txt);background:var(--papel);-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums;line-height:1.5}
img{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--lima-a);outline-offset:2px;border-radius:4px}
.num{font-variant-numeric:tabular-nums}

/* Barra del demo (la inserta comun/barra.js) */
.demo-barra{position:sticky;top:0;z-index:100;background:var(--verde-d);color:#E8F0EA;font-size:14px}
.demo-barra__in{max-width:1440px;margin:0 auto;padding:0 16px;height:48px;display:flex;align-items:center;gap:18px}
.demo-barra__marca{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;white-space:nowrap}
.demo-barra__marca img{height:22px;width:auto;filter:brightness(0) invert(1)}
.demo-barra nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.demo-barra nav::-webkit-scrollbar{display:none}
.demo-barra nav a{padding:6px 12px;border-radius:100px;text-decoration:none;color:#B9D3C4;white-space:nowrap;transition:background-color .15s,color .15s}
.demo-barra nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.demo-barra nav a[aria-current="page"]{background:var(--lima);color:var(--verde-d);font-weight:600}
.demo-barra__reloj{display:flex;align-items:center;gap:8px;white-space:nowrap;color:#B9D3C4}
.demo-barra__reloj b{color:#fff;font-variant-numeric:tabular-nums;font-weight:600}
.demo-barra__vivo{width:8px;height:8px;border-radius:50%;background:var(--lima-a);box-shadow:0 0 0 0 rgba(157,182,90,.6);animation:vivo 2s infinite}
@keyframes vivo{70%{box-shadow:0 0 0 8px rgba(157,182,90,0)}100%{box-shadow:0 0 0 0 rgba(157,182,90,0)}}
.demo-barra__aviso{background:var(--lima);color:var(--verde-d);font-size:13px;text-align:center;padding:5px 16px}
@media (max-width:760px){.demo-barra__reloj span{display:none}.demo-barra__marca span{display:none}}
@media (prefers-reduced-motion:reduce){.demo-barra__vivo{animation:none}*{scroll-behavior:auto!important}}