/* Comprafit · estilos de la tienda
   Sistema del lienzo aprobado: Archivo itálica 900 (títulos), Manrope (texto),
   acento #0010F5, fondo #F4F4F0. Mobile primero; escritorio desde 960px. */

:root {
  --fondo: #F4F4F0;
  --blanco: #FFFFFF;
  --tinta: #0E0E10;
  --acento: #0010F5;
  --acento-claro: #8C94FF;
  --borde: #E2E2DC;
  --borde-fuerte: #D6D6CF;
  --gris: #5A5A60;
  --gris-oscuro: #45454B;
  --gris-claro: #8A8A90;
  --vacio: #E6E6DF;
  --ok: #0A6B35;
  --ok-fondo: #E7F4EC;
  --no: #B5540A;
  --no-fondo: #FFF2E5;
  --wsp: #1FAF55;
  --radio: 14px;
  --ancho: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}
a { color: var(--tinta); }
a:hover { color: var(--acento); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
hr { border: none; height: 1px; background: #DEDED7; margin: 8px 0; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

.display {
  font-family: 'Archivo', sans-serif;
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0;
}
.h1 { font-size: 34px; }
.h2 { font-size: 28px; }
.h3 { font-size: 20px; }
.acento { color: var(--acento); }
.gris { color: var(--gris); }
.chico { font-size: 12px; }
.centrado { text-align: center; }
.texto-ok { color: var(--ok); font-weight: 700; }
.texto-no { color: var(--no); font-weight: 700; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 12px; top: 12px; z-index: 50; background: var(--blanco); padding: 8px 12px; border-radius: 8px; }

/* --- Botones ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border-radius: 12px; border: 1.5px solid transparent;
  font-weight: 800; font-size: 15px; text-decoration: none; cursor: pointer;
  background: var(--blanco);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-acento { background: var(--acento); color: var(--blanco); }
.btn-acento:hover { color: var(--blanco); background: #000CC0; }
.btn-negro { background: var(--tinta); color: var(--blanco); }
.btn-negro:hover { color: var(--blanco); background: #2A2A30; }
.btn-borde { border-color: var(--tinta); color: var(--tinta); font-weight: 700; }
.btn-wsp { background: var(--wsp); color: var(--blanco); }
.btn-wsp:hover { color: var(--blanco); background: #178F45; }
.btn-grande { min-height: 54px; width: 100%; font-size: 16px; }
.btn-chico { min-height: 38px; padding: 0 14px; font-size: 13px; border-radius: 10px; }

/* --- Franjas y cabecera --------------------------------------------------- */
.franja {
  background: var(--tinta); color: var(--blanco);
  font-size: 12px; font-weight: 600; text-align: center; padding: 8px 16px; letter-spacing: 0.02em;
}
.franja-prueba { background: #FFF7E0; color: #7A6212; font-weight: 800; }

.cab { background: var(--blanco); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 20; }
.cab-in {
  max-width: var(--ancho); margin: 0 auto;
  display: flex; align-items: center; gap: 12px; padding: 8px 12px;
}
.logo {
  font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 900;
  font-size: 28px; letter-spacing: 0.05em; text-decoration: none; color: var(--tinta);
  flex-shrink: 0;
}
.logo span { color: var(--acento); }
.cab .logo { margin: 0 auto; }
/* Logo en imagen (cargado desde el panel): la altura viene del panel; en celular se acota. */
.logo-img { display: block; width: auto; max-width: 100%; object-fit: contain; }
.cab .logo-img { max-width: min(180px, 48vw); max-height: 44px; }
@media (min-width: 900px) { .cab .logo-img { max-width: 260px; max-height: none; } }
.cab-carrito {
  position: relative; width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.burbuja {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--acento); color: var(--blanco);
  font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}

.menu-movil { position: static; }
.menu-movil summary {
  list-style: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--blanco); border-bottom: 1px solid var(--borde);
  box-shadow: 0 16px 30px rgba(14, 14, 16, 0.12);
  display: flex; flex-direction: column; padding: 8px 16px 16px; max-height: 70vh; overflow-y: auto;
}
.menu-movil-panel a { padding: 12px 0; border-bottom: 1px solid var(--borde); text-decoration: none; font-weight: 700; }
.menu-destacado { font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 900 !important; text-transform: uppercase; }

.buscar {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px;
  border: 1.5px solid var(--borde-fuerte); border-radius: 12px; background: #F7F7F4; color: var(--gris);
}
.buscar input { border: none; background: transparent; flex-grow: 1; min-width: 0; font-size: 15px; outline: none; color: var(--tinta); }
.buscar:focus-within { border-color: var(--acento); }
.buscar-movil { margin: 4px 16px 12px; }
/* Después de .buscar y .btn para que no los pisen en mobile. */
.nav-escritorio, .buscar-escritorio, .btn-wsp-cab { display: none; }

.aviso-flotante {
  max-width: var(--ancho); margin: 12px auto 0; padding: 12px 16px;
  background: var(--ok-fondo); color: var(--ok); font-weight: 700; border-radius: 12px;
  width: calc(100% - 32px);
}

/* --- Secciones ------------------------------------------------------------ */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: 24px 16px; }
.seccion-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.seccion-cabeza a { font-weight: 700; font-size: 14px; white-space: nowrap; flex-shrink: 0; }
.seccion > .h2 { margin-bottom: 14px; }
.seccion-blanca { background: var(--blanco); max-width: none; }
.seccion-in { max-width: var(--ancho); margin: 0 auto; }
.bajada { color: var(--gris-oscuro); margin: 10px 0 16px; }

.hero { background: var(--blanco); }
.hero-in { max-width: var(--ancho); margin: 0 auto; padding: 28px 16px 24px; display: flex; flex-direction: column; gap: 24px; }
/* Tamaño fluido para que "SUPLEMENTOS" entre entero desde 320 px (antes se cortaba la palabra). */
.hero h1 { font-size: clamp(28px, 8.8vw, 48px); line-height: 0.95; overflow-wrap: break-word; hyphens: manual; }
.ficha-titulo, .h1 { overflow-wrap: break-word; }
.hero p { font-size: 16px; color: var(--gris-oscuro); margin: 16px 0; }
.hero-botones { display: flex; flex-direction: column; gap: 10px; }
.hero-botones .btn { min-height: 54px; }
.beneficios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.beneficios li {
  background: var(--fondo); border-radius: 12px; padding: 12px 10px;
  display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--gris);
}
.beneficios strong { font-size: 13px; color: var(--tinta); line-height: 1.2; }

.pildoras { display: flex; flex-wrap: wrap; gap: 8px; }
.pildora {
  min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center;
  border-radius: 999px; background: var(--blanco); border: 1px solid var(--borde-fuerte);
  font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 900; font-size: 13px;
  text-transform: uppercase; text-decoration: none;
}
.pildora-negra { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
.pildora-negra:hover { color: var(--blanco); }
.pildora-marca { font-family: 'Manrope', sans-serif; font-style: normal; font-weight: 800; letter-spacing: 0.04em; border-radius: 10px; }
.pildoras-listado { max-width: var(--ancho); margin: 0 auto; padding: 0 16px 8px; }

/* Categorías del inicio: grilla de fichas con foto (2 columnas en celular, 4 en escritorio). */
.categorias-grilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.categoria-tile {
  height: 100%; display: flex; flex-direction: column; gap: 2px; padding: 0 0 12px; overflow: hidden;
  border-radius: var(--radio); background: var(--blanco); border: 1px solid var(--borde); text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.categoria-tile:hover { border-color: var(--tinta); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); color: inherit; }
.categoria-tile:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.categoria-foto { position: relative; display: block; aspect-ratio: 4 / 3; margin-bottom: 8px; background: var(--blanco); overflow: hidden; }
.categoria-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform .25s; }
.categoria-tile-propia .categoria-foto img { object-fit: cover; padding: 0; }
.categoria-tile:hover .categoria-foto img { transform: scale(1.04); }
.categoria-nombre {
  padding: 0 12px; font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 900; font-size: 15px;
  line-height: 1.1; text-transform: uppercase;
}
.categoria-cantidad { padding: 0 12px; font-size: 12px; font-weight: 600; color: var(--gris); }
@media (min-width: 760px) {
  .categorias-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .categoria-nombre { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .categoria-foto img, .categoria-tile { transition: none; } .categoria-tile:hover .categoria-foto img { transform: none; } }

.locales { display: grid; gap: 12px; }
.local { border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.local-nombre { font-size: 17px; font-weight: 800; }
.local-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.nota {
  display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 14px;
  border-radius: 12px; background: var(--fondo); font-size: 13px; color: var(--gris-oscuro);
}
.nota .ico { flex-shrink: 0; color: var(--tinta); }
.nota strong { color: var(--tinta); }

.local-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.abierto { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.abierto-si { background: var(--ok-fondo); color: var(--ok); }
.abierto-no { background: var(--fondo); color: var(--gris); }
.abierto-no .punto { background: var(--gris-claro); }
.local { background: var(--blanco); }
.local-con-mapa { display: flex; flex-direction: column; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); background: var(--blanco); }
.local-con-mapa .local { border: none; border-radius: 0; }
.mapa { width: 100%; height: 200px; border: 0; display: block; background: var(--vacio); }
.pagina-info { max-width: 820px; margin: 0 auto; padding: 8px 16px 40px; display: flex; flex-direction: column; gap: 16px; }
.bloque-info { display: flex; flex-direction: column; gap: 10px; }
.bloque-info .caja p, .pagina-info .caja p { margin: 0; color: var(--gris-oscuro); font-size: 14px; }
.caja-negra { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
.pagina-info .caja-negra p { color: #C9C9CF; }
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--blanco); border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq p { margin: 10px 0 0; color: var(--gris-oscuro); }

/* --- Tarjetas de producto ------------------------------------------------- */
.grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tarjeta {
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; display: flex; flex-direction: column;
}
.tarjeta-foto { display: block; aspect-ratio: 1 / 1; background: var(--blanco); }
.foto { width: 100%; height: 100%; object-fit: contain; }
.foto-vacia {
  display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center;
  background: var(--vacio); color: var(--gris); font-size: 12px; font-weight: 700;
}
.foto-vacia span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta-cuerpo { padding: 12px; display: flex; flex-direction: column; gap: 4px; flex-grow: 1; }
.marca { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); }
.tarjeta-titulo {
  font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 900; font-size: 15px; line-height: 1.2;
  text-decoration: none; min-height: 54px;
}
.precio-grande { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; margin-top: 4px; }
.precio-grande small { font-size: 12px; font-weight: 700; color: var(--gris); }
.precio-etiqueta { font-size: 12px; font-weight: 800; color: var(--acento); }
.precio-otros { font-size: 12px; color: var(--gris); line-height: 1.35; }
.tarjeta-form { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.disponible { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ok); }
.punto { width: 7px; height: 7px; border-radius: 4px; background: #0A7A3C; flex-shrink: 0; }
.sin-stock { font-size: 12px; font-weight: 700; color: var(--no); }

/* Chips de sabor / opción: radio real + label. Agotado = tachado. */
.chips { border: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.chips legend { font-size: 14px; font-weight: 700; padding: 0; margin-bottom: 8px; width: 100%; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 10px; border: 1.5px solid var(--borde-fuerte); background: var(--blanco);
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.chip input:checked + label { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
.chip input:focus-visible + label { outline: 3px solid var(--acento); outline-offset: 2px; }
.chip input:disabled + label,
.chip-agotado label {
  background: var(--fondo); color: var(--gris-claro); border-style: dashed; text-decoration: line-through;
}
.chip input:disabled + label { cursor: default; }
.chip-agotado input:checked + label { background: #DEDED7; color: var(--gris-oscuro); border-color: var(--gris-claro); }
.chips-chicos { gap: 5px; }
.chips-chicos legend { font-size: 11px; font-weight: 700; color: var(--gris); margin-bottom: 4px; }
.chips-chicos .chip label { min-height: 34px; padding: 0 10px; font-size: 11px; border-radius: 8px; }
/* Tarjeta con variantes: solo cuántas hay; se eligen en la ficha. */
.tarjeta-opciones { font-size: 12px; font-weight: 600; color: var(--gris); margin-top: 6px; }

/* --- Listado ----------------------------------------------------------------*/
.migas { max-width: var(--ancho); margin: 0 auto; padding: 12px 16px 0; font-size: 12px; color: var(--gris); display: flex; flex-wrap: wrap; gap: 6px; }
.migas a { color: var(--gris); }
.migas [aria-current] { color: var(--tinta); font-weight: 600; }
.listado-cabeza { max-width: var(--ancho); margin: 0 auto; padding: 10px 16px 12px; }
.listado-cabeza p { margin: 6px 0 0; font-size: 13px; }
.filtros {
  max-width: var(--ancho); margin: 0 auto; padding: 0 16px 12px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
}
.filtro { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--gris); font-weight: 700; }
.filtro select { height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--borde-fuerte); background: var(--blanco); font-size: 13px; font-weight: 700; color: var(--tinta); }
.filtro-check { flex-direction: row; align-items: center; height: 40px; gap: 8px; color: var(--tinta); }
.filtro-check input { width: 20px; height: 20px; accent-color: var(--acento); }
.seccion-listado { padding-top: 8px; }
.paginacion { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; font-weight: 700; }
.vacio { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 16px; }

/* --- Ficha ------------------------------------------------------------------*/
.ficha { max-width: var(--ancho); margin: 0 auto; padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 16px; }
.ficha-foto { background: var(--blanco); border-radius: 16px; overflow: hidden; aspect-ratio: 1 / 1; border: 1px solid var(--borde); }
.ficha-info { display: flex; flex-direction: column; gap: 10px; }
.ficha-titulo { font-size: 34px; }
.ficha-precio { padding: 16px; border-radius: var(--radio); background: var(--blanco); border: 1px solid var(--borde); display: flex; flex-direction: column; gap: 4px; color: var(--gris-oscuro); font-size: 14px; }
.ficha-precio .precio-grande { font-size: 40px; color: var(--tinta); margin: 0; }
.ficha-precio .precio-etiqueta { font-size: 14px; }
.ficha-precio strong { color: var(--tinta); }
.ficha-form { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.sin-stock-aviso { margin: 0; font-size: 13px; color: var(--gris); }
.sin-stock-aviso a { font-weight: 700; color: var(--gris-oscuro); }
.cantidad-fila { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 14px; }
.cantidad { display: inline-flex; align-items: center; border: 1.5px solid var(--borde-fuerte); border-radius: 12px; overflow: hidden; background: var(--blanco); }
.cantidad button { width: 44px; height: 44px; border: none; background: var(--blanco); font-size: 20px; font-weight: 700; cursor: pointer; }
.cantidad input {
  width: 44px; height: 44px; border: none; text-align: center; font-weight: 800; font-size: 16px;
  -moz-appearance: textfield; appearance: textfield; background: var(--blanco);
}
.cantidad input::-webkit-outer-spin-button, .cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ficha-botones { display: flex; flex-direction: column; gap: 10px; }
.caja { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.caja-destacada { border: 1.5px solid var(--acento); }
.entrega-fila { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.entrega-fila > div { flex-grow: 1; display: flex; flex-direction: column; }
.entrega-fila .gris { font-size: 13px; }
.entrega-fila .ico { flex-shrink: 0; margin-top: 2px; }
.estado { font-size: 12px; font-weight: 800; white-space: nowrap; }
.estado-ok { color: var(--ok); }
.estado-no { color: var(--no); }
.descripcion { margin: 0; line-height: 1.55; color: #2E2E33; }

.barra-compra {
  position: sticky; bottom: 0; z-index: 15;
  background: var(--blanco); border-top: 1px solid var(--borde);
  padding: 12px 16px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 -6px 20px rgba(14, 14, 16, 0.08);
}
.barra-compra > div { flex-grow: 1; }
.precio-barra { font-size: 20px; font-weight: 800; }

/* --- Carrito y checkout ------------------------------------------------------*/
.pasos-cabeza { max-width: var(--ancho); margin: 0 auto; padding: 20px 16px 8px; display: flex; flex-direction: column; gap: 12px; }
.pasos { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: var(--gris-claro); }
.pasos li { display: flex; align-items: center; gap: 6px; }
.pasos span {
  width: 24px; height: 24px; border-radius: 12px; border: 1.5px solid var(--borde-fuerte);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
}
.pasos .paso-activo { color: var(--tinta); }
.pasos .paso-activo span { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }

.carrito, .checkout { max-width: var(--ancho); margin: 0 auto; padding: 8px 16px 32px; display: flex; flex-direction: column; gap: 16px; }
.carrito-lineas, .checkout-pasos { display: flex; flex-direction: column; gap: 10px; }
.linea {
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px;
  display: grid; grid-template-columns: 72px 1fr auto; grid-template-areas: "foto info quitar" "foto cant precio"; gap: 8px 12px; align-items: center;
}
.linea-foto { grid-area: foto; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; align-self: start; }
.linea-info { grid-area: info; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.linea-titulo { font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 900; font-size: 15px; line-height: 1.25; text-decoration: none; }
.linea-cantidad { grid-area: cant; }
.linea-cantidad .cantidad button, .linea-cantidad .cantidad input { width: 34px; height: 34px; font-size: 15px; }
.linea-precio { grid-area: precio; text-align: right; }
.linea-monto { font-size: 16px; font-weight: 800; }
.linea-quitar { grid-area: quitar; justify-self: end; align-self: start; }
.linea-quitar button { width: 36px; height: 36px; border: none; background: transparent; color: var(--gris-claro); cursor: pointer; }
.linea-quitar button:hover { color: var(--no); }
.volver { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; margin-top: 6px; }

.resumen .caja { gap: 10px; }
.resumen-fila { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--gris-oscuro); }
.resumen-fila span:last-child { font-weight: 700; color: var(--tinta); text-align: right; }
.resumen-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 800; }
.resumen-total span:last-child { font-size: 26px; }
.resumen-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.resumen-items li { display: flex; justify-content: space-between; gap: 12px; }
.resumen-items li span:last-child { font-weight: 700; white-space: nowrap; }
.resumen .nota { margin-top: 12px; background: var(--blanco); border: 1px solid var(--borde); }

.alerta { max-width: var(--ancho); margin: 8px auto; padding: 12px 16px; border-radius: 12px; background: var(--no-fondo); color: var(--no); font-weight: 700; width: calc(100% - 32px); }
.alerta-error { background: #FDECEA; color: #A1261B; }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 13px; font-weight: 700; }
.campo input, .campo textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--borde-fuerte); border-radius: 10px;
  font-size: 15px; background: var(--blanco);
}
.campo input:focus, .campo textarea:focus { border-color: var(--acento); outline: none; }
.campo input[aria-invalid="true"] { border-color: #A1261B; }
.campo-doble { display: grid; grid-template-columns: 1fr 120px; gap: 10px; }
.error-campo { margin: 0; font-size: 13px; font-weight: 700; color: #A1261B; }

.opciones { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.opciones legend { padding: 0; margin-bottom: 10px; }
.opcion {
  display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px;
  background: var(--blanco); border: 1.5px solid var(--borde); cursor: pointer;
}
.opcion input { width: 22px; height: 22px; accent-color: var(--acento); flex-shrink: 0; margin: 0; }
.opcion:has(input:checked) { border-color: var(--acento); }
.opcion-texto { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.opcion-texto .gris { font-size: 12px; }
.opcion-monto { font-weight: 800; white-space: nowrap; }
.opcion-apagada, .opcion.deshabilitada { background: var(--fondo); border-style: dashed; cursor: not-allowed; opacity: 0.75; }
.etiqueta-ok { margin-left: 6px; padding: 3px 7px; border-radius: 6px; background: var(--ok-fondo); color: var(--ok); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.direccion { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.direccion[hidden] { display: none; }

/* --- Confirmación -------------------------------------------------------------*/
.confirmacion-cabeza { background: var(--blanco); padding: 32px 16px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.confirmacion-cabeza p { margin: 0; color: var(--gris-oscuro); max-width: 340px; }
.icono-circulo { width: 64px; height: 64px; border-radius: 32px; display: flex; align-items: center; justify-content: center; color: var(--blanco); }
.icono-ok { background: #0A7A3C; }
.icono-acento { background: var(--acento); }
.icono-wsp { background: var(--wsp); }
.pedido-numero { padding: 8px 16px; border-radius: 10px; background: var(--fondo); font-size: 14px; font-weight: 700; }
.pedido-numero strong { color: var(--acento); }
.confirmacion { max-width: 640px; margin: 0 auto; padding: 16px 16px 40px; display: flex; flex-direction: column; gap: 14px; }
.confirmacion .caja p { margin: 0; }
.dato-copiar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 10px; background: var(--fondo); }
.dato-copiar > div { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.monto { font-size: 22px; }
.icono-gris { background: var(--gris); }
.caja-suave { background: transparent; border-style: dashed; }

/* Seguimiento: línea de tiempo vertical en el celular, horizontal desde tablet. */
.linea-tiempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.linea-tiempo li { position: relative; display: flex; gap: 12px; padding-bottom: 18px; }
.linea-tiempo li:last-child { padding-bottom: 0; }
.linea-tiempo li::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--borde-fuerte); }
.linea-tiempo li:last-child::before { display: none; }
.linea-tiempo li.lt-hecho::before { background: var(--acento); }
.lt-punto { flex: none; width: 24px; height: 24px; border-radius: 12px; border: 2px solid var(--borde-fuerte); background: var(--blanco); display: flex; align-items: center; justify-content: center; color: var(--blanco); position: relative; z-index: 1; }
.lt-hecho .lt-punto { background: var(--acento); border-color: var(--acento); }
.lt-actual .lt-punto { border-color: var(--acento); box-shadow: 0 0 0 4px rgba(0, 16, 245, .15); }
.lt-actual .lt-punto::after { content: ""; width: 10px; height: 10px; border-radius: 5px; background: var(--acento); }
.lt-texto { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.lt-pendiente .lt-texto strong { color: var(--gris-claro); font-weight: 600; }
.lt-actual .lt-texto strong { color: var(--acento); }
@media (min-width: 560px) {
  .linea-tiempo { flex-direction: row; }
  .linea-tiempo li { flex: 1; flex-direction: column; align-items: center; text-align: center; padding-bottom: 0; gap: 8px; }
  .linea-tiempo li::before { left: calc(50% + 12px); right: calc(-50% + 12px); top: 11px; bottom: auto; width: auto; height: 2px; }
  .lt-texto { padding-top: 0; }
}
.envio-seguimiento .btn-grande { justify-content: center; }
.codigo-envio { font-size: 20px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }

.opinion-respuesta { margin-top: 4px; padding: 10px 12px; border-left: 3px solid var(--acento); background: var(--fondo); border-radius: 0 10px 10px 0; font-size: 14px; }
.opinion-respuesta p { margin: 4px 0 0; }

/* --- Descuentos: promo web y cupones ----------------------------------------------------*/
.tarjeta-foto { position: relative; }
.insignia-descuento { position: absolute; top: 8px; left: 8px; display: inline-flex; flex-direction: column; align-items: flex-start; padding: 5px 8px; border-radius: 8px; background: var(--acento); color: var(--blanco); font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 900; font-size: 15px; line-height: 1; }
.insignia-descuento small { font-family: 'Manrope', sans-serif; font-style: normal; font-weight: 800; font-size: 10px; margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; }
.insignia-en-linea { position: static; display: inline-block; margin-right: 8px; font-size: 13px; padding: 3px 7px; }
.precio-lista { color: var(--gris); font-size: 13px; font-weight: 600; }
.precio .precio-lista { display: block; margin-top: 4px; margin-bottom: -4px; }
.ficha-promo { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 14px; font-weight: 700; color: var(--acento); }
.ficha-promo s { color: var(--gris); font-weight: 600; }
.ficha-cupon { margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: #EEF0FF; color: var(--tinta); font-size: 14px; }
.ficha-cupon strong { color: var(--acento); }
.etiqueta-descuento { display: inline-block; margin-top: 4px; padding: 2px 6px; border-radius: 6px; background: #EEF0FF; color: var(--acento); font-size: 11px; font-weight: 800; }
.resumen-ahorro span:last-child { color: var(--ok); font-weight: 800; }
.resumen-cupon span:last-child { font-weight: 700; text-align: right; }
.cupon-aplicado { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1.5px dashed var(--acento); background: #F6F7FF; }
.cupon-aplicado > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cupon-aplicado strong { color: var(--acento); letter-spacing: .04em; }
.cupon-aplicado form { margin: 0; }
.cupon-sin-efecto { border-color: var(--no); background: var(--no-fondo); }
.cupon-sin-efecto strong { color: var(--no); }
.enlace-chico { background: none; border: 0; padding: 4px; font: inherit; font-size: 13px; font-weight: 700; color: var(--gris); text-decoration: underline; cursor: pointer; }
.cupon-form summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--acento); }
.cupon-fila { display: flex; gap: 8px; margin-top: 8px; }
.cupon-fila input { flex: 1; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1.5px solid var(--borde-fuerte); border-radius: 10px; font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tabla-legal { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-legal th, .tabla-legal td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--borde); vertical-align: top; }

/* --- Ruleta ---------------------------------------------------------------------------*/
.ruleta { width: min(760px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 0; border: 0; border-radius: 20px; background: var(--blanco); color: var(--tinta); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); overflow: auto; }
.ruleta::backdrop { background: rgba(14, 14, 16, .6); }
.ruleta-cerrar { position: absolute; top: 8px; right: 8px; z-index: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 22px; background: var(--fondo); color: var(--tinta); cursor: pointer; }
.ruleta-cuerpo { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 20px 20px; }
.ruleta-rueda-caja { position: relative; width: min(260px, 70vw); aspect-ratio: 1 / 1; }
.ruleta-rueda { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .25)); transform-origin: 50% 50%; }
.ruleta-puntero { position: absolute; top: -6px; left: 50%; z-index: 1; transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 26px solid #FF5A3C; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.ruleta-texto { display: flex; flex-direction: column; gap: 10px; text-align: center; width: 100%; }
.ruleta-texto h2 { margin: 0; }
.ruleta-texto p { margin: 0; }
.ruleta-form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.ruleta-form input[type="text"] { min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--borde-fuerte); border-radius: 12px; font: inherit; text-align: center; }
.ruleta-acepto { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; text-align: left; color: var(--gris-oscuro); }
.ruleta-acepto input { margin-top: 2px; accent-color: var(--acento); }
.ruleta-error { color: #A1261B; font-weight: 700; font-size: 14px; }
.ruleta-ganaste { font-weight: 800; color: var(--acento); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.ruleta-resultado { display: flex; flex-direction: column; gap: 10px; }
.ruleta-resultado[hidden] { display: none; }
.ruleta-legal { font-size: 11px; color: var(--gris); }
.franja-cupon { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 16px; background: var(--acento); color: var(--blanco); font-size: 13px; text-align: center; }
.franja-cupon strong { font-weight: 800; }
.franja-cupon a { color: var(--blanco); font-weight: 800; text-decoration: underline; white-space: nowrap; }
.franja-cupon .ico { flex-shrink: 0; }
.franja-cupon[hidden] { display: none; }
.ruleta-prueba { padding: 8px 10px; border-radius: 10px; background: var(--no-fondo); color: var(--no); font-size: 12px; font-weight: 700; }
.ruleta-lanzador { position: fixed; left: 12px; bottom: 14px; z-index: 40; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 22px; background: var(--acento); color: var(--blanco); font: inherit; font-weight: 800; font-size: 14px; box-shadow: 0 6px 18px rgba(0, 16, 245, .35); cursor: pointer; }
.ruleta-lanzador[hidden] { display: none; }
@media (max-width: 559px) {
  /* Celular: hoja desde abajo, no tapa toda la pantalla (pautas de Google para pop-ups). */
  .ruleta { margin: auto 0 0; width: 100%; max-width: 100%; border-radius: 20px 20px 0 0; max-height: 92vh; }
  .ruleta-rueda-caja { width: min(220px, 62vw); }
}
@media (min-width: 560px) {
  .ruleta-cuerpo { flex-direction: row; align-items: center; gap: 28px; padding: 36px 32px 28px; }
  .ruleta-texto { text-align: left; }
  .ruleta-rueda-caja { flex: none; width: 300px; }
}

/* Aviso de cookies: abajo, sin tapar la compra, con las dos opciones del mismo peso. */
.aviso-cookies { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; max-width: 520px; margin: 0 auto; background: var(--blanco); border: 1px solid var(--borde-fuerte); border-radius: var(--radio); box-shadow: 0 8px 28px rgba(0, 0, 0, .14); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.aviso-cookies p { margin: 0; }
.aviso-cookies-botones { display: flex; gap: 8px; justify-content: flex-end; }
.aviso-cookies-botones .btn { flex: 1; justify-content: center; }
@media (min-width: 560px) { .aviso-cookies-botones .btn { flex: none; } }

/* Seguí tu pedido */
.seguir-form { max-width: 440px; margin: 0 auto; padding: 16px 16px 40px; display: flex; flex-direction: column; gap: 14px; }

.texto-legal { max-width: 640px; margin: 0 auto; padding: 8px 16px 40px; display: flex; flex-direction: column; gap: 16px; }

/* --- Pie --------------------------------------------------------------------*/
.pie { background: var(--tinta); color: #C9C9CF; margin-top: 24px; }
.pie-in { max-width: var(--ancho); margin: 0 auto; padding: 32px 16px 40px; display: flex; flex-direction: column; gap: 16px; }
.logo-pie { color: var(--blanco); }
.logo-pie span { color: var(--acento-claro); }
.pie p { margin: 0; }
.pie-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pie a { color: var(--blanco); font-weight: 600; text-decoration: none; font-size: 14px; }
.pie a:hover { color: var(--acento-claro); }
.pie-legal, .pie-legal a { font-size: 12px; color: #A5A5AD; font-weight: 500; }

/* --- Legales, confianza y conversión (investigación 2026-09-28) ----------------------*/
.franja { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.franja-arrepentimiento { color: var(--blanco); font-weight: 800; text-decoration: underline; }
.franja-arrepentimiento:hover { color: var(--acento-claro); }
.precio-legal { font-size: 11px; color: var(--gris); line-height: 1.35; margin: 2px 0 0; }
.bloque { display: block; }
.bloque:empty { display: none; }
.estrellas { color: #F2A900; letter-spacing: 1px; white-space: nowrap; }
.estrella-vacia { color: #D6D6CF; }
.tarjeta-resenas { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gris); }
.ficha-resenas { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--gris-oscuro); text-decoration: none; }
.ficha-contenido { font-size: 14px; color: var(--gris-oscuro); }
.ficha-contenido[hidden] { display: none; }
.sin-stock-aviso { padding: 14px; border-radius: 12px; background: var(--no-fondo); display: flex; flex-direction: column; gap: 10px; }
.sin-stock-aviso[hidden] { display: none; }
.sin-stock-aviso p { margin: 0; font-size: 14px; color: var(--gris-oscuro); }
.avisame-form { display: flex; gap: 8px; }
.avisame-form input { flex-grow: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1.5px solid var(--borde-fuerte); border-radius: 10px; background: var(--blanco); }
.opiniones { display: grid; gap: 12px; }
.opinion { margin: 0; gap: 8px; }
.opinion blockquote { margin: 0; font-size: 15px; line-height: 1.5; }
.objetivos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.objetivo {
  min-height: 120px; border-radius: var(--radio); background: var(--tinta); color: var(--blanco); padding: 14px;
  display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; font-size: 13px; font-weight: 700;
}
.objetivo .display { font-size: 21px; line-height: 1.05; }
.objetivo:hover { color: var(--blanco); background: var(--acento); }
.resumen-envios { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.envio-gratis { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px; background: var(--ok-fondo); color: var(--ok); font-size: 13px; }
.barra-progreso { height: 6px; border-radius: 3px; background: #CDE7D6; overflow: hidden; }
.barra-progreso span { display: block; height: 100%; background: var(--ok); }
.nota-pedido summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.wsp-flotante {
  position: fixed; right: 16px; bottom: 16px; z-index: 30; width: 56px; height: 56px; border-radius: 28px;
  background: var(--wsp); color: var(--blanco); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(14, 14, 16, 0.25);
}
.wsp-flotante:hover { color: var(--blanco); background: #178F45; }
.pag-producto .wsp-flotante { bottom: 92px; }
.pie-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.btn-arrepentimiento { border: 1px solid #A5A5AD; border-radius: 8px; padding: 6px 10px; color: var(--blanco) !important; font-weight: 700 !important; }
.data-fiscal { width: 45px; height: auto; background: var(--blanco); border-radius: 4px; }
.pie-precios { font-size: 11px; color: #8A8A90; width: 100%; }
.elegir-estrellas { border: none; padding: 0; margin: 0; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.elegir-estrellas legend { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.elegir-estrellas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.elegir-estrellas label { font-size: 34px; line-height: 1; color: #D6D6CF; cursor: pointer; }
.elegir-estrellas input:checked ~ label, .elegir-estrellas label:hover, .elegir-estrellas label:hover ~ label { color: #F2A900; }
.elegir-estrellas input:focus-visible + label { outline: 3px solid var(--acento); }
.resena-form { display: flex; flex-direction: column; gap: 14px; }

/* --- Banners de la portada (panel) -------------------------------------------------------*/
.banners { position: relative; background: var(--blanco); }
.banners-pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.banners-pista::-webkit-scrollbar { display: none; }
.banner { flex: 0 0 100%; scroll-snap-align: start; }
.banner img { width: 100%; height: auto; display: block; max-height: 560px; object-fit: cover; }
.banners-puntos { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; }
.banners-puntos a { width: 10px; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 1px rgba(14, 14, 16, 0.25); }
.banners-puntos a[aria-current="true"] { background: var(--acento); width: 24px; }

/* --- Ficha de producto: secciones propias (no plantilla) --------------------------------*/
.datos-clave { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 2px 0 0; }
.datos-clave > div { background: var(--blanco); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; }
.datos-clave > div[hidden] { display: none; }
.datos-clave dt { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); }
.datos-clave dd { margin: 2px 0 0; font-size: 17px; font-weight: 800; }

.ficha-indice { position: relative; z-index: 12; background: var(--fondo); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.ficha-indice-in { max-width: var(--ancho); margin: 0 auto; padding: 0 16px; display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.ficha-indice-in::-webkit-scrollbar { display: none; }
.ficha-indice a { flex-shrink: 0; padding: 14px 0; font-size: 13px; font-weight: 800; text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 3px solid transparent; }
.ficha-indice a:hover { border-bottom-color: var(--acento); }

.ficha-secciones { max-width: var(--ancho); margin: 0 auto; padding: 8px 16px 24px; display: flex; flex-direction: column; gap: 36px; }
.bloque-ficha { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 140px; }
.bloque-resumen { margin: 0; font-size: 16px; line-height: 1.55; color: var(--gris-oscuro); max-width: 720px; }

.para-vos { display: grid; gap: 12px; }
.para-vos-col { border-radius: var(--radio); padding: 18px; }
.para-vos-col h3 { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
.para-vos-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.45; }
.para-vos-col li { display: flex; gap: 10px; align-items: flex-start; }
.para-vos-col li .ico { flex-shrink: 0; margin-top: 1px; }
.para-vos-si { background: var(--tinta); color: var(--blanco); }
.para-vos-si .ico { color: var(--acento-claro); }
.para-vos-no { background: var(--blanco); border: 1px solid var(--borde); color: var(--gris-oscuro); }
.guion { font-weight: 800; color: var(--gris-claro); width: 18px; text-align: center; flex-shrink: 0; }
.destacados { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.destacados li { padding: 6px 12px; border-radius: 999px; background: var(--ok-fondo); color: var(--ok); font-size: 12px; font-weight: 800; }

.calculadora { display: grid; gap: 16px; background: var(--blanco); border: 1px solid var(--borde); border-radius: 18px; padding: 20px; }
.calc-control label { font-weight: 800; font-size: 15px; }
.calc-control p { margin: 8px 0 0; }
.calc-slider { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.calc-slider input { flex-grow: 1; accent-color: var(--acento); height: 28px; }
.calc-slider output { min-width: 78px; font-weight: 800; font-size: 15px; text-align: right; }
.calc-resultados { display: grid; grid-template-columns: 1fr; gap: 8px; }
.calc-dato { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--fondo); font-size: 12px; text-align: right; }
.calc-numero { font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 900; font-size: 22px; line-height: 1.05; color: var(--tinta); }

.combo { display: flex; flex-direction: column; gap: 8px; }
.combo-item {
  position: relative; display: grid; grid-template-columns: 26px 64px 1fr auto; align-items: center; gap: 12px;
  background: var(--blanco); border: 1.5px solid var(--borde); border-radius: var(--radio); padding: 10px 14px;
}
.combo-item-base { grid-template-columns: 64px 1fr auto; border-color: var(--tinta); }
.combo-item input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--acento); margin: 0; cursor: pointer; }
.combo-elegido { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(0, 16, 245, 0.08); }
.combo-foto { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; display: block; cursor: pointer; }
.combo-texto { min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.combo-texto label { cursor: pointer; }
.combo-texto select { height: 34px; max-width: 100%; border: 1px solid var(--borde-fuerte); border-radius: 8px; background: var(--blanco); font-size: 13px; font-weight: 700; padding: 0 8px; }
.combo-precio { font-weight: 800; white-space: nowrap; }
.combo-total {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--tinta); color: var(--blanco); border-radius: var(--radio); padding: 16px 18px; margin-top: 4px;
}
.combo-total > div { display: flex; flex-direction: column; }
.combo-total strong { font-size: 26px; }
.combo-total .gris { color: #C9C9CF; }

.tu-dia { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; display: flex; flex-direction: column; gap: 18px; }
.tu-dia::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--borde-fuerte); }
.momento { position: relative; display: flex; flex-direction: column; gap: 6px; }
.momento::before {
  content: ""; position: absolute; left: -22px; top: 3px; width: 14px; height: 14px; border-radius: 7px;
  background: var(--acento); box-shadow: 0 0 0 4px var(--fondo);
}
.momento-manana::before { background: #F2A900; }
.momento-noche::before { background: var(--tinta); }
.momento-titulo { font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 15px; }
.momento-texto { background: var(--blanco); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--gris-oscuro); }
.momento-texto strong { color: var(--tinta); }

.tamanos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tamano { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--radio); background: var(--blanco); border: 1.5px solid var(--borde); text-decoration: none; }
.tamano:hover { border-color: var(--acento); color: var(--tinta); }
.tamano-actual { border-color: var(--tinta); }
.tamano-peso { font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 900; font-size: 24px; }
.tamano-precio { font-weight: 800; }
.tamano-kg { font-size: 13px; color: var(--gris); }
.tamano-ahorro { align-self: flex-start; padding: 3px 8px; border-radius: 6px; background: var(--ok-fondo); color: var(--ok); font-size: 11px; font-weight: 800; }

.aviso-suplemento { margin: 0; font-size: 12px; color: var(--gris); border-top: 1px solid var(--borde); padding-top: 14px; }

/* Sugerencias del buscador */
.buscar { position: relative; }
.sugerencias {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(14, 14, 16, 0.14); padding: 6px; margin: 0; list-style: none;
  max-height: 70vh; overflow-y: auto; color: var(--tinta);
}
.sugerencias[hidden] { display: none; }
.sugerencias li a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; text-decoration: none; font-size: 14px; }
.sugerencias li a[aria-selected="true"], .sugerencias li a:hover { background: var(--fondo); color: var(--tinta); }
.sugerencias img, .sugerencias .sug-vacia { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; flex-shrink: 0; background: var(--vacio); }
.sugerencias .sug-texto { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.sugerencias .sug-detalle { font-size: 12px; color: var(--gris); }
.sugerencias .sug-precio { font-weight: 800; white-space: nowrap; }
.sugerencias .sug-titulo { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); padding: 8px 8px 4px; }
.sugerencias .sug-todos { font-weight: 800; color: var(--acento); justify-content: center; }

/* --- Responsive (auditoría 2026-10-07) ----------------------------------------------
   Criterios: WCAG 2.2 (toques ≥ 24 px, ideal 44 px como Apple/Google), campos de 16 px para
   que el iPhone no haga zoom, nada que se salga de costado, sin saltos de imagen (CLS),
   filtros plegados en celular (Baymard) y cabecera que no se coma la pantalla. */

/* Campos de formulario: 16 px mínimo (con menos, Safari de iPhone hace zoom al tocarlos). */
html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { font-size: 16px; }
.buscar input { height: 100%; } /* toda la barra de búsqueda es tocable, no solo la línea de texto */

/* Áreas de toque más grandes en links chicos (sin cambiar cómo se ven). */
.franja a, .franja-cupon a { display: inline-flex; align-items: center; min-height: 32px; }
.migas a { display: inline-flex; align-items: center; min-height: 32px; }
.faq summary { padding: 12px 0; min-height: 44px; }
.pie-links a { display: inline-flex; align-items: center; min-height: 40px; }
.pie-legal a, .seccion-cabeza a, .paginacion a { display: inline-flex; align-items: center; min-height: 32px; }
.paginacion a { min-height: 44px; padding: 0 8px; }

/* Texto legible: nada de cuerpo por debajo de 12 px. */
.marca, .abierto, .precio-legal, .pie-precios, .datos-clave dt, .tamano-ahorro, .etiqueta-descuento { font-size: 12px; }
.etiqueta-ok { font-size: 11px; }

/* "Comprá según tu objetivo": las palabras largas entran en 2 columnas desde 320 px. */
.objetivo { min-width: 0; }
.objetivo .display { font-size: clamp(17px, 5.4vw, 21px); overflow-wrap: anywhere; }

/* El botón de WhatsApp flota: que no tape el final de la página ni la barra de compra. */
.pie-in { padding-bottom: 96px; }
.wsp-flotante { bottom: calc(16px + env(safe-area-inset-bottom)); }
.barra-compra { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

/* Filtros del listado: en celular van plegados detrás de "Filtrar y ordenar" (antes ocupaban
   toda la primera pantalla y no se veía ningún producto). En escritorio se abren solos (JS). */
.filtros-caja { max-width: var(--ancho); margin: 0 auto; padding: 0 16px 12px; }
.filtros-caja > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--tinta); border-radius: 12px; background: var(--blanco); font-weight: 800; cursor: pointer;
}
.filtros-caja > summary::-webkit-details-marker { display: none; }
.filtros-caja > summary .filtros-activos { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--acento); color: var(--blanco); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.filtros-caja[open] > summary { margin-bottom: 12px; }
.filtros-caja .filtros { padding: 0; }
.filtros-caja .filtro { flex: 1 1 140px; }
.filtros-caja .filtro select { width: 100%; height: 44px; }
.filtros-caja .filtro-check { flex: 1 1 100%; flex-direction: row; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; color: var(--tinta); }
.filtros-caja .filtro-check input { width: 22px; height: 22px; accent-color: var(--acento); }
.filtros-caja .filtros > .btn { flex: 1 1 100%; }
@media (min-width: 960px) {
  .filtros-caja .filtro-check { flex: 0 1 auto; }
  .filtros-caja .filtros > .btn { flex: 0 0 auto; }
}

/* Tablet: 3 columnas de productos y 4 objetivos (2 columnas quedaban enormes a 768 px). */
@media (min-width: 600px) {
  .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .objetivos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Cabecera en celular: se esconde al bajar y vuelve al subir apenas (más pantalla para los
   productos; el carrito y el buscador quedan siempre a un gesto). */
@media (max-width: 959px) {
  .cab { transition: transform .25s ease; }
  .cab.cab-escondida { transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) { .cab { transition: none; } }

/* Escritorio angosto (960–1199 px): la cabecera completa no entraba y el carrito quedaba
   fuera de la pantalla. Se achica el logo y el botón de WhatsApp pasa al botón flotante. */
@media (min-width: 960px) and (max-width: 1199px) {
  .cab-in { gap: 18px; }
  .nav-escritorio { gap: 16px; }
  .cab .logo-img { max-width: 190px; }
  .btn-wsp-cab { display: none !important; }
}
@media (min-width: 960px) {
  .buscar-escritorio { min-width: 0; }
  .filtros-caja > summary { display: none; }
  .filtros-caja .filtro { flex: 0 1 200px; }
  .pie-in { padding-bottom: 40px; }
}

/* --- Escritorio ----------------------------------------------------------------*/
@media (min-width: 960px) {
  body { font-size: 16px; }
  .h1 { font-size: 40px; }
  .h2 { font-size: 32px; }

  .cab-in { padding: 14px 24px; gap: 28px; }
  .cab .logo { margin: 0; font-size: 30px; }
  .menu-movil, .buscar-movil { display: none; }
  .nav-escritorio { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
  .nav-escritorio > a, .megamenu summary {
    font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 900; font-size: 15px;
    text-transform: uppercase; text-decoration: none; cursor: pointer;
  }
  .megamenu { position: relative; }
  .megamenu summary { list-style: none; display: flex; align-items: center; gap: 6px; }
  .megamenu summary::-webkit-details-marker { display: none; }
  .megamenu-panel {
    position: absolute; top: calc(100% + 14px); left: 0; width: 560px;
    background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
    box-shadow: 0 16px 40px rgba(14, 14, 16, 0.12); padding: 20px;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 24px;
  }
  .megamenu-panel a { padding: 8px 0; text-decoration: none; font-size: 14px; color: #2E2E33; display: flex; justify-content: space-between; }
  .megamenu-panel a span { color: var(--gris-claro); font-size: 12px; }
  .megamenu-todos { grid-column: 1 / -1; font-weight: 800; border-top: 1px solid var(--borde); margin-top: 6px; padding-top: 12px !important; }
  .buscar-escritorio { display: flex; flex-grow: 1; height: 42px; border-radius: 10px; }
  .btn-wsp-cab { display: inline-flex; min-height: 42px; font-size: 14px; padding: 0 16px; gap: 7px; border-radius: 10px; flex-shrink: 0; white-space: nowrap; line-height: 1; }

  .hero-in { flex-direction: row; align-items: center; gap: 48px; padding: 56px 24px; }
  .hero-texto { flex: 1.3; }
  .hero h1 { font-size: 72px; }
  .hero-botones { flex-direction: row; }
  .hero-botones .btn { padding: 0 28px; }
  .beneficios { flex: 1; grid-template-columns: 1fr; gap: 12px; }
  .beneficios li { padding: 18px; font-size: 14px; }
  .beneficios strong { font-size: 16px; }

  .seccion { padding: 40px 24px; }
  .seccion-blanca { padding: 48px 24px; }
  .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .tarjeta-cuerpo { padding: 16px; }
  .tarjeta-titulo { font-size: 16px; }
  .locales { grid-template-columns: 1fr 1fr; }
  .objetivos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .objetivo { min-height: 150px; padding: 20px; }
  .objetivo .display { font-size: 26px; }
  .opiniones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pag-producto .wsp-flotante { bottom: 16px; }
  .ficha-indice { position: sticky; top: 71px; }
  .ficha-indice-in { padding: 0 24px; gap: 32px; }
  .ficha-secciones { padding: 16px 24px 32px; gap: 56px; }
  .para-vos { grid-template-columns: 1.3fr 1fr; }
  .calculadora { grid-template-columns: 1fr 1.4fr; align-items: center; padding: 28px; }
  .calc-numero { font-size: 28px; }
  .calc-resultados { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calc-dato { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; text-align: left; padding: 14px; }
  .combo-total strong { font-size: 30px; }
  .tu-dia { padding-left: 0; flex-direction: row; gap: 14px; }
  .tu-dia::before { left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 2px; }
  .momento { flex: 1; padding-top: 28px; }
  .momento::before { left: 0; top: 0; }

  .migas, .listado-cabeza, .filtros, .pildoras-listado { padding-left: 24px; padding-right: 24px; }

  .ficha { flex-direction: row; align-items: flex-start; gap: 48px; padding: 16px 24px 48px; }
  .ficha-foto { flex: 1; position: sticky; top: 96px; }
  .ficha-info { flex: 1; }
  .ficha-titulo { font-size: 44px; }
  .ficha-botones { flex-direction: row; }
  .barra-compra { display: none; }

  .pasos-cabeza { flex-direction: row; align-items: center; justify-content: space-between; padding: 32px 24px 12px; }
  .pasos { font-size: 13px; gap: 20px; }
  .carrito, .checkout { flex-direction: row; align-items: flex-start; gap: 40px; padding: 16px 24px 64px; }
  .carrito-lineas, .checkout-pasos { flex: 1.6; }
  .resumen { flex: 1; position: sticky; top: 96px; }
  .linea { grid-template-columns: 96px 1fr auto auto auto; grid-template-areas: "foto info cant precio quitar"; padding: 20px; gap: 18px; }
  .linea-foto { width: 96px; height: 96px; }
  .linea-precio { width: 110px; }
  .linea-monto { font-size: 19px; }

  .pie-in { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .pie-links { display: flex; gap: 20px; }
}

/* --- Carruseles de la portada (Ajustes → Portada) -------------------------------------
   Solo en celular y tablet (hasta 959 px); en escritorio siguen las grillas. Desplazamiento
   nativo con scroll-snap (suave con el dedo, sin librerías). El carrusel va de borde a borde y
   el próximo elemento asoma cortado: así se entiende que se desliza. Nunca avanza solo. */
@media (max-width: 959px) {
  .grilla.carrusel, .categorias-grilla.carrusel {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: var(--carrusel-col);
    gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin: 0 -16px; padding: 4px 16px 14px; scroll-padding-inline: 16px; scrollbar-width: none;
  }
  .carrusel::-webkit-scrollbar { display: none; }
  .carrusel > * { scroll-snap-align: start; min-width: 0; }
  .carrusel:focus-visible { outline: 3px solid var(--acento); outline-offset: -3px; }
  .categorias-grilla.carrusel { --carrusel-col: calc((100% - 24px) / 2.3); }   /* 2 y un poco */
  .grilla.carrusel { --carrusel-col: calc((100% - 12px) / 1.65); }              /* 1 y medio */
}
@media (min-width: 600px) and (max-width: 959px) {
  .categorias-grilla.carrusel { --carrusel-col: calc((100% - 36px) / 3.4); }
  .grilla.carrusel { --carrusel-col: calc((100% - 24px) / 2.5); }
}

/* Banners sin carrusel: uno debajo del otro. */
.banners-apilados .banners-pista { flex-direction: column; overflow: visible; scroll-snap-type: none; gap: 2px; }
.banners-apilados .banner { flex: none; }

/* --- Ofertas y packs (2026-10-08) -----------------------------------------------------
   Ofertas como primera vista de la portada; tarjeta de pack con "Ahorrás $X" y "por separado";
   ficha del pack con "Qué incluye"; franja "Llevá 2 en pack" en la ficha de cada componente.
   El ahorro va en verde (una sola etiqueta por tarjeta) y pegado al precio. */
.ofertas-inicio { padding-top: 16px; }
.seccion-bajada { margin: 2px 0 0; font-size: 13px; color: var(--gris); }
.insignia-ahorro { background: var(--ok); font-size: 13px; padding: 5px 8px; }
.insignia-en-linea.insignia-ahorro { font-size: 13px; }
.ficha-pack-ahorro { color: var(--ok); }
.precio .precio-lista s { color: var(--gris); }
.etiqueta-ahorro { display: inline-block; margin-top: 4px; padding: 2px 6px; border-radius: 6px; background: var(--ok-fondo); color: var(--ok); font-size: 12px; font-weight: 800; }
.nav-ofertas, .menu-ofertas { color: var(--ok) !important; }

/* Pack sin foto propia: las fotos de sus componentes, una al lado de la otra. */
.pack-fotos { display: flex; align-items: center; justify-content: center; gap: 2px; padding: 10%; position: relative; }
.pack-fotos .pack-foto { width: 46%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; flex: 0 1 auto; }
.pack-fotos .foto-vacia.pack-foto { font-size: 10px; padding: 4px; }
.pack-fotos-una .pack-foto { width: 80%; }
.franja-pack .pack-fotos-una .pack-foto { width: 44px; }
.pack-mas { font-weight: 800; color: var(--gris-claro); font-size: 16px; }
.pack-cantidad { font-weight: 900; font-size: 13px; color: var(--tinta); align-self: flex-end; margin-left: -6px; }

/* Ficha del pack: "Qué incluye", justo debajo del precio. */
.pack-incluye { border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; margin: 14px 0; background: var(--blanco); }
.pack-incluye h2 { font-size: 15px; font-weight: 800; margin: 0 0 4px; }
.pack-incluye ul { list-style: none; margin: 0; padding: 0; }
.pack-incluye li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--borde); font-size: 14px; }
.pack-incluye li:last-child { border-bottom: 0; }
.pack-incluye li a { min-height: 24px; }
.pack-incluye li > span { white-space: nowrap; color: var(--gris); font-weight: 700; }
.pack-incluye-ahorro { color: var(--ok); font-weight: 800; }
.pack-incluye li.pack-incluye-nota { display: block; font-size: 13px; color: var(--gris-oscuro); }
.pack-incluye-ahorro > span { color: var(--ok) !important; }

/* Franja en la ficha de un producto que viene en algún pack. */
.franja-pack { display: flex; align-items: center; gap: 10px; margin: 14px 0; padding: 10px 12px; min-height: 64px; border-radius: 12px; background: var(--ok-fondo); color: var(--ok); text-decoration: none; }
.franja-pack:hover { color: var(--ok); outline: 2px solid var(--ok); outline-offset: -2px; }
.franja-pack .pack-fotos { width: 72px; height: 52px; padding: 0; flex-shrink: 0; background: var(--blanco); border-radius: 8px; }
.franja-pack .pack-foto { width: 30px; }
.franja-pack .pack-mas { font-size: 12px; }
.franja-pack .pack-cantidad { font-size: 11px; margin-left: -2px; }
.franja-pack-texto { flex: 1; font-size: 14px; font-weight: 600; line-height: 1.3; }
.franja-pack-texto strong { font-weight: 900; }
.franja-pack-ver { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.franja-pack-ver .ico { transform: rotate(180deg); }

/* Con ofertas, el título grande se oculta y quedan solo los beneficios, en una fila baja. */
.hero-compacta .hero-in { padding-top: 12px; padding-bottom: 12px; }
.hero-compacta .beneficios li { padding: 10px; }
@media (min-width: 960px) {
  .ofertas-inicio { padding-top: 28px; }
  .ofertas-inicio .grilla > :nth-child(n+5) { display: none; } /* primera vista: una fila de 4 */
  .hero-compacta .hero-in { padding-top: 16px; padding-bottom: 16px; }
  .hero-compacta .beneficios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-compacta .beneficios li { padding: 12px 16px; font-size: 13px; }
  .hero-compacta .beneficios strong { font-size: 14px; }
}

/* --- Agregar al carrito sin salir de la página (2026-10-08) ---------------------------
   Panel "Agregado al carrito": hoja inferior en celular, tarjeta arriba a la derecha en la compu.
   No se cierra solo; se cierra con "Seguir comprando", la ×, Escape o tocando afuera. */
.agregado { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; }
.agregado[hidden] { display: none; }
.agregado-fondo { position: absolute; inset: 0; background: rgba(14, 14, 16, 0.45); }
.agregado-caja {
  position: relative; width: 100%; background: var(--blanco); border-radius: 18px 18px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(14, 14, 16, 0.2);
  animation: agregado-sube .22s ease-out; max-height: 85vh; overflow-y: auto; outline: none;
}
@keyframes agregado-sube { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.agregado-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.agregado-titulo { margin: 0; font-size: 17px; font-weight: 800; color: var(--ok); }
.agregado-cerrar { width: 44px; height: 44px; margin: -10px -10px -10px 0; border: 0; background: none; font-size: 28px; line-height: 1; color: var(--gris); cursor: pointer; }
.agregado-items { list-style: none; margin: 10px 0 0; padding: 0; }
.agregado-items li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--borde); }
.agregado-items img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: var(--fondo); flex-shrink: 0; }
.agregado-items strong { display: block; font-size: 14px; line-height: 1.25; }
.agregado-items span { display: block; font-size: 13px; color: var(--gris); margin-top: 2px; }
.agregado-total { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--borde); font-size: 14px; font-weight: 700; }
.agregado-envio { margin-top: 8px; font-size: 13px; color: var(--gris-oscuro); }
.agregado-envio .barra-progreso { margin-top: 6px; }
.agregado-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.agregado-botones .btn { min-height: 48px; padding: 0 10px; font-size: 14px; }
.con-agregado { overflow: hidden; }
@media (min-width: 760px) {
  .agregado { align-items: flex-start; justify-content: flex-end; padding: 88px 24px 0; }
  .agregado-fondo { background: rgba(14, 14, 16, 0.25); }
  .agregado-caja { width: 400px; border-radius: 16px; padding: 18px; animation-name: agregado-baja; }
  .con-agregado { overflow: auto; }
}
@keyframes agregado-baja { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.cab-carrito-salta .burbuja { animation: burbuja-salta .45s ease; }
@keyframes burbuja-salta { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.45); } }
@media (prefers-reduced-motion: reduce) { .agregado-caja, .cab-carrito-salta .burbuja { animation: none; } }

/* Carrito en celular: barra fija con el total y "Finalizar compra". */
.pag-carrito:has(.carrito-barra) .wsp-flotante { bottom: calc(92px + env(safe-area-inset-bottom)); }
@media (min-width: 960px) { .pag-carrito:has(.carrito-barra) .wsp-flotante { bottom: 16px; } }
/* Pack de un solo producto (×2): la cantidad como etiqueta sobre la foto. */
.pack-fotos-una .pack-cantidad { position: absolute; right: 10%; bottom: 10%; margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--tinta); color: var(--blanco); font-size: 15px; }
.franja-pack .pack-fotos-una .pack-cantidad { right: 2px; bottom: 2px; padding: 1px 5px; font-size: 10px; }
/* Oferta de pack dentro del panel "Agregado": una sola línea, verde, con el cambio a un toque. */
.agregado-pack { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--ok-fondo); color: var(--ok); }
.agregado-pack[hidden] { display: none; }
.agregado-pack > div { flex: 1; min-width: 0; }
.agregado-pack strong { display: block; font-size: 14px; font-weight: 800; line-height: 1.25; }
.agregado-pack span { display: block; font-size: 13px; font-weight: 600; margin-top: 2px; }
.agregado-pack-btn { background: var(--ok); color: var(--blanco); flex-shrink: 0; min-height: 40px; }
.agregado-pack-btn:hover { background: #075429; color: var(--blanco); }
/* Sin duplicar: la barra fija se esconde cuando el botón "Finalizar compra" del resumen se ve. */
.carrito-barra { transition: transform .2s ease, opacity .2s ease; }
.carrito-barra.barra-oculta { transform: translateY(110%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .carrito-barra { transition: none; } }