*{margin: 0;padding: 0;box-sizing: border-box} img{image-rendering: -webkit-optimize-contrast;image-rendering: crisp-edges;image-rendering: optimize-quality;backface-visibility: hidden;transform: translateZ(0);loading: lazy;decoding: async;max-width: 100%;height: auto} .logo{aspect-ratio: 1 / 1;width: 120px;height: 120px} .product-image{aspect-ratio: 1 / 1;width: 300px;height: 300px} body{font-family: 'Roboto', sans-serif;background: #f0f2f5;color: #333;line-height: 1.6} .container{width: 90%;max-width: 1200px;margin: 0 auto;padding: 0 15px;contain: layout style} header{background: #1d2c53;color: #fff;padding: 20px 0;text-align: center;box-shadow: 0 2px 4px rgba(0,0,0,0.1);contain: layout style} .header-container{display: flex;flex-direction: column;align-items: center} .header-title-container{display: flex;align-items: center;gap: 20px;margin-bottom: 15px} header .logo{max-width: 80px;height: auto} header h1{font-size: 3rem;margin: 0;white-space: nowrap} @media (max-width: 768px){.header-title-container{flex-direction: column;gap: 10px} header h1{font-size: 2.2rem;text-align: center;white-space: normal} header .logo{max-width: 60px} } header .logo{max-width: 120px;margin-bottom: 10px} header h1{font-size: 2rem;margin-bottom: 10px} .nav-toggle-btn{display: none;background: #ff6600;color: #fff;border: none;padding: 12px;border-radius: 8px;cursor: pointer;transition: background-color 0.3s ease, box-shadow 0.3s ease;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);flex-direction: column;justify-content: center;align-items: center;gap: 15px;width: 50px;height: 50px;position: relative} .nav-toggle-btn:hover{background: #e65c00;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2)} .nav-toggle-btn:active{transform: scale(0.95);transition: transform 0.1s} .hamburger-line{display: block;width: 28px;height: 4px;background: #4a90e2;position: relative;transition: transform 0.3s ease, box-shadow 0.3s ease;border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;animation: oceanWave 2s ease-in-out infinite} .hamburger-line::before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(90deg, #2980b9 0%, #3498db 25%, #5dade2 50%, #3498db 75%, #2980b9 100%);border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;animation: waveFlow 3s ease-in-out infinite} .hamburger-line::after{content: '';position: absolute;top: 1px;left: 2px;width: 16px;height: 2px;background: rgba(255, 255, 255, 0.3);border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;animation: waveHighlight 2.5s ease-in-out infinite} @keyframes oceanWave{0%, 100%{transform: scaleY(1) scaleX(1);border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%} 25%{transform: scaleY(1.2) scaleX(0.9);border-radius: 60% 40% 60% 40% / 70% 30% 70% 30%} 50%{transform: scaleY(0.8) scaleX(1.1);border-radius: 40% 60% 40% 60% / 30% 70% 30% 70%} 75%{transform: scaleY(1.1) scaleX(0.95);border-radius: 55% 45% 55% 45% / 65% 35% 65% 35%} } @keyframes waveFlow{0%, 100%{background: linear-gradient(90deg, #2980b9 0%, #3498db 25%, #5dade2 50%, #3498db 75%, #2980b9 100%)} 50%{background: linear-gradient(90deg, #5dade2 0%, #2980b9 25%, #3498db 50%, #5dade2 75%, #2980b9 100%)} } @keyframes waveHighlight{0%, 100%{opacity: 0.3;transform: translateX(0px)} 50%{opacity: 0.6;transform: translateX(2px)} } .hamburger-line:nth-child(1){animation-delay: 0s} .hamburger-line:nth-child(2){animation-delay: 0.4s} .hamburger-line:nth-child(3){animation-delay: 0.8s} .nav-menu{list-style: none;display: flex;gap: 20px;flex-wrap: wrap;justify-content: center} .nav-menu li a{color: #fff;text-decoration: none;font-weight: 500;transition: color 0.3s} .nav-menu li a:hover, .nav-menu li a:focus{color: #f1c40f} @media (max-width: 768px){.nav-toggle-btn{display: block;margin: 15px auto 10px} .nav-menu{display: none;background: #2c3e50;border-radius: 8px;padding: 15px;flex-direction: column;gap: 10px;box-shadow: 0 4px 8px rgba(0,0,0,0.2);margin-top: 10px} .nav-menu.show{display: flex} .nav-menu li{width: 100%} .nav-menu li a{display: block;padding: 12px 20px;background: #34495e;border-radius: 6px;text-align: center;transition: all 0.3s ease} .nav-menu li a:hover, .nav-menu li a:focus{background: #f1c40f;color: #2c3e50;transform: translateY(-2px)} } .section{padding: 60px 0;text-align: center} .section h2{font-size: 2rem;margin-bottom: 20px;color: #1d2c53} .section p{max-width: 800px;margin: 0 auto 20px;font-size: 1.1rem;line-height: 1.8} .cta{display: inline-block;padding: 15px 30px;background: #ff6600;color: #fff;border-radius: 4px;text-decoration: none;font-size: 1.1rem;transition: background-color 0.3s} .cta:hover, .cta:focus{background: #e65c00} form{max-width: 600px;margin: 0 auto;background: #fff;padding: 30px;border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,0.1)} .form-group{margin-bottom: 15px;text-align: left} .form-group label{display: block;margin-bottom: 5px;font-weight: 500} form input, form textarea{width: 100%;padding: 12px;border: 1px solid #ccc;border-radius: 4px;transition: border-color 0.3s} form input:focus, form textarea:focus{border-color: #1d2c53;outline: none} form button{width: 100%;padding: 12px;background: #1d2c53;color: #fff;border: none;border-radius: 4px;cursor: pointer;font-size: 1.1rem;transition: background-color 0.3s} form button:hover, form button:focus{background: #1d2c53} .blog-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 20px;margin-top: 30px} .post{background: #fff;padding: 20px;border-radius: 10px;box-shadow: 0 2px 6px rgba(0,0,0,0.1);transition: transform 0.3s, box-shadow 0.3s} .post:hover, .post:focus-within{transform: translateY(-5px);box-shadow: 0 4px 12px rgba(0,0,0,0.15)} .post h3{margin-bottom: 10px;font-size: 1.5rem;color: #1d2c53} .post .post-date{font-size: 0.9rem;color: #777;margin-bottom: 10px} .post a{display: inline-block;margin-top: 10px;color: #1d2c53;text-decoration: none;font-weight: 500;transition: color 0.3s} .post a:hover, .post a:focus{color: #1d2c53;text-decoration: underline} .mapa{display: flex;justify-content: center;margin-top: 20px} .mapa iframe{width: 100%;max-width: 600px;height: 450px;border: 0;border-radius: 8px} .product-list{display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 30px;margin-top: 30px} .product-item{background: #fff;padding: 25px;border-radius: 10px;box-shadow: 0 4px 15px rgba(0,0,0,0.1);text-align: left;transition: transform 0.3s ease-in-out} .product-image{width: 100%;max-width: 300px;height: 300px;aspect-ratio: 1 / 1;object-fit: cover;border-radius: 8px;margin-bottom: 15px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);image-rendering: -webkit-optimize-contrast;image-rendering: crisp-edges;image-rendering: optimize-quality;will-change: transform;backface-visibility: hidden;transform: translateZ(0)} .product-item:hover{transform: translateY(-10px)} .product-item h3{color: #1d2c53;font-size: 1.8rem;margin-bottom: 15px} .product-item p{font-size: 1rem;line-height: 1.7;margin-bottom: 15px;max-width: none} .product-item ul{list-style: none;padding: 0;margin-bottom: 20px} .product-item ul li{margin-bottom: 8px;color: #555;font-size: 0.95rem} .product-item .cta{display: inline-block;margin-top: 10px;padding: 10px 20px;font-size: 1rem} footer{background: #1d2c53;color: #fff;text-align: center;padding: 20px 0;font-size: 0.9rem} .back-link{display: inline-block;margin-top: 20px;color: #1d2c53;text-decoration: none;font-weight: 500;transition: color 0.3s} .back-link:hover, .back-link:focus{color: #1d2c53} @media (max-width: 768px){nav ul{flex-direction: column;gap: 10px} }