.contact-page{

  padding:160px 0 0;

  background:
    linear-gradient(rgba(6, 28, 68, 0.88), rgba(4, 20, 45, 0.94)),
    url("../../img/hero/hero-image-moment.jpeg");

  background-size:cover;
  background-position:center;
  background-attachment:fixed;

}

.contact-grid{

  display:grid;
  grid-template-columns:1fr 460px;
  gap:60px;
  align-items:start;

  padding-bottom:var(--space-8);

}

.contact-intro .hero-subtitle{

  color:var(--secondary);
  font-weight:700;
  letter-spacing:2px;

}

.contact-intro h1{

  color:var(--white);
  font-size:clamp(2.1rem,4.5vw,3rem);
  line-height:1.2;
  margin:var(--space-4) 0;
  max-width:520px;

}

.contact-intro > p{

  color:#d6dce7;
  line-height:1.8;
  max-width:480px;
  margin-bottom:var(--space-6);

}

.contact-sedes{

  display:flex;
  flex-direction:column;
  gap:15px;

}

.contact-social{

  display:flex;
  align-items:center;
  gap:14px;
  margin-top:var(--space-5);

}

.contact-social span{

  color:#b7c2d6;
  font-size:.9rem;
  font-weight:600;

}

.contact-social a{

  width:38px;
  height:38px;
  border-radius:50%;

  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:var(--white);

  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;

  transition:background var(--transition), color var(--transition);

}

.contact-social a:hover{

  background:var(--secondary);
  color:var(--text-on-accent);

}

.contact-sede-card{

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;

  padding:var(--space-4) var(--space-5);

  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-sm);

  backdrop-filter:blur(6px);

}

.contact-sede-info{

  display:flex;
  align-items:center;
  gap:14px;

}

.contact-sede-icon{

  width:44px;
  height:44px;
  border-radius:50%;

  background:rgba(253,185,19,.15);
  color:var(--secondary);

  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex-shrink:0;

}

.contact-sede-info h4{

  color:var(--white);
  font-size:1rem;
  margin-bottom:2px;

}

.contact-sede-info span{

  color:#b7c2d6;
  font-size:.85rem;

}

.contact-sede-card .btn{

  padding:10px 16px;
  font-size:.85rem;
  flex-shrink:0;

}

.contact-form-card{

  padding:var(--space-6);

}

.contact-form-card h3{

  margin-bottom:var(--space-2);

}

.contact-form-card > p{

  color:var(--gray);
  line-height:1.6;
  margin-bottom:var(--space-5);

}

.contact-map-wrap{

  border-top:1px solid rgba(255,255,255,.12);
  padding:var(--space-7) 0 var(--space-8);

}

.contact-map-wrap h3{

  color:var(--white);
  margin-bottom:var(--space-4);

}

.map-tabs{

  display:flex;
  gap:10px;
  margin-bottom:var(--space-4);
  flex-wrap:wrap;

}

.map-tab{

  padding:10px 20px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);
  color:var(--white);
  font-weight:600;
  font-size:.9rem;
  cursor:pointer;
  transition:background var(--transition), border-color var(--transition);

}

.map-tab:hover{

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

}

.map-tab.active{

  background:var(--secondary);
  border-color:var(--secondary);
  color:var(--text-on-accent);

}

.contact-map-frame{

  width:100%;
  height:400px;
  border:0;
  border-radius:var(--radius);
  display:block;

}

@media (max-width:992px){

  .contact-grid{
    grid-template-columns:1fr;
  }

  .contact-intro h1,
  .contact-intro > p{
    max-width:100%;
  }

}

@media (max-width:768px){

  .contact-page{
    padding:130px 0 0;
  }

  .contact-sede-card{
    flex-wrap:wrap;
    row-gap:12px;
  }

  .contact-sede-card .btn{
    width:auto;
    margin-left:auto;
  }

  .contact-map-frame{
    height:280px;
  }

}