/* ---------- Entrevista · cierre, barra flotante y formulario ---------- */
.opr-en.opr-en-cierre{position:relative !important; overflow:hidden !important}
.opr-en.opr-en-cierre::before{
  content:'' !important; position:absolute !important; left:50% !important; top:-44% !important; width:min(940px,120%) !important; aspect-ratio:1 !important;
  transform:translateX(-50%) !important; pointer-events:none !important; opacity:.16 !important;
  background:radial-gradient(circle at center, var(--p500), transparent 60%) !important;
}
.opr-en .opr-en-f-cabeza{
  position:relative !important; display:flex !important; flex-direction:column !important; align-items:center !important;
  text-align:center !important; max-width:720px !important; margin:0 auto !important;
}
.opr-en .opr-en-f-cabeza .opr-entradilla{margin-left:auto !important; margin-right:auto !important; text-align:center !important}
.opr-en .opr-en-f-ctas{display:flex !important; flex-wrap:wrap !important; gap:11px !important; justify-content:center !important; margin-top:28px !important}
.opr-en .opr-en-f-ctas .opr-btn{padding:14px 23px !important; font-size:.9375rem !important}


/* --- las otras dos pruebas --- */
.opr-en .opr-en-f-otras{
  position:relative !important; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important; margin-top:clamp(34px,4vw,52px) !important;
}
.opr-en .opr-en-f-otra{
  display:flex !important; flex-direction:column !important; padding:20px 20px 22px !important; min-width:0 !important;
  border-radius:var(--radio) !important; background:var(--superficie) !important;
  box-shadow:inset 0 0 0 1px var(--borde) !important;
  transition:box-shadow .18s ease, transform .18s ease !important;
}
.opr-en .opr-en-f-otra:hover{box-shadow:inset 0 0 0 1px var(--borde2), var(--sombra-s) !important; transform:translateY(-2px) !important}
.opr-en .opr-en-f-otra b{font-size:.96875rem !important; font-weight:700 !important; letter-spacing:-.016em !important}
.opr-en .opr-en-f-otra span{margin-top:5px !important; font-size:.84375rem !important; line-height:1.45 !important; color:var(--tenue) !important; text-wrap:pretty !important; overflow-wrap:anywhere !important}
.opr-en .opr-en-f-firma{
  position:relative !important; text-align:center !important; margin-top:clamp(30px,3.4vw,44px) !important;
  padding:20px clamp(20px,2.6vw,30px) !important; border-radius:var(--radio) !important; background:var(--p950) !important;
  font-size:.8125rem !important; font-weight:500 !important; color:var(--p400) !important; text-wrap:pretty !important;
}


/* --- capa flotante: barra móvil y formulario ---
   Va FUERA de .opr-seccion a propósito: las secciones llevan overflow-x:clip y
   eso recorta a los descendientes position:fixed. Por eso el shortcode de
   cierre emite dos raíces. */
.opr-en.opr-en-flotante{
  position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; z-index:1200 !important;
  background:transparent !important; pointer-events:none !important;
}
.opr-en .opr-en-f-barra{
  display:none !important; align-items:center !important; gap:12px !important; pointer-events:auto !important;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
  background:rgba(255,255,255,.94) !important;
  -webkit-backdrop-filter:saturate(1.6) blur(12px) !important; backdrop-filter:saturate(1.6) blur(12px) !important;
  box-shadow:0 -1px 0 var(--borde), 0 -16px 32px -26px rgba(18,23,28,.5) !important;
  transform:translateY(110%) !important; transition:transform .3s cubic-bezier(.32,.72,.16,1) !important;
}
.opr-en .opr-en-f-barra.es-visible{transform:none !important}
.opr-en .opr-en-f-barra-txt{display:flex !important; flex-direction:column !important; gap:1px !important; min-width:0 !important; flex:1 !important}
.opr-en .opr-en-f-barra-txt b{font-size:.875rem !important; font-weight:700 !important; letter-spacing:-.014em !important}
.opr-en .opr-en-f-barra-txt i{font-size:.71875rem !important; color:var(--tenue) !important}
.opr-en .opr-en-f-barra .opr-btn{flex:none !important; padding:12px 20px !important; font-size:.875rem !important}
@media (max-width:860px){
.opr-en .opr-en-f-barra{display:flex !important}
}


/* --- el formulario, en ventana --- */
.opr-en .opr-en-f-modal{
  position:fixed !important; inset:0 !important; z-index:5 !important; pointer-events:auto !important;
  display:flex !important; align-items:center !important; justify-content:center !important; padding:18px !important;
  background:rgba(18,23,28,.62) !important; overflow-y:auto !important;
}
.opr-en .opr-en-f-caja{
  position:relative !important; width:100% !important; max-width:560px !important; max-height:calc(100svh - 36px) !important; overflow-y:auto !important;
  padding:clamp(24px,3vw,34px) !important; border-radius:var(--radio) !important; background:var(--superficie) !important;
  box-shadow:0 40px 80px -30px rgba(18,23,28,.6) !important;
  transform:translateY(10px) scale(.985) !important; opacity:0 !important;
  transition:transform .3s cubic-bezier(.32,.72,.16,1), opacity .24s ease !important;
}
.opr-en .opr-en-f-modal.es-abierto .opr-en-f-caja{transform:none !important; opacity:1 !important}
.opr-en .opr-en-f-cerrar{
  position:absolute !important; top:12px !important; right:12px !important; width:34px !important; height:34px !important; border-radius:999px !important;
  display:grid !important; place-items:center !important; color:var(--tenue) !important; transition:background .16s, color .16s !important;
}
.opr-en .opr-en-f-cerrar:hover{background:var(--p100) !important; color:var(--tinta) !important}
.opr-en .opr-en-f-cerrar svg{width:16px !important; height:16px !important}
.opr-en .opr-en-f-kick{display:block !important; font-size:.75rem !important; font-weight:700 !important; color:var(--tenue) !important; margin-bottom:5px !important}
.opr-en .opr-en-f-ayuda{margin-top:8px !important; margin-bottom:18px !important; font-size:.90625rem !important; color:var(--suave) !important; max-width:46ch !important}
.opr-en .opr-en-f-que{margin-bottom:16px !important}
.opr-en .opr-en-f-seg{display:flex !important; flex-wrap:wrap !important; margin-top:7px !important; max-width:100% !important}
.opr-en .opr-en-f-seg button{padding:9px 15px !important; font-size:.875rem !important}
.opr-en .opr-en-f-fila{display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important}
.opr-en .opr-en-f-campo{display:flex !important; flex-direction:column !important; gap:5px !important; margin-bottom:11px !important; min-width:0 !important}
.opr-en .opr-en-f-campo > span{font-size:.8125rem !important; font-weight:600 !important; color:var(--suave) !important}
.opr-en .opr-en-f-campo input, .opr-en .opr-en-f-campo textarea{
  width:100% !important; padding:11px 13px !important; border-radius:var(--radio-s) !important;
  background:var(--p50) !important; box-shadow:inset 0 0 0 1.5px var(--borde) !important;
  font-size:.9375rem !important; color:var(--tinta) !important;
  transition:box-shadow .16s ease, background .16s ease !important; resize:vertical !important;
}
.opr-en .opr-en-f-campo input:focus, .opr-en .opr-en-f-campo textarea:focus{
  background:var(--superficie) !important; box-shadow:inset 0 0 0 1.5px var(--p700) !important; outline:none !important;
}
.opr-en .opr-en-f-campo.es-mal input, .opr-en .opr-en-f-campo.es-mal textarea{
  background:var(--no100) !important; box-shadow:inset 0 0 0 1.5px var(--no600) !important;
}

/* el aviso lo escribe el JavaScript en data-aviso: el color dice que algo pasa,
   el texto dice qué */
.opr-en .opr-en-f-campo[data-aviso]::after{
  content:attr(data-aviso) !important; margin-top:5px !important;
  font-size:.75rem !important; font-weight:600 !important; color:var(--no600) !important; line-height:1.4 !important;
}
.opr-en .opr-en-f-check{
  display:flex !important; align-items:flex-start !important; gap:10px !important; margin:4px 0 16px !important;
  font-size:.84375rem !important; line-height:1.45 !important; color:var(--suave) !important; cursor:pointer !important;
}
.opr-en .opr-en-f-check input{
  flex:none !important; width:19px !important; height:19px !important; margin-top:1px !important; border-radius:6px !important;
  background:var(--p50) !important; box-shadow:inset 0 0 0 1.5px var(--borde2) !important; position:relative !important;
}
.opr-en .opr-en-f-check input:checked{background:var(--p950) !important; box-shadow:inset 0 0 0 1.5px var(--p950) !important}
.opr-en .opr-en-f-check input:checked::after{
  content:'' !important; position:absolute !important; left:6px !important; top:2.5px !important; width:5px !important; height:10px !important;
  border-right:2px solid #fff !important; border-bottom:2px solid #fff !important; transform:rotate(42deg) !important;
}
.opr-en .opr-en-f-check a{font-weight:600 !important; color:var(--tinta) !important; text-decoration:underline !important}
.opr-en .opr-en-f-check.es-mal{color:var(--no600) !important}
.opr-en .opr-en-f-check.es-mal input{box-shadow:inset 0 0 0 1.5px var(--no600) !important}


/* La trampa va FUERA de la pantalla, no con display:none: los robots tontos
   se saltan lo que está oculto y rellenan lo que no lo está. */
.opr-en input.opr-en-f-trampa{position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important}
.opr-en .opr-en-f-enviar{width:100% !important; padding:14px 20px !important}
.opr-en .opr-en-f-pie-nota{margin-top:10px !important; text-align:center !important}
.opr-en .opr-en-f-hecho{
  display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important; gap:11px !important;
  padding:14px 0 6px !important;
}
.opr-en .opr-en-f-hecho-ic{
  width:52px !important; height:52px !important; border-radius:999px !important; display:grid !important; place-items:center !important;
  background:var(--ok100) !important; color:var(--ok600) !important;
}
.opr-en .opr-en-f-hecho-ic svg{width:24px !important; height:24px !important}
.opr-en .opr-en-f-hecho p{max-width:42ch !important; font-size:.9375rem !important; color:var(--suave) !important; text-wrap:pretty !important}
.opr-en .opr-en-f-hecho .opr-btn{margin-top:6px !important; padding:12px 22px !important; font-size:.9375rem !important}
@media (max-width:820px){
.opr-en .opr-en-f-otras{grid-template-columns:1fr !important; gap:8px !important}
}
@media (max-width:560px){
.opr-en .opr-en-f-ctas .opr-btn{flex:1 1 100% !important}
.opr-en .opr-en-f-fila{grid-template-columns:1fr !important; gap:0 !important}
.opr-en .opr-en-f-caja{padding:22px 18px !important}
.opr-en .opr-en-f-seg{width:100% !important}
.opr-en .opr-en-f-seg button{flex:1 1 0 !important; padding:9px 8px !important; font-size:.8125rem !important}
}


/* ---------------------------------------------------------------------
   EL ATRIBUTO hidden NO OCULTA NADA SI UNA REGLA DE LA SECCIÓN LE GANA.
   Es la trampa n.º 4 del documento 02, con la vuelta que añadió el anidado: el
   núcleo trae la regla de punto opr y corchete hidden, que pone display none y
   pesa (0,2,0); las reglas de esta sección salen anidadas como
   .opr-en .opr-en-f-modal, que también pesa (0,2,0) y va después.
   Resultado: la ventana del formulario y la pantalla de «enviado» se quedaban
   PUESTAS encima de la página, tapando los selectores de las secciones de
   arriba. Lo cazó el arnés al no poder pulsar un botón que se veía
   perfectamente.
   Con la raíz delante, .opr-en.opr-en-flotante y el corchete hidden pesan
   (0,3,0) y ganan siempre. Va al final del fichero a propósito.
   Y la prueba no comprueba el atributo: comprueba el display calculado.
   (En un comentario CSS no se escriben llaves: anidar() las busca con
   expresiones regulares y parte el fichero por ellas.)
   --------------------------------------------------------------------- */
.opr-en.opr-en-flotante [hidden]{display:none !important}