/* =====================================================
   LA FAMÍLIA RECICLATGE
   ===================================================== */

:root {
    --verde:    #95c11f;   /* Mr Eco / Moebius — brand green */
    --amarillo: #ffef26;   /* Brickly / Lula */
    --azul:     #009fe3;   /* Blupi */
    --gris:     #5b5b5d;   /* Avi Dusty */
    --marron:   #9d6333;   /* Bruna */
    --rosa:     #f3a3c7;   /* Mr. Hummus */
    --verd:     #3fa535;   /* Crunchy */
    --negro:    #2b2b2b;
    --white:    #FFFFFF;
    --bg:       #f5f5f3;
    --text:     #343A40;
    --muted:    #6C757D;
    --font:     'Baloo 2', sans-serif;
    --r:        20px;
    --r-lg:     24px;
    --r-full:   9999px;
    --ease:     .2s ease;
    --header-h: 80px;
    --shadow:   none;
}

/* === Reset === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{font-family:var(--font);font-size:1rem;color:var(--text);background:#ffffff;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%;height:auto}
ul{list-style:none}
a{text-decoration:none;color:inherit}
button{font-family:var(--font);cursor:pointer;border:none;background:none}

/* === Containers === */
.container{width:100%;max-width:1000px;margin:0 auto;padding:0 1rem}
.container-wide{width:100%;max-width:1400px;margin:0 auto;padding:0 1rem}
.hidden{display:none!important}

/* === Panel === */
.panel{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow)}

/* === Botons === */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    font-family:var(--font);font-weight:800;font-size:1rem;
    padding:.7rem 1.6rem;border-radius:var(--r-full);
    border:2.5px solid transparent;cursor:pointer;white-space:nowrap;
    transition:transform var(--ease),box-shadow var(--ease),background var(--ease),color var(--ease),border-color var(--ease);
}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}
.btn-lg{padding:.85rem 2rem;font-size:1.1rem}
.btn-primary{background:var(--verde);color:var(--white)}
.btn-primary:hover{background:#739318}
.btn-secondary{background:var(--azul);color:var(--white)}
.btn-secondary:hover{background:#007ab5}
.btn-white{background:var(--white);color:var(--verde);font-weight:900}
.btn-white:hover{box-shadow:0 6px 24px rgba(0,0,0,.12)}
.btn-ghost{background:transparent;color:var(--negro);border-color:rgba(0,0,0,.15)}
.btn-ghost:hover{background:var(--negro);color:var(--white);border-color:var(--negro)}

/* ==================== HEADER ==================== */
.site-header{
    position:fixed;top:0;left:0;right:0;
    height:var(--header-h);
    background:#ffffff;
    z-index:100;
}
.navbar{
    display:flex;align-items:center;
    height:100%;max-width:1400px;margin:0 auto;padding:0 1.5rem;
    gap:.75rem;
}
.logo{margin-right:auto}
.logo-img{height:44px;width:auto}

/* Nav tabs */
.nav-links{display:flex;align-items:center;gap:.6rem}

.nav-tab{
    display:block;white-space:nowrap;
    font-weight:800;font-size:.9rem;color:var(--muted);
    padding:.55rem 1.1rem;
    border-radius:var(--r-full);
    transition:background var(--ease),color var(--ease);
}
.nav-tab:hover{
    background:var(--white);color:var(--negro);
}
.nav-tab.active{
    background:var(--white);color:var(--negro);
    box-shadow:var(--shadow);
}

/* Mega menu hamburger (esquerra) */
.mega-toggle{
    width:42px;height:42px;padding:0;
    background:none;border:none;border-radius:50%;cursor:pointer;position:relative;
    flex-shrink:0;transition:transform .2s;
}
.mega-toggle:hover{transform:scale(1.1)}
.mega-toggle:hover .mega-toggle-bubble{opacity:1;transform:translateX(0) scale(1)}
.mega-toggle.open{transform:scale(.95)}
.mega-toggle-img{width:100%;height:100%;object-fit:contain}
.mega-toggle-bubble{
    position:absolute;top:50%;right:calc(100% + 6px);
    transform:translateY(-50%) translateX(4px) scale(.9);
    background:var(--verde);color:var(--white);
    font-size:.65rem;font-weight:900;
    padding:.2rem .5rem;border-radius:8px 8px 3px 8px;
    white-space:nowrap;opacity:0;
    transition:opacity .2s,transform .2s;
    pointer-events:none;
}

/* Language selector */
.lang-selector{display:flex;gap:.25rem;flex-shrink:0}
.lang-btn{
    font-family:var(--font);font-size:.7rem;font-weight:800;
    padding:.3rem .5rem;border-radius:var(--r-full);
    border:2px solid var(--bg);background:var(--white);
    color:var(--muted);cursor:pointer;transition:all .15s;
}
.lang-btn:hover{border-color:var(--verde)}
.lang-active{background:var(--verde);color:var(--white);border-color:var(--verde)}

/* Mega menu panel */
.mega-overlay{
    position:fixed;top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,.15);z-index:90;
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    opacity:0;pointer-events:none;
    transition:opacity .3s ease;
}
.mega-overlay.open{opacity:1;pointer-events:auto}

.mega-menu{
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    z-index:95;
    display:flex;align-items:center;justify-content:center;
    pointer-events:none;
    padding:1rem;
}
.mega-menu.open{
    pointer-events:auto;
}

.mega-inner{
    max-width:860px;width:100%;
    background:var(--white);
    border-radius:16px;
    box-shadow:0 16px 60px rgba(0,0,0,.15);
    padding:2.5rem 2.5rem 2.5rem;
    display:flex;gap:2rem;
    position:relative;
    transform:scale(.95);opacity:0;
    transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .25s ease;
}
.mega-menu.open .mega-inner{
    transform:scale(1);opacity:1;
}

.mega-close{
    position:absolute;top:1rem;right:1rem;
    width:36px;height:36px;border-radius:50%;
    background:var(--bg);border:none;
    font-size:1rem;font-weight:900;color:var(--muted);
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background .15s,color .15s;
}
.mega-close:hover{background:var(--verde);color:var(--white)}

.mega-col{flex:1;min-width:0}
.mega-col h3{
    font-size:.78rem;font-weight:900;color:var(--verde);
    text-transform:uppercase;letter-spacing:.04em;
    margin-bottom:.5rem;padding-bottom:.35rem;
    border-bottom:1px solid var(--bg);
}
.mega-col h3 a{color:inherit;text-decoration:none;transition:color .15s}
.mega-col h3 a:hover{color:#6e9010}

.mega-col ul{list-style:none;padding:0;margin:0}
.mega-col li{margin-bottom:.35rem}
.mega-col a{
    font-size:.85rem;font-weight:600;color:var(--muted);
    text-decoration:none;transition:color .15s;
}
.mega-col a:hover{color:var(--verde)}

/* Promo card */
.mega-promo{
    flex:0 0 130px;
    background:var(--bg);border-radius:16px;
    padding:1.25rem 1rem;text-align:center;
    display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:.5rem;
}
.mega-promo-img{width:80px;height:auto;border-radius:8px}
.mega-promo-text{font-size:.75rem;font-weight:800;color:var(--text)}

/* Hamburger mòbil (existent) */
.nav-toggle{display:none;flex-direction:column;gap:5px;width:36px;height:36px;padding:4px;justify-content:center}
.nav-toggle span{display:block;height:2.5px;background:var(--negro);border-radius:var(--r-full);transition:transform var(--ease),opacity var(--ease)}
.nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ==================== HERO ==================== */
.hero{
    padding-top:var(--header-h);
    padding-bottom:0;
    display:flex;align-items:center;
}
.hero-panel{
    display:flex;flex-direction:column;align-items:center;
    text-align:center;
    padding:1.5rem 0 1rem;
    width:100%;
}
.hero-img{
    width:50%;max-width:600px;
    margin-bottom:.25rem;
    animation:bob 4.5s ease-in-out infinite;
}
.hero-sub{
    font-size:clamp(1.1rem,2.5vw,1.35rem);
    font-weight:700;color:var(--muted);
    max-width:600px;
    line-height:1.5;
}

/* ==================== LIGHTBOX ==================== */
.llibre-tastet-img{cursor:pointer;transition:transform .2s}
.llibre-tastet-img:hover{transform:scale(1.03)}

.lightbox{
    position:fixed;top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,.85);z-index:9998;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;padding:2rem;
}
.lightbox-img{
    max-width:90vw;max-height:90vh;
    object-fit:contain;border-radius:var(--r);
}

/* ==================== CONFETTI ==================== */
.confetti-container{
    position:fixed;top:0;left:0;width:100%;height:100%;
    pointer-events:none;z-index:9999;overflow:hidden;
}
.confetti-piece{
    position:absolute;top:-10px;
    animation:confetti-fall linear forwards;
}
@keyframes confetti-fall{
    0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:1}
    80%{opacity:1}
    100%{transform:translateY(100vh) translateX(var(--drift,0)) rotate(var(--spin,360deg));opacity:0}
}

/* ==================== ORBIT RIBBON ==================== */
.orbit-ribbon{
    overflow:hidden;
    padding:.5rem 0 2.5rem;
    position:relative;
    max-width:95%;
    margin:0 auto;
}

.orbit-item:hover{
    transform:translateY(var(--orbit-y, 0)) scale(1.1);
    z-index:10;
}

.orbit-tip{
    z-index:20;
}

.orbit-track{
    display:flex;
    align-items:center;
    gap:2rem;
    width:max-content;
    animation:orbit-scroll 60s linear infinite;
}

@media(hover:hover){
    .orbit-ribbon:hover .orbit-track{
        animation-play-state:paused;
    }
}

.orbit-item{
    width:48px;
    height:48px;
    flex-shrink:0;
    transform:translateY(var(--orbit-y, 0));
    cursor:pointer;
    transition:transform .25s ease;
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.orbit-item img{
    width:48px;height:48px;
    object-fit:contain;
    display:block;
}

.orbit-item:hover{
    transform:translateY(var(--orbit-y, 0)) scale(1.1);
}

.orbit-tip{
    position:absolute;
    top:calc(100% + 4px);left:50%;
    transform:translateX(-50%) scale(.9);
    background:var(--verde);color:var(--white);
    font-size:.65rem;font-weight:800;
    padding:.2rem .5rem;border-radius:8px;
    white-space:nowrap;opacity:0;
    pointer-events:none;
    transition:opacity .2s,transform .2s;
}

.orbit-tip::after{
    content:'';position:absolute;
    bottom:100%;left:50%;transform:translateX(-50%);
    border:5px solid transparent;
    border-bottom-color:var(--verde);
}

.orbit-item:hover .orbit-tip{
    opacity:1;transform:translateX(-50%) scale(1);
}

@keyframes orbit-scroll{
    0%{transform:translateX(0)}
    100%{transform:translateX(-50%)}
}

/* ==================== INTRO ==================== */
.intro{padding:2.5rem 0 1.5rem}
.intro-inner{text-align:center;max-width:820px;margin:0 auto}
.intro-title{
    font-size:clamp(2rem,5vw,3.2rem);
    font-weight:900;color:var(--verde);
    line-height:1.15;margin-bottom:1rem;
}
.intro-text{
    font-size:clamp(1.2rem,2.5vw,1.4rem);
    color:var(--text);line-height:1.85;
}

/* ==================== ACCESSOS ==================== */
.accessos{padding:1.5rem 0 2rem}

.accessos-grid{
    display:flex;
    justify-content:center;
    gap:2.5rem;
}

.acces{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;
    width:400px;height:400px;
    border-radius:50%;
    padding:2.5rem;
    color:var(--negro);
    transition:transform var(--ease),box-shadow var(--ease),background var(--ease);
    border:none;
}
.acces-char{width:80px;height:80px;object-fit:contain;margin-bottom:.75rem}
.acces h3{font-size:1.8rem;font-weight:900;margin-bottom:.35rem}
.acces p{font-size:1.1rem;color:var(--muted);line-height:1.45;transition:color var(--ease);margin-bottom:.5rem}
.acces-badge{
    display:inline-block;font-size:.65rem;font-weight:800;
    background:rgba(0,0,0,.05);color:var(--verde);
    padding:.15rem .5rem;border-radius:var(--r-full);
    transition:background var(--ease),color var(--ease);
}
.acces:hover .acces-badge{background:rgba(255,255,255,.25);color:var(--white)}

/* Color accent — fons suau transparent */
.acces-1{background:#FFF3B8}
.acces-2{background:#D0EBFF}
.acces-3{background:#D3F9D8}

.acces-1:hover{background:var(--amarillo);color:var(--negro);transform:scale(1.06)}
.acces-2:hover{background:var(--azul);color:var(--white);transform:scale(1.06)}
.acces-3:hover{background:#2e7d32;color:var(--white);transform:scale(1.06)}

.acces:hover p{color:rgba(255,255,255,.85)}

/* ==================== AMICS ==================== */
.amics{padding:0 0 2rem}

.amics-panel{padding:2.5rem 2rem}

.amics-title{
    font-size:clamp(2rem,4vw,2.8rem);
    font-weight:900;color:var(--negro);
    text-align:center;margin-bottom:2rem;
}

.amics-grid{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:1.5rem;margin-bottom:1.5rem;
}

.amic{text-align:center;padding:1rem .5rem}
.amic-avatar{
    width:100px;height:100px;border-radius:50%;
    margin:0 auto .75rem;display:flex;align-items:center;justify-content:center;
}
.amic-avatar img{width:75%;height:75%;object-fit:contain}
.amic-avatar-marro{background:#F0DCC8}
.amic-avatar-groc{background:#FFF3B8}
.amic-avatar-blau{background:#D0EBFF}
.amic-avatar-verd{background:#D3F9D8}
.amic h3{font-size:1.2rem;font-weight:900;color:var(--negro);margin-bottom:.15rem}
.amic-role{display:block;font-size:.75rem;font-weight:700;color:var(--verde);margin-bottom:.35rem}
.amic p{font-size:.9rem;color:var(--muted);line-height:1.5;font-style:italic}
.amics-cta{text-align:center}

/* ==================== 5R ANIMADES (reutilitzable) ==================== */
.five-r-hero{
    --five-r-size:240px;
    position:relative;width:var(--five-r-size);height:var(--five-r-size);
    margin:0 auto 1.5rem;
}
.five-r-hero--teaser{
    --five-r-size:140px;
    margin:0;flex-shrink:0;
}
.five-r-ring{
    position:absolute;top:0;left:0;width:100%;height:100%;
    object-fit:contain;animation:five-r-spin 26s linear infinite;
    transform-origin:center center;
}
.five-r-moebius-wrap{
    position:absolute;top:0;left:0;right:0;bottom:0;
    display:flex;align-items:center;justify-content:center;z-index:2;
}
.five-r-moebius{
    width:55%;object-fit:contain;
    animation:five-r-bounce 3.5s ease-in-out infinite;
}
@keyframes five-r-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes five-r-bounce{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-5px)}
}

/* ==================== TEASER CUIDEM EL PLANETA ==================== */
.cuidem-teaser{padding:0 0 1.5rem}
.cuidem-teaser-panel{padding:2.5rem 2rem;background:#f5f9e8;color:var(--text)}

.cuidem-teaser-inner{
    display:flex;align-items:center;gap:2rem;
    max-width:800px;margin:0 auto;
}

.cuidem-teaser-text{flex:1}

.cuidem-teaser-title{
    font-size:clamp(1.6rem,4vw,2.4rem);
    font-weight:900;color:var(--verde);margin-bottom:.5rem;
}

.cuidem-teaser-sub{
    font-size:1.05rem;color:var(--muted);line-height:1.6;
    margin-bottom:1rem;
}

.cuidem-teaser-pills{
    display:flex;flex-wrap:wrap;gap:.4rem;
    margin-bottom:1.25rem;
}

.cuidem-teaser-pills span{
    font-size: .8rem;
    font-weight: 800;
    background: var(--verde);
    color: var(--white);
    width: 95px;
    height: 95px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
}



/* ==================== SABIES QUE (HOME) ==================== */
.sabies{padding:0 0 1.5rem}
.sabies-panel{
    padding:2rem 2rem;max-width:520px;margin:0 auto;
    display:flex;flex-direction:column;align-items:center;
}

.sabies-label{
    align-self:flex-start;
}

.sabies-layout{
    width:100%;
}

.sabies-bubble{
    min-height:100px;
    display:flex;align-items:center;justify-content:center;
}

.sabies-text{font-size:1.25rem}

.sabies-actions{padding-top:.75rem}

/* Personatge a la dreta */
.sabies-layout.sabies-right{flex-direction:row-reverse}
.sabies-layout.sabies-right .sabies-bubble::before{
    left:auto;right:-10px;
    border-right:none;border-left:10px solid var(--bg);
}

.sabies-layout{
    display:flex;align-items:center;gap:2rem;
}

.sabies-char-wrap{
    flex-shrink:0;text-align:center;
    width:120px;
}

.sabies-char-img{
    width:100px;height:100px;object-fit:contain;
    margin:0 auto .4rem;
    transition:opacity .25s ease;
}

.sabies-char-name{
    display:block;
    font-size:.8rem;font-weight:800;
    color:var(--verde);
    transition:opacity .25s ease;
}

.sabies-content{flex:1}

.sabies-label{
    display:inline-block;
    font-size:.75rem;font-weight:800;
    color:var(--verde);text-transform:uppercase;
    letter-spacing:.04em;margin-bottom:.5rem;
}

.sabies-bubble{
    background:var(--bg);
    border-radius:var(--r-lg);
    padding:1.25rem 1.5rem;
    margin-bottom:1rem;
    position:relative;
    min-height:80px;
    display:flex;align-items:center;
}

.sabies-bubble::before{
    content:'';position:absolute;
    left:-10px;top:50%;transform:translateY(-50%);
    width:0;height:0;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    border-right:10px solid var(--bg);
}


.sabies-text{
    font-size:1.1rem;font-weight:600;
    color:var(--text);line-height:1.65;
    transition:opacity .25s ease;
}

.sabies-actions{
    display:flex;align-items:center;justify-content:center;gap:.75rem;
}


/* ==================== FOOTER ==================== */
.site-footer{padding:0 0 1.5rem}

.footer-panel{
    padding:2.5rem 2rem;
    text-align:center;
    display:flex;flex-direction:column;align-items:center;
    gap:.5rem;
}

.footer-logo{height:36px;width:auto}
.footer-creat{display:block;text-align:center;margin:.25rem auto .4rem}
.footer-creat-img{height:12px;width:auto;opacity:.45;transition:opacity .2s}
.footer-creat:hover .footer-creat-img{opacity:.75}
.footer-tagline{font-size:.95rem;color:var(--muted)}

.footer-ig{color:var(--muted);transition:color var(--ease);margin-top:.25rem}
.footer-ig:hover{color:var(--negro)}

.footer-legal{display:flex;gap:1.25rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem}
.footer-legal a{font-size:.78rem;color:var(--muted);transition:color var(--ease)}
.footer-legal a:hover{color:var(--negro)}

.footer-copy{font-size:.72rem;color:var(--muted);margin-top:.25rem}

/* ==================== PÀGINES INTERNES ==================== */
.page-intro{
    padding-top:calc(var(--header-h) + 1.5rem);
    padding-bottom:.75rem;
}
.page-intro-panel{
    text-align:center;
    padding:2.5rem 2rem;
}
.page-intro-title{
    font-size:clamp(2rem,5vw,3rem);
    font-weight:900;color:var(--verde);
    margin-bottom:.4rem;
}
.page-intro-sub{
    font-size:clamp(1.05rem,2vw,1.2rem);
    color:var(--muted);max-width:540px;margin:0 auto;
}
.page-body{padding:1.5rem 0 3rem}

.llibre-panel{padding:2.5rem}

/* Jocs */
.games-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.game-card{
    background:var(--white);border-radius:var(--r-lg);
    padding:2rem;text-align:center;
    display:flex;flex-direction:column;align-items:center;gap:.5rem;
    position:relative;transition:transform var(--ease);box-shadow:var(--shadow);
}
.game-card:hover{transform:translateY(-4px)}
.game-card-highlight{border:3px solid var(--verde)}
.game-tag{position:absolute;top:1rem;left:1rem;font-size:.7rem;font-weight:800;background:var(--verde);color:var(--white);padding:.15rem .6rem;border-radius:var(--r-full)}
.game-icon{font-size:3rem;line-height:1}
.game-card-char{width:48px;height:48px;object-fit:contain;margin:0 auto}
.game-card h3{font-size:1.15rem;font-weight:900;color:var(--negro)}
.game-card p{font-size:.88rem;color:var(--muted);margin-bottom:.5rem}
.game-area{margin-top:2rem;background:var(--white);border-radius:var(--r-lg);padding:2rem;box-shadow:var(--shadow)}

/* Llibre */
.llibre-panel{padding:2.5rem}
.llibre-layout{display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:start}
.llibre-cover{display:flex;flex-direction:column;align-items:center;gap:.5rem;flex-shrink:0}
.llibre-badge{
    display:inline-block;background:var(--amarillo);color:var(--negro);
    font-size:.9rem;font-weight:800;padding:.35rem 1rem;border-radius:var(--r-full);
    letter-spacing:.02em;margin-top:.5rem;
}
.llibre-img{width:560px}
.llibre-info{text-align:left}

.page-intro-lula{
    width:56px;height:auto;object-fit:contain;
    margin:0 auto .5rem;
    animation:lula-drift 6s ease-in-out infinite;
}

@keyframes lula-drift{
    0%{transform:translateX(0) translateY(0) rotate(-3deg)}
    25%{transform:translateX(10px) translateY(-3px) rotate(2deg)}
    50%{transform:translateX(20px) translateY(0) rotate(-2deg)}
    75%{transform:translateX(10px) translateY(2px) rotate(3deg)}
    100%{transform:translateX(0) translateY(0) rotate(-3deg)}
}

@keyframes lula-float{
    0%,100%{transform:translateY(0) rotate(-3deg)}
    50%{transform:translateY(-8px) rotate(3deg)}
}
.llibre-heading{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:900;color:var(--verde);margin-bottom:.75rem}
.llibre-lead{font-size:1.1rem;font-weight:700;color:var(--text);line-height:1.7;margin-bottom:.75rem}
.llibre-text{font-size:1rem;color:var(--muted);line-height:1.8;margin-bottom:.75rem}
.llibre-tagline{font-size:1.3rem;font-weight:900;color:var(--verde);padding-left:1rem;border-left:4px solid var(--verde);margin:1.25rem 0}
.llibre-actions{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}

/* Microsecció desplegable */
.llibre-detall{
    max-height:0;overflow:hidden;
    transition:max-height .5s ease, padding .5s ease, margin .5s ease;
    padding:0 0;margin-top:0;
}
.llibre-detall.open{
    max-height:800px;
    padding:1.5rem 0 0;
    margin-top:1.5rem;
    border-top:1px solid rgba(0,0,0,.06);
}

.llibre-detall-visible{
    max-height:none;overflow:visible;
    padding:1.5rem 0 0;margin-top:1.5rem;
    border-top:1px solid rgba(0,0,0,.06);
}
.llibre-detall-title{
    font-size:1.1rem;font-weight:800;color:var(--muted);
    text-transform:uppercase;letter-spacing:.04em;
    margin-bottom:.75rem;
}
.llibre-detall-body{max-width:720px}
.llibre-detall-text{
    font-size:1rem;color:var(--text);line-height:1.85;
    margin-bottom:.5rem;
}
.llibre-detall-dades{
    display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;
    margin-top:1.25rem;
}
.llibre-dada{
    background:var(--bg);border-radius:var(--r);
    padding:.85rem 1rem;text-align:center;
}
.llibre-dada strong{
    display:block;font-size:.78rem;font-weight:800;
    color:var(--verde);margin-bottom:.2rem;text-transform:uppercase;letter-spacing:.03em;
}
.llibre-dada span{font-size:.9rem;color:var(--text)}

/* Què aprendràs */
.llibre-aprens-section{padding-top:0}
.llibre-aprens-panel{padding:2rem}
.llibre-aprens-title{
    font-size:1.3rem;font-weight:900;color:var(--verde);
    text-align:center;margin-bottom:1.25rem;
}
.llibre-aprens-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
}
.llibre-aprens-item{
    text-align:center;padding:1rem .75rem;
    background:var(--bg);border-radius:var(--r);
}
.llibre-aprens-item span{font-size:1.8rem;display:block;margin-bottom:.4rem}
.llibre-aprens-item p{font-size:.9rem;font-weight:700;color:var(--text);line-height:1.4}

/* Tastet interior */
.llibre-tastet-section{padding-top:0}
.llibre-tastet-title{
    font-size:1.2rem;font-weight:800;color:var(--muted);
    text-align:center;margin-bottom:1.25rem;
}
.llibre-tastet-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;
    max-width:700px;margin:0 auto;
}
.llibre-tastet-img{
    width:100%;border-radius:var(--r-lg);
    box-shadow:0 2px 12px rgba(0,0,0,.06);
}

/* Activitats */
.activitats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.activitat-card{background:var(--white);border-radius:var(--r-lg);padding:2rem;text-align:center;transition:transform var(--ease);box-shadow:var(--shadow)}
.activitat-card:hover{transform:translateY(-4px)}
.activitat-icon{font-size:2.8rem;margin-bottom:.75rem}
.activitat-card h3{font-size:1.1rem;font-weight:900;color:var(--negro);margin-bottom:.25rem}
.activitat-card p{font-size:.9rem;color:var(--muted);line-height:1.5}

/* Sabies que */
.section-title{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:900;color:var(--negro);margin-bottom:.25rem}
.section-title-pacifico{font-family:'Nunito',sans-serif;font-weight:900}
.section-title-white{color:var(--white)}
.section-sub-white{color:rgba(255,255,255,.9)}
.section-sub{font-size:1.1rem;color:var(--muted);max-width:540px;margin:0 auto}
.section-header{text-align:center;margin-bottom:2.5rem}

.sabies-presenter{display:block;width:72px;height:72px;object-fit:contain;margin:0 auto .75rem}
.sabies-que{max-width:520px;margin:0 auto;text-align:center}
.sabies-card{background:var(--white);border-radius:var(--r-lg);padding:2.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem;min-height:200px;justify-content:center;box-shadow:var(--shadow)}
.sabies-img{width:80px;height:80px;object-fit:contain}
.sabies-text{font-size:1.05rem;font-weight:600;color:var(--text);line-height:1.65}
.sabies-char{font-size:.78rem;font-weight:800;color:var(--muted);background:var(--bg);padding:3px 12px;border-radius:var(--r-full)}
.sabies-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.25rem}
.sabies-btn{width:42px;height:42px;border-radius:50%;background:var(--verde);color:var(--white);font-size:1.5rem;display:flex;align-items:center;justify-content:center;transition:background var(--ease),transform var(--ease)}
.sabies-btn:hover{background:#7da51a;transform:scale(1.08)}
.sabies-counter{font-size:.85rem;font-weight:700;color:var(--muted);min-width:50px}

/* ==================== ANIMACIONS ==================== */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ==================== RESPONSIVE — TABLET ==================== */
@media(max-width:900px){
    .hero-img{width:70%;max-width:90vw}
    .accessos-grid{flex-wrap:wrap;gap:1.5rem}
    .acces{width:280px;height:280px;padding:2rem}
    .amics-grid{grid-template-columns:repeat(2,1fr);margin-bottom:1.5rem}
    .cuidem-teaser-inner{flex-direction:column;text-align:center}
    .five-r-hero--teaser{order:-1}
    .cuidem-teaser-pills{justify-content:center}
    .sabies-layout{flex-direction:column;text-align:center}
    .sabies-bubble::before{display:none}
    .sabies-actions{justify-content:center}
    .games-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
    .llibre-layout{grid-template-columns:1fr;text-align:center}
    .llibre-info{text-align:center}
    .llibre-cover{align-items:center}
    .llibre-img{width:100%;display:block}
    .llibre-tagline{text-align:left}
    .llibre-detall-dades{grid-template-columns:1fr}
    .llibre-aprens-grid{grid-template-columns:repeat(2,1fr)}
    .llibre-tastet-grid{grid-template-columns:1fr;max-width:340px}
    .activitats-grid{grid-template-columns:1fr;max-width:340px;margin:0 auto}
    .footer-inner{flex-direction:column;align-items:center;text-align:center}
    .footer-nav{flex-wrap:wrap;justify-content:center}
}

/* ==================== RESPONSIVE — MÒBIL ==================== */
@media(max-width:900px){
    .mega-inner{flex-wrap:wrap}
    .mega-col{flex:0 0 calc(33% - 1.5rem)}
    .mega-promo{flex:0 0 100%;flex-direction:row;gap:1rem;justify-content:center}
}

@media(max-width:640px){
    .container-wide{padding:0 .75rem}
    .container{padding:0 .75rem}

    .nav-links{display:none!important}
    .lang-selector{display:none}

    .mega-inner{
        flex-direction:column;gap:1rem;
        padding:1.5rem;max-height:calc(100vh - var(--header-h) - 2rem);
        overflow-y:auto;
    }
    .mega-col{flex:none}
    .mega-promo{flex-direction:row;gap:1rem;justify-content:center}
    .mega-promo-img{width:60px}
    .nav-links.open{display:flex}
    .nav-links li{width:100%}
    .nav-tab{display:block;padding:.75rem 1.5rem;border-radius:0}
    .nav-tab.active{border-radius:0;box-shadow:none;background:var(--white)}

    .hero-panel{padding:1rem .5rem}
    .hero-img{width:88vw;max-width:88vw}

    .acces{width:220px;height:220px;padding:1.5rem}
    .acces h3{font-size:1.3rem}
    .acces p{font-size:.85rem}
    .acces-char{width:60px;height:60px}

    .amics-panel{padding:1.5rem 1rem}
    .amics-grid{max-width:100%}

    .footer-panel{padding:1.5rem 1rem}

    .sabies-panel{max-width:100%;padding:1.5rem 1rem}
    .sabies-char-wrap{width:80px}
    .sabies-char-img{width:65px;height:65px}
}