/* ===========================
   styles.css — v6 (Inconsolata + portada con alturas iguales)
   =========================== */

/* Tipografía */
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;600;700;900&display=swap');

:root{
  --brand:#0a6d7c;
  --brand-dark:#0a4e58;
  --brand-accent:#19b5c6;
  --text:#11222b;
  --title-scale: 2.05em;
  --subtitle-scale: 1.25em;
}

/* Base Reveal */
.reveal{
  font-family: "Inconsolata", ui-monospace, "SFMono-Regular",
               Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 22px;
  line-height: 1.34;
  color: var(--text);
}
.reveal .slides > section{ padding: 8px 10px; }

/* Encabezados */
.reveal h1,.reveal h2,.reveal h3,.reveal h4,.reveal h5,.reveal h6{
  font-family: inherit; color: var(--brand-dark);
  font-weight: 900; letter-spacing: 0.01em; margin: 0.15em 0 0.25em 0;
}
.reveal h1{ font-size: 2.35em; }
.reveal h2{ font-size: 1.9em; }
.reveal h3{ font-size: 1.5em; }

/* Texto/links */
.reveal p{ margin: 0.35em 0; line-height: 1.46; }
.reveal a{ color: var(--brand); text-decoration: none; }
.reveal a:hover{ color: var(--brand-accent); text-decoration: underline; }

/* Imágenes genéricas */
.reveal section img, .reveal figure img{
  max-width: 100%; max-height: 85vh; height: auto; width: auto;
  display: block; margin: 0.1em auto; border-radius: 8px;
}
.fullbleed{ max-height: 92vh !important; width: 100% !important; }

/* ===== Portada: layout IZQ|DER ===== */
#title-slide.quarto-title-block{ height: 100%; }

.title-container{
  display: grid;
  grid-template-columns: 42% 58%;
  gap: 2.2%;
  height: 100%;
  width: 100%;
  align-items: center;       /* centra verticalmente el texto */
}

/* Columna de texto: define la altura “objetivo” */
.title-content{
  text-align: left;
  padding: 0 14px 0 0;
  max-width: 900px;
}

/* Columna de imagen: no fijamos altura aquí; la fija el script */
.title-image{
  display: flex; justify-content: center; align-items: center;
}

/* Imagen portada: altura la establece el script (equalize) */
#title-image-el{
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  object-fit: cover;
}

/* Tipos/colores portada */
.title{ margin-bottom: 8px; font-size: var(--title-scale); color: var(--brand-dark); font-weight: 900; }
.subtitle{ font-size: var(--subtitle-scale); margin-bottom: 12px; color: var(--brand); font-weight: 700; }
.author{ font-size: 1.02em; margin-bottom: 2px; }
.institute{ font-size: 0.98em; margin-bottom: 6px; color:#4b5661; }
.footer{ color:#7a8a94; }

/* Slides de plot: sin título y a casi pantalla completa */
.plot-slide h1, .plot-slide h2, .plot-slide h3{ display:none; }
.plot-slide{ padding: 0 !important; }
.plot-slide img{ max-height: 92vh; }

/* Media queries */
@media (min-width: 1600px){
  :root{ --title-scale: 2.2em; --subtitle-scale: 1.28em; }
}
@media (max-width: 1024px){
  .title-container{ grid-template-columns: 48% 52%; }
}
@media (max-width: 780px){
  .title-container{
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    gap: 12px;
    align-content: start;
  }
  /* En móvil, dejamos que la imagen tenga altura automática */
  #title-image-el{ height: auto !important; max-height: 45vh; }
  .title-content{ padding: 0 6px; }
}