/* ==================================================================
   1. VARIABLES GLOBALES - TEMÁTICA PREMIUM (DORADOS & TIERRA)
   ================================================================== */
:root {
  --bg: #fdfbf9;              /* Crema arena suave */
  --muted: #8d8172;           /* Tierra grisáceo para textos */
  --accent: #c5a059;          /* DORADO CHAMPAGNE (Color principal) */
  --accent-dark: #b08d48;     /* Dorado bronce para hovers */
  --earth-dark: #2c241e;      /* Café Ébano para textos fuertes */
  --card: #ffffff;            /* Blanco puro para tarjetas */
  --shadow: 0 6px 18px rgba(44, 36, 30, 0.08); /* Sombra cálida */
  --max-width: 1200px;
  font-family: 'Poppins', sans-serif;
}

/* Reseteo básico */
*{box-sizing:border-box;margin:0;padding:0;max-width:100vw}
body{background:var(--bg);color:#111;overflow-x:hidden}

/* Contenedor principal centrado */
.container{max-width:var(--max-width);margin:auto;padding:18px;width:100%}


/* ==================================================================
   2. COMPONENTES GLOBALES (Botones, Tarjetas)
   ================================================================== */
/* Estilo base para tarjetas */
.card{background:var(--card);padding:14px;border-radius:12px;box-shadow:var(--shadow)}

/* Botones principales (Naranjas) */
.btn-primary{
  background:var(--accent);
  color:white;
  border:none;
  padding:12px 18px;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  transition:.25s ease;
}
.btn-primary:hover{
  background:#b88900; /* versión más oscura para hover */   
  transform:scale(1.05);
}


/* ==================================================================
   3. NAVEGACIÓN (NAVBAR)
   ================================================================== */
.nav{background:white;border-bottom:1px solid #eee;position:sticky;top:0;z-index:99;width:100%}
.nav-wrap{display:flex;justify-content:space-between;align-items:center}
.logo-img{width:120px}
.menu{display:flex;gap:16px;list-style:none}
.menu a{text-decoration:none;color:black;font-weight:600}
.hamb-btn{display:none} /* Botón hamburguesa oculto en escritorio */


/* ==================================================================
   4. ESTILOS ESPECÍFICOS: PÁGINA DE INICIO (CÁTALOGO)
   ================================================================== */

/* ---- Sección VUP ABOUT (Quienes somos) ---- */
.vup-about{
  width:100%;
  padding:50px 20px;
  background:white;
  display:flex;
  justify-content:center;
}

.vup-about-wrapper{
  max-width:1100px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  flex-wrap:wrap;
}

.vup-about-imgbox{
  width:300px;
  min-height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Animación y transición de la imagen About */
.vup-about-img{
  width:100%;
  height:auto;
  transition:opacity .6s ease; /* Suaviza el cambio de imagen JS */
  animation:vupFadeZoom 6s infinite alternate; /* Animación de "respiración" */
}

@keyframes vupFadeZoom{
  0%{opacity:1;transform:scale(1)}
  50%{opacity:.85;transform:scale(1.05)}
  100%{opacity:1;transform:scale(1)}
}

.vup-about-text{
  flex:1;
  font-size:18px;
  line-height:1.6;
}

.vup-about-text h2{
  font-size:30px;
  margin-bottom:10px;
  color:#c5a059; /* Usa el color de acento */
}




/* =========================================
   ESTILOS PARA EL CARRUSEL INFINITO DE PARTNERS
========================================= */

.vup-partners {
  background: #fafafa;
  padding: 40px 10px;
  text-align: center;
  margin-top: 30px;
  overflow: hidden; /* Asegura que no se salga nada del contenedor principal */
}

.vup-partner-title {
  font-size: 20px;
  margin-bottom: 25px;
  font-weight: 600;
  color: #333;
}

/* La "ventana" visible del carrusel */
.partner-carousel-window {
  width: 100%;
  max-width: 800px; /* Ancho máximo para que no se dispersen mucho */
  margin: 0 auto; /* Centrado */
  overflow: hidden; /* OCULTA los logos que se salen a los lados */
  position: relative;
}

/* El "riel" largo que contiene TODOS los logos (originales + duplicados) */
.partner-carousel-track {
  display: flex;
  align-items: center;
  gap: 50px; /* Espacio entre cada logo */
  /* LA ANIMACIÓN: nombre | duración | ritmo | repetición */
  animation: scrollLeft 20s linear infinite;
  /* Asegura que el ancho sea suficiente para todos los logos en una fila */
  width: max-content; 
}

/* Estilo de los logos individuales */
.partner-carousel-track img {
  height: 60px; /* Altura fija */
  width: auto;  /* Ancho automático */
  filter: grayscale(100%); /* Empiezan en blanco y negro */
  opacity: 0.6;
  transition: 0.3s;
  /* Evita que el usuario pueda arrastrar la imagen */
  user-select: none; 
}

/* Efecto al pasar el mouse: a color y más visibles */
.partner-carousel-track img:hover {
  filter: none;
  opacity: 1;
  cursor: pointer;
}


/* ================= DEFINICIÓN DE LA ANIMACIÓN ================= */
@keyframes scrollLeft {
  /* Empieza en la posición 0 (al principio) */
  0% {
    transform: translateX(0);
  }
  /* Termina moviéndose el 50% a la izquierda */
  /* Como duplicamos los logos, el 50% es exactamente donde empieza el segundo grupo */
  100% {
    transform: translateX(-50%);
  }
}







/* ---- GRID DEL CATÁLOGO DE PROPIEDADES ---- */
.catalog-grid{
  margin-top:20px;
  display:grid;
  /* Crea columnas automáticas con un ancho mínimo de 260px */
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
}

.property-card{
  background:white;
  border-radius:12px;
  padding:12px;
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
  text-align:center;
  transition:.25s;
}
.property-card:hover{
  transform:scale(1.02); /* Efecto zoom al pasar el mouse */
}
.property-img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:10px;
}
.property-card h3{
  margin:10px 0;
  font-size:18px;
  font-weight:600;
}

/* 3. La UBICACIÓN (Icono + Texto) */
.location-text {
    color: #666; /* Gris suave */
    font-size: 14px;
    margin: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center; /* Centrado */
    gap: 6px; /* Espacio entre icono y texto */
}

.location-text i {
    color: #c5a059; /* Icono en Naranja efb810*/
}

/* 4. El PRECIO (Naranja y Grande) */
.property-card .price {
    color: #efb810; /* Naranja fuerte */            
    font-weight: 700;
    font-size: 20px;
    margin: 10px 0 15px 0;
}











/* ==================================================================
   5. ESTILOS ESPECÍFICOS: PÁGINA DE PROPIEDAD INDIVIDUAL
   ================================================================== */
/* Layout principal (Grid 2 columnas) */
.main-grid{display:grid;grid-template-columns:1fr 350px;gap:18px;margin-top:15px}

/* ---- Galería de imágenes ---- */
.gallery{position:relative;width:100%;height:350px;overflow:hidden;border-radius:12px}
.slider-image{width:100%;height:100%;object-fit:cover;cursor:pointer}

/* Botones de control de la galería */
.ctrl-btn{
  background:var(--accent);
  color:white;
  border:none;
  font-size:22px;
  font-weight:bold;
  padding:12px;
  border-radius:6px;
  cursor:pointer;
  transition:.25s;
}
.ctrl-btn:hover{
  background:#c5a059;
  transform:scale(1.1);
}
.slider-controls{
  position:absolute;top:50%;left:0;right:0;
  display:flex;justify-content:space-between;
  padding:10px;transform:translateY(-50%)
}

/* ---- Lista de Especificaciones (Info Lateral) ---- */
.spec-list{margin-top:10px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;font-size:15px}

/* ---- Embeds (Mapa, Video, 3D) ---- */
.embed{height:250px;border-radius:12px;overflow:hidden;margin-top:15px}
.map-frame{height:260px;border-radius:12px;overflow:hidden}

/* ---- Modal (Visualizador de imagen grande) ---- */
.modal{
  display:none; /* Oculto por defecto */
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  justify-content:center;align-items:center;
  background:rgba(0,0,0,0.9);z-index:200;
  cursor:pointer;
}
.modal-content{max-width:90vw;max-height:90vh;border-radius:10px}
.close{color:white;position:absolute;top:20px;right:30px;font-size:45px}


/* ==================================================================
   6. FOOTER (PIE DE PÁGINA)
   ================================================================== */
.site-footer{background:#c5a059;margin-top:30px;padding:25px 0;width:100%}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}


/* ==================================================================
   7. RESPONSIVE (ADAPTACIÓN A MÓVILES)
   ================================================================== */
@media(max-width:900px){
  /* Ajustes para la sección About en tablets/móviles */
  .vup-about-text{text-align:center;}
  .vup-about-imgbox{width:240px;}
}

@media(max-width:850px){
  /* Layout de propiedad pasa a 1 sola columna */
  .main-grid{grid-template-columns:1fr}

  /* Menú de navegación móvil */
  .menu{
    display:none; /* Oculto inicialmente */
    flex-direction:column;background:white;
    position:absolute;right:20px;top:65px;padding:15px;border-radius:10px;
    box-shadow: var(--shadow); /* Agregué sombra para que se note más */
  }
  .menu.show{display:flex} /* Clase añadida con JS para mostrarlo */
  .hamb-btn{display:block;font-size:28px;background:none;border:none; cursor:pointer;}

  /* Footer pasa a 1 columna */
  .footer-grid{grid-template-columns:1fr;text-align:center}
}




/* =========================================
   ESTILOS PRECIO, ESTADO Y LISTA DE ICONOS
========================================= */

/* 1. Estilos del Precio y la etiqueta "Nueva" */
.price-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.price-header .price {
    font-size: 32px;
    font-weight: 800; /* Requiere que hayas importado el peso 800 en Google Fonts */
    color: var(--accent);
    line-height: 1;
}

.status-tag {
    background-color: #f6e8c5;
    color: var(--accent);
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-tag i {
    font-size: 16px;
}

/* 2. Estilos de la Lista para QUITAR PUNTOS y poner ICONOS */

/* IMPORTANTE: Esta es la regla que quita los puntos negros */
.spec-list.icon-list {
    list-style-type: none; /* <--- ESTO QUITA LOS PUNTITOS */
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 10px; /* Ajusté un poco el espacio vertical */
}

/* Alineación del texto con el icono */
.spec-list.icon-list li {
    display: flex;
    align-items: center;
    font-size: 15px;
}

/* Color y tamaño de los iconos naranjas */
.spec-list.icon-list li i {
    color: var(--accent);
    margin-right: 10px;
    font-size: 18px;
    width: 20px;
    text-align: center;
}












 /* ---------------------------
       WHATSAPP Y LLAMAR
    --------------------------- */
    
    .float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:20px;
	right:120px;
	background:linear-gradient(135deg, #d1b000, #d1b000);
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}
.float:hover {
	text-decoration: none;
	color: #25d366;
  background-color:#ffd700;
}

.my-float{
	margin-top:16px;
}





.floatp{
	position:fixed;
	width:60px;
	height:60px;
	bottom:20px;
	right:40px;
	background:linear-gradient(135deg, #d1b000, #d1b000);;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}
.floatp:hover {
	text-decoration: none;
	color: #000000;
  background-color:#ffd700;
}

.my-floatp{
	margin-top:16px;
}
/* ---------------------------
   NUEVO: BURBUJA DE MENSAJE ANIMADA ✨💬
--------------------------- */

/* La burbuja del mensaje */
.message-bubble {
    position: fixed;
    bottom: 90px; /* ⬆️ Un poco más arriba de los botones */
    right: 120px;  /* ⬅️ A la izquierda del botón de WhatsApp */
    background-color: white; ⚪
    color: #333; ⚫
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); 👻
    font-family: 'Poppins', sans-serif; /* Usa tu fuente */
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap; /* 🚫 Evita que el texto se rompa en líneas */
    z-index: 99; /* Debajo de los botones */
    
    /* Estado inicial: oculto 🙈 y pequeño */
    opacity: 0;
    transform: scale(0.8) translateX(20px);
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* ¡Efecto rebote suave! 🏀 */
}

/* Clase para mostrar la burbuja (se añade con JS) 👀 */
.message-bubble.show {
    opacity: 1;
    transform: scale(1) translateX(0);
    visibility: visible;
}

/* Opcional: Un pequeño triángulo tipo "bocadillo de cómic" 🗨️ */
.message-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 30px;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: white transparent;
    display: block;
    width: 0;
}

/* RESPONSIVE: Ajuste para celulares 📱 */
@media (max-width: 480px) {
    .message-bubble {
        right: 120px; /* Más pegado a la derecha ➡️ */
        bottom: 90px;
    }
}











    /* Contenedor del mapa */
    #map-interactivo-section {
        padding: 40px 20px;
        background: #f9f9f9;
    }
    
    /* Altura y estilo del div del mapa */
    #map { 
        height: 500px;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        z-index: 1;
    }

    /* ANIMACIÓN DE SALTO (Para el pin estándar) */
    @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-15px); }
    }

    /* Clase para el marcador saltarín */
    .icono-saltarin {
        animation: bounce 1.3s infinite ease-in-out;
        filter: drop-shadow(0 4px 3px rgba(0,0,0,0.3)); 
    }
    
    /* NUEVA CLASE para la imagen específica al pasar el mouse */
    .icono-hover-foto {
         filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
         transition: all 0.3s ease;
         /* Opcional: un borde blanco para que destaque la foto */
         border: 2px solid white; 
         border-radius: 4px; /* Bordes ligeramente redondeados */
         background: white;
    }














/* =========================================
   ESTILOS PARA LA SECCIÓN DE AMENIDADES (FILA HORIZONTAL)
========================================= */

/* Espaciado para la nueva sección completa */
.amenities-section {
    margin-top: 50px;
    margin-bottom: 50px;
}

/* Estilo para el título de la sección */
.section-title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 30px;
    color: #333;
}

/* CONTENEDOR PRINCIPAL (Fila Flex)
   Este es el cambio clave para que estén uno al lado del otro.
*/
.amenities-grid {
    display: flex;           /* Activa Flexbox */
    flex-wrap: wrap;         /* Permite que las tarjetas bajen de línea si no caben en pantallas pequeñas */
    justify-content: center; /* Centra todas las tarjetas horizontalmente */
    gap: 10px;               /* Espacio entre cada tarjeta */
}

/* Estilo específico para cada tarjeta de amenidad */
.amenity-box {
    /* Asegura que todas las tarjetas tengan un ancho base similar, 
       pero pueden crecer o encogerse ligeramente para llenar el espacio */
    flex: 1 1 150px;         /* crecer, encoger, ancho base mínimo */
    max-width: 200px;        /* Un ancho máximo para que no se vean demasiado estiradas */
    
    display: flex;
    flex-direction: column;  /* Icono arriba, texto abajo */
    align-items: center;     /* Centrado horizontal del contenido */
    justify-content: center; /* Centrado vertical del contenido */
    padding: 30px 15px;      /* Buen espacio interno */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Estilo del ÍCONO grande */
.amenity-box i {
    font-size: 25px;        /* Icono mucho más grande */
    color: var(--accent);   /* Tu color naranja */
    margin-bottom: 10px;    /* Espacio entre icono y texto */
}

/* Estilo del título de la amenidad */
.amenity-box h3 {
    font-size: 15px;        /* Texto un poco más pequeño para que quepa bien */
    font-weight: 600;
    margin: 0;
    color: #555;
}

/* --- EFECTO HOVER (AL PASAR EL MOUSE) --- */
.amenity-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}












/* =========================================
   ESTILOS PARA BOTONES DE COMPARTIR EN TÍTULO
========================================= */

/* Aseguramos que el título permita elementos en línea alineados verticalmente */
.title {
    display: flex;
    align-items: center; /* Centra verticalmente el texto y los botones */
    flex-wrap: wrap; /* Permite que bajen si la pantalla es muy pequeña */
    gap: 15px; /* Espacio entre el texto y el grupo de botones */
}

/* El contenedor de los botoncitos */
.share-actions-container {
    display: inline-flex; /* Se comporta como una línea de iconos */
    gap: 8px; /* Espacio entre cada icono */
    align-items: center;
}

/* Estilo base de los botones (enlaces y buttons) */
.share-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; /* Tamaño del círculo */
    height: 34px;
    border-radius: 50%; /* Los hace redondos */
    background-color: #f0f0f0; /* Fondo gris claro neutro */
    color: #666; /* Color de icono gris */
    border: none;
    cursor: pointer;
    text-decoration: none; /* Quita subrayado de enlaces */
    font-size: 16px; /* Tamaño del icono */
    transition: all 0.3s ease;
}

/* EFECTO HOVER (AL PASAR EL MOUSE) */
/* Todos cambian a tu color naranja principal y se elevan un poco */
.share-icon-btn:hover {
    background-color: var(--accent); /* Tu variable de color naranja */
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* (OPCIONAL) Si prefieres los colores de marca reales en hover, descomenta esto: */
/*
.share-icon-btn.whatsapp:hover { background-color: #25D366; color: white; }
.share-icon-btn.facebook:hover { background-color: #1877F2; color: white; }
*/






/* =========================================
   ESTILOS PARA EL NUEVO BOTÓN "ESCUCHAR"
========================================= */

.listen-audio-btn {
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre el icono de bocina y el texto */
    background-color: #fff; /* Fondo blanco como los otros */
    border: 1px solid #eee;
    border-radius: 50px; /* Bordes completamente redondeados (forma de pastilla) */
    padding: 8px 16px; /* Relleno para que se vea bien el texto */
    font-family: inherit; /* Usa la fuente de tu sitio */
    font-size: 14px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-left: 10px; /* Un poco de separación extra del grupo de iconos */
}

/* Tamaño del icono de la bocina */
.listen-audio-btn i {
    font-size: 16px;
}

/* EFECTO HOVER (AL PASAR EL MOUSE) */
/* Copiamos el mismo efecto naranja que usan tus otros botones para consistencia */
.listen-audio-btn:hover {
    background-color: var(--accent); /* Tu color naranja principal */
    color: white;
    border-color: var(--accent);
    transform: translateY(-3px); /* Pequeño saltito */
    box-shadow: 0 5px 10px rgba(255, 122, 0, 0.3);
}









/* =========================================
   ESTILOS PARA EL BLOQUE DE FIRMA
========================================= */

.signature-block {
    margin-top: 25px; /* Espacio arriba de la firma */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alineado a la izquierda con el texto */
}

/* Estilo de la imagen de la firma */
.signature-img {
    width: 180px; /* Tamaño controlado para que no se vea enorme */
    height: auto;
    margin-bottom: 5px; /* Espacio pequeño entre imagen y texto */
    opacity: 0.9; /* Un poco más suave */
    /* Si la firma es negra y quieres que sea del color naranja de tu marca, descomenta esto: */
    /* filter: drop-shadow(0 0 0 var(--accent)); */
}

/* Contenedor del texto debajo de la firma */
.signature-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

/* El nombre "Ruth Silva" escrito normal */
.signature-text .name {
    font-weight: 600;
    font-size: 16px;
    color: #333;
}

/* La palabra "Fundadora" en pequeño */
.signature-text .title {
    font-size: 13px; /* Más pequeño */
    color: var(--muted); /* Color gris suave (usando tu variable existente) */
    font-weight: 400;
}










/* =================================================
   ESTILOS PARA LAS PESTAÑAS (TABS) MULTIMEDIA
   No afecta a otros elementos del sitio.
================================================= */

/* Espaciado externo de la nueva sección */
.multimedia-tabs-section {
    margin-top: 50px;
    margin-bottom: 50px;
}

/* Contenedor flexible para los botones superiores */
.tab-buttons-container {
    display: flex;
    gap: 5px; /* Espacio pequeño entre pestañas */
    margin-bottom: -1px; /* Superposición sutil con el borde de la tarjeta */
    padding-left: 15px; /* Alineación visual */
    flex-wrap: wrap; /* Permite que se adapten en móviles */
}

/* Estilo base del botón de pestaña */
.tab-btn {
    background-color: #efb810; /* Gris claro neutro */
    border: none;
    padding: 12px 25px;
    font-size: 16px;
    font-family: inherit; /* Usa la fuente de tu sitio */
    font-weight: 600;
    color: #777;
    cursor: pointer;
    border-radius: 8px 8px 0 0; /* Esquinas superiores redondeadas */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio icono-texto */
}

.tab-btn i { font-size: 18px; }

/* Efecto al pasar el mouse por una pestaña inactiva */
.tab-btn:hover {
    background-color: #c5a059;
    color: #555;
}

/* --- ESTADO ACTIVO (Pestaña seleccionada) --- */
.tab-btn.active {
    background-color: var(--accent); /* Usa tu color naranja principal */
    color: white; /* Texto blanco para contraste */
}

/* El contenedor tipo tarjeta donde se ve el contenido */
.tab-display-area.card {
    background: white;
    position: relative;
    z-index: 2; /* Se asegura de quedar por encima del borde de los botones */
    padding: 20px;
    border-top-left-radius: 0; /* Cuadra la esquina para unir con la primera pestaña */
}

/* Contenedor para dar una altura fija a los iframes y evitar que la página "salte" */
.iframe-container {
    width: 100%;
    height: 450px; /* Altura cómoda para ver video o mapa */
    position: relative;
    background-color: #eee; /* Fondo de carga mientras aparece el iframe */
}

.iframe-container iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
}

/* --- MECANISMO DE VISIBILIDAD --- */
/* Por defecto, todos los contenidos están ocultos */
.tab-content {
    display: none;
}

/* Solo el contenido con la clase 'active' es visible */
.tab-content.active {
    display: block;
    animation: fadeInSoft 0.4s ease; /* Suave transición de entrada */
}

@keyframes fadeInSoft {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}


























































    /* 1. ESTILOS (Solo afectan a esta sección gracias al prefijo .vup-) */
    
    .vup-taller {
        background: #fafafa;
        padding: 50px 10px;
        text-align: center;
        overflow: hidden;
        position: relative;
        font-family: sans-serif;
    }

    .vup-taller-title {
        font-size: 26px;
        margin-bottom: 40px;
        font-weight: 700;
        color: #333;
        text-transform: uppercase;
    }

    /* Ventana del carrusel */
    .taller-carousel-window {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        /* Efecto desvanecido en los bordes */
        mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    }

    /* Riel animado */
    .taller-carousel-track {
        display: flex;
        align-items: center;
        gap: 80px;
        width: max-content;
        /* Animación continua */
        animation: scrollInfinito 25s linear infinite;
    }

    /* Pausa al pasar el mouse */
    .taller-carousel-track:hover {
        animation-play-state: paused;
    }

    /* Imágenes (Botones) */
    .taller-carousel-track img {
        height: 180px;
        width: auto;
        object-fit: contain;
        cursor: pointer; /* IMPORTANTE: Esto le dice al usuario que es clicable */
        transition: transform 0.3s ease;
    }

    .taller-carousel-track img:hover {
        transform: scale(1.08); /* Efecto zoom al pasar mouse */
    }

    @keyframes scrollInfinito {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

    /* 2. ESTILOS DE LA VENTANA MODAL (POPUP) */
    .vup-modal-overlay {
        display: none; /* Oculto por defecto */
        position: fixed;
        /* Z-INDEX MUY ALTO: Asegura que flote sobre cualquier menú o chat de la web */
        z-index: 2147483647; 
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9); /* Fondo oscuro */
        backdrop-filter: blur(5px);
        align-items: center;
        justify-content: center;
    }

    .vup-modal-content {
        position: relative;
        width: 90%;
        max-width: 800px;
        background: #000;
        border-radius: 12px;
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    }

    .vup-close-btn {
        position: absolute;
        top: -45px;
        right: 0;
        color: #fff;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
        line-height: 1;
        transition: color 0.3s;
    }
    
    .vup-close-btn:hover {
        color: #ff4444; /* Rojo al pasar el mouse */
    }

    .vup-video-container {
        position: relative;
        padding-bottom: 56.25%; /* Proporción 16:9 (Youtube Standard) */
        height: 0;
        overflow: hidden;
        border-radius: 12px;
    }

    .vup-video-container iframe {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
    }

    /* Ajustes para celular */
    @media (max-width: 768px) {
        .taller-carousel-track img { height: 100px; gap: 40px; }
        .vup-taller-title { font-size: 20px; }
    }








/* ==================================================================
   12. BARRA LEGAL INFERIOR (Footer Negro)
   ================================================================== */
.legal-footer {
    background-color: #1a1a1a; /* Color casi negro */
    color: #ffffff;            /* Letras blancas */
    padding: 0px 0;
    width: 100%;
    border-top: 1px solid #333; /* Línea sutil de separación */
    font-size: 14px;
    font-weight: 300;
}

/* Contenedor flexible para alinear texto izq y enlaces der */
.legal-flex {
    display: flex;
    justify-content: space-between; /* Separa los elementos a los extremos */
    align-items: center;
    flex-wrap: wrap; /* Permite que se adapte si falta espacio */
    gap: 15px;
}

.copyright-text {
    margin: 0;
    opacity: 0.9;
}

/* Enlaces (Aviso y Términos) */
.legal-links {
    display: flex;
    align-items: center;
    gap: 15px;
}

.legal-links a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 400;
}

/* Efecto Hover: Se pone naranja al pasar el mouse */
.legal-links a:hover {
    color: var(--accent); /* Tu color naranja */
    text-decoration: underline;
}

.separator {
    color: #555; /* Color del palito separador */
}

/* RESPONSIVE: En celular se centra todo */
@media (max-width: 768px) {
    .legal-flex {
        flex-direction: column; /* Uno debajo del otro */
        text-align: center;
        justify-content: center;
    }
    
    .legal-links {
        justify-content: center;
        font-size: 13px;
    }
}




/* ==================================================================
   13. CONTACTO 
   ================================================================== 

    /* 1. Contenedor Principal con Grid */
    .contact-layout {
        display: grid;
        grid-template-columns: 1fr 1.5fr; /* Columna info más angosta, Mapa más ancho */
        gap: 30px;
        margin-bottom: 40px;
    }

    /* 2. Tarjetas Limpias */
    .contact-card {
        background: #fff;
        border-radius: 15px; /* Bordes redondeados como tu estilo */
        box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Sombra suave */
        padding: 30px; /* MUCHO ESPACIO INTERNO para que no se vea revuelto */
        height: 100%;
    }

    /* 3. Organización de los Items de Texto (Icono + Texto) */
    .contact-item {
        display: flex; /* Esto evita que el texto se encime */
        align-items: flex-start;
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 1px solid #f0f0f0; /* Línea separadora sutil */
    }
    
    .contact-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    .contact-icon {
        background-color: #fff0ec; /* Color suave de fondo para el icono */
        color: #c5a059; /* Tu color naranja */
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 20px;
        margin-right: 20px; /* Separación entre icono y texto */
        flex-shrink: 0; /* Evita que el icono se aplaste */
    }

    .contact-text h4 {
        margin: 0 0 5px 0;
        font-size: 16px;
        font-weight: 700;
        color: #333;
    }

    .contact-text p, .contact-text a {
        margin: 0;
        font-size: 15px;
        color: #666;
        line-height: 1.6;
        text-decoration: none;
    }

    /* 4. Formulario */
    .form-section {
        margin-top: 30px;
    }
    
    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 20px;
    }

    .form-input {
        width: 100%;
        padding: 15px;
        border: 1px solid #e1e1e1;
        border-radius: 8px;
        background: #fcfcfc;
        font-family: 'Poppins', sans-serif;
    }

    .btn-send {
        background: #daa520;
        color: white;
        padding: 15px 40px;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        width: 100%;
        transition: 0.3s;
    }
    
    .btn-send:hover {
        background: #c5a059;
    }

    /* Responsive: En celular se pone uno debajo del otro */
    @media (max-width: 768px) {
        .contact-layout { grid-template-columns: 1fr; }
        .form-row { grid-template-columns: 1fr; }
    }
    
    
    
    
    
  /* ==================================================================
   13. banner horizontal index 
   ==================================================================   
    
/* ============================================================
   ESTILOS PARA MÚLTIPLES BANNERS (CLASES)
   ============================================================ */

/* Contenedor principal del banner */
.hero-banner-wrapper {
    width: 100%;
    max-width: 1200px; 
    height: 480px;      
    margin: 20px auto;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

/* El marco que contiene la imagen y el texto */
.banner-slide {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #000;
}

/* La imagen con efecto de transición */
.js-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: opacity 1.2s ease-in-out;
    opacity: 1;
}

/* Efecto traslúcido para el cambio de imagen */
.fade-out { 
    opacity: 0 !important; 
}

/* LA FRANJA POLARIZADA (Efecto Cristal) */
.banner-caption-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    text-align: center;
    background: rgba(0, 0, 0, 0.1); 
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* El texto elegante */
.js-banner-text {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 1.3rem;
    font-weight: 300;
    margin: 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

/* Adaptación para móviles */
@media (max-width: 768px) {
    .hero-banner-wrapper { height: 280px; }
    .js-banner-text { font-size: 0.9rem; }
}

/* BOTÓN ELEGANTE */
.btn-elegant {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    padding: 8px 25px;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 2px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px;
    transition: all 0.4s ease;
}

.btn-elegant:hover {
    background: #c5a059;
    border-color: #c5a059;
    color: #000;
}


/* AJUSTE PARA QUE LA IMAGEN SE VEA COMPLETA EN MÓVIL */
@media (max-width: 768px) {
    .hero-banner-wrapper { 
        height: auto !important; /* Quitamos el alto fijo de 280px o 250px */
        min-height: 200px;       /* Un mínimo para que no desaparezca */
    }

    .banner-slide {
        height: auto !important;
    }

    .js-banner-img {
        height: auto !important;  /* La imagen define su propia altura proporcional */
        object-fit: contain !important; /* "Contain" obliga a mostrar la imagen completa */
        background-color: #000;   /* Fondo negro por si la imagen es muy delgada */
    }

    .js-banner-text { 
        font-size: 0.85rem;      /* Texto un poco más pequeño para que quepa */
        letter-spacing: 1px;
    }

    .banner-caption-bar {
        padding: 10px;           /* Franja más delgada en móvil */
    }

    .btn-elegant {
        padding: 5px 15px;       /* Botón más compacto */
        font-size: 0.65rem;
    }
}