/** ==========================================================================
 * Áreas — tipografía sobre el sistema 2026
 *
 * Plantillas: landing_area.php («Áreas Automáticas») y pagina_completa_areas.php
 * («Areas»). Ambas emiten #Content.AREAS. La cabecera de la primera es el
 * componente AreaIntro y tiene su propia hoja (css/bloques/area-intro.css).
 *
 * Primera plantilla migrada a la escala de Figma. Traduce cada elemento a uno
 * de los ocho estilos Global-*, componiendo solo tokens: aquí no hay ni un px
 * suelto ni un @media, porque el responsive lo resuelven los propios tokens
 * al redefinirse por breakpoint en cei-tokens.css.
 *
 * FICHERO DE TRANSICIÓN. Existe porque las reglas que pisa son genéricas
 * (h1, h2, h4, y selectores con #Content) y todavía las comparten otras
 * plantillas sin migrar. Cuando todas lo estén, estas reglas desaparecen y su
 * sitio lo ocupan las clases .Global-* puestas en el marcado.
 *
 * La especificidad está calculada para ganar a la regla que pisa en cada caso,
 * no más: por eso el prefijo #Content.AREAS y no !important.
 * ========================================================================== */

/* Título de página. Figma reserva Size-95 para lemas y cifras grandes, así que
   el título usa la escala de título grande, no la especial. Antes: 55px/600. */
#Content.AREAS h1 {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-45);
  /* Excepcion temporal al Weight-regular de Figma, ver cei-tokens.css */
  font-weight: var(--Font-Weight-h1-temporal);
  line-height: var(--Font-Line-height-100);
  letter-spacing: var(--Font-Letter-spacing-2);
}

/* La cabecera de una pagina de area es el componente AreaIntro, con su hoja en
   css/bloques/area-intro.css: la rejilla, el panel de la entradilla con el color
   de cada area, el listado de tipos y la imagen. */

/* Metadatos de las tarjetas de profesor: duración y horario. Antes: 18px/500. */
#Content.AREAS .meta_profe p.mon {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  line-height: normal;
  letter-spacing: var(--Font-Letter-spacing-0);
}

/*
 * En la tarjeta de curso, duración y asistencia van AL MISMO TAMAÑO que la
 * modalidad, las certificaciones y el visado: letra pequeña, Size-14 (Eduardo,
 * 21/09/2026). Iban a Size-19 —el valor del Figma para estos dos metadatos— y
 * en la tarjeta se leían como un segundo título junto a lo demás en 14. Es una
 * excepción pedida al Figma; la de profesor conserva su 19 arriba.
 */
#Content.AREAS .area_curso .meta_relacionados p.mon {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-14);
  font-weight: var(--Font-Weight-400);
  line-height: normal;
  letter-spacing: var(--Font-Letter-spacing-2);
}

/*
 * Las esquinas de la tarjeta de area van AQUI, sobre la imagen, y no sobre el
 * .swiper-slide.
 *
 * Estuvieron en una regla compartida que redondeaba el slide entero, pero
 * .swiper-slide es la clase del carrusel de Swiper y la usa medio sitio: de
 * paso le cambio el radio a la landing de formaciones, que tenia el suyo.
 * Puesto sobre la imagen, el radio solo afecta a lo que se ve redondeado —la
 * foto— y el resto de la tarjeta queda libre.
 *
 * El display: block es lo que hace que el recorte case: un <img> en linea deja
 * el hueco del descendiente debajo y la esquina inferior no coincide.
 */
#Content.AREAS .swiper-slide picture,
#Content.AREAS .swiper-slide img.wp-post-image {
  display: block;
  border-radius: var(--Global-Radio-Tarjeta);
  overflow: hidden;
}

/* El <picture> redondea, y la imagen de dentro tambien: si solo lo hace el
   contenedor, un <img> sin recorte asoma por las cuatro esquinas. */
#Content.AREAS .swiper-slide picture img {
  border-radius: inherit;
  display: block;
}

/* Modalidad y certificaciones: letra pequeña. Antes: 16px/500 en SangBleu. */
#Content.AREAS .area_curso .meta_relacionados p.san,
#Content.AREAS .meta_profe p.san {
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-14);
  font-weight: var(--Font-Weight-400);
  line-height: normal;
  letter-spacing: var(--Font-Letter-spacing-2);
}

/* --------------------------------------------------------------------------
 * EL VISADO EN LA TARJETA (Eduardo, 21/09/2026)
 *
 * Solo en las landings con la casilla «Visado» marcada (metabox de la landing,
 * cei_landing_tarjeta_campos en functions.php) y solo en los cursos que lo
 * ofrecen: un rótulo «Visado disponible:» y debajo la lista de sedes, con
 * viñeta y sin enlaces. Va dentro del <a> de la tarjeta, en .meta_relacionados,
 * con la misma letra pequeña que la modalidad y las certificaciones (p.san).
 * -------------------------------------------------------------------------- */
#Content.AREAS .area_curso .meta_relacionados .Tarjeta-visadoTitulo {
  margin-top: calc(var(--Global-Espacio-TituloContenido) / 2);
}

#Content.AREAS .Tarjeta-visado {
  margin: calc(var(--Global-Espacio-TituloContenido) / 6) 0 0;
  padding: 0 0 0 1.1em;
  list-style: disc;
}

#Content.AREAS .Tarjeta-visado li {
  margin: 0 0 calc(var(--Global-Espacio-TituloContenido) / 6);
  padding: 0;
  /* La viñeta se decide en el <li>, no en el <ul>: el tema pone list-style: none
     a los li y sin esto la lista salía sangrada pero sin punto. */
  list-style: disc;
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-14);
  font-weight: var(--Font-Weight-400);
  line-height: normal;
  letter-spacing: var(--Font-Letter-spacing-2);
  color: var(--Global-Color-Black);
}

/* El tema pinta sus propias viñetas con ::before en algunas listas; aquí manda la del navegador. */
#Content.AREAS .Tarjeta-visado li::before {
  content: none;
}