/* RESET */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background:#0f172a;
    color:white;
    overflow-x:hidden;
}

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

header{
    position:relative;
    height:55vh;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

/* Overlay oscuro */
header::after{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.55);
    z-index:1;
}

/* Slides */
.slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    animation:slider 15s infinite;
}

/* Imágenes */
.slide:nth-child(1){
    background-image:url('https://images.unsplash.com/photo-1524995997946-a1c2e315a42f');
    animation-delay:0s;
}

.slide:nth-child(2){
    background-image:url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3');
    animation-delay:5s;
}

.slide:nth-child(3){
    background-image:url('https://images.unsplash.com/photo-1497633762265-9d179a990aa6');
    animation-delay:10s;
}

/* Animación slider */
@keyframes slider{
    0%{opacity:0;}
    10%{opacity:1;}
    30%{opacity:1;}
    40%{opacity:0;}
    100%{opacity:0;}
}

/* Texto Header */
.header-content{
    position:relative;
    z-index:2;
    padding:20px;
}

.header-content h1{
    font-size:3rem;
    margin-bottom:10px;
    text-shadow:0 4px 15px rgba(0,0,0,0.6);
}

.header-content p{
    font-size:1.2rem;
    opacity:0.9;
}

/* =========================
   NAV GLASS
========================= */

nav{
    position:sticky;
    top:0;
    z-index:100;
    display:flex;
    justify-content:center;
    gap:15px;
    padding:18px;
    
    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(15px);
    border-bottom:1px solid rgba(255,255,255,0.1);
}

/* Botones */
nav button{
    border:none;
    padding:12px 22px;
    border-radius:50px;
    cursor:pointer;
    font-weight:600;
    color:white;

    background:rgba(255,255,255,0.12);

    backdrop-filter:blur(10px);

    transition:0.3s;
}

nav button:hover{
    transform:translateY(-3px);
    background:linear-gradient(135deg,#2563eb,#38bdf8);
    box-shadow:0 10px 20px rgba(37,99,235,0.4);
}

/* =========================
   SECCIONES
========================= */

section{
    display:none;
    padding:50px 8%;
}

section.active{
    display:block;
}

section h2{
    margin-bottom:30px;
    font-size:2rem;
    color:#e2e8f0;
}

/* =========================
   GRID
========================= */
.contenedor-cards{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
	gap:25px;
}

@media (max-width: 768px){
    .contenedor-cards{
        grid-template-columns: 1fr;
    }
}


/* =========================
   CARD GLASS
========================= */

.card{
    position:relative;
    background:rgba(255,255,255,0.08);
    border:3px solid rgba(255,255,255,0.12);
    backdrop-filter:blur(14px);
    border-radius:22px;
    padding:25px;
    overflow:hidden;
    transition:0.35s;
	
}

/* Glow */
.card::before{
    content:'';
    position:absolute;
    width:180px;
    height:180px;
    background:rgba(59,130,246,0.15);
    border-radius:50%;
    top:-80px;
    right:-80px;
}

/* Hover */
.card:hover{
    transform:translateY(-8px) scale(1.02);
    box-shadow:0 20px 40px rgba(0,0,0,0.35);
}

/* Título */
.card h3{
    margin-bottom:18px;
    font-size:1.2rem;
    color:white;
}

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

a.test-link{
    display:inline-block;
    padding:12px 18px;
    border-radius:12px;
    text-decoration:none;
    color:white;
    font-weight:600;
    background:linear-gradient(135deg,#2563eb,#38bdf8);
    transition:0.3s;
	margin-bottom:10px;
}

a.test-link:hover{
    transform:scale(1.05);
    box-shadow:0 10px 20px rgba(37,99,235,0.4);
}


footer{
  display: flex;
  justify-content: center; 
  height: 40px;          
}


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

@media(max-width:768px){

    .header-content h1{
        font-size:2rem;
    }

    nav{
        flex-wrap:wrap;
    }

    section{
        padding:40px 20px;
    }
}