/*
  Rediseño visual de /capacitacion_certificacion_det_n (mismos criterios que
  /inicio, /sobre_la_escuela y /capacitacion_certificacion: dirección
  "sector energía B2B sobrio"). Este archivo SOLO se carga desde
  capacitacion_certificacion_det_n.php.
*/

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{
  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;
}
.eyebrow-v2.eyebrow-v2-dark{
  color:#8fd6a3;
}
.eyebrow-v2.eyebrow-v2-dark::before{
  background:#8fd6a3;
}

/* ---------- 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:11px 20px;
    border-radius:2px;
    z-index:10000;
    font-family:'IBM Plex Sans', Arial, sans-serif;
  }
  .nav-cta-v2:hover{
    background:#154a24;
  }
}
.logo_size{
  width:270px !important;
  height:44px !important;
}
@media (min-width: 1100px) and (max-width: 1200px){
  .logo_size{ width:268px !important; height:29px !important; }
}
@media (min-width: 1201px) and (max-width: 1546px){
  .logo_size{ width:260px !important; height:41px !important; }
}
@media (min-width: 1547px){
  .logo_size{ width:270px !important; height:44px !important; }
}
#carouselExampleIndicators{
  display:none !important;
}

/* ---------- contenedor general: mismo borde que el menu (340px a 1920px) ---------- */
.detalle-main-v2{
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:max(40px, calc(50vw - 620px)) !important;
  padding-right:max(40px, calc(50vw - 620px)) !important;
  padding-top:0 !important;
  box-sizing:border-box;
  float:none !important;
}
.detalle-main-v2 .container-fluid{
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* ---------- hero (pizarra): franja oscura sobria ---------- */
.pizarra{
  background:#12201a !important;
  height:auto !important;
  padding:0 !important;
}
.pizarra .row{
  max-width:100%;
  margin:0 !important;
  padding:44px max(40px, calc(50vw - 620px)) !important;
  box-sizing:border-box;
  align-items:center;
}
.pizarra .row > div{
  padding-left:0 !important;
  padding-right:0 !important;
}
.pizarra h3{
  color:#fff !important;
  font-size:clamp(24px,2.6vw,32px);
  font-weight:800;
  letter-spacing:-.01em;
  text-transform:none !important;
  padding-top:0 !important;
  margin:0 !important;
}
.pizarra p{
  color:#d7ddd8 !important;
}
.form_inscripcion{
  padding:0 !important;
  background:#fff;
  border-radius:2px;
  overflow:hidden;
}
.form_inscripcion img.img-fluid{
  display:block;
  height:200px;
  object-fit:cover;
}
.form_inscripcion .bg-dark{
  background:#1f6a33 !important;
}
.form_inscripcion #id_Button_Form{
  background:#154a24 !important;
  border-color:#154a24 !important;
  font-family:'IBM Plex Sans', Arial, sans-serif;
  font-weight:600;
}
.form_inscripcion #id_Button_Form:hover{
  background:#0f351a !important;
}
.form_inscripcion .det-field-v2{
  margin-bottom:10px;
}
.form_inscripcion .det-field-v2-label{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#d7ddd8;
  margin-bottom:4px;
}
.form_inscripcion .det-field-v2 .form-control{
  margin-bottom:0 !important;
}

/* ---------- sidebar de imagen + formulario: fijo mientras se hace scroll ---------- */
.det-sidebar-inner-v2{
  position:sticky;
  top:100px;
  margin-top:-129px;
  border:1px solid #e5e3d8;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  z-index:30;
}
@media (max-width:767px){
  .det-sidebar-inner-v2{
    position:static;
    top:auto;
    margin-top:24px;
    box-shadow:none;
  }
}

/* ---------- franja de info (duración / fecha / plataforma) ---------- */
.det-info-grid{
  background:transparent !important;
  padding:0 !important;
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  border-top:1px solid #e5e3d8;
  border-left:1px solid #e5e3d8;
  margin:0 !important;
}
.det-info-item{
  border-style:solid !important;
  border-color:#e5e3d8 !important;
  border-width:0 1px 1px 0 !important;
  padding:20px 22px !important;
  font-size:1em !important;
  max-width:none !important;
  flex-basis:auto !important;
  width:auto !important;
}
.det-info-item h5{
  font-size:13.5px !important;
  font-weight:600 !important;
  color:#1c211d !important;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin:0;
}
.det-info-item img.icon_class_person{
  width:22px !important;
  height:22px !important;
  padding-right:0 !important;
  margin-top:0 !important;
  object-fit:contain;
  flex-shrink:0;
}
.det-info-item img.icon_class_person[src*="hora"]{
  content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6a33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E") !important;
}
.det-info-item img.icon_class_person[src*="calendario"]{
  content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6a33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='1.5'/%3E%3Cpath d='M3 9.5h18M8 3v4M16 3v4'/%3E%3C/svg%3E") !important;
}
.det-info-item img.icon_class_person[src*="plataforma_educativa"]{
  content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6a33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='13' rx='1.5'/%3E%3Cpath d='M8 21h8M12 17.5v3.5'/%3E%3Cpath d='M10 8.5l4 2.2-4 2.2z'/%3E%3C/svg%3E") !important;
}
.det-info-item img.icon_class_person[src*="asincrono"]{
  content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6a33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12a3.5 3.5 0 1 1 1 2.5M8.5 12v2.7h2.7'/%3E%3C/svg%3E") !important;
}
@media (max-width:700px){
  .det-info-grid{ grid-template-columns:1fr !important; }
}

/* ---------- encabezados de sección de detalle ---------- */
.det-heading-v2{
  padding:0 !important;
  display:block !important;
  margin:56px 0 24px !important;
}
.det-heading-v2-first{
  margin-top:16px !important;
}
.det-heading-v2 h4{
  font-size:1.15em !important;
  font-weight:800 !important;
  letter-spacing:-.005em;
  color:#1c211d !important;
}

/* ---------- acordeón: características del programa ---------- */
#accordionExample.accordion{
  border:1px solid #e5e3d8;
  border-radius:2px;
}
#accordionExample .card{
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
#accordionExample .card:not(:last-child){
  border-bottom:1px solid #e5e3d8 !important;
}
#accordionExample .card-header{
  background:#fff !important;
  border-bottom:none !important;
  padding:0 !important;
}
#accordionExample .card:nth-child(1) .card-header{
  background:#fff !important;
}
#accordionExample .card:nth-child(2) .card-header{
  background:#faf9f6 !important;
}
#accordionExample .card:nth-child(3) .card-header{
  background:#f1f0e9 !important;
}
#accordionExample .card-header .btn-link{
  position:relative;
  display:block;
  width:100%;
  text-align:left;
  padding:18px 46px 18px 22px !important;
  font-family:'IBM Plex Sans', Arial, sans-serif;
  font-weight:600;
  font-size:14.5px;
  color:#1c211d !important;
}
#accordionExample .card-header .btn-link:hover{
  color:#1f6a33 !important;
}
#accordionExample .card-header .btn-link::after{
  content:"";
  position:absolute;
  right:22px;
  top:50%;
  width:14px;
  height:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6a33' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  transform:translateY(-50%) rotate(180deg);
  transition:transform .2s ease;
}
#accordionExample .card-header .btn-link.collapsed::after{
  transform:translateY(-50%) rotate(0deg);
}
#accordionExample .card-header{
  cursor:pointer;
}
#accordionExample .card-body{
  padding:0 22px 22px !important;
  font-size:14px;
  color:#5b6560;
  line-height:1.7;
}

/* ---------- plana docente ---------- */
.det-docentes-v2{
  background:transparent !important;
  padding:0 !important;
  max-width:none !important;
}
.docente{
  border:1px solid #e5e3d8;
  padding:28px 22px 24px !important;
  border-radius:2px;
}
.docente .imagen{
  height:88px !important;
  width:88px !important;
  border-radius:50%;
  background:#f1f0e9 !important;
  overflow:hidden;
}
.docente .imagen img{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  margin:0 !important;
}
.docente .titulo{
  font-size:15px !important;
  font-weight:700 !important;
  color:#1c211d;
  margin-top:16px;
  text-align:center;
}
.docente .subtitulo{
  font-size:13px !important;
  color:#1f6a33;
  text-align:center;
  margin-top:4px;
}
.docente .cuerpo{
  font-size:13px !important;
  color:#5b6560;
  text-align:left;
  margin-top:12px;
  line-height:1.6;
}

/* ---------- certificado demostrativo ---------- */
.det-certificado-v2{
  border:1px solid #e5e3d8;
  padding:16px;
  border-radius:2px;
  max-width:640px;
}

/* ---------- profesionales que confían en nosotros: grid hairline (igual al mockup) ---------- */
.det-testimonios-grid-v2{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  border-top:1px solid #e5e3d8;
  border-left:1px solid #e5e3d8;
}
.det-testimonio-v2{
  background:#fff;
  padding:30px 22px;
  text-align:center;
  border-right:1px solid #e5e3d8;
  border-bottom:1px solid #e5e3d8;
}
.det-testimonio-v2-foto{
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
  object-position:top center;
  display:block;
  margin:0 auto;
  background:#f1f0e9;
}
.det-testimonio-v2-nombre{
  font-size:14px;
  font-weight:700;
  color:#1c211d;
  margin:16px 0 0;
}
.det-testimonio-v2-cargo{
  font-size:12.5px;
  color:#5b6560;
  margin:5px 0 0;
  line-height:1.5;
}
.det-testimonio-v2-logo{
  max-height:22px;
  max-width:110px;
  object-fit:contain;
  display:block;
  margin:16px auto 0;
  filter:grayscale(1);
  opacity:.8;
}
@media (max-width:900px){
  .det-testimonios-grid-v2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:520px){
  .det-testimonios-grid-v2{ grid-template-columns:1fr; }
}

/* ---------- banda CTA (antes jumbotron gris + imagen botón) ---------- */
.det-cta-band-v2{
  background:#12201a !important;
  border-radius:0 !important;
  padding:48px max(40px, calc(50vw - 620px)) !important;
  margin-top:56px !important;
  margin-bottom:0 !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  width:100vw !important;
  max-width:100vw !important;
  box-sizing:border-box;
}
.det-cta-band-v2 .container{
  max-width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.det-cta-band-v2 .container > .row{
  margin-left:0 !important;
  margin-right:0 !important;
}
.det-cta-band-v2 .row{
  align-items:center;
}
.det-cta-band-v2 .col-sm-12.col-md-8{
  color:#d7ddd8 !important;
  font-size:15px !important;
  text-align:left !important;
  line-height:1.7;
}
.det-cta-band-v2 strong{
  color:#fff;
  font-weight:700;
}
.det-cta-band-v2-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#1f6a33;
  color:#fff !important;
  text-decoration:none !important;
  font-weight:600;
  font-size:14px;
  padding:13px 24px;
  border-radius:2px;
  font-family:'IBM Plex Sans', Arial, sans-serif;
  white-space:nowrap;
}
.det-cta-band-v2-btn:hover{
  background:#154a24;
}

/* ---------- programas relacionados ---------- */
.det-related-v2-col{
  display:flex;
}
.det-related-v2 .card{
  border:1px solid #e5e3d8 !important;
  border-radius:2px !important;
  box-shadow:none !important;
  overflow:hidden;
  transition:box-shadow .2s ease, border-color .2s ease;
  width:100%;
  display:flex;
  flex-direction:column;
}
.det-related-v2 .card:hover{
  box-shadow:0 8px 22px rgba(0,0,0,.08) !important;
  border-color:#1f6a33 !important;
}
.det-related-v2 .card img.img-programas{
  height:170px;
  object-fit:cover;
  flex-shrink:0;
}
.det-related-v2 .card a.text-decoration-none{
  display:flex;
  flex-direction:column;
  flex:1;
}
.det-related-v2 .card .card-body{
  display:flex;
  flex-direction:column;
  flex:1;
  text-align:left;
  padding:18px 20px 20px !important;
}
.det-related-v2 .card .card-body h6{
  font-family:'Archivo', Arial, sans-serif !important;
  font-weight:700 !important;
  font-size:14.5px !important;
  line-height:1.4;
  color:#1c211d !important;
  margin:0;
  flex:1;
}
.det-related-v2 .card a.text-decoration-none:hover .card-body h6{
  color:#1f6a33 !important;
}
.det-related-v2-link{
  display:inline-block;
  margin-top:14px;
  font-size:13px;
  font-weight:600;
  color:#1f6a33;
}

/* ---------- footer propio (igual al de /inicio) ---------- */
.footer-v2{
  background:#2b3830;
  color:#c7d0ca;
  padding:80px 40px 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:1240px;
  margin:0 auto;
  padding-bottom:56px;
  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:1240px;
  margin:0 auto;
  padding:26px 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; }
}