/* ==========================================================================
   ARREGLAMIHOGAR — Catálogo

   Tres piezas que solo viven en esta página:

   1. El desplegable de categorías, pegado debajo de la cabecera. Lo pidió
      el cliente con esas palabras: «un desplegable que ponga sanitarios,
      platos de ducha, y te lleve al sitio, porque el cliente se va a cansar
      de bajar y bajar».
   2. Las categorías: teselas de entrada y la cabecera de cada una.
   3. La ficha abierta: un <dialog> con todas las fotos del producto, sus
      medidas, sus acabados y su precio.

   Todo sale de los tokens de base.css.
   ========================================================================== */

/* El aire de la barra del desplegable, por encima y por debajo del botón.
   Iba a 6 px y el botón quedaba encajado; en octubre de 2026 la empresa pidió
   «un poquito más de espacio por arriba como por abajo», y luego «un pelín
   más»: 14 px en el teléfono y 20 en el ordenador. En el teléfono, algo
   menos que en el ordenador, porque la barra va pegada arriba y le quita
   pantalla al catálogo.

   Está aquí, en el html, porque de esa medida salen dos cosas más: dónde se
   para cada categoría al saltar a ella y el alto del panel en el teléfono. */
html:has(.catnav) { --catnav-aire: 0.875rem; }
@media (min-width: 720px) {
  html:has(.catnav) { --catnav-aire: 1.25rem; }
}

/* El ancla de cada categoría tiene que quedar por debajo de la cabecera Y
   del desplegable, que también se queda pegado arriba: el botón (2.75rem),
   su aire y 1rem de margen. */
html:has(.catnav) {
  scroll-padding-top: calc(var(--head-h) + 2.75rem + 2 * var(--catnav-aire) + 1rem);
}

/* --------------------------------------------------------------------------
   1. Desplegable de categorías
   -------------------------------------------------------------------------- */

/* Capa 197: por encima de los dos mandos flotantes (WhatsApp 190, idioma
   196) y de la barra de la lista (195), que si no tapaban el panel abierto
   en el teléfono; por debajo del menú (199) y de la cabecera (200). */
.catnav {
  position: sticky;
  top: var(--head-h);
  z-index: 197;
  background: oklch(0.985 0.006 72 / 0.94);
  border-bottom: 1px solid var(--hairline);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
}

.catnav__in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--catnav-aire);
}

.catnav__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 2.75rem;
  /* Sin min-width: 0 el botón no encoge y, en francés («Toutes les
     catégories»), echaba «Ma liste» 5px fuera de una pantalla de 375. */
  min-width: 0;
  max-width: 100%;
  padding: 0.55rem 0.95rem 0.55rem 1.05rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-900);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--out-quart),
              box-shadow var(--t-fast) var(--out-quart),
              transform var(--t-press) var(--out-quart);
}
.catnav__btn:hover { border-color: var(--brass-400); box-shadow: var(--lift-1); }
.catnav__btn:active { transform: scale(0.98); }
.catnav__btn[aria-expanded="true"] { border-color: var(--brass-500); }

.catnav__et {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-700);
}
.catnav__actual {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-display);
  font-size: var(--t-md);
  line-height: 1.2;
}
.catnav__btn svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--brass-700);
  transition: transform var(--t-mid) var(--out-expo);
}
.catnav__btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.catnav__lista-link {
  flex: none;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--wine-700);
  padding: 0.6rem 0.2rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--out-quart);
}
.catnav__lista-link:hover { border-bottom-color: var(--brass-500); }

/* El panel se abre debajo del botón. Es solo el marco: lo que se desplaza
   es la lista de dentro, para que el degradado de arriba y abajo se quede
   quieto en el borde mientras las categorías pasan por debajo.

   POSITION ABSOLUTE, TAMBIÉN EN EL TELÉFONO. Estuvo en «fixed», calculado
   desde arriba de la pantalla, y salía 78 px más abajo de lo previsto y
   cortado por el borde: la barra lleva backdrop-filter, y un backdrop-filter
   convierte a su caja en la referencia de todo lo «fixed» de dentro. El alto
   máximo lo pone ficha.js al abrir, con lo que de verdad queda de pantalla. */
.catnav__panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: var(--edge);
  width: min(44rem, 100% - 2 * var(--edge));
  max-height: min(70vh, 34rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--lift-3);
  transform-origin: top left;
  animation: catnav-abre var(--t-mid) var(--out-expo);
}
.catnav__panel[hidden] { display: none; }

@keyframes catnav-abre {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
}

/* El degradado. Se registran las dos medidas para poder animarlas: sin
   @property el navegador no sabe que son longitudes y las cambia de golpe. */
@property --fade-arriba { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-abajo { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* En escritorio, dos columnas de texto y no de rejilla: «Platos de ducha»
   lleva cinco familias debajo y «Novedades» ninguna, y en una rejilla la
   fila entera se estiraba a lo alto de la más larga. */
.catnav__lista {
  position: relative;
  flex: 0 1 auto;
  min-height: 0;
  margin: 0;
  padding: var(--s-3);
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Arriba, las letras se van apagando al pasar bajo el borde en vez de
     cortarse en seco; abajo, un poco menos, para avisar de que hay más. Los
     dos solo aparecen cuando hay algo que esconder: con la lista arriba del
     todo, «Novedades» se lee entera. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-arriba),
                                      #000 calc(100% - var(--fade-abajo)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-arriba),
                              #000 calc(100% - var(--fade-abajo)), transparent 100%);
  transition: --fade-arriba var(--t-mid) var(--out-quart),
              --fade-abajo var(--t-mid) var(--out-quart);
}
.catnav__lista[data-arriba="true"] { --fade-arriba: 2.75rem; }
.catnav__lista[data-abajo="true"] { --fade-abajo: 1.75rem; }
@media (min-width: 720px) {
  .catnav__lista { columns: 2; column-gap: var(--s-5); }
}

.catnav__cat { break-inside: avoid; padding-block: 0.15rem; }

.catnav__a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: var(--t-md);
  color: var(--ink-900);
  transition: background-color var(--t-fast) var(--out-quart);
}
.catnav__a:hover,
.catnav__a[aria-current="true"] { background: var(--stone-100); }
.catnav__a[aria-current="true"] { color: var(--wine-700); }

.catnav__n {
  font-family: var(--font-text);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-mute);
}

.catnav__sub {
  margin: 0 0 0.35rem 0.7rem;
  padding: 0 0 0 0.75rem;
  list-style: none;
  border-left: 1px solid var(--hairline);
}
.catnav__sub a {
  display: block;
  padding: 0.3rem 0.4rem;
  font-size: var(--t-sm);
  color: var(--text-soft);
  transition: color var(--t-fast) var(--out-quart);
}
.catnav__sub a:hover { color: var(--wine-700); }

@media (max-width: 719px) {
  /* A lo ancho de la pantalla, con el mismo margen que el resto. El alto lo
     ajusta ficha.js; esto es solo el tope si el JavaScript no llegase. */
  .catnav__panel {
    right: var(--edge);
    width: auto;
    max-height: calc(100dvh - var(--head-h) - 2.75rem - 2 * var(--catnav-aire) - 2rem);
  }
}

/* --------------------------------------------------------------------------
   2. Teselas de entrada y cabecera de cada categoría
   -------------------------------------------------------------------------- */

.teselas {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px) { .teselas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .teselas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tesela a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  padding: var(--s-4);
  border-radius: var(--r-md);
  color: var(--stone-50);
  isolation: isolate;
}
@media (min-width: 700px) { .tesela a { aspect-ratio: 1; } }

.tesela__pic { position: absolute; inset: 0; z-index: -1; }
.tesela__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--out-expo);
}
/* Velo de abajo arriba: el nombre se lee sobre cualquier foto, también sobre
   el mármol blanco. */
.tesela__pic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, oklch(0.185 0.055 18 / 0.86) 0%,
                              oklch(0.185 0.055 18 / 0.45) 38%,
                              oklch(0.185 0.055 18 / 0) 68%);
}
@media (hover: hover) and (pointer: fine) {
  .tesela a:hover .tesela__pic img { transform: scale(1.05); }
}

.tesela__t {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem);
  line-height: 1.15;
}
.tesela__n {
  margin-top: 0.3rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-300);
}

.cats { padding-bottom: var(--bay-tight); }

.cat { padding-top: var(--bay-tight); }
.cat + .cat .cat__cab { border-top: 1px solid var(--hairline); padding-top: var(--bay-tight); }
.cat + .cat { padding-top: 0; margin-top: var(--bay-tight); }

.cat__cab {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.2rem var(--s-4);
  margin-bottom: var(--s-7);
}
.cat__num {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--brass-600);
  font-variant-numeric: tabular-nums;
}
.cat__t { margin: 0; font-size: var(--t-2xl); }
.cat__n {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-mute);
}
.cat__lede {
  grid-column: 2;
  max-width: 60ch;
  margin-top: var(--s-3);
  color: var(--text-soft);
}

/* Las familias genéricas (las que describen un tipo, sin foto) cierran su
   categoría. Van más calladas: son el «también hacemos», no el escaparate. */
.fam--tipos .prod { background: transparent; }
.fam--tipos .fam__t { font-size: var(--t-md); }

/* --------------------------------------------------------------------------
   3. La ficha abierta
   -------------------------------------------------------------------------- */

.fdlg {
  width: min(1180px, 100vw - 2rem);
  max-width: none;
  height: min(860px, 100dvh - 2rem);
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--lift-3);
}
.fdlg::backdrop {
  background: oklch(0.185 0.055 18 / 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.fdlg[open] { animation: fdlg-entra 280ms var(--out-expo); }
.fdlg[open]::backdrop { animation: fdlg-velo 280ms var(--out-quart); }
@keyframes fdlg-entra { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
@keyframes fdlg-velo { from { opacity: 0; } }

.fdlg__marco {
  position: relative;
  display: grid;
  height: 100%;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "media texto" "minis texto";
}

/* --- Las fotos --- */

.fdlg__media {
  grid-area: media;
  position: relative;
  min-height: 0;
  background: var(--stone-100);
}

.fdlg__pista {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.fdlg__pista::-webkit-scrollbar { display: none; }

.fdlg__pista > li {
  position: relative;
  flex: 0 0 100%;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.fdlg__pista img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* El ambiente se ve mejor ocupando la caja; lo que no se puede es recortar
   una pieza o un plano, así que solo el ambiente va a sangre. */
/* Foto pequeña de origen: a su tamaño, o al doble como mucho. */
.fdlg__pista > li[data-peq] img {
  width: min(100%, calc(var(--w) * 2));
  height: auto;
  max-height: 100%;
}
.fdlg__pista > li[data-tipo="A"] { padding: 0; }
.fdlg__pista > li[data-tipo="A"] img { object-fit: cover; }

.ficha__pie,
.fdlg__pista .ficha__pie {
  position: absolute;
  left: var(--s-4);
  bottom: var(--s-4);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: oklch(0.185 0.055 18 / 0.78);
  color: var(--stone-50);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.fdlg__flecha {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  margin-top: -1.45rem;
  border: 1px solid oklch(0.215 0.014 28 / 0.08);
  border-radius: 50%;
  background: oklch(0.995 0.004 74 / 0.92);
  color: var(--ink-900);
  box-shadow: var(--lift-2);
  cursor: pointer;
  transition: opacity var(--t-fast) var(--out-quart),
              transform var(--t-press) var(--out-quart);
}
.fdlg__flecha svg { width: 1.3rem; height: 1.3rem; }
.fdlg__flecha:active { transform: scale(0.94); }
.fdlg__flecha:disabled { opacity: 0; pointer-events: none; }
.fdlg__flecha--ant { left: var(--s-4); }
.fdlg__flecha--sig { right: var(--s-4); }
.fdlg[data-una] .fdlg__flecha,
.fdlg[data-una] .fdlg__cuenta,
.fdlg[data-una] .fdlg__minis { display: none; }

.fdlg__cuenta {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  z-index: 2;
  margin: 0;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: oklch(0.995 0.004 74 / 0.9);
  font-size: var(--t-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-800);
}

/* --- Miniaturas --- */

.fdlg__minis {
  grid-area: minis;
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0.75rem var(--s-4);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
  background: var(--stone-100);
  border-top: 1px solid var(--hairline-soft);
}
.fdlg__minis button {
  display: block;
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface);
  opacity: 0.62;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--out-quart),
              border-color var(--t-fast) var(--out-quart);
}
.fdlg__minis button:hover { opacity: 0.9; }
.fdlg__minis button[aria-current="true"] { opacity: 1; border-color: var(--wine-700); box-shadow: inset 0 0 0 1px var(--wine-700); }
.fdlg__minis img { width: 100%; height: 100%; object-fit: cover; }

/* --- El texto --- */

.fdlg__texto {
  grid-area: texto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--hairline-soft);
}
.fdlg__info {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-7) var(--s-6) var(--s-5);
}

.ficha__fam {
  margin: 0 0 var(--s-2);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--brass-700);
}
.ficha__t {
  margin: 0;
  padding-right: var(--s-6);
  font-family: var(--font-display);
  font-size: var(--t-xl);
  line-height: 1.12;
  color: var(--ink-900);
}
.ficha__d { margin: var(--s-3) 0 0; color: var(--text-soft); line-height: 1.6; }

.ficha__precio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
}
.ficha__desde {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-mute);
}
.ficha__cifra {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  line-height: 1;
  color: var(--wine-700);
}
.ficha__antes { font-size: var(--t-sm); color: var(--text-mute); text-decoration: line-through; }
.ficha__precio--txt { flex-direction: column; align-items: flex-start; }
.ficha__precio--txt .ficha__cifra { font-size: var(--t-lg); line-height: 1.2; }
.ficha__aviso { margin: var(--s-2) 0 0; font-size: var(--t-sm); color: var(--text-soft); line-height: 1.55; }

.ficha__tabla {
  width: 100%;
  margin-top: var(--s-4);
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.ficha__tabla caption {
  padding-bottom: var(--s-2);
  text-align: left;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-mute);
}
.ficha__tabla th,
.ficha__tabla td { padding: 0.5rem 0; border-top: 1px solid var(--hairline-soft); }
.ficha__tabla th { font-weight: 400; text-align: left; color: var(--text-soft); }
.ficha__tabla td {
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--t-md);
  color: var(--wine-700);
}

.ficha__datos { margin: var(--s-5) 0 0; }
.ficha__datos > div {
  display: grid;
  grid-template-columns: minmax(7.5rem, 34%) 1fr;
  gap: var(--s-3);
  padding: 0.6rem 0;
  border-top: 1px solid var(--hairline-soft);
  font-size: var(--t-sm);
}
.ficha__datos dt { color: var(--text-mute); }
.ficha__datos dd { margin: 0; color: var(--ink-900); }

.ficha__tonos { margin-top: var(--s-5); }
.ficha__et {
  margin: 0 0 var(--s-3);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-mute);
}
.tonos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tono {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--t-xs);
  color: var(--text-soft);
}
.tono__m {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px oklch(0.215 0.014 28 / 0.14);
}

.ficha__nota {
  margin: var(--s-5) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--text-mute);
}

/* --- Acciones: siempre a la vista, debajo del texto --- */

.fdlg__acciones {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-6) var(--s-5);
  border-top: 1px solid var(--hairline);
  background: var(--surface);
}
.fdlg__acciones .btn { width: 100%; justify-content: center; }
.fdlg__no { display: none; }
.fdlg[data-puesto="true"] .fdlg__si { display: none; }
.fdlg[data-puesto="true"] .fdlg__no { display: inline; }
.fdlg[data-puesto="true"] .fdlg__add { --btn-bg: var(--surface); --btn-fg: var(--wine-700); --btn-edge: var(--wine-700); }

.fdlg__x {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-900);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--out-quart),
              transform var(--t-press) var(--out-quart);
}
.fdlg__x svg { width: 1.25rem; height: 1.25rem; }
.fdlg__x:hover { border-color: var(--brass-500); }
.fdlg__x:active { transform: scale(0.94); }

/* --- Teléfono: la ficha ocupa la pantalla y se lee de arriba abajo --- */

@media (max-width: 959px) {
  .fdlg {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
  .fdlg__marco {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .fdlg__media { flex: none; height: min(78vw, 60dvh); }
  .fdlg__pista > li { padding: var(--s-3); }
  .fdlg__flecha { display: none; }
  .fdlg__minis { flex: none; padding: 0.6rem var(--edge); }
  .fdlg__minis button { width: 3.6rem; height: 3.6rem; }
  .fdlg__texto { flex: none; border-left: 0; }
  .fdlg__info { overflow: visible; padding: var(--s-5) var(--edge) var(--s-4); }
  .ficha__t { padding-right: 0; }
  .fdlg__acciones {
    position: sticky;
    bottom: 0;
    padding: var(--s-3) var(--edge) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 24px oklch(0.185 0.055 18 / 0.08);
  }
  /* Dos botones a lo ancho de un teléfono no caben con el texto entero:
     WhatsApp se queda en su icono, que se reconoce solo, y el nombre sigue
     ahí para el lector de pantalla. */
  .fdlg__acciones { grid-template-columns: 1fr auto; }
  .fdlg__acciones .btn { padding-inline: 0.8rem; font-size: var(--t-xs); }
  .fdlg__acciones .fdlg__wa { width: 3.25rem; padding: 0; }
  .fdlg__wa .btn__ico { width: 1.35rem; height: 1.35rem; }
  .fdlg__wa span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* La cruz se queda a mano aunque se baje por la ficha. */
  .fdlg__x { position: fixed; top: var(--s-3); right: var(--s-3); box-shadow: var(--lift-2); }
}

@media (prefers-reduced-motion: reduce) {
  .fdlg[open], .fdlg[open]::backdrop, .catnav__panel { animation: none; }
  .catnav__lista { transition: none; }
  .fdlg__pista { scroll-behavior: auto; }
  .tesela__pic img, .catnav__btn svg { transition: none; }
}