/* =====================================================================
   OpoReal · Legal · núcleo del plugin
   Copia del núcleo de la home (sistema Pizarra), con su propio handle
   para que este plugin no pueda romper ninguno de los demás. Si cambia
   la paleta de la home, hay que cambiarla aquí también.
   ===================================================================== */

/* =====================================================================
   OpoReal · núcleo compartido de los bloques
   Sistema Pizarra. Todo cuelga de .opr para no tocar nada del tema.
   ===================================================================== */

.opr{
  /* --- escala pizarra --- */
  --p50:#F7F8FB !important;  --p100:#EBEFF4; --p200:#D9E0E8; --p300:#BEC9D5;
  --p400:#A0ACBB; --p500:#7F8E9F; --p600:#606F80; --p700:#475362;
  --p800:#313A45; --p900:#1F262D; --p950:#12171C;

  /* --- papeles --- */
  --fondo:var(--p50) !important; --superficie:#FFFFFF; --borde:var(--p200); --borde2:var(--p300);
  --tinta:var(--p950); --suave:var(--p700); --tenue:var(--p500);

  /* --- estados (solo tras responder, nunca decoran) --- */
  --ok100:#E1F4ED !important; --ok500:#319B74; --ok600:#1D8660; --ok900:#143428;
  --no100:#FBE5E5; --no500:#DD3C3C; --no600:#BA2C2C; --no900:#3D1414;
  --av100:#FDEFD9; --av500:#F09D0F; --av600:#B87C14; --av900:#39290E;

  /* --- cuerpos --- */
  --ertz:#D9503C !important; --local:#C9D420;

  --radio:16px; --radio-s:11px;
  --sombra:0 1px 2px rgba(18,23,28,.05), 0 22px 50px -30px rgba(18,23,28,.34);
  --sombra-s:0 1px 2px rgba(18,23,28,.06), 0 8px 20px -14px rgba(18,23,28,.3);

  display:block !important;
  background:var(--fondo) !important; color:var(--tinta) !important;
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important;
  font-size:16px !important; line-height:1.6 !important; font-weight:400 !important;
  letter-spacing:normal !important; text-align:left !important;
  -webkit-font-smoothing:antialiased !important; -moz-osx-font-smoothing:grayscale !important;
}

/* --- blindaje: el tema de WordPress no entra aquí ---
   Las propiedades que el bloque nunca vuelve a fijar llevan !important, para
   sobrevivir a temas que las imponen. Las demás van sin él, para que las
   clases opr- de cada sección puedan seguir mandando. */
.opr,.opr *,.opr *::before,.opr *::after{
  box-sizing:border-box !important;
  text-transform:none !important; text-decoration:none !important;
  text-shadow:none !important; float:none !important;
  list-style:none !important; font-style:normal !important;
}
/* OJO: font-family:inherit solo para los descendientes. Si .opr entra en esta
   regla, hereda la tipografía del tema de WordPress y se pierde Public Sans:
   la declaración de .opr de arriba tiene la misma especificidad y va antes. */
.opr *,.opr *::before,.opr *::after{ font-family:inherit !important; }
/* `margin` y `max-width` van aquí a propósito. La regla de abajo solo alcanza a
   los DESCENDIENTES, así que la propia sección se quedaba a merced del tema: uno
   que ponga `header{max-width:220px !important}` la estruja entera —(0,0,1)
   contra nada—. Se vio primero en la sala de psicotécnicos y aquí lo enseñó la
   cabecera con el tema hostil: la barra medía 220 px y el menú se salía 250. */
.opr{border:0 !important; float:none !important; margin:0 !important; max-width:none !important}
.opr *,.opr *::before,.opr *::after{
  margin:0 !important; padding:0 !important; border:0 !important; background:none !important; box-shadow:none !important; outline:none !important;
  letter-spacing:inherit !important; line-height:inherit !important; color:inherit !important;
  max-width:none !important; min-width:0 !important;
}
.opr img,.opr svg{display:block !important; max-width:100% !important}
/* OJO: para ocultar una imagen hace falta al menos la misma especificidad que la
   regla de arriba (0,1,1). Usa `img.mi-clase{display:none !important}`, nunca `.mi-clase`. */
/* Nada de background/color aquí: subirían la especificidad por encima de las
   clases .opr-btn-* y ganarían siempre. El reset universal ya los neutraliza. */
.opr button,.opr input,.opr select,.opr textarea{
  font:inherit !important; cursor:pointer !important; -webkit-appearance:none !important; appearance:none !important;
}
.opr input,.opr textarea{cursor:text !important}
.opr a{cursor:pointer !important}
.opr [hidden]{display:none !important}
.opr :focus-visible{outline:2px solid var(--tinta) !important; outline-offset:2px !important; border-radius:4px !important}

/* --- lienzo --- */
.opr-caja{width:100% !important; max-width:1180px !important; margin:0 auto !important}
.opr-seccion{padding:clamp(60px,7.5vw,108px) clamp(18px,4vw,48px) !important; overflow-x:clip !important}
.opr-seccion.es-blanca{background:var(--superficie) !important}
.opr-seccion.es-noche{background:var(--p950) !important; color:var(--p100) !important}
/* secciones que entran de una en la pantalla, como el hero */
.opr-seccion.es-pantalla{
  min-height:100svh !important; display:flex !important; align-items:center !important;
  padding-top:clamp(48px,5vh,72px) !important; padding-bottom:clamp(48px,5vh,72px) !important;
}
.opr-seccion.es-pantalla > .opr-caja{width:100% !important}
@media (max-width:920px){
  .opr-seccion.es-pantalla{min-height:0 !important; padding-top:clamp(60px,7.5vw,108px) !important; padding-bottom:clamp(60px,7.5vw,108px) !important}
}

/* --- tipografía --- */
.opr-rotulo{
  display:block !important; margin-bottom:12px !important;
  font-size:.95rem !important; font-weight:600 !important; letter-spacing:-.005em !important; color:var(--suave) !important;
}
.opr-seccion.es-noche .opr-rotulo{color:var(--p400) !important}
.opr-h2{
  font-size:clamp(1.85rem,4vw,2.9rem) !important; font-weight:800 !important;
  line-height:1.04 !important; letter-spacing:-.03em !important; text-wrap:balance !important;
}
.opr-h3{font-size:1.3rem !important; font-weight:700 !important; line-height:1.28 !important; letter-spacing:-.02em !important}
.opr-h4{font-size:1.0625rem !important; font-weight:700 !important; line-height:1.35 !important; letter-spacing:-.012em !important}
.opr-entradilla{
  margin-top:16px !important; max-width:62ch !important;
  font-size:1.0625rem !important; color:var(--suave) !important; text-wrap:pretty !important;
}
.opr-seccion.es-noche .opr-entradilla{color:var(--p300) !important}
.opr-nota{font-size:.8125rem !important; color:var(--tenue) !important}
.opr-cifra{font-variant-numeric:tabular-nums !important; letter-spacing:-.02em !important}

/* --- cabecera de sección --- */
.opr-cabeza{margin-bottom:clamp(34px,4vw,52px) !important}
.opr-cabeza.es-partida{display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; gap:28px !important; align-items:end !important}
@media (max-width:820px){ .opr-cabeza.es-partida{grid-template-columns:1fr !important; align-items:start !important} }

/* --- botones --- */
.opr-btn{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:9px !important;
  padding:14px 24px !important; border-radius:999px !important;
  font-size:1rem !important; font-weight:700 !important; letter-spacing:-.012em !important; line-height:1 !important;
  transition:transform .12s ease, background .16s ease, border-color .16s ease, opacity .16s ease !important;
  white-space:nowrap !important;
}
.opr-btn:active{transform:translateY(1px) !important}
.opr-btn svg{width:17px !important; height:17px !important; flex:none !important}
.opr-btn-1{background:var(--p950) !important; color:#fff !important}
.opr-btn-1:hover{background:var(--p800) !important}
.opr-seccion.es-noche .opr-btn-1{background:var(--p50) !important; color:var(--p950) !important}
.opr-seccion.es-noche .opr-btn-1:hover{background:#fff !important}
.opr-btn-2{background:transparent !important; color:var(--tinta) !important; box-shadow:inset 0 0 0 1.5px var(--borde2) !important}
.opr-btn-2:hover{box-shadow:inset 0 0 0 1.5px var(--p500) !important; background:var(--p100) !important}
.opr-seccion.es-noche .opr-btn-2{color:var(--p100) !important; box-shadow:inset 0 0 0 1.5px var(--p700) !important}
.opr-seccion.es-noche .opr-btn-2:hover{background:var(--p900) !important; box-shadow:inset 0 0 0 1.5px var(--p600) !important}
.opr-btn:disabled{opacity:.42 !important; cursor:default !important}
.opr-btn:disabled:active{transform:none !important}

/* --- tarjeta --- */
.opr-tarjeta{
  background:var(--superficie) !important; border:1px solid var(--borde) !important;
  border-radius:var(--radio) !important; box-shadow:var(--sombra-s) !important;
}

/* --- segmentado (mismo gesto que el hero) --- */
.opr-seg{display:inline-flex !important; gap:4px !important; padding:4px !important; border-radius:999px !important; background:var(--p100) !important}
.opr-seg button{
  padding:9px 18px !important; border-radius:999px !important; font-size:.9375rem !important; font-weight:600 !important;
  letter-spacing:-.01em !important; color:var(--suave) !important; transition:background .16s, color .16s !important;
  white-space:nowrap !important;
}
.opr-seg button:hover{color:var(--tinta) !important}
.opr-seg button[aria-pressed="true"]{background:var(--superficie) !important; color:var(--tinta) !important; box-shadow:var(--sombra-s) !important}
.opr-seccion.es-noche .opr-seg{background:var(--p900) !important}
.opr-seccion.es-noche .opr-seg button{color:var(--p400) !important}
.opr-seccion.es-noche .opr-seg button[aria-pressed="true"]{background:var(--p800) !important; color:#fff !important}

@media (prefers-reduced-motion:reduce){
  .opr *,.opr *::before,.opr *::after{
    transition-duration:.01ms !important; animation-duration:.01ms !important;
  }
}