/* ======================================
   FONDO + TÍTULO
====================================== */

.contacto {
  background:#38bdf8;
  position:relative;
  padding:120px 20px 40px;
  font-family:"Poppins",sans-serif;
  overflow:hidden;
}

/* TÍTULO: centrado + responsivo */
.contacto h2 {
  color:#fff;
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  font-weight:700;
  margin-bottom:70px;
  text-align:center;
  margin-left: 0; /* antes 100px → rompía mobile */
}

.mt-6 { margin-top: 5rem; }
.mb-6 { margin-bottom: 5rem; }


/* ======================================
   TARJETAS DE CONTACTO
====================================== */

.contacto-wrap {
  max-width:1100px;
  margin:0 auto 100px;
  display:grid;
  grid-template-columns: 1fr 350px; /* derecha fija */
  gap:25px;
  align-items:stretch;
}

/* Tarjetas */
.contacto-card {
  background:#fff;
  border-radius:16px;
  box-shadow:0 5px 10px rgba(0,0,0,.2);
  padding:32px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Logo responsivo */
.contacto-card--logo img {
  max-width:380px;
  width:100%;
  height:auto;
  display:block;
}

/* Caja de info */
.contacto-card--info {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:28px;
}

.contacto-card--info h3 {
  font-weight:800;
  font-size: clamp(1rem, 2vw, 1.2rem);
  margin-bottom:10px;
}

.contacto-card--info p {
  margin:0 0 12px;
  font-size: clamp(.9rem, 1.6vw, 1rem);
  line-height:1.45;
}

.contacto-card--info a {
  color:#000;
  text-decoration:none;
  font-weight:700;
}

.contacto-card--info a:hover {
  text-decoration:underline;
}


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

/* TABLETS 900px → columnas se apilan */
@media (max-width: 900px) {
  .contacto-wrap {
    grid-template-columns: 1fr;
    text-align:center;
  }

  .contacto-card--logo img {
    max-width:260px;
    margin:0 auto;
  }

  .contacto-card--info {
    align-items:center;
    text-align:center;
  }
}

/* SMALL DEVICES 600px → simplificar layout */
@media (max-width: 600px) {

  .contacto {
    padding-top: 80px;
  }

  .contacto h2 {
    margin-bottom: 50px;
  }

  .contacto-card {
    padding:24px;
  }

  .contacto-card--logo img {
    max-width:220px;
  }

  .contacto-card--info p {
    font-size: 0.9rem;
  }
}


/* ======================================
   FIGURAS DECORATIVAS
   → Ajustadas para que NO generen scroll
====================================== */

.formas {
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.forma {
  position:absolute;
  opacity:.9;
  width:80px;
  max-width:20vw; /* ahora responsivas */
}

.forma.verde {
     bottom: 120px;
    left: 135px;
}

.forma.azul {
  top:80px;
  right:19%;
}

.forma.roja {
  top:70px;
  left:67%;
}

.forma.espiral {
  top:140px;
  right:8%;
  width:110px;
}

/* Ocultar decoraciones si molestan en móvil */
@media (max-width: 600px) {
  .forma {
   display: none;
  }
}