/* Palette and typography from the supplied Zona Kite review.
   Decorative SVG waves and stripes are CSS geometry, not official logo artwork. */
:root{--ink:#002D6B;--navy:#002D6B;--blue:#13A2CD;--teal:#00BDB6;--accent:#00BDB6;--cream:#FDF6EC;--line:rgba(0,45,107,.18);--muted:#425A76;--body:'Montserrat',Arial,sans-serif;--display:'Montserrat',Arial,sans-serif}
body{background:var(--cream);color:var(--ink);font-family:var(--body);font-weight:400}
button,input,select,textarea{font-family:var(--body)}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.01em;line-height:1.12}
h1,h2{font-weight:900}h3,h4{font-weight:800}
.eyebrow,.hero-top,.school-signature,.gallery-foot>span{font-weight:600;letter-spacing:.16em;line-height:1.6}
.serif{font-family:var(--display);font-style:normal;font-weight:800;font-size:.77em;letter-spacing:-.01em;line-height:1.18;color:var(--ink)}
.brand{font-family:var(--display);font-weight:800;letter-spacing:-.01em}.brand-light{font-weight:800}.brand small{font-family:var(--body);letter-spacing:.2em;font-weight:600}
.button{font-weight:800;letter-spacing:0;border-radius:4px}.button.brand-accent{background:var(--teal);border-color:var(--teal);color:var(--navy)}.button.brand-accent:hover{background:#19CCC3;border-color:#19CCC3;color:var(--navy)}
.text-link{color:var(--navy);border-bottom-color:var(--teal);text-underline-offset:5px}.text-link:hover{border-bottom-color:var(--navy)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.hero a:focus-visible,.hero button:focus-visible,.station a:focus-visible,.contact a:focus-visible,footer a:focus-visible{outline-color:var(--cream)}
::selection{background:var(--teal);color:var(--navy)}
/* Compact hero lettering leaves room for the photographs. */
.hero{background:var(--navy)}
.hero .hero-shade{background:linear-gradient(90deg,rgba(0,31,75,.72),rgba(0,31,75,.18) 85%),linear-gradient(0deg,rgba(0,31,75,.72),transparent 58%,rgba(0,31,75,.4))}
.hero-content{top:27%;max-width:1000px;right:7%}
.hero h1{font-size:clamp(54px,6.8vw,104px);line-height:1.06;letter-spacing:-.01em;font-weight:900;margin:23px 0 28px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--cream)}
.hero-copy{gap:32px}.hero-copy p{font-size:15px;line-height:1.85;font-weight:500;max-width:560px;color:#fff}
.hero-top i{background:var(--teal)}.hero-reel{background:linear-gradient(145deg,rgba(0,45,107,.8),rgba(0,45,107,.97))}.hero-reel .reel-wave{color:var(--teal)}
.hero-controls button[aria-pressed=true]{background:var(--teal);color:var(--navy);border-color:var(--teal)}
.hero::after,footer::before{content:'';position:absolute;left:0;right:0;height:7px;background:linear-gradient(90deg,var(--teal) 0 45%,var(--blue) 45% 73%,var(--navy) 73%);pointer-events:none}
.hero::after{bottom:0;z-index:3}
.ticker{background:var(--cream);border-block:1px solid var(--line);padding:23px 6%;color:var(--navy)}
.ticker>div{display:flex;justify-content:space-between;align-items:center;gap:35px;width:100%;animation:none;font:800 13px/1.4 var(--display);letter-spacing:.13em}.ticker span{padding:0;font:inherit;white-space:nowrap}
body .courses,body .school,body .moments{background:var(--cream)}
.section-head h2,.courses h2,.station h2,.trip h2{font-size:clamp(38px,4.1vw,60px);line-height:1.12;letter-spacing:-.01em}
.section-head h2 .serif,.station h2 .serif,.trip h2 .serif{display:inline-block;margin-top:10px}
.section-head>p,.course-body>p,.learning-step p,.school-copy>p:not(.eyebrow),.trip-copy>p:not(.eyebrow),.trip-notes small,.rate-strip p,.school-real figcaption{color:var(--muted);font-weight:400}
.course-body h3{font-size:clamp(29px,2.8vw,41px);line-height:1.14;letter-spacing:-.01em;font-weight:800}
.course-tabs{border-bottom-color:var(--line)}.course-tabs button{color:var(--muted);font-weight:800}.course-tabs [aria-selected=true]{color:var(--navy);border-bottom-color:var(--teal)}
.learning-step{border-top-color:var(--line)}.learning-step>b{font-family:var(--display);font-size:18px;font-weight:800;color:var(--navy)}.learning-step strong{font-weight:800}
body .course-alternate,body .rate-strip{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;color:var(--navy)}.rate-strip b{font-weight:600;letter-spacing:.16em}
.school h2{font-size:clamp(36px,3.5vw,51px);line-height:1.12;letter-spacing:-.01em}.school h2 .serif{margin-top:12px;white-space:normal}.school-signature .signature-wave{color:var(--navy)}
/* Simple decorative waves; no claim to be supplied official artwork. */
body .station{position:relative;background:var(--navy);color:var(--cream)}
.station::before{content:'';position:absolute;top:0;left:0;right:0;height:18px;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v6c-240 24-480-12-720 0S240 30 0 6Z' fill='%2313A2CD'/%3E%3Cpath d='M0 0h1440v3c-240 16-480-8-720 0S240 19 0 3Z' fill='%2300BDB6'/%3E%3C/svg%3E");background-size:100% 100%;background-repeat:no-repeat}
.station .serif,.spot .serif,.contact .serif{color:var(--teal)}
.station .eyebrow,.station .text-link,.spot .eyebrow,.contact .eyebrow{color:var(--teal)}
.station-intro>div>p:not(.eyebrow),.services p,.spot-copy>p:not(.eyebrow):not(.spot-note){color:rgba(253,246,236,.86)}
.services article{border-top-color:rgba(253,246,236,.3)}.services h3{font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.25}.services .service-number{color:var(--teal);border-color:rgba(0,189,182,.65);font-weight:600}
body .trip{background:#fff}body .trip-coche{background:var(--cream)}.trip-notes{border-color:var(--line)}.trip-notes>span{font-weight:600;letter-spacing:.16em}.trip .image-caption{background:rgba(0,45,107,.88);color:var(--cream)}
.spot{background:var(--navy);color:var(--cream)}.spot h2{font-size:clamp(40px,4.8vw,64px);line-height:1.12;letter-spacing:-.01em}.spot h2 .serif{font-size:.65em}.spot .text-link{color:var(--cream)}
.wind-card{border-color:rgba(253,246,236,.3);background:rgba(253,246,236,.05);border-radius:12px}.wind-card a,.wind-symbol{color:var(--teal)}
.gallery-item>span{font-family:var(--body);font-weight:600}.gallery-foot>span{color:var(--muted)}.gallery-item::after{background:linear-gradient(transparent,rgba(0,31,75,.85))}
body .contact{background:var(--navy);color:var(--cream)}.contact-main h2{font-size:clamp(45px,5.5vw,82px);line-height:1.1;letter-spacing:-.01em}.contact-main h2 .serif{display:inline-block;margin-top:10px}.contact-top{color:var(--teal)}.contact-handle,.contact-note{color:rgba(253,246,236,.85)}.contact-steps b{font-weight:800;color:var(--teal)}
.whatsapp-float{background:var(--teal);color:var(--navy);border-color:rgba(0,45,107,.15);box-shadow:0 6px 24px rgba(0,45,107,.22)}.whatsapp-float:hover{background:#19CCC3;color:var(--navy)}
footer{position:relative;background:var(--navy);color:var(--cream)}footer::before{top:0}footer>p,.footer-bottom,footer .photo-credits{color:rgba(253,246,236,.78)}footer .photo-credits a:hover{color:var(--teal)}.footer-bottom .terzu{display:inline!important}
dialog{background:var(--navy);color:var(--cream);border-radius:10px}dialog::backdrop{background:rgba(0,20,48,.92)}
/* Visual treatment only; new section layout is supplied separately. */
.lesson-plans,.extra-services,.booking,.faq,.travel-guide{color:var(--navy)}
.lesson-plan,.service-detail{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:0 5px 20px rgba(0,45,107,.035)}
.lesson-plan h3,.service-detail h3{font-size:24px;font-weight:800;letter-spacing:-.01em;line-height:1.2}.lesson-plan p,.service-detail p{color:var(--muted);line-height:1.85;font-size:14px}
.lesson-plan .eyebrow,.lesson-plan .duration,.lesson-plan .hours{color:var(--navy);font-weight:800}
.lesson-plan a:not(.button),.service-detail a:not(.button){color:var(--navy);text-decoration-color:var(--teal);text-underline-offset:4px}.extra-services .service-detail{background:var(--cream);color:var(--navy)}
.booking{background:var(--cream)}.booking h2,.faq h2,.travel-guide h2,.lesson-plans h2{font-size:clamp(32px,4vw,56px);letter-spacing:-.01em;line-height:1.15}
.booking-form{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3.5vw,44px);box-shadow:0 10px 40px rgba(0,45,107,.055)}
.booking-form label{font-size:12px;line-height:1.6;font-weight:800;color:var(--navy)}
.booking-form input,.booking-form select,.booking-form textarea{display:block;width:100%;max-width:100%;min-height:48px;border:1px solid rgba(0,45,107,.35);border-radius:6px;padding:12px 14px;background:var(--cream);color:var(--navy);font:400 16px/1.5 var(--body);box-sizing:border-box}
.booking-form textarea{min-height:115px;resize:vertical}.booking-form input::placeholder,.booking-form textarea::placeholder{color:#526781;opacity:1}.booking-form input:focus,.booking-form select:focus,.booking-form textarea:focus{border-color:var(--navy)}
.booking-form small,.booking-form .form-note{font-size:12px;line-height:1.7;color:var(--muted)}.booking-form .button{min-height:50px}
.faq details{background:var(--cream);border-block-start:1px solid var(--line);padding:20px 0}.faq details:last-child{border-block-end:1px solid var(--line)}
.faq summary{color:var(--navy);font-weight:800;font-size:16px;line-height:1.5;cursor:pointer;list-style-position:outside;margin-inline-start:20px;padding-inline-start:6px}.faq summary::marker{color:var(--navy)}.faq details[open] summary{margin-bottom:14px}.faq details p{font-size:14px;color:var(--muted);line-height:1.9;max-width:850px}
.travel-guide{background:var(--cream)}.travel-guide p{color:var(--muted);line-height:1.85}.travel-guide a:not(.button){color:var(--navy);text-decoration:underline;text-decoration-color:var(--teal);text-underline-offset:4px}
.wind-embed{background:#fff;color:var(--navy);border:1px solid var(--line);border-radius:14px;overflow:hidden}.wind-embed iframe{width:100%;border:0}
@media(min-width:1500px){.hero-content{top:25%}}
@media(max-width:1050px){.hero h1{font-size:clamp(50px,7.1vw,76px)}.hero-reel{width:145px;height:190px;bottom:115px}.ticker>div{font-size:11px;gap:22px}.services h3{font-size:18px}.course-panel{gap:5%}}
@media(max-width:760px){.hero-content{top:25%;left:7%;right:7%;max-width:none}.hero h1{font-size:clamp(30px,9.6vw,64px);line-height:1.1;letter-spacing:-.01em;margin:22px 0 24px;text-wrap:initial}.hero-copy{display:block}.hero-copy p{font-size:13px;line-height:1.85;max-width:450px;margin-bottom:20px}.hero-reel{display:none}.ticker{padding:20px 7%;overflow-x:auto}.ticker>div{justify-content:flex-start;width:max-content;gap:30px;font-size:11px}.section-head h2,.courses h2,.station h2,.trip h2{font-size:clamp(31px,8.2vw,45px);line-height:1.16}.school h2{font-size:clamp(30px,8vw,43px);line-height:1.16}.course-body h3{font-size:clamp(27px,7vw,35px);line-height:1.18}.services h3{font-size:18px}.contact-main h2{font-size:clamp(37px,10vw,56px)}.spot h2{font-size:clamp(35px,9.5vw,52px)}.spot h2 .serif{font-size:.7em}.course-tabs{gap:20px}.brand small{letter-spacing:.16em}.hero-bottom{padding-bottom:4px}.lesson-plan,.service-detail{padding:22px;border-radius:12px}.lesson-plan h3,.service-detail h3{font-size:22px}.booking-form{padding:22px;border-radius:12px}.faq summary{font-size:15px}}
/* Official logo supplied by Zona Kite on 15 October 2026. */
.brand.brand-official{display:inline-flex;flex:0 0 auto;gap:0;line-height:0}
.brand.brand-official img{width:200px;height:auto;border-radius:0;object-fit:contain}
footer .brand.brand-official img{width:220px}
@media(max-width:1050px) and (min-width:701px){header .brand.brand-official img{width:172px}}
@media(max-width:700px){header{gap:16px}header .brand.brand-official img{width:172px}footer .brand.brand-official img{width:180px}}
@media(max-width:360px){header .brand.brand-official img{width:150px}}
/* Use the official isotipo for secondary brand marks as well. */
.hero-reel .reel-isotipo{position:absolute;left:20px;top:38px;width:76px;height:auto;object-fit:contain;background:#fff;padding:7px;border-radius:12px}
.school-signature .signature-isotipo{width:48px;height:auto;object-fit:contain;flex-shrink:0}
