/* R07: responsive rules consolidated in style.css. */

/* ===== R15 — sticker Verifica fattura: identico per trattamento allo sticker WhatsApp ===== */
/* niente involucro chiaro, niente etichetta: solo lo sticker, stessa misura e stessa forma. */
.verify-icon-only{
  width:56px!important;min-width:56px!important;max-width:56px!important;
  height:56px!important;min-height:56px!important;flex:none!important;align-self:center;
  padding:0!important;border:0!important;background:transparent!important;
  box-shadow:none!important;border-radius:0!important;overflow:visible!important;
  display:inline-flex;align-items:center;justify-content:center;gap:0!important;
}
.verify-icon-only .verify-sticker{
  width:48px!important;height:48px!important;border-radius:15px;background:transparent;box-shadow:none;object-fit:contain;
}
.verify-icon-only:hover .verify-sticker,.wa-icon-only:hover .wa-sticker{transform:translateY(-2px)}
.verify-icon-only .verify-sticker,.wa-icon-only .wa-sticker{transition:transform .2s var(--ease)}
/* il pulsante fisso: stessa sagoma di quello WhatsApp */
.float-verify,.float-verify.action-sticker{
  width:56px!important;height:56px!important;padding:0!important;border:0!important;
  background:transparent!important;box-shadow:none!important;border-radius:0!important;
  min-width:0!important;max-width:56px!important;min-height:0!important;
  display:inline-flex;align-items:center;justify-content:center;
}
.float-verify .verify-sticker{width:48px!important;height:48px!important;border-radius:15px;background:transparent;box-shadow:none}
.float-verify .float-label{display:none!important}
@media (prefers-reduced-motion:reduce){.verify-icon-only .verify-sticker,.wa-icon-only .wa-sticker{transition:none}}

/* i due pseudo-elementi decorativi del vecchio pulsante non hanno più senso su uno sticker nudo */
.verify-icon-only::before,.verify-icon-only::after,
.float-verify::before,.float-verify::after{content:none!important}

/* ===== R15 — lo sticker è tondo: via il fondo quadrato che restava dietro ===== */
.verify-sticker{
  background:transparent!important;
  border-radius:50%!important;
  box-shadow:none!important;
  filter:none!important;
}
.el-avatar{border-radius:50%!important;background:transparent!important}
.el-avatar img{border-radius:50%!important}

/* ---------------------------------------------------------------------------
   10/09/2026 — lo sticker di Elettra non sparisce più.
   style.css riga 398 nascondeva l'intera colonna dei pulsanti fissi
   (.float-stack.is-covered { opacity:0; pointer-events:none }) quando
   un'azione gemella entrava in vista. Siccome lo sticker di verifica è il
   pulsante che apre Elettra, questo la faceva sparire durante lo scorrimento.
   Qui la colonna viene tenuta sempre visibile e il nascondimento resta solo
   sul pulsante WhatsApp, che in pagina un doppione vero ce l'ha.
   Questo foglio è caricato per ultimo: è il posto giusto per l'override.
   --------------------------------------------------------------------------- */
.float-stack.is-covered{
  opacity:1!important;
  transform:none!important;
  pointer-events:auto!important;
}
.float-wa{transition:opacity .28s ease, transform .28s ease}
.float-wa.is-covered{
  opacity:0;
  transform:translateY(12px) scale(.96);
  pointer-events:none;
}

/* ---------------------------------------------------------------------------
   10/09/2026 — ELETTRA HA LA SUA ICONA.
   Prima non ce l'aveva: si apriva solo cliccando lo sticker rosso di Spring,
   e sulla pagina niente diceva che esistesse. Ora ha il suo pulsante, con il
   volto del ritratto ufficiale ritagliato — nessun asset generato.
   Stessa misura e stesso trattamento degli altri due: sticker nudo, nessun
   involucro chiaro, nessuna etichetta.
   --------------------------------------------------------------------------- */
.float-elettra,.float-elettra.action-sticker{
  width:56px!important;height:56px!important;padding:0!important;border:0!important;
  background:transparent!important;box-shadow:none!important;border-radius:0!important;
  min-width:0!important;max-width:56px!important;min-height:0!important;
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;cursor:pointer;
}
.float-elettra::before,.float-elettra::after{content:none!important}
.float-elettra .elettra-sticker{
  width:52px!important;height:52px!important;border-radius:50%!important;
  background:transparent!important;box-shadow:0 6px 18px rgba(20,29,39,.28);
  object-fit:cover;transition:transform .2s ease;
}
.float-elettra:hover .elettra-sticker{transform:translateY(-2px) scale(1.04)}
.float-elettra:focus-visible{outline:3px solid #fc231e;outline-offset:3px;border-radius:50%!important}

/* Il battito luminoso è stato tolto il 10/09/2026, prima ancora di mostrarlo:
   era un alone chiaro attorno allo sticker, cioè esattamente l'involucro che il
   titolare aveva chiesto di eliminare dallo sticker di verifica. La regola resta
   qui, spenta, perché si sappia che è stata una scelta e non una dimenticanza. */
.elettra-pulse{display:none!important}

@media (prefers-reduced-motion:reduce){
  .float-elettra .elettra-sticker{transition:none}
}

/* ---------------------------------------------------------------------------
   10/09/2026 — «Scopri luce, gas e fotovoltaico» non è più un bottone.
   Era una pillola alta 64 px in mezzo all'hero, che competeva con il titolo e
   su telefono diventava una barra a tutta larghezza. È un collegamento di
   navigazione, non un'azione: ora ha il trattamento di un collegamento —
   allineato al testo, con una riga rossa che si allunga al passaggio.
   --------------------------------------------------------------------------- */
.hero-link{
  align-self:flex-start;
  display:inline-block;
  margin:6px 0 0;
  padding-bottom:4px;
  font:700 15px/1.3 Inter,system-ui,sans-serif;
  color:var(--ink,#141d27);
  text-decoration:none;
  position:relative;
}
.hero-link::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--red,#fc231e);
  transform-origin:left;transform:scaleX(.36);
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.hero-link:hover::after,.hero-link:focus-visible::after{transform:scaleX(1)}
.hero-link:focus-visible{outline:3px solid var(--red,#fc231e);outline-offset:6px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.hero-link::after{transition:none}}
@media (max-width:720px){.hero-link{font-size:16px;margin-top:10px}}

/* ===========================================================================
   10/09/2026 — HERO ROTTO SUL TELEFONO. Difetto preesistente, non causato
   dalle nuove fotografie: è emerso guardandole.

   Misurato su 390 px: .hero-grid calcolava «grid-template-columns: 0px 430px».
   La colonna del testo restava larga 20 px — una parola per riga — e la
   colonna dell'immagine 430 px, cioè più larga dello schermo.

   Perché. Il blocco R14 porta l'hero a `display:block` con l'immagine in
   posizione assoluta dietro al testo. Sotto i 720 px lo rimette a
   `display:grid` per impilare le due parti, ma NON azzera le colonne definite
   più in alto (`minmax(0,1fr) minmax(430px,.96fr)`): tornando in modalità
   griglia, quelle colonne si riattivano e schiacciano il testo.

   Qui si azzerano le colonne e si impila davvero: prima il testo, poi la foto.
   Questo foglio è caricato per ultimo, quindi vince senza toccare style.css.
   =========================================================================== */
@media (max-width:720px){
  .hero-grid{
    grid-template-columns:1fr!important;
    grid-auto-flow:row!important;
    min-height:auto!important;
    gap:18px;
  }
  .hero-copy{
    order:1;
    width:auto!important;max-width:none!important;
    padding:30px 4px 0!important;
  }
  .hero-visual{
    order:2;
    position:relative!important;
    width:auto!important;min-width:0!important;
    min-height:320px!important;
    border-radius:26px;
  }
  .hero-visual img{object-position:60% 50%}
  .hero h1{max-width:none}
  .hero-lead{max-width:none}
}