/* ============================================================================
   CASOS — Proyectos propios, no casos de cliente.

   Decisión de fondo: la agencia todavía no tiene clientes, así que acá NO hay
   logos prestados ni métricas inventadas. Se muestra lo que construimos para
   operar nuestra propia agencia, etiquetado como tal. Dos de los cuatro se
   pueden probar sin salir de la página, que es mejor prueba que un logo.
   ========================================================================== */

.casos__grid {
  display: grid;
  /* Cards más anchas que las de servicios: acá hay descripción + datos.
     auto-fill por el mismo motivo que en servicios (ver servicios.css). */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: var(--sp-4);
}

/* ---- Card --------------------------------------------------------------- */

.caso {
  position: relative;
  overflow: hidden;              /* recorta el spotlight */
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
}

/* Spotlight que sigue al cursor, igual que en servicios. Las coordenadas las
   escribe js/modules/spotlight.js en --mx / --my. Sin JS no aparece y listo. */
.caso::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 0%),
    rgba(28, 231, 242, 0.07),
    transparent 62%
  );
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-soft);
  pointer-events: none;
}
.caso:hover::before { opacity: 1; }

/* ---- Cabecera: etiquetas ------------------------------------------------ */

.caso__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

/* "Proyecto propio" — la etiqueta de honestidad. Va en todas las cards a
   propósito: si alguien captura una sola, tiene que seguir siendo evidente
   que no es el trabajo de un cliente. */
.caso__badge {
  padding: 4px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.04);

  font-family: var(--font-mono);
  font-size: 0.6875rem;          /* 11px */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* El pilar al que pertenece el proyecto. En cyan: es la conexión visual
   con la sección de servicios. */
.caso__pilar {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--brand-cyan);
}

/* ---- Cuerpo ------------------------------------------------------------- */

.caso__title {
  font-size: var(--fs-xl);
  margin-top: var(--sp-1);
}

.caso__desc {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

/* ---- Fila de datos ------------------------------------------------------
   <dl> por semántica. Se invierte el orden visual (column-reverse) para que
   el número quede arriba y la etiqueta abajo: el lector de pantalla sigue
   leyendo "Peso total: 146 KB" en el orden correcto del DOM. */

.caso__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: auto;              /* empuja los datos al pie de la card */
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
}

.dato {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
}

.dato__valor {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.1;
  color: var(--text-primary);
  margin: 0;
}

.dato__label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ---- Pie: acción o estado ----------------------------------------------- */

.caso__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

/* Para los proyectos que NO se pueden probar desde acá: un estado, no un
   botón. Un botón que no lleva a ningún lado es peor que no tener botón. */
.caso__estado {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.caso__punto {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-cyan);
  box-shadow: var(--glow-cyan-sm);
  flex-shrink: 0;
}

/* Con cuatro cards la grilla cierra 2x2 en desktop y no queda ninguna
   huérfana en su propia fila. Si en algún momento se suma una quinta, hay que
   volver a mirar acá: cinco cards dejan un hueco abajo a la derecha. */

/* ---- Nota al pie de la sección -----------------------------------------
   Dice en una línea por qué no hay clientes acá. Mejor decirlo nosotros y
   en nuestros términos que dejar que el visitante lo note solo. */

.casos__nota {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-left: 2px solid var(--border-cyan);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(28, 231, 242, 0.04);

  font-size: var(--fs-sm);
  color: var(--text-secondary);
  max-width: 72ch;
}