/* ============================================================
   TIENDA WEB — identidad propia del canal web.
   Clínico-minimalista (ref. Ritual/Thorne). NO usa
   design-system.css del CRM: la tienda lleva la marca del vendedor, no la de Vant.
   Single-theme claro (decisión deliberada: página comercial
   pública con marca comprometida).

   PALETA OFICIAL (manual de marca, 25-ago-2026 — los cuatro
   valores salen de los SVG editables del logo):
     #1e8284 teal · #03bf9d menta · #04bfae turquesa · #5fceda celeste

   Regla de uso que no es negociable: de los cuatro, SOLO el teal
   #1e8284 alcanza contraste AA (4,58:1 sobre blanco; el menta da
   2,35:1 y el celeste 1,85:1). Por eso el teal es el color de
   acción y de texto, y menta/turquesa/celeste quedan para
   superficies decorativas donde no se apoya texto chico.
   ============================================================ */

/* Las fuentes viven en fuentes_tienda.css: también las usa la etiqueta imprimible, que no carga esta hoja. */

:root {
  --s-ink: #12312f;
  --s-text: #2f4442;
  --s-muted: #5a706e;
  --s-bg: #ffffff;
  --s-surface: #f4f8f8;
  --s-line: #dfe9e8;
  /* El borde de un campo: con --s-line daba 1,24:1 contra el blanco y no se veía dónde escribir. Este da 3,2:1
     (ACC-13); --s-line queda para separar, donde no hace falta verlo. */
  --s-line-campo: #7f9492;
  --s-brand: #1e8284;
  --s-brand-dark: #14605f;
  --s-brand-tint: #e8f5f4;
  --s-menta: #03bf9d;
  --s-turquesa: #04bfae;
  --s-celeste: #5fceda;
  --s-amber: #92400e;
  --s-amber-tint: #fef3e2;
  --s-radius: 18px;
  --s-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Titulares en Manrope, la misma del texto: la de display dibujaba «Tienda» como «Tienða». */
  --s-font-display: "Manrope", system-ui, sans-serif;
  --s-shadow: 0 1px 3px rgb(23 37 31 / 0.06);
  --s-shadow-lift: 0 12px 28px rgb(23 37 31 / 0.12);
  --s-ease: cubic-bezier(0.2, 0.6, 0.25, 1);
  /* El tamaño del precio. La advertencia de que con el sello abierto no hay retracto no puede ser más chica (D.S.
     52/2024, art. 6): las dos lo toman de acá. */
  --s-precio: 2rem;
  /* Lo fijo: el encabezado mide 131 px en el escritorio (69 en el teléfono, más abajo) y el aviso de cookies hasta
     90 px. Lo que recibe el foco no queda debajo (ACC-3). */
  --s-fijo-arriba: 140px;
  --s-fijo-abajo: 100px;
}

.s-ico {
  width: 18px; height: 18px; flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* Al tabular, lo que recibe el foco queda a la vista entre lo fijo de arriba y el aviso de cookies: quedaba entero
     debajo de uno u otro (ACC-3). */
  scroll-padding-top: var(--s-fijo-arriba);
  scroll-padding-bottom: var(--s-fijo-abajo);
  /* El dedo ya tiene su respuesta en `:active`: el celeste del navegador al tocar no es de la marca (VISUAL-10). */
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  font-family: var(--s-font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--s-text);
  background: var(--s-bg);
  font-variant-numeric: tabular-nums;
}
img { max-width: 100%; display: block; }
a { color: var(--s-brand); text-decoration: none; }
a:hover { color: var(--s-brand-dark); }
/* El texto de ejemplo, con el gris de la tienda: el del navegador daba 4,31 sobre --s-surface (B-415). Firefox
   además lo aclara con su propia opacidad. */
::placeholder { color: var(--s-muted); opacity: 1; }
h1, h2, h3 { color: var(--s-ink); line-height: 1.2; text-wrap: balance; margin: 0 0 0.5em; }
h1, h2 {
  font-family: var(--s-font-display);
  /* 700: el peso regular deja los titulares desmayados al lado del texto. */
  font-weight: 700; letter-spacing: -0.015em;
}
h1 { font-size: 1.875rem; }
h2 { font-size: 1.375rem; }
:focus-visible { outline: 2px solid var(--s-brand); outline-offset: 2px; border-radius: 4px; }
/* Donde el contenedor recorta (`overflow: hidden` de la tarjeta y de los desplegables), el anillo va por dentro y con
   la curva del contenedor: por fuera se lo comía y la tarjeta enfocada se veía igual que las otras (ACC-2). */
.s-card-link:focus-visible, details > summary:focus-visible { outline-offset: -2px; border-radius: inherit; }
/* Sobre un aviso oscuro el teal no se ve (1,62:1 sobre el de advertencia): ahí el anillo es blanco. */
.s-toast :focus-visible, .s-consent :focus-visible { outline-color: #fff; }
/* Un enlace dentro del texto se distingue por algo más que el color (WCAG 1.4.1, Lighthouse «link-in-text-block»).
   Los que llevan clase son botones o piezas con su propio dibujo. */
main :is(p, li, label, .s-alert-warn) a:not([class]) { text-decoration: underline; text-underline-offset: 0.15em; }

.s-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------- Header ---------- */
.s-announce {
  background: var(--s-ink); color: #fff;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em;
  text-align: center; padding: 8px 16px;
}
.s-announce strong { color: #7fd4bc; font-weight: 700; }
/* Lo fijo arriba en el escritorio: la fila del logo, el buscador y las categorías. En el teléfono, solo el
   `<header>` (bloque de 760 px, COMPRA-7). */
.s-top {
  position: sticky; top: 0; z-index: 50;
  background: var(--s-bg);
  border-bottom: 1px solid var(--s-line);
}
.s-header { background: var(--s-bg); }
.s-busca-movil { display: none; }
.s-header-row {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 0;
}
.s-logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--s-font-display);
  font-size: 1.5rem; font-weight: 700; letter-spacing: 0.005em;
  color: var(--s-brand); white-space: nowrap;
}
.s-logo:hover { color: var(--s-brand-dark); }
.s-logo img { width: 34px; height: 34px; display: block; }
/* `min-width: 0`: sin él, el buscador no bajaba de su ancho natural y la página desbordaba a 320 y entre 765 y
   785 px con el contador del carrito (ACC-10, VISUAL-7). */
.s-search { flex: 1; display: flex; max-width: 520px; min-width: 0; }
.s-search input {
  flex: 1; min-width: 0;
  font: inherit; font-size: 0.9375rem;
  padding: 12px 16px;
  border: 1.5px solid var(--s-line-campo); border-right: 0;
  border-radius: 9999px 0 0 9999px;
  background: var(--s-surface);
  color: var(--s-ink);
}
.s-search input:focus { outline: none; border-color: var(--s-brand); background: #fff; }
.s-search button {
  display: inline-flex; align-items: center; gap: 8px;  /* la lupa no va pegada a «Buscar» (B-419) */
  font: inherit; font-weight: 700; font-size: 0.875rem;
  padding: 12px 16px; cursor: pointer;  /* 16 y no 20: con el espacio de la lupa, el botón mide lo mismo */
  border: 1.5px solid var(--s-brand);
  border-radius: 0 9999px 9999px 0;
  background: var(--s-brand); color: #fff;
}
.s-search button:hover { background: var(--s-brand-dark); border-color: var(--s-brand-dark); }
.s-header-contact { font-size: 0.8125rem; font-weight: 700; color: var(--s-ink); white-space: nowrap; }
.s-header-contact-txt span { display: block; font-weight: 500; color: var(--s-muted); }
/* El ícono es para el teléfono, donde el texto no cabe en la fila fija. */
.s-header-contact .s-ico { display: none; }

/* Nav de categorías */
.s-nav {
  border-top: 1px solid var(--s-line); overflow-x: auto; scrollbar-width: none;
  /* Sombra en el borde solo cuando hay más categorías hacia ese lado (S18: «Hogar» quedaba fuera sin señal). */
  background:
    linear-gradient(to right, var(--s-bg) 40%, transparent) 0 0 / 40px 100% no-repeat local,
    linear-gradient(to left, var(--s-bg) 40%, transparent) 100% 0 / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.16), transparent) 0 0 / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), transparent) 100% 0 / 14px 100% no-repeat scroll;
}
.s-nav::-webkit-scrollbar { display: none; }
.s-nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.s-nav a {
  display: block; padding: 12px 16px;
  font-size: 0.875rem; font-weight: 600; color: var(--s-text);
  white-space: nowrap; border-bottom: 2px solid transparent;
}
.s-nav a:hover { color: var(--s-brand); }
.s-nav a[aria-current="page"] { color: var(--s-brand); border-bottom-color: var(--s-brand); }

/* ---------- Hero ---------- */
.s-hero {
  background: linear-gradient(180deg, var(--s-brand-tint), var(--s-bg));
  padding: 48px 0 40px;
}
.s-hero h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); max-width: 640px; }
.s-hero p { font-size: 1.0625rem; color: var(--s-muted); max-width: 560px; margin: 0 0 20px; }
.s-trust { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.s-trust li {
  list-style: none; display: flex; align-items: center; gap: 8px;
  font-size: 0.8125rem; font-weight: 700; color: var(--s-ink);
  background: #fff; border: 1px solid var(--s-line); border-radius: 9999px;
  padding: 8px 16px; box-shadow: var(--s-shadow);
}
.s-trust li .s-ico { color: var(--s-brand); width: 16px; height: 16px; }
.s-trust { padding: 0; margin: 20px 0 0; }

.s-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 0.9375rem;
  padding: 12px 24px; border-radius: 9999px;
  background: var(--s-brand); color: #fff; border: none; cursor: pointer;
  box-shadow: 0 2px 8px rgb(14 122 95 / 0.28);
  transition: background 0.18s var(--s-ease), transform 0.18s var(--s-ease), box-shadow 0.18s var(--s-ease);
}
/* Los hover que mueven, solo con un puntero que se posa: en el teléfono el hover queda pegado tras el toque
   (VISUAL-10). */
@media (hover: hover) {
  .s-btn:hover { background: var(--s-brand-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgb(14 122 95 / 0.32); }
}
.s-btn:active { transform: translateY(0) scale(0.98); }
/* Bloqueado (enviando el pago): se ve bloqueado y no responde (reel 29-oct, regla 08). */
.s-btn:disabled, .s-btn[aria-busy="true"] { opacity: 0.6; cursor: not-allowed; box-shadow: none; transform: none; pointer-events: none; }

/* ---------- Secciones y grillas ---------- */
.s-section { padding: 40px 0; }
.s-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.s-section-head a { font-size: 0.875rem; font-weight: 700; }

.s-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.s-cat-card {
  display: block; padding: 20px 16px;
  background: var(--s-surface); border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  font-weight: 700; font-size: 0.9375rem; color: var(--s-ink);
  transition: transform 0.18s var(--s-ease), box-shadow 0.18s var(--s-ease),
    border-color 0.18s var(--s-ease), background 0.18s var(--s-ease);
}
@media (hover: hover) {
  .s-cat-card:hover {
    border-color: var(--s-brand); background: var(--s-brand-tint); color: var(--s-brand-dark);
    transform: translateY(-2px); box-shadow: var(--s-shadow-lift);
  }
}
.s-cat-card span { display: block; font-size: 0.75rem; font-weight: 500; color: var(--s-muted); margin-top: 4px; }

.s-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }

/* ---------- Card de producto ---------- */
.s-card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--s-line);
  border-radius: var(--s-radius); overflow: hidden;
  box-shadow: var(--s-shadow);
  transition: box-shadow 0.2s var(--s-ease), border-color 0.2s var(--s-ease),
    transform 0.2s var(--s-ease);
}
@media (hover: hover) {
  .s-card:hover { border-color: var(--s-brand); box-shadow: var(--s-shadow-lift); transform: translateY(-3px); }
}
.s-card-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; min-width: 0; }

/* Agregar desde la grilla: flotante sobre la esquina de la imagen. En tactil (sin
   hover) es visible siempre; en escritorio aparece al hover o con el teclado. */
.s-card-add { position: absolute; bottom: 12px; right: 12px; z-index: 2; }
/* El «+» queda en la esquina, a la altura del precio: lo que va debajo del nombre deja su sitio (margen 12, botón 44 y
   4 de aire). El nombre usa todo el ancho y se lee entero. */
.s-card:has(.s-card-add) .s-card-body > :not(.s-card-brand, .s-card-name) { padding-right: calc(12px + 44px + 4px); }
.s-card-add button {
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--s-brand); color: #fff; font-size: 1.45rem; font-weight: 700; line-height: 1;
  box-shadow: 0 4px 12px rgb(14 122 95 / 0.35);
  transition: transform 0.15s var(--s-ease), background 0.15s var(--s-ease), opacity 0.18s var(--s-ease);
}
@media (hover: hover) {
  .s-card-add button:hover { background: var(--s-brand-dark); transform: scale(1.08); }
}
.s-card-add button:active { transform: scale(0.94); }
/* En el teléfono no hay puntero que se pose: el «+» se oculta solo con puntero fino y pantalla ancha. */
@media (hover: hover) and (min-width: 641px) {
  .s-card-add button { opacity: 0; }
  .s-card:hover .s-card-add button, .s-card:focus-within .s-card-add button { opacity: 1; }
}
.s-card-img {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: #fff; padding: 12px; overflow: hidden;
}
.s-card-img img { max-height: 100%; object-fit: contain; transition: transform 0.25s var(--s-ease); }
@media (hover: hover) {
  .s-card:hover .s-card-img img { transform: scale(1.045); }
}
.s-card-body { padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.s-card-brand {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--s-muted);
}
.s-card-name {
  font-size: 0.875rem; font-weight: 600; color: var(--s-ink); line-height: 1.35;
  overflow-wrap: anywhere;
}
.s-card:hover .s-card-name { color: var(--s-brand-dark); }
.s-card-price { font-size: 1.125rem; font-weight: 800; color: var(--s-ink); margin-top: auto; }
.s-card-out { font-size: 0.75rem; font-weight: 700; color: var(--s-amber); background: var(--s-amber-tint); border-radius: 6px; padding: 4px 8px; align-self: flex-start; }

/* ---------- Página de categoría ---------- */
.s-crumbs { font-size: 0.8125rem; color: var(--s-muted); padding: 20px 0 0; }
.s-crumbs a { color: var(--s-muted); }
.s-crumbs a:hover { color: var(--s-brand); }
.s-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; padding: 0; list-style: none; }
.s-chips a {
  display: block; font-size: 0.8125rem; font-weight: 600;
  padding: 8px 12px; border-radius: 9999px;
  border: 1px solid var(--s-line); color: var(--s-text); background: #fff;
}
.s-chips a:hover { border-color: var(--s-brand); color: var(--s-brand); }
.s-chips a[aria-current="page"] { background: var(--s-ink); border-color: var(--s-ink); color: #fff; }
.s-facets { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 16px 0 20px; }
.s-facets select {
  font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--s-ink);
  padding: 8px 12px; border: 1.5px solid var(--s-line-campo); border-radius: 8px; background: #fff;
  max-width: 100%;  /* una marca de 50 letras ensanchaba el filtro y la página (VISUAL-9) */
}
.s-facets select:focus { border-color: var(--s-brand); outline: none; }
.s-count { font-size: 0.8125rem; color: var(--s-muted); margin-left: auto; }

/* ---------- Ficha de producto ---------- */
.s-product { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 40px; padding: 32px 0 40px; }
/* La foto acompaña mientras se leen los datos, igual que el resumen del checkout. En dos columnas la
   de datos es más alta, y debajo de la foto quedaban unos 400 px vacíos (ficha a 768, B-165). Cada
   columna mide lo que mide su contenido: una celda estirada no tiene por dónde moverse. Solo en dos
   columnas: en una sola, la foto se quedaba pegada arriba y los datos pasaban por debajo. */
@media (min-width: 761px) {
  .s-product { align-items: start; }
  .s-product > :first-child { position: sticky; top: 120px; }
}
.s-gallery-main {
  border: 1px solid var(--s-line); border-radius: var(--s-radius);
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: #fff;
}
.s-gallery-main img { max-height: 100%; object-fit: contain; cursor: zoom-in; }
/* Con foto, la caja es el botón que la amplía (ACC-6): ocupa el ancho de la columna como la caja sin foto. */
button.s-gallery-main { width: 100%; font: inherit; color: inherit; cursor: zoom-in; }
/* `wrap`: seis miniaturas de 64 px miden 432 y no caben en un telefono de 390. Envolver
   y no deslizar, para que ninguna foto quede fuera de vista sin avisar. */
.s-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.s-gallery-thumbs button {
  width: 64px; height: 64px; padding: 8px; cursor: pointer;
  border: 1.5px solid var(--s-line); border-radius: 8px; background: #fff;
}
.s-gallery-thumbs button[aria-pressed="true"] { border-color: var(--s-brand); }
.s-gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; }

.s-pinfo .s-card-brand { font-size: 0.75rem; }
.s-price { font-size: var(--s-precio); font-weight: 800; color: var(--s-ink); margin: 12px 0 4px; }
/* Sin flex-wrap: el texto se parte al lado del punto. Con wrap, cuando no cabía en una línea bajaba
   entero y el punto quedaba solo arriba (ficha a 768, B-165). */
.s-stock { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 700; margin: 8px 0 16px; }
.s-stock::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.s-stock.ok { color: var(--s-brand-dark); }
.s-stock.ok::before { background: var(--s-brand); }
.s-stock.out { color: var(--s-amber); }
.s-stock.out::before { background: var(--s-amber); }

.s-ship {
  border: 1px solid var(--s-line); border-radius: var(--s-radius);
  padding: 16px 16px; margin: 16px 0; display: grid; gap: 8px;
}
.s-ship p { margin: 0; font-size: 0.875rem; display: flex; gap: 12px; align-items: center; }
.s-ship p strong { color: var(--s-ink); }
.s-ship .s-ico { color: var(--s-brand); }

.s-desc { margin-top: 20px; font-size: 0.9375rem; }
.s-desc p { margin: 0 0 0.8em; white-space: pre-line; overflow-wrap: break-word; }

/* Oferta: el precio vigente manda visualmente y el anterior queda tachado al lado.
   El "antes" NUNCA se muestra si no es mayor — lo garantiza el cálculo, no el CSS. */
.s-price-antes { margin-left: 12px; font-size: 1rem; font-weight: 500; color: var(--s-muted); text-decoration: line-through; }
.s-oferta {
  margin-left: 12px; padding: 4px 8px; border-radius: 9999px; vertical-align: middle;
  background: var(--s-brand); color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: .02em;
}
/* Hasta cuándo vale la oferta (LEGAL-8): se lee con el precio, no en una letra chica aparte. */
.s-oferta-hasta { display: block; margin: 4px 0 0; font-size: 0.8125rem; font-weight: 600; color: var(--s-brand-dark); }
.s-card-antes { margin-left: 8px; font-size: 0.8125rem; color: var(--s-muted); text-decoration: line-through; }

.s-desc-h { font-family: var(--s-font-display); font-size: 1.0625rem; font-weight: 700; margin: 0 0 8px; color: var(--s-ink); }
.s-faq { margin-top: 24px; }
.s-faq > h2 { font-family: var(--s-font-display); font-size: 1.125rem; font-weight: 700; margin: 0 0 12px; }
.s-faq details { border: 1px solid var(--s-line); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.s-faq summary { padding: 12px 16px; font-weight: 600; font-size: 0.9375rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.s-faq summary::-webkit-details-marker { display: none; }
/* El signo es dibujo: con `/ ""` no entra en el nombre («Modo de uso más»). El `content` sin texto alternativo va
   antes, para el navegador que no conoce esa forma. */
.s-faq summary::after { content: "+"; content: "+" / ""; font-size: 1.125rem; color: var(--s-brand); font-weight: 800; }
.s-faq details[open] summary::after { content: "−"; content: "−" / ""; }
/* La letra chica legal de la ficha: presente y legible, pero sin competir con el producto.
   Contraste 4,55:1 sobre blanco — cumple AA aunque sea secundaria. Tiene su clase: con la del
   documento legal, cada una se llevaba las reglas de la otra (B-176). */
.s-letra-chica { margin: 20px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--s-muted); border-top: 1px solid var(--s-line); padding-top: 16px; overflow-wrap: break-word; }

.s-know { margin-top: 8px; }
.s-know details { border: 1px solid var(--s-line); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.s-know summary {
  cursor: pointer; font-weight: 700; font-size: 0.9375rem; color: var(--s-ink);
  padding: 12px 16px; background: var(--s-surface); list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.s-know summary::after { content: "+"; content: "+" / ""; font-size: 1.125rem; color: var(--s-brand); font-weight: 800; }
.s-know details[open] summary::after { content: "−"; content: "−" / ""; }
/* El cuerpo de todo desplegable de la ficha: el conocimiento y las preguntas frecuentes. Bajo `.s-know`,
   la respuesta de la FAQ quedaba pegada al borde y con letra de 16 px (B-230). */
.s-know-body { padding: 12px 16px; font-size: 0.875rem; }
.s-know-texto { margin: 0; white-space: pre-line; overflow-wrap: break-word; }
.s-know-texto + .s-nutri, .s-nutri-head + .s-nutri { margin-top: 8px; }

/* Tabla nutricional: replica el cuadro del envase (regla gruesa arriba, filas finas,
   cifras alineadas a la derecha), que es como el cliente está acostumbrado a leerla. */
.s-nutri-head {
  overflow-wrap: break-word;
  margin: 0 0 8px; font-size: 0.8125rem; font-weight: 700; color: var(--s-ink);
  padding-bottom: 8px; border-bottom: 2px solid var(--s-ink);
}
.s-nutri { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.s-nutri th, .s-nutri td { padding: 8px 0; border-bottom: 1px solid var(--s-line); text-align: left; }
.s-nutri th { font-weight: 400; color: var(--s-text); }
/* Sin `white-space: nowrap`: servía para que «12,5 g» no se partiera, pero esta misma
   tabla muestra las especificaciones que llegan de MercadoLibre, y una celda con un
   párrafo estiraba el ancho de TODA la página en el teléfono (16-sep-2026). El dato
   largo ya no llega acá (`LARGO_MAXIMO_FILA`); esto es la segunda línea de defensa. */
.s-nutri td {
  text-align: right; font-weight: 700; color: var(--s-ink);
  font-variant-numeric: tabular-nums; padding-left: 12px;
  overflow-wrap: anywhere;
}
.s-nutri tr:last-child th, .s-nutri tr:last-child td { border-bottom: 0; }

/* ---------- Estados y footer ---------- */
.s-empty { text-align: center; padding: 48px 20px; color: var(--s-muted); }
.s-empty strong { display: block; font-size: 1.125rem; color: var(--s-ink); margin-bottom: 8px; }

.s-footer { background: var(--s-ink); color: #b9c6c0; margin-top: 48px; }
.s-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; padding: 40px 0 32px; }
.s-footer h2 { color: #fff; font-size: 0.9375rem; margin-bottom: 12px; }
.s-footer p, .s-footer a { font-size: 0.875rem; color: #b9c6c0; margin: 0 0 8px; display: block; }
.s-footer a:hover { color: #fff; }
.s-footer-legal { border-top: 1px solid rgb(255 255 255 / 0.12); padding: 16px 0; font-size: 0.75rem; }

/* Botón flotante de WhatsApp (C5, macro `boton_whatsapp`): solo en la tienda pública; en el panel lo prohíbe
   `test_sin_boton_flotante_de_ayuda`. z-index 40 del contrato, bajo el encabezado fijo (50). Sin animación. Respeta el
   área segura del iPhone, y el pie guarda su alto al final de la página para que no tape sus enlaces. Mientras está el
   aviso de «agregado» con «Ir a pagar» o el de cookies, que van abajo, se esconde: no compite con ellos. */
.s-wa-flotante {
  position: fixed; z-index: 40;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 20px;
  border-radius: 9999px; background: var(--s-ink); color: #fff; border: 1px solid rgb(255 255 255 / 0.4);
  font-size: 0.9375rem; font-weight: 700; line-height: 1;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.2);
}
.s-wa-flotante:hover { color: #fff; background: var(--s-brand-dark); }
.s-wa-flotante .s-ico { width: 20px; height: 20px; }
.s-wa-flotante[hidden], body:has(.s-toast) .s-wa-flotante, body:has(.s-consent) .s-wa-flotante { display: none; }
body:has(.s-wa-flotante) .s-footer { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Carrito / checkout / pedido (F2) ---------- */
.s-narrow { max-width: 920px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Enlace para teclado: invisible hasta recibir el foco (reel 29-oct, accesibilidad). */
.s-saltar { position: absolute; left: 8px; top: -64px; z-index: 2000; padding: 8px 16px; border-radius: 8px;
  background: var(--s-ink); color: #fff; font-weight: 700; }
.s-saltar:focus { top: 8px; outline-color: #fff; }
main:focus { outline: none; }
.s-header-cart {
  position: relative; display: flex; align-items: center; gap: 8px;
  font-size: 0.875rem; font-weight: 700; color: var(--s-ink); white-space: nowrap;
  padding: 8px 16px; border: 1.5px solid var(--s-line); border-radius: 9999px;
}
.s-header-cart:hover { border-color: var(--s-brand); color: var(--s-brand-dark); }
.s-header-cart .n {
  background: var(--s-brand); color: #fff; border-radius: 9999px;
  font-size: 0.6875rem; min-width: 18px; height: 18px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 4px;
}
.s-alert-warn {
  background: var(--s-amber-tint); color: var(--s-amber);
  border: 1px solid #f3d9b0; border-radius: 8px;
  padding: 12px 16px; font-size: 0.875rem; font-weight: 600; margin: 0 0 16px;
}
/* Confirmación de una acción del cliente (dio de baja, guardó algo). Usa el teal de
   marca, que es el único de los cuatro que alcanza AA sobre su propio tinte. */
.s-alert-ok {
  background: var(--s-surface); color: var(--s-brand-dark);
  border: 1px solid var(--s-line); border-left: 3px solid var(--s-brand);
  border-radius: 8px; padding: 16px 20px; font-size: 0.9375rem; margin: 0 0 20px;
}
.s-alert-ok p { margin: 0; }

/* Paginador del catálogo. Los estados se apoyan en la misma paleta de .s-chips para
   que la barra de filtros y la de páginas se lean como una sola familia. */
.s-pager { margin: 24px 0 8px; }
.s-pager ul {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  list-style: none; margin: 0; padding: 0;
}
.s-pager a {
  display: block; min-width: 40px; padding: 8px 12px; text-align: center;
  border: 1px solid var(--s-line); border-radius: 8px;
  color: var(--s-text); text-decoration: none; font-weight: 600; font-size: 0.9375rem;
}
.s-pager a:hover { border-color: var(--s-brand); color: var(--s-brand-dark); }
.s-pager a[aria-current="page"] {
  background: var(--s-brand); border-color: var(--s-brand); color: #fff;
}
.s-pager-gap { padding: 8px 4px; color: var(--s-muted); }
.s-count-block { margin: 0 0 20px; }

/* Prueba social: unidades ya vendidas en MercadoLibre. Discreta a propósito — es un
   dato de respaldo, no un argumento de venta, y en suplementos cualquier énfasis de más
   empuja la lectura hacia la promesa que la norma prohíbe. */
.s-social {
  margin: 0 0 8px; font-size: 0.875rem; font-weight: 600;
  color: var(--s-brand-dark); letter-spacing: .01em;
}

/* El sello de pago seguro, bajo el botón de pagar. Es el último argumento antes de
   entregar la tarjeta a una tienda desconocida: merece leerse, no esconderse. El aviso del
   retracto (LEGAL-1) va igual: con el texto del cuerpo, no en letra chica gris. */
.s-pago-sello, .s-retracto {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 8px;
  padding: 12px 16px; margin: 16px 0 0; font-size: 0.875rem; color: var(--s-text);
}
.s-pago-sello .s-ico { flex-shrink: 0; margin-top: 4px; color: var(--s-brand); }
/* Sobre el fondo de la caja, el teal da 4,28:1: el enlace va en el verde oscuro. */
.s-pago-sello a, .s-retracto a { color: var(--s-brand-dark); }
.s-retracto-aviso { display: block; font-size: var(--s-precio); line-height: 1.15; font-weight: 800; color: var(--s-ink); margin-bottom: 8px; }

/* El texto de la categoría: orienta a quien llega a una lista de 60 frascos y no sabe
   cuál elegir. Medida de lectura acotada — a ancho completo nadie lo lee. */
.s-cat-intro { max-width: 68ch; margin: 4px 0 20px; }
.s-cat-intro p { margin: 0; color: var(--s-muted); font-size: 0.9375rem; line-height: 1.65; }

.tone-ok { color: var(--s-brand-dark); }

.s-cart-list { border: 1px solid var(--s-line); border-radius: var(--s-radius); overflow: hidden; }
.s-cart-row {
  display: flex; align-items: center; gap: 16px; padding: 16px 16px;
  border-bottom: 1px solid var(--s-line); background: #fff;
}
.s-cart-row:last-child { border-bottom: 0; }
.s-cart-img { width: 64px; height: 64px; flex: none; display: flex; align-items: center; justify-content: center; }
.s-cart-img img { max-height: 100%; object-fit: contain; }
.s-cart-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.s-cart-name { font-size: 0.875rem; font-weight: 600; color: var(--s-ink); }
.s-cart-unit { font-size: 0.75rem; color: var(--s-muted); }
.s-cart-qty input {
  width: 64px; font: inherit; font-size: 0.875rem; text-align: center;
  padding: 8px 4px; border: 1.5px solid var(--s-line-campo); border-radius: 8px;
}
.s-cart-qty input:focus { border-color: var(--s-brand); outline: none; }
.s-cart-qty input:disabled { opacity: 0.6; cursor: wait; }
.s-cart-aviso { display: block; font-size: 0.75rem; color: var(--s-muted); }
.s-cart-aviso:empty { display: none; }
.s-cart-total { font-weight: 800; color: var(--s-ink); min-width: 76px; text-align: right; }
.s-cart-remove {
  border: 0; background: none; color: var(--s-muted); cursor: pointer;
  font-size: 0.875rem; padding: 8px; border-radius: 6px;
}
.s-cart-remove:hover { color: var(--s-amber); background: var(--s-amber-tint); }

.s-cart-summary {
  margin-top: 20px; border: 1px solid var(--s-line); border-radius: var(--s-radius);
  padding: 20px 20px; background: var(--s-surface);
}
.s-cart-summary dl { margin: 0; }
.s-cart-summary dl div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.9375rem; }
.s-cart-summary dt { color: var(--s-muted); }
.s-cart-summary dd { margin: 0; font-weight: 600; color: var(--s-ink); }
.s-cart-grand { border-top: 1px solid var(--s-line); margin-top: 8px; padding-top: 12px !important; font-size: 1.0625rem !important; }
.s-cart-grand dd { font-weight: 800; }
.s-cart-note { font-size: 0.75rem; color: var(--s-muted); margin: 8px 0 16px; }
.s-cupon { display: flex; gap: 8px; margin-bottom: 12px; }
.s-cupon input {
  flex: 1; font: inherit; font-size: 0.875rem; text-transform: uppercase;
  padding: 8px 12px; border: 1.5px dashed var(--s-line-campo); border-radius: 8px; background: #fff;
}
.s-cupon input:focus { border-color: var(--s-brand); outline: none; }
/* Lo que se escribe va en mayúsculas; la pregunta de ejemplo no («¿TIENES UN CUPÓN?», VISUAL-14). */
.s-cupon input::placeholder { text-transform: none; }
.s-cupon button {
  font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer;
  padding: 8px 16px; border: 1.5px solid var(--s-brand); border-radius: 8px;
  background: #fff; color: var(--s-brand-dark);
}
.s-cupon button:hover { background: var(--s-brand-tint); }
.s-cupon-ok { margin: 0; font-size: 0.875rem; color: var(--s-brand-dark); display: flex; align-items: center; gap: 8px; }
.s-cupon-ok button { padding: 4px 8px; border-color: var(--s-line); color: var(--s-muted); }
.s-btn-block { display: block; width: 100%; text-align: center; font-size: 1rem; padding: 16px; border: 0; cursor: pointer; }
/* Sobre --s-surface el teal de la marca da 4,28: la letra de marca va en su tono oscuro (B-415). */
.s-cart-back { display: block; text-align: center; margin-top: 12px; font-size: 0.875rem; font-weight: 600; color: var(--s-brand-dark); }

.s-freeship { margin-bottom: 12px; }
.s-freeship p { margin: 0 0 8px; font-size: 0.8125rem; color: var(--s-ink); }
.s-freeship-bar { height: 8px; background: var(--s-line); border-radius: 9999px; overflow: hidden; }
.s-freeship-bar span { display: block; height: 100%; background: var(--s-brand); border-radius: 9999px; }

.s-checkout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; align-items: start; }
.s-form fieldset { border: 0; padding: 0; margin: 0 0 24px; }
/* En 700 como h1 y h2: el peso regular deja «Tus datos» desmayado al lado de las etiquetas (VISUAL-12). */
.s-form legend { font-family: var(--s-font-display); font-size: 1.125rem; font-weight: 700; color: var(--s-ink); margin-bottom: 12px; }
.s-field { margin-bottom: 12px; }
.s-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.s-field label { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--s-ink); margin-bottom: 4px; }
.s-opt { font-weight: 500; color: var(--s-muted); }
.s-field input, .s-field select {
  width: 100%; font: inherit; font-size: 0.9375rem; color: var(--s-ink);
  padding: 12px 12px; border: 1.5px solid var(--s-line-campo); border-radius: 8px; background: #fff;
}
.s-field input:focus, .s-field select:focus { border-color: var(--s-brand); outline: none; }
.s-field.has-error input, .s-field.has-error select { border-color: #dc7609; }
.s-err { display: block; font-size: 0.75rem; font-weight: 600; color: var(--s-amber); margin-top: 4px; }
.s-field-check { margin: 12px 0; font-size: 0.875rem; }
/* El texto va en un <span>: con flex, cada nodo de texto suelto era un ítem aparte y las palabras se
   repartían por la fila («Acepto  términos y  y  política de»). */
.s-field-check label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.s-field-check label > span { flex: 1 1 auto; }
.s-field-check input { margin-top: 4px; }
.s-field-check.has-error label { color: var(--s-amber); }
.s-field-check input { accent-color: var(--s-brand); }

.s-radio-cards { display: grid; gap: 12px; margin-bottom: 16px; }
.s-radio-card {
  display: flex; gap: 12px; align-items: baseline; cursor: pointer;
  border: 1.5px solid var(--s-line); border-radius: 8px; padding: 12px 16px; background: #fff;
}
.s-radio-card:has(input:checked) { border-color: var(--s-brand); background: var(--s-brand-tint); }
.s-radio-card input { accent-color: var(--s-brand); }
.s-radio-card span { font-size: 0.875rem; color: var(--s-muted); }
.s-radio-card strong { display: block; color: var(--s-ink); }
body[data-entrega="retiro"] .s-solo-reparto { display: none; }
body[data-entrega="reparto"] .s-solo-retiro { display: none; }

.s-checkout-resumen {
  border: 1px solid var(--s-line); border-radius: var(--s-radius);
  padding: 20px 20px; background: var(--s-surface); position: sticky; top: 120px;
}
.s-checkout-resumen h2 { font-size: 1.125rem; margin-bottom: 12px; }
.s-resumen-linea { display: flex; justify-content: space-between; gap: 12px; font-size: 0.875rem; padding: 4px 0; }
.s-resumen-linea span:first-child { min-width: 0; }
.s-resumen-linea span:last-child { font-weight: 600; white-space: nowrap; flex: none; }
.s-pago-info { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--s-line); font-size: 0.8rem; color: var(--s-muted); }

/* La fila "Entrega" lleva una frase ("Llega hoy si compras antes de las 14:30"), no un
   monto: el nowrap de arriba la montaba sobre el label. */
.s-resumen-entrega span:last-child { white-space: normal; flex: 1; text-align: right; font-weight: 400; text-wrap: balance; }
.s-resumen-total { border-top: 1px solid var(--s-line); margin-top: 8px; padding-top: 12px; font-weight: 800; font-size: 1rem; }

.s-pedido { padding: 32px 0 12px; }
.s-pedido-head { text-align: center; padding: 12px 0 8px; }
.s-pedido-head p { color: var(--s-muted); max-width: 480px; margin: 0 auto; }
/* «¿Dudas con tu pedido?», centrado con la columna del pedido: llevaba `text-center`, que la tienda no tiene (VISUAL-11). */
.s-pedido-ayuda { text-align: center; }
/* Un nombre de producto sin espacios («Glucosamina+Condroitina+MSM») no se partía y ensanchaba la página: la ficha
   medía 462 px a 390 (VISUAL-2). */
.s-pinfo h1, .s-crumbs, .s-resumen-linea span:first-child, .s-cart-name, .s-pedido-head p { overflow-wrap: anywhere; }
.s-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; margin-bottom: 12px;
  background: var(--s-brand-tint); color: var(--s-brand-dark); font-size: 1.75rem; font-weight: 800;
}
.s-spinner {
  display: inline-block; width: 40px; height: 40px; margin-bottom: 12px;
  border: 4px solid var(--s-line); border-top-color: var(--s-brand);
  border-radius: 50%; animation: s-spin 0.9s linear infinite;
}
@keyframes s-spin { to { transform: rotate(360deg); } }
.s-pickup {
  text-align: center; border: 1.5px dashed var(--s-brand); border-radius: var(--s-radius);
  background: var(--s-brand-tint); padding: 20px; margin: 20px auto; max-width: 380px;
}
.s-pickup p { margin: 0; font-size: 0.8125rem; font-weight: 700; color: var(--s-brand-dark); }
/* Solo el código, hijo directo de la caja: la sucursal también va en un <strong>, dentro del texto, y se
   dibujaba con esta letra (B-419). */
.s-pickup > strong { font-size: 2rem; letter-spacing: 0.2em; color: var(--s-ink); display: block; margin: 4px 0; }
.s-pickup span { font-size: 0.75rem; color: var(--s-muted); }
.s-timeline { display: flex; justify-content: center; gap: 0; list-style: none; padding: 20px 0 8px; margin: 0; flex-wrap: wrap; }
.s-timeline li {
  font-size: 0.8125rem; font-weight: 600; color: var(--s-muted);
  padding: 8px 16px; display: flex; align-items: center; gap: 8px;
}
.s-timeline li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--s-line); }
.s-timeline li.done { color: var(--s-brand-dark); }
.s-timeline li.done::before { background: var(--s-brand); }
.s-pedido-detalle { max-width: 480px; margin: 20px auto; border: 1px solid var(--s-line); border-radius: var(--s-radius); padding: 16px 20px; }
.s-pedido-detalle h2 { font-size: 1.0625rem; margin-bottom: 8px; }

/* El documento legal va dentro de `.s-wrap`, que es dueño del centrado y del relleno lateral: acá
   solo el aire de arriba y de abajo. Con `padding` abreviado el texto tocaba el borde a 390 (B-176). */
.s-legal { padding-top: 24px; padding-bottom: 40px; max-width: 760px; }
.s-legal h2 { margin-top: 24px; }
.s-legal p, .s-legal li { font-size: 0.9375rem; }
.s-legal ul { padding-left: 20px; }
.s-legal li { margin-bottom: 8px; }
.s-legal-fecha { color: var(--s-muted); font-size: 0.8125rem !important; margin-top: -8px; }

/* La fila de compra se parte según el espacio que tiene, no según la pantalla: cada botón mide lo
   que mide su texto en una línea, y el que no cabe baja a la fila siguiente y se estira. Con el
   arreglo atado al teléfono (≤ 760, T5), entre 761 y 960 px la ficha va en dos columnas, la de datos
   mide de 305 a 390 px y «Agregar al carrito» volvía a partirse en dos o tres líneas (B-165). */
.s-buy { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 8px 0 4px; }
.s-buy input {
  width: 72px; font: inherit; font-size: 1rem; text-align: center;
  border: 1.5px solid var(--s-line-campo); border-radius: 9999px;
}
.s-buy input:focus { border-color: var(--s-brand); outline: none; }
.s-buy .s-btn, .s-buy .s-btn-sec { flex: 1 0 auto; margin-top: 0; white-space: nowrap; }
.s-btn-sec {
  display: inline-block; font-weight: 700; font-size: 0.875rem; text-align: center;
  padding: 12px 24px; border-radius: 9999px; margin-top: 8px;
  border: 1.5px solid var(--s-line); color: var(--s-ink); background: #fff;
}
.s-btn-sec:hover { border-color: var(--s-brand); color: var(--s-brand-dark); }

main { animation: s-entra 0.3s var(--s-ease); }
@keyframes s-entra {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .s-card, .s-cat-card, .s-btn, .s-card-img img { transition: none; }
  main { animation: none; }
  .s-spinner { animation-duration: 3s; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  /* 16px en todo campo que se pueda tocar. Bajo ese tamaño, iOS Safari hace zoom solo
     al enfocar: el formulario de compra saltaba y se descuadraba en CADA campo que el
     cliente tocaba — nombre, teléfono, correo, comuna, dirección — justo en la pantalla
     donde ya decidió comprar. No es preferencia tipográfica, es el umbral del sistema. */
  .s-field input, .s-field select, .s-search input, .s-buy input,
  .s-cart-qty input, .s-cupon input, .s-facets select { font-size: 16px; }

  /* La foto cuadrada empujaba el precio y el botón fuera de la primera pantalla en un
     teléfono de 667px, con el header creciendo a dos filas. Lo primero que tiene que
     verse es cuánto cuesta y cómo comprarlo. */
  .s-gallery-main { aspect-ratio: auto; max-height: 46vh; }
  .s-gallery-main img { max-height: 46vh; width: auto; margin: 0 auto; }

  /* Lo fijo es solo el `<header>`: logo, WhatsApp como ícono y el carrito sin la palabra (el nombre lo da su
     `aria-label`). El buscador de la fila se esconde; el de abajo, con las categorías, se desplaza con la página.
     Medía 233 px de 844 (COMPRA-7). */
  :root { --s-fijo-arriba: 80px; }
  .s-top { display: contents; }
  .s-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--s-line); }
  .s-header-row { gap: 12px 16px; padding: 12px 0; }
  .s-header .s-search { display: none; }
  .s-busca-movil { display: block; padding-block: 12px; }
  .s-search { max-width: none; }
  .s-header-contact { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; }
  .s-header-contact .s-ico { display: block; width: 24px; height: 24px; }
  .s-header-contact-txt, .s-header-cart-txt { display: none; }
  .s-header-cart { padding: 8px 12px; }
  .s-nav { border-bottom: 1px solid var(--s-line); }
  .s-product { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 20px; }
  .s-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .s-hero { padding: 32px 0 32px; }
  .s-section { padding: 24px 0; }

  /* Checkout: una sola columna — el resumen compacto arriba, el formulario abajo.
     Sin esto, form y resumen quedaban lado a lado en 390px: nombres palabra por
     palabra y el total saliéndose de la card (reporte de Jorge 24-ago). */
  .s-checkout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .s-checkout-resumen { position: static; order: -1; }
  /* Teléfono y correo, comuna y dirección, de a uno: de a dos medían 169 px y el correo no se leía (COMPRA-8). */
  .s-field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }

  /* Carrito: la fila se parte en dos líneas — foto+nombre arriba (todo el ancho),
     cantidad/total/quitar abajo. El nombre respira en vez de caer en columna. */
  .s-cart-row { flex-wrap: wrap; row-gap: 12px; }
  .s-cart-img { width: 56px; height: 56px; }
  /* La cantidad queda bajo el nombre: la foto (56) y el espacio de la fila (16). */
  .s-cart-info { flex-basis: calc(100% - 56px - 16px); }
  .s-cart-qty { margin-left: calc(56px + 16px); }
  .s-cart-total { margin-left: auto; }
}

/* Banner de consentimiento (Ley 21.719) — prerequisito del pixel de Meta (F9).
   El pixel solo se renderizará cuando vant_consent=all. */
.s-consent {
  /* Pegado al borde inferior mientras se desplaza, pero dentro del flujo: al final de la página queda
     debajo del pie y ya no tapa sus enlaces ni el cierre del texto legal (S18). */
  position: sticky; bottom: 12px; z-index: 90; max-width: 720px; margin: 12px auto; width: calc(100% - 24px);
  background: var(--s-ink); color: #fff; border-radius: 14px; padding: 16px 16px;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
.s-consent p { margin: 0; font-size: 0.8125rem; line-height: 1.5; flex: 1 1 300px; color: #fff; }
.s-consent a { color: #fff; text-decoration: underline; }
.s-consent-btns { display: flex; gap: 8px; }
.s-consent button {
  font: inherit; font-weight: 700; font-size: 0.8125rem; padding: 8px 16px;
  border-radius: 9999px; border: 0; cursor: pointer; background: var(--s-brand); color: #fff;
}
.s-consent button.s-consent-min { background: transparent; border: 1px solid rgba(255, 255, 255, 0.4); }
/* En el teléfono, compacto: medía 151 px a 390 y tapaba el total del carrito. El texto y «Entendido» van en una
   fila, con menos relleno; los dos botones del píxel bajan a la siguiente. Va después de la regla base, que si no
   la pisa. */
@media (max-width: 760px) {
  .s-consent { bottom: 8px; margin: 8px auto; width: calc(100% - 16px); padding: 8px 12px; gap: 8px 12px; }
  .s-consent p { flex: 1 1 200px; font-size: 0.75rem; line-height: 1.4; }
  .s-consent button { padding: 8px 12px; }
}

/* ---------------------------------------------------------------------------
   Motion de entrada — el acabado que separa "funciona" de "se siente bonito".
   Una sola pasada al cargar: el contenido sube 8px y aparece, con un stagger
   corto en las grillas para que el catálogo "respire" en vez de aparecer de
   golpe. Nada se mueve después de asentarse, y todo se apaga con
   prefers-reduced-motion (el guard de accesibilidad va al final del archivo
   para ganar el cascade a cualquier animación de arriba).
--------------------------------------------------------------------------- */
@keyframes s-entrada {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.s-hero, .s-pinfo, .s-pedido-head, .s-checkout-form, .s-checkout-resumen,
.s-cart-tabla, .s-pedido-detalle, .s-cat-head {
  animation: s-entrada 0.35s var(--s-ease) backwards;
}
.s-grid > * { animation: s-entrada 0.4s var(--s-ease) backwards; }
/* stagger: solo las primeras filas — más allá del pliegue no se ve y suma delay */
.s-grid > *:nth-child(1) { animation-delay: 0.03s; }
.s-grid > *:nth-child(2) { animation-delay: 0.06s; }
.s-grid > *:nth-child(3) { animation-delay: 0.09s; }
.s-grid > *:nth-child(4) { animation-delay: 0.12s; }
.s-grid > *:nth-child(5) { animation-delay: 0.15s; }
.s-grid > *:nth-child(6) { animation-delay: 0.18s; }
.s-grid > *:nth-child(7) { animation-delay: 0.21s; }
.s-grid > *:nth-child(8) { animation-delay: 0.24s; }

/* el check de "¡Pedido confirmado!" aterriza con un pop — el momento feliz de la compra */
@keyframes s-pop {
  0% { opacity: 0; transform: scale(0.4); }
  70% { transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
.s-check { display: inline-block; animation: s-pop 0.45s var(--s-ease) 0.15s backwards; }

/* El contador del carrito late cuando cambia, no en cada página: con la animación en `.n`, cada navegación la
   repetía, porque el contador se dibuja en el servidor (VISUAL-14). Late con `.s-late`, que pone el script de
   «agregar» cuando el número sube. */
@keyframes s-late { 0% { transform: scale(0.6); } 55% { transform: scale(1.25); } 100% { transform: scale(1); } }
.s-header-cart .n.s-late { animation: s-late 0.35s var(--s-ease) backwards; }

/* inputs del checkout: el foco se siente, no solo se ve */
.s-checkout-form input, .s-checkout-form select, .s-search input {
  transition: border-color 0.15s var(--s-ease), box-shadow 0.15s var(--s-ease);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    /* Corta no basta: una animación infinita (el spinner del pago) seguía girando a toda velocidad (ACC-11). */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* Mi cuenta — historial y magic link */
.s-cuenta { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; }
.s-cuenta-form { display: flex; flex-direction: column; gap: 12px; max-width: 380px; margin-top: 20px; }
.s-cuenta-form label { font-weight: 700; font-size: 0.875rem; }
.s-cuenta-form input { padding: 12px 16px; border: 1.5px solid var(--s-line-campo); border-radius: 8px; font: inherit; }
.s-cuenta-aviso { background: var(--s-brand-soft, #e2f1ec); border-radius: 8px; padding: 16px 20px; margin-top: 20px; }
.s-cuenta-error { color: var(--s-amber); font-weight: 700; margin-top: 12px; }
.s-cuenta-salir { background: none; border: none; color: var(--s-muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: 0.85rem; padding: 0; }
.s-cuenta-lista { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.s-cuenta-pedido { border: 1px solid var(--s-line); border-radius: 14px; padding: 16px 20px; background: var(--s-surface, #fff); }
.s-cuenta-fila { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.s-cuenta-fila span { color: var(--s-muted); font-size: 0.875rem; }
.s-cuenta-estado { font-weight: 700; color: var(--s-brand-dark) !important; }
.s-cuenta-items { color: var(--s-muted); font-size: 0.85rem; margin-top: 8px; }
.s-cuenta-acciones { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.s-btn-sec { background: transparent; color: var(--s-brand-dark); border: 1.5px solid var(--s-brand); }

.s-check-line { display: flex; gap: 8px; align-items: flex-start; font-size: 0.8125rem; margin-top: 8px; color: var(--s-ink); }
.s-check-line input { margin-top: 4px; accent-color: var(--s-brand); }

/* Toast de "agregado al carrito": la compra sigue donde estaba, el carrito a un clic */
/* Se centra entre los dos bordes (`left` y `right` de 12 px, `margin-inline: auto` y el ancho de su contenido), no
   con `left: 50%` + `translateX(-50%)`: así solo podía usar la mitad derecha de la pantalla y a 390 medía 195 px de
   ancho en cuatro líneas (VISUAL-6). Sin `transform` que lo coloque, la entrada solo sube: no hay centrado que un
   fotograma pueda borrar (Jorge, 14-sep). */
@keyframes s-toast-entrada {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.s-toast { position: fixed; left: 12px; right: 12px; bottom: 22px; margin-inline: auto; width: fit-content; z-index: 1200;
  display: flex; gap: 16px; align-items: center; background: var(--s-ink); color: #fff;
  border-radius: 9999px; padding: 12px 20px; font-size: 0.875rem; font-weight: 600;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.25); animation: s-toast-entrada 0.3s var(--s-ease);
  max-width: 560px; flex-wrap: wrap; justify-content: center; }
.s-toast a { color: #fff; text-decoration: underline; white-space: nowrap; }
.s-toast .s-toast-pagar { background: var(--s-brand); text-decoration: none; padding: 4px 16px; border-radius: 9999px; }
.s-toast button { background: none; border: none; color: #fff; font-size: 1.1rem; cursor: pointer; padding: 0 4px; line-height: 1; }
.s-toast-warn { background: #7a4b00; }
/* Zoom de la ficha: <dialog> nativo, sin librería (T5 #19) */
.s-zoom { border: 0; padding: 0; background: #fff; border-radius: var(--s-radius); max-width: min(92vw, 900px); max-height: 92vh; }
.s-zoom::backdrop { background: rgba(0, 0, 0, 0.6); }
.s-zoom img { display: block; max-width: 100%; max-height: 92vh; object-fit: contain; }
.s-zoom-close {
  position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: var(--s-ink); color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer;
}

/* ── El dedo necesita 44 px ──
   Medido el 16-sep-2026: diez controles de la tienda quedaban por debajo en un teléfono. Los
   que cuestan plata: el «+» de la grilla (40×40) es agregar al carrito, «Carrito» del
   encabezado (37,7) es el único acceso en todas las páginas, y el «×» del aviso de producto
   agregado medía 17,6 px — no se puede cerrar sin tapar la pantalla con el pulgar.

   Va bajo `pointer: coarse` y no suelto: el dedo necesita 44 px, el mouse no, y así arreglar
   el teléfono no engorda el escritorio. */
@media (pointer: coarse) {
  .s-header-cart { min-height: 44px; }
  .s-card-add button { min-width: 44px; min-height: 44px; }
  .s-chips a { min-height: 44px; display: inline-flex; align-items: center; }
  .s-toast button { min-width: 44px; min-height: 44px; }
  .s-cart-remove { min-width: 44px; min-height: 44px; }
  .s-nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .s-pager a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .s-zoom-close { min-width: 44px; min-height: 44px; }
  .s-cupon-ok button { min-width: 44px; min-height: 44px; }
  .s-consent button { min-height: 44px; }
}