[data-flash].flash-leaving,[data-transient-alert].flash-leaving{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
[data-flash]{animation:flash-enter .38s cubic-bezier(.2,.8,.2,1) var(--flash-delay,0ms) both,flash-auto-hide .35s ease 4.8s forwards!important}
[data-transient-alert]{animation:alert-auto-hide .35s ease 6s forwards!important}
@keyframes flash-auto-hide{to{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes alert-auto-hide{to{opacity:0;visibility:hidden;max-height:0;padding-block:0;margin-block:0;border-width:0;overflow:hidden}}


/* FRont.pe - Logo libre, simétrico y visible, sin alterar el resto de la web.
   Fuente: el parche de animación que ya funcionaba.
   Se evita la superposición entre la FR y el texto.
*/

/* Aplicar solamente a la marca que contiene el isotipo FR. */
a.brand:has(> .brand-mark){
    display:inline-flex !important;
    align-items:center !important;
    gap:0 !important;
    overflow:visible !important;
    vertical-align:middle !important;
}

/* El isotipo tiene 3px de aire interior para no cortar sus trazos. */
a.brand > .brand-mark,
.install-brand > .brand-mark {
    box-sizing:border-box !important;
    flex:0 0 48px !important;
    width:48px !important;
    height:48px !important;
    padding:3px !important;
    display:grid !important;
    place-items:center !important;
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    outline:0 !important;
    overflow:visible !important;
    clip-path:none !important;
}
a.brand > .brand-mark::before,
a.brand > .brand-mark::after,
.install-brand > .brand-mark::before,
.install-brand > .brand-mark::after{
    content:none !important;
}
a.brand > .brand-mark > img,
.install-brand > .brand-mark > img{
    box-sizing:border-box !important;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    mix-blend-mode:difference !important;
    filter:none !important;
    clip-path:none !important;
}

/* ont.pe queda al lado de la FR sin invadir el area del dibujo. */
a.brand > .brand-word,
.topbar a.brand > .brand-word,
.editor-bar a.brand > .brand-word,
.auth-panel a.brand > .brand-word,
.chatgpt-oauth-brand > .brand-word {
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    line-height:1.07 !important;
    white-space:nowrap !important;
    letter-spacing:-.035em !important;
    margin-left:-4px !important;
    padding-right:3px !important;
    align-self:center !important;
    overflow:visible !important;
}

/* Solo en la entrada, ont.pe aparece letra a letra. Se conserva el resultado final. */
a.brand > .brand-word {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    animation: frontpe-word-type-in 1.05s steps(6,end) .22s 1 both;
    will-change: clip-path;
}
@keyframes frontpe-word-type-in {
    from { -webkit-clip-path:inset(0 100% 0 0); clip-path:inset(0 100% 0 0) }
    to { -webkit-clip-path:inset(0 -4px 0 0); clip-path:inset(0 -4px 0 0) }
}
@media (max-width:720px) {
    a.brand > .brand-mark,
    .install-brand > .brand-mark{
        flex-basis:44px !important;
        width:44px !important;
        height:44px !important;
        padding:3px !important;
    }
}
@media (prefers-reduced-motion:reduce) {
    a.brand > .brand-word {
        animation:none !important;
        -webkit-clip-path:none !important;
        clip-path:none !important;
        will-change:auto !important;
    }
}