/*
 * Cold Market — tema (diseño de la maqueta aprobada por el dueño el 23/10/2026).
 * La web actual mejorada, con la misma identidad: colores del logo y Poppins.
 * Fondo blanco y mucho aire; azul en el encabezado y los textos; rosado y amarillo
 * solo como detalles (ofertas y etiquetas). Texto de 15 y 16 px, botones de 40 a 44 px.
 */

/* Poppins servida desde la web (subconjunto latino, 400, 500 y 600). */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
/* Mientras carga Poppins, Arial ajustada a sus medidas: el texto no salta al cambiar. */
@font-face { font-family: "Poppins Respaldo"; src: local("Arial"); size-adjust: 112%; ascent-override: 93.75%; descent-override: 31.25%; line-gap-override: 8.93%; }

:root {
  --marino: #000b63;
  --marino-2: #0d1a7c;
  --azul: #005aa1;
  --azul-2: #00487f;
  --azul-claro: #e8f1fa;
  --rosado: #b6358d;
  --amarillo: #f6b814;
  --amarillo-claro: #fff6da;
  --texto: #0e1446;
  --texto-2: #4b5280;
  --linea: #e3e7f1;
  --linea-2: #cbd1e3;
  --gris: #f4f6fb;
  --exito: #0a7a43;
  --exito-claro: #e6f5ed;
  --error: #b3261e;
  --error-claro: #fdecea;
  --verde-wa: #12803d;
  --sombra: 0 12px 32px rgb(0 11 99 / 16%);
  --sombra-chica: 0 2px 10px rgb(0 11 99 / 10%);
  --fuente: "Poppins", "Poppins Respaldo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --flechita: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000b63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  --alto-cab: 60px;
  --hueco: 16px;
  color-scheme: light;
}
@media (min-width: 768px) { :root { --hueco: 24px; } }
@media (min-width: 1024px) { :root { --alto-cab: 68px; } }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-cab) + 16px); scrollbar-gutter: stable; }
body { margin: 0; background: #fff; color: var(--texto); font: 400 16px/1.55 var(--fuente); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-underline-offset: 3px; }
a:hover { color: var(--azul-2); }
h1, h2, h3 { margin: 0; color: var(--marino); line-height: 1.2; font-weight: 600; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { display: none; }
.icono { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contenedor { width: 100%; max-width: calc(1320px + 2 * var(--hueco)); margin-inline: auto; padding-left: max(var(--hueco), env(safe-area-inset-left, 0px)); padding-right: max(var(--hueco), env(safe-area-inset-right, 0px)); }
.saltar { position: absolute; left: 12px; top: -100px; z-index: 100; background: #fff; color: var(--marino); padding: 10px 16px; border-radius: 10px; font-weight: 500; box-shadow: var(--sombra); }
.saltar:focus { top: 12px; }
main { display: block; min-height: 50vh; }
main:focus { outline: none; }
.cargando { color: var(--texto-2); padding: 12px 0; font-size: 15px; }
.nota-maqueta { padding: 8px 12px; border: 1px dashed #c99a1d; border-radius: 8px; background: var(--amarillo-claro); color: var(--texto); font-size: 13px; }

/* ---------------------------------------------------------------- botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px 18px; border: 1px solid transparent; border-radius: 10px; font-size: 15px; font-weight: 500; line-height: 1.2; text-align: center; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
.boton .icono { width: 18px; height: 18px; }
.boton:disabled { cursor: not-allowed; opacity: .55; }
.boton--primario, .boton--agregar, .boton--confirmar { background: var(--azul); color: #fff; }
.boton--primario:hover, .boton--agregar:hover, .boton--confirmar:hover { background: var(--azul-2); color: #fff; }
.boton--secundario { background: #fff; color: var(--marino); border-color: var(--linea-2); }
.boton--secundario:hover { border-color: var(--marino); color: var(--marino); }
.boton--claro { background: #fff; color: var(--marino); }
.boton--claro:hover { background: var(--amarillo); color: var(--marino); }
.boton--whatsapp { background: var(--verde-wa); color: #fff; }
.boton--whatsapp:hover { background: #0d6b32; color: #fff; }
.boton--en-carrito { background: var(--azul-claro); color: var(--marino); border-color: #b9d3ec; }
.boton--en-carrito:hover { border-color: var(--azul); color: var(--marino); }
.boton--grande { min-height: 46px; font-size: 16px; }
.boton--chico { min-height: 40px; padding: 6px 12px; font-size: 14px; }
.boton--ancho { width: 100%; }
.boton-icono { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--marino); }
.boton-icono:hover { background: var(--gris); }
.boton-icono .icono { width: 22px; height: 22px; }
.enlace { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 40px; padding: 0; border: 0; background: none; color: var(--azul); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.botones { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------------------------------------------------------------- encabezado */
.cab { position: sticky; top: 0; z-index: 30; background: var(--marino); color: #fff; }
.cab__fila { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "cats logo buscar cuenta carrito"; align-items: center; gap: 4px; height: var(--alto-cab); }
.cab__logo { grid-area: logo; display: block; margin-right: 6px; border-radius: 6px; }
.cab__logo img { width: auto; height: 32px; }
.cab__cats { grid-area: cats; display: inline-flex; align-items: center; gap: 8px; height: 40px; min-width: 40px; padding: 0 8px; margin-left: -8px; border: 0; border-radius: 10px; background: transparent; color: #fff; font-size: 15px; font-weight: 500; white-space: nowrap; }
.cab__cats:hover, .cab__cats[aria-expanded="true"] { background: rgb(255 255 255 / 12%); }
.cab__cats .icono { width: 24px; height: 24px; }
.cab__cats .cab__cats-flecha { width: 18px; height: 18px; transition: transform .2s; }
.cab__cats[aria-expanded="true"] .cab__cats-flecha { transform: rotate(180deg); }
.cab__cats-flecha { display: none; }
.cab__cats-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cab__buscar { grid-area: buscar; position: relative; display: flex; min-width: 0; }
.cab__buscar input { width: 100%; min-width: 0; height: 40px; padding: 0 42px 0 14px; border: 0; border-radius: 10px; background: #fff; color: var(--texto); font-size: 16px; }
.cab__buscar input::placeholder { color: #6b7199; opacity: 1; }
.cab__buscar input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cab__buscar input:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 1px; }
.buscador__boton { position: absolute; right: 0; top: 0; width: 42px; height: 100%; border: 0; border-radius: 0 10px 10px 0; background: transparent; color: var(--azul); display: grid; place-items: center; }
.buscador__boton .icono { width: 22px; height: 22px; stroke-width: 2; }
.cab__accion { grid-area: cuenta; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 40px; height: 40px; padding: 0 6px; border: 0; border-radius: 10px; background: transparent; color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.cab__accion:hover { background: rgb(255 255 255 / 12%); color: #fff; }
.cab__accion .icono { width: 24px; height: 24px; }
.cab__accion-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cab__cuenta { position: relative; }
.cab__puntos { padding: 0 6px; border-radius: 999px; background: var(--amarillo); color: var(--marino); font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.cab__puntos-largo { display: none; }
/* Celular y tablet: el saldo debajo del ícono, dentro del botón (el botón se ensancha y no toca el buscador). */
@media (max-width: 1023px) {
  .cab__cuenta.con-puntos { display: inline-grid; justify-items: center; align-content: center; gap: 0; padding: 0 2px; }
}
.cab__carrito { grid-area: carrito; }
/* Sin la palabra "Carrito" (pedido del dueño): el ícono y, con productos, el total (en la compu). */
.cab__total { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cab__carrito-icono { position: relative; display: inline-flex; }
.burbuja { position: absolute; top: -7px; right: -10px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--amarillo); color: var(--marino); font-size: 12px; font-weight: 600; line-height: 19px; text-align: center; }
.cab__total { font-weight: 600; }
.cab__total:empty { display: none; }
.boton-cabecera--carrito.salta .cab__carrito-icono { animation: salta .45s ease; }
@keyframes salta { 30% { transform: scale(1.15); } 60% { transform: scale(.95); } }
/* Encabezado del checkout: logo, compra segura y WhatsApp. */
.cab__fila--simple { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo segura ayuda"; }
.cab__segura { grid-area: segura; justify-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: #d6dbf7; }
.cab__segura .icono { width: 18px; height: 18px; color: var(--amarillo); }
.cab__ayuda { grid-area: ayuda; }

/* Celular: al tocar el buscador, ocupa la fila. */
@media (max-width: 767px) {
  .cab__fila:has(.cab__buscar:focus-within) .cab__logo,
  .cab__fila:has(.cab__buscar:focus-within) .cab__accion:not(.cab__carrito) { display: none; }
}
@media (min-width: 768px) {
  .cab__fila { grid-template-areas: "logo cats buscar cuenta carrito"; gap: 8px; }
  .cab__fila--simple { grid-template-areas: "logo segura ayuda"; }
  .cab__logo { margin-right: 4px; }
  .cab__logo img { height: 36px; }
  .cab__cats { margin-left: 0; padding: 0 12px; background: rgb(255 255 255 / 8%); }
  .cab__cats-flecha { display: inline; }
  .cab__cats-texto { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .cab__buscar { margin: 0 8px; }
  .cab__carrito .cab__total, .cab__ayuda .cab__accion-texto { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .cab__total { margin-left: 10px; }
}
@media (min-width: 1024px) {
  .cab__fila { gap: 12px; }
  .cab__logo img { height: 40px; }
  .cab__buscar { max-width: 640px; margin: 0 auto 0 12px; width: 100%; }
  .cab__buscar input { height: 44px; font-size: 15px; }
  .cab__accion { padding: 0 10px; }
  .cab__accion-texto { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .cab__cuenta.con-puntos { display: inline-grid; grid-template-columns: auto auto; column-gap: 8px; align-content: center; justify-items: start; line-height: 1.25; }
  .cab__cuenta.con-puntos > .icono { grid-row: 1 / span 2; transform: none; }
  .cab__puntos { position: static; transform: none; padding: 0; background: none; color: var(--amarillo); line-height: 1.25; }
  .cab__puntos-largo { display: inline; }
  .cab__puntos-corto { display: none; }
}

/* ---------------------------------------------------------------- buscador: resultados */
.buscador__resultados { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; background: #fff; color: var(--texto); border: 1px solid var(--linea); border-radius: 12px; box-shadow: var(--sombra); max-height: min(70vh, 540px); overflow: auto; }
.buscador__resultados ul { padding: 6px; }
.resultado { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 8px; border-radius: 10px; color: var(--texto); text-decoration: none; }
.resultado:hover, .resultado:focus-visible { background: var(--gris); color: var(--texto); }
.resultado img { width: 48px; height: 48px; object-fit: contain; }
.resultado b { display: block; font-size: 14px; font-weight: 500; line-height: 1.35; }
.resultado > span > span { font-size: 14px; font-weight: 600; color: var(--marino); white-space: nowrap; }
.resultado--sin-stock > span > span { color: var(--texto-2); font-weight: 400; }
.resultado__precio.precio--oferta { color: var(--rosado); }
.buscador__todos { display: block; margin: 0 6px 6px; padding: 10px; border-radius: 10px; background: var(--azul); color: #fff; font-size: 14px; font-weight: 500; text-align: center; text-decoration: none; }
.buscador__todos:hover { background: var(--azul-2); color: #fff; }
.buscador__vacio { padding: 14px; font-size: 14px; }
@media (max-width: 767px) {
  .buscador__resultados { position: fixed; top: calc(var(--alto-cab) + 4px); left: 8px; right: 8px; }
}
/* Buscador dentro de la página (búsqueda y 404). */
.buscador--pagina { display: flex; gap: 8px; width: 100%; max-width: 640px; }
.buscador--pagina input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--linea-2); border-radius: 10px; background: #fff; color: var(--texto); font-size: 16px; }
.buscador--pagina input:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.buscador--pagina .boton { min-height: 44px; }
.listado .buscador--pagina { margin-bottom: 18px; }

/* ---------------------------------------------------------------- categorías (menú) */
.menu, .lateral { position: fixed; inset: 0; z-index: 60; }
.menu__fondo, .lateral__fondo { position: absolute; inset: 0; background: rgb(0 11 99 / 40%); }
.menu__panel { position: absolute; inset: 0 auto 0 0; width: min(88vw, 380px); background: #fff; display: flex; flex-direction: column; box-shadow: var(--sombra); }
.menu__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 20px; padding-top: max(10px, env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--linea); }
.menu__titulo { font-size: 18px; }
.menu__cuerpo { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 10px 10px 24px; }
.menu__atajos { display: grid; gap: 2px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--linea); }
.menu__atajo, .menu__pie a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; border-radius: 10px; color: var(--marino); font-size: 15px; font-weight: 500; text-decoration: none; }
.menu__atajo:hover, .menu__pie a:hover { background: var(--gris); color: var(--marino); }
.menu__atajo .icono, .menu__pie .icono { width: 22px; height: 22px; color: var(--azul); }
.menu__atajo--oferta, .menu__atajo--oferta .icono { color: var(--rosado); }
.menu__atajo--oferta:hover { color: var(--rosado); }
.menu__categorias { display: grid; gap: 2px; }
.menu__cat { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 4px 10px; border-radius: 10px; color: var(--texto); font-size: 15px; line-height: 1.3; text-decoration: none; }
.menu__cat:hover { background: var(--gris); color: var(--marino); }
.menu__cat img { width: 44px; height: 44px; border-radius: 50%; }
.menu__cat small { font-size: 13px; color: var(--texto-2); }
.menu__pie { display: grid; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linea); }
.menu__puntos { display: block; width: fit-content; margin-top: 2px; padding: 0 8px; border-radius: 999px; background: var(--amarillo-claro); color: var(--marino); font-size: 13px; font-weight: 600; line-height: 22px; white-space: nowrap; }
@media (min-width: 1024px) {
  /* En la compu: desplegable debajo del encabezado. */
  .menu { top: var(--alto-cab); z-index: 29; }
  .menu__fondo { background: rgb(0 11 99 / 22%); }
  .menu__panel { inset: 0 auto auto max(var(--hueco), calc((100% - 1320px) / 2)); width: min(1120px, calc(100% - 2 * var(--hueco))); max-height: calc(100vh - var(--alto-cab) - 24px); border-radius: 0 0 16px 16px; }
  .menu__cabeza { display: none; }
  .menu__cuerpo { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 20px; padding: 16px; }
  .menu__atajos { grid-column: 1; grid-row: 1; margin: 0; }
  .menu__pie { grid-column: 1; grid-row: 2; align-content: start; margin-top: 0; border-top: 0; }
  .menu__categorias { grid-column: 2; grid-row: 1 / 3; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; padding-left: 20px; border-left: 1px solid var(--linea); }
}

/* ---------------------------------------------------------------- migas */
.migas { margin-top: 10px; font-size: 13px; color: var(--texto-2); }
.migas ol { display: flex; flex-wrap: wrap; align-items: center; }
.migas li { display: inline-flex; align-items: center; min-width: 0; }
.migas li + li::before { content: "›"; margin: 0 8px; color: var(--texto-2); }
.migas a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; padding-inline: 4px; color: var(--texto-2); text-decoration: none; }
.migas li:first-child a { margin-left: -4px; }
.migas a:hover { color: var(--azul); text-decoration: underline; }
.migas [aria-current] { color: var(--texto); font-weight: 500; padding-block: 10px; line-height: 1.4; }
@media (max-width: 767px) { .migas li[aria-current] { display: none; } }

/* ---------------------------------------------------------------- banner (carrusel) */
.hero { margin-top: 12px; }
.hero__marco { position: relative; border-radius: 14px; overflow: hidden; background: var(--marino); }
.hero__pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hero__pista::-webkit-scrollbar { display: none; }
.hero__slide { position: relative; flex: 0 0 100%; aspect-ratio: 16 / 9; max-height: 52svh; scroll-snap-align: start; scroll-snap-stop: always; }
.hero__slide picture { display: contents; }
.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 11 99 / 90%) 0%, rgb(0 11 99 / 58%) 42%, rgb(0 11 99 / 0%) 78%); }
.hero__texto { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: grid; justify-items: start; gap: 6px; padding: 16px 18px 14px; color: #fff; }
.hero__titulo { color: #fff; font-size: 21px; line-height: 1.15; max-width: 19ch; }
.hero__bajada { display: none; font-size: 14px; line-height: 1.45; color: #e3e7ff; max-width: 44ch; }
.hero .boton--claro { margin-top: 4px; min-height: 40px; padding: 6px 14px; font-size: 14px; }
.hero__control { position: absolute; z-index: 2; right: 8px; bottom: 8px; display: flex; align-items: center; }
.hero__punto { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; }
.hero__punto::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: rgb(255 255 255 / 55%); transition: width .2s, background-color .2s; }
.hero__punto[aria-current="true"]::before { width: 20px; background: #fff; }
.flecha { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--linea-2); border-radius: 50%; background: #fff; color: var(--marino); transition: opacity .15s, background-color .15s, border-color .15s; }
.flecha:hover { border-color: var(--marino); }
.flecha:disabled { opacity: .35; cursor: default; }
.flecha .icono { width: 20px; height: 20px; stroke-width: 2.2; }
.flecha--hero { display: none; }
@media (min-width: 420px) { .hero__bajada { display: block; } }
@media (min-width: 768px) {
  .hero__slide { aspect-ratio: auto; max-height: none; height: clamp(220px, calc(100vh - 520px), 400px); }
  .hero__slide::after { background: linear-gradient(90deg, rgb(0 11 99 / 90%) 0%, rgb(0 11 99 / 70%) 34%, rgb(0 11 99 / 0%) 66%); }
  .hero__texto { inset: 0 auto 0 0; width: min(600px, 62%); align-content: center; gap: 8px; padding: 20px 32px 20px 84px; }
  .hero__titulo { font-size: clamp(26px, 2.4vw, 38px); max-width: 20ch; }
  .hero__bajada { font-size: 16px; }
  .hero .boton--claro { margin-top: 6px; min-height: 44px; padding: 8px 18px; font-size: 15px; }
  .flecha--hero { display: inline-grid; position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; box-shadow: var(--sombra-chica); }
  .flecha--hero.flecha--ant { left: 16px; }
  .flecha--hero.flecha--sig { right: 16px; }
  .flecha--hero:disabled { opacity: 0; pointer-events: none; }
  .hero__control { left: 50%; right: auto; bottom: 8px; transform: translateX(-50%); }
}

/* ---------------------------------------------------------------- franja: envío, entrega y retiro */
.ventajas { margin-top: 10px; }
.ventajas__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 8px 6px; border-radius: 12px; background: var(--gris); }
.ventajas li { display: grid; justify-items: center; align-content: start; gap: 2px; min-width: 0; font-size: 12px; line-height: 1.3; text-align: center; color: var(--texto-2); }
.ventajas .icono { width: 20px; height: 20px; color: var(--azul); }
.ventajas b { display: block; color: var(--marino); font-size: 12.5px; font-weight: 600; }
.ventajas__largo { display: none; }
@media (min-width: 768px) {
  .ventajas__lista { gap: 8px; padding: 8px 24px; justify-items: center; }
  .ventajas li { display: flex; align-items: center; gap: 8px; font-size: 14px; text-align: left; }
  .ventajas .icono { width: 22px; height: 22px; }
  .ventajas b { display: inline; font-size: 14px; }
  .ventajas__largo { display: inline; }
}

/* ---------------------------------------------------------------- categorías (carrusel de la portada) */
.cats { position: relative; margin-top: 12px; }
.cats__pista { display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 0; }
.cats__pista::-webkit-scrollbar { display: none; }
/* En el celular asoma un pedazo de la siguiente: se nota que se desliza. */
.cats__pista > li { flex: 0 0 calc((100% - 3 * 2px) / 3.6); scroll-snap-align: start; }
.cat { display: grid; justify-items: center; align-content: start; gap: 6px; height: 100%; padding: 2px 2px 4px; border-radius: 12px; color: var(--texto); font-size: 12.5px; font-weight: 500; line-height: 1.25; text-align: center; text-decoration: none; }
.cat img { width: 60px; height: 60px; border-radius: 50%; transition: transform .15s; }
.cat:hover { color: var(--azul); }
.cat:hover img { transform: translateY(-2px); }
.cat--oferta, .cat--oferta:hover { color: var(--rosado); }
.flecha--cats { display: none; }
@media (min-width: 768px) {
  .cats__pista { gap: 4px; }
  .cats__pista > li { flex-basis: 122px; }
  .cat { font-size: 13px; }
  .cat img { width: 64px; height: 64px; }
  .cats::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; right: var(--hueco); width: 64px; background: linear-gradient(90deg, rgb(255 255 255 / 0%), #fff 80%); pointer-events: none; }
  .cats.al-final::after { display: none; }
  .flecha--cats { display: inline-grid; position: absolute; z-index: 2; top: 14px; box-shadow: var(--sombra-chica); }
  .flecha--cats.flecha--ant { left: calc(var(--hueco) - 16px); }
  .flecha--cats.flecha--sig { right: calc(var(--hueco) - 16px); }
  .flecha--cats:disabled { visibility: hidden; }
}

/* ---------------------------------------------------------------- volver a comprar */
.volver2 { margin-top: 20px; }
.volver { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--linea); border-radius: 14px; background: linear-gradient(100deg, var(--amarillo-claro), #fff 72%); }
.volver h2 { font-size: 18px; }
.volver p { font-size: 14px; color: var(--texto-2); }
.volver__fotos { display: flex; flex-wrap: wrap; gap: 6px; }
.volver__fotos img { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--linea); border-radius: 10px; background: #fff; }
.volver__botones { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 768px) {
  .volver { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; padding: 16px 24px; }
  .volver > :not(.volver__botones) { grid-column: 1; }
  .volver__botones { grid-column: 2; grid-row: 1 / span 3; }
}

/* ---------------------------------------------------------------- filas de productos */
/* Las filas que todavía no se ven no se dibujan ni bajan sus fotos hasta que se acercan: la portada sigue liviana. */
.fila { margin-top: 20px; content-visibility: auto; contain-intrinsic-size: auto 390px; }
.fila + .fila { margin-top: 36px; }
@media (min-width: 768px) { .fila { contain-intrinsic-size: auto 400px; } }
@media (min-width: 1024px) { .fila { contain-intrinsic-size: auto 430px; } }
.fila__cabeza { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.fila__titulo { font-size: 20px; }
.fila__ver { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; min-height: 40px; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.fila__ver:hover { text-decoration: underline; }
.fila__ver .icono { width: 16px; height: 16px; }
.flechas { display: none; gap: 8px; }
.fila__pista { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: 2px; margin: -2px; scroll-padding-inline: 2px; }
.fila__pista::-webkit-scrollbar { display: none; }
/* En el celular, dos tarjetas enteras y el borde de la tercera (se nota que sigue, y el WhatsApp no tapa nada). */
.fila__pista > li { display: flex; flex: 0 0 calc((100% - 34px) / 2); scroll-snap-align: start; }
@media (min-width: 768px) {
  .fila__titulo { font-size: 24px; }
  .flechas { display: flex; }
  .fila__ver { margin-right: 4px; }
  .fila__pista { gap: 16px; }
  .fila__pista > li { flex-basis: calc((100% - 3 * 16px) / 4); }
}
@media (min-width: 1024px) { .fila__pista > li { flex-basis: calc((100% - 4 * 16px) / 5); } }
@media (min-width: 1280px) { .fila__pista > li { flex-basis: calc((100% - 5 * 16px) / 6); } }

/* ---------------------------------------------------------------- tarjeta de producto */
.tarjeta { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--linea); border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.tarjeta:hover { border-color: var(--linea-2); box-shadow: 0 8px 22px rgb(0 11 99 / 8%); }
.tarjeta__foto { display: block; aspect-ratio: 1; margin-bottom: 4px; }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: contain; }
.tarjeta__etiquetas { position: absolute; top: 8px; left: 8px; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; }
.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.etiqueta--oferta { background: var(--rosado); color: #fff; }
.etiqueta--nuevo { background: var(--amarillo); color: var(--marino); }
.tarjeta__nombre { font-size: 14px; font-weight: 500; line-height: 1.38; color: var(--texto); text-wrap: pretty; }
.tarjeta__nombre a { color: inherit; text-decoration: none; }
.tarjeta__nombre a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tarjeta__nombre a:hover { color: var(--azul); }
.tarjeta__variantes { font-size: 13px; color: var(--texto-2); }
.tarjeta__precio { margin-top: auto; padding-top: 2px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.precio { font-size: 17px; font-weight: 600; color: var(--marino); white-space: nowrap; font-variant-numeric: tabular-nums; }
.precio__desde { font-size: 13px; font-weight: 500; color: var(--texto-2); }
.precio-antes { font-size: 14px; color: var(--texto-2); white-space: nowrap; text-decoration-thickness: 1px; }
/* Ofertas (pedido del dueño): el precio en rosado, el anterior tachado y legible, y cuánto se ahorra. */
.precio--oferta { color: var(--rosado); }
.tarjeta__ahorro { flex-basis: 100%; font-size: 13px; font-weight: 500; color: var(--rosado); }
.tarjeta__compra { position: relative; z-index: 1; }
.tarjeta__compra .boton { width: 100%; min-height: 40px; padding: 6px 10px; font-size: 14px; }
.tarjeta__compra .cantidad { width: 100%; }
.tarjeta__sin-stock { display: grid; place-items: center; min-height: 40px; padding: 4px 10px; border-radius: 10px; background: var(--gris); color: var(--texto-2); font-size: 14px; line-height: 1.3; text-align: center; }
.tarjeta--agotada .tarjeta__foto img { opacity: .5; }
@media (min-width: 768px) {
  .tarjeta { padding: 12px; gap: 6px; }
  .tarjeta__nombre { font-size: 15px; }
  .precio { font-size: 18px; }
  .tarjeta__compra .boton { font-size: 15px; }
}

/* ---------------------------------------------------------------- cantidad (− 1 +) */
.cantidad { display: inline-flex; align-items: stretch; width: 132px; height: 40px; border-radius: 10px; overflow: hidden; background: #fff; outline: 1px solid var(--azul); outline-offset: -1px; }
.cantidad__boton { flex: none; width: 40px; padding: 0; border: 0; background: var(--azul-claro); color: var(--azul); display: grid; place-items: center; }
.cantidad__boton:hover { background: #d4e6f7; }
.cantidad__boton .icono { width: 18px; height: 18px; stroke-width: 2.4; }
.cantidad__numero { flex: 1; min-width: 0; width: 100%; border: 0; background: #fff; color: var(--marino); text-align: center; font-size: 15px; font-weight: 600; -moz-appearance: textfield; appearance: textfield; }
.cantidad__numero::-webkit-outer-spin-button, .cantidad__numero::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cantidad__numero:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }

/* ---------------------------------------------------------------- listados (categoría, búsqueda y todos) */
.listado__cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 2px 0 16px; }
.listado__titulo { display: grid; gap: 2px; min-width: 0; }
.listado h1 { font-size: 26px; }
.listado__cuenta { font-size: 14px; color: var(--texto-2); }
.listado__bajada { max-width: 64ch; margin-top: 4px; font-size: 15px; color: var(--texto-2); }
.vista { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--gris); }
.boton-vista { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--texto-2); font-size: 14px; font-weight: 500; }
.boton-vista .icono { width: 18px; height: 18px; }
.boton-vista[aria-pressed="true"] { background: #fff; color: var(--marino); box-shadow: var(--sombra-chica); }
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--linea); }
.filtro { display: grid; gap: 4px; flex: 1 1 150px; min-width: 0; }
.filtro label { font-size: 13px; font-weight: 500; color: var(--texto-2); }
.filtro select { width: 100%; min-height: 42px; padding: 0 36px 0 12px; border: 1px solid var(--linea-2); border-radius: 10px; background: #fff var(--flechita) no-repeat right 10px center / 18px; color: var(--texto); font-size: 14px; -webkit-appearance: none; appearance: none; }
.filtro select:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.filtro--check { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid var(--linea-2); border-radius: 10px; color: var(--texto); font-size: 14px; cursor: pointer; }
.filtro--check input { width: 18px; height: 18px; margin: 0; accent-color: var(--azul); }
/* Celular: "Ordenar por" y "Solo con stock" en una fila y la marca abajo, a lo ancho (así no se corta el texto),
   con letra de 16 px (con menos, el iPhone agranda la página al tocarlos). */
@media (max-width: 767px) {
  .filtro select { font-size: 16px; }
  .filtro--marca { order: 1; flex-basis: 100%; }
}
.grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sin-resultados { display: grid; justify-items: start; gap: 12px; margin-top: 12px; padding: 20px; border-radius: 14px; background: var(--gris); font-size: 15px; }
@media (min-width: 768px) {
  .listado h1 { font-size: 32px; }
  .filtro { flex: 0 1 220px; }
  .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1024px) { .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .grilla { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Vista en lista: un renglón por producto, para cargar cantidades rápido. */
.grilla.es-lista { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--linea); }
.filtros + .grilla.es-lista { border-top: 0; }
.es-lista .tarjeta { display: grid; grid-template-columns: 56px minmax(0, 1fr) 124px; grid-template-areas: "foto nombre compra" "foto precio compra"; align-items: center; column-gap: 12px; row-gap: 2px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; }
.es-lista .tarjeta:hover { box-shadow: none; background: var(--gris); }
.es-lista .tarjeta__foto { grid-area: foto; width: 56px; margin: 0; }
.es-lista .tarjeta__etiquetas, .es-lista .tarjeta__variantes { display: none; }
.es-lista .tarjeta__nombre { grid-area: nombre; align-self: end; font-size: 14px; }
.es-lista .tarjeta__precio { grid-area: precio; align-self: start; margin: 0; padding: 0; }
.es-lista .precio { font-size: 15px; }
.es-lista .tarjeta__compra { grid-area: compra; }
@media (min-width: 768px) {
  .es-lista .tarjeta { grid-template-columns: 64px minmax(0, 1fr) 150px 180px; grid-template-areas: "foto nombre precio compra"; column-gap: 20px; padding: 10px 8px; }
  .es-lista .tarjeta__foto { width: 64px; }
  .es-lista .tarjeta__nombre { align-self: center; font-size: 15px; }
  .es-lista .tarjeta__precio { align-self: center; justify-content: flex-end; }
  .es-lista .precio { font-size: 17px; }
}
/* Todos los productos: las categorías como filtro, en una fila que se desliza (en el celular llega hasta
   el borde y asoma la siguiente; en la compu, con flechas). */
.filtro-cats { position: relative; margin-bottom: 14px; }
.filtro-cats__pista { display: flex; gap: 8px; margin: 0 calc(-1 * var(--hueco)); padding: 2px var(--hueco); overflow-x: auto; scroll-padding: 0 var(--hueco); scrollbar-width: none; }
.filtro-cats__pista::-webkit-scrollbar { display: none; }
.filtro-cats__pista > li { flex: none; }
.filtro-cat { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--linea-2); border-radius: 999px; background: #fff; color: var(--marino); font-size: 14px; font-weight: 500; white-space: nowrap; }
.filtro-cat:hover { border-color: var(--marino); }
.filtro-cat[aria-pressed="true"] { border-color: var(--marino); background: var(--marino); color: #fff; }
.filtro-cat__cuenta { color: var(--texto-2); font-size: 13px; font-weight: 400; }
.filtro-cat[aria-pressed="true"] .filtro-cat__cuenta { color: rgb(255 255 255 / 80%); }
.flecha--filtro-cats { display: none; }
@media (min-width: 768px) {
  .filtro-cats__pista { margin: 0; padding: 2px 0; scroll-padding: 0; }
  .filtro-cats::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; width: 64px; background: linear-gradient(90deg, rgb(255 255 255 / 0%), #fff 80%); pointer-events: none; }
  .filtro-cats.al-final::after { display: none; }
  .flecha--filtro-cats { display: inline-grid; position: absolute; z-index: 2; top: 2px; box-shadow: var(--sombra-chica); }
  .flecha--filtro-cats.flecha--ant { left: -16px; }
  .flecha--filtro-cats.flecha--sig { right: -16px; }
  .flecha--filtro-cats:disabled { visibility: hidden; }
}

/* ---------------------------------------------------------------- ficha de producto */
.ficha__grilla { display: grid; gap: 20px; margin-top: 2px; }
.galeria { display: grid; gap: 10px; align-content: start; min-width: 0; }
.galeria__caja { position: relative; height: min(320px, 80vw); border: 1px solid var(--linea); border-radius: 16px; background: #fff; overflow: hidden; }
.galeria__principal { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
.galeria__etiquetas { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.galeria__miniaturas { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.galeria__mini { display: block; width: 64px; height: 64px; padding: 4px; border: 1px solid var(--linea); border-radius: 10px; background: #fff; flex: none; }
.galeria__mini[aria-current="true"] { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.galeria__mini img { width: 100%; height: 100%; object-fit: contain; }
.ficha__info { display: grid; gap: 14px; align-content: start; min-width: 0; }
.ficha__marca { font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--azul); }
.ficha__nombre { font-size: 24px; line-height: 1.3; }
.ficha__marca + .ficha__nombre { margin-top: -8px; }
.ficha__resenas { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 40px; font-size: 14px; color: var(--texto-2); text-decoration: none; }
.ficha__resenas:hover { color: var(--azul); text-decoration: underline; }
.ficha__resenas b { color: var(--texto); font-weight: 600; }
.ficha__precio-fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.precio--grande { font-size: 30px; }
.ficha__precio-fila .precio-antes { font-size: 16px; }
.ficha__ahorro { margin-top: -8px; font-size: 15px; font-weight: 600; color: var(--rosado); }
.ficha__cuotas { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--exito); }
.ficha__resumen { display: grid; gap: 6px; font-size: 15px; color: var(--texto-2); }
.ficha__formulario { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--linea); border-radius: 16px; }
.ficha__elegida { display: flex; align-items: center; gap: 12px; margin-top: -4px; font-size: 14px; color: var(--texto-2); }
.ficha__elegida img { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--linea); border-radius: 10px; background: #fff; }
.ficha__elegida b { font-weight: 600; color: var(--marino); }
.ficha__elegida-precio { white-space: nowrap; }
.ficha__caja { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 12px; background: var(--amarillo-claro); font-size: 14px; color: var(--texto); }
.ficha__caja > .icono { width: 22px; height: 22px; color: var(--marino); }
.ficha__caja span { flex: 1 1 180px; }
.ficha__comprar { display: flex; gap: 10px; }
.cantidad--ficha { flex: none; width: 140px; height: 46px; }
.cantidad--ficha .cantidad__boton { width: 44px; }
.ficha__agregar { flex: 1; min-width: 0; white-space: nowrap; }
@media (max-width: 479px) {
  .cantidad--ficha { width: 120px; }
  .cantidad--ficha .cantidad__boton { width: 40px; }
  .ficha__agregar { padding-inline: 12px; }
  .ficha__agregar .icono { display: none; }
}
.entrega { display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: var(--gris); font-size: 14px; }
.entrega__titulo { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.entrega__titulo .icono { width: 22px; height: 22px; color: var(--azul); }
.entrega__cuando { font-weight: 500; color: var(--marino); }
.entrega ul { display: grid; gap: 4px; color: var(--texto-2); }
.entrega ul b { color: var(--texto); font-weight: 500; }
.entrega__mas { display: inline-flex; align-items: center; min-height: 40px; justify-self: start; font-weight: 500; }
.ficha__ayuda { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 14px; color: var(--texto-2); }
.ficha__ayuda a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 500; }
.ficha__agotado { display: grid; justify-items: start; gap: 12px; padding: 16px; border-radius: 16px; background: var(--gris); font-size: 15px; }
.ficha__descripcion { display: grid; gap: 10px; max-width: 75ch; margin-top: 36px; }
.ficha__descripcion h2 { font-size: 22px; }
.ficha__descripcion p { color: var(--texto-2); }
.ficha .fila { margin-top: 40px; }
@media (min-width: 768px) { .ficha__nombre { font-size: 30px; } }
@media (min-width: 900px) {
  .ficha__grilla { grid-template-columns: auto minmax(0, 1fr); gap: 48px; align-items: start; }
  .galeria { position: sticky; top: calc(var(--alto-cab) + 16px); width: min(600px, 74vh, 46vw); }
  .galeria__caja { height: auto; aspect-ratio: 1; }
  .ficha__elegida { display: none; }
}

/* ---------------------------------------------------------------- estrellas y opiniones */
.estrellas { position: relative; display: inline-flex; flex: none; line-height: 0; }
.estrellas__vacias, .estrellas__llenas { display: inline-flex; gap: 1px; }
.estrellas__llenas { position: absolute; inset: 0 auto 0 0; overflow: hidden; }
.estrellas .icono { flex: none; width: 16px; height: 16px; stroke-width: 1.4; }
.estrellas__vacias .icono { color: #c3c9dc; fill: #eef1f7; }
.estrellas__llenas .icono { color: #c98e00; fill: var(--amarillo); }
.estrellas--grandes .icono { width: 22px; height: 22px; }
.resenas { display: grid; gap: 16px; max-width: 880px; margin-top: 40px; scroll-margin-top: calc(var(--alto-cab) + 16px); }
.resenas__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.resenas__cabeza h2 { font-size: 22px; }
.resenas__escribir .icono { color: #c98e00; fill: var(--amarillo); }
.resenas__resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; padding: 16px 20px; border-radius: 16px; background: var(--gris); }
.resenas__promedio { display: flex; align-items: center; gap: 14px; }
.resenas__promedio > b { font-size: 40px; font-weight: 600; line-height: 1; color: var(--marino); font-variant-numeric: tabular-nums; }
.resenas__promedio > span { display: grid; gap: 4px; }
.resenas__total { font-size: 14px; color: var(--texto-2); }
.resenas__barras { display: grid; gap: 4px; flex: 1 1 240px; max-width: 360px; }
.resenas__barras li { display: grid; grid-template-columns: 76px minmax(0, 1fr) 28px; align-items: center; gap: 10px; font-size: 13px; color: var(--texto-2); }
.resenas__barra { height: 8px; border-radius: 999px; background: #dde3f0; overflow: hidden; }
.resenas__barra span { display: block; height: 100%; border-radius: inherit; background: var(--amarillo); }
.resenas__cuantas { text-align: right; font-variant-numeric: tabular-nums; }
.resenas__nada { color: var(--texto-2); }
.resenas__gracias { padding: 12px 14px; border-radius: 12px; background: var(--exito-claro); color: var(--exito); font-weight: 500; }
.resenas__gracias:focus { outline: none; }
.resenas__lista { display: grid; border-top: 1px solid var(--linea); }
.resena { display: grid; gap: 4px; padding: 16px 4px; border-bottom: 1px solid var(--linea); }
.resena__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.resena__autor { font-size: 15px; font-weight: 600; color: var(--marino); }
.resena__verificada { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--exito); }
.resena__verificada .icono { width: 16px; height: 16px; stroke-width: 2.4; }
.resena__fecha { font-size: 13px; color: var(--texto-2); }
.resena__texto { max-width: 68ch; margin-top: 4px; font-size: 15px; line-height: 1.6; color: var(--texto); overflow-wrap: anywhere; }
.resena__estado { width: fit-content; margin-top: 2px; padding: 2px 10px; border-radius: 999px; background: var(--amarillo-claro); color: var(--marino); font-size: 13px; font-weight: 500; }
.resenas__mas { justify-self: start; }
.resena-form { display: grid; gap: 16px; padding: 18px; border: 1px solid var(--linea); border-radius: 16px; }
.resena-form h3 { font-size: 17px; }
.estrellas-elegir { margin: 0; padding: 0; border: 0; min-width: 0; }
.estrellas-elegir legend { margin-bottom: 6px; padding: 0; font-size: 14px; font-weight: 500; color: var(--marino); }
.estrellas-elegir__lista { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.estrella-elegir { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; cursor: pointer; }
.estrella-elegir input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.estrella-elegir .icono { width: 32px; height: 32px; stroke-width: 1.4; color: #b7bed3; fill: #eef1f7; transition: transform .1s; }
/* Se llenan hasta la elegida (y, con el mouse encima, hasta esa). */
.estrella-elegir:has(input:checked) .icono, .estrella-elegir:has(~ .estrella-elegir input:checked) .icono { color: #c98e00; fill: var(--amarillo); }
.estrellas-elegir__lista:hover .estrella-elegir .icono { color: #b7bed3; fill: #eef1f7; }
.estrellas-elegir__lista .estrella-elegir:hover .icono, .estrellas-elegir__lista .estrella-elegir:has(~ .estrella-elegir:hover) .icono { color: #c98e00; fill: var(--amarillo); transform: scale(1.06); }
.estrella-elegir:has(input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 1px; }
.estrellas-elegir__texto { margin-left: 8px; font-size: 14px; font-weight: 500; color: var(--marino); }
@media (min-width: 768px) { .resena-form { padding: 24px; } .resenas__cabeza h2 { font-size: 24px; } }

/* ---------------------------------------------------------------- ficha en el celular: barra fija con el precio y "Agregar al carrito" */
.barra-ficha { display: none; }
@media (max-width: 767px) {
  .barra-ficha { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--linea); background: #fff; box-shadow: 0 -6px 20px rgb(0 11 99 / 10%); }
  .barra-ficha__precio { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; min-width: 0; }
  .barra-ficha .precio { font-size: 19px; }
  .barra-ficha .boton { flex: none; min-height: 44px; }
  .tipo-ficha main { padding-bottom: 76px; }
  html.con-barra-ficha .aviso { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------------- carrito (página) */
.pagina-carrito h1, .pagina-cuenta h1 { margin: 2px 0 18px; font-size: 26px; }
.carrito-pagina { display: grid; gap: 24px; }
/* Mientras llega el carrito, su lugar ya está reservado: el pie no salta al aparecer los productos. */
.carrito-pagina > .cargando { min-height: 60vh; }
.carrito-pagina__items { display: grid; gap: 20px; min-width: 0; }
.carrito-pagina__resumen { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--linea); border-radius: 16px; }
.barra-pago { display: none; }
.carrito-pagina > .vacio, .carrito-pagina__vendidos { grid-column: 1 / -1; }
.carrito-pagina__vendidos { display: grid; gap: 12px; }
.carrito-pagina__vendidos > h2 { font-size: 22px; }
@media (max-width: 767px) {
  .barra-pago { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linea); background: #fff; box-shadow: 0 -6px 20px rgb(0 11 99 / 10%); }
  .barra-pago > span { display: grid; font-size: 13px; color: var(--texto-2); }
  .barra-pago b { font-size: 18px; font-weight: 600; color: var(--marino); white-space: nowrap; }
  .tipo-carrito main { padding-bottom: 76px; }
  .tipo-carrito .wa-flotante { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 768px) { .pagina-carrito h1, .pagina-cuenta h1 { font-size: 32px; } }
@media (min-width: 1024px) {
  .carrito-pagina { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: 40px; }
  .carrito-pagina__resumen { position: sticky; top: calc(var(--alto-cab) + 16px); }
}

/* ---------------------------------------------------------------- checkout */
.checkout__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 20px 0 16px; }
.checkout__cabeza h1 { font-size: 26px; }
.checkout__resumen-movil { padding: 6px 12px; border-radius: 999px; background: var(--gris); color: var(--marino); font-size: 14px; font-weight: 500; }
.checkout__resumen-movil:empty { display: none; }
.checkout { display: grid; gap: 20px; }
.checkout__pasos { display: grid; gap: 16px; min-width: 0; }
.paso { display: grid; gap: 14px; min-width: 0; padding: 18px; border: 1px solid var(--linea); border-radius: 16px; }
.paso h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.paso__numero { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--marino); color: #fff; font-size: 14px; font-weight: 600; }
.campos { display: grid; gap: 14px; }
.campos--dos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.campo { display: grid; gap: 6px; min-width: 0; align-content: start; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-size: 14px; font-weight: 500; color: var(--marino); }
.campo__ayuda { font-size: 13px; font-weight: 400; color: var(--texto-2); }
.campo input, .campo select, .campo textarea, .cupon input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--linea-2); border-radius: 10px; background: #fff; color: var(--texto); font-size: 16px; }
.campo textarea { min-height: 88px; resize: vertical; }
.campo select { padding-right: 38px; background: #fff var(--flechita) no-repeat right 10px center / 18px; -webkit-appearance: none; appearance: none; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible, .cupon input:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.campo [aria-invalid="true"] { border-color: var(--error); background: #fffafa; }
.campo__error { font-size: 13px; font-weight: 500; color: var(--error); }
.campo__nota { font-size: 14px; color: var(--texto-2); }
.tarjeta-opcion { position: relative; display: block; cursor: pointer; }
.tarjeta-opcion input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.tarjeta-opcion__cuerpo { display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 14px 16px; border: 1px solid var(--linea-2); border-radius: 12px; background: #fff; color: var(--texto-2); font-size: 14px; }
.tarjeta-opcion__cuerpo > .icono { width: 24px; height: 24px; margin-top: 1px; color: var(--azul); }
.tarjeta-opcion__cuerpo > span { display: grid; gap: 2px; min-width: 0; }
.tarjeta-opcion__cuerpo b { font-size: 15px; font-weight: 600; color: var(--marino); }
.tarjeta-opcion__precio { margin-left: 4px; font-weight: 500; color: var(--texto-2); white-space: nowrap; }
.tarjeta-opcion__cuotas { font-weight: 500; color: var(--exito); }
.tarjeta-opcion:hover .tarjeta-opcion__cuerpo { border-color: var(--marino); }
.tarjeta-opcion input:checked + .tarjeta-opcion__cuerpo { border-color: var(--azul); background: var(--azul-claro); box-shadow: inset 0 0 0 1px var(--azul); }
.tarjeta-opcion input:focus-visible + .tarjeta-opcion__cuerpo { outline: 2px solid var(--azul); outline-offset: 2px; }
.opciones-entrega, .opciones-pago { display: grid; gap: 10px; }
.checkout__cuando { padding: 10px 12px; border-radius: 10px; background: var(--gris); color: var(--marino); font-size: 14px; font-weight: 500; }
.checkout__lado { display: grid; gap: 14px; align-content: start; padding: 20px; border: 1px solid var(--linea); border-radius: 16px; }
.resumen { display: grid; gap: 12px; }
.resumen h2 { font-size: 18px; }
.resumen__items { display: grid; gap: 10px; max-height: 320px; overflow: auto; }
.resumen__item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 14px; }
.resumen__item img { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--linea); border-radius: 8px; }
.resumen__item b { font-weight: 600; white-space: nowrap; color: var(--marino); }
.resumen__variante { display: block; font-size: 13px; color: var(--texto-2); }
.resumen__cambiar { display: inline-flex; align-items: center; justify-self: start; min-height: 40px; font-size: 14px; font-weight: 500; }
.cupon { display: grid; gap: 6px; }
.cupon label { font-size: 14px; font-weight: 500; color: var(--marino); }
.cupon__fila { display: flex; gap: 8px; }
.cupon__fila input { flex: 1; min-width: 0; }
.cupon__mensaje { font-size: 13px; }
.cupon__mensaje:empty { display: none; }
.cupon__mensaje.bien { color: var(--exito); }
.cupon__mensaje.mal { color: var(--error); }
.checkout__legal { font-size: 13px; color: var(--texto-2); }
@media (min-width: 600px) { .opciones-entrega { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .paso { padding: 24px; } .checkout__cabeza h1 { font-size: 32px; } }
@media (min-width: 1024px) {
  .checkout { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; gap: 40px; }
  .checkout__lado { position: sticky; top: calc(var(--alto-cab) + 16px); }
  .checkout__resumen-movil { display: none; }
}

/* ---------------------------------------------------------------- pedido recibido */
.pagina-gracias { max-width: calc(1000px + 2 * var(--hueco)); padding-top: 24px; }
.gracias { display: grid; gap: 20px; }
.gracias__cabeza { display: grid; justify-items: start; gap: 8px; padding: 24px; border-radius: 16px; background: var(--exito-claro); }
.gracias__cabeza .icono { width: 40px; height: 40px; color: var(--exito); stroke-width: 2.4; }
.gracias__cabeza h1 { font-size: 26px; }
.gracias__cabeza p { color: var(--texto); }
.gracias__grilla { display: grid; gap: 16px; }
.caja { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 20px; border: 1px solid var(--linea); border-radius: 16px; }
.caja h2 { font-size: 18px; }
.caja > p { color: var(--texto-2); font-size: 15px; }
.pasos { display: grid; gap: 14px; counter-reset: paso; }
.pasos li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; counter-increment: paso; }
.pasos li::before { content: counter(paso); grid-row: 1 / span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--azul-claro); color: var(--azul); font-size: 14px; font-weight: 600; }
.pasos b { font-weight: 600; color: var(--marino); }
.pasos span { font-size: 15px; color: var(--texto-2); }
@media (min-width: 900px) { .gracias__grilla { grid-template-columns: 1fr 1fr; } .gracias__cabeza h1 { font-size: 30px; } }

/* ---------------------------------------------------------------- mi cuenta */
.cuenta__grilla { display: grid; gap: 16px; }
.cuenta__dispositivo { display: grid; gap: 10px; margin-top: 4px; font-size: 15px; }
.cuenta { display: grid; gap: 20px; }
.cuenta__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.cuenta__hola { font-size: 18px; color: var(--marino); }
.cuenta__menu { display: flex; flex-wrap: wrap; gap: 8px; }
.cuenta__menu a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--linea-2); border-radius: 999px; color: var(--marino); font-size: 14px; font-weight: 500; text-decoration: none; }
.cuenta__menu a:hover { border-color: var(--marino); }
.cuenta__seccion { display: grid; gap: 14px; scroll-margin-top: calc(var(--alto-cab) + 16px); }
.cuenta__seccion > h2 { font-size: 22px; }
.pedidos { display: grid; gap: 14px; }
.pedido { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--linea); border-radius: 16px; }
.pedido__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.pedido__cabeza b { font-size: 16px; font-weight: 600; color: var(--marino); }
.pedido__fecha { font-size: 14px; color: var(--texto-2); }
.pedido__estado { padding: 2px 10px; border-radius: 999px; background: var(--exito-claro); color: var(--exito); font-size: 13px; font-weight: 500; }
.pedido__total { margin-left: auto; font-weight: 600; color: var(--marino); white-space: nowrap; }
.pedido__fotos { display: flex; flex-wrap: wrap; gap: 6px; }
.pedido__fotos img { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--linea); border-radius: 10px; background: #fff; }
.pedido__items { display: grid; gap: 2px; font-size: 14px; color: var(--texto-2); }
.pedido .boton { justify-self: start; }
.datos { display: grid; gap: 10px; margin: 0; }
.datos div { display: grid; gap: 2px; }
.datos dt { font-size: 13px; color: var(--texto-2); }
.datos dd { margin: 0; font-size: 15px; color: var(--texto); }
@media (min-width: 768px) { .cuenta__grilla { grid-template-columns: 1fr 1fr; align-items: start; } .datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- páginas de texto */
.ayuda-nav { margin: 2px 0 4px; }
.ayuda-nav ul { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ayuda-nav ul::-webkit-scrollbar { display: none; }
.ayuda-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--linea-2); border-radius: 999px; color: var(--marino); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.ayuda-nav a:hover { border-color: var(--marino); }
.ayuda-nav a[aria-current="page"] { border-color: var(--marino); background: var(--marino); color: #fff; }
.texto__cabeza { display: grid; gap: 6px; max-width: 70ch; margin: 16px 0 24px; }
.texto__cabeza h1 { font-size: 28px; }
.texto__bajada { font-size: 17px; color: var(--texto-2); }
.texto__seccion { display: grid; gap: 12px; max-width: 75ch; margin-top: 36px; }
.texto__seccion h2 { font-size: 22px; }
.texto__seccion p { color: var(--texto-2); }
.texto__seccion:has(.grilla, .info-cajas) { max-width: none; }
.texto__destacado { display: inline-block; margin-bottom: 20px; padding: 12px 16px; border-radius: 12px; background: var(--amarillo-claro); color: var(--marino); font-weight: 500; }
.info-cajas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.info-caja { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 14px; padding: 20px; border: 1px solid var(--linea); border-radius: 16px; }
.info-caja > .icono { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: var(--azul-claro); color: var(--azul); }
.info-caja > div { display: grid; gap: 8px; min-width: 0; }
.info-caja h2, .info-caja h3 { font-size: 17px; }
.info-caja p { font-size: 15px; color: var(--texto-2); }
.lista-check { display: grid; gap: 8px; }
.lista-check li { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; color: var(--texto-2); }
.lista-check .icono { width: 18px; height: 18px; margin-top: 3px; color: var(--exito); }
.texto__legal { display: grid; gap: 10px; max-width: 75ch; }
.texto__legal h2 { margin-top: 14px; font-size: 18px; }
.texto__legal p { color: var(--texto-2); }
.dudas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 40px; padding: 20px 24px; border-radius: 16px; background: var(--gris); }
.dudas h2 { font-size: 20px; }
.dudas p { margin-top: 2px; color: var(--texto-2); }
.dudas__botones { display: flex; flex-wrap: wrap; gap: 10px; }
.ayuda-tarjetas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.ayuda-tarjeta { display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: 18px; border: 1px solid var(--linea); border-radius: 16px; color: var(--texto); text-decoration: none; }
.ayuda-tarjeta:hover { border-color: var(--azul); color: var(--texto); }
.ayuda-tarjeta > .icono { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: var(--azul-claro); color: var(--azul); }
.ayuda-tarjeta > span { display: grid; gap: 2px; }
.ayuda-tarjeta b { font-size: 16px; font-weight: 600; color: var(--marino); }
.ayuda-tarjeta span span { font-size: 14px; color: var(--texto-2); }
@media (min-width: 768px) {
  .texto__cabeza h1 { font-size: 36px; }
  .info-cajas--dos { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .info-cajas--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- 404 */
.error404 { display: grid; justify-items: center; gap: 14px; padding-block: 40px 8px; text-align: center; }
.error404__codigo { font-size: 72px; font-weight: 600; line-height: 1; color: var(--azul); }
.error404 h1 { font-size: 28px; }
.error404 > p { max-width: 52ch; color: var(--texto-2); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; }
.chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--linea-2); border-radius: 999px; color: var(--marino); font-size: 14px; font-weight: 500; text-decoration: none; }
.chips a:hover { border-color: var(--marino); }
.error404__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }

/* ---------------------------------------------------------------- pie */
/* Celular: la marca con WhatsApp y Llamar, las listas en grupos que se abren con un toque y los medios
   de pago (el pie ocupaba más de una pantalla). Compu: 4 columnas, letra chica, listas siempre abiertas. */
.pie { margin-top: 56px; background: var(--marino); color: #d6dbf7; font-size: 14px; line-height: 1.5; }
.pie a { color: #d6dbf7; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie__grilla { display: grid; padding-block: 32px 4px; }
.pie__marca { display: grid; gap: 12px; align-content: start; padding-bottom: 24px; }
.pie__marca img { width: auto; height: 40px; }
.pie__marca p { max-width: 44ch; }
.pie__acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.pie .pie__acciones .boton { min-height: 44px; color: #fff; text-decoration: none; }
.pie .pie__llamar { border-color: rgb(255 255 255 / 45%); background: transparent; }
.pie .pie__llamar:hover { border-color: #fff; background: rgb(255 255 255 / 8%); }
.pie__grupo { border-top: 1px solid rgb(255 255 255 / 14%); }
.pie__grupo > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; cursor: pointer; list-style: none; }
.pie__grupo > summary::-webkit-details-marker { display: none; }
.pie__grupo > summary:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 2px; border-radius: 6px; }
.pie__grupo > summary .icono { width: 20px; height: 20px; color: #fff; transition: transform .2s; }
.pie__grupo[open] > summary .icono { transform: rotate(180deg); }
.pie h2 { margin: 0; font-size: 15px; font-weight: 600; color: #fff; }
.pie__grupo ul { display: grid; padding-bottom: 12px; }
.pie__grupo li > a { display: flex; align-items: center; min-height: 40px; }
.pie__contacto li { display: flex; align-items: flex-start; gap: 10px; padding-block: 7px; }
.pie__contacto .icono { width: 18px; height: 18px; margin-top: 2px; color: var(--amarillo); }
.pie__grupo .pie__contacto li > a { display: inline; min-height: 0; overflow-wrap: anywhere; }
.pie__contacto span a { text-decoration: underline; }
.pie__pagos { display: grid; gap: 12px; padding-block: 20px; border-top: 1px solid rgb(255 255 255 / 14%); }
.pie__pagos-titulo { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
/* Todos del mismo tamaño, en tarjetitas blancas (como los muestra Mercado Pago). En el celular, las
   6 tarjetas en una fila y Abitab, Redpagos y Mercado Pago en la segunda; en la compu, todos en una. */
.pie__logos { display: grid; grid-template-columns: repeat(6, 40px); gap: 8px; }
.pie__logos img { width: 40px; height: 30px; }
/* La transferencia, como un medio de pago más: tarjetita blanca del mismo alto, con el ícono del banco. */
.pie__transferencia { grid-column: span 3; display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid #e5e5e5; border-radius: 3px; background: #fff; color: var(--marino); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pie__transferencia .icono { width: 16px; height: 16px; color: var(--azul); }
.pie__final { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding-block: 14px calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgb(255 255 255 / 14%); font-size: 13px; color: #b9c0e6; }
.pie__final a { padding: 0; color: #fff; text-decoration: underline; }
.pie:not(.pie--simple) .pie__final { justify-content: flex-start; gap: 6px 24px; }
.pie--simple { margin-top: 40px; }
.pie--simple .pie__final { border-top: 0; }
/* Celular: lugar abajo de todo para el botón de WhatsApp, así no queda encima del texto del pie. */
@media (max-width: 767px) {
  .pie:not(.pie--simple) .pie__final { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 768px) {
  .pie__grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; padding-block: 40px 32px; }
  .pie__marca { grid-column: 1 / -1; padding-bottom: 0; }
  .pie__acciones { display: flex; flex-wrap: wrap; }
  .pie__grupo { border-top: 0; }
  .pie__grupo > summary { min-height: 0; margin-bottom: 10px; cursor: default; }
  .pie__grupo > summary .icono { display: none; }
  .pie h2 { font-size: 14px; }
  .pie__grupo ul { gap: 2px; padding-bottom: 0; }
  .pie__grupo li > a { display: inline-block; min-height: 0; padding-block: 3px; }
  .pie__contacto li { gap: 8px; padding-block: 3px; }
  .pie__contacto .icono { width: 16px; height: 16px; margin-top: 3px; }
  .pie__pagos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
  .pie__logos { display: flex; flex-wrap: wrap; }
}
@media (min-width: 1024px) {
  .pie__grilla { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 32px; padding-block: 44px 32px; }
  .pie__marca { grid-column: auto; }
}

/* ---------------------------------------------------------------- WhatsApp */
.wa-flotante { position: fixed; z-index: 40; right: 8px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--verde-wa); color: #fff; box-shadow: 0 6px 18px rgb(0 0 0 / 22%); transition: transform .15s, opacity .2s, visibility .2s; }
/* Mientras queda encima de un texto, un botón o un precio, se esconde (vuelve al mover la página): no tapa nada. */
.wa-flotante--tapa { opacity: 0; visibility: hidden; }
.wa-flotante:hover { color: #fff; transform: scale(1.06); }
.wa-flotante .icono { width: 28px; height: 28px; }
html.con-panel .wa-flotante { display: none; }
/* En el celular, en la ficha y el carrito no va: taparía sabores y botones (pedido del dueño; la ficha tiene su enlace de WhatsApp). */
@media (max-width: 767px) { .tipo-ficha .wa-flotante, .tipo-carrito .wa-flotante { display: none; } }
@media (min-width: 768px) { .wa-flotante { right: 24px; bottom: 24px; width: 58px; height: 58px; } .wa-flotante .icono { width: 30px; height: 30px; } }

/* ---------------------------------------------------------------- aviso al agregar */
.aviso { position: fixed; z-index: 55; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s; }
.aviso.visible { opacity: 1; transform: none; pointer-events: auto; }
.aviso__caja { display: flex; align-items: center; gap: 12px; max-width: 460px; margin-inline: auto; padding: 12px 12px 12px 16px; border-radius: 14px; background: var(--marino); color: #fff; box-shadow: var(--sombra); }
.aviso__texto { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; }
.aviso__texto span { display: block; font-weight: 500; }
.aviso__texto small { display: block; margin-top: 2px; font-size: 13px; color: #cfd5ff; }
.aviso .boton { flex: none; min-height: 40px; padding: 6px 14px; background: #fff; color: var(--marino); font-size: 14px; }
.aviso .boton:hover { background: var(--amarillo); }
@media (min-width: 1024px) { .aviso { left: auto; right: 24px; top: calc(var(--alto-cab) + 12px); bottom: auto; width: 440px; transform: translateY(-8px); } }

/* ---------------------------------------------------------------- opciones (sabor, tamaño, envío, factura) */
.opciones { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.opciones legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--marino); }
.opciones__lista { display: flex; flex-wrap: wrap; gap: 6px; }
.opcion { position: relative; display: inline-flex; cursor: pointer; }
.opcion input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.opcion span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--linea-2); border-radius: 999px; background: #fff; font-size: 14px; line-height: 1.25; }
.opcion:hover span { border-color: var(--marino); }
.opcion input:checked + span { border-color: var(--azul); background: var(--azul-claro); color: var(--marino); box-shadow: inset 0 0 0 1px var(--azul); font-weight: 500; }
.opcion input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.opcion input:disabled + span { border-style: dashed; background: var(--gris); color: #6c7296; cursor: not-allowed; }
.error { padding: 8px 12px; border-radius: 8px; background: var(--error-claro); color: var(--error); font-size: 14px; font-weight: 500; }

/* ---------------------------------------------------------------- carrito lateral */
.lateral__panel { position: absolute; inset: 0 0 0 auto; width: min(100%, 440px); background: #fff; display: flex; flex-direction: column; box-shadow: var(--sombra); animation: entrar .22s ease-out; }
@keyframes entrar { from { transform: translateX(24px); opacity: .6; } }
.lateral__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 20px; padding-top: max(10px, env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--linea); }
.lateral__cabeza h2 { font-size: 19px; }
.lateral__cabeza h2:focus { outline: none; }
.lateral__cuerpo { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 16px 20px 24px; display: grid; gap: 20px; align-content: start; }
.lateral__pie { display: grid; gap: 10px; padding: 12px 20px; padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linea); background: #fff; }
.lateral__pie:empty { display: none; }
.lateral__total { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lateral__total > span { font-weight: 600; color: var(--marino); }
.lateral__detalle { display: block; font-size: 13px; font-weight: 400; color: var(--texto-2); }
.lateral__total b { font-size: 22px; font-weight: 600; color: var(--marino); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lateral__mas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; font-size: 14px; }
.lateral__mas a { font-weight: 500; }
.meta-envio { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--gris); }
.meta-envio__texto { font-size: 14px; font-weight: 500; color: var(--marino); }
.meta-envio__ver { white-space: nowrap; }
.meta-envio__barra { height: 6px; border-radius: 999px; background: #dde3f0; overflow: hidden; }
.meta-envio__barra span { display: block; height: 100%; border-radius: inherit; background: var(--azul); transition: width .3s; }
.meta-envio--lista { background: var(--exito-claro); }
.meta-envio--lista .meta-envio__texto { display: flex; align-items: center; gap: 8px; color: var(--exito); }
.items { display: grid; }
.item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 2px 14px; padding-block: 14px; border-bottom: 1px solid var(--linea); }
.item:first-child { padding-top: 0; }
.item > a { grid-row: 1 / span 2; }
.item img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--linea); border-radius: 10px; background: #fff; }
.item__nombre { font-size: 15px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.item__nombre a { color: var(--texto); text-decoration: none; }
.item__nombre a:hover { color: var(--azul); }
.item__variante, .item__precio { font-size: 13px; color: var(--texto-2); }
.item__precio { white-space: nowrap; }
.item__precio--oferta { color: var(--rosado); font-weight: 500; }
.item__precio .precio-antes, .sugerencia .precio-antes, .resultado .precio-antes { margin-left: 2px; font-size: 13px; font-weight: 400; }
.item__fila { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.item__total { order: 3; margin-left: auto; font-size: 16px; font-weight: 600; color: var(--marino); white-space: nowrap; font-variant-numeric: tabular-nums; }
.item__quitar { order: 2; min-height: 40px; padding: 0 4px; border: 0; background: none; color: var(--texto-2); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.item__quitar:hover { color: var(--error); }
.sugerencias { display: grid; gap: 8px; }
.sugerencias h2, .sugerencias h3 { font-size: 16px; }
.sugerencias__nota { margin-top: -4px; font-size: 13px; color: var(--texto-2); }
.sugerencias__lista { display: grid; border-top: 1px solid var(--linea); }
.sugerencia { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding-block: 12px; border-bottom: 1px solid var(--linea); }
.sugerencia img { width: 56px; height: 56px; object-fit: contain; }
.sugerencia__nombre { font-size: 14px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.sugerencia__precio { font-size: 15px; font-weight: 600; color: var(--marino); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sugerencia__llega { display: inline-block; margin-left: 6px; font-size: 12.5px; font-weight: 500; color: var(--exito); white-space: nowrap; }
.sugerencia__accion { display: contents; }
.sugerencia .opciones { grid-column: 1 / -1; }
.sugerencia [data-error-sug] { grid-column: 1 / -1; }
.sugerencia [data-agregar-sug] { grid-column: 3; grid-row: 1; min-height: 40px; padding: 6px 14px; border-color: var(--azul); background: #fff; color: var(--azul); font-size: 14px; white-space: nowrap; }
.sugerencia [data-agregar-sug]:hover { background: var(--azul); color: #fff; }
.sugerencia [data-agregar-sug] .icono { width: 16px; height: 16px; }
.sugerencia .opcion span { min-height: 40px; padding: 6px 12px; font-size: 13.5px; }
.envio-elegir { border: 0; margin: 0; padding: 0; min-width: 0; }
.envio-elegir legend { margin-bottom: 8px; padding: 0; font-size: 15px; font-weight: 600; color: var(--marino); }
.envio-elegir .opciones__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.envio-elegir .opcion span { width: 100%; height: 100%; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 8px 12px; border-radius: 10px; font-size: 14px; }
.envio-elegir .opcion b { font-weight: 600; white-space: nowrap; }
.totales { display: grid; gap: 6px; margin: 0; font-size: 15px; }
.totales div { display: flex; justify-content: space-between; gap: 12px; }
.totales dt { color: var(--texto-2); }
.totales dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.totales__total { margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--linea); font-size: 17px; font-weight: 600; }
.totales__total dt, .totales__total dd { color: var(--marino); }
.totales__ahorro { display: flex; align-items: center; gap: 6px; margin-top: -4px; font-size: 14px; font-weight: 600; color: var(--rosado); }
.totales__ahorro .icono { width: 18px; height: 18px; }
.cuotas-nota { margin-top: -6px; font-size: 13px; color: var(--exito); }
.vacio { display: grid; justify-items: start; gap: 12px; padding: 8px 0; font-size: 15px; }
.vacio .volver { width: 100%; }
.vacio.caja { padding: 20px; }

/* ---------------------------------------------------------------- puntos */
.puntos-linea { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--amarillo-claro); color: var(--texto); font-size: 14px; line-height: 1.45; }
.puntos-linea > .icono { width: 20px; height: 20px; margin-top: 1px; color: #9a6a00; }
.puntos-linea b { font-weight: 600; color: var(--marino); }
.puntos-linea a { font-weight: 500; white-space: nowrap; }
/* Ficha: en la compu el texto largo; en el celular una línea corta y compacta (pedido del dueño, 25/10). */
.puntos-corto, .puntos-punto { display: none; }
@media (max-width: 767px) {
  .puntos-linea--ficha { align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; font-size: 13px; line-height: 1.35; }
  .puntos-linea--ficha > .icono { width: 16px; height: 16px; margin-top: 0; }
  .puntos-linea--ficha .puntos-largo { display: none; }
  .puntos-linea--ficha .puntos-corto, .puntos-linea--ficha .puntos-punto { display: inline; }
}
.puntos-checkout { display: grid; gap: 10px; }
.puntos-checkout:empty { display: none; }
.puntos-caja { display: grid; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--amarillo-claro); font-size: 14px; }
.puntos-caja__saldo { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--marino); }
.puntos-caja__saldo .icono { width: 20px; height: 20px; color: #9a6a00; }
.puntos-caja .check { background: #fff; }
.puntos-caja__cuantos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.puntos-caja__cuantos label { font-weight: 500; color: var(--marino); }
.puntos-caja__cuantos input { width: 104px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--linea-2); border-radius: 10px; background: #fff; color: var(--texto); font-size: 16px; }
.puntos-caja__cuantos input:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.puntos-caja__nota { color: var(--texto-2); }
.check { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--linea-2); border-radius: 12px; background: #fff; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--azul); cursor: pointer; }
.check > span { display: grid; gap: 2px; min-width: 0; }
.check b { font-size: 15px; font-weight: 500; color: var(--marino); }
.check__ayuda { font-size: 13px; color: var(--texto-2); }
.check:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); box-shadow: inset 0 0 0 1px var(--azul); }
.check:has(input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 2px; }
.checkout__ingresar { margin-top: -4px; font-size: 14px; color: var(--texto-2); }
.checkout__ingresar a { font-weight: 500; }
.puntos-saldo { display: grid; gap: 6px; padding: 18px 20px; border-radius: 16px; background: var(--amarillo-claro); }
.puntos-saldo__numero { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--marino); }
.puntos-saldo__numero b { font-size: 34px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.puntos-saldo__numero span { font-size: 16px; font-weight: 500; }
.puntos-saldo p { font-size: 15px; color: var(--texto-2); }
.cuenta__ayuda { max-width: 72ch; font-size: 15px; color: var(--texto-2); }
.historial { display: grid; border-top: 1px solid var(--linea); }
.historial li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 12px 4px; border-bottom: 1px solid var(--linea); }
.historial__texto { font-size: 15px; color: var(--texto); }
.historial__fecha { font-size: 13px; color: var(--texto-2); }
.historial__n { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; color: var(--exito); white-space: nowrap; font-variant-numeric: tabular-nums; }
.historial__n--menos { color: var(--texto-2); }
.historial__n--espera { color: var(--texto-2); font-weight: 500; text-align: right; white-space: normal; }

/* ---------------------------------------------------------------- elegir sabor o tamaño */
.variantes { width: min(100% - 24px, 460px); max-height: min(90vh, 720px); padding: 0; border: 0; border-radius: 16px; box-shadow: var(--sombra); color: var(--texto); }
.variantes::backdrop { background: rgb(0 11 99 / 45%); }
.variantes__caja { display: flex; flex-direction: column; max-height: inherit; }
.variantes__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--linea); }
.variantes__cabeza h2 { font-size: 17px; line-height: 1.3; }
.variantes__cuerpo { display: grid; gap: 14px; padding: 16px 20px 20px; overflow: auto; }
.variantes__producto { display: flex; align-items: center; gap: 14px; }
.variantes__producto img { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--linea); border-radius: 10px; }
.variantes__producto .precio { font-size: 20px; }
.ficha__cantidad { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ficha__rotulo { font-size: 14px; font-weight: 500; color: var(--marino); }
.ficha__cantidad .cantidad { width: 150px; }
@media (max-width: 767px) {
  .variantes { width: 100%; max-width: none; margin: auto 0 0; border-radius: 16px 16px 0 0; }
  .variantes__cuerpo { padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* ================================================================ WordPress y WooCommerce
 * Lo que solo existe en la tienda real (avisos, formularios de WooCommerce y de Mercado Pago).
 * Regla del proyecto: nada sobre .form-row ni otras clases de formularios de WooCommerce;
 * los campos llevan la clase propia "campo".
 */
.admin-bar .cab { top: 32px; }
@media (max-width: 782px) { .admin-bar .cab { top: 46px; } }
.esperando { opacity: .6; pointer-events: none; }
.aviso__caja--error { background: var(--error); }

/* Avisos de WooCommerce (agregado, errores, cupones). */
.aviso-woo { display: grid; gap: 4px; margin: 12px 0; padding: 12px 16px; border-radius: 12px; background: var(--azul-claro); color: var(--marino); font-size: 15px; list-style: none; }
.aviso-woo--bien { background: var(--exito-claro); color: var(--exito); }
.aviso-woo--mal { background: var(--error-claro); color: var(--error); }
.aviso-woo a { font-weight: 500; }
.aviso-woo .button { display: inline-flex; font-weight: 500; }
/* Con botón: el texto y el botón al lado (o abajo, si no entran). */
div.aviso-woo:has(> .aviso-woo__texto) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.woocommerce > .woocommerce-notices-wrapper:not(:empty) { width: 100%; max-width: calc(1320px + 2 * var(--hueco)); margin-inline: auto; padding-inline: var(--hueco); }
.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }

/* Campos de WooCommerce dentro de .campo: sin asteriscos ni "(opcional)" (las aclaraciones van en la etiqueta). */
.campo abbr.required, .campo span.required, .campo .optional { display: none; }
.campo .woocommerce-input-wrapper { display: block; }
.campo .woocommerce-input-wrapper strong { display: block; padding: 10px 0; }
.campo.woocommerce-invalid input, .campo.woocommerce-invalid select { border-color: var(--error); }
.campo .checkout-inline-error-message { margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--error); }

/* Mostrar u ocultar la contraseña (lo agrega WooCommerce). */
.campo .password-input { position: relative; display: block; }
.campo .password-input input { padding-right: 48px; }
.show-password-input { position: absolute; top: 50%; right: 4px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--texto-2); transform: translateY(-50%); }
.show-password-input::before { content: ""; display: block; width: 22px; height: 22px; margin: auto; background: currentColor; -webkit-mask: var(--ojo) center / contain no-repeat; mask: var(--ojo) center / contain no-repeat; }
.show-password-input.display-password::before { -webkit-mask-image: var(--ojo-tachado); mask-image: var(--ojo-tachado); }
.show-password-input:hover { color: var(--marino); background: var(--gris); }
:root {
  --ojo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12s3.5-6.5 9.5-6.5S21.5 12 21.5 12s-3.5 6.5-9.5 6.5S2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --ojo-tachado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12s3.5-6.5 9.5-6.5S21.5 12 21.5 12s-3.5 6.5-9.5 6.5S2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 20 20 4'/%3E%3C/svg%3E");
}

/* El visor de fotos de un plugin de reseñas deja su HTML al pie (el tema no lo usa). */
.pswp:not(.pswp--open) { display: none !important; }

/* Medios de pago: la caja de Mercado Pago (formulario de la tarjeta) debajo de su opción. */
.opciones-pago > li { display: grid; gap: 10px; }
.opciones-pago .payment_box { padding: 4px 2px 8px; font-size: 14px; color: var(--texto-2); }
.opciones-pago .payment_box p { margin: 0 0 8px; }
.pagina-checkout .blockUI.blockOverlay { border-radius: 16px; }
.terminos-checkout { display: grid; gap: 8px; font-size: 14px; color: var(--texto-2); }
.terminos-checkout .woocommerce-privacy-policy-text p { margin: 0; }

/* Pedido recibido: datos de la transferencia y del pago. */
.gracias__pago { font-size: 15px; }
.gracias__pago h2 { font-size: 18px; }
.gracias__pago h3 { margin-top: 12px; font-size: 16px; color: var(--marino); }
.gracias__pago ul { display: grid; gap: 4px; margin: 6px 0 10px; }
.gracias__pago li { color: var(--texto-2); }
.gracias__pago li strong { color: var(--texto); font-weight: 600; }
.gracias__pago p { color: var(--texto-2); }

/* Mi cuenta: menú de las otras partes y sus formularios (los de WooCommerce). */
.cuenta__menu { margin-bottom: 18px; }
.pedido__estado--espera { background: var(--amarillo-claro); color: var(--marino); }
.pedido__estado--cancelado { background: var(--gris); color: var(--texto-2); }
.cuenta__menu a[aria-current="page"] { border-color: var(--marino); background: var(--marino); color: #fff; }
.cuenta__angosta { max-width: 480px; }
.cuenta__contenido > p { margin-bottom: 12px; color: var(--texto-2); }
.cuenta__contenido form:not(.campos, .cuenta__form) { display: grid; gap: 14px; max-width: 640px; }
.cuenta__contenido form:not(.campos, .cuenta__form) label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--marino); }
.cuenta__contenido form:not(.campos, .cuenta__form) input[type="text"], .cuenta__contenido form:not(.campos, .cuenta__form) input[type="email"], .cuenta__contenido form:not(.campos, .cuenta__form) input[type="tel"], .cuenta__contenido form:not(.campos, .cuenta__form) input[type="password"], .cuenta__contenido form:not(.campos, .cuenta__form) select, .cuenta__contenido form:not(.campos, .cuenta__form) textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--linea-2); border-radius: 10px; background: #fff; color: var(--texto); font-size: 16px; }
.cuenta__contenido form:not(.campos, .cuenta__form) select { padding-right: 38px; background: #fff var(--flechita) no-repeat right 10px center / 18px; -webkit-appearance: none; appearance: none; }
.cuenta__contenido form:not(.campos, .cuenta__form) fieldset { display: grid; gap: 14px; margin: 8px 0 0; padding: 16px; border: 1px solid var(--linea); border-radius: 12px; }
.cuenta__contenido form:not(.campos, .cuenta__form) legend { padding: 0 6px; font-weight: 600; color: var(--marino); }
.cuenta__contenido form:not(.campos, .cuenta__form) button[type="submit"] { justify-self: start; min-height: 44px; padding: 8px 18px; border: 0; border-radius: 10px; background: var(--azul); color: #fff; font-size: 15px; font-weight: 500; }
.cuenta__contenido form:not(.campos, .cuenta__form) button[type="submit"]:hover { background: var(--azul-2); }
.cuenta__contenido em { font-size: 13px; color: var(--texto-2); }
.cuenta__contenido .woocommerce-Addresses { display: grid; gap: 14px; }
.cuenta__contenido .woocommerce-Address { padding: 18px; border: 1px solid var(--linea); border-radius: 16px; }
.cuenta__contenido .woocommerce-Address-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cuenta__contenido .woocommerce-Address-title h2 { font-size: 17px; }
.cuenta__contenido address { font-style: normal; color: var(--texto-2); line-height: 1.6; }
.cuenta__contenido h2 { margin: 20px 0 10px; font-size: 20px; }
.cuenta__contenido table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cuenta__contenido th, .cuenta__contenido td { padding: 10px 8px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.cuenta__contenido th { color: var(--marino); font-weight: 600; }
.cuenta__contenido mark { background: var(--amarillo-claro); color: var(--marino); padding: 0 4px; border-radius: 4px; }
.cuenta__contenido .button { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--linea-2); border-radius: 10px; color: var(--marino); font-size: 14px; font-weight: 500; text-decoration: none; }
/* Mis datos y Mi dirección: con los campos del tema, como el checkout. */
.cuenta__form { display: grid; gap: 18px; max-width: 720px; }
.cuenta__form h2 { margin: 0; font-size: 20px; }
.cuenta__form > p, .cuenta__form .woocommerce-address-fields > p { margin: 0; }
.cuenta__form .woocommerce-address-fields { display: grid; gap: 18px; }
.cuenta__clave { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 16px 18px 18px; border: 1px solid var(--linea); border-radius: 16px; }
.cuenta__clave legend { padding: 0 6px; font-weight: 600; color: var(--marino); }
.cuenta__direccion { max-width: 720px; }
.cuenta__direccion h2 { margin: 0; }
.cuenta__direccion address { color: var(--texto); }
.cuenta__direccion p { margin: 0; }

/* Páginas comunes y notas del blog. */
.texto__contenido { max-width: 75ch; }
.texto__contenido > * + * { margin-top: 12px; }
.texto__contenido ul, .texto__contenido ol { padding-left: 1.4em; list-style: revert; color: var(--texto-2); }
.texto__contenido img { border-radius: 12px; }
.notas { display: grid; gap: 18px; max-width: 880px; }
.nota { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--linea); }
.nota__foto img { width: 100%; max-width: 320px; border-radius: 12px; }
.nota__titulo { font-size: 20px; }
.nota__titulo a { color: inherit; text-decoration: none; }
.nota__fecha { font-size: 13px; color: var(--texto-2); }
.nota__portada { margin-bottom: 20px; }
.nota__portada img { border-radius: 16px; }
@media (min-width: 768px) { .nota { grid-template-columns: 240px minmax(0, 1fr); } .nota--sin-foto { grid-template-columns: minmax(0, 1fr); } }

/* La 404 entra en 360 px (el buscador se achica en lugar de empujar la página). */
.error404 { grid-template-columns: minmax(0, 1fr); }
.error404 > * { max-width: 100%; }

/* Checkout: lo que WooCommerce muestra suelto (ingresar para ver un pedido, verificar el email, avisos). */
.tipo-checkout .woocommerce > :not(.contenedor):not(script):not(style):not(:empty) { width: calc(100% - 2 * var(--hueco)); max-width: 1320px; margin: 16px auto; }
.tipo-checkout .woocommerce > form.cuenta__angosta { max-width: 480px; }
.gracias__cabeza--chica { padding: 20px 24px; }
.gracias__cabeza--chica h1 { font-size: 22px; }

/* Un pedido de Mi cuenta (con el diseño del pedido recibido). */
.pedido-ver { display: grid; gap: 16px; }
.pedido-ver__cabeza { display: grid; gap: 6px; }
.pedido-ver__cabeza h2 { font-size: 22px; }
.pedido-ver .caja h3 { font-size: 18px; }
.resumen__items--entero { max-height: none; overflow: visible; }
.pedido-ver__novedades { display: grid; gap: 12px; font-size: 15px; }
.pedido-ver__novedades li { display: grid; gap: 2px; }
.pedido-ver__novedades p { margin: 0; color: var(--texto); }

/* Checkout en la compu: si el resumen es más alto que la ventana, se pega por abajo (el JS pone su alto en
   --alto-lado), así "Confirmar pedido" siempre se ve. Si entra, queda pegado arriba como siempre. */
@media (min-width: 1024px) {
  .checkout__lado { top: min(calc(var(--alto-cab) + 16px), calc(100vh - var(--alto-lado, 0px) - 16px)); }
}

/* Buscador: aviso cuando se buscó sin alguna palabra. */
.buscador__nota { padding: 10px 14px 4px; font-size: 13px; color: var(--texto-2); }