/* ============================================
   HOTEL ZENITH SUNNYBEACH - styles.css
   Parallax Opción 1 (clásico, background-attachment:fixed)
   Colocar en: public_html/styles.css
   Referenciar en cada index.html con:
   <link rel="stylesheet" href="/styles.css">
   ============================================ */

* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --gold:#c9a84c;
  --dark:#0d1117;
  --dark2:#161b22;
  --text:#e6edf3;
  --muted:#8b949e;
  --white:#ffffff;
}

html { scroll-behavior:smooth; }
body { font-family:'Georgia',serif; background:var(--dark); color:var(--text); }

/* ===== NAV ===== */
nav {
  position:fixed; top:0; width:100%; z-index:100;
  background:rgba(13,17,23,0.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(201,168,76,0.2);
  padding:0 40px;
}
.nav-top {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.logo { font-size:20px; font-weight:700; color:var(--gold); letter-spacing:2px; text-transform:uppercase; }
.logo span { color:var(--white); }
.lang-flags { display:flex; gap:10px; align-items:center; }
.lang-flags a {
  display:flex; align-items:center; gap:5px;
  text-decoration:none; font-size:12px; font-family:Arial,sans-serif;
  color:var(--muted); transition:color 0.3s;
  padding:4px 8px; border-radius:4px; border:1px solid transparent;
}
.lang-flags a:hover, .lang-flags a.active { color:var(--gold); border-color:rgba(201,168,76,0.3); }
.lang-flags img { border-radius:2px; }
.nav-bottom {
  display:flex; align-items:center; justify-content:space-between; padding:12px 0;
}
.nav-links { display:flex; gap:28px; list-style:none; }
.nav-links a {
  color:var(--muted); text-decoration:none; font-size:13px;
  letter-spacing:1px; text-transform:uppercase;
  font-family:Arial,sans-serif; transition:color 0.3s;
}
.nav-links a:hover { color:var(--gold); }
.nav-cta {
  background:var(--gold); color:var(--dark);
  padding:10px 24px; border-radius:4px;
  font-size:13px; font-weight:700; letter-spacing:1px;
  text-decoration:none; text-transform:uppercase;
  font-family:Arial,sans-serif; transition:background 0.3s;
}
.nav-cta:hover { background:#e0b85a; }

/* ===== HERO CON PARALLAX OPCIÓN 1 ===== */
.hero {
  height:100vh;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;

  /* PARALLAX: imagen de fondo fija */
  background-image: url('/imagenes/zenith-hero.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* ← PARALLAX CLÁSICO */
  background-repeat: no-repeat;

  overflow:hidden;
}

/* Overlay oscuro para contraste del texto */
.hero-overlay {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background:linear-gradient(to bottom, rgba(13,17,23,0.3) 0%, rgba(13,17,23,0.7) 100%);
  z-index:1;
}

/* IMPORTANTE: quitá el <img class="hero-img"> del HTML — ya no hace falta */
.hero-img { display:none; }

.hero-content {
  position:relative; z-index:2;
  text-align:center; max-width:800px;
  padding:100px 20px 60px; width:100%;
}
.hero-badge {
  display:inline-block;
  background:rgba(201,168,76,0.15); border:1px solid var(--gold);
  color:var(--gold); padding:6px 18px; border-radius:20px;
  font-size:12px; letter-spacing:3px; text-transform:uppercase;
  font-family:Arial,sans-serif; margin-bottom:24px;
}
.hero h1 {
  font-size:clamp(36px,6vw,72px); font-weight:400;
  line-height:1.1; margin-bottom:16px; color:var(--white);
}
.hero h1 span { color:var(--gold); }
.hero p {
  font-size:18px; color:rgba(255,255,255,0.75);
  margin-bottom:40px; font-family:Arial,sans-serif; line-height:1.6;
}
.stars { color:var(--gold); font-size:22px; margin-bottom:16px; letter-spacing:4px; }
.hero-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.btn-primary {
  background:var(--gold); color:var(--dark);
  padding:16px 36px; border-radius:4px;
  font-size:14px; font-weight:700; letter-spacing:1px;
  text-decoration:none; text-transform:uppercase;
  font-family:Arial,sans-serif; transition:all 0.3s; display:inline-block;
}
.btn-primary:hover { background:#e0b85a; transform:translateY(-2px); }
.btn-secondary {
  background:transparent; color:var(--white);
  padding:16px 36px; border-radius:4px;
  font-size:14px; font-weight:700; letter-spacing:1px;
  text-decoration:none; text-transform:uppercase;
  font-family:Arial,sans-serif;
  border:1px solid rgba(255,255,255,0.4); transition:all 0.3s; display:inline-block;
}
.btn-secondary:hover { border-color:var(--gold); color:var(--gold); }

.scroll-down {
  position:absolute; bottom:30px; left:50%;
  transform:translateX(-50%); animation:bounce 2s infinite;
}
.scroll-down span {
  display:block; width:20px; height:20px;
  border-right:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:rotate(45deg); margin:0 auto;
}
@keyframes bounce {
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(8px)}
}

/* ===== SECCIONES ===== */
section { padding:90px 40px; }
.section-label {
  font-size:11px; letter-spacing:4px; text-transform:uppercase;
  color:var(--gold); font-family:Arial,sans-serif; margin-bottom:12px;
}
.section-title {
  font-size:clamp(28px,4vw,48px); font-weight:400;
  color:var(--white); margin-bottom:20px; line-height:1.2;
}
.section-sub {
  font-size:16px; color:var(--muted); font-family:Arial,sans-serif;
  line-height:1.7; max-width:600px;
}
.container { max-width:1200px; margin:0 auto; }
.divider { width:60px; height:2px; background:var(--gold); margin:20px 0 30px; }

/* ===== ABOUT ===== */
.about { background:var(--dark2); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-img { border-radius:4px; overflow:hidden; position:relative; }
.about-img img { width:100%; height:480px; object-fit:cover; display:block; aspect-ratio:600/480; }
.about-img-badge {
  position:absolute; bottom:24px; left:24px;
  background:rgba(13,17,23,0.9); border:1px solid var(--gold);
  padding:14px 20px; border-radius:4px;
}
.about-img-badge .num { font-size:36px; color:var(--gold); font-weight:700; }
.about-img-badge .txt { font-size:12px; color:var(--muted); font-family:Arial,sans-serif; }
.about-features { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:32px; }
.about-feature {
  display:flex; align-items:center; gap:10px;
  font-family:Arial,sans-serif; font-size:14px; color:var(--muted);
}
.about-feature span { color:var(--gold); font-size:18px; }

/* ===== HIGHLIGHTS ===== */
.highlights { background:var(--dark); }
.highlights-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:50px; }
.highlight-card {
  background:var(--dark2); border:1px solid rgba(201,168,76,0.1);
  border-radius:4px; overflow:hidden;
  transition:transform 0.3s,border-color 0.3s;
}
.highlight-card:hover { transform:translateY(-6px); border-color:rgba(201,168,76,0.4); }
.highlight-card img { width:100%; height:220px; object-fit:cover; aspect-ratio:600/220; }
.highlight-card-body { padding:24px; }
.highlight-card-icon { font-size:28px; margin-bottom:12px; }
.highlight-card-title { font-size:18px; color:var(--white); margin-bottom:10px; }
.highlight-card-text { font-size:14px; color:var(--muted); font-family:Arial,sans-serif; line-height:1.6; }

/* ===== ROOMS ===== */
.rooms { background:var(--dark2); }
.rooms-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:50px; }
.room-card {
  background:var(--dark); border:1px solid rgba(201,168,76,0.1);
  border-radius:4px; overflow:hidden;
  display:flex; flex-direction:column; transition:border-color 0.3s;
}
.room-card:hover { border-color:rgba(201,168,76,0.4); }
.room-card img { width:100%; height:240px; object-fit:cover; aspect-ratio:700/240; }
.room-card-body { padding:28px; flex:1; display:flex; flex-direction:column; }
.room-card-title { font-size:20px; color:var(--white); margin-bottom:10px; }
.room-card-text {
  font-size:14px; color:var(--muted); font-family:Arial,sans-serif;
  line-height:1.6; margin-bottom:20px; flex:1;
}
.room-amenities { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.room-amenity {
  background:rgba(201,168,76,0.1); color:var(--gold);
  padding:4px 12px; border-radius:20px;
  font-size:12px; font-family:Arial,sans-serif;
}
.room-cta {
  display:block; text-align:center; background:var(--gold); color:var(--dark);
  padding:12px; border-radius:4px; font-size:13px; font-weight:700;
  letter-spacing:1px; text-decoration:none; text-transform:uppercase;
  font-family:Arial,sans-serif; transition:background 0.3s;
}
.room-cta:hover { background:#e0b85a; }

/* ===== AMENITIES ===== */
.amenities { background:var(--dark); }
.amenities-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:50px; }
.amenity-item {
  background:var(--dark2); border:1px solid rgba(201,168,76,0.1);
  border-radius:4px; padding:28px 20px; text-align:center;
  transition:border-color 0.3s,transform 0.3s;
}
.amenity-item:hover { border-color:rgba(201,168,76,0.4); transform:translateY(-4px); }
.amenity-icon { font-size:36px; margin-bottom:14px; }
.amenity-title { font-size:15px; color:var(--white); margin-bottom:8px; font-family:Arial,sans-serif; }
.amenity-text { font-size:13px; color:var(--muted); font-family:Arial,sans-serif; line-height:1.5; }

/* ===== EXCURSIONS ===== */
.excursions { background:var(--dark2); }
.excursions-block { margin-bottom:60px; }
.excursions-block h3 {
  font-size:22px; color:var(--gold); font-family:Arial,sans-serif;
  padding-bottom:12px; border-bottom:1px solid rgba(201,168,76,0.2); margin-bottom:28px;
}
.viator-section { min-height:200px; }

/* ===== EXTRAS ===== */
.extras { background:var(--dark); }
.extras-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:50px; }
.extra-card {
  background:var(--dark2); border:1px solid rgba(201,168,76,0.1);
  border-radius:4px; overflow:hidden;
  display:flex; flex-direction:column; transition:border-color 0.3s;
}
.extra-card:hover { border-color:rgba(201,168,76,0.4); }
.extra-card img { width:100%; height:200px; object-fit:cover; aspect-ratio:700/200; }
.extra-card-body { padding:28px; flex:1; display:flex; flex-direction:column; }
.extra-card-title { font-size:20px; color:var(--white); margin-bottom:10px; }
.extra-card-text {
  font-size:14px; color:var(--muted); font-family:Arial,sans-serif;
  line-height:1.6; margin-bottom:24px; flex:1;
}

/* ===== LOCATION ===== */
.location { background:var(--dark2); }
.location-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.location-list { list-style:none; margin-top:24px; }
.location-list li {
  display:flex; justify-content:space-between;
  padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.06);
  font-family:Arial,sans-serif; font-size:14px;
}
.location-list li span:first-child { color:var(--muted); }
.location-list li span:last-child { color:var(--gold); font-weight:700; }
.location-map { border-radius:4px; overflow:hidden; height:400px; background:var(--dark); }
.location-map iframe { width:100%; height:100%; border:none; }

/* ===== REVIEWS ===== */
.reviews { background:var(--dark); }
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:50px; }
.review-card {
  background:var(--dark2); border:1px solid rgba(201,168,76,0.1);
  border-radius:4px; padding:28px;
}
.review-stars { color:var(--gold); font-size:16px; margin-bottom:14px; }
.review-text {
  font-size:14px; color:var(--muted); font-family:Arial,sans-serif;
  line-height:1.7; margin-bottom:20px; font-style:italic;
}
.review-author { font-size:13px; color:var(--white); font-family:Arial,sans-serif; font-weight:700; }
.review-source { font-size:12px; color:var(--gold); font-family:Arial,sans-serif; }
.score-box {
  background:var(--dark2); border:1px solid rgba(201,168,76,0.3);
  border-radius:4px; padding:40px; text-align:center; margin-top:50px;
}
.score-num { font-size:72px; color:var(--gold); font-weight:700; line-height:1; }
.score-label { font-size:14px; color:var(--muted); font-family:Arial,sans-serif; margin-top:8px; }

/* ===== CTA BANNER ===== */
.cta-banner {
  background:linear-gradient(135deg,#1a2744 0%,#0d2b1a 100%);
  border-top:1px solid rgba(201,168,76,0.2);
  border-bottom:1px solid rgba(201,168,76,0.2);
  text-align:center; padding:80px 40px;
}
.cta-banner h2 { font-size:clamp(28px,4vw,48px); color:var(--white); margin-bottom:16px; }
.cta-banner p {
  font-size:16px; color:var(--muted); font-family:Arial,sans-serif;
  margin-bottom:36px; max-width:500px; margin-left:auto; margin-right:auto;
}

/* ===== FOOTER ===== */
footer {
  background:var(--dark2);
  border-top:1px solid rgba(255,255,255,0.06);
  padding:50px 40px 30px;
}
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr;
  gap:40px; max-width:1200px; margin:0 auto 40px;
}
.footer-desc {
  font-size:13px; color:var(--muted); font-family:Arial,sans-serif;
  line-height:1.7; margin-top:14px; max-width:280px;
}
.footer-col h4 {
  font-size:12px; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold); font-family:Arial,sans-serif; margin-bottom:16px;
}
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:10px; }
.footer-col ul li a {
  color:var(--muted); text-decoration:none;
  font-size:13px; font-family:Arial,sans-serif; transition:color 0.3s;
}
.footer-col ul li a:hover { color:var(--gold); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.06);
  padding-top:24px; display:flex; justify-content:space-between;
  align-items:center; max-width:1200px; margin:0 auto;
  flex-wrap:wrap; gap:10px;
}
.footer-bottom p { font-size:12px; color:var(--muted); font-family:Arial,sans-serif; }
.affiliate-note { font-size:11px; color:rgba(139,148,158,0.6); font-family:Arial,sans-serif; }

/* ===== RESPONSIVE MOBILE ===== */
@media (max-width:768px) {
  nav { padding:0 20px; }
  .nav-links { display:none; }
  .lang-flags a span { display:none; }
  section { padding:60px 20px; }
  .about-grid,
  .location-grid,
  .footer-grid,
  .extras-grid { grid-template-columns:1fr; }
  .highlights-grid,
  .rooms-grid { grid-template-columns:1fr; }
  .amenities-grid { grid-template-columns:repeat(2,1fr); }
  .reviews-grid { grid-template-columns:1fr; }
  .hero-btns { flex-direction:column; align-items:center; }
  .about-img img { height:300px; }

  /* En mobile el parallax fixed no funciona bien en iOS
     — lo desactivamos y usamos scroll normal */
  .hero {
    background-attachment: scroll;
  }
}