/* ---------- Tipus i tokens ---------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root{
  --bg:#0A0A0A;          /* negre base */
  --bg-2:#0F0F10;        /* gris-negre per alternar seccions */
  --panel:#111215;       /* targetes/panells */
  --panel-2:#141519;
  --border:#23252d;      /* línia subtil */
  --ink:#F5F7FA;         /* text principal */
  --muted:#F5F7FA;       /* text secundari */
  --primary:#5C8CFF;     /* accent blau elèctric */
  --primary-2:#2C6BFF;
  --glow: 0 0 0 transparent, 0 10px 30px rgba(44,107,255,.25);
  --radius:14px;
}

/* Global */
html,body{
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", sans-serif;
}

/* Enllaços i botons */
a{ color: var(--primary); }
a:hover{ color: var(--primary-2); }

.button.is-primary{
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  border: 1px solid rgba(92,140,255,.35);
  color: white;
  border-radius: 999px;
  box-shadow: var(--glow);
}
.button.is-primary:hover{ filter: brightness(1.05); }

/* Navbar fosca/translúcida */
.navbar{
  background: rgba(10,10,10,.65);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid rgba(35,37,45,.6);
}
.navbar .navbar-item,
.navbar .navbar-link{
  color: var(--ink);
}
.navbar .navbar-item:hover,
.navbar .navbar-link:hover{
  background: transparent;
  color: #fff;
}
.navbar .navbar-dropdown{
  background: var(--panel);
  border: 1px solid var(--border);
}
.navbar .navbar-dropdown .navbar-item{
  color: var(--ink);
}
.navbar .navbar-dropdown .navbar-item:hover{
  background: var(--panel-2);
}
.navbar-burger span{ background-color: var(--ink) !important; }

/* Hero negre amb textura suau (grid/llums) */
.hero.is-landing{
  position: relative;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(44,107,255,.15), transparent 60%),
              radial-gradient(800px 400px at 100% 0%, rgba(92,140,255,.12), transparent 50%),
              linear-gradient(180deg, #0A0A0A 0%, #0C0C0E 100%);
  padding-top: 6.5rem;
  padding-bottom: 5rem;
  overflow: hidden;
}
.hero.is-landing::before{
  /* subtil quadrícula */
  content:"";
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events:none;
}
.hero .eyebrow{
  display:inline-block;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.8rem;
  color: var(--ink);
  background: rgba(92,140,255,.12);
  border: 1px solid rgba(92,140,255,.25);
  padding:.35rem .6rem;
  border-radius:999px;
  margin-bottom:1rem;
}
.hero .title{
  font-size: clamp(2rem, 4vw, 3rem);
  line-height:1.1;
  font-weight:800;
  color:#fff;
}
.hero .subtitle{
  font-size:1.125rem;
  color: var(--muted);
}

/* Seccions fosques */
.section.is-clean{ background: var(--bg); padding: 4rem 0; }
.section.is-soft{  background: var(--bg-2); padding: 4rem 0; }

/* Targetes fosques “glass” */
.card.soft{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.card.soft .icon-wrap{
  width:44px;height:44px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background: rgba(92,140,255,.12); color: var(--primary);
  margin-bottom:.75rem;
}

/* Logos de confiança en blanc */
.trust-logos{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1.25rem;align-items:center;opacity:.9;
}
.trust-logos img{
  max-height:34px;width:auto;
  filter: brightness(0) invert(1) grayscale(100%);
  opacity:.9;
}
@media(max-width:768px){
  .trust-logos{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Imatges amb cantó arrodonit i lleu outline per fons negre */
.image.rounded img{
  border-radius:16px;
  outline:1px solid rgba(255,255,255,.06);
}

/* Footer fosc */
.footer{
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}
.footer, .footer a{ color: var(--muted); }
.footer a:hover{ color: var(--ink); }

/* Utilitats */
.kicker{ color: var(--muted); font-weight:600; }

/* Accordion/FAQ (si el uses) */
details.card[open] summary .fa-chevron-down{ transform: rotate(180deg); transition: transform .2s; }
details.card summary .fa-chevron-down{ transition: transform .2s; }
details.card summary::-webkit-details-marker{ display:none; }

/* Color dels strong */
strong, b { color: var(--ink) !important; }

/* ====== Secció "Els nostres serveis" més clara ====== */
.section .title {
  color: #F2F5FC !important;      /* H2 clar (quasi blanc) */
}
.section .subtitle {
  color: #D0D7E6 !important;      /* paràgraf sota el títol més llegible */
}

/* ====== Targetes més clares i amb més relleu ====== */
.card.soft {
  /* fons una mica més clar que abans */
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  border-color: #2b2f3a !important;     /* contorn una mica més visible */
  box-shadow: 0 12px 34px rgba(0,0,0,.42) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card.soft:hover {
  transform: translateY(-2px);
  border-color: #3a4150 !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.5) !important;
}

/* Tipografia dins la targeta: més clara */
.card.soft .title { color: #F5F7FA !important; }
.card.soft .subtitle,
.card.soft p,
.card.soft .content { color: #D6DBE6 !important; }

/* Icon bubble una mica més viva */
.card.soft .icon-wrap {
  background: rgba(92,140,255,.18) !important;
  color: #7EA3FF !important;
}

/* Separadors una mica més visibles en dark */
.section.is-clean hr, .section.is-soft hr, hr, .content hr {
  background-color: #2d3340 !important;
  height: 1px;
}

/* ------- Accordion llista dark ------- */
.acc-list{ border-top: 1px solid #2d3340; }
.acc-item{ border-bottom: 1px solid #2d3340; }

.acc-toggle{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  background: transparent; border: 0;
  padding: 1.25rem 0; cursor: pointer;
}

.acc-title{
  font-size: 1.25rem;        /* ~20px */
  font-weight: 600;
  color: #F2F5FC;            /* tancat: clar */
  text-align: left;
  transition: color .18s ease;
}

.acc-icon{
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #3a4150; border-radius: 999px;
  color: #E7ECF7;            /* tancat: clar suau */
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.acc-item:hover .acc-title{ color: #FFFFFF; }
.acc-item:hover .acc-icon{ border-color: #4a5266; }

.acc-body{
  padding: 0 0 1.1rem 0;
  color: #C9D1DF;            /* text del detall una mica més suau */
  max-width: 70ch;
}

/* --- Estat obert --- */
.acc-item.is-open .acc-title{ color: #BFD0FF; }    /* canvia el títol */
.acc-item.is-open .acc-icon{
  background: rgba(92,140,255,.12);
  border-color:#5C8CFF;
  color:#BFD0FF;                                   /* color del signe quan obert */
}

/* ==== FIX NAVBAR: Selector d’idioma (desktop) ==== */
@media (min-width: 1024px) {
  /* Text del botó "Idioma" per defecte */
  .navbar .navbar-link {
    color: var(--ink) !important;
    background: transparent !important;
  }

  /* Quan el dropdown és obert/hover, evita el fons blanc de Bulma i pinta text blau */
  .navbar .has-dropdown:hover > .navbar-link,
  .navbar .has-dropdown.is-active > .navbar-link,
  .navbar .navbar-link.is-active,
  .navbar .navbar-link:focus,
  .navbar .navbar-link:hover {
    background: var(--panel) !important;     /* fons fosc coherent amb el teu tema */
    color: var(--primary) !important;        /* blau del tema per al text */
    border-color: transparent !important;
  }

  /* Color de la fletxa del .navbar-link (Bulma usa border-color) */
  .navbar .navbar-link:not(.is-arrowless)::after {
    border-color: var(--primary) !important;
  }

  /* Dropdown: colors base i hover dels ítems */
  .navbar .navbar-dropdown {
    background: var(--panel) !important;
    border: 1px solid var(--border) !important;
  }

  .navbar .navbar-dropdown .navbar-item {
    color: var(--ink) !important;
    background: transparent !important;
  }

  .navbar .navbar-dropdown .navbar-item:hover,
  .navbar .navbar-dropdown .navbar-item:focus,
  .navbar .navbar-dropdown .navbar-item.is-active {
    background: var(--panel-2) !important;   /* fons una mica més fosc en hover */
    color: var(--primary) !important;        /* text blau en hover, com demanes */
  }
}
/* Per a tots els items de la navbar  */

.navbar .navbar-item:hover,
.navbar .navbar-item:focus {
  color: var(--primary) !important;
  background: transparent !important;
}


/* ==== NAVBAR en mòbil: fons fosc + text llegible ==== */
@media (max-width: 1023px) {
  /* Quan obres el menú hamburger, Bulma posa fons clar per defecte */
  .navbar-menu,
  .navbar-menu.is-active {
    background: var(--panel) !important;      /* fosc coherent amb el tema */
    border-top: 1px solid var(--border);
  }

  /* Items del menú (Serveis, Mètode, Contacte…) */
  .navbar .navbar-item,
  .navbar .navbar-link {
    color: var(--ink) !important;             /* text clar */
    background: transparent !important;
  }

  /* Hover/press dels items */
  .navbar .navbar-item:hover,
  .navbar .navbar-item:focus,
  .navbar .navbar-link:hover,
  .navbar .navbar-link:focus {
    background: var(--panel-2) !important;    /* fons una mica més fosc */
    color: var(--primary) !important;         /* text blau del tema */
  }

  /* Dropdown d’idioma en mòbil (per si s’obre dins del menú) */
  .navbar .navbar-dropdown {
    background: var(--panel) !important;
    border: 1px solid var(--border) !important;
  }
  .navbar .navbar-dropdown .navbar-item {
    color: var(--ink) !important;
    background: transparent !important;
  }
  .navbar .navbar-dropdown .navbar-item:hover,
  .navbar .navbar-dropdown .navbar-item:focus,
  .navbar .navbar-dropdown .navbar-item.is-active {
    background: var(--panel-2) !important;
    color: var(--primary) !important;
  }

  /* Fletxa del .navbar-link (color blau, com a desktop) */
  .navbar .navbar-link:not(.is-arrowless)::after {
    border-color: var(--primary) !important;
  }
}

/* ==== FORMULARIS: inputs i labels en dark perquè no quedin fosc sobre fosc ==== */
.label {
  color: var(--ink) !important;
}

/* Inputs, textarea i select amb fons fosc i text clar */
.input,
.textarea,
.select select {
  background-color: #15171c !important;
  border-color: #2b2f3a !important;
  color: #eef2f7 !important;
}

/* Placeholder més suau (que es vegi però no cridi) */
.input::placeholder,
.textarea::placeholder {
  color: #9aa3b2 !important;
}

/* Estat focus: ressalt blau i outline suau */
.input:focus,
.textarea:focus,
.select select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 0.12rem rgba(92,140,255,.25) !important;
}

/* Icones dins inputs (si en fas servir) */
.control.has-icons-left .icon,
.control.has-icons-right .icon {
  color: #9aa3b2 !important;
}

/* Text d’ajuda/notes sota camps */
.help {
  color: #C9D1DF !important;
}


/* Títols en blau */
.section .title.has-text-primary {
  color: var(--primary) !important;
}


/* Text del checkbox en blanc */
.checkbox label,
label.checkbox {
  color: #fff !important;
}

/* L’enllaç dins del checkbox en blau corporatiu */
.checkbox label a,
label.checkbox a {
  color: var(--primary) !important;
}
.checkbox label a:hover,
label.checkbox a:hover {
  color: var(--primary-2) !important;
}