/* Base heredada de 2022/CC La Fortaleza/04_Web_Caso_Estudio/assets/caso-base.css, encerrada en @scope — ver copiar_base_legado()
   en generar_secciones_web.py. No editar a mano: se regenera. */
@scope (.caso--lafortaleza) {
/* ==========================================================================
   caso-base.css — base compartida de las secciones de proyectos pequenos
   --------------------------------------------------------------------------
   Una seccion = un proyecto que no da para pagina propia. Varias se apilan
   en la misma pagina (proyectos-pequenos/index.html).

   Todo va bajo .caso: nada de estilos globales, nada de reset. Asi la seccion
   se puede pegar en cualquier pagina del sitio sin pelear con lo que ya hay.

   Para una seccion nueva solo se define el bloque de tokens de acento en su
   propio archivo (ver caso-ascoop.css). Esta hoja no se toca.
   ========================================================================== */

.caso {
  /* Tokens con valor por defecto. Cada caso los pisa en su propia hoja. */
  --caso-acento: #444;
  --caso-acento-texto: #fff;      /* debe dar >= 4.5:1 sobre --caso-acento */
  --caso-secundario: #222;
  --caso-tinta: #16181c;
  --caso-tinta-suave: #5a6069;    /* 4.8:1 sobre #fff */
  --caso-fondo: #fff;
  --caso-fondo-alt: #f4f5f7;
  --caso-linea: #e2e4e8;
  --caso-radio: 10px;
  --caso-max: 1120px;

  box-sizing: border-box;
  color: var(--caso-tinta);
  background: var(--caso-fondo);
  padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 5vw, 2.5rem);
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
}
.caso *, .caso *::before, .caso *::after { box-sizing: inherit; }

.caso__interior { max-width: var(--caso-max); margin-inline: auto; }

/* --- Cabecera ------------------------------------------------------------ */

.caso__sobretitulo {
  margin: 0 0 .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--caso-acento);
}
.caso__titulo {
  margin: 0 0 .25rem;
  font-size: clamp(1.8rem, 4.5vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.caso__bajada {
  margin: 0 0 2rem;
  max-width: 60ch;
  font-size: clamp(1rem, 1.6vw, 1.13rem);
  color: var(--caso-tinta-suave);
}

/* --- Ficha --------------------------------------------------------------- */

.caso__ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.25rem 1.5rem;
  margin: 0 0 clamp(2rem, 5vw, 3.25rem);
  padding: 1.4rem 1.5rem;
  background: var(--caso-fondo-alt);
  border-left: 3px solid var(--caso-acento);
  border-radius: var(--caso-radio);
}
.caso__ficha dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--caso-tinta-suave);
}
.caso__ficha dd { margin: .3rem 0 0; font-weight: 600; }

/* --- Bloques ------------------------------------------------------------- */

.caso__bloque { margin-block: clamp(2.25rem, 5vw, 3.5rem); }
.caso__bloque-titulo {
  margin: 0 0 .4rem;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  letter-spacing: -.01em;
}
.caso__bloque-texto { margin: 0 0 1.5rem; max-width: 68ch; color: var(--caso-tinta-suave); }

/* --- Rejilla de piezas --------------------------------------------------- */

.caso__piezas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  gap: clamp(.75rem, 2vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.caso__pieza { margin: 0; }
.caso__pieza figcaption {
  margin-top: .5rem;
  font-size: .8rem;
  color: var(--caso-tinta-suave);
}

/* El boton envuelve la imagen para abrir el visor. Sin JS sigue siendo un
   boton inerte que no estorba: la imagen se ve igual. */
.caso__lupa {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--caso-linea);
  border-radius: var(--caso-radio);
  overflow: hidden;
  background: var(--caso-fondo);
  cursor: zoom-in;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.caso__lupa:hover, .caso__lupa:focus-visible {
  transform: translateY(-3px);
  border-color: var(--caso-acento);
  box-shadow: 0 10px 28px rgb(0 0 0 / .13);
}
.caso__lupa:focus-visible { outline: 3px solid var(--caso-acento); outline-offset: 2px; }
.caso__lupa img { display: block; width: 100%; height: auto; }

/* --- Video --------------------------------------------------------------- */

.caso__video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--caso-radio);
  border: 1px solid var(--caso-linea);
  background: #000;
}

/* --- Lista de alcance ---------------------------------------------------- */

.caso__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.caso__lista li { position: relative; padding-left: 1.6rem; }
.caso__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: .6rem; height: .6rem;
  background: var(--caso-acento);
  border-radius: 2px;
}

/* --- Nota ---------------------------------------------------------------- */

.caso__nota {
  margin: 2rem 0 0;
  padding: 1rem 1.2rem;
  font-size: .9rem;
  color: var(--caso-tinta-suave);
  background: var(--caso-fondo-alt);
  border-radius: var(--caso-radio);
}

/* --- Visor (lightbox) ---------------------------------------------------- */

.caso-visor {
  border: 0;
  padding: 0;
  max-width: min(96vw, 1000px);
  max-height: 94dvh;
  background: transparent;
  overflow: visible;
}
.caso-visor::backdrop { background: rgb(12 13 15 / .88); }
.caso-visor img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 88dvh;
  object-fit: contain;
  border-radius: var(--caso-radio, 10px);
  background: #fff;
}
.caso-visor__pie {
  margin-top: .6rem;
  color: #f2f3f5;
  font: 500 .85rem/1.4 ui-sans-serif, system-ui, sans-serif;
  text-align: center;
}
.caso-visor__cerrar {
  position: absolute;
  top: -2.6rem; right: 0;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  font-size: 1.3rem; line-height: 1;
  color: #fff;
  background: rgb(255 255 255 / .12);
  border: 0; border-radius: 50%;
  cursor: pointer;
}
.caso-visor__cerrar:hover { background: rgb(255 255 255 / .26); }

/* --- Entradas al hacer scroll -------------------------------------------
   Se ocultan SOLO si el JS ya corrio (clase .js en <html>, puesta por un
   script en linea del <head>). Sin JS no se esconde nada: una animacion no
   puede ser el motivo por el que alguien vea una pagina en blanco. */

.js .caso [data-anim] { opacity: 0; transform: translateY(14px); }
.js .caso [data-anim].visible {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s ease;
}

@media (prefers-reduced-motion: reduce) {
  .js .caso [data-anim] { opacity: 1; transform: none; transition: none; }
  .caso__lupa { transition: none; }
  .caso__lupa:hover, .caso__lupa:focus-visible { transform: none; }
}

@media (prefers-color-scheme: dark) {
  .caso:not([data-tema="claro"]) {
    --caso-tinta: #e8eaed;
    --caso-tinta-suave: #a4abb5;
    --caso-fondo: #101215;
    --caso-fondo-alt: #191c21;
    --caso-linea: #2b2f36;
  }
}

/* ==========================================================================
   LAYOUT EDITORIAL — agregado ago 2026
   --------------------------------------------------------------------------
   Es ADITIVO: no toca ni una regla de arriba, para que las secciones que ya
   existen (Ascoop) sigan viendose igual. Lo de arriba es la reja pareja; esto
   es el esquema blanco y minimalista de la casa, donde manda la imagen y el
   texto se corre a un lado.

   Dos piezas y nada mas:
     .caso__dupla   texto a un lado, imagen grande al otro
     .caso__bento   mosaico con una pieza destacada al doble de tamano
   ========================================================================== */

.caso {
  --caso-radio-lg: 22px;                 /* los marcos grandes, tipo tarjeta */
  --caso-sombra: 0 18px 44px -22px rgb(16 18 22 / .34);
}

/* --- Cabecera editorial --------------------------------------------------- */

.caso__acto { margin-block: clamp(3rem, 8vw, 6.5rem); }
.caso__acto:first-child { margin-top: 0; }

.caso__intro { max-width: 40ch; }

.caso__titular {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.caso__entrada {
  margin: 0;
  font-size: clamp(.98rem, 1.3vw, 1.07rem);
  color: var(--caso-tinta-suave);
}

/* Regla corta bajo el titular. Un solo gesto grafico, del color del caso. */
.caso__filete {
  width: 42px; height: 3px;
  margin: 0 0 1.25rem;
  border: 0; border-radius: 2px;
  background: var(--caso-acento);
}

/* --- Meta en linea, sin caja --------------------------------------------- */

.caso__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 2rem;
  margin: 2rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--caso-linea);
}
.caso__meta div { min-width: 0; }
.caso__meta dt {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--caso-tinta-suave);
}
.caso__meta dd { margin: .2rem 0 0; font-size: .92rem; font-weight: 600; }

/* --- Dupla: texto + media ------------------------------------------------- */

.caso__dupla {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 860px) {
  .caso__dupla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  /* Imagen a la izquierda sin reordenar el HTML: el orden del DOM sigue siendo
     texto -> imagen, que es como se debe leer sin CSS y como lo lee un lector
     de pantalla. Ojo: hay que invertir TAMBIEN las columnas. Solo con `order`
     el texto se queda con la columna ancha y la imagen con la angosta, que es
     justo al reves de lo que se busca. */
  .caso__dupla--media-izq { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .caso__dupla--media-izq > :first-child { order: 2; }
  .caso__dupla--alto { align-items: start; }
  .caso__dupla--alto .caso__intro { position: sticky; top: 3rem; }
}

/* --- Marco de imagen ------------------------------------------------------ */

.caso__marco {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--caso-radio-lg);
  overflow: hidden;
  background: var(--caso-fondo-alt);
  box-shadow: var(--caso-sombra);
  cursor: zoom-in;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease;
}
.caso__marco img { display: block; width: 100%; height: auto; }
.caso__marco:hover, .caso__marco:focus-visible { transform: translateY(-4px); }
.caso__marco:focus-visible { outline: 3px solid var(--caso-acento); outline-offset: 3px; }

/* El pendon es 1:2: a todo el ancho de la columna saldria de 1.280 px de alto y
   se comeria la seccion. Se le topa el ANCHO y se centra, en vez de recortarlo
   con object-fit: la pieza se muestra entera porque la pieza es el entregable.

   El marco --tira lo usa cualquier formato muy vertical, no solo este pendon. */
.caso__marco--tira { max-width: 360px; margin-inline: auto; }
@media (min-width: 860px) {
  .caso__dupla--tira { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* --- Bento ----------------------------------------------------------------
   Cuatro columnas, dos filas. La pieza destacada ocupa 2x2 y las otras cuatro
   1x1, asi que la reja cierra exacta con cinco piezas cuadradas. */

.caso__bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.6rem, 1.4vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.caso__bento li { margin: 0; }
/* La destacada ocupa siempre dos columnas. En movil eso la deja a todo el ancho
   y las otras cuatro cierran en un 2x2 exacto: con cinco piezas en dos columnas,
   si no, la ultima queda huerfana. */
.caso__bento .caso__bento--destacado { grid-column: span 2; }
@media (min-width: 720px) {
  .caso__bento { grid-template-columns: repeat(4, 1fr); }
  .caso__bento .caso__bento--destacado { grid-row: span 2; }
}
.caso__bento .caso__marco { box-shadow: none; border: 1px solid var(--caso-linea); }
.caso__bento .caso__marco:hover, .caso__bento .caso__marco:focus-visible {
  box-shadow: var(--caso-sombra);
}

/* --- Pie de imagen -------------------------------------------------------- */

.caso__pie {
  margin: .55rem 0 0;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--caso-tinta-suave);
}
.caso__pie--centro { text-align: center; }

/* --- Credito final -------------------------------------------------------- */

.caso__credito {
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--caso-linea);
  font-size: .8rem;
  color: var(--caso-tinta-suave);
}

@media (prefers-reduced-motion: reduce) {
  .caso__marco { transition: none; }
  .caso__marco:hover, .caso__marco:focus-visible { transform: none; }
  .caso__dupla--alto .caso__intro { position: static; }
}

/* ==========================================================================
   MOSAICO, NOTAS Y CIERRE — agregado ago 2026
   Sigue siendo aditivo. Nada de aqui toca las reglas anteriores.
   ========================================================================== */

/* --- Mosaico de la dupla --------------------------------------------------
   Dos o tres piezas al lado del texto, con alturas propias. `align-items:start`
   es lo que da el aire tipo masonry: si se estiraran a la misma altura habria
   que recortar, y recortar una pieza de portafolio es esconder el trabajo. */

.caso__mosaico {
  display: grid;
  /* Explicito y no `auto-fit`: con dos piezas en un contenedor ancho, auto-fit
     arma tres pistas y colapsa la sobrante a 0 px, pero el gap de esa pista
     igual se cuenta y deja 18 px muertos contra el borde derecho. */
  grid-template-columns: 1fr;
  align-items: start;
  gap: clamp(.7rem, 1.6vw, 1.15rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.caso__mosaico li { margin: 0; }
.caso__mosaico figure { margin: 0; }
@media (min-width: 480px) {
  .caso__mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Etiqueta sobre la imagen --------------------------------------------
   El degradado no es decoracion: garantiza el contraste del texto pase lo que
   pase debajo. Sin el, una pieza de fondo claro deja la etiqueta ilegible. */

.caso__marco { position: relative; }

.caso__etiqueta {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.6rem .9rem .75rem;
  text-align: left;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  background: linear-gradient(to top, rgb(10 11 14 / .78) 0%, rgb(10 11 14 / .45) 45%, transparent 100%);
  pointer-events: none;
}
.caso__etiqueta small {
  display: block;
  margin-top: .1rem;
  font-size: .72rem;
  font-weight: 500;
  opacity: .82;
}

/* --- Notas al pie del acto ------------------------------------------------ */

.caso__notas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 5vw, 3.25rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--caso-linea);
}
.caso__nota-titulo {
  margin: 0 0 .35rem;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.005em;
}
.caso__nota-texto {
  margin: 0;
  font-size: .92rem;
  color: var(--caso-tinta-suave);
}

/* --- Encabezado ancho ----------------------------------------------------- */

.caso__intro--ancho { max-width: 62ch; }
.caso__intro--ancho .caso__entrada { max-width: 62ch; }

/* --- Cierre --------------------------------------------------------------- */

.caso__cierre {
  margin: clamp(3rem, 7vw, 5.5rem) auto 0;
  padding: clamp(2rem, 5vw, 3.25rem) 0 0;
  max-width: 30ch;
  border-top: 1px solid var(--caso-linea);
  text-align: center;
}
.caso__cierre p {
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.22;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.caso__cierre cite {
  display: block;
  margin-top: 1rem;
  font-size: .78rem;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--caso-tinta-suave);
}

}