/* Clínica Dental Serra · demo v2 (09/10/2026, polida amb Impeccable el mateix dia)
   Corporativa i ben animada: blanc trencat (ni blanc pur ni blau, com les clíniques d'Osona mesurades), tinta gairebé
   negra i un sol accent de coure. Títols en Source Serif 4 a 96 px o més (Neko: 100), entradeta a 24 px (Tend: 26).
   El gest: el vídeo de la portada s'obre en quatre especialitats (js/serra.js). Res d'etiquetes en majúscules damunt
   dels títols ni de files de xifres: el títol parla sol. */

:root{
  --paper:#F7F7F5; --paper-2:#EEEFEC; --paper-3:#E4E5E1;
  --tinta:#16181B; --tinta-2:#474C52; --gris:#666B71; --linia:#DADBD6;
  --coure:#A65A35; --coure-fosc:#8C4727; --coure-pal:#F2E6DD; --error:#9B2C1F;
  --fosc:#131517; --sobre-fosc:#ECEDEA; --sobre-fosc-2:#A9ADB2; --linia-fosca:rgba(236,237,234,.14);
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:'Host Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --amplada:1320px; --marge:clamp(20px, 4vw, 56px);
  --radi:18px; --radi-gran:26px; --cap-h:76px;
  --corba:cubic-bezier(.22,1,.36,1);
}
@view-transition{ navigation:auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.32s; }

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scrollbar-color:#B9BBB7 var(--paper); accent-color:var(--coure); }
body{ margin:0; background:var(--paper); color:var(--tinta); font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:clip; }
img, video{ display:block; max-width:100%; }
a{ color:inherit; text-underline-offset:3px; }
p{ margin:0; }
input, textarea{ caret-color:var(--coure); }
::selection{ background:var(--coure-pal); color:var(--tinta); }
.fosca ::selection, .banda ::selection, .obertura ::selection{ background:var(--coure); color:#fff; }
:focus-visible{ outline:2px solid var(--coure); outline-offset:3px; border-radius:4px; }
.vh{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.salta{ position:absolute; left:16px; top:-60px; z-index:100; padding:10px 16px; background:var(--tinta); color:var(--paper); border-radius:8px; text-decoration:none; }
.salta:focus{ top:12px; }

/* ── lletra ── */
.h1{ font-family:var(--serif); font-weight:400; font-size:clamp(3.1rem, 7.1vw, 6.6rem); line-height:1; letter-spacing:-.025em; margin:0; text-wrap:balance; font-optical-sizing:auto; }
.h2{ font-family:var(--serif); font-weight:400; font-size:clamp(2.2rem, 4.2vw, 4rem); line-height:1.04; letter-spacing:-.02em; margin:0; text-wrap:balance; }
.lead{ font-size:clamp(1.15rem, 1.7vw, 1.5rem); line-height:1.45; color:var(--tinta-2); max-width:34ch; margin-top:24px; text-wrap:pretty; }
.nota{ font-size:14px; color:var(--gris); margin-top:24px; }
.enllac{ display:inline-block; margin-top:28px; font-weight:600; text-decoration:none; border-bottom:1.5px solid var(--coure); padding:4px 0 3px; transition:color .25s; }
.enllac-clar{ border-color:var(--sobre-fosc); }

/* ── botons: rectangles amb el cantell suau; res de píndoles amb fletxa ── */
.boto{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 24px; border-radius:12px; border:0; font:600 16px/1 var(--sans); text-decoration:none; cursor:pointer; transition:background-color .25s, color .25s, opacity .3s, visibility .3s; }
.boto-ple{ background:var(--tinta); color:var(--paper); }
.boto-clar{ background:var(--paper); color:var(--tinta); }
.boto-linia{ background:transparent; color:inherit; box-shadow:inset 0 0 0 1.5px currentColor; }
.boto:active{ transform:translateY(1px); }
/* el color de passar-hi per sobre, només on hi ha ratolí (al mòbil es quedava enganxat després de tocar) */
@media (hover:hover){
  .boto-ple:hover{ background:var(--coure); }
  .boto-clar:hover{ background:var(--coure-pal); }
  .enllac:hover{ color:var(--coure-fosc); }
  .enllac-clar:hover{ color:#fff; }
}

/* ── capçalera ── */
.cap{ position:fixed; inset:0 0 auto 0; z-index:50; height:var(--cap-h); background:var(--paper); border-bottom:1px solid transparent; transition:background-color .35s, color .35s, border-color .35s; }
.cap.cap--linia{ border-bottom-color:var(--linia); }
.cap-in{ max-width:var(--amplada); height:100%; margin:0 auto; padding:0 var(--marge); display:flex; align-items:center; gap:30px; }
.marca{ display:flex; flex-direction:column; text-decoration:none; margin-right:auto; line-height:1; }
.marca-nom{ font-family:var(--serif); font-size:29px; letter-spacing:-.01em; }
.marca-sub{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gris); margin-top:5px; transition:color .35s; }
.menu ul{ display:flex; gap:28px; list-style:none; margin:0; padding:0; }
.menu a{ font-size:15px; font-weight:500; text-decoration:none; padding:6px 0; background:linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition:background-size .35s var(--corba); }
.menu a[aria-current="page"]{ background-size:100% 1px; }
@media (hover:hover){ .menu a:hover{ background-size:100% 1px; } }
.cap-tel{ font-size:15px; text-decoration:none; font-variant-numeric:tabular-nums; }
.cap-cta{ padding:12px 18px; font-size:15px; }
.amb-barra .cap-cta{ opacity:0; visibility:hidden; }
.cap-obre{ display:none; font:600 15px/1 var(--sans); color:inherit; background:none; border:0; padding:14px 6px; cursor:pointer; }
/* a la portada, mentre el vídeo hi és a sota, la capçalera és transparent i blanca (i sense línia) */
.p-inici .cap:not(.cap--ple){ background:transparent; color:#fff; border-bottom-color:transparent; }
.p-inici .cap:not(.cap--ple) .marca-sub{ color:rgba(255,255,255,.8); }
.p-inici .cap:not(.cap--ple) .boto-ple{ background:#fff; color:var(--tinta); }

.menu-mobil{ position:fixed; inset:0; z-index:49; background:var(--paper); padding:calc(var(--cap-h) + 32px) var(--marge) 40px; display:flex; flex-direction:column; justify-content:space-between; }
.menu-mobil[hidden]{ display:none; }
.menu-mobil ul{ list-style:none; margin:0; padding:0; }
.menu-mobil li a{ display:block; font-family:var(--serif); font-size:2.3rem; line-height:1.15; padding:10px 0; text-decoration:none; border-bottom:1px solid var(--linia); }
.menu-mobil-peu{ display:grid; gap:12px; }
.obert-menu{ overflow:hidden; }

/* ── el que es mou: tres moments, no un fos a cada bloc ──
   1. el títol de cada pàgina puja paraula per paraula; 2. la frase de la manera de fer s'encén;
   3. els vídeos s'obren com una cortina (la mateixa gramàtica que l'obertura de la portada). El text, quiet. */
[data-paraules] .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em; }
[data-paraules] .wi{ display:inline-block; transform:translateY(108%); }
[data-paraules].vist .wi{ transform:none; transition:transform 1s var(--corba); transition-delay:calc(var(--i) * 55ms); }
.js [data-paraules]:not(.partit){ visibility:hidden; }
.segur [data-paraules]:not(.partit){ visibility:visible; }
[data-encen] .w{ opacity:.18; }
.sense-encen [data-encen] .w{ opacity:1; }
.marc-arrodonit{ --r:var(--radi-gran); }
.js .revela-mitja{ clip-path:inset(6% 6% 6% 6% round var(--r)); }
.js .revela-mitja .mitja-img, .js .revela-mitja .mitja-video{ transform:scale(1.1); }
.js .revela-mitja.vist{ clip-path:inset(0 round var(--r)); transition:clip-path 1.3s var(--corba); }
.js .revela-mitja.vist .mitja-img, .js .revela-mitja.vist .mitja-video{ transform:none; transition:transform 1.6s var(--corba), opacity .7s; }

/* ── vídeos i imatges ── */
.mitja{ position:relative; overflow:hidden; background:var(--paper-3); isolation:isolate; }
.mitja-img, .mitja-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mitja-video{ opacity:0; transition:opacity .7s; }
.mitja.juga .mitja-video{ opacity:1; }
.mitja-pausa{ position:absolute; right:14px; bottom:14px; z-index:3; width:40px; height:40px; border-radius:50%; border:0; padding:0; background:rgba(18,20,22,.58); color:#fff; display:grid; place-items:center; cursor:pointer; opacity:0; transition:opacity .3s, background-color .25s; }
.mitja.juga .mitja-pausa, .mitja.aturat .mitja-pausa, .mitja-pausa:focus-visible{ opacity:1; }
.mitja-pausa svg{ width:16px; height:16px; fill:currentColor; }
.mitja-pausa .ic-play{ display:none; }
.mitja.aturat .ic-pausa, .mitja-pausa.aturat .ic-pausa{ display:none; }
.mitja.aturat .ic-play, .mitja-pausa.aturat .ic-play{ display:block; }
@media (hover:hover){ .mitja-pausa:hover{ background:rgba(18,20,22,.8); } }
.marc-arrodonit{ border-radius:var(--radi-gran); aspect-ratio:4 / 5; }

/* ── l'obertura (portada): sense moviment, el hero i les quatre especialitats a sota ── */
.obertura{ position:relative; }
.obertura-escena{ position:relative; background:var(--paper); }
.obertura-fons{ position:relative; height:100svh; min-height:600px; background:var(--fosc); }
.obertura-mitja{ position:absolute; inset:0; background:var(--fosc); }
/* el vel: fosc a dalt (on hi ha el menú), a l'esquerra (on hi ha el text) i a baix; la cara del dentista, neta */
.obertura-vel{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,12,14,.62) 0%, rgba(10,12,14,.34) 38%, rgba(10,12,14,0) 66%),
    linear-gradient(180deg, rgba(10,12,14,.55) 0%, rgba(10,12,14,.1) 20%, rgba(10,12,14,.1) 46%, rgba(10,12,14,.74) 100%); }
.obertura-text{ position:absolute; left:0; right:0; bottom:clamp(44px, 9vh, 104px); z-index:2; margin:0 auto; color:#fff; }
.obertura-text .h1{ max-width:13ch; color:#fff; text-shadow:0 2px 28px rgba(0,0,0,.28); }
.obertura-text .lead{ color:#fff; max-width:40ch; text-shadow:0 1px 18px rgba(0,0,0,.35); }
.accio{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:32px; }
.accio-tel{ text-decoration:none; border-bottom:1px solid currentColor; padding:6px 0 2px; }
.obertura-pausa{ position:absolute; right:var(--marge); top:calc(max(100svh, 600px) - 64px); z-index:4; width:40px; height:40px; border-radius:50%; border:0; padding:0; background:rgba(18,20,22,.58); color:#fff; display:grid; place-items:center; cursor:pointer; transition:background-color .25s; }
.obertura-pausa svg{ width:16px; height:16px; fill:currentColor; }
.obertura-pausa .ic-play{ display:none; }
.obertura-pausa.aturat .ic-pausa{ display:none; }
.obertura-pausa.aturat .ic-play{ display:block; }
@media (hover:hover){ .obertura-pausa:hover{ background:rgba(18,20,22,.82); } }
.mou .obertura-pausa{ top:auto; bottom:10px; transition:opacity .3s, background-color .25s; }
.obertura-pausa.fora{ opacity:0; pointer-events:none; }
.obertura-titol{ padding:clamp(56px, 8vw, 96px) var(--marge) 28px; max-width:var(--amplada); margin:0 auto; }
.obertura-h{ font-family:var(--serif); font-size:clamp(2rem, 3.4vw, 3.2rem); line-height:1.05; letter-spacing:-.02em; }
.obertura-cols{ list-style:none; margin:0 auto; padding:0 var(--marge) clamp(56px, 8vw, 96px); max-width:var(--amplada); display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.col{ position:relative; border-radius:var(--radi); overflow:hidden; aspect-ratio:3 / 4.4; background:var(--fosc); }
.col-a{ position:absolute; inset:0; color:#fff; text-decoration:none; }
.col-mitja{ position:absolute; inset:0; }
.col-a::after{ content:""; position:absolute; inset:42% 0 0 0; z-index:1; background:linear-gradient(180deg, rgba(10,12,14,0), rgba(10,12,14,.7)); pointer-events:none; }
.col-text{ position:absolute; left:22px; right:22px; bottom:20px; z-index:2; display:grid; gap:6px; }
.col-nom{ font-family:var(--serif); font-size:clamp(1.4rem, 2vw, 2rem); line-height:1.05; hyphens:auto; overflow-wrap:break-word; }
.col-preu{ font-size:14px; opacity:.9; }
.col .mitja-img, .col .mitja-video{ transition:transform 1s var(--corba), opacity .7s; }
@media (hover:hover){ .col-a:hover .mitja-img, .col-a:hover .mitja-video{ transform:scale(1.04); } }

/* amb moviment (ordinador, sense «reduir moviment»): l'escenari s'enganxa i el vídeo s'obre en quatre columnes,
   que s'omplen una darrere l'altra, de baix a dalt, amb el vídeo de cada especialitat */
.mou .obertura{ height:220vh; }
.mou .obertura-escena{ position:sticky; top:0; height:100vh; overflow:hidden; }
.mou .obertura-fons{ position:absolute; inset:0; height:auto; min-height:0; will-change:clip-path; }
.mou .obertura-titol{ position:absolute; left:0; right:0; top:calc(var(--cap-h) + 2.5vh); padding:0 var(--marge); opacity:0; z-index:3; }
.mou .obertura-cols{ position:absolute; inset:0; display:block; padding:0; max-width:none; pointer-events:none; }
.mou .obertura-cols.actives{ pointer-events:auto; }
.mou .col{ position:absolute; aspect-ratio:auto; clip-path:inset(100% 0 0 0); will-change:clip-path; }
.mou .col-text{ transform:translateY(14px); opacity:0; transition:transform .7s var(--corba), opacity .5s; }
.mou .col.vista .col-text{ transform:none; opacity:1; }

/* ── seccions ── */
.amplada{ max-width:var(--amplada); margin:0 auto; padding:0 var(--marge); }
.seccio{ padding:clamp(80px, 9vw, 136px) 0; }
.seccio-tocada{ padding-top:0; }
.fosca{ background:var(--fosc); color:var(--sobre-fosc); }
.fosca .lead, .fosca p{ color:var(--sobre-fosc-2); }
.fosca h3{ color:var(--sobre-fosc); }

.manera-frase{ font-family:var(--serif); font-size:clamp(1.85rem, 3.7vw, 3.5rem); line-height:1.16; letter-spacing:-.015em; max-width:1120px; }

.visita-in{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(36px, 7vw, 112px); align-items:start; }
.visita-mitja{ position:sticky; top:calc(var(--cap-h) + 28px); }
.passos-curts{ list-style:none; margin:44px 0 8px; padding:0; }
.passos-curts li{ display:grid; grid-template-columns:56px minmax(0, 1fr); gap:16px; padding:24px 0; border-top:1px solid var(--linia); }
.passos-curts li:last-child{ border-bottom:1px solid var(--linia); }
.pc-n{ font-family:var(--serif); font-size:21px; color:var(--coure); line-height:1.4; }
.passos-curts h3{ font:600 19px/1.35 var(--sans); margin:0 0 4px; }
.passos-curts p{ color:var(--tinta-2); }

/* la tecnologia: la pantalla fixa canvia de vídeo amb una cortina quan el text de l'element arriba al mig */
.tecno-in{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(36px, 6vw, 112px); align-items:start; }
.tecno-llista{ list-style:none; margin:clamp(40px, 5vw, 64px) 0 0; padding:0; }
.tecno-item{ padding:clamp(32px, 4vw, 48px) 0; border-top:1px solid var(--linia); min-height:min(50vh, 440px); transition:opacity .5s; }
.fosca .tecno-item{ border-top-color:var(--linia-fosca); }
.tecno-item h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem, 2.6vw, 2.4rem); line-height:1.08; letter-spacing:-.015em; margin:0 0 14px; }
.tecno-item p{ max-width:40ch; font-size:1.08rem; color:var(--tinta-2); }
.fosca .tecno-item p{ color:var(--sobre-fosc-2); }
.tecno-item-mitja{ display:none; }
.tecno-item-mitja .marc-arrodonit{ aspect-ratio:4 / 3; border-radius:var(--radi); --r:var(--radi); }
.tecno-in.viu .tecno-item:not(.actiu){ opacity:.36; }
.tecno-peu{ margin-top:4px; }
.tecno-pantalla{ position:sticky; top:calc(var(--cap-h) + 40px); }
.tecno-capes{ position:relative; aspect-ratio:4 / 5; max-height:calc(100vh - var(--cap-h) - 80px); border-radius:var(--radi-gran); overflow:hidden; background:#0d0f10; }
.tecno-capa{ position:absolute; inset:0; clip-path:inset(100% 0 0 0); z-index:0; background:#0d0f10; }
.tecno-capa.abans{ clip-path:inset(0); z-index:1; }
.tecno-capa.actiu{ clip-path:inset(0); z-index:2; transition:clip-path 1.1s var(--corba); }
.tecno-capa .mitja-img, .tecno-capa .mitja-video{ transform:scale(1.08); transition:transform 1.6s var(--corba), opacity .7s; }
.tecno-capa.actiu .mitja-img, .tecno-capa.actiu .mitja-video{ transform:none; }
.tecno-pausa{ opacity:1; }

.tl-t{ max-width:18ch; }
.llista{ list-style:none; margin:56px 0 0; padding:0; border-top:1px solid var(--linia); }
.llista-t{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1.6fr) 210px; gap:8px 24px; align-items:baseline; padding:28px 0; border-bottom:1px solid var(--linia); text-decoration:none; transition:color .3s; }
.llista-nom{ font-family:var(--serif); font-size:clamp(1.45rem, 2.3vw, 2.1rem); line-height:1.1; transition:transform .45s var(--corba); }
.llista-frase{ color:var(--tinta-2); }
.llista-preu{ white-space:nowrap; font-variant-numeric:tabular-nums; text-align:right; }
@media (hover:hover){ .llista-t:hover{ color:var(--coure-fosc); } .llista-t:hover .llista-nom{ transform:translateX(10px); } }

.opinio-gran{ margin:0; max-width:1080px; }
.opinio-gran blockquote{ margin:0; }
.opinio-gran blockquote p{ font-family:var(--serif); font-size:clamp(1.9rem, 3.6vw, 3.3rem); line-height:1.16; letter-spacing:-.015em; text-wrap:pretty; }
.opinio-gran figcaption{ margin-top:26px; color:var(--gris); }
.opinions-llista{ list-style:none; margin:clamp(56px, 7vw, 96px) 0 0; padding:36px 0 0; border-top:1px solid var(--linia); display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(28px, 4vw, 64px); }
.opinions-llista blockquote{ margin:0; }
.opinions-llista blockquote p{ font-family:var(--serif); font-size:clamp(1.25rem, 1.6vw, 1.5rem); line-height:1.38; }
.op-qui{ margin-top:16px; color:var(--gris); font-size:15px; }

.banda{ background:var(--coure); color:#fff; padding:clamp(80px, 11vw, 150px) 0; }
.banda-in{ max-width:var(--amplada); margin:0 auto; padding:0 var(--marge); }
.banda h2{ font-family:var(--serif); font-weight:400; font-size:clamp(2.5rem, 5.4vw, 5rem); line-height:1; letter-spacing:-.02em; margin:0; }
.banda p{ color:#fff; font-size:clamp(1.1rem, 1.5vw, 1.35rem); max-width:44ch; margin-top:22px; }
.banda-accio{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:34px !important; }
.banda-tel{ color:#fff; text-decoration:none; border-bottom:1px solid currentColor; padding:6px 0 2px; }

.peu{ background:var(--paper-2); padding:80px 0 56px; }
.peu-in{ max-width:var(--amplada); margin:0 auto; padding:0 var(--marge); display:grid; grid-template-columns:minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap:32px; }
.peu-marca .marca-nom{ display:block; margin-bottom:12px; }
.peu-marca p:last-child{ color:var(--tinta-2); max-width:24ch; }
.peu-t{ font:600 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--gris); margin:4px 0 14px; }
.peu p{ color:var(--tinta-2); }
.peu a{ text-decoration:none; }
@media (hover:hover){ .peu a:hover{ color:var(--coure-fosc); text-decoration:underline; } }
.peu-baix{ width:min(calc(100% - 2 * var(--marge)), calc(var(--amplada) - 2 * var(--marge))); margin:64px auto 0; padding:24px 0 0; display:flex; justify-content:space-between; gap:24px; font-size:14px; color:var(--gris); border-top:1px solid var(--linia); }
.peu-baix p{ color:var(--gris); }
.peu-baix a{ text-decoration:underline; }
.barra-mobil{ display:none; }

/* ── pàgines interiors ── */
.cap-pagina{ padding-top:calc(var(--cap-h) + clamp(64px, 10vw, 150px)); padding-bottom:clamp(48px, 7vw, 96px); }
.cap-pagina .h1{ max-width:14ch; }
.t-hero{ display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); gap:clamp(36px, 5vw, 88px); align-items:center; padding-top:calc(var(--cap-h) + clamp(40px, 6vw, 96px)); padding-bottom:clamp(64px, 8vw, 128px); }
.t-hero-ample{ grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); }
.t-hero-ample .marc-arrodonit{ aspect-ratio:4 / 3; }
.molla{ font-size:14px; color:var(--gris); margin:0 0 22px; }
.molla a{ text-decoration:none; border-bottom:1px solid var(--linia); }
@media (hover:hover){ .molla a:hover{ color:var(--tinta); } }
.t-preu{ display:flex; flex-wrap:wrap; gap:6px 0; margin-top:28px; font-family:var(--serif); font-size:clamp(1.35rem, 1.95vw, 1.75rem); color:var(--coure-fosc); }
/* el punt va al final de cada tros, no al principi del següent: si la línia es parteix, no queda sol */
.t-preu span:not(:last-child)::after{ content:"·"; margin:0 .55em; color:var(--gris); }

.barra-t{ position:fixed; left:0; right:0; top:var(--cap-h); z-index:40; background:var(--paper); border-bottom:1px solid var(--linia); transform:translateY(-105%); transition:transform .45s var(--corba); }
.barra-t.vista{ transform:none; }
.barra-t-in{ display:flex; align-items:center; gap:24px; height:60px; }
.barra-t-nom{ font-family:var(--serif); font-size:21px; margin-right:auto; }
.barra-t-preu{ color:var(--coure-fosc); font-variant-numeric:tabular-nums; }
.barra-t .boto{ padding:11px 16px; font-size:14px; }

.que-es-in{ display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 6fr) minmax(0, 3fr); gap:clamp(28px, 4vw, 72px); align-items:start; }
.que-es-text p{ font-size:1.15rem; line-height:1.66; color:var(--tinta-2); margin-bottom:20px; }
.que-es-text p:first-child{ font-size:clamp(1.25rem, 1.6vw, 1.42rem); line-height:1.5; color:var(--tinta); }
.claus{ margin:0; }
.claus div{ padding:16px 0; border-top:1px solid var(--linia); }
.claus dt{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gris); }
.claus dd{ margin:6px 0 0; font-family:var(--serif); font-size:1.35rem; line-height:1.3; }
.claus-4{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px; margin-top:36px; }
.claus-col{ margin-top:36px; max-width:420px; }

.com-in{ display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 7fr); gap:clamp(36px, 6vw, 112px); align-items:start; }
.com-cap{ position:sticky; top:calc(var(--cap-h) + 84px); }
.passos{ list-style:none; margin:0; padding:0; position:relative; }
.passos-linia{ position:absolute; left:27px; top:20px; bottom:20px; width:1px; background:var(--linia); }
.passos-linia span{ position:absolute; left:0; top:0; width:100%; height:0; background:var(--coure); }
.pas{ position:relative; display:grid; grid-template-columns:56px minmax(0, 1fr); gap:26px; padding:26px 0; }
.pas-n{ position:relative; z-index:1; width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:var(--paper); border:1px solid var(--linia); font-family:var(--serif); font-size:17px; color:var(--gris); font-variant-numeric:tabular-nums; transition:background-color .45s, color .45s, border-color .45s; }
.pas.actiu .pas-n{ background:var(--coure); border-color:var(--coure); color:#fff; }
.pas h3{ font:600 21px/1.3 var(--sans); margin:13px 0 6px; }
.pas p{ color:var(--tinta-2); max-width:52ch; }
.p-visita .passos-linia{ left:49px; }
.p-visita .pas{ grid-template-columns:100px minmax(0, 1fr); }
.p-visita .pas-n{ width:100px; height:44px; border-radius:99px; font-family:var(--sans); font-size:14px; font-weight:600; }
.p-visita .pas h3{ margin-top:9px; }

.preus{ background:var(--paper-2); }
.preus-in{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(36px, 6vw, 112px); align-items:start; }
.taula-preus{ width:100%; border-collapse:collapse; }
.taula-preus caption{ text-align:left; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gris); padding-bottom:14px; }
.taula-preus th, .taula-preus td{ padding:22px 0; border-top:1px solid var(--linia); text-align:left; font-weight:400; vertical-align:baseline; }
.taula-preus tr:last-child th, .taula-preus tr:last-child td{ border-bottom:1px solid var(--linia); }
.taula-preus th{ font-size:1.1rem; padding-right:24px; }
.taula-preus td{ text-align:right; font-family:var(--serif); font-size:1.4rem; white-space:nowrap; font-variant-numeric:tabular-nums; }

.faq-in{ display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 7fr); gap:clamp(36px, 6vw, 112px); align-items:start; }
.faq-item{ border-top:1px solid var(--linia); }
.faq-item:last-child{ border-bottom:1px solid var(--linia); }
.faq-item summary{ list-style:none; cursor:pointer; position:relative; padding:24px 52px 24px 0; font:500 1.2rem/1.4 var(--sans); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:""; position:absolute; right:10px; top:50%; width:16px; height:16px; margin-top:-8px;
  background:linear-gradient(currentColor, currentColor) center / 16px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 16px no-repeat; transition:transform .35s var(--corba); }
.faq-item[open] summary::after{ transform:rotate(45deg); }
@media (hover:hover){ .faq-item summary:hover{ color:var(--coure-fosc); } }
.faq-item p{ color:var(--tinta-2); max-width:62ch; font-size:1.06rem; padding-bottom:26px; }

.rel-llista{ list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(20px, 2.6vw, 36px); }
.rel{ display:block; text-decoration:none; }
.rel-mitja{ aspect-ratio:3 / 2; border-radius:var(--radi); }
.rel-mitja .mitja-img{ transition:transform 1s var(--corba); }
@media (hover:hover){ .rel:hover .mitja-img{ transform:scale(1.04); } }
.rel-nom{ display:block; font-family:var(--serif); font-size:1.5rem; line-height:1.15; margin-top:16px; }
.rel-preu{ display:block; color:var(--gris); margin-top:4px; }

.targetes{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(40px, 5vw, 72px) clamp(20px, 3vw, 36px); }
.targeta a{ display:block; text-decoration:none; }
.targeta-mitja{ aspect-ratio:16 / 10; border-radius:var(--radi); }
.targeta-mitja .mitja-img, .targeta-mitja .mitja-video{ transition:transform 1s var(--corba), opacity .7s; }
@media (hover:hover){ .targeta a:hover .mitja-img, .targeta a:hover .mitja-video{ transform:scale(1.035); } }
.targeta-text{ display:grid; gap:6px; padding:20px 2px 0; }
.targeta-nom{ font-family:var(--serif); font-size:clamp(1.6rem, 2.4vw, 2.2rem); line-height:1.08; }
.targeta-frase{ color:var(--tinta-2); max-width:44ch; }
.targeta-dades{ display:flex; flex-wrap:wrap; gap:4px 20px; color:var(--coure-fosc); font-size:15px; margin-top:4px; }

.dubte-in{ background:var(--paper-2); border-radius:var(--radi-gran); padding:clamp(40px, 6vw, 88px); }
.dubte-in .lead{ max-width:46ch; }
.dubte-in .boto{ margin-top:32px; }

.prepara-in{ display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); gap:clamp(36px, 6vw, 112px); align-items:center; }
.checks{ list-style:none; margin:36px 0 0; padding:0; }
.checks li{ position:relative; padding:16px 0 16px 38px; border-top:1px solid var(--linia); font-size:1.08rem; }
.checks li:last-child{ border-bottom:1px solid var(--linia); }
.checks li::before{ content:""; position:absolute; left:4px; top:22px; width:16px; height:9px; border-left:2px solid var(--coure); border-bottom:2px solid var(--coure); transform:rotate(-45deg); }
.prepara-mitja .marc-arrodonit{ aspect-ratio:4 / 3; }

.tres{ list-style:none; margin:56px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(24px, 4vw, 56px); }
.tres li{ padding-top:24px; border-top:1px solid var(--linia-fosca); }
.tres h3{ font-family:var(--serif); font-weight:400; font-size:1.8rem; margin:0 0 10px; }

.equip-in{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(36px, 6vw, 112px); align-items:center; }
.rols{ list-style:none; margin:36px 0 0; padding:0; }
.rols li{ display:flex; justify-content:space-between; gap:20px; padding:18px 0; border-top:1px solid var(--linia); }
.rols li:last-child{ border-bottom:1px solid var(--linia); }
.rols b{ font-weight:600; }
.rols span{ color:var(--gris); text-align:right; }
.espai-dades .h2{ max-width:16ch; }

.contacte{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(36px, 6vw, 112px); align-items:start; padding-top:calc(var(--cap-h) + clamp(48px, 8vw, 120px)); padding-bottom:clamp(80px, 10vw, 150px); }
.contacte-tel{ margin-top:36px; font-family:var(--serif); font-size:clamp(2.2rem, 4vw, 3.4rem); line-height:1; }
.contacte-tel a{ text-decoration:none; border-bottom:1.5px solid var(--coure); }
.form{ background:var(--paper-2); border-radius:var(--radi-gran); padding:clamp(28px, 4vw, 52px); scroll-margin-top:calc(var(--cap-h) + 16px); }
.form-t{ font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem, 2.6vw, 2.3rem); margin:0 0 28px; }
.form-t:focus{ outline:none; }
.camp{ display:grid; gap:8px; margin:0 0 20px; }
.camp label, .camp legend{ font-weight:500; font-size:15px; }
.camp label > span:not(.camp-error){ color:var(--gris); font-weight:400; }
.camp input, .camp select, .camp textarea{ font:inherit; font-size:16px; color:var(--tinta); background:#fff; border:1px solid var(--linia); border-radius:10px; padding:14px 16px; width:100%; transition:border-color .2s, box-shadow .2s; }
.camp input:focus-visible, .camp select:focus-visible, .camp textarea:focus-visible{ outline:2px solid var(--coure); outline-offset:1px; }
.camp input[aria-invalid="true"]{ border-color:var(--error); box-shadow:0 0 0 1px var(--error); }
.camp-error{ font-size:14px; font-weight:500; color:var(--error); }
.camp-opcions{ border:0; padding:0; margin-left:0; margin-right:0; display:flex; flex-wrap:wrap; gap:10px 22px; }
.camp-opcions legend{ width:100%; margin-bottom:8px; }
.camp-opcions label, .camp-check label{ display:flex; align-items:center; gap:10px; font-weight:400; }
.camp-check label{ align-items:flex-start; }
.camp-check label > span{ color:var(--tinta); }
.camp-check a{ text-decoration:underline; }
.camp-opcions input, .camp-check input{ width:18px; height:18px; accent-color:var(--coure); margin:3px 0 0; flex:none; }
.camp-check input[aria-invalid="true"]{ outline:2px solid var(--error); outline-offset:2px; }
.form-tranquil{ font-size:15px; color:var(--tinta-2); margin:4px 0 18px; }
.form .boto{ margin-top:8px; }
.form-ok .lead{ max-width:34ch; margin-top:0; }
.form-ok-demo{ margin-top:18px; font-size:15px; color:var(--gris); }
.form-ok .boto{ margin-top:26px; }
.form-avis{ font-size:14px; color:var(--gris); margin-top:18px; }

.legal > *{ max-width:65ch; }
.legal h2{ font:600 1.25rem/1.3 var(--sans); margin:48px 0 12px; }
.legal h2:first-child{ margin-top:0; }
.legal p{ color:var(--tinta-2); font-size:1.08rem; line-height:1.7; margin-bottom:14px; }

/* ── tauleta ── */
@media (max-width:1100px){
  .menu ul{ gap:20px; }
  .cap-tel{ display:none; }
  .que-es-in{ grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); }
  .que-es-in .claus{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; }
  /* la llista de tractaments: nom i preu a dalt, l'explicació a sota (no s'amaga: és el que tradueix «endodòncia») */
  .llista-t{ grid-template-columns:minmax(0, 1fr) auto; }
  .llista-frase{ grid-column:1 / -1; grid-row:2; }
  .llista-preu{ grid-column:2; grid-row:1; }
}
@media (max-width:900px){
  .menu, .cap-cta{ display:none; }
  .cap-obre{ display:block; }
  .visita-in, .com-in, .preus-in, .faq-in, .prepara-in, .equip-in, .contacte, .t-hero, .t-hero-ample, .tecno-in{ grid-template-columns:minmax(0, 1fr); }
  .visita-mitja, .com-cap{ position:static; }
  .visita-mitja, .t-hero-mitja{ max-width:520px; }
  .t-hero-ample .t-hero-mitja{ max-width:none; }
  .tecno-pantalla{ display:none; }
  .tecno-item-mitja{ display:block; margin-bottom:24px; }
  .tecno-item{ min-height:0; }
  .tecno-in.viu .tecno-item:not(.actiu){ opacity:1; }
  .opinions-llista, .tres, .rel-llista{ grid-template-columns:minmax(0, 1fr); }
  .claus-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .obertura-cols{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .peu-in{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .barra-t{ display:none; }
}
/* ── a partir de 761 px el vídeo del hero va girat: el dentista queda a la dreta i el títol, a l'esquerra, net ── */
@media (min-width:761px){
  .obertura-mitja .mitja-img, .obertura-mitja .mitja-video{ transform:scaleX(-1); }
}
/* ── mòbil ── */
@media (max-width:600px){
  body{ font-size:16px; }
  :root{ --cap-h:64px; }
  .marca-nom{ font-size:25px; }
  .targetes{ grid-template-columns:minmax(0, 1fr); }
  .obertura-cols{ gap:10px; }
  .col{ aspect-ratio:3 / 4; }
  .col-text{ left:14px; right:14px; bottom:14px; }
  .col-nom{ font-size:1.3rem; }
  .col-preu{ font-size:13px; }
  .llista-t{ grid-template-columns:minmax(0, 1fr); padding:22px 0; }
  .llista-preu{ grid-column:1; grid-row:3; text-align:left; white-space:normal; color:var(--coure-fosc); }
  .que-es-in .claus{ grid-template-columns:minmax(0, 1fr); gap:0; }
  .rols li{ flex-direction:column; gap:2px; }
  .rols span{ text-align:left; }
  .peu{ padding-bottom:110px; }
  .peu-in{ grid-template-columns:minmax(0, 1fr); }
  .peu-baix{ flex-direction:column; }
  .barra-mobil{ display:grid; grid-template-columns:1fr 1.3fr; gap:10px; position:fixed; left:12px; right:12px; bottom:12px; z-index:45; transform:translateY(160%); transition:transform .45s var(--corba); }
  .barra-mobil.vista{ transform:none; }
  .barra-mobil a{ display:flex; align-items:center; justify-content:center; height:52px; border-radius:14px; font-weight:600; text-decoration:none; box-shadow:0 10px 30px -12px rgba(0,0,0,.4); }
  .barra-mobil a:first-child{ background:var(--paper); color:var(--tinta); box-shadow:inset 0 0 0 1px var(--linia), 0 10px 30px -12px rgba(0,0,0,.3); }
  /* el botó principal, de coure: es veu igual sobre les franges clares i sobre les fosques */
  .barra-mobil a:last-child{ background:var(--coure-fosc); color:#fff; }
  .p-visita .pas{ grid-template-columns:84px minmax(0, 1fr); gap:16px; }
  .p-visita .pas-n{ width:84px; font-size:12.5px; }
  .p-visita .passos-linia{ left:41px; }
}
@media (prefers-reduced-motion: reduce){
  [data-paraules] .wi{ transform:none; }
  .js [data-paraules]:not(.partit){ visibility:visible; }
  [data-encen] .w{ opacity:1; }
  .js .revela-mitja, .js .revela-mitja.vist{ clip-path:none; }
  .js .revela-mitja .mitja-img, .js .revela-mitja .mitja-video{ transform:none; }
  *{ transition-duration:.01ms !important; }
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
}