/* ==========================================================================
   Luna Terra — Sección de casos
   Brief de casos v1.0 + Manual de Marca v3.1
   ========================================================================== */

/* ---- Portada de la sección ---------------------------------------------- */

.portada-seccion { padding-block: calc(var(--alto-cabecera) + var(--e-8)) var(--e-8); }
.portada-seccion h1 { max-width: 16ch; margin-bottom: var(--e-5); }
.portada-seccion .entradilla { max-width: 56ch; }

/* ---- Rejilla de tarjetas ------------------------------------------------- */

.rejilla-casos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-5);
}

@media (max-width: 1000px) { .rejilla-casos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .rejilla-casos { grid-template-columns: 1fr; } }

/* Las tarjetas de una misma fila comparten altura: el enlace ocupa todo el ítem */
.rejilla-casos > li,
.otros-casos > li { display: flex; }

.tarjeta-caso {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--superficie-elevada);
  border: var(--borde);
  border-radius: var(--radio-tarjeta);
  padding: var(--e-6);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform var(--mov-control) var(--curva),
              border-color var(--mov-control) var(--curva),
              box-shadow var(--mov-control) var(--curva);
}

/* Hover: elevación de 4px como máximo y aumento de contraste del borde
   (brief visual §07). Nunca un simple cambio a cobre (Manual p.12). */
.tarjeta-caso:hover {
  transform: translateY(-4px);
  border-color: rgba(13, 27, 42, 0.30);
  box-shadow: var(--sombra);
}

/* La flecha aparece al pasar el cursor; el texto nunca se oculta ni se voltea
   la tarjeta (brief visual §07). En pantallas táctiles se muestra siempre. */
@media (hover: hover) {
  .tarjeta-caso .flecha {
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--mov-control) var(--curva),
                transform var(--mov-control) var(--curva);
  }
  .tarjeta-caso:hover .flecha,
  .tarjeta-caso:focus-visible .flecha {
    opacity: 1;
    transform: none;
  }
}

.tarjeta-caso__numero {
  font-family: var(--fuente-titulo);
  font-size: 1.75rem;          /* ≥24px: el cobre está autorizado (p.10) */
  color: var(--acento-linea);
  line-height: 1;
  margin-bottom: var(--e-4);
}

.tarjeta-caso h2 {
  font-size: var(--t-h3);
  margin-bottom: var(--e-3);
  text-wrap: balance;
}

.tarjeta-caso__resumen {
  color: var(--texto-suave);
  font-size: 1rem;
  margin-bottom: var(--e-5);
  flex-grow: 1;
}

/* Etiquetas de categoría: arena con texto azul noche = 10,14:1.
   En cobre a 13px darían 3,57:1 y quedarían fuera de norma. */
.categorias {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--e-5);
}

.categoria {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lt-azul-noche);
  background: var(--lt-arena);
  border-radius: 999px;
  padding: 5px var(--e-3);
}

.banda-oscura .categoria {
  background: rgba(245, 239, 230, 0.14);
  color: var(--texto-inverso);
}

/* ---- Portada de un caso -------------------------------------------------- */

/* La cabecera es fija: la portada reserva su altura. */
.caso-portada { padding-block: calc(var(--alto-cabecera) + var(--e-7)) var(--e-9); }
.caso-portada h1 { max-width: 20ch; margin-bottom: var(--e-5); }
.caso-portada__kicker {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-inverso-suave);
  margin-bottom: var(--e-6);
}
.caso-portada__migas {
  font-size: 0.8125rem;
  margin-bottom: var(--e-6);
}
.caso-portada__migas a { color: var(--texto-inverso-suave); }

.sello-confidencial {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  border: var(--borde-inverso);
  border-radius: 999px;
  padding: var(--e-2) var(--e-4);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-inverso-suave);
}

/* ---- Secuencia visible: contexto → … → evidencia ------------------------ *
 * Indicación 4 del brief: la secuencia debe permanecer visible.            */

.secuencia {
  position: sticky;
  top: var(--alto-cabecera);
  z-index: 30;
  background: var(--superficie-hundida);
  border-bottom: var(--borde);
}

.secuencia__lista {
  display: flex;
  gap: var(--e-1);
  overflow-x: auto;
  scrollbar-width: thin;
  padding-block: var(--e-3);
}

.secuencia__enlace {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--radio-boton);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-suave);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: color var(--mov-control) var(--curva),
              background-color var(--mov-control) var(--curva),
              border-color var(--mov-control) var(--curva);
}
.secuencia__enlace:hover { color: var(--texto); background: rgba(13, 27, 42, 0.06); }

/* El paso activo se marca con contraste y borde, no solo con color */
.secuencia__enlace[aria-current="true"] {
  color: var(--texto);
  background: var(--superficie-elevada);
  border-color: rgba(13, 27, 42, 0.22);
}

/* El índice va en borgoña, no en cobre: a 14px el cobre da 3,33:1 sobre esta
   superficie y el manual (p.10) reserva el cobre para títulos de 24px o más. */
.secuencia__indice {
  font-family: var(--fuente-titulo);
  font-size: 0.875rem;
  color: var(--texto-enfasis);
}

/* ---- Bloques de un caso -------------------------------------------------- */

.bloque { padding-block: var(--e-8); scroll-margin-top: calc(var(--alto-cabecera) + var(--e-8)); }
.bloque + .bloque { border-top: var(--borde); }

.bloque__cabecera { margin-bottom: var(--e-6); }
.bloque__cabecera h2 { max-width: 22ch; }

.bloque__texto { max-width: var(--ancho-lectura); }
.bloque__texto p + p { margin-top: var(--e-4); }

/* Lista de requisitos: rompe el muro de texto del apartado "Desafío" */
.requisitos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--e-3);
  margin-top: var(--e-6);
}

.requisito {
  background: var(--superficie-elevada);
  border: var(--borde);
  border-radius: var(--radio-tarjeta);
  padding: var(--e-5);
  font-size: 1rem;
  color: var(--texto-suave);
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
}

/* Curva de luna como viñeta: recurso gráfico del manual (p.13) */
.requisito::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: 50%;
  border: 2px solid var(--acento-linea);
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
}

/* Lista de componentes de la solución */
.componentes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--e-4) var(--e-6);
  margin-top: var(--e-6);
}

.componente {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding-bottom: var(--e-4);
  border-bottom: var(--borde);
  font-size: 1rem;
  color: var(--texto-suave);
}
.componente::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 1px;
  margin-top: 13px;
  background: var(--acento-linea);
}

/* ---- Banda de proceso (método Luna Terra) -------------------------------- */

.proceso {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--e-5);
  margin-top: var(--e-7);
}

.paso {
  border-top: 2px solid rgba(245, 239, 230, 0.22);
  padding-top: var(--e-4);
}

.paso__indice {
  font-family: var(--fuente-titulo);
  font-size: 2rem;            /* ≥24px: cobre autorizado */
  color: var(--acento-linea);
  line-height: 1;
  display: block;
  margin-bottom: var(--e-3);
}

.paso h3 {
  font-size: 1.25rem;
  margin-bottom: var(--e-2);
  color: var(--texto-inverso);
}

.paso p { font-size: 0.9375rem; color: var(--texto-inverso-suave); }

/* ---- Cita destacada ------------------------------------------------------ */

.cita {
  margin: 0;
  padding: var(--e-7) var(--e-7) var(--e-7) var(--e-6);
  background: var(--superficie-hundida);
  border-left: 3px solid var(--acento-linea);
  border-radius: 0 var(--radio-panel) var(--radio-panel) 0;
  max-width: 46ch;
}

.cita p {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.25;
  color: var(--texto);
}

/* ---- Evidencia ----------------------------------------------------------- */

.evidencia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e-3);
  margin-top: var(--e-6);
}

.evidencia li {
  background: var(--superficie-elevada);
  border: var(--borde);
  border-radius: var(--radio-tarjeta);
  padding: var(--e-4) var(--e-5);
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

/* Panel de confidencialidad / nota de alcance */
.nota-panel {
  margin-top: var(--e-6);
  background: var(--superficie-elevada);
  border: var(--borde-fuerte);
  border-radius: var(--radio-panel);
  padding: var(--e-6);
  max-width: var(--ancho-lectura);
}
.nota-panel .etiqueta { margin-bottom: var(--e-3); }
.nota-panel p { font-size: 0.9375rem; }

/* ---- Ranura de imagen ---------------------------------------------------- *
 * Las capturas censuradas todavía no existen. La maqueta está preparada
 * para recibirlas sin rediseñar: basta con descomentar la <figure>.        */

.figura { margin: var(--e-7) 0 0; }
.figura img {
  width: 100%;
  border: var(--borde);
  border-radius: var(--radio-tarjeta);
}
.figura figcaption {
  margin-top: var(--e-3);
  font-size: 0.8125rem;
  color: var(--texto-suave);
}

/* ---- Banda de cierre ----------------------------------------------------- */

.cierre { text-align: left; }
.cierre h2 { max-width: 24ch; margin-bottom: var(--e-5); }
.cierre__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-6);
}

/* ---- Navegación entre casos ---------------------------------------------- */

.otros-casos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--e-4);
  margin-top: var(--e-6);
}

/* ---- Franja de credenciales (componente para "Sobre") -------------------- */

.credenciales__cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--e-5);
  margin-top: var(--e-7);
}

.credencial {
  border-top: 2px solid rgba(245, 239, 230, 0.22);
  padding-top: var(--e-4);
}
.credencial strong {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--texto-inverso);
  line-height: 1.15;
  margin-bottom: var(--e-2);
}
.credencial span { font-size: 0.875rem; color: var(--texto-inverso-suave); }