/* ====================================================================== DIFUSOR V131 · HEADER VOLUMEN + DIFUSOR PANEO COHERENTE - Difusor: paneo uniforme y contenido; mantiene escala de Servicios - Header: hover de micro-placa, sin texto transparente ni barrido espejo - CTA: texto siempre legible - Logo: placa flotante de vidrio oscuro, anclada en su posición ====================================================================== */ /* ---------------------------------------------------------------------- 1. DIFUSOR · MOVIMIENTO AUDITADO El problema de V130 era direccional: cada imagen paneaba hacia un lugar distinto. Conservamos el transform aprobado de Servicios, pero hacemos un desplazamiento interno uniforme (+3% X / -2% Y). ---------------------------------------------------------------------- */ body.v73-home #nosotros .milestone, body.v73-home #nosotros .milestone-origin, body.v73-home #nosotros .milestone-story{ background-size:cover!important; transition: transform .42s cubic-bezier(.22,.61,.36,1), box-shadow .42s ease, border-color .42s ease, background-position 1.10s cubic-bezier(.22,.61,.36,1)!important; } body.v73-home #nosotros .milestone:hover, body.v73-home #nosotros .milestone:focus-visible, body.v73-home #nosotros .milestone-origin:hover, body.v73-home #nosotros .milestone-origin:focus-visible, body.v73-home #nosotros .milestone-story:hover, body.v73-home #nosotros .milestone-story:focus-visible{ transform:translateY(-5px) scale(1.012)!important; background-size:cover!important; } /* Mismo sentido y amplitud de paneo para las cuatro tarjetas. */ body.v73-home #nosotros .milestone-origin{ background-position:50% 44%!important; } body.v73-home #nosotros .milestone-origin:hover, body.v73-home #nosotros .milestone-origin:focus-visible{ background-position:53% 42%!important; } body.v73-home #nosotros .milestone-story[data-story="reinvention"]{ background-position:52% 46%!important; } body.v73-home #nosotros .milestone-story[data-story="reinvention"]:hover, body.v73-home #nosotros .milestone-story[data-story="reinvention"]:focus-visible{ background-position:55% 44%!important; } body.v73-home #nosotros .milestone-story[data-story="music"]{ background-position:58% 38%!important; } body.v73-home #nosotros .milestone-story[data-story="music"]:hover, body.v73-home #nosotros .milestone-story[data-story="music"]:focus-visible{ background-position:61% 36%!important; } body.v73-home #nosotros .milestone-story[data-story="today"]{ background-position:50% 48%!important; } body.v73-home #nosotros .milestone-story[data-story="today"]:hover, body.v73-home #nosotros .milestone-story[data-story="today"]:focus-visible{ background-position:53% 46%!important; } /* ---------------------------------------------------------------------- 2. HEADER · MÁS VISUAL, PERO SIEMPRE LEGIBLE Eliminamos el texto transparente/barrido espejo de V129. El contraste proviene del volumen del botón: fondo vidrio, elevación y blanco limpio. ---------------------------------------------------------------------- */ @media (hover:hover) and (min-width:1001px){ .nav .menu a[data-nav]{ color:rgba(236,245,249,.86)!important; -webkit-text-fill-color:currentColor!important; background-image:none!important; animation:none!important; padding-left:12px!important; padding-right:12px!important; border-radius:11px!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,0)!important; text-shadow:none!important; transition: transform .20s cubic-bezier(.22,.61,.36,1), color .18s ease, background-color .18s ease, box-shadow .20s ease!important; } .nav .menu a[data-nav]:hover, .nav .menu a[data-nav]:focus-visible{ color:#fff!important; -webkit-text-fill-color:#fff!important; background:rgba(255,255,255,.075)!important; background-image:none!important; transform:translateY(-3px) scale(1.045)!important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), inset 0 1px 0 rgba(255,255,255,.11), 0 9px 24px rgba(0,0,0,.18)!important; text-shadow:0 0 10px rgba(255,255,255,.18)!important; animation:none!important; } .nav .menu a[data-nav]:hover::after, .nav .menu a[data-nav]:focus-visible::after{ transform:scaleX(.62)!important; background:#bfeaff!important; box-shadow:0 0 10px rgba(161,224,248,.48)!important; } /* CTA: mantener siempre contraste fuerte y texto oscuro. */ .nav .navin > .cta{ background:#f7fbfd!important; color:#0b1d27!important; border-color:rgba(255,255,255,.58)!important; box-shadow:0 6px 18px rgba(0,0,0,.14)!important; } .nav .navin > .cta .v129-nav-label, .nav .navin > .cta:hover .v129-nav-label, .nav .navin > .cta:focus-visible .v129-nav-label{ color:#0b1d27!important; -webkit-text-fill-color:#0b1d27!important; background:none!important; background-image:none!important; animation:none!important; text-shadow:none!important; } .nav .navin > .cta:hover, .nav .navin > .cta:focus-visible{ background:#fff!important; color:#071821!important; transform:translateY(-3px) scale(1.035)!important; filter:none!important; border-color:rgba(255,255,255,.9)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 10px 26px rgba(0,0,0,.20), 0 0 0 1px rgba(176,226,245,.18)!important; } /* -------------------------------------------------------------------- 3. LOGO · PLACA FLOTANTE El logo permanece en el mismo lugar; sobresale por profundidad y no por movimiento excesivo. Sin barrido espejo sobre la imagen. -------------------------------------------------------------------- */ .nav .logo-wrap{ transform:none!important; padding:8px 13px!important; border-radius:16px!important; isolation:isolate!important; transition:transform .20s cubic-bezier(.22,.61,.36,1),filter .20s ease!important; } .nav .logo-wrap::before{ content:""!important; display:block!important; position:absolute!important; inset:2px 1px!important; border-radius:15px!important; background:linear-gradient(180deg,rgba(18,43,56,.76),rgba(6,22,31,.74))!important; border:1px solid rgba(180,226,244,.19)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.18), 0 7px 0 rgba(1,10,15,.10), 0 12px 25px rgba(0,0,0,.24)!important; -webkit-backdrop-filter:blur(11px) saturate(120%)!important; backdrop-filter:blur(11px) saturate(120%)!important; opacity:1!important; z-index:0!important; } .nav .logo-wrap::after{ content:none!important; display:none!important; animation:none!important; } .nav .logo-wrap:hover, .nav .logo-wrap:focus-visible{ transform:translateY(-2px)!important; filter:none!important; } .nav .logo-wrap:hover::before, .nav .logo-wrap:focus-visible::before{ border-color:rgba(197,235,249,.32)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.16), 0 8px 0 rgba(1,10,15,.11), 0 16px 30px rgba(0,0,0,.28)!important; } .nav .logo-wrap .logo-main{ position:relative!important; z-index:1!important; filter:brightness(1.03) contrast(1.03) drop-shadow(0 2px 5px rgba(0,0,0,.20))!important; transition:filter .18s ease!important; } .nav .logo-wrap:hover .logo-main, .nav .logo-wrap:focus-visible .logo-main{ filter:brightness(1.12) contrast(1.04) drop-shadow(0 3px 7px rgba(0,0,0,.22))!important; } } @media (prefers-reduced-motion:reduce){ body.v73-home #nosotros .milestone, .nav .menu a[data-nav], .nav .navin > .cta, .nav .logo-wrap{ transition:none!important; } }