/* Estilos mínimos personalizados */
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }

/* Topbar */
.topbar a { color: inherit; text-decoration: underline; }

/* Homepage hero */
.homepage-hero {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.15)), url("../assets/images/hero1.jpg");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  padding: 4rem 0;
  min-height: 480px;
  position: relative;
}
.homepage-hero .container { position: relative; z-index: 2; }
.homepage-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.15); z-index: 1; pointer-events: none; }
.homepage-hero h1, .homepage-hero p { color: #fff; position: relative; z-index: 3; }

.service-card { transition: transform .15s ease, box-shadow .15s ease; }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 8px 30px rgba(0,0,0,.08); }

.card-img-top { object-fit: cover; height: 220px; }

#contacto { background-image: linear-gradient(135deg, rgba(0,123,255,0.95), rgba(0,80,180,0.95)); }
footer a { text-decoration: none; }

@media (max-width: 767px){
  .homepage-hero { padding: 2rem 0; }
  .card-img-top { height: 160px; }
}

/* Small helpers */
.img-fluid.rounded { max-width: 100%; height: auto; }

/* Servicios tiles estilo rejilla */
.services-tiles {
  background-color: #0f4763;
  /* crear patrón cuadriculado similar al de referencia */
  background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.services-tiles h2 { font-weight: 700; letter-spacing: 6px; }
.service-tile { height: 320px; display: block; }
.service-tile { height: 320px; display: block; position: relative; overflow: hidden; cursor: pointer; transition: transform .28s ease, box-shadow .28s ease; }
.service-tile img, .service-tile .object-cover { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.9,.2,1); will-change: transform; }
.service-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.35) 75%); opacity: 0; transition: opacity .28s ease; pointer-events: none; }
.service-tile:hover::after { opacity: 1; }
.tile-caption { bottom: 0; left: 0; background: rgba(0,0,0,0.6); transform: translateY(100%); transition: transform .32s cubic-bezier(.2,.9,.2,1); }
.service-tile:hover .tile-caption { transform: translateY(0); }
.service-tile:hover img { transform: scale(1.08) translateY(-4px); }
.service-tile:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(11,28,40,0.25); }

@media (max-width: 767px){
  .service-tile { height: 220px; }
}