/* =================================== Reset e Variabili CSS =================================== */:root{/* Colori Principali */ --primary-color:#5e91d0;--secondary-color:#264573;--text-color:#000222;--text-light:#6c757d;--background:#f8f9fa;--white:#ffffff;--black:#000000;--success:#28a745;--danger:#dc3545;--warning:#ffc107;--info:#17a2b8;/* Colori Dark Mode */ --dark-bg:#1a1a1a;--dark-surface:#2d2d2d;--dark-text:#e0e0e0;--dark-text-secondary:#b0b0b0;--dark-border:#404040;/* Gradienti */ --gradient-primary:linear-gradient(135deg, #5e91d0 0%, #264573 100%);--gradient-secondary:linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);--gradient-success:linear-gradient(135deg, #28a745 0%, #20863b 100%);/* Spacing */ --spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-xxl:3rem;/* Font Sizes */ --font-xs:0.75rem;--font-sm:0.875rem;--font-base:1rem;--font-lg:1.125rem;--font-xl:1.25rem;--font-2xl:1.5rem;--font-3xl:1.875rem;--font-4xl:2.25rem;--font-5xl:3rem;/* Shadows */ --shadow-sm:0 1px 2px rgba(0,0,0,0.05);--shadow-md:0 4px 6px rgba(0,0,0,0.1);--shadow-lg:0 10px 30px rgba(0,0,0,0.1);--shadow-xl:0 20px 40px rgba(0,0,0,0.15);/* Transitions */ --transition-fast:150ms ease;--transition-base:300ms ease;--transition-slow:500ms ease;/* Border Radius */ --radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:1rem;--radius-xl:1.5rem;--radius-full:9999px;/* Z-index */ --z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:1050;--z-popover:1060;--z-tooltip:1070;--z-notification:1080}/* Reset Globale */ *, *::before, *::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}/* Base HTML */ html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}/* Body */ body{font-family:'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;font-size:var(--font-base);line-height:1.6;color:var(--text-color);background:var(--gradient-secondary);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;position:relative}/* Dark Mode Body */ body.dark-mode{background:var(--dark-bg);color:var(--dark-text)}/* Typography */ h1, h2, h3, h4, h5, h6{font-family:'Poppins', sans-serif;font-weight:600;line-height:1.2;margin-bottom:var(--spacing-md);color:inherit}h1{font-size:var(--font-4xl)}h2{font-size:var(--font-3xl)}h3{font-size:var(--font-2xl)}h4{font-size:var(--font-xl)}h5{font-size:var(--font-lg)}h6{font-size:var(--font-base)}p{margin-bottom:var(--spacing-md);line-height:1.8}a{color:var(--primary-color);text-decoration:none;transition:color var(--transition-base)}a:hover{color:var(--secondary-color);text-decoration:underline}strong{font-weight:700}em{font-style:italic}/* Lists */ ul, ol{margin-bottom:var(--spacing-md);padding-left:var(--spacing-xl)}li{margin-bottom:var(--spacing-xs)}/* =================================== Layout Components =================================== */ /* Container */ .container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--spacing-lg)}.container-fluid{width:100%;padding:0 var(--spacing-lg)}/* Grid System */ .grid{display:grid;gap:var(--spacing-lg)}.grid-2{grid-template-columns:repeat(2, 1fr)}.grid-3{grid-template-columns:repeat(3, 1fr)}.grid-4{grid-template-columns:repeat(4, 1fr)}@media (max-width:768px){.grid-2, .grid-3, .grid-4{grid-template-columns:1fr}}@media (min-width:768px) and (max-width:992px){.grid-3, .grid-4{grid-template-columns:repeat(2, 1fr)}}/* Flexbox Utilities */ .flex{display:flex}.flex-column{flex-direction:column}.flex-wrap{flex-wrap:wrap}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.align-center{align-items:center}.align-start{align-items:flex-start}.align-end{align-items:flex-end}.flex-1{flex:1}/* =================================== Header Styles =================================== */ .header{background:var(--gradient-primary);color:var(--white);padding:var(--spacing-lg) 0;padding-top:calc(var(--spacing-lg) + env(safe-area-inset-top));position:sticky;top:0;z-index:var(--z-sticky);box-shadow:var(--shadow-lg);transition:all var(--transition-base)}body.dark-mode .header{background:var(--dark-surface);box-shadow:0 2px 10px rgba(0,0,0,0.5)}.header-content{text-align:center}.site-title{font-size:var(--font-4xl);font-weight:800;text-shadow:2px 2px 4px rgba(0,0,0,0.2);margin-bottom:var(--spacing-sm);letter-spacing:-1px;animation:fadeInDown 1s ease}.site-subtitle{font-size:var(--font-lg);font-weight:300;opacity:0.95;animation:fadeInUp 1s ease 0.3s both}/* Navigation Bar */ .navbar{background:var(--white);padding:var(--spacing-md) 0;box-shadow:var(--shadow-sm);position:sticky;top:80px;z-index:var(--z-sticky);transition:all var(--transition-base)}body.dark-mode .navbar{background:var(--dark-surface);box-shadow:0 1px 3px rgba(0,0,0,0.5)}.nav-links{display:flex;justify-content:center;gap:var(--spacing-xl);list-style:none;padding:0;margin:0}.nav-link{color:var(--text-color);font-weight:500;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);transition:all var(--transition-base);position:relative}body.dark-mode .nav-link{color:var(--dark-text)}.nav-link:hover{color:var(--primary-color);background:rgba(94, 145, 208, 0.1);text-decoration:none}.nav-link.active{color:var(--primary-color);background:rgba(94, 145, 208, 0.15)}.nav-link.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:30px;height:3px;background:var(--primary-color);border-radius:var(--radius-full)}/* Mobile Menu Toggle */ .menu-toggle{display:none;background:none;border:none;font-size:var(--font-2xl);color:var(--text-color);cursor:pointer;padding:var(--spacing-sm)}body.dark-mode .menu-toggle{color:var(--dark-text)}@media (max-width:768px){.menu-toggle{display:block}.nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--white);flex-direction:column;padding:var(--spacing-md);box-shadow:var(--shadow-lg)}body.dark-mode .nav-links{background:var(--dark-surface)}.nav-links.active{display:flex}}/* =================================== Breadcrumb =================================== */ .breadcrumb{padding:var(--spacing-md) 0;font-size:var(--font-sm);color:var(--text-light)}.breadcrumb a{color:var(--primary-color);margin-right:var(--spacing-sm)}.breadcrumb span{margin:0 var(--spacing-sm)}/* =================================== Main Content =================================== */ .main-content{flex:1;padding:var(--spacing-xxl) 0}/* Hero Section - Enhanced Design */ .hero-section{background:linear-gradient(135deg, var(--white) 0%, #f0f4f8 100%);border-radius:var(--radius-xl);padding:var(--spacing-xxl);margin-bottom:var(--spacing-xxl);box-shadow:var(--shadow-xl);position:relative;overflow:hidden;animation:fadeInUp 0.8s ease}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}body.dark-mode .hero-section{background:linear-gradient(135deg, var(--dark-surface) 0%, #1f2937 100%);color:var(--dark-text)}.hero-section::before{content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;background:radial-gradient(circle, rgba(94, 145, 208, 0.15) 0%, transparent 70%);animation:pulse 4s ease-in-out infinite}.hero-section::after{content:'';position:absolute;bottom:-30%;left:-10%;width:400px;height:400px;background:radial-gradient(circle, rgba(38, 69, 115, 0.1) 0%, transparent 70%);animation:pulse 5s ease-in-out infinite reverse}@keyframes pulse{0%, 100%{transform:scale(1);opacity:0.5}50%{transform:scale(1.1);opacity:0.8}}.hero-content{position:relative;z-index:1}.hero-header{text-align:center;margin-bottom:var(--spacing-xl)}.hero-badge{display:inline-flex;align-items:center;gap:0.5rem;background:var(--gradient-primary);color:white;padding:0.5rem 1rem;border-radius:var(--radius-full);font-size:var(--font-sm);font-weight:600;margin-bottom:var(--spacing-md);animation:fadeIn 1s ease 0.3s both}.hero-badge i{font-size:0.875rem}.hero-title{font-size:clamp(1.75rem, 4vw, 2.5rem);color:var(--secondary-color);margin-bottom:var(--spacing-md);text-align:center;line-height:1.3;animation:fadeIn 1s ease 0.5s both}.hero-subtitle{font-size:var(--font-lg);color:var(--primary-color);font-weight:500;text-align:center;margin-bottom:var(--spacing-lg);animation:fadeIn 1s ease 0.7s both}body.dark-mode .hero-title{color:var(--primary-color)}body.dark-mode .hero-subtitle{color:var(--dark-text-secondary)}.hero-features{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--spacing-md);margin-bottom:var(--spacing-xl);animation:fadeIn 1s ease 0.9s both}.hero-feature{display:flex;align-items:center;gap:0.5rem;background:rgba(94, 145, 208, 0.1);padding:0.5rem 1rem;border-radius:var(--radius-md);font-size:var(--font-sm);font-weight:500;color:var(--secondary-color);transition:all var(--transition-base)}.hero-feature:hover{background:rgba(94, 145, 208, 0.2);transform:translateY(-2px)}.hero-feature i{color:var(--success)}body.dark-mode .hero-feature{background:rgba(94, 145, 208, 0.2);color:var(--dark-text)}.hero-description{text-align:justify;line-height:1.8;color:var(--text-color);max-width:900px;margin:0 auto var(--spacing-md)}body.dark-mode .hero-description{color:var(--dark-text-secondary)}.hero-cta{display:flex;justify-content:center;gap:var(--spacing-md);margin-top:var(--spacing-xl);animation:fadeIn 1s ease 1.1s both}.hero-cta .btn{padding:0.875rem 2rem;font-size:var(--font-base)}/* Cards - Enhanced with micro-interactions */ .card{background:var(--white);border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-lg);transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);position:relative;overflow:hidden;border:1px solid transparent}.card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-primary);transform:scaleX(0);transform-origin:left;transition:transform 0.4s ease}body.dark-mode .card{background:var(--dark-surface);color:var(--dark-text);border-color:var(--dark-border)}.card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(94, 145, 208, 0.2);border-color:rgba(94, 145, 208, 0.3)}.card:hover::before{transform:scaleX(1)}.card:active{transform:translateY(-4px)}.card-header{margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-md);border-bottom:2px solid rgba(94, 145, 208, 0.1)}.card-title{font-size:var(--font-xl);color:var(--secondary-color);margin-bottom:var(--spacing-sm);transition:color var(--transition-base)}.card:hover .card-title{color:var(--primary-color)}body.dark-mode .card-title{color:var(--primary-color)}.card-subtitle{font-size:var(--font-sm);color:var(--text-light)}body.dark-mode .card-subtitle{color:var(--dark-text-secondary)}.card-body{color:inherit}.card-footer{margin-top:var(--spacing-lg);padding-top:var(--spacing-md);border-top:1px solid rgba(0,0,0,0.1)}body.dark-mode .card-footer{border-top-color:var(--dark-border)}/* Scroll Reveal Animations */ .fade-in-up{opacity:0;transform:translateY(30px);transition:all 0.6s ease}.fade-in-up.visible{opacity:1;transform:translateY(0)}.fade-in-left{opacity:0;transform:translateX(-30px);transition:all 0.6s ease}.fade-in-left.visible{opacity:1;transform:translateX(0)}.fade-in-right{opacity:0;transform:translateX(30px);transition:all 0.6s ease}.fade-in-right.visible{opacity:1;transform:translateX(0)}.scale-in{opacity:0;transform:scale(0.9);transition:all 0.5s ease}.scale-in.visible{opacity:1;transform:scale(1)}/* =================================== Calculator Styles =================================== */ .calculator-container{background:var(--white);border-radius:var(--radius-xl);padding:var(--spacing-xxl);margin-bottom:var(--spacing-xxl);box-shadow:var(--shadow-xl)}body.dark-mode .calculator-container{background:var(--dark-surface)}/* Tabs */ .tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--spacing-sm);margin-bottom:var(--spacing-xl);padding:var(--spacing-sm);background:var(--background);border-radius:var(--radius-lg)}body.dark-mode .tabs{background:rgba(255,255,255,0.05)}.tab-button{background:transparent;color:var(--text-color);border:2px solid transparent;padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-md);font-family:'Poppins', sans-serif;font-weight:500;font-size:var(--font-base);cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden}body.dark-mode .tab-button{color:var(--dark-text)}.tab-button::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--gradient-primary);transition:left var(--transition-base);z-index:-1}.tab-button:hover{color:var(--primary-color);border-color:var(--primary-color)}.tab-button.active{background:var(--gradient-primary);color:var(--white);border-color:transparent;box-shadow:var(--shadow-md)}.tab-button.active::before{left:0}.tab-content{display:none;animation:fadeIn 0.5s ease}.tab-content.active{display:block}/* Calculator Grid */ .calculator-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));gap:var(--spacing-xl)}/* Calculator Section */ .calc-section{background:var(--background);padding:var(--spacing-xl);border-radius:var(--radius-lg);border:2px solid transparent;transition:all var(--transition-base);position:relative}body.dark-mode .calc-section{background:rgba(255,255,255,0.03);border-color:var(--dark-border)}.calc-section:hover{border-color:var(--primary-color);box-shadow:0 0 20px rgba(94, 145, 208, 0.1);transform:translateY(-2px)}.calc-section-title{font-size:var(--font-xl);color:var(--secondary-color);margin-bottom:var(--spacing-lg);display:flex;align-items:center;gap:var(--spacing-sm)}body.dark-mode .calc-section-title{color:var(--primary-color)}.calc-section-title i{font-size:var(--font-lg);color:var(--primary-color)}/* Form Elements */ .form-group{margin-bottom:var(--spacing-lg)}.form-label{display:block;margin-bottom:var(--spacing-sm);color:var(--secondary-color);font-weight:600;font-size:var(--font-sm);text-transform:uppercase;letter-spacing:0.5px}body.dark-mode .form-label{color:var(--dark-text)}.form-input, .form-select, .form-textarea{width:100%;padding:var(--spacing-md);border:2px solid #e0e0e0;border-radius:var(--radius-md);font-size:var(--font-base);font-family:'Lato', sans-serif;transition:all var(--transition-base);background:var(--white);color:var(--text-color)}body.dark-mode .form-input, body.dark-mode .form-select, body.dark-mode .form-textarea{background:var(--dark-bg);color:var(--dark-text);border-color:var(--dark-border)}.form-input:focus, .form-select:focus, .form-textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(94, 145, 208, 0.1)}.form-input:hover, .form-select:hover, .form-textarea:hover{border-color:var(--primary-color)}.form-textarea{min-height:150px;resize:vertical}.form-help{display:block;margin-top:var(--spacing-xs);font-size:var(--font-sm);color:var(--text-light)}body.dark-mode .form-help{color:var(--dark-text-secondary)}/* Input Group */ .input-group{display:flex;align-items:stretch}.input-group-prepend, .input-group-append{display:flex;align-items:center;padding:var(--spacing-md);background:var(--background);border:2px solid #e0e0e0;color:var(--text-light)}body.dark-mode .input-group-prepend, body.dark-mode .input-group-append{background:var(--dark-bg);border-color:var(--dark-border);color:var(--dark-text-secondary)}.input-group-prepend{border-right:none;border-radius:var(--radius-md) 0 0 var(--radius-md)}.input-group-append{border-left:none;border-radius:0 var(--radius-md) var(--radius-md) 0}.input-group .form-input{border-radius:0}.input-group .form-input:first-child{border-radius:var(--radius-md) 0 0 var(--radius-md)}.input-group .form-input:last-child{border-radius:0 var(--radius-md) var(--radius-md) 0}/* Buttons */ .btn{display:inline-block;padding:var(--spacing-md) var(--spacing-xl);border:none;border-radius:var(--radius-md);font-family:'Poppins', sans-serif;font-weight:600;font-size:var(--font-base);text-align:center;text-decoration:none;cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden;white-space:nowrap}.btn:disabled{opacity:0.5;cursor:not-allowed}.btn-primary{background:var(--gradient-primary);color:var(--white);box-shadow:0 4px 15px rgba(94, 145, 208, 0.3)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(94, 145, 208, 0.4)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--text-light);color:var(--white)}.btn-secondary:hover{background:#5a6268;transform:translateY(-2px)}.btn-success{background:var(--gradient-success);color:var(--white)}.btn-danger{background:var(--danger);color:var(--white)}.btn-warning{background:var(--warning);color:var(--black)}.btn-info{background:var(--info);color:var(--white)}.btn-outline{background:transparent;border:2px solid var(--primary-color);color:var(--primary-color)}.btn-outline:hover{background:var(--primary-color);color:var(--white)}.btn-block{display:block;width:100%}.btn-sm{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-sm)}.btn-lg{padding:var(--spacing-lg) var(--spacing-xxl);font-size:var(--font-lg)}.btn-icon{display:inline-flex;align-items:center;gap:var(--spacing-sm)}/* Button Group */ .btn-group{display:inline-flex;gap:var(--spacing-sm)}/* Button Ripple Effect */ .btn{position:relative;overflow:hidden}.btn-ripple{position:absolute;border-radius:50%;background:rgba(255, 255, 255, 0.4);transform:scale(0);animation:ripple 0.6s ease-out;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}/* Input Focus Effects */ .input-group{transition:all var(--transition-base)}.input-group.focused{transform:translateY(-2px)}.input-group.focused input{border-color:var(--primary-color);box-shadow:0 4px 12px rgba(94, 145, 208, 0.15)}.input-group.focused .input-icon{color:var(--primary-color)}/* Loading state */ .btn.loading{pointer-events:none;opacity:0.7}.btn.loading::after{content:'';position:absolute;width:16px;height:16px;top:50%;left:50%;margin:-8px 0 0 -8px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}/* Success animation */ .success-checkmark{display:inline-block;animation:checkmark 0.5s ease-in-out}@keyframes checkmark{0%{transform:scale(0)}50%{transform:scale(1.2)}100%{transform:scale(1)}}/* Result Box */ .result-box{background:var(--gradient-primary);color:var(--white);padding:var(--spacing-xl);border-radius:var(--radius-lg);margin-top:var(--spacing-lg);display:none;animation:slideIn 0.5s ease;box-shadow:var(--shadow-lg)}.result-box.show{display:block}.result-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) 0;border-bottom:1px solid rgba(255,255,255,0.2)}.result-item:last-child{border-bottom:none;font-size:var(--font-xl);font-weight:700;margin-top:var(--spacing-md);padding-top:var(--spacing-lg);border-top:2px solid rgba(255,255,255,0.3)}.result-label{font-weight:500;opacity:0.9}.result-value{font-weight:600;font-size:var(--font-lg)}/* =================================== Features Section =================================== */ .features-section{padding:var(--spacing-xxl) 0;background:var(--white);margin:var(--spacing-xxl) 0}body.dark-mode .features-section{background:var(--dark-surface)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:var(--spacing-xl);margin-top:var(--spacing-xxl)}.feature-card{text-align:center;padding:var(--spacing-xl);border-radius:var(--radius-lg);background:var(--background);transition:all var(--transition-base)}body.dark-mode .feature-card{background:rgba(255,255,255,0.03)}.feature-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-xl)}.feature-icon{width:80px;height:80px;margin:0 auto var(--spacing-lg);background:var(--gradient-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--font-2xl);color:var(--white)}.feature-title{font-size:var(--font-xl);margin-bottom:var(--spacing-md);color:var(--secondary-color)}body.dark-mode .feature-title{color:var(--primary-color)}.feature-description{color:var(--text-light);line-height:1.6}body.dark-mode .feature-description{color:var(--dark-text-secondary)}/* =================================== Info Section =================================== */ .info-section{background:var(--white);border-radius:var(--radius-xl);padding:var(--spacing-xxl);margin-bottom:var(--spacing-xxl);box-shadow:var(--shadow-xl)}body.dark-mode .info-section{background:var(--dark-surface)}.info-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:var(--spacing-xl);margin-top:var(--spacing-xl)}.info-card{background:var(--gradient-secondary);padding:var(--spacing-xl);border-radius:var(--radius-lg);transition:all var(--transition-base);position:relative;overflow:hidden}body.dark-mode .info-card{background:linear-gradient(135deg, rgba(94, 145, 208, 0.1) 0%, rgba(38, 69, 115, 0.1) 100%)}.info-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--gradient-primary)}.info-card:hover{transform:translateX(10px);box-shadow:var(--shadow-xl)}.info-card-title{font-size:var(--font-xl);color:var(--secondary-color);margin-bottom:var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-sm)}body.dark-mode .info-card-title{color:var(--primary-color)}.info-card-list{list-style:none;padding:0}.info-card-list li{padding:var(--spacing-sm) 0;border-bottom:1px solid rgba(0,0,0,0.05);display:flex;align-items:center;gap:var(--spacing-sm)}body.dark-mode .info-card-list li{border-bottom-color:rgba(255,255,255,0.05)}.info-card-list li:last-child{border-bottom:none}.info-card-list li::before{content:'✓';color:var(--success);font-weight:bold}/* =================================== FAQ Section =================================== */ .faq-section{background:var(--white);border-radius:var(--radius-xl);padding:var(--spacing-xxl);margin-bottom:var(--spacing-xxl);box-shadow:var(--shadow-xl)}body.dark-mode .faq-section{background:var(--dark-surface)}.faq-container{margin-top:var(--spacing-xl)}.faq-item{margin-bottom:var(--spacing-lg);border:1px solid #e0e0e0;border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition-base)}body.dark-mode .faq-item{border-color:var(--dark-border)}.faq-item:hover{box-shadow:var(--shadow-md)}.faq-question{padding:var(--spacing-lg);background:var(--background);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;color:var(--secondary-color);transition:all var(--transition-base);user-select:none}body.dark-mode .faq-question{background:rgba(255,255,255,0.03);color:var(--primary-color)}.faq-question:hover{background:rgba(94, 145, 208, 0.1)}.faq-question-text{flex:1;padding-right:var(--spacing-md)}.faq-toggle{font-size:var(--font-xl);transition:transform var(--transition-base)}.faq-item.active .faq-toggle{transform:rotate(180deg)}.faq-answer{padding:0 var(--spacing-lg);max-height:0;overflow:hidden;transition:all var(--transition-base)}.faq-item.active .faq-answer{padding:var(--spacing-lg);max-height:1000px}.faq-answer-content{line-height:1.8;color:var(--text-color)}body.dark-mode .faq-answer-content{color:var(--dark-text-secondary)}/* =================================== CTA Section =================================== */ .cta-section{background:var(--gradient-primary);border-radius:var(--radius-xl);padding:var(--spacing-xxl);margin-bottom:var(--spacing-xxl);box-shadow:var(--shadow-xl);color:var(--white);position:relative;overflow:hidden}.cta-section::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);animation:rotate 20s linear infinite}.cta-content{position:relative;z-index:1}.cta-title{text-align:center;margin-bottom:var(--spacing-xl);font-size:var(--font-3xl)}.cta-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:var(--spacing-xl)}.cta-card{background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);padding:var(--spacing-xl);border-radius:var(--radius-lg);text-align:center;transition:all var(--transition-base);border:1px solid rgba(255,255,255,0.2)}.cta-card:hover{background:rgba(255,255,255,0.2);transform:translateY(-5px);box-shadow:var(--shadow-xl)}.cta-icon{font-size:var(--font-4xl);margin-bottom:var(--spacing-md)}.cta-card-title{font-size:var(--font-xl);margin-bottom:var(--spacing-sm)}.cta-card-description{margin-bottom:var(--spacing-lg);opacity:0.95}.cta-btn{background:var(--white);color:var(--primary-color);padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-full);display:inline-block;text-decoration:none;font-weight:600;transition:all var(--transition-base)}.cta-btn:hover{background:var(--secondary-color);color:var(--white);transform:scale(1.05);text-decoration:none}.cta-btn.whatsapp{background:#25D366;color:var(--white)}.cta-btn.whatsapp:hover{background:#128C7E}/* =================================== History Section =================================== */ .history-section{background:var(--white);border-radius:var(--radius-xl);padding:var(--spacing-xxl);margin-bottom:var(--spacing-xxl);box-shadow:var(--shadow-xl);display:none}body.dark-mode .history-section{background:var(--dark-surface)}.history-section.show{display:block}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl)}.history-list{max-height:400px;overflow-y:auto}.history-item{background:var(--background);padding:var(--spacing-lg);margin-bottom:var(--spacing-md);border-radius:var(--radius-md);border-left:4px solid var(--primary-color);transition:all var(--transition-base)}body.dark-mode .history-item{background:rgba(255,255,255,0.03)}.history-item:hover{transform:translateX(5px);box-shadow:var(--shadow-md)}.history-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm)}.history-item-type{font-weight:600;color:var(--secondary-color)}body.dark-mode .history-item-type{color:var(--primary-color)}.history-item-date{font-size:var(--font-sm);color:var(--text-light)}body.dark-mode .history-item-date{color:var(--dark-text-secondary)}.history-item-details{display:grid;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));gap:var(--spacing-sm)}.history-detail{display:flex;flex-direction:column}.history-detail-label{font-size:var(--font-sm);color:var(--text-light);margin-bottom:var(--spacing-xs)}body.dark-mode .history-detail-label{color:var(--dark-text-secondary)}.history-detail-value{font-weight:600;color:var(--text-color)}body.dark-mode .history-detail-value{color:var(--dark-text)}/* =================================== Notifications =================================== */ .notification-container{position:fixed;top:var(--spacing-lg);right:var(--spacing-lg);z-index:var(--z-notification);pointer-events:none}.notification{background:var(--white);color:var(--text-color);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);box-shadow:var(--shadow-xl);margin-bottom:var(--spacing-md);min-width:300px;max-width:500px;display:flex;align-items:center;gap:var(--spacing-md);pointer-events:all;animation:slideInRight 0.3s ease;transition:all var(--transition-base)}body.dark-mode .notification{background:var(--dark-surface);color:var(--dark-text)}@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}.notification.success{border-left:4px solid var(--success)}.notification.error{border-left:4px solid var(--danger)}.notification.warning{border-left:4px solid var(--warning)}.notification.info{border-left:4px solid var(--info)}.notification-icon{font-size:var(--font-xl)}.notification-content{flex:1}.notification-title{font-weight:600;margin-bottom:var(--spacing-xs)}.notification-message{font-size:var(--font-sm);color:var(--text-light)}body.dark-mode .notification-message{color:var(--dark-text-secondary)}.notification-close{background:none;border:none;font-size:var(--font-xl);color:var(--text-light);cursor:pointer;padding:var(--spacing-xs);transition:all var(--transition-base)}.notification-close:hover{color:var(--text-color)}/* =================================== Modal =================================== */ .modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:var(--z-modal);align-items:center;justify-content:center;padding:var(--spacing-lg)}.modal.show{display:flex;animation:fadeIn 0.3s ease}.modal-content{background:var(--white);border-radius:var(--radius-xl);padding:var(--spacing-xxl);max-width:600px;width:100%;max-height:90vh;overflow-y:auto;animation:slideUp 0.3s ease}body.dark-mode .modal-content{background:var(--dark-surface);color:var(--dark-text)}@keyframes slideUp{from{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-md);border-bottom:2px solid var(--background)}body.dark-mode .modal-header{border-bottom-color:var(--dark-border)}.modal-title{font-size:var(--font-2xl);color:var(--secondary-color)}body.dark-mode .modal-title{color:var(--primary-color)}.modal-close{background:none;border:none;font-size:var(--font-2xl);color:var(--text-light);cursor:pointer;padding:var(--spacing-xs);transition:all var(--transition-base)}.modal-close:hover{color:var(--danger)}.modal-body{margin-bottom:var(--spacing-xl)}.modal-footer{display:flex;justify-content:flex-end;gap:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--background)}body.dark-mode .modal-footer{border-top-color:var(--dark-border)}/* Keyboard Shortcuts Modal Styles */ .shortcuts-list{display:flex;flex-direction:column;gap:var(--spacing-lg)}.shortcut-group h4{font-size:var(--font-sm);color:var(--text-light);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--spacing-sm);padding-bottom:var(--spacing-xs);border-bottom:1px solid rgba(0,0,0,0.1)}body.dark-mode .shortcut-group h4{color:var(--dark-text-secondary);border-bottom-color:var(--dark-border)}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) 0}.shortcut-keys{display:flex;align-items:center;gap:0.25rem}.shortcut-keys kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 0.5rem;font-family:inherit;font-size:var(--font-xs);font-weight:600;color:var(--secondary-color);background:linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);border:1px solid #d1d5db;border-radius:var(--radius-sm);box-shadow:0 1px 2px rgba(0,0,0,0.1)}body.dark-mode .shortcut-keys kbd{color:var(--dark-text);background:linear-gradient(180deg, #3d3d3d 0%, #2d2d2d 100%);border-color:#4d4d4d}.shortcut-desc{color:var(--text-color);font-size:var(--font-sm)}body.dark-mode .shortcut-desc{color:var(--dark-text-secondary)}/* =================================== Cookie Banner =================================== */ .cookie-banner{position:fixed;bottom:0;left:0;right:0;background:var(--white);padding:var(--spacing-lg);box-shadow:0 -2px 10px rgba(0,0,0,0.1);z-index:var(--z-fixed);display:none;animation:slideUp 0.5s ease}body.dark-mode .cookie-banner{background:var(--dark-surface)}.cookie-banner.show{display:block}.cookie-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-lg)}.cookie-text{flex:1}.cookie-text p{margin:0;color:var(--text-color)}body.dark-mode .cookie-text p{color:var(--dark-text)}.cookie-text a{color:var(--primary-color);text-decoration:underline}.cookie-actions{display:flex;gap:var(--spacing-md)}@media (max-width:768px){.cookie-content{flex-direction:column}.cookie-actions{width:100%;justify-content:stretch}.cookie-actions .btn{flex:1}}/* =================================== Footer =================================== */ .footer{background:var(--secondary-color);color:var(--white);padding:var(--spacing-xxl) 0;padding-bottom:calc(var(--spacing-xxl) + env(safe-area-inset-bottom));margin-top:auto}.footer-content{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:var(--spacing-xxl);margin-bottom:var(--spacing-xl)}.footer-section{text-align:center}.footer-logo{margin-bottom:var(--spacing-lg)}.footer-logo a{display:inline-block;transition:opacity var(--transition-base)}.footer-logo a:hover{opacity:0.8}.footer-logo img{max-width:200px;height:auto;filter:brightness(0) invert(1)}.footer-title{font-size:var(--font-xl);margin-bottom:var(--spacing-lg);color:var(--white)}.footer-text{line-height:1.8;opacity:0.9}.footer-links{list-style:none;padding:0}.footer-links li{margin-bottom:var(--spacing-sm)}.footer-links a{color:var(--white);opacity:0.9;transition:all var(--transition-base)}.footer-links a:hover{opacity:1;text-decoration:underline}.footer-social{display:flex;justify-content:center;gap:var(--spacing-md);margin-top:var(--spacing-lg)}.social-link{width:40px;height:40px;background:rgba(255,255,255,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--white);transition:all var(--transition-base)}.social-link:hover{background:var(--primary-color);transform:translateY(-3px);text-decoration:none}.footer-bottom{text-align:center;padding-top:var(--spacing-xl);border-top:1px solid rgba(255,255,255,0.1);font-size:var(--font-sm);opacity:0.8}/* =================================== Utilities =================================== */ /* Text Utilities */ .text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-justify{text-align:justify}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.text-primary{color:var(--primary-color)}.text-secondary{color:var(--secondary-color)}.text-success{color:var(--success)}.text-danger{color:var(--danger)}.text-warning{color:var(--warning)}.text-info{color:var(--info)}.text-light{color:var(--text-light)}.text-white{color:var(--white)}.font-weight-light{font-weight:300}.font-weight-normal{font-weight:400}.font-weight-medium{font-weight:500}.font-weight-semibold{font-weight:600}.font-weight-bold{font-weight:700}/* Spacing Utilities */ .m-0{margin:0}.m-1{margin:var(--spacing-xs)}.m-2{margin:var(--spacing-sm)}.m-3{margin:var(--spacing-md)}.m-4{margin:var(--spacing-lg)}.m-5{margin:var(--spacing-xl)}.mt-0{margin-top:0}.mt-1{margin-top:var(--spacing-xs)}.mt-2{margin-top:var(--spacing-sm)}.mt-3{margin-top:var(--spacing-md)}.mt-4{margin-top:var(--spacing-lg)}.mt-5{margin-top:var(--spacing-xl)}.mb-0{margin-bottom:0}.mb-1{margin-bottom:var(--spacing-xs)}.mb-2{margin-bottom:var(--spacing-sm)}.mb-3{margin-bottom:var(--spacing-md)}.mb-4{margin-bottom:var(--spacing-lg)}.mb-5{margin-bottom:var(--spacing-xl)}.p-0{padding:0}.p-1{padding:var(--spacing-xs)}.p-2{padding:var(--spacing-sm)}.p-3{padding:var(--spacing-md)}.p-4{padding:var(--spacing-lg)}.p-5{padding:var(--spacing-xl)}/* Display Utilities */ .d-none{display:none}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex}.d-inline-flex{display:inline-flex}.d-grid{display:grid}/* Visibility */ .visible{visibility:visible}.invisible{visibility:hidden}/* Position */ .position-relative{position:relative}.position-absolute{position:absolute}.position-fixed{position:fixed}.position-sticky{position:sticky}/* Overflow */ .overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-scroll{overflow:scroll}/* Border */ .border{border:1px solid #e0e0e0}.border-0{border:0}.border-top{border-top:1px solid #e0e0e0}.border-bottom{border-bottom:1px solid #e0e0e0}.border-left{border-left:1px solid #e0e0e0}.border-right{border-right:1px solid #e0e0e0}.rounded{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-full{border-radius:var(--radius-full)}.rounded-0{border-radius:0}/* Shadow */ .shadow-sm{box-shadow:var(--shadow-sm)}.shadow{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-xl)}.shadow-none{box-shadow:none}/* Width & Height */ .w-25{width:25%}.w-50{width:50%}.w-75{width:75%}.w-100{width:100%}.w-auto{width:auto}.h-25{height:25%}.h-50{height:50%}.h-75{height:75%}.h-100{height:100%}.h-auto{height:auto}/* =================================== Animations =================================== */ @keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}/* Loading Spinner */ .spinner{width:40px;height:40px;border:4px solid var(--background);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}/* =================================== Responsive Design =================================== */ /* Extra Small devices (phones, 0-576px) */ @media (max-width:576px){:root{--font-base:14px}.site-title{font-size:var(--font-3xl)}.hero-title{font-size:var(--font-2xl)}.container{padding:0 var(--spacing-md)}.calculator-container, .hero-section, .info-section, .faq-section, .cta-section, .history-section{padding:var(--spacing-lg);border-radius:var(--radius-lg)}.tabs{flex-direction:column}.tab-button{width:100%}.footer-content{grid-template-columns:1fr;text-align:center}}/* Small devices (landscape phones, 576px-768px) */ @media (min-width:576px) and (max-width:768px){.calculator-grid{grid-template-columns:1fr}}/* Medium devices (tablets, 768px-992px) */ @media (min-width:768px) and (max-width:992px){.container{max-width:900px}}/* Large devices (desktops, 992px-1200px) */ @media (min-width:992px) and (max-width:1200px){.container{max-width:1000px}}/* Extra large devices (large desktops, 1200px and up) */ @media (min-width:1200px){.container{max-width:1200px}}/* Ultra wide screens (1920px and up) */ @media (min-width:1920px){:root{--font-base:18px}.container{max-width:1400px}}/* Print Styles */ @media print{.no-print, .header, .navbar, .cta-section, .footer, .notification-container, .btn{display:none !important}body{background:white;color:black}.calculator-container, .result-box{box-shadow:none;border:1px solid #000}}/* Accessibility */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}/* Focus Visible */:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}/* Reduced Motion */ @media (prefers-reduced-motion:reduce){*, *::before, *::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}/* High Contrast Mode */ @media (prefers-contrast:high){:root{--primary-color:#0066cc;--secondary-color:#003366}.btn{border:2px solid currentColor}}/* Dark Mode Toggle */ .dark-mode-toggle{position:fixed;bottom:var(--spacing-xl);right:var(--spacing-xl);width:60px;height:60px;border-radius:50%;background:var(--gradient-primary);color:var(--white);border:none;box-shadow:var(--shadow-lg);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--font-xl);transition:all var(--transition-base);z-index:var(--z-fixed)}.dark-mode-toggle:hover{transform:scale(1.1);box-shadow:var(--shadow-xl)}body.dark-mode .dark-mode-toggle{background:var(--gradient-secondary);color:var(--secondary-color)}/* Scroll to Top Button */ .scroll-top{position:fixed;bottom:var(--spacing-xl);right:calc(var(--spacing-xl) + 80px);width:50px;height:50px;border-radius:50%;background:var(--secondary-color);color:var(--white);border:none;box-shadow:var(--shadow-lg);cursor:pointer;display:none;align-items:center;justify-content:center;font-size:var(--font-lg);transition:all var(--transition-base);z-index:var(--z-fixed)}.scroll-top.show{display:flex}.scroll-top:hover{transform:translateY(-5px);box-shadow:var(--shadow-xl)}