/* ============================================================
   Kcuesta — sistema de diseño
   Claro y terroso. Verde y naranja, como la marca.
   Mobile-first. Sin dependencias ni fuentes remotas:
   la página tiene que abrir a 384 Kbps.
   ============================================================ */

:root {
  /* --- Verdes: bosque cálido, no verde de gobierno --- */
  --verde-950: #10281C;
  --verde-900: #163826;
  --verde-800: #1D4A33;
  --verde-700: #256045;
  --verde-600: #2F7A57;
  --verde-500: #479C71;
  --verde-200: #BFE0CD;
  --verde-100: #DCEFE4;
  --verde-50:  #EFF7F1;

  /* --- Naranja de la marca: barro cocido, cálido --- */
  --naranja-700: #A8511A;
  --naranja-600: #C86A22;
  --naranja-500: #E2822F;
  --naranja-300: #F3BC85;
  --naranja-100: #FBEBD9;
  --naranja-50:  #FDF5EC;

  /* --- Tierra / neutros cálidos (nada de gris azulado) --- */
  --hueso:   #FBFAF6;
  --arena:   #F4F1EA;
  --arena-2: #EAE5DA;
  --linea:   #E4DFD3;
  --linea-2: #D6CFBF;
  --tinta:   #1A1814;
  --tinta-2: #4E4941;
  --tinta-3: #857E72;

  /* --- Señales de precio --- */
  --sube: #B4402F;   --sube-bg: #FBEAE7;
  --baja: #26794F;   --baja-bg: #E4F2EA;
  --neutro: #7A736A; --neutro-bg: #F0ECE4;

  --fondo: var(--hueso);
  --carta: #FFFFFF;

  /* --- Radios y sombras: suaves, profundidad por capas --- */
  --r-xs: 8px;  --r-sm: 12px;  --r: 16px;  --r-lg: 22px;  --r-xl: 30px;
  --s-1: 0 1px 2px rgba(26,24,20,.05), 0 1px 3px rgba(26,24,20,.04);
  --s-2: 0 2px 4px rgba(26,24,20,.04), 0 6px 16px rgba(26,24,20,.06);
  --s-3: 0 4px 8px rgba(26,24,20,.05), 0 16px 40px rgba(26,24,20,.10);

  /* --- Tipografía: serif de sistema para títulos, cálida y sin descargas --- */
  --display: ui-serif, 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --texto: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --ancho: 1180px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--texto);
  background: var(--fondo);
  color: var(--tinta);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--naranja-100); }

/* El relleno lateral vive en una variable para que los carruseles que
   sangran hasta el borde (las pastillas del mercado) lo compensen exacto
   en cualquier ancho, sin repetir el número en cada media query. */
:root { --env-pad: 20px; }
@media (min-width: 760px) { :root { --env-pad: 32px; } }

.env { width: 100%; max-width: var(--ancho); margin: 0 auto;
  padding: 0 var(--env-pad); }

/* ---------- Tipografía ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12;
  letter-spacing: -.018em; margin: 0 0 .45em; }
h1 { font-size: clamp(2.1rem, 6.4vw, 3.9rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.4rem, 3.6vw, 2.15rem); }
h3 { font-size: 1.08rem; font-family: var(--texto); font-weight: 700; letter-spacing: -.01em; }
h4 { font-family: var(--texto); font-weight: 700; font-size: .95rem; margin: 0 0 .4em; }
p  { margin: 0 0 1em; }
.silencio { color: var(--tinta-3); font-size: .82rem; line-height: 1.5; }
.cifra { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.sobretitulo { font-family: var(--texto); text-transform: uppercase; letter-spacing: .13em;
  font-size: .7rem; font-weight: 750; color: var(--verde-600); margin: 0 0 12px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--texto); font-size: .94rem; font-weight: 650; letter-spacing: -.005em;
  cursor: pointer; text-decoration: none; width: 100%;
  background: var(--verde-800); color: #fff;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  box-shadow: var(--s-1);
}
.boton:hover { background: var(--verde-700); transform: translateY(-1px); box-shadow: var(--s-2); }
.boton:active { transform: translateY(0); }
.boton.fantasma { background: transparent; color: var(--verde-800);
  border-color: var(--linea-2); box-shadow: none; }
.boton.fantasma:hover { background: var(--carta); border-color: var(--verde-500); }
.boton.naranja { background: var(--naranja-600); }
.boton.naranja:hover { background: var(--naranja-700); }
.boton.grande { min-height: 56px; font-size: 1.02rem; padding: 0 34px; }

/* ---------- Cabecera ---------- */
.barra {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,250,246,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--linea);
}
.barra-in { display: flex; align-items: center; gap: 18px; height: 66px; }
/* La marca ahora es imagen; se escala por altura para no deformarse */
.marca { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.marca img { height: 30px; width: auto; display: block; }
@media (min-width: 760px) { .marca img { height: 34px; } }
@media (max-width: 340px) { .marca img { height: 26px; } }
.nav-esc { display: none; gap: 24px; margin-left: 10px; }
.nav-esc a { text-decoration: none; font-size: .92rem; font-weight: 550; color: var(--tinta-2);
  padding: 6px 0; border-bottom: 2px solid transparent; }
.nav-esc a.on, .nav-esc a:hover { color: var(--verde-800); border-bottom-color: var(--naranja-500); }
.btn-pub, .btn-entrar { display: inline-flex; width: auto; margin-left: auto;
  min-height: 44px; padding: 0 20px; font-size: .89rem; }
@media (min-width: 880px) { .nav-esc { display: flex; } }

/* ---------- Sesión ---------- */
.sesion-env { margin-left: auto; display: flex; align-items: center; }
.sesion-yo { display: flex; align-items: center; gap: 9px; text-decoration: none;
  padding: 5px 14px 5px 5px; border-radius: 999px; border: 1px solid var(--linea);
  background: var(--carta); min-height: 44px; transition: border-color .14s ease; }
.sesion-yo:hover { border-color: var(--verde-500); }
.sesion-ini { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--verde-700), var(--verde-500));
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.sesion-n { font-weight: 600; font-size: .87rem; max-width: 11ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salir { font-family: inherit; font-size: .82rem; font-weight: 600; color: var(--tinta-3);
  background: none; border: none; cursor: pointer; padding: 12px 4px; min-height: 44px; }
.salir:hover { color: var(--sube); }

/* ---------- Cintillo de precios ---------- */
.cintillo { background: var(--verde-950); color: #fff; overflow: hidden;
  position: relative; --vel: 60s; }
.cintillo::before, .cintillo::after { content: ''; position: absolute; top: 0; bottom: 0;
  width: 48px; z-index: 2; pointer-events: none; }
.cintillo::before { left: 0;  background: linear-gradient(90deg, var(--verde-950), transparent); }
.cintillo::after  { right: 0; background: linear-gradient(270deg, var(--verde-950), transparent); }
.cintillo-in { display: flex; width: max-content; padding: 11px 0;
  animation: correr var(--vel) linear infinite; will-change: transform; }
.cinta-grupo { display: flex; gap: 30px; padding: 0 15px; }
@keyframes correr { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.cintillo:hover .cintillo-in, .cintillo:focus-within .cintillo-in,
.cintillo.quieto .cintillo-in { animation-play-state: paused; }
.tick { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; font-size: .82rem; }
.tick b { font-weight: 550; color: rgba(255,255,255,.72); font-size: .78rem; }
.tick .v { font-weight: 700; }
.tick .silencio { color: rgba(255,255,255,.45); font-size: .72rem; }
.tick .d { font-size: .74rem; font-weight: 700; }
.d.up { color: #F5A099; } .d.down { color: #86DDB0; } .d.flat { color: rgba(255,255,255,.4); }

/* ---------- Insignias ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px;
  border-radius: 999px; font-size: .73rem; font-weight: 650; line-height: 1.5;
  background: var(--neutro-bg); color: var(--neutro); }
.chip.baja { background: var(--baja-bg); color: var(--baja); }
.chip.sube { background: var(--sube-bg); color: var(--sube); }
.chip.verificado { background: var(--verde-100); color: var(--verde-700); }

/* ---------- PORTADA ---------- */
.portada { padding: 40px 0 26px; position: relative; }
.portada-in { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 940px) {
  .portada { padding: 76px 0 66px; }
  .portada-in { grid-template-columns: 1.02fr .98fr; gap: 62px; }
}
.portada h1 { margin-bottom: .24em; }
.portada h1 em { font-style: normal; color: var(--naranja-600); }
.portada-sub { font-size: 1.1rem; color: var(--tinta-2); max-width: 30em; margin: 0 0 30px; }
.portada-acc { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.portada-acc .boton { width: auto; }
.portada-acc-centro { justify-content: center; }
.portada-nota { margin-top: 18px; }
.enlace-suave { font-size: .92rem; font-weight: 600; color: var(--verde-700);
  text-decoration: none; border-bottom: 1.5px solid var(--verde-200); padding-bottom: 2px; }
.enlace-suave:hover { border-bottom-color: var(--verde-600); }

.portada-foto { position: relative; }
.portada-foto img { width: 100%; height: auto; aspect-ratio: 5/4; object-fit: cover;
  border-radius: var(--r-xl); box-shadow: var(--s-3); }
.portada-tarjeta { position: absolute; left: 16px; right: 16px; bottom: -24px;
  background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r);
  padding: 16px 18px; box-shadow: var(--s-3); }
@media (min-width: 620px) { .portada-tarjeta { right: auto; min-width: 300px; left: -20px; } }
.pt-tit { font-weight: 650; font-size: .9rem; color: var(--tinta-2); }
.pt-precio { font-family: var(--display); font-size: 1.8rem; font-weight: 600;
  letter-spacing: -.03em; line-height: 1.1; margin: 3px 0 2px; }
.pt-unidad { font-size: .77rem; color: var(--tinta-3); }
.pt-delta { display: inline-flex; margin-top: 10px; font-size: .8rem; font-weight: 700;
  color: var(--baja); background: var(--baja-bg); padding: 4px 12px; border-radius: 999px; }
.pt-ref { font-size: .74rem; color: var(--tinta-3); margin-top: 8px; }

/* ---------- Tres puntos ---------- */
.tres-puntos { padding: 60px 0; background: var(--arena); border-top: 1px solid var(--linea); }
.tres-col { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .tres-col { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.punto { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r-lg);
  padding: 28px 26px; box-shadow: var(--s-1); }
.punto-ico { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center;
  font-size: 1.4rem; background: var(--verde-50); border: 1px solid var(--verde-100);
  margin-bottom: 16px; }
.punto:nth-child(2) .punto-ico { background: var(--naranja-50); border-color: var(--naranja-100); }
.punto h2 { font-family: var(--texto); font-size: 1.07rem; font-weight: 700;
  letter-spacing: -.01em; margin-bottom: .38em; }
.punto p { font-size: .92rem; color: var(--tinta-2); margin: 0; }

/* ---------- Cierres ---------- */
.cierre-grande { padding: 72px 0 80px; text-align: center; }
.cierre-grande h2 { margin-bottom: .5em; }
.cierre-grande p { color: var(--tinta-2); margin-bottom: 28px; }
.cierre { text-align: center; padding: 48px 20px 42px; margin-top: 38px;
  border-top: 1px solid var(--linea); }
.cierre p { color: var(--tinta-2); max-width: 34em; margin: 0 auto 20px; }
.cierre .boton { margin: 0 auto; width: auto; }

/* ---------- Pie ---------- */
.pie { background: var(--verde-950); color: rgba(255,255,255,.72); padding: 42px 0 48px; }
.pie p { margin: 0 0 10px; font-size: .84rem; }
.pie strong { color: #fff; }
.pie .silencio { color: rgba(255,255,255,.5); }

/* ---------- Filtros ---------- */
.filtros { padding: 22px 0 16px; }

/* Las pastillas siempre se desplazaron de lado, pero con la barra oculta y
   el corte justo en el borde del contenedor parecían texto cortado: en un
   teléfono se leía "Frut…" y "Supermercados…" sin ninguna pista de que
   había más. Dos cambios lo arreglan:

   1. La fila SANGRA hasta el borde de la pantalla, así la última pastilla
      queda mordida a media vista, que es lo que dice "esto sigue".
   2. Un degradado a la derecha, que se apaga solo al llegar al final
      (animation-timeline: scroll, donde esté soportado).

   Sigue siendo una sola línea a propósito: envolverlas apilaba cuatro filas
   de pastillas antes del primer precio. */
.pastillas { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none; margin-bottom: 12px;
  margin-inline: calc(-1 * var(--env-pad, 20px));
  padding-inline: var(--env-pad, 20px);
  scroll-padding-inline: var(--env-pad, 20px);
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
}
.pastillas > * { scroll-snap-align: start; }
.pastillas::-webkit-scrollbar { display: none; }

/* Cuando todo cabe, el degradado sobra y come el borde de la última
   pastilla. `scroll-driven` lo apaga al final del recorrido. */
@supports (animation-timeline: scroll(x)) {
  .pastillas { animation: destapar-fin linear both;
    animation-timeline: scroll(self inline);
    animation-range: contain; }
  @keyframes destapar-fin {
    to { -webkit-mask-image: linear-gradient(90deg, #000 100%, #000);
                 mask-image: linear-gradient(90deg, #000 100%, #000); }
  }
}

/* De 760px para arriba se envuelven en vez de desplazarse. En un teléfono
   arrastrar de lado es instintivo; con ratón no lo es, y encima la barra va
   oculta — ahí una pastilla cortada no invita a nada, solo parece rota. Y a
   ese ancho sobra sitio para ponerlas todas. */
@media (min-width: 760px) {
  .pastillas { flex-wrap: wrap; overflow: visible; row-gap: 9px;
    margin-inline: 0; padding-inline: 0;
    -webkit-mask-image: none; mask-image: none; animation: none; }
}
.pastilla { flex: 0 0 auto; font-family: inherit; font-size: .87rem; font-weight: 600;
  padding: 10px 18px; min-height: 44px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linea); background: var(--carta); color: var(--tinta-2);
  transition: all .14s ease; }
.pastilla:hover { border-color: var(--verde-500); }
.pastilla.on { background: var(--verde-800); border-color: var(--verde-800); color: #fff; }
.filtro-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; row-gap: 10px; }
.cuenta { font-weight: 650; font-size: .92rem; flex: 0 0 auto; }
.filtro-ctrl { min-width: 0; flex: 1 1 auto; }
.filtro-ctrl select { width: 100%; max-width: 100%; min-height: 44px;
  font-family: inherit; font-size: .88rem; font-weight: 600; color: var(--tinta);
  padding: 9px 13px; border: 1px solid var(--linea); border-radius: 999px; background: var(--carta); }
@media (min-width: 540px) { .filtro-ctrl { flex: 0 0 auto; } .filtro-ctrl select { width: auto; } }
.info-chip { font-family: inherit; font-size: .82rem; font-weight: 600; color: var(--tinta-3);
  background: none; border: none; cursor: pointer; padding: 11px 2px; min-height: 44px;
  white-space: nowrap; }
.info-chip:hover { color: var(--verde-700); }

/* ---------- Tarjeta de anuncio ---------- */
.rejilla { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rejilla { grid-template-columns: repeat(3, 1fr); } }

.tarjeta { border: 1px solid var(--linea); border-radius: var(--r-lg); background: var(--carta);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--s-1);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.tarjeta:hover { box-shadow: var(--s-3); transform: translateY(-3px); border-color: var(--linea-2); }
.tarjeta-foto { position: relative; aspect-ratio: 4/3; background: var(--arena); overflow: hidden; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.tarjeta:hover .tarjeta-foto img { transform: scale(1.04); }
.sin-foto { width: 100%; height: 100%; display: grid; place-items: center; background: var(--verde-50); }
.sin-foto span { font-family: var(--display); font-size: 2.8rem; color: var(--verde-500); opacity: .5; }
.flota { position: absolute; left: 12px; top: 12px; z-index: 2;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px); box-shadow: var(--s-1); }
.flota-d { left: auto; right: 12px; }
.tarjeta-cuerpo { padding: 16px 17px 18px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.tarjeta-tit { font-weight: 700; font-size: 1.03rem; letter-spacing: -.012em; line-height: 1.3; }
.tarjeta-meta { color: var(--tinta-2); font-size: .85rem; margin-top: 2px; }
.linea-meta { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--tinta-2); }

/* Dos niveles de precio */
.ancla { border-top: 1px solid var(--linea); padding-top: 12px; margin-top: auto; }
.nivel { padding: 7px 0; }
.nivel-mayor { border-bottom: 1px dashed var(--linea); padding-bottom: 10px; }
.nivel-et { display: block; font-size: .67rem; font-weight: 750; text-transform: uppercase;
  letter-spacing: .1em; color: var(--tinta-3); margin-bottom: 3px; }
.ancla-precio { display: flex; align-items: baseline; gap: 7px; }
.ancla-precio .n { font-family: var(--display); font-size: 1.62rem; font-weight: 600;
  letter-spacing: -.03em; line-height: 1.1; }
.ancla-precio .u { font-size: .8rem; color: var(--tinta-3); font-weight: 600; }
.delta { display: inline-flex; margin-top: 7px; font-size: .81rem; font-weight: 700;
  padding: 4px 11px; border-radius: 999px; background: var(--neutro-bg); color: var(--neutro); }
.delta.baja { background: var(--baja-bg); color: var(--baja); }
.delta.sube { background: var(--sube-bg); color: var(--sube); }
.nivel-detalle .det-linea { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.nivel-detalle .det-linea b { font-size: 1.06rem; font-weight: 700; letter-spacing: -.02em; }
.nivel-detalle .u { font-size: .8rem; color: var(--tinta-3); font-weight: 600; }
.det-sep { color: var(--linea-2); }
.det-min { font-size: .74rem; color: var(--tinta-3); }
.vacio-det .det-linea { font-size: .82rem; }
.ancla-ref { margin-top: 9px; font-size: .75rem; color: var(--tinta-3); }
.entrega { display: flex; flex-wrap: wrap; gap: 6px; }
.vend { border-top: 1px solid var(--linea); padding-top: 11px; }
.vend-n { font-weight: 650; font-size: .89rem; }
.acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.acciones .boton { min-height: 44px; font-size: .87rem; padding: 0 12px; }

/* ---------- Escalera de precios ---------- */
.escalera { background: var(--carta); border: 1px solid var(--linea);
  border-radius: var(--r); padding: 6px 16px; }
.esc-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--linea); font-size: .89rem; }
.esc-fila:last-of-type { border-bottom: none; }
.esc-fila span { color: var(--tinta-2); }
.esc-fila b { font-variant-numeric: tabular-nums; font-weight: 700; }
.esc-falta { color: var(--sube); background: var(--sube-bg); padding: 3px 11px;
  border-radius: 999px; font-size: .76rem; }
.esc-pie { margin: 12px 0 4px; }

/* ---------- Fuente / procedencia ---------- */
.fuente { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .78rem;
  color: var(--tinta-3); padding: 12px 15px; background: var(--arena);
  border: 1px solid var(--linea); border-radius: var(--r-sm); }
.fuente a { color: var(--verde-700); font-weight: 650; }

/* ---------- Aviso de prototipo ---------- */
.aviso-demo { background: var(--naranja-50); border-bottom: 1px solid var(--naranja-100);
  color: var(--naranja-700); font-size: .79rem; text-align: center; padding: 8px 16px; }

/* ---------- Barra inferior móvil ---------- */
.pie-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; display: flex;
  background: rgba(255,255,255,.96); backdrop-filter: blur(14px);
  border-top: 1px solid var(--linea); padding-bottom: env(safe-area-inset-bottom); }
.pie-nav a { flex: 1; text-align: center; padding: 9px 4px 8px; font-size: .67rem;
  font-weight: 600; color: var(--tinta-3); text-decoration: none; }
.pie-nav a.on { color: var(--verde-800); }
.pie-nav .ico { display: block; font-size: 1.2rem; margin-bottom: 2px; }
@media (min-width: 880px) { .pie-nav { display: none; } }
body.con-pie { padding-bottom: 64px; }
@media (min-width: 880px) { body.con-pie { padding-bottom: 0; } }

/* ---------- Estado vacío ---------- */
.vacio { border: 1.5px dashed var(--linea-2); border-radius: var(--r-lg);
  padding: 38px 24px; text-align: center; background: var(--arena); }

/* ---------- Tarjeta de rubro (comparación de precios) ----------
   Una tarjeta por rubro, no por oferta: 147 ofertas eran 43 rubros y la
   lista plana repetía "Ají" trece veces seguidas.

   La cabecera entera es el control de <summary>, no una flechita: a 56px de
   alto cumple de sobra el mínimo de 24px de la WCAG 2.5.8 y los 44pt de
   Apple, y se alcanza con el pulgar de una mano. La flecha va a la derecha
   pero no es el objetivo tocable.                                          */
.rejilla:has(.rubro) { display: block; }

.rubro { background: var(--carta); border: 1px solid var(--linea);
  border-radius: var(--r-lg); margin-bottom: 10px; overflow: hidden; }
.rubro details > summary { list-style: none; cursor: pointer; }
.rubro details > summary::-webkit-details-marker { display: none; }
.rubro summary:focus-visible { outline: 2px solid var(--verde-600); outline-offset: -2px; }

/* Dos filas: producto + precio arriba, la referencia mayorista a todo el
   ancho abajo. Antes la referencia peleaba por la columna de texto, la
   dejaba en 111px y la cabecera se estiraba a 218px en un teléfono. */
/* El tamaño es un punto medio buscado a propósito: la foto de 52px hacía
   caber muchas tarjetas de un vistazo pero el producto casi no se veía, y
   agrandarla hasta una tarjeta por pantalla mataba la comparación, que es
   para lo que se agrupó. A 68px se distingue el producto y siguen entrando
   cuatro o cinco rubros en un teléfono. */
.rb-cab { display: grid; position: relative;
  grid-template-columns: 68px 1fr auto;
  grid-template-areas: "foto txt precio" "foto meta meta";
  gap: 6px 13px; align-items: center; padding: 14px 16px; min-height: 68px; }
.rb-foto { grid-area: foto; }
.rb-txt { grid-area: txt; }
.rb-precio { grid-area: precio; align-self: start; }
.rb-meta { grid-area: meta; }
.rubro details[open] .rb-cab { border-bottom: 1px solid var(--linea);
  background: var(--verde-50); }

.rb-foto { width: 68px; height: 68px; border-radius: 10px; overflow: hidden;
  background: var(--arena); flex: none; }
.rb-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-foto .sin-foto { width: 100%; height: 100%; display: grid; place-items: center;
  font-weight: 800; color: var(--tinta-3); }

.rb-txt { min-width: 0; }
.rb-nom { font-weight: 700; line-height: 1.2; font-size: 1.04rem;
  letter-spacing: -.01em; }
.rb-meta { font-size: .78rem; color: var(--tinta-3); margin-top: 1px; }
/* La referencia mayorista es ahora el PIE de la tarjeta, no una fila del
   encabezado: primero cuánto vale la cosa, de último contra qué se mide. */
.rb-ref { font-size: .74rem; color: var(--tinta-3);
  padding: 8px 16px; border-top: 1px solid var(--linea);
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }

/* El signo y la palabra cargan el significado; el color solo refuerza.
   Un "+83%" en rojo tiene que leerse igual sin ver el rojo (WCAG 1.4.1). */
.marca { font-weight: 700; padding: 1px 6px; border-radius: 999px; font-size: .7rem; }
.marca.sube { background: var(--sube-bg); color: var(--sube); }
.marca.baja { background: var(--baja-bg); color: var(--baja); }

.rb-precio { text-align: right; font-weight: 750; line-height: 1.15; white-space: nowrap; }
.rb-precio .cifra { font-size: 1.18rem; letter-spacing: -.02em; }
.rb-u { display: block; font-size: .68rem; color: var(--tinta-3); font-weight: 400; }

/* La flecha se saca del flujo: solo indica estado. El objetivo tocable es
   la cabecera entera, no ella. */
.rb-flecha { position: absolute; right: 10px; bottom: 10px;
  color: var(--tinta-3); font-size: .72rem; transition: transform .15s ease; }
.rubro details[open] .rb-flecha { transform: rotate(180deg); }

.rb-fuente-tit {
  padding: 8px 14px 2px;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.rb-lista { list-style: none; margin: 0; padding: 0; }
.rb-fila { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--linea); align-items: center; }
.rb-fila:last-child { border-bottom: none; }
.rb-cadena { min-width: 0; }
.rb-cadena b { font-size: .87rem; }
.rb-desc { display: block; font-size: .73rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.rb-cifras { text-align: right; white-space: nowrap; }
.rb-p { font-weight: 700; }
/* Aquí vivía .rb-mejor, la insignia de "Mejor precio". Se quitó a
   propósito: premiar al más barato es la guerra de precios convertida en
   trofeo, y esta misma lista va a traer productores. Ver ESCALA.md.
   La lista sigue ordenada de menor a mayor, así que quien busca el más
   barato lo tiene de primero sin que el sitio premie rebajar. */

/* Entre cadenas la diferencia es de RD$4 a RD$25: en pesos dice algo, en
   porcentaje sería ruido. El % se reserva para el mayorista. */
.rb-dif { display: block; font-size: .68rem; color: var(--tinta-3); }
.rb-pie { padding: 9px 14px; font-size: .72rem; background: var(--arena); }

/* La tarjeta de una sola fuente usa la misma cáscara: cabecera, la cita de
   dónde salió el precio, y el pie de referencia. Sin control de abrir,
   porque no hay nada que desplegar. */
.rb-fuente-una { padding: 0 16px 10px; font-size: .74rem; }

.rb-sede { color: var(--tinta-3); font-weight: 400; }
.pastillas.cadenas { margin-top: 6px; }
.pastilla.chica { font-size: .76rem; padding: 5px 11px; }

@media (min-width: 700px) {
  .rb-fila { grid-template-columns: 1fr auto; }
}

/* ---------- Lista de precios ----------
   Antes era una <table> de siete columnas con min-width:540px dentro de un
   contenedor con overflow-x. En un teléfono eso obliga a arrastrar la tabla
   de lado para leer el precio de supermercado, que es media razón por la que
   alguien entra a esta página.

   Ahora cada rubro es una tarjeta: los cuatro niveles de precio caen en una
   rejilla 2×2 en pantalla chica y se alinean en fila a partir de 760px, de
   modo que en escritorio se sigue leyendo como una tabla. Sin scroll lateral
   en ningún ancho.                                                          */
.lista-precios { border: 1px solid var(--linea); border-radius: var(--r-lg);
  background: var(--carta); overflow: hidden; }

.lp-cab { display: none; }

.lp-fila { padding: 14px 15px; border-bottom: 1px solid var(--linea); }
.lp-fila:last-child { border-bottom: none; }
.lp-fila:hover { background: var(--verde-50); }

.lp-enc { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 11px; }
.lp-nom { font-weight: 700; line-height: 1.25; }
.lp-sub { font-size: .78rem; color: var(--tinta-3); margin-top: 2px; }

.lp-niveles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--linea); border: 1px solid var(--linea);
  border-radius: 8px; overflow: hidden; }
.lp-nivel { background: var(--carta); padding: 8px 10px; min-width: 0; }
.lp-et { display: block; font-size: .62rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--tinta-3); font-weight: 750; margin-bottom: 2px; }
.lp-val { font-size: .92rem; font-weight: 650; overflow-wrap: anywhere; }
.lp-val .silencio { font-weight: 400; }
.lp-u { display: block; font-size: .7rem; color: var(--tinta-3); font-weight: 400; }

/* El cambio semanal se dibuja dos veces y solo una se muestra: pegado al
   nombre en tarjeta, en su propia columna en fila. Sale más barato que
   mover un nodo con JS al cambiar de ancho. */
.lp-cambio { display: none; }
.lp-cambio-movil { flex: none; }

@media (min-width: 760px) {
  .lp-cab { display: grid; grid-template-columns: 2.1fr repeat(4, 1fr) .85fr;
    gap: 14px; padding: 12px 16px; background: var(--arena);
    border-bottom: 1px solid var(--linea); }
  .lp-cab span { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--tinta-3); font-weight: 750; }
  .lp-cab .der { text-align: right; }

  .lp-fila { display: grid; grid-template-columns: 2.1fr repeat(4, 1fr) .85fr;
    gap: 14px; align-items: center; padding: 12px 16px; }
  .lp-enc { display: block; margin: 0; }
  /* display:contents sube las cuatro celdas a la rejilla de la fila, así se
     alinean con el encabezado sin duplicar el marcado por breakpoint. */
  .lp-niveles { display: contents; }
  .lp-nivel { background: none; padding: 0; text-align: right; border: none; }
  .lp-et { display: none; }          /* en fila, el encabezado ya rotula */
  .lp-cambio { display: block; text-align: right; }
  .lp-cambio-movil { display: none; }
}
.nota-metodo { margin: 34px 0; padding: 26px; background: var(--arena);
  border: 1px solid var(--linea); border-radius: var(--r-lg); }
.nota-metodo ul { margin: 0 0 14px; padding-left: 20px; }
.nota-metodo li { color: var(--tinta-2); font-size: .91rem; margin-bottom: 10px; }

/* ---------- Formularios ---------- */
.form { display: flex; flex-direction: column; gap: 20px; margin-bottom: 34px; }
.campo { display: flex; flex-direction: column; }
.campo-fila { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 580px) { .campo-fila { grid-template-columns: 1fr 1fr; } }
.campo label { font-weight: 650; font-size: .9rem; margin-bottom: 7px; }
.campo input, .campo select, .campo textarea {
  font-family: inherit; font-size: 1rem; padding: 12px 14px; min-height: 48px;
  border: 1px solid var(--linea); border-radius: var(--r-sm); background: var(--carta);
  color: var(--tinta); width: 100%; transition: border-color .14s ease, box-shadow .14s ease; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--verde-500); box-shadow: 0 0 0 3px var(--verde-100); }
.campo input[readonly] { background: var(--arena); color: var(--tinta-2); }
.ayuda { font-size: .79rem; color: var(--tinta-3); margin: 7px 0 0; }
.opciones { display: flex; flex-wrap: wrap; gap: 9px; }
.opcion { font-family: inherit; font-size: .88rem; font-weight: 600; padding: 11px 18px;
  min-height: 44px; border: 1px solid var(--linea); border-radius: 999px;
  background: var(--carta); color: var(--tinta-2); cursor: pointer; transition: all .14s ease; }
.opcion:hover { border-color: var(--verde-500); }
.opcion.on { background: var(--verde-50); border-color: var(--verde-600); color: var(--verde-800); }
.precio-in { display: flex; }
.precio-pre { display: flex; align-items: center; padding: 0 15px; font-weight: 700;
  color: var(--tinta-2); background: var(--arena); border: 1px solid var(--linea);
  border-right: none; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.precio-in input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.ancla-vivo { margin-top: 14px; padding: 16px; background: var(--arena);
  border: 1px solid var(--linea); border-radius: var(--r-sm); }
.av-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: .88rem; padding: 4px 0; }
.av-fila span { color: var(--tinta-2); }
.av-delta { font-size: 1.06rem; font-weight: 750; letter-spacing: -.015em; margin-top: 10px;
  color: var(--neutro); }
.av-delta.baja { color: var(--baja); } .av-delta.sube { color: var(--sube); }

/* ---------- Página de entrada ---------- */
.pag-entrar { background: var(--arena); }
.entrar-env { display: grid; place-items: center; padding: 40px 20px 70px; min-height: 74vh; }
.entrar-caja { width: 100%; max-width: 430px; background: var(--carta);
  border: 1px solid var(--linea); border-radius: var(--r-xl); padding: 34px 28px;
  box-shadow: var(--s-2); }
.entrar-caja h1 { font-size: 1.85rem; margin-bottom: .3em; }
.entrar-sub { color: var(--tinta-2); font-size: .94rem; margin: 0 0 26px; }
.entrar-botones { display: grid; gap: 11px; }
.prov { background: var(--carta); color: var(--tinta); border: 1.5px solid var(--linea);
  justify-content: flex-start; gap: 12px; min-height: 54px; font-size: .96rem;
  border-radius: var(--r-sm); box-shadow: none; }
.prov:hover { background: var(--arena); border-color: var(--linea-2); transform: none; }
.prov svg { flex: 0 0 auto; }
.prov-wa:hover { border-color: #25D366; background: #F3FCF6; }
.entrar-estado { font-size: .86rem; color: var(--verde-700); margin: 16px 0 0; min-height: 1.2em; }
.entrar-estado.malo { color: var(--sube); }
.wa-paso { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linea);
  display: grid; gap: 9px; }
.wa-paso label { font-weight: 650; font-size: .89rem; }
.wa-num { display: flex; }
.wa-pre { display: flex; align-items: center; padding: 0 15px; font-weight: 700;
  color: var(--tinta-2); background: var(--arena); border: 1px solid var(--linea);
  border-right: none; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.wa-num input { flex: 1; min-width: 0; font-family: inherit; font-size: 1rem; padding: 12px 14px;
  min-height: 50px; border: 1px solid var(--linea); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.wa-num input:focus { outline: none; border-color: var(--verde-500);
  box-shadow: 0 0 0 3px var(--verde-100); }
.entrar-legal { margin: 24px 0 0; line-height: 1.55; }
.entrar-volver { margin: 18px 0 0; text-align: center; font-size: .88rem; }
.entrar-volver a { color: var(--verde-700); font-weight: 650; text-decoration: none; }

/* ---------- Mi cuenta ---------- */
.pag-perfil { background: var(--arena); }
.perfil-cab { display: flex; align-items: center; gap: 16px; padding: 30px 0 10px; }
.perfil-avatar { width: 62px; height: 62px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--verde-700), var(--verde-500));
  color: #fff; display: grid; place-items: center; font-size: 1.6rem; font-weight: 700;
  box-shadow: var(--s-1); }
.perfil-cab h1 { font-size: 1.5rem; margin: 0 0 3px; }
.pag-perfil .form { background: var(--carta); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: 26px; box-shadow: var(--s-1); }
.aviso-completar { background: var(--naranja-50); border: 1px solid var(--naranja-100);
  color: var(--naranja-700); border-radius: var(--r-sm); padding: 14px 16px;
  font-size: .88rem; margin: 16px 0; }
.solo-vendedor { border-top: 1px dashed var(--linea); padding-top: 18px; margin-top: 4px; }
.perfil-pie { background: var(--carta); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: 22px 24px; margin: 18px 0 34px; box-shadow: var(--s-1); }
.perfil-dato { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: .9rem; }
.perfil-pie .boton { margin-top: 18px; }

/* ---------- Diálogos / hoja inferior ---------- */
.modal { border: none; border-radius: var(--r-lg); padding: 26px; max-width: 470px;
  width: calc(100% - 32px); box-shadow: var(--s-3); background: var(--carta); color: var(--tinta); }
.modal::backdrop { background: rgba(26,24,20,.45); backdrop-filter: blur(3px); }
.modal-msg { width: 100%; font-family: inherit; font-size: .92rem; padding: 12px;
  border: 1px solid var(--linea); border-radius: var(--r-sm); resize: vertical; margin: 10px 0 14px; }
.modal-acc { display: grid; gap: 9px; }
@media (min-width: 470px) { .modal-acc { grid-template-columns: 1fr auto; } }
.hoja { max-width: 500px; }
.hoja h4 { margin: 20px 0 .45em; }
.hoja .escalera { margin: 14px 0; }
.hoja-barra { width: 40px; height: 4px; border-radius: 99px; background: var(--linea-2);
  margin: 0 auto 16px; }
.hoja .boton { margin-top: 18px; }
@media (max-width: 559px) {
  .hoja { position: fixed; bottom: 0; left: 0; right: 0; top: auto; margin: 0;
    width: 100%; max-width: 100%; max-height: 88vh; overflow-y: auto;
    border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 16px 20px 30px; }
}
@media (min-width: 560px) { .hoja-barra { display: none; } }

/* ---------- Accesibilidad ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--verde-600); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, .tarjeta-tit, .pt-tit { overflow-wrap: break-word; }
html, body { max-width: 100%; overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .cintillo-in { width: 100%; overflow-x: auto; }
  .cintillo::before, .cintillo::after { display: none; }
}

/* ============ Muestra de anuncio en la portada ============ */
.muestra { padding: 60px 0; background: var(--arena); border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea); }
.muestra-in { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .muestra-in { grid-template-columns: 1.05fr .95fr; gap: 56px; } }
.muestra-txt p { color: var(--tinta-2); max-width: 34em; }
.muestra-lista { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 11px; }
.muestra-lista li { position: relative; padding-left: 26px; font-size: .93rem; color: var(--tinta-2); }
.muestra-lista li::before { content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--verde-600); font-weight: 800; }
.muestra-lista b { color: var(--tinta); }
.muestra-tarjeta { max-width: 440px; width: 100%; margin: 0 auto; }
.muestra-tarjeta .tarjeta { box-shadow: var(--s-3); }

/* La muestra usa el MISMO componente del mercado, no una copia parecida.
   Si la portada enseña una tarjeta que ya no existe adentro, promete algo
   que el sitio no da — que es lo que pasaba con la del productor
   inventado. */
.muestra-rubros .rubro { box-shadow: var(--s-2); margin-bottom: 12px; }
.muestra-rubros .rubro:last-child { margin-bottom: 0; }
.muestra-rubros .rb-cab { cursor: default; }
.muestra-pie { text-align: center; margin-top: 14px; }
.muestra-pie { text-align: center; margin-top: 12px; }

/* ============ Tres pasos ============ */
.pasos-sec { padding: 66px 0; }
.pasos-3 { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 18px;
  grid-template-columns: 1fr; counter-reset: none; }
@media (min-width: 820px) { .pasos-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.pasos-3 li { background: var(--carta); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: 26px 24px; box-shadow: var(--s-1); position: relative; }
.paso-n { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--verde-800); color: #fff; font-family: var(--display);
  font-size: 1.1rem; font-weight: 600; margin-bottom: 15px; }
.pasos-3 li:nth-child(2) .paso-n { background: var(--naranja-600); }
.pasos-3 h3 { margin-bottom: .35em; }
.pasos-3 p { font-size: .92rem; color: var(--tinta-2); margin: 0; }

.nota-futuro { margin-top: 28px; padding: 22px 24px; background: var(--verde-50);
  border: 1px solid var(--verde-100); border-radius: var(--r-lg); }
.nota-futuro h4 { color: var(--verde-800); }
.nota-futuro p { font-size: .92rem; color: var(--tinta-2); margin: 0; max-width: 60em; }

/* ============ Trato justo ============ */
.justo { padding: 60px 0; background: var(--arena); border-top: 1px solid var(--linea); }
.justo .punto:nth-child(3) .punto-ico { background: var(--verde-50); border-color: var(--verde-100); }
.aviso-seg { margin-top: 24px; text-align: center; max-width: 46em; margin-left: auto;
  margin-right: auto; }

/* ============ Vitrina: mercado visible, acciones bajo llave ============ */
.tarjeta.velada, .rubro.velada { position: relative; pointer-events: none; user-select: none; }
.tarjeta.velada .tarjeta-cuerpo { filter: blur(4px); opacity: .55; }
.tarjeta.velada .tarjeta-foto img { filter: saturate(.6); opacity: .7; }
.tarjeta.velada::after, .rubro.velada::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(251,250,246,.55)); }

/* En la tarjeta de rubro se vela el precio, que es el dato por el que se
   entra; el nombre y la foto se dejan legibles para que se vea qué hay. */
.rubro.velada .rb-precio, .rubro.velada .rb-meta, .rubro.velada .rb-ref {
  filter: blur(4.5px); opacity: .6; }
.rubro.velada .rb-foto img { filter: saturate(.6); opacity: .72; }
.rubro.velada .rb-flecha { opacity: .3; }

.corte-vitrina { margin: 26px 0 8px; }
.corte-caja { text-align: center; background: var(--carta); border: 1px solid var(--linea);
  border-radius: var(--r-xl); padding: 34px 26px; box-shadow: var(--s-2); }
.corte-caja h3 { font-family: var(--display); font-size: 1.4rem; font-weight: 600;
  letter-spacing: -.02em; margin-bottom: .35em; }
.corte-caja p { max-width: 34em; margin: 0 auto 20px; }
.corte-caja .boton { width: auto; margin: 0 auto; }

/* ============ Correcciones de responsividad ============ */
/* Renglones cómodos en pantallas grandes: la medida importa tanto como el ancho */
.muestra-txt p, .pasos-3 p, .punto p, .nota-futuro p,
.nota-metodo li, .cierre p, .portada-sub { max-width: 62ch; }
.pie p { max-width: 78ch; }
.hero-sub, .entrar-sub { max-width: 56ch; }

/* El h1 de "Mi cuenta" se veía pequeño para ser un título de página */
.perfil-cab h1 { font-size: clamp(1.6rem, 4.5vw, 2rem); }

/* Plegables muy angostos (280px): que nada quede apretado */
@media (max-width: 340px) {
  .env { padding: 0 14px; }
  .barra-in { gap: 10px; height: 60px; }
  .marca { font-size: 1.22rem; }
  .btn-entrar { padding: 0 14px; font-size: .84rem; }
  .boton.grande { min-height: 52px; font-size: .96rem; padding: 0 22px; }
  .acciones { grid-template-columns: 1fr; }
  .entrar-caja { padding: 26px 20px; }
  .prov { font-size: .9rem; gap: 9px; padding: 0 14px; }
}

/* Móvil en horizontal: menos aire vertical, se aprovecha la pantalla */
@media (max-height: 420px) and (orientation: landscape) {
  .portada { padding: 26px 0 18px; }
  .entrar-env { min-height: auto; padding: 24px 20px 40px; }
  .cierre-grande, .pasos-sec, .muestra, .justo, .tres-puntos { padding: 34px 0; }
}

/* Pantallas muy grandes: que la portada no se estire sin control */
@media (min-width: 1600px) {
  :root { --ancho: 1280px; }
}

/* Texto secundario: la medida se limita para que se lea en pantallas grandes */
p.silencio { max-width: 76ch; }
.pie p.silencio, .aviso-seg { max-width: 72ch; }
.aviso-seg { margin-left: auto; margin-right: auto; }
p.aviso-seg { max-width: 62ch; }

/* Una sola acción en la tarjeta: a todo el ancho, sin partir el texto */
.acciones-una { grid-template-columns: 1fr; }
.acciones .boton { white-space: nowrap; }
@media (max-width: 340px) { .acciones .boton { white-space: normal; } }

/* Precio de etiqueta junto al de por libra: uno es lo que se paga en caja,
   el otro es el que sirve para comparar. */
.rb-etiq { display: block; font-size: .66rem; }

/* ---------- Perfil de gremio (gremio.html) ----------
   Un gremio no es un vendedor: reporta la plaza. La cabecera lo dice con
   una etiqueta y enseña a cuánta gente representa, que es su autoridad,
   en vez de cuántos artículos tiene. */
.gremio-cab { background: var(--verde-50); border: 1px solid var(--linea);
  border-radius: 14px; padding: 16px; margin: 14px 0 18px; }
.gr-id { display: flex; gap: 13px; align-items: flex-start; }
.gr-avatar { width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: #fff; border: 1px solid var(--linea);
  display: grid; place-items: center; font-size: 1.5rem; }
.gr-txt { min-width: 0; }
.gr-nom { font-size: 1.12rem; line-height: 1.22; margin: 0; letter-spacing: -.01em; }
.gr-tipo { margin-top: 4px; font-size: .8rem; }
.etiq-reporta { display: inline-block; background: var(--verde-700); color: #fff;
  border-radius: 999px; padding: 2px 9px; font-size: .72rem; font-weight: 700; }
.gr-meta { font-size: .8rem; margin-top: 4px; }
.gr-cifras { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.gr-cifra { background: #fff; border: 1px solid var(--linea); border-radius: 10px;
  padding: 8px 12px; flex: 1 1 90px; }
.gr-cifra b { display: block; font-size: 1.02rem; }
.gr-cifra span { font-size: .72rem; color: var(--tinta-3); }
.gr-fecha { margin-top: 12px; font-size: .84rem; }

.gremio-explica { margin-bottom: 16px; }
.gremio-explica h2 { font-size: 1.02rem; margin-bottom: 6px; }
.gremio-explica p { font-size: .9rem; }
.cita-gremio { margin: 12px 0; padding: 11px 14px; font-size: .88rem;
  background: var(--arena); border-left: 3px solid var(--naranja-600);
  border-radius: 0 10px 10px 0; }
.cita-gremio cite { display: block; margin-top: 6px; font-size: .76rem;
  color: var(--tinta-3); font-style: normal; }

.gremio-rubro { padding: 0; }
.gr-cab { display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; padding: 12px 15px 8px; }
.gr-rubro-nom { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }
.gr-flag { font-size: .7rem; color: var(--tinta-3); border: 1px dashed var(--linea);
  border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.gr-lista { list-style: none; margin: 0; padding: 0; }
/* En una columna de ~250px el grado y el precio no caben en la misma
   línea: "Precio del día" se partía en tres y el precio se le montaba
   encima. Se apilan —grado arriba, precio abajo— y solo se ponen lado a
   lado cuando hay ancho de sobra. */
.gr-fila { display: block; padding: 9px 15px;
  border-top: 1px solid var(--linea); }
.gr-grado { min-width: 0; }
/* El grado se lee sin depender del color: la palabra ya lo dice. El color
   solo refuerza (WCAG 1.4.1). */
.cal { font-size: .84rem; }
.cal-primera, .cal-premium { color: var(--verde-700); }
.gr-proc { display: block; font-size: .72rem; }
.gr-precio { white-space: nowrap; margin-top: 1px; }
.gr-precio .cifra { font-weight: 700; font-size: .96rem; }
.gr-u { font-size: .72rem; color: var(--tinta-3); }
/* El precio por libra es el que se compara; el de empaque es el que se
   paga. Se enseñan los dos, como en el mercado. */
.gr-lb { display: block; font-size: .74rem; color: var(--tinta-3); }
.gr-contraste { padding: 9px 15px; background: var(--arena); font-size: .8rem;
  border-top: 1px solid var(--linea); }
.gr-notas { padding: 8px 15px 11px; font-size: .72rem; line-height: 1.45;
  border-top: 1px solid var(--linea); }
.gr-notas div + div { margin-top: 4px; }
/* Sin unidad declarada no se compara, y se nota: el hueco es el dato. */
.gremio-rubro.sin-unidad { opacity: .82; }
.gremio-pie { margin: 16px 0 6px; font-size: .8rem; }

@media (min-width: 760px) {
  .gr-cifra { flex: 0 1 auto; }
}

/* La foto es una COLUMNA a todo lo alto de la tarjeta, no una miniatura.
   Como miniatura se quedaba en 60px y agrandarla empujaba la tarjeta hacia
   abajo; como columna crece con las filas de grado sin costar un pixel de
   alto. Aquí la foto es evidencia —el producto real, en el saco real, el
   día que se cotizó— así que merece el espacio.

   El sello 🤝 distingue la que tomó la asociación de la de góndola que ya
   estaba en el repo: de quién es la foto cambia lo que vale. */
.gremio-rubro { display: grid; grid-template-columns: 116px 1fr;
  align-items: stretch; overflow: hidden; }
.gr-foto { position: relative; background: var(--arena); min-height: 116px; }
.gr-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gr-foto.sin-foto { display: grid; place-items: center;
  font-weight: 800; font-size: 1.6rem; color: var(--tinta-3); }
.gr-foto-sello { position: absolute; right: 6px; bottom: 6px; font-size: .74rem;
  background: rgba(255,255,255,.94); border-radius: 50%; padding: 3px 4px;
  line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.gr-cuerpo { min-width: 0; display: flex; flex-direction: column; }
.gr-cab { padding: 11px 14px 7px; }
.gr-fila { padding: 8px 14px; }
.gr-contraste, .gr-notas { padding-left: 14px; padding-right: 14px; }
/* La primera fila no lleva línea: ya la separa el título de arriba. */
.gr-lista .gr-fila:first-child { border-top: 1px solid var(--linea); }

@media (min-width: 560px) {
  /* Con ancho de sobra la foto puede respirar más y la fila vuelve a caber
     en una sola línea. */
  .gremio-rubro { grid-template-columns: 150px 1fr; }
  .gr-foto { min-height: 150px; }
  .gr-fila { display: grid; grid-template-columns: 1fr auto;
    gap: 3px 14px; align-items: center; }
  .gr-precio { text-align: right; margin-top: 0; }
}

/* Entrada al parte del gremio desde el mercado. Franja y no tarjeta: tiene
   que leerse como "hay otra cosa acá" sin competir con los rubros, que son
   el contenido de esa página. */
.enlace-gremio { display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; margin: 0 0 14px; text-decoration: none; color: inherit;
  background: var(--verde-50); border: 1px solid var(--linea);
  border-radius: 12px; }
.enlace-gremio:hover { border-color: var(--verde-700); }
.eg-ico { font-size: 1.4rem; flex: none; }
.eg-txt { flex: 1; min-width: 0; font-size: .84rem; }
.eg-txt b { display: block; margin-bottom: 2px; }
.eg-txt .silencio { display: block; font-size: .78rem; line-height: 1.35; }
.eg-flecha { color: var(--verde-700); font-weight: 700; flex: none; }

/* Lista de fuentes. El gremio va al mismo nivel que el Ministerio y las
   cadenas: es una fuente, no un vendedor. */
.fuentes-lista { margin-top: 18px; }
.fuentes-lista h3 { font-size: .96rem; margin-bottom: 8px; }
.fuentes-lista ul { list-style: none; margin: 0; padding: 0; }
.fuentes-lista li { font-size: .82rem; line-height: 1.45; padding: 9px 0;
  border-top: 1px solid var(--linea); }
.fuentes-lista .silencio { display: block; font-size: .78rem; }
.gr-aviso-grado { display: block; font-size: .7rem; margin-top: 3px; }

/* La tarjeta del héroe es un anuncio inventado —no hay ni un productor
   publicando todavía— así que va rotulada como ejemplo. */
.pt-ejemplo { display: inline-block; font-size: .64rem; text-transform: uppercase;
  letter-spacing: .07em; background: rgba(0,0,0,.06); border-radius: 999px;
  padding: 2px 8px; margin-bottom: 6px; }

/* Tres cosas distintas hablan del Mercado Nuevo en este sitio —el sondeo
   del Ministerio, MERCADOM (que es otra plaza) y el parte del gremio— y
   confundirlas era fácil. La lista las separa. */
.lista-fuentes-corta { list-style: none; margin: 8px 0; padding: 0; }
.lista-fuentes-corta li { font-size: .85rem; line-height: 1.45; padding: 7px 0 7px 12px;
  border-left: 2px solid var(--linea); margin-bottom: 4px; }

/* ============================================================
   PARTE DEL GREMIO — frescura, nota de plaza y cambio de precio
   ============================================================ */

/* Cuándo se actualizó. Un precio de plaza envejece en horas: si el gremio
   no publicó hoy, el visitante tiene que verlo de una vez y no deducirlo
   de una fecha larga. Por eso el sello va al lado de la fecha y cambia de
   color cuando el parte ya tiene días. */
.gr-fecha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gr-actualizado { flex-basis: 100%; font-size: .74rem; margin-top: 2px; }
.sello-fresco { font-weight: 700; font-size: .68rem; border-radius: 999px;
  padding: 2px 9px; white-space: nowrap; }
.sello-fresco.hoy   { background: var(--verde-700); color: #fff; }
.sello-fresco.ayer  { background: var(--verde-100); color: var(--verde-800); }
.sello-fresco.viejo { background: var(--naranja-100); color: var(--naranja-700); }

/* La nota de plaza es la CAUSA del precio, no un adorno. Va con el mismo
   peso visual que una cita, dentro de la cabecera del gremio. */
.gr-plaza { margin-top: 14px; padding: 10px 13px; background: #fff;
  border: 1px solid var(--linea); border-left: 3px solid var(--naranja-600);
  border-radius: 0 10px 10px 0; font-size: .8rem; }
.gr-plaza-txt { font-size: .9rem; font-weight: 600; margin: 4px 0 5px;
  line-height: 1.35; }

/* Subió o bajó. Rojo cuando sube y verde cuando baja, igual que el resto
   del sitio: aquí se lee desde el bolsillo de quien compra. */
.gr-cambio { display: inline-block; margin-top: 4px; font-weight: 700;
  font-size: .7rem; border-radius: 999px; padding: 2px 8px;
  white-space: nowrap; }
/* Pegado al grado se leía "PrímiumIgual". */
.cal + .gr-cambio { margin-left: 6px; }
.gr-cambio.sube  { background: var(--sube-bg); color: var(--sube); }
.gr-cambio.baja  { background: var(--baja-bg); color: var(--baja); }
.gr-cambio.igual { background: var(--arena); color: var(--tinta-3); }
.gr-cambio.nuevo { background: var(--verde-100); color: var(--verde-800); }
/* "Sin comparación" no es un precio estable: es un hueco. Se pinta como
   hueco —punteado, sin color de señal— para que no se lea como "igual". */
.gr-cambio.sin-base { background: none; color: var(--tinta-3);
  border: 1px dashed var(--linea-2); font-weight: 600; }

/* Lo que el gremio NO cotizó hoy. Sin esto, un rubro ausente se lee como
   desaparecido del mercado en vez de no publicado. */
.gr-cobertura { margin-top: 8px; padding: 9px 12px; background: var(--arena);
  border-radius: 10px; font-size: .78rem; line-height: 1.45;
  color: var(--tinta-2); }

.cal-inferior { color: var(--naranja-700); }

/* Rubro que el gremio no cotizó hoy. Se queda en la página —el que entra
   quiere saber a cómo está el plátano aunque hoy no lo hayan publicado—
   pero con la fecha de su precio pegada al renglón y atenuado, para que
   nunca se confunda con lo de hoy. */
.gremio-rubro.arrastrado { opacity: .9; }
.gr-sello-viejo { margin: 0 15px 6px; padding: 5px 9px; font-size: .72rem;
  background: var(--naranja-50); border: 1px solid var(--naranja-100);
  border-radius: 8px; color: var(--naranja-700); line-height: 1.4; }

/* ------------------------------------------------------------
   Que no se corte nada en pantalla de teléfono

   En un iPhone la tarjeta reparte 116px a la foto y deja ~190px útiles al
   precio. Con `white-space: nowrap` en toda la línea, "RD$ 2,100 – RD$ 2,200
   / Saco/22 lb" pedía 246px y la unidad se salía de la tarjeta: quedaba
   cortada y había que girar el teléfono para leerla. La unidad es
   justamente lo que hace comparable el precio — es lo último que se puede
   perder.

   Ahora la línea SÍ puede saltar, pero solo entre piezas: el rango nunca se
   parte por la mitad ("RD$ 2,100 –" arriba y "RD$ 2,200" abajo se lee como
   dos precios) y la unidad viaja entera.
   ------------------------------------------------------------ */
.gr-precio { white-space: normal; }
.gr-precio .cifra { white-space: nowrap; }
.gr-u { white-space: nowrap; }

/* "unidad por confirmar" mide 122px y no cabía al lado del nombre: se
   salía por el borde derecho. Baja a su propia línea cuando no quepa. */
.gr-cab { flex-wrap: wrap; }
.gr-flag { white-space: normal; flex: 0 1 auto; }

/* En pantallas angostas la foto cede 16px al texto. La foto sigue siendo
   evidencia, pero un precio cortado no se puede leer y una foto 16px más
   estrecha sí. */
@media (max-width: 419px) {
  .gremio-rubro { grid-template-columns: 100px 1fr; }
  .gr-foto { min-height: 100px; }
  .gr-cab, .gr-fila, .gr-contraste, .gr-notas { padding-left: 12px; padding-right: 12px; }
  .gr-sello-viejo { margin-left: 12px; margin-right: 12px; }
}

/* Teléfono chico (iPhone SE y parecidos): la foto cede otro poco antes que
   el precio, que es el dato. */
@media (max-width: 359px) {
  .gremio-rubro { grid-template-columns: 84px 1fr; }
  .gr-foto { min-height: 84px; }
  .gr-precio .cifra { font-size: .9rem; }
}

/* Renglón viejo dentro de una tarjeta que SÍ tiene precio de hoy. Mismo
   color de aviso que el sello de la tarjeta completa, para que se lea igual
   en los dos casos. */
/* Este es el único chip con una fecha larga adentro ("Precio del 17 de
   agosto 2026"). En 320px no cabe en una línea dentro de la columna del
   grado, así que se le deja partir; los demás chips siguen en una sola
   línea porque son cortos. */
.gr-cambio.viejo { background: var(--naranja-50); color: var(--naranja-700);
  border: 1px solid var(--naranja-100); font-weight: 600;
  white-space: normal; }

/* ---------- ¿ESTÁ MÁS CARO? (IPC) ----------
   Una tarjeta por rubro. El orden dentro de la tarjeta es el orden en que
   se lee: nombre, la frase en palabras, la línea de dos años, y de último
   —en gris y pequeño— el índice, que es lo único que un vecino no
   entiende de un vistazo. */
.inf-titular { margin: 22px 0 18px; display: flex; align-items: baseline;
  flex-wrap: wrap; gap: 6px 14px; }
.inf-grande { font-family: var(--display); font-size: clamp(2.6rem, 11vw, 4.2rem);
  line-height: 1; margin: 0; color: var(--neutro); }
.inf-grande.sube { color: var(--sube); }
.inf-grande.baja { color: var(--baja); }
.inf-grande-txt { margin: 0; font-size: 1.05rem; color: var(--tinta-2); max-width: 22ch; }

.inf-extremos { display: grid; gap: 16px; margin: 26px 0 30px; }
@media (min-width: 620px) { .inf-extremos { grid-template-columns: 1fr 1fr; } }
.inf-col { background: var(--carta); border: 1px solid var(--linea);
  border-radius: var(--r); padding: 16px 18px; box-shadow: var(--s-1); }
.inf-col h2 { font-size: 1rem; margin: 0 0 10px; }
.inf-lista { list-style: none; margin: 0; padding: 0; }
.inf-lista li { display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-top: 1px solid var(--linea); font-size: .95rem; }
.inf-lista li:first-child { border-top: 0; }
.inf-lista b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.inf-lista b.sube { color: var(--sube); }
.inf-lista b.baja { color: var(--baja); }
.inf-extremos-pie { margin: 0; font-size: .85rem; }
@media (min-width: 620px) { .inf-extremos-pie { grid-column: 1 / -1; } }

.inf-rejilla { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .inf-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .inf-rejilla { grid-template-columns: repeat(3, 1fr); } }

.inf-carta { background: var(--carta); border: 1px solid var(--linea);
  border-radius: var(--r); padding: 16px 18px 14px; box-shadow: var(--s-1);
  display: flex; flex-direction: column; gap: 10px; }
.inf-cab { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; }
.inf-cab h3 { font-size: 1.12rem; margin: 0; }
/* La frase entera va dentro del chip, así que aquí sí puede partir en dos
   líneas; los chips cortos del resto del sitio no. */
.inf-aa { white-space: normal; text-align: right; }

.inf-graf { color: var(--neutro); }
.inf-graf.sube { color: var(--sube); }
.inf-graf.baja { color: var(--baja); }
.inf-linea { display: block; width: 100%; height: 40px; opacity: .85; }

.inf-pie { display: flex; gap: 8px; flex-wrap: wrap; min-height: 0; }
.inf-temporada { margin: 0; font-size: .92rem; color: var(--tinta-2); }
.inf-nota { margin: 0; font-size: .78rem; line-height: 1.45; }

/* ---------------------------------------------------------------
   Tabla estática — lo que se ve antes de que llegue el JSON, y lo
   único que ve un robot que no ejecuta JavaScript.

   Vive dentro de #tbody y #rejilla, así que el render la reemplaza
   sola en cuanto el fetch resuelve. No se esconde: en una conexión
   lenta del interior es el precio que el visitante alcanza a leer
   primero, y esconderla ante el robot sería enseñar dos cosas
   distintas a dos visitantes distintos.

   `overflow-x` en el envoltorio y no en la tabla: siete columnas no
   caben en 320px y sin esto la PÁGINA entera se corre de lado.
   --------------------------------------------------------------- */
.tabla-estatica{
  display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
  width:100%; border-collapse:collapse; font-size:14px; margin:8px 0 24px;
  /* Sin `min-width:0` la tabla no cabe en una rejilla. El mínimo
     automático de un elemento de grid es su ancho de contenido mínimo, así
     que la tabla de la portada estiraba su columna a 440px dentro de una
     pantalla de 320 y se llevaba por delante el texto de al lado, que
     quedaba recortado sin manera de desplazarlo. El `overflow-x` de arriba
     no basta: primero hay que dejar que la caja pueda encogerse. */
  min-width:0; max-width:100%;
}
/* Misma razón, del lado del contenedor: la rejilla de la portada tiene que
   poder achicar sus columnas por debajo del contenido que lleven dentro. */
.muestra-in > *, .muestra-tarjeta{ min-width:0; }
.tabla-estatica caption{
  caption-side:top; text-align:left; padding:0 0 12px;
  font-size:14px; line-height:1.5; color:var(--tinta-3);
  /* El caption se estiraba al ancho de la TABLA (693px con siete
     columnas), no al de la pantalla: para leer de qué fecha y de qué
     fuente era la tabla había que arrastrarla de lado. `sticky left`
     lo deja fijo mientras las columnas corren por debajo, y el ancho
     lo amarra al envoltorio para que envuelva como párrafo normal. */
  position:sticky; left:0;
  width:min(100%, calc(100vw - 2 * var(--env-pad, 20px)));
  white-space:normal;
}
.tabla-estatica th,.tabla-estatica td{
  padding:8px 12px; text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--linea);
}
.tabla-estatica thead th{
  font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--tinta-3); border-bottom-width:2px;
}
.tabla-estatica tbody th{font-weight:600; white-space:normal; min-width:11ch}

/* Título de página. `mercado.html` no tenía h1 en ninguna parte y el de
   `gremio.html` lo inyectaba el JavaScript dentro del contenedor que se
   queda vacío sin él: la señal más fuerte de la página desaparecía justo
   ante quien no ejecuta scripts. Va en el HTML, siempre. */
.titulo-pagina{
  font-size:clamp(1.32rem,4.6vw,1.72rem); line-height:1.22;
  letter-spacing:-.01em; margin:4px 0 18px; max-width:26ch;
}