/* ClickEat · páginas legales (privacy, terms, refunds)
   Mismo sistema que index.html: tokens, tipografía, píldora de navegación, botones y movimiento. */

/* ============ TOKENS ============ */
:root{
  --navy:#0F1F3D; --navy-2:#182B4F;
  --yellow:#F5B622; --yellow-soft:#FBEBC0;
  --amber:#9A6200;
  --paper:#F1F4F9; --surface:#FFFFFF;
  --ink-2:#2E3B57; --muted:#55627A;
  --line:rgba(15,31,61,.11); --line-2:rgba(15,31,61,.2);
  --on-dark:#F1F4FA; --on-dark-2:#B4BED1; --on-dark-3:#98A5BD; --line-dark:rgba(255,255,255,.13);

  --font-display:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  --font-body:"Hanken Grotesk","Helvetica Neue",Arial,system-ui,sans-serif;

  --ease-out:cubic-bezier(.215,.61,.355,1);
  --ease-spring:cubic-bezier(.34,1.45,.64,1);

  --nav-h:76px;
  --gutter:clamp(20px,4vw,32px);
}

/* ============ BASE ============ */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scrollbar-color:rgba(15,31,61,.35) transparent; scrollbar-width:thin; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink-2);
  font-family:var(--font-body); font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{ background:var(--yellow); color:var(--navy); }
a{ color:inherit; text-decoration:none; }
h1,h2,p,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img{ max-width:100%; display:block; }
h1,h2{ font-family:var(--font-display); color:var(--navy); text-wrap:balance; }
p{ text-wrap:pretty; }
:focus-visible{ outline:2px solid var(--focus,var(--navy)); outline-offset:3px; border-radius:6px; }
.doc-hero,.site-footer{ --focus:var(--yellow); }

.container{ width:100%; max-width:73.75rem; margin:0 auto; padding-inline:var(--gutter); }
.ic{ width:1.25em; height:1.25em; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.skip-link{
  position:fixed; left:16px; top:-64px; z-index:100; min-height:44px; display:inline-flex; align-items:center;
  padding:0 20px; border-radius:999px; background:var(--yellow); color:var(--navy); font-weight:600;
  transition:top 200ms var(--ease-out);
}
.skip-link:focus{ top:12px; }

/* ============ BOTON ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 20px; border-radius:999px; border:1px solid var(--line-2);
  font:600 0.9375rem/1 var(--font-body); letter-spacing:-.005em; white-space:nowrap; color:var(--navy); background:transparent;
  transition:transform 200ms var(--ease-spring), background-color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.btn .ic{ width:18px; height:18px; transition:transform 200ms var(--ease-out); }
@media (hover:hover){
  .btn:hover{ transform:translateY(-1px); border-color:var(--navy); background:rgba(15,31,61,.05); }
  .btn:hover .ic{ transform:translateX(-2px); }
}
.btn:active{ transform:scale(.96); transition:transform 120ms var(--ease-out); }

/* ============ NAVBAR (pastilla flotante) ============ */
.navbar{ position:sticky; top:0; z-index:50; height:var(--nav-h); padding:12px 16px 0; }
.navbar-inner{
  max-width:73.75rem; height:60px; margin:0 auto; padding:0 8px 0 18px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--line); border-radius:999px;
  box-shadow:0 10px 30px -14px rgba(15,31,61,.4);
}
.brand{ display:inline-flex; align-items:center; min-height:44px; font:800 1.375rem/1 var(--font-display); letter-spacing:-.03em; color:var(--navy); }
.brand img{ width:28px; height:28px; margin-right:8px; }
.brand .eat{ color:var(--amber); }

/* ============ CABECERA DEL DOCUMENTO ============ */
.doc-hero{
  position:relative; isolation:isolate; overflow:hidden; background:var(--navy); color:var(--on-dark);
  margin-top:calc(var(--nav-h) * -1); padding-top:var(--nav-h);
}
.doc-hero::before{
  content:""; position:absolute; z-index:-1; pointer-events:none; top:-40%; right:-10%; width:60%; height:150%;
  background:radial-gradient(closest-side, rgba(245,182,34,.15), transparent 70%);
}
.doc-hero-inner{ padding-block:clamp(40px,6vw,80px) clamp(48px,7vw,88px); }
.doc-hero h1{
  max-width:16ch; margin-bottom:20px; font-size:clamp(2.25rem, 5vw, 3.75rem); font-weight:800;
  line-height:1.04; letter-spacing:-.036em; color:#fff;
}
.doc-meta{ font-size:.9375rem; color:var(--on-dark-2); }
.doc-meta:has(#date:empty){ display:none; }   /* sin JavaScript la fecha queda vacía: se oculta la línea en vez de dejar "Última actualización:" en blanco */
.tag{
  display:inline-flex; align-items:center; margin-top:20px; padding:7px 14px; border-radius:999px;
  background:rgba(245,182,34,.12); border:1px solid rgba(245,182,34,.35);
  font-size:0.84375rem; font-weight:600; color:var(--yellow);
}
@media (prefers-reduced-motion:no-preference){
  .doc-hero-inner > *{ animation:rise 240ms var(--ease-out) both; animation-delay:calc(var(--i,0) * 55ms); }
}
@keyframes rise{ from{ opacity:0; transform:translateY(12px); } }

/* ============ CUERPO: indice + articulo ============ */
.doc-layout{
  display:grid; grid-template-columns:220px minmax(0,1fr); gap:clamp(40px,7vw,96px); align-items:start;
  padding-block:clamp(48px,7vw,96px) clamp(72px,9vw,128px);
}
.toc{
  position:sticky; top:calc(var(--nav-h) + 24px); margin-left:-12px; padding-inline:12px;
  max-height:calc(100vh - var(--nav-h) - 48px); overflow-y:auto; overscroll-behavior:contain;   /* nunca queda cortado en ventanas bajas */
}
.toc-title{ margin-bottom:8px; font-size:.875rem; font-weight:700; color:var(--navy); }
.toc a{
  display:flex; align-items:center; min-height:44px; padding:0 12px; margin-left:-12px; border-radius:10px;
  font-size:.9375rem; line-height:1.3; color:var(--muted);
  transition:background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.toc a:hover{ background:rgba(15,31,61,.06); color:var(--navy); }
.toc a[aria-current="true"]{ background:rgba(15,31,61,.08); color:var(--navy); font-weight:600; }

.doc{ max-width:68ch; font-size:1.0625rem; line-height:1.7; color:var(--ink-2); overflow-wrap:break-word; }
.doc > p:first-child{ font-size:1.1875rem; line-height:1.65; color:var(--navy); }
.doc section{ scroll-margin-top:calc(var(--nav-h) + 16px); }
.doc h2{ margin:56px 0 14px; font-size:clamp(1.375rem,2.2vw,1.75rem); font-weight:700; line-height:1.2; letter-spacing:-.025em; scroll-margin-top:calc(var(--nav-h) + 16px); }
.doc p + p{ margin-top:14px; }
.doc b{ font-weight:700; color:var(--navy); }
.doc a{
  color:var(--navy); font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:rgba(15,31,61,.35); transition:text-decoration-color 160ms var(--ease-out);
}
.doc a:hover{ text-decoration-color:var(--navy); }
.doc a[href^="mailto:"]{ white-space:nowrap; }
#contacto a{ display:inline-block; padding-block:11px; }   /* enlaces solos en su línea: área táctil de 44px */
.doc ul{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.doc li{ position:relative; padding-left:24px; }
.doc li::before{ content:""; position:absolute; left:6px; top:.78em; width:5px; height:5px; border-radius:50%; background:var(--navy); }
.doc p + ul{ margin-top:12px; }
.note{ margin-top:14px; padding:22px 24px; border-radius:18px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2); }
.note ul{ margin-top:12px; }

/* ============ FOOTER ============ */
.site-footer{ background:var(--navy); color:var(--on-dark-2); }
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 32px; padding-block:24px; }
.footer-inner p{ font-size:.875rem; color:var(--on-dark-3); }
.footer-links{ display:flex; flex-wrap:wrap; gap:0 8px; }
.footer-links a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 12px; border-radius:8px; font-size:.9375rem; color:var(--on-dark-2);
  transition:color 160ms var(--ease-out);
}
.footer-links a:hover{ color:var(--yellow); }
.footer-links a[aria-current="page"]{ color:#fff; font-weight:600; }

/* ============ RESPONSIVE ============ */
@media (max-width:56.25em){
  .doc-layout{ grid-template-columns:minmax(0,1fr); }
  .toc{ display:none; }
  .doc h2{ margin-top:44px; }
}
@media (max-width:30em){
  .navbar{ padding-inline:12px; }
  .btn{ padding:0 16px; }
  .doc li{ padding-left:20px; }
}
@media (forced-colors:active){
  .tag{ border:1px solid CanvasText; }
  .doc li::before{ background:CanvasText; forced-color-adjust:none; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}