/* Base heredada de 2023/La Rueda/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--larueda) {
/* ==========================================================================
   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;

  /* Los `id` de seccion se usan como ancla desde el indice de la pagina: sin
     esto el titulo queda pegado al borde superior, o debajo de un header fijo. */
  scroll-margin-top: 5rem;
  box-sizing: border-box;
  color: var(--caso-tinta);
  background: var(--caso-fondo);
  padding: clamp(2.5rem, 5.5vw, 4.5rem) 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 .9rem;
  font-family: ui-monospace, "SFMono-Regular", "IBM Plex Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--caso-tinta-suave);
}

/* Palabra resaltada dentro de un titular. Es color, no negrita: el titular ya
   pesa lo suficiente y doblar el enfasis lo unico que hace es aplanarlo. */
.caso__realce { 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;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s ease, border-color .25s ease;
}
.caso__lupa:hover, .caso__lupa:focus-visible {
  transform: translateY(-3px) scale(1.012);
  border-color: var(--caso-acento);
}
.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); }
/* El scroll dentro del visor no debe arrastrar la pagina de atras. */
.caso-visor, .caso-visor::backdrop { overscroll-behavior: contain; }
.caso-visor img {
  display: block;
  width: auto;
  max-width: 96vw;
  height: auto;
  /* 84dvh, no 94: el boton de cerrar va FUERA del marco (top: -2.6rem, ver
     .caso-visor__cerrar) y con la pieza a 94dvh no le queda sitio arriba.
     Encontrado en Chrome real con Magna Lux, ago 2026 - ver 00_LEEME_Portafolio_MKT.md. */
  max-height: 84dvh;
  object-fit: contain;
  border-radius: var(--caso-radio, 10px);
}
.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 */
}

/* Fija el tema del formulario nativo y de la barra de scroll junto al fondo.
   Sin esto, en un SO en oscuro los controles nativos salen oscuros sobre blanco. */
.caso[data-tema="claro"] { color-scheme: light; }

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

.caso__acto { margin-block: clamp(2.25rem, 5.5vw, 4.25rem); }
.caso__acto:first-child { margin-top: 0; }
/* Sin esto, el ultimo acto suma su margen inferior al padding de la seccion y
   al padding superior de la siguiente: tres espacios apilados en la costura. */
.caso__acto:last-child { margin-bottom: 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: .1em;
  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);
  cursor: zoom-in;
  touch-action: manipulation;            /* mata el retardo del doble toque */
  -webkit-tap-highlight-color: transparent;
  /* Sin sombra: el unico gesto al pasar por encima es que la pieza se acerca.
     Se listan las propiedades, nunca `all`. */
  transition: transform .45s cubic-bezier(.22,.61,.36,1), border-color .3s ease;
}
.caso__marco img { display: block; width: 100%; height: auto; }
.caso__marco:hover, .caso__marco:focus-visible { transform: translateY(-4px) scale(1.012); }
.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 { border: 1px solid var(--caso-linea); }
.caso__bento .caso__marco:hover, .caso__bento .caso__marco:focus-visible {
  border-color: var(--caso-acento);
}

/* --- Verticales (Historias 9:16) ------------------------------------------
   Cuatro columnas en escritorio, dos en móvil. Agrupa las piezas verticales
   (historias de Instagram, formato 9:16) en una grilla armónica. */

.caso__verticales {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.6rem, 1.4vw, 1rem);
  margin: 0 0 clamp(1.5rem, 3.5vw, 2.25rem);
  padding: 0;
  list-style: none;
}
.caso__verticales li { margin: 0; }
@media (min-width: 720px) {
  .caso__verticales { grid-template-columns: repeat(4, 1fr); }
}
.caso__verticales .caso__marco { border: 1px solid var(--caso-linea); }
.caso__verticales .caso__marco:hover, .caso__verticales .caso__marco:focus-visible {
  border-color: var(--caso-acento);
}

/* --- Redes: bento primero, texto al costado ------------------------------
   El texto NO va arriba en una franja: se mete en el espacio que sobra al lado
   del mosaico. Asi la seccion arranca con imagen y no con parrafo.

   El orden del DOM es bento -> texto, igual que el orden visual en las dos
   disposiciones. Se podria poner el texto primero y moverlo con `order`, pero
   entonces el recorrido con teclado no coincidiria con lo que se ve. */

.caso__reparto { display: grid; gap: clamp(1.5rem, 3.5vw, 2.75rem); }
@media (min-width: 1000px) {
  .caso__reparto {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    align-items: center;
  }
}
.caso__reparto .caso__intro { max-width: none; }

/* --- 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; }
  /* El WebP animado del visor es un bucle de 9,6 s. Un bucle decorativo es
     justo lo que esta preferencia existe para apagar, y un WebP no se puede
     pausar por CSS: se cambia por el fotograma estatico. Lo hace caso-base.js. */
  .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;
}

/* Encuadre parejo: las dos piezas ocupan la misma caja aunque no tengan la
   misma proporcion. `contain` centra y deja aire a los lados en vez de
   recortar — la pieza se sigue viendo entera, que es lo que importa en un
   portafolio. El 3/4 es la proporcion exacta del afiche, asi que ese llena la
   caja y el pendon (1:2) queda centrado. */
.caso__marco--encuadre { aspect-ratio: 3 / 4; }
.caso__marco--encuadre picture { display: block; height: 100%; }
.caso__marco--encuadre img {
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* --- 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(1.5rem, 3.5vw, 2.25rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.6rem);
  border-top: 1px solid var(--caso-linea);
}
.caso__nota-titulo {
  margin: 0 0 .35rem;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--caso-acento);
}
.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 --------------------------------------------------------------- */

/* El cierre es la frase y nada mas: sin regla, sin rotulo, centrada. La regla
   partia la seccion justo donde se busca que el ojo aterrice. */
.caso__cierre {
  margin: clamp(2.5rem, 5.5vw, 4rem) auto 0;
  max-width: 34ch;
  text-align: center;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -.015em;
  text-wrap: balance;         /* sin viudas: la frase parte donde tiene sentido */
  color: var(--caso-tinta);
}

}