/* =============================================
   LO SQUALO - PAGINE CATEGORIA (Livello 2)
   Stili specifici per le pagine interne
   ============================================= */

/* ===== HEADER PAGINE INTERNE ===== */
.back-home {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--blu-squalo);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 8px 15px;
    border: 2px solid var(--blu-squalo);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.back-home:hover {
    background: var(--blu-squalo);
    color: white;
}

header {
    position: relative;
}

/* ===== PAGE MAP (simile a mind-map) ===== */
.page-map {
    flex: 1;
    position: relative;
    width: 100%;
    height: 80vh;
    min-height: 700px;
}

/* ===== CENTRO CATEGORIA ===== */
.category-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    cursor: pointer;
    text-align: center;
}

.category-icon {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-out;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255,255,255,0.3);
}

.category-icon span {
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
}

.category-center:hover .category-icon {
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

/* Animazione floating stato iniziale */
.page-map[data-state="initial"] .category-center {
    animation: float 4s ease-in-out infinite;
}

/* ===== VISIBILITA' NODI PAGINE ===== */
/* Container primary nodes */
.page-map .primary-nodes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* Primary nodes nascosti di default */
.page-map .primary-nodes .node {
    position: absolute;
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
    transition: all 0.5s ease-out;
    border: 1px solid rgba(255,255,255,0.3);
}

/* Mostra primary nodes quando stato = categories o subcategories */
.page-map[data-state="categories"] .primary-nodes .node,
.page-map[data-state="subcategories"] .primary-nodes .node {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Animazione staggered per primary nodes */
.page-map[data-state="categories"] .primary-nodes .node:nth-child(1),
.page-map[data-state="subcategories"] .primary-nodes .node:nth-child(1) { transition-delay: 0s; }
.page-map[data-state="categories"] .primary-nodes .node:nth-child(2),
.page-map[data-state="subcategories"] .primary-nodes .node:nth-child(2) { transition-delay: 0.07s; }
.page-map[data-state="categories"] .primary-nodes .node:nth-child(3),
.page-map[data-state="subcategories"] .primary-nodes .node:nth-child(3) { transition-delay: 0.14s; }
.page-map[data-state="categories"] .primary-nodes .node:nth-child(4),
.page-map[data-state="subcategories"] .primary-nodes .node:nth-child(4) { transition-delay: 0.21s; }
.page-map[data-state="categories"] .primary-nodes .node:nth-child(5),
.page-map[data-state="subcategories"] .primary-nodes .node:nth-child(5) { transition-delay: 0.28s; }
.page-map[data-state="categories"] .primary-nodes .node:nth-child(6),
.page-map[data-state="subcategories"] .primary-nodes .node:nth-child(6) { transition-delay: 0.35s; }
.page-map[data-state="categories"] .primary-nodes .node:nth-child(7),
.page-map[data-state="subcategories"] .primary-nodes .node:nth-child(7) { transition-delay: 0.42s; }

/* Sub-nodes nascosti di default */
.page-map .sub-nodes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
}

.page-map .sub-nodes .node {
    position: absolute;
    opacity: 0;
    transform: scale(0.3);
    pointer-events: none;
    transition: all 0.5s ease-out;
    border: 1px solid rgba(255,255,255,0.3);
}

/* Mostra sub-nodes quando hanno classe visible */
.page-map .sub-nodes.visible {
    pointer-events: auto;
}

.page-map .sub-nodes.visible .node {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Animazione staggered per sub-nodes */
.page-map .sub-nodes.visible .node:nth-child(1) { transition-delay: 0s; }
.page-map .sub-nodes.visible .node:nth-child(2) { transition-delay: 0.05s; }
.page-map .sub-nodes.visible .node:nth-child(3) { transition-delay: 0.1s; }
.page-map .sub-nodes.visible .node:nth-child(4) { transition-delay: 0.15s; }
.page-map .sub-nodes.visible .node:nth-child(5) { transition-delay: 0.2s; }
.page-map .sub-nodes.visible .node:nth-child(6) { transition-delay: 0.25s; }
.page-map .sub-nodes.visible .node:nth-child(7) { transition-delay: 0.3s; }

/* Nascondi hint - pagine partono con categories */
.page-map .click-hint {
    display: none;
}

/* Pulsante indietro - sotto al cerchio dei prodotti (lascia spazio al radial) */
.page-map .back-btn {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease;
    top: auto;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}
.page-map .back-btn:hover {
    transform: translateX(-50%) scale(1.03);
}

/* Bottone Home flottante — definito in styles.css (.home-button) */

/* ===== SUB AL CENTRO (stato sub-centered) ===== */
.page-map.sub-centered .category-center {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.2);
    transition: all 0.4s ease;
}
.page-map.sub-centered .primary-nodes .node-primary:not(.active-center) {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.3) !important;
}
.page-map.sub-centered .primary-nodes .node-primary.active-center {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) scale(1.15) !important;
    z-index: 10;
    transition: top 0.5s ease, left 0.5s ease, transform 0.5s ease;
}

/* Linee SVG sempre nascoste (decisione cliente 14/04): layout radiale autoesplicativo */
.page-map .connections .line {
    opacity: 0 !important;
}

/* ===== COLORI CENTRO PER CATEGORIA ===== */
.eventi-bg {
    background: linear-gradient(145deg, var(--eventi-main), #c49a30);
    color: var(--text-primary);
}

.alloggio-bg {
    background: linear-gradient(145deg, var(--alloggio-main), #d4a8b2);
    color: var(--text-primary);
}

.escursioni-bg {
    background: linear-gradient(145deg, var(--escursioni-main), #3f7a7a);
    color: white;
}

.surfing-bg {
    background: linear-gradient(145deg, var(--surfing-main), #4a92b2);
    color: white;
}

.agency-bg {
    background: linear-gradient(145deg, var(--agency-main), #2e4a5a);
    color: white;
}

.alessandro-bg {
    background: linear-gradient(145deg, var(--alessandro-main), #5a7585);
    color: white;
}

/* =============================================
   PAGINA EVENTI - Posizioni e Colori
   ============================================= */

/* Sotto-categorie (Livello 2) - 4 nodi */
.page-eventi .showcases-node {
    background: linear-gradient(145deg, var(--eventi-showcases), #b88520);
    color: var(--text-primary);
    top: 20%;
    left: 25%;
}

.page-eventi .consigliati-node {
    background: linear-gradient(145deg, var(--eventi-tips), #d4b358);
    color: var(--text-primary);
    top: 20%;
    left: 68%;
}

.page-eventi .movida-node {
    background: linear-gradient(145deg, var(--eventi-main), #c49a30);
    color: var(--text-primary);
    top: 72%;
    left: 22%;
}

.page-eventi .servizi-node {
    background: linear-gradient(145deg, var(--eventi-servizi), #a87a2a);
    color: white;
    top: 72%;
    left: 70%;
}

/* Nuovi nodi mind-map eventi: Food & Drink (alto-centro) + Next Event (basso-sx) */
.page-eventi .fooddrink-node {
    background: linear-gradient(145deg, var(--escursioni-food), #7f9f8a);
    color: var(--text-primary);
    top: 16%;
    left: 50%;
}

.page-eventi .nextevent-node {
    background: linear-gradient(145deg, var(--eventi-tips), #d4b358);
    color: var(--text-primary);
    top: 72%;
    left: 26%;
}

/* Elementi SHOWCASES (Livello 3) */
.page-eventi .item-boatparty {
    background: linear-gradient(145deg, #e8c060, #d4ac4c);
    color: var(--text-primary);
    top: 5%;
    left: 10%;
}

.page-eventi .item-terraceo {
    background: linear-gradient(145deg, #dbb44a, #c7a036);
    color: var(--text-primary);
    top: 5%;
    left: 25%;
}

.page-eventi .item-hmc {
    background: linear-gradient(145deg, #e0b850, #ccaa3c);
    color: var(--text-primary);
    top: 18%;
    left: 8%;
}

.page-eventi .item-exotica {
    background: linear-gradient(145deg, #d5a83e, #c1942a);
    color: var(--text-primary);
    top: 32%;
    left: 10%;
}

.page-eventi .item-brunch {
    background: linear-gradient(145deg, #e2bc55, #cea841);
    color: var(--text-primary);
    top: 32%;
    left: 25%;
}

/* Elementi CONSIGLIATI (Livello 3) */
.page-eventi .item-festival {
    background: linear-gradient(145deg, #ecd080, #d8bc6c);
    color: var(--text-primary);
    top: 5%;
    left: 60%;
}

.page-eventi .item-folklore {
    background: linear-gradient(145deg, #e6c870, #d2b45c);
    color: var(--text-primary);
    top: 5%;
    left: 78%;
}

/* Elementi MOVIDA (Livello 3) */
.page-eventi .item-club {
    background: linear-gradient(145deg, #daa835, #c69421);
    color: var(--text-primary);
    top: 60%;
    left: 5%;
}

.page-eventi .item-poolparty {
    background: linear-gradient(145deg, #e0b040, #cca02c);
    color: var(--text-primary);
    top: 75%;
    left: 5%;
}

.page-eventi .item-beachclub {
    background: linear-gradient(145deg, #d8a830, #c4941c);
    color: var(--text-primary);
    top: 88%;
    left: 12%;
}

.page-eventi .item-rooftop {
    background: linear-gradient(145deg, #dcac38, #c89824);
    color: var(--text-primary);
    top: 88%;
    left: 28%;
}

.page-eventi .item-vip {
    background: linear-gradient(145deg, #d4a430, #c0901c);
    color: var(--text-primary);
    top: 75%;
    left: 38%;
}

/* Elementi SERVIZI (Livello 3) */
.page-eventi .item-graphic {
    background: linear-gradient(145deg, #c8922a, #b47e16);
    color: white;
    top: 60%;
    left: 88%;
}

.page-eventi .item-photo {
    background: linear-gradient(145deg, #c08828, #ac7414);
    color: white;
    top: 75%;
    left: 88%;
}

.page-eventi .item-venue {
    background: linear-gradient(145deg, #b88020, #a46c0c);
    color: white;
    top: 88%;
    left: 82%;
}

.page-eventi .item-decoration {
    background: linear-gradient(145deg, #c48a25, #b07611);
    color: white;
    top: 88%;
    left: 68%;
}

.page-eventi .item-shows {
    background: linear-gradient(145deg, #bc8222, #a86e0e);
    color: white;
    top: 75%;
    left: 55%;
}

.page-eventi .item-sound {
    background: linear-gradient(145deg, #c89028, #b47c14);
    color: white;
    top: 60%;
    left: 58%;
}

.page-eventi .item-catering {
    background: linear-gradient(145deg, #d09830, #bc841c);
    color: var(--text-primary);
    top: 48%;
    left: 85%;
}

/* =============================================
   PAGINA ALLOGGIO - Posizioni e Colori
   ============================================= */

/* Sotto-categorie (Livello 2) - 5 nodi pentagonali clockwise da Villa */
/* 6 nodi primari alloggio: stessa palette rosa, solo posizione cambia */
.page-alloggio .villa-node,
.page-alloggio .casarurale-node,
.page-alloggio .appartamento-node,
.page-alloggio .surfhouse-node,
.page-alloggio .ostello-node,
.page-alloggio .coliving-node {
    background: linear-gradient(145deg, var(--alloggio-villa), #c99ea8);
    color: var(--text-primary);
}

/* Esagono attorno al centro (raggio ~38%) */
.page-alloggio .villa-node       { top: 12%; left: 50%;   }
.page-alloggio .casarurale-node  { top: 31%; left: 82.9%; }
.page-alloggio .appartamento-node{ top: 69%; left: 82.9%; }
.page-alloggio .surfhouse-node   { top: 88%; left: 50%;   }
.page-alloggio .ostello-node     { top: 69%; left: 17.1%; }
.page-alloggio .coliving-node    { top: 31%; left: 17.1%; }

/* "Appartamento" e' la label piu' lunga: riduci il font cosi' la A e la O
   non escono dal cerchio (centro e stato categorie). */
.page-alloggio .appartamento-node span { font-size: 0.62rem; letter-spacing: -0.2px; }

/* Elementi APPARTAMENTO */
.page-alloggio .item-alcala {
    background: linear-gradient(145deg, #f0c4ce, #d8acb6);
    color: var(--text-primary);
    top: 88%;
    left: 15%;
}

.page-alloggio .item-lasamericas {
    background: linear-gradient(145deg, #ecc0cc, #d4a8b2);
    color: var(--text-primary);
    top: 88%;
    left: 30%;
}

.page-alloggio .item-loscristianos {
    background: linear-gradient(145deg, #e8bcc8, #d0a4ae);
    color: var(--text-primary);
    top: 88%;
    left: 45%;
}

/* Elementi RURALE GLAMPING */
.page-alloggio .item-cueva {
    background: linear-gradient(145deg, #dbb4ac, #c79890);
    color: var(--text-primary);
    top: 88%;
    left: 55%;
}

.page-alloggio .item-dome {
    background: linear-gradient(145deg, #d7b0a8, #c3948c);
    color: var(--text-primary);
    top: 88%;
    left: 70%;
}

.page-alloggio .item-hotelrural {
    background: linear-gradient(145deg, #d3aca4, #bf9088);
    color: var(--text-primary);
    top: 88%;
    left: 85%;
}

/* Elementi VILLA FINCA */
.page-alloggio .item-beachhouse {
    background: linear-gradient(145deg, #e4b8c2, #d09ca6);
    color: var(--text-primary);
    top: 5%;
    left: 60%;
}

.page-alloggio .item-atogo {
    background: linear-gradient(145deg, #e0b4be, #cc98a2);
    color: var(--text-primary);
    top: 5%;
    left: 75%;
}

.page-alloggio .item-taucho {
    background: linear-gradient(145deg, #dcb0ba, #c8949e);
    color: var(--text-primary);
    top: 5%;
    left: 88%;
}

.page-alloggio .item-fortaleza {
    background: linear-gradient(145deg, #d8acb6, #c49098);
    color: var(--text-primary);
    top: 18%;
    left: 88%;
}

.page-alloggio .item-paraiso {
    background: linear-gradient(145deg, #e2b8c4, #ce9ca8);
    color: var(--text-primary);
    top: 32%;
    left: 85%;
}

/* Elementi APPARTAMENTO - Nuovo */
.page-alloggio .item-penthouse {
    background: linear-gradient(145deg, #e4b8c4, #cca0aa);
    color: var(--text-primary);
    top: 70%;
    left: 15%;
}

/* Nuova categoria FINCA WEDDING (Livello 2) */
.page-alloggio .fincawedding-node {
    background: linear-gradient(145deg, #e8c0c8, #d4a4b0);
    color: var(--text-primary);
    top: 50%;
    left: 8%;
}

/* Elementi FINCA WEDDING */
.page-alloggio .item-wedding-retreat {
    background: linear-gradient(145deg, #f0d0d8, #dcb4bc);
    color: var(--text-primary);
    top: 38%;
    left: 3%;
}

/* Elementi RURALE GLAMPING - Nuovo */
.page-alloggio .item-chimiche {
    background: linear-gradient(145deg, #cfaaa0, #bb9688);
    color: var(--text-primary);
    top: 70%;
    left: 72%;
}

/* Elementi SURF HOUSE - Aggiornati */
.page-alloggio .item-surfhouse-luxury {
    background: linear-gradient(145deg, #ebc4cc, #d5a8b4);
    color: var(--text-primary);
    top: 42%;
    left: 92%;
}

.page-alloggio .item-surfhouse-rurale {
    background: linear-gradient(145deg, #e3bcc4, #cda0ac);
    color: var(--text-primary);
    top: 58%;
    left: 92%;
}

/* Elementi VILLA FINCA - Nuovi */
.page-alloggio .item-ciguana {
    background: linear-gradient(145deg, #d4a8b4, #c08ca0);
    color: var(--text-primary);
    top: 32%;
    left: 62%;
}

.page-alloggio .item-costaadeje {
    background: linear-gradient(145deg, #f4c8d2, #dcb0ba);
    color: var(--text-primary);
    top: 78%;
    left: 5%;
}

.page-alloggio .item-torviscas {
    background: linear-gradient(145deg, #cca0ac, #b88498);
    color: var(--text-primary);
    top: 18%;
    left: 60%;
}

.page-alloggio .item-duque {
    background: linear-gradient(145deg, #deb2bc, #caa0a8);
    color: var(--text-primary);
    top: 45%;
    left: 72%;
}

.page-alloggio .item-fincaparaiso {
    background: linear-gradient(145deg, #e2b8c4, #ce9ca8);
    color: var(--text-primary);
    top: 58%;
    left: 72%;
}

/* Elementi SURF HOUSE - nuovo Ostello */
.page-alloggio .item-surfhouse-ostello {
    background: linear-gradient(145deg, var(--alloggio-ostello), #c99ea8);
    color: var(--text-primary);
    top: 58%;
    left: 12%;
}

/* Elementi COLIVING */
.page-alloggio .item-blueparadise {
    background: linear-gradient(145deg, var(--alloggio-ostello), #c99ea8);
    color: var(--text-primary);
    top: 22%;
    left: 6%;
}

.page-alloggio .item-cactus {
    background: linear-gradient(145deg, var(--alloggio-ostello), #c99ea8);
    color: var(--text-primary);
    top: 48%;
    left: 4%;
}

/* =============================================
   PAGINA ESCURSIONI - Posizioni e Colori
   ============================================= */

/* Sotto-categorie (Livello 2) - 6 nodi */
/* 3 nodi a triangolo: Terra (alto-centro), Aria (basso-sx), Acqua (basso-dx) */
.page-escursioni .teide-node {
    background: linear-gradient(145deg, var(--escursioni-teide), #5f7e6c);
    color: white;
    top: 16%;
    left: 50%;
}

.page-escursioni .oceano-node {
    background: linear-gradient(145deg, var(--escursioni-oceano), #2f6f8e);
    color: white;
    top: 72%;
    left: 74%;
}

.page-escursioni .sky-node {
    background: linear-gradient(145deg, var(--escursioni-sky), #6f99b4);
    color: var(--text-primary);
    top: 72%;
    left: 26%;
}

.page-escursioni .sport-node {
    background: linear-gradient(145deg, var(--escursioni-main), #3f7a7a);
    color: white;
    top: 50%;
    left: 82%;
}

.page-escursioni .private-node {
    background: linear-gradient(145deg, #5a9a9a, #4a8a8a);
    color: white;
    top: 80%;
    left: 25%;
}

/* Elementi TEIDE */
.page-escursioni .item-jeep {
    background: linear-gradient(145deg, #7f9e8c, #6b8a78);
    color: white;
    top: 3%;
    left: 12%;
}

.page-escursioni .item-stargazing {
    background: linear-gradient(145deg, #8fb9d4, #7ba5c0);
    color: var(--text-primary);
    top: 3%;
    left: 28%;
}

.page-escursioni .item-quad {
    background: linear-gradient(145deg, #779686, #638270);
    color: white;
    top: 15%;
    left: 8%;
}

.page-escursioni .item-bike {
    background: linear-gradient(145deg, #839e90, #6f8a7c);
    color: white;
    top: 28%;
    left: 10%;
}

.page-escursioni .item-buggy {
    background: linear-gradient(145deg, #7b9a8a, #678676);
    color: white;
    top: 28%;
    left: 25%;
}

/* Elementi OCEANO */
.page-escursioni .item-jetcar {
    background: linear-gradient(145deg, #4f8fae, #3b7b9a);
    color: white;
    top: 3%;
    left: 58%;
}

.page-escursioni .item-jetsky {
    background: linear-gradient(145deg, #4b8baa, #377796);
    color: white;
    top: 3%;
    left: 75%;
}

.page-escursioni .item-cetacei {
    background: linear-gradient(145deg, #5393b2, #3f7f9e);
    color: white;
    top: 15%;
    left: 85%;
}

/* Elementi SKY */
.page-escursioni .item-parapente {
    background: linear-gradient(145deg, #8fb9d4, #7ba5c0);
    color: var(--text-primary);
    top: 38%;
    left: 3%;
}

.page-escursioni .item-paratrike {
    background: linear-gradient(145deg, #8bb5d0, #77a1bc);
    color: var(--text-primary);
    top: 55%;
    left: 3%;
}

/* Elementi SPORT */
.page-escursioni .item-kite {
    background: linear-gradient(145deg, #5f9c9c, #4b8888);
    color: white;
    top: 38%;
    left: 92%;
}

.page-escursioni .item-wind {
    background: linear-gradient(145deg, #5b9898, #478484);
    color: white;
    top: 50%;
    left: 94%;
}

.page-escursioni .item-surf {
    background: linear-gradient(145deg, #579494, #438080);
    color: white;
    top: 62%;
    left: 92%;
}

.page-escursioni .item-fishing {
    background: linear-gradient(145deg, #539090, #3f7c7c);
    color: white;
    top: 55%;
    left: 70%;
}

.page-escursioni .item-diving {
    background: linear-gradient(145deg, #4f8c8c, #3b7878);
    color: white;
    top: 38%;
    left: 72%;
}

/* Elementi PRIVATE */
.page-escursioni .item-catamarano {
    background: linear-gradient(145deg, #6aaaaa, #569696);
    color: white;
    top: 88%;
    left: 10%;
}

.page-escursioni .item-barco {
    background: linear-gradient(145deg, #66a6a6, #529292);
    color: white;
    top: 88%;
    left: 28%;
}

.page-escursioni .item-yacht {
    background: linear-gradient(145deg, #62a2a2, #4e8e8e);
    color: white;
    top: 78%;
    left: 8%;
}

/* Elementi FOOD & DRINK */
.page-eventi .item-bodegas {
    background: linear-gradient(145deg, #9fbfaa, #8bab96);
    color: var(--text-primary);
    top: 88%;
    left: 58%;
}

.page-eventi .item-guacinches {
    background: linear-gradient(145deg, #9bbbA6, #87a792);
    color: var(--text-primary);
    top: 88%;
    left: 78%;
}

/* Elementi FOOD & DRINK - Nuovi */
.page-eventi .item-cocktailbar {
    background: linear-gradient(145deg, #97b7a2, #83a38e);
    color: var(--text-primary);
    top: 70%;
    left: 82%;
}

.page-eventi .item-cucinatipica {
    background: linear-gradient(145deg, #93b39e, #7f9f8a);
    color: var(--text-primary);
    top: 70%;
    left: 58%;
}

.page-eventi .item-italiana {
    background: linear-gradient(145deg, #8faf9a, #7b9b86);
    color: var(--text-primary);
    top: 82%;
    left: 88%;
}

.page-eventi .item-mediterranea {
    background: linear-gradient(145deg, #8bab96, #779782);
    color: var(--text-primary);
    top: 82%;
    left: 42%;
}

.page-eventi .item-surfbar-food {
    background: linear-gradient(145deg, #a3c3ae, #8faf9a);
    color: var(--text-primary);
    top: 92%;
    left: 68%;
}

/* Elementi OCEANO - Nuovi */
.page-escursioni .item-kayak {
    background: linear-gradient(145deg, #4787a6, #337392);
    color: white;
    top: 28%;
    left: 70%;
}

.page-escursioni .item-sottomarino {
    background: linear-gradient(145deg, #4383a2, #2f6f8e);
    color: white;
    top: 28%;
    left: 85%;
}

/* Elementi TEIDE - Nuovi */
.page-escursioni .item-hiking {
    background: linear-gradient(145deg, #87a294, #738e80);
    color: white;
    top: 3%;
    left: 42%;
}

.page-escursioni .item-trekking {
    background: linear-gradient(145deg, #83a090, #6f8c7c);
    color: white;
    top: 18%;
    left: 38%;
}

/* =============================================
   PAGINA SURFING - Posizioni e Colori
   ============================================= */

/* Sotto-categorie (Livello 2) - 6 nodi */
.page-surfing .surfbar-node {
    background: linear-gradient(145deg, var(--surfing-surfbar), #1f5f7f);
    color: white;
    top: 15%;
    left: 20%;
}

.page-surfing .surfhouse-node {
    background: linear-gradient(145deg, var(--surfing-surfhouse), #6faecb);
    color: var(--text-primary);
    top: 15%;
    left: 72%;
}

.page-surfing .elmedano-node {
    background: linear-gradient(145deg, var(--surfing-elmedano), #2f7fa0);
    color: white;
    top: 50%;
    left: 10%;
}

.page-surfing .spots-node {
    background: linear-gradient(145deg, var(--surfing-spots), #5fa6c6);
    color: var(--text-primary);
    top: 50%;
    left: 82%;
}

.page-surfing .callemexico-node {
    background: linear-gradient(145deg, var(--surfing-callemexico), #3e8ba8);
    color: white;
    top: 80%;
    left: 25%;
}

.page-surfing .school-node {
    background: linear-gradient(145deg, var(--surfing-camp), #5a9ec6);
    color: var(--text-primary);
    top: 80%;
    left: 68%;
}

/* Elementi SURF HOUSE */
.page-surfing .item-b2b {
    background: linear-gradient(145deg, #8fc6e0, #7bb2cc);
    color: var(--text-primary);
    top: 3%;
    left: 62%;
}

.page-surfing .item-surfcamp {
    background: linear-gradient(145deg, #8bc2dc, #77aec8);
    color: var(--text-primary);
    top: 3%;
    left: 78%;
}

.page-surfing .item-reservacama {
    background: linear-gradient(145deg, #87bed8, #73aac4);
    color: var(--text-primary);
    top: 15%;
    left: 88%;
}

.page-surfing .item-reservahab {
    background: linear-gradient(145deg, #83bad4, #6fa6c0);
    color: var(--text-primary);
    top: 28%;
    left: 85%;
}

.page-surfing .item-gallery {
    background: linear-gradient(145deg, #7fb6d0, #6ba2bc);
    color: var(--text-primary);
    top: 28%;
    left: 70%;
}

/* Elementi EL MEDANO */
.page-surfing .item-elmedano-rentshop {
    background: linear-gradient(145deg, #4f9fc0, #3b8bac);
    color: white;
    top: 38%;
    left: 3%;
}

.page-surfing .item-elmedano-school {
    background: linear-gradient(145deg, #4b9bbc, #3787a8);
    color: white;
    top: 52%;
    left: 3%;
}

.page-surfing .item-elmedano-fooddrink {
    background: linear-gradient(145deg, #5399ba, #3f85a6);
    color: white;
    top: 62%;
    left: 8%;
}

/* Elementi CALLE MEXICO */
.page-surfing .item-callemexico-rentshop {
    background: linear-gradient(145deg, #5eabb8, #4a97a4);
    color: white;
    top: 88%;
    left: 10%;
}

.page-surfing .item-callemexico-fooddrink {
    background: linear-gradient(145deg, #5aa7b4, #4693a0);
    color: white;
    top: 88%;
    left: 28%;
}

.page-surfing .item-callemexico-artevents {
    background: linear-gradient(145deg, #56a3b0, #428f9c);
    color: white;
    top: 78%;
    left: 8%;
}

/* Elementi SCHOOL */
.page-surfing .item-kontraola {
    background: linear-gradient(145deg, #7ac0d8, #66acc4);
    color: var(--text-primary);
    top: 88%;
    left: 55%;
}

.page-surfing .item-k16 {
    background: linear-gradient(145deg, #76bcd4, #62a8c0);
    color: var(--text-primary);
    top: 88%;
    left: 72%;
}

.page-surfing .item-ikaika {
    background: linear-gradient(145deg, #72b8d0, #5ea4bc);
    color: var(--text-primary);
    top: 88%;
    left: 88%;
}

.page-surfing .item-franz {
    background: linear-gradient(145deg, #6eb4cc, #5aa0b8);
    color: var(--text-primary);
    top: 78%;
    left: 82%;
}

.page-surfing .item-vils {
    background: linear-gradient(145deg, #6ab0c8, #569cb4);
    color: var(--text-primary);
    top: 65%;
    left: 88%;
}

/* Elementi SURF SPOTS - Nuovi */
.page-surfing .item-spots-elmedano {
    background: linear-gradient(145deg, #7fbcd8, #6ba8c4);
    color: var(--text-primary);
    top: 38%;
    left: 92%;
}

.page-surfing .item-spots-lasamericas {
    background: linear-gradient(145deg, #7bb8d4, #67a4c0);
    color: var(--text-primary);
    top: 52%;
    left: 94%;
}

/* =============================================
   PAGINA AGENCY - Posizioni e Colori
   ============================================= */

/* Sotto-categorie (Livello 2) - 4 nodi */
.page-agency .smm-node {
    background: linear-gradient(145deg, var(--agency-smm), #3f5f70);
    color: white;
    top: 20%;
    left: 25%;
}

.page-agency .grafic-node {
    background: linear-gradient(145deg, var(--agency-start), #4a6474);
    color: white;
    top: 20%;
    left: 68%;
}

.page-agency .artists-node {
    background: linear-gradient(145deg, var(--agency-artists), #1f3e4f);
    color: white;
    top: 72%;
    left: 22%;
}

.page-agency .start-node {
    background: linear-gradient(145deg, var(--agency-main), #2e4a5a);
    color: white;
    top: 72%;
    left: 70%;
}

/* Elementi SMM & MARKETING */
.page-agency .item-marketing {
    background: linear-gradient(145deg, #5f7f90, #4b6b7c);
    color: white;
    top: 5%;
    left: 10%;
}

.page-agency .item-smm-consulenza {
    background: linear-gradient(145deg, #5b7b8c, #476778);
    color: white;
    top: 5%;
    left: 25%;
}

.page-agency .item-gestione {
    background: linear-gradient(145deg, #577788, #436374);
    color: white;
    top: 18%;
    left: 8%;
}

.page-agency .item-ads {
    background: linear-gradient(145deg, #537384, #3f5f70);
    color: white;
    top: 32%;
    left: 10%;
}

.page-agency .item-web {
    background: linear-gradient(145deg, #4f6f80, #3b5b6c);
    color: white;
    top: 32%;
    left: 25%;
}

/* Elementi GRAFIC DESIGN */
.page-agency .item-flyer {
    background: linear-gradient(145deg, #6a8494, #567080);
    color: white;
    top: 5%;
    left: 60%;
}

.page-agency .item-fotovideo {
    background: linear-gradient(145deg, #668090, #526c7c);
    color: white;
    top: 5%;
    left: 78%;
}

.page-agency .item-logo {
    background: linear-gradient(145deg, #627c8c, #4e6878);
    color: white;
    top: 18%;
    left: 85%;
}

.page-agency .item-kitmarca {
    background: linear-gradient(145deg, #5e7888, #4a6474);
    color: white;
    top: 32%;
    left: 82%;
}

/* Elementi ARTISTS MANAGEMENT */
.page-agency .item-livemusic {
    background: linear-gradient(145deg, #3f5e6f, #2b4a5b);
    color: white;
    top: 60%;
    left: 5%;
}

.page-agency .item-djs {
    background: linear-gradient(145deg, #3b5a6b, #274657);
    color: white;
    top: 75%;
    left: 5%;
}

.page-agency .item-agency-shows {
    background: linear-gradient(145deg, #375667, #234253);
    color: white;
    top: 88%;
    left: 12%;
}

.page-agency .item-setrecording {
    background: linear-gradient(145deg, #335263, #1f3e4f);
    color: white;
    top: 88%;
    left: 28%;
}

.page-agency .item-djschool {
    background: linear-gradient(145deg, #2f4e5f, #1b3a4b);
    color: white;
    top: 75%;
    left: 38%;
}

/* Elementi START BUSINESS */
.page-agency .item-start-consulenza {
    background: linear-gradient(145deg, #4e6c7e, #3a586a);
    color: white;
    top: 60%;
    left: 88%;
}

.page-agency .item-affiancamento {
    background: linear-gradient(145deg, #4a687a, #365466);
    color: white;
    top: 75%;
    left: 88%;
}

.page-agency .item-modelli {
    background: linear-gradient(145deg, #466476, #324e62);
    color: white;
    top: 88%;
    left: 82%;
}

.page-agency .item-tavolacalda {
    background: linear-gradient(145deg, #426072, #2e4c5e);
    color: white;
    top: 88%;
    left: 65%;
}

/* =============================================
   PAGINA ALESSANDRO - Posizioni e Colori
   ============================================= */

/* Sotto-categorie (Livello 2) - 5 nodi */
.page-alessandro .chisono-node {
    background: linear-gradient(145deg, var(--alessandro-main), #5a7585);
    color: white;
    top: 18%;
    left: 50%;
}

.page-alessandro .perche-node {
    background: linear-gradient(145deg, #7b97a6, #6a8695);
    color: white;
    top: 45%;
    left: 18%;
}

.page-alessandro .esperienza-node {
    background: linear-gradient(145deg, #8ba7b6, #7a96a5);
    color: var(--text-primary);
    top: 45%;
    left: 75%;
}

.page-alessandro .ruolo-node {
    background: linear-gradient(145deg, #7b97a6, #6a8695);
    color: white;
    top: 78%;
    left: 30%;
}

.page-alessandro .highlights-node {
    background: linear-gradient(145deg, var(--alessandro-main), #5a7585);
    color: white;
    top: 78%;
    left: 65%;
}

/* =============================================
   RESPONSIVE - DESKTOP
   ============================================= */
@media (max-width: 1400px) {
    .page-map {
        transform: scale(0.9);
        transform-origin: center center;
    }
}

@media (max-width: 1200px) {
    .page-map {
        transform: scale(0.8);
    }
}

@media (max-width: 992px) {
    .page-map {
        transform: scale(0.65);
    }

    .back-home {
        position: static;
        display: block;
        width: fit-content;
        margin: 0 auto 10px;
        transform: none;
    }
}

/* =============================================
   RESPONSIVE - MOBILE
   ============================================= */
@media (max-width: 768px) {
    .page-map {
        display: none;
    }

    .back-home {
        position: static;
        display: block;
        width: fit-content;
        margin: 0 auto 10px;
        transform: none;
        font-size: 0.75rem;
        padding: 6px 12px;
    }

    /* Mobile Page Map */
    .mobile-page-map {
        display: block;
        position: relative;
        width: 100%;
        min-height: 480px;
        padding: 20px 10px;
        touch-action: manipulation;
    }

    .mobile-page-map .category-center-mobile {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        cursor: pointer;
        z-index: 10;
    }

    .mobile-page-map .category-icon-mobile {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
        margin: 0 auto;
    }

    .mobile-page-map .category-icon-mobile span {
        font-size: 0.7rem;
        font-weight: 600;
        text-align: center;
        line-height: 1.2;
    }

    .mobile-page-map .click-hint-mobile {
        display: block;
        margin-top: 10px;
        font-size: 0.65rem;
        color: var(--text-secondary);
        animation: pulse-hint 2s ease-in-out infinite;
    }

    .mobile-page-map[data-state="categories"] .click-hint-mobile {
        display: none;
    }

    /* Mobile node styles for page maps */
    .mobile-page-map .mobile-node {
        position: absolute;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        cursor: pointer;
        transform: translate(-50%, -50%);
        transition: all 0.4s ease-out;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        border: 1px solid rgba(255,255,255,0.3);
    }

    .mobile-page-map .mobile-node-primary {
        width: 68px;
        height: 68px;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
        pointer-events: none;
    }

    .mobile-page-map .mobile-node-primary span {
        font-size: 0.55rem;
        font-weight: 600;
        text-align: center;
        line-height: 1.2;
        padding: 5px;
    }
    /* "Appartamento" e' la label piu' lunga: riduci il font nel nodo mobile della mappa */
    .mobile-page-map .mobile-appartamento span { font-size: 0.44rem; letter-spacing: -0.2px; }

    /* Show mobile nodes when data-state="categories" */
    .mobile-page-map[data-state="categories"] .mobile-node-primary {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        pointer-events: auto;
    }

    /* Staggered animation */
    .mobile-page-map[data-state="categories"] .mobile-node-primary:nth-child(2) { transition-delay: 0s; }
    .mobile-page-map[data-state="categories"] .mobile-node-primary:nth-child(3) { transition-delay: 0.06s; }
    .mobile-page-map[data-state="categories"] .mobile-node-primary:nth-child(4) { transition-delay: 0.12s; }
    .mobile-page-map[data-state="categories"] .mobile-node-primary:nth-child(5) { transition-delay: 0.18s; }
    .mobile-page-map[data-state="categories"] .mobile-node-primary:nth-child(6) { transition-delay: 0.24s; }
    .mobile-page-map[data-state="categories"] .mobile-node-primary:nth-child(7) { transition-delay: 0.3s; }

    /* Mobile node colors per category page */
    .mobile-page-map .mobile-showcases { background: linear-gradient(145deg, var(--eventi-showcases), #b88520); color: var(--text-primary); }
    .mobile-page-map .mobile-consigliati { background: linear-gradient(145deg, var(--eventi-tips), #d4b358); color: var(--text-primary); }
    .mobile-page-map .mobile-movida { background: linear-gradient(145deg, var(--eventi-main), #c49a30); color: var(--text-primary); }
    .mobile-page-map .mobile-servizi { background: linear-gradient(145deg, var(--eventi-servizi), #a87a2a); color: white; }

    .mobile-page-map .mobile-ostello { background: linear-gradient(145deg, var(--alloggio-ostello), #dcc0c8); color: var(--text-primary); }
    /* Tutti i nodi alloggio mobile: stessa palette rosa */
    .mobile-page-map .mobile-villa,
    .mobile-page-map .mobile-casarurale,
    .mobile-page-map .mobile-appartamento,
    .mobile-page-map .mobile-surfhouse-alloggio,
    .mobile-page-map .mobile-ostello,
    .mobile-page-map .mobile-coliving {
        background: linear-gradient(145deg, var(--alloggio-villa), #c99ea8);
        color: var(--text-primary);
    }
    .mobile-page-map .mobile-fincawedding { background: linear-gradient(145deg, #e8c0c8, #d4a4b0); color: var(--text-primary); }

    .mobile-page-map .mobile-teide { background: linear-gradient(145deg, var(--escursioni-teide), #5f7e6c); color: white; }
    .mobile-page-map .mobile-oceano { background: linear-gradient(145deg, var(--escursioni-oceano), #2f6f8e); color: white; }
    .mobile-page-map .mobile-sky { background: linear-gradient(145deg, var(--escursioni-sky), #6f99b4); color: var(--text-primary); }
    .mobile-page-map .mobile-sport { background: linear-gradient(145deg, var(--escursioni-main), #3f7a7a); color: white; }
    .mobile-page-map .mobile-private { background: linear-gradient(145deg, #5a9a9a, #4a8a8a); color: white; }
    .mobile-page-map .mobile-fooddrink { background: linear-gradient(145deg, var(--escursioni-food), #7f9f8a); color: var(--text-primary); }
    .mobile-page-map .mobile-nextevent { background: linear-gradient(145deg, var(--eventi-tips), #d4b358); color: var(--text-primary); }

    .mobile-page-map .mobile-surfbar { background: linear-gradient(145deg, var(--surfing-surfbar), #1f5f7f); color: white; }
    .mobile-page-map .mobile-surfhouse { background: linear-gradient(145deg, var(--surfing-surfhouse), #6faecb); color: var(--text-primary); }
    .mobile-page-map .mobile-elmedano { background: linear-gradient(145deg, var(--surfing-elmedano), #2f7fa0); color: white; }
    .mobile-page-map .mobile-spots { background: linear-gradient(145deg, var(--surfing-spots), #5fa6c6); color: var(--text-primary); }
    .mobile-page-map .mobile-callemexico { background: linear-gradient(145deg, var(--surfing-callemexico), #3e8ba8); color: white; }
    .mobile-page-map .mobile-school { background: linear-gradient(145deg, var(--surfing-camp), #5a9ec6); color: var(--text-primary); }

    .mobile-page-map .mobile-smm { background: linear-gradient(145deg, var(--agency-smm), #3f5f70); color: white; }
    .mobile-page-map .mobile-grafic { background: linear-gradient(145deg, var(--agency-start), #4a6474); color: white; }
    .mobile-page-map .mobile-artists { background: linear-gradient(145deg, var(--agency-artists), #1f3e4f); color: white; }
    .mobile-page-map .mobile-start { background: linear-gradient(145deg, var(--agency-main), #2e4a5a); color: white; }

    .mobile-page-map .mobile-chisono { background: linear-gradient(145deg, var(--alessandro-main), #5a7585); color: white; }
    .mobile-page-map .mobile-perche { background: linear-gradient(145deg, #7b97a6, #6a8695); color: white; }
    .mobile-page-map .mobile-esperienza { background: linear-gradient(145deg, #8ba7b6, #7a96a5); color: var(--text-primary); }
    .mobile-page-map .mobile-ruolo { background: linear-gradient(145deg, #7b97a6, #6a8695); color: white; }
    .mobile-page-map .mobile-highlights { background: linear-gradient(145deg, var(--alessandro-main), #5a7585); color: white; }

    /* Mobile back button */
    .mobile-page-map .mobile-back-btn {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--blu-squalo);
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 20px;
        font-size: 0.8rem;
        cursor: pointer;
        z-index: 20;
    }

    /* ===== MOBILE SVG LINES ===== */
    .mobile-page-map .mobile-connections {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
    }

    .mobile-page-map .mobile-line {
        stroke: var(--blu-squalo);
        stroke-width: 1.8;
        stroke-opacity: 0.35;
        fill: none;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    .mobile-page-map[data-state="categories"] .mobile-line {
        opacity: 0;
    }

    /* ===== RADIAL POPUP COLORS FOR PAGES ===== */
    /* Radial nodes default styling */
    .radial-node {
        background: linear-gradient(145deg, #3d5a80, #2c4a6e);
        color: white;
    }

    /* EVENTI level 3 nodes */
    .page-eventi .radial-node {
        background: linear-gradient(145deg, #e8c060, #d4a840);
        color: var(--text-primary);
    }

    /* ALLOGGIO level 3 nodes */
    .page-alloggio .radial-node {
        background: linear-gradient(145deg, #e8c8d0, #d4a8b8);
        color: var(--text-primary);
    }

    /* ESCURSIONI level 3 nodes */
    .page-escursioni .radial-node {
        background: linear-gradient(145deg, #5f9a9a, #4a8686);
        color: white;
    }

    /* SURFING level 3 nodes */
    .page-surfing .radial-node {
        background: linear-gradient(145deg, #5ab2d6, #4698bc);
        color: white;
    }

    /* AGENCY level 3 nodes */
    .page-agency .radial-node {
        background: linear-gradient(145deg, #4a6a82, #36566e);
        color: white;
    }

    /* ALESSANDRO level 3 nodes */
    .page-alessandro .radial-node {
        background: linear-gradient(145deg, #7a96a6, #668290);
        color: white;
    }
}