/* NoloTires Guárdalo — fuentes + tokens + base */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-500-normal.woff2) format('woff2');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:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2');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:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2');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:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-800-normal.woff2) format('woff2');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';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2) format('woff2');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';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-latin-500-normal.woff2) format('woff2');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';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format('woff2');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';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/inter-latin-700-normal.woff2) format('woff2');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}

/* colors */
:root{
  /* ---- Base: neutros cálidos ---- */
  --paper-0:#FFFFFF;
  --paper-1:#FAF9F7;
  --paper-2:#F7F6F3;
  --paper-3:#F1EFEA;
  --paper-4:#E4E2DC;
  --paper-5:#D6D3CB;

  /* ---- Base: tinta con matiz teal (armoniza con el cian de marca) ---- */
  --ink-0:#10242A;
  --ink-1:#1A343B;
  --ink-2:#334C53;
  --ink-3:#66787E;
  --ink-4:#96A5AA;

  /* ---- Base: cian de marca (logo de Instagram) ---- */
  --cyan-700:#0A7284;
  --cyan-600:#0E8FA3;
  --cyan-500:#16B4CC;
  --cyan-400:#45C5DB;
  --cyan-200:#A8E4EE;
  --cyan-100:#DDF3F7;
  --cyan-050:#F1FAFC;

  /* ---- Base: naranja de acción (el de los destacados, ajustado para contraste) ---- */
  --orange-700:#A9470A;
  --orange-600:#C8560B;
  --orange-500:#E1660F;
  --orange-400:#EE9440;
  --orange-200:#FBDCBE;
  --orange-100:#FDEEE0;
  --orange-050:#FEF7F1;

  /* ---- Base: estados ---- */
  --green-500:#2F9E44;
  --green-100:#E4F5E7;
  --amber-500:#F59F00;
  --amber-100:#FDF1D8;
  --slate-500:#495057;
  --slate-100:#E9EAEC;
  --red-500:#E03131;
  --red-100:#FBE3E3;

  /* ---- Semántico: marca (identidad, cian) ---- */
  --color-brand:var(--cyan-500);
  --color-brand-deep:var(--cyan-600);
  --color-brand-light:var(--cyan-400);
  --color-brand-soft:var(--cyan-100);
  --color-brand-faint:var(--cyan-050);
  --color-on-brand:#FFFFFF;

  /* ---- Semántico: acento (acción, naranja) ---- */
  --color-accent:var(--orange-500);
  --color-accent-hover:var(--orange-600);
  --color-accent-press:var(--orange-700);
  --color-accent-soft:var(--orange-100);
  --color-accent-faint:var(--orange-050);
  --color-on-accent:#FFFFFF;

  /* ---- Semántico: superficies ---- */
  --color-bg:var(--paper-2);
  --color-surface:var(--paper-0);
  --color-surface-sunken:var(--paper-3);
  --color-surface-hover:var(--paper-1);
  --color-dark:var(--ink-0);
  --color-dark-soft:var(--ink-1);
  --color-overlay:rgba(16,36,42,.55);

  /* ---- Semántico: texto ---- */
  --color-text:var(--ink-0);
  --color-text-secondary:var(--ink-2);
  --color-text-muted:var(--ink-3);
  --color-text-faint:var(--ink-4);
  --color-on-dark:#FFFFFF;
  --color-on-dark-muted:#9FB3B9;
  --color-link:var(--cyan-600);
  --color-link-hover:var(--cyan-700);

  /* ---- Semántico: bordes ---- */
  --color-border:var(--paper-4);
  --color-border-strong:var(--paper-5);
  --color-border-dark:#284249;
  --color-focus:var(--orange-500);

  /* ---- Estados de trastero / cobro ---- */
  --st-libre:var(--green-500);
  --st-libre-bg:var(--green-100);
  --st-reservado:var(--amber-500);
  --st-reservado-bg:var(--amber-100);
  --st-ocupado:var(--slate-500);
  --st-ocupado-bg:var(--slate-100);
  --st-impago:var(--red-500);
  --st-impago-bg:var(--red-100);
}

/* typography */
:root{
  --font-display:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */
  --fw-black:800; /* @kind font */

  /* Escala tipográfica (display fluido, pasos finos en UI) */
  --fs-display-xl:clamp(40px,5.4vw,68px); /* @kind font */
  --fs-display-l:clamp(32px,3.6vw,46px); /* @kind font */
  --fs-display-m:clamp(26px,2.4vw,34px); /* @kind font */
  --fs-title:22px; /* @kind font */
  --fs-subtitle:18px; /* @kind font */
  --fs-body-l:17px; /* @kind font */
  --fs-body:15px; /* @kind font */
  --fs-body-s:14px; /* @kind font */
  --fs-caption:13px; /* @kind font */
  --fs-micro:11px; /* @kind font */

  --lh-tight:1.05; /* @kind font */
  --lh-heading:1.14; /* @kind font */
  --lh-snug:1.35; /* @kind font */
  --lh-body:1.6; /* @kind font */

  --ls-display:-.025em; /* @kind font */
  --ls-title:-.015em; /* @kind font */
  --ls-body:0em; /* @kind font */
  --ls-eyebrow:.09em; /* @kind font */

  /* Cifras del panel y precios: siempre tabulares */
  --numeric-tabular:tabular-nums; /* @kind font */
}

/* spacing */
:root{
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;

  --gutter:24px;
  --section-y:clamp(56px,7vw,104px); /* @kind spacing */
  --container-max:1180px; /* @kind spacing */
  --container-narrow:760px; /* @kind spacing */
  --panel-sidebar-w:236px;
  --panel-topbar-h:60px;
  --navbar-h:126px;
  --hit-min:44px; /* @kind spacing */
}

/* radius */
:root{
  --radius-xs:4px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-xl:20px;
  --radius-2xl:28px;
  --radius-pill:999px;
  --border-hairline:1px;
  --border-thick:2px;
}

/* elevation */
:root{
  /* Sombras cálidas, nunca azuladas: derivan del negro tinta con poca opacidad */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(16,36,42,.06);
  --shadow-sm:0 1px 2px rgba(16,36,42,.05),0 2px 6px rgba(16,36,42,.05);
  --shadow-md:0 2px 4px rgba(16,36,42,.05),0 8px 20px rgba(16,36,42,.07);
  --shadow-lg:0 4px 8px rgba(16,36,42,.05),0 18px 40px rgba(16,36,42,.10);
  --shadow-accent:0 6px 18px rgba(225,102,15,.28);
  --ring-focus:0 0 0 3px rgba(225,102,15,.28);
  --ring-selected:0 0 0 2px var(--color-accent);
  --gradient-hero:linear-gradient(135deg,#0A2A33 0%,#0E8FA3 58%,#E1660F 135%); /* @kind color */
  --gradient-scrim:linear-gradient(to top,rgba(10,30,36,.88) 0%,rgba(10,30,36,.55) 45%,rgba(10,30,36,.12) 100%); /* @kind color */
}

/* motion */
:root{
  --ease-out-expo:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
  --dur-instant:90ms; /* @kind other */
  --dur-fast:150ms; /* @kind other */
  --dur-base:220ms; /* @kind other */
  --dur-slow:300ms; /* @kind other */
  --dur-reveal:700ms; /* @kind other */
  --reveal-stagger:70ms; /* @kind other */
}
@keyframes rvUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.rv-pending{opacity:0}
.rv-pending.rv-in{animation:rvUp var(--dur-reveal) var(--ease-out-expo) both}
@media (prefers-reduced-motion:reduce){
  .rv-pending{opacity:1!important}
  .rv-pending.rv-in{animation:none}
}

/* base */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:calc(var(--navbar-h) + 8px)}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:var(--fw-black);letter-spacing:var(--ls-title);line-height:var(--lh-heading);margin:0;text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--color-link);text-decoration:none}
a:hover{color:var(--color-link-hover);text-decoration:underline}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.tabular{font-variant-numeric:var(--numeric-tabular)}