@import"https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;600&display=swap";.vitruvian-container{position:relative;min-height:100vh;overflow-x:hidden}.vitruvian-bg{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 30%,rgba(245,241,232,.4) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(230,213,192,.3) 0%,transparent 50%),linear-gradient(to bottom,#faf8f3,#f5f1e8);z-index:-1}:global(.dark) .vitruvian-bg{background:radial-gradient(circle at 20% 30%,rgba(26,26,26,.8) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(40,35,30,.6) 0%,transparent 50%),linear-gradient(to bottom,#0a0a0a,#1a1a1a)}.vitruvian-header{max-width:1400px;margin:0 auto 4rem;animation:fadeIn 1s ease-out}.vitruvian-title{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;color:#292524;margin-bottom:1rem;letter-spacing:-.02em;line-height:1}:global(.dark) .vitruvian-title{color:#f5f1e8}.vitruvian-subtitle{font-size:clamp(1rem,2vw,1.25rem);color:#78716c;max-width:800px;line-height:1.6;font-weight:300}.vitruvian-canvas{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;animation:fadeIn 1s ease-out .2s both}@media(min-width:1024px){.vitruvian-canvas{grid-template-columns:1fr 1.2fr 1fr}}.panel{background:#fffc;backdrop-filter:blur(10px);border:2px solid #e7e5e4;border-radius:1.5rem;padding:2rem;box-shadow:0 10px 40px #0000000d;transition:transform .3s,box-shadow .3s}:global(.dark) .panel{background:#1a1a1acc;border-color:#ffffff1a;box-shadow:0 10px 40px #0000004d}.panel:hover{transform:translateY(-4px);box-shadow:0 15px 50px #0000001a}.panel-title{font-size:1.5rem;font-weight:700;color:#292524;margin-bottom:1.5rem;text-align:center;letter-spacing:.02em}:global(.dark) .panel-title{color:#f5f1e8}.roman-column{width:100%;max-width:250px;margin:0 auto;display:block}.column-section{cursor:pointer;transition:all .3s ease}.column-section:hover{filter:brightness(1.1)}.column-section.active{filter:drop-shadow(0 0 10px rgba(193,105,79,.6))}.column-label{font-size:14px;font-weight:700;text-anchor:middle;fill:#292524;pointer-events:none}.column-sublabel{font-size:10px;text-anchor:middle;fill:#78716c;pointer-events:none}.phase-info{margin-top:2rem;padding:1.5rem;background:#f5f1e880;border-radius:1rem;border:1px solid #e7e5e4}:global(.dark) .phase-info{background:#28231e80;border-color:#ffffff0d}.phase-info h3{font-size:1.25rem;color:#c1694f;margin-bottom:.5rem}.phase-info p{font-size:.875rem;color:#57534e;line-height:1.6}:global(.dark) .phase-info p{color:#a8a29e}.material-selector{display:flex;gap:1rem;margin-bottom:1.5rem}.material-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;background:#f5f1e880;border:2px solid #e7e5e4;border-radius:.75rem;font-weight:600;color:#57534e;cursor:pointer;transition:all .3s}:global(.dark) .material-btn{background:#28231e80;border-color:#ffffff1a;color:#a8a29e}.material-btn:hover{border-color:#c1694f;transform:translateY(-2px)}.material-btn.active{background:#c1694f;border-color:#c1694f;color:#fff}.cal-type-toggle{margin-bottom:1.5rem}.toggle-label{display:flex;align-items:center;gap:1rem;cursor:pointer}.toggle-slider{position:relative;width:50px;height:26px;background:#e7e5e4;border-radius:13px;transition:background .3s}.toggle-slider:before{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform .3s}input[type=checkbox]:checked+.toggle-slider{background:#c1694f}input[type=checkbox]:checked+.toggle-slider:before{transform:translate(24px)}input[type=checkbox]{display:none}.toggle-text{font-size:.875rem;color:#57534e}:global(.dark) .toggle-text{color:#a8a29e}.type-polvo{display:none}input[type=checkbox]:checked~.toggle-text .type-pasta{display:none}input[type=checkbox]:checked~.toggle-text .type-polvo{display:inline}.bodegon-svg{width:100%;height:200px;margin:1.5rem 0}.slider-container{margin-top:2rem}.ruler-slider{position:relative;margin-bottom:1rem}.ruler-slider input[type=range]{width:100%;height:8px;background:linear-gradient(to right,#e7e5e4,#c1694f,#8b7355);border-radius:4px;outline:none;-webkit-appearance:none;appearance:none}.ruler-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;background:#c1694f;border:3px solid white;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px #0003;transition:transform .2s}.ruler-slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.ruler-slider input[type=range]::-moz-range-thumb{width:24px;height:24px;background:#c1694f;border:3px solid white;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px #0003;transition:transform .2s}.ruler-marks{display:flex;justify-content:space-between;margin-top:.5rem;font-size:.75rem;color:#78716c}.quantity-display{display:flex;align-items:baseline;justify-content:center;gap:.5rem;padding:1rem;background:#f5f1e880;border-radius:.75rem;border:1px solid #e7e5e4}:global(.dark) .quantity-display{background:#28231e80;border-color:#ffffff0d}.quantity-label{font-size:.875rem;color:#78716c}.quantity-value{font-size:2rem;font-weight:600;color:#c1694f}.quantity-unit{font-size:1rem;color:#57534e}:global(.dark) .quantity-unit{color:#a8a29e}.complementary-material{margin-top:1.5rem;padding:1.5rem;background:linear-gradient(135deg,#c1694f14,#8b73550d);border:2px solid rgba(193,105,79,.2);border-radius:1rem;transition:all .3s}:global(.dark) .complementary-material{background:linear-gradient(135deg,#c1694f26,#8b735514);border-color:#c1694f4d}.complementary-material:hover{transform:translateY(-2px);box-shadow:0 8px 20px #c1694f26}.complementary-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;font-size:.875rem;font-weight:600;color:#c1694f;text-transform:uppercase;letter-spacing:.05em}.complementary-content{display:flex;flex-direction:column;gap:.75rem}.complementary-item{display:flex;align-items:baseline;justify-content:center;gap:.5rem;padding:1rem;background:#fff9;border-radius:.75rem;border:1px solid rgba(193,105,79,.15)}:global(.dark) .complementary-item{background:#1a1a1a99;border-color:#c1694f33}.comp-label{font-size:1rem;font-weight:600;color:#57534e}:global(.dark) .comp-label{color:#d4c5b0}.comp-value{font-size:1.75rem;font-weight:700;color:#8b7355}.comp-unit{font-size:.875rem;color:#78716c}.ratio-reminder{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;background:#f5f1e880;border-radius:.5rem}:global(.dark) .ratio-reminder{background:#28231e80}.ratio-text{font-size:.75rem;color:#78716c}.ratio-value{font-size:.875rem;font-weight:700;color:#c1694f}.wall-svg{width:100%;height:400px;border:2px solid #e7e5e4;border-radius:.75rem;background:#fafaf9}:global(.dark) .wall-svg{border-color:#ffffff1a;background:#1a1a1a}.coverage-display{display:flex;align-items:baseline;justify-content:center;gap:.5rem;margin:1.5rem 0;padding:1.5rem;background:#c1694f1a;border-radius:1rem;border:2px solid #c1694f}.coverage-label{font-size:1.25rem;color:#57534e}:global(.dark) .coverage-label{color:#a8a29e}.coverage-value{font-size:3rem;font-weight:600;color:#c1694f}.coverage-unit{font-size:1.5rem;color:#57534e}:global(.dark) .coverage-unit{color:#a8a29e}.technical-details{display:flex;flex-direction:column;gap:.75rem}.detail-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:#f5f1e84d;border-radius:.5rem}:global(.dark) .detail-row{background:#28231e4d}.detail-label{font-size:.875rem;color:#78716c}.detail-value{font-size:.875rem;font-weight:600;color:#292524}:global(.dark) .detail-value{color:#f5f1e8}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}#mortar-coverage,#mortar-texture{transition:all .8s cubic-bezier(.4,0,.2,1)}.granulometry-section{max-width:1400px;margin:4rem auto 2rem;padding:0 1rem}.section-title{font-size:2.5rem;font-weight:700;text-align:center;color:#292524;margin-bottom:3rem;position:relative}:global(.dark) .section-title{color:#f5f1e8}.section-title:after{content:"";display:block;width:100px;height:3px;background:linear-gradient(90deg,transparent,#c1694f,transparent);margin:1rem auto 0}.granulometry-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-bottom:4rem;justify-content:center}.grain-card{background:#fafaf9;border:2px solid #e7e5e4;border-radius:1rem;padding:2rem;transition:all .3s cubic-bezier(.4,0,.2,1);opacity:.6;transform:scale(.98)}:global(.dark) .grain-card{background:#1c1917;border-color:#ffffff1a}.grain-card:hover{transform:scale(1);opacity:.8}.grain-card.active{opacity:1;transform:scale(1.02);border-color:#c1694f;box-shadow:0 8px 32px #c1694f33;background:#fff}:global(.dark) .grain-card.active{background:#292524;border-color:#c1694f;box-shadow:0 8px 32px #c1694f4d}.grain-header{text-align:center;margin-bottom:1.5rem}.grain-title{font-size:1.5rem;font-weight:700;color:#292524;margin:0 0 .5rem}:global(.dark) .grain-title{color:#f5f1e8}.grain-subtitle{font-size:.875rem;color:#78716c;font-weight:500}:global(.dark) .grain-subtitle{color:#a8a29e}.grain-visual{background:#f5f5f4;border-radius:.75rem;padding:1rem;margin-bottom:1.5rem;border:1px solid #e7e5e4}:global(.dark) .grain-visual{background:#0a0a0a;border-color:#ffffff0d}.grain-svg{width:100%;height:auto;display:block}.grain-specs{display:flex;flex-direction:column;gap:.75rem}.spec-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid #e7e5e4}:global(.dark) .spec-item{border-bottom-color:#ffffff0d}.spec-item:last-child{border-bottom:none}.spec-label{font-size:.875rem;color:#78716c;font-weight:500}:global(.dark) .spec-label{color:#a8a29e}.spec-value{font-size:.875rem;color:#292524;font-weight:600}:global(.dark) .spec-value{color:#f5f1e8}.educational-section{max-width:1000px;margin:6rem auto 0;padding:3rem 2rem;background:#fdfbf7;border:1px solid #e7e5e4;box-shadow:0 4px 6px -1px #0000000d,0 2px 4px -1px #00000008,inset 0 0 40px #c1a9821a;position:relative;animation:fadeIn 1s ease-out .4s both}:global(.dark) .educational-section{background:#1c1917;border-color:#44403c;box-shadow:0 4px 6px -1px #0000004d,inset 0 0 40px #00000080}.educational-header-decoration{text-align:center;margin-bottom:2rem;color:#c1694f;opacity:.8}.ornament-svg{width:120px;height:24px}.educational-title{font-size:clamp(2.5rem,5vw,3.5rem);font-weight:900;color:#292524;text-align:center;margin-bottom:.5rem;letter-spacing:-.03em;line-height:1.1}:global(.dark) .educational-title{color:#e7e5e4}.educational-subtitle{font-size:1rem;color:#78716c;text-align:center;margin-bottom:4rem;font-style:italic;letter-spacing:.05em;text-transform:uppercase;font-size:.75rem}:global(.dark) .educational-subtitle{color:#a8a29e}.educational-content{display:flex;flex-direction:column;gap:6rem}.educational-block{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.educational-block.reverse{direction:rtl}.educational-block.reverse .block-text-content{direction:ltr}.block-visual{position:relative;padding:1rem;background:#fff;border:1px solid #e7e5e4;box-shadow:0 10px 30px -10px #0000001a;transition:transform .3s ease}:global(.dark) .block-visual{background:#292524;border-color:#44403c;box-shadow:0 10px 30px -10px #00000080}.block-visual:hover{transform:translateY(-5px)}.visual-caption{font-size:.75rem;color:#78716c;text-align:center;margin-top:1rem;text-transform:uppercase;letter-spacing:.1em}.engraving-svg,.technical-svg,.diagram-svg{width:100%;height:auto;display:block;color:#44403c}:global(.dark) .engraving-svg,:global(.dark) .technical-svg,:global(.dark) .diagram-svg{color:#d6d3d1}.block-title{font-size:1.75rem;font-weight:700;color:#292524;margin-bottom:1.5rem;display:flex;align-items:baseline;gap:.75rem}:global(.dark) .block-title{color:#e7e5e4}.roman-numeral{color:#c1694f;font-size:1.25rem;font-weight:400}.block-text{font-size:1.125rem;line-height:1.7;color:#44403c;margin-bottom:1.5rem;text-align:justify}.block-text:last-child{margin-bottom:0}:global(.dark) .block-text{color:#d6d3d1}.block-text em,.block-text strong{color:#292524}:global(.dark) .block-text em,:global(.dark) .block-text strong{color:#fff}@media(max-width:900px){.educational-section{padding:2rem 1.5rem;margin-top:4rem}.educational-block,.educational-block.reverse{grid-template-columns:1fr;gap:2rem;direction:ltr}.block-visual{order:-1;width:100%;max-width:100%;margin:0 auto}.educational-title{font-size:2rem}.block-text{text-align:left;font-size:1rem}}