Gecko [ www.utparral.edu.mx ]

Name	Size	Permission
administracion	[ DIR ]	drwxrwxr-x
agricultura	[ DIR ]	drwxrwxr-x
animsition-master	[ DIR ]	drwxrwxr-x
asm	[ DIR ]	drwxrwxr-x
becas	[ DIR ]	drwxrwxr-x
carousel	[ DIR ]	drwxrwxr-x
carpeta	[ DIR ]	drwxrwxr-x
ccs_2025	[ DIR ]	drwxrwxr-x
contraloria	[ DIR ]	drwxrwxr-x
contraloriares	[ DIR ]	drwxrwxr-x
css	[ DIR ]	drwxrwxr-x
dashboard	[ DIR ]	drwxrwxr-x
documentos	[ DIR ]	drwxrwxr-x
Documentos-actualizados	[ DIR ]	drwxrwxr-x
DOCUMENTOS_BECAS	[ DIR ]	drwxrwxr-x
egresados	[ DIR ]	drwxrwxr-x
engine1	[ DIR ]	drwxrwxr-x
estadias	[ DIR ]	drwxrwxr-x
examen	[ DIR ]	drwxrwxr-x
firma	[ DIR ]	drwxrwxr-x
firmac	[ DIR ]	drwxrwxr-x
font	[ DIR ]	drwxrwxr-x
fonts-actualizado	[ DIR ]	drwxrwxr-x
graduacion	[ DIR ]	drwxrwxr-x
guias	[ DIR ]	drwxrwxr-x
html3	[ DIR ]	drwxrwxr-x
img	[ DIR ]	drwxrwxr-x
img_2025	[ DIR ]	drwxrwxr-x
img-actualizado	[ DIR ]	drwxrwxr-x
img_diplomado	[ DIR ]	drwxrwxr-x
imprimir	[ DIR ]	drwxrwxr-x
industrial	[ DIR ]	drwxrwxr-x
intro	[ DIR ]	drwxrwxr-x
js	[ DIR ]	drwxrwxr-x
js-actualizado	[ DIR ]	drwxrwxr-x
js-nuevos	[ DIR ]	drwxrwxr-x
logos	[ DIR ]	drwxrwxr-x
logotipos	[ DIR ]	drwxrwxr-x
mailer	[ DIR ]	drwxrwxr-x
mantenimiento	[ DIR ]	drwxrwxr-x
minas	[ DIR ]	drwxrwxr-x
mineria	[ DIR ]	drwxrwxr-x
modales	[ DIR ]	drwxrwxr-x
modelout	[ DIR ]	drwxrwxr-x
noticias	[ DIR ]	drwxrwxr-x
NUEVO_DISEÑO	[ DIR ]	drwxrwxr-x
obligacion	[ DIR ]	drwxrwxr-x
obligaciones	[ DIR ]	drwxrwxr-x
otros	[ DIR ]	drwxrwxr-x
PFCE	[ DIR ]	drwxrwxr-x
phpMyAdmin	[ DIR ]	drwxrwxr-x
placa	[ DIR ]	drwxrwxr-x
ProExEs	[ DIR ]	drwxrwxr-x
promocion	[ DIR ]	drwxrwxr-x
publicaciones	[ DIR ]	drwxrwxr-x
recibos	[ DIR ]	drwxrwxr-x
recibos res	[ DIR ]	drwxrwxr-x
registro	[ DIR ]	drwxrwxr-x
registros_utp2	[ DIR ]	drwxrwxr-x
Reglamentos_UTP	[ DIR ]	drwxrwxr-x
scss	[ DIR ]	drwxrwxr-x
SISET	[ DIR ]	drwxrwxr-x
sistemaescolar	[ DIR ]	drwxrwxr-x
STR	[ DIR ]	drwxrwxr-x
tecnologias	[ DIR ]	drwxrwxr-x
TRANSPARENCIA	[ DIR ]	drwxrwxr-x
transparente	[ DIR ]	drwxrwxr-x
tripticos tamao de impresion 2023	[ DIR ]	drwxrwxr-x
ut3	[ DIR ]	drwxrwxr-x
UTPRioBalleza	[ DIR ]	drwxrwxr-x
videos	[ DIR ]	drwxrwxr-x
vinculacion	[ DIR ]	drwxrwxr-x
webalizer	[ DIR ]	drwxr-xr-x
wowslider	[ DIR ]	drwxrwxr-x
1.php	143.87 KB	-rwxrwxr-x
academico.php	8.09 KB	-rwxrwxr-x
administracion_perfil.php	22.87 KB	-rwxrwxr-x
adrivz.php	28.82 KB	-rwxrwxr-x
agricultura_perfil.php	23.58 KB	-rwxrwxr-x
anuncios_UTP.php	5.26 KB	-rwxrwxr-x
applications.html	3.52 KB	-rw-rwxr--
avisos.php	3.07 KB	-rwxrwxr-x
beca.php	3.6 KB	-rwxrwxr-x
cabecera.html	8.1 KB	-rwxrwxr-x
comite_etica.php	2.79 KB	-rwxrwxr-x
conexion.php	380 B	-rwxrwxr-x
conf.php	517 B	-rwxrwxr-x
consulta.php	1.17 KB	-rwxrwxr-x
contador.php	1.26 KB	-rwxrwxr-x
contraloria.php	155.25 KB	-rwxrwxr-x
convocatorias.php	5.78 KB	-rwxrwxr-x
diplomado.php	11.37 KB	-rwxrwxr-x
directorio.php	10.43 KB	-rwxrwxr-x
entrega_fichas_2023.php	9.24 KB	-rwxrwxr-x
evaluacion.php	15.24 KB	-rwxrwxr-x
firma2.php	1.47 KB	-rwxrwxr-x
footer.html	5.37 KB	-rwxrwxr-x
footer.php	4.76 KB	-rwxrwxr-x
futer.php	2.15 KB	-rwxrwxr-x
imagenes.sql	1.78 KB	-rwxrwxr-x
inc.php	30.99 KB	-rwxrwxr-x
index.php	32.11 KB	-rwxrwxr-x
industrial_perfil.php	22.57 KB	-rwxrwxr-x
init.php	58.83 KB	-rwxrwxr-x
instalaciones.php	13.08 KB	-rw-rwxr--
integra.php	798 B	-rwxrwxr-x
iso.php	6.52 KB	-rwxrwxr-x
licitacion_publica.php	2.69 KB	-rwxrwxr-x
logotipos.php	4.54 KB	-rwxrwxr-x
m455.php	3.85 KB	-rwxrwxr-x
mantenimiento_perfil.php	21.08 KB	-rwxrwxr-x
menu2.html	11.79 KB	-rwxrwxr-x
menu.html	12.16 KB	-rwxrwxr-x
menumas.php	5.12 KB	-rwxrwxr-x
mineria_perfil.php	22.29 KB	-rwxrwxr-x
modalnoticia.php	3.3 KB	-rwxrwxr-x
mostrar.js	107 B	-rwxrwxr-x
narbar.php	5.11 KB	-rwxrwxr-x
noticias.php	3.51 KB	-rwxrwxr-x
oferta2.css	1.31 KB	-rwxrwxr-x
oferta2.php	47.16 KB	-rwxrwxr-x
ofertaAcademicas.php	21.12 KB	-rwxrwxr-x
ofertacademica.php	26.41 KB	-rwxrwxr-x
oferta.old.php	48.5 KB	-rwxrwxr-x
oferta.php	28.96 KB	-rwxrwxr-x
o.htm	7.96 KB	-rwxrwxr-x
phpinfo.php	233 B	-rwxrwxr-x
POA.php	93.44 KB	-rwxrwxr-x
p.php	2.75 KB	-rwxrwxr-x
recorrido.php	1.68 KB	-rwxrwxr-x
reglamentos.php	19.39 KB	-rwxrwxr-x
reset.php	739 B	-rwxrwxr-x
sistema.php	10.72 KB	-rwxrwxr-x
sitemap.xml	26.39 KB	-rwxrwxr-x
slider2.html	1.47 KB	-rwxrwxr-x
slider2-iframe.html	244 B	-rwxrwxr-x
slider.html	2.12 KB	-rwxrwxr-x
slider.php	1.72 KB	-rwxrwxr-x
smtp.php	2.41 KB	-rwxrwxr-x
style.php	13.04 KB	-rwxrwxr-x
sym.php	18.77 KB	-rwxrwxr-x
tablaDir.php	2.87 KB	-rwxrwxr-x
tablet2.php	14.46 KB	-rwxrwxr-x
tableta.php	15.12 KB	-rwxrwxr-x
tecnologias_perfil.php	22.3 KB	-rwxrwxr-x
t.php	137 B	-rwxrwxr-x
url.php	292 B	-rwxrwxr-x
vida2.php	15.31 KB	-rwxrwxr-x
vinculacion.php	13.39 KB	-rwxrwxr-x
x.php	798 B	-rwxrwxr-x

Code Editor : index.php

<?php include_once 'init.php'; ?>
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Universidad Tecnológica de Parral</title>

<link rel="icon" type="image/png" href="img/logo%20utp%20trazos%20fondos%20obscuros.png">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">

<style>
/* ================= VARIABLES ================= */
:root{
    --verde: #0d4d27;
    --dorado: #c9a227;
    --gris-claro: #f2f2f2;
    --texto: #333;
    --card-shadow: 0 8px 24px rgba(13,77,39,0.06);
}

/* ====== Reset y tipografía ====== */
*{
    box-sizing: border-box;
}
html,body{
    height:100%;
    margin:0;
    padding:0;
    background: var(--gris-claro) !important;
    font-family: "Helvetica Neue", Arial, sans-serif;
    color: var(--texto);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }

/* ===== Contenedor Global ===== */
.container{
    max-width: 1300px;
    margin:auto;
    padding: 0 15px;
}

/* ================= CARRUSEL ================ */
.carousel-wrap{
    position:relative;
    margin: 1.5rem auto;
    border-radius:12px;
    overflow:hidden;
    box-shadow: var(--card-shadow);
}

#utpCarousel .carousel-item img{
    width:100%;
    height:55vh;
    object-fit:cover;
}

@media(max-width:992px){
    #utpCarousel .carousel-item img{ height:40vh; }
}
@media(max-width:576px){
    #utpCarousel .carousel-item img{ height:28vh; }
}

/* dots */
.carousel-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    padding:12px 6px;
    background:rgba(0,0,0,0.03);
}
.carousel-dots .dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:rgba(0,0,0,0.25);
    cursor:pointer;
    transition: .18s ease;
    border:2px solid rgba(255,255,255,0.25);
}
.carousel-dots .dot.active{
    background:var(--dorado);
    transform:scale(1.15);
}

/* prev/next */
.carousel-control-prev,
.carousel-control-next{
    width:48px;
    height:48px;
    border-radius:50%;
    background:rgba(0,0,0,0.35);
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
}
.carousel-control-prev:hover,
.carousel-control-next:hover{
    background:rgba(0,0,0,0.55);
}

/* ================== SECCIÓN CONÓCENOS ================== */
#conocenos{
    padding:40px 20px;
    background:white;
    margin-top:1rem;
    border-radius:12px;
    box-shadow:var(--card-shadow);
}

.conocenos-container{
    display:flex;
    flex-wrap:wrap;
    gap:30px;
    align-items:flex-start;
}

.conocenos-left{ flex:1 1 600px; min-width:300px; }
.conocenos-right{ flex:0 0 360px; min-width:280px; }

#conocenos h2{
    color:var(--verde);
    font-size:1.9rem;
    margin-bottom:12px;
    font-weight:700;
}

/* acordeón */
.accordion-container{ display:flex; flex-direction:column; gap:14px; }

.accordion-item{
    background:white;
    border-left:6px solid var(--dorado);
    padding:14px;
    border-radius:8px;
    box-shadow:0 6px 18px rgba(0,0,0,0.04);
}

.accordion-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:1.05rem;
    font-weight:700;
    background:none;
    border:none;
    padding:0;
    width:100%;
}

.accordion-content{
    display:none;
    margin-top:10px;
    font-size:0.95rem;
    line-height:1.5;
}
.accordion-content.show{ display:block; }

.final-text{
    display:block;
    margin-top:8px;
    font-size:0.9rem;
    color:#666;
}

/* ================= VIDEO ================= */
.video-container{
    border-radius:12px;
    overflow:hidden;
    box-shadow:var(--card-shadow);
}

/* ================= TARJETAS ================= */
.card-hover{
    transition:.3s ease;
    border-radius:12px;
    overflow:hidden;
}
.card-hover:hover{
    transform:translateY(-6px);
    box-shadow:0 14px 40px rgba(12,40,25,0.08);
}

.card-img-top{
    width:100%;
    height:200px;
    object-fit:cover;
}
@media(max-width:576px){
    .card-img-top{ height:150px; }
}

/* botón institucional */
.btn-utp{
    background:var(--verde);
    color:white;
    padding:10px 12px;
    font-weight:700;
    border-radius:8px;
    border:none;
}
.btn-utp:hover{
    background:#0a3f27;
}

/* ================= ACCESOS RÁPIDOS ================= */

#accesos-rapidos{
    padding:40px 0;
    background: var(--gris-claro);
}

/* Título */
.titulo-bravo{
    text-align:center;
    margin-bottom:25px;
    font-size:28px;
    font-weight:bold;
    color:var(--texto);
}

/* Contenedor */
.button-container{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:35px;
    margin:auto;
}

/* Caja del botón */
.button-with-text{
    text-align:center;
    width:120px;
}

/* Botón circular */
.circle-button{
    width:90px;
    height:90px;
    background:white;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:0 4px 14px rgba(0,0,0,0.15);
    transition:.3s ease;
}
.circle-button img{
    width:55px;
    height:55px;
}
.circle-button:hover{
    transform:scale(1.15);
    box-shadow:0 6px 20px rgba(0,0,0,0.25);
}

/* Texto debajo */
.button-with-text p{
    font-size:14px;
    font-weight:bold;
    margin-top:8px;
}

/* RESPONSIVO general */
@media(max-width:600px){
    .circle-button{
        width:75px;
        height:75px;
    }
    .circle-button img{
        width:40px;
        height:40px;
    }
    .button-with-text{
        width:100px;
    }
}       
</style>
</head>
<header>
    <?php 
        include 'cabecera.html';
    ?>
</header>
<body>
<main class="container">
    
    <section class="carousel-wrap mt-4">
        <div id="utpCarousel" class="carousel slide" data-bs-ride="false" aria-label="Carrusel de imágenes UTP">
            <div class="carousel-inner">

</div>

<button class="carousel-control-prev" type="button" data-bs-target="#utpCarousel" data-bs-slide="prev" aria-label="Anterior">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#utpCarousel" data-bs-slide="next" aria-label="Siguiente">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </button>
        </div>

<div class="carousel-dots" id="carouselDots" aria-hidden="false" aria-label="Puntos del carrusel"></div>
    </section>

<section id="conocenos" aria-labelledby="conocenos-titulo" class="mt-4">
      <div class="conocenos-container">
        
    <section id="accesos-rapidos">
        <h2 class="titulo-bravo">ACCESOS RÁPIDOS</h2>

<div class="button-with-text">
                <a href="directorio.php" class="circle-button" aria-label="Directorio">
                    <img src="img/botones/directorio-telefonico.png" alt="Directorio">
                </a>
                <p>DIRECTORIO</p>
            </div>

<div class="button-with-text">
                <a href="img/titulacion_2025.jpeg" target="_blank" class="circle-button" aria-label="Titulación">
                    <img src="img/botones/la-licenciatura.png" alt="Titulación">
                </a>
                <p>TITULACIÓN</p>
            </div>

<div class="button-with-text">
                <a href="http://biblioteca.utparral.edu.mx/pinakes500/" target="_blank" class="circle-button" aria-label="Biblioteca en línea">
                    <img src="img/botones/biblioteca-en-linea.png" alt="Biblioteca">
                </a>
                <p>BIBLIOGRAFÍA DIGITAL</p>
            </div>

<div class="button-with-text">
                <a href="UTPRioBalleza" target="_blank" class="circle-button" aria-label="UTP Rio Balleza">
                    <img src="img/logo_cuadro.png" alt="UTP Rio Balleza">
                </a>
                <p>UTP Rio Balleza</p>
            </div>

<div class="button-with-text">
                <a href="logotipos.php" class="circle-button" aria-label="Descargables">
                    <img src="img/botones/descarga-de-imagen.png" alt="Descargables">
                </a>
                <p>DESCARGABLES</p>
            </div>

<div class="button-with-text">
                <a href="https://docs.google.com/forms/d/e/1FAIpQLSf_8-fZDE3w5Ws22CSS4jV6X32WTKVXKTpL2l4k_ogIkJUlwA/viewform"
                class="circle-button" aria-label="Buzón">
                    <img src="img/iconos/buzon.png" alt="Buzón">
                </a>
                <p>BUZÓN</p>
            </div>

<div class="button-with-text">
                <a href="https://wa.me/526272862458?text=Bienvenido a la Casa de los Lobos Grises, Estamos para Ayudarte"
                title="WHATSAPP" target="_blank" class="circle-button" aria-label="WhatsApp">
                    <img src="img/botones/whatsapp.png" alt="WhatsApp">
                </a>
                <p>CONTACTANOS</p>
            </div>

<div class="button-with-text">
                <a href="documentos/vinculacion/CALENDARIO 2025_2026.jpeg" target="_blank" class="circle-button" aria-label="Calendario escolar">
                    <img src="img/botones/calendario_2023.png" alt="Calendario escolar">
                </a>
                <p>CALENDARIO ESCOLAR</p>
            </div>

<div class="button-with-text">
                <a href="documentos/vinculacion/ESTADIAS_SEP_DIC_2025.jpeg" target="_blank" class="circle-button" aria-label="Calendario estadías">
                    <img src="img/botones/calendario_2023.png" alt="Calendario Estadias">
                </a>
                <p>CALENDARIO ESTADIAS</p>
            </div>

<div class="button-with-text">
                <a href="documentos/vinculacion/HORARIO EXTRAESCOLARES.pdf" target="_blank" class="circle-button" aria-label="Calendario escolar">
                    <img src="img/botones/calendario_2023.png" alt="Calendario escolar">
                </a>
                <p>CALENDARIO EXTRA ESCOLARES</p>
            </div>

</div>
    </section>
        
        <div class="conocenos-left">
          <h2 id="conocenos-titulo">Conócenos</h2>

<div class="accordion-item">
              <button class="accordion-header" aria-expanded="false" data-target="#historia-content">
                <span class="title"><i class="fa-solid fa-landmark" aria-hidden="true"></i> Historia de Nuestra</span>
                <i class="fas fa-plus accordion-icon" aria-hidden="true"></i>
              </button>
              <div class="accordion-content" id="historia-content">
                <p>Con base en la necesidad de oportunidades de Estudios de Nivel Superior en la región sur del Estado de Chihuahua, por disposición del Gobierno Federal y del Gobierno del Estado se firmó el Convenio de Coordinación para la Creación, Operación y Apoyo financiero de la Universidad Tecnológica de Parral lo que dio pie al nacimiento de esta institución educativa.
    Esta nueva Universidad arrancó sus actividades el 05 de septiembre del 2011 con un total de 108 alumnos inscritos en las carreras de Técnico Superior Universitario en Mantenimiento a Maquinaria Pesada, Tecnologías de la Información y la Comunicación y Procesos Industriales Área Manufactura y fue hasta un 24 de diciembre del 2011 cuando se publicó de manera oficial el Decreto de Ley de la Universidad Tecnológica de Parral.
    Los estudiantes que conformaron este primer ciclo educativo eran mujeres en un 30 por ciento y varones en un 70 por ciento, la mayoría de ellos originarios de la Ciudad de Parral y de algunos municipios aledaños cómo: San Francisco del Oro, Santa Bárbara, Guadalupe y Calvo, Balleza, Villa Matamoros y del municipio de Villa Ocampo, en el estado de Durango.
    Para el periodo escolar 2012 – 2013 se aprobó la Unidad Académica Río Balleza situada en el Municipio de Balleza ofertando dos carreras: Técnico Superior Universitario en Agricultura Sustentable y en Administración y Evaluación de Proyectos. A pocos meses de su consolidación como escuela universitaria, se colocó la primera piedra de la construcción de los primeros 3 edificios con los que daría inicio, ubicados en un amplio terreno en la Ave. Gral. Jesús Lozoya Solis Km. 0.937, lugar que fue ocupado por todo el personal y la comunidad estudiantil el 04 de febrero de año 2014, espacio en el que hoy ya se cuentan con 4 edificios.
    Un acto emblemático en la historia de esta Universidad fue la autorización de la continuación de estudios en nivel ingeniería con la cual desde el año 2013 esta casa de estudios tiene la factibilidad de titular a ingenieros e ingenieras.</p>
              </div>
            </div>

<div class="accordion-item">
              <button class="accordion-header" aria-expanded="false" data-target="#politica-content">
                <span class="title"><i class="fa-solid fa-certificate" aria-hidden="true"></i> Política de Calidad</span>
                <i class="fas fa-plus accordion-icon" aria-hidden="true"></i>
              </button>
              <div class="accordion-content" id="politica-content">
                <em>ISO 9001:2015 e ISO 21001:2018</em>
                <p>En la Universidad Tecnológica de Parral estamos comprometidos a proporcionar una educación integral con enfoque tecnológico, gestionando la propiedad intelectual y formando profesionistas competitivos de acuerdo a los requerimientos pertinentes, que logren la satisfacción del estudiante y todas las partes interesadas considerando acciones de responsabilidad social y mejora continua de nuestro Sistema de Gestión Integrado.</p>
                <span class="final-text">Es-01-01 : R2;110321</span>
              </div>
            </div>

<div class="accordion-item">
              <button class="accordion-header" aria-expanded="false" data-target="#mision-content">
                <span class="title"><i class="fa-solid fa-bullseye" aria-hidden="true"></i> Misión</span>
                <i class="fas fa-plus accordion-icon" aria-hidden="true"></i>
              </button>
              <div class="accordion-content" id="mision-content">
                <em>ISO 9001:2015 e ISO 21001:2018</em>
                <p>Formar profesionistas altamente capacitados y competitivos con actitudes y conocimientos científicos y tecnológicos, mediante programas educativos acreditados en los niveles de Técnico Superior Universitario y Licenciatura bajo el modelo de competencias profesionales y una mejora continua que contribuya responsablemente a la solución de problemas de la sociedad.</p>
                <span class="final-text">Es-01-02 : R2;110321</span>
              </div>
            </div>

<div class="accordion-item">
              <button class="accordion-header" aria-expanded="false" data-target="#vision-content">
                <span class="title"><i class="fa-solid fa-eye" aria-hidden="true"></i> Visión</span>
                <i class="fas fa-plus accordion-icon" aria-hidden="true"></i>
              </button>
              <div class="accordion-content" id="vision-content">
                <em>ISO 9001:2015 e ISO 21001:2018</em>
                <p>“Iremos más allá…” de ser, una institución de educación superior líder en la región, reconocida por la calidad en sus programas educativos y en la capacidad adquirida de sus egresados, para dar respuesta pertinente a las necesidades de los sectores productivos; con un enfoque innovador, sustentable, social y humano.</p>
                <span class="final-text">Es-01-03 : R2;110321</span>
              </div>
            </div>

</div>
        </div>

<div class="conocenos-right">
          <div class="fb-section">
            <h2>Publicaciones +</h2>

</div>
    </section>

<div class="contenido-principal mt-4">
        <div class="video-container ratio ratio-16x9 shadow-sm rounded">
            <video autoplay loop muted playsinline>
                <source src="videos/UTP_VIDEO.mp4" type="video/mp4">
                Tu navegador no soporta el elemento de video.
            </video>
        </div>
    </div>

<section class="mt-5 mb-5">
        <h2 class="text-center fw-bold mb-4" style="color:var(--verde);">Modulos de Información</h2>

<div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card shadow h-100 border-0 card-hover">
                    <img src="img_2025/oferta_academica/F78A0545.JPG" class="card-img-top" alt="Oferta Académica">
                    <div class="card-body text-center">
                        <h5 class="card-title">Oferta Académica</h5>
                        <p class="card-text">Consulta nuestras carreras y programas educativos.</p>
                        <a href="promocion/index.html" class="btn btn-utp w-100">Ver más</a>
                    </div>
                </div>
            </div>

<div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card shadow h-100 border-0 card-hover">
                    <img src="img_2025/Vinculacion/428246102_2262017240856327_7098375872465875072_n.jpg" class="card-img-top" alt="Vinculación">
                    <div class="card-body text-center">
                        <h5 class="card-title">Vinculación</h5>
                        <p class="card-text">Alianzas estratégicas con empresas y organismos.</p>
                        <a href="vinculacion.php" class="btn btn-utp w-100">Ver más</a>
                    </div>
                </div>
            </div>

<div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card shadow h-100 border-0 card-hover">
                    <img src="img_2025/index_principales/comunidad_deportiva.jpg" class="card-img-top" alt="Extensión">
                    <div class="card-body text-center">
                        <h5 class="card-title">Extensión Universitaria</h5>
                        <p class="card-text">Eventos, cultura, deporte y participación estudiantil.</p>
                        <a href="instalaciones.php" class="btn btn-utp w-100">Ver más</a>
                    </div>
                </div>
            </div>

<div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card shadow h-100 border-0 card-hover">
                    <img src="img_2025/index_principales/F78A0441.JPG" class="card-img-top" alt="Servicios Escolares">
                    <div class="card-body text-center">
                        <h5 class="card-title">Servicios Escolares</h5>
                        <p class="card-text">Acceso a trámites, documentos y procesos académicos.</p>
                        <a href="academico.php" class="btn btn-utp w-100">Ingresar</a>
                    </div>
                </div>
            </div>

<div class="col-lg-3 col-md-6 col-sm-12">
                <div class="card shadow h-100 border-0 card-hover">
                    <img src="img_2025/index_principales/2doevento.jpg" class="card-img-top" alt="Eventos UTP">
                    <div class="card-body text-center">
                        <h5 class="card-title">Eventos UTP</h5>
                        <p class="card-text">Mantente al día con las actividades de la comunidad.</p>
                        <a href="instalaciones.php" class="btn btn-utp w-100">Ver eventos</a>
                    </div>
                </div>
            </div>

</div>
    </section>

</main>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
    document.querySelectorAll(".accordion-header").forEach(btn => {
        btn.addEventListener("click", () => {
            const targetSelector = btn.getAttribute('data-target');
            const content = document.querySelector(targetSelector);
            const expanded = btn.getAttribute("aria-expanded") === "true";

// Cerrar todos (comportamiento acordeón)
            document.querySelectorAll(".accordion-content").forEach(c => {
                if (c !== content) c.classList.remove('show');
            });
            document.querySelectorAll(".accordion-header").forEach(h => {
                if (h !== btn) h.setAttribute('aria-expanded', 'false');
            });

// Alternar el actual
            if (expanded) {
                btn.setAttribute("aria-expanded", "false");
                content.classList.remove('show');
            } else {
                btn.setAttribute("aria-expanded", "true");
                content.classList.add('show');
            }
        });
    });
</script>

<script>
    (function(){
        // Selecciona elementos del carrusel
        const carousel = document.getElementById('utpCarousel');
        const items = carousel.querySelectorAll('.carousel-item');
        const images = carousel.querySelectorAll('.carousel-item img'); // por compatibilidad con el script original
        const dotsContainer = document.getElementById('carouselDots');
        let currentIndex = 0;
        let intervalHandle = null;
        const AUTO_TIME = 5000; // ms

// Generar dots dinámicamente (clase .dot para que el script original funcione)
        function buildDots(){
            dotsContainer.innerHTML = '';
            items.forEach((it, i) => {
                const dot = document.createElement('button');
                dot.className = 'dot';
                dot.setAttribute('aria-label', 'Ir al slide ' + (i+1));
                dot.dataset.index = i;
                dot.style.border = 'none';
                dot.style.padding = '0';
                dotsContainer.appendChild(dot);
            });
        }

// Actualiza la visualización: activa carousel-item y dot
        function updateActive(oldIndex, newIndex){
            if(items[oldIndex]) items[oldIndex].classList.remove('active');
            if(items[newIndex]) items[newIndex].classList.add('active');

// marcar dots
            const dots = dotsContainer.querySelectorAll('.dot');
            if(dots[oldIndex]) dots[oldIndex].classList.remove('active');
            if(dots[newIndex]) dots[newIndex].classList.add('active');
        }

// Cambiar slide (índice)
        function changeSlide(index){
            if(index < 0) index = items.length - 1;
            if(index >= items.length) index = 0;
            const old = currentIndex;
            currentIndex = index;
            updateActive(old, currentIndex);
        }

// AutoSlide
        function autoSlide(){
            changeSlide((currentIndex + 1) % items.length);
        }

// Iniciar autoplay
        function startAuto(){
            stopAuto();
            intervalHandle = setInterval(autoSlide, AUTO_TIME);
        }
        function stopAuto(){
            if(intervalHandle) { clearInterval(intervalHandle); intervalHandle = null; }
        }

// Eventos en dots (delegación)
        function setupDotClicks(){
            dotsContainer.addEventListener('click', function(e){
                const btn = e.target.closest('.dot');
                if(!btn) return;
                const idx = parseInt(btn.dataset.index, 10);
                changeSlide(idx);
                startAuto();
            });
        }

// Controles prev/next (usar los botones del DOM)
        function setupControls(){
            const prev = carousel.querySelector('.carousel-control-prev');
            const next = carousel.querySelector('.carousel-control-next');
            prev.addEventListener('click', function(e){
                e.preventDefault();
                changeSlide((currentIndex - 1 + items.length) % items.length);
                startAuto();
            });
            next.addEventListener('click', function(e){
                e.preventDefault();
                changeSlide((currentIndex + 1) % items.length);
                startAuto();
            });
        }

// Pausar al hover (UX)
        function setupHoverPause(){
            carousel.addEventListener('mouseenter', stopAuto);
            carousel.addEventListener('mouseleave', startAuto);
        }

// Inicialización
        function init(){
            if(!carousel) return;
            buildDots();
            // marcar primer elemento como activo (ya debería tener active por marcado HTML)
            items.forEach((it,i)=> it.classList.remove('active'));
            items[0] && items[0].classList.add('active');
            const dots = dotsContainer.querySelectorAll('.dot');
            dots.forEach(d=> d.classList.remove('active'));
            if(dots[0]) dots[0].classList.add('active');

setupDotClicks();
            setupControls();
            setupHoverPause();

// Teclas de navegación (izq/der)
            document.addEventListener('keydown', function(e){
                if(e.key === 'ArrowLeft') { changeSlide((currentIndex - 1 + items.length) % items.length); startAuto(); }
                if(e.key === 'ArrowRight') { changeSlide((currentIndex + 1) % items.length); startAuto(); }
            });

// Iniciar autoplay
            startAuto();
        }

// Ejecutar init cuando DOM esté listo
        if(document.readyState === 'loading'){
            document.addEventListener('DOMContentLoaded', init);
        } else {
            init();
        }

// Exponer funciones si se necesitan (debug)
        window.utpCarouselControl = { changeSlide, startAuto, stopAuto };
    })();
</script>
</body>
<footer>
    <?php 
        include 'footer.html';
        //include "x.php"; 
    ?>
</footer>
</html>

${this.title}

Code Editor : index.php