/* LIQUID GLASS UI - PINK EDITION v4 (COMPLETO) */
:root {
    --bg-color: #fdf5f6;
    --glass-bg: rgba(255, 255, 255, 0.25);
    --pink-light: #ffc4d4;
    --pink-main: #f095ad;
    --pink-dark: #c9627e;
    --text-color: #5c4349;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    min-height: 100vh;
    padding: 40px 20px;
}

/* CONTENITORE PANNELLI (Li mette in colonna al centro) */
.page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px; /* Distanza tra un pannello e l'altro */
    max-width: 900px;
    margin: 0 auto;
}

/* SFONDO ANIMATO */
.light-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -1;
}
.orb-1 { top: 10%; left: 10%; width: 300px; height: 300px; background: #ffb6c1; opacity: 0.6; }
.orb-2 { bottom: 10%; right: 10%; width: 400px; height: 400px; background: #ffdae0; opacity: 0.7; }

/* PANNELLO IN VETRO (Base per tutte le sezioni) */
.liquid-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 40px;
    padding: 50px;
    width: 100%;
    border-top: 1.5px solid rgba(255, 255, 255, 0.8);
    border-left: 1.5px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 30px 60px rgba(201, 98, 126, 0.12), inset 0 4px 10px rgba(255, 255, 255, 0.6);
    text-align: center;
}

.glass-logo {
    width: 100px; height: 100px; margin: 0 auto 20px;
    border-radius: 50%; background: rgba(255,255,255,0.4);
    display: flex; justify-content: center; align-items: center;
    font-size: 32px; color: var(--pink-dark);
    border-top: 2px solid white; box-shadow: inset 0 5px 15px rgba(255,255,255,1);
}

h1 { font-size: 2rem; color: var(--pink-dark); margin-bottom: 5px; }
h2 { font-size: 1.5rem; color: var(--pink-dark); margin-bottom: 20px; }
p { line-height: 1.6; margin-bottom: 15px; }
.subtitle { font-size: 14px; opacity: 0.7; margin-bottom: 30px; }

/* BOTTONI */
.social-row { display: flex; gap: 15px; justify-content: center; margin-bottom: 15px; }

.liquid-btn {
    padding: 15px 30px; border-radius: 50px;
    text-decoration: none; font-size: 13px; font-weight: 600;
    transition: all 0.3s ease; display: inline-block;
}

.btn-glass {
    background: rgba(255, 255, 255, 0.3); color: var(--pink-dark);
    border-top: 1px solid white; border-left: 1px solid white;
    box-shadow: 0 10px 20px rgba(0,0,0,0.03), inset 0 3px 5px rgba(255,255,255,0.5);
    flex: 1;
}

.btn-primary {
    background: linear-gradient(135deg, #ffb3c6, #f095ad); color: white;
    width: 100%; max-width: 400px;
    box-shadow: 0 15px 25px rgba(240, 149, 173, 0.3), inset 0 4px 6px rgba(255, 255, 255, 0.7);
}

.liquid-btn:hover { transform: translateY(-3px); filter: brightness(1.05); }

/* GRIGLIA PORTFOLIO (6 LAVORI) */
.portfolio-title { margin: 40px 0 20px; }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.work-item {
    aspect-ratio: 1 / 1; background: rgba(255, 255, 255, 0.2); border-radius: 20px;
    overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 0 10px rgba(255,255,255,0.2);
}
.work-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.work-item:hover img { transform: scale(1.1); }

/* GRIGLIA SERVIZI */
.services-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;
}
.service-card {
    background: rgba(255, 255, 255, 0.3); border-radius: 25px; padding: 25px;
    border-top: 1px solid white; border-left: 1px solid white;
    box-shadow: inset 0 3px 5px rgba(255,255,255,0.5);
}
.service-card h3 { color: var(--pink-dark); margin-bottom: 10px; font-size: 1.1rem; }

/* MAPPA */
.map-container {
    border-radius: 25px; overflow: hidden; margin-top: 20px;
    border: 2px solid white; box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* MOBILE */
@media (max-width: 600px) {
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
    .liquid-panel { padding: 30px 20px; }
}


/* STILE AGGIUNTIVO PER LE CARDS SERVIZI */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.service-card {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    padding: 25px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.4);
}

.service-icon {
    font-size: 30px;
    margin-bottom: 15px;
}

.service-card h3 {
    font-size: 1.1rem;
    color: #c9627e;
    margin-bottom: 10px;
}

.service-card p {
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.8;
}