/* =====================================================================
   LETO — modal global (reutilizado por valores, timeline, etc.).
   ===================================================================== */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: rgba(18,18,18,.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: modalIn .25s var(--ease) both; }
.modal[hidden] { display: none; }
@keyframes modalIn { from { opacity: 0; } to { opacity: 1; } }
.modal__panel { position: relative; display: flex; flex-direction: column; width: min(560px, 100%); max-height: 86vh; overflow: hidden; background: var(--leto-paper); color: var(--leto-ink); border-radius: 14px; }
.modal__inner { overflow-y: auto; padding: clamp(2rem, 1rem + 3vw, 46px) clamp(1.75rem, 1rem + 3vw, 46px) clamp(1.75rem, 1rem + 2.5vw, 38px); }
.modal__bar { flex: 0 0 auto; height: 5px; }
.modal__close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(45,45,45,.2); background: transparent; font-size: 20px; font-weight: 300; line-height: 1; color: var(--leto-ink); display: grid; place-items: center; transition: background .25s, color .25s, border-color .25s; }
.modal__close:hover { background: var(--leto-ink); color: #fff; border-color: var(--leto-ink); }
.modal__eyebrow { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--leto-gray); margin-bottom: .6rem; }
.modal__eyebrow:empty { display: none; }
.modal__title { font-size: clamp(1.4rem, 1rem + 1.4vw, 26px); font-weight: 500; line-height: 1.1; margin-bottom: 1.1rem; }
.modal__body p { font-size: 15.5px; line-height: 1.6; color: #44463e; }
.modal__body p + p { margin-top: .9rem; }