/* =========================================================================
      ** ESTILOS DE SECCIONES EXISTENTES (Reestructurados y Conservados) **
      ========================================================================= */

    /* =========================================================================
      ** VARIABLES CSS **
      ========================================================================== */
    :root {
      --dendro-primary: #FF8500; /* Naranja DENDRO */
      --dendro-base-dark: #1A1A1A; /* Negro Profundo */
      --dendro-neutral-light: #F4F4F4; /* Gris Claro Humo */
      --dendro-neutral-dark: #1A1A1A; /* Grafito Técnico */
      --dendro-tech-green: #3BE88F; /* Verde Cibernético */
      --dendro-trust-blue: #1E88E5; /* Azul de Confianza */
      --dendro-alert-red: #E53935; /* Rojo de Seguridad */

      /* Fuentes */
      --font-heading: 'Montserrat', sans-serif;
      --font-body: 'Open Sans', sans-serif;

      /* Espaciado */
      --spacing-sm: 8px;
      --spacing-md: 16px;
      --spacing-lg: 24px;
      --spacing-xl: 32px;

      /* --- Variables para el Carrusel Principal --- */
      --carousel-slide-transition-delay: 7000ms; /* 7 segundos */
    }

    /* --- Reset Básico y Configuración Global --- */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* === Estilos Generales === */
    body {
      font-family: var(--font-body);
      margin: 0;
      padding: 0;
      background-color: var(--dendro-base-dark);
      color: var(--dendro-neutral-light);
      line-height: 1.6;
      overflow-x: hidden;
    }

    .container {
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
      padding: var(--spacing-md) 0;
    }

  	 h1, h2, h3 {
  	   font-family: var(--font-heading);
  	   font-weight: 700;
  	   line-height: 1.2;
  	 }
  	 h1 { font-size: 3.5rem; color: var(--dendro-neutral-light); }
  	 h2 { font-size: 2.5rem; color: var(--dendro-neutral-light); text-align: center; margin-top: var(--spacing-xl); margin-bottom: var(--spacing-lg); }

  	 /* Regla específica para alinear el h2 del carousel a la izquierda */
    .carousel-slide .text-left-content h2 {
      text-align: left;
      margin-left: 0;
      margin-right: 0;
      margin-top: var(--spacing-xl);
      margin-bottom: var(--spacing-lg);
      font-size: 2.8rem;
    }

  	 p { font-size: 1.1rem; margin-bottom: var(--spacing-md); }
  	 a { color: var(--dendro-trust-blue); text-decoration: none; transition: color 0.3s ease; }
  	 a:hover, a:focus { color: var(--dendro-primary); }
  	 .highlight { color: var(--dendro-primary); font-weight: 700; }

     .carousel-slide:last-child.active {
  transition: opacity 0s; /* sin fade-out en el último */
}


  	 /* === Botones === */
  	 .cta-button {
  	   display: inline-block; padding: var(--spacing-sm) var(--spacing-lg); border-radius: 5px;
  	   font-weight: 700; transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  	   font-size: 1rem; cursor: pointer; text-align: center;
  	 }
  	 .cta-button.dendro-original {
  	   background-color: var(--dendro-primary); color: var(--dendro-base-dark); border: 2px solid var(--dendro-primary);
  	 }
  	 .cta-button.dendro-original:hover, .cta-button.dendro-original:focus {
  	   background-color: #ff9933; color: var(--dendro-base-dark); transform: translateY(-2px);
  	   box-shadow: 0 4px 15px rgba(255, 133, 0, 0.4);
  	 }

  	 /* === Header y Navegación === */
    header {
      position: sticky;
      top: 0;
      z-index: 100;
      /* Fondo inicial semitransparente con blur para un efecto moderno */
background-color: rgba(26, 26, 26, 0.7) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
      padding: var(--spacing-md) 0;
      transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease; /* Añadimos transiciones */
      border-bottom: none; /* Quitamos el borde inferior inicial para que el fondo parezca más limpio */
    }

    /* Estilo para el header cuando se hace scroll */
    header.scrolled {
      background-color: var(--dendro-base-dark); /* Fondo completamente opaco */
      backdrop-filter: none; /* Quitamos el blur */
      border-bottom: 1px solid var(--dendro-neutral-dark); /* Añadimos el borde de nuevo */
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Opcional: añade una sombra suave */
    }
  	 .header-top-bar {
  	   display: flex;
  	 	 justify-content: space-between;
  	 	 align-items: center;
  	 }
  	 .logo-container .dendro-logo-text {
  	   font-family: var(--font-heading);
  	 	 font-size: 2rem;
  	 	 font-weight: 700;
  	 	 color: var(--dendro-primary);
  	 	 animation: gradient-pulse 2s infinite ease-in-out;
  	 }
  	 @keyframes gradient-pulse {
  	   0% { background: linear-gradient(to right, #FF8500, #ff9933); background-clip: text; -webkit-background-clip: text; color: transparent; transform: scale(1); }
  	   50% { background: linear-gradient(to right, #ff9933, #FF8500); background-clip: text; -webkit-background-clip: text; color: transparent; transform: scale(1.05); }
  	   100% { background: linear-gradient(to right, #FF8500, #ff9933); background-clip: text; -webkit-background-clip: text; color: transparent; transform: scale(1); }
  	 }
  	 .main-nav .nav-list {
  	   list-style: none;
  	 	 display: flex;
  	 	 gap: var(--spacing-lg);
  	 }
  	 .main-nav .nav-link {
  	   color: var(--dendro-neutral-light);
  	 	 font-weight: 500;
  	 	 font-size: 1rem;
  	 	 padding: 5px;
  	 	 transition: color 0.3s ease;
  	 	 position: relative;
  	 	 display: inline-block;
  	 }
  	 .main-nav .nav-link::after {
  	   content: '';
  	 	 position: absolute;
  	 	 bottom: -2px;
  	 	 left: 0;
  	 	 width: 0;
  	 	 height: 2px;
  	 	 background-color: var(--dendro-primary);
  	 	 transition: width 0.3s ease;
  	 }
  	 .main-nav .nav-link.line-transition-right::after {
  	   transform-origin: left;
  	 	 animation: growLineRight var(--carousel-slide-transition-delay) ease-out forwards;
  	 }
  	 .main-nav .nav-link.line-transition-left::after {
  	   transform-origin: right;
  	 	 animation: growLineLeft var(--carousel-slide-transition-delay) ease-out forwards;
  	 }
  	 @keyframes growLineRight { from { width: 0; } to { width: 100%; } }
  	 @keyframes growLineLeft { from { width: 0; } to { width: 100%; } }
  	 .main-nav .nav-link:hover::after, .main-nav .nav-link:focus::after { width: 100%; }
  	 .main-nav .nav-link:hover { color: var(--dendro-primary); }
  	 .menu-toggle {
  	   display: none;
  	 	 background: none;
  	 	 border: none;
  	 	 color: var(--dendro-neutral-light);
  	 	 font-size: 2rem;
  	 	 cursor: pointer;
  	 }
  	 @media (max-width: 768px) {
  	   .main-nav .nav-list {
  	 	 display: none;
  	 	 flex-direction: column;
  	 	 position: absolute;
  	 	 top: 100%;
  	 	 left: 0;
  	 	 width: 100%;
  	 	 background-color: var(--dendro-neutral-dark);
  	 	 padding: var(--spacing-md) 0;
  	 	 box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  	 	 }
  	   .main-nav .nav-list.active { display: flex; }
  	   .main-nav .nav-list li { width: 100%; text-align: center; margin: var(--spacing-sm) 0; }
  	   .main-nav .nav-link { padding: var(--spacing-md); display: block; }
  	   .menu-toggle { display: block; }
  	 }

  	 /* === Carrusel de Logos de Áreas (SwiperJS) === */
  	 .header-carousel-section {
  	   background-color: var(--dendro-base-dark);
  	 	 padding: var(--spacing-lg) 0;
  	 	 margin-top: var(--spacing-md);
  	 }
  	 .logos-area-swiper {
  	   width: 100%; overflow: hidden;
  	 }
  	 .logos-area-swiper .swiper-slide {
  	   text-align: center; background: transparent;
  	 	 display: flex; justify-content: center; align-items: center; height: auto;
  	 }
  	 .logos-area-swiper .swiper-slide img {
  	   display: block; max-width: 100%; height: 80px; object-fit: contain;
  	 	 filter: grayscale(100%) brightness(1.5); opacity: 0.7; transition: all 0.3s ease;
  	 }
  	 .logos-area-swiper .swiper-slide:hover img {
  	   filter: grayscale(0) brightness(1.2); opacity: 1;
  	 }

  	 /* === Sección de Misión con Código === */
  	 .mission {
  	   background-color: var(--dendro-neutral-dark); padding: 60px 0; text-align: center;
  	 }
  	 .mission h2 { color: var(--dendro-neutral-light); margin-bottom: var(--spacing-lg); }
  	 .mission p { color: var(--dendro-neutral-light); max-width: 700px; margin: 0 auto var(--spacing-lg) auto; }
  	 .code-simulation {
  	   background-color: var(--dendro-base-dark); border-radius: 8px; border: 1px solid var(--dendro-neutral-dark);
  	 	 box-shadow: 0 4px 15px rgba(0,0,0,0.5); max-width: 600px; margin: 0 auto; overflow: hidden;
  	 }
  	 .code-header {
  	   background-color: var(--dendro-neutral-dark); padding: 10px 15px; display: flex;
  	 	 justify-content: space-between; align-items: center; color: #aaa; font-size: 0.9rem;
  	 	 border-bottom: 1px solid var(--dendro-neutral-dark);
  	 }
  	 .code-actions { display: flex; gap: 8px; }
  	 .action-close, .action-minimize, .action-maximize { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
  	 .action-close { background-color: #ff5f56; }
  	 .action-minimize { background-color: #ffbd2e; }
  	 .action-maximize { background-color: #27c93f; }
  	 .code-content { padding: var(--spacing-md); text-align: left; }
  	 .code-content pre { white-space: pre-wrap; word-wrap: break-word; }
  	 .code-content code { font-family: 'Roboto Mono', monospace; font-size: 0.9rem; line-height: 1.5; }
  	 .code-footer {
  	   background-color: var(--dendro-neutral-dark); padding: 15px; display: flex;
  	 	 justify-content: space-between; align-items: center; border-top: 1px solid var(--dendro-neutral-dark);
  	 }
  	 .footer-status { color: var(--dendro-tech-green); font-weight: bold; }
  	 .cta-button-small {
  	   padding: 8px 16px; font-size: 0.9rem; background-color: var(--dendro-primary);
  	 	 color: var(--dendro-base-dark); border: none;
  	 }
  	 .cta-button-small:hover { background-color: #cc6a00; }


  	 /* === Sección de Resultados === */
  	 .results {
  	   text-align: center; padding: 80px 0; background-color: var(--dendro-neutral-dark);
  	 }
  	 .results h2 { color: var(--dendro-neutral-light); margin-bottom: var(--spacing-md); }
  	 .results p { color: var(--dendro-neutral-light); margin-bottom: var(--spacing-lg); }
  	 .cta-button-primary {
  	   display: inline-block; padding: 15px 30px; background-color: var(--dendro-primary);
  	 	 color: var(--dendro-base-dark); font-weight: 700; font-size: 1.1rem; border-radius: 8px;
  	   transition: background-color 0.3s ease, transform 0.2s ease;
  	 }
  	 .cta-button-primary:hover { background-color: #cc6a00; transform: translateY(-2px); }

  	 /* === Footer === */
  	 footer {
  	   background-color: var(--dendro-base-dark); color: var(--dendro-neutral-light);
  	 	 padding-top: 80px; border-top: 1px solid var(--dendro-neutral-dark);
  	 }
  	 .footer-content {
  	   display: flex; justify-content: space-between; gap: 50px; padding-bottom: 50px;
  	 }
  	 .footer-section {
  	   flex-grow: 1; min-width: 180px; flex-shrink: 1;
  	 }
  	 .footer-section.footer-newsletter {
  	   flex-basis: 300px; flex-grow: 0; flex-shrink: 0;
  	 }
  	 .footer-section.footer-links {
  	   flex-basis: 200px; flex-grow: 1;
  	 }
  	 .footer-section h4 {
  	   color: var(--dendro-primary); font-size: 1.2rem; margin-bottom: 20px; font-family: var(--font-heading);
  	 }
  	 .footer-section ul { list-style: none; }
  	 .footer-section ul li { margin-bottom: 10px; }
  	 .footer-section ul li a {
  	   color: var(--dendro-neutral-light); font-size: 0.9rem; transition: color 0.3s ease, transform 0.3s ease;
  	 	 display: inline-block; position: relative;
  	 }
  	 .footer-section ul li a:hover { color: var(--dendro-primary); transform: translateX(8px); }
  	 .footer-newsletter p { margin-bottom: 5px; }
  	 .footer-newsletter span {
  	   font-size: 0.85rem; color: #aaa; display: block; margin-bottom: 30px;
  	 }
  	 .newsletter-input {
  	   display: flex; gap: 10px;
  	 }
  	 .newsletter-input input[type="email"] {
  	   flex-grow: 1; padding: 12px; border-radius: 5px; border: 1px solid var(--dendro-neutral-dark);
  	 	 background-color: var(--dendro-neutral-dark); color: var(--dendro-neutral-light); font-size: 0.9rem;
  	 }
  	 .cta-button-newsletter {
  	   padding: 12px 20px; background-color: var(--dendro-primary); color: var(--dendro-base-dark);
  	 	 font-weight: 700; border-radius: 5px; border: none; font-size: 0.9rem; cursor: pointer;
  	 	 transition: background-color 0.3s ease;
  	 }
  	 .cta-button-newsletter:hover { background-color: #cc6a00; }
  	 .footer-logo-small { max-width: 100px; margin-bottom: 15px; }
  	 .footer-bottom {
  	   background-color: var(--dendro-neutral-dark); padding: 20px 0; margin-top: 50px;
  	 }
  	 .footer-bottom-content {
  	   display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;
  	 }
  	 .legal-info { font-size: 0.85rem; color: #aaa; }
  	 .social-icons {
  	   display: flex; gap: 15px;
  	 }
  	 .social-icons a {
  	   color: #aaa; font-size: 1.3rem; transition: color 0.3s ease;
  	 }
  	 .social-icons a:hover { color: var(--dendro-primary); }
  	 .language-selector {
  	   display: flex; align-items: center; gap: 8px; color: #aaa; font-size: 0.9rem; cursor: pointer;
  	 }
  	 .language-selector i { font-size: 1rem; }
  	 @media (max-width: 992px) {
  	   .footer-content { flex-wrap: nowrap; gap: 20px; }
  	   .footer-section { flex-basis: 150px; }
  	   .footer-section.footer-newsletter { flex-basis: 250px; }
  	 }
/* ===================== FOOTER RESPONSIVE ===================== */
@media (max-width: 768px) {
  /* Ocultar todas las secciones de enlaces */
  .footer-section.footer-links {
    display: none !important;
  }

  /* Newsletter centrado */
  .footer-section.footer-newsletter {
    width: 100%;
    text-align: center;
    margin: 0 auto 20px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-section.footer-newsletter img.footer-logo-small {
    margin-bottom: 10px;
  }

  .footer-section.footer-newsletter p,
  .footer-section.footer-newsletter span {
    max-width: 80%;
    margin: 0 auto 8px auto;
  }

  /* Input y botón centrados */
  .footer-section.footer-newsletter .newsletter-input {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  .footer-section.footer-newsletter input[type="email"] {
    width: 80%;
    max-width: 300px;
    text-align: center;
  }

  .footer-section.footer-newsletter button.cta-button-newsletter {
    width: 80%;
    max-width: 300px;
  }

  /* Footer inferior centrado */
  .footer-bottom .footer-bottom-content {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    text-align: center;
  }

  .footer-bottom .social-icons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 5px;
  }

  .footer-bottom .social-icons a {
    font-size: 1.3rem;
  }

  .footer-bottom .language-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
}



  	 /* =========================================================================
      ** SECCIÓN EDUCACIÓN STEM (Y ADAPTACIONES DE ALINEACIÓN) **
      ========================================================================= */

.section-stem-education {
    background: inherit; /* Hereda el fondo de la sección padre (Hero 3D) */
    padding: 80px 0;
    position: relative;
    z-index: 2; /* Asegura que quede sobre el fondo 3D */
}
  	 .section-stem-education .container {
  	   display: flex; /* Contenedor interno flex */
  	 	 justify-content: space-between; /* Distribuye el espacio entre las dos columnas */
  	 	 align-items: center; /* Alinea verticalmente los elementos internos */
  	 	 width: 100%;
  	 	 max-width: 1200px;
  	 	 margin: 0 auto;
  	 	 padding: 0 20px;
  	 	 flex-wrap: wrap; /* Permite el ajuste en pantallas pequeñas */
  	 }

  	 /* Columna izquierda: Contenido de texto */
  	 .stem-text-content {
  	   flex: 1; /* Ocupa el espacio disponible */
  	 	 max-width: 48%; /* Limita el ancho para el layout de dos columnas */
  	 	 padding-right: 60px; /* Espacio entre columnas */
  	 	 display: flex;
  	 	 flex-direction: column;
  	 	 justify-content: center; /* Centra verticalmente el contenido si es necesario */
  	 	 height: 100%; /* Asegura que ocupe toda la altura del contenedor flex */
  	 	 text-align: left; /* Alineación de texto a la izquierda */
  	 }

  	 .stem-text-content p {
  	   color: var(--dendro-neutral-light);
  	 	 font-size: 1.1rem;
  	 	 line-height: 1.6;
  	 	 margin-bottom: var(--spacing-md);
  	 }

  	 /* Columna derecha: Títulos y roles */
  	 .stem-title-area {
  	   flex: 1; /* Ocupa el espacio restante */
  	 	 max-width: 48%; /* Limita el ancho */
  	 	 display: flex;
  	 	 flex-direction: column;
  	 	 align-items: flex-start; /* Alinea elementos a la izquierda */
  	 	 padding-left: 60px; /* Espacio entre columnas */
  	 	 height: 100%;
  	 	 text-align: left; /* Alineación de texto a la izquierda */
  	 }

	   	 /* Columna derecha: Títulos y roles */
  	 .stem-title-area2 {
  	   flex: 1; /* Ocupa el espacio restante */
  	 	 max-width: 48%; /* Limita el ancho */
  	 	 display: flex;
  	 	 flex-direction: column;
  	 	 align-items: flex-start; /* Alinea elementos a la izquierda */
  	 	 padding-left: 10px; /* Espacio entre columnas */
  	 	 height: 100%;
  	 	 text-align: left; /* Alineación de texto a la izquierda */
  	 }

  	 /* Estilo para el subtítulo "DENDRO MAKERS BYTE'S" */
  	 .stem-title-area .secondary-title {
  	   font-size: 0.9rem;
  	 	 color: var(--dendro-primary);
  	 	 font-weight: 700;
  	 	 text-transform: uppercase;
  	 	 letter-spacing: 1px;
  	 	 margin-bottom: 10px;
  	 }

  	 /* Estilo para el título principal "Qué Hacemos?" */
  	 .stem-title-area h2 {
  	   font-size: 3.5rem;
  	 	 color: var(--dendro-neutral-light);
  	 	 margin-bottom: 15px;
  	 	 line-height: 1.1;
  	 	 white-space: pre-wrap;
  	 	 text-align: left; /* Asegura alineación izquierda */
  	 }

  	 /* Estilo para el rol "CEO +" */
  	 .stem-title-area .role-info {
  	   font-size: 1.2rem;
  	 	 color: var(--dendro-neutral-light);
  	 	 font-weight: 400;
  	 	 display: flex;
  	 	 align-items: baseline;
  	 }

  	 /* Estilo para el símbolo '+' */
  	 .stem-title-area .role-info .plus-sign {
  	   color: var(--dendro-primary);
  	 	 font-size: 1.8rem;
  	 	 margin-left: 5px;
  	 }

/* =========================================================================
   ** SECCIÓN "QUÉ HACEMOS / TECNOLOGÍAS APLICADAS" RESPONSIVE
   ========================================================================= */
@media (max-width: 768px) {
  .section-stem-education,
  .section-stem-education .container {
    flex-direction: column;
    align-items: flex-start !important; /* 🔹 Alineación izquierda */
    text-align: left !important;
    padding: 30px 20px;
  }

  .stem-text-content,
  .stem-title-area {
    max-width: 100% !important;
    padding: 0 !important;
    margin-bottom: 30px;
    text-align: left !important;
    align-items: flex-start !important;
  }

  /* 🔹 Mantener el tamaño de los títulos igual al carrusel */
  .stem-title-area h2 {
    font-size: 1.8rem !important; /* Igual que títulos del carrusel en móvil */
    line-height: 1.2;
    margin-bottom: 15px;
    text-align: left !important;
  }

  .stem-text-content p {
    font-size: 1rem; /* Alineación consistente con carrusel */
    line-height: 1.6;
  }
}

  	 /* =========================================================================
      ** SECCIÓN INTRODUCTORIA: "Integramos." **
      ========================================================================= */
  	 .intro-text-section {
  	   background-color: var(--dendro-base-dark); /* Mismo fondo oscuro */
  	 	 padding: 40px 0; /* Espaciado vertical */
  	 	 margin-top: var(--spacing-xl); /* Espacio sobre esta sección */
  	 }

  	 .intro-text-section .container {
  	   text-align: left; /* Alinea el texto a la izquierda */
  	 	 width: 90%; /* Ancho del contenedor */
  	 	 max-width: 1200px; /* Máximo ancho del contenedor */
  	 	 margin: 0 auto; /* Centra el contenedor */
  	 	 padding-left: 80px; /* Alinea con el padding izquierdo de otras secciones de texto */
  	 }

  	 .intro-text-section .intro-paragraph {
  	   font-size: 1.1rem; /* Tamaño de fuente consistente */
  	 	 color: var(--dendro-neutral-light); /* Color de texto consistente */
  	 	 margin-bottom: 0; /* Sin margen inferior extra */
  	 	 display: inline-block; /* Permite que text-align funcione correctamente */
  	 }

  	 /* Ajuste para móvil de la sección introductoria */
  	 @media (max-width: 768px) {
  	   .intro-text-section .container {
  	 	 padding-left: 20px; /* Ajusta el padding en pantallas pequeñas */
  	 	 text-align: center; /* Centra el texto en móvil */
  	 	 }
  	 }

  	 /* =========================================================================
      ** OTROS ESTILOS (Header, Carousel, Team, etc.) - MANTENIDOS DE SECCIONES PREVIAS
      ========================================================================= */

  	 /* === Header y Navegación === */
  	 header {
  	   position: sticky;
  	 	 top: 0;
  	 	 z-index: 100;
  	 	 background-color: var(--dendro-base-dark);
  	 	 padding: var(--spacing-md) 0;
  	 	 transition: transform 0.3s ease-in-out;
  	 	 border-bottom: 1px solid var(--dendro-neutral-dark);
  	 }
  	 .header-top-bar {
  	   display: flex;
  	 	 justify-content: space-between;
  	 	 align-items: center;
  	 }
  	 .logo-container .dendro-logo-text {
  	   font-family: var(--font-heading);
  	 	 font-size: 2rem;
  	 	 font-weight: 700;
  	 	 color: var(--dendro-primary);
  	 	 animation: gradient-pulse 2s infinite ease-in-out;
  	 }
  	 @keyframes gradient-pulse {
  	   0% { background: linear-gradient(to right, #FF8500, #ff9933); background-clip: text; -webkit-background-clip: text; color: transparent; transform: scale(1); }
  	   50% { background: linear-gradient(to right, #ff9933, #FF8500); background-clip: text; -webkit-background-clip: text; color: transparent; transform: scale(1.05); }
  	   100% { background: linear-gradient(to right, #FF8500, #ff9933); background-clip: text; -webkit-background-clip: text; color: transparent; transform: scale(1); }
  	 }
  	 .main-nav .nav-list {
  	   list-style: none;
  	 	 display: flex;
  	 	 gap: var(--spacing-lg);
  	 }
  	 .main-nav .nav-link {
  	   color: var(--dendro-neutral-light);
  	 	 font-weight: 500;
  	 	 font-size: 1rem;
  	 	 padding: 5px;
  	 	 transition: color 0.3s ease;
  	 	 position: relative;
  	 	 display: inline-block;
  	 }
  	 .main-nav .nav-link::after {
  	   content: '';
  	 	 position: absolute;
  	 	 bottom: -2px;
  	 	 left: 0;
  	 	 width: 0;
  	 	 height: 2px;
  	 	 background-color: var(--dendro-primary);
  	 	 transition: width 0.3s ease;
  	 }
  	 .main-nav .nav-link.line-transition-right::after {
  	   transform-origin: left;
  	 	 animation: growLineRight var(--carousel-slide-transition-delay) ease-out forwards;
  	 }
  	 .main-nav .nav-link.line-transition-left::after {
  	   transform-origin: right;
  	   animation: growLineLeft var(--carousel-slide-transition-delay) ease-out forwards;
  	 }
  	 @keyframes growLineRight { from { width: 0; } to { width: 100%; } }
  	 @keyframes growLineLeft { from { width: 0; } to { width: 100%; } }
  	 .main-nav .nav-link:hover::after, .main-nav .nav-link:focus::after { width: 100%; }
  	 .main-nav .nav-link:hover { color: var(--dendro-primary); }
  	 .menu-toggle {
  	   display: none;
  	 	 background: none;
  	 	 border: none;
  	 	 color: var(--dendro-neutral-light);
  	 	 font-size: 2rem;
  	 	 cursor: pointer;
  	 }
  	 @media (max-width: 768px) {
  	   .main-nav .nav-list {
  	 	 display: none;
  	 	 flex-direction: column;
  	 	 position: absolute;
  	 	 top: 100%;
  	 	 left: 0;
  	 	 width: 100%;
  	 	 background-color: var(--dendro-neutral-dark);
  	 	 padding: var(--spacing-md) 0;
  	 	 box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  	 	 }
  	   .main-nav .nav-list.active { display: flex; }
  	   .main-nav .nav-list li { width: 100%; text-align: center; margin: var(--spacing-sm) 0; }
  	   .main-nav .nav-link { padding: var(--spacing-md); display: block; }
  	   .menu-toggle { display: block; }
  	 }

  	 /* === Carrusel de Logos de Áreas (SwiperJS) === */
  	 .header-carousel-section {
  	   background-color: var(--dendro-base-dark);
  	 	 padding: var(--spacing-lg) 0;
  	 	 margin-top: var(--spacing-md);
  	 }
  	 .logos-area-swiper {
  	   width: 100%; overflow: hidden;
  	 }
  	 .logos-area-swiper .swiper-slide {
  	   text-align: center; background: transparent;
  	 	 display: flex; justify-content: center; align-items: center; height: auto;
  	 }
  	 .logos-area-swiper .swiper-slide img {
  	   display: block; max-width: 100%; height: 80px; object-fit: contain;
  	 	 filter: grayscale(100%) brightness(1.5); opacity: 0.7; transition: all 0.3s ease;
  	 }
  	 .logos-area-swiper .swiper-slide:hover img {
  	   filter: grayscale(0) brightness(1.2); opacity: 1;
  	 }

  	 /* === Sección de Misión con Código === */
  	 .mission {
  	   background-color: var(--dendro-neutral-dark); padding: 60px 0; text-align: center;
  	 }
  	 .mission h2 { color: var(--dendro-neutral-light); margin-bottom: var(--spacing-lg); }
  	 .mission p { color: var(--dendro-neutral-light); max-width: 700px; margin: 0 auto var(--spacing-lg) auto; }
  	 .code-simulation {
  	   background-color: var(--dendro-base-dark); border-radius: 8px; border: 1px solid var(--dendro-neutral-dark);
  	 	 box-shadow: 0 4px 15px rgba(0,0,0,0.5); max-width: 600px; margin: 0 auto; overflow: hidden;
  	 }
  	 .code-header {
  	   background-color: var(--dendro-neutral-dark); padding: 10px 15px; display: flex;
  	 	 justify-content: space-between; align-items: center; color: #aaa; font-size: 0.9rem;
  	 	 border-bottom: 1px solid var(--dendro-neutral-dark);
  	 }
  	 .code-actions { display: flex; gap: 8px; }
  	 .action-close, .action-minimize, .action-maximize { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
  	 .action-close { background-color: #ff5f56; }
  	 .action-minimize { background-color: #ffbd2e; }
  	 .action-maximize { background-color: #27c93f; }
  	 .code-content { padding: var(--spacing-md); text-align: left; }
  	 .code-content pre { white-space: pre-wrap; word-wrap: break-word; }
  	 .code-content code { font-family: 'Roboto Mono', monospace; font-size: 0.9rem; line-height: 1.5; }
  	 .code-footer {
  	   background-color: var(--dendro-neutral-dark); padding: 15px; display: flex;
  	 	 justify-content: space-between; align-items: center; border-top: 1px solid var(--dendro-neutral-dark);
  	 }
  	 .footer-status { color: var(--dendro-tech-green); font-weight: bold; }
  	 .cta-button-small {
  	   padding: 8px 16px; font-size: 0.9rem; background-color: var(--dendro-primary);
  	 	 color: var(--dendro-base-dark); border: none;
  	 }
  	 .cta-button-small:hover { background-color: #cc6a00; }


  	 /* === Sección de Resultados === */
  	 .results {
  	   text-align: center; padding: 80px 0; background-color: var(--dendro-neutral-dark);
  	 }
  	 .results h2 { color: var(--dendro-neutral-light); margin-bottom: var(--spacing-md); }
  	 .results p { color: var(--dendro-neutral-light); margin-bottom: var(--spacing-lg); }
  	 .cta-button-primary {
  	   display: inline-block; padding: 15px 30px; background-color: var(--dendro-primary);
  	 	 color: var(--dendro-base-dark); font-weight: 700; font-size: 1.1rem; border-radius: 8px;
  	   transition: background-color 0.3s ease, transform 0.2s ease;
  	 }
  	 .cta-button-primary:hover { background-color: #cc6a00; transform: translateY(-2px); }

  	 /* === Footer === */
  	 footer {
  	   background-color: var(--dendro-base-dark); color: var(--dendro-neutral-light);
  	 	 padding-top: 80px; border-top: 1px solid var(--dendro-neutral-dark);
  	 }
  	 .footer-content {
  	   display: flex; justify-content: space-between; gap: 50px; padding-bottom: 50px;
  	 }
  	 .footer-section {
  	   flex-grow: 1; min-width: 180px; flex-shrink: 1;
  	 }
  	 .footer-section.footer-newsletter {
  	   flex-basis: 300px; flex-grow: 0; flex-shrink: 0;
  	 }
  	 .footer-section.footer-links {
  	   flex-basis: 200px; flex-grow: 1;
  	 }
  	 .footer-section h4 {
  	   color: var(--dendro-primary); font-size: 1.2rem; margin-bottom: 20px; font-family: var(--font-heading);
  	 }
  	 .footer-section ul { list-style: none; }
  	 .footer-section ul li { margin-bottom: 10px; }
  	 .footer-section ul li a {
  	   color: var(--dendro-neutral-light); font-size: 0.9rem; transition: color 0.3s ease, transform 0.3s ease;
  	 	 display: inline-block; position: relative;
  	 }
  	 .footer-section ul li a:hover { color: var(--dendro-primary); transform: translateX(8px); }
  	 .footer-newsletter p { margin-bottom: 5px; }
  	 .footer-newsletter span {
  	   font-size: 0.85rem; color: #aaa; display: block; margin-bottom: 30px;
  	 }
  	 .newsletter-input {
  	   display: flex; gap: 10px;
  	 }
  	 .newsletter-input input[type="email"] {
  	   flex-grow: 1; padding: 12px; border-radius: 5px; border: 1px solid var(--dendro-neutral-dark);
  	 	 background-color: var(--dendro-neutral-dark); color: var(--dendro-neutral-light); font-size: 0.9rem;
  	 }
  	 .cta-button-newsletter {
  	   padding: 12px 20px; background-color: var(--dendro-primary); color: var(--dendro-base-dark);
  	 	 font-weight: 700; border-radius: 5px; border: none; font-size: 0.9rem; cursor: pointer;
  	 	 transition: background-color 0.3s ease;
  	 }
  	 .cta-button-newsletter:hover { background-color: #cc6a00; }
  	 .footer-logo-small { max-width: 100px; margin-bottom: 15px; }
  	 .footer-bottom {
  	   background-color: var(--dendro-neutral-dark); padding: 20px 0; margin-top: 50px;
  	 }
  	 .footer-bottom-content {
  	   display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;
  	 }
  	 .legal-info { font-size: 0.85rem; color: #aaa; }
  	 .social-icons {
  	   display: flex; gap: 15px;
  	 }
  	 .social-icons a {
  	   color: #aaa; font-size: 1.3rem; transition: color 0.3s ease;
  	 }
  	 .social-icons a:hover { color: var(--dendro-primary); }
  	 .language-selector {
  	   display: flex; align-items: center; gap: 8px; color: #aaa; font-size: 0.9rem; cursor: pointer;
  	 }
  	 .language-selector i { font-size: 1rem; }
  	 @media (max-width: 992px) {
  	   .footer-content { flex-wrap: nowrap; gap: 20px; }
  	   .footer-section { flex-basis: 150px; }
  	   .footer-section.footer-newsletter { flex-basis: 250px; }
  	 }
  	 @media (max-width: 768px) {
  	   .footer-content { flex-wrap: wrap; gap: 20px; }
  	   .footer-section { flex-basis: 100%; min-width: unset; }
  	   .newsletter-input { flex-direction: column; }
  	   .cta-button-newsletter { width: 100%; }
  	   .footer-bottom-content {
  	 	 flex-direction: column; text-align: center;
  	 	 }
  	   .social-icons { justify-content: center; margin-top: 15px; }
  	   .language-selector { margin-top: 15px; }
  	 }

  	 /* =========================================================================
      ** SECCIÓN EDUCACIÓN STEM (Y ADAPTACIONES DE ALINEACIÓN) **
      ========================================================================= */

  	 .section-stem-education {
  	   background-color: var(--dendro-base-dark);
  	 	 padding: 80px 0;
  	 	 margin-top: var(--spacing-xl);
  	 	 display: flex; /* Contenedor principal flex */
  	 	 align-items: center; /* Centra verticalmente el contenido de las columnas */
  	 	 min-height: 400px; /* Altura mínima para el centrado */
  	 }

  	 .section-stem-education .container {
  	   display: flex; /* Contenedor interno flex */
  	 	 justify-content: space-between; /* Distribuye el espacio entre las dos columnas */
  	 	 align-items: center; /* Alinea verticalmente los elementos internos */
  	 	 width: 100%;
  	 	 max-width: 1200px;
  	 	 margin: 0 auto;
  	 	 padding: 0 20px;
  	 	 flex-wrap: wrap; /* Permite el ajuste en pantallas pequeñas */
  	 }

  	 /* Columna izquierda: Contenido de texto */
  	 .stem-text-content {
  	   flex: 1; /* Ocupa el espacio disponible */
  	 	 max-width: 48%; /* Limita el ancho para el layout de dos columnas */
  	 	 padding-right: 60px; /* Espacio entre columnas */
  	 	 display: flex;
  	 	 flex-direction: column;
  	 	 justify-content: center; /* Centra verticalmente el contenido si es necesario */
  	 	 height: 100%; /* Asegura que ocupe toda la altura del contenedor flex */
  	 	 text-align: left; /* Alineación de texto a la izquierda */
  	 }

  	 .stem-text-content p {
  	   color: var(--dendro-neutral-light);
  	 	 font-size: 1.1rem;
  	 	 line-height: 1.6;
  	 	 margin-bottom: var(--spacing-md);
  	 }

  	 /* Columna derecha: Títulos y roles */
  	 .stem-title-area {
  	   flex: 1; /* Ocupa el espacio restante */
  	 	 max-width: 48%; /* Limita el ancho */
  	 	 display: flex;
  	 	 flex-direction: column;
  	 	 align-items: flex-start; /* Alinea elementos a la izquierda */
  	 	 padding-left: 60px; /* Espacio entre columnas */
  	 	 height: 100%;
  	 	 text-align: left; /* Alineación de texto a la izquierda */
  	 }

  	 /* Estilo para el subtítulo "DENDRO MAKERS BYTE'S" */
  	 .stem-title-area .secondary-title {
  	   font-size: 0.9rem;
  	 	 color: var(--dendro-primary);
  	 	 font-weight: 700;
  	 	 text-transform: uppercase;
  	 	 letter-spacing: 1px;
  	 	 margin-bottom: 10px;
  	 }

  	 /* Estilo para el título principal "Qué Hacemos?" */
  	 .stem-title-area h2 {
  	   font-size: 3.5rem;
  	 	 color: var(--dendro-neutral-light);
  	 	 margin-bottom: 15px;
  	 	 line-height: 1.1;
  	 	 white-space: pre-wrap;
  	 	 text-align: left; /* Asegura alineación izquierda */
  	 }

  	 /* Estilo para el rol "CEO +" */
  	 .stem-title-area .role-info {
  	   font-size: 1.2rem;
  	 	 color: var(--dendro-neutral-light);
  	 	 font-weight: 400;
  	 	 display: flex;
  	 	 align-items: baseline;
  	 }

  	 /* Estilo para el símbolo '+' */
  	 .stem-title-area .role-info .plus-sign {
  	   color: var(--dendro-primary);
  	 	 font-size: 1.8rem;
  	 	 margin-left: 5px;
  	 }

  	 /* --- Media Queries para Responsive --- */
  	 @media (max-width: 768px) {
  	   /* Secciones que se vuelven columna y se centran */
  	   .section-stem-education,
  	   .section-stem-education .container {
  	 	 flex-direction: column; /* Apila los elementos verticalmente */
  	 	 min-height: auto; /* Ajusta altura automáticamente */
  	 	 align-items: center; /* Centra todos los elementos */
  	 	 text-align: center; /* Centra el texto general */
  	 	 }

  	   .stem-text-content,
  	   .stem-title-area {
  	 	 max-width: 100%; /* Ocupa todo el ancho disponible */
  	 	 padding-right: 0; /* Elimina padding */
  	 	 padding-left: 0; /* Elimina padding */
  	 	 margin-bottom: 40px; /* Espacio entre las secciones ahora verticales */
  	 	 align-items: center; /* Centra el contenido dentro de cada columna */
  	 	 }

  	   /* Ajuste específico para el h2 en móvil */
  	   .stem-title-area h2 {
  	 	 font-size: 2.8rem; /* Reduce tamaño de fuente en móviles */
  	 	 text-align: center; /* Asegura centrado en móvil */
  	 	 }

  	   .stem-title-area .role-info {
  	 	 font-size: 1.1rem;
  	 }

  	   .stem-title-area .role-info .plus-sign {
  	 	 font-size: 1.5rem;
  	 }
  	 }

  	 /* =========================================================================
      ** SECCIÓN INTRODUCTORIA: "Integramos." **
      ========================================================================= */
  	 .intro-text-section {
  	   background-color: var(--dendro-base-dark); /* Mismo fondo oscuro */
  	 	 padding: 40px 0; /* Espaciado vertical */
  	 	 margin-top: var(--spacing-xl); /* Espacio sobre esta sección */
  	 }

  	 .intro-text-section .container {
  	   text-align: left; /* Alinea el texto a la izquierda */
  	 	 width: 90%; /* Ancho del contenedor */
  	 	 max-width: 1200px; /* Máximo ancho del contenedor */
  	 	 margin: 0 auto; /* Centra el contenedor */
  	 	 padding-left: 80px; /* Alinea con el padding izquierdo de otras secciones de texto */
  	 }

  	 .intro-text-section .intro-paragraph {
  	   font-size: 1.1rem; /* Tamaño de fuente consistente */
  	 	 color: var(--dendro-neutral-light); /* Color de texto consistente */
  	 	 margin-bottom: 0; /* Sin margen inferior extra */
  	 	 display: inline-block; /* Permite que text-align funcione correctamente */
  	 }

  	 /* Ajuste para móvil de la sección introductoria */
  	 @media (max-width: 768px) {
  	   .intro-text-section .container {
  	 	 padding-left: 20px; /* Ajusta el padding en pantallas pequeñas */
  	 	 text-align: center; /* Centra el texto en móvil */
  	 	 }
  	 }

  	 /* =========================================================================
      ** OTROS ESTILOS (Header, Carousel, Team, etc.) - MANTENIDOS DE SECCIONES PREVIAS
      ========================================================================= */

  	 /* === Header y Navegación === */
  	 header {
  	   position: sticky;
  	 	 top: 0;
  	 	 z-index: 100;
  	 	 background-color: var(--dendro-base-dark);
  	 	 padding: var(--spacing-md) 0;
  	 	 transition: transform 0.3s ease-in-out;
  	 	 border-bottom: 1px solid var(--dendro-neutral-dark);
  	 }
  	 .header-top-bar {
  	   display: flex;
  	 	 justify-content: space-between;
  	 	 align-items: center;
  	 }
  	 .logo-container .dendro-logo-text {
  	   font-family: var(--font-heading);
  	 	 font-size: 2rem;
  	 	 font-weight: 700;
  	 	 color: var(--dendro-primary);
  	 	 animation: gradient-pulse 2s infinite ease-in-out;
  	 }
  	 @keyframes gradient-pulse {
  	   0% { background: linear-gradient(to right, #FF8500, #ff9933); background-clip: text; -webkit-background-clip: text; color: transparent; transform: scale(1); }
  	   50% { background: linear-gradient(to right, #ff9933, #FF8500); background-clip: text; -webkit-background-clip: text; color: transparent; transform: scale(1.05); }
  	   100% { background: linear-gradient(to right, #FF8500, #ff9933); background-clip: text; -webkit-background-clip: text; color: transparent; transform: scale(1); }
  	 }
  	 .main-nav .nav-list {
  	   list-style: none;
  	 	 display: flex;
  	 	 gap: var(--spacing-lg);
  	 }
  	 .main-nav .nav-link {
  	   color: var(--dendro-neutral-light);
  	 	 font-weight: 500;
  	 	 font-size: 1rem;
  	 	 padding: 5px;
  	 	 transition: color 0.3s ease;
  	 	 position: relative;
  	 	 display: inline-block;
  	 }
  	 .main-nav .nav-link::after {
  	   content: '';
  	 	 position: absolute;
  	 	 bottom: -2px;
  	 	 left: 0;
  	 	 width: 0;
  	 	 height: 2px;
  	 	 background-color: var(--dendro-primary);
  	 	 transition: width 0.3s ease;
  	 }
  	 .main-nav .nav-link.line-transition-right::after {
  	   transform-origin: left;
  	 	 animation: growLineRight var(--carousel-slide-transition-delay) ease-out forwards;
  	 }
  	 .main-nav .nav-link.line-transition-left::after {
  	   transform-origin: right;
  	 	 animation: growLineLeft var(--carousel-slide-transition-delay) ease-out forwards;
  	 }
  	 @keyframes growLineRight { from { width: 0; } to { width: 100%; } }
  	 @keyframes growLineLeft { from { width: 0; } to { width: 100%; } }
  	 .main-nav .nav-link:hover::after, .main-nav .nav-link:focus::after { width: 100%; }
  	 .main-nav .nav-link:hover { color: var(--dendro-primary); }
  	 .menu-toggle {
  	   display: none;
  	 	 background: none;
  	 	 border: none;
  	 	 color: var(--dendro-neutral-light);
  	 	 font-size: 2rem;
  	 	 cursor: pointer;
  	 }
  	 @media (max-width: 768px) {
  	   .main-nav .nav-list {
  	 	 display: none;
  	 	 flex-direction: column;
  	 	 position: absolute;
  	 	 top: 100%;
  	 	 left: 0;
  	 	 width: 100%;
  	 	 background-color: var(--dendro-neutral-dark);
  	 	 padding: var(--spacing-md) 0;
  	 	 box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  	 	 }
  	   .main-nav .nav-list.active { display: flex; }
  	   .main-nav .nav-list li { width: 100%; text-align: center; margin: var(--spacing-sm) 0; }
  	   .main-nav .nav-link { padding: var(--spacing-md); display: block; }
  	   .menu-toggle { display: block; }
  	 }

  	 /* === Carrusel de Logos de Áreas (SwiperJS) === */
  	 .header-carousel-section {
  	   background-color: var(--dendro-base-dark);
  	 	 padding: var(--spacing-lg) 0;
  	 	 margin-top: var(--spacing-md);
  	 }
  	 .logos-area-swiper {
  	   width: 100%; overflow: hidden;
  	 }
  	 .logos-area-swiper .swiper-slide {
  	   text-align: center; background: transparent;
  	 	 display: flex; justify-content: center; align-items: center; height: auto;
  	 }
  	 .logos-area-swiper .swiper-slide img {
  	   display: block; max-width: 100%; height: 80px; object-fit: contain;
  	 	 filter: grayscale(100%) brightness(1.5); opacity: 0.7; transition: all 0.3s ease;
  	 }
  	 .logos-area-swiper .swiper-slide:hover img {
  	   filter: grayscale(0) brightness(1.2); opacity: 1;
  	 }

  	 /* === Sección de Misión con Código === */
  	 .mission {
  	   background-color: var(--dendro-neutral-dark); padding: 60px 0; text-align: center;
  	 }
  	 .mission h2 { color: var(--dendro-neutral-light); margin-bottom: var(--spacing-lg); }
  	 .mission p { color: var(--dendro-neutral-light); max-width: 700px; margin: 0 auto var(--spacing-lg) auto; }
  	 .code-simulation {
  	   background-color: var(--dendro-base-dark); border-radius: 8px; border: 1px solid var(--dendro-neutral-dark);
  	 	 box-shadow: 0 4px 15px rgba(0,0,0,0.5); max-width: 600px; margin: 0 auto; overflow: hidden;
  	 }
  	 .code-header {
  	   background-color: var(--dendro-neutral-dark); padding: 10px 15px; display: flex;
  	 	 justify-content: space-between; align-items: center; color: #aaa; font-size: 0.9rem;
  	 	 border-bottom: 1px solid var(--dendro-neutral-dark);
  	 }
  	 .code-actions { display: flex; gap: 8px; }
  	 .action-close, .action-minimize, .action-maximize { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
  	 .action-close { background-color: #ff5f56; }
  	 .action-minimize { background-color: #ffbd2e; }
  	 .action-maximize { background-color: #27c93f; }
  	 .code-content { padding: var(--spacing-md); text-align: left; }
  	 .code-content pre { white-space: pre-wrap; word-wrap: break-word; }
  	 .code-content code { font-family: 'Roboto Mono', monospace; font-size: 0.9rem; line-height: 1.5; }
  	 .code-footer {
  	   background-color: var(--dendro-neutral-dark); padding: 15px; display: flex;
  	 	 justify-content: space-between; align-items: center; border-top: 1px solid var(--dendro-neutral-dark);
  	 }
  	 .footer-status { color: var(--dendro-tech-green); font-weight: bold; }
  	 .cta-button-small {
  	   padding: 8px 16px; font-size: 0.9rem; background-color: var(--dendro-primary);
  	 	 color: var(--dendro-base-dark); border: none;
  	 }
  	 .cta-button-small:hover { background-color: #cc6a00; }


  	 /* === Sección de Resultados === */
  	 .results {
  	   text-align: center; padding: 80px 0; background-color: var(--dendro-neutral-dark);
  	 }
  	 .results h2 { color: var(--dendro-neutral-light); margin-bottom: var(--spacing-md); }
  	 .results p { color: var(--dendro-neutral-light); margin-bottom: var(--spacing-lg); }
  	 .cta-button-primary {
  	   display: inline-block; padding: 15px 30px; background-color: var(--dendro-primary);
  	 	 color: var(--dendro-base-dark); font-weight: 700; font-size: 1.1rem; border-radius: 8px;
  	   transition: background-color 0.3s ease, transform 0.2s ease;
  	 }
  	 .cta-button-primary:hover { background-color: #cc6a00; transform: translateY(-2px); }

  	 /* === Footer === */
  	 footer {
  	   background-color: var(--dendro-base-dark); color: var(--dendro-neutral-light);
  	 	 padding-top: 80px; border-top: 1px solid var(--dendro-neutral-dark);
  	 }
  	 .footer-content {
  	   display: flex; justify-content: space-between; gap: 50px; padding-bottom: 50px;
  	 }
  	 .footer-section {
  	   flex-grow: 1; min-width: 180px; flex-shrink: 1;
  	 }
  	 .footer-section.footer-newsletter {
  	   flex-basis: 300px; flex-grow: 0; flex-shrink: 0;
  	 }
  	 .footer-section.footer-links {
  	   flex-basis: 200px; flex-grow: 1;
  	 }
  	 .footer-section h4 {
  	   color: var(--dendro-primary); font-size: 1.2rem; margin-bottom: 20px; font-family: var(--font-heading);
  	 }
  	 .footer-section ul { list-style: none; }
  	 .footer-section ul li { margin-bottom: 10px; }
  	 .footer-section ul li a {
  	   color: var(--dendro-neutral-light); font-size: 0.9rem; transition: color 0.3s ease, transform 0.3s ease;
  	 	 display: inline-block; position: relative;
  	 }
  	 .footer-section ul li a:hover { color: var(--dendro-primary); transform: translateX(8px); }
  	 .footer-newsletter p { margin-bottom: 5px; }
  	 .footer-newsletter span {
  	   font-size: 0.85rem; color: #aaa; display: block; margin-bottom: 30px;
  	 }
  	 .newsletter-input {
  	   display: flex; gap: 10px;
  	 }
  	 .newsletter-input input[type="email"] {
  	   flex-grow: 1; padding: 12px; border-radius: 5px; border: 1px solid var(--dendro-neutral-dark);
  	 	 background-color: var(--dendro-neutral-dark); color: var(--dendro-neutral-light); font-size: 0.9rem;
  	 }
  	 .cta-button-newsletter {
  	   padding: 12px 20px; background-color: var(--dendro-primary); color: var(--dendro-base-dark);
  	 	 font-weight: 700; border-radius: 5px; border: none; font-size: 0.9rem; cursor: pointer;
  	 	 transition: background-color 0.3s ease;
  	 }
  	 .cta-button-newsletter:hover { background-color: #cc6a00; }
  	 .footer-logo-small { max-width: 100px; margin-bottom: 15px; }
  	 .footer-bottom {
  	   background-color: var(--dendro-neutral-dark); padding: 20px 0; margin-top: 50px;
  	 }
  	 .footer-bottom-content {
  	   display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;
  	 }
  	 .legal-info { font-size: 0.85rem; color: #aaa; }
  	 .social-icons {
  	   display: flex; gap: 15px;
  	 }
  	 .social-icons a {
  	   color: #aaa; font-size: 1.3rem; transition: color 0.3s ease;
  	 }
  	 .social-icons a:hover { color: var(--dendro-primary); }
  	 .language-selector {
  	   display: flex; align-items: center; gap: 8px; color: #aaa; font-size: 0.9rem; cursor: pointer;
  	 }
  	 .language-selector i { font-size: 1rem; }
  	 @media (max-width: 992px) {
  	   .footer-content { flex-wrap: nowrap; gap: 20px; }
  	   .footer-section { flex-basis: 150px; }
  	   .footer-section.footer-newsletter { flex-basis: 250px; }
  	 }
  	 @media (max-width: 768px) {
  	   .footer-content { flex-wrap: wrap; gap: 20px; }
  	   .footer-section { flex-basis: 100%; min-width: unset; }
  	   .newsletter-input { flex-direction: column; }
  	   .cta-button-newsletter { width: 100%; }
  	   .footer-bottom-content {
  	 	 flex-direction: column; text-align: center;
  	 	 }
  	   .social-icons { justify-content: center; margin-top: 15px; }
  	   .language-selector { margin-top: 15px; }
  	 }

  	 /* =========================================================================
      ** SECCIÓN EDUCACIÓN STEM (Y ADAPTACIONES DE ALINEACIÓN) **
      ========================================================================= */

  	 .section-stem-education {
  	   background-color: var(--dendro-base-dark);
  	 	 padding: 80px 0;
  	 	 margin-top: var(--spacing-xl);
  	 	 display: flex; /* Contenedor principal flex */
  	 	 align-items: center; /* Centra verticalmente el contenido de las columnas */
  	 	 min-height: 400px; /* Altura mínima para el centrado */
  	 }

  	 .section-stem-education .container {
  	   display: flex; /* Contenedor interno flex */
  	 	 justify-content: space-between; /* Distribuye el espacio entre las dos columnas */
  	 	 align-items: center; /* Alinea verticalmente los elementos internos */
  	 	 width: 100%;
  	 	 max-width: 1200px;
  	 	 margin: 0 auto;
  	 	 padding: 0 20px;
  	 	 flex-wrap: wrap; /* Permite el ajuste en pantallas pequeñas */
  	 }

  	 /* Columna izquierda: Contenido de texto */
  	 .stem-text-content {
  	   flex: 1; /* Ocupa el espacio disponible */
  	 	 max-width: 48%; /* Limita el ancho para el layout de dos columnas */
  	 	 padding-right: 60px; /* Espacio entre columnas */
  	 	 display: flex;
  	 	 flex-direction: column;
  	 	 justify-content: center; /* Centra verticalmente el contenido si es necesario */
  	 	 height: 100%; /* Asegura que ocupe toda la altura del contenedor flex */
  	 	 text-align: left; /* Alineación de texto a la izquierda */
  	 }

  	 .stem-text-content p {
  	   color: var(--dendro-neutral-light);
  	 	 font-size: 1.1rem;
  	 	 line-height: 1.6;
  	 	 margin-bottom: var(--spacing-md);
  	 }

  	 /* Columna derecha: Títulos y roles */
  	 .stem-title-area {
  	   flex: 1; /* Ocupa el espacio restante */
  	 	 max-width: 48%; /* Limita el ancho */
  	 	 display: flex;
  	 	 flex-direction: column;
  	 	 align-items: flex-start; /* Alinea elementos a la izquierda */
  	 	 padding-left: 60px; /* Espacio entre columnas */
  	 	 height: 100%;
  	 	 text-align: left; /* Alineación de texto a la izquierda */
  	 }

  	 /* Estilo para el subtítulo "DENDRO MAKERS BYTE'S" */
  	 .stem-title-area .secondary-title {
  	   font-size: 0.9rem;
  	 	 color: var(--dendro-primary);
  	 	 font-weight: 700;
  	 	 text-transform: uppercase;
  	 	 letter-spacing: 1px;
  	 	 margin-bottom: 10px;
  	 }

  	 /* Estilo para el título principal "Qué Hacemos?" */
  	 .stem-title-area h2 {
  	   font-size: 3.5rem;
  	 	 color: var(--dendro-neutral-light);
  	 	 margin-bottom: 15px;
  	 	 line-height: 1.1;
  	 	 white-space: pre-wrap;
  	 	 text-align: left; /* Asegura alineación izquierda */
  	 }

  	 /* Estilo para el rol "CEO +" */
  	 .stem-title-area .role-info {
  	   font-size: 1.2rem;
  	 	 color: var(--dendro-neutral-light);
  	 	 font-weight: 400;
  	 	 display: flex;
  	 	 align-items: baseline;
  	 }

  	 /* Estilo para el símbolo '+' */
  	 .stem-title-area .role-info .plus-sign {
  	   color: var(--dendro-primary);
  	 	 font-size: 1.8rem;
  	 	 margin-left: 5px;
  	 }

  	 /* --- Media Queries para Responsive --- */
  	 @media (max-width: 768px) {
  	   /* Secciones que se vuelven columna y se centran */
  	   .section-stem-education,
  	   .section-stem-education .container {
  	 	 flex-direction: column; /* Apila los elementos verticalmente */
  	 	 min-height: auto; /* Ajusta altura automáticamente */
  	 	 align-items: center; /* Centra todos los elementos */
  	 	 text-align: center; /* Centra el texto general */
  	 	 }

  	   .stem-text-content,
  	   .stem-title-area {
  	 	 max-width: 100%; /* Ocupa todo el ancho disponible */
  	 	 padding-right: 0; /* Elimina padding */
  	 	 padding-left: 0; /* Elimina padding */
  	 	 margin-bottom: 40px; /* Espacio entre las secciones ahora verticales */
  	 	 align-items: center; /* Centra el contenido dentro de cada columna */
  	 	 }

  	   /* Ajuste específico para el h2 en móvil */
  	   .stem-title-area h2 {
  	 	 font-size: 2.8rem; /* Reduce tamaño de fuente en móviles */
  	 	 text-align: center; /* Asegura centrado en móvil */
  	 	 }

  	   .stem-title-area .role-info {
  	 	 font-size: 1.1rem;
  	 }

  	   .stem-title-area .role-info .plus-sign {
  	 	 font-size: 1.5rem;
  	 }
  	 }

  	 /* =========================================================================
      ** SECCIÓN INTRODUCTORIA: "Integramos." **
      ========================================================================= */
  	 .intro-text-section {
  	   background-color: var(--dendro-base-dark); /* Mismo fondo oscuro */
  	 	 padding: 40px 0; /* Espaciado vertical */
  	 	 margin-top: var(--spacing-xl); /* Espacio sobre esta sección */
  	 }

  	 .intro-text-section .container {
  	   text-align: left; /* Alinea el texto a la izquierda */
  	 	 width: 90%; /* Ancho del contenedor */
  	 	 max-width: 1200px; /* Máximo ancho del contenedor */
  	 	 margin: 0 auto; /* Centra el contenedor */
  	 	 padding-left: 80px; /* Alinea con el padding izquierdo de otras secciones de texto */
  	 }

  	 .intro-text-section .intro-paragraph {
  	   font-size: 1.1rem; /* Tamaño de fuente consistente */
  	 	 color: var(--dendro-neutral-light); /* Color de texto consistente */
  	 	 margin-bottom: 0; /* Sin margen inferior extra */
  	 	 display: inline-block; /* Permite que text-align funcione correctamente */
  	 }

  	 /* Ajuste para móvil de la sección introductoria */
  	 @media (max-width: 768px) {
  	   .intro-text-section .container {
  	 	 padding-left: 20px; /* Ajusta el padding en pantallas pequeñas */
  	 	 text-align: center; /* Centra el texto en móvil */
  	 	 }
  	 }

  	 /* =========================================================================
      ** OTROS ESTILOS (Header, Carousel, Team, etc.) - MANTENIDOS DE SECCIONES PREVIAS
      ========================================================================= */

  	 /* === Header y Navegación === */
  	 header {
  	   position: sticky;
  	 	 top: 0;
  	 	 z-index: 100;
  	 	 background-color: var(--dendro-base-dark);
  	 	 padding: var(--spacing-md) 0;
  	 	 transition: transform 0.3s ease-in-out;
  	 	 border-bottom: 1px solid var(--dendro-neutral-dark);
  	 }
  	 .header-top-bar {
  	   display: flex;
  	 	 justify-content: space-between;
  	 	 align-items: center;
  	 }
  	 .logo-container .dendro-logo-text {
  	   font-family: var(--font-heading);
  	 	 font-size: 2rem;
  	 	 font-weight: 700;
  	 	 color: var(--dendro-primary);
  	 	 animation: gradient-pulse 2s infinite ease-in-out;
  	 }
  	 @keyframes gradient-pulse {
  	   0% { background: linear-gradient(to right, #FF8500, #ff9933); background-clip: text; -webkit-background-clip: text; color: transparent; transform: scale(1); }
  	   50% { background: linear-gradient(to right, #ff9933, #FF8500); background-clip: text; -webkit-background-clip: text; color: transparent; transform: scale(1.05); }
  	   100% { background: linear-gradient(to right, #FF8500, #ff9933); background-clip: text; -webkit-background-clip: text; color: transparent; transform: scale(1); }
  	 }
  	 .main-nav .nav-list {
  	   list-style: none;
  	 	 display: flex;
  	 	 gap: var(--spacing-lg);
  	 }
  	 .main-nav .nav-link {
  	   color: var(--dendro-neutral-light);
  	 	 font-weight: 500;
  	 	 font-size: 1rem;
  	 	 padding: 5px;
  	 	 transition: color 0.3s ease;
  	 	 position: relative;
  	 	 display: inline-block;
  	 }
  	 .main-nav .nav-link::after {
  	   content: '';
  	 	 position: absolute;
  	 	 bottom: -2px;
  	 	 left: 0;
  	 	 width: 0;
  	 	 height: 2px;
  	 	 background-color: var(--dendro-primary);
  	 	 transition: width 0.3s ease;
  	 }
  	 .main-nav .nav-link.line-transition-right::after {
  	   transform-origin: left;
  	 	 animation: growLineRight var(--carousel-slide-transition-delay) ease-out forwards;
  	 }
  	 .main-nav .nav-link.line-transition-left::after {
  	   transform-origin: right;
  	 	 animation: growLineLeft var(--carousel-slide-transition-delay) ease-out forwards;
  	 }
  	 @keyframes growLineRight { from { width: 0; } to { width: 100%; } }
  	 @keyframes growLineLeft { from { width: 0; } to { width: 100%; } }
  	 .main-nav .nav-link:hover::after, .main-nav .nav-link:focus::after { width: 100%; }
  	 .main-nav .nav-link:hover { color: var(--dendro-primary); }
  	 .menu-toggle {
  	   display: none;
  	 	 background: none;
  	 	 border: none;
  	 	 color: var(--dendro-neutral-light);
  	 	 font-size: 2rem;
  	 	 cursor: pointer;
  	 }
  	 @media (max-width: 768px) {
  	   .main-nav .nav-list {
  	 	 display: none;
  	 	 flex-direction: column;
  	 	 position: absolute;
  	 	 top: 100%;
  	 	 left: 0;
  	 	 width: 100%;
  	 	 background-color: var(--dendro-neutral-dark);
  	 	 padding: var(--spacing-md) 0;
  	 	 box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  	 	 }
  	   .main-nav .nav-list.active { display: flex; }
  	   .main-nav .nav-list li { width: 100%; text-align: center; margin: var(--spacing-sm) 0; }
  	   .main-nav .nav-link { padding: var(--spacing-md); display: block; }
  	   .menu-toggle { display: block; }
  	 }

  	 /* === Carrusel de Logos de Áreas (SwiperJS) === */
  	 .header-carousel-section {
  	   background-color: var(--dendro-base-dark);
  	 	 padding: var(--spacing-lg) 0;
  	 	 margin-top: var(--spacing-md);
  	 }
  	 .logos-area-swiper {
  	   width: 100%; overflow: hidden;
  	 }
  	 .logos-area-swiper .swiper-slide {
  	   text-align: center; background: transparent;
  	 	 display: flex; justify-content: center; align-items: center; height: auto;
  	 }
  	 .logos-area-swiper .swiper-slide img {
  	   display: block; max-width: 100%; height: 80px; object-fit: contain;
  	 	 filter: grayscale(100%) brightness(1.5); opacity: 0.7; transition: all 0.3s ease;
  	 }
  	 .logos-area-swiper .swiper-slide:hover img {
  	   filter: grayscale(0) brightness(1.2); opacity: 1;
  	 }

  	 /* === Sección de Misión con Código === */
  	 .mission {
  	   background-color: var(--dendro-neutral-dark); padding: 60px 0; text-align: center;
  	 }
  	 .mission h2 { color: var(--dendro-neutral-light); margin-bottom: var(--spacing-lg); }
  	 .mission p { color: var(--dendro-neutral-light); max-width: 700px; margin: 0 auto var(--spacing-lg) auto; }
  	 .code-simulation {
  	   background-color: var(--dendro-base-dark); border-radius: 8px; border: 1px solid var(--dendro-neutral-dark);
  	 	 box-shadow: 0 4px 15px rgba(0,0,0,0.5); max-width: 600px; margin: 0 auto; overflow: hidden;
  	 }
  	 .code-header {
  	   background-color: var(--dendro-neutral-dark); padding: 10px 15px; display: flex;
  	 	 justify-content: space-between; align-items: center; color: #aaa; font-size: 0.9rem;
  	 	 border-bottom: 1px solid var(--dendro-neutral-dark);
  	 }
  	 .code-actions { display: flex; gap: 8px; }
  	 .action-close, .action-minimize, .action-maximize { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
  	 .action-close { background-color: #ff5f56; }
  	 .action-minimize { background-color: #ffbd2e; }
  	 .action-maximize { background-color: #27c93f; }
  	 .code-content { padding: var(--spacing-md); text-align: left; }
  	 .code-content pre { white-space: pre-wrap; word-wrap: break-word; }
  	 .code-content code { font-family: 'Roboto Mono', monospace; font-size: 0.9rem; line-height: 1.5; }
  	 .code-footer {
  	   background-color: var(--dendro-neutral-dark); padding: 15px; display: flex;
  	 	 justify-content: space-between; align-items: center; border-top: 1px solid var(--dendro-neutral-dark);
  	 }
  	 .footer-status { color: var(--dendro-tech-green); font-weight: bold; }
  	 .cta-button-small {
  	   padding: 8px 16px; font-size: 0.9rem; background-color: var(--dendro-primary);
  	 	 color: var(--dendro-base-dark); border: none;
  	 }
  	 .cta-button-small:hover { background-color: #cc6a00; }

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



  	 /* === Sección de Resultados === */
  	 .results {
  	   text-align: center; padding: 80px 0; background-color: var(--dendro-neutral-dark);
  	 }
  	 .results h2 { color: var(--dendro-neutral-light); margin-bottom: var(--spacing-md); }
  	 .results p { color: var(--dendro-neutral-light); margin-bottom: var(--spacing-lg); }
  	 .cta-button-primary {
  	   display: inline-block; padding: 15px 30px; background-color: var(--dendro-primary);
  	 	 color: var(--dendro-base-dark); font-weight: 700; font-size: 1.1rem; border-radius: 8px;
  	   transition: background-color 0.3s ease, transform 0.2s ease;
  	 }
  	 .cta-button-primary:hover { background-color: #cc6a00; transform: translateY(-2px); }

  	 /* === Footer === */
  	 footer {
  	   background-color: var(--dendro-base-dark); color: var(--dendro-neutral-light);
  	 	 padding-top: 80px; border-top: 1px solid var(--dendro-neutral-dark);
  	 }
  	 .footer-content {
  	   display: flex; justify-content: space-between; gap: 50px; padding-bottom: 50px;
  	 }
  	 .footer-section {
  	   flex-grow: 1; min-width: 180px; flex-shrink: 1;
  	 }
  	 .footer-section.footer-newsletter {
  	   flex-basis: 300px; flex-grow: 0; flex-shrink: 0;
  	 }
  	 .footer-section.footer-links {
  	   flex-basis: 200px; flex-grow: 1;
  	 }
  	 .footer-section h4 {
  	   color: var(--dendro-primary); font-size: 1.2rem; margin-bottom: 20px; font-family: var(--font-heading);
  	 }
  	 .footer-section ul { list-style: none; }
  	 .footer-section ul li { margin-bottom: 10px; }
  	 .footer-section ul li a {
  	   color: var(--dendro-neutral-light); font-size: 0.9rem; transition: color 0.3s ease, transform 0.3s ease;
  	 	 display: inline-block; position: relative;
  	 }
  	 .footer-section ul li a:hover { color: var(--dendro-primary); transform: translateX(8px); }
  	 .footer-newsletter p { margin-bottom: 5px; }
  	 .footer-newsletter span {
  	   font-size: 0.85rem; color: #aaa; display: block; margin-bottom: 30px;
  	 }
  	 .newsletter-input {
  	   display: flex; gap: 10px;
  	 }
  	 .newsletter-input input[type="email"] {
  	   flex-grow: 1; padding: 12px; border-radius: 5px; border: 1px solid var(--dendro-neutral-dark);
  	 	 background-color: var(--dendro-neutral-dark); color: var(--dendro-neutral-light); font-size: 0.9rem;
  	 }
  	 .cta-button-newsletter {
  	   padding: 12px 20px; background-color: var(--dendro-primary); color: var(--dendro-base-dark);
  	 	 font-weight: 700; border-radius: 5px; border: none; font-size: 0.9rem; cursor: pointer;
  	 	 transition: background-color 0.3s ease;
  	 }
  	 .cta-button-newsletter:hover { background-color: #cc6a00; }
  	 .footer-logo-small { max-width: 100px; margin-bottom: 15px; }
  	 .footer-bottom {
  	   background-color: var(--dendro-neutral-dark); padding: 20px 0; margin-top: 50px;
  	 }
  	 .footer-bottom-content {
  	   display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;
  	 }
  	 .legal-info { font-size: 0.85rem; color: #aaa; }
  	 .social-icons {
  	   display: flex; gap: 15px;
  	 }
  	 .social-icons a {
  	   color: #aaa; font-size: 1.3rem; transition: color 0.3s ease;
  	 }
  	 .social-icons a:hover { color: var(--dendro-primary); }
  	 .language-selector {
  	   display: flex; align-items: center; gap: 8px; color: #aaa; font-size: 0.9rem; cursor: pointer;
  	 }
  	 .language-selector i { font-size: 1rem; }
  	 @media (max-width: 992px) {
  	   .footer-content { flex-wrap: nowrap; gap: 20px; }
  	   .footer-section { flex-basis: 150px; }
  	   .footer-section.footer-newsletter { flex-basis: 250px; }
  	 }
  	 @media (max-width: 768px) {
  	   .footer-content { flex-wrap: wrap; gap: 20px; }
  	   .footer-section { flex-basis: 100%; min-width: unset; }
  	   .newsletter-input { flex-direction: column; }
  	   .cta-button-newsletter { width: 100%; }
  	   .footer-bottom-content {
  	 	 flex-direction: column; text-align: center;
  	 	 }
  	   .social-icons { justify-content: center; margin-top: 15px; }
  	   .language-selector { margin-top: 15px; }
  	 }

  	 /* =========================================================================
      ** SECCIÓN ADICIONAL DE LOGOS Y CENTRADO (Mejoras de Estructura) **
      ========================================================================= */

  	 .additional-logos-section {
  	   background-color: var(--dendro-base-dark); /* Fondo oscuro neutro */
  	 	 padding: 60px 0; /* Padding superior e inferior */
  	 	 margin-top: var(--spacing-xl); /* Espacio sobre la sección */
  	 }

  	 /* Estilos para centrar el contenido del encabezado de la sección */
  	 .additional-logos-section .section-header-content {
  	   text-align: center; /* Centra el texto */
  	 	 margin-bottom: var(--spacing-lg); /* Añade espacio debajo del bloque de texto */
  	 	 max-width: 700px; /* Limita el ancho para que el centrado sea más evidente */
  	 	 margin-left: auto; /* Centra el bloque */
  	 	 margin-right: auto; /* Centra el bloque */
  	 }

  	 /* Aseguramos que el título h2 dentro de este bloque también esté centrado */
  	 .additional-logos-section .section-header-content h2 {
  	   color: var(--dendro-neutral-light); /* Título blanco */
  	 	 margin-bottom: var(--spacing-md); /* Un poco menos de espacio entre h2 y p */
  	 }

  	 /* Aseguramos que el párrafo p dentro de este bloque esté centrado */
  	 .additional-logos-section .section-header-content p {
  	   color: var(--dendro-neutral-light); /* Texto blanco */
  	 	 font-size: 1.1rem; /* Tamaño de fuente estándar */
  	 	 line-height: 1.6;
  	 	 margin-bottom: 0; /* Eliminamos margen inferior ya que está en el contenedor */
  	 }

  	 /* Estilos para el carrusel de logos adicionales */
  	 .additional-logos-swiper {
  	   width: 100%;
  	 	 overflow: hidden;
  	 	 padding: 20px 0; /* Padding vertical para que no choque con el borde */
  	 }

  	 /* Estilos para los slides de este carrusel */
  	 .additional-logos-swiper .swiper-slide {
  	   text-align: center;
  	 	 background: transparent;
  	 	 display: flex;
  	 	 justify-content: center;
  	 	 align-items: center;
  	 	 height: auto; /* Altura automática */
  	 }

  	 .additional-logos-swiper .swiper-slide img {
  	   display: block;
  	 	 max-width: 100%;
  	 	 height: 50px; /* Logos más pequeños que los del header */
  	 	 object-fit: contain;
  	 	 filter: grayscale(100%) brightness(1.8); /* Gris y bastante brillante */
  	 	 opacity: 0.6; /* Ligeramente transparente */
  	 	 transition: all 0.3s ease;
  	 }

  	 .additional-logos-swiper .swiper-slide:hover img {
  	   filter: grayscale(0) brightness(1.2); /* Efecto hover: color y brillo */
  	 	 opacity: 1; /* Completamente visible */
  	 }

  	 /* --- Estilos para la navegación de este carrusel (opcional, si quieres mostrarla) --- */
  	 .additional-logos-swiper .swiper-button-next,
  	 .additional-logos-swiper .swiper-button-prev {
  	   color: var(--dendro-primary); /* Color de las flechas */
  	 	 transform: scale(0.7); /* Pequeño ajuste de tamaño */
  	 }
  	 .additional-logos-swiper .swiper-pagination-bullet {
  	   background-color: var(--dendro-primary); /* Color de los puntos de paginación */
  	 }
  	 .additional-logos-swiper .swiper-pagination-bullet-active {
      background-color: var(--dendro-neutral-light); /* Color del punto activo */
    }

  	 /* === ESTILOS ESPECÍFICOS DE LA SECCIÓN HERO (PRIMER BLOQUE) === */
  	 .hero-section {
  	   padding: 80px 0;
  	 	 display: flex;
  	 	 align-items: center;
  	   min-height: 80vh;
  	 	 width: 100%;
  	 }
  	 .hero-content {
  	   display: flex;
  	 	 justify-content: space-between;
  	 	 align-items: flex-start;
  	 	 width: 100%;
  	 	 max-width: 1200px;
  	 	 margin: 0 auto;
  	 	 padding: 0 20px;
  	 }
  	 .text-area {
  	   flex: 1;
  	 	 max-width: 45%;
  	 }
  	 .logo { /* Reutilizado de la sección del equipo para el título principal */
  	   font-size: 64px;
  	 	 font-weight: 700;
  	 	 margin-bottom: var(--spacing-md);
  	 	 background: none;
  	 	 color: var(--dendro-neutral-light);
  	 }

	 .btn-left {
  text-align: left; 
  margin-top: 15px; /* Separación respecto al párrafo */
}

.btn-left .cta-button {
  display: inline-block;
}


  	 .status-indicator {
  	   display: flex;
  	 	 align-items: center;
  	 	 gap: var(--spacing-sm);
  	 	 margin-bottom: var(--spacing-lg);
  	 	 font-size: 14px;
  	 	 color: var(--dendro-neutral-dark);
  	 }
  	 .status-indicator .dot {
  	   display: inline-block; width: 10px; height: 10px; background-color: var(--dendro-primary);
  	 	 border-radius: 50%; box-shadow: 0 0 8px var(--dendro-primary);
  	 }
  	 .description { /* Reutilizado para la descripción general */
  	   font-size: 16px;
  	 	 color: var(--dendro-neutral-light);
  	 	 max-width: 480px;
  	 }
  	 .image-area {
  	   flex: 1;
  	 	 max-width: 50%;
  	 	 display: flex;
  	 	 flex-direction: column;
  	 	 align-items: flex-end;
  	 }
  	 .image-gallery {
  	   display: flex;
  	 	 gap: var(--spacing-md);
  	 	 width: 100%;
  	 	 justify-content: flex-end;
  	 	 flex-wrap: wrap;
  	 }
  	 .image-column {
  	   display: flex;
  	 	 flex-direction: column;
  	 	 gap: var(--spacing-md);
  	 	 flex: 1;
  	 	 min-width: calc(50% - 10px);
  	 	 max-width: calc(50% - 10px);
  	 }
  	 .image-item {
  	   position: relative;
  	 	 aspect-ratio: 3/4;
  	 	 overflow: hidden;
  	 	 border-radius: 8px;
  	 	 transition: filter 0.3s ease;
  	 }
  	 .image-wrapper {
  	   position: relative;
  	 	 width: 100%;
  	 	 height: 100%;
  	 	 display: flex;
  	 	 justify-content: center;
  	 	 align-items: center;
  	 }
  	 .image-background {
  	   position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  	 	 background-size: cover; background-position: center;
  	 	 filter: grayscale(100%); transition: filter 0.3s ease;
  	 }
  	 .blur-overlay {
  	   position: absolute; z-index: 10;
  	 	 background: rgba(26, 26, 26, 0.5);
  	 	 backdrop-filter: blur(25px) saturate(0.8); -webkit-backdrop-filter: blur(25px) saturate(0.8);
  	 	 overflow: hidden; display: flex; justify-content: center; align-items: center;
  	 	 color: var(--dendro-neutral-light); text-shadow: 0 0 5px rgba(0,0,0,0.5); border-radius: 8px; box-sizing: border-box;
  	 }
  	 .overlay-top {
  	   background: rgba(255, 133, 0, 0.2); border: 1px solid var(--dendro-primary);
  	 	 backdrop-filter: blur(1px) saturate(0.9); -webkit-backdrop-filter: blur(1px) saturate(0.9);
  	 	 width: 30%; height: 25%; flex-direction: column; justify-content: flex-end; /* Alinea al final */
  	 	 align-items: flex-start; padding-left: 10px; padding-bottom: 10px;
  	 }
  	 .overlay-bottom {
  	   background: rgba(26, 26, 26, 0.2); backdrop-filter: blur(5px) saturate(0.9); -webkit-backdrop-filter: blur(5px) saturate(0.9);
  	 	 width: 30%; height: 25%; flex-direction: column; justify-content: flex-end; /* Alinea al final */
  	 	 align-items: flex-start; padding-left: 10px; padding-bottom: 10px; box-sizing: border-box;
  	 }
  	 .overlay-top-left { top: 10%; left: 10%; }
  	 .overlay-bottom-right { bottom: 10%; right: 10%; }
  	 .overlay-top-right { top: 10%; right: 10%; }
  	 .overlay-bottom-left { bottom: 10%; left: 10%; }
  	 .text-content-in-orange-overlay {
  	   display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  	 	 width: 100%; height: 100%; padding-bottom: 5px; box-sizing: border-box;
  	 }
  	 .text-outside-orange-overlay { color: var(--dendro-neutral-light); line-height: 1; margin-top: 0; }
  	 .text-outside-orange-overlay-bold { font-weight: 700; }
  	 .overlay-label-bottom {
  	   font-size: 12px; color: var(--dendro-neutral-light); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 5px;
  	 }
  	 .smaller-text { font-size: 8px; margin-top: 2px; }
  	 .design-line {
  	   width: 100%; height: 1px; background-color: var(--dendro-primary); margin-top: 30px; opacity: 0.7;
  	 }
  	 .image-item:hover .image-background { filter: grayscale(0%); }
  	 .image-caption-area {
  	   margin-top: var(--spacing-md); width: 100%; display: flex; flex-direction: column; align-items: flex-start;
  	 }
  	 .image-caption-title {
  	   font-size: 18px; font-weight: 700; color: var(--dendro-neutral-light); margin-bottom: var(--spacing-sm);
  	 }
  	 .image-caption-description {
  	   font-size: 12px; color: var(--dendro-neutral-light); line-height: 1.4;
  	 	 display: flex; align-items: center; gap: var(--spacing-sm);
  	 }
  	 .linkedin-icon {
  	   font-size: 16px; color: var(--dendro-primary); display: inline-block; cursor: pointer;
  	 	 transition: color 0.3s ease; text-decoration: none; line-height: 1; border: none;
  	 }
  	 .linkedin-icon:hover { color: var(--dendro-neutral-light); }
  	 @media (max-width: 768px) {
  	   .hero-content {
  	 	 flex-direction: column; align-items: center;
  	 	 }
  	 	 .text-area, .image-area {
  	 	 max-width: 90%; text-align: center;
  	 	 }
  	 	 .image-area {
  	 	 margin-top: 40px; align-items: center;
  	 	 }
  	 	 .blur-overlay {
  	 	   display: flex; flex-direction: column; justify-content: center; align-items: center;
  	 	   width: 100%; height: auto; padding: 10px; box-sizing: border-box; text-align: center; overflow: hidden;
  	 	 }
  	 	 .overlay-top { display: none !important; }
  	 	 .overlay-bottom { display: none !important; }
  	 	 .overlay-top-left, .overlay-bottom-left, .overlay-top-right, .overlay-bottom-right { display: none !important; }
  	 	 .overlay-label-bottom {
  	 	   display: flex; text-align: center; color: var(--dendro-neutral-light);
  	 	   font-size: 12px; letter-spacing: 0.5px; padding: 10px;
  	 	 }
  	 	 .image-caption-area {
  	 	   align-items: center; display: flex; justify-content: center;
  	 	   flex-direction: column; width: 100%;
  	 	   visibility: visible !important; opacity: 1 !important;
  	 	 }
  	 	 .logo { font-size: 48px; }
  	 	 .description { max-width: 100%; }
  	 	 .nav-links { flex-wrap: wrap; justify-content: center; gap: var(--spacing-md); }
  	 }

/* === SECCIÓN DEL EQUIPO === */
.team-display-section {
  background-color: var(--dendro-base-dark);
  padding: 80px 0;
  margin-top: var(--spacing-xl);
}

.team-content-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 40px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.team-text-content {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
  padding-left: 80px; /* Alineado a la línea guía */
}

.team-text-content h1.logo {
  font-size: 2.8rem;
  line-height: 1.2;
  color: var(--dendro-neutral-light);
  margin: 0 0 1rem 0;
}

.team-image-area {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  padding: 0;
}

.image-wrapper {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  min-height: 280px;
}

.image-background {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: block;
}

.mobile-gray-overlay {
  display: none; /* Solo visible en móvil */
}

/* ===================== Responsive ===================== */
@media (max-width: 1024px) {
  .team-text-content {
    padding-left: 100px;
  }

  .team-display-section {
    padding: 60px 0;
    margin-top: calc(var(--spacing-xl) / 1.5);
  }
}

/* === SECCIÓN DEL EQUIPO === */
.team-display-section {
  background-color: var(--dendro-base-dark);
  padding: 80px 0;
  margin-top: var(--spacing-xl);
}

.team-content-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 40px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.team-text-content {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
  padding-left: 80px;
}

.team-text-content h1.logo {
  font-size: 2.8rem;
  line-height: 1.2;
  color: var(--dendro-neutral-light);
  margin: 0 0 1rem 0;
}

.team-image-area {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  padding: 0;
}

.image-wrapper {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  min-height: 280px; /* Desktop siempre tiene altura */
}

.image-background {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: block;
}

/* ===================== Responsive ===================== */
@media (max-width: 1024px) {
  .team-text-content {
    padding-left: 100px;
  }

  .team-display-section {
    padding: 60px 0;
    margin-top: calc(var(--spacing-xl) / 1.5);
  }
}

@media (max-width: 768px) {
  /* === Layout === */
  .team-content-wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 20px;
  }

  .team-display-section {
    padding: 40px 0;
    margin-top: calc(var(--spacing-xl) / 2);
  }

    /* === Signo “+” en naranja Dendro === */
  .mobile-link-icon {
    color: var(--dendro-primary);
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
  }

  .team-text-content {
    padding-left: 0;
  }

  .team-text-content h1.logo {
    font-size: 1.8rem;
  }

  .team-image-area {
    align-items: flex-start;
    width: 100%;
  }

  /* === Imagen gris -> color === */
  .image-wrapper {
    aspect-ratio: 4 / 5;
    min-height: 260px;
  }

  .image-background {
    filter: grayscale(100%);
    transition: filter 0.4s ease;
  }

  .image-wrapper.active .image-background {
    filter: grayscale(0%);
  }

  /* === Overlay gris inicial === */
  .mobile-gray-overlay {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0; /* Cubre toda la imagen */
    background: rgba(30, 30, 30, 0.65);
    backdrop-filter: blur(3px);
    justify-content: center;
    align-items: center;
    color: var(--dendro-neutral-light);
    font-size: 1rem;
    text-align: center;
    transition: opacity 0.4s ease, background-color 0.4s ease;
    z-index: 2;
    opacity: 1;
    gap: 8px;
  }

  /* === Overlay desaparece al activar === */
  .image-wrapper.active .mobile-gray-overlay {
    opacity: 0;
    background: rgba(30, 30, 30, 0); /* Se aclara totalmente */
    backdrop-filter: blur(0px);
    pointer-events: none;
  }

  /* === Texto del overlay desaparece === */
  .mobile-gray-overlay * {
    transition: opacity 0.3s ease;
  }

  .image-wrapper.active .mobile-gray-overlay * {
    opacity: 0;
  }

  /* === Ocultar descripción fuera de la imagen === */
  .image-caption-description {
    display: none !important;
  }

  /* === Logo centrado === */
  .mobile-overlay-logo {
    width: 60px;
    opacity: 0.9;
  }

  .team-text-content .status-indicator span:last-child {
    color: var(--dendro-primary); /* Naranja DENDRO */
  }
}






/* ==== LÍNEA GUÍA TEMPORAL PARA COMPROBAR ALINEACIÓN 
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 1250px; /* Ajusta según el padding lateral global de tus secciones 
  width: 2px;
  height: 100%;
  background-color: red;
  z-index: 9999;
  pointer-events: none; /* No bloquea clics 
  opacity: 0.7;
}*/



 /* =========================================================================
  ** ESTILOS PARA LA SECCIÓN HERO 3D (PANTALLA COMPLETA) **
  ========================================================================= */

  .hero-section-3d-container {
   position: relative; /* Necesario para posicionar elementos hijos */
   width: 100%;
   height: 100vh; /* Ocupa toda la altura del viewport */
   overflow: hidden; /* Evita barras de scroll no deseadas */
   display: flex; /* Usamos flexbox para centrar el contenido principal */
   justify-content: center; /* Centra horizontalmente */
   align-items: center; /* Centra verticalmente */
   text-align: center; /* Centra el texto dentro del contenido */
   background-color: var(--dendro-base-dark); /* Fondo base si el 3D no carga o no está presente */

   /* Aplicamos la imagen de fondo DIRECTAMENTE al contenedor */
   background-image: url('img/D11.png'); /* Tu imagen de fondo */
   background-size: cover; /* Cubre todo el contenedor */
   background-position: center; /* Centra la imagen */
   background-attachment: fixed; /* Fija la imagen al hacer scroll (si se desea) */
   z-index: 0; /* Capa base más baja */
  }

  /* Máscara de blur sobre la imagen de fondo */
  .hero-section-3d-container::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(26, 26, 26, 0.5); /* Oscurece ligeramente la imagen */
   backdrop-filter: blur(10px) saturate(1.5); /* Aplica el blur y satura */
   -webkit-backdrop-filter: blur(10px) saturate(1.5); /* Para compatibilidad con Safari */
   z-index: 1; /* Encima del fondo, debajo del canvas 3D */
  }

  /* El div donde se insertará el canvas 3D */
  #hero-bg-3d {
   position: absolute; /* Se posiciona absolutamente dentro de .hero-section-3d-container */
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 2; /* Encima de la máscara de blur */
  }

  /* Contenedor para todo el contenido visible (logo, título, descripción, indicador) */
  .hero-content-overlay {
   position: relative; /* Necesario para que el contenido se posicione correctamente */
   z-index: 3; /* POR ENCIMA del canvas 3D */
   display: flex;
   flex-direction: column;
   justify-content: center; /* Centra verticalmente el contenido en el overlay */
   align-items: center; /* Centra horizontalmente el contenido en el overlay */
   text-align: center;
   width: 100%; /* Asegura que ocupe el ancho disponible para centrar su contenido */
   padding: var(--spacing-lg);
  }

  .hero-logo-img { /* Ajuste de la clase del logo en esta sección */
   width: 150px; /* Tamaño del logo en la sección hero */
   margin-bottom: var(--spacing-md);
   /* No se necesita z-index explícito aquí si el padre (.hero-content-overlay) tiene el z-index correcto */
  }

  .hero-title { /* Ajuste de la clase del título principal en esta sección */
   font-size: 3rem; /* Tamaño del título principal */
   margin-bottom: var(--spacing-sm);
   color: var(--dendro-neutral-light);
   font-family: var(--font-heading); /* Asegúrate de usar la fuente correcta */
   /* No se necesita z-index explícito aquí */
  }

  .hero-description { /* Ajuste de la clase de la descripción en esta sección */
   font-size: 1.2rem; /* Tamaño de la descripción */
   color: var(--dendro-neutral-light);
   max-width: 600px; /* Limita el ancho del texto para mejor legibilidad */
   opacity: 0.9;
   font-family: var(--font-body); /* Asegúrate de usar la fuente correcta */
   /* No se necesita z-index explícito aquí */
  }

  /* Indicador de "HAY MÁS" */
  .more-text-indicator {
   position: absolute; /* Posiciona de forma absoluta dentro del contenedor */
   bottom: 30px; /* Distancia desde la parte inferior */
   left: 50%; /* Centra horizontalmente */
   transform: translateX(-50%); /* Ajusta el centrado horizontal */
   color: var(--dendro-primary); /* Color del texto */
   font-size: 1rem;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   z-index: 4; /* Asegura que esté al frente de todo */
   animation: bounce 2s infinite ease-in-out; /* Añade un efecto de rebote */
  }

  @keyframes bounce {
   0%, 100% {
    transform: translateX(-50%) translateY(0);
   }
   50% {
    transform: translateX(-50%) translateY(-10px);
   }
  }

  /* Media query para el ajuste de z-index si es necesario en móviles */
  @media (max-width: 768px) {
   .hero-content-overlay {
    /* Si necesitas que el contenido tenga menos padding en móviles */
    padding: var(--spacing-md);
   }
   .hero-title {
    font-size: 2.5rem; /* Ajuste de tamaño de fuente para móviles */
   }
   .hero-description {
    font-size: 1.1rem;
   }
   /* Asegúrate de que el blur siga funcionando en móviles */
   .hero-section-3d-container::before {
    backdrop-filter: blur(8px) saturate(1.3);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);
   }
   /* Ajusta el rebote del indicador si es necesario */
   .more-text-indicator {
    bottom: 20px;
    animation-duration: 1.5s; /* Un poco más rápido en móviles */
   }
   @keyframes bounce { /* Re-definir keyframes para que no interfiera con el global */
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-8px); }
   }
  }
  
  /* --- Fin de estilos de la Sección Hero 3D --- */

/* === ESTILOS PARA LOS 4 LOGOS PEQUEÑOS EN LA SECCIÓN HERO 3D === */
 .hero-logos-container {
    display: flex; /* Alinea los logos en fila */
    justify-content: center; /* Centra los logos horizontalmente */
    align-items: center; /* Centra los logos verticalmente */
    gap: 20px; /* Espacio entre los logos */
    margin-top: 20px; /* Espacio entre el logo principal y los logos pequeños */
    opacity: 0.8; /* Opacidad general para que no roben protagonismo al logo principal */
    transition: opacity 0.3s ease; /* Transición suave para el hover */
    
    /* IMPORTANTE: Ahora los posicionamos correctamente */
    position: absolute; /* Posición absoluta para sacarlos del flujo normal */
    bottom: 150px; /* Aproximadamente a 150px del final de la pantalla */
    left: 0; /* Empieza desde la izquierda */
    width: 100%; /* Ocupa todo el ancho para centrar el contenido */
    z-index: 3; /* Asegura que estén encima del canvas pero debajo del texto 'HAY MÁS' */
 }

 /* Efecto de hover sobre el contenedor de logos */
 .hero-logos-container:hover {
    opacity: 1; /* Aumenta la opacidad al pasar el mouse por el contenedor */
 }

 .hero-logo-item {
    cursor: pointer; /* Indica que es interactivo */
    transition: transform 0.3s ease; /* Transición suave al hacer hover */
 }

 .hero-logo-item:hover {
    transform: translateY(-5px); /* Pequeño efecto de elevación al hacer hover */
 }

 .hero-small-logo {
    width: 70px; /* Tamaño de los logos pequeños */
    height: 70px; /* Manteniendo proporción */
    object-fit: contain; /* Asegura que la imagen se ajuste sin distorsionarse */
    filter: grayscale(100%) brightness(1.5); /* Filtro inicial: gris y un poco brillante */
    transition: filter 0.3s ease; /* Transición suave para el cambio de filtro */
 }

 /* Efecto al hacer hover sobre un logo individual */
 .hero-logo-item:hover .hero-small-logo,
 .hero-logo-item:focus .hero-small-logo { /* También para foco (navegación por teclado) */
    filter: grayscale(0%) brightness(1.2); /* Quita el filtro gris y ajusta brillo */
 }

 /* Ajustes para el contenedor de logos en pantallas pequeñas */
 @media (max-width: 768px) {
    .hero-logos-container {
        gap: 15px; /* Reduce el espacio entre logos en móvil */
        margin-top: 15px; /* Reduce el margen superior */
        flex-wrap: wrap; /* Permite que los logos se envuelvan si no caben en una línea */
        justify-content: center; /* Asegura centrado en móvil */
        
        /* Redefinimos la posición para que sea relativa al contenedor de la sección */
        /*position: absolute; */
        bottom: 100px; /* Ajustamos la distancia del borde inferior */
        /*left: 0; */
        width: 100%;
        padding: 0 20px; /* Padding para evitar que se peguen a los bordes */
        box-sizing: border-box; /* Incluye padding en el ancho */
        max-width: 300px; /* Limita el ancho del grupo de logos en móvil */
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: auto; /* Asegura el centrado */
        margin-right: auto; /* Asegura el centrado */
        
        /* Si quieres que el tamaño de los logos pequeños sea más pequeño en móvil */
        /* .hero-logo-item { width: 30px; height: 30px; } */
        /* .hero-small-logo { width: 30px; height: 30px; } */
     }

    /* Si necesitas ajustar el tamaño de los logos pequeños en móvil */
    @media (max-width: 768px) {
        .hero-small-logo {
            width: 60px;
            height: 60px;
        }
        .hero-logos-container {
            max-width: 400px; /* Ajusta el ancho máximo para que los logos se centren mejor */
        }
    }
    /* agrtegadas nuievas */
    .section-stem-education .container {
    padding-left: 80px;
    padding-right: 80px;
}

.section-stem-education {
    background-color: transparent; /* Fondo transparente */
    padding: 80px 0;
}

.section-stem-education .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 80px; /* Alineación con la siguiente sección */
    flex-wrap: wrap;
}

/* Columna de títulos */
.stem-title-area {
    flex: 1;
    max-width: 45%;
    text-align: left;
}

.stem-title-area .secondary-title {
    font-size: 0.9rem;
    color: var(--dendro-primary);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.stem-title-area h2 {
    font-size: 3.2rem;
    color: var(--dendro-neutral-light);
    margin-bottom: 15px;
    line-height: 1.1;
}

/* Columna de texto */
.stem-text-content {
    flex: 1;
    max-width: 50%;
    text-align: left;
}

.stem-text-content p {
    color: var(--dendro-neutral-light);
    font-size: 1.1rem;
    line-height: 1.6;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .section-stem-education .container {
        padding: 0 40px;
    }
}

@media (max-width: 768px) {
    .section-stem-education .container {
        flex-direction: column;
        padding: 0 20px;
        text-align: center;
    }

    .stem-title-area,
    .stem-text-content {
        max-width: 100%;
        text-align: center;
        margin-bottom: 30px;
    }

    .stem-title-area h2 {
        font-size: 2.2rem;
    }
}
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.newsletter-status{
  margin-top: 10px;
  font-size: 0.95rem;
  opacity: .9;
}

.newsletter-status.is-ok{
  color: rgba(255,133,0,.95);
}

.newsletter-status.is-err{
  color: rgba(255,120,120,.95);
}

/* =================== Newsletter input estilo "Registro" =================== */
.newsletter-input{
  display: flex;
  gap: 12px;
  align-items: center;
}

.newsletter-input input#newsletterEmail{
  width: 240px;              /* ajusta si quieres más ancho */
  max-width: 100%;
  height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.28);
  color: #fff;
  outline: none;
  box-sizing: border-box;
}

.newsletter-input input#newsletterEmail::placeholder{
  color: rgba(255,255,255,.55);
}

/* Focus DENDRO */
.newsletter-input input#newsletterEmail:focus{
  border-color: rgba(255,133,0,.55);
  box-shadow: 0 0 0 4px rgba(255,133,0,.12);
}

/* Evita que Chrome pinte fondos raros en autofill */
.newsletter-input input#newsletterEmail:-webkit-autofill{
  -webkit-text-fill-color: #fff;
  box-shadow: 0 0 0px 1000px rgba(0,0,0,.28) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* ===== Newsletter input (igual feeling que Registro) ===== */
footer .newsletter-input input[type="email"],
#newsletterEmail{
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 12px !important;
  background: rgba(0,0,0,.22) !important;
  color: rgba(255,255,255,.92) !important;
  height: 44px;
  padding: 0 14px;
  outline: none !important;
}

footer .newsletter-input input[type="email"]::placeholder,
#newsletterEmail::placeholder{
  color: rgba(255,255,255,.55) !important;
}

footer .newsletter-input input[type="email"]:focus,
#newsletterEmail:focus{
  border-color: rgba(255,133,0,.75) !important;
  box-shadow: 0 0 0 4px rgba(255,133,0,.16) !important;
}

/* Opcional: error (solo cuando está mal) */
footer .newsletter-input input[type="email"]:invalid:not(:placeholder-shown),
#newsletterEmail:invalid:not(:placeholder-shown){
  border-color: rgba(255,80,80,.85) !important;
  box-shadow: 0 0 0 4px rgba(255,80,80,.14) !important;
}


}
/* =========================================================
   HOTFIX INDEX — restaurar estructura original
   Sección: Tecnologías aplicadas + Equipo
   ========================================================= */

/* ===== Tecnologías aplicadas (desktop) ===== */
.section-stem-education {
  background: inherit;
  padding: 96px 0 128px !important;
  min-height: 520px;
  display: flex;
  align-items: flex-start;
}

.section-stem-education > .container,
.section-stem-education .container {
  display: grid !important;
  grid-template-columns: minmax(320px, 430px) minmax(420px, 560px) !important;
  justify-content: space-between !important;
  align-items: start !important;
  gap: 72px !important;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 54px !important;
  box-sizing: border-box;
}

.section-stem-education .stem-title-area {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.section-stem-education .stem-title-area .secondary-title {
  margin-bottom: 18px;
}

.section-stem-education .stem-title-area h2 {
  margin: 0;
  font-size: 4rem !important;
  line-height: 1.05 !important;
  text-align: left !important;
}

.section-stem-education .stem-text-content {
  max-width: none !important;
  padding: 18px 0 0 !important;
  margin: 0 !important;
  text-align: left !important;
  align-self: start !important;
}

.section-stem-education .stem-text-content p {
  margin: 0;
  max-width: 34ch;
  font-size: 1.15rem;
  line-height: 1.55;
}

/* ===== Equipo (desktop) ===== */
.team-display-section {
  padding: 84px 0 110px !important;
  margin-top: 0 !important;
}

.team-content-wrapper {
  display: grid !important;
  grid-template-columns: minmax(390px, 480px) minmax(560px, 660px) !important;
  align-items: start !important;
  justify-content: space-between !important;
  gap: 72px !important;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 54px !important;
  box-sizing: border-box;
}

.team-text-content {
  padding-left: 0 !important;
  margin: 0 !important;
  max-width: 480px;
}

.team-text-content h1.logo,
.team-text-content h1.team-section-title {
  margin: 0 0 18px 0 !important;
  font-size: 4rem !important;
  line-height: 1.05 !important;
  text-align: left !important;
}

.team-image-area {
  align-items: flex-start !important;
  width: 100%;
}

.image-gallery {
  display: flex !important;
  gap: 18px !important;
  width: 100%;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
}

.image-column {
  flex: 0 0 calc(50% - 9px) !important;
  min-width: calc(50% - 9px) !important;
  max-width: calc(50% - 9px) !important;
}

.image-item {
  aspect-ratio: 3 / 4;
}

.image-wrapper {
  min-height: 0 !important;
  height: 100%;
}

.image-caption-area {
  margin-top: 14px !important;
  align-items: flex-start !important;
}

.image-caption-title {
  margin-bottom: 6px !important;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .section-stem-education {
    min-height: 0;
    padding: 72px 0 88px !important;
  }

  .section-stem-education > .container,
  .section-stem-education .container {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    padding: 0 28px !important;
  }

  .section-stem-education .stem-title-area h2 {
    font-size: 3.2rem !important;
  }

  .team-content-wrapper {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    padding: 0 28px !important;
  }

  .team-text-content h1.logo,
  .team-text-content h1.team-section-title {
    font-size: 3.2rem !important;
  }
}

@media (max-width: 768px) {
  .section-stem-education {
    padding: 44px 0 56px !important;
    min-height: 0;
  }

  .section-stem-education > .container,
  .section-stem-education .container {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    padding: 0 20px !important;
  }

  .section-stem-education .stem-title-area,
  .section-stem-education .stem-text-content {
    max-width: 100% !important;
    width: 100%;
    padding: 0 !important;
  }

  .section-stem-education .stem-title-area h2 {
    font-size: 2.2rem !important;
    line-height: 1.08 !important;
  }

  .section-stem-education .stem-text-content p {
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.6;
  }

  .team-display-section {
    padding: 48px 0 56px !important;
  }

  .team-content-wrapper {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    padding: 0 20px !important;
  }

  .team-text-content h1.logo,
  .team-text-content h1.team-section-title {
    font-size: 2.35rem !important;
    line-height: 1.1 !important;
  }

  .team-image-area {
    width: 100%;
  }

  .image-gallery {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }

  .image-column {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
}


/* =====================================================================
   INDEX HOTFIX FINAL
   - Evita conflicto con home.css removido del index
   - Mantiene ajuste de logos pequeños del hero
   - Mantiene overlays de la sección equipo sin cortar textos
   - Restaura layout de Tecnologías aplicadas
   ===================================================================== */

/* Hero logos debajo del logo principal */
.hero-logos-container{
  position:absolute;
  left:50%;
  bottom:56px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  width:min(520px, calc(100% - 48px));
  z-index:3;
}
.hero-logo-item{display:flex;align-items:center;justify-content:center;}
.hero-small-logo{
  width:84px;
  height:auto;
  max-width:100%;
  object-fit:contain;
}
@media (max-width:768px){
  .hero-logos-container{
    width:min(92vw, 420px);
    gap:12px;
    bottom:34px;
  }
  .hero-small-logo{
    width:clamp(54px, 14vw, 74px);
  }
}

/* Tecnologías aplicadas: estructura original */
.section-stem-education{
  padding:72px 0 96px;
  margin-top:0 !important;
  min-height:auto !important;
}
.section-stem-education .container{
  width:min(1240px, calc(100% - 72px));
  max-width:none;
  margin:0 auto;
  padding:0;
  display:grid !important;
  grid-template-columns:minmax(320px, 430px) minmax(520px, 1fr);
  column-gap:120px;
  align-items:start;
}
.section-stem-education .stem-title-area,
.section-stem-education .stem-text-content{
  max-width:none !important;
  padding:0 !important;
  margin:0 !important;
  height:auto !important;
}
.section-stem-education .stem-title-area{
  align-items:flex-start !important;
  text-align:left !important;
}
.section-stem-education .stem-title-area h2{
  margin:8px 0 0;
  font-size:4.35rem;
  line-height:1.02;
  text-align:left !important;
}
.section-stem-education .stem-text-content{
  padding-top:12px !important;
  text-align:left !important;
}
.section-stem-education .stem-text-content p{
  margin:0;
  max-width:760px;
  font-size:1.08rem;
  line-height:1.62;
}
@media (max-width:980px){
  .section-stem-education .container{
    width:min(100% - 40px, 100%);
    grid-template-columns:1fr;
    row-gap:28px;
  }
  .section-stem-education .stem-title-area,
  .section-stem-education .stem-text-content{
    text-align:left !important;
    align-items:flex-start !important;
  }
  .section-stem-education .stem-title-area h2{
    font-size:clamp(2.7rem, 8vw, 3.9rem);
  }
}

/* Sección equipo: overlays sin cortar texto */
.team-display-section .blur-overlay.overlay-top-left{
  min-width:86px;
  min-height:92px;
  padding:12px 10px;
}
.team-display-section .blur-overlay.overlay-bottom-right{
  min-width:110px;
  min-height:92px;
  padding:14px 16px;
}
.team-display-section .text-content-in-orange-overlay,
.team-display-section .overlay-label-bottom{
  line-height:1.22;
  overflow-wrap:anywhere;
}
.team-display-section .text-outside-orange-overlay{
  font-size:0.88rem;
}
.team-display-section .overlay-label-bottom{
  font-size:0.84rem;
}

/* ===== HOTFIX FINAL: alinear 'Tecnologías aplicadas' con sección Equipo ===== */
.section-stem-education {
  padding: 80px 0 !important;
  margin-top: 0 !important;
}

.section-stem-education .container {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: start !important;
  gap: 40px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.section-stem-education .stem-title-area {
  max-width: none !important;
  width: 100% !important;
  padding-left: 80px !important;
  padding-right: 0 !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.section-stem-education .stem-title-area .secondary-title,
.section-stem-education .stem-title-area h2 {
  text-align: left !important;
}

.section-stem-education .stem-text-content {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 80px !important;
  text-align: left !important;
}

.section-stem-education .stem-text-content p {
  max-width: 620px !important;
  margin: 0 !important;
  text-align: left !important;
}

@media (max-width: 1024px) {
  .section-stem-education .stem-title-area {
    padding-left: 100px !important;
  }

  .section-stem-education .stem-text-content {
    padding-right: 40px !important;
  }
}

@media (max-width: 768px) {
  .section-stem-education {
    padding: 40px 0 !important;
  }

  .section-stem-education .container {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 20px !important;
  }

  .section-stem-education .stem-title-area,
  .section-stem-education .stem-text-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
  }

  .section-stem-education .stem-title-area h2,
  .section-stem-education .stem-text-content p,
  .section-stem-education .stem-title-area .secondary-title {
    text-align: left !important;
  }
}


/* ===== HOTFIX: overlays de texto completos en sección equipo ===== */
.team-display-section .blur-overlay.overlay-top-left{
  width: 132px !important;
  min-width: 132px !important;
  height: 96px !important;
  min-height: 96px !important;
  padding: 12px 12px 10px !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
}
.team-display-section .blur-overlay.overlay-bottom-right{
  width: 142px !important;
  min-width: 142px !important;
  min-height: 100px !important;
  height: auto !important;
  padding: 12px 14px !important;
  align-items: flex-start !important;
  justify-content: center !important;
}
.team-display-section .text-content-in-orange-overlay{
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 0 !important;
}
.team-display-section .text-outside-orange-overlay,
.team-display-section .overlay-label-bottom{
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  white-space: normal !important;
}
.team-display-section .text-outside-orange-overlay{
  font-size: 0.92rem !important;
  line-height: 1.02 !important;
  margin: 0 !important;
}
.team-display-section .overlay-label-bottom{
  font-size: 0.88rem !important;
  line-height: 1.32 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  margin: 0 !important;
}

/* ================== INDEX FOOTER HOTFIX (scoped) ================== */
.site-footer,
.site-footer * {
  box-sizing: border-box;
}

.site-footer {
  background-color: var(--dendro-base-dark);
  color: var(--dendro-neutral-light);
  padding-top: 80px;
  border-top: 1px solid var(--dendro-neutral-dark);
}

.site-footer .container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

.site-footer .footer-content {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  padding-bottom: 50px;
}

.site-footer .footer-section {
  flex-grow: 1;
  min-width: 180px;
  flex-shrink: 1;
}

.site-footer .footer-section.footer-newsletter {
  flex-basis: 300px;
  flex-grow: 0;
  flex-shrink: 0;
}

.site-footer .footer-section.footer-links {
  flex-basis: 200px;
  flex-grow: 1;
}

.site-footer .footer-section h4 {
  color: var(--dendro-primary);
  font-size: 1.2rem;
  margin-bottom: 20px;
  font-family: var(--font-heading);
}

.site-footer .footer-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer .footer-section ul li {
  margin-bottom: 10px;
}

.site-footer .footer-section ul li a {
  color: var(--dendro-neutral-light);
  font-size: 0.9rem;
  transition: color 0.3s ease, transform 0.3s ease;
  display: inline-block;
  position: relative;
  text-decoration: none;
}

.site-footer .footer-section ul li a:hover {
  color: var(--dendro-primary);
  transform: translateX(8px);
}

.site-footer .footer-newsletter p {
  margin-bottom: 5px;
}

.site-footer .footer-newsletter span {
  font-size: 0.85rem;
  color: #aaa;
  display: block;
  margin-bottom: 30px;
}

.site-footer .newsletter-input {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.site-footer .newsletter-input input[type="email"] {
  flex-grow: 1;
  padding: 12px;
  border-radius: 5px;
  border: 1px solid var(--dendro-neutral-dark);
  background-color: var(--dendro-neutral-dark);
  color: var(--dendro-neutral-light);
  font-size: 0.9rem;
  height: auto;
}

.site-footer .cta-button-newsletter {
  padding: 12px 20px;
  background-color: var(--dendro-primary);
  color: var(--dendro-base-dark);
  font-weight: 700;
  border-radius: 5px;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: auto;
}

.site-footer .cta-button-newsletter:hover {
  background-color: #cc6a00;
}

.site-footer .footer-logo-small {
  max-width: 100px;
  margin-bottom: 15px;
}

.site-footer .footer-bottom {
  background-color: var(--dendro-base-dark) !important;
  padding: 20px 0;
  margin-top: 50px;
}

.site-footer .footer-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.site-footer .legal-info {
  font-size: 0.85rem;
  color: #aaa;
}

.site-footer .social-icons {
  display: flex;
  gap: 15px;
}

.site-footer .social-icons a {
  color: #aaa;
  font-size: 1.3rem;
  transition: color 0.3s ease;
}

.site-footer .social-icons a:hover {
  color: var(--dendro-primary);
}

.site-footer .language-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #aaa;
  font-size: 0.9rem;
  cursor: pointer;
}

.site-footer .language-selector i {
  font-size: 1rem;
}

@media (max-width: 992px) {
  .site-footer .footer-content {
    flex-wrap: nowrap;
    gap: 20px;
  }

  .site-footer .footer-section {
    flex-basis: 150px;
  }

  .site-footer .footer-section.footer-newsletter {
    flex-basis: 250px;
  }
}

@media (max-width: 768px) {
  .site-footer .footer-section.footer-links {
    display: none !important;
  }

  .site-footer .footer-section.footer-newsletter {
    width: 100%;
    text-align: center;
    margin: 0 auto 20px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .site-footer .footer-section.footer-newsletter p,
  .site-footer .footer-section.footer-newsletter span {
    max-width: 80%;
    margin: 0 auto 8px auto;
  }

  .site-footer .footer-section.footer-newsletter .newsletter-input {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  .site-footer .footer-section.footer-newsletter input[type="email"],
  .site-footer .footer-section.footer-newsletter button.cta-button-newsletter {
    width: 80%;
    max-width: 300px;
  }

  .site-footer .footer-bottom .footer-bottom-content {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    text-align: center;
  }

  .site-footer .footer-bottom .social-icons {
    justify-content: center;
  }

  .site-footer .footer-bottom .language-selector {
    justify-content: center;
  }
}


/* ================== INDEX FOOTER FIX v2 ================== */
.site-footer .footer-section.footer-newsletter{
  flex-basis: 360px !important;
  max-width: 360px;
}

.site-footer .footer-section.footer-newsletter .hp-field{
  display:none !important;
}

.site-footer .footer-section.footer-newsletter .newsletter-input{
  display:flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}

.site-footer .footer-section.footer-newsletter .newsletter-input input[type="email"],
.site-footer .footer-section.footer-newsletter #newsletterEmail{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto;
  display:block;
  margin: 0;
}

.site-footer .footer-section.footer-newsletter .cta-button-newsletter{
  width: 100% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  margin: 0;
}

.site-footer .footer-content{
  align-items: flex-start;
}

/* ================== INDEX FOOTER MATCH OTHER PAGES ================== */
.site-footer,
.site-footer * {
  box-sizing: border-box;
}

.site-footer {
  background-color: var(--dendro-base-dark) !important;
  color: var(--dendro-neutral-light) !important;
  padding-top: 80px !important;
  border-top: none !important;
}

.site-footer .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  width: auto !important;
}

.site-footer ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.site-footer a {
  text-decoration: none !important;
}

.site-footer .footer-content {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 50px !important;
  padding-bottom: 50px !important;
}

.site-footer .footer-section {
  flex-grow: 1 !important;
  min-width: 180px !important;
  flex-shrink: 1 !important;
}

.site-footer .footer-section.footer-newsletter {
  flex-basis: 300px !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  max-width: 300px !important;
}

.site-footer .footer-section.footer-links {
  flex-basis: 200px !important;
  flex-grow: 1 !important;
}

.site-footer .footer-section h4 {
  color: var(--dendro-primary) !important;
  font-size: 1.2rem !important;
  margin-bottom: 20px !important;
  font-family: var(--font-heading) !important;
}

.site-footer .footer-section ul li {
  margin-bottom: 10px !important;
}

.site-footer .footer-section ul li a {
  color: var(--dendro-neutral-light) !important;
  font-size: 0.9rem !important;
  transition: color .3s ease, transform .3s ease !important;
  display: inline-block !important;
  position: relative !important;
}

.site-footer .footer-section ul li a:hover {
  color: var(--dendro-primary) !important;
  transform: translateX(8px) !important;
}

.site-footer .footer-newsletter p {
  margin-bottom: 5px !important;
}

.site-footer .footer-newsletter span {
  font-size: 0.85rem !important;
  color: #aaa !important;
  display: block !important;
  margin-bottom: 30px !important;
}

.site-footer .hp-field {
  display: none !important;
}

.site-footer .newsletter-input {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  align-items: stretch !important;
  width: 100% !important;
}

.site-footer .newsletter-input input[type="email"],
.site-footer .newsletter-input input#newsletterEmail {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 44px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(0,0,0,.22) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: none !important;
}

.site-footer .newsletter-input input[type="email"]::placeholder,
.site-footer .newsletter-input input#newsletterEmail::placeholder {
  color: rgba(255,255,255,.55) !important;
}

.site-footer .newsletter-input input[type="email"]:focus,
.site-footer .newsletter-input input#newsletterEmail:focus {
  border-color: rgba(255,133,0,.75) !important;
  box-shadow: 0 0 0 4px rgba(255,133,0,.16) !important;
}

.site-footer .cta-button-newsletter,
.site-footer .newsletter-input #newsletterBtn {
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 12px 20px !important;
  border-radius: 5px !important;
  border: none !important;
  background-color: var(--dendro-primary) !important;
  color: var(--dendro-base-dark) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  transition: background-color .3s ease !important;
}

.site-footer .cta-button-newsletter:hover,
.site-footer .newsletter-input #newsletterBtn:hover {
  background-color: #cc6a00 !important;
}

.site-footer .footer-logo-small {
  max-width: 100px !important;
  margin-bottom: 15px !important;
}

.site-footer .footer-bottom {
  background-color: var(--dendro-base-dark) !important;
  padding: 20px 0 !important;
  margin-top: 50px !important;
}

.site-footer .footer-bottom-content {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 15px !important;
}

.site-footer .legal-info {
  font-size: .75rem !important;
  color: #aaa !important;
}

.site-footer .social-icons {
  display: flex !important;
  gap: 15px !important;
}

.site-footer .social-icons a {
  color: #aaa !important;
  font-size: 1.3rem !important;
  transition: color .3s ease !important;
}

.site-footer .social-icons a:hover {
  color: var(--dendro-primary) !important;
}

.site-footer .language-selector {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #aaa !important;
  font-size: .9rem !important;
  cursor: pointer !important;
}

.site-footer .language-selector i {
  font-size: 1rem !important;
}

@media (max-width: 992px) {
  .site-footer .footer-content {
    flex-wrap: nowrap !important;
    gap: 20px !important;
  }

  .site-footer .footer-section {
    flex-basis: 150px !important;
  }

  .site-footer .footer-section.footer-newsletter {
    flex-basis: 250px !important;
    max-width: 250px !important;
  }
}

@media (max-width: 768px) {
  .site-footer .footer-section.footer-links {
    display: none !important;
  }

  .site-footer .footer-section.footer-newsletter {
    width: 100% !important;
    max-width: none !important;
    text-align: center !important;
    margin: 0 auto 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .site-footer .footer-section.footer-newsletter p,
  .site-footer .footer-section.footer-newsletter span {
    max-width: 80% !important;
    margin: 0 auto 8px !important;
  }

  .site-footer .footer-section.footer-newsletter .newsletter-input {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .site-footer .footer-section.footer-newsletter input[type="email"],
  .site-footer .footer-section.footer-newsletter input#newsletterEmail {
    width: 100% !important;
    max-width: 360px !important;
    text-align: center !important;
  }

  .site-footer .footer-section.footer-newsletter button.cta-button-newsletter,
  .site-footer .footer-section.footer-newsletter #newsletterBtn {
    width: 80% !important;
    max-width: 360px !important;
  }

  .site-footer .footer-bottom .footer-bottom-content {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 30px !important;
    text-align: center !important;
  }

  .site-footer .footer-bottom .social-icons {
    justify-content: center !important;
    gap: 16px !important;
    margin-top: 5px !important;
  }

  .site-footer .footer-bottom .language-selector {
    justify-content: center !important;
    gap: 5px !important;
  }
}



/* =========================================================
   HOTFIX AUTORITATIVO — HERO RESPONSIVE INDEX
   - Polígono naranja detrás del logo blanco
   - Logo blanco centrado como una sola composición
   - Logos inferiores alineados abajo
   - "HAY MÁS" solo en móvil con movimiento
   ========================================================= */
@media (min-width: 769px) {
  .more-text-indicator {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 768px) {
  .hero-section-3d-container {
    height: 100svh !important;
    min-height: 100svh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  #hero-bg-3d {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
  }

  .hero-content-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 3 !important;
    text-align: center !important;
  }

  .hero-logo-img {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: clamp(110px, 28vw, 145px) !important;
    height: auto !important;
    margin: 0 !important;
    z-index: 4 !important;
  }

  .hero-logos-container {
    position: absolute !important;
    left: 50% !important;
    bottom: 58px !important;
    transform: translateX(-50%) !important;
    width: min(90vw, 360px) !important;
    max-width: 360px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 4 !important;
  }

  .hero-small-logo {
    width: clamp(58px, 15vw, 78px) !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .more-text-indicator {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 22px !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 5 !important;
    animation: bounceHeroMore 1.6s infinite ease-in-out !important;
  }

  @keyframes bounceHeroMore {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-8px); }
  }


  
}


/* =========================================================
   TEAM ALIGNMENT FIX FINAL
   - Alinea el bloque "Un equipo..." con "Tecnologías aplicadas"
   - Corrige la vista móvil para mantener el mismo eje izquierdo
   ========================================================= */
.team-display-section .container {
  width: min(1200px, calc(100% - 108px));
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 !important;
  box-sizing: border-box;
}

.team-display-section .team-content-wrapper {
  display: grid !important;
  grid-template-columns: minmax(320px, 430px) minmax(520px, 1fr) !important;
  align-items: start !important;
  justify-content: space-between !important;
  gap: 72px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.team-display-section .team-text-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 80px !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

.team-display-section .stem-title-area2 {
  width: 100%;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 0 18px 0 !important;
  text-align: left !important;
}

.team-display-section .stem-title-area2 .team-section-title,
.team-display-section .stem-title-area2 h2 {
  margin: 0 !important;
  font-size: 4rem !important;
  line-height: 1.05 !important;
  text-align: left !important;
  color: var(--dendro-neutral-light) !important;
}

.team-display-section .status-indicator,
.team-display-section .description,
.team-display-section .btn-right {
  align-self: flex-start !important;
  text-align: left !important;
  margin-left: 0 !important;
}

.team-display-section .description {
  max-width: 480px;
}

.team-display-section .team-image-area {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100%;
  padding: 0 !important;
}

@media (max-width: 1024px) {
  .team-display-section .container {
    width: min(1200px, calc(100% - 56px));
  }

  .team-display-section .team-content-wrapper {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }

  .team-display-section .team-text-content {
    padding-left: 100px !important;
  }

  .team-display-section .stem-title-area2 .team-section-title,
  .team-display-section .stem-title-area2 h2 {
    font-size: 3.2rem !important;
  }
}

@media (max-width: 768px) {
  .team-display-section {
    padding: 48px 0 56px !important;
    margin-top: 0 !important;
  }

  .team-display-section .container {
    width: calc(100% - 40px);
    max-width: none;
  }

  .team-display-section .team-content-wrapper {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .team-display-section .team-text-content {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .team-display-section .stem-title-area2 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 0 16px 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .team-display-section .stem-title-area2 .team-section-title,
  .team-display-section .stem-title-area2 h2 {
    width: 100% !important;
    font-size: 2.35rem !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .team-display-section .status-indicator,
  .team-display-section .description,
  .team-display-section .btn-right {
    width: 100% !important;
    align-self: flex-start !important;
    text-align: left !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .team-display-section .description {
    max-width: 100% !important;
  }

  .team-display-section .team-image-area {
    width: 100% !important;
    align-items: flex-start !important;
  }

  /* =========================================================
   SECCIÓN SOFTWARES DENDRO
   ========================================================= */
.dendro-softwares-section {
  background: #2f394d;
  padding: 90px 0 100px;
}

.dendro-softwares-section .container {
  width: min(1320px, calc(100% - 72px));
  max-width: none;
  margin: 0 auto;
}

.dendro-softwares-header {
  margin-bottom: 42px;
}

.dendro-softwares-header .section-kicker {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--dendro-primary);
  margin-bottom: 14px;
}

.dendro-softwares-header h2 {
  margin: 0 0 14px 0;
  font-size: 3.1rem;
  line-height: 1.08;
  text-align: left;
  color: #f2f2f2;
}

.dendro-softwares-header p {
  max-width: 780px;
  margin: 0;
  color: rgba(255,255,255,0.82);
  font-size: 1.05rem;
  line-height: 1.65;
}

.dendro-softwares-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 22px;
}

.software-card {
  position: relative;
  min-height: 280px;
  border: 1px solid rgba(255,255,255,0.45);
  background: transparent;
  color: #f3f3f3;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.28s ease, background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
  outline: none;
}

.software-card.active,
.software-card:hover,
.software-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.75);
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.software-card.active {
  background: #b8c3d2;
  color: #16202d;
  border-color: transparent;
  clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 38px);
}

.software-card-inner {
  padding: 34px 24px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.software-card h3 {
  margin: 0 0 14px 0;
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 700;
}

.software-short {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: inherit;
  opacity: 0.95;
}

.software-hover-content {
  margin-top: auto;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
  padding-top: 22px;
}

.software-card.active .software-hover-content,
.software-card:hover .software-hover-content,
.software-card:focus-visible .software-hover-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.software-hover-content p {
  margin: 0 0 16px 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: inherit;
}

.software-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.software-link:hover {
  color: inherit;
  opacity: 0.8;
}

@media (max-width: 1100px) {
  .dendro-softwares-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

@media (max-width: 768px) {
  .dendro-softwares-section {
    padding: 54px 0 64px;
  }

  .dendro-softwares-section .container {
    width: calc(100% - 40px);
  }

  .dendro-softwares-header h2 {
    font-size: 2.2rem;
    line-height: 1.1;
  }

  .dendro-softwares-header p {
    font-size: 1rem;
  }

  .dendro-softwares-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .software-card {
    min-height: 220px;
  }

  .software-card-inner {
    padding: 24px 18px 20px;
  }

  .software-card.active {
    clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 28px);
  }

  .software-hover-content {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    padding-top: 16px;
  }
}
}

/* =========================================================
   SOFTWARES DENDRO — FIX AUTORITATIVO
   ========================================================= */
.dendro-softwares-section {
  background: #2f394d;
  padding: 90px 0 100px;
}

.dendro-softwares-section .container {
  width: min(1320px, calc(100% - 72px));
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

.dendro-softwares-header {
  margin-bottom: 42px;
}

.dendro-softwares-header .section-kicker {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--dendro-primary);
  margin-bottom: 14px;
}

.dendro-softwares-header h2 {
  margin: 0 0 14px 0;
  font-size: 3.1rem;
  line-height: 1.08;
  text-align: left;
  color: #f2f2f2;
}

.dendro-softwares-header p {
  max-width: 780px;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  line-height: 1.65;
}

.dendro-softwares-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 22px;
}

.software-card {
  position: relative;
  min-height: 280px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  color: #f3f3f3;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  transition: transform 0.28s ease, background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.software-card.active,
.software-card:hover,
.software-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.software-card.active {
  background: #b8c3d2;
  color: #16202d;
  border-color: transparent;
  clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 38px);
}

.software-card-inner {
  padding: 34px 24px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.software-card h3 {
  margin: 0 0 14px 0;
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 700;
  color: inherit;
}

.software-short {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: inherit;
  opacity: 0.95;
}

.software-hover-content {
  margin-top: auto;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
  padding-top: 22px;
}

.software-card.active .software-hover-content,
.software-card:hover .software-hover-content,
.software-card:focus-visible .software-hover-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.software-hover-content p {
  margin: 0 0 16px 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: inherit;
}

.software-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.software-link:hover,
.software-link:focus {
  color: inherit;
  opacity: 0.8;
}

@media (max-width: 1100px) {
  .dendro-softwares-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

@media (max-width: 768px) {
  .dendro-softwares-section {
    padding: 54px 0 64px;
  }

  .dendro-softwares-section .container {
    width: calc(100% - 40px);
  }

  .dendro-softwares-header h2 {
    font-size: 2.2rem;
    line-height: 1.1;
  }

  .dendro-softwares-header p {
    font-size: 1rem;
  }

  .dendro-softwares-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .software-card {
    min-height: 220px;
  }

  .software-card-inner {
    padding: 24px 18px 20px;
  }

  .software-card.active {
    clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 28px);
  }

  .software-hover-content {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    padding-top: 16px;
  }
}


/* =========================================================
   DENDRO SOFTWARES — AJUSTE FINAL
   - Mantiene el fondo general de la página
   - Conserva líneas blancas de las cajas
   - Alinea el bloque al eje de “Tecnologías aplicadas”
   ========================================================= */
.dendro-softwares-section {
  background: var(--dendro-base-dark) !important;
  padding: 84px 0 96px !important;
  margin-top: 0 !important;
}

.dendro-softwares-section .container {
  width: min(1200px, calc(100% - 108px)) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.dendro-softwares-header {
  width: calc(100% - 80px) !important;
  margin: 0 0 42px 80px !important;
  text-align: left !important;
}

.dendro-softwares-header .section-kicker,
.dendro-softwares-header h2,
.dendro-softwares-header p {
  text-align: left !important;
}

.dendro-softwares-header h2 {
  margin: 0 0 14px 0 !important;
  font-size: 3.1rem !important;
  line-height: 1.08 !important;
  color: var(--dendro-neutral-light) !important;
}

.dendro-softwares-header p {
  max-width: 780px !important;
  margin: 0 !important;
  color: rgba(255,255,255,0.82) !important;
}

.dendro-softwares-grid {
  width: calc(100% - 80px) !important;
  margin-left: 80px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

.software-card {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
}

.software-card.active,
.software-card:hover,
.software-card:focus-visible {
  border-color: rgba(255,255,255,0.78) !important;
}

.software-card.active {
  background: #b8c3d2 !important;
}

@media (max-width: 1100px) {
  .dendro-softwares-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .dendro-softwares-section {
    padding: 54px 0 64px !important;
  }

  .dendro-softwares-section .container {
    width: calc(100% - 40px) !important;
    max-width: none !important;
  }

  .dendro-softwares-header,
  .dendro-softwares-grid {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .dendro-softwares-header {
    margin: 0 0 26px 0 !important;
  }

  .dendro-softwares-header h2 {
    font-size: 2.2rem !important;
    line-height: 1.1 !important;
  }

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


/* =========================================================
   SOFTWARE CARD ACTIVE COLOR FIX
   - Tarjeta seleccionada en gris neutro, alineada a la paleta DENDRO
   ========================================================= */
.software-card.active {
  background: #fafcff !important;
  color: #1a1a1a !important;
  border-color: #fafcff  !important;
}

.software-card.active .software-short,
.software-card.active .software-hover-content p,
.software-card.active .software-link,
.software-card.active h3 {
  color: #1a1a1a !important;
}

.software-card.active .software-link {
  border-bottom-color: currentColor !important;
}



/* =========================================================
   RECURSOS DENDRO — agregado sin alterar secciones existentes
   ========================================================= */
.dendro-resources-section {
  background-color: var(--dendro-base-dark);
  padding: 84px 0 96px;
}

.dendro-resources-section .container {
  width: min(1200px, calc(100% - 108px));
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.dendro-resources-header {
  width: calc(100% - 80px);
  max-width: none;
  margin: 0 0 34px 80px;
  text-align: left;
}

.dendro-resources-header .section-kicker {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--dendro-primary);
  margin-bottom: 12px;
}

.dendro-resources-header h2 {
  margin: 0 0 14px 0;
  text-align: left;
  font-size: 3rem;
  line-height: 1.08;
  color: var(--dendro-neutral-light);
}

.dendro-resources-header p {
  margin: 0;
  max-width: 760px;
  color: rgba(255,255,255,0.82);
  font-size: 1.05rem;
  line-height: 1.65;
}

.dendro-resources-grid {
  width: calc(100% - 80px);
  margin-left: 80px;
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 22px;
}

.dendro-resource-card {
  min-height: 280px;
  border: 1px solid rgba(255,255,255,0.35);
  background: transparent;
  color: var(--dendro-neutral-light);
  text-decoration: none;
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform 0.28s ease, border-color 0.28s ease, background-color 0.28s ease, box-shadow 0.28s ease;
}

.dendro-resource-card:hover,
.dendro-resource-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.03);
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  color: var(--dendro-neutral-light);
}

.dendro-resource-card .resource-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  color: rgba(255,255,255,0.78);
  font-size: 2rem;
}

.dendro-resource-card h3 {
  margin: 0 0 14px 0;
  font-size: 2rem;
  line-height: 1.15;
  color: var(--dendro-neutral-light);
}

.dendro-resource-card p {
  margin: 0;
  max-width: 32ch;
  font-size: 1.08rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
}

.dendro-resource-card .resource-link {
  margin-top: auto;
  padding-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dendro-primary);
}

.dendro-resource-card .resource-link::after {
  content: "→";
  transition: transform 0.25s ease;
}

.dendro-resource-card:hover .resource-link::after,
.dendro-resource-card:focus-visible .resource-link::after {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .dendro-resources-section {
    padding: 54px 0 64px;
  }

  .dendro-resources-section .container {
    width: calc(100% - 40px);
    max-width: none;
  }

  .dendro-resources-header,
  .dendro-resources-grid {
    width: 100%;
    margin-left: 0;
  }

  .dendro-resources-header {
    margin: 0 0 26px 0;
  }

  .dendro-resources-header h2 {
    font-size: 2.2rem;
    line-height: 1.1;
  }

  .dendro-resources-header p {
    font-size: 1rem;
  }

  .dendro-resources-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dendro-resource-card {
    min-height: 220px;
    padding: 24px 20px;
  }

  .dendro-resource-card h3 {
    font-size: 1.7rem;
  }

  .dendro-resource-card .resource-icon {
    width: 72px;
    height: 72px;
    font-size: 1.7rem;
    margin-bottom: 22px;
  }
}

/* =========================================================
   DENDRO CERTIFICADOS — estilos agregados al formato oficial
   Mantiene header, navegación, variables, tipografías y footer base.
   ========================================================= */
body {
  background-color: var(--dendro-base-dark);
}

.nav-link.active {
  color: var(--dendro-primary) !important;
}

.nav-link.active::after {
  width: 100% !important;
}

.certificate-hero-section {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
    var(--dendro-base-dark);

  min-height: calc(100vh - 78px);
  padding: 92px 0 84px;
  position: relative;
  overflow: hidden;
}

.certificate-hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 76%);
}

.certificate-hero-container {
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100% - 108px));
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 !important;
  display: grid;
  grid-template-columns: minmax(340px, 0.95fr) minmax(390px, 0.72fr);
  align-items: stretch;
  gap: 58px;
}

.certificate-copy-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 540px;
  padding-left: 80px;
  text-align: left;
}

.section-kicker,
.certificate-copy-block .section-kicker,
.certificate-validation-header .section-kicker {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--dendro-primary);
  margin-bottom: 14px;
}

.certificate-copy-block h1 {
  margin: 0 0 24px;
  max-width: 620px;
  font-family: var(--font-heading);
  font-size: clamp(3.1rem, 6vw, 5.35rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--dendro-neutral-light);
}

.certificate-copy-block p {
  margin: 0;
  max-width: 660px;
  color: rgba(255,255,255,0.84);
  font-size: 1.08rem;
  line-height: 1.72;
}

.certificate-status {
  margin-top: 32px;
  color: var(--dendro-neutral-light) !important;
}

.certificate-status .dot {
  background-color: var(--dendro-primary);
  box-shadow: 0 0 8px var(--dendro-primary);
}

.certificate-query-card {
  position: relative;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 0;
  padding: 34px;
  min-height: 540px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.34);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}

.certificate-query-card::before {
  display: none;
}

.certificate-card-topline {
  position: absolute;
  top: 0;
  left: 34px;
  width: 112px;
  height: 4px;
  background-color: var(--dendro-primary);
  box-shadow: 0 0 20px rgba(255, 133, 0, .64);
}

.certificate-form-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 30px;
}

.certificate-form-header h2 {
  margin: 8px 0 0;
  text-align: left;
  font-size: 2rem;
  line-height: 1.1;
}

.module-label {
  color: var(--dendro-primary);
  font-size: 0.78rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 700;
}

.secure-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.72);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.certificate-field-group {
  margin-bottom: 20px;
}

.certificate-field-group label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
  font-weight: 700;
}

.certificate-field-group label em {
  color: rgba(255,255,255,0.48);
  font-style: normal;
  font-weight: 400;
}

.certificate-input-wrap {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  min-height: 54px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,.22);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.certificate-input-wrap:focus-within {
  border-color: rgba(255,133,0,.75);
  box-shadow: 0 0 0 4px rgba(255,133,0,.16);
  background: rgba(0,0,0,.3);
}

.certificate-input-wrap span {
  display: grid;
  place-items: center;
  height: 100%;
  border-right: 1px solid rgba(255,255,255,0.1);
  color: var(--dendro-primary);
  font-family: 'Roboto Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
}

.certificate-input-wrap input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--dendro-neutral-light);
  padding: 0 15px;
  font-size: 1rem;
  font-family: var(--font-body);
}

.certificate-input-wrap input::placeholder {
  color: rgba(255,255,255,0.42);
}

.certificate-field-group small {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,0.55);
  font-size: 0.82rem;
}

.certificate-submit-button {
  width: 100%;
  min-height: 52px;
  border-radius: 5px;
  border: 2px solid var(--dendro-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.certificate-submit-button:disabled {
  opacity: .68;
  cursor: wait;
  transform: none !important;
}

.certificate-result {
  margin-top: 24px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,.18);
  padding: 20px;
  color: var(--dendro-neutral-light);
}

.certificate-result.hidden {
  display: none;
}

.certificate-result h2 {
  margin: 0 0 12px;
  text-align: left;
  font-size: 1.25rem;
}

.certificate-result p {
  margin: 0;
  color: rgba(255,255,255,0.76);
  font-size: 0.95rem;
  line-height: 1.55;
}

.certificate-result.error {
  border-color: rgba(229,57,53,.5);
}

.certificate-result.success {
  border-color: rgba(255,133,0,.46);
}

.certificate-result.loading {
  border-color: rgba(255,255,255,.22);
}

.loading-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.loader {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: var(--dendro-primary);
  animation: certificateSpin .8s linear infinite;
  flex: 0 0 auto;
}

@keyframes certificateSpin {
  to { transform: rotate(360deg); }
}

.certificate-result dl {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
}

.certificate-result dl div {
  display: grid;
  gap: 3px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.certificate-result dt {
  color: rgba(255,255,255,0.52);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.certificate-result dd {
  margin: 0;
  color: var(--dendro-neutral-light);
  font-size: 0.96rem;
  overflow-wrap: anywhere;
}

.certificate-download-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 16px;
  margin-top: 4px;
  background-color: var(--dendro-primary);
  color: var(--dendro-base-dark) !important;
  border-radius: 5px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease, background-color .3s ease;
}

.certificate-download-link:hover,
.certificate-download-link:focus {
  background-color: #cc6a00;
  transform: translateY(-2px);
}

.certificate-expiry-note {
  margin-top: 12px !important;
  font-size: 0.86rem !important;
}

.certificate-validation-section {
  background-color: var(--dendro-base-dark);
  padding: 84px 0 96px;
}

.certificate-validation-section .container {
  width: min(1200px, calc(100% - 108px));
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 !important;
}

.certificate-validation-header {
  width: calc(100% - 80px);
  margin: 0 0 34px 80px;
  text-align: left;
}

.certificate-validation-header h2 {
  margin: 0 0 14px;
  text-align: left;
  font-size: 3rem;
  line-height: 1.08;
}

.certificate-validation-header p {
  margin: 0;
  max-width: 760px;
  color: rgba(255,255,255,0.82);
  font-size: 1.05rem;
  line-height: 1.65;
}

.certificate-validation-grid {
  width: calc(100% - 80px);
  margin-left: 80px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.certificate-validation-card {
  min-height: 250px;
  border: 1px solid rgba(255,255,255,0.35);
  background: transparent;
  color: var(--dendro-neutral-light);
  padding: 30px 24px;
  transition: transform .28s ease, border-color .28s ease, background-color .28s ease;
}

.certificate-validation-card.active,
.certificate-validation-card:hover,
.certificate-validation-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.03);
}

.certificate-card-number {
  color: var(--dendro-primary);
  font-weight: 700;
  font-family: 'Roboto Mono', monospace;
  margin-bottom: 28px;
}

.certificate-validation-card h3 {
  margin: 0 0 14px;
  color: var(--dendro-neutral-light);
  font-size: 1.2rem;
}

.certificate-validation-card p {
  margin: 0;
  color: rgba(255,255,255,0.78);
  font-size: 0.98rem;
  line-height: 1.62;
}

@media (max-width: 1024px) {
  .certificate-hero-container {
    width: calc(100% - 56px);
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .certificate-copy-block {
    padding-left: 40px;
  }

  .certificate-validation-section .container {
    width: calc(100% - 56px);
  }
}

@media (max-width: 820px) {
  .certificate-hero-section {
    padding: 48px 0 54px;
    min-height: auto;
  }

  .certificate-hero-container {
    width: calc(100% - 40px);
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .certificate-copy-block {
    min-height: auto;
    padding-left: 0;
  }

  .certificate-copy-block h1 {
    font-size: 2.6rem;
    line-height: 1.06;
  }

  .certificate-copy-block p {
    font-size: 1rem;
  }

  .certificate-query-card {
    min-height: auto;
    padding: 26px 20px;
  }

  .certificate-form-header {
    flex-direction: column;
  }

  .secure-pill {
    align-self: flex-start;
  }

  .certificate-validation-section {
    padding: 54px 0 64px;
  }

  .certificate-validation-section .container {
    width: calc(100% - 40px);
  }

  .certificate-validation-header,
  .certificate-validation-grid {
    width: 100%;
    margin-left: 0;
  }

  .certificate-validation-header {
    margin-bottom: 26px;
  }

  .certificate-validation-header h2 {
    font-size: 2.2rem;
  }

  .certificate-validation-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .certificate-validation-card {
    min-height: 210px;
  }
}

/* =========================================================
   QR DENDRO — validación pública desde código del certificado
   ========================================================= */
.qr-verification-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.qr-verification-badge.valid {
  color: var(--dendro-base-dark);
  background: var(--dendro-tech-green);
}

.qr-verification-badge.invalid {
  color: var(--dendro-neutral-light);
  background: rgba(229, 57, 53, 0.18);
  border: 1px solid rgba(229, 57, 53, 0.55);
}

@media (min-width: 1101px) {
  .certificate-validation-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) and (min-width: 821px) {
  .certificate-validation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}