.lector-cuenta {
  --c-espacio: 1rem;
  --c-base: 1rem;
  --c-pequeno: .875rem;
  --c-titulo: clamp(1.6rem, 2.5vw, 2.25rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "intro panel";
  gap: clamp(2rem, 6vw, 6rem);
  padding-block: clamp(2rem, 5vw, 5rem);
  font-family: var(--sans);
  font-size: var(--c-base);
}
.lector-cuenta [hidden] { display: none !important; }
.lector-cuenta h1 { font-family: var(--serif); font-size: var(--c-titulo); line-height: 1.16; margin: var(--c-espacio) 0; }
.lector-cuenta h2 { font-size: 1.4rem; margin: 0 0 var(--c-espacio); }
.lector-cuenta h3 { font-size: 1.125rem; margin: 0; }
.lector-cuenta p { margin: var(--c-espacio) 0; }
.cuenta-intro { grid-area: intro; max-width: 31rem; }
.cuenta-pasos { list-style: none; padding: 0; margin: 2rem 0; }
.cuenta-pasos li { padding-block: var(--c-espacio); border-bottom: var(--regla-fina); }
.cuenta-pasos span { color: var(--rojo-oscuro); margin-right: var(--c-espacio); font-variant-numeric: tabular-nums; }
.cuenta-nota, .cuenta-ayuda { font-size: var(--c-pequeno); color: var(--tinta-suave); }
.cuenta-panel { grid-area: panel; align-self: start; padding: clamp(1.25rem, 3vw, 2.5rem); border: var(--regla-fina); background: #fafafa; }
.lector-cuenta label { display: block; font-weight: 600; margin-bottom: .5rem; }
.lector-cuenta input[type=email], .lector-cuenta input[type=text] { width: 100%; min-height: 3rem; border: 1px solid #758d99; border-radius: 0; padding: .75rem; font: inherit; background: white; color: #0c0c0c; }
.lector-cuenta #cuenta-codigo { letter-spacing: .3em; font-size: 1.5rem; }
.lector-cuenta .cuenta-consentimiento { display: flex; align-items: flex-start; gap: .75rem; font-size: var(--c-pequeno); font-weight: 400; margin: 1.5rem 0; }
.cuenta-consentimiento input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; accent-color: var(--rojo-oscuro); }
.lector-cuenta a:not(.cuenta-boton) { text-decoration: underline; text-underline-offset: .2em; }
.cuenta-boton { display: block; width: 100%; border: 0; border-radius: 0; padding: var(--c-espacio); background: var(--rojo-oscuro); color: white; font: 600 var(--c-base) var(--sans); text-align: center; cursor: pointer; min-height: 3rem; }
.cuenta-boton:hover { background: #801122; }
.lector-cuenta button:disabled { opacity: .6; cursor: wait; }
.cuenta-enlace { display: block; margin-top: .75rem; min-height: 2.75rem; padding: .5rem 0; background: none; border: 0; text-decoration: underline; color: var(--tinta); font: inherit; cursor: pointer; text-align: left; }
.lector-cuenta :focus-visible { outline: 3px solid var(--tinta-suave); outline-offset: 3px; }
.cuenta-producto { padding: 1.5rem 0; border-top: var(--regla-fina); }
.cuenta-producto p { margin: .5rem 0; font-size: var(--c-pequeno); }
.cuenta-producto .cuenta-precio { font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cuenta-precio span { font-size: var(--c-pequeno); font-weight: 400; }
.cuenta-producto strong { font-size: var(--c-pequeno); }
.cuenta-producto .cuenta-comprar { margin-top: var(--c-espacio); text-decoration: none; }
#cuenta-identidad, #cuenta-destino { overflow-wrap: anywhere; }
#cuenta-estado:not(:empty) { padding: .75rem; margin: 0 0 1.5rem; background: var(--caja); }
#cuenta-estado[data-error="true"] { color: #8b1321; background: #fcebee; }
@media (max-width: 720px) {
  .lector-cuenta {
    grid-template-columns: 1fr;
    grid-template-areas: "panel" "intro";
    gap: 1.5rem;
    padding-top: .75rem;
  }
  .cuenta-pasos { display: none; }
  .cuenta-intro .cuenta-nota { margin-bottom: 0; }
}