/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* 
    Created on : 26 may 2026, 2:16:11 p.m.
    Author     : jcaba
*/
body{
    margin: 0;
    padding: 0px 0;
    background-image: url("../images/fondo_autografos.jpg");
    background-size: cover;
    background-attachment: fixed;
    font-family: roboto, sans-serif;
    overflow-x: hidden;
    position: relative;
}

.cabecera{
    background-color: rgb(41, 59, 81);
    color: white;
}

.anuncio{
    background-color: rgb(30, 45, 65);
    text-align: center;
    padding: 10px;
    font-size: 18px;
}

.navbar{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 15px 30px;
}


/*diseño y animaciones para logo (rotacion y escala)*/
.logo img{
    width: 140px;
    height: 100px;
    object-fit: contain;
}
.logo img{
    width: 140px;
    height: 100px;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.logo img:hover{
    transform: rotate(-5deg) scale(1.08);
}



/*diseño de navbar y animacion de letras del navbar (transicion y desplazamiento)*/
.navbar a{
    color: white;
    text-decoration: none;
    font-size: 18px;
    transition: 0.3s;
}

.navbar a:hover{
    color: gold;
}



.navbar a{
    position: relative;
    transition: color 0.3s ease, transform 0.3s ease;
}

.navbar a:hover{
    color: gold;
    transform: translateY(-4px);
}

.navbar a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background-color: gold;
    transition: width 0.4s ease;
}

.navbar a:hover::after{
    width: 100%;
}

/*alineacion y fuente del parrafo con animaciones (por deslizamiento)*/
.contenido{
    margin: 200px;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 16px;
    font-family: Roboto, sans-serif;
    animation: entradaSuave 1s ease forwards;
}

@keyframes entradaSuave{
    from{
        opacity: 0;
        transform: translateY(40px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}




.contenido-autografos {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px;                             
    padding: 20px;
}

/* Tarjeta (Fondo blanco): Reducido el padding para que no quede gigante */
.card {
    background-color: #ffffff;
    border-radius: 10px;        
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); 
    padding: 15px;            /* REDUCIDO: El fondo blanco abraza más a la imagen */
    display: flex;              
    flex-direction: column;   
    align-items: center;        
    overflow: hidden;         
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* Contenedor de la foto */
.card-img-container {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

/* Imagen: Altura optimizada para que sea más compacta y visible */
.card-img {
    width: 100%;
    max-width: 100%;
    height: 280px;            /* REDUCIDO: Tamaño ideal para destacar sin saturar */
    object-fit: contain;      
    border-radius: 6px;         
    display: block;
}

/* Bloque de texto interno */
.card-text {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Título: SIEMPRE VISIBLE. Lo separamos de la animación de ocultado */
.card-text h3 {
    font-size: 20px;
    margin: 15px 0 5px 0;    /* Margen controlado */
    color: rgb(41, 59, 81);     
    font-weight: bold;
    text-align: center;
}

/* Párrafos descriptivos: Único elemento que se oculta y se despliega */
.card-text p {
    font-size: 14.5px;
    line-height: 1.5;           
    color: #3b4252;             
    text-align: justify;
    
    /* Configuración por defecto (OCULTO) */
    max-height: 0;
    opacity: 0;
    margin: 0;
    overflow: hidden;
    
    /* AL SALIR: Regresa automático (0 segundos de delay) */
    transition: max-height 0.4s ease-out 0s, 
                opacity 0.3s ease 0s, 
                margin 0.3s ease 0s;
}

/* CUANDO EL USUARIO TIENE EL MOUSE ENCIMA (Hover) */
.card:hover .card-text p {
    max-height: 150px;        /* Espacio suficiente para el texto descriptivo */
    opacity: 1;
    margin: 10px 0 0 0;       /* Da espacio superior solo cuando aparece */
    
    /* AL ENTRAR: Espera exactamente 1 segundo (1s) antes de desplegarse */
    transition: max-height 0.4s ease-in-out 1s, 
                opacity 0.3s ease 1s, 
                margin 0.3s ease 1s;
}

/* Ajuste Responsivo para celulares */
@media (max-width: 768px) {
    .contenido-autografos {
        grid-template-columns: 1fr; /* 1 columna en pantallas móviles */
    }
    .card-img {
        height: 220px; 
    }
}


.footer{
    background-color: rgb(41, 59, 81);
    font-size: 20px;
    font-family: Roboto, sans-serif;
    animation: aparecerFooter 1.2s ease;
}

@keyframes aparecerFooter{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
/* Espacio de separación antes del inicio del footer */
.footer {
    margin-top: 60px;
    padding: 30px 0;
}
.animacion-sorpresa {
    position: fixed;
    bottom: 15%;            /* Altura en la pantalla (15% desde abajo) */
    left: -330px;           /* Inicia completamente escondido a la izquierda */
    width: 300px;           /* Tamaño ideal para que luzca compacto y no tape el contenido */
    z-index: 9999;          /* Se posiciona por encima de las tarjetas y el fondo */
    pointer-events: none;   /* Permite que el usuario pueda hacer clic "a través" del GIF sin estorbar */
    
    /* Ejecuta la animación 'cruzarPantalla' */
    /* Dura 9 segundos, avanza de forma constante (linear) y se detiene al final (forwards) */
    animation: cruzarPantalla 9s linear forwards; 
}

/* Asegura que la imagen use el 100% del contenedor asignado */
.animacion-sorpresa img {
    width: 100%;
    height: auto;
    display: block;
}

/* 3. Definición de la trayectoria: de izquierda a derecha */
@keyframes cruzarPantalla {
    0% {
        left: -250px;         /* Posición inicial oculta */
        transform: scaleX(-1); /* Orientación normal */
    }
    100% {
        left: 100vw;          /* Posición final: sale por completo por el extremo derecho (100vw) */
        transform: scaleX(-1);
    }
}

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

/* TABLETS */
@media screen and (max-width: 992px){

    .navbar{
        gap: 18px;
        flex-wrap: wrap;
    }

    .card{
        gap: 25px;
        padding: 20px;
    }

    .card-text h2,
    .card-text h3{
        font-size: 28px;
    }

    .video-anime,
    .video-comics{
        width: 100%;
    }

}

/* CELULARES */
@media screen and (max-width: 768px){

    /* NAVBAR */

    .navbar{
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .logo img{
        width: 110px;
        height: auto;
    }

    .navbar a{
        font-size: 16px;
    }

    /* TITULOS */

    .titulo-manga,
    .titulo-comic{
        font-size: 34px;
    }

    /* CARDS */

    .card{
        flex-direction: column;
        text-align: center;

        padding: 18px;
    }

    .card-img-container{
        min-width: 100%;
    }

    .card-img{
        width: 100%;
        height: auto;
    }

    .card-text p{
        text-align: justify;
        font-size: 15px;
    }

    /* VIDEOS */

    .video-anime,
    .video-comics{
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    /* CARRUSEL */

    .carrusel{
        width: 100%;
        height: auto;
    }

    .slide{
        width: 100%;
        height: auto;
    }

    .slide img{
        width: 100%;
        height: auto;
    }

    /* FORMULARIO */

    .formulario{
        width: 90%;
        padding: 20px;
    }

    /* CONTENIDO GENERAL */

    .contenido{
        margin: 30px 15px;
    }

}

/* CELULARES PEQUEÑOS */
@media screen and (max-width: 480px){

    .titulo-manga,
    .titulo-comic{
        font-size: 28px;
    }

    .card-text h2,
    .card-text h3{
        font-size: 24px;
    }

    .navbar a{
        font-size: 15px;
    }

    .anuncio{
        font-size: 15px;
    }

    p{
        font-size: 14px;
    }

}

@media screen and (max-width: 768px){

    .video-index{
        width: 100%;
        max-width: 100%;
        height: auto;
    }

}

.video-index{
    width: 100%;
    max-width: 900px;

    height: auto;

    border-radius: 18px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.btn-favorito {
    background-color: rgb(41, 59, 81);
    color: white;
    border: 2px solid rgb(41, 59, 81);
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
    margin-top: 10px;
}

.btn-favorito:hover {
    background-color: gold;
    color: rgb(41, 59, 81);
    border-color: gold;
}