/* caso-lafortaleza.css — tokens del caso Pasaje Comercial La Fortaleza.
   Todo el layout vive en caso-base.css. Si hay que tocar layout, se toca alla.

   La paleta sale del logotipo aprobado, muestreada del PNG:
     #0E448C  azul del logotipo y de los chevrones
     #F16417  naranja de la torre y del "PASAJE COMERCIAL"

   El acento es el AZUL, no el naranja, aunque el naranja sea el que canta.
   Razon: --caso-acento pinta el sobretitulo y el filete, o sea texto chico y
   trazos finos, y el naranja da 3.2:1 sobre blanco: no pasa AA. El azul da
   9.4:1. El naranja entra como --caso-secundario, para superficies.

   AGO 2026 — la seccion se rehizo con el layout editorial (acto / dupla /
   mosaico / notas), el mismo de Asistir, y se fijo en tema claro con
   data-tema="claro" en el HTML. Antes traia sus propias rejas de logotipos,
   fichas y videos; con el recorte a dos actos, todas salieron de esta hoja. */

.caso--lafortaleza {
  --caso-acento: #0e448c;          /* azul del logotipo — 9.4:1 sobre #fff */
  --caso-acento-texto: #fff;
  --caso-secundario: #f16417;      /* naranja de la torre */
  --caso-fondo-alt: #f2f5fa;
  --caso-linea: #dbe3ef;
}

/* La descripcion pasa a dos parrafos (ago 2026, se quito la seccion de notas
   y se trajo aca lo del escudo y el color). `.caso__entrada` de caso-base.css
   trae `margin:0`: sin esto, el segundo parrafo queda pegado al primero. */
.caso--lafortaleza .caso__entrada + .caso__entrada { margin-top: 1rem; }

/* Sin bloque de modo oscuro a proposito: las dos secciones llevan
   data-tema="claro" y no siguen al sistema. Es el mismo criterio de Asistir. */

/* --- Aire entre los dos actos ---------------------------------------------
   Las dos secciones son el MISMO proyecto, asi que entre ellas va menos aire
   que entre dos casos distintos. Sin esto se suman cuatro cosas —el margen
   inferior del acto (102px), el padding inferior de la seccion (90px), el
   padding superior de la siguiente y el margen superior de su acto— y quedan
   206px de vacio: se lee como si el caso se hubiera terminado.

   Van dos reglas porque CSS solo mira hacia adelante. La de arriba usa el
   selector de hermano y apaga lo de la segunda; la de abajo necesita apuntar a
   la PRIMERA sabiendo que hay otra despues, y para eso el generador le pone la
   clase `lf-sigue`. Se podria con `:has()`, pero una clase que escribe el
   propio generador no depende del soporte del navegador y ademas se lee sola.

   Queda en ~97px, que es casi exactamente el mismo aire que hay DENTRO del acto
   entre la dupla y las notas (99px medidos). Suena mal en la teoria —el salto
   de acto deberia pesar mas que el salto de bloque— pero aca no hace falta:
   el acto nuevo se anuncia solo, con el sobretitulo en versalitas azules, el
   titular grande y el filete. Tres senales tipograficas seguidas. Agregarle
   ademas el doble de aire es repetir el mismo mensaje dos veces.

   Medido: de 206px a 97px. */
.caso--lafortaleza + .caso--lafortaleza { padding-top: 0; }
.caso--lafortaleza.lf-sigue { padding-bottom: clamp(2rem, 4vw, 3.25rem); }
.caso--lafortaleza.lf-sigue .caso__acto { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }

/* --- Mosaico de marca -----------------------------------------------------
   Tres celdas en dos filas: el logotipo cruza las dos columnas y abajo quedan
   el escudo y los colores.

       +-----------------------+
       |  logotipo             |
       +-----------+-----------+
       |  escudo   |  colores  |
       +-----------+-----------+

   El logotipo cruza porque es 3.1:1: en media columna saldria de 98 px de alto
   y no se leeria "PASAJE COMERCIAL". */

/* El span va DENTRO del media query a proposito. caso-base.css deja el mosaico
   en una sola columna por debajo de 480px; un hijo que pide `span 2` ahi obliga
   a la reja a crear una segunda columna implicita de ancho automatico, y las
   tres celdas quedan desniveladas en movil. Solo se cruza cuando hay dos
   columnas de verdad. */
@media (min-width: 480px) {
  .caso--lafortaleza .lf-logo { grid-column: span 2; }
  .caso--lafortaleza .lf-meta { grid-column: span 2; }
}

/* --- Datos del proyecto, bajo el escudo y los colores ----------------------
   Vivian bajo el parrafo de la intro, pero esa columna es mas corta que el
   mosaico de marca (logo + escudo/colores): quedaba un bloque de blanco bajo
   el escudo y los colores, como si la fila se hubiera cortado a la mitad. Se
   movieron a su propia fila dentro del mosaico, a las dos columnas.

   Siguen en COLUMNA y no en fila aunque aca el ancho alcance para las tres:
   es la misma ficha de siempre (etiqueta arriba, dato abajo), no una tabla
   horizontal nueva. Por eso se fuerza `flex-direction`, que si no dependeria
   del ancho disponible via el `flex-wrap` de caso-base.css. */
.caso--lafortaleza .lf-meta .caso__meta {
  flex-direction: column;
  margin-top: 0;
}

/* Los marcos de marca van sobre BLANCO fijo, no sobre --caso-fondo-alt. El PNG
   es tinta sobre transparente aplanada a blanco: sobre el gris azulado del
   marco quedaria un rectangulo blanco recortado adentro de la tarjeta. */
/* Ojo con centrar esto con `display:grid; place-items:center`: caso-base.css le
   da `width:100%` a la imagen del marco, y dentro de una pista de rejilla
   dimensionada por contenido ese 100% se vuelve circular y la imagen colapsa a
   0x0. Se queda en `block` y el centrado lo hace el margen automatico. */
.caso--lafortaleza .lf-marca .caso__marco {
  display: block;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: #fff;
  border: 1px solid var(--caso-linea);
  box-shadow: none;
}
.caso--lafortaleza .lf-marca .caso__marco:hover,
.caso--lafortaleza .lf-marca .caso__marco:focus-visible {
  box-shadow: var(--caso-sombra);
}
/* El escudo es 0.74:1. A todo el ancho de su celda saldria mas alto que la
   celda de al lado y descuadraria la fila. */
.caso--lafortaleza .lf-escudo img { max-width: 116px; margin-inline: auto; }

/* --- Los dos colores ------------------------------------------------------
   Una tarjeta partida en dos bandas. Ocupan la celda entera porque un color de
   marca se juzga por la superficie, no por una muestra de 2 rem al lado de una
   etiqueta.

   La tinta de cada banda no es la misma: sobre el azul el blanco da 9.4:1, pero
   sobre el naranja da 3.2:1 y no pasa AA. Por eso el naranja lleva tinta cafe
   casi negra, que da 5.9:1. */

.caso--lafortaleza .lf-colores {
  display: grid;
  grid-template-rows: 1fr 1fr;
  overflow: hidden;
  border-radius: var(--caso-radio-lg);
  border: 1px solid var(--caso-linea);
  /* El mosaico va con `align-items:start` para dar el aire tipo masonry. Esta
     celda es la excepcion: sin estirarla, las dos bandas de color quedan mas
     cortas que el escudo de al lado y la fila se ve desnivelada. */
  align-self: stretch;
}
.caso--lafortaleza .lf-color {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .1rem;
  padding: clamp(.8rem, 2vw, 1.1rem);
  min-height: clamp(76px, 9vw, 96px);
}
.caso--lafortaleza .lf-color b { font-size: .88rem; font-weight: 700; }
.caso--lafortaleza .lf-color small {
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  opacity: .85;
}
.caso--lafortaleza .lf-color--azul    { background: #0e448c; color: #fff; }
.caso--lafortaleza .lf-color--naranja { background: #f16417; color: #1a0e05; }

/* --- Palabra resaltada en el titular --------------------------------------
   Se marca con <em> y no con un <span class>: el generador del sitio
   reconstruye los textos traducibles SIN los atributos de sus etiquetas
   hijas, asi que una clase ahi se perderia al cambiar de idioma. <em> esta en
   HIJOS_PERMITIDOS y viaja entero.

   El color es el AZUL de marca, no el naranja, aunque el naranja sea el que
   canta. El naranja da 3.2:1 sobre blanco: pasa AA solo por ser texto grande,
   y por los pelos. El azul da 9.4:1 y aguanta cualquier tamano. */

.caso--lafortaleza .caso__titular em {
  font-style: normal;
  color: var(--caso-acento);
}

/* --- Acordeon de banners --------------------------------------------------
   Tres piezas de 1920x700 apiladas. En reposo cada una se recorta a una franja
   y al pasar el cursor se abre entera.

   Se abre en ALTO y no en ancho a proposito. Un acordeon horizontal deja cada
   pieza en una tira vertical angosta, y en un formato 2.7:1 eso recorta
   justamente los extremos, que es donde vive el titular en dos de los tres
   banners. Recortando el alto en cambio se pierde cielo y piso, y la franja
   central —donde esta el texto— se sigue leyendo.

   La mecanica: el marco lleva `aspect-ratio` y se le tapa el alto con
   `max-height`. En reposo manda el tope y la imagen se recorta con
   object-fit; al abrir, el tope sube por encima del alto natural y entonces
   manda la proporcion, o sea la pieza entera sin recortar. `max-height`
   interpola entre dos largos, que es lo que `height: auto` no hace. */

.caso--lafortaleza .lf-acordeon {
  /* El tope abierto es un TECHO, no una medida: a 1120 px de ancho el alto
     natural es 408 px, asi que 520 nunca recorta y deja que mande la
     proporcion en cualquier ancho menor. */
  --lf-cerrado: clamp(78px, 9vw, 108px);
  --lf-abierto: 520px;

  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.6rem, 1.6vw, 1rem);
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
.caso--lafortaleza .lf-acordeon li { margin: 0; }
.caso--lafortaleza .lf-acordeon figure { margin: 0; }

.caso--lafortaleza .lf-acordeon .caso__marco {
  aspect-ratio: 1920 / 700;
  max-height: var(--lf-cerrado);
  transition: max-height .55s cubic-bezier(.22, .61, .36, 1),
              box-shadow .45s ease,
              transform .45s cubic-bezier(.22, .61, .36, 1);
}
/* `focus-within` es lo que lo hace utilizable con teclado: el marco es un
   boton, asi que tabular hasta el abre la pieza igual que el cursor. */
.caso--lafortaleza .lf-acordeon li:hover .caso__marco,
.caso--lafortaleza .lf-acordeon li:focus-within .caso__marco {
  max-height: var(--lf-abierto);
}
.caso--lafortaleza .lf-acordeon .caso__marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Sin cursor no hay hover, y un acordeon que nunca abre es una galeria rota.
   En tactil las tres van abiertas desde el principio. */
@media (hover: none) {
  .caso--lafortaleza .lf-acordeon .caso__marco { max-height: var(--lf-abierto); }
}

@media (prefers-reduced-motion: reduce) {
  .caso--lafortaleza .lf-acordeon .caso__marco { transition: none; }
}