@font-face {
    font-family: "Kavoon";
    src: url("fonts/Kavoon-Regular.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Futura Md BT";
    src: url("fonts/futuramdbt_bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --navy: #07366a;
    --blue: #1da8dc;
    --sky: #8de0ef;
    --green: #33a967;
    --mint: #91e0b0;
    --yellow: #ffc83d;
    --coral: #ff6857;
    --cream: #fffaf0;
    --paper: #fffdf8;
    --ink: #123a61;
    --shadow: 0 16px 38px rgba(18, 58, 97, .12);
    --radius: 28px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 199, 61, .09) 0 2px, transparent 3px),
        radial-gradient(circle at 82% 19%, rgba(42, 149, 101, .08) 0 2px, transparent 3px),
        #fffaf0;
    background-size: 36px 36px, 48px 48px, auto;
    font-family: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
    line-height: 1.5;
    overflow-x: hidden;
}

body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    width: 190px;
    height: 360px;
    opacity: .08;
    background: repeating-linear-gradient(118deg, var(--green) 0 18px, transparent 18px 42px);
    transform: rotate(18deg);
}

body::before { left: -120px; top: 28%; }
body::after { right: -130px; top: 54%; transform: rotate(-18deg); }

a { color: inherit; }
button, input { font: inherit; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    left: 20px;
    top: -80px;
    z-index: 1000;
    padding: 12px 20px;
    background: var(--navy);
    color: white;
    border-radius: 12px;
    transition: top .2s;
}

.skip-link:focus { top: 12px; }

.site-header {
    position: absolute;
    z-index: 100;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1120px, calc(100% - 48px));
    min-height: 84px;
    padding: 12px 18px 12px 24px;
    display: flex;
    align-items: center;
    gap: 28px;
    background: rgba(255, 255, 255, .95);
    border: 1px solid rgba(7, 54, 106, .06);
    border-radius: 30px;
    box-shadow: 0 12px 32px rgba(10, 73, 113, .14);
    backdrop-filter: blur(10px);
}

.brand,
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.footer-logo {
    display: block;
    width: 110px;
    height: auto;
}

.brand-name {
    color: var(--navy);
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: -.04em;
}

.brand-mark {
    display: block;
    position: relative;
    width: 54px;
    height: 50px;
}

.brand-mark i {
    position: absolute;
    left: 22px;
    bottom: 7px;
    width: 13px;
    height: 28px;
    border-radius: 90% 10% 90% 10%;
    transform-origin: 6px 22px;
}

.brand-mark i:nth-child(1) { background: #3ebd86; transform: rotate(-58deg); }
.brand-mark i:nth-child(2) { background: #f6ad32; transform: rotate(-22deg); }
.brand-mark i:nth-child(3) { background: #ffd148; transform: rotate(18deg); }
.brand-mark i:nth-child(4) { background: #27aebf; transform: rotate(58deg); }
.brand-mark i:nth-child(5) { background: #f36f5b; width: 22px; height: 12px; left: 24px; bottom: 4px; transform: rotate(8deg); }

.main-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: clamp(16px, 2.7vw, 38px);
}

.main-nav a {
    position: relative;
    padding: 20px 0 17px;
    color: var(--navy);
    font-size: .78rem;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 9px;
    height: 3px;
    background: #28b789;
    border-radius: 4px;
    transition: left .2s, right .2s;
}

.main-nav a:hover::after,
.main-nav a.active::after { left: 0; right: 0; }

.search-wrap { position: relative; }

.search-button {
    position: relative;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: var(--blue);
    cursor: pointer;
    box-shadow: 0 7px 16px rgba(29, 168, 220, .28);
    transition: transform .2s, background .2s;
}

.search-button:hover { transform: scale(1.06); background: #118dbd; }
.search-button span { position: absolute; width: 16px; height: 16px; border: 3px solid white; border-radius: 50%; left: 15px; top: 13px; }
.search-button span::after { content: ""; position: absolute; width: 9px; height: 3px; background: white; transform: rotate(45deg); right: -7px; bottom: -4px; border-radius: 3px; }

.search-panel {
    position: absolute;
    top: 66px;
    right: 0;
    width: min(390px, calc(100vw - 48px));
    padding: 20px;
    background: white;
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.search-panel label { display: block; margin-bottom: 8px; font-weight: 900; }
.search-panel > div { display: flex; }
.search-panel input { min-width: 0; flex: 1; border: 2px solid #b7dbe8; border-radius: 12px 0 0 12px; padding: 11px 12px; outline: 0; }
.search-panel input:focus { border-color: var(--blue); }
.search-panel button { border: 0; border-radius: 0 12px 12px 0; background: var(--yellow); color: var(--navy); font-weight: 900; padding: 0 14px; cursor: pointer; }
.search-feedback { min-height: 1.3em; margin: 8px 0 0; font-size: .84rem; }

.menu-toggle { display: none; }

.hero {
    position: relative;
    min-height: 760px;
    /*padding: 90px max(7vw, calc((100vw - 1120px) / 2)) 130px;*/
    padding: 90px max(7vw, calc((100vw - 1120px) / 2)) 130px 130px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background-image:
        linear-gradient(90deg, rgba(139, 226, 241, .98) 0%, rgba(139, 226, 241, .9) 32%, rgba(139, 226, 241, .18) 57%, transparent 76%),
        url("../img/hero-charco-azul-v2.webp");
    background-size: cover;
    background-position: center;
}

/*.hero::before,
.hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 250px;
    height: 150px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,.96) 0 52%, transparent 54%);
    filter: blur(1px);
    opacity: .9;
}

.hero::before { left: -85px; top: 180px; }
.hero::after { right: 41%; top: 118px; transform: scale(.7); opacity: .7; }*/

.hero-content { position: relative; z-index: 3; width: min(510px, 48%); }
.hero p { font-family: "Futura Md BT", sans-serif; }
.hero .button-yellow { font-family: "Futura Md BT", sans-serif; }
.eyebrow { margin: 0 0 8px; color: #277b6a; font-size: .9rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }

.hero h1 {
    margin: 0 0 22px;
    color: #072f5f;
    font-family: "Kavoon", cursive;
    font-weight: 400;
    font-size: clamp(4.2rem, 8vw, 7.8rem);
    line-height: 1em;
    letter-spacing: -.035em;
    text-transform: uppercase;
    -webkit-text-stroke: 12px #fff;
    paint-order: stroke fill;
    text-shadow: 0 4px 0 rgba(255,255,255,.22);
}

.hero-content > p:not(.eyebrow) { max-width: 410px; margin: 0 0 30px; font-size: 1.06rem; font-weight: 700; }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 24px;
    border: 0;
    border-radius: 16px;
    color: white;
    font-size: .82rem;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 8px 0 rgba(7, 54, 106, .12), 0 12px 24px rgba(7, 54, 106, .14);
    transition: transform .18s, box-shadow .18s;
}

.button:hover { transform: translateY(-3px); box-shadow: 0 10px 0 rgba(7,54,106,.1), 0 16px 28px rgba(7,54,106,.18); }
.button-yellow { background: var(--yellow); color: var(--navy); }
.button-coral { background: var(--coral); }
.button-green { background: #48aa6d; }

.hero-badge { position: absolute; right: 5vw; bottom: 75px; z-index: 2; color: rgba(255,255,255,.75); font-size: 4rem; animation: float 3.2s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-12px) rotate(8deg); } }

.paper-wave {
    position: relative;
    z-index: 4;
    height: 90px;
    margin-top: -60px;
    background: var(--cream);
    clip-path: polygon(0 30%, 9% 55%, 18% 28%, 29% 56%, 40% 32%, 52% 57%, 64% 30%, 76% 58%, 88% 31%, 100% 55%, 100% 100%, 0 100%);
}

.section { width: min(1030px, calc(100% - 48px)); margin: 0 auto; }
.section + .section { margin-top: 34px; }

.section-title {
    margin: 0 0 20px;
    color: var(--navy);
    font-family: "Kavoon", cursive;
    /*font-family: Impact, "Arial Black", sans-serif;*/
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    font-weight: 900;
    letter-spacing: .015em;
    text-align: center;
    text-transform: uppercase;
}

.section-title span { display: inline-block; margin: 0 11px; color: #43a970; font-family: Georgia, serif; font-size: .8em; transform: rotate(-18deg); }

.news-slider { position: relative; }
.news-slide {
    min-height: 390px;
    display: grid;
    grid-template-columns: 42% 58%;
    overflow: hidden;
    background: white;
    border: 1px solid rgba(7,54,106,.09);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    animation: reveal .45s ease;
}

@keyframes reveal { from { opacity: .3; transform: translateY(7px); } }
.news-copy { padding: 50px 44px 64px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.kicker { margin: 0 0 12px; color: var(--coral); font-weight: 900; text-transform: uppercase;  }
.news-copy h3 { margin: 0 0 12px; color: var(--navy); font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.08; font-family: "Kavoon", cursive;}
.news-copy > p:not(.kicker) { margin: 0 0 24px; font-family: "Futura Md BT", sans-serif; }
.news-visual { min-height: 390px; background-size: cover; background-position: center; }
.news-waterfall { background-image: url("../img/kukuy-banner.png"); background-position: 72% center; }
.news-visual.news-cover {
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.news-map { background-image: url("../img/mapa-charco-azul.webp"); }
.news-friends { background-image: url("../img/portada_amigos.webp"); background-position: 72% center; }

.slider-controls { position: absolute; left: 44px; bottom: 25px; display: flex; gap: 9px; }
.dot { width: 13px; height: 13px; padding: 0; border: 0; border-radius: 50%; background: #ccd1ce; cursor: pointer; }
.dot.active { background: var(--coral); transform: scale(1.12); }

.explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.explore-card {
    position: relative;
    min-height: 350px;
    padding: 24px 24px 0;
    overflow: hidden;
    border-radius: 26px;
    color: var(--navy);
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: transform .22s, box-shadow .22s;
}

.explore-card:hover { transform: translateY(-7px) rotate(-.4deg); box-shadow: 0 22px 42px rgba(18,58,97,.18); }
.explore-card h3 { position: relative; z-index: 3; margin: 0; font-family: "Kavoon", cursive; font-size: 2rem; letter-spacing: .02em; text-transform: uppercase; }
/*.explore-card h3 { position: relative; z-index: 3; margin: 0; font-family: Impact, "Arial Black", sans-serif; font-size: 2rem; letter-spacing: .02em; text-transform: uppercase; }*/

.stories-card { background: url("../img/fondo_historias.webp"); background-size: 80%; background-repeat: no-repeat; background-position: bottom; }
/*.games-card { background: linear-gradient(#86d9f0 0 64%, #42badc); }*/
.games-card { background: url("../img/fondo_kukuy.webp"); background-size: 80%; background-repeat: no-repeat; background-position: center; }
.characters-card { background: url("../img/fondo_personajes.webp"); background-size: 80%; background-repeat: no-repeat; background-position: bottom; }
/*.characters-card { background: #ffd96b; }*/
.card-art { position: absolute; inset: 75px 0 0; }
.character-art { background: url("../img/hero-charco-azul-v2.webp") 73% bottom / auto 100% no-repeat; transform: scale(1.25); transform-origin: center bottom; }
.island, .game-island { position: absolute; left: 12%; bottom: 20px; width: 76%; height: 125px; border-radius: 50% 50% 44% 42%; background: #6fbd62; box-shadow: inset 0 -22px #4d9963, 0 20px 0 -4px #397d70; }
.island::before { content: ""; position: absolute; left: 26%; top: -80px; width: 35%; height: 110px; border-radius: 50% 50% 20% 20%; background: #4cae58; box-shadow: -55px 35px 0 -15px #2f9666, 67px 42px 0 -10px #70c85e; }
.book { position: absolute; left: 18%; bottom: 8px; width: 64%; height: 60px; background: white; border-radius: 10% 10% 48% 48%; transform: perspective(150px) rotateX(28deg); box-shadow: inset 0 -7px #e4d5ad; }
.book::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: #d8c59c; }
.tree { position: absolute; left: 26%; bottom: 65px; width: 18px; height: 95px; background: #8b5b37; border-radius: 8px; }
.tree::before { content: ""; position: absolute; width: 110px; height: 95px; border-radius: 52%; background: #3ea35c; left: -45px; top: -62px; box-shadow: 30px 10px 0 #57bd63; }
.game-island { bottom: 44px; height: 160px; background: #50b969; box-shadow: inset 0 -32px #3d9770, 0 27px 0 -8px #348171; transform: rotate(-4deg); }
.controller { position: absolute; z-index: 2; left: 50%; top: 48%; transform: translate(-50%,-50%) rotate(-6deg); width: 145px; height: 85px; padding-top: 20px; border-radius: 36% 36% 48% 48%; background: #183f6e; color: var(--yellow); font-size: 2rem; text-align: center; box-shadow: inset 0 8px #31547f, 0 12px 18px rgba(7,54,106,.2); }
.controller::before, .controller::after { content: "+"; position: absolute; top: 23px; color: #b9e8f3; font-size: 2.3rem; line-height: 1; }
.controller::before { left: 21px; } .controller::after { content: "••"; right: 18px; top: 29px; font-size: 1.25rem; letter-spacing: 2px; }
.round-arrow { position: absolute; z-index: 4; right: 18px; bottom: 18px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #12a96c; color: white; font-size: 1.65rem; box-shadow: 0 7px 15px rgba(7,54,106,.2); }
.games-card .round-arrow { background: #0da9d8; }
.characters-card .round-arrow { background: #ffbd18; }

.feature {
    min-height: 230px;
    display: grid;
    grid-template-columns: 42% 58%;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.feature-copy { padding: 34px 42px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.feature-copy h2, .club h2 { margin: 0 0 8px; color: var(--navy); font-family: "Kavoon", cursive; font-size: clamp(1.8rem, 3.2vw, 2.65rem); letter-spacing: .015em; text-transform: uppercase; }
.feature-copy p { margin: 0 0 20px; font-family: "Futura Md BT", sans-serif; }
.feature-copy button {font-family: "Futura Md BT", sans-serif !important; }
.activity {
    min-height: 420px;
    background: linear-gradient(115deg, rgba(252,244,215,.98) 0 42%, transparent 42%), url("../img/fondo_Apodos.webp") center / cover no-repeat;
    /*background: linear-gradient(115deg, rgba(252,244,215,.98) 0 42%, transparent 42%), url("../img/fondo-apodos-magicos.png") center / cover no-repeat;*/
}
.activity .feature-copy { position: relative; z-index: 1; }
.activity .feature-copy h2 { margin-bottom: 18px; font-family: "Kavoon", cursive; font-size: clamp(2.35rem, 4.2vw, 3.8rem); line-height: .92; letter-spacing: .01em; text-transform: uppercase; }
.activity-title-word { display: block; color: var(--navy);font-family: "Kavoon", cursive;}
.activity-title-word-green { color: #3f9b55; }
.activity-description { max-width: 310px; color: var(--navy); font-size: clamp(1rem, 1.7vw, 1.25rem); font-weight: 700; line-height: 1.45;}
.activity-tagline { color: #4ca45e; font-size: clamp(1rem, 1.7vw, 1.25rem); font-weight: 900; }
.activity .button { gap: 9px; }
.activity .button span { font-size: 1.45rem; line-height: 0; }
.activity-art { min-height: 100%; background: url("../img/Dayami.webp"); background-size: 40%; background-repeat: no-repeat; background-position: bottom right;}

.drawing { grid-template-columns: 58% 42%; background: linear-gradient(100deg, #ffbd70 0 58%, #fff4d4 58%); }
.drawing-art { position: relative; overflow: hidden; }
#drawing-title {font-family: "Kavoon", cursive;}
.notebook { position: absolute; left: 26%; top: 30px; width: 300px; height: 165px; border: 8px solid #f2e4c7; border-radius: 9px; background: repeating-linear-gradient(0deg, #fffef8 0 24px, #d9edf2 25px 26px); transform: rotate(8deg); box-shadow: 0 12px 24px rgba(100,62,25,.2); }
.notebook::before { content: ""; position: absolute; left: 18px; top: -11px; bottom: -11px; width: 8px; background: repeating-linear-gradient(#6f8c9d 0 7px, transparent 7px 15px); }
.notebook i { position: absolute; left: 42%; top: 29px; color: #28a6d0; font-family: Arial, sans-serif; font-size: 4.2rem; font-style: normal; transform: rotate(-7deg); }
.pencil-cup { position: absolute; z-index: 2; left: 7%; bottom: 20px; width: 96px; height: 105px; display: grid; place-items: end center; border-radius: 9px 9px 30px 30px; background: #16839a; color: #ffc62e; font-size: 4rem; box-shadow: inset 0 -20px rgba(0,0,0,.13); }
.pencil-cup i, .pencil-cup b { position: absolute; width: 12px; height: 120px; left: 27px; bottom: 83px; border-radius: 8px; background: #ef4f47; transform: rotate(-15deg); }.pencil-cup b { left: 58px; height: 110px; background: #f4b727; transform: rotate(14deg); }
.drawing-pencil { position: absolute; z-index: 3; right: 4%; bottom: 32px; width: 150px; height: 19px; border-radius: 8px; background: #248bb3; transform: rotate(-32deg); box-shadow: inset 0 -5px rgba(0,0,0,.12); }
.drawing-pencil::after { content: ""; position: absolute; right: -25px; border-left: 28px solid #e3c69a; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }

.club {
    position: relative;
    min-height: 230px;
    padding: 34px 250px 34px 215px;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 10%, rgba(255,255,255,.18) 0 2px, transparent 3px),
        linear-gradient(135deg, #0ca4d5, #147dc0);
    background-size: 28px 28px, auto;
    color: white;
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}
.club h2 { color: white; font-size: clamp(2rem, 3.5vw, 3rem); }
.club p { margin: 0 0 15px; font-family: Arial, sans-serif; }
.club-form { display: flex; max-width: 500px; padding: 5px; background: white; border-radius: 16px; }
.club-form input { min-width: 0; flex: 1; border: 0; outline: 0; padding: 10px 14px; color: var(--navy); background: transparent; }
.club-form button { border: 0; border-radius: 12px; padding: 10px 22px; background: var(--yellow); color: var(--navy); font-size: .76rem; font-weight: 900; text-transform: uppercase; cursor: pointer; }
.club-feedback { min-height: 1.2em; margin: 9px 0 0 !important; font-size: .84rem; font-weight: 700; }
.club-envelope { position: absolute; left: 35px; top: 59px; width: 145px; height: 105px; display: grid; place-items: center; background: #ffe798; border: 8px solid #fff4bd; border-radius: 8px; transform: rotate(-10deg); box-shadow: 0 10px 20px rgba(7,54,106,.2); }
.club-envelope::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 50% 58%, 100% 0); background: #f7cf61; }
.club-envelope span { z-index: 2; width: 45px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #ff705c; color: white; }
.club-jiribilla {background: url("../img/fondo_historias.webp"); background-size: 80%; background-repeat: no-repeat; background-position: bottom;position: absolute;}
.treehouse { position: absolute; right: 1%; bottom: 0; width: 30%;background: url("../img/Insignia_Equipo_Jiribilla.webp");background-size: 100%; background-repeat:no-repeat;min-height: 100%; min-width: auto;}
/*.treehouse { position: absolute; right: -10px; bottom: 0; width: 215px; height: 220px; background: radial-gradient(ellipse at center, #49a759 0 45%, transparent 47%); }

.treehouse::before { content: ""; position: absolute; left: 92px; bottom: -15px; width: 34px; height: 155px; background: #75482f; border-radius: 20px; transform: rotate(3deg); }
.treehouse span { position: absolute; z-index: 2; left: 47px; top: 71px; width: 118px; height: 80px; border-radius: 12px 12px 4px 4px; background: #9b5f2f; border: 8px solid #75401f; }
.treehouse span::before { content: ""; position: absolute; left: -17px; right: -17px; top: -35px; height: 45px; background: #e46a34; clip-path: polygon(50% 0,100% 100%,0 100%); }
.treehouse span::after { content: ""; position: absolute; left: 40px; bottom: 0; width: 30px; height: 48px; background: #502f20; border-radius: 20px 20px 0 0; }*/

.footer { width: min(1030px, calc(100% - 48px)); margin: 22px auto 0; padding: 20px 10px 32px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; color: var(--navy); }
.footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px 34px; }
.footer nav a { font-size: .67rem; font-weight: 900; text-decoration: none; text-transform: uppercase; }
.socials { display: flex; gap: 10px; }
.socials a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: white; font-weight: 900; text-decoration: none; }
.footer > p { grid-column: 1 / -1; margin: -10px 0 0; color: #668096; font-family: Arial, sans-serif; font-size: .72rem; text-align: center; }

[hidden] { display: none !important; }
:focus-visible { outline: 4px solid rgba(255, 199, 61, .95); outline-offset: 4px; }

@media (max-width: 900px) {
    .site-header { gap: 14px; }
    .brand-name { display: none; }
    .main-nav { gap: 16px; }
    .main-nav a { font-size: .7rem; }
    .hero { min-height: 690px; background-position: 62% center; }
    .hero-content { width: 56%; }
    .club { padding-right: 175px; padding-left: 170px; }
    .club-envelope { left: 24px; transform: scale(.8) rotate(-10deg); }
    .treehouse { right: -45px; transform: scale(.8); transform-origin: right bottom; }
}

@media (max-width: 720px) {
    .site-header { position: fixed; top: 12px; width: calc(100% - 24px); min-height: 68px; padding: 8px 12px; border-radius: 22px; }
    .brand { margin-right: auto; }
    .brand-mark { width: 48px; transform: scale(.82); transform-origin: left center; }
    .menu-toggle { order: 2; width: 44px; height: 44px; padding: 10px; display: flex; flex-direction: column; justify-content: center; gap: 5px; border: 0; border-radius: 14px; background: #e8f7f8; cursor: pointer; }
    .menu-toggle span:not(.sr-only) { display: block; width: 100%; height: 3px; border-radius: 3px; background: var(--navy); transition: transform .2s, opacity .2s; }
    .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    .main-nav { position: absolute; top: 76px; left: 0; right: 0; padding: 13px; display: none; flex-direction: column; gap: 0; background: white; border-radius: 20px; box-shadow: var(--shadow); }
    .main-nav.open { display: flex; }
    .main-nav a { padding: 12px 15px; font-size: .78rem; }
    .main-nav a::after { display: none; }
    .search-wrap { order: 1; }
    .search-button { width: 44px; height: 44px; }
    .search-button span { left: 12px; top: 10px; }
    .search-panel { right: -55px; top: 58px; }
    .hero { min-height: 820px; padding: 150px 24px 90px; align-items: center; background-image: linear-gradient(180deg, rgba(139,226,241,.72) 0%, rgba(139,226,241,.42) 34%, rgba(139,226,241,.08) 58%, transparent 72%), url("../img/hero-charco-azul-v2.webp"); background-position: center, 82% center; background-size: 100% 100%, auto 100%; background-repeat: no-repeat; }
    .hero-content { width: 100%; }
    .hero-content > p:not(.eyebrow) { display: none; }
    .hero h1 { font-size: clamp(3.8rem, 18vw, 6rem); }
    .hero-content > p:not(.eyebrow) { max-width: 330px; }
    .paper-wave { margin-top: -50px; }
    .section { width: min(100% - 28px, 540px); }
    .news-slide { grid-template-columns: 1fr; }
    .news-copy { min-height: 340px; padding: 34px 28px 58px; }
    .news-visual { min-height: 250px; grid-row: 1; }
    .slider-controls { left: 28px; bottom: 26px; }
    .explore-grid { grid-template-columns: 1fr; }
    .explore-card { min-height: 350px; }
    .explore-card .card-art {
        inset: 75px 0 0;
        background-position: center bottom;
        background-size: 72% auto;
    }
    .feature, .drawing { grid-template-columns: 1fr; }
    .feature-copy { padding: 32px 28px; }
    .activity { background: #fcf4d7; }
    .activity-art { min-height: 300px; background: url("../img/Dayami.webp") center bottom / contain no-repeat; }
    .drawing-art { min-height: 230px; }
    .drawing-art { grid-row: 2; }
    .club { padding: 180px 24px 34px; text-align: center; }
    .club-copy { position: relative; z-index: 3; }
    .club-envelope { left: 50%; top: 42px; transform: translateX(-50%) rotate(-8deg) scale(.86); }
    .treehouse {
        top: 34px;
        right: 12px;
        bottom: auto;
        z-index: 1;
        width: clamp(76px, 24vw, 96px);
        height: clamp(76px, 24vw, 96px);
        min-height: 0;
        opacity: 1;
        transform: none;
        background-position: center;
        background-size: contain;
    }
    .club-form { margin: 0 auto; }
    .footer {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 22px;
        margin-top: 28px;
        padding: 34px 10px 38px;
    }
    .footer-brand {
        min-height: 52px;
        align-items: flex-start;
    }
    .footer-logo { width: 130px; }
    .footer nav {
        max-width: 320px;
        gap: 14px 20px;
        line-height: 1.2;
    }
    .footer > p { margin: 0; }
}

@media (max-width: 420px) {
    .hero { min-height: 760px; padding-top: 140px; padding-bottom: 90px; }
    .hero h1 { font-size: 3.75rem; }
    .eyebrow { font-size: .74rem; }
    .section-title span { margin: 0 4px; }
    .news-copy h3 { font-size: 1.75rem; }
    .club-form { flex-direction: column; background: transparent; gap: 8px; }
    .club-form input, .club-form button { min-height: 48px; border-radius: 12px; }
    .club-form input { background: white; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}