/* ============================================================
   public.css — Canvi 358: la web pública v3 (Producte · Casos d'ús · Preus).

   Només el que la v3 afegeix a estil.css: el menú amb desplegables (només
   CSS), el submenú de pestanyes, les quatre vigilàncies, el fil dels cinc
   passos (els números 04 i 05 ja no són negres), les peces del portal que
   il·lustren Producte, les targetes de plans i la comparativa de Preus, la
   taula de la feina humana i les preguntes freqüents. Tot amb les variables
   de color d'estil.css (tema clar i fosc).
   Recordatori: en tocar aquest fitxer, pujar el ?v= de base.html.
   ============================================================ */

/* ---- Menú: desplegables sense JavaScript ---- */
.nav-grup { position: relative; display: flex; align-items: center; }
.nav-grup .nav-enllac { display: inline-flex; align-items: center; gap: 6px; }
.nav-fletxa { transition: transform .15s; }
.nav-grup:hover .nav-fletxa, .nav-grup:focus-within .nav-fletxa { transform: rotate(180deg); }
.nav-desplegable {
  display: none; position: absolute; top: calc(100% + 10px); left: -14px; z-index: 120;
  min-width: 300px; padding: 8px; border-radius: 14px;
  background: var(--fons-targeta); border: 1px solid var(--vora);
  box-shadow: 0 18px 48px rgba(13,27,46,.14);
}
.nav-desplegable::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-grup:hover .nav-desplegable, .nav-grup:focus-within .nav-desplegable { display: block; }
.navegacio .nav-desplegable a {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px;
  font-size: 0.9rem; font-weight: 600; color: var(--text-fort);
}
.navegacio .nav-desplegable a span { font-size: 0.8rem; font-weight: 500; color: var(--text-suau); }
.navegacio .nav-desplegable a:hover { background: var(--fons-alt); }
.navegacio .nav-desplegable a::after { display: none; }
@media (max-width: 760px) {
  .nav-desplegable { display: none !important; }
  .nav-fletxa { display: none; }
}

/* ---- Submenú de pestanyes (Producte · …, Casos d'ús · …) ---- */
.submenu { background: var(--fons-alt); border-bottom: 1px solid var(--vora); }
.submenu .contenidor { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.submenu .submenu-etq { color: var(--text-mut); margin-right: 8px; }
.submenu a {
  padding: 9px 14px; border-radius: 10px; font-weight: 700; font-size: 0.9rem;
  color: var(--text-suau); text-decoration: none; border: 1px solid transparent;
}
.submenu a:hover { color: var(--text-fort); }
.submenu a.actiu { background: var(--fons-targeta); color: var(--cta); border-color: var(--vora-fosca); }

/* ---- Les quatre vigilàncies ---- */
.vig-graella { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.vig-targeta { display: flex; flex-direction: column; gap: 12px; }
.vig-targeta .vig-barra { height: 4px; border-radius: 6px 6px 0 0; margin: -26px -26px 14px; }
.vig-targeta .vig-icona { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.vig-targeta h3 { margin: 0; font-size: 1.15rem; }
.vig-targeta p { font-size: 0.92rem; margin: 0; }
.vig-targeta p strong { color: var(--text-fort); }
.c-fil { color: var(--rosa); } .f-fil { background: var(--rosa); } .ff-fil { background: rgba(232,76,138,.12); }
.c-dom { color: var(--blau); } .f-dom { background: var(--blau); } .ff-dom { background: rgba(22,104,176,.12); }
.c-cor { color: var(--cian); } .f-cor { background: var(--cian); } .ff-cor { background: rgba(25,176,196,.14); }
.c-web { color: #B07B00; } .f-web { background: var(--groc); } .ff-web { background: rgba(245,197,24,.18); }
[data-tema="fosc"] .c-web { color: var(--groc); }
.vig-compacta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.vig-compacta .targeta { padding: 20px; }
.vig-compacta h3 { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin: 0 0 6px; }
.vig-compacta p { font-size: 0.88rem; margin: 0; }
.punt-vig { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.enllac-centrat { text-align: center; margin-top: 28px; }
.enllac-centrat a { font-weight: 700; color: var(--cta); text-decoration: none; }
.enllac-centrat a:hover { color: var(--rosa); }

/* ---- Casos d'ús (portada) i targetes-enllaç ---- */
.graella-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
a.targeta-cas { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--text); }
a.targeta-cas .vig-barra { height: 4px; border-radius: 6px 6px 0 0; margin: -26px -26px 14px; }
a.targeta-cas h3 { margin: 0; color: var(--text-fort); }
a.targeta-cas p { font-size: 0.92rem; margin: 0; }
a.targeta-cas .cas-cta { margin-top: auto; font-weight: 700; color: var(--cta); }
a.targeta-cas:hover { transform: translateY(-3px); border-color: var(--cian); }

/* ---- Com treballem: el fil de colors i els cinc números ---- */
.passos-fil { position: relative; }
.passos-fil::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 34px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--rosa) 0%, var(--cian) 25%, var(--groc) 50%, var(--blau) 75%, var(--blau-fosc) 100%);
}
.passos-fil .pas { background: transparent; border: 0; padding: 0; box-shadow: none; }
.passos-fil .pas::before { display: none; }
.passos-fil .pas .pas-num { position: relative; display: inline-block; background: var(--fons-alt); padding: 0 8px; margin-bottom: 14px; }
.seccio:not(.seccio-alterna) .passos-fil .pas .pas-num { background: var(--fons); }
.passos-fil .pas .pas-cos { background: var(--fons-targeta); border: 1px solid var(--vora); border-radius: 16px; padding: 22px; }
.passos-fil .pas:nth-child(1) .pas-num { color: var(--rosa); }
.passos-fil .pas:nth-child(2) .pas-num { color: var(--cian); }
.passos-fil .pas:nth-child(3) .pas-num { color: #B07B00; }
[data-tema="fosc"] .passos-fil .pas:nth-child(3) .pas-num { color: var(--groc); }
.passos-fil .pas:nth-child(4) .pas-num { color: var(--blau); }
.passos-fil .pas:nth-child(5) .pas-num { color: var(--blau-fosc); }
[data-tema="fosc"] .passos-fil .pas:nth-child(5) .pas-num { color: #7FB3E6; }
@media (max-width: 1100px) { .passos-fil::before { display: none; } } /* a tauleta .passos-5 ja va a dues files: el fil no té sentit */

/* ---- Peces del portal (il·lustracions a Producte) ---- */
.vig-fila { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.vig-fila.invertida .peca { order: -1; }
.vig-fila h2 { font-size: 1.9rem; line-height: 1.15; margin: 10px 0 6px; }
.vig-fila .vig-k { display: flex; align-items: center; gap: 8px; }
.vig-fila p { margin: 0 0 10px; }
.vig-fila p strong { color: var(--text-fort); }
.peca {
  background: var(--fons-targeta); border: 1px solid var(--vora-fosca); border-radius: 16px; padding: 18px;
  box-shadow: 0 18px 50px rgba(13,27,46,.08); font-size: 0.86rem;
}
.peca-cap { display: flex; align-items: center; gap: 8px; color: var(--text-mut); font-size: 0.72rem; margin-bottom: 12px; }
.peca-cap .dreta { margin-left: auto; }
.peca-titol { font-weight: 800; color: var(--text-fort); font-size: 0.98rem; }
.peca-fila { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--vora); }
.peca-fila:first-of-type { border-top: 0; }
.peca-fila small { color: var(--text-mut); display: block; }
.peca-fila strong { color: var(--text-fort); }
.peca-botons { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.peca-boto { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; border: 1px solid var(--vora-fosca); color: var(--cta); }
.peca-boto.ple { background: var(--cta); color: var(--cta-text); border-color: var(--cta); }
.peca-verd { border: 1px solid rgba(47,158,107,.35); background: rgba(47,158,107,.08); border-radius: 10px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; }
.peca-estat { font-weight: 700; align-self: center; white-space: nowrap; }
.e-be { color: var(--verd); } .e-mig { color: #B07B00; } [data-tema="fosc"] .e-mig { color: var(--groc); }
.peca-pas { margin-top: 12px; border: 1px solid var(--vora); border-radius: 10px; padding: 12px; }
.peca-codi { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; background: var(--fons-alt); border-radius: 6px; padding: 8px; margin-top: 6px; }
.pill { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--vora-fosca); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.pill-rosa { color: var(--rosa); border-color: var(--rosa); }
.pill-ple { background: var(--rosa); color: #fff; border-color: var(--rosa); }
.pill-groc { color: #B07B00; border-color: var(--groc); } [data-tema="fosc"] .pill-groc { color: var(--groc); }
@media (max-width: 860px) { .vig-fila { grid-template-columns: 1fr; } .vig-fila.invertida .peca { order: 0; } }

/* ---- Els plans (portada i Preus) ---- */
.plans-graella { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.pla-targeta { display: flex; flex-direction: column; gap: 14px; position: relative; overflow: visible; } /* el badge «El més triat» surt per dalt */
.pla-targeta h3 { margin: 0; font-size: 1.25rem; }
.pla-targeta .pla-sub { margin: 0; font-size: 0.92rem; }
.pla-preu { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pla-preu .gran { font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; color: var(--text-fort); }
.pla-preu .gran.rosa { color: var(--rosa); }
.pla-preu .tatxat { color: var(--text-mut); text-decoration: line-through; }
.pla-preu .unitat { color: var(--text-suau); font-size: 0.9rem; }
.pla-nota { font-size: 0.78rem; color: var(--text-mut); margin: -6px 0 0; }
.pla-targeta .boto-cta, .pla-targeta .boto-secundari { justify-content: center; }
.pla-targeta .pla-botons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.pla-targeta .pla-botons a { flex: 1 1 auto; }
.pla-destacada { border: 2px solid var(--rosa); box-shadow: 0 16px 48px rgba(232,76,138,.12); }
.pla-badge { position: absolute; top: -13px; left: 26px; }
.pla-fosca { background: var(--text); color: #fff; border-color: var(--text); }
[data-tema="fosc"] .pla-fosca { background: #0E3A6B; border-color: #0E3A6B; }
.pla-fosca h3, .pla-fosca .pla-preu .gran { color: #fff; }
.pla-fosca .pla-sub, .pla-fosca .pla-nota, .pla-fosca .pla-preu .unitat { color: rgba(255,255,255,.75); }
.pla-fosca .pla-llista li { color: #fff; }
.pla-fosca .boto-secundari { background: #fff; color: #0E3A6B !important; border-color: #fff; } /* !important: estil.css posa color: var(--text-fort) !important, que en fosc és blanc */
.pla-llista { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pla-llista li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: var(--text); line-height: 1.45; }
.pla-llista li::before {
  content: "✓"; flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 800; margin-top: 2px; background: rgba(47,158,107,.15); color: var(--verd);
}
.pla-destacada .pla-llista li::before { background: rgba(232,76,138,.15); color: var(--rosa); }
.pla-fosca .pla-llista li::before { background: rgba(245,197,24,.2); color: var(--groc); }
.pla-cap { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
@media (max-width: 860px) { .plans-graella, .vig-graella, .vig-compacta, .graella-4 { grid-template-columns: 1fr; } }

/* ---- La comparativa de Preus ---- */
.taula-marc { background: var(--fons-targeta); border: 1px solid var(--vora); border-radius: 18px; padding: 8px 20px 20px; overflow-x: auto; }
.comparativa { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 640px; }
.comparativa th { text-align: left; font-weight: 800; padding: 14px 12px; border-bottom: 2px solid var(--vora-fosca); color: var(--text-fort); }
.comparativa th.c, .comparativa td.c { text-align: center; }
.comparativa th.radar { color: var(--rosa); }
.comparativa td { padding: 12px; border-bottom: 1px solid var(--vora); vertical-align: top; color: var(--text); }
.comparativa tr.grup td { background: var(--fons-alt); font-weight: 800; color: var(--text-fort); }
.comparativa td .ok { color: var(--verd); font-weight: 800; }
.comparativa td .no { color: var(--text-mut); }
.comparativa td small { display: block; color: var(--text-suau); }
/* Al mòbil la primera columna queda fixa i la resta es desplaça. */
.comparativa th:first-child, .comparativa td:first-child { position: sticky; left: 0; background: var(--fons-targeta); z-index: 1; }
.comparativa tr.grup td:first-child { background: var(--fons-alt); }
@media (max-width: 640px) { .comparativa th:first-child { width: auto; min-width: 180px; } .taula-marc { padding-left: 0; padding-right: 0; } }

/* ---- La feina humana ---- */
.feina-graella { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; }
.feina-graella h2 { text-align: left; }
.feina-taula { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.feina-taula td { padding: 12px; border-bottom: 1px solid var(--vora); vertical-align: top; }
.feina-taula td.preu { text-align: right; white-space: nowrap; font-weight: 800; color: var(--text-fort); }
.feina-taula strong { color: var(--text-fort); }
.feina-taula small { display: block; color: var(--text-suau); }
.feina-nota { font-size: 0.78rem; color: var(--text-mut); padding: 10px 12px 0; margin: 0; }
@media (max-width: 860px) { .feina-graella { grid-template-columns: 1fr; } }

/* ---- Preguntes freqüents (details, sense JavaScript) ---- */
.faq { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq details { border: 1px solid var(--vora); border-radius: 12px; padding: 14px 18px; background: var(--fons-targeta); }
.faq summary { font-weight: 700; cursor: pointer; color: var(--text-fort); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: 'JetBrains Mono', monospace; color: var(--text-mut); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 10px 0 0; font-size: 0.92rem; }

/* ---- Casos d'ús ---- */
.setmana { display: flex; flex-direction: column; gap: 14px; }
.setmana .dia { display: flex; gap: 12px; align-items: flex-start; font-size: 0.92rem; margin: 0; }
.setmana .dia .punt-vig { margin-top: 7px; }
.graella-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.graella-2.pla-dos { grid-template-columns: .8fr 1.2fr; align-items: stretch; }
.graella-3-cas .targeta h3 { font-size: 1.05rem; }
.targeta.suau { background: transparent; }
@media (max-width: 860px) { .graella-2, .graella-2.pla-dos { grid-template-columns: 1fr; } }

/* ---- Bandes de segon pla (Formació · IA privada) i el bàner «en construcció» ---- */
.banda-dues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.banda-dues .targeta { background: var(--fons-alt); border: 0; }
.banda-dues .targeta .boto-secundari { align-self: flex-start; margin-top: 10px; }
.banda-dues .targeta { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 860px) { .banda-dues { grid-template-columns: 1fr; } }
.avis-construccio {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px;
  background: rgba(245,197,24,.16); border: 1px solid rgba(245,197,24,.6); color: var(--text-fort); font-weight: 600; font-size: 0.9rem;
}
.linies { display: flex; flex-direction: column; gap: 12px; }
.linies p { margin: 0; }
.linies p strong { color: var(--text-fort); }
.hero-dues { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .hero-dues { grid-template-columns: 1fr; } }
.hero .botons { display: flex; gap: 12px; flex-wrap: wrap; }
.nota-petita { font-size: 0.82rem; color: var(--text-mut); margin: 8px 0 0; }
.k-color { font-weight: 700; }
/* Les etiquetes de secció en mono + color de vigilància: en majúscules, com .etiqueta-seccio. */
.mono.c-fil, .mono.c-dom, .mono.c-cor, .mono.c-web { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }

/* ---- La quarta etiqueta flotant del hero (Web) i el repartiment de les quatre ---- */
.hero-visual .b-rosa { top: 30px; left: -10px; }
.hero-visual .b-cian { top: 42%; right: -20px; }
.hero-visual .b-groc { bottom: 24px; right: 10px; left: auto; }
.hero-visual .b-blau { bottom: 90px; left: -4px; color: var(--blau); animation-delay: -3s; }
.hero-visual .b-blau .punt { background: var(--blau); }
.targeta .vig-barra, .targeta.vig-targeta .vig-barra { margin: -32px -28px 16px; }
a.targeta-cas .vig-barra { margin: -32px -28px 16px; }