/* ========================================
        VARIABLES Y RESET
        ======================================== */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 :root {
     --verde-chi: #3D6E4B;
     --verde-brote: #68904D;
     --blanco-arcilla: #F9F7F5;
     --gris-natural: #F2EFE9;
     --verde-bosque: #2C3A2B;
     --gris-musgo: #5D6D5C;
     --madera: #C1A37A;
     --sombra-suave: 0 12px 30px rgba(44, 58, 43, 0.04);
     --border-radius-card: 28px;
     --border-radius-boton: 980px;
     --fuente-titulos: 'Poppins', sans-serif;
     --fuente-cuerpo: 'Lora', serif;
     --transicion: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1);

     /* Tipografía responsive */
     --text-xs: 0.875rem;
     --text-sm: 1rem;
     --text-base: 1.125rem;
     --text-lg: 1.25rem;
     --text-xl: 1.5rem;
     --text-2xl: 2rem;
     --text-3xl: 2.5rem;
     --text-4xl: 3rem;
     --text-5xl: 3.5rem;
 }

 @media screen and (max-width: 992px) {
     :root {
         --text-xs: 0.8rem;
         --text-sm: 0.9rem;
         --text-base: 1rem;
         --text-lg: 1.125rem;
         --text-xl: 1.25rem;
         --text-2xl: 1.5rem;
         --text-3xl: 2rem;
         --text-4xl: 2.5rem;
         --text-5xl: 3rem;
     }
 }

 @media screen and (max-width: 768px) {
     :root {
         --text-xs: 0.75rem;
         --text-sm: 0.85rem;
         --text-base: 0.95rem;
         --text-lg: 1.05rem;
         --text-xl: 1.15rem;
         --text-2xl: 1.3rem;
         --text-3xl: 1.8rem;
         --text-4xl: 2.2rem;
         --text-5xl: 2.5rem;
     }
 }

 body {
     background-color: var(--blanco-arcilla);
     color: var(--verde-bosque);
     font-family: var(--fuente-cuerpo);
     line-height: 1.6;
     overflow-x: hidden;
 }

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

 /* ========================================
        HERO
        ======================================== */
 .hero-formacion {
     position: relative;
     min-height: 85vh;
     display: flex;
     align-items: center;
     padding: 6rem 0 4rem;
     background: linear-gradient(135deg, rgba(61, 110, 75, 0.25), rgba(44, 58, 43, 2.8)), url('../img/formacion/cki-kunk-intermedio/formacion-chi.kung-intermedio-1.webp') no-repeat center center;
     background-size: cover;
     background-position: center;
     color: #ffffff;
 }

 .hero-formacion::before {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 100px;
     background: linear-gradient(to top, var(--blanco-arcilla), transparent);
 }

 .hero-formacion .container {
     position: relative;
     z-index: 2;
 }

 .hero-formacion-titulo {
     font-size: var(--text-5xl);
     font-weight: 600;
     margin-bottom: 1rem;
     line-height: 1.2;
 }

 .hero-formacion-subtitulo {
     font-size: var(--text-xl);
     font-family: var(--fuente-cuerpo);
     font-style: italic;
     opacity: 0.9;
     margin-bottom: 1.5rem;
 }

 .hero-formacion-detalles {
     display: flex;
     flex-wrap: wrap;
     gap: 1.5rem 2.5rem;
     margin: 1.5rem 0 2.5rem;
 }

 .hero-formacion-detalle {
     display: flex;
     align-items: center;
     gap: 0.6rem;
     font-size: var(--text-base);
 }

 .hero-formacion-detalle i {
     color: var(--gris-natural);
     font-size: 1.2rem;
     width: 24px;
     font-weight: 600;
 }

 .btn-hero {
     background-color: var(--madera);
     color: var(--blanco-arcilla);
     border: none;
     padding: 1rem 3rem;
     border-radius: var(--border-radius-boton);
     font-size: var(--text-lg);
     font-weight: 600;
     cursor: pointer;
     transition: var(--transicion);
     display: inline-flex;
     align-items: center;
     gap: 0.8rem;
 }

 .btn-hero:hover {
     background-color: var(--gris-natural);
     transform: translateY(-3px);
     box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
     color: var(--verde-bosque)
 }

 /* ========================================
        SECCIONES GENERALES
        ======================================== */
 .seccion-formacion {
     padding: 4rem 0;
 }

 .seccion-formacion.par {
     background-color: var(--blanco-arcilla);
 }

 .seccion-formacion.impar {
     background-color: var(--blanco-arcilla);
 }

 .seccion-titulo {
     font-size: var(--text-3xl);
     font-weight: 600;
     color: var(--verde-chi);
     margin-bottom: 2rem;
     position: relative;
     padding-bottom: 0.5rem;
 }

 .seccion-titulo::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 80px;
     height: 3px;
     background-color: var(--madera);
     border-radius: 2px;
 }

 .seccion-titulo-centrado {
     text-align: center;
 }

 .seccion-titulo-centrado::after {
     left: 50%;
     transform: translateX(-50%);
 }

 .seccion-descripcion {
     font-size: var(--text-base);
     color: var(--verde-bosque);
     line-height: 1.8;
     max-width: 900px;
     margin: 0 auto 2rem;
 }

 .image {
     width: 100%;
     border-radius: var(--border-radius-card);
     box-shadow: var(--sombra-suave);
     overflow: hidden;
 }

 /* ========================================
        OBJETIVOS
        ======================================== */
 .objetivos-texto {
     font-size: var(--text-base);
     color: var(--verde-bosque);
     line-height: 1.9;
     max-width: 900px;
     margin: 0 auto;
 }

 .objetivos-texto p {
     margin-bottom: 1.5rem;
 }

 .objetivos-lista {
     list-style: none;
     padding: 0;

     margin: 0 auto;
 }

 .objetivos-lista li {
     padding: 0.4rem 0;
     padding-left: 2rem;
     position: relative;
     color: var(--verde-bosque);
     font-size: var(--text-base);
 }

 .objetivos-lista li::before {
     content: '✓';
     position: absolute;
     left: 0;
     color: var(--verde-chi);
     font-weight: bold;
 }

 /* ========================================
        MÓDULOS
        ======================================== */
 .modulos-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2rem;
 }

 .modulo-card {
     background-color: var(--blanco-arcilla);
     border-radius: var(--border-radius-card);
     padding: 2rem 1.8rem;
     box-shadow: var(--sombra-suave);
     border-left: 4px solid var(--madera);
     transition: var(--transicion);
 }

 .modulo-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 20px 40px rgba(44, 58, 43, 0.08);
 }

 .modulo-icono {
     font-size: 2.5rem;
     color: var(--verde-chi);
     margin-bottom: 1rem;
     text-align: center;
 }

 .modulo-icono i {
     font-weight: 600 !important;
 }

 .modulo-titulo {
     font-size: var(--text-lg);
     font-weight: 600;
     color: var(--verde-chi);
     margin-bottom: 0.8rem;
     text-align: center;
 }

 .modulo-lista {
     list-style: none;
     padding: 0;
     text-align: left;
 }

 .modulo-lista li {
     padding: 0.4rem 0;
     padding-left: 1.5rem;
     position: relative;
     color: var(--gris-musgo);
     font-size: var(--text-sm);
 }

 .modulo-lista li::before {
     content: '▸';
     position: absolute;
     left: 0;
     color: var(--madera);
 }

 /* ========================================
        DESARROLLO
        ======================================== */
 .desarrollo-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2rem;
     margin: 2rem 0;
 }

 .desarrollo-grid-1 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 2rem;
     margin: 2rem 0;
 }

 .desarrollo-item {
     background-color: var(--blanco-arcilla);
     border-radius: var(--border-radius-card);
     padding: 1.8rem 1.5rem;
     text-align: center;
     box-shadow: var(--sombra-suave);
 }

 .desarrollo-item i {
     font-size: 2.5rem;
     color: var(--verde-chi);
     margin-bottom: 0.8rem;
     font-weight: 600 !important;
 }

 .desarrollo-item h4 {
     font-size: var(--text-lg);
     font-weight: 600;
     color: var(--verde-chi);
     margin-bottom: 0.3rem;
 }

 .desarrollo-item p {
     font-size: var(--text-sm);
     color: var(--gris-musgo);
 }

 .fechas-vivo {
     background-color: var(--gris-natural);
     border-radius: var(--border-radius-card);
     padding: 2rem;
     margin-top: 2rem;
     text-align: center;
 }

 .fechas-vivo h4 {
     font-size: var(--text-lg);
     color: var(--verde-chi);
     margin-bottom: 1rem;
 }

 .fechas-vivo ul {
     list-style: none;
     padding: 0;
 }

 .fechas-vivo li {
     padding: 0.6rem 0;
     padding-left: 2rem;
     position: relative;
     color: var(--verde-bosque);
 }

 /* .fechas-vivo li::before {
            content: '📅';
            position: absolute;
            left: 0;
        } */

 /* ========================================
        ACOMPAÑAMIENTO
        ======================================== */
 .acompanamiento-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 3rem;
 }

 .acompanamiento-texto {
     font-size: var(--text-base);
     color: var(--verde-bosque);
     line-height: 1.9;
     width: 85%;
     margin: 0 auto;
 }

 .acompanamiento-icono {
     text-align: center;
     font-size: 10rem;
     color: var(--verde-chi);
     font-weight: 600 !important;
     background: linear-gradient(135deg, var(--verde-chi), var(--verde-bosque));
     background-clip: text;
     -webkit-background-clip: text;
 }

 /* ========================================
        QUÉ INCLUYE
        ======================================== */
 .incluye-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2rem;
 }

 .incluye-item {
     background-color: var(--blanco-arcilla);
     border-radius: var(--border-radius-card);
     padding: 2rem 1.5rem;
     text-align: center;
     box-shadow: var(--sombra-suave);
     border: 1px solid transparent;
     transition: var(--transicion);
 }

 .incluye-item:hover {
     border-color: var(--madera);
     transform: translateY(-5px);
 }

 .incluye-item i {
     font-size: 2.8rem;
     color: var(--verde-chi);
     margin-bottom: 1rem;
 }

 .incluye-item h4 {
     font-size: var(--text-lg);
     font-weight: 600;
     color: var(--verde-chi);
     margin-bottom: 0.8rem;
 }

 .incluye-item p {
     font-size: var(--text-sm);
     color: var(--gris-musgo);
     line-height: 1.6;
 }

 /* ========================================
        DIRIGIDO A
        ======================================== */
 .dirigido-lista {
     display: flex;
     align-items: center;
     flex-direction: column;
     gap: 1rem;
     justify-content: center;
     max-width: 800px;
     margin: 0 auto;
 }

 .dirigido-item {
     background-color: var(--blanco-arcilla);
     padding: 0.8rem 1.8rem;
     border-radius: 60px;
     border: 1px solid var(--gris-natural);
     font-size: var(--text-sm);
     color: var(--verde-bosque);
     transition: var(--transicion);
 }

 .dirigido-item:hover {
     border-color: var(--madera);
     background-color: var(--blanco-arcilla);
 }

 /* ========================================
        INSTRUCTOR
        ======================================== */
 .instructor-grid {
     display: grid;
     grid-template-columns: 1fr 2fr;
     gap: 3rem;
     align-items: center;
 }

 .instructor-imagen {
     width: 100%;
     border-radius: 50%;
     aspect-ratio: 1/1;
     overflow: hidden;
     box-shadow: var(--sombra-suave);
     border: 4px solid var(--madera);
 }

 .instructor-imagen img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .instructor-texto {
     font-size: var(--text-base);
     color: var(--verde-bosque);
     line-height: 1.9;
     text-align: left;
 }

 /* ========================================
        INVERSIÓN
        ======================================== */
 .inversion-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 2rem;
     max-width: 800px;
     margin: 0 auto 2rem;
 }

 .inversion-card {
     background-color: linear-gradient(135deg, var(--gris-natural), var(--blanco-arcilla));
     border-radius: var(--border-radius-card);
     padding: 2rem 1.8rem;
     text-align: center;
     box-shadow: var(--sombra-suave);
     border: 1px solid transparent;
     transition: var(--transicion);
 }

 .inversion-card:hover {
     border-color: var(--madera);
     transform: translateY(-5px);
 }

 .inversion-card.destacada {
     border-color: var(--verde-chi);
     background: linear-gradient(135deg, var(--gris-natural), var(--blanco-arcilla));
 }

 .inversion-card h4 {
     font-size: var(--text-lg);
     font-weight: 600;
     color: var(--verde-chi);
     margin-bottom: 0.5rem;
 }

 .inversion-card .precio {
     font-size: var(--text-2xl);
     font-weight: 700;
     color: var(--verde-bosque);
     margin: 1rem 0;
 }

 .inversion-card .detalle {
     font-size: var(--text-sm);
     color: var(--gris-musgo);
 }

 .beneficio-miembros {
     background: linear-gradient(135deg, var(--gris-natural), var(--blanco-arcilla));
     border-radius: var(--border-radius-card);
     padding: 2rem;
     text-align: center;
     max-width: 700px;
     margin: 0 auto 2rem;
     border: 1px dashed var(--madera);
 }

 .beneficio-miembros i {
     color: var(--madera);
     font-size: 2rem;
     margin-bottom: 0.5rem;
 }

 .medios-pago {
     display: flex;
     flex-wrap: wrap;
     gap: 1.5rem;
     justify-content: center;
     max-width: 600px;
     margin: 0 auto 2rem;
 }

 .medios-pago span {
     background-color: var(--blanco-arcilla);
     padding: 0.6rem 1.5rem;
     border-radius: 60px;
     border: 1px solid var(--gris-natural);
     font-size: var(--text-sm);
     color: var(--verde-bosque);
 }

 .requisitos-lista {
     list-style: none;
     padding: 0;
     max-width: 700px;
     margin: 0 auto;
 }

 .requisitos-lista li {
     padding: 0.6rem 0;
     padding-left: 2rem;
     position: relative;
     color: var(--verde-bosque);
 }

 .requisitos-lista li::before {
     content: '✓';
     position: absolute;
     left: 0;
     color: var(--verde-chi);
     font-weight: bold;
 }

 .condiciones-lista {
     list-style: none;
     padding: 0;
     max-width: 700px;
     margin: 0 auto;
 }

 .condiciones-lista li {
     padding: 0.6rem 0;
     padding-left: 2rem;
     position: relative;
     color: var(--verde-bosque);
 }

 .condiciones-lista li::before {
     content: '•';
     position: absolute;
     left: 0;
     color: var(--madera);
     font-weight: bold;
 }

 /* ========================================
        CTA FINAL
        ======================================== */
 .cta-final {
     /* background: linear-gradient(135deg, var(--gris-natural), var(--blanco-arcilla)); */
     background: linear-gradient(135deg, var(--verde-chi), var(--verde-bosque));
     color: white;
     text-align: center;
     padding: 4rem 2rem;
     border-radius: var(--border-radius-card);
     margin: 0 auto;
     max-width: 900px;
 }

 .cta-final h2 {
     font-size: var(--text-3xl);
     margin-bottom: 1rem;
 }

 .cta-final p {
     font-size: var(--text-lg);
     opacity: 0.9;
     margin-bottom: 2rem;
 }

 .btn-cta {
     background-color: var(--madera);
     color: var(--verde-bosque);
     border: none;
     padding: 1rem 3rem;
     border-radius: var(--border-radius-boton);
     font-size: var(--text-lg);
     font-weight: 600;
     cursor: pointer;
     transition: var(--transicion);
     display: inline-flex;
     align-items: center;
     gap: 0.8rem;
 }

 .btn-cta:hover {
     background-color: white;
     transform: scale(1.05);
 }
 
 .btn-cta-2 {
     background-color: var(--verde-chi);
     color: var(--blanco-arcilla);
     border: none;
     padding: 1rem 3rem;
     border-radius: var(--border-radius-boton);
     font-size: var(--text-lg);
     font-weight: 600;
     cursor: pointer;
     transition: var(--transicion);
  }
  
  .btn-cta-2:hover {
     background-color: var(--madera);
     transform: scale(1.05);
  }
  
  
  /* ========================================
        ANIMACIONES
        ======================================== */
 .fade-up {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.8s ease, transform 0.8s ease;
 }

 .fade-up.visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* ========================================
        RESPONSIVE
        ======================================== */
 @media screen and (max-width: 992px) {

     .modulos-grid,
     .incluye-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .inversion-grid {
         grid-template-columns: 1fr;
         max-width: 400px;
     }

     .hero-formacion {
         min-height: 70vh;
         padding: 5rem 0 3rem;
     }
 }

 @media screen and (max-width: 768px) {
     .hero-formacion {
         min-height: auto;
         padding: 4rem 0 2.5rem;
         background-position: center 20%;
         background-size: contain;
     }

     .hero-formacion-titulo {
         font-size: var(--text-4xl);
     }

     .hero-formacion-subtitulo {
         font-size: var(--text-base);
     }


     .hero-formacion-detalles {
         gap: 1rem;
         flex-direction: column;
         align-items: flex-start;
     }

     .hero-formacion-detalle {
         font-size: var(--text-sm);
     }

     .btn-hero {
         padding: 0.8rem 1.8rem;
         font-size: var(--text-base);
         width: 100%;
         justify-content: center;
     }

     .modulos-grid,
     .incluye-grid {
         grid-template-columns: 1fr;
         max-width: 500px;
         margin: 0 auto;
     }

     .desarrollo-grid,
     .desarrollo-grid-1 {
         grid-template-columns: 1fr;
         max-width: 400px;
         margin: 0 auto;
     }

     .acompanamiento-grid {
         grid-template-columns: 1fr;
         gap: 2rem;
     }

     .acompanamiento-icono {
         font-size: 5rem;
         order: -1;
     }

     .instructor-grid {
         grid-template-columns: 1fr;
         text-align: center;
     }

     .instructor-imagen {
         max-width: 250px;
         margin: 0 auto;
     }

     .seccion-titulo {
         text-align: center;
     }

     .seccion-titulo::after {
         left: 50%;
         transform: translateX(-50%);
     }

     .fechas-vivo {
         padding: 1.5rem;
     }
 }

 @media screen and (max-width: 480px) {
     .hero-formacion {
         min-height: 20vh;
         padding: 3rem 0 2rem;
         background-position: center 10%;
         background-position-y: center;
     }

     .hero-formacion-titulo {
         font-size: var(--text-3xl);
     }

     .hero-formacion-subtitulo {
         font-size: var(--text-base);
     }

     .hero-formacion-detalle {
         font-size: var(--text-sm);
     }

     .btn-hero {
         padding: 0.8rem 1.8rem;
         font-size: var(--text-base);
     }

     .inversion-card .precio {
         font-size: var(--text-xl);
     }

     .cta-final h2 {
         font-size: var(--text-2xl);
     }

     .cta-final p {
         font-size: var(--text-base);
     }
 }