/*==================================================
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/cyberboss.png");

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

color:white;

min-height:100vh;

overflow-x:hidden;

}

/*==================================================
BOTÓN REGRESAR
==================================================*/

.boton-regresar{

position:fixed;

top:20px;
left:20px;

padding:14px 25px;

background:

linear-gradient(
90deg,
#005eff,
#00c8ff
);

color:white;

text-decoration:none;

font-weight:bold;

border-radius:40px;

transition:.35s;

box-shadow:

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

z-index:1000;

}

.boton-regresar:hover{

transform:

scale(1.05)
translateY(-3px);

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.5rem,6vw,4.8rem);

letter-spacing:4px;

color:#7fe8ff;

text-shadow:

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

margin-bottom:15px;

}

header p{

font-size:1.2rem;

color:#d8f7ff;

}

/*==================================================
CONTENEDOR
==================================================*/

.contenedor{

max-width:1200px;

margin:auto;

padding:30px;

display:flex;

justify-content:center;

align-items:stretch;

gap:35px;

flex-wrap:wrap;

}

/*==================================================
TARJETAS
==================================================*/

.tarjeta{

flex:1 1 420px;

background:

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

backdrop-filter:blur(10px);

border:

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

border-radius:20px;

padding:35px;

transition:.35s;

box-shadow:

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

}

.tarjeta:hover{

transform:

translateY(-8px);

box-shadow:

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

}

.tarjeta h2{

text-align:center;

font-size:2rem;

margin-bottom:15px;

color:#82eaff;

}

.tarjeta hr{

border:none;

height:2px;

background:

linear-gradient(
90deg,
transparent,
#00bfff,
transparent
);

margin-bottom:25px;

}

.tarjeta p{

font-size:1.08rem;

line-height:1.9;

margin-bottom:18px;

color:#f2f2f2;

}

.tarjeta strong{

color:#7fe8ff;

}

/*==================================================
MENSAJE
==================================================*/

.mensaje{

max-width:1000px;

margin:50px auto;

padding:35px;

text-align:center;

background:

rgba(0,30,60,.65);

border-radius:20px;

border:

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

box-shadow:

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

}

.mensaje h2{

font-size:2rem;

color:#8ceeff;

margin-bottom:20px;

text-shadow:

0 0 10px #00bfff;

}

.mensaje p{

font-size:1.1rem;

line-height:1.8;

}

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

footer{

margin-top:60px;

padding:25px;

text-align:center;

background:

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

border-top:

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

font-size:1rem;

color:#d5d5d5;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#00101d;

}

::-webkit-scrollbar-thumb{

background:#00aaff;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#63deff;

}

/*==================================================
ANIMACIÓN DE ENTRADA
==================================================*/

@keyframes aparecer{

from{

opacity:0;

transform:

translateY(35px);

}

to{

opacity:1;

transform:

translateY(0);

}

}

.tarjeta,
.mensaje,
header{

animation:aparecer .9s ease;

}

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

@media(max-width:900px){

.contenedor{

padding:20px;

gap:25px;

}

.tarjeta{

flex:1 1 100%;

}

}

@media(max-width:600px){

header{

padding-top:110px;

}

header h1{

letter-spacing:2px;

}

.boton-regresar{

left:50%;

transform:translateX(-50%);

top:15px;

padding:12px 20px;

}

.boton-regresar:hover{

transform:

translateX(-50%)
scale(1.05);

}

.tarjeta{

padding:25px;

}

.tarjeta h2{

font-size:1.6rem;

}

.tarjeta p{

font-size:1rem;

}

.mensaje{

margin:30px 15px;

padding:25px;

}

.mensaje h2{

font-size:1.5rem;

}

}

/*==================================================
MAPA
==================================================*/

.mapa{

margin-top:25px;

width:100%;

border-radius:20px;

overflow:hidden;

border:2px solid rgba(0,191,255,.4);

box-shadow:

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

}

.mapa iframe{

width:100%;

height:420px;

border:none;

display:block;

}

@media(max-width:600px){

.mapa iframe{

height:300px;

}

}

/* ===========================
   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) {

}