/*
 Theme Name:   Kuro Theme
 Author:       Dalia.dev
 Author URI:   https://dalia.dev
 Template:     twentytwentyfive
 Version:      1.0.0
*/

* {
    /*outline: 1px solid green !important;*/
}

a {
    text-decoration: none !important;
}

a:focus {
    outline: none !important;
}

/* --------Header---------- */
header,
.fixed-header {
    margin-block-start: 0;
    position: fixed;
    z-index: 100;
    width: 100%;
}

/* Aplica cuando se está en la misma URL que el href */
.navigation a.active-nav{
	position:relative;
}
.navigation a.active-nav::after {
  content: "";
  position: absolute;
  top: 50%;
  left:-100px;
  margin-left: 12px;
  height: 2px;
  width: 80px;
  background: currentColor;
  transform: translateY(-50%);
}

/* ---- Inicio------*/

.overflow-hidden {
    overflow: hidden;
}

/* Modificar carrousel */
.slider-spectra-custom .spectra-image-gallery__media-thumbnail {
    height: 600px !important;
}

.slider-spectra-custom {
    overflow: hidden !important;
}

/* Margen del footer */
footer {
    margin-top: 0px !important;
}

/* --------Sobre kuro------ */

.vertical-details-container {
  display: flex;
  width: 100%;
  height: 500px;
}
.vertical-details {
  flex-grow: 1;
  transition: flex 0.5s ease;
  overflow: hidden;
  border-left: 1px solid #000;
  background: #dcc9bb;
}

.vertical-details .wrapper {
  height: 100%;
  position: relative;
  display: flex;
}

.vertical-details .header {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  text-align: start;
  font-size: 2em;
  font-weight: 500;
  cursor: pointer;
  padding: 0 0 2em  0;
  background-color: #dcc9bb;
}

.vertical-details.expanded {
  flex-grow: 3;
}

.vertical-details .content {
  display: flex;        
  gap: 1em;
  display: none;
  align-items: end;  
  max-height: 100%;
}

.vertical-details.expanded .content {
  display: flex;
  max-width: 700px;
  animation: openContainer 0.3s ease-in-out;
}

@keyframes openContainer {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.vertical-details .content img {
  width: 40%;
  height: 100%;
  object-fit: cover;
}

.vertical-details .content p {
  width: 60%;
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .vertical-details-container {
    flex-direction: column;
	height:auto !important;
  }

  .vertical-details {
    width: 100% !important;
    border-left: none;
    border-top: 1px solid #000;
  }

  .vertical-details .wrapper{
      display: flex;
      flex-direction: column;
  }

  .vertical-details .header {
    writing-mode: horizontal-tb;
    transform: none;
    text-align: left;
    padding: 0.2em;
    font-size: 1.1em;
    border-bottom: none;
  }

  .vertical-details .content {
    flex-direction: column;
	  margin-bottom:30px;
  }

  .vertical-details .content img,
  .vertical-details .content p {
    width: 100%;
  }
	
  .vertical-details .content img {
  height: 30vh;
	}
}

/* ------Fin sobre kuro------------ */
/*-----------Proyectos-----------*/
.tabs-custom {
    padding: 0px !important;
}
@media (max-width: 768px) {
	#tabs-responsive-wrapper{
		padding-top:10vh;
	}
}

/*-----------Fin proyectos-----------*/
/*-----------Menú-----------*/
.menu-desplegable {
    z-index: 500;
    left: 100vw;
    width: 100vw;
    height: 100vh !important;
    position: fixed !important;
    transition: left 0.4s ease-in-out, opacity 0.4s ease-in-out;
    min-height: 0px !important;
    overflow: hidden;
}

.abierto {
    opacity: 1;
    left: 0vw !important;
}

.cerrado {
    opacity: 0;
    left: 100wv;
}

#menu-desplegable-bt-close,
#menu-desplegable-bt-open {
    cursor: pointer;
}

/*-----------Fin menú-----------*/
/* -------- Carrousel de proyectos ------------*/
.slider-custom {
    overflow: hidden;
    display: flex;
    transform: translateX(var(--wp--preset--spacing--80));
    transition: transform 0.5s ease-in-out;
}

.slider-custom:hover {
    transform: translateX(0);
}

.overflow-hidden {
    overflow: hidden;
}

/*---------Fin carrousel--------- */
/*---------Pagina de proyectos-------*/
.uagb-tab.uagb-tabs__active a {
    text-decoration: underline !important;
}