/* Ajustes comunes a todas las páginas, por encima de los estilos del diseño.
   El diseño está hecho a 1280 px con estilos en línea; aquí solo se adapta a
   pantallas pequeñas, sin cambiar cómo se ve en ordenador. */
/* Geist autoalojada (licencia OFL). Son fuentes variables: un archivo por subconjunto
   cubre los pesos 400-700 que usa el diseño. Geist Mono solo se usa en 500. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/geist-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/geist-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
img, svg, video { max-width: 100%; }

/* <main> solo marca el contenido para buscadores y lectores de pantalla: no
   cambia la maquetación del diseño. */
main { display: contents; }

/* Recuadros de imagen pendiente: el texto va en data-pendiente y se dibuja con
   CSS para que no sea texto que lean los buscadores. */
.pendiente-img::before { content: "[" attr(data-pendiente) "]"; }

/* Los bloques con ancho fijo (p. ej. width: 738px) no pueden salirse de la
   pantalla. Los que ya traen su propio max-width lo conservan. */
#app * { max-width: 100%; }

/* Botones del menú móvil: ocultos en escritorio (los añade tools/build.mjs; lógica en menu.js). */
#app .menu-toggle, #app .menu-head { display: none; }

@media (max-width: 1100px) {
  /* Menú: barra compacta (por debajo de 1100 px los siete enlaces ya no caben en una fila): barra compacta con logo, «Reservar plaza» y botón de menú; los enlaces van en un
     panel a pantalla completa que abre assets/menu.js. */
  #app div:has(> nav[aria-label="Principal"]) {
    flex-wrap: nowrap !important;
    border-radius: 22px !important;
    padding: 8px 8px 8px 16px !important;
    gap: 8px !important;
    width: calc(100% - 32px) !important;
    margin-top: 12px !important;
  }
  #app div:has(> nav[aria-label="Principal"]) > a:first-child {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px !important;
    line-height: 1.2;
    flex: 1 1 auto;
    min-width: 0;
    margin-right: auto;
  }
  #app div:has(> nav[aria-label="Principal"]) > a:last-of-type {
    flex: none;
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    white-space: nowrap;
  }
  #app .menu-toggle {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #F5F5F5;
    color: #1A1A1A;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #app .menu-toggle:focus-visible, #app .menu-close:focus-visible, #app nav[aria-label="Principal"] a:focus-visible {
    outline: 2px solid #3F5A8D;
    outline-offset: 2px;
  }
  #app nav[aria-label="Principal"] { display: none !important; }
  html[data-menu="open"], html[data-menu="open"] body { overflow: hidden; }
  html[data-menu="open"] #app nav[aria-label="Principal"] {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    position: fixed;
    inset: 0;
    z-index: 1000;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 8px 16px max(24px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #FFFFFF;
    font-size: 22px !important;
    letter-spacing: -0.01em;
  }
  html[data-menu="open"] #app nav[aria-label="Principal"] .menu-head {
    display: flex;
    justify-content: flex-end;
    padding: 4px 0 8px;
  }
  html[data-menu="open"] #app nav[aria-label="Principal"] .menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #F5F5F5;
    color: #1A1A1A;
    cursor: pointer;
  }
  html[data-menu="open"] #app nav[aria-label="Principal"] > a {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 56px;
    border-bottom: 1px solid #E4E4E4;
    white-space: normal;
    -webkit-tap-highlight-color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    html[data-menu="open"] #app nav[aria-label="Principal"] { animation: menu-in .18s ease-out both; }
    @keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  }
}

/* Áreas táctiles de 44 px en pie, migas de pan y casilla de consentimiento. */
@media (max-width: 1100px) {
  #app footer a { display: flex; align-items: center; min-height: 44px; }
  #app footer div:has(> a) { gap: 0 !important; }
  /* Pie de las landings: enlaces separados por «·» dentro de un span; en columna sin los puntos. */
  #app footer span:has(> a) { display: flex; flex-direction: column; font-size: 0 !important; }
  #app footer span > a { font-size: 16px; }
  #app nav[aria-label="Migas de pan"] a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 4px; margin: 0 -4px; }
  #app div:has(> input[type="checkbox"]) { align-items: center !important; }
  #app div:has(> input[type="checkbox"]) > label { padding: 10px 0; font-size: 16px !important; line-height: 24px; }
  #app div:has(> input[type="checkbox"]) > label a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}

@media (max-width: 760px) {
  /* Texto de lectura de 16 px como mínimo (el diseño usa 14 px en tarjetas y pie). La letra
     pequeña legal se queda en 14 px. */
  #app p[style*="font-size: 14px"], #app p[style*="font-size: 13px"], #app li[style*="font-size: 14px"],
  #app footer [style*="font-size: 14px"] { font-size: 16px !important; }
  #app p[style*="font-size: 12px"] { font-size: 14px !important; }

  /* Menos aire entre bloques: 96 px arriba y abajo son demasiado en una pantalla de 390 px. */
  #app [style*="padding: 96px 32px"], #app [style*="padding: 80px 32px"] { padding: 56px 16px !important; }
  #app [style*="padding: 112px 32px 72px"] { padding: 56px 16px 40px !important; }
  #app [style*="padding: 64px 32px"], #app [style*="padding: 56px 32px"], #app [style*="padding: 72px 32px"],
  #app [style*="padding: 24px 32px"] { padding-left: 16px !important; padding-right: 16px !important; }

  /* Titulares: el tamaño del diseño (80-92 px) no cabe en un móvil. */
  #app h1 { font-size: clamp(40px, 11.5vw, 60px) !important; overflow-wrap: anywhere; }
  #app h2 { overflow-wrap: break-word; }

  /* Márgenes laterales de 16 px en vez de 32 px. */
  #app [style*="padding: 0 32px"],
  #app [style*="padding: 120px 32px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Primera sección a pantalla completa con vídeo de fondo
   (la añade tools/build.mjs a las páginas con «hero»). */
#app .hero-video {
  position: relative;
  isolation: isolate;
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow: clip;
  box-sizing: border-box;
  min-height: 100vh !important;
  min-height: 100svh !important;
  /* Hueco del menú, que va fijo (ver más abajo). */
  padding-top: 86px;
  /* Fondo provisional mientras la página no tenga vídeo. */
  background: radial-gradient(120% 90% at 75% 20%, #2E3A50 0%, #1B2130 55%, #12151C 100%);
}
#app .hero-video > .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
  background: #1A1A1A;
}
#app .hero-video > .hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12, 14, 8, .62) 0%, rgba(12, 14, 8, .3) 50%, rgba(12, 14, 8, 0) 80%),
    linear-gradient(0deg, rgba(12, 14, 8, .35) 0%, rgba(12, 14, 8, 0) 45%);
}
/* En las landings, el titular centrado en el alto que queda. */
#app .hero-video > .hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 48px !important;
  padding-bottom: 96px !important;
}

/* Menú fijo arriba durante todo el scroll. Dentro del bloque, «sticky» lo
   soltaría al acabar el bloque: se fija a la ventana y el bloque reserva su
   hueco con padding-top. */
#app .hero-video > div:has(> nav[aria-label="Principal"]) {
  position: fixed !important;
  top: 16px !important;
  left: 0;
  right: 0;
  margin: 8px auto 0 !important;
}

/* Texto en blanco sobre el fondo (el menú conserva su fondo blanco). */
#app .hero-video > :not(:has(> nav)) :is(h1, h1 *, p, p *, span) { color: #FFFFFF !important; }
#app .hero-video > :not(:has(> nav)) a[style*="border: 1px"] {
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, .6) !important;
}
/* Etiquetas (40 h, 10 clases…): de gris claro a cristal sobre el fondo oscuro. */
#app .hero-video > :not(:has(> nav)) span[style*="background: #F5F5F5"] {
  background: rgba(255, 255, 255, .14) !important;
  border: 1px solid rgba(255, 255, 255, .22);
}
@media (max-width: 900px) {
  /* El menú ya es de una sola fila: menos hueco reservado arriba de la primera sección. */
  #app .hero-video { padding-top: 92px; }
}
@media (max-width: 760px) {
  /* En móvil el texto ocupa todo el ancho: velo más uniforme para que se lea. */
  #app .hero-video > .hero-veil {
    background: linear-gradient(0deg, rgba(12, 14, 8, .6) 0%, rgba(12, 14, 8, .4) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  #app .hero-video > .hero-bg { display: none; }
  .page-home #app .hero-video { background: #1A1A1A url(/assets/hero-poster.jpg) center / cover; }
}

/* Texto bajo el titular: igual en todas las páginas. */
#app h1 + p { font-size: 18px !important; }

/* ---------- Solo en la portada ---------- */

/* «Primera edición…» más pequeño y debajo de los botones. */
.page-home #app .hero-video h1 ~ div > span {
  flex-basis: 100%;
  margin-top: 4px;
  font-size: 12px !important;
  opacity: .85;
}

/* El bloque 2 empieza con el mismo aire que el resto de bloques. */
.page-home #app section#cursos { padding-top: 96px !important; }

/* ---------- Artículos del blog y páginas legales (Markdown → .prose) ----------
   Los genera tools/build.mjs; las medidas son las del artículo del diseño. */
.prose { font-size: 18px; line-height: 1.7; overflow-wrap: break-word; }
.prose.flush > :first-child { margin-top: 0; }
.prose h2 { margin: 56px 0 0; font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; scroll-margin-top: 96px; }
.prose h3 { margin: 40px 0 0; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; scroll-margin-top: 96px; }
.prose h4 { margin: 32px 0 0; font-size: 18px; font-weight: 600; scroll-margin-top: 96px; }
.prose h2 + p, .prose h3 + p { margin-top: 16px; }
.prose p { margin: 16px 0 0; }
.prose strong { font-weight: 600; }
.prose ul, .prose ol { margin: 16px 0 0; padding-left: 24px; }
.prose li { margin-top: 8px; padding-left: 4px; }
.prose li > p { margin: 8px 0 0; }
.prose a { color: #344B76; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: #2A3D60; }
.prose blockquote { margin: 32px 0 0; padding: 2px 0 2px 24px; border-left: 3px solid #1A1A1A; font-size: 20px; line-height: 1.6; }
.prose blockquote p { margin: 12px 0 0; }
.prose blockquote > :first-child { margin-top: 0; }
.prose hr { margin: 48px 0 0; border: 0; border-top: 1px solid #E4E4E4; }
.prose code { font-family: 'Geist Mono', ui-monospace, monospace; font-size: .88em; background: #F5F5F5; padding: 2px 6px; border-radius: 6px; }
.prose pre { margin: 24px 0 0; padding: 20px 24px; overflow-x: auto; background: #F5F5F5; border-radius: 16px; font-size: 15px; line-height: 1.6; }
.prose pre code { padding: 0; background: none; }
.prose .tabla { margin: 32px 0 0; overflow-x: auto; border: 1px solid #E4E4E4; border-radius: 16px; -webkit-overflow-scrolling: touch; }
.prose table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.prose th { padding: 14px 18px; text-align: left; font-size: 14px; font-weight: 600; background: #F5F5F5; white-space: nowrap; }
.prose td { padding: 14px 18px; vertical-align: top; border-top: 1px solid #E4E4E4; }
.prose td:first-child { font-weight: 600; }
.prose figure { margin: 40px 0 0; }
.prose figure img { display: block; width: 100%; height: auto; border-radius: 16px; background: #E6EBF3; }
.prose figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: #5C5C5C; }
@media (max-width: 760px) {
  .art-pad { padding-left: 16px !important; padding-right: 16px !important; }
  #app h1.art-h1 { font-size: clamp(30px, 8.6vw, 40px) !important; line-height: 1.1 !important; }
  .prose { font-size: 17px; }
  .prose h2 { margin-top: 44px; font-size: 26px; }
  .prose h3 { margin-top: 32px; font-size: 20px; }
  .prose blockquote { font-size: 18px; padding-left: 18px; }
  .prose th, .prose td { padding: 12px 14px; }
}