/* ==========================================================================
   GENESYS LABS · CAPITOLO SORSO · il telefono di sorsoapp.it, per filo e per segno
   Il telefono della home di sorsoapp.it (#mockup-sorso): stessa struttura, stesse regole
   (dallo <style> della pagina, sotto .fr-sorso), stessi colori dei dieci temi (da comune.css)
   e stesso movimento (sorso.js, dallo script della pagina). È disegnato in px come sul sito
   (292 × 552) e scalato intero nella tela del capitolo (22em × 26em). Sopra, l'etichetta del
   tema con «Plus» e Sorsino seduto che saluta; tutta la card prende i colori del tema.
   ========================================================================== */
.fr-sorso[data-ui] {
  position: relative; width: 22em; height: 26em; font-size: var(--fr-fs, 14px); text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.fr-sorso[data-ui] *, .fr-sorso[data-ui] *::before, .fr-sorso[data-ui] *::after { box-sizing: border-box; }
/* il palco: il telefono a misura vera, scalato da sorso.js (--k) e messo in basso al centro */
.fr-sorso[data-ui] .cs-palco {
  position: absolute; left: 50%; bottom: 0; width: 292px; height: 552px;
  transform-origin: 50% 100%; transform: translateX(-50%) scale(var(--k, .5));
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.fr-sorso .mock-telefono {position:relative;
    z-index:1;
    width:292px;
    max-width:100%;
    padding:11px;
    border-radius:40px;
    background:linear-gradient(160deg, #2A303C 0%, #12151D 45%, #262C37 100%); /* taste-skill-ignore: telefono vero di sorsoapp.it */
    box-shadow:0 32px 68px rgba(0, 0, 0, 0.66), inset 0 0 0 1px var(--card-border); /* taste-skill-ignore: telefono vero di sorsoapp.it */
    transform-style:preserve-3d;
    transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s, border-color .45s;}
.fr-sorso .mock-telefono:hover {box-shadow:0 40px 80px rgba(0,0,0,.75), inset 0 0 0 1px var(--card-hover-border)} /* taste-skill-ignore: telefono vero di sorsoapp.it */
.fr-sorso .tel-schermo {position:relative;
    height:530px;
    border-radius:30px;
    overflow:hidden;
    background:linear-gradient(180deg, var(--abisso) 0%, var(--fondo) 100%); /* taste-skill-ignore: telefono vero di sorsoapp.it */
    transition:background .45s ease;}
.fr-sorso .tel-schermo::before {content:'';
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:100px;
    height:21px;
    background:#0A0C11;
    border-radius:0 0 13px 13px;
    z-index:5;}
.fr-sorso .tel-acqua {position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:var(--livello, 0%);
    background:var(--water-grad);
    transition:height 0.95s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s ease;
    z-index:1;}
.fr-sorso .tel-onda {position:absolute;
    bottom:calc(100% - 1px);
    left:0;
    display:block;
    width:200%;
    height:22px;}
.fr-sorso .tel-onda path {fill:var(--onda-a);transition:fill .45s ease}
.fr-sorso .onda-1 {animation:onda-scorri 7s linear infinite}
.fr-sorso .onda-2 {height:18px;
    opacity:0.65;
    animation:onda-scorri 4.4s linear infinite reverse;}
.fr-sorso .onda-2 path {fill:var(--onda-accent);transition:fill .45s ease}
@keyframes onda-scorri{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
  }
.fr-sorso .tel-ui {position:relative;
    z-index:2;
    height:100%;
    padding:36px 18px 20px;
    display:flex;
    flex-direction:column;
    color:var(--schiuma);
    transition:color .35s ease;}
.fr-sorso .tel-top {display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.fr-sorso .tel-marchio {font-size:13px;font-weight:800;letter-spacing:2.5px;color:var(--schiuma);transition:color .35s ease} /* taste-skill-ignore: telefono vero di sorsoapp.it */
.fr-sorso .tel-data {font-size:11px;color:var(--mist-soft);margin-top:3px;transition:color .35s ease}
.fr-sorso .tel-goccia {width:28px;
    height:28px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:12px;
    flex-shrink:0;
    color:var(--glow);
    background:var(--card-bg);
    border:1px solid var(--card-border); /* taste-skill-ignore: telefono vero di sorsoapp.it */
    transition:color .35s ease, background .35s ease, border-color .35s ease;}
.fr-sorso .tel-numerone {margin-top:24px;display:flex;align-items:baseline;gap:6px}
.fr-sorso .tel-numerone b {font-size:52px;
    font-weight:800;
    letter-spacing:-2px; /* taste-skill-ignore: telefono vero di sorsoapp.it */
    line-height:1;
    font-variant-numeric:tabular-nums;
    color:var(--schiuma);
    transition:color .35s ease;}
.fr-sorso .tel-numerone span {font-size:16px;font-weight:600;color:var(--mist-soft);transition:color .35s ease}
.fr-sorso .tel-conta {font-size:13px;color:var(--mist);margin-top:8px;transition:color .35s ease}
.fr-sorso .tel-bicchieri {display:flex;gap:5px;margin-top:22px}
.fr-sorso .tel-bicchieri span {width:14px;
    height:18px;
    border-radius:2px 2px 5px 5px;
    border:1.5px solid var(--card-border); /* taste-skill-ignore: telefono vero di sorsoapp.it */
    background:rgba(0,0,0,0.12);
    transition:background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;}
.fr-sorso .tel-bicchieri span.pieno {background:linear-gradient(180deg, var(--glow), var(--onda-a)); /* taste-skill-ignore: telefono vero di sorsoapp.it */
    border-color:var(--glow);
    box-shadow:0 0 8px var(--glow);} /* taste-skill-ignore: telefono vero di sorsoapp.it */
.fr-sorso .tel-obiettivo {margin-top:18px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Roboto Mono",monospace; /* taste-skill-ignore: telefono vero di sorsoapp.it */
    font-size:10.5px;
    font-weight:700;
    letter-spacing:1.2px; /* taste-skill-ignore: telefono vero di sorsoapp.it */
    text-transform:uppercase; /* taste-skill-ignore: telefono vero di sorsoapp.it */
    color:var(--mist-soft);
    transition:color .35s ease;}
.fr-sorso .tel-pulsantone {margin-top:auto;
    background:var(--schiuma);
    color:var(--ink);
    font-size:13.5px;
    font-weight:750;
    text-align:center;
    padding:13.5px;
    border-radius:9999px;
    box-shadow:0 8px 20px rgba(0, 0, 0, 0.25); /* taste-skill-ignore: telefono vero di sorsoapp.it */
    cursor:pointer;
    user-select:none;
    border:none;
    transition:transform 0.15s ease, box-shadow 0.2s ease, background 0.35s ease, color 0.35s ease;}
.fr-sorso .tel-pulsantone:hover {transform:scale(1.02);box-shadow:0 10px 24px rgba(0,0,0,0.32)} /* taste-skill-ignore: telefono vero di sorsoapp.it */
.fr-sorso .tel-pulsantone.premuto {animation:tel-premi 0.45s ease}
@keyframes tel-premi{
    50%{transform:scale(0.955);box-shadow:0 4px 12px var(--glow)} /* taste-skill-ignore: telefono vero di sorsoapp.it */
  }
.fr-sorso .tel-scorciatoie {display:flex;gap:7px;margin-top:11px}
.fr-sorso .tel-scorciatoie span {flex:1;
    text-align:center;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Roboto Mono",monospace; /* taste-skill-ignore: telefono vero di sorsoapp.it */
    font-size:11px;
    font-weight:600;
    color:var(--schiuma);
    background:var(--card-bg);
    border:1px solid var(--card-border); /* taste-skill-ignore: telefono vero di sorsoapp.it */
    border-radius:9999px;
    padding:6.5px 0;
    cursor:pointer;
    user-select:none;
    transition:background 0.2s, border-color 0.2s, color 0.2s;}
.fr-sorso .tel-scorciatoie span:hover {background:var(--card-hover-border);
    border-color:var(--glow);
    color:var(--schiuma);}

/* le onde sono larghe il doppio dello schermo e scorrono di metà: il max-width delle svg del nostro sito le tagliava */
.fr-sorso .tel-onda { max-width: none; }
/* la scena del tema (sorso-scena: pesci, petali, cubetti, schiuma, aurora…) sta sopra l'acqua e sotto l'interfaccia */
.fr-sorso .scena-canvas { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; }

/* le transizioni al cambio tema di comune.css */
.fr-sorso .tel-schermo, .fr-sorso .tel-acqua, .fr-sorso .tel-ui, .fr-sorso .tel-pulsantone, .fr-sorso .tel-goccia, .fr-sorso .mock-telefono, .fr-sorso .tel-scorciatoie span, .fr-sorso .tel-bicchieri span {
  transition: background .45s ease, background-color .45s ease, border-color .45s ease, color .35s ease, box-shadow .45s ease;
}
.fr-sorso .tel-acqua { transition: height 0.95s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s ease; }
.fr-sorso .tel-onda path { transition: fill .45s ease; }
.fr-sorso[data-attivo="false"] .tel-onda { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .fr-sorso * { animation: none !important; transition: none !important; } }

/* ── I dieci temi dell'app (sorsoapp.it/comune.css) ── */
.fr-sorso[data-ui][data-tema="notte"] { --fondo: #02171F; --abisso: #041D27; --schiuma: #EAFBFF; --mist: #9FCBD8; --mist-soft: rgba(159,203,216,.78); --glow: #7BF0FF; --ink: #04303D; --water-grad: linear-gradient(180deg, #0A7A8F 0%, #0A5F7C 50%, #073F5B 100%); --onda-a: #0A7A8F; --onda-accent: rgba(123,240,255,.34); --card-bg: rgba(11,42,52,.91); --card-border: rgba(123,240,255,.18); --card-hover-border: rgba(123,240,255,.40); --sorsino-corpo: #62E8FF; --sorsino-tratto: #04222B; --abyss-deep: #02171F; --abyss-mid: #041D27; --abyss-soft: #062832; --water-top: #0A7A8F; --water-mid: #0A5F7C; --water-deep: #073F5B; --wave-back: #0B7690; --foam: #EAFBFF; --sunrise: #FFC46B; --is-light: 0; } /* taste-skill-ignore: telefono vero di sorsoapp.it */
.fr-sorso[data-ui][data-tema="giorno"] { --fondo: #F3FAFD; --abisso: #E9F5FA; --schiuma: #06303D; --mist: #3F6270; --mist-soft: rgba(63,98,112,.78); --glow: #0D5A73; --ink: #FFFFFF; --water-grad: linear-gradient(180deg, #7CCDEC 0%, #48A9D2 50%, #34A2D2 100%); --onda-a: #7CCDEC; --onda-accent: rgba(13,90,115,.34); --card-bg: rgba(220,236,242,.95); --card-border: rgba(13,90,115,.18); --card-hover-border: rgba(13,90,115,.40); --sorsino-corpo: #2FB6E4; --sorsino-tratto: #052A38; --abyss-deep: #F3FAFD; --abyss-mid: #E9F5FA; --abyss-soft: #FFFFFF; --water-top: #7CCDEC; --water-mid: #48A9D2; --water-deep: #34A2D2; --wave-back: #9BD9F2; --foam: #06303D; --sunrise: #C98416; --is-light: 1; } /* taste-skill-ignore: telefono vero di sorsoapp.it */
.fr-sorso[data-ui][data-tema="ciliegio"] { --fondo: #150610; --abisso: #1F0918; --schiuma: #FFEEF4; --mist: #D6A3B7; --mist-soft: rgba(214,163,183,.78); --glow: #FFB3CE; --ink: #2A0A16; --water-grad: linear-gradient(180deg, #B8446E 0%, #9B3459 50%, #6E2140 100%); --onda-a: #B8446E; --onda-accent: rgba(255,179,206,.34); --card-bg: rgba(44,19,35,.91); --card-border: rgba(255,179,206,.18); --card-hover-border: rgba(255,179,206,.40); --sorsino-corpo: #FFB3CE; --sorsino-tratto: #260812; --abyss-deep: #150610; --abyss-mid: #1F0918; --abyss-soft: #2B0D21; --water-top: #B8446E; --water-mid: #9B3459; --water-deep: #6E2140; --wave-back: #C64472; --foam: #FFEEF4; --sunrise: #FFC46B; --is-light: 0; } /* taste-skill-ignore: telefono vero di sorsoapp.it */
.fr-sorso[data-ui][data-tema="birra"] { --fondo: #171004; --abisso: #221807; --schiuma: #FFF6E3; --mist: #C9A66B; --mist-soft: rgba(201,166,107,.78); --glow: #FFC44A; --ink: #3B2708; --water-grad: linear-gradient(180deg, #936517 0%, #9A6412 50%, #6B3F0C 100%); --onda-a: #936517; --onda-accent: rgba(255,196,74,.34); --card-bg: rgba(47,34,11,.91); --card-border: rgba(255,196,74,.18); --card-hover-border: rgba(255,196,74,.40); --sorsino-corpo: #FFC44A; --sorsino-tratto: #241402; --abyss-deep: #171004; --abyss-mid: #221807; --abyss-soft: #31230B; --water-top: #936517; --water-mid: #9A6412; --water-deep: #6B3F0C; --wave-back: #E0A62E; --foam: #FFF6E3; --sunrise: #FFD98A; --is-light: 0; } /* taste-skill-ignore: telefono vero di sorsoapp.it */
.fr-sorso[data-ui][data-tema="monster"] { --fondo: #070B07; --abisso: #0B130A; --schiuma: #EAFFE0; --mist: #9CC98A; --mist-soft: rgba(156,201,138,.78); --glow: #92FF3C; --ink: #0F1A0A; --water-grad: linear-gradient(180deg, #3E7E18 0%, #3A7A15 50%, #26520D 100%); --onda-a: #3E7E18; --onda-accent: rgba(146,255,60,.34); --card-bg: rgba(19,33,13,.91); --card-border: rgba(146,255,60,.18); --card-hover-border: rgba(146,255,60,.40); --sorsino-corpo: #92FF3C; --sorsino-tratto: #081604; --abyss-deep: #070B07; --abyss-mid: #0B130A; --abyss-soft: #121F0D; --water-top: #3E7E18; --water-mid: #3A7A15; --water-deep: #26520D; --wave-back: #62BC26; --foam: #EAFFE0; --sunrise: #D8FF6B; --is-light: 0; } /* taste-skill-ignore: telefono vero di sorsoapp.it */
.fr-sorso[data-ui][data-tema="vino_rosso"] { --fondo: #1C0611; --abisso: #270918; --schiuma: #FFEDF1; --mist: #D69AAB; --mist-soft: rgba(214,154,171,.78); --glow: #FFA0B8; --ink: #360A15; --water-grad: linear-gradient(180deg, #B01340 0%, #961034 50%, #6B0A25 100%); --onda-a: #B01340; --onda-accent: rgba(255,160,184,.34); --card-bg: rgba(52,18,34,.91); --card-border: rgba(255,160,184,.18); --card-hover-border: rgba(255,160,184,.40); --sorsino-corpo: #FF9FBA; --sorsino-tratto: #240510; --abyss-deep: #1C0611; --abyss-mid: #270918; --abyss-soft: #340C1F; --water-top: #B01340; --water-mid: #961034; --water-deep: #6B0A25; --wave-back: #D92A5C; --foam: #FFEDF1; --sunrise: #FFC46B; --is-light: 0; } /* taste-skill-ignore: telefono vero di sorsoapp.it */
.fr-sorso[data-ui][data-tema="vino_bianco"] { --fondo: #FFFBEF; --abisso: #FFFDF6; --schiuma: #3A2E08; --mist: #6E5A22; --mist-soft: rgba(110,90,34,.78); --glow: #7A5A0A; --ink: #FFFFFF; --water-grad: linear-gradient(180deg, #EBD68A 0%, #E3C96B 50%, #D9BC55 100%); --onda-a: #EBD68A; --onda-accent: rgba(122,90,10,.34); --card-bg: rgba(247,243,232,.95); --card-border: rgba(122,90,10,.18); --card-hover-border: rgba(122,90,10,.40); --sorsino-corpo: #E0A92E; --sorsino-tratto: #322502; --abyss-deep: #FFFBEF; --abyss-mid: #FFFDF6; --abyss-soft: #FFFFFF; --water-top: #EBD68A; --water-mid: #E3C96B; --water-deep: #D9BC55; --wave-back: #F2E4A8; --foam: #3A2E08; --sunrise: #C98416; --is-light: 1; } /* taste-skill-ignore: telefono vero di sorsoapp.it */
.fr-sorso[data-ui][data-tema="spritz"] { --fondo: #1A0C05; --abisso: #24120A; --schiuma: #FFF1DE; --mist: #E0B183; --mist-soft: rgba(224,177,131,.78); --glow: #FFC46B; --ink: #3A1A06; --water-grad: linear-gradient(180deg, #F2792B 0%, #E1611B 50%, #B8430F 100%); --onda-a: #F2792B; --onda-accent: rgba(255,196,107,.34); --card-bg: rgba(49,29,16,.91); --card-border: rgba(255,196,107,.18); --card-hover-border: rgba(255,196,107,.40); --sorsino-corpo: #FF9040; --sorsino-tratto: #2A1103; --abyss-deep: #1A0C05; --abyss-mid: #24120A; --abyss-soft: #2E180D; --water-top: #F2792B; --water-mid: #E1611B; --water-deep: #B8430F; --wave-back: #FF9040; --foam: #FFF1DE; --sunrise: #FFD79B; --is-light: 0; } /* taste-skill-ignore: telefono vero di sorsoapp.it */
.fr-sorso[data-ui][data-tema="acquario"] { --fondo: #021014; --abisso: #04191F; --schiuma: #E9FFFA; --mist: #8FC4C4; --mist-soft: rgba(143,196,196,.78); --glow: #7DEBD8; --ink: #032A2E; --water-grad: linear-gradient(180deg, #12A2A8 0%, #0E7E8C 50%, #0A5568 100%); --onda-a: #12A2A8; --onda-accent: rgba(125,235,216,.34); --card-bg: rgba(11,38,42,.91); --card-border: rgba(125,235,216,.18); --card-hover-border: rgba(125,235,216,.40); --sorsino-corpo: #7DEBD8; --sorsino-tratto: #02191D; --abyss-deep: #021014; --abyss-mid: #04191F; --abyss-soft: #06242C; --water-top: #12A2A8; --water-mid: #0E7E8C; --water-deep: #0A5568; --wave-back: #19B4B8; --foam: #E9FFFA; --sunrise: #FFB07C; --is-light: 0; } /* taste-skill-ignore: telefono vero di sorsoapp.it */
.fr-sorso[data-ui][data-tema="aurora"] { --fondo: #04060F; --abisso: #080C1C; --schiuma: #EAF6FF; --mist: #A6B6D6; --mist-soft: rgba(166,182,214,.78); --glow: #8CF5C8; --ink: #06121F; --water-grad: linear-gradient(180deg, #2E7F8C 0%, #255C7A 50%, #1B3A5C 100%); --onda-a: #2E7F8C; --onda-accent: rgba(140,245,200,.34); --card-bg: rgba(16,26,38,.91); --card-border: rgba(140,245,200,.18); --card-hover-border: rgba(140,245,200,.40); --sorsino-corpo: #8CF5C8; --sorsino-tratto: #050B16; --abyss-deep: #04060F; --abyss-mid: #080C1C; --abyss-soft: #0D1329; --water-top: #2E7F8C; --water-mid: #255C7A; --water-deep: #1B3A5C; --wave-back: #3A9BA0; --foam: #EAF6FF; --sunrise: #C7A4FF; --is-light: 0; } /* taste-skill-ignore: telefono vero di sorsoapp.it */

/* il nome del tema; «Plus» si accende sui sette di Sorso Plus */
.fr-sorso[data-ui] .cs-tema {
  position: absolute; left: 5.2em; top: 1.05em;
  display: flex; align-items: center; gap: .45em;
  font-size: .84em; font-weight: 600; line-height: 1; color: var(--cap-ink, #04222a);
}
.fr-sorso[data-ui] .cs-plus {
  display: none; padding: .32em .55em; border-radius: 999px;
  background: #FFD98A; color: #3A2400; font-size: .78em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; /* taste-skill-ignore: telefono vero di sorsoapp.it */
}
.fr-sorso[data-ui][data-plus="true"] .cs-plus { display: inline-block; }

/* ── Sorsino: il disegno e le regole di sorsoapp.it, posa «seduto», fermo, che saluta ── */
.fr-sorso[data-ui] .sorsino-mascotte { position: absolute; left: 11.9em; top: .4em; width: 4.6em; height: 4.31em; pointer-events: none; }
.fr-sorso[data-ui] .sorsino-wrap { position: relative; width: 100%; height: 100%; transform-origin: 45% 61%; }
.fr-sorso[data-ui] .sorsino-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fr-sorso[data-ui] .s-pelle    { fill: var(--sorsino-corpo, #62E8FF); }
.fr-sorso[data-ui] .s-linea    { fill: none; stroke: var(--sorsino-corpo, #62E8FF); stroke-linecap: round; stroke-linejoin: round; }
.fr-sorso[data-ui] .s-tratto   { fill: var(--sorsino-tratto, #04222B); }
.fr-sorso[data-ui] .s-tratto-l { fill: none; stroke: var(--sorsino-tratto, #04222B); stroke-linecap: round; stroke-linejoin: round; }
.fr-sorso[data-ui] .s-solo-nuoto, .fr-sorso[data-ui] .s-occhi-riso, .fr-sorso[data-ui] .s-bocca-o { display: none; }
.fr-sorso[data-ui] .s-corpo      { transform-box: view-box; transform-origin: 72px 92px; }
.fr-sorso[data-ui] .s-braccio-s1 { transform-box: view-box; transform-origin: 42px 88px; }
.fr-sorso[data-ui] .s-braccio-s2 { transform-box: view-box; transform-origin: 104px 86px; }
.fr-sorso[data-ui] .s-gamba-1    { transform-box: view-box; transform-origin: 63px 116px; transform: rotate(-8deg); }
.fr-sorso[data-ui] .s-gamba-2    { transform-box: view-box; transform-origin: 81px 116px; transform: rotate(8deg); }
.fr-sorso[data-ui] .s-occhio     { transform-box: fill-box; transform-origin: center center; }
@media (prefers-reduced-motion: no-preference) {
  .fr-sorso[data-ui] .s-occhio { animation: s-batti 5.4s ease-in-out infinite; }
  .fr-sorso[data-ui] .s-corpo { animation: s-respiro-seduto 2.9s ease-in-out infinite alternate; }
  .fr-sorso[data-ui] .s-braccio-s2 { animation: s-ciao .6s ease-in-out infinite alternate; }
  .fr-sorso[data-attivo="false"] .sorsino-mascotte * { animation-play-state: paused; }
}
@keyframes s-batti { 0%, 91%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.07); } }
@keyframes s-respiro-seduto { from { transform: scale(1, 1) translateY(0); } to { transform: scale(1.05, .95) translateY(1.6px); } }
@keyframes s-ciao { from { transform: rotate(-16deg); } to { transform: rotate(20deg); } }

/* ── Tutta la card cambia col tema: il campo è l'acqua profonda del tema (o il suo cielo, dove nell'acqua Sorsino
   sparirebbe), l'inchiostro la sua schiuma, il tasto il suo bagliore. sorso.js copia data-tema sul capitolo. */
.cap-sorso[data-tema] { transition: background-color .9s ease, color .9s ease; }
.cap-sorso[data-tema] .cp-tasto { transition: background-color .9s ease, color .9s ease; }
.cap-sorso[data-tema="notte"] { --cap-bg: #073F5B; --cap-ink: #EAFBFF; --cp-tasto-bg: #7BF0FF; --cp-tasto-ink: #04303D; }
.cap-sorso[data-tema="giorno"] { --cap-bg: #F3FAFD; --cap-ink: #06303D; --cp-tasto-bg: #0D5A73; --cp-tasto-ink: #FFFFFF; }
.cap-sorso[data-tema="ciliegio"] { --cap-bg: #6E2140; --cap-ink: #FFEEF4; --cp-tasto-bg: #FFB3CE; --cp-tasto-ink: #2A0A16; }
.cap-sorso[data-tema="birra"] { --cap-bg: #6B3F0C; --cap-ink: #FFF6E3; --cp-tasto-bg: #FFC44A; --cp-tasto-ink: #3B2708; }
.cap-sorso[data-tema="monster"] { --cap-bg: #26520D; --cap-ink: #EAFFE0; --cp-tasto-bg: #92FF3C; --cp-tasto-ink: #0F1A0A; }
.cap-sorso[data-tema="vino_rosso"] { --cap-bg: #6B0A25; --cap-ink: #FFEDF1; --cp-tasto-bg: #FFA0B8; --cp-tasto-ink: #360A15; }
.cap-sorso[data-tema="vino_bianco"] { --cap-bg: #FFFBEF; --cap-ink: #3A2E08; --cp-tasto-bg: #7A5A0A; --cp-tasto-ink: #FFFFFF; }
.cap-sorso[data-tema="spritz"] { --cap-bg: #1A0C05; --cap-ink: #FFF1DE; --cp-tasto-bg: #FFC46B; --cp-tasto-ink: #3A1A06; }
.cap-sorso[data-tema="acquario"] { --cap-bg: #0A5568; --cap-ink: #E9FFFA; --cp-tasto-bg: #7DEBD8; --cp-tasto-ink: #032A2E; }
.cap-sorso[data-tema="aurora"] { --cap-bg: #1B3A5C; --cap-ink: #EAF6FF; --cp-tasto-bg: #8CF5C8; --cp-tasto-ink: #06121F; }
.fr-sorso[data-ui] .s-pelle, .fr-sorso[data-ui] .s-linea, .fr-sorso[data-ui] .s-tratto, .fr-sorso[data-ui] .s-tratto-l { transition: fill .45s ease, stroke .45s ease; }
.fr-sorso .mock-telefono { transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s, background .45s ease, border-color .45s ease; }