/* ============================================================
   KE GROUP ENERGY — MOBILE STYLESHEET v3
   Rivoluzionato per mobile: tutto proporzionato, niente troppo grande
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* Hamburger: nascosto di default, visibile solo su mobile via media query */
.ke-hamburger { display: none; }
/* Drawer e overlay: nascosti di default */
.ke-nav-drawer { display: none; }
.ke-nav-overlay { display: none; }
@media (max-width: 980px) {
  .ke-nav-drawer { display: flex; transform: translateX(105%); }
  .ke-nav-drawer.is-open { transform: translateX(0); }
  .ke-nav-overlay.is-open { display: block; }
}

/* ============================================================
   NAV HAMBURGER
   ============================================================ */
@media (max-width: 980px) {
  .ke-nav {
    padding: 12px 5% !important;
    height: auto !important;
  }
  .ke-links { display: none !important; }

  .ke-hamburger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px; height: 40px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s;
  }
  .ke-hamburger:hover { background: rgba(255,255,255,.14); }
  .ke-hamburger span {
    display: block; width: 18px; height: 2px;
    background: rgba(255,255,255,.92);
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
  }
  .ke-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .ke-hamburger.is-open span:nth-child(2) { opacity: 0; }
  .ke-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .ke-nav-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.6); backdrop-filter: blur(4px); z-index: 8000;
  }
  .ke-nav-overlay.is-open { display: block; }

  .ke-nav-drawer {
    position: fixed; top: 0; right: 0;
    height: 100dvh; width: min(80vw, 300px);
    background: rgba(6,6,8,.97);
    border-left: 1px solid rgba(255,255,255,.10);
    z-index: 9000;
    transform: translateX(105%);
    transition: transform .28s cubic-bezier(.32,.72,0,1);
    display: flex; flex-direction: column; overflow-y: auto;
  }
  .ke-nav-drawer.is-open { transform: translateX(0); }
  .ke-nav-drawer__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0;
  }
  .ke-nav-drawer__logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
  .ke-nav-drawer__logo img { height: 28px; }
  .ke-nav-drawer__logo span {
    font-family: 'Unbounded', sans-serif; font-size: .7rem; font-weight: 900;
    text-transform: uppercase; color: #fff; letter-spacing: -.02em;
  }
  .ke-nav-drawer__close {
    width: 34px; height: 34px;
    border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07);
    border-radius: 50%; cursor: pointer; color: rgba(255,255,255,.7);
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
    -webkit-tap-highlight-color: transparent;
  }
  .ke-nav-drawer__links {
    display: flex; flex-direction: column; padding: 14px 18px; gap: 5px; flex: 1;
  }
  .ke-nav-drawer__links a {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px;
    border-radius: 12px; border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.04); color: rgba(255,255,255,.85) !important;
    font-weight: 700; font-size: .82rem; letter-spacing: .04em;
    text-transform: uppercase; text-decoration: none;
    transition: background .18s, border-color .18s;
    -webkit-tap-highlight-color: transparent;
  }
  .ke-nav-drawer__links a:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.14); }
  .ke-nav-drawer__links a.is-cta {
    background: rgba(74,222,128,.14); border-color: rgba(74,222,128,.35);
    color: #4ade80 !important; font-family: 'Unbounded', sans-serif;
    font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; margin-top: 6px;
  }
  .ke-nav-drawer__footer { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.07); flex-shrink: 0; }
  .ke-nav-drawer__footer a {
    display: flex; align-items: center; gap: 8px; padding: 12px 14px;
    background: linear-gradient(135deg, #22c55e, #16a34a); border-radius: 10px;
    color: #041008 !important; font-family: 'Unbounded', sans-serif;
    font-size: .75rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
    text-decoration: none; justify-content: center;
    box-shadow: 0 4px 16px rgba(34,197,94,.3);
    -webkit-tap-highlight-color: transparent;
  }
}

/* ============================================================
   FLOATING CTA — WhatsApp + Preventivo
   ============================================================ */
.ke-fab-group { display: none; }
@media (max-width: 768px) {
  .ke-fab-group {
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); right: 16px;
    z-index: 7000;
  }
  .ke-fab {
    display: flex; align-items: center; gap: 7px; padding: 10px 16px;
    border-radius: 999px; font-size: .72rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
    box-shadow: 0 4px 18px rgba(0,0,0,.35); border: none; cursor: pointer;
    white-space: nowrap; -webkit-tap-highlight-color: transparent;
    transition: transform .15s, box-shadow .15s;
  }
  .ke-fab:active { transform: scale(.96); }
  .ke-fab--wa { background: #25D366; color: #fff !important; }
  .ke-fab--cta {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #041008 !important; font-family: 'Unbounded', sans-serif;
    box-shadow: 0 4px 16px rgba(34,197,94,.4);
  }
}

/* ============================================================
   WRAP & CONTAINER — forza larghezza corretta ovunque
   ============================================================ */
@media (max-width: 768px) {
  .container {
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }
  .ke-wrap {
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   PAGE HERO — pagine interne
   ============================================================ */
@media (max-width: 768px) {
  .pageHero { padding: calc(var(--keNavH, 64px) + 20px) 0 28px !important; }
  .pageHero h1 {
    font-size: clamp(1.5rem, 6.5vw, 2.2rem) !important;
    line-height: 1.08 !important;
    word-break: break-word;
  }
  .pageHero p { font-size: .88rem !important; margin-top: 10px !important; line-height: 1.6; }
  .breadcrumb { font-size: .7rem !important; margin-top: 8px !important; opacity: .6; }

  .section { padding: 40px 0 !important; }
  .section h2 { font-size: clamp(1.3rem, 5.5vw, 1.8rem) !important; line-height: 1.1 !important; }
  .sectionHead { margin-bottom: 20px !important; }
  .sectionHead h2 { margin-bottom: 8px !important; }

  .split { grid-template-columns: 1fr !important; gap: 16px !important; }
  .split__media { order: -1; }
  .mediaImg, .mediaVideo { height: 200px !important; border-radius: 12px !important; }

  .cards { grid-template-columns: 1fr !important; gap: 10px !important; }
  .card { border-radius: 14px !important; }
  .card__img { height: 160px !important; }
}

/* ============================================================
   HOME HERO — compatto e d'impatto
   ============================================================ */
@media (max-width: 768px) {
  .ke-hero {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 100svh;
    padding: calc(var(--keNavH, 64px) + 12px) 0 60px !important;
    align-content: center;
    gap: 0 !important;
  }
  .ke-hero h1 {
    font-size: clamp(2.2rem, 11vw, 4rem) !important;
    line-height: .9 !important;
    letter-spacing: -.03em !important;
    margin-top: 6px !important;
  }
  .ke-hero .ke-copy { max-width: 100% !important; }
  .ke-hero p {
    font-size: .86rem !important;
    margin-top: 14px !important;
    line-height: 1.6 !important;
    max-width: 92%;
    opacity: .82 !important;
  }
  .ke-kicker { font-size: .62rem !important; letter-spacing: .10em !important; }
  .ke-visual { display: none !important; }
  .ke-badge {
    font-size: .65rem !important;
    padding: 6px 11px !important;
    margin-top: 14px !important;
  }
  .ke-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 22px !important;
  }
  .ke-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 16px !important;
    font-size: .75rem !important;
    border-radius: 10px !important;
    text-align: center !important;
    letter-spacing: .08em !important;
  }
  .ke-actions .ke-btn:first-child {
    padding: 16px !important;
    font-size: .78rem !important;
    box-shadow: 0 4px 20px rgba(74,222,128,.28) !important;
  }
}

/* ============================================================
   HOME SECTIONS & CARDS — dimensioni corrette
   ============================================================ */
@media (max-width: 768px) {
  .ke-section { padding: 40px 0 !important; }

  /* HEADING PRINCIPALE — la correzione più importante */
  .ke-section h2,
  .ke-panel h2 {
    font-size: clamp(1.6rem, 7vw, 2.6rem) !important;
    line-height: .94 !important;
    margin-bottom: 14px !important;
  }

  .ke-panel-inner { padding: 22px 16px !important; }

  .ke-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 16px !important;
  }
  .ke-col-4, .ke-col-6, .ke-col-12 { grid-column: 1 / -1 !important; }

  .ke-card {
    padding: 18px !important;
    border-radius: 16px !important;
  }
  .ke-card h3 { font-size: .88rem !important; margin-bottom: 8px !important; }
  .ke-card p { font-size: .84rem !important; line-height: 1.65 !important; }
  .ke-card > img.ke-card-img {
    height: 180px !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
  }

  /* Horizontal scroll */
  .ke-hscroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    border-radius: 14px !important;
  }
  .ke-hscroll::-webkit-scrollbar { display: none !important; }
  .ke-hscroll__track {
    gap: 10px !important;
    padding: 12px !important;
    display: flex !important;
    width: max-content !important;
  }
  .ke-slide {
    width: min(260px, 75vw) !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  .ke-slide img { height: 160px !important; object-fit: cover !important; width: 100% !important; display: block !important; }
  .ke-slide .b { padding: 12px !important; }
  .ke-slide h3 { font-size: .84rem !important; margin-bottom: 5px !important; }
  .ke-slide p { font-size: .78rem !important; line-height: 1.5 !important; }
}

/* Ambiti: slide leggermente più larghe */
@media (max-width: 768px) {
  #ambiti .ke-slide { min-width: min(280px, 80vw) !important; width: min(280px, 80vw) !important; }
}

/* ============================================================
   PRODOTTI PAGE
   ============================================================ */
@media (max-width: 768px) {
  .ke-cat-title { font-size: clamp(1.1rem, 5vw, 1.5rem) !important; margin-top: 24px !important; margin-bottom: 12px !important; }
  body.page-prodotti .cards { grid-template-columns: 1fr !important; }
  body.page-prodotti .card {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    gap: 0 !important; padding: 0 !important;
    overflow: hidden !important; border-radius: 14px !important;
    align-items: stretch !important;
  }
  body.page-prodotti .card .card__img {
    width: 100% !important; height: 100% !important; min-height: 100px !important;
    object-fit: contain !important; padding: 10px !important;
    background: rgba(255,255,255,.04) !important; border-radius: 0 !important;
    margin: 0 !important; border-right: 1px solid rgba(255,255,255,.06) !important;
  }
  body.page-prodotti .card .card__body { padding: 12px !important; display: flex !important; flex-direction: column !important; gap: 5px !important; }
  body.page-prodotti .card .card__body h3 { font-size: .82rem !important; margin: 0 !important; line-height: 1.3 !important; }
  body.page-prodotti .card .card__body p { font-size: .75rem !important; line-height: 1.5 !important; margin: 0 !important; opacity: .75 !important; }
  body.page-prodotti .card .card__body .btn { width: auto !important; align-self: flex-start !important; padding: 7px 11px !important; font-size: .7rem !important; margin-top: auto !important; }
}

/* ============================================================
   BANDI / INCENTIVI
   ============================================================ */
@media (max-width: 768px) {
  #ke-incentivi-list.cards { grid-template-columns: 1fr !important; }
  #ke-incentivi-list .card { padding: 14px !important; border-radius: 14px !important; }
  #ke-incentivi-list .card .card__img { height: 140px !important; border-radius: 10px !important; margin-bottom: 10px !important; }
  .incentivo-stato, [class*="stato"] {
    display: inline-block !important; font-size: .68rem !important;
    padding: 3px 9px !important; border-radius: 999px !important;
    background: rgba(74,222,128,.12) !important; border: 1px solid rgba(74,222,128,.25) !important;
    color: #4ade80 !important; font-weight: 700 !important;
  }
}

/* ============================================================
   PREVENTIVO
   ============================================================ */
@media (max-width: 768px) {
  .reonicCard { padding: 12px !important; border-radius: 16px !important; }
  .quoteTabs { display: flex !important; gap: 5px !important; margin-bottom: 12px !important; border-radius: 10px !important; padding: 4px !important; }
  .quoteTab { flex: 1 !important; padding: 9px 6px !important; font-size: .75rem !important; border-radius: 8px !important; text-align: center !important; }
  .reonic-iframe { min-height: 480px !important; }
}

/* ============================================================
   AMBITI INTERVENTO
   ============================================================ */
@media (max-width: 768px) {
  .listCards { grid-template-columns: 1fr !important; gap: 10px !important; }
  .listCard { border-radius: 14px !important; overflow: hidden !important; }
  .listCard__img { height: 160px !important; width: 100% !important; object-fit: cover !important; }
}

/* ============================================================
   CHI SIAMO
   ============================================================ */
@media (max-width: 768px) {
  .chiSiamoIntro .split__text h2 { font-size: clamp(1.2rem, 4.8vw, 1.7rem) !important; }
  .chiSiamoIntro .split__text p { font-size: .88rem !important; line-height: 1.65 !important; }
  .mediaBadge { font-size: .7rem !important; padding: 6px 9px !important; }
}

/* ============================================================
   PARTNER
   ============================================================ */
@media (max-width: 768px) {
  .partnerGrid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .partnerCard { padding: 14px !important; border-radius: 14px !important; }
  .partnerCard__logoWrap { height: 52px !important; margin-bottom: 8px !important; }
}

/* ============================================================
   GOVERNANCE / DOCS ACCORDION
   ============================================================ */
@media (max-width: 768px) {
  .docAcc { gap: 8px !important; }
  .docSummary { padding: 13px !important; }
  .docTitle { font-size: .88rem !important; }
  .docHint { font-size: .75rem !important; }
  .docBody { padding: 0 13px 13px !important; }
  .prose h2 { font-size: clamp(1.1rem, 4.5vw, 1.5rem) !important; margin-top: 22px !important; }
  .prose p, .prose li { font-size: .88rem !important; line-height: 1.7 !important; }
}

/* ============================================================
   STATS / KPI / TABLES
   ============================================================ */
@media (max-width: 768px) {
  .stats, .kpi { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .stat, .kpiItem { padding: 14px 10px !important; border-radius: 12px !important; }
  .tableWrap, .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; border-radius: 10px !important; }
  table { min-width: 460px; }
  th, td { padding: 9px 9px !important; font-size: .75rem !important; white-space: nowrap; }
}

/* ============================================================
   NEWSLETTER
   ============================================================ */
@media (max-width: 768px) {
  .ke-newsletter { padding: 36px 16px !important; }
  .ke-newsletter h2 { font-size: clamp(1.1rem, 4.5vw, 1.5rem) !important; }
  .ke-newsletter p { font-size: .84rem !important; }
  .ke-newsletter__form { flex-direction: column !important; gap: 8px !important; }
  .ke-newsletter__input, .ke-newsletter__btn { width: 100% !important; font-size: 16px !important; }
  .ke-newsletter__btn { padding: 13px !important; }
}

/* ============================================================
   FOOTER
   ============================================================ */
@media (max-width: 768px) {
  .ke-footer { padding: 32px 16px 48px !important; }
  .ke-footer .row { flex-direction: column !important; gap: 22px !important; }
  .ke-footer .row > div:nth-child(2) { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; width: 100% !important; justify-content: flex-start !important; }
  .ke-footer .row > div:nth-child(2) > div { margin-left: 0 !important; }
  .ke-footer .row > div:nth-child(2) > div:last-child { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; width: 100% !important; margin: 0 !important; }
  .ke-footer .row > div:nth-child(2) > div:last-child a { padding: 9px 10px !important; background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 8px !important; font-size: .75rem !important; text-align: center !important; }
  .ke-footer .ke-small { font-size: .75rem !important; }
}

/* ============================================================
   CTA BANNER
   ============================================================ */
@media (max-width: 768px) {
  .ctaBanner { flex-direction: column !important; gap: 14px !important; padding: 18px !important; border-radius: 14px !important; text-align: center !important; }
  .ctaBanner h3 { font-size: .95rem !important; }
  .ctaBanner .btn { width: 100% !important; justify-content: center !important; }
  .ctaRow { flex-direction: column !important; gap: 8px !important; }
  .ctaRow .btn, .ctaRow a.btn { width: 100% !important; text-align: center !important; justify-content: center !important; padding: 14px !important; }
}

/* ============================================================
   TOUCH TARGETS — minimo 44px
   ============================================================ */
@media (max-width: 768px) {
  .btn, a.btn, button.btn, .ke-btn, button[type="submit"] {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* ============================================================
   SICUREZZA OVERFLOW
   ============================================================ */
@media (max-width: 768px) {
  img, video, iframe, embed, object { max-width: 100% !important; }
  p, h1, h2, h3, h4, h5, h6, li, td, th { overflow-wrap: break-word !important; word-break: break-word !important; }
  pre, code { overflow-x: auto !important; max-width: 100% !important; font-size: .75rem !important; }
}

/* ============================================================
   ANIMATIONS — leggere su mobile
   ============================================================ */
@media (max-width: 768px) {
  .reveal { transform: translateY(12px) !important; }
  .reveal.visible { transform: translateY(0) !important; }
}

/* ============================================================
   iOS — previene zoom su input focus
   ============================================================ */
@supports (-webkit-touch-callout: none) {
  input, textarea, select { font-size: 16px !important; }
}

/* ============================================================
   SCHERMI MOLTO PICCOLI (< 390px)
   ============================================================ */
@media (max-width: 390px) {
  .ke-logo span { display: none !important; }
  .ke-hero h1 { font-size: clamp(1.9rem, 10vw, 2.6rem) !important; }
  .ke-section h2, .ke-panel h2 { font-size: clamp(1.4rem, 7vw, 2rem) !important; }
  .pageHero h1 { font-size: 1.4rem !important; }
  .container, .ke-wrap { padding-left: 13px !important; padding-right: 13px !important; }
}

/* ============================================================
   TABLET (769px–980px) — layout intermedio
   ============================================================ */
@media (min-width: 769px) and (max-width: 980px) {
  .ke-hero h1 { font-size: clamp(2.8rem, 8vw, 5rem) !important; }
  .ke-section h2, .ke-panel h2 { font-size: clamp(2rem, 6vw, 3.5rem) !important; }
  .ke-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .ke-col-4, .ke-col-6 { grid-column: span 1 !important; }
  .ke-col-12 { grid-column: span 2 !important; }
  .ke-slide { width: min(360px, 48vw) !important; }
}