/* ==========================================================================
   Sweet Bites · estilos
   Paleta y tipografías sacadas del logo: crema, rosa de las rayas,
   azul del borde y chocolate de las letras.
   ========================================================================== */

@font-face {
  font-family: "Comfortaa";
  src: url("../fonts/comfortaa.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  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: "Nunito";
  src: url("../fonts/nunito.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
  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: "Meow Script";
  src: url("../fonts/meow-script.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  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;
}

/* Los mordiscos de la portada se animan con estas variables (0 = entera, 1 = mordida). */
@property --t1 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --t2 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --t3 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --t4 { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --t5 { syntax: "<number>"; inherits: true; initial-value: 1; }

:root {
  --cream: #FBF1E5;
  --paper: #FFFBF6;
  --pink: #F5D3CD;
  --pink-2: #E9B0A6;
  --blue: #B3C5CC;
  --blue-ink: #43626E;
  --choc: #331A16;
  --choc-2: #6B4A43;
  --green: #4F7A4C;
  --line: #EBD8CC;

  --font-display: "Comfortaa", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script: "Meow Script", "Segoe Script", "Brush Script MT", cursive;

  --wrap: 1180px;
  --gutter: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left), env(safe-area-inset-right));
  --header-h: 76px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --chomp: cubic-bezier(.3, .9, .35, 1.2);

  --shadow-soft: 0 18px 40px -26px rgba(51, 26, 22, .45);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--cream);
  color: var(--choc);
  font: 400 1.0625rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-color: var(--pink-2); }
button { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p, li, summary { text-wrap: pretty; }

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

::selection { background: var(--pink); color: var(--choc); }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

.sr-only,
.js .panel-title {
  position: absolute !important;
  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: 12px;
  top: 12px;
  z-index: 100;
  padding: .7rem 1.1rem;
  border-radius: 999px;
  background: var(--choc);
  color: var(--cream);
  font: 700 .95rem var(--font-display);
  text-decoration: none;
  translate: 0 -160%;
  transition: translate .3s var(--ease);
}
.skip-link:focus { translate: 0 0; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 52px;
  padding: .85rem 1.5rem;
  border: 2px solid var(--choc);
  border-radius: 999px;
  font: 700 1rem/1.1 var(--font-display);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .4s var(--spring),
    background-color .25s ease,
    color .25s ease,
    box-shadow .4s var(--ease);
}
.btn-solid {
  background: var(--choc);
  color: var(--cream);
  box-shadow: 0 12px 24px -14px rgba(51, 26, 22, .7);
}
.btn-line { background: transparent; color: var(--choc); }

@media (hover: hover) {
  .btn-solid:hover { transform: translateY(-2px); box-shadow: 0 18px 28px -16px rgba(51, 26, 22, .75); }
  .btn-line:hover { background: var(--choc); color: var(--cream); transform: translateY(-2px); }
}
.btn:active { transform: translateY(0) scale(.97); transition-duration: .12s; }

.round-btn {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 2px solid var(--choc);
  border-radius: 50%;
  background: transparent;
  color: var(--choc);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .25s ease, color .25s ease, transform .35s var(--spring), opacity .25s ease;
}
@media (hover: hover) {
  .round-btn:hover { background: var(--choc); color: var(--cream); }
}
.round-btn:active { transform: scale(.9); }
.round-btn:disabled { opacity: .3; cursor: default; background: transparent; color: var(--choc); }

/* ---------- Toldo ---------- */
.awning {
  --sw: 36px;      /* ancho de cada raya */
  --band: 22px;    /* alto de la franja */
  position: relative;
  z-index: 3;
  height: calc(var(--band) + var(--sw) / 2);
  background: repeating-linear-gradient(90deg, var(--pink) 0 var(--sw), var(--paper) var(--sw) calc(var(--sw) * 2));
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% var(--band) no-repeat,
    radial-gradient(circle calc(var(--sw) / 2) at 50% 0, #000 97%, #0000) 0 calc(var(--band) - 1px) / var(--sw) calc(var(--sw) / 2) repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% var(--band) no-repeat,
    radial-gradient(circle calc(var(--sw) / 2) at 50% 0, #000 97%, #0000) 0 calc(var(--band) - 1px) / var(--sw) calc(var(--sw) / 2) repeat-x;
  margin-bottom: calc(var(--sw) / -2 + 4px);
}

/* ---------- Cabecera ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  transition: box-shadow .4s var(--ease);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--cream) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  backdrop-filter: saturate(1.3) blur(14px);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.site-header.is-stuck::before { opacity: 1; }
.site-header.is-stuck { box-shadow: 0 1px 0 var(--line), 0 14px 30px -24px rgba(51, 26, 22, .5); }

.header-sentinel { height: 1px; margin-bottom: -1px; }

.header-bar {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  position: relative;
  z-index: 2;
  display: block;
  flex: none;
  border-radius: 50%;
}
.brand img {
  width: 90px;
  height: auto;
  transform-origin: 0 25%;
  transition: transform .6s var(--ease);
  filter: drop-shadow(0 6px 10px rgba(51, 26, 22, .12));
}
.site-header:not(.is-stuck) .brand img { transform: scale(1.32) translateY(6px); }

.nav { margin-left: auto; }
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
}
.nav-list a {
  position: relative;
  display: block;
  padding: .6rem .95rem;
  border-radius: 999px;
  font: 700 .95rem/1.1 var(--font-display);
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}
@media (hover: hover) {
  .nav-list a:hover { background: color-mix(in srgb, var(--pink) 70%, transparent); }
}
.nav-list a[aria-current] { background: var(--pink); }

.nav-panel-note { display: none; }

.status {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  padding: .5rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font: 700 .84rem/1.2 var(--font-display);
  white-space: nowrap;
}
.status-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pink-2);
}
.status.is-open .status-dot { background: var(--green); }
@media (prefers-reduced-motion: no-preference) {
  .status.is-open .status-dot { animation: ping 2.6s ease-out infinite; }
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(79, 122, 76, .45); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(79, 122, 76, 0); }
}

.site-header .status { display: none; }
@media (min-width: 1100px) {
  .site-header .status { display: inline-flex; }
  .hero .status { display: none; }
}

/* Menú móvil */
.nav-toggle { display: none; }

@media (max-width: 899px) {
  :root { --header-h: 68px; }

  .brand img { width: 70px; }
  .site-header:not(.is-stuck) .brand img { transform: scale(1.18) translateY(4px); }

  .nav-toggle {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    height: 46px;
    padding: 0 1.05rem 0 .9rem;
    border: 2px solid var(--choc);
    border-radius: 999px;
    background: var(--paper);
    font: 700 .95rem/1 var(--font-display);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle-icon { position: relative; width: 18px; height: 12px; }
  .nav-toggle-icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2.4px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .45s var(--spring), top .3s var(--ease);
  }
  .nav-toggle-icon span:first-child { top: 1px; }
  .nav-toggle-icon span:last-child { top: 8.6px; }
  .nav-open .nav-toggle-icon span:first-child { top: 4.8px; transform: rotate(45deg); }
  .nav-open .nav-toggle-icon span:last-child { top: 4.8px; transform: rotate(-45deg); }

  .nav-panel {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: calc(var(--header-h) + 48px) var(--gutter) calc(32px + env(safe-area-inset-bottom));
    background:
      repeating-linear-gradient(90deg, var(--pink) 0 36px, var(--paper) 36px 72px) top / 100% 14px no-repeat,
      var(--cream);
    overflow-y: auto;
    overscroll-behavior: contain;
    clip-path: circle(0 at var(--ox, calc(100% - 60px)) var(--oy, 34px));
    visibility: hidden;
    transition: clip-path .55s var(--ease), visibility 0s linear .55s;
  }
  .nav-open .nav-panel {
    clip-path: circle(150vmax at var(--ox, calc(100% - 60px)) var(--oy, 34px));
    visibility: visible;
    transition: clip-path .7s var(--ease), visibility 0s;
  }
  .nav-list { flex-direction: column; gap: 2px; }
  .nav-list li {
    opacity: 0;
    translate: 0 16px;
    transition: opacity .4s ease, translate .6s var(--ease);
  }
  .nav-open .nav-list li { opacity: 1; translate: 0 0; }
  .nav-open .nav-list li:nth-child(1) { transition-delay: .12s; }
  .nav-open .nav-list li:nth-child(2) { transition-delay: .17s; }
  .nav-open .nav-list li:nth-child(3) { transition-delay: .22s; }
  .nav-open .nav-list li:nth-child(4) { transition-delay: .27s; }
  .nav-list a {
    padding: .55rem 0;
    font-size: clamp(1.9rem, 8.5vw, 2.6rem);
    letter-spacing: -.02em;
    border-radius: 12px;
  }
  .nav-list a[aria-current] { background: none; text-decoration: underline; text-decoration-color: var(--pink-2); text-decoration-thickness: 4px; }
  .nav-panel-note { display: block; margin: 0; color: var(--choc-2); font-weight: 600; }

  .nav-open { overflow: hidden; }
  .nav-open .site-header::before { opacity: 0; }
}

/* ---------- Portada ---------- */
.hero {
  padding-block: clamp(36px, 6vw, 72px) clamp(64px, 9vw, 120px);
}
.hero-grid {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

.hero-title {
  max-width: 12.5ch;
  margin-bottom: .5em;
  font: 700 clamp(2.4rem, 1.35rem + 4.4vw, 4.5rem)/1.04 var(--font-display);
  letter-spacing: -.03em;
}
.hero-lead {
  max-width: 37ch;
  margin-bottom: 1.9em;
  color: var(--choc-2);
  font-size: clamp(1.08rem, 1rem + .35vw, 1.26rem);
  line-height: 1.55;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .status { margin-top: 26px; }

.hero-art {
  /* El tamaño sale del ancho de la columna (cqi), con tope de 480px */
  --size: min(84cqi, 480px);
  container-type: inline-size;
  position: relative;
  display: grid;
  place-items: center;
  padding-block: clamp(24px, 4vw, 44px);
}

.saucer {
  position: absolute;
  width: calc(var(--size) * 1.13);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-linear-gradient(90deg, var(--pink) 0 calc(var(--size) * .075), var(--paper) 0 calc(var(--size) * .15));
  background-position: center;
  translate: 4% 3%;
}

.cookie {
  --rim: calc(var(--size) * .024);
  --tooth: calc(var(--size) * .1);
  position: relative;
  width: var(--size);
  aspect-ratio: 1;
  filter: drop-shadow(0 26px 30px rgba(51, 26, 22, .25));
}

.cookie-rim,
.cookie-face {
  --bites:
    radial-gradient(circle calc((var(--tooth) + var(--o)) * var(--t1)) at 60.92% -1.35%, #0000 97%, #000),
    radial-gradient(circle calc((var(--tooth) + var(--o)) * var(--t2)) at 76.25% 4.53%, #0000 97%, #000),
    radial-gradient(circle calc((var(--tooth) + var(--o)) * var(--t3)) at 89.02% 14.87%, #0000 97%, #000),
    radial-gradient(circle calc((var(--tooth) + var(--o)) * var(--t4)) at 97.96% 28.65%, #0000 97%, #000),
    radial-gradient(circle calc((var(--tooth) + var(--o)) * var(--t5)) at 102.21% 44.51%, #0000 97%, #000);
  position: absolute;
  inset: 0;
  border-radius: 50%;
  -webkit-mask-image: var(--bites);
  -webkit-mask-composite: source-in;
  mask-image: var(--bites);
  mask-composite: intersect;
}
.cookie-rim { --o: 0px; background: var(--blue); }
.cookie-face {
  --o: var(--rim);
  overflow: hidden;
  clip-path: circle(calc(50% - var(--rim)));
  background: var(--pink);
}
.cookie-face picture,
.cookie-face img {
  width: 100%;
  height: 100%;
}
.cookie-face img { object-fit: cover; }

.crumb {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 9px;
  height: 7px;
  border-radius: 45% 55% 40% 60%;
  background: #E7C9A3;
  opacity: 0;
  pointer-events: none;
}
.crumb-dark { background: #8A5A3C; width: 7px; height: 6px; }
.crumb-pink { background: var(--pink-2); }

.price-tag {
  position: absolute;
  left: max(-4px, calc(50% - var(--size) * .62));
  bottom: 1%;
  z-index: 2;
  display: grid;
  place-content: center;
  width: max(118px, calc(var(--size) * .31));
  aspect-ratio: 1;
  margin: 0;
  padding: 16%;
  text-align: center;
  color: var(--cream);
  background: var(--choc);
  -webkit-mask: url("../img/marca/sello.svg") center / contain no-repeat;
  mask: url("../img/marca/sello.svg") center / contain no-repeat;
  rotate: -11deg;
  font-family: var(--font-display);
  font-weight: 700;
}
.price-tag span { font-size: clamp(.64rem, .55rem + .3vw, .78rem); line-height: 1.25; }
.price-tag strong { display: block; margin-top: .25em; font-size: clamp(1.3rem, 1rem + 1.1vw, 1.75rem); line-height: 1; letter-spacing: -.02em; }

/* Animación de entrada: un único momento, el mordisco */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-title,
  .js .hero-lead,
  .js .hero-actions,
  .js .hero .status { animation: rise .9s var(--ease) both; }
  .js .hero-lead { animation-delay: .08s; }
  .js .hero-actions { animation-delay: .16s; }
  .js .hero .status { animation-delay: .24s; }

  .js .hero-art { animation: plate-in 1.1s var(--ease) .05s both; }

  .js .cookie { --t1: 0; --t2: 0; --t3: 0; --t4: 0; --t5: 0; }
  .js .cookie.is-bitten {
    animation:
      bite5 .46s var(--chomp) .45s both,
      bite4 .46s var(--chomp) .56s both,
      bite3 .46s var(--chomp) .67s both,
      bite2 .46s var(--chomp) .78s both,
      bite1 .46s var(--chomp) .89s both,
      nibble .9s var(--ease) .45s both;
  }
  .js .cookie.is-bitten .crumb { animation: crumb 1s cubic-bezier(.2, .7, .3, 1) calc(var(--d) + .5s) both; }

  .js .price-tag { scale: 0; }
  .js .cookie.is-bitten ~ .price-tag { animation: tag-pop .75s var(--spring) 1.25s both; }
}

@keyframes rise { from { opacity: 0; translate: 0 28px; } }
@keyframes plate-in { from { opacity: 0; scale: .9; rotate: -6deg; } }
@keyframes bite1 { 0% { --t1: 0; } 60% { --t1: 1.14; } 100% { --t1: 1; } }
@keyframes bite2 { 0% { --t2: 0; } 60% { --t2: 1.14; } 100% { --t2: 1; } }
@keyframes bite3 { 0% { --t3: 0; } 60% { --t3: 1.14; } 100% { --t3: 1; } }
@keyframes bite4 { 0% { --t4: 0; } 60% { --t4: 1.14; } 100% { --t4: 1; } }
@keyframes bite5 { 0% { --t5: 0; } 60% { --t5: 1.14; } 100% { --t5: 1; } }
@keyframes nibble {
  0%, 100% { rotate: 0deg; scale: 1; }
  20% { rotate: -1.5deg; scale: .985; }
  45% { rotate: 1deg; scale: .99; }
  70% { rotate: -.5deg; }
}
@keyframes crumb {
  0% { opacity: 0; transform: translate(0, 0) rotate(0); }
  12% { opacity: 1; }
  60% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1.25), calc(var(--dy) + 90px)) rotate(calc(var(--r) * 2)); }
}
@keyframes tag-pop {
  0% { scale: 0; rotate: -40deg; }
  100% { scale: 1; rotate: -11deg; }
}

/* Al bajar, la foto gira dentro del mordisco como un plato */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .cookie-face picture {
      animation: turn linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
    .saucer {
      animation: drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
  }
}
@keyframes turn { to { rotate: 32deg; } }
@keyframes drift { to { translate: 4% 13%; rotate: 8deg; } }

/* ---------- Encabezados de sección ---------- */
.section-head {
  max-width: 60ch;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.section-head p {
  max-width: 52ch;
  margin: 1.1rem 0 0;
  color: var(--choc-2);
}
.script-title {
  display: inline-block;
  font: 400 clamp(3.4rem, 2.1rem + 5.2vw, 6.2rem)/.9 var(--font-script);
  -webkit-text-stroke: .7px currentColor;
  letter-spacing: .01em;
  rotate: -3deg;
  transform-origin: left bottom;
  padding-right: .1em;
}

/* Bordes festoneados de papel */
.scallop-top { position: relative; }
.scallop-top::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 16px;
  background: radial-gradient(circle 16px at 16px 16px, var(--edge) 97%, #0000) 0 0 / 32px 16px repeat-x;
  pointer-events: none;
}

/* ---------- Vitrina ---------- */
.vitrina {
  --edge: var(--paper);
  padding-block: clamp(56px, 8vw, 104px) clamp(48px, 7vw, 88px);
  background: var(--paper);
}

.shelf {
  --treat: clamp(164px, 19vw, 214px);
  position: relative;
  background:
    linear-gradient(90deg, #0000, var(--blue) 6%, var(--blue) 94%, #0000) 0 calc(10px + var(--treat) * .955) / 100% 4px no-repeat,
    linear-gradient(90deg, #0000, color-mix(in srgb, var(--blue) 30%, transparent) 6%, color-mix(in srgb, var(--blue) 30%, transparent) 94%, #0000) 0 calc(14px + var(--treat) * .955) / 100% 14px no-repeat;
}

.shelf-track {
  --edge-pad: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  list-style: none;
  margin: 0;
  padding: 10px var(--edge-pad) 26px;
  display: flex;
  gap: clamp(18px, 2.6vw, 34px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge-pad);
  scrollbar-width: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 var(--gutter), #000 calc(100% - var(--gutter)), #0000);
  mask-image: linear-gradient(90deg, #0000, #000 var(--gutter), #000 calc(100% - var(--gutter)), #0000);
}
.shelf-track::-webkit-scrollbar { display: none; }
.shelf-track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.shelf-track img { -webkit-user-drag: none; user-select: none; }

.treat {
  flex: 0 0 var(--treat);
  scroll-snap-align: start;
  text-align: center;
}
.doily {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: url("../img/marca/blonda.svg") center / 100% no-repeat;
  filter: drop-shadow(0 5px 8px rgba(51, 26, 22, .1));
}
.doily picture {
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 12px 18px -10px rgba(51, 26, 22, .55);
  transition: transform .7s var(--ease);
}
.doily img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) {
  .treat:hover .doily picture { transform: rotate(12deg) scale(1.06); }
}
.treat-name {
  margin: 16px 0 8px;
  font: 700 1.02rem/1.25 var(--font-display);
}
.treat-price {
  display: inline-block;
  margin: 0;
  padding: .25rem .8rem;
  border-radius: 999px;
  background: var(--pink);
  font: 700 .95rem/1.2 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.shelf-controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

/* ---------- Carta ---------- */
.carta { padding-block: clamp(72px, 9vw, 124px); }

.menu-card {
  position: relative;
  padding: clamp(20px, 3.6vw, 48px);
  border: 2px solid var(--blue);
  border-radius: 34px;
  background: var(--paper);
  box-shadow: 0 0 0 7px var(--paper), 0 0 0 9px var(--blue), var(--shadow-soft);
}

.tabs {
  position: relative;
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto clamp(28px, 4vw, 44px);
  padding: 5px;
  border-radius: 999px;
  background: var(--cream);
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.tabs::-webkit-scrollbar { display: none; }
.no-js .tabs { display: none; }

.tab {
  position: relative;
  z-index: 1;
  flex: none;
  padding: .85rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--choc-2);
  font: 700 .95rem/1 var(--font-display);
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color .35s ease;
}
@media (hover: hover) {
  .tab:hover { color: var(--choc); }
}
.tab[aria-selected="true"] { color: var(--cream); }
.tabs-ink {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--w, 0);
  height: var(--h, 0);
  border-radius: 999px;
  background: var(--choc);
  transform: translate(var(--x, 0), var(--y, 0));
  transition: transform .55s var(--ease), width .55s var(--ease), height .55s var(--ease);
}
@media (max-width: 639px) {
  .tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    border-radius: 28px;
  }
  .tab {
    padding: .8rem .6rem;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
  }
  /* Con un número impar de pestañas, la última ocupa toda la fila */
  .tab:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
}

.panel { border-radius: 18px; }
.panel[hidden] { display: none; }
.no-js .panel + .panel { margin-top: 56px; }
.panel-title {
  margin-bottom: 1.2rem;
  font: 700 1.5rem/1.2 var(--font-display);
}
@media (prefers-reduced-motion: no-preference) {
  .panel.is-entering { animation: panel-in .6s var(--ease) both; }
  .panel.is-entering .menu-group { animation: rise .7s var(--ease) both; }
  .panel.is-entering .menu-group:nth-child(2) { animation-delay: .05s; }
  .panel.is-entering .menu-group:nth-child(3) { animation-delay: .1s; }
  .panel.is-entering .menu-group:nth-child(4) { animation-delay: .15s; }
  .panel.is-entering .panel-photos { animation: photo-in .8s var(--ease) both; }
}
@keyframes panel-in { from { opacity: 0; } }
@keyframes photo-in { from { opacity: 0; scale: .94; rotate: 3deg; } }

.panel-grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
}
@media (min-width: 880px) {
  .panel-grid { grid-template-columns: minmax(0, 1fr) 290px; align-items: start; }
}

.menu-groups {
  display: grid;
  gap: 32px 52px;
}
@media (min-width: 640px) {
  .menu-groups { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
}

.menu-group h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .7rem;
  margin-bottom: .6rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--pink);
  font: 700 1.16rem/1.25 var(--font-display);
}
.group-price {
  padding: .2rem .65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 38%, transparent);
  color: var(--blue-ink);
  font: 800 .86rem/1.2 var(--font-body);
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-list li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .48rem 0;
}
.menu-list li::after {
  content: "";
  order: 1;
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  border-bottom: 2px dotted var(--pink-2);
  translate: 0 -.28em;
}
.menu-list .dish { order: 0; font-weight: 600; }
.menu-list .price {
  order: 2;
  flex: none;
  font: 700 1rem/1.2 var(--font-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.menu-list-plain { columns: 2 220px; column-gap: 48px; }
.menu-list-plain li { break-inside: avoid; }
.menu-list-plain li::after { display: none; }
.menu-list-plain li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pink-2);
  translate: 0 -.12em;
}

.combo {
  display: inline-block;
  margin-left: .3rem;
  padding: .05rem .5rem;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  color: var(--blue-ink);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.35;
  vertical-align: .1em;
  white-space: nowrap;
}

.menu-note { margin: 1rem 0 0; color: var(--choc-2); }

.panel-intro {
  max-width: 60ch;
  margin: -.6rem 0 1.8rem;
  color: var(--choc-2);
  text-align: center;
  margin-inline: auto;
}
.menu-group-wide { grid-column: 1 / -1; }
.group-note {
  margin: -.1rem 0 .6rem;
  color: var(--choc-2);
  font-size: .95rem;
}
.group-note a { font-weight: 700; }

.menu-list-text li { display: block; padding: .45rem 0; }
.menu-list-text li::after { display: none; }
.menu-list-text strong { font-family: var(--font-display); font-weight: 700; }

.cake-prices {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.cake-prices th,
.cake-prices td {
  padding: .55rem .4rem;
  border-bottom: 2px dotted var(--pink-2);
  text-align: right;
  white-space: nowrap;
}
.cake-prices th:first-child { text-align: left; white-space: normal; padding-left: 0; }
.cake-prices thead th {
  border-bottom: 2px solid var(--pink);
  color: var(--blue-ink);
  font: 800 .84rem/1.2 var(--font-body);
}
.cake-prices tbody th { font-weight: 600; }
.cake-prices td { font: 700 1rem/1.2 var(--font-display); }
.cake-prices tbody tr:last-child th { color: var(--choc-2); font-style: italic; }

.panel-photos { display: none; }
@media (min-width: 880px) {
  .panel-photos { position: relative; display: block; }
}
.arch img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 999px 999px 26px 26px;
}
.panel-photos-duo { padding-bottom: 40px; }
.panel-photos-duo .round {
  position: absolute;
  left: -18%;
  bottom: 0;
  width: 54%;
}
.round img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 7px solid var(--paper);
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
}

/* ---------- Tartas ---------- */
.tartas {
  --edge: var(--pink);
  position: relative;
  padding-block: clamp(80px, 10vw, 136px);
  background: repeating-linear-gradient(90deg, var(--pink) 0 60px, color-mix(in srgb, var(--pink) 62%, var(--paper)) 60px 120px);
}
.tartas-grid {
  display: grid;
  gap: clamp(48px, 7vw, 88px);
  align-items: center;
}
@media (min-width: 960px) {
  .tartas-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}

.tartas-art {
  position: relative;
  width: min(100%, 420px);
  margin-inline: auto;
}
.tartas-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 9px solid var(--paper);
  border-radius: 999px 999px 34px 34px;
  box-shadow: 0 30px 50px -30px rgba(51, 26, 22, .55);
}
.cake-plan {
  position: absolute;
  right: -7%;
  bottom: -7%;
  width: 44%;
  filter: drop-shadow(0 14px 18px rgba(51, 26, 22, .25));
}
.cake-plate { fill: var(--paper); stroke: var(--blue); stroke-width: 3; }
.cake-top {
  fill: #F8DED8;
  stroke: var(--pink-2);
  stroke-width: 3;
  stroke-dasharray: .1 5.4;
  stroke-linecap: round;
}
.cake-cuts line {
  stroke: var(--choc);
  stroke-width: 2.2;
  stroke-linecap: round;
  transform: rotate(var(--a));
  transition: transform .8s var(--spring);
}
.cake-plan[data-slices="8"] .cake-cuts line { transform: rotate(var(--a8)); }
.cake-berries circle { fill: #B9473F; }

.tartas-lead {
  max-width: 44ch;
  margin: 1.3rem 0 0;
  font-size: clamp(1.08rem, 1rem + .3vw, 1.22rem);
}

.sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 1.8rem 0 1rem;
  padding: 0;
  border: 0;
}
.sizes legend {
  width: 100%;
  margin-bottom: .8rem;
  padding: 0;
  font: 700 1.02rem/1.3 var(--font-display);
}
.size { position: relative; }
.size input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.size-card {
  display: grid;
  gap: .25rem;
  min-width: 150px;
  padding: 1rem 1.3rem;
  border: 2px solid transparent;
  border-radius: 24px;
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  transition: transform .45s var(--spring), border-color .25s ease, background-color .25s ease, box-shadow .45s var(--ease);
}
.size-n { font: 700 1rem/1.2 var(--font-display); }
.size-price { font: 700 1.7rem/1 var(--font-display); letter-spacing: -.02em; }
.size input:checked + .size-card {
  border-color: var(--choc);
  background: var(--paper);
  transform: translateY(-4px);
  box-shadow: 0 16px 24px -18px rgba(51, 26, 22, .7);
}
.size input:focus-visible + .size-card { outline: 3px solid var(--blue-ink); outline-offset: 3px; }
@media (hover: hover) {
  .size:hover input:not(:checked) + .size-card { background: var(--paper); }
}

.size-math { margin: 0 0 .4rem; font-size: 1.06rem; }
.size-note { margin: 0 0 1.4rem; color: var(--choc-2); font-size: .95rem; max-width: 54ch; }
.size-math strong { display: inline-block; font-family: var(--font-display); }
@media (prefers-reduced-motion: no-preference) {
  .size-math strong.pop { animation: pop .5s var(--spring); }
}
@keyframes pop { 0% { scale: .7; } 100% { scale: 1; } }

.tartas-flavours {
  max-width: 54ch;
  margin-bottom: 1.8rem;
  color: var(--choc-2);
}

/* ---------- Preguntas ---------- */
.faq { padding-block: clamp(72px, 9vw, 120px); }
.faq-grid { display: grid; gap: 28px; }
@media (min-width: 900px) {
  .faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
}
.faq details { border-bottom: 2px solid var(--pink); }
.faq details:first-child { border-top: 2px solid var(--pink); }
.faq summary {
  position: relative;
  padding: 1.2rem 3rem 1.2rem 0;
  list-style: none;
  font: 700 1.1rem/1.35 var(--font-display);
  cursor: pointer;
  border-radius: 8px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: .3rem;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  background:
    linear-gradient(var(--choc) 0 0) center / 12px 2.4px no-repeat,
    linear-gradient(var(--choc) 0 0) center / 2.4px 12px no-repeat,
    var(--pink);
  transition: rotate .45s var(--spring), background-color .25s ease;
}
.faq details[open] summary::after { rotate: 135deg; }
.faq details p {
  max-width: 60ch;
  margin: 0;
  padding-bottom: 1.3rem;
  color: var(--choc-2);
}
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .faq { interpolate-size: allow-keywords; }
    .faq details::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size .45s var(--ease), content-visibility .45s allow-discrete;
    }
    .faq details[open]::details-content { block-size: auto; }
  }
}

/* ---------- Dónde estamos ---------- */
.visita {
  --edge: var(--paper);
  padding-block: clamp(72px, 9vw, 120px) clamp(88px, 10vw, 140px);
  background: var(--paper);
}
.visita-grid {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
}
@media (min-width: 960px) {
  .visita-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; }
}

.address {
  display: grid;
  gap: .1rem;
  margin: 1.5rem 0;
  font-style: normal;
  font-size: 1.15rem;
}
.address strong { font: 700 1.3rem/1.3 var(--font-display); }

.visita-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 2.4rem; }

.hours-title { margin-bottom: .7rem; font: 700 1.16rem/1.3 var(--font-display); }
.hours {
  width: 100%;
  max-width: 440px;
  border-collapse: separate;
  border-spacing: 0;
}
.hours th,
.hours td {
  padding: .75rem .9rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.hours th { font-weight: 600; }
.hours td {
  font: 700 1rem/1.3 var(--font-display);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.hours tr.is-today th,
.hours tr.is-today td { background: var(--pink); border-bottom-color: transparent; }
.hours tr.is-today th { border-radius: 14px 0 0 14px; }
.hours tr.is-today td { border-radius: 0 14px 14px 0; }
.hours-today { margin: .9rem 0 0; color: var(--choc-2); }

.map-frame {
  position: relative;
  aspect-ratio: 1;
  border: 2px solid var(--blue);
  border-radius: 34px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 0 7px var(--paper), 0 0 0 9px var(--blue), var(--shadow-soft);
  background: repeating-linear-gradient(90deg, var(--pink) 0 36px, var(--cream) 36px 72px);
}
@media (min-width: 640px) {
  .map-frame { aspect-ratio: 5 / 4; }
}
.map { position: absolute; inset: 0; }
.map-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  text-decoration: none;
}
.map-fallback span {
  padding: .8rem 1.2rem;
  border-radius: 999px;
  background: var(--paper);
  font: 700 .95rem var(--font-display);
}

/* Leaflet con los colores de la casa */
.map.leaflet-container {
  background: var(--cream);
  font-family: var(--font-body);
}
.map .leaflet-tile-pane { filter: sepia(.22) saturate(.8) hue-rotate(-12deg) brightness(1.04) contrast(.94); }
.map .leaflet-control-zoom {
  border: 0;
  box-shadow: 0 8px 18px -10px rgba(51, 26, 22, .5);
  border-radius: 14px;
  overflow: hidden;
}
.map .leaflet-control-zoom a {
  width: 38px;
  height: 38px;
  line-height: 38px;
  color: var(--choc);
  background: var(--paper);
  border-bottom-color: var(--line);
}
.map .leaflet-control-attribution {
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  border-radius: 10px 0 0 0;
  font-size: 11px;
}
.sb-pin { background: none; border: 0; }
.sb-pin svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 8px rgba(51, 26, 22, .35)); }
@media (prefers-reduced-motion: no-preference) {
  .sb-pin svg { animation: pin-drop .9s var(--spring) .2s both; transform-origin: 50% 100%; }
}
@keyframes pin-drop {
  0% { translate: 0 -60px; opacity: 0; scale: .7; }
  60% { opacity: 1; }
  100% { translate: 0 0; scale: 1; }
}
.leaflet-tooltip.sb-tip {
  padding: .35rem .75rem;
  border: 0;
  border-radius: 999px;
  background: var(--choc);
  color: var(--cream);
  font: 700 .85rem/1.2 var(--font-display);
  box-shadow: 0 8px 16px -8px rgba(51, 26, 22, .6);
}
.leaflet-tooltip.sb-tip::before { border-top-color: var(--choc); }

/* ---------- Pie ---------- */
.site-footer {
  --edge: var(--choc);
  position: relative;
  padding: clamp(64px, 8vw, 96px) 0 calc(28px + env(safe-area-inset-bottom));
  background: var(--choc);
  color: var(--cream);
}
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 170px repeat(3, minmax(0, 1fr)); }
}
.footer-badge {
  display: grid;
  place-items: center;
  width: 160px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--cream) 18%, transparent);
  rotate: -6deg;
}
.footer-badge img { width: 140px; }
.footer-title {
  margin: 0 0 .6rem;
  color: var(--pink);
  font: 700 1rem/1.3 var(--font-display);
}
.footer-col p { margin: 0; color: color-mix(in srgb, var(--cream) 84%, var(--choc)); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--pink); }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
  margin-top: 52px;
  padding-top: 20px;
  border-top: 1px solid rgba(251, 241, 229, .16);
  color: rgba(251, 241, 229, .72);
  font-size: .88rem;
}
.footer-legal p { margin: 0; }
.footer-legal a {
  color: var(--cream);
  font-weight: 700;
  text-decoration-color: color-mix(in srgb, var(--pink) 70%, transparent);
}
.footer-legal a:hover { text-decoration-color: var(--pink); }

/* ---------- Aviso flotante ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 80;
  padding: .8rem 1.25rem;
  border-radius: 999px;
  background: var(--choc);
  color: var(--cream);
  font: 700 .95rem/1.2 var(--font-display);
  box-shadow: 0 16px 30px -14px rgba(51, 26, 22, .7);
  translate: -50% 160%;
  transition: translate .5s var(--spring);
  pointer-events: none;
}
.toast.is-visible { translate: -50% 0; }

/* ---------- Aparición al hacer scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on [data-reveal] {
    opacity: 0;
    translate: 0 26px;
    transition: opacity .9s var(--ease), translate .9s var(--ease);
  }
  .reveal-on [data-reveal].is-in { opacity: 1; translate: 0 0; }

  .reveal-on .shelf .treat {
    opacity: 0;
    translate: 0 30px;
    transition: opacity .8s var(--ease), translate .9s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .reveal-on .shelf.is-in .treat { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .awning, .site-header, .hero-art, .shelf-controls, .map-frame, .toast { display: none !important; }
  .js .panel[hidden] { display: block !important; }
  body { background: #fff; }
}