@import url('clash-display.css');

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

:root{
    --claro: #f2f0ec;
    --oscuro: #000000;
}

body{
    background-color: var(--claro);
    color: var(--oscuro);
}

html{
    scroll-behavior: smooth;
}

/* Textos */

@font-face {
  font-family: 'Zodiak-Variable';
  src: url('../fonts/Zodiak-Variable.woff2') format('woff2'),
       url('../fonts/Zodiak-Variable.woff') format('woff');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Zodiak-VariableItalic';
  src: url('../fonts/Zodiak-VariableItalic.woff2') format('woff2'),
       url('../fonts/Zodiak-VariableItalic.woff') format('woff');
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'ClashDisplay-Variable';
  src: url('../fonts/ClashDisplay-Variable.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Variable.woff') format('woff'),
       url('../fonts/ClashDisplay-Variable.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

.zodiak{
    font-family: 'Zodiak-Variable', serif;
    font-weight: 400;
    font-style: normal;
}

.clash{
    font-family: 'ClashDisplay-Variable', sans-serif;
    font-weight: 400;
    font-style: normal;
}

.smaller{
    font-size: smaller;
}

span{
  font-weight: 800;
}

/* Botones */

.btn-enviar {
  background-color: var(--oscuro);
  color: var(--claro);
  border: none;
  padding: 10px 100px;
  font-size: 1rem;
  cursor: pointer;
  transition: opacity 0.3s;
}

.btn-enviar:hover {
  opacity: 0.85;
}

.cta{
  border: none;
  cursor: pointer;
  transition: opacity 0.3s;
}




/*HEADER*/

header {
    background-color: var(--claro);
}

.navbar-nav .nav-link,
.navbar-nav .dropdown-item {
    font-family: 'Zodiak-Variable';
    font-weight: 400;
    font-style: normal;
    color: var(--oscuro);
    margin-left: 15px;
    transition: color 0.5s ease-in-out;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.navbar-nav .dropdown-item:hover {
    color: var(--oscuro);
    font-family: 'Zodiak-VariableItalic';
    font-style: italic;
}

.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}

.navbar .dropdown-menu,
.navbar .dropdown-menu.show {
    background-color: var(--claro);
    border: none;
}

.navbar .dropdown-item {
    color: var(--oscuro);
    font-family: 'Zodiak-Variable';
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    font-family: 'Zodiak-VariableItalic';
    font-style: italic;
    color: var(--oscuro);
    background-color: transparent;
}

.dropdown-toggle::after {
    display: none !important;
}

.navbar-toggler {
    border: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

@media (max-width: 991px) {
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 999;
        background-color: var(--claro);
        color: var(--oscuro);
    }

    .navbar-nav {
        flex-direction: column;
        align-items: center;
    }

    .navbar-nav .nav-item {
        margin: 10px 0;
    }

    .navbar-collapse .dropdown-menu {
        background-color: var(--claro);
    }

    .navbar-collapse .dropdown-item:hover {
        background-color: rgba(0,0,0,0.05);
    }

    .nav-item.dropdown > .dropdown-menu {
        display: none !important;
    }
}




/* BANNER */

#banner {
  position: relative;
  width: 100%;
  height: 86vh;
  overflow: hidden;
}

.banner-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

/* Contenido encima del video */
.banner-overlay {
  position: relative;
  z-index: 1;
  color: var(--claro);
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.banner-logo {
  max-width: 200px;
  width: 100%;
}




/* PROJECTS */

#projects a, .narrative-stills a{
  transition: opacity 0.3s ease;
  cursor: pointer;
  transition: all 0.3s ease;
}

#projects a:hover,  .narrative-stills a:hover{
  opacity: 0.7;
}

.size-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

ul li .active{
  background-color: transparent !important;
}

.modal-body p{
  margin-top: 0;
  padding-top: 0;
}

/* En mobile: mantener proporción */
@media (max-width: 768px) {

  #projects h6 {
    text-align: center;
  }

  .size-img {
    height: 150px;
  }
}

.card-img-top {
    width: 100%;
    height: 200px;
    object-fit: cover;
}




/* Narrative*/

.galeria {
  column-count: 2;
  column-gap: 1rem;
}

.galeria img {
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 8px;
}

#narrative-stills .narrative-stills img{
  width: 33%;
  height: 250px;
  object-fit: cover;
}

.narrative-stills img {
    flex: 1 1 0;
}

@media (max-width: 768px) {

  #narrative-stills .narrative-stills img{
    height: 100px;
  }

}




/* Commercial */

.bg-dark{
  background-color: #000000 !important;
}




/* ABOUT */

#bio-es{
  display: none;
}

.btn-traducir{
  border: none;
  background-color: transparent;
  cursor: pointer;
  color: var(--oscuro);
  border-bottom: 1px solid var(--oscuro);
}



/* CONTACTO */

#contacto {
  min-height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#contacto div {
  max-width: 700px;
}

.formulario-contacto input,
.formulario-contacto textarea {
  width: 100%;
  background-color: var(--claro);
  border: none;
  border-bottom: 1px solid var(--oscuro);
  padding: 10px 6px;
  font-size: smaller;
  color: var(--oscuro);
  outline: none;
}

.formulario-contacto input::placeholder,
.formulario-contacto textarea::placeholder {
  color: var(--oscuro);
  opacity: 0.8;
}

.formulario-contacto input:focus,
.formulario-contacto textarea:focus {
  border-bottom: 1px solid var(--oscuro);
}


/* FOOTER */

/* Galeria */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  gap: 5px;
}

.gallery-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s;
}

.gallery-item:hover{
  opacity: 0.7;
}

/* Modal */
.gallery-modal {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0,0.9);

  justify-content: center;
  align-items: center; /* 🔥 centrado vertical y horizontal */
}

.gallery-modal-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%; /* 🔥 ocupa todo el modal para centrar */
}

.gallery-modal-content {
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
  margin: auto; /* 🔥 asegura el centrado */
}

/* Botón cerrar */
.gallery-close {
  position: absolute;
  top: 90px; 
  right: 35px;
  cursor: pointer;
}

/* Flechas */
.gallery-prev, .gallery-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 16px;
  -webkit-user-select: none;
  user-select: none;
}

.gallery-prev { left: 0; }
.gallery-next { right: 0; }




/* ANIMACIONES */

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 2s ease;
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}