/* Vaca Mariposa — tokens compartidos por todas las páginas.
   Cambiar un color o un tiempo acá lo cambia en todo el sitio. */
:root{
/* ── color ─────────────────────────────────────────────── */
    --c-ink:#4A3331;                 /* texto */
    --c-ink-2:#77605A;               /* secundario, metadatos */
    --c-body:#614B45;                /* cuerpo largo */
    --c-coral:#FF9089;               /* acción y hover */
    --c-vanilla:#FFF3B9;             /* selección */
    --c-hi:#FDF84E;                  /* resaltado */
    --c-sky:#ADD3F8;                 /* splash */
    --ink-rgb:74,51,49;              /* = --c-ink, para rgba() */
    --bg-1:#FDFBF6; --bg-2:#FCF9F0; --bg-3:#F7F0DC; --bg-4:#F2E8CE;
    --c-card:#F4ECDD;
    /* ── paleta de acento (chips y estelas): sólo tokens, sin colores huérfanos ── */
    --c-clay:#7E5A3F;                /* marrón medio */
    --c-cocoa:#563526;               /* marrón oscuro */
    --c-linen:#F0EAD8;               /* crema cálido */
    --c-sand:#E3D8BE;                /* crema tostado */
    --c-sky-2:#C9DCEE;               /* celeste claro */
    --c-trail-1:#F2E08A; --c-trail-2:#E8CF64; --c-trail-3:#E2C650;   /* estela del cursor */
    --c-on-photo:#FFFFFF;            /* texto sobre foto: único blanco puro */
    --c-off:var(--bg-1);
    --c-accent:var(--c-coral);       /* alias heredado */
    --c-stone:var(--bg-3);           /* alias heredado */
    --c-ink-3:var(--c-ink-2);        /* alias heredado */
    /* ── tipografía ────────────────────────────────────────── */
    --font-sans:"Inter",system-ui,sans-serif;
    --font-disp:var(--font-sans);
    --font-stitch:"Cross Stitch Cursive W95 Rg","Cross Stitch Cursive",cursive;
    --tw:0; --tww:0;                  /* sin tracking: la jerarquía la hace el tamaño */
    /* ── espacio ───────────────────────────────────────────── */
    --gut:clamp(22px,5.5vw,84px);
    --sp-sec:clamp(56px,7vw,96px); --sp-blk:clamp(34px,4.4vw,62px); --sp-el:clamp(20px,2.6vw,34px);
    --radius:14px;
    --hair:0 solid transparent;      /* sin filetes: separa el blanco */
    --shadow-card:0 22px 48px rgba(var(--ink-rgb),.2),0 8px 18px rgba(var(--ink-rgb),.1);
    --shadow-lift:0 40px 70px rgba(var(--ink-rgb),.3);
    /* ── motion (transitions.dev) ──────────────────────────── */
    --duration-stagger:40ms; --duration-micro:80ms; --duration-quick:150ms; --duration-fast:250ms;
    --duration-medium:350ms; --duration-slow:400ms; --duration-very-slow:500ms;
    --ease-smooth-out:cubic-bezier(.22,1,.36,1); --ease-in-out:ease-in-out; --ease-out:ease-out;
    --ease-bounce:cubic-bezier(.34,1.36,.64,1);
    --ease-soft:cubic-bezier(.2,.7,.2,1);            /* scroll amortiguado: única curva aparte */
    --distance-micro:4px; --distance-base:8px; --distance-medium:12px;
    --blur-small:2px; --blur-medium:3px;
    --stagger-dur:500ms; --stagger-distance:12px; --stagger-stagger:40ms; --stagger-blur:3px;
    --stagger-ease:var(--ease-smooth-out);
    --text-swap-dur:150ms; --text-swap-translate-y:4px; --text-swap-blur:2px; --text-swap-ease:ease-in-out;
    --learn-shift:2px; --learn-spread:8deg; --learn-in:350ms; --learn-out:350ms; --learn-ease:var(--ease-smooth-out);
    --tabs-dur:250ms; --tabs-ease:var(--ease-smooth-out);
    /* un solo reloj y una sola curva: lo viejo apunta a lo nuevo */
    --ease:var(--ease-smooth-out);
    --t-fast:var(--duration-quick); --t-mid:var(--duration-medium); --t-slow:var(--duration-very-slow);
}

/* ── nav: una sola lógica para todas las páginas ───────── */
nav a, nav button, .navlinks a, .navlinks button, .navmenu a, .navmenu button{ text-transform:lowercase }
.navbar{ position:fixed; top:0; left:0; right:0; z-index:60; display:flex; justify-content:center; padding:28px var(--gut) 12px; pointer-events:none }
.navlinks{ display:flex; align-items:center; gap:4px; white-space:nowrap; font-size:15px; letter-spacing:0;
  background:rgba(253,251,246,.55); backdrop-filter:blur(16px) saturate(130%); -webkit-backdrop-filter:blur(16px) saturate(130%);
  border:1px solid rgba(var(--ink-rgb),.1); border-radius:999px; padding:7px 11px; pointer-events:auto }
.navlinks a, .navlinks button{ display:inline-flex; align-items:center; padding:11px 19px; border-radius:999px; background:transparent; border:0; appearance:none;
  color:inherit; font:inherit; font-size:15px; cursor:pointer; transition:color var(--t-fast) var(--ease) }
.navlinks button{ position:relative; margin-left:20px; color:var(--c-ink-2) }
.navlinks button::before{ content:""; position:absolute; left:-10px; top:50%; width:3px; height:3px; margin-top:-1.5px; background:currentColor }
.navlinks a[aria-current]{ background:rgba(var(--ink-rgb),.08) }
.navlinks a:focus-visible, .navlinks button:focus-visible{ outline:2px solid var(--c-coral); outline-offset:3px }
@media (hover:hover) and (pointer:fine){ .navlinks a:hover, .navlinks button:hover{ color:var(--c-coral) } }
.nav-burger,.navmenu{ display:none }
@media (max-width:768px){
  .navbar{ padding:22px 12px 10px }
  .navlinks, .navbar > .pill{ display:none !important }
  .nav-burger{ position:fixed; top:max(14px,env(safe-area-inset-top)); right:14px; z-index:400; display:inline-flex; align-items:center; justify-content:center;
    width:46px; height:46px; padding:0; margin:0; border:1px solid rgba(var(--ink-rgb),.12); border-radius:999px; appearance:none; cursor:pointer;
    background:rgba(253,251,246,.62); backdrop-filter:blur(14px) saturate(130%); -webkit-backdrop-filter:blur(14px) saturate(130%);
    color:var(--c-ink); box-shadow:0 6px 18px rgba(var(--ink-rgb),.12); transition:background .3s var(--ease), color .3s var(--ease) }
  .nav-burger i{ position:absolute; left:14px; right:14px; height:1.5px; background:currentColor; border-radius:2px; transition:transform .34s var(--ease) }
  .nav-burger i:nth-of-type(1){ transform:translateY(-4px) }
  .nav-burger i:nth-of-type(2){ transform:translateY(4px) }
  body[data-nav-open] .nav-burger i:nth-of-type(1){ transform:rotate(45deg) }
  body[data-nav-open] .nav-burger i:nth-of-type(2){ transform:rotate(-45deg) }
  .navmenu{ position:fixed; inset:0; z-index:390; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    background:rgba(253,251,246,.95); backdrop-filter:blur(22px) saturate(130%); -webkit-backdrop-filter:blur(22px) saturate(130%); color:var(--c-ink);
    opacity:0; visibility:hidden; transition:opacity .32s var(--ease), visibility 0s linear .32s }
  body[data-nav-open] .navmenu{ opacity:1; visibility:visible; transition:opacity .32s var(--ease) }
  .navmenu a{ display:inline-flex; align-items:center; min-height:56px; padding:6px 20px; color:inherit;
    font-family:var(--font-disp); font-weight:700; font-size:clamp(30px,9vw,44px); line-height:1; letter-spacing:-.015em;
    opacity:0; transform:translateY(14px); transition:opacity .4s var(--ease), transform .4s var(--ease) }
  body[data-nav-open] .navmenu a{ opacity:1; transform:none }
  body[data-nav-open] .navmenu a:nth-of-type(1){ transition-delay:.05s }
  body[data-nav-open] .navmenu a:nth-of-type(2){ transition-delay:.11s }
  body[data-nav-open] .navmenu a:nth-of-type(3){ transition-delay:.17s }
  .navmenu a:active{ color:var(--c-coral) }
  .navmenu a[aria-current]{ color:var(--c-ink-3) }
  .nav-lang{ margin-top:24px; padding:12px 20px; min-height:44px; appearance:none; border:0; background:transparent; color:var(--c-ink-2);
    font:inherit; font-size:15px; letter-spacing:0; cursor:pointer; opacity:0; transition:opacity .4s var(--ease) .22s }
  body[data-nav-open] .nav-lang{ opacity:1 }
  body[data-nav-open]{ overflow:hidden }
}
/* imágenes protegidas: no se arrastran ni se guardan por menú contextual */
img, picture, svg, canvas{
  -webkit-user-drag:none; user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none;
}