:root{
      --gkp-navy:#2F3148;
      --gkp-navy2:#192438;
      --gkp-gold:#C3A972;
      --gkp-gold2:#DFD3AC;
      --gkp-black:#0C1014;
      --gkp-white:#F4E2CD;
      --gkp-gray:#919497;
    }

    body{ color:#0f0f10; }
    .bg-navy{ background:var(--gkp-navy); }
    .bg-navy2{ background:var(--gkp-navy2); }
    .text-gold{ color:var(--gkp-gold); }
    .btn-gold{ background:var(--gkp-gold); border-color:var(--gkp-gold); color:#111; }
    .btn-gold:hover{ background:var(--gkp-gold2); border-color:var(--gkp-gold2); color:#111; }
    .btn-outline-gold{ border-color:var(--gkp-gold); color:var(--gkp-gold); }
    .btn-outline-gold:hover{ background:var(--gkp-gold); color:#111; }

.hero{
  min-height: 60vh;
  background:
    linear-gradient(rgba(0,0,0,.40)
, rgba(0,0,0,.40)
),
    url("../img/hero.png") center/cover no-repeat;
}

    /* para mobile */
    .hero{
      min-height: 60vh;
    }

    @media (max-width: 768px){
      .hero{
        min-height: 45vh;
      }
    }



    .glass{
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(6px);
      border-radius: 18px;
    }
    .section-title{
      letter-spacing: .04em;
      font-weight: 700;
    }
    .card-soft{
      border: 0;
      border-radius: 18px;
      box-shadow: 0 10px 30px rgba(0,0,0,.08);
    }
    .divider{
      height: 1px;
      background: rgba(195,169,114,.35);
      margin: 1rem 0;
    }

    /* WhatsApp floating button */
    .wa-float{
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 999;
      width: 56px;
      height: 56px;
      border-radius: 999px;
      display:flex;
      align-items:center;
      justify-content:center;
      background: #25D366;
      color:#fff;
      box-shadow: 0 10px 20px rgba(0,0,0,.25);
      text-decoration: none;
    }
    .wa-float:hover{ color:#fff; filter: brightness(.95); }

    footer a{ color: var(--gkp-gold2); text-decoration: none; }
    footer a:hover{ color: #fff; text-decoration: underline; }
 
    /* foto accidente de transito */
    .header-transito{
  background:
    linear-gradient(rgba(0,0,0,.60), rgba(0,0,0,.60)),
    url("../img/accidente.webp") center/cover no-repeat;
}

/* foto sucesiones */
.header-sucesiones{
  background:
    linear-gradient(rgba(0,0,0,.60), rgba(0,0,0,.60)),
    url("../img/sucesiones.jpg") center/cover no-repeat;
  min-height: 35vh;
  display: flex;
  align-items: center;
}

/* foto fallos */
.header-fallos{
  background:
    linear-gradient(rgba(0,0,0,.60), rgba(0,0,0,.60)),
    url("../img/fallos-index.jpg") center/cover no-repeat;
  min-height: 35vh;
  display: flex;
  align-items: center;
}

/* estylos para mantener ordenadas las paginas */
html, body { height: 100%; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

/* botones para redes dinamicos */
.social-side{
  position: fixed;
  right: 0;
  top: 45%;
  transform: translateY(-50%);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.social-btn{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 20px 0 0 20px;
  color: #fff;
  text-decoration: none;
  transform: translateX(75%);
  transition: all .25s ease;
  font-size: 0.95rem;
}

.social-btn i{
  font-size: 1.2rem;
}

.social-btn:hover{
  transform: translateX(0);
  color: #fff;
}

/* WhatsApp */
.social-btn.whatsapp{
  background: #25d366;
}

/* Instagram */
.social-btn.instagram{
  background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af);
}

/* fix del glass */
/* 1) Que el hero no “derrame” el blur hacia abajo */
.hero { position: relative; overflow: hidden; }

/* 2) Que Áreas quede por arriba y con fondo sólido */
#areas { position: relative; z-index: 2; background: #fff;}

/* fix para transparencia hero */
/* Ajuste de separación hero -> Áreas (mobile) */
@media (max-width: 768px){
  .hero{
    padding-bottom: 12px !important; /* achica el “aire” debajo del hero */
  }

  #areas{
    padding-top: 24px !important;    /* en vez de py-5 enorme */
  }
}

.hero{ background-color: var(--gkp-navy2); }

/* FIX: evitar “corte” del hero y que el blur no invada secciones */
.hero{
  position: relative;
  overflow: visible;               /* importante: no cortar la card */
  background-color: var(--gkp-navy2); /* fallback para evitar franja blanca */
}

.glass{
  position: relative;
  z-index: 2;
  overflow: hidden;                /* el blur queda dentro de la card */
  background-clip: padding-box;
}

#areas{
  position: relative;
  z-index: 1;
  background: #fff;
}

.hero{
  background-color: var(--gkp-navy2);
}

@media (max-width: 768px){
  .hero{
    min-height: auto;        /* CLAVE: que no sea 45vh */
    padding-top: 3rem;
    padding-bottom: 3rem;    /* para que respire */
  }
}

/* Flechas del carousel visibles */
.carousel-control-prev-icon,
.carousel-control-next-icon{
  filter: invert(1);          /* las vuelve oscuras */
}

@media (max-width: 768px){
  /* Oculta todas menos la primera card de cada slide */
  #fallosCarousel .carousel-item .col-6{
    display: none;
  }

  #fallosCarousel .carousel-item .col-6:first-child{
    display: block;
    margin: 0 auto;
  }
}

/* correccion del navbar en mobile */
@media (max-width: 576px) {
  .navbar-brand span {
    display: none;
  }
}