/* Final small-screen and keyboard refinements. The approved visual design stays intact. */
.hero-grid>*,.dialog-head h2{min-width:0}
.dialog{overscroll-behavior:contain}
.dialog-head{align-items:flex-start;gap:16px}
.dialog-head h2{margin:0;line-height:1.15;overflow-wrap:break-word}
.dialog-head .close{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}
.faq summary{min-height:44px;display:list-item;align-content:center}
.reader-choice:focus-visible{outline:3px solid #8b641c;outline-offset:3px}
.reader-toolbar>a{min-height:44px;display:inline-flex;align-items:center}
.footer-links a{width:fit-content;max-width:100%;overflow-wrap:anywhere}
@media(min-width:1001px){.menu>a:not(.btn){display:inline-flex;align-items:center;min-height:44px}}
@media(max-width:1000px){
 .menu{max-height:calc(100vh - 115px);max-height:calc(100dvh - 115px);overflow-y:auto;overscroll-behavior:contain}
}
@media(max-width:900px){#muestras .sample-copy{width:100%;max-width:620px;justify-self:center}.sample-controls{max-width:none}}
@media(max-width:520px){
 .dialog-head h2{font-size:1.65rem}
 .dialog-head{gap:12px}
 .hero-actions{gap:10px}
 .hero-actions .btn{min-height:48px;line-height:1.35}
 .footer-links{gap:4px}.footer-links a{display:inline-flex;align-items:center;min-height:40px}
 .copyright span{display:block}.copyright span+span{margin-top:8px}
}
@media(max-height:500px) and (max-width:1000px){
 .nav{min-height:72px;padding-top:10px;padding-bottom:10px}
 .brand-symbol{height:48px;width:46px}
 .menu{max-height:calc(100vh - 88px);max-height:calc(100dvh - 88px)}
 .dialog-head{padding-top:12px;padding-bottom:12px}
 .dialog-head h2{font-size:1.5rem}
}