/* WebOttega — le tre pagine prodotto (siti, grafiche, video). Si appoggia a stile.css. */

.testa{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:12px var(--gutter);background:#140c07ee;backdrop-filter:blur(8px);border-bottom:1px solid #e9c38b22}
.marchio{display:flex;align-items:center;gap:10px;font:600 24px/1 var(--serif);color:var(--oro-chiaro);text-decoration:none;margin-right:auto}
.marchio img{width:auto;height:46px;mix-blend-mode:lighten;border-radius:4px}
.marchio small{display:block;font:italic 500 13px var(--serif);color:#c9b48a}
.testa nav{display:flex;gap:4px}
.testa nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:20px;font:500 14px var(--sans);color:#e6d4ae;text-decoration:none}
.testa nav a:hover{color:#fff}
.testa nav a[aria-current="page"]{background:#e9c38b22;color:var(--oro-chiaro)}
.testa .btn{min-height:40px;padding:8px 16px;font-size:14px}
@media (max-width:760px){.testa nav{display:none}.marchio small,.marchio span{display:none}}

/* apertura: testo a sinistra, gadget a destra */
.apertura{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,5vw,72px);min-height:min(88svh,820px);padding:clamp(36px,6vw,80px) var(--gutter);
  background:radial-gradient(ellipse at 75% 40%,#3a2414,transparent 60%),var(--noce);overflow-x:clip}
.apertura h1{margin:0 0 18px;font:600 clamp(40px,5.6vw,76px)/1 var(--serif);color:var(--oro-chiaro);letter-spacing:-.01em}
.apertura .lead{max-width:520px;margin:0 0 26px;font:19px/1.55 var(--sans);color:#e6d4ae}
.apertura .azioni{justify-content:flex-start}
.da{margin:0 0 26px;font:16px var(--sans);color:#c9b48a}
.da b{font:700 44px/1 var(--serif);color:var(--oro)}
.gadget{position:relative;display:grid;place-items:center;min-height:440px}
.gadget-nota{margin:14px 0 0;text-align:center;font:italic 15px var(--serif);color:#c9b48a}
@media (max-width:860px){
  .apertura{grid-template-columns:1fr;min-height:0;text-align:left}
  .gadget{min-height:0}
}

/* listino */
.listino{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));max-width:1140px;margin:0 auto;text-align:left}
.piano{position:relative;display:flex;flex-direction:column;padding:28px 26px;border-radius:14px;background:#fbf4e3;border:1px solid #c9b48a}
.piano h3{margin:0 0 4px;font:600 30px/1.05 var(--serif)}
.piano .prezzo{margin:6px 0 14px;font:15px var(--sans);color:#6b5636}
.piano .prezzo b{font:700 40px/1 var(--serif);color:var(--arancio)}
.piano ul{margin:0 0 20px;padding:0 0 0 1.1em;font:16px/1.6 var(--sans);color:#4a3820}
.piano .btn{margin-top:auto;min-height:48px;font-size:15px}
.segnaposto{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:12px 14px 12px 12px;border-radius:12px;background:#fff;border:1px solid #c9b48a;
  box-shadow:0 6px 16px #2b1d1120;text-decoration:none;color:#4a3820;transition:transform .2s,box-shadow .2s}
.segnaposto:hover,.segnaposto:focus-visible{transform:translateY(-2px);box-shadow:0 10px 22px #2b1d1130}
.segnaposto img{flex:none;width:112px;height:112px;padding:6px;border-radius:6px;background:#fff;outline:2px solid #2b1d11;outline-offset:-2px}
.segnaposto span{font:14px/1.45 var(--sans)}
.segnaposto b{display:block;margin-bottom:2px;font:700 18px/1.15 var(--serif);color:#2b1d11}
.vedi-demo{display:block;margin-top:6px;padding:13px 0;text-align:center;font:600 14px var(--sans);color:#8c2f12}
.piano.top{background:var(--legno);color:var(--crema);border-color:var(--oro)}
.piano.top ul{color:#e6d4ae}
.piano.top .prezzo{color:#c9b48a}
.piano.top .prezzo b{color:var(--oro)}
.etichetta{position:absolute;top:-12px;left:24px;padding:4px 12px;border-radius:12px;background:var(--arancio);color:#fff;font:700 12.5px var(--sans);letter-spacing:.12em;text-transform:uppercase}
.nota-prezzi{max-width:720px;margin:26px auto 0;font:14px/1.5 var(--sans);color:#6b5636}

/* domande */
.domande{max-width:760px;margin:0 auto;text-align:left}
.domande details{border-top:1px solid #c9b48a}
.domande details:last-child{border-bottom:1px solid #c9b48a}
.domande summary{display:flex;justify-content:space-between;gap:16px;padding:18px 4px;cursor:pointer;list-style:none;font:600 22px/1.2 var(--serif)}
.domande summary::-webkit-details-marker{display:none}
.domande summary::after{content:"+";font:400 26px/1 var(--sans);color:var(--arancio)}
.domande details[open] summary::after{content:"–"}
.domande p{margin:0 4px 18px;font:16px/1.6 var(--sans);color:#4a3820}

/* le altre due cose */
.altre{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));max-width:760px;margin:0 auto}
.altre a{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-radius:12px;background:#fbf4e3;border:1px solid #c9b48a;text-decoration:none;font:600 24px var(--serif)}
.altre a small{display:block;font:14px var(--sans);color:#6b5636}
.altre a:hover{border-color:var(--arancio)}
.piede a{text-decoration:none}

/* ---------- gadget dei siti: il portatile che cambia sito ---------- */
.portatile{width:min(100%,560px);perspective:1400px}
.schermo{position:relative;aspect-ratio:16/10;border-radius:12px 12px 4px 4px;padding:3.2% 3.2% 4%;background:#1b1b1d;box-shadow:0 0 0 2px #3a3a3e,0 30px 60px #000c;transform:rotateX(6deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.portatile:hover .schermo{transform:rotateX(0)}
.schermo-in{position:relative;height:100%;overflow:hidden;border-radius:3px;background:#000}
.schermo-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .6s,transform 4.5s linear}
.schermo-in img.su{opacity:1;transform:scale(1)}
.base{height:14px;margin:0 -7%;border-radius:0 0 14px 14px;background:linear-gradient(#c9c9cc,#8a8a8e);box-shadow:0 14px 24px #000a}
.schede{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:26px}
.schede button{min-height:40px;padding:6px 14px;border:1px solid #e9c38b55;border-radius:20px;background:none;color:#e6d4ae;font:500 14px var(--sans);cursor:pointer}
.schede button[aria-pressed="true"]{background:var(--oro);color:var(--inchiostro);border-color:var(--oro)}

/* ---------- gadget delle grafiche: il mazzo da sfogliare ---------- */
.mazzo{position:relative;width:min(72vw,340px);aspect-ratio:3/4;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mazzo .carta{position:absolute;inset:0;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 18px 40px #000b;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .55s}
.mazzo .carta img{width:100%;height:100%;object-fit:cover}
.mazzo .carta.vola{transform:translate(120%,-10%) rotate(18deg)!important;opacity:0}
.mazzo:focus-visible{outline:3px solid var(--oro);outline-offset:8px;border-radius:12px}

/* ---------- gadget dei video: due telefoni ---------- */
/* i video mostrano già un telefono: qui niente cornice a forma di telefono, solo due schermi 9:16 affiancati */
.telefoni{display:flex;align-items:flex-end;justify-content:center;gap:clamp(14px,3vw,28px);width:100%}
.tel{margin:0;flex:0 1 auto;width:clamp(150px,19vw,250px)}
.tel.piccolo{width:clamp(150px,19vw,250px)}
.tel video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:16px;background:#000;
  box-shadow:0 0 0 1px #c9b48a55,0 24px 50px #000b}
.tel figcaption{margin-top:10px;text-align:center;font:600 13px/1.2 var(--sans,system-ui);letter-spacing:.04em;color:#e9c38b}
@media (max-width:420px){ .tel,.tel.piccolo{width:43vw} }

/* pagine di testo (cookie policy) */
.legale{max-width:720px;margin:0 auto;padding:clamp(40px,7vw,80px) var(--gutter) 70px;color:#f3ead9}
.legale h1{margin:0 0 10px;font:600 clamp(40px,7vw,64px)/1.02 var(--serif)}
.legale .aggiornata{margin:0 0 30px;font:14px var(--sans);color:#c9b48a}
.legale h2{margin:34px 0 10px;font:600 28px/1.15 var(--serif);color:var(--oro-chiaro,#f6dcae)}
.legale h3{margin:22px 0 6px;font:600 17px/1.3 var(--sans);color:#f3ead9}
.legale p{margin:0 0 14px;font:17px/1.65 var(--sans);color:#e6d4ae}
.legale a{color:var(--oro,#e9c38b)}
.legale code{padding:1px 6px;border-radius:4px;background:#ffffff14;font-size:.9em}