* {
  transition: all 0.3s ease-in-out;
}
/* -------------------- ESTILOS GENERALES -------------------- */
body {
  font-family:'Poppins',sans-serif;
  color:#fff;
  background:#000;
  scroll-behavior:smooth;
  overflow-x:hidden;
  letter-spacing: 2px;

  /**background: linear-gradient(180deg, #000 0%, #111 100%);***/

}

mark {
  color: #c8b273;            /* Color dorado */
  background: transparent;  /* Fondo sutil */
  font-weight: 600;           /* Un poco más grueso */
  font-size: 1.5rem;           /* Ligeramente más grande que el texto normal */
  padding: 0.2em 0.4em;       /* Espacio alrededor del texto */
  /*border-radius: 4px;*/         /* Bordes redondeados */
  /*letter-spacing: 0.5px;*/      /* Separa un poco las letras */
  display: inline-block;      /* Para poder usar padding y margin correctamente */
  transition: all 0.3s ease; /* Pequeña animación al hover si querés */
}

mark:hover {
  /*background: rgba(200,178,115,0.2);*/ /* Efecto sutil al pasar el mouse */
  transform: scale(1.05);            /* Pequeño efecto de zoom */
}

h1,h2,h3,h4,h5{font-family:'Montserrat',sans-serif;color:#c8b273;transition:all 0.8s ease;}

h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: #c8b273;
  border-radius: 3px;
  transition: width 0.5s ease;
}

h2:hover::after {
  width: 180px;
}

section p {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  /*text-align: justify;*/
}

/* --- Mejora visual de párrafos --- */
p {
  font-size: 1.1rem !important;          /* Tamaño cómodo en escritorio */
  line-height: 1.8 !important;           /* Espaciado entre líneas, más aireado */
  margin-bottom: 1.2rem !important;      /* Separación entre párrafos */
  color: #ddd;                /* Texto más suave, menos blanco puro */
  letter-spacing: 0.5px !important;      /* Separación leve entre letras */
}



/* --- Decoradores visuales --- */
.text-gold { color: #c8b273; font-weight: 600; }
.text-highlight { background: rgba(200,178,115,0.1); padding: 2px 6px; border-radius: 4px; }

section .row { margin-bottom: 40px; }

a{text-decoration:none;}
section{padding:60px 0;}
.bg-light{background:#000!important;}/*background:#f9f9f9!important;*/
.container img{max-width:100%;border-radius:10px;transition:all .4s;cursor:pointer;}

/* -------------------- NAVBAR -------------------- */
.navbar{background:#000 !important;backdrop-filter:blur(6px);}
.navbar-brand{font-weight:bold;color:#c8b273!important;font-size:1.5rem;}
.nav-link{color:#c8b273!important;transition:color .3s;}
.nav-link:hover{color:#B22222!important;}
.navbar img.logo{
  width: 80px;
  height: 80px;
  /*border-radius:50%;
  border:2px solid #c8b273;*/
  margin-right:10px;
}

.custom-toggler .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(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

#langSelector{margin-left:auto;font-weight:600;display:flex;align-items:center;}
#langSelector span{
    cursor:pointer;
    margin:0 5px;
    transition:all .3s ease;
}
/* Idioma activo */
#langSelector span.active{
    color:#B22222;
    font-weight:700;
    text-decoration:underline;
    transform:scale(1.1);
}

/* -------------------- HEADER VIDEO -------------------- */
header{position:relative;width:100%;overflow:hidden;}
/*header video{width:100%;height:auto;display:block;}*/

/* Estilo para el contenedor del video */
#inicio {
  position: relative;
  width: 100%;
  height: 100vh; /* Esto asegura que el header ocupe toda la altura de la ventana */
  overflow: hidden; /* Elimina cualquier parte del video que sobresalga */
}

/* Estilo para el video */
#inicio video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Hace que el video cubra todo el espacio del contenedor sin deformarse */
  z-index: -1; /* Envía el video al fondo */
}

/* Estilo para el contenedor del texto */ /*
.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/ /* Centra el texto en el medio del video */ /*
  text-align: center;
  color: white;*/ /* Puedes cambiar el color del texto */ /*
  font-family: Arial, sans-serif;
}*/

/* Estilo para el título */ /*
.overlay h1 {
  font-size: 3em;
  margin: 0;
  letter-spacing: 5px;
}*/

/* Estilo para el párrafo */ /*
.overlay p {
  font-size: 1.2em;
  margin-top: 10px;
  letter-spacing: 2px;
}*/

/* -------------------- PRESENTACIÓN -------------------- */
.presentation{
  padding:60px 20px;
  text-align:center;
  /*opacity:0;*/
  transform:translateY(50px) scale(0.95);
  transition:all 0.8s cubic-bezier(0.68,-0.55,0.265,1.55);
  max-width:800px;
  margin:auto;
}
.presentation.visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
.btn-tango{
  background:#8B0000;
  color:#fff;
  border-radius:30px;
  padding:10px 25px;
  border:1px solid #B22222;
  transition:all .3s;
}
.btn-tango:hover{
  background:#B22222;
  transform:scale(1.08);
}

/* -------------------- SOBRE MÍ ----------------- */
/* Estilo para el video */
#biografia video {
  /*position: absolute;
  top: 0;
  left: 0;*/
  width: 95%;
  height: 100%;
  /*object-fit: cover;*/ /* Hace que el video cubra todo el espacio del contenedor sin deformarse */
  /*z-index: -1;*/ /* Envía el video al fondo */
}


/*------ video ------ */
.video-container {
  width: 95%;
  height: 95%;
  overflow: hidden;
  border-radius: 10px; /* opcional, para esquinas redondeadas */
}

.video-container video {
  width: 95%;
  height: 95%;
  object-fit: cover; /* hace que el video se recorte proporcionalmente para llenar el contenedor */
  display: block;
}

/* -------------------- ANIMACIONES SCROLL -------------------- */
.fade-slide{
  opacity:0;
  transform:translateY(50px) scale(0.95);
  transition:all 0.8s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.fade-slide.visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* -------------------- FORMULARIO -------------------- */
#formReserva{
  background:rgba(255,255,255,.95);
  padding:25px;
  border-radius:15px;
  border:1px solid #B22222;
  box-shadow:0 4px 15px rgba(0,0,0,.1);
}
#formReserva label{color:#c8b273;font-weight:600;}
#formReserva input,#formReserva select{
  background:#fff;
  color:#333;
  border:1px solid #B22222;
  border-radius:10px;
  padding:10px;
}
#formReserva input:focus,#formReserva select:focus{
  outline:none;
  border-color:#B22222;
  box-shadow:0 0 8px rgba(178,34,34,.3);
}
#formReserva button{
  background:#8B0000;
  color:#fff;
  font-weight:bold;
  border-radius:30px;
  padding:12px;
  transition:.3s;
  border:none;
}
#formReserva button:hover{
  background:#B22222;
  color:#fff;
  transform:scale(1.05);
}

/* --- Separador dorado Horinzontal elegante --- */
.gold-divider {
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #c8b273, transparent);
  margin: 30px auto;
  border-radius: 5px;
  opacity: 0.8;
}

/* -------------------- REDES -------------------- */
.social-icons a{font-size:28px;margin:0 10px;color:#333;transition:.3s;}
.social-icons a:hover{color:#B22222;transform:scale(1.2);}

/* -------------------- FOOTER -------------------- */
footer{background:#000;padding:20px 0;text-align:center;color:#555;}

/* -------------------- WHATSAPP FLOTANTE -------------------- */
.whatsapp-float{position:fixed;bottom:20px;right:20px;z-index:100;}
.whatsapp-float img{width:60px;height:60px;border-radius:50%;box-shadow:0 3px 10px rgba(0,0,0,.3);}


.col-md-6 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* -------------------- MEDIA QUERIES -------------------- */
@media(max-width:768px){
   p {
    font-size: 1rem;
    line-height: 1.6;
  }

  /* --- Espacio lateral entre texto e imagen --- */
  .row.align-items-center .col-md-6:first-child {
    padding-right: 30px;
  }
  .row.align-items-center .col-md-6:last-child {
    padding-left: 30px;
  }



  header .presentation{text-align:center;padding:40px 20px;}
  #langSelector{margin-top:10px;text-align:center;justify-content:center;}
  /* Estilo para el contenedor del texto */
/*.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/ /* Centra el texto en el medio del video *//*
}*/

/* Estilo para el título *//*
.overlay h1 {
  font-size: 2em;
  letter-spacing: 3px;
}*/

/* Estilo para el párrafo *//*
.overlay p {
  font-size: 1em;
  margin-top: 5px;
  letter-spacing: 2px;
}*/

/* -------------------- SOBRE MÍ ----------------- */
/* Estilo para el video */
#biografia video {
  width: 100%;
  height: 100%;
}


/*------ video ------ */
.video-container {
  width: 100%;
  height: 100%;
}

.video-container video {
  width: 100%;
  height: 100%;
}

}

/* --- Borde dorado entre texto e imagen --- */
@media (min-width: 768px) {
  .row.align-items-center .col-md-6:first-child {
    position: relative;
  }

  /*.row.align-items-center .col-md-6:first-child::after {
    content: "";
    position: absolute;
    right: -15px;
    top: 10%;
    width: 2px;
    height: 95%;
    margin: 20px;
    background: linear-gradient(to bottom, transparent, #c8b273, transparent);
    opacity: 0.8;
  }*/
}