:root{
  --petroleo:#123A46;
  --petroleo-2:#1F6E7E;
  --turquesa:#2E93A6;
  --calipso:#5FB8C9;
  --gold:#C9A23B;
  --gold-soft:#E3C878;
  --claro:#EAF4F6;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Roboto',sans-serif;
  width:100vw;min-height:100vh;overflow-x:hidden;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 90% 70% at 50% 25%, rgba(46,147,166,.45) 0%, transparent 60%),
    radial-gradient(ellipse 70% 55% at 50% 100%, rgba(95,184,201,.22) 0%, transparent 65%),
    linear-gradient(180deg, #0C2A34 0%, var(--petroleo) 45%, #0E3340 100%);
  color:var(--claro);
}
#particulas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.portada{
  position:relative;z-index:2;text-align:center;
  padding:2rem;
  max-width:920px;
  width:min(920px,100%);
  animation:aparecer 1.4s ease forwards;
}
@keyframes aparecer{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.subtitulo{
  font-size:clamp(1rem,2.2vw,1.2rem);
  font-weight:400;
  color:var(--claro);
  margin-bottom:1.2rem;
  opacity:.95;
}

.bloque h2 a {
  color:var(--calipso);
  text-decoration:none;
  transition:color .3s;
}

.bloque{
  margin-top:1.4rem;
  padding:1.3rem 1.4rem;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(8px);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}
.bloque h2{
  font-size:clamp(1.15rem,2.3vw,1.4rem);
  margin-bottom:.7rem;
  color:#fff;
}
.bloque p{
  line-height:1.7;
  margin-bottom:.75rem;
  color:rgba(234,244,246,.95);
}
.servicios{
  list-style:none;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;
  margin:1rem 0 .8rem;
}
.servicios li{
  padding:.45rem .75rem;
  border-radius:999px;
  background:rgba(95,184,201,.16);
  border:1px solid rgba(95,184,201,.3);
  font-size:.95rem;
}
address{font-style:normal}
.logo{
  width:min(300px,58vw);margin:0 auto 1.6rem;
  filter:drop-shadow(0 0 24px rgba(95,184,201,.45)) drop-shadow(0 10px 30px rgba(0,0,0,.4));
  animation:flotar 6s ease-in-out infinite;
}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
h1{
  font-size:clamp(1.7rem,4.6vw,3rem);font-weight:700;letter-spacing:.04em;
  margin-bottom:.9rem;color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.separador{
  width:88px;height:3px;margin:0 auto 1.4rem;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  box-shadow:0 0 10px rgba(201,162,59,.85),0 0 26px rgba(201,162,59,.45);
}
.dato{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  font-weight:300;font-size:clamp(1rem,2.4vw,1.2rem);
  margin-bottom:.7rem;letter-spacing:.02em;
}
.dato svg{
  width:19px;height:19px;stroke:var(--gold-soft);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(201,162,59,.8));
}
.dato a{color:var(--claro);text-decoration:none;transition:color .3s}
.dato a:hover{color:var(--calipso)}
@media (prefers-reduced-motion:reduce){.logo,.portada{animation:none}}