/* ============================================================
   CROSTA PANADERÍA — STYLES.CSS
   Ciruela del logo, papel de los flyers y corteza.
   Planos y sin adornos: el pan y las fotos llevan el peso.
   ============================================================ */

/* ── Tipografías (alojadas en el sitio, licencia OFL) ── */
@font-face {
  font-family: 'Young Serif';
  src: url('fonts/young-serif-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-variable.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ── */
:root {
  /* Marca */
  --plum: #441843;          /* ciruela del logo: acción y títulos */
  --plum-deep: #2C0E2B;     /* barra del carrito, pie */
  --plum-press: #5A2457;    /* hover / presionado */
  --plum-pale: #F1E6EE;
  --crust: #7A4F15;         /* corteza: etiquetas "Nuevo" y "Oferta" */
  --crust-text: #8C5E1F;    /* texto caramelo legible (5.6:1) */
  --crust-pale: #F2E3C8;

  /* Superficies: papel de los flyers de Crosta */
  --bg: #FBF7F1;
  --surface: #FFFFFF;
  --tone: #F4EBDF;          /* un paso de tono para separar sin líneas */
  --tone-deep: #EADBC6;

  /* Tinta */
  --ink: #2E1C16;           /* 15:1 sobre el fondo */
  --ink-soft: #665049;      /* texto secundario, 7:1 sobre el fondo */
  --ink-hint: #77635C;      /* placeholders y notas, 5.3:1 */
  --success: #1F8A55;
  --danger: #B3261E;
  --wa: #13803D;            /* verde WhatsApp oscurecido: texto blanco a 5:1 */
  --wa-press: #0F6E34;

  /* Escala tipográfica: 5 tamaños */
  --fs-small: 13px;
  --fs-body: 16px;
  --fs-lead: 19px;
  --fs-heading: 24px;
  --fs-display: 32px;

  --font-display: 'Young Serif', Georgia, serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* Forma y movimiento */
  --radius-card: 16px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* exponencial, sin rebote */
  --dur: 0.22s;
  --shadow-float: 0 12px 32px rgba(44, 14, 43, 0.22);
  --scrim: rgba(36, 12, 35, 0.6);
  /* Tarjetas de producto */
  --micro-border: #EAE3EB;                  /* lavanda grisáceo muy pálido */
  --shadow-ambient: 0 1px 2px rgba(74, 40, 30, 0.04), 0 14px 32px -14px rgba(122, 79, 21, 0.18);
  --shadow-ambient-hover: 0 1px 2px rgba(74, 40, 30, 0.05), 0 20px 40px -16px rgba(122, 79, 21, 0.26);
  --jewel: linear-gradient(145deg, #5A2457 0%, #3A1238 55%, #1C081B 100%); /* berenjena → ciruela casi negra */
  --halo: #F6F1F6;

  --header-h: 64px;
  --tabs-h: 56px;
  --page-max: 1100px;
  --gutter: max(16px, calc((100% - var(--page-max)) / 2 + 20px));
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--plum);
  accent-color: var(--plum);
}
body.no-scroll { overflow: hidden; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3, p { overflow-wrap: break-word; }
p { text-wrap: pretty; }
::selection { background: var(--plum); color: #fff; }
:focus-visible { outline: 3px solid var(--crust-text); outline-offset: 2px; border-radius: 6px; }
.tabular { font-variant-numeric: tabular-nums; }

/* Íconos SVG de un solo trazo */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.icon-btn:active { transform: scale(0.94); }

/* Botones planos, una sola forma: píldora */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 14px 20px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-body);
  font-weight: 700;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--plum); color: #fff; }
.btn-primary:hover { background: var(--plum-press); }
.btn-quiet { min-height: 46px; color: var(--ink-soft); font-weight: 600; }
.btn-quiet:hover { color: var(--plum); }
.btn-whatsapp { background: var(--wa); color: #fff; }
.btn-whatsapp:hover { background: var(--wa-press); }
.btn-whatsapp svg { width: 22px; height: 22px; fill: #fff; }

/* Etiquetas */
.tag {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
}
.tag-new { background: var(--crust); color: #fff; }
.tag-sale { background: var(--plum); color: #fff; }

/* ════════════════════════════════
   HEADER
════════════════════════════════ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--gutter);
}
.header-logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.header-logo img { height: 42px; width: 42px; object-fit: cover; border-radius: 50%; }
.header-logo-text { display: flex; flex-direction: column; line-height: 1.1; font-weight: inherit; }
.header-logo-text .brand { font-family: var(--font-display); font-size: var(--fs-lead); color: var(--plum); }
.header-logo-text .sub { font-size: var(--fs-small); color: var(--ink-soft); }
.header-badge {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--crust);
  background: var(--crust-pale);
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* ════════════════════════════════
   HERO
════════════════════════════════ */
.hero {
  background: var(--tone);
  text-align: center;
  padding: 36px 16px 40px;          /* mínimo legible si el navegador no resuelve --gutter */
  padding-inline: var(--gutter);
}
.hero-inner { max-width: 520px; margin: 0 auto; }
.hero-logo {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 18px;
}
.hero-tagline {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--plum);
  margin-bottom: 8px;
  text-wrap: balance;
}
.hero-phone {
  display: inline-block;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink-soft);
  padding: 6px 8px;
  margin-bottom: 20px;
  text-decoration: underline;
  text-decoration-color: var(--tone-deep);
  text-underline-offset: 4px;
}
.hero-phone:hover { color: var(--plum); text-decoration-color: currentColor; }

/* ── Tarjetas destacadas (adaptadas de la referencia de Rodrigo) ──
   Degradado de marca + marcador con ícono.
   Tres temas: ciruela (logo), corteza (caramelo) y miga (crema). */
.highlights {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  padding: 4px 16px 6px;
  margin: 0 -16px 24px;
  scrollbar-width: none;
  text-align: left;
}
.highlights::-webkit-scrollbar { display: none; }

.hl-card {
  --hl-from: #5A2457;
  --hl-to: var(--plum-deep);
  --hl-fg: #F7EEE2;
  --hl-soft: rgba(247, 238, 226, 0.88);
  --hl-mark: var(--crust-pale);
  --hl-mark-icon: var(--plum);
  --hl-rule: rgba(247, 238, 226, 0.22);

  position: relative;
  flex: 0 0 82%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  min-height: 216px;
  padding: 22px 22px 20px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(20, 6, 20, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.hl-plum {
  color: #F7EEE2;
  background-image: linear-gradient(to bottom right, #5A2457, var(--plum-deep));
}
.hl-crust {
  --hl-from: var(--crust-text);
  --hl-to: #5A3A0E;
  --hl-fg: #FFFFFF;
  --hl-soft: rgba(255, 255, 255, 0.9);
  --hl-mark: #FBF3E4;
  --hl-mark-icon: var(--crust);
  --hl-rule: rgba(255, 255, 255, 0.24);
  color: #FFFFFF;
  background-image: linear-gradient(to bottom right, var(--crust-text), #5A3A0E);
}
.hl-miga {
  --hl-from: #FBF5EC;
  --hl-to: var(--tone-deep);
  --hl-fg: var(--plum);
  --hl-soft: #5F4A43;
  --hl-mark: var(--plum);
  --hl-mark-icon: var(--crust-pale);
  --hl-rule: rgba(68, 24, 67, 0.16);
  color: var(--plum);
  background-image: linear-gradient(to bottom right, #FBF5EC, var(--tone-deep));
}

/* Marcador (cinta de libro) con el ícono */
.hl-bookmark {
  position: absolute;
  top: 0;
  right: 20px;
  width: 44px;
  height: 58px;
  background: var(--hl-mark);
  color: var(--hl-mark-icon);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 13px;
}
.hl-bookmark .icon { width: 22px; height: 22px; stroke-width: 2; }

.hl-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-heading);
  line-height: 1.1;
  letter-spacing: -0.01em;
  padding-right: 52px;
  color: var(--hl-fg);
}
.hl-desc {
  margin-top: 6px;
  max-width: 88%;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--hl-soft);
}
.hl-desc { margin-bottom: 16px; }
.hl-rule { height: 1px; background: var(--hl-rule); margin: auto 0 12px; }
.hl-metric {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--hl-fg);
}
.hl-label { margin-top: 4px; font-size: var(--fs-small); color: var(--hl-soft); }

/* Entrada: la tarjeta crece suave y su contenido sube en cascada */
@media (prefers-reduced-motion: no-preference) {
  .js .hl-card { animation: hlCardIn 0.45s 0.2s var(--ease-out) both; }
  .js .hl-card:nth-child(2) { animation-delay: 0.28s; }
  .js .hl-card:nth-child(3) { animation-delay: 0.36s; }
  .js .hl-card > :not(.hl-bookmark) { animation: hlItemIn 0.35s var(--ease-out) both; }
  .js .hl-card > .hl-title { animation-delay: 0.38s; }
  .js .hl-card > .hl-desc { animation-delay: 0.46s; }
  .js .hl-card > .hl-rule { animation-delay: 0.52s; }
  .js .hl-card > .hl-metric { animation-delay: 0.58s; }
  .js .hl-card > .hl-label { animation-delay: 0.62s; }
  .js .hl-card .hl-bookmark { animation: hlMarkIn 0.5s 0.5s var(--ease-out) both; }
  @keyframes hlCardIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: none; } }
  @keyframes hlItemIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes hlMarkIn { from { transform: translateY(-100%); } to { transform: none; } }
}

@media (min-width: 760px) {
  .hero-inner { max-width: 980px; }
  .highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    margin: 4px auto 28px;
    padding: 0;
    gap: 16px;
  }
  .hl-card { min-height: 236px; }
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 14px 34px;
  background: var(--plum);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 700;
  border-radius: var(--radius-pill);
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.hero-cta:hover { background: var(--plum-press); }
.hero-cta:active { transform: scale(0.98); }

/* ── Banner con video de fondo ──
   Velo ciruela al 60 %: texto blanco ≥ 4.8:1 aun sobre un cuadro blanco puro. */
.hero.has-video {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--plum-deep) url('video/hero-pinita-poster.jpg') center / cover no-repeat;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}
.hero-video.is-playing { opacity: 1; }
.hero-scrim {
  position: absolute;
  inset: 0;
  background: rgba(36, 12, 35, 0.6);
  pointer-events: none;
}
.hero.has-video .hero-logo { outline: 4px solid rgba(242, 227, 200, 0.85); }
.hero.has-video .hero-tagline { color: var(--crust-pale); }
.hero.has-video .hero-phone { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }
.hero.has-video .hero-phone:hover { text-decoration-color: currentColor; }
.hero.has-video .hero-cta { background: var(--crust-pale); color: var(--plum-deep); }
.hero.has-video .hero-cta:hover { background: #fff; }

/* ════════════════════════════════
   BUSCADOR
════════════════════════════════ */
.search-wrapper { padding: 20px var(--gutter) 12px; }
.search-input-group { position: relative; max-width: 560px; margin: 0 auto; }
.search-input {
  width: 100%;
  min-height: 52px;
  padding: 12px 20px 12px 50px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background: var(--tone);
  font-size: var(--fs-body); /* 16px evita el zoom automático en iOS */
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.search-input::placeholder { color: var(--ink-hint); }
.search-input:focus { border-color: var(--plum); background: var(--surface); }
.search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }

.no-results { text-align: center; padding: 56px var(--gutter); color: var(--ink-soft); }
.no-results p:first-child { font-size: var(--fs-lead); color: var(--ink); margin-bottom: 6px; }

/* ════════════════════════════════
   TABS DE CATEGORÍA
════════════════════════════════ */
.tabs-wrapper {
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  background: var(--bg);
  transition: box-shadow var(--dur) var(--ease-out);
}
/* Solo cuando la barra flota sobre el contenido */
.tabs-wrapper.is-stuck { box-shadow: 0 6px 16px -10px rgba(44, 14, 43, 0.35); }
.tabs-scroll {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  height: var(--tabs-h);
  align-items: center;
  padding: 0 var(--gutter);
  scrollbar-width: none;
}
.tabs-scroll::-webkit-scrollbar { display: none; }
/* Chips de categoría: al activarse, la píldora se ensancha con un pequeño
   resorte y aparece un check (adaptado del selector de referencia que pidió Rodrigo). */
.tabs-scroll { gap: 12px; }
.tab-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--tone);
  box-shadow: inset 0 0 0 1px rgba(68, 24, 67, 0.08);
  white-space: nowrap;
  overflow: hidden;
  transition: background-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear;
}
.tab-btn:hover { background: var(--tone-deep); color: var(--ink); }
.tab-btn:active { background: var(--tone-deep); }
.tab-btn.active {
  background: var(--plum);
  color: var(--crust-pale);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.tab-btn.active:hover { background: var(--plum); color: var(--crust-pale); }
.tab-btn.active:active { background: var(--plum-deep); }

.tab-inner {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 0;
  transition: padding-right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.tab-btn.active .tab-inner { padding-right: 1.5rem; }

.tab-check {
  position: absolute;
  right: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--crust-pale);
  color: var(--plum);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s linear;
}
.tab-btn.active .tab-check { opacity: 1; transform: scale(1); }
.tab-check .icon { width: 12px; height: 12px; stroke-width: 2.2; }

/* ════════════════════════════════
   SECCIONES DE PRODUCTOS
════════════════════════════════ */
.product-sections { padding: 0 0 120px; max-width: var(--page-max); margin: 0 auto; }
.category-section { padding-top: 32px; }
.category-section + .category-section { padding-top: 48px; }
.category-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px 16px;
}
.category-title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-heading); line-height: 1.15; color: var(--plum); }
.category-count { font-size: var(--fs-small); color: var(--ink-soft); white-space: nowrap; }

.products-grid { display: flex; flex-direction: column; gap: 14px; padding: 0 16px; }

/* ── Tarjeta de producto: blanco sobre papel, sin sombra ── */
/* Micro-borde de 1 px, aire generoso y sombra ambiental cálida:
   la tarjeta parece apoyada suavemente sobre el papel */
.product-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--micro-border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow-ambient);
  cursor: pointer;
  transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
@media (hover: hover) {
  .product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-ambient-hover); border-color: #E2D8E3; }
}
.product-card:active { transform: scale(0.99); }

.product-img-wrapper {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 12px;
  border: 1px solid var(--micro-border);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--tone);
}
.product-photo { width: 100%; height: 100%; object-fit: cover; }
.product-card .tag {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 5px 8px;
}

/* Si una foto falla: la inicial del producto, nunca una caja rota */
.photo-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  color: var(--plum);
  background: var(--tone);
}

.product-info { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
.product-foot {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.product-foot .btn-add { margin: 6px 6px 6px 0; }
.product-name { font-size: var(--fs-body); font-weight: 700; line-height: 1.25; color: var(--ink); margin-bottom: 4px; text-wrap: balance; }
.product-desc-short {
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}
.product-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 6px;
  font-family: var(--font-display);
  font-size: 21px;           /* cifra editorial, protagonista */
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--plum);
  font-variant-numeric: tabular-nums;
}
.price-main { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.product-price .price-before,
.modal-product-price .price-before { flex-basis: 100%; line-height: 1.3; }
/* "COP" a la derecha, más pequeño, sin robarle protagonismo a la cifra */
.price-cur {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  transform: translateY(-1px);
}
.modal-product-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.modal-product-price .price-cur { font-size: var(--fs-small); }
.product-price.is-pending,
.modal-product-price.is-pending {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--crust-text);
}
.price-before {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--ink-hint);
  margin-right: 4px;
}

/* Botón "joya": degradado berenjena → ciruela casi negra, micro-borde
   y un halo claro de interacción alrededor */
.btn-add {
  position: relative;
  width: 44px;
  height: 44px;
  margin: 5px;                 /* espacio para el halo */
  border-radius: 50%;
  background: var(--jewel);
  color: #FBF5EC;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 0 0 5px var(--halo),
    0 0 0 6px var(--micro-border),
    0 6px 14px -6px rgba(28, 8, 27, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out), filter 0.25s var(--ease-out);
}
.btn-add:hover {
  filter: brightness(1.12);
  box-shadow:
    0 0 0 6px #F0E7F0,
    0 0 0 7px #E2D6E3,
    0 8px 18px -6px rgba(28, 8, 27, 0.6);
}
.btn-add:active { transform: scale(0.94); }
.btn-add .icon { width: 20px; height: 20px; stroke-width: 2; }
.btn-add.added { animation: addPulse 0.5s var(--ease-out); }
@keyframes addPulse {
  0% { transform: scale(0.86); box-shadow: 0 0 0 5px var(--halo), 0 0 0 6px var(--micro-border), 0 0 0 6px rgba(122, 79, 21, 0.35); }
  100% { transform: scale(1); box-shadow: 0 0 0 5px var(--halo), 0 0 0 6px var(--micro-border), 0 0 0 16px rgba(122, 79, 21, 0); }
}

/* Entrada de las tarjetas: solo si hay JS y el usuario no pidió menos movimiento.
   Sin JS el menú se ve completo. */
@media (prefers-reduced-motion: no-preference) {
  .js .product-card.will-enter { opacity: 0; transform: translateY(16px); }
  .js .product-card.will-enter.visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  }
}

/* ════════════════════════════════
   BARRA FLOTANTE DEL CARRITO
════════════════════════════════ */
.cart-bar {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: 16px;
  right: 16px;
  max-width: 560px;
  margin: 0 auto;
  z-index: 200;
  background: var(--plum-deep);
  color: #fff;
  border-radius: 18px;
  padding: 12px 14px 12px 16px;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-float);
  cursor: pointer;
  transform: translateY(140%);
  visibility: hidden;
  transition: transform 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.cart-bar.visible { transform: none; visibility: visible; transition: transform 0.4s var(--ease-out), visibility 0s; }
.cart-bar-count {
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  background: var(--crust-pale);
  color: var(--plum-deep);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-small);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.cart-bar-count.pop { animation: countPop 0.4s var(--ease-out); }
@keyframes countPop { from { transform: scale(1.35); } to { transform: scale(1); } }
.cart-bar-text { flex: 1; font-size: var(--fs-body); font-weight: 600; }
.cart-bar-total { font-family: var(--font-display); font-size: var(--fs-lead); font-variant-numeric: tabular-nums; }
.cart-bar-arrow { opacity: 0.8; }

/* ════════════════════════════════
   OVERLAYS: cerrados = invisibles y fuera del foco del teclado
════════════════════════════════ */
.overlay {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s var(--ease-out), visibility 0s linear 0.18s; /* cerrar: más rápido */
}
.overlay.open { opacity: 1; visibility: visible; transition: opacity 0.26s var(--ease-out), visibility 0s; }
.overlay.instant { transition: none; }

/* ── Modal de producto ── */
.modal-overlay { z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; }
.product-modal {
  background: var(--surface);
  border-radius: 24px;
  width: 100%;
  max-width: 440px;
  max-height: 90svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-float);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.3s var(--ease-out);
}
.modal-overlay.open .product-modal { transform: none; }
.modal-img-wrap { position: relative; height: 260px; flex-shrink: 0; background: var(--tone); overflow: hidden; }
.modal-photo { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.modal-fallback { font-size: 72px; }
.modal-zoom-hint {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(20, 8, 20, 0.62);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 6px 12px 6px 10px;
  border-radius: var(--radius-pill);
  pointer-events: none;
}
.modal-zoom-hint .icon { width: 16px; height: 16px; }
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--surface);
  color: var(--ink);
  z-index: 2;
}
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.modal-tags { display: flex; gap: 6px; margin-bottom: 10px; }
.modal-product-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-heading);
  line-height: 1.15;
  color: var(--plum);
  margin-bottom: 8px;
  text-wrap: balance;
}
.modal-product-desc { font-size: var(--fs-body); color: var(--ink-soft); line-height: 1.55; margin-bottom: 14px; }
.modal-features { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.modal-features li {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  background: var(--tone);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}
.modal-product-price { font-family: var(--font-display); font-size: var(--fs-heading); color: var(--plum); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.modal-min-note { font-size: var(--fs-small); color: var(--crust-text); font-weight: 600; }

.qty-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--tone);
  border-radius: 16px;
  padding: 6px 6px 6px 16px;
  margin: 16px 0 14px;
}
.qty-label { font-size: var(--fs-body); font-weight: 600; }
.qty-buttons { display: flex; align-items: center; gap: 10px; }
.qty-btn { background: var(--surface); color: var(--plum); }
.qty-btn:hover { background: var(--plum-pale); }
.qty-num { font-family: var(--font-display); font-size: var(--fs-lead); min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }

/* ════════════════════════════════
   CARRITO (BOTTOM SHEET)
════════════════════════════════ */
.cart-sheet-overlay { z-index: 400; }
.cart-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 600px;
  margin: 0 auto;
  z-index: 401;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  max-height: 92svh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-float);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.28s cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 0.28s; /* cerrar: más rápido */
}
.cart-sheet.open { transform: none; visibility: visible; transition: transform 0.42s var(--ease-out), visibility 0s; }
.cart-sheet.dragging { transition: none; }
.cart-sheet-handle { position: relative; width: 40px; height: 4px; background: var(--tone-deep); border-radius: 2px; margin: 12px auto 0; flex-shrink: 0; cursor: grab; touch-action: none; }
.cart-sheet-handle::after { content: ''; position: absolute; inset: -14px -60px; }
.cart-sheet-header { touch-action: none; }
.cart-sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px 20px; flex-shrink: 0; }
.cart-sheet-title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-heading); color: var(--plum); }
.cart-sheet-close { background: var(--tone); color: var(--ink-soft); }
.cart-sheet-body { flex: 1; overflow-y: auto; padding: 4px 20px calc(24px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

.cart-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.cart-item-thumb { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--tone); flex-shrink: 0; }
.cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-thumb .photo-fallback { font-size: var(--fs-heading); }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-size: var(--fs-body); font-weight: 700; line-height: 1.25; margin-bottom: 2px; }
.cart-item-price { font-size: var(--fs-small); font-weight: 700; color: var(--plum); font-variant-numeric: tabular-nums; }
.cart-item-price.is-pending { color: var(--crust-text); }
.cart-item-note { font-size: var(--fs-small); color: var(--ink-soft); }
.cart-item-controls { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.cart-ctrl-btn { width: 40px; height: 40px; background: var(--tone); color: var(--ink); }
.cart-ctrl-btn .icon { width: 18px; height: 18px; }
.cart-ctrl-btn:hover { background: var(--tone-deep); }
.cart-ctrl-btn.remove { background: transparent; color: var(--ink-soft); }
.cart-ctrl-btn.remove:hover { color: var(--danger); background: transparent; }
.cart-item-qty { font-size: var(--fs-body); font-weight: 800; min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }

.cart-empty { text-align: center; padding: 36px 8px 28px; color: var(--ink-soft); }
.cart-empty .icon { width: 44px; height: 44px; stroke-width: 1.5; color: var(--tone-deep); margin: 0 auto 12px; display: block; }
.cart-empty-title { font-size: var(--fs-lead); color: var(--ink); margin-bottom: 4px; }
.cart-empty .btn { margin-top: 18px; width: auto; display: inline-flex; padding: 12px 28px; }

.cart-totals {
  background: var(--tone);
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cart-summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--fs-small); color: var(--ink-soft); }
.cart-summary-row span:last-child { color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.cart-summary-row.total-row { margin-top: 6px; }
.cart-summary-row.total-row span:first-child { font-size: var(--fs-body); font-weight: 700; color: var(--ink); }
.cart-summary-row.total-row span:last-child { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-heading); color: var(--plum); }

/* ── Formulario ── */
.customer-form { margin-top: 28px; }
.form-title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-heading); color: var(--plum); margin-bottom: 12px; }
.form-notice {
  background: var(--crust-pale);
  color: #5E3D10;
  font-size: var(--fs-small);
  line-height: 1.5;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: var(--fs-small); font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.form-optional { font-weight: 500; color: var(--ink-soft); }
.form-input,
.form-textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 1.5px solid var(--tone-deep);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body); /* evita zoom en iOS */
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--ink-hint); }
.form-input:focus,
.form-textarea:focus { border-color: var(--plum); background: var(--surface); }
.form-input.error,
.form-textarea.error { border-color: var(--danger); background: #FDF3F2; }
.form-textarea { resize: none; height: 88px; }
.form-hint { font-size: var(--fs-small); color: var(--ink-soft); margin-top: 6px; line-height: 1.4; }
.customer-form .btn-whatsapp { margin-top: 22px; }
.data-authorization { font-size: var(--fs-small); color: var(--ink-soft); text-align: center; margin: 12px 0 4px; line-height: 1.45; }
.data-authorization a { color: var(--plum); text-decoration: underline; text-underline-offset: 3px; }

/* Honeypot anti-bot */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* ════════════════════════════════
   FOOTER
════════════════════════════════ */
.footer {
  background: var(--plum-deep);
  color: rgba(255, 255, 255, 0.82);
  padding: 48px var(--gutter) 128px;
  text-align: center;
}
.footer-brand { font-family: var(--font-display); font-size: var(--fs-display); color: var(--crust-pale); margin-bottom: 8px; }
.footer-tagline { font-size: var(--fs-body); max-width: 34ch; margin: 0 auto 22px; line-height: 1.5; }
.footer-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-body);
  font-weight: 600;
  margin-bottom: 22px;
  transition: background-color var(--dur) var(--ease-out);
}
.footer-wa:hover { background: rgba(255, 255, 255, 0.18); }
.footer-copy { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.7); }
.footer-legal { display: inline-block; font-size: var(--fs-small); color: rgba(255, 255, 255, 0.7); margin-top: 8px; padding: 8px; text-decoration: underline; text-underline-offset: 3px; }
.footer-credit {
  margin: 20px auto 0;
  padding-top: 18px;
  max-width: 320px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}
.footer-credit-link {
  display: inline-block;
  padding: 4px 2px;
  font-weight: 700;
  color: var(--crust-pale);
  text-decoration: underline;
  text-decoration-color: rgba(242, 227, 200, 0.45);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.footer-credit-link:hover { color: #fff; text-decoration-color: currentColor; }
.footer-credit-phone { display: inline-block; padding: 4px 6px; color: rgba(255, 255, 255, 0.7); }
.footer-credit-phone:hover { color: #fff; }

/* ════════════════════════════════
   TOAST
════════════════════════════════ */
.toast {
  position: fixed;
  bottom: calc(92px + env(safe-area-inset-bottom)); /* encima de la barra del carrito, sin tapar títulos */
  left: 50%;
  transform: translate(-50%, 8px);
  background: var(--plum-deep);
  color: #fff;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  max-width: calc(100vw - 32px);
  text-align: center;
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s linear 0.25s;
  z-index: 700;
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s; }

/* ════════════════════════════════
   CONFIRMACIÓN
════════════════════════════════ */
.confirm-overlay { z-index: 600; display: flex; align-items: center; justify-content: center; padding: 20px; }
.confirm-card {
  background: var(--surface);
  border-radius: 24px;
  padding: 28px 22px 16px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-float);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.3s var(--ease-out);
}
.confirm-overlay.open .confirm-card { transform: none; }
.confirm-check { display: flex; justify-content: center; margin-bottom: 12px; }
.confirm-check-circle { stroke-dasharray: 151; stroke-dashoffset: 151; }
.confirm-check-tick { stroke-dasharray: 40; stroke-dashoffset: 40; }
.confirm-overlay.open .confirm-check-circle { animation: drawStroke 0.6s var(--ease-out) forwards; }
.confirm-overlay.open .confirm-check-tick { animation: drawStroke 0.4s 0.45s var(--ease-out) forwards; }
@keyframes drawStroke { to { stroke-dashoffset: 0; } }
.confirm-title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-heading); color: var(--plum); margin-bottom: 6px; }
.confirm-text { font-size: var(--fs-body); color: var(--ink-soft); margin-bottom: 16px; }
.confirm-reminder {
  text-align: left;
  background: var(--crust-pale);
  color: #5E3D10;
  font-size: var(--fs-small);
  line-height: 1.5;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
.confirm-card .btn-quiet { margin-top: 4px; }

/* ════════════════════════════════
   POPUP DE NOVEDAD
════════════════════════════════ */
.promo-popup-overlay { z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; }
.dot-popup {
  position: relative;
  background: var(--surface);
  border-radius: 24px;
  width: 100%;
  max-width: 360px;
  max-height: 90svh;
  overflow-y: auto;
  box-shadow: var(--shadow-float);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.4s var(--ease-out);
}
.promo-popup-overlay.open .dot-popup { transform: none; }
.dot-popup-close { position: absolute; top: 12px; right: 12px; z-index: 3; background: var(--surface); color: var(--ink); }
.dot-popup-hero { position: relative; aspect-ratio: 4 / 3; background: var(--tone); overflow: hidden; }
.dot-popup-hero img { width: 100%; height: 100%; object-fit: cover; }
.dot-popup-badge { position: absolute; top: 16px; left: 16px; }
.dot-popup-body { padding: 18px 20px 14px; text-align: center; }
.dot-popup-title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-heading); color: var(--plum); margin-bottom: 8px; line-height: 1.15; }
.dot-popup-desc { font-size: var(--fs-body); color: var(--ink-soft); line-height: 1.5; margin-bottom: 10px; }
.dot-popup-price { font-family: var(--font-display); font-size: var(--fs-heading); color: var(--plum); margin-bottom: 14px; }

/* ════════════════════════════════
   LIGHTBOX
════════════════════════════════ */
.lightbox { z-index: 800; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 8, 20, 0.92); }
.lightbox-stage img { max-width: 100%; max-height: 86svh; border-radius: 16px; object-fit: contain; }
.lightbox-close { position: absolute; top: 16px; right: 16px; background: rgba(255, 255, 255, 0.16); color: #fff; }
.lightbox-close:hover { background: rgba(255, 255, 255, 0.26); }

/* ════════════════════════════════
   PAN QUE VUELA AL CARRITO
════════════════════════════════ */
.fly-img {
  position: fixed;
  z-index: 750;
  object-fit: cover;
  border-radius: 14px;
  transform-origin: center;
  pointer-events: none;
  will-change: transform, opacity;
  box-shadow: var(--shadow-float);
}

/* Solo para lectores de pantalla */
.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;
}

/* Fecha de entrega en el encabezado: larga o corta según el ancho */
.header-badge .d-short,
.header-badge .b-mini { display: none; }
@media (max-width: 380px) {
  .header-badge .b-full { display: none; }
  .header-badge .b-mini { display: inline; }
}
@media (max-width: 420px) {
  .header-badge .d-long { display: none; }
  .header-badge .d-short { display: inline; }
}

/* ════════════════════════════════
   RECORRIDO DEL PEDIDO (confirmación)
════════════════════════════════ */
.confirm-card { max-height: 92svh; overflow-y: auto; }
.order-path {
  list-style: none;
  text-align: left;
  margin: 4px 0 18px;
  padding: 0;
}
.op-step {
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 12px;
  padding-bottom: 14px;
}
.op-step:last-child { padding-bottom: 0; }
/* Tramo que une un paso con el siguiente */
.op-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 20px;
  bottom: 2px;
  width: 2px;
  border-radius: 2px;
  background: var(--tone-deep);
}
.op-dot {
  grid-row: 1 / span 2;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--plum);
  box-shadow: inset 0 0 0 5px var(--crust-pale);
}
.op-step:last-child .op-dot { background: var(--crust); box-shadow: inset 0 0 0 5px var(--crust-pale); }
.op-when { font-size: var(--fs-small); font-weight: 700; color: var(--plum); line-height: 20px; }
.op-what { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.45; }

/* Los pasos aparecen uno tras otro, después del check */
@media (prefers-reduced-motion: no-preference) {
  .confirm-overlay.open .op-step { animation: stepIn 0.45s var(--ease-out) both; }
  .confirm-overlay.open .op-step:nth-child(1) { animation-delay: 0.7s; }
  .confirm-overlay.open .op-step:nth-child(2) { animation-delay: 0.85s; }
  .confirm-overlay.open .op-step:nth-child(3) { animation-delay: 1s; }
  @keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ════════════════════════════════
   CAPA DE MOVIMIENTO
   Cada animación explica algo: llegada, carga, origen, cambio o error.
════════════════════════════════ */

/* 1. Banner: logo, frase y teléfono entran en secuencia (≈1 s en total) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-logo { animation: heroLogoIn 0.6s var(--ease-out) both; }
  .js .hero-tagline { animation: heroIn 0.55s 0.08s var(--ease-out) both; }
  .js .hero-phone { animation: heroIn 0.5s 0.14s var(--ease-out) both; }
  .js .hero-cta { animation: heroIn 0.5s 0.55s var(--ease-out) both; }
  @keyframes heroLogoIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
  @keyframes heroIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* 2. Fotos: fundido suave al terminar de cargar (sin "saltos") */
.js .product-photo,
.js .cart-item-thumb img,
.js .modal-photo { opacity: 0; transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-out); }
.js .product-photo.is-loaded,
.js .cart-item-thumb img.is-loaded,
.js .modal-photo.is-loaded { opacity: 1; }

/* 3. Computador: la foto se acerca un poco al pasar el mouse por la tarjeta */
@media (hover: hover) {
  .product-card:hover .product-photo { transform: scale(1.06); }
  .btn-add:hover { transform: scale(1.04); }
}

/* 4. El detalle crece desde la foto de su tarjeta (View Transitions) */
::view-transition-group(product-photo) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
::view-transition-old(product-photo),
::view-transition-new(product-photo) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.24s; }

/* La foto conserva sus esquinas redondeadas durante todo el viaje:
   de las esquinas de la tarjeta (12 px) a las de la ventana de detalle
   (24 px arriba, recta abajo) y al revés al cerrar. */
::view-transition-image-pair(product-photo) {
  overflow: hidden;
  border-radius: 12px;
}
html.vt-open::view-transition-image-pair(product-photo) {
  animation: vtCornersOpen 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html.vt-close::view-transition-image-pair(product-photo) {
  animation: vtCornersClose 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes vtCornersOpen {
  from { border-radius: 12px; }
  to { border-radius: 24px 24px 0 0; }
}
@keyframes vtCornersClose {
  from { border-radius: 24px 24px 0 0; }
  to { border-radius: 12px; }
}

/* 5. Carrito: la cifra que cambia sube o baja; los productos entran en cascada al abrir */
.cart-item-qty { display: inline-block; }
.cart-item-qty.tick-up { animation: tickUp 0.24s var(--ease-out); }
.cart-item-qty.tick-down { animation: tickDown 0.24s var(--ease-out); }
@keyframes tickUp { from { opacity: 0.2; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes tickDown { from { opacity: 0.2; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  #cart-items-list.stagger .cart-item { animation: rowIn 0.38s var(--ease-out) both; }
  #cart-items-list.stagger .cart-item:nth-child(2) { animation-delay: 0.04s; }
  #cart-items-list.stagger .cart-item:nth-child(3) { animation-delay: 0.08s; }
  #cart-items-list.stagger .cart-item:nth-child(4) { animation-delay: 0.12s; }
  #cart-items-list.stagger .cart-item:nth-child(n+5) { animation-delay: 0.16s; }
  @keyframes rowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* 6. Formulario: el campo con error da una pequeña sacudida */
.form-input.shake,
.form-textarea.shake { animation: shake 0.36s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes shake {
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

/* 7. Foto ampliada: entra con una leve escala */
.lightbox.open .lightbox-stage img { animation: lbIn 0.32s var(--ease-out); }
@keyframes lbIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: none; } }

/* 8. Búsqueda: los resultados aparecen con un fundido corto */
.product-sections.results-in { animation: fadeIn 0.18s var(--ease-out); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ════════════════════════════════
   PULIDO FINO (adaptado de SmoothUI)
════════════════════════════════ */

/* Dígitos que ruedan: cada carácter vive en su ranura y se recorta al pasar */
.dr-wrap { display: inline-flex; white-space: nowrap; }
.dr-slot {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.25em;
  line-height: 1.25em;
  vertical-align: bottom;
}
.dr-char { display: inline-block; }
.dr-out { position: absolute; left: 0; top: 0; }
.btn-amount { display: inline-flex; font-variant-numeric: lining-nums tabular-nums; }

/* Fotos cargando: un barrido de luz suave sobre el tono papel */
.js .product-img-wrapper:has(.product-photo:not(.is-loaded))::after,
.js .cart-item-thumb:has(img:not(.is-loaded))::after,
.js .modal-img-wrap:has(.modal-photo:not(.is-loaded))::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 253, 248, 0) 20%, rgba(255, 253, 248, 0.7) 50%, rgba(255, 253, 248, 0) 80%) var(--tone);
  background-size: 220% 100%;
  animation: photoShimmer 1.3s ease-in-out infinite;
}
.cart-item-thumb { position: relative; }
.product-card .tag { z-index: 2; }
@keyframes photoShimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

/* Cifras de precio y cantidad: alineadas y del mismo alto
   (Young Serif usa números de estilo antiguo por defecto) */
.product-price,
.modal-product-price,
.dot-popup-price,
.cart-bar-total,
.cart-bar-count,
.cart-summary-row span,
.cart-item-price,
.cart-item-qty,
.qty-num { font-variant-numeric: lining-nums tabular-nums; }

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media (max-width: 420px) {
  .header-logo-text .sub { display: none; }
}
@media (max-width: 360px) {
  .product-card { padding: 14px; gap: 14px; }
  .product-img-wrapper { width: 78px; height: 78px; }
}
@media (max-width: 350px) {
  .header-badge { padding: 7px 10px; }
}
@media (min-width: 640px) {
  .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    padding: 0 20px;
  }
  .hero { padding-top: 48px; padding-bottom: 52px; }
}

/* Reducir movimiento: se quita el desplazamiento, se conservan los fundidos
   y cambios de estado que confirman una acción. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.12s !important;
    scroll-behavior: auto !important;
  }
  .product-card:hover, .product-card:active { transform: none; }
  .product-card:hover .product-photo { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}