/* ELEJEM · Etapa 5I · capa de experiencia de usuario para la web pública.
   Incremental: no sustituye estilos previos, solo los completa. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
html { scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
::selection { background: #f4b223; color: #111318; }
:where(a, button, summary, [tabindex]):focus-visible { outline: 3px solid #bd8309; outline-offset: 4px; border-radius: 2px; }
:where(.service-hero, .hero, .site-footer, .contact, .menu-panel, .work-video, .ux-mobilebar) :where(a, button, summary):focus-visible { outline-color: #f4b223; }
.footer-column a { display: inline-flex; align-items: center; min-height: 32px; }
@media (pointer: coarse) { .footer-column a, .legal-index a { min-height: 44px; } }

/* Barra fija de contacto en móvil */
.ux-mobilebar { display: none; }
@media (max-width: 720px) {
  .ux-mobilebar {
    position: fixed; z-index: 990; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 1px;
    background: #2a2d33; border-top: 1px solid #ffffff1f;
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(105%); transition: transform .28s cubic-bezier(.22,1,.36,1);
  }
  .ux-mobilebar.is-visible { transform: none; }
  .ux-mobilebar a {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px;
    background: #111318; color: #f7f6f2; text-decoration: none;
    font: 700 12px/1 var(--font-body, Manrope, sans-serif); letter-spacing: .08em; text-transform: uppercase;
  }
  .ux-mobilebar a:active { background: #1c1f25; }
  .ux-mobilebar a.ux-primary { background: #f4b223; color: #111318; }
  .ux-mobilebar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  body.ux-has-mobilebar .site-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  body.menu-open .ux-mobilebar, html[data-cookie-pending] .ux-mobilebar { transform: translateY(105%); }
}
@media (max-width: 360px) { .ux-mobilebar a { font-size: 11px; letter-spacing: .04em; gap: 6px; } }


/* Imágenes perezosas: fondo neutro mientras cargan, sin saltos de diseño */
img[loading="lazy"] { background: #1a1d22; }
.brand-chip img[loading="lazy"], .contact-brand-watermark, .drawer-logo, .brand-logo-footer { background: transparent; }

/* Vídeo: estado de carga visible */
.work-video-stage:has(video[data-ux-loading]) { position: relative; }
.work-video-stage:has(video[data-ux-loading])::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #f4b223, transparent); background-size: 40% 100%; background-repeat: no-repeat;
  animation: ux-load 1.1s linear infinite;
}
@keyframes ux-load { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* Páginas legales: lectura cómoda */
.legal-main { font-size: clamp(1rem, .96rem + .2vw, 1.075rem); }
.legal-main p, .legal-main li { max-width: 72ch; line-height: 1.7; }
@media print { .ux-mobilebar, .site-header, .utility-bar, .cookie-consent, .scroll-progress { display: none !important; } }
/* 9F: nunca dos barras de contacto a la vez */ body:has(.mobile-actionbar) .ux-mobilebar { display: none !important; }