:root { --ink:#142b2d; --paper:#eef0e8; --cream:#dbe9df; --red:#0c6b62; --yellow:#c69b4e; --muted:#4e6764; --blue:#142b3e; --sky:#c9ded9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:linear-gradient(rgba(238,240,232,.58),rgba(201,222,217,.65)),url("assets/san-petersburgo-nieve.jfif") center top/cover fixed; font-family:"DM Sans",sans-serif; line-height:1.55; }
.snowfall,.snowfall::before,.snowfall::after { position:fixed; inset:-130px 0 0; pointer-events:none; z-index:20; content:""; background-repeat:repeat; }
.snowfall { background-image:radial-gradient(circle,rgba(255,255,255,.85) 0 1.5px,transparent 2.5px),radial-gradient(circle,rgba(236,250,255,.7) 0 2px,transparent 3px); background-size:140px 140px,230px 230px; background-position:18px 5px,92px 68px; animation:fall 15s linear infinite; }
.snowfall::before { opacity:.7; background-image:radial-gradient(circle,rgba(255,255,255,.8) 0 1px,transparent 2px),radial-gradient(circle,rgba(255,255,255,.65) 0 1.8px,transparent 2.8px); background-size:105px 105px,190px 190px; background-position:57px 31px,4px 112px; animation:fall 11s linear infinite; }
.snowfall::after { opacity:.45; background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 2.2px,transparent 3.2px); background-size:280px 280px; background-position:134px 34px; animation:fall 19s linear infinite; }
@keyframes fall { from { transform:translate3d(0,-80px,0); } to { transform:translate3d(-32px,1080px,0); } }
@media (prefers-reduced-motion:reduce) { .snowfall,.snowfall::before,.snowfall::after { animation:none; } }
.topbar { min-height:92px; display:flex; align-items:center; justify-content:space-between; max-width:1180px; margin:auto; padding:14px 30px; background:linear-gradient(rgba(13,25,28,.48),rgba(13,25,28,.64)),url("assets/cabecera-noche-nieve.jfif") center 50%/cover; }
.brand { display:inline-flex; align-items:center; color:var(--ink); text-decoration:none; }
.brand-logo { width:58px; height:58px; display:block; object-fit:contain; border-radius:50%; box-shadow:0 2px 8px rgba(29,24,53,.14); }
nav { display:flex; gap:31px; } nav a, footer a { color:var(--ink); text-decoration:none; font-size:14px; font-weight:600; } .topbar nav a { color:#f7f4e9; text-shadow:0 1px 4px rgba(0,0,0,.7); } nav a:hover, footer a:hover,.text-link:hover { color:var(--red); }
.button { background:var(--red); color:#fffaf1; text-decoration:none; padding:15px 21px; display:inline-flex; gap:17px; align-items:center; border-radius:3px; font-weight:700; font-size:15px; transition:transform .2s,background .2s; box-shadow:4px 4px 0 var(--blue); }
.button:hover { background:#583581; transform:translate(-1px,-2px); }.button-small { padding:10px 15px; font-size:13px;box-shadow:3px 3px 0 var(--blue); }
.hero { max-width:1180px; min-height:576px; margin:auto; padding:65px 30px 76px; display:grid; grid-template-columns:1fr 0.9fr; align-items:center; gap:50px; }
.eyebrow { margin:0 0 15px; font-size:11px; font-weight:700; color:var(--red); letter-spacing:.16em; }
h1,h2,h3 { margin:0; line-height:1.08; font-family:"Playfair Display",serif; } h1 { max-width:570px; font-size:clamp(50px,6vw,78px); letter-spacing:-.045em; } h1 em { color:var(--red); font-weight:600; } h2 { font-size:clamp(34px,4vw,52px); letter-spacing:-.035em; }
.hero-text { max-width:505px; margin:24px 0 29px; font-size:18px; color:var(--muted); }.hero-actions { display:flex; align-items:center; gap:26px; }.text-link { color:var(--ink); font-weight:700; text-decoration:underline; text-underline-offset:5px; font-size:15px; }.hero-note { margin-top:51px; font-size:13px; color:var(--muted); }.hero-note span { color:#59a571; font-size:18px; vertical-align:-1px; }
.hero-art { position:relative; height:425px; overflow:hidden; background:var(--sky); border-radius:220px 220px 4px 4px; border:8px solid #e4e6da; box-shadow:0 0 0 1px #a9c8bb; }.sun { position:absolute; width:270px;height:270px;right:-42px;top:43px;border-radius:50%;background:var(--yellow); }.arch { position:absolute; border-radius:160px 160px 0 0; }.arch-back { width:245px;height:316px;bottom:0;left:67px;background:var(--blue); }.arch-front { width:180px;height:243px;bottom:0;left:99px;background:var(--red); display:flex;align-items:center;justify-content:center;color:#fffaf1; }.arch-front span { font-family:"Playfair Display",serif;font-size:29px; transform:rotate(-90deg); }.hero-art p { position:absolute; bottom:21px;right:28px;margin:0;font-size:11px;letter-spacing:.23em;color:var(--ink); }
.hero-video { display:flex;align-items:center;justify-content:center;background:var(--blue);border-radius:28px; }
.hero-video video { width:100%;height:100%;display:block;object-fit:cover;object-position:center; }
.section { max-width:1180px; margin:auto; padding:112px 30px; }.intro { text-align:center; max-width:800px; background:rgba(238,240,232,.48); }.intro h2 { font-size:clamp(35px,4.5vw,57px); }.intro > p:last-child { max-width:590px;margin:22px auto 0;color:var(--muted);font-size:17px; }
.classes { padding-top:66px; }.section-heading { display:flex;justify-content:space-between;gap:45px;align-items:end;margin-bottom:39px; }.section-heading h2 { max-width:600px; }.section-heading > p { max-width:300px;margin:0;color:var(--muted);font-size:15px; }.class-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:18px; }.class-card { background:var(--cream);padding:33px 29px 30px;min-height:330px;border-top:5px solid var(--red); }.class-card.featured { background:var(--blue);color:#fffaf1;border-top-color:var(--yellow); }.card-number { color:var(--red);font-weight:700;font-size:13px; }.class-card h3 { font-size:29px;margin:50px 0 13px; }.class-card p { color:var(--muted);font-size:14px;margin:0 0 21px; }.class-card.featured p { color:#d6e8df; }.class-card ul { margin:0;padding:0;list-style:none;font-size:13px;line-height:1.9; }.class-card li::before { content:"— ";color:var(--yellow); }
.about { display:grid;grid-template-columns:.85fr 1fr;gap:10%;align-items:center; }.about-photo { min-height:466px;background:var(--blue);overflow:hidden;border:7px solid var(--blue);box-shadow:10px 10px 0 var(--red); }.about-photo img { width:100%;height:100%;display:block;object-fit:cover;object-position:center 22%; }.about-copy { max-width:495px; }.about-copy h2 { font-size:clamp(34px,4vw,49px); }.about-copy p { color:var(--muted);font-size:16px;margin:20px 0; }.about-copy .text-link { display:inline-block;margin-top:9px; }
.gallery { display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:18px;align-items:center;padding-top:45px;padding-bottom:105px; }.gallery-image { overflow:hidden;background:var(--cream);border:6px solid #e4e6da;box-shadow:0 0 0 1px #9abdb1; }.gallery-image img { width:100%;height:100%;display:block;object-fit:cover; }.gallery-tall { height:405px; }.gallery-light { height:300px; }.gallery-copy { text-align:center;padding:25px; }.gallery-copy h2 { font-size:clamp(30px,3vw,43px); }.gallery-copy p:last-child { color:var(--muted);font-size:15px;margin:18px auto 0;max-width:280px; }
.quote-section { background:var(--blue);color:#fffaf1;text-align:center;padding:93px 30px;border-top:8px solid var(--yellow);border-bottom:8px solid var(--yellow); }.quote-section blockquote { max-width:800px;margin:0 auto 18px;font-family:"Playfair Display",serif;font-size:clamp(30px,4vw,50px);line-height:1.2; }.quote-section span { font-size:14px;opacity:.82; }
.contact { text-align:center;max-width:850px;padding:115px 30px; }.contact h2 { font-size:clamp(38px,5vw,59px); }.contact > p:not(.eyebrow) { max-width:540px;margin:22px auto 30px;color:var(--muted);font-size:17px; }.button-light { background:var(--blue); }.button-light:hover { background:#15112b; }
footer { border-top:1px solid #ded3c4;max-width:1180px;margin:auto;padding:28px 30px;display:flex;align-items:center;justify-content:space-between; } footer .brand-logo { width:46px;height:46px; } footer p { margin:0;color:var(--muted);font-size:12px; }
@media (max-width:760px) { .topbar { padding:12px 20px; }.topbar nav { display:none; }.hero { min-height:auto;grid-template-columns:1fr;padding:54px 20px 55px;gap:47px; }.hero-art { height:355px; }.hero-note { margin-top:35px; }.section { padding:75px 20px; }.classes { padding-top:15px; }.section-heading,.about { display:block; }.section-heading > p { margin-top:18px; }.class-grid { grid-template-columns:1fr; }.class-card { min-height:0; }.class-card h3 { margin-top:30px; }.about-photo { min-height:360px;margin-bottom:55px; }.gallery { grid-template-columns:1fr;padding-top:5px;padding-bottom:75px;gap:25px; }.gallery-copy { padding:13px 0; }.gallery-tall,.gallery-light { height:360px; }.quote-section { padding:74px 20px; }.contact { padding:80px 20px; } footer { padding:24px 20px; } footer p { display:none; } }