/*
  Rediseño visual de /capacitacion_certificacion (mismos criterios que
  /inicio y /sobre_la_escuela: dirección "sector energía B2B sobrio").
  Este archivo SOLO se carga desde capacitacion_certificacion.php.
  Las tarjetas de curso se inyectan por JS (cargarscrolll.js) con
  estilos inline — se sobreescriben con selectores de atributo + !important.
*/

body{
  background:#faf9f6;
  font-family:'IBM Plex Sans', Arial, sans-serif;
  color:#1c211d;
}
h1,h2,h3,h4,h5,h6,
.Montserrat-Bold,.Montserrat-SemiBold,.Montserrat-Light,.Montserrat-ExtraBold{
  font-family:'Archivo', Arial, sans-serif !important;
}
html, body{
  overflow-x:hidden;
  max-width:100%;
}

/* ---------- eyebrow ---------- */
.eyebrow-v2{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#1f6a33;
  margin-bottom:14px;
  font-family:'IBM Plex Sans', Arial, sans-serif;
}
.eyebrow-v2::before{
  content:"";
  width:22px;
  height:2px;
  background:#1f6a33;
  display:block;
  flex-shrink:0;
}

/* ---------- utility top bar ---------- */
.menu_secundario{
  background:#12201a;
  box-shadow:none;
}
.menu_secundario a{
  color:#c7d0ca;
}
.menu_secundario a:hover,
.menu_secundario a:focus{
  background:rgba(255,255,255,.12);
  color:#fff;
}
.menu_secundario .activo{
  background:#1f6a33;
}
@media (min-width:992px){
  .menu_secundario{
    padding-right:max(40px, calc(50vw - 620px)) !important;
  }
}
.topbar-contact-v2{
  /* Comparte la misma franja/fila que .menu_secundario (telefono/email a la
     izquierda, links a la derecha) mediante position:absolute — PERO con
     width:auto (no 100%) para que el area clickeable de este div termine
     justo donde termina su propio contenido, en vez de cubrir tambien el
     lado derecho de la franja donde estan los links de .menu_secundario
     (ese ancho completo era lo que antes tapaba los clics de esos links). */
  position:absolute;
  top:0;
  left:0;
  width:auto;
  height:40px;
  display:flex;
  align-items:center;
  gap:14px;
  padding-left:max(40px, calc(50% - 620px));
  font-size:13px;
  z-index:20;
  box-sizing:border-box;
}
.topbar-contact-v2 a{
  color:#c7d0ca;
  text-decoration:none;
}
.topbar-contact-v2 a:hover{
  color:#fff;
}
.topbar-contact-v2-sep{
  color:#33443a;
}
@media (max-width:700px){
  .topbar-contact-v2{ display:none; }
}

/* ---------- main nav ---------- */
.navbar{
  background:#fff;
  box-shadow:none;
  border-bottom:1px solid #e5e3d8;
}
.navbar .menuvar:hover,
.navbar .menuvar:focus{
  color:#1f6a33 !important;
}
.navbar .menuvarActive{
  color:#1f6a33 !important;
}
@media (min-width:992px){
  .navbar{
    padding-left:max(40px, calc(50vw - 620px)) !important;
  }
  .navbar .nav-link{
    padding:.5rem .55rem;
  }
  #menu .navbar-collapse{
    margin-right:calc(max(40px, calc(50vw - 620px)) + 146px);
  }
}
.nav-cta-v2{
  display:none;
}
@media (min-width:992px){
  .nav-cta-v2{
    display:flex;
    align-items:center;
    position:absolute;
    top:57px;
    right:max(40px, calc(50% - 620px));
    background:#1f6a33;
    color:#fff !important;
    text-decoration:none !important;
    font-size:13.5px;
    font-weight:600;
    padding:14px 25px;
    border-radius:2px;
    z-index:10000;
    font-family:'IBM Plex Sans', Arial, sans-serif;
  }
  .nav-cta-v2:hover{
    background:#154a24;
  }
}

/* ---------- carrusel vestigial de header_menu() (placeholder gris vacío) ---------- */
#carouselExampleIndicators{
  display:none !important;
}
.logo_size{
  width:270px !important;
  height:44px !important;
}

/* ---------- breadcrumb ---------- */
.breadcrumb{
  background:transparent !important;
  padding:0 !important;
  font-size:13px;
}
.breadcrumb a{
  color:#5b6560;
  text-decoration:none;
}
.breadcrumb a:hover{
  color:#1f6a33;
}
.breadcrumb li + li::before{
  content:"/" !important;
  color:#c9c7ba;
}

/* ---------- sidebar "Sectores" ---------- */
.catalogo-list{
  border:1px solid #e5e3d8;
  padding:0;
}
.catalogo-section-title{
  font-family:'Archivo', Arial, sans-serif;
  font-weight:800;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#1c211d;
  padding:22px 25px;
  border-bottom:1px solid #e5e3d8;
}
#listSector{
  list-style:none;
  margin:0;
  padding:0;
}
#listSector li{
  border-bottom:1px solid #f1f0e9;
}
#listSector li:last-child{
  border-bottom:none;
}
#listSector li a{
  display:block;
  padding:18px 25px;
  font-size:14px;
  color:#5b6560;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease;
}
#listSector li a:hover{
  background:#f4faf4;
  color:#1f6a33;
}
#listSector li.active a,
#listSector li a.active{
  color:#1f6a33;
  font-weight:600;
  background:#eaf1ea;
}

/* ---------- header "Cursos" + tarjetas ---------- */
#Content{
  margin-left:0 !important;
  margin-right:0 !important;
}
#Content .card{
  border:1px solid #e5e3d8 !important;
  border-radius:2px !important;
  box-shadow:none !important;
  overflow:hidden;
  transition:box-shadow .2s ease;
}
#Content .card:hover{
  box-shadow:0 8px 22px rgba(0,0,0,.08) !important;
}
#Content .card img.img-programas{
  height:170px;
  object-fit:cover;
}
#Content .card div[style*="background-color: green"]{
  background:#1f6a33 !important;
  border-top:none !important;
  font:600 12.5px 'IBM Plex Sans', Arial, sans-serif !important;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:10px 15px !important;
}
#Content .card .card-body{
  padding:20px 22px 25px !important;
}
#Content .card .card-body h6{
  font-family:'Archivo', Arial, sans-serif !important;
  font-weight:700 !important;
  font-size:14.5px !important;
  color:#1c211d !important;
  line-height:1.4;
}
#Content .card a.text-decoration-none:hover .card-body h6{
  color:#1f6a33 !important;
}

/* ---------- botón "Ver más cursos" ---------- */
#changeFunction{
  background:#1f6a33 !important;
  border:none !important;
  border-radius:2px !important;
  padding:18px 0 !important;
  font-family:'IBM Plex Sans', Arial, sans-serif !important;
  font-weight:600 !important;
  letter-spacing:.02em;
}
#changeFunction:hover{
  background:#154a24 !important;
}

/* ---------- sección de beneficios: mismo grid hairline que /inicio ---------- */
.container-fluid h4.Montserrat-ExtraBold{
  font-weight:800;
  letter-spacing:-.01em;
  color:#1c211d;
}
.titulo-seccion,
.titulo-seccion .col-sm-12{
  text-align:left !important;
}
.titulo-seccion img.img-fluid{
  display:none !important;
}
.titulo-seccion h4.Montserrat-ExtraBold{
  max-width:640px;
}
.beneficios-grid-v2{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  border-top:1px solid #e5e3d8;
  border-left:1px solid #e5e3d8;
  max-width:1240px;
  margin-left:auto;
  margin-right:auto;
}
.titulo-seccion{
  max-width:1240px;
  margin-left:auto !important;
  margin-right:auto !important;
}
.beneficios{
  display:block !important;
  padding:38px 33px !important;
  margin-right:0 !important;
  border-radius:0 !important;
  border-right:1px solid #e5e3d8;
  border-bottom:1px solid #e5e3d8;
  background:transparent !important;
  box-shadow:none !important;
}
.beneficios:hover{
  background:transparent !important;
  box-shadow:none !important;
}
.beneficios .imagen{
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  display:block !important;
}
.beneficios .imagen img.card-img-beneficio{
  width:28px !important;
  height:28px !important;
  object-fit:contain;
  opacity:1 !important;
}
.beneficios .texto{
  margin-top:16px;
}
.beneficios .texto h6{
  font-size:15.5px;
  font-weight:700;
  color:#1c211d !important;
  padding:0 !important;
  margin:0;
}
.beneficios .texto p{
  margin-top:8px;
  font-size:13.5px;
  color:#5b6560 !important;
  padding:0 !important;
  font-weight:400 !important;
  line-height:1.5;
}
@media (max-width:900px){
  .beneficios-grid-v2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:560px){
  .beneficios-grid-v2{ grid-template-columns:1fr; }
}

/* ---------- footer propio (igual al de /inicio) ---------- */
.footer-v2{
  background:#2b3830;
  color:#c7d0ca;
  padding:100px 50px 0;
  font-family:'IBM Plex Sans', Arial, sans-serif;
}
.footer-v2-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:40px;
  max-width:1180px;
  margin:0 auto;
  padding-bottom:70px;
  border-bottom:1px solid #33443a;
}
.footer-v2-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.footer-v2-logo-crop{
  width:38px;
  height:38px;
  overflow:hidden;
  position:relative;
  flex-shrink:0;
}
.footer-v2-logo-crop img{
  height:38px;
  width:auto;
  position:absolute;
  left:0;
  top:0;
}
.footer-v2-logo-full{
  height:40px;
  width:auto;
  max-width:200px;
}
.footer-v2-brand span{
  font-family:'Archivo', Arial, sans-serif;
  font-weight:800;
  font-size:18px;
  color:#fff;
  letter-spacing:.01em;
}
.footer-v2-blurb{
  margin-top:18px;
  font-size:13.5px;
  line-height:1.6;
  color:#9fada6;
  max-width:260px;
}
.footer-v2-social{
  display:flex;
  gap:14px;
  margin-top:24px;
}
.footer-v2-social a{
  width:32px;
  height:32px;
  border:1px solid #33443a;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#c7d0ca;
  transition:color .2s ease, border-color .2s ease;
}
.footer-v2-social a:hover{
  color:#fff;
  border-color:#c7d0ca;
}
.footer-v2-heading{
  font-weight:700;
  color:#fff;
  font-size:13.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin:0 0 20px;
}
.footer-v2-links{
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:14px;
}
.footer-v2-links a{
  color:#c7d0ca;
  text-decoration:none;
}
.footer-v2-links a:hover{
  color:#fff;
}
.footer-v2-text{
  font-size:13.5px;
  line-height:1.6;
  color:#c7d0ca;
  margin:0;
}
.footer-v2-text-mt{
  margin-top:10px !important;
}
.footer-v2-text-mt2{
  margin-top:14px !important;
}
.footer-v2-bottom{
  max-width:1180px;
  margin:0 auto;
  padding:33px 0;
  font-size:12.5px;
  color:#8b968f;
}
@media (max-width:900px){
  .footer-v2-grid{ grid-template-columns:1fr 1fr; row-gap:36px; }
}
@media (max-width:520px){
  .footer-v2-grid{ grid-template-columns:1fr; }
  .footer-v2{ padding-left:24px; padding-right:24px; }
}

/* ---------- ritmo vertical entre secciones (igual al mockup) ---------- */
.cursos-main-v2{
  padding-top:60px !important;
  padding-bottom:0 !important;
  max-width:1240px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  float:none !important;
}
.cursos-main-v2 .catalogo-list-container{
  padding-right:30px !important;
}
#changeFunction{
  margin-bottom:70px !important;
}
.section-alt-v2{
  background:#f1f0e9;
  padding-top:100px;
  padding-bottom:100px;
}
.container-fluid.section-alt-v2{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box;
}
.section-alt-v2 .titulo-seccion{
  margin-bottom:10px;
}
