/* ═════════ Diseño Estiba (aprobado el 20/10/2026): la cara de la caja ═════════
   Cada producto es la cara de su caja y las etiquetas son las marcas estarcidas del bulto.
   Referencias: DESIGN GHIA.md y labarraccu.com.ar (sello de descuento, cinta vertical con el bulto).
   Va después de estiba.css y lo pisa donde hace falta. */
/* Source Serif 4 (Google Fonts, licencia SIL OFL), servida desde el sitio: textos de lectura (.lectura) */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-italica-latin-ext.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-italica-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.lectura { font-family: var(--f-serif); }
/* Sin sombras en lo que está quieto: las superficies se separan por tono */
:root { --sombra-1: none; --sombra-2: none; }
.caja__accion .agregar, .fila__accion .agregar { background: var(--verde); color: #fff; border: 0; box-shadow: none; }
@media (hover: hover) { .caja__accion .agregar:hover, .fila__accion .agregar:hover { background: var(--verde-hondo); } }
/* Cómo trabajamos: etapas y opciones separadas por espacio y tono, sin líneas */
.ruta li { border-top: 0; padding: 20px; background: rgb(255 255 255 / 0.06); }
.ruta li::before { top: 22px; left: auto; right: 20px; }
.opciones { gap: 6px; }
.opciones li { border-bottom: 0; padding: 14px 16px; background: rgb(255 255 255 / 0.06); }

/* Modos de página: la portada y el catálogo (por categoría) son páginas separadas */
body[data-pagina="inicio"] #catalogo { display: none; }
body[data-pagina="catalogo"] #tienda > section:not(#catalogo) { display: none; }
body[data-pagina="catalogo"] .catalogo { padding-top: clamp(20px, 3vw, 40px); }
.catalogo__cabeza { display: grid; gap: 10px; margin-bottom: clamp(20px, 3vw, 36px); }
.catalogo__titulo { margin: 0; font-weight: 800; font-size: clamp(40px, 5.4vw, 80px); line-height: 0.95; letter-spacing: -0.035em; color: var(--borravino); }
.catalogo .rubros .titulo { font-size: 24px; }
#catalogo:not([data-cat=""]) .seccion-rubro__cabeza { display: none; }
#catalogo:not([data-cat=""]) .seccion-rubro { padding-top: 8px; }
.rubro[aria-current="true"] { background: var(--borravino); color: #fff; }
.rubro[aria-current="true"] .rubro__n { color: var(--dorado-claro); }

/* Títulos de las secciones heredadas, con la misma letra que las nuevas */
.titulo, .letra, .vista__titulo, .titulo-col, .bloque-form h2, .hoja-vacia h3, .vacio h3, .ruta h3 { font-stretch: 100%; letter-spacing: -0.03em; }
.seccion__cabeza h2.titulo, .atencion .titulo { font-weight: 800; }

/* Barra */
.barra--fija { background: var(--blanco); -webkit-backdrop-filter: none; backdrop-filter: none; }
.casa { background: var(--fondo); }
.casa::before { display: none; }
.nav a.nav__reserva { font-weight: 800; color: var(--tinta); text-decoration: underline; text-decoration-color: var(--dorado); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.marca__nombre { color: var(--borravino); }

/* Botones de la paleta */
.boton-borravino, .boton-papel, .boton-dorado {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px;
  border: 0; font-weight: 750; font-size: 16px; text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.boton-borravino { background: var(--borravino); color: #fff; }
.boton-papel { background: var(--blanco); color: var(--tinta); }
.boton-dorado { background: var(--dorado); color: var(--tinta); }
@media (hover: hover) {
  .boton-borravino:hover { background: var(--borravino-hondo); }
  .boton-papel:hover { background: var(--dorado-claro); }
  .boton-dorado:hover { background: var(--dorado-claro); }
}
.boton-borravino:active, .boton-papel:active, .boton-dorado:active { transform: scale(0.97); }

/* ───────── Portada: banda verde con la marca en blanco y detalles en bordó ───────── */
.portada {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 64px);
  padding: 0 max(var(--gutter), calc((100% - var(--ancho)) / 2)); background: var(--verde); color: #fff;
}
.portada::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--borravino); }
.caja-frente { display: flex; flex-direction: column; }
.cinta-tapa { display: none; }
.caja-frente__cuerpo { flex: 1; padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 72px); display: flex; flex-direction: column; gap: 24px; }
.caja-frente__marca { margin: 0; font-weight: 800; font-size: clamp(64px, 8.4vw, 132px); line-height: 0.85; letter-spacing: -0.01em; color: #fff; text-transform: uppercase; }
.caja-frente__casa { display: block; font-size: 0.34em; letter-spacing: 0; text-transform: none; color: #fff; margin-top: 10px; }
.caja-frente__titulos { display: grid; gap: 14px; }
.caja-frente h1 { margin: 0; font-weight: 800; font-size: clamp(34px, 3.4vw, 54px); line-height: 0.98; letter-spacing: -0.035em; max-width: 17ch; color: #fff; }
.caja-frente__bajada { margin: 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; max-width: 38ch; color: #eef2f0; }
.metas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-weight: 650; font-size: 17px; }
.metas li { display: flex; gap: 12px; align-items: baseline; }
.metas li::before { content: ""; flex: none; width: 11px; height: 11px; background: var(--borravino); box-shadow: 0 0 0 2px #fff; }
.caja-frente .buscador { max-width: 560px; }
.caja-frente .buscador__campo { border-color: transparent; }
.caja-frente .buscador__accion { background: var(--borravino); }
@media (hover: hover) { .caja-frente .buscador__accion:hover { background: var(--borravino-hondo); } }
.caja-frente__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; }
.caja-frente__dato { font-size: 14px; color: #e3e9e6; }

/* Ilustraciones de portada (herramientas/dibujar_estiba.py). Provisorias hasta tener fotos propias.
   Mayorista: llega el pallet, las cajas caen y se asientan, se estampan las marcas, se zuncha la carga
   y aparece el sello de listo. Estiba en casa: aparece el barrio, se marca el camino, la bolsa llega a
   la puerta, se prende la luz y brindan dos copas. Todo corre una vez al cargar. */
.estiba { position: relative; display: grid; place-items: center; min-height: 520px; padding-block: clamp(24px, 4vw, 56px); }
.estiba-grafica { width: 100%; max-width: 560px; height: auto; overflow: visible; }
/* Escalas y crecimientos desde su propia caja; el resto, en coordenadas del dibujo */
.bulto__marcas, .casa__arbol, .casa__pin, .casa__destellos { transform-box: fill-box; }

/* — La estiba — */
.estiba-grafica--estiba .pallet, .estiba-grafica--estiba .estiba-grafica__sombra { animation: pallet-llega 700ms var(--ease-out) both; }
@keyframes pallet-llega { from { opacity: 0; transform: translateX(-70px); } }
.estiba-grafica--estiba .bulto { animation: asentar 760ms var(--ease-out) both; animation-delay: calc(450ms + var(--n, 0) * 190ms); }
@keyframes asentar {
  0% { opacity: 0; transform: translateY(-70px); }
  55% { opacity: 1; transform: translateY(3px); }
  74% { transform: translateY(-3px); }
  100% { transform: none; }
}
.bulto__cinta { animation: aparecer-suave 260ms var(--ease-out) both; animation-delay: calc(450ms + var(--n, 0) * 190ms + 440ms); }
.bulto__marcas { transform-origin: center; animation: estampar 340ms var(--ease-out) both; animation-delay: calc(450ms + var(--n, 0) * 190ms + 560ms); }
@keyframes estampar { from { opacity: 0; transform: scale(1.3); } }
@keyframes aparecer-suave { from { opacity: 0; } }
.zuncho { stroke-dasharray: 1; stroke-dashoffset: 1; animation: zunchar 620ms var(--ease-out) forwards; animation-delay: calc(2500ms + var(--z, 0) * 260ms); }
@keyframes zunchar { to { stroke-dashoffset: 0; } }
.sello-listo { animation: sellar 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: 3300ms; }
@keyframes sellar { from { opacity: 0; transform: scale(0.5) rotate(-24deg); } }

/* — Llega a tu casa — */
.casa__terreno { animation: aparecer-suave 500ms var(--ease-out) both; }
.casa__arbol { transform-origin: bottom center; animation: crecer 560ms var(--ease-out) both; animation-delay: calc(300ms + var(--d, 0) * 140ms); }
@keyframes crecer { from { opacity: 0; transform: scale(0.4); } }
.casa__casa { animation: subir 620ms var(--ease-out) both; animation-delay: 200ms; }
@keyframes subir { from { opacity: 0; transform: translateY(24px); } }
.casa__pin { transform-origin: bottom center; animation: pin-cae 560ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: 700ms; }
@keyframes pin-cae { from { opacity: 0; transform: translateY(-28px) scale(0.8); } }
.casa__punto { animation: aparecer-suave 200ms var(--ease-out) both; animation-delay: calc(950ms + var(--d, 0) * 60ms); }
.casa__envio { animation: viaje 1900ms cubic-bezier(0.45, 0, 0.3, 1) both; animation-delay: 1600ms; }
@keyframes viaje {
  0% { opacity: 0; transform: translate(0, 0); }
  6% { opacity: 1; transform: translate(0, 0); }
  62% { transform: translate(var(--dx1), var(--dy1)); }
  100% { opacity: 1; transform: translate(var(--dx2), var(--dy2)); }
}
.casa__bolsa { animation: paso 240ms ease-in-out 1840ms 8 alternate; }
@keyframes paso { to { transform: translateY(-4px); } }
.casa__ventana { animation: encender 500ms var(--ease-out) forwards; animation-delay: 3550ms; }
@keyframes encender { to { fill: #f1dca4; } }
.casa__brindis { animation: aparecer-suave 300ms var(--ease-out) both; animation-delay: 3800ms; }
.casa__copa--izq { animation: chocar-izq 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: 3850ms; }
.casa__copa--der { animation: chocar-der 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: 3850ms; }
@keyframes chocar-izq { from { transform: translateX(-16px) rotate(-8deg); } }
@keyframes chocar-der { from { transform: translateX(16px) rotate(8deg); } }
.casa__destellos { transform-origin: center bottom; animation: destello 420ms var(--ease-out) both; animation-delay: 4300ms; }
@keyframes destello { from { opacity: 0; transform: scale(0.4); } }

/* ───────── Secciones de la portada ───────── */
.seccion-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; margin-bottom: clamp(28px, 3.6vw, 48px); }
.seccion-cabeza h2 { margin: 0; font-weight: 800; font-size: clamp(36px, 4.6vw, 68px); line-height: 0.95; letter-spacing: -0.035em; max-width: 16ch; }
.seccion-cabeza p { margin: 0; max-width: 46ch; font-size: 18px; line-height: 1.5; color: var(--tinta-2); }
.bloque-ofertas { background: var(--borravino); color: #fff; }
.bloque-ofertas .seccion-cabeza p { color: var(--dorado-claro); }
.ver-todo { margin: 28px 0 0; }
.bloque-destacados { background: var(--blanco); }

/* ───────── La tarjeta: la cara de la caja de cada producto ───────── */
.cajas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.caja { background: var(--blanco); color: var(--tinta); display: flex; flex-direction: column; min-width: 0; }
.bloque-destacados .caja, .coleccion .caja { background: var(--papel); }
.caja__cuerpo { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.caja__nombre { margin: 0; font-weight: 700; font-size: 17px; line-height: 1.22; letter-spacing: -0.01em; }
.caja__nombre button { all: unset; cursor: pointer; }
@media (hover: hover) { .caja__nombre button:hover { color: var(--borravino); } }
.caja__nombre button:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }
.caja__precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin-top: auto; }
.caja__precio s, .fila__precio s, .ficha-producto__precio s { color: var(--tinta-2); font-size: 14px; font-weight: 500; }
.caja__precio b { font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }
.caja__precio span { font-size: 14px; color: var(--tinta-2); }
.caja__detalle { margin: 0; font-size: 13px; line-height: 1.45; color: var(--tinta-2); }
.caja__accion { display: flex; margin-top: 4px; }
.caja__accion > * { width: 100%; }

/* Foto sin degradés: fondo plano */
.producto__foto { background: var(--papel); }
.caja .producto__foto { background: var(--fondo); }
.producto__foto::after, .producto__foto::before { display: none; }
.producto__foto img, .producto__foto .silueta { filter: none; }
@media (hover: hover) { .producto__foto:hover img, .producto__foto:hover .silueta { filter: none; } }
.caja .producto__foto img, .caja .producto__foto .silueta, .fila .producto__foto img, .fila .producto__foto .silueta { left: 6%; width: 70%; }
.vista-lista .fila .producto__foto img, .vista-lista .fila .producto__foto .silueta { left: 8%; width: 84%; }

/* Sello de descuento o promo (arriba a la izquierda) */
.sello { position: absolute; left: 10px; top: 10px; z-index: 2; width: 62px; height: 62px; border-radius: 50%; background: var(--borravino); color: #fff; display: grid; place-content: center; text-align: center; font-weight: 800; font-size: 18px; line-height: 0.95; letter-spacing: -0.02em; }
.sello small { display: block; font-size: 13px; letter-spacing: 0; }
.sello--promo { background: var(--tinta); font-size: 21px; }
/* Cinta vertical de la caja: variedad, bulto y medida (referencia: La Barra) */
.cinta-v { position: absolute; right: 10px; top: 0; bottom: 16px; width: 38px; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.cinta-v__variedad { flex: 1; width: 100%; background: var(--verde); color: #fff; writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: flex-end; padding: 12px 0 22px; /* el texto vertical va rotado: el padding de abajo es el aire visible arriba */ font-weight: 800; font-size: 13.5px; line-height: 1; white-space: nowrap; overflow: hidden; }
.cinta-v__bulto { width: 46px; margin-top: -2px; background: var(--tinta); color: #fff; text-align: center; padding: 7px 0; font-weight: 800; font-size: 16px; line-height: 1; }
.cinta-v__medida { width: 38px; background: var(--dorado); color: var(--tinta); text-align: center; padding: 6px 0 15px; font-weight: 800; font-size: 13px; line-height: 1.05; white-space: nowrap; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.vista-lista .cinta-v, .vista-lista .sello { display: none; }

/* Etiquetas: marcas estarcidas del bulto */
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiquetas .etiqueta { font-size: 13px; font-weight: 700; line-height: 1.25; padding: 5px 8px; }
.etiqueta--ultimas { background: var(--borravino); color: #fff; }
.etiqueta--anticipo { background: #e4d7f0; color: var(--tinta); } /* violeta claro, como en el Excel */
.etiqueta--volumen { background: var(--verde); color: #fff; }
.etiqueta--nuevo { background: var(--tinta); color: #fff; }
.etiqueta--promo { background: var(--tinta); color: #fff; }
.vista-lista .etiquetas { display: none; }
.linea-pedido__total small, .remito__promo, .nota-pedido__promo { display: block; font-size: 13px; font-weight: 600; color: var(--verde); }
.remito__promo { grid-column: 1 / -1; }

/* ───────── Índice: la lista impresa ───────── */
.bloque-indice { background: var(--verde); }
.lista-impresa { background: var(--blanco); max-width: 760px; margin-inline: auto; padding: 64px clamp(24px, 5vw, 64px); clip-path: polygon(0 12px, 4% 0, 8% 12px, 12% 0, 16% 12px, 20% 0, 24% 12px, 28% 0, 32% 12px, 36% 0, 40% 12px, 44% 0, 48% 12px, 52% 0, 56% 12px, 60% 0, 64% 12px, 68% 0, 72% 12px, 76% 0, 80% 12px, 84% 0, 88% 12px, 92% 0, 96% 12px, 100% 0, 100% 100%, 0 100%); }
.lista-impresa h2 { margin: 0; text-align: center; font-weight: 800; font-size: clamp(32px, 4vw, 48px); letter-spacing: -0.035em; }
.lista-impresa > p { text-align: center; margin: 12px auto 36px; max-width: 46ch; font-size: 18px; color: var(--tinta-2); }
.lista-impresa ul { list-style: none; margin: 0; padding: 0; display: grid; }
.lista-impresa li a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; text-decoration: none; font-weight: 650; font-size: 19px; color: var(--tinta); }
@media (hover: hover) { .lista-impresa li a:hover { color: var(--borravino); } }
.lista-impresa li span { font-weight: 500; font-size: 15px; color: var(--tinta-2); white-space: nowrap; }
.paginas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 36px; }

/* ───────── La Reserva ───────── */
.reserva-teaser { background: #000; color: #fff; padding: clamp(80px, 10vw, 150px) 0; }
.reserva-teaser__grilla { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.reserva-teaser h2, .reserva-pagina h1 { margin: 0; font-weight: 800; font-size: clamp(56px, 8vw, 128px); line-height: 0.9; letter-spacing: -0.015em; color: var(--dorado); }
.reserva-teaser__texto { display: grid; gap: 22px; }
.reserva-teaser__texto p { margin: 0; font-size: 20px; line-height: 1.45; max-width: 34ch; }
.vitrina { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vitrina figure { margin: 0; background: #161512; display: flex; flex-direction: column; }
.vitrina__foto { all: unset; cursor: pointer; aspect-ratio: 3 / 4; position: relative; display: block; background: #1f1d18; }
.vitrina__foto img { position: absolute; left: 18%; top: 8%; width: 64%; height: 88%; object-fit: contain; transition: transform 320ms var(--ease-out); }
@media (hover: hover) { .vitrina__foto:hover img { transform: translateY(-6px); } }
.vitrina__foto:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }
.vitrina figcaption { padding: 14px 16px 18px; display: grid; gap: 6px; font-weight: 600; font-size: 15px; line-height: 1.3; }
.vitrina figcaption b { color: var(--dorado); font-weight: 800; font-size: 20px; }

.vista:has(.reserva-pagina) { padding: 0; }
.reserva-pagina { background: #000; color: #fff; padding: clamp(28px, 4vw, 56px) 0 clamp(80px, 9vw, 140px); min-height: 100svh; }
.reserva-pagina .volver { color: var(--dorado-claro); }
.reserva-pagina__cabeza { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: end; margin: 12px 0 clamp(40px, 5vw, 72px); }
.reserva-pagina__cabeza p { margin: 18px 0 0; font-size: 20px; line-height: 1.45; max-width: 36ch; }
.reserva-pagina__servicio { margin: 0; display: grid; gap: 4px; }
.reserva-pagina__servicio div { background: #161512; padding: 18px 20px; }
.reserva-pagina__servicio dt { font-weight: 750; font-size: 18px; color: var(--dorado); }
.reserva-pagina__servicio dd { margin: 4px 0 0; font-family: var(--f-serif); font-size: 17px; color: #e9e6df; }
.cajas--reserva .caja { background: #161512; color: #fff; }
.cajas--reserva .producto__foto { background: #1f1d18; }
.cajas--reserva .silueta { color: #3a362d; }
.cajas--reserva .producto__sinfoto { color: #8f8a7e; }
.cajas--reserva .caja__precio b { color: var(--dorado); }
.cajas--reserva .caja__precio span, .cajas--reserva .caja__detalle, .cajas--reserva .caja__precio s { color: #c9c4b8; }
.cajas--reserva .cinta-v__variedad { background: var(--borravino); }
.cajas--reserva .caja__accion .agregar { background: var(--dorado); color: var(--tinta); }
@media (hover: hover) { .cajas--reserva .caja__accion .agregar:hover { background: var(--dorado-claro); } }
.cajas--reserva .contador { background: #1f1d18; color: #fff; }
.reserva-pagina__pie { margin: 32px 0 0; font-size: 14px; color: #c9c4b8; }

/* Preguntas frecuentes: tarjetas por tono, sin líneas */
.preguntas { border-top: 0; gap: 6px; }
.preguntas details { border-bottom: 0; background: var(--blanco); padding: 0 16px; }
.preguntas details p { color: var(--tinta); }

/* Carrito: vaciar todo el pedido (segundo toque para confirmar) */
.hoja__pie-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hoja__vaciar { flex: none; border: 0; background: none; padding: 8px 0; font-weight: 650; font-size: 14px; color: var(--borravino); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.hoja__vaciar.confirmar { background: var(--borravino); color: #fff; text-decoration: none; padding: 8px 12px; animation: aparecer-suave 160ms var(--ease-out); }
.hoja-vacia p .boton-borde { margin-top: 6px; }

/* Páginas de colección */
.coleccion .vista__bajada { max-width: 52ch; }

/* Pie: el dorso de la caja, en borravino */
.pie { background: var(--borravino); color: var(--dorado-claro); }
.pie .marca__nombre { color: var(--dorado-claro); font-size: clamp(48px, 7vw, 96px); font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; }
.pie a { color: #fff; }
.pie__legal { color: var(--dorado-claro); }

@media (prefers-reduced-motion: reduce) {
  .estiba-grafica, .estiba-grafica * { animation: none !important; }
  .estiba-grafica .zuncho { stroke-dashoffset: 0; }
  .casa-grafica .casa__envio { transform: translate(var(--dx2), var(--dy2)); }
  .casa-grafica .casa__ventana { fill: #f1dca4; }
}
@media (max-width: 1080px) {
  .cajas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .portada { grid-template-columns: 1fr; gap: 0; }
  .estiba { order: -1; min-height: 0; padding: 20px 0 0; }
  .estiba-grafica { max-width: 340px; }
  .caja-frente__cuerpo { padding-top: 28px; }
  .caja-frente__marca { font-size: clamp(52px, 13vw, 96px); }
  .cajas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reserva-teaser__grilla, .reserva-pagina__cabeza { grid-template-columns: 1fr; }
  .vitrina { grid-template-columns: 1fr 1fr; }
  .vitrina figure:nth-child(3) { display: none; }
}
@media (max-width: 640px) {
  .caja-frente__marca { font-size: 15vw; }
}
@media (max-width: 480px) {
  .cajas { gap: 8px; }
  .caja__cuerpo { padding: 12px; }
  .caja__nombre { font-size: 15px; }
  .caja__precio b { font-size: 20px; }
  .sello { width: 50px; height: 50px; font-size: 15px; }
  .sello small { font-size: 11px; }
  .cinta-v { width: 30px; right: 6px; }
  .cinta-v__variedad { font-size: 12px; }
  .cinta-v__bulto { width: 36px; font-size: 13px; }
  .cinta-v__medida { width: 30px; font-size: 11px; }
  .lista-impresa { padding: 48px 20px; }
}

/* ───────── Mis pedidos: cada pedido con su recorrido ─────────
   Al entrar, las tarjetas llegan escalonadas y la cajita viaja por la barra hasta la etapa
   en la que está el pedido. Al pasar el cursor (o con el foco) la cajita da un saltito. */
.mis-pedidos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 820px; }
.pedido-tarjeta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; background: var(--blanco); animation: tarjeta-llega 480ms var(--ease-out) both; animation-delay: calc(var(--n, 0) * 70ms); }
@keyframes tarjeta-llega { from { opacity: 0; transform: translateY(14px); } }
.pedido-tarjeta__enlace { display: grid; gap: 16px; padding: 18px 20px 16px; text-decoration: none; color: var(--tinta); }
.pedido-tarjeta__enlace:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
.pedido-tarjeta__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.pedido-tarjeta__cabeza b { font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.pedido-tarjeta__cabeza .num:not(b) { color: var(--tinta-2); font-size: 15px; }
.pedido-tarjeta__cabeza .estado-pastilla { margin-left: auto; }
.pedido-tarjeta--entregado .estado-pastilla { background: var(--verde); color: #fff; }
.pedido-tarjeta__ver { font-weight: 650; font-size: 14px; color: var(--verde); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: transparent; transition: text-decoration-color 160ms var(--ease-out); }
@media (hover: hover) { .pedido-tarjeta__enlace:hover .pedido-tarjeta__ver { text-decoration-color: currentColor; } }
.pedido-tarjeta__repetir { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 22px; border: 0; background: var(--verde-claro); color: var(--verde-hondo); font-weight: 700; font-size: 14px; cursor: pointer; transition: background-color 160ms var(--ease-out); }
@media (hover: hover) { .pedido-tarjeta__repetir:hover { background: var(--dorado-claro); } }
.pedido-tarjeta__repetir:active { transform: scale(0.97); }

/* La ruta: barra entre el centro de la primera y la última etapa */
.ruta-mini { position: relative; display: block; padding-top: 30px; }
.ruta-mini__barra { position: absolute; top: 10px; left: 12.5%; right: 12.5%; height: 6px; background: var(--fondo); }
.ruta-mini__lleno { position: absolute; inset: 0 auto 0 0; width: calc(var(--avance) * 100%); background: var(--verde); animation: ruta-llena 900ms var(--ease-out) both; animation-delay: calc(240ms + var(--n, 0) * 70ms); }
@keyframes ruta-llena { from { width: 0; } }
.ruta-mini__caja {
  position: absolute; top: -4px; left: calc(12.5% + var(--avance) * 75%); translate: -50% 0;
  width: 34px; height: 34px; display: grid; place-items: center; background: var(--borravino); color: #fff;
  animation: caja-viaja 900ms var(--ease-out) both; animation-delay: calc(240ms + var(--n, 0) * 70ms);
}
.pedido-tarjeta--entregado .ruta-mini__caja { background: var(--verde); }
@keyframes caja-viaja { from { left: 12.5%; } }
.ruta-mini__caja svg { transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .pedido-tarjeta__enlace:hover .ruta-mini__caja svg { animation: saltito 520ms var(--ease-out); } }
.pedido-tarjeta__enlace:focus-visible .ruta-mini__caja svg { animation: saltito 520ms var(--ease-out); }
@keyframes saltito { 30% { transform: translateY(-7px); } 60% { transform: translateY(0); } 78% { transform: translateY(-2px); } }
.ruta-mini__etapas { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; font-size: 13px; color: var(--tinta-3); }
.ruta-mini__etapas .hecha { color: var(--tinta); font-weight: 650; }

.pedido-tarjeta__acciones { display: flex; flex-direction: column; }
.pedido-tarjeta__acciones .pedido-tarjeta__repetir { flex: 1; }
.pedido-tarjeta__olvidar { border: 0; background: var(--papel); padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--tinta-2); cursor: pointer; }
@media (hover: hover) { .pedido-tarjeta__olvidar:hover { color: var(--borravino); } }
.pedido-tarjeta__olvidar.confirmando { background: var(--borravino); color: #fff; }
.pedido-tarjeta--cancelado .ruta-mini__caja { background: var(--tinta-3); }
.pedido-tarjeta--cancelado .ruta-mini__lleno { background: var(--tinta-3); }
.pedido-tarjeta--cancelado .estado-pastilla { background: var(--borravino-claro); color: var(--borravino); }
.pedido-tarjeta--cancelado .pedido-tarjeta__cabeza b { text-decoration: line-through; text-decoration-thickness: 2px; }
.aviso--cancelado { background: var(--borravino-claro); }
.aviso--cancelado svg { color: var(--borravino); }

/* Sin pedidos todavía: una caja abierta que espera */
.mis-pedidos__vacio { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; max-width: 760px; padding: 28px; background: var(--blanco); }
.mis-pedidos__vacio h2 { margin: 0 0 8px; font-weight: 800; font-size: 26px; letter-spacing: -0.03em; }
.mis-pedidos__vacio p { margin: 0 0 16px; color: var(--tinta-2); max-width: 46ch; }
.mis-pedidos__vacio p:last-child { margin-bottom: 0; }
.mis-pedidos__caja { width: 96px; height: 96px; display: grid; place-items: center; background: var(--verde); color: #fff; animation: espera 2.4s var(--ease-out) 600ms 2; }
@keyframes espera { 0%, 100% { transform: none; } 12% { transform: translateY(-10px) rotate(-4deg); } 24% { transform: translateY(0) rotate(0); } 32% { transform: translateY(-4px); } 40% { transform: none; } }

@media (max-width: 640px) {
  .pedido-tarjeta { grid-template-columns: 1fr; }
  .pedido-tarjeta__acciones { flex-direction: row; }
  .pedido-tarjeta__acciones > * { flex: 1; }
  .pedido-tarjeta__cabeza .estado-pastilla { margin-left: 0; }
  .pedido-tarjeta__repetir { flex-direction: row; padding: 12px; }
  .ruta-mini__etapas { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pedido-tarjeta, .ruta-mini__lleno, .ruta-mini__caja, .mis-pedidos__caja { animation: none; }
  .pedido-tarjeta__enlace:hover .ruta-mini__caja svg, .pedido-tarjeta__enlace:focus-visible .ruta-mini__caja svg { animation: none; }
}

/* ───────── Orden, bulto cerrado y anticipación (22/10) ───────── */
.orden { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font-weight: 600; font-size: 15px; }
/* color propio: en La Reserva el fondo es oscuro y el texto heredado quedaba blanco sobre blanco */
.orden .selector { min-width: 180px; color: var(--tinta); }
.etiqueta--bulto { background: #f2c230; color: var(--tinta); }
.remito__aviso { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 12px 16px; background: #ece4f4; color: var(--tinta); font-size: 14px; line-height: 1.45; }
.remito__aviso svg { flex: none; margin-top: 1px; }
@media (max-width: 640px) {
  /* En el celular el orden sigue a mano: los filtros pasan a un renglón propio. */
  .herramientas__filtros { flex: 1 1 100%; }
  .herramientas__filtros .selector { display: block; flex: 1 1 auto; width: auto; }
}