/* Mi cuenta (web/cuenta.html) y la tarjeta «Tu Círculo» (también en circulo.html). Usa los colores de estilos.css. */
.cuenta-pagina{padding-top:30px;padding-bottom:40px;max-width:760px}
.cuenta-pagina h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.cuenta-form{display:grid;gap:12px;margin-top:20px}.cuenta-form label{margin:0}.cuenta-form h2{margin-bottom:6px}
.cuenta-form .boton{justify-self:start;margin-top:6px}
.cuenta-form .estado:empty,.cuenta-pagina .estado:empty{display:none}
.cuenta-form .casilla{align-items:flex-start}
.confirmar-borrar{margin-top:6px;padding:16px 18px;border:1px solid #947e58;border-radius:12px;background:#ffffff08}
.confirmar-borrar .botones{margin:14px 0 0}
.cuenta-salir{margin-top:8px}
.tu-circulo{border-color:#947e58;background:linear-gradient(135deg,#2a2b3a,#191e2be6);margin-top:20px}
.tu-circulo h2{margin:0 0 14px}.tu-circulo .ceja{margin-bottom:12px}
.circulo-datos{display:grid;gap:10px;margin:0 0 14px}
.circulo-dato{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.circulo-dato dt{color:var(--suave);font-size:.82rem;min-width:9.5rem}
.circulo-dato dd{margin:0;color:var(--texto);font-size:1rem}
.tu-circulo .botones{margin:16px 0 0}.tu-circulo .estado:empty{display:none}
.tu-circulo .estado a{color:var(--oro)}
@media(max-width:600px){.cuenta-form .boton,.cuenta-pagina .botones .boton,.tu-circulo .boton{width:100%;justify-self:stretch}.cuenta-pagina{padding-top:10px}}