/* =========================================
   VARIABLES DE COLOR: BLAU I VERD CORPORATIU
   ========================================= */

/* MODE CLAR */
:root {
    --bg-main: #f4f8ff; /* Fons blau molt claret */
    --bg-card: #ffffff; 
    --bg-nav: rgba(244, 248, 255, 0.85); 
    --bg-footer: #e8f0fe; 
    
    /* Textos principals */
    --text-main: #1a1a1a; 
    --text-muted: #4b5563; 
    --text-nav: #1a1a1a;
    
    --border-color: rgba(31, 122, 224, 0.15); 
    --input-bg: #ffffff; 
    
    /* Colors Corporatius (Blau i Verd) */
    --primary-blue: #1f7ae0;
    --primary-blue-light: #4da3ff;
    --gradient-blue: linear-gradient(135deg, #1f7ae0 0%, #4da3ff 100%);
    
    --accent-color: #e0841f; /* El vostre verd */
    --accent-hover: #e0841f;
    --electric-blue: #1f7ae0; 
    
    /* Tipografia Coolvetica per títols i Inter per textos */
    --font-headings: 'Coolvetica', sans-serif;
    --font-sans: 'Inter', sans-serif;
}

/* MODE FOSC */
[data-theme="dark"] {
    --bg-main: #0b1120; /* Blau marí profund, molt elegant */
    --bg-card: rgba(30, 41, 59, 0.6);
    --bg-nav: rgba(11, 17, 32, 0.85);
    --bg-footer: #080c17;
    
    --text-main: #f8fafc; 
    --text-muted: #cbd5e1; 
    --text-nav: #f8fafc;
    
    --border-color: rgba(255, 255, 255, 0.1);
    --input-bg: rgba(255, 255, 255, 0.05); 
    
    --gradient-blue: linear-gradient(135deg, #0056b3 0%, #1f7ae0 100%);
}

/* =========================================
   ESTILS BASE GLOBALS
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

body {
    background: var(--bg-main);
    color: var(--text-muted);
    font-family: var(--font-sans);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background 0.4s ease, color 0.4s ease;
}

/* APLICACIÓ DE LA COOLVETICA */
h1, h2, h3, h4 {
    font-family: var(--font-headings);
    font-weight: normal; /* La Coolvetica ja té pes propi */
    letter-spacing: 0.5px;
    color: var(--text-main);
    transition: color 0.4s ease;
}

p { 
    color: var(--text-muted); 
    transition: color 0.4s ease; 
}

/* =========================================
   BARRA DE NAVEGACIÓ I BOTÓ TEMA
   ========================================= */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 15px 5%;
    display: flex; /* Flexbox per centrar-ho tot */
    justify-content: space-between;
    align-items: center;
    background: var(--bg-nav);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.4s ease;
}

/* El truc per centrar el menú exactament: Dividim en 3 blocs d'igual pes (flex: 1) */
.logo-wrapper {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.nav-links {
    flex: 2;
    display: flex;
    justify-content: center; /* Menú centrat matemàticament */
}

.nav-actions { 
    flex: 1;
    display: flex; 
    align-items: center; 
    justify-content: flex-end;
    gap: 20px; 
}

.logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.logo-image { height: 70px; transition: transform 0.3s ease; }
.logo-link:hover .logo-image { transform: scale(1.05); }

.nav-links a {
    color: var(--text-nav);
    text-decoration: none;
    margin: 0 15px;
    font-size: 1.05rem; /* Un pèl més gran */
    font-weight: 500;
    transition: opacity 0.3s, color 0.3s;
    opacity: 0.8;
}

.nav-links a:hover { 
    opacity: 1; 
    color: var(--electric-blue); 
}

/* Botó Mode Fosc/Clar */
.theme-toggle {
    background: transparent;
    border: none;
    color: var(--text-nav);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.theme-toggle:hover {
    opacity: 1;
    background: var(--border-color);
    color: var(--electric-blue);
}

.sun-icon { display: none; }
.moon-icon { display: block; }
[data-theme="dark"] .sun-icon { display: block; }
[data-theme="dark"] .moon-icon { display: none; }

/* =========================================
   BOTONS PRINCIPALS
   ========================================= */
.btn-primary, .btn-secondary {
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    border-radius: 980px; 
    padding: 12px 28px; 
    font-size: 15px; 
    font-weight: 600;
    text-decoration: none; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer; 
    text-align: center; 
    min-width: 180px;
}

.btn-primary { 
    background-color: var(--accent-color); 
    color: #1a1a1a !important; /* Sempre fosc perquè contrasti bé amb el llima */
    border: none; 
}

.btn-primary:hover { 
    background-color: var(--accent-hover); 
    transform: translateY(-2px); 
    box-shadow: 0 10px 20px rgba(233, 152, 76, 0.3); /* Ombra verd llima */
}

.btn-secondary { 
    background-color: transparent; 
    color: var(--text-main); 
    border: 1px solid var(--border-color); 
}

.btn-secondary:hover { 
    border-color: var(--electric-blue); 
    background-color: rgba(31, 122, 224, 0.05); 
    color: var(--electric-blue); 
}

/* =========================================
   SECCIÓ INICI (HERO) - Imatge amb overlay Blau Degradat
   ========================================= */
/* =========================================
   SECCIÓ INICI (HERO) - Amb la teva foto
   ========================================= */
.hero {
    height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    text-align: center; 
    position: relative; 
    padding: 0 5%;
    
    /* Degradat fosc molt subtil (negre transparent) i la teva foto de fons */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%), url('fons.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Manté l'efecte "parallax" elegant en fer scroll */
}

.hero-content { 
    position: relative; 
    z-index: 2; 
    max-width: 900px; 
}

/* Forcem color blanc al text de l'inici per llegibilitat perfecta sobre el blau */
.hero h1, .hero p {
    color: #ffffff !important;
}

.hero h1 { 
    font-size: 6rem; /* Més gran aprofitant Coolvetica */
    line-height: 1; 
    margin-bottom: 25px; 
}

.hero h1 span {
    display: block; 
    color: var(--accent-color); /* La paraula clau va amb el verd llima! */
    font-style: italic; 
}

.hero p { 
    font-size: 1.2rem; 
    margin-bottom: 40px; 
    max-width: 700px; 
    margin-left: auto; 
    margin-right: auto; 
}

.hero-buttons { 
    display: flex; 
    gap: 20px; 
    justify-content: center; 
    align-items: center; 
}

.hero .btn-secondary {
    color: #ffffff !important; /* El botó secundari blanc sobre fons blau */
    border-color: rgba(255,255,255,0.4);
}
.hero .btn-secondary:hover {
    background-color: rgba(255,255,255,0.1);
    border-color: #ffffff;
}

/* =========================================
   ALTRES SECCIONS GENERALS
   ========================================= */
.services, .projects, .video-section { 
    padding: 160px 5%; 
    position: relative; 
    border-bottom: 1px solid var(--border-color); 
}

.section-title { 
    font-size: 3.5rem; 
    text-align: center; 
    margin-bottom: 20px; 
}

.section-title span {
    color: var(--electric-blue); /* Donem el blau als textos destacats */
}

.section-subtitle { 
    text-align: center; 
    max-width: 600px; 
    margin: 0 auto 60px auto; 
}

/* =========================================
   BENTO GRID SERVEIS
   ========================================= */
.bento-grid {
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    grid-template-rows: repeat(2, auto);
    gap: 20px; 
    max-width: 1100px; 
    margin: 0 auto;
}

.servei-ajuntaments { background-image: url('img/servei-ajuntaments.jpg'); }
.servei-sales { background-image: url('img/servei-sales.jpg'); }
.servei-podcasts { background-image: url('img/servei-podcasts.jpg'); }

.bento-item {
    background-color: var(--bg-card); 
    background-size: cover; 
    background-position: center;
    border-radius: 28px; 
    padding: 40px; 
    border: 1px solid var(--border-color);
    position: relative; 
    overflow: hidden; 
    display: flex; 
    align-items: flex-end; 
    min-height: 300px; 
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.bento-item.featured { 
    grid-row: span 2; 
    min-height: 100%; 
}

.bento-item::before {
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    /* Gradient fosc que puja des de baix cap a dalt perquè la lletra es llegeixi */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 100%); 
    z-index: 1; 
    transition: background 0.4s ease;
}

.bento-content { 
    position: relative; 
    z-index: 2; 
}

.bento-content h3, .bento-content p { 
    color: #ffffff !important; 
}

.bento-content h3 { 
    font-size: 2.2rem; 
    margin-bottom: 10px; 
}

.bento-content p { 
    font-size: 1.05rem; 
    line-height: 1.5; 
}

.bento-item:hover { 
    transform: scale(1.02); 
    border-color: var(--electric-blue); 
    box-shadow: 0 15px 30px rgba(31, 122, 224, 0.15);
}

@media (max-width: 768px) {
    .bento-grid { grid-template-columns: 1fr; }
    .bento-item.featured { grid-row: span 1; min-height: 350px; }
}

/* =========================================
   PROJECTES SHOWCASE
   ========================================= */
.projects-container { 
    display: flex; 
    flex-direction: column; 
    gap: 80px; 
    max-width: 1100px; 
    margin: 0 auto; 
}

.project-showcase { 
    display: grid; 
    grid-template-columns: 1.2fr 0.8fr; 
    gap: 50px; 
    align-items: center; 
}

.project-image-box {
    position: relative; 
    width: 100%; 
    aspect-ratio: 16 / 9;
    background: var(--bg-card); 
    border-radius: 28px; 
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.project-image {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    object-fit: cover; 
    display: block; 
    transition: transform 0.6s ease, filter 0.6s ease;
}

.project-showcase:hover .project-image { 
    transform: scale(1.05); 
    filter: brightness(1.1); 
}

.project-category { 
    color: var(--electric-blue); 
    font-size: 0.9rem; 
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    display: block; 
    margin-bottom: 10px; 
}

.project-details h4 { 
    font-size: 3rem; 
    margin-bottom: 20px; 
    color: var(--text-main); 
}

.project-details p { 
    font-size: 1.15rem; 
    max-width: 400px; 
    color: var(--text-muted); 
}

.project-showcase:nth-child(even) { grid-template-columns: 0.8fr 1.2fr; }
.project-showcase:nth-child(even) .project-image-box { grid-column: 2; }
.project-showcase:nth-child(even) .project-details { grid-column: 1; grid-row: 1; text-align: right; }
.project-showcase:nth-child(even) p { margin-left: auto; }

@media (max-width: 900px) {
    .project-showcase, .project-showcase:nth-child(even) { grid-template-columns: 1fr; text-align: left; gap: 30px; }
    .project-showcase:nth-child(even) .project-image-box, .project-showcase:nth-child(even) .project-details { grid-column: 1; }
    .project-showcase:nth-child(even) p { margin-left: 0; }
}

/* =========================================
   VÍDEO
   ========================================= */
.video-container {
    max-width: 1000px; 
    margin: 40px auto 0; 
    background: var(--bg-card); 
    border-radius: 32px; 
    overflow: hidden; 
    position: relative;
    border: 1px solid var(--border-color); 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.video-placeholder {
    height: 560px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    gap: 20px;
    background: linear-gradient(rgba(31,122,224,0.3), rgba(0,0,0,0.6)), url('bg-video-thumb.jpg') center/cover;
    cursor: pointer; 
    transition: all 0.5s ease;
}

.play-button {
    width: 80px; 
    height: 80px; 
    background: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(10px); 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border: 1px solid rgba(255, 255, 255, 0.3); 
    transition: all 0.3s ease;
}

.play-button:after { 
    content: ''; 
    border-top: 12px solid transparent; 
    border-bottom: 12px solid transparent; 
    border-left: 20px solid #fff; 
    margin-left: 5px; 
}

.video-placeholder:hover .play-button { 
    transform: scale(1.1); 
    background: var(--accent-color); 
    border-color: var(--accent-color);
}

.video-placeholder:hover .play-button:after { 
    border-left-color: #1a1a1a; 
}

.video-placeholder p { 
    color: #fff; 
    font-weight: 500;
}

/* =========================================
   CONTACTE
   ========================================= */
.contact { 
    padding: 160px 5%; 
    background-color: transparent; 
    border-bottom: 1px solid var(--border-color); 
}

.contact-wrapper { 
    max-width: 900px; 
    margin: 0 auto; 
    text-align: center; 
}

.contact-header { 
    margin-bottom: 60px; 
}

.contact-container {
    background: var(--bg-card); 
    border-radius: 32px; 
    padding: 60px;
    border: 1px solid var(--border-color); 
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
}

.contact-form { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

.form-row { 
    display: flex; 
    gap: 15px; 
}

.contact-form input, .contact-form textarea {
    width: 100%; 
    padding: 20px; 
    background-color: var(--input-bg);
    border: 1px solid var(--border-color); 
    border-radius: 16px;
    color: var(--text-main); 
    font-family: var(--font-sans); 
    font-size: 16px; 
    transition: all 0.3s ease;
}

.contact-form input::placeholder, .contact-form textarea::placeholder { 
    color: var(--text-muted); 
    opacity: 0.7; 
}

.contact-form input:focus, .contact-form textarea:focus { 
    outline: none; 
    border-color: var(--electric-blue); 
    background-color: transparent; 
    box-shadow: 0 0 0 3px rgba(31, 122, 224, 0.1);
}

.btn-submit {
    background-color: var(--accent-color); 
    color: #1a1a1a; 
    padding: 20px; 
    border: none; 
    border-radius: 980px;
    font-size: 16px; 
    font-weight: 600; 
    cursor: pointer; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    margin-top: 20px;
}

.btn-submit:hover { 
    background-color: var(--accent-hover); 
    transform: translateY(-2px); 
    box-shadow: 0 10px 20px rgba(233, 152, 76, 0.3); 
}

@media (max-width: 600px) {
    .form-row { flex-direction: column; }
    .contact-container { padding: 30px 20px; }
}

/* =========================================
   FOOTER
   ========================================= */
footer { 
    background-color: var(--bg-footer); 
    padding: 80px 5% 30px 5%; 
    border-top: 1px solid var(--border-color); 
    transition: background-color 0.4s ease; 
}

.footer-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 50px; 
    margin-bottom: 60px; 
}

.footer-col h4 { 
    margin-bottom: 20px; 
    color: var(--text-main); 
    font-size: 1.5rem;
}

.footer-col p { 
    margin-bottom: 10px; 
    font-size: 1rem; 
}

.social-links { 
    display: flex; 
    gap: 15px; 
}

.social-links a { 
    color: var(--text-muted); 
    text-decoration: none; 
    transition: color 0.3s; 
    font-weight: 500;
}

.social-links a:hover { 
    color: var(--electric-blue); 
}

.footer-bottom { 
    text-align: center; 
    padding-top: 30px; 
    border-top: 1px solid var(--border-color); 
    font-size: 0.9rem; 
    color: var(--text-muted); 
}

/* =========================================
   ANIMACIONS
   ========================================= */
.fade-in { 
    animation: fadeIn 1.2s ease forwards; 
}

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(20px); } 
    to { opacity: 1; transform: translateY(0); } 
}

.reveal { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); 
}

.reveal.active { 
    opacity: 1; 
    transform: translateY(0); 
}

.bento-item:nth-child(2) { transition-delay: 0.1s; }
.bento-item:nth-child(3) { transition-delay: 0.2s; }

.project-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 36px;
}

.hero-badges span {
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 500;
    backdrop-filter: blur(8px);
}

.trust-band,
.process {
    padding: 60px 5%;
    border-bottom: 1px solid var(--border-color);
}

.trust-band {
    background: linear-gradient(180deg, rgba(31, 122, 224, 0.04), transparent);
}

.trust-band-inner,
.process-grid,
.value-grid,
.contact-points {
    max-width: 1100px;
    margin: 0 auto;
}

.trust-band-inner,
.process-grid,
.value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.trust-item,
.process-card,
.value-card,
.contact-point {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    box-shadow: 0 18px 40px rgba(12, 18, 36, 0.04);
}

.trust-item,
.process-card,
.value-card {
    padding: 30px;
}

.trust-item strong,
.contact-point strong {
    display: block;
    color: var(--text-main);
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.trust-item p,
.process-card p,
.value-card p {
    font-size: 1rem;
}

.process-intro {
    margin-bottom: 60px;
}

.process-card {
    position: relative;
    overflow: hidden;
}

.process-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-bottom: 20px;
    background: var(--gradient-blue);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.process-card h3,
.value-card h3 {
    font-size: 2rem;
    margin-bottom: 14px;
}

.value-grid {
    margin-bottom: 40px;
}

.showreel-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #020617;
}

.contact-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.contact-point {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 26px;
    text-decoration: none;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-point span {
    color: var(--text-muted);
}

.contact-point:hover {
    transform: translateY(-4px);
    border-color: var(--electric-blue);
    box-shadow: 0 20px 35px rgba(31, 122, 224, 0.12);
}

.form-note {
    font-size: 0.95rem;
    text-align: left;
    margin-top: 4px;
}

.footer-col a {
    color: inherit;
    text-decoration: none;
}

.footer-col a:hover {
    color: var(--electric-blue);
}

@media (max-width: 1024px) {
    .trust-band-inner,
    .process-grid,
    .value-grid,
    .contact-points {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .hero h1 {
        font-size: 4.5rem;
    }

    .section-title {
        font-size: 2.8rem;
    }
}

@media (max-width: 768px) {
    .navbar {
        padding: 14px 4%;
    }

    .nav-links {
        display: none;
    }

    .nav-actions {
        gap: 12px;
    }

    .btn-primary,
    .btn-secondary {
        min-width: 0;
    }

    .hero {
        background-attachment: scroll;
    }

    .hero h1 {
        font-size: 3.5rem;
    }

    .hero p {
        font-size: 1.05rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .section-title {
        font-size: 2.3rem;
    }

    .services,
    .projects,
    .video-section,
    .contact,
    .process {
        padding: 110px 5%;
    }

    .trust-band {
        padding: 40px 5%;
    }

    .video-container {
        border-radius: 24px;
    }
}

@media (max-width: 600px) {
    .logo-image {
        height: 42px;
    }

    .hero-badges {
        justify-content: flex-start;
    }

    .hero-badges span {
        width: 100%;
        text-align: center;
    }

    .trust-item,
    .process-card,
    .value-card,
    .contact-point {
        border-radius: 22px;
    }
}