/* --- CUSTOM EDITABLE STYLES --- */ /* Hero Image Redesign - Premium, Broad & Responsive */ /* 1. Target the actual Section found in the JS bundle */ section.relative.overflow-hidden.bg-black { display: flex !important; flex-direction: column !important; min-height: 100vh !important; /* Full height to be more impressive */ position: relative !important; overflow: hidden !important; justify-content: flex-start !important; /* Stack from top on mobile */ align-items: center !important; background: #0f172a !important; padding: 0 !important; } /* 2. The Broad Background (Blurred Image) */ section.relative.overflow-hidden.bg-black::before { content: "" !important; position: absolute !important; inset: -20px !important; background-image: url('hero-collage-DRWgISwt.jpg') !important; background-size: cover !important; background-position: center !important; filter: blur(45px) brightness(0.35) !important; /* Deeper blur for depth */ z-index: 0 !important; display: block !important; animation: fadeIn 1.5s ease-out !important; } /* 3. Force the image container to be RELATIVE to prevent overlap on mobile */ section.relative.overflow-hidden.bg-black > div.absolute.inset-0:first-child { position: relative !important; width: 100% !important; height: auto !important; min-height: 40vh !important; /* Image takes significant space */ z-index: 5 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 1rem 0 !important; } /* 4. Hide the existing dark overlay */ section.relative.overflow-hidden.bg-black .absolute.inset-0.bg-black\/40, section.relative.overflow-hidden.bg-black .absolute.inset-0.bg-black\/20 { display: none !important; } /* 5. The Hero Image (Complete & Sharp) */ section.relative.overflow-hidden.bg-black img[alt*="Pintecor"], section.relative.overflow-hidden.bg-black img[src*="hero-collage"] { position: relative !important; z-index: 6 !important; width: 94% !important; max-width: 1000px !important; height: auto !important; max-height: 45vh !important; object-fit: contain !important; border-radius: 16px !important; box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.9) !important; margin: 0 !important; display: block !important; animation: scaleIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* 6. Glassmorphism Text Container */ section.relative.overflow-hidden.bg-black .container-narrow { position: relative !important; z-index: 10 !important; background: rgba(255, 255, 255, 0.05) !important; /* Lighter glass */ backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; padding: 2.5rem 1.5rem !important; border-radius: 24px !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; width: 92% !important; max-width: 600px !important; text-align: center !important; margin: 1.5rem auto 3rem auto !important; box-shadow: 0 25px 50px rgba(0,0,0,0.5) !important; animation: slideUp 1s ease-out 0.4s both !important; min-height: auto !important; overflow: hidden !important; /* Ensure text stays inside */ } section.relative.overflow-hidden.bg-black h1 { color: #ffffff !important; font-size: 2.25rem !important; font-weight: 800 !important; line-height: 1.1 !important; margin-bottom: 1.25rem !important; text-shadow: 0 2px 15px rgba(0,0,0,0.6) !important; } section.relative.overflow-hidden.bg-black p { color: rgba(255, 255, 255, 0.95) !important; font-size: 1.15rem !important; line-height: 1.6 !important; max-width: 100% !important; } /* 7. Button Visibility Fixes */ section.relative.overflow-hidden.bg-black button { transition: all 0.3s ease !important; } /* "Nuestros servicios" button (usually the second button) */ section.relative.overflow-hidden.bg-black button:last-child { background: rgba(255, 255, 255, 0.2) !important; border: 1.5px solid rgba(255, 255, 255, 0.6) !important; color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important; } section.relative.overflow-hidden.bg-black button:last-child:hover { background: rgba(255, 255, 255, 0.3) !important; transform: translateY(-2px) !important; } /* 8. Desktop Adjustments for Amplitud & Importance */ @media (min-width: 1024px) { section.relative.overflow-hidden.bg-black { flex-direction: row !important; /* Image Left, Text Right */ padding: 0 !important; gap: 0 !important; justify-content: center !important; min-height: 60vh !important; max-height: none !important; /* Remove cap to prevent clipping */ } section.relative.overflow-hidden.bg-black > div.absolute.inset-0:first-child { position: relative !important; /* Follow flex flow instead of absolute stretching */ width: 50% !important; height: auto !important; min-height: 60vh !important; padding: 0 !important; background: transparent !important; overflow: visible !important; inset: auto !important; /* Reset JS inset */ } section.relative.overflow-hidden.bg-black img[alt*="Pintecor"] { width: 100% !important; height: auto !important; max-height: 60vh !important; /* Crucial: ensures image fits the height perfectly */ max-width: none !important; object-fit: contain !important; /* Complete image guaranteed */ object-position: center !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; display: block !important; } section.relative.overflow-hidden.bg-black .container-narrow { width: 50% !important; text-align: left !important; margin: 0 !important; padding: 3rem 5% !important; max-width: 650px !important; background: transparent !important; backdrop-filter: none !important; border: none !important; box-shadow: none !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } section.relative.overflow-hidden.bg-black h1 { font-size: 2.75rem !important; word-wrap: break-word !important; overflow-wrap: break-word !important; hyphens: auto !important; line-height: 1.2 !important; } section.relative.overflow-hidden.bg-black p { font-size: 1.05rem !important; margin-top: 0.75rem !important; } } /* 6. Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Blog Thumbnail Fixes */ article .relative.h-56 { height: auto !important; aspect-ratio: 16 / 9; background-color: #f8fafc; display: flex !important; align-items: center !important; justify-content: center !important; } .dark article .relative.h-56 { background-color: #1e293b; } article .relative.h-56 img { object-fit: contain !important; width: 100% !important; height: 100% !important; }