/* Pàgines de sector d'Utgi Business (/business/<sector>, /es/business/<sector>).
   Mateixa estètica que /business: paper, pi i or, sense mode fosc. */
:root{ --papel:#f4eee1; --sup:#fbf7ef; --tinta:#2f2a22; --tinta-2:#5d554a; --tinta-3:#766d60; --pino:#3e5236; --pino-2:#4f6a42; --oro:#c9912e; --linea:#ddd2bd; --terracota:#a8452c;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--papel); color:var(--tinta); font:17px/1.55 var(--sans); overflow-x:hidden; }
a{ color:var(--pino); }
.ample{ max-width:1080px; margin:0 auto; padding:0 16px; }
header.barra{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; }
.marca{ display:flex; align-items:center; gap:10px; color:var(--tinta); text-decoration:none; font-weight:800; font-size:19px; }
.marca img{ width:32px; height:32px; }
.barra nav{ display:flex; align-items:center; gap:14px; font-size:15px; }
.barra nav a.idioma{ color:var(--tinta-2); text-decoration:none; font-weight:600; padding:10px 4px; }
.boto{ display:inline-block; background:var(--pino-2); color:#fbf7ef; text-decoration:none; font-weight:700; padding:13px 22px; border-radius:14px; border:0; font-size:17px; cursor:pointer; }
.boto.or{ background:var(--oro); color:var(--tinta); }
.boto.buit{ background:transparent; color:var(--pino); border:2px solid var(--pino-2); }
.boto.petit{ padding:9px 16px; font-size:15px; border-radius:12px; }
h1,h2,h3{ font-family:var(--serif); line-height:1.1; margin:0; }
h1{ font-size:clamp(34px,5.6vw,56px); }
h2{ font-size:clamp(28px,4vw,40px); margin-bottom:14px; }
h3{ font-size:21px; }
.molla{ font-size:14px; color:var(--tinta-3); margin:4px 0 14px; }
.molla a{ color:var(--tinta-3); }
.heroi{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; padding:20px 0 40px; }
.heroi p.sub{ font-size:20px; color:var(--tinta-2); margin:18px 0 26px; max-width:580px; }
.ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.nota{ font-size:15px; color:var(--tinta-2); margin-top:14px; }
.telefons{ position:relative; height:520px; }
.telefons img{ position:absolute; width:236px; height:auto; filter:drop-shadow(0 22px 34px rgba(47,42,34,.22)); }
.telefons .t1{ left:0; top:60px; transform:rotate(-5deg); }
.telefons .t2{ left:50%; margin-left:-118px; top:0; z-index:2; }
.telefons .t3{ right:0; top:70px; transform:rotate(5deg); }
section{ padding:56px 0; }
.franja{ background:var(--sup); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); }
.intro{ color:var(--tinta-2); max-width:720px; margin:0; }
.dolors{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px; }
.dolor{ background:var(--papel); border:1px solid var(--linea); border-radius:16px; padding:20px; }
.dolor h3{ font-family:var(--sans); font-size:19px; margin-bottom:6px; }
.dolor p{ margin:0; color:var(--tinta-2); }
.funcions{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:24px; }
.funcio{ background:var(--sup); border:1px solid var(--linea); border-radius:16px; padding:20px 22px; }
.funcio h3{ color:var(--pino); margin-bottom:6px; }
.funcio p{ margin:0; color:var(--tinta-2); }
.cas{ display:grid; grid-template-columns:300px 1fr; gap:40px; align-items:center; }
.cas-video video{ max-width:300px; margin:0 auto; }
.llista{ margin:14px 0 0; padding-left:20px; color:var(--tinta-2); }
.llista li{ margin:0 0 8px; }
.llista b{ color:var(--tinta); }
video{ width:100%; border-radius:18px; box-shadow:0 12px 34px rgba(47,42,34,.18); background:#000; display:block; }
.video-ample{ max-width:860px; }
.comparativa{ width:100%; border-collapse:collapse; margin-top:20px; background:var(--sup); border-radius:14px; overflow:hidden; font-size:16px; }
.comparativa th,.comparativa td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--linea); vertical-align:top; }
.comparativa th{ background:var(--pino); color:#fbf7ef; font-weight:700; }
.comparativa td:first-child{ font-weight:600; }
.taula-scroll{ overflow-x:auto; }
.passos{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:22px; counter-reset:p; }
.pas{ background:var(--pino); color:#fbf7ef; border-radius:16px; padding:20px; }
.pas:before{ counter-increment:p; content:counter(p); display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--oro); color:var(--tinta); font-weight:800; margin-bottom:10px; }
.pas h3{ font-family:var(--sans); font-size:18px; margin-bottom:4px; color:#fbf7ef; }
.pas p{ margin:0; color:#dfe7d6; font-size:15.5px; }
.preu{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; }
.caixa-preu{ background:var(--sup); border:1px solid var(--linea); border-radius:18px; padding:24px; }
.caixa-preu .gran{ font-family:var(--serif); font-size:46px; font-weight:700; line-height:1; margin:8px 0; }
.caixa-preu p{ margin:0; color:var(--tinta-2); }
details{ background:var(--sup); border:1px solid var(--linea); border-radius:14px; padding:14px 18px; margin:10px 0; }
summary{ font-weight:700; cursor:pointer; }
details p{ color:var(--tinta-2); margin:10px 0 0; }
.altres{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.altres a{ background:var(--sup); border:1px solid var(--linea); border-radius:30px; padding:10px 16px; font-weight:600; font-size:15.5px; text-decoration:none; color:var(--tinta); }
.final{ background:var(--pino); color:#fbf7ef; border-radius:24px; padding:40px 28px; text-align:center; }
.final h2{ color:#fbf7ef; }
.final > p{ color:#dfe7d6; font-size:18px; max-width:620px; margin:0 auto 10px; }
.final .alt{ margin-top:18px; font-size:15px; color:#dfe7d6; }
.final .alt a{ color:#fbf7ef; }
footer{ padding:30px 0 50px; color:var(--tinta-2); font-size:15px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; }
@media (max-width:820px){
  .heroi{ grid-template-columns:1fr; }
  .telefons{ height:400px; } .telefons img{ width:180px; } .telefons .t2{ margin-left:-90px; }
  .dolors,.funcions,.preu,.cas{ grid-template-columns:1fr; } .passos{ grid-template-columns:1fr 1fr; }
  .cas{ gap:22px; }
  header.barra .boto{ display:none; }
}
@media (max-width:520px){
  .telefons{ height:330px; } .telefons img{ width:142px; } .telefons .t2{ margin-left:-71px; }
  .telefons .t1{ top:40px; } .telefons .t3{ top:46px; }
  .passos{ grid-template-columns:1fr; }
  .final{ padding:32px 12px; }
}

/* Reserva de la demo, com la de la portada (Calendly però d'Utgi) */
.agenda{ margin:26px auto 0; max-width:62rem; background:var(--sup); color:var(--tinta); border-radius:22px; text-align:left;
  display:grid; grid-template-columns:minmax(0,16rem) minmax(0,1fr); overflow:hidden; box-shadow:0 30px 70px -35px rgba(0,0,0,.55); }
.agenda [hidden]{ display:none!important; }
.agenda .info{ padding:1.8rem 1.6rem; border-right:1px solid var(--linea); }
.agenda .info img{ width:3rem; height:3rem; display:block; }
.agenda .qui{ margin:1rem 0 .2rem; font:600 .95rem/1.3 var(--sans); color:var(--tinta-2); }
.agenda .info h3{ font-size:1.5rem; line-height:1.15; margin:0 0 .8rem; color:var(--tinta); }
.agenda .fet-info{ margin:.45rem 0; font:600 .92rem/1.35 var(--sans); color:var(--tinta-2); }
.agenda .tria{ padding:1.8rem 1.6rem; display:grid; grid-template-columns:minmax(0,1fr) 12rem; gap:1.6rem; align-items:start; }
.agenda .tria.sense-dia{ grid-template-columns:minmax(0,1fr); }
.agenda h4{ font:600 1.2rem/1.25 var(--serif); margin:0 0 1.1rem; color:var(--tinta); }
.agenda .mes{ display:flex; align-items:center; justify-content:center; gap:1.4rem; margin-bottom:.9rem; }
.agenda .mes b{ font:600 .98rem/1 var(--sans); min-width:9rem; text-align:center; }
.agenda .fletxa{ width:2.75rem; height:2.75rem; border-radius:50%; border:0; background:transparent; color:var(--pino); font-size:1.3rem; cursor:pointer; }
.agenda .fletxa:hover{ background:rgba(62,82,54,.08); }
.agenda .fletxa[disabled]{ color:var(--linea); cursor:default; background:none; }
.agenda .graella{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.35rem .25rem; text-align:center; }
.agenda .graella .dsem{ font:600 .74rem/1 var(--sans); color:var(--tinta-3); text-transform:lowercase; padding:.3rem 0 .5rem; }
.agenda .graella .d{ position:relative; justify-self:center; width:100%; max-width:2.75rem; aspect-ratio:1; border-radius:50%; border:0; background:none;
  font:500 1rem/1 var(--sans); color:var(--tinta-3); display:grid; place-items:center; padding:0; }
.agenda .graella button.d{ background:rgba(62,82,54,.10); color:var(--pino); font-weight:700; cursor:pointer; }
.agenda .graella button.d:hover{ background:rgba(62,82,54,.2); }
.agenda .graella button.d[aria-pressed="true"]{ background:var(--pino); color:var(--sup); }
.agenda .graella .d.avui::after{ content:""; position:absolute; bottom:.38rem; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:currentColor; }
.agenda .hores h5{ font:500 1rem/1.3 var(--sans); color:var(--tinta-2); margin:.2rem 0 1rem; }
.agenda .hores .llista-h{ display:grid; gap:.6rem; max-height:24rem; overflow-y:auto; padding-right:.2rem; }
.agenda .hora-b{ min-height:3rem; border-radius:10px; border:1.5px solid rgba(62,82,54,.45); background:none; color:var(--pino); font:700 1rem/1 var(--sans); cursor:pointer; }
.agenda .hora-b:hover{ border-color:var(--pino); background:rgba(62,82,54,.05); }
.agenda button:focus-visible,.agenda input:focus-visible,.agenda textarea:focus-visible{ outline:2px solid var(--oro); outline-offset:2px; }
.agenda .estat{ margin:.6rem 0 0; color:var(--tinta-2); font-size:.95rem; }
.agenda .estat.error{ color:var(--terracota); }
.agenda form{ padding:1.8rem 1.6rem; display:grid; gap:.85rem; align-content:start; }
.agenda .enrere{ justify-self:start; background:none; border:0; color:var(--pino); font:600 .92rem/1 var(--sans); cursor:pointer; padding:.6rem 0; }
.agenda .resum{ margin:0; font:600 1.05rem/1.45 var(--serif); color:var(--tinta); }
.agenda .resum small{ display:block; font:500 .88rem/1.4 var(--sans); color:var(--tinta-3); }
.agenda label{ display:grid; gap:.35rem; font:600 .88rem/1.2 var(--sans); color:var(--tinta); }
.agenda input,.agenda textarea{ font:400 1rem/1.4 var(--sans); color:var(--tinta); background:#fff; border:1.5px solid var(--linea); border-radius:10px; padding:.75rem .85rem; width:100%; }
.agenda .parany{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.agenda .enviar{ justify-self:start; margin-top:.3rem; }
.agenda .enviar[disabled]{ opacity:.55; cursor:wait; }
.agenda .legal{ margin:0; font-size:.8rem; color:var(--tinta-3); }
.agenda .confirma{ padding:2.4rem 1.6rem; display:grid; gap:.6rem; align-content:center; text-align:center; }
.agenda .confirma .ok{ width:3.4rem; height:3.4rem; border-radius:50%; margin:0 auto .4rem; display:grid; place-items:center; background:var(--pino); color:var(--sup); font-size:1.6rem; }
.agenda .confirma h4{ margin:0; }
.agenda .confirma p{ margin:0; color:var(--tinta-2); }
@media (max-width:820px){
  .agenda{ grid-template-columns:1fr; }
  .agenda .info{ border-right:0; border-bottom:1px solid var(--linea); padding:1.3rem 1.2rem; }
  .agenda .tria,.agenda .tria.sense-dia{ grid-template-columns:1fr; padding:1.3rem 1rem; }
  .agenda form,.agenda .confirma{ padding:1.3rem 1.2rem; }
  .agenda .mes{ gap:.6rem; }
}

/* Guies */
.article{ max-width:740px; margin:0 auto; padding:10px 0 50px; }
.article h1{ font-size:clamp(32px,4.8vw,46px); margin:6px 0 12px; }
.article .meta{ color:var(--tinta-3); font-size:15px; margin:0 0 18px; }
.article .entrada{ font-size:20px; color:var(--tinta-2); margin:0 0 10px; }
.article h2{ font-size:clamp(25px,3.4vw,32px); margin:38px 0 12px; }
.article h3{ font-size:21px; margin:24px 0 8px; }
.article p,.article li{ font-size:18px; line-height:1.65; }
.article ul,.article ol{ padding-left:22px; }
.article li{ margin:0 0 10px; }
.article blockquote{ margin:14px 0 20px; background:var(--sup); border:1px solid var(--linea); border-left:4px solid var(--pino-2); border-radius:12px; padding:14px 18px; font-size:17px; color:var(--tinta); }
.article .caixa-cta{ margin-top:40px; }
.article .caixa-cta h2{ margin-top:0; }
.boto.buit.clar{ color:#fbf7ef; border-color:#dfe7d6; }
a.funcio.guia{ text-decoration:none; color:inherit; display:block; }
a.funcio.guia:hover{ border-color:var(--pino-2); }