.hero-canalizacion{

  text-align:center;
  padding:120px 20px 40px;
}

.titulo-glow{

  font-size:clamp(3rem,8vw,5rem);

  background:linear-gradient(45deg,#fff,#4fc3f7);

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;

  text-shadow:0 0 30px rgba(79,195,247,.8);
}

.subtitulo{

  color:white;
  opacity:.9;
  font-size:18px;
}

.zona-section{

  max-width:500px;
  margin:20px auto;
  position:relative;
}

.btn-zona{

  width:100%;
  padding:18px;

  border:none;
  border-radius:18px;

  background:rgba(255,255,255,.08);

  backdrop-filter:blur(15px);

  color:white;

  cursor:pointer;

  font-size:18px;

  transition:.3s;
}

.btn-zona:hover{

  background:rgba(255,255,255,.12);
}

.dropdown{

  display:none;

  background:rgba(0,0,0,.85);

  border-radius:18px;

  margin-top:10px;

  overflow:hidden;

  backdrop-filter:blur(20px);
}

.dropdown.active{
  display:block;
}

.dropdown div{

  padding:15px;

  color:white;

  cursor:pointer;

  transition:.3s;
}

.dropdown div:hover{

  background:#0d47a1;
}

/* ==========================
   CONTENEDOR IGLESIAS
========================== */

.contenedor-iglesias{

  max-width:1400px;

  margin:auto;

  padding:30px;

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(380px,1fr));

  gap:50px;
}

/* ==========================
   TARJETAS
========================== */

.card{

  background:rgba(255,255,255,.08);

  backdrop-filter:blur(15px);

  border-radius:25px;

  padding:25px;

  color:white;

  border:1px solid rgba(255,255,255,.12);

  box-shadow:0 15px 35px rgba(0,0,0,.20);

  display:flex;

  flex-direction:column;

  justify-content:space-between;

  min-height:auto;

  height:auto;

  transition:.3s;
}

.card:hover{

  transform:translateY(-5px);
}

.card h3{

  margin-top:0;

  font-size:24px;
}

.card p{

  margin:8px 0;

  line-height:1.5;

  word-break:break-word;

  overflow-wrap:break-word;
}

.card .direccion{

  font-size:13px;

  opacity:.85;
}

.card .cp{

  font-size:14px;

  font-weight:600;
}

/* ==========================
   BOTONES
========================== */

.botones{

  display:flex;

  gap:12px;

  margin-top:20px;

  padding-top:15px;

  border-top:1px solid rgba(255,255,255,.15);

  width:100%;

  position:relative;

  z-index:10;
}

.botones button{

  flex:1;

  min-height:52px;

  border:none;

  border-radius:12px;

  font-weight:600;

  color:white;

  cursor:pointer;

  transition:.3s;

  position:relative;

  z-index:11;
}

.botones button:hover{

  transform:scale(1.03);
}

.call{
  background:#2e7d32;
}

.call:hover{
  background:#388e3c;
}

.wa{
  background:#25D366;
}

.wa:hover{
  background:#2fd669;
}

.map{
  background:#0d47a1;
}

.map:hover{
  background:#1565c0;
}

/* ==========================
   MAPA
========================== */

.mapa-container{

  width:95%;

  max-width:1200px;

  margin:30px auto;
}

#mapFrame{

  width:100%;

  height:450px;

  border:none;

  border-radius:20px;

  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:768px){

  .contenedor-iglesias{

    grid-template-columns:1fr;

    gap:35px;

    padding:15px;
  }

  .card{

    padding:20px;
  }

  .card h3{

    font-size:20px;
  }

  .card .direccion{

    font-size:12px;
  }

  .botones{

    flex-direction:column;
  }

  .botones button{

    width:100%;

    margin-bottom:8px;
  }

  #mapFrame{

    height:300px;
  }

}