@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Manrope:wght@300;400;600;700&display=swap');
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#071c21;color:#eee7d8}body{font-family:Manrope,Arial,sans-serif}header{position:fixed;z-index:30;top:22px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:center}.brand{font-size:12px;letter-spacing:.2em}.brand span{color:#c6b99b;margin-left:12px;font-size:9px}button{font:inherit}.sound{background:#071c21aa}.progress{position:fixed;z-index:30;bottom:0;left:0;right:0;height:2px;background:#fff2}.progress i{display:block;height:100%;width:8.33%;background:#c9601c;transition:width .7s}.counter{position:fixed;z-index:30;right:28px;bottom:18px;font-size:10px;letter-spacing:.15em;color:#fff9}header button{border:1px solid #fff3;background:#071c21aa;color:#eee7d8;padding:9px 12px;border-radius:22px;font-size:9px;letter-spacing:.12em}#dots{position:fixed;z-index:30;left:28px;top:50%;display:flex;flex-direction:column;gap:8px}.dot{width:5px;height:5px;border:0;border-radius:5px;padding:0;background:#fff5;cursor:pointer}.dot.active{height:24px;background:#c9601c}.scene{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(1.035);transition:opacity .85s,transform 1.1s}.scene.active{opacity:1;visibility:visible;transform:scale(1)}.copy{position:absolute;z-index:5;left:12%;top:50%;transform:translateY(-50%);width:min(620px,74vw)}small{font-size:9px;letter-spacing:.22em;color:#c9601c;font-weight:700}h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:500;line-height:.86;margin:15px 0}h1{font-size:clamp(5rem,10vw,9rem)}h2{font-size:clamp(4rem,8vw,7rem)}h3{font-size:2.7rem}em{font-style:normal;color:#e2934f}p{font-size:15px;line-height:1.85;color:#c7c8bd;max-width:600px}.kicker{font-size:18px;color:#eee7d8}.scroll{margin-top:45px;font-size:9px;letter-spacing:.2em;color:#aaa}.photo{position:absolute;inset:0;background-size:cover;background-position:center;animation:ken 13s ease-in-out infinite alternate}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#041418e8,#04141855 65%),linear-gradient(0deg,#04141899,transparent 60%)}.p1{background-image:url('https://commons.wikimedia.org/wiki/Special:FilePath/Tl%C3%A1huac-Plaza%20central.JPG?width=2400')}.p2{background-image:url('https://commons.wikimedia.org/wiki/Special:FilePath/Tl%C3%A1huac-Lago%20de%20Los%20Reyes.JPG?width=2400')}.p3{background-image:url('https://commons.wikimedia.org/wiki/Special:FilePath/Parroquia%20de%20San%20Pedro%20Apostol%2C%20Tl%C3%A1huac.jpg?width=1800')}.date{background:#071f24}.date-art{position:absolute;right:8%;top:50%;transform:translateY(-50%);width:46vw;height:46vw;border:1px solid #c9601c44;border-radius:50%;display:grid;place-items:center}.date-art span{font-family:'Cormorant Garamond';font-size:clamp(7rem,17vw,15rem);color:#c9601c12}.date-art b{position:absolute;font-size:12px;letter-spacing:.25em;color:#c9601c}.fact{display:flex;align-items:center;gap:18px;margin-top:25px;border-left:1px solid #c9601c;padding-left:16px}.fact strong{font-family:'Cormorant Garamond';font-size:38px;color:#eee7d8}.fact span{font-size:11px;line-height:1.5;color:#aaa}.waters{background:#052b31}.mapwater{position:absolute;right:0;top:0;width:62%;height:100%;background:repeating-linear-gradient(167deg,transparent 0 60px,#5aa2a11a 61px 63px),repeating-linear-gradient(12deg,transparent 0 95px,#5aa2a10e 96px 98px);transform:skewY(-4deg);animation:water 12s linear infinite}.quote{margin-top:28px;font-family:'Cormorant Garamond';font-size:31px;color:#f0d9ac}.quote small{display:block;margin-top:5px;font-family:Manrope;font-size:8px}.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:25px}.chips b{font-size:8px;letter-spacing:.12em;padding:8px 10px;border:1px solid #c9601c44;color:#d7cda8}.commerce{background:#062b31}.canals{position:absolute;inset:0;background:linear-gradient(160deg,transparent 35%,#6fa6a312 36% 48%,transparent 49%),linear-gradient(25deg,transparent 55%,#6fa6a10f 56% 67%,transparent 68%)}.boat{position:absolute;left:55%;top:45%;font-size:40px;color:#7a5638;animation:boat 8s ease-in-out infinite}.route{display:flex;align-items:center;gap:15px;margin-top:30px;color:#c9601c;font-size:8px;letter-spacing:.1em}.route i{width:35px;height:1px;background:#c9601c55}.note{font-size:11px;color:#9eaa9f;margin-top:25px}.roots{position:absolute;right:7%;top:17%;width:44%;display:grid;grid-template-columns:1fr 1fr;gap:15px}.roots article{border:1px solid #c9601c33;padding:24px;min-height:130px;position:relative;background:#071c2170}.roots article:before{content:'';position:absolute;left:50%;bottom:-16px;width:1px;height:16px;background:#c9601c44}.roots b{font-family:'Cormorant Garamond';font-size:28px;color:#e2934f;display:block}.roots span{display:block;color:#aeb5a9;font-size:10px;line-height:1.6;margin-top:10px}.conquest{background:#0b2023}.timeline{position:absolute;left:12%;right:12%;top:27%;display:flex;align-items:center;justify-content:space-between;color:#c9601c;font-family:'Cormorant Garamond';font-size:22px}.timeline i{height:1px;flex:1;background:#c9601c44;margin:0 14px}.church .copy,.present .copy{width:520px}.hintbox{margin-top:30px;border:1px solid #c9601c44;padding:18px;font-size:11px;color:#c8c3b1}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:22px}.card{position:relative;min-height:110px;border:1px solid #c9601c33;background:#071c21b8;padding:14px;cursor:pointer;transition:.35s;overflow:hidden}.card:hover,.card.selected{border-color:#c9601c;background:#102b30;transform:translateY(-4px)}.card b{font-family:'Cormorant Garamond';font-size:24px;color:#eee7d8}.card small{display:block;margin-top:8px;font-size:7px}.card .hover{position:absolute;inset:auto 0 0 0;padding:9px;background:#c9601ce8;color:#102126;font-size:8px;transform:translateY(100%);transition:.3s}.card:hover .hover,.card.selected .hover{transform:translateY(0)}.panel{position:absolute;right:6%;bottom:8%;width:320px;background:#0b2529eF;border:1px solid #c9601c88;padding:24px;opacity:0;transform:translateY(20px);pointer-events:none;transition:.35s;z-index:10}.panel.open{opacity:1;transform:none;pointer-events:auto}.panel button{position:absolute;right:10px;top:8px;background:none;border:0;color:#eee;font-size:25px;cursor:pointer}.panel h3{margin:8px 0}.panel>b{font-size:10px;color:#c9601c}.panel p{font-size:11px}.stats{display:flex;gap:35px;margin-top:35px}.stats span{font-size:8px;letter-spacing:.15em;color:#aaa}.stats b{display:block;font-family:'Cormorant Garamond';font-size:44px;color:#e2934f}.final{text-align:center}.final .copy{left:50%;width:80%;text-align:center;transform:translate(-50%,-50%)}.final .copy p{margin-left:auto;margin-right:auto}.finalline{font-family:'Cormorant Garamond';font-size:clamp(2.5rem,5vw,5rem);line-height:.8;margin:5px}.finalline.strong{color:#eee7d8}.final h2{margin-top:45px;font-size:clamp(4rem,8vw,8rem)}@keyframes ken{to{transform:scale(1.08)} }@keyframes water{to{background-position:0 200px}}@keyframes boat{50%{transform:translateX(180px) rotate(2deg)}}@media(max-width:800px){header{left:16px;right:16px}#dots{left:14px;gap:6px}.copy{left:13%;width:78%;top:58%}h1{font-size:clamp(2.6rem,12vw,4.2rem)}h2{font-size:clamp(2.1rem,10vw,3.4rem)}h3{font-size:1.9rem}.kicker{font-size:15px}.scroll{margin-top:26px}.roots{position:absolute;left:13%;right:9%;top:15%;width:auto}.roots article{padding:14px;min-height:95px}.roots b{font-size:21px}.roots span{font-size:8px}.grid{grid-template-columns:repeat(2,1fr);max-height:46vh;overflow:auto}.panel{left:9%;right:9%;bottom:5%;width:auto}.date-art{top:27%;right:10%;width:48vw;height:48vw}.date-art span{font-size:clamp(4rem,13vw,8rem)}.timeline{top:17%;left:13%;right:9%;font-size:14px}.timeline i{margin:0 5px}.brand span{display:none}.quote{font-size:22px}.fact strong{font-size:28px}.stats{gap:20px;flex-wrap:wrap}.stats b{font-size:32px}.finalline{font-size:clamp(1.9rem,8vw,3.2rem)}.final h2{font-size:clamp(2.4rem,11vw,4rem);margin-top:28px}.final .copy{width:86%}.counter{right:16px;bottom:14px}}
@media(max-width:420px){.copy{left:16%;width:74%}h1{font-size:clamp(2.1rem,11vw,3rem)}h2{font-size:clamp(1.8rem,9vw,2.6rem)}.roots{left:16%}.timeline{left:16%}#dots{left:10px}}