/* =========================================================
   Fontaneros Veloces — estilos de las páginas de servicio
   ========================================================= */

/* ---------- Portada del servicio ---------- */
.hero-sv {
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 85% 20%, rgba(217, 4, 41, .38) 0%, rgba(217, 4, 41, 0) 45%),
    radial-gradient(circle at 0% 100%, rgba(217, 4, 41, .28) 0%, rgba(217, 4, 41, 0) 40%),
    var(--negro);
  padding: 140px 0 110px;
}
.hero-sv::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1.4px, transparent 1.4px);
  background-size: 24px 24px;
}
.hero-sv h1 {
  font-size: clamp(2rem, 7vw, 3.4rem); font-weight: 800; line-height: 1.12;
  margin-bottom: 1rem;
}
.hero-sv h1 span { color: #ff5470; }
.hero-sv .lead {
  color: rgba(255, 255, 255, .86); font-size: clamp(1.02rem, 3.4vw, 1.18rem);
  max-width: 600px; margin-bottom: 1.7rem;
}

.hero-sv-foto { position: relative; margin: 0 0 0 auto; max-width: 500px; }
.hero-sv-foto::before {
  content: ""; position: absolute; inset: 18px 18px -18px -18px;
  border-radius: 28px; background: var(--rojo);
}
.hero-sv-foto img {
  position: relative; z-index: 1; display: block;
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 28px; box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
.hero-sv-sello {
  position: absolute; z-index: 2; left: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255, 255, 255, .96); color: var(--negro);
  border-radius: 50px; padding: .55rem 1.05rem;
  font-weight: 600; font-size: .9rem; line-height: 1.2;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .25);
}
.hero-sv-sello i { color: var(--rojo); font-size: 1.05rem; }

@media (max-width: 991.98px) {
  .hero-sv { padding: 125px 0 100px; }
  .hero-sv-foto { margin: 1.4rem auto 0 0; max-width: 560px; }
  .hero-sv-foto::before { inset: 12px 12px -12px -12px; border-radius: 22px; }
  .hero-sv-foto img { border-radius: 22px; }
}

.hero-sv .anim { opacity: 0; transform: translateY(24px); animation: entrar .9s ease forwards; }
.hero-sv .anim.a2 { animation-delay: .15s; }
.hero-sv .anim.a3 { animation-delay: .3s; }
.hero-sv .anim.a4 { animation-delay: .45s; }

/* ---------- Tarjetas de "qué hacemos" ---------- */
.que-card {
  display: flex; flex-direction: column; gap: 1rem;
  background: #fff; border: 1px solid var(--linea); border-radius: 20px;
  padding: 1.6rem 1.5rem; height: 100%;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.que-card:hover { transform: translateY(-5px); box-shadow: var(--sombra); border-color: transparent; }
.que-icono {
  flex: 0 0 54px; width: 54px; height: 54px; border-radius: 16px;
  background: var(--rojo); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.45rem;
  box-shadow: 0 10px 22px rgba(217, 4, 41, .28);
  transition: transform .3s ease;
}
.que-card:hover .que-icono { transform: rotate(-8deg) scale(1.06); }
.que-card h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.que-card p { color: var(--gris); margin: 0; font-size: .97rem; line-height: 1.6; }
@media (max-width: 575.98px) {
  .que-card { flex-direction: row; align-items: flex-start; padding: 1.15rem 1.1rem; }
  .que-icono { flex: 0 0 46px; width: 46px; height: 46px; font-size: 1.25rem; border-radius: 14px; }
}
.que-contacto { margin-top: 2.6rem; }
.que-contacto .lineas { margin: 0 auto; }
.que-contacto .lineas-titulo { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .hero-sv .anim { opacity: 1; transform: none; animation: none; }
}