body { font-family: var(--font-main); color: var(--text-dark); background-color: var(--bg-light); overflow-x: hidden; } .navbar { background-color: var(--primary-color); padding: 0.8rem 0; box-shadow: var(--shadow-soft); transition: var(--transition-smooth); } .navbar.navbar-scrolled { padding: 0.5rem 0; box-shadow: var(--shadow-hover); } .nav-link { color: var(--white) !important; font-weight: 500; transition: var(--transition-smooth); } .nav-link:hover, .nav-link.active { color: var(--secondary-color) !important; } .navbar-brand { color: var(--white) !important; font-weight: 700; font-size: 1.2rem; display: flex; align-items: center;} .navbar-brand img { margin-right: 10px; border-radius: 5px; } .page-header { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: var(--white); padding: 120px 0 60px; text-align: center; } .hero-section { height: 100vh; background-size: cover !important; background-position: center !important; display: flex; align-items: center; color: var(--white); text-align: center; position: relative;} .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 76, 129, 0.75); z-index: 1; } .hero-content { position: relative; z-index: 2; width: 100%; } .hero-title { font-size: 3.5rem; font-weight: 700; margin-bottom: 1.5rem; animation: fadeInUp 1s ease; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);} .hero-subtitle { font-size: 1.25rem; margin-bottom: 2rem; animation: fadeInUp 1s ease 0.2s; opacity: 0; animation-fill-mode: forwards; text-shadow: 1px 1px 3px rgba(0,0,0,0.5);} .btn-primary-custom { background-color: var(--secondary-color); color: var(--white); border: none; padding: 0.75rem 1.5rem; font-weight: 600; border-radius: 50px; transition: var(--transition-smooth); } .btn-primary-custom:hover { background-color: var(--primary-color); color: var(--white); box-shadow: var(--shadow-hover); transform: translateY(-2px); } .btn-outline-custom { background-color: transparent; color: var(--white); border: 2px solid var(--white); padding: 0.75rem 1.5rem; font-weight: 600; border-radius: 50px; transition: var(--transition-smooth); } .btn-outline-custom:hover { background-color: var(--white); color: var(--primary-color); } .custom-card { border: none; border-radius: 12px; box-shadow: var(--shadow-soft); transition: var(--transition-smooth); overflow: hidden; margin-bottom: 2rem; height: 100%; background: var(--white); } .custom-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); } .custom-card img.prog-img { height: 250px; object-fit: contain; width: 100%; padding: 1rem; background-color: #000; } .staff-img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 4px solid var(--secondary-color); margin: 0 auto 1rem; background-color: #eee;} .module-box { background: var(--white); padding: 1.5rem; border-left: 4px solid var(--secondary-color); box-shadow: var(--shadow-soft); margin-bottom: 1rem; border-radius: 0 8px 8px 0; } .btn-whatsapp { background-color: #25D366; color: white; border: none; transition: var(--transition-smooth); } .btn-whatsapp:hover { background-color: #128C7E; color: white; transform: translateY(-2px); box-shadow: var(--shadow-hover); } .btn-cv { background-color: var(--text-dark); color: white; border: none; transition: var(--transition-smooth); } .btn-cv:hover { background-color: #1a252f; color: white; transform: translateY(-2px); box-shadow: var(--shadow-hover); } footer { background-color: var(--primary-color); color: var(--white); padding: 4rem 0 0; } footer h5 { font-weight: 600; margin-bottom: 1.5rem; color: var(--secondary-color); } footer a { color: var(--bg-light); text-decoration: none; transition: var(--transition-smooth); } footer a:hover { color: var(--secondary-color); } .footer-bottom { background-color: rgba(0,0,0,0.2); padding: 1rem 0; margin-top: 3rem; text-align: center; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; } .reveal.active { opacity: 1; transform: translateY(0); }