.section1 {
    padding-top: 100px;
    min-height: auto;
}

/* TARJETAS */
.card-custom{
    background: linear-gradient(135deg, #2c2d69, #1f204f);
    color: white;
    border-radius: 18px;
    padding: 25px;
    transition: all 0.35s ease;
    cursor: pointer;
    
}
.card-custom:hover{
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 18px 35px rgba(0,0,0,0.35);
    background: linear-gradient(135deg, #3a3bb3, #2c2d69);
}

.card-icon{
    text-align:center;
}

.icon-card{
    font-size:3.2rem;
    margin-bottom:15px;
    display:inline-block;
    color:var(--amarillo);
}

.btn-section{
    display:inline-block;
    margin-top:10px;   
}
.card-instrucciones{
    background:linear-gradient(135deg,var(--azul),var(--morado));
    color:white;
}
.card-instrucciones p{
    margin-bottom:12px;
    font-size:1.05rem;
}
.btn-game{
padding:20px 30px;
border-radius:40px;
font-weight:600;
border:none;
padding: 15px;
color:white;
background:linear-gradient(45deg,var(--verde),#3ea94a);
box-shadow:0 8px 18px rgba(0,0,0,.3);
}

video{
border-radius:20px;
box-shadow:0 15px 35px rgba(0,0,0,.3);
}

/* SECCIONES */
.section{
padding:80px 20px;
}

.title-badge{
display:inline-block;
 max-width: 50rem;
width: 100%;
 padding: 30px;
border-radius:40px;
background:linear-gradient(45deg,var(--azul),var(--morado));
color:white;
font-weight:600;
box-shadow:0 6px 15px rgba(0,0,0,.25);
margin-bottom:35px;
font-size: 2.5rem;
}
.cont-info .p-info {
    color: antiquewhite;
}

.btn-download {
    margin-top: 20px;
}

.cont-carrusel1 {
    margin-top: 20px;
}

.section2 {
    padding-top: 100px;
    min-height: auto;
}

.section2 .title-Cuadro2 {
    max-width: 40rem;
    width: 100%;
    background-color: #2c2d69;
    /* Fondo blanco */
    padding: 20px;
    /* Espaciado interno */
    border-radius: 15px;
    /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Sombrita elegante */
    /* Ajusta el tamaño al texto */
    margin: 20px auto;
    text-align: center;
    box-sizing: border-box;
}

.title-section2 {
    font-weight: bold;
    /* Negrita */
    color: white;
    /* Texto oscuro */
}

.section3 {
    padding-top: 100px;
    min-height: auto;
}

.section3 .title-Cuadro3 {
    max-width: 60rem;
    width: 100%;
    margin: 20px auto;
    background-color: #2c2d69;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    box-sizing: border-box;
}

.title-section3 {
    color: white;
    font-weight: bold;
}

.descripcion-memograma {
    font-size: 1.2rem;
    /* Tamaño de letra */
    text-align: center;
    /* Centrar el texto */
    background: #f0e6ff;
    /* Fondo suave */
    padding: 15px 20px;
    /* Espaciado interno */
    border-radius: 12px;
    /* Bordes redondeados */
    color: #4a0072;
    /* Color del texto */
    font-weight: 500;
    /* Semi-negrita */
    max-width: 600px;
    /* Ancho máximocu */
    margin: 30px auto;
    /* Centrado con margen */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Sombrado suave */
}

/*---------------------  Juego----------------*/
#wrapper {
    display: flex;
    justify-content: center;
}

#game {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.card {
    width: 200px;
    height: 140px;
    margin: 1rem;
    position: relative;
    transition: transform 0.5s;
    transform-style: preserve-3d;

}

.card.active {
    transform: rotateY(180deg);
    
}

.card div {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    backface-visibility: hidden;
    pointer-events: none;
}

.card .face {
    background-color: #2c2d69;
    transform: rotateY(180deg);
    color: white;
    font-size: 6rem;
}

.card .back {
     background-color: #2c2d69;
    overflow: hidden;
}

.card .face img {
    width: 80%;
    height: 80%;

}

/*Reiniciar Juego */
#resetBtn {
    display: flex;
    /* Para centrar la imagen */
    align-items: center;
    justify-content: center;

    margin: 30px auto 20px;
    /* Margen arriba y abajo */
    padding: 15px;
    /* Espaciado interno */
   background: rgb(8, 7, 7);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s;
}

/*BOTON PARA REINICIAR EL MEMOGRAMA*/

#resetBtn:hover {
    background: #000000;
}

#resetBtn img {
    width: 50%;
    height: auto;
    opacity: 0.3;
}

#resetBtn img:hover {
    opacity: 1;
    /* Acá lo que manejo es para que se aclare al pasar el cursor sobre el botón */
}


/*BTN Subir Contenido*/
#btnTop {
    position: fixed;  /* Este lo usno para que quede el boton quede fijo */
    bottom: 20px; /* Aca manejo la distancia desde abajo */
    right: 20px;  /* Aca manejo la distancia desde la derecha */
    width: 50px; /* Tamaño del botón */
    height: 50px;
    border-radius: 50%;  /* Esta linea de codigo es para poder redondear el botón */
    background: #6a00ff; /* Color de fondo */
    color: #fff; /* Color del icono/texto */
    border: none;
    cursor: pointer; /*Este me ayuda a que se haga una manito cuando pase el cursor*/
    font-size: 1.5rem; /* Tamaño del icono */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);/*Esto es una sombra*/
    transition: 0.3s;
    z-index: 1000; /* Para que quede encima */
}

#btnTop:hover {
    background: #5500cc;
}

/*  RESPONSIVE */

@media (max-width: 1024px) {

    .section1,
    .section2,
    .section3 {
        padding-bottom: 40px;
    }

    .cont-carrusel1 {
        margin-top: 40px;
    }
}
/*Parte del responsive, para hacer la pantalla más pequeña*/
@media (max-width: 768px) {

    .titulo-cuadro,
    .title-Cuadro2,
    .title-Cuadro3 {
        width: 90%;
    }

    .icono-info {
        width: 60px;
        height: 60px;
    }

    .card {
        width: 120px;
        height: 90px;
        margin: 0.5rem;
    }

    #btnTop {
        width: 45px;
        height: 45px;
    }
}
:root{
--azul:#4c97ff;
--amarillo:#ffd500;
--morado:#855cd6;
--verde:#59c059;
}

body{
font-family:'Poppins',sans-serif;
background:#f4f6fb;
}