/* styles.css — estilos generales para todo el sitio (navbar, hero, cards, footer) */

/* RESET & BASE */
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; }
body {
  font-family: "Poppins", sans-serif;
  background: #f8f9fa;
  color:#222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* NAVBAR */
.navbar {
  transition: .35s;
  background:#003246;
}
.navbar .navbar-brand { color: #fff !important; }
.navbar .nav-link { color: rgba(255,255,255,0.95); transition:.15s; }
.navbar .nav-link:hover { opacity:.85; }
.navbar.scrolled { background: rgba(10,10,10,.85) !important; }

/* HERO (base) */
.hero, .hero-sub {
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
}

.hero { height:80vh; background-position:center; background-size:cover;}
.hero-sub { height:55vh; background-position:center; background-size:cover; padding:60px 0; }

/* overlay helpers */
.hero-overlay, .overlay, .cta-overlay {
  position:absolute; inset:0; background: rgba(0, 0, 0, 0.652);z-index: 2;
}
#hero-content{
  z-index: 3;
}
/* centered content */
.hero-content { position:relative; top:0; transform:none; max-width:1100px; padding: 0 20px; }
.hero .display-3 { font-weight:700; letter-spacing:.2px; }

/*Hero BTN */

.btn {
  color: #cccccc;
  background-color: #003246;
  border-color: #003246;
}

/* SECTION TITLES */
.section-title { font-size:2.2rem; font-weight:700; color:#111; margin-bottom:32px; }

/* CARDS */
.lux-card { border-radius:14px; overflow:hidden; background:#fff; transition:.25s; cursor:pointer; }
.lux-card:hover { transform:translateY(-8px); box-shadow:0 14px 30px rgba(0,0,0,.12); }
.lux-img { height:230px; background-size:cover; background-position:center; }

/* CTA */
.cta { position:relative; height:50vh; background-position:center; background-size:cover; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; }
.cta .container { position:relative; z-index:2; }

/* FOOTER */
.footer { background:#0a0a0a; color:#fff; padding:36px 20px; margin-top:60px; text-align:center; }
.footer a { color:#fff; margin:0 8px; transition:.15s; }
.footer a:hover { opacity:.8; }

/* UTILITIES */
.text-muted { color:#687178 !important; }
.btn-rounded { border-radius:40px; }

/* RESPONSIVE */
@media (max-width:992px){
  .hero { height:72vh; }
  .hero-sub { height:46vh; padding:40px 0; }
}
@media (max-width:576px){
  .hero { height:60vh; }
  .hero .display-3 { font-size:1.7rem; }
  .lux-img { height:180px; }
  .section-title { font-size:1.6rem; }
}

/* Fondo del popup */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s ease;
    z-index: 9999;
}

/* Mostrado */
.popup-overlay.active {
    visibility: visible;
    opacity: 1;
}

/* Contenido */
.popup-content {
    background: #fff;
    width: 90%;
    max-width: 500px;
    border-radius: 20px;
    padding: 25px;
    position: relative;
    animation: popupFade 0.3s ease;
}

@keyframes popupFade {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Botón cerrar */
.close-popup {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
}