/* El mundo de la página: una noche en la tienda, de domingo a lunes a la mañana.
   Noche fría, una sola luz cálida, el día en papel. Una sola familia tipográfica, controles redondos. */

/* ===== Tipografía ===== */
/* Una sola familia, fina y de curvas suaves. El eje óptico la afina sola a tamaño de título. */
@font-face{font-family:'Inter';src:url(../fonts/inter-latin-opsz-normal.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';src:url(../fonts/inter-latin-ext-opsz-normal.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ===== Tokens ===== */
:root{
  /* La noche y su luz */
  --night:#0B0D10;
  --night-2:#12151B;
  --night-3:#1B2029;
  --on-night:#F2EFE8;
  --on-night-2:#BDBAB2;
  --line-night:rgba(242,239,232,.16);
  --lamp:#F4B76E;
  --lamp-ink:#1B1408;
  /* El amanecer */
  --dawn:#27313F;
  --morning:#C9D3DA;
  /* El día */
  --paper:#F3F3EF;
  --paper-2:#FBFBF8;
  --ink:#14161A;
  --ink-2:#41454D;
  --ink-3:#5E636B;
  --line:#D8D9D4;
  --lamp-deep:#8A5612;
  /* Sólo en datos */
  --gain:#1F6B52;
  --loss:#B43E2A;
  /* Forma */
  --r-s:10px;
  --r-m:14px;
  --r-l:22px;
  --r-pill:999px;
  --head:68px;
  --gutter:clamp(18px,3.4vw,48px);
  --ease:cubic-bezier(.16,1,.3,1);
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ===== Base ===== */
html{scroll-behavior:smooth;scroll-padding-top:var(--head);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--night);color:var(--on-night);font:400 1.0625rem/1.55 var(--sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
h1,h2,h3{font-family:var(--sans);font-weight:300;letter-spacing:-.028em;line-height:1.06;text-wrap:balance;margin:0}
a{color:inherit}
::selection{background:var(--lamp);color:var(--lamp-ink)}
:focus-visible{outline:2px solid var(--lamp);outline-offset:3px;border-radius:4px}
html{scrollbar-color:#3a3f48 var(--night)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Mientras se decide el idioma, el español no parpadea en inglés. */
html.i18n-wait [data-i18n]{visibility:hidden}

/* ===== El nombre =====
   Se escribe NorthAIsle: el AI estaba escondido adentro de "aisle" y queda a la vista. En los logos
   va en la luz del agente; sobre papel, en su versión oscura, porque la lámpara no se lee ahí. */
.ai{color:var(--lamp)}
.site-head.on-day .logo .ai{color:var(--lamp-deep)}

/* ===== Botones ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 24px;border:1px solid transparent;border-radius:var(--r-pill);background:var(--lamp);color:var(--lamp-ink);font:600 1rem/1 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .18s,color .18s,border-color .18s,transform .18s var(--ease)}
@media (hover:hover){.btn:hover{background:#F8C98D}}
.btn:active{transform:translateY(1px)}
.btn-small{min-height:40px;padding:0 18px;font-size:.9375rem}
.btn-ghost{background:none;border-color:currentColor;color:inherit}
@media (hover:hover){.btn-ghost:hover{background:rgba(127,127,127,.12)}}
.textlink{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}

/* ===== Encabezado ===== */
.skip{position:fixed;left:12px;top:-60px;z-index:60}
.skip:focus{top:12px}
.site-head{position:fixed;inset:0 0 auto;z-index:50;height:var(--head);display:flex;align-items:center;gap:clamp(18px,3vw,40px);padding:0 var(--gutter);color:var(--on-night);transition:background-color .3s,color .3s,box-shadow .3s}
.site-head .logo{display:inline-flex;align-items:center;gap:9px;font:600 1.125rem/1 var(--sans);letter-spacing:-.012em;text-decoration:none}
.nav{display:flex;gap:clamp(14px,2vw,26px);font-size:.9375rem;font-weight:500}
.nav a{text-decoration:none;opacity:.86}
@media (hover:hover){.nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}}
.head-end{margin-left:auto;display:flex;align-items:center;gap:14px}
.clock{font-size:.875rem;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.72}
.lang{display:flex;padding:3px;border:1px solid var(--line-night);border-radius:var(--r-pill)}
.lang button{min-height:30px;padding:0 10px;border:0;border-radius:var(--r-pill);background:none;color:inherit;font:600 .8125rem/1 var(--sans);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--on-night);color:var(--night)}
.site-head.scrolled{background:rgba(11,13,16,.82);backdrop-filter:blur(12px)}
.site-head.on-day{color:var(--ink)}
.site-head.on-day.scrolled{background:rgba(243,243,239,.86);box-shadow:0 1px 0 var(--line)}
.site-head.on-day .lang{border-color:var(--line)}
.site-head.on-day .lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.site-head.on-day .btn{background:var(--ink);color:var(--paper)}
@media (max-width:1240px){.clock{display:none}}
@media (max-width:1120px){.nav{display:none}}
@media (max-width:430px){.head-cta{display:none}}

/* ===== Las anotaciones del agente =====
   Lo que el agente anota mientras lee: un punto de luz sobre el precio, un tallo y un rótulo de vidrio
   oscuro, siempre de frente. El vidrio tiene un motivo: la letra se apoya sobre una foto con mucho
   detalle. El rótulo entra con desenfoque, como algo que hace foco. El mismo en el pasillo y en la góndola. */
.ann{--len:40px;position:absolute;left:0;top:0;width:0;height:0;visibility:hidden;will-change:transform;transition:visibility 0s .3s}
.ann.on{visibility:visible;transition-delay:0s}
.ann-pin{position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--lamp);box-shadow:0 0 0 2px rgba(11,13,16,.55),0 0 16px 3px rgba(244,183,110,.6);transform:scale(0);transition:transform .3s var(--ease)}
.ann-pin::after{content:"";position:absolute;inset:-3px;border:1px solid var(--lamp);border-radius:50%;opacity:0}
.ann.on .ann-pin{transform:none;transition-duration:.5s}
.ann.on .ann-pin::after{animation:ann-ping 1.5s var(--ease) .05s 2 both}
@keyframes ann-ping{from{transform:scale(.6);opacity:.95}to{transform:scale(5.2);opacity:0}}
.ann-stem{position:absolute;left:-.5px;bottom:0;width:1px;height:var(--len);background:linear-gradient(to top,var(--lamp),rgba(244,183,110,.42));transform:scaleY(0);transform-origin:50% 100%;transition:transform .2s ease-in}
.ann.on .ann-stem{transform:none;transition:transform .42s var(--ease) .14s}
.ann-label{position:absolute;left:-14px;bottom:var(--len);display:grid;gap:2px;width:max-content;padding:10px 15px 11px;border:1px solid rgba(242,239,232,.15);border-radius:var(--r-m);background:rgba(13,15,19,.66);-webkit-backdrop-filter:blur(14px) saturate(1.35);backdrop-filter:blur(14px) saturate(1.35);box-shadow:inset 0 1px 0 rgba(242,239,232,.07),0 14px 30px -12px rgba(0,0,0,.75);white-space:nowrap;opacity:0;filter:blur(7px);transform:translateY(9px) scale(.97);transform-origin:14px 100%;transition:opacity .22s ease-in,filter .22s ease-in,transform .22s ease-in}
.ann.on .ann-label{opacity:1;filter:none;transform:none;transition:opacity .5s ease-out .28s,filter .55s ease-out .28s,transform .8s var(--ease) .28s}
.ann.r .ann-label{left:auto;right:-14px;text-align:right;transform-origin:calc(100% - 14px) 100%}
.ann-label b{font:500 clamp(.98rem,1.2vw,1.0625rem)/1.22 var(--sans);letter-spacing:-.012em;font-variant-numeric:tabular-nums;color:var(--on-night)}
.ann-val{margin:0;font:400 .875rem/1.3 var(--sans);font-variant-numeric:tabular-nums;color:var(--on-night)}
.ann-val em{font-style:normal;font-weight:600;color:var(--lamp)}
.ann-label small{font:400 .75rem/1.3 var(--sans);color:var(--on-night-2)}
/* Cuelga del riel: arriba quedan los productos de los que habla. */
.ann.down .ann-stem{top:0;bottom:auto;background:linear-gradient(to bottom,var(--lamp),rgba(244,183,110,.42));transform-origin:50% 0}
.ann.down .ann-label{top:var(--len);bottom:auto;left:var(--dx,-14px);transform:translateY(-9px) scale(.97);transform-origin:50% 0}
.ann.down.on .ann-label{transform:none}
@media (prefers-reduced-motion:reduce){
  .ann,.ann-pin,.ann-stem,.ann-label,.ann.on .ann-pin,.ann.on .ann-stem,.ann.on .ann-label{transition:none}
  .ann.on .ann-pin::after{animation:none}
}

/* ===== Capítulos ===== */
.ch{position:relative}

/* ===== Pie ===== */
.site-foot{background:var(--night);color:var(--on-night-2);font-size:.875rem;padding:28px var(--gutter)}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.site-foot .logo{display:inline-flex;align-items:center;gap:8px;color:var(--on-night);font-weight:600}
.foot-note{flex:1;min-width:240px}
.foot-links{display:flex;gap:16px}

/* ===== Avisos ===== */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);z-index:70;padding:12px 18px;border-radius:var(--r-pill);background:var(--lamp);color:var(--lamp-ink);font-weight:500;box-shadow:0 18px 40px -14px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}