/* ---------- 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(5,31,32,.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}

/* --- LOS BOTONES REDONDOS: PROGRESO, BATALLAS, PERFIL Y CONTACTO ---------
   27 de septiembre de 2026, v1.3.47: entra el cuarto, **el sobre de Contacto**,
   justo después del perfil y también sin sesión (entre «Acceder» y el carrito).
   Sergio: *«esta página es importante y no está muy accesible ya que aparece
   abajo del todo en el footer»*. Es el mismo botón que sus hermanos. El sobre y
   no el teléfono, porque no hay teléfono; y no el bocadillo, que se lee como
   «comentarios». El enlace del pie se queda.

   Sergio, el 24 de septiembre: *«mi progreso está dentro de una especie de
   círculo, quiero que las espadas también lo estén»*, *«en el móvil aparecen las
   espadas pero no el símbolo de mi progreso, también debe aparecer»* y *«mete
   también el emoticono de la figura de una persona, para que te lleve a mi
   perfil, en la cabecera tanto del móvil como del ordenador»*.

   Así que los tres son **el mismo botón**: un círculo de 36 px con el aro fino,
   y dentro su dibujo. Ni uno con rótulo y otro sin él, ni uno con aro y otro sin
   aro. El carrito se queda sin aro a propósito: no es un sitio al que ir, es el
   estado de la compra, y lleva su contador encima.

   **«Mi progreso» pierde su rótulo.** Lo tenía y solo salía por encima de
   1.280 px, o sea casi nunca; con tres botones al lado, la palabra suelta en uno
   de ellos era justo el «uno de cada» que ya se corrigió en el perfil.

   **Y los tres salen SIEMPRE**, también en el móvil. Antes «Mi progreso» se
   escondía por debajo de 1.040 y había que abrir la hamburguesa. */
.opr-cabecera .opr-cb-progreso,
.opr-cabecera .opr-cb-simulacro,
.opr-cabecera .opr-cb-batallas,
.opr-cabecera .opr-cb-perfil,
.opr-cabecera .opr-cb-contacto{
  display:grid !important; place-items:center !important; width:36px !important; height:36px !important;
  border-radius:999px !important; flex:none !important; color:var(--tinta) !important;
  box-shadow:inset 0 0 0 1.5px var(--borde) !important;
  transition:box-shadow .15s ease, background-color .15s ease, color .15s ease !important;
}
.opr-cabecera .opr-cb-progreso:hover,
.opr-cabecera .opr-cb-simulacro:hover,
.opr-cabecera .opr-cb-batallas:hover,
.opr-cabecera .opr-cb-perfil:hover,
.opr-cabecera .opr-cb-contacto:hover{background:var(--p50) !important; box-shadow:inset 0 0 0 1.5px var(--borde2) !important}
.opr-cabecera .opr-cb-progreso svg,
.opr-cabecera .opr-cb-simulacro svg,
.opr-cabecera .opr-cb-perfil svg,
.opr-cabecera .opr-cb-contacto svg{width:18px !important; height:18px !important; flex:none !important}
.opr-cabecera.es-oscura .opr-cb-progreso,
.opr-cabecera.es-oscura .opr-cb-simulacro,
.opr-cabecera.es-oscura .opr-cb-batallas,
.opr-cabecera.es-oscura .opr-cb-perfil,
.opr-cabecera.es-oscura .opr-cb-contacto{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,
.opr-cabecera.es-oscura .opr-cb-simulacro:hover,
.opr-cabecera.es-oscura .opr-cb-batallas:hover,
.opr-cabecera.es-oscura .opr-cb-perfil:hover,
.opr-cabecera.es-oscura .opr-cb-contacto: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}

/* --- EL DIBUJO DE LAS ESPADAS ------------------------------------------
   Lo pidió Sergio el 24 de septiembre de 2026: *«para llegar a las batallas es
   un poco complicado, hay que ir a mi perfil y a batallas. Podríamos poner un
   botón como el de mi progreso que sale junto al carrito, pero de batallas, dos
   espadas por ejemplo»*.

   **21 px y RELLENO**, no 18 y trazo como sus dos hermanos. Probadas nueve
   versiones a tamaño real: con trazo de 1,9 las dos espadas pierden punta,
   guarda y pomo y lo que queda es **una equis**, que al lado del carrito se lee
   como «cerrar». Rellenas y un par de píxeles más grandes se distinguen las
   hojas, las guardas y los pomos. */
.opr-cabecera .opr-cb-batallas svg{width:21px !important; height:21px !important; flex:none !important}

/* --- EL PUNTO ÁMBAR ------------------------------------------------------
   «Aquí tienes algo pendiente»: el simulacro del domingo abierto y sin hacer,
   resultados sin ver, batallas que te toca jugar o, en Mi progreso, un galón nuevo
   que todavía no has mirado (v1.3.57, 11 de octubre de 2026). Ámbar porque es un aviso
   —es lo que significa ese color en Pizarra—; no rojo, que es fallo. Lo
   enciende cabecera.js con `es-aviso` después de preguntar al servidor. El aro
   del color del fondo lo separa del dibujo. */
.opr-cabecera .opr-cb-progreso,
.opr-cabecera .opr-cb-simulacro,
.opr-cabecera .opr-cb-batallas,
.opr-cabecera .opr-cb-perfil,
.opr-cabecera .opr-cb-buzon{position:relative !important}
.opr-cabecera .opr-cb-progreso.es-aviso::after,
.opr-cabecera .opr-cb-simulacro.es-aviso::after,
.opr-cabecera .opr-cb-batallas.es-aviso::after,
.opr-cabecera .opr-cb-perfil.es-aviso::after,
.opr-cabecera .opr-cb-buzon.es-aviso::after{
  content:"" !important; position:absolute !important; top:-1px !important; right:-1px !important;
  width:10px !important; height:10px !important; border-radius:999px !important;
  background:var(--av500) !important; box-shadow:0 0 0 2px var(--superficie) !important;
}
.opr-cabecera.es-oscura .opr-cb-progreso.es-aviso::after,
.opr-cabecera.es-oscura .opr-cb-simulacro.es-aviso::after,
.opr-cabecera.es-oscura .opr-cb-batallas.es-aviso::after,
.opr-cabecera.es-oscura .opr-cb-perfil.es-aviso::after,
.opr-cabecera.es-oscura .opr-cb-buzon.es-aviso::after{box-shadow:0 0 0 2px 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}
}
@media (max-width:1180px){
  .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 ---
   ESTE NÚMERO SE MIDE CADA VEZ QUE ENTRA O SALE UNA ENTRADA DEL MENÚ. Fue 980
   con siete entradas y 1099 con ocho, cuando entró «Contacto» y los enlaces se
   montaban unos encima de otros. El 4 de septiembre salieron «Planes» y
   «Contacto» —los dos están en el pie— y con seis se volvió a medir con
   `arnes/corte.py`: 1022 px en el peor de los cuatro escenarios, que es con la
   sesión abierta y tema hostil, y lo que falla ahí no es un solape sino que se
   corta «Convocatorias».

   5 DE SEPTIEMBRE: ENTRA «ENTREVISTA» Y SALE «DICCIONARIO», Y EL NÚMERO NO
   CAMBIA. Como séptima entrada no cabía: con la sesión abierta el menú se queda
   con 595 px de los 715 que piden siete enlaces, así que se cortaban cinco de
   los siete **ya a 1440 px**. Medido, las tres salidas eran subir el corte a
   ~1140 —lo que mete la hamburguesa en portátiles de 1080 y deja «Mi progreso»
   en icono en todos los escritorios—, dejar «Entrevista» fuera del menú, o
   cambiarla por una. Decisión de Sergio: **sale «Diccionario», que ya está en el
   pie**, igual que «Planes» y «Contacto». Con esas seis, los cuatro escenarios
   aguantan hasta 1040 px otra vez y el corte se queda donde estaba.

   Y ojo con «entra y sale una»: no es lo mismo cuál. Quitando «Blog» en vez de
   «Diccionario» seguía sin caber con la sesión abierta, porque lo que pesa son
   las palabras largas —«Psicotécnicos», «Convocatorias», «Diccionario»—, no el
   número de enlaces.

   Y ese es el matiz que costó una pasada en falso: el menú es un flex que se
   comprime, así que NUNCA llega a solaparse. Midiendo solo el solape, la
   prueba decía que aguantaba hasta 704 px. Lo que hay que medir es el texto
   cortado y los enlaces partidos en dos líneas.

   Se pone en 1039 y no en 1023, que es el mínimo medido: 1024 px es un ancho
   de tablet de los de siempre y no puede quedar decidido por dos píxeles de
   margen. */
@media (max-width:1039px){
  .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-salir{display:none !important}
  .opr-cabecera .opr-cb-hamb{display:flex !important}

  /* LOS TRES REDONDOS SE QUEDAN, y bajan a 34 px. Medida la barra: con marca,
     los tres, el carrito y la hamburguesa hacen falta 194 px de acciones y a
     360 px de pantalla hay 207. A 36 px no cabrían. */
  .opr-cabecera .opr-cb-progreso,
  .opr-cabecera .opr-cb-simulacro,
  .opr-cabecera .opr-cb-batallas,
  .opr-cabecera .opr-cb-perfil,
  .opr-cabecera .opr-cb-contacto{width:34px !important; height:34px !important}
  .opr-cabecera .opr-cb-carrito{width:34px !important; height:34px !important}
  .opr-cabecera .opr-cb-acciones{gap:5px !important}
}

/* --- EN LOS MÓVILES ESTRECHOS, LA MARCA SE QUEDA EN EL ESCUDO -----------
   Con cinco botones a la derecha, «BravoZulu» escrito pide 65 px que a 320 y a
   360 no están. El escudo solo se reconoce igual y es lo único que se puede
   soltar sin quitarle a nadie un sitio al que ir. Por encima de 409 vuelve la
   palabra.

   27 DE SEPTIEMBRE, v1.3.47: ENTRA EL SOBRE DE CONTACTO Y EL CORTE SUBE DE 380 A
   409. Con la sesión abierta las acciones pasan de 199 a 239 px y, con la
   palabra puesta, la barra pide 392 px de ancho. A 390 —el iPhone de siempre—
   el sobre se comía el margen derecho. Medido en marcos de 320 a 1440 con la
   sesión abierta y cerrada: a 409 la palabra se va, a 412 (Android) cabe y
   sobra aire. */
@media (max-width:409px){
  .opr-cabecera .opr-cb-marca b{display:none !important}
}

/* ---------- el hueco que deja el tema por arriba ----------
   Astra separa el contenido de la página 60 px de la cabecera y otros 60 del
   pie. Con secciones que van a sangre y pintan su propio fondo, esos 60 px son
   una franja de página en blanco entre la cabecera y la portada: es lo que se
   veía en Contacto y en Mi progreso, casi 200 px de nada antes del rótulo.

   La regla se limita sola: solo entra cuando el contenido de la entrada es una
   sección nuestra —`.opr` colgando directamente de `.entry-content`—, así que
   una página normal de WordPress conserva su aire. `:has()` toma la
   especificidad de su argumento, de modo que esto pesa más que cualquier regla
   del tema y no hace falta `!important`. */
#primary.content-area:has(> .site-main > article > .entry-content > .opr){
  margin-top:0 !important; margin-bottom:0 !important;
}

/* ---------- barra de carga al cambiar de página ----------
   Va en <body>, fuera de `.opr`: el reset del núcleo no la toca. Color de la
   paleta Pizarra: tinta sobre fondo claro, p300 cuando la cabecera está oscura.
   Sin animación para quien pide menos movimiento: sale entera y quieta. */
html body #opr-cargando{
  position:fixed !important; top:0 !important; left:0 !important; z-index:100000 !important;
  height:3px !important; width:0; max-width:100% !important; margin:0 !important; padding:0 !important;
  background:#051F20 !important; opacity:0; pointer-events:none !important;
  transition:width 1.6s cubic-bezier(.2,.7,.3,1), opacity .2s linear;
}
html body #opr-cargando.es-clara{ background:#B1D1B9 !important; }
html body #opr-cargando.es-visible{ opacity:1; }
/* el primer paso se pinta sin transición: así el primer fotograma ya es un trazo */
html body #opr-cargando.sin-animar{ transition:none !important; }
html body.admin-bar #opr-cargando{ top:32px !important; }
/* Por debajo de 783 px la barra de WordPress es `position:absolute` y se va con
   el desplazamiento, así que NO hay que descontarla: la de carga va pegada al
   borde. Con los 46 px de antes se quedaba flotando sobre la cabecera. */
@media screen and (max-width:782px){ html body.admin-bar #opr-cargando{ top:0 !important; } }
@media (prefers-reduced-motion:reduce){
  html body #opr-cargando{ transition:none !important; }
  html body #opr-cargando.es-visible{ width:100% !important; }
}


/* --- A 320, CON SESIÓN, EL SOBRE SE VA ----------------------------------
   Con el botón del simulacro son cinco redondos, el carrito y la hamburguesa:
   a 360 caben justos y a 320 se salían 8 px. «Contacto» es el único que tiene
   otro camino a la vista —el pie de todas las páginas—, así que es el que cede.
   Solo por debajo de 360 y solo con la sesión abierta. */
@media (max-width:359px){
  .opr-cabecera .opr-cb-dentro .opr-cb-contacto{display:none !important}
}

/* v1.3.81 · ENTRAN «PLANES» Y «CONTACTO» (Sergio, 28 de octubre) Y SALE EL
   CARRITO. Con la sesión abierta, en el ordenador, los iconos se van al menú
   lateral y caben las ocho hasta 1040. Sin sesión siguen «Acceder» y «Crear
   cuenta», y medido con `tnav.py` las ocho solo caben desde 1240: por debajo
   de 1240 se va «Blog» y por debajo de 1100 también «Contacto». Los dos están
   en el pie. «Planes» se queda siempre: es lo que vende. */
/* v1.3.86 · «BLOG» SE QUEDA SIEMPRE (Sergio, 28 de octubre: «sin sesión no me
   parece bien que se oculte blog ya que es algo gratuito»). Por debajo de 1240
   cede solo «Contacto», que está en el pie, y los enlaces se aprietan. */
@media (max-width:1239px){ .opr-cabecera[data-sesion="fuera"] .opr-cb-nav .opr-cb-n-contacto{display:none !important} }
@media (max-width:1099px){
  .opr-cabecera[data-sesion="fuera"] .opr-cb-nav{gap:0 !important}
  .opr-cabecera[data-sesion="fuera"] .opr-cb-nav a{padding:8px 6px !important; font-size:.8125rem !important}
  .opr-cabecera[data-sesion="fuera"] .opr-cb-enlace{padding:8px 8px !important}
  .opr-cabecera[data-sesion="fuera"] .opr-cb-alta{padding:10px 12px !important}
}

/* v1.3.87–1.3.88 · EL AVATAR DE CADA USUARIO EN LA CABECERA (Sergio, 28 de
   octubre). Con relieve, como los botones (brillo arriba y sombra corta), y
   con el aro del metal de la carta que lleva puesta, igual que en su perfil
   (los tres tonos de `cn-pagina/estilo.css` de la comunidad). Sin carta, un
   aro claro. El punto ámbar sigue encima. */
.opr-cabecera .opr-cb-perfil.es-con-av{
  --c0:#FFFFFF; --c1:#CDE7D3; --c2:#8EB69B;
  background:linear-gradient(135deg,var(--c0) 0%,var(--c1) 22%,var(--c2) 46%,var(--c0) 60%,var(--c1) 78%,var(--c2) 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(5,31,32,.22), 0 5px 12px -6px rgba(5,31,32,.5) !important;
  transition:transform .15s ease, box-shadow .15s ease !important;
}
.opr-cabecera .opr-cb-perfil.es-con-av:hover{transform:translateY(-1px) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 2px 4px rgba(5,31,32,.22), 0 8px 16px -6px rgba(5,31,32,.5) !important}
.opr-cabecera .opr-cb-perfil.es-aro{--c0:#F3C9A2; --c1:#A8602F; --c2:#542810}
.opr-cabecera .opr-cb-perfil.es-aro.es-rara{--c0:#FFEDB0; --c1:#C99A1E; --c2:#5E4506}
.opr-cabecera .opr-cb-perfil.es-aro.es-epica{--c0:#A8EBC8; --c1:#1F8D58; --c2:#0B4529}
.opr-cabecera .opr-cb-perfil.es-aro.es-legendaria{--c0:#B4F7F7; --c1:#14B2C0; --c2:#07525B}
.opr-cabecera .opr-cb-perfil.es-aro.es-especial{--c0:#E4D6FF; --c1:#7B58C4; --c2:#331E66}
.opr-cabecera .opr-cb-perfil.es-aro.es-oficial{background:conic-gradient(from 210deg,#F3C9A2,#A8602F,#FFEDB0,#C99A1E,#A8EBC8,#1F8D58,#B4F7F7,#14B2C0,#E4D6FF,#7B58C4,#F3C9A2) !important}
.opr-cabecera .opr-cb-perfil .opr-cb-av{position:absolute !important; inset:2.5px !important; width:calc(100% - 5px) !important; height:calc(100% - 5px) !important; max-width:none !important; border-radius:999px !important; object-fit:cover !important; object-position:50% 20% !important; display:block !important; box-shadow:0 0 0 1px rgba(5,31,32,.15) !important}
.opr-cabecera .opr-cb-perfil.es-aviso::after{z-index:2 !important}

/* ---------- RELIEVE EN EL ORDENADOR (v1.3.96) ----------
   Sergio, 28 oct: «ese estilo también lo quiero en la versión PC». Es el
   mismo de la cabecera de la app (barra.css, v1.3.95), a partir de 1.040 px,
   en el navegador y en la app:
   - la cabecera lleva fondo con brillo arriba y sombra debajo en vez de la raya;
   - los botones redondos (progreso, simulacro, batallas, perfil y buzón),
     relieve de botón, a 38 px; el avatar, con su aro y la misma sombra;
   - «Crear cuenta» no se toca: ya lleva el relieve de los botones de bravozulu-ui;
   - el escudo, una sombra corta.
   EXCEPCIÓN: en la portada, mientras flota sobre el hero sin desplazar
   (`es-fija` sin `es-pegada`), la cabecera sigue transparente: el hero no se
   toca. En cuanto se desplaza, coge el fondo con relieve. Los botones y el
   escudo llevan relieve siempre.
   El carrito sigue sin aro, a propósito (ver arriba). */
@media (min-width:1040px){
  .opr-cabecera:not(.es-oscura):not(.es-fija),
  .opr-cabecera.es-pegada:not(.es-oscura){
    background:linear-gradient(180deg,#FFFFFF,rgba(244,246,249,.96)) !important; border-bottom-color:transparent !important;
    box-shadow:inset 0 -1px 0 rgba(5,31,32,.06), 0 10px 24px -14px rgba(5,31,32,.4), 0 1px 3px rgba(5,31,32,.07) !important;
    -webkit-backdrop-filter:saturate(1.6) blur(14px) !important; backdrop-filter:saturate(1.6) blur(14px) !important}
  .opr-cabecera.es-oscura:not(.es-fija),
  .opr-cabecera.es-oscura.es-pegada{
    background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 60%), rgba(5,31,32,.94) !important; border-bottom-color:transparent !important;
    box-shadow:inset 0 -1px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px -14px rgba(0,0,0,.7) !important}

  /* el escudo */
  .opr-cabecera .opr-cb-marca svg{filter:drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 2px 3px rgba(5,31,32,.28)) !important}
  .opr-cabecera.es-oscura .opr-cb-marca svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)) !important}

  /* los botones redondos */
  .opr-cabecera .opr-cb-acciones{gap:8px !important}
  .opr-cabecera:not(.es-oscura) .opr-cb-progreso,
  .opr-cabecera:not(.es-oscura) .opr-cb-simulacro,
  .opr-cabecera:not(.es-oscura) .opr-cb-batallas,
  .opr-cabecera:not(.es-oscura) .opr-cb-perfil:not(.es-con-av),
  .opr-cabecera:not(.es-oscura) .opr-cb-contacto{width:38px !important; height:38px !important;
    background:linear-gradient(180deg,#FFFFFF,#E6EBF0) !important; color:#051F20 !important;
    box-shadow:inset 0 1px 0 #fff, inset 0 -1px 2px rgba(5,31,32,.1), 0 0 0 1px rgba(5,31,32,.08), 0 6px 14px -6px rgba(5,31,32,.45) !important;
    transition:transform .15s ease, box-shadow .15s ease !important}
  .opr-cabecera.es-oscura .opr-cb-progreso,
  .opr-cabecera.es-oscura .opr-cb-simulacro,
  .opr-cabecera.es-oscura .opr-cb-batallas,
  .opr-cabecera.es-oscura .opr-cb-perfil:not(.es-con-av),
  .opr-cabecera.es-oscura .opr-cb-contacto{width:38px !important; height:38px !important;
    background:linear-gradient(180deg,#36404B,#1B2128) !important; color:#fff !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06), 0 6px 14px -6px rgba(0,0,0,.7) !important;
    transition:transform .15s ease, box-shadow .15s ease !important}
  .opr-cabecera:not(.es-oscura) .opr-cb-progreso:hover,
  .opr-cabecera:not(.es-oscura) .opr-cb-simulacro:hover,
  .opr-cabecera:not(.es-oscura) .opr-cb-batallas:hover,
  .opr-cabecera:not(.es-oscura) .opr-cb-perfil:not(.es-con-av):hover,
  .opr-cabecera:not(.es-oscura) .opr-cb-contacto:hover{transform:translateY(-1px) !important;
    background:linear-gradient(180deg,#FFFFFF,#E6EBF0) !important;
    box-shadow:inset 0 1px 0 #fff, inset 0 -1px 2px rgba(5,31,32,.1), 0 0 0 1px rgba(5,31,32,.12), 0 9px 18px -7px rgba(5,31,32,.5) !important}
  .opr-cabecera.es-oscura .opr-cb-progreso:hover,
  .opr-cabecera.es-oscura .opr-cb-simulacro:hover,
  .opr-cabecera.es-oscura .opr-cb-batallas:hover,
  .opr-cabecera.es-oscura .opr-cb-perfil:not(.es-con-av):hover,
  .opr-cabecera.es-oscura .opr-cb-contacto:hover{transform:translateY(-1px) !important;
    background:linear-gradient(180deg,#3E4955,#1F262E) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08), 0 9px 18px -7px rgba(0,0,0,.75) !important}

  /* el avatar, con su aro */
  .opr-cabecera .opr-cb-perfil.es-con-av{width:38px !important; height:38px !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 1px rgba(5,31,32,.08), 0 6px 14px -6px rgba(5,31,32,.5) !important}
  .opr-cabecera.es-oscura .opr-cb-perfil.es-con-av{box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 6px 14px -6px rgba(0,0,0,.75) !important}

}

/* --- «Crear cuenta», del mismo tamaño en todas las páginas (v1.3.96) ---
   En /podcast/ salía a 18 px y 46 de alto: el core.css de bravozulu-temas
   (`.opr .opr-btn`, 0,2,0) se carga después y pisaba `.opr-cabecera .opr-cb-alta`.
   Con `.opr.opr-cabecera` (0,3,0) gana siempre. */
.opr.opr-cabecera .opr-cb-alta{padding:10px 18px !important; font-size:.90625rem !important}
@media (max-width:1180px){ .opr.opr-cabecera .opr-cb-alta{padding:10px 14px !important; font-size:.875rem !important} }
@media (max-width:1099px){ .opr.opr-cabecera[data-sesion="fuera"] .opr-cb-alta{padding:10px 12px !important} }