@font-face {
    font-family: PortaCKD;
    src: url(../fuentes/fontTitulos.ttf);
}

@font-face{
    font-family: FontTitulos;
    src: url(../fuentes/limbusCondensed.otf);
}

@font-face {
    font-family: ParrafoKD;
    src: url(../fuentes/Montserrat-Regular.ttf);
}

@font-face {
    font-family: ParrafoBold;
    src: url(../fuentes/Montserrat-Bold.ttf);
}


#PortaCKD{
    font-family: PortaCKD, serif;
}

#TituloCKD{
    font-family: FontTitulos, serif;
    line-height: 46px;
}

#Titulo2CKD{
    font-family: FontTitulos, serif;
    color: #064b9d;
}

.TituloNoso{
    font-size: 40px;
}

#parrafosKD{
    font-family: ParrafoKD, serif;
    font-size: 16px;
}

#parrafosCKD {
    font-family: ParrafoKD, serif;
    font-size: 16px;
    color: #FFF;
    background-color: #064b9d;
    padding: 15px;
}

#mvf{
    font-size: 40px;
    color: #ffbd59;
    
}

#mvfPEI2{
    font-size: 40px;
    color: #fff;
    background-color: #ffbd59;
    padding: 10px;
    width: fit-content;
}

.mvfMulti{
    font-size: 25px;
    color: #064b9d;
    background-color: #ffbd59;
    padding: 5px;
    width: fit-content;
}

#blogFun{
    background-color: #064b9d;
    padding: 12px;

}

#fundamentosKD{
    font-size: 25px;
    color: #ffbd59;
}

#parrafosFund{
    font-family: ParrafoKD, serif;
    font-size: 15px;
    color: #FFF;
}

#cardFund{
    padding-right: 10px;
    padding-left: 10px;
}

#steamckd{
    font-family: ParrafoKD, serif;
    color: #064b9d;
    font-size: 40px;
}

#parrafosteam{
    color: #000;
    font-family: ParrafoKD, serif;
    font-size: 17px;
}

#parrafosteam2{
    color: #000;
    font-family: ParrafoBold, serif;
    font-size: 17px;
}

.contacIns{
    font-family: ParrafoBold, serif;
    color: #000;
    font-size: 1.5rem;
}

#mvfPEI{
    font-size: 40px;
    color: #000;
}

#tablaTitulo{
    font-family: FontTitulos, serif;
    font-size: 21px;
}

#tablaCol1{
    font-family: FontTitulos, serif;
    font-size: 20px;
    color: #000;
}

.tablaCel{
    font-family: ParrafoKD, serif;
    font-size: 18px;
    color: #000;
}

.tablaCol3{
    font-family: ParrafoKD, serif;
    font-size: 15px;
    color: #000;
}

.TituloNivel{
    font-family: ParrafoBold, serif;
    font-size: 25px;
    font-weight: bold;
    color: #064b9d;
}

.PECKDPar{
    font-family: ParrafoKD, serif;
    font-size: 15px;
    color: #fff;
}

.mvfPE{
    font-family: ParrafoBold, serif;
    font-size: 40px;
    color: #fff;
    
}

.mvfPETXT{
    font-family: ParrafoBold, serif;
    font-size: 16px;
    color: #fff;
    
}

.mvfPELis{
    font-family: ParrafoKD, serif;
    font-size: 15px;
    color: #fff;
    
}

.content-inner2 {
    padding-top: 30px;
    margin-bottom: 50px;
}

.tituloIns h2{
    font-family: ParrafoBold, serif;
    font-size: 40px;
    color: #064b9d;
}

.creative-table tbody th{
            border: 3px solid #ffbd59; /* Borde amarillo para todas las celdas del cuerpo */
            padding: 0.75rem; /* Relleno interno */
            vertical-align: top; /* Alineación vertical superior */
            font-weight: 500; /* Peso de la fuente */
}

.creative-table tbody td{
            border: 3px solid #ffbd59; /* Borde amarillo para todas las celdas del cuerpo */
            padding: 0.75rem; /* Relleno interno */
            vertical-align: top; /* Alineación vertical superior */
            font-weight: 500; /* Peso de la fuente */
}

/*.creative-table thead th{
            border: 3px solid #ffbd59; /* Borde amarillo para todas las celdas del cuerpo
            padding: 0.75rem; /* Relleno interno 
            vertical-align: top; /* Alineación vertical superior 
            font-weight: 500; /* Peso de la fuente 
}*/

:root {
    --king-david-blue: #064b9d; /* Azul oscuro para el texto y fondo */
    --king-david-yellow: #ffbd59; /* Amarillo para el recuadro "VISIÓN" */
    --text-color: #ffffff; /* Color de texto dentro de la caja azul */
}
/* Estilo para el contenedor de la visión */
.vision-box {
    background-color: var(--king-david-yellow);
    color: var(--king-david-blue);
    position: relative;
    z-index: 1; /* Asegura que el cuadro amarillo esté por encima del fondo */
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil para el efecto de relieve */
}

.vision-title {
    font-family: ParrafoBold, serif;
    font-size: 3rem;
    color: #064b9d;
}

.vision-title2 {
    font-family: ParrafoBold, serif;
    font-size: 2rem;
    color: #064b9d;
}

/* Estilo para el contenedor del texto de la visión */
.vision-text-box {
    font-family: ParrafoKD, serif;
    font-size: 16px;
    background-color: var(--king-david-blue);
    color: var(--text-color);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Manejo del espaciado y alineación en dispositivos móviles */
@media (max-width: 767px) {
    .custom-row {
        flex-direction: column; /* Apila las columnas verticalmente */
    }

    .vision-box {
        width: 100%; /* El recuadro de la visión ocupa todo el ancho */
        text-align: center;
    }

    .vision-text-box {
        width: 100%; /* La caja de texto ocupa todo el ancho */
    }
}


/* ******************************** */
.body2 {
            background-image: url(../images/main-slider/FONDO\ CKD_4.png); /* Azul más oscuro para el fondo general */
            font-family: 'Inter', sans-serif; /* Fuente 'Inter' para una apariencia limpia */
            display: flex; /* Centrar el contenido vertical y horizontalmente */
            justify-content: center;
            align-items: flex-start; /* Alinea al inicio para que el contenido fluya si es largo */
            min-height: 100vh; /* Ocupa al menos el alto de la ventana */
            padding: 1rem; /* Padding general para evitar que el contenido toque los bordes */
        }

 /* Contenedor principal para el contenido */
        .main-wrapper {
            max-width: 500px; /* Ancho máximo para el diseño similar a la imagen */
            width: 100%; /* Asegura que ocupe el 100% del ancho disponible hasta el max-width */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra sutil para el contenedor principal */
            border-radius: 15px; /* Bordes redondeados para el contenedor principal */
            overflow: hidden; /* Oculta cualquier desbordamiento, especialmente en los bordes redondeados */
        }

        /* Estilo del encabezado superior naranja */
        .header-top {
            font-family: ParrafoBold, serif;
            background-color: #ff8c00; /* Degradado de naranja a naranja claro */
            color: #fff;
            padding: 1rem 1.5rem; /* Relleno superior e inferior */
            text-align: center;
            font-size: 1.8rem; /* Tamaño de fuente más grande para el título */
            font-weight: 700; /* Negrita */
            border-radius: 15px 15px 0 0; /* Solo esquinas superiores redondeadas */
        }

        /* Estilos del área del "cuaderno" */
        .notebook-content {
            background-color: #ffffff; /* Fondo blanco para el contenido principal */
            padding: 2rem 1.5rem; /* Relleno interno del cuaderno */
            border-radius: 0 0 15px 15px; /* Solo esquinas inferiores redondeadas */
            position: relative; /* Necesario para posicionar los "anillos" */
        }

        /* Anillos decorativos del cuaderno (simulados) */
        .notebook-rings-deco {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 25px; /* Altura de la sección de los anillos */
            display: flex;
            justify-content: space-around; /* Distribuye los anillos uniformemente */
            align-items: center;
            background-color: #f0f0f0; /* Fondo gris claro para la zona de los anillos */
            padding: 0 1rem;
            z-index: 1; /* Asegura que los anillos estén por encima de otros elementos si se superponen */
            border-bottom: 1px solid #e0e0e0; /* Pequeña línea divisoria */
            border-radius: 0 0 5px 5px; /* Bordes redondeados en la parte inferior de los anillos */
        }

        .notebook-rings-deco .ring-item {
            width: 10px;
            height: 20px;
            background-color: #064b9d; /* Color de los anillos */
            border-radius: 5px; /* Forma de píldora para los anillos */
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); /* Sombra interna para dar volumen */
        }

        /* Contenido dentro del cuaderno */
        .notebook-inner {
            margin-top: 2rem; /* Espacio para los anillos simulados */
        }

        /* Título "Reingreso" */
        .reingreso-title {
            font-family: ParrafoBold, serif;
            color: #000; /* Color naranja */
            font-size: 2rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .reingreso-title svg {
            width: 30px;
            height: 30px;
            margin-right: 10px;
            color: #ff8c00; /* Color del SVG */
        }

        /* Descripción del reingreso */
        .reingreso-description {
            font-family: ParrafoKD, serif;
            font-size: 0.95rem;
            color: #000; /* Texto gris */
            text-align: justify;
            margin-bottom: 2rem;
            line-height: 1.5; /* Interlineado para mejor legibilidad */
        }

        /* Título "Pasos a Seguir" */
        .steps-header {
            font-family: ParrafoBold, serif;
            font-size: 1.2rem;
            font-weight: 700;
            color: #000; /* Texto oscuro */
            margin-bottom: 1.5rem;
        }

        /* Lista de pasos */
        .steps-list {
            list-style: none; /* Quitar viñetas predeterminadas */
            padding: 0;
        }

        .step-item {
            display: flex; /* Alineación del número y el texto */
            align-items: flex-start; /* Alinea el número con la parte superior del texto */
            margin-bottom: 1.5rem;
            border-bottom: 1px dashed #e0e0e0; /* Línea discontinua */
            padding-bottom: 1.5rem;
        }

        .step-item:last-child {
            border-bottom: none; /* Elimina la línea del último paso */
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .step-number {
            font-size: 3rem; /* Número grande */
            font-weight: 700;
            color: #064b9d; /* Azul del tema */
            margin-right: 1rem;
            line-height: 1; /* Ajusta la altura de línea para el número */
        }

        .step-text {
            font-family: ParrafoKD, serif;
            font-size: 0.95rem;
            color: #000; /* Texto oscuro para los pasos */
            line-height: 1.4; /* Interlineado para el texto del paso */
            flex-grow: 1; /* Permite que el texto ocupe el espacio restante */
        }

        /* Botón "¡Listo!" */
        .ready-button {
            background-color: #ffbd59; /* Naranja */
            color: white;
            font-size: 1.6rem;
            font-weight: 700;
            padding: 0.8rem 2rem;
            border-radius: 50px; /* Muy redondeado */
            display: inline-block; /* Para que el padding funcione bien */
            margin-top: 2rem;
            text-decoration: none; /* Quitar subrayado si es un enlace */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para resaltar */
            transition: transform 0.2s; /* Pequeña animación al interactuar */
        }

        .ready-button:hover {
            transform: translateY(-2px); /* Efecto al pasar el ratón */
            color: white; /* Mantener color blanco en hover */
        }

        /* Mensaje final */
        .final-message {
            font-family: ParrafoKD, serif;
            background-color: #ff8c00; /* Naranja */
            color: white;
            padding: 1rem 1.5rem;
            font-size: 1rem;
            font-weight: 700;
            text-align: center;
            border-radius: 10px; /* Bordes redondeados */
            margin-top: 1.5rem;
            line-height: 1.5;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
        }

        /* Media queries para ajustes finos en pantallas pequeñas */
        @media (max-width: 576px) {
            .header-top {
                font-size: 1.4rem; /* Reducir el tamaño de la fuente en móviles */
                padding: 1rem;
            }
            .notebook-content {
                padding: 1.5rem 1rem;
            }
            .reingreso-title {
                font-size: 1.6rem;
            }
            .reingreso-description, .step-text, .final-message {
                font-size: 0.9rem;
            }
            .step-number {
                font-size: 2rem;
                margin-right: 0.8rem;
            }
            .ready-button {
                font-size: 1.4rem;
                padding: 0.7rem 1.8rem;
            }
        }