/* Variables CSS para colores y tamaños de fuente */
:root {
    --primary-color: #141414;
    --focus-color: #F4bf3c;
    /*#141414 #212529 #1a1a1a #f8955b #e5e7df #F4bf3c*/
    --secondary-color: #e5e7df;
    --hover-color: #e5e7dfaf;
    --super-small-font-size: 0.8rem;
    --small-font-size: 0.9rem;
    --medium-font-size: 1.6rem;
    --large-font-size: 5rem;
    --line-height: 1px;
    --header-padding: 1rem;
    --hero-border: 1px;
}


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

hr {
    height: 2px;
    background: var(--secondary-color);
    margin: 20px 0;
    opacity: 100;
    width: 100%;
    transform-origin: left center;
}


.marca {
    font-weight: bold;
    text-align: right;
}

.large-dot {
    font-size: 1.5em;
    display: inline-flex;
    align-items: center;
}

/* Estilos para el enlace */
.explore-link {
    color: var(--secondary-color);
    text-decoration: none;
    font-size: var(--small-font-size);
    font-weight: 600;
    position: relative;
    display: inline-flex;


}

.main-content .arrow-icon {
    width: 15px;
    height: auto;
    margin-left: 0.2rem;
    color: var(--secondary-color) !important;
}

/* Animación de la línea al pasar el cursor */
.explore-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    height: 2px;
    width: 0;
    background-color: var(--secondary-color);
    transition: width 0.3s ease;
}

.explore-link:hover::after {
    width: 100%;
}

/* Fondo de toda la página */
html,
body {
    background-color: var(--primary-color);
    color: var(--primary-color);
}



/* Contenedor principal */
.page-container {
    padding-left: var(--header-padding);
    padding-right: var(--header-padding);
    visibility: visible;

}


/* Logo */
.logo {
    max-width: 100%;
    height: auto;
}

/* Estilos generales para la barra de navegación */
.page-container nav.navbar {
    position: relative;
    border-top: 18px solid var(--secondary-color) !important;
    border-bottom: var(--line-height) solid transparent;
    position: sticky;
    background-color: var(--primary-color);
}

.page-container nav.navbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: var(--line-height);
    background-color: var(--secondary-color);
    transition: width 1s ease-in-out;
}

.page-container nav.navbar.animate-border::after {
    width: 100%;
}

.nav-link {
    color: var(--secondary-color);
}

.nav-link:hover {
    color: var(--hover-color);
}

#my-navbar .navbar-collapse {
    padding-left: 0;
}

.navbar-nav .nav-item {
    margin-right: 1rem;
}

.navbar-nav .nav-item:first-child {
    margin-right: 19rem;
}


/* Estilos para el botón de la hamburguesa */
.navbar-toggler {
    width: 100%;
    display: flex;
    justify-content: right;
    align-items: center;
    border: none;
    padding: 0;
    cursor: pointer;
}

.navbar-toggler-text {
    font-size: var(--small-font-size);
    font-weight: bold;
    color: var(--secondary-color);
    font-family: 'Inter', sans-serif;
    padding-bottom: 1rem;
    padding-top: 0.5rem;
  }
.navbar-toggler:focus {
    box-shadow: none;
}

/* Ajustes específicos para alinear el contenido de la barra de navegación */
.navbar-nav {
    display: flex;
    align-items: baseline;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    font-size: var(--small-font-size);
}

.main-content h1 {
    font-family: "Inter Tight", sans-serif;
    font-size: var(--medium-font-size);
    color: var(--secondary-color);
    font-weight: 600;
    text-align: left;

}

.main-content p {
    font-family: "Inter", sans-serif;
    font-size: var(--small-font-size);
    font-weight: 300;
    color: var(--secondary-color);
    text-align: left;
}


.main-content h2 {
    font-family: "Inter Tight", sans-serif;
    font-size: var(--medium-font-size);
    color: var(--secondary-color);
    font-weight: 600;
    text-align: left;
}

/* Trabajo Destacado */

.row {
    padding-top: 3rem;
}

.trabajo-destacado {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
}

.imagen-trabajo {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
    margin-bottom: 20px;
}


.trabajo-detalles .titulo {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.trabajo-detalles .autor,
.trabajo-detalles .director {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: #777;
}

.trabajo-detalles .descripcion {
    font-size: 1rem;
    margin-bottom: 20px;
}


.btn-compartir {
    margin-top: 20px;
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}




/* Botón regresar */
.btn-regresar {
    display: block;
    margin: 30px auto;
    padding: 10px 20px;
    text-align: center;
    background-color: #ff5a5f;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    width: 200px;
    transition: background-color 0.3s ease;
}



/* Estilo de las tarjetas */
.trabajos-relacionados a {
    position: relative;
    text-decoration: none;

    color: inherit;
}

/* Tarjeta */
.card {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 0;
    --bs-card-bg: transparent;
    --bs-card-border-color: none;

}

/* Imagen de fondo */
.card-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 0;
}

/* Overlay para oscurecer la imagen y contener el texto */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    /* Usar flexbox */
    flex-direction: column;
    /* Dirección de flexión vertical */
    justify-content: space-between;
    /* Colocar el título arriba y el autor abajo */
    padding: 1rem;
    /* Espacio interno */
    color: white;
    /* Color del texto */
}

/* Título de la tarjeta */
.card-title {
    font-size: var(--small-font-size);
    font-weight: bolder;
    margin: 0;
    /* Sin margen */
    text-align: left;
    /* Alinear a la izquierda */
    font-family: "Inter Tight", sans-serif;
    /* Fuente */
    z-index: 2;
    /* Asegura que esté sobre la imagen */
    color: var(--secondary-color);
}

/* Autor de la tarjeta */
.card-author {
    font-size: var(--small-font-size);
    margin-bottom: 0;
    /* Elimina el margen inferior */
    text-align: left;
    /* Alinear a la izquierda */
    font-family: "Inter Tight", sans-serif;
    /* Fuente */
    z-index: 2;
    /* Asegura que esté sobre la imagen */
    margin-top: 0.5rem;
    /* Pequeño margen superior */
    color: var(--secondary-color);
}



.explore-link {
    display: inline-flex;
    justify-content: end;
}

.trabajo-detalles .link-trabajo {
    color: var(--secondary-color);
    text-decoration: none;
    font-size: var(--small-font-size);
    font-weight: 600;
    position: relative;
    display: inline-flex;
    background-color: transparent !important;
}

.btn-compartir {
    color: var(--secondary-color);
    text-decoration: none;
    font-size: var(--small-font-size);
    font-weight: 600;
    position: relative;
    display: inline-flex;
    background-color: transparent !important;
    padding-bottom: 0;
    padding-left: 0;
}

/* Animación de la línea al pasar el cursor */
.btn-compartir::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    height: 2px;
    width: 0;
    background-color: var(--secondary-color);
    transition: width 0.3s ease;
}

.btn-compartir:hover::after {
    width: 100%;
}

.btn-compartir {
    display: inline-flex;
    justify-content: end;
}


hr {
    height: 2px;
    background: var(--secondary-color);
    margin: 20px 0;
    opacity: 100;
    width: 100%;
    transform-origin: left center;
}


.trabajos-relacionados-container .row {
    padding-top: 0;
}


.footer {
    padding-bottom: 1rem;
    padding-top: 1rem;
    padding-left: 0;

}

.explore-link-row {
    padding: 0;
}

/* Responsive*/


/* Estilos específicos para dispositivos móviles */
@media (max-width: 767.98px) {

    .main-content h1 {
        padding-top: 0rem;
    }

    .main-content p {
        margin: 0;
    }


    .row {
        padding-top: 0rem;
    }

    .trabajos-relacionados a {
        margin-bottom: 1rem;
    }

    /*Posicion de las columnas*/

    .arriba {
        order: 1;
        padding-top: 5rem;
        padding-bottom: 1rem;
      }
    
      .volver {
        order: 0; 
      }
    
      .col-md-6 {
        order: 2;
      }
}