/* ================================================================
   CASA LUJURIA — LAS FRANJAS
   Bandas de foto a sangre que parten los tramos largos de lectura.

   Por qué existe este archivo y no vive dentro de casa.css: dia.css
   se carga después y borra a la brava (`!important`) todo lo que
   huela a .ls-fullbleed, incluida la imagen. Las franjas usan
   nombres propios (.cl-fr-*) y este archivo va DESPUÉS de dia.css,
   así que nadie las pisa y nadie tiene que pelear con !important.

   Tres reglas de la casa:
   1) La foto se ve. Nada de velos planos encima. El único
      oscurecido es un degradado en el borde de abajo, y sólo
      donde de verdad va texto encima.
   2) El paralaje es de escritorio. background-attachment:fixed se
      rompe en iOS Safari (la imagen salta o se estira), así que en
      móvil y en pantallas táctiles la foto va pegada y quieta.
   3) Adentro de una página con .narrow, la franja se sale del
      contenedor a mano. html/body ya llevan overflow-x:clip en
      layout.css, así que 100vw no abre barra horizontal.
   ================================================================ */

.cl-franja{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:clamp(2.2rem,6vw,4.4rem);
  margin-bottom:clamp(2.2rem,6vw,4.4rem);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
  /* FOTOGRAMA COMPLETO. Nada de tiras flacas: la franja ocupa 1080px de
     alto, y si la ventana es más baja que eso, ocupa la ventana entera.
     Así el paralaje siempre se ve como un fotograma de cine y nunca como
     un separador estrecho. El min() además hace que la foto encaje sin
     recorte extra: con background-attachment:fixed el `cover` se calcula
     contra la ventana, y aquí el hueco ES la ventana. */
  min-height:min(1080px, 100vh);
}

/* Las tres variantes viven para no romper las llamadas viejas: hoy todas
   miden lo mismo, un fotograma completo. */
.cl-franja--tira,
.cl-franja--alta{min-height:min(1080px, 100vh)}

/* la foto */
.cl-fr-foto{
  position:absolute; inset:0; z-index:0;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

/* el degradado de abajo: SÓLO donde va el texto, y sólo cuando hay
   texto. Una franja muda no lleva nada encima. */
.cl-franja[data-txt="1"] .cl-fr-foto::after{
  content:""; position:absolute; inset:auto 0 0 0; height:50%;
  background:linear-gradient(180deg,
    rgba(11,11,15,0) 0%,
    rgba(11,11,15,.20) 40%,
    rgba(11,11,15,.72) 100%);
  pointer-events:none;
}

/* filo tricolor arriba y abajo — la cinta de la casa, en tercios
   parejos: schwarz, rot, gold — in genau dieser Reihenfolge. */
.cl-franja::before,
.cl-franja::after{
  content:""; position:absolute; left:0; right:0; height:5px; z-index:3;
  background:linear-gradient(90deg,
    #16161c 0 33.34%, #dd0000 33.34% 66.67%, #ffd93d 66.67% 100%);
  pointer-events:none;
}
.cl-franja::before{top:0}
.cl-franja::after{bottom:0}

/* el texto */
/* Pegado a la esquina de abajo a la izquierda, NO centrado.
   Antes esto era un contenedor de 1180px con `margin:0 auto`, y en una
   pantalla de 1920 eso dejaba la frase arrancando a 370px del borde:
   se leía como un pie de foto centrado, no como una esquina. La
   esquina es el gesto: la foto ocupa la ventana entera y el texto se
   para abajo a la izquierda, como el rótulo de un fotograma. */
.cl-fr-txt{
  position:relative; z-index:2;
  width:100%;
  max-width:none;
  margin:0; margin-right:auto;
  padding:clamp(1.4rem,4vw,2.8rem) clamp(1.2rem,6vw,4.5rem) clamp(2rem,5vw,4.6rem)
          clamp(1.3rem,5vw,5rem);
}
/* Ojo con la especificidad: adentro de una página con .narrow hay
   reglas como `.page .narrow p{font-size:...}` (0,2,1) y
   `.lqx .page .narrow p{color:...}` (0,3,1) que se comían el tamaño y
   el color de la frase — la banda de /posiciones/ salía con la frase
   del tamaño de un párrafo cualquiera. De ahí el p. delante y los
   !important: la franja es un bloque cerrado, no hereda del cuerpo. */
.cl-franja p.cl-fr-ojo{
  margin:0 0 .55rem !important;
  max-width:none !important;
  font-family:inherit;
  font-size:.7rem !important; letter-spacing:.2em; text-transform:uppercase;
  font-weight:800 !important; color:#ffd93d !important;
  text-shadow:0 1px 3px rgba(8,6,20,.98), 0 2px 14px rgba(8,6,20,.9);
}
.cl-franja p.cl-fr-frase{
  margin:0 !important;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic; font-weight:600 !important;
  font-size:clamp(1.7rem,4vw,3.3rem) !important;
  line-height:1.06 !important;
  color:#fff !important;
  max-width:20ch !important;
  text-shadow:0 2px 5px rgba(8,6,20,.75), 0 4px 26px rgba(8,6,20,.75);
}
.cl-franja p.cl-fr-frase em{font-style:normal; color:#ffd93d !important}

/* placa de firma, esquina de arriba a la derecha */
.cl-fr-placa{
  /* Ahora que la franja mide una ventana entera, su borde de arriba se
     para justo debajo del encabezado pegajoso. Si la placa va a 22px se
     esconde detrás del menú. Por eso baja hasta despejarlo. */
  position:absolute; z-index:3; top:clamp(92px,12vh,124px); right:clamp(14px,4vw,42px);
  background:#dd0000; color:#fff;
  font-weight:800; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 13px;
  border-radius:2px;
  box-shadow:0 10px 26px rgba(8,6,20,.45);
}

/* --- el paralaje: sólo escritorio con puntero ---------------------- */
@media (min-width:901px) and (hover:hover) and (pointer:fine){
  /* Con `fixed`, el `cover` se calcula contra la ventana entera, no
     contra la franja. Cuando la franja era una tira de 300px eso dejaba
     un primerísimo plano irreconocible y tocaba corregirlo a mano.
     Ahora que la franja mide una ventana completa, el cálculo coincide
     con el hueco y la foto entra tal cual: sin parches. */
  .cl-fr-foto{background-attachment:fixed}
}
@media (prefers-reduced-motion:reduce){
  .cl-fr-foto{background-attachment:scroll !important}
}

/* --- móvil --------------------------------------------------------- */
@media (max-width:640px){
  /* svh y no vh: en móvil la barra del navegador entra y sale, y con vh
     la franja daba un brinco de 60px al hacer scroll. */
  .cl-franja,
  .cl-franja--tira,
  .cl-franja--alta{min-height:92vh; min-height:92svh}
  .cl-fr-frase{max-width:16ch}
  .cl-fr-placa{top:76px; font-size:.62rem; padding:6px 10px}
}

/* ================================================================
   LA PLACA DE LA PUERTA — la foto del aviso de mayores de edad
   ================================================================ */
.ag-foto{
  display:block; width:100%; max-width:220px; height:auto;
  margin:0 auto 1.1rem;
  border-radius:3px;
  box-shadow:0 14px 34px rgba(8,6,20,.45), 0 0 0 3px rgba(232,193,12,.55);
}
@media (max-width:480px){ .ag-foto{max-width:150px} }