/* Plaza Hoy — tokens y estilos. Móvil primero, sin framework. */

/* Tipografías autohospedadas: Barlow Condensed en los títulos, que recuerda los tableros de
   precios de la plaza, y Barlow en el texto. Solo el subconjunto latino, que trae las tildes,
   la ñ y el signo menos. La negrita del texto usa el SemiBold: un archivo menos. El logo va
   en trazos, sin tipografía. font-display: swap para que el texto se vea de una. */
@font-face {
  font-family: "Barlow";
  src: url("/tipografias/Barlow-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("/tipografias/Barlow-SemiBold.woff2") format("woff2");
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("/tipografias/BarlowCondensed-Bold.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --fondo: #EEF3EA;
  --tinta: #12241A;
  --texto-2: #3E4E44;
  --texto-3: #5A6B60;
  --linea: #DDE3DA;
  --marca: #0F6B3F;
  --acento: #F7931E;
  --acento-fondo: #FEF1E0;
  --subio: #A63A0C;
  --subio-fondo: #FBEDE5;
  --bajo: #0E6A8C;
  --bajo-fondo: #E3F1F6;
  --radio: 14px;
  --ancho: 46rem;
  --fuente-titulos: "Barlow Condensed", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  --fuente-texto: "Barlow", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.55;
}

h1, h2, h3 { font-family: var(--fuente-titulos); line-height: 1.15; margin: 0 0 .5rem; }
h1 { font-size: 2.1rem; line-height: 1.08; }
.respuesta { font-size: 1.05rem; color: var(--texto-2); margin: 0 0 1rem; max-width: 60ch; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

a { color: var(--marca); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }

/* Encabezado y pie */
.cabecera { border-bottom: 1px solid var(--linea); background: #fff; }
.cabecera .envoltura { display: flex; align-items: center; gap: .75rem; min-height: 56px; }
.marca { display: inline-flex; align-items: center; min-height: 44px; }
.marca-logo { display: block; height: 26px; width: auto; }
.cabecera nav { margin-left: auto; display: flex; gap: .7rem; font-size: .85rem; }
.cabecera nav a { display: inline-flex; align-items: center; min-height: 44px; }

.pie { margin-top: 3rem; padding: 2rem 0; border-top: 1px solid var(--linea); color: var(--texto-2); font-size: .875rem; }
.pie .lema { font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.15rem; color: var(--marca); margin: 0 0 .5rem; }
.pie nav { display: flex; gap: 0 1rem; flex-wrap: wrap; margin-top: .5rem; }
.pie nav a { display: inline-flex; align-items: center; min-height: 44px; }
.pie-whatsapp a { font-weight: 600; }

/* Etiquetas y pastillas */
.etiqueta { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); font-weight: 600; }
.pastilla { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.pastilla-hoy { background: var(--acento); color: var(--tinta); }
.subio { color: var(--subio); background: var(--subio-fondo); }
.bajo { color: var(--bajo); background: var(--bajo-fondo); }
.sin-cambio { color: var(--texto-3); background: #EDF0EA; }

/* Tarjetas */
.tarjeta { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem; margin: 1rem 0; }
.tarjeta h2 { margin-top: 0; }

.conteos { display: flex; gap: .5rem; margin: 1rem 0; }
.conteo { flex: 1; text-align: center; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: .75rem .25rem; }
.conteo b { display: block; font-family: var(--fuente-titulos); font-size: 2rem; line-height: 1.2; }
.conteo span { font-size: .8rem; color: var(--texto-2); }

/* Listas de precios */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; align-items: baseline; gap: .5rem; padding: .7rem 0; border-bottom: 1px solid var(--linea); }
.lista li:last-child { border-bottom: 0; }
.lista .nombre { font-weight: 600; }
.lista .presentacion { color: var(--texto-3); font-size: .85rem; }
.lista .precio { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.lista .cambio { font-variant-numeric: tabular-nums; padding: .1rem .45rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }

/* Tablas */
.tabla-envoltura { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--linea); }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); }
/* El encabezado de fila es el nombre del producto o de la plaza: se lee como texto, no como rótulo. */
tbody th { font-size: .9rem; text-transform: none; letter-spacing: 0; color: var(--tinta); font-weight: 600; }
tbody th .presentacion { font-weight: 400; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.fecha { white-space: nowrap; }
caption { text-align: left; color: var(--texto-2); font-size: .85rem; padding-bottom: .5rem; }

/* Filtros por categoría: enlaces, no JavaScript */
.filtros { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.filtros a { display: inline-block; padding: .3rem .7rem; border: 1px solid var(--linea); border-radius: 999px; background: #fff; text-decoration: none; font-size: .85rem; color: var(--texto-2); }
.filtros a[aria-current="page"] { background: var(--marca); border-color: var(--marca); color: #fff; }

/* Botones: 44 px de alto mínimo */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.1rem; border-radius: var(--radio); border: 1px solid var(--marca); background: var(--marca); color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.boton-claro { background: #fff; color: var(--marca); }

/* Llamado al canal */
.canal { background: var(--marca); color: #fff; border-radius: var(--radio); padding: 1.25rem; margin: 2rem 0; }
.canal h2, .canal a { color: #fff; }
.canal .boton { background: #fff; color: var(--marca); border-color: #fff; margin-top: .75rem; }

/* Espacios de anuncios: tamaño fijo para que no salte el diseño */
.anuncio { display: flex; align-items: center; justify-content: center; margin: 1.5rem auto; background: #EDF0EA; border: 1px dashed var(--linea); border-radius: var(--radio); color: var(--texto-3); font-size: .8rem; }
.anuncio-300x250 { width: 300px; height: 250px; max-width: 100%; }
.anuncio-320x100 { width: 320px; height: 100px; max-width: 100%; }

/* Gráfica */
.grafica { width: 100%; height: auto; display: block; }
.periodos { display: flex; gap: .4rem; margin: .75rem 0; }

/* /canal: el mensaje y la imagen del día para publicar a mano */
.codigo-cuadro { margin-bottom: 1.25rem; }
.mensaje-canal { display: block; width: 100%; margin: .5rem 0 .75rem; padding: .75rem; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; color: var(--tinta); font: inherit; font-size: .95rem; line-height: 1.45; resize: vertical; }
.imagen-canal { display: block; width: 100%; max-width: 27rem; height: auto; border: 1px solid var(--linea); border-radius: var(--radio); }
.acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.etiqueta.separada { display: block; margin-top: 1.5rem; }
h3.separada { margin-top: 2rem; }
.pasos { padding-left: 1.25rem; }
.pasos li { margin-bottom: .5rem; }

/* Avisos */
.aviso { background: var(--acento-fondo); border: 1px solid var(--acento); border-radius: var(--radio); padding: .75rem 1rem; margin: 1rem 0; font-size: .9rem; }
.en-revision { color: var(--texto-3); font-style: italic; font-size: .85rem; }

.nota-ia { color: var(--texto-3); font-size: .8rem; margin-top: .75rem; }

.salto { position: absolute; left: -9999px; }
.salto:focus { left: 0; top: 0; background: #fff; padding: .5rem 1rem; z-index: 10; }

/* Portada: la ilustración solo aparece en pantallas anchas. */
.portada-ilustracion { display: none; }

@media (min-width: 40rem) {
  .portada { display: flex; align-items: center; gap: 1.5rem; }
  .portada-ilustracion { display: block; flex: 0 0 15rem; }
  /* La ilustración tiene el fondo transparente: se funde con cualquier fondo. */
  .portada-ilustracion img { display: block; width: 100%; height: auto; }
}

@media (min-width: 48rem) {
  h1 { font-size: 2.75rem; }
  .marca-logo { height: 31px; }
  .cabecera nav { gap: 1rem; font-size: .9rem; }
  .conteos { gap: 1rem; }
}
abbr[title] { text-decoration: none; }