/* Acotado a .uv21 por Referencia/v21-build/scope-css.js a partir de header-morph.css (O4). No editar a mano. */
/* Header que se transforma · V21 · O4 · Contrato: la FILA del nav lleva data-uv-header="rest|float";
   hijos: [data-uv-logo] [data-uv-end] (nav, divisor, iconos, hamburguesa). Cargar DESPUÉS de v21.css. */
.uv21 [data-uv-header]{
  --uvh-g:12px;--uvh-float-w:1120px;--uvh-ease:cubic-bezier(.22,1,.36,1);--uvh-t:.35s;
  --uvh-ink:#fff;--uvh-bg:rgba(20,26,24,.62);--uvh-line:rgba(255,255,255,.15);--uvh-shadow:0 12px 40px rgba(0,0,0,.4);
  position:relative;isolation:isolate;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;
  width:calc(100% - 2*var(--uvh-g));max-width:1400px;min-height:64px;margin-inline:auto;
  padding-inline:clamp(16px,2.5vw,32px);border-radius:0;color:var(--uvh-ink);
}
.uv21 [data-uv-header]:has([data-uv-nav]:not(.dark-mode)){
  --uvh-ink:#17232b;--uvh-bg:rgba(255,255,255,.85);--uvh-line:rgba(0,0,0,.06);--uvh-shadow:0 12px 40px rgba(0,0,0,.08);
}
@media (min-width:768px){.uv21 [data-uv-header]{--uvh-g:16px;--uvh-float-y:-6px}}
/* capa de material: aparece por opacidad, nunca anima el blur */
.uv21 [data-uv-header]::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
  background:var(--uvh-bg);border:1px solid var(--uvh-line);box-shadow:var(--uvh-shadow);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
}
/* hijos: sin cápsula propia (misma especificidad que .glass-pill.* → manda el orden de carga) */
.uv21 [data-uv-header] [data-uv-logo],.uv21 [data-uv-header] [data-uv-nav],.uv21 [data-uv-header] [data-uv-menu-btn]{
  background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  padding:0;transition:none;color:var(--uvh-ink);
}
.uv21 [data-uv-header] [data-uv-logo]{min-height:44px;min-width:44px;display:inline-flex;align-items:center}
.uv21 [data-uv-header] [data-uv-logo] img{transform-origin:left center}
.uv21 [data-uv-header] [data-uv-menu-btn]{width:44px;height:44px;border-radius:50%}
.uv21 [data-uv-header] [data-uv-nav]{padding-inline:4px 0}

/* grupo derecho: menú + divisor + iconos + hamburguesa, un solo markup */
.uv21 [data-uv-header] [data-uv-end]{display:flex;align-items:center;padding-right:4px}
.uv21 [data-uv-header] [data-uv-divider]{display:none}
@media (min-width:768px){.uv21 [data-uv-header] [data-uv-divider]{display:block}}

/* <1024: menú escondido → logo centrado de verdad (1fr auto 1fr) */
@media (max-width:1023.98px){
  .uv21 [data-uv-header]{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .uv21 [data-uv-header] [data-uv-logo]{grid-column:2;grid-row:1;justify-self:center}
  .uv21 [data-uv-header] [data-uv-logo] img{transform-origin:center}
  .uv21 [data-uv-header] [data-uv-end]{grid-column:3;grid-row:1;justify-self:end;padding-right:0}
  .uv21 [data-uv-header] [data-uv-icons]{order:0}
  .uv21 [data-uv-header] [data-uv-divider]{order:1}
  .uv21 [data-uv-header] [data-uv-menu-btn]{order:2}
}
/* <768: iconos a la izquierda, hamburguesa a la derecha */
@media (max-width:767.98px){
  .uv21 [data-uv-header]{padding-inline:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right))}
  .uv21 [data-uv-header] [data-uv-end]{display:contents}
  .uv21 [data-uv-header] [data-uv-icons]{grid-column:1;grid-row:1;justify-self:start;gap:0}
  .uv21 [data-uv-header] [data-uv-menu-btn]{grid-column:3;grid-row:1;justify-self:end}
}
/* <360: el teléfono no cabe junto a los otros dos iconos a 44 px; queda en el menú desplegable */
@media (max-width:359.98px){.uv21 [data-uv-header] [data-uv-phone]{display:none}}

/* FLOAT: píldora centrada */
.uv21 [data-uv-header="float"]{max-width:var(--uvh-float-w);border-radius:999px;transform:translateY(var(--uvh-float-y,-4px))}
.uv21 [data-uv-header="float"]::before{opacity:1}
.uv21 [data-uv-header="float"] [data-uv-logo] img{transform:scale(.82)}

/* transición solo cuando ya pintó (evita animar la carga) */
.uv21 [data-uv-header][data-uv-ready]{transition:max-width var(--uvh-t) var(--uvh-ease),border-radius var(--uvh-t) var(--uvh-ease),transform var(--uvh-t) var(--uvh-ease)}
.uv21 [data-uv-header][data-uv-ready]::before{transition:opacity var(--uvh-t) var(--uvh-ease)}
.uv21 [data-uv-header][data-uv-ready] [data-uv-logo] img{transition:transform var(--uvh-t) var(--uvh-ease)}

@media (prefers-reduced-motion:reduce){
  .uv21 [data-uv-header][data-uv-ready],.uv21 [data-uv-header][data-uv-ready] [data-uv-logo] img{transition:none}
  .uv21 [data-uv-header][data-uv-ready]::before{transition:opacity .2s linear}
  .uv21 [data-uv-header="float"]{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .uv21 [data-uv-header]::before{-webkit-backdrop-filter:none;backdrop-filter:none;background:#17232b}
  .uv21 [data-uv-header]:has([data-uv-nav]:not(.dark-mode))::before{background:#fff}
}
@media (prefers-contrast:more){.uv21 [data-uv-header]::before{border:2px solid currentColor}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .uv21 [data-uv-header]::before{background:rgba(20,26,24,.92)}
  .uv21 [data-uv-header]:has([data-uv-nav]:not(.dark-mode))::before{background:rgba(255,255,255,.96)}
}

/* Área táctil del menú de escritorio ≥ 44 px sin cambiar el aspecto: el padding amplía el área de clic y el margen negativo lo compensa. */
.uv21 [data-uv-header] [data-uv-nav] a{padding-block:11.5px;margin-block:-11.5px}
