/* ==========================================================================
   Portada común de todos los talleres
   Lo que es igual en todas las portadas: tira de logos, nombre, fecha del día
   y colocación del título. Cada taller pone su título, su elemento animado de
   abajo a la izquierda y sus tarjetas (en su propio css/styles.css, que va
   después de este y puede sobrescribir lo que necesite).
   Se enlaza después de ../tokens.css:
     <link rel="stylesheet" href="../portada/portada.css">
   Guía completa (HTML de la portada, JS…): CLAUDE.md, apartado "Portada".
   ========================================================================== */

:root {
  /* franja de logos (alto de los logos): el título y el índice se colocan por
     debajo. 92px como máximo; si la pantalla es más estrecha o más baja, se
     reduce:
     - por ancho: con Accelera centrado, cada lado reserva el logo más ancho
       (BEDC: ~4 veces su alto), así que la fila mide ~11.6 veces el alto; se
       divide entre 13 para dejar aire entre logos (y 6rem de márgenes)
     - por alto: como mucho el 10 % de la pantalla, para que no pesen
       demasiado en pantallas bajas (1080×720 → 72px) */
  --logo-size: min(92px, calc((100vw - 6rem) / 13), 10dvh);
  --logo-inset: 2rem;
  --below-logo: calc(var(--logo-inset) + var(--logo-size) + 1.25rem);
  /* dónde empiezan las tarjetas del índice en horizontal: igual en todos los
     talleres (donde acaba el diente de león de portfolio-web-ia, más 2rem).
     Lo pone portada.js en px (bordeIndice); esto es la misma cuenta en CSS
     por si aún no ha cargado */
  --index-left: calc(max(clamp(62px, 19vmin, 170px) + 20px, 14vw) + clamp(62px, 19vmin, 170px) + 2rem);
}
@media (max-width: 720px) {
  :root { --logo-inset: 1rem; }
}

/* ---------- Logos ---------- */
/* Franja fija arriba: BEDC a la izquierda, Accelera en el centro exacto de la
   pantalla (rejilla 1fr · auto · 1fr) y Creativitic a la derecha; cada uno
   enlaza a su web. Los PNG de BEDC y Creativitic son oscuros con fondo
   transparente: el filtro los pinta en blanco. */
.portada-logos {
  position: fixed;
  top: var(--logo-inset);
  left: var(--logo-inset);
  right: var(--logo-inset);
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  pointer-events: none;           /* solo los enlaces reciben clics */
}
.portada-logos > :first-child { justify-self: start; }
.portada-logos > :last-child { justify-self: end; }
.portada-logos img {
  display: block;
  height: var(--logo-size);
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
/* las letras de BEDC llenan todo el alto de su imagen (los otros llevan lema
   o barra debajo) y a igual altura parecía más grande */
.portada-logos img.logo-bedc { height: calc(var(--logo-size) * 0.85); }
/* Creativitic tiene letras finas y el lema ocupa parte del alto: a igual
   altura pesaba menos que los otros dos */
.portada-logos img.logo-creativitic { height: calc(var(--logo-size) * 1.1); }
/* Accelera ya viene en blanco y azul: se deja con sus colores */
.portada-logos img.logo-color { filter: none; opacity: 1; }
.logo-link { pointer-events: auto; }
.logo-link:hover img { opacity: 1; }
.logo-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* ---------- Título, nombre y fecha ---------- */
/* .message ocupa toda la pantalla. El título (con el nombre) queda centrado
   entre dos huecos iguales: ::before arriba y .message-bottom abajo; la fecha
   va al fondo del de abajo, cerca del borde inferior. Cada taller ajusta
   .message en vertical/cuadrado para dejar sitio a su elemento animado. */
.message {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  text-align: center;
  pointer-events: none;
  z-index: 2;
}
.message::before { content: ''; flex: 1; }
.message-bottom {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 1.5rem;
}
.title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  /* si el título chocaría con el elemento animado, portada.js lo desplaza a
     la derecha lo justo (apartarTitulo); si no, 0 y queda centrado */
  transform: translateX(var(--title-shift, 0px));
}
/* nombre y email */
.message .subtitle {
  margin: 3.5rem 0 0;
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 500;
  color: var(--color-text-soft);
  text-shadow: 0 0 16px var(--color-bg);
  opacity: 1;
  transition: opacity .9s ease;
}
/* fecha del día (la rellena portada.js al abrir la página) */
.message .subtitle-date {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 500;
  color: var(--color-text-soft);
  text-shadow: 0 0 16px var(--color-bg);
  opacity: 1;
  transition: opacity .9s ease;
}