/* =========================
   PROFESOR (scopeado a #vx_cont)
========================= */

:root{
  --prof-accent-gold:#D59F0F;
  --prof-link-blue:#0697D5;
  --prof-title-blue:#003D64;
  --prof-card-text:#456F80;

  --radius:12px;
  --space-1:.5rem;
  --space-2:.75rem;
  --space-3:1rem;
  --space-4:1.5rem;
  --space-5:2rem;

  --border-color:#CCDFE5;
  --secondary-color:#456F80;
  --light-bg:#f8f9fa;
}

html, body{
  font-family: 'Raleway', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--secondary-color);
}

/* ==========================================
   Estructura general
========================================== */

#vx_cont .mod-profesor.profesor-section{
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#vx_cont .mod-profesor .profesor-container{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
}

/* Wrapper interno con padding */
#vx_cont .mod-profesor .profesor-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 90px var(--space-3) 0; 
}
@media (max-width: 768px){
  #vx_cont .mod-profesor .profesor-inner{
    padding: 32px var(--space-3) 0;
  }
}

/* ===== Layout general (info + menú) ===== */
#vx_cont .mod-profesor .prof-layout{
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
  padding-top: 100px;
  padding-bottom: 130px;
  padding-left: 150px;
  padding-right: 150px;
}
@media (min-width: 768px){
  #vx_cont .mod-profesor .prof-layout{
    grid-template-columns: 3fr 1.2fr;
    align-items: start;
    padding-top: 100px;
    padding-bottom: 130px;
    padding-left: 200px;
    padding-right: 200px;
  }
}

/* ===== Encabezado ===== */
#vx_cont .mod-profesor .profesor-nombre{
  color: var(--prof-title-blue);
  font-weight: 800;
  font-size: clamp(1.7rem, 2.2vw + .7rem, 2.3rem);
  line-height: 1.15;
  margin: 0;
}

/* Línea dorada */
#vx_cont .mod-profesor .prof-divider{
  height: 4px;
  border: 0;
  background: var(--prof-accent-gold);
  border-radius: 999px;
  margin: 12px 0 22px;
}

/* ===== Bloque info (imagen + descripción) ===== */
#vx_cont .mod-profesor .profesor-info{
  display: grid;
  gap: var(--space-4);
  margin-bottom: 1.5rem; /* más aire debajo */
}
@media (min-width: 768px){
  #vx_cont .mod-profesor .profesor-info{
    grid-template-columns: 260px 1fr; /* imagen fija + texto fluido */
    gap: 2.5rem;
    align-items: start;
    margin-bottom: 2rem; /* más altura visual */
  }
}

/* Imagen */
#vx_cont .mod-profesor .profesor-img img{
  display:block;
  width: min(100%, 270px);
  height: 340px;
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  object-fit: cover;
}
@media (max-width: 480px){
  #vx_cont .mod-profesor .profesor-img img{
    width: min(100%, 190px);
  }
}

/* Texto */
#vx_cont .mod-profesor .profesor-texto{
  max-width: 820px;
  color: var(--secondary-color);
  font-size: 1.05rem;
  line-height: 1.8; /* más alto visualmente */
}

/* Caja de bio */
#vx_cont .mod-profesor .bio-box{
  border: 2px solid #0697D5;
  border-radius: 10px;
  padding: calc(var(--space-3) * 1.5); /* más alto interior */
  background: #fff;
  min-height: 235px; /* altura mínima para que luzca más alta */
  display: flex;
  flex-direction: column;
  justify-content: center; /* centra verticalmente el texto */
}
#vx_cont .mod-profesor .bio-box p + p{ margin-top: .7rem; }

/* Cita */
#vx_cont .mod-profesor .prof-quote{
  margin-top: var(--space-5);
  background: #eef6ff;
  border-left: 4px solid var(--prof-accent-gold);
  padding: 16px 18px; /* un poco más alto */
  border-radius: 8px;
  color: #2b4a64;
  line-height: 1.7;
}

/* =========================
   Menú (sidebar / cards)
========================= */
#vx_cont .mod-profesor .prof-sidebar{
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: calc(var(--space-4) * 1.4);
  min-height: 470px;    
  --prof-sec-gap: 40px;
  --prof-sec-pad: 5px;
}

#vx_cont .mod-profesor .prof-side-heading{
  color: var(--prof-title-blue);
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 .85rem;
  padding: var(--prof-sec-pad) 0 .6rem;
  border-bottom: 1px solid var(--border-color);
}

#vx_cont .mod-profesor .prof-side-heading:not(:first-of-type){
  margin-top: var(--prof-sec-gap);
}

/* Grids de cards */
#vx_cont .mod-profesor .prof-card-grid{
  display:grid;
  gap:16px;
  grid-template-columns: 1fr;
  padding-bottom: calc(var(--prof-sec-pad) + 6px);
}
@media (min-width: 768px){
  #vx_cont .mod-profesor .prof-card-grid{
    grid-template-columns: repeat(2,1fr);
  }
}

/* Mini-cards */
#vx_cont .mod-profesor .prof-mini-card{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--border-color);
  border-radius: 12px;
  padding:10px 12px;
  text-decoration:none;
  color: var(--prof-link-blue);
  font-weight:700;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  outline: none;
}
#vx_cont .mod-profesor .prof-mini-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,.08);
  border-color:#c9d2dc;
  color: var(--prof-card-text);
}
#vx_cont .mod-profesor .prof-mini-card:focus-visible{
  box-shadow: 0 0 0 3px rgba(213,159,15,.35);
  border-color: var(--prof-accent-gold);
}
#vx_cont .mod-profesor .prof-mini-card img{
  width:20px;
  height:20px;
  flex-shrink:0;
  display:block;
}

/* =========================
   Footer
========================= */

#vx_cont:has(.mod-profesor){ bottom: 0 !important; } 
body.profesor-page #vx_cont{ bottom: 0 !important; }

#vx_cont .mod-profesor .footer-mod{
  margin-top: auto !important;
  width: 100%;
  background: var(--prof-title-blue);
  color:#fff;
  border-top: 4px solid var(--prof-accent-gold);
  box-shadow: none;
  border-radius: 0;
  padding-block: var(--space-4);
}
#vx_cont .mod-profesor .footer-mod__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* =========================
   Móviles
========================= */
@media (max-width: 768px){
  #vx_cont .mod-profesor .prof-sidebar{
    --prof-sec-gap: 24px;
    --prof-sec-pad: 10px;
  }

  #vx_cont .mod-profesor .prof-layout{
    padding: 0;  
    padding-top: 50px;
    padding-left: 20px; 
    padding-right: 20px; 
    padding-bottom: 20px;
    gap: 1.75rem; 
  }

  #vx_cont .mod-profesor .profesor-inner{
    padding-top: 50px;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    padding-bottom: 12px;
  }

  #vx_cont .mod-profesor .profesor-img{
    justify-self: center;
  }

  #vx_cont .mod-profesor .profesor-img img{
    margin: 0 auto;
    display: block;
  }

  #vx_cont .mod-profesor .profesor-info{
    gap: 0.9rem; 
  }
}

/* Ajustes desktop finos */
@media (min-width: 1024px){
  #vx_cont .mod-profesor .profesor-info{
    column-gap: 1.5rem;
    row-gap: var(--space-4);
  }

  #vx_cont .mod-profesor .profesor-texto{
    padding-left: 2px;
  }
}