/* Tienda pública v3 · dirección "Rótulo y pizarra" (elegida por el fundador el 13-nov-2026).
   El logo original del cliente es el letrero sobre su propio negro; los precios se escriben como en la pizarra del mostrador.
   Colores del logo: amarillo del rótulo, rojo de "DÍAZ PÉREZ 90", naranja del atardecer, negro del contorno, sobre hueso.
   Letra de rótulo (Alfa Slab One) solo en títulos y precios; el resto en Barlow. Esquinas rectas, sin sombras de reposo.
   La tienda no sigue el modo oscuro del sistema: sus campos negros y hueso son la marca. */

@font-face { font-family: "Alfa Slab One"; src: url("/comun/fuentes/AlfaSlabOne-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/comun/fuentes/Barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/comun/fuentes/Barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/comun/fuentes/Barlow-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

body {
  /* Paleta medida (AA): negro/hueso 16,4:1 · amarillo/negro 12,6:1 · rojo/blanco 7,6:1 · rojo/hueso 6,4:1 · tinta-2/hueso 7,9:1 */
  --negro: #14110D; --negro-2: #221E18; --negro-3: #3A342B;
  --hueso: #EEEDE8; --hueso-2: #E2E0D8; --blanco: #FFFFFF;
  --amarillo: #FEC804; --amarillo-2: #FFD84A; --rojo: #A8120A; --rojo-2: #8C0E07; --naranja: #F2850E; --verde: #2C6419;
  --gris-calido: #4E4940; --gris-oscuro: #C9C2B3;

  --fondo: var(--hueso); --superficie: var(--blanco); --superficie-2: var(--hueso-2); --superficie-3: var(--hueso-2);
  --borde: #D5D2C8; --borde-fuerte: #857F72; --linea: #D5D2C8;
  --tinta: var(--negro); --tinta-2: var(--gris-calido);
  --accion: var(--negro); --accion-hover: var(--negro-3); --accion-tinta: var(--amarillo); --foco: var(--rojo);
  --f-titulo: "Alfa Slab One", "Rockwell", serif; --f-texto: "Barlow", system-ui, sans-serif;
  --r-control: 0; --r-tarjeta: 0; --r-1: 0; --r-2: 0; --r-pill: 0;
  --t-display: clamp(2.75rem, 1.3rem + 5.2vw, 6rem);
  --t-h2: clamp(2.25rem, 1.6rem + 2.6vw, 4rem);
  --t-h3: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
  --t-lead: clamp(1.1875rem, 1.05rem + .5vw, 1.5rem);
  --t-cuerpo: 1.125rem; --t-pequeno: .9375rem;
  /* Cinco pasos visibles: display, h2, h3 (también precios y renglones), lead, cuerpo; más el pequeño para metadatos. */
  --sombra-suave: none;
  --curva: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
  background: var(--fondo); color: var(--tinta); font: 400 var(--t-cuerpo)/1.55 var(--f-texto);
}
::selection { background: var(--amarillo); color: var(--negro); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.oscuro :focus-visible, .cabecera :focus-visible, .letrero :focus-visible, .pizarra :focus-visible, .pie :focus-visible, .pedir :focus-visible { outline-color: var(--amarillo); }
html { scrollbar-color: var(--negro-3) var(--hueso-2); }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 2px; }
p { max-width: 62ch; }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 400; letter-spacing: -.01em; line-height: 1.02; text-wrap: balance; }
.env { width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; padding: 0 var(--margen); }
main { display: block; }

/* Campo negro (cabecera, letrero, pizarra, pie, resumen del pedido) */
.oscuro { --fondo: var(--negro); --superficie: var(--negro-2); --superficie-2: var(--negro-2); --borde: var(--negro-3); --borde-fuerte: #8C8577; --linea: var(--negro-3);
  --tinta: var(--hueso); --tinta-2: var(--gris-oscuro); --accion: var(--amarillo); --accion-hover: var(--amarillo-2); --accion-tinta: var(--negro);
  background: var(--negro); color: var(--hueso); }

/* Botones: rectos, un color plano. En claro: negro con letra amarilla. En negro: amarillo con letra negra. */
.c-boton { border-radius: 0; font: 700 var(--t-cuerpo)/1 var(--f-texto); letter-spacing: .005em; min-height: 48px; transition: background var(--dur), color var(--dur), transform var(--dur) var(--curva); }
.c-boton:hover { background: var(--accion-hover); border-color: var(--accion-hover); }
.c-boton:active { transform: translateY(1px) scale(.985); }
.c-boton--grande { min-height: 58px; }
.c-boton--amarillo { --accion: var(--amarillo); --accion-hover: var(--amarillo-2); --accion-tinta: var(--negro); }
.c-boton--sec { background: transparent; color: var(--tinta); border: 3px solid currentColor; }
.c-boton--sec:hover { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.c-boton--whatsapp { --accion: var(--verde); --accion-hover: #234F14; --accion-tinta: var(--blanco); }
.c-boton[disabled]:hover { background: var(--accion); }
.c-input, .c-select { border: 2px solid var(--borde-fuerte); border-radius: 0; background: var(--superficie); min-height: 48px; }
.c-input:focus-visible, .c-select:focus-visible { outline: 3px solid var(--foco); outline-offset: 0; border-color: var(--tinta); }
.oscuro .c-input { background: var(--hueso); color: var(--negro); border-color: var(--hueso); }
.c-cantidad { border: 2px solid var(--borde-fuerte); border-radius: 0; height: 48px; grid-template-columns: 44px 52px 44px; }
.c-cantidad button:hover { background: var(--superficie-2); }
.c-chip { border: 2px solid var(--negro); border-radius: 0; font-weight: 600; text-decoration: none; min-height: 40px; }
.c-chip[aria-pressed="true"] { background: var(--negro); border-color: var(--negro); color: var(--amarillo); }
.c-etiqueta { border-radius: 0; }
.c-etiqueta--especie { background: var(--negro); color: var(--amarillo); padding: 6px 12px; font-size: var(--t-pequeno); text-decoration: none; }
.c-etiqueta--especie:hover { background: var(--rojo); color: var(--blanco); }
.c-aviso { display: block; border: 0; border-radius: 0; background: var(--hueso-2); color: var(--negro); }
.c-aviso strong { display: none; }
.c-aviso b { font: 400 1.0625rem var(--f-titulo); color: var(--rojo); }
.c-tabla th, .c-tabla td { border-bottom: 0; }
.c-tabla tr:nth-child(odd) > * { background: var(--hueso-2); }

/* ---------- Cabecera negra: logo, buscador, moneda y pedido; las secciones del mostrador debajo ---------- */
.cabecera { position: sticky; top: 0; z-index: 20; background: var(--negro); color: var(--hueso); }
.cabecera .fila1 { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--e-6); padding: 10px 0; }
.marca { display: block; text-decoration: none; }
.marca img { width: 104px; height: auto; transition: transform var(--dur) var(--curva); }
.marca:hover img { transform: rotate(-2deg) scale(1.03); }
.buscar { position: relative; max-width: 520px; }
.buscar input { min-height: 48px; padding-left: 46px; background: var(--negro-2); border: 2px solid var(--negro-3); color: var(--hueso); }
.buscar input::placeholder { color: var(--gris-oscuro); }
.buscar input:focus-visible { border-color: var(--amarillo); outline: 0; }
.buscar svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--gris-oscuro); pointer-events: none; }
.acciones-cab { display: flex; align-items: center; gap: var(--e-3); }
.monedas { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--negro-2); }
.monedas button { min-height: 44px; min-width: 52px; padding: 0 var(--e-3); border: 0; background: none; color: var(--hueso); font: 700 .9375rem/1 var(--f-texto); cursor: pointer; transition: background var(--dur), color var(--dur); }
.monedas button:hover { background: var(--negro-3); }
.monedas button[aria-pressed="true"] { background: var(--amarillo); color: var(--negro); }
.boton-carrito { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 48px; padding: 0 var(--e-4); background: var(--rojo); color: var(--blanco); text-decoration: none; font-weight: 700; transition: background var(--dur); }
.boton-carrito:hover { background: var(--rojo-2); }
.boton-carrito svg { width: 22px; height: 22px; flex: none; }
.boton-carrito .cuenta { min-width: 26px; height: 26px; padding: 0 6px; background: var(--amarillo); color: var(--negro); font-size: var(--t-pequeno); font-weight: 700; display: inline-grid; place-items: center; }
.nav-cats { background: var(--negro); }
.nav-cats ul { display: flex; flex-wrap: wrap; gap: 0 var(--e-6); list-style: none; margin: 0; padding: 0; }
.nav-cats a { display: block; padding: 10px 0 12px; color: var(--hueso); text-decoration: none; font-weight: 600; white-space: nowrap; border-bottom: 4px solid transparent; transition: border-color var(--dur), color var(--dur); }
.nav-cats a:hover { color: var(--amarillo); }
.nav-cats a[aria-current="page"] { color: var(--amarillo); border-bottom-color: var(--amarillo); }

/* ---------- Portada ---------- */
/* El letrero: el logo del cliente sobre su negro, el título en amarillo */
.letrero { background: var(--negro); color: var(--hueso); padding: var(--e-8) 0 var(--e-9); overflow: hidden; }
.letrero .env { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--e-8); align-items: center; }
.letrero-logo { width: 100%; max-width: 720px; height: auto; transform-origin: 50% 70%; }
.letrero h1 { font-size: var(--t-display); color: var(--amarillo); max-width: 9ch; }
.letrero .bajada { margin-top: var(--e-5); font-size: var(--t-lead); line-height: 1.45; max-width: 30ch; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e-4); margin-top: var(--e-6); }
.letrero .c-boton--sec { color: var(--hueso); }
.letrero .c-boton--sec:hover { background: var(--hueso); color: var(--negro); border-color: var(--hueso); }

.arreo { position: relative; margin: 0; overflow: hidden; background: var(--negro); }
.arreo img { width: 100%; height: clamp(300px, 44vw, 640px); object-fit: cover; object-position: 50% 40%; }
.arreo figcaption { position: absolute; left: var(--margen); bottom: var(--e-4); padding: 4px 10px; background: var(--negro); color: var(--hueso); font-size: var(--t-pequeno); font-weight: 600; }

/* La pizarra: renglones con puntos guía, el precio en amarillo y las otras monedas debajo */
.pizarra { background: var(--negro-2); color: var(--hueso); padding: var(--e-10) 0; }
.pizarra-cab { display: flex; justify-content: space-between; align-items: end; gap: var(--e-6); margin-bottom: var(--e-7); }
.pizarra h2 { font-size: var(--t-h2); color: var(--amarillo); }
.pizarra-cab p { max-width: 40ch; color: var(--hueso); }
.lista-pizarra { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--e-9); }
.lista-pizarra .producto { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: var(--e-4); padding: var(--e-5) 0; position: relative; }
.r-nom a { display: block; font: 400 var(--t-h3)/1.1 var(--f-titulo); color: var(--hueso); text-decoration: none; }
.r-nom a:hover { color: var(--amarillo); text-decoration: underline; }
.r-nom span { display: block; margin-top: 6px; font-size: var(--t-pequeno); color: var(--gris-oscuro); }
.puntos { align-self: center; border-bottom: 5px dotted var(--negro-3); transform: translateY(4px); }
.r-precio { text-align: right; }
.r-precio .c-precio { display: block; font: 400 var(--t-h3)/1 var(--f-titulo); color: var(--amarillo); white-space: nowrap; }
.r-precio .equiv { display: block; margin-top: 6px; font-size: var(--t-pequeno); color: var(--gris-oscuro); white-space: nowrap; }
/* Agregar: un texto amarillo bajo el precio, del tamaño del dedo; no un botón por renglón */
.r-agregar { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; padding: 0; border: 0; background: none; color: var(--amarillo); font: 700 var(--t-cuerpo)/1 var(--f-texto); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; cursor: pointer; }
.r-agregar:hover { color: var(--blanco); }
.r-agregar[disabled] { color: var(--gris-oscuro); text-decoration: none; cursor: not-allowed; }
.pizarra-pie { margin-top: var(--e-7); }
.pizarra .vacio { background: var(--negro); color: var(--hueso); }

/* Por animal: la foto del cebú y la lista de especies en letra de rótulo */
.animal { padding: var(--e-10) 0; }
.animal .env { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-8); align-items: center; }
.animal img { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 760px; object-fit: cover; }
.animal h2 { font-size: var(--t-h2); }
.animal h2 + p { margin-top: var(--e-4); }
.especies { list-style: none; margin: var(--e-6) 0 0; padding: 0; }
.especies a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4); padding: var(--e-3) var(--e-3) var(--e-3) 0; text-decoration: none; transition: background var(--dur), padding var(--dur) var(--curva), color var(--dur); }
.especies .nom { font: 400 var(--t-h2)/1.05 var(--f-titulo); }
.especies a span:last-child { font-weight: 600; color: var(--tinta-2); white-space: nowrap; }
.especies a:hover { background: var(--negro); color: var(--amarillo); padding-left: var(--e-4); }
.especies a:hover span:last-child { color: var(--hueso); }

/* Cómo se pide: campo rojo */
.pedir { background: var(--rojo); color: var(--blanco); padding: var(--e-10) 0; }
.pedir .env { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--e-8); }
.pedir h2 { font-size: var(--t-h2); color: var(--amarillo); max-width: 10ch; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-6); }
.pasos li { max-width: 52ch; }
.pasos b { display: block; margin-bottom: 6px; font: 400 var(--t-h3)/1.15 var(--f-titulo); }

/* Visítenos: la sabana con la ficha amarilla encima */
.visita { position: relative; background: var(--negro); }
.visita > img { width: 100%; height: clamp(480px, 50vw, 680px); object-fit: cover; }
.visita .env { position: absolute; inset: auto 0 var(--e-7); }
.ficha-visita { max-width: 500px; padding: var(--e-7); background: var(--amarillo); color: var(--negro); }
.ficha-visita h2 { font-size: var(--t-h2); }
.ficha-visita ul { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-lead); }
.ficha-visita p:not(:empty) { margin-top: var(--e-5); }
.ficha-visita .c-boton { --accion: var(--negro); --accion-hover: var(--negro-3); --accion-tinta: var(--amarillo); }

/* ---------- Pie: el logo completo y los datos ---------- */
.pie { padding: var(--e-9) 0 var(--e-6); }
.pie .rejilla-pie { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--e-7); align-items: start; }
.logo-pie { width: 100%; max-width: 340px; height: auto; }
.pie h2 { font-size: var(--t-h3); margin-bottom: var(--e-4); color: var(--amarillo); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.pie a { color: var(--hueso); text-decoration: none; }
.pie a:hover { color: var(--amarillo); text-decoration: underline; }
.pie .base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e-4); margin-top: var(--e-8); font-size: var(--t-pequeno); color: var(--gris-oscuro); }
.pie .base a { text-decoration: underline; color: var(--gris-oscuro); }
.pie .c-firma { color: var(--gris-oscuro); }
.pie .c-firma svg { color: var(--hueso); }

/* ---------- Catálogo ---------- */
.titulo-pagina { padding: var(--e-7) 0 var(--e-5); }
.titulo-pagina h1 { font-size: var(--t-h2); }
.foto-especie { width: 100%; height: clamp(200px, 24vw, 340px); object-fit: cover; object-position: 50% 40%; margin-top: var(--e-5); }
.migas { font-size: var(--t-pequeno); color: var(--tinta-2); margin-bottom: var(--e-3); }
.migas a { color: var(--tinta); font-weight: 600; }
.catalogo { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: var(--e-6); padding-bottom: var(--e-9); align-items: start; }
.filtros { display: grid; gap: var(--e-5); align-content: start; position: sticky; top: 140px; padding: var(--e-5); background: var(--hueso-2); }
.filtros fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; }
.filtros legend { font: 400 1.125rem var(--f-titulo); margin-bottom: var(--e-2); padding: 0; }
.opcion { display: flex; align-items: center; gap: var(--e-3); min-height: 40px; padding: 0 var(--e-2); cursor: pointer; transition: background var(--dur); }
.opcion:hover { background: var(--hueso); }
.opcion input { width: 18px; height: 18px; accent-color: var(--negro); }
.opcion .n { margin-left: auto; font-size: var(--t-pequeno); color: var(--tinta-2); }
.rango { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
.barra-res { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); margin-bottom: var(--e-4); flex-wrap: wrap; }
.barra-res .cuenta-res { color: var(--tinta-2); font-weight: 600; }
.barra-res .c-select { width: auto; }
.activos { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-4); }
.activos:empty { display: none; }
.vacio { padding: var(--e-7); background: var(--hueso-2); }
.vacio h2 { font-size: var(--t-h3); margin-bottom: var(--e-3); }
.abrir-filtros, .filtros-cab { display: none; }

/* Tarjeta de producto (catálogo y relacionados): foto, nombre, precio de rótulo y agregar. Sin borde ni sombra: blanco sobre hueso. */
.rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla > .producto { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; position: relative; background: var(--blanco); color: var(--negro); }
.rejilla > .producto .enlace-zona { display: contents; }
.producto .cuerpo { display: flex; flex-direction: column; gap: var(--e-1); padding: var(--e-3) var(--e-4) var(--e-4); position: relative; z-index: 1; }
.producto .meta { font-size: var(--t-pequeno); font-weight: 600; color: var(--tinta-2); }
.producto h3 { font: 700 var(--t-cuerpo)/1.2 var(--f-texto); letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.producto h3 a { text-decoration: none; }
.producto h3 a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.producto h3 a:hover { text-decoration: underline; }
.producto h3 a:focus-visible { outline: 0; }
.producto:has(h3 a:focus-visible) { outline: 3px solid var(--foco); outline-offset: 3px; }
.producto .pres { font-size: var(--t-pequeno); color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* El precio de cada tarjeta es un trozo de la pizarra: negro, precio amarillo, otras monedas debajo */
.producto .pie-p { display: grid; align-content: start; gap: 2px; padding: var(--e-3) var(--e-4) var(--e-2); background: var(--negro-2); color: var(--hueso); position: relative; z-index: 1; }
.producto .pie-p .c-precio { color: var(--amarillo); }
.producto .pie-p .equiv { color: var(--gris-oscuro); }
.producto .pie-p .stock { color: var(--naranja); }
.producto .precio-fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2); flex-wrap: wrap; }
.c-precio { font: 400 var(--t-h3)/1.05 var(--f-titulo); color: var(--rojo); letter-spacing: 0; }
.equiv { font-size: var(--t-pequeno); color: var(--tinta-2); margin-top: 2px; }
.stock { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: var(--t-pequeno); font-weight: 700; color: var(--verde); }
.stock--poco, .stock--no { color: var(--rojo); }
.oscuro .stock--poco, .oscuro .stock--no { color: var(--naranja); }
.agregar { display: grid; grid-template-columns: auto 1fr; gap: var(--e-2); position: relative; z-index: 1; }
.agregar .c-boton { padding: 0 var(--e-3); }
.p-foto { position: relative; overflow: hidden; }
.p-foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--hueso-2); }
.p-foto span, .p-cinta span { position: absolute; left: 0; top: 0; padding: 4px 10px; background: var(--negro); color: var(--amarillo); font: 700 var(--t-pequeno)/1.3 var(--f-texto); }
/* Sin foto: etiqueta de saco tipográfica (presentación en letra de rótulo sobre el negro del logo) */
.p-cinta { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: var(--e-5); background: var(--negro); color: var(--hueso); text-align: center; }
.p-cinta b { font: 400 var(--t-h3)/1.05 var(--f-titulo); max-width: 12ch; }

/* ---------- Ficha de producto ---------- */
.ficha { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: var(--e-8); padding-bottom: var(--e-9); align-items: start; }
.ficha .migas { margin-top: var(--e-5); }
.ficha h1 { font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem); margin: var(--e-2) 0 var(--e-4); text-wrap: pretty; }
.ficha .meta { color: var(--tinta-2); font-size: var(--t-pequeno); font-weight: 600; }
.ficha-desc { font-size: var(--t-lead); max-width: 52ch; }
.ficha .chips { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-5) 0; }
.tecnica { margin-top: var(--e-7); display: grid; gap: var(--e-5); }
.tecnica h2 { font-size: var(--t-h3); }
.tecnica .c-tabla th { width: 40%; color: var(--tinta-2); font-weight: 600; }
.tecnica .c-tabla td, .tecnica .c-tabla th { padding: var(--e-3) var(--e-4); }
.compra { display: grid; gap: var(--e-4); padding: var(--e-6); position: sticky; top: 150px; }
.compra .c-precio { color: var(--amarillo); }
.compra .c-cantidad { background: var(--hueso); border-color: var(--hueso); }
.compra .c-cantidad button, .compra .c-cantidad input { color: var(--negro); }
.compra-foto { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.compra-nom { font: 700 var(--t-lead)/1.2 var(--f-texto); }
.compra-nom span { display: block; font: 400 var(--t-pequeno)/1.4 var(--f-texto); color: var(--tinta-2); margin-top: 2px; }
.compra .c-precio { font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem); }
.compra .otras { font-size: var(--t-pequeno); color: var(--gris-oscuro); }
.banda { padding: var(--e-9) 0; }
.banda h2 { font-size: var(--t-h2); }
.banda--suave { background: var(--hueso-2); }
.cabeza-banda { display: flex; justify-content: space-between; align-items: end; gap: var(--e-5); margin-bottom: var(--e-6); }
.cabeza-banda p { max-width: 54ch; margin-top: var(--e-3); }
.enlace-flecha { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--e-4); border: 3px solid var(--negro); color: var(--negro); font-weight: 700; text-decoration: none; white-space: nowrap; transition: background var(--dur), color var(--dur); }
.enlace-flecha:hover { background: var(--negro); color: var(--amarillo); }

/* ---------- Pedido ---------- */
.carrito { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--e-6); padding-bottom: var(--e-9); align-items: start; }
.lineas { display: grid; gap: var(--e-3); }
.linea { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: var(--e-4); align-items: center; padding: var(--e-3); background: var(--blanco); }
.linea--sin-foto { grid-template-columns: minmax(0, 1fr) auto; }
.mini { aspect-ratio: 1; overflow: hidden; background: var(--hueso-2); }
.mini img { width: 100%; height: 100%; object-fit: cover; }
.linea h3 { font: 700 1.0625rem/1.3 var(--f-texto); }
.linea h3 a { text-decoration: none; }
.linea h3 a:hover { text-decoration: underline; }
.linea .acciones-l { display: flex; align-items: center; gap: var(--e-3); margin-top: var(--e-2); flex-wrap: wrap; }
.linea .quitar { background: none; border: 0; color: var(--rojo); font: 700 var(--t-pequeno) var(--f-texto); text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 var(--e-2); }
.linea .total-l { font: 400 1.25rem/1.1 var(--f-titulo); text-align: right; }
.resumen { display: grid; gap: var(--e-4); padding: var(--e-6); position: sticky; top: 140px; }
.resumen h2 { font-size: var(--t-h3); color: var(--amarillo); }
.resumen .tot { display: flex; justify-content: space-between; align-items: baseline; font: 400 2.25rem/1.05 var(--f-titulo); color: var(--amarillo); padding-top: var(--e-4); }
.resumen .tot span:first-child { font: 600 1.0625rem var(--f-texto); color: var(--hueso); }
.resumen .otras { font-size: var(--t-pequeno); color: var(--gris-oscuro); }
.resumen .c-campo label { color: var(--hueso); }
.resumen .ayuda { color: var(--gris-oscuro); }
.mensaje { background: var(--blanco); color: var(--negro); padding: var(--e-4); font-size: 1rem; white-space: pre-wrap; max-height: 260px; overflow: auto; }

/* Aviso de agregado: flota, por eso es lo único con sombra */
.aviso-flota { position: fixed; left: 50%; bottom: var(--e-5); transform: translate(-50%, 140%); z-index: 50; display: flex; gap: var(--e-4); align-items: center; width: max-content; max-width: calc(100% - 32px); padding: var(--e-3) var(--e-4); background: var(--negro); color: var(--hueso); box-shadow: 0 12px 32px rgba(20, 17, 13, .28); /* taste-skill-ignore: aviso que flota */ transition: transform 320ms var(--curva), visibility 0s 320ms; visibility: hidden; }
.aviso-flota.ver { transform: translate(-50%, 0); visibility: visible; transition: transform 320ms var(--curva); }
.aviso-flota a { color: var(--amarillo); font-weight: 700; }
.barra-movil { display: none; }

.creditos img { width: 96px; height: auto; }
.creditos td { vertical-align: middle; }
.creditos a { color: var(--tinta); font-weight: 600; }
.tel { overflow-wrap: anywhere; }
.tel .nw { white-space: nowrap; }
.prep-marca { margin-bottom: var(--e-6); padding: var(--e-5); background: var(--negro); display: inline-block; }
.prep-marca img { width: min(320px, 70vw); height: auto; }
#preparacion { background: var(--hueso-2); }
#preparacion dd { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Movimiento: sobrio. El letrero se enciende al cargar; lo demás sube una vez al entrar. Sin JS, todo visible. ---------- */
@keyframes encender { from { opacity: 0; transform: scale(.94) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
@keyframes subir { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes acercar { from { transform: scale(1.08); } to { transform: scale(1); } }
.letrero-logo { animation: encender 900ms var(--curva) both; }
.arreo img { animation: acercar 2400ms var(--curva) both; }
.letrero-texto > * { animation: subir 800ms var(--curva) both; }
.letrero-texto > :nth-child(2) { animation-delay: 90ms; }
.letrero-texto > :nth-child(3) { animation-delay: 180ms; }
.js .entra { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--curva), transform 700ms var(--curva); }
.js .entra.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .letrero-logo, .arreo img, .letrero-texto > * { animation: none; }
  .js .entra { opacity: 1; transform: none; transition: none; }
  .marca:hover img { transform: none; }
}

/* ---------- Anchos ---------- */
@media (max-width: 1100px) {
  .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie .rejilla-pie { grid-template-columns: 1fr 1fr; }
  .lista-pizarra { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .letrero .env, .animal .env, .pedir .env { grid-template-columns: 1fr; gap: var(--e-6); }
  .letrero-logo { max-width: 600px; }
  .animal img { aspect-ratio: 16 / 10; }
}
@media (max-width: 820px) {
  .cabecera { position: static; }
  .cabecera .fila1 { gap: var(--e-3); grid-template-columns: minmax(0, 1fr) auto auto; }
  .cabecera .buscar { grid-column: 1 / 3; grid-row: 2; max-width: none; }
  .acciones-cab { display: contents; }
  .monedas { grid-column: 3; grid-row: 2; }
  .boton-carrito { grid-column: 3; grid-row: 1; justify-self: end; padding: 0 var(--e-3); }
  .marca img { width: 88px; }
  .monedas button { min-width: 0; padding: 0 10px; }
  .letrero { padding: var(--e-6) 0 var(--e-8); }
  .letrero .c-boton { flex: 1 1 100%; }
  .pizarra, .animal, .pedir { padding: var(--e-9) 0; }
  .pizarra-cab { display: block; }
  .pizarra-cab p { margin-top: var(--e-4); }
  .lista-pizarra .producto { grid-template-columns: minmax(0, 1fr) minmax(16px, 40px) auto; gap: var(--e-3); padding: var(--e-4) 0; }
  .r-nom a { font-size: 1.25rem; }
  .r-precio .c-precio { font-size: 1.375rem; }
  .r-precio { max-width: 42vw; }
  .r-precio .equiv { white-space: normal; }
  .nav-cats ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: var(--e-5); }
  .visita > img { height: 600px; }
  .visita .env { inset: auto 0 var(--margen); }
  .ficha-visita { padding: var(--e-5); }
  .pie .rejilla-pie { grid-template-columns: 1fr; gap: var(--e-6); }
  .logo-pie { max-width: 260px; }
  .banda { padding: var(--e-8) 0; }
  .rejilla, .rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
  .producto .cuerpo { padding: var(--e-3); }
  .agregar, .compra .agregar { grid-template-columns: 1fr; }
  .agregar .c-cantidad { width: 100%; grid-template-columns: 44px 1fr 44px; }
  .cabeza-banda { flex-direction: column; align-items: start; margin-bottom: var(--e-5); }
  .catalogo { grid-template-columns: 1fr; }
  .abrir-filtros { display: inline-flex; }
  .filtros { position: fixed; inset: 0; z-index: 70; background: var(--hueso); padding: var(--e-5) var(--margen) var(--e-9); overflow-y: auto; display: none; }
  .filtros.abierto { display: grid; }
  .filtros-cab { display: flex; justify-content: space-between; align-items: center; }
  .filtros-cab h2 { font-size: var(--t-h3); }
  /* En el celular el precio y el botón van justo después de la descripción, antes de la ficha técnica */
  .ficha { display: flex; flex-direction: column; gap: var(--e-5); }
  .ficha-info { display: contents; }
  .ficha .tecnica { order: 2; margin-top: 0; }
  .ficha .compra { order: 1; }
  .compra { position: static; padding: var(--e-5); }
  .carrito { grid-template-columns: 1fr; gap: var(--e-5); }
  .linea { grid-template-columns: 64px minmax(0, 1fr); }
  .linea--sin-foto { grid-template-columns: minmax(0, 1fr); }
  .linea .total-l { grid-column: -2; text-align: left; }
  .resumen { position: static; padding: var(--e-5); }
  .barra-movil { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; justify-content: space-between; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--margen); background: var(--negro); color: var(--hueso); border-top: 3px solid var(--amarillo); }
  .barra-movil[hidden] { display: none; }
  .barra-movil b { font: 400 1.25rem var(--f-titulo); color: var(--amarillo); }
  .barra-movil .c-boton { --accion: var(--amarillo); --accion-tinta: var(--negro); --accion-hover: var(--amarillo-2); }
  body.con-barra { padding-bottom: 80px; }
  .aviso-flota { bottom: 92px; }
}