/* Estilos del sitio, en blanco y negro como el logo. Madera solo en franjas puntuales.
   Primero celular; en pantallas grandes se suman columnas. */

:root {  /* colores y medidas reutilizables */
  --negro: #111111;  /* color principal (no negro puro: cansa menos la vista) */
  --negro-suave: #2a2a2a;  /* para botones apretados */
  --blanco: #ffffff;  /* fondo principal */
  --gris-fondo: #f4f4f2;  /* secciones alternadas */
  --gris-texto: #666666;  /* texto secundario */
  --borde: #e2e2e0;  /* líneas divisorias */
  --radio: 10px;  /* redondeo de esquinas */
  --ancho: 1100px;  /* ancho máximo del contenido en computadora */
  --madera: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.12' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.05 0 0 0 0 0.02 1.6 0 0 0 -0.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") #3b2414;  /* vetas de madera generadas por código: oscurecido + ruido estirado en horizontal */
}

* { box-sizing: border-box; }  /* el ancho incluye relleno y borde: evita desbordes */

body {  /* página */
  margin: 0;  /* sin margen del navegador */
  background: var(--blanco);  /* fondo blanco */
  color: var(--negro);  /* texto negro */
  font: 15px/1.6 Inter, system-ui, sans-serif;  /* tamaño, interlineado y fuente */
}
a { color: inherit; }  /* los enlaces toman el color del texto que los rodea */
h1, h2, h3 { font-family: Oswald, "Arial Narrow", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; line-height: 1.15; }  /* títulos en mayúsculas angostas, como "MERCADO BOUTIQUE" del logo */

/* ---------- Logo ---------- */
.logo {  /* el SVG se usa como "máscara": se pinta con el color del texto (blanco o negro) */
  display: block;  /* ocupa su propio espacio */
  aspect-ratio: 1156.8 / 470.5;  /* proporción del logo, para que no se deforme */
  background-color: currentColor;  /* color = color del texto del contenedor */
  -webkit-mask: url("img/logo.svg") center / contain no-repeat;  /* recorta el color con la forma del logo (Safari) */
  mask: url("img/logo.svg") center / contain no-repeat;  /* ídem, navegadores modernos */
}

/* ---------- Aviso de prototipo ---------- */
.aviso-prototipo { background: #f2f2f2; color: var(--negro); text-align: center; font-size: 12px; padding: 6px 16px; border-bottom: 1px solid var(--borde); }  /* franja gris clara arriba */

/* ---------- Cabecera y menú ---------- */
.cabecera {  /* barra superior negra */
  background: var(--negro);  /* fondo negro */
  color: var(--blanco);  /* texto y logo en blanco */
  display: flex;  /* logo y menú en fila… */
  flex-direction: column;  /* …uno arriba del otro en el celular */
  align-items: center;  /* centrados */
  gap: 8px;  /* separación */
  padding: 14px 16px 10px;  /* relleno */
}
.cabecera .logo { width: 130px; }  /* tamaño del logo en el menú */
.menu { display: flex; gap: 20px; }  /* enlaces en fila */
.menu a {  /* cada enlace */
  font: 500 14px Oswald, sans-serif;  /* letra angosta */
  text-transform: uppercase;  /* mayúsculas */
  letter-spacing: .08em;  /* letras separadas */
  text-decoration: none;  /* sin subrayado */
  opacity: .7;  /* apagados… */
  padding: 4px 0;  /* área para tocar */
  border-bottom: 2px solid transparent;  /* línea invisible que se ve en la página actual */
}
.menu a:hover { opacity: 1; }  /* se encienden al pasar el mouse */
.menu a[aria-current="page"] { opacity: 1; border-bottom-color: var(--blanco); }  /* página actual: encendida y subrayada */

/* ---------- Portada (Inicio) ---------- */
.portada {  /* bloque principal con foto */
  background: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .7)), var(--foto) center / cover, var(--negro);  /* foto a color, oscurecida lo justo para leer el texto blanco */
  color: var(--blanco);  /* texto blanco */
  text-align: center;  /* centrado */
  padding: 56px 16px 64px;  /* relleno generoso */
}
.logo-portada { width: min(420px, 85%); margin: 0 auto; }  /* logo grande, nunca más ancho que la pantalla */
.portada-bajada { font: 500 15px Oswald, sans-serif; text-transform: uppercase; letter-spacing: .2em; margin: 18px 0 8px; }  /* "Más de 45 años en Caballito" */
.portada-texto { max-width: 520px; margin: 0 auto 28px; opacity: .85; }  /* descripción */

/* ---------- Botones ---------- */
.botones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }  /* fila de botones que baja de renglón si no entra */
.boton {  /* botón principal: negro con texto blanco */
  display: inline-block;  /* permite relleno en enlaces */
  background: var(--negro);  /* negro */
  color: var(--blanco);  /* texto blanco */
  border: 2px solid var(--negro);  /* borde del mismo color (para alinear con .boton-borde) */
  border-radius: 999px;  /* forma de píldora */
  padding: 10px 22px;  /* relleno */
  font: 600 14px Inter, sans-serif;  /* texto */
  text-decoration: none;  /* sin subrayado */
  cursor: pointer;  /* manito */
  text-align: center;  /* centrado */
}
.boton:active { background: var(--negro-suave); }  /* más claro al apretar */
.boton-claro { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }  /* blanco, para fondos oscuros */
.boton-borde { background: transparent; color: var(--blanco); border-color: var(--blanco); }  /* solo borde, para fondos oscuros */
.boton-grande { width: 100%; padding: 14px; font-size: 15px; }  /* ancho completo (enviar pedido) */

/* ---------- Secciones ---------- */
.seccion { padding: 48px 16px; }  /* bloque con relleno; 16 px a los costados en el celular */
.seccion > * { max-width: var(--ancho); margin-left: auto; margin-right: auto; }  /* el contenido no se estira de más en computadora */
.seccion-gris { background: var(--gris-fondo); }  /* fondo alternado */
.titulo-seccion { font-size: 26px; text-align: center; margin-top: 0; margin-bottom: 28px; }  /* título de sección */
.centrado { text-align: center; margin-top: 28px; }  /* para centrar botones */
.texto-centrado { text-align: center; max-width: 620px; }  /* párrafo centrado y angosto */
.mensaje { text-align: center; color: var(--gris-texto); padding: 32px 0; grid-column: 1 / -1; }  /* "Cargando…" o sin resultados (ocupa toda la grilla) */
.madera { background: var(--madera); color: var(--blanco); }  /* franja de madera con texto blanco */
.franja { background: var(--negro); color: var(--blanco); }  /* franja negra */
.franja .boton, .madera .boton { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }  /* botones blancos sobre fondo oscuro */

.encabezado-pagina { background: var(--negro); color: var(--blanco); text-align: center; padding: 40px 16px; }  /* título de cada pantalla */
.encabezado-pagina.madera { background: var(--madera); }  /* encabezado con madera (Nosotros): va después para ganarle al negro */
.encabezado-pagina h1 { font-size: 36px; margin: 0 0 8px; }  /* título grande */
.encabezado-pagina p { margin: 0 auto 8px; max-width: 520px; opacity: .85; }  /* bajada */
.encabezado-pagina p:has(.boton) { opacity: 1; }  /* el párrafo del botón no se apaga (si no, el botón sale gris) */
.encabezado-pagina .boton { margin-top: 12px; }  /* botón de WhatsApp en Contacto */

/* ---------- Botones con foto (Inicio y Tienda) ---------- */
.botones-foto { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }  /* 2 columnas en el celular */
.botones-seccion { grid-template-columns: 1fr; gap: 14px; }  /* Carnes / Fiambres: uno debajo del otro en el celular */
.botones-seccion .boton-foto { aspect-ratio: 16 / 9; }  /* más apaisados */
.botones-seccion .boton-foto-texto { font-size: 30px; padding: 0 18px 16px; }  /* título grande */
.boton-foto {  /* botón con foto de fondo */
  position: relative;  /* para poner el texto encima de la foto */
  align-content: end;  /* el nombre va abajo, sobre la sombra */
  aspect-ratio: 4 / 3;  /* proporción fija */
  border-radius: var(--radio);  /* esquinas */
  overflow: hidden;  /* la foto respeta las esquinas */
  background: var(--negro);  /* si no hay foto, negro */
  display: grid;  /* para centrar el texto */
  justify-items: start;  /* nombre alineado a la izquierda */
  text-decoration: none;  /* sin subrayado */
  color: var(--blanco);  /* texto blanco */
}
.boton-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }  /* foto a color de fondo */
.boton-foto:hover img { transform: scale(1.05); }  /* al pasar el mouse, la foto se acerca un poco */
.boton-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0, 0, 0, .75)); }  /* sombra solo abajo, para leer el nombre sin apagar la foto */
.boton-foto-texto { position: relative; z-index: 1; font: 600 17px Oswald, sans-serif; text-transform: uppercase; letter-spacing: .06em; padding: 0 12px 10px; line-height: 1.2; }  /* nombre abajo a la izquierda, encima de la sombra */
.boton-foto-texto small { display: block; font: 400 12px Inter, sans-serif; text-transform: none; letter-spacing: 0; opacity: .85; margin-top: 2px; }  /* detalle debajo del nombre (cantidad o descripción) */
.botones-seccion .boton-foto-texto small { font-size: 14px; }  /* detalle más grande en las secciones */
.botones-ofertas { grid-template-columns: 1fr; margin-bottom: 14px; }  /* botón "Precios destacados" de ancho completo, arriba de Carnes y Fiambres */
.botones-ofertas .boton-foto { aspect-ratio: 21 / 9; }  /* bien apaisado: se distingue de las secciones */
.botones-ofertas .boton-foto-texto { font-size: 30px; padding: 0 18px 16px; }  /* título grande, como las secciones */

/* ---------- Cómo comprar ---------- */
.pasos { list-style: none; padding: 0; display: grid; gap: 14px; counter-reset: paso; }  /* lista sin viñetas, con contador propio */
.pasos li {  /* cada paso */
  counter-increment: paso;  /* suma 1 al contador */
  background: rgba(0, 0, 0, .45);  /* recuadro oscuro semitransparente sobre la madera */
  border: 1px solid rgba(255, 255, 255, .15);  /* borde sutil */
  border-radius: var(--radio);  /* esquinas */
  padding: 18px 18px 18px 64px;  /* relleno; a la izquierda deja lugar al número */
  position: relative;  /* para ubicar el número */
}
.pasos li::before {  /* número grande del paso */
  content: counter(paso);  /* muestra el valor del contador */
  position: absolute; left: 18px; top: 14px;  /* arriba a la izquierda */
  font: 600 30px Oswald, sans-serif;  /* número grande */
}
.pasos strong { display: block; font: 600 17px Oswald, sans-serif; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }  /* título del paso */

/* ---------- Nosotros ---------- */
.texto-largo p { max-width: 680px; font-size: 16px; }  /* párrafos cómodos de leer */
.pendiente { background: #fff7d6; border: 1px dashed #c9a400; padding: 12px 14px; border-radius: 8px; color: #6b5800; font-size: 14px !important; }  /* marcador de contenido faltante (solo prototipo) */
.valores { display: grid; gap: 14px; }  /* bloques apilados */
.valores > div { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; }  /* cada bloque */
.valores h3 { margin: 0 0 6px; font-size: 18px; }  /* título del bloque */
.valores p { margin: 0; color: var(--gris-texto); }  /* texto del bloque */

/* ---------- Contacto ---------- */
.locales { display: grid; gap: 16px; }  /* locales apilados en el celular */
.local { border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; }  /* tarjeta de local */
.local-principal { border: 2px solid var(--negro); }  /* el que vende, con borde más marcado */
.local h2 { margin: 4px 0 8px; font-size: 24px; }  /* dirección */
.local p { margin: 0 0 14px; }  /* texto */
.etiqueta { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--gris-texto); font-weight: 600; }  /* rol del local */
.local iframe { width: 100%; height: 220px; border: 0; border-radius: 8px; }  /* mapa con sus colores normales */
.preguntas { max-width: 720px; }  /* ancho cómodo */
.preguntas details { background: var(--blanco); border: 1px solid var(--borde); border-radius: 8px; margin-bottom: 8px; }  /* cada pregunta */
.preguntas summary { padding: 14px 16px; font-weight: 600; cursor: pointer; }  /* la pregunta (se toca para abrir) */
.preguntas details p { margin: 0; padding: 0 16px 14px; color: var(--gris-texto); }  /* la respuesta */

/* ---------- Tienda ---------- */
.filtros {  /* buscador + categorías */
  position: sticky;  /* queda pegado arriba al bajar */
  top: 0;  /* pegado al borde superior */
  z-index: 5;  /* por encima de los productos */
  background: var(--blanco);  /* tapa lo que pasa por debajo */
  padding: 12px 16px 8px;  /* relleno */
  border-bottom: 1px solid var(--borde);  /* línea inferior */
}
.filtros > * { max-width: var(--ancho); margin-left: auto; margin-right: auto; }  /* alineado con el catálogo */
.buscador { display: block; width: 100%; padding: 10px 16px; border: 1px solid var(--borde); border-radius: 999px; font: inherit; background: var(--gris-fondo); }  /* campo de búsqueda en píldora */
.migas { margin: 8px auto 0; font-size: 13px; color: var(--gris-texto); }  /* camino: Tienda › Carnes › Vacuna */
.migas a { color: var(--negro); font-weight: 500; }  /* niveles anteriores, con link */
.titulo-nivel { font-size: 30px; margin: 24px 0 16px; }  /* título de la sección o categoría */
.catalogo > .botones-foto { margin-top: 20px; }  /* separación arriba de los botones */
.catalogo { max-width: var(--ancho); margin: 0 auto; padding: 0 16px 40px; }  /* zona de productos */
.titulo-grupo { font-size: 20px; margin: 32px 0 12px; }  /* título de cada grupo */

/* ---------- Tarjetas de producto ---------- */
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }  /* tantas columnas como entren, mínimo 160 px */
.tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; display: flex; flex-direction: column; }  /* foto arriba, datos abajo */
.tarjeta img, .sin-foto { width: 100%; aspect-ratio: 1; object-fit: cover; background: #e9e9e7; display: block; }  /* foto cuadrada, o recuadro gris si no hay */
.tarjeta-cuerpo { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }  /* datos apilados; ocupa el resto para alinear botones */
.tarjeta h3 { font: 600 15px/1.3 Inter, sans-serif; text-transform: none; letter-spacing: 0; margin: 0; }  /* nombre (sin mayúsculas: se lee mejor) */
.descripcion { margin: 0; color: var(--gris-texto); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }  /* descripción cortada en 2 líneas */
.precio { margin: auto 0 0; font-weight: 600; font-size: 16px; }  /* precio, empujado hacia abajo */
.precio span { font-weight: 400; color: var(--gris-texto); font-size: 13px; }  /* "/ kg" */
.precio b { font-weight: 800; margin: 0 2px; }  /* el "⋅" entre el precio por kilo y el de la pieza, en negrita */
.precio span del { font-size: 1em; }  /* por pieza con oferta: el tachado ya está dentro del texto chico, no se achica más */
.opcion-producto { font: inherit; font-size: 13px; padding: 6px; border: 1px solid var(--borde); border-radius: 8px; background: var(--blanco); }  /* selector de presentación */
.tarjeta .boton { border-radius: 8px; padding: 9px; }  /* botón Agregar, más compacto */
.seccion-gris .tarjeta { border-color: transparent; }  /* sobre gris, sin borde */

.tarjeta-foto { display: block; position: relative; }  /* la foto de la tarjeta es un link al producto (relative: para ubicar el sello) */

/* ---------- Ofertas ---------- */
.sello-oferta { position: absolute; top: 10px; left: 10px; z-index: 1; background: var(--negro); color: var(--blanco); font: 600 13px Oswald, sans-serif; text-transform: uppercase; letter-spacing: .08em; padding: 3px 10px; border-radius: 4px; }  /* cartel negro "PRECIO DESTACADO" sobre la foto, como el logo */
.precio del { font-weight: 400; color: var(--gris-texto); font-size: .8em; margin-right: 4px; }  /* precio normal tachado, más chico y gris */
.tarjeta .precio del { display: block; margin: 0; line-height: 1.2; }  /* en las tarjetas, el tachado va arriba: así entra "$ 24.900 / kg" en un renglón */
.texto-oferta { margin: 0; font-size: 13px; font-weight: 600; }  /* leyenda de la promo ("Llevando 3 kg, 10 % off") */
.ficha .texto-oferta { font-size: 15px; margin: -8px 0 14px; }  /* en la pantalla del producto, pegada al precio */
.galeria { position: relative; }  /* para ubicar el sello sobre la foto grande (en computadora pasa a sticky, que también sirve) */
.galeria .sello-oferta { top: 14px; left: 14px; font-size: 16px; padding: 4px 12px; }  /* sello más grande en la foto grande */
.tarjeta h3 a { text-decoration: none; }  /* nombre con link, sin subrayado… */
.tarjeta h3 a:hover { text-decoration: underline; }  /* …salvo al pasar el mouse */

/* ---------- Pantalla de producto ---------- */
.migas-producto { padding-top: 16px; }  /* separación del menú */
.producto { display: grid; gap: 20px; margin-top: 12px; }  /* galería y ficha apiladas en el celular */
.producto > * { min-width: 0; }  /* sin esto, la fila de miniaturas estira la galería más allá de la pantalla */
.foto-principal { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio); background: #e9e9e7; display: block; }  /* foto grande cuadrada */
.miniaturas { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }  /* fila deslizable de miniaturas */
.miniatura { flex: none; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: none; }  /* botón de miniatura */
.miniatura[aria-pressed="true"] { border-color: var(--negro); }  /* la foto que se está viendo */
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }  /* foto chica */
.ficha h1 { font-size: 30px; margin: 4px 0 8px; }  /* nombre del producto */
.precio-grande { font-size: 24px; margin: 0 0 16px; }  /* precio destacado */
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; margin-bottom: 14px; }  /* etiqueta + control */
.campo select { font: inherit; font-weight: 400; padding: 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--blanco); }  /* selector de presentación */
.contador-grande button { width: 42px; height: 42px; font-size: 20px; }  /* + y − más grandes, fáciles de tocar */
.contador-grande span { min-width: 80px; font-size: 17px; }  /* cantidad */
.estimado { margin: 0 0 12px; }  /* total aproximado */
.ficha .aviso-chico { margin-top: 10px; }  /* aviso de peso */
.descripcion-larga { border-top: 1px solid var(--borde); margin-top: 20px; padding-top: 12px; }  /* descripción completa, separada */
.descripcion-larga p { margin: 0 0 10px; }  /* párrafos */
.relacionados { margin-top: 40px; }  /* separación de "También te puede interesar" */

/* ---------- Cliente que vuelve ---------- */
.saludo { font: 500 18px Oswald, sans-serif; letter-spacing: .04em; margin: 16px 0 0; }  /* "¡Hola de nuevo, Tomás!" en la portada */
.boton-secundario { background: var(--blanco); color: var(--negro); border-color: var(--negro); }  /* botón blanco con borde negro */
#ultimo-pedido { padding-bottom: 0; }  /* pegado a la sección siguiente */
.ultimo-pedido { border: 2px solid var(--negro); border-radius: var(--radio); padding: 18px; display: grid; gap: 14px; }  /* tarjeta del último pedido */
.ultimo-pedido h2 { margin: 0 0 4px; font-size: 22px; }  /* título */
.ultimo-pedido p { margin: 0; color: var(--gris-texto); }  /* resumen de productos */
.ultimo-pedido .botones { justify-content: flex-start; }  /* botones a la izquierda */
.lista-pedidos { display: grid; gap: 14px; max-width: 720px; }  /* historial */
.pedido { border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; }  /* un pedido */
.pedido-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }  /* fecha y número */
.pedido ul { margin: 10px 0; padding-left: 18px; }  /* productos */
.pedido-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }  /* total y botón */
.mis-datos { max-width: 720px; margin-top: 36px; border-top: 1px solid var(--borde); padding-top: 20px; }  /* datos guardados */
.mis-datos h2 { font-size: 20px; margin: 0 0 8px; }  /* título */

/* ---------- Pie ---------- */
.pie { background: var(--negro); color: var(--blanco); text-align: center; padding: 40px 16px 100px; }  /* pie negro; abajo deja lugar a la barra del carrito */
.logo-pie { width: 150px; margin: 0 auto; }  /* logo */
.pie .pie-bajada { font: 500 13px Oswald, sans-serif; text-transform: uppercase; letter-spacing: .15em; opacity: .7; margin: 10px 0 28px; }  /* bajada de la marca */
.pie-columnas { display: grid; gap: 20px; max-width: var(--ancho); margin: 0 auto; }  /* columnas apiladas en el celular */
.pie h3 { font-size: 14px; letter-spacing: .1em; margin: 0 0 6px; opacity: .7; }  /* títulos del pie */
.pie p { margin: 0; }  /* sin margen extra */
.pie-legal { font-size: 12px; opacity: .5; margin-top: 28px !important; }  /* línea final */

/* ---------- Carrito ---------- */
.barra-carrito {  /* barra fija del pedido */
  position: fixed; left: 16px; right: 16px; bottom: 16px;  /* abajo, con margen */
  max-width: 560px; margin: 0 auto;  /* centrada, sin estirarse en computadora */
  display: flex; justify-content: space-between; align-items: center; gap: 8px;  /* elementos repartidos en fila */
  background: var(--negro); color: var(--blanco);  /* negra */
  border: 1px solid #444;  /* borde sutil, para que se distinga sobre el pie negro */
  border-radius: 999px; padding: 14px 20px;  /* píldora */
  font: 500 15px Inter, sans-serif;  /* texto */
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);  /* sombra */
  cursor: pointer; z-index: 10;  /* manito; por encima de todo */
}
.barra-carrito[hidden] { display: none; }  /* respeta el atributo hidden pese al display: flex */
body:has(.carrito[open]) .barra-carrito { display: none; }  /* con el carrito abierto, la barra no tapa el botón de enviar */
.barra-ver { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }  /* "Ver pedido" */

.carrito { width: min(560px, 100% - 32px); max-height: 90vh; border: 0; border-radius: var(--radio); padding: 20px; background: var(--blanco); color: var(--negro); }  /* ventana del pedido */
.carrito::backdrop { background: rgba(0, 0, 0, .6); }  /* oscurece lo de atrás */
.carrito-cabecera { display: flex; justify-content: space-between; align-items: center; }  /* título y ✕ en fila */
.carrito h2 { margin: 0; font-size: 24px; }  /* título */
.cerrar { background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--negro); }  /* botón ✕ */
.carrito-items { list-style: none; padding: 0; margin: 12px 0; }  /* lista sin viñetas */
.item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); }  /* línea del pedido */
.item small { display: block; color: var(--gris-texto); }  /* presentación y subtotal */
.vacio { color: var(--gris-texto); padding: 12px 0; }  /* carrito vacío */
.contador { display: flex; align-items: center; gap: 8px; flex: none; }  /* − cantidad + */
.contador button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--borde); background: var(--blanco); font-size: 18px; cursor: pointer; color: var(--negro); }  /* botones redondos */
.contador span { min-width: 56px; text-align: center; font-weight: 500; }  /* cantidad, con ancho fijo para que no salte */
.carrito-total { display: flex; justify-content: space-between; font-size: 17px; margin: 8px 0; }  /* total */
.aviso-chico { font-size: 13px; color: var(--gris-texto); margin: 0 0 12px; }  /* avisos chicos */
.formulario { display: flex; flex-direction: column; gap: 12px; }  /* campos apilados */
.formulario label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 500; }  /* etiqueta arriba del campo */
.formulario label[hidden] { display: none; }  /* respeta hidden en la dirección */
.formulario input, .formulario textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px; background: var(--blanco); }  /* campos */
.entrega { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }  /* opciones de entrega */
.entrega legend { font-size: 14px; font-weight: 500; margin-bottom: 4px; }  /* título "Entrega" */
.formulario .opcion { flex-direction: row; align-items: center; font-weight: 400; gap: 8px; }  /* radio y texto en fila */
.formulario .aviso-chico { margin: 0; }  /* sin margen extra en el formulario */
.error { color: #b3261e; margin: 0; font-size: 14px; min-height: 1em; }  /* error en rojo (única excepción al blanco y negro: tiene que llamar la atención) */

/* ---------- Pantallas medianas en adelante ---------- */
@media (min-width: 720px) {
  .cabecera { flex-direction: row; justify-content: space-between; padding: 14px max(24px, calc((100% - var(--ancho)) / 2)); }  /* logo a la izquierda, menú a la derecha, alineados al contenido */
  .cabecera .logo { width: 150px; }  /* logo un poco más grande */
  .menu { gap: 28px; }  /* más aire entre enlaces */
  .portada { padding: 88px 24px 96px; }  /* portada más alta */
  .botones-foto { grid-template-columns: repeat(4, 1fr); }  /* 4 botones por fila */
  .botones-seccion { grid-template-columns: 1fr 1fr; }  /* Carnes y Fiambres lado a lado */
  .botones-seccion .boton-foto { aspect-ratio: 4 / 3; }  /* más altos en computadora */
  .botones-seccion .boton-foto-texto { font-size: 40px; }  /* título más grande */
  .grilla { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }  /* tarjetas más anchas */
  .pasos { grid-template-columns: repeat(2, 1fr); }  /* pasos de a dos */
  .valores { grid-template-columns: repeat(3, 1fr); }  /* valores en fila */
  .locales { grid-template-columns: 1fr 1fr; }  /* locales lado a lado */
  .pie-columnas { grid-template-columns: repeat(2, 1fr); }  /* pie en dos columnas */
  .titulo-seccion { font-size: 32px; }  /* títulos más grandes */
  .producto { grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }  /* galería a la izquierda, ficha a la derecha */
  .galeria { position: sticky; top: 16px; }  /* la foto queda visible mientras se lee la descripción */
  .ficha h1 { font-size: 38px; }  /* nombre más grande */
  .ultimo-pedido { grid-template-columns: 1fr auto; align-items: center; }  /* texto a la izquierda, botones a la derecha */
}