/* ═══ PORTADA: RECURSOS VISUALES (SUD, 2026-10-16) ═══════════════════════════
   Encargo de Nico: «en la página principal aparecen demasiados pocos elementos
   visuales o recursos visuales e imágenes».
   Lo escribe en las cinco portadas _migracion/genera-portada-visual.py (todo
   lo suyo va entre <!--pv--> y <!--/pv-->). Hoja propia: no toca style.css.
   No bloquea el pintado (media="print" + onload): todo lo de aquí está por
   debajo del primer pantallazo. Sin JS no se carga (lo único imprescindible,
   enseñar el retrato, va en un <style> dentro de <noscript>).
     1. Retrato real de la titular en su tarjeta («El despacho»).
     2. Icono por paso en «Cómo trabajamos».
     3. Icono por situación en «Lo que más se repite».
     4. Miniatura de cada herramienta, dibujada (SVG aparte, carga diferida).
     5. «El despacho, en El Clot»: el plano propio y tres fotos del barrio con
        su licencia (Wikimedia Commons) en el pie.
   Movimiento: solo opacity/transform; con movimiento reducido, quieto.
   El bloque 5 lo inserta portada-visual.js (sin JS no sale: la sección
   conserva su texto y el enlace a /contacto/, donde está el plano). */

/* ── 1. Retrato de la titular ───────────────────────────────────────────── */
.pv-retrato {
  display: block;
  margin: 0 0 var(--esp-5);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--fondo-alt);
}
/* La foto llega oculta en línea (ver genera-portada-visual.py): se enseña al
   entrar en pantalla. Sin JS la enseña un <style> dentro de <noscript> (no se
   usa html:not(.js-anim): esta hoja puede llegar antes que interaccion.js y
   la foto se pediría antes del primer pintado). */
.pv-retrato.es-visible img { display: block !important; animation: pv-aparece 480ms cubic-bezier(.2, 0, .2, 1); }
@keyframes pv-aparece { from { opacity: 0; } }
.pv-retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* ── 2 y 3. Iconos de pasos y situaciones (reutilizan .herramienta__icono) ─ */
.pv-ico { margin-bottom: var(--esp-4); flex: none; }
.pasos--recorrido > li > .pv-ico { margin-bottom: var(--esp-3); }
.cierre .pv-ico, .tarjeta--oscura .pv-ico { background: var(--fosc-2); color: var(--verd-clar); }

/* ── 4. Miniatura de cada herramienta ───────────────────────────────────── */
.pv-mini {
  display: block;
  margin: calc(-1 * var(--tarjeta-pad)) calc(-1 * var(--tarjeta-pad)) var(--esp-5);
  padding: var(--esp-4) var(--esp-5);
  background: var(--verd-suau);
  border-bottom: 1px solid var(--verd-borde);
  border-radius: var(--radio-lg) var(--radio-lg) 0 0;
}
.pv-mini img { display: block; width: 100%; max-width: 300px; height: auto; margin-inline: auto; }
.pv-mini ~ .herramienta__icono { display: none; }
/* Dibujos sin texto: en árabe se voltean para leerse de derecha a izquierda. */
[dir="rtl"] .pv-mini img { transform: scaleX(-1); }

/* ── 5. El Clot: plano + tres fotos ─────────────────────────────────────── */
.pv-barrio {
  display: grid;
  gap: var(--esp-4);
  margin-block: var(--esp-7) var(--esp-6);
}
.pv-plano, .pv-foto { margin: 0; min-width: 0; }

.pv-plano {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  overflow: hidden;
}
.pv-plano__dibujo { position: relative; aspect-ratio: 3 / 2; background: #FFFFFF; }
.pv-plano__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pv-plano__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-5);
  padding: var(--esp-4) var(--esp-5);
  border-top: 1px solid var(--linea);
  font-size: .9375rem;
}
.pv-plano__dir { font-weight: 600; color: var(--tinta); }
.pv-plano__ir {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  color: var(--verd); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.pv-plano__ir::after { content: "→"; text-decoration: none; display: inline-block; transition: transform var(--trans); }
.pv-plano__ir:hover::after { transform: translateX(3px); }
[dir="rtl"] .pv-plano__ir::after { content: "←"; }
[dir="rtl"] .pv-plano__ir:hover::after { transform: translateX(-3px); }
.pv-plano__osm { margin-inline-start: auto; font-size: .8125rem; color: var(--tinta-3); }
.pv-plano__osm a { color: inherit; }

.pv-foto {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio-lg);
  background: var(--fondo-alt);
  aspect-ratio: 4 / 3;
}
.pv-foto picture, .pv-foto img { display: block; width: 100%; height: 100%; }
.pv-foto img { object-fit: cover; transition: transform 1.2s cubic-bezier(.2, 0, .2, 1); }
.pv-foto:hover img { transform: scale(1.03); }
.pv-foto figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--esp-6) var(--esp-4) var(--esp-3);
  /* Capa oscura bajo el texto: blanco sobre #1C2118 al 80 % da más de 12:1. */
  background: linear-gradient(to top, rgba(28, 33, 24, .86) 0%, rgba(28, 33, 24, .80) 55%, rgba(28, 33, 24, 0) 100%);
  color: #FFFFFF;
  line-height: 1.35;
}
.pv-foto__lugar { display: block; font-family: var(--font-titular); font-weight: 600; font-size: 1rem; }
.pv-foto__credito { display: block; margin-top: 2px; font-size: .75rem; color: #E4E7DA; }
.pv-foto__credito a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pv-foto__credito a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* Móvil: el plano a lo ancho y las fotos en una tira que se desliza (sin JS). */
@media (max-width: 1023.98px) {
  .pv-fotos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(82%, 420px);
    gap: var(--esp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding-bottom: var(--esp-2);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: thin;
  }
  .pv-fotos > .pv-foto { scroll-snap-align: start; }
}
/* Escritorio: plano a la izquierda; a la derecha, una foto ancha y dos debajo. */
@media (min-width: 1024px) {
  .pv-barrio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .pv-fotos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--esp-4);
  }
  .pv-fotos > .pv-foto { aspect-ratio: auto; min-height: 0; }
  .pv-fotos > .pv-foto:first-child { grid-column: 1 / -1; }
  .pv-foto picture, .pv-foto img { position: absolute; inset: 0; }
  .pv-foto--parc img { object-position: 50% 62%; }
}

/* Entrada al llegar: el bloque lo inserta portada-visual.js (.pv-barrio--lista). */
.pv-barrio:empty { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pv-barrio--lista > *, .pv-barrio--lista .pv-fotos > * { animation: pv-sube 560ms cubic-bezier(.2, 0, .2, 1) both; }
  .pv-barrio--lista .pv-fotos > :nth-child(1) { animation-delay: 90ms; }
  .pv-barrio--lista .pv-fotos > :nth-child(2) { animation-delay: 180ms; }
  .pv-barrio--lista .pv-fotos > :nth-child(3) { animation-delay: 270ms; }
}
@keyframes pv-sube { from { opacity: 0; transform: translateY(18px); } }

@media (prefers-reduced-motion: reduce) {
  .pv-retrato img { animation: none !important; }
  .pv-foto img, .pv-plano__ir::after { transition: none !important; }
  .pv-foto:hover img { transform: none; }
}