body {
  background: white;
  color: var(--texto);

  text-align:center;
  font-family: "Poppins", sans-serif;
}

b {
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.titulo-presentacion {
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 900;
  font-size: 55px;
  text-transform: uppercase;

  background: conic-gradient(
    from var(--angle),
    #22c55e,
    #3b82f6,
    #a855f7,
    #f59e0b,
    #22c55e
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: spin 4s linear infinite;
}

@keyframes spin {
  to {
    --angle: 360deg;
  }
}

#contacto h2{

    text-align:center;

    font-size:3rem;

    font-weight:800;

    color:#111827;

    margin-bottom:20px;

}

#contacto .titulo{

    text-align:center;

    margin-bottom:70px;

}

#contacto .titulo p{

    max-width:650px;

    margin:auto;

    color:#6B7280;

    line-height:1.8;

    font-size:1.05rem;

}

.contactos{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:70px;

    flex-wrap:wrap;

}

.contacto{

    width:320px;

    text-decoration:none;

    text-align:center;

    padding:20px;

    border-radius:20px;

    transition:0.3s ease;

}

.contacto:hover{

    transform:translateY(-8px);

}

.contacto img{

    width:80px;

    height:80px;

    object-fit:contain;

    margin:0 auto 25px;

}

.contacto h3{

    color:#111827;

    font-size:1.6rem;

    font-weight:700;

    margin-bottom:15px;

}

.contacto p{

    color:#6B7280;

    font-size:1rem;

    line-height:1.8;

    margin-bottom:30px;

}

.contacto::after{

    content:"Contactar";

    display:inline-block;

    padding:14px 30px;

    border-radius:14px;

    background:linear-gradient(135deg,#2563EB,#3B82F6);

    color:#ffffff;

    font-weight:600;

    transition:.3s;

}

.contacto:hover::after{

    transform:translateY(-2px);

    box-shadow:0 12px 30px rgba(37,99,235,.25);

}