html{ --sj-sbw:calc(100vw - 100%); }

/* ============================================================================
   SOS JURÍDICO — Sistema de acceso · HOJA COMPLETA
   ----------------------------------------------------------------------------
   Páginas: /acceso · /recuperar-contrasena · /nueva-contrasena

   DÓNDE VA: snippet de tipo CSS, con carga restringida a esas tres páginas.
   Sustituye por completo a cualquier versión anterior — no las acumules.

   Notas de implementación:
   · Los tokens se declaran sobre .sj-acc, no sobre :root, para que no se
     filtren al resto del sitio ni choquen con las variables de Greenshift.
   · Varias reglas llevan la etiqueta antepuesta (.sj-acc input.sj-acc-input)
     y !important. No es descuido: los temas declaran los formularios con
     selectores de atributo del tipo input[type="text"]:focus, cuya
     especificidad (0,2,1) supera a una clase con pseudoclase (0,2,0).
   ============================================================================ */


/* ============================================================================
   1. TOKENS
   ============================================================================ */
.sj-acc{
  --sj-tinta:#1A1A1A;
  --sj-papel:#FFFFFF;
  --sj-zafiro:#0F4C81;
  --sj-zafiro-hover:#0D3F6B;
  --sj-zafiro-light:rgba(15,76,129,.08);
  --sj-pizarra:#4F5B66;
  --sj-terciario:#8A9299;
  --sj-niebla:#ECEFF1;
  --sj-bruma:#F7F9FA;
  --sj-placeholder:#A0ADB8;

  --sj-error-bg:#FFF5F5;
  --sj-error-bd:#FED7D7;
  --sj-error-tx:#C53030;

  --sj-r-sm:8px;
  --sj-r-md:12px;
  --sj-r-lg:16px;
  --sj-ease:cubic-bezier(.4,0,.2,1);
}


/* ============================================================================
   2. SECCIÓN
   ============================================================================ */

/* Red de seguridad: impide cualquier desbordamiento horizontal residual.
   Se usa "clip" y no "hidden" porque hidden crea un contenedor de
   desplazamiento que rompería un position:sticky. */
html,body{ overflow-x:clip; }

.sj-acc{
  /*
   * ═══ 1.2.2.1 — ALINEADO ARRIBA, YA NO CENTRADO VERTICALMENTE ═══
   *
   * justify-content:center repartía el espacio sobrante arriba y abajo
   * según la altura VIVA del contenido. Cualquier cambio de esa altura
   * —un mensaje de error que aparece, un captcha que crece— obligaba al
   * navegador a recalcular el centro, y el borde superior se movía tanto
   * como el inferior. flex-start elimina ese recálculo de raíz: el
   * conjunto arranca siempre en el mismo punto fijo desde arriba,
   * y cualquier crecimiento posterior solo se extiende hacia abajo.
   *
   * El aire que antes daba el centrado lo da ahora un padding-top
   * responsivo (ver más abajo): ni pegado al borde ni empujado muy abajo,
   * ajustado según la altura de pantalla en lugar de un valor único.
   */
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;

  /* Plantilla en blanco: el contenedor del tema ya no impone ancho máximo,
     así que 100% basta y nunca puede desbordar.
     Si algún día se usara una plantilla con contenedor constreñido y la
     sección dejara de llegar a los bordes, sustituir estas dos líneas por
     el bloque comentado más abajo. */
  /* A DIFERENCIA de /acceso, esta página vive dentro del contenedor del tema
     (es una página normal de WordPress con un shortcode), y ese contenedor
     impone un ancho máximo. Se usa la alternativa que el propio acceso.css
     documenta para este caso: romper el contenedor con márgenes negativos.
     La variable --sj-sbw descuenta la barra de desplazamiento; sin ese
     descuento, 100vw sobresale ~17px y aparece scroll horizontal. */
  /* A DIFERENCIA de /acceso —que usa plantilla en blanco— esta página vive
     dentro del flujo de bloques del tema, y los temas de bloques imponen un
     max-width al hijo directo mediante :where(.is-layout-constrained > *).
     Ese selector gana por especificidad a un max-width normal, así que aquí
     hace falta !important. Los márgenes negativos rompen el contenedor para
     que el fondo llegue de borde a borde; --sj-sbw descuenta la barra de
     desplazamiento, sin lo cual 100vw sobresale y aparece scroll horizontal. */
  width:calc(100vw - var(--sj-sbw,0px)) !important;
  max-width:calc(100vw - var(--sj-sbw,0px)) !important;
  /* left:50% + translateX(-50%) en vez de márgenes negativos calculados:
     los márgenes fallaban porque el contenedor del tema añade su propio
     padding lateral (has-global-padding, 50px por lado en Twenty Twenty-Five),
     y ese padding no se puede descontar con un cálculo fijo porque cambia
     según el tema. Posicionar respecto al viewport lo elimina de la ecuación. */
  position:relative;
  left:50%;
  transform:translateX(-50%);
  margin-left:0 !important;
  margin-right:0 !important;

  /* ——— Alternativa para plantillas CON contenedor constreñido ———
     La variable descuenta el ancho de la barra de desplazamiento; sin ese
     descuento, 100vw sobresale ~17px y aparece scroll horizontal.
     Requiere además:  html{ --sj-sbw:calc(100vw - 100%); }

     width:calc(100vw - var(--sj-sbw,0px));
     max-width:calc(100vw - var(--sj-sbw,0px));
     margin-left:calc(50% - 50vw + (var(--sj-sbw,0px) / 2));
     margin-right:calc(50% - 50vw + (var(--sj-sbw,0px) / 2));
     ———————————————————————————————————————————————————————————— */

  min-height:100vh;min-height:100dvh;

  /*
   * Margen superior responsivo con clamp(mínimo, preferido, máximo):
   *   · nunca baja de 28px — ni pegado al borde en pantallas muy bajas
   *     (un portátil con la ventana a media altura, por ejemplo).
   *   · crece con un 6% de la altura visible del viewport, así que en
   *     pantallas altas el conjunto no queda arrinconado arriba del todo.
   *   · nunca pasa de 88px — el contenido no debe verse "muy abajo" en
   *     monitores grandes, como se pidió explícitamente.
   * Sustituye los 32px fijos que tenía el padding superior antes.
   */
  padding:clamp(28px,6vh,88px) 4% 32px;

  background:var(--sj-bruma);
  font-family:inherit;          /* hereda la tipografía del tema */
  font-size:17px;
  letter-spacing:.015em;
  line-height:1.6;
  color:var(--sj-tinta);
  overflow-x:clip;overflow-y:visible;
  box-sizing:border-box;
}

/*
 * La resta de la altura de la barra de administración de WordPress ya NO
 * hace falta: esa resta existía para que un min-height de 100dvh no
 * generara scroll de sobra cuando el centrado repartía espacio arriba y
 * abajo. Con flex-start el contenido siempre arranca desde arriba y el
 * min-height solo actúa como un mínimo — un poco de aire extra al final
 * de la página con la barra activa no es un problema a evitar.
 */
.sj-acc *,.sj-acc *::before,.sj-acc *::after{box-sizing:border-box}

/* Neutraliza el color de enlace global del tema.
   Cada componente reasigna después el suyo. */
.sj-acc a,
.sj-acc a:visited,
.sj-acc a:hover,
.sj-acc a:focus{
  color:inherit;
  text-decoration:none;
  box-shadow:none;
}
.sj-acc a svg{fill:currentColor}

/* Dot grid 24×24 · Azul Zafiro 10% */
.sj-acc::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(15,76,129,.10) 1px,transparent 1px);
  background-size:24px 24px;
}
/* Orbes radiales que respiran — CSS puro, sin canvas */
.sj-acc::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 720px 560px at 82% 6%,rgba(15,76,129,.05),transparent 62%),
    radial-gradient(ellipse 640px 520px at 14% 96%,rgba(15,76,129,.04),transparent 60%);
  animation:sj-breathe 9s ease-in-out infinite alternate;
}
@keyframes sj-breathe{from{opacity:.55}to{opacity:1}}

@keyframes sj-fadeSlideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes sj-rot{to{transform:rotate(360deg)}}


/* ============================================================================
   3. LOGOTIPO
   Sin fondo en hover: un logotipo no se comporta como un botón. El relleno
   se conserva para mantener un área de toque cómoda en móvil.
   ============================================================================ */
/* ────────────────────────────────────────────────────────────
   El logotipo se reduce SOLO en escritorio. En móvil ya estaba
   bien proporcionado respecto al ancho de la pantalla, y ahí el
   espacio vertical sobra menos que el equilibrio visual.
   ──────────────────────────────────────────────────────────── */
@media (min-width:641px){
  .sj-acc a.sj-acc-brand img,
  .sj-acc a.sj-acc-brand svg{
    height:clamp(52px,4.3vw,64px) !important;
  }
  .sj-acc a.sj-acc-brand{ margin-bottom:14px !important; }
}

.sj-acc a.sj-acc-brand{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;margin-bottom:18px;
  border-radius:var(--sj-r-md);
  text-decoration:none;
  background:transparent !important;
  color:inherit !important;
}
.sj-acc a.sj-acc-brand:hover,
.sj-acc a.sj-acc-brand:active{background:transparent !important}
.sj-acc a.sj-acc-brand:focus-visible{
  outline:2px solid var(--sj-zafiro) !important;
  outline-offset:2px;
}

.sj-acc .sj-acc-logo{
  display:block;
  height:clamp(62px,5.2vw,78px) !important;
  width:auto !important;
  max-width:min(260px,72vw) !important;
  object-fit:contain;
}



/* ============================================================================
   4. TARJETA
   ============================================================================ */
.sj-acc .sj-acc-card{
  position:relative;z-index:2;
  width:100%;max-width:452px;
  background:var(--sj-papel);
  border:1px solid var(--sj-niebla);
  border-radius:20px;
  padding:30px 40px;
  box-shadow:0 1px 2px rgba(26,26,26,.03),0 10px 34px rgba(26,26,26,.04);
}


/* ============================================================================
   5. ENCABEZADO
   El salto del título al primer campo es de 32px: el título es grande y
   pesado, la etiqueta que le sigue es pequeña, y con menos aire los dos
   bloques se leen como uno solo.
   ============================================================================ */
.sj-acc .sj-acc-badge{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sj-zafiro);background:var(--sj-zafiro-light);
  border-radius:100px;padding:5px 12px;margin-bottom:14px;
}
.sj-acc .sj-acc-badge svg{width:13px;height:13px;flex:none}

.sj-acc h1.sj-acc-title{
  margin:0 0 24px !important;
  font-size:1.85rem !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  letter-spacing:-.02em !important;
  color:var(--sj-tinta) !important;
}
/* Con párrafo debajo, el título se acerca a él y el aire pasa al párrafo */
.sj-acc h1.sj-acc-title.has-lead{margin-bottom:12px !important}

/* text-align se fija explícitamente: algunos temas justifican los párrafos,
   y el texto justificado en columnas estrechas abre huecos entre palabras. */
.sj-acc p.sj-acc-lead{
  margin:0 0 30px !important;
  font-size:.9rem !important;
  line-height:1.55 !important;
  color:var(--sj-pizarra) !important;
  text-align:left !important;
  text-wrap:pretty;
}

/* Misma razón para el resto de textos corridos de la tarjeta. */
.sj-acc .sj-acc-hint,
.sj-acc .sj-acc-tipbox,
.sj-acc .sj-acc-alert{ text-align:left !important; }
.sj-acc p.sj-acc-lead strong{font-weight:600;color:var(--sj-tinta)}

/* Emblema circular de los estados de confirmación */
.sj-acc .sj-acc-emblem{
  width:56px;height:56px;margin:0 0 20px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--sj-zafiro-light);color:var(--sj-zafiro);
}
.sj-acc .sj-acc-emblem svg{width:28px;height:28px}
.sj-acc .sj-acc-emblem--warn{background:var(--sj-error-bg);color:var(--sj-error-tx)}


/* ============================================================================
   6. CAMPOS
   ============================================================================ */
.sj-acc .sj-acc-group{margin-bottom:16px}
.sj-acc .sj-acc-labelrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 8px}
.sj-acc .sj-acc-label{
  display:block;margin:0 0 8px;
  font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--sj-tinta);
}
.sj-acc .sj-acc-labelrow .sj-acc-label{margin:0}
.sj-acc .sj-acc-hint{margin:6px 0 0;font-size:.75rem;line-height:1.5;color:var(--sj-pizarra)}

.sj-acc a.sj-acc-minilink{
  font-size:.75rem;font-weight:500;
  color:var(--sj-pizarra) !important;
  border-bottom:1px solid transparent;
  transition:color .25s var(--sj-ease),border-color .25s var(--sj-ease);
}
.sj-acc a.sj-acc-minilink:hover,
.sj-acc a.sj-acc-minilink:focus-visible{
  color:var(--sj-zafiro) !important;
  border-bottom-color:rgba(15,76,129,.35);
}
.sj-acc a.sj-acc-minilink:focus-visible{outline:2px solid var(--sj-zafiro);outline-offset:3px;border-radius:3px}

.sj-acc .sj-acc-wrap{position:relative}

.sj-acc input.sj-acc-input,
.sj-acc .sj-acc-otp input{
  -webkit-appearance:none;appearance:none;
  width:100%;padding:13px 16px;
  font-family:inherit !important;
  font-size:.95rem;font-weight:400;letter-spacing:.015em;
  color:var(--sj-tinta) !important;
  caret-color:var(--sj-zafiro);
  background-color:var(--sj-bruma) !important;
  background-image:none !important;
  border:1.5px solid transparent !important;
  border-radius:var(--sj-r-sm) !important;
  box-shadow:none !important;
  outline:none !important;
  transition:background-color .25s var(--sj-ease),
             border-color .25s var(--sj-ease),
             box-shadow .25s var(--sj-ease) !important;
}
.sj-acc input.sj-acc-input::placeholder{color:var(--sj-placeholder) !important;opacity:1}

.sj-acc input.sj-acc-input:hover:not(:focus),
.sj-acc .sj-acc-otp input:hover:not(:focus){
  border-color:var(--sj-niebla) !important;
}

.sj-acc input.sj-acc-input:focus,
.sj-acc input.sj-acc-input:focus-visible,
.sj-acc .sj-acc-otp input:focus{
  background-color:var(--sj-papel) !important;
  border-color:var(--sj-zafiro) !important;
  box-shadow:0 0 0 3px rgba(15,76,129,.1) !important;
  outline:none !important;
}

.sj-acc input.sj-acc-input.is-invalid{
  border-color:var(--sj-error-bd) !important;
  background-color:var(--sj-papel) !important;
}
.sj-acc input.sj-acc-input.is-invalid:focus{
  border-color:var(--sj-error-tx) !important;
  box-shadow:0 0 0 3px rgba(197,48,48,.1) !important;
}

.sj-acc input.sj-acc-input--pass{padding-right:46px}

/* Autocompletado: Chrome pinta los campos de amarillo y no atiende a
   background-color. Se cubre con una sombra interior sólida. */
.sj-acc input.sj-acc-input:-webkit-autofill,
.sj-acc input.sj-acc-input:-webkit-autofill:hover{
  -webkit-text-fill-color:var(--sj-tinta) !important;
  -webkit-box-shadow:0 0 0 1000px var(--sj-bruma) inset !important;
  caret-color:var(--sj-zafiro);
  transition:background-color 9999s ease-in-out 0s;
}
.sj-acc input.sj-acc-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--sj-tinta) !important;
  -webkit-box-shadow:0 0 0 1000px var(--sj-papel) inset,
                     0 0 0 3px rgba(15,76,129,.1) !important;
}

/* Mostrar / ocultar contraseña */
.sj-acc button.sj-reg-eye{
  -webkit-appearance:none;appearance:none;
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  padding:0;border:none;
  background:none !important;
  border-radius:6px;
  color:var(--sj-terciario) !important;
  cursor:pointer;
  font-family:inherit !important;
  transition:color .25s var(--sj-ease),background-color .25s var(--sj-ease);
}
.sj-acc button.sj-reg-eye:hover{
  color:var(--sj-zafiro) !important;
  background:var(--sj-zafiro-light) !important;
}
.sj-acc button.sj-reg-eye:focus-visible{outline:2px solid var(--sj-zafiro);outline-offset:1px}
/* pointer-events:none — el clic siempre debe registrarse sobre el <button>,
   nunca sobre el <path> interior del SVG. */
.sj-acc button.sj-reg-eye svg{width:18px;height:18px;display:block;pointer-events:none}
.sj-acc button.sj-reg-eye .sj-ico-off{display:none}
.sj-acc button.sj-reg-eye.is-on .sj-ico-on{display:none}
.sj-acc button.sj-reg-eye.is-on .sj-ico-off{display:block}

/* Checkbox */
.sj-acc .sj-acc-check{display:flex;align-items:center;gap:10px;margin:0 0 14px;cursor:pointer;user-select:none}
.sj-acc .sj-acc-check input{position:absolute;opacity:0;width:0;height:0}
.sj-acc .sj-acc-box{
  width:18px;height:18px;flex:none;
  border:1.5px solid var(--sj-niebla);border-radius:5px;background:var(--sj-bruma);
  display:flex;align-items:center;justify-content:center;color:var(--sj-papel);
  transition:background-color .25s var(--sj-ease),border-color .25s var(--sj-ease),box-shadow .25s var(--sj-ease);
}
.sj-acc .sj-acc-box svg{width:12px;height:12px;opacity:0;transform:scale(.7);transition:opacity .2s var(--sj-ease),transform .2s var(--sj-ease)}
.sj-acc .sj-acc-check:hover .sj-acc-box{border-color:var(--sj-zafiro)}
.sj-acc .sj-acc-check input:checked + .sj-acc-box{background:var(--sj-zafiro);border-color:var(--sj-zafiro)}
.sj-acc .sj-acc-check input:checked + .sj-acc-box svg{opacity:1;transform:scale(1)}
.sj-acc .sj-acc-check input:focus-visible + .sj-acc-box{box-shadow:0 0 0 3px rgba(15,76,129,.15)}
.sj-acc .sj-acc-check-tx{font-size:.8rem;color:var(--sj-pizarra)}


/* ============================================================================
   7. BOTONES
   ============================================================================ */
.sj-acc .sj-acc-btn{
  -webkit-appearance:none;appearance:none;
  display:block;text-align:center;
  width:100%;padding:14px 24px;
  font-family:inherit !important;
  font-size:.95rem;font-weight:600;letter-spacing:.02em;
  text-transform:none !important;
  color:var(--sj-papel) !important;
  background-color:var(--sj-zafiro) !important;
  background-image:none !important;
  border:none !important;
  border-radius:var(--sj-r-sm) !important;
  cursor:pointer;
  position:relative;overflow:hidden;text-decoration:none;
  transition:background-color .25s var(--sj-ease),
             transform .18s var(--sj-ease),
             box-shadow .25s var(--sj-ease),
             opacity .25s var(--sj-ease);
}
.sj-acc .sj-acc-btn-in{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px}
.sj-acc .sj-acc-btn-in svg{width:18px;height:18px;flex:none}
.sj-acc .sj-acc-btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  transform:translateX(-100%);transition:transform .6s ease;
}
.sj-acc .sj-acc-btn:hover:not(:disabled){
  background-color:var(--sj-zafiro-hover) !important;
  color:var(--sj-papel) !important;
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(15,76,129,.3);
}
.sj-acc .sj-acc-btn:hover:not(:disabled)::after{transform:translateX(100%)}
.sj-acc .sj-acc-btn:active:not(:disabled){transform:translateY(0) scale(.99);box-shadow:0 2px 8px rgba(15,76,129,.22)}
.sj-acc .sj-acc-btn:focus-visible{outline:2px solid var(--sj-zafiro);outline-offset:3px}
.sj-acc .sj-acc-btn:disabled{cursor:default;opacity:.45}

.sj-acc .sj-acc-btn .sj-spin{display:none;animation:sj-rot .7s linear infinite}
.sj-acc .sj-acc-btn .sj-tx-load{display:none}
.sj-acc .sj-acc-btn.is-loading .sj-ico-lead,
.sj-acc .sj-acc-btn.is-loading .sj-tx{display:none}
.sj-acc .sj-acc-btn.is-loading .sj-spin{display:block}
.sj-acc .sj-acc-btn.is-loading .sj-tx-load{display:inline}

/* Botón secundario */
.sj-acc .sj-acc-btn2{
  -webkit-appearance:none;appearance:none;
  width:100%;padding:12px 20px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit !important;
  font-size:.875rem;font-weight:600;letter-spacing:.02em;
  text-transform:none !important;
  color:var(--sj-tinta) !important;
  background:transparent !important;
  border:1px solid var(--sj-niebla) !important;
  border-radius:var(--sj-r-sm) !important;
  cursor:pointer;text-decoration:none;
  transition:border-color .25s var(--sj-ease),color .25s var(--sj-ease),background-color .25s var(--sj-ease);
}
.sj-acc .sj-acc-btn2 svg{width:16px;height:16px;flex:none}
.sj-acc .sj-acc-btn2:hover,
.sj-acc .sj-acc-btn2:focus-visible{
  border-color:var(--sj-zafiro) !important;
  color:var(--sj-zafiro) !important;
  background:var(--sj-zafiro-light) !important;
}
.sj-acc .sj-acc-btn2:focus-visible{outline:2px solid var(--sj-zafiro);outline-offset:2px}


/* ============================================================================
   8. ALERTA Y AVISOS
   ============================================================================ */
.sj-acc .sj-acc-alert{
  display:none;align-items:flex-start;gap:8px;
  padding:12px 16px;margin:0 0 20px;
  background:var(--sj-error-bg);border:1px solid var(--sj-error-bd);
  border-radius:var(--sj-r-sm);color:var(--sj-error-tx);
  font-size:.825rem;line-height:1.45;
}
.sj-acc .sj-acc-alert.is-visible{display:flex;animation:sj-fadeSlideUp .3s ease}
.sj-acc .sj-acc-alert svg{width:16px;height:16px;flex:none;margin-top:2px}

.sj-acc .sj-acc-tipbox{
  display:flex;align-items:flex-start;gap:9px;
  margin:20px 0 0;padding:12px 14px;
  background:var(--sj-bruma);border-radius:var(--sj-r-sm);
  font-size:.775rem;line-height:1.5;color:var(--sj-pizarra);
}
.sj-acc .sj-acc-tipbox svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--sj-terciario)}

/* Cuando el aviso es el primer bloque tras el párrafo, el margen superior
   sobra: el propio párrafo ya aporta su separación inferior. */
.sj-acc .sj-acc-tipbox--primero{margin-top:0}


/* ============================================================================
   9. CAPTCHA — el widget real lo inyecta Turnstile en Fase 3
   ============================================================================ */
/*
 * SIN reserva anticipada de espacio. El contenedor mide 0 hasta que
 * Turnstile inserta contenido real dentro; turnstile.js lo detecta con un
 * ResizeObserver y añade la clase has-content, que es la única que aporta
 * margen. Si Turnstile no pinta nada visible, el contenedor nunca deja de
 * medir 0 y no genera ningún hueco.
 */
/*
 * CRECIMIENTO ANIMADO — SEGURO DESDE LA 1.2.2.1.
 *
 * Antes de que .sj-acc pasara a justify-content:flex-start, cualquier
 * animación de crecimiento aquí desencadenaba el recálculo del centrado
 * del padre y provocaba el salto de todo el formulario. Con el contenido
 * alineado arriba, el flujo normal de un documento garantiza que este
 * contenedor SOLO puede empujar hacia abajo lo que viene después de él
 * —el botón, el bloque de alternativas—, nunca los campos que están antes.
 * Por eso ahora sí es seguro añadir una entrada animada.
 *
 * Dos animaciones separadas y coordinadas:
 *   1. El MARGEN inferior crece con una transición — es lo que empuja al
 *      botón hacia abajo de forma suave, no de golpe.
 *   2. El propio widget aparece con una entrada de opacidad + desplazamiento
 *      vertical corto — en vez de aparecer de golpe a tamaño completo.
 */
.sj-acc .sj-acc-captcha{
  margin:0;
  transition:margin .3s var(--sj-ease);
}
.sj-acc .sj-acc-captcha.has-content{
  margin:0 0 20px;
  animation:sj-cap-entra .35s var(--sj-ease);
}
@keyframes sj-cap-entra{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .sj-acc .sj-acc-captcha{transition:none}
  .sj-acc .sj-acc-captcha.has-content{animation:none}
}


/* ============================================================================
   10. CÓDIGO DE VERIFICACIÓN (2FA)
   ============================================================================ */
.sj-acc .sj-acc-otp{display:flex;gap:10px;margin:0 0 22px}
.sj-acc .sj-acc-otp input{
  flex:1;min-width:0;height:56px;text-align:center;
  font-size:1.35rem;font-weight:600;padding:0;
}
.sj-acc .sj-acc-otp input.is-filled{
  background-color:var(--sj-papel) !important;
  border-color:var(--sj-niebla) !important;
}
.sj-acc .sj-acc-otp.is-invalid input{
  border-color:var(--sj-error-bd) !important;
  background-color:var(--sj-papel) !important;
}

.sj-acc .sj-acc-resend{
  margin:16px 0 0;
  font-size:.8rem;
  color:var(--sj-pizarra);
  text-align:center;
}
.sj-acc .sj-acc-resend button{
  -webkit-appearance:none;appearance:none;
  font-family:inherit !important;
  font-size:.8rem;font-weight:600;
  color:var(--sj-zafiro) !important;
  background:none !important;
  border:none;padding:0;cursor:pointer;
  border-bottom:1px solid rgba(15,76,129,.25);
  transition:border-color .25s var(--sj-ease),color .25s var(--sj-ease);
}
.sj-acc .sj-acc-resend button:hover:not(:disabled){border-bottom-color:var(--sj-zafiro)}
.sj-acc .sj-acc-resend button:disabled{
  color:var(--sj-terciario) !important;
  border-bottom-color:transparent;cursor:default;
}


/* ============================================================================
   11. MEDIDOR DE FORTALEZA Y REQUISITOS
   La fortaleza se comunica por CANTIDAD de segmentos, no por color:
   se mantiene dentro de la paleta y funciona también para daltónicos.
   ============================================================================ */
.sj-acc .sj-acc-meter{margin:10px 0 0;display:flex;align-items:center;gap:10px}
.sj-acc .sj-acc-bars{display:flex;gap:5px;flex:1}
.sj-acc .sj-acc-bars span{
  flex:1;height:4px;border-radius:99px;background:var(--sj-niebla);
  transition:background-color .3s var(--sj-ease);
}
.sj-acc .sj-acc-bars span.on{background:var(--sj-zafiro)}
.sj-acc .sj-acc-meter-tx{
  font-size:.7rem;font-weight:600;letter-spacing:.02em;
  color:var(--sj-terciario);white-space:nowrap;min-width:66px;text-align:right;
  transition:color .3s var(--sj-ease);
}
.sj-acc .sj-acc-meter-tx.on{color:var(--sj-zafiro)}

.sj-acc ul.sj-acc-reqs{
  list-style:none;margin:16px 0 0;padding:14px 16px;
  background:var(--sj-bruma);border-radius:var(--sj-r-sm);
  display:grid;gap:8px;
}
.sj-acc ul.sj-acc-reqs li{
  display:flex;align-items:center;gap:8px;margin:0;
  font-size:.775rem;line-height:1.4;color:var(--sj-pizarra);
  transition:color .25s var(--sj-ease);
}
.sj-acc ul.sj-acc-reqs li::marker{content:''}
.sj-acc ul.sj-acc-reqs li svg{width:15px;height:15px;flex:none;color:var(--sj-terciario);transition:color .25s var(--sj-ease)}
.sj-acc ul.sj-acc-reqs li .sj-ico-ok{display:none}
.sj-acc ul.sj-acc-reqs li.ok{color:var(--sj-tinta);font-weight:500}
.sj-acc ul.sj-acc-reqs li.ok svg{color:var(--sj-zafiro)}
.sj-acc ul.sj-acc-reqs li.ok .sj-ico-ok{display:block}
.sj-acc ul.sj-acc-reqs li.ok .sj-ico-pending{display:none}

.sj-acc .sj-acc-match{display:none;align-items:center;gap:7px;margin:8px 0 0;font-size:.75rem;font-weight:500}
.sj-acc .sj-acc-match.is-visible{display:flex;animation:sj-fadeSlideUp .25s ease}
.sj-acc .sj-acc-match svg{width:14px;height:14px;flex:none}
.sj-acc .sj-acc-match.ok{color:var(--sj-zafiro)}
.sj-acc .sj-acc-match.no{color:var(--sj-error-tx)}
.sj-acc .sj-acc-match .sj-ico-ok,
.sj-acc .sj-acc-match .sj-ico-no{display:none}
.sj-acc .sj-acc-match.ok .sj-ico-ok{display:block}
.sj-acc .sj-acc-match.no .sj-ico-no{display:block}


/* ============================================================================
   12. VISTAS
   ============================================================================ */
.sj-acc .sj-view{display:none}
.sj-acc .sj-view.is-active{display:block;animation:sj-fadeSlideUp .4s var(--sj-ease)}


/* ============================================================================
   13. PIE — jerarquía: alternativa › escape › informativo
   ============================================================================ */
.sj-acc .sj-acc-alt{margin-top:20px}
.sj-acc .sj-acc-alt-head{
  display:flex;align-items:center;gap:14px;margin:0 0 12px;
  font-size:.75rem;color:var(--sj-terciario);
}
.sj-acc .sj-acc-alt-head::before,
.sj-acc .sj-acc-alt-head::after{content:'';flex:1;height:1px;background:var(--sj-niebla)}
/* Separador sin texto: las dos mitades se unen en una sola línea */
.sj-acc .sj-acc-alt-head:empty{gap:0;margin-bottom:18px}

.sj-acc a.sj-acc-escape{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:10px 0 0;padding:8px;border-radius:var(--sj-r-sm);
  font-size:.8rem;
  color:var(--sj-pizarra) !important;
  text-decoration:none;
  transition:color .25s var(--sj-ease),background-color .25s var(--sj-ease);
}
.sj-acc a.sj-acc-escape:hover,
.sj-acc a.sj-acc-escape:focus-visible{
  color:var(--sj-zafiro) !important;
  background:var(--sj-zafiro-light);
}
.sj-acc a.sj-acc-escape:focus-visible{outline:2px solid var(--sj-zafiro);outline-offset:2px}
.sj-acc a.sj-acc-escape svg{width:14px;height:14px;flex:none;transition:transform .25s var(--sj-ease)}
.sj-acc a.sj-acc-escape:hover svg{transform:translateX(-2px)}



/* Honeypot — invisible para personas, presente en el DOM para bots */
.sj-acc .sj-acc-hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px;height:1px;overflow:hidden;opacity:0;
}


/* ============================================================================
   14. RESPONSIVE
   ============================================================================ */
@media (max-width:600px){
  /*
   * justify-content:flex-start ya es el valor base ahora (ver arriba), así
   * que aquí solo hace falta un rango de padding-top algo más ajustado:
   * en pantallas pequeñas 88px de tope se vería desproporcionado.
   */
  .sj-acc{padding:clamp(20px,5vh,56px) 4% 26px}

  .sj-acc a.sj-acc-brand{padding:8px 12px;margin-bottom:14px}
  .sj-acc .sj-acc-logo{height:68px !important;max-width:78vw !important}

  .sj-acc .sj-acc-card{padding:26px 22px;border-radius:var(--sj-r-lg)}

  .sj-acc h1.sj-acc-title{font-size:1.55rem !important;margin-bottom:28px !important}
  .sj-acc p.sj-acc-lead{margin-bottom:26px !important}

  .sj-acc .sj-acc-alert{font-size:.78rem;padding:11px 14px;gap:7px}
  .sj-acc .sj-acc-alert svg{width:15px;height:15px}

  .sj-acc .sj-acc-btn2{font-size:.8125rem;padding:11px 18px}
  .sj-acc .sj-acc-btn2 svg{width:15px;height:15px}

  .sj-acc .sj-acc-emblem{width:50px;height:50px}
  .sj-acc .sj-acc-emblem svg{width:25px;height:25px}

  .sj-acc .sj-acc-otp{gap:7px}
  .sj-acc .sj-acc-otp input{height:50px;font-size:1.15rem}

  .sj-acc ul.sj-acc-reqs li{font-size:.75rem}
  .sj-acc .sj-acc-meter-tx{min-width:60px}
}

@media (max-width:360px){
  .sj-acc .sj-acc-card{padding:24px 18px}
  .sj-acc .sj-acc-otp{gap:5px}
  .sj-acc .sj-acc-otp input{height:46px;font-size:1.05rem}
}

/* ============================================================================
   15. PANTALLAS DE POCA ALTURA
   Portátiles de 768px o 800px útiles, o navegadores con muchas barras.
   Se comprime el espaciado exterior para evitar el scroll vertical, sin
   tocar el ritmo tipográfico interior.
   ============================================================================ */
@media screen and (max-height:820px){
  /* El padding-top de .sj-acc ya no se fija aquí: el clamp() de la regla
     base (línea ~105) se comprime solo en pantallas bajas, sin necesitar
     este punto de quiebre adicional. Se conservan los demás ajustes de
     esta sección, que siguen siendo necesarios. */
  .sj-acc a.sj-acc-brand{margin-bottom:12px;padding:6px 10px}
  .sj-acc .sj-acc-logo{height:clamp(54px,4.6vw,64px) !important}
  .sj-acc .sj-acc-card{padding:28px 34px}
  .sj-acc h1.sj-acc-title{margin-bottom:24px !important}
  .sj-acc .sj-acc-badge{margin-bottom:12px}
}

@media screen and (max-height:700px){
  /* Igual que arriba: el padding-top ya lo resuelve el clamp() base. */
  .sj-acc .sj-acc-logo{height:50px !important}
  .sj-acc .sj-acc-card{padding:24px 30px}
  .sj-acc h1.sj-acc-title{font-size:1.6rem !important;margin-bottom:20px !important}
  .sj-acc .sj-acc-group{margin-bottom:14px}
}


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

/* ============================================================================
   AÑADIDOS DEL FORMULARIO DE REGISTRO
   Todo lo anterior es acceso.css de sos-acceso, copiado SIN modificar, para
   que las dos páginas sean idénticas. Aquí abajo solo lo que el registro
   necesita y el login no tiene: la píldora de plan, el aviso bajo el campo
   de correo y el señuelo anti-bots.
   ============================================================================ */

/* Plan seleccionado — solo visible si el visitante llegó eligiendo uno de pago */
.sj-acc .sj-plan{
  display:flex;align-items:center;gap:8px;
  background:var(--sj-zafiro-light);border-radius:var(--sj-r-sm);
  padding:11px 14px;margin:0 0 24px;font-size:.8rem;color:var(--sj-pizarra);
}
.sj-acc .sj-plan svg{width:15px;height:15px;flex:none;color:var(--sj-zafiro)}
.sj-acc .sj-plan .val{margin-left:auto;font-weight:700;color:var(--sj-zafiro)}

/* Aviso bajo el campo de correo — entra deslizando, no de golpe */
.sj-acc .sj-msg{
  margin:0;font-size:.75rem;line-height:1.5;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .28s var(--sj-ease),opacity .28s var(--sj-ease),margin .28s var(--sj-ease);
}
.sj-acc .sj-msg.is-visible{max-height:60px;opacity:1;margin:6px 0 0}
.sj-acc .sj-msg--sug{color:var(--sj-zafiro)}
.sj-acc .sj-msg--sug b{cursor:pointer;font-weight:600;border-bottom:1px solid rgba(15,76,129,.4)}
.sj-acc .sj-msg--err{color:var(--sj-error-tx)}
@media (prefers-reduced-motion:reduce){ .sj-acc .sj-msg{transition:none} }

/* Señuelo anti-bots: invisible para personas, los bots lo llenan igual */
.sj-acc .sj-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================================
   ANCHO COMPLETO DENTRO DEL FLUJO DE BLOQUES DEL TEMA
   El formulario de /acceso usa plantilla en blanco; esta página es una página
   normal de WordPress con un shortcode, así que queda dentro del contenedor
   del tema. Los temas de bloques aplican max-width al hijo directo mediante
   :where(.is-layout-constrained > *) y añaden padding lateral con
   has-global-padding. Se replica el mismo selector para ganar en especificidad
   sin recurrir a más !important de los necesarios.
   ============================================================================ */
.entry-content > .sj-acc,
.wp-block-post-content > .sj-acc,
.is-layout-constrained > .sj-acc,
.is-layout-flow > .sj-acc{
  width:100vw !important;
  max-width:100vw !important;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw !important;
  margin-right:-50vw !important;
  transform:none;
}

/* Casillas de dos líneas: sos-acceso usa align-items:center porque sus casillas
   son de una sola línea (recordar sesión). Las del registro —términos y
   boletín— ocupan dos o tres, y centrada la caja queda a media altura del
   texto en vez de junto a su primera línea. */
.sj-acc .sj-acc-check{ align-items:flex-start; }
.sj-acc .sj-acc-check .sj-acc-box{ margin-top:2px; }

/* Resaltado de campos obligatorios sin llenar, al intentar enviar. */
.sj-acc .sj-acc-check.is-invalid .sj-acc-box{ border-color:var(--sj-error-tx); }
.sj-acc input.sj-acc-input.is-invalid::placeholder{ color:var(--sj-error-tx); opacity:.6; }