@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap";:root{--primary-blue:#15327b;--secondary-blue:#0b1f52;--primary-green:#00882e;--whatsapp-green:#1fd268;--primary-yellow:#ffc20e;--bg-white:#fff;--text-dark:#15327b;--text-gray:#6b7280;--button-hover-blue:#1a42a0;--button-hover-green:#1ca553;--card-bg:#15327b}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-white);color:var(--text-dark);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Montserrat,sans-serif}.app-container{flex-direction:column;align-items:center;min-height:100vh;display:flex;position:relative;overflow:hidden}.bg-image{object-fit:cover;object-position:top center;z-index:-1;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.main-content{z-index:1;flex-direction:column;align-items:center;width:100%;max-width:800px;padding:40px 20px;display:flex}.logo-container{margin-bottom:40px;animation:.8s ease-out fadeInDown}.logo-container img{max-width:250px;height:auto}.avatar-preview{margin-bottom:30px;animation:.8s cubic-bezier(.175,.885,.32,1.275) scaleIn}.avatar-preview img{object-fit:contain;border-radius:50%;width:280px;height:280px;transition:transform .3s;box-shadow:0 10px 30px #0000001a}.avatar-preview img:hover{transform:scale(1.02)}.title{color:var(--primary-blue);text-align:center;text-transform:uppercase;letter-spacing:-.5px;margin-bottom:20px;font-size:36px;font-weight:900;animation:.8s ease-out .2s both fadeInUp}.btn-primary{background-color:var(--primary-blue);color:#fff;cursor:pointer;text-transform:uppercase;border:none;border-radius:30px;margin-bottom:40px;padding:15px 40px;font-family:inherit;font-size:16px;font-weight:700;transition:all .3s;animation:.8s ease-out .3s both fadeInUp;box-shadow:0 4px 15px #15327b4d}.btn-primary:hover{background-color:var(--button-hover-blue);transform:translateY(-2px);box-shadow:0 6px 20px #15327b66}.steps-container{flex-wrap:wrap;justify-content:center;gap:20px;width:100%;margin-bottom:30px;animation:.8s ease-out .4s both fadeInUp;display:flex}.step-card{background-color:var(--card-bg);color:#fff;text-align:center;border-radius:12px;flex-direction:column;align-items:center;width:140px;padding:20px;transition:transform .3s;display:flex;box-shadow:0 4px 15px #15327b33}.step-card:hover{transform:translateY(-5px)}.step-number{background-color:var(--primary-yellow);color:var(--primary-blue);border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;margin-bottom:15px;font-size:18px;font-weight:800;display:flex}.step-text{font-size:13px;font-weight:600;line-height:1.3}.share-text{color:var(--primary-blue);text-align:center;margin-bottom:20px;font-size:14px;animation:.8s ease-out .5s both fadeInUp}.share-text strong{font-weight:800}.share-buttons{flex-wrap:wrap;justify-content:center;gap:15px;margin-bottom:40px;animation:.8s ease-out .6s both fadeInUp;display:flex}.btn-share{cursor:pointer;color:#fff;border:none;border-radius:30px;align-items:center;gap:10px;padding:12px 25px;font-family:inherit;font-size:14px;font-weight:700;transition:all .3s;display:flex}.btn-whatsapp{background-color:var(--whatsapp-green);box-shadow:0 4px 15px #1fd2684d}.btn-whatsapp:hover{background-color:var(--button-hover-green);transform:translateY(-2px)}.btn-link{background-color:#8c8c8c;box-shadow:0 4px 15px #8c8c8c4d}.btn-link:hover{background-color:#7a7a7a;transform:translateY(-2px)}.footer{color:#888;text-align:center;z-index:1;margin-top:auto;padding:20px;font-size:11px;animation:1s ease-out 1s both fadeIn}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (width<=768px){.title{font-size:32px}.avatar-preview img{width:250px;height:250px}}@media (width<=500px){.main-content{padding:30px 15px}.logo-container{margin-bottom:30px}.logo-container img{max-width:200px}.title{margin-bottom:15px;font-size:24px}.avatar-preview{margin-bottom:20px}.avatar-preview img{width:200px;height:200px}.btn-primary{width:100%;max-width:280px;padding:15px 20px;font-size:15px}.steps-container{flex-direction:column;align-items:center;gap:12px;width:100%}.step-card{text-align:left;flex-direction:row;justify-content:flex-start;width:100%;max-width:280px;padding:12px 20px}.step-number{flex-shrink:0;width:32px;height:32px;margin-bottom:0;margin-right:15px;font-size:16px}.step-text{font-size:14px}.share-text{font-size:13px}.share-buttons{flex-direction:column;gap:12px;width:100%;max-width:280px}.btn-share{justify-content:center;width:100%}}.crop-modal{z-index:9999;background-color:#000000e6;flex-direction:column;display:flex;position:fixed;inset:0}.crop-container{background:#333;flex:1;width:100%;height:100%;position:relative}.crop-controls{background-color:var(--bg-white);z-index:10000;flex-direction:column;align-items:center;gap:15px;padding:20px;display:flex;box-shadow:0 -4px 15px #0000001a}.crop-controls p{color:var(--text-dark);text-align:center;font-size:14px;font-weight:600}.zoom-slider{width:100%;max-width:300px}.crop-buttons{justify-content:center;gap:15px;width:100%;display:flex}.crop-buttons button{margin-bottom:0}.btn-secondary{color:var(--text-gray);cursor:pointer;background-color:#f3f4f6;border:none;border-radius:30px;padding:15px 30px;font-family:inherit;font-size:16px;font-weight:700;transition:all .3s}.btn-secondary:hover{background-color:#e5e7eb}.loading-overlay{color:var(--primary-blue);background:#ffffffe6;border-radius:20px;padding:10px 20px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 10px #0000001a}.frame-selector{flex-wrap:wrap;justify-content:center;gap:15px;margin:10px 0 20px;display:flex}.frame-thumbnail{cursor:pointer;background:#eee;border:3px solid #0000;border-radius:50%;width:70px;height:70px;transition:all .2s;overflow:hidden}.frame-thumbnail img{object-fit:cover;width:100%;height:100%}.frame-thumbnail.active{border-color:var(--primary-yellow);transform:scale(1.1);box-shadow:0 4px 10px #0003}.frame-overlay-container{pointer-events:none;z-index:10;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.frame-overlay{object-fit:contain;opacity:1;max-width:100%;max-height:100%}