/* =====================================================================
   Tienda pública (Fase 3). Diseño base de todas las tiendas: opción "B · Catálogo directo"
   (elegida por el constructor el 12/10/2026): portada chica, categorías en pastillas y los productos enseguida.
   Usa las piezas de base.css (botones, avisos, íconos). Los nombres de las clases son fijos y en castellano:
   los cambios a medida de una tienda (/tiendas/<slug>/estilos.css) los pisan sin tocar este archivo.
   El color de la tienda llega en --color (y --color-oscuro / --color-suave), que arma tienda.js.
   ===================================================================== */
body.tienda { background: var(--fondo-tienda, #fff); }   /* color de fondo elegido en el Editor (solo tonos claros) */
.tienda .contenedor { max-width: 1240px; }

/* Aviso de vista previa (solo lo ve el equipo de la tienda mientras no está publicada) */
.tienda-vista-previa { margin: 0; border-radius: 0; justify-content: center; text-align: left; }
.tienda-vista-previa a { color: inherit; font-weight: 700; white-space: nowrap; }

/* Cabecera: logo, nombre, buscador (en la compu) y carrito */
.tienda-cabecera { background: #fff; box-shadow: 0 1px 0 var(--borde); position: sticky; top: 0; z-index: 20; }
.tienda-cabecera .contenedor { display: flex; align-items: center; gap: 12px; min-height: 68px; }
.tienda-marca { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: var(--texto); text-decoration: none; }
.tienda-logo { width: 44px; height: 44px; border-radius: 50%; flex: none; overflow: hidden; display: grid; place-items: center;
  background: var(--color-suave); color: var(--color-oscuro); font-weight: 800; font-size: 16px; }
.tienda-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.tienda-nombre { font-weight: 700; font-size: 18px; line-height: 1.2; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.boton-carrito { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px;
  border-radius: 99px; background: var(--color-suave); color: var(--color-oscuro); font-weight: 600; font-size: 16px;
  text-decoration: none; flex: none; }
.boton-carrito .ico { width: 22px; height: 22px; }
.boton-carrito b { background: var(--color); color: #fff; border-radius: 99px; font-size: 14px; min-width: 24px; height: 24px;
  display: grid; place-items: center; padding: 0 7px; }
@media (max-width: 399px) {   /* celulares angostos: que entre el nombre de la tienda entero */
  .tienda-cabecera .contenedor { gap: 8px; }
  .tienda-marca { gap: 8px; }
  .tienda-logo { width: 36px; height: 36px; font-size: 14px; }
  .tienda-nombre { font-size: 16px; }
  .boton-carrito { padding: 0 10px; gap: 4px; }
}
@media (max-width: 479px) {   /* celulares: el carrito con el dibujo y el número (el nombre de la tienda primero; desde el 15/10 también está la campanita) */
  .boton-carrito-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* Buscador: en la compu dentro de la cabecera; en el celular, debajo */
.tienda-buscar { display: flex; align-items: center; gap: 8px; background: var(--gris-suave); border-radius: 99px;
  padding: 0 18px; min-height: 52px; color: var(--texto-suave); }   /* sin botón "Buscar": se busca con Enter o con la tecla del teclado del celular (15/10/2026) */
.tienda-buscar input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--texto);
  min-height: 46px; outline: none; }
.tienda-buscar input::placeholder { color: #6b7280; }
.tienda-buscar:focus-within { box-shadow: 0 0 0 2px var(--color); background: #fff; }
.tienda-cabecera .tienda-buscar { flex: 1; max-width: 480px; }
.tienda-buscar-celu { padding: 0 16px 12px; }
.tienda-cabecera .tienda-buscar.en-cabecera { display: none; }
@media (min-width: 760px) {
  .tienda-cabecera .tienda-buscar.en-cabecera { display: flex; }
  .tienda-buscar-celu { display: none; }
}

/* Portada chica (en la Fase 3B el dueño la cambia con el Editor) */
.tienda-portada { border-radius: var(--radio-grande); margin: 16px 0 14px; padding: 22px 20px; min-height: 104px;
  display: flex; flex-direction: column; justify-content: flex-end; color: #fff;
  background: linear-gradient(120deg, var(--color-oscuro), var(--color)); }
.tienda-portada h1 { font-size: 24px; margin: 0; }
.tienda-portada p { margin: 4px 0 0; font-size: 17px; opacity: .95; }
.tienda-portada a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }   /* "Ver toda la tienda" en el link de varios productos (17/10/2026) */

/* Categorías en pastillas (se deslizan de costado si no entran) */
.tienda-categorias { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.tienda-categorias::-webkit-scrollbar { display: none; }
.tienda-categorias a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 99px;
  background: var(--gris-suave); color: var(--texto); text-decoration: none; font-size: 16px; font-weight: 500; white-space: nowrap; }
.tienda-categorias a:hover { background: var(--gris-suave-hover); }
.tienda-categorias a.activa { background: var(--color); color: #fff; }
@media (min-width: 760px) { .tienda-categorias { flex-wrap: wrap; overflow: visible; } }

/* Cantidad y "Ordenar" */
.tienda-orden { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 14px; flex-wrap: wrap; }
.tienda-cantidad { font-size: 16px; color: var(--texto-suave); }
.tienda-cantidad b { color: var(--texto); font-weight: 600; }
.tienda-orden label { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: var(--texto-suave); }
.tienda-orden select { font: inherit; font-size: 16px; color: var(--texto); background: var(--gris-suave); border: 0; border-radius: 99px;
  min-height: 44px; padding: 0 14px; cursor: pointer; }
.tienda-busqueda { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin: 10px 0 4px; font-size: 17px; }
.tienda-busqueda b { overflow-wrap: anywhere; }

/* Grilla de productos: 2 en el celular, 3 en tablet, 4 en la compu */
.tienda-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
@media (min-width: 700px) { .tienda-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tienda-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 18px; } }
/* Mientras llegan los primeros productos, la grilla ocupa la pantalla: así el pie no aparece arriba y después baja de golpe
   (Google lo medía como "la página salta": rendimiento 76 en celular, cierre de la Fase 3, 17/10/2026) */
.tienda-grilla[aria-busy="true"]:empty { min-height: 100vh; }

.producto { display: flex; flex-direction: column; color: var(--texto); text-decoration: none; min-width: 0; }
.producto-foto { position: relative; aspect-ratio: 1; background: #fff; border-radius: var(--radio); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--borde); display: grid; place-items: center; }
.producto-foto img { width: 100%; height: 100%; object-fit: contain; }
.producto-foto .sin-foto { color: #9ca3af; }
.producto-foto .sin-foto .ico { width: 40px; height: 40px; }
.producto:hover .producto-foto { box-shadow: inset 0 0 0 2px var(--color); }
.producto-nombre { font-size: 16px; font-weight: 500; margin: 8px 0 2px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.producto-precio { font-size: 19px; font-weight: 700; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.producto-antes { font-size: 15px; color: var(--texto-suave); text-decoration: line-through; font-weight: 400; }
@media (max-width: 359px) { .producto-precio { font-size: 17px; } }   /* celulares más angostos: un precio de 10 cifras entra entero en la tarjeta (13/10/2026) */
.producto-transferencia { font-size: 15px; color: var(--ok); font-weight: 600; }
.producto.agotado .producto-foto img { opacity: .45; }
.producto.agotado .producto-precio { color: var(--texto-suave); }
.etiqueta-oferta, .etiqueta-agotado { position: absolute; top: 8px; left: 8px; font-size: 14px; font-weight: 700; border-radius: 99px;
  padding: 3px 10px; background: var(--error); color: #fff; }
.etiqueta-agotado { background: #374151; }

.tienda-ver-mas { display: flex; justify-content: center; margin: 26px 0 8px; }
.tienda-vacia { text-align: center; padding: 40px 16px; }
.tienda-vacia .circulo { background: var(--gris-suave); color: var(--texto-suave); }
.tienda-vacia p { color: var(--texto-suave); margin: 0 0 16px; }
/* "Cargando el producto / tu carrito / tu pedido…" ocupa la pantalla: el pie no salta al llegar los datos (17/10/2026) */
:is(#producto-cargando, #carrito-cargando, #pedido-cargando):not([hidden]) { min-height: 100vh; }

/* Redes, pie legal y botón de WhatsApp */
/* Pie (Editor, paso 7, 19/10/2026, forma "A · En columnas" elegida por el constructor): la tienda (nombre, texto final y redes), contacto,
   pagos y entregas, e información (lo obligatorio). Compu: 4 columnas; tablet: 2; celular: una debajo de la otra, todo a la vista.
   El color lo elige la tienda (los mismos de las partes); la letra va sola blanca o negra para que se lea. */
.tienda-pie { margin-top: 34px; background: #1f2937; color: #fff; font-size: 16px; padding: 34px 0 100px; }
.tienda-pie .contenedor { display: grid; gap: 24px; }
.pie-columnas { display: grid; gap: 28px; }
@media (min-width: 600px) { .pie-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 32px; } }
@media (min-width: 1000px) { .pie-columnas { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); } }
.pie-col { min-width: 0; }
.pie-col h2 { font-size: 17px; line-height: 1.3; margin: 0 0 12px; color: inherit; }
.pie-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pie-col li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; overflow-wrap: anywhere; }
.pie-col li .ico { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.pie-col li b { font-weight: 700; }
.pie-nombre { display: block; font-size: 21px; line-height: 1.25; color: inherit; overflow-wrap: anywhere; }
.pie-texto { margin: 10px 0 0; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.pie-redes { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 18px; }
.pie-redes .red-circulo { min-width: 0; gap: 6px; }
.pie-redes .red-logo { width: 46px; height: 46px; }
.pie-redes .red-logo .ico { width: 24px; height: 24px; }
.pie-redes .red-nombre { font-size: 14px; }
.tienda-pie a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.tienda-pie a.red-circulo { text-decoration: none; }
.tienda-pie nav { display: grid; justify-items: start; gap: 2px; }
.tienda-pie nav a { display: inline-flex; align-items: center; min-height: 40px; }
.pie-final { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding-top: 18px; border-top: 1px solid currentColor; font-size: 14px; }
.pie-final small { font-size: 14px; }
/* colores del pie: mismos nombres que el fondo de las partes ("fondo-propio" trae el color en --fondo-parte; si es oscuro, también "fondo-fuerte") */
.tienda-pie.fondo-ninguno { background: var(--fondo-tienda, #fff); color: var(--texto); border-top: 1px solid var(--borde); }
.tienda-pie.fondo-gris { background: var(--gris-suave); color: var(--texto); }
.tienda-pie.fondo-clarito { background: var(--color-suave); color: var(--texto); }
.tienda-pie.fondo-fuerte { background: var(--color); color: #fff; }
.tienda-pie.fondo-propio { background: var(--fondo-parte); color: var(--texto); }
.tienda-pie.fondo-fuerte.fondo-propio { color: #fff; }
.tienda-pie.fondo-fuerte .red-circulo:focus-visible .red-logo { outline-color: #fff; }
.tienda-pie .pie-final { border-top-color: rgba(127, 127, 127, .45); }

/* Barra de anuncios (Editor, paso 7): un solo mensaje, siempre a la vista (20/10/2026, constructor: "puse 2 y se ve 1, que sea uno solo"). */
.tienda-anuncio { background: var(--color); color: #fff; font-size: 15px; font-weight: 600; }
.tienda-anuncio .contenedor { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 42px; padding-top: 2px; padding-bottom: 2px; }
.tienda-anuncio .contenedor > .anuncio-msj { margin: 0; padding: 6px 0; text-align: center; line-height: 1.35; overflow-wrap: anywhere; }
.tienda-anuncio.anuncio-vacio .contenedor > .anuncio-msj { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0; padding: 4px 14px; border: 2px dashed currentColor; border-radius: 99px; text-align: center; }
.anuncio-vacio .anuncio-msj .ico { width: 20px; height: 20px; flex: none; }
.tienda-anuncio.fondo-ninguno { background: var(--fondo-tienda, #fff); color: var(--texto); box-shadow: inset 0 -1px 0 var(--borde); }
.tienda-anuncio.fondo-gris { background: var(--gris-suave); color: var(--texto); }
.tienda-anuncio.fondo-clarito { background: var(--color-suave); color: var(--color-oscuro); }
.tienda-anuncio.fondo-fuerte { background: var(--color); color: #fff; }
.tienda-anuncio.fondo-propio { background: var(--fondo-parte); color: var(--texto); }
.tienda-anuncio.fondo-fuerte.fondo-propio { color: #fff; }
@media (max-width: 399px) { .tienda-anuncio { font-size: 14px; } }

/* Logo de la cabecera (Editor, paso 7): tamaño (chico, mediano o grande) y forma. "Entero" muestra el logo como se subió, sin recortarlo
   en un círculo (17/10/2026, constructor: un logo que no es cuadrado quedaba cortado). Sin el nombre al lado, el nombre lo lee el lector de pantalla.
   20/10/2026 (constructor: "fijate el logo qué mal"): el logo entero se salía de la barra y tapaba la portada (con una foto cuadrada o parada,
   el alto "100 %" no se respetaba y quedaba del tamaño de la foto). Ahora el alto y el ancho máximo van fijos en cada tamaño (--logo-alto y
   --logo-ancho): cualquier foto entra entera adentro de ese lugar, sin recortarse ni deformarse. */
.tienda-cabecera.no-fija { position: static; }
.tienda-cabecera { --logo-alto: 42px; --logo-ancho: 120px; }
.tienda-cabecera.logo-chico { --logo-alto: 34px; --logo-ancho: 96px; }
.tienda-cabecera.logo-grande { --logo-alto: 52px; --logo-ancho: 150px; }
.tienda-cabecera:not(.sin-nombre) { --logo-ancho: 88px; }
.tienda-cabecera:is(.logo-chico, .logo-mediano, .logo-grande) .tienda-logo { width: var(--logo-alto); height: var(--logo-alto); }
.tienda-cabecera.logo-circulo .tienda-logo img { width: var(--logo-alto); height: var(--logo-alto); object-fit: contain; }   /* en el círculo, entero aunque sea alto o ancho */
.tienda-cabecera.logo-entero .tienda-logo { width: auto !important; max-width: var(--logo-ancho); border-radius: 0; background: none; overflow: hidden; display: flex; align-items: center; }
.tienda-cabecera.logo-entero .tienda-logo img { display: block; width: auto; height: var(--logo-alto); max-height: var(--logo-alto); max-width: var(--logo-ancho); object-fit: contain; object-position: left center; background: none; }
.tienda-cabecera.sin-nombre .tienda-nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 399px) {   /* celulares angostos: el logo no le quita lugar a la campanita y al carrito */
  .tienda-cabecera { --logo-ancho: 104px; }
  .tienda-cabecera.logo-chico { --logo-ancho: 84px; }
  .tienda-cabecera.logo-grande { --logo-ancho: 124px; }
  .tienda-cabecera:not(.sin-nombre) { --logo-ancho: 80px; }
}
@media (max-width: 359px) {
  .tienda-cabecera { --logo-alto: 36px; }
  .tienda-cabecera.logo-chico { --logo-alto: 32px; }
  .tienda-cabecera.logo-grande { --logo-alto: 44px; --logo-ancho: 104px; }
  .tienda-cabecera:not(.sin-nombre) { --logo-ancho: 72px; }
}
@media (min-width: 760px) {
  .tienda-cabecera { --logo-alto: 52px; --logo-ancho: 200px; }
  .tienda-cabecera.logo-chico { --logo-alto: 40px; --logo-ancho: 150px; }
  .tienda-cabecera.logo-grande { --logo-alto: 72px; --logo-ancho: 236px; }
  .tienda-cabecera:not(.sin-nombre) { --logo-ancho: 120px; }
  .tienda-cabecera.logo-grande .contenedor { min-height: 92px; }
}
/* el botón de WhatsApp con lo que elige la tienda (hasta 25 letras): nunca más ancho que la pantalla; un texto largo va en 2 renglones */
#whatsapp-texto { min-width: 0; overflow-wrap: anywhere; line-height: 1.15; }
/* Botón de WhatsApp "A" (elegido por el constructor el 12/10/2026): el verde de WhatsApp, más vivo, flotando con una sombra suave.
   Verde #198845 en lugar del original #25D366: la letra blanca se lee bien (4,5 a 1; el #1fa855 de antes daba 3,1, cierre de la Fase 3, 17/10/2026). */
.boton-whatsapp { position: fixed; right: 16px; bottom: 16px; z-index: 25; display: inline-flex; align-items: center; gap: 8px;
  min-height: 54px; padding: 0 22px 0 16px; border-radius: 99px; background: #198845; color: #fff; font-weight: 700; font-size: 18px;
  text-decoration: none; box-shadow: 0 8px 24px rgba(31, 168, 85, .35), 0 2px 6px rgba(0, 0, 0, .12); transition: background .15s, transform .15s; }
.boton-whatsapp:hover { background: #157a3d; transform: translateY(-1px); }
.boton-whatsapp { max-width: calc(100vw - 32px); }   /* paso 7: con el texto que elige la tienda, nunca más ancho que la pantalla */
@media (max-width: 479px) { .boton-whatsapp { max-width: min(78vw, 300px); font-size: 17px; padding-top: 6px; padding-bottom: 6px; border-radius: 28px; } }
.boton-whatsapp .ico { width: 26px; height: 26px; }

/* Tienda que no está disponible y páginas que llegan en los próximos pasos */
.tienda-no-disponible { max-width: 520px; margin: 0 auto; padding: 70px 16px; text-align: center; }
.tienda-no-disponible .circulo { background: var(--gris-suave); color: var(--texto-suave); }
.tienda-no-disponible p { color: var(--texto-suave); }

/* Marca de foco: la misma suave de la plataforma y solo con el teclado (al tocar con el dedo o el mouse no queda un borde negro) */
:is(.boton-whatsapp, .boton-carrito, .tienda-marca, .tienda-categorias a, .producto, .tienda-pie a):focus { outline: none; }
:is(.boton-whatsapp, .boton-carrito, .tienda-marca, .tienda-categorias a, .tienda-pie a):focus-visible { outline: 3px solid #a9c6f7; outline-offset: 2px; }
.producto:focus-visible .producto-foto { box-shadow: inset 0 0 0 3px var(--color); }

/* =====================================================================
   Página de producto: opción "A · Clásica" (elegida por el constructor el 12/10/2026).
   Foto grande con miniaturas abajo; en la compu, fotos a la izquierda y datos a la derecha; la descripción abajo.
   ===================================================================== */
.tienda-volver { display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 10px; min-height: 44px; font-size: 16px; font-weight: 600;
  color: var(--color-oscuro); text-decoration: none; }
.tienda-volver .ico { transform: scaleX(-1); }
.tienda-volver { max-width: 100%; }
.tienda-volver span { min-width: 0; overflow-wrap: anywhere; }   /* nombre de categoría larguísimo: pasa de renglón (13/10/2026) */
.producto-pagina { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }   /* minmax: la fila de miniaturas no empuja el ancho */
@media (min-width: 900px) { .producto-pagina { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; } }
.producto-foto-grande { position: relative; aspect-ratio: 1; background: #fff; border-radius: var(--radio-grande); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--borde); display: grid; place-items: center; touch-action: pan-y; }
.producto-foto-grande img { width: 100%; height: 100%; object-fit: contain; }
.producto-foto-ampliar { width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }   /* tocar la foto la abre en grande */
.producto-foto-ampliar:focus-visible { outline: 3px solid #a9c6f7; outline-offset: -3px; border-radius: var(--radio-grande); }
.producto-foto-grande .sin-foto { color: #9ca3af; }
.producto-foto-grande .sin-foto .ico { width: 56px; height: 56px; }
.producto-foto-numero { position: absolute; right: 12px; top: 12px; background: rgba(17, 24, 39, .62); color: #fff; font-size: 14px;
  border-radius: 99px; padding: 3px 10px; }
.producto-foto-flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); color: var(--texto); cursor: pointer; display: grid; place-items: center; }
.producto-foto-flecha.anterior { left: 10px; }
.producto-foto-flecha.anterior .ico { transform: scaleX(-1); }
.producto-foto-flecha.siguiente { right: 10px; }
.producto-miniaturas { display: flex; gap: 10px; margin-top: 10px; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.producto-miniaturas button { flex: none; width: 68px; height: 68px; border: 0; padding: 0; border-radius: var(--radio); overflow: hidden;
  background: #fff; box-shadow: inset 0 0 0 1px var(--borde); cursor: pointer; }
.producto-miniaturas button.activa { box-shadow: inset 0 0 0 3px var(--color); }
.producto-miniaturas img { width: 100%; height: 100%; object-fit: contain; }

.producto-titulo { font-size: 26px; margin: 0 0 8px; font-weight: 650; overflow-wrap: anywhere; }
.producto-precio-grande { font-size: 30px; font-weight: 750; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.producto-precio-grande .producto-antes { font-size: 18px; }
.producto-precio-grande .producto-desde { font-size: 17px; font-weight: 500; color: var(--texto-suave); }
.producto-precio-grande .etiqueta-oferta { position: static; font-size: 15px; }
.producto-precio-unidad { font-size: 17px; font-weight: 500; color: var(--texto-suave); }
.producto-transferencia-grande { color: var(--ok); font-weight: 600; font-size: 17px; margin: 2px 0 0; }

.producto-opcion { margin: 20px 0 0; }
.producto-opcion-nombre { display: block; font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.producto-opcion-nombre span { font-weight: 400; color: var(--texto-suave); }
.producto-opcion.falta .producto-opcion-nombre span { color: var(--error); font-weight: 600; }   /* falta elegir: "elegí uno" en rojo al lado (13/10/2026) */
.producto-valores { display: flex; flex-wrap: wrap; gap: 8px; }
.producto-valores button { min-height: 48px; min-width: 56px; max-width: 100%; overflow-wrap: anywhere; text-align: center; justify-content: center; padding: 6px 16px; border-radius: 99px; border: 0; background: var(--gris-suave);
  font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; color: var(--texto); display: inline-flex; align-items: center; gap: 8px; }
.producto-valores button:hover { background: var(--gris-suave-hover); }
.producto-valores button.elegido { background: var(--color); color: #fff; }
.producto-valores button.sin-stock { text-decoration: line-through; color: #6b7280;   /* 17/10/2026: antes #8b929c, casi no se leía (2,8 a 1) */ cursor: not-allowed; background: var(--gris-suave); }
.producto-valores button.sin-stock:not([data-nunca]) { cursor: pointer; }   /* solo choca con lo elegido: se puede tocar */
.producto-valores .punto-color { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.producto-cantidad { display: inline-flex; align-items: center; background: var(--gris-suave); border-radius: 99px; }
.producto-cantidad button { width: 48px; height: 48px; border: 0; background: none; font: inherit; font-size: 24px; line-height: 1; cursor: pointer;
  color: var(--color-oscuro); border-radius: 50%; }
.producto-cantidad button:disabled { color: #b8bec7; cursor: default; }
.producto-cantidad output { min-width: 64px; text-align: center; font-weight: 600; font-size: 18px; }
.producto-stock { color: var(--texto-suave); font-size: 16px; margin: 10px 0 0; }
.producto-stock.pocos { color: var(--atencion); font-weight: 600; }
.producto-opcion-nombre .producto-ultimo { color: var(--atencion); font-weight: 600; }   /* "¡Último disponible!" */
.producto-acciones { display: grid; gap: 10px; margin: 22px 0 0; }
.producto-acciones .boton { min-height: 56px; font-size: 18px; }
.producto-acciones .boton-secundario { min-height: 52px; gap: 8px; }
.producto-falta { margin: 12px 0 0; }
.producto-agregado { margin: 12px 0 0; }
.producto-agregado a { color: inherit; font-weight: 700; }
.producto-extras { display: flex; gap: 4px 18px; flex-wrap: wrap; align-items: center; margin: 14px 0 0; }
.producto-extras .boton-link { display: inline-flex; align-items: center; gap: 6px; }
.producto-extras .denunciar { color: var(--texto-suave); font-size: 16px; min-height: 44px; display: inline-flex; align-items: center; }
.compartir-opciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
.producto-descripcion { margin: 30px 0 0; max-width: 760px; }
.producto-descripcion h2, .producto-relacionados h2 { font-size: 22px; }
.producto-descripcion p { margin: 0 0 12px; }
.producto-descripcion ul { margin: 0 0 12px; padding-left: 22px; }
.producto-relacionados { margin: 36px 0 0; }

/* Páginas de información de la tienda (Cómo comprar, Cambios y devoluciones, Quiénes somos) */
.tienda-pagina { max-width: 760px; padding-bottom: 20px; }
.tienda-pagina h1 { font-size: 28px; margin: 4px 0 16px; }
.tienda-pagina p { margin: 0 0 14px; }
.tienda-pagina ul { margin: 0 0 14px; padding-left: 22px; }

/* =====================================================================
   Carrito: opción "B · Resumen al costado" (elegida por el constructor el 13/10/2026).
   En la compu, los productos a la izquierda y el recuadro "Resumen" a la derecha (acompaña al bajar).
   En el celular, el total y el botón quedan siempre a la vista en una barra abajo.
   ===================================================================== */
.carrito-pagina { padding-bottom: 30px; }
.carrito-pagina h1 { font-size: 26px; margin: 4px 0 14px; }
.carrito-pagina > .aviso { margin: 0 0 14px; }
.carrito-renglon { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 8px 12px; padding: 16px 0; border-bottom: 1px solid var(--borde); }
.carrito-renglon:first-child { padding-top: 4px; }
.carrito-foto { grid-row: span 2; width: 76px; height: 76px; border-radius: var(--radio); overflow: hidden; background: #fff;
  box-shadow: inset 0 0 0 1px var(--borde); display: grid; place-items: center; color: #9ca3af; }
.carrito-foto img { width: 100%; height: 100%; object-fit: contain; }
.carrito-nombre { font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--texto); text-decoration: none; overflow-wrap: anywhere; }
.carrito-nombre:hover { text-decoration: underline; text-underline-offset: 3px; }
.carrito-detalle { color: var(--texto-suave); font-size: 16px; margin-top: 2px; overflow-wrap: anywhere; }
.carrito-precio { white-space: nowrap; }
.carrito-tope { color: var(--atencion); font-size: 16px; font-weight: 600; margin-top: 2px; }
.carrito-quitar { grid-column: 3; grid-row: 1; align-self: start; }   /* el tacho, arriba a la derecha (14/10/2026) */
.carrito-renglon > .carrito-abajo { grid-column: 2 / -1; }
.carrito-abajo { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.carrito-abajo .producto-cantidad button { width: 44px; height: 44px; }
.carrito-abajo .producto-cantidad output { min-width: 56px; }
.carrito-subtotal { font-size: 19px; font-weight: 700; margin-left: auto; text-align: right; }
/* renglón en una sola fila (foto, nombre, cantidad y subtotal) solo si la columna de productos es ancha:
   depende del lugar de la columna, no de la pantalla (en 900 a 1100 el resumen le quita lugar; 13/10/2026) */
.carrito-izquierda { container-type: inline-size; min-width: 0; }
@container (min-width: 620px) {
  .carrito-renglon { grid-template-columns: 92px minmax(0, 1fr) auto auto; align-items: center; column-gap: 20px; }
  .carrito-renglon > .carrito-abajo { grid-column: 3; grid-row: 1; }
  .carrito-quitar { grid-column: 4; align-self: center; }
  .carrito-foto { width: 92px; height: 92px; grid-row: auto; }
  .carrito-abajo { gap: 28px; flex-wrap: nowrap; }
  .carrito-subtotal { min-width: 120px; }
}
.carrito-datos { margin-top: 26px; }
.carrito-entrega { display: grid; gap: 8px; }
.carrito-resumen { background: #fff; border-radius: var(--radio-grande); box-shadow: var(--sombra), inset 0 0 0 1px var(--borde); padding: 20px; margin-top: 20px; }
.carrito-resumen h2 { font-size: 20px; margin: 0 0 8px; }
.resumen-linea { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 10px; color: var(--texto-suave); padding: 4px 0; }
.resumen-linea span:last-child { text-align: right; margin-left: auto; }
#resumen-subtotal, .carrito-total b, .carrito-barra b, .carrito-subtotal { white-space: nowrap; }   /* un precio nunca se parte: si no entra, baja entero */
.carrito-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 18px; margin: 10px 0 4px;
  padding-top: 10px; border-top: 1px solid var(--borde); }
.carrito-total b { font-size: clamp(20px, 7vw, 26px); margin-left: auto; }
.carrito-nota { color: var(--texto-suave); font-size: 16px; margin: 0 0 16px; }
.carrito-falla { margin: 0 0 12px; }
.carrito-boton { min-height: 56px; font-size: 18px; }
@media (min-width: 900px) {
  .carrito-columnas { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; align-items: start; }
  .carrito-resumen { position: sticky; top: 90px; margin-top: 0; }
  .carrito-barra { display: none !important; }
}
/* celular: total y botón siempre a la vista abajo (el botón del recuadro no se repite) */
.carrito-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.carrito-barra[hidden] { display: none; }
.carrito-barra div { flex: none; line-height: 1.2; }
.carrito-barra small { display: block; color: var(--texto-suave); font-size: 15px; }
.carrito-barra b { font-size: 20px; }
.carrito-barra .boton { flex: 1 1 150px; min-height: 54px; padding-left: 12px; padding-right: 12px; }
@media (max-width: 899px) {
  .carrito-resumen .carrito-boton { display: none; }
  body.con-barra .tienda-pie { padding-bottom: 120px; }
}
.carrito-hecho { text-align: center; max-width: 560px; margin: 10px auto 0; padding: 20px 0; display: grid; justify-items: center; gap: 4px; }
.carrito-hecho .circulo { background: var(--ok-suave); color: var(--ok); }
.carrito-hecho h2 { font-size: 24px; margin: 6px 0 4px; }
.carrito-hecho p { margin: 0 0 14px; }
.carrito-ultimo { margin: 22px 0 0 !important; }
.carrito-ultimo a { font-weight: 700; color: var(--color-oscuro); }
#carrito-cambios ul { margin: 6px 0 0; padding-left: 20px; }

/* ---------- Entregas en el carrito (paso 4): cada opción con su precio a la derecha ---------- */
.carrito-opcion > span { justify-content: space-between; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.carrito-opcion-texto { flex: 1 1 150px; min-width: 0; overflow-wrap: anywhere; }
.carrito-opcion-texto small { display: block; font-weight: 400; color: var(--texto-suave); font-size: 15px; margin-top: 2px; }
.carrito-opcion-precio { white-space: nowrap; flex: none; margin-left: auto; }   /* un precio largo baja entero */
#entrega-opciones.falta .opcion > span, #pago-opciones.falta .opcion > span { box-shadow: inset 0 0 0 1.5px #f4a49b; background: var(--error-suave); }
.carrito-tilde { margin: 4px 0 14px; }
.carrito-gratis { margin: 6px 0 0; padding: 8px 12px; border-radius: var(--radio); background: var(--atencion-suave); color: var(--atencion); font-weight: 600; font-size: 16px; }
.carrito-gratis.logrado { background: var(--ok-suave); color: var(--ok); }
.carrito-hecho .boton-link { min-height: 44px; }

/* ---------- "Mi pedido" ---------- */
.mi-pedido { max-width: 980px; padding-bottom: 30px; }
.mi-pedido h1 { font-size: 26px; margin: 4px 0 2px; }
.mi-pedido-fecha { color: var(--texto-suave); margin: 0 0 14px; overflow-wrap: anywhere; }
.mi-pedido-columnas { display: grid; gap: 16px; align-items: stretch; }   /* los dos recuadros, de la misma altura */
@media (min-width: 900px) { .mi-pedido-columnas { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.mi-pedido-caja { box-shadow: var(--sombra), inset 0 0 0 1px var(--borde); }
.mi-pedido-caja h2 { font-size: 20px; margin: 0 0 10px; }
.mi-pedido-caja h2:not(:first-child) { margin-top: 18px; }
.mi-pedido-caja p { margin: 0 0 14px; overflow-wrap: anywhere; }
.mi-pedido-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.mi-pedido-item span { flex: 1 1 170px; min-width: 0; overflow-wrap: anywhere; }   /* con un precio enorme, el precio baja al renglón de abajo */
.mi-pedido-item b { white-space: nowrap; margin-left: auto; }
.mi-pedido .resumen-linea { margin-top: 4px; }

/* ---------- Pagar por transferencia en "Mi pedido" (forma "A · Paso a paso", 14/10/2026) ---------- */
@media (min-width: 900px) {
  .mi-pedido-columnas.con-pago { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  .mi-pedido-columnas.con-pago > .mi-pedido-pagar { grid-row: span 2; }
}
.mi-pedido-pagar { display: grid; gap: 18px; }
.paso-pago { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
.paso-pago-num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--color); color: #fff; font-weight: 800; font-size: 18px; }
.paso-pago h2 { font-size: 20px; margin: 6px 0 8px !important; }
.paso-pago.hecho .paso-pago-num { background: var(--ok); }
.paso-pago.hecho .paso-pago-num .ico { width: 22px; height: 22px; }
.paso-pago.espera .paso-pago-num { background: var(--gris-suave, #e9edf2); color: var(--texto-suave); }
.paso-pago .ayuda { margin: 6px 0 0; }
.subir-comprobante { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 18px 14px; border-radius: var(--radio);
  background: var(--gris-suave, #f1f3f6); border: 2px dashed #c9d1dc; color: var(--texto-suave); }
.subir-comprobante > .ico { width: 30px; height: 30px; }
.subir-comprobante p { margin: 0 !important; }
.subir-comprobante.arrastrando { border-color: var(--color); background: var(--color-suave); }
/* en el celular, lo de cada paso usa todo el ancho (el número queda al lado del título): entran el total, el alias y el CBU enteros */
@media (max-width: 480px) {
  .paso-pago > div > :not(h2) { margin-left: -52px; }
  .mi-pedido-pagar { padding-left: 14px; padding-right: 14px; }
  .paso-pago h2 { min-height: 40px; display: flex; align-items: center; margin-top: 0 !important; }
}

/* Campanita de avisos del comprador (15/10/2026): en la cabecera, al lado del carrito */
.campana-hueco { display: contents; }
@media (max-width: 399px) { .tienda-cabecera .campana { width: 46px; height: 46px; } }
/* el aviso al momento queda arriba de la barra del carrito cuando está */
body.con-barra .aviso-momento { bottom: calc(92px + env(safe-area-inset-bottom)); }
/* ...y arriba del botón flotante de WhatsApp, para no taparlo */
body:has(#whatsapp:not([hidden])) .aviso-momento { bottom: calc(88px + env(safe-area-inset-bottom)); }
@media (max-width: 359px) {   /* los más angostos: logo, campanita y carrito un poco más chicos para que entre el nombre de la tienda */
  .tienda-logo { width: 32px; height: 32px; font-size: 14px; }
  .tienda-nombre { font-size: 15px; }
  .tienda-cabecera .campana { width: 44px; height: 44px; }
  .boton-carrito { padding: 0 8px; }
}
.tienda-cabecera .tienda-buscar { min-width: 0; }   /* el buscador de la cabecera puede achicarse (antes quedaba fijo y empujaba el carrito afuera) */

/* Cabecera (15/10/2026, pedido del constructor): campanita y carrito juntos a la derecha; en la compu el buscador va centrado */
.cabecera-derecha { display: flex; align-items: center; gap: 12px; flex: none; }
@media (max-width: 399px) { .cabecera-derecha { gap: 8px; } }
@media (min-width: 760px) {
  /* los dos costados siempre iguales (lo justo para campanita + carrito con "999+"): el buscador queda en el medio y es el que se achica */
  .tienda-cabecera .contenedor { display: grid; grid-template-columns: minmax(236px, 1fr) minmax(0, 480px) minmax(236px, 1fr); gap: 24px; }
  .tienda-cabecera .tienda-buscar.en-cabecera { width: 100%; max-width: none; }
  .cabecera-derecha { justify-self: end; }
}

/* ---------- Botón de arrepentimiento y Denunciar (paso 8, 15/10/2026): formularios de una columna con piezas de la guía ---------- */
.tienda .contenedor.tienda-formulario { max-width: 652px; padding-bottom: 30px; }   /* 620 de formulario + los costados; le gana a ".tienda .contenedor" (1240) */
.tienda-formulario-intro { margin: 0 0 18px !important; }
.tienda-formulario .aviso { margin: 0 0 18px; }
.tienda-formulario-pedidos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tienda-formulario-pedidos a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 16px; border-radius: 99px; background: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.tienda-formulario-motivos { display: grid; gap: 8px; }
.tienda-formulario-motivos .opcion-guia { border-radius: var(--radio); justify-content: flex-start; }
.tienda-formulario-motivos.falta .opcion-guia { box-shadow: inset 0 0 0 1.5px #f4a49b; }
.tienda-formulario-producto { display: flex; gap: 12px; align-items: center; background: var(--tarjeta); border-radius: var(--radio); padding: 10px; margin: 0 0 18px; box-shadow: var(--sombra), inset 0 0 0 1px var(--borde); }
.tienda-formulario-producto img, .tienda-formulario-producto .sin-foto { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; background: var(--gris-suave); }
.tienda-formulario-producto div { min-width: 0; }
.tienda-formulario-producto b { display: block; overflow-wrap: anywhere; }
.tienda-formulario-producto small { color: var(--texto-suave); font-size: 15px; }
.tienda-formulario-listo { padding-top: 24px; }
.tienda-formulario-listo .circulo { margin: 0 auto 12px; }
.tienda-formulario-listo:focus { outline: none; }
.tienda-formulario-codigo { padding: 6px 16px; margin: 0 0 14px; text-align: left; }
.tienda-formulario-listo .aviso { text-align: left; margin: 0 0 16px; }
.mi-pedido-arrep { margin-top: 16px; }
.mi-pedido-arrep .dato-cuenta { padding-bottom: 0; }
.mi-pedido-arrep-botones { margin-top: 4px; }
@media (min-width: 700px) { .mi-pedido-arrep #arrep-ofrecer .boton-secundario { width: auto; } .mi-pedido-arrep-botones { max-width: 460px; } }
.mi-pedido-arrep.arriba { margin: 12px 0 16px; }   /* con un arrepentimiento: justo debajo del aviso de arriba (16/10/2026) */
.mi-pedido-arrep #arrep-defensa { margin-top: 4px; }

/* ---------- Tema elegido en el Editor de mi tienda (Fase 3B, paso 2, 17/10/2026) ----------
   tienda.js pone en <body> solo clases de una lista cerrada. Lo legal, el carrito y el pago se ven igual con cualquier tema. */
/* color secundario ("de detalle"): las etiquetas de oferta (después, también la barra de aviso y el banner) */
.etiqueta-oferta { background: var(--detalle, var(--error)); }
/* bordes rectos: las esquinas bien marcadas (las pastillas y los recuadros); lo redondo de verdad (logo, puntos de color) sigue redondo */
body.tienda.bordes-rectos { --radio: 4px; --radio-grande: 6px; }
body.tienda.bordes-rectos :is(.boton, .boton-secundario, .boton-peligro, .boton-carrito, .boton-carrito b, .tienda-buscar, .tienda-categorias a,
  .tienda-orden select, .etiqueta-oferta, .etiqueta-agotado, .producto-valores button, .producto-cantidad, .boton-whatsapp, .tienda-formulario-pedidos a,
  .opcion-guia, .opcion-chica, .chip, input, select, textarea) { border-radius: 6px; }
/* Tus productos (Editor, paso 8, 20/10/2026): cuántos por fila (4 en la compu y de a 2 en el celular = como siempre).
   La tablet (700 a 999) lleva uno menos que la compu. tienda.js pone las clases de una lista cerrada. */
@media (max-width: 699.98px) { body.celu-1 .tienda-grilla { grid-template-columns: minmax(0, 1fr); } }   /* de a 1: la foto bien grande (.98: con zoom el ancho puede quedar en 699,5 y no tiene que caer entre dos reglas) */
@media (min-width: 700px) { body.por-fila-3 .tienda-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.por-fila-5 .tienda-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { body.por-fila-3 .tienda-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.por-fila-5 .tienda-grilla { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 14px; } }
/* dentro del Editor, en "Compu" (la tienda de la derecha mide unos 850): justo los que eligió para la compu, no uno menos */
@media (min-width: 700px) and (max-width: 999.98px) {
  body.en-editor .tienda-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.en-editor.por-fila-3 .tienda-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.en-editor.por-fila-5 .tienda-grilla { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 10px; }
}
/* forma de las fotos: ninguna se corta (entra entera; si es de otra forma, queda con un borde blanco) */
body.foto-parada :is(.producto-foto, .producto-foto-grande) { aspect-ratio: 3 / 4; }
body.foto-acostada :is(.producto-foto, .producto-foto-grande) { aspect-ratio: 4 / 3; }
/* precio con transferencia y "Consultar por WhatsApp": se pueden sacar */
body.sin-precio-transferencia :is(.producto-transferencia, #producto-transferencia) { display: none !important; }
body.sin-consultar #consultar { display: none !important; }
/* letras (Editor, "Tu marca", 17/10/2026): una para los textos y otra para los títulos; tienda.js las pone de una lista cerrada */
body.tienda, body.tienda :is(button, input, select, textarea) { font-family: var(--letra-textos, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); }
body.tienda :is(.tienda-nombre, h1, h2, .tienda-pie b) { font-family: var(--letra-titulos, inherit); }
/* Manuscrita es chiquita: sus títulos van un poco más grandes para que se lean igual */
body.titulos-manuscrita .tienda-nombre { font-size: 23px; }
body.titulos-manuscrita .tienda-portada h1 { font-size: 32px; }
body.titulos-manuscrita main h1 { font-size: 34px; }
body.titulos-manuscrita main h2 { font-size: 27px; }
@media (max-width: 359px) { body.titulos-manuscrita .tienda-nombre { font-size: 20px; } }

/* ---------- Página de inicio por partes (Editor, paso 4, 18/10/2026) ----------
   Los textos y los productos destacados van solo en el inicio (no en una categoría, una búsqueda ni en "Compartir varios"). */
#principal:not(.en-inicio) .parte-extra, #principal.es-seleccion .parte-extra { display: none; }
.parte-extra { margin: 22px 0 26px; }
.parte-extra h2 { font-size: 22px; margin: 0 0 12px; overflow-wrap: anywhere; }
.parte-texto .parte-texto-cuerpo { font-size: 17px; line-height: 1.55; max-width: 70ch; overflow-wrap: anywhere; }
.parte-texto .parte-texto-cuerpo > :first-child { margin-top: 0; }
.parte-texto .parte-texto-cuerpo > :last-child { margin-bottom: 0; }
:is(.parte-destacados, .parte-ofertas) .tienda-grilla[aria-busy="true"]:empty { min-height: 220px; }
.parte-productos { scroll-margin-top: 16px; }
.parte-extra, .tienda-portada { scroll-margin-top: 16px; }
/* en el Editor: la parte que se está cambiando se marca un momento */
.parte-marcada { animation: parte-marcada 1.8s ease-out; border-radius: var(--radio-grande); }
@keyframes parte-marcada { 0%, 40% { box-shadow: 0 0 0 4px #a9c6f7; } 100% { box-shadow: 0 0 0 4px rgba(169, 198, 247, 0); } }
@media (min-width: 760px) { .parte-extra h2 { font-size: 26px; } }/* fondo de cada parte (forma A, elegida por el constructor el 18/10/2026): gris clarito, color clarito o color fuerte con letra blanca.
   La letra es la de Tu marca. Sobre el color fuerte, cada producto destacado va en su tarjeta blanca para que precio y nombre se lean. */
.parte-extra.con-fondo { padding: 22px 20px 24px; border-radius: var(--radio-grande); }
.parte-extra.fondo-gris { background: var(--gris-suave); }
.parte-extra.fondo-clarito { background: var(--color-suave); }
.parte-extra.fondo-fuerte { background: var(--color); color: #fff; }
.parte-extra.fondo-fuerte h2 { color: #fff; }
.parte-extra.fondo-fuerte .producto { background: #fff; border-radius: var(--radio); padding: 8px 8px 12px; }
.parte-extra.fondo-fuerte .producto:hover .producto-foto, .parte-extra.fondo-fuerte .producto:focus-visible .producto-foto { box-shadow: inset 0 0 0 2px var(--color-oscuro); }
.parte-extra.fondo-fuerte .producto:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 599px) { .parte-extra.con-fondo { padding: 18px 14px 20px; margin-left: -4px; margin-right: -4px; } }
/* ---------- Portada con fotos que pasan solas (Editor, paso 5, 18/10/2026) ----------
   Solo en el inicio: en una categoría, una búsqueda o "Compartir varios" la portada vuelve a ser la de color con el título.
   Celular: foto cuadrada (o la foto aparte para el celular); compu: a lo ancho, 3 veces más ancha que alta.
   Lo más importante de cada foto queda a la vista (--x, --y en la compu; --xc, --yc en el celular). */
.portada-boton-solo .portada-boton { margin-top: 14px; }
#principal.es-seleccion .portada-boton-solo { display: none; }
#principal:not(.en-inicio) .portada-carrusel, #principal.es-seleccion .portada-carrusel { display: none; }
#principal.en-inicio:not(.es-seleccion) .tienda-portada.con-fotos { position: relative; padding: 0; min-height: 0; overflow: hidden; background: var(--gris-suave); }
/* el título de la tienda sigue estando para Google y los lectores de pantalla, pero se ve el de cada foto */
#principal.en-inicio:not(.es-seleccion) .tienda-portada.con-fotos > :is(#portada-titulo, #portada-texto) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.portada-pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.portada-pista::-webkit-scrollbar { display: none; }
.portada-foto { position: relative; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1 / 1; display: flex; align-items: flex-end; color: #fff;
  background: linear-gradient(120deg, var(--color-oscuro), var(--color)); }
.portada-foto picture, .portada-foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.portada-foto img { object-fit: cover; object-position: var(--xc, 50%) var(--yc, 50%); }
/* sombra suave detrás del texto; si la foto es clara donde va el texto, más fuerte (así se lee siempre) */
.portada-foto:not(.sin-foto)::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .58), rgba(0, 0, 0, .18) 55%, rgba(0, 0, 0, 0) 85%); }
.portada-foto.clara:not(.sin-foto)::after { background: linear-gradient(to top, rgba(0, 0, 0, .74), rgba(0, 0, 0, .38) 60%, rgba(0, 0, 0, .12)); }
.portada-foto-texto { position: relative; z-index: 1; width: 100%; max-width: 820px; padding: 22px 20px 50px; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.portada-foto.sin-foto .portada-foto-texto { text-shadow: none; }
.portada-foto-titulo { margin: 0; font-family: var(--letra-titulos, inherit); font-size: 26px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.portada-foto-frase { margin: 6px 0 0; font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.tienda-portada a.portada-boton { margin-top: 14px; max-width: 100%; text-shadow: none; overflow-wrap: anywhere; text-decoration: none; }   /* no como el link subrayado de "Compartir varios" */
/* sobre el color de la tienda, el botón va blanco (si no, se perdería en el fondo del mismo color) */
:is(.portada-foto.sin-foto, .portada-boton-solo) .portada-boton { background: #fff; color: var(--color-oscuro); }
:is(.portada-foto.sin-foto, .portada-boton-solo) .portada-boton:hover { background: #eef3fd; }
body.titulos-manuscrita .portada-foto-titulo { font-size: 32px; }
/* puntos (uno por foto) y flechas (solo en la compu, con mouse) */
.portada-puntos { position: absolute; left: 0; right: 0; bottom: 4px; z-index: 2; display: flex; justify-content: center; gap: 2px; }
.portada-puntos button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.portada-puntos button::before { content: ""; width: 12px; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); transition: width .2s; }
.portada-puntos button[aria-current="true"]::before { width: 28px; background: #fff; }
.portada-puntos button:focus-visible { outline: 3px solid #fff; outline-offset: -6px; border-radius: 12px; }
.portada-flecha { position: absolute; top: 50%; z-index: 2; display: none; place-items: center; width: 48px; height: 48px; margin-top: -24px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .9); color: var(--texto); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); cursor: pointer; }
.portada-flecha:hover { background: #fff; }
.portada-flecha:focus-visible { outline: 3px solid var(--color); outline-offset: 2px; }
.portada-flecha.antes { left: 12px; }
.portada-flecha.despues { right: 12px; }
.portada-flecha .ico { width: 22px; height: 22px; }
@media (min-width: 760px) {
  .portada-foto { aspect-ratio: 3 / 1; min-height: 280px; }
  .portada-foto img { object-position: var(--x, 50%) var(--y, 50%); }
  .portada-foto-texto { padding: 30px 76px 54px; }
  .portada-foto-titulo { font-size: 36px; }
  .portada-foto-frase { font-size: 19px; }
  body.titulos-manuscrita .portada-foto-titulo { font-size: 44px; }
}
@media (min-width: 760px) and (hover: hover) { .portada-flecha { display: grid; } }
/* celular: el botón de la portada entra en 2 renglones aunque tenga 25 letras anchas (18/10/2026, revisor a 320) */
@media (max-width: 479px) { .tienda-portada a.portada-boton { font-size: 15px; padding-left: 14px; padding-right: 14px; } .portada-foto-texto { padding-left: 16px; padding-right: 16px; } }

/* ---------- Beneficios y Nuestras marcas (Editor, paso 6, 18/10/2026) ----------
   Beneficios: en la compu todos en una fila; en el celular, de a 2 (si son impares, el último va solo y centrado).
   Cada uno con su dibujito en un círculo del color de la tienda; el fondo de la parte, como en "Texto". */
.beneficios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
@media (min-width: 760px) { .beneficios { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 759px) { .beneficio:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.beneficio { display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; text-align: center; }
.beneficio-ico { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 6px; border-radius: 50%; background: var(--color-suave); color: var(--color-oscuro); }
.beneficio-ico .ico { width: 30px; height: 30px; }
.beneficio-titulo { font-family: var(--letra-titulos, inherit); font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.beneficio-frase { font-size: 15px; line-height: 1.35; color: var(--texto-suave); overflow-wrap: anywhere; }
.parte-beneficios.fondo-clarito .beneficio-ico { background: #fff; }
.parte-beneficios.fondo-fuerte .beneficio-ico { background: #fff; color: var(--color); }
.parte-beneficios.fondo-fuerte .beneficio-frase { color: rgba(255, 255, 255, .92); }
@media (min-width: 760px) { .beneficio-titulo { font-size: 18px; } .beneficio-frase { font-size: 16px; } }
/* Nuestras marcas: todos los logos del mismo tamaño, en recuadros blancos, pasando solos de costado (sin barra para deslizar a la vista) */
.marcas-cinta { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; padding: 2px 0; }
.marcas-cinta::-webkit-scrollbar { display: none; }
.marcas-pista { display: flex; gap: 14px; width: max-content; }
.marcas-cinta.quieta .marcas-pista { width: auto; flex-wrap: wrap; justify-content: center; }
.marcas-cinta.quieta .marca.es-copia { display: none; }
.marca { flex: none; display: grid; place-items: center; width: 168px; height: 96px; padding: 12px 16px; background: #fff; border-radius: var(--radio);
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .1); }
.marca img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 599px) { .marca { width: 128px; height: 74px; padding: 8px 12px; } .marcas-pista { gap: 10px; } }
/* celulares muy angostos (menos de 360): de a 2 la frase quedaba en 3 renglones apretados; va uno debajo del otro, con el dibujito al costado */
@media (max-width: 359px) {
  .beneficios { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .beneficio { grid-template-columns: 52px minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 12px; row-gap: 2px; text-align: left; }
  .beneficio-ico { grid-row: span 2; width: 52px; height: 52px; margin: 0; }
  .beneficio:last-child:nth-child(odd) { grid-column: auto; }
}
/* Banners con foto (Editor, paso 6, 18/10/2026): 1, 2 o 3 por fila en la compu; en el celular, uno debajo del otro.
   La forma de cada foto es la misma que muestra el Editor en "Así se ve" (FORMA_BANNER en editor.js); lo más importante, con --x y --y. */
.banners { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.banner { position: relative; display: block; flex: 1 1 100%; min-width: 0; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--radio-grande);
  background: var(--gris-suave); color: #fff; text-decoration: none; }
.banners.por-1 .banner { aspect-ratio: 2 / 1; }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--x, 50%) var(--y, 50%); transition: transform .35s ease; }
.banner:hover img { transform: scale(1.03); }
.banner:focus-visible { outline: 3px solid var(--color); outline-offset: 3px; }
.banner-texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .62));
  font-family: var(--letra-titulos, inherit); font-size: 19px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
@media (prefers-reduced-motion: reduce) { .banner img { transition: none; } .banner:hover img { transform: none; } }
@media (min-width: 760px) {
  .banners.por-1 .banner { aspect-ratio: 3 / 1; }
  .banners.por-2 .banner { flex: 0 1 calc((100% - 14px) / 2); }
  .banners.por-3 .banner { flex: 0 1 calc((100% - 28px) / 3); aspect-ratio: 1 / 1; }
  .banners:not(.por-3) .banner-texto { font-size: 22px; padding: 48px 20px 18px; }
}
/* Editor, forma B (18/10/2026, "tocar la tienda"): solo dentro del Editor en la compu. Al pasar el mouse, la parte se marca con un borde azul
   y su nombre ("Banners con foto · Tocá para cambiar"); entre parte y parte, "+ Agregar una parte acá". Nunca se ve en la tienda de verdad. */
body.editor-tocar #principal > [data-parte], body.editor-tocar :is(.tienda-cabecera, #anuncio, #pie) { position: relative; cursor: pointer; }
body.editor-tocar .boton-whatsapp { cursor: pointer; }
body.editor-tocar #principal > [data-parte]:hover, body.editor-tocar :is(.tienda-cabecera, #anuncio, #pie):hover { outline: 3px solid #2f6fea; outline-offset: 3px; border-radius: var(--radio-grande); }
body.editor-tocar .boton-whatsapp:hover { outline: 3px solid #2f6fea; outline-offset: 3px; }
body.editor-tocar :is(.tienda-cabecera, #anuncio, #pie):hover { outline-offset: -3px; border-radius: 0; }   /* a lo ancho de la pantalla: el borde va por dentro */
body.editor-tocar #anuncio:hover::before { top: 50% !important; transform: translateY(-50%); }
body.editor-tocar #principal > [data-parte]:hover::before, body.editor-tocar :is(.tienda-cabecera, #anuncio, #pie):hover::before { content: attr(data-etiqueta); position: absolute; top: 8px; left: 8px; z-index: 20;
  max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 12px; border-radius: 99px; background: #2f6fea; color: #fff;
  font: 600 15px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); pointer-events: none; }
.agregar-aca { display: none; }
body.editor-tocar #principal.en-inicio:not(.es-seleccion) .agregar-aca { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 6px 0; padding: 8px 12px;
  border: 2px dashed #a9c6f7; border-radius: 99px; background: #f3f7fe; color: #1d4ed8; font: 600 15px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer; }
body.editor-tocar #principal.en-inicio .agregar-aca:hover, body.editor-tocar .agregar-aca:focus-visible { border-style: solid; border-color: #2f6fea; background: #e6efff; }
body.editor-tocar .agregar-aca .ico { width: 18px; height: 18px; }
/* sobre cada parte, al pasar el mouse (19/10/2026, constructor: "me paro arriba… no aparece una x para borrarlo"): Subir, Bajar, Ocultar y el tacho.
   Botones con texto (el tacho, solo el ícono, como en todo el panel); el Editor pide confirmar al quitar y ofrece "Deshacer". */
.parte-herramientas { display: none; }
body.editor-tocar #principal.en-inicio > [data-parte]:hover > .parte-herramientas { display: flex; position: absolute; top: 8px; right: 8px; z-index: 21; gap: 6px; }
.parte-herramientas button { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 6px 12px; border: 0; border-radius: 99px; background: #fff; color: #1d4ed8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25); font: 600 15px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer; }
.parte-herramientas button:hover, .parte-herramientas button:focus-visible { background: #e6efff; outline: none; }
.parte-herramientas .es-quitar { width: 40px; padding: 0; justify-content: center; background: #fdecec; color: #b42318; }
.parte-herramientas .es-quitar:hover { background: #fbd5d5; }
.parte-herramientas .ico { width: 18px; height: 18px; }
.ico-arriba { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E"); }
.ico-abajo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E"); }
/* el nombre (arriba a la izquierda) no se pisa con los botones (arriba a la derecha); en lo angosto (vista de celular) los botones van abajo */
body.editor-tocar #principal > [data-parte]:hover::before { max-width: max(150px, calc(100% - 340px)); }
@media (max-width: 599px) {
  body.editor-tocar #principal > [data-parte]:hover::before { max-width: calc(100% - 16px); }
  body.editor-tocar #principal.en-inicio > [data-parte]:hover > .parte-herramientas { top: auto; bottom: 8px; }
}
/* el tacho chico de cada cosa de adentro (una foto de la portada, un banner, un beneficio, un logo), al pasar el mouse por ella (19/10/2026) */
.item-quitar { display: none; }
body.editor-tocar #principal.en-inicio :is(.portada-foto, .banner, .beneficio, .marca) { position: relative; }
body.editor-tocar #principal.en-inicio :is(.portada-foto, .banner, .beneficio, .marca):hover > .item-quitar { display: grid; place-items: center; position: absolute; right: 6px; bottom: 6px; z-index: 22;
  width: 38px; height: 38px; border-radius: 50%; background: #fdecec; color: #b42318; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); cursor: pointer; }
body.editor-tocar .item-quitar:hover { background: #fbd5d5; }
body.editor-tocar .item-quitar .ico { width: 18px; height: 18px; }
body.editor-tocar .portada-foto:hover > .item-quitar { right: 12px; bottom: 12px; }
/* los textos se tocan para cambiarlos (19/10/2026): al pasar el mouse, un borde punteado y el cursor de escribir */
body.editor-tocar #principal.en-inicio :is(.portada-foto-titulo, .portada-foto-frase, #portada-titulo, #portada-texto, .banner-texto, .beneficio-titulo, .beneficio-frase,
  .parte-texto-cuerpo, #principal > [data-parte] > h2):hover { outline: 2px dashed currentColor; outline-offset: 3px; border-radius: 4px; cursor: text; }
/* modelo de base (19/10/2026): en la vista del Editor (forma B), una parte vacía se ve como un recuadro punteado que dice qué poner; nunca en la tienda */
.parte-extra.parte-vacia { display: grid; justify-items: center; gap: 6px; padding: 22px 18px; border: 2px dashed #a9c6f7; border-radius: var(--radio-grande);
  background: #f3f7fe; color: #1d4ed8; text-align: center; font: 600 17px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.parte-vacia > .ico { width: 30px; height: 30px; }
.parte-vacia small { max-width: 46ch; color: #475569; font-size: 15px; font-weight: 400; }
.vacia-fotos { display: flex; gap: 10px; width: 100%; margin-bottom: 6px; }
.vacia-fotos span { flex: 1 1 0; display: grid; place-items: center; aspect-ratio: 3 / 2; max-height: 140px; border: 2px dashed #a9c6f7; border-radius: 8px; background: #fff; }
.vacia-fotos .ico { width: 26px; height: 26px; color: #93b4e8; }
/* fotos directo sobre la tienda (19/10/2026): "Cambiar foto" en el medio de la foto al pasar el mouse; soltar una foto encima la marca en azul */
.foto-poner { display: none; }
body.editor-tocar #principal.en-inicio :is(.portada-foto, .banner, #portada, .parte-banner.parte-vacia, .parte-marcas):hover > .foto-poner {
  display: inline-flex; align-items: center; gap: 8px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 22;
  padding: 10px 18px; border-radius: 99px; background: #fff; color: #1d4ed8; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); white-space: nowrap; cursor: pointer;
  font: 600 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body.editor-tocar .foto-poner:hover { background: #e6efff; }
body.editor-tocar .foto-poner .ico { width: 20px; height: 20px; }
body.editor-tocar #principal.en-inicio :is(.parte-banner.parte-vacia, .parte-marcas) { position: relative; }
body.editor-tocar .soltar-aca { outline: 4px solid #2f6fea !important; outline-offset: 2px; box-shadow: 0 0 0 9999px rgba(47, 111, 234, .08) inset; }
/* escribir directo sobre la tienda: lo que se escribe, marcado; debajo, una pista corta */
body.editor-tocar .escribiendo-aca { outline: 3px solid #2f6fea !important; outline-offset: 3px; border-radius: 4px; cursor: text; caret-color: currentColor; }
.pista-escribir { position: absolute; z-index: 30; padding: 6px 12px; border-radius: 99px; background: #1d4ed8; color: #fff; pointer-events: none;
  font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); white-space: nowrap; }
/* ---------- El celular se acomoda solo (19/10/2026, constructor: "todo lo que se configure en la PC tiene que adaptarse solo y quedar bien en el celular") ---------- */
.deslizar-pista { display: none; }
@media (max-width: 759px) {
  /* portada y banners: con textos largos la letra se achica un poco, así se sigue viendo la foto */
  .portada-foto-titulo.largo { font-size: 22px; }
  .portada-foto-titulo.muy-largo { font-size: 19px; }
  body.titulos-manuscrita .portada-foto-titulo.largo { font-size: 27px; }
  body.titulos-manuscrita .portada-foto-titulo.muy-largo { font-size: 23px; }
  .portada-foto-frase.largo { font-size: 15px; }
  .portada-foto-frase.muy-largo { font-size: 14px; line-height: 1.35; }
  .banner-texto.largo { font-size: 17px; }
  .banner-texto.muy-largo { font-size: 15px; }
}
@media (max-width: 699px) {
  /* destacados y ofertas: en una fila que se desliza con el dedo (asoma el siguiente), en vez de una lista larga hacia abajo */
  #principal :is(.parte-destacados, .parte-ofertas) .tienda-grilla { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 44%;
    gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
  body.celu-1 #principal :is(.parte-destacados, .parte-ofertas) .tienda-grilla { grid-auto-columns: 78%; }
  #principal :is(.parte-destacados, .parte-ofertas) .producto { scroll-snap-align: start; }
  :is(.parte-destacados, .parte-ofertas) .deslizar-pista:not([hidden]) { display: flex; align-items: center; gap: 4px; margin: -6px 0 10px; color: var(--texto-suave); font-size: 15px; }
  .parte-extra.fondo-fuerte .deslizar-pista { color: rgba(255, 255, 255, .9) !important; }
  .deslizar-pista .ico { width: 16px; height: 16px; }
}
/* ---------- Categorías con foto (paso 6, tanda 2, forma A elegida por el constructor el 19/10/2026) ----------
   Una fila de círculos con la foto y el nombre de cada categoría. Si entran, centrados; si no, la fila se desliza (con el dedo, el trackpad o la barra). */
.cats-fila { display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 4px 2px 8px; scrollbar-width: thin; }
.cats-fila > .cat:first-child { margin-left: auto; }
.cats-fila > .cat:last-child { margin-right: auto; }
.cat { flex: none; display: grid; justify-items: center; align-content: start; gap: 8px; width: 132px; scroll-snap-align: start; color: inherit; text-decoration: none; }
.cat-foto { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; background: var(--color-suave);
  box-shadow: 0 0 0 1px rgba(17, 24, 39, .08); transition: box-shadow .15s; }
.cat-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-iniciales { color: var(--color-oscuro); font-size: 34px; font-weight: 800; }
.cat-nombre { max-width: 100%; text-align: center; font-size: 16px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
.cat:hover .cat-foto, .cat:focus-visible .cat-foto { box-shadow: 0 0 0 3px var(--color); }
.cat:focus-visible { outline: none; }
.cat:focus-visible .cat-nombre { text-decoration: underline; }
.parte-extra.fondo-fuerte .cat-foto { box-shadow: 0 0 0 3px #fff; }
.parte-extra.fondo-fuerte .cat-iniciales { color: var(--color); }
.parte-extra.fondo-fuerte .cat:hover .cat-foto { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--color-oscuro); }
.parte-categorias h2 { text-align: center; }
@media (max-width: 759px) {
  .cats-fila { gap: 4px; }
  .cat { width: 130px; }   /* un nombre largo entra en 2 o 3 renglones sin quedar apretado */
  .cat-foto { width: 96px; height: 96px; }
  .cat-iniciales { font-size: 26px; }
  .cat-nombre { font-size: 15px; }
  .parte-categorias .deslizar-pista:not([hidden]) { display: flex; justify-content: center; align-items: center; gap: 4px; margin: -6px 0 10px; color: var(--texto-suave); font-size: 15px; }
  .parte-categorias .deslizar-pista .ico { width: 16px; height: 16px; }
}
/* en el Editor: tacho chico y "Cambiar" sobre cada círculo */
body.editor-tocar #principal.en-inicio :is(.cat, .cat-foto) { position: relative; }
body.editor-tocar #principal.en-inicio .cat:hover > .item-quitar { display: grid; place-items: center; position: absolute; right: 0; top: 78px; z-index: 22;
  width: 38px; height: 38px; border-radius: 50%; background: #fdecec; color: #b42318; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); cursor: pointer; }
body.editor-tocar #principal.en-inicio .cat-foto:hover > .foto-poner { display: inline-flex; align-items: center; gap: 4px; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); z-index: 21; padding: 6px 10px; border-radius: 99px; background: #fff; color: #1d4ed8; box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  white-space: nowrap; cursor: pointer; font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body.editor-tocar #principal.en-inicio .cat-foto .foto-poner .ico { width: 16px; height: 16px; }
body.editor-tocar #principal.en-inicio .video-frase:hover { outline: 2px dashed currentColor; outline-offset: 3px; border-radius: 4px; cursor: text; }

/* ---------- Video de YouTube (paso 6, tanda 2, forma A): título arriba y el video a lo ancho (en la compu, hasta 900 de ancho y centrado) ---------- */
.parte-video h2, .video-frase { text-align: center; }
.video-frase { margin: -4px auto 14px; max-width: 60ch; font-size: 17px; color: var(--texto-suave); overflow-wrap: anywhere; }
.parte-extra.fondo-fuerte .video-frase { color: rgba(255, 255, 255, .92); }
.video-marco { position: relative; max-width: 900px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--radio-grande); overflow: hidden; background: #111827; }
.video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #111827; cursor: pointer; }
.video-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-boton { position: absolute; left: 50%; top: 50%; width: 76px; height: 54px; transform: translate(-50%, -50%); border-radius: 16px; background: rgba(17, 24, 39, .82);
  transition: background .15s, transform .15s; }
.video-boton::after { content: ""; position: absolute; left: 31px; top: 15px; border-left: 22px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.video-play:hover .video-boton, .video-play:focus-visible .video-boton { background: #dc2626; transform: translate(-50%, -50%) scale(1.06); }
.video-play:focus-visible { outline: 4px solid var(--color); outline-offset: -4px; }
@media (max-width: 759px) { .video-marco { border-radius: var(--radio); } .video-boton { width: 64px; height: 46px; } .video-boton::after { left: 26px; top: 12px; border-left-width: 18px; border-top-width: 11px; border-bottom-width: 11px; } }
/* fondo de la parte con un tono listo o un color a elección (19/10/2026, forma C): el color llega en --fondo-parte; si es oscuro, también lleva
   "fondo-fuerte" (letra blanca y productos en su tarjeta blanca) */
.parte-extra.fondo-propio { background: var(--fondo-parte); }

/* ---------- Opiniones de clientes (paso 6, tanda 3, forma A elegida por el constructor el 19/10/2026) ----------
   Tarjetas blancas con estrellas, lo que dijo, el nombre y de dónde es. Compu: 3 por fila; celular: una fila que se desliza con el dedo. */
.parte-opiniones h2 { text-align: center; }
.opiniones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.opinion { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px 18px 16px; background: #fff; color: var(--texto); border-radius: var(--radio-grande);
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .1); }
.opinion-estrellas { display: flex; gap: 2px; color: #d97706; }
.opinion-estrellas .ico { width: 22px; height: 22px; }
.opinion-estrellas .apagada { color: #d1d5db; }
.opinion-texto { margin: 0; flex: 1 1 auto; font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; }
.opinion-texto::before { content: "“"; }
.opinion-texto::after { content: "”"; }
.opinion-quien { display: flex; align-items: center; gap: 10px; min-width: 0; }
.opinion-inicial { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--color-suave); color: var(--color-oscuro); font-weight: 800; font-size: 16px; }
.opinion-datos { display: grid; min-width: 0; line-height: 1.3; }
.opinion-nombre { font-size: 16px; overflow-wrap: anywhere; }
.opinion-lugar { font-size: 15px; color: #4b5563; overflow-wrap: anywhere; }
@media (max-width: 759px) {
  .opiniones { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
  .opinion { scroll-snap-align: start; }
  .parte-opiniones .deslizar-pista:not([hidden]) { display: flex; justify-content: center; align-items: center; gap: 4px; margin: -6px 0 10px; color: var(--texto-suave); font-size: 15px; }
  .parte-opiniones .deslizar-pista .ico { width: 16px; height: 16px; }
  .parte-extra.fondo-fuerte.parte-opiniones .deslizar-pista { color: rgba(255, 255, 255, .9); }
  .opinion-texto { font-size: 16px; }
}
@media (min-width: 760px) and (max-width: 999px) { .opiniones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Horarios y dirección (forma A): cada local en una tarjeta blanca; dónde está con "Cómo llegar" y, al lado, los horarios ---------- */
.locales { display: grid; gap: 14px; }
.local { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px; background: #fff; color: var(--texto); border-radius: var(--radio-grande);
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .1); }
@media (min-width: 760px) { .local { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; padding: 24px; } }
.local-donde, .local-horario { display: grid; align-content: start; gap: 10px; min-width: 0; }
.local-nombre { font-family: var(--letra-titulos, inherit); font-size: 19px; overflow-wrap: anywhere; }
.local-direccion { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }
.local-direccion .ico, .local-horario-titulo .ico { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--color-oscuro); }
.local-direccion-texto { min-width: 0; }
.local-llegar { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-size: 17px; text-decoration: none; }
.local-llegar .ico { width: 20px; height: 20px; }
.local-horario-titulo { display: flex; align-items: center; gap: 8px; font-size: 18px; }
/* un solo texto que baja de renglón entero (19/10/2026: en 320 "Abierto ahora" y "cierra a las 20 h" quedaban en dos columnas) */
.local-estado { justify-self: start; display: block; margin: 0; padding: 6px 14px; border-radius: 18px; font-size: 16px; line-height: 1.4; }
.local-estado .local-punto { display: inline-block; margin-right: 6px; vertical-align: 1px; }
.local-estado.abierto { background: #dcfce7; color: #166534; }
.local-estado.cerrado { background: #f1f5f9; color: #334155; }
.local-punto { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.local-dias { list-style: none; margin: 0; padding: 0; display: grid; }
.local-dias li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; padding: 8px 0; border-bottom: 1px solid #e5e7eb; font-size: 17px; line-height: 1.35; }
.local-dias li:last-child { border-bottom: 0; }
.local-dia { font-weight: 600; }
.local-horas { margin-left: auto; text-align: right; }
.local-nota { margin: 0; font-size: 16px; color: #4b5563; overflow-wrap: anywhere; }

/* ---------- Redes (forma A): botones grandes con el nombre de la red y el @usuario, centrados ---------- */
.parte-redes { text-align: center; }
/* forma B (19/10/2026, constructor: "los logos están muy anticuados"): un círculo con el color de cada red y su logo blanco, el nombre debajo */
.redes-fila { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; }
.red-circulo { display: grid; justify-items: center; gap: 8px; min-width: 76px; color: inherit; text-decoration: none; }
.red-logo { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #fff; box-shadow: 0 4px 12px rgba(17, 24, 39, .18); transition: transform .15s, box-shadow .15s; }
.red-logo .ico { width: 32px; height: 32px; }
.red-instagram .red-logo { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.red-facebook .red-logo { background: #1877f2; }
.red-tiktok .red-logo { background: #111; box-shadow: 0 4px 12px rgba(17, 24, 39, .18), inset 0 0 0 2px #25f4ee, inset 0 0 0 4px #111; }
.red-nombre { font-size: 16px; font-weight: 600; }
.red-circulo:hover .red-logo { transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 18px rgba(17, 24, 39, .25); }
.red-circulo:focus-visible { outline: none; }
.red-circulo:focus-visible .red-logo { outline: 3px solid var(--color); outline-offset: 3px; }
.parte-extra.fondo-fuerte .red-circulo:focus-visible .red-logo { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) { .red-logo { transition: none; } .red-circulo:hover .red-logo { transform: none; } }

/* en el Editor: el tacho chico sobre cada opinión y cada local, y los textos que se escriben ahí mismo */
body.editor-tocar #principal.en-inicio :is(.opinion, .local) { position: relative; }
body.editor-tocar #principal.en-inicio :is(.opinion, .local):hover > .item-quitar { display: grid; place-items: center; position: absolute; right: 8px; top: 8px; z-index: 22;
  width: 38px; height: 38px; border-radius: 50%; background: #fdecec; color: #b42318; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); cursor: pointer; }
body.editor-tocar #principal.en-inicio :is(.opinion-texto, .opinion-nombre, .opinion-lugar, .local-nombre, .local-direccion-texto):hover { outline: 2px dashed currentColor; outline-offset: 3px; border-radius: 4px; cursor: text; }

/* =====================================================================
   Comprar por mayor (Fase 8, paso 4; forma "A · Una página corta", elegida por el constructor el 21/10/2026).
   Botón en la cabecera (azul clarito, como el carrito; en el celular "Por mayor") y una página con 5 datos.
   El CUIT y la condición frente al IVA, iguales al registro y a Datos fiscales.
   ===================================================================== */
.boton-mayor { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px; border-radius: 99px; flex: none;
  background: var(--color-suave); color: var(--color-oscuro); font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; }
.boton-mayor[hidden] { display: none; }
.boton-mayor .ico { width: 20px; height: 20px; flex: none; }
.boton-mayor:hover { background: #dbe7fd; }
.boton-mayor-corto { display: none; }
/* celular y tablet (hasta 759, donde el buscador va abajo): el botón va al lado del buscador, así el nombre de la tienda entra entero */
.cabecera-derecha .boton-mayor { display: none; }
.tienda-buscar-celu.con-mayor { display: flex; gap: 8px; align-items: center; }
.tienda-buscar-celu.con-mayor .tienda-buscar { flex: 1; min-width: 0; }
.tienda-buscar-celu .boton-mayor { min-height: 52px; }
/* con el botón, el lado derecho necesita unos 450 de ancho: desde 1100 va en la cabecera (ese lado más ancho; el buscador sigue en el medio y se achica);
   de 760 a 1099, la cabecera como en el celular y el botón al lado del buscador, abajo (el revisor marcaba el buscador encimado, 21/10/2026) */
@media (min-width: 760px) and (max-width: 1099px) {
  body.con-mayor .tienda-cabecera .contenedor { display: flex; }
  body.con-mayor .tienda-cabecera .tienda-buscar.en-cabecera { display: none; }
  body.con-mayor .tienda-buscar-celu.con-mayor { display: flex; }
}
@media (min-width: 1100px) {
  body.con-mayor .cabecera-derecha .boton-mayor:not([hidden]) { display: inline-flex; }
  body.con-mayor .tienda-buscar-celu.con-mayor { display: none; }
  body.con-mayor .tienda-cabecera .contenedor { grid-template-columns: minmax(236px, 1fr) minmax(0, 480px) minmax(460px, 1fr); }
}
@media (max-width: 479px) { .boton-mayor-largo { display: none; } .boton-mayor-corto { display: inline; } .tienda-buscar-celu .boton-mayor { padding: 0 14px; } }
@media (max-width: 359px) { .tienda-buscar-celu .boton-mayor .ico { display: none; } }
.may-tarjeta { padding: 22px 18px; margin: 0 0 18px; }
.may-pie { text-align: center; margin: 10px 0 0 !important; }
.tienda-formulario .opciones-iva { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tienda-formulario .opciones-iva .opcion-iva { display: flex; width: 100%; align-items: center; border-radius: var(--radio); padding: 12px 16px; }
.tienda-formulario .opciones-iva.falta .opcion-iva { box-shadow: inset 0 0 0 1.5px #f4a49b; }
.estado-cuit { font-weight: 600; font-size: 16px; margin: 6px 0 0; display: flex; align-items: center; gap: 6px; }
.estado-cuit:empty { display: none; }
.estado-cuit.ok { color: var(--ok); }
.estado-cuit .ico { width: 18px; height: 18px; flex: none; }
.may-sigue { list-style: none; padding: 0; margin: 4px auto 22px; display: grid; gap: 12px; max-width: 440px; text-align: left; }
.may-sigue li { display: flex; gap: 12px; align-items: flex-start; }
.may-sigue li b { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-suave); color: var(--color-oscuro); }
.may-sigue li span { padding-top: 4px; min-width: 0; }
.may-sigue[hidden] { display: none; }
#may-otro { margin-top: 10px; min-height: 44px; }

/* =====================================================================
   Entrar como cliente mayorista (Fase 8, paso 6; forma A, elegida por el constructor el 21/10/2026: "simple, intuitiva y estética").
   En "Comprar por mayor", dos tarjetas: "Ya soy cliente" y "Todavía no soy cliente" (una al lado de la otra en la compu).
   Adentro: la franja verde de arriba con su nombre y "Salir", y el botón de la cabecera en verde.
   ===================================================================== */
.may-dos { display: grid; gap: 16px; }
@media (min-width: 760px) { .tienda .contenedor.tienda-formulario:has(#may-inicio:not([hidden])) { max-width: 940px; } .may-dos { grid-template-columns: 1.15fr 1fr; } }   /* las dos tarjetas del mismo alto */
.may-camino { padding: 22px 18px; }
.may-camino h2 { font-size: 22px; margin: 0 0 4px; }
.may-camino > .ayuda, .may-camino form > .ayuda { margin: 0 0 16px; }
.may-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 10px; }
.may-links .boton-link { min-height: 44px; padding: 0 2px; }
.may-robot { min-height: 65px; margin-bottom: 14px; }
.may-robot:empty { display: none; }
.may-pin { font-size: 26px !important; font-weight: 700; letter-spacing: .5em; text-align: center; max-width: 220px; }
.may-pin::placeholder { letter-spacing: .2em; }
.may-olvido { margin: 12px 0 0 !important; }
.may-olvido > div { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.may-olvido .boton-secundario { background: #fff; }
#may-adentro:not([hidden]), #act-mal:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; }   /* un botón debajo del otro (se encimaban) */
#may-adentro .boton-link, #act-mal .boton-link { min-height: 48px; min-width: 120px; padding: 0 16px; }   /* "Salir" e "Ir a la tienda": grandes para el dedo */
#may-adentro p, #act-mal p { margin: 0 0 6px; }
#may-adentro h2, #may-adentro p, #act-mal h2 { max-width: 100%; overflow-wrap: anywhere; }   /* un nombre larguísimo pasa de renglón */
#act-mal .circulo.gris { background: var(--gris-suave); color: var(--texto-suave); }
.tienda-cliente { background: var(--ok-suave); color: var(--ok); font-weight: 600; }
.tienda-cliente .contenedor { display: flex; align-items: center; gap: 8px 12px; min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
.tienda-cliente .ico { width: 20px; height: 20px; flex: none; }
.tienda-cliente span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tienda-cliente b { font-weight: 800; }
.tienda-cliente .boton-link { flex: none; color: var(--ok); font-weight: 700; min-height: 44px; padding: 0 4px; }
.tienda-cliente[hidden] { display: none; }
body.es-cliente .boton-mayor { background: var(--ok-suave); color: var(--ok); }
body.es-cliente .boton-mayor:hover { background: #d3f0dc; }
/* "Mostrar la contraseña" en la tienda (21/10/2026): la misma pieza del login, el registro y "Crear contraseña nueva" */
.tienda .clave-caja { position: relative; }
.tienda .clave-caja input { padding-right: 96px; }
.tienda .clave-caja .boton-link { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 44px; padding: 0 10px; }

/* =====================================================================
   La tienda con los precios de cada cliente (Fase 8, paso 7; formas 1-B, 2-B y 3-A elegidas el 21/10/2026).
   El cliente ve su precio y debajo, en verde, "Pagás $ X menos" (como el precio con transferencia); "+ IVA" si su lista es sin IVA.
   Después de "Salir", el botón de la cabecera dice "Entrar: <su comercio>" (un nombre largo se corta con "…").
   Tienda "Solo mis clientes": quien no es cliente ve solo "Ya soy cliente / Todavía no soy cliente", sin buscador ni carrito.
   ===================================================================== */
.producto-ahorro { font-size: 15px; color: var(--ok); font-weight: 600; }
.producto-ahorro-grande { color: var(--texto-suave); font-size: 17px; margin: 4px 0 0; }
.producto-ahorro-grande span { color: var(--ok); font-weight: 600; display: inline-block; }   /* "pagás $ 2.400 menos (20 %)" baja entero, sin dejar "(20 %)" solo */
.precio-iva { font-size: max(14px, .75em); font-weight: 600; color: var(--texto-suave); white-space: nowrap; }
.carrito-detalle .producto-ahorro { font-size: 14px; }
.boton-mayor-largo { max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
.may-solo-intro { font-size: 17px; color: var(--texto-suave); margin: -4px 0 18px; }
body.solo-clientes :is(.tienda-buscar, .boton-carrito, .boton-mayor, .tienda-categorias, .tienda-buscar-celu) { display: none !important; }
.carrito-detalle .precio-iva { font-size: inherit; }   /* el detalle ya es letra chica: "+ IVA" del mismo tamaño */
:is(#may-entrar-tit, #pin-tit, #ent-no-soy, #pin-no-soy) { overflow-wrap: anywhere; }   /* "Hola de nuevo, <nombre>" con un nombre sin espacios no empuja la pantalla */

/* =====================================================================
   Reglas de venta (Fase 8, paso 8; formas 1-B y 2-A elegidas el 22/10/2026). Solo para el cliente mayorista que entró.
   Tarjeta: "Caja de 10: $ 38.800" en gris y "Ganás 32 %" en verde. Producto: el precio grande es el de la caja, debajo "cada uno",
   el recuadro verde del precio sugerido y, debajo del contador de cajas, "2 cajas = 20 unidades · $ 77.600 + IVA".
   Carrito: cajas en cada renglón, el IVA de cada alícuota y el aviso del pedido mínimo (el mismo del envío gratis).
   ===================================================================== */
.producto-caja { font-size: 15px; color: var(--texto-suave); overflow-wrap: anywhere; }
.producto-cada { color: var(--texto-suave); font-size: 17px; margin: 2px 0 0; }
.producto-sugerido { margin: 12px 0 0; padding: 10px 14px; border-radius: var(--radio); background: var(--ok-suave); color: var(--ok); font-weight: 700; font-size: 17px; overflow-wrap: anywhere; }
.producto-sugerido span { display: block; margin-top: 2px; font-weight: 400; font-size: 15px; color: var(--texto-suave); }
.producto-cajas { margin: 0 0 14px; color: var(--texto-suave); font-size: 16px; overflow-wrap: anywhere; }
.producto-cajas b { color: var(--texto); white-space: nowrap; }
.carrito-caja { color: var(--texto); font-weight: 600; }
.resumen-iva { display: grid; gap: 2px; margin: 4px 0; padding: 6px 0; border-top: 1px dashed var(--borde); border-bottom: 1px dashed var(--borde); }
.resumen-iva[hidden] { display: none; }
.carrito-barra.falta-minimo small { color: var(--atencion); font-weight: 700; }
.carrito-barra.falta-minimo div { flex: 1 1 auto; min-width: 0; }   /* "Faltan $ … para el mínimo" se acomoda en dos renglones si hace falta */

/* ---------- Pedido rápido del cliente mayorista (Fase 8, paso 9; formas 1-A, 2-A y 3-A elegidas el 22/10/2026) ---------- */
/* 3-A: "Pedido rápido" en la franja verde, en todas las páginas (en el celular, debajo del saludo, a todo lo ancho) */
.tienda-cliente .contenedor { flex-wrap: wrap; }
.boton-rapido { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 99px;
  background: #fff; color: var(--ok); font-weight: 700; text-decoration: none; }
.boton-rapido:hover { background: #f6fef9; }
.boton-rapido[aria-current=page] { box-shadow: inset 0 0 0 2px var(--ok); }
.tienda-cliente .boton-link { display: inline-flex; align-items: center; }   /* "Salir" a la altura del botón de al lado */
@media (max-width: 599px) { .boton-rapido { order: 3; flex: 1 1 100%; margin-bottom: 4px; } }
/* 1-A: todo en una pantalla */
.rapido-titulo { margin: 18px 0 4px; }
.rapido-sub { color: var(--texto-suave); font-size: 17px; margin: 0 0 8px; }
.rapido-seccion { display: flex; align-items: center; gap: 10px; margin: 26px 0 10px; font-size: 21px; min-width: 0; overflow-wrap: anywhere; }
.rapido-seccion .ico { width: 24px; height: 24px; color: var(--color); flex: none; }
.rapido-izquierda { container-type: inline-size; }   /* las filas miran el ancho de su columna, no el de la pantalla */
.rapido-pedido { display: grid; gap: 12px; margin: 0 0 12px; }
.rapido-pedido-dato { font-size: 17px; min-width: 0; }
.rapido-pedido-dato b { display: block; font-size: 19px; }
.rapido-pedido-dato span { color: var(--texto-suave); }
.rapido-pedido .boton, .rapido-pedido .boton-secundario { justify-self: start; }
@container (min-width: 520px) { .rapido-pedido { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .rapido-pedido .boton, .rapido-pedido .boton-secundario { justify-self: end; } }
.rapido-otros { margin: 0; }
.rapido-vacio { color: var(--texto-suave); font-size: 17px; margin: 0; }
/* renglón de "Mis productos de siempre": la pieza del carrito con el código y "Lo pediste N veces" */
.rapido-planilla .carrito-renglon { grid-template-columns: 64px minmax(0, 1fr); padding: 12px 0; }
.rapido-planilla .carrito-foto { width: 64px; height: 64px; }
.rapido-cod { color: var(--texto-suave); font-size: 15px; overflow-wrap: anywhere; }
.rapido-veces { color: var(--ok); font-size: 15px; font-weight: 600; margin-top: 2px; }
.rapido-sin-stock { color: var(--atencion); font-size: 16px; font-weight: 600; }
/* cargar por código */
.rapido-codigo { display: grid; gap: 10px; align-items: end; }
.rapido-codigo .campo { margin: 0; }
.rapido-codigo .boton-secundario { min-height: 52px; }
.rapido-cantidad output { min-width: 96px; }
@container (min-width: 560px) { .rapido-codigo { grid-template-columns: minmax(0, 1fr) auto auto; } }
.rapido-resultado { margin: 10px 0 0; font-size: 16px; overflow-wrap: anywhere; }
.rapido-resultado .ico { width: 1.1em; height: 1.1em; vertical-align: -2px; }
.rapido-opciones { display: grid; gap: 8px; margin: 10px 0 0; }
.rapido-opciones .boton-secundario { justify-content: flex-start; text-align: left; white-space: normal; }
.rapido-opciones .boton-secundario span { display: block; min-width: 0; overflow-wrap: anywhere; }
.rapido-opcion-nota { display: block; font-size: 15px; font-weight: 600; }   /* "No alcanza para una caja" debajo del talle y color */
@container (min-width: 520px) { .rapido-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* el resumen al costado solo en la compu (en el celular está la barra de abajo, que la tienda esconde desde 900) */
@media (max-width: 899px) { .rapido-resumen { display: none; } }
/* mientras escribe el código, la barra de abajo se esconde: con el teclado del celular abierto tapaba el aviso */
body.escribiendo-codigo #rapido-barra { display: none; }
/* "Tu lista de precios" al final de Pedido rápido (paso 9, parte 2, forma 3-A): dos botones a la vista, PDF y Excel */
.rapido-lista-caja > p:first-child { margin: 0 0 12px; color: var(--texto-suave); font-size: 17px; }
.rapido-lista-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.rapido-lista-estado { margin: 12px 0 0; font-size: 16px; overflow-wrap: anywhere; }
.rapido-lista-estado.mal { color: var(--error); font-weight: 600; }
/* Zonas de entrega (paso 9, parte 3, forma 3-A): cuándo llega, arriba de Pedido rápido y del carrito, y en cada lugar de envío */
.tienda-llega { font-weight: 600; }
.carrito-opcion-texto small.carrito-opcion-cuando { color: var(--ok); font-weight: 600; }