/* Acceso — pop-up de login/registro + "precio bloqueado" (borroso).
   Se carga en el catálogo y en la ficha de producto. Colores oficiales (manual 2.3).

   OJO CONCEPTUAL: el número que se ve borroso NO es el precio real. El servidor
   nunca manda precios a un visitante sin sesión (CatalogSearchService::soloPublico),
   así que el front dibuja un número señuelo determinista por producto. Si acá se
   pusiera el precio verdadero, cualquiera lo leería en el HTML: el desenfoque es
   un efecto visual, no una medida de seguridad. */
/* button.rh-pl y no .rh-pl a secas: el tema le pone a todo <button> relleno,
   altura mínima y mayúsculas, y el precio borroso terminaba siendo un botonazo
   que se comía la tarjeta. Con el elemento en el selector le ganamos. */
button.rh-pl, .rh-pl{
  --red:#FE3B1F; --ink:#3A3B3E; --muted:#9A9A9E;
  display:inline-flex; align-items:baseline; gap:3px; max-width:100%;
  font-family:'Montserrat',-apple-system,"Segoe UI",sans-serif; font-weight:800; font-size:1rem;
  color:var(--ink); text-transform:none; letter-spacing:normal; white-space:normal;
  background:0; border:0; padding:0; margin:0; min-width:0; min-height:0;
  box-shadow:none; cursor:pointer; line-height:1.2;
}
.rh-pl small{font-weight:500; font-size:.7rem; color:var(--muted)}
/* El desenfoque va SOLO sobre el número: "desde" y "MXN" quedan nítidos, así la
   fila se lee como un precio de verdad (fuera de foco) y no como un error. */
/* 2.8px: se distingue que hay un número (no parece un tachón), pero no se lee.
   Como el número es señuelo, el desenfoque es estética, no protección. */
.rh-pl__n{filter:blur(2.8px); user-select:none; -webkit-user-select:none}
.rh-pl__lock{align-self:center; opacity:.45; margin-left:3px; flex:0 0 auto}
.rh-pl:hover{background:0; color:var(--red)}
.rh-pl:hover .rh-pl__lock{opacity:1}
.rh-pl:focus-visible{outline:2px solid var(--red); outline-offset:3px; border-radius:4px}
/* Variante grande (ficha de producto): más cuerpo, más desenfoque. */
button.rh-pl--lg, .rh-pl--lg{font-size:1.3rem}
.rh-pl--lg .rh-pl__n{filter:blur(4.2px)}
.rh-pl--lg small{font-size:.72rem}
/* Texto solo para lectores de pantalla (el número borroso es decorativo). */
.rh-pl__sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---------------------------------------------------------------- Pop-up */
.rh-lg{
  --red:#FE3B1F; --ink:#3A3B3E; --body:#5F6064; --muted:#9A9A9E; --line:#ECEBE8; --soft:#F7F6F4; --paper:#fff;
  --head:'Montserrat',-apple-system,"Segoe UI",sans-serif; --font:'Roboto',-apple-system,"Segoe UI",sans-serif;
  position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:20px;
  font-family:var(--font); color:var(--body);
}
/* Sin esta regla el display:flex de arriba le gana al atributo [hidden]
   (misma especificidad, autor > user-agent) y el pop-up quedaría siempre visible. */
.rh-lg[hidden]{display:none}
.rh-lg *{box-sizing:border-box}
.rh-lg__scrim{position:absolute; inset:0; background:rgba(43,43,46,.55); backdrop-filter:blur(2px)}
.rh-lg__box{
  position:relative; width:min(420px,100%); max-height:calc(100vh - 40px); overflow-y:auto;
  background:var(--paper); border-radius:18px; padding:30px 28px 26px;
  box-shadow:0 40px 80px -30px rgba(43,43,46,.55);
  animation:rh-lg-in .22s ease-out;
}
@keyframes rh-lg-in{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
/* padding:0 + flex: el reset de Hello Elementor le pone padding a TODO botón y el
   signo quedaba corrido; el centrado no puede depender de la fuente. */
.rh-lg__x{position:absolute; top:12px; right:12px; width:34px; height:34px; padding:0; border-radius:9px;
  border:1px solid var(--line); background:var(--paper); color:var(--body); font-size:1.35rem; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer}
.rh-lg__x:hover{background:var(--paper); border-color:var(--red); color:var(--red)}
.rh-lg__title{font-family:var(--head); font-weight:800; letter-spacing:-.02em; color:var(--ink);
  font-size:1.25rem; line-height:1.2; margin:0 30px 8px 0}
.rh-lg__sub{font-size:.86rem; line-height:1.5; color:var(--body); margin:0 0 18px}
.rh-lg__tabs{display:flex; gap:6px; background:var(--soft); border-radius:11px; padding:4px; margin-bottom:18px}
.rh-lg__tab{flex:1; border:0; background:0; padding:9px 8px; border-radius:8px; cursor:pointer;
  font-family:var(--head); font-weight:700; font-size:.82rem; color:var(--muted)}
.rh-lg__tab:hover{background:rgba(255,255,255,.65); color:var(--ink)}
.rh-lg__tab.is-on{background:var(--paper); color:var(--ink); box-shadow:0 2px 8px -2px rgba(43,43,46,.18)}
.rh-lg__form label{display:block; font-size:.76rem; font-family:var(--head); font-weight:700; letter-spacing:.02em;
  color:var(--ink); margin-bottom:12px}
.rh-lg__form input{display:block; width:100%; margin-top:5px; padding:11px 13px; border:1.5px solid var(--line);
  border-radius:10px; font-family:var(--font); font-size:.92rem; color:var(--ink); background:var(--paper)}
.rh-lg__form input:focus{outline:0; border-color:var(--red); box-shadow:0 0 0 4px rgba(254,59,31,.13)}
.rh-lg__btn{width:100%; height:48px; border:0; border-radius:10px; background:var(--red); color:#fff; cursor:pointer;
  font-family:var(--head); font-weight:700; font-size:.92rem; margin-top:4px;
  box-shadow:0 10px 22px -12px var(--red); transition:background .15s, transform .15s}
.rh-lg__btn:hover{background:#DB2E13; transform:translateY(-1px)}
.rh-lg__btn[disabled]{opacity:.6; cursor:default; transform:none}
.rh-lg__link{display:inline-block; margin-top:12px; font-size:.78rem; color:var(--muted); text-decoration:underline}
.rh-lg__link:hover{color:var(--red)}
.rh-lg__hint{font-size:.76rem; color:var(--muted); margin:0 0 14px; line-height:1.45}
.rh-lg__err{font-size:.8rem; color:var(--red); margin:10px 0 0}
@media (prefers-reduced-motion:reduce){.rh-lg__box{animation:none}.rh-lg__btn{transition:none}}

/* ---- Enlace mágico y confirmación de correo ---- */
/* Separador "o" entre entrar con contraseña y pedir el enlace. */
.rh-lg__sep{display:flex; align-items:center; gap:12px; margin:16px 0 12px; color:#9A9A9E; font-size:.78rem}
.rh-lg__sep::before,.rh-lg__sep::after{content:''; flex:1; height:1px; background:#ECEBE8}

/* Botón secundario: mismo peso visual que el primario pero sin el relleno de
   marca, para que no compita con "Entrar". */
.rh-lg__ghost{width:100%; padding:12px 16px; border:1px solid #ECEBE8; border-radius:10px; background:#fff;
  color:#3A3B3E; font-family:inherit; font-weight:700; font-size:.9rem; cursor:pointer; transition:.16s}
.rh-lg__ghost:hover{border-color:#FE3B1F; color:#FE3B1F}

.rh-lg__h3{margin:0 0 6px; font-size:1.05rem; font-weight:800; color:#2B2B2E}
/* "Prefiero usar mi contraseña" es un <button> (cambia de panel, no navega):
   sin esto heredaba el fondo y el borde nativos del botón. */
button.rh-lg__link{border:0; background:0; padding:0; cursor:pointer; font-family:inherit}

/* Mensaje de resultado (enviado / reenviado). Nace oculto. */
.rh-lg__ok{margin:12px 0 0; padding:11px 13px; border-radius:10px; background:#EAF6EF; color:#1F7A46;
  font-size:.84rem; line-height:1.45}
.rh-lg__ok.is-bad{background:#FDE9E5; color:#C0392B}

/* Pantalla de "confirma tu correo": centrada, con el sobre como ancla visual. */
.rh-lg__box--pend{text-align:center}
.rh-lg__box--pend .rh-lg__btn{width:100%}
.rh-lg__sobre{font-size:2.6rem; line-height:1; margin-bottom:10px}