/* ---------- cabecera del sitio ----------
   OJO CON LA ESPECIFICIDAD. El reset del núcleo (`.opr *{padding:0 !important; margin:0 !important;
   max-width:none !important; ...}`) tiene especificidad (0,1,0), la misma que una clase
   suelta como `.opr-cb-barra`. Mientras las hojas se sirvan en orden —core y
   luego cabecera— gana la nuestra, pero basta con que LiteSpeed combine o
   reordene los CSS para que el reset se coma el ancho máximo, los paddings y
   los `display:none` del móvil. Por eso **todas** las reglas de aquí van
   prefijadas con `.opr-cabecera`: así son (0,2,x) y ganan siempre.
   ---------------------------------------------------------------------------- */

.opr-cabecera{
  position:sticky !important; top:0 !important; z-index:900 !important;
  background:transparent !important;
  border-bottom:1px solid transparent !important;
  transition:background-color .28s ease, border-color .28s ease, backdrop-filter .28s ease !important;
}

/* --- pegada: solo entonces hace falta fondo, porque el contenido pasa por debajo --- */
.opr-cabecera.es-pegada{
  background:rgba(255,255,255,.92) !important; border-bottom-color:var(--borde) !important;
  -webkit-backdrop-filter:saturate(1.6) blur(14px) !important; backdrop-filter:saturate(1.6) blur(14px) !important;
}

/* --- oscura: la sección que hay detrás es oscura, así que la cabecera se integra --- */
.opr-cabecera.es-oscura.es-pegada{
  background:rgba(18,23,28,.74) !important; border-bottom-color:rgba(255,255,255,.09) !important;
  -webkit-backdrop-filter:saturate(1.4) blur(14px) !important; backdrop-filter:saturate(1.4) blur(14px) !important;
}

/* --- sin scroll y dentro del flujo: la cabecera pinta su propio fondo ---
   Flotando sobre el hero (`es-fija`) puede ir transparente, porque lo que se ve
   por detrás es el propio hero. En el resto de páginas la cabecera ocupa su
   sitio en el flujo y por detrás no está la sección de debajo, sino el fondo de
   la página. Con una sección oscura debajo, el contenido se pone en blanco y la
   franja se quedaba blanca: la cabecera desaparecía. Es lo que pasaba en
   Físicas. Al pintarla de p950 —el mismo color que `es-noche`— empalma con la
   sección sin costura y el logo vuelve a leerse. */
.opr-cabecera.es-oscura:not(.es-fija):not(.es-pegada){
  background:var(--p950) !important; border-bottom-color:transparent !important;
}

/* --- en la portada flota sobre el hero --- */
.opr-cabecera.es-fija{position:fixed !important; left:0 !important; right:0 !important; top:0 !important}

/* la barra de administración de WordPress no debe taparla */
body.admin-bar .opr-cabecera{top:32px !important}
@media (max-width:782px){ body.admin-bar .opr-cabecera{top:46px !important} }
@media (max-width:600px){ body.admin-bar .opr-cabecera{top:0 !important} }

/* --- la barra --- */
.opr-cabecera .opr-cb-barra{
  display:flex !important; align-items:center !important; gap:16px !important;
  width:100% !important; max-width:1240px !important; margin-left:auto !important; margin-right:auto !important;
  padding:13px clamp(20px,3.4vw,44px) !important;
}

/* --- marca --- */
.opr-cabecera .opr-cb-marca{display:flex !important; align-items:center !important; gap:9px !important; flex:none !important; color:var(--tinta) !important}
.opr-cabecera .opr-cb-marca svg{height:29px !important; width:auto !important; aspect-ratio:0.7413 / 1 !important; display:block !important; flex:none !important}
.opr-cabecera .opr-cb-marca b{font-size:1.1875rem !important; font-weight:800 !important; letter-spacing:-.028em !important; line-height:1 !important; white-space:nowrap !important}
.opr-cabecera.es-oscura .opr-cb-marca{color:#fff !important}

/* --- menú --- */
.opr-cabecera .opr-cb-nav{display:flex !important; align-items:center !important; justify-content:center !important; gap:2px !important; flex:1 1 auto !important; min-width:0 !important}
.opr-cabecera .opr-cb-nav a{
  padding:8px 12px !important; border-radius:999px !important; font-size:.90625rem !important; font-weight:600 !important;
  letter-spacing:-.012em !important; color:var(--suave) !important; white-space:nowrap !important;
  transition:color .15s ease, background-color .15s ease !important;
}
.opr-cabecera .opr-cb-nav a:hover{color:var(--tinta) !important; background:var(--p100) !important}
.opr-cabecera.es-oscura .opr-cb-nav a{color:rgba(255,255,255,.76) !important}
.opr-cabecera.es-oscura .opr-cb-nav a:hover{color:#fff !important; background:rgba(255,255,255,.13) !important}

/* --- acciones --- */
.opr-cabecera .opr-cb-acciones{display:flex !important; align-items:center !important; gap:6px !important; flex:none !important; margin-left:auto !important}
.opr-cabecera .opr-cb-fuera,
.opr-cabecera .opr-cb-dentro{display:flex !important; align-items:center !important; gap:6px !important}
.opr-cabecera[data-sesion="fuera"]  .opr-cb-dentro{display:none !important}
.opr-cabecera[data-sesion="dentro"] .opr-cb-fuera{display:none !important}

.opr-cabecera .opr-cb-enlace{
  padding:8px 13px !important; border-radius:999px !important; font-size:.90625rem !important; font-weight:600 !important;
  letter-spacing:-.012em !important; color:var(--suave) !important; white-space:nowrap !important;
  transition:color .15s ease, background-color .15s ease !important;
}
.opr-cabecera .opr-cb-enlace:hover{color:var(--tinta) !important; background:var(--p100) !important}
.opr-cabecera.es-oscura .opr-cb-enlace{color:rgba(255,255,255,.76) !important}
.opr-cabecera.es-oscura .opr-cb-enlace:hover{color:#fff !important; background:rgba(255,255,255,.13) !important}

.opr-cabecera .opr-cb-progreso{
  display:inline-flex !important; align-items:center !important; gap:7px !important; padding:7px 14px 7px 11px !important;
  border-radius:999px !important; font-size:.90625rem !important; font-weight:600 !important; letter-spacing:-.012em !important;
  color:var(--tinta) !important; box-shadow:inset 0 0 0 1.5px var(--borde) !important; white-space:nowrap !important;
  transition:box-shadow .15s ease, background-color .15s ease, color .15s ease !important;
}
.opr-cabecera .opr-cb-progreso:hover{background:var(--p50) !important; box-shadow:inset 0 0 0 1.5px var(--borde2) !important}
.opr-cabecera .opr-cb-progreso svg{width:17px !important; height:17px !important; flex:none !important}
.opr-cabecera.es-oscura .opr-cb-progreso{color:#fff !important; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3) !important}
.opr-cabecera.es-oscura .opr-cb-progreso:hover{background:rgba(255,255,255,.13) !important}

.opr-cabecera .opr-cb-carrito{
  position:relative !important; display:grid !important; place-items:center !important; width:36px !important; height:36px !important;
  border-radius:999px !important; color:var(--suave) !important; flex:none !important;
  transition:color .15s ease, background-color .15s ease !important;
}
.opr-cabecera .opr-cb-carrito:hover{color:var(--tinta) !important; background:var(--p100) !important}
.opr-cabecera .opr-cb-carrito svg{width:19px !important; height:19px !important}
.opr-cabecera.es-oscura .opr-cb-carrito{color:rgba(255,255,255,.76) !important}
.opr-cabecera.es-oscura .opr-cb-carrito:hover{color:#fff !important; background:rgba(255,255,255,.13) !important}
.opr-cabecera .opr-cb-cuenta{
  position:absolute !important; top:2px !important; right:1px !important; min-width:16px !important; height:16px !important; padding:0 4px !important;
  border-radius:999px !important; background:var(--p950) !important; color:#fff !important; font-size:.625rem !important; font-weight:700 !important;
  display:grid !important; place-items:center !important; font-variant-numeric:tabular-nums !important;
}
.opr-cabecera.es-oscura .opr-cb-cuenta{background:#fff !important; color:var(--p950) !important}

.opr-cabecera .opr-cb-salir{
  padding:8px 12px !important; border-radius:999px !important; font-size:.875rem !important; font-weight:500 !important;
  color:var(--tenue) !important; white-space:nowrap !important; transition:color .15s ease !important;
}
.opr-cabecera .opr-cb-salir:hover{color:var(--tinta) !important}
.opr-cabecera.es-oscura .opr-cb-salir{color:rgba(255,255,255,.58) !important}
.opr-cabecera.es-oscura .opr-cb-salir:hover{color:#fff !important}

.opr-cabecera .opr-cb-alta{padding:10px 18px !important; font-size:.90625rem !important}
.opr-cabecera.es-oscura .opr-cb-alta{background:#fff !important; color:var(--p950) !important}
.opr-cabecera.es-oscura .opr-cb-alta:hover{background:var(--p100) !important}

/* --- hamburguesa --- */
/* OJO: `place-items` es de rejilla. En un flex solo sirve su mitad
   (`align-items`), y el eje principal se queda en `flex-start`: las dos barras
   se pegaban arriba y la X salía descentrada. Los dos ejes, explícitos. */
.opr-cabecera .opr-cb-hamb{
  display:none !important; width:40px !important; height:40px !important; border-radius:11px !important;
  align-items:center !important; justify-content:center !important;
  gap:5px !important; flex-direction:column !important; flex:none !important; box-shadow:inset 0 0 0 1.5px var(--borde) !important;
}
.opr-cabecera .opr-cb-hamb i{display:block !important; width:16px !important; height:1.8px !important; border-radius:2px !important; background:var(--tinta) !important;
  transition:transform .22s ease, opacity .18s ease !important}
.opr-cabecera .opr-cb-hamb[aria-expanded="true"] i:first-child{transform:translateY(3.4px) rotate(45deg) !important}
.opr-cabecera .opr-cb-hamb[aria-expanded="true"] i:last-child{transform:translateY(-3.4px) rotate(-45deg) !important}
.opr-cabecera.es-oscura .opr-cb-hamb{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32) !important}
.opr-cabecera.es-oscura .opr-cb-hamb i{background:#fff !important}

/* --- panel móvil --- */
.opr-cabecera .opr-cb-panel{
  border-top:1px solid var(--borde) !important; background:var(--superficie) !important;
  padding:10px clamp(20px,5vw,44px) 26px !important;
  max-height:calc(100svh - 66px) !important; overflow-y:auto !important;
}
.opr-cabecera.es-oscura .opr-cb-panel{background:var(--p950) !important; border-top-color:rgba(255,255,255,.12) !important}
.opr-cabecera .opr-cb-panel nav{display:flex !important; flex-direction:column !important}
.opr-cabecera .opr-cb-panel nav a{
  padding:15px 2px !important; font-size:1.0625rem !important; font-weight:600 !important; letter-spacing:-.014em !important;
  color:var(--tinta) !important; border-bottom:1px solid var(--borde) !important;
}
.opr-cabecera.es-oscura .opr-cb-panel nav a{color:#fff !important; border-bottom-color:rgba(255,255,255,.12) !important}
.opr-cabecera .opr-cb-panel-pie{display:flex !important; gap:9px !important; margin-top:20px !important}
.opr-cabecera .opr-cb-panel-pie .opr-btn{flex:1 !important; padding:14px 16px !important; font-size:.9375rem !important}
.opr-cabecera.es-oscura .opr-cb-panel-pie .opr-btn-1{background:#fff !important; color:var(--p950) !important}
.opr-cabecera.es-oscura .opr-cb-panel-pie .opr-btn-2{color:#fff !important; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32) !important}
.opr-cabecera .opr-cb-panel-salir{
  display:block !important; margin-top:16px !important; text-align:center !important; font-size:.875rem !important;
  font-weight:500 !important; color:var(--tenue) !important;
}
.opr-cabecera.es-oscura .opr-cb-panel-salir{color:rgba(255,255,255,.58) !important}
.opr-cabecera[data-sesion="fuera"]  .opr-cb-panel .opr-cb-dentro{display:none !important}
.opr-cabecera[data-sesion="dentro"] .opr-cb-panel .opr-cb-fuera{display:none !important}
/* con el panel abierto la cabecera siempre lleva fondo, o el menú no se lee */
.opr-cabecera.es-abierta{background:var(--superficie) !important; border-bottom-color:var(--borde) !important}
.opr-cabecera.es-abierta.es-oscura{background:var(--p950) !important; border-bottom-color:rgba(255,255,255,.12) !important}

/* --- se aprieta antes de que nada llegue a tocarse --- */
@media (max-width:1280px){
  .opr-cabecera .opr-cb-nav a{padding:8px 9px !important; font-size:.875rem !important}
  .opr-cabecera .opr-cb-progreso{padding:8px 11px !important}
  .opr-cabecera .opr-cb-progreso span{display:none !important}
}
@media (max-width:1080px){
  .opr-cabecera .opr-cb-nav a{padding:8px 7px !important; font-size:.84375rem !important}
  .opr-cabecera .opr-cb-enlace{padding:8px 10px !important; font-size:.875rem !important}
  .opr-cabecera .opr-cb-alta{padding:10px 14px !important; font-size:.875rem !important}
}

/* --- móvil y tablet: solo marca, carrito y hamburguesa --- */
@media (max-width:980px){
  .opr-cabecera .opr-cb-barra{gap:10px !important; padding:11px clamp(18px,4.5vw,32px) !important}
  .opr-cabecera .opr-cb-nav{display:none !important}
  .opr-cabecera .opr-cb-enlace{display:none !important}
  .opr-cabecera .opr-cb-alta{display:none !important}
  .opr-cabecera .opr-cb-progreso{display:none !important}
  .opr-cabecera .opr-cb-salir{display:none !important}
  .opr-cabecera .opr-cb-hamb{display:flex !important}
}