/* Byteweb · páginas de servicio. Usa las piezas de home.css (paneles, planes, pasos, FAQ, contacto) y añade las suyas. */

.vista-servei { background: var(--pissarra); }
.vista-servei .peu { margin-top: calc(var(--rp) * -1); }

/* ===== Cabecera ===== */
.hero-pagina { padding: var(--e-4) 0 calc(var(--e-9) + var(--rp)); }
.hero-pagina .contenidor { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); align-items: center; }
@media (min-width: 900px) { .hero-pagina .contenidor { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
@media (min-width: 1024px) { .hero-pagina { padding-top: var(--e-6); } }
.hero-pagina-text { min-width: 0; }
.hero-pagina .migas ol { list-style: none; margin: 0 0 var(--e-3); padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .9375rem; }
.hero-pagina .migas li { display: inline-flex; align-items: center; min-width: 0; color: var(--calc); }
.hero-pagina .migas li + li::before { content: "/"; margin: 0 .55em; color: #8D99A1; }
.hero-pagina .migas a { color: #D6D9D4; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.hero-pagina .migas a:hover { color: var(--taronja); text-decoration: underline; }
.hero-pagina .migas [aria-current] { font-weight: 700; }
.hero-pagina .xip-cat { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--taronja); color: var(--pissarra); font-weight: 700; font-size: .9375rem; margin: 0 0 var(--e-2); }
.titol-pagina { color: var(--calc); font-weight: 750; font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.025em; font-variation-settings: "wdth" 85; margin-bottom: var(--e-3); overflow-wrap: break-word; hyphens: auto; }
.hero-pagina .hero-text { margin-bottom: var(--e-3); }
.hero-pagina .preu-hero { margin: 0 0 var(--e-3); }
.marc-imatge { margin: 0; border-radius: 22px; overflow: hidden; background: var(--blanc); box-shadow: 0 30px 60px -25px rgba(0,0,0,.55); min-width: 0; }
.marc-imatge .navegador { display: flex; gap: 6px; padding: 10px 14px; background: var(--pissarra-2); }
.marc-imatge .navegador i { width: 9px; height: 9px; border-radius: 50%; background: #6E7C86; }
.marc-imatge .navegador i:first-child { background: var(--taronja); }
.marc-imatge img { width: 100%; height: auto; display: block; }
.hero-imatge { transform: rotate(1.5deg); }
.hero-icona { display: none; }
@media (min-width: 900px) {
  .hero-icona { display: grid; place-items: center; aspect-ratio: 1; max-width: 360px; width: 100%; margin-left: auto; border-radius: 40px; background: var(--pissarra-2); color: var(--taronja); transform: rotate(-4deg); box-shadow: 0 30px 60px -25px rgba(0,0,0,.55); }
  .hero-icona svg { width: 55%; height: 55%; }
}
.amb-moviment .hero-imatge, .amb-moviment .hero-icona { animation: entra-heroi 900ms var(--ease-out) both 150ms; }
@keyframes entra-heroi { from { opacity: 0; transform: translateY(30px) rotate(0); } }
.hero-pagina + .panell { margin-top: calc(var(--rp) * -1); }

/* ===== Texto largo con imagen ===== */
.text-llarg { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); align-items: center; }
.text-llarg h2 { margin-bottom: var(--e-3); font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem); }
.text-llarg p { font-size: 1.125rem; }
@media (min-width: 1024px) { .text-llarg.amb-imatge { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .text-llarg:not(.amb-imatge) > div { max-width: 820px; } }

/* ===== Rejilla de iconos ===== */
.rajola-llista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-2); }
@media (min-width: 640px) { .rajola-llista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rajola-llista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); } .rajola-llista.rajola-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rajola { position: relative; display: flex; gap: var(--e-2); align-items: flex-start; background: var(--blanc); border: 1px solid rgba(30,42,50,.1); border-radius: 22px; padding: var(--e-3); min-width: 0; transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
.p-blanc .rajola { background: var(--calc); border-color: transparent; }
.rajola .ico-servei { flex: none; width: 48px; height: 48px; padding: 11px; border-radius: 14px; background: var(--pissarra); color: var(--taronja); transition: transform 400ms var(--ease-out); }
.rajola > div { min-width: 0; }
.rajola h3 { font-size: 1.25rem; margin-bottom: 4px; overflow-wrap: break-word; }
.rajola p { margin: 0; color: var(--pedra); }
.rajola-petita .rajola h3 { font-size: 1.125rem; }
@media (hover: hover) and (pointer: fine) { .rajola:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -22px rgba(30,42,50,.4); } .rajola:hover .ico-servei { transform: rotate(-8deg) scale(1.06); } }

/* ===== Incluye / no incluye ===== */
.inclou-graella { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
@media (min-width: 1024px) { .inclou-graella { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.inclou-si, .inclou-no { border-radius: 22px; padding: var(--e-4) var(--e-3); }
.inclou-si { background: var(--pissarra-2); }
.inclou-no { background: rgba(244,244,241,.06); border: 2px dashed rgba(244,244,241,.25); }
.inclou-si h3, .inclou-no h3 { font-size: 1.5rem; margin-bottom: var(--e-2); color: var(--calc); }
.inclou-graella ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 768px) { .inclou-si ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-3); } }
.inclou-graella li { display: flex; gap: 12px; align-items: flex-start; color: #E4E6E1; min-width: 0; }
.inclou-graella li span { min-width: 0; }
.inclou-graella li svg { flex: none; width: 24px; height: 24px; padding: 3px; border-radius: 50%; margin-top: 1px; }
.inclou-si li svg { background: var(--taronja); color: var(--pissarra); }
.inclou-no li svg { background: rgba(244,244,241,.15); color: var(--calc); }

/* ===== Chips de sectores ===== */
.xips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-1); }
.xips li { display: inline-flex; align-items: center; min-height: 52px; padding: 8px 22px; border-radius: 999px; background: var(--pissarra); color: var(--calc); font: 650 clamp(1rem, .9rem + .4vw, 1.25rem)/1.2 var(--f-titol); max-width: 100%; }

/* ===== Plantillas de Astra Portfolio (web express) ===== */
.portfolio-cos { min-width: 0; overflow-wrap: break-word; }
.portfolio-cos img { height: auto; }

/* Planes con precio mensual: la unidad puede ser larga */
.pla-preu span { white-space: nowrap; }

/* ===== Páginas: presupuesto, contacto, auditoría, gracias, portfolio, mapa web, legales, 404 ===== */
.pagina-cap { padding-bottom: calc(var(--e-9) + var(--rp)); }
.pagina-cap .xip-cat { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--taronja); color: var(--pissarra); font-weight: 700; font-size: .9375rem; margin: 0 0 var(--e-2); }
.pagina-cap .migas li { color: var(--calc); }
.pagina-cap + .panell.fosc { box-shadow: 0 -1px 0 rgba(244,244,241,.14), 0 -18px 40px -12px rgba(0,0,0,.55); }
.opcional { font-weight: 400; color: #D6D9D4; }

/* Portfolio */
.graella-portfolio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
@media (min-width: 640px) { .graella-portfolio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .graella-portfolio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.graella-portfolio li { min-width: 0; }
.graella-portfolio .tarjeta-img { aspect-ratio: 55 / 26; }
.graella-portfolio .tarjeta-titol { font: 650 1.3rem/1.25 var(--f-titol); }
.graella-portfolio .projecte-veure { margin-top: auto; padding-top: var(--e-1); }

/* Mapa web */
.mapa-graella { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
@media (min-width: 1024px) { .mapa-graella { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.mapa-graella h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); margin-bottom: var(--e-3); }
.mapa-llista, .mapa-llista ul { list-style: none; margin: 0; padding: 0; }
.mapa-llista ul { padding-left: var(--e-3); }
.mapa-llista li { border-bottom: 1px solid var(--linia); }
.mapa-llista a { display: block; padding: 10px 0; text-decoration: none; color: var(--pissarra); font-weight: 700; overflow-wrap: break-word; }
.mapa-llista a:hover { color: var(--rovell); text-decoration: underline; }
@media (min-width: 1024px) { .mapa-graella > div:last-child .mapa-llista { columns: 2; column-gap: var(--e-4); } .mapa-graella > div:last-child .mapa-llista li { break-inside: avoid; } }

/* Legales */
.legal-cos .entrada-text { font-size: 1.0625rem; }
.legal-cos .entrada-text h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); }

/* 404 */
.error-cap { text-align: left; }
.error-num { font: 750 clamp(5rem, 3rem + 12vw, 12rem)/.85 var(--f-titol); color: var(--taronja); letter-spacing: -0.05em; margin: 0 0 var(--e-2); }
.error-botons { margin-top: var(--e-4); }

/* ===== Bloques de la página de Vilanova: cifras, proyecto destacado y tarjetas con enlace ===== */
.franja-xifres { padding-top: calc(var(--e-6) + var(--rp) / 2); padding-bottom: calc(var(--e-6) + var(--rp)); }
.franja-xifres .xifres { margin: 0; padding: 0; border: 0; }
@media (min-width: 768px) { .franja-xifres .xifres { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.destacat { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); align-items: center; }
@media (min-width: 1024px) { .destacat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.destacat h2 { margin-bottom: var(--e-3); color: var(--pissarra); }
.destacat p { font-size: 1.125rem; }
.destacat-eti { display: inline-flex; min-height: 34px; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--pissarra); color: var(--calc); font-weight: 700; font-size: .9375rem; }
.destacat .boto-principal { background: var(--pissarra); color: var(--calc); }
.destacat .boto-principal::before { background: #000; }
.destacat .marc-imatge { transform: rotate(-1.5deg); }
.rajola-enllac { display: inline-block; max-width: 100%; margin-top: var(--e-1); font-weight: 700; color: var(--rovell); overflow-wrap: anywhere; }
.rajola.amb-enllac .rajola-enllac::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rajola.amb-enllac:focus-within { outline: 3px solid var(--rovell); outline-offset: 3px; }
.rajola.amb-enllac .rajola-enllac:focus-visible { outline: none; }

/* Pasos sin ilustración (SEO, automatizaciones) */
.passos-simples .pas { min-height: 0; }
@media (min-width: 768px) { .passos-simples .pas { grid-template-columns: auto minmax(0, 1fr); } } /* solo cuando no hay ilustración */
@media (min-width: 1024px) { .passos-simples .pas { min-height: 200px; } }

/* Dos caminos (página de Vilanova) */
.camins { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
@media (min-width: 900px) { .camins { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cami { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); min-width: 0; background: var(--calc); border-radius: 22px; padding: var(--e-4) var(--e-3); }
.cami + .cami { background: var(--pissarra); color: var(--calc); }
.cami + .cami h3 { color: var(--calc); }
.cami .ico-servei { width: 56px; height: 56px; padding: 13px; border-radius: 16px; background: var(--pissarra); color: var(--taronja); }
.cami + .cami .ico-servei { background: var(--taronja); color: var(--pissarra); }
.cami h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.1; overflow-wrap: break-word; hyphens: auto; }
.cami p { margin: 0; font-size: 1.125rem; max-width: 100%; overflow-wrap: break-word; }
.cami > * { max-width: 100%; }
.cami .boto { margin-top: auto; }
.cami + .cami :focus-visible { outline-color: var(--taronja); }
@media (min-width: 1024px) { .cami { padding: var(--e-6) var(--e-4); } }

/* ===== Formulario de presupuesto con desplegables (/trabaja-conmigo-tu-pagina-web/) ===== */
.camps-parell { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); column-gap: var(--e-2); }
.camps-parell .camp { min-width: 0; display: flex; flex-direction: column; }
.camps-parell .camp label { flex: 1 0 auto; }
.camp select { width: 100%; max-width: 100%; min-height: 56px; padding: 14px 44px 14px 16px; border-radius: 14px; border: 2px solid transparent; background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231E2A32' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat right 16px center; color: var(--pissarra); font: 400 1.0625rem/1.4 var(--f-text); appearance: none; -webkit-appearance: none; text-overflow: ellipsis; cursor: pointer; transition: border-color 200ms; }
.camp select:focus-visible { outline: 3px solid var(--taronja); outline-offset: 2px; }
.garanties { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--e-1) var(--e-3); font-size: .9375rem; color: #D6D9D4; }
.garanties li { display: flex; gap: .5em; align-items: flex-start; min-width: 0; overflow-wrap: break-word; }
.garanties svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--taronja); fill: none; stroke: currentColor; }
.garanties a { color: var(--taronja-clar); }
.despres, .via-rapida { margin-bottom: var(--e-4); padding-bottom: var(--e-4); border-bottom: 1px solid rgba(244, 244, 241, .18); }
.despres h3, .via-rapida h3 { font-size: 1.25rem; margin: 0 0 var(--e-2); }
.despres ol { list-style: none; counter-reset: despres; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.despres li { counter-increment: despres; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-2); align-items: start; overflow-wrap: break-word; }
.despres li::before { content: counter(despres); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--taronja); color: var(--pissarra); font: 700 1.0625rem/1 var(--f-titol); }
.despres strong { display: block; color: var(--calc); }
.dades .via-rapida .boto { margin-top: 0; width: auto; flex: 1 1 auto; }
.garanties li:last-child svg { fill: currentColor; stroke: none; }