/* ---------- Entrevista · portada ----------

   LA PORTADA MIDE UNA PANTALLA, PERO LA PANTALLA NO EMPIEZA ARRIBA DEL TODO.
   `.opr-seccion.es-pantalla` del núcleo pone `min-height:100svh`, y eso vale
   cuando la sección es lo primero que hay —el hero de la home, que flota bajo
   una cabecera fija—. Aquí no: la cabecera de este sitio va en el flujo, así
   que ocupa sus 68 px por encima y la portada acaba **100 px por debajo del
   borde inferior** de la pantalla, con la barra de administración puesta.

   Es el tropiezo n.º 19 del documento 03 —«cualquier página nueva que no traiga
   la clase del hero hereda una banda encima»— y se compensa desde aquí, no
   tocando la cabecera. `guion.js` mide lo que hay por encima y lo escribe en
   `--opr-en-arriba`; el valor de reserva es 0, así que si el JavaScript no
   corre la portada se comporta como antes y no se rompe nada.
   --------------------------------------------------------------------- */

/* OJO CON LA ESPECIFICIDAD, QUE AQUÍ SE PIERDE SIN ENTERARSE.
   El núcleo trae la regla de `.opr-seccion.es-pantalla`, que pone
   `min-height:100svh` y `align-items:center`, y pesa (0,2,0). Una regla de esta
   sección escrita como `.opr-en-hero` sale anidada a `.opr-en.opr-en-hero`, que
   pesa lo mismo… y **el núcleo de `oporeal-bloques` se encola DESPUÉS**, porque
   viene con la cabecera y el pie. Así que ganaría él y esto no serviría de nada
   en el sitio, aunque en la vista previa —donde no hay otro plugin— funcionara.
   Es la trampa del primer apartado del documento 02.
   Con la clase de estado delante, `.opr-en.opr-en-hero.es-pantalla` pesa (0,3,0)
   y gana siempre. */
.opr-en.opr-en-hero.es-pantalla{
  --opr-en-arriba:0px;
  min-height:calc(100svh - var(--opr-en-arriba)) !important;
  /* El contenido va POR ENCIMA del centro, no centrado y no pegado arriba.
     Centrado, en una pantalla de 900 px quedaban 160 px muertos entre el borde
     y el rótulo, que es lo que pidió Sergio que se subiera. Pegándolo arriba
     del todo se arreglaba el rótulo y quedaban 250 px de negro por debajo de
     las cifras, que se ve peor.
     Se deja centrado —así el hueco nunca sale negativo en una pantalla baja— y
     se desequilibra el relleno: el de abajo pesa cuatro veces el de arriba, y
     como los dos van en `vh` la proporción aguanta en cualquier alto. El rótulo
     queda entre 40 px y 105 px del borde según la pantalla, en vez de 160. */
  padding-top:clamp(18px,4vh,48px) !important;
  padding-bottom:clamp(18px,16vh,190px) !important;
}
.opr-en .opr-en-h-rejilla{
  display:grid !important; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr) !important;
  gap:clamp(30px,4.4vw,64px) !important; align-items:center !important;
}
.opr-en .opr-en-h-texto .opr-h2{margin-top:2px !important}
.opr-en .opr-en-h-texto .opr-entradilla{color:var(--p300) !important}
.opr-en .opr-en-h-ctas{display:flex !important; flex-wrap:wrap !important; gap:12px !important; margin-top:28px !important}
.opr-en .opr-en-h-cifras{
  display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important; margin-top:36px !important; padding-top:26px !important;
  border-top:1px solid var(--p800) !important;
}
.opr-en .opr-en-h-cifras dt{
  font-size:clamp(1.6rem,3.2vw,2.15rem) !important; font-weight:800 !important;
  line-height:1 !important; letter-spacing:-.03em !important; color:#fff !important;
}
.opr-en .opr-en-h-cifras dd{margin-top:7px !important; font-size:.8125rem !important; line-height:1.4 !important; color:var(--p400) !important}


/* --- la regla de los cinco niveles --- */
.opr-en .opr-en-h-regla{
  background:var(--p900) !important; border-radius:var(--radio) !important;
  box-shadow:inset 0 0 0 1px var(--p800) !important;
  padding:clamp(22px,2.6vw,32px) !important;
}
.opr-en .opr-en-h-regla-tit{
  display:block !important; font-size:.9375rem !important; font-weight:600 !important; color:var(--p400) !important;
  margin-bottom:26px !important;
}
.opr-en .opr-en-h-barra{
  position:relative !important; height:3px !important; border-radius:999px !important; background:var(--p800) !important;
  margin:52px 6px 30px !important;
}
.opr-en .opr-en-h-marca{
  position:absolute !important; top:50% !important; left:var(--x) !important;
  width:9px !important; height:9px !important; margin:-4.5px 0 0 -4.5px !important;
  border-radius:999px !important; background:var(--p500) !important;
}
.opr-en .opr-en-h-marca.es-corte{width:13px !important; height:13px !important; margin:-6.5px 0 0 -6.5px !important; background:var(--av500) !important}
.opr-en .opr-en-h-corte{
  position:absolute !important; left:var(--x) !important; bottom:100% !important;
  transform:translateX(-50%) !important; text-align:center !important;
}

/* El rótulo va arriba y la rayita debajo, uniéndolo con la marca de la barra.
   Al revés —la rayita encima del rótulo— el rótulo queda pegado a la barra y la
   rayita se mete en el titular de la caja. Se vio a 390 px. */
.opr-en .opr-en-h-corte i{display:block !important; width:1.5px !important; height:13px !important; margin:5px auto 0 !important; background:var(--av500) !important}
.opr-en .opr-en-h-corte b{
  display:block !important; font-size:.75rem !important; font-weight:700 !important; color:var(--av500) !important;
  white-space:nowrap !important; letter-spacing:-.01em !important;
}
.opr-en .opr-en-h-niveles{
  display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:8px !important; list-style:none !important;
}
.opr-en .opr-en-h-niveles li{text-align:center !important}
.opr-en .opr-en-h-niveles b{
  display:block !important; font-size:1.0625rem !important; font-weight:800 !important; color:var(--p300) !important; letter-spacing:-.02em !important;
}
.opr-en .opr-en-h-niveles span{
  display:block !important; margin-top:5px !important; font-size:.6875rem !important; line-height:1.3 !important; color:var(--p500) !important;
  overflow-wrap:anywhere !important;
}
.opr-en .opr-en-h-niveles li.es-corte b{color:var(--av500) !important}
.opr-en .opr-en-h-niveles li.es-corte span{color:var(--p300) !important}
.opr-en .opr-en-h-fuente{margin-top:24px !important; padding-top:18px !important; border-top:1px solid var(--p800) !important; color:var(--p500) !important}


/* --- móvil: primero se cuenta qué es, después se enseña --- */

@media (max-width:1000px){
.opr-en .opr-en-h-rejilla{display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:0 !important}

  /* la caja de texto no genera caja propia: sus hijos se ordenan junto a la regla */
.opr-en .opr-en-h-texto{display:contents !important}
.opr-en.opr-en-hero .opr-rotulo{order:1 !important}
.opr-en.opr-en-hero .opr-h2{order:2 !important}
.opr-en.opr-en-hero .opr-entradilla{order:3 !important}
.opr-en .opr-en-h-regla{order:4 !important; margin-top:30px !important}
.opr-en .opr-en-h-ctas{order:5 !important; margin-top:28px !important}
.opr-en .opr-en-h-cifras{order:6 !important}
}
@media (max-width:560px){
.opr-en .opr-en-h-cifras{grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:22px 18px !important}
.opr-en .opr-en-h-niveles{grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:4px !important}
.opr-en .opr-en-h-niveles b{font-size:.9375rem !important}
.opr-en .opr-en-h-niveles span{font-size:.625rem !important}
.opr-en .opr-en-h-ctas .opr-btn{flex:1 1 100% !important}
}


/* ---------- cuando la pantalla es baja, cede el aire ----------
   Mismo criterio que la portada de «Próximamente»: el hueco se recorta por
   escalones antes que dejar que la portada se salga. Medido en la ventana real
   de Sergio, 1280x609 con la barra de administración, que son 509 px útiles. */

@media (max-height:840px){
.opr-en.opr-en-hero .opr-h2{font-size:clamp(1.7rem,3.4vw,2.35rem) !important}
.opr-en.opr-en-hero .opr-entradilla{margin-top:12px !important; font-size:1rem !important}
.opr-en .opr-en-h-ctas{margin-top:20px !important}
.opr-en .opr-en-h-cifras{margin-top:24px !important; padding-top:18px !important}
.opr-en .opr-en-h-regla{padding:clamp(18px,2.2vw,24px) !important}
.opr-en .opr-en-h-regla-tit{margin-bottom:18px !important}
.opr-en .opr-en-h-barra{margin:44px 6px 22px !important}
.opr-en .opr-en-h-fuente{margin-top:16px !important; padding-top:14px !important}
}
@media (max-height:720px){
.opr-en.opr-en-hero .opr-h2{font-size:clamp(1.55rem,3vw,2rem) !important}
.opr-en.opr-en-hero .opr-entradilla{margin-top:10px !important; font-size:.9375rem !important}
.opr-en .opr-en-h-ctas{margin-top:16px !important}
.opr-en .opr-en-h-ctas .opr-btn{padding:12px 20px !important; font-size:.9375rem !important}
.opr-en .opr-en-h-cifras{margin-top:18px !important; padding-top:14px !important; gap:12px !important}
.opr-en .opr-en-h-cifras dt{font-size:clamp(1.35rem,2.6vw,1.7rem) !important}
.opr-en .opr-en-h-cifras dd{margin-top:4px !important; font-size:.75rem !important}
.opr-en .opr-en-h-fuente{margin-top:12px !important; padding-top:11px !important}
}