/* ---
MI COMENTARIO:
He añadido "Variables CSS" al inicio. Esto centraliza tus colores.
Si quieres cambiar el color de acento en el futuro, solo lo cambias en un lugar.

--color-acento-principal: Es el turquesa brillante (del CTA).
--color-valor: Es un dorado/amarillo cálido. REEMPLAZA al rojo y al verde.
--- */
:root {
    --color-bg-dark: #002e60;
    --color-bg-light: #ffffff;
    --color-text-on-dark: #ffffff;
    --color-text-on-light: #002e60;
    --color-text-muted: #666;

    /* --- PALETA SIMPLIFICADA --- */
    
    /* 1. ACENTO PRINCIPAL (Para CTAs, iconos, links) */
    --color-acento-principal: #00C9A7;
    --color-acento-principal-claro: rgba(0, 201, 167, 0.1);
    --color-acento-principal-borde: rgba(0, 201, 167, 0.3);
    --gradiente-acento-principal: linear-gradient(135deg, #00F2C3 0%, #00C9A7 100%);
    --sombra-acento-principal: rgba(0, 242, 195, 0.4);

    /* 2. ACENTO DE VALOR (Para Ofertas, Bonus, Urgencia) */
    --color-valor: #FFC107; /* Dorado/Amarillo */
    --color-valor-claro-bg: rgba(255, 193, 7, 0.15);
    --color-valor-texto: #A67C00; /* Texto oscuro para el fondo claro */
    --color-valor-texto-claro: #333; /* Texto para el fondo dorado sólido */
}


.hero_detalle_conversion {
    background: linear-gradient(135deg, #002e60 0%, #003d7a 100%);
    padding: 40px 20px 60px;
    position: relative;
    overflow: hidden;
}

/* Decoración de fondo */
.hero_detalle_conversion::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    /* --- MI COMENTARIO: Usamos la variable del acento principal para el brillo */
    background: radial-gradient(circle, var(--color-acento-principal-claro) 0%, transparent 70%);
    top: -150px;
    right: -150px;
}

.hero_detalle_conversion_container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Breadcrumb */
.hero_detalle_conversion_breadcrumb {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero_detalle_conversion_breadcrumb span {
    /* --- MI COMENTARIO: Unificamos al color de acento principal */
    color: var(--color-acento-principal);
    font-weight: 600;
}

/* Grid principal */
.hero_detalle_conversion_grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    
    /* --- 
    ¡ARREGLO IMPORTANTE!
    Esto centra verticalmente la columna izquierda (el video/título) 
    con la tarjeta de la derecha, como pediste.
    --- */
    align-items: center; 
}

/* Columna izquierda */
.hero_detalle_conversion_media_col {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.hero_detalle_conversion_titulo {
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 900;
    color: var(--color-text-on-dark);
    line-height: 1.2;
    margin: 0;
}

.hero_detalle_conversion_media {
    overflow: hidden;
    position: relative;
}

.hero_detalle_conversion_media iframe,
.hero_detalle_conversion_media img {
    width: 100%; 
    display: block;
    border: none;
    object-fit: cover;
    border-radius: 20px;
}

/* Features rápidas */
.hero_detalle_conversion_features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.hero_detalle_conversion_feature {
    /* --- MI COMENTARIO: Unificamos al color de acento principal */
    background: var(--color-acento-principal-claro);
    border: 2px solid var(--color-acento-principal-borde);
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    color: var(--color-text-on-dark);
}

.hero_detalle_conversion_feature i {
    /* --- MI COMENTARIO: Unificamos al color de acento principal */
    font-size: 24px;
    color: var(--color-acento-principal);
    margin-bottom: 8px;
    display: block;
}

.hero_detalle_conversion_feature span {
    font-size: 13px;
    font-weight: 600;
    display: block;
}

/* Card de compra */
.hero_detalle_conversion_card {
    background: var(--color-bg-light);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 20px;
}

/* --- 
MI COMENTARIO:
Sección de "Urgencia" rediseñada. 
Quitamos el ROJO chillón y el fondo con rayas (ruido visual).
Ahora usa un fondo claro del color "Valor" (amarillo) para ser 
más sutil pero visible.
--- */
.hero_detalle_conversion_urgencia {
    background: var(--color-valor-claro-bg);
    color: var(--color-valor-texto); /* Texto oscuro para mejor lectura */
    padding: 15px;
    border-radius: 15px;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

/* --- MI COMENTARIO: Eliminé el ::before con las rayas. --- */

.hero_detalle_conversion_urgencia_content {
    position: relative;
    z-index: 1;
}

.hero_detalle_conversion_urgencia_icon {
    font-size: 24px;
    margin-bottom: 8px;
    color: var(--color-valor); /* Icono en color valor sólido */
}

.hero_detalle_conversion_urgencia_text {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Contador */
.hero_detalle_conversion_countdown {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* --- MI COMENTARIO: Hacemos que el contador resalte más */
.hero_detalle_conversion_countdown_item {
    background: var(--color-valor); /* Fondo sólido de color valor */
    color: var(--color-valor-texto-claro); /* Texto oscuro */
    padding: 8px 10px;
    border-radius: 8px;
    min-width: auto;
}

.hero_countdown_item_days {
    display: none;
}

.hero_detalle_conversion_countdown_number {
    font-size: 20px;
    font-weight: 900;
    display: block;
    line-height: 1;
}

.hero_detalle_conversion_countdown_label {
    font-size: 9px;
    text-transform: uppercase;
    opacity: 0.9;
    margin-top: 3px;
    display: block;
}

/* Precio */
.hero_detalle_conversion_precio_section {
    text-align: center;
    padding: 20px 0;
    border-bottom: 2px solid #f0f0f0;
    margin-bottom: 20px;
}

.hero_detalle_conversion_precio_label {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero_detalle_conversion_precios {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.hero_detalle_conversion_precio_final {
    font-size: 44px;
    font-weight: 900;
    color: var(--color-text-on-light);
    line-height: 1;
}

/* --- MI COMENTARIO: Adiós al ROJO. Usamos el color Valor. */
.hero_detalle_conversion_descuento_badge {
    background: var(--color-valor);
    color: var(--color-valor-texto-claro);
    padding: 8px 14px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 700;
}

.hero_detalle_conversion_precio_original {
    color: #999;
    text-decoration: line-through;
    font-size: 20px;
    display: block;
    margin-top: 5px;
}

/* --- MI COMENTARIO: Adiós al VERDE. Usamos el color Valor. */
.hero_detalle_conversion_ahorro {
    background: var(--color-valor-claro-bg);
    color: var(--color-valor-texto);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    display: inline-block;
    margin-top: 10px;
}

/* --- MI COMENTARIO: Adiós al VERDE. Usamos el color Valor. */
.hero_detalle_conversion_bonus {
    background: var(--color-valor-claro-bg);
    border: 2px solid rgba(255, 193, 7, 0.2);
    color: var(--color-valor-texto);
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero_detalle_conversion_bonus_badge {
    background: var(--color-valor);
    color: var(--color-valor-texto-claro);
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.hero_detalle_conversion_bonus::before {
    content: '🎁';
    position: absolute;
    font-size: 80px;
    opacity: 0.1;
    top: -10px;
    right: -10px;
}

.hero_detalle_conversion_bonus_text {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    position: relative;
    z-index: 1;
}

/* --- 
MI COMENTARIO:
CTA (Botón) simplificado.
- Mantiene el gradiente turquesa brillante que es lo mejor.
- ELIMINADA la animación "pulse-shadow".
- ELIMINADO el efecto "ripple" (::before) que ensuciaba el hover.
Ahora es un botón limpio y potente.
--- */
.hero_detalle_conversion_cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 16px;
    background: var(--gradiente-acento-principal);
    color: var(--color-text-on-light); /* Texto oscuro para alto contraste */
    border: none;
    border-radius: 50px;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px var(--sombra-acento-principal);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
   
}


/* Hover simplificado */
.hero_detalle_conversion_cta:hover {
    transform: translateY(-3px); /* Un leve brinco */
    /* Sombra un poco más fuerte al hacer hover */
    box-shadow: 0 12px 35px var(--sombra-acento-principal);
}

.hero_detalle_conversion_cta span {
    position: relative;
    z-index: 1;
}

.hero_detalle_conversion_cta i {
    position: relative;
    z-index: 1;
    font-size: 20px;
}


/* Garantías (En la card) */
.hero_detalle_conversion_card .hero_detalle_conversion_garantias {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 15px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.hero_detalle_conversion_card .hero_detalle_conversion_garantia_item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-on-light);
    font-size: 12px;
    font-weight: 600;
}

.hero_detalle_conversion_card .hero_detalle_conversion_garantia_item i {
    /* --- 
    ¡ARREGLO IMPORTANTE!
    Esto fuerza a que todos los íconos (incluso si son
    diferentes como fa-check y fa-shield) ocupen el mismo
    espacio horizontal, alineando el texto perfectamente.
    --- */
    width: 1.4em;
    text-align: center;
    /* --- */
    color: var(--color-acento-principal);
    font-size: 18px;
    flex-shrink: 0;
}

/* Certificación (En la card) */
.hero_detalle_conversion_card .hero_detalle_conversion_certificacion {
    /* --- MI COMENTARIO: Unificamos al color de acento principal */
    background: var(--color-acento-principal-claro);
    border: 2px solid var(--color-acento-principal-borde);
    padding: 12px;
    border-radius: 12px;
    text-align: center;
    margin-top: 0;
    color: var(--color-text-on-light);
    font-weight: 700;
    font-size: 14px;
}

.hero_detalle_conversion_card .hero_detalle_conversion_certificacion i {
    color: var(--color-acento-principal);
    font-size: 24px;
    margin-bottom: 5px;
    display: block;
}













/*********** SECCION DE INFORMACION DEL CURSO **/

.info_curso_seccion {
    background-color: var(--color-bg-light, #ffffff);
    color: var(--color-text-on-light, #002e60);
    padding: 60px 20px;
}

.info_curso_contenido {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.info_curso_bloque {
    margin-bottom: 45px;
}

.info_curso_bloque:last-child {
    margin-bottom: 0;
}

.info_curso_titulo {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 900;
    color: var(--color-text-on-light, #002e60);
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.info_curso_subtitulo {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-on-light, #002e60);
    margin: 0 0 20px 0;
    border-bottom: 3px solid var(--color-acento-principal-borde, #e0f8f5);
    padding-bottom: 10px;
}

.info_curso_descripcion {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-text-muted, #555);
}

.info_curso_lista {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.info_curso_lista li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-muted, #555);
    margin-bottom: 15px;
}

.info_curso_lista li::before {
    content: '\f00c';
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 16px;
    color: var(--color-acento-principal, #00C9A7);
    margin-top: 4px;
}

.info_curso_software_lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
}

.info_curso_software_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--color-acento-principal-claro, #f0faf9);
    border: 2px solid var(--color-acento-principal-borde, #e0f8f5);
    border-radius: 12px;
    padding: 20px 15px;
    text-align: center;
    transition: all 0.3s ease;
}

.info_curso_software_item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 201, 167, 0.15);
}

.info_curso_software_item img {
    height: 50px;
    width: 50px;
    object-fit: contain;
}

.info_curso_software_item span {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-on-light, #002e60);
    line-height: 1.3;
}







/** FRANJA ADICIONAL CON INFO **/
.franja_info_adicional {
    background-color: var(--color-bg-dark, #002e60);
    color: var(--color-text-on-dark, #ffffff);
    padding: 60px 20px;
}

.franja_info_adicional_container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

.franja_info_adicional_titulo {
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 900;
    text-align: center;
    margin: 0 0 40px 0;
    color: var(--color-text-on-dark, #ffffff);
}

.franja_info_adicional_lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px 30px;
}

.franja_info_adicional_lista li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}

.franja_info_adicional_lista li i {
    color: var(--color-acento-principal, #00C9A7);
    font-size: 24px;
    width: 30px;
    text-align: center;
    flex-shrink: 0;
}







/******** PARA LA SECCION DE TEMARIO ***/


.temario_seccion {
    background-color: #f9fafb;
    padding: 60px 20px;
    border-top: 1px solid #f0f0f0;
}

.temario_container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.temario_titulo {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 900;
    color: var(--color-text-on-light, #002e60);
    text-align: center;
    margin: 0 0 40px 0;
}

.temario_lista_modulos {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.temario_modulo {
    background-color: #ffffff;
    border-radius: 16px;
    border: 1px solid #e9ecef;
    box-shadow: 0 5px 20px rgba(0, 46, 96, 0.05);
    overflow: hidden;
}

.temario_modulo_titulo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid #f0f0f0;
}

.temario_modulo_encabezado {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.temario_modulo_numero {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-acento-principal, #00C9A7);
}

.temario_modulo_nombre {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-on-light, #002e60);
}

.temario_modulo_contenido {
    padding: 25px;
}

.temario_modulo_lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 25px;
}

.temario_modulo_lista li p {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--color-text-muted, #555);
    font-size: 16px;
    font-weight: 500;
    transition: color 0.3s ease, transform 0.3s ease;
    line-height: 25px;
}



.temario_modulo_lista li p i {
    color: var(--color-acento-principal, #00C9A7);
    font-size: 12px;
    text-align: center;
}





/** para el aviso del temario **/

.aviso_temario_franja {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-left: 5px solid #ced4da;
    border-radius: 12px;
    padding: 20px 25px;
    margin-bottom: 40px; 
}

.aviso_temario_icono {
    font-size: 28px;
    color: #6c757d;
    margin-top: 3px;
    flex-shrink: 0;
}

.aviso_temario_texto {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.aviso_temario_titulo {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text-on-light, #002e60);
}

.aviso_temario_descripcion {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-muted, #555);
    margin: 0;
}








/********** para la parte del certificado ******/


.certificado_seccion {
    background-color: #f9fafb;
    padding: 80px 20px;
    border-top: 1px solid #f0f0f0;
}

.certificado_container {
    max-width: 1100px;
    margin: 0 auto;
}

.certificado_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.certificado_info {
    text-align: left;
}

.certificado_tag {
    display: inline-block;
    padding: 8px 18px;
    background-color: var(--color-acento-principal-claro, #e0f8f5);
    color: var(--color-acento-principal, #00C9A7);
    border: 1px solid var(--color-acento-principal-borde, #c0e0dc);
    font-size: 14px;
    font-weight: 700;
    border-radius: 25px;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.certificado_titulo {
    font-size: clamp(32px, 4.5vw, 42px);
    font-weight: 900;
    color: var(--color-text-on-light, #002e60);
    line-height: 1.15;
    margin: 0 0 25px 0;
}

.certificado_descripcion {
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text-muted, #495057);
    margin-bottom: 25px;
}

.certificado_subdescripcion {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-on-light, #002e60);
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-left: 5px solid var(--color-acento-principal, #00C9A7);
    padding: 18px 25px;
    border-radius: 10px;
    margin: 0 0 30px 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

.certificado_lista_beneficios {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}

.certificado_lista_beneficios li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px;
    align-items: flex-start;
}

.certificado_lista_beneficios li i {
    color: var(--color-acento-principal, #00C9A7);
    font-size: 22px;
    margin-top: 3px;
    flex-shrink: 0;
}

.certificado_beneficio_texto {
    display: flex;
    flex-direction: column;
}

.certificado_beneficio_titulo {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text-on-light, #002e60);
    margin-bottom: 4px;
    line-height: 1.4;
}

.certificado_beneficio_desc {
    font-size: 16px;
    color: var(--color-text-muted, #555);
    line-height: 1.6;
}

.certificado_visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 450px;
}

.certificado_imagen_wrapper {
    position: absolute;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 46, 96, 0.15);
    transition: all 0.4s ease;
    border: 3px solid #ffffff;
}

.imagen_anverso {
    width: 85%;
    max-width: 420px;
    z-index: 2;
    transform: translateX(-10%);
}

.imagen_reverso {
    width: 60%;
    max-width: 300px;
    z-index: 1;
    transform: translateX(40%) translateY(35%);
}

.certificado_visual:hover .imagen_anverso {
    transform: translateX(-15%) scale(1.03);
    box-shadow: 0 15px 40px rgba(0, 46, 96, 0.2);
}

.certificado_visual:hover .imagen_reverso {
    transform: translateX(45%) translateY(35%) scale(1.03);
    box-shadow: 0 12px 35px rgba(0, 46, 96, 0.18);
}

.certificado_imagen_wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.certificado_imagen_caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, transparent 100%);
    color: white;
    padding: 20px 15px 10px;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.certificado_imagen_wrapper:hover .certificado_imagen_caption {
    opacity: 1;
    transform: translateY(0);
}




/********** SECCION DE TESTIMONIOS **********/


.testimonios_seccion_v2 {
    /* Fondo oscuro para la franja */
    background-color: var(--color-bg-dark, #002e60);
    padding: 100px 20px;
    position: relative;
    overflow: hidden;
}

.testimonios_container_v2 {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.testimonios_tag_v2 {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-acento-principal, #00C9A7);
    text-align: center;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.testimonios_titulo_v2 {
    font-size: clamp(34px, 5vw, 48px);
    font-weight: 900;
    color: var(--color-text-on-dark, #ffffff);
    text-align: center;
    line-height: 1.15;
    margin: 0 0 20px 0;
}

.testimonios_subtitulo_v2 {
    font-size: 19px;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px auto; /* MÁS MARGEN INFERIOR */
}

/* GRUESO DE LA SOLUCIÓN: GRID DE 2 COLUMNAS */
.testimonios_grid_v2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    gap: 40px; /* Espacio generoso */
}

/* NUEVA TARJETA DE TESTIMONIO */
.testimonio_card_v2 {
    background: #ffffff;
    color: var(--color-text-on-light, #002e60);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    /* Elimina el icono de comillas, ya no es necesario */
}

/* AUTOR PRIMERO */
.testimonio_autor_v2 {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px; /* Espacio antes de las estrellas */
}

.testimonio_autor_v2 img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-acento-principal-borde, #d4f4f1);
    flex-shrink: 0;
}

.testimonio_autor_info_v2 {
    display: flex;
    flex-direction: column;
}

.testimonio_autor_nombre_v2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-on-light, #002e60);
}

.testimonio_autor_rol_v2 {
    font-size: 15px;
    color: var(--color-text-muted, #666);
}

/* ESTRELLAS DESPUÉS */
.testimonio_estrellas_v2 {
    color: #FFC107;
    font-size: 18px;
    margin-bottom: 15px;
}

/* TEXTO AL FINAL */
.testimonio_texto_v2 {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-text-muted, #555);
    font-style: italic;
    margin: 0;
}










/*********** para la seccion de porque estudiar en uciency **/


.porque_uciency_seccion {
    background-color: #ffffff; /* Fondo claro (blanco puro) */
    padding: 100px 20px;
}

.porque_uciency_container {
    max-width: 1200px;
    margin: 0 auto;
}

/* 1. Encabezado */
.porque_uciency_header {
    text-align: center;
    max-width: 800px; /* Limita el ancho del texto */
    margin: 0 auto 60px auto; /* Centrado y con margen inferior */
}

.porque_uciency_titulo {
    font-size: clamp(34px, 5vw, 48px); /* ¡TÍTULO BRUTAL! */
    font-weight: 900;
    color: var(--color-text-on-light, #002e60);
    line-height: 1.15;
    margin: 0 0 20px 0;
}

.porque_uciency_subtitulo {
    font-size: 19px;
    color: var(--color-text-muted, #555);
    line-height: 1.7;
}

/* 2. Grid de Pilares */
.porque_uciency_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas */
    gap: 30px;
}

/* 3. La Tarjeta (Pilar) */
.porque_uciency_card {
    /* Fondo de acento sutil, casi blanco */
    background-color: var(--color-acento-principal-claro, #f0faf9);
    border: 1px solid var(--color-acento-principal-borde, #e0f8f5);
    border-radius: 16px;
    padding: 30px;
    text-align: left; /* Alineación a la izquierda */
    transition: all 0.3s ease;
}

.porque_uciency_card:hover {
    /* Al pasar el mouse, resalta */
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 46, 96, 0.1);
}

/* 4. Icono Fuerte */
.porque_uciency_card_icono {
    font-size: 44px; /* Icono grande */
    color: var(--color-acento-principal, #00C9A7);
    margin-bottom: 20px;
    
    /* Para que tenga un espacio fijo */
    line-height: 1; 
}

.porque_uciency_card_titulo {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text-on-light, #002e60);
    margin: 0 0 15px 0;
}

.porque_uciency_card_desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-muted, #666);
    margin: 0;
}







/******* franja con regalo **/



.urgencia_franja_seccion {
    background-image: linear-gradient(135deg, var(--color-valor, #FFC107) 0%, #ffb700 100%);
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
}

.urgencia_franja_container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.urgencia_franja_icono {
    font-size: 50px;
    color: var(--color-valor, #FFC107);
    margin-bottom: 20px;
}

.urgencia_franja_titulo {
    font-size: clamp(32px, 5vw, 46px);
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 10px 0;
    color: var(--color-text-on-light, #002e60);
}

.urgencia_franja_subtitulo {
    font-size: 20px;
    line-height: 1.6;
    margin: 0 0 30px 0;
    max-width: 600px;
    color: var(--color-text-muted, #555);
}

.urgencia_franja_validez {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    display: inline-block;
    color: var(--color-valor-texto, #A67C00);
    background-color: var(--color-valor-claro-bg, rgba(255, 193, 7, 0.15));
    padding: 10px 20px;
    border-radius: 8px;
}

.urgencia_franja_countdown_wrapper {
    padding: 0;
    margin-bottom: 30px;
    border: none;
}

.urgencia_franja_countdown {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.urgencia_franja_countdown_item {
    text-align: center;
}

.urgencia_franja_countdown_number {
    font-size: 40px;
    font-weight: 900;
    display: block;
    line-height: 1;
    background-color: var(--color-bg-dark, #002e60);
    color: var(--color-text-on-dark, #ffffff);
    padding: 10px 15px;
    border-radius: 8px;
    min-width: 60px;
}

.urgencia_franja_countdown_label {
    font-size: 11px;
    text-transform: uppercase;
    margin-top: 8px;
    display: block;
    font-weight: 600;
    color: var(--color-text-muted, #666);
}

.urgencia_franja_cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 90%;
    max-width: 450px;
    padding: 16px 25px;
    background: var(--gradiente-acento-principal, linear-gradient(135deg, #00F2C3 0%, #00C9A7 100%));
    color: var(--color-text-on-light, #002e60);
    border: none;
    border-radius: 50px;
    font-size: 1.2em;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px var(--sombra-acento-principal, rgba(0, 242, 195, 0.4));
}

.urgencia_franja_cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px var(--sombra-acento-principal, rgba(0, 242, 195, 0.5));
}

.urgencia_franja_terminos {
    display: none;
}








/************ para preguntas frecuentes **/

.faq_seccion {
    background-color: #f9fafb;
    padding: 80px 20px;
    border-top: 1px solid #f0f0f0;
}

.faq_container {
    max-width: 900px;
    margin: 0 auto;
}

.faq_header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
}

.faq_titulo {
    font-size: clamp(30px, 4.5vw, 42px);
    font-weight: 900;
    color: var(--color-text-on-light, #002e60);
    margin: 0 0 15px 0;
}

.faq_subtitulo {
    font-size: 19px;
    color: var(--color-text-muted, #555);
    line-height: 1.7;
}

.faq_acordeon {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 60px;
}

.faq_item {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 46, 96, 0.04);
}

.faq_item[open] {
    border-color: var(--color-acento-principal-borde, #c0e0dc);
}

.faq_item[open] .faq_pregunta {
    border-bottom: 1px solid #f0f0f0;
}

.faq_item[open] .faq_icono {
    transform: rotate(180deg);
}

.faq_pregunta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    cursor: pointer;
    list-style: none;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-on-light, #002e60);
    width: 100%;
}
.faq_pregunta::-webkit-details-marker {
    display: none;
}

.faq_icono {
    font-size: 16px;
    color: var(--color-acento-principal, #00C9A7);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 15px;
}

.faq_respuesta {
    padding: 25px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-muted, #555);
}

.faq_respuesta p {
    margin: 0;
}

.faq_enlace_checkout {
    display: inline-block;
    background-color: var(--color-acento-principal-claro, #f0faf9);
    color: var(--color-acento-principal, #00C9A7);
    padding: 8px 15px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.faq_enlace_checkout:hover {
    background-color: var(--color-acento-principal, #00C9A7);
    color: var(--color-text-on-light, #002e60);
}

.faq_cta_final {
    background-color: var(--color-bg-dark, #002e60);
    color: var(--color-text-on-dark, #ffffff);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0, 46, 96, 0.15);
}

.faq_cta_texto {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 25px 0;
}

.faq_cta_texto span {
    color: var(--color-acento-principal, #00C9A7);
    display: block;
}

.faq_cta_boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 35px;
    background: var(--gradiente-acento-principal, linear-gradient(135deg, #00F2C3 0%, #00C9A7 100%));
    color: var(--color-text-on-light, #002e60);
    border: none;
    border-radius: 50px;
    font-size: 1.1em;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px var(--sombra-acento-principal, rgba(0, 242, 195, 0.4));
}

.faq_cta_boton:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px var(--sombra-acento-principal, rgba(0, 242, 195, 0.5));
}






/*********** COMPARACION ********/

.comparativa_seccion {
    background-color: #f9fafb; /* Fondo claro "premium" */
    padding: 80px 20px;
    border-top: 1px solid #f0f0f0;
}

.comparativa_container {
    max-width: 1100px;
    margin: 0 auto;
}

.comparativa_header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.comparativa_tag {
    display: inline-block;
    padding: 8px 18px;
    background-color: var(--color-acento-principal-claro, #e0f8f5);
    color: var(--color-acento-principal, #00C9A7);
    border: 1px solid var(--color-acento-principal-borde, #c0e0dc);
    font-size: 14px;
    font-weight: 700;
    border-radius: 25px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.comparativa_titulo {
    font-size: clamp(34px, 5vw, 48px);
    font-weight: 900;
    color: var(--color-text-on-light, #002e60);
    line-height: 1.15;
    margin: 0 0 20px 0;
}

.comparativa_subtitulo {
    font-size: 19px;
    color: var(--color-text-muted, #555);
    line-height: 1.7;
}

/* El Grid que simula la tabla */
.comparativa_tabla_wrapper {
    display: grid;
    /* Columna de feature, Columna de Uciency, Columna de Otros */
    grid-template-columns: 0.8fr 1fr 1fr;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 46, 96, 0.05);
}

/* Encabezados de la Tabla */
.comparativa_header_item {
    padding: 20px 25px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.comparativa_header_item.col_uciency {
    background-color: var(--color-bg-dark, #002e60);
    color: var(--color-text-on-dark, #ffffff);
    /* Puedes poner tu logo aquí */
}

.comparativa_header_item.col_otros {
    background-color: #f1f5f9; /* Un gris aburrido */
    color: #64748b;
}

/* Celdas de Características (Columna 1) */
.comparativa_feature_item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 25px;
    background: #ffffff;
    border-bottom: 1px solid #e9ecef;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-on-light, #002e60);
}

.comparativa_feature_item i {
    font-size: 24px;
    color: var(--color-acento-principal, #00C9A7);
}

/* Celdas de Datos (Columnas 2 y 3) */
.comparativa_data_item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 25px;
    border-bottom: 1px solid #e9ecef;
    font-size: 16px;
    line-height: 1.6;
}

.comparativa_data_item.col_uciency {
    background-color: var(--color-acento-principal-claro, #f0faf9);
    color: var(--color-text-on-light, #002e60);
}

.comparativa_data_item.col_otros {
    background-color: #ffffff;
    color: #666;
}

/* Iconos de Check y X */
.comparativa_data_item i {
    font-size: 20px;
    margin-top: 3px;
    flex-shrink: 0;
}

.check_icon {
    color: var(--color-acento-principal, #00C9A7);
}

.x_icon {
    color: #FF6B6B; /* Rojo de "error" */
}

/* Quitar borde inferior de las últimas celdas */
.comparativa_tabla_wrapper > div:nth-last-child(-n+3) {
    border-bottom: none;
}












/* Responsive */
@media (max-width: 768px) {
    .hero_detalle_conversion_grid {
        grid-template-columns: 1fr;
        /* --- MI COMENTARIO: Quitamos el centrado en móvil para que fluya natural */
        align-items: start;
    }

    .hero_detalle_conversion_card {
        position: static;
        margin-top: 30px;
    }

    .hero_detalle_conversion_titulo {
        margin-top: 0;
    }

    .hero_detalle_conversion_features {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    
    .hero_detalle_conversion_media iframe, .hero_detalle_conversion_media img{
        /* --- MI COMENTARIO: 100% en móvil es mejor */
        width: 100%;
    }
    
    
    
    
    .hero_detalle_conversion_cta{
        font-size: 1.2em;
        gap: 5px;
    }
    
    
    
    
    
/** para la parte informativa del curso **/

.info_curso_seccion {
        padding: 40px 20px;
    }

    .info_curso_bloque {
        margin-bottom: 30px;
    }

    .info_curso_titulo {
        font-size: 26px;
    }

    .info_curso_subtitulo {
        font-size: 22px;
    }

    .info_curso_descripcion {
        font-size: 16px;
        line-height: 1.6;
    }

    .info_curso_lista li {
        font-size: 15px;
        gap: 10px;
    }

    .info_curso_software_item {
        padding: 15px;
        gap: 10px;
    }

    .info_curso_software_item img {
        height: 40px;
        width: 40px;
    }

    .info_curso_software_item span {
        font-size: 13px;
    }
    
    
    
    
    
/*** FRANJA ADICIONAL DE INFORMACION **/

.franja_info_adicional {
        padding: 40px 20px;
    }

    .franja_info_adicional_titulo {
        margin-bottom: 30px;
    }

    .franja_info_adicional_lista {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .franja_info_adicional_lista li {
        font-size: 15px;
    }
    
    
    
    
    

/*** para la el temario **/

.temario_seccion {
        padding: 40px 20px;
    }

    .temario_titulo {
        font-size: 26px;
        margin-bottom: 30px;
    }

    .temario_modulo_lista {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .temario_modulo_nombre {
        font-size: 18px;
    }

    .temario_modulo_contenido {
        padding: 20px;
    }

    .temario_modulo_lista li a {
        font-size: 15px;
    }
    
    
    
    
    
    
   /*** certificado ***********/
   
   .certificado_grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .certificado_info {
        align-items: center;
        text-align: center;
    }

    .certificado_subdescripcion,
    .certificado_beneficio_texto {
        text-align: left;
    }
    
    .certificado_lista_beneficios {
        max-width: 450px;
        margin: 0 auto;
    }
    
    .certificado_visual {
        min-height: 400px;
    }
    
    
    
    
    
    /*** testimonios *********/
    
    .testimonios_seccion_v2 {
        padding: 60px 20px;
    }
    
    .testimonios_titulo_v2 {
        font-size: 32px;
    }

    .testimonios_subtitulo_v2 {
        font-size: 17px;
        margin-bottom: 40px;
    }

    /* 1 COLUMNA EN MÓVIL */
    .testimonios_grid_v2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .testimonio_card_v2 {
        padding: 25px;
    }
    
    .testimonio_autor_v2 img {
        width: 65px;
        height: 65px;
    }

    .testimonio_texto_v2 {
        font-size: 16px;
    }
    
    
    
    
    
   /*** por que inscribirte **/
   
   .porque_uciency_seccion {
        padding: 60px 20px;
    }

    .porque_uciency_header {
        margin-bottom: 40px;
    }

    .porque_uciency_titulo {
        font-size: 32px;
    }

    .porque_uciency_subtitulo {
        font-size: 17px;
    }
    
    .porque_uciency_grid {
        grid-template-columns: 1fr; /* 1 columna en móvil */
    }

    .porque_uciency_card {
        padding: 25px;
    }

    .porque_uciency_card_titulo {
        font-size: 20px;
    }
    
    
    
    
    
  /*** seccion oferta **/
  
  .urgencia_franja_seccion {
        padding: 60px 20px;
    }
    
    .urgencia_franja_container {
        padding: 40px 25px;
    }
    
    
    
    
 /********** preguntas frecuentes **/
 
 .faq_seccion {
        padding: 60px 30px;
    }
    
    .faq_header {
        margin-bottom: 40px;
    }

    .faq_titulo {
        font-size: 32px;
    }

    .faq_subtitulo {
        font-size: 17px;
    }

    .faq_pregunta {
        font-size: 16px;
        padding: 15px 20px;
    }

    .faq_respuesta {
        padding: 20px;
        font-size: 15px;
    }
    
    .faq_cta_final {
        padding: 30px;
    }
    
    .faq_cta_texto {
        font-size: 24px;
    }
   
   
   
   
   
  /******** COMPARATIVA *******/
  
.comparativa_header {
        margin-bottom: 40px;
    }
    
    .comparativa_titulo {
        font-size: 32px;
    }

    .comparativa_tabla_wrapper {
        display: block;
        border: none;
        box-shadow: none;
        background: none;
        border-radius: 0;
    }
    
    .comparativa_header_item {
        display: none;
    }
    
    .comparativa_data_item.col_otros {
        display: flex;
    }

    /* --- INICIO DE LA SOLUCIÓN --- */
    
    .comparativa_data_item {
        flex-wrap: wrap; /* Permite que el ::before y el contenido se apilen */
    }

    /* Creamos las etiquetas de contexto con un pseudo-elemento */
    .comparativa_data_item::before {
        display: block;
        width: 100%; /* Ocupa todo el ancho para empujar el contenido hacia abajo */
        margin-bottom: 15px; /* Espacio entre la etiqueta y el contenido */
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Etiqueta para Uciency (verde) */
    .comparativa_data_item.col_uciency::before {
        content: 'Uciency';
        color: var(--color-acento-principal, #00C9A7);
    }
    
    /* Etiqueta para Otros (rojo) */
    .comparativa_data_item.col_otros::before {
        content: 'Otras empresas';
        color: #FF6B6B;
    }

    /* --- FIN DE LA SOLUCIÓN --- */
    
    .comparativa_feature_item {
        border: 1px solid #e9ecef;
        border-bottom: none;
        border-radius: 12px 12px 0 0;
        margin-top: 25px;
        background: #ffffff;
    }
    
    .comparativa_data_item.col_uciency {
        border: 1px solid #e9ecef;
        border-top: none;
        border-bottom: none;
        border-radius: 0;
    }
    
    .comparativa_data_item.col_otros {
        border: 1px solid #e9ecef;
        border-top: none;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 5px 15px rgba(0, 46, 96, 0.05);
    }
    
    .comparativa_tabla_wrapper > div:nth-last-child(-n+3) {
        border-bottom: 1px solid #e9ecef;
    }
    
    .comparativa_tabla_wrapper > .comparativa_feature_item:nth-last-of-type(3) {
         border-bottom: none;
    }
     .comparativa_tabla_wrapper > .comparativa_data_item.col_uciency:nth-last-of-type(2) {
         border-bottom: none;
    }
    .comparativa_tabla_wrapper > .comparativa_data_item.col_otros:last-of-type {
         border-bottom: 1px solid #e9ecef;
    }
   
   
   
   
   
   
   
   
    
    
    
    
    
}

















@media (max-width: 480px) {
    .hero_detalle_conversion_features {
        grid-template-columns: 1fr;
    }

    .hero_detalle_conversion_card .hero_detalle_conversion_garantias {
        grid-template-columns: 1fr; /* Volver a 1 columna */
    }
}