/* Configuración básica y textura */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    color: #fff;
    background: #000 url('../img/textura.jpg') no-repeat center;
    background-attachment: fixed; /* Fija la textura en su lugar */
    background-size: cover; /* Asegura que la imagen cubra toda la pantalla */
}

/* Navegación */
.navbar {
    position: fixed;
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
    z-index: 1000;
}

/* Establecer el color de los enlaces a blanco */
.navbar a {
    color: white;  /* Color blanco para los enlaces */
    text-decoration: none;  /* Eliminar el subrayado */
    font-weight: bold;  /* Negrita */
    font-variant: small-caps;  /* Versalitas */
}

/* Preventir cambio de color en :hover, :active y :focus */
.navbar a:hover,
.navbar a:active,
.navbar a:focus {
    color: white;  /* Mantener el color blanco incluso al interactuar */
    outline: none; /* Elimina el borde de enfoque (opcional, si lo prefieres) */
}

h2 {
    font-style: strong; italic;          /* Aplica cursiva */
    font-variant: small-caps;    /* Aplica versalitas */
}


h3 {

    font-style: italic;          /* Aplica cursiva */
    font-variant: small-caps;    /* Aplica versalitas */
}


/* Secciones */
.seccion {
    padding: 5rem 2rem;
    text-align: center;
}

/* Imagenes */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Nombre en versalitas */
.hover-nombre .nombre {
    font-variant: small-caps;  /* Hacer versalitas */
    font-weight: bold;         /* Negrita si quieres para el nombre */
    font-size: 1.2em;          /* Ajusta el tamaño del nombre */
    text-align: center;        /* Centra el texto */
}

/* Cargo en cursiva y más pequeño */
.hover-nombre .cargo {
    font-style: italic;         /* Cursiva */
    font-size: 0.9em;           /* Más pequeño que el nombre */
    font-weight: normal;        /* Normal, no en negrita */
    text-align: center;         /* Centra el cargo */
    display: block;             /* Asegura que el cargo esté debajo del nombre */
    margin-top: 5px;            /* Agrega un poco de espacio arriba del cargo */
}

/* Nombres para los talentos */
.texto-talento {
    font-variant: small-caps;  /* Hacer versalitas */
    font-style: italic;         /* Cursiva */
    font-size: 0.9em;           /* Más pequeño que el nombre */
    font-weight: normal;        /* Normal, no en negrita */
    text-align: center;         /* Centra el cargo */
    display: block;             /* Asegura que el cargo esté debajo del nombre */
    margin-top: 5px;            /* Agrega un poco de espacio arriba del cargo */
}



/* Menu */
navbar {
    max-width: 100%;
    height: auto;
    display: block;
}


/* Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
}



/* Contenedor de la sección de otros */
.grid.talentos {
    width: 60%;
    margin: 0 auto;  /* Centra el contenedor */
}


/* Contenedor de la sección de otros */
.grid.otros {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(7, 1fr); /* 7 elementos por fila */
    padding: 10px;
    justify-items: center;  /* Centra los elementos individualmente */
    justify-content: center; /* Centra todo el contenedor de grid */
}



/* Contenedor de la sección de colaboradores */
.grid.colaboradores {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(6, 1fr); /* 4 elementos por fila */
    padding: 20px; /* Ajusta el espacio dentro del contenedor */
}

/* Estilos para cada tarjeta */
.tarjeta {
    position: relative;
    overflow: hidden; /* Asegura que la imagen no se desborde */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Añade sombra sutil para mejorar el diseño */
    transition: transform 0.3s ease; /* Animación para suavizar el movimiento en hover */
}

.tarjeta img {
    width: 100%;               /* Ajusta la imagen al 100% del contenedor */
    height: 100%;              /* Ajusta la imagen al 100% del contenedor */
    object-fit: contain;       /* Asegura que la imagen mantenga su proporción, ajustándose sin cortar */
    border-radius: 8px;        /* Bordes redondeados */
}

/* Efecto Hover en la tarjeta */
.tarjeta:hover {
    transform: scale(1.1); /* Aumenta ligeramente el tamaño al pasar el ratón */
}

/* Estilo del nombre en la tarjeta al pasar el ratón */
.hover-nombre {
    position: absolute;
    bottom: 0;
    width: -webkit-fill-available;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    display: none; /* Oculto inicialmente */
}

.tarjeta:hover .hover-nombre {
    display: block; /* Muestra el nombre cuando se pasa el ratón */
}

.imdb-link {
    display: block;
    margin-top: 20px;
    font-style: italic;
    text-decoration: underline;
    color: #0077cc; /* Puedes cambiar el color si lo deseas */
}


/* Prensa */
.prensa-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas fijas */
    gap: 20px;
    padding: 20px;
    justify-content: center; /* esto centra el contenedor, pero no los elementos internos si sobran */
}

.prensa-container {
    justify-items: center; /* Centra los elementos horizontalmente dentro de cada columna */
}

.prensa-item {
    text-align: center;
    background: transparent; /* Fondo ligero */
    padding: 10px;
    border-radius: 10px;
 box-shadow: none; /* Eliminamos la sombra si no la quieres */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.prensa-item img {
    width: 100%;
    max-width: 300px; /* Controla el tamaño de la imagen */
    border-radius: 10px;
}


.prensa-item a {
    display: block;
    margin-top: 10px;
    font-size: 1.1em;
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

.prensa-item a:hover {
    text-decoration: underline;
}



/* Popup */
.popup {
    /* Configuración similar a antes */
}

/* Responsive */
@media screen and (max-width: 768px) {
    .navbar { flex-direction: column; }
}