/* ===== PROCESO CONSTRUCTIVO — SCROLLYTELLING ===== */ .proceso-section { position: relative; min-height: 900vh; background: #0d0d0f; } .proceso-canvas-wrapper { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; } #house-canvas { display: block; width: 100%; height: 100%; will-change: contents; image-rendering: auto; } /* ===== INTRO OVERLAY ===== */ .proceso-intro { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; pointer-events: none; z-index: 10; padding: 2rem; transition: opacity 0.5s ease, visibility 0.5s ease; } .proceso-intro.hidden { opacity: 0; visibility: hidden; } .proceso-eyebrow { font-family: 'Outfit', sans-serif; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: #e8623a; margin-bottom: 1rem; display: block; text-shadow: 0 0 18px rgba(0,0,0,1), 0 0 6px rgba(0,0,0,1); } .proceso-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 600; line-height: 1.1; margin-bottom: 1.5rem; color: #fff; text-shadow: 0 0 24px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,1), 0 2px 4px rgba(0,0,0,0.9); } .proceso-title em { font-style: italic; color: #f0dcc8; } .proceso-sub { font-family: 'Outfit', sans-serif; font-size: clamp(0.95rem, 1.5vw, 1.15rem); font-weight: 300; color: #fff; max-width: 480px; line-height: 1.6; text-shadow: 0 0 20px rgba(0,0,0,1), 0 0 6px rgba(0,0,0,1); } .proceso-scroll-hint { display: block; margin-top: 2.5rem; font-size: 1.6rem; color: rgba(255,255,255,0.35); animation: proceso-bounce 1.8s ease-in-out infinite; } @keyframes proceso-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } } /* ===== SINGLE CARD OVERLAY (desktop + mobile, appended to by JS) ===== */ .material-card-overlay { position: fixed; bottom: 10vh; left: 50%; transform: translateX(-50%) translateY(40px); width: min(520px, 90vw); background: rgba(10, 10, 14, 0.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.09); border-radius: 18px; padding: 1.8rem 2.2rem; color: #fff; opacity: 0; pointer-events: none; z-index: 9999; /* enter from below → center */ transition: opacity 0.45s ease, transform 0.45s ease; } .material-card-overlay.visible { opacity: 1; transform: translateX(-50%) translateY(0); } .material-card-overlay.exiting { opacity: 0; transform: translateX(-50%) translateY(-30px); transition: opacity 0.3s ease, transform 0.3s ease; } .material-card-overlay .material-card-number { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: #c1440e; font-family: 'Outfit', sans-serif; font-size: 0.8rem; font-weight: 600; color: #fff; margin-bottom: 0.9rem; } .material-card-overlay .material-card-layer { font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; font-weight: 600; line-height: 1.1; margin-bottom: 0.5rem; color: #fff; } .material-card-overlay .material-card-desc { font-family: 'Outfit', sans-serif; font-size: 0.92rem; font-weight: 300; color: rgba(255,255,255,0.7); line-height: 1.6; } /* Mobile tweaks */ @media (max-width: 768px) { .proceso-title { font-size: 2.4rem; } .proceso-sub { font-size: 0.95rem; } .material-card-overlay { width: min(360px, 92vw); padding: 1.2rem 1.4rem; bottom: 8vh; } .material-card-overlay .material-card-layer { font-size: 1.4rem; } .material-card-overlay .material-card-desc { font-size: 0.85rem; } } /* Backdrop fallback */ @supports not (backdrop-filter: blur(1px)) { .material-card-overlay { background: rgba(10, 10, 14, 0.95); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .proceso-scroll-hint { animation: none; } .proceso-intro { transition: none; } .material-card-overlay { transition: none; } }