/********* GLOBAL ********/

@font-face {
    font-family: Arialnova;
    src: url(../font/ARIALNOVA-LIGHT.TTF);
  }

* {
    box-sizing: border-box;
    /*cursor: none;*/
  }

:root body {
    position: relative;
    width: 100%;
    font-family: Arialnova,sans-serif;
    font-size: 0.875rem;
    margin:0;
  }
  :root body header {
    position: fixed;
    text-align: center;
    justify-content: space-between;
    width: 100%;
    z-index: 7;
    padding: 2rem;
  }
  :root body header span {
    overflow: hidden;
    transition: 250ms;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  :root body header span:hover {
    opacity: 0.75;
  }
  :root body header span > * {
    display: inline-block;
  }

:root body .container {
   /* position: absolute;*/
    top: 0;
    left: 0;
    width: 100vw;
    overflow-x: hidden;
    background-attachment: fixed;
  }

  :root body a {
    /*color: #292927;*/
  
    text-decoration: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  :root body small.shift-in {
    position: relative;
  }
  :root body small.shift-in::after {
    content: attr(data-text);
    position: absolute;
    bottom: -100%;
    left: 0;
  }


/********** NAV **********/

.vertical-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    left: 40px; 
    top: 50%; /* Centramos el menú verticalmente */
    transform: translateY(-50%) rotate(180deg); 

  }
  
  .vertical-menu a {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 2px;
    margin: 15px 0;
    color: white; /* Color inicial blanco */
    text-decoration: none;
    transition: color 0.3s ease; /* Transición suave del color */
  }
  
  .vertical-menu a.active {
    font-weight: bold;
  }

  .vertical-menu a:hover {
    color: #000;
  }

  .logo{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 20%;
    top: 5%;
    cursor: pointer;
  }

  .lenguage{
    float: right;
  }

  .vertical-menu a, .lenguage a, #logo {
    transition: color 0.3s ease, filter 0.3s ease;
  }
  #home {
   /* background-color: #000; /* Fondo oscuro */
    height: 100vh;  /* Fullscreen height */
    position: relative;
  }
  
  #video, #architecture {
    background-color: #fff; /* Fondo claro */
  }
  .logo-white {
    filter: invert(100%);
  }
  
/********* HOME **********/

.container-home {
    background: url("../img/architecture/SFTWR_CASA_ONIRICA.jpg");
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

#home p{
    text-align: center;
    position: relative;
    top: 85%;
    font-size: 1.2em;
  }

.typeText::after {
    content: "|";
    animation: blink 1s infinite;
  }

  .typeText{
    color: white;
  }

  .welcome{
    position: absolute;
    bottom: 49%;
    right: 50%;
    color: white;
    font-size: 1.3em;
  }
  
  @keyframes blink {
    0%, 100% {opacity: 1;}
    50% {opacity: 0;}
  }

  /******ABOUT********/

#video .home {
    height: 100vh;
    position: relative;
}
#video video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#video .home p{
  margin: auto 10px;
  display: inline-block;
  position: absolute;
  right: 15%;
  bottom: 18%;
  text-align: left;
  font-weight: 600;
}

#video .home p a{
  color: white;
}


/***********ARHCITECTURE*************/

#architecture{
    min-height: 100vh;
}

#architecture .objects{
  padding-top: 20vh;
}
.render>div img{
  margin-left: 30%;
}

#architecture .maqueta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10% 3%;
  }
  
  #architecture .left, .right {
    width: 40%;
  }

  #architecture .casanunez{
    margin-top: 3%;
  }

  .casanunez img, .casanunez .descripcion{
    margin-left: 35%;
  }
  
  #architecture .left img, .right img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  #architecture .descripcion {
    font-size: .9em;
    color: #555;
    margin-top: 10px;
    margin-left: 30%;

  }
  #architecture .fachada .descripcion{
    margin-left: 10%;
  }
  #architecture .descripcion::before {
    content: '';
    display: block;
    margin-bottom: 10px;
    width: 100%;
  }
  
  #architecture .right img {
    object-fit: cover;
    
  }
  
  #architecture .left img{
    width: 85%;
    height: auto;
    display: block;
    margin-left: 30%;
  }

  .fachada img{
    margin-left: 10%!important;
    margin-right: 10%;
    max-width: 450px;
  }
  .fachada .descripcion{
    margin-left: 10%;
  }
  #architecture .microhome{
    margin-left: 3%;
  }
  #architecture .plano p{
    margin-bottom:10vh;
  }
  #architecture .planta .descripcion{
    margin-left: 0;
    font-size: .8em;
  }

  /**************PHILOSOPHY******************/

  #philosophy p, #philosophy h1 {
    color: black;
    text-align: center;
    font-size: 1em;
    font-weight: 100;

  }
  #philosophy {
    min-height: 100vh;
    padding-top: 30vh;
  }

  #philosophy>div{
    margin-bottom: 20vh;
  }

/* Efecto de scroll suave en la sección Architecture */
html {
    scroll-behavior: smooth;
  }
  
  body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  
  /****OBJECTS******/

#objects{
  padding-top: 20vh;
}
  .objects .container {
    text-align: center;
  }
  .objects p {
      font-size: 16px;
      margin-bottom: 8vh;
      margin-top: 0;  
  }
  .objects .gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-left: 5%;
  }
  .objects .gallery img {
      max-width: 100%;
      height: auto;
  }
  .objects .gallery-item {
      flex: 1 1 calc(33.333% - 40px);
      max-width: calc(33.333% - 40px);
  }

  .objects .gallery-item p{
    padding-top: 1.7em;
    font-size: .8em;
    text-align: left;
    margin-left: 15%;
  }
  
  .order div img{
    width: 60%;
  }

  .order div p{
    text-align: center!important;
    margin-left: 0!important;
  }

  .mid img{
    height: 69%;
  }

  /*****CONTACT*****/
  #contact {
    padding-top: 25vh;
    margin: auto 20%;
    min-height:100vh;
  }

  #contact .container {
   /* display: flex;
    flex-direction: column;*/
    padding: 20px;
    width: auto;
    margin: auto;
    height: auto;
}

#contact h3 {
    font-size: 1rem;
    margin-bottom: 10px;
    text-align: center;
}

#contact p {
    font-size: .9rem;
    margin-bottom: 5px;
    line-height: .1em; /* Ajusta el interlineado */
}

a {
    color: #333;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Alineación para Contact y Team en la misma fila */
#contact .section-wrapper {
    display: flex;
    width: 100%;
    margin-bottom: 20px;
}

#contact .section.cont {
    width: 30%; /* Ajuste del ancho para que las dos secciones estén en una fila */
}

#contact .section.team{
  /* width: 45%; Ajuste del ancho para que las dos secciones estén en una fila */
  margin-left: 4em;
}

#contact .section h3 {
    text-align: left; /* Alineamos los títulos a la izquierda */
    text-transform: uppercase;
}

/* Estilo para los integrantes del equipo */
#contact .team-members {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

#contact .member {
    text-align: left;
    margin-right: 5em;

}

/* Estilos de Scope centrado */
#contact .section.scope {
    margin-top: 80px;
    width: auto;
}
#philosophy h1{
  font-weight: bold;
}

  /*****FOOTER*****/

  .footer{
    width: 100%;
    display: inline-block;
    text-align: center;
    height: auto;
    position: absolute;
    bottom: 2em;
    left: 0;
  }

  .footer p {
    line-height: normal!important;
  }



/****RESPONSIVE****/

/*@media screen and (max-width: 1358px) {
  #contact .team-members{
    display: inline-block;
  }
}*/

@media screen and (max-width: 768px) {

  #home p{
    margin: auto 15%;
  }

  #contact .team-members{
    display: inline-block;
  }

  .logo{
    width: 50%;
  }

  p, a, .typeText, .lenguage a, .vertical-menu a, .objects p{
    font-size: 1em;
  }

  .objects p {
    padding: 2em 6em;
  }

  .objects .gallery-item {
    max-width: unset;
    flex: unset;
  }

  .objects .gallery-item  p{
    font-size: 1em;
    text-align: center;
    margin-left: 0;
  }
  .objects .gallery{
    margin-left: 0;
  }

  #contact .section-wrapper {
      flex-direction: column;
      align-items: center;
  }

  #contact .team-members {
      flex-direction: column;
      align-items: center;
  }

  #contact .member {
      width: 100%;
      text-align: center;
  }

  #architecture .maqueta {
    display: grid;
    justify-content: unset;
    padding: 0;
  }

  #architecture .left, .right {
    width: 100%;
  }

  #architecture .right{
    padding-bottom:3em;
  }

  #architecture .left img{
    width: 100%;
    margin: 0;
  }

  #architecture .descripcion, #architecture .planta .descripcion{
    margin: 2em 3em;
    text-align: center;
    font-size: 1em;
    padding: 0;
  }
  #architecture .microhome{
    margin-left: 0;
  }
  .fachada img{
    max-width: 100%;
  }
  .objects h1{
    font-size: 1em;
  }
  .objects .gallery{
    display: grid;
  }
  #philosophy p, #philosophy h1{
    text-align: justify;
    font-size: 1em;
    margin: 1em 3.5em;
  }
  #philosophy{
    padding-top: 10vh;
  }
  #philosophy h1{
    text-align: center;
  }
  .render>div img, .fachada img{
    margin-left: 0!important;
  }
  #video .home {
   /*height: 50vh;**/
   height: auto;
   width: 100vw;
  }
  #video video{
    position: unset;
  }
  #contact .section.cont, #contact h1, #contact .section h3, #contact .section.scope {
    width: 100%;
    text-align: center;
  }
  #contact p, #contact a, .section.scope p {
    font-size: 1em;
    line-height: normal;
  } 

  .section.scope p{
    line-height: 1.8em!important;
  }
  #contact a{
    font-size: 1em;
  }
  #contact h3, #contact p{
    font-size: 1em;
  }
  #contact .section.scope{
    padding-bottom: 15vh;
  }
  #contact .section.team{
    margin: 0;
  }
  #contact{
    padding-top: 8em;
  }
  #contact .section.scope{
    margin-top: 0;
  }
  .vertical-menu{
    left: 20px;
  }
}

@media screen and (max-width: 480px) {
  .objects .gallery-item {
        flex: 1 1 100%;
        max-width: 100%;
    }

  .container-home {
      background-position: 15% 50%;
      background-repeat: no-repeat;
      background-size: cover;
  }
  #home p{
    top: 75%;
  }
}