/* Página de inicio. Se carga después de base.css y solo añade lo propio de esta página:
   portada con el video · rejilla de siete tarjetas de materiales · reproductor de muestras con ficha · campus ·
   sobre mí. Usa los tokens de base.css, así que sigue el tema claro u oscuro sin reglas propias. */

/* ---- Portada: texto a la izquierda y, desde 980 px, el video a la derecha. En pantallas menores el video va entre el
   título y la entradilla, para que se vea sin bajar: .portada-texto se disuelve y sus piezas van a la rejilla. ---- */
.portada-inicio { padding-block: clamp(36px, 6vw, 80px) clamp(44px, 6vw, 84px); overflow-x: clip; }
.portada-rejilla {
  display: grid; gap: clamp(18px, 2.4vw, 24px); grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "antetitulo" "titular" "video" "entradilla" "acciones";
}
.portada-texto { display: contents; }
.portada-texto > .antetitulo { grid-area: antetitulo; }
.portada-texto > .titular { grid-area: titular; }
.portada-texto > .entradilla { grid-area: entradilla; }
.portada-texto > .acciones { grid-area: acciones; }
.portada-inicio .titular { font-size: clamp(2.3rem, 1.5rem + 3.2vw, 3.75rem); max-width: 17ch; }
/* En el móvil el antetítulo no cabe en una línea: pasa a dos, el nombre arriba y la especialidad debajo, sin el punto
   medio al final de la primera y sin cortar «e-learning» por el guion */
.sin-corte { white-space: nowrap; }
@media (max-width: 459px) {
  .antetitulo-separador { display: block; width: 0; height: 0; overflow: hidden; }
}
@media (min-width: 980px) {
  .portada-rejilla {
    column-gap: clamp(40px, 5vw, 64px); grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr);
    grid-template-areas: "antetitulo video" "titular video" "entradilla video" "acciones video";
    grid-template-rows: auto auto auto 1fr;
  }
}

/* El video: pantalla con filete de tinta y la sombra rayada de las tarjetas, y detrás las rayas naranjas y azules
   del título de los videos, que se tienden de izquierda a derecha cuando entra (base/movimiento.md: ease-out fuerte,
   solo transform). Debajo, el título del video y los botones de sonido y pausa (inicio.js). */
.portada-visual { grid-area: video; align-self: center; position: relative; display: grid; gap: 18px; min-width: 0; }
.portada-visual::before {
  content: ""; position: absolute; left: -7%; right: -16%; top: 34%; height: 13%; z-index: -1;
  background: repeating-linear-gradient(to bottom, var(--tinta-naranja) 0 3px, transparent 3px 9px, var(--tinta-azul) 9px 12px, transparent 12px 18px);
  transform-origin: 0 50%; animation: rayas-tienden 700ms var(--ease-out) 120ms both;
}
@keyframes rayas-tienden { from { transform: scaleX(0); } }
.portada-marco { position: relative; isolation: isolate; margin-right: 8px; }
.portada-marco::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--radio); background: var(--rayas); transform: translate(8px, 8px); }
.portada-marco .pantalla { background: var(--papel-claro); }
.portada-video-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-top: 6px; }
.portada-video-ficha { display: grid; gap: 2px; min-width: 0; }
.portada-video-ficha b { font: 600 1.06rem/1.3 var(--font-titular); color: var(--ink); }
.portada-video-botones { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 979px) { .portada-visual { max-width: 40rem; } }
@media (prefers-reduced-motion: reduce) { .portada-visual::before { animation: none; } }
@media (forced-colors: active) { .portada-visual::before, .portada-marco::before { display: none; } }

/* ---- Materiales de formación ---- */
.servicio-materiales { display: grid; gap: clamp(18px, 2.4vw, 24px); }
.servicio-materiales > .seccion-cabecera { margin-bottom: clamp(4px, 1.6vw, 20px); }

/* Siete tarjetas sin que ninguna se quede sola en su fila: una columna en el móvil; dos desde 640 px, con la de
   videos ocupando la fila entera; cuatro desde 1100 px, con la de videos ocupando dos (4 + 4 huecos).
   La rejilla es un contenedor para que, en cuatro columnas, el cartel ancho tenga la misma altura que los demás. */
.rejilla-materiales {
  --hueco: clamp(12px, 2vw, 20px);
  --relleno: clamp(18px, 2.4vw, 24px);
  container-type: inline-size;
  display: grid; gap: var(--hueco); grid-template-columns: minmax(0, 1fr);
}
.rejilla-materiales .tarjeta { padding: var(--relleno); }
.rejilla-materiales .tarjeta h3 { font-size: 1.12rem; line-height: 1.3; }
.tarjeta-servicio .cartel-lamina img { object-position: top; }
/* El cartel ancho es una franja del fotograma: se encuadra la curva y los puntos del gráfico */
.tarjeta-ancha .cartel img { object-position: center 25%; }
@media (min-width: 640px) {
  .rejilla-materiales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-materiales .tarjeta-ancha { grid-column: 1 / -1; }
  .tarjeta-ancha .cartel { aspect-ratio: 3 / 1; }
}
@media (min-width: 1100px) {
  .rejilla-materiales { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rejilla-materiales .tarjeta-ancha { grid-column: span 2; }
  /* Alto del cartel de una tarjeta de una columna: (ancho de la columna − relleno) × 9/16 */
  .tarjeta-ancha .cartel { aspect-ratio: auto; height: calc(((100cqw - 3 * var(--hueco)) / 4 - 2 * var(--relleno)) * 9 / 16); }
}
.servicio-materiales > .acciones { margin-top: 4px; }

/* ---- Muestras: selector, video y ficha (al lado del video desde 1024 px, debajo en pantallas menores) ---- */
.muestras-modulo { gap: clamp(16px, 2.4vw, 22px); }
.muestras-escenario { display: grid; gap: clamp(18px, 2.6vw, 28px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  .muestras-escenario { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
}
.muestras-modulo .pantalla { box-shadow: var(--shadow-sm); }
.ficha { display: grid; gap: 10px; align-content: start; min-width: 0; }
.ficha h3 { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); line-height: 1.25; }
.ficha .ficha-texto { font-size: 1rem; line-height: 1.6; color: var(--ink-2); max-width: 40rem; }
.ficha .ficha-uso { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--rule); font: 500 .92rem/1.5 var(--font-display); color: var(--ink-2); max-width: 40rem; }
.ficha .ficha-uso b { font-weight: 700; color: var(--ink); }

/* Sin JavaScript (dentro de un <noscript>): los otros cuatro videos, cada uno con su ficha, en dos columnas desde 760 px */
.muestras-otras { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: clamp(24px, 3vw, 32px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .muestras-otras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.muestras-otras > li { display: grid; gap: 14px; align-content: start; min-width: 0; }
.muestras-acciones { margin-top: clamp(20px, 3vw, 28px); }

/* ---- Campus: el segundo servicio, en un recuadro después de las muestras; texto y cartel de la maqueta lado a lado
   desde 760 px ---- */
.servicio-campus { gap: clamp(20px, 3vw, 40px); align-items: center; }
.servicio-campus-texto { display: grid; gap: 14px; align-content: start; min-width: 0; }
.servicio-campus-texto h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); }
.servicio-campus-texto p { color: var(--ink-2); max-width: 34rem; }
.servicio-campus-texto .acciones { margin-top: 6px; }
@media (min-width: 760px) {
  .servicio-campus { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

/* ---- Compromisos de calidad ---- */
.calidad .tarjeta h3 { font-size: 1.1rem; line-height: 1.3; }

/* ---- Sobre mí: separado de «Cómo trabajo» por una línea; título y texto lado a lado desde 900 px ---- */
.sobre-mi-interior {
  display: grid; gap: 16px 48px; grid-template-columns: minmax(0, 1fr);
  padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--rule);
}
@media (min-width: 900px) { .sobre-mi-interior { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.sobre-mi-texto { display: grid; gap: 22px; align-content: start; min-width: 0; }
.sobre-mi-texto p { font-size: clamp(1.06rem, 1rem + .3vw, 1.18rem); line-height: 1.6; color: var(--ink-2); max-width: 40rem; text-wrap: pretty; }

/* ---- Impresión: sin video ni reproductor; quedan los textos y las fichas ---- */
@media print {
  .portada-visual, .muestras-modulo .pantalla, .muestras-modulo .fila-control { display: none !important; }
  .portada-rejilla { grid-template-columns: minmax(0, 1fr); grid-template-areas: "antetitulo" "titular" "entradilla" "acciones"; }
}