/* ═══════════════════════════════════════════════════════════
   12-detalle.css  —  La banda "El detalle".

   Una foto vertical (3:4) a la derecha y el dato a la izquierda.
   Dos encargos mandan aquí, y los dos van contra lo que hace el
   resto del sitio:

   1. LA FOTO NO SE RECORTA. En todas las demás secciones la foto
      llena una caja de proporción fija con object-fit:cover, o
      sea que se recorta lo que sobre. Aquí no: la imagen se pinta
      con height:auto y se ve entera, de arriba a abajo. Lo que se
      adapta es la caja, no la foto.

   2. EL BORDE IZQUIERDO SE DESVANECE. Y se hace con una MÁSCARA,
      no con un degradado de color encima. La diferencia importa:
      un velo encima tendría que ser exactamente del color del
      fondo, y el fondo de este sitio no es un color plano —lleva
      la luz de sala de 08-fondo.css por debajo— además de cambiar
      entre día y noche. La máscara vuelve transparente la foto
      misma, así que se funde con lo que haya detrás, sea lo que
      sea, en los dos temas y sin una sola línea de tema.

   La máscara solo entra donde la banda es de dos columnas. En
   vertical la foto va debajo del texto y a todo el ancho: ahí un
   desvanecido a la izquierda se comería la mitad del mueble.
   ═══════════════════════════════════════════════════════════ */

.detalle-reja{ display:grid; gap:clamp(2rem,5vw,3.5rem); margin-top:2.6rem;
  align-items:center; }

@media (min-width:940px){
  .detalle-reja{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:clamp(2.5rem,4vw,4rem); }
}

.detalle-dicho{ max-width:46ch; }
/* La clase de la seccion es .banda y NO .detalle, aunque el id si sea
   #detalle. Motivo: .detalle ya existe en 01-base.css — son los
   recuadros numerados que flotan sobre la foto de cada proyecto, y
   llevan aspect-ratio:1/1 y overflow:hidden. La primera version de esta
   banda uso ese nombre y la seccion entera se recorto en un cuadrado:
   se veia el titulo, el parrafo y medio dato, y lo demas desaparecia
   junto con la foto. Es el segundo choque de nombres del proyecto (el
   otro fue .pieza en la galeria); comprueba-galeria.py los vigila. */
.banda .titulo{ max-width:16ch; }
.banda .guia{ max-width:44ch; }

/* los tres datos: ficha técnica, no lista con viñetas */
.detalle-datos{ list-style:none; margin:2.4rem 0 0; padding:0;
  border-top:1px solid var(--filete-db); }
.detalle-datos li{ padding:.9rem 0;
  border-bottom:1px solid var(--filete-db); }
.detalle-datos b{ display:block; font-size:var(--t-s); font-weight:600;
  font-variation-settings:"wdth" 104; color:var(--hueso); }
.detalle-datos i{ display:block; margin-top:.2rem; font-style:normal;
  font-size:var(--t-xs); color:var(--hueso-med); }


/* ═══ LA FOTO ══════════════════════════════════════════════
   Sin caja de proporción y sin object-fit: la altura la pone la
   propia imagen. `montaFoto` de sitio.js le escribe width/height
   reales (864×1152), así que el navegador reserva el hueco antes
   de bajarla y la página no pega el salto. */
.detalle-foto{ position:relative; }
.detalle-foto picture{ display:block; }
.detalle-foto img{ display:block; width:100%; height:auto;
  border-radius:var(--radio);
  filter:contrast(1.06) saturate(1.02) brightness(1.01);
  opacity:0; transition:opacity .5s var(--curva); }
.detalle-foto img.cargada{ opacity:1; }

@media (min-width:940px){
  .detalle-foto{ max-width:38rem; margin-left:auto; }

  /* el desvanecido del borde izquierdo.
     Dos paradas y no una: con un solo tramo lineal el ojo ve
     dónde empieza el degradado, y lo que se busca es que no se
     note dónde acaba la foto y empieza la página. */
  @supports (mask-image:linear-gradient(#000,#000)) or
            (-webkit-mask-image:linear-gradient(#000,#000)){
    .detalle-foto img{
      -webkit-mask-image:linear-gradient(to right,
        transparent 0%, rgba(0,0,0,.35) 14%, rgba(0,0,0,.85) 32%, #000 46%);
              mask-image:linear-gradient(to right,
        transparent 0%, rgba(0,0,0,.35) 14%, rgba(0,0,0,.85) 32%, #000 46%);
      border-radius:0 var(--radio) var(--radio) 0; }
  }
}

/* en pantalla angosta la foto va debajo, entera y sin máscara */
@media (max-width:939px){
  .detalle-foto{ max-width:26rem; margin-inline:auto; }
}

@media (prefers-reduced-motion:reduce){
  .detalle-foto img{ transition:opacity .2s linear; }
}