/* ==========================================================================
   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;
  /* Centrado. El navegador ya centra un <dialog> modal con `margin: auto`
     en su hoja de usuario, pero eso lo pisa cualquier reset de autor del
     tipo `* { margin: 0 }` — y el sitio tiene justo ese reset en
     00 Home/styles.css. Resultado: el visor abria pegado arriba a la
     izquierda, con media pantalla vacia al lado (ago 2026). Se declara
     explicito en vez de depender del navegador. */
  margin: auto;
  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;
}
/* El pie de foto del visor se retiro (ago 2026): ampliada, la imagen se
   explica sola. Los figcaption de la reja SI se quedan — son parte del
   diseno de cada caso. El nombre accesible del dialogo lo pone ahora el
   JS con aria-label, ver caso-base.js. */

/* Anclado al VIEWPORT, no al dialogo. Estaba en `position: absolute` con
   `top: -2.6rem`, o sea flotando encima del borde superior de la imagen —
   se veia bien en una pantalla alta, pero en una baja el dialogo sube hasta
   pegarse al borde y el boton se salia de la pantalla: a 1280x560 quedaba
   en y = -5px, sin ninguna forma visible de cerrar (ago 2026). Con `fixed`
   se queda en la esquina pase lo que pase con el alto de la imagen. */

.caso-visor__cerrar {
  position: fixed;
  top: .75rem; right: .75rem;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  font-size: 1.4rem; line-height: 1;
  color: #fff;
  /* Opaco de verdad: antes era blanco al 12% y sobre una imagen clara —
     el muro de PropLegal, sin ir mas lejos— desaparecia. */
  background: rgb(20 22 26 / .72);
  border: 0; border-radius: 50%;
  cursor: pointer;
}
.caso-visor__cerrar:hover,
.caso-visor__cerrar:focus-visible { background: rgb(20 22 26 / .92); }

/* --- 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;
  }
}