/* nomster Design System (Warm) + estilos del sitio */
/* tokens/colors.css */
/* nomster · color tokens
   Three layers: primitives (raw) → semantic (meaning) → theme (resolution).
   Components consume ONLY semantic tokens, never a hex.
   :root = theme-01 Nomster Warm (default). [data-theme] scopes reassign. */

:root {
  /* ── Brand primitives ──────────────────────── */
  --mint-400: #7DCCA0;
  --green-600: #026438;
  --green-800: #004A2A;
  --paper-50: #F4EFE6;
  --sand-200: #E9DDC7;
  --amber-400: #FFC857;
  --clay-500: #B24C3B;

  /* ── Color scales ──────────────────────────── */
  /* Brand green scale — verdadero verde de marca, saturado y profundo.
     Ancla de marca en green-600 (#026438). */
  --green-50: #EAF6F0;
  --green-100: #D0EBDF;
  --green-200: #A3D6BD;
  --green-300: #6AB98D;
  --green-400: #3C9A68;
  --green-500: #0B7A48;
  --green-700: #005831;
  --green-900: #00341D;
  --green-950: #002816;

  /* Mint scale — tonal ramp, accent en mint-400 (#7DCCA0). */
  --mint-50: #EEF7F1;
  --mint-100: #E3F3EA;
  --mint-200: #CCEBDB;
  --mint-300: #A7DCC0;
  --mint-500: #5DAA87;
  --mint-600: #3C9A63;
  --mint-700: #2E7A4E;
  --mint-800: #235E3D;

  /* Neutral scale — ink (texto) → paper (app) → white (card). */
  --ink-900: #1C231F;
  --ink-500: #67716A;
  --ink-300: #B6BEB8;
  --ink-200: #E4E8E3;
  --paper-100: #F7F8F5;
  --white: #FFFFFF;

  /* ── Semantic · theme-01 Nomster Warm ──────── */
  --surface-primary: #F4EFE6;
  --surface-secondary: #E9DDC7;
  --surface-elevated: #FBF8F1;
  --surface-card: #FFFFFF;
  --text-primary: #1E1B17;
  --text-secondary: rgba(30, 27, 23, 0.64);
  --text-on-action: #F4EFE6;
  --border-default: rgba(30, 27, 23, 0.12);
  --border-strong: rgba(30, 27, 23, 0.20);
  --action-primary: #026438;
  --action-primary-hover: #005831;
  --success: #026438;
  --warning: #E6A93C;
  --error: #B24C3B;
  --info-soft: #3F7191;

  /* ── Domain · functional areas (constant, level 2) ── */
  --domain-planning: #026438;
  --domain-shopping: #C79A2E;
  --domain-nutrition: #5FA875;
  --domain-family: #B24C3B;

  /* ── Intelligence · exceptional accent (level 3) ── */
  --intel-memory: #7E6E92;
  --intel-prediction: #3E8C8C;
  --intel-learning: #5E8F7A;
  --intel-decision: #9A6E3A;
}

/* theme-02 · Nomster Light — clean, precise, Apple-like */
[data-theme="light"] {
  --surface-primary: #F7F7F5;
  --surface-secondary: #EDEDEA;
  --surface-elevated: #FFFFFF;
  --surface-card: #FFFFFF;
  --text-primary: #1C1C1C;
  --text-secondary: #5A5A5A;
  --text-on-action: #FFFFFF;
  --border-default: #E4E4E1;
  --border-strong: #D2D2CE;
  --action-primary: #026438;
  --action-primary-hover: #005831;
  --success: #2E8B57;
  --warning: #E6A93C;
  --error: #C0492F;
  --info-soft: #3F7191;
}

/* theme-03 · Nomster Dark — designed, not inverted.
   No pure black (#121212), no pure white text (#F5F5F5),
   elevation by lighter surface not shadow. */
[data-theme="dark"] {
  --surface-primary: #121212;
  --surface-secondary: #1A1A1A;
  --surface-elevated: #242424;
  --surface-card: #1E1E1E;
  --text-primary: #F5F5F5;
  --text-secondary: #B5B5B5;
  --text-on-action: #10231A;
  --border-default: #2E2E2E;
  --border-strong: #3C3C3C;
  --action-primary: #5DAA87; /* mint-500 — validado: calma sobre brillo; AA 6.8:1 fondo / 6.2:1 texto */
  --action-primary-hover: #7DCCA0; /* mint-400 — el hover aclara, como en Warm */
  --success: #7DCCA0;
  --warning: #FFD37A;
  --error: #E07A63;
  --info-soft: #7FB0CC;

  --domain-planning: #5DAA87;
  --domain-shopping: #FFC857;
  --domain-nutrition: #8FD9A8;
  --domain-family: #E07A63;

  --intel-memory: #A99BBE;
  --intel-prediction: #6FBEBE;
  --intel-learning: #8FBCA9;
  --intel-decision: #C79A5E;
}

/* tokens/typography.css */
/* nomster · typography tokens
   "Poppins para respirar. Inter para leer."
   Poppins (200/300) only for display + headings, never < 18px.
   Inter for all reading text, never > 21px. Never product text < 12px. */

:root {
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Weights */
  --fw-display: 200; /* @kind font */
  --fw-heading: 300; /* @kind font */
  --fw-title: 500; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* Type scale (px) */
  --fs-display-xl: 88px;
  --fs-display: 56px;
  --fs-h1: 46px;
  --fs-h2: 34px;
  --fs-h3: 27px;
  --fs-title: 21px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-overline: 11px;

  /* Line heights — smaller size, more air */
  --lh-display: 1.05; /* @kind font */
  --lh-heading: 1.12; /* @kind font */
  --lh-title: 1.2; /* @kind font */
  --lh-body: 1.55; /* @kind font */
  --lh-body-relaxed: 1.6; /* @kind font */

  /* Tracking */
  --tracking-display: -0.025em; /* @kind font */
  --tracking-overline: 0.16em; /* @kind font */
}

/* tokens/spacing.css */
/* nomster · spacing & layout tokens · base-4 grid.
   "El espacio es diseño. Ante la duda, más espacio." */

:root {
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;

  /* Layout (mobile-first) */
  --margin-screen: 20px;  /* fixed lateral gutter */
  --gap-section: 32px;    /* between blocks */
  --gap-card: 12px;       /* inside a card */
  --touch-min: 44px;      /* min tap target */
  --touch-gap: 8px;       /* min gap between targets */

  /* Radii */
  --radius-sharp: 0px;
  --radius-card: 10px;
  --radius-sheet: 16px;
  --radius-pill: 999px;

  /* Breakpoints (reference values) */
  --bp-phone: 430px; /* @kind other */
  --bp-tablet: 768px; /* @kind other */
  --bp-desktop: 1024px; /* @kind other */

  /* Icon grid */
  --icon-sm: 20px; /* @kind spacing */
  --icon-md: 24px; /* @kind spacing */
  --icon-lg: 32px; /* @kind spacing */
  --icon-stroke: 1.75px; /* @kind spacing */
}

/* tokens/effects.css */
/* nomster · effects tokens — borders, elevation, opacity, motion, z.
   "Esquinas suaves, sombras casi imperceptibles. La profundidad susurra." */

:root {
  /* Borders */
  --border-width: 1px; /* @kind other */
  --border-focus-width: 2px; /* @kind other */
  --border-focus: 2px solid var(--action-primary); /* @kind other */

  /* Elevation — soft, diffuse, never hard. Dark theme prefers surface over shadow. */
  --elev-0: none;
  --elev-1: 0 2px 6px rgba(30, 27, 23, 0.06);
  --elev-2: 0 10px 30px rgba(30, 27, 23, 0.12);
  --elev-3: 0 20px 60px rgba(30, 27, 23, 0.20);

  /* Opacity (semantic) */
  --opacity-muted: 0.64; /* @kind other */
  --opacity-subtle: 0.45; /* @kind other */
  --opacity-disabled: 0.38; /* @kind other */
  --scrim-modal: rgba(30, 27, 23, 0.55); /* @kind other */

  /* Motion — explains, never decorates. Honour prefers-reduced-motion. */
  --dur-instant: 0ms; /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
  --dur-slower: 480ms; /* @kind other */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-decelerate: cubic-bezier(0, 0, 0, 1); /* @kind other */
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1); /* @kind other */

  /* Z-index */
  --z-base: 0; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-overlay: 1000; /* @kind other */
  --z-modal: 1100; /* @kind other */
  --z-toast: 1200; /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms; /* @kind other */
    --dur-base: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
    --dur-slower: 0ms; /* @kind other */
  }
}

/* tokens/base.css */
/* nomster · base resets + defaults driven by tokens.
   Applied wherever styles.css is linked so specimen cards & kits inherit. */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--surface-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--action-primary); text-decoration: none; }
a:hover { color: var(--text-primary); }


/* ───────────────────────── nomster.es · hoja de estilos del sitio ─────────────────────────
   Usa solo tokens del nomster Design System (arriba). Tema Warm (el predeterminado).
   Tipografía: Poppins 200/300/500 para titulares, Inter para lectura (subconjunto latino, mismas familias). */

@font-face{font-family:'Inter';src:url('/assets/fonts/inter-var.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-italic-var.woff') format('woff');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Poppins';src:url('/assets/fonts/poppins-extralight.woff') format('woff');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('/assets/fonts/poppins-light.woff') format('woff');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('/assets/fonts/poppins-medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}

:root{--pad:var(--margin-screen);font-optical-sizing:auto;color-scheme:light}
@media (min-width:768px){:root{--pad:var(--space-xl)}}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--space-xl)}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1 0 auto}
img,svg{max-width:100%}
img{display:block;height:auto}
:focus-visible{outline:var(--border-focus);outline-offset:3px;border-radius:var(--radius-card)}

.skip{position:absolute;left:var(--pad);top:var(--space-sm);z-index:var(--z-overlay);padding:var(--space-sm) var(--space-md);background:var(--surface-card);color:var(--action-primary);border-radius:var(--radius-pill);box-shadow:var(--elev-2);font-weight:var(--fw-semibold);transform:translateY(-200%)}
.skip:focus{transform:none}

.wrap{width:100%;max-width:1080px;margin-inline:auto;padding-inline:var(--pad)}
.doc .wrap{max-width:40rem}

/* barra superior (páginas interiores): isotipo = navegación compacta */
.top{padding-top:var(--space-md)}
.top .wrap{display:flex;align-items:center}
.mark{display:inline-flex;align-items:center;justify-content:center;width:var(--touch-min);height:var(--touch-min);margin-left:-8px;border-radius:var(--radius-pill)}
.mark img{width:28px;height:28px}

/* botones (Button del Design System) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);min-height:var(--touch-min);padding:12px 22px;font:var(--fw-semibold) 15px/1.2 var(--font-body);border:1.5px solid transparent;border-radius:var(--radius-pill);text-decoration:none;cursor:pointer;background:transparent;transition:background var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.btn:active{transform:scale(.98)}
.btn-secondary{color:var(--action-primary);border-color:var(--action-primary)}
.btn-secondary:hover{color:var(--action-primary);background:color-mix(in srgb,var(--action-primary) 8%,transparent)}
.btn[disabled]{opacity:var(--opacity-disabled);cursor:not-allowed}
.btn[disabled]:active{transform:none}

/* ───────── portada ───────── */
.hero{padding-block:var(--space-3xl) var(--space-2xl);text-align:center}
.logo{width:min(72vw,300px);margin:0 auto var(--space-2xl)}
.hero h1{margin:0 auto;font:var(--fw-display) var(--fs-h1)/var(--lh-display) var(--font-display);letter-spacing:var(--tracking-display);color:var(--text-primary)}
.hero h1 span{display:block}
.lead{max-width:30rem;margin:var(--space-lg) auto 0;font-size:var(--fs-body-lg);line-height:var(--lh-body-relaxed);color:var(--text-secondary)}
.note{margin:var(--space-xl) 0 var(--space-md);font-size:var(--fs-body-sm);color:var(--text-secondary)}
.stores{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--touch-gap)}
@media (min-width:768px){
  .hero{padding-block:var(--space-4xl) var(--space-3xl)}
  .hero h1{font-size:var(--fs-display)}
  .logo{width:300px}
}

.screens{padding-block:var(--space-2xl) var(--space-3xl)}
.screens h2,.trust h2{margin:0 0 var(--space-xl);font:var(--fw-heading) var(--fs-h3)/var(--lh-heading) var(--font-display);letter-spacing:var(--tracking-display)}
@media (min-width:768px){.screens h2,.trust h2{font-size:var(--fs-h2)}}
.screens-row{display:flex;gap:var(--space-md);margin:0 calc(var(--pad) * -1);padding:var(--space-xs) var(--pad) var(--space-lg);list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);-webkit-overflow-scrolling:touch}
.screens-row li{flex:0 0 min(68vw,240px);scroll-snap-align:start}
@media (min-width:1024px){
  .screens-row{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-lg);margin:0;padding:var(--space-xs) 0 0;overflow:visible}
  .screens-row li{flex:none}
}
.screens figure{margin:0}
.phone{background:var(--surface-card);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-sheet);box-shadow:var(--elev-2);overflow:hidden}
.phone img{width:100%;aspect-ratio:520/1125}
.screens figcaption{margin-top:var(--space-md)}
.glyph{display:block;width:28px;height:28px;margin-bottom:var(--space-xs);color:var(--action-primary)}
.screens h3{margin:0 0 var(--space-2xs);font:var(--fw-title) var(--fs-title)/var(--lh-title) var(--font-display)}
.screens figcaption p{margin:0;font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--text-secondary)}

.trust{padding-bottom:var(--space-3xl)}
.trust .card{padding:var(--space-2xl) var(--space-lg);text-align:center;background:var(--surface-card);border-radius:var(--radius-sheet);box-shadow:var(--elev-1)}
.trust h2{max-width:24ch;margin:0 auto var(--space-sm)}
.trust p{margin:0 0 var(--space-lg);color:var(--text-secondary)}

/* ───────── páginas de texto ───────── */
.prose{padding-block:var(--space-2xl) var(--space-3xl)}
.prose h1{margin:0 0 var(--space-md);font:var(--fw-display) var(--fs-h2)/var(--lh-heading) var(--font-display);letter-spacing:var(--tracking-display)}
@media (min-width:768px){.prose h1{font-size:var(--fs-h1)}}
.prose h2{margin:var(--space-2xl) 0 var(--space-sm);font:var(--fw-heading) var(--fs-h3)/var(--lh-heading) var(--font-display);letter-spacing:var(--tracking-display)}
.prose h3{margin:var(--space-xl) 0 var(--space-xs);font:var(--fw-title) var(--fs-title)/var(--lh-title) var(--font-display)}
.prose p,.prose ul{margin:0 0 var(--space-md)}
.prose ul{padding-left:1.25em}
.prose ul ul{margin:var(--space-xs) 0 0}
.prose li{margin-block:var(--space-xs)}
.prose li>p{margin:0}
.prose a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover{color:var(--action-primary-hover)}
.prose strong{font-weight:var(--fw-semibold)}
.meta{font-size:var(--fs-body-sm);color:var(--text-secondary)}
.byline{margin:0 0 var(--space-lg);font-size:var(--fs-body-sm);color:var(--text-secondary)}
.facts{margin:var(--space-md) 0 var(--space-lg)}
.facts div{display:grid;gap:var(--space-2xs);padding-block:var(--space-xs)}
.facts dt{font-weight:var(--fw-semibold)}
.facts dd{margin:0}
@media (min-width:600px){.facts div{grid-template-columns:12rem 1fr;gap:var(--space-md)}}
.tbl-wrap{margin:var(--space-md) 0 var(--space-lg);overflow-x:auto;background:var(--surface-card);border-radius:var(--radius-card);box-shadow:var(--elev-1)}
.tbl{width:100%;min-width:30rem;border-collapse:collapse;font-size:var(--fs-body-sm)}
.tbl th{padding:var(--space-sm) var(--space-md);text-align:left;font:var(--fw-semibold) var(--fs-overline)/1.4 var(--font-body);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--text-secondary)}
.tbl td{padding:var(--space-sm) var(--space-md);vertical-align:top;border-top:var(--border-width) solid var(--border-default)}

/* ───────── 404 (estado vacío con Nomi) ───────── */
.empty{padding-block:var(--space-3xl);text-align:center}
.empty img{width:112px;margin:0 auto var(--space-lg)}
.empty h1{margin:0 0 var(--space-xs);font:var(--fw-heading) var(--fs-h2)/var(--lh-heading) var(--font-display);letter-spacing:var(--tracking-display)}
.empty p{margin:0 0 var(--space-xl);color:var(--text-secondary)}

/* ───────── pie ───────── */
.foot{margin-top:auto;border-top:var(--border-width) solid var(--border-default);padding-block:var(--space-xl)}
.sign{display:inline-flex;align-items:center;gap:var(--space-sm);min-height:var(--touch-min);margin:0 0 var(--space-2xs);font-size:var(--fs-body-sm);font-weight:var(--fw-medium);color:var(--text-primary);text-decoration:none}
.sign img{width:20px;height:20px}
.foot ul{display:flex;flex-wrap:wrap;gap:0 var(--space-lg);margin:0;padding:0;list-style:none}
.foot a{display:inline-flex;align-items:center;min-height:var(--touch-min);font-size:var(--fs-body-sm);color:var(--text-secondary)}
.foot .sign,.foot a:hover,.foot a[aria-current="page"]{color:var(--text-primary)}
.foot a[aria-current="page"]{font-weight:var(--fw-semibold)}

/* portada compacta: debe caber sin scroll en un portátil */
.btn{white-space:nowrap}
.home main{display:flex;flex-direction:column;justify-content:center}
.home .hero{padding-block:var(--space-xl) var(--space-lg)}
.home .logo{margin-bottom:var(--space-lg)}
.home .note{margin-top:var(--space-lg)}
.home .trust{padding-bottom:var(--space-xl)}
.home .trust .card{padding:var(--space-lg)}
.home .trust h2{margin-bottom:var(--space-xs);font-size:var(--fs-title)}
.home .trust p{margin-bottom:var(--space-md)}
@media (min-width:768px){
  .home .hero{padding-block:var(--space-2xl) var(--space-xl)}
  .home .hero h1{font-size:var(--fs-h1)}
  .home .trust .card{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xl);padding:var(--space-xl);text-align:left}
  .home .trust h2{max-width:none;margin:0 0 var(--space-2xs)}
  .home .trust p{margin:0}
}

@media print{
  .top,.foot,.skip{display:none}
  body{background:#fff;color:#000}
  .prose a{color:#000}
}