/* ============================================================
   APREU — Secciones del PAA  |  Interius
   ============================================================ */

/* --- Variables de diseño ---
   El fondo de sección, título, subtítulo, acento, borde de tarjeta y fondo
   del ejemplo los sobreescribe el style inline de module.html con los
   campos de color de HubSpot. Cambiar aquí solo afecta el fallback. */
.asp {
  --asp-max-width: 1200px;           /* Ancho máximo del contenido */
  --asp-radius-card: 14px;           /* Radio de las tarjetas */
  --asp-radius-example: 10px;        /* Radio de la caja "Ejemplo de reactivo" */
  --asp-gap: 24px;                   /* Separación entre tarjetas del grid */
  --asp-font-heading: 'Zilla Slab', Georgia, serif; /* Título de sección y de cada tarjeta */
  --asp-font-body: 'Roboto', Arial, sans-serif;     /* Subtítulo, descripción y ejemplo de reactivo */
  --asp-title-color: #2A2622;        /* Color del título de cada tarjeta */
  --asp-desc-color: #6B6459;         /* Color de la descripción de cada tarjeta */
  --asp-example-text-color: #2A2622; /* Color del texto del ejemplo de reactivo */
  --asp-transition: border-color .2s ease; /* Solo color — nunca movimiento, según estándar del proyecto */
}

/* === Aislamiento del tema HubSpot ===
   Neutraliza estilos que el tema del portal suele imponer sobre
   h2/h3/p/div/span; los valores reales van en las reglas de abajo. */
.asp,
.asp *,
.asp *::before,
.asp *::after {
  box-sizing: border-box;
}

:where(.asp h2, .asp h3, .asp p, .asp div, .asp span) {
  margin: 0;
  padding: 0;
  border: none;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
  text-decoration: none;
  letter-spacing: normal;
  text-transform: none;
}

/* --- Sección --- */
.asp {
  background: var(--asp-bg, #ffffff);
  font-family: var(--asp-font-body);
}

/* Ritmo vertical unificado (2026-09-18): los cuatro módulos de esta página
   usan el MISMO padding vertical (56px desktop / 48px tablet / 40px mobile),
   así la separación entre secciones es siempre la misma. Antes cada módulo
   traía el suyo (96/64, 32/96, 64/96, 80/80), y los huecos entre secciones
   caían en 96px, 160px y 176px según el par — un ritmo sin sistema que se
   notaba como secciones "sueltas". Bajado de 80/64/48 a 56/48/40 (2026-09-18)
   porque el aire entre secciones se sentía excesivo. Si se cambia aquí,
   cambiarlo en los cuatro. */
.asp__inner {
  max-width: var(--asp-max-width);
  margin: 0 auto;
  padding: 56px 48px; /* Ver nota de ritmo unificado arriba */
}

/* --- Header: título + subtítulo, centrados --- */
.asp__header {
  text-align: center;
  margin-bottom: 40px;
}

.asp__heading {
  font-family: var(--asp-font-heading) !important;
  /* clamp en vez de 40px fijo: en móvil 40px hacía que títulos como
     "Secciones del examen PAA" se partieran dejando una palabra sola en la
     última línea. Baja hasta 28px en pantallas chicas y sube a 40px en
     desktop, siguiendo el mismo patrón que .aqp__heading. */
  font-size: clamp(28px, 4.5vw, 40px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--asp-heading-color, #FF5900) !important;
  margin-bottom: 10px !important;
}

.asp__subheading {
  font-family: var(--asp-font-body) !important;
  font-size: 15px;
  color: var(--asp-subheading-color, #5B554D) !important;
}

/* --- Grid de tarjetas ---
   3 columnas fijas en desktop: si el editor agrega más tarjetas con el
   repetidor, simplemente bajan a una nueva fila en vez de encogerse. */
/* `grid-template-rows: auto auto 1fr` define las tres bandas que las tarjetas
   heredan con subgrid: título, descripción y ejemplo. La tercera es 1fr para
   que la caja de ejemplo absorba el espacio sobrante y todas terminen abajo.
   `row-gap: 0` porque la separación interna de cada tarjeta la da su padding,
   no el gap del grid. */
.asp__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: var(--asp-gap);
  row-gap: 0;
}

/* La tarjeta usa un grid de 3 filas (título / descripción / ejemplo) que
   hereda las filas del grid exterior con `subgrid`. Así las tres tarjetas
   comparten las MISMAS líneas de fila: los títulos arrancan parejos, las
   descripciones ocupan la misma banda y las cajas "Ejemplo de reactivo"
   quedan alineadas entre sí aunque los textos midan distinto (3, 5 y 4
   líneas en el copy real).
   Con flex + `margin-top:auto` solo se alineaba el BORDE INFERIOR de las
   cajas; como cada caja tiene distinto alto, sus bordes superiores seguían
   sin coincidir, que es lo que se veía desalineado.
   Fallback: si el navegador no soporta subgrid, la tarjeta se comporta como
   una columna normal (ver el @supports de abajo). */
.asp__card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  border: 1px solid var(--asp-card-border, #EFE9E1);
  border-radius: var(--asp-radius-card);
  padding: 28px;
  transition: var(--asp-transition);
}

.asp__card:hover,
.asp__card:focus-within {
  border-color: var(--asp-accent, #FF5900); /* Solo cambio de color, sin mover ni escalar */
}

.asp__card-title {
  font-family: var(--asp-font-heading) !important;
  font-size: 19px;
  font-weight: 800;
  color: var(--asp-title-color) !important;
  margin-bottom: 10px !important;
}

/* section_description es un campo richtext: HubSpot lo envuelve en su propio
   <p> interno, por eso .asp__card-desc p se declara aparte con !important. */
.asp__card-desc,
.asp__card-desc p {
  font-family: var(--asp-font-body) !important;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--asp-desc-color) !important;
}

.asp__card-desc {
  margin-bottom: 16px !important; /* Separación mínima con la caja de ejemplo cuando la descripción es la más larga de la fila */
}

.asp__card-desc p + p {
  margin-top: 8px !important;
}

/* Fallback para navegadores sin subgrid (Chrome <117, Safari <16): la tarjeta
   vuelve a ser una columna flex. Las cajas no quedan perfectamente alineadas
   entre sí, pero el bloque se ve correcto y nada se rompe. */
@supports not (grid-template-rows: subgrid) {
  .asp__grid { grid-template-rows: none; }
  .asp__card { display: flex; flex-direction: column; grid-row: auto; }
  .asp__example { margin-top: auto; }
}

/* --- Caja "Ejemplo de reactivo" (solo se renderiza si la tarjeta tiene example_text) --- */
.asp__example {
  align-self: start; /* La caja arranca al inicio de su banda de subgrid — es lo que alinea el borde SUPERIOR de las tres entre sí */
  background: var(--asp-example-bg, #F5EDE4);
  border-radius: var(--asp-radius-example);
  padding: 16px;
}

.asp__example-label {
  font-family: var(--asp-font-body) !important;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--asp-accent, #FF5900) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px !important;
}

.asp__example-text,
.asp__example-text p {
  font-family: var(--asp-font-body) !important;
  font-size: 13px;
  line-height: 1.6;
  color: var(--asp-example-text-color) !important;
}

.asp__example-text p + p {
  margin-top: 8px !important;
}

/* --- Estado vacío (sin tarjetas configuradas) --- */
.asp__empty {
  text-align: center;
  font-size: 15px;
  color: #777777;
  padding: 24px 0;
}

/* ============================================================
   Tablet  768px – 1023px
   ============================================================ */
@media (max-width: 1023px) {
  .asp__inner { padding: 48px 32px; }
  .asp__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Mobile  < 768px  →  una columna
   ============================================================ */
@media (max-width: 767px) {
  .asp__inner { padding: 40px 20px; }
  .asp__header { margin-bottom: 28px; }
  .asp__grid { grid-template-columns: 1fr; gap: 16px; }
  .asp__card { padding: 24px; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .asp__card {
    transition: none !important;
  }
}