/* Byteweb · portada (diseño v3, Castell). Solo se carga en la portada. */
.portada { background: var(--pissarra); }
main svg { max-width: 100%; display: block; }

/* Móvil y texto ampliado: las rejillas de una columna nunca son más anchas que la pantalla
   (sin esto, una palabra o un bloque largo ensancha la columna y el contenido se sale por la derecha). */
.serveis, .plans, .passos, .opinions, .comu ul, .contacte-graella, .zona-graella, .dades dl { grid-template-columns: minmax(0, 1fr); }
.servei, .pla, .comu li > div, .opinio, .projecte-cos, .tutorial a, .pont, .camp, .dades dd { min-width: 0; }
.hero h2 { font-size: clamp(2.25rem, 1.4rem + 4vw, 4.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variation-settings: "wdth" 88; }

/* ===== Hero ===== */
.hero { position: relative; background: var(--pissarra); color: var(--calc); padding: var(--e-4) 0 calc(var(--e-12) + 20px); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: var(--gra); opacity: .09; pointer-events: none; mix-blend-mode: overlay; }
.hero::after { content: ""; position: absolute; width: 60vmax; height: 60vmax; right: -20vmax; top: -25vmax; background: radial-gradient(closest-side, rgba(238,129,38,.12), transparent); pointer-events: none; }
.hero .contenidor { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
h1.torre { color: var(--calc); font-weight: 750; line-height: .9; letter-spacing: -0.025em; text-align: center; }
/* En móvil cada piso se ajusta al ancho de pantalla (ancho medido de cada línea: 4,22 / 5,45 / 5,81 em) y, si aun así no cabe (texto ampliado en el sistema), parte la línea en vez de desbordar. */
.h1-pis { display: block; font-variation-settings: "wdth" var(--w, 100); }
@media (min-width: 768px) { .h1-pis { white-space: nowrap; } }
.h1-pis:nth-child(1) { --w: 75; font-size: min(clamp(2.6rem, 1.5rem + 5vw, 5rem), calc((100vw - 2 * var(--gutter)) / 4.5)); }
.h1-pis:nth-child(2) { --w: 85; font-size: min(clamp(3rem, 1.7rem + 6vw, 6rem), calc((100vw - 2 * var(--gutter)) / 5.7)); }
.h1-pis:nth-child(3) { --w: 100; font-size: min(clamp(3.4rem, 1.9rem + 7vw, 7rem), calc((100vw - 2 * var(--gutter)) / 6.1)); color: var(--taronja); }
.anima-torre .h1-pis { animation: assenta 700ms var(--ease-out) both; }
.anima-torre .h1-pis:nth-child(3) { animation-delay: 0ms; }
.anima-torre .h1-pis:nth-child(2) { animation-delay: 120ms; }
.anima-torre .h1-pis:nth-child(1) { animation-delay: 240ms; }
@keyframes assenta { from { transform: translateY(.45em); } to { transform: none; } }
.hero-text { font-size: 1.125rem; color: #E4E6E1; }
.preu-hero { display: inline-grid; max-width: 100%; background: var(--taronja); color: var(--pissarra); border-radius: var(--radi); padding: 10px 18px; line-height: 1.25; margin-bottom: var(--e-2); }
.preu-hero strong { font: 750 1.6rem/1.1 var(--f-titol); }
.preu-hero span { font-weight: 700; }
.ca-linia { margin: var(--e-2) 0 0; font-size: .9375rem; color: #D6D9D4; }
.torre-webs { width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.torre-webs .finestra { fill: var(--pissarra-2); stroke: #6E7C86; stroke-width: 1.5; }
.torre-webs .barra { fill: #3A4B57; } .torre-webs .punt { fill: #6E7C86; }
.torre-webs .linia { fill: #8D99A1; } .torre-webs .linia-clara { fill: #C9CFD3; }
.torre-webs .camp-svg { fill: #3A4B57; stroke: #8D99A1; stroke-width: 1; }
.torre-webs .marca { fill: var(--taronja); }
.torre-webs .marca-traç { stroke: var(--taronja); stroke-width: 3; stroke-linecap: round; fill: none; }
.torre-webs .terra { fill: #3A4B57; }
.anima-torre .torre-webs .fila { animation: puja 600ms var(--ease-out) both; }
.anima-torre .torre-webs .fila-1 { animation-delay: 150ms; } .anima-torre .torre-webs .fila-2 { animation-delay: 300ms; }
.anima-torre .torre-webs .fila-3 { animation-delay: 450ms; } .anima-torre .torre-webs .fila-4 { animation-delay: 600ms; }
.anima-torre .torre-webs .fila-5 { animation-delay: 800ms; }
@keyframes puja { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.amb-moviment .torre-webs .bombeta { transform-box: fill-box; transform-origin: 50% 100%; animation: brilla 3.2s ease-in-out 1.6s infinite; }
@keyframes brilla { 0%, 100% { transform: none; } 50% { transform: translateY(-5px); } }
.amb-moviment .torre-webs .rajos { animation: rajos 3.2s ease-in-out 1.6s infinite; }
@keyframes rajos { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.xifres { list-style: none; margin: var(--e-4) 0 0; padding: var(--e-3) 0 0; border-top: 1px solid rgba(244,244,241,.18); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3) var(--e-2); }
.xifres li { display: grid; }
.xifres strong { font: 750 clamp(2rem, 1.4rem + 2.6vw, 3.25rem)/1 var(--f-titol); color: var(--calc); font-variant-numeric: tabular-nums; }
.xifres span { font-size: .9375rem; color: #D6D9D4; }
.xifres a { color: var(--taronja); font-weight: 700; }
@media (min-width: 768px) {
  .hero { padding: var(--e-9) 0 calc(var(--e-12) + 40px); }
  .hero .contenidor { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; column-gap: var(--e-6); }
  h1.torre { text-align: left; grid-column: 1 / -1; }
  .h1-pis:nth-child(1) { padding-left: 1.4em; }
  .h1-pis:nth-child(2) { padding-left: .7em; }
  .torre-webs { max-width: none; }
  .xifres { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .hero .contenidor { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  h1.torre { grid-column: 1; }
  .h1-pis:nth-child(1) { font-size: 4.2rem; } .h1-pis:nth-child(2) { font-size: 5rem; } .h1-pis:nth-child(3) { font-size: 5.8rem; }
  .hero-cos { grid-column: 1; }
  .torre-webs { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
  .hero-text { font-size: 1.25rem; }
}


/* ===== Cinta en movimiento ===== */
.cinta { position: relative; z-index: 5; margin: calc(-1 * var(--e-9)) -4vw 0; transform: rotate(-2.2deg); background: var(--taronja); color: var(--pissarra); overflow: hidden; padding: 14px 0; box-shadow: 0 14px 30px -10px rgba(0,0,0,.35); }
.cinta-pista { display: flex; width: max-content; }
.cinta-grup { display: flex; align-items: center; gap: 1.5rem; padding-right: 1.5rem; margin: 0; list-style: none; }
.cinta-grup li { display: flex; align-items: center; gap: 1.5rem; font: 750 clamp(1.4rem, 1rem + 1.6vw, 2.25rem)/1 var(--f-titol); font-variation-settings: "wdth" 80; white-space: nowrap; }
.cinta-grup svg { width: 22px; height: 22px; flex: none; }
.amb-moviment .cinta-pista { animation: cinta 32s linear infinite; }
.cinta:hover .cinta-pista, .cinta:focus-within .cinta-pista { animation-play-state: paused; }
@keyframes cinta { to { transform: translateX(-50%); } }
.cinta + .panell { margin-top: calc(-1 * var(--rp) - 20px); padding-top: calc(var(--e-12) + var(--rp)); }


/* ===== Servicios (bento) ===== */
.serveis { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.servei { position: relative; isolation: isolate; overflow: hidden; background: var(--blanc); border: 1px solid rgba(30,42,50,.1); border-radius: 22px; padding: var(--e-3); display: flex; flex-direction: column; gap: var(--e-1); min-height: 220px; transition: color 300ms ease, transform 300ms var(--ease-out); }
.servei::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pissarra); transform: translateY(101%); transition: transform 450ms var(--ease-out); }
.servei .ico-servei { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--calc); color: var(--rovell); margin-bottom: var(--e-1); transition: transform 450ms var(--ease-out), background 300ms; }
.servei p { margin: 0; }
.servei a { font-weight: 700; margin-top: auto; padding-top: var(--e-2); color: var(--rovell); }
.servei a::after { content: ""; position: absolute; inset: 0; }
.servei a:focus-visible { outline: none; }
.servei:focus-within { outline: 3px solid var(--rovell); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .servei:hover { color: var(--calc); transform: translateY(-4px); }
  .servei:hover::before { transform: none; }
  .servei:hover h3 { color: var(--calc); }
  .servei:hover a { color: var(--taronja); }
  .servei:hover .ico-servei { background: var(--taronja); color: var(--pissarra); transform: rotate(-8deg) scale(1.08); }
}
.servei-gran { background: var(--pissarra); color: var(--calc); border: 0; }
.servei-gran h3 { color: var(--calc); }
.servei-gran a { color: var(--taronja); }
.servei-gran::before { background: var(--rovell-fosc); }
.servei-gran .ico-servei { background: var(--taronja); color: var(--pissarra); }
.servei-gran .mini-torre { position: absolute; right: -20px; bottom: -30px; width: 220px; opacity: .14; z-index: -1; pointer-events: none; }
@media (min-width: 768px) { .serveis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .servei-gran { grid-column: span 2; } .servei-gran h3 { font-size: 2rem; } }
@media (min-width: 1024px) {
  .serveis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); }
  .servei-gran { grid-column: span 2; grid-row: span 2; padding: var(--e-6); justify-content: flex-end; }
  .servei-gran h3 { font-size: 3rem; line-height: 1; }
  .servei-gran p { font-size: 1.25rem; max-width: 34ch; }
  .servei-gran .mini-torre { width: 340px; right: 30px; bottom: 40%; opacity: .12; }
}


/* ===== Precios ===== */
.plans { display: grid; gap: var(--e-3); list-style: none; margin: 0; padding: 0; align-items: stretch; }
.pla { position: relative; background: var(--calc); border-radius: 22px; padding: var(--e-4) var(--e-3) var(--e-3); display: flex; flex-direction: column; gap: var(--e-2); transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-out); }
.pla .pis-n { position: absolute; top: var(--e-3); right: var(--e-3); font: 700 .9375rem var(--f-text); color: var(--pedra); }
.pla-preu { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35rem; }
.pla-preu strong { font: 750 min(clamp(3rem, 2.4rem + 2.5vw, 4.5rem), 20vw)/1 var(--f-titol); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pla-preu span { font-weight: 700; color: var(--pedra); }
.pla ul { margin: 0; padding-left: 1.2em; }
.pla .boto { margin-top: auto; }
.pla:last-child { background: var(--pissarra); color: var(--calc); }
.pla:last-child h3 { color: var(--calc); }
.pla:last-child .pla-preu strong { color: var(--taronja); }
.pla:last-child .pla-preu span, .pla:last-child .pis-n { color: #D6D9D4; }
@media (hover: hover) and (pointer: fine) { .pla:hover { transform: translateY(-8px); box-shadow: 0 24px 50px -18px rgba(30,42,50,.45); } }
.nota-preus { margin-top: var(--e-4); font-size: 1.125rem; }
.nota-preus .petita { font-size: .9375rem; color: var(--pedra); margin-top: var(--e-1); }
.comu { background: var(--pissarra); color: var(--calc); border-radius: 22px; padding: var(--e-4) var(--e-3); margin-bottom: var(--e-3); position: relative; overflow: hidden; }
.comu h3 { color: var(--taronja); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); margin-bottom: var(--e-3); }
.comu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.comu li { display: flex; gap: 14px; align-items: flex-start; background: var(--pissarra-2); border-radius: 16px; padding: var(--e-2); transition: transform 300ms var(--ease-out), background 300ms; }
.comu li strong { display: block; color: var(--calc); font-size: 1.0625rem; line-height: 1.3; }
.comu li span { display: block; font-size: .9375rem; color: #D6D9D4; line-height: 1.45; margin-top: 2px; }
.comu-ico { width: 42px; height: 42px; flex: none; padding: 9px; border-radius: 12px; background: var(--taronja); color: var(--pissarra); }
@media (hover: hover) and (pointer: fine) { .comu li:hover { transform: translateY(-3px); background: #354856; } }
@media (min-width: 600px) { .comu ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .comu { padding: var(--e-6) var(--e-4); } .comu ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pla-inclou li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--taronja); transform: translateY(-1px); }
.pla-inclou { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pla-inclou li > * , .pla-inclou li { min-width: 0; overflow-wrap: anywhere; }
.pla-inclou li { display: flex; gap: 10px; align-items: baseline; }
.pla:last-child .pla-inclou li::before { background: var(--taronja); }
@media (min-width: 1024px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
}


/* ===== Cómo trabajamos (tarjetas que se apilan) ===== */
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.pas { position: sticky; top: calc(var(--cap) + 24px + var(--n) * 18px); background: var(--calc); color: var(--pissarra); border-radius: 22px; padding: var(--e-4); min-height: 240px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--e-3); align-items: start; box-shadow: 0 -10px 30px -10px rgba(0,0,0,.4); }
.pas:nth-child(2) { background: #FFFFFF; } .pas:nth-child(3) { background: var(--taronja); } .pas:nth-child(4) { background: var(--taronja-clar); }
.pas .num { font: 750 min(clamp(4rem, 3rem + 4vw, 7rem), 18vw)/.85 var(--f-titol); color: var(--rovell); font-variation-settings: "wdth" 75; }
.pas:nth-child(3) .num, .pas:nth-child(4) .num { color: var(--pissarra); }
.pas h3 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); margin-bottom: var(--e-1); color: var(--pissarra) !important; }
.pas p { margin: 0; font-size: 1.125rem; }
.pas { grid-template-columns: auto minmax(0, 1fr); }
.pas-il { grid-column: 1 / -1; width: 100%; max-width: 220px; height: auto; margin: var(--e-3) auto 0; }
.pas-il .il-c { fill: var(--pissarra); } .pas-il .il-b { fill: var(--pissarra-2); } .pas-il .il-t { fill: var(--taronja); }
.pas-il .il-l { fill: #8D99A1; } .pas-il .il-l2 { fill: #C9CFD3; } .pas-il .il-f { fill: var(--calc); } .pas-il .il-f2 { fill: var(--blanc); stroke: var(--pissarra); stroke-width: 4; }
.pas-il .il-s { stroke: var(--pissarra); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.pas-il .il-s2 { stroke: var(--rovell); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.pas:nth-child(3) .pas-il .il-t, .pas:nth-child(4) .pas-il .il-t { fill: var(--blanc); }
.pas:nth-child(3) .pas-il .il-s, .pas:nth-child(4) .pas-il .il-s { stroke: var(--rovell); }
@media (min-width: 768px) { .pas { grid-template-columns: auto minmax(0, 1fr) 220px; align-items: center; } .pas-il { grid-column: 3; margin: 0; } }
@media (hover: hover) and (pointer: fine) { .pas-il { transition: transform 500ms var(--ease-out); } .pas:hover .pas-il { transform: rotate(-3deg) scale(1.04); } }
@media (min-width: 1024px) { .pas { top: calc(96px + var(--n) * 22px); padding: var(--e-6); min-height: 300px; } .passos { gap: var(--e-6); } }


/* ===== Carriles horizontales ===== */
.carril { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--e-2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 4px var(--gutter) var(--e-3); margin: 0 calc(-1 * var(--gutter)); list-style: none; scrollbar-width: thin; scrollbar-color: var(--taronja) transparent; }
.carril > li { scroll-snap-align: start; }
@media (min-width: 768px) { .carril { grid-auto-columns: 46%; } }
@media (min-width: 1024px) { .carril { grid-auto-columns: calc((100% - 2 * var(--e-3)) / 3); gap: var(--e-3); } }
.pista { font-size: .9375rem; color: var(--pedra); margin-top: var(--e-1); }
@media (min-width: 1024px) { .pista { display: none; } }
.projecte a { display: flex; flex-direction: column; height: 100%; background: var(--blanc); border-radius: 22px; overflow: hidden; color: var(--pissarra); text-decoration: none; border: 1px solid rgba(30,42,50,.1); transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out); }
.projecte .navegador { display: flex; gap: 6px; padding: 10px 14px; background: var(--pissarra); }
.projecte .navegador i { width: 9px; height: 9px; border-radius: 50%; background: #6E7C86; }
.projecte .navegador i:first-child { background: var(--taronja); }
.projecte img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; transition: transform 700ms var(--ease-out); }
.projecte-cos { display: flex; flex-direction: column; gap: 4px; padding: var(--e-3); flex: 1; }
.pla-xip { align-self: flex-start; font-size: .8125rem; font-weight: 700; background: var(--calc); border-radius: 999px; padding: 4px 10px; margin-bottom: 6px; }
.projecte-nom { font: 650 1.375rem/1.2 var(--f-titol); }
.projecte-sec { font-size: .9375rem; color: var(--pedra); }
.projecte-txt { margin-top: 6px; }
.projecte-veure { margin-top: auto; padding-top: var(--e-2); display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--rovell); }
.projecte-veure .ico { width: 18px; height: 18px; transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .projecte a:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -20px rgba(30,42,50,.45); }
  .projecte a:hover img { transform: scale(1.04); }
  .projecte a:hover .projecte-veure .ico { transform: translateX(4px); }
}
.projecte a:focus-visible { outline: 3px solid var(--rovell); outline-offset: 3px; }


/* ===== Sectores ===== */
.sectors { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--pissarra); }
.sector { border-bottom: 2px solid var(--pissarra); }
.sector a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--e-2); padding: var(--e-3) 0; color: var(--pissarra); text-decoration: none; }
.sector .nom { overflow-wrap: anywhere; font: 750 min(clamp(2.5rem, 1.5rem + 5vw, 6rem), calc((100vw - 2 * var(--gutter) - 80px) / 5.2))/1 var(--f-titol); letter-spacing: -0.03em; font-variation-settings: "wdth" 80; transition: transform 500ms var(--ease-out), font-variation-settings 500ms var(--ease-out); }
.sector .desc { grid-column: 1; font-size: 1.125rem; max-width: 44ch; }
.sector .fletxa { grid-row: 1 / span 2; grid-column: 2; width: clamp(44px, 14vw, 64px); height: clamp(44px, 14vw, 64px); border-radius: 50%; background: var(--pissarra); color: var(--taronja); display: grid; place-items: center; transition: transform 400ms var(--ease-out); }
.sector .fletxa svg { width: 28px; height: 28px; }
@media (hover: hover) and (pointer: fine) {
  .sector a:hover .nom { transform: translateX(12px); font-variation-settings: "wdth" 100; }
  .sector a:hover .fletxa { transform: rotate(-45deg) scale(1.1); }
}


/* ===== Opiniones ===== */
.valoracio-gran { display: flex; align-items: flex-end; gap: var(--e-3); flex-wrap: wrap; margin-bottom: var(--e-4); }
.valoracio-gran strong { font: 750 clamp(6rem, 4rem + 10vw, 12rem)/.8 var(--f-titol); color: var(--taronja); letter-spacing: -0.04em; }
.estrelles { display: flex; gap: 6px; margin-bottom: var(--e-1); }
.estrelles svg { width: 28px; height: 28px; fill: var(--taronja); }
.amb-moviment .estrelles svg { animation: estrella 600ms var(--ease-out) both; animation-delay: calc(var(--i) * 90ms + 200ms); animation-play-state: paused; }
.amb-moviment .vist .estrelles svg, .amb-moviment .estrelles.vist svg { animation-play-state: running; }
@keyframes estrella { from { transform: scale(.4) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.opinions { display: grid; gap: var(--e-3); list-style: none; margin: 0 0 var(--e-4); padding: 0; }
@media (min-width: 768px) { .opinions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.opinio { margin: 0; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-3); background: var(--pissarra-2); border-radius: 22px; padding: var(--e-3); position: relative; }
.opinio::before { content: "“"; position: absolute; top: -18px; left: 20px; font: 750 5rem/1 var(--f-titol); color: var(--taronja); }
.opinio blockquote { margin: 0; }
.opinio blockquote p { margin: 0; font: 600 1.25rem/1.4 var(--f-titol); color: var(--calc); }
.opinio figcaption { display: grid; gap: 2px; }
.opinio figcaption strong { color: var(--calc); }
.opinio figcaption span { font-size: .9375rem; color: #D6D9D4; }
@media (hover: hover) and (pointer: fine) { .opinio { transition: transform 350ms var(--ease-out); } .opinio:hover { transform: translateY(-6px) rotate(-.5deg); } }


/* ===== Tutoriales ===== */
.tutorial a { display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-4); height: 100%; min-height: 230px; padding: var(--e-3); border-radius: 22px; background: var(--calc); color: var(--pissarra); text-decoration: none; transition: transform 350ms var(--ease-out), background 300ms; }
.tutorial h3 { font-size: 1.5rem; }
.tutorial .etiqueta { font-size: .9375rem; color: var(--pedra); }
.tutorial .fletxa-petita { width: 44px; height: 44px; border-radius: 50%; background: var(--pissarra); color: var(--taronja); display: grid; place-items: center; transition: transform 350ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .tutorial a:hover { transform: translateY(-6px); background: #ECEDE8; } .tutorial a:hover .fletxa-petita { transform: rotate(-45deg); } }
.pont { display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-3); height: 100%; min-height: 230px; padding: var(--e-3); border-radius: 22px; background: var(--taronja); color: var(--pissarra); }
.pont h3 { font-size: 1.75rem; }
.pont p { margin: 0; }
.pont .boto-principal { background: var(--pissarra); color: var(--calc); }
.pont .boto-principal::before { background: #000; }


/* ===== Preguntas frecuentes ===== */
.faq-llista { border-top: 2px solid var(--pissarra); }
.faq details { border-bottom: 2px solid var(--pissarra); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-2); align-items: center; padding: var(--e-3) 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); overflow-wrap: break-word; hyphens: auto; }
.pas h3, .rajola h3, .servei h3 { overflow-wrap: break-word; hyphens: auto; }
.faq .mes { width: 44px; height: 44px; border-radius: 50%; background: var(--pissarra); color: var(--taronja); display: grid; place-items: center; font: 400 1.75rem/1 var(--f-titol); transition: transform 300ms var(--ease-out), background 300ms; }
.faq details[open] .mes { transform: rotate(45deg); background: var(--taronja); color: var(--pissarra); }
.faq .resposta { padding: 0 0 var(--e-3); font-size: 1.125rem; }
.amb-moviment .faq details[open] .resposta { animation: obre 300ms var(--ease-out); }
@keyframes obre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }


/* ===== Zona ===== */
.zona-graella { display: grid; gap: var(--e-4); }
.zona-graella p { font-size: 1.125rem; }
.zona-graella .ca { font: 650 clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem)/1.2 var(--f-titol); color: var(--pissarra); max-width: 22ch; }
.zona-graella .ca a { color: var(--rovell); }
@media (min-width: 1024px) { .zona-graella { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }


/* ===== Contacto ===== */
.contacte-graella { display: grid; gap: var(--e-6); }
@media (min-width: 1024px) { .contacte-graella { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.camp { margin-bottom: var(--e-2); }
.camp label { display: block; font-weight: 700; margin-bottom: 6px; }
.camp .ajuda { display: block; font-size: .9375rem; color: #D6D9D4; margin-bottom: 6px; }
.camp input[type="text"], .camp textarea { width: 100%; min-height: 56px; padding: 14px 16px; border-radius: 14px; border: 2px solid transparent; background: var(--blanc); color: var(--pissarra); font: 400 1.0625rem/1.4 var(--f-text); transition: border-color 200ms; }
.camp textarea { min-height: 8rem; resize: vertical; }
.camp input:focus-visible, .camp textarea:focus-visible { outline: 3px solid var(--taronja); outline-offset: 2px; }
.camp [aria-invalid="true"] { border-color: var(--error); }
.error-camp { display: block; min-height: 1.6em; color: #FFB4A8; font-size: .9375rem; font-weight: 700; margin-top: 4px; }
.casella { display: flex; gap: var(--e-1); align-items: flex-start; }
.casella input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--taronja); flex: none; }
.casella a { color: var(--taronja); }
.resum-errors { background: var(--calc); color: var(--pissarra); border-left: 6px solid var(--error); border-radius: 10px; padding: var(--e-2); margin-bottom: var(--e-3); }
.resum-errors h3 { font-size: 1.125rem; color: var(--error); margin-bottom: var(--e-1); }
.resum-errors ul { margin: 0; padding-left: 1.2em; }
.fosc .resum-errors a { color: var(--error); }
.gira { width: 18px; height: 18px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira 700ms linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.confirmacio { background: var(--calc); color: var(--pissarra); border-left: 6px solid var(--ok); border-radius: 10px; padding: var(--e-3); }
.confirmacio h3 { color: var(--ok) !important; margin-bottom: var(--e-1); }
.fosc .confirmacio a { color: var(--rovell); }
.dades dl { margin: 0; display: grid; gap: var(--e-3); }
.dades dt { font-weight: 700; color: var(--taronja); font-size: .9375rem; }
.dades dd { margin: 0; font-size: 1.25rem; }
.dades .boto { margin-top: var(--e-4); width: 100%; }


/* ===== Formulario: campo trampa y aviso del servidor ===== */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fosc .resum-errors p { margin: 0; }