/* Home di cartomanziabassocosto.eu (ottobre 2026). Una colonna, pensata per telefono. */
:root {
  --notte: #2a1640;
  --notte-2: #3d2160;
  --crema: #fffaf3;
  --carta: #ffffff;
  --testo: #241a2e;
  --tenue: #6b5f78;
  --bordo: #ece3f3;
  --magenta: #c2187a;
  --oro: #f2b705;
  --verde: #15803d;
  --rosso: #dc2626;
  --giallo: #eab308;
  --grigio: #a8a2b0;
  --raggio: 14px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: radial-gradient(ellipse at top, var(--notte-2), var(--notte) 60%) fixed var(--notte);
  color: var(--testo);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Cielo stellato dietro al sito: solo CSS, tre strati di stelle a passi diversi (niente motivo ripetuto evidente) */
body::before, body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
body::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Ccircle cx='290' cy='358' r='1' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='325' cy='376' r='0.7' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='304' cy='393' r='0.7' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='286' cy='91' r='1.1' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='381' cy='254' r='1' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='416' cy='399' r='1.1' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='38' cy='122' r='0.7' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='19' cy='297' r='1' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='539' cy='332' r='0.8' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='3' cy='54' r='0.8' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='638' cy='637' r='0.6' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='202' cy='147' r='0.8' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='45' cy='490' r='1' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='542' cy='247' r='0.6' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='137' cy='593' r='0.6' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='240' cy='454' r='1' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='362' cy='127' r='0.8' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='56' cy='213' r='1' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='86' cy='452' r='0.6' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='298' cy='312' r='1.1' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='286' cy='122' r='0.7' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='412' cy='75' r='1' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='0' cy='553' r='1.1' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='639' cy='13' r='0.7' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='637' cy='385' r='1.1' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='27' cy='94' r='1' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='6' cy='391' r='0.8' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='47' cy='58' r='1.1' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='10' cy='236' r='1.1' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='81' cy='376' r='1.1' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='555' cy='117' r='0.7' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='581' cy='523' r='0.7' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='101' cy='403' r='1.1' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='440' cy='248' r='1' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='50' cy='30' r='0.6' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='328' cy='163' r='1' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='269' cy='579' r='1' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='333' cy='595' r='0.6' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='146' cy='358' r='1.1' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='47' cy='136' r='0.7' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='44' cy='263' r='0.7' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='30' cy='180' r='1.1' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='623' cy='59' r='0.7' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='628' cy='420' r='1.1' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='606' cy='378' r='0.6' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='583' cy='449' r='0.6' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='383' cy='48' r='0.6' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='204' cy='640' r='0.6' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='350' cy='472' r='0.7' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='225' cy='438' r='0.6' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='604' cy='19' r='1' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='9' cy='424' r='1' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='8' cy='46' r='0.6' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='636' cy='563' r='0.8' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='598' cy='444' r='1' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='296' cy='346' r='1.1' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='19' cy='385' r='1' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='147' cy='447' r='1' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='422' cy='311' r='0.6' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='193' cy='434' r='0.7' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='109' cy='580' r='1' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='571' cy='209' r='0.8' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='406' cy='514' r='0.7' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='246' cy='373' r='0.8' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='87' cy='318' r='0.6' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='608' cy='177' r='0.7' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='288' cy='176' r='0.7' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='245' cy='333' r='0.8' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='290' cy='48' r='0.6' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='559' cy='27' r='0.8' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='227' cy='416' r='1.1' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='410' cy='259' r='0.7' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='492' cy='171' r='0.7' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='630' cy='74' r='0.6' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='419' cy='517' r='0.6' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='128' cy='304' r='0.7' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='483' cy='342' r='0.6' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='145' cy='498' r='1.1' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='320' cy='638' r='0.7' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='543' cy='448' r='0.7' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='263' cy='571' r='1' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='288' cy='126' r='0.6' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='352' cy='418' r='1.1' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='297' cy='417' r='0.7' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='462' cy='524' r='0.6' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='155' cy='250' r='0.6' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='344' cy='506' r='0.8' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='582' cy='548' r='0.8' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='53' cy='282' r='1.1' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='492' cy='312' r='0.6' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='518' cy='41' r='0.6' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='341' cy='439' r='0.7' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='95' cy='331' r='1.1' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='605' cy='315' r='0.6' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='281' cy='358' r='1.1' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='335' cy='540' r='1.1' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='199' cy='244' r='1.1' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='195' cy='90' r='1.1' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='175' cy='318' r='1' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='73' cy='3' r='1' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='345' cy='28' r='1' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='513' cy='360' r='1' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='442' cy='42' r='1.1' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='265' cy='612' r='1' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='158' cy='316' r='0.8' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='577' cy='599' r='1' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='203' cy='123' r='1.1' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='592' cy='83' r='0.6' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='124' cy='145' r='0.8' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='463' cy='156' r='1' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='320' cy='373' r='1.1' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='160' cy='127' r='1.1' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='15' cy='405' r='1.1' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='102' cy='131' r='1.1' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='339' cy='545' r='1.1' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='548' cy='149' r='0.8' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='202' cy='202' r='0.7' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='498' cy='125' r='0.6' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='569' cy='85' r='0.6' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='248' cy='278' r='1' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='506' cy='81' r='1' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='61' cy='365' r='0.8' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='74' cy='324' r='0.8' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='639' cy='533' r='0.6' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='68' cy='24' r='1.1' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='329' cy='364' r='0.7' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='118' cy='131' r='0.7' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='593' cy='61' r='0.6' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='609' cy='296' r='0.6' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='250' cy='273' r='0.8' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='134' cy='239' r='0.6' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='116' cy='291' r='0.8' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='590' cy='387' r='0.6' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='507' cy='207' r='0.6' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='365' cy='122' r='1.1' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='515' cy='165' r='0.6' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='521' cy='260' r='0.8' fill='%23e9d5ff' opacity='0.6'/%3E%3Ccircle cx='445' cy='491' r='0.7' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='132' cy='118' r='0.8' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='300' cy='7' r='0.8' fill='%23e9d5ff' opacity='0.6'/%3E%3C/svg%3E"); }
body::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Ccircle cx='45' cy='246' r='1.8' fill='%23fde68a' opacity='0.95'/%3E%3Ccircle cx='304' cy='594' r='1.8' fill='%23fff' opacity='1'/%3E%3Ccircle cx='480' cy='351' r='1.5' fill='%23fef3c7' opacity='0.9'/%3E%3Ccircle cx='192' cy='108' r='1.5' fill='%23fef3c7' opacity='0.9'/%3E%3Ccircle cx='21' cy='554' r='1.8' fill='%23fff' opacity='1'/%3E%3Ccircle cx='231' cy='361' r='1.2' fill='%23fff' opacity='1'/%3E%3Ccircle cx='583' cy='10' r='1.5' fill='%23fde68a' opacity='0.95'/%3E%3Ccircle cx='248' cy='307' r='1.8' fill='%23fef3c7' opacity='0.9'/%3E%3Ccircle cx='374' cy='469' r='1.2' fill='%23fef3c7' opacity='0.9'/%3E%3Ccircle cx='400' cy='580' r='1.8' fill='%23fef3c7' opacity='0.9'/%3E%3Ccircle cx='602' cy='860' r='1.5' fill='%23fff' opacity='1'/%3E%3Ccircle cx='347' cy='873' r='1.5' fill='%23fef3c7' opacity='0.9'/%3E%3Ccircle cx='550' cy='53' r='1.5' fill='%23fde68a' opacity='0.95'/%3E%3Ccircle cx='256' cy='359' r='1.5' fill='%23fde68a' opacity='0.95'/%3E%3Ccircle cx='477' cy='435' r='1.5' fill='%23fef3c7' opacity='0.9'/%3E%3Ccircle cx='837' cy='597' r='1.8' fill='%23fde68a' opacity='0.95'/%3E%3Ccircle cx='24' cy='695' r='1.8' fill='%23fff' opacity='1'/%3E%3Ccircle cx='570' cy='368' r='1.8' fill='%23fde68a' opacity='0.95'/%3E%3Ccircle cx='48' cy='284' r='1.5' fill='%23fff' opacity='1'/%3E%3Ccircle cx='524' cy='651' r='1.5' fill='%23fff' opacity='1'/%3E%3Ccircle cx='718' cy='201' r='1.8' fill='%23fde68a' opacity='0.95'/%3E%3Ccircle cx='226' cy='680' r='1.2' fill='%23fef3c7' opacity='0.9'/%3E%3Ccircle cx='89' cy='729' r='1.5' fill='%23fff' opacity='1'/%3E%3Ccircle cx='881' cy='735' r='1.8' fill='%23fef3c7' opacity='0.9'/%3E%3Ccircle cx='104' cy='562' r='1.5' fill='%23fff' opacity='1'/%3E%3Ccircle cx='183' cy='47' r='1.8' fill='%23fff' opacity='1'/%3E%3Ccircle cx='112' cy='399' r='1.8' fill='%23fde68a' opacity='0.95'/%3E%3Ccircle cx='410' cy='236' r='1.8' fill='%23fef3c7' opacity='0.9'/%3E%3Ccircle cx='378' cy='700' r='1.8' fill='%23fff' opacity='1'/%3E%3Ccircle cx='857' cy='661' r='1.2' fill='%23fde68a' opacity='0.95'/%3E%3Ccircle cx='102' cy='803' r='1.8' fill='%23fef3c7' opacity='0.9'/%3E%3Ccircle cx='762' cy='247' r='1.8' fill='%23fef3c7' opacity='0.9'/%3E%3Ccircle cx='653' cy='629' r='1.2' fill='%23fef3c7' opacity='0.9'/%3E%3Ccircle cx='251' cy='215' r='1.2' fill='%23fef3c7' opacity='0.9'/%3E%3Ccircle cx='882' cy='824' r='1.8' fill='%23fff' opacity='1'/%3E%3Cg fill='%23fde68a'%3E%3Ccircle cx='560' cy='28' r='1.6'/%3E%3Crect x='554' y='27.7' width='12' height='0.8' opacity='.6'/%3E%3Crect x='560.0' y='22' width='0.8' height='12' opacity='.6'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='386' cy='556' r='1.6'/%3E%3Crect x='380' y='555.7' width='12' height='0.8' opacity='.6'/%3E%3Crect x='385.3' y='550' width='0.8' height='12' opacity='.6'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='211' cy='259' r='1.6'/%3E%3Crect x='205' y='258.9' width='12' height='0.8' opacity='.6'/%3E%3Crect x='211.0' y='253' width='0.8' height='12' opacity='.6'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='805' cy='158' r='1.6'/%3E%3Crect x='799' y='157.9' width='12' height='0.8' opacity='.6'/%3E%3Crect x='804.7' y='152' width='0.8' height='12' opacity='.6'/%3E%3C/g%3E%3Cg fill='%23fde68a'%3E%3Ccircle cx='563' cy='341' r='1.6'/%3E%3Crect x='557' y='340.5' width='12' height='0.8' opacity='.6'/%3E%3Crect x='562.4' y='335' width='0.8' height='12' opacity='.6'/%3E%3C/g%3E%3Cg fill='%23fde68a'%3E%3Ccircle cx='325' cy='311' r='1.6'/%3E%3Crect x='319' y='310.5' width='12' height='0.8' opacity='.6'/%3E%3Crect x='324.1' y='305' width='0.8' height='12' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
  animation: brilla 4s ease-in-out infinite alternate;
}
@keyframes brilla { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }
.pagina { position: relative; z-index: 1; }

a { color: var(--magenta); }

.pagina {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--crema);
  min-height: 100vh;
  box-shadow: 0 0 60px rgba(0, 0, 0, .35);
}

/* Barra in alto */
.barra {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 8px 8px;
  background: #fff; box-shadow: 0 2px 10px rgba(42, 22, 64, .12);
  color: #fff;
}
.marchio { display: block; line-height: 0; }
.marchio img { display: block; width: min(285px, calc(100vw - 96px)); height: auto; margin-left: -4px; }
.barra { min-height: 0; }
@media (min-width: 800px) { .marchio img { width: 448px; height: auto; } }
.barra { position: sticky; }
.menu-tasto {
  display: grid; place-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; flex: none;
  border: 0; border-radius: 12px; background: var(--notte); cursor: pointer;
}
.menu-tasto span { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: #fff; transition: transform .2s, opacity .2s; }
.menu-tasto[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-tasto[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-tasto[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.menu {
  position: absolute; top: 100%; right: 0; left: 0; z-index: 6;
  display: flex; flex-direction: column; padding: 8px 16px 16px;
  background: #fff; box-shadow: 0 14px 24px rgba(42, 22, 64, .18);
}
.menu[hidden] { display: none; }
.menu a { padding: 13px 4px; border-bottom: 1px solid var(--bordo); color: var(--notte); font-weight: 600; text-decoration: none; }
.menu a:hover { color: var(--magenta); }
.menu .menu-chiama { margin-top: 12px; border: 0; border-radius: var(--raggio); background: var(--verde); color: #fff; text-align: center; font-weight: 800; }
.menu .menu-chiama:hover { color: #fff; }
[id^="titolo-"] { scroll-margin-top: 90px; }
@media (min-width: 800px) {
  .menu { left: auto; right: 5%; width: 320px; border-radius: 0 0 var(--raggio) var(--raggio); }
}

/* Banner */
.hero { display: block; }
.hero img { display: block; width: 100%; height: auto; }

/* Apertura */
.apertura { padding: 22px 16px 8px; text-align: center; }
h1 {
  margin: 0 0 8px; font-size: 26px; line-height: 1.2; color: var(--notte);
}
h1 span { display: block; color: var(--magenta); font-size: 32px; }
.sottotitolo { margin: 0 auto 18px; max-width: 30em; color: var(--tenue); }
.sottotitolo strong { color: var(--testo); }

.bottone {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; max-width: 420px; margin: 0 auto 10px;
  border-radius: var(--raggio); text-decoration: none; font-weight: 700;
}
.bottone-chiama {
  background: var(--verde); color: #fff; padding: 12px 18px; font-size: 28px; letter-spacing: .5px;
  box-shadow: 0 6px 18px rgba(21, 128, 61, .35);
}
.bottone-chiama small { display: block; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.bottone-icona { font-size: 30px; }
.bottone-ricarica {
  background: var(--carta); color: var(--notte); border: 2px solid var(--notte);
  padding: 12px 18px; font-size: 17px;
}
.nota { font-size: 14px; color: var(--tenue); margin: 6px auto 0; max-width: 30em; }

/* Blocchi */
.blocco { padding: 26px 16px 6px; }
h2 { margin: 0 0 14px; font-size: 22px; color: var(--notte); }
h2::before { content: "✦ "; color: var(--oro); }
h3 { margin: 20px 0 6px; font-size: 18px; color: var(--notte); }

/* Cartomanti (il markup arriva da stato_cartomanti.php e non cambia) */
.cartomanti-blocco { background: var(--carta); border-block: 1px solid var(--bordo); padding-bottom: 20px; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; padding: 0; margin: -4px 0 14px; font-size: 13px; color: var(--tenue); }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.punto.verde { background: var(--verde); } .punto.rosso { background: var(--rosso); }
.punto.giallo { background: var(--giallo); } .punto.grigio { background: var(--grigio); }

#statoCartomanti { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cartomanti {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 10px; background: var(--crema); border: 1px solid var(--bordo);
}
.cartomanti:has(.online) {
  border: 0; background: #e3f6ea; padding: 9px 10px;
  box-shadow: 0 2px 8px rgba(22, 163, 74, .18);
}
.cartomanti:has(.online) .cartomantiNome { font-weight: 700; color: #0f3d22; }
#statoCartomanti .online { width: 24px; height: 24px; margin: -4px -2px -4px -4px; }
.cartomanti:has(.occupato), .cartomanti:has(.squillo) {
  border: 0; background: #fdecec; padding: 9px 10px;
  box-shadow: 0 2px 8px rgba(220, 38, 38, .15);
}
.cartomanti:has(.occupato) .cartomantiNome, .cartomanti:has(.squillo) .cartomantiNome { font-weight: 700; color: #6b1414; }
.cartomanti:has(.assente) {
  border: 0; background: #fff6d6; padding: 9px 10px;
  box-shadow: 0 2px 8px rgba(234, 179, 8, .18);
}
.cartomanti:has(.assente) .cartomantiNome { font-weight: 700; color: #5c4300; }
#statoCartomanti .activity { width: 24px; height: 24px; margin: -4px -2px -4px -4px; }
.cartomanti:has(.offline) { display: none; }
.cartomantiNome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 15px; }
/* Stelle: verde libera, rossa occupata, gialla in pausa (offline nascoste) */
.online, .punto.verde { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.6l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z' fill='%2316a34a' stroke='%23085c27' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.occupato, .squillo, .punto.rosso { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.6l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z' fill='%23dc2626' stroke='%237f1414' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.assente, .punto.giallo { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.6l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z' fill='%23f2b705' stroke='%23855f00' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.activity { width: 20px; height: 20px; margin: -4px; flex: none; }
.legenda li { display: flex; align-items: center; gap: 6px; }
.legenda .activity { width: 16px; height: 16px; margin: 0; animation: none; }
.online { animation: pulsa 2s ease-in-out infinite; }
@keyframes pulsa { 50% { transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .online { animation: none; } }

/* Banner originali */
.banner { display: block; margin: 24px 16px 0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(42, 22, 64, .15); }
.banner img { display: block; width: 100%; height: auto; }
.banner-elenco { padding-top: 8px; }
.banner-lavora { margin: 24px 16px; }
.blocco .tariffe td { font-weight: 400; font-size: 15px; padding-right: 8px; vertical-align: top; }
.blocco .tariffe td:first-child { font-weight: 700; }
.testo .tariffe { margin: 4px 0 14px; }

/* Coupon */
.coupon {
  display: flex; align-items: center; gap: 14px;
  margin: 22px 16px 0; padding: 14px 16px; border-radius: var(--raggio);
  background: var(--notte); color: #fff; text-decoration: none;
  border: 2px solid var(--oro);
}
.coupon-etichetta {
  background: var(--oro); color: var(--notte); font-size: 15px; font-weight: 900; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 8px 10px; border-radius: 8px; transform: rotate(-4deg);
}
.coupon-testo { flex: 1; font-size: 14px; line-height: 1.3; color: #ddd0ea; }
.coupon-testo strong { display: block; font-size: 17px; color: #fff; }
.coupon-freccia { font-size: 30px; color: var(--oro); }
.tel { white-space: nowrap; }

/* Numeri */
.numero {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 14px 16px; margin-bottom: 12px;
}
.numero p { margin: 6px 0 0; font-size: 15px; color: var(--tenue); }
.numero .numero-tipo { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--magenta); }
.numero-tel { display: inline-block; font-size: 30px; font-weight: 800; color: var(--notte); text-decoration: none; letter-spacing: .5px; }
.numero-principale { border: 2px solid var(--verde); }
.numero-principale .numero-tipo { color: var(--verde); }
.numero-amore .numero-tipo { color: var(--rosso); }

.tariffe { width: 100%; border-collapse: collapse; margin: 8px 0 4px; font-size: 16px; }
.tariffe caption { position: absolute; left: -9999px; }
.tariffe th { text-align: left; font-size: 12px; color: var(--tenue); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; padding: 4px 0; }
.tariffe td { padding: 6px 0; border-top: 1px solid var(--bordo); font-weight: 700; }

/* Passi */
.passi { counter-reset: p; list-style: none; padding: 0; margin: 0; }
.passi li { counter-increment: p; position: relative; padding: 0 0 14px 46px; }
.passi li::before {
  content: counter(p); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%; background: var(--notte); color: var(--oro);
  font-weight: 800; display: grid; place-items: center;
}

/* Testo */
.testo p { margin: 0 0 12px; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--bordo); }
.faq summary {
  cursor: pointer; list-style: none; padding: 14px 28px 14px 0; font-weight: 700; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font-size: 24px; color: var(--magenta); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 14px; color: var(--tenue); }

/* Lavora con noi */
.lavora {
  display: flex; justify-content: space-between; align-items: center;
  margin: 20px 16px; padding: 14px 16px; border-radius: var(--raggio);
  border: 1px dashed var(--tenue); color: var(--testo); text-decoration: none; font-size: 15px;
}

/* Piede */
.piede { background: var(--notte); color: #cbbfd9; font-size: 14px; }
.piede-colonne { display: grid; gap: 26px; padding: 30px 16px 22px; }
.piede-col { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.piede-col .piede-titolo { margin: 0 0 2px; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--oro); }
.piede-col a { color: #fff; text-decoration: none; }
.piede-col a:hover { color: var(--oro); text-decoration: underline; }
.piede-col p { margin: 0; }
.piede-logo img { display: block; width: 260px; height: auto; }
.piede-marchio p { max-width: 30em; line-height: 1.5; }
.piede-tel { font-size: 24px; font-weight: 800; letter-spacing: .5px; }
.piede-pagamenti { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.piede-pagamenti img { width: 46px; height: 30px; background: #fff; border-radius: 5px; padding: 2px 4px; }
.piede-piccolo { font-size: 13px; color: #a99bbb; line-height: 1.45; }
.piede-fondo { border-top: 1px solid rgba(255, 255, 255, .12); padding: 16px 16px 22px; font-size: 12px; color: #a99bbb; text-align: center; }
.piede-fondo p { margin: 0 0 6px; }
@media (min-width: 560px) { .piede-colonne { grid-template-columns: 1fr 1fr; } .piede-marchio { grid-column: 1 / -1; } }
@media (min-width: 800px) {
  .piede-colonne { grid-template-columns: 1.5fr 1fr 1.25fr 1.35fr 1fr; gap: 26px 22px; padding: 36px 5% 26px; }
  .piede-marchio { grid-column: auto; }
  .piede-logo img { width: 230px; }
  .piede-fondo { padding-left: 5%; padding-right: 5%; }
}

/* ---------- Servizio cortesia ---------- */
.cortesia-box {
  margin: 24px 16px 0; padding: 14px 16px; border-radius: var(--raggio);
  background: var(--carta); border: 1px solid var(--bordo);
}
.cortesia-testa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.cortesia-box h2 { font-size: 18px; margin: 0; }
.cortesia-box h2::before { content: none; }
.cortesia-box p { margin: 6px 0 10px; font-size: 15px; color: var(--tenue); }
.cortesia-tasti { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.cortesia-tel {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px;
  background: var(--notte); color: #fff; font-size: 20px; font-weight: 800; letter-spacing: .4px;
  text-decoration: none; white-space: nowrap; box-shadow: 0 6px 16px rgba(42, 22, 64, .3);
}
.cortesia-tel span { color: var(--oro); }
.cortesia-link { color: var(--magenta); font-weight: 700; text-decoration: none; }

.cortesia-stato { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; color: var(--tenue); }
.cortesia-stato strong { color: var(--testo); font-weight: 600; }
.cortesia-chi { color: var(--verde); font-weight: 600; }
.cortesia-stato { align-items: flex-start; }
.cortesia-stato .pallino { margin-top: .45em; }
.cortesia-stato-testo { flex: 1; min-width: 0; }
.cortesia-stato.grande .cortesia-stato-testo { flex: 0 1 auto; }
.cortesia-stato .pallino { width: 8px; height: 8px; border-radius: 50%; background: var(--grigio); flex: none; }
.cortesia-stato.pronto .pallino { background: var(--rosso); }
.cortesia-stato.aperto .pallino { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.cortesia-stato.grande { justify-content: center; font-size: 15px; margin: 14px auto 12px; }

.bottone-cortesia {
  background: var(--notte); color: #fff; padding: 12px 18px; font-size: 25px; letter-spacing: .5px;
  box-shadow: 0 6px 18px rgba(42, 22, 64, .3);
}
.bottone-cortesia .bottone-icona { font-size: 26px; color: var(--oro); }
.bottone-cortesia small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--oro); }
.bottone-appuntamento {
  background: transparent; color: var(--notte); border: 1.5px solid var(--notte); padding: 12px 18px; font-size: 16px;
}

/* Pagina del servizio */
.briciole { padding: 12px 16px 0; font-size: 14px; color: var(--tenue); }
.briciole a { color: var(--tenue); }
.cortesia-foto { display: block; width: 100%; height: auto; border-radius: var(--raggio); margin: 4px 0 0; }
.cortesia-apertura .bottone-cortesia { max-width: 420px; }

.ricarica-blocco .modulo-ric {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 18px 16px;
}
.campo-etichetta { display: block; font-weight: 700; margin: 10px 0 6px; }
.campo {
  width: 100%; font: inherit; font-size: 17px; padding: 11px 14px;
  border: 1px solid var(--bordo); border-radius: 10px; background: var(--crema);
}
.campo:focus { outline: none; border-color: var(--magenta); }
.esca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.tagli { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.taglio {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 6px 8px; border: 1px solid var(--bordo); border-radius: 12px; background: var(--crema); cursor: pointer; text-align: center;
}
.taglio input { position: absolute; opacity: 0; pointer-events: none; }
.taglio strong { font-size: 19px; color: var(--notte); line-height: 1.1; }
.taglio span { font-size: 13px; color: var(--tenue); }
.taglio em {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--magenta); color: #fff; font-style: normal; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.taglio:has(input:checked) { border-color: var(--magenta); background: #fdf3f8; box-shadow: 0 0 0 1px var(--magenta) inset; }
.taglio:has(input:focus-visible) { outline: 3px solid var(--oro); outline-offset: 2px; }
.nota-pagamento { font-size: 14px; color: var(--tenue); margin: 12px 0; }
.bottone-paga { background: var(--verde); color: #fff; padding: 14px 18px; font-size: 17px; border: 0; cursor: pointer; font-family: inherit; }
.bottone-paga:disabled { opacity: .7; cursor: wait; }
.sicuro { font-size: 13px; color: var(--tenue); margin: 10px 0 0; }
.errore-ric { background: #fdecec; color: #9b1c1c; border-radius: 10px; padding: 10px 12px; font-weight: 600; }

.orari-tab { list-style: none; padding: 0; margin: 0; }
.orari-tab li {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 10px; margin-bottom: 6px; background: var(--carta); border: 1px solid var(--bordo);
}
.orari-tab li.oggi { border-color: var(--magenta); background: #fdf3f8; }
.orari-tab li.oggi span::after { content: " · oggi"; color: var(--magenta); font-weight: 700; }
.nota-24 { font-size: 15px; color: var(--tenue); }

/* Grazie / annullato */
.esito { text-align: center; padding: 48px 16px 40px; }
.esito-segno { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font-size: 44px; color: #fff; }
.esito-segno.ok { background: var(--verde); } .esito-segno.no { background: var(--tenue); }
.esito p { max-width: 34em; margin: 0 auto 18px; color: var(--tenue); }
.esito .bottone-appuntamento { color: var(--notte); border-color: var(--notte); max-width: 320px; }
.esito-indietro { display: inline-block; margin-top: 14px; font-weight: 700; color: var(--notte); }

@media (min-width: 800px) {
  .cortesia-box { margin-left: 5%; margin-right: 5%; padding: 16px 22px; }
  .briciole { padding-left: 5%; }
  .tagli { grid-template-columns: repeat(6, 1fr); }
  .cortesia-foto { max-width: 720px; margin: 4px auto 0; }
}

/* Testo tra un banner e l'altro */
.tra-banner { margin: 22px 16px 0; padding: 0 2px; }
.tra-banner h2 { font-size: 19px; margin-bottom: 6px; }
.tra-banner p { margin: 0; color: var(--tenue); font-size: 16px; }
@media (min-width: 800px) { .tra-banner { margin-left: 5%; margin-right: 5%; } }

/* Lavora con noi */
.banner-alto { margin-top: 4px; }
.requisiti { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.requisiti li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--carta); border-radius: 12px; box-shadow: 0 2px 8px rgba(42, 22, 64, .06); }
.requisiti li span { font-size: 22px; }
.campi-due { display: grid; gap: 0 12px; }
textarea.campo { resize: vertical; min-height: 140px; line-height: 1.45; }
.facoltativo { font-weight: 400; color: var(--tenue); font-size: 14px; }
.consensi { display: grid; gap: 10px; margin: 16px 0 18px; }
.consenso { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--tenue); cursor: pointer; }
.consenso input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--magenta); }
.consenso:first-child { color: var(--testo); font-weight: 600; }
@media (min-width: 640px) { .campi-due { grid-template-columns: 1fr 1fr; } .requisiti { grid-template-columns: repeat(3, 1fr); } }
.esito-modulo { border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; font-size: 15px; }
.esito-modulo.ok { background: #e3f6ea; color: #0f3d22; }
.esito-modulo.no { background: #fdecec; color: #7f1414; }
#candidatura { scroll-margin-top: 90px; }

/* Tagli in apertura con freccia verso il banner Ricarica web */
.tagli-home { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 460px; margin: 4px auto 0; }
.taglio-home {
  display: flex; flex-direction: column; align-items: center; padding: 10px 4px 9px;
  background: var(--carta); border-radius: 14px; text-decoration: none;
  box-shadow: 0 3px 10px rgba(42, 22, 64, .12); border-top: 4px solid var(--magenta);
}
.taglio-home:nth-child(2) { border-top-color: var(--oro); }
.taglio-home:nth-child(3) { border-top-color: var(--verde); }
.taglio-home strong { font-size: 26px; line-height: 1.1; color: var(--notte); }
.taglio-home span { font-size: 14px; color: var(--tenue); font-weight: 600; }
.freccia-giu { margin: 12px 0 0; display: flex; flex-direction: column; align-items: center; gap: 0; color: var(--magenta); font-weight: 700; font-size: 14px; }
.freccia-giu .freccia { font-size: 30px; line-height: 1; animation: giu 1.4s ease-in-out infinite; }
@keyframes giu { 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .freccia-giu .freccia { animation: none; } }
.apertura + .banner { margin-top: 6px; }
.piede-diritti { color: #cbbfd9; font-weight: 600; }