/* ==========================================================================
   SinEnvases · Estilos de la web (home y páginas). El catálogo lleva los suyos.
   Móvil primero; un solo punto de corte principal a 768px.
   ========================================================================== */

@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Assistant";
  src: url("../fonts/assistant-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

:root {
  --marron: #815e3d;
  --marron-oscuro: #5c4128;
  --chocolate: #2b1100;     /* el del logo */
  --crema: #fbeee8;
  --arena: #e6ceb2;         /* fondo de la foto de portada */
  --naranja: #d8944e;
  --naranja-oscuro: #a8662a;
  --turquesa: #4fa39d;      /* trazo de los dibujos de los pasos */
  --turquesa-oscuro: #1f6f6a;
  --whatsapp: #1c7a43;
  --texto: #282828;
  --texto-suave: #555;
  --blanco: #fff;

  --titulos: "Raleway", system-ui, sans-serif;
  --cuerpo: "Assistant", system-ui, sans-serif;
  --ancho: 1140px;
  --ancho-texto: 760px;
  --radio: 999px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--texto);
  font: 400 1.125rem/1.6 var(--cuerpo);
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--titulos);
  line-height: 1.15;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; text-transform: uppercase; }
h3 { font-size: 1.3rem; font-weight: 800; }
h4 { font-size: 1.1rem; font-weight: 800; margin-top: 1.5em; }
p, ul, ol { margin: 0 0 1em; }

a { color: var(--turquesa-oscuro); text-underline-offset: .15em; }
a:hover { color: var(--marron); }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }

.contenedor { width: min(100% - 32px, var(--ancho)); margin-inline: auto; }
.contenedor--texto { max-width: var(--ancho-texto); }

.saltar {
  position: absolute; left: 8px; top: -100px; z-index: 10;
  padding: 8px 16px; background: var(--chocolate); color: var(--blanco);
}
.saltar:focus { top: 8px; }

.subtitulo {
  font-family: var(--titulos);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 300;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-top: -.25em;
}

/* ─── Botones ─────────────────────────────────────────────────────────────── */
.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.25rem; }
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 24px;
  border: 2px solid transparent; border-radius: var(--radio);
  font: 700 1rem/1.2 var(--cuerpo);
  text-decoration: none; text-align: center;
  transition: background-color .15s, color .15s;
}
.boton--whatsapp { background: var(--whatsapp); color: var(--blanco); }
.boton--whatsapp:hover { background: #145a31; color: var(--blanco); }
.boton--naranja { background: var(--naranja-oscuro); color: var(--blanco); }
.boton--naranja:hover { background: var(--marron-oscuro); color: var(--blanco); }
.boton--claro { background: var(--blanco); color: var(--chocolate); border-color: var(--chocolate); }
.boton--claro:hover { background: var(--chocolate); color: var(--blanco); }
@media (max-width: 479px) { .boton { width: 100%; } }

/* ─── Cabecera ────────────────────────────────────────────────────────────── */
/* Fija arriba. Lo que se enlaza con #ancla se para debajo de ella. */
html { scroll-padding-top: 80px; }
.cabecera {
  position: sticky; top: 0; z-index: 5;
  background: var(--crema); border-bottom: 1px solid #ecd9cc;
}
/* En la home se funde con la portada */
.cabecera--portada { background: var(--arena); border-bottom-color: transparent; }
/* Sombra al bajar, donde el navegador lo soporta */
@supports (animation-timeline: scroll()) {
  .cabecera { animation: cabecera-sombra linear both; animation-timeline: scroll(); animation-range: 0 80px; }
}
@keyframes cabecera-sombra { to { box-shadow: 0 2px 14px rgba(43, 17, 0, .14); } }

.cabecera__fila {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 24px; padding-block: 8px;
}
.cabecera__logo { display: block; flex: none; }
.cabecera__logo img { width: 44px; }

.menu ul {
  display: flex; flex-wrap: wrap; gap: 4px 6px;
  margin: 0; padding: 0; list-style: none;
}
.menu a {
  display: block; padding: 8px 12px; border-radius: var(--radio);
  font: 700 .8rem/1.2 var(--titulos); letter-spacing: .04em; text-transform: uppercase;
  color: var(--chocolate); text-decoration: none;
}
.menu a:hover, .menu a[aria-current="page"] { background: var(--marron); color: var(--blanco); }

/* Botón de hamburguesa: en móvil, en tableta y en portátil pequeño (el menú en
   una fila, al lado del logo, necesita unos 1030 px de ventana), y solo con JS
   (sin JS el menú sale abierto) */
.cabecera__boton { display: none; }
@media (max-width: 1079px) {
  .js .cabecera__boton {
    display: grid; place-items: center;
    width: 48px; height: 48px; margin-right: -8px; padding: 0;
    border: 0; border-radius: 12px; background: none; color: var(--chocolate); cursor: pointer;
  }
  .cabecera__icono, .cabecera__icono::before, .cabecera__icono::after {
    display: block; width: 24px; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform .2s, background-color .2s;
  }
  .cabecera__icono { position: relative; }
  .cabecera__icono::before, .cabecera__icono::after { content: ""; position: absolute; left: 0; }
  .cabecera__icono::before { top: -7px; }
  .cabecera__icono::after { top: 7px; }
  .cabecera--abierta .cabecera__icono { background: transparent; }
  .cabecera--abierta .cabecera__icono::before { transform: translateY(7px) rotate(45deg); }
  .cabecera--abierta .cabecera__icono::after { transform: translateY(-7px) rotate(-45deg); }

  /* El menú se despliega bajo la cabecera, a todo el ancho */
  .js .menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 8px 16px 16px;
    background: var(--crema); border-bottom: 1px solid #ecd9cc;
    box-shadow: 0 12px 24px rgba(43, 17, 0, .12);
  }
  .js .cabecera--abierta .menu { display: block; }
  .js .menu ul { flex-direction: column; gap: 0; }
  .js .menu li + li { border-top: 1px solid #ecd9cc; }
  .js .menu a { padding: 14px 8px; border-radius: 8px; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cabecera__icono, .cabecera__icono::before, .cabecera__icono::after { transition: none; }
}

@media (min-width: 768px) {
  html { scroll-padding-top: 96px; }
  .cabecera__fila { padding-block: 10px; }
  .cabecera__logo img { width: 56px; }
  .cabecera--portada { background: #ebd4b7; }  /* borde de arriba de la foto */
}

/* Solo para lectores de pantalla */
.oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ─── Franja de promoción (la activa del catálogo) ────────────────────────── */
.promo-franja { background: var(--turquesa-oscuro); color: var(--blanco); text-align: center; font-size: .95rem; line-height: 1.4; }
.promo-franja p { margin: 0; padding-block: 10px; }
.promo-franja a { margin-left: .35em; color: inherit; font-weight: 700; white-space: nowrap; }
.promo-franja__icono { width: 1.15em; height: 1.15em; margin-right: .35em; vertical-align: -.2em; }

/* ─── Portada ─────────────────────────────────────────────────────────────── */
.portada { display: flex; flex-direction: column-reverse; background: var(--arena); }
.portada__fondo img { width: 100%; }
.portada__texto { padding-block: 28px 32px; }
.portada h1 { font-size: clamp(3rem, 11vw, 5.5rem); font-weight: 900; color: var(--chocolate); margin: 0; }
.portada__pre, .portada__zona { display: block; font-size: clamp(1.3rem, 3vw, 1.6rem); font-weight: 700; color: var(--texto); }
.portada__lema { font-size: 1.15rem; margin: .75rem 0 .25rem; }
.portada__extra { font-weight: 700; margin: 0; }

@media (min-width: 768px) {
  .portada { position: relative; display: block; min-height: clamp(420px, 52vw, 640px); }
  .portada__fondo img {
    position: absolute; inset: 0; height: 100%;
    object-fit: cover; object-position: 75% center;
  }
  .portada__texto { position: relative; padding-block: 72px; }
  .portada__texto > * { max-width: 46%; }
}

/* ─── Sellos ──────────────────────────────────────────────────────────────── */
.sellos { background: var(--marron); padding-block: 24px; }
/* Dos por fila en móvil y todos en una a partir de 480 px; la fila que no se
   llena queda centrada, sean cuantos sean */
.sellos__lista {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
  margin-block: 0; padding: 0; list-style: none;
}
.sellos__lista > li { flex: 0 0 calc((100% - 16px) / 2); }
.sellos img { width: 100%; max-width: 110px; margin-inline: auto; }
@media (min-width: 480px) { .sellos__lista > li { flex: 1 1 0; } }

/* ─── Bloques ─────────────────────────────────────────────────────────────── */
.bloque { padding-block: 48px; overflow: hidden; }
@media (min-width: 768px) { .bloque { padding-block: 56px; } }
.bloque--marron { background: var(--marron); color: var(--blanco); }
.bloque--marron h2, .bloque--marron h3 { color: var(--blanco); }
.bloque--marron a:not(.boton) { color: var(--crema); }

.marca-agua {
  margin: 0 0 -.6em;
  font: 900 clamp(2.6rem, 9vw, 5.5rem)/1 var(--titulos);
  text-transform: uppercase; white-space: nowrap;
  color: rgba(255, 255, 255, .12);
  pointer-events: none; user-select: none;
}
.marca-agua--oscura { color: rgba(129, 94, 61, .1); }

.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
/* minmax(0, …): que la marca de agua (nowrap) no ensanche su columna */
@media (min-width: 900px) { .dos-columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }

.foto { width: 100%; border-radius: 12px; margin-block: 8px 20px; }

/* ─── Cómo comprar ────────────────────────────────────────────────────────── */
.como { display: grid; gap: 32px; }
.como__cabeza h2 { margin-bottom: .25em; }
.pasos {
  display: grid; gap: 32px 40px;
  margin: 0; padding: 0; list-style: none; counter-reset: paso;
}
.paso { counter-increment: paso; }
.paso img { width: 100%; max-width: 220px; margin-bottom: 8px; }
.paso h3 { font-size: 1.15rem; text-transform: uppercase; }
.paso h3::before { content: counter(paso) ". "; color: var(--turquesa-oscuro); }
.paso__sub { font-family: var(--titulos); font-weight: 300; font-size: 1.2rem; color: var(--texto-suave); margin-top: -.4em; }
.paso p:not(.paso__sub) { font-size: 1rem; color: var(--texto-suave); }

/* Móvil: todo centrado, en una sola columna */
@media (max-width: 767px) {
  .como { text-align: center; }
  .paso img { margin-inline: auto; }
}
@media (min-width: 768px) {
  .paso img { max-width: 320px; margin-bottom: 12px; }
  .pasos { grid-template-columns: 1fr 1fr; }
  .paso--ancho { grid-column: 1 / -1; }
  .paso--ancho img { max-width: 460px; }
}
@media (min-width: 1024px) {
  .como { grid-template-columns: 260px 1fr; gap: 56px; }
  .como__cabeza { position: sticky; top: 24px; align-self: start; }
}

/* ─── Productos e higiene ─────────────────────────────────────────────────── */
.categorias h3 { font-size: 1.6rem; margin-top: 1em; }
.categorias h3:first-child { margin-top: 0; }
.categorias p { font-size: 1.2rem; font-weight: 600; }

.lista-producto { padding: 0; list-style: none; font-size: 1.2rem; }
.lista-producto li { padding: 6px 0; border-bottom: 1px solid #eadfd6; }

/* ─── Muestra del catálogo ────────────────────────────────────────────────── */
.bloque--crema { background: var(--crema); }
/* Una sola fila. Si no cabe, se desliza de lado (y pasa sola: script en index.php) */
.muestra {
  display: flex; gap: 12px;
  margin: 24px 0 28px; padding: 4px 0 12px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.muestra::-webkit-scrollbar { display: none; }
.muestra > li { flex: 0 0 42%; scroll-snap-align: start; }
@media (min-width: 640px) { .muestra { gap: 16px; } .muestra > li { flex-basis: 30%; } }
@media (min-width: 1024px) { .muestra > li { flex: 1 1 0; min-width: 0; } }
.tarjeta {
  display: flex; flex-direction: column; height: 100%;
  border-radius: 12px; overflow: hidden; background: var(--blanco);
  box-shadow: 0 2px 10px rgba(43, 17, 0, .08);
  color: var(--texto); text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.tarjeta:hover { color: var(--texto); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(43, 17, 0, .14); }
@media (prefers-reduced-motion: reduce) { .tarjeta, .tarjeta:hover { transition: none; transform: none; } }
.tarjeta__foto { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: #f3ebe4; }

/* Foto hecha con IA: su aviso encima, abajo a la izquierda (lo pide el
   Reglamento europeo de IA, art. 50.4). El marco ciñe la foto para situarlo */
.foto-marco { position: relative; display: flex; }
.aviso-ia {
  position: absolute; left: 8px; bottom: 8px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(20, 12, 6, .75); color: #fff;
  font: 600 .75rem/1.35 var(--cuerpo); white-space: nowrap;
  pointer-events: none;   /* el clic sigue siendo de la foto (ampliarla, abrir la ficha) */
}
/* En miniaturas pequeñas, solo «IA» (el aviso entero, en el alt y en la ficha) */
.aviso-ia--mini { left: 2px; bottom: 2px; padding: 0 4px; border-radius: 4px; font-size: .6rem; }
/* Foto de un artículo (foto_articulo()): el marco se queda el margen de .foto,
   que dentro de él dejaría el aviso por debajo de la foto */
.foto-marco--texto { margin-block: 8px 20px; }
.foto-marco--texto > .foto { margin-block: 0; }
.tarjeta__texto { display: flex; flex-direction: column; flex: 1; gap: 2px; padding: 10px 12px 12px; }
.tarjeta__categoria {
  font: 700 .7rem/1.3 var(--titulos); letter-spacing: .05em; text-transform: uppercase;
  color: var(--turquesa-oscuro);
}
.tarjeta__nombre { font: 700 1rem/1.25 var(--titulos); color: var(--chocolate); }
.tarjeta__precio { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: 1rem; color: var(--naranja-oscuro); }
.tarjeta__precio del { font-weight: 400; color: var(--texto-suave); margin-right: 4px; }

/* ─── Catálogo (/catalogo/) ──────────────────────────────────────────────── */
/* En la página de un producto, el título es un <p>: el h1 es el producto */
.cabeza-pagina__titulo {
  margin: 0 0 .5em; font: 900 clamp(2.2rem, 6vw, 3.4rem)/1.15 var(--titulos);
  text-transform: uppercase; text-wrap: balance; color: var(--chocolate);
}
/* Los sellos de la home, en pequeño (son blancos: van sobre un círculo marrón) */
.catalogo-sellos { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.catalogo-sellos img { width: 60px; height: 60px; padding: 6px; border-radius: 50%; background: var(--marron); }

/* El listado sigue a la cabecera, del mismo crema: sin el hueco de los dos rellenos */
.cabeza-pagina + .bloque--crema { padding-top: 8px; }

/* Cada categoría, una tarjeta sin fotos. Columnas del mismo ancho, pero cada
   tarjeta tan alta como su contenido: van una tras otra rellenando la columna */
.listado { columns: 340px; column-gap: 20px; }
.listado__categoria {
  break-inside: avoid; margin-bottom: 20px; padding: 18px 20px 10px;
  border-radius: 16px; background: var(--blanco); box-shadow: 0 2px 10px rgba(43, 17, 0, .08);
}
.listado__categoria h2 {
  margin: 0 0 4px; padding-bottom: 10px; border-bottom: 2px solid var(--crema);
  font-size: 1.15rem; letter-spacing: .04em; color: var(--chocolate);
}
.listado__productos { margin: 0; padding: 0; list-style: none; }
/* Nombre y precio en una línea; la nota o las variantes, debajo */
.listado__fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px;
  margin-inline: -10px; padding: 10px; border-radius: 10px; line-height: 1.3;
}
.listado__fila + .listado__fila { border-top: 1px solid #f1e6dd; }
.listado__nombre { font-weight: 700; color: var(--chocolate); }
.listado__nombre a { color: inherit; text-decoration: none; }
.listado__precio { font-weight: 700; color: var(--naranja-oscuro); white-space: nowrap; text-align: right; }
.listado__precio del { display: block; font-size: .85rem; font-weight: 400; color: var(--texto-suave); }
.listado__meta, .listado__opciones { grid-column: 1 / -1; }
.listado__meta { font-size: .95rem; color: var(--texto-suave); }
.listado__opciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.listado__opcion {
  padding: 6px 12px; border-radius: var(--radio); background: var(--crema);
  font-size: .95rem; font-weight: 700; color: var(--chocolate); text-decoration: none;
}
a.listado__opcion { color: var(--turquesa-oscuro); }
a.listado__opcion:hover { background: var(--turquesa-oscuro); color: var(--blanco); }
/* Una fila con ficha se pulsa entera: el enlace del nombre la cubre */
.listado__fila--ficha { position: relative; cursor: pointer; }
.listado__fila--ficha:hover { background: #fdf6f1; }
.listado__fila--ficha .listado__nombre a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.listado__fila--ficha a.listado__opcion { position: relative; z-index: 1; }   /* por encima de ese enlace */
.listado__fila--ficha:has(.listado__nombre a:focus-visible) { outline: 3px solid var(--naranja); }
.listado__fila--ficha .listado__nombre a:focus-visible { outline: 0; }
.listado .badge-agotado { margin: 0 0 0 6px; vertical-align: .1em; }

.listado__contacto { padding-bottom: 20px; }
.listado__contacto h2 { margin-bottom: 12px; }
.listado__contacto p { margin: 0 0 8px; }
.listado__telefono { font: 900 1.6rem/1.2 var(--titulos); }
.listado__telefono a { color: var(--chocolate); text-decoration: none; }
.listado__contacto .boton { width: 100%; margin-top: 4px; }
.listado__nota { margin: 4px 0 0; text-align: center; font-size: .95rem; color: var(--texto-suave); }

/* Iconos SVG del catálogo (catalogo/partials/iconos.php): del tamaño y el color del texto */
.icono { width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; flex-shrink: 0; }

/* ─── Ficha de producto ───────────────────────────────────────────────────── */
/* La misma en toda la web (catalogo/partials/ficha.php y ficha.js): se abre al
   pulsar un producto del catálogo, de la home, de un artículo o de Municipios.
   Es un <dialog> a pantalla completa que hace de fondo oscuro, con la ficha
   centrada dentro. En /catalogo-precios/ la viste catalogo/style.css. */
html:has(.modal-overlay[open]) { overflow: hidden; }
.modal-overlay {
  position: fixed; inset: 0; z-index: 10;
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; border: 0; background: rgba(43, 17, 0, .55); color: var(--texto);
}
.modal-overlay:not([open]) { display: none; }
.modal-overlay::backdrop, .lightbox::backdrop { background: none; }
.modal-overlay [hidden] { display: none !important; }
.modal-container {
  display: flex; flex-direction: column; width: min(100%, 1000px); max-height: 100%;
  border-radius: 16px; overflow: hidden; background: var(--blanco);
  box-shadow: 0 20px 60px rgba(43, 17, 0, .3);
  animation: ficha-entra .2s ease;
}
.modal-container:focus { outline: 0; }
@keyframes ficha-entra { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .modal-container { animation: none; } }

.modal-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 14px 14px 12px 20px; border-bottom: 1px solid #eadfd6;
}
.modal-header form { margin: 0; }
.modal-category-badge {
  margin: 0; font: 700 .7rem/1.3 var(--titulos); letter-spacing: .05em; text-transform: uppercase;
  color: var(--turquesa-oscuro);
}
.modal-product-name { margin: 2px 0 0; font-size: 1.5rem; font-weight: 800; text-transform: none; color: var(--chocolate); }
.badge-agotado {
  display: inline-block; margin: 6px 0 0; padding: 1px 8px; border-radius: var(--radio);
  background: #fdecea; color: #a8322a; font: 700 .7rem/1.6 var(--cuerpo); letter-spacing: .04em; text-transform: uppercase;
}
.modal-close {
  flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--crema); font: 400 1.8rem/1 var(--cuerpo); color: var(--chocolate); cursor: pointer;
}
.modal-close:hover { background: var(--chocolate); color: var(--blanco); }

/* Móvil: todo en una columna que se desplaza; la imagen arriba */
.modal-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.modal-label-col { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; background: #f3ebe4; }
.modal-overlay.sin-imagen .modal-label-col { display: none; }
/* Visor: etiqueta y fotos ocupan el mismo sitio. Cada imagen va en un marco
   (.foto-marco) que la ciñe, para poner encima su aviso de IA: por eso el
   tope de su tamaño es el del visor en cqw/cqh y no en %, que dentro del marco
   ya no medirían el visor */
.modal-media { display: flex; align-items: center; justify-content: center; width: 100%; height: min(50dvh, 420px); container-type: size; }
.media-view { display: none; }
#modal-label-img.is-active { display: block; }
.modal-foto-slider { position: relative; width: 100%; height: 100%; align-items: center; justify-content: center; touch-action: pan-y; }
.modal-foto-slider.is-active { display: flex; }
#modal-label-img, .modal-foto-slider img {
  width: auto; max-width: 100cqw; max-height: 100cqh; object-fit: contain;
  border-radius: 10px; box-shadow: 0 4px 14px rgba(43, 17, 0, .12); cursor: zoom-in;
}
/* Con varias fotos, el aviso sube para no tapar los puntos */
.modal-foto-slider:has(.foto-dot) .aviso-ia { bottom: 28px; }
.foto-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0 0 4px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(43, 17, 0, .2);
  font: 400 1.8rem/1 var(--cuerpo); color: var(--chocolate); cursor: pointer;
}
.foto-nav:hover { background: var(--chocolate); color: var(--blanco); }
.foto-prev { left: 4px; }
.foto-next { right: 4px; }
.foto-dots { position: absolute; left: 0; right: 0; bottom: -4px; display: flex; justify-content: center; gap: 2px; }
/* Botón de 24 px para el dedo, punto de 10 px a la vista */
.foto-dot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.foto-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgba(43, 17, 0, .25); }
.foto-dot.is-active::after { background: var(--chocolate); }
/* Selector al pie para pasar de la foto a la etiqueta */
.modal-media-switch { display: flex; gap: 4px; padding: 4px; border-radius: var(--radio); background: var(--blanco); box-shadow: 0 1px 4px rgba(43, 17, 0, .1); }
.media-tab { padding: 8px 18px; border: 0; border-radius: var(--radio); background: none; font: 700 .9rem/1 var(--cuerpo); color: var(--chocolate); cursor: pointer; }
.media-tab:hover { background: var(--crema); }
.media-tab.is-active { background: var(--chocolate); color: var(--blanco); }

.modal-info-col { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.modal-price-block { padding: 12px 16px; border-radius: 12px; background: var(--crema); }
.modal-price-label { font: 700 .75rem/1.3 var(--titulos); letter-spacing: .06em; text-transform: uppercase; color: var(--marron-oscuro); }
.modal-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.modal-price-value, .modal-price-final { font: 900 2rem/1.15 var(--titulos); color: var(--naranja-oscuro); }
/* Con descuento, el precio de tarifa pasa a segundo plano y manda el final */
.modal-price-value.is-tachado { font-size: 1.2rem; font-weight: 600; color: var(--texto-suave); text-decoration: line-through; }
.modal-descuento {
  display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: var(--radio);
  background: var(--turquesa-oscuro); color: var(--blanco); font-size: .85rem; font-weight: 700;
}
.modal-price-note { margin-top: 4px; font-size: .8rem; letter-spacing: .03em; text-transform: uppercase; color: var(--texto-suave); }
.modal-pedir { gap: 8px; width: 100%; }

/* El HTML de "info" viene del admin del catálogo, con sus clases lbl-* */
.modal-label-info { font-size: 1rem; line-height: 1.55; }
.modal-label-info p { margin-bottom: .75em; }
.modal-label-info .lbl-attrs { margin-bottom: 1em; font-size: .9rem; font-weight: 600; color: var(--turquesa-oscuro); }
.modal-label-info h4 { margin: 1em 0 .25em; font-size: .85rem; letter-spacing: .05em; color: var(--marron-oscuro); }
.modal-label-info .lbl-warn {
  display: flex; gap: 6px; margin: 1em 0 0; padding: 10px 12px; border-radius: 8px;
  background: #fdf3e7; font-size: .85rem; color: var(--texto-suave);
}

.modal-consejos { display: none; padding-left: 16px; border-left: 3px solid var(--turquesa); }
.modal-consejos.visible { display: block; }
.modal-consejos h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 .5em; font-size: 1.05rem; color: var(--chocolate); }
.modal-consejos h3 .icono { color: var(--turquesa-oscuro); }
.modal-blog-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 12px; }
.modal-blog-links:empty { display: none; }
.modal-blog-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }

.modal-share { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid #eadfd6; }
.modal-share-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 16px;
  border: 2px solid var(--chocolate); border-radius: var(--radio); background: var(--blanco);
  font: 700 .9rem/1.2 var(--cuerpo); color: var(--chocolate); text-decoration: none; cursor: pointer;
}
.modal-share-btn:hover { background: var(--chocolate); color: var(--blanco); }

/* Escritorio: la imagen a la izquierda, a toda la altura, y el texto a la
   derecha con su propio scroll. La altura tiene que ser fija: con solo un
   máximo, la ficha crece con el texto y lo que sobra se corta. */
@media (min-width: 720px) {
  .modal-overlay { padding: 32px; }
  .modal-container { height: min(100%, 720px); }
  .modal-body { flex-direction: row; overflow: hidden; }
  .modal-label-col { width: min(42%, 400px); flex-shrink: 0; justify-content: center; padding: 24px; }
  .modal-media { flex: 1; min-height: 0; height: auto; }
  .modal-info-col { flex: 1; min-width: 0; padding: 24px 28px; overflow-y: auto; overscroll-behavior: contain; }
}

/* Etiqueta o foto ampliada; al pulsarla, a tamaño real */
.lightbox {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; border: 0; background: rgba(0, 0, 0, .9); overflow: auto;
}
.lightbox:not([open]) { display: none; }
.lightbox form { margin: 0; }
.lightbox-img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; cursor: zoom-in; }
.lightbox.zoomed { align-items: flex-start; justify-content: flex-start; }
.lightbox.zoomed .lightbox-img { max-width: none; max-height: none; cursor: zoom-out; }
.lightbox-close {
  position: fixed; top: 12px; right: 12px; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); font: 400 1.8rem/1 var(--cuerpo); color: var(--chocolate); cursor: pointer;
}
/* Ampliada, el aviso de IA se queda fijo abajo en el centro (sobre la imagen
   o justo debajo) aunque se mueva la imagen */
.lightbox .aviso-ia { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); font-size: .9rem; }

/* ─── Preguntas frecuentes ────────────────────────────────────────────────── */
.pregunta { border-bottom: 1px solid #e3d6cb; }
.pregunta summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  cursor: pointer; padding: 16px 0; list-style: none;
  font: 700 1.15rem/1.3 var(--titulos);
}
.pregunta summary::-webkit-details-marker { display: none; }
/* Flecha a la derecha que gira al abrir */
.pregunta summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px;
  border-right: 2px solid var(--marron); border-bottom: 2px solid var(--marron);
  transform: translateY(-3px) rotate(45deg); transition: transform .2s;
}
.pregunta[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.pregunta p { margin: 0 0 16px; color: var(--texto-suave); }

/* ─── Páginas interiores ──────────────────────────────────────────────────── */
.cabeza-pagina { background: var(--crema); padding-block: 40px 24px; }
@media (min-width: 768px) { .cabeza-pagina { padding-block: 56px 40px; } }
.cabeza-pagina h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 900; text-transform: uppercase; color: var(--chocolate); }
/* El último elemento no suma su margen al relleno de la cabecera */
.cabeza-pagina .contenedor > :last-child { margin-bottom: 0; }

/* Con ilustración de fondo: el texto va en una tarjeta encima */
.cabeza-pagina--ilustrada { position: relative; overflow: hidden; padding-block: 56px; background: #d5e3b5; }
.cabeza-pagina__fondo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 70% center;
}
.cabeza-pagina__tarjeta {
  position: relative; max-width: 560px; padding: 20px 22px;
  border-radius: 16px; background: rgba(251, 238, 232, .92);
  box-shadow: 0 8px 30px rgba(43, 17, 0, .12);
}
.cabeza-pagina__tarjeta h1 { margin-bottom: .2em; }
.cabeza-pagina__tarjeta .subtitulo { margin: 0; font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--marron-oscuro); }
@media (min-width: 768px) {
  .cabeza-pagina--ilustrada { padding-block: 112px; }
  .cabeza-pagina__tarjeta { padding: 32px 40px; }
}
/* Municipios: la plaza con el ayuntamiento y la furgoneta. En pantalla ancha, la
   tarjeta va arriba a la derecha, sobre los montes, y la furgoneta queda debajo */
.cabeza-pagina--plaza .cabeza-pagina__fondo { object-position: 40% 0; }
@media (min-width: 900px) {
  .cabeza-pagina--plaza { padding-block: 32px 300px; }
  .cabeza-pagina--plaza .cabeza-pagina__tarjeta { max-width: 460px; margin-left: auto; padding: 24px 32px; }
}
@media (min-width: 1200px) { .cabeza-pagina--plaza .cabeza-pagina__tarjeta { max-width: 500px; } }
/* Hasta 1200 px la tarjeta tiene que ser baja para no tapar la furgoneta */
@media (min-width: 900px) and (max-width: 1199px) {
  .cabeza-pagina--plaza .cabeza-pagina__tarjeta { padding: 20px 24px; }
  .cabeza-pagina--plaza h1 { font-size: 2.5rem; }
  .cabeza-pagina--plaza .boton { padding-inline: 16px; }
}

.seccion { padding-block: 32px; }
@media (min-width: 768px) { .seccion { padding-block: 40px; } }
/* Última sección de la página: más aire antes del pie */
main > .seccion:last-child { padding-bottom: 56px; }
@media (min-width: 768px) { main > .seccion:last-child { padding-bottom: 80px; } }
.seccion + .seccion { border-top: 1px solid #eadfd6; }
.seccion h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); text-transform: none; }
.seccion h3 { margin-top: 1.5em; }
.seccion__resumen { font-size: 1.25rem; color: var(--texto-suave); }
.seccion li { margin-bottom: .35em; }
.seccion :is(ul, ol) { padding-left: 1.4em; }

/* ─── Artículos (Consejos, Re-ciclado) ────────────────────────────────────── */
/* Lista de la sección: una tarjeta por artículo, con foto, título y resumen */
ul.articulos { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { ul.articulos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { ul.articulos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.articulos > li { margin: 0; }
.articulos__enlace {
  display: block; height: 100%; overflow: hidden; border-radius: 12px;
  background: var(--blanco); box-shadow: 0 2px 10px rgba(43, 17, 0, .08);
  color: var(--texto); text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.articulos__enlace:hover { color: var(--texto); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(43, 17, 0, .14); }
.articulos__enlace img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.articulos__enlace h2 { margin: 16px 16px 8px; font-size: 1.3rem; color: var(--chocolate); }
.articulos__enlace p { margin: 0 16px 20px; color: var(--texto-suave); }
@media (prefers-reduced-motion: reduce) { .articulos__enlace, .articulos__enlace:hover { transition: none; transform: none; } }

/* Página de un artículo: sus apartados son h2 y h3, con el tamaño que tenían
   como h3 y h4 cuando todos iban en la misma página */
.cabeza-pagina__antetitulo a { color: inherit; }
.articulo h2 { font-size: 1.3rem; margin-top: 1.5em; }
.articulo h3 { font-size: 1.1rem; }
.articulo__datos { color: var(--texto-suave); font-size: .95rem; }
.relacionados { margin-top: 40px; padding-top: 8px; border-top: 1px solid #eadfd6; }
ul.relacionados__lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px;
  padding: 0; list-style: none;
}
.relacionados__lista > li { margin: 0; }

.manualidad { display: grid; gap: 24px; margin-top: 40px; scroll-margin-top: 16px; }
.manualidad__foto { width: 100%; max-width: 220px; border-radius: 12px; }
.manualidad h2 { margin-top: 0; font-size: 1.5rem; text-transform: uppercase; }
@media (min-width: 640px) { .manualidad { grid-template-columns: 220px 1fr; align-items: start; } }

.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-block: 16px 24px; }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }

.legal h2 { font-size: 1.5rem; text-transform: none; margin-top: 1.5em; }
.legal h2:first-child { margin-top: 0; }
.falta { background: #ffe0e0; color: #a00000; padding: 0 4px; font-weight: 700; }

/* ─── Municipios sostenibles ──────────────────────────────────────────────── */
.cabeza-pagina__antetitulo {
  margin-bottom: .4em;
  font: 700 .8rem/1.3 var(--titulos); letter-spacing: .06em; text-transform: uppercase;
  color: var(--turquesa-oscuro);
}
.cabeza-pagina__tarjeta .botones { margin-top: 16px; }
.solo-js { display: none; }
.js .solo-js { display: inline-flex; }
.solo-impresion { display: none; }

.ventajas { display: grid; gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .ventajas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ventajas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ventajas li { padding: 20px; border-radius: 12px; background: var(--crema); }
.ventajas h3 { color: var(--chocolate); }
.ventajas p { margin: 0; font-size: 1rem; color: var(--texto-suave); }

/* Tablas de precios. En móvil, cada fila pasa a ser una ficha */
.precios {
  width: 100%; margin: 24px 0 12px;
  border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden;
  background: var(--blanco); box-shadow: 0 2px 10px rgba(43, 17, 0, .08); font-size: 1rem;
}
/* Ancho fijo para las columnas de precio: así coinciden de una tabla a otra */
.precios { table-layout: fixed; }
.precios thead .precios__num { width: 9.5rem; }
.precios--uso thead th:first-child { width: 36%; }
.precios th, .precios td { padding: 12px 16px; border-bottom: 1px solid #eadfd6; text-align: left; vertical-align: middle; }
.precios thead th {
  background: #fdf7f3; color: var(--texto-suave);
  font: 700 .75rem/1.3 var(--titulos); letter-spacing: .05em; text-transform: uppercase;
}
.precios tbody th { font-weight: 400; }
.precios .precios__num { text-align: right; white-space: nowrap; }
.precios__producto {
  display: flex; align-items: center; gap: 12px;
  font: 700 1rem/1.3 var(--titulos); color: var(--chocolate); text-decoration: none;
}
.precios__producto:hover { color: var(--marron); }
.precios__producto .foto-marco { flex: none; }
.precios__producto img { flex: none; width: 40px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; background: #f3ebe4; }
.precios__aviso { display: block; font: 400 .8rem/1.3 var(--cuerpo); color: var(--naranja-oscuro); }
.precios__kg { display: block; font: 400 .8rem/1.3 var(--cuerpo); color: var(--texto-suave); }
.precios__uso { color: var(--texto-suave); }
.precios__oferta { font-weight: 700; color: var(--naranja-oscuro); }
.precios tfoot th, .precios tfoot td { border-bottom: 0; background: #fdf7f3; font-weight: 700; }
.precios tfoot .precios__oferta { font-size: 1.2rem; }
.precios__grupo { margin-top: 32px; }
.precios__nota { font-size: .95rem; color: var(--texto-suave); }
@media (max-width: 639px) {
  .precios, .precios tbody, .precios tfoot { display: block; }
  .precios thead { display: none; }
  .precios tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 16px; border-bottom: 1px solid #eadfd6; }
  .precios th, .precios td { display: block; padding: 0; border: 0; }
  .precios tr > th, .precios .precios__uso { grid-column: 1 / -1; }
  .precios .precios__num { text-align: left; }
  .precios td[data-titulo]::before {
    content: attr(data-titulo); display: block;
    font: 700 .7rem/1.3 var(--titulos); letter-spacing: .05em; text-transform: uppercase; color: var(--texto-suave);
  }
  .precios tfoot tr { background: #fdf7f3; border-bottom: 0; }
}

.pasos-compra { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos-compra li {
  position: relative; padding: 16px 16px 16px 60px; border-radius: 12px;
  background: rgba(255, 255, 255, .08); counter-increment: paso;
}
.pasos-compra li::before {
  content: counter(paso); position: absolute; top: 14px; left: 16px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--crema); color: var(--chocolate); font: 900 1rem/30px var(--titulos); text-align: center;
}

.norma { margin-bottom: 32px; }
.norma h3 { color: var(--chocolate); }
.norma blockquote { margin: 0 0 8px; padding: 12px 20px; border-left: 4px solid var(--turquesa); background: #f1f8f7; font-style: italic; }
.norma__fuente, .norma__aviso { font-size: .9rem; color: var(--texto-suave); }
.norma__aviso { font-style: italic; }

.municipios { columns: 2 220px; padding-left: 1.2em; }
.fichas { padding: 0; list-style: none; }
@media (min-width: 768px) { .fichas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; } }
.fichas li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid #eadfd6; }
.fichas li span { flex: 1 1 220px; font-weight: 600; }

/* Así llegan las cajas (bag-in-box) y sello de punto de venta oficial */
.caja-bib { margin-top: 32px; }
.caja-bib .foto { max-width: 480px; margin-inline: auto; background: #fff; }
.caja-bib__datos { padding-left: 1.2em; }
.caja-bib__datos li { margin-bottom: 6px; }
.caja-bib__oficial { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.caja-bib__oficial img { flex: 0 0 auto; width: 96px; height: 96px; }

/* Certificado anual de envases evitados: el ejemplo, en papel */
.certificado__calculo { font-size: .95rem; color: var(--texto-suave); }
.certificado-ejemplo { margin: 0; text-align: center; }
.certificado-ejemplo .foto { max-width: 420px; margin-bottom: 8px; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }
.certificado-ejemplo figcaption { font-size: .9rem; color: var(--texto-suave); }

/* Formulario de presupuesto (sobre fondo marrón) */
.dos-columnas--arriba { align-items: start; }
.formulario { display: grid; gap: 16px; margin-top: 16px; }
.formulario > .boton { justify-self: start; }
.campos-dos { display: grid; gap: 16px; }
@media (min-width: 640px) { .campos-dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.campo label { display: block; margin-bottom: 4px; font-size: 1rem; font-weight: 700; }
.campo__opcional { font-weight: 400; opacity: .85; }
.campo input:not([type="checkbox"]), .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 2px solid transparent; border-radius: 10px;
  background: var(--blanco); color: var(--texto); font: 400 1rem/1.4 var(--cuerpo);
}
.campo textarea { resize: vertical; }
.campo [aria-invalid="true"] { border-color: #e4572e; }
.campo__error {
  display: inline-block; margin: 6px 0 0; padding: 2px 8px; border-radius: 6px;
  background: #fde8e4; color: #7a1d0e; font-size: .95rem; font-weight: 700;
}
.campo--casilla { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; }
.campo--casilla input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--naranja-oscuro); }
.campo--casilla label { font-weight: 400; }
.campo--casilla .campo__error { grid-column: 1 / -1; justify-self: start; }
.campo--trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso { margin: 16px 0; padding: 14px 18px; border-radius: 12px; }
.aviso p { margin: 0; }
.aviso--ok { background: #e3f4ea; color: #14532d; }
.aviso--error { background: #fde8e4; color: #7a1d0e; }
.aviso a, .bloque--marron .aviso a { color: inherit; }
.datos-proveedor__titulo { margin-top: 32px; }
.datos-proveedor { padding: 0; list-style: none; font-size: 1rem; }
.datos-proveedor li { padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .15); }

/* Franja de la home que lleva a la página */
.franja { display: grid; gap: 16px 32px; align-items: center; }
@media (min-width: 768px) { .franja { grid-template-columns: minmax(0, 1fr) auto; } }
.franja h2 { margin-bottom: .25em; }
.franja p { margin: 0; }

/* ─── Pie ─────────────────────────────────────────────────────────────────── */
.pie { background: var(--chocolate); color: #eadfd6; padding-block: 48px 24px; font-size: 1rem; }
.pie a { color: var(--blanco); }
.pie ul { padding: 0; list-style: none; }
.pie li { margin-bottom: .4em; }
.pie__rejilla { display: grid; gap: 24px; }
@media (min-width: 768px) { .pie__rejilla { grid-template-columns: 2fr 1fr 1fr; } }
.pie__marca { font: 900 1.6rem/1 var(--titulos); color: var(--blanco); }
.pie__titulo { font-weight: 700; color: var(--blanco); text-transform: uppercase; letter-spacing: .05em; font-size: .9rem; }
.pie__legal { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: .9rem; }

/* ─── Impresión ───────────────────────────────────────────────────────────── */
/* Toda la web se imprime limpia; así se guarda en PDF el dosier de /municipios-sostenibles/ */
@media print {
  @page { size: A4; margin: 14mm; }
  body { font-size: 10.5pt; }
  .saltar, .cabecera__boton, .menu, .pie, .no-imprimir, .botones, .marca-agua,
  .cabeza-pagina__fondo, .solo-js, .boton { display: none !important; }
  .solo-impresion { display: block; margin: 0 auto 8px; font-size: 9pt; color: var(--texto-suave); }
  .cabecera { position: static; border: 0; box-shadow: none; animation: none; background: none; }
  .bloque, .cabeza-pagina { padding-block: 12px; background: none !important; color: var(--texto) !important; }
  .bloque--marron h2, .bloque--marron h3 { color: var(--chocolate); }
  .bloque--marron a:not(.boton) { color: var(--turquesa-oscuro); }
  .cabeza-pagina__tarjeta { max-width: none; padding: 0; background: none; box-shadow: none; }
  .pasos-compra li { background: none; border: 1px solid #ddd; }
  .pasos-compra li::before { border: 1px solid var(--chocolate); }
  .datos-proveedor li { border-color: #ddd; }
  .pregunta summary::after { display: none; }
  .precios { box-shadow: none; border: 1px solid #ddd; }
  .precios thead .precios__num { width: 6.5rem; }
  .precios--uso thead th:first-child { width: 30%; }
  .precios, .norma, .ventajas li, .pasos-compra, .pregunta, .datos-proveedor { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  .salto-impresion { break-before: page; }
  a { text-decoration: none; }

  /* Dosier de Municipios: una sección por página, sin títulos sueltos al pie */
  /* Portada: la plaza arriba, fundida en blanco por abajo, y el título encima de lo fundido */
  .cabeza-pagina--plaza { padding: 0; overflow: visible; }
  .cabeza-pagina--plaza .cabeza-pagina__fondo {
    display: block !important; position: static; height: auto;
    aspect-ratio: 2 / 1; object-position: 40% 100%;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 95%);
            mask-image: linear-gradient(to bottom, #000 60%, transparent 95%);
  }
  .cabeza-pagina--plaza .contenedor { position: relative; margin-top: -16mm; }
  .cabeza-pagina--plaza .cabeza-pagina__tarjeta { margin: 0; }
  .cabeza-pagina--plaza h1 { font-size: 30pt; }
  .cabeza-pagina__fecha { margin: 6px 0 0; }
  .cabeza-pagina--plaza + .bloque { padding-top: 4mm; }
  .ventajas { gap: 8px; margin-top: 10px; }
  .ventajas li { padding: 10px 12px; }
  .ventajas h3 { margin-bottom: 4px; font-size: 11pt; }
  .ventajas p { font-size: 9.5pt; line-height: 1.45; }
  .bloque .subtitulo { margin-bottom: 10px; font-size: 11pt; }
  /* Pack de Inicio: la caja, a un tercio, junto a «Así llegan las cajas» */
  .caja-bib { grid-template-columns: 32% minmax(0, 1fr); gap: 20px; margin-top: 12px; break-inside: avoid; }
  .caja-bib .foto { max-width: none; margin: 0; }
  .caja-bib__oficial { margin-top: 10px; }
  .caja-bib__oficial img { width: 64px; height: 64px; }
  /* Tablas más apretadas: los cinco grupos de «Más productos en caja», en una página */
  .precios th, .precios td { padding: 3px 10px; }
  .precios__producto img { width: 18px; }
  .precios__grupo { margin: 8px 0 4px; }
  .precios__nota { margin-block: 6px; font-size: 8.5pt; }
  /* Cómo se compra y el certificado: texto e imagen, uno al lado del otro */
  #como-se-compra .dos-columnas { grid-template-columns: minmax(0, 1fr) 38%; gap: 20px; }
  #certificado .dos-columnas { grid-template-columns: minmax(0, 1fr) 40%; gap: 24px; align-items: start; }
  .pasos-compra { gap: 6px; }
  .pasos-compra li { padding: 8px 10px 8px 46px; }
  .pasos-compra li::before { top: 7px; left: 10px; }
  .certificado-ejemplo .foto { max-width: none; box-shadow: none; border: 1px solid #ddd; }
  /* Preguntas y datos del proveedor, en la última página */
  .pregunta summary { padding: 6px 0 2px; font-size: 10.5pt; }
  .pregunta p { margin-bottom: 5px; font-size: 9.5pt; line-height: 1.45; }
  .datos-proveedor__titulo { margin-top: 16px; }
  .datos-proveedor li { padding: 3px 0; }
}