/* =========================================================
   ACTIVIDAD ACADÉMICA — VIDEO DESTACADO
   Capítulo 03. Sin base de datos.
   ========================================================= */

.academic-video{
  width:min(1460px,calc(100% - 48px));
  max-width:1460px;
  margin:0 auto;
  padding:clamp(3.5rem,6vw,5.5rem) 0 clamp(4.5rem,7vw,7rem);
  border-top:1px solid rgba(85,54,79,.12);
}

.academic-video-heading{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(260px,.48fr);
  align-items:end;
  gap:clamp(1rem,2.5vw,2.5rem);
  margin-bottom:clamp(2rem,4vw,3rem);
}

.academic-video-heading .academic-chapter-number{
  align-self:start;
  color:#9caf9a;
  font-family:Georgia,"Times New Roman",serif;
  font-size:2rem;
  font-style:italic;
  line-height:1;
}

.academic-video-heading .eyebrow{
  display:block;
  margin-bottom:.55rem;
  color:var(--accent);
  font-size:.75rem;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.academic-video-heading h2{
  max-width:18ch;
  margin:0;
  color:var(--primary);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.5rem,4vw,4.2rem);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1;
}

.academic-video-heading>p{
  max-width:42ch;
  margin:0 0 .35rem;
  color:#786f76;
  line-height:1.7;
}

.academic-video-layout{
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  align-items:center;
  gap:clamp(2.5rem,6vw,6rem);
  padding:clamp(1.6rem,3vw,2.5rem);
  background:rgba(255,255,255,.58);
  border:1px solid rgba(85,54,79,.12);
  border-radius:22px;
}

.academic-video-media{
  width:min(100%,390px);
  justify-self:center;
}

.academic-video-media video,
.academic-video-placeholder{
  display:block;
  width:100%;
  aspect-ratio:9/16;
  overflow:hidden;
  border-radius:20px;
  background:#2d252c;
}

.academic-video-media video{
  height:auto;
  object-fit:contain;
}

.academic-video-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2rem;
  color:#fff;
  text-align:center;
  background:
    radial-gradient(circle at 50% 35%,rgba(223,118,93,.2),transparent 34%),
    linear-gradient(160deg,#5a4055,#2b242a);
}

.academic-video-play{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  margin-bottom:1.15rem;
  padding-left:4px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:50%;
  font-size:1.3rem;
}

.academic-video-placeholder strong{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.5rem;
  font-weight:500;
}

.academic-video-placeholder small{
  margin-top:.75rem;
  color:rgba(255,255,255,.72);
  font-size:.76rem;
  line-height:1.6;
}

.academic-video-placeholder code{
  color:#fff;
  font-size:.74rem;
}

.academic-video-copy{
  max-width:650px;
}

.academic-video-kicker{
  display:block;
  margin-bottom:.85rem;
  color:var(--accent);
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.academic-video-copy h3{
  max-width:19ch;
  margin:0;
  color:#40383f;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2rem,3vw,3.2rem);
  font-weight:500;
  letter-spacing:-.03em;
  line-height:1.08;
}

.academic-video-copy>p{
  max-width:58ch;
  margin:1.15rem 0 0;
  color:#756c73;
  line-height:1.75;
}

.academic-video-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:1.6rem;
  padding-top:.95rem;
  color:var(--accent);
  font-size:.76rem;
  font-weight:850;
  letter-spacing:.075em;
  text-decoration:none;
  text-transform:uppercase;
  border-top:1px solid rgba(85,54,79,.12);
}

.academic-video-link span{
  transition:transform .2s ease;
}

.academic-video-link:hover span{
  transform:translate(.15rem,-.15rem);
}

.academic-video-link-pending{
  margin-top:1.5rem !important;
  color:#9a9097 !important;
  font-size:.82rem;
}

@media(max-width:900px){
  .academic-video-heading{
    grid-template-columns:auto minmax(0,1fr);
  }

  .academic-video-heading>p{
    grid-column:2;
  }

  .academic-video-layout{
    grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);
  }
}

@media(max-width:700px){
  .academic-video{
    width:calc(100% - 28px);
    padding:3rem 0 4rem;
  }

  .academic-video-heading{
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    gap:.8rem;
  }

  .academic-video-heading .academic-chapter-number{
    font-size:1.55rem;
  }

  .academic-video-heading h2{
    max-width:none;
    font-size:clamp(2.2rem,10vw,3.1rem);
  }

  .academic-video-heading>p{
    grid-column:1/-1;
    margin-top:.4rem;
  }

  .academic-video-layout{
    grid-template-columns:1fr;
    gap:1.7rem;
    padding:1.2rem;
    border-radius:17px;
  }

  .academic-video-media{
    width:min(82vw,340px);
  }

  .academic-video-copy h3{
    max-width:none;
    font-size:clamp(1.8rem,8vw,2.45rem);
  }
}

@media(prefers-reduced-motion:reduce){
  .academic-video-link span{
    transition:none;
  }

  .academic-video-link:hover span{
    transform:none;
  }
}


/* =========================================================
   VIDEO DESTACADO V3 — BLOQUE DE TEXTO EDITORIAL
   SOLO afecta la columna de texto que acompaña al video.
   No cambia video, tamaño, posición ni layout general.
   ========================================================= */

.academic-video-copy{
  position:relative;
  max-width:720px;
  padding-left:clamp(1.35rem,2.4vw,2rem);
}

/* Línea editorial vertical muy sutil */
.academic-video-copy::before{
  content:"";
  position:absolute;
  left:0;
  top:.15rem;
  bottom:.2rem;
  width:1px;
  background:linear-gradient(
    to bottom,
    rgba(217,110,88,.65),
    rgba(77,48,73,.12) 55%,
    transparent
  );
}

/* Etiqueta más académica y menos plana */
.academic-video-kicker{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin:0 0 1rem;
  padding:.42rem .68rem;

  color:#d96e58;
  background:rgba(217,110,88,.075);

  border:1px solid rgba(217,110,88,.18);
  border-radius:999px;

  font-size:.68rem;
  font-weight:900;
  letter-spacing:.105em;
  line-height:1;
  text-transform:uppercase;
}

/* Título con más presencia editorial */
.academic-video-copy h3{
  position:relative;

  max-width:17ch;
  margin:0;
  padding:0 0 1.15rem;

  color:#4d3049;

  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.35rem,3.35vw,3.65rem);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1.03;

  text-wrap:balance;
}

/* Subrayado editorial corto */
.academic-video-copy h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;

  width:72px;
  height:1px;

  background:rgba(77,48,73,.22);
}

/* Descripción: mejor bloque de lectura */
.academic-video-copy>p:not(.academic-video-link-pending){
  max-width:54ch;
  margin:1.15rem 0 0;
  padding-left:1rem;

  color:#746b72;

  font-size:.96rem;
  line-height:1.75;

  border-left:2px solid rgba(147,166,145,.5);
}

/* Enlace real de Facebook: CTA editorial */
.academic-video-link{
  display:inline-flex;
  align-items:center;
  gap:.55rem;

  min-height:44px;

  margin-top:1.45rem;
  padding:.72rem 1rem;

  color:#d96e58;
  background:transparent;

  border:1px solid rgba(217,110,88,.55);
  border-radius:999px;

  font-size:.7rem;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;
  text-decoration:none;
  text-transform:uppercase;

  transition:
    color .22s ease,
    background-color .22s ease,
    border-color .22s ease;
}

.academic-video-link span{
  display:inline-block;
  transition:transform .22s ease;
}

.academic-video-link:hover{
  color:#fff;
  background:#d96e58;
  border-color:#d96e58;
}

.academic-video-link:hover span{
  transform:translate(.18rem,-.08rem);
}

/* Mientras el enlace todavía no exista */
.academic-video-link-pending{
  position:relative;

  max-width:48ch;
  margin:1.35rem 0 0 !important;
  padding:.8rem 0 .8rem 1.75rem !important;

  color:#91878e !important;

  font-size:.76rem !important;
  line-height:1.55 !important;

  border-top:1px solid rgba(77,48,73,.10);
  border-bottom:1px solid rgba(77,48,73,.10);
}

.academic-video-link-pending::before{
  content:"";
  position:absolute;
  left:.15rem;
  top:50%;

  width:7px;
  height:7px;

  background:#93a691;

  border-radius:50%;

  transform:translateY(-50%);
}

/* Tablet */
@media(max-width:900px){
  .academic-video-copy{
    padding-left:1.35rem;
  }

  .academic-video-copy h3{
    max-width:18ch;
    font-size:clamp(2.15rem,4vw,3rem);
  }
}

/* Móvil */
@media(max-width:700px){
  .academic-video-copy{
    max-width:none;
    padding:0;
  }

  .academic-video-copy::before{
    display:none;
  }

  .academic-video-kicker{
    margin-bottom:.8rem;
    font-size:.64rem;
  }

  .academic-video-copy h3{
    max-width:none;
    padding-bottom:.9rem;

    font-size:clamp(1.95rem,8.5vw,2.65rem);
    line-height:1.05;
  }

  .academic-video-copy h3::after{
    width:54px;
  }

  .academic-video-copy>p:not(.academic-video-link-pending){
    max-width:none;
    margin-top:.95rem;
    padding-left:.85rem;

    font-size:.88rem;
    line-height:1.65;
  }

  .academic-video-link{
    min-height:46px;
    margin-top:1.1rem;
    padding:.75rem .95rem;

    font-size:.66rem;
  }

  .academic-video-link-pending{
    max-width:none;
    margin-top:1.1rem !important;
    font-size:.72rem !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .academic-video-link,
  .academic-video-link span{
    transition:none !important;
  }

  .academic-video-link:hover span{
    transform:none !important;
  }
}


/* =========================================================
   VIDEO DESTACADO V4 — MENOS ESPACIO ANTES DE TESTIMONIOS
   ÚNICO cambio: reduce la separación vertical inferior
   entre Video destacado y la siguiente sección.
   ========================================================= */

/* El propio capítulo de video termina con menos aire */
#actividad-academica .academic-video{
  padding-bottom:1.6rem !important;
}

/* El contenedor académico también tenía padding inferior;
   se reduce SOLO cuando contiene el video destacado. */
#actividad-academica.academic-hub:has(.academic-video){
  padding-bottom:1.8rem !important;
}

/* Tablet */
@media(max-width:900px){
  #actividad-academica .academic-video{
    padding-bottom:1.4rem !important;
  }

  #actividad-academica.academic-hub:has(.academic-video){
    padding-bottom:1.6rem !important;
  }
}

/* Móvil */
@media(max-width:700px){
  #actividad-academica .academic-video{
    padding-bottom:1.1rem !important;
  }

  #actividad-academica.academic-hub:has(.academic-video){
    padding-bottom:1.35rem !important;
  }
}


/* =========================================================
   VIDEO DESTACADO V5 — YOUTUBE 16:9 / CLEAN EDITORIAL
   SOLO afecta #video-destacado.
   - Reemplaza formato vertical por YouTube horizontal 16:9
   - Mantiene texto editorial al costado
   - Responsive real
   ========================================================= */

#video-destacado .academic-video-layout-youtube{
  display:grid !important;
  grid-template-columns:minmax(0,1.32fr) minmax(300px,.68fr) !important;
  align-items:center !important;
  gap:clamp(2rem,4.5vw,4.8rem) !important;

  padding:0 !important;

  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
}

#video-destacado .academic-video-media-youtube{
  width:100% !important;
  max-width:none !important;
  justify-self:stretch !important;
}

#video-destacado .academic-youtube-frame{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;

  overflow:hidden;

  background:#171417;

  border:1px solid rgba(77,48,73,.11);
  border-radius:18px;

  box-shadow:0 16px 42px rgba(55,42,52,.09);
}

#video-destacado .academic-youtube-frame iframe{
  position:absolute;
  inset:0;

  display:block;

  width:100%;
  height:100%;

  border:0;
}

/* Columna editorial más compacta para acompañar al video horizontal */
#video-destacado .academic-video-copy-youtube{
  max-width:520px !important;
  padding-left:clamp(1.2rem,2vw,1.7rem) !important;
}

#video-destacado .academic-video-copy-youtube h3{
  max-width:15ch !important;

  font-size:clamp(2.15rem,2.9vw,3.25rem) !important;
  line-height:1.04 !important;
}

#video-destacado .academic-video-copy-youtube>p{
  max-width:48ch !important;
}

/* Metadatos ligeros, sin convertirlo en una tarjeta recargada */
#video-destacado .academic-video-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;

  margin-top:1.1rem;
}

#video-destacado .academic-video-meta span{
  display:inline-flex;
  align-items:center;

  min-height:30px;
  padding:.35rem .65rem;

  color:#746b72;
  background:rgba(147,166,145,.08);

  border:1px solid rgba(147,166,145,.22);
  border-radius:999px;

  font-size:.68rem;
  font-weight:750;
  line-height:1;
}

/* CTA YouTube mantiene el lenguaje visual ya aprobado */
#video-destacado .academic-video-link{
  margin-top:1.25rem !important;
}

/* Tablet */
@media(max-width:1000px){
  #video-destacado .academic-video-layout-youtube{
    grid-template-columns:minmax(0,1.12fr) minmax(260px,.88fr) !important;
    gap:2rem !important;
  }

  #video-destacado .academic-video-copy-youtube h3{
    max-width:none !important;
    font-size:clamp(2rem,3.8vw,2.8rem) !important;
  }
}

/* Móvil */
@media(max-width:700px){
  #video-destacado .academic-video-layout-youtube{
    grid-template-columns:1fr !important;
    gap:1.55rem !important;
  }

  #video-destacado .academic-video-media-youtube{
    width:100% !important;
  }

  #video-destacado .academic-youtube-frame{
    border-radius:14px;
    box-shadow:0 10px 28px rgba(55,42,52,.08);
  }

  #video-destacado .academic-video-copy-youtube{
    max-width:none !important;
    padding-left:0 !important;
  }

  #video-destacado .academic-video-copy-youtube h3{
    max-width:none !important;
    font-size:clamp(1.9rem,8vw,2.55rem) !important;
  }

  #video-destacado .academic-video-copy-youtube>p{
    max-width:none !important;
  }

  #video-destacado .academic-video-meta{
    gap:.4rem;
    margin-top:.95rem;
  }

  #video-destacado .academic-video-meta span{
    min-height:29px;
    font-size:.64rem;
  }
}