#hosWrap, #hosWrap * { box-sizing: border-box; }
#hosWrap { --hos-blue: #4280EF; --hos-blue2: #5271FB; --hos-primary: #5E71FF; --hos-navy: #142A5B; --hos-lime: #A2D95E; --hos-cyan: #18E9F0; --hos-violet: #705EF4; --hos-royal: #235BC6; --hos-pink: #FF067D; --hos-dark1: #0B0F33; --hos-dark2: #120D1E; --hos-dark3: #0D1240; font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.hos-hero { position: relative; height: 400svh; }
.hos-sticky { position: relative; top: 0px; left: 0px; width: 100%; height: 100svh; overflow: hidden; background: rgb(255, 255, 255); touch-action: pan-y; }
.hos-video, .hos-poster { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; }
.hos-video { display: block; }
.hos-poster { z-index: 1; pointer-events: none; transition: opacity 0.5s; }
.hos-poster.is-hidden { opacity: 0; }
.hos-scrim { position: absolute; inset: 0px; background: linear-gradient(rgba(10, 14, 24, 0.38) 0%, rgba(10, 14, 24, 0.16) 26%, rgba(10, 14, 24, 0) 48%); }
.hos-leftscrim { position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(3, 5, 13, 0.74) 0%, rgba(3, 5, 13, 0.46) 32%, rgba(3, 5, 13, 0.12) 56%, rgba(3, 5, 13, 0) 72%); pointer-events: none; }
.hos-vignette { position: absolute; inset: 0px; box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 18vw 2vw inset; pointer-events: none; }
.hos-whitefade { position: absolute; inset: 0px; background: rgb(255, 255, 255); opacity: 0; pointer-events: none; }
.hos-intro-vignette { position: absolute; inset: 0px; background: radial-gradient(at 38% 44%, rgba(6, 9, 20, 0) 28%, rgba(6, 9, 20, 0.62) 100%); pointer-events: none; }
.hos-copy { position: absolute; z-index: 4; left: clamp(24px, 5.5vw, 100px); top: 50%; transform: translateY(-50%); width: clamp(340px, 44vw, 620px); color: rgb(255, 255, 255); }
.hos-eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); margin-bottom: 22px; border-left: 2px solid var(--hos-blue); padding-left: 10px; font-family: "Google Sans Flex", sans-serif; }
.hos-copy h1 { font-family: "Google Sans Flex", -apple-system, sans-serif; font-size: clamp(40px, 4.4vw, 72px); line-height: 1.04; font-weight: 700; letter-spacing: -0.015em; margin: 0px 0px 24px; color: rgb(255, 255, 255); }
.hos-copy p { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; color: rgba(255, 255, 255, 0.86); margin: 0px 0px 34px; max-width: 480px; }
.hos-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--hos-primary); font-size: 16px; font-weight: 700; margin: 14px 0px; padding: 18px 30px; border-radius: 999px; text-decoration: none; font-family: "Google Sans Flex", sans-serif; box-shadow: rgba(94, 113, 255, 0.65) 0px 14px 30px -10px; overflow: hidden; isolation: isolate; will-change: transform; }
.hos-cta-label { position: relative; z-index: 2; pointer-events: none; transition: color 0.2s; color: rgb(245, 247, 255) !important; }
.hos-cta-fill { position: absolute; z-index: 1; left: var(--mx, 50%); top: var(--my, 50%); width: 14px; height: 14px; border-radius: 50%; background: var(--hos-navy); transform: translate(-50%, -50%) scale(0); transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; }
.hos-cta:hover .hos-cta-fill { transform: translate(-50%, -50%) scale(22); }
.hos-trust { display: flex; align-items: center; gap: 14px; margin-top: 34px; text-decoration: none; width: fit-content; }
.hos-trust-flags { display: flex; }
#hosWrap .hos-flag { border: 2.5px solid rgba(255, 255, 255, 0.95); margin-left: -9px; box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 8px; position: relative; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: none; animation-play-state: running; animation-name: hosFlagBounce; animation-timeline: auto; animation-range: normal; animation-delay: calc(var(--i, 0) * 0.5s); display: block !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; object-fit: cover !important; }
#hosWrap .hos-flag:first-child { margin-left: 0px; }
@media (prefers-reduced-motion: reduce) {
  #hosWrap .hos-flag { animation: auto ease 0s 1 normal none running none !important; }
}
.hos-trust-info { display: flex; flex-direction: column; gap: 2px; }
.hos-trust-top { display: flex; align-items: center; gap: 6px; }
.hos-trust-stars { color: rgb(255, 201, 77); font-size: 12px; letter-spacing: 1px; }
.hos-trust-google { font-family: "Google Sans Flex", sans-serif; font-weight: 700; font-size: 13px; color: rgba(255, 255, 255, 0.92); }
.hos-trust-label { font-size: 12px; color: rgba(255, 255, 255, 0.6); font-weight: 500; }
@media (min-width: 761px) {
  .hos-copy { max-width: none; }
}
.hos-gallery { position: absolute; z-index: 2; right: 0px; top: 0px; width: 52vw; height: 100%; overflow: hidden; pointer-events: none; mask-image: linear-gradient(90deg, transparent 0%, transparent 2%, rgb(0, 0, 0) 10%, rgb(0, 0, 0) 100%); }
.hos-gallery-track { position: absolute; top: 0px; left: 0px; height: 100%; display: flex; align-items: center; padding-left: 6vw; will-change: transform; }
.hos-gcard { position: relative; flex: 0 0 auto; border: 1px solid rgb(245, 247, 243); margin-right: 36px; width: clamp(180px, 15vw, 240px); height: clamp(216px, 20vw, 296px); border-radius: 24px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.5) 0px 20px 40px -14px; transform: scale(var(--gs, 1)); opacity: var(--go, 1); }
.hos-gcard-video { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; }
.hos-gcard-overlay { position: absolute; inset: 0px; background: linear-gradient(rgba(8, 12, 24, 0) 45%, rgba(8, 12, 24, 0.72) 100%); }
.hos-gcard-label { position: absolute; z-index: 2; left: 16px; bottom: 24px; right: 16px; color: rgb(255, 255, 255); font-family: "Google Sans Flex", sans-serif; font-size: 22px; font-weight: 700; line-height: 1.12; text-shadow: rgba(0, 0, 0, 0.4) 0px 2px 8px; }
.hos-gcard-label .hos-gl-line { display: block; }
@media (prefers-reduced-motion: reduce) {
  .hos-gallery-track { transform: none !important; }
  .hos-gcard { transform: none !important; }
}
.hos-cards-stack { display: contents; }
.hos-cards-head { position: absolute; z-index: 3; left: 0px; right: 0px; top: 26%; text-align: center; padding: 0px 24px; opacity: 0; }
.hos-cards-head::before { content: ""; position: absolute; inset: -36px -8%; background: radial-gradient(55% 100%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.55) 42%, rgba(255, 255, 255, 0) 74%); filter: blur(20px); z-index: -1; pointer-events: none; }
.hos-cards-head h2 { font-family: "Google Sans Flex", sans-serif; font-weight: 700; font-size: clamp(42px, 3.4vw, 40px); color: var(--hos-blue2); margin: 0px 0px 12px; }
.hos-cards-head p { font-family: Manrope, sans-serif; font-size: clamp(16px, 1.7vw, 21px); font-weight: 500; color: rgb(91, 100, 114); max-width: 620px; margin: 0px auto; line-height: 1.5; }
.hos-ch { display: inline-block; }
.hos-h1-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hos-h1-ch { display: inline-block; will-change: transform; }
.hos-h1-line { display: inline; }
@media (min-width: 761px) and (max-height: 820px) {
  .hos-cards-head { top: 10%; }
}
.hos-carousel { position: absolute; z-index: 3; left: 0px; right: 0px; bottom: clamp(320px, 15vh, 80px); display: flex; align-items: flex-end; justify-content: center; gap: clamp(-42px, -2.6vw, -16px); opacity: 0; perspective: 1200px; }
.hos-card { width: clamp(220px, 19vw, 300px); aspect-ratio: 3 / 4; background: rgba(255, 255, 255, 0.96); border-radius: 24px; padding: 28px; transform: rotate(var(--r)) translateX(var(--tx)) translateY(0); box-shadow: rgba(0, 0, 0, 0.38) 0px 24px 48px -12px; color: rgb(28, 36, 48); display: flex; flex-direction: column; }
.hos-card-mid { transform: rotate(0deg) translateY(-22px); }
.hos-card-tag { width: 34px; height: 34px; border-radius: 50%; background: rgba(66, 128, 239, 0.12); color: var(--hos-blue); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; align-self: flex-end; }
.hos-card-tag img { width: 18px; height: 18px; object-fit: contain; display: block; }
.hos-card-media { flex: 1 1 0%; margin: 16px 0px; border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hos-icon { width: 78%; height: 78%; overflow: visible; }
.hos-scrollhint-mouse { width: 40px; height: 64px; }
.hos-card-text { margin-top: auto; }
.hos-card h3 { font-family: "Google Sans Flex", sans-serif; font-size: 22px; font-weight: 700; margin: 0px 0px 10px; }
.hos-card p { font-size: 14.5px; line-height: 1.45; color: rgb(91, 100, 114); margin: 0px; }
.hos-icon-mapa .hos-i-pin { transform-origin: 60px 76px; animation: 2.6s ease-in-out 0s infinite normal none running hosPinDrop; }
.hos-icon-mapa .hos-i-ping { transform-origin: 50px 40px; animation: 2.6s ease-out 0s infinite normal none running hosPing; }
.hos-icon-mapa .hos-i-road { stroke-dasharray: 140; stroke-dashoffset: 140; animation: 2.6s ease-in-out 0s infinite normal none running hosDraw; }
.hos-icon-marca .hos-i-wave { transform-origin: 60px 64px; opacity: 0; animation: 2.4s ease-out 0s infinite normal none running hosBroadcast; }
.hos-icon-marca .hos-i-wave2 { animation-delay: 0.25s; }
.hos-icon-marca .hos-i-wave3 { animation-delay: 0.5s; }
.hos-icon-marca .hos-i-bolt { transform-origin: 60px 63px; animation: 2.4s ease-in-out 0s infinite normal none running hosBoltPulse; }
.hos-icon-clique .hos-i-ripple { transform-origin: 52px 52px; opacity: 0.9; animation: 1.8s ease-out 0s infinite normal none running hosRipple; }
.hos-icon-clique .hos-i-check { transform-origin: 80px 76px; opacity: 0; transform: scale(0.4); animation: 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0s infinite normal none running hosCheckPop; }
.hos-icon-compra .hos-i-loop { transform-origin: 52px 54px; animation: 3.2s linear 0s infinite normal none running hosSpin; }
.hos-icon-compra .hos-i-heart { transform-origin: 60px 64px; animation: 1.6s ease-in-out 0s infinite normal none running hosHeartBeat; }
.hos-icon-dado .hos-i-bar { transform-box: fill-box; transform-origin: center bottom; animation: 2.2s ease-out 0s infinite normal none running hosBarGrow; }
.hos-icon-dado .hos-i-bar1 { animation-delay: 0s; }
.hos-icon-dado .hos-i-bar2 { animation-delay: 0.12s; }
.hos-icon-dado .hos-i-bar3 { animation-delay: 0.24s; }
.hos-icon-dado .hos-i-arrow { stroke-dasharray: 90; stroke-dashoffset: 90; animation: 2.2s ease-in-out 0.5s infinite normal none running hosDraw; }
.hos-i-scrolldot { animation: 1.8s ease-in-out 0s infinite normal none running hosScrollDot; }
@media (prefers-reduced-motion: reduce) {
  .hos-icon * { animation: auto ease 0s 1 normal none running none !important; }
}
@media (max-width: 760px) {
  #hosWrap { margin-top: -30px; }
  .hos-copy { left: 0px; right: 0px; width: auto; top: clamp(12%, 8% + 40px, 20%); transform: none; padding: 4% 22px; text-align: left; }
  .hos-eyebrow { margin-bottom: 12px; font-size: 11px; }
  .hos-copy h1 { font-size: clamp(28px, 8vw, 38px); margin-bottom: 12px; }
  .hos-h1-line { display: block; }
  .hos-h1-line + .hos-h1-line { margin-top: 2px; }
  .hos-copy p { font-size: 14px; margin-bottom: 20px; max-width: 100%; }
  .hos-cta { padding: 14px 24px; font-size: 14px; }
  .hos-trust { margin-top: 18px; gap: 10px; }
  #hosWrap .hos-flag { width: 34px !important; height: 34px !important; }
  .hos-trust-label { display: none; }
  .hos-trust-stars { font-size: 10px; }
  .hos-trust-google { font-size: 11px; }
  .hos-gallery { inset: auto 0px 0px; width: 100%; height: 48%; mask-image: linear-gradient(90deg, transparent 0%, rgb(0, 0, 0) 14%, rgb(0, 0, 0) 86%, transparent 100%); }
  .hos-gallery-track { padding-left: 40vw; }
  .hos-gcard { width: clamp(150px, 46vw, 190px); height: clamp(168px, 38vw, 205px); margin-right: 28px; margin-top: 42px; }
  .hos-gcard-label { font-size: 18px; left: 14px; bottom: 24px; right: 14px; }
  .hos-cards-stack { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; position: absolute; z-index: 3; left: 0px; right: 0px; top: calc(56px + env(safe-area-inset-top, 0px)); bottom: 0px; padding: 12px 0px 4vh; }
  .hos-cards-head { position: relative; top: auto; left: auto; right: auto; flex: 0 0 auto; padding: 0px 22px; }
  .hos-cards-head h2 { font-size: 21px; margin: 0px 0px 8px; }
  .hos-cards-head p { font-size: 14px; line-height: 1.42; }
  .hos-cards-head::before { inset: -28px -12%; filter: blur(16px); }
  .hos-scrollhint { display: none !important; }
  .hos-leftscrim { display: none; }
  .hos-intro-vignette { background: linear-gradient(rgba(6, 9, 20, 0.72) 0%, rgba(6, 9, 20, 0.4) 32%, rgba(6, 9, 20, 0) 62%); }
  .hos-scrim { background: linear-gradient(rgba(6, 9, 20, 0.62) 0%, rgba(6, 9, 20, 0.38) 30%, rgba(6, 9, 20, 0.08) 52%, rgba(6, 9, 20, 0) 64%); }
  .hos-carousel { position: relative; inset: auto; width: 64vw; max-width: 270px; aspect-ratio: 3 / 4; display: block; perspective: none; flex: 0 0 auto; }
  .hos-card { position: absolute; inset: 0px; width: 100%; height: 100%; }
  .hos-card-mid { transform: none; }
  .hos-card:nth-child(1) { transform: rotate(-4deg); z-index: 5; }
  .hos-card:nth-child(2) { transform: rotate(-3deg); z-index: 4; }
  .hos-card:nth-child(3) { transform: rotate(-2deg); z-index: 3; }
  .hos-card:nth-child(4) { transform: rotate(-1deg); z-index: 2; }
  .hos-card:nth-child(5) { transform: rotate(0deg); z-index: 1; }
  .hos-card h3 { font-size: 18px; }
  .hos-card p { display: block; font-size: 13px; }
}
.hos-scrollhint { position: absolute; z-index: 4; right: clamp(20px, 4vw, 54px); bottom: clamp(20px, 4vw, 54px); width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }
.hos-scrollhint-disc { position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, rgba(8, 12, 22, 0.55) 0%, rgba(8, 12, 22, 0.28) 62%, transparent 100%); }
.hos-scrollhint-ring { position: absolute; inset: 0px; width: 100%; height: 100%; animation: 14s linear 0s infinite normal none running hosSpin; }
.hos-scrollhint-dashring { position: absolute; inset: -10px; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, 0.4); animation: 20s linear 0s infinite reverse none running hosSpin; }
.hos-scrollhint-text { fill: rgba(255, 255, 255, 0.8); font-size: 8.6px; letter-spacing: 0.08em; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .hos-scrollhint-ring { animation: auto ease 0s 1 normal none running none; }
}