(aqui abajo) mueve el contenido 16px MAS ALLA del borde derecho de la pantalla durante el primer frame de la animacion. La PRIMERA correccion le puso overflow-x:hidden al -- eso SI recorta el sobrante, pero introdujo un bug distinto y peor: en Safari de iPhone (y algunos Android), poner cualquier `overflow` que no sea `visible` en / puede romper el calculo de `position: fixed` de sus descendientes -- la barra inferior fija empezaba a "saltar"/temblar de nuevo, a veces la pagina entera. Por eso el contenedor de recorte NO va en -- va en un

propio que envuelve SOLO a

(ver base.html, .ibri-slide-viewport), dejando / completamente sin tocar. */ .ibri-slide-viewport { overflow-x: hidden; } /* --- Deslizamiento lateral entre pestanas del menu inferior ------------

es lo unico que cambia entre pestanas (header/nav siguen fijos), asi que aqui se aplica la animacion de ENTRADA (la pagina vieja ya no esta -- fue una recarga real, no se puede animar su salida). La direccion la decide el SERVIDOR (ver base.html, ?from=N) para que la clase ya venga en el primer HTML -- asi no hay parpadeo. Desplazamiento chico (16px) + fundido -- elegante y sutil, no un movimiento grande tipo diapositiva. */ main.ibri-tab-slide-right { animation: ibri-tab-slide-in-right 0.26s cubic-bezier(.4,0,.2,1); } main.ibri-tab-slide-left { animation: ibri-tab-slide-in-left 0.26s cubic-bezier(.4,0,.2,1); } @keyframes ibri-tab-slide-in-right { from { transform: translateX(16px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes ibri-tab-slide-in-left { from { transform: translateX(-16px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } } @media (prefers-reduced-motion: reduce) { main.ibri-tab-slide-right, main.ibri-tab-slide-left { animation: none; } } /* Franja deslizable horizontal (chips de categorias / navegacion) en movil: oculta la barra de scroll para un look de app, pero deja un degradado a la derecha para que sea obvio que hay mas contenido (antes se veia "cortado" sin ninguna pista de que se podia deslizar). El degradado se oculta solo si el contenido ya cabe completo (scroll-x-fade--end). */ .scroll-x-wrap { position: relative; } .scroll-x-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 2.5rem; pointer-events: none; background: linear-gradient(to right, transparent, rgba(248, 249, 250, 0.95)); } .scroll-x-wrap.scroll-x-fade--end::after { display: none; } @media (min-width: 768px) { /* En md+ el nav pasa a flex-wrap (ya no hace scroll horizontal). */ .scroll-x-wrap::after { display: none; } } .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .scroll-x::-webkit-scrollbar { display: none; } /* --- Toggle Manual/Automatico de precio (servicios) ----------------------- */ .price-mode-tab { color: #64748b; /* slate-500 */ transition: background-color 0.15s ease, color 0.15s ease; } .price-mode-tab--active { background: #ffffff; color: var(--ibri-cyan-deep); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12); } /* --- Selector de metodo de pago (checkout) -------------------------------- */ .method-btn { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; border-radius: 1rem; border: 2px solid #e2e8f0; /* slate-200 */ background: #fff; padding: 1rem 0.5rem; font-size: 0.85rem; font-weight: 600; color: #64748b; /* slate-500 */ cursor: pointer; } .method-btn:hover:not(:disabled) { border-color: #99f6e4; color: #0f766e; } .method-btn--active { border-color: var(--ibri-cyan-deep); background: #ecfeff; color: var(--ibri-cyan-deep); } /* --- Vistas de transicion entre paginas (View Transitions API) ----------- Progresiva: si el navegador la soporta, las navegaciones completas (no son SPA) hacen un fundido suave en vez de "salto" duro. Si no la soporta, este bloque simplemente se ignora -- cero riesgo, cero JS. */ @view-transition { navigation: auto; } /* --- Hoja inferior en movil para