/* ============================================================ UNVEILING FOOTER — efecto "persiana revelada" CÓMO FUNCIONA: - El es el scroll container normal - El footer (fixed) vive en el fondo de la ventana, siempre visible al final del scroll porque el #main-content tiene padding-bottom igual a la altura del footer - El #main-content tiene background sólido + border-radius inferior + sombra, creando la ilusión de una "persiana" que se levanta - overflow: visible (nunca hidden) para no cortar el footer ============================================================ */ /* 1. Body: fondo oscuro = color del footer asomando */ html, body { margin: 0; background: #1b1f1a !important; overflow-x: hidden; } /* 2. Wrapper de contenido: flota como persiana sobre el footer */ #main-content { position: relative; z-index: 2; background: var(--cream, #f5f3ef); /* Esquinas inferiores redondeadas — el borde de la persiana */ border-bottom-left-radius: 32px; border-bottom-right-radius: 32px; /* Sombra profunda que separa del footer */ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 6px 16px rgba(0, 0, 0, 0.20); /* CRÍTICO: nunca hidden — el footer necesita verse detrás */ overflow: visible; } /* 3. Footer: fijo al fondo, DETRÁS del #main-content */ .footer { position: fixed !important; bottom: 0; left: 0; right: 0; z-index: 1; /* debajo del #main-content (z-index:2) */ width: 100%; } /* 4. Nav pública: siempre encima de todo */ .nav-public { position: sticky !important; top: 0; z-index: 100 !important; } /* 5. Línea sutil de "borde" en el fondo de la persiana */ #main-content::after { content: ''; position: absolute; bottom: -1px; left: 5%; right: 5%; height: 1px; background: linear-gradient( 90deg, transparent, rgba(0,0,0,0.12) 30%, rgba(0,0,0,0.12) 70%, transparent ); border-radius: 0 0 32px 32px; pointer-events: none; } /* 6. Responsive */ @media (max-width: 768px) { #main-content { border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; } }