.en-curso-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 2.5rem;
  margin-top: 2.2rem;
  margin-bottom: 2.2rem;
  align-items: start;
  width: 100%;
}

/* encabezado lineal encima de la rejilla */
.en-curso-title {
  max-width: 90vw;
  margin: 0 auto 1rem;
  padding: 0; /* centrado por el max-width */
  color: #E7473C;
  font-size: clamp(1.8rem,4.5vw,2.6rem);
  line-height: 1.1;
  text-align: left;
}

/* Mantener el título en una sola línea visual (si no cabe, mostrar ellipsis) */
.en-curso-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Centrar la rejilla dentro del bleed y darle un pequeño padding lateral */
.en-curso-grid {
  width: 100%;
  max-width: 90vw; /* limitar el contenido a 90vw */
  margin: 0 auto;
  padding: 0; /* ya hay respiración en el bleed */
  margin-top: 0;
  gap: 3rem; /* más espacio entre columnas para aspecto abierto */
}

@media (max-width: 680px) {
  /* asegurar márgenes iguales a izquierda y derecha para la franja y su contenido */
}

/* Contenedor full-bleed que rompe el ancho centrado de .container */
.en-curso-bleed {
  width: 100vw;
  /* sacar del flujo centrado: desplazar negativo respecto al viewport */
  margin-left: calc(50% - 50vw);
  /* compensación simétrica para evitar desplazamientos causados por scrollbars
    o diferencias en el cálculo del ancho del viewport */
  margin-right: calc(50% - 50vw);
  background: transparent; /* hereda el fondo de la sección */
  /* mantener relleno vertical, pero añadir padding lateral simétrico
    para que el contenido dentro de la franja tenga los mismos márgenes
    a izquierda y derecha en todas las pantallas */
  padding: 1.2rem 1.5rem 2.2rem;
}
.curso-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 30px -12px rgba(0,0,0,.12);
  padding: 1.6rem 1.6rem;
  color: #E7473C;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 180px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.curso-card h2 {
  margin-top: 0;
  margin-bottom: 0.9rem;
  font-size: 1.6rem;
  font-family: 'Fraunces', serif;
  color: #E7473C;
}

/* Ensure En curso card headings use the same display typography as the
   teaching-intro header (Histórico de docencia) */
.curso-card.intro h2,
.curso-card.grado h2,
.curso-card.posgrado h2,
.curso-card.otros h2 {
  font-family: 'Bebas Neue', 'Fraunces', serif;
  font-weight: 600;
  letter-spacing: .6px;
}
.curso-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.curso-card li {
  font-size: 1.08rem;
  line-height: 1.5;
}
.resumen-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center center; /* asegurar el foco en el centro */
  max-height: 260px;
}

@media (max-width: 680px) {
  .resumen-media img { max-height: 180px; }
}
/* Resumen: presentar la tarjeta introductoria con borde y sombra (no caja anidada) */
.curso-card.intro {
  background: #ffffff; /* fondo claro para la tarjeta */
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 1.4rem;
  color: inherit;
}
.curso-card.intro p,
.curso-card.intro .preface {
  color: #333;
}
.curso-card.intro .resumen-media {
  background: transparent;
  border-radius: 0; /* removed rounded corners for the intro image */
  overflow: hidden; /* recortar la imagen si es necesario */
  width: 100%;
  margin: 0.75rem 0 0 0;
  box-sizing: border-box;
}
.curso-card.intro .resumen-media img {
  width: 100%;
  height: auto;
  max-height: clamp(160px, 18vw, 260px);
  display: block;
  object-fit: cover;
}
/* Grado / Posgrado / Otros: fondo de color de marca y texto claro
   Mantener borde y sombra coherentes con las demás tarjetas */
.curso-card.grado,
.curso-card.posgrado,
.curso-card.otros {
  /* Slight vertical gradient for depth and a warmer tone
     Keep text light for contrast */
  background: linear-gradient(180deg,#E7473C 0%, #D93E33 100%) !important;
  color: #F8F7F6 !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.24) !important;
  border-radius: 18px !important;
  transform: translateZ(0);
}
/* Asegurar que las .card internas tengan fondo transparente para mostrar el color de la tarjeta */
.curso-card.grado .card,
.curso-card.posgrado .card,
.curso-card.otros .card {
  /* fondo claro semitransparente para destacar sobre el fondo de la tarjeta */
  background: rgba(255,255,255,0.08) !important; /* incrementar contraste interno */
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: inherit !important;
  border-radius: 10px !important;
  padding: 1rem !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.14) !important;
  transition: transform 280ms cubic-bezier(.2,.9,.3,1), box-shadow 280ms ease, filter 280ms ease;
  will-change: transform;
}
/* Solo aplicar transformaciones hover en dispositivos que soporten hover */
@media (hover: hover) and (pointer: fine) {
  .curso-card.grado .card:hover,
  .curso-card.posgrado .card:hover,
  .curso-card.otros .card:hover {
    transform: translateY(-6px) translateZ(0);
    box-shadow: 0 20px 40px rgba(0,0,0,0.22) !important;
  }
}

/* Lift the entire category card slightly on hover for emphasis */
@media (hover: hover) and (pointer: fine) {
  .curso-card.grado:hover,
  .curso-card.posgrado:hover,
  .curso-card.otros:hover {
    transform: translateY(-6px) translateZ(0);
    box-shadow: 0 26px 60px rgba(0,0,0,0.28) !important;
  }
}
/* Titulares dentro de esas tarjetas deben ser claros */
.curso-card.grado h2,
.curso-card.posgrado h2,
.curso-card.otros h2 {
  color: #F0F0F0 !important;
}
/* Forzar color de toda la tipografía dentro de las tarjetas Grado/Posgrado/Otros */
.curso-card.grado h1,.curso-card.grado h2,.curso-card.grado h3,.curso-card.grado h4,.curso-card.grado h5,.curso-card.grado h6,
.curso-card.grado p,.curso-card.grado li,.curso-card.grado a,.curso-card.grado span,.curso-card.grado small,
.curso-card.grado .card h3,.curso-card.grado .card p,.curso-card.grado article h3,.curso-card.grado article p,
.curso-card.posgrado h1,.curso-card.posgrado h2,.curso-card.posgrado h3,.curso-card.posgrado h4,.curso-card.posgrado h5,.curso-card.posgrado h6,
.curso-card.posgrado p,.curso-card.posgrado li,.curso-card.posgrado a,.curso-card.posgrado span,.curso-card.posgrado small,
.curso-card.posgrado .card h3,.curso-card.posgrado .card p,.curso-card.posgrado article h3,.curso-card.posgrado article p,
.curso-card.otros h1,.curso-card.otros h2,.curso-card.otros h3,.curso-card.otros h4,.curso-card.otros h5,.curso-card.otros h6,
.curso-card.otros p,.curso-card.otros li,.curso-card.otros a,.curso-card.otros span,.curso-card.otros small,
.curso-card.otros .card h3,.curso-card.otros .card p,.curso-card.otros article h3,.curso-card.otros article p {
  color: #F0F0F0 !important;
}
.pub-grid { --cols:2; display:grid; gap: clamp(1.1rem,1.8vw,1.6rem); grid-template-columns:repeat(var(--cols),minmax(0,1fr)); }
/* Keep two columns across typical desktop widths; fall back to 1 column on small screens */
@media (max-width:820px){ .pub-grid { --cols:2; } }
@media (max-width:600px){ .pub-grid { --cols:1; } .pub-card { min-height:140px; } .pub-card figure { flex:0 0 86px; } }

/* Make pub-grid rows equal height on narrow screens so cards in the same row match */
@media (max-width:820px) {
  .pub-grid { grid-auto-rows: 1fr; align-items: stretch; }
  .pub-card { height: 100%; min-height: 0; display: flex; align-items: stretch; }
  .pub-card > figure { align-self: stretch; }
  .pc-body { flex: 1 1 auto; display: flex; flex-direction: column; }
}
:root {
  --bg: #E35336;
  --bg-alt: #161a21;
  --fg: #f5f7fa;
  --accent: #6366f1;
  --accent-rgb: 99,102,241;
  --brand-accent: #E7473C; /* color principal de marca para logo */
  --radius: 14px;
  --transition: 0.4s cubic-bezier(.4,0,.2,1);
  --max-width: 1200px;
  --header-height: 70px;
  scroll-behavior: smooth;
}

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

* { box-sizing: border-box; }
html, body { margin:0; padding:0; width:100%; }
/* Compensar header fijo: evitar que los anclajes queden ocultos bajo el header
   - scroll-padding-top ayuda en navegadores que usan el contenedor de scroll
   - scroll-margin-top en cada sección asegura un offset cuando se usan anchors
     o scrollIntoView desde JS. Se añade un pequeño extra (+8px) para separación visual. */
/* Keep native behavior: allow section top to sit at the very top of the viewport.
  The fixed header will overlap the section top as requested. */
html { scroll-padding-top: 0; }
section[id] { scroll-margin-top: 0; }
body {
  font-family: 'Inter', system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* Evita el scroll horizontal */
}

/* Header */
.site-header {
  position: fixed;
  top:0; left:0; right:0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  backdrop-filter: blur(14px) saturate(180%);
  background: #333; /* changed to dark neutral */
  border-bottom: 1px solid rgba(255,255,255,.06);
  z-index: 1000;
}

/* Lessons panel styles (list + content) */
.lecciones-panel { display:flex; gap:1rem; align-items:flex-start; padding:0.8rem; }
.lesson-list { display:grid; grid-template-columns: repeat(1, 1fr); gap:0.5rem; width: 280px; max-width: 40%; }
.lesson-item { display:block; width:100%; text-align:left; padding:0.6rem 0.8rem; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04); color:var(--fg); border-radius:8px; cursor:pointer; }
.lesson-item:hover, .lesson-item:focus { background: rgba(255,255,255,0.04); outline: none; }
.lesson-item.active { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
.lesson-content { flex:1; padding:1rem; border-radius:8px; background: rgba(0,0,0,0.06); }
.lesson-content[hidden]{ display:none; }

/* Teaching tabs used for Seminarios */
.teaching-tabs { margin-top: 1rem; }
.teaching-tabs .tab-controls { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom: 1rem; }
.teaching-tabs .tab { background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04); color:var(--fg); padding:0.5rem 0.8rem; border-radius:8px; cursor:pointer; }
.teaching-tabs .tab.active, .teaching-tabs .tab[aria-selected="true"] { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
.teaching-tabs .tab-panels { margin-top:0.6rem; }

/* Grid for seminar sessions: 2 columns, 5 rows */
.seminar-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
.session-card { padding: 0.9rem; text-align:center; border-radius:8px; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04); }

@media (max-width:720px){ .seminar-grid { grid-template-columns: 1fr; } }

@media (max-width:900px){
  .lecciones-panel{ flex-direction:column; }
  .lesson-list{ max-width:100%; width:100%; display:grid; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:520px){
  .lesson-list{ grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: apilar completamente Lecciones y Seminarios uno por uno
   Se usa 720px para cubrir la mayoría de smartphones y tablets estrechos */
@media (max-width: 720px) {
  /* Panel principal: lista y contenido deben apilarse verticalmente */
  .lecciones-panel { flex-direction: column; gap: 0.9rem; }

  /* Lista de lecciones: ocupar todo el ancho y mostrar un solo ítem por fila */
  .lesson-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: none !important;
    gap: 0.5rem !important;
  }
  .lesson-item { width: 100% !important; }

  /* Contenido de la lección debe ocupar todo el ancho y mostrarse debajo de la lista */
  .lesson-content { width: 100% !important; padding: 0.85rem !important; }

  /* Forzar la grid interna de cada lección a una columna para apilar los bloques internos */
  .lesson-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: "leccion" "presentacion" "material" "pautas";
  }
  .lesson-grid > .lesson-box { width: 100% !important; }

  /* Asegurar que cada elemento del acordeón ocupe el ancho completo */
  .lecciones-accordion .lesson { display: block !important; width: 100% !important; }

  /* Seminarios: una sola columna, tarjetas a todo ancho */
  .seminar-grid { grid-template-columns: 1fr !important; gap: 0.6rem !important; }
  .session-card, #seminarios .session-card { width: 100% !important; display: block !important; margin: 0 !important; padding: 0.7rem !important; box-sizing: border-box !important; }
  .session-card + .session-card { margin-top: 0.6rem !important; }
}

/* Accordion vertical for Lecciones */
.lecciones-accordion { padding: 0.6rem 0.8rem; background: rgba(0,0,0,0.02); border-radius: 10px; }
.lecciones-accordion .lesson { margin-bottom: 0.4rem; }
.lesson-header {
  display:block;
  width:100%;
  text-align:left;
  font-family: 'Bebas Neue', 'Fraunces', serif;
  font-size: 1.5rem; /* aumentado para mayor legibilidad */
  padding: 0.9rem 1rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  color: var(--fg);
  border-radius: 8px;
  cursor: pointer;
}
.lesson-header:hover, .lesson-header:focus { background: rgba(255,255,255,0.04); outline: none; }
.lesson-header.active { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
.lesson-body { padding: 0.9rem 1rem; background: rgba(0,0,0,0.04); border-radius: 8px; margin-top: 0.45rem; }
.lesson-body[hidden] { display: none; }

/* pequeño salto visual hacia arriba al abrir un encabezado */
.lesson-header.jump-up { transform: translateY(-8px); transition: transform 260ms cubic-bezier(.2,.9,.3,1); }
.lesson-header { transition: transform 180ms ease, background 180ms ease; -webkit-transition: transform 180ms ease, background 180ms ease; z-index: 3; }

/* Sessions in Seminarios should match the visual style of Lecciones */
.session { margin-bottom: 0.5rem; }
.session-header {
  display:block;
  width:100%;
  text-align:left;
  font-family: 'Bebas Neue', 'Fraunces', serif;
  font-size: 1.05rem;
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  color: var(--fg);
  border-radius: 8px;
  cursor: pointer;
}
.session-header:hover, .session-header:focus { background: rgba(255,255,255,0.04); outline: none; }
.session-header.active { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
.session-body { padding: 0.9rem 1rem; background: rgba(0,0,0,0.04); border-radius: 8px; margin-top: 0.45rem; }
.session-body[hidden] { display: none; }

/* Safety: ensure headers receive pointer events above background layers */
.lecciones-accordion .lesson-header { position: relative; z-index: 2; }

/* Grid for lesson inner content: 2x2 boxes */
.lesson-grid {
  display: grid;
  /* Layout: first row = Lección (30%) | Presentación (70%)
     then Materiales full-width, then Pautas full-width */
  grid-template-columns: 30% 70%;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "leccion presentacion"
    "material material"
    "pautas pautas";
  gap: 0.75rem;
}
.lesson-grid > .lesson-box:nth-child(1) { grid-area: leccion; }
.lesson-grid > .lesson-box:nth-child(2) { grid-area: presentacion; }
.lesson-grid > .lesson-box:nth-child(3) { grid-area: material; }
.lesson-grid > .lesson-box:nth-child(4) { grid-area: pautas; }
.lesson-box {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  padding: 0.75rem;
  border-radius: 8px;
  min-height: 3.2rem;
}
.lesson-box h4 { margin: 0 0 0.4rem 0; font-size: 0.98rem; }

/* Increased shadows for Lecciones and Seminarios tables */
/* Stronger shadows for Lecciones/Seminarios containers and internal cards */
#lecciones .lesson-box,
#lecciones .lesson-content,
#lecciones .lesson-body,
#lecciones .lesson-cards-row .card,
#lecciones .lesson-panel .card,
#seminarios .lesson-box,
#seminarios .lesson-content,
#seminarios .lesson-body,
#seminarios .lesson-cards-row .card,
#seminarios .lesson-panel .card,
#seminarios .session-card,
#seminarios .session-card .card {
  box-shadow: 0 22px 60px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.08);
  transition: box-shadow .42s cubic-bezier(.2,.9,.3,1), transform .42s;
}

#lecciones .lesson-box:hover,
#lecciones .lesson-content:hover,
#lecciones .lesson-body:hover,
#lecciones .lesson-cards-row .card:hover,
#lecciones .lesson-panel .card:hover,
#seminarios .lesson-box:hover,
#seminarios .lesson-content:hover,
#seminarios .lesson-body:hover,
#seminarios .lesson-cards-row .card:hover,
#seminarios .lesson-panel .card:hover,
#seminarios .session-card:hover,
#seminarios .session-card .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 90px rgba(0,0,0,0.32), 0 10px 28px rgba(0,0,0,0.10);
}

@media (max-width: 640px) {
  .lesson-grid { grid-template-columns: 1fr; grid-template-areas: "leccion" "presentacion" "material" "pautas"; }
  .lesson-grid > .lesson-box:nth-child(1),
  .lesson-grid > .lesson-box:nth-child(2),
  .lesson-grid > .lesson-box:nth-child(3),
  .lesson-grid > .lesson-box:nth-child(4) { grid-area: auto; }
}

@media (max-width: 640px) {
  .lesson-header { font-size: 1.15rem; }
}

/* Images used inside lesson boxes */
.lesson-box img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* Materiales: video links row + icon links row */
.material-videos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

/* Make materials link icons match the Documentos / Otros style and size */
.materials-links-row a,
.otros-link-row a,
.otros-docs-row a,
.otros-pres-row a {
  padding: 1rem !important;
  border-radius: 0.45rem !important;
}
.materials-links-row svg,
.otros-link-row svg,
.otros-docs-row svg,
.otros-pres-row svg {
  width: 88px !important;
  height: 88px !important;
}

/* Show captions under the icon rows for 'Otros documentos', presentaciones and enlaces */
.otros-docs-row figcaption,
.otros-pres-row figcaption,
.otros-link-row figcaption {
  display: block !important;
  font-size: 0.9rem;
  margin-top: 0.4rem;
  color: inherit;
  text-align: center;
}
.video-card {
  display:block;
  width:100%;
  aspect-ratio: 16/9;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.25));
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
}

/* Tutorías: icon links (Meet / Sheet) styling */
.tutorias-links { display:flex; gap:1.25rem; align-items:flex-start; flex-wrap:wrap; }
.tutorias-links figure { margin:0; display:flex; flex-direction:column; align-items:center; text-align:center; }
.tutorias-links a {
  color: #fff; /* white icon color */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px; /* larger box */
  height: 120px;
  border-radius: 12px;
  background: transparent; /* remove visible background as requested */
  border: none; /* no border */
}
.tutorias-links a svg { width:72px; height:72px; display:block; stroke:currentColor; fill:currentColor; }
.tutorias-links figcaption { font-size: 0.50rem; margin-top:0.35rem; color: rgba(255,255,255,0.95); text-align:center; }
.tutorias-links a:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,0.28); }

@media (max-width:520px) {
  .tutorias-links a { width:100px; height:100px; }
  .tutorias-links a svg { width:60px; height:60px; }
  .tutorias-links figcaption { font-size:0.45rem; }
}
.video-card::after{
  content: '';
  display: block;
  width: 100%; height: 100%;
}
.material-icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  align-items: center;
}
.material-icons .icon-link { text-align:center; color: rgba(255,255,255,0.78); }
.material-icons .icon-svg { width:36px; height:36px; display:block; margin:0 auto 0.35rem; fill: currentColor; color: inherit; }
.material-icons figcaption { font-size: 0.85rem; color: inherit; }

@media (max-width:720px){
  .material-videos, .material-icons { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:420px){
  .material-videos, .material-icons { grid-template-columns: 1fr; }
}

.brand { 
  display:flex; 
  flex-direction:row; 
  align-items:baseline; 
  line-height:1; 
  /* Use Bebas Neue for the logo with fallbacks */
  font-family: 'Bebas Neue', 'Fraunces', serif; 
  letter-spacing:.5px; 
  position:relative; 
  font-feature-settings:'ss01' on,'liga' on,'clig' on;
  gap:.55ch;
  text-decoration: none; /* remove underline for logo link */
}
.brand-top { 
  font-weight:500;
  font-size: clamp(1.18rem, 3vw, 1.65rem);
  line-height:1.05;
  color:#ffffff; /* ahora blanco */
  letter-spacing:.3px;
  font-variant:normal;
  text-transform:none;
}
.brand-bottom { 
  font-weight:600;
  font-size: clamp(1.18rem, 2.9vw, 1.58rem);
  letter-spacing:.5px;
  color:#ffffff; /* también blanco */
  font-variant:normal;
  text-transform:none;
}
.brand:after {
  content:"";
  position:absolute;
  left:0; bottom:-22%;
  width:100%; height:1px;
  background:#E7473C; /* línea roja sólida */
  opacity:.7;
  transform:scaleX(.82);
  transform-origin:center;
  transition:opacity .55s ease, transform .6s cubic-bezier(.55,.15,.25,1);
  pointer-events:none;
}
.brand:hover:after { opacity:.9; transform:scaleX(1); }
.brand:hover .brand-bottom { text-shadow:0 2px 6px rgba(0,0,0,.5); }

@media (max-width:680px){
  .brand { font-size:90%; }
  .brand-bottom { letter-spacing:1.2px; }
}
.social-links { display:flex; align-items:center; gap:.65rem; margin-right:.6rem; }
.social-links .sl-icon { position:relative; display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.28); border-radius:10px; color:#F0F0F0; text-decoration:none; background:rgba(255,255,255,.1); backdrop-filter:blur(6px) saturate(160%); transition:background .5s, border-color .45s, color .45s, transform .5s, box-shadow .55s; }
.social-links .sl-icon:hover { background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.55); color:#ffffff; transform:translateY(-3px); box-shadow:0 6px 16px -8px rgba(0,0,0,.55); }
.social-links .sl-icon:active { transform:translateY(-1px) scale(.96); }
/* En móviles mantenemos los iconos visibles pero más compactos */
@media (max-width:680px){
  .social-links { gap:.4rem; margin-right:.4rem; }
  .social-links .sl-icon { width:30px; height:30px; border-radius:8px; }
  .brand-top, .brand-bottom { font-size: clamp(1.05rem, 5vw, 1.3rem); }
}

.hamburger {
  position:relative;
  width:46px; height:46px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:0;
}
.hamburger:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:8px; }
.burger-icon.triple-min { stroke:#F0F0F0; stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; }
.burger-icon.triple-min .bar { transition: transform .55s cubic-bezier(.68,-0.55,.25,1.35), opacity .35s ease, stroke-width .35s ease; transform-origin: center; }
.burger-icon.triple-min .mid { stroke-width:.95; }
.hamburger:not(.active) .burger-icon.triple-min .mid { transform:scaleX(.8); }
.hamburger:not(.active):hover .burger-icon.triple-min .mid { transform:scaleX(1); }
.hamburger:not(.active):hover .burger-icon.triple-min .top,
.hamburger:not(.active):hover .burger-icon.triple-min .bot { transform:scaleX(.8); }
.hamburger.active .burger-icon.triple-min .top { transform: translateY(5.3px) rotate(45deg); }
.hamburger.active .burger-icon.triple-min .bot { transform: translateY(-5.3px) rotate(-45deg); }
.hamburger.active .burger-icon.triple-min .mid { opacity:0; transform:scaleX(.15); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Offcanvas */
.offcanvas {
  position: fixed;
  top:0; right:0; bottom:0;
  width: min(320px,86%);
  height:100vh; /* altura completa */
  background: #333;
  box-shadow: -6px 0 32px -8px rgba(0,0,0,.7);
  transform: translateX(100%);
  transition: var(--transition);
  padding: calc(var(--header-height) + 1.2rem) 1.6rem 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 1200;
  overflow-y:auto;
}
.offcanvas.open { transform: translateX(0); }
.offcanvas .close {
  position: absolute;
  top: .5rem;
  right: .7rem;
  font-size: 2rem;
  line-height: 1;
  background: none;
  border: none;
  color: #F0F0F0;
  cursor: pointer;
  transition:opacity .4s;
}
.offcanvas .close:hover { opacity:.75; }
.offcanvas ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.offcanvas a { color:#F0F0F0; text-decoration:none; padding:.65rem 0; font-weight:600; letter-spacing:.45px; position:relative; font-family:'Inter',system-ui,-apple-system,sans-serif; }
.offcanvas a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:#F0F0F0; transition:var(--transition); border-radius:2px; }
.offcanvas a:hover::after, .offcanvas a:focus-visible::after { width:100%; }
.offcanvas a:focus-visible { outline:2px solid #F0F0F0; outline-offset:4px; }
.offcanvas .close { color: var(--fg); }

/* Recursos: fondo específico según solicitud */
#recursos {
  background: #E35336;
  color: var(--fg);
}

/* Make Evaluación use the same background and foreground as the rest of the site */
section#evaluacion {
  background: var(--bg);
  color: var(--fg);
}

/* Asegurar que las tarjetas dentro de recursos mantengan texto legible */
#recursos .card,
#recursos a,
#recursos p,
#recursos h2,
#recursos h3 {
  color: var(--fg);
}

/* Layout de dos columnas para la sección Recursos */
.recursos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* dos columnas iguales */
  gap: 1.6rem;
  align-items: start;

/* Icon rows inside the recursos-right card */
.recursos-icons{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-top:0.6rem;
  align-items:center; /* center each icon-row inside the card */
  width:100%;
}
.icon-row{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:0.8rem;
  align-items:start;
  width:100%;
  max-width: min(560px, calc(100% - 2rem)); /* limit row width so two icons are centered inside the card */
  margin: 0 auto; /* center the grid inside the recursos-right card */
  justify-items: center; /* center each icon within its grid cell */
  padding-inline: 0.6rem; /* inner breathing room so icons don't touch the card edges */
}
.icon-card{
  width:100%;
  background: rgba(255,255,255,0.06);
  border-radius:8px;
  padding:0.6rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  box-sizing: border-box;
  min-width: 0; /* prevent content from forcing overflow */
  max-width: 260px; /* keep each icon card constrained so two fit comfortably */
}
.icon-svg{
  width:48px;
  height:48px;
  fill: #fff;
  opacity:0.95;
}
.icon-card figcaption{
  margin-top:0.4rem;
  font-size:0.85rem;
  color:rgba(255,255,255,0.95);
}

@media (max-width:700px){
  /* keep two per row on small screens, collapse to one on very small devices */
  .icon-card{ width:100%; }
}

@media (max-width:420px){
  .icon-row{ grid-template-columns: 1fr; }
}

}

.recursos-left, .recursos-right {
  padding: 1.2rem;
  box-sizing: border-box;
}

/* Recursos grid: dos columnas en desktop, 1 columna en móvil */
.recursos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  align-items: start;
}

.manual-cover {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  margin-top: 0.5rem;
  box-sizing: border-box;
  max-width: 100%;
}

/* Make manual image fill the width of the card and be fully visible */
.manual-cover img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important; /* show full image without cropping */
  object-position: center center !important;
  display: block !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

@media (max-width:820px){ .recursos-grid { grid-template-columns: 1fr; } }

/* Constrain the visible figure so it has equal left/right margins inside the card */
.recursos-left .manual-cover {
  /* Ensure the manual image uses the full width of the card but never overflows it */
  max-width: 100%;
  width: 100%;
  margin: 0; /* occupy full width of the container */
  padding: 0;
}

@media (max-width: 820px) {
  .recursos-grid { grid-template-columns: 1fr; }
}

.scroll-top {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(0,0,0,.55), rgba(0,0,0,.3));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  color: var(--fg);
  text-decoration: none;
  font-size: 1rem;
  backdrop-filter: blur(10px) saturate(160%);
  z-index: 1500;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
  transition: opacity .4s ease, transform .4s ease, background .4s ease;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(.9);
}
.scroll-top:hover { background: #333; }
.scroll-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.scroll-top:active { transform: translateY(2px) scale(.96); }

main { margin-top: var(--header-height); }
/* Ensure anchor scrolling positions sections exactly below the fixed header.
  Use the header height as the scroll offset so the previous section isn't visible. */
section[id] { scroll-margin-top: var(--header-height); }
/* For browsers that use the scroll container's padding for fragment navigation,
  set scroll-padding-top on the root to the same value. */
html { scroll-padding-top: var(--header-height); }
.section {
  position: relative;
  width:100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(3rem,6vw,6rem) 1.5rem;
}
.section#informacion {
  flex-direction: column;
  align-items: stretch;
  padding-top: clamp(2rem,4vw,3rem);
  padding-bottom: clamp(2rem,4vw,3rem);
}

/* Make Recursos stack its heading above the resource boxes */
.section#recursos {
  flex-direction: column;
  align-items: stretch;
  padding-top: clamp(2rem,4vw,3rem);
  padding-bottom: clamp(2rem,4vw,3rem);
}

/* Make Lecciones full-bleed: section and its content occupy 100vw */
.section#lecciones {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  padding-top: clamp(2rem,4vw,3rem);
  padding-bottom: clamp(2rem,4vw,3rem);
}

/* Ensure the inner container in Lecciones fills the section width */
#lecciones .container.narrow {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}


/* Row that contains the two resource boxes (Manual / Otros) */
.recursos-row {
  display: flex;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  padding: 0 clamp(1rem, 4vw, 2rem); /* small horizontal padding inside the section */
}
.recursos-left { flex: 0 0 40%; }
.recursos-right { flex: 0 0 60%; }
.recursos-left, .recursos-right { box-sizing: border-box; }

/* Card visuals inside each column */
.recursos-card {
  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(255,255,255,0.03);
  border-radius: 12px;
  padding: clamp(1rem, 2vw, 1.5rem);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

@media (max-width: 780px) {
  .recursos-row { flex-direction: column; padding: 0 1rem; }
  .recursos-left, .recursos-right { flex: 1 1 100%; }
}

/* spacing for resource boxes */
.resource-stack > .resource-box + .resource-box { margin-top: 1rem; }

/* Two-column layout for Recursos: Manual (left) and Otros (right) */
.resource-grid {
  display: flex;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: 1rem;
}
.resource-grid > .resource-box {
  flex: 1 1 50%;
  box-sizing: border-box;
  padding: clamp(0.75rem, 1.8vw, 1.25rem);
  display: flex;
  justify-content: center; /* center thDeshaz e inner card */
}
@media (max-width: 640px) {
  .resource-grid { flex-direction: column; }
  .resource-grid > .resource-box { width: 100%; }
}

/* Visual card for recursos: similar to .info-card but narrower inside each column */
.resource-card {
  width: 92%;
  max-width: 480px;
  box-sizing: border-box;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(255,255,255,0.03);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
@media (max-width:640px) {
  .resource-card { width: calc(100% - 2rem); margin-left: 1rem; margin-right: 1rem; }
}
.section.alt { background: var(--bg-alt); }
.section#services { display:flex; flex-direction:column; align-items:stretch; background:#F0F0F0; color:#E7473C; }
.container { margin:0 auto; width:100%; max-width: var(--max-width); }
.container.narrow { max-width: 780px; }

/* Align the informacion container to the left so its heading matches the section's left padding */
#informacion .container.narrow { margin-left: 0; margin-right: auto; }

/* Stacked full-width information cards for la sección 'Información de la asignatura' */
.info-stack { display: block; }
.info-card {
  width: 90vw;
  margin-left: calc(50% - 45vw);
  margin-right: calc(50% - 45vw);
  box-sizing: border-box;
  padding: clamp(1rem, 2.5vw, 2rem) 1.5rem;
  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(255,255,255,0.03);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
/* reduce the inner content width so the visual card appears slightly narrower while margins remain equal */
.info-card .container.narrow { max-width: 900px; }
.info-card h3 { margin-top: 0; margin-bottom: 0.6rem; }

/* vertical spacing between stacked cards */
.info-stack > .info-card + .info-card { margin-top: 1.25rem; }

/* Small screens: use nearly full width with equal side gutters */
@media (max-width:640px) {
  .info-card {
    width: calc(100% - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
    border-radius: 10px;
  }
}

/* Ensure the main heading of the Información section is left-aligned */
/* Make the header container match the inner width of the info cards so their content aligns */
#informacion .container.narrow { max-width: 900px; }

/* Left-align the heading and remove extra left margin so it lines up with the cards */
#informacion .container.narrow h2 { text-align: left; margin-left: 0; }

/* Make Recursos heading follow the same alignment and max-width rules as Información
  so its heading sits above the resource boxes and lines up with their left edge. */
#recursos .container.narrow { margin-left: 0; margin-right: auto; max-width: 900px; }
#recursos .container.narrow h2 { text-align: left; margin-left: 0; }

/* Align Lecciones heading with Información and Recursos */
/* Use the same centered container as other sections so content aligns consistently */
#lecciones .container { margin: 0 auto; width: 100%; max-width: var(--max-width); box-sizing: border-box; padding-left: clamp(1rem, 4vw, 2rem); padding-right: clamp(1rem, 4vw, 2rem); }
#lecciones .container h2 { text-align: left; margin-left: 0; }

/* Make Seminarios match Información and Recursos */
/* Make Seminarios container match Lecciones exactly */
#seminarios .container { margin: 0 auto; width: 100%; max-width: var(--max-width); box-sizing: border-box; padding-left: clamp(1rem, 4vw, 2rem); padding-right: clamp(1rem, 4vw, 2rem); }
#seminarios .container h2 { text-align: left; margin-left: 0; }

/* Ensure Lecciones and Seminarios have the same vertical padding and layout as Información/Recursos */
.section#lecciones,
.section#seminarios {
  flex-direction: column;
  align-items: stretch;
  padding-top: clamp(2rem,4vw,3rem);
  padding-bottom: clamp(2rem,4vw,3rem);
}

/* Make inner stacks/grids use the same spacing rules when present */
#lecciones .info-stack > .info-card + .info-card,
#seminarios .info-stack > .info-card + .info-card {
  margin-top: 1.25rem; /* match Información spacing */
}

/* If resource-like grids are used inside these sections, reuse recursos-grid behaviour */
#lecciones .recursos-row, #seminarios .recursos-row {
  display: flex;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  padding: 0 clamp(1rem, 4vw, 2rem);
}


h1,h2,h3 { line-height:1.15; }
h1 { font-size: clamp(2.8rem,7vw,4rem); margin:.2em 0 .4em; }
h2 { font-size: clamp(1.9rem,4.5vw,2.6rem); margin:0 0 1.25em; }

/* Titulares: Bebas Neue para h1-h4 (display), con fallbacks */
h1,h2,h3,h4 { font-family: 'Bebas Neue', 'Fraunces', serif; font-weight:600; letter-spacing: .6px; }
h3 { font-weight:500; }

p { max-width: 62ch; font-family: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif; }


/* Párrafo introductorio en 'En curso' */
.preface {
  font-family: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.05rem);
  line-height: 1.6;
  color: inherit;
}

/* Textos pequeños y metadatos: Alumni Sans Pinstripe */
small, .mini-note, .form-status, .about-meta span, .event-meta span, .event-tag, .event-date { font-family: 'Alumni Sans Pinstripe', 'Inter', system-ui, sans-serif; }

/* About (Sobre mí) */
.about-wrapper { 
  display: grid; 
  grid-template-columns: 1fr minmax(320px, 480px); /* text left, image right */ 
  gap: clamp(2rem,5vw,4rem); 
  align-items: stretch; 
}
.about-section { /* whole section background should be brand red except the text box */
  background: #E7473C;
  background-image: none;
  color: #F0F0F0; /* default text in the section (image column will keep its own styling) */
}

/* Legacy: keep about-wrapper as centered two-column layout */
.about-wrapper { max-width: var(--max-width); margin: 0 auto; }
.about-media { 
  margin:0; 
  background:#E7473C; /* color de la columna imagen */
  background-image:linear-gradient(150deg,#E7473C 0%,#d6392d 60%, #b9261d 100%);
  border-radius: clamp(10px,1.2vw,18px); 
  overflow: hidden; 
  position: relative; 
  aspect-ratio: 3/4; 
  display: flex; 
}
.about-media { grid-column: 2; }
.about-text { grid-column: 1; }

@media (max-width: 820px) {
  .about-wrapper { grid-template-columns: 1fr; }
  .about-media, .about-text { grid-column: auto; }
}
.about-media, .about-media::before, .about-media::after, .about-media img, .about-media * {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
}
.about-media img { 
  width:100%; 
  height:100%; 
  object-fit: cover; 
  display:block; 
  /* Difuminado intenso solo en el borde derecho */
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: opacity .8s cubic-bezier(.2,.9,.3,1), transform .8s cubic-bezier(.2,.9,.3,1), -webkit-mask-image .6s ease, mask-image .6s ease; 
}

/* Progressive reveal for the about image */
.about-media img.reveal { opacity: 0; transform: translateY(14px) scale(1.02); }
.about-media img.reveal.visible { opacity: 1; transform: translateY(0) scale(1); }
.about-text { 
  align-self: start; 
  max-width: 70ch; 
  background: #F0F0F0; /* fondo claro para la columna de texto */
  color: #E7473C; /* tipografeda en color de marca */
  padding: clamp(1.2rem,2.6vw,2.6rem);
  border-radius: clamp(10px,1.2vw,18px);
  position: relative;
  z-index: 2; /* ensure it sits above the section red background */
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}
/* Make paragraph text in About match the teaching-intro paragraphs */
.about-text p { color: #333; }
/* framed reveal for about-text */
.about-text.reveal { opacity: 0; transform: translateY(22px) scale(.99); }
.about-text.reveal::before, .about-text.reveal::after { content: ""; position:absolute; pointer-events:none; }

/* Restore framed appearance for the About image column */
.about-media {
  /* Reinstate the original warm gradient as the background */
  background: linear-gradient(150deg,#E7473C 0%,#d6392d 60%, #b9261d 100%) !important;
  border-radius: clamp(10px,1.2vw,18px) !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 16px 44px rgba(0,0,0,0.28) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

.about-media img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.28) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}
.about-text.reveal::before {
  left: -8px; top: -8px; right: -8px; bottom: -8px;
  border-radius: calc(clamp(10px,1.2vw,18px) + 8px);
  box-shadow: inset 0 0 0 2px rgba(231,71,60,0.0); /* initial transparent border */
  transition: box-shadow .6s cubic-bezier(.2,.9,.3,1), transform .6s cubic-bezier(.2,.9,.3,1);
}
.about-text.reveal::after {
  left: -14px; top: -14px; right: -14px; bottom: -14px;
  border-radius: calc(clamp(10px,1.2vw,18px) + 14px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
  opacity: 0;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.9,.3,1);
  transform: translateY(6px) scale(.995);
}
.about-text.reveal.visible::before { box-shadow: inset 0 0 0 2px rgba(231,71,60,0.95); }
.about-text.reveal.visible::after { opacity: 1; transform: translateY(0) scale(1); }
.about-text.reveal.visible { opacity: 1; transform: translateY(0) scale(1); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.9,.3,1); }
/* Make sure headings and small meta inside the about text inherit brand color */
.about-text h2, .about-text h3, .about-text .about-meta span { color: #E7473C; }
.about-text a { color: #E7473C; }
.about-text p { color: #333; }
.about-text h2 { margin-top:0; }

/* inner reveal timing for about-text content */
.about-text .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.9,.3,1); }
.about-text .reveal.visible { opacity: 1; transform: translateY(0); }
.about-meta { 
  margin-top:1.4rem; 
  display:flex; 
  flex-wrap:wrap; 
  gap:.6rem; 
  font-size:.75rem; 
  letter-spacing:.5px; 
  text-transform:uppercase; 
}
.about-meta span { 
  /* Make these act and look more like buttons */
  background: #ffffff;                        /* white pill */
  color: #E7473C;                             /* brand accent text */
  padding: .55rem .9rem;                      /* slightly larger click area */
  border: 1px solid rgba(231,71,60,0.12);     /* subtle brand border */
  border-radius: 999px;                       /* pill */
  font-weight: 600;
  font-size: .88rem;
  box-shadow: 0 8px 22px rgba(231,71,60,0.06);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5ch;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.about-meta span:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(231,71,60,0.10); }
.about-meta span:active { transform: translateY(-1px); }
.about-meta span:focus-visible { outline: 3px solid rgba(231,71,60,0.12); outline-offset: 3px; }

/* Slightly lower the about text box on wider screens so it aligns better with the image */
@media (min-width: 821px) {
  .about-text {
  /* move the box down more so it aligns with the image on larger viewports */
  margin-top: clamp(1.2rem, 3.2vw, 4rem);
  }
}

/* Make action links inside Publications intro match the pill-buttons in About */
.pub-links { margin-top: 3rem; display:flex; gap:.6rem; flex-wrap:wrap; text-transform:uppercase; letter-spacing:.5px; font-size:.75rem; }
.pub-links .btn {
  background: #ffffff;
  color: #E7473C;
  padding: .55rem .9rem;
  border: 1px solid rgba(231,71,60,0.12);
  border-radius: 999px;
  font-weight: 600;
  font-size: .88rem;
  font-family: 'Alumni Sans Pinstripe', 'Inter', system-ui, sans-serif;
  box-shadow: 0 8px 22px rgba(231,71,60,0.06);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5ch;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.pub-links .btn:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(231,71,60,0.10); }
.pub-links .btn:active { transform: translateY(-1px); }
.pub-links .btn:focus-visible { outline: 3px solid rgba(231,71,60,0.12); outline-offset: 3px; }

/* Extra top spacing specifically for the first button (Digibug) */
.pub-links .btn:first-of-type { margin-top: 1rem; }

/* Match spacing for the second button so both are aligned */
.pub-links .btn:nth-of-type(2) { margin-top: 1rem; }

/* On narrow viewports the layout stacks; make the image fade from the top edge instead
   of from a side so the transition looks natural when the image sits above/below text */
@media (max-width: 820px) {
  .about-media img {
    /* Fade starting at the very top and becoming opaque further down */
  -webkit-mask-image: none !important;
  mask-image: none !important;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
}

 

/* Highlights (En curso) — fondo claro y texto en color de marca */
#highlights {
  background: #F0F0F0;
  color: #E7473C;
}
#highlights h1, #highlights h2, #highlights h3 {
  color: #E7473C;
}
/* Ajuste de espaciado: los h2 en 'En curso' deben estar más separados de la línea anterior
   y más próximos a las tarjetas inmediatamente debajo */
#highlights h2 {
  margin-top: 1.6rem;   /* más distancia respecto al elemento anterior */
  margin-bottom: 0.6rem; /* menos distancia hacia las tarjetas */
}
#highlights .card {
  background: #fff;
  border: 1px solid rgba(231,71,60,0.08);
  backdrop-filter: none;
  color: #E7473C;
}
#highlights .card::before {
  background: linear-gradient(120deg, rgba(231,71,60,0.06), transparent 65%);
}

/* Hero */
.hero { padding:0; overflow:hidden; }
.hero-video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; filter:none;
}
/* .hero-overlay removed — video is displayed fully opaque */
.hero-content { position:relative; padding: clamp(4rem,12vw,10rem) 1.5rem 6rem; }
.scroll-indicator { position:absolute; bottom:1.25rem; left:50%; transform:translateX(-50%); font-size:1.5rem; opacity:.7; animation: float 2.5s ease-in-out infinite; }
@keyframes float { 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }

.grid.features, .grid.services { display:grid; gap:1.4rem; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }

/* Datos básicos: forzar exactamente 2 columnas en escritorio y 1 en móvil.
   Uso de un selector específico y !important para anular reglas genéricas. */
section#datos-basicos .datos-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.4rem;
}
@media (max-width: 820px) {
  section#datos-basicos .datos-grid { grid-template-columns: 1fr !important; }
}

/* Metodología: tres cajas dispuestas en dos columnas (2 en la primera fila, 1 centrada en la segunda) */
.metodologia-grid {
  display: grid;
  /* two equal columns: each card will occupy half the available page/container width */
  grid-template-columns: repeat(2, 50%);
  gap: 1.2rem;
  align-items: start;
  width: 100%;
}
@media (max-width: 820px) {
  .metodologia-grid { grid-template-columns: 1fr; }
}

/* Make metodologia grid follow the same exact rules as datos-basicos (two columns on desktop, one on mobile) */
section#metodologia .datos-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.4rem;
}
@media (max-width: 820px) {
  section#metodologia .datos-grid { grid-template-columns: 1fr !important; }
}

/* Ensure Evaluación uses the same 2x2 layout as Datos básicos */
section#evaluacion .datos-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.4rem;
}
@media (max-width: 820px) {
  section#evaluacion .datos-grid { grid-template-columns: 1fr !important; }
}

/* Styles for lecciones accordion */



/* Ensure each metodologia card fills its column and has consistent sizing */
.metodologia-grid > article.card {
  width: 100%;
  box-sizing: border-box;
}

/* Específico para la sección En curso: filas de dos tarjetas dentro de cada cuadro */
.en-curso-grid .grid.features {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 820px) {
  /* asegurar márgenes iguales a izquierda y derecha para la franja y su contenido
     y apilar las tarjetas de 'En curso' en móviles */
  .en-curso-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .curso-card { width: 100%; }
  /* On mobile keep the intro image inside the card bounds (no negative margins) */
  .curso-card.intro .resumen-media {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
  .curso-card.intro .resumen-media img { max-height: none; display:block; width:100%; height:auto; object-fit:cover; }
}

/* Datos básicos: dos cajas por fila en pantallas grandes, apiladas en móviles */
.datos-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}
@media (max-width: 680px) {
  .datos-grid { grid-template-columns: 1fr; }
}
.card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); padding:1.25rem 1.1rem 1.4rem; border-radius: var(--radius); backdrop-filter: blur(10px); position:relative; overflow:hidden; }
.card::before { content:""; position:absolute; inset:0; background: none; opacity:0; transition: var(--transition); pointer-events: none; }
.card:hover::before { opacity:0; }
.card h3 { margin-top:0; }

.masonry { columns: 2 300px; column-gap:1rem; }
.masonry .item { break-inside: avoid; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); padding:1rem; margin:0 0 1rem; border-radius: var(--radius); }

.testimonials { display:grid; gap:1.5rem; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); }
.testimonials figure { margin:0; padding:1.2rem 1rem 1.4rem; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); }
.testimonials blockquote { margin:0 0 .75rem; font-size:1.05rem; }

/* Form */
form { display:grid; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:.4rem; }
input, textarea { background: #1c222b; color: var(--fg); border:1px solid #2a313c; padding:.75rem .9rem; border-radius:8px; font:inherit; resize:vertical; }
input:focus, textarea:focus { outline:2px solid rgba(var(--accent-rgb),.6); border-color:rgba(var(--accent-rgb),.6); }
/* Overlay that appears after first video playback */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: #E7473C;
  opacity: 0;
  transition: opacity .45s ease;
  z-index: 40;
  pointer-events: none;
}

.hero-overlay.visible { opacity: 1; pointer-events: auto; }

/* Welcome overlay arrows grouping */
.hero-welcome-inner { display:flex; flex-direction:column; align-items:center; gap:1.2rem; text-align:center; }
.hero-arrows { display:flex; gap:1rem; align-items:center; justify-content:center; margin-top:.6rem; }
.hero-arrow { display:inline-flex; width:64px; height:64px; align-items:center; justify-content:center; background:rgba(255,255,255,.1); border-radius:999px; color:var(--fg); text-decoration:none; transition:transform .28s ease, background .28s ease; border:1px solid rgba(255,255,255,.12); }
.hero-arrow svg { width:28px; height:28px; display:block; }
.hero-arrow:focus-visible { outline:3px solid rgba(255,255,255,.12); outline-offset:4px; }
.hero-arrow:hover { transform:translateY(-4px); background:rgba(255,255,255,.16); }
.hero-arrow--secondary { background:transparent; border:1px dashed rgba(255,255,255,.12); opacity:.95; }
.hero-arrow--secondary:hover { background: rgba(255,255,255,.06); transform:translateY(-3px) scale(1.02); }


.hero-welcome {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity .5s ease, transform .45s cubic-bezier(.2,.9,.3,1);
  pointer-events: none;
}
.hero-welcome.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.hero-welcome-inner { text-align: center; color: #fff; }
.hero-welcome h1 { margin:0; font-size: clamp(2.6rem,6vw,3.6rem); letter-spacing: .6px; }
.hero-welcome .hero-tagline { margin-top:.6rem; font-size:1.05rem; opacity: .95; }

.hero-arrow { display:inline-flex; margin-top:1.1rem; width:56px; height:56px; align-items:center; justify-content:center; background: rgba(255,255,255,0.08); border-radius: 12px; color:#fff; text-decoration:none; transition: transform .22s ease, background .22s ease; }
.hero-arrow svg { width: 30px; height: 30px; }
.hero-arrow:hover { transform: translateY(-4px) scale(1.03); background: rgba(255,255,255,0.12); }

/* Accessible focus and tooltip for hero arrow */
.hero-arrow { position: relative; }
.hero-arrow:focus-visible { outline: 3px solid rgba(255,255,255,0.98); outline-offset: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.45); border-radius: 12px; }
.hero-arrow::after {
  content: attr(aria-label);
  position: absolute;
  left: 50%;
  bottom: -44px;
  transform: translateX(-50%) translateY(6px);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: .42rem .6rem;
  border-radius: 6px;
  font-size: .95rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.hero-arrow:hover::after, .hero-arrow:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.btn:active { transform:translateY(0); }
/* Footer */
.site-footer { background:#333; color:#F0F0F0; padding:2rem 1.5rem; text-align:center; font-size:.85rem; border-top:1px solid rgba(255,255,255,.08); }

/* Footer logos grid */
.footer-logos { display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; align-items:center; justify-items:center; max-width:var(--max-width); margin:0 auto; }
.footer-logo a { display:inline-block; padding:.6rem; }
.footer-logo img { max-width:140px; height:auto; display:block; filter:brightness(1) saturate(0.95); }
@media (max-width:640px){ .footer-logos { grid-template-columns:repeat(2,1fr); gap:.9rem; } .footer-logo img { max-width:120px; } }

/* Scrollbar (WebKit) */
body::-webkit-scrollbar { width:11px; }
body::-webkit-scrollbar-track { background:#0c0e12; }
body::-webkit-scrollbar-thumb { background: rgba(240,240,240,0.5); border-radius:20px; }
body::-webkit-scrollbar-thumb:hover { background: rgba(240,240,240,0.7); }
/* Firefox */
html { scrollbar-color: rgba(240,240,240,0.5) transparent; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; scroll-behavior:auto; }
}

@media (max-width: 640px){
  h1 { font-size: clamp(2.3rem,9vw,3.2rem); }
  .hero-content { padding-top: clamp(5rem,18vw,8rem); }
  .scroll-top { width:42px; height:42px; bottom:.85rem; right:.85rem; border-radius:12px; }
}

/* Scope: force all main sections in asignatura page to use Home's background */
body.asignatura main .section,
body.asignatura main section[id] {
  /* Use the same brand background as the site's root (Home appearance) */
  background: var(--bg);
  color: var(--fg);
}

/* Ensure sections that previously used alt or light backgrounds invert to the brand palette */
body.asignatura main .section.alt,
body.asignatura main #recursos,
body.asignatura main #lecciones,
body.asignatura main #informacion,
body.asignatura main #seminarios,
body.asignatura main #home {
  background: var(--bg) !important;
  color: var(--fg) !important;
}

/* Adjust headings and key elements to ensure contrast on the brand background */
body.asignatura main h1,
body.asignatura main h2,
body.asignatura main h3,
body.asignatura main p,
body.asignatura main .card,
body.asignatura main .info-card,
body.asignatura main .resource-card {
  color: var(--fg) !important;
}

/* For contact and form fields in this page, keep the existing light form styling but ensure labels are readable */
/* contact styles are kept global for index.html; page-scoped overrides removed */


/* Reflujo responsive de Sobre mí (difuminado pasa al borde inferior) */
@media (max-width: 980px){
  .about-wrapper { grid-template-columns: 1fr; }
  .about-media { aspect-ratio: 5/3; }
  /* En pantallas pequeñas: difuminado intenso solo en el borde inferior */
  .about-media img { 
  -webkit-mask-image: none !important;
  mask-image: none !important;
  }
}

/* ================= Docencia Tabs ================= */
.section-heading { max-width:var(--max-width); }
.teaching-tabs.full-bleed { width:100%; margin:0; padding: clamp(1.8rem,4vw,3.2rem) min(5vw,3rem) clamp(3.2rem,6vw,4.2rem); background:#F0F0F0; position:relative; overflow:hidden; }
.teaching-tabs.full-bleed:before { content:none; }
.teaching-tabs { color:#E7473C; }
.teaching-tabs .tabs-header { display:flex; gap:.85rem; flex-wrap:wrap; margin:0 0 2rem; }
.teaching-tabs .tab { position:relative; background:#ffffff; border:1px solid #d0d0d0; color:#E7473C; padding:.75rem 1.25rem .7rem; font:600 .92rem/1.05 system-ui,-apple-system,sans-serif; letter-spacing:.6px; border-radius:11px; cursor:pointer; transition:background .4s, color .4s, border-color .4s, box-shadow .4s; display:inline-flex; align-items:center; gap:.5ch; }
.teaching-tabs .tab:before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(140deg,rgba(255,81,0,.25),rgba(255,81,0,0) 65%); opacity:0; transition:.55s; }
.teaching-tabs .tab:hover:not(.active), .teaching-tabs .tab:focus-visible:not(.active) { background:#fafafa; color:#E7473C; border-color:#c4c4c4; }
.teaching-tabs .tab:hover:not(.active):before { opacity:.6; }
.teaching-tabs .tab.active { background:linear-gradient(155deg,#ffdacd,#ffc2b8 55%,#ffb3a8); color:#E7473C; border-color:#ffb3a8; box-shadow:0 4px 14px -4px rgba(255,120,40,.35),0 0 0 1px rgba(255,255,255,.6) inset; }
.teaching-tabs .tab.active:before { opacity:.95; filter:blur(3px); mix-blend-mode:overlay; }
.tabs-panels { position:relative; width:100%; }
.tab-panel { animation: tabPanel .6s cubic-bezier(.55,.15,.25,1) both; }
.tab-panel[hidden] { display:none !important; }
@keyframes tabPanel { from { opacity:0; transform:translateY(22px) scale(.98);} to { opacity:1; transform:translateY(0) scale(1);} }
.teaching-grid { --cols:2; display:grid; gap: clamp(.9rem,1.6vw,1.5rem); grid-template-columns:repeat(var(--cols),minmax(0,1fr)); }
.tcard { background:#E7473C; border:1px solid rgba(255,255,255,0.12); border-radius:18px; padding:1.05rem .95rem 1.15rem; font:500 .8rem/1.18 ui-monospace,monospace; letter-spacing:.55px; color:#F0F0F0; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; min-height:80px; text-align:center; isolation:isolate; box-shadow:0 6px 18px -8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04); transition: border-color .4s, transform .45s, background .6s, box-shadow .45s; }
.tcard:before, .tcard:after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
.tcard:before { background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.06), transparent 70%); opacity:0; transition:opacity .55s; }
.tcard:after { background:linear-gradient(120deg, rgba(255,255,255,0.06), transparent 55%); opacity:.22; mix-blend-mode:multiply; }
.tcard:hover { transform:translateY(-6px); border-color:rgba(255,255,255,0.22); box-shadow:0 12px 28px -12px rgba(0,0,0,.32); }
.tcard:hover:before { opacity:1; }
.tcard:focus-visible { outline:2px solid rgba(255,255,255,0.28); outline-offset:3px; }

.tcard h3 { margin: 0; font-size: 1rem; }
.tcard p { margin: 0; font-size: .85rem; opacity: .95; }
@media (max-width:560px){ .teaching-grid { --cols:1; } .tcard { min-height:68px; } }
.teaching-tabs .tab, .tcard { will-change:transform; }

/* ================= Publicaciones -> LIBROS Accordion ================= */
.pub-accordion { padding:0; }
.pub-accordion .acc-trigger { width:100%; background:#1d232b; color:var(--fg); border:1px solid rgba(255,255,255,.1); padding:1rem 3.2rem 1rem 1.1rem; font:600 .9rem/1.2 system-ui,-apple-system,sans-serif; letter-spacing:.6px; text-align:left; border-radius: var(--radius); cursor:pointer; position:relative; transition:var(--transition); }
.pub-accordion .acc-trigger:hover, .pub-accordion .acc-trigger:focus-visible { background:#242c36; border-color:rgba(255,255,255,.25); }
.pub-accordion .acc-trigger[aria-expanded="true"] { background:linear-gradient(145deg,rgba(var(--accent-rgb),.3),rgba(var(--accent-rgb),.15)); box-shadow:0 6px 18px -8px rgba(0,0,0,.45),0 0 0 1px rgba(var(--accent-rgb),.3) inset; }
.pub-accordion .acc-trigger .chevron { position:absolute; top:50%; right:1rem; width:14px; height:14px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-50%) rotate(45deg); transition:transform .45s ease; }
.pub-accordion .acc-trigger[aria-expanded="true"] .chevron { transform:translateY(-50%) rotate(225deg); }
.pub-accordion .acc-panel { margin-top:.9rem; border:1px solid rgba(255,255,255,.08); border-radius:calc(var(--radius) + 4px); padding:1.25rem 1rem 1.6rem; background:rgba(255,255,255,.03); backdrop-filter:blur(10px); position:relative; overflow:hidden; animation: accIn .65s cubic-bezier(.55,.15,.25,1) both; }
@keyframes accIn { from { opacity:0; transform:translateY(18px) scale(.98);} to { opacity:1; transform:translateY(0) scale(1);} }
.libros-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem 1.15rem; }
.libro { background:#1c222b; border:1px solid #2a313c; border-radius:18px; display:flex; gap:.95rem; padding:.85rem .9rem; position:relative; overflow:hidden; min-height:118px; }
.libro figure { margin:0; flex:0 0 82px; aspect-ratio:3/4; border-radius:12px; overflow:hidden; background:#111; display:flex; align-items:center; justify-content:center; position:relative; }
.libro img { width:100%; height:100%; object-fit:cover; display:block; }
.libro-body { display:flex; flex-direction:column; gap:.4rem; }
.libro-body h3 { margin:.1rem 0 0; font:600 .95rem/1.15 system-ui,-apple-system,sans-serif; letter-spacing:.4px; }
.libro-body p { margin:0; font-size:.72rem; line-height:1.25; max-width:none; opacity:.85; }
.libro:before { content:""; position:absolute; inset:0; background: none; mix-blend-mode: normal; opacity:0; transition:opacity .6s; pointer-events: none; }
.libro:hover:before { opacity:0; }
.libro:hover { border-color: rgba(255,255,255,0.08); box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); transform: translateY(-4px); }
.libro { transition: border-color .45s, box-shadow .5s, transform .5s; }
@media (max-width:800px){ .libros-grid { grid-template-columns:1fr; } }
@media (max-width:560px){ .pub-accordion .acc-trigger { font-size:.85rem; padding: .85rem 2.6rem .85rem .95rem; } .libro { flex-direction:row; min-height:110px; } .libro figure { flex:0 0 70px; } }

/* ===== Publicaciones Tabs (nuevo diseño) ===== */
#portfolio { background:#E7473C; background-image:linear-gradient(135deg,#E7473C 0%, #d6392d 58%, #b9261d 100%); }
#portfolio { display:flex; flex-direction:column; align-items:stretch; }
#portfolio .section-heading { width:100%; max-width:var(--max-width); margin:0 auto 1.8rem; }
.pub-tabs, .pub-tabs * { color:#F0F0F0; }
.pub-tabs.full-bleed { width:100%; max-width:var(--max-width); margin:0 auto; padding: clamp(2.2rem,5vw,3.8rem) clamp(1.2rem,3vw,2rem) clamp(3.4rem,6vw,4.2rem); position:relative; }
.pub-tabs-header { display:flex; flex-wrap:wrap; gap:.9rem; margin:0 0 2.4rem; }
.pub-tab { position:relative; background:#E7473C; border:1px solid #ff8a7d; color:#F0F0F0; padding:.85rem 1.4rem .8rem; font:600 .9rem/1.1 system-ui,-apple-system,sans-serif; letter-spacing:.55px; border-radius:12px; cursor:pointer; overflow:hidden; isolation:isolate; transition:background .5s,border-color .45s,color .4s, box-shadow .55s; }
.pub-tab:before { content:""; position:absolute; inset:0; background: none; opacity:0; transition:opacity .7s; mix-blend-mode:normal; pointer-events:none; }
.pub-tab:after { content:""; position:absolute; inset:0; background: none; mix-blend-mode:normal; opacity:0; pointer-events:none; }
.pub-tab:hover:not(.active):before { opacity:.85; }
.pub-tab:hover:not(.active) { border-color:#ffd0c8; }
.pub-tab.active { background:linear-gradient(155deg,#ff8a7d,#ff6b57 55%,#ff553f); border-color:#ffd0c8; box-shadow:0 10px 30px -12px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.45) inset; }
.pub-panels { position:relative; }
.pub-panel { animation: pubTab .65s cubic-bezier(.55,.15,.25,1) both; }
.pub-panel[hidden] { display:none !important; }
@keyframes pubTab { from { opacity:0; transform:translateY(26px) scale(.98);} to { opacity:1; transform:translateY(0) scale(1);} }
.pub-panel[hidden] { display:none !important; }

/* Remove underline for links inside the Publicaciones tabs and ensure card-links inherit styles */
#portfolio a { text-decoration: none; }
#portfolio a:hover, #portfolio a:focus { text-decoration: none; }

/* Ensure anchor-based cards keep the same visual treatment as article.pub-card */
a.pub-card, article.pub-card { text-decoration: none; color: inherit; }

/* Remove underline for generic card links (e.g., course cards in En curso) */
a.card, a.card * { text-decoration: none; color: inherit; }
a.card:hover, a.card:focus { text-decoration: none; }

.pub-card { background:#E7473C; border:1px solid #ff8a7d; border-radius:20px; padding:.95rem .95rem 1.05rem; display:flex; gap:.95rem; position:relative; min-height:170px; overflow:hidden; transition:border-color .5s, transform .55s, box-shadow .55s, background .6s; color:#F0F0F0; }
.pub-card:before { content:""; position:absolute; inset:0; background: none; mix-blend-mode:normal; opacity:0; transition:opacity .7s; pointer-events:none; }
.pub-card:hover:before { opacity:1; }
.pub-card:hover { border-color:#ffd0c8; transform:translateY(-7px); box-shadow:0 16px 38px -16px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.35) inset; }
.pub-card figure { margin:0; flex:0 0 95px; aspect-ratio:3/4; border-radius:0; overflow:hidden; background:#b9261d; display:flex; align-items:center; justify-content:center; position:relative; box-shadow:0 2px 10px -4px rgba(0,0,0,.4) inset; }
.pub-card img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.02); }
.pc-body { display:flex; flex-direction:column; gap:.55rem; justify-content:flex-start; }
.pc-body h3 { margin:.15rem 0 0; font:600 .98rem/1.18 system-ui,-apple-system,sans-serif; letter-spacing:.45px; }
.pc-body p { margin:0; font-size:.74rem; line-height:1.25; opacity:.86; max-width:46ch; }
@media (max-width:600px){ .pub-grid { --cols:1; } .pub-card { min-height:140px; } .pub-card figure { flex:0 0 86px; } }

/* Newsletter */
#newsletter { background:#F0F0F0; color:#E7473C; }
#newsletter h2, #newsletter p, #newsletter label { color:#E7473C; }
.newsletter-form { margin-top:1.4rem; display:flex; flex-direction:column; gap:1rem; }
.form-inline-group { display:flex; gap:.75rem; align-items:stretch; }
.form-inline-group input[type=email] { flex:1; background:#ffffff; border:1px solid #d2d2d2; color:#E7473C; }
.form-inline-group input[type=email]:focus { outline:2px solid #ff7b2f; border-color:#ff7b2f; }
#newsletter .btn.primary { --btn-bg:#E7473C; box-shadow:0 4px 14px -6px rgba(231,71,60,.45); }
#newsletter .btn.primary:hover { filter:brightness(1.06); }
.newsletter-status { font-size:.8rem; min-height:1.1em; }
.mini-note { font-size:.65rem; opacity:.8; margin:0; }
@media (max-width:600px){ .form-inline-group { flex-direction:column; } }

/* Newsletter embed */
#newsletter .newsletter-embed { margin:1.6rem 0 1.2rem; display:flex; justify-content:center; }
#newsletter .newsletter-embed iframe { max-width:100%; width:480px; border-radius:16px; box-shadow:0 12px 34px -18px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.04); transition: box-shadow .6s, transform .6s; }
#newsletter .newsletter-embed iframe:hover { box-shadow:0 18px 46px -16px rgba(0,0,0,.5),0 0 0 1px rgba(231,71,60,.35); transform:translateY(-4px); }
#newsletter .mini-note.centered { text-align:center; margin-top:.6rem; }
@media (max-width:520px){ #newsletter .newsletter-embed iframe { height:360px; } }

/* ================= Teaching intro box ================= */
.teaching-intro { max-width: none; width:100%; margin: 0 0 1.8rem; box-sizing: border-box; }
.teaching-intro-grid { display:block; background: linear-gradient(180deg, rgba(240,240,240,0.95), rgba(255,255,255,0.96)); padding: clamp(1.1rem,2.6vw,1.6rem); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.teaching-intro-text { box-sizing: border-box; display:flex; flex-direction:column; align-items:stretch; }
.teaching-intro-text h3 { margin:0 0 .6rem; color: #E7473C; font-size: clamp(1.05rem,2.6vw,1.4rem); }
.teaching-intro-text p { margin:0 0 .8rem; color: #333; line-height:1.45; }
.teaching-intro-text .meta-actions { margin-top:.6rem; display:flex; gap:.6rem; }
.teaching-intro .btn { background:#E7473C; color:#F0F0F0; padding:.5rem .8rem; border-radius:10px; text-decoration:none; font-weight:600; }
.teaching-intro .btn:hover { filter:brightness(0.96); }
.teaching-intro-media { margin-top:1rem; display:block; overflow:hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); width:100%; box-sizing:border-box; max-width:100%; margin-left:auto; margin-right:auto; }
.teaching-intro-media img { width:100%; max-width:100%; height:auto; object-fit:cover; display:block; aspect-ratio:4/3; object-position:center center; margin:0 auto; border-radius:0; }
@media (max-width:920px){ .teaching-intro-grid { display:block; } .teaching-intro-media { width:100%; } }

/* Publications intro block */
.pub-intro-wrap { max-width: var(--max-width); margin: 0 auto 1.6rem; }
.pub-intro { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 1.2rem; background: #F0F0F0; padding: clamp(1rem,2.4vw,1.6rem); border-radius: 14px; box-shadow: 0 32px 110px rgba(0,0,0,0.32); border: 1px solid rgba(0,0,0,0.09); }
.pub-intro-text { grid-column: 1 / 2; padding-right: .8rem; }
.pub-intro-text h3 { margin:0 0 .6rem; color: #E7473C; font-size: clamp(1.05rem,2.6vw,1.4rem); }
.pub-intro-text p { margin:0; color:#333; line-height:1.45; }
.pub-intro-media { width: 100%; overflow:hidden; border-radius: 0; grid-column: 2 / 3; justify-self: center; max-width: none; }
.pub-intro-media img { width:100%; height:100%; min-height: 320px; max-height: 60vh; object-fit:cover; display:block; margin: 0 auto; }
@media (max-width:720px){ .pub-intro { grid-template-columns: 1fr; } .pub-intro-media { grid-column: auto; width:100%; max-width:100%; } .pub-intro-media img { min-height: 180px; } }

/* Compact variant for use inside other components (e.g., En curso) */
.teaching-intro.compact { background: linear-gradient(180deg, rgba(240,240,240,0.95), rgba(255,255,255,0.96)); padding: .9rem; border-radius: 14px; box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.teaching-intro.compact .teaching-intro-text h3 { font-size: 1.25rem; margin-bottom: .45rem; }
.teaching-intro.compact .teaching-intro-text .preface { margin-bottom: .5rem; }
.curso-card.intro .resumen-media { margin: 0; }

/* Layout split for services: intro left, tabs right */
.services-split { display: grid; grid-template-columns: 1fr minmax(420px, 520px); gap: clamp(1.2rem, 3.6vw, 3.2rem); align-items: start; max-width: var(--max-width); margin: 0 auto 2.4rem; }
.teaching-tabs.full-bleed { margin: 0; padding: clamp(1.8rem,4vw,2.4rem); background: #E7473C; color: #F0F0F0; border-radius: 18px; overflow: hidden; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 20px 48px rgba(0,0,0,0.24); }
.teaching-tabs.full-bleed .tabs-header { margin-bottom: 1.4rem; }
.teaching-tabs.full-bleed .tabs-header .tab { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); color: #F0F0F0; box-shadow: 0 8px 22px rgba(0,0,0,0.16); }
.teaching-tabs.full-bleed .tabs-header .tab.active { background: linear-gradient(155deg,#ffb3a8,#ff8a7d 55%,#ff6b57); color:#fff; border-color: rgba(255,255,255,0.18); box-shadow: 0 12px 34px rgba(0,0,0,0.22); }
.teaching-tabs.full-bleed .tabs-panels { max-height: calc(100vh - 200px); overflow:auto; padding-right: .6rem; }
@media (max-width:1000px){ .services-split { grid-template-columns: 1fr; } .teaching-tabs.full-bleed { margin-top: 1rem; } }


/* Misceláncea */
#miscelanea { background:#E7473C; background-image:linear-gradient(135deg,#E7473C 0%,#d6392d 58%,#b9261d 100%); color:#F0F0F0; }
#miscelanea h2, #miscelanea p, #miscelanea h3 { color:#F0F0F0; }
.misc-grid { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:2rem; }
.misc-card { background:#E7473C; border:1px solid #ff8a7d; padding:1.15rem 1rem 1.35rem; border-radius:20px; position:relative; overflow:hidden; transition: border-color .5s, transform .55s, box-shadow .55s, background .6s; }
.misc-card:before { content:""; position:absolute; inset:0; background: none; mix-blend-mode:normal; opacity:0; transition:opacity .7s; pointer-events:none; }
.misc-card:hover:before { opacity:1; }
.misc-card:hover { border-color:#ffd0c8; transform:translateY(-6px); box-shadow:0 14px 34px -14px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.35) inset; }
.misc-card h3 { margin-top:0; font-size:1rem; letter-spacing:.4px; }
.misc-card p { margin:.6rem 0 0; font-size:.78rem; line-height:1.28; opacity:.9; }

/* Contacto (coherencia visual con secciones claras/rojas) */
#contact { background:#F0F0F0; color:#E7473C; }
#contact h2, #contact p, #contact label { color:#E7473C; }
#contact form { --field-bg:#ffffff; --field-border:#d4d4d4; --field-border-focus:#ff7b2f; }
#contact input, #contact textarea { 
  background: var(--field-bg);
  border:1px solid var(--field-border);
  color:#E7473C;
  box-shadow:0 1px 0 0 rgba(255,255,255,.7) inset;
  transition:border-color .4s, background .5s, color .4s, box-shadow .45s;
}
#contact input::placeholder, #contact textarea::placeholder { color:#e7776f; opacity:.85; }
#contact input:focus, #contact textarea:focus { outline:2px solid var(--field-border-focus); border-color:var(--field-border-focus); background:#fff6f5; }
#contact .btn.primary { --btn-bg:#E7473C; box-shadow:0 4px 14px -6px rgba(231,71,60,.45); }
#contact .btn.primary:hover { filter:brightness(1.06); }
#contact .form-group { position:relative; }
#contact .form-group:focus-within label { text-decoration:underline; }

/* Eventos */
#testimonials { background:#F0F0F0; color:#E7473C; }
#testimonials h2, #testimonials p, #testimonials h3, #testimonials .section-intro { color:#E7473C; }
.events-grid { display:grid; gap: clamp(1.1rem,1.9vw,1.6rem); grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:2rem; }
.event-card { background:#E7473C; border:1px solid #ff8a7d; border-radius:20px; padding:1.05rem .95rem 1.25rem; position:relative; overflow:hidden; transition:border-color .5s, transform .55s, box-shadow .55s, background .6s; display:flex; flex-direction:column; gap:.55rem; color:#F0F0F0; }
.event-card:before { content:""; position:absolute; inset:0; background: none; mix-blend-mode:normal; opacity:0; transition:opacity .7s; pointer-events:none; }
.event-card:hover:before { opacity:1; }
.event-card:hover { border-color:#ffd0c8; transform:translateY(-7px); box-shadow:0 16px 36px -18px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.4) inset; }
.event-meta { display:flex; gap:.5rem; font-size:.62rem; letter-spacing:.6px; text-transform:uppercase; font-weight:600; }
.event-date { background:rgba(255,255,255,.15); padding:.3rem .5rem .25rem; border-radius:8px; }
.event-tag { background:rgba(255,255,255,.08); padding:.3rem .55rem .25rem; border-radius:8px; }
.event-card h3 { margin:.2rem 0 .1rem; font-size:1rem; letter-spacing:.4px; }
.event-card p { margin:0; font-size:.72rem; line-height:1.3; opacity:.9; }
.event-card .event-loc { font-size:.63rem; letter-spacing:.5px; opacity:.75; margin-top:auto; }
/* Forzar color tipografía interno en tarjetas de eventos (mayor especificidad que #testimonials p) */
#testimonials .event-card,
#testimonials .event-card h3,
#testimonials .event-card p,
#testimonials .event-card .event-meta span,
#testimonials .event-card .event-loc { color:#F0F0F0; }

/* Libro del mes */
#libro-mes { background:#E7473C; background-image:linear-gradient(135deg,#E7473C 0%,#d6392d 58%,#b9261d 100%); color:#F0F0F0; }
#libro-mes h2, #libro-mes h3, #libro-mes p, #libro-mes li { color:#F0F0F0; }
.book-month-wrapper { max-width: var(--max-width); margin:0 auto; }
.book-feature { display:grid; grid-template-columns: minmax(240px,320px) 1fr; gap: clamp(2rem,5vw,3.4rem); align-items:center; }
.book-cover { margin:0; border-radius:28px; overflow:hidden; background:#E7473C; background-image:linear-gradient(145deg,#E7473C 0%,#d6392d 58%,#b9261d 100%); position:relative; aspect-ratio:3/4; display:flex; box-shadow:0 10px 26px -14px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.4) inset; }
.book-cover:before { content:""; position:absolute; inset:0; background: none; mix-blend-mode:normal; opacity:0; pointer-events:none; }
.book-cover img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.08) contrast(1.03); }
.book-info { display:flex; flex-direction:column; gap:1rem; justify-content:center; }
.book-title { margin:.2rem 0 0; font-size:1.55rem; line-height:1.18; letter-spacing:.5px; }
.book-desc { margin:.2rem 0 .6rem; max-width:60ch; font-size:.84rem; line-height:1.38; }
.book-meta { list-style:none; margin:0 0 1.2rem; padding:0; display:flex; flex-wrap:wrap; gap:.8rem 1.4rem; font-size:.68rem; letter-spacing:.55px; text-transform:uppercase; }
.book-meta li { background:rgba(255,255,255,.15); color:#F0F0F0; padding:.55rem .8rem .48rem; border-radius:1000px; border:1px solid rgba(255,255,255,.35); box-shadow:0 1px 0 0 rgba(255,255,255,.3) inset; font-weight:600; }
#libro-mes .btn.primary { --btn-bg:#F0F0F0; --btn-fg:#E7473C; box-shadow:0 4px 14px -6px rgba(255,255,255,.4); color:#E7473C; }
#libro-mes .btn.primary:hover { filter:brightness(1.05); }
@media (max-width:980px){ .book-feature { grid-template-columns: minmax(200px,260px) 1fr; gap:2.2rem; } }
@media (max-width:820px){ .book-feature { grid-template-columns:1fr; } .book-cover { aspect-ratio:5/3; } .book-meta { gap:.6rem 1rem; } }

/* INFO section cards: 2x2 grid on desktop, 1 column on small screens */
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.info-grid .card {
  background: inherit; /* show section background */
  color: #fff;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
}

/* Mobile: force seminar grid to stack cards one-per-row and ensure full-width cards */
@media (max-width: 720px) {
  /* Override any inline grid-template-columns set on .seminar-grid */
  .seminar-grid {
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
    align-items: stretch;
  }

  /* Make each session card take full width and stack vertically */
  .session-card,
  #seminarios .session-card {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0.6rem !important;
    box-sizing: border-box;
  }

  /* Slightly increase spacing between stacked cards for touch targets */
  .session-card + .session-card { margin-top: 0.7rem !important; }

  /* Ensure inner card elements expand to full width */
  .session-card .card,
  .session-card .card-body { width: 100%; }
}
.info-grid .card h3 { margin-top: 0; margin-bottom: 0.5rem; }
.info-grid .card p { margin: 0; opacity: 0.95; }

@media (max-width: 720px) {
  .info-grid { grid-template-columns: 1fr; }
}

/* Caja de vídeo (dos filas de dos iframes) */
.caja-video { margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.caja-video .video-row { display: flex; gap: 1rem; }
.caja-video .video-wrap { position: relative; flex: 1; aspect-ratio: 16 / 9; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.28); }
.caja-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display:block; }
@media (max-width: 880px) { .caja-video .video-row { flex-direction: column; } }
@media (max-width: 520px) { .caja-video { gap: 0.85rem; } }