/* =====================================================================
   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;
  }
}