/** ==========================================================================
 * Componente «AreasTarjetas» — las siete areas, en tarjetas de color
 *
 *   <ul class="AreasTarjetas">
 *     <li class="AreasTarjetas-item">
 *       <a class="AreasTarjetas-tarjeta AreasTarjetas-tarjeta--grafico">
 *         <span class="AreasTarjetas-nombre Global-p">
 *
 * Nacio en la Home v2 (.HomeAreas) y se saca aqui para poder usarlo en mas
 * sitios: el primero, la pagina de estudios seleccionados cuando esta vacia.
 * Cuadradas y del color de su area, con el nombre al pie; siete columnas en
 * escritorio y auto-fit por debajo, que es lo que evita una fila final con una
 * sola tarjeta estirada. Lo encola cei_bloque_areas() al pintarse.
 * ========================================================================== */

/*
 * Una fila de tarjetas, no una rejilla que estire (Eduardo, 09/09/2026): las
 * tarjetas miden lo que miden y la fila termina donde termina la ultima. Antes
 * eran siete columnas iguales a todo el ancho y en pantallas grandes salian
 * cuadrados enormes que no se parecian al diseño.
 */
.AreasTarjetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Global-Espacio-TituloContenido);
  margin: 0;
  padding: 0;
  list-style: none;
}

.AreasTarjetas-item {
  margin: 0;
  flex: 0 0 auto;
}

/*
 * Verticales, como en el diseño: mas altas que anchas. 170 x 200 px (Eduardo,
 * 16/09/2026).
 *
 * Antes era una rampa fluida —`clamp(128px, 11.5vw, 176px)` con proporcion
 * 3:4— que solo llegaba a su maximo por encima de 1530px de ventana: en un
 * escritorio normal de 1200 la tarjeta salia de 138, y la medida del diseño no
 * se veia nunca. Ahora es fija, y del telefono se encarga la media query del
 * final, que las pone a dos por fila.
 */
.AreasTarjetas-tarjeta {
  position: relative;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  width: 170px;
  aspect-ratio: 17 / 20;
  padding: calc(var(--Global-Espacio-TituloContenido) / 2);
  border-radius: var(--Global-Radio-Tarjeta);
  background-color: var(--AreasTarjetas-color, var(--Global-Color-Grey));
  color: var(--Global-Color-Black);
  text-decoration: none;
  transition: transform 0.2s ease;
}

/*
 * La flecha de salida, arriba a la derecha.
 *
 * Es la MISMA flecha que la del resto de la web —la de la navegacion, la del
 * acordeon y la de las viñetas—, solo girada: el glifo hacia abajo de Inter
 * (U+2193 con el selector de variante U+FE0E, que evita que el sistema lo
 * pinte como emoji) rotado -135deg para que apunte arriba a la derecha. Antes
 * era U+2197, un glifo distinto con otro grosor y otra caja (Eduardo,
 * 10/09/2026). Toma el color de la tarjeta, que no siempre es negro.
 */
.AreasTarjetas-tarjeta::after {
  content: "\2193\FE0E";
  position: absolute;
  top: calc(var(--Global-Espacio-TituloContenido) / 2);
  right: calc(var(--Global-Espacio-TituloContenido) / 2);
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  line-height: 1;
  color: inherit;
  transform: rotate(-135deg);
  transform-origin: center center;
}

.AreasTarjetas-tarjeta:hover {
  transform: translateY(-4px);
}

.AreasTarjetas-tarjeta:hover .AreasTarjetas-nombre {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
 * LA FOTO DEL HOVER (Eduardo, 16/09/2026)
 *
 * La tarjeta pasa de color plano a foto al pasar por encima. La foto va debajo
 * de todo, tapando el color; encima queda un velo oscuro de abajo arriba para
 * que el nombre se lea sea cual sea la foto, y el nombre y la flecha se ponen
 * en blanco.
 *
 * Solo cuando HAY foto, y de eso se encarga el `:has()`: mientras no se suban
 * las imagenes, cei_bloque_areas no pinta ningun <img> y la tarjeta se comporta
 * exactamente como hasta hoy —ni velo, ni cambio de color—.
 *
 * El velo va en ::before porque ::after ya es la flecha.
 * -------------------------------------------------------------------------- */

/*
 * EL ORDEN DE LAS CAPAS, EXPLÍCITO (Eduardo, 16/09/2026).
 *
 * Los tres van `absolute` sin z-index y, con eso, quien pinta encima es quien
 * va después en el marcado: el ::before es el primer hijo, así que la foto —un
 * <img> que viene detrás— lo tapaba entero. El velo estaba ahí, a opacidad 1, y
 * no se veía; y el nombre, en blanco, caía sobre la foto a pelo.
 *
 * De abajo arriba: foto (0), velo (1), nombre y flecha (2).
 */
.AreasTarjetas-foto,
.AreasTarjetas-tarjeta::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.AreasTarjetas-foto {
  z-index: 0;
}

.AreasTarjetas-tarjeta::before {
  z-index: 1;
}

.AreasTarjetas-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * EL VELO, MEDIDO Y NO A OJO (Eduardo, 16/09/2026).
 *
 * Tres intentos, y los dos primeros por no medir:
 *
 *   1. `to top, .6 -> transparente al 55%`. Sobre una foto clara —el peor caso,
 *      una foto blanca— detras del nombre quedaba un 41% de negro: 2,94:1, o
 *      sea ilegible. Hace falta 0,54 de alfa para llegar al 4,5 de AA.
 *   2. Velo a toda la tarjeta, de 0,45 arriba a 0,80 abajo. Se leia (8,55:1)
 *      pero apagaba la foto entera, que es justo lo que no se queria.
 *   3. ESTE. El negro se queda DONDE ESTA EL TEXTO y suelta el resto: plano al
 *      0,65 hasta el 25% de abajo y limpio del todo a partir del 55%. Casi
 *      media tarjeta se ve sin filtro y el nombre sigue a 6,98:1.
 *
 * El nombre arranca al 17% contando desde abajo (medido), asi que cae dentro
 * del tramo plano: por eso el 0,65 se mantiene hasta el 25 y no antes.
 */
.AreasTarjetas-tarjeta::before {
  content: "";
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.65) 25%,
    rgba(0, 0, 0, 0) 55%
  );
}

/*
 * La flecha se queda sin velo debajo —el degradado ya no llega arriba— y sobre
 * una foto clara una flecha blanca desaparece. La sombra le hace de contorno:
 * no da un ratio medible como el texto, pero es lo que se usa para un icono
 * encima de una imagen que no controlamos. Solo cuando hay foto y solo al
 * pasar por encima; en reposo la tarjeta es color plano y no hace falta.
 */
.AreasTarjetas-tarjeta:has(.AreasTarjetas-foto):hover::after,
.AreasTarjetas-tarjeta:has(.AreasTarjetas-foto):focus-visible::after {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}

/* El nombre y la flecha, por encima de la foto y del velo. */
.AreasTarjetas-nombre {
  position: relative;
  z-index: 2;
}

.AreasTarjetas-tarjeta::after {
  z-index: 2;
}

.AreasTarjetas-tarjeta:hover .AreasTarjetas-foto,
.AreasTarjetas-tarjeta:focus-visible .AreasTarjetas-foto,
.AreasTarjetas-tarjeta:hover::before,
.AreasTarjetas-tarjeta:focus-visible::before {
  opacity: 1;
}

/*
 * Tinta blanca mientras se ve la foto. Sube a (0,3,0) —la clase, el :has() con
 * otra clase dentro y el :hover— para ganarle al `a:hover { color: black }`
 * suelto de style.css y a las reglas de las dos tarjetas oscuras de aqui abajo.
 */
.AreasTarjetas-tarjeta:has(.AreasTarjetas-foto):hover,
.AreasTarjetas-tarjeta:has(.AreasTarjetas-foto):focus-visible {
  color: var(--Global-Color-White);
}

.AreasTarjetas-tarjeta--grafico { --AreasTarjetas-color: var(--Area-Grafico-Secondary); }
.AreasTarjetas-tarjeta--tech { --AreasTarjetas-color: var(--Area-Tech-Primary); }
.AreasTarjetas-tarjeta--marketing { --AreasTarjetas-color: var(--Area-Marketing-Primary); }
.AreasTarjetas-tarjeta--audiovisual { --AreasTarjetas-color: var(--Area-Audiovisual-Primary); }
.AreasTarjetas-tarjeta--web { --AreasTarjetas-color: var(--Area-Web-Secondary); }
.AreasTarjetas-tarjeta--videojuegos { --AreasTarjetas-color: var(--Area-Videojuegos-Primary); }
.AreasTarjetas-tarjeta--arquitectura { --AreasTarjetas-color: var(--Area-Arquitectura-Primary); }

/*
 * Las dos tarjetas oscuras llevan el texto en blanco, tambien al pasar por
 * encima: style.css tiene un `a:hover { color: var(--Global-Color-Black) }` suelto —especificidad
 * (0,1,1)— que ganaba a la clase de la tarjeta —(0,1,0)— y las dejaba con el
 * nombre y la flecha en negro sobre el verde y el azul (Eduardo, 10/09/2026).
 * Se repite el color en los estados del enlace, que suben a (0,2,0), en vez de
 * poner un !important.
 */
.AreasTarjetas-tarjeta--tech,
.AreasTarjetas-tarjeta--tech:hover,
.AreasTarjetas-tarjeta--tech:focus,
.AreasTarjetas-tarjeta--tech:active,
.AreasTarjetas-tarjeta--videojuegos,
.AreasTarjetas-tarjeta--videojuegos:hover,
.AreasTarjetas-tarjeta--videojuegos:focus,
.AreasTarjetas-tarjeta--videojuegos:active {
  color: var(--Global-Color-White);
}

/* En movil, dos por fila y que llenen el ancho: siete tarjetas de 128px en un
   canal estrecho dejan una fila final coja. */
@media (max-width: 767.98px) {
  .AreasTarjetas {
    gap: calc(var(--Global-Espacio-TituloContenido) / 2);
  }

  .AreasTarjetas-item {
    flex: 1 1 calc(50% - var(--Global-Espacio-TituloContenido) / 4);
  }

  .AreasTarjetas-tarjeta {
    width: 100%;
  }
}