body{color:#0f172a;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6}.App,body{background:#fff;margin:0;padding:0}.App{border-radius:0;box-shadow:none;display:flex;flex-direction:column;max-width:none;min-height:100vh}.App,.app-main{position:relative}.app-main{background:#fff;flex:1 1;overflow-x:hidden;padding-top:2rem;z-index:1}.app-main>*{animation:fadeIn .5s ease-in-out}.app-header,.subtitle{display:none}@media (max-width:768px){body{padding:0}.App{border-radius:0}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#5a6fd8,#6a4190)}@media (max-width:768px){.App{border-radius:16px;margin:10px;max-width:calc(100vw - 20px);padding:20px}.app-header{margin-bottom:24px;padding-bottom:16px}.app-header h1{font-size:2rem}.subtitle{font-size:1rem}main{gap:24px}}:root{--primary-color:#764ba2;--secondary-color:#667eea;--text-primary:#1f2937;--text-secondary:#6b7280;--background-white:#fff;--background-gray:#f9fafb;--border-color:#e5e7eb;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a;--border-radius:12px;--border-radius-lg:16px}@keyframes slideIn{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}.App{animation:fadeIn .6s ease-out}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #764ba2;outline:2px solid var(--primary-color);outline-offset:2px}html{scroll-behavior:smooth}.App{letter-spacing:-.01em;line-height:1.6}.container{background:var(--background-white);border-radius:16px;border-radius:var(--border-radius-lg);box-shadow:0 10px 15px -3px #0000001a;box-shadow:var(--shadow-lg);max-width:1400px;padding:32px}.main-navbar{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#fffffff2;border-bottom:1px solid #0000000d;left:0;position:fixed;right:0;top:0;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:2000}.navbar-container{height:80px;justify-content:space-between;margin:0 auto;max-width:1400px;padding:1rem 2rem}.navbar-brand,.navbar-container,.profile-section{align-items:center;display:flex}.profile-section{gap:1rem}.profile-avatar{border:3px solid #f1f5f9;border-radius:50%;box-shadow:0 4px 20px #0000001a;height:50px;overflow:hidden;transition:all .3s ease;width:50px}.profile-avatar:hover{border-color:#3b82f6;transform:scale(1.05)}.profile-avatar img{height:100%;object-fit:cover;width:100%}.profile-info h2{color:#1e293b;font-size:1.5rem;font-weight:700;line-height:1.2;margin:0}.brand-subtitle{color:#64748b;font-size:.875rem;font-weight:500;line-height:1;margin:0}.navbar-menu{align-items:center;display:flex;gap:.5rem}.nav-link{border-radius:12px;color:#374151;font-size:.95rem;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.nav-link:hover{background:#3b82f614;color:#1f2937;transform:translateY(-1px)}.nav-link.active{background:#3b82f61a;color:#3b82f6;font-weight:600}.nav-link.active:after{background:#3b82f6;border-radius:1px;bottom:0;content:"";height:2px;left:50%;position:absolute;transform:translateX(-50%);width:20px}.nav-link{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:none;background:#ffffff1a;border:none;border-radius:25px;cursor:pointer;display:flex;font-size:1rem;font-weight:500;gap:.5rem;padding:.75rem 1.5rem;text-decoration:none;transition:all .3s ease}.nav-link:hover{background:#fff3;box-shadow:0 5px 15px #0003;transform:translateY(-2px)}.nav-link.active{background:#ffffff4d;box-shadow:0 4px 12px #0003;font-weight:700}.mobile-menu-toggle{background:none;border:none;cursor:pointer;display:none;flex-direction:column;padding:.5rem}.hamburger-line{background:#000;border-radius:2px;height:3px;margin:3px 0;transition:.3s;width:25px}.mobile-menu{background:linear-gradient(135deg,#667eea,#764ba2);border-top:1px solid #fff3;display:none;flex-direction:column;padding:1rem 2rem}.mobile-nav-link{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:none;background:#ffffff1a;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:500;margin:.25rem 0;padding:1rem;text-align:left;transition:all .3s ease}.mobile-nav-link.active,.mobile-nav-link:hover{background:#fff3;transform:translateX(5px)}@media (max-width:768px){.navbar-container{padding:1rem}.navbar-brand h2{font-size:1.25rem}.brand-subtitle{font-size:.8rem}.desktop-menu{display:none}.mobile-menu-toggle,.mobile-menu.active{display:flex}}@media (max-width:480px){.navbar-container{padding:.75rem}.navbar-brand h2{font-size:1.1rem}.brand-subtitle{display:none}}.navbar-menu .language-selector{margin-left:1rem}.mobile-language-selector{border-top:1px solid #ffffff1a;display:flex;justify-content:center;margin-top:1rem;padding:1rem 0}.mobile-language-selector .language-toggle{background:#ffffff26;border:1px solid #fff3;color:#fff}.mobile-language-selector .language-menu{background:#000000e6;border:1px solid #fff3}.mobile-language-selector .language-option{color:#fff}.mobile-language-selector .language-option:hover{background:#ffffff1a}.mobile-language-selector .language-option.active{background:#3b82f64d;color:#93c5fd}.language-selector{display:inline-block;position:relative}.language-dropdown{position:relative}.language-toggle{align-items:center;background:#ffffff1a;border:1px solid #fff3;border-radius:6px;color:#000;cursor:pointer;display:flex;font-size:.9rem;gap:.5rem;padding:.5rem .75rem;transition:all .3s ease}.language-toggle:hover{background:#fff3}.language-name{font-weight:500}.dropdown-arrow{font-size:.7rem;transition:transform .3s ease}.language-dropdown:hover .dropdown-arrow{transform:rotate(180deg)}.language-menu{background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:140px;opacity:0;position:absolute;right:0;top:100%;transform:translateY(-10px);transition:all .3s ease;visibility:hidden;z-index:1000}.language-dropdown:hover .language-menu{opacity:1;transform:translateY(0);visibility:visible}.language-option{align-items:center;background:none;border:none;color:#374151;cursor:pointer;display:flex;font-size:.9rem;gap:.5rem;padding:.75rem;transition:background-color .2s ease;width:100%}.language-option:hover{background-color:#f3f4f6}.language-option.active{background-color:#dbeafe;color:#1d4ed8;font-weight:500}.language-option .flag{font-size:1.1rem}.language-option .name{font-weight:inherit}@media (max-width:768px){.language-toggle{font-size:.8rem;padding:.4rem .6rem}.language-name{display:none}.language-menu{min-width:120px}}.english-section{background:linear-gradient(135deg,#a8edea,#fed6e3);margin-top:3rem;min-height:100vh}.english-header{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 20px #0000001a;color:#fff;padding:3rem 2rem;text-align:center}.english-header h1{animation:fadeInUp 1s ease-out;font-size:3rem;margin-bottom:1rem;text-shadow:2px 2px 4px #0000004d}.subtitle{animation:fadeInUp 1s ease-out .2s both;font-size:1.2rem;font-weight:300;margin-bottom:2rem;opacity:.9}.header-decoration{animation:fadeInUp 1s ease-out .4s both;display:flex;gap:2rem;justify-content:center}.decoration-item{animation:bounce 2s infinite;font-size:2rem}.decoration-item:nth-child(2){animation-delay:.2s}.decoration-item:nth-child(3){animation-delay:.4s}.english-content{background-color:#fefeff;padding:2rem 0}.english-footer{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px;color:#fff;padding:2rem;text-align:center}.english-footer p{color:#fff;font-size:1.2rem;margin:0;text-shadow:1px 1px 2px #0000004d}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}@media (max-width:768px){.english-header{padding:2rem 1rem}.english-header h1{font-size:2.5rem}.subtitle{font-size:1.1rem}.header-decoration{gap:1rem}.decoration-item{font-size:1.5rem}}@media (max-width:480px){.english-header h1{font-size:2rem}.subtitle{font-size:1rem}.english-header{padding:1.5rem 1rem}}.reading-progress{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#e5e7ebcc;height:4px;left:0;position:fixed;top:0;width:100%;z-index:1001}.progress-bar{background:linear-gradient(90deg,#667eea,#764ba2);box-shadow:0 0 10px #764ba280;height:100%;transition:width .1s ease}.navigation-index{background:#fff;border-bottom:2px solid #e5e7eb;border-radius:12px;box-shadow:0 2px 8px #0000001a;margin-bottom:20px;position:-webkit-sticky;position:sticky;top:0;z-index:100}.index-toggle{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;color:#fff;cursor:pointer;display:flex;font-size:1.1rem;font-weight:600;justify-content:space-between;padding:15px 20px;transition:all .3s ease;width:100%}.index-toggle:hover{background:linear-gradient(135deg,#5a6fd8,#6a4190);box-shadow:0 4px 12px #667eea4d;transform:translateY(-1px)}.index-toggle.active{border-radius:12px 12px 0 0}.index-content{animation:slideDown .3s ease;background:#f8fafc;border-radius:0 0 12px 12px;border-top:1px solid #e5e7eb;padding:20px}.index-grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin-bottom:20px}.index-item{align-items:center;background:#fff;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;display:flex;gap:10px;overflow:hidden;padding:12px;position:relative;text-align:left;transition:all .3s ease}.index-item:hover{background:linear-gradient(135deg,#f8fafc,#e2e8f0);border-color:#764ba2;box-shadow:0 4px 12px #764ba233;transform:translateY(-2px)}.index-item.expanded{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#764ba2;color:#fff}.index-item.expanded .index-number{background:#fff3;color:#fff}.index-icon{flex-shrink:0;font-size:1.3rem}.index-title{color:#374151;flex:1 1;font-size:.9rem;font-weight:500}.index-number{align-items:center;background:#764ba2;border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:.8rem;font-weight:700;height:24px;justify-content:center;width:24px}.close-index{background:#ef4444;border:none;border-radius:8px;color:#fff;cursor:pointer;display:block;font-weight:600;margin:0 auto;padding:10px 20px;transition:all .3s ease}.close-index:hover{background:#dc2626;box-shadow:0 4px 12px #ef44444d;transform:translateY(-1px)}.scroll-to-top{align-items:center;animation:bounceIn .5s ease;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50%;bottom:30px;box-shadow:0 4px 20px #764ba266;color:#fff;cursor:pointer;display:flex;font-size:1.5rem;height:60px;justify-content:center;position:fixed;right:30px;transition:all .3s ease;width:60px;z-index:999}.scroll-to-top:hover{background:linear-gradient(135deg,#5a67d8,#6b46c1);box-shadow:0 8px 30px #764ba299;transform:translateY(-3px) scale(1.1)}.scroll-to-top:active{transform:translateY(-1px) scale(1.05)}@keyframes bounceIn{0%{opacity:0;transform:scale(0)}50%{opacity:.8;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.btn-ejemplos{overflow:hidden;position:relative}.btn-ejemplos:hover{box-shadow:0 6px 20px #764ba266;transform:translateY(-2px)}.btn-ejemplos.highlighted{animation:pulseHighlight 2s ease-in-out;background:linear-gradient(135deg,#10b981,#059669)!important;box-shadow:0 0 25px #10b98199!important;transform:scale(1.05)!important}@keyframes pulseHighlight{0%,to{box-shadow:0 0 25px #10b98199}50%{box-shadow:0 0 35px #10b981cc}}.container{background:#fff;border-radius:12px;box-shadow:0 4px 12px #0000001a;margin:0;max-width:100vw;padding:16px;width:100%}.category-section{background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 2px 4px #0000000d;margin-bottom:32px;padding:20px}.category-section.collapsible{overflow:hidden;padding:0;transition:all .3s ease}.category-header{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;display:flex;justify-content:space-between;padding:20px;transition:all .3s ease}.category-header:hover{background:linear-gradient(135deg,#5a6fd8,#6a4190)}.category-header .category-title{-webkit-text-fill-color:#fff;background:none;border:none;color:#fff;margin:0;padding:0;text-align:left}.toggle-icon{color:#fff;font-size:1.2rem;font-weight:700;transition:transform .3s ease}.toggle-icon.expanded{transform:rotate(90deg)}.category-content{background:#f9fafb;max-height:0;opacity:0;overflow:hidden;padding:0 20px;transition:max-height .3s ease-out,padding .3s ease-out,opacity .2s ease-out;will-change:max-height,padding,opacity}.category-content.expanded{max-height:30000px;opacity:1;padding:20px}.category-content.collapsed{max-height:0;opacity:0;padding:0 20px}.category-title{border-bottom:2px solid #e5e7eb;font-size:1.25rem;margin-bottom:20px;padding-bottom:12px}.table-container{border-radius:12px}table{background:#fff;border-collapse:collapse;margin:0;width:100%}.table-vertical{grid-gap:20px;align-items:stretch;display:grid;gap:20px;grid-template-columns:repeat(2,1fr)}@media (max-width:768px){.table-vertical{gap:16px;grid-template-columns:1fr}}.table-row-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 2px 8px #0000001a;display:flex;flex-direction:column;min-height:420px;padding:24px;transition:all .2s ease}.table-row-card:hover{box-shadow:0 4px 16px #667eea26;transform:translateY(-2px)}.card-content{display:flex;flex:1 1;flex-direction:column}.card-field{border-bottom:1px solid #f1f3f4;margin-bottom:16px;padding-bottom:12px}.card-field:nth-last-child(2){border-bottom:none;display:flex;flex:1 1;flex-direction:column;justify-content:flex-start}.card-field:last-child{border-bottom:none;margin-bottom:0;margin-top:auto;padding-bottom:0}.field-label{color:#6b7280;display:block;flex-shrink:0;font-size:.8rem;font-weight:600;letter-spacing:.5px;margin-bottom:8px;text-transform:uppercase}.field-content{display:block;min-height:24px}.tema{color:#764ba2;font-size:1rem;font-weight:700;margin-bottom:0}.estructura{background:linear-gradient(135deg,#fff7e6,#fff3cd);border:1px solid #fed7aa;border-radius:6px;color:#d97706;display:inline-block;font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;font-size:.875rem;font-weight:600;margin:0;padding:8px 12px;white-space:nowrap}.ejemplo{color:#1d4ed8;font-size:.9rem;font-weight:500;line-height:1.4}.ejemplo,.traduccion{font-style:italic;margin:0}.traduccion{color:#6b7280;font-size:.85rem;line-height:1.3}.uso{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:1px solid #a7f3d0;border-radius:8px;color:#065f46;display:inline-block;margin:0;padding:4px 8px;text-align:center}.btn-ejemplos,.uso{font-size:.75rem;font-weight:600;white-space:nowrap}.btn-ejemplos{background:linear-gradient(135deg,#ec4899,#f43f5e);border:none;border-radius:16px;box-shadow:0 2px 8px #ec48994d;color:#fff;cursor:pointer;padding:8px 12px;transition:all .3s ease;width:100%}.btn-ejemplos:hover{background:linear-gradient(135deg,#db2777,#e11d48);box-shadow:0 4px 12px #ec489966;transform:translateY(-1px)}.btn-ejemplos:active{transform:translateY(0)}.verb-list{grid-gap:12px;gap:12px;grid-template-columns:1fr;margin-top:16px}.verb-item{border-radius:8px;box-shadow:0 1px 3px #0000001a;padding:16px;transition:all .2s ease}.verb-item:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-1px)}.verb-forms{color:#1d4ed8;font-size:.95rem;font-weight:700;margin-bottom:4px}.verb-meaning{color:#6b7280;font-size:.85rem}.tips-box{background:linear-gradient(135deg,#fef3c7,#fde68a);border:1px solid #f59e0b;border-radius:12px;margin-top:32px;padding:20px;text-align:center}.tips-box h3{color:#dc2626;font-size:1.1rem;margin-bottom:16px}.tips-box p{color:#374151;font-size:.9rem;line-break:anywhere;line-height:1.6}.table-container{border:none;box-shadow:none;margin:20px 0;overflow:visible}table{display:none}.field-content .tema{color:#764ba2;font-size:1.1rem;font-weight:700}.field-content .estructura{background:linear-gradient(135deg,#fff7e6,#fff3cd);border:1px solid #fed7aa;border-radius:8px;color:#d97706;display:inline-block;font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;font-size:.9rem;font-weight:600;max-width:100%;padding:10px 14px;white-space:normal;word-break:break-word}.field-content .ejemplo{color:#1d4ed8;font-size:1rem;font-style:italic;font-weight:500;line-height:1.5}.field-content .traduccion{color:#6b7280;font-size:.9rem;font-style:italic;line-height:1.4}.field-content .uso{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:1px solid #a7f3d0;border-radius:8px;color:#065f46;display:inline-block;font-size:.8rem;font-weight:600;padding:8px 12px;white-space:normal}.field-content .btn-ejemplos{background:linear-gradient(135deg,#ec4899,#f43f5e);border:none;border-radius:20px;box-shadow:0 2px 8px #ec48994d;color:#fff;cursor:pointer;font-size:.85rem;font-weight:600;margin-top:4px;padding:12px 20px;transition:all .3s ease;width:100%}.field-content .btn-ejemplos:hover{background:linear-gradient(135deg,#db2777,#e11d48);box-shadow:0 4px 12px #ec489966;transform:translateY(-1px)}@media (max-width:768px){.index-grid{gap:8px;grid-template-columns:1fr}.index-item{gap:8px;padding:10px}.index-title{font-size:.85rem}.index-icon{font-size:1.1rem}.index-toggle{font-size:1rem;padding:12px 16px}.scroll-to-top{bottom:20px;font-size:1.3rem;height:50px;right:20px;width:50px}}@media (min-width:769px){.container{border-radius:16px;margin:0 auto;max-width:100%}.category-section,.container{padding:24px}.category-title{font-size:1.5rem}.table-vertical{gap:24px;grid-template-columns:repeat(2,1fr)}.table-row-card{min-height:450px;padding:28px}.field-label{font-size:.85rem}.field-content .tema{font-size:1.2rem}.field-content .estructura{font-size:.95rem;padding:12px 16px}.field-content .ejemplo{font-size:1.05rem}.field-content .traduccion{font-size:.95rem}.field-content .uso{font-size:.85rem;padding:10px 14px}.field-content .btn-ejemplos{font-size:.9rem;padding:14px 24px}.verb-list{gap:16px;grid-template-columns:repeat(2,1fr)}.verb-item{padding:20px}}@media (min-width:1024px){.container{border-radius:20px;max-width:1200px}.category-section,.container{padding:32px}.category-title{font-size:1.75rem}.table-vertical{gap:28px;grid-template-columns:repeat(2,1fr)}.table-row-card{min-height:480px;padding:32px}.field-label{font-size:.9rem;margin-bottom:10px}.card-field{margin-bottom:20px;padding-bottom:16px}.field-content .tema{font-size:1.3rem}.field-content .estructura{font-size:1rem;padding:14px 18px}.field-content .ejemplo{font-size:1.1rem}.field-content .traduccion{font-size:1rem}.field-content .uso{font-size:.9rem;padding:12px 16px}.field-content .btn-ejemplos{font-size:.95rem;padding:16px 28px}.verb-list{gap:20px;grid-template-columns:repeat(3,1fr)}}@media (min-width:1400px){.container{max-width:1400px;padding:40px}.table-vertical{gap:32px;grid-template-columns:repeat(2,1fr)}.verb-list{grid-template-columns:repeat(4,1fr)}}.verb-list{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin-top:20px;padding:10px}.verb-item{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 4px 8px #0000001a;overflow:hidden;transition:all .3s ease}.verb-item:hover{border-color:#667eea;box-shadow:0 8px 16px #00000026;transform:translateY(-2px)}.verb-header{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px;color:#fff;padding:16px;text-align:center}.verb-emoji{display:block;font-size:2rem;margin-bottom:8px}.verb-forms{align-items:center;color:#fff;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:8px}.infinitive{background:#fff3;border-radius:6px;font-size:1.1rem;font-weight:700;padding:4px 8px}.past{background:#ffffff26}.past,.past-participle{border-radius:6px;font-weight:600;padding:4px 8px}.past-participle{background:#ffffff1a}.separator{font-size:1.2rem;font-weight:700}.verb-meaning{color:#ffebf1;font-size:1rem;font-style:italic;font-weight:600;opacity:.9}.verb-examples{background:#f8f9fa;padding:16px}.example-item{background:#fff;border-left:3px solid #667eea;border-radius:8px;box-shadow:0 1px 3px #0000001a;margin-bottom:12px;padding:10px}.example-item:last-child{margin-bottom:0}.example-en{color:#2d3748;font-size:.95rem;font-weight:600;margin-bottom:4px}.example-es{color:#666;font-size:.9rem;font-style:italic}@media (max-width:768px){.verb-list{gap:16px;grid-template-columns:1fr;padding:8px}.verb-header{padding:14px}.verb-emoji{font-size:1.8rem}.verb-forms{gap:6px}.infinitive,.past,.past-participle{font-size:.9rem;padding:3px 6px}.verb-examples{padding:12px}.example-item{padding:8px}}@media (max-width:480px){.verb-list{gap:12px;grid-template-columns:1fr;margin-top:16px}.verb-header{padding:12px}.verb-emoji{font-size:1.6rem}.verb-forms{flex-direction:column;gap:4px}.separator{display:none}}.modal{background-color:#0009;display:block;height:100%;left:0;opacity:0;position:fixed;top:0;transition:opacity .3s ease;width:100%;z-index:1000}.modal.visible{opacity:1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#fff;border-radius:20px;box-shadow:0 25px 80px #0006;display:flex;flex-direction:column;margin:7% auto;max-height:85vh;max-width:900px;opacity:0;overflow:hidden;padding:0;transform:translateY(-50px);transition:all .3s ease;width:90%}.modal-content.visible{opacity:1;transform:translateY(0)}.modal-header{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px 20px 0 0;color:#fff;padding:25px 30px;position:relative}.modal-title{color:#fff;font-size:1.8em;line-height:1.3;margin:0;padding-right:40px}.modal-subtitle{color:#fffc;font-size:.9rem;font-weight:500;margin-top:8px}.close{align-items:center;background:#ffffff1a;border-radius:50%;color:#fffc;cursor:pointer;display:flex;font-size:32px;font-weight:700;height:40px;justify-content:center;position:absolute;right:25px;top:20px;transition:all .3s ease;width:40px}.close:hover{background:#fff3;color:#fff;transform:scale(1.1)}.examples-grid{grid-gap:16px;background:#f8fafc;display:grid;flex:1 1;gap:16px;overflow-y:auto;padding:25px 30px}.example-card{background:#fff;border-left:4px solid #764ba2;border-radius:12px;box-shadow:0 2px 8px #0000001a;padding:20px;position:relative;transition:all .3s ease}.example-card:hover{box-shadow:0 8px 25px #764ba226;transform:translateY(-2px)}.example-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.example-header strong{color:#764ba2;font-size:1.1rem;font-weight:600}.example-badge{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;color:#fff;font-size:.8rem;font-weight:600;padding:4px 10px}.example-eng{background:linear-gradient(135deg,#e3f2fd,#f3e5f5);border:1px solid #e1f5fe;border-radius:8px;color:#1976d2;font-size:1.1em;font-weight:500;line-height:1.6;padding:15px}.modal-footer{background:#f8fafc;border-radius:0 0 20px 20px;border-top:1px solid #e5e7eb;padding:25px 30px;text-align:center}.close-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:25px;box-shadow:0 4px 15px #667eea4d;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:600;margin-bottom:10px;padding:14px 35px;transition:all .3s ease}.close-button:hover{background:linear-gradient(135deg,#5a67d8,#6b46c1);box-shadow:0 6px 20px #667eea66;transform:translateY(-2px)}.close-button:active{box-shadow:0 2px 10px #667eea4d;transform:translateY(0)}.modal-tip{background:#764ba21a;border:1px solid #764ba233;border-radius:8px;color:#6b7280;font-size:.9rem;font-style:italic;margin-top:10px;padding:8px 15px}@media (max-width:768px){.modal-content{margin:20% auto;max-height:90vh;width:95%}.modal-header{padding:20px}.close{font-size:28px;height:35px;right:20px;top:15px;width:35px}.modal-title{font-size:1.4em;padding-right:50px}.examples-grid{padding:20px}.example-card{padding:15px}.modal-footer{padding:20px}.close-button{font-size:1rem;padding:15px 25px;width:100%}.modal-tip{font-size:.85rem}}.quiz-section{background:linear-gradient(135deg,#a8e6cf,#dcedc1);border:1px solid #a7f3d0;border-radius:12px;margin-top:32px;padding:20px}.category-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;color:#764ba2;font-weight:700;line-height:1.2;margin-bottom:24px;text-align:center}.quiz-setup{margin-bottom:24px;text-align:center}.question-count-selector{margin-bottom:20px}.question-count-selector label{color:#374151;display:block;font-size:1rem;font-weight:600;margin-bottom:8px}.question-count-select{background:#fff;border:2px solid #e5e7eb;border-radius:8px;color:#374151;cursor:pointer;font-size:1rem;max-width:200px;padding:12px 16px;transition:all .2s ease;width:100%}.question-count-select:focus{border-color:#764ba2;box-shadow:0 0 0 3px #764ba21a;outline:none}.next-button,.reset-quiz-btn,.start-quiz-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:25px;box-shadow:0 4px 12px #764ba24d;color:#fff;cursor:pointer;display:block;font-size:1rem;font-weight:600;margin:8px auto;max-width:280px;padding:14px 32px;transition:all .3s ease;width:100%}.next-button:hover,.reset-quiz-btn:hover,.start-quiz-btn:hover{box-shadow:0 6px 20px #764ba266;transform:translateY(-2px)}.next-button:active,.reset-quiz-btn:active,.start-quiz-btn:active{transform:translateY(0)}.next-button-container{display:flex;justify-content:center;margin:20px 0;width:100%}.quiz-stats{align-items:center;display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.stat{background:#fff;border-radius:20px;box-shadow:0 2px 8px #0000001a;font-size:1rem;font-weight:600;min-width:160px;padding:12px 20px;text-align:center}.stat.correct{border-left:4px solid #10b981;color:#059669}.stat.incorrect{border-left:4px solid #ef4444;color:#dc2626}.stat.progress{border-left:4px solid #3b82f6;color:#2563eb}.question-header{border-bottom:2px solid #f1f3f4;display:flex;flex-direction:column;gap:12px;margin-bottom:20px;padding-bottom:16px;position:relative;text-align:center}.question-text-container{align-items:center;background:#f8fafc;border-left:4px solid #667eea;border-radius:8px;display:flex;gap:12px;margin-bottom:20px;padding:16px}.question-text{flex:1 1;font-size:1.1rem;line-height:1.5}.tts-inline-button{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:6px;box-shadow:0 2px 4px #0000001a;color:#fff;cursor:pointer;display:flex;flex-shrink:0;font-size:.9rem;height:36px;justify-content:center;transition:all .3s ease;width:36px}.tts-inline-button:hover{box-shadow:0 4px 15px #667eea66;transform:scale(1.05)}.tts-inline-button.playing{animation:pulse 1.5s infinite;background:linear-gradient(135deg,#ef4444,#dc2626)}.option-wrapper{align-items:center;display:flex;gap:8px;margin-bottom:12px}.option-button{flex:1 1}.tts-option-button{align-items:center;background:linear-gradient(135deg,#10b981,#059669);border:none;border-radius:4px;box-shadow:0 2px 4px #0000001a;color:#fff;cursor:pointer;display:flex;flex-shrink:0;font-size:1.7rem;height:auto;justify-content:center;transition:all .3s ease;width:70px}.tts-option-button:hover{box-shadow:0 4px 10px #10b98166;transform:scale(1.05)}.tts-option-button.playing{animation:pulse-small 1.5s infinite;background:linear-gradient(135deg,#ef4444,#dc2626)}@keyframes pulse-small{0%{box-shadow:0 0 0 0 #ef4444b3}70%{box-shadow:0 0 0 6px #ef444400}to{box-shadow:0 0 0 0 #ef444400}}.feedback-section{background:#f8fafc;border-left:4px solid #e5e7eb;border-radius:8px;margin-top:20px;padding:16px}.feedback-result{align-items:center;border-radius:6px;display:flex;gap:12px;margin-bottom:16px;padding:12px}.feedback-result.correct{background:linear-gradient(135deg,#d1fae5,#a7f3d0);border-left:4px solid #10b981}.feedback-result.incorrect{background:linear-gradient(135deg,#fee2e2,#fecaca);border-left:4px solid #ef4444}.feedback-text{color:#374151;flex:1 1;font-weight:600}.tts-feedback-button{align-items:center;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border:none;border-radius:6px;box-shadow:0 2px 4px #0000001a;color:#fff;cursor:pointer;display:flex;flex-shrink:0;font-size:.9rem;height:36px;justify-content:center;transition:all .3s ease;width:36px}.tts-feedback-button:hover{box-shadow:0 4px 15px #8b5cf666;transform:scale(1.05)}.tts-feedback-button.playing{animation:pulse 1.5s infinite;background:linear-gradient(135deg,#ef4444,#dc2626)}.theory-section{background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 1px 3px #0000001a;margin-top:16px;padding:20px}.theory-section h4{border-bottom:2px solid #f1f3f4;color:#667eea;font-size:1.2rem;font-weight:700;margin-bottom:16px;padding-bottom:8px}.translation-section{background:linear-gradient(135deg,#eff6ff,#dbeafe);border-left:4px solid #3b82f6;border-radius:6px;margin-bottom:20px;padding:16px}.translation-section h5{color:#1e40af;font-size:1rem;font-weight:600;margin-bottom:12px}.translation-text{color:#1f2937;font-size:.95rem;line-height:1.6;margin-bottom:8px}.translation-text strong{color:#1e40af;font-weight:600}.translate-link{color:#2563eb;cursor:pointer;font-weight:500;margin-left:8px;text-decoration:underline;transition:color .2s ease}.translate-link:hover{color:#1d4ed8;text-decoration:none}.sentence-container{align-items:center;display:flex;flex-wrap:wrap;gap:8px}.sentence-container .translation-text{flex:1 1;margin-bottom:0}.theory-block{background:#f8fafc;border-left:3px solid #e5e7eb;border-radius:6px;margin-bottom:20px;padding:16px}.theory-block h5{align-items:center;color:#374151;display:flex;font-size:1rem;font-weight:600;gap:8px;margin-bottom:12px}.theory-block p{color:#4b5563;font-size:.95rem;line-height:1.7;margin-bottom:8px}.examples-text .example-line{background:#ecfdf5;border-left:3px solid #10b981;color:#065f46;font-family:Courier New,monospace}.examples-text .example-line,.mistakes-text .mistake-line{border-radius:4px;font-size:.9rem;margin-bottom:8px;padding:8px 12px}.mistakes-text .mistake-line{background:#fef2f2;border-left:3px solid #ef4444;color:#991b1b}.mistakes-text .mistake-line:contains("✅"){background:#f0fdf4;border-left-color:#22c55e;color:#166534}.theory-content strong{color:#1f2937;font-weight:600}.question-number{color:#764ba2;font-size:1rem;font-weight:600;order:2}.question-category{align-self:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;color:#fff;display:inline-block;font-size:.875rem;font-weight:600;order:1;padding:8px 16px}.question-text{color:#374151;font-size:1.125rem;font-weight:500;line-height:1.6;margin-bottom:24px;text-align:center}.options-container{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.option-button{background:linear-gradient(135deg,#f8faff,#e8f0fe);border:2px solid #c7d2fe;border-radius:10px;color:#764ba2;cursor:pointer;font-size:1rem;font-weight:500;line-height:1.4;padding:16px 20px;text-align:left;transition:all .2s ease;width:100%}.option-button:hover:not(:disabled){background:linear-gradient(135deg,#ede9fe,#ddd6fe);border-color:#764ba2;box-shadow:0 2px 8px #764ba233;transform:translateY(-1px)}.option-button:disabled{cursor:not-allowed;opacity:.7}.option-button.correct{background:linear-gradient(135deg,#d1fae5,#a7f3d0);border-color:#10b981;color:#065f46}.option-button.incorrect{background:linear-gradient(135deg,#fee2e2,#fecaca);border-color:#ef4444;color:#991b1b}.feedback{border-radius:10px;font-weight:600;line-height:1.5;margin:16px 0;padding:16px 20px;text-align:center}.feedback.correct{background:linear-gradient(135deg,#d1fae5,#a7f3d0);border:1px solid #10b981;color:#065f46}.feedback.incorrect{background:linear-gradient(135deg,#fee2e2,#fecaca);border:1px solid #ef4444;color:#991b1b}.results-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 4px 12px #0000001a;padding:24px 20px;text-align:center}.results-card h2{color:#764ba2;font-size:1.5rem;margin-bottom:20px}.final-score{font-size:2.5rem;font-weight:700;margin:20px 0}.final-message{color:#6b7280;font-size:1.125rem;line-height:1.5;margin-bottom:24px}.review-container{margin-top:24px;text-align:left}.review-container h3{color:#764ba2;font-size:1.125rem;margin-bottom:16px;text-align:center}.review-item{background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 1px 3px #0000001a;margin-bottom:12px;padding:16px}.review-item.correct{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-left-color:#10b981}.review-item.incorrect{background:linear-gradient(135deg,#fef2f2,#fee2e2);border-left-color:#ef4444}.review-question{color:#374151;font-size:.95rem;font-weight:600;margin-bottom:8px}.review-answer{color:#6b7280;font-size:.875rem;margin-bottom:4px}.review-correct{color:#059669;font-size:.875rem;font-weight:600}@media (max-width:768px){.question-text-container{align-items:stretch;flex-direction:column;gap:8px}.tts-inline-button{align-self:center;border-radius:5px;font-size:.8rem;height:32px;width:32px}.option-wrapper{gap:6px}.tts-option-button{border-radius:3px;font-size:.6rem;height:24px;width:24px}.feedback-result{flex-direction:column;gap:8px;text-align:center}.tts-feedback-button{border-radius:5px;font-size:.8rem;height:32px;width:32px}.theory-section h4{font-size:1rem}.theory-content p{font-size:.9rem}.translation-section{padding:12px}.theory-block{margin-bottom:16px;padding:12px}.theory-block h5{font-size:.95rem}.examples-text .example-line,.mistakes-text .mistake-line{font-size:.85rem;padding:6px 10px}}@media (max-width:480px){.question-text{font-size:1rem}.tts-inline-button{border-radius:4px;font-size:.7rem;height:28px;width:28px}.tts-option-button{border-radius:3px;font-size:1.55rem;height:auto;width:40px}.tts-feedback-button{border-radius:4px;font-size:.7rem;height:28px;width:28px}.feedback-section,.theory-section{padding:12px}.theory-content p{font-size:.85rem}.translation-section{padding:10px}.theory-block{margin-bottom:12px;padding:10px}.theory-block h5{font-size:.9rem}.examples-text .example-line,.mistakes-text .mistake-line{font-size:.8rem;padding:6px 8px}.translation-text{font-size:.9rem}}.hidden{display:none!important}@media (min-width:768px){.quiz-section{border-radius:16px;padding:32px}.category-title{font-size:2rem}.next-button,.reset-quiz-btn,.start-quiz-btn{display:inline-block;margin:8px;width:auto}.next-button-container{margin:24px 0}.quiz-stats{flex-direction:row;gap:24px;justify-content:center}.question-header{align-items:center;flex-direction:row;justify-content:space-between;text-align:left}.question-number{order:1}.question-category{align-self:auto;order:2}.question-text{font-size:1.25rem;text-align:left}.options-container{grid-gap:16px;display:grid;gap:16px;grid-template-columns:1fr 1fr}.question-card{padding:32px}.results-card{padding:40px 32px}.final-score{font-size:3.5rem}}@media (min-width:1024px){.quiz-section{margin:40px;padding:40px}.category-title{font-size:2.25rem}.quiz-stats{gap:40px}.question-text{font-size:1.375rem}.options-container{gap:20px}.option-button{font-size:1.125rem;padding:20px 24px}}.portfolio{overflow-x:hidden;position:relative;z-index:1}.portfolio-projects{background:#f8fafc;padding:4rem 0}.wrapper{margin:0 auto;max-width:1200px;padding:0 2rem}.portfolio-header{margin-bottom:3rem;text-align:center}.portfolio-title{color:#0f172a;font-size:3rem;font-weight:800;letter-spacing:-.02em;margin-bottom:1rem}.portfolio-subtitle{color:#64748b;font-size:1.25rem;font-weight:400}.projects-grid{grid-template-columns:repeat(auto-fit,minmax(350px,1fr))}.project-card{border:1px solid #0000000d;border-radius:15px;box-shadow:0 10px 30px #0000001a;transition:all .3s ease}.project-card:hover{box-shadow:0 20px 40px #00000026;transform:translateY(-10px)}.project-card img{border-bottom:1px solid #0000001a;height:200px;object-fit:cover;width:100%}.project-info{padding:1.5rem}.project-info h3{color:#2c3e50;font-size:1.2rem;font-weight:600;margin-bottom:.5rem}.project-info p{color:#7f8c8d;font-size:.9rem;margin-bottom:1rem}.project-link{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;color:#fff;display:inline-block;font-size:.9rem;font-weight:500;padding:.5rem 1rem;text-decoration:none;transition:all .3s ease}.project-link:hover{box-shadow:0 5px 15px #0003;transform:translateY(-2px)}.portfolio-cta{background:#fff;border-radius:20px;box-shadow:0 10px 30px #0000001a;padding:3rem;text-align:center}.portfolio-cta p{color:#2c3e50;font-size:1.5rem;font-weight:500;margin-bottom:1.5rem}.cta-button{border-radius:30px;box-shadow:0 5px 15px #0003;display:inline-block;font-size:1.1rem}.cta-button:hover{box-shadow:0 10px 25px #0000004d;transform:translateY(-3px)}@media (max-width:768px){.portfolio-title{font-size:2.5rem}.projects-grid{gap:1.5rem;grid-template-columns:1fr}.wrapper{padding:0 1rem}.portfolio-cta{padding:2rem}.portfolio-cta p{font-size:1.3rem}}@media (max-width:480px){.portfolio-title{font-size:2rem}.portfolio-subtitle{font-size:1.1rem}.project-card{margin:0 .5rem}.portfolio-cta{padding:1.5rem}}.portfolio{background:#fff;color:#333;font-family:Inter,Segoe UI,Roboto,sans-serif;line-height:1.6;min-height:100vh;width:100%}.container{padding:0 20px}.section{padding:80px 0}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;margin-bottom:1rem}h1{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;font-size:3rem}h2{color:#2d3748;font-size:2.5rem}h3{color:#4a5568;font-size:1.8rem}p{color:#718096;font-size:1.1rem;line-height:1.8;margin-bottom:1rem}.btn{border:none;border-radius:8px;cursor:pointer;display:inline-block;font-size:1rem;font-weight:600;padding:12px 24px;text-decoration:none;transition:all .3s ease}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 15px #667eea4d}.btn-primary:hover{box-shadow:0 8px 25px #667eea66}.btn-outline{background:#0000;border:2px solid #667eea;color:#667eea}.btn-outline:hover{background:#667eea;color:#fff}.card{background:#fff;border-radius:12px;box-shadow:0 4px 20px #0000001a;overflow:hidden;transition:all .3s ease}.card:hover{box-shadow:0 8px 30px #00000026;transform:translateY(-5px)}.grid{grid-gap:2rem;display:grid;gap:2rem}.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}@media (max-width:768px){.container{padding:0 15px}.section{padding:60px 0}h1{font-size:2.5rem}h2{font-size:2rem}.grid{gap:1.5rem}}.hero{background:linear-gradient(135deg,#f8fafc,#f1f5f9);display:flex;overflow:hidden;padding-bottom:5rem;padding-top:5rem}.hero,.hero-content{align-items:center;position:relative}.hero-content{grid-gap:4rem;display:grid;gap:4rem;grid-template-columns:1fr 1fr;z-index:2}.hero-text{padding:2rem 0}.hero-title{color:#0f172a;font-size:4rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-bottom:1.5rem}.hero-subtitle{color:#3b82f6;font-size:1.2rem;font-weight:600;line-height:1.6;margin-bottom:1.5rem}.hero-description{color:#475569;font-size:1.1rem;line-height:1.8;margin-bottom:2.5rem}.hero-buttons{display:flex;flex-wrap:wrap;gap:1rem}.btn-primary{align-items:center;background:#3b82f6;border:none;border-radius:12px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;gap:.5rem;padding:1rem 2rem;text-align:center;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn-primary:hover{background:#2563eb;box-shadow:0 10px 25px #3b82f64d;transform:translateY(-2px)}.btn-secondary{align-items:center;background:#0000;border:2px solid #e2e8f0;border-radius:12px;color:#475569;cursor:pointer;display:inline-flex;font-size:1rem;font-weight:600;gap:.5rem;padding:1rem 2rem;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn-secondary:hover{border-color:#3b82f6;box-shadow:0 10px 25px #0000001a;color:#3b82f6;transform:translateY(-2px)}.hero-image{align-items:center;display:flex;justify-content:center;position:relative}.hero-image img{border-radius:20px;box-shadow:0 20px 60px #00000026;height:auto;max-width:400px;position:relative;width:100%;z-index:2}.hero-image-overlay{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;bottom:-20px;left:20px;position:absolute;right:-20px;top:20px;z-index:1}.hero-background{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:1}.hero-shape{animation:float 6s ease-in-out infinite;background:linear-gradient(135deg,#667eea1a,#764ba21a);height:600px;right:-20%;top:-50%;width:600px}.hero-shape,.hero-shape-2{border-radius:50%;position:absolute}.hero-shape-2{animation:float 8s ease-in-out infinite reverse;background:linear-gradient(135deg,#764ba21a,#667eea1a);bottom:-30%;height:400px;left:-10%;width:400px}@keyframes float{0%,to{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(180deg)}}@media (max-width:1024px){.hero-content{gap:3rem}.hero-title{font-size:3.5rem}}@media (max-width:768px){.hero{min-height:90vh;padding-top:100px}.hero-content{gap:3rem;grid-template-columns:1fr;text-align:center}.hero-title{font-size:2.8rem}.hero-subtitle{font-size:1.1rem}.hero-buttons{justify-content:center}.hero-image img{max-width:300px}}@media (max-width:480px){.hero-title{font-size:2.2rem}.hero-subtitle{font-size:1rem}.hero-buttons{align-items:center;flex-direction:column}.btn{max-width:250px;width:100%}}.projects-section{background:#fff;padding:6rem 0;position:relative}.projects-section:before{background:linear-gradient(90deg,#0000,#e5e7eb 50%,#0000);content:"";height:1px;left:0;position:absolute;right:0;top:0}.projects-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));margin-bottom:4rem}.project-card{background:#fff;border:1px solid #f1f5f9;border-radius:16px;box-shadow:0 4px 6px -1px #0000001a;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.project-card:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;transform:translateY(-8px)}.project-image{background:#f8fafc;height:240px;overflow:hidden;position:relative}.project-image img{height:100%;object-fit:cover;transition:all .3s ease;width:100%}.project-card:hover .project-image img{transform:scale(1.05)}.project-overlay{align-items:center;background:linear-gradient(135deg,#667eeae6,#764ba2e6);bottom:0;display:flex;justify-content:center;left:0;opacity:0;position:absolute;right:0;top:0;transition:all .3s ease}.project-card:hover .project-overlay{opacity:1}.project-links{display:flex;gap:1rem}.project-link-btn{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border:1px solid #ffffff4d;border-radius:12px;color:#fff;display:flex;font-size:1.25rem;height:48px;justify-content:center;text-decoration:none;transition:all .3s ease;width:48px}.project-link-btn:hover{background:#ffffff4d;transform:translateY(-2px)}.project-content{padding:1.5rem}.project-meta{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.project-type{color:#667eea;letter-spacing:1px;text-transform:uppercase}.project-status,.project-type{font-size:.75rem;font-weight:500}.project-status{border-radius:50px;padding:.25rem .75rem}.project-status.activo{background:#dcfce7;color:#166534}.project-status.completado{background:#dbeafe;color:#1e40af}.project-status.mantenimiento{background:#fef3c7;color:#92400e}.project-title{color:#1a202c;font-size:1.25rem;font-weight:600;line-height:1.3;margin-bottom:.5rem}.project-description{color:#64748b;font-size:.9rem;line-height:1.6;margin-bottom:1rem}.project-technologies{display:flex;flex-wrap:wrap;gap:.5rem}.projects-cta{background:linear-gradient(135deg,#667eea10,#764ba210);border:1px solid #e2e8f0;border-radius:20px;padding:3rem;text-align:center}.projects-cta h3{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);background-clip:text;-webkit-background-clip:text;color:#1f2937;font-size:1.75rem;font-weight:700;margin-bottom:1rem}.projects-cta p{color:#374151;font-size:1.25rem;font-weight:500;margin-bottom:1.5rem}.cta-button{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;box-shadow:0 4px 14px 0 #667eea4d;color:#fff;cursor:pointer;display:inline-flex;font-size:1rem;font-weight:600;gap:.5rem;padding:1rem 2rem;text-decoration:none;transition:all .3s ease}.cta-button:hover{box-shadow:0 8px 25px 0 #667eea66;transform:translateY(-2px)}.cta-arrow{transition:transform .3s ease}.cta-button:hover .cta-arrow{transform:translateX(3px)}@media (max-width:768px){.projects-section{padding:4rem 0}.container{padding:0 1rem}.section-title{font-size:2.5rem}.projects-grid{gap:1.5rem;grid-template-columns:1fr}.project-card{margin:0}.projects-cta{padding:2rem}}@media (max-width:480px){.section-title{font-size:2rem}.project-content{padding:1rem}.projects-cta{padding:1.5rem}.projects-cta h3{font-size:1.5rem}.cta-button{padding:.875rem 1.5rem}}.projects-toggle{display:flex;justify-content:center;margin:3rem 0 2rem}.toggle-projects-btn{align-items:center;background:#3b82f6;border:none;border-radius:50px;box-shadow:0 4px 6px -1px #3b82f61a,0 2px 4px -1px #3b82f60f;color:#fff;cursor:pointer;display:flex;font-size:1rem;font-weight:500;gap:.5rem;padding:.875rem 2rem;transition:all .3s ease}.toggle-projects-btn:hover{background:#2563eb;box-shadow:0 10px 25px -3px #3b82f64d,0 4px 6px -2px #3b82f60d;transform:translateY(-2px)}.toggle-projects-btn:active{transform:translateY(0)}.toggle-arrow{font-size:1.2rem;transition:transform .3s ease}.toggle-arrow.rotated{transform:rotate(180deg)}@media (max-width:768px){.toggle-projects-btn{font-size:.875rem;padding:.75rem 1.5rem}.projects-toggle{margin:2rem 0 1.5rem}}.skills-section{background:#fff;padding:6rem 0;position:relative}.skills-section:before{background:linear-gradient(90deg,#0000,#e2e8f0 50%,#0000);content:"";height:1px;left:0;position:absolute;right:0;top:0}.section-title{background:linear-gradient(135deg,#1a202c,#2d3748)}.skills-container{margin-bottom:4rem}.skill-category{margin-bottom:3rem}.category-title{align-items:center;color:#1a202c;display:flex;font-size:1.5rem;font-weight:600;gap:.5rem;margin-bottom:1.5rem}.skills-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.skill-card{background:#fff;border:1px solid #f1f5f9;border-radius:16px;box-shadow:0 1px 3px 0 #0000001a;overflow:hidden;padding:1.5rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.skill-card:before{background:linear-gradient(135deg,#667eea,#764ba2);content:"";height:3px;left:0;position:absolute;right:0;top:0;transform:scaleX(0);transition:transform .3s ease}.skill-card:hover:before{transform:scaleX(1)}.skill-card:hover{box-shadow:0 10px 25px -5px #0000001a,0 4px 6px -2px #0000000d;transform:translateY(-4px)}.skill-header{gap:1rem;margin-bottom:1rem}.skill-header,.skill-icon{align-items:center;display:flex}.skill-icon{background:linear-gradient(135deg,#f8fafc,#e2e8f0);border:1px solid #e2e8f0;border-radius:12px;font-size:2rem;height:48px;justify-content:center;width:48px}.skill-info{display:flex;flex:1 1;flex-direction:column;gap:.25rem}.skill-name{color:#1a202c;font-size:1rem;font-weight:600;margin:0}.skill-level{border-radius:50px;font-size:.75rem;font-weight:500;padding:.25rem .75rem;width:-webkit-fit-content;width:fit-content}.skill-bar{background:#f1f5f9;height:8px;overflow:hidden}.skill-bar,.skill-progress{border-radius:50px;position:relative}.skill-progress{height:100%;transition:width 1s ease-in-out}.skill-percentage{background:#fff;border-radius:6px;box-shadow:0 2px 4px #0000001a;color:#374151;font-size:.75rem;font-weight:600;opacity:0;padding:.25rem .5rem;position:absolute;right:8px;top:-28px;transition:opacity .3s ease}.skill-card:hover .skill-percentage{opacity:1}.skills-summary{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:4rem}.summary-card{background:linear-gradient(135deg,#f8fafc,#fff);border:1px solid #e2e8f0;border-radius:16px;padding:2rem;text-align:center;transition:all .3s ease}.summary-card:hover{box-shadow:0 10px 25px -5px #0000001a;transform:translateY(-4px)}.summary-icon{display:block;font-size:3rem;margin-bottom:1rem}.summary-card h3{color:#1a202c;font-size:1.25rem;font-weight:600;margin-bottom:1rem}.summary-card p{color:#64748b;line-height:1.6;margin:0}@media (max-width:768px){.skills-section{padding:4rem 0}.container{padding:0 1rem}.section-title{font-size:2.5rem}.skills-grid{gap:1rem;grid-template-columns:1fr}.skill-card{padding:1.25rem}.skills-summary{gap:1.5rem;grid-template-columns:1fr}.summary-card{padding:1.5rem}}@media (max-width:480px){.section-title{font-size:2rem}.category-title{font-size:1rem}.skill-card{padding:1rem}.skill-header{gap:.75rem}.skill-icon{font-size:1.5rem;height:40px;width:40px}.summary-card{padding:1.25rem}.summary-icon{font-size:2.5rem}}.experience-section{background:linear-gradient(180deg,#f8fafc,#fff);padding:6rem 0;position:relative}.experience-section:before{background:linear-gradient(90deg,#0000,#e2e8f0 50%,#0000);content:"";height:1px;left:0;position:absolute;right:0;top:0}.section-title{background:#fff}.timeline{margin:0 auto 4rem;max-width:800px;position:relative}.timeline-item{display:flex;margin-bottom:3rem;position:relative}.timeline-marker{align-items:center;display:flex;flex-direction:column;flex-shrink:0;margin-right:2rem}.timeline-icon{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;box-shadow:0 4px 20px #667eea4d;color:#fff;display:flex;font-size:1.5rem;height:56px;justify-content:center;position:relative;width:56px;z-index:2}.timeline-line{background:linear-gradient(180deg,#667eea,#764ba2);height:100%;margin-top:1rem;opacity:.3;width:2px}.timeline-item:last-child .timeline-line{display:none}.timeline-content{flex:1 1;margin-top:.5rem}.timeline-card{background:#fff;border:1px solid #f1f5f9;border-radius:16px;box-shadow:0 4px 6px -1px #0000001a;padding:2rem;position:relative;transition:all .3s ease}.timeline-card:before{border-bottom:8px solid #0000;border-right:8px solid #fff;border-top:8px solid #0000;content:"";height:0;left:-8px;position:absolute;top:24px;width:0}.timeline-card:hover{box-shadow:0 10px 25px -5px #0000001a,0 4px 6px -2px #0000000d;transform:translateY(-4px)}.card-header{align-items:flex-start;display:flex;gap:1rem;justify-content:space-between;margin-bottom:1.5rem}.position-info{flex:1 1}.position-title{color:#1a202c;font-size:1.25rem;font-weight:600;margin:0 0 .5rem}.company-name{color:#667eea;font-size:1rem;font-weight:500;margin:0 0 .5rem}.location{align-items:center;color:#64748b;display:flex;font-size:.875rem;gap:.25rem}.date-info{flex-shrink:0;text-align:right}.date-range{color:#374151;font-size:.875rem;font-weight:500;margin-bottom:.25rem}.duration{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:50px;color:#64748b;font-size:.75rem;padding:.25rem .75rem;text-align:center}.card-body{line-height:1.6}.description{font-size:.95rem}.achievements,.description{margin-bottom:1.5rem}.achievements h5{color:#1a202c;font-size:.875rem;font-weight:600;letter-spacing:.5px;margin-bottom:.75rem;text-transform:uppercase}.achievements ul{list-style:none;margin:0;padding:0}.achievements li{color:#374151;font-size:.9rem;padding:.5rem 0 .5rem 1.5rem;position:relative}.achievements li:before{color:#10b981;content:"✓";font-weight:700;left:0;position:absolute}.technologies h5{color:#1a202c;font-size:.875rem;font-weight:600;letter-spacing:.5px;margin-bottom:.75rem;text-transform:uppercase}.tech-tag{background:linear-gradient(135deg,#667eea10,#764ba210);border:1px solid #667eea20;color:#667eea}.experience-stats{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:0 auto;max-width:800px}.stat-card{background:#fff;border:1px solid #f1f5f9;border-radius:16px;box-shadow:0 4px 6px -1px #0000001a;padding:2rem;text-align:center;transition:all .3s ease}.stat-card:hover{box-shadow:0 10px 25px -5px #0000001a;transform:translateY(-4px)}.stat-number{font-size:2.5rem;margin-bottom:.5rem}.stat-label{font-size:.875rem}@media (max-width:768px){.experience-section{padding:4rem 0}.container{padding:0 1rem}.section-title{font-size:2.5rem}.timeline-marker{margin-right:1rem}.timeline-icon{font-size:1.25rem;height:48px;width:48px}.timeline-card{padding:1.5rem}.card-header{align-items:flex-start;flex-direction:column;gap:1rem}.date-info{text-align:left;width:100%}.experience-stats{gap:1.5rem;grid-template-columns:repeat(2,1fr)}.stat-card{padding:1.5rem}.stat-number{font-size:2rem}}@media (max-width:480px){.section-title{font-size:2rem}.timeline-marker{margin-right:.75rem}.timeline-icon{font-size:1rem;height:40px;width:40px}.timeline-card{padding:1.25rem}.timeline-card:before{border-bottom-width:6px;border-right-width:6px;border-top-width:6px;left:-6px}.position-title{font-size:1.125rem}.experience-stats{grid-template-columns:1fr}.stat-card{padding:1.25rem}}.services-section{background:#fff;padding:6rem 0;position:relative}.services-section:before{background:linear-gradient(90deg,#0000,#e2e8f0 50%,#0000);content:"";height:1px;left:0;position:absolute;right:0;top:0}.section-tag{background:linear-gradient(135deg,#667eea20,#764ba220);border:1px solid #667eea30;color:#667eea}.section-title{-webkit-text-fill-color:#0000}.services-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));margin-bottom:4rem}.service-card{background:#fff;border:1px solid #f1f5f9;border-radius:20px;box-shadow:0 4px 6px -1px #0000001a;overflow:hidden;padding:2rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.service-card:before{background:linear-gradient(135deg,#667eea,#764ba2);content:"";height:4px;left:0;position:absolute;right:0;top:0;transform:scaleX(0);transition:transform .3s ease}.service-card:hover:before{transform:scaleX(1)}.service-card:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;transform:translateY(-8px)}.service-header{align-items:flex-start;display:flex;gap:1rem;margin-bottom:1.5rem}.service-icon{align-items:center;background:linear-gradient(135deg,#667eea10,#764ba210);border:1px solid #667eea20;border-radius:16px;display:flex;flex-shrink:0;font-size:2.5rem;height:64px;justify-content:center;width:64px}.service-info{flex:1 1}.service-name{color:#1a202c;font-size:1.25rem;font-weight:600;line-height:1.3;margin:0 0 .75rem}.service-price{border-radius:50px;font-size:.875rem;font-weight:600;padding:.5rem 1rem;width:-webkit-fit-content;width:fit-content}.service-description{color:#64748b;font-size:.95rem;line-height:1.6;margin-bottom:1.5rem}.service-features{margin-bottom:1.5rem}.service-features h4{color:#1a202c;font-size:.875rem;font-weight:600;letter-spacing:.5px;margin-bottom:.75rem;text-transform:uppercase}.service-features ul{list-style:none;margin:0;padding:0}.service-features li{color:#374151;font-size:.9rem;padding:.375rem 0 .375rem 1.5rem;position:relative}.service-features li:before{color:#10b981;content:"✓";font-weight:700;left:0;position:absolute}.service-technologies h4{color:#1a202c;font-size:.875rem;font-weight:600;letter-spacing:.5px;margin-bottom:.75rem;text-transform:uppercase}.tech-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.tech-tag{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:50px;color:#475569;font-size:.75rem;font-weight:500;padding:.25rem .75rem}.service-footer{border-top:1px solid #f1f5f9;gap:1rem;justify-content:space-between;padding-top:1rem}.delivery-time,.service-footer{align-items:center;display:flex}.delivery-time{color:#64748b;font-size:.875rem;font-weight:500;gap:.5rem}.time-icon{font-size:1rem}.contact-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;box-shadow:0 4px 14px 0 #667eea4d;cursor:pointer;font-size:.875rem;font-weight:600}.contact-btn:hover{box-shadow:0 8px 25px 0 #667eea66}.contact-btn:hover .btn-arrow{transform:translateX(3px)}.services-cta{background:linear-gradient(135deg,#f8fafc,#fff);border:1px solid #e2e8f0;border-radius:24px;padding:3rem;text-align:center}.cta-content{margin-bottom:3rem}.cta-content h3{font-size:2rem}.cta-content p{font-size:1.125rem;max-width:600px}.cta-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.primary-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;box-shadow:0 4px 14px 0 #667eea4d;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:1rem 2rem;transition:all .3s ease}.primary-btn:hover{box-shadow:0 8px 25px 0 #667eea66;transform:translateY(-2px)}.secondary-btn{background:#fff;border:2px solid #667eea;border-radius:12px;color:#667eea;cursor:pointer;font-size:1rem;font-weight:600;padding:1rem 2rem;transition:all .3s ease}.secondary-btn:hover{background:#667eea;color:#fff;transform:translateY(-2px)}.whatsapp-btn{align-items:center;background:linear-gradient(135deg,#25d366,#128c7e);border:none;border-radius:12px;box-shadow:0 4px 14px 0 #25d3664d;color:#fff;cursor:pointer;display:inline-flex;font-size:1rem;font-weight:600;gap:.5rem;padding:1rem 2rem;transition:all .3s ease}.whatsapp-btn:hover{background:linear-gradient(135deg,#128c7e,#075e54);box-shadow:0 8px 25px 0 #25d36666;transform:translateY(-2px)}.cta-features{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.feature-item{background:#fff;border:1px solid #f1f5f9;border-radius:12px;gap:1rem;padding:1rem;text-align:left}.feature-icon,.feature-item{align-items:center;display:flex}.feature-icon{background:linear-gradient(135deg,#667eea10,#764ba210);border:1px solid #667eea20;border-radius:12px;flex-shrink:0;font-size:1.5rem;height:48px;justify-content:center;width:48px}.feature-item h4{color:#1a202c;font-size:.875rem;font-weight:600;margin:0 0 .25rem}.feature-item p{color:#64748b;font-size:.8rem;margin:0}@media (max-width:768px){.services-section{padding:4rem 0}.container{padding:0 1rem}.section-title{font-size:2.5rem}.services-grid{gap:1.5rem;grid-template-columns:1fr}.service-card{padding:1.5rem}.service-footer{align-items:stretch;flex-direction:column;gap:1rem}.contact-btn{justify-content:center;width:100%}.services-cta{padding:2rem}.cta-content h3{font-size:1.75rem}.cta-actions{align-items:center;flex-direction:column}.primary-btn,.secondary-btn{max-width:300px;width:100%}.cta-features{grid-template-columns:1fr}}@media (max-width:480px){.section-title{font-size:2rem}.service-card{padding:1.25rem}.service-header{align-items:center;flex-direction:column;gap:1rem;text-align:center}.service-icon{font-size:2rem;height:56px;width:56px}.services-cta{padding:1.5rem}.cta-content h3{font-size:1.5rem}.feature-item{padding:.75rem}.whatsapp-btn{font-size:.875rem;padding:.875rem 1.5rem}}.about-section{background:#fff;padding:6rem 0;position:relative}.about-section:before{background:linear-gradient(90deg,#0000,#e5e7eb 50%,#0000);content:"";height:1px;left:0;position:absolute;right:0;top:0}.container{padding:0 2rem}.section-header{max-width:600px}.section-tag{font-size:.875rem}.about-content{grid-gap:4rem;align-items:start;display:grid;gap:4rem;grid-template-columns:1fr 1fr}.about-text{display:flex;flex-direction:column;gap:2rem}.intro h3{color:#1a202c;font-size:1.75rem;font-weight:600;margin-bottom:.5rem}.role{color:#667eea;font-size:1.125rem;font-weight:500;margin-bottom:1rem}.description{color:#374151;font-size:1rem;line-height:1.6}.journey h4,.values h4{color:#1a202c;font-size:1.25rem;font-weight:600;margin-bottom:1rem}.journey p{color:#374151;font-size:.95rem;line-height:1.6;margin-bottom:1rem}.values-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:1fr 1fr}.value-item{align-items:flex-start;background:#fff;border:1px solid #f1f5f9;border-radius:12px;display:flex;gap:1rem;padding:1rem;transition:all .3s ease}.value-item:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.value-icon{align-items:center;background:linear-gradient(135deg,#667eea10,#764ba210);border:1px solid #667eea20;border-radius:10px;display:flex;flex-shrink:0;font-size:1.5rem;height:40px;justify-content:center;width:40px}.value-item h5{color:#1a202c;font-size:.875rem;font-weight:600;margin:0 0 .25rem}.value-item p{color:#64748b;font-size:.8rem;line-height:1.4;margin:0}.about-stats{background:#fff;border:1px solid #f1f5f9;border-radius:20px;box-shadow:0 4px 6px -1px #0000001a;padding:2rem}.about-stats h4{color:#1a202c;font-size:1.25rem;font-weight:600;margin-bottom:2rem;text-align:center}.stats-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:1fr 1fr;margin-bottom:2rem}.stat-item{background:linear-gradient(135deg,#f8fafc,#fff);border:1px solid #e2e8f0;border-radius:12px;padding:1rem;text-align:center}.stat-number{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;display:block;font-size:2rem;font-weight:700;margin-bottom:.25rem}.stat-label{color:#64748b;font-size:.75rem;font-weight:500;letter-spacing:.5px;text-transform:uppercase}.personal-note{background:linear-gradient(135deg,#667eea05,#764ba205);border:1px solid #667eea20;border-radius:12px;display:flex;gap:1rem;padding:1.5rem}.note-icon{align-items:center;display:flex;flex-shrink:0;font-size:1.5rem;height:40px;justify-content:center;width:40px}.note-content h5{color:#1a202c;font-size:.875rem;font-weight:600;margin:0 0 .5rem}.note-content p{color:#64748b;font-size:.8rem;line-height:1.5;margin:0}@media (max-width:768px){.about-section{padding:4rem 0}.container{padding:0 1rem}.section-title{font-size:2.5rem}.about-content{gap:2rem;grid-template-columns:1fr}.values-grid{gap:1rem;grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}.about-stats{padding:1.5rem}}@media (max-width:480px){.section-title{font-size:2rem}.intro h3{font-size:1.5rem}.value-item{padding:.75rem}.stats-grid{gap:1rem;grid-template-columns:1fr}.stat-number{font-size:1.75rem}.personal-note{flex-direction:column;padding:1.25rem;text-align:center}}.contact-section{background:#f8fafc;min-height:80vh;padding:4rem 2rem}.contact-container{margin:0 auto;max-width:1000px}.contact-title{color:#1e293b;font-size:2.5rem;font-weight:700;margin-bottom:1rem;text-align:center}.contact-subtitle{color:#64748b;font-size:1.2rem;text-align:center}.contact-content,.contact-subtitle{margin-bottom:3rem}.contact-form-container h3,.contact-info h3{color:#1e293b;font-size:1.5rem;font-weight:600;margin-bottom:1.5rem}.contact-item{align-items:flex-start;background:#fff;border-radius:10px;box-shadow:0 2px 4px #0000000d;gap:1rem;margin-bottom:1.5rem;padding:1rem;transition:all .3s ease}.contact-item:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.contact-icon{background:#f1f5f9;border-radius:8px;color:#000;font-size:1.5rem;min-width:40px;padding:.5rem}.contact-details strong{color:#000;display:block;font-size:.9rem;font-weight:600;margin-bottom:.25rem}.contact-details a{color:#000;font-weight:500;text-decoration:none}.contact-details a:hover{color:#3b82f6;text-decoration:underline}.contact-details .social-name span,.contact-details span{color:#000}.social-section{background:#fff;border-radius:10px;box-shadow:0 2px 4px #0000000d;margin-top:2rem;padding:1.5rem}.social-section h4{color:#374151;font-size:1.1rem;font-weight:600;margin-bottom:1rem}.social-links{grid-gap:.75rem;display:grid;grid-template-columns:repeat(2,1fr)}.social-link{background:#f8fafc;border-radius:8px;color:#374151;gap:.5rem}.social-link:hover{background:#3b82f6;color:#fff;transform:translateX(3px)}.social-icon{color:#3b82f6;font-size:1.1rem;transition:color .3s ease}.social-name{font-size:.9rem}.contact-form-container{background:#fff;border-radius:12px;box-shadow:0 4px 6px #0000000d;height:-webkit-fit-content;height:fit-content;padding:2rem}.form-group label{font-size:.9rem}.form-group input,.form-group select,.form-group textarea{background:#fafafa;border-radius:8px;font-size:1rem;padding:.75rem;transition:border-color .3s ease}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{background:#fff}.form-group textarea{min-height:100px}.submit-btn{align-items:center;border-radius:8px;display:flex;gap:.5rem;justify-content:center;transition:all .3s ease}.submit-btn:hover{box-shadow:0 4px 12px #3b82f64d}.services-available{background:#fff;border-radius:12px;box-shadow:0 2px 4px #0000000d;margin-bottom:2rem;padding:2rem}.services-available h3{color:#1e293b;font-size:1.3rem;font-weight:600;margin-bottom:1rem}.services-list{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:repeat(2,1fr);list-style:none;margin:0;padding:0}.services-list li{color:#64748b;padding:.5rem 0 .5rem 1.5rem;position:relative}.services-list li:before{color:#10b981;content:"✓";font-weight:700;left:0;position:absolute}.quick-contact{color:#fff;padding:2rem;text-align:center}.quick-contact p{color:#fff;font-size:1.1rem;font-weight:500;margin-bottom:1.5rem}.quick-buttons{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.quick-btn{align-items:center;border-radius:8px;display:flex;font-size:.9rem;font-weight:600;gap:.5rem;padding:.75rem 1.5rem;text-decoration:none;transition:all .3s ease}.quick-btn.whatsapp{background:#25d366;color:#fff}.quick-btn.whatsapp:hover{background:#20b358;transform:translateY(-2px)}.quick-btn.email{background:#fff;color:#374151}.quick-btn.email:hover{background:#f3f4f6;transform:translateY(-2px)}@media (max-width:768px){.contact-section{padding:3rem 1rem}.contact-title{font-size:2rem}.contact-subtitle{font-size:1rem;margin-bottom:2rem}.contact-content{gap:2.5rem;grid-template-columns:1fr}.contact-info,.contact-item{text-align:center}.contact-item{justify-content:center}.social-links{gap:1rem;grid-template-columns:repeat(2,1fr);justify-items:center}.social-link{max-width:200px;width:100%}.services-list{grid-template-columns:1fr}.quick-buttons{align-items:center;flex-direction:column;gap:1rem}.quick-btn{justify-content:center;max-width:250px;width:100%}}@media (max-width:480px){.contact-section{padding:2rem .5rem}.contact-title{font-size:1.8rem;margin-bottom:.5rem}.contact-subtitle{font-size:.9rem;margin-bottom:1.5rem}.contact-content{gap:2rem}.contact-info h3{font-size:1.2rem;margin-bottom:1rem}.contact-item{background:#f8fafc;border-radius:8px;flex-direction:column;gap:.5rem;padding:1rem}.contact-icon{font-size:1.5rem}.social-links{gap:.75rem;grid-template-columns:1fr}.social-link{font-size:.85rem;padding:.75rem}.social-icon{font-size:1.2rem}.contact-form-container{padding:1.5rem}.form-group{margin-bottom:1rem}.form-input,.form-textarea{font-size:.9rem;padding:.75rem}.submit-btn{font-size:.9rem;padding:.75rem 1.5rem}.quick-contact,.services-available{padding:1.5rem}.quick-btn{font-size:.85rem;padding:.75rem 1rem}}.contact-section:before{background:linear-gradient(90deg,#0000,#e5e7eb 50%,#0000);content:"";height:1px;left:0;position:absolute;right:0;top:0}.container{margin:0 auto;max-width:1200px;padding:2rem}.section-header{margin-bottom:4rem;margin-left:auto;margin-right:auto;max-width:800px;text-align:center}.section-tag{background:#3b82f61a;border:1px solid #3b82f633;border-radius:50px;color:#3b82f6;display:inline-block;font-size:1.3rem;font-weight:500;letter-spacing:.5px;margin-bottom:1rem;padding:.5rem 1rem}.section-title{-webkit-background-clip:text;background-clip:text;color:#0f172a;font-size:3rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:1rem}.section-description{color:#64748b;font-size:1.125rem;line-height:1.6;margin:0}.contact-content{grid-gap:3rem;display:grid;gap:3rem;grid-template-columns:1fr 1fr;margin-bottom:4rem}.form-card,.info-card{background:#fff;border:1px solid #f1f5f9;border-radius:20px;box-shadow:0 4px 6px -1px #0000001a;padding:2rem}.form-card h3,.info-card h3{color:#1a202c;font-size:1.5rem;font-weight:600;margin-bottom:1rem}.form-card p{color:#64748b;margin-bottom:2rem}.contact-methods{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2rem}.contact-method{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 1px 3px #0000000d;display:flex;gap:1rem;padding:1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.contact-method:hover{border-color:#3b82f6;box-shadow:0 8px 25px #0000001a;transform:translateY(-2px)}.method-icon{align-items:center;background:#3b82f61a;border:1px solid #3b82f633;border-radius:12px;color:#3b82f6;display:flex;flex-shrink:0;font-size:1.5rem;height:48px;justify-content:center;width:48px}.method-info h4{color:#0f172a;font-size:.875rem;font-weight:600;letter-spacing:.5px;margin:0 0 .25rem;text-transform:uppercase}.method-info a{color:#3b82f6;font-weight:500;text-decoration:none;transition:color .3s ease}.method-info a:hover{color:#2563eb}.method-info span{color:#64748b;font-size:.9rem}.social-connect h4{color:#1a202c;font-size:1rem;font-weight:600;margin-bottom:1rem}.social-links{flex-direction:column;gap:.75rem}.social-link{background:linear-gradient(135deg,#f8fafc,#fff);border:1px solid #e2e8f0;border-radius:10px;gap:.75rem;padding:.75rem}.social-link:hover{background:linear-gradient(135deg,#667eea05,#764ba205);border-color:#667eea30;transform:translateX(4px)}.social-icon{text-align:center;width:32px}.social-name{color:#000;font-size:.875rem;font-weight:500}.contact-form{display:flex;flex-direction:column;gap:1.5rem}.form-row{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:1fr 1fr}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{color:#374151;font-size:.875rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.form-group input,.form-group select,.form-group textarea{background:#fff;border:2px solid #e5e7eb;border-radius:12px;font-family:inherit;font-size:.95rem;padding:1rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;outline:none}.form-group textarea{min-height:120px;resize:vertical}.submit-btn{background:#3b82f6;border:none;border-radius:12px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;letter-spacing:.5px;padding:1rem 2rem;text-transform:uppercase;transition:all .3s cubic-bezier(.4,0,.2,1)}.submit-btn:hover{background:#2563eb;box-shadow:0 10px 25px #3b82f64d;transform:translateY(-2px)}.btn-icon{font-size:1.125rem}.btn-arrow{transition:transform .3s ease}.submit-btn:hover .btn-arrow{transform:translateX(3px)}.contact-cta{background:linear-gradient(135deg,#f8fafc,#fff);border:1px solid #e2e8f0;border-radius:20px;padding:3rem;text-align:center}.cta-content h3{color:#1a202c;font-size:1.75rem;font-weight:600;margin-bottom:1rem}.cta-content p{color:#64748b;margin-bottom:2rem;margin-left:auto;margin-right:auto;max-width:500px}.cta-buttons{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.cta-btn{align-items:center;border-radius:12px;display:inline-flex;font-size:1rem;font-weight:600;gap:.5rem;padding:1rem 2rem;text-decoration:none;transition:all .3s ease}.cta-btn.primary{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 14px 0 #10b9814d;color:#fff}.cta-btn.primary:hover{box-shadow:0 8px 25px 0 #10b98166;transform:translateY(-2px)}.cta-btn.secondary{background:#fff;border:2px solid #667eea;color:#667eea}.cta-btn.secondary:hover{background:#667eea;color:#fff;transform:translateY(-2px)}@media (max-width:768px){.contact-section{padding:4rem 0}.container{padding:.5rem}.section-title{font-size:2.5rem}.contact-content{gap:2rem;grid-template-columns:1fr}.form-card,.info-card{padding:1.5rem}.form-row{grid-template-columns:1fr}.contact-cta{padding:2rem}.cta-buttons{align-items:center;flex-direction:column}.cta-btn{justify-content:center;max-width:300px;width:100%}}@media (max-width:480px){.section-title{font-size:2rem}.form-card,.info-card{padding:1.25rem}.contact-method{padding:.75rem}.method-icon{font-size:1.25rem;height:40px;width:40px}.social-link{padding:.625rem}.contact-cta{padding:1.5rem}.cta-content h3{font-size:1.5rem}}.footer{background:linear-gradient(135deg,#1a202c,#2d3748);color:#fff;margin-top:4rem;overflow:hidden;position:relative}.footer-background{z-index:1}.bg-gradient,.footer-background{bottom:0;left:0;position:absolute;right:0;top:0}.bg-gradient{background:linear-gradient(135deg,#667eea1a,#764ba21a)}.bg-pattern{background-image:radial-gradient(circle at 25% 25%,#ffffff0d 1px,#0000 0),radial-gradient(circle at 75% 75%,#ffffff0d 1px,#0000 0);background-position:0 0,25px 25px;background-size:50px 50px;bottom:0;left:0;position:absolute;right:0;top:0}.footer-container{margin:0 auto;max-width:1200px;padding:4rem 2rem 2rem;position:relative;z-index:2}.footer-content{grid-gap:4rem;display:grid;gap:4rem;grid-template-columns:1fr 1fr;margin-bottom:3rem}.footer-brand{grid-column:span 1}.brand-logo{gap:1rem;margin-bottom:1.5rem}.brand-logo,.logo-icon{align-items:center;display:flex}.logo-icon{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#667eea20,#764ba220);border:1px solid #ffffff1a;border-radius:16px;font-size:2.5rem;height:64px;justify-content:center;width:64px}.brand-text{flex:1 1}.brand-name{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#fff,#e2e8f0);-webkit-background-clip:text;background-clip:text;color:#fff;font-size:1.5rem;font-weight:700;margin:0 0 .25rem}.brand-title{color:#a0aec0;font-size:.875rem;font-weight:500;margin:0}.brand-description{color:#cbd5e0;font-size:.95rem;line-height:1.6;margin-bottom:2rem}.social-links{display:flex;flex-direction:row;gap:1rem;width:auto}.social-link{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #ffffff1a;border-radius:12px;color:#fff;display:flex;height:48px;justify-content:center;text-decoration:none;transition:all .3s ease;width:48px;width:auto}.footer .social-name{color:#fff!important}.social-link:hover{background:#667eea4d;border-color:#667eea80;transform:translateY(-2px)}.social-icon{font-size:1.25rem}.quick-links-section{margin-top:2.5rem}.quick-links-section .section-title{color:#fff;font-size:1.125rem;font-weight:600;margin-bottom:1rem;padding-top:2rem;text-align:left}.footer-section{display:flex;flex-direction:column}.section-title{color:#fff;font-size:1.125rem;font-weight:600;margin-bottom:1.5rem;padding-bottom:.5rem;position:relative}.section-title:after{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:1px;bottom:0;content:"";height:2px;left:0;position:absolute;width:30px}.footer-links{grid-gap:.75rem 1.5rem;display:grid;gap:.75rem 1.5rem;grid-template-columns:1fr 1fr;list-style:none;margin:0;padding:0}.footer-link{border-radius:4px;color:#cbd5e0;font-size:1rem;font-weight:500;padding:.25rem 0;text-decoration:none;transition:all .3s ease}.footer-link:hover{color:#667eea;padding-left:.5rem}.service-item{color:#a0aec0;display:block;font-size:.9rem;padding:.25rem 0}.contact-info{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.contact-item{align-items:center;display:flex;gap:.75rem;margin-bottom:1rem}.contact-details{display:flex;flex:1 1;flex-direction:column;gap:.25rem;min-width:0}.contact-label{color:#a0aec0;font-size:.75rem;font-weight:500;letter-spacing:.5px;text-transform:uppercase}.contact-value{word-wrap:break-word;color:#cbd5e0;font-size:.9rem;line-height:1.3;overflow-wrap:break-word;text-decoration:none}.contact-value:hover{color:#667eea}.contact-icon{flex-shrink:0;font-size:1.125rem;text-align:center;width:24px}.contact-link{color:#cbd5e0;font-size:.9rem;text-decoration:none;transition:color .3s ease}.contact-link:hover{color:#667eea}.contact-text{color:#a0aec0;font-size:.9rem}.availability-status{background:#10b9811a;border:1px solid #10b98133;border-radius:12px;padding:1rem}.status-indicator{align-items:center;color:#6ee7b7;display:flex;font-size:.875rem;gap:.75rem}.status-dot{animation:pulse 2s infinite;background:#10b981;border-radius:50%;height:8px;width:8px}.footer-bottom{border-top:1px solid #ffffff1a;padding-top:2rem}.footer-divider{background:linear-gradient(90deg,#0000,#fff3 50%,#0000);height:1px;margin-bottom:2rem}.footer-bottom-content{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}.copyright p{color:#a0aec0;font-size:.875rem;line-height:1.5;margin:0}.made-with{color:#718096!important;font-size:.8rem!important;margin-top:.25rem!important}.footer-meta{align-items:center;display:flex;gap:1rem}.tech-stack{color:#718096;font-size:.8rem;font-weight:500;letter-spacing:.5px}.quick-contact{background:linear-gradient(135deg,#667eea,#764ba2);border:1px solid #ffffff1a;border-radius:12px;margin-top:2rem;padding:1.5rem}.quick-contact h5{color:#fff;font-size:1rem;margin-bottom:1rem;text-align:center}.contact-buttons{display:flex;gap:1rem;justify-content:center}.contact-btn{align-items:center;background:#667eea;border:1px solid #667eea4d;border-radius:8px;color:#fff;display:flex;font-size:.9rem;font-weight:500;gap:.5rem;padding:.75rem 1.5rem;text-decoration:none;transition:all .3s ease}.contact-btn:hover{background:#667eea66;border-color:#667eea80;transform:translateY(-2px)}.email-btn{background:#3b82f633;border-color:#3b82f64d}.email-btn:hover{background:#3b82f666;border-color:#3b82f680}.whatsapp-btn{background:#22c55e33;border-color:#22c55e4d}.whatsapp-btn:hover{background:#22c55e66;border-color:#22c55e80}@media (max-width:992px){.footer-content{gap:2rem;grid-template-columns:1fr}.footer-brand{grid-column:span 1}}@media (max-width:768px){.footer-container{padding:3rem 1rem 2rem}.footer-content{gap:2.5rem;grid-template-columns:1fr}.footer-brand{grid-column:span 1;text-align:center}.brand-logo{flex-direction:column;gap:1rem;justify-content:center}.brand-description{font-size:.9rem;line-height:1.6;text-align:center}.social-links{gap:1rem;justify-content:center;margin-top:1.5rem}.quick-links-section{margin-top:2rem}.quick-links-section .section-title,.section-title{text-align:center}.section-title{margin-bottom:1.5rem}.footer-links{gap:.75rem;grid-template-columns:1fr}.contact-info,.contact-item,.footer-links{text-align:center}.contact-item{flex-direction:column;gap:.5rem;justify-content:center;margin-bottom:1.5rem}.contact-details{text-align:center;width:100%}.contact-value{font-size:.85rem;max-width:100%;word-break:break-all}.quick-contact{text-align:center}.contact-buttons{gap:1rem;justify-content:center;margin-top:1rem}.footer-bottom-content{flex-direction:column;gap:1rem;text-align:center}}@media (max-width:480px){.footer-container{padding:2rem 1rem 1.5rem}.footer-content{gap:2rem}.brand-logo{flex-direction:column;gap:1rem}.logo-icon{font-size:2rem;height:56px;width:56px}.brand-name{font-size:1.25rem}.brand-name,.brand-title{text-align:center}.brand-description{font-size:.85rem;padding:0 1rem}.social-links{flex-wrap:wrap;gap:.75rem}.social-link{background-color:#4549500d;flex-direction:column;height:44px;padding:3.5rem;width:44px}.social-icon{font-size:1.125rem}.social-name{font-size:.7rem;margin-top:.25rem}.contact-info{gap:1rem}.contact-item{background:#f7f7f7b8;border-radius:8px;flex-direction:column;gap:.5rem;margin-bottom:1.5rem;padding:1rem;text-align:center}.contact-details{text-align:center;width:100%}.contact-label{font-size:.7rem;margin-bottom:.25rem}.contact-value{font-size:.8rem;line-height:1.4;max-width:100%;overflow-wrap:break-word;word-break:break-word}.contact-icon{margin-bottom:.5rem}.contact-buttons{flex-direction:column;gap:.75rem}.contact-btn{font-size:.9rem;padding:.75rem 1rem}.section-title{font-size:1.1rem}.footer-links li{margin-bottom:.75rem}.footer-links{gap:.5rem;grid-template-columns:1fr;text-align:center}.copyright{font-size:.8rem;line-height:1.5}}.tts-container{pointer-events:none;position:fixed;z-index:999}.tts-top-left{left:20px;top:20px}.tts-top-right{right:20px;top:20px}.tts-bottom-left{bottom:20px;left:20px}.tts-bottom-right{bottom:20px;right:140px}.tts-center{left:50%;top:50%;transform:translate(-50%,-50%)}.tts-controls{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border:1px solid #fff3;border-radius:50px;box-shadow:0 4px 20px #00000026;display:flex;gap:8px;padding:8px 12px;pointer-events:auto;transition:all .3s ease}.tts-controls:hover{background:#fff;box-shadow:0 6px 25px #0003;transform:translateY(-2px)}.tts-small{padding:6px 10px}.tts-small .tts-button{height:32px;width:32px}.tts-medium{padding:8px 12px}.tts-medium .tts-button{height:40px;width:40px}.tts-large{padding:10px 14px}.tts-large .tts-button{height:48px;width:48px}.tts-button{align-items:center;border:none;border-radius:50%;box-shadow:0 2px 8px #00000026;color:#fff;cursor:pointer;display:flex;font-weight:500;justify-content:center;transition:all .3s ease}.tts-button:hover{box-shadow:0 4px 12px #00000040;transform:scale(1.1)}.tts-button:active{transform:scale(.95)}.tts-button svg{fill:#fff!important;color:#fff!important;height:20px;width:20px}.tts-icon{align-items:center;color:#fff!important;display:flex;font-size:16px;font-weight:400;justify-content:center;line-height:1;text-shadow:none}.tts-small .tts-button svg{fill:#fff!important;height:16px;width:16px}.tts-small .tts-icon{font-size:12px}.tts-large .tts-button svg{fill:#fff!important;height:24px;width:24px}.tts-large .tts-icon{font-size:18px}.tts-primary .tts-button{background:linear-gradient(135deg,#667eea,#764ba2)}.tts-primary .tts-button:hover{background:linear-gradient(135deg,#5a6fd8,#6a4190)}.tts-secondary .tts-button{background:linear-gradient(135deg,#6c757d,#495057)}.tts-secondary .tts-button:hover{background:linear-gradient(135deg,#5a6268,#3d4449)}.tts-success .tts-button{background:linear-gradient(135deg,#28a745,#20c997)}.tts-success .tts-button:hover{background:linear-gradient(135deg,#218838,#1cb085)}.tts-warning .tts-button{background:linear-gradient(135deg,#ffc107,#fd7e14)}.tts-warning .tts-button:hover{background:linear-gradient(135deg,#e0a800,#e8590c)}.tts-danger .tts-button{background:linear-gradient(135deg,#dc3545,#e83e8c)}.tts-danger .tts-button:hover{background:linear-gradient(135deg,#c82333,#d91a72)}.tts-playing-controls{display:flex;gap:4px}.tts-indicator{gap:8px;margin-left:8px}.tts-indicator,.tts-wave{align-items:center;display:flex}.tts-wave{gap:2px}.tts-wave span{animation:wave 1.4s ease-in-out infinite;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:2px;height:12px;width:3px}.tts-wave span:first-child{animation-delay:0s}.tts-wave span:nth-child(2){animation-delay:.2s}.tts-wave span:nth-child(3){animation-delay:.4s}.tts-progress{background:#667eea1a;border-radius:12px;padding:2px 6px}.tts-progress-text{color:#667eea;font-size:10px;font-weight:600}@keyframes wave{0%,40%,to{height:8px;opacity:.5}20%{height:16px;opacity:1}}@media (max-width:768px){.tts-container{bottom:80px!important}.tts-bottom-right{right:20px}.tts-controls{padding:6px 10px}.tts-button{height:36px;width:36px}.tts-button svg{height:18px;width:18px}}@media (prefers-reduced-motion:reduce){.tts-button,.tts-controls,.tts-wave span{animation:none;transition:none}.tts-button:hover,.tts-controls:hover{transform:none}}.tts-button:focus{outline:2px solid #667eea;outline-offset:2px}.tts-loading{opacity:.7;pointer-events:none}.tts-button[title]{position:relative}.tts-button[title]:hover:after{background:#000c;border-radius:6px;bottom:calc(100% + 8px);color:#fff;content:attr(title);font-size:12px;padding:6px 12px;white-space:nowrap}.tts-button[title]:hover:after,.tts-button[title]:hover:before{left:50%;pointer-events:none;position:absolute;transform:translateX(-50%);z-index:1001}.tts-button[title]:hover:before{border:3px solid #0000;border-top-color:#000c;bottom:calc(100% + 2px);content:""}.stories-container{color:#333;font-family:Georgia,serif;line-height:1.6;margin:2rem auto;max-width:1200px;padding:2rem}.stories-header{margin-bottom:3rem;text-align:center}.stories-header h1{color:#2c3e50;font-size:3rem;margin-bottom:.5rem;text-shadow:2px 2px 4px #0000001a}.stories-header p{color:#666;font-size:1.2rem;font-style:italic}.stories-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));margin-bottom:3rem}.stories-container,.story-reader{padding-bottom:80px;position:relative}.tts-controls-panel{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:1px solid #dee2e6;border-radius:15px;box-shadow:0 4px 15px #0000001a;margin:20px 0;padding:20px}.chapter-selector h4,.reading-mode-selector h4{color:#495057;font-size:1.1rem;font-weight:600;margin:0 0 15px}.mode-buttons{display:flex;gap:10px;margin-bottom:20px}.mode-button{align-items:center;background:#fff;border:2px solid #667eea;border-radius:25px;color:#667eea;cursor:pointer;display:flex;font-weight:600;gap:8px;padding:12px 20px;transition:all .3s ease}.mode-button:hover{background:#667eea;box-shadow:0 4px 12px #667eea4d;color:#fff;transform:translateY(-2px)}.mode-button.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#764ba2;box-shadow:0 4px 15px #667eea66;color:#fff}.chapter-selector{margin-top:15px}.chapter-select{background:#fff;border:2px solid #dee2e6;border-radius:10px;color:#495057;cursor:pointer;font-size:1rem;padding:12px 16px;transition:all .3s ease;width:100%}.chapter-select:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.chapter-select:hover{border-color:#667eea}@media (max-width:768px){.mode-buttons{flex-direction:column}.mode-button{justify-content:center;text-align:center}.tts-controls-panel{margin:15px 0;padding:15px}}.chapter{border:1px solid #e0e0e0;border-radius:12px;box-shadow:0 2px 8px #0000001a;margin-bottom:20px;transition:all .3s ease}.chapter:hover{box-shadow:0 4px 12px #00000026}.chapter-header-collapsible{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-bottom:1px solid #dee2e6;cursor:pointer;padding:20px;transition:all .3s ease}.chapter-header-collapsible:hover{background:linear-gradient(135deg,#e9ecef,#dee2e6)}.chapter-title-row{align-items:center;display:flex;gap:15px;justify-content:space-between}.chapter-title-row h2{color:#2c3e50;flex:1 1;font-size:1.4rem;margin:0}.chapter-controls{align-items:center;display:flex;gap:10px}.chapter-progress-indicator{animation:pulse 2s infinite;color:#28a745;font-size:1.2rem}.chapter-tts-button{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;box-shadow:0 2px 8px #667eea4d;color:#fff;cursor:pointer;display:flex;font-size:1rem;font-weight:700;height:35px;justify-content:center;position:relative;transition:all .3s ease;width:35px}.chapter-tts-button:hover{background:linear-gradient(135deg,#5a67d8,#6b46c1);box-shadow:0 4px 12px #667eea80;transform:scale(1.1)}.chapter-tts-button:active{box-shadow:0 2px 8px #667eeab3;transform:scale(.95)}.chapter-tts-button:focus{box-shadow:0 0 0 3px #667eea4d;outline:none}.chapter-toggle-icon{color:#6c757d;font-size:1.2rem;margin-left:5px;transition:transform .3s ease}.chapter-content-wrapper{animation:slideDown .3s ease;padding:20px}@keyframes slideDown{0%{max-height:0;opacity:0;padding:0 20px}to{max-height:1000px;opacity:1;padding:20px}}@media (max-width:768px){.chapter-title-row{align-items:flex-start;flex-direction:column;gap:10px}.chapter-controls{align-self:flex-end}.chapter-tts-button{font-size:1rem;height:35px;width:35px}.chapter-content-wrapper{padding:15px}}.story-card{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:15px;box-shadow:0 10px 30px #0003;color:#fff;cursor:pointer;padding:1.5rem;transition:all .3s ease}.story-card:hover{box-shadow:0 20px 40px #0000004d;transform:translateY(-5px)}.story-card-image{background:#ffffff1a;border-radius:10px;height:200px;margin-bottom:1rem;overflow:hidden;position:relative}.story-card-image,.story-progress-badge{align-items:center;display:flex;justify-content:center}.story-progress-badge{animation:pulse 2s infinite;background:#28a745e6;border-radius:50%;color:#fff;font-size:1rem;height:30px;position:absolute;right:10px;top:10px;width:30px}.story-progress-info{background:#28a7451a;border:1px solid #fff3;border-radius:15px;color:#fff;font-size:.8rem;margin-bottom:10px;padding:5px 10px;text-align:center}.story-card-image img{border-radius:10px;height:100%;object-fit:cover;width:100%}.story-card-image span{font-size:4rem;opacity:.8}.story-card-content h3{color:#fff;font-size:1.5rem;margin-bottom:.5rem}.story-card-subtitle{color:#e0e0e0;font-size:1rem;font-style:italic;margin-bottom:1rem}.story-card-description{color:#f0f0f0;font-size:.9rem;line-height:1.5;margin-bottom:1rem}.story-card-meta{align-items:center;color:#e0e0e0;display:flex;font-size:.8rem;justify-content:space-between;margin-bottom:1rem}.story-card-author,.story-card-chapters{background:#ffffff1a;border-radius:15px;padding:.3rem .6rem}.read-story-btn{background:#fff3;border:2px solid #ffffff4d;border-radius:25px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:700;padding:.7rem 1.5rem;transition:all .3s ease}.read-story-btn:hover{background:#ffffff4d;border-color:#ffffff80;transform:scale(1.05)}.story-reader{margin:0 auto;max-width:800px}.back-button{background:#3498db;border:none;border-radius:25px;color:#fff;cursor:pointer;font-size:1rem;margin-bottom:2rem;padding:.7rem 1.5rem;transition:background .3s ease}.back-button:hover{background:#2980b9}.story-header{border-bottom:3px solid #eee;margin-bottom:2rem;padding-bottom:2rem;text-align:center}.story-header h1{color:#2c3e50;font-size:2.5rem;margin-bottom:.5rem}.story-subtitle{color:#7f8c8d;font-size:1.3rem;font-style:italic;margin:0 0 1.5rem}.story-cover{border-radius:15px;box-shadow:0 10px 30px #0003;margin:0 auto;max-width:400px;overflow:hidden}.story-cover img{display:block;height:auto;width:100%}.story-description{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-left:5px solid #3498db;border-radius:10px;margin-bottom:2rem;padding:1.5rem}.story-description p{color:#34495e;font-size:1.1rem;line-height:1.7;margin:0}.story-meta{background:#f8f9fa;border:1px solid #e9ecef;border-radius:10px;margin-bottom:2rem;padding:1.5rem}.story-info{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}.story-author,.story-chapters,.story-status{background:#007bff;border-radius:20px;color:#fff;font-size:.9rem;font-weight:700;padding:.5rem 1rem}.story-tags{display:flex;flex-wrap:wrap;gap:.5rem}.story-tag{background:#6c757d;border-radius:15px;color:#fff;font-size:.8rem;font-weight:700;padding:.3rem .8rem}.chapters-container{margin-bottom:3rem}.chapter{background:#fff;border-radius:10px;box-shadow:0 5px 15px #0000001a;margin-bottom:2rem;overflow:hidden}.chapter-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1.5rem}.chapter-header h2{color:#fff;font-size:1.5rem;margin:0 0 1rem}.chapter-image,.chapter-video{border-radius:10px;box-shadow:0 5px 15px #0003;margin-top:1rem;overflow:hidden}.chapter>.chapter-video{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:15px;margin-bottom:1rem;margin-top:2rem;padding:1rem}.chapter>.chapter-video:before{color:#fff;content:"🎬 Video Final del Capítulo";display:block;font-size:1.1rem;font-weight:700;margin-bottom:1rem;text-align:center}.chapter-image img,.chapter-video video{display:block;height:auto;width:100%}.chapter-video video{border-radius:10px}.chapter-image-placeholder{background:#ffffff1a;border-radius:5px;color:#e0e0e0;font-size:.9rem;padding:.5rem 1rem}.chapter-content{color:#2c3e50;font-size:1.1rem;line-height:1.8;padding:2rem}.chapter-content p{margin-bottom:1.5rem;text-align:justify;text-indent:2rem}.chapter-content p:first-child{font-weight:500;text-indent:0}.stories-footer{border-top:2px solid #eee;margin-top:3rem;padding-top:2rem;text-align:center}.stories-stats{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center;margin-bottom:1rem}.stories-stats p{background:#f8f9fa;border:1px solid #dee2e6;border-radius:20px;color:#495057;font-size:.9rem;margin:0;padding:.5rem 1rem}.stories-footer>p:last-child{color:#7f8c8d;font-size:1.1rem;font-style:italic;margin-top:1rem}.story-footer{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-radius:10px;margin-top:3rem;padding:2rem;text-align:center}.story-end{color:#2c3e50;font-size:1.2rem;font-weight:700;margin-bottom:.5rem}.story-note{color:#7f8c8d;font-size:1rem;font-style:italic;margin:0 0 .5rem}.story-update{color:#6c757d;font-size:.9rem;margin:0}.loading-container{padding:4rem 2rem;text-align:center}.loading-container h2{color:#7f8c8d;font-size:1.5rem}@media (max-width:768px){.stories-container{padding:1rem}.stories-header h1{font-size:2rem}.stories-grid{gap:1rem;grid-template-columns:1fr}.story-card{padding:1rem}.story-card-image{height:150px}.story-card-meta{align-items:flex-start;flex-direction:column;gap:.5rem}.story-header h1{font-size:2rem}.story-cover{max-width:100%}.stories-stats,.story-info{flex-direction:column;gap:.5rem}.chapter-content{font-size:1rem;padding:1rem}.chapter-content p{text-indent:1rem}}@media (max-width:480px){.stories-header h1,.story-header h1{font-size:1.5rem}.story-subtitle{font-size:1rem}}.auth-container{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;justify-content:center;min-height:100vh;padding:20px}.auth-card{background:#fff;border-radius:12px;box-shadow:0 10px 30px #0003;max-width:400px;padding:2rem;text-align:center;width:100%}.auth-header h2{color:#333;font-size:1.5rem;margin-bottom:.5rem}.auth-header p{color:#666;font-size:.9rem;margin-bottom:2rem}.auth-form{display:flex;flex-direction:column;gap:1rem}.form-group{text-align:left}.form-group label{color:#333;display:block;font-weight:500;margin-bottom:.5rem}.form-group input{border:2px solid #e1e5e9;border-radius:8px;font-size:1rem;padding:.75rem;transition:border-color .3s ease;width:100%}.form-group input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.error-message{background:#fee2e2;border:1px solid #fecaca;border-radius:6px;color:#dc2626;font-size:.875rem;padding:.75rem}.auth-submit-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:.875rem 1.5rem;transition:transform .2s ease,box-shadow .2s ease}.auth-submit-btn:hover{box-shadow:0 4px 12px #667eea66;transform:translateY(-1px)}.auth-footer{border-top:1px solid #e5e7eb;margin-top:1.5rem;padding-top:1rem}.auth-footer p{color:#9ca3af;font-size:.8rem;margin:0}.protected-content{position:relative}.logout-header{position:fixed;right:20px;top:20px;z-index:1000}.logout-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#dc2626e6;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.875rem;padding:.5rem 1rem;transition:background-color .3s ease}.logout-btn:hover{background:#dc2626}@media (max-width:480px){.auth-card{margin:1rem;padding:1.5rem}.logout-header{right:10px;top:10px}.logout-btn{font-size:.8rem;padding:.4rem .8rem}}.scroll-button-container{bottom:30px;display:flex;flex-direction:column;gap:10px;position:fixed;right:30px;z-index:1000}.scroll-button{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#667eea,#764ba2);border:2px solid #ffffff1a;border-radius:50%;box-shadow:0 4px 20px #667eea4d;color:#fff;cursor:pointer;display:flex;height:60px;justify-content:center;outline:none;transition:all .3s ease;width:60px}.scroll-button:hover{background:linear-gradient(135deg,#5a67d8,#6b46c1);box-shadow:0 8px 30px #667eea66;transform:translateY(-3px) scale(1.05)}.scroll-button:active{box-shadow:0 4px 15px #667eea4d;transform:translateY(-1px) scale(1.02)}.scroll-icon{font-size:24px;font-weight:700;line-height:1;transition:transform .3s ease}.scroll-button:hover .scroll-icon{transform:scale(1.1)}.scroll-up .scroll-icon{animation:bounceUp 2s infinite}.scroll-down .scroll-icon{animation:bounceDown 2s infinite}.scroll-practice{box-shadow:0 4px 20px #10b9814d!important}.scroll-practice:hover{box-shadow:0 8px 30px #10b98166!important}.scroll-practice .scroll-icon{animation:pulse 2s infinite;font-size:20px}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}@keyframes bounceUp{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-4px)}60%{transform:translateY(-2px)}}@keyframes bounceDown{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(4px)}60%{transform:translateY(2px)}}@media (max-width:768px){.scroll-button-container{bottom:20px;gap:8px;right:20px}.scroll-button{height:50px;width:50px}.scroll-icon{font-size:20px}}@media (max-width:480px){.scroll-button-container{bottom:15px;gap:6px;right:15px}.scroll-button{height:45px;width:45px}.scroll-icon{font-size:18px}}.scroll-button:before{background:linear-gradient(135deg,#ffffff1a,#ffffff0d);border-radius:50%;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease}.scroll-button:hover:before{opacity:1}.scroll-button:after{border:2px solid #667eea4d;border-radius:50%;bottom:-4px;content:"";left:-4px;opacity:0;position:absolute;right:-4px;top:-4px;transform:scale(.8);transition:all .3s ease}.scroll-button:focus:after{opacity:1;transform:scale(1)}.scroll-practice{box-shadow:0 4px 20px #ffffff4d!important}.scroll-practice:hover{transform:translateY(-3px) scale(1.1)!important}.practice-icon{font-size:20px!important;font-weight:900!important;margin-left:2px}.scroll-practice:hover .practice-icon{animation:playPulse .6s ease-in-out}@keyframes playPulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}@media (max-width:768px){.scroll-practice{height:50px;width:50px}.practice-icon{font-size:16px!important}}@media (max-width:480px){.scroll-practice{height:45px;width:45px}.practice-icon{color:#fff;font-size:20px!important;margin-bottom:.5rem}}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;min-height:100vh}#root{margin:0 auto;max-width:1400px}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;box-shadow:0 4px 12px #667eea4d;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:12px 24px;transition:all .2s ease}button:hover{box-shadow:0 6px 20px #667eea66;transform:translateY(-2px)}button:active{transform:translateY(0)}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/*# sourceMappingURL=main.f52af1da.css.map*/