@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* Reset */
*{margin:0;padding:0;box-sizing:border-box;font-family:'montserrat', sans-serif}
body{line-height:1.6;color:#333;background:#fff}

/* Header */
header {
  background: #003366 url("img/banner menu.png") no-repeat center/cover;
  position: sticky; /* Make header sticky to stay at the top */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  justify-content: flex-start; /* ahora los elementos quedan a la izquierda */
  align-items: center;
  padding: 3px 30px;
  color: #fff;
  transition: background .25s ease, padding .2s ease;
}

/* Nuevo estilo para el enlace del logo */
.logo-link {
  text-decoration: none;
  color: inherit; /* Hereda el color del header (#fff) */
  display: flex;
  align-items: center;
}

header .logo{font-size:1.5rem;font-weight:700}
header nav ul{display:flex;list-style:none}
header nav ul li{margin-left:20px}
header nav ul li a{color:#fff;text-decoration:none;position:relative;transition:color .3s ease}
header nav ul li a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:#f0c040;transition:width .3s ease}
header nav ul li a:hover{color:#f0c040}
header nav ul li a:hover::after{width:100%}
.menu-toggle{display:none;font-size:1.8rem;cursor:pointer;transition:transform .3s ease}
.menu-toggle.active{transform:rotate(90deg)}

/* Empuja el nav hacia la derecha */
header .nav {
  margin-left: auto;
}

/* Separación entre logo-imagen y texto */
.header-left-logo {
  max-height: 64px;
  width: auto;
  margin-right: 10px;
  display: inline-block;
}

/* Pequeño margen para el texto/logo textual */
header .logo {
  margin-left: 6px;
}

/* Hero */
.hero{background:url(./img/banner.jpg) no-repeat center center/cover;height:80vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#ffffff;padding:20px}
.hero h1{font-size:3.0rem;margin-bottom:10px;transition:transform .4s ease,color .3s ease;transform-origin:center;animation:heroZoom 8s ease-in-out infinite; font-family:'montserrat', sans-serif}
.hero h1:hover,.hero h1:focus{transform:scale(1.08);outline:none}
@keyframes heroZoom{0%{transform:scale(1)}50%{transform:scale(1.04)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hero h1{animation:none;transition:transform .25s ease,color .3s ease}}
/* Agrandar subtítulo en el hero */
.hero p {
  font-size: 1.50rem; /* ajusta a tu gusto (ej. 1.35rem para más grande) */
  line-height: 1.4;
  max-width: 900px;
  margin-top: 12px;
  padding: 0 8px;
}

/* Ajuste en móvil */
@media (max-width:700px) {
  .hero p { font-size: 1.50rem; padding: 0 14px; }
}

/* Propiedades (index) */
.propiedades{padding:50px 20px;text-align:center}
.propiedades h2{margin-bottom:30px;font-size:1.5rem; padding: 0 20px;}
.cards{
  display: flex;
  gap: 20px;
  overflow-x: auto; /* Habilita el scroll horizontal */
  padding: 10px; /* Espacio visual */
  padding-bottom: 20px; /* Espacio para la barra de scroll */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
}
.card{background:#fff;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.1);padding:15px;transition:transform .3s; flex: 0 0 290px; scroll-snap-align: start;}
.card:hover{transform:translateY(-10px)}
.card .card-image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
.card img{width:100%;border-radius:10px; display: block; height: 180px; object-fit: cover;}
.card h3{margin:15px 0 10px}
.card p{color:#555;margin-bottom:12px}
.card button{background:#003366;color:#fff;border:none;padding:10px 15px;border-radius:5px;cursor:pointer;transition:background .3s}
.card button:hover{background:#f0c040;color:#000}

/* Botones de navegación para las tarjetas de propiedades */
.card-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.45);
  color: white;
  border: none;
  cursor: pointer;
  z-index: 2;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.card:hover .card-nav-btn {
  opacity: 1;
}
.card-nav-btn.prev { left: 10px; }
.card-nav-btn.next { right: 10px; }
.card-nav-btn i { font-size: 14px; }

/* Contenedor para el botón "Ver Todo" */
.ver-todo-container {
  margin-top: 30px;
}

/* Nosotros */
.nosotros {
  background: url('./img/banner.jpg') no-repeat center center;
  background-attachment: fixed;
  
  position: relative;
  padding: 80px 20px;
  text-align: center;
  color: #fff;
  z-index: 0;
  background-size: cover;
}

.nosotros::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  /* Superposición oscura para legibilidad */
  background: rgba(0, 51, 102, 0.8);
  z-index: -1;
}
.nosotros h2{margin-bottom:25px; font-size: 1.5rem;}
.nosotros-content {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
  max-width: 800px;
  margin: 0 auto;
  scrollbar-width: none; /* Ocultar scrollbar en Firefox */
}
.nosotros-content::-webkit-scrollbar { display: none; } /* Ocultar scrollbar en Chrome/Safari */

.nosotros-card {
  flex: 0 0 100%;
  scroll-snap-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 25px;
  border-radius: 10px;
}
.nosotros-card p { text-align: justify; line-height: 1.8; }

/* Nuestro Equipo */
.team {
  padding: 50px 0; /* Adjust padding to remove side padding */
  text-align: center;
  background: #fff;
  overflow: hidden; /* Hide overflowing content */
}
.team h2 {
  margin-bottom: 30px;
  font-size: 1.5rem;
  padding: 0 20px; /* Add padding back to the title */
}

/* Wrapper genérico para carruseles */
.carousel-wrapper,
.team-carousel-wrapper { /* .team-carousel-wrapper se mantiene por retrocompatibilidad */
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
.team-cards {
  /* from grid to flex */
  display: flex;
  /* add overflow and scroll behavior */
  overflow-x: auto;
  gap: 25px;
  padding: 10px 20px; /* Add some padding for visual spacing */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px; /* Espacio para la barra de scroll */
}
.team-card {
  /* from responsive grid item to fixed flex item */
  flex: 0 0 220px; /* Give cards a fixed base width */
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: transform .3s, box-shadow .3s;
  scroll-snap-align: start; /* Snap to start of card */
}
.team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.team-card img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 15px; border: 3px solid #f0c040; cursor: pointer; }
.team-card h3 { margin-bottom: 5px; font-size: 1.2rem; color: #003366; }
.team-card p { color: #555; font-size: 0.95rem; }

/* New Carousel Buttons */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: background-color 0.2s, box-shadow 0.2s;
}
.carousel-btn:hover { background-color: #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.carousel-btn.prev { left: -10px; }
.carousel-btn.next { right: -10px; }
.carousel-btn i { font-size: 16px; color: #333; }

/* Contacto */
.contacto{padding:50px 20px;text-align:center}
.contacto form{max-width:500px;margin:auto;display:flex;flex-direction:column}
.contacto input,.contacto textarea{margin-bottom:15px;padding:10px;border-radius:5px;border:1px solid #ccc}
.contacto button{background:#003366;color:#fff;border:none;padding:12px;border-radius:5px;cursor:pointer;transition:background .3s}
.contacto button:hover{background:#f0c040;color:#000}

.contacto > p {
  max-width: 600px;
  margin: 0 auto 25px auto;
  color: #555;
  line-height: 1.7;
}

/* Dropdown Menu */
.dropdown {
  position: relative;
}

.dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
 
  background-image: url("img/banner menu.png");
  background-size: cover;
  background-position:left;
  min-width: 220px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  z-index: 1;
  list-style: none;
  padding: 10px 0;
  border-radius: 0 0 8px 8px;
}

/* Transición suave para el submenú */
.dropdown .dropdown-menu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(.4,0,.2,1), opacity 0.25s;
  display: block; /* Importante: siempre block para que la transición funcione */
  pointer-events: none;
}

.dropdown.open .dropdown-menu {
  max-height: 400px; /* Ajusta según el contenido */
  opacity: 1;
  pointer-events: auto;
}

/* En desktop, sigue mostrando el menú al hacer hover */
@media (min-width: 769px) {
  .dropdown:hover .dropdown-menu {
    max-height: 400px;
    opacity: 1;
    pointer-events: auto;
  }
}

.dropdown-menu li a {
  padding: 12px 20px;
  display: block;
  text-align: left;
}
.dropdown-menu li a::after { display: none; }
.dropdown > a i { font-size: 0.8em; margin-left: 5px; }

/* Botón para cerrar el submenú en móvil */
.dropdown-close-item {
  display: none;
}

/* Footer */
footer {
  background-color: #003366;
  background-image: url("img/banner menu.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  color: #ffffff;
  padding: 20px;
  text-align: center;
}
footer .social a{position:relative;display:inline-block;color:#fff;font-size:1.5rem;margin:0 12px;transition:color .3s ease}
footer .social a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:#f0c040;transition:width .3s ease}
footer .social a:hover{color:#f0c040}
footer .social a:hover::after{width:100%}

/* Footer: contacto (tel / email / rol) */
.footer-contact{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-bottom:10px;
  font-weight:600;
}

/* Enlaces (tel / mail) */
.footer-contact a{
  color:#ffffff; /* azul legible */
  text-decoration:none;
  font-size:1.05rem;
}

/* Estilos por elemento (puedes ajustar tamaños) */
.footer-phone a,
.footer-email a{
  display:inline-block;
  padding:2px 4px;
}

.footer-role{
  color:#ffffff;
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:uppercase;
  font-size:0.95rem;
}

/* Copyright más pequeño y sutil */
footer > p{
  margin-top:8px;
  font-size:0.9rem;
  color:#ffffff;
}

/* Layout en pantallas grandes: mostrar en una línea */
@media (min-width:700px){
  .footer-contact{
    flex-direction:row;
    justify-content:center;
    gap:20px;
  }
}



/* Iconos sociales flotantes */
.social-floating{position:fixed;right:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:9999;pointer-events:auto}
.social-floating a{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:#fff;color:#111;border-radius:50%;box-shadow:0 6px 14px rgba(18,18,18,.12);transition:transform .18s ease,background .18s ease,color .18s ease;text-decoration:none;font-size:20px;position:relative}
.social-floating a[aria-label="WhatsApp"]:hover{background:#25D366;color:#fff;transform:translateX(-8px)}
.social-floating a[aria-label="Facebook"]:hover{background:#1877F2;color:#fff;transform:translateX(-8px)}
.social-floating a[aria-label="Instagram"]:hover{background:linear-gradient(45deg,#feda75,#d62976,#962fbf);color:#fff;transform:translateX(-8px)}
.social-floating a[aria-label="TikTok"]:hover{background:#010101;color:#fff;transform:translateX(-8px)}
.social-floating a:focus{outline:3px solid rgba(0,0,0,.12);outline-offset:3px;transform:translateX(-8px)}

/* Tooltip */
.social-floating a[aria-label]{position:relative}
.social-floating a[aria-label]:hover::after,.social-floating a[aria-label]:focus::after{content:attr(aria-label);position:absolute;right:56px;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.75);color:#fff;padding:6px 10px;border-radius:6px;white-space:nowrap;font-size:13px;box-shadow:0 6px 18px rgba(0,0,0,.2);pointer-events:none;opacity:1}

/* Página de detalle */
.property{padding:20px;max-width:1100px;margin:0 auto 60px}
.property #property-detail h1{font-size:1.5rem;margin-bottom:6px;color:#003366}
.muted{color:#666;margin-bottom:12px}
.gallery-and-info{display:grid;grid-template-columns:1fr 380px;gap:20px;align-items:start}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.gallery img{width:100%;height:160px;object-fit:cover;border-radius:8px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.gallery img:hover{transform:scale(1.03);box-shadow:0 8px 20px rgba(0,0,0,.12)}
.info h2,.info h3{color:#003366;margin-top:0}
.map-wrapper{margin-top:8px}
.map-embed{width:100%;height:220px;border:0;border-radius:8px}

/* Botones reutilizables */
.btn{display:inline-block;background:#003366;color:#fff;padding:10px 14px;border-radius:6px;text-decoration:none;transition:background .2s,transform .12s}
.btn:hover{background:#f0c040;color:#000;transform:translateY(-2px)}

/* Lightbox / visor */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.88);z-index:10050;padding:20px}
.lightbox.open{display:flex}
.lb-content{max-width:1100px;max-height:calc(100vh - 160px);display:flex;align-items:center;justify-content:center;position:relative;margin:0 60px}
.lb-content img{max-width:100%;max-height:100%;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.6);object-fit:contain}

/* Controles */
.lb-close,.lb-prev,.lb-next{position:fixed;background:transparent;border:0;color:#fff;cursor:pointer;z-index:10060;display:flex;align-items:center;justify-content:center}
.lb-close{right:20px;top:18px;font-size:34px;line-height:1;padding:6px 10px;opacity:.95}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.35);backdrop-filter:blur(3px)}
.lb-prev{left:22px}
.lb-next{right:22px}
.lb-prev i, .lb-next i{font-size:20px;color:#fff}

/* Thumbnails (scrollable) */
.lb-thumbs{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;display:flex;gap:8px;z-index:10060;padding:6px 10px;background:rgba(0,0,0,.45);border-radius:8px;overflow:auto;max-width:calc(100% - 40px)}
.lb-thumbs img{width:68px;height:48px;object-fit:cover;border-radius:6px;cursor:pointer;opacity:.7;border:2px solid transparent;transition:transform .12s,opacity .12s}
.lb-thumbs img.active{opacity:1;transform:scale(1.03);border-color:#f0c040}

/* Quitar puntos de la lista de características en la página de detalle */
#prop-features {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Asegurar que cada elemento no tenga sangría de lista */
#prop-features li {
  margin: 6px 0;
  padding-left: 0;
}

/* Clic fuera del contenido cierra */
.lightbox .lb-content::before{content:'';position:absolute;inset:-30px}

/* Teclas - accesible en móviles y escritorio */
@media (max-width:700px){
  .lb-prev,.lb-next{width:44px;height:44px}
  .lb-thumbs img{width:56px;height:40px}
  .lb-content{margin:0 40px}
}

/* Responsive */


@media (max-width:900px){
  .gallery-and-info{grid-template-columns:1fr}
  .info{order:2}
  .gallery{
    order:1;
    /* Convertir a carrusel en móvil */
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 5px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
  }
  .gallery::-webkit-scrollbar { display: none; } /* Chrome, Safari */
  .gallery img {
    width: auto; /* Ancho automático para el scroll */
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .nosotros {
    background-attachment: scroll; /* Desactiva el parallax en móvil para mejor rendimiento */
  }

  
}
@media (max-width:900px){
  header nav ul{
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    width: auto;
    /*background: #003366;*/
    background-image: url("./img/banner menu.png");
    background-size: cover;
    padding: 10px;
    border-radius: 0px 0px 0px 5px;
  }
  header nav.show ul { display: flex; }
  .menu-toggle{display:block}
  .dropdown .dropdown-menu { 
    position: static; 
    display: none; /* Oculto por defecto en móvil */
    background: transparent; 
    /* background: transparent; <-- Eliminado para heredar el fondo */
    box-shadow: none; 
    padding-left: 20px; 
    border-radius: 0; 
    min-width: auto; 
    
    border-radius: 8px; /* Bordes redondeados para el sub-menú */
  }
  .dropdown.open .dropdown-menu { display: block; } /* Se muestra con la clase .open */
  .dropdown-close-item {
    display: block;
    margin-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  .dropdown-close-item a {
    text-align: center;
    font-style: italic;
    color: #f0c040 !important;
    opacity: 0.9;
    padding: 10px 20px !important;
  }
  .dropdown > a i { display: inline-block; transition: transform 0.3s ease; } /* Muestra el icono y añade transición */
  .dropdown.open > a i { transform: rotate(180deg); } /* Rota el icono al abrir */

  /* Hacer visibles las flechas de las tarjetas en móvil, ya que no hay hover */
  .card .card-nav-btn {
    opacity: 1;
  }
}
@media (max-width:700px){.social-floating{right:10px;gap:8px}.social-floating a{width:42px;height:42px;font-size:18px}}
@media (max-width:700px){header .logo{font-size:1.3rem;font-weight:600}}
@media (max-width:768px){
  header { padding: 12px 16px; }
  .hero { padding-top: 72px; }
  .header-left-logo { max-height: 44px; }
}

/* --- Estilos para la sección Requisitos --- */
section#requisitos.contacto {
  background: #ffffff;
  padding: 50px 20px; /* Adjusted padding */
  text-align: center;
}

/* Ahora es un carrusel en todas las vistas */
.requisitos-slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 20px;
  padding: 10px 0 20px 0;
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}

/* Estilos para la página de todas las propiedades */
.all-properties-page {
  padding-top: 100px; /* Espacio para el header fijo */
  padding-bottom: 40px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Ajuste para que las tarjetas en la grilla no tengan el efecto de carrusel */
.cards-grid .card {
  flex: auto; /* Resetea la propiedad flex del carrusel */
  scroll-snap-align: unset; /* Resetea la propiedad snap del carrusel */
}

/* Sección de Inmuebles Relacionados en página de detalle */
#related-properties {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid #eee;
}

.requisitos-slide {
  background: #f9f9f9;
  padding: 25px;
  border-radius: 10px;
  border: 1px solid #eee;
  flex: 0 0 320px; /* Ancho base para cada tarjeta en escritorio */
  scroll-snap-align: start;
}

.requisitos-slide h3 { color: #003366; margin-bottom: 15px; font-size: 1.3rem; }
.requisitos-slide p, .requisitos-slide ul { margin-bottom: 15px; line-height: 1.7; color: #555; }
.requisitos-slide ul { padding-left: 20px; }
.requisitos-slide li { margin-bottom: 8px; }

@media (max-width: 768px) {
  /* --- Media Queries para Requisitos en móvil --- */
  section#requisitos.contacto {
    padding: 30px 0; /* Ajustar padding para el carrusel */
  }

  .requisitos-slides {
    padding: 10px 20px 20px 20px;
  }

  .requisitos-slide {
    flex: 0 0 85%; /* Cada slide ocupa el 85% del contenedor */
    scroll-snap-align: center; /* Centrar el slide al hacer snap */
  }
}

/* Animación para el menú nav en mobile */
.nav {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(.4,0,.2,1), opacity 0.3s;
}

/* Por defecto, nav visible en escritorio */
.nav {
  display: block;
  max-height: none;
  opacity: 1;
  overflow: visible;
  transition: none;
}

/* En móvil, ocultar nav y animar con .show */
@media (max-width: 900px) {
  .nav {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(.4,0,.2,1), opacity 0.3s;
    display: block;
  }
  .nav.show {
    max-height: 500px; /* Ajusta según el contenido de tu menú */
    opacity: 1;
  }
}