/* Generado por docs/marca/siteflow/gen_intro.py: no editar a mano. Entrada animada de SiteFlow 4D (templates/auth/_intro.php). */
.sf-intro{display:flex;align-items:center;justify-content:center;gap:14px}
.sf-simbolo{width:76px;height:auto;flex-shrink:0;overflow:visible}
.sf-textos{display:flex;flex-direction:column;gap:6px}
.sf-nombre{display:block;height:28px;width:auto}
.sf-lema{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#cbd5e1;line-height:1}
/* las tres franjas del terreno entran desde la izquierda, una tras otra */
.sf-f{opacity:0;transform:translateX(-60px);animation:sf-franja .55s cubic-bezier(.2,.9,.25,1.15) forwards}
.sf-f1{animation-delay:.05s}.sf-f2{animation-delay:.2s}.sf-f3{animation-delay:.35s}
@keyframes sf-franja{to{opacity:1;transform:none}}
/* el nombre se descubre hacia la derecha y el lema aparece lento debajo */
.sf-nombre{clip-path:inset(0 100% 0 0);animation:sf-nombre .8s cubic-bezier(.2,.8,.2,1) .8s forwards}
@keyframes sf-nombre{to{clip-path:inset(0 0 0 0)}}
.sf-lema{opacity:0;transform:translateY(4px);animation:sf-lema 1.4s ease-out 1.5s forwards}
@keyframes sf-lema{to{opacity:1;transform:none}}
@media (max-width:420px){.sf-simbolo{width:60px}.sf-nombre{height:22px}.sf-lema{font-size:10px}}
@media (prefers-reduced-motion:reduce){.sf-f,.sf-nombre,.sf-lema{animation:none;opacity:1;transform:none;clip-path:none}}