/* ==================================================================
   app.css — estilos unificados por secciones
   NOTA: Cada bloque está separado por sección para facilitar mantenimiento.
   ================================================================== */

/* ===== [RESET Y VARIABLES :root] ================================= */

:root {
  --dendro-primary: #FF8500;
  --dendro-base-dark: #1A1A1A;
  --dendro-neutral-light: #F4F4F4;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
}

body {
  margin: 0;
  padding: var(--spacing-xl) var(--spacing-md);
  background-color: var(--dendro-base-dark);
  font-family: var(--font-body);
  color: var(--dendro-neutral-light);
}

/* ================= TIMELINE ================= */
.timeline {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--dendro-primary) 0%, var(--dendro-primary) 10%, rgb(94, 94, 94) 60%, rgb(26, 26, 26) 80%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: loadLine 4s ease-out forwards;
  z-index: 0;
}

@keyframes loadLine {
  0% { height: 0; }
  100% { height: 100%; }
}

.step {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--spacing-xl);
  margin: 60px 0;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

.step.visible {
  opacity: 1;
  transform: translateY(0);
}

.circle-container {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--dendro-neutral-light);
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}

.circle-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.circle-container:hover img {
  transform: scale(1.08);
}

.text-box {
  max-width: 400px;
}

.year {
  font-weight: 600;
  font-size: 1.2em;
  color: var(--dendro-neutral-light);
  margin-bottom: var(--spacing-sm);
  white-space: nowrap;
  transition: all 0.3s ease;
}

.year:hover {
  color: var(--dendro-primary);
  text-shadow: 0 0 8px rgba(255, 133, 0, 0.7);
}

.heading, .heading2 {
  font-size: 1.7em;
  font-family: var(--font-heading);
  font-weight: 600;
  margin-bottom: var(--spacing-md);
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 0.6s forwards;
  animation-delay: 0.3s;
}

.heading { color: var(--dendro-primary); }
.heading2 { color: var(--dendro-neutral-light); }

.step.visible .heading {
  animation: slideUp 0.6s forwards;
}

.text-box p {
  font-size: 1.1em;
  line-height: 1.6;
  margin: 0;
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 0.6s forwards;
  animation-delay: 0.6s;
}

.step.visible p {
  animation: slideUp 0.6s forwards;
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.meta {
  display: flex;
  align-items: center;
  height: 100%;
}

.step-left .meta { justify-content: flex-start; }
.step-right .meta { justify-content: flex-end; }
.step-left .text-box { text-align: right; justify-self: end; }
.step-right .text-box { text-align: left; justify-self: start; }

.highlight-white-bold {
  color: white;
}

/* Responsive */
@media (max-width: 768px) {
  .timeline::before {
    left: 65px;
    transform: translateX(-50%);
  }

  .step {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "circle text";
    align-items: center;
    gap: 20px;
    margin-bottom: 60px;
  }

  .step-left, .step-right {
    flex-direction: row;
  }

  .step-left .circle-container,
  .step-right .circle-container {
    grid-area: circle;
    justify-self: start;
  }

  .step-left .text-box,
  .step-right .text-box {
    grid-area: text;
    justify-self: start;
    text-align: left;
  }

  .step-left .meta,
  .step-right .meta {
    display: none;
  }

  .circle-container {
    width: 90px;
    height: 90px;
  }

  .text-box {
    max-width: 100%;
  }

  .heading {
    font-size: 1.3em;
    margin-bottom: 10px;
  }

  .year {
    font-size: 1em;
    margin-bottom: 6px;
  }

  .text-box p {
    font-size: 1em;
    line-height: 1.5;
  }
}

/* ================= HERO SECTION ================= */
.hero-section {
  padding: var(--spacing-xl) var(--spacing-md);
  background-color: var(--dendro-base-dark);
  position: relative;
}

.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
}

.hero-image img {
  max-width: 420px;
  width: 100%;
  filter: drop-shadow(0px 0px 20px rgba(255, 133, 0, 0.3));
}

.hero-text {
  max-width: 600px;
  color: var(--dendro-neutral-light);
}

.hero-text h1 {
  font-size: 2.4rem;
  font-family: var(--font-heading);
  color: var(--dendro-neutral-light);
  margin-bottom: var(--spacing-md);
}

.hero-text .highlight {
  color: var(--dendro-primary);
}

.hero-text p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: var(--spacing-sm);
}

.presale-label {
  display: inline-block;
  background-color: var(--dendro-primary);
  color: var(--dendro-base-dark);
  padding: 6px 16px;
  font-weight: bold;
  font-size: 0.85rem;
  border-radius: 20px;
  margin-bottom: var(--spacing-sm);
}

/* ================= CORE FEATURES ================= */
.core-features {
  padding: 80px 20px;
  background-color: var(--dendro-base-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.features-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1000px;
  width: 100%;
  margin-bottom: 48px;
  gap: 24px;
}

.features-graphic {
  flex-shrink: 0;
}

.features-graphic img {
  height: 100%;
  max-height: 140px;
  width: auto;
  object-fit: contain;
  display: block;
}

.features-title h2 {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  line-height: 1.2;
  margin: 0;
  color: var(--dendro-neutral-light);
}

.features-title .subtle {
  color: rgba(255, 255, 255, 0.3);
  display: block;
}

.features-title .highlight {
  color: #00f6d2;
  display: block;
}

.features-title .sub-highlight {
  color: var(--dendro-primary);
  display: block;
}

.features-subtext {
  text-align: right;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  max-width: 400px;
  margin-top: 8px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: 1000px;
  width: 100%;
}

.feature-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px;
  border-radius: 16px;
  backdrop-filter: blur(6px);
  transition: all 0.3s ease;
  text-align: left;
  color: var(--dendro-neutral-light);
  position: relative;
}

.feature-card:hover {
  background: rgba(59, 59, 59, 0.06);
  transform: translateY(-4px);
}

.feature-card img {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
}

.feature-card .label {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  font-size: 0.75rem;
  border-radius: 8px;
  margin-bottom: 12px;
  color: #00f6d2;
  font-weight: bold;
}

.feature-card h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-family: var(--font-heading);
}

.feature-card p {
  font-size: 0.95rem;
  line-height: 1.5;
}

.feature-card.wide {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .features-header {
    flex-direction: column;
    text-align: center;
  }

  .features-title,
  .features-subtext {
    text-align: center;
    max-width: 100%;
  }

  .feature-card.wide {
    grid-column: span 1;
  }
}
/* ================= ROADMAP INTERACTIVE ================= */
.roadmap-interactive {
  position: relative;
  background-color: var(--dendro-base-dark);
  padding: var(--spacing-xl) var(--spacing-md);
  text-align: center;
  overflow: hidden;
}

.roadmap-header h2 {
  font-size: 2.4rem;
  font-family: var(--font-heading);
  color: var(--dendro-neutral-light);
}

.highlight-primary {
  color: var(--dendro-primary);
}

.subheading {
  color: var(--dendro-neutral-light);
  opacity: 0.85;
  font-size: 1.1rem;
  margin-top: var(--spacing-sm);
  margin-bottom: 280px; /* Espacio debajo del subtítulo */
}

.roadmap-layer {
  position: relative;
  width: 100%;
  max-width: 1000px;
  height: 300px;
  margin: 0 auto;
}

.roadmap-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 600px;
  width: 100%;
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
}

.roadmap-phases {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  z-index: 2;
  width: 100%;
  max-width: 900px;
}

/* Tarjeta base */
.phase-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 200px;
  width: 240px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(6px);
  box-shadow: none !important;
}

/* Hover solo si NO está activa */
.phase-card:hover:not(.active) {
  transform: translateY(-6px);
  box-shadow: 0 0 12px rgba(255, 133, 0, 0.3);
}

/* Parte superior - contenido */
.phase-content {
  flex: 1;
  padding: 16px;
  background: rgba(26, 26, 26, 0.65);
  color: var(--dendro-neutral-light);
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Parte inferior - nombre de fase */
.phase-label {
  padding: 12px 0;
  text-align: center;
  font-weight: bold;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  background: rgba(44, 44, 44, 0.9);
  color: white;
}

/* Tarjeta activa */
.phase-card.active .phase-content {
  background: rgba(255, 133, 0, 0.9);
  color: var(--dendro-base-dark);
}

.phase-card.active .phase-label {
  background: var(--dendro-primary);
  color: var(--dendro-base-dark);
}

.phase-card.active {
  box-shadow: none !important;
}

.phase-card.active:hover {
  transform: none;
  box-shadow: none !important;
}

/* ================= ROADMAP RESPONSIVE ================= */
@media (max-width: 768px) {
  .roadmap-layer {
    height: auto;
  }

  .roadmap-phases {
    position: static;
    transform: none;
    padding-top: var(--spacing-lg);
  }

  .phase-card {
    width: 90%;
    margin-bottom: var(--spacing-md);
  }

  .subheading {
    font-size: 0.95rem;
    margin-bottom: 1px;
  }

  .roadmap-phases {
    margin-top: 0;
    padding-top: 0;
  }

  .roadmap-img {
    position: static;
    transform: none;
    margin: 0 auto;
    opacity: 0.1;
    margin-bottom: -100px;
  }

  .features-graphic {
    display: none;
  }


}


.features-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 48px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.features-graphic img {
  max-width: 120px;
  height: auto;
  display: block;
}

.features-title-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.features-title {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  line-height: 1.2;
  margin: 0;
  color: white;
}

.features-subtext {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  margin-top: 12px;
  max-width: 400px;
}

.features-title .gray {
  color: rgba(255, 255, 255, 0.3);
}

.features-title .highlight {
  color: #00f6d2;
}

.features-title .sub-highlight {
  color: #ff8500;
}

.features-header.horizontal {
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 48px;
  position: relative;
  padding-left: 20px;
  border-left: 6px solid #00f6d2;
}

.features-title-block {
  text-align: left;
}

.features-title span {
  display: inline-block;
  margin-right: 8px;
  font-size: 2.2rem;
  line-height: 1.4;
}

.features-subtext {
  text-align: left;
  margin-top: 12px;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
  max-width: 460px;
}

.features-header.v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 60px auto;
  gap: 40px;
  padding: 0 20px;
}

.features-header.v2 .features-graphic img {
  max-height: 140px;
  width: auto;
  object-fit: contain;
  display: block;
}

.features-title-block {
  text-align: left;
  flex: 1;
}

.features-title-block h2 {
  font-size: 2.2rem;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.features-title-block .gray {
  color: rgba(255, 255, 255, 0.3);
}

.features-title-block .highlight {
  color: #00f6d2;
}

.features-title-block .sub-highlight {
  color: var(--dendro-primary);
}

.features-subtext-block {
  flex: 1;
  text-align: right;
  max-width: 400px;
}

.features-subtext-block p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .features-header.v2 {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    padding: 0 10px;
  }

  .features-title-block {
    text-align: center;
  }

  .features-subtext-block {
    text-align: center;
    max-width: 100%;
  }

  .features-subtext-block p {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .features-graphic img {
    max-height: 120px;
  }

  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .feature-card,
  .feature-card.wide {
    grid-column: span 1 !important;
  }
}

.faq-section {
  padding: 80px 20px;
  background-color: var(--dendro-base-dark);
  max-width: 1000px;
  margin: 0 auto;
}

.faq-title {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  text-align: center;
  margin-bottom: 40px;
}

.faq-title .gray {
  color: rgba(255, 255, 255, 0.3);
}

.faq-title .highlight {
  color: var(--dendro-primary);
}

.faq-title .highlight-cyan {
  color: #00f6d2;
}

.faq-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 16px 20px;
  font-size: 1.1rem;
  font-weight: bold;
  font-family: var(--font-heading);
  color: white;
  cursor: pointer;
  position: relative;
}

.faq-question::after {
  content: "▾";
  position: absolute;
  right: 20px;
  font-size: 1rem;
  transition: transform 0.3s;
}

.faq-item.open .faq-question::after {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.02);
  padding: 0 20px;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-item.open .faq-answer {
  max-height: 300px;
  padding: 16px 20px;
}

.faq-answer p {
  margin: 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}


.media-section {
  padding: 80px 20px;
  background-color: var(--dendro-base-dark);
  max-width: 1200px;
  margin: 0 auto;
}

.media-title {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 2.2rem;
  margin-bottom: 40px;
}

.media-title .highlight-red {
  color: #FF5C33;
}

.media-title .media-gray {
  color: var(--dendro-neutral-light);
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.media-card {
  background-color: #1a1a1a;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}

.media-card:hover {
  transform: translateY(-5px);
}

.media-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.media-content {
  padding: 16px;
}

.media-date {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  display: block;
  margin-bottom: 8px;
}

.media-heading {
  font-size: 1rem;
  font-family: var(--font-heading);
  margin: 0 0 10px;
  color: var(--dendro-neutral-light);
}

.media-description {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
  margin: 0;
}


.media-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.media-section {
  padding: 80px 20px;
  background-color: var(--dendro-base-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.media-inner {
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
  box-sizing: border-box;
}


.media-section {
  background-color: var(--dendro-base-dark);
  padding: 80px 20px;
  display: flex;
  justify-content: center;
}

.media-inner {
  width: 100%;
  max-width: 1050px;
  box-sizing: border-box;
}


  /* ===== Cursos de Nivelación (alineado y estilo coherente) ===== */
.courses-leveling .container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.courses-leveling .roadmap-header {
  text-align: center;
  margin-bottom: 24px;
}

.courses-leveling .subheading {
  margin-top: 8px;
  margin-bottom: 24px; /* elimina espacio grande */
}

/* Tarjetas: imagen contenida y fecha superpuesta */
.courses-leveling .feature-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.courses-leveling .feature-card .media-top {
  position: relative;
  height: 180px;
  background: rgba(255,255,255,0.02);
}

.courses-leveling .feature-card .media-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.courses-leveling .feature-card .date-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
}

/* Texto interno en gris para los títulos de curso */
.courses-leveling .feature-card .card-body { padding: 20px; }
.courses-leveling .feature-card h3 {
  color: #BFBFBF; /* gris */
  margin: 0 0 10px;
}
.courses-leveling .feature-card p {
  color: rgba(255,255,255,0.78);
}

@media (max-width: 768px) {
  .courses-leveling .feature-card .media-top { height: 150px; }
}


/* ================= HERO SECTION V2 ================= */
.hero-section-v2 {
  padding: var(--spacing-xl) var(--spacing-md);
  background-color: var(--dendro-base-dark);
  position: relative;
}

.hero-content-v2 {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
}

.hero-image-v2 img {
  max-width: 420px;
  width: 100%;
  filter: drop-shadow(0px 0px 20px rgba(255, 133, 0, 0.3));
}

.hero-text-v2 {
  max-width: 600px;
  color: var(--dendro-neutral-light);
}

.hero-text-v2 h1 {
  font-size: 2.4rem;
  font-family: var(--font-heading);
  color: var(--dendro-neutral-light);
  margin-bottom: var(--spacing-md);
}

.hero-text-v2 .highlight-v2 {
  color: var(--dendro-primary);
}

.hero-text-v2 p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: var(--spacing-sm);
}

.presale-label-v2 {
  display: inline-block;
  background-color: var(--dendro-primary);
  color: var(--dendro-base-dark);
  padding: 6px 16px;
  font-weight: bold;
  font-size: 0.85rem;
  border-radius: 20px;
  margin-bottom: var(--spacing-sm);
}

/* ================= CORE FEATURES V2 ================= */
.core-features-v2 {
  padding: 80px 20px;
  background-color: var(--dendro-base-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.features-header-v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1000px;
  width: 100%;
  margin-bottom: 48px;
  gap: 24px;
}

.features-graphic-v2 img {
  height: 100%;
  max-height: 140px;
  width: auto;
  object-fit: contain;
  display: block;
}

.features-title-v2 {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  line-height: 1.2;
  margin: 0;
  color: var(--dendro-neutral-light);
}

.features-title-v2 .gray-v2 {
  color: rgba(255, 255, 255, 0.3);
  display: block;
}

.features-title-v2 .highlight-v2 {
  color: #00f6d2;
  display: block;
}

.features-title-v2 .sub-highlight-v2 {
  color: var(--dendro-primary);
  display: block;
}

.features-subtext-v2 {
  text-align: right;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  max-width: 400px;
  margin-top: 8px;
}

.features-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: 1000px;
  width: 100%;
}

.feature-card-v2 {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px;
  border-radius: 16px;
  backdrop-filter: blur(6px);
  transition: all 0.3s ease;
  text-align: left;
  color: var(--dendro-neutral-light);
  position: relative;
}

.feature-card-v2:hover {
  background: rgba(43, 43, 42, 0.06);
  transform: translateY(-4px);
}

.feature-card-v2 img {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
}

.label-v2 {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  font-size: 0.75rem;
  border-radius: 8px;
  margin-bottom: 12px;
  color: #00f6d2;
  font-weight: bold;
}

.feature-card-v2 h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-family: var(--font-heading);
}

.feature-card-v2 p {
  font-size: 0.95rem;
  line-height: 1.5;
}

.feature-card-v2.wide-v2 {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .features-header-v2 {
    flex-direction: column;
    text-align: center;
  }

  .features-title-v2,
  .features-subtext-v2 {
    text-align: center;
    max-width: 100%;
  }

  .feature-card-v2.wide-v2 {
    grid-column: span 1;
  }
}

/* ====== Layout de cabecera de Core Features V2 (3 columnas) ====== */
.container-v2{
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px; /* igual que otras secciones */
}

.features-header-v2{
  display: grid !important;
  grid-template-columns: 120px minmax(320px, 1fr) minmax(380px, 1fr);
  align-items: center;
  column-gap: 32px;
  row-gap: 0;
  margin-bottom: 48px;
  /* evita que algún estilo previo lo centre */
  text-align: unset !important;
}

/* Columna 1: imagen (izquierda) */
.features-graphic-v2{ justify-self: start; }
.features-graphic-v2 img{
  max-width: 120px;
  height: auto;
  display: block;
}

/* Columna 2: título (alineado a la izquierda) */
.features-title-block-v2{
  justify-self: start;
  text-align: left !important;
}
.features-title-block-v2 .features-title-v2{
  margin: 0;                 /* quita márgenes extra */
  line-height: 1.1;
  text-align: left !important;
}
.features-title-block-v2 .features-title-v2 span{
  display: block;
  text-align: left !important;
}

/* Columna 3: texto (alineado a la derecha) */
.features-subtext-block-v2{
  justify-self: end;
  text-align: right !important;
}
.features-subtext-v2{
  margin: 0;
  color: rgba(255,255,255,.8);
  line-height: 1.6;
}

/* ====== Responsive: apilar en 2 filas (imagen + título / texto) ====== */
@media (max-width: 992px){
  .features-header-v2{
    grid-template-columns: 120px 1fr;
    grid-template-rows: auto auto;
    row-gap: 16px;
  }
  .features-graphic-v2{ grid-column: 1; grid-row: 1; }
  .features-title-block-v2{ grid-column: 2; grid-row: 1; }
  .features-subtext-block-v2{
    grid-column: 1 / -1; grid-row: 2;
    justify-self: start;
    text-align: left !important;
  }
}

/* Móvil: todo en una columna, alineado a la izquierda */
@media (max-width: 640px){
  .features-header-v2{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 12px;
  }
  .features-graphic-v2,
  .features-title-block-v2,
  .features-subtext-block-v2{
    grid-column: 1; justify-self: start;
  }
  .features-subtext-block-v2{ text-align: left !important; }
}

/* === FIX DE ALINEACIÓN ENTRE CORE FEATURES V2 y "Formación Especializada" === */

/* 1) Usa el mismo ancho que la sección inferior */
.container-v2{
  width: 100%;
  max-width: 1000px;   /* igual que .courses-leveling .container */
  margin: 0 auto;
  padding: 0 20px;     /* mismos gutters laterales */
}

/* 2) Asegura que el header y la grid respeten ese contenedor */
.features-header-v2{
  max-width: 100%;     /* no excede el container */
  margin-left: 0;
  margin-right: 0;
}

.features-grid-v2{
  max-width: 100%;     /* que use todo el ancho del container */
  margin: 0;           /* sin márgenes extra */
}

/* 3) Ajusta el espaciado vertical para que “enganche” visualmente */
.core-features-v2{
  padding-top: 60px;   /* opcional: deja un poco menos de aire arriba */
  padding-bottom: 40px;/* y reduce el gap con la sección siguiente */
}

/* 4) Por si algún estilo global centra textos: fuerza alineaciones coherentes */
.features-title-block-v2,
.features-title-block-v2 .features-title-v2,
.features-title-block-v2 .features-title-v2 span{
  text-align: left !important;
}
.features-subtext-block-v2{ text-align: right !important; }

/* 5) Responsive consistente con la sección inferior */
@media (max-width: 768px){
  .container-v2{ padding: 0 16px; }
  .features-subtext-block-v2{ text-align: left !important; }
}

/* ======== Responsive: gráfica a la derecha y texto alineado a la izquierda ======== */
@media (max-width: 768px){
  .features-header-v2 {
    display: grid !important;
    grid-template-columns: 1fr auto; /* texto a la izquierda, imagen a la derecha */
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 16px;
    align-items: start;
  }

  /* Bloque de título a la izquierda */
  .features-title-block-v2 {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    text-align: left !important;
  }

  /* Imagen a la derecha */
  .features-graphic-v2 {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  /* Párrafo grande debajo del título, alineado a la izquierda */
  .features-subtext-block-v2 {
    grid-column: 1 / span 2;
    grid-row: 2;
    justify-self: start;
    text-align: left !important;
  }

  /* Ajuste de tamaños */
  .features-graphic-v2 img {
    max-width: 100px;
    height: auto;
  }
}

/* Forzar la subdescripción a la IZQUIERDA en Core Features V2 */
.core-features-v2 .features-header-v2 .features-subtext-block-v2 {
  justify-self: start !important;
  align-self: start !important;
  text-align: left !important;
}

.core-features-v2 .features-header-v2 .features-subtext-block-v2 .features-subtext-v2 {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;   /* evita centrado por márgenes auto */
  width: 100%;                  /* ocupa el ancho disponible */
  max-width: 400px;             /* o el valor que uses */
  display: block;
}

/* En móvil, mantenerlo a la izquierda sí o sí */
@media (max-width: 768px){
  .core-features-v2 .features-header-v2 { text-align: left !important; }
  .core-features-v2 .features-header-v2 .features-subtext-block-v2 {
    grid-column: 1 / -1;
    justify-self: start !important;
    text-align: left !important;
  }
  .core-features-v2 .features-header-v2 .features-subtext-block-v2 .features-subtext-v2 {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* === Fix: agregar espacio lateral a la línea de tiempo en móvil === */
@media (max-width: 768px) {
  .timeline {
    padding-left: 20px;
    padding-right: 20px;
  }

  .timeline .step {
    margin-left: 0;
    margin-right: 0;
  }

  /* Que el texto no toque los bordes */
  .timeline .text-box {
    padding-left: 8px;
    padding-right: 8px;
  }
}


/* ===== Academia / Artículos — V2 ===== */
.academy-v2{
  background: var(--dendro-base-dark);
  padding: 48px 0 24px;
}
.academy-header-v2{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px;
  margin-bottom: 24px;
}
.academy-title-v2{
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  line-height: 1.2;
  color: var(--dendro-neutral-light);
  margin: 0;
}
.academy-cta-v2{
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 2px solid var(--dendro-trust-blue, #1E88E5);
  border-radius: 999px;
  color: var(--dendro-trust-blue, #1E88E5);
  font-weight: 700;
  text-decoration: none;
}
.academy-cta-v2:hover{ background: rgba(30,136,229,.08); }
.academy-cta-v2 .arrow-v2{ font-weight: 900; }

/* Carrusel */
.academy-carousel-v2{
  position: relative;
}
.academy-viewport-v2{
  overflow: hidden;
}
.academy-track-v2{
  display: flex;
  gap: 20px;
  scroll-behavior: smooth;
  list-style: none;
  padding: 6px 0 12px;
  margin: 0;
}
.academy-card-v2{
  flex: 0 0 calc((100% - 60px) / 4); /* 4 cards en desktop (gap*3 = 60px) */
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  overflow: hidden;
}
.card-img-v2 img{
  width: 100%; height: 180px; object-fit: cover; display: block;
}
.card-body-v2{ padding: 16px; }
.card-title-v2{
  font-size: 1.05rem;
  font-family: var(--font-heading);
  color: var(--dendro-neutral-light);
  margin: 0 0 8px 0;
}
.card-text-v2{
  font-size: .95rem;
  color: rgba(255,255,255,.8);
  margin: 0;
  min-height: 58px;
}
.card-link-v2{
  display: inline-block;
  padding: 12px 16px 18px 16px;
  color: var(--dendro-trust-blue, #1E88E5);
  font-weight: 700;
  text-decoration: none;
}
.card-link-v2:hover{ color: var(--dendro-primary); }

/* Botones */
.academy-nav-v2{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.4);
  color: #fff;
  font-size: 24px;
  line-height: 0;
  display: grid; place-items: center;
  cursor: pointer;
}
.academy-nav-v2.prev{ left: -6px; }
.academy-nav-v2.next{ right: -6px; }
.academy-nav-v2:hover{ background: rgba(255,133,0,.2); border-color: rgba(255,133,0,.5); }

/* Responsive */
@media (max-width: 1200px){
  .academy-card-v2{ flex: 0 0 calc((100% - 40px) / 3); } /* 3 cards */
}
@media (max-width: 900px){
  .academy-header-v2{ grid-template-columns: 1fr; gap: 12px; }
  .academy-cta-v2{ justify-self: start; }
  .academy-card-v2{ flex: 0 0 calc((100% - 20px) / 2); } /* 2 cards */
}
@media (max-width: 600px){
  .academy-card-v2{ flex: 0 0 80%; } /* 1.25 cards visible */
  .card-img-v2 img{ height: 160px; }
  .academy-nav-v2.prev{ left: 2px; }
  .academy-nav-v2.next{ right: 2px; }
}




/* ===== 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;
  }
}