/* ============================================================
                    BEATRIZ Styles
============================================================ */
.beatriz-main {
    max-width: 1000px;
    margin: 30px auto;
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 20px; 
    padding: 20px;
}

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

.beatriz-card {
    background-color: var(--cian);
    border: 4px solid var(--negro);
    box-shadow: 6px 6px 0px var(--negro);
    padding: 20px;
    width: 95%; /* Cambiado de 100% para dar aire en móviles */
    max-width: 800px; /* Un poco más ancho para escritorio */
    margin: 20px auto;
    text-align: center;
    overflow: hidden; /* Vital para el carrusel */
}


/* LOGO Y NAVEGACIÓN */
/* Responsividad del Formulario */
.logo-nav-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

/* Definición de las columnas para escritorio (pantallas grandes) */
.col20 { flex: 1 1 20%; min-width: 100px; }
.col40 { flex: 1 1 40%; min-width: 150px; }
.col80 { flex: 1 1 80%; }

/* Clases de columnas responsivas */
.col20, .col40, .col80 {
    flex: 1 1 300px; /* medir esto, si no cabe, ocupa el 100% */
    max-width: 100%;
}

.logo-img{
    width: 5%;
    height: 5%;
    box-shadow: 0.2rem 0.4rem 0.5rem var(--negro); 
}  
.navigation ul{
    margin: 0;
    padding: 0;
    list-style: none;
    font-size:0.8vw;

}
    .navigation ul li{
        display: inline-block; /* ubica los elementos en la misma línea  */
    }
        .navigation ul li a{
            background: var(--violeta);
            display: block;
            padding: 0.7vh 1.5vw;
            transition: all 0.4s linear;
            /*border-radius: 15rem;*/
            box-shadow: 0.2rem 0.2rem 0.3rem var(--negro);
        }
        .navigation ul li a:hover{
            background: white;
            box-shadow: 0.5rem 1rem 2rem rgb(39, 107, 109);
            color: var(--fucsia);
            font-size:1.6vw;
            font-weight: bolder;
        }
/* ============================================================
   FOTO
============================================================ */
.beatriz-img {
    flex: 1 1 100%;
    text-align: center;
    border: 3px solid var(--negro);
    box-shadow: 0.2rem 0.4rem 0.5rem var(--negro);
}    
/* ============================================================
   ANIMACIONES
============================================================ */
.slide-in-fwd-top {
	-webkit-animation: slide-in-fwd-top 0.4s ;
	        animation: slide-in-fwd-top 0.4s ;
}


/**
 * ----------------------------------------
 * animation slide-in-fwd-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-fwd-top {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(-800px);
            transform: translateZ(-1400px) translateY(-800px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-top {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(-800px);
            transform: translateZ(-1400px) translateY(-800px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
.roll-in-left {
	-webkit-animation: roll-in-left 0.6s ease-out both;
	        animation: roll-in-left 0.6s ease-out both;
}

/**
 * ----------------------------------------
 * animation roll-in-left
 * ----------------------------------------
 */
@-webkit-keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
            transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}
@keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
            transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

/* ============================================================
   NOMBRE
============================================================ */
.beatriz-nombre {
    font-family: 'Bangers', cursive;
    font-size: 2.2rem;
    color: var(--violeta);
    text-shadow: 2px 2px 0px var(--negro);
}

/* ============================================================
   LISTAS
============================================================ */
.beatriz-list {
    list-style: none;
    padding: 0;
}

.beatriz-list li {
    margin: 8px 0;
    background-color: var(--blanco);
    color: white;
    padding: 8px;
    border: 3px solid var(--negro);
    box-shadow: 3px 3px 0px var(--negro);
}

.beatriz-card-disco{
  background-color: var(--violeta);
  border: 4px solid var(--negro);
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
}
.beatriz-img-disco{
    background-color: var(--violeta);
    width: 100%;
    padding: 20px;
    max-width: 200px;
    height: auto;
   
}
/* ============================================================
   ENVIAR
============================================================ */

.siguiente {
    margin-top: 15px;
    background-color: var(--violeta);
    border: 3px solid var(--negro);
    padding: 10px;
    cursor: pointer;
    box-shadow: 3px 3px 0px var(--negro);
}    
.siguiente:hover{
            background: white;
            box-shadow: 0.5rem 1rem 2rem rgb(39, 107, 109);
            color: var(--fucsia);
            font-size:1.6vw;
            font-weight: bolder;
}
/* ============================================================
   PELÍCULAS
============================================================ */
.peliculas-grid {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.pelicula-card {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  background-color: var(--violeta);
  border: 3px solid var(--negro);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}

.pelicula-card:hover .beatriz-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(6px);
}

.pelicula-imagen {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: top;
}

.pelicula-info {
  padding: 1.25rem 1.5rem 1.75rem;
}

.pelicula-titulo {
  font-size: 1.25rem;
  margin-bottom: 0.2rem;
}

.pelicula-anio {
  font-size: 0.8rem;
  color: var(--color-blue-600);
  font-weight: 500;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pelicula-descripcion {
  font-size: 0.92rem;
  color: var(--color-slate-600);
  line-height: 1.65;
}


/* Mostrar tooltip al hacer hover */
.pelicula-titulo:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}


/* ============================================================
   CONTAINER About me
============================================================ */
.container-aboutme {
  display: flex;
  gap: 20px;
  flex-direction: row;
  justify-content: start;
}

/* ============================================================
   CARROUSEL COMÚN
============================================================ */

.carousel-container {
  width: 100%;
  height: 30vw;
  overflow: hidden; /* Oculta las imágenes fuera de vista */
  background: var(--violeta);
  border: 3px solid var(--negro);
  box-shadow: 3px 3px 0px var(--negro);
}

.carousel-track {
  display: flex; /* Alinea imágenes en fila */
  width: calc(250px * 8); /* Ancho: (ancho imagen * total imágenes duplicadas) */
  animation: scroll 20s linear infinite; /* Aplica la animación */
}

.carousel-track img {
  width: 250px; /* Tamaño fijo por imagen */
  height: 30vw;
  border: 3px solid var(--negro);
  box-shadow: 3px 3px 0px var(--negro);
}

/* Animación para mover la pista */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-250px * 3)); } /* Mueve la mitad (originales) */
}

/* Pausar animación al pasar el mouse (opcional) */
.carousel-container:hover .carousel-track {
  animation-play-state: paused;
}

/* ============================================================
   CARROUSEL COLLAGES
============================================================ */
/* Estilos del Carrusel */
        
        /* Contenedor principal del carrusel: oculta lo que se sale */
        .carousel-container-collage {
            width: 100%;
            overflow: hidden;
            margin-top: 15px; /* Espacio con el título */
            position: relative;
        }

        /* La "cinta" que contiene las imágenes y se mueve */
        .carousel-track-collage {
            display: flex;
            /* ANCHO CLAVE: 8 imágenes (4 originales + 4 copias), cada una al 100% del ancho del contenedor padre */
            width: calc(100% * 8); 
            animation: scroll 30s linear infinite; /* Nombre, duración, curva de tiempo, bucle */
        }

        /* Pausar la animación al pasar el cursor */
        .carousel-track-collage:hover {
            animation-play-state: paused;
        }

        /* Contenedor para cada par Imagen + Título */
        .carousel-item-collage {
        width: calc(100% / 8);
        display: flex;
        flex-direction: column; /* Apila el título y la imagen verticalmente */
        align-items: center;
        border: 4px solid var(--negro);
        box-sizing: border-box;
        position: relative; /* Para posicionar el texto encima */
    }
        .carousel-item-collage img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }
        .carousel-item-collage span {
        display: block;
        padding: 10px 0;
        font-weight: bold;
        color: var(--negro);
        text-transform: uppercase;
        font-size: 0.9rem;
        background-color: rgba(255, 255, 255, 0.3); /* Fondo sutil para legibilidad */
        width: 100%;
    }

        /* Estilo para cada imagen individual */
        .carousel-track-collage img {
            /* Cada imagen ocupa el ancho completo del contenedor .carousel-container */
            width: calc(100% / 8); 
            height: auto; /* Mantiene la proporción */
            display: block;
            object-fit: cover; /* Asegura que la imagen llene el espacio sin deformarse */
            
            /* La línea negra divisoria */
            border: 4px solid var(--negro); 
            box-sizing: border-box; /* Importante para que el borde no sume ancho extra */
        }

        /*  Definición de la Animación */
        @keyframes scroll {
            0% {transform: translateX(0);}
            100% {
                /* Nos desplazamos hacia la izquierda exactamente la mitad del ancho total de la cinta
                   (es decir, el ancho de las 4 imágenes originales). 
                   En ese punto, la copia idéntica estará en la posición inicial, creando el bucle. */
                transform: translateX(calc(-100% / 2));
            }
        }


/* contador de caracteres para comentarios */
#contador-container {
    text-align: right;
    font-size: 0.8rem;
    font-weight: bold;
    margin-top: 5px;
    color: var(--negro);
}

/* Clase opcional para avisar cuando se está llegando al límite */
.limite-alcanzado {
    font-weight: bold;
    background-origin: yellow;
    color: rgb(173, 2, 2) !important;
}


/* ============================================================
   RESPONSIVE
============================================================ */
@media (min-width: 400px) {
    .beatriz-card {
        max-width: 300px;
    }

    .beatriz-nombre {
        font-size: 2rem;
    }
      /* El carrusel puede ir más lento en móviles para facilitar la vista */
    .carousel-track {
        animation-duration: 30s;
    }
    .carousel-track-collage {
        animation-duration: 35s;
    }
}

@media (min-width: 900px) {

    .beatriz-card {
        max-width: 700px;
    }

    .beatriz-img {
        width: 160px;
    }
}

@media (min-width: 1200px) {

    .beatriz-card {
        max-width: 900px;
    }

    .beatriz-nombre {
        font-size: 3rem;
    }
}

/* --- MEDIA QUERIES PARA CELULARES --- */
@media (max-width: 600px) {
    .beatriz-card {
        padding: 10px;
        border-width: 3px;
        box-shadow: 4px 4px 0px var(--negro);
    }

    h1, h2 {
        font-size: 1.5rem;
    }

    /* El carrusel puede ir más lento en móviles para facilitar la vista */
    .carousel-track {
        animation-duration: 30s;
    }
    .carousel-track-collage {
        animation-duration: 35s;
    }

    .col40, .col20, .col80 {
        flex: 1 1 100%; /* Columnas simples en móvil */
    }
    .beatriz-img { width: 100%; height: auto; }
    
    textarea {
        width: 100% 
    }

}