@charset "UTF-8";
/* ==========================================================================
   EDERA — hoja única.

   Editorial y calmada: mucho aire, márgenes generosos, bordes rectos salvo los
   botones. Cero sombras difusas, cero degradados, cero animaciones llamativas.
   Separadores de 1px en Echo. Nada dura más de 200ms.

   Mobile first con un solo punto de ruptura, en 768px.
   ========================================================================== */

/* --- Reinicio corto ------------------------------------------------------- */

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

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

body {
  margin: 0;
  /* El fondo por defecto es hueso, nunca blanco puro. */
  background: var(--hueso);
  /* Gordons Green es el único color de texto sobre fondo claro. */
  color: var(--gordons);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.08; }
p { margin: 0 0 1em; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--picholine); }

:focus-visible {
  outline: 2px solid var(--picholine);
  outline-offset: 3px;
}

/* --- Barra de progreso ---------------------------------------------------- */
/* Solo aparece si la petición pasa de 150ms; por debajo sería un parpadeo. */

.progreso {
  position: fixed;
  inset: 0 auto auto 0;
  height: 2px;
  width: 100%;
  background: var(--picholine);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 200;
  transition: transform 1.4s cubic-bezier(0.1, 0.7, 0.2, 1);
}
/* Avanza deprisa hasta el 80% y ahí espera: no se puede saber cuánto queda,
   así que fingir una barra exacta sería mentir. */
.progreso--activa { transform: scaleX(0.8); }
.progreso--fin {
  transform: scaleX(1);
  opacity: 0;
  transition: transform 120ms linear, opacity 200ms linear 100ms;
}

/* --- Contenido ------------------------------------------------------------ */

#app {
  display: block;
  min-height: 60vh;
  padding: 2.5rem var(--paso) 3.5rem;
  max-width: var(--ancho);
  margin: 0 auto;
}

/* Los títulos reciben el foco al cambiar de página; no debe verse un recuadro
   permanente, pero sí cuando se navega con teclado. */
h1[tabindex="-1"]:focus { outline: none; }
h1[tabindex="-1"]:focus-visible { outline: 2px solid var(--picholine); outline-offset: 6px; }

.pagina__titulo {
  font-family: var(--display);
  /* 300 era para una serif; una geométrica a ese cuerpo necesita algo más de
     peso y bastante menos tracking o se deshace. */
  font-weight: 400;
  font-size: clamp(2.75rem, 11vw, 5.5rem);
  letter-spacing: -0.032em;
  line-height: 1.02;
  margin-bottom: 1.5rem;
}

/* --- Portada -------------------------------------------------------------- */

/* El hero de la portada es el del buscador y vive en el armazon: aqui no
   queda nada suyo. Tenerlo escrito tambien aqui hacia que el titulo saliera
   alineado a la izquierda y con otro cuerpo. */

.boton {
  display: inline-block;
  background: var(--gordons);
  color: var(--hueso);
  font-family: var(--texto);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.85rem 1.75rem;
  min-height: 48px;
  line-height: 1.4;
  /* Lo único con las esquinas redondeadas de todo el sitio. */
  border-radius: 4px;
  border: 1px solid var(--gordons);
  cursor: pointer;
  transition: background var(--tiempo) ease, color var(--tiempo) ease;
}
.boton:hover { background: var(--picholine); border-color: var(--picholine); color: var(--hueso); }

.boton--claro {
  background: var(--hueso);
  color: var(--gordons);
  border-color: var(--hueso);
}
.boton--claro:hover { background: var(--echo); border-color: var(--echo); color: var(--gordons); }

/* --- Banda de tres columnas ----------------------------------------------- */

.banda { border-top: 1px solid var(--echo); padding-top: 2.5rem; margin-bottom: 4rem; }
.banda__rejilla { display: grid; gap: 2.5rem; }
.icono { color: var(--picholine); margin-bottom: 1rem; }
.banda__titulo {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.018em;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.banda__texto { color: var(--picholine); margin: 0; }

/* --- Secciones ------------------------------------------------------------ */

.seccion { margin-bottom: 4rem; }
.seccion__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--echo);
  padding-bottom: 0.75rem;
  margin-bottom: 2rem;
}
.seccion__titulo { font-family: var(--display); font-size: 2rem; }
.seccion__mas { font-size: 0.95rem; color: var(--picholine); }

/* --- Rejilla de láminas --------------------------------------------------- */

.rejilla { display: grid; gap: 3rem 1.75rem; }
/* En movil, dos por fila: una tienda con una columna obliga a recorrer el
   doble de pantalla para ver lo mismo. */
.rejilla--tienda { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }

.tarjeta { display: flex; flex-direction: column; }
.tarjeta__enlace { display: block; }
.tarjeta__enlace:hover { color: inherit; }
.tarjeta__img {
  width: 100%;
  aspect-ratio: 1.618 / 1;
  object-fit: cover;
  background: var(--echo);
  margin-bottom: 0.9rem;
}
/* El enlace entero es el objetivo tactil, no solo el titulo. */
.tarjeta__enlace { min-height: 44px; }
.tarjeta__enlace:hover .tarjeta__titulo { color: var(--picholine); }
.tarjeta__cuerpo { display: block; }
.tarjeta__titulo {
  display: block;
  font-family: var(--display);
  font-size: 1.4rem;
  line-height: 1.15;
  transition: color var(--tiempo) ease;
}
.tarjeta__meta {
  display: block;
  font-size: 0.85rem;
  color: var(--picholine);
  margin-top: 0.2rem;
}

/* Tira de muestras de la lámina. */
.tira { display: flex; gap: 2px; margin-top: 0.85rem; }
.tira__muestra {
  flex: 1 1 0;
  min-width: 0;
  /* En movil, dieciseis muestras en 350 px salen a 21 px de ancho; con la
     proporcion aurea quedaban en 13 px de alto y no se veia el color, que es
     justo lo que hay que ver. Se les da altura fija y se recupera la
     proporcion a partir del punto de ruptura, donde ya caben. */
  height: 2.25rem;
}

/* --- Boletín -------------------------------------------------------------- */

.boletin { margin-bottom: 1rem; }
.boletin__caja { background: var(--gordons); padding: 2.5rem 1.5rem; }
.boletin__titulo {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.028em;
  font-size: clamp(2rem, 6vw, 3rem);
  /* Sobre Gordons Green el texto va en Echo: Moncur no llega a AA. */
  color: var(--echo);
  margin-bottom: 0.75rem;
}
.boletin__texto { color: var(--echo); margin-bottom: 1.75rem; }
.boletin__form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 30rem; }
.boletin__form input {
  font-family: var(--texto);
  font-size: 16px;
  min-height: 48px;
  padding: 0.8rem 1rem;
  border: 1px solid var(--picholine);
  background: var(--gordons);
  color: var(--hueso);
  border-radius: 4px;
}
.boletin__form input::placeholder { color: var(--moncur); }
.boletin__form input:focus-visible { outline-color: var(--moncur); }

/* --- Colección ------------------------------------------------------------ */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-end;
  border-bottom: 1px solid var(--echo);
  padding-bottom: 1.5rem;
  margin-bottom: 1rem;
}
.filtros__campo { display: flex; flex-direction: column; gap: 0.3rem; }
.filtros__campo label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--picholine);
}
.filtros select {
  font-family: var(--texto);
  /* 16px exactos: por debajo, iOS hace zoom al enfocar el campo y descoloca
     la pagina entera. */
  font-size: 16px;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--picholine);
  background: var(--hueso);
  color: var(--gordons);
  border-radius: 0;
  min-width: 12rem;
}
.filtros__cuenta {
  font-size: 0.85rem;
  color: var(--picholine);
  margin-bottom: 2rem;
}
.vacio { color: var(--picholine); }
.vacio a { color: var(--gordons); text-decoration: underline; }

/* --- Ficha de lámina ------------------------------------------------------ */

.migas {
  font-size: 0.85rem;
  color: var(--picholine);
  margin-bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.migas [aria-current] { color: var(--gordons); }

.ficha { display: grid; gap: 2.5rem; }
.ficha__img { width: 100%; background: var(--echo); }
.ficha__titulo {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.028em;
  font-size: clamp(2rem, 7vw, 3.25rem);
  margin-bottom: 0.4rem;
}
.ficha__meta { color: var(--picholine); margin-bottom: 2.5rem; }
.ficha__subtitulo {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--picholine);
  border-bottom: 1px solid var(--echo);
  padding-bottom: 0.6rem;
  margin-bottom: 0.6rem;
}
.ficha__nota { font-size: 0.85rem; color: var(--picholine); margin-bottom: 1.25rem; }

/* La paleta va en tira vertical, como pide el encargo. */
.paleta { display: flex; flex-direction: column; }
.paleta__fila {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--echo);
}
.paleta__muestra {
  flex: 0 0 auto;
  width: 4.25rem;
  aspect-ratio: 1.618 / 1;
  min-height: 44px;
  border: 1px solid rgba(43, 56, 41, 0.12);
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: transform var(--tiempo) ease;
}
.paleta__muestra:hover { transform: translateX(2px); }
/* Confirmación breve al copiar, sin sacar nada de sitio. */
.paleta__muestra.copiado::after {
  content: "Copiado";
  position: absolute;
  left: calc(100% + 0.6rem);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--picholine);
  white-space: nowrap;
}
.paleta__hex { font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.paleta__nombre { font-size: 0.85rem; color: var(--picholine); margin-left: auto; }

/* --- Prosa ---------------------------------------------------------------- */

.prosa { max-width: 38rem; }
.prosa__entrada { font-size: 1.2rem; color: var(--picholine); margin-bottom: 2rem; }
.prosa a { text-decoration: underline; text-underline-offset: 0.16em; }

/* Un descanso dentro del texto largo. Con un filete arriba en vez de con
   cuerpo grande: en una pagina de prosa, un titular fuerte parte la lectura
   en dos paginas distintas. */
.prosa__titulo {
  font-family: var(--display);
  font-size: 1.5rem;
  border-top: 1px solid var(--echo);
  padding-top: 1.75rem;
  margin: 2.5rem 0 1.25rem;
}

/* La linea de a quien nos dirigimos, bajo la entradilla de la portada. */
.hero__publico {
  color: var(--picholine);
  font-size: 1.05rem;
  margin-bottom: 2rem;
}

/* --- Formularios ---------------------------------------------------------- */

.formulario { max-width: 34rem; display: flex; flex-direction: column; gap: 1.5rem; }
.form-campo { display: flex; flex-direction: column; gap: 0.4rem; }
.form-campo label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--picholine);
}
.form-campo input, .form-campo textarea {
  font-family: var(--texto);
  font-size: 16px;
  min-height: 44px;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--picholine);
  background: var(--hueso);
  color: var(--gordons);
  border-radius: 0;
  width: 100%;
}
.form-campo textarea { resize: vertical; }
.campo__error { font-size: 0.85rem; color: var(--gordons); margin: 0; }
.form-campo [aria-invalid] { border-color: var(--gordons); border-width: 2px; }

.aviso { padding: 1rem 1.25rem; border: 1px solid var(--echo); max-width: 34rem; }
.aviso--bien { border-left: 3px solid var(--picholine); }
.aviso--mal  { border-left: 3px solid var(--gordons); }

/* ==========================================================================
   768px hacia arriba — el único punto de ruptura
   ========================================================================== */

/* En horizontal, el recorte de la pantalla se comeria el margen lateral. */
/* --- Tienda ---------------------------------------------------------------
   Una tienda de verdad: secciones con su nombre y su explicación, y el tomo
   abriendo la página, que es la pieza de la que salen todas las demás.

   Un producto se enseña con su foto si la tiene —los cuadernos llevan una obra
   en la cubierta— y con su banda de color si no. En los dos casos ocupa el
   mismo hueco, un rectángulo áureo apaisado y de esquinas rectas, así que el
   día que entren las fotos de producto no se mueve nada de sitio. */

/* La tarjeta de producto: la pieza sobre una baldosa neutra, el nombre en
   versalitas y el precio al pie. Siempre lo mismo en el mismo sitio, que es lo
   que permite recorrer una rejilla de un vistazo sin leerla entera. */

.producto__baldosa {
  display: block;
  position: relative;
  background: var(--echo);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 0.9rem;
}

/* La obra no llega al borde: respira dentro de su baldosa, como en el
   escaparate de una tienda. */
.producto__foto {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 0.72, 0.24, 1);
}
.tarjeta__enlace:hover .producto__foto { transform: scale(1.03); }

/* La banda de color, en general: rectangulo aureo apaisado y esquinas vivas,
   la marca de la casa. La usan la tarjeta, el destacado y la ficha. */
.producto__banda {
  display: flex;
  width: 100%;
  aspect-ratio: 1.618 / 1;
  background: var(--echo);
}
.producto__color { flex: 1 1 0; min-width: 0; }

/* DENTRO de la tarjeta va colocada dentro de su baldosa. Esta regla estaba sin
   acotar y la banda del producto destacado, que no tiene baldosa, se posicionó
   contra la pagina entera y la tapo de arriba abajo. */
.producto__baldosa .producto__banda {
  position: absolute;
  inset: 8%;
  width: auto;
  margin: auto 0;
  background: transparent;
}

/* En la ficha, a lo ancho; con foto, de filete debajo. */
.producto__banda--grande { margin-bottom: 0; }
.producto__banda--bajo {
  aspect-ratio: auto;
  height: 1.1rem;
  margin-top: 2px;
}
.producto__banda--filete {
  aspect-ratio: auto;
  height: 0.6rem;
}

.producto__nombre {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--gordons);
}
.tarjeta__enlace:hover .producto__nombre { color: var(--picholine); }

.producto__precio {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--picholine);
}

/* --- Barra de orden -------------------------------------------------------
   Un formulario GET normal: el orden queda en la URL y se puede compartir.
   Sin JavaScript hace falta el boton; con el, edera.js lo esconde y el select
   se envia solo. */

.barra-tienda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--echo);
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
}
.barra-tienda .filtros--tienda {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* En movil ocupa su propia fila y el desplegable se encoge: "Precio: de menor
   a mayor" mide mas que una pantalla de 320 px y desbordaba la pagina. */
.orden {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}
@media (min-width: 768px) { .orden { width: auto; } }
.orden label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--picholine);
}
.orden select {
  flex: 1 1 8rem;
  min-width: 0;
  max-width: 100%;
  font-family: var(--texto);
  font-size: 16px;
  min-height: 44px;
  color: var(--gordons);
  background: transparent;
  border: 1px solid var(--echo);
  padding: 0 0.6rem;
}
.orden select:hover { border-color: var(--picholine); }

.ficha__tipo {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--picholine);
  margin-bottom: 0.6rem;
}

/* --- El tomo, abriendo la tienda ---------------------------------------- */

.destacado {
  display: grid;
  gap: 1.5rem;
  border-top: 1px solid var(--echo);
  border-bottom: 1px solid var(--echo);
  padding: 2rem 0 2.5rem;
  margin-bottom: 3.5rem;
}
.destacado__figura { display: block; }
.destacado__figura img {
  width: 100%;
  aspect-ratio: 1.618 / 1;
  object-fit: cover;
  background: var(--echo);
}
.destacado__seccion {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--picholine);
  margin-bottom: 0.5rem;
}
.destacado__titulo {
  font-family: var(--display);
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}
.destacado__resumen { font-size: 1.1rem; color: var(--picholine); margin-bottom: 0.5rem; }
.destacado__formato { font-size: 0.9rem; color: var(--picholine); margin-bottom: 1.5rem; }
.destacado__pie { display: flex; align-items: center; gap: 1.25rem; margin: 0; }

/* --- Secciones y filtros ------------------------------------------------ */

.seccion__entrada {
  color: var(--picholine);
  max-width: 34rem;
  margin: -0.5rem 0 1.75rem;
}

/* Los filtros son enlaces, no un formulario: cada uno tiene su URL. */
.filtros--tienda {
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.filtro {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--echo);
  font-size: 0.9rem;
  color: var(--picholine);
}
.filtro:hover { border-color: var(--picholine); color: var(--gordons); }
.filtro--activo {
  background: var(--gordons);
  border-color: var(--gordons);
  color: var(--hueso);
}
.filtro--activo:hover { color: var(--hueso); }

/* Entradilla y nota de página, comunes a la tienda y a las páginas de texto. */
.pagina__entrada {
  font-size: 1.15rem;
  color: var(--picholine);
  max-width: 34rem;
  margin-bottom: 2.5rem;
}
.pagina__nota {
  border-top: 1px solid var(--echo);
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--picholine);
}
.pagina__nota a { color: var(--gordons); text-decoration: underline; }

/* La portada ofrece dos caminos: comprar o mirar. El segundo no es un botón,
   porque no compite con el primero. */
.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
.enlace-suelto {
  color: var(--picholine);
  font-size: 0.95rem;
  border-bottom: 1px solid var(--echo);
  padding: 0.35rem 0;
}
.enlace-suelto:hover { color: var(--gordons); border-bottom-color: var(--picholine); }


/* El buscador de la portada es el del atlas y vive en el armazon
   (public/css/chrome.css). Aqui no queda nada suyo. */

/* --- El escaparate --------------------------------------------------------
   La portada enseña TODO lo que se vende. Es una tienda pequeña: esconder
   media docena de productos detrás de un clic no ayuda a nadie. */

.escaparate { margin-bottom: 4rem; }

/* En un escaparate las piezas se alinean: la tarjeta se estira hasta la altura
   de su fila y la linea de estado se va abajo del todo, asi que los precios
   quedan a la misma altura aunque un titulo ocupe dos lineas. */
.rejilla--tienda .tarjeta {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.rejilla--tienda .producto__linea { margin-top: auto; padding-top: 0.6rem; }

.escaparate .filtros--tienda {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 2rem;
}

.escaparate__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  border-top: 1px solid var(--echo);
  margin-top: 3rem;
  padding-top: 2rem;
}
.escaparate__cuenta { font-size: 0.85rem; color: var(--picholine); }

/* --- La ficha de producto -------------------------------------------------
   Lo que se compra a la izquierda, lo que hace falta para decidir a la
   derecha. En móvil, uno debajo del otro y el bloque de compra primero: en un
   teléfono, lo que importa es el precio y el botón, no la foto. */

.producto-ficha { display: grid; gap: 2rem; }

.producto-ficha__media { order: 1; }
.producto-ficha__compra { order: 2; }

.producto-ficha__img {
  width: 100%;
  aspect-ratio: 1.618 / 1;
  object-fit: cover;
  background: var(--echo);
  display: block;
}
.producto-ficha__pie {
  font-size: 0.8rem;
  color: var(--picholine);
  margin: 0.75rem 0 0;
}

.producto-ficha__titulo {
  font-family: var(--display);
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin-bottom: 0.75rem;
}
.producto-ficha__resumen {
  font-size: 1.1rem;
  color: var(--picholine);
  margin-bottom: 1.75rem;
}

/* El bloque de compra: enmarcado, porque es lo que se viene a hacer. */
.compra {
  border: 1px solid var(--echo);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}
.compra__precio { margin: 0 0 1rem; }
.compra__importe {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--gordons);
}
.compra__estado {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--picholine);
}
.compra__boton { display: inline-flex; align-items: center; justify-content: center; }
.compra__nota {
  font-size: 0.85rem;
  color: var(--picholine);
  margin: 0 0 1rem;
}
.compra__boton + .compra__nota { margin: 1rem 0 0; }

.producto-ficha__subtitulo {
  font-family: var(--display);
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

/* Los datos, en filas: se leen en diagonal, que es como se leen. */
.datos { margin: 0 0 2rem; }
.datos__fila {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0.5rem 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--echo);
  font-size: 0.9rem;
}
.datos__fila dt {
  color: var(--picholine);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.datos__fila dd { margin: 0; }
.datos__fila a { text-decoration: underline; text-underline-offset: 0.16em; }

.producto-ficha__volver {
  font-size: 0.9rem;
  margin: 2rem 0 0;
}
.producto-ficha__volver a { color: var(--picholine); }
.producto-ficha__volver a:hover { color: var(--gordons); }

/* Muy ancho: cuatro columnas, como en las tiendas de referencia. */
@media (min-width: 1200px) {
  .rejilla--tienda { grid-template-columns: repeat(4, 1fr); }
}

@supports (padding: max(0px)) {
  .contenedor,
  #app {
    padding-left: max(var(--paso), env(safe-area-inset-left));
    padding-right: max(var(--paso), env(safe-area-inset-right));
  }
}

@media (min-width: 768px) {
  :root { --paso: 2.5rem; }

  /* Con sitio de sobra, las muestras recuperan su proporcion. */
  .tira__muestra { height: auto; aspect-ratio: 1.618 / 1; }
  #app { padding: 5rem var(--paso) 6rem; }

  .banda__rejilla { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
  .rejilla { grid-template-columns: repeat(3, 1fr); }
  .resultados__rejilla { grid-template-columns: repeat(6, 1fr); gap: 1.25rem 1rem; }
  .portal { padding: 2rem 0 5rem; margin-bottom: 5rem; }
  /* De tres en tres, igual que las laminas: a dos columnas la banda de color
     salia de 400 px de alto y se comia la pagina. */
  .rejilla--tienda { grid-template-columns: repeat(3, 1fr); gap: 3rem 1.75rem; }

  /* El tomo, a dos columnas: la pieza a la izquierda en proporcion aurea y
     el texto a la derecha, como en la ficha de lamina. */
  .destacado {
    grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
    padding: 3rem 0 3.5rem;
    margin-bottom: 5rem;
  }
  .boletin__caja { padding: 4.5rem 3.5rem; }
  .boletin__form { flex-direction: row; }
  .boletin__form input { flex: 1; }

  /* La obra a la izquierda y la paleta a la derecha. */
  .ficha { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: 3.5rem; }

  /* La ficha de producto: la pieza a la izquierda, la compra a la derecha. */
  .producto-ficha {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
  }
  .escaparate { margin-bottom: 6rem; }

}

/* --- Preferencias del usuario --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .progreso { transition: none; }
}