﻿.contenedor-principal {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 1fr;
    gap: 20px;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

.columna {
    width: 100%;
}

.centro-izq, .centro-der {
    display: flex;
    justify-content: center;
    /* FUERZA el centrado vertical basado en la fila del grid */
    align-self: center;
    height: auto;
}

    .centro-izq > *,
    .centro-der > * {
        width: 100%;
    }

/* RESPONSIVE */
@media (max-width: 1200px) {
    .contenedor-principal {
        grid-template-columns: 1fr 3fr 3fr 1fr;
    }
}

@media (max-width: 992px) {
    /*.contenedor-principal {
        grid-template-columns: 1fr 4fr 1fr;
    }*/
    .contenedor-principal {
        display: flex;
        flex-direction: column;
    }

    .vacia {
        display: none;
    }

    .centro-der {
        order: 1;
    }

    .centro-izq {
        order: 2;
    }
    /*.centro-der {
        grid-column: 2;
        margin-top: 20px;
    }*/
}

@media (max-width: 768px) {
    .contenedor-principal {
        display: flex;
        flex-direction: column;
    }

    .vacia {
        display: none;
    }

    .centro-der {
        order: 1;
    }

    .centro-izq {
        order: 2;
    }
}


/*derecha*/
/* Proceso de admisión derecha */
.process-container {
    width: 100%;
    padding: 20px;
    border-left: 4px solid #0066FF;
}

.process-section {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.process-step {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    border-radius: 10px;
    background: #f5f8ff;
    transition: all 0.3s ease;
    text-align: left; /* Alinea todo el contenido a la izquierda */
}

    .process-step:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    }

.step-number {
    min-width: 35px;
    height: 35px;
    background: #a9c2ec;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
}

.process-step.active .step-number {
    background: #007aff;
}

.step-content {
    text-align: left; /* Asegura que los textos estén alineados a la izquierda */
}

    .step-content h4 {
        margin: 0 0 8px 0;
        color: #2085DE;
    }

    .step-content ul {
        margin: 0;
        padding-left: 18px;
        font-size: 14px;
        list-style-position: inside; /* Opcional: los bullets dentro del padding */
    }

    .step-content li {
        margin-bottom: 6px;
    }
/*contactanos*/
.contactanos {
    max-width: 960px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #153875;
    text-align: center;
}

    .contactanos h2 {
        font-weight: 700;
        font-size: 1.8rem;
        margin-bottom: 16px;
        border-bottom: 3px solid #153875;
        display: inline-block;
        padding-bottom: 6px;
    }

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 20px;
    margin-top: 30px;
}

.contact-item {
    background: #f9fafc;
    padding: 20px;
    border-radius: 6px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 8px rgb(21 56 117 / 0.1);
}

.icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(23%) sepia(63%) saturate(2273%) hue-rotate(190deg) brightness(93%) contrast(85%);
}

.phone-icon {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23153875" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.62 10.79a15.53 15.53 0 006.59 6.59l2.2-2.2a1 1 0 011.11-.21 11.36 11.36 0 003.55.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.55 1 1 0 01-.21 1.11z"/></svg>');
}

.email-icon {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23153875" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 2l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z"/></svg>');
}

/*.chat-icon {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23153875" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.52 3.48a11.28 11.28 0 00-15.92 0 11.26 11.26 0 00-3.27 7.97 11.25 11.25 0 001.8 6.02L2 22l5.6-1.37a11.21 11.21 0 005.98 1.76 11.25 11.25 0 007.94-3.28 11.26 11.26 0 000-15.93zm-8.14 13.9a6.44 6.44 0 01-3.46-1l-.25-.15-3.23.79.85-3.14-.16-.26a6.35 6.35 0 011-3.5 6.51 6.51 0 014.13-3.3 6.47 6.47 0 016.65 1.53 6.46 6.46 0 01-3.07 10.44z"/></svg>');
}*/

.chat-icon {
    background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> <path fill="%23153875" d="M16 .4C7.4.4.4 7.4.4 16c0 2.8.7 5.4 2.1 7.8L.4 31.6l8-2.1c2.3 1.2 4.8 1.8 7.6 1.8 8.6 0 15.6-7 15.6-15.6S24.6.4 16 .4zm0 28.7c-2.4 0-4.8-.6-6.8-1.8l-.5-.3-4.7 1.2 1.3-4.6-.3-.5c-1.2-2-1.9-4.3-1.9-6.8C3.1 8.4 8.4 3.1 16 3.1s12.9 5.3 12.9 12.9S23.6 29.1 16 29.1zm7.1-9.7c-.4-.2-2.4-1.2-2.7-1.3-.4-.1-.6-.2-.9.2-.3.4-1 1.3-1.3 1.6-.2.2-.4.3-.8.1-2.3-1.2-3.8-2.2-5.3-5-.4-.6.4-.6 1.2-2.1.1-.2.1-.4 0-.6-.1-.2-.9-2.1-1.3-2.9-.4-.9-.8-.7-1.1-.7h-1c-.3 0-.6.1-.9.4-.3.4-1.2 1.2-1.2 3 0 1.8 1.3 3.5 1.5 3.8.2.3 2.6 4 6.4 5.6 3.8 1.6 3.8 1 4.5.9.7-.1 2.4-1 2.7-1.9.3-.9.3-1.7.2-1.9-.1-.2-.4-.3-.8-.5z"/> </svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 36px;
    height: 36px;
}

.contact-item strong {
    font-weight: 700;
    font-size: 0.95rem;
    color: #153875;
}

.contact-item a {
    color: #153875;
    text-decoration: underline;
}

    .contact-item a:hover,
    .contact-item a:focus {
        color: #0b2a66;
    }

/*boton redondeado*/
.btn-redondo {
    border-radius: 5px !important;
    background-color: #334484 !important; /* BackColor */
    color: #ffffff !important; /* ForeColor */
    font-size: medium !important; /* Font-Size */
    padding: 1px 3px !important;
    border: none !important;
    transition: all 0.3s ease;
    width: 100%;
    height: 50px;
}


/* ===== Responsive ===== */
/* Definición de textos para escritorio */
.tab-adm-carreras .dxtc-link:after {
    content: "Carreras";
}

.tab-adm-maestrias .dxtc-link:after {
    content: "Maestrías";
}

.tab-homologaciones .dxtc-link:after {
    content: "Homologaciones(Continuidad de Estudios)";
}

.tab-profesionalizacion .dxtc-link:after {
    content: "Profesionalización";
}

.tab-tecnologias .dxtc-link:after {
    content: "Tecnologías";
}

/* Cuando la pantalla sea pequeña (ej: móvil) */
@media (max-width: 768px) {
    /* Cambiamos el texto por las versiones cortas */
    .tab-adm-carreras .dxtc-link:after {
        content: "Carreras";
    }

    .tab-adm-maestrias .dxtc-link:after {
        content: "Maestrías";
    }

    .tab-homologaciones .dxtc-link:after {
        content: "Homolog.";
    }

    .tab-profesionalizacion .dxtc-link:after {
        content: "Prof.";
    }

    .tab-tecnologias .dxtc-link:after {
        content: "Tnlg.";
    }

    /* Ajuste visual opcional */
    .tab-personalizado .dxtc-link {
        font-size: 11px !important;
        font-weight: bold;
    }
}


/*check de Terminos y condiciones*/
.terminos-wrapper {
    width: 100%;
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    padding: 15px 0;
}

.terminos-content {
    display: flex;
    align-items: center; /* Centra verticalmente los elementos (checkbox y texto) */
    flex-wrap: wrap; /* Permite que baje en pantallas muy pequeñas si es necesario */
    justify-content: center;
    gap: 5px; /* Espacio exacto entre el checkbox, el texto y el link */
}

.texto-normal {
    font-size: 13px;
    color: #333;
    white-space: nowrap; /* Evita que este texto se parta a la mitad */
}

.link-terminos {
    font-size: 13px;
    color: #0066FF;
    text-decoration: underline;
    font-weight: bold;
    white-space: nowrap; /* Mantiene el link unido */
}

/* Ajuste para celulares muy pequeños */
@media (max-width: 480px) {
    .texto-normal, .link-terminos {
        font-size: 11px; /* Reduce un poco la letra para que quepa en una línea */
    }
}
