/* ==================================================================
   certifications.css — estilos específicos de CIOSAD / COSDRD
   ================================================================== */

/* =========================================================================
   ** ESTILOS DEL CARRUSEL PRINCIPAL (Manual, estilo NVIDIA) **
   ========================================================================= */
.carousel-section-wrapper-unified { 
  background-color: var(--dendro-base-dark); 
}

.carousel-content-limited { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 0; 
}

.carousel {
  position: relative; 
  width: 100%; 
  height: 600px; /* Altura fija desktop */
  overflow: hidden; 
  display: flex; 
  align-items: center;
  background-color: var(--dendro-base-dark);
}

.carousel-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 60px 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease-in-out;
}

.carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* --- Contenido Izquierda --- */
.text-left-content {
  flex: 1; 
  max-width: 50%; 
  z-index: 10; 
  text-align: left; 
  padding-left: 80px;
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  height: 100%;
}
.text-left-content h4 { 
  font-size: 0.95rem; 
  color: var(--dendro-primary); 
  margin-bottom: 0.5rem; 
  font-family: var(--font-heading); 
  text-transform: uppercase; 
  letter-spacing: 1px; 
}
.text-left-content h2 { 
  font-size: 2.8rem; 
  font-family: var(--font-heading); 
  margin-bottom: 1rem; 
  line-height: 1.2; 
  color: var(--dendro-neutral-light); 
}
.text-left-content p { 
  font-size: 1.1rem; 
  line-height: 1.6; 
  margin-bottom: 1.5rem; 
  color: var(--dendro-neutral-light); 
}
.text-left-content .cta-button {
  background-color: var(--dendro-primary); 
  color: var(--dendro-base-dark); 
  padding: 12px 24px; 
  font-weight: bold;
  border-radius: 4px; 
  text-decoration: none; 
  font-size: 1rem; 
  transition: background-color 0.3s ease;
  display: inline-block; 
  width: fit-content;
}
.text-left-content .cta-button:hover { background-color: #cc6a00; }

/* --- Imagen Derecha --- */
.image-right-aligned {
  flex: 1; 
  text-align: right; 
  z-index: 5; 
  padding-right: 80px;
  display: flex; 
  justify-content: flex-end; 
  align-items: center; 
  height: 100%;
}
.image-right-aligned img { 
  max-width: 400px; 
  height: auto; 
  border-radius: 12px; 
  box-shadow: 0 10px 20px rgba(0,0,0,0.3); 
}

/* --- Barra de Navegación Inferior --- */
.carousel-nav {
  display: flex; 
  justify-content: space-around; 
  padding: 20px 40px; 
  background-color: var(--dendro-base-dark); 
  flex-shrink: 0;
}
.carousel-nav-item {
  flex: 1; 
  margin: 0 5px; 
  position: relative; 
  color: var(--dendro-neutral-light);
  display: flex; 
  flex-direction: column; 
  justify-content: flex-start; 
  min-height: 100px;
  cursor: pointer; 
  transition: color 0.3s ease, transform 0.3s ease; 
  text-align: left; 
  padding-left: 10px;
  flex-basis: 0; 
  overflow: hidden;
}
.carousel-nav-item:nth-child(-n+6) { flex: 0 0 auto; width: calc(100% / 6 - 10px); }
.carousel-nav-item:hover { color: var(--dendro-primary); transform: translateX(8px); }
.carousel-nav-item.active .nav-underline { 
  opacity: 1; 
  animation: fillBar var(--carousel-slide-transition-delay) linear forwards; 
}
.nav-underline {
  height: 3px; 
  width: 100%; 
  position: absolute; 
  top: 0; left: 0; 
  background-color: var(--dendro-primary);
  transform: scaleX(0); 
  transform-origin: left; 
  transition: none;
}
.nav-label { 
  font-size: 0.75rem; 
  font-weight: bold; 
  margin: 10px 0 4px; 
  color: var(--dendro-neutral-light); 
  line-height: 1.2; 
  text-transform: uppercase; 
  letter-spacing: 0.5px; 
}
.nav-desc { 
  font-size: 0.75rem; 
  color: #aaa; 
  line-height: 1.3; 
  white-space: normal; 
  height: auto; 
  width: 100%; 
}

@keyframes fillBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* =========================================================================
   ** VERSIÓN MÓVIL OPTIMIZADA (oculta imágenes, textos a la izquierda)
   ========================================================================= */
@media (max-width: 768px) {
  .carousel {
    height: auto !important;
    display: block;
  }

  .carousel-slide {
    position: relative;
    opacity: 1 !important;
    pointer-events: auto;
    display: block;
    background-image: none !important; /* 🔹 Oculta imágenes de fondo */
    padding: 30px 20px;
    margin-bottom: 40px;
    text-align: left; /* 🔹 Textos alineados a la izquierda */
  }

  .text-left-content {
    max-width: 100%;
    padding: 0;
    margin: 0;
    text-align: left;
  }

  .text-left-content h2 { font-size: 1.8rem; }
  .text-left-content p { font-size: 1rem; }

  /* Oculta navegación inferior */
  .carousel-nav { display: none !important; }
}

/* ===== Domains + Objectives — layout DENDRO ===== */
.do3-section{ background:transparent; }
.do3-wrap{ width:100%; max-width:1000px; margin:0 auto; padding:60px 20px 40px; box-sizing:border-box; }

.do3-title{
  font-family:var(--font-heading,'Montserrat',sans-serif);
  font-size:clamp(1.8rem,2.8vw,2.4rem);
  color:var(--dendro-neutral-light,#F4F4F4);
  line-height:1.2; margin:0 0 8px;
}
.do3-sub{ color:rgba(255,255,255,.82); font-size:1.05rem; line-height:1.7; margin:0 0 28px; text-align: center;}

.do3-grid{
  display:grid;
  grid-template-columns:minmax(280px,360px) minmax(240px,300px) 1fr;
  gap:32px; align-items:start;
}

/* ===== Donut ===== */
.do3-donut{ position:relative; display:grid; place-items:center; }

/* SVG ring */
.do3-ring{ display:block; }
.do3-ring circle{
  stroke-width:16;
  transition: opacity .2s ease, stroke .2s ease, stroke-width .25s ease;
}
.do3-ring text{ font-family:var(--font-heading,'Montserrat',sans-serif); }
.do3-ring .ring-title{ fill:var(--dendro-neutral-light,#F4F4F4); font-weight:700; }
.do3-ring .ring-sub{ fill:rgba(255,255,255,.75); font-size:12px; }

/* Segmentos base y el anillo expandido deben tener corte recto para que se note el gap */
.do3-ring .seg,
.do3-ring .seg-exp{
  stroke-linecap: butt;
}

/* Indicador bajo la dona */
.do3-indicator{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  color:#fff; font-weight:700; font-size:.95rem; pointer-events:none;
  text-align:center; white-space:nowrap; text-shadow:0 1px 0 rgba(0,0,0,.35);
}

/* ===== Selectores ===== */
.do3-select{ display:grid; gap:12px; }
.do3-item{
  display:grid; grid-template-columns:14px 1fr; align-items:center;
  gap:10px; cursor:pointer; color:rgba(255,255,255,.92);
  font-size:.95rem; line-height:1.3; user-select:none;
  transition: color .15s ease, transform .15s ease;
  margin-bottom: 14px;
}
.do3-item:hover{ color:#fff; transform:translateX(2px); }
.do3-item.active{ font-weight:700; }
.do3-item.active .do3-dot{ box-shadow:0 0 0 2px rgba(255,255,255,.25); border-radius:50%; }
.do3-dot{ width:12px; height:12px; border-radius:50%; }

/* Paleta (puntos/bullets/lista) */
.do3-blue{background:#f19b56;} .do3-violet{background:#ef9043;}
.do3-teal{background:#ee8631;} .do3-orange{background:#ec7b1f;}
.do3-amber{background:#F19A53;} .do3-gray{background:#F19A53;}

/* ===== Descripciones ===== */
.do3-panels{ position:relative; }
.do3-panel{ display:none; }
.do3-panel.active{ display:block; }
.do3-panel h3{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-heading,'Montserrat',sans-serif);
  font-size:clamp(1.1rem,1.9vw,1.25rem);
  margin:0 0 10px; color:var(--dendro-neutral-light,#F4F4F4);
}
.do3-bullet{ width:12px; height:12px; border-radius:50%; flex:0 0 12px; }
.do3-panel ul{ margin:0; padding-left:20px; color:rgba(255,255,255,.85); line-height:1.65; font-size:.95rem; }
.do3-panel li{ margin:6px 0; }

/* ===== Estados de interacción ===== */
/* Los no activos se vuelven negros opacos */
.seg.dim{
  stroke:#1A1A1A !important;
  opacity:1 !important;
}

/* Anillo expandido del activo (crece hacia afuera) */
.seg-exp{
  display:none;
  pointer-events:none;
  filter:drop-shadow(0 0 8px rgba(255,133,0,.12));
}
.seg-exp.active{
  display:block;
}

/* ===== Responsive ===== */
@media (max-width: 992px){
  .do3-grid{ grid-template-columns:1fr; gap:22px; }
  .do3-donut{ place-items:center; }
}



/* ===== Certification Info (eEDA) ===== */
/* ===== Certification Info (alineada con .do3-wrap) ===== */
.cert-section{ margin: 24px 0 0; }

.cert-wrap{
  /* usa .do3-wrap para mismo max-width y padding */
  display: grid;
  grid-template-columns: 320px 1fr;   /* imagen + texto */
  gap: 32px;
  align-items: center;
  padding-top: 0;                     /* respeta el padding vertical de do3-wrap */
  padding-bottom: 0;
}

.cert-image img{
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
}

.cert-info{ min-width: 280px; }
.cert-title{
  margin: 0 0 18px;
  font-family: var(--font-heading,'Montserrat',sans-serif);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--dendro-neutral-light,#F4F4F4);
}

.cert-list{
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  color: rgba(255,255,255,.92);
  line-height: 1.6;
  font-size: .98rem;
}
.cert-list li{ margin: 8px 0; }

/* Botón global ya existente */
.cert-info .btn-primary{ display:inline-block; }

@media (max-width: 992px){
  .cert-wrap{
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: left; /* centra todo el texto */
    justify-items: center; /* centra la imagen y otros elementos */
  }

  .cert-info {
    min-width: left; /* permite que el texto se ajuste */
  }

  .cert-info .btn-primary {
    margin: 0 auto; /* centra el botón */
  }
}

.cert-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  color: rgba(255,255,255,.92);
  line-height: 1.6;
  font-size: .98rem;
  text-align: justify; /* Justifica el texto */
}

.cert-list li {
  margin: 8px 0;
}

/* Ajuste extra para responsive */
@media (max-width: 768px) {
  .cert-list {
    font-size: 0.95rem; /* un poco más pequeño en móvil */
    text-align: justify; /* mantiene justificado en responsive */
  }
}

/* Alinear título de la certificación a la izquierda */
.cert-header {
  text-align: left;
}

.cert-header .cert-h2 {
  margin: 0;
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-size: clamp(1.8rem, 2.5vw, 2.2rem);
  font-weight: 700;
  color: var(--dendro-neutral-light, #F4F4F4);
  line-height: 1.2;
}




/* ===== Contact Section ===== */
.contact-section{ background: transparent; padding-top: 10px; }
.contact-wrap{
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  column-gap: 48px;
  align-items: start;
}

.contact-title{
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  color: var(--dendro-neutral-light, #F4F4F4);
  margin: 0 0 14px;
}
.contact-sub{
  color: rgba(255,255,255,.82);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
}

.contact-form{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.form-label{
  font-size: .95rem;
  color: rgba(255,255,255,.75);
}
.form-control{
  width: 100%;
  background: rgba(255,255,255,.95); /* Más claro para contraste */
  border: 1px solid rgba(0,0,0,.2);
  color: #000; /* Texto negro */
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 1rem;
  outline: none;
  transition: border-color .2s ease, background .2s ease;
}
.form-control::placeholder{ color: rgba(0,0,0,.45); }
.form-control:focus{
  border-color: var(--dendro-primary, #FF8500);
  background: rgba(255,255,255,1);
  box-shadow: none; /* Sin resplandor */
}

/* Botón estilo global modificado */
.cta-button{
  display: inline-block;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 600;
  color: #000; /* Texto negro */
  background: var(--dendro-primary, #FF8500);
  border-radius: 8px;
  text-decoration: none;
  transition: background .3s ease;
}
.cta-button:hover{
  background: #e07400;
}

/* Responsive */
@media (max-width: 992px){
  .contact-wrap{
    grid-template-columns: 1fr;
    row-gap: 22px;
  }
}


.cert-description-section {
  background: transparent;
  padding: 20px 0 30px; /* antes estaba más alto */
}

.cert-description {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  line-height: 1.8;
  text-align: justify;
  margin-bottom: 14px; /* reducido */
}

@media (max-width: 768px) {
  .cert-description {
    font-size: 1rem;
    margin-bottom: 12px;
  }


.highlight-v2 { color: var(--dendro-neutral-light); }
.roadmap-header { text-align: center; }
.roadmap-header h2 {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 2.6vw, 2.3rem);
  line-height: 1.2;
  color: var(--dendro-neutral-light);
}
.roadmap-header .do3-sub {
  max-width: 820px;
  margin-inline: auto;
}