/* Portada inspirada en la referencia: infraestructura, energía y confort. */
:root { --y: #ffcc00; }
.nav {
  isolation: isolate;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}
.nav::before {
  content: '';
  position: absolute;
  inset: 0 0 0 40%;
  z-index: -1;
  background: #061321a3;
  backdrop-filter: blur(5px);
  pointer-events: none;
}
.nav.solid { background: #061321f2; backdrop-filter: blur(8px); }
.nav.solid::before { background: transparent; backdrop-filter: none; }
.nav__in { max-width: 1440px; height: 76px; padding-inline: 72px; }
.brand { width: 136px; height: 64px; }
.brand img { width: 136px; }
.menu { gap: clamp(24px, 2.6vw, 42px); }
.menu > a, .nav-service-toggle { font-size: 11px; font-weight: 500; }
.nav-service-toggle span { font-size: 0; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; }
.menu .btn { min-height: 38px; padding: 8px 18px; margin-left: clamp(42px, 6vw, 90px); font-weight: 600; }
.menu .btn span { font-size: 18px; line-height: 1; }
.hero {
  min-height: clamp(640px, 48vw, 820px);
  padding: 132px 0 40px;
  display: flex;
  align-items: center;
}
.hero__in { width: min(1440px, 100%); max-width: 1440px; padding-inline: 72px; text-align: left; display: block; }
.hero__copy { max-width: 650px; margin: 0; }
.hero__photo img { object-position: center center; }
.hero::before {
  background: linear-gradient(90deg, #030d18ed 0%, #030d18c2 30%, #030d1860 51%, #030d1808 75%),
    linear-gradient(0deg, #030b16b8, transparent 30%, #06122012 75%, #06122055);
}
.hero::after { display: none; }
.hero__light { background: none; }
.hero .eyebrow {
  font-size: 10px;
  letter-spacing: .035em;
  padding: 7px 12px;
  border-radius: 7px;
  border-color: #ffcc0070;
  background: #ffcc000a;
  margin: 0 0 15px;
}
.hero .eyebrow::before { display: none; }
.hero .eyebrow svg { width: 13px; height: 13px; flex-shrink: 0; }
.hero h1 {
  font-size: clamp(42px, 4.2vw, 64px);
  line-height: 1.08;
  letter-spacing: -.045em;
  margin: 0 0 18px;
  max-width: 650px;
  text-shadow: 0 3px 18px #0003;
}
.hero-title-line { display: block; }
.hero .lead { margin: 0; max-width: 570px; font-size: 15px; line-height: 1.65; color: #e0e3e8; }
.hero .cta { justify-content: flex-start; margin: 22px 0 30px; gap: 13px; }
.hero .cta .btn { min-width: 0; min-height: 54px; font-size: 13px; padding: 13px 22px; border-radius: 5px; }
.hero .cta > .btn:first-child { gap: 20px; }
.hero .cta > .btn:first-child > span { font-size: 24px; line-height: 1; }
.hero .cta .btn--ghost { padding: 10px 17px; gap: 13px; border: 1px solid #ffffff5c; background: #07111b75; color: #fff; }
.hero .btn--ghost > span:last-child { text-align: left; line-height: 1.4; }
.hero .btn--ghost small { display: block; margin-top: 3px; font-weight: 400; font-size: 10px; color: #d0d6dd; }
.hero-service-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #ffffff6b; border-radius: 50%; font-size: 19px; }
.hero .chips { justify-content: flex-start; gap: 0; flex-wrap: nowrap; margin: 0; }
.hero .chips li { gap: 12px; font-size: 10px; letter-spacing: 0; line-height: 1.45; color: #e0e3e8; padding: 0 19px; border-radius: 0; }
.hero .chips li:first-child { padding-left: 0; }
.hero .chips li + li { border-left: 1px solid #ffffff24; }
.hero .chips li::before { display: none; }
.hero .chips svg { width: 25px; height: 28px; color: var(--y); flex-shrink: 0; }
.hero-word { display: inline-block; }
.hero-enter .hero-word { animation: hero-text-in 800ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--entrance-delay, 0ms); }
.hero-enter .hero-reveal { animation: hero-text-in 850ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--entrance-delay, 0ms); }
@keyframes hero-text-in {
  from { opacity: 0; transform: translateY(22px); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (max-width: 1200px) {
  .nav__in, .hero__in { padding-inline: 40px; }
  .menu { gap: 20px; }
  .menu .btn { margin-left: 28px; }
  .hero__copy { max-width: 590px; }
}
@media (max-width: 960px) {
  .nav__in { height: 70px; padding-inline: 28px; }
  .nav::before { inset: 0; background: #0613218c; }
  .menu { inset: 70px 12px auto; }
  .menu { gap: 0; }
  .menu > a, .nav-service-toggle { font-size: 14px; }
  .menu .btn { margin-left: 0; }
  .hero { min-height: 650px; padding: 125px 0 42px; }
  .hero__in { padding-inline: 36px; }
  .hero__copy { max-width: 580px; }
  .hero h1 { font-size: clamp(40px, 6vw, 56px); }
  .hero .lead { max-width: 500px; }
  .hero::before { background: linear-gradient(90deg, #030d18e8, #030d18a8 55%, #030d1830), linear-gradient(0deg, #030b16bb, transparent 70%); }
}
@media (max-width: 600px) {
  .nav__in { padding-inline: 20px; }
  .brand, .brand img { width: 122px; }
  .hero { min-height: 690px; min-height: max(690px, 92svh); padding: 119px 0 36px; }
  .hero__in { padding-inline: 22px; }
  .hero__photo img { object-position: 62% center; }
  .hero::before { background: linear-gradient(90deg, #030d18e5, #030d18aa), linear-gradient(0deg, #030b16d9, transparent 65%); }
  .hero h1 { font-size: clamp(30px, 8.3vw, 48px); line-height: 1.13; margin-bottom: 19px; }
  .hero .eyebrow { font-size: 8px; padding: 7px 9px; gap: 6px; margin-bottom: 18px; }
  .hero .lead { font-size: 13px; line-height: 1.8; max-width: 440px; }
  .hero .cta { margin: 25px 0 28px; gap: 10px; flex-wrap: wrap; }
  .hero .cta .btn { font-size: 11px; min-height: 50px; padding: 11px 14px; }
  .hero .cta > .btn:first-child { gap: 10px; }
  .hero .cta .btn--ghost { padding: 8px 12px; gap: 9px; }
  .hero .btn--ghost small { font-size: 8px; }
  .hero-service-icon { width: 25px; height: 25px; }
  .hero .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 19px 10px; max-width: 370px; }
  .hero .chips li { font-size: 10px; gap: 11px; padding: 0; }
  .hero .chips li + li { border: 0; }
  .hero .chips svg { width: 23px; height: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-enter .hero-word, .hero-enter .hero-reveal { animation: none; opacity: 1; transform: none; filter: none; }
}