/* ============================================================
   Neurya · casos.css
   Tarjetas de caso de éxito: foto a sangre, la frase arriba y
   el logo del cliente abajo. Se usa en la Home y en /casos/.

   Por qué un archivo y no estilos en línea, como el resto del
   sitio: estas tarjetas necesitan media queries, :hover,
   scroll-snap y pseudo-elementos. Nada de eso se puede escribir
   en un atributo style. Mismo patrón que diagnostico.css.

   Las clases van con prefijo `nc-` a propósito: NO se reusan
   .r-card ni .r-grid, que ya traen su propio hover (elevar +
   borde cyan) y su propio apilado en móvil desde animations.css
   y responsive.css. Aquí el hover es otro y el móvil es carrusel.
   ============================================================ */

/* ---------- Rejilla (escritorio) ---------- */

/* auto-fit y no un número fijo de columnas: la sección se quedó en tres casos
   al retirarse Henniges, y con `repeat(4, 1fr)` la cuarta columna quedaba vacía
   a la derecha. Así la rejilla se acomoda a los casos que haya, sin tocar CSS
   cuando entre o salga uno. */
.nc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

/* ---------- La tarjeta ---------- */

.nc-card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  margin: 0;
  text-decoration: none;
  /* Color de respaldo mientras la foto carga: el navy de la marca,
     no blanco, para que el texto blanco nunca quede sobre claro. */
  background: var(--tinta);
  isolation: isolate;
}

.nc-card > .nc-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Los dos velos.

   No son decoración: sin ellos el texto no se lee. Las cuatro fotos
   vienen con la parte de arriba despejada —cielo o pared— justo donde
   va la frase, y ahí la luminancia medida llega a 241-255 sobre 255.
   Texto blanco sobre eso da un contraste de ~1.2:1. Con el velo de
   arriba al 72% la zona baja a ~70 y el contraste pasa de 4.5:1, que
   es lo que pide WCAG AA para texto normal.

   El de abajo es para el logo, que también viene en blanco (medidos:
   entre 202 y 251 de 255) y cae sobre piso o mesa claros.

   El color es var(--tinta) (#0A0E1A), el navy de la marca, en vez de
   negro puro: sobre las fotos frías del set se ve como sombra y no
   como una mancha gris. */
.nc-card::before,
.nc-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

/* El de arriba se mantiene casi plano hasta poco más de la mitad y solo
   después cae. Un gradiente que se desvanece antes deja la última línea de las
   frases largas —la de Henniges ocupa cinco en la Home— con apenas 18% de velo
   encima, que es donde volvía a perderse. En el 48% de la altura, que es donde
   cae esa quinta línea, el velo va al 58%: sobre el píxel más claro medido en
   el set (255) eso deja el fondo en 107 y el contraste contra el texto blanco
   en 5.3:1, arriba del 4.5:1 que pide WCAG AA. */
.nc-card::before {
  top: 0;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(10, 14, 26, 0.76) 0%,
    rgba(10, 14, 26, 0.70) 26%,
    rgba(10, 14, 26, 0.58) 48%,
    rgba(10, 14, 26, 0.22) 70%,
    rgba(10, 14, 26, 0) 88%
  );
}

.nc-card::after {
  bottom: 0;
  height: 42%;
  background: linear-gradient(
    0deg,
    rgba(10, 14, 26, 0.62) 0%,
    rgba(10, 14, 26, 0.26) 45%,
    rgba(10, 14, 26, 0) 100%
  );
}

/* ---------- La frase ---------- */

.nc-txt {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  margin: 0;
  padding: 26px 26px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--blanco);
  text-wrap: balance;
}

/* ---------- El logo del cliente ---------- */

/* Los cuatro logos tienen proporciones muy distintas (de 3.2:1 a
   6.6:1). Con una altura fija se verían de anchos disparejos; con un
   ancho fijo, de alturas disparejas. Se topan las dos medidas y
   object-fit reparte: así ninguno domina la fila. */
.nc-logo {
  position: absolute;
  right: 22px;
  bottom: 20px;
  z-index: 2;
  width: auto;
  height: auto;
  max-width: 132px;
  max-height: 30px;
  object-fit: contain;
  object-position: right bottom;
}

/* ---------- La flecha ---------- */

/* Aparece ahora que la tarjeta lleva a algún lado. Mientras no hubo páginas de
   caso no estuvo, para no prometer un clic que no existía. */
.nc-flecha {
  position: absolute;
  top: 24px;
  right: 22px;
  z-index: 2;
  width: 20px;
  height: 20px;
  color: var(--blanco);
  opacity: 0.85;
}

/* El texto de la tarjeta le deja sitio a la flecha para no pasarle por debajo. */
.nc-txt { padding-right: 56px; }

/* El foco de teclado va en la tarjeta entera: es un solo enlace. */
.nc-card:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .nc-flecha { transition: transform 0.3s var(--ease-out), opacity 0.3s; }

  @media (hover: hover) and (pointer: fine) {
    .nc-card:hover .nc-flecha { transform: translate(3px, -3px); opacity: 1; }
  }
}

/* ---------- Movimiento ---------- */

@media (prefers-reduced-motion: no-preference) {
  .nc-card > .nc-foto {
    transition: transform 0.65s var(--ease-out);
  }

  /* Solo donde hay cursor de verdad: en touch, :hover se queda
     pegado después del toque y la foto se queda acercada. */
  @media (hover: hover) and (pointer: fine) {
    .nc-card:hover > .nc-foto {
      transform: scale(1.06);
    }
  }
}

/* ---------- Tablet y móvil: carrusel ---------- */

/* Debajo de 1100px las cuatro tarjetas cuadradas ya no caben sin
   encogerse hasta que la frase no se lee. En vez de apilarlas —que
   deja una columna de cuatro cuadrados gigantes— se pasan a carrusel
   con freno por tarjeta. */
@media (max-width: 1099px) {
  .nc-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Sangra hasta el borde de la pantalla, pero la primera tarjeta
       sigue alineada con el texto de la sección. */
    margin-inline: -32px;
    padding-inline: 32px;
    padding-bottom: 14px;
    scroll-padding-inline: 32px;
    scrollbar-width: thin;
    scrollbar-color: rgba(10, 14, 26, 0.28) transparent;
    /* Sin esto, el zoom del hover recorta contra el contenedor. */
    -webkit-overflow-scrolling: touch;
  }

  .nc-grid > .nc-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
  }

  /* El carrusel se recorre con las flechas del teclado, así que
     tiene que poder recibir el foco y mostrarlo. */
  .nc-grid:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 4px;
    border-radius: 8px;
  }
}

@media (max-width: 760px) {
  .nc-grid {
    margin-inline: -20px;
    padding-inline: 20px;
    scroll-padding-inline: 20px;
    gap: 12px;
  }

  .nc-grid > .nc-card {
    flex-basis: 78vw;
    max-width: 320px;
  }

  .nc-txt {
    padding: 20px 46px 0 20px;
    font-size: 17px;
  }

  .nc-flecha { top: 19px; right: 18px; width: 18px; height: 18px; }

  .nc-logo {
    right: 18px;
    bottom: 16px;
    max-width: 112px;
    max-height: 26px;
  }
}

/* ============================================================
   Página de un caso · /casos/<slug>/
   El hero repite la tarjeta del listado a tamaño completo: la
   misma foto, el mismo velo, el mismo logo abajo. Quien hace
   clic aterriza en algo que reconoce.
   ============================================================ */

.nc-hero {
  position: relative;
  overflow: hidden;
  background: var(--tinta);
  isolation: isolate;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
}

.nc-hero-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position lo pone cada página: el sujeto de cada foto está a una
     altura distinta y el hero es una banda ancha sobre una imagen cuadrada. */
  z-index: 0;
}

/* El velo del hero es más suave que el de la tarjeta, a propósito: aquí la
   foto ocupa toda la pantalla y es parte de lo que se cuenta, así que tiene
   que verse. Lo que aquí protege la lectura es el reparto entre los dos: el
   velo deja la banda visible de las cuatro fotos entre 93 y 118 sobre 255
   —medido: sus medias van de 154 a 215— y la sombra del texto se encarga de
   los picos sueltos de 255 que un velo plano solo podría cubrir apagando la
   foto entera. */
.nc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(10, 14, 26, 0.42) 0%,
    rgba(10, 14, 26, 0.50) 35%,
    rgba(10, 14, 26, 0.60) 72%,
    rgba(10, 14, 26, 0.74) 100%
  );
}

/* Velo local, solo detrás del bloque de texto.

   El lineal de arriba es parejo en todo el ancho, y con las fotos más claras
   del set —la de Coca-Cola mide 215 de media en la banda visible— no alcanzaba
   sin apagar la foto entera. Este cae donde está el texto y se desvanece hacia
   los lados, así que la parte de la foto que se mira sigue limpia.

   El centro es 50% porque el contenedor del hero está centrado: a cualquier
   ancho de pantalla, el bloque de texto queda debajo de esta elipse. */
.nc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 820px 400px at 50% 46%,
    rgba(10, 14, 26, 0.46) 0%,
    rgba(10, 14, 26, 0.24) 58%,
    rgba(10, 14, 26, 0) 80%
  );
}

/* La sombra va en el texto y no en más velo: así la foto se conserva. */
.nc-hero-eyebrow,
.nc-hero-h1,
.nc-hero-bajada {
  text-shadow: 0 1px 2px rgba(10, 14, 26, 0.6), 0 2px 26px rgba(10, 14, 26, 0.85);
}

/* El logo del cliente es blanco sobre la parte baja de la foto, que es la más
   cargada de detalle. */
.nc-hero-logo {
  filter: drop-shadow(0 2px 10px rgba(10, 14, 26, 0.8));
}

/* Todo el padding vive aquí, incluido el lateral: el contenedor ya no lo trae
   en línea. Antes sí, y un `padding: 0px 32px` en el atributo style le ganaba
   al padding-top/bottom de esta regla, así que el logo del cliente terminaba
   pegado al borde de abajo del hero. */
.nc-hero-txt {
  position: relative;
  z-index: 2;
  padding: 76px 32px 48px;
}

.nc-hero-eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}

.nc-hero-h1 {
  margin: 14px 0 0;
  max-width: 17ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--blanco);
  text-wrap: balance;
}

/* La segunda mitad del titular es la condición o el matiz —"y aceptar o
   rechazar sigue siendo decisión de una persona"—: pesa menos que la cifra. */
.nc-hero-cola {
  display: block;
  margin-top: 6px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--hielo);
}

.nc-hero-bajada {
  margin: 20px 0 0;
  max-width: 62ch;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-body);
}

.nc-hero-logo {
  display: block;
  margin-top: 32px;
  width: auto;
  height: auto;
  max-width: 150px;
  max-height: 34px;
  object-fit: contain;
  object-position: left center;
}

/* ---------- Qué ejecuta el sistema y qué decide la persona ---------- */

.nc-reparto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 28px;
}

.nc-reparto-col {
  padding: 20px 22px;
  border-radius: 12px;
  background: var(--blanco);
  border: 1px solid var(--linea);
}

/* La columna de la persona va marcada: es el punto del formato —lo que la
   automatización NO se llevó— y perderlo en dos cajas iguales sería perder
   el argumento. */
.nc-reparto-persona {
  border-color: rgba(33, 83, 130, 0.35);
  background: linear-gradient(180deg, rgba(33, 83, 130, 0.05) 0%, var(--blanco) 60%);
}

/* ---------- La tabla de números ---------- */

.nc-tabla-caja {
  margin-top: 28px;
  overflow-x: auto;
}

.nc-tabla {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}

.nc-tabla thead th {
  text-align: left;
  padding: 0 14px 10px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-3);
  border-bottom: 1px solid var(--linea);
}

.nc-tabla tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--tinta);
}

.nc-tabla td,
.nc-tabla tbody th {
  padding: 14px 14px 14px 0;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}

.nc-tabla td:last-child,
.nc-tabla thead th:last-child {
  padding-right: 0;
}

/* Sin esto la columna se encoge a lo que le dejan las otras dos y parte
   "76.2 %" entre el número y el signo. Es un mínimo y no un nowrap porque
   algunos valores son una frase ("alerta con su costo en pesos") y esos sí
   deben poder envolver. */
.nc-tabla td[data-col="hoy"] { min-width: 124px; }
.nc-tabla tbody th { width: 30%; }

/* La cifra que sostiene el caso. Las demás filas son contexto. */
.nc-fuerte {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--azul-acero);
}

/* [medido] y [estimado] van distinguidos a propósito: el documento de origen
   etiqueta cada cifra y mezclarlos sería inflar el caso. */
.nc-etiqueta {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--papel);
  border: 1px solid var(--linea);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--tinta-3);
  white-space: nowrap;
}

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

.nc-cierre {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Tablet y móvil ---------- */

@media (max-width: 860px) {
  .nc-reparto { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nc-hero { min-height: 360px; }
  .nc-hero-txt { padding: 56px 20px 36px; }
  .nc-hero-h1 { font-size: 32px; }
  .nc-hero-cola { font-size: 21px; }
  .nc-hero-bajada { font-size: 16.5px; }

  /* La tabla se vuelve una lista de fichas: cuatro columnas en 360px no se
     leen, y un scroll horizontal dentro de la página se pierde. Cada celda
     lleva su encabezado delante, puesto desde el atributo data-col. */
  .nc-tabla-caja { overflow-x: visible; }
  .nc-tabla, .nc-tabla tbody, .nc-tabla tr, .nc-tabla tbody th, .nc-tabla td { display: block; width: 100%; }
  .nc-tabla thead { display: none; }

  .nc-tabla tr {
    padding: 16px 0;
    border-bottom: 1px solid var(--linea);
  }

  .nc-tabla tbody th {
    padding: 0 0 10px;
    border-bottom: none;
    font-family: var(--font-display);
    font-size: 16px;
  }

  .nc-tabla td {
    padding: 2px 0;
    border-bottom: none;
  }

  .nc-tabla td::before {
    content: attr(data-col) ": ";
    font-weight: 600;
    color: var(--tinta-3);
  }
  .nc-tabla td[data-col="antes"]::before { content: "Antes: "; }
  .nc-tabla td[data-col="hoy"]::before { content: "Hoy: "; }
  .nc-tabla td[data-col="tipo"]::before { content: ""; }
  .nc-tabla td[data-col="tipo"] { padding-top: 8px; }

  .nc-cierre > .r-btn { width: 100%; }
}

/* Los encabezados de la tabla en móvil los pone el CSS, así que también hay
   que traducirlos aquí: el `content` de un ::before no lleva data-en. */
@media (max-width: 760px) {
  :lang(en) .nc-tabla td[data-col="antes"]::before { content: "Before: "; }
  :lang(en) .nc-tabla td[data-col="hoy"]::before { content: "Today: "; }
}