/* ============================================================================
   camgirlsworld.com - design system
   ---------------------------------------------------------------------------
   Linguaggio visivo TELEGRAM, non mondocamgirls.

   Perche' Telegram e non altro: il prodotto e' "il cliente ti scrive su
   Telegram e paga qui". Il sito che assomiglia al messenger in cui la
   trattativa avviene davvero non e' una scelta estetica, e' continuita' di
   contesto. Chi arriva da un canale Telegram non sente il salto.

   Le quattro leve che staccano dal clone di mondocam:
     1. COLORE   rosa #e6007e su beige  ->  blu #2AABEE su superfici scure
     2. CARATTERE Oswald condensato maiuscolo -> stack di sistema (Segoe UI /
                 SF / Roboto), che e' esattamente cio' che usa Telegram.
                 Era il tell piu' forte: sparisce, e sparisce anche la
                 richiesta a Google Fonts.
     3. FORMA    bottoni squadrati, bordi netti -> pillole e raggi larghi
     4. STRUTTURA doppia barra nera + hero a tre pannelli -> app shell con
                  una barra sola, tab "cartella", righe di lista e fumetti
   ========================================================================= */

/* ------------------------------------------------------------------ TEMA */
:root{
  /* marca: il gradiente e' quello vero del logo Telegram */
  --brand-1:#2AABEE;
  --brand-2:#229ED9;
  --purple:#8774E1;      /* accento secondario, per gli spazi a pagamento */
  /* ⭐ Il gradiente vero di Telegram e' bello ma col bianco sopra fa 2.4.
     Dove il gradiente porta TESTO si usa la versione profonda; il logo, le
     barre e le sfumature sulle foto tengono quello brillante. */
  --brand-1-deep:#0E7CB6;
  --brand-2-deep:#1B7EAE;
  --purple-deep:#7863DD;
  --gold:#E0A000;
  --green:#4DCD5E;       /* online: pallini e pieni, non testo */
  --red:#E5484D;

  --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;

  --bar-h:56px;
  --shell:1560px;

  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---- scuro: alternativa, si attiva solo con l'interruttore ----
   Specificita' 0,2,0 contro lo 0,1,0 di :root nudo, quindi vince sul chiaro
   qualunque sia l'ordine dei blocchi. */
:root[data-theme="dark"]{
  --bg:#0E1621;
  --surface:#17212B;
  --surface-2:#1D2733;
  --surface-3:#232E3C;
  --surface-4:#2B3847;

  --text:#FFFFFF;
  --text-2:#AEBAC6;
  --text-3:#93A3B2;   /* alzato per il contrasto: su surface-4 il vecchio stava a 3.94 */

  --border:rgba(255,255,255,.07);
  --border-2:rgba(255,255,255,.14);

  --accent:#3EA6FF;
  --accent-hover:#5CB6FF;
  --accent-soft:rgba(62,166,255,.14);
  /* sullo scuro il verde acceso e' gia' leggibile come testo (7.92), il
     rosso no: si schiarisce */
  --green-text:#4DCD5E;
  --red-text:#EA6D71;
  /* ⛔ Il testo dentro un pieno accento NON puo' essere bianco qui: bianco su
     #3EA6FF fa 2.59, sotto qualunque soglia. Sul chiaro invece l'accento e'
     scuro e il bianco va bene. Il token esiste apposta: cambia col tema. */
  --on-accent:#0B1622;

  --bubble-in:#182533;
  --bubble-out:#2B5278;

  --warn-bg:rgba(224,160,0,.12);
  --warn-border:rgba(224,160,0,.34);
  --warn-text:#F0C462;

  --ok-bg:rgba(77,205,94,.12);
  --ok-border:rgba(77,205,94,.32);
  --ok-text:#7BDD8C;

  --sh-1:0 2px 10px rgba(0,0,0,.28);
  --sh-2:0 10px 34px rgba(0,0,0,.42);
  --img-bg:#101A24;
}

/* ---- chiaro: E' IL TEMA DI CASA, quello che vede chi arriva ----
   Sta su :root nudo, quindi vale anche se l'attributo data-theme manca del
   tutto (JS spento, prima del primo paint, crawler). */
:root,
:root[data-theme="light"]{
  --bg:#E7EBF0;
  --surface:#FFFFFF;
  --surface-2:#FFFFFF;
  --surface-3:#F1F4F7;
  --surface-4:#E7ECF1;

  --text:#0F1620;
  --text-2:#4B5A69;
  --text-3:#616973;   /* alzato per il contrasto: 3.34 sul fondo pagina */

  --border:#E3E8ED;
  --border-2:#D3DBE3;

  /* ⚠️ Non e' il #3390EC di Telegram: quello su bianco fa 3.31 come testo, e
     3.31 col bianco sopra come pulsante (il rapporto e' lo stesso numero).
     Questo e' il blu piu' vicino che passa 4.5 in tutte e due le direzioni. */
  --accent:#1268BD;
  --accent-hover:#0F5A9F;
  --accent-soft:rgba(18,104,189,.10);
  /* sul chiaro il verde e il rosso di marca vanno bene per i pallini ma non
     per le parole: #4DCD5E su bianco fa 2.06 */
  --green-text:#248030;
  --red-text:#CE1D23;
  --on-accent:#fff;

  --bubble-in:#FFFFFF;
  --bubble-out:#DCF0FF;

  --warn-bg:#FFF6E0;
  --warn-border:#F0D89A;
  --warn-text:#7A5A00;

  --ok-bg:#E7F8EC;
  --ok-border:#A9E2B7;
  --ok-text:#1B6E33;

  --sh-1:0 1px 3px rgba(16,32,48,.10);
  --sh-2:0 8px 28px rgba(16,32,48,.12);
  --img-bg:#DDE3EA;
}

/* ------------------------------------------------------------------ BASE */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  /* lo stack di Telegram: nessun font da scaricare */
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
              Ubuntu,"Noto Sans",Arial,sans-serif;
  font-size:15px;
  line-height:1.45;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
/* --------------------------------------------------------------- FUOCO
   ⛔ Il contorno di sistema qui non si vede: su una superficie scura e' un
   filo nero, e su alcune pillole il raggio lo taglia. Se ne disegna uno solo
   per tutto quello che si puo' raggiungere da tastiera, coi token, cosi'
   funziona in tutti e due i temi.
   ⭐ :focus-visible e non :focus: chi clicca col mouse non deve vedere
   l'anello, chi gira col Tab si'. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-xs);
}
/* i pieni accento: l'anello dello stesso colore ci sparirebbe sopra */
:where(.mp-btn--primary,.button--default,.folders a.is-active):focus-visible{
  outline-color:var(--text);
}

/* ⭐ Salta al contenuto: la barra piu' le nove pillole di navigazione sono
   una dozzina di tappe prima di arrivare alla pagina. Si vede solo col Tab. */
.skip-link{
  position:absolute;left:12px;top:-64px;z-index:200;
  padding:11px 18px;border-radius:var(--r-pill);
  background:var(--surface);color:var(--accent);
  border:1px solid var(--border-2);box-shadow:var(--sh-2);
  font-size:14px;font-weight:600;transition:top .16s var(--ease);
}
.skip-link:focus{top:12px}
#contenuto:focus{outline:none}

img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
button{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--on-accent)}

h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.heading-1{font-size:clamp(26px,2vw + 16px,38px);font-weight:700;letter-spacing:-.02em}
.heading-2{font-size:clamp(22px,1.4vw + 14px,30px);font-weight:700;letter-spacing:-.02em}
.heading-3{font-size:clamp(19px,.8vw + 14px,24px);font-weight:600}
.heading-4{font-size:17px;font-weight:600}

.color-primary{color:var(--accent)}
.color-white{color:var(--text)}
.text-center{text-align:center}
.fw-regular{font-weight:600}

/* ------------------------------------------------------------- SCROLLBAR */
*{scrollbar-width:thin;scrollbar-color:var(--surface-4) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:var(--surface-4);border-radius:99px}
*::-webkit-scrollbar-track{background:transparent}

/* --------------------------------------------------------------- BOTTONI */
.button,.mp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 20px;border-radius:var(--r-pill);border:1px solid transparent;
  font-size:14.5px;font-weight:600;line-height:1.2;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),transform .12s var(--ease);
  text-align:center;white-space:nowrap;
}
/* ⛔⛔ La base di .mp-btn deve stare PRIMA dei suoi modificatori: hanno la
   stessa specificita' e l'elemento porta tutte e due le classi, quindi vince
   l'ultima scritta. Scritta dopo, questa riga spegneva .mp-btn--primary su 53
   pulsanti, cioe' su tutti i pulsanti principali delle aree riservate. */
.mp-btn{background:var(--surface-3);color:var(--text);border-color:var(--border)}
.mp-btn:hover{background:var(--surface-4)}
.button:active,.mp-btn:active{transform:scale(.975)}
.button:hover,.mp-btn:hover{text-decoration:none}

.button--default,.mp-btn--primary{
  background:var(--accent);color:var(--on-accent);border-color:var(--accent);
}
.button--default:hover,.mp-btn--primary:hover{
  background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent);
}
.button--light{background:var(--surface-3);color:var(--text);border-color:var(--border)}
.button--light:hover{background:var(--surface-4);color:var(--text)}
.button--dark{background:var(--surface-3);color:var(--text);border-color:var(--border)}
.button--dark:hover{background:var(--surface-4)}
.mp-btn--ghost{background:transparent;border-color:var(--border-2);color:var(--text-2)}
.mp-btn--ghost:hover{background:var(--surface-3);color:var(--text)}
/* ⭐ I bottoni dentro le righe del listino (modifica, spegni, rimetti in
   vendita): pieni, blu, RETTANGOLARI. Marco (05-09-2026): «falli pieni, colore
   blu del sito, rettangolari, cosi' sono piu' facili da cliccare e sensati».
   Erano due link testuali separati da un punto. Il raggio piccolo li stacca
   dalle pillole della navigazione: qui sono comandi, non cartelle. */
.mp-btn--riga{border-radius:var(--r-xs);padding:9px 14px;font-size:13.5px;min-height:38px}
.mp-btn--riga+.mp-btn--riga{margin-left:6px}
.button--small{font-size:13.5px;padding:8px 16px}
.button--block,.mp-btn--block{display:flex;width:100%}

/* ============================================================== APP BAR
   Una barra sola alta 56px, come la topbar di Telegram Desktop.
   Mondocam ne aveva due sovrapposte (nera + grigia): era meta' della sua
   faccia, e sparisce.                                                    */
.appbar{
  position:sticky;top:0;z-index:60;
  background:var(--surface);border-bottom:1px solid var(--border);
}
.appbar__inner{
  max-width:var(--shell);margin:0 auto;min-height:var(--bar-h);
  display:flex;align-items:center;gap:14px;padding:0 16px;
}
.appbar__logo{flex:0 0 auto;display:flex;align-items:center}
.appbar__logo svg{height:30px;width:auto;display:block}

/* campo di ricerca: pillola piena, e' il pattern di Telegram */
.search{
  flex:1 1 420px;max-width:460px;min-width:0;position:relative;
  display:flex;align-items:center;gap:8px;
  background:var(--surface-3);border:1px solid transparent;
  border-radius:var(--r-pill);padding:0 14px;height:38px;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.search:focus-within{
  background:var(--bg);border-color:var(--accent);
  /* l'input dentro ha outline:0 perche' il campo visibile e' la pillola:
     allora l'anello di fuoco lo porta la pillola, se no chi gira col Tab
     passa dalla ricerca e non se ne accorge */
  outline:3px solid var(--accent);outline-offset:2px;
}
.search svg{flex:0 0 auto;color:var(--text-3)}
/* ⭐ La lente e' un BOTTONE di invio (06-09-2026, Marco: «il pulsante cerca non
   funziona»): prima era uno span, e cliccarlo non faceva niente. */
.search__btn{background:none;border:0;padding:0;margin:0;display:flex;align-items:center;
  color:var(--text-3);cursor:pointer;min-width:24px;min-height:24px;justify-content:center}
.search__btn:hover{color:var(--text)}
.search:focus-within svg{color:var(--accent)}
.search input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  color:var(--text);font-size:14.5px;
}
.search input::placeholder{color:var(--text-3)}

.appbar__spacer{flex:1 1 auto}
.appbar__actions{flex:0 0 auto;display:flex;align-items:center;gap:8px}
/* ⭐ L'ordine nella barra e' del CSS (06-09-2026): le bandierine sono figlie
   dirette della barra, cosi' sul telefono possono stare nella riga della
   ricerca invece di sparire. */
.appbar__logo{order:1}.search{order:2}.appbar__spacer{order:3}.langs{order:4}.appbar__actions{order:5}

/* pulsante tondo da barra */
.icon-btn{
  width:38px;height:38px;border-radius:50%;border:0;background:transparent;
  color:var(--text-2);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease);
}
.icon-btn:hover{background:var(--surface-3);color:var(--text)}
/* ⛔ Il bottone del menu esiste solo sul telefono: sopra i 720 la striscia di
   pillole e' li' sotto, e un menu che apre una cosa gia' visibile e' rumore.
   ⛔⛔ E questa riga deve stare DOPO `.icon-btn`, non prima: hanno la stessa
   specificita' e vince l'ultima scritta. Messa sopra, `.icon-btn{display:
   inline-flex}` la spegneva e il bottone restava visibile sul desktop. E' la
   stessa trappola gia' pagata con `.mp-btn--primary` su 53 bottoni. */
.appbar__menu{display:none}

/* chi sei, nella barra */
.session-chip{
  display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;
  border-radius:var(--r-pill);background:var(--surface-3);color:var(--text);
  transition:background .18s var(--ease);
}
.session-chip:hover{background:var(--surface-4);text-decoration:none}
.session-chip__av{
  width:28px;height:28px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,var(--brand-1-deep),var(--brand-2-deep));color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
}
.session-chip__txt{display:flex;flex-direction:column;line-height:1.15;font-size:13px}
.session-chip__txt b{color:var(--accent);font-size:12px}

/* ------------------------------------------------------------- LOGIN */
.login-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px}
.login-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--sh-1);display:flex;flex-direction:column;
}
.login-card--primary{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--sh-2)}
.login-card__badge{
  align-self:flex-start;margin-bottom:12px;padding:4px 11px;border-radius:var(--r-pill);
  font-size:12px;font-weight:600;background:var(--accent-soft);color:var(--accent);
}
.login-card--optional .login-card__badge{background:var(--surface-3);color:var(--text-3)}
.login-card h2{font-size:20px;margin-bottom:8px}
.login-card p{color:var(--text-2);font-size:14px;line-height:1.55;margin:0 0 14px}
.login-card ul{margin:0 0 18px;padding-left:18px;color:var(--text-2);font-size:13.5px;line-height:1.6}
.login-card__foot{margin-top:auto}

/* il bottone di Telegram, nella loro forma */
.tg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:12px 20px;border-radius:var(--r-pill);border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--brand-1-deep),var(--brand-2-deep));color:#fff;
  font-size:15px;font-weight:600;transition:filter .18s var(--ease),transform .12s var(--ease);
}
.tg-btn:hover{filter:brightness(1.08);color:#fff;text-decoration:none}

/* ⛔ La nota sotto il pulsante di Telegram. Il Login Widget ha un passo che
   NON si vede da qui: la conferma dentro l'app. Chi non lo sa clicca, non
   conferma, torna su questa pagina e crede che il sito sia rotto. Trovato
   il 15-08 da Marco alla prima prova vera. */
.tg-aiuto{font-size:12.5px;line-height:1.55;color:var(--text-3);
  margin:10px 0 0;text-align:center;max-width:34em;margin-inline:auto}
.tg-aiuto b{color:var(--text-2)}
.tg-btn:active{transform:scale(.98)}
.tg-btn--ghost{
  background:transparent;color:var(--accent);border:1px solid var(--border-2);
}
.tg-btn--ghost:hover{background:var(--accent-soft);filter:none}

/* selettore lingua */
.langs{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;flex:0 0 auto}
.langs a{
  display:block;width:26px;height:26px;border-radius:50%;overflow:hidden;
  opacity:.45;transition:opacity .18s var(--ease),box-shadow .18s var(--ease);
}
.langs a img{width:100%;height:100%;object-fit:cover}
.langs a:hover,.langs a.active{opacity:1;box-shadow:0 0 0 2px var(--accent)}

/* -------------------------------------------------- NAV: tab "cartella"
   Le cartelle chat di Telegram sono una striscia di pillole. Qui fanno da
   navigazione principale.                                                */
.folders{background:var(--surface);border-bottom:1px solid var(--border)}
/* ⛔ Il padding in alto era ZERO (`0 16px 9px`): le pillole restavano
   incollate al bordo della barra sopra, e la riga sembrava schiacciata
   contro l'header invece di essere una striscia sua. Adesso e' simmetrico.
   ⭐ E c'e' spazio per respirare: le voci sono cinque, non piu' nove. */
.folders__inner{
  max-width:var(--shell);margin:0 auto;padding:9px 16px 10px;
  display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;
}
.folders__inner::-webkit-scrollbar{display:none}
.folders a{
  flex:0 0 auto;padding:9px 17px;border-radius:var(--r-pill);
  color:var(--text-2);font-size:14px;font-weight:500;white-space:nowrap;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.folders a:hover{background:var(--surface-3);color:var(--text)}
.folders a.is-active{background:var(--accent);color:var(--on-accent)}
/* ⛔ Nascosta di PARTENZA, non dopo: la sessione arriva da una chiamata di
   rete, e mostrarla prima per poi toglierla farebbe lampeggiare in vetrina una
   porta riservata. Chi e' camgirl la vede comparire, che e' l'ordine giusto. */
.folders a[data-per="camgirl"]{display:none}
/* ⛔ Serve una classe, non uno stile inline rimesso a "": togliere l'inline
   fa tornare a valere la riga qui sopra, quindi la voce restava nascosta
   anche a chi doveva vederla. I figli di un flex sono gia' blockified, quindi
   `block` non cambia il disegno. */
.folders a[data-per].e-per-me{display:block}
/* ⭐ Le linguette dentro la scheda: stessa pillola della barra in alto (e' il
   linguaggio del sito), ma senza bordo e sfondo suoi, perche' vivono dentro
   la pagina e non sopra di essa. */
.folders--scheda{background:transparent;border-bottom:0;margin:2px 0 14px}
.folders--scheda .folders__inner{padding:0}

/* ================================================================ SHELL */
.shell{max-width:var(--shell);margin:0 auto;padding:18px 16px 34px}
.layout{display:grid;grid-template-columns:300px minmax(0,1fr) 300px;gap:18px;align-items:start}
.layout--narrow{grid-template-columns:minmax(0,1fr);max-width:920px;margin:0 auto}
/* ⭐ Due colonne: la home ha perso la spalla sinistra (dentro c'erano un
   riquadro vuoto, un doppione e recensioni inventate). Senza questa riga
   restava una colonna di 300px di bianco al posto loro. */
.layout--due{grid-template-columns:minmax(0,1fr) 300px}
@media (max-width:1024px){.layout--due{grid-template-columns:minmax(0,1fr)}}

/* ⭐⭐ Su un telefono le RAGAZZE vengono prima di tutto il resto.
   Misurato: la prima foto stava a 694px, cioe' sotto la piega, dopo logo,
   ricerca, cinque voci, un banner da 500px, un titolo, due righe di testo e
   quattro filtri. Chi arriva qui non e' venuto a leggere: e' venuto a
   guardare, e ogni cosa sopra la prima foto e' un pedaggio pagato col
   pollice. Con `order` il banner e l'avviso scendono SOTTO l'elenco, senza
   toccare l'ordine del documento (che resta quello giusto per chi legge con
   uno screen reader e per i motori). */
@media (max-width:760px){
  .col-main{display:flex;flex-direction:column}
  .col-main > section:not(.hero):not(.section){order:1}
  .col-main > .hero{order:2}
  .col-main > .service-msg{order:3}
  .col-main > .section{order:4}

  /* ⭐⭐ I filtri stanno SOPRA l'elenco. Fino al 05-09-2026 stavano sotto, e
     la ragione scritta qui era buona: "nessuno filtra qualcosa che non ha
     ancora visto, e quattro pillole su due righe erano 130px di modulo prima
     del negozio".
     ⛔ Quella ragione e' scaduta, e per due motivi misurabili:
     1. le pillole non sono piu' quattro ma DUE (le caselle Donne/Trans sono
        sparite il 16-08), quindi i 130px non esistono piu';
     2. da oggi qui dentro c'e' il filtro per SERVIZIO, e non e' una rifinitura
        di quello che hai appena visto: e' il modo principale di girare un
        marketplace. Sotto la griglia si raggiungeva dopo 1.600px di schede,
        cioe' non si raggiungeva.
     ⭐ Il titolo resta primo: una pagina che si apre sui comandi, senza dire
     di cosa sono i comandi, e' peggio di una che costa trenta pixel. */
  .col-main > section:not(.hero):not(.section){display:flex;flex-direction:column}
  .col-main .grid-head{order:1}
  .col-main .filters{order:2}
  .col-main .grid{order:3}
  .col-main .listing-end{order:4}
}
.col-main{min-width:0}

/* pannello: e' il mattone di tutto il sito */
.panel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:18px;box-shadow:var(--sh-1);
}
.panel + .panel{margin-top:16px}
.panel__title{
  font-size:16px;font-weight:600;margin:0 0 14px;
  display:flex;align-items:center;gap:9px;color:var(--text);
}
.panel__title .ico{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  background:var(--accent-soft);color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;
}
.panel__hint{margin:-8px 0 14px;font-size:13.5px;color:var(--text-3)}

.sticky{position:sticky;top:calc(var(--bar-h) + 60px)}

/* ================================================================== HERO
   Una card sola, larga, con l'immagine dentro. Non piu' i tre pannelli
   affiancati di mondocam.                                               */
.hero{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface);border:1px solid var(--border);
  /* ⭐ Piu' alto di prima: adesso che il testo se n'e' andato, quello che
     resta e' la foto, e una foto ha bisogno di spazio per valere qualcosa. */
  min-height:clamp(320px,34vw,420px);
  display:flex;align-items:flex-end;box-shadow:var(--sh-2);
}
.hero__bg{position:absolute;inset:0}
/* ⭐ `center 28%` e non il centro: le foto delle camgirl sono verticali, e in
   un riquadro largo il centro geometrico cade sul corpo tagliando la testa.
   Si tiene alto, dove sta il viso. */
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
/* ⛔ La velatura era pensata per reggere sette righe di testo: copriva la foto
   fino a meta' riquadro. Adesso sotto ci sono un nome e due pulsanti, quindi
   scurisce solo quanto basta a tenerli leggibili, e la foto si vede. */
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,14,20,0) 38%,rgba(8,14,20,.30) 68%,rgba(8,14,20,.86) 100%),
             linear-gradient(90deg,rgba(8,14,20,.55) 0%,rgba(8,14,20,0) 55%);
}
.hero__body{position:relative;padding:26px 28px;max-width:640px}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;
  padding:5px 12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.14);backdrop-filter:blur(8px);
  color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.01em;
  border:1px solid rgba(255,255,255,.20);
}
.hero__name{
  font-size:clamp(32px,3.4vw,50px);font-weight:700;letter-spacing:-.025em;
  color:#fff;margin:0 0 8px;line-height:1.02;
}
.hero__sub{color:rgba(255,255,255,.82);font-size:15.5px;margin:0 0 18px;max-width:460px}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px}
.hero__cta .button--light{
  background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.24);
  backdrop-filter:blur(8px);
}
.hero__cta .button--light:hover{background:rgba(255,255,255,.26);color:#fff}

/* ------------------------------------------- messaggio di servizio
   La pillola centrata sullo sfondo chat: in Telegram e' "oggi", "hai
   creato il gruppo". Qui porta l'avviso sul primo acquisto.          */
.service-msg{
  display:flex;justify-content:center;margin:16px 0;
}
.service-msg > *{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:9px 18px;
  font-size:13.5px;color:var(--text-2);box-shadow:var(--sh-1);
}
.service-msg a{font-weight:600}

/* ====================================================== RIGHE DI LISTA
   La chat list di Telegram: avatar tondo, titolo, sottotitolo, hover
   arrotondato. Sostituisce i riquadri teaser di mondocam.            */
.list{display:flex;flex-direction:column;gap:2px}
.list__item{
  display:flex;align-items:center;gap:12px;padding:9px 10px;
  border-radius:var(--r);color:inherit;transition:background .16s var(--ease);
}
.list__item:hover{background:var(--surface-3);text-decoration:none}
.list__avatar{
  position:relative;width:50px;height:50px;border-radius:50%;overflow:hidden;
  flex:0 0 auto;background:var(--img-bg);
}
.list__avatar img{width:100%;height:100%;object-fit:cover}
.list__avatar--sq{border-radius:var(--r-sm);width:54px;height:54px}
.list__body{min-width:0;flex:1}
.list__title{
  font-size:14.5px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:6px;
}
.list__sub{
  /* ⛔ deve essere block: su uno <span> inline overflow:hidden e
     text-overflow:ellipsis non fanno niente, e il testo lungo sfonda
     la pagina di qualche pixel su mobile */
  display:block;
  font-size:13px;color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.list__meta{
  flex:0 0 auto;font-size:12.5px;color:var(--text-3);text-align:right;
  align-self:flex-start;padding-top:2px;padding-left:4px;
}
.list__badge{
  display:inline-block;min-width:20px;padding:1px 6px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:600;
  text-align:center;
}

/* pallino online sull'avatar */
.dot-online{
  position:absolute;right:1px;bottom:1px;width:13px;height:13px;border-radius:50%;
  background:var(--green);border:2.5px solid var(--surface);
  /* ⛔ Sul tema chiaro il verde di marca su bianco fa 2.06: un pallino che
     dice "online" da solo, e che nessuna parola accompagna, sotto 3.0 non si
     distingue. Invece di spegnere il verde ovunque, gli si mette intorno un
     filo del verde scuro: il contorno porta il contrasto, il colore resta. */
  box-shadow:0 0 0 1px var(--green-text);
}

/* ==================================================== GRIGLIA CAMGIRL */
/* ⭐ Il banner delle landing di mercato. ⛔ `aspect-ratio` insieme a
   width/height nell'HTML: cosi' lo spazio e' riservato prima che l'immagine
   arrivi e il titolo sotto non salta. Il raggio e' quello delle card, se no
   sembra incollato sopra la pagina invece di farne parte. */
.mercato-banner{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r-lg);margin:0 0 16px;background:var(--surface-2);
}
.grid-head{margin:0 0 4px}
.grid-head h1{font-size:clamp(24px,1.6vw + 16px,32px);font-weight:700;letter-spacing:-.02em}
.grid-head p{margin:5px 0 0;color:var(--text-3);font-size:14.5px}

.filters{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:14px 0 4px;
}
/* ⛔ Il tempo di consegna sotto ogni prezzo: e' la garanzia, e deve stare
   dalla parte del cliente PRIMA del bottone che incassa, non dopo. */
.mp-price__quando{
  display:block;margin-top:4px;font-size:12.5px;color:var(--text-3);
}

/* ⭐ Il filtro per servizio: una pillola come le altre, ma che sceglie fra
   molte cose invece di accendersi e spegnersi.
   ⛔ Niente `appearance:none`: senza la freccia nativa servirebbe un'icona di
   sfondo, e questo sito non carica immagini da nessuna parte. Il select di
   sistema la disegna da solo, ed e' anche quello che sul telefono apre la
   ruota invece di una tendina finta. */
.filters .filtro-sel{
  padding:7px 12px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--border);
  color:var(--text-2);font:inherit;font-size:13.5px;font-weight:500;
  cursor:pointer;max-width:100%;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.filters .filtro-sel:hover{background:var(--surface-3);color:var(--text)}
/* acceso: stesso segnale degli interruttori, cosi' si vede a colpo d'occhio
   che l'elenco sotto e' filtrato e non e' tutto quello che c'e' */
.filters .filtro-sel.is-on{
  background:var(--accent);border-color:var(--accent);color:var(--on-accent);
}
.filters .filtro-sel:focus-visible{
  outline:none;box-shadow:0 0 0 3px var(--accent-soft);
}

/* interruttore a pillola: acceso = riempito di accento */
.toggle{position:relative;display:inline-flex}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle span{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:7px 14px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--border);
  color:var(--text-2);font-size:13.5px;font-weight:500;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.toggle span::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--text-3);
  transition:background .18s var(--ease);
}
.toggle span:hover{background:var(--surface-3);color:var(--text)}
.toggle input:checked + span{
  background:var(--accent);border-color:var(--accent);color:var(--on-accent);
}
.toggle input:checked + span::before{background:#fff}
.toggle input:focus-visible + span{box-shadow:0 0 0 3px var(--accent-soft)}

/* ⭐⭐ Le foto sono l'unica cosa per cui il cliente e' venuto: la card era
   larga 200px, cioe' un francobollo su uno schermo grande. Adesso la colonna
   parte da 260px, e su mobile ne stanno comunque due affiancate (390px: due
   colonne da ~180 col gap). Piu' grandi vuol dire anche meno card per
   schermata, ed e' il compromesso giusto: si scorre per guardare, non per
   contare. */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px;padding:16px 0 0;
}
@media (max-width:520px){
  /* ⛔ Sotto i 520px `minmax(260px,1fr)` collasserebbe a UNA colonna sola:
     una card enorme per volta si scorre all'infinito. Due, sempre. */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
.card{min-width:0;animation:card-in .32s var(--ease) both}
@keyframes card-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card__link{display:block;color:inherit}
.card__link:hover{text-decoration:none}
.card__media{
  position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:3/4;
  background:var(--img-bg);
}
/* solo il figlio DIRETTO: dentro .card__over ci sono le bandierine, che non
   devono ereditare width/height 100% */
.card__media > img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
.card__link:hover .card__media > img{transform:scale(1.045)}
/* velo in basso, per far reggere nome e prezzo sopra l'immagine */
.card__media::after{
  content:"";position:absolute;inset:auto 0 0 0;height:52%;
  background:linear-gradient(180deg,rgba(8,14,20,0),rgba(8,14,20,.86));
}
.card__over{
  position:absolute;left:0;right:0;bottom:0;padding:10px 12px;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:8px;
}
.card__name{
  font-size:15.5px;font-weight:600;color:#fff;line-height:1.2;
  display:flex;align-items:center;gap:6px;min-width:0;
}
.card__name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card__flags{display:flex;gap:4px;margin-top:4px}
.flag{
  width:19px;height:13px;border-radius:3px;object-fit:cover;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
}
.card__price{
  flex:0 0 auto;background:var(--accent);color:var(--on-accent);
  padding:4px 10px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;
}
.card__meta{
  display:flex;align-items:center;gap:6px;margin-top:7px;
  font-size:13px;color:var(--text-3);
}

/* etichette sull'immagine */
.card__tags{position:absolute;top:9px;left:9px;z-index:3;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.tag{
  display:inline-flex;align-items:center;gap:5px;padding:4px 10px;
  border-radius:var(--r-pill);font-size:11.5px;font-weight:600;color:#fff;
  backdrop-filter:blur(6px);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* ⛔ Qui stavano .tag--weekly e .tag--starred, cioe' "Della settimana" e
   "Hot selection". Tolte il 04-09-2026: il server manda `weekly` e `starred`
   sempre a false e non c'e' nessun gesto che li accenda, quindi erano due
   medaglie che solo i profili inventati dell'anteprima potevano portare. E
   "Hot selection" voleva dire posizionamento a pagamento, che la pagina
   "Diventa camgirl" promette per iscritto di non vendere. */
.tag--new{background:var(--green);color:#08340F}
.tag--live{
  position:absolute;top:9px;right:9px;z-index:3;background:rgba(8,14,20,.62);
  border:1px solid rgba(255,255,255,.16);
}
.tag--live .pulse{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  animation:pulse 1.8s var(--ease) infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.listing-end{text-align:center;color:var(--text-3);font-size:13px;padding:24px 0 4px}
.empty-state{text-align:center;color:var(--text-3);padding:50px 20px;font-size:14px}
/* ⛔ Dentro una griglia lo stato vuoto diventa una CELLA: nella sezione
   foto era largo 159px e il testo andava a capo ogni tre parole, come un
   incolonnamento sbagliato. Deve prendere tutta la riga. */
.mp-photo-grid .empty-state,.mp-grid .empty-state{grid-column:1/-1}
.empty-state code{
  background:var(--surface-3);padding:2px 7px;border-radius:6px;color:var(--text-2);
  font-size:13px;
}

/* ================================================== STRISCIA CONTENUTI */
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.strip__item{display:block;color:inherit}
.strip__item:hover{text-decoration:none}
.strip__thumb{
  position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  background:var(--img-bg);
}
.strip__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.strip__item:hover .strip__thumb img{transform:scale(1.05)}
.strip__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.strip__play span{
  width:44px;height:44px;border-radius:50%;padding-left:3px;
  background:rgba(8,14,20,.55);border:1.5px solid rgba(255,255,255,.55);
  backdrop-filter:blur(6px);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.strip__item:hover .strip__play span{background:var(--accent);border-color:var(--accent);transform:scale(1.06)}
.strip__dur{
  position:absolute;right:7px;bottom:7px;background:rgba(8,14,20,.72);color:#fff;
  font-size:11.5px;padding:2px 7px;border-radius:var(--r-xs);
  font-variant-numeric:tabular-nums;
}
.strip__name{font-size:14px;font-weight:600;margin-top:8px;color:var(--text)}
.strip__item:hover .strip__name{color:var(--accent)}
.strip__price{color:var(--text-3);font-size:13px;font-weight:600}

/* ============================================================= FUMETTI
   Le recensioni sono messaggi. Bolla con la codina, come in chat.     */
.bubble{
  position:relative;background:var(--bubble-in);border:1px solid var(--border);
  border-radius:var(--r) var(--r) var(--r) 5px;
  padding:10px 13px;margin:0 0 10px;font-size:13.5px;line-height:1.5;
  color:var(--text-2);
}
.bubble:last-child{margin-bottom:0}
.bubble__who{
  font-size:13px;font-weight:600;color:var(--accent);margin-bottom:2px;
  display:flex;align-items:center;gap:6px;
}
.bubble__stars{color:var(--gold);font-size:12px;letter-spacing:1px}
.bubble__time{font-size:11.5px;color:var(--text-3);text-align:right;margin-top:3px}
.bubble--out{
  background:var(--bubble-out);border-color:transparent;
  border-radius:var(--r) var(--r) 5px var(--r);margin-left:auto;
  color:var(--text);
}

/* =========================================================== ETICHETTE */
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;
  border-radius:var(--r-pill);font-size:12.5px;font-weight:600;
  background:var(--surface-3);color:var(--text-2);border:1px solid var(--border);
}
.chip--accent{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.chip--online{background:rgba(77,205,94,.14);color:var(--green-text);border-color:transparent}
.chip--online::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
/* ⛔ Qui stava .chip--weekly, la pillola "Camgirl della settimana" sulla
   scheda. Tolta il 04-09-2026 con la targhetta corrispondente. */
/* --------------------------------------------------- FILTRI A SEGMENTI
   Gruppo di pillole dove una sola e' accesa: per le fasce (prezzo, durata)
   dove i valori si escludono, mentre .toggle serve per gli interruttori
   indipendenti. */
.segments{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.segment{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.segment__label{font-size:12.5px;color:var(--text-3);font-weight:600;margin-right:2px}
.segment__opts{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px}
.segment__opts label{position:relative;display:inline-flex}
.segment__opts input{position:absolute;opacity:0;pointer-events:none}
.segment__opts span{
  display:inline-block;padding:5px 12px;border-radius:var(--r-pill);cursor:pointer;
  font-size:13px;font-weight:500;color:var(--text-2);white-space:nowrap;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.segment__opts span:hover{color:var(--text)}
.segment__opts input:checked + span{background:var(--accent);color:var(--on-accent);font-weight:600}
.segment__opts input:focus-visible + span{box-shadow:0 0 0 3px var(--accent-soft)}

/* ---------------------------------------------------------------- 404 */
.notfound{text-align:center;padding:36px 0 10px}
.notfound__code{
  font-size:clamp(72px,12vw,128px);font-weight:800;line-height:1;letter-spacing:-.05em;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:6px;
}
.notfound h1{font-size:clamp(22px,2.4vw,30px);margin-bottom:8px}
.notfound p{color:var(--text-2);font-size:15px;max-width:460px;margin:0 auto;line-height:1.55}
.notfound .search--big{margin-left:auto;margin-right:auto}
.notfound__actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}

.chips{display:flex;flex-wrap:wrap;gap:7px}
/* chip cliccabile: e' un <button>, quindi va spogliato dello stile nativo */
.chip--click{cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;transition:.16s var(--ease)}
.chip--click:hover{background:var(--accent);color:var(--on-accent);border-color:transparent}

/* la ricerca grande, in mezzo alla pagina risultati */
.search--big{
  flex:1 1 auto;max-width:none;height:48px;margin:0 0 4px;
  border:1px solid var(--border-2);background:var(--surface);
}
.search--big input{font-size:16px}

/* ⛔ Qui stava .verified, la spunta accanto al nome sulla card. La accendeva
   `starred`, cioe' il campo del posizionamento a pagamento: nessuna camgirl
   vera l'ha mai avuta, e ce l'avevano solo i profili inventati. Non si e'
   ripuntata su "certificata" perche' in vetrina ci sta solo chi e'
   certificata, e una medaglia che hanno tutti non e' un'informazione.
   (04-09-2026) */

/* ============================================================== AVVISI */
.notice{
  border-radius:var(--r);padding:12px 15px;font-size:13.5px;line-height:1.55;
  border:1px solid var(--border);background:var(--surface-3);color:var(--text-2);
}
.notice--warn{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-text)}
.notice--ok{background:var(--ok-bg);border-color:var(--ok-border);color:var(--ok-text)}
/* l'avviso che regge tutto il modello di business */
.notice--rule{
  background:var(--accent-soft);border:1px solid rgba(62,166,255,.32);
  color:var(--text);font-weight:500;
  border-left:3px solid var(--accent);
  border-radius:var(--r-sm);
}
.notice--rule b{color:var(--accent)}

/* compatibilita' con il markup gia' scritto */
.mp-badge{display:inline-block;padding:12px 15px;border-radius:var(--r);font-size:14px}
.mp-badge--warn{background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-text)}
.mp-badge--ok{background:var(--ok-bg);border:1px solid var(--ok-border);color:var(--ok-text)}
.mp-no-pay-outside{
  background:var(--accent-soft);border:1px solid rgba(62,166,255,.32);
  border-left:3px solid var(--accent);border-radius:var(--r-sm);
  padding:12px 15px;font-size:13px;line-height:1.55;color:var(--text-2);
}
.mp-disclaimer-contatto{
  background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-text);
  border-radius:var(--r);padding:12px 15px;font-size:13.5px;line-height:1.5;
}

/* ======================================================= PAGINA CAMGIRL */
.mp{max-width:var(--shell);margin:0 auto;padding:18px 16px 34px}
.mp-section{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--sh-1);margin:0 0 16px;
}
.mp-section__title{
  margin:0 0 16px;font-size:16px;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:9px;
}
.mp-section__title .ico{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;font-size:11px;
  background:var(--accent-soft);color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;
}

/* testata profilo */
.mp-profile-hero{
  display:grid;grid-template-columns:minmax(260px,320px) 1fr;gap:22px;align-items:start;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--sh-1);margin:0 0 16px;
}
.mp-profile-hero__photo{
  border-radius:var(--r);overflow:hidden;background:var(--img-bg);
  aspect-ratio:3/4;max-height:440px;align-self:start;position:relative;
}
.mp-profile-hero__photo img{width:100%;height:100%;object-fit:cover}
.mp-profile-hero__info{display:flex;flex-direction:column;gap:16px;min-width:0}
.mp-name{
  font-size:clamp(26px,2.6vw,36px);font-weight:700;letter-spacing:-.02em;
  color:var(--text);margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
/* nome e pillola Online sulla stessa riga: la pillola sta fuori dall'h1,
   cosi' l'h1 e' solo il nome (06-09-2026) */
.mp-name-riga{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mp-description{color:var(--text-2);font-size:15px;line-height:1.55}
/* prezzo di partenza: lo stesso numero della card in vetrina, che fino al
   03-09 spariva proprio quando uno cliccava. Colore accento come
   .mp-price__amount: un prezzo si legge uguale in tutto il sito. */
.mp-from{
  margin:0;display:flex;align-items:baseline;gap:7px;
  font-size:13.5px;color:var(--text-3);
}
.mp-from b{font-size:23px;font-weight:700;color:var(--accent);letter-spacing:-.02em}
/* ⭐ La riga di fatti che il build scrive nella scheda prima che il JS la
   sostituisca col vivo: eta', paese, lingue, prezzo di partenza, foto. Esiste
   perche' la pagina deve dire chi e' anche a chi non aspetta il javascript. */
.mp-fatti{color:var(--text-3);font-size:13.5px;margin:10px 0 0}

/* schede fatto/valore */
.mp-dettagli-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px;
  list-style:none;margin:0;padding:0;
}
.mp-dettagli-facts li{
  background:var(--surface-3);border:1px solid transparent;border-radius:var(--r-sm);
  padding:9px 12px;
}
.mp-dettagli-facts .k{
  display:block;font-size:11.5px;color:var(--text-3);margin-bottom:1px;
}
.mp-dettagli-facts .v{font-weight:600;color:var(--text);font-size:14.5px}

/* listino */
.mp-prices{display:flex;flex-direction:column;gap:8px}
.mp-price{
  display:grid;grid-template-columns:110px 1fr auto;gap:16px;align-items:center;
  padding:13px 16px;background:var(--surface-3);border:1px solid transparent;
  border-radius:var(--r);transition:background .18s var(--ease),border-color .18s var(--ease);
}
.mp-price:hover{background:var(--surface-4);border-color:var(--border-2)}
.mp-price__amount{
  font-size:24px;font-weight:700;color:var(--accent);line-height:1;
  display:flex;align-items:baseline;gap:3px;letter-spacing:-.02em;
}
.mp-price__desc{color:var(--text-3);font-size:13.5px}
.mp-price__desc b{display:block;font-size:15px;color:var(--text);font-weight:600;margin-bottom:1px}

/* contatti: griglia di azioni tonde, come il menu allegati di Telegram */
.mp-contacts{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.mp-contact{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;
  padding:16px 12px;background:var(--surface-3);border:1px solid transparent;
  border-radius:var(--r);color:inherit;
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.mp-contact:hover{background:var(--surface-4);transform:translateY(-2px);text-decoration:none}
.mp-contact__ico{
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:15px;font-weight:700;
  background:var(--brand-color,var(--accent));color:#fff;
}
.mp-contact__label{font-size:13.5px;font-weight:600;color:var(--text)}
.mp-contact__value{font-size:12px;color:var(--text-3);word-break:break-all}
.mp-contact--gated .mp-contact__value{filter:blur(4px);user-select:none}
.mp-contact--telegram{--brand-color:#229ED9}
.mp-contact--whatsapp{--brand-color:#25D366}
.mp-contact--discord{--brand-color:#5865F2}
.mp-contact--email{--brand-color:#EA4335}
.mp-contact--twitter{--brand-color:#48545F}
.mp-contact--instagram{--brand-color:#E4405F}

.mp-actions-bar{display:flex;flex-wrap:wrap;gap:10px}
.mp-actions-bar .mp-btn{flex:1;min-width:180px}

/* galleria foto */
.mp-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px;margin:0 0 14px}
.mp-photo-grid__item{
  position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  border-radius:var(--r-sm);background:var(--img-bg);
  transition:transform .18s var(--ease);
}
.mp-photo-grid__item:hover{transform:scale(1.02)}
.mp-photo-grid__item img{width:100%;height:100%;object-fit:cover}
.mp-photo-grid__item--locked img{filter:blur(16px) brightness(.6)}
.mp-photo-grid__overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:7px;color:#fff;
}
.mp-photo-grid__price{
  background:var(--accent);color:var(--on-accent);padding:4px 11px;
  border-radius:var(--r-pill);font-size:12.5px;font-weight:700;
}
/* ⭐⭐ Il comando «togli» sotto ogni foto dell'area era un link di 12px DENTRO
   un riquadro con overflow:hidden e aspect-ratio 1/1: finiva sotto il bordo e
   non si vedeva affatto. Ora e' una barra in fondo al riquadro, alta 40px, e
   la conferma (Togli / Tieni) sta nella stessa barra. (05-09-2026) */
.mp-photo-grid__togli,.mp-photo-grid__conferma{
  position:absolute;left:0;right:0;bottom:0;min-height:40px;display:flex;align-items:center;
  justify-content:center;gap:6px;padding:4px 6px;box-sizing:border-box;
  background:var(--surface);border-top:1px solid var(--border);
}
.mp-photo-grid__togli{
  border:0;border-top:1px solid var(--border);border-radius:0;width:100%;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:var(--text-2);
}
.mp-photo-grid__togli:hover{color:var(--text);background:var(--surface-3)}
.mp-photo-grid__conferma .mp-btn{flex:1 1 0;min-height:34px;padding:6px 6px;font-size:12.5px}
.mp-photo-grid__item:has(.mp-photo-grid__conferma){outline:2px solid var(--accent);outline-offset:-2px}

/* ⭐ Le lingue che parla, come pillole intere da toccare: la casella da 13px
   era il bersaglio, e sul telefono si mancava. Accesa quando spuntata. */
.lingua-scelta{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px 8px 10px;min-height:40px;
  border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface-2);
  cursor:pointer;font-size:13.5px;color:var(--text-2);
}
.lingua-scelta input{width:18px;height:18px;margin:0;accent-color:var(--accent);cursor:pointer}
.lingua-scelta:has(input:checked){border-color:var(--accent);background:var(--surface);color:var(--text);font-weight:600}

/* ================================================================= FORM */
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 14px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}
.field label{font-size:13px;font-weight:500;color:var(--text-2)}
.field input,.field select,.field textarea{
  border:1px solid var(--border-2);border-radius:var(--r-sm);padding:11px 13px;
  font:inherit;font-size:14.5px;background:var(--bg);color:var(--text);outline:none;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.field input[type=checkbox]{width:auto;accent-color:var(--accent)}
.field input[type=file]{padding:9px 11px;color:var(--text-2)}
.field .hint{font-size:12.5px;color:var(--text-3)}
/* campo che non va: il bordo lo dice, ma il motivo sta scritto sopra in
   parole, perche' un bordo rosso da solo non spiega cosa manca */
.field--ko input,.field--ko select,.field--ko textarea{border-color:var(--red)}
.field--ko label{color:var(--red-text)}
select{color-scheme:light}
:root[data-theme="dark"] select{color-scheme:dark}

/* checklist di attivazione */
.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.checklist li{
  display:flex;gap:12px;align-items:flex-start;padding:12px 14px;
  border-radius:var(--r);background:var(--surface-3);
  color:var(--text-2);font-size:13.5px;line-height:1.5;
  border-left:3px solid var(--accent);
}
.checklist li b{color:var(--text)}
.checklist li.done{border-left-color:var(--green)}
.checklist .mark{
  flex:0 0 auto;width:21px;height:21px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:12px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
}

/* ================================================================== KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px}
.kpi{background:var(--surface-3);border:1px solid transparent;border-radius:var(--r);padding:15px 16px}
.kpi .k{font-size:12.5px;color:var(--text-3);margin-bottom:3px}
/* ⛔ 26px fissi in una cella da 138px: sulla pagina "diventa camgirl" i
   tre passi usano questo riquadro per un TITOLO, non per un numero, e "Ti
   certifichiamo" misurava 155px dentro 138. Debordava, e a 390px la parola
   arrivava a filo del bordo. Il corpo scende solo sotto i ~500px: sul
   desktop resta 26. ⭐ E l'a-capo forzato e' la rete: una parola lunga di
   una lingua che non abbiamo ancora non deve poter uscire dalla scatola. */
.kpi .v{font-size:clamp(19px,5.2vw,26px);font-weight:700;color:var(--text);
  line-height:1.15;letter-spacing:-.02em;overflow-wrap:break-word}
.kpi .d{font-size:12.5px;color:var(--text-3);margin-top:4px;line-height:1.45}
.kpi--accent .v{color:var(--accent)}

/* =============================================================== TABELLE */
.tbl-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--border)}
.tbl{width:100%;border-collapse:collapse;background:var(--surface);font-size:13.5px;min-width:520px}
.tbl th{
  background:var(--surface-3);color:var(--text-2);font-weight:600;font-size:12.5px;
  padding:11px 14px;text-align:left;white-space:nowrap;
}
.tbl td{padding:11px 14px;border-top:1px solid var(--border);color:var(--text-2)}
.tbl tbody tr:hover td{background:var(--surface-3)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .pos{color:var(--green-text);font-weight:600}
.tbl .neg{color:var(--accent);font-weight:600}
/* Una voce spenta si attenua, i suoi bottoni no: «rimetti in vendita» deve
   restare pieno e leggibile, e' l'unica cosa da premere su quella riga. */
.tbl tr.is-spenta td:not([data-azioni]){opacity:.55}
/* ⭐ La voce in modifica e il modulo sotto di lei sono UNA cosa: stesso
   fondo, nessun filo in mezzo, e il modulo prende tutta la larghezza. */
.tbl tr.is-modifica td,.tbl tbody tr.is-modifica:hover td{background:var(--surface-2)}
.tbl tr.tbl__modifica td,.tbl tbody tr.tbl__modifica:hover td{
  background:var(--surface-2);border-top:0;padding:0 16px 14px;
}
/* ⛔⛔ `min-width:520px` qui sopra protegge le tabelle LARGHE (movimenti,
   listino): a 390px si scorrono di lato invece di schiacciarsi. Ma su una
   tabella di due colonne diventa il contrario: il 03-09 su `about.html` la
   colonna dei numeri stava fuori schermo, cioe' la pagina diceva "a te" e
   "a CamGirls World" senza dire QUANTO, che e' l'unica cosa per cui una
   camgirl apre quella pagina. Si vedeva solo guardandola sul telefono.
   ⭐ Il CSS non sa contare le colonne: chi ne ha due lo dichiara. */
.tbl--stretta{min-width:0}

/* =================================================== AREE RISERVATE */
.area__titolo{
  max-width:var(--shell);margin:0 auto;padding:18px 16px 0;
  font-size:24px;letter-spacing:-.02em;
}
.area{
  max-width:var(--shell);margin:0 auto;
  /* ⛔ minmax(0,...) su TUTTE e due le tracce: una traccia 1fr ha minimo
     auto, cioe' non scende sotto il contenuto. Con dentro una striscia
     scorrevole (il menu su mobile) la griglia si allarga invece di far
     scorrere il figlio, e la pagina straripa. */
  display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:16px;
  padding:18px 16px 34px;
}
.area__nav{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:8px;align-self:start;position:sticky;top:calc(var(--bar-h) + 60px);
}
.area__nav a{
  display:block;padding:9px 12px;border-radius:var(--r-sm);color:var(--text-2);
  font-size:14px;transition:background .16s var(--ease),color .16s var(--ease);
}
.area__nav a:hover{background:var(--surface-3);color:var(--text)}
/* ⭐ La spunta accanto alla voce: il menu dice da fuori cosa e' fatto.
   Il segno usa i token, cosi' regge tutti e due i temi. */
.area__nav a{display:flex;align-items:center;gap:8px}
/* ⛔ Era `color:var(--text-3)`, cioe' un puntino grigio a 12px accanto a
   una spunta verde: il segno che dice "qui manca qualcosa" spariva, ed e'
   il mestiere di questa barra. Ora prende il token dell'attenzione, e la
   forma cambia (pallino contro spunta), non solo il colore. */
.area__nav .spunta{margin-left:auto;font-size:11px;color:var(--warn-text);line-height:1}
.area__nav .spunta--ok{color:var(--green-text);font-weight:700}
.area__nav a.is-active .spunta{color:var(--on-accent)}
.area__nav a.is-active{background:var(--accent);color:var(--on-accent);font-weight:600}
.area__nav .grp{
  font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-3);padding:12px 12px 5px;
}

/* ==================================================================== FAQ */
.faq{max-width:840px}
.faq h3{font-size:15.5px;font-weight:600;color:var(--accent);margin:22px 0 5px}
.faq h3:first-child{margin-top:0}
.faq p{margin:0 0 6px;font-size:14px;line-height:1.6;color:var(--text-2)}
.faq ul{margin:4px 0 10px;padding-left:20px;font-size:14px;line-height:1.6;color:var(--text-2)}
.faq b{color:var(--text)}

/* =============================================================== SEZIONI */
.section{padding:26px 0}
.section__head{margin-bottom:16px}
.section__head h2{font-size:21px;font-weight:700;letter-spacing:-.02em}
.section__head p{margin:4px 0 0;color:var(--text-3);font-size:14px}

/* ================================================================ FOOTER */
.footer{
  background:var(--surface);border-top:1px solid var(--border);
  padding:26px 16px 30px;margin-top:20px;
}
.footer__inner{max-width:var(--shell);margin:0 auto;text-align:center}
.footer__brand{display:flex;justify-content:center;margin-bottom:14px}
.footer__brand svg{height:26px;opacity:.85}
.footer__social{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.footer__social a{
  width:36px;height:36px;border-radius:50%;background:var(--surface-3);
  color:var(--text-2);display:inline-flex;align-items:center;justify-content:center;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.footer__social a:hover{background:var(--accent);color:#fff}
.footer__links{
  display:flex;justify-content:center;gap:6px 18px;flex-wrap:wrap;margin-bottom:12px;
  font-size:13.5px;
}
.footer__links a{color:var(--text-2)}
.footer__links a:hover{color:var(--accent)}
.footer__legal{font-size:12px;line-height:1.6;color:var(--text-3);max-width:860px;margin:0 auto}
.footer__note{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  padding:5px 13px;border-radius:var(--r-pill);
  background:var(--warn-bg);color:var(--warn-text);font-size:12px;
  border:1px solid var(--warn-border);
}

/* ============================================================== AGE GATE */
.age-gate{
  position:fixed;inset:0;z-index:2000;background:rgba(8,14,20,.92);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.age-gate[hidden]{display:none}
.age-gate__box{
  background:var(--surface);max-width:460px;width:100%;padding:30px 28px;
  border-radius:var(--r-xl);text-align:center;box-shadow:var(--sh-2);
  border:1px solid var(--border);
}
.age-gate__box svg{height:34px;margin:0 auto 16px}
.age-gate__box h2{font-size:21px;margin-bottom:10px}
/* ⭐ La conferma dell'ingresso, dentro il cancello e sopra la domanda: chi
   arriva dal bot deve leggere PRIMA che il login e' andato bene, se no il
   cancello sembra la risposta al bottone che ha appena toccato. */
/* ⚠️ Il selettore e' discendente e non semplice apposta: `.age-gate__box p`
   vale (0,1,1) e vincerebbe su una classe sola, quindi la riga usciva grigia
   come il testo legale invece che verde. */
.age-gate__box .age-gate__entrato{
  display:inline-flex;align-items:center;gap:7px;margin:0 0 14px;
  padding:7px 14px;border-radius:var(--r-pill);
  background:rgba(77,205,94,.14);color:var(--green-text);
  font-size:13px;font-weight:600;
}
.age-gate__entrato::before{content:"\2713"}
.age-gate__entrato[hidden]{display:none}
.age-gate__box p{font-size:14px;color:var(--text-2);line-height:1.6;margin:0}
.age-gate__actions{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap}

/* ============================================================ RESPONSIVE */
@media (max-width:1280px){
  .layout{grid-template-columns:280px minmax(0,1fr)}
  .col-aside--right{display:none}
  /* ⛔⛔ La home ha SOLO main e spalla destra (`layout--due`): con la spalla
     nascosta e due colonne, il main finiva nella colonna da 280px e la home
     era una striscia stretta su ogni schermo fino a 1280px. Visto da Marco
     il 06-09 («e' una merda»), misurato: main 280px, spalla 0. Una colonna. */
  .layout--due{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:980px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .col-aside{order:3}
  .col-main{order:1}
  .sticky{position:static}
  .area{grid-template-columns:minmax(0,1fr)}
  /* La striscia scorre ma non lo diceva: l'ultima linguetta restava
     tagliata a meta' sul bordo e sembrava testo troncato per errore. La
     sfumatura a destra e' l'unico modo di dirlo senza aggiungere un bottone.
     ⭐ E la linguetta attiva si porta in vista da sola: vedi camgirl-area.js. */
  /* ⛔⛔ Era una striscia che scorreva di lato: 8 voci, tre visibili e
     mezza («Foto e v...»), e Soldi, I tuoi dati ed Esci nascosti oltre il
     bordo. Marco, 05-09-2026: «il menu dev'essere migliorato molto per
     mobile». Adesso le voci sono pillole che VANNO A CAPO: si vedono tutte,
     con la spunta di cosa e' fatto, e niente scorre di nascosto. */
  .area__nav{position:static;display:flex;flex-wrap:wrap;gap:6px;overflow:visible;min-width:0;padding:8px}
  .area__nav a{white-space:nowrap;padding:8px 12px;font-size:13px;border-radius:var(--r-pill);
    border:1px solid var(--border);background:var(--surface-2)}
  .area__nav a.is-active{border-color:transparent}
  .area__nav a[data-logout]{border-style:dashed;color:var(--text-3)}
  .area__nav .grp{display:none}
  .mp-price{grid-template-columns:auto 1fr;gap:8px 14px}
  .mp-price .mp-btn{grid-column:1/-1}
}
@media (max-width:720px){
  /* sotto i 720 la barra non tiene logo + ricerca + azioni sulla stessa riga:
     la ricerca scende su una riga sua invece di schiacciarsi a icona */
  .appbar__inner{gap:10px;padding:8px 12px;flex-wrap:wrap}
  .appbar__logo svg{height:26px}
  /* ⭐ Le bandierine restano anche sul telefono (06-09-2026, Marco: «on mobile
     you don't see the language buttons»): prima erano nascoste sotto i 720px e
     non c'era nessun altro modo di cambiare lingua. Stanno nella riga della
     ricerca, dopo di lei. */
  .appbar__actions{order:2}
  .langs{order:4;flex:0 0 auto}
  .appbar__spacer{display:none}
  .search{order:3;flex:1 1 0%;min-width:0;max-width:none}
  .appbar__actions{margin-left:auto}
  .hero{min-height:250px}
  .hero__body{padding:20px}
  .shell,.mp,.area{padding-left:12px;padding-right:12px}
  /* ⛔⛔ La striscia di pillole costava 58px sopra OGNI pagina, e con la
     barra faceva 161px prima che il contenuto cominciasse: un quarto del
     primo schermo. Deciso da Marco il 04-09-2026: sul telefono se ne va dal
     flusso. ⭐ Non spariscono le destinazioni: `barraStretta()` sposta questa
     stessa <nav> dentro la barra, e il bottone del menu la apre qui sotto.
     ⛔ Il selettore e' `.appbar > .folders` apposta: le linguette della
     scheda hanno la stessa classe base e devono restare dove sono. */
  .appbar__menu{display:inline-flex}
  .appbar > .folders{
    position:absolute;left:0;right:0;top:100%;z-index:59;display:none;
    box-shadow:var(--sh-2);
  }
  .appbar > .folders.is-open{display:block}
  .appbar > .folders .folders__inner{
    flex-direction:column;align-items:stretch;gap:3px;
    padding:8px 12px 12px;overflow:visible;
  }
  .appbar > .folders a{padding:12px 14px;border-radius:var(--r)}
  /* ⛔⛔ Sul telefono la foto della scheda si prendeva TUTTO il primo
     schermo: 433px di foto sotto 161px di barra, su 390px di larghezza. Chi
     apriva una scheda vedeva una faccia e basta, e nome, stato e prezzo
     restavano sotto la piega. La foto resta la prima cosa (e' la ragazza, e' il
     motivo per cui uno clicca) ma smette di essere l'unica: quadrata e con un
     tetto, cosi' nome e "Da X EUR" entrano nello stesso schermo.
     ⚠️ Il tetto e' in px e non in vh apposta: `vh` qui vale l'altezza piena
     del telefono (844), non quella che resta sotto la barra del browser
     (~660), quindi non avrebbe tagliato niente. (03-09-2026) */
  .mp-profile-hero{grid-template-columns:1fr;gap:14px}
  .mp-profile-hero__photo{aspect-ratio:1/1;max-width:340px;max-height:300px;margin:0 auto}
  .mp-profile-hero__info{gap:12px}
  /* ⛔⛔ Le tabelle (listino, vendite, prelievi) erano larghe 520px e
     scorrevano di lato SENZA dirlo: sul telefono si vedevano «Servizio» e
     «Descrizione», e il prezzo coi bottoni stavano fuori schermo. Lei non
     poteva ne' leggere i prezzi ne' modificarli. Adesso ogni riga e' una
     scheda, e i numeri portano l'etichetta della colonna (`data-eti`). */
  .tbl-wrap--schede{overflow:visible;border:0;border-radius:0}
  .tbl--schede{min-width:0;background:transparent;display:block}
  .tbl--schede thead{display:none}
  .tbl--schede tbody{display:block}
  .tbl--schede tr{display:block;background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r);padding:10px 12px;margin:0 0 8px}
  .tbl--schede td{display:block;padding:2px 0;border:0;text-align:left}
  .tbl--schede td:first-child{color:var(--text);font-weight:600;font-size:14px}
  .tbl--schede .num{text-align:left}
  .tbl--schede tbody tr:hover td{background:transparent}
  .tbl--schede td[data-eti]::before{content:attr(data-eti) ": ";color:var(--text-3);font-size:12px}
  .tbl--schede td[data-azioni]{padding-top:8px;display:flex;flex-wrap:wrap;gap:6px}
  /* ⭐ Sul telefono i due bottoni della riga si dividono la larghezza: due
     bersagli da 44px, uno per pollice. */
  .tbl--schede td[data-azioni] .mp-btn--riga{flex:1 1 0;margin-left:0;min-height:44px}
  /* La voce in modifica e il suo modulo diventano una scheda sola, col
     bordo dell'accento: si vede a colpo d'occhio QUALE voce si sta
     cambiando. */
  .tbl--schede tr.is-modifica{border-color:var(--accent);border-bottom:0;
    border-radius:var(--r) var(--r) 0 0;margin-bottom:0}
  .tbl--schede tr.tbl__modifica{border-color:var(--accent);border-top:0;
    border-radius:0 0 var(--r) var(--r);padding-top:0}
  .tbl--schede tr.is-modifica td,.tbl--schede tbody tr.is-modifica:hover td{background:transparent}
  .tbl--schede tr.tbl__modifica td,.tbl--schede tbody tr.tbl__modifica:hover td{background:transparent;padding:0}
  /* ⭐ Nell'area di lei la ricerca delle camgirl non serve, e sul telefono
     costava una riga intera sul primo schermo. */
  body[data-nav="camgirl-area"] .search{display:none}
  .area__titolo{font-size:20px;padding-top:12px}
  /* ⭐ Le pilloline cliccabili (i comandi dei video nell'area, i bottoni dei
     video sulla scheda, i suggerimenti della ricerca) erano alte 28px: un
     bersaglio da mouse. Sul telefono 40px. */
  .chip--click{min-height:40px;padding:8px 14px;font-size:13.5px}
}
@media (max-width:520px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card__over{padding:8px 9px}
  .card__name{font-size:13.5px}
  .card__price{font-size:11.5px;padding:3px 8px}
  .tag{font-size:10px;padding:3px 8px;max-width:calc(100% - 4px)}
  .tag--live{font-size:10px}
  .card__tags{max-width:calc(100% - 68px)}
  .mp-contacts{grid-template-columns:repeat(2,1fr)}
  .panel,.mp-section,.mp-profile-hero{padding:15px}
  .hero__name{font-size:30px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}


/* ------------------------------------------------------------------ FILE
   ⛔ Il campo di caricamento era l'unico controllo non vestito di tutto il
   sito: "Scegli file | Nessun file selezionato" in mezzo ai bottoni tondi,
   e proprio nel passo piu' importante dell'iscrizione (le 3 foto). Il testo
   dentro al bottone lo scrive il browser e cambia da solo fra telefono e
   desktop: non si traduce, si veste. */
input[type=file]{
  font:inherit;font-size:14px;color:var(--text-3);max-width:100%;
}
input[type=file]::file-selector-button{
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  padding:9px 15px;margin-right:12px;
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-3);color:var(--text);
  transition:background .16s var(--ease),border-color .16s var(--ease);
}
input[type=file]::file-selector-button:hover{background:var(--surface-2);border-color:var(--accent)}
input[type=file]:focus-visible::file-selector-button{outline:2px solid var(--accent);outline-offset:2px}


/* --------------------------------------------------- STRISCIA CHE SCORRE
   ⛔ La sfumatura sul bordo dice "c'e' dell'altro di la'", e va messa SOLO
   dal lato dove c'e' davvero: una sfumatura fissa a destra lasciava l'ultima
   voce ("Esci") smorzata anche a fine corsa, e smorzato vuol dire spento.
   Le classi le mette `CGW.striscia()` in cgw.js, che ascolta lo
   scorrimento. Vale per QUALSIASI striscia, non solo per le linguette. Senza JS non compare nessuna sfumatura, e la striscia resta
   una striscia che scorre: si perde un indizio, non una funzione. */
.sfuma-dx{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent 100%);
}
.sfuma-sx{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 100%);
}
.sfuma-sx.sfuma-dx{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
}


/* -------------------------------------------------- I DATI DELLA SCHEDA
   ⛔ Sono CINQUE (eta', paese, recensioni, foto, video) e la griglia e'
   `auto-fit`: sul telefono stanno su due colonne, quindi l'ultimo resta solo
   nella colonna di sinistra con un buco a destra, e la scheda finisce
   sbilenca proprio sotto il nome.
   ⚠ La regola NON si puo' scrivere in generale: con `auto-fit` le colonne
   sono due, tre o cinque a seconda della larghezza, e `:nth-child(odd)`
   allargherebbe l'ultimo anche quando la riga e' piena. Quindi qui sotto si
   FISSANO due colonne, cosi' "ultimo in posizione dispari" vuol dire davvero
   "solo sulla sua riga", e solo allora si allarga. */
@media (max-width:430px){
  .mp-dettagli-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mp-dettagli-facts li:last-child:nth-child(odd){grid-column:1/-1}
}


/* L'eco della finestra di consegna, sotto al campo: quello che leggera' il
   cliente, scritto mentre lei sceglie il numero. Non e' un aiuto grigio come
   gli altri, e' la promessa, quindi si legge. */
.promessa{
  display:block;margin-top:5px;font-size:13px;font-weight:600;color:var(--text-2);
}

/* ⛔⛔ Le due porte del login. Il ruolo stava in una pillola da 12px e il
   titolo grande diceva «Il tuo Telegram e' il tuo account» / «Puoi comprare
   senza account»: Marco (05-09-2026) non capiva quale porta fosse di chi. Il
   ruolo e' il titolo, grande, e sta anche nel bottone. */
.login-card .login-card__ruolo{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 0 6px;color:var(--accent)}
.login-card .login-card__lead{font-size:15px;font-weight:600;color:var(--text);margin:0 0 10px}

/* ⭐ La domanda prima di uscire: un riquadro sotto la barra, a destra, dove
   sta il bottone. Fisso, cosi' vale dalla barra e dal menu dell'area. */
.esci-pop{
  position:fixed;top:calc(var(--bar-h) + 8px);right:12px;z-index:80;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);padding:14px 16px;max-width:calc(100vw - 24px);width:300px;
}
.esci-pop__testo{font-size:14px;color:var(--text);margin:0 0 12px;font-weight:600}
.esci-pop__azioni{display:flex;gap:8px;justify-content:flex-end}

/* ⭐⭐ La mancia sulla scheda: un riquadro in coda al listino, con quattro cifre
   pronte e un campo libero. Il bottone e' primario come «Paga adesso»: e' un
   pagamento. (05-09-2026, Marco: «il cliente decide che cifra mandare») */
.mp-mancia{
  margin-top:16px;padding:14px 16px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--border);
}
.mp-mancia__titolo{margin:0 0 4px;font-size:16px;font-weight:700;color:var(--text)}
.mp-mancia__testo{margin:0 0 12px;font-size:13.5px;color:var(--text-3);line-height:1.5}
.mp-mancia__cifre{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.mp-mancia__cifre .chip--click{min-height:40px;padding:8px 16px;font-size:14px}
.mp-mancia__riga{display:flex;gap:8px;flex-wrap:wrap}
.mp-mancia__riga input{
  flex:1 1 140px;min-height:44px;border:1px solid var(--border-2);border-radius:var(--r-sm);
  padding:10px 13px;font:inherit;font-size:16px;background:var(--bg);color:var(--text);outline:none;
}
.mp-mancia__riga input:focus{border-color:var(--accent)}
.mp-mancia__riga .mp-btn{flex:1 1 160px;min-height:44px}

/* ⭐⭐ Il listino FISSO (05-09-2026 sera): tutte le voci del catalogo, lei scrive
   solo il prezzo. Il campo e' grande da toccare; la riga senza prezzo si
   attenua nel nome, ma il campo no: e' proprio quello da riempire. */
.tbl input.prezzo{
  width:120px;min-height:44px;padding:9px 10px;border:1px solid var(--border-2);
  border-radius:var(--r-sm);font:inherit;font-size:16px;background:var(--bg);color:var(--text);
  text-align:right;
}
.tbl input.prezzo:focus{border-color:var(--accent);outline:none}
.tbl tr.is-vuota td:first-child{opacity:.6}
.chip--on{color:var(--green-text);border-color:var(--green-text);background:transparent}
.chip--off{color:var(--warn-text);border-color:var(--warn-text);background:transparent}
@media (max-width:720px){
  .tbl--schede input.prezzo{width:100%;text-align:left}
}
/* la tabella dei prezzi: la descrizione sotto il nome, grigia e piccola */
.tbl--prezzi td small{color:var(--text-3);font-size:12.5px;font-weight:400}

/* ⭐⭐ Le immagini VELATE (06-09-2026, Marco: «le anteprime dei video e le foto
   oscurate se non si e' fatto l'accesso»). La sfocatura la fa il SERVIZIO: a chi
   non ha una sessione serve una copia velata, perche' un blur nel CSS lascerebbe
   la foto nitida al suo indirizzo. Qui si scrive solo il perche' sopra l'immagine.
   `html.velato` la mette cgw.js quando il server dice che non sei entrato. */
html.velato :is(.card__media,.strip__thumb,.mp-profile-hero__photo,.mp-photo-grid__item)::before{
  content:"Sign in to see";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:4;padding:8px 12px 8px 32px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;
  color:#fff;background:rgba(0,0,0,.58) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'><rect x='4' y='10.5' width='16' height='10' rx='2.5'/><path d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/></svg>") 11px 50%/15px no-repeat;
  white-space:nowrap;pointer-events:none;letter-spacing:.01em;
}
html[lang="it"].velato :is(.card__media,.strip__thumb,.mp-profile-hero__photo,.mp-photo-grid__item)::before{content:"Entra per vedere"}
html[lang="es"].velato :is(.card__media,.strip__thumb,.mp-profile-hero__photo,.mp-photo-grid__item)::before{content:"Entra para ver"}
/* ⭐ In home niente pillola (06-09-2026, Marco): la sfocatura resta, il cartello no. */
body[data-nav="home"] html.velato :is(.card__media,.strip__thumb)::before,
html.velato body[data-nav="home"] :is(.card__media,.strip__thumb)::before{display:none}
/* sotto la pillola il cerchio del play confonde: velata, si toglie */
html.velato .strip__thumb .strip__play{display:none}
@media (max-width:520px){
  html.velato :is(.card__media,.strip__thumb,.mp-photo-grid__item)::before{font-size:11px;padding:6px 9px 6px 26px;background-size:12px;background-position:9px 50%}
}