@import url('https://fonts.googleapis.com/css2?family=Futura:wght@300;400;600;700&display=swap');

:root {
    --container-bg-color: #000;
    --left-bg-color: #000;
    --left-button-hover-color: #000;
    --right-bg-color: #000;
    --right-button-hover-color: #000;
    --hover-width: 75%;
    --other-width: 25%;
    --speed: 1000ms;
    --dvh: 100dvh; /* Variable for the dynamic viewport height */
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: 'futura-pt', 'Futura', sans-serif;
    overflow: hidden;
}

.container {
    position: relative;
    width: 100%;
    max-width: 100% !important;
    height: var(--dvh);
    background: var(--container-bg-color);
    display: flex;
    flex-direction: row; /* Default to row direction */
}

/* Fondo azul en la sección izquierda al hacer hover en la sección derecha */
.split.left.active:before {
    background: var(--left-bg-color);
    opacity: 1; /* Asegura que el fondo azul sea visible */
}

/* Fondo azul en la sección derecha al hacer hover en la sección izquierda */
.split.right.active:before {
    background: var(--right-bg-color);
    opacity: 1; /* Asegura que el fondo azul sea visible */
}

/* Oculta el fondo azul cuando no hay hover en ninguna de las secciones */
.split:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: opacity var(--speed) ease-in-out;
    opacity: 0; /* Oculta el fondo azul inicialmente */
}

.split {
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: width var(--speed) ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.split.left {
    background: url('https://images.squarespace-cdn.com/content/v1/65a3ea6575ac61244f96b3b9/d0d02c53-4173-4f24-b0bf-569a4ac94864/Portada+Arte.jpg') center center no-repeat;
    background-size: cover;
}

.split.right {
    background: url('https://images.squarespace-cdn.com/content/v1/65a3ea6575ac61244f96b3b9/1706996641050-9PVUAO8Y36K3FUVRPM0L/36.JPEG') center center no-repeat;
    background-size: cover;
}

/* Estilos para el h1 dentro de .split */
.split h1 {
    font-size: 4rem; /* Tamaño grande del texto */
    color: #fff; /* Color blanco */
    position: relative;
    z-index: 2;
    margin: 0; /* Elimina margen por defecto */
    font-weight: 300; /* Peso más ligero */
    line-height: 1.2; /* Ajusta la altura de línea */
    text-align: center; /* Centra el texto horizontalmente */
}

/* Estilos para los enlaces en el h1 */
.split h1 a {
    color: #fff; /* Color blanco para el texto del enlace */
    text-decoration: none; /* Elimina subrayado */
    font-family: 'Futura PT Demi', 'Futura', sans-serif; /* Usa la tipografía correcta */
}

/* Estilos para el botón dentro de .split */
.split .button {
    display: block;
    height: 2.5rem; /* Altura del botón */
    width: auto; /* Ajusta el ancho automáticamente */
    max-width: 10rem; /* Limita el ancho máximo del botón */
    text-align: center;
    color: #fff; /* Color del texto */
    border: 2px solid #fff; /* Borde blanco */
    font-size: 1rem; /* Tamaño del texto en el botón */
    font-weight: 500; /* Peso más ligero */
    text-transform: uppercase; /* Texto en mayúsculas */
    text-decoration: none; /* Elimina subrayado */
    line-height: 2.5rem; /* Alineación vertical del texto */
    padding: 0 1rem; /* Ajusta el padding horizontalmente */
    margin-top: 1rem; /* Elimina margen por defecto */
    z-index: 2;
    transition: background-color 0.3s, border-color 0.3s; /* Transiciones suaves para el cambio de color */
}

@media(max-width: 800px) {
    .split .button {
        max-width: 8rem; /* Limita el ancho máximo del botón en móviles */
        font-size: 1rem; /* Ajusta el tamaño del texto en el botón */
        padding: 0rem; /* Ajusta el padding horizontalmente */
    }
}

/* Estilo específico para la sección derecha en vista móvil */
@media (max-width: 800px) {
    .split.right.clicked {
        height: 70dvh;
    }

    .split.right.clicked ~ .split.left {
        background: red; /* Fondo rojo para la sección izquierda */
    }
}

/* Estado hover para el botón en la sección izquierda */
.split.left .button:hover {
    background-color: var(--left-button-hover-color);
    border-color: var(--left-button-hover-color);
}

/* Estado hover para el botón en la sección derecha */
.split.right .button:hover {
    background-color: var(--right-button-hover-color);
    border-color: var(--right-button-hover-color);
}

.hover-left .left {
    width: var(--hover-width);
}

.hover-left .right {
    width: var(--other-width);
}

.hover-right .right {
    width: var(--hover-width);
}

.hover-right .left {
    width: var(--other-width);
}

@media(max-width: 800px) {
    .container {
        flex-direction: column; /* Stack images vertically on small screens */
    }

    .split {
        width: 100%;
        height: 50dvh; /* Each split takes half the dynamic viewport height */
        transition: height var(--speed) ease-in-out; /* Transition for height change */
        flex-direction: column; /* Ensure content stacks vertically */
    }

    .split.left {
        order: 1; /* Ensure left image is on top */
    }

    .split.right {
        order: 2; /* Ensure right image is below */
    }

    .split.left.clicked {
        height: 70dvh; /* Increase height on click */
    }

    .split.right.clicked {
        height: 70dvh; /* Increase height on click */
    }

    .split h1 {
        font-size: 2rem;
    }

    .split .button {
        width: 10rem;
    }

    /* Hide desktop images on mobile */
    .desktop-only {
        display: none;
    }
}

@media(min-width: 801px) {
    /* Hide mobile images on desktop */
    .mobile-only {
        display: none;
    }
}

@media(max-height: 700px) {
    .split .button {
        margin-top: 0.5rem;
    }
}

/* General styles for the navbar */
.navbar {
    position: absolute; /* Position the navbar at the top */
    top: 0;
    left: 0;
    width: 100vw; /* Full width */
    padding: 1rem;
    background: rgba(0, 0, 0, 0); /* Transparent background */
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 21; /* Ensure it’s above other elements but below the overlay menu */
}

.navbar-brand {
    display: inline-block;
    padding-top: 0rem!important;
    padding-bottom: 0rem!important;
    margin-right: 0rem!important;
}

.logo {
    font-family: 'futura-pt', 'Futura', sans-serif; /* Usa Futura PT como la fuente principal */
    font-style: normal; /* Asegura que el estilo de la fuente sea normal */
    font-weight: 500; /* Establece el peso de la fuente a 500 para Demi */
    font-size: 36px; /* Ajusta el tamaño según lo que consideres más grande y adecuado */
    color: #fff; /* Color blanco para el texto del logo */
    text-transform: uppercase; /* Letras en mayúsculas para un aspecto más formal */
    letter-spacing: 1px; /* Espaciado entre letras para mejorar la legibilidad */
    margin-left: 3vw; /* Elimina márgenes por defecto */
    margin-top: 0!important; /* Elimina márgenes por defecto */
    padding: 0!important; /* Elimina rellenos por defecto */
    display: flex; /* Centra el texto dentro del contenedor si es necesario */
    align-items: center; /* Alinea verticalmente en el centro */
    justify-content: center; /* Centra horizontalmente si es necesario */
}

@media(max-width: 800px) {
    .logo {
        font-size: 1.5rem; /* Reduce el tamaño del texto del logo en móviles */
        margin-left: 2vw; /* Ajusta el margen izquierdo en móviles */
        margin-top: 0.5vw; /* Ajusta el margen superior en móviles */
    }
}

/* Hamburger menu styles */
.toggle-button {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    z-index: 22; /* Ensure it’s above the navbar */
    margin-right: 1vw;
}

.toggle-button .bar {
    background-color: #fff;
    height: 2px; /* Thinner bars */
    width: 30px;
    margin: 4px 0; /* Adjust spacing between bars */
    transition: 0.3s;
}

/* Overlay menu styles */
.overlay-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh; /* Usar dvh para altura dinámica */
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Asegura que los elementos estén centrados verticalmente */
    transform: translateY(-100%); /* Initially hide the menu */
    transition: transform 0.3s ease;
    z-index: 10; /* Ensure it’s above other elements */
}

/* When the menu is active, slide it into view */
.overlay-menu.active {
    transform: translateY(0);
}

/* Overlay menu content */
.overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los elementos horizontalmente */
    justify-content: center; /* Centra los elementos verticalmente */
    height: 100%; /* Asegura que el contenedor de los enlaces ocupe toda la altura del overlay */
}

/* Adjustments for overlay links */
.overlay-content a {
    font-family: 'futura-pt', 'Futura', sans-serif; /* Usa Futura PT como la fuente principal */
    font-style: normal; /* Asegura que el estilo de la fuente sea normal */
    font-weight: 400; /* Establece el peso de la fuente a 400 para normal */
    color: #fff; /* Color blanco para el texto del enlace */
    text-decoration: none; /* Elimina el subrayado del enlace */
    font-size: 4.5rem; /* Tamaño de fuente grande para el enlace */
    margin: 1rem; /* Espacio alrededor del enlace */
    transition: color 0.3s; /* Transición suave para el cambio de color */
}

/* Media query for smaller screens */
@media(max-width: 800px) {
    .overlay-content a {
        font-size: 2.5rem; /* Reduce el tamaño de fuente en móviles */
        margin: 0.5rem; /* Reduce el espacio alrededor del enlace en móviles */
    }
}


.overlay-content a:hover {
    color: #48cae4; /* Color al pasar el cursor sobre el enlace */
}

/* Change bars to X */
.toggle-button.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

.toggle-button.active .bar:nth-child(2) {
    opacity: 0;
}

.toggle-button.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -8px);
}



/* Contact */
body {
    font-family: 'Futura PT', sans-serif;
    background-color: #ffffff;
    color: #35373a;
}

h1 {
    font-weight: 700;
    color: #35373a;
}

h5 {
    font-weight: 600;
    color: #35373a;
}

.text-muted {
    color: #999 !important;
}

.social-links a {
    font-size: 1.5rem;
    color: #35373a;
}

.form-control {
    border-radius: 0;
}

.btn-primary {
    background-color: #d3b27c;
    border: none;
    border-radius: 0;
    color: #ffffff;
    padding: 0.5rem 1rem;
    text-transform: uppercase;
}

.btn-primary:hover {
    background-color: #b59a69;
}


/* Footer */
.site-footer
{
  background-color:#26272b;
  padding:45px 0 20px;
  font-size:15px;
  line-height:24px;
  color:#737373;
}
.site-footer hr
{
  border-top-color:#bbb;
  opacity:0.5
}
.site-footer hr.small
{
  margin:20px 0
}
.site-footer h6
{
  color:#fff;
  font-size:16px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.site-footer a
{
  color:#737373;
}
.site-footer a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links
{
  padding-left:0;
  list-style:none
}
.footer-links li
{
  display:block
}
.footer-links a
{
  color:#737373
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links.inline li
{
  display:inline-block
}
.site-footer .social-icons
{
  text-align:right
}
.site-footer .social-icons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:#33353d
}
.copyright-text
{
  margin:0
}
@media (max-width:991px)
{
  .site-footer [class^=col-]
  {
    margin-bottom:30px
  }
}
@media (max-width:767px)
{
  .site-footer
  {
    padding-bottom:0
  }
  .site-footer .copyright-text,.site-footer .social-icons
  {
    text-align:center
  }
}
.social-icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none
}
.social-icons li
{
  display:inline-block;
  margin-bottom:4px
}
.social-icons li.title
{
  margin-right:15px;
  text-transform:uppercase;
  color:#96a2b2;
  font-weight:700;
  font-size:13px
}
.social-icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
  background-color:#29aafe
}
.social-icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}
.social-icons a.facebook:hover
{
  background-color:#3b5998
}
.social-icons a.twitter:hover
{
  background-color:#00aced
}
.social-icons a.linkedin:hover
{
  background-color:#007bb6
}
.social-icons a.dribbble:hover
{
  background-color:#ea4c89
}
@media (max-width:767px)
{
  .social-icons li.title
  {
    display:block;
    margin-right:0;
    font-weight:600
  }
}