/* ==========================================================================
   VISION EXPLORER — sections.css
   Una sezione per blocco, nell'ordine in cui compaiono in pagina.
   I token e i componenti condivisi sono in css/style.css
   ========================================================================== */


/* ==========================================================================
   01 · HERO
   ========================================================================== */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:100vh;
  min-height:100svh;              /* svh: evita il salto della barra URL su iOS */
  padding-top:var(--nav-h);
  padding-bottom:clamp(48px,7vw,88px);
  background:var(--navy);
  overflow:hidden;
}

.hero__media{position:absolute;inset:0}
.hero__video{width:100%;height:100%;object-fit:cover}

/* Scrim funzionale: unico gradiente ammesso nel progetto.
   Tiene leggibile il testo a sinistra e lascia visibili vetta
   e sentiero arancio nella fascia centro-destra. */
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(24,27,49,.82)  0%,
      rgba(24,27,49,.68) 32%,
      rgba(24,27,49,.25) 58%,
      rgba(24,27,49,.58) 100%),
    linear-gradient(180deg,
      rgba(24,27,49,.46)  0%,
      rgba(24,27,49,.08) 28%,
      rgba(24,27,49,.22) 58%,
      rgba(24,27,49,.50) 80%,
      rgba(24,27,49,.82) 100%);
}

.hero__inner{position:relative;width:100%}

.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,1fr) minmax(0,4.6fr);
  align-items:center;
}
.hero__text{grid-column:1}
.hero__aside{grid-column:3}

/* Logo Vision Explorer nella Hero */
.hero__brandmark{
  margin-top:clamp(24px,3vw,40px);
  width:min(100%,620px);
}

.hero__brandmark-img{
  display:block;
  width:100%;
  height:auto;
}

.hero__lead{
  margin-top:clamp(22px,2.6vw,34px);
  max-width:46ch;
  font-size:var(--fs-lead);
  font-weight:400;
  line-height:1.6;
  color:rgba(255,255,255,.78);
}
.hero__lead strong{
  display:block;
  margin-bottom:8px;
  font-size:clamp(1.35rem,2vw,1.8rem);
  font-weight:600;
  line-height:1.25;
  color:var(--white);
}

/* Info box — navy solido, bordo 1px, angoli arrotondati, nessun blur */
.infobox{
  background:rgba(24,27,49,.92);
  border:1px solid var(--line-dark);
  border-radius:var(--radius-box);
  padding:clamp(22px,2.2vw,34px);
}

/* Titolo del box — stessa voce tipografica degli H2 di sezione (peso 300) */
.infobox__title{
  margin-bottom:clamp(18px,1.9vw,26px);
  padding-bottom:clamp(18px,1.9vw,26px);
  border-bottom:1px solid var(--line-dark);
  font-size:clamp(1.05rem,1.45vw,1.32rem);
  font-weight:600;
  line-height:1.34;
  letter-spacing:-.01em;
  color:var(--white);
}

/* Riga: icona a sinistra, blocco label + valore a destra */
.infobox__row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:clamp(14px,1.4vw,20px);
  padding-block:clamp(14px,1.4vw,20px);
  border-top:1px solid var(--line-dark);
}
.infobox__row:first-of-type{border-top:0;padding-top:0}

/* Cerchio bianco al 25% con tracciato bianco */
.infobox__icon{
  display:grid;
  place-items:center;
  width:clamp(38px,3.4vw,46px);
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(255,255,255,.25);
}
.infobox__icon svg{
  width:52%;
  height:52%;
  fill:none;
  stroke:var(--white);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.infobox__label{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1;
  color:var(--sky);
}
.infobox__value{
  margin-top:8px;
  font-size:clamp(1.05rem,1.35vw,1.3rem);
  font-weight:600;
  line-height:1.25;
  color:var(--white);
}
.infobox__value--lg{
  font-size:clamp(1.35rem,2vw,1.85rem);
  letter-spacing:-.01em;
  
}
.infobox__sub{
  display:block;
  margin-top:4px;
  font-size:var(--fs-meta);
  font-weight:400;
  color:rgba(255,255,255,.72);
}
.infobox .btn{margin-top:clamp(20px,2.2vw,28px)}

/* Nota evento — fuori dal bordo del box */
.hero__note{
  margin-top:16px;
  max-width:38ch;
  font-size:.875rem;
  line-height:1.55;
  color:rgba(255,255,255,.86);
}

/* Innesto della linea di salita */
.hero__thread{
  display:none;
  position:absolute;
  left:var(--gutter);
  bottom:0;
  width:1px;
  height:clamp(48px,7vw,84px);
  background:var(--orange);
  transform-origin:bottom;
  animation:thread-in 1.1s var(--ease) .6s both;
}
@keyframes thread-in{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (min-width:1024px){.hero__thread{display:block}}

.hero__brandmark{
  width:min(100%,420px);
}

@media (max-width:560px){

  :root{--section-y:clamp(72px,18vw,104px)}

  .hero{
    min-height:auto;
    padding-bottom:clamp(56px,12vw,80px);
  }

  .hero__aside{
    width:100%;
    margin-left:0;
  }

  .hero__brandmark{
    width:min(100%,420px);
  }

  .hero__lead{max-width:none}
  .hero__note{max-width:none}
  .infobox__row{padding-block:16px}

  .esperienza{
    align-items:flex-end;
    min-height:auto;
    padding-top:clamp(140px,42vw,200px);
  }

  .esperienza__inner .btn,
  .evento__cta .btn{
    width:100%;
  }
}

@media (max-width:767px){

  .hero__video{
    object-position:center center;
  }

}

/* ==========================================================================
   02 · IL PARADIGMA
   ========================================================================== */
.paradigma{
  background:var(--navy);
  /* Sezione volutamente bassa: fa da respiro fra la Hero e "La sfida" */
  padding-block:clamp(56px,6vw,92px) clamp(64px,7vw,108px);
  border-top:1px solid var(--line-dark);
}

/* Il testo occupa due terzi della larghezza del contenitore */
.paradigma__text{max-width:66.666%}

.paradigma__quote{
  font-size:var(--fs-h2);
  /* `pretty` e non `balance`: evita la parola orfana sull'ultima riga
     SENZA accorciare tutte le righe, così il testo continua a occupare
     i due terzi richiesti. Browser non supportati: wrap normale. */
  text-wrap:pretty;
  font-weight:300;
  line-height:1.14;
  letter-spacing:-.02em;
  color:rgba(255,255,255,.86);
}
.paradigma__quote em{
  font-style:normal;
  font-weight:600;
  color:var(--white);
}

/* Segue la citazione, allineata a sinistra. La regola arancio la separa
   dal blocco sopra restando nel linguaggio della linea di salita. */
.paradigma__after{
  position:relative;
  margin-top:clamp(32px,4vw,56px);
  padding-top:clamp(20px,2.4vw,30px);
  max-width:30ch;
  font-size:clamp(1.1rem,1.55vw,1.4rem);
  font-weight:300;
  line-height:1.4;
  letter-spacing:-.01em;
  color:rgba(255,255,255,.88);
}
.paradigma__after::before{
  content:"";
  position:absolute;left:0;top:0;
  width:28px;height:1px;
  background:var(--orange);
}

.paradigma__arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:42px;
  height:58px;

  margin-top:clamp(24px,3vw,38px);

  color:var(--orange);

  transition:transform var(--t-fast) var(--ease);
}

.paradigma__arrow svg{
  width:30px;
  height:44px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.paradigma__arrow:hover{
  transform:translateY(6px);
}

/* ==========================================================================
   03 · LA SFIDA — tre registri, rientro crescente, nessuna card
   ========================================================================== */
.sfida{
  background:var(--offwhite);
  color:var(--ink);
  padding-block:var(--section-y);
}

.sfida__head{margin-bottom:clamp(48px,6vw,96px)}
.sfida__title{
  margin-top:clamp(20px,2.4vw,32px);
  max-width:66.666%;   /* due terzi, come "Il paradigma" */
  text-wrap:pretty;
  font-size:var(--fs-h2);
  font-weight:300;
  line-height:1.14;
  letter-spacing:-.02em;
  color:var(--navy);
}

/* Tre box affiancati sulla stessa linea */
.registri{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,28px);
  align-items:stretch;
}

.registro{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:420px;
  padding:clamp(30px,3vw,48px);
  border:0;
  border-top:4px solid var(--orange);
  border-radius:var(--radius-box);
  background:var(--navy);
  overflow:hidden;
  transition:transform var(--t-med) var(--ease);
}

.registro:hover{
  transform:translateY(-8px);
}

/* Numeri pieni, non in outline */
.registro__num{
  position:absolute;
  top:28px;
  right:-8px;
  margin:0;
  font-size:clamp(6rem,10vw,10rem);
  font-weight:800;
  line-height:.75;
  letter-spacing:-.06em;
  color:rgba(255,255,255,.07);
  pointer-events:none;
}

.registro__title{
  position:relative;
  z-index:1;
  max-width:18ch;
  font-size:var(--fs-h3);
  font-weight:600;
  line-height:1.28;
  letter-spacing:-.01em;
  color:var(--white);
  margin-top:clamp(12px,8vw,24px);
}
.registro__text{
  position:relative;
  z-index:1;
  margin-top:clamp(18px,2vw,26px);
  color:rgba(255,255,255,.72);
}

.sfida__cta{margin-top:clamp(40px,5vw,72px)}


/* ==========================================================================
   04 · LA DOMANDA — climax tipografico
   ========================================================================== */
.domanda{
  position:relative;
  display:flex;
  align-items:center;
  min-height:90vh;
  padding-block:clamp(96px,14vw,200px);
  background:var(--navy);
  overflow:hidden;
}

/* Immagine di sfondo */
.domanda__media{
  position:absolute;
  inset:0;
}

.domanda__img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Scrim: stesso principio della sezione "Un’esperienza esclusiva" */
.domanda__scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(24,27,49,.90)  0%,
      rgba(24,27,49,.70) 42%,
      rgba(24,27,49,.32) 78%,
      rgba(24,27,49,.42) 100%),
    linear-gradient(0deg,
      rgba(24,27,49,.82)  0%,
      rgba(24,27,49,.42) 42%,
      rgba(24,27,49,.24) 76%,
      rgba(24,27,49,.38) 100%);
}

/* Contenuto sopra immagine e scrim */
.domanda__inner{
  position:relative;
  width:100%;
}

/* Attacco: prepara lo statement, in bianco */
.domanda__intro{
  max-width:48ch;
  margin-bottom:clamp(28px,3.4vw,52px);
  font-size:clamp(1.05rem,1.5vw,1.35rem);
  font-weight:300;
  line-height:1.5;
  color:var(--white);
}

.domanda__title{
  /* Misura larga: lo statement sta su 3 righe invece di 5 */
  max-width:22ch;
  text-wrap:pretty;
  font-size:var(--fs-statement);
  font-weight:800;
  line-height:.96;
  letter-spacing:-.03em;
  text-transform:uppercase;
  color:var(--white);
}

/* Stesso stacco che separa l'attacco dallo statement */
.domanda__title em{
  font-style:normal;
  color:var(--orange);
}

.domanda__cta{
  margin-top:clamp(28px,3.4vw,52px);
}


/* ==========================================================================
   05 · L'EVENTO — composizione asimmetrica sui formati nativi delle foto
   ========================================================================== */
.evento{
  background:var(--offwhite);
  color:var(--ink);
  padding-block:var(--section-y);
}

.evento__head{margin-bottom:clamp(40px,4.6vw,76px)}
.evento__title{
  margin-top:clamp(20px,2.4vw,32px);
  font-size:var(--fs-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--navy);
}
.evento__intro{
  margin-top:clamp(24px,3vw,40px);
  max-width:76ch;   /* due righe a desktop */
  text-wrap:pretty;
  font-size:var(--fs-lead);
  color:var(--ink);
}

/* --- Timeline verticale: linea centrale, nodi, lati alternati --- */
.speakers{
  position:relative;
  max-width:1040px;
  margin-inline:auto;   /* timeline centrata nella sezione */
}
.speakers::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:1px;
  background:var(--line-light);
  transform:translateX(-.5px);
}

.speaker{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  column-gap:clamp(28px,3.6vw,56px);
  align-items:center;
}
.speaker + .speaker{margin-top:clamp(90px,4vw,150px)}

/* Nodo sulla linea: il bordo color sezione la interrompe */
.speaker__node{
  grid-column:2;
  width:13px;
  height:13px;
  box-sizing:content-box;
  border:7px solid var(--offwhite);
  border-radius:50%;
  background:var(--orange);
}

/* Lati alternati */
.speaker:nth-child(odd)  .speaker__text  {grid-column:1}
.speaker:nth-child(odd)  .speaker__figure{grid-column:3}
.speaker:nth-child(even) .speaker__figure{grid-column:1}
.speaker:nth-child(even) .speaker__text  {grid-column:3}

/* Box con avatar tondo e didascalia a fianco */
.speaker__figure{
  display:flex;
  align-items:center;
  gap:clamp(14px,1.4vw,20px);
  width:min(100%,420px);
  padding:clamp(14px,1.3vw,18px);
  border:1px solid var(--line-light);
  border-radius:var(--radius-box);
  background:var(--navy);
}
.speaker:nth-child(even) .speaker__figure{margin-left:auto}

/* Avatar tondo. I tre scatti hanno inquadrature molto diverse (figura intera,
   fermo immagine orizzontale, mezzo busto): ognuno ha il proprio ingrandimento
   e il proprio centraggio, per inquadrare il volto nello stesso modo. */
.speaker__frame{
  position:relative;
  display:block;
  flex:0 0 auto;
  width:clamp(64px,5.8vw,84px);
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  background:var(--navy);
}
.speaker__img{
  position:absolute;
  top:0;
  left:50%;
  width:var(--zoom,100%);
  max-width:none;   /* il reset img{max-width:100%} annullerebbe l'ingrandimento */
  height:auto;
  transform:translate(calc(-50% + var(--shift-x,0%)), var(--shift,0%));
}


.speaker__topic{
  font-size:var(--fs-h3);
  font-weight:600;
  line-height:1.24;
  letter-spacing:-.01em;
  color:var(--navy);
}
.speaker__caption{min-width:0}
.speaker__name{
  font-size:.95rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--white);
}
.speaker__role{
  margin-top:6px;
  font-size:var(--fs-meta);
  line-height:1.5;
  color:var(--offwhite);
}
.speaker__desc{
  margin-top:clamp(14px,1.6vw,22px);
  max-width:52ch;
  color:var(--ink);
}

.evento__cta{margin-top:clamp(40px,5vw,84px);text-align:center}


/* ==========================================================================
   06 · L'ESPERIENZA ESCLUSIVA
   ========================================================================== */
.esperienza{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:76vh;
  padding-block:clamp(80px,10vw,140px) var(--section-y);
  background:var(--navy);
  overflow:hidden;
}
.esperienza__media{position:absolute;inset:0}
.esperienza__img{width:100%;height:100%;object-fit:cover}
.esperienza__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(24,27,49,.86)  0%,
      rgba(24,27,49,.60) 42%,
      rgba(24,27,49,.18) 78%,
      rgba(24,27,49,.30) 100%),
    linear-gradient(0deg,
      rgba(24,27,49,.86)  0%,
      rgba(24,27,49,.56) 40%,
      rgba(24,27,49,.22) 76%,
      rgba(24,27,49,.34) 100%);
}
.esperienza__inner{position:relative;width:100%}

.esperienza__title{
  max-width:16ch;
  font-size:var(--fs-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--white);
}
.esperienza__text{
  margin-top:clamp(22px,2.6vw,34px);
  max-width:54ch;
  font-size:var(--fs-lead);
  color:rgba(255,255,255,.88);
}
/* Nota RSVP sotto il bottone — breve, in maiuscoletto arancio */
.esperienza__text--rsvp{
  margin-top:clamp(14px,1.6vw,20px);
  font-size:var(--fs-tag);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.esperienza__text strong{
  font-weight:600;
  color:var(--white);
}
.esperienza__inner .btn{margin-top:clamp(32px,4vw,52px)}

.esperienza__logo{
  width:clamp(140px,16vw,220px);
  margin-bottom:clamp(28px,3vw,42px);
}

.esperienza__logo img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.esperienza__text--rsvp strong{
  color:var(--orange);
}

/* ==========================================================================
   07 · CHI SIAMO
   ========================================================================== */
.chisiamo{
  background:var(--offwhite);
  color:var(--ink);
  padding-block:var(--section-y);
}
.chisiamo__inner{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(36px,6vw,96px);
  align-items:start;
}
.chisiamo__title{
  font-size:var(--fs-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--navy);
}
.chisiamo .lockup{margin-top:clamp(32px,4vw,56px)}
.chisiamo__copy{
  max-width:62ch;
  font-size:var(--fs-lead);
  line-height:1.7;
  color:var(--ink);
}


/* ==========================================================================
   08 · FORM — placeholder Zoho
   ========================================================================== */
.formsec{
  background:var(--navy);
  padding-block:var(--section-y);
  border-top:1px solid var(--line-dark);
}
.formsec__inner{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(36px,6vw,96px);
  align-items:start;
}
.formsec__title{
  max-width:14ch;
  font-size:var(--fs-h2);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--white);
}
.formsec__lead{
  margin-top:clamp(18px,2.2vw,28px);
  max-width:36ch;
  font-size:var(--fs-lead);
  color:rgba(255,255,255,.72);
}

/* Blocco esplicitamente provvisorio: bordo tratteggiato, nessun campo reale */
.placeholder{
  border:1px dashed rgba(255,255,255,.34);
  padding:clamp(28px,4vw,56px);
}
.placeholder__mark{
  font-size:clamp(.95rem,1.6vw,1.25rem);
  font-weight:800;
  letter-spacing:.12em;
  color:var(--orange);
}
.placeholder__note{
  margin-top:clamp(24px,3vw,40px);
  padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--line-dark);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sky);
}
.placeholder__list{
  margin-top:18px;
  columns:2;
  column-gap:clamp(24px,3vw,48px);
  font-size:var(--fs-meta);
  color:rgba(255,255,255,.72);
}
.placeholder__list li{
  break-inside:avoid;
  padding-block:7px;
}
.placeholder__list span{color:var(--orange)}
.placeholder__list em{font-style:normal;color:rgba(255,255,255,.45)}
.placeholder__legal{
  margin-top:clamp(24px,3vw,40px);
  font-size:var(--fs-meta);
  color:rgba(255,255,255,.55);
}

.formsec__body{
  border-radius:12px;
  overflow:hidden;
}

/* Altezza riservata all'iframe del form Zoho.
   Il form non comunica la propria altezza alla pagina (non invia postMessage),
   quindi va riservata qui per fascia. I valori sono misurati sul form reale
   — campo telefono incluso — e vanno rivisti se si aggiungono o tolgono campi.

   Il form Zoho ha un solo punto di rottura, sulla larghezza dell'IFRAME
   (non del viewport): sotto i 513px impila Nome/Cognome e passa da ~978px
   a 1017-1171px di altezza. Le fasce qui sotto sono i viewport in cui
   l'iframe scende sotto quella soglia: 1024-1070px (griglia a due colonne,
   l'iframe è stretto pur essendo desktop) e sotto i 572px. */

.formsec__body iframe{
  display:block;
  width:100%;
  height:1000px;
  border:0;
  border-radius:12px;
}

/* Due colonne con iframe già sotto i 513px (tipico iPad orizzontale).
   Limite tenuto a 1070px con un margine sul punto esatto in cui l'iframe
   supera la soglia (~1062px), per non lasciare scoperta una fascia di
   pochi pixel. */
@media (min-width:1024px) and (max-width:1070px){

  .formsec__body iframe{
    height:1110px;
  }

}

/* Una colonna con iframe sotto i 513px */
@media (max-width:572px){

  .formsec__body iframe{
    height:1110px;
  }

}

/* Schermi molto stretti: i campi si allungano ulteriormente */
@media (max-width:420px){

  .formsec__body iframe{
    height:1190px;
  }

}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- Laptop 1280px: comprime le colonne senza cambiare la struttura --- */
@media (max-width:1366px){
  .hero__grid{grid-template-columns:minmax(0,6fr) minmax(0,.6fr) minmax(0,5fr)}
  .speaker--lasagna .speaker__text{grid-column:1 / 6}
  .speaker--lasagna .speaker__figure{grid-column:7 / 12}
  .speaker--rosati .speaker__figure{grid-column:9 / 13}
}

/* --- I tre box passano a colonna singola sotto i 1024px --- */
@media (max-width:1023px){
  .registri{grid-template-columns:minmax(0,1fr)}
  .sfida__title{max-width:none}
}

/* --- Tablet orizzontale / laptop piccolo --- */
@media (max-width:1023px){

  /* Hero: testo a piena larghezza, info box sotto ma spostato a destra */
  .hero{
    align-items:flex-end;
    padding-top:calc(var(--nav-h) + clamp(48px,10vw,96px));
  }
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .hero__text,
  .hero__aside{grid-column:1}
  .hero__aside{
    margin-top:clamp(40px,7vw,72px);
    margin-left:auto;
    width:min(100%,460px);
  }
  .hero__scrim{
    background:linear-gradient(0deg,
      rgba(24,27,49,.94)  0%,
      rgba(24,27,49,.72) 45%,
      rgba(24,27,49,.42) 100%);
  }

  /* Timeline: la linea si sposta a sinistra, il contenuto scorre a destra */
  .speakers::before{left:13px;transform:none}

  .speaker{
    grid-template-columns:auto minmax(0,1fr);
    column-gap:clamp(20px,3.4vw,36px);
    row-gap:clamp(20px,3vw,32px);
    align-items:start;
  }
  .speaker__node{
    grid-column:1;
    grid-row:1;
    margin-top:6px;
  }
  .speaker:nth-child(n) .speaker__text{grid-column:2;grid-row:1}
  .speaker:nth-child(n) .speaker__figure{grid-column:2;grid-row:2;margin-left:0}

  .speaker__figure{width:min(100%,420px)}

  .chisiamo__inner,
  .formsec__inner{grid-template-columns:minmax(0,1fr)}
}

/* --- Tablet verticale --- */
@media (max-width:767px){
  /* Sotto i 768px i due terzi diventano troppo stretti: il testo va a piena larghezza */
  .paradigma__text{max-width:none}
  .domanda{min-height:78vh}
  .esperienza{min-height:76vh}
  .placeholder__list{columns:1}
}

/* --- Mobile ~390px --- */
@media (max-width:560px){

  :root{--section-y:clamp(72px,18vw,104px)}

  /* Hero: gerarchia compressa, info box a piena larghezza */
  .hero{min-height:auto;padding-bottom:clamp(56px,12vw,80px)}
  .hero__aside{width:100%;margin-left:0}
  .hero__title{line-height:.95}
  .hero__lead{max-width:none}
  .hero__note{max-width:none}
  .infobox__row{padding-block:16px}

  .esperienza{align-items:flex-end;min-height:auto;padding-top:clamp(140px,42vw,200px)}
  .esperienza__inner .btn,
  .evento__cta .btn{width:100%}
}