/* ============================================================
   Atarantani — sistema visual
   Dirección: maque de Uruapan. La laca embutida se hace tallando
   un canal en la laca negra y rellenando el surco con laca de
   color. Esa técnica es el sistema, no una paleta bonita.
   ============================================================ */

/* ---------- 1. Paleta base ---------- */

:root {
  --laca-negra: #14100E;
  --laca-carbon: #211A16;
  --grana: #C1272D;
  --maiz: #E8A33D;
  --jade: #2E7D5B;
  --anil: #2C5D8A;
  --hueso: #F2EAD9;

  /* Capa semántica: las superficies consumen esto, nunca la paleta directa */
  --fondo: var(--laca-negra);
  --fondo-elevado: var(--laca-carbon);
  --fondo-hundido: #0D0A09;
  --tinta: var(--hueso);
  --tinta-suave: rgba(242, 234, 217, .62);
  --linea: rgba(242, 234, 217, .12);
  --surco: rgba(0, 0, 0, .85);
  /* Color del canal vacío antes de que se embuta la laca */
  --canal: #0B0908;

  /* Acento interactivo: enlaces, foco, hover. El maíz se lee bien sobre
       laca negra pero casi desaparece sobre hueso — el modo claro lo
       cambia por grana en vez de repetir el mismo tono en los dos modos. */
  --acento: var(--maiz);
  /* Igual que --acento pero para iconos pequeños sobre fondo-hundido,
       donde grana ya lo usa Instagram: el modo claro sustituye el maíz
       por un ocre más oscuro en vez de bajarle el color a todos. */
  --maiz-legible: var(--maiz);

  /* Ritmo */
  --canaleta: 1.5rem;
  --radio: 3px;
  --transicion: 240ms cubic-bezier(.22, .61, .36, 1);

  /* Bootstrap consume estos: mejor alinearlo que pelearse con él */
  --bs-body-bg: var(--fondo);
  --bs-body-color: var(--tinta);
  --bs-border-color: var(--linea);
  --bs-emphasis-color: var(--tinta);
  --bs-secondary-color: var(--tinta-suave);
  --bs-link-color: var(--acento);
  --bs-link-hover-color: var(--tinta);
  --bs-border-radius: var(--radio);
}

/* El taller es un banco de trabajo iluminado, no una vitrina. Antes vivía
   fijo en <body data-superficie="taller">; ahora lo elige el interruptor
   del encabezado y se guarda en localStorage (ver js/tema.js). Se usa
   :root[data-tema="claro"] y no un selector suelto para que gane siempre
   sobre el :root de arriba, sin depender del orden de las reglas. */
:root[data-tema="claro"] {
  --fondo: var(--hueso);
  --fondo-elevado: #FFFDF7;
  --fondo-hundido: #E5DCC8;
  --tinta: var(--laca-negra);
  --tinta-suave: #6B5F52;
  --linea: rgba(20, 16, 14, .16);
  --surco: rgba(20, 16, 14, .18);
  --canal: #D9CFBA;
  --acento: var(--grana);
  --maiz-legible: #8A5A1F;
}

/* ---------- 2. Base ---------- */

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

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  transition: background-color var(--transicion), color var(--transicion);
  font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--acento);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

a:hover {
  color: var(--tinta);
}

/* El foco se ve siempre. No hay excusa. */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 2px;
}

.envoltura {
  width: min(100% - 2.5rem, 78rem);
  margin-inline: auto;
}

.salto-contenido {
  position: absolute;
  left: -9999px;
}

.salto-contenido:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--maiz);
  color: var(--laca-negra);
  font-weight: 600;
}

/* ---------- 3. Tipografía ---------- */

/* Fraunces con los ejes SOFT y WONK: el maque se decora a pincel,
   a mano, y los ejes dan esa irregularidad tallada. Se usa con
   restricción — hero, nombres de artista, títulos de sección. */
.display,
h1,
h2,
.titulo-obra,
.nombre-artista {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
}

h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
}

h3 {
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 .5em;
}

p {
  margin: 0 0 1rem;
}

.plomada {
  max-width: 62ch;
}

/* Etiquetas de dato: técnica, municipio, categoría. Versalitas
   espaciadas — no hace falta una tercera familia. */
.etiqueta {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0;
}

.etiqueta-acento {
  color: var(--acento);
}

/* Número de paso ("Cómo se cierra un trato aquí"). Grana fijo, no --acento:
   así el contraste con el número queda bien en los dos temas, igual que
   .boton-primario. */
.paso-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 auto .85rem;
  border-radius: 50%;
  background: var(--grana);
  color: #FFF6F0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
}

.lista-pasos h3,
.lista-pasos p {
  text-align: center;
}

.entradilla {
  font-size: 1.125rem;
  color: var(--tinta-suave);
}

/* ---------- 4. Encabezado ---------- */

.encabezado {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}

.encabezado-fila {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
}

.marca {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--tinta);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.marca:hover {
  color: var(--tinta);
}

.marca-roseta {
  width: 46px;
  height: 46px;
  flex: none;
}

.marca-nombre {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: uppercase;
  line-height: 1.15;
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
}

.marca-lema {
  display: block;
  font-family: 'Instrument Sans', sans-serif;
  font-size: .7rem;
  font-weight: 400;
  color: var(--tinta-suave);
}

.nav-principal {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-right: auto;
}

.nav-principal a {
  font-weight: 600;
  text-decoration: none;
  color: var(--tinta-suave);
}

.nav-principal a:hover {
  color: var(--tinta);
}

.nav-principal a[aria-current="page"] {
  color: var(--acento);
}

.nav-sesion {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.saludo-nav {
  padding-inline: .75rem;
  color: var(--tinta-suave);
  font-weight: 600;
  text-decoration: none;
}

.saludo-nav:hover { color: var(--acento); }

/* Interruptor de tema: sol y luna fijos en la pastilla, la perilla se
   desliza hacia el que está activo. Siempre visible en el encabezado para
   que el modo no dependa de qué página se abrió primero. */
.interruptor-tema {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  width: 52px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--fondo-hundido);
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion);
}

.tema-icono {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity var(--transicion);
}

.tema-icono-sol {
  color: var(--maiz-legible);
  opacity: .35;
}

.tema-icono-luna {
  color: var(--anil);
}

[data-tema="claro"] .tema-icono-sol {
  opacity: 1;
}

[data-tema="claro"] .tema-icono-luna {
  opacity: .35;
}

.tema-perilla {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--fondo-elevado);
  box-shadow: 0 1px 3px var(--surco);
  transform: translateX(24px);
  transition: transform var(--transicion);
}

[data-tema="claro"] .tema-perilla {
  transform: translateX(0);
}

/* ---------- 5. Botones ---------- */

/* 48px de alto mínimo: se usa a pulgar, en la calle, con sol. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .6rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion),
    border-color var(--transicion);
}

.boton:disabled,
.boton[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}

.boton-primario {
  background: var(--grana);
  color: #FFF6F0;
}

.boton-primario:hover:not(:disabled) {
  background: #D8352B;
  color: #FFF6F0;
}

.boton-contorno {
  border-color: var(--linea);
  color: var(--tinta);
}

.boton-contorno:hover:not(:disabled) {
  border-color: var(--acento);
  color: var(--acento);
}

.boton-llano {
  padding-inline: .75rem;
  color: var(--tinta-suave);
}

.boton-llano:hover:not(:disabled) {
  color: var(--tinta);
}

.boton-ancho {
  width: 100%;
}

/* El acceso con Google toma la silueta amplia y redondeada de una app móvil,
   pero conserva las superficies de Atarantani en ambos temas. El icono va
   anclado al inicio para que la etiqueta quede centrada de verdad. */
.boton-google {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 56px;
  padding: 0 3.5rem;
  border: 1.5px solid var(--tinta-suave);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font: 600 1rem/1.2 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  cursor: pointer;
  transition: background-color var(--transicion), border-color var(--transicion),
    color var(--transicion);
}

.boton-google:hover:not(:disabled) {
  border-color: var(--tinta);
  background: var(--fondo-elevado);
}

.boton-google:focus-visible {
  outline-color: var(--acento);
}

.boton-google:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.boton-google-icono {
  position: absolute;
  inset-inline-start: 1.375rem;
  width: 20px;
  height: 20px;
}

.boton-icono {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta-suave);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transicion);
}

.boton-icono:hover,
.boton-icono:focus-visible {
  color: var(--grana);
}

.boton-icono svg {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.compartir { display: inline-flex; }

/* ---------- 6. Hero ---------- */

/* Una sola obra en gran formato. No un collage: el maque se lee
   por la pieza, no por la acumulación. */
.hero {
  position: relative;
  min-height: min(78vh, 640px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--fondo-hundido);
  /* El hero es una isla siempre oscura (la foto y el degradado de abajo
       lo exigen), sin importar el tema del sitio: si no fijamos su propia
       tinta, en modo claro el subtítulo y el crédito heredarían texto
       oscuro sobre este fondo oscuro y desaparecerían. */
  --tinta: var(--hueso);
  --tinta-suave: rgba(242, 234, 217, .62);
  --acento: var(--maiz);
}

.hero-imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease-out;
}

.hero-imagen.visible {
  opacity: .72;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      var(--laca-negra) 4%,
      color-mix(in srgb, var(--laca-negra) 55%, transparent) 45%,
      color-mix(in srgb, var(--laca-negra) 15%, transparent) 100%);
}

.hero-contenido {
  position: relative;
  z-index: 2;
  padding-block: 3.5rem 3rem;
}

.hero-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 30, 'WONK' 1;
  font-size: clamp(2.6rem, 8.5vw, 6rem);
  font-weight: 600;
  line-height: .96;
  letter-spacing: -.03em;
  margin: 0 0 1rem;
  max-width: 15ch;
  text-wrap: balance;
  color: var(--hueso);
}

.hero-titulo em {
  font-style: italic;
  font-variation-settings: 'SOFT' 90, 'WONK' 1;
  color: var(--maiz);
}

.hero-credito {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin-top: 1.5rem;
}

/* ---------- 7. Divisor de roseta ---------- */

.divisor {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-block: 3.5rem;
}

.divisor::before,
.divisor::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--linea);
}

.divisor img {
  width: 34px;
  height: 34px;
  flex: none;
  opacity: .9;
}

.divisor-acceso {
  margin-block: .5rem;
}

.divisor-acceso img {
  width: 26px;
  height: 26px;
}

/* ---------- 8. Filtros ---------- */

/* Vive dentro del hero para aprovechar el espacio que sobraba bajo el
   crédito de portada, en vez de abrir una franja aparte sobre fondo claro. */
.filtros {
  margin-top: 2rem;
}

.buscador {
  display: flex;
  gap: .5rem;
  margin-bottom: 1rem;
}

.campo {
  width: 100%;
  min-height: 48px;
  padding: .65rem .9rem;
  background: var(--fondo-elevado);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  color: var(--tinta);
  font: inherit;
}

.campo::placeholder {
  color: var(--tinta-suave);
  font-style: italic;
  opacity: .8;
}

.campo:focus {
  border-color: var(--acento);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
}

select.campo {
  cursor: pointer;
}

/* El hero fija --tinta clara para su propio texto sobre la foto oscura,
   pero .campo tiene su fondo elevado propio (claro en tema claro): sin
   esto, el texto le queda tan pálido como el fondo. El botón "Quitar
   filtros" y el aviso, en cambio, sí van directo sobre el hero y deben
   seguir usando su --tinta clara — por eso el ajuste es solo en .campo. */
:root[data-tema="claro"] .hero .campo {
  --tinta: var(--laca-negra);
  --tinta-suave: #6B5F52;
  --acento: var(--grana);
}

.facetas {
  display: flex;
  flex: 1 1 22rem;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  min-width: 0;
}

.facetas .campo {
  width: auto;
  min-width: 11rem;
  flex: 1 1 11rem;
}

.filtros-fila {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}

/* El texto libre y las facetas son mutuamente excluyentes: Firestore
   no permite combinar array-contains-any con las demás formas. La UI
   lo dice atenuando el grupo inactivo en vez de fallar en runtime.
   #limpiar-filtros vive fuera de #facetas justo para no apagarse con
   esto: debe seguir funcionando también durante la búsqueda de texto. */
.grupo-inactivo {
  opacity: .4;
  pointer-events: none;
}

.boton-favoritos-filtro svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.boton-favoritos-filtro[aria-pressed="true"] {
  background: color-mix(in srgb, var(--grana) 14%, transparent);
  border-color: var(--grana);
  color: var(--grana);
}

.boton-favoritos-filtro[aria-pressed="true"] svg {
  fill: currentColor;
}

.aviso-filtro {
  margin: .75rem 0 0;
  font-size: .875rem;
  color: var(--tinta-suave);
}

/* ---------- 9. Cuadrícula y tarjeta de obra ---------- */

.cuadricula {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr));
  gap: var(--canaleta);
  padding-block: 2.5rem;
  padding-inline: 0;
  list-style: none;
  margin: 0;
}

.cuadricula-mosaico {
  display: block;
  column-count: 4;
  column-gap: var(--canaleta);
}

.cuadricula-mosaico > .tarjeta-obra {
  display: inline-flex;
  width: 100%;
  margin: 0 0 var(--canaleta);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* ── Elemento firma: el marco de embutido ──
   En reposo la tarjeta tiene un canal tallado y vacío en el borde. Al pasar
   el cursor o al recibir foco, el color se embute: la banda polícroma barre
   el surco de izquierda a derecha, como el artesano rellenando el canal con
   laca de color.

   La capa del borde mide 320% de ancho, así que la tarjeta solo enseña un
   31% de ella a la vez. Por eso el polícromo vive en el primer 31% y el
   canal vacío en el último: en position 100% se ve el canal, en 0% la laca. */
.tarjeta-obra {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 2px solid transparent;
  border-radius: var(--radio);
  background:
    linear-gradient(var(--fondo-elevado), var(--fondo-elevado)) padding-box,
    linear-gradient(100deg,
      var(--grana) 0 8%,
      var(--maiz) 8% 16%,
      var(--jade) 16% 24%,
      var(--anil) 24% 31%,
      var(--canal) 46% 100%) border-box;
  background-size: 100% 100%, 320% 100%;
  background-position: 0 0, 100% 0;
  box-shadow: inset 0 0 0 1px var(--surco);
  transition: background-position 420ms cubic-bezier(.22, .61, .36, 1),
    transform var(--transicion);
  overflow: hidden;
}

.tarjeta-obra:hover,
.tarjeta-obra:focus-within {
  background-position: 0 0, 0 0;
  transform: translateY(-2px);
}

.tarjeta-lienzo {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--fondo-hundido);
  overflow: hidden;
}

.tarjeta-lienzo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 500ms ease-out, transform 600ms ease-out;
}

.tarjeta-lienzo img.visible {
  opacity: 1;
}

.tarjeta-obra:hover .tarjeta-lienzo img.visible {
  transform: scale(1.03);
}

.cuadricula-mosaico .tarjeta-lienzo {
  aspect-ratio: auto;
}

.cuadricula-mosaico .tarjeta-lienzo img {
  display: block;
  height: auto;
  object-fit: contain;
}

/* ---------- Tarjetas fantasma ----------
   Mientras Firestore contesta, la portada era encabezado, hero de 78vh y un
   spinner: pantalla y media, asi que quien llegaba por primera vez tocaba el
   pie antes de ver una sola obra. Van escritas en el HTML y no pintadas por JS
   a proposito: el modulo del catalogo no corre hasta bajar jQuery y el SDK de
   Firebase, que con red movil son varios segundos con la pagina en blanco. */

.tarjeta-fantasma {
  pointer-events: none;
}

.tarjeta-fantasma .tarjeta-lienzo,
.tarjeta-fantasma .fantasma-linea {
  background: var(--fondo-hundido);
  animation: latido-fantasma 1.6s ease-in-out infinite;
}

/* Alturas dispares: doce tarjetas identicas no se parecen al mosaico que va a
   llegar, y el reemplazo se notaria mas. */
.cuadricula-mosaico .tarjeta-fantasma .tarjeta-lienzo {
  aspect-ratio: 4 / 5;
}

.cuadricula-mosaico .tarjeta-fantasma:nth-child(3n) .tarjeta-lienzo {
  aspect-ratio: 1;
}

.cuadricula-mosaico .tarjeta-fantasma:nth-child(4n) .tarjeta-lienzo {
  aspect-ratio: 5 / 4;
}

.cuadricula-mosaico .tarjeta-fantasma:nth-child(5n) .tarjeta-lienzo {
  aspect-ratio: 3 / 4;
}

.fantasma-linea {
  display: block;
  height: .7rem;
  border-radius: var(--radio);
}

.fantasma-linea + .fantasma-linea {
  margin-top: .5rem;
}

.fantasma-corta {
  width: 40%;
}

.fantasma-media {
  width: 65%;
}

@keyframes latido-fantasma {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .5;
  }
}

.tarjeta-cuerpo {
  padding: 1rem 1.05rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 1;
}

.titulo-obra {
  font-size: 1.2rem;
  margin: 0;
  line-height: 1.15;
}

.titulo-obra a {
  color: var(--tinta);
  text-decoration: none;
}

/* El enlace cubre la tarjeta entera: objetivo táctil grande de verdad */
.titulo-obra a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.tarjeta-artista {
  margin-top: auto;
  padding-top: .7rem;
  border-top: 1px solid var(--linea);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  font-size: .875rem;
  color: var(--tinta-suave);
}

.tarjeta-artista strong {
  color: var(--tinta);
  font-weight: 600;
}

.precio {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--acento);
}

/* ---------- 10. Insignias ---------- */

.insignia {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.insignia-verificada {
  display: inline-block;
  width: 1.3rem;
  height: 1.3rem;
  max-width: none;
  flex: 0 0 auto;
  vertical-align: -.28em;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .28));
}

.insignia-verificada-grande {
  width: 2.6rem;
  height: 2.6rem;
}

.nombre-artista-tarjeta,
.tarjeta-artesano .nombre-artista {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.insignia-vendida {
  background: color-mix(in srgb, var(--grana) 20%, transparent);
  color: #F0938E;
  border: 1px solid color-mix(in srgb, var(--grana) 50%, transparent);
}

.insignia-sobre-imagen {
  position: absolute;
  top: .7rem;
  left: .7rem;
  z-index: 2;
  backdrop-filter: blur(6px);
}

.contador-fotos {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--laca-negra) 55%, transparent);
  backdrop-filter: blur(6px);
  color: var(--hueso);
  font-size: .72rem;
  font-weight: 600;
}

.contador-fotos svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 11. Detalle de obra ---------- */

/* La descripción llega como texto plano desde el textarea: se conservan sus
   saltos, sin interpretar etiquetas ni abrir la puerta a HTML inyectado. */
#obra-descripcion,
#artista-semblanza,
#previa-semblanza-artista { white-space: pre-line; }

.detalle {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 3rem;
  padding-block: 3rem;
  align-items: start;
}

.galeria-principal {
  position: relative;
  background: var(--fondo-hundido);
  border-radius: var(--radio);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  /* El navegador se queda con el desplazamiento vertical y nos deja el
     horizontal: sin esto el gesto de pasar foto nunca llega a JavaScript. */
  touch-action: pan-y;
}

.galeria-principal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}

.galeria-navegar {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 18%;
  min-width: 3.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-family: var(--fuente-titulo);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  opacity: 0;
  transition: opacity .18s ease, background-color .18s ease;
}

.galeria-anterior { left: 0; padding-left: .7rem; text-align: left; }
.galeria-siguiente { right: 0; padding-right: .7rem; text-align: right; }
.galeria-principal:hover .galeria-navegar,
.galeria-navegar:focus-visible { opacity: 1; background: linear-gradient(90deg, rgb(0 0 0 / .32), transparent); }
.galeria-principal:hover .galeria-siguiente,
.galeria-siguiente:focus-visible { background: linear-gradient(270deg, rgb(0 0 0 / .32), transparent); }
.galeria-navegar:disabled { cursor: default; opacity: 0 !important; }

/* El visor deja toda la fotografía disponible, con márgenes laterales que
   funcionan como zonas amplias de navegación, no como flechas diminutas. */
.visor-obra {
  width: min(96vw, 92rem);
  height: min(92vh, 62rem);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
}

.visor-obra::backdrop { background: rgb(20 16 12 / .9); }

.visor-obra-marco {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  touch-action: pan-y;
}

.visor-obra-marco > img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
}

/* Una vertical ocupa visualmente más pantalla a igual altura. Se limita un
   poco más al detectarla desde JavaScript para que conserve aire alrededor. */
.visor-obra.visor-retrato .visor-obra-marco > img { max-height: 78%; }

.visor-cerrar,
.visor-navegar {
  position: absolute;
  border: 0;
  color: #fff;
  cursor: pointer;
}

.visor-cerrar {
  top: .5rem;
  right: .5rem;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgb(0 0 0 / .62);
  font-size: 2rem;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.visor-navegar {
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 18%;
  min-width: 4.25rem;
  padding: 0;
  background: transparent;
  font-family: var(--fuente-titulo);
  font-size: clamp(3.25rem, 7vw, 5.5rem);
  opacity: 0;
  transition: opacity .18s ease, background-color .18s ease;
}

.visor-anterior { left: 0; text-align: left; padding-left: 1rem; }
.visor-siguiente { right: 0; text-align: right; padding-right: 1rem; }
.visor-obra-marco:hover .visor-navegar,
.visor-navegar:focus-visible { opacity: 1; background: linear-gradient(90deg, rgb(0 0 0 / .3), transparent); }
.visor-siguiente:focus-visible,
.visor-obra-marco:hover .visor-siguiente { background: linear-gradient(270deg, rgb(0 0 0 / .3), transparent); }
.visor-navegar:disabled { cursor: default; opacity: 0 !important; }
.visor-cerrar:hover,
.visor-cerrar:focus-visible { background: var(--grana); }

/* Diálogo de confirmación. Se apoya en <dialog> y showModal(), igual que el
   visor de arriba: el navegador se encarga del foco atrapado, de Escape y de la
   capa superior, y aquí solo queda vestirlo. Sustituye a confirm(), que no
   admite casillas ni campos. */
.dialogo {
  width: min(94vw, 32rem);
  max-width: none;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo-elevado);
  color: var(--tinta);
}

.dialogo::backdrop { background: rgb(20 16 12 / .78); }

.dialogo-marco {
  display: grid;
  gap: .85rem;
  padding: 1.5rem;
}

.dialogo-titulo {
  margin: 0;
  font-size: 1.35rem;
}

.dialogo-texto {
  margin: 0;
  color: var(--tinta-suave);
}

.dialogo-check {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 0;
  cursor: pointer;
}

.dialogo-check input {
  flex: 0 0 auto;
  margin-top: .2rem;
}

.dialogo-campos {
  display: grid;
  gap: .65rem;
  padding-left: 1.6rem;
}

.dialogo-campos label {
  display: grid;
  gap: .3rem;
  font-size: .92rem;
  color: var(--tinta-suave);
}

.dialogo-campos textarea.campo { min-height: 5rem; resize: vertical; }

.dialogo-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .6rem;
  margin-top: .35rem;
}

/* El ojo tachado no se rellena nunca: no es un interruptor como el corazón. */
.boton-ocultar:disabled { cursor: default; opacity: .45; }

.visor-contador {
  position: absolute;
  bottom: .65rem;
  left: 50%;
  margin: 0;
  padding: .2rem .55rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgb(0 0 0 / .64);
  color: #fff;
  font-size: .8rem;
}

@media (hover: none) {
  .visor-navegar,
  .galeria-navegar { opacity: 1; }
}

.obra-titulo-fila {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.obra-acciones {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .45rem;
  margin-top: .25rem;
}

.boton-favorito {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-top: .2rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta-suave);
  cursor: pointer;
}

.boton-favorito:hover:not(:disabled) {
  color: var(--grana);
}

.boton-favorito svg {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.boton-favorito[aria-pressed="true"] {
  color: var(--grana);
}

.boton-favorito[aria-pressed="true"] svg {
  fill: currentColor;
}

.mapa-obra {
  margin-top: 1.5rem;
  border-radius: var(--radio);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.mapa-obra iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.galeria-tiras {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .75rem;
}

.galeria-tiras button {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radio);
  background: var(--fondo-hundido);
  cursor: pointer;
  overflow: hidden;
}

.galeria-tiras button[aria-current="true"] {
  border-color: var(--maiz);
}

.galeria-tiras img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ficha-datos {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  border-top: 1px solid var(--linea);
}

.ficha-datos li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--linea);
}

.ficha-datos dt,
.ficha-datos .clave {
  color: var(--tinta-suave);
  font-size: .875rem;
}

/* ---------- 12. Bloque de contacto ---------- */

.bloque-contacto {
  padding: 1.5rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo-elevado);
}

.lista-contacto {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: .6rem;
}

.lista-contacto a {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  padding: .5rem .85rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  text-decoration: none;
  color: var(--tinta);
  font-weight: 600;
  word-break: break-word;
}

.lista-contacto a:hover {
  border-color: var(--acento);
  color: var(--acento);
}

.descargo {
  font-size: .8125rem;
  color: var(--tinta-suave);
  margin: 0;
}

/* ---------- 13. Perfil de artista ---------- */

.perfil-presentacion {
  display: grid;
  grid-template-columns: minmax(17rem, 34rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding-top: 2rem;
}

.perfil-presentacion .tarjeta-artesano,
.perfil-presentacion .acerca-artista {
  margin-top: 0;
}

.acerca-artista {
  padding: 1.35rem 0 1.35rem 1.5rem;
  border-left: 2px solid var(--acento);
}

.acerca-artista h2 {
  margin-bottom: .65rem;
}

.accion-perfil-propio { margin: 1.25rem 0 0; }

.cabecera-artista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem;
  padding-block: 3rem 1.5rem;
}

.retrato {
  width: 132px;
  height: 132px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--fondo-hundido);
  border: 2px solid var(--linea);
}

/* Tarjeta de presentación del artista: la comparten la ficha de obra y la
   vista previa del panel (ver tarjetaArtesano en util.js). */
.tarjeta-artesano {
  position: relative;
  margin-top: 2rem;
}

.tarjeta-artesano-compartible {
  padding-right: 3.35rem;
}

.tarjeta-artesano > .compartir {
  position: absolute;
  top: 0;
  right: 0;
}

.artesano-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.25rem;
}

.retrato-enlace {
  flex: none;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
}

.retrato-enlace:hover .retrato,
.retrato-enlace:focus-visible .retrato {
  border-color: var(--acento);
}

.nombre-artista a {
  color: var(--tinta);
  text-decoration: none;
}

.nombre-artista a:hover {
  color: var(--acento);
}

.retrato-tarjeta {
  width: 84px;
  height: 84px;
}

.avatar-iniciales {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: .02em;
  color: var(--tinta-suave);
}

.contactos-artesano {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .6rem;
}

.fila-contacto {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.fila-contacto-valor {
  font-weight: 600;
  word-break: break-word;
}

a.medio-icono {
  text-decoration: none;
  transition: transform var(--transicion), border-color var(--transicion);
}

a.medio-icono:hover {
  border-color: currentColor;
  transform: translateY(-1px);
}

/* ---------- 14. Formularios y taller ---------- */

.taller {
  padding-block: 2.5rem 4rem;
}

/* Una sola columna, pasos cortos. Aquí la plataforma se gana o se
   pierde a su público. */
.formulario {
  display: grid;
  gap: 1.25rem;
  max-width: 40rem;
}

.campo-grupo {
  display: grid;
  gap: .4rem;
}

.campo-grupo label {
  font-weight: 600;
  font-size: .9375rem;
}

.campo-ayuda {
  font-size: .8125rem;
  color: var(--tinta-suave);
  margin: 0;
}

/* ---------- Medios de contacto (perfil del artista) ---------- */

.medio-cabecera {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.medio-cabecera label:not(.interruptor) {
  margin: 0 auto 0 0;
}

.medio-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--fondo-hundido);
  border: 1px solid var(--linea);
}

.medio-icono svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.medio-icono-whatsapp {
  color: var(--jade);
}

.medio-icono-telefono {
  color: var(--maiz-legible);
}

.medio-icono-correo {
  color: var(--tinta-suave);
}

.medio-icono-facebook {
  color: var(--anil);
}

.medio-icono-instagram {
  color: var(--grana);
}

.medio-icono-ubicacion {
  color: var(--maiz-legible);
}

/* Interruptor: más claro que una casilla suelta con la palabra "Mostrarlo". */
.interruptor {
  position: relative;
  display: inline-flex;
  flex: none;
  width: 38px;
  height: 22px;
  cursor: pointer;
}

.interruptor input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.interruptor-riel {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--fondo-hundido);
  border: 1px solid var(--linea);
  transition: background var(--transicion), border-color var(--transicion);
}

.interruptor-riel::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tinta-suave);
  transition: transform var(--transicion), background var(--transicion);
}

.interruptor input:checked~.interruptor-riel {
  background: color-mix(in srgb, var(--jade) 32%, transparent);
  border-color: var(--jade);
}

.interruptor input:checked~.interruptor-riel::after {
  background: var(--jade);
  transform: translateX(16px);
}

textarea.campo {
  min-height: 7rem;
  resize: vertical;
}

.tarjeta-taller {
  padding: 1.5rem;
  background: var(--fondo-elevado);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

/* Rejilla de fotos en el editor de obra */
.fotos-editor {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .75rem;
}

.foto-ranura {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radio);
  background: var(--fondo-hundido);
  overflow: hidden;
  border: 1px solid var(--linea);
  cursor: grab;
}

.foto-ranura.arrastrando { opacity: .45; cursor: grabbing; }

.foto-ranura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foto-quitar {
  position: absolute;
  top: .3rem;
  right: .3rem;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--laca-negra) 82%, transparent);
  color: var(--hueso);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.foto-quitar:hover {
  background: var(--grana);
}

.foto-movimientos {
  position: absolute;
  z-index: 1;
  bottom: .3rem;
  left: .3rem;
  display: flex;
  overflow: hidden;
  border-radius: .4rem;
  background: color-mix(in srgb, var(--laca-negra) 82%, transparent);
}

.foto-movimientos button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--hueso) 35%, transparent);
  background: transparent;
  color: var(--hueso);
  cursor: pointer;
}

.foto-movimientos button:last-child { border-right: 0; }
.foto-movimientos button:hover:not(:disabled) { background: var(--acento); }
.foto-movimientos button:disabled { opacity: .4; cursor: default; }

.zona-soltar {
  display: grid;
  place-items: center;
  gap: .35rem;
  aspect-ratio: 1;
  border: 2px dashed var(--linea);
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta-suave);
  font: inherit;
  font-size: .875rem;
  text-align: center;
  cursor: pointer;
  padding: .5rem;
}

.zona-soltar:hover:not(:disabled) {
  border-color: var(--acento);
  color: var(--acento);
}

.zona-soltar:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* Quién me contactó: el mismo renglón que la lista de contactos de la app de
   Android, con el retrato de iniciales, el nombre de quien se interesó, la
   pieza y la fecha. Retrato genérico a propósito: al artista le sirve el
   nombre, no la foto de quien lo busca. */
.contactos-recibidos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .6rem;
}

.contactos-recibidos li {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo-elevado);
}

.contactos-recibidos .retrato-contacto {
  width: 44px;
  height: 44px;
  font-size: 1rem;
}

.contactos-recibidos .nombre-comprador {
  margin: 0;
  font-weight: 600;
  word-break: break-word;
}

/* El titulo de la pieza es lo que el artista busca de un vistazo, asi que aqui
   va en texto corrido y no en versalitas como en la fila estrecha de Android. */
.contactos-recibidos .obra-contactada {
  margin: .1rem 0 0;
  color: var(--tinta-suave);
  word-break: break-word;
}

.contactos-recibidos .fecha-contacto {
  margin: .15rem 0 0;
  font-size: .875rem;
  color: var(--tinta-suave);
}

/* ---------- 15. Mensajes ---------- */

/* Los errores no piden perdón y nunca son vagos sobre qué pasó. */
.mensaje {
  padding: .85rem 1.1rem;
  border-radius: var(--radio);
  border-left: 3px solid;
  font-size: .9375rem;
}

.mensaje-error {
  border-color: var(--grana);
  background: color-mix(in srgb, var(--grana) 14%, transparent);
}

.mensaje-exito {
  border-color: var(--jade);
  background: color-mix(in srgb, var(--jade) 14%, transparent);
}

.mensaje-aviso {
  border-color: var(--maiz);
  background: color-mix(in srgb, var(--maiz) 14%, transparent);
}

/* Una pantalla vacía es una invitación a actuar */
.vacio {
  padding: 4rem 1rem;
  text-align: center;
  display: grid;
  gap: .75rem;
  justify-items: center;
}

.vacio img {
  width: 56px;
  height: 56px;
  opacity: .55;
}

/* ---------- 16. Cargador ---------- */

.cargador {
  display: grid;
  place-items: center;
  padding: 3rem 1rem;
}

.cargador svg {
  width: 48px;
  height: 48px;
  animation: girar-roseta 2.6s linear infinite;
}

.cargador path,
.cargador circle {
  stroke: var(--maiz-legible);
  stroke-dasharray: 90;
  animation: trazar-petalo 1.8s ease-in-out infinite alternate;
}

@keyframes girar-roseta {
  to {
    transform: rotate(360deg);
  }
}

@keyframes trazar-petalo {
  from {
    stroke-dashoffset: 90;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.oculto {
  display: none !important;
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 17. Pie ---------- */

.pie {
  margin-top: 4rem;
  padding-block: 2.5rem;
  border-top: 1px solid var(--linea);
  color: var(--tinta-suave);
  font-size: .875rem;
}

.pie-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
}

/* Tres ranuras fijas y siempre presentes: el enlace propio de la pantalla
   ("Ver en el catálogo"), la leyenda legal y el aviso de privacidad. Un flex
   con flex:1 centraría la leyenda solo en el hueco que le dejan los enlaces;
   con columnas laterales de 1fr queda centrada en la fila completa aunque los
   dos extremos midan distinto. Por eso las páginas sin enlace propio dejan el
   primer <p> vacío en vez de quitarlo: sostiene la columna. */
.pie-fila-centrada {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 1rem;
}

.pie-fila-centrada > :first-child {
  justify-self: start;
}

.pie-fila-centrada > :nth-child(2) {
  grid-column: 2;
  text-align: center;
}

.pie-fila-centrada > :last-child {
  grid-column: 3;
  justify-self: end;
}

.pie a {
  color: var(--tinta-suave);
}

.pie a:hover {
  color: var(--tinta);
}

/* Páginas sin enlace propio: la leyenda y el aviso van juntos y centrados,
   no repartidos a los extremos de una fila que nadie más ocupa. */
.pie-fila-simple {
  justify-content: center;
  text-align: center;
}

/* La ranura del centro apila la leyenda y las redes. Existe en las dos
   variantes de pie para que los iconos queden siempre bajo la leyenda. */
.pie-centro {
  display: grid;
  justify-items: center;
  gap: .85rem;
}

/* Distintivo oficial, centrado en la misma columna que las redes. Se conserva
   sin redibujarlo ni envolverlo en otro botón para respetar su espacio libre. */
.google-play {
  display: block;
  width: 9rem;
  border-radius: 8px;
  transition: transform var(--transicion), filter var(--transicion);
}

.google-play:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.google-play img {
  width: 100%;
  height: auto;
}

/* Redes de Atarantani, no de un artista: mismos trazos que .medio-icono pero
   sin la pastilla de color, que aquí competiría con la leyenda. El color sale
   de --tinta —hueso en el tema oscuro, laca en el claro—, así que se ven
   blancos sobre el pie oscuro sin desaparecer en modo claro. */
.pie-redes {
  display: flex;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pie-redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--linea);
  color: var(--tinta);
}

.pie-redes a:hover {
  color: var(--tinta);
  background: var(--fondo-elevado);
}

.pie-redes svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 18. Responsive ---------- */

/* ---------- Escritorio de moderación ---------- */

.envoltura-admin { width: min(100% - 2.5rem, 112rem); }
.admin-cabecera { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:1.5rem; }
.admin-cabecera .plomada { margin:0; }
.admin-pasos { display:none; gap:.5rem; margin-bottom:1rem; }
.admin-escritorio { display:grid; grid-template-columns:minmax(15rem, 19rem) minmax(28rem, 1fr) minmax(20rem, 25rem); gap:1rem; align-items:start; }
.admin-panel { min-width:0; min-height:34rem; padding:1rem; border:1px solid var(--linea); background:var(--fondo-elevado); box-shadow:inset 0 3px 0 var(--canal); }
.admin-panel-cabecera { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.admin-panel-cabecera h2 { font-size:1.35rem; margin:0; }
.admin-filtros { display:grid; grid-template-columns:1fr; gap:.5rem; margin-block:.65rem 1rem; }
.admin-lista { display:grid; gap:.35rem; max-height:70vh; overflow:auto; padding-right:.2rem; }
.admin-artista { appearance:none; width:100%; display:grid; grid-template-columns:2.75rem 1fr; gap:.7rem; padding:.7rem; border:1px solid transparent; border-left:3px solid transparent; background:transparent; color:var(--tinta); text-align:left; cursor:pointer; }
.admin-artista:hover,.admin-artista.activo { border-color:var(--linea); border-left-color:var(--acento); background:var(--fondo-hundido); }
.admin-retrato-mini { width:2.75rem; height:2.75rem; display:grid; place-items:center; border-radius:50%; overflow:hidden; background:var(--canal); color:var(--tinta-suave); font-family:'Fraunces',serif; }
.admin-retrato-mini img,.admin-retrato img { width:100%; height:100%; object-fit:cover; }
.admin-artista-datos { min-width:0; display:grid; line-height:1.25; }
.admin-artista-datos strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-artista-datos span { color:var(--tinta-suave); font-size:.76rem; margin-top:.2rem; }
.admin-vacio { min-height:28rem; display:grid; place-content:center; }
.admin-artista-portada { position:relative; display:grid; grid-template-columns:7rem 1fr; gap:1.2rem; align-items:center; padding:0 2.75rem 1rem 0; border-bottom:1px solid var(--linea); }
.admin-artista-portada h2 { margin-bottom:.25rem; }
.admin-cerrar-artista { position:absolute; top:0; right:0; display:grid; place-items:center; width:2rem; height:2rem; border:1px solid var(--linea); border-radius:50%; background:var(--fondo-elevado); color:var(--tinta-suave); font-size:1.35rem; line-height:1; }
.admin-cerrar-artista:hover { border-color:var(--acento); color:var(--acento); }
.admin-retrato { width:7rem; aspect-ratio:1; display:grid; place-items:center; overflow:hidden; border:1px solid var(--linea); background:var(--fondo-hundido); color:var(--tinta-suave); font-size:.75rem; }
/* `auto-fit` y no `repeat(6,1fr)`: `1fr` es `minmax(auto,1fr)`, asi que ninguna columna
   podia encogerse por debajo de su contenido y las seis juntas desbordaban el panel. Al no
   haber recorte, el sobrante se pintaba encima del Inspector. Asi se reacomodan solas y ya no
   hacen falta los ajustes por ancho de mas abajo. */
.admin-estadisticas { display:grid; grid-template-columns:repeat(auto-fit, minmax(6.5rem, 1fr)); gap:1px; padding:1px; margin:1rem 0; background:var(--linea); }
.admin-estadisticas div { padding:.7rem; background:var(--fondo-elevado); }
.admin-estadisticas dt { color:var(--tinta-suave); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
.admin-estadisticas dd { margin:0; font-family:'Fraunces',serif; font-size:1.15rem; }
/* `minmax(0,1fr)` y no la columna `auto` implicita: `auto` se estira al max-content de las
   obras, y la tira de fotos con seis piezas empujaba la fila entera fuera del panel pese a
   su propio `overflow-x`. */
.admin-obras { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; }
.admin-obra { min-width:0; padding:1rem; border:1px solid var(--linea); border-left:3px solid var(--jade); background:var(--fondo); }
.admin-obra.suspendida { border-left-color:var(--grana); }
.admin-obra-cabecera { display:flex; justify-content:space-between; align-items:start; gap:1rem; }
/* Sin esto el titulo largo de una obra no se deja encoger y empuja al boton fuera del panel. */
.admin-obra-cabecera > div:first-child { min-width:0; }
.admin-obra h3 { margin:.45rem 0 .15rem; }
.admin-tira-fotos { display:flex; gap:.45rem; overflow-x:auto; margin-top:.75rem; padding-bottom:.25rem; }
.admin-tira-fotos figure { flex:0 0 5.5rem; margin:0; position:relative; aspect-ratio:1; background:var(--fondo-hundido); }
.admin-tira-fotos img { width:100%; height:100%; object-fit:cover; }
.admin-tira-fotos figcaption { position:absolute; right:.2rem; bottom:.2rem; min-width:1.25rem; padding:.1rem .25rem; background:rgba(0,0,0,.75); color:white; text-align:center; font-size:.7rem; }
.admin-diagnostico { margin-top:1rem; padding:1rem; border:1px dashed var(--maiz-legible); color:var(--tinta-suave); overflow-wrap:anywhere; }
.admin-diagnostico summary { cursor:pointer; color:var(--tinta); font-weight:600; }
.admin-diagnostico ul { margin:.75rem 0 0; padding-left:1.25rem; }
.admin-categorias { margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--linea); }
.admin-categorias h3 { margin:0; font-size:1rem; }
.admin-cuenta-solicitud { margin-top:1rem; padding:1rem; border:1px solid var(--linea); border-radius:var(--radio); overflow-wrap:anywhere; }
.admin-cuenta-solicitud h4 { margin-top:1rem; font-size:.95rem; }
.admin-cuenta-renglon { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.65rem 0; border-top:1px solid var(--linea); }
.admin-zona-peligro { display:grid; gap:.7rem; margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--grana); }
.admin-zona-peligro label { display:grid; gap:.35rem; font-size:.82rem; }
#lista-correos-pendientes ul { display:grid; gap:.7rem; margin:.75rem 0 0; padding:0; list-style:none; }
#lista-correos-pendientes li { padding:0 0 .7rem; border-bottom:1px solid var(--linea); }
#lista-correos-pendientes small { color:var(--tinta-suave); overflow-wrap:anywhere; }
#lista-correos-pendientes .boton { margin-top:.45rem; }
.admin-localidades { margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--linea); }
.admin-localidades h3 { margin:0; font-size:1rem; }
.admin-localidad-forma { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:.5rem; }
@media (max-width: 30rem) { .admin-localidad-forma { grid-template-columns:1fr; } }
.admin-categoria-pendiente { padding:.6rem 0; border-bottom:1px solid var(--linea); }
.admin-categoria-pendiente summary { display:flex; justify-content:space-between; gap:.5rem; cursor:pointer; }
.admin-categoria-pendiente summary span,.admin-categoria-pendiente small { color:var(--tinta-suave); font-size:.75rem; }
.admin-categoria-pendiente ul { display:grid; gap:.25rem; margin:.6rem 0; padding:0; list-style:none; }
.admin-categoria-pendiente li button { width:100%; padding:.35rem 0; border:0; background:transparent; color:var(--tinta); text-align:left; }
.admin-categoria-pendiente li button:hover { color:var(--acento); }
.boton-compacto { min-height:36px; padding:.35rem .65rem; font-size:.78rem; }
.insignia-suspendida { background:var(--grana); color:#fff; }
.admin-formulario { display:grid; gap:.8rem; }
.admin-formulario label { display:grid; gap:.25rem; font-size:.82rem; font-weight:600; }
.admin-formulario fieldset { display:grid; gap:.6rem; padding:1rem; border:1px solid var(--linea); }
.admin-formulario legend { float:none; width:auto; margin:0; padding-inline:.3rem; color:var(--tinta-suave); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
.admin-formulario .campo { min-height:42px; font-weight:400; }
.admin-check { display:flex !important; grid-template-columns:auto 1fr; align-items:center; }
.admin-verificacion { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:1rem; border-left:3px solid var(--maiz-legible); background:var(--fondo-hundido); }
.admin-verificacion div { display:grid; }
.admin-verificacion span { color:var(--tinta-suave); font-size:.75rem; }
.admin-fotos-editor { display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; margin-top:.45rem; }
.admin-foto-editor { position:relative; min-width:0; border:1px solid var(--linea); background:var(--fondo-hundido); }
.admin-foto-editor img { width:100%; aspect-ratio:1; object-fit:cover; }
.admin-foto-editor>span { position:absolute; top:.25rem; left:.25rem; padding:.05rem .35rem; background:rgba(0,0,0,.78); color:#fff; }
.admin-foto-editor>div { display:grid; grid-template-columns:repeat(3,1fr); }
.admin-foto-editor button { min-height:36px; border:0; border-right:1px solid var(--linea); background:transparent; color:var(--tinta); }
.admin-foto-editor button:hover { background:var(--fondo-elevado); }
.admin-acciones-obra { position:sticky; bottom:0; z-index:1; margin-top:.35rem; padding-top:.8rem; background:var(--fondo-elevado); box-shadow:0 -8px 12px color-mix(in srgb, var(--fondo-elevado) 88%, transparent); }
.admin-acciones-obra .boton { width:100%; }
.admin-moderacion,.admin-historial { margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--linea); }
.admin-historial ol { display:grid; gap:.55rem; margin:0; padding:0; list-style:none; }
.admin-historial li { display:grid; padding-left:.75rem; border-left:2px solid var(--linea); text-transform:capitalize; }
.admin-historial small { color:var(--tinta-suave); text-transform:none; }
.boton-peligro { background:transparent; border:1px solid var(--grana); color:var(--tinta); }

@media (max-width: 68rem) {
  .cuadricula-mosaico {
    column-count: 3;
  }
}

@media (max-width: 1200px) {
  .admin-escritorio { grid-template-columns:minmax(15rem, 19rem) minmax(0,1fr); }
  .admin-inspector { grid-column:2; }
}

@media (max-width: 760px) {
  .cuadricula-mosaico {
    column-count: 2;
  }

  .envoltura-admin { width:min(100% - 1.25rem,112rem); }
  .admin-cabecera { display:block; }
  .admin-pasos { display:flex; overflow-x:auto; }
  .admin-pasos .boton[aria-current="step"] { background:var(--acento); color:var(--fondo); }
  .admin-escritorio { display:block; }
  .admin-panel { display:none; min-height:28rem; }
  .admin-escritorio[data-paso-activo="artistas"] [data-panel-admin="artistas"],
  .admin-escritorio[data-paso-activo="mesa"] [data-panel-admin="mesa"],
  .admin-escritorio[data-paso-activo="inspector"] [data-panel-admin="inspector"] { display:block; }
  .admin-lista { max-height:none; }
  .admin-artista-portada { grid-template-columns:5rem 1fr; }
  .admin-retrato { width:5rem; }
}

@media (max-width: 900px) {
  .detalle {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 600px) {
  .envoltura {
    width: min(100% - 1.75rem, 78rem);
  }

  .encabezado-fila {
    flex-wrap: wrap;
    gap: .4rem .75rem;
    min-height: 0;
    padding-block: .5rem;
  }

  .marca {
    flex: 1 1 calc(100% - 4rem);
    min-width: 0;
    gap: .45rem;
  }

  .marca-roseta {
    width: 34px;
    height: 34px;
  }

  .marca-nombre {
    font-size: 1rem;
    letter-spacing: 0;
  }

  .marca-lema {
    font-size: .62rem;
  }

  .nav-principal {
    order: 3;
    flex: 1 1 100%;
    gap: .9rem;
    margin-right: 0;
  }

  .nav-principal a {
    line-height: 1.2;
    white-space: nowrap;
  }

  .nav-sesion {
    order: 4;
    display: grid;
    flex: 1 1 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
  }

  .nav-sesion .boton {
    justify-self: start;
    min-height: 38px;
    padding-inline: .85rem;
  }

  .nav-sesion .boton-llano {
    padding-inline: 0;
  }

  .nav-sesion .boton-primario {
    justify-self: end;
  }

  .saludo-nav {
    max-width: 100%;
    min-width: 0;
    padding-inline: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero {
    min-height: 68vh;
  }

  .obra-titulo-fila {
    flex-direction: column;
    gap: .5rem;
  }

  .obra-acciones {
    align-self: flex-end;
    margin-top: 0;
  }

  .divisor {
    margin-block: 2.5rem;
  }

  .facetas .campo {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-basis: 100%;
  }

  .facetas {
    flex-basis: 100%;
    width: 100%;
  }

  #limpiar-filtros {
    flex-basis: 100%;
  }

  .cuadricula-mosaico {
    column-count: 1;
  }

  .pie-fila {
    justify-content: center;
    text-align: center;
  }

  /* En móvil la leyenda ocupa el centro real y los dos enlaces se agrupan
     debajo como un par, en vez de empujar el pie hacia los extremos. */
  .pie-fila-centrada {
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 1rem 2rem;
    text-align: center;
  }

  .pie-fila-centrada > :first-child {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
  }

  .pie-fila-centrada > :nth-child(2) {
    display: contents;
  }

  .pie-fila-centrada > :nth-child(2) > p {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
  }

  .pie-fila-centrada > :last-child {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
  }

  .pie-fila-centrada > :nth-child(2) > .pie-redes {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: center;
  }

  .pie-fila-centrada > :nth-child(2) > .google-play {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: center;
  }

  .cabecera-artista {
    gap: 1.25rem;
  }

  .perfil-presentacion {
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
  }

  .retrato {
    width: 96px;
    height: 96px;
  }
}

/* ---------- 19. Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* El embutido se muestra ya relleno en vez de barrer */
  .tarjeta-obra:hover,
  .tarjeta-obra:focus-within {
    transform: none;
  }

  .hero-imagen.visible,
  .tarjeta-lienzo img.visible {
    opacity: 1;
  }

  .hero-imagen.visible {
    opacity: .72;
  }

  .google-play:hover {
    transform: none;
  }
}

/* ---------- Banner App Móvil ---------- */
.banner-app-movil {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--fondo-elevado);
  border-top: 1px solid var(--linea);
  padding: 0.6rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 1050;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
  transition: transform var(--transicion);
}

.banner-app-movil.oculto {
  transform: translateY(100%);
  display: none !important;
}

.banner-app-cerrar {
  background: transparent;
  border: none;
  color: var(--tinta-suave);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.25rem;
  cursor: pointer;
}

.banner-app-cerrar:hover,
.banner-app-cerrar:focus {
  color: var(--tinta);
}

.banner-app-icono {
  border-radius: 6px;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.banner-app-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.banner-app-titulo {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--tinta);
  line-height: 1.15;
}

.banner-app-subtitulo {
  font-size: 0.72rem;
  color: var(--tinta-suave);
  line-height: 1.15;
  margin-top: 0.1rem;
}

.banner-app-google-play {
  flex-shrink: 0;
  width: 6.8rem;
}

/* Espacio en el body para que el banner no tape el pie de página */
body.con-banner-app {
  padding-bottom: 70px;
}