.vision-experience{padding:100px 0 75px;background:#eef0e7}
.experience-heading{display:grid;grid-template-columns:1.15fr 1fr;align-items:end;gap:80px;margin-bottom:45px}
.experience-heading h2{font-size:clamp(52px,5.3vw,82px)}
.experience-heading>p{font-size:19px;line-height:1.8;max-width:440px;color:var(--muted);padding-bottom:6px}
.experience-controls{margin-bottom:25px}
.condition-group{display:flex;flex-wrap:wrap;gap:10px}
.condition-group button{font:500 17px/1.5 Manrope,Arial,sans-serif;min-height:48px;padding:10px 20px;border:1px solid #a9b5a4;border-radius:3px;background:transparent;color:var(--ink);transition:background .2s,border-color .2s}
.condition-group button:hover{background:#dde3d4;border-color:var(--ink)}
.condition-group button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink);font-weight:600}
.color-group{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:14px}
.color-group>span{font-size:15px;font-weight:600;color:var(--muted)}
.experience-filters{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.experience-comparison{position:relative;isolation:isolate;aspect-ratio:1672/941;overflow:hidden;background:#52604b;border-radius:4px}
.experience-reference,.experience-base,.experience-effect{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.experience-affected{position:absolute;inset:0;clip-path:inset(0 0 0 var(--split));pointer-events:none}
.experience-haze{position:absolute;inset:0;opacity:0;background:#f0e6c9}
.experience-comparison[data-mode=catarata] .experience-effect{filter:blur(3.8px) contrast(.68) saturate(.45) sepia(.12)}
.experience-comparison[data-mode=catarata] .experience-haze{opacity:.16}
.experience-comparison[data-mode=miopia] .experience-effect{filter:blur(5px);mask-image:linear-gradient(#000 40%,transparent 78%)}
.experience-comparison[data-mode=hipermetropia] .experience-effect{filter:blur(5px);mask-image:linear-gradient(transparent 20%,#000 73%)}
.experience-comparison[data-mode=presbiopia] .experience-effect{filter:blur(5px);mask-image:linear-gradient(transparent 45%,#000 78%)}
.experience-comparison[data-mode=astigmatismo] .experience-effect{filter:url(#vision-astigmatism)}
.experience-comparison[data-mode=protanopia] .experience-effect{filter:url(#vision-protanopia)}
.experience-comparison[data-mode=deuteranopia] .experience-effect{filter:url(#vision-deuteranopia)}
.experience-comparison[data-mode=tritanopia] .experience-effect{filter:url(#vision-tritanopia)}
.experience-labels{position:absolute;inset:20px 20px auto;display:flex;justify-content:space-between;gap:20px;pointer-events:none}
.experience-labels span{padding:7px 13px;color:white;background:#12352fe8;font-size:15px;font-weight:600;line-height:1.5;border:1px solid #ffffff4d}
.experience-divider{position:absolute;inset:0;pointer-events:none}
.experience-divider:before{content:'';position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:white;box-shadow:0 0 10px #0007;transform:translateX(-50%)}
.experience-divider>span{position:absolute;top:50%;left:clamp(25px,var(--split),calc(100% - 25px));transform:translate(-50%,-50%);display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--paper);color:var(--ink);font:500 27px Manrope,sans-serif;box-shadow:0 2px 15px #0003}
.experience-comparison input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;touch-action:pan-y}
.experience-comparison:has(input:focus-visible){outline:3px solid #9e722a;outline-offset:5px}
.experience-comparison:has(input:focus-visible) .experience-divider>span{outline:3px solid #9e722a;outline-offset:4px}
.comparison-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:17px;font-size:15px;color:var(--muted)}
.comparison-toolbar button{background:transparent;border:0;border-bottom:1px solid #879782;min-height:44px;padding:6px 0;font:600 15px/1.5 Manrope,sans-serif;color:var(--ink);white-space:nowrap}
.comparison-toolbar button span{margin-left:15px}
.experience-explanation{display:grid;grid-template-columns:1.15fr 1fr;gap:70px;margin-top:35px;padding:32px 0;border-top:1px solid #c4cebd;border-bottom:1px solid #c4cebd;align-items:center;min-height:235px}
.experience-explanation .section-index{margin-bottom:15px}
.experience-explanation h3{font:500 clamp(23px,2.1vw,30px)/1.4 Manrope,Arial,sans-serif;letter-spacing:0;max-width:28ch}
.experience-explanation>p{font-size:18px;line-height:1.8;color:var(--muted)}
.vision-experience .educational-note{font-size:15px;line-height:1.8;max-width:95ch;color:var(--muted);margin-top:25px}
.simulation-notes{margin-top:16px;max-width:1000px}
.simulation-notes summary{display:flex;justify-content:space-between;gap:24px;align-items:center;list-style:none;cursor:pointer;padding:10px 0;min-height:44px;font:600 16px/1.6 Manrope,Arial,sans-serif}
.simulation-notes summary::-webkit-details-marker{display:none}
.simulation-notes summary span{font-size:23px;font-weight:400}
.simulation-notes[open] summary span{transform:rotate(45deg)}
.simulation-notes>div{padding:15px 0;font-size:16px;line-height:1.85;color:var(--muted)}
.simulation-notes a{text-decoration:underline;text-underline-offset:4px;color:var(--ink)}
.experience-next{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:40px;padding-top:35px;border-top:1px solid #c4cebd}
.experience-next>p{font:400 clamp(30px,3vw,44px)/1.2 Instrument,Georgia,serif}
@media(max-width:980px){.experience-heading{gap:40px}.experience-heading>p{font-size:18px}.experience-explanation{gap:40px}.condition-group button{padding:10px 16px}}
@media(max-width:640px){
 .vision-experience{padding:65px 0 55px}
 .experience-heading{display:block;margin-bottom:28px}.experience-heading h2{font-size:clamp(46px,12.8vw,65px)}.experience-heading>p{font-size:17px;margin-top:22px}
 .condition-group{gap:8px}.condition-group button{font-size:16px;padding:9px 13px;min-height:46px;flex:1 1 auto}.color-group{display:block;margin-top:19px}.color-group>span{display:block;margin-bottom:10px}.color-group .condition-group{gap:8px}
 .experience-comparison{aspect-ratio:4/3;overflow:visible;margin-top:67px}.experience-reference,.experience-affected{overflow:hidden;border-radius:4px}.experience-labels{inset:-52px 0 auto;gap:10px;align-items:center}.experience-labels span{padding:4px 0;background:none;border:0;color:var(--ink);font-size:14px;max-width:48%;font-weight:600}.experience-labels span:last-child{text-align:right}.experience-divider>span{width:44px;height:44px}
 .comparison-toolbar{align-items:start;flex-direction:column;gap:5px;font-size:15px;margin-top:14px}.comparison-toolbar p{max-width:30ch}.comparison-toolbar button{font-size:15px}
 .experience-explanation{display:block;min-height:0;margin-top:28px;padding:27px 0}.experience-explanation h3{font-size:25px;line-height:1.4}.experience-explanation>p{font-size:17px;margin-top:19px}.vision-experience .educational-note{font-size:15px}
 .simulation-notes summary{font-size:15px;align-items:start}.simulation-notes>div{font-size:16px}.experience-next{display:block;margin-top:28px;padding-top:28px}.experience-next>p{font-size:34px}.experience-next .button{margin-top:23px;width:100%;padding:14px 17px;gap:14px}
}