/* ==========================================================
   Hero a ancho completo: sin esquinas redondeadas, fotos que rotan,
   franja de servicios al pie. Altura contenida (no ocupa toda la pantalla).
   Colores corporativos: negro, verde, dorado y blanco.
   ========================================================== */
.hf { position: relative; isolation: isolate; overflow: hidden; background: #0a0a0a; color: #fff; margin: 0; border-radius: 0; }
.hf__photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: opacity 1.2s var(--ease), transform 9s linear; z-index: -3; }
.hf__photos img.is-on { opacity: 1; transform: scale(1); }
.hf__veil { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(8,12,10,.9) 0%, rgba(8,12,10,.62) 48%, rgba(8,12,10,.2) 100%), linear-gradient(0deg, rgba(8,12,10,.7), transparent 45%); }
.hf::after { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; background: radial-gradient(40% 50% at 88% 95%, rgba(0, 55, 33,.55), transparent 70%), radial-gradient(30% 40% at 8% 5%, rgba(247,177,0,.18), transparent 70%); animation: aurora 14s ease-in-out infinite alternate; }

.hf__wrap { width: min(1200px, 100%); margin-inline: auto; padding: clamp(44px, 6vw, 80px) var(--gutter) clamp(34px, 4vw, 52px); }
.hf__copy { max-width: 780px; }
.hf__tag { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px; margin-bottom: 16px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.hf__tag i { width: 7px; height: 7px; border-radius: 50%; background: #f7b100; animation: pulso 2.2s ease-out infinite; }
.hf__title { margin: 0 0 14px; color: #fff; font-size: clamp(40px, 5.2vw, 78px); line-height: .96; text-wrap: balance; }
.hf__title > span:not(.w), .hf__title > span:not(.w) .w { color: #f7b100; }
.hf__title .w { display: inline-block; opacity: 0; transform: translateY(.6em); filter: blur(8px); animation: hb-word .9s var(--ease) forwards; animation-delay: calc(.1s + var(--wi, 0) * .07s); }
@keyframes hb-word { to { opacity: 1; transform: none; filter: none; } }
.hf__lead { margin: 0 0 22px; max-width: 560px; font-size: clamp(18.5px, 1.3vw,21px); line-height: 1.6; color: rgba(255,255,255,.88); }
.hf__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hf__ghost { display: inline-flex; padding: 12px 22px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); color: #fff; font-weight: 600; font-size: 17px; text-decoration: none; transition: background .25s, transform .25s; }
.hf__ghost:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); }

/* franja de servicios pegada al borde inferior */
.hf__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid rgba(255,255,255,.2); background: rgba(8,12,10,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hf__links li + li { border-left: 1px solid rgba(255,255,255,.14); }
.hf__links a { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 16px clamp(14px, 2vw, 28px); color: #fff; text-decoration: none; transition: background .3s, color .3s; }
.hf__links a span { grid-row: span 2; font-family: "Bebas Neue", Impact, sans-serif; font-size: 26px; color: #f7b100; transition: color .3s; }
.hf__links a b { font-size: 19px; }
.hf__links a small { font-size: 15px; color: rgba(255,255,255,.68); transition: color .3s; }
.hf__links a:hover { background: #f7b100; color: #141414; }
.hf__links a:hover span, .hf__links a:hover small { color: #141414; }

.hf__dots { position: absolute; right: clamp(16px, 3vw, 40px); top: clamp(18px, 3vw, 32px); display: flex; gap: 6px; }
.hf__dots button { width: 38px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center; }
.hf__dots i { display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; position: relative; }
.hf__dots i::after { content: ""; position: absolute; inset: 0; background: #f7b100; transform: scaleX(0); transform-origin: left; }
.hf__dots button[aria-selected="true"] i::after { animation: slidefill var(--dur, 6s) linear forwards; }

@media (max-width: 900px) {
  .hf__links { grid-template-columns: 1fr 1fr; }
  .hf__links li:nth-child(odd) { border-left: 0; }
  .hf__links li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
  .hf__links small { display: none; }
}
@media (max-width: 600px) {
  .hf__title { font-size: clamp(36px, 11vw, 50px); }
  .hf__ctas .btn, .hf__ghost { flex: 1 1 100%; justify-content: center; }
  .hf__dots { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hf__title .w { animation: none; opacity: 1; transform: none; filter: none; } }

/* ---------- varias diapositivas ---------- */
.hf__stage { display: grid; }
.hf__slide { grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden; transition: opacity 1s var(--ease), visibility 0s 1s; z-index: 0; }
.hf__slide.is-on { opacity: 1; visibility: visible; transition: opacity 1s var(--ease), visibility 0s; z-index: 1; }
.hf__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; transform: scale(1.1); transition: transform 9s linear; }
.hf__slide.is-on .hf__img { transform: scale(1); }
.hf__slide .hf__wrap { position: relative; }
.hf__slide .hf__tag, .hf__slide .hf__lead, .hf__slide .hf__ctas { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.hf__slide.is-on .hf__tag { opacity: 1; transform: none; transition-delay: .05s; }
.hf__slide.is-on .hf__lead { opacity: 1; transform: none; transition-delay: .35s; }
.hf__slide.is-on .hf__ctas { opacity: 1; transform: none; transition-delay: .5s; }
.hf__slide .hf__title .w { animation: none; opacity: 0; }
.hf__slide.is-on .hf__title .w { animation: hb-word .9s var(--ease) forwards; animation-delay: calc(.1s + var(--wi, 0) * .06s); }
.hf__slide .hf__title { min-height: 2ch; }
.hf__veil { z-index: 0; pointer-events: none; }
.hf__stage { position: relative; z-index: 1; }
.hf__slide { z-index: 1; }

.hf__nav { position: absolute; z-index: 5; right: clamp(16px, 3vw, 40px); top: clamp(16px, 2.4vw, 28px); display: flex; align-items: center; gap: 14px; padding: 6px 8px 6px 14px; border-radius: 999px; background: rgba(8,12,10,.4); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hf__nav .hf__dots { position: static; }
.hf__count { font-size: 15.5px; font-weight: 600; color: rgba(255,255,255,.75); }
.hf__count b { color: #fff; font-size: 18px; }
.hf__arrows { display: flex; gap: 6px; }
.hf__arrows button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; font-size: 19px; cursor: pointer; transition: background .25s, transform .25s; }
.hf__arrows button:hover { background: #f7b100; color: #141414; border-color: #f7b100; transform: scale(1.06); }
@media (max-width: 600px) { .hf__nav { top: auto; bottom: auto; right: 12px; top: 10px; padding: 4px 6px 4px 10px; } .hf__nav .hf__dots, .hf__count { display: none; } .hf__dots { display: flex; } .hf__nav .hf__dots { display: none; } }
@media (min-width: 601px) { .hf__slide .hf__wrap { padding-bottom: clamp(40px, 5vw, 64px); } }
.hf__img { z-index: -2; }
.hf__slide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,12,10,.9) 0%, rgba(8,12,10,.62) 48%, rgba(8,12,10,.2) 100%), linear-gradient(0deg, rgba(8,12,10,.7), transparent 45%); }
.hf__veil { display: none; }
@media (max-width: 600px) { .hf__slide::before { background: linear-gradient(0deg, rgba(8,12,10,.92) 0%, rgba(8,12,10,.65) 60%, rgba(8,12,10,.35) 100%); } .hf__slide .hf__wrap { padding-top: 64px; } }

/* movimiento reducido: el texto se ve siempre (sin animar palabras) y las diapositivas cambian con fundido suave */
@media (prefers-reduced-motion: reduce) {
  .hf__slide .hf__title .w { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .hf__slide .hf__tag, .hf__slide .hf__lead, .hf__slide .hf__ctas { opacity: 1; transform: none; transition: none; }
  .hf__slide { transition: opacity 1s linear, visibility 0s 1s !important; }
  .hf__slide.is-on { transition: opacity 1s linear, visibility 0s !important; }
  .hf__img { transform: none !important; transition: none !important; }
  .hf__dots button[aria-selected="true"] i::after { animation: slidefill var(--dur, 6s) linear forwards !important; }
}

/* banner de las páginas de servicio: una sola diapositiva, un poco más compacto */
.hf--page .hf__wrap { padding-top: clamp(40px, 5vw, 68px); padding-bottom: clamp(34px, 4.4vw, 56px); }
.hf--page .hf__title { font-size: clamp(38px, 4.8vw, 70px); }
.hf__links a[aria-current="page"] { background: #f7b100; color: #141414; }
.hf__links a[aria-current="page"] span, .hf__links a[aria-current="page"] small { color: #141414; }

/* banner del inicio menos alto: en un portátil de 15" ya no ocupa toda la primera vista */
@media (min-width: 601px) {
  .hf__slide .hf__wrap, .hf__wrap { padding-top: clamp(30px, 3.6vw, 52px); padding-bottom: clamp(26px, 3vw, 40px); }
  .hf__tag { margin-bottom: 12px; }
  .hf__title { font-size: clamp(38px, 4.3vw, 66px); margin-bottom: 12px; }
  .hf__lead { font-size: clamp(17px, 1.2vw, 19.5px); margin-bottom: 18px; }
  .hf__links a { padding-block: 12px; }
  .hf__links a b { font-size: 17px; }
  .hf__links a small { font-size: 14px; }
  .hf__links a span { font-size: 23px; }
}

/* el zoom de la foto (empieza al 110%) se salía por debajo de la diapositiva,
   donde el velo oscuro ya no llega: la foto queda recortada dentro de su diapositiva */
.hf__slide { overflow: hidden; }