/* proyecto.css - Pagina de detalle de un proyecto.
   Titulo centrado con una rayita debajo (pequeno y bien separado de la
   foto, para no competir con ella) y un SLIDER a pantalla con la serie
   de fotos. Una foto cada vez, fundido de ~300 ms entre ellas. Se
   avanza SOLO a mano (sin pase automatico): flechas discretas bajo la
   foto con un contador "2 / 7", flechas del teclado, gesto de arrastre
   en tactil o rueda del raton. */

/* Mucho menos margen que en el resto de secciones (var(--nav), 108px):
   en esta pagina la barra es transparente y solo se ven los dos
   iconos, EN LAS ESQUINAS. El titulo va centrado, asi que aunque
   arranque a la misma altura que los iconos no se tocan: no hace
   falta bajar el contenido hasta que "termine la barra" como en el
   resto de secciones, basta un margen de respiro desde el borde.
   Peticion de Alicia: "mucho espacio en blanco arriba, las imagenes
   muy al borde inferior, no centradas"; ademas, cuanto mas hueco
   quede para el slider, mas grandes se ven las fotos VERTICALES (las
   horizontales normalmente ya tocan su techo de ancho disponible y no
   crecen mas, pero tampoco se perjudican). */
#proyecto { padding-top: 32px; }

/* La pagina entera cabe en la pantalla, sin scroll:
   cabecera + slider (ocupa el resto) + flechas y contador */
#proyecto.active {
  display: flex; flex-direction: column;
  position: relative;
  height: 100vh;
  height: 100dvh;
}

/* Cabecera pequena y con aire hacia la foto (peticion de Alicia: que
   la info no este enorme ni pegada a la imagen) */
.proy-cabecera {
  text-align: center;
  padding: 8px var(--pad) 12px;
}
#proyecto-titulo {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 17px;
  color: var(--negro);
  /* Clicable: vuelve a la primera foto del carrusel (peticion de
     Alicia, 12-08-2026, PC y movil). El cursor avisa de que responde,
     igual que la foto misma con la lupa. */
  cursor: pointer;
}
/* Rayita corta bajo el titulo, como en la web de referencia */
.proy-dash {
  display: block;
  width: 24px; height: 1.5px;
  background: var(--negro);
  margin: 8px auto 6px;
}
#proyecto-sub {
  font-size: 11px; letter-spacing: .05em;
  color: var(--gris);
}

/* SLIDER: ocupa el hueco entre la cabecera y el .proy-pie de debajo
   (peticion de Alicia, 09-08-2026: "las imagenes se quedan muy a ras
   de la barra inferior del navegador, que se queden algo mas pequeñas
   y centradas"). Poco margen (el .proy-pie, con la firma, ya pone su
   propio respiro hasta el borde del navegador; no hacen falta los dos
   a la vez -eso fue lo siguiente que aviso: "mas pegada a la imagen,
   no tan distante"-). Es un MARGIN, no un padding: los mandos que van
   sobre la foto (.proy-mandos, mas abajo) estan en position:absolute
   dentro de este mismo elemento, y el padding no los habria movido
   -el "inset:0" de un hijo absoluto ignora el padding del padre-,
   mientras que el margin si reduce esa caja de verdad. */
.proy-slider {
  position: relative;
  flex: 1;
  min-height: 220px;
  margin-bottom: 2px;
  overflow: hidden;
  background: var(--fondo);
}
.proy-slides { position: absolute; inset: 0; }

/* Cada foto ocupa todo el slider; solo la .actual se ve, y el cambio
   entre una y otra es un fundido */
.proy-slide {
  position: absolute; inset: 0;
  /* El margen de abajo es mayor a proposito (no un descuido): reserva
     sitio de sobra para el contador + la firma (v5.70) aunque la foto
     sea tan "ancha y baja" que llegue justa al alto del hueco. Sin este
     margen, con esas fotos el hueco real por debajo se quedaba en solo
     6-8px -lo que fuera el padding-, mucho menos que lo que ocupan
     contador+firma (~35px), y por mucho que la JS intentara evitarlo
     (View._colocarMandos) no hay manera de colocar dos cosas en un
     hueco mas pequeño que ellas mismas: acababan solapando la foto
     (aviso de Alicia, 10-08-2026: "la firma más arriba sin solapar con
     la imagen"). */
  padding: 2px 16px 44px;      /* margen minimo, salvo abajo: ver arriba */
  opacity: 0;
  pointer-events: none;
  /* FUNDIDO RAPIDO, EN RELEVO (v5.83-84): hubo TODA UNA RONDA de
     ajustes de este fundido -relevo sin solape en v5.79, cada vez mas
     lento hasta v5.81...-, Alicia pidio quitarlo del todo por lento
     ("el filtro es un poco incomodo, es un pestañeo muy lento... que
     las fotos pasen, sin mas"), y el ajuste final es un punto medio:
     sigue sin solapar -la que se va (.12s) termina antes de que
     empiece a entrar la nueva (.15s)-, pero muy rapido, casi al
     instante. El contador, la firma y las flechas van acompasados a
     este mismo ritmo (ver mas abajo, "EL RELEVO DE LOS MANDOS"). */
  transition: opacity .12s ease;
}
.proy-slide.actual {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  transition: opacity .15s ease .12s;   /* espera a que la otra se vaya */
}
/* AQUI ESTUVO LA PREVIA: mientras bajaba la fotografia se enseñaba en
   su hueco la miniatura del carrusel, ampliada, y la buena entraba
   encima. Alicia lo pidio y lo retiro el mismo dia (28-08-2026):
   "quita el efecto de miniatura y que cargue directamente la
   original". El hueco vuelve a estar en blanco hasta que llega la
   foto, como antes de la 7.38. */

/* FOTO QUE YA ESTABA GUARDADA: ni siquiera fundido.
   Lo detecta la JS al pedirla (ver View._siYaEstaba). El fundido esta
   para acompañar una espera; si no hay espera sobra, y lo que toca es
   que la foto salga y ya. Es lo que hace que volver a un reportaje ya
   visto se sienta instantaneo. */
.proy-slide.sin-fundido img { transition: none; }

.proy-slide img {
  width: 100%; height: 100%;
  /* La foto ENTERA siempre visible, centrada sobre fondo blanco
     (con "cover" en pantallas anchas se recortaba mas de la mitad) */
  object-fit: contain;
  /* Fundido corto al aparecer. Llego a durar 0,8 s para que se
     apreciara como la foto nitida ganaba detalle sobre la previa; sin
     previa debajo, alargarlo solo retrasa la imagen, asi que vuelve a
     su duracion de siempre. Se queda la curva de salida, que llega mas
     suave que el "ease" que tenia. */
  transition: opacity .5s cubic-bezier(.22, .61, .36, 1);
  /* Freno al arrastre y a la seleccion (peticion de Alicia); el clic
     derecho se bloquea aparte, en controller.js */
  -webkit-user-drag: none;
  user-select: none;
}
/* Fundido al cargar cada foto (clase "cargada" via JS) */
.proy-slide img:not(.cargada) { opacity: 0; }

/* LA FIRMA, DEBAJO DE LA FOTO -no encima- (peticion de Alicia,
   09-08-2026, en varios mensajes seguidos hasta dar con esto: "la
   firma tiene que ir debajo de la imagen"; alineada a la derecha pero
   "el limite derecho es el margen derecho de la FOTO, no la pagina";
   "casi debajo del contador, pero un poco mas a la izquierda"; y
   "mas pegada a la imagen, no tan distante"; vale igual en el
   reportaje normal que a pantalla completa, "como en el carrusel").
   ABSOLUTA DENTRO DEL SLIDER (v5.70, ya no una fila fija al fondo de
   la pagina): con esa fila fija, una foto con mucho aire por debajo
   -letterboxing, sobre todo en pantalla completa en un monitor ancho-
   dejaba la firma muy separada de la imagen (aviso de Alicia,
   10-08-2026: "la firma más arriba sin solapar con la imagen"). Ahora
   vive dentro de .proy-slider, junto al contador, y JS la coloca
   siempre justo debajo de el -pegada a la foto real, nunca encima-
   (ver View._colocarMandos). Mismo bloque en los dos modos. */
.proy-pie {
  position: absolute;
  text-align: right;
  z-index: 4;
  /* NO se desliza: aparece ya colocada (ver "EL RELEVO DE LOS MANDOS"
     mas abajo, junto a .proy-mando) */
  transition: opacity .18s ease;
}
.proy-firma {
  font-size: 11px; letter-spacing: .04em;
  /* Un gris algo mas oscuro que antes -era gris-claro, casi invisible-
     (peticion de Alicia) */
  color: var(--gris);
}

/* MANDOS SOBRE LA FOTO: flechas y contador (v5.66-67, peticion de
   Alicia: "y las portadas así" -mismo boceto que el visor a pantalla
   completa-, y luego: "las flechas y el contador, pegados a la
   imagen"). En negro con halo blanco, igual que en pantalla completa
   -asi las dos vistas se sienten la misma-. Absolutos dentro de
   .proy-slider (no de cada .proy-slide, que se destruye y se vuelve a
   crear en cada reportaje). La firma YA NO esta aqui: vive aparte,
   debajo de la foto (ver .proy-pie mas arriba). Ya no hay icono de
   ampliar (Alicia, 09-08-2026: sobraba, el cursor en lupa ya avisa de
   que se puede pulsar la foto). */
.proy-mandos {
  position: absolute; inset: 0;
  z-index: 4;
  pointer-events: none;   /* solo los botones de dentro son clicables */
}
.proy-mando {
  position: absolute;
  pointer-events: auto;
  background: none; border: none; padding: 8px;
  color: var(--negro);
  cursor: pointer;
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #fff);
  /* NO se desliza: aparece ya colocado (ver "EL RELEVO DE LOS MANDOS"
     debajo del todo) */
  transition: opacity .18s ease;
}
/* El aclarado al pasar el raton es mas inmediato que el relevo de
   arriba, para que el boton responda al momento. Solo con raton de
   verdad (v6.0): en tactil el ":hover" se queda pegado tras tocar y la
   flecha se quedaria medio apagada -mismo motivo que en .nav-icon, ver
   nav.css-. */
@media (hover: hover) and (pointer: fine) {
  .proy-mando:hover { opacity: .55; transition: opacity .1s ease; }
}
.proy-mando:focus-visible { outline: 1px solid var(--negro); outline-offset: 3px; }
.proy-mando svg { display: block; }

.proy-mando-flecha { top: 50%; transform: translateY(-50%); }
.proy-mando-flecha svg { width: 26px; height: 26px; }
.proy-mando-flecha.izq { left: 4px; }
.proy-mando-flecha.der { right: 4px; }

/* EL ICONO DE PANTALLA COMPLETA (las "4 esquinitas"). Ver el porque en
   index.php, junto al boton: en escritorio el cursor ya se convierte en
   lupa al pasar por encima de la foto y el icono sobra -por eso se
   quito en su dia-, pero donde se toca con el dedo no hay cursor que
   avise de nada, y Alicia pidio recuperarlo ahi (22-08-2026).
   EN MOVIL (LAS DOS ORIENTACIONES) Y EN TABLET: lo pidio primero solo
   para movil vertical, despues en tablet (23-08-2026) y por ultimo
   tambien en movil horizontal, donde pasaba lo mismo y se le habia
   quedado fuera pensando que ahi no cabria.
   TRES CRITERIOS, LOS DE SIEMPRE EN ESTA WEB (ver sobre.css): movil
   vertical por ancho, tablet por puntero+tamaño, y movil horizontal por
   puntero+altura -asi no se confunde con una ventana de escritorio muy
   baja, que tiene raton de verdad-.
   Va oculto de partida y solo se enciende en los tres @media de abajo,
   asi que el escritorio se queda exactamente como estaba.
   Su posicion exacta la pone View._colocarMandos, pegada a la esquina
   superior derecha de la FOTO (no de la caja): con object-fit:contain
   la foto casi nunca llena su hueco, y ese aire cambia con cada
   imagen. */
.proy-mando-ampliar { display: none; }
.proy-mando-ampliar svg { width: 22px; height: 22px; }
/* SIN SOMBRA, Y EN BLANCO O EN NEGRO SEGUN EL PROYECTO (26-08-2026).
   Antes llevaba un filo oscuro alrededor para que se leyera sobre
   cualquier foto. Funcionaba, pero Alicia aviso de que visualmente es
   "un poco bestia": "cuando este icono tiene la sombra blanca esta
   precioso, pero cuando tiene la sombra negra esta bastante feo". Su
   ejemplo: en Malagueira, con fotos muy claritas y pastel, la sombra
   negra afea; en Mi Pueblo Blanco, con cielos negros, esa misma sombra
   se camufla y no se nota.
   Pidio probar primero SIN NINGUNA SOMBRA, "a lo mejor resulta que se
   ve mejor y no hay que hacer nada mas", y poder decidir el color por
   proyecto. Es lo que hay aqui: el icono va limpio, sin halo ni filo, y
   se pinta oscuro o blanco segun el proyecto -no segun cada foto-, para
   que no cambie de color mientras se pasa el pase.
   El color lo decide View._colorDelIcono: por defecto lo saca de la
   foto de portada, y cualquier trabajo puede imponerlo a mano con
   "iconoColor" en js/model.js (era su segunda peticion: "yo te puedo ir
   diciendo uno por uno de que color se lo ponemos"). */
.proy-mando-ampliar {
  filter: none;
  color: var(--negro);
}
.proy-mando-ampliar.icono-claro { color: #fff; }
@media (max-width: 768px) and (orientation: portrait) {
  .proy-mando-ampliar { display: block; }
}
@media (hover: none) and (min-width: 769px) and (min-height: 481px) {
  .proy-mando-ampliar { display: block; }
}
@media (hover: none) and (max-height: 480px) and (orientation: landscape) {
  .proy-mando-ampliar { display: block; }
  /* Un poco mas pequeño SOLO AQUI: la pantalla es tan baja que el
     tamaño normal (22px) se lleva un bocado grande de la poca foto que
     se ve. Mismo criterio que usan ya los iconos de la barra en este
     mismo caso (ver sobre.css, body.sin-marca nav .nav-icon). */
  .proy-mando-ampliar svg { width: 18px; height: 18px; }
}

/* El contador, encima de la firma, alineados los dos a la derecha */
/* Abajo a la derecha, a la misma altura que la firma y mas hacia
   afuera que ella (peticion de Alicia: "el contador tiene que ir
   debajo, a la derecha de la esquina inferior derecha de la imagen").
   Los valores los pone JS (View._colocarMandos), que los coloca a los
   dos como un solo bloque. */
.proy-mando-contador {
  position: absolute;
  font-size: 11px; letter-spacing: .1em;
  color: var(--negro);
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #fff);
  pointer-events: none;
  /* NO se desliza: aparece ya colocado (ver "EL RELEVO DE LOS MANDOS"
     debajo del todo) */
  transition: opacity .18s ease;
}

/* EL RELEVO DE LOS MANDOS (v5.80-84). Contador, firma y flechas no
   viajan de una posicion a otra al cambiar de foto: se apagan en seco,
   se recolocan mientras nadie los ve -de eso se encarga
   View._colocarMandos, llamado justo despues- y vuelven a aparecer ya
   en su sitio, junto con la foto nueva.
   Fue lento al principio (hasta 1,4s, v5.81) y luego se quito del todo
   a la vez que el fundido de la foto (v5.83), pero Alicia lo echo en
   falta asi, en seco: "que el contador y la firma aparezcan casi al
   mismo tiempo que la imagen... que la transicion sea mas rapida". Se
   recupera aqui, MUY rapido (.18s), acompasado con el fundido rapido
   de la foto (.12s fuera + .15s dentro, ver .proy-slide). */
#proyecto-slider.cambiando .proy-mando-contador,
#proyecto-slider.cambiando .proy-pie,
#proyecto-slider.cambiando .proy-marco-borde,
#proyecto-slider.cambiando .proy-mando {
  opacity: 0;
  transition: none;
}

/* EL RECTANGULO GRIS QUE RODEA LA FOTO EN "FUN CITY".
   Esas fotos traen dentro del propio JPG un margen blanco alrededor de
   la imagen, y Alicia pidio rematarlo con una linea: "¿podemos poner el
   rectangulo de borde (gris oscuro) de las fotografias del proyecto Fun
   City?" (27-08-2026). Se dibuja desde la web para que no tenga que
   reeditar los archivos uno a uno en Photoshop.
   Donde va exactamente lo calcula la JS midiendo cada foto (ver
   _medirMarco y _colocarMandos en js/view.js): el margen blanco no es
   igual en todas, asi que no vale un valor fijo.
   El "inset" negativo saca la linea 1px hacia el blanco, para que
   rodee la imagen en vez de comerse su primer pixel. Y sin
   pointer-events, que por encima de la foto pasa el toque que abre la
   pantalla completa. */
.proy-marco-borde {
  position: absolute;
  display: none;                 /* lo enciende la JS, solo en Fun City */
  /* La linea, JUSTO POR DENTRO del borde exterior. Con border-box la
     caja mide exactamente lo que se le pide desde la JS -el rectangulo
     de la copia entera- y el pixel de linea cae dentro, sin salirse ni
     quedar cortado. */
  box-sizing: border-box;
  /* EL GRIS DE LA WEB, no el oscuro. Estaba en --negro (#4a4a4a), que
     en 1px sobre blanco se lee casi como una linea negra. Alicia lo
     pidio "del gris que predomina en el proyecto, como el del CV
     expandido" (28-08-2026), y ese es --gris (#777): el que la paleta
     describe como "el gris de siempre" y el que llevan los subtextos y
     los parrafos de toda la web, el CV incluido. */
  border: 1px solid var(--gris);
  pointer-events: none;
  /* Por delante de la foto (la .proy-slide.actual va con z-index 2) o
     se quedaria escondida detras; por detras de los mandos y del pie,
     que llevan 4. No estorba al toque: no tiene pointer-events, y ese
     toque sobre la foto es el que abre la pantalla completa. */
  z-index: 3;
  transition: opacity .18s ease;
}

/* En pantalla completa mandan los mandos del visor (visor-ui); estos
   se apagan para no duplicarlos */
body.visor .proy-mandos { display: none; }

/* En la pagina de proyecto (slider a pantalla completa) el pie de
   pagina sobra: sin esto obliga a un pequeno scroll. En navegadores
   sin soporte de :has() simplemente queda ese scroll minimo. */
body:has(#proyecto.active) .pie { display: none; }


/* ============================================================
   PANTALLA COMPLETA (body.visor)
   Peticion de Alicia, que lo vio en juancalagares.com: el pase de
   fotos a pantalla entera, "con los iconos en gris y de diseno mas
   sencillo".
   NO es otro visor: es EL MISMO pase de siempre, al que se le quita
   todo lo que le rodea. Asi no se descarga ninguna foto dos veces ni
   hay dos numeraciones que mantener sincronizadas.
   Se entra pulsando la foto (el cursor se convierte en lupa con "+"
   para avisar), y se sale con la X, con Escape o pulsando el blanco de
   alrededor.
   ============================================================ */

/* La seccion se despega del flujo y ocupa la pantalla, por encima
   incluso de la barra fija (que ademas se esconde, ver abajo) */
body.visor #proyecto.active {
  position: fixed; inset: 0;
  z-index: 200;
  /* Las tres medidas van de menos a mas fina; el navegador se queda con
     la ultima que entienda:
       100vh  - la de toda la vida, ignora las barras del navegador.
       100dvh - la altura REAL de ahora mismo (cambia si la barra del
                movil se encoge al hacer scroll).
       100svh - la altura con las barras PUESTAS, la mas pequeña posible.
     Se acaba en "svh" a proposito (v6.0): en tablet -donde el navegador
     no siempre concede la pantalla completa de verdad (Safari de iPad
     no la da a nada que no sea un video) y sus barras se quedan
     encima-, con "dvh" la pagina se creia mas alta de lo que se ve y la
     foto salia cortada por abajo, llevandose por delante el contador y
     la firma: "las fotos salen cortadas y no se ve el numero ni mi
     firma" (Alicia, 13-08-2026, en tablet). Con "svh" siempre cabe
     todo; a cambio, si el visitante esconde la barra haciendo scroll,
     queda un pelin de aire de mas, que es el mal menor. */
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  padding-top: 0;
  background: var(--fondo);
}
/* Fuera todo lo que no sea la foto: titulo y ficha (los mandos sobre
   la foto ya se ocultan aparte, ver body.visor .proy-mandos) */
body.visor .proy-cabecera { display: none; }
/* Y tambien los dos iconos de la barra: en pantalla completa mandan
   los del propio visor */
body.visor nav { display: none; }

/* La foto, casi a sangre pero con un respiro por los lados para que no
   toque los bordes ni se meta debajo de las flechas.
   ARRIBA Y ABAJO IGUALES (v5.83): antes abajo llevaba mas margen que
   arriba (34/60) para reservar sitio al contador+firma, que entonces
   seguian la foto (v5.70). Desde que son fijos a la esquina de la
   pagina (v5.78, croquis de Alicia) ya no hace falta ese margen extra
   -laposicion fija de esos dos, en el CSS de mas abajo, cabe de sobra
   en 55px-, y ese desequilibrio dejaba la foto pegada arriba en vez de
   centrada (aviso de Alicia, 11-08-2026: "se quedan mas pegadas de
   arriba que de abajo"). */
body.visor .proy-slide { padding: 55px 74px; }

/* Pulsar la foto (fuera de ella) cierra; el cursor lo anuncia */
body.visor .proy-slider { cursor: zoom-out; }
body.visor .proy-slide img { cursor: default; }

/* Sin el visor abierto, la foto invita a ampliarse */
.proy-slide img { cursor: zoom-in; }

/* ---- LOS MANDOS DEL VISOR ---- */
/* Reves de v5.65 (peticion de Alicia, 04-08-2026): antes eran una X
   arriba a la derecha (cerrar) y el contador arriba a la izquierda, los
   dos en gris clarito. Ahora:
     - Para salir se pulsa el mismo PUNTO NEGRO que el icono de inicio
       (arriba a la izquierda: "para volver a la portada del encargo
       con nombre").
     - El contador baja abajo a la derecha, junto a su firma (©).
     - Las flechas y el punto van en negro (antes gris clarito).
   TODOS los mandos llevan un halo blanco permanente (no solo en
   movil): en negro, un icono sobre una foto oscura desaparecia igual
   que antes desaparecia el gris clarito sobre una foto clara. El halo
   los mantiene legibles sobre cualquiera de las dos. */
.visor-ui { display: none; }
body.visor .visor-ui { display: block; }

.visor-boton {
  position: fixed; z-index: 210;
  background: none; border: none; padding: 8px;
  color: var(--negro);
  cursor: pointer;
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #fff);
  transition: opacity .2s ease;
}
/* Solo con raton de verdad (v6.0), mismo motivo que .nav-icon (ver
   nav.css): en tactil el ":hover" se queda pegado y el punto de volver
   se quedaba gris tras pulsarlo. */
@media (hover: hover) and (pointer: fine) {
  .visor-boton:hover { opacity: .55; }
}
.visor-boton:focus-visible { outline: 1px solid var(--negro); outline-offset: 3px; }
.visor-boton svg { width: 22px; height: 22px; display: block; }

.visor-punto { top: 14px; left: 18px; }
/* Del mismo tamaño que el punto negro del mosaico (.nav-icon svg,
   tambien 42px sobre el mismo viewBox de 24): Alicia avisó de que aquí
   se veía más pequeño que en la portada. Antes eran 15px. */
.visor-punto svg { width: 42px; height: 42px; }
/* Las flechas, a media altura y pegadas a los lados */
.visor-flecha { top: 50%; transform: translateY(-50%); }
.visor-flecha svg { width: 30px; height: 30px; }
.visor-flecha.izq { left: 10px; }
.visor-flecha.der { right: 10px; }

/* EN MOVIL los margenes tienen que ser minimos. Con los de escritorio
   (74px a cada lado) el pantalla completa salia MAS PEQUENO que el
   reportaje normal -medido: 287px de foto frente a 355-, porque en una
   pantalla de 375 esos margenes se comen medio ancho. Aqui la foto va
   casi a sangre y los mandos se posan encima, que es lo normal en
   cualquier visor de movil. */
@media (max-width: 768px) {
  /* Arriba y abajo iguales, por la misma razon que en escritorio: ver
     el comentario largo junto a "body.visor .proy-slide" mas arriba. */
  body.visor .proy-slide { padding: 50px 6px; }
  .visor-punto { top: 10px; left: 8px; }
  /* LAS FLECHAS, OCULTAS EN MOVIL TAMBIEN A PANTALLA COMPLETA (v5.89,
     peticion de Alicia: "que cuando se hagan grandes al entrar en el
     carrusel, las flechas desaparezcan"). Mismo razonamiento que en el
     reportaje normal (ver responsive.css, junto a .proy-mando-flecha):
     el gesto de arrastre ya mueve las fotos. */
  .visor-flecha { display: none; }
}

/* ============================================================
   TRABAJOS QUE SON UN VIDEO (24-08-2026). "The first house" es una
   pieza audiovisual con sonido, no una serie de fotos. Se pinta en el
   mismo sitio que el pase de fotos (ver View.mostrarProyecto), asi que
   el video se comporta como si fuera la foto: mismo hueco, mismo
   "contain" -para que se vea entero y centrado sobre el blanco- y los
   mismos mandos pegados a su borde. */
/* EL VIDEO SE MIDE A SI MISMO, no ocupa toda la caja como las fotos.
   Con "width:100%" mas "object-fit:contain" -que es lo que hacen las
   fotos- el elemento seguia siendo tan ancho como el hueco y el video
   quedaba centrado dentro, con aire a los lados; el problema es que LA
   BARRA DE MANDOS DEL NAVEGADOR se dibuja sobre el elemento entero, asi
   que salia mucho mas ancha que la imagen y no se entendia de que era.
   Dejando que el elemento tome su propio tamaño (auto + topes), la
   barra queda exactamente del ancho del video. El centrado lo pone el
   flex de aqui abajo. */
body.con-video .proy-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.proy-video {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  display: block;
  background: var(--fondo);
}

/* EN UN VIDEO SOBRAN TODOS NUESTROS MANDOS. La clase la pone
   View._marcarVideo.
   - El contador y las flechas, porque no hay serie que pasar: no existe
     "foto 1 de 7".
   - El de PANTALLA COMPLETA, porque el reproductor del navegador ya
     trae el suyo en su barra, y ademas el suyo es el bueno aqui: manda
     a pantalla completa el video de verdad, con sus mandos, en vez del
     visor de fotos de la web (aviso de Juan, 24-08-2026, el mismo
     motivo por el que se quito el altavoz).
   Con esto, en un video mandan los mandos del reproductor y punto: no
   hay dos juegos de botones para lo mismo. */
body.con-video .proy-mando-flecha,
body.con-video .proy-mando-ampliar,
body.con-video .proy-mando-contador { display: none; }


/* ============================================================
   EL CARRUSEL DE MINIATURAS, debajo de la foto (26-08-2026). Alicia
   pidio "ver como queda tener debajo un carusel de miniaturas de las
   imagenes que lo componen".

   REHECHO EL 27-08 tras auditarlo: la primera version funcionaba mal en
   movil y tablet, y por tres motivos distintos.

   1) LAS PRIMERAS MINIATURAS NO SE PODIAN ALCANZAR. La fila iba
      centrada con "justify-content: center", y cuando el contenido no
      cabe, un contenedor centrado lo desborda POR LOS DOS LADOS: lo que
      se sale por la izquierda queda fuera del alcance del scroll -no
      hay forma de llegar a el, ni arrastrando-. Medido en el COAM en
      movil: 127px de las primeras fotos, inaccesibles. Como en movil
      casi ningun trabajo cabe entero, el fallo salia casi siempre.
      "safe center" lo arregla: centra mientras quepa y, en cuanto no
      cabe, se comporta como alineado a la izquierda.
   2) LA FILA QUEDABA IRREGULAR. Cada miniatura conservaba su
      proporcion, asi que una foto vertical salia como una tira
      estrecha al lado de una horizontal ancha (medido: de 53 a 68px en
      el mismo trabajo). Ahora todas ocupan la MISMA CAJA y la foto se
      recorta para llenarla, que es lo que da el aspecto de tira de
      contactos.
   3) EN NEGATIVO NO SE ENTENDIAN. A 60px, una foto invertida no dice
      nada: no se reconoce que hay detras, que es justo para lo que
      sirve la tira. Ahora van a color, apagadas, y la que se esta
      viendo se enciende del todo.

   Lo que se ve: una tira ordenada de fotos apagadas, la actual a plena
   luz con una rayita debajo -la misma rayita del titulo del reportaje,
   ver .proy-dash-, y los extremos desvaneciendose cuando hay mas fotos
   de las que caben, igual que el CV del About.
   OJO CON EL ALTO: la pagina del reportaje cabe justa en la pantalla
   (#proyecto.active va en flex con alto fijo), asi que lo que ocupe
   esta tira se lo quita a la foto grande. Por eso su alto va en vh: en
   una pantalla corta se encoge sola. */
.proy-tira {
  display: none;                 /* lo enciende body.con-tira */
  gap: 6px;
  /* "safe": centrado mientras quepa, alineado a la izquierda en cuanto
     desborde. Ver el motivo 1 de arriba. */
  justify-content: safe center;
  align-items: flex-end;
  /* El relleno de abajo deja sitio a la rayita de la miniatura activa
     (va 6px por debajo de ella) y el margen hasta el borde de la
     pantalla.
     ESE MARGEN IGUALA AL DE ARRIBA a proposito (peticion de Alicia,
     27-08-2026: "que los margenes de la web arriba y abajo sean
     iguales... el margen grande es el que mejor queda, lo copiamos
     abajo"). Arriba hay 32px de #proyecto + 8px de .proy-cabecera = 40.
     Como la pagina cabe justa en la pantalla, subir este margen le
     quita alto a la foto grande, que es exactamente lo que ella pedia:
     "ajustamos el tamaño de las fotos (del carrusel no, de las
     grandes)". */
  padding: 2px var(--pad) 40px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
  /* Los extremos se desvanecen para que se vea que la tira sigue, el
     mismo recurso que el CV del About. Solo se nota cuando de verdad
     hay mas fotos de las que caben; si caben todas, lo que se difumina
     es hueco vacio. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.proy-tira::-webkit-scrollbar { display: none; }
body.con-tira .proy-tira { display: flex; }

/* TODAS DEL MISMO TAMAÑO, sea cual sea la proporcion de la foto: es lo
   que convierte una fila desigual en una tira de contactos. La foto se
   recorta (object-fit: cover) en vez de deformarse. */
.proy-tira-item {
  flex: 0 0 auto;
  width: clamp(48px, 5.6vw, 74px);
  height: clamp(34px, 5vh, 52px);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  position: relative;
  opacity: .45;
  filter: saturate(.35);
  transition: opacity .25s ease, filter .25s ease;
}
.proy-tira-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

/* LA QUE SE ESTA VIENDO: a plena luz y con una rayita debajo, la misma
   que lleva el titulo del reportaje (.proy-dash), para que se reconozca
   como parte del mismo lenguaje. */
.proy-tira-item.actual {
  opacity: 1;
  filter: none;
}
/* AQUI ESTABA LA RAYITA QUE SUBRAYABA LA MINIATURA ACTIVA. Alicia la
   quito (28-08-2026): "en el carrusel vamos a quitar la linea que
   subraya que foto estoy viendo en grande, no es necesario, con verse a
   color ya es suficiente". Y tiene razon: la activa es la unica que va
   a plena luz y con todo su color, las demas apagadas, asi que se
   distingue de sobra sin añadir nada. */

/* Al pasar el raton, un adelanto de lo que hay detras. Solo con raton
   de verdad: en tactil el ":hover" se queda pegado tras tocar (mismo
   motivo que en .nav-icon, ver nav.css). */
@media (hover: hover) and (pointer: fine) {
  .proy-tira-item:hover { opacity: .85; filter: none; }
}
.proy-tira-item:focus-visible { outline: 1px solid var(--negro); outline-offset: 3px; }

/* EN PANTALLA COMPLETA NO PINTA NADA: ahi manda la foto sola, con sus
   propios mandos. */
body.visor .proy-tira { display: none; }

/* EN MOVIL EN VERTICAL, LA TIRA SE DOBLA EN VARIAS FILAS.
   Antes era una sola fila que se desplazaba a lo ancho y en una
   pantalla estrecha se salia por los lados: "el carrusel en movil, en
   vertical, se corta. Yo lo pondria para que se vea en 2 o 3 lineas,
   las que necesite, y listo. Quedara bien, tipo cinta de negativos"
   (Alicia, 27-08-2026).
   Al doblarse ya no hay nada escondido a los lados, asi que se quitan
   las dos cosas que existian solo para avisar de que la tira seguia:
   el desplazamiento lateral y el difuminado de los extremos. El
   row-gap es mas ancho que el hueco entre columnas porque debajo de
   cada miniatura tiene que caber la rayita de la activa (va 6px por
   debajo y mide 2px). El tope de alto evita que un reportaje muy largo
   se coma media pantalla: a partir de ahi la tira se desplaza, pero ya
   en vertical. */
@media (max-width: 768px) and (orientation: portrait) {
  body.con-tira .proy-tira {
    flex-wrap: wrap;
    align-content: flex-start;
    /* ALINEADO A LA IZQUIERDA, NO CENTRADO (Alicia, 28-08-2026): "la
       segunda fila la alineamos a la izquierda; la idea es que salgan
       como si fuera una frase de 2 lineas alineada a la izquierda, no
       centrada en la pantalla". Justo eso: las filas se llenan desde el
       margen y la ultima se queda a medias por la derecha, como el
       ultimo renglon de un parrafo. */
    justify-content: flex-start;
    /* Y EL MARGEN, EL DE LA FOTO. Alinear "a la izquierda" solo tiene
       sentido contra algo: la referencia que hay justo encima es la
       fotografia, cuya caja arranca a 10px en movil (ver .proy-slide en
       responsive.css). Con el margen general de la pagina -40px- las
       miniaturas empezaban 30px mas adentro que la foto y en vez de un
       parrafo alineado parecia un descuadre. */
    padding-left: 10px;
    padding-right: 10px;
    row-gap: 8px;              /* ya no hay rayita debajo que alojar */
    padding-bottom: 24px;        /* el de arriba aqui ya lo pone la barra */
    max-height: 24vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* EN MOVIL EN HORIZONTAL, LA TIRA SE PONE DE PIE A LA IZQUIERDA.
   Aqui la pantalla es tan baja que una tira tumbada le robaba a la
   foto el poco alto que hay -por eso antes simplemente se ocultaba-,
   pero ancho sobra. Alicia: "en la version movil h no se ve; yo ahi
   voto por ponerlo en vertical, a la izquierda, y tambien en el numero
   de columnas que haga falta" (27-08-2026).
   Va en position:absolute para salirse de la columna cabecera/slider y
   poder ocupar todo el alto; a cambio, cabecera y slider se apartan a
   la derecha justo su ancho. Con direccion columna y wrap, las
   miniaturas llenan una columna, saltan a la siguiente, y si hicieran
   falta mas de las dos que caben, la tira se desplaza a lo ancho. */
@media (max-height: 480px) and (orientation: landscape) {
  body.con-tira .proy-tira {
    position: absolute;
    /* El "left" lo afina la JS al medir la foto (View._colocarMandos):
       la tira se pega al borde izquierdo de la imagen. Este 0 es solo
       el punto de partida.
       Y arranca POR DEBAJO DE LA BARRA: el punto del menu es fijo en la
       esquina de arriba a la izquierda, justo donde caeria la primera
       miniatura, y en las fotos apaisadas -que dejan poco aire y hacen
       que la tira se quede pegada al borde- se le montaba encima. */
    /* SIEMPRE EN EL MISMO SITIO. Llego a colocarse pegada a la foto,
       midiendola, pero eso la movia en cada cambio porque cada foto
       deja un aire distinto. Alicia lo corto (28-08-2026): "el carrusel
       lo dejamos siempre fijo en un lado de la pantalla, que cada vez
       que pase de foto no se vaya recolocando de sitio".
       Aqui no se monta con nada: el slider se aparta 122px (mas abajo),
       asi que la foto y su flecha izquierda quedan siempre a la derecha
       de la tira.
       Y arranca POR DEBAJO DE LA BARRA: el punto del menu es fijo en la
       esquina de arriba a la izquierda, justo donde caeria la primera
       miniatura. */
    /* SEPARADA DEL BORDE Y PEGADA A LA FOTO (Alicia, 28-08-2026, con
       captura: "en la version movil horizontal vamos a mover el
       carrusel"). En el borde de la pantalla quedaba a 187px de la
       imagen, con todo ese hueco vacio en medio; el recuadro que marco
       cae justo aqui.
       Arranca por debajo de la barra: el punto del menu es fijo en la
       esquina de arriba a la izquierda. */
    /* EL "left" LO CALCULA LA JS (View._colocarTira). Alicia lo explico
       de viva voz el 30-08-2026, y era mas simple de lo que yo habia
       entendido de sus croquis: la FOTO va centrada en la pagina, como
       en cualquier otra pantalla, y el carrusel va centrado EN EL HUECO
       que queda a su izquierda -las dos distancias que marca con
       flechas en el croquis son esas, y tienen que ser iguales-.
       Lo que yo hacia hasta ahora era otra cosa: apartar la foto a la
       derecha para hacerle sitio a la tira. De ahi su aviso: "la foto
       principal se desplaza a la derecha, y no era eso".
       El hueco depende de lo apaisadas o verticales que sean las fotos
       del reportaje, asi que se calcula POR REPORTAJE y se deja quieto:
       "lo que no quiero que se vaya adaptando al tamaño de la imagen es
       donde va colocado este carrusel; esto quiero que sea fijo". */
    left: 0; top: 88px; bottom: 0;
    /* EL ANCHO, LAS COLUMNAS QUE HAGAN FALTA. Estaba fijo en 122px, que
       son exactamente dos columnas, y con eso una tercera se quedaba
       fuera: en Fronton and Social Club, con 12 fotos, en cuanto la
       pantalla baja de unos 320px de alto solo caben 5 por columna,
       hacen falta 3 y las dos ultimas miniaturas desaparecian (aviso de
       Juan, 30-08-2026).
       Con "max-content" la tira mide justo lo que ocupen sus columnas,
       sean dos o tres, y la JS la sigue colocando pegada a la flecha
       (ver View._colocarTira, que lee este ancho ya calculado). El peor
       caso del sitio son 3 columnas: 178px. */
    width: max-content;
    /* POR ENCIMA DEL PASE. Aqui la tira se monta sobre el slider (se
       coloca junto a la foto, no en el borde de la pantalla), y la foto
       actual va con z-index 4, asi que sin esto se quedaba delante y se
       comia los toques: "cuando toco sobre la miniatura no se cambia de
       imagen, entra directamente en imagen maximizada" (Juan,
       28-08-2026) -el toque llegaba a la foto grande, y tocar la foto
       es justo lo que abre la pantalla completa-. Va por debajo del
       visor (200) y de la barra, que deben seguir mandando. */
    z-index: 6;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    /* Las columnas se llenan DESDE ARRIBA, no centradas: "que la
       segunda columna de fotos empiece a la par que la primera, desde
       arriba" (Alicia). Antes heredaba el centrado de la regla general
       y una columna a medias se quedaba flotando a media altura. */
    justify-content: flex-start;
    padding: 6px 6px 6px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    /* El difuminado ahora avisa por arriba y por abajo, no por los
       lados: es el eje por el que se llena cada columna. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  /* NI LA CABECERA NI EL SLIDER SE APARTAN YA. Llevaban un margen
     izquierdo para dejarle sitio a la tira, y eso es justo lo que
     Alicia no queria: descentraba la fotografia. Ahora la foto y el
     titulo van centrados en la pagina y es la tira la que se coloca en
     el hueco (ver View._colocarTira). */
}