/* ==========================================================================
   PANELL DEMO · «Prova-ho tu» (programa d'encàrrecs) i «Gira el negoci»
   Tot va dins de .panell-demo i de .gira: res d'aquest full toca la resta de la web.
   Colors i lletres: els de :root a estil.css (blanc, blau cel, tinta marina).
   ========================================================================== */

/* ── Colors propis del panell (tots passen el contrast AA) ── */
.panell-demo,
.gira{
  --pd-vora:#8095AB;            /* vora de camps i botons: 3,1:1 sobre blanc */
  --pd-marge:rgba(74,144,200,.42);   /* la doble ratlla del marge, com a la llibreta */
  --pd-neutre:#F1F5F9;
  --pd-forn-fons:#FFF3DF; --pd-forn-vora:#B87A1E; --pd-forn-text:#7A4500;   /* «al forn»: l'únic toc càlid */
  --pd-error:#A8231A;
  --pd-pad:clamp(16px,2.4vw,26px);
}

/* ══ PANELL ══════════════════════════════════════════════════════════════ */
.panell-demo{
  container:pd / inline-size;   /* el panell s'adapta a la seva amplada, no a la de la pantalla */
  position:relative; font-family:var(--font); color:var(--tinta); text-align:left; line-height:1.45;
  font-size:1rem;
}
.panell-demo[data-panell="complet"]{
  background:var(--white); border:1px solid var(--linia-forta); border-radius:var(--radi);
  box-shadow:0 1px 0 rgba(11,31,58,.04), 0 34px 70px -40px rgba(11,49,88,.38);
}
.panell-demo *,
.panell-demo *::before,
.panell-demo *::after{box-sizing:border-box;}
.panell-demo p{margin:0;}
.panell-demo button,
.panell-demo input{font:inherit; color:inherit; margin:0;}
.panell-demo button{cursor:pointer; -webkit-tap-highlight-color:transparent;}
.panell-demo :focus-visible{outline:2px solid var(--blau); outline-offset:2px;}

/* text de reserva si no hi ha JavaScript */
.panell-demo .panell-sensejs{padding:var(--pd-pad); color:var(--tinta2); font-size:.95rem;}

/* només per al lector de pantalla */
.panell-demo .pd-amagat{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;}

/* ── Capçalera ── */
.panell-demo .pd-cap{display:flex; align-items:flex-end; justify-content:space-between; gap:10px 16px; flex-wrap:wrap;
  padding:calc(var(--pd-pad) * .8) var(--pd-pad) calc(var(--pd-pad) * .7);}
.panell-demo .pd-sobre{font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--blau);}
.panell-demo .pd-nom{font-family:var(--display,'Satoshi',sans-serif); font-weight:700; font-size:1.4rem;
  letter-spacing:-.015em; line-height:1.1; margin-top:4px;}
.panell-demo .pd-cap-dreta{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.panell-demo .pd-xip{font-size:.72rem; font-weight:700; letter-spacing:.06em; padding:5px 11px; border-radius:99px;
  background:var(--cel-pale); color:var(--blau2); border:1px solid rgba(74,144,200,.35); white-space:nowrap;}
.panell-demo .pd-avui{font-size:.85rem; font-weight:600; color:var(--tinta2); white-space:nowrap;}

/* ── Resum: les tres xifres ── */
.panell-demo .pd-resum{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--paper); border-block:1px solid var(--linia);}
.panell-demo .pd-xifra{display:flex; flex-direction:column; justify-content:space-between; gap:4px; padding:14px var(--pd-pad) 15px; min-width:0;}
.panell-demo .pd-xifra + .pd-xifra{border-left:1px solid var(--linia);}
.panell-demo .pd-xifra-et{font-size:.76rem; font-weight:600; color:var(--gris); line-height:1.25;}
.panell-demo .pd-xifra-val{font-family:var(--display,'Satoshi',sans-serif); font-weight:700; font-size:1.75rem;
  line-height:1.05; letter-spacing:-.02em; color:var(--tinta); font-variant-numeric:tabular-nums; white-space:nowrap;}
.panell-demo .pd-xifra--apunt.is-actiu .pd-xifra-val{color:var(--blau);}

/* ── Barra d'eines ── */
.panell-demo .pd-eines{display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap;
  padding:14px var(--pd-pad);}
.panell-demo .pd-ajuda{font-size:.88rem; color:var(--tinta2); max-width:48ch; flex:1 1 260px;}
.panell-demo .pd-eines-botons{display:flex; gap:8px; flex-wrap:wrap;}

/* botons de text (mai píndola amb fletxa) */
.panell-demo .pd-boto{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px;
  padding:0 16px; border-radius:10px; border:1px solid transparent; font-size:.9rem; font-weight:600; line-height:1.15;
  transition:background-color .2s, border-color .2s, color .2s;}
.panell-demo .pd-boto--primari{background:var(--blau); color:#fff; border-color:var(--blau);}
.panell-demo .pd-boto--suau{background:var(--white); color:var(--tinta); border-color:var(--pd-vora);}
@media (hover:hover){
  .panell-demo .pd-boto--primari:hover{background:var(--blau2); border-color:var(--blau2);}
  .panell-demo .pd-boto--suau:hover{background:var(--cel-pale); border-color:var(--blau);}
}
/* el «+» dibuixat amb CSS; quan el formulari és obert es torna una «×» */
.panell-demo .pd-boto--nou::before{content:""; width:12px; height:12px; flex:none;
  background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,
             linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;
  transition:transform .3s var(--ease);}
.panell-demo .pd-boto--nou[aria-expanded="true"]::before{transform:rotate(45deg);}

/* ── Formulari «Nou encàrrec» ── */
.panell-demo .pd-form{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1.7fr) 7.4rem 7rem auto;
  gap:10px 12px; align-items:end; padding:16px var(--pd-pad) 18px; background:var(--paper); border-block:1px solid var(--linia);}
.panell-demo .pd-form[hidden]{display:none;}
.panell-demo .pd-camp{display:flex; flex-direction:column; gap:5px; min-width:0;}
.panell-demo .pd-camp-et{font-size:.76rem; font-weight:600; color:var(--tinta2);}
.panell-demo .pd-input{width:100%; min-width:0; min-height:44px; padding:0 12px; border:1px solid var(--pd-vora);
  border-radius:8px; background:var(--white); color:var(--tinta); font-size:1rem; /* 16px: l'iPhone no fa zoom */}
.panell-demo .pd-input::placeholder{color:#6B819A; opacity:1;}
.panell-demo .pd-input:focus-visible{outline:2px solid var(--blau); outline-offset:1px; border-color:var(--blau);}
.panell-demo .pd-input[aria-invalid="true"]{border-color:var(--pd-error); box-shadow:inset 0 0 0 1px var(--pd-error);}
.panell-demo .pd-form-accions{display:flex; gap:8px;}
.panell-demo .pd-error{grid-column:1 / -1; color:var(--pd-error); font-size:.86rem; font-weight:600;}
.panell-demo .pd-error:empty{display:none;}

/* ── Taula d'encàrrecs ── */
.panell-demo .pd-taula-marc{padding:0 var(--pd-pad);}
.panell-demo .pd-taula{width:100%; border-collapse:collapse; font-size:.95rem;}
.panell-demo .pd-taula th{text-align:left; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gris); padding:10px 12px; border-bottom:1px solid var(--linia-forta); white-space:nowrap;}
.panell-demo .pd-taula td{padding:10px 12px; border-bottom:1px solid var(--linia); vertical-align:middle;}
.panell-demo .pd-taula tbody tr:last-child td{border-bottom:0;}
/* l'hora viu al marge, rere una doble ratlla blava: on abans s'apuntava a la llibreta */
.panell-demo .pd-taula .pd-c-hora{width:4.6rem; padding-left:2px; border-right:3px double var(--pd-marge);
  font-weight:600; color:var(--tinta2);}
.panell-demo .pd-taula .pd-c-enc{padding-left:16px;}
.panell-demo .pd-taula .pd-c-imp{text-align:right; white-space:nowrap; font-weight:600; width:6.5rem;}
.panell-demo .pd-taula .pd-c-est{width:10rem;}
.panell-demo .pd-taula .pd-c-cob{width:8.6rem; padding-right:2px;}
.panell-demo .pd-qui{display:block; font-weight:600; color:var(--tinta); overflow-wrap:anywhere;}
.panell-demo .pd-que{display:block; font-size:.86rem; color:var(--tinta2); overflow-wrap:anywhere;}
.panell-demo .pd-fila[data-estat="3"] td{background:var(--paper);}
.panell-demo .pd-fila[data-estat="3"] .pd-qui{color:var(--tinta2);}
.panell-demo .pd-fila.is-nova td{animation:pd-nova 2.2s ease-out both;}
@keyframes pd-nova{from{background-color:var(--cel-pale);} 40%{background-color:var(--cel-pale);} to{background-color:transparent;}}

/* el botó d'estat: el nom de l'estat + quatre traços de progrés */
.panell-demo .pd-estat{display:inline-flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px;
  min-height:44px; min-width:7.6rem; padding:6px 12px; border-radius:10px; border:1px solid var(--pd-vora);
  background:var(--pd-neutre); color:var(--tinta2); font-size:.85rem; font-weight:700; line-height:1.1; text-align:left;
  transition:background-color .25s, border-color .25s, color .25s;}
.panell-demo .pd-passos{display:flex; gap:3px;}
.panell-demo .pd-passos i{display:block; width:14px; height:3px; border-radius:2px; background:currentColor; opacity:.22;
  transition:opacity .25s;}
.panell-demo [data-estat="0"] .pd-passos i:nth-child(-n+1),
.panell-demo [data-estat="1"] .pd-passos i:nth-child(-n+2),
.panell-demo [data-estat="2"] .pd-passos i:nth-child(-n+3),
.panell-demo [data-estat="3"] .pd-passos i{opacity:1;}
.panell-demo [data-estat="1"] .pd-estat{background:var(--pd-forn-fons); border-color:var(--pd-forn-vora); color:var(--pd-forn-text);}
.panell-demo [data-estat="2"] .pd-estat{background:var(--blau); border-color:var(--blau); color:#fff;}
.panell-demo [data-estat="3"] .pd-estat{background:var(--white); color:var(--gris);}
@media (hover:hover){
  .panell-demo .pd-estat:hover{border-color:var(--tinta2);}
  .panell-demo [data-estat="2"] .pd-estat:hover{background:var(--blau2); border-color:var(--blau2);}
}

/* «Cobrat»: un interruptor amb casella */
.panell-demo .pd-cobrat{display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 13px 0 11px;
  border-radius:10px; border:1px solid var(--pd-vora); background:var(--white); color:var(--tinta2);
  font-size:.88rem; font-weight:600; transition:background-color .2s, border-color .2s, color .2s;}
.panell-demo .pd-caixa{position:relative; width:18px; height:18px; flex:none; border-radius:5px;
  border:1.5px solid var(--gris); background:var(--white); transition:background-color .2s, border-color .2s;}
.panell-demo .pd-caixa::after{content:""; position:absolute; left:5px; top:1.5px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0); transition:transform .2s var(--ease);}
.panell-demo .pd-cobrat[aria-pressed="true"]{background:var(--cel-pale); border-color:var(--blau); color:var(--blau2);}
.panell-demo .pd-cobrat[aria-pressed="true"] .pd-caixa{background:var(--blau); border-color:var(--blau);}
.panell-demo .pd-cobrat[aria-pressed="true"] .pd-caixa::after{transform:rotate(45deg) scale(1);}
@media (hover:hover){ .panell-demo .pd-cobrat:hover{border-color:var(--blau);} }

/* ── Peu ── */
.panell-demo .pd-peu{display:flex; justify-content:space-between; align-items:baseline; gap:6px 18px; flex-wrap:wrap;
  padding:14px var(--pd-pad) 16px; border-top:1px solid var(--linia); margin-top:4px;}
.panell-demo .pd-nota{font-size:.8rem; color:var(--gris);}
.panell-demo .pd-avis{font-size:.82rem; font-weight:600; color:var(--tinta2); min-height:1.2em;}

/* ── Mòbil (panell de 560 px o menys): cada fila es torna una targeta ── */
@container pd (max-width:560px){
  .panell-demo .pd-app{--pd-pad:14px;}
  .panell-demo .pd-nom{font-size:1.22rem;}
  .panell-demo .pd-xifra{padding:12px 10px 13px; gap:3px;}
  .panell-demo .pd-xifra:first-child{padding-left:var(--pd-pad);}
  .panell-demo .pd-xifra-et{font-size:.7rem;}
  .panell-demo .pd-xifra-val{font-size:1.28rem;}
  .panell-demo .pd-eines-botons{width:100%;}
  .panell-demo .pd-eines-botons .pd-boto{flex:1 1 0; padding:0 10px;}

  .panell-demo .pd-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .panell-demo .pd-camp--nom,
  .panell-demo .pd-camp--que,
  .panell-demo .pd-form-accions{grid-column:1 / -1;}
  .panell-demo .pd-form-accions .pd-boto{flex:1 1 0;}

  .panell-demo .pd-taula,
  .panell-demo .pd-taula tbody{display:block;}
  .panell-demo .pd-taula thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
  /* fila 1: hora · encàrrec · import   ·   fila 2: hora · estat · cobrat (l'hora queda al marge) */
  .panell-demo .pd-taula tr{display:grid; grid-template-columns:3.2rem auto minmax(0,1fr) auto;
    grid-template-areas:"hora enc enc imp" "hora est cob cob"; gap:10px 10px; padding:13px 0; border-bottom:1px solid var(--linia);}
  .panell-demo .pd-taula tbody tr:last-child{border-bottom:0;}
  .panell-demo .pd-taula .pd-c{display:block; padding:0; border:0; width:auto; background:none;}
  .panell-demo .pd-taula .pd-c-hora{grid-area:hora; padding-top:1px; border-right:3px double var(--pd-marge); font-size:.9rem;}
  .panell-demo .pd-taula .pd-c-enc{grid-area:enc;}
  .panell-demo .pd-taula .pd-c-imp{grid-area:imp;}
  .panell-demo .pd-taula .pd-c-est{grid-area:est;}
  .panell-demo .pd-taula .pd-c-cob{grid-area:cob; justify-self:end;}
  .panell-demo .pd-taula tbody tr{margin-inline:calc(var(--pd-pad) * -1); padding-inline:var(--pd-pad);}
  .panell-demo .pd-fila[data-estat="3"]{background:var(--paper);}
  .panell-demo .pd-fila[data-estat="3"] td{background:none;}
  .panell-demo .pd-fila.is-nova{animation:pd-nova 2.2s ease-out both;}
  .panell-demo .pd-fila.is-nova td{animation:none;}
  .panell-demo .pd-estat{min-width:6.6rem; padding:6px 10px;}
  .panell-demo .pd-cobrat{padding:0 11px 0 10px;}
}
/* pantalla molt estreta: les xifres, una sota l'altra */
@container pd (max-width:380px){
  .panell-demo .pd-resum{grid-template-columns:1fr;}
  .panell-demo .pd-xifra{flex-direction:row; align-items:baseline; justify-content:space-between; padding:9px var(--pd-pad);}
  .panell-demo .pd-xifra + .pd-xifra{border-left:0; border-top:1px solid var(--linia);}
  .panell-demo .pd-xifra-et{font-size:.8rem;}
  .panell-demo .pd-xifra-val{font-size:1.2rem;}
  .panell-demo[data-panell="mini"] .pd-resum{grid-template-columns:repeat(3,minmax(0,1fr));}
  .panell-demo[data-panell="mini"] .pd-xifra{flex-direction:column; align-items:stretch; padding:9px 8px 10px;}
  .panell-demo[data-panell="mini"] .pd-xifra:first-child{padding-left:var(--pd-pad);}
  .panell-demo[data-panell="mini"] .pd-xifra + .pd-xifra{border-top:0; border-left:1px solid var(--linia);}
  .panell-demo[data-panell="mini"] .pd-xifra-et{font-size:.66rem;}
  .panell-demo[data-panell="mini"] .pd-xifra-val{font-size:1.1rem;}
}

/* ══ PANELL MINI (dins del gest; només de lectura) ═════════════════════════ */
.panell-demo[data-panell="mini"]{height:100%; font-size:.92rem;
  /* paper amb ratlles fluixes: la llibreta que hi havia abans, ara endreçada */
  background:var(--paper) repeating-linear-gradient(to bottom, transparent 0 33px, rgba(74,144,200,.10) 33px 34px);}
.panell-demo[data-panell="mini"] .pd-app{height:100%; display:flex; flex-direction:column; --pd-pad:clamp(14px,3.2cqi,24px);}
.panell-demo[data-panell="mini"] .pd-cap{background:var(--white); padding-block:14px 12px;}
.panell-demo[data-panell="mini"] .pd-nom{font-size:1.2rem;}
.panell-demo[data-panell="mini"] .pd-resum{background:var(--white);}
.panell-demo[data-panell="mini"] .pd-xifra{padding-block:11px 12px;}
.panell-demo[data-panell="mini"] .pd-xifra-val{font-size:1.4rem;}
.panell-demo .pd-llista{list-style:none; margin:0; padding:0; background:var(--white); border-bottom:1px solid var(--linia);}
.panell-demo .pd-mfila{display:grid; grid-template-columns:4.2rem minmax(0,1fr) auto 7.4rem; align-items:center; gap:0 14px;
  padding:12px var(--pd-pad); border-top:1px solid var(--linia);}
.panell-demo .pd-mfila:first-child{border-top:0;}
.panell-demo .pd-mfila .pd-c-hora{align-self:stretch; display:flex; align-items:center; border-right:3px double var(--pd-marge);
  font-weight:600; color:var(--tinta2);}
.panell-demo .pd-mfila .pd-c-enc{min-width:0; display:flex; align-items:baseline; gap:10px;}
.panell-demo .pd-mfila .pd-qui{flex:none; max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.panell-demo .pd-mfila .pd-que{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; overflow-wrap:normal;}
.panell-demo .pd-mfila .pd-c-imp{font-weight:600; white-space:nowrap; text-align:right;}
.panell-demo .pd-etiqueta{justify-self:start; font-size:.74rem; font-weight:700; padding:4px 9px; border-radius:6px; white-space:nowrap;
  border:1px solid var(--pd-vora); background:var(--pd-neutre); color:var(--tinta2);}
.panell-demo .pd-mfila[data-estat="1"] .pd-etiqueta{background:var(--pd-forn-fons); border-color:var(--pd-forn-vora); color:var(--pd-forn-text);}
.panell-demo .pd-mfila[data-estat="2"] .pd-etiqueta{background:var(--blau); border-color:var(--blau); color:#fff;}
.panell-demo .pd-mfila[data-estat="3"] .pd-etiqueta{background:var(--white); color:var(--gris);}
.panell-demo .pd-mes{padding:8px var(--pd-pad); font-size:.8rem; font-weight:600; color:var(--gris);}

@container pd (max-width:520px){
  .panell-demo[data-panell="mini"]{font-size:.84rem;}
  .panell-demo[data-panell="mini"] .pd-cap{padding-block:10px 9px;}
  .panell-demo[data-panell="mini"] .pd-nom{font-size:1.06rem;}
  .panell-demo[data-panell="mini"] .pd-sobre{font-size:.66rem;}
  .panell-demo[data-panell="mini"] .pd-xifra{padding:8px 8px 9px; gap:2px;}
  .panell-demo[data-panell="mini"] .pd-xifra:first-child{padding-left:var(--pd-pad);}
  .panell-demo[data-panell="mini"] .pd-xifra-et{font-size:.66rem;}
  .panell-demo[data-panell="mini"] .pd-xifra-val{font-size:1.1rem;}
  .panell-demo .pd-mfila{grid-template-columns:3rem minmax(0,1fr) auto; grid-template-areas:"hora enc etq" "hora enc imp";
    gap:2px 10px; padding-block:6px;}
  .panell-demo .pd-mfila .pd-c-hora{grid-area:hora;}
  .panell-demo .pd-mfila .pd-c-enc{grid-area:enc; flex-direction:column; gap:1px; align-items:stretch;}
  .panell-demo .pd-mfila .pd-qui{max-width:none;}
  .panell-demo .pd-mfila .pd-que{font-size:.78rem;}
  .panell-demo .pd-mfila .pd-c-imp{grid-area:imp;}
  .panell-demo .pd-etiqueta{grid-area:etq; justify-self:end; font-size:.68rem; padding:2px 7px;}
}

/* ══ GIRA EL NEGOCI ═══════════════════════════════════════════════════════ */
.gira{container:gira / inline-size; position:relative; font-family:var(--font); color:var(--tinta);}
.gira *,.gira *::before,.gira *::after{box-sizing:border-box;}
.gira-cap{display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; margin-bottom:16px;}

/* el selector «Per fora / Per dins»: dos botons de veritat i una peça que llisca per sota */
.gira-tria{position:relative; display:inline-grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px;
  background:var(--white); border:1px solid var(--pd-vora); border-radius:13px;
  visibility:hidden;            /* sense JavaScript no fan res: no els ensenyem (però guarden el lloc) */}
.gira--viu .gira-tria{visibility:visible;}
.gira-tria::before{content:""; position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 6px);
  border-radius:9px; background:var(--tinta); transition:transform .5s var(--ease);}
.gira[data-gira-estat="dins"] .gira-tria::before{transform:translateX(calc(100% + 4px));}
.gira-tria button{position:relative; z-index:1; min-height:44px; padding:0 20px; border:0; border-radius:9px;
  background:transparent; color:var(--tinta2); font:600 .95rem/1.1 var(--font); cursor:pointer; white-space:nowrap;
  transition:color .35s; -webkit-tap-highlight-color:transparent;}
.gira-tria button[aria-pressed="true"]{color:#fff;}
@media (hover:hover){ .gira-tria button[aria-pressed="false"]:hover{color:var(--tinta);} }
.gira-tria button:focus-visible{outline:2px solid var(--blau); outline-offset:2px;}

/* el marc de navegador */
.gira-marc{border-radius:16px; overflow:hidden; border:1px solid var(--linia-forta); background:var(--white);
  box-shadow:0 30px 70px -34px rgba(11,49,88,.36);}
.gira .frame-bar .url{transition:color .3s;}
.gira[data-gira-estat="dins"] .frame-bar .url{color:var(--blau2);}

/* l'escena: dues capes, el programa a sota i la web a sobre */
.gira-escena{position:relative; aspect-ratio:16 / 10; overflow:hidden; background:var(--paper); isolation:isolate;}
@container gira (max-width:560px){ .gira-escena{aspect-ratio:4 / 5;} }
.gira-dins{position:absolute; inset:0; z-index:1; overflow:hidden;}
.gira-fora{position:absolute; inset:0; z-index:2; overflow:hidden; background:var(--white);}
/* la captura (1200×3600) es retalla per dalt: es veu el començament de la web */
.gira-fora img{position:absolute; top:0; left:0; width:100%; height:auto; max-width:none;}

/* ── Amb JavaScript: el núvol ── */
.gira-fora.is-viu{overflow:visible; background:transparent;
  /* tornant a baixar (cap a «per fora») */
  transition:transform 1.15s cubic-bezier(.3,.62,.2,1), opacity .4s ease;}
.gira-foto{position:absolute; inset:0; overflow:hidden; background:var(--white);}
/* mentre puja, la vora de baix de la foto es fon en blanc… */
.gira-foto::after{content:""; position:absolute; left:0; right:0; bottom:0; height:26%; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff); opacity:0;
  transition:opacity .4s ease .8s;   /* en tornar, la vora tova es queda fins que la capa ha aterrat */}
/* …i per sota la segueix una boira blanca que s'esvaeix: és el que fa que sembli un núvol */
.gira-fora.is-viu::after{content:""; position:absolute; left:-4%; right:-4%; top:calc(100% - 1px); height:62%; pointer-events:none;
  background:
    radial-gradient(17% 54% at 9% 0, #fff 0 46%, rgba(255,255,255,0) 100%),
    radial-gradient(19% 70% at 31% 0, #fff 0 44%, rgba(255,255,255,0) 100%),
    radial-gradient(16% 50% at 53% 0, #fff 0 46%, rgba(255,255,255,0) 100%),
    radial-gradient(20% 66% at 75% 0, #fff 0 44%, rgba(255,255,255,0) 100%),
    radial-gradient(15% 48% at 95% 0, #fff 0 46%, rgba(255,255,255,0) 100%),
    linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.8) 9%, rgba(234,244,251,.4) 42%, rgba(234,244,251,0) 88%);}
.gira[data-gira-estat="dins"] .gira-fora.is-viu{transform:translate3d(0,-166%,0); opacity:0; pointer-events:none;
  /* pujant (cap a «per dins»): arrenca a poc a poc, accelera i s'esvaeix al final */
  transition:transform 1.45s cubic-bezier(.58,.04,.3,1), opacity .5s ease .85s;}
.gira[data-gira-estat="dins"] .gira-foto::after{opacity:1; transition:opacity .3s ease;}

/* el programa de sota puja una mica mentre es destapa */
.gira--viu .gira-dins .panell-demo{transform:translate3d(0,22px,0); opacity:.4;
  transition:transform .8s var(--ease), opacity .5s ease;}
.gira[data-gira-estat="dins"] .gira-dins .panell-demo{transform:none; opacity:1;
  transition:transform 1.1s var(--ease) .3s, opacity .7s ease .25s;}

.gira-peu{margin-top:16px; font-size:var(--fs-small,.92rem); color:var(--tinta2); max-width:62ch;}

/* moviment reduït: canvi sec, sense núvol ni passeig */
@media (prefers-reduced-motion: reduce){
  .gira-fora.is-viu,
  .gira[data-gira-estat="dins"] .gira-fora.is-viu,
  .gira-foto::after,
  .gira[data-gira-estat="dins"] .gira-foto::after,
  .gira--viu .gira-dins .panell-demo,
  .gira[data-gira-estat="dins"] .gira-dins .panell-demo,
  .gira-tria::before,
  .gira-tria button{transition:none;}
  .gira[data-gira-estat="dins"] .gira-fora.is-viu{visibility:hidden;}
  .panell-demo .pd-fila.is-nova td{animation:none;}
  .panell-demo .pd-boto--nou::before,
  .panell-demo .pd-caixa::after{transition:none;}
}