/* =========================================
   VARIABLES Y BASE
   ========================================= */
:root {
    --font-heading: 'Fredoka One', cursive;
    --font-body: 'Nunito', sans-serif;
    --color-brown: #5D4037;
    --color-cream: #FFF3E0;
    --color-sky-bg: #DFF6FF; /* Azul cielo suave para el fondo de la web */
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    background-color: var(--color-sky-bg); /* Color de fondo general */
    overflow-x: hidden;
}

/* =========================================
   HEADER (CIELO Y LOGO)
   ========================================= */
.header-toldo-main {
    /* Aquí va tu imagen del cielo con nubes */
    background-image: url('../img/header_cielo.webp'); 
    background-repeat: no-repeat;
    background-size: cover; 
    background-position: center bottom;
    padding: 20px 20px 20px 20px; /* Padding ajustado */
    text-align: center;
    position: relative;
    z-index: 10;
}

.header-content {
    max-width: 800px;
    margin: 0 auto;
}

.logo-main {
    max-width: 480px;
    height: auto;
    margin-bottom: 10px;
    filter: drop-shadow(0px 4px 0px rgba(0,0,0,0.1));
    transition: transform 0.3s ease;
}

.logo-main:hover {
    transform: scale(1.05) rotate(2deg);
}

h1 {
    font-family: var(--font-heading);
    color: #5d423ab3; /* Blanco para resaltar sobre el cielo azul */
    text-shadow: 2px 2px 0px #7FA8C9; /* Sombra suave para leerse bien en nubes */
    font-size: 2.8rem;
    margin: 10px 0;
}

p {
    font-size: 1.3rem;
    color: #5D4037;
    font-weight: 700;
    margin-top: 5px;
    background-color: rgba(255, 255, 255, 0.6); /* Fondo semitransparente para leer mejor */
    display: inline-block;
    padding: 5px 20px;
    border-radius: 20px;
}

/* =========================================
   EL MAPA (CONTENEDOR LIMITADO)
   ========================================= */
.mapa-container {
    position: relative;
    width: 95%; /* Deja un pequeño margen en pantallas medianas */
    max-width: 1200px; /* ¡AQUÍ ESTÁ LA SOLUCIÓN! No pasará de este ancho */
   /* height: 700px;  Altura fija controlada */
    height: 0; /* La altura ahora la controlará el padding */
    padding-bottom: 39%; /* ESTE ES EL NÚMERO MÁGICO (Ajustable) */

    margin: 10px auto 50px auto; /* Margen negativo arriba para que "pise" el header un poco */
    
    /* El Fondo del Mapa */
    background-image: url('../img/fondo_pc.webp');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    /* Estética de "Tablero de Juego" */
    border-radius: 40px;
    border: 8px solid #FFFFFF;
    box-shadow: 0px 20px 40px rgba(0, 70, 100, 0.15); /* Sombra bonita */
    overflow: hidden;
    z-index: 20;
}

/* =========================================
   LOS EDIFICIOS (NODOS)
   ========================================= */
.map-node {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 30;
}

.map-node:hover {
    transform:scale(1.05);
    cursor: pointer;
}

.edificio-img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.2));
}

.node-label {
    background-color: #ffffff40;
    font-family: var(--font-heading);
    color: var(--color-brown);
    padding: 8px 15px;
    border-radius: 20px;
    border: 2px dashed palevioletred;
    margin-top: -15px;
    box-shadow: 0px 4px 0px rgba(0,0,0,0.1);
    white-space: nowrap;
    font-size: 1rem;
}

/* --- POSICIONES EXACTAS EN EL MAPA (PC) --- */
/* Ajusta estos % si ves que no caen perfecto en tu dibujo */
/* --- POSICIONES EXACTAS EN EL MAPA (PC) --- */

/* 1. Heladería (Abajo Izquierda - En el prado de conos) */
.nodo-gelato {
    width: 17%;      /* Un poco más pequeño para que no tape el camino */
    bottom: 29%;     /* Subimos para que no se salga del prado */
    left: 15%;        /* Ajustado a la izquierda */
}

/* 2. Chiringuito (Abajo Derecha - En la playa) */
.nodo-chiringuito {
    width: 15%;
    bottom: 30%;     /* Subimos para que esté en la arena, no en el agua */
    right: 15%;      /* Alejado del borde para centrarlo en la playa */
}

/* 3. Recuerdos (Arriba Izquierda - En las casitas vacías) */
.nodo-recuerdos {
    width: 17%;
    top: 32.5%;        /* Bajamos un poco para encajar en los cimientos */
    left: 31%;       /* Movemos a la derecha para encajar en el hueco libre */
}

/* 4. Tech Lab (Arriba Derecha - En la plataforma violeta) */
.nodo-tech {
    width: 22%;
    top: 33%;        /* Arriba en la plataforma */
    right: 18%;      /* Centrado en la zona tecnológica */
}


/* =========================================
   RESPONSIVE (MÓVIL Y TABLET)
   Cambiamos 768px a 1024px para incluir iPads/Tablets
   ========================================= */
@media (max-width: 1024px) {
    
    /* CORRECCIÓN: Faltaba el punto '.' antes de la clase */
    .header-toldo-main {
        padding: 30px 10px 50px 10px; 
    }
    
    h1 { font-size: 2rem; } /* Un poco más grande para tablet */

    /* Logo adaptable */
    .logo-main {
        max-width: 60%; /* Usamos % para que se adapte a tablet y móvil */
        margin-bottom: -10px;
    }
    
    /* --- EL MAPA VERTICAL "ELÁSTICO" --- */
    .mapa-container {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        border: none;
        margin: 0;
        
        /* TRUCO IMPORTANTE: */
        /* En vez de altura fija (500px), usamos proporción vertical */
        height: 0; 
        /* Si tu imagen móvil es muy alta, sube este número (ej. 150%, 180%) */
        /* Si es más cuadrada, bájalo (ej. 120%) */
        padding-bottom: 160%; 
        
        background-image: url('../img/fondo_movil.webp');
        background-position: center top;
        background-size: cover; /* Cubre todo el área */
    }

    /* Ajuste de nodos */
    .map-node { width: 140px; } 
    .node-label { font-size: 0.9rem; }

    /* --- RECALIBRANDO POSICIONES (Para formato vertical) --- */
    /* Al usar padding-bottom, el % de top será mucho más preciso */

    /* 4. Tech (Arriba - Centro) */
    .nodo-tech {
        top: 5%;
        left:-5%;
        width: 550px;
        right: auto;
       
    }

    /* 3. Recuerdos (Medio Arriba - Izquierda) */
    .nodo-recuerdos {
        top: 35%;
        left: 15%;
         width: 350px;
    }

    /* 2. Chiringuito (Medio Abajo - Derecha) */
    .nodo-chiringuito {
        bottom: auto; 
        top: 40%;
        width: 350px;
        right: -5%;
        left: auto;
    }

    /* 1. Heladería (Abajo - Centro) */
    .nodo-gelato {
        bottom: 7%;
        left: 10%;
         width: 350px;
        
        top: auto;
    }
}

/* Ajuste extra solo para móviles muy pequeños */
@media (max-width: 580px) {
    h1 { font-size: 1.5rem; }
    .logo-main { max-width: 220px; }
    .map-node { width: 110px; } /* Edificios más pequeños en pantalla mini */

    /* 4. Tech (Arriba - Centro) */
    .nodo-tech {
        top: 7%;
        left: -1%;
        width: 250px;
        right: auto;
        
    }

    /* 3. Recuerdos (Medio Arriba - Izquierda) */
    .nodo-recuerdos {
        top: 35%;
        left: 15%;
        width: 180px;
    }

    /* 2. Chiringuito (Medio Abajo - Derecha) */
    .nodo-chiringuito {
        bottom: auto; 
        top: 38%;
        right: -4%;
        width: 180px;
        left: auto;
    }

    /* 1. Heladería (Abajo - Centro) */
    .nodo-gelato {
        bottom: 8%;
        left: 7%;
        width: 180px;
        top: auto;
    }


}




/* =========================================
   FOOTER
   ========================================= */
footer {
    background-color: var(--color-brown);
    color: var(--color-cream);
    text-align: center;
    padding: 20px;
    position: relative;
    z-index: 50;
}