/*==================================================
RESET
==================================================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

/*==================================================
BODY
==================================================*/

body{

font-family:Arial,Helvetica,sans-serif;

background:

linear-gradient(
rgba(0,10,30,.82),
rgba(0,20,50,.88)
),

url("img/central_highway_sunset.jpg");

background-size:cover;
background-position:center;
background-attachment:fixed;

color:white;

min-height:100vh;

overflow-x:hidden;

}

/*==================================================
BOTON REGRESAR
==================================================*/

.boton-regresar{

position:fixed;

top:20px;
left:20px;

padding:14px 24px;

background:

linear-gradient(
90deg,
#0066ff,
#00c8ff
);

color:white;

text-decoration:none;

font-weight:bold;

border-radius:40px;

box-shadow:

0 0 10px #00bfff,
0 0 20px rgba(0,191,255,.4);

transition:.3s;

z-index:9999;

}

.boton-regresar:hover{

transform:scale(1.05);

box-shadow:

0 0 20px #00e1ff,
0 0 40px #00e1ff;

}

/*==================================================
HEADER
==================================================*/

header{

text-align:center;

padding:90px 20px 40px;

}

header h1{

font-size:clamp(2.2rem,6vw,4.5rem);

letter-spacing:3px;

color:#7fe8ff;

text-shadow:

0 0 10px #00bfff,
0 0 25px #00bfff,
0 0 45px #006eff;

}

/*==================================================
DESCRIPCION
==================================================*/

.descripcion{

max-width:1100px;

margin:20px auto;

padding:30px;

background:

rgba(5,25,55,.72);

backdrop-filter:blur(10px);

border-radius:20px;

border:

2px solid rgba(0,191,255,.3);

box-shadow:

0 0 15px rgba(0,180,255,.3);

text-align:center;

}

.descripcion p{

font-size:1.15rem;

line-height:1.9;

}

/*==================================================
ANTECEDENTES
==================================================*/

.antecedentes{

max-width:1200px;

margin:60px auto;

padding:20px;

}

.antecedentes h2{

text-align:center;

font-size:2.2rem;

margin-bottom:30px;

color:#8ceeff;

text-shadow:

0 0 10px #00bfff;

}

/*==================================================
DETAILS
==================================================*/

details{

margin-bottom:20px;

background:

rgba(0,25,60,.70);

border:

2px solid rgba(0,191,255,.25);

border-radius:18px;

overflow:hidden;

box-shadow:

0 0 10px rgba(0,191,255,.2);

transition:.3s;

}

details:hover{

box-shadow:

0 0 20px rgba(0,191,255,.45);

}

summary{

padding:20px;

font-size:1.2rem;

font-weight:bold;

cursor:pointer;

list-style:none;

background:

linear-gradient(
90deg,
rgba(0,90,180,.4),
rgba(0,160,255,.2)
);

}

summary::-webkit-details-marker{

display:none;

}

summary::before{

content:"▶ ";

color:#7fe8ff;

font-weight:bold;

}

details[open] summary::before{

content:"▼ ";

}

/*==================================================
EVENTO
==================================================*/

.evento{

display:flex;

justify-content:space-between;

align-items:center;

gap:25px;

padding:25px;

flex-wrap:wrap;

}

.texto{

flex:1;

min-width:280px;

}

.texto p{

line-height:1.8;

}

.imagen{

flex:0 0 320px;

text-align:center;

}

.imagen img{

width:100%;

max-width:320px;

border-radius:15px;

border:

2px solid rgba(0,191,255,.3);

box-shadow:

0 0 15px rgba(0,191,255,.3);

}

/*==================================================
ORGANIGRAMA
==================================================*/

.organigrama{

max-width:1300px;

margin:70px auto;

padding:20px;

text-align:center;

}

.organigrama h2{

font-size:2.3rem;

margin-bottom:40px;

color:#8ceeff;

text-shadow:

0 0 10px #00bfff;

}

.nivel{

display:flex;

justify-content:center;

align-items:center;

gap:20px;

flex-wrap:wrap;

margin-bottom:30px;

position:relative;

}

.cargo{

background:

rgba(0,30,70,.75);

padding:20px;

border-radius:18px;

min-width:220px;

border:

2px solid rgba(0,191,255,.3);

box-shadow:

0 0 10px rgba(0,191,255,.25);

transition:.3s;

font-weight:bold;

line-height:1.8;

}

.cargo:hover{

transform:

translateY(-6px)
scale(1.03);

box-shadow:

0 0 20px #00bfff,
0 0 35px rgba(0,191,255,.35);

}

/*==================================================
FOOTER
==================================================*/

footer{

margin-top:60px;

padding:30px;

text-align:center;

background:

rgba(0,15,35,.95);

border-top:

2px solid rgba(0,191,255,.35);

font-size:1rem;

color:#d9d9d9;

}

/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#00101d;

}

::-webkit-scrollbar-thumb{

background:#00aaff;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#63deff;

}

/*==================================================
ANIMACION
==================================================*/

@keyframes aparecer{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

header,
.descripcion,
details,
.organigrama{

animation:aparecer .8s ease;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:900px){

.evento{

flex-direction:column;

text-align:center;

}

.imagen{

flex:1;

}

.cargo{

min-width:180px;

}

}

@media(max-width:600px){

header{

padding-top:100px;

}

header h1{

font-size:2rem;

}

.descripcion{

margin:15px;

padding:20px;

}

.descripcion p{

font-size:1rem;

}

summary{

font-size:1rem;

padding:16px;

}

.texto p{

font-size:.95rem;

}

.imagen img{

max-width:100%;

}

.nivel{

gap:12px;

}

.cargo{

min-width:100%;

padding:18px;

}

footer{

padding:20px;

}

.boton-regresar{

top:15px;
left:15px;

padding:10px 16px;

font-size:.9rem;

}

}

/*==================================
FOTOS ORGANIGRAMA
==================================*/

.foto{

width:110px;

height:110px;

object-fit:cover;

border-radius:50%;

border:4px solid #00bfff;

box-shadow:

0 0 10px #00bfff,
0 0 20px rgba(0,191,255,.4);

margin-bottom:15px;

transition:.3s;

}

.cargo:hover .foto{

transform:

scale(1.08)
rotate(3deg);

box-shadow:

0 0 20px #00e1ff,
0 0 40px #00e1ff;

}

.cargo h3{

margin-bottom:8px;

font-size:1.3rem;

color:#8ceeff;

}

.cargo p{

line-height:1.6;

}

/* ===========================
   RESPONSIVE
=========================== */

/* Laptops pequeñas */
@media (max-width: 1024px) {

}

/* Tablets */
@media (max-width: 768px) {

}

/* Celulares */
@media (max-width: 480px) {

}

/* Celulares muy pequeños */
@media (max-width: 320px) {

}