@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap";:root{--font-primary:"Outfit", sans-serif;--hue-primary:260;--hue-accent:174;--bg-app:hsl(var(--hue-primary), 25%, 97%);--bg-card:#ffffffb3;--bg-card-hover:#fffffff2;--text-main:hsl(var(--hue-primary), 20%, 28%);--text-muted:hsl(var(--hue-primary), 15%, 48%);--text-heading:hsl(var(--hue-primary), 45%, 12%);--border-color:hsla(var(--hue-primary), 20%, 88%, .6);--border-focus:hsl(var(--hue-primary), 85%, 65%);--primary:hsl(var(--hue-primary), 85%, 60%);--primary-hover:hsl(var(--hue-primary), 85%, 52%);--primary-light:hsl(var(--hue-primary), 90%, 95%);--primary-glow:hsla(var(--hue-primary), 85%, 60%, .3);--accent:hsl(var(--hue-accent), 90%, 38%);--accent-hover:hsl(var(--hue-accent), 90%, 30%);--accent-light:hsl(var(--hue-accent), 85%, 92%);--success:#10b981;--success-bg:#10b9811a;--warning:#f59e0b;--warning-bg:#f59e0b1a;--danger:#ef4444;--danger-bg:#ef44441a;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--shadow-sm:0 4px 6px -1px #0000000d, 0 2px 4px -1px #00000008;--shadow-md:0 10px 15px -3px #6450960f, 0 4px 6px -2px #6450960a;--shadow-lg:0 20px 25px -5px #6450961a, 0 10px 10px -5px #6450960d;--blur-glass:16px;--transition-smooth:all .3s cubic-bezier(.4, 0, .2, 1);--border-glass:1px solid hsla(var(--hue-primary), 20%, 90%, .6)}@media (prefers-color-scheme:dark){:root{--bg-app:hsl(var(--hue-primary), 28%, 6%);--bg-card:hsla(var(--hue-primary), 25%, 11%, .65);--bg-card-hover:hsla(var(--hue-primary), 25%, 14%, .85);--text-main:hsl(var(--hue-primary), 15%, 80%);--text-muted:hsl(var(--hue-primary), 12%, 60%);--text-heading:#fff;--border-color:hsla(var(--hue-primary), 20%, 20%, .5);--border-focus:hsl(var(--hue-primary), 75%, 68%);--primary:hsl(var(--hue-primary), 85%, 68%);--primary-hover:hsl(var(--hue-primary), 85%, 75%);--primary-light:hsla(var(--hue-primary), 85%, 68%, .15);--accent:hsl(var(--hue-accent), 85%, 45%);--accent-hover:hsl(var(--hue-accent), 85%, 52%);--accent-light:hsla(var(--hue-accent), 85%, 45%, .15);--border-glass:1px solid hsla(var(--hue-primary), 20%, 22%, .4);--shadow-md:0 10px 15px -3px #0000004d, 0 4px 6px -2px #0003;--shadow-lg:0 25px 35px -5px #0006, 0 15px 15px -5px #0000004d}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-primary);background:var(--bg-app);color:var(--text-main);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.6;transition:background-color .3s;overflow-x:hidden}.bg-gradient-mesh{z-index:-1;opacity:.7;pointer-events:none;position:fixed;inset:0}.bg-gradient-mesh:before,.bg-gradient-mesh:after{content:"";filter:blur(80px);border-radius:50%;width:50vw;height:50vw;position:absolute}.bg-gradient-mesh:before{background:radial-gradient(circle, hsla(var(--hue-primary), 80%, 75%, .15) 0%, transparent 80%);top:-10%;left:-10%}.bg-gradient-mesh:after{background:radial-gradient(circle, hsla(var(--hue-accent), 80%, 75%, .15) 0%, transparent 80%);bottom:-10%;right:-10%}@media (prefers-color-scheme:dark){.bg-gradient-mesh:before{background:radial-gradient(circle, hsla(var(--hue-primary), 80%, 40%, .07) 0%, transparent 80%)}.bg-gradient-mesh:after{background:radial-gradient(circle, hsla(var(--hue-accent), 80%, 40%, .07) 0%, transparent 80%)}}.container{max-width:1280px;margin:0 auto;padding:0 24px}header{z-index:100;background:var(--bg-card);-webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));border-bottom:var(--border-glass);transition:var(--transition-smooth);position:sticky;top:0}.nav-wrapper{justify-content:space-between;align-items:center;height:80px;display:flex}.logo{letter-spacing:-.5px;color:var(--text-heading);align-items:center;gap:12px;font-size:24px;font-weight:800;display:flex}.logo span{background:linear-gradient(135deg, var(--primary), var(--accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text}.logo-icon{background:linear-gradient(135deg, var(--primary), var(--accent));color:#fff;width:40px;height:40px;box-shadow:0 4px 12px var(--primary-glow);border-radius:12px;justify-content:center;align-items:center;display:flex}.hero{text-align:center;padding:60px 0 40px}.hero h1{letter-spacing:-2px;color:var(--text-heading);margin-bottom:20px;font-size:56px;font-weight:800;line-height:1.15}.hero h1 span{background:linear-gradient(135deg, var(--primary), var(--accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text}.hero p{color:var(--text-muted);max-width:680px;margin:0 auto 32px;font-size:20px}.controls-card{background:var(--bg-card);-webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));border:var(--border-glass);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);flex-direction:column;gap:20px;margin-bottom:40px;padding:24px;display:flex}.search-box{width:100%;position:relative}.search-input{width:100%;height:54px;color:var(--text-heading);background:hsla(var(--hue-primary), 20%, 96%, .5);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:var(--transition-smooth);outline:none;padding:0 20px 0 54px;font-family:inherit;font-size:16px}@media (prefers-color-scheme:dark){.search-input{background:hsla(var(--hue-primary), 20%, 5%, .4)}}.search-input:focus{border-color:var(--border-focus);box-shadow:0 0 0 4px var(--primary-glow);background:var(--bg-card-hover)}.search-icon{color:var(--text-muted);pointer-events:none;width:20px;height:20px;position:absolute;top:50%;left:20px;transform:translateY(-50%)}.filter-groups{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.filter-label{color:var(--text-heading);font-size:14px;font-weight:600}.filter-options{flex-wrap:wrap;gap:8px;display:flex}.filter-btn{border:1px solid var(--border-color);color:var(--text-muted);cursor:pointer;transition:var(--transition-smooth);background:0 0;border-radius:9999px;padding:8px 16px;font-family:inherit;font-size:14px;font-weight:500}.filter-btn:hover{background:var(--primary-light);color:var(--primary);border-color:var(--primary)}.filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 10px var(--primary-glow)}.grid{grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:32px;margin-bottom:60px;display:grid}.card{background:var(--bg-card);-webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));border:var(--border-glass);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:var(--transition-smooth);flex-direction:column;padding:28px;display:flex;position:relative;overflow:hidden}.card:before{content:"";background:linear-gradient(90deg, var(--primary), var(--accent));opacity:0;height:6px;transition:var(--transition-smooth);position:absolute;top:0;left:0;right:0}.card:hover{box-shadow:var(--shadow-lg);background:var(--bg-card-hover);border-color:hsla(var(--hue-primary), 20%, 80%, .8);transform:translateY(-8px)}.card:hover:before{opacity:1}.card-header{justify-content:space-between;align-items:flex-start;margin-bottom:16px;display:flex}.card-category{text-transform:uppercase;letter-spacing:1px;color:var(--accent);background:var(--accent-light);border-radius:9999px;padding:4px 10px;font-size:12px;font-weight:700}.card-difficulty{border-radius:9999px;padding:4px 10px;font-size:12px;font-weight:600}.card-difficulty.facil{color:var(--success);background:var(--success-bg)}.card-difficulty.medio{color:var(--warning);background:var(--warning-bg)}.card-difficulty.avanzado{color:var(--danger);background:var(--danger-bg)}.card-title{color:var(--text-heading);margin-bottom:10px;font-size:22px;font-weight:700;line-height:1.3}.card-desc{color:var(--text-muted);flex-grow:1;margin-bottom:24px;font-size:14.5px}.card-stats{border-top:1px solid var(--border-color);grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;padding-top:18px;display:grid}.stat-item{flex-direction:column;display:flex}.stat-label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:4px;font-size:11px}.stat-val{color:var(--text-heading);font-size:18px;font-weight:700}.card-actions{gap:12px;display:flex}.btn{border-radius:var(--radius-md);cursor:pointer;height:48px;transition:var(--transition-smooth);flex:1;justify-content:center;align-items:center;gap:8px;font-family:inherit;font-size:14.5px;font-weight:600;text-decoration:none;display:inline-flex}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 10px var(--primary-glow);border:none}.btn-primary:hover{background:var(--primary-hover);transform:scale(1.02)}.btn-secondary{color:var(--primary);border:2px solid var(--primary);background:0 0}.btn-secondary:hover{background:var(--primary-light);transform:scale(1.02)}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#0a081499;justify-content:center;align-items:center;padding:20px;animation:.25s ease-out fadeIn;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-app);border:var(--border-glass);border-radius:var(--radius-lg);width:100%;max-width:780px;max-height:90vh;box-shadow:var(--shadow-lg);flex-direction:column;animation:.3s cubic-bezier(.34,1.56,.64,1) slideUp;display:flex;position:relative;overflow-y:auto}.modal-close{background:var(--bg-card);border:var(--border-glass);cursor:pointer;width:36px;height:36px;color:var(--text-main);transition:var(--transition-smooth);z-index:10;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:24px;right:24px}.modal-close:hover{background:var(--danger-bg);color:var(--danger);transform:rotate(90deg)}.modal-body{padding:40px}.modal-title{color:var(--text-heading);margin-bottom:8px;font-size:32px;font-weight:800;line-height:1.2}.modal-subtitle{color:var(--text-muted);margin-bottom:24px;font-size:15px}.modal-grid{grid-template-columns:1fr 1fr;gap:32px;display:grid}@media (width<=768px){.modal-grid{grid-template-columns:1fr;gap:24px}}.modal-section-title{text-transform:uppercase;letter-spacing:.5px;color:var(--text-heading);align-items:center;gap:8px;margin-bottom:16px;font-size:16px;font-weight:700;display:flex}.info-list{flex-direction:column;gap:12px;display:flex}.info-item{background:var(--bg-card);border:var(--border-glass);border-radius:var(--radius-md);padding:14px 18px;font-size:14px}.info-item strong{color:var(--text-heading)}.tag-list{flex-wrap:wrap;gap:8px;display:flex}.tag-item{background:var(--primary-light);color:var(--primary);border-radius:8px;padding:6px 12px;font-size:13px;font-weight:500}.calc-inputs{flex-direction:column;gap:18px;display:flex}.input-group{flex-direction:column;gap:8px;display:flex}.input-header{color:var(--text-main);justify-content:space-between;font-size:13.5px;font-weight:600;display:flex}.input-val{color:var(--primary);font-weight:700}.range-slider{-webkit-appearance:none;background:var(--border-color);width:100%;height:6px;transition:var(--transition-smooth);border-radius:9999px;outline:none}.range-slider::-webkit-slider-thumb{appearance:none;background:var(--primary);cursor:pointer;width:18px;height:18px;box-shadow:0 0 0 3px var(--bg-app);border:1px solid var(--primary-hover);transition:var(--transition-smooth);border-radius:50%}.range-slider::-webkit-slider-thumb:hover{background:var(--primary-hover);transform:scale(1.2)}.calc-outputs{background:linear-gradient(135deg, var(--primary), var(--accent));color:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);flex-direction:column;justify-content:space-between;padding:32px;display:flex;position:relative;overflow:hidden}.calc-outputs:before{content:"";background:radial-gradient(circle,#ffffff26 0%,#0000 70%);border-radius:50%;width:150px;height:150px;position:absolute;top:-50px;right:-50px}.output-group{margin-bottom:24px}.output-group:last-child{margin-bottom:0}.output-label{text-transform:uppercase;letter-spacing:1px;opacity:.8;margin-bottom:4px;font-size:12px}.output-val-large{font-size:38px;font-weight:800;line-height:1}.output-val-medium{font-size:24px;font-weight:700}.breakeven-indicator{border-radius:var(--radius-sm);text-align:center;background:#ffffff26;margin-top:16px;padding:12px;font-size:13px;font-weight:500}footer{border-top:var(--border-glass);text-align:center;background:var(--bg-card);margin-top:auto;padding:40px 0}.footer-text{color:var(--text-muted);font-size:14px}.footer-links{justify-content:center;gap:20px;margin-top:12px;display:flex}.footer-link{color:var(--primary);transition:var(--transition-smooth);font-size:14px;font-weight:500;text-decoration:none}.footer-link:hover{color:var(--primary-hover);text-decoration:underline}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.text-accent{color:var(--accent)}.text-success{color:var(--success)}