/* ══════════════════════════════════════════════════════════════
   Los modelos generales del catálogo público.

   SEGUNDA VUELTA. La primera se cayó: parecían dibujos. El problema
   no era el color — era que el mundo estaba PINTADO con degradados y
   el producto era una silueta flotando encima. Un dibujo, no un
   lugar.

   Qué cambió, y es lo único que importa:

     1. El material es una FOTO. Madera, chapa oxidada, cromo,
        hormigón, revoque: fotos de material reales (Poly Haven, CC0).
        Un degradado no es madera, por bien hecho que esté.

     2. El producto va en una TARJETA con su foto recortada a la caja
        (`object-fit: cover`), no suelto sobre el fondo. Es la misma
        idea que las cartas de KFB Gastro, que es la vara.

   Lo que se salvó de la primera vuelta y sigue igual: la trastienda
   pegada con cinta, el cartel enlozado de la ruta, el toldito de
   arriba y las cosas de la heladera.

   El del polígono (catalogo-publico.css) es del Kiosko Cazador.
   ══════════════════════════════════════════════════════════════ */

/* La veta de nogal, declarada UNA vez. La usan el estante de la
   vitrina y la puerta de entrada (splash.js), que si no tendría que
   escribir la ruta por su cuenta: en el archivo con todo embebido eso
   mete la misma foto dos veces y suma un mega al pedo -- el mismo
   error que ya empujó el artifact por encima del tope de 16 MB. */
:root {
  --kfb-madera: url('../assets/texturas/madera-nogal.jpg');
  /* El cromo lo usan la manija y la parrilla de la heladera, y la
     puerta de entrada de ese modelo. Declarado una vez: escrito tres
     veces, el archivo con todo embebido carga la misma foto tres
     veces y suma casi dos megas al pedo. */
  --kfb-cromo: url('../assets/texturas/cromo.jpg');
  --kfb-chapa: url('../assets/texturas/chapa-oxido.jpg');
}

.cat-root[data-modelo] { --caja: 1100px; }
.cat-root[data-modelo] .cat-pie { position: relative; z-index: 3; }

.cat-vacio-suave {
  position: relative; z-index: 3;
  text-align: center; padding: 60px 24px; opacity: .75; font-size: .95rem;
}

/* ══════════════════════════════════════════════════════════════
   LA TARJETA — la misma para todos.

   Es lo que separa esto de un dibujo: una foto de verdad, recortada
   a la caja, con su sombra apoyando sobre la superficie del modelo.
   Cada mundo la viste distinto (marco, precio, superficie) pero la
   estructura no cambia.
   ══════════════════════════════════════════════════════════════ */
.cat-tarjeta {
  margin: 0;
  width: 168px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease;
}
.cat-tarjeta.grande { width: 232px; }
.cat-tarjeta.media  { width: 190px; }
.cat-tarjeta:hover { transform: translateY(-3px); }

.ct-foto {
  position: relative;
  height: 148px;
  overflow: hidden;
  background: #0000001f;
}
.cat-tarjeta.grande .ct-foto { height: 200px; }
.cat-tarjeta.media  .ct-foto { height: 166px; }

/* `cover`, no `contain`: la foto llena la caja y se recorta. Es lo
   que hace que se vea como una foto y no como una calcomanía. */
.ct-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.cat-tarjeta:hover .ct-img { transform: scale(1.05); }
.ct-img.sin-foto {
  display: grid; place-items: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.2rem; font-weight: 700; opacity: .35;
}

.ct-top {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  padding: 3px 9px; border-radius: 9999px;
  background: rgba(12,12,12,.82); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff; font-size: .58rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.ct-agotado {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  background: rgba(0,0,0,.56);
}
.ct-agotado b {
  color: #fff; font-size: .72rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1.5px solid #fff; border-radius: 4px; padding: 4px 10px;
  transform: rotate(-7deg);
}
.cat-tarjeta.agotada .ct-img { filter: grayscale(1) brightness(.75); }

/* El nombre va ARRIBA de la foto, no abajo. Pedido de Canu el 25/08.
   Se lee primero qué es y después se mira la foto -- que es el orden en
   que uno busca algo en una lista de precios, no en que lo mira en una
   góndola. Y el precio queda solo abajo, que es lo último que se mira
   y lo que se compara entre tarjetas. */
.ct-nom {
  font-size: .76rem; line-height: 1.3; min-width: 0;
  padding: 9px 11px 7px;
  /* Dos renglones y corta. Con uno solo, "Alfajor Triple Genio Negro"
     queda en "Alfajor Tripl…" y no se sabe cuál es; sin tope, una
     tarjeta con nombre largo empuja a las de al lado y la fila queda
     despareja. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.ct-pie {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; padding: 8px 11px 11px;
}
.ct-precio { flex: none; }

.cat-root[data-modelo] .abanico { padding: 0 10px 10px; }

/* ══════════════════════════════════════════════════════════════
   1 · LA VITRINA
   Mostrador de vidrio, luz tibia adentro. El marco es madera de
   nogal FOTOGRAFIADA, no un degradado marrón.
   ══════════════════════════════════════════════════════════════ */
body[data-modelo="vitrina"] { background: #17100b; }
.cat-root[data-modelo="vitrina"] {
  --bronce: #c9a227; --bronce-cl: #f0d88a; --crema: #fdf6e8;
  background: #17100b; color: var(--crema);
}
.vit-escena { position: fixed; inset: 0; z-index: 0; }
/* Un ALMACÉN DE RAMOS GENERALES: mostrador largo de madera, estantes
   con frascos y latas, la balanza, la caja registradora. Luz tibia.

   Cuarta foto para este modelo. Se probaron y cayeron: una
   verdulería, las góndolas de supermercado (repletas de marcas
   ajenas, que de fondo son un quilombo de logos de otros) y el
   mercado mayorista de Rungis -- "todos los cajones", dicho por el
   usuario, y tenía razón: eran pilas de cajones, no una vitrina.
   Esta vuelve a lo que el modelo dice que es: un LOCAL, con vitrinas
   y estantería de madera. */
.vit-madera {
  position: absolute; inset: 0;
  background: url('../assets/escena/vitrina.jpg') center 46%/cover no-repeat;
  filter: brightness(.42) saturate(.72) contrast(1.04);
}
.vit-luz {
  position: absolute; inset: 0;
  background: radial-gradient(120% 72% at 50% 16%, #ffcf8f38 0%, #ffb35526 34%, #0000 70%);
}
.vit-brillo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(104deg, #0000 38%, #fff6e016 46%, #fff6e006 52%, #0000 60%);
}

.vit-tapa { position: relative; z-index: 3; padding: 46px 18px 18px; text-align: center; }
/* Bronce PULIDO, no bronce oscuro. El texto grabado va casi negro y
   contra el bronce viejo (#6d5511) el contraste daba 2,41 -- abajo del
   4,5 que hace falta para leer. Grabado sobre metal es de por sí de
   poco contraste; se resuelve puliendo la chapa, no aclarando el
   grabado, que dejaría de parecer grabado. */
.vit-chapa {
  display: inline-block; max-width: 620px; padding: 20px 34px; border-radius: 3px;
  background: linear-gradient(168deg, #dcbc57, #b8973a 55%, #cba848);
  border: 1px solid #00000055;
  box-shadow: 0 12px 34px #0009, inset 0 1px 0 #fff3c480, inset 0 -2px 6px #00000055;
}
.vit-logo { width: 54px; height: 54px; object-fit: contain; margin-bottom: 8px; }
.vit-chapa h1 {
  margin: 0; font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem, 5vw, 2.2rem); font-weight: 700;
  color: #241a05; text-shadow: 0 1px 0 #ffe9a866;
}
.vit-chapa p { margin: 6px 0 0; font-size: .82rem; color: #2f2308; opacity: .85; }

.vit-compart { position: relative; z-index: 3; max-width: var(--caja); margin: 0 auto 30px; padding: 0 16px; }
.vit-divisor { display: flex; align-items: center; gap: 12px; padding: 26px 0 12px; }
.vit-divisor::after {
  content: ''; flex: 1; height: 2px;
  background: linear-gradient(90deg, var(--bronce), #8a6f1a 60%, #0000);
  box-shadow: 0 1px 0 #0006;
}
.vit-placa {
  font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--bronce-cl);
}
.vit-divisor em { font-style: normal; font-size: .64rem; letter-spacing: .12em; color: #ffffff5c; order: 3; }

/* El estante de vidrio: una línea de luz donde apoyan las tarjetas. */
/* Los productos apoyan en un ESTANTE: una tabla de madera de
   verdad debajo de la fila, no una línea de 1px. Es lo que hace que
   estén parados sobre algo y no flotando. */
.vit-estante {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px;
  padding: 10px 14px 26px;
}
.vit-estante::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 16px;
  background: var(--kfb-madera) center/220px repeat;
  filter: brightness(.85);
  border-radius: 2px;
  box-shadow: 0 8px 18px -6px #000c, inset 0 1px 0 #ffffff45, inset 0 -4px 8px #00000066;
}
.vit-pieza {
  background: linear-gradient(#241a10f0, #150e08f0);
  border: 1px solid #ffffff14;
  box-shadow: 0 14px 26px -14px #000;
}
.vit-pieza:hover { box-shadow: 0 20px 34px -14px #000, 0 0 0 1px var(--bronce); }
.vit-pieza .ct-nom { color: #e8dcc4; }
/* La tarjetita del precio, parada en su clip. */
.vit-precio {
  background: linear-gradient(#fffdf5, #efe4cd); color: #23180a;
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.25rem;
  padding: 3px 9px 4px; border-radius: 2px;
  box-shadow: 0 3px 6px -2px #000a; transform: rotate(-.8deg);
}

/* ══════════════════════════════════════════════════════════════
   2 · LA HELADERA
   Puerta de vidrio de noche. La parrilla es cromo FOTOGRAFIADO.
   ══════════════════════════════════════════════════════════════ */
body[data-modelo="heladera"] { background: #05080b; }
.cat-root[data-modelo="heladera"] { --hielo: #cfeaf7; background: #05080b; color: var(--hielo); }

.hel-escena { position: fixed; inset: 0; z-index: 0; }
/* Foto de una heladera de supermercado de verdad. El degradado frío
   queda ARRIBA de la foto, no en su lugar: da la luz de adentro sin
   tapar que es una foto. */
.hel-frio {
  position: absolute; inset: 0;
  background:
    radial-gradient(140% 80% at 50% 0%, #2b6d8f4d 0%, #0e2a3a66 40%, #04070aa8 78%),
    url('../assets/escena/heladera.jpg') center/cover no-repeat;
  filter: saturate(.75);
}
.hel-vaho {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(2.5px 3px at 12% 14%, #ffffff5e, #0000),
    radial-gradient(2px 2.6px at 31% 8%,  #ffffff4a, #0000),
    radial-gradient(3px 3.6px at 68% 18%, #ffffff55, #0000),
    radial-gradient(1.6px 2px at 84% 11%, #ffffff44, #0000),
    radial-gradient(2px 2.4px at 22% 38%, #ffffff3a, #0000),
    radial-gradient(1.4px 1.8px at 55% 44%, #ffffff33, #0000),
    radial-gradient(2.2px 2.6px at 78% 52%, #ffffff33, #0000),
    radial-gradient(1.2px 1.5px at 40% 66%, #ffffff2a, #0000),
    radial-gradient(1.6px 2px at 88% 74%, #ffffff26, #0000),
    radial-gradient(1.2px 1.4px at 16% 84%, #ffffff1f, #0000);
}
.hel-junta {
  position: absolute; inset: 0; pointer-events: none;
  border: 14px solid #0c1116;
  box-shadow: inset 0 0 0 2px #1b262e, inset 0 0 70px #000a;
}
.hel-manija {
  position: absolute; right: 22px; top: 18%; bottom: 18%; width: 10px;
  border-radius: 6px;
  background: var(--kfb-cromo) center/200px repeat;
  box-shadow: 0 0 18px #9fd6f22e, inset 0 0 0 1px #ffffff33;
}
@media (max-width: 700px) { .hel-manija { display: none; } }

.hel-tapa { position: relative; z-index: 3; padding: 44px 18px 6px; text-align: center; }
.hel-calco {
  display: inline-block; max-width: 600px; padding: 16px 28px;
  background: #f4fbff; color: #0a1a24; border-radius: 2px;
  transform: rotate(-1.1deg);
  box-shadow: 0 10px 26px #000c, 0 0 0 1px #ffffff30;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 96% 100%, 0 100%);
}
.hel-logo { width: 50px; height: 50px; object-fit: contain; margin-bottom: 6px; }
.hel-calco h1 {
  margin: 0; font-family: 'Archivo Black', Inter, sans-serif;
  font-size: clamp(1.3rem, 4.6vw, 1.9rem); letter-spacing: -.02em; text-transform: uppercase;
}
.hel-calco p { margin: 5px 0 0; font-size: .8rem; opacity: .7; }

.hel-nivel { position: relative; z-index: 3; max-width: var(--caja); margin: 0 auto; padding: 26px 26px 0; }
.hel-productos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding: 0 6px 8px; }
/* La parrilla de cromo, con foto de metal de verdad. */
.hel-parrilla {
  position: relative; height: 18px; border-radius: 2px;
  background: var(--kfb-cromo) center/300px repeat;
  box-shadow: 0 7px 18px -6px #000, inset 0 1px 0 #ffffff9c, inset 0 -3px 6px #0006;
}
.hel-parrilla::before {
  content: ''; position: absolute; left: 0; right: 0; top: -7px; height: 7px;
  background: repeating-linear-gradient(90deg, #8fa2ad 0 2px, #0000 2px 16px);
  opacity: .7;
}
.hel-fleje {
  position: absolute; left: 14px; top: 10px;
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 5px;
  background: linear-gradient(#fdfefe, #d8e4ec); color: #12222c;
  border-radius: 0 0 3px 3px;
  font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  box-shadow: 0 5px 10px -4px #000b, inset 0 -1px 0 #00000018;
}
.hel-fleje em { font-style: normal; opacity: .5; letter-spacing: .06em; }

.hel-pieza {
  background: linear-gradient(#0f1c25e6, #08131ae6);
  border: 1px solid #bfe6ff1f;
  box-shadow: 0 14px 26px -14px #000, inset 0 1px 0 #ffffff12;
}
.hel-pieza .ct-nom { color: #cfe6f5c4; }
.hel-pieza .ct-img { filter: drop-shadow(-2px 0 0 #bfe6ff2e); }
.hel-precio {
  background: #eaf6fd; color: #0b1e2a; border-radius: 2px;
  font-weight: 900; font-size: 1.2rem; padding: 3px 9px 4px;
  box-shadow: 0 3px 7px -2px #000a;
}

/* ══════════════════════════════════════════════════════════════
   3 · EL TOLDO — EN UN JARDÍN
   Era un puesto de feria; el usuario lo mandó al jardín. El toldito
   de arriba y el alambre con broches quedan: en un jardín el alambre
   se lee todavía mejor, es un tendedero.
   ══════════════════════════════════════════════════════════════ */
body[data-modelo="toldo"] { background: #dfe3cf; }
.cat-root[data-modelo="toldo"] { --tinta: #22271b; --raya: #c8332f; background: #e6eada; color: var(--tinta); }

.tol-escena { position: fixed; inset: 0; z-index: 0; }
/* El jardín, fotografiado.

   El velo va CASI EN NADA (6-11-20%). Empezó en 75-92%, bajó a
   75-92 → 14-30-52 y todavía se veía el film lechoso encima de la
   foto: el usuario lo marcó tres veces ("el toldo todavía sigue con
   transparencia, dale menos"). Con la foto tapada por un velo, el
   parral deja de ser un lugar y pasa a ser un fondo verdoso, que es
   justo lo que hace que un modelo parezca dibujado.
   Se puede aflojar tanto porque acá la legibilidad NO la pone el
   velo: las tarjetas del toldo son de papel casi blanco y opaco, y
   el texto va adentro de ellas. */
/* Un PARRAL: postes de madera, alambre, la parra arriba y las
   montañas atrás. Antes era un jardín inglés con un banco -- "una
   verga", dicho por el usuario, y tenía razón: era el patio de una
   casa ajena, no un lugar donde vender.
   El parral encima justifica el alambre con broches mejor que
   cualquier otra cosa: el alambre YA está en la foto. */
.tol-pared {
  position: absolute; inset: 0;
  background: url('../assets/escena/toldo.jpg') center 52%/cover no-repeat;
  filter: brightness(1) saturate(.95);
}
.tol-pared::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(#e6eada0f 0%, #e6eada1c 45%, #dfe3cf33 100%);
}
.tol-lona {
  position: absolute; top: 0; left: 0; right: 0; height: 84px;
  background: repeating-linear-gradient(90deg, var(--raya) 0 34px, #f6f1e7 34px 68px);
  box-shadow: 0 10px 22px -8px #0006;
}
.tol-lona::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -13px; height: 14px;
  background: radial-gradient(circle at 17px 0, #0000 13px, #e9e1d3 13.5px);
  background-size: 34px 14px;
}
.tol-sol {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 60% at 22% 0%, #fff8e055 0%, #0000 55%),
              linear-gradient(200deg, #0000 60%, #4a3c2a24 100%);
}

.tol-tapa { position: relative; z-index: 3; padding: 108px 18px 8px; text-align: center; }
.tol-cartel {
  display: inline-block; max-width: 640px; padding: 18px 34px 20px;
  background: #fffaf0; border: 3px solid var(--tinta); border-radius: 4px;
  transform: rotate(-.8deg);
  box-shadow: 6px 8px 0 #23201b1f, 0 16px 26px -18px #000;
}
.tol-logo { width: 56px; height: 56px; object-fit: contain; margin-bottom: 6px; }
.tol-cartel h1 {
  margin: 0; font-family: 'Caveat', 'Playfair Display', cursive;
  font-size: clamp(2rem, 7vw, 3.1rem); font-weight: 700; line-height: 1;
}
.tol-cartel p { margin: 6px 0 0; font-family: 'Caveat', cursive; font-size: 1.15rem; opacity: .7; }

.tol-tanza { position: relative; z-index: 3; max-width: var(--caja); margin: 0 auto; padding: 34px 18px 0; }
.tol-alambre { position: relative; height: 2px; background: #6b6152; box-shadow: 0 1px 0 #ffffff80; }
.tol-carton {
  position: absolute; left: 8px; top: -14px;
  display: inline-block; padding: 5px 14px 6px;
  background: #d9c49b; color: #2a2317;
  font-family: 'Caveat', cursive; font-size: 1.15rem; font-weight: 700;
  transform: rotate(-1.6deg); box-shadow: 2px 4px 0 #00000018;
  clip-path: polygon(0 6%, 99% 0, 100% 92%, 2% 100%);
}
.tol-carton em { font-style: normal; opacity: .55; font-size: .8em; }
.tol-colgados { display: flex; flex-wrap: wrap; gap: 26px 20px; padding: 26px 4px 0; }

/* Cuelga del alambre: el broche arriba y la sombra dura del sol de
   mediodía sobre la pared. */
.tol-pieza {
  background: #fffdf7; border: 1px solid #23201b1a;
  box-shadow: 5px 8px 0 #23201b14, 0 14px 22px -16px #000;
}
.tol-pieza::before {
  content: ''; position: absolute; left: 50%; top: -13px; width: 9px; height: 20px;
  margin-left: -4.5px; z-index: 4;
  background: linear-gradient(#c9a97a, #a2814f);
  border-radius: 2px; box-shadow: 0 2px 3px #0003;
}
.tol-pieza { overflow: visible; }
.tol-pieza .ct-foto { border-radius: 12px 12px 0 0; overflow: hidden; }
.tol-precio {
  background: #f4e3b8; color: #7a1f1c;
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.8rem; line-height: 1;
  padding: 3px 11px 4px; transform: rotate(-2deg);
  clip-path: polygon(1% 8%, 99% 0, 100% 90%, 0 100%);
}

/* ══════════════════════════════════════════════════════════════
   4 · LA RUTA
   Cielo grande y sol bajo. El cartel es chapa OXIDADA fotografiada
   y la mesada es madera lavada por el sol, también foto.
   ══════════════════════════════════════════════════════════════ */
body[data-modelo="ruta"] { background: #c98f52; }
.cat-root[data-modelo="ruta"] { --chapa: #1d4f6b; --hueso: #fdf3e2; color: #2b1d10; }

.rut-escena { position: fixed; inset: 0; z-index: 0; }
/* La ruta va DE FRENTE y se pierde en el punto de fuga, con las
   montañas atrás y el asfalto ocupando el primer plano. Es la
   composición que marcó el usuario con una referencia propia (stock
   de magnific.com, NO se usó el archivo).
   Tercera foto. La primera era una vista desde arriba; la segunda
   tenía la composición bien pero salía árida, y "parece un desierto"
   ya lo había rechazado una vez. Esta es la Carretera Austral: el
   camino se aleja, lomas verdes con árboles y montañas nevadas atrás.
   Patagónica, que además le queda mejor a un producto argentino.
   El velo de abajo era un marrón de arena (#a8763f) y teñía de
   desierto cualquier cosa que hubiera detrás -- eso ya se cambió por
   un verde-tierra que acompaña. */
.rut-cielo {
  position: absolute; inset: 0;
  background: url('../assets/escena/ruta.jpg') center 46%/cover no-repeat;
}
.rut-cielo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(#6ea7cd1f 0%, #e8d9b52e 46%, #6d6a3fa8 100%);
}

/* ── El kiosco al costado de la ruta — PENDIENTE ─────────────────
   Se dibujó uno en CSS y el usuario lo bajó: "malísimo". Tenía razón
   -- un kiosco tiene volumen y no es un objeto plano como el cartel
   de distancias; dibujarlo lo delata.
   Se saca en vez de dejarlo puesto: un kiosco feo es peor que
   ninguno. Va a volver como FOTO, cuando se pueda generar la escena
   (ruta de frente + kiosco al costado) o aparezca una libre que ya la
   tenga. Buscadas y descartadas: las fotos de puestos de ruta de
   Commons son de archivos de los años 50, en blanco y negro y dentro
   de una ficha escaneada.
   ──────────────────────────────────────────────────────────────── */

.rut-horizonte {
  position: absolute; left: 0; right: 0; top: 48%; height: 3px;
  background: linear-gradient(90deg, #0000, #6b4a2a99 20%, #6b4a2a99 80%, #0000);
  box-shadow: 0 -10px 24px -8px #fff6e07a;
}
.rut-polvo {
  position: absolute; inset: 0; pointer-events: none; opacity: .3;
  background:
    radial-gradient(1px 1px at 15% 62%, #fff8e6, #0000),
    radial-gradient(1px 1px at 44% 71%, #fff8e6, #0000),
    radial-gradient(1.4px 1.4px at 72% 58%, #fff8e6, #0000),
    radial-gradient(1px 1px at 88% 80%, #fff8e6, #0000);
  background-size: 160px 160px, 210px 210px, 190px 190px, 240px 240px;
}

.rut-tapa { position: relative; z-index: 3; padding: 56px 18px 10px; text-align: center; }
/* Cartel de distancias de ruta: verde reflectivo, borde blanco,
   flecha y los kilómetros a la derecha. Es el que te dice cuánto
   falta para llegar a un lugar — acá el lugar es el kiosco, y falta
   0 km porque ya llegaste.

   Éste SÍ va dibujado, y no es lo mismo que antes: un cartel de ruta
   ES una chapa plana con tipografía y flechas. Dibujarlo es fiel;
   una estantería o una heladera no, por eso ésas son fotos. */
.rut-cartel {
  display: inline-flex; align-items: center; gap: 18px;
  max-width: 680px; padding: 16px 22px;
  background: linear-gradient(#1f7a4d, #14603a);
  border: 3px solid #f4f7f2; border-radius: 8px;
  box-shadow: 0 18px 32px -18px #000, inset 0 0 0 3px #14603a, inset 0 2px 12px #ffffff1f;
  color: #f7fbf8; text-align: left;
}
/* La flecha, como en los carteles de verdad. */
.rut-flecha {
  flex: none; width: 34px; height: 34px;
  background: #f7fbf8;
  clip-path: polygon(0 38%, 58% 38%, 58% 16%, 100% 50%, 58% 84%, 58% 62%, 0 62%);
}
.rut-destino { flex: 1; min-width: 0; }
.rut-logo { width: 42px; height: 42px; object-fit: contain; }
.rut-cartel h1 {
  margin: 0; font-family: 'Archivo Black', Inter, sans-serif;
  font-size: clamp(1.25rem, 4.6vw, 2rem); line-height: 1.05;
  text-transform: uppercase; letter-spacing: -.01em;
  text-shadow: 0 2px 0 #0000004d;
}
.rut-cartel p { margin: 5px 0 0; font-size: .78rem; opacity: .78; }
/* Los kilómetros, a la derecha y separados por una línea, como en
   los carteles de distancia. */
.rut-km {
  flex: none; align-self: stretch; display: flex; align-items: center; gap: 2px;
  padding-left: 18px; border-left: 2px solid #f7fbf847;
  font-family: 'Archivo Black', sans-serif; font-size: 1.9rem; line-height: 1;
}
.rut-km small { font-size: .8rem; opacity: .8; }
@media (max-width: 560px) {
  .rut-cartel { gap: 12px; padding: 13px 15px; }
  .rut-flecha { width: 24px; height: 24px; }
  .rut-km { font-size: 1.3rem; padding-left: 12px; }
}
.rut-poste {
  position: absolute; bottom: -26px; width: 12px; height: 42px; z-index: 2;
  background: url('../assets/texturas/madera-sol.jpg') center/90px repeat;
  filter: brightness(.75);
}
.rut-poste.izq { left: calc(50% - 120px); }
.rut-poste.der { left: calc(50% + 108px); }
@media (max-width: 520px) { .rut-poste { display: none; } }

.rut-tramo { position: relative; z-index: 3; max-width: var(--caja); margin: 0 auto; padding: 40px 18px 0; }
/* El cartel enlozado: chapa oxidada de verdad, con el esmalte
   descascarado en los bordes y sus remaches. */
.rut-enlozado {
  position: relative; display: flex; align-items: baseline; gap: 12px;
  padding: 10px 22px; margin-bottom: 8px;
  background: var(--kfb-chapa) center/300px repeat, var(--chapa);
  background-blend-mode: multiply;
  color: var(--hueso);
  border: 3px solid #f4e8d2; border-radius: 3px;
  box-shadow: 0 8px 16px -10px #000, inset 0 0 30px #00000055;
  clip-path: polygon(0 0, 26% 2%, 62% 0, 100% 3%, 99% 100%, 58% 97%, 18% 100%, 0 96%);
  text-shadow: 0 1px 2px #0009;
}
.rut-enlozado span {
  font-family: 'Archivo Black', sans-serif; text-transform: uppercase;
  font-size: .95rem; letter-spacing: .04em;
}
.rut-enlozado em { font-style: normal; font-size: .62rem; opacity: .7; letter-spacing: .12em; }
.rut-enlozado::before, .rut-enlozado::after {
  content: ''; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, #8d99a0);
}
.rut-enlozado::before { left: 8px; }
.rut-enlozado::after  { right: 8px; }

/* La mesada: madera lavada por el sol, foto. */
/* La mesada va TRANSLÚCIDA, como el tablón de la playa y el cajón de
   la trastienda: era una tabla opaca y no se veía nada del otro lado.
   Es la última de las tres superficies que quedaban tapando el fondo. */
.rut-mesada {
  position: relative; isolation: isolate;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px;
  padding: 18px 14px 20px; border-radius: 3px;
  background: transparent;
  box-shadow: inset 0 2px 0 #ffffff4d, 0 12px 22px -16px #000;
}
.rut-mesada::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: url('../assets/texturas/madera-sol.jpg') center/380px repeat;
  filter: brightness(1.35) saturate(.8);
  opacity: .5;
}
.rut-pieza {
  background: #fdf6e8; border: 1px solid #00000014;
  /* Sombra larga y para un solo lado: el sol está bajo. */
  box-shadow: 14px 10px 22px -14px #3a250f, 0 2px 0 #00000018;
}
.rut-precio {
  background: linear-gradient(#cfd6d9, #98a3a9); color: #16232b; border-radius: 2px;
  font-family: 'Stardos Stencil', 'Archivo Black', sans-serif;
  font-size: 1.2rem; font-weight: 700; padding: 3px 10px 4px;
  box-shadow: inset 0 1px 0 #ffffffb0, inset 0 -1px 2px #00000055, 0 3px 6px -2px #0008;
}

/* ══════════════════════════════════════════════════════════════
   5 · LA TRASTIENDA
   El depósito. Cajón de madera FOTOGRAFIADA sobre pared de hormigón,
   también foto. Una sola lámpara arriba.
   ══════════════════════════════════════════════════════════════ */
body[data-modelo="trastienda"] { background: #0d0b09; }
.cat-root[data-modelo="trastienda"] { --luz: #ffdca8; background: #0d0b09; color: #e8dcc8; }

.tra-escena { position: fixed; inset: 0; z-index: 0; }
/* Un PARQUE DE DIVERSIONES de noche: la vuelta al mundo iluminada, los
   juegos y los puestos abajo. Es lo que pidió el usuario, con sus
   propias referencias del Parque de la Costa.

   Antes fue hormigón (un material, no un lugar) y después una feria
   que quedó bien pero "muy oscura", dicho por él. Por eso acá el
   brillo va en .78 y no en .5, y el viñeteo abre mucho más: lo que
   tiene que verse son las LUCES, que son la mitad del modelo. */
.tra-pared {
  position: absolute; inset: 0;
  background: url('../assets/escena/parque.jpg') center 52%/cover no-repeat;
  filter: brightness(.78) saturate(1.02);
}
.tra-pared::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(130% 95% at 50% 38%, #0000 52%, #0d0b0994 100%);
}
.tra-lampara {
  position: absolute; inset: 0;
  background: radial-gradient(80% 48% at 50% -4%, #ffdca83a 0%, #ffb85e1a 34%, #0000 68%);
}
.tra-lampara::before {
  content: ''; position: absolute; left: 50%; top: 0; width: 2px; height: 46px;
  margin-left: -1px; background: #4a3f30;
}
.tra-lampara::after {
  content: ''; position: absolute; left: 50%; top: 40px; width: 18px; height: 18px;
  margin-left: -9px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff6dd, #ffb347 60%, #6b4a1a);
  box-shadow: 0 0 40px 14px #ffc46a3d;
}
.tra-charco { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(#0000 55%, #000000a6 100%); }

.tra-tapa { position: relative; z-index: 3; padding: 92px 18px 6px; text-align: center; }
/* La etiqueta pegada con cinta. Esto el usuario lo aprobó: queda. */
.tra-etiqueta {
  position: relative; display: inline-block; max-width: 560px; padding: 20px 34px 22px;
  background: #efe3c8; color: #241c10; transform: rotate(-.7deg);
  box-shadow: 0 14px 30px -16px #000, inset 0 0 0 1px #00000018;
}
.tra-logo { width: 52px; height: 52px; object-fit: contain; margin-bottom: 6px; }
.tra-etiqueta h1 {
  margin: 0; font-family: 'Stardos Stencil', 'Archivo Black', sans-serif;
  font-size: clamp(1.4rem, 5.2vw, 2.2rem); text-transform: uppercase; letter-spacing: .04em;
}
.tra-etiqueta p { margin: 6px 0 0; font-size: .8rem; opacity: .7; }
.tra-cinta {
  position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; margin-left: -46px;
  background: #d8cfae9c; border-left: 1px dashed #ffffff40; border-right: 1px dashed #ffffff40;
  transform: rotate(2.5deg);
}

.tra-cajon { position: relative; z-index: 3; max-width: var(--caja); margin: 0 auto 26px; padding: 0 18px; }
/* El costado del cajón: madera fotografiada con el rubro en esténcil. */
.tra-costado {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 16px; border-radius: 4px 4px 0 0;
  background: url('../assets/texturas/cajon.jpg') center/340px repeat;
  font-family: 'Stardos Stencil', sans-serif; text-transform: uppercase;
  font-size: .95rem; letter-spacing: .12em; color: #1a1108;
  text-shadow: 0 1px 0 #ffe9c44d;
  box-shadow: inset 0 1px 0 #ffffff2b, inset 0 -20px 26px -22px #000;
}
.tra-costado em { font-style: normal; font-size: .6rem; letter-spacing: .1em; opacity: .6; }
/* Adentro del cajón, con las paredes de madera alrededor. */
/* El cajón va TRANSLÚCIDO: se ven las luces del parque por atrás.
   De paso se saca un truco frágil que estaba acá: el `filter` iba en
   el contenedor, así que le pegaba también a las tarjetas de adentro,
   y había que contra-filtrarlas con brightness(1.55). Ahora el filtro
   vive en el ::before, que no tiene hijos, y las tarjetas quedan con
   su brillo real. */
.tra-celdas {
  position: relative; isolation: isolate;
  display: flex; flex-wrap: wrap; gap: 16px;
  padding: 18px 16px 20px;
  background: transparent;
  border-radius: 0 0 4px 4px;
  box-shadow: inset 0 16px 26px -16px #000, 0 16px 30px -22px #000;
}
.tra-celdas::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: url('../assets/texturas/cajon.jpg') center/300px repeat;
  filter: brightness(.62);
  opacity: .58;
}
.tra-pieza {
  background: #17100ae6; border: 1px solid #ffffff12;
  box-shadow: 0 14px 24px -14px #000;
}
.tra-pieza .ct-nom { color: #e8dcc8b5; }
.tra-precio {
  font-family: 'Stardos Stencil', sans-serif; font-size: 1.3rem;
  color: var(--luz); text-shadow: 0 0 12px #ffb85e40;
}

/* ══════════════════════════════════════════════════════════════
   6 · LA PLAYA
   El chiringuito: madera clara fotografiada, techo de paja, palmera
   y sol de mediodía. De la referencia que pasó el usuario se
   portaron tres cosas -- la guirnalda de luces, el cartel redondo
   colgado de dos sogas, y el tablón de madera clara sobre la arena.
   ══════════════════════════════════════════════════════════════ */
body[data-modelo="playa"] { background: #e7d8b6; }
.cat-root[data-modelo="playa"] {
  --arena: #efe0c0; --madera: #b98b52; --mar: #1d8f97; --tinta: #3a2a15;
  background: #efe0c0; color: var(--tinta);
}

.pla-escena { position: fixed; inset: 0; z-index: 0; }
/* Sombrillas a los costados y un pasillo de arena al medio, que va a
   dar al mar. El contenido cae justo en ese pasillo.
   La anterior era un chiringuito de madera y el usuario la rechazó.
   Encuadre a 48%: deja el cielo arriba y la arena abajo. */
.pla-arena {
  position: absolute; inset: 0;
  background: url('../assets/escena/playa.jpg') center 48%/cover no-repeat;
  /* Color de verdad, no lavado. La playa es el modelo mas luminoso de
     los siete y estaba saliendo beige. */
  filter: brightness(1.04) saturate(1.22);
}
/* Sol de mediodía: quema desde arriba y lava el pie. Es lo que
   distingue esta luz de la del jardín, que entra de costado.

   SIN VELO DE ARRIBA A ABAJO. Fue 65-77-93%, después 26-42-62%, y
   seguía saliendo beige. Ahora queda un viñeteo radial que deja el
   centro LIMPIO -- el mismo recurso de la trastienda, que es el que
   al usuario le gustó. La legibilidad no depende de esto: el nombre
   está en el disco de madera y los productos en tarjetas, todos
   opacos. */
.pla-arena::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(135% 100% at 50% 34%, #0000 56%, #e7d8b68a 100%);
}
.pla-sol {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(64% 38% at 62% -6%, #fffdf280 0%, #0000 62%);
}

.pla-tapa { position: relative; z-index: 3; padding: 74px 18px 10px; text-align: center; }
/* Las dos sogas de las que cuelga el disco. Nacen arriba del todo,
   fuera de la vista, como si estuvieran atadas a la viga. */
.pla-soga {
  position: absolute; top: 0; width: 3px; height: 82px;
  background: linear-gradient(#0000, #a98354 22%, #8a683f);
  transform-origin: top center;
}
.pla-soga.izq { left: calc(50% - 62px); transform: rotate(9deg); }
.pla-soga.der { left: calc(50% + 62px); transform: rotate(-9deg); }

/* El cartel REDONDO de madera. El nombre entra siempre: el disco
   crece con el texto en vez de recortarlo (por eso min-width y no
   width fijo, y por eso el padding grande).

   LA MADERA VA BLANQUEADA, y es a propósito. `madera-sol.jpg` tiene
   brillo medio 71 de 255 -- es madera OSCURA, la elegí por el nombre
   del archivo y el nombre del kiosco quedaba ilegible encima. En vez
   de depender de que un archivo sea claro, se lo blanquea acá, que es
   literalmente lo que le hace el sol a la madera en la playa: así el
   contraste sale por construcción y no por suerte. Va en un ::before
   porque un `filter` sobre el elemento le pega también al texto. */
.pla-disco {
  position: relative; z-index: 2; isolation: isolate;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 236px; max-width: min(86vw, 420px);
  padding: 34px 40px;
  border-radius: 50% / 42%;
  background: #e9d3ae;
  border: 3px solid #9a7742;
  box-shadow: inset 0 0 0 6px #ffffff40, 0 16px 28px -18px #000;
  transform: rotate(-1.2deg);
}
.pla-disco::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: url('../assets/texturas/madera-sol.jpg') center/220px repeat;
  filter: brightness(2.15) saturate(.62);
  opacity: .9;
}
.pla-disco > * { position: relative; }
.pla-logo { width: 50px; height: 50px; object-fit: contain; margin-bottom: 4px; }
.pla-disco h1 {
  margin: 0; font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem, 5.2vw, 2.3rem); font-weight: 600; line-height: 1.05;
  color: #2f2010; text-shadow: 0 1px 0 #ffffff5c;
}
/* La bajada se DESBORDABA del disco: caía en dos renglones y se salía
   por los dos costados de la elipse. Se ve en cuanto se mira, y no lo
   agarró ninguna medición -- el texto seguía "dentro" de la caja
   rectangular del elemento, pero la caja es una ELIPSE y las esquinas
   de un rectángulo quedan afuera de una elipse.
   Se acota el ancho y se corta con puntos suspensivos: el nombre del
   kiosco manda, la bajada acompaña. */
.pla-disco p {
  margin: 6px 0 0; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: #4a3418c4;
  max-width: 78%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pla-tramo { position: relative; z-index: 3; max-width: var(--caja); margin: 0 auto; padding: 30px 18px 0; }

/* La guirnalda: el cable cuelga en curva y las lamparitas van
   pinchadas encima. La curva es un borde redondeado, no una imagen. */
.pla-guirnalda {
  position: relative; height: 30px; margin: 0 6px;
  border-bottom: 2px solid #6c5233;
  border-radius: 0 0 46% 46% / 0 0 26px 26px;
}
.pla-guirnalda::after {
  content: ''; position: absolute; left: 4%; right: 4%; bottom: -7px; height: 12px;
  background: radial-gradient(circle at 8px 4px, #ffe6a8 0 4px, #0000 4.6px);
  background-size: 46px 12px;
  filter: drop-shadow(0 0 5px #ffcf6e9e);
}
/* La tablita del rubro, colgada de la guirnalda. Misma madera
   blanqueada que el disco, por lo mismo. */
.pla-tablita {
  position: absolute; left: 14px; top: 4px; z-index: 2; isolation: isolate;
  display: inline-block; padding: 5px 14px 6px;
  background: #e9d3ae;
  color: #33230f; border: 1px solid #9a7742; border-radius: 3px;
  font-family: 'Playfair Display', Georgia, serif; font-size: .92rem; font-weight: 600;
  letter-spacing: .04em;
  transform: rotate(-2deg);
  box-shadow: 0 8px 14px -9px #000;
}
.pla-tablita::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: url('../assets/texturas/madera-sol.jpg') center/140px repeat;
  filter: brightness(2.15) saturate(.62);
  opacity: .9;
}
.pla-tablita em { font-style: normal; opacity: .5; font-size: .8em; margin-left: 7px; }

/* El tablón del mostrador: madera lavada por la sal y el sol. */
/* El tablón va TRANSLÚCIDO: se ve la playa por atrás. Antes era una
   tabla opaca que tapaba justo la parte de la foto donde el ojo mira.
   El material sigue siendo la foto de madera; lo que cambia es que
   deja pasar el fondo. */
.pla-tablon {
  position: relative; isolation: isolate;
  display: flex; flex-wrap: wrap; gap: 20px 18px;
  padding: 20px 16px 22px;
  background: transparent;
  border-radius: 5px;
  box-shadow: inset 0 2px 0 #fff3d466, 0 14px 26px -18px #000;
}
.pla-tablon::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: url('../assets/texturas/madera-sol.jpg') center/300px repeat;
  filter: brightness(1.72) saturate(.72);
  opacity: .52;
}
.pla-pieza {
  background: #fffaf0; border: 1px solid #7d5c341f;
  /* Sombra CORTA y dura, casi debajo: el sol está en el cenit. */
  box-shadow: 0 4px 0 -1px #5c401d2e, 0 10px 16px -12px #000;
}
.pla-pieza .ct-nom { color: #3a2a15c4; }
.pla-precio {
  background: #fdf6e6; color: #0e5f63;
  border: 1px solid #1d8f9752;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 1.3rem;
  padding: 2px 9px 3px; border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════════
   7 · LA ESQUINA
   Un kiosco de Buenos Aires con la avenida atrás: marquesinas,
   taxis, semáforo y cables. La sección es la VENTANITA -- repisa,
   vidrio, y el rubro en un papel pegado con cinta. El precio es el
   sticker fluorescente escrito con fibra.
   ══════════════════════════════════════════════════════════════ */
body[data-modelo="esquina"] { background: #14161a; }
.cat-root[data-modelo="esquina"] {
  --taxi: #f2b705; --fluo: #d8f024; --chapa: #21262e; --tinta: #eef1f4;
  background: #14161a; color: var(--tinta);
}

.esq-escena { position: fixed; inset: 0; z-index: 0; }
/* CAMINITO, La Boca: la esquina del balcón con el cartel, las
   fachadas de colores y el cielo azul. La eligió el usuario -- su
   foto era de Flickr con licencia CC BY-NC-SA, y el NC (no comercial)
   la deja afuera de un producto que se vende, así que se buscó el
   MISMO lugar con licencia libre. Caminito está entre lo más
   fotografiado del país; fue cuestión de pedirlo por su nombre.
   Antes era Corrientes de noche y no lo terminaba de convencer. */
/* `cover`, y vuelve a ser cover a propósito.
   Se probó `contain` para que la foto entrara completa y salió peor:
   dejaba DOS FRANJAS NEGRAS a los costados y los cables quedaban
   cruzando el vacío como rayas sueltas. Una foto entera con marco
   negro se ve rota; una foto recortada, no.
   El encuadre va a 78%. Empezó en 28%: a esa altura la ventana caía
   sobre el cielo y se veía la punta de un edificio y árboles, o sea
   nada de Caminito. Bajó a 60% y todavía faltaba. A 78% entra el
   lugar entero -- el cartel de CAMINITO, las fachadas de chapa de
   colores, los faroles, el balcón y la gente en la calle. Alejar la
   foto no era opción: con `contain` quedan los bordes negros. */
.esq-calle {
  position: absolute; inset: 0;
  background: url('../assets/escena/esquina.jpg') center 95%/cover no-repeat;
  filter: saturate(1.06);
}
/* Viñeteo, no cortina. Caminito ES el color: taparlo con un velo
   parejo de arriba a abajo lo apagaba justo donde vive. */
.esq-calle::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(130% 92% at 50% 30%, #14161a2e 42%, #14161ade 100%);
}
/* Los cables cruzados. En una esquina porteña hay siempre tres o
   cuatro atravesando el cielo.
   Van MUY tenues (.22) y sólo arriba: con la foto recortada quedan
   sobre el cielo, que es donde van. Antes iban al .5 y sobre el marco
   negro del `contain` se leían como rayas negras sueltas -- el
   usuario preguntó qué mierda eran, y tenía razón. */
.esq-cables {
  position: absolute; left: -6%; right: -6%; top: 0; height: 150px;
  pointer-events: none; opacity: .22;
  background:
    linear-gradient(#0000 46px, #0b0d10 46px 47px, #0000 47px),
    linear-gradient(#0000 78px, #0b0d10 78px 79px, #0000 79px);
  transform: rotate(-1.4deg);
}
.esq-noche {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 34% at 50% 8%, #f2b70521 0%, #0000 64%);
}

.esq-tapa { position: relative; z-index: 3; padding: 66px 18px 12px; text-align: center; }
/* La marquesina: chapa con las lamparitas alrededor, como las de los
   teatros de Corrientes que están en la foto de atrás. */
.esq-marquesina {
  position: relative; display: inline-block;
  max-width: 660px; padding: 22px 40px 22px;
  background: linear-gradient(#2b323c, #1a1f26);
  border: 1px solid #ffffff1f;
  border-radius: 5px;
  box-shadow: 0 0 34px -6px #f2b70538, 0 20px 34px -22px #000;
}
.esq-lamparitas {
  position: absolute; inset: 7px; border-radius: 3px; pointer-events: none;
  background:
    radial-gradient(circle at 7px 0, #ffdf7e 0 3px, #0000 3.6px) top    left / 22px 2px repeat-x,
    radial-gradient(circle at 7px 2px, #ffdf7e 0 3px, #0000 3.6px) bottom left / 22px 2px repeat-x,
    radial-gradient(circle at 0 7px, #ffdf7e 0 3px, #0000 3.6px) top left  / 2px 22px repeat-y,
    radial-gradient(circle at 2px 7px, #ffdf7e 0 3px, #0000 3.6px) top right / 2px 22px repeat-y;
  filter: drop-shadow(0 0 4px #ffc94ea8);
}
.esq-logo { width: 50px; height: 50px; object-fit: contain; margin-bottom: 5px; }
.esq-marquesina h1 {
  margin: 0; font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, 5.6vw, 2.5rem); font-weight: 600; line-height: 1.05;
  color: #fff6e2; text-shadow: 0 0 18px #f2b70563;
}
.esq-marquesina p {
  margin: 7px 0 0; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: #f2b705bf;
}

.esq-ventana { position: relative; z-index: 3; max-width: var(--caja); margin: 0 auto; padding: 26px 18px 0; }
/* El vidrio de la ventanita: marco de aluminio y un reflejo en
   diagonal. Los productos van APOYADOS en la repisa de adentro. */
.esq-vidrio {
  position: relative;
  border: 3px solid #3a424d; border-radius: 4px;
  background: linear-gradient(#ffffff0a, #ffffff05);
  box-shadow: inset 0 0 40px -12px #000, 0 16px 30px -22px #000;
}
.esq-vidrio::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 2px;
  background: linear-gradient(104deg, #0000 38%, #ffffff0f 44%, #ffffff03 50%, #0000 56%);
}
/* El papel del rubro, pegado con cinta y torcido. La cinta son los
   dos ::before/::after -- gris translúcida, como la de embalar. */
.esq-papel {
  position: absolute; left: 16px; top: -13px; z-index: 3;
  display: inline-block; padding: 4px 16px 5px;
  background: #f6f2e4; color: #1b1f25;
  font-family: 'Caveat', 'Playfair Display', cursive; font-size: 1.16rem; font-weight: 700;
  transform: rotate(-1.4deg);
  box-shadow: 0 6px 12px -8px #000;
}
.esq-papel::before, .esq-papel::after {
  content: ''; position: absolute; top: -6px; width: 26px; height: 14px;
  background: #d8dde3a3; box-shadow: 0 1px 2px #0000004d;
}
.esq-papel::before { left: -8px; transform: rotate(-24deg); }
.esq-papel::after  { right: -8px; transform: rotate(20deg); }
.esq-papel em { font-style: normal; opacity: .45; font-size: .78em; margin-left: 7px; }

.esq-repisa {
  display: flex; flex-wrap: wrap; gap: 18px 16px;
  padding: 24px 16px 20px;
  /* La repisa: una chapa clara con el canto vivo adelante. */
  border-bottom: 6px solid #59626f;
  box-shadow: inset 0 -22px 26px -24px #000;
}
.esq-pieza {
  background: #1b2027e6; border: 1px solid #ffffff14;
  box-shadow: 0 12px 20px -14px #000;
}
.esq-pieza .ct-nom { color: #eef1f4ad; }
/* El sticker fluorescente escrito con fibra, pegado torcido. */
.esq-precio {
  background: var(--fluo); color: #1b2a05;
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.75rem; line-height: 1;
  padding: 2px 10px 3px; border-radius: 2px;
  transform: rotate(-3deg);
  box-shadow: 0 3px 7px -3px #000;
}

/* ══════════════════════════════════════════════════════════════
   8 · EL MÍO
   La foto del propio kiosco es el fondo. La piel es a propósito la
   más callada de las ocho: acá la foto es del dueño y el modelo no
   tiene que taparla. Vidrio esmerilado, nada de madera ni chapa.
   Si no subió ninguna, queda el fondo oscuro liso y se ve igual de
   bien -- un catálogo no puede depender de que alguien suba algo.
   ══════════════════════════════════════════════════════════════ */
body[data-modelo="propio"] { background: #101215; }
.cat-root[data-modelo="propio"] {
  --vidrio: #ffffff14; --canto: #ffffff26; --tinta: #f2f4f6;
  background: #101215; color: var(--tinta);
}

.pro-escena { position: fixed; inset: 0; z-index: 0; }
.pro-foto {
  position: absolute; inset: 0;
  background-position: center 42%; background-size: cover; background-repeat: no-repeat;
}
/* Viñeteo, no cortina: la foto del kiosco tiene que verse. */
.pro-velo {
  position: absolute; inset: 0;
  background: radial-gradient(128% 96% at 50% 32%, #10121533 46%, #101215e6 100%);
}

.pro-tapa { position: relative; z-index: 3; padding: 56px 18px 12px; text-align: center; }
/* Vidrio esmerilado: se apoya sobre la foto sin taparla. El blur pide
   backdrop-filter, que no está en todos lados -- por eso el fondo ya
   es legible sin él y el blur sólo suma. */
.pro-placa {
  display: inline-block; max-width: 640px; padding: 20px 34px; border-radius: 14px;
  background: rgba(16,18,21,.58);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  border: 1px solid var(--canto);
  box-shadow: 0 20px 40px -26px #000;
}
.pro-logo { width: 54px; height: 54px; object-fit: contain; margin-bottom: 7px; }
.pro-placa h1 {
  margin: 0; font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem, 5vw, 2.3rem); font-weight: 600; line-height: 1.05;
  color: #fff;
}
.pro-placa p {
  margin: 7px 0 0; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: #f2f4f6a8;
}

.pro-bloque { position: relative; z-index: 3; max-width: var(--caja); margin: 0 auto; padding: 26px 18px 0; }
.pro-rotulo { display: flex; align-items: baseline; gap: 10px; padding: 0 4px 10px; }
.pro-rotulo span {
  font-family: 'Playfair Display', Georgia, serif; font-size: 1.05rem; font-weight: 600;
  letter-spacing: .04em;
}
.pro-rotulo em { font-style: normal; font-size: .62rem; letter-spacing: .12em; color: #f2f4f65c; }

.pro-repisa {
  display: flex; flex-wrap: wrap; gap: 18px 16px;
  padding: 18px 16px 20px; border-radius: 14px;
  background: var(--vidrio);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  border: 1px solid var(--canto);
  box-shadow: 0 18px 34px -26px #000;
}
.pro-pieza {
  background: rgba(16,18,21,.72); border: 1px solid #ffffff1a;
  box-shadow: 0 14px 24px -16px #000;
}
/*  El nombre va OPACO en este modelo, y sólo en este.
    "El mío" es el único cuya tarjeta no es opaca --rgba(16,18,21,.72)--
    porque el punto es que se vea la foto que sube el Dueño. Eso mete la
    foto adentro de la cuenta del contraste, y la foto no la elegimos
    nosotros.
    Medido contra el peor fondo real (una foto clara, blanco puro), con
    el nombre a .72 de opacidad como estaba:
        tarjeta .72 · texto .72 ....... 4,47   <- por debajo de la vara
        tarjeta .72 · texto opaco ..... 6,85   <- esto
        tarjeta .80 · texto .72 ....... 5,69
    Se sube la opacidad del TEXTO y no la de la tarjeta: subir la tarjeta
    tapa la foto del Dueño, que es lo único que este modelo tiene de
    propio. Sobre una foto oscura ya daba 9,34, así que el cambio sólo
    mejora el caso malo.
    El precio no entra acá: tiene chapa opaca propia. */
.pro-pieza .ct-nom { color: #f2f4f6; }
.pro-precio {
  background: #f2f4f6; color: #101215;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 1.3rem;
  padding: 2px 10px 3px; border-radius: 9999px;
}

/* ══════════════════════════════════════════════════════════════
   El pie, por modelo. Antes lo pintaba el polígono para todos y
   quedaba una cinta de peligro amarilla y negra abajo de la
   heladera y del toldo.
   ══════════════════════════════════════════════════════════════ */
.cat-root[data-modelo="vitrina"]    .cat-pie { background: #150e08d9; color: #e8dcc4c9; border-top: 1px solid #c9a22740; }
.cat-root[data-modelo="heladera"]   .cat-pie { background: #050a0ed9; color: #cfe6f5b8; border-top: 1px solid #bfe6ff26; }
.cat-root[data-modelo="toldo"]      .cat-pie { background: #e3dacaee; color: #23201bb5; border-top: 1px solid #23201b26; }
.cat-root[data-modelo="ruta"]       .cat-pie { background: #8a5f34e6; color: #fdf3e2d1; border-top: 1px solid #fdf3e233; }
.cat-root[data-modelo="trastienda"] .cat-pie { background: #0a0806e6; color: #e8dcc8a8; border-top: 1px solid #ffdca82b; }
.cat-root[data-modelo="playa"]      .cat-pie { background: #e2cfa8ee; color: #3a2a15b8; border-top: 1px solid #7d5c3433; }
.cat-root[data-modelo="esquina"]    .cat-pie { background: #0e1013ee; color: #eef1f4a3; border-top: 1px solid #f2b70538; }
.cat-root[data-modelo="propio"]     .cat-pie { background: #0d0f12ee; color: #f2f4f6a3; border-top: 1px solid #ffffff1f; }
.cat-root[data-modelo] .cat-pie strong { color: inherit; filter: brightness(1.35); }

/* El abanico de sabores, con el color de cada mundo. */
.cat-root[data-modelo="vitrina"]    .sabor { background: #d7c393; color: #241a08; }
.cat-root[data-modelo="heladera"]   .sabor { background: #b9d9ea; color: #0a1e29; }
.cat-root[data-modelo="toldo"]      .sabor { background: #e8d4a6; color: #2a2317; font-family: 'Caveat', cursive; font-size: .82rem; }
.cat-root[data-modelo="ruta"]       .sabor { background: #e6d2ad; color: #2b1d10; }
.cat-root[data-modelo="trastienda"] .sabor { background: #6d5533; color: #f3e6cd; }
.cat-root[data-modelo="playa"]      .sabor { background: #e4c894; color: #33230f; }
.cat-root[data-modelo="esquina"]    .sabor { background: #3a424d; color: #eef1f4; }
.cat-root[data-modelo="propio"]     .sabor { background: #ffffff24; color: #f2f4f6; }

/* ══════════════════════════════════════════════════════════════
   Celular. Se achica la tarjeta, no el mundo.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
  .cat-tarjeta         { width: calc(50% - 8px); }
  .cat-tarjeta.grande  { width: 100%; }
  .cat-tarjeta.media   { width: calc(50% - 8px); }
  .ct-foto             { height: 124px; }
  .cat-tarjeta.grande .ct-foto { height: 190px; }
  .cat-tarjeta.media  .ct-foto { height: 132px; }

  .vit-estante, .hel-productos, .tol-colgados, .rut-mesada, .tra-celdas,
  .pla-tablon, .esq-repisa, .pro-repisa { gap: 14px 12px; }
  .hel-nivel  { padding: 20px 16px 0; }
  .rut-mesada { padding: 12px 10px 14px; }
  .tra-celdas { padding: 14px 12px 16px; }
  .tol-tapa   { padding-top: 96px; }
  .tra-tapa   { padding-top: 78px; }
  .pla-tablon { padding: 14px 11px 16px; }
  .esq-repisa { padding: 20px 11px 16px; }
  .pro-repisa { padding: 14px 11px 16px; }
  /* El disco y la marquesina llevan mucho padding lateral: en 375px
     eso deja el nombre en una columna de letras. Se afinan. */
  .pla-disco      { padding: 26px 22px; min-width: 0; }
  .esq-marquesina { padding: 18px 22px; }
  .ct-pie     { padding: 8px 9px 10px; flex-wrap: wrap; gap: 5px; }
  .ct-nom     { font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-tarjeta, .ct-img { transition: none; }
  .cat-tarjeta:hover { transform: none; }
  .cat-tarjeta:hover .ct-img { transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   LOS DATOS DEL LOCAL — el mismo bloque para los ocho modelos.

   Va arriba del pie: donde queda, hasta qué hora, cómo pedir. El
   cliente que llegó por el QR necesita eso tanto como los precios.

   No lo viste cada modelo por separado: son datos, no decoración, y
   ocho versiones del mismo bloque terminan siendo ocho bloques
   distintos. Usa un vidrio neutro que funciona sobre cualquier
   fondo, claro u oscuro.
   ══════════════════════════════════════════════════════════════ */
.cat-datos {
  position: relative; z-index: 3;
  max-width: var(--caja, 1100px); margin: 30px auto 0; padding: 0 18px;
}
/* ── El alias para transferir ──────────────────────────────────
   Va ARRIBA de la fila de contacto y con su propio tratamiento. Los
   otros datos son para CONTACTAR al kiosco; éste es para PAGARLE: se
   copia, no se toca. El cliente lo usa con el celúlar en la mano y el
   kiosquero esperando, así que tiene que leerse de un vistazo y el
   botón tiene que estar al lado, no abajo.

   Mismo vidrio que la caja de contacto para que se lea como parte del
   mismo bloque, pero con el borde del acento: es la única cosa
   accionable del pie. */
.cd-alias {
  margin-bottom: 10px;
  padding: 13px 15px 14px;
  border-radius: 14px;
  background: rgba(20, 20, 20, .72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(201, 169, 110, .38);
  box-shadow: 0 18px 34px -26px #000;
}
.cd-alias-rot {
  display: block;
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: #d8c9a8; margin-bottom: 8px;
}
.cd-alias-fila { display: flex; align-items: center; gap: 10px; }
.cd-alias-txt {
  flex: 1; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.02rem; letter-spacing: .02em; color: #f6f4f0;
  /* Un alias largo corta, no empuja al botón fuera de la pantalla. */
  overflow-wrap: anywhere;
  /* Se puede seleccionar con el dedo, por si el botón no copia. */
  user-select: all; -webkit-user-select: all;
}
.cd-copiar {
  flex: none;
  /* 44px: se toca con el pulgar, en un celúlar, apurado. */
  min-height: 44px; padding: 0 18px;
  border-radius: 10px;
  border: 1px solid rgba(201, 169, 110, .5);
  background: rgba(201, 169, 110, .14);
  color: #e8d5b0;
  font-size: .8rem; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cd-copiar:hover { background: rgba(201, 169, 110, .24); border-color: rgba(201, 169, 110, .75); }
.cd-copiar:focus-visible { outline: 2px solid #c9a96e; outline-offset: 2px; }
.cd-copiar.cd-copiado {
  background: rgba(34, 197, 94, .2); border-color: rgba(34, 197, 94, .6); color: #a8e6bd;
}
.cd-copiar.cd-no-copio {
  background: rgba(245, 158, 11, .2); border-color: rgba(245, 158, 11, .6); color: #f5c877;
}

@media (max-width: 460px) {
  /* En pantalla angosta el alias se lleva la línea entera y el botón
     va abajo, a lo ancho: partirlos deja el alias en dos caracteres. */
  .cd-alias-fila { flex-wrap: wrap; }
  .cd-alias-txt { flex: 1 1 100%; }
  .cd-copiar { flex: 1 1 100%; }
}

/* En los modelos claros, el mismo cambio que la caja de contacto. */
.cat-root[data-modelo="toldo"] .cd-alias,
.cat-root[data-modelo="playa"] .cd-alias {
  background: rgba(255, 253, 247, .78);
  border-color: rgba(160, 130, 77, .45);
}
.cat-root[data-modelo="toldo"] .cd-alias-txt,
.cat-root[data-modelo="playa"] .cd-alias-txt { color: #26211a; }
.cat-root[data-modelo="toldo"] .cd-alias-rot,
.cat-root[data-modelo="playa"] .cd-alias-rot { color: #7a5f30; }
.cat-root[data-modelo="toldo"] .cd-copiar,
.cat-root[data-modelo="playa"] .cd-copiar {
  color: #6b5225; border-color: rgba(160, 130, 77, .55); background: rgba(160, 130, 77, .14);
}

.cd-caja {
  display: grid; gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding: 6px;
  border-radius: 14px;
  /* .72 y no .5: abajo del vidrio hay una FOTO, y con medio
     transparente una foto clara lo lava y el texto de adentro pierde
     contraste. Medido sobre cuatro brillos de foto, con .5 el peor
     caso daba 1,5 y con .72 pasa de 3. El vidrio tiene que ser
     predecible, no depender de qué foto eligió el kiosco. */
  background: rgba(20, 20, 20, .72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 18px 34px -26px #000;
}
.cd-fila {
  display: flex; align-items: center; gap: 11px;
  /* 52px de alto: se toca con el pulgar. Media fila de estas es un
     link a un mapa o una llamada, y se abre desde un celular. */
  min-height: 52px; padding: 9px 12px;
  border-radius: 10px;
  color: #f6f4f0; text-decoration: none;
  transition: background .15s ease;
}
a.cd-fila:hover, a.cd-fila:focus-visible { background: rgba(255, 255, 255, .09); }
.cd-ico { flex: none; font-size: 1.05rem; line-height: 1; opacity: .9; }
.cd-txt {
  min-width: 0; font-size: .82rem; line-height: 1.35;
  /* Las direcciones largas cortan, no empujan la caja. */
  overflow-wrap: anywhere;
}
.cd-txt em {
  display: block; font-style: normal;
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  opacity: .58; margin-top: 2px;
}

/* En los modelos claros el vidrio oscuro se ve como un parche: ahí va
   al revés, claro con texto oscuro. */
.cat-root[data-modelo="toldo"] .cd-caja,
.cat-root[data-modelo="playa"] .cd-caja {
  background: rgba(255, 253, 247, .74);
  border-color: rgba(0, 0, 0, .12);
}
.cat-root[data-modelo="toldo"] .cd-fila,
.cat-root[data-modelo="playa"] .cd-fila { color: #26211a; }
.cat-root[data-modelo="toldo"] a.cd-fila:hover,
.cat-root[data-modelo="playa"] a.cd-fila:hover { background: rgba(0, 0, 0, .06); }

@media (max-width: 620px) {
  .cat-datos { padding: 0 12px; margin-top: 22px; }
  .cd-caja { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   LAS ESTRELLAS — el mismo bloque para los nueve modelos.

   Mismo criterio que los datos del local, y por el mismo motivo: no
   es decoración del mundo, es un control. Nueve versiones del mismo
   bloque terminan siendo nueve bloques distintos, y encima uno de
   ellos con las estrellas ilegibles sobre su fondo.
   ══════════════════════════════════════════════════════════════ */
.cat-resena {
  position: relative; z-index: 3;
  max-width: var(--caja, 1100px); margin: 18px auto 0; padding: 0 18px;
  text-align: center;
}
/* El título va DENTRO del vidrio, con las estrellas. Suelto encima de
   la escena queda sobre una foto -- en el toldo, sobre las hojas del
   parral -- y no se lee. Eso el medidor no lo agarra: la foto está en
   una capa hermana, no en un padre. Se vio mirando la pantalla. */
.cat-resena-caja {
  display: inline-block;
  padding: 12px 18px 10px; border-radius: 16px;
  background: rgba(20, 20, 20, .72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .14);
}
.cat-resena h3 {
  margin: 0 0 8px;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(246, 244, 240, .82); font-weight: 700;
}
.cat-estrellas {
  display: flex; justify-content: center; gap: 4px;
  padding: 0; border-radius: 14px;
  width: fit-content; margin: 0 auto;
  background: none; border: 0;
}
.cat-estrella {
  /* 48px: se toca con el pulgar y de una. Una estrella chiquita hace
     que el cliente puntúe mal y después no corrija. */
  width: 48px; height: 48px; padding: 0;
  border: 0; background: none; cursor: pointer;
  font-size: 1.9rem; line-height: 1;
  /* La estrella VACIA es el control: si no se ve, el cliente no sabe
     que puede tocar. Con .26 daba 1,7 sobre una foto clara. */
  color: rgba(255, 255, 255, .55);
  transition: color .12s ease, transform .12s ease;
}
.cat-estrella:hover { transform: scale(1.12); }
.cat-estrella.on { color: #f5b623; }

.cat-resena-form {
  display: grid; gap: 8px;
  max-width: 420px; margin: 10px auto 0;
}
/* Un `display` puesto por una clase le gana al `hidden` del atributo,
   que es sólo `display: none` de la hoja del navegador. Sin esto, el
   formulario se veía ANTES de que el cliente tocara una estrella, y las
   estrellas seguían ahí después de enviar. Se cubre el bloque entero y
   no clase por clase: la próxima parte que se oculte con `hidden` ya
   queda cubierta, en vez de repetir el mismo bug. */
.cat-resena [hidden] { display: none; }
.cat-resena-form textarea,
.cat-resena-form input {
  width: 100%; padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .16);
  /* .72 y no .5: abajo del vidrio hay una FOTO, y con medio
     transparente una foto clara lo lava y el texto de adentro pierde
     contraste. Medido sobre cuatro brillos de foto, con .5 el peor
     caso daba 1,5 y con .72 pasa de 3. El vidrio tiene que ser
     predecible, no depender de qué foto eligió el kiosco. */
  background: rgba(20, 20, 20, .72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #f6f4f0; font: inherit; font-size: .88rem;
  resize: vertical;
}
.cat-resena-form textarea::placeholder,
.cat-resena-form input::placeholder { color: rgba(246, 244, 240, .45); }
.cat-resena-enviar {
  /* 46px, igual que el de la calculadora pública: es la acción
     principal del bloque y se toca con el pulgar. */
  min-height: 46px; padding: 0 22px;
  border: 0; border-radius: 11px; cursor: pointer;
  background: #c9a96e; color: #1a1a1a;
  font: inherit; font-weight: 700; font-size: .9rem;
}
.cat-resena-enviar:disabled { opacity: .55; cursor: default; }

.cat-resena-gracias {
  max-width: 420px; margin: 12px auto 0;
  font-size: .85rem; line-height: 1.5;
  color: rgba(246, 244, 240, .82);
}
.cat-resena-gracias.mal { color: #ffb4b4; }
.cat-resena-google {
  display: block; width: fit-content; margin: 10px auto 0;
  min-height: 46px; padding: 13px 22px;
  border-radius: 11px;
  background: #c9a96e; color: #1a1a1a;
  font-weight: 700; font-size: .9rem; text-decoration: none;
}

/* Los dos modelos claros, igual que con los datos del local: el
   vidrio oscuro ahí se ve como un parche pegado. */
.cat-root[data-modelo="toldo"] .cat-resena h3,
.cat-root[data-modelo="playa"] .cat-resena h3 { color: rgba(38, 33, 26, .72); }
.cat-root[data-modelo="toldo"] .cat-resena-caja,
.cat-root[data-modelo="playa"] .cat-resena-caja,
.cat-root[data-modelo="toldo"] .cat-resena-form textarea,
.cat-root[data-modelo="playa"] .cat-resena-form textarea,
.cat-root[data-modelo="toldo"] .cat-resena-form input,
.cat-root[data-modelo="playa"] .cat-resena-form input {
  background: rgba(255, 253, 247, .74);
  border-color: rgba(0, 0, 0, .12);
  color: #26211a;
}
/* La estrella VACIA es el control: si no se ve, el cliente no sabe que
   puede tocar. Con .2 daba 1,6 de contraste sobre el vidrio claro de
   estos dos modelos -- practicamente invisible. Con .5 llega a 3,9, que
   es la vara de un control (3:1), y sigue leyendose como "apagada"
   contra la dorada de al lado. */
.cat-root[data-modelo="toldo"] .cat-estrella,
.cat-root[data-modelo="playa"] .cat-estrella { color: rgba(0, 0, 0, .5); }
.cat-root[data-modelo="toldo"] .cat-estrella.on,
.cat-root[data-modelo="playa"] .cat-estrella.on { color: #e0930c; }
.cat-root[data-modelo="toldo"] .cat-resena-gracias,
.cat-root[data-modelo="playa"] .cat-resena-gracias { color: #26211a; }
.cat-root[data-modelo="toldo"] .cat-resena-gracias.mal,
.cat-root[data-modelo="playa"] .cat-resena-gracias.mal { color: #9b1c1c; }

@media (max-width: 620px) {
  .cat-resena { padding: 0 12px; }
}


/* ══════════════════════════════════════════════════════════════
   LA VERSIÓN ANGOSTA, PARA TELÉFONOS

   Las fotos de escena miden 1280 de ancho. Un teléfono las muestra en
   390 CSS; aun contando pantalla retina, con 800 alcanza y sobra.

   Medido el 27/08 sobre el catálogo público, que es el que abre un
   cliente parado en el mostrador con datos móviles:

       lo que bajaba ......... 1.773 KB
       las dos fotos .........  1.069 KB   (el 60%)

   Bajar 1280→800 saca el 61% de los píxeles. Las nueve fotos pasaron de
   3.287 KB a 1.133 KB — **66% menos**.

   Ojo con el camino que NO sirve: recomprimir al mismo tamaño baja 9-14%
   y degrada la imagen para nada. La herramienta de comprimir se niega a
   hacerlo, y tiene razón.

   El original NO se toca: la pantalla grande lo sigue usando.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .vit-madera { background-image: url('../assets/escena/vitrina-800.jpg'); }
  .hel-frio   { background-image: url('../assets/escena/heladera-800.jpg'); }
  .tol-pared  { background-image: url('../assets/escena/toldo-800.jpg'); }
  .rut-cielo  { background-image: url('../assets/escena/ruta-800.jpg'); }
  .tra-pared  { background-image: url('../assets/escena/parque-800.jpg'); }
  .pla-arena  { background-image: url('../assets/escena/playa-800.jpg'); }
  .esq-calle  { background-image: url('../assets/escena/esquina-800.jpg'); }
}