/* ---------- portada de próximamente ---------- */
/* --- el color de cuerpo ---
   Documento 01, punto 2.4: el color de cuerpo vive solo en el hero, tiñe el
   ambiente y nunca el botón. Esta portada es el hero de esta página, así que
   se comporta igual que el de la home: al elegir cuerpo cambian el fondo y el
   halo, y el botón primario sigue siendo blanco Pizarra en los tres estados.

   Los selectores llevan la clase de la sección DELANTE de la de estado
   (`.opr-seccion.es-noche` mide (0,2,0) y empataría) para no depender de en qué
   orden sirva LiteSpeed las hojas. Trampa nº 15. */
.opr-px-portada{position:relative !important; overflow:hidden !important;
  --amb-fondo:var(--p950); --amb-halo:rgba(71,83,98,.42); --amb-palabra:#1A2129;
  transition:background .55s cubic-bezier(.32,.72,.16,1) !important;
}
.opr-seccion.opr-px-portada[data-cuerpo="ertzaintza"]{
  --amb-fondo:#1E0A0C; --amb-halo:rgba(107,30,25,.62); --amb-palabra:#2A1214;
}
.opr-seccion.opr-px-portada[data-cuerpo="local"]{
  --amb-fondo:#1C1503; --amb-halo:rgba(119,96,13,.5); --amb-palabra:#281F06;
}
.opr-seccion.opr-px-portada{background:var(--amb-fondo) !important}

/* la palabra de fondo: se dimensiona con clamp, no desde JavaScript.
   El hero de la home la escala con estilos en línea y por eso no se blinda;
   aquí no hace falta, así que esta sección sí puede ir blindada. */
.opr-px-po-palabra{
  position:absolute !important; left:50% !important; top:50% !important; transform:translate(-50%,-50%) !important;
  font-size:clamp(3.4rem,21vw,17rem) !important; font-weight:800 !important; letter-spacing:-.055em !important;
  line-height:.8 !important; color:var(--amb-palabra) !important; white-space:nowrap !important; pointer-events:none !important;
  user-select:none !important; z-index:0 !important; transition:color .55s cubic-bezier(.32,.72,.16,1) !important;
}
.opr-px-po-halo{
  position:absolute !important; left:50% !important; top:38% !important; transform:translate(-50%,-50%) !important;
  width:min(1100px,120vw) !important; height:min(700px,90vh) !important; pointer-events:none !important; z-index:0 !important;
  background:radial-gradient(ellipse at center, var(--amb-halo) 0%, rgba(18,23,28,0) 68%) !important;
  transition:background .55s cubic-bezier(.32,.72,.16,1) !important;
}

/* Los agentes no tapan nunca ni texto ni controles (documento 01, punto 7).
   Con el alto de antes, las manos llegaban a las cajas de la cuenta atrás en
   1440: van más pequeños y asomando por fuera del lienzo. */
.opr-px-po-agente{
  position:absolute !important; top:52% !important; height:min(430px,50vh) !important; width:auto !important; z-index:1 !important;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.5)) !important; pointer-events:none !important;
}
.opr-px-po-agente.es-izq{left:clamp(-80px,-2.6vw,-16px) !important; transform:translateY(-50%) !important}
.opr-px-po-agente.es-der{right:clamp(-80px,-2.6vw,-16px) !important; transform:translateY(-50%) !important}
/* con `img` delante: si no, pierde contra `.opr img{display:block !important}` del núcleo,
   que mide (0,1,1). Trampa nº 3 del manual. */
@media (max-width:1279px){ img.opr-px-po-agente{display:none !important} }

.opr-px-po-caja{position:relative !important; z-index:2 !important; text-align:center !important;
  display:flex !important; flex-direction:column !important; align-items:center !important; max-width:820px !important}
.opr-px-po-caja .opr-h1{color:#fff !important}
.opr-px-po-sub{margin-left:auto !important; margin-right:auto !important; max-width:56ch !important}

/* --- el reloj --- */
.opr-px-reloj{display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:clamp(8px,1.3vw,14px) !important; width:100% !important; max-width:560px !important; margin-top:clamp(28px,3.4vw,40px) !important}
.opr-px-reloj-caja{
  padding:16px 6px 13px !important; border-radius:var(--radio) !important; background:rgba(255,255,255,.045) !important;
  box-shadow:inset 0 0 0 1px var(--p800) !important;
  display:flex !important; flex-direction:column !important; align-items:center !important; gap:4px !important;
}
.opr-px-reloj-caja b{
  font-size:clamp(1.9rem,5.2vw,2.9rem) !important; font-weight:800 !important; line-height:1 !important;
  letter-spacing:-.04em !important; color:#fff !important; font-variant-numeric:tabular-nums !important;
}
.opr-px-reloj-caja span{font-size:.78125rem !important; font-weight:600 !important; color:var(--p400) !important}
.opr-px-reloj-ya{margin-top:26px !important; font-size:1.25rem !important; font-weight:800 !important; letter-spacing:-.024em !important; color:#fff !important}

/* --- avísame --- */
.opr-px-po-avisame{width:100% !important; max-width:620px !important; margin-top:clamp(28px,3.4vw,38px) !important}

.opr-px-cuerpo{display:flex !important; flex-direction:column !important; align-items:center !important; gap:10px !important; margin-bottom:18px !important}
.opr-px-cuerpo-etq{font-size:.84375rem !important; font-weight:600 !important; color:var(--p400) !important}
.opr-px-cuerpo-seg{max-width:100% !important; flex-wrap:wrap !important; justify-content:center !important}

.opr-px-po-nota{margin-top:12px !important; text-align:center !important}

@media (max-width:560px){
  /* en móvil no hay modo pantalla, pero que la nota final entre sin deslizar
     casi nada sigue siendo mejor */
  .opr-px-reloj{margin-top:22px !important}
  .opr-px-po-avisame{margin-top:22px !important}
  .opr-px-reloj{grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:6px !important}
  .opr-px-reloj-caja{padding:12px 3px 10px !important; border-radius:var(--radio-s) !important}
  .opr-px-reloj-caja span{font-size:.6875rem !important}
  .opr-px-cuerpo-seg button{padding:8px 12px !important; font-size:.875rem !important}
}

/* --- que quepa en pantallas bajas ---
   La ventana de Sergio deja unos 609 px útiles (portátil más la barra de
   administración). Una portada que hay que deslizar para ver el formulario no
   sirve de nada: lo que se recorta es el aire, por escalones, y solo cuando la
   sección está en modo pantalla, es decir por encima de 920 px de ancho.
   La lección del 26 de agosto con el lector de temas: una maquetación que
   reparte el alto se mide en la pantalla más baja que vaya a tener delante. */
@media (min-width:921px) and (max-height:840px){
  .opr-seccion.es-pantalla.opr-px-portada{padding-top:28px !important; padding-bottom:28px !important}
  .opr-px-po-caja .opr-h1{font-size:clamp(2rem,4.4vw,3rem) !important}
  .opr-px-po-sub{margin-top:12px !important; font-size:1rem !important}
  .opr-px-reloj{margin-top:24px !important}
  .opr-px-reloj-caja{padding:13px 6px 11px !important}
  .opr-px-reloj-caja b{font-size:clamp(1.7rem,4.4vw,2.4rem) !important}
  .opr-px-po-avisame{margin-top:24px !important}
  .opr-px-cuerpo{margin-bottom:14px !important}
}

@media (min-width:921px) and (max-height:720px){
  .opr-seccion.es-pantalla.opr-px-portada{padding-top:18px !important; padding-bottom:18px !important}
  .opr-px-po-caja .opr-h1{font-size:clamp(1.75rem,3.7vw,2.4rem) !important}
  .opr-px-po-sub{margin-top:10px !important; font-size:.9375rem !important}
  .opr-px-reloj{margin-top:18px !important; max-width:500px !important}
  .opr-px-reloj-caja{padding:10px 5px 9px !important; gap:2px !important}
  .opr-px-reloj-caja b{font-size:clamp(1.5rem,3.6vw,2rem) !important}
  .opr-px-reloj-caja span{font-size:.71875rem !important}
  .opr-px-po-avisame{margin-top:18px !important}
  .opr-px-cuerpo{gap:7px !important; margin-bottom:12px !important}
  .opr-px-cuerpo-etq{font-size:.8125rem !important}
  .opr-px-cuerpo-seg button{padding:8px 15px !important; font-size:.90625rem !important}
  .opr-px-po-nota{margin-top:9px !important}
  .opr-px-po-agente{height:min(360px,52vh) !important}
}