/* ==========================================================================
   Torta Manía · base visual
   Tokens, tipografía, botones, navegación, carrito y pie compartidos.
   ========================================================================== */

@font-face {
  font-family: "Bevellier";
  /* Fuente variable (pesos 100 a 900) entregada por diseño; subconjunto latino */
  src: url("../fonts/bevellier-var.woff2") format("woff2-variations"),
       url("../fonts/bevellier-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* Íconos Phosphor en SVG en línea (tm_icon). Reemplazan la fuente de íconos del CDN:
   el tamaño sigue a font-size y el color a color, igual que antes. */
.ph, .ph-fill {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: -0.125em;
  flex-shrink: 0;
  font-style: normal;
}
.ph > svg, .ph-fill > svg { display: block; width: 100%; height: 100%; }

/* Alto de pantalla para escenas fijas y secciones apiladas.
   --screen: alto con la barra del navegador escondida (100lvh). Así, cuando en el iPhone la barra de abajo
   se esconde, las escenas siguen cubriendo toda la pantalla (con 100dvh quedaba una franja abajo).
   --toolbar: lo que ocupa esa barra cuando está visible; se suma abajo a lo que no debe quedar tapado. */
:root { --screen: 100vh; --toolbar: 0px; }
@supports (height: 100lvh) {
  :root { --screen: 100lvh; --toolbar: calc(100lvh - 100svh); }
}

:root {
  /* Institucionales (medidos en los sitios actuales) */
  --teal: #41bbbe;
  --teal-600: #119393;
  --teal-800: #119393;
  --teal-950: #3d1f16;
  --choco: #623427;
  --choco-900: #3d1f16;
  --choco-950: #3d1f16;
  --cream: #fff5e4;
  --cream-200: #ffe9c7;
  --yellow: #ffca6c;
  --sun: #ffca6c;
  --pink: #fff5e4;

  /* Acentos de fiesta (derivados de los sprinkles del logo) */
  --fucsia: #41bbbe;
  --fucsia-800: #119393;
  --coral: #f78b16;
  --orange: #f78b16;

  /* Ambientes por sabor */
  --raspberry: #623427;
  --pistachio: #d9f1f2;
  --pistachio-800: #119393;
  --peach: #ffca6c;
  --caramel: #f78b16;

  /* Roles */
  --bg: var(--cream);
  --ink: var(--choco-900);
  --ink-soft: #623427;
  --cta-bg: var(--yellow);
  --cta-ink: var(--choco-950);

  /* Tipografía */
  --font-display: "Bevellier", system-ui, sans-serif;
  --font-body: "Bevellier", system-ui, -apple-system, "Segoe UI", sans-serif; /* toda la web en Bevellier (fuente del diseño) */

  /* Forma: botones y chips en píldora, superficies 28px, platos circulares */
  --r-pill: 999px;
  --r-surface: 28px;
  --r-small: 14px;

  /* Movimiento (ver RUTA-NUEVO-HOME.md §7.3) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 140ms;
  --dur-ui: 220ms;

  /* Capas */
  --z-stage: 1;
  --z-confetti: 40;
  --z-nav: 60;
  --z-drawer: 80;
  --z-toast: 90;

  --gutter: clamp(16px, 4vw, 48px);
  --nav-h: 68px;
}

/* --------------------------------------------------------------------------
   Reset y superficie del navegador
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--choco) var(--cream-200);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  caret-color: var(--fucsia);
}

::selection { background: var(--fucsia); color: var(--cream); }

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--cream-200); }
::-webkit-scrollbar-thumb { background: var(--choco); border-radius: 99px; border: 3px solid var(--cream-200); }

[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--fucsia);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: 16px; top: 16px; z-index: 100;
  background: var(--choco-950); color: var(--cream);
  padding: 10px 18px; border-radius: var(--r-pill);
  transform: translateY(-160%);
  transition: transform var(--dur-ui) var(--ease-out);
}
.skip-link:focus { transform: none; }

/* --------------------------------------------------------------------------
   Tipografía
   -------------------------------------------------------------------------- */
.display,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(3rem, 7.4vw, 6rem); }
h2 { font-size: clamp(2.4rem, 5.6vw, 4.75rem); }
h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.05; }

p { margin: 0; text-wrap: pretty; }
.lead { font-size: clamp(1.125rem, 1.5vw, 1.3rem); line-height: 1.5; max-width: 34ch; }
.price { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Máscara de línea para revelar titulares */
.line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.line > span { display: inline-block; will-change: transform; }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--cta-bg);
  --btn-ink: var(--cta-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--font-body);
  font-weight: 650;
  font-size: 1.0625rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--choco-950) 55%, transparent);
  transition:
    transform var(--dur-press) var(--ease-out),
    background-color var(--dur-ui) ease,
    box-shadow var(--dur-ui) ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn i { font-size: 1.25em; }
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-ink: currentColor;
  box-shadow: inset 0 0 0 2px currentColor;
}
.btn--dark { --btn-bg: var(--choco); --btn-ink: var(--cream); } /* café de los botones del diseño */
.btn--small { min-height: 44px; padding: 0 20px; font-size: 0.975rem; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { --btn-bg: var(--sun); box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--choco-950) 65%, transparent); }
  .btn--ghost:hover { --btn-bg: color-mix(in srgb, currentColor 10%, transparent); }
  .btn--dark:hover { --btn-bg: var(--choco-900); }
}

/* Elemento magnético: el JS mueve el contenedor, el botón conserva su press */
.magnetic { display: inline-block; will-change: transform; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--r-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 22px;
  position: relative;
  transition: background-color var(--dur-ui) ease, transform var(--dur-press) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
}

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border: 0; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--choco) 8%, transparent);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease, transform var(--dur-press) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] { background: var(--choco-900); color: var(--cream); }
@media (hover: hover) and (pointer: fine) {
  .chip:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--choco) 16%, transparent); }
}

/* --------------------------------------------------------------------------
   Navegación flotante
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: var(--z-nav);
  width: min(1240px, calc(100% - 28px));
  height: var(--nav-h);
  padding: 0 10px 0 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--cream) 72%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  color: var(--choco-900);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 14px 40px -22px color-mix(in srgb, var(--choco-950) 60%, transparent);
  transform: translateX(-50%);
  transition:
    transform 420ms var(--ease-out),
    background-color 320ms ease,
    color 320ms ease;
}
.nav.is-hidden { transform: translate(-50%, calc(-100% - 24px)); }
.nav[data-theme="dark"] { background: color-mix(in srgb, var(--choco-950) 62%, transparent); color: var(--cream); box-shadow: inset 0 1px 0 rgba(255, 245, 228, 0.14), 0 14px 40px -22px rgba(0, 0, 0, 0.6); }
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--cream); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav[data-theme="dark"] { background: var(--choco-950); }
}

.nav__logo { display: block; flex: none; }
.nav__logo img { height: 30px; width: auto; }
.nav[data-theme="dark"] .nav__logo img { filter: brightness(0) invert(94%) sepia(9%) saturate(500%) hue-rotate(320deg); }

.nav__links {
  display: flex; gap: 4px;
  margin: 0 auto; padding: 0; list-style: none;
}
.nav__links a {
  display: inline-flex; align-items: center;
  height: 44px; padding: 0 16px;
  border-radius: var(--r-pill);
  font-weight: 550;
  text-decoration: none;
  transition: background-color var(--dur-ui) ease;
}
.nav__links a[aria-current="page"] { background: color-mix(in srgb, currentColor 12%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
}

/* Logo a la izquierda, enlaces al centro, acciones pegadas a la derecha */
.nav > nav { margin-inline: auto; }
.nav__actions { display: flex; align-items: center; gap: 2px; }
.nav__cta { margin-left: 8px; }
.nav__menu-btn { display: none; }

.cart-count {
  position: absolute; top: 4px; right: 2px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 99px;
  background: var(--fucsia); color: #fff;
  font-size: 0.7rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cart-count:empty, .cart-count[data-count="0"] { display: none; }

@media (max-width: 960px) {
  .nav { padding: 0 6px 0 18px; gap: 6px; height: 60px; }
  .nav__links, .nav__cta { display: none; }
  .nav__actions { margin-left: auto; }
  .nav__menu-btn { display: inline-grid; }
  .nav__logo img { height: 26px; }
}

/* Menú móvil a pantalla completa */
.menu {
  position: fixed; inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: var(--teal);
  color: var(--choco-950);
  padding: calc(var(--nav-h) + 48px) 28px 32px;
  display: flex; flex-direction: column; gap: 28px;
  clip-path: inset(0 0 100% 0 round 0 0 40px 40px);
  visibility: hidden;
  transition: clip-path 520ms var(--ease-drawer), visibility 0s linear 520ms;
}
.menu.is-open { clip-path: inset(0 0 0 0 round 0); visibility: visible; transition: clip-path 560ms var(--ease-drawer); }
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.menu a.menu__link {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 12vw, 4rem);
  line-height: 1.05;
  text-decoration: none;
}
.menu__item { opacity: 0; transform: translateY(24px); transition: opacity 320ms ease, transform 520ms var(--ease-out); }
.menu.is-open .menu__item { opacity: 1; transform: none; }
.menu.is-open .menu__item:nth-child(2) { transition-delay: 50ms; }
.menu.is-open .menu__item:nth-child(3) { transition-delay: 100ms; }
.menu.is-open .menu__item:nth-child(4) { transition-delay: 150ms; }
.menu.is-open .menu__item:nth-child(5) { transition-delay: 200ms; }
.menu__foot { margin-top: auto; display: grid; gap: 14px; }
.menu__foot .btn { width: 100%; }

/* --------------------------------------------------------------------------
   Confeti ambiental (canvas fijo)
   -------------------------------------------------------------------------- */
.confetti-layer {
  position: fixed; inset: 0;
  z-index: var(--z-confetti);
  pointer-events: none;
  width: 100%; height: 100%;
}

/* --------------------------------------------------------------------------
   Carrito (panel lateral en escritorio, hoja inferior en móvil)
   -------------------------------------------------------------------------- */
.scrim {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: color-mix(in srgb, var(--choco-950) 45%, transparent);
  opacity: 0; visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.scrim.is-open { opacity: 1; visibility: visible; transition: opacity 240ms ease; }

.drawer {
  position: fixed; z-index: calc(var(--z-drawer) + 1);
  top: 12px; right: 12px; bottom: 12px;
  width: min(440px, calc(100% - 24px));
  display: flex; flex-direction: column;
  background: var(--cream);
  color: var(--choco-900);
  border-radius: var(--r-surface);
  box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--choco-950) 70%, transparent);
  transform: translateX(calc(100% + 24px));
  transition: transform 200ms var(--ease-out);
  overflow: hidden;
}
.drawer.is-open { transform: none; transition: transform 340ms var(--ease-drawer); }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 14px 14px 24px;
}
.drawer__head h2 { font-size: 2rem; }
.drawer__body { flex: 1; overflow: auto; padding: 4px 24px 16px; overscroll-behavior: contain; }
.drawer__foot {
  padding: 18px 24px calc(18px + env(safe-area-inset-bottom));
  background: var(--cream-200);
  display: grid; gap: 14px;
}
.drawer__total { display: flex; justify-content: space-between; font-size: 1.15rem; font-weight: 600; }
.drawer__note { font-size: 0.9rem; color: var(--ink-soft); }

.cart-item {
  display: grid; grid-template-columns: 76px 1fr auto; gap: 14px;
  align-items: center; padding: 14px 0;
}
.cart-item + .cart-item { border-top: 1px solid color-mix(in srgb, var(--choco) 14%, transparent); }
.cart-item__img {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--peach); display: grid; place-items: center;
}
.cart-item__img img { width: 86%; }
.cart-item__name { font-weight: 650; line-height: 1.25; }
.cart-item__meta { font-size: 0.9rem; color: var(--ink-soft); }
.cart-item__price { font-weight: 650; font-variant-numeric: tabular-nums; }

.stepper {
  display: inline-flex; align-items: center; gap: 2px;
  margin-top: 6px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--choco) 8%, transparent);
}
.stepper button {
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; display: grid; place-items: center;
}
.stepper button:active { transform: scale(0.92); }
.stepper output { min-width: 22px; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; }

.empty {
  display: grid; justify-items: center; text-align: center; gap: 14px;
  padding: 40px 8px;
}
.empty__plate {
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff 0 52%, var(--cream-200) 53% 100%);
  box-shadow: 0 18px 30px -18px color-mix(in srgb, var(--choco-950) 50%, transparent);
}
.empty h3 { font-size: 1.75rem; }
.empty p { color: var(--ink-soft); max-width: 28ch; }

@media (max-width: 640px) {
  .drawer {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; max-height: 86dvh;
    border-radius: 28px 28px 0 0;
    transform: translateY(100%);
  }
  .drawer::before {
    content: ""; position: absolute; top: 8px; left: 50%;
    width: 44px; height: 5px; border-radius: 9px;
    background: color-mix(in srgb, var(--choco) 25%, transparent);
    transform: translateX(-50%);
  }
}

/* Aviso breve */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: var(--z-toast);
  display: flex; align-items: center; gap: 14px;
  padding: 10px 10px 10px 20px;
  border-radius: var(--r-pill);
  background: var(--choco-950); color: var(--cream);
  box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--choco-950) 70%, transparent);
  transform: translate(-50%, calc(100% + 40px));
  transition: transform 200ms var(--ease-out);
  max-width: calc(100% - 32px);
}
.toast.is-open { transform: translate(-50%, 0); transition: transform 380ms var(--ease-drawer); }
.toast .btn { min-height: 40px; padding: 0 16px; font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   WhatsApp flotante (no se abre solo)
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: calc(var(--z-nav) - 2);
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #41bbbe; color: #fff; font-size: 30px;
  box-shadow: 0 14px 28px -12px rgba(61, 31, 22, 0.45);
  text-decoration: none;
  transition: transform var(--dur-press) var(--ease-out);
}
.wa-float:active { transform: scale(0.94); }

/* Volver arriba: se apila sobre el botón de WhatsApp, o sobre la barra de compra en la ficha. */
.to-top {
  position: fixed; right: 22px; bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: calc(var(--z-nav) - 2);
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  background: var(--cream); color: var(--choco-950); font-size: 24px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--choco-950) 12%, transparent), 0 14px 28px -12px rgba(61, 31, 22, 0.45);
  opacity: 0; transform: translateY(14px) scale(0.9); pointer-events: none;
  transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out), bottom 260ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.to-top[hidden] { display: grid !important; visibility: hidden; }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.to-top:active { transform: scale(0.94); }
.to-top:focus-visible { outline: 3px solid var(--teal-800); outline-offset: 3px; }
.wa-float ~ .to-top { bottom: calc(86px + env(safe-area-inset-bottom)); }
body:has(.buybar.is-visible) .to-top { bottom: calc(92px + env(safe-area-inset-bottom)); }
body.cart-open .to-top, body.menu-open .to-top { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .to-top:hover { transform: translateY(-3px); background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity 150ms linear; transform: none; }
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  background: var(--choco-950);
  color: var(--cream);
  padding: clamp(56px, 8vw, 96px) var(--gutter) 28px;
}
.footer__grid {
  max-width: 1240px; margin: 0 auto;
  display: grid; gap: 40px;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
}
.footer__brand img { width: 170px; }
.footer__brand p { margin-top: 18px; max-width: 30ch; color: color-mix(in srgb, var(--cream) 78%, transparent); }
.footer h3 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 14px; color: var(--yellow); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer a { text-decoration: none; color: color-mix(in srgb, var(--cream) 88%, transparent); }
.footer a:hover { color: var(--cream); text-decoration: underline; }
.footer__social { display: flex; gap: 6px; margin-top: 18px; }
.footer__social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--cream) 10%, transparent); font-size: 22px; }
.footer__legal {
  max-width: 1240px; margin: 56px auto 0; padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
  font-size: 0.9rem; color: color-mix(in srgb, var(--cream) 70%, transparent);
}

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Movimiento reducido: menos y más suave, no cero
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .menu, .menu.is-open { transition: opacity 200ms ease, visibility 0s; clip-path: none; opacity: 0; }
  .menu.is-open { opacity: 1; }
  .menu__item { transform: none; }
  .drawer, .drawer.is-open, .toast, .toast.is-open { transition-duration: 1ms; }
}


/* --------------------------------------------------------------------------
   Animaciones nativas ligadas al scroll, compartidas por todas las páginas
   -------------------------------------------------------------------------- */
.progress {
  position: fixed; left: 0; right: 0; top: 0; height: 3px;
  z-index: calc(var(--z-nav) + 1);
  background: var(--fucsia);
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}
@keyframes sd-progress { to { transform: scaleX(1); } }
@keyframes sd-rise {
  from { opacity: 0; transform: translateY(40px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress { animation: sd-progress linear both; animation-timeline: scroll(root block); }
    .sd { animation: sd-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  }
}
@media (prefers-reduced-motion: reduce) { .progress { display: none; } }


/* Texto libre (privacidad, páginas genéricas) */
.prose { padding: clamp(48px, 8vw, 110px) 20px; }
.prose__inner { max-width: 72ch; margin: 0 auto; display: grid; gap: 1em; }
.prose__inner h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 0.8em; }
.prose__inner h3 { font-size: 1.3rem; margin-top: 0.6em; }
.prose__inner a { color: var(--teal-800); text-underline-offset: 3px; }
.prose__inner ul, .prose__inner ol { padding-left: 1.2em; display: grid; gap: 0.4em; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Menú según el diseño de oct 2026: cápsula amarilla, logo con "Pastelería
   artesanal", enlaces en Bevellier y "Pedir mi torta" en café.
   -------------------------------------------------------------------------- */
.nav[data-theme="light"] {
  background: var(--yellow);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--choco-900);
}
.nav__logo img { height: 38px; width: auto; }
.nav__links a { font-family: var(--font-display); font-weight: 450; font-size: 1.08rem; letter-spacing: 0.01em; }
.nav[data-theme="light"] .nav__links a[aria-current="page"] { background: color-mix(in srgb, var(--choco) 12%, transparent); }
.nav[data-theme="light"] .nav__cta .btn { --btn-bg: var(--choco); --btn-ink: var(--cream); font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; }
@media (hover: hover) and (pointer: fine) {
  .nav[data-theme="light"] .nav__cta .btn:hover { --btn-bg: var(--choco-900); }
}
@media (max-width: 900px) { .nav__logo img { height: 34px; } }

/* Menú con las medidas del diseño (21 px en la mesa de 1864.8 px), en todo el sitio */
@media (min-width: 901px) {
  :root { --u: min(calc(100vw / 1864.8), calc(var(--screen) / 900)); }
  .nav__links a, .nav[data-theme] .nav__cta .btn { font-size: clamp(1rem, calc(21 * var(--u)), 25px); font-weight: 400; }
}

/* ==========================================================================
   Paleta de la marca (oct 2026). Las variables del prototipo inicial (fucsia, coral,
   rosado, pistacho, durazno…) apuntan ahora a los colores de la marca, así ningún
   componente heredado pinta fuera de ella.
   Marca: café #3d1f16 y #623427 · turquesa #41bbbe, #00afaf y #119393 · amarillo #ffca6c ·
   crema #fff5e4 y #ffe9c7 · naranja #f78b16 · blanco.
   ========================================================================== */
:root {
  --teal-600: #00afaf;
  --teal-800: #119393;
  --teal-950: #3d1f16;
  --sun: #ffca6c;
  --pink: #ffca6c;
  --fucsia: #41bbbe;
  --fucsia-800: #119393;
  --coral: #f78b16;
  --orange: #f78b16;
  --raspberry: #623427;
  --pistachio: #d9f1f2;
  --pistachio-800: #119393;
  --peach: #ffca6c;
  --caramel: #f78b16;
  --ink-soft: #623427;
}
/* Campos sin el gris por defecto del navegador */
input[type="search"], input[type="text"], input[type="email"], input[type="tel"], textarea { border-color: color-mix(in srgb, #3d1f16 18%, transparent); }
/* Nada se sale a los lados (el carrito lateral cerrado empujaba el ancho en tablet) */
html, body { overflow-x: clip; }
/* Plato vacío con ícono al centro (carrito vacío y sin resultados), en turquesa de la marca */
.empty__plate { display: grid; place-items: center; color: #41bbbe; font-size: 56px; }
.empty__plate .tm-icon, .empty__plate i, .empty__plate svg { width: 1em; height: 1em; }
@media (prefers-reduced-motion: no-preference) {
  .empty__plate > * { animation: empty-bob 2.6s ease-in-out infinite alternate; }
}
@keyframes empty-bob { to { transform: translateY(-6px) rotate(-4deg); } }