:root { --color-primary: #8B4513; --color-secondary: #CD7F32; --color-tertiary: #2E8B57; --color-accent: #A52A2A; --color-dark: #333333; --color-light: #F5F5DC; --color-white: #FFFFFF; --color-gray: #777777; --font-primary: 'Baloo 2', cursive; --font-secondary: 'Montserrat', sans-serif; --font-accent: 'Caveat', cursive; --transition: all 0.3s ease; --border-radius: 8px; --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1)} .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background-color: rgba(245, 245, 220, 0.95); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: var(--transition)} .header .container { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2rem} .logo a { display: flex; align-items: center} .logo h1 { font-size: 2.4rem; font-weight: 700; color: var(--color-primary); margin: 0; position: relative} .logo h1::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: linear-gradient(to right, var(--color-secondary), var(--color-tertiary)); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease} .logo:hover h1::after { transform: scaleX(1); transform-origin: left} .main-nav { display: flex; align-items: center} .nav-list { display: flex; gap: 2rem} .nav-list a { font-size: 1.6rem; font-weight: 500; color: var(--color-dark); position: relative; padding: 0.5rem 0} .nav-list a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--color-secondary); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease} .nav-list a:hover::after, .nav-list a.active::after { transform: scaleX(1); transform-origin: left} .nav-list a.active { color: var(--color-secondary)} .menu-toggle { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 21px; cursor: pointer} .menu-toggle span { display: block; height: 3px; width: 100%; background-color: var(--color-primary); transition: var(--transition)} .social-header { display: flex; gap: 1.5rem} .social-header a { color: var(--color-primary); font-size: 1.8rem; transition: var(--transition)} .social-header a:hover { color: var(--color-secondary); transform: translateY(-3px)} .hero { height: 100vh; min-height: 600px; background-image: url('../images/hero-bg.jpg'); background-size: cover; background-position: center; position: relative; display: flex; align-items: center; margin-top: 80px} .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); background-image: url('../images/pattern-overlay.png'); background-size: cover; background-blend-mode: multiply} .hero-content { position: relative; z-index: 2; text-align: center; color: var(--color-white); max-width: 800px; margin: 0 auto; animation: fadeIn 1s ease-out} .hero-content h2 { font-size: 6rem; font-weight: 700; margin-bottom: 2rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5)} .hero-content p { font-size: 2.4rem; margin-bottom: 3rem; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5)} .hero-buttons { display: flex; justify-content: center; gap: 2rem} .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center} .about-image { position: relative; border-radius: var(--border-radius); overflow: hidden} .about-image::before { content: ''; position: absolute; top: -20px; left: -20px; width: 100px; height: 100px; background-image: url('../images/pattern-corner.png'); background-size: contain; background-repeat: no-repeat; z-index: -1} .about-image::after { content: ''; position: absolute; bottom: -20px; right: -20px; width: 100px; height: 100px; background-image: url('../images/pattern-corner.png'); background-size: contain; background-repeat: no-repeat; transform: rotate(180deg); z-index: -1} .about-image img { border-radius: var(--border-radius); box-shadow: var(--box-shadow); transition: var(--transition)} .about-image:hover img { transform: scale(1.02)} .about-text p { margin-bottom: 2rem; color: var(--color-dark)} .about-specialties { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin: 3rem 0} .specialty { display: flex; align-items: center; gap: 1rem} .specialty i { font-size: 2.4rem; color: var(--color-secondary); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background-color: rgba(205, 127, 50, 0.1); border-radius: 50%; transition: var(--transition)} .specialty:hover i { background-color: var(--color-secondary); color: var(--color-white); transform: rotate(360deg)} .specialty span { font-weight: 500; color: var(--color-primary)} .music-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem} .music-card { background-color: var(--color-white); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); transition: var(--transition)} .music-card:hover { transform: translateY(-10px)} .music-card-image { position: relative; overflow: hidden; height: 0; padding-bottom: 100%} .music-card-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: var(--transition)} .music-card:hover .music-card-image img { transform: scale(1.1)} .play-track { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 60px; height: 60px; background-color: var(--color-secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-white); font-size: 2rem; opacity: 0; transition: var(--transition); z-index: 2} .music-card-image::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); opacity: 0; transition: var(--transition)} .music-card:hover .music-card-image::after { opacity: 1} .music-card:hover .play-track { opacity: 1; transform: translate(-50%, -50%) scale(1)} .play-track:hover { background-color: var(--color-primary); transform: translate(-50%, -50%) scale(1.1)} .music-card-content { padding: 2rem} .music-card-content h3 { font-size: 1.8rem; margin-bottom: 0.5rem; color: var(--color-primary)} .music-card-content p { font-size: 1.4rem; color: var(--color-gray)} .videos { background-color: rgba(46, 139, 87, 0.05)} .video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem} .video-card { background-color: var(--color-white); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); transition: var(--transition)} .video-card:hover { transform: translateY(-10px)} .video-thumbnail { position: relative; overflow: hidden; height: 0; padding-bottom: 56.25%} .video-thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: var(--transition)} .video-card:hover .video-thumbnail img { transform: scale(1.1)} .video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background-color: rgba(205, 127, 50, 0.8); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-white); font-size: 2rem; opacity: 0; transition: var(--transition); z-index: 2} .video-thumbnail::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); opacity: 0; transition: var(--transition)} .video-card:hover .video-thumbnail::after { opacity: 1} .video-card:hover .video-play-btn { opacity: 1} .video-play-btn:hover { background-color: var(--color-secondary); transform: translate(-50%, -50%) scale(1.1)} .video-info { padding: 2rem} .video-info h3 { font-size: 1.8rem; margin-bottom: 0.5rem; color: var(--color-primary)} .video-info p { font-size: 1.4rem; color: var(--color-gray)} .events-list { display: flex; flex-direction: column; gap: 2rem} .event-card { display: flex; align-items: center; background-color: var(--color-white); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); transition: var(--transition)} .event-card:hover { transform: translateX(10px)} .event-date { background-color: var(--color-secondary); color: var(--color-white); padding: 2rem; text-align: center; min-width: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center} .event-date .day { font-size: 3rem; font-weight: 700; line-height: 1} .event-date .month { font-size: 1.6rem; font-weight: 500} .event-details { padding: 2rem; flex-grow: 1} .event-details h3 { font-size: 2rem; margin-bottom: 1rem; color: var(--color-primary)} .event-location, .event-time { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; color: var(--color-gray)} .event-location i, .event-time i { color: var(--color-secondary)} .event-action { padding: 2rem} .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem} .gallery-item { position: relative; overflow: hidden; border-radius: var(--border-radius); height: 0; padding-bottom: 75%} .gallery-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: var(--transition)} .gallery-item::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); opacity: 0; transition: var(--transition)} .gallery-item:hover::after { opacity: 1} .gallery-item:hover img { transform: scale(1.1)} .shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem} .product-card { background-color: var(--color-white); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); transition: var(--transition)} .product-card:hover { transform: translateY(-10px)} .product-image { position: relative; overflow: hidden; height: 0; padding-bottom: 100%} .product-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: var(--transition)} .product-card:hover .product-image img { transform: scale(1.1)} .product-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--transition)} .product-card:hover .product-overlay { opacity: 1} .product-info { padding: 2rem; text-align: center} .product-info h3 { font-size: 1.8rem; margin-bottom: 1rem; color: var(--color-primary)} .product-price { font-size: 1.8rem; font-weight: 600; color: var(--color-secondary)} .newsletter { background-color: var(--color-primary); color: var(--color-white); position: relative; overflow: hidden} .newsletter::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../images/pattern-bg.png'); background-size: cover; opacity: 0.1} .newsletter-content { position: relative; z-index: 2; text-align: center; max-width: 600px; margin: 0 auto} .newsletter-content h2 { font-size: 3.6rem; margin-bottom: 1.5rem} .newsletter-content p { margin-bottom: 3rem; font-size: 1.8rem} .newsletter-form { display: flex; gap: 1rem; max-width: 500px; margin: 0 auto} .newsletter-form input { flex-grow: 1; padding: 1.2rem 2rem; border-radius: 30px; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); color: var(--color-white)} .newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.7)} .footer { background-color: var(--color-dark); color: var(--color-light); position: relative; padding: 8rem 0 2rem} .footer-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 20px; background-image: url('../images/footer-pattern.png'); background-repeat: repeat-x} .footer-content { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4rem; margin-bottom: 4rem} .footer-logo h2 { font-size: 2.4rem; color: var(--color-secondary); margin-bottom: 1.5rem} .footer-logo p { color: rgba(245, 245, 220, 0.7)} .footer-links h3, .footer-contact h3, .footer-social h3 { font-size: 1.8rem; color: var(--color-secondary); margin-bottom: 2rem; position: relative; display: inline-block} .footer-links h3::after, .footer-contact h3::after, .footer-social h3::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 40px; height: 2px; background-color: var(--color-secondary)} .footer-links ul { display: flex; flex-direction: column; gap: 1rem} .footer-links a { color: rgba(245, 245, 220, 0.7); transition: var(--transition)} .footer-links a:hover { color: var(--color-secondary); padding-left: 5px} .footer-contact p { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; color: rgba(245, 245, 220, 0.7)} .footer-contact i { color: var(--color-secondary)} .social-icons { display: flex; gap: 1.5rem} .social-icons a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: rgba(205, 127, 50, 0.1); border-radius: 50%; color: var(--color-secondary); font-size: 1.8rem; transition: var(--transition)} .social-icons a:hover { background-color: var(--color-secondary); color: var(--color-white); transform: translateY(-5px)} .footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid rgba(245, 245, 220, 0.1)} .footer-bottom p { color: rgba(245, 245, 220, 0.5); font-size: 1.4rem} .biography-content { padding: 6rem 0; background-color: var(--color-light)} .bio-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 4rem; margin-top: 2rem} .bio-text { background-color: var(--color-white); padding: 3rem; border-radius: var(--border-radius); box-shadow: var(--box-shadow)} .bio-section { margin-bottom: 3rem} .bio-section h2 { color: var(--color-primary); margin-bottom: 1.5rem; font-size: 1.8rem; border-bottom: 2px solid var(--color-secondary); padding-bottom: 0.5rem} .bio-section p { line-height: 1.8; color: var(--color-dark); text-align: justify} .bio-sidebar { display: flex; flex-direction: column; gap: 2rem} .bio-image, .bio-info, .bio-achievements { background-color: var(--color-white); padding: 2rem; border-radius: var(--border-radius); box-shadow: var(--box-shadow)} .bio-image img { width: 100%; border-radius: var(--border-radius)} .bio-info h3, .bio-achievements h3 { color: var(--color-primary); margin-bottom: 1.5rem; border-bottom: 2px solid var(--color-secondary); padding-bottom: 0.5rem} .bio-info ul, .bio-achievements ul { list-style: none} .bio-info li, .bio-achievements li { margin-bottom: 0.8rem; color: var(--color-dark)} .bio-info li strong { color: var(--color-primary)} .contact-section { padding: 6rem 0; background-color: var(--color-light)} .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 2rem} .contact-form-container, .contact-info { background-color: var(--color-white); padding: 3rem; border-radius: var(--border-radius); box-shadow: var(--box-shadow)} .contact-form-container h2, .contact-info h2 { color: var(--color-primary); margin-bottom: 2rem; font-size: 1.8rem; border-bottom: 2px solid var(--color-secondary); padding-bottom: 0.5rem} .form-group { margin-bottom: 1.5rem} .form-group label { display: block; margin-bottom: 0.5rem; color: var(--color-dark); font-weight: 600} .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.8rem; border: 2px solid #ddd; border-radius: var(--border-radius); font-size: 1rem; font-family: var(--font-secondary); transition: var(--transition)} .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1)} .btn-primary { background-color: var(--color-primary); color: var(--color-white); border: none; padding: 1rem 2rem; border-radius: var(--border-radius); font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 0.5rem; justify-content: center} .btn-primary:hover { background-color: var(--color-secondary); transform: translateY(-2px)} .info-item { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 2rem} .info-icon { background-color: var(--color-primary); color: var(--color-white); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0} .info-content h3 { color: var(--color-primary); margin-bottom: 0.5rem} .info-content p { color: var(--color-dark); line-height: 1.6} .social-contact { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #eee} .social-contact h3 { color: var(--color-primary); margin-bottom: 1rem} @media (max-width: 968px) { .bio-layout, .contact-layout { grid-template-columns: 1fr; gap: 3rem} .bio-text, .contact-form-container, .contact-info { padding: 2rem} } @media (max-width: 768px) { .biography-content, .contact-section { padding: 4rem 0} .bio-text, .contact-form-container, .contact-info { padding: 1.5rem} .bio-section h2, .contact-form-container h2, .contact-info h2 { font-size: 1.5rem} }