/* Esta hoja solo agrega estilos de la página del departamento.
   El header/footer se heredan de ../styles.css */

.depto-hero {
  position: relative;
  min-height: 68vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 72px 0;
}

.depto-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  z-index: 0;
}

.depto-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.65), rgba(0,0,0,0.72));
  z-index: 1;
}



/* ===== HERO: mejor look + responsive ===== */
.depto-hero{
  /* Fallback atractivo si no carga la imagen */
  background: radial-gradient(1200px 600px at 30% 20%, rgba(255,255,255,0.10), rgba(0,0,0,0.0)),
              linear-gradient(180deg, #2b2b2b, #0f0f0f);
}

.depto-hero-bg{
  /* Hace que la foto se vea más "premium" bajo el overlay */
  filter: saturate(1.05) contrast(1.05) brightness(0.95);
}

/* Alineación y ajuste de CTAs */
.depto-cta-row{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.depto-cta-row .btn{
  margin: 6px 0;
  min-width: 220px;
}

/* Evita que el contenido quede "apretado" en móvil */
.depto-hero-content{
  width: 100%;
  padding: 0 6px;
}

@media (max-width: 900px){
  .depto-hero{ padding: 64px 0; min-height: 70vh; }
  .depto-hero h1{ font-size: 2.0rem; }
}

@media (max-width: 520px){
  .depto-hero{ padding: 58px 0; min-height: 74vh; }
  .depto-subtitle{ font-size: 1.02rem; }
  .depto-cta-row{ gap: 10px; }
  .depto-cta-row .btn{
    width: 100%;
    max-width: 360px;
  }
  .btn.big{
    padding: 15px 18px;
    font-size: 1.02rem;
  }
  .depto-bullets{
    grid-template-columns: 1fr;
  }
  .bullet{
    text-align: left;
  }
}
.depto-hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: center;
  max-width: 980px;
}

.depto-badge {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.25);
  margin-bottom: 14px;
  font-weight: 700;
}

.depto-hero h1 {
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 14px;
}

.depto-hero .thin {
  font-weight: 400;
  opacity: 0.95;
}

.depto-subtitle {
  font-size: 1.12rem;
  color: rgba(255,255,255,0.92);
  margin: 0 auto 18px;
  max-width: 820px;
}

.depto-cta-row {
  margin-top: 12px;
}

.btn.big {
  padding: 16px 28px;
  border-radius: 10px;
  font-size: 1.05rem;
}

.depto-bullets {
  margin: 18px auto 0;
  max-width: 920px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.bullet {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 12px;
  padding: 12px 14px;
  color: rgba(255,255,255,0.95);
  text-align: left;
}

.depto-note {
  margin-top: 14px;
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
}

/* Sections */
.section-head h2 { margin-bottom: 6px; }
.section-head p { color: #555; margin-bottom: 14px; }

.section.alt {
  background: #f7f7f7;
}

/* Gallery */
.gallery-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.gcard {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
}

.gcard img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 220ms ease;
}

.gcard:hover img {
  transform: scale(1.04);
}

.cta-inline {
  margin-top: 18px;
  text-align: center;
}

/* Facts */
.facts {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.fact {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 12px 14px;
}

.fact span {
  display: block;
  color: #666;
  font-size: 0.92rem;
}

.fact strong {
  display: block;
  margin-top: 2px;
  font-size: 1.05rem;
}

/* Cards */
.cards {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 16px;
}

.card h3 { margin-bottom: 8px; }

/* Steps */
.steps {
  margin-top: 10px;
  padding-left: 20px;
}

.steps li {
  margin: 10px 0;
}

/* Final CTA */
.final-cta {
  background: #111;
  color: #fff;
  padding: 70px 0;
}

.final-cta p {
  color: rgba(255,255,255,0.88);
  margin: 14px 0 10px;
}

/* Sticky CTA (mobile) */
.sticky-cta {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  display: none;
  gap: 10px;
  padding: 10px;
  background: rgba(255,255,255,0.92);
  border-top: 1px solid #eaeaea;
  z-index: 999;
}

.sticky-btn {
  flex: 1;
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  padding: 14px 10px;
  border-radius: 12px;
}

.sticky-btn.wa {
  background: #1f1f1f;
  color: #fff;
}

.sticky-btn.call {
  background: #e9e9e9;
  color: #1f1f1f;
}

/* Show sticky on small screens */
@media (max-width: 720px) {
  .sticky-cta { display: flex; }
  .depto-hero { min-height: 64vh; }
  .depto-hero h1 { font-size: 2.05rem; }
  .gcard img { height: 200px; }
}


/* =========================
   Fondos tenues por sección
   =========================
   Cómo usar:
   1) Sube imágenes para fondos (pueden ser fotos del depto) en:
      assets/depto/bg-1.jpg, bg-2.jpg, bg-3.jpg, bg-4.jpg, bg-5.jpg, bg-6.jpg
      (o cambia las rutas en las clases .bg-deptoX)
   2) En el HTML cada sección trae una clase bg-deptoX y un overlay.
*/

.bg-section {
  position: relative;
  padding: 60px 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Overlay para que el fondo se vea tenue y el texto sea legible */
.bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0,0,0,0.55);
}

.bg-overlay.light {
  background: rgba(255,255,255,0.78);
}

/* Contenido siempre por encima del overlay */
.bg-section > .container {
  position: relative;
  z-index: 1;
}

/* Clases de fondo (ajusta rutas si cambias nombres) */
.bg-depto1 { background-image: url("assets/depto/bg-1.jpg"); }
.bg-depto2 { background-image: url("assets/depto/bg-2.jpg"); }
.bg-depto3 { background-image: url("assets/depto/bg-3.jpg"); }
.bg-depto4 { background-image: url("assets/depto/bg-4.jpg"); }
.bg-depto5 { background-image: url("assets/depto/bg-5.jpg"); }
.bg-depto6 { background-image: url("assets/depto/bg-6.jpg"); }

/* Ajuste: cuando una sección tiene fondo, evita que el .section.alt pinte el fondo sólido */
.bg-section.alt {
  background-color: transparent;
}


/* =====================================================
   SISTEMA CLARO / OSCURO CONTROLADO MANUALMENTE
   ===================================================== */

/* Secciones claras (default) */
.bg-section {
  color: #1f1f1f;
}

.bg-section h2,
.bg-section h3,
.bg-section p,
.bg-section li,
.bg-section span,
.bg-section strong {
  color: #1f1f1f;
}

/* Secciones oscuras: agrega class="dark-section" al <section> */
.dark-section {
  color: #ffffff;
}

.dark-section h2,
.dark-section h3,
.dark-section p,
.dark-section li,
.dark-section span,
.dark-section strong {
  color: #ffffff;
}

/* Cards en secciones oscuras */
.dark-section .fact,
.dark-section .card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #ffffff;
}

/* Subtítulos en oscuro */
.dark-section .section-head p {
  color: rgba(255,255,255,0.85);
}