/*
Theme Name:   Euralpha — Hello Child
Theme URI:    https://euralpha.it
Description:  Child theme di Hello Elementor. Design system Euralpha (stile Bending Spoons).
Author:       Webcom Consulting
Author URI:   https://web-communication.it
Template:     hello-elementor
Version:      1.5.0
Text Domain:  euralpha-child
*/

/* ============================================================
   EURALPHA — DESIGN SYSTEM v1.2

   COSA CAMBIA RISPETTO ALLA v1.1
   1. La scala tipografica e' definita QUI, non nelle
      Impostazioni sito di Elementor. Il design funziona anche
      senza aver configurato i font globali.
   2. I selettori di layout usano la doppia classe (.eu-x.eu-x)
      invece di .e-con.eu-x: stessa specificita' 0-2-0 ma
      nessuna dipendenza dalla classe interna dei container,
      che cambia tra Elementor 3.x e 4.x.
   3. I colori dei titoli hanno specificita' sufficiente a
      battere il kit globale di Elementor.

   REGOLA OPERATIVA
   Sui container con una classe eu-* non impostare padding,
   direzione flex o gap dal pannello: il pannello vince e ti
   ritrovi valori doppi.
   ============================================================ */

:root{
  --eu-inox:     #0E1113;
  --eu-inox-2:   #171B1E;
  --eu-inox-3:   #232A2E;
  --eu-camera:   #F2F3F1;
  --eu-camera-2: #E5E7E3;
  --eu-acciaio:  #8E9598;
  --eu-testo-2:  #4A5154;
  --eu-ambra:    #E4B23F;

  --eu-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --eu-body:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --eu-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --eu-pad-y:    clamp(5.5rem, 11vw, 11rem);
  --eu-radius:   26px;
  --eu-radius-l: 34px;
  --eu-ease:     cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   0. TIPOGRAFIA DI BASE — autosufficiente
   Non serve configurare i Font globali di Elementor.
   ============================================================ */
body,
body.elementor-page{
  font-family: var(--eu-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--eu-inox);
  background-color: var(--eu-camera);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.elementor-widget-heading .elementor-heading-title{
  font-family: var(--eu-display);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: .98;
  margin: 0;
}
h1, .elementor-widget-heading h1.elementor-heading-title{
  font-size: clamp(2.9rem, 7.4vw, 7.2rem);
}
h2, .elementor-widget-heading h2.elementor-heading-title{
  font-size: clamp(2.1rem, 4.6vw, 4.25rem);
}
h3, .elementor-widget-heading h3.elementor-heading-title{
  font-size: clamp(1.35rem, 1.8vw, 1.85rem);
  line-height: 1.1; letter-spacing: -.02em;
}
h4, .elementor-widget-heading h4.elementor-heading-title{
  font-size: 1.05rem; line-height: 1.2;
}

/* Enfasi in corsivo dentro i titoli: scrivere <em>...</em> nel campo Titolo */
h1 em, h2 em, h3 em,
.elementor-heading-title em{
  font-style: italic; font-weight: 500; color: var(--eu-ambra);
}

/* ============================================================
   1. SEZIONI
   Classi: eu-sec  +  eu-dark | eu-light
   ============================================================ */
.eu-sec.eu-sec{ padding-block: var(--eu-pad-y); }
.eu-sec-top-0.eu-sec-top-0{ padding-block-start: 0; }
.eu-sec-bot-0.eu-sec-bot-0{ padding-block-end: 0; }

.eu-dark{ background-color: var(--eu-inox); color: var(--eu-camera); }
.eu-light{ background-color: var(--eu-camera); color: var(--eu-inox); }

/* Colori dei titoli: specificita' 0-3-0, batte il kit globale */
.eu-dark .elementor-widget-heading .elementor-heading-title,
.eu-dark h1, .eu-dark h2, .eu-dark h3, .eu-dark h4{ color: var(--eu-camera); }
.eu-light .elementor-widget-heading .elementor-heading-title,
.eu-light h1, .eu-light h2, .eu-light h3, .eu-light h4{ color: var(--eu-inox); }

.eu-dark .elementor-widget-text-editor,
.eu-dark p, .eu-dark li{ color: rgba(242,243,241,.72); }
.eu-light .elementor-widget-text-editor,
.eu-light p, .eu-light li{ color: var(--eu-testo-2); }

/* Su fondo chiaro l'ambra non passa il contrasto AA */
.eu-light h1 em, .eu-light h2 em, .eu-light h3 em,
.eu-light .elementor-heading-title em{ color: var(--eu-inox); }

/* ============================================================
   2. UTILITY TIPOGRAFICHE
   ============================================================ */
.eu-eyebrow, .eu-eyebrow *{
  font-family: var(--eu-mono) !important;
  font-size: .72rem !important;
  font-weight: 400 !important;
  letter-spacing: .22em !important;
  line-height: 1.4 !important;
  text-transform: uppercase;
  color: var(--eu-acciaio) !important;
  margin: 0;
}
.eu-lead, .eu-lead p{
  font-size: clamp(1.05rem, 1.5vw, 1.4rem) !important;
  line-height: 1.45; max-width: 34ch; margin: 0;
}
.eu-misura .elementor-heading-title{ max-width: 15ch; }
.eu-testo p{ max-width: 46ch; }
.eu-testo p + p{ margin-top: 1.2rem; }

/* ============================================================
   3. BOTTONI E LINK
   ============================================================ */
.eu-btn-solid .elementor-button,
.eu-btn-ghost .elementor-button{
  font-family: var(--eu-body);
  font-size: .95rem; font-weight: 500;
  padding: .95em 1.7em;
  border-radius: 100px;
  border: 1px solid transparent;
  transition: background-color .35s var(--eu-ease),
              color .35s var(--eu-ease),
              border-color .35s var(--eu-ease);
}
.eu-btn-solid .elementor-button{ background-color: var(--eu-inox); color: var(--eu-camera); }
.eu-btn-solid .elementor-button:hover{ background-color: var(--eu-ambra); color: var(--eu-inox); }
.eu-btn-ghost .elementor-button{ background-color: transparent; border-color: rgba(14,17,19,.22); color: var(--eu-inox); }
.eu-btn-ghost .elementor-button:hover{ background-color: var(--eu-inox); border-color: var(--eu-inox); color: var(--eu-camera); }

.eu-dark .eu-btn-solid .elementor-button{ background-color: var(--eu-camera); color: var(--eu-inox); }
.eu-dark .eu-btn-solid .elementor-button:hover{ background-color: var(--eu-ambra); }
.eu-dark .eu-btn-ghost .elementor-button{ border-color: rgba(242,243,241,.24); color: var(--eu-camera); }
.eu-dark .eu-btn-ghost .elementor-button:hover{ background-color: var(--eu-camera); border-color: var(--eu-camera); color: var(--eu-inox); }

.elementor-button-icon{ transition: transform .35s var(--eu-ease); }
.elementor-button:hover .elementor-button-icon{ transform: translateX(4px); }

/* Link "freccia" sottolineato */
.eu-arrow .elementor-button{
  background: transparent !important;
  border: 0; border-bottom: 1px solid currentColor;
  border-radius: 0; padding: 0 0 .35em;
  font-weight: 500; font-size: .95rem;
  transition: color .35s var(--eu-ease), border-color .35s var(--eu-ease);
}
.eu-dark .eu-arrow .elementor-button{ color: var(--eu-camera); border-bottom-color: rgba(242,243,241,.3); }
.eu-light .eu-arrow .elementor-button{ color: var(--eu-inox); border-bottom-color: rgba(14,17,19,.25); }

/* ============================================================
   4. HEADER
   ============================================================ */
.eu-header.eu-header{
  padding-block: 14px;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--eu-ease),
              border-color .4s var(--eu-ease),
              padding .4s var(--eu-ease);
}
.eu-header.eu-dark{ background-color: var(--eu-inox); }
.eu-header.elementor-sticky--effects{
  padding-block: 9px;
  background-color: rgba(14,17,19,.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--eu-inox-3);
}
.eu-nav.eu-nav{
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; justify-content: space-between;
  gap: 2rem; padding: 0; width: 100%;
}
.eu-nav > *{ width: auto; }
.eu-header .elementor-nav-menu a{
  font-family: var(--eu-body); font-size: .93rem;
  color: rgba(242,243,241,.72); transition: color .3s;
}
.eu-header .elementor-nav-menu a:hover,
.eu-header .elementor-nav-menu .current-menu-item a{ color: var(--eu-camera); }
.eu-header .elementor-menu-toggle{ color: var(--eu-camera); background: transparent; }
.eu-logo img{ height: 34px; width: auto; }
@media (max-width: 880px){ .eu-nav-desktop{ display: none; } }

/* ============================================================
   5. HERO
   ============================================================ */
.eu-hero.eu-hero{ padding-block-start: clamp(8rem, 15vh, 11rem); overflow: hidden; }
.eu-hero-inline.eu-hero-inline{ padding-block-start: clamp(3rem, 6vw, 5rem); overflow: hidden; }

.eu-instr{
  display: flex; flex-wrap: wrap; gap: .4rem 2.2rem; align-items: center;
  font-family: var(--eu-mono);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--eu-acciaio) !important;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--eu-inox-3);
}
.eu-instr b{ color: var(--eu-camera); font-weight: 500; }
.eu-instr .eu-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--eu-ambra); display: inline-block; margin-right: .55em;
  animation: eu-pulse 2.4s infinite;
}
@keyframes eu-pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }

.eu-h1{ margin-block-start: clamp(2.5rem,6vw,4.5rem); }
.eu-h1 .elementor-heading-title{ max-width: 15ch; }

.eu-hero-foot.eu-hero-foot{
  display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: 2.5rem; padding: 0;
  margin-block-start: clamp(2rem,4vw,3.2rem);
}
.eu-hero-foot > *{ width: auto; }
.eu-cta-row.eu-cta-row{
  display: flex; flex-direction: row; flex-wrap: wrap;
  gap: 12px; padding: 0; width: auto;
}
.eu-cta-row > *{ width: auto; }

/* ============================================================
   6. RAIL PRODOTTI — marquee CSS, nessuna dipendenza Pro
   ============================================================ */
.eu-rail.eu-rail{
  position: relative; padding: 0;
  margin-block: clamp(3.5rem,7vw,6rem);
  overflow: hidden; max-width: 100%;
}
.eu-rail-track.eu-rail-track{
  display: flex; flex-direction: row; flex-wrap: nowrap;
  gap: 18px; padding: 0; width: max-content; max-width: none;
  animation: eu-slide 44s linear infinite;
}
.eu-rail:hover .eu-rail-track{ animation-play-state: paused; }
@keyframes eu-slide{ to{ transform: translateX(calc(-50% - 9px)); } }

.eu-rail-card.eu-rail-card{
  width: clamp(230px, 26vw, 330px);
  flex: none; padding: 0;
  aspect-ratio: 4/5;
  border-radius: var(--eu-radius);
  overflow: hidden; position: relative;
  background-color: var(--eu-inox-2);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.eu-rail-card .eu-cover img{
  filter: grayscale(1) contrast(1.05) brightness(.82);
  transition: filter .6s var(--eu-ease), transform .8s var(--eu-ease);
}
.eu-rail-card:hover .eu-cover img{ filter: none; transform: scale(1.04); }
.eu-caption{
  position: relative; z-index: 2; padding: 1.4rem;
  font-family: var(--eu-mono); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase;
  background: linear-gradient(to top, rgba(14,17,19,.9), transparent);
}
.eu-caption p{ color: var(--eu-camera) !important; margin: 0; }
.eu-rail::after{
  content:""; position: absolute; inset: 0 0 0 auto; width: 16vw;
  pointer-events: none; z-index: 3;
  background: linear-gradient(to left, var(--eu-inox), transparent);
}

/* Immagine a copertura totale */
.eu-cover.eu-cover{
  position: absolute !important; inset: 0; z-index: 0;
  width: 100%; height: 100%; margin: 0 !important; padding: 0;
}
.eu-cover .elementor-widget-container,
.eu-cover figure, .eu-cover a{ height: 100%; margin: 0; }
.eu-cover img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   7. GRIGLIE A FILO
   gap 1px + sfondo sul padre = nessun bordo da gestire
   ============================================================ */
.eu-stats.eu-stats{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; padding: 0; width: 100%;
  background-color: var(--eu-inox-3);
  border-block: 1px solid var(--eu-inox-3);
}
.eu-stat.eu-stat{
  background-color: var(--eu-inox);
  padding: clamp(1.8rem,3.2vw,2.8rem) clamp(1rem,2vw,2rem);
  width: auto;
}
.eu-stat .elementor-counter-number-wrapper{
  font-family: var(--eu-display); font-weight: 600;
  font-size: clamp(2.6rem,5.2vw,4.4rem);
  letter-spacing: -.05em; line-height: 1;
  color: var(--eu-camera); justify-content: flex-start;
}
.eu-stat .elementor-counter-title{
  margin-top: .7rem; text-align: left;
  font-family: var(--eu-mono); font-size: .72rem; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase; color: var(--eu-acciaio);
}

.eu-why.eu-why{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; padding: 0; width: 100%;
  background-color: var(--eu-inox-3);
  border: 1px solid var(--eu-inox-3);
  border-radius: var(--eu-radius);
  overflow: hidden;
  margin-block-start: clamp(2rem,4vw,3.4rem);
}
.eu-why-cell.eu-why-cell{
  background-color: var(--eu-inox);
  padding: clamp(1.8rem,3vw,2.6rem);
  gap: .7rem; width: auto;
  transition: background-color .4s var(--eu-ease);
}
.eu-why-cell:hover{ background-color: var(--eu-inox-2); }
.eu-why-cell p{ max-width: 32ch; font-size: .98rem; color: var(--eu-acciaio) !important; }

.eu-oblo .elementor-heading-title{ display: flex; align-items: center; gap: .7rem; }
.eu-oblo .elementor-heading-title::before{
  content:""; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--eu-ambra); flex: none;
}

/* ============================================================
   8. INTESTAZIONI DI SEZIONE E GRIGLIE DI CARD
   ============================================================ */
.eu-sec-head.eu-sec-head{
  display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: 2rem; padding: 0; width: 100%;
  margin-block-end: clamp(2.2rem,4vw,3.6rem);
}
.eu-sec-head > *{ width: auto; }
.eu-sec-head > div{ padding: 0; gap: 1rem; }

.eu-manifesto.eu-manifesto{
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem,6vw,6rem); align-items: start; padding: 0; width: 100%;
}
.eu-manifesto > div{ padding: 0; gap: 1.2rem; align-items: flex-start; width: auto; }

.eu-prod-grid.eu-prod-grid,
.eu-settori.eu-settori{
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px; padding: 0; width: 100%;
}

/* Card prodotto */
.eu-prod.eu-prod{
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--eu-radius-l);
  min-height: clamp(340px,42vw,520px);
  display: flex; flex-direction: column;
  justify-content: flex-end; align-items: flex-start;
  padding: clamp(1.6rem,2.6vw,2.6rem);
  padding-top: clamp(4.5rem,7vw,6rem);   /* spazio per l'etichetta in alto */
  gap: .85rem; width: auto;
  color: var(--eu-camera);
  background-color: var(--eu-camera-2);
}
.eu-prod::before{
  content:""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
              rgba(14,17,19,.92) 0%,
              rgba(14,17,19,.42) 48%,
              rgba(14,17,19,.12) 100%);
}
.eu-prod > *:not(.eu-cover){ position: relative; z-index: 2; }
.eu-prod .eu-cover img{
  filter: grayscale(.85) contrast(1.02);
  transition: transform 1s var(--eu-ease), filter .8s var(--eu-ease);
}
.eu-prod:hover .eu-cover img{ transform: scale(1.05); filter: grayscale(0) contrast(1.05); }
.eu-prod .elementor-heading-title{ color: var(--eu-camera); }
.eu-prod p{ color: rgba(242,243,241,.76) !important; max-width: 38ch; margin: 0; }
.eu-tag.eu-tag{
  position: absolute !important; z-index: 2; width: auto !important;
  top: clamp(1.4rem,2.4vw,2.2rem); left: clamp(1.6rem,2.6vw,2.6rem);
  font-family: var(--eu-mono); font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase;
}
.eu-tag p{ color: var(--eu-ambra) !important; margin: 0; }
.eu-prod .eu-arrow .elementor-button{ color: var(--eu-camera); border-bottom-color: rgba(242,243,241,.3); }
.eu-prod:hover .eu-arrow .elementor-button{ color: var(--eu-ambra); border-bottom-color: var(--eu-ambra); }
.eu-prod:hover .eu-arrow .elementor-button-icon{ transform: translateX(5px); }

/* Card settore */
.eu-settore.eu-settore{
  border-radius: var(--eu-radius-l);
  background-color: var(--eu-camera-2);
  min-height: clamp(280px,32vw,400px);
  padding: clamp(2rem,3.6vw,3.4rem);
  display: flex; flex-direction: column;
  gap: .8rem; align-items: flex-start; width: auto;
  transition: background-color .45s var(--eu-ease), color .45s var(--eu-ease);
}
.eu-settore .eu-eyebrow{ margin-bottom: auto; }
.eu-settore .elementor-heading-title{
  font-size: clamp(1.8rem,3vw,2.6rem); letter-spacing: -.035em;
  margin-top: 2.5rem; transition: color .45s var(--eu-ease);
}
.eu-settore p{ max-width: 36ch; transition: color .45s var(--eu-ease); }
.eu-settore:hover{ background-color: var(--eu-inox); color: var(--eu-camera); }
.eu-settore:hover .elementor-heading-title{ color: var(--eu-camera); }
.eu-settore:hover p{ color: rgba(242,243,241,.75) !important; }
.eu-settore:hover .eu-arrow .elementor-button{ color: var(--eu-ambra); border-bottom-color: var(--eu-ambra); }
.eu-settore:hover .eu-arrow .elementor-button-icon{ transform: translateX(5px); }

/* ============================================================
   9. TIMELINE
   ============================================================ */
.eu-tl.eu-tl{
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; padding: 0; width: 100%;
  background-color: var(--eu-inox-3);
  border-top: 1px solid var(--eu-inox-3);
  margin-block-start: clamp(2.4rem,5vw,4rem);
}
.eu-tl-step.eu-tl-step{
  background-color: var(--eu-inox);
  position: relative; gap: .6rem; width: auto;
  padding: 2.2rem clamp(1rem,1.8vw,1.8rem) 2.2rem;
}
.eu-tl-step::before{
  content:""; position: absolute; top: -4px; left: clamp(1rem,1.8vw,1.8rem);
  width: 7px; height: 7px; border-radius: 50%; background: var(--eu-acciaio);
}
.eu-tl-step:last-child::before{ background: var(--eu-ambra); }
.eu-anno .elementor-heading-title{
  font-family: var(--eu-mono); font-size: .95rem; font-weight: 400;
  letter-spacing: .06em; color: var(--eu-ambra);
}
.eu-tl-step .elementor-heading-title{ font-size: 1.15rem; }
.eu-tl-step p{ font-size: .92rem; color: var(--eu-acciaio) !important; }

/* ============================================================
   10. CTA FINALE
   ============================================================ */
.eu-center.eu-center{ align-items: center; text-align: center; gap: 1.4rem; }
.eu-center .elementor-heading-title{
  max-width: 18ch; margin-inline: auto;
  font-size: clamp(2.4rem,6vw,5.4rem);
}
.eu-center .eu-cta-row{ justify-content: center; }
.eu-port{
  display: flex; align-items: center; gap: 14px;
  max-width: 420px; margin: 0 auto; opacity: .5;
}
.eu-port::before, .eu-port::after{
  content:""; height: 1px; background: currentColor; flex: 1; opacity: .35;
}
.eu-port span{
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid currentColor; display: block; flex: none;
}

/* ============================================================
   11. FOOTER
   ============================================================ */
.eu-footer.eu-footer{ padding-block: clamp(4rem,7vw,6rem) 2.5rem; }
.eu-footer-grid.eu-footer-grid{
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem; width: 100%;
  padding: 0 0 clamp(3rem,5vw,4.5rem);
}
.eu-footer-grid > div{ padding: 0; gap: 1.3rem; align-items: flex-start; width: auto; }
.eu-footer-col .elementor-heading-title{
  font-family: var(--eu-mono); font-size: .72rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--eu-acciaio);
}
.eu-footer-col ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.eu-footer-col a{ font-size: .95rem; color: rgba(242,243,241,.72); text-decoration: none; transition: color .3s; }
.eu-footer-col a:hover{ color: var(--eu-ambra); }
.eu-footer-bottom.eu-footer-bottom{
  display: flex; flex-direction: row; flex-wrap: wrap;
  justify-content: space-between; gap: 1.5rem; width: 100%;
  border-top: 1px solid var(--eu-inox-3);
  padding: 1.8rem 0 0;
}
.eu-footer-bottom > *{ width: auto; }
.eu-wordmark .elementor-heading-title{
  font-family: var(--eu-display); font-weight: 700;
  letter-spacing: -.06em; line-height: .82;
  font-size: clamp(3.2rem,15vw,13rem);
  color: var(--eu-inox-2); user-select: none;
}
.eu-wordmark em{ color: var(--eu-ambra); opacity: .28; font-style: normal; }

/* ============================================================
   12. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .eu-tl.eu-tl{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px){
  .eu-manifesto.eu-manifesto{ grid-template-columns: 1fr; }
  .eu-why.eu-why{ grid-template-columns: 1fr; }
  .eu-footer-grid.eu-footer-grid{ grid-template-columns: 1fr 1fr; }
  .eu-tl.eu-tl{
    grid-template-columns: 1fr; gap: 0;
    background-color: transparent; border-top: 0;
  }
  .eu-tl-step.eu-tl-step{
    border-left: 1px solid var(--eu-inox-3);
    padding: 1.6rem 0 1.6rem 1.8rem;
  }
  .eu-tl-step::before{ top: 1.9rem; left: -4px; }
}
@media (max-width: 767px){
  .eu-stats.eu-stats{ grid-template-columns: repeat(2, 1fr); }
  .eu-prod-grid.eu-prod-grid, .eu-settori.eu-settori{ grid-template-columns: 1fr; }
  .eu-prod.eu-prod{ min-height: 320px; }
  .eu-instr{ gap: .4rem 1.2rem; }
  .eu-hero-foot.eu-hero-foot{ flex-direction: column; align-items: flex-start; }
  .eu-rail::after{ width: 8vw; }
}

/* ============================================================
   13. ACCESSIBILITA'
   ============================================================ */
:focus-visible{ outline: 2px solid var(--eu-ambra); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .eu-rail-track.eu-rail-track{ animation: none; transform: none; }
  .eu-rail.eu-rail{ overflow-x: auto; }
}

/* ============================================================
   14. COMPATIBILITA' ELEMENTOR 4.x
   Elementor avvolge il contenuto dei container in un wrapper
   interno (.e-con-inner). Sui container di LAYOUT questo rompe
   griglie e flex, perche' il genitore si ritrova un figlio solo
   invece di N: la griglia piazza il wrapper in colonna 1 e
   lascia vuote le altre.

   display:contents rende il wrapper trasparente al layout: i
   suoi figli diventano figli diretti della griglia. Se il
   wrapper non esiste (Elementor 3.x) la regola non fa nulla.

   ATTENZIONE: NON applicare ai container .eu-sec. Li' il
   wrapper serve, e' quello che tiene il contenuto boxed a
   1360px mentre lo sfondo resta a piena larghezza.
   ============================================================ */
.eu-stats        > .e-con-inner,
.eu-why          > .e-con-inner,
.eu-tl           > .e-con-inner,
.eu-prod-grid    > .e-con-inner,
.eu-settori      > .e-con-inner,
.eu-manifesto    > .e-con-inner,
.eu-sec-head     > .e-con-inner,
.eu-hero-foot    > .e-con-inner,
.eu-cta-row      > .e-con-inner,
.eu-rail-track   > .e-con-inner,
.eu-footer-grid  > .e-con-inner,
.eu-footer-bottom> .e-con-inner,
.eu-nav          > .e-con-inner,
.eu-stats        > .elementor-container,
.eu-why          > .elementor-container,
.eu-tl           > .elementor-container,
.eu-prod-grid    > .elementor-container,
.eu-settori      > .elementor-container,
.eu-manifesto    > .elementor-container,
.eu-sec-head     > .elementor-container,
.eu-footer-grid  > .elementor-container,
.eu-nav          > .elementor-container{
  display: contents;
}

/* Anche le card: i loro figli devono diventare figli diretti,
   perche' padding, gap e justify-content sono definiti sulla
   classe della card, non sul wrapper. */
.eu-prod > .e-con-inner,
.eu-settore > .e-con-inner,
.eu-rail-card > .e-con-inner,
.eu-why-cell > .e-con-inner,
.eu-tl-step > .e-con-inner,
.eu-stat > .e-con-inner{
  display: contents;
}

/* ------------------------------------------------------------
   Titoli con <em>: forzo il flusso inline normale.
   Il corsivo ambra deve restare sulla stessa riga del resto
   del titolo, senza uscire dal flusso.
   ------------------------------------------------------------ */
.elementor-widget-heading .elementor-heading-title{
  display: block !important;
  line-height: .98 !important;
  text-wrap: balance;
}
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title{
  line-height: 1.1 !important;
}
.elementor-heading-title em{
  display: inline !important;
  position: static !important;
  float: none !important;
  line-height: inherit !important;
  white-space: normal;
}
/* Il pallino-oblo' e' l'unica eccezione: li' serve il flex */
.eu-oblo .elementor-heading-title{
  display: flex !important; align-items: center; gap: .7rem;
}

/* ============================================================
   15. ALLINEAMENTO AL MOCKUP
   Correzioni derivate dal confronto con il concept approvato.
   ============================================================ */

/* ------------------------------------------------------------
   15.1  Interlinea del corpo testo
   Senza un valore esplicito le righe dei widget Editor di testo
   collassano una sull'altra. Le uniche leggibili erano quelle
   con classe eu-lead, che l'interlinea ce l'aveva.
   ------------------------------------------------------------ */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-text-editor .elementor-widget-container{
  font-family: var(--eu-body);
  font-size: 1.0625rem !important;
  line-height: 1.55 !important;
}
.elementor-widget-text-editor p{ margin: 0 0 1rem; }
.elementor-widget-text-editor p:last-child{ margin-bottom: 0; }

/* Le utility mantengono la loro misura */
.eu-eyebrow, .eu-eyebrow p{ font-size: .72rem !important; line-height: 1.4 !important; }
.eu-lead, .eu-lead p{ line-height: 1.45 !important; }
.eu-caption, .eu-caption p{ font-size: .72rem !important; line-height: 1.4 !important; }
.eu-tag, .eu-tag p{ font-size: .72rem !important; line-height: 1.4 !important; }
.eu-why-cell p{ font-size: .98rem !important; }
.eu-tl-step p{ font-size: .92rem !important; }
.eu-footer-col a{ font-size: .95rem !important; line-height: 1.4 !important; }

/* ------------------------------------------------------------
   15.2  Bottoni
   Il kit globale di Elementor colora tutti i pulsanti con
   l'Accento: i ghost diventavano ambra pieni. Serve piu'
   specificita' del kit, non solo del default del widget.
   ------------------------------------------------------------ */
.eu-btn-solid.eu-btn-solid .elementor-button,
.eu-btn-ghost.eu-btn-ghost .elementor-button{
  font-family: var(--eu-body) !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: .95em 1.7em !important;
  border-radius: 100px !important;
  border: 1px solid transparent;
}
.eu-btn-solid.eu-btn-solid .elementor-button{
  background-color: var(--eu-inox) !important;
  color: var(--eu-camera) !important;
}
.eu-btn-solid.eu-btn-solid .elementor-button:hover{
  background-color: var(--eu-ambra) !important;
  color: var(--eu-inox) !important;
}
.eu-btn-ghost.eu-btn-ghost .elementor-button{
  background-color: transparent !important;
  border-color: rgba(14,17,19,.22) !important;
  color: var(--eu-inox) !important;
}
.eu-btn-ghost.eu-btn-ghost .elementor-button:hover{
  background-color: var(--eu-inox) !important;
  border-color: var(--eu-inox) !important;
  color: var(--eu-camera) !important;
}
.eu-dark .eu-btn-solid.eu-btn-solid .elementor-button{
  background-color: var(--eu-camera) !important; color: var(--eu-inox) !important;
}
.eu-dark .eu-btn-solid.eu-btn-solid .elementor-button:hover{
  background-color: var(--eu-ambra) !important;
}
.eu-dark .eu-btn-ghost.eu-btn-ghost .elementor-button{
  border-color: rgba(242,243,241,.24) !important; color: var(--eu-camera) !important;
}
.eu-dark .eu-btn-ghost.eu-btn-ghost .elementor-button:hover{
  background-color: var(--eu-camera) !important;
  border-color: var(--eu-camera) !important;
  color: var(--eu-inox) !important;
}
.eu-arrow.eu-arrow .elementor-button{
  background-color: transparent !important;
  border: 0 !important; border-bottom: 1px solid currentColor !important;
  border-radius: 0 !important;
  padding: 0 0 .35em !important;
  letter-spacing: 0 !important; text-transform: none !important;
  font-size: .95rem !important;
}
.eu-dark .eu-arrow.eu-arrow .elementor-button{ color: var(--eu-camera) !important; }
.eu-light .eu-arrow.eu-arrow .elementor-button{ color: var(--eu-inox) !important; }
.eu-prod .eu-arrow.eu-arrow .elementor-button{ color: var(--eu-camera) !important; }
.eu-prod:hover .eu-arrow.eu-arrow .elementor-button,
.eu-settore:hover .eu-arrow.eu-arrow .elementor-button{
  color: var(--eu-ambra) !important; border-bottom-color: var(--eu-ambra) !important;
}

/* ------------------------------------------------------------
   15.3  Card del rail: didascalia ancorata in basso
   Non dipende piu' dal justify-content del container.
   ------------------------------------------------------------ */
.eu-rail-card{ display: block !important; }
.eu-caption{
  position: absolute !important;
  left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.4rem;
}

/* ------------------------------------------------------------
   15.4  Contatore: il numero deve essere visibile
   I pseudo-blocchi prefisso/suffisso di Elementor hanno
   flex-grow e schiacciavano la cifra.
   ------------------------------------------------------------ */
.eu-stat .elementor-counter-number-wrapper{
  display: flex; justify-content: flex-start; align-items: baseline;
}
.eu-stat .elementor-counter-number-prefix{ display: none; }
.eu-stat .elementor-counter-number{ flex: 0 0 auto; }
.eu-stat .elementor-counter-number-suffix{ flex: 0 0 auto; text-align: left; }

/* ------------------------------------------------------------
   15.5  Card prodotto: contenuto in basso, etichetta in alto
   ------------------------------------------------------------ */
.eu-prod.eu-prod{
  display: flex !important; flex-direction: column !important;
  justify-content: flex-end !important;
}
.eu-prod .elementor-widget-heading{ margin-bottom: 0; }

/* Card settore: l'occhiello resta in alto, il resto scende */
.eu-settore.eu-settore{
  display: flex !important; flex-direction: column !important;
}
.eu-settore .eu-eyebrow{ margin-bottom: auto !important; }

/* Celle why e tappe timeline: colonna semplice */
.eu-why-cell.eu-why-cell,
.eu-tl-step.eu-tl-step,
.eu-stat.eu-stat{
  display: flex !important; flex-direction: column !important;
}

/* ------------------------------------------------------------
   15.6  Divisore a doppio oblo'
   ------------------------------------------------------------ */
.eu-port{ width: 100%; }
.eu-center .elementor-widget-text-editor:first-child{ width: 100%; }

/* ============================================================
   16. CARD PRODOTTO — LEGGIBILITA' DEL TESTO
   Due correzioni che devono stare in coda al foglio.

   16.1  display:contents toglie il wrapper dal rendering ma non
         dal DOM: il selettore figlio ">" continua a puntare al
         wrapper, che senza box non puo' applicare z-index. Il
         contenuto restava quindi sotto il velo scuro.
         Si risolve targettizzando i discendenti.

   16.2  .eu-light ... .elementor-heading-title ha specificita'
         0-3-0 e vinceva sul colore chiaro della card. Sulle
         card serve un selettore piu' forte del contesto chiaro.
   ============================================================ */

/* 16.1 — il contenuto sale sopra il gradiente */
.eu-prod .elementor-widget:not(.eu-cover),
.eu-prod > *:not(.eu-cover),
.eu-prod > .e-con-inner > *:not(.eu-cover){
  position: relative;
  z-index: 2;
}
.eu-prod .eu-cover,
.eu-prod > .e-con-inner > .eu-cover{
  position: absolute !important;
  z-index: 0;
}
.eu-prod .eu-tag{ z-index: 3; }

/* 16.2 — colori del testo sulle card, sopra il contesto chiaro */
.eu-light .eu-prod .elementor-widget-heading .elementor-heading-title,
.eu-prod .elementor-widget-heading .elementor-heading-title{
  color: var(--eu-camera) !important;
}
.eu-light .eu-prod .elementor-widget-text-editor,
.eu-light .eu-prod p,
.eu-prod p{
  color: rgba(242,243,241,.82) !important;
}
.eu-light .eu-prod .eu-tag p,
.eu-prod .eu-tag p{ color: var(--eu-ambra) !important; }

/* Stesso problema sulle card settore quando si invertono */
.eu-light .eu-settore:hover .elementor-widget-heading .elementor-heading-title{
  color: var(--eu-camera) !important;
}
.eu-light .eu-settore:hover .elementor-widget-text-editor,
.eu-light .eu-settore:hover p{
  color: rgba(242,243,241,.78) !important;
}

/* Velo leggermente piu' deciso in basso: nel mockup il testo
   poggia su un fondo quasi pieno, non su una velatura */
.eu-prod::before{
  background: linear-gradient(to top,
              rgba(14,17,19,.94) 0%,
              rgba(14,17,19,.80) 26%,
              rgba(14,17,19,.38) 58%,
              rgba(14,17,19,.10) 100%) !important;
}