.cc-header{
    position:sticky;
    top:0;
    z-index:9999;
    background:var(--cc-bg, #fff);
    background-color:lightblue;
    border-bottom:1px solid var(--cc-border, #e6e6e6);
    transition:box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.cc-header--shadow{
    box-shadow:0 4px 18px rgba(0,0,0,.08);
}

.cc-header__inner{
    max-width:1600px;
    margin:0 auto;
    padding:14px 24px;
    display:flex;
    align-items:center;
    gap:24px;
}

.cc-header__logo-wrap{
    flex:0 0 auto;
}

.cc-header__logo img{
    display:block;
    object-fit:contain;
}

.cc-header__text-logo{
    font-weight:700;
    font-size:24px;
    color:var(--cc-text, #111);
}

/* MENÚ VISIBLE */
.cc-header__visible{
    flex:1 1 auto;
    min-width:0;
    overflow:visible;
}

.cc-header__visible-items{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    overflow:visible;
    white-space:nowrap;
}

.cc-visible-link{
    color:var(--cc-text, #111);
    text-decoration:none;
    font-weight:600;
    font-size:var(--cc-font-visible,15px);
    flex:0 0 auto;
}

/* BOTÓN HAMBURGUESA */
.cc-header__search{
    width:46px;
    height:46px;
    border:1px solid rgba(68,133,189,.45);
    border-radius:10px;
    background:var(--cc-bg, #fff);
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    position:relative;
    color:#4485bd !important;
    text-decoration:none;
    transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}

.cc-header__search span{
    width:17px;
    height:17px;
    border:3px solid currentColor;
    border-radius:50%;
    display:block;
    position:relative;
    box-sizing:border-box;
}

.cc-header__search span::after{
    content:"";
    position:absolute;
    width:9px;
    height:3px;
    right:-8px;
    bottom:-4px;
    background:currentColor;
    border-radius:3px;
    transform:rotate(45deg);
    transform-origin:left center;
}

.cc-header__search:hover,
.cc-header__search:focus{
    background:#4485bd;
    border-color:#4485bd;
    color:#fff !important;
    box-shadow:0 8px 20px rgba(68,133,189,.24);
}

.cc-header__burger{
    width:46px;
    height:46px;
    border:1px solid var(--cc-border, #ddd);
    border-radius:10px;
    background:var(--cc-bg, #fff);
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    padding:0 11px;
    cursor:pointer;
    flex:0 0 auto;
}

.cc-header__burger span{
    height:2px;
    width:100%;
    background:var(--cc-hamburger-icon, #111) !important;
    display:block;
}

/* OVERLAY */
.cc-header__overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.38);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    z-index:9998;
}

.cc-header__overlay.is-open{
    opacity:1;
    pointer-events:auto;
}

/* PANEL */
.cc-header__panel{
    position:fixed;
    top:0;
    right:-600px;
    width:600px;
    max-width:95vw;
    height:100vh;
    background:var(--cc-bg, #fff);
    box-shadow:-8px 0 26px rgba(0,0,0,.14);
    transition:right .25s ease;
    z-index:9999;
    overflow:auto;
    color:var(--cc-text, #111);
}

.cc-header__panel.is-open{
    right:0;
}

.cc-header__panel-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 22px 14px;
    border-bottom:1px solid var(--cc-border, #eee);
}

.cc-header__close{
    border:none;
    background:none;
    font-size:34px;
    line-height:1;
    cursor:pointer;
    color:var(--cc-text, #111);
}

.cc-header__overflow{
    display:none;
    padding:10px 22px 4px;
    border-bottom:1px solid var(--cc-border, #efefef);
}

.cc-header__overflow .cc-panel-link--overflow:last-child{
    margin-bottom:6px;
}

.cc-header__dark-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 22px;
    border-bottom:1px solid var(--cc-border, #efefef);
}

.cc-dark-toggle{
    width:52px;
    height:30px;
    border:none;
    border-radius:999px;
    background:#ccc;
    position:relative;
    cursor:pointer;
}

.cc-dark-toggle__dot{
    position:absolute;
    top:4px;
    left:4px;
    width:22px;
    height:22px;
    background:#fff;
    border-radius:50%;
    transition:left .2s ease;
}

.cc-dark-toggle.is-on{
    background:#6a5cff;
}

.cc-dark-toggle.is-on .cc-dark-toggle__dot{
    left:26px;
}

.cc-header__panel-grid{
    padding:18px 22px 24px;
    display:grid;
    gap:28px;
}

.cc-header__panel-grid.cols-1{
    grid-template-columns:1fr;
}

.cc-header__panel-grid.cols-2{
    grid-template-columns:1fr 1fr;
}

.cc-header__col{
    min-width:0;
}

.cc-panel-link,
.cc-panel-link--overflow{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 0;
    text-decoration:none;
    color:var(--cc-hamburger-text, #111) !important;
    font-weight:600;
    font-size:var(--cc-font-hamburger,16px);
    border-bottom:none !important;
}

.cc-menu-title{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--cc-title-color,#666);
    margin:20px 0 8px;
}

.cc-menu-separator{
    height:1px;
    background:var(--cc-border, #e7e7e7);
    margin:14px 0;
}

.cc-menu-spacer{
    height:var(--cc-spacer,18px);
    width:100%;
}

/* DARK MODE */
.cc-dark-mode{
    --cc-bg:#121212;
    --cc-text:#ececec;
    --cc-border:#333;
    --cc-muted:#a9a9a9;
    background:#121212;
    color:#ececec;
}

.cc-dark-mode .site,
.cc-dark-mode body{
    background:#121212;
    color:#ececec;
}

.cc-dark-mode a{
    color:inherit;
}

/* HOVERS */
.cc-header a:hover{
    color:var(--cc-hover) !important;
}

.dark-mode .cc-header a:hover{
    color:var(--cc-hover-dark) !important;
}

/* MENÚ PRINCIPAL */
.cc-menu,
.cc-submenu{
    list-style:none;
    margin:0;
    padding:0;
}

.cc-menu{
    display:flex;
    align-items:center;
    gap:24px;
    flex-wrap:nowrap;
    overflow:visible;
}

.cc-menu > li{
    flex:0 0 auto;
    position:relative;
}

.cc-item{
    position:relative;
}

.cc-item > a{
    display:block;
    text-decoration:none;
    color:var(--cc-visible-text, #111) !important;
    white-space:nowrap;
}

.cc-menu > .cc-item--button > a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:8px 14px;
    border-radius:4px;
    font-size:18px;
    line-height:1;
    font-weight:800;
    letter-spacing:.02em;
    text-transform:uppercase;
    transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.cc-menu > .cc-item--button-donatius > a,
.cc-menu > .cc-item--button-subscriu-te > a{
    background:#4485bd;
    border:1px solid #4485bd;
    color:#fff !important;
    box-shadow:0 6px 16px rgba(68,133,189,.18);
}

.cc-menu > .cc-item--button-donatius > a:hover,
.cc-menu > .cc-item--button-subscriu-te > a:hover{
    background:#4485bd;
    border-color:#4485bd;
    color:#fff !important;
    filter:brightness(.92);
    box-shadow:0 8px 20px rgba(68,133,189,.28);
}

.cc-menu > .cc-item--button-el-meu-compte > a{
    background:#fff;
    border:1px solid rgba(68,133,189,.45);
    color:#4485bd !important;
}

.cc-menu > .cc-item--button-el-meu-compte > a:hover{
    background:#4485bd;
    border-color:#4485bd;
    color:#fff !important;
}

.cc-item.has-submenu > a::after{
    content:" ▾";
    font-size:12px;
}

/* SUBMENÚ */
.cc-submenu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:220px;
    background:#fff !important;
    z-index:99999;
    padding:10px 0;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.cc-item.open > .cc-submenu{
    display:block;
}

.cc-submenu .cc-item{
    width:100%;
    position:relative;
}

.cc-submenu a{
    display:block !important;
    padding:10px 16px !important;
    color:#111 !important;
    background:#fff !important;
    text-decoration:none !important;
    white-space:nowrap !important;
    line-height:1.4 !important;
}

/* SUBMENÚ DE SEGUNDO NIVEL */
.cc-submenu .cc-submenu{
    top:0;
    left:100%;
}

/* RESPONSIVE */
@media (max-width:900px){
    .cc-header__inner{
        padding:12px 16px;
        gap:12px;
        display:grid;
        grid-template-columns:1fr auto auto;
        grid-template-areas:
            "menu menu menu"
            "logo search burger";
        align-items:center;
    }

    .cc-header__logo-wrap{
        grid-area:logo;
        justify-self:center;
    }

    .cc-header__visible{
        grid-area:menu;
        min-width:0;
    }

    .cc-header__burger{
        grid-area:burger;
        justify-self:end;
    }

    .cc-header__search{
        grid-area:search;
        justify-self:end;
    }

    .cc-header__visible-items{
        gap:16px;
        justify-content:center;
    }
}

@media (max-width:640px){
    .cc-header__inner{
        grid-template-columns:1fr auto auto;
        grid-template-areas:
            "menu menu menu"
            "logo search burger";
    }

    .cc-header__visible{
        display:block!important;
        opacity:1;
        pointer-events:auto;
    }

    .cc-menu{
        gap:8px;
        justify-content:center;
    }

    .cc-menu > .cc-item--button > a{
        padding:7px 9px;
    }
}

@media (max-width:640px){
    .cc-header__panel-grid.cols-2{
        grid-template-columns:1fr;
    }
}




/* ===== DESKTOP + TABLET ===== */
.cc-header__panel-grid.cols-3{
    grid-template-columns: 1fr 1fr 1fr;
}

/* ===== MÓVIL ===== */
@media (max-width:640px){

    /* 1 columna */
	.cc-header__panel{
		width: 350px;        /* 🔥 antes 900 */
    }
    .cc-header__panel-grid{
        grid-template-columns: 1fr !important;
        justify-content: center; /* centra el grid */
		
    }

    /* centrar el bloque pero NO el texto */
    .cc-header__col{
        max-width: 420px;  /* ancho cómodo */
        width: 100%;
        margin: 0 auto;    /* centra la columna */
    }

    /* asegurar texto alineado a la izquierda */
    .cc-header__col *{
        text-align: left;
    }
}



.cc-header__visible{
    transition: opacity .2s ease;
}

@media (max-width:900px){
    .cc-header__visible{
        opacity:1;
        pointer-events:auto;
    }
}