/* ==========================================================================
   HOME — Power4U (v3.0.0)
   Replica della home del sito live power4u.it (stile pop, fondo bianco):
   1. Hero "LUCE E GAS" · 2. "GESTISCI LA TUA FORNITURA" (display gradiente) ·
   3. Due grandi card foto con pannello gradiente · 4. Punti di forza ·
   5. Offerte (#offerte, ricolorate) · 6. BLOG · 7. App (mockup + QR) ·
   Modal tooltip · Manina "cliccami".

   Palette Power4U (variabili --rei-* rimappate in style.css):
   arancio #EB541D (--rei-green) · fucsia #E60B70 (--rei-green-dark) ·
   rosa scuro #EF63A7 (--rei-green-light) · rosa chiaro #EE9DC4 (--rei-yellow) ·
   nero #000 · testo #3C3C3B.
   GRADIENTE FIRMA: 90deg #EB541D → #E60B70.
   ========================================================================== */

/* ==========================================================================
   UTILITY
   ========================================================================== */
.rei-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Titolo display POP: Inter 900 uppercase col gradiente firma arancio→fucsia
   (background-clip: text). Fallback: fucsia pieno. */
.p4u-display {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.02;
    color: #E60B70; /* fallback */
    background-image: linear-gradient(90deg, #EB541D 0%, #E60B70 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Bottoni pill pop */
.p4u-btn {
    display: inline-block;
    padding: 15px 38px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.p4u-btn:hover,
.p4u-btn:focus-visible {
    transform: scale(1.05);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26);
    text-decoration: none;
}
.p4u-btn--gradient {
    background: linear-gradient(90deg, #EB541D 0%, #E60B70 100%);
    color: #fff;
}
.p4u-btn--gradient:hover,
.p4u-btn--gradient:focus-visible { color: #fff; }
.p4u-btn--black {
    background: #000;
    color: #fff;
}
.p4u-btn--black:hover,
.p4u-btn--black:focus-visible {
    background: #E60B70;
    color: #fff;
}
.p4u-btn--lg { padding: 18px 52px; font-size: 1.0625rem; }

/* ==========================================================================
   1. HERO — claim + LUCE E GAS + foto pop + bottoni PRIVATO / IMPRESA
   ========================================================================== */
.p4u-hero {
    background: transparent;
    padding: 64px 0 40px;
}
.p4u-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 48px;
    align-items: center;
}
.p4u-hero__claim {
    color: var(--rei-ink, #3C3C3B);
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 12px;
}
.p4u-hero__title {
    font-size: clamp(3rem, 7.5vw, 5.5rem);
    margin: 0 0 36px;
}
.p4u-hero__question {
    color: var(--rei-ink, #3C3C3B);
    font-size: clamp(1.125rem, 1.8vw, 1.5rem);
    font-weight: 800;
    margin: 0 0 18px;
}
.p4u-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.p4u-hero__media { text-align: center; }
.p4u-hero__photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.18);
}

/* ==========================================================================
   2. GESTISCI LA TUA FORNITURA — display gradiente ~72px + sub nera bold 🙂
   ========================================================================== */
.p4u-gest {
    background: transparent;
    padding: 64px 0 12px;
    text-align: center;
}
.p4u-gest__title {
    font-size: clamp(2.5rem, 6vw, 4.5rem); /* ~72px desktop */
    margin: 0 0 16px;
}
.p4u-gest__sub {
    color: #000;
    font-size: clamp(1.0625rem, 1.8vw, 1.375rem);
    font-weight: 800;
    margin: 0 auto;
    max-width: 760px;
}

/* ==========================================================================
   3. DUE GRANDI CARD FOTO — radius 24, foto sopra, pannello gradiente sotto
   con link sottolineati bianchi (come sul live)
   ========================================================================== */
.p4u-cards {
    background: transparent;
    padding: 44px 0 40px;
}
.p4u-cards__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;
    max-width: 1100px;
    margin: 0 auto;
}
.p4u-card {
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.p4u-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 56px rgba(0, 0, 0, 0.24);
}
.p4u-card__photo {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.p4u-card__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.p4u-card:hover .p4u-card__photo img { transform: scale(1.05); }
.p4u-card__panel {
    flex: 1;
    padding: 30px 34px 32px;
    color: #fff;
}
.p4u-card--orange .p4u-card__panel {
    background: linear-gradient(120deg, #EB541D 0%, #E6321D 55%, #E60B70 100%);
}
.p4u-card--pink .p4u-card__panel {
    background: linear-gradient(120deg, #E60B70 0%, #EF63A7 100%);
}
.p4u-card__title {
    color: #fff;
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 16px;
}
.p4u-card__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.p4u-card__links a {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: inline-block;
}
.p4u-card__links a:hover,
.p4u-card__links a:focus-visible {
    color: #fff;
    opacity: 0.85;
    transform: translateX(4px);
}

/* ==========================================================================
   4. PUNTI DI FORZA — 3 card bianche bordo gradiente, ombre profonde
   (Prezzi competitivi / Gestione smart / Supporto reattivo)
   ========================================================================== */
.p4u-points {
    background: transparent;
    padding: 48px 0;
}
.p4u-points__title {
    text-align: center;
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0 0 40px;
}
.p4u-points__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    max-width: 1100px;
    margin: 0 auto;
}
.p4u-points__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.p4u-point {
    background: #fff;
    /* bordo 2px GRADIENTE arancio→fucsia via border-image "double background" */
    border: 2px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #EB541D, #E60B70);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-radius: 24px;
    padding: 34px 28px 30px;
    text-align: center;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.p4u-point:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 56px rgba(230, 11, 112, 0.18);
}
.p4u-point__icon {
    display: block;
    width: auto;
    height: 120px;
    margin: 0 auto 18px;
    object-fit: contain;
}
.p4u-point__title {
    color: #000;
    font-size: 1.375rem;
    font-weight: 900;
    margin: 0 0 12px;
}
.p4u-point__text {
    color: var(--rei-ink-soft, #555);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
}

/* ==========================================================================
   5. OFFERTE (#offerte) — card bianche, ricolorate Power4U:
   luce GRADIENTE arancio→fucsia · gas FUCSIA pieno ·
   CTA "Ti chiamiamo noi" ROSA CHIARO #EE9DC4 testo NERO ·
   "Voglio attivarla" NERO · evidenziatori rosa.
   ========================================================================== */
.rei-offers {
    background: transparent;
    padding: 72px 0;
    scroll-margin-top: 140px;
}
.rei-offers__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;
    max-width: 1060px;
    margin: 0 auto;
}
.rei-offer-card {
    background: #fff;
    /* contorno 2px gradiente arancio→fucsia */
    border: 2px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #EB541D, #E60B70);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-radius: 24px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.14);
    padding: 36px 34px 30px;
    display: flex;
    flex-direction: column;
}

/* Chip LUCE / GAS */
.rei-offer-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    background: #FDECF4; /* rosa tenue */
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.rei-offer-card__chip--luce { color: #EB541D; }
.rei-offer-card__chip--gas  { color: #E60B70; }

/* Titolo + pillola */
.rei-offer-card__title {
    color: #000;
    font-size: clamp(1.75rem, 2.6vw, 2.375rem);
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 18px;
}
.rei-offer-card__pill {
    display: inline-block;
    color: #fff;
    border-radius: 12px;
    padding: 4px 18px;
    margin-top: 8px;
    font-size: 0.85em;
    line-height: 1.15;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}
.rei-offer-card__pill--luce { background: linear-gradient(90deg, #EB541D, #E60B70); }
.rei-offer-card__pill--gas  { background: #E60B70; }

/* Sottolineature-evidenziatore rosa (background-image trasparente→colore
   sul 40% inferiore: funziona anche su testo multi-riga). */
.rei-offer-card__mark {
    display: inline;
    padding: 0 2px;
}
.rei-offer-card__mark--luce {
    background-image: linear-gradient(transparent 60%, rgba(238, 157, 196, 0.75) 60%);
}
.rei-offer-card__mark--gas {
    background-image: linear-gradient(transparent 60%, rgba(230, 11, 112, 0.28) 60%);
}
.rei-offer-card--luce .rei-offer-card__sub strong {
    background-image: linear-gradient(transparent 58%, rgba(239, 99, 167, 0.4) 58%);
}
.rei-offer-card--gas .rei-offer-card__sub strong {
    background-image: linear-gradient(transparent 58%, rgba(230, 11, 112, 0.24) 58%);
}
.rei-offer-card__sub em {
    font-style: italic;
    background-image: linear-gradient(transparent 55%, rgba(238, 157, 196, 0.5) 55%);
}

/* Sottotitoli */
.rei-offer-card__sub {
    color: var(--rei-ink, #3C3C3B);
    font-size: 1.0625rem;
    line-height: 1.5;
    margin: 0 0 24px;
}
.rei-offer-card__sub strong {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.rei-offer-card__sub em { color: var(--rei-ink-soft, #555); }

/* Price duo */
.rei-price-duo {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 26px;
}
.rei-price-card {
    border-radius: 16px;
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.rei-price-card--main {
    color: #fff;
}
/* Box prezzo LUCE: gradiente firma arancio→fucsia · GAS: fucsia pieno */
.rei-price-duo--luce .rei-price-card--main { background: linear-gradient(120deg, #EB541D 0%, #E60B70 100%); }
.rei-price-duo--gas  .rei-price-card--main { background: #E60B70; }
.rei-price-card--secondary {
    background: #F5F0F3;
    color: var(--rei-ink, #3C3C3B);
}
.rei-price-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.rei-price-card__label {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.92;
}
.rei-price-card__info {
    background: transparent;
    border: none;
    color: currentColor;
    opacity: 0.85;
    cursor: pointer;
    padding: 2px;
    line-height: 0;
    border-radius: 50%;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.rei-price-card__info:hover,
.rei-price-card__info:focus-visible {
    opacity: 1;
    transform: scale(1.12);
}
.rei-price-card__value strong {
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}
.rei-price-card__unit {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-top: 2px;
    opacity: 0.92;
}
.rei-price-card--secondary .rei-price-card__unit { color: var(--rei-gray-text, #767674); }

/* Azioni: CTA nera "Voglio attivarla" + CTA rosa chiaro "Ti chiamiamo noi" */
.rei-offer-card__actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* Bottone NERO "Voglio attivarla" → form attivazione online (/attiva/) */
.rei-offer-card__attiva,
a.rei-offer-card__attiva {
    display: block;
    width: 100%;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 16px 24px;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.rei-offer-card__attiva:hover,
.rei-offer-card__attiva:focus-visible,
a.rei-offer-card__attiva:hover,
a.rei-offer-card__attiva:focus-visible {
    background: #E60B70;
    color: #fff;
    transform: scale(1.04);
    box-shadow: 0 12px 28px rgba(230, 11, 112, 0.34);
}
/* Bottone ROSA CHIARO "Ti chiamiamo noi" — testo NERO */
.rei-offer-card__cta,
.rei-btn.rei-offer-card__cta {
    display: block;
    width: 100%;
    background: #EE9DC4;
    color: #000;
    border: none;
    border-radius: 999px;
    padding: 16px 24px;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.rei-offer-card__cta:hover,
.rei-offer-card__cta:focus-visible,
.rei-btn.rei-offer-card__cta:hover,
.rei-btn.rei-offer-card__cta:focus-visible {
    background: #F6C3DB;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
.rei-offer-card__download {
    color: #E60B70;
    font-weight: 700;
    text-decoration: none;
    align-self: center;
    font-size: 1rem;
}
.rei-offer-card__download:hover,
.rei-offer-card__download:focus-visible {
    color: #EB541D;
    text-decoration: underline;
}
.rei-offer-card__codice {
    margin-top: 14px;
    color: var(--rei-gray-text, #767674);
    font-size: 0.8125rem;
    text-align: center;
}

/* ==========================================================================
   6. BLOG — titolo display gradiente + card con titoli NERI hover fucsia,
   "Leggi Tutto" FUCSIA + bottone "VAI AL BLOG"
   ========================================================================== */
.rei-magazine-section {
    background: transparent;
    padding: 40px 0 24px;
}
.p4u-blog__header {
    text-align: center;
    margin-bottom: 40px;
}
.p4u-blog__title {
    font-size: clamp(2.5rem, 5.5vw, 4rem);
    margin: 0 0 12px;
}
.p4u-blog__sub {
    color: #000;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    font-weight: 800;
    margin: 0;
}
.rei-magazine-section__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 35px;
}
.rei-magazine-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #EB541D, #E60B70);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-radius: 24px;
    overflow: hidden; /* immagine a filo con gli angoli della card */
}
.rei-magazine-card__image-link { display: block; text-decoration: none; }
.rei-magazine-card__img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 0;
    margin-bottom: 0;
}
.rei-magazine-card__img--placeholder {
    background: linear-gradient(135deg, #FDECF4, #FBD7E9);
}
span.rei-magazine-card__img--placeholder { display: block; }
/* Titoli NERI bold, hover FUCSIA */
.rei-magazine-card__title {
    margin: 0 0 10px;
    padding: 20px 22px 0;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
}
.rei-magazine-card__title a {
    color: #000;
    text-decoration: none;
    transition: color 0.2s ease;
}
.rei-magazine-card__title a:hover,
.rei-magazine-card__title a:focus-visible {
    color: #E60B70;
    text-decoration: none;
}
.rei-magazine-card__date {
    color: var(--rei-ink, #3C3C3B);
    font-size: 0.9375rem;
    padding: 0 22px;
    margin: 0 0 12px;
}
.rei-magazine-card__excerpt {
    color: var(--rei-ink-soft, #555);
    font-size: 1rem;
    line-height: 1.55;
    padding: 0 22px;
    margin: 0 0 16px;
}
.rei-magazine-card__read {
    margin: auto 22px 22px;
    align-self: flex-start;
    color: #E60B70;
    font-size: 1.125rem;
    font-weight: 800;
    text-decoration: none;
}
.rei-magazine-card__read:hover,
.rei-magazine-card__read:focus-visible {
    color: #EB541D;
    text-decoration: underline;
}
/* Hover "emerge" (specificità > photo-hover.css) */
body .rei-magazine-section__grid .rei-magazine-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
body .rei-magazine-section__grid .rei-magazine-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(230, 11, 112, 0.16);
}
.p4u-blog__more {
    text-align: center;
    margin-top: 40px;
}

/* ==========================================================================
   7. APP — mockup + "Abbiamo anche un'app!" + QR store Power4U
   ========================================================================== */
.p4u-app {
    background: transparent;
    padding: 56px 0 64px;
}
.p4u-app__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 48px;
    align-items: center;
}
.p4u-app__mockup {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
}
.p4u-app__title {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    text-transform: none;
    margin: 0 0 10px;
}
.p4u-app__sub {
    color: #000;
    font-size: clamp(1.0625rem, 1.8vw, 1.375rem);
    font-weight: 800;
    margin: 0 0 28px;
}
.p4u-app__badges {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 440px;
}
.p4u-app__badge {
    display: block;
    transition: transform 0.2s ease;
}
.p4u-app__badge:hover,
.p4u-app__badge:focus-visible { transform: scale(1.03); }
.p4u-app__badge img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}

/* ==========================================================================
   TOOLTIP MODAL — popup "i" Informazioni
   ========================================================================== */
.rei-tooltip-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: rei-tooltip-fade-in 0.2s ease-out;
}
.rei-tooltip-overlay.is-open {
    display: flex;
}
.rei-tooltip-modal {
    background: #fff;
    border-radius: 20px;
    max-width: 600px;
    width: 100%;
    padding: 40px 36px 36px;
    position: relative;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.40);
    animation: rei-tooltip-scale-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rei-tooltip-modal[hidden] { display: none; }
.rei-tooltip-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: transparent;
    border: none;
    color: #E60B70;
    cursor: pointer;
    padding: 6px;
    line-height: 0;
    border-radius: 50%;
    transition: background 0.2s ease;
}
.rei-tooltip-modal__close:hover {
    background: #FDECF4;
}
.rei-tooltip-modal__title {
    font-size: 1.625rem;
    font-weight: 800;
    color: #000;
    margin: 0 0 20px;
}
.rei-tooltip-modal__body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.rei-tooltip-modal__body li {
    padding-left: 22px;
    position: relative;
    margin-bottom: 14px;
    color: var(--rei-ink-soft, #555);
    line-height: 1.55;
    font-size: 1rem;
}
.rei-tooltip-modal__body li::before {
    content: '•';
    position: absolute;
    left: 6px;
    color: #E60B70;
    font-weight: 800;
    font-size: 18px;
    line-height: 1.5;
}
.rei-tooltip-modal__body li:last-child { margin-bottom: 0; }

@keyframes rei-tooltip-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes rei-tooltip-scale-in {
    from { opacity: 0; transform: scale(0.92) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ==========================================================================
   Manina "cliccami" animata (indicatore visivo di clic)
   ========================================================================== */
.rei-clickhand-host { position: relative; overflow: visible !important; }
.rei-clickhand {
    position: absolute;
    right: -2px;
    bottom: -20px;
    width: 52px;
    height: 62px;
    pointer-events: none;
    z-index: 6;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.32));
    transform-origin: 50% 0;
    animation: rei-clickhand-tap 1.15s ease-in-out infinite;
    will-change: transform;
}
.rei-clickhand svg { display: block; width: 100%; height: 100%; }
@keyframes rei-clickhand-tap {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    40%      { transform: translateY(-11px) rotate(-7deg); }
    70%      { transform: translateY(-11px) rotate(-7deg); }
}
@media (prefers-reduced-motion: reduce) {
    .rei-clickhand { animation: none; }
}

/* La filigrana della home è SOLO quella di default del tema: il ::before di
   .rei-main col logo live (vedi templates.css, sezione "FILIGRANE").
   Il vecchio tile wm-logo.svg è stato rimosso per evitare la doppia filigrana. */

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .p4u-points__grid,
    .p4u-points__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .p4u-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
    .p4u-cards__grid { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
    .rei-offers__grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
    .p4u-app__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        text-align: center;
    }
    .p4u-app__badges { margin: 0 auto; }
}

@media (max-width: 768px) {
    .p4u-hero { padding: 40px 0 24px; }
    .p4u-gest { padding: 44px 0 8px; }
    .p4u-points { padding: 36px 0; }
    .p4u-points__grid,
    .p4u-points__grid--4 { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin: 0 auto; }
    .rei-offers { padding: 48px 0; }
    .rei-offer-card { padding: 28px 22px 24px; }
    .rei-price-duo { grid-template-columns: minmax(0, 1fr); }
    .rei-magazine-section { padding: 24px 0 14px; }
    .rei-magazine-section__grid { grid-template-columns: minmax(0, 1fr); }
    .rei-tooltip-modal { padding: 34px 24px 28px; }
    .rei-tooltip-modal__title { font-size: 1.375rem; }
    .p4u-btn { width: 100%; }
    .p4u-hero__buttons { flex-direction: column; }
    .p4u-card__panel { padding: 24px 24px 26px; }
}

/* ==========================================================================
   v1.0.4 — fix Power4U richiesti dal cliente:
   1) parole BIANCHE dentro gli ovali/pill (una regola generica sui link a
      specificità più alta le colorava d'arancio) + pulsazione FORTE;
   2) parole BIANCHE nei due quadrati Gestione online / Soluzioni digitali;
   3) ombre più profonde su tutti i rettangoli/quadrati.
   ========================================================================== */
@keyframes p4u-pulse-strong {
    0%, 100% { transform: scale(1);    box-shadow: 0 10px 24px rgba(0,0,0,0.25), 0 0 0 0 rgba(230, 11, 112, 0.45); }
    50%      { transform: scale(1.06); box-shadow: 0 16px 36px rgba(0,0,0,0.32), 0 0 0 14px rgba(230, 11, 112, 0); }
}
a.p4u-btn, .p4u-btn, .p4u-btn--gradient, .p4u-btn--black,
#site-main .p4u-btn, #site-main a.p4u-btn,
.p4u-blog__all, #site-main .p4u-blog__all {
    color: #FFFFFF !important;
    animation: p4u-pulse-strong 1.9s ease-in-out infinite;
    will-change: transform;
}
.p4u-btn:hover, .p4u-blog__all:hover { animation-play-state: paused; }
#site-main .p4u-card__links a,
.p4u-card__links a, .p4u-card__links a:link, .p4u-card__links a:visited {
    color: #FFFFFF !important;
    text-decoration-color: #FFFFFF;
}
.p4u-card__links a:hover { color: #FFFFFF !important; opacity: 0.85; }
.p4u-card__title, #site-main .p4u-card__title { color: #FFFFFF !important; }
/* ombre più profonde */
.p4u-card, .p4u-punto, .rei-offer-card, .rei-mag-card, .p4u-gest__card,
.fe-pulse-rect, .rei-price-duo__box, [class*="__card"] {
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.26) !important;
}
@media (prefers-reduced-motion: reduce) {
    a.p4u-btn, .p4u-btn, .p4u-blog__all { animation: none; }
}

/* ==========================================================================
   v1.0.5 — "GESTISCI LA TUA FORNITURA": rettangolo contenitore, parole più
   grandi e sottolineatura gradiente in movimento continuo.
   ========================================================================== */
.p4u-gest__box {
    background: rgba(255, 255, 255, 0.96);
    border: 2px solid #E60B70;
    border-radius: 24px;
    padding: 44px 48px 40px;
    text-align: center;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.26);
    max-width: 980px;
    margin: 0 auto;
}
.p4u-gest__box .p4u-gest__title {
    font-size: clamp(2.6rem, 5.4vw, 4.2rem) !important;
    margin: 0 0 6px;
}
.p4u-gest__box .p4u-gest__sub {
    font-size: clamp(1.2rem, 2vw, 1.6rem) !important;
    font-weight: 800;
    margin: 18px 0 0;
}
/* sottolineatura gradiente che scorre in continuo */
@keyframes p4u-underline-slide {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
.p4u-gest__underline {
    display: block;
    height: 7px;
    width: min(420px, 70%);
    margin: 14px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #EB541D, #E60B70, #EE9DC4, #EB541D);
    background-size: 200% 100%;
    animation: p4u-underline-slide 2.4s linear infinite;
}
@media (max-width: 600px) {
    .p4u-gest__box { padding: 28px 20px 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .p4u-gest__underline { animation: none; }
}


/* ===== Community (home) — sezione clienti copiata da REI, banda viola ===== */
.rei-community-section { position: relative; overflow: hidden; color: #ffffff; padding: 64px 0; background: linear-gradient(150deg, #7C3AED 0%, #4C1D95 100%); }
.rei-community-section::before, .rei-community-section::after { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; filter: blur(42px); pointer-events: none; z-index: 0; }
.rei-community-section::before { background: #C4A6FF; top: -180px; right: -120px; opacity: 0.20; }
.rei-community-section::after  { background: #6D28D9; bottom: -180px; left: -120px; opacity: 0.30; }
.rei-community-section__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 48px; }
.rei-community-section__content { max-width: 620px; }
.rei-community-section .rei-eyebrow { color: #E9D8FF; }
.rei-community-section__title { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.06; margin: 10px 0 18px; color: #ffffff; }
.rei-community-section__lead { font-size: 1.0625rem; line-height: 1.6; color: rgba(255,255,255,0.9); margin: 0 0 26px; max-width: 560px; }
.rei-community-section__cta { background: #ffffff; color: #4C1D95; --btn-ring: rgba(255,255,255,.60); }
.rei-community-section__cta:hover { background: #F3ECFF; color: #4C1D95; }
.rei-community-section__visual { position: relative; aspect-ratio: 4 / 3; }
.rei-community-section__visual .rei-photo, .rei-community-section__visual .rei-photo-placeholder { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rei-radius-2xl, 24px); }
.rei-photo-placeholder--community { background: linear-gradient(135deg, #7C3AED, #4C1D95); }
@media (max-width: 860px) {
    .rei-community-section__inner { grid-template-columns: 1fr; gap: 26px; }
    .rei-community-section__visual { order: -1; max-width: 460px; width: 100%; margin: 0 auto; }
}


/* ===== v1.2.6 — Community in stile Facile: colore del brand, parole più grandi, pulsante ovale che pulsa molto ===== */
.rei-community-section {
    background: linear-gradient(150deg, #EB541D 0%, #E60B70 100%) !important;
}
.rei-community-section::before { background: #FFB48A !important; opacity: 0.30 !important; }
.rei-community-section::after  { background: #E60B70 !important; opacity: 0.28 !important; }
.rei-community-section .rei-eyebrow { color: #ffffff !important; font-size: 1rem !important; letter-spacing: 0.14em; }
.rei-community-section__title {
    font-size: clamp(2.8rem, 5.6vw, 4.1rem) !important;
    line-height: 1.08 !important;
    color: #ffffff !important;
}
.rei-community-section__lead {
    font-size: clamp(1.22rem, 2.1vw, 1.55rem) !important;
    line-height: 1.55 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.22);
    max-width: 640px;
}
.rei-community-section__cta {
    background: #ffffff !important;
    color: #E60B70 !important;
    font-size: 1.15rem !important;
    padding: 16px 34px !important;
    animation: rei-comm-cta-pulse 1.15s ease-in-out infinite !important;
    will-change: transform, box-shadow;
}
.rei-photo-placeholder--community { background: linear-gradient(135deg, #EB541D, #E60B70) !important; }
@keyframes rei-comm-cta-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,255,255,0.75); }
    50%      { transform: scale(1.09); box-shadow: 0 0 0 22px rgba(255,255,255,0); }
}
@media (prefers-reduced-motion: reduce) {
    .rei-community-section__cta { animation: none !important; }
}