/* ===================================================================== *
 *  FONTS
 * ===================================================================== */
@font-face {
  font-family: 'Maratre';
  src: local('Maratre'),
       url('../../fonts/Maratre.otf') format('opentype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'GFSDidot';
  src: local('GFSDidot Regular'),
       url('../../fonts/GFSDidot-Regular.ttf') format('truetype'); /* fix formato */
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Quicksand';
  src: local('Quicksand'),
       url('../../fonts/Quicksand-VariableFont_wght.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* ===================================================================== *
 *  BASE
 * ===================================================================== */
:root{
  --bg: #FEF1F6;
  --card: #F584BA;
  --accent: #e06699;
  --accent-200:#f7c3d5;
  --text:#1C1F33;
  --muted:#444;
  --shadow-inset: inset 0 4px 20px rgba(0,0,0,.15), inset 0 -4px 20px rgba(0,0,0,.15), inset 4px 0 20px rgba(0,0,0,.15), inset -4px 0 20px rgba(0,0,0,.15);
}

html { scroll-behavior: smooth; overflow-x:hidden; }
body {
  font-family: 'Quicksand', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* fix: sans-serif */
  background-color: var(--bg);
  color: var(--text);
}

/* ===================================================================== *
 *  SLIDER
 * ===================================================================== */
.image-shadow-box-container{
  width:100%; display:flex; justify-content:center; margin:40px 0;
}
.slider-box{
  width:90%; height:650px; border-radius:25px; background:#fff;
  box-shadow: inset 0 0 20px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;
}
.slider-box-custom{ width:90%; height:750px; border:none; }
.slides{ width:100%; height:100%; position:relative; }
.slide{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity 1s ease-in-out;
  border-radius:20px; box-shadow: inset 0 0 20px rgba(0,0,0,.25);
  pointer-events:none;
}
.slide.active{ opacity:1; z-index:1; pointer-events:auto; }
.dots{
  position:absolute; bottom:15px; right:20px; display:flex; gap:8px; z-index:2;
}
.dot{
  width:12px; height:12px; background:var(--accent); border-radius:50%;
  cursor:pointer; transition:background .3s; box-shadow:0 0 3px rgba(0,0,0,.2);
}
.dot.active{ background:var(--accent-200); }

/* ===================================================================== *
 *  HEADER / LOGO + TITOLO
 * ===================================================================== */
.content-box{
  width:85%; margin:4px auto; background:#FA84BA; /* fix rgba() */
  border-radius:65px; text-align:center; padding:0; box-shadow: var(--shadow-inset);
}
.content-title{
  font-size:clamp(7rem, 8vw, 9rem);
  font-weight:400; color:#000; font-family:'Maratre', cursive;
}
.logo-title-box{
  display:flex; align-items:center; justify-content:center; gap:0; margin-top:2.5%; flex-wrap:wrap;
}
.logo-title-box .logo-img{ width:300px; height:auto; margin:0; padding:0; }
.logo-title-box .logo-img.logo-img-shadowed{
  width:400px; margin-left:140px; padding-top:2%;
  filter: drop-shadow(5px 5px 15px rgba(0,0,0,.3));
}
.logo-title-box .content-title{
  font-size: clamp(3rem,6vw,7rem); text-align:left; margin:0; padding:0;
}

/* ===================================================================== *
 *  INFO ROWS
 * ===================================================================== */
.info-row{
  margin:50px 0 200px; padding:0 5%;
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:1.5rem;
}
.info-row.reverse{ flex-direction:row-reverse; }

.image-placeholder{
  width:1020px; height:680px; background:#ccc; border-radius:20px;
  flex-shrink:0; overflow:hidden; cursor:pointer; position:relative;
  box-shadow: inset 0 8px 40px rgba(0,0,0,.25), inset 0 -8px 40px rgba(0,0,0,.25),
              inset 8px 0 40px rgba(0,0,0,.25), inset -8px 0 40px rgba(0,0,0,.25);
}
.image-placeholder img{ width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:1; }

.info-text{
  flex:1; min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0;
}
.info-text h3{ font-size:1.9rem; color:var(--text); }
.info-text p{ font-size:1.15rem; color:var(--muted); line-height:1.6; max-width:80%; text-align:left; }
.info-text .content{ display:none; flex-direction:column; align-items:center; }
.info-text .content.active{ display:flex; }

/* ===================================================================== *
 *  BUTTONS
 * ===================================================================== */
.button-link{
  padding:16px 28px; background:var(--accent); color:#fff; border:none; border-radius:10px;
  font-size:18px; cursor:pointer; margin-top:20px; text-decoration:none; transition:background-color .3s ease;
}
.button-link:hover, .button-link:focus-visible{ background:var(--accent-200); outline:none; }
.button-group{ display:flex; flex-direction:column; gap:2px; }
.content-2{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }

/* ===================================================================== *
 *  BLOCCO TRE ICONE (map / shop / orari)
 * ===================================================================== */
.extracted-style-0{ text-align:center; width:110%; }
.extracted-style-1{
  display:flex; justify-content:center; gap:40px; padding:50px 0;
  border-top:1px solid #ccc; border-bottom:1px solid #ccc; margin-bottom:250px;
}
.extracted-style-2, .extracted-style-12, .extracted-style-22{ flex:1; max-width:550px; position:relative; }
.extracted-style-3, .extracted-style-13, .extracted-style-23{
  background:var(--card); height:300px; border-radius:20px;
  box-shadow: inset 0 0 20px rgba(0,0,0,.2);
  position:relative; overflow:hidden; padding:15px;
}
.extracted-style-4, .extracted-style-14, .extracted-style-24{ position:relative; height:85%; width:auto; z-index:0; }
.extracted-style-5, .extracted-style-15, .extracted-style-25{
  height:100%; width:auto; border-top-left-radius:20px; object-fit:cover; filter:drop-shadow(3px 3px 8px rgba(0,0,0,.3));
}
.extracted-style-6, .extracted-style-16, .extracted-style-26{ position:relative; left:6%; z-index:1; top:-10%; text-align:center;}
.extracted-style-7, .extracted-style-17, .extracted-style-27{ font-size:1.1rem; padding:12px 64px 12px 20px; text-align:left; }
.extracted-style-8, .extracted-style-18, .extracted-style-28{ position:absolute; right:65%; top:50%; transform:translateY(-50%); font-size:1.2rem; }
.extracted-style-9, .extracted-style-19, .extracted-style-29{ position:relative; left:45%; z-index:1; max-width:50%; text-align:right; top:-26%; }
.extracted-style-10, .extracted-style-20, .extracted-style-30{ margin:0; color:#fff; font-size:1rem; }
.extracted-style-11, .extracted-style-21, .extracted-style-31{ font-weight:bold; }
.extracted-style-31{ margin-top:6%; }
.schedule-box-hidden{ display:none !important; }

/* schedule specific */
#schedule-box.extracted-style-24{ bottom:0!important; right:0!important; top:0!important; padding-top:0!important; }
#schedule-box p{ margin:0 auto; font-size:1.2rem; line-height:1.6; text-align:center; padding:0 8px; word-break:break-word; }
#schedule-box span.extracted-style-31{ display:block; font-size:1.4rem; font-weight:bold; text-align:center; }
#schedule-box a.button-link{
  display:inline-block; background:var(--accent); border-radius:10px; font-size:1.1rem; text-decoration:none; color:#fff; transition:background-color .3s ease; text-align:center;
}
#schedule-box a.button-link:hover{ background:var(--accent-200); }

/* ===================================================================== *
 *  MODAL ZOOM (fix: nascosta di default + modifier per apertura)
 * ===================================================================== */
.image-zoom-modal{
  display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.85);
  align-items:center; justify-content:center;
}
.image-zoom-modal.is-open{ display:flex; } /* <-- usa/togli la classe per aprire */
.image-zoom-modal img{
  max-width:90%; max-height:90%; border-radius:20px; box-shadow:0 0 30px rgba(255,255,255,.2);
  object-fit:contain; animation:fadeIn .4s ease-in-out;
}
@keyframes fadeIn{ from{opacity:0; transform:scale(.95);} to{opacity:1; transform:scale(1);} }

/* ===================================================================== *
 *  UTILITY
 * ===================================================================== */
.content{ display:none; }
.content.active{ display:block; }

/* ===================================================================== *
 *  SCALING GLOBALE
 * ===================================================================== */
:root{
  --design-w: 1440;
  --min-scale: 0.25;
  --max-scale: 1.25;
}
.layout-scale{
  width: calc(var(--design-w) * 1px);
  margin:0 auto;
  transform-origin: top center;
}
@media (min-width:320px){
  .layout-scale{
    --_scale: clamp(var(--min-scale), 100vw / var(--design-w), var(--max-scale));
    transform: scale(var(--_scale));
  }
}

/* ===================================================================== *
 *  RESPONSIVE: DESKTOP  TABLET  MOBILE
 * ===================================================================== */

/* 1600 */
@media (max-width:1600px){
  .slider-box{ height:550px; }
  .image-placeholder{ width:880px; height:580px; }
}

/* 1200 */
@media (max-width:1200px){
  .slider-box{ height:460px; }
  .image-placeholder{ width:760px; height:500px; }
  .content-title{ font-size:clamp(6rem, 7vw, 8rem); }

  /* bottoni un filo più compatti */
  .content.content-2 .button-group .button-link{ padding:8px 14px; font-size:.92rem; }
  .info-row .info-text .content-2 .button-group .button-link{ padding:8px 12px; font-size:.9rem; }
}

/* 1024 (tablet generico) */
@media (max-width:1024px){
  .slider-box{ height:380px; }
  .slider-box-custom{ height:520px; }
  .image-placeholder{ width:min(88%, 640px); aspect-ratio:3/2; height:auto; }
  .info-text p{ max-width:85%; }
  .logo-title-box .logo-img{ width: clamp(200px, 22vw, 260px); }
  .content-title{ font-size: clamp(4.5rem, 8vw, 6.5rem); text-align:center; }
  .logo-title-box{ flex-direction:column; gap:12px; }
  .extracted-style-1{ gap:28px; margin-bottom:180px; }
}

/* 768–1200 (tablet/desktop piccolo): ridimensionamento proporzionato info-row */
@media (min-width:768px) and (max-width:1200px){
  .info-row{ flex-wrap:nowrap; gap:clamp(16px, 2.5vw, 28px); }
  .info-row .image-placeholder{ width: clamp(360px, 42vw, 520px); height:auto; aspect-ratio:3/2; }
  .info-row .info-text{ flex:1 1 0; padding:0 clamp(8px, 2vw, 24px); }
  .info-row .info-text h3{ font-size: clamp(1.1rem, 1.8vw, 1.6rem); }
  .info-row .info-text p{
    font-size: clamp(.95rem, 1.15vw, 1.05rem);
    line-height: clamp(1.45, 1.8vw, 1.6); max-width:90%; margin-inline:auto;
  }
}

/* 1201–1600 (desktop medio/grande) */
@media (min-width:1201px) and (max-width:1600px){
  .info-row{ gap:clamp(18px, 2vw, 32px); }
  .info-row .image-placeholder{ width: clamp(760px, 46vw, 1020px); height:auto; aspect-ratio:3/2; }
  .info-row .info-text p{ max-width:78%; }
}

/* 1025–1439 (via di mezzo extra) */
@media (min-width:1025px) and (max-width:1439px){
  .content.content-2 .button-group{ gap:6px; }
  .content.content-2 .button-group .button-link{ padding:10px 18px; font-size:.95rem; }
  .info-row .info-text .content-2 .button-group .button-link{ padding:10px 16px; font-size:.95rem; }

  .logo-title-box .logo-img{ width: clamp(220px, 18vw, 280px); }
  .logo-title-box .logo-img.logo-img-shadowed{
    width: clamp(300px, 22vw, 360px); margin-left: clamp(40px, 3.2vw, 100px);
  }
  .logo-title-box .content-title{ font-size: clamp(2.6rem, 5vw, 6rem); }

  .info-row{ gap:clamp(16px, 2vw, 24px); }
  .info-row .image-placeholder{ width: clamp(540px, 44vw, 820px); height:auto; aspect-ratio:3/2; }
  .info-row .info-text h3{ font-size: clamp(1.2rem, 1.4vw, 1.6rem); }
  .info-row .info-text p{
    font-size: clamp(1rem, 1.1vw, 1.1rem);
    line-height: clamp(1.45, 1.6vw, 1.6); max-width:80%;
  }
}

/* 1439: riduzioni progressive per header + trio */
@media (max-width:1439px){
  .logo-title-box .logo-img{ width: clamp(200px, 18vw, 300px); }
  .logo-title-box .logo-img.logo-img-shadowed{
    width: clamp(260px, 22vw, 400px);
    margin-left: clamp(24px, 2vw, 140px); padding-top:1.5%;
  }
  .logo-title-box .content-title{ font-size: clamp(2.6rem, 5.5vw, 7rem); }

  .extracted-style-1{ gap: clamp(20px, 3vw, 40px); }
  .extracted-style-3, .extracted-style-13, .extracted-style-23{ height: clamp(220px, 20vw, 300px); }
  .extracted-style-7, .extracted-style-17, .extracted-style-27{
    font-size: clamp(.9rem, 1vw, 1.05rem);
    padding: clamp(10px, 1vw, 12px) clamp(36px, 3vw, 52px) clamp(10px, 1vw, 12px) clamp(14px, 2vw, 20px);
  }
  .extracted-style-10, .extracted-style-20, .extracted-style-30{ font-size: clamp(.95rem, 1.1vw, 1.1rem); }
}

/* 1200: trio più stretto */
@media (max-width:1200px){
  .extracted-style-3, .extracted-style-13, .extracted-style-23{ height: clamp(200px, 24vw, 260px); }
  .extracted-style-9, .extracted-style-19, .extracted-style-29{ max-width:46%; }
  .extracted-style-7, .extracted-style-17, .extracted-style-27{ font-size:.9rem; padding:8px 32px 8px 14px; }
}

/* ===================================================================== *
 *  TABLET & MOBILE ORIENTATION-SPECIFIC
 * ===================================================================== */

/* iPad – portrait (768–1024) */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
  .content-box.logo-title-box{
    display:flex; flex-direction:row!important; flex-wrap:nowrap!important;
    align-items:center; justify-content:center; gap: clamp(10px, 2.6vw, 28px);
    border-radius:24px!important; padding-block:10px!important; margin-block:10px!important;
    min-block-size: clamp(120px, 18vw, 180px); overflow:hidden; width:100%!important; box-sizing:border-box;
  }
  .content-box.logo-title-box > *{ flex:0 1 auto; min-width:0; }
  .content-box.logo-title-box .logo-img{ width: clamp(110px, 17vw, 240px)!important; height:auto; }
  .content-box.logo-title-box .logo-img.logo-img-shadowed{
    width: clamp(120px, 14vw, 220px)!important; height:auto!important; margin-left: clamp(8px, 1.6vw, 20px)!important;
    padding-top:0!important; object-fit:contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
  }
  .content-box.logo-title-box .content-title{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-size: clamp(1.5rem, 5.4vw, 3.4rem)!important; line-height:1.06; margin:0;
  }

  /* trio in colonna, centrato */
  .extracted-style-1{
    display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important;
    gap: clamp(24px, 4vw, 36px); padding:28px 0; margin-bottom:120px;
    padding-inline: clamp(32px, 9vw, 72px)!important;
  }
  .extracted-style-3, .extracted-style-13, .extracted-style-23{
    display:flex; flex-direction:column; align-items:center; justify-content:center; height:auto; padding:16px; gap:12px;
    padding-inline: clamp(16px, 4vw, 30px)!important;
  }
  .extracted-style-4, .extracted-style-14, .extracted-style-24{
    position:static!important; width:100%; max-width: clamp(200px, 28vw, 320px)!important;
    height:auto!important; margin:0 auto 8px!important;
  }
  .extracted-style-5, .extracted-style-15, .extracted-style-25{ width:100%; height:auto; object-fit:contain; }
  .extracted-style-6, .extracted-style-16, .extracted-style-26{ position:static!important; align-self:center; margin-top:4px; }
  .extracted-style-7, .extracted-style-17, .extracted-style-27{ display:inline-block; text-align:center; }
  .extracted-style-8, .extracted-style-18, .extracted-style-28{ position:static!important; transform:none!important; display:inline; }
  .extracted-style-9, .extracted-style-19, .extracted-style-29{ positionstatic!important; left:auto; bottom:auto; max-width:100%; text-align:center; margin-top:6px; }

  #schedule-box{ position:static!important; width:100%; max-width:520px; margin:6px auto 0; }
  #schedule-box p{ text-align:center; }
}

/* iPad – landscape (768–1024) */
@media (min-width:768px) and (max-width:1024px) and (orientation:landscape){
  .content-box.logo-title-box{
    display:flex; flex-direction:row!important; flex-wrap:nowrap!important;
    align-items:center; justify-content:center; gap: clamp(8px, 2vw, 24px);
    border-radius:20px!important; padding-block:8px!important; margin-block:8px!important; width:100%!important; overflow:hidden; box-sizing:border-box;
  }
  .content-box.logo-title-box .logo-img{ width: clamp(80px, 10vw, 160px)!important; height:auto; }
  .content-box.logo-title-box .logo-img.logo-img-shadowed{
    width: clamp(120px, 12vw, 220px)!important; margin-left: clamp(6px, 1.4vw, 18px)!important; padding-top:0!important; object-fit:contain;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
  }
  .content-box.logo-title-box .content-title{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-size: clamp(1.2rem, 3.6vw, 3rem)!important; line-height:1.05; margin:0;
  }

  /* trio testi leggermente ridotti */
  .extracted-style-10, .extracted-style-20, .extracted-style-30{ font-size: clamp(.82rem, 1.05vw, .95rem)!important; }
  .extracted-style-11, .extracted-style-21, .extracted-style-31{ font-weight:bold; font-size: clamp(.9rem, 1.15vw, 1.05rem)!important; }
  .extracted-style-7, .extracted-style-17, .extracted-style-27{
    font-size: clamp(.82rem, 1.05vw, .95rem)!important;
    padding: clamp(6px, .8vw, 10px) clamp(28px, 2.2vw, 40px) clamp(6px, .8vw, 10px) clamp(12px, 1.4vw, 18px)!important;
  }
}

/* ===================================================================== *
 *  MOBILE (767)
 * ===================================================================== */
@media (max-width:767px){
  html{ font-size:90%; }

  /* Header: staff nascosto, logo + titolo in riga, più grandi ma compatti */
  .content-box.logo-title-box{
    width:100%!important; margin:8px auto!important; border-radius:14px!important;
    padding-block:8px!important; display:flex; flex-direction:row!important; flex-wrap:nowrap!important;
    align-items:center; justify-content:center; gap:10px; text-align:center; box-sizing:border-box; overflow:hidden;
  }
  .content-box.logo-title-box .logo-img.logo-img-shadowed{ display:none!important; }
  .content-box.logo-title-box .logo-img{ width: clamp(72px, 22vw, 160px)!important; height:auto; margin:0!important; }
  .content-box.logo-title-box .content-title{
    font-size: clamp(1.6rem, 9vw, 4rem)!important; line-height:1.06; margin:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center;
  }

  /* Slider */
  .slider-box{ height:260px; border-radius:18px; }
  .slider-box-custom{ height:380px; }
  .dots{ bottom:8px; right:50%; transform:translateX(50%); }
  .dot{ width:10px; height:10px; }

  /* Info rows */
  .info-row, .info-row.reverse{ flex-direction:column; margin:40px 0; }
  .image-placeholder{ width:100%; height:auto; max-height:60vh; aspect-ratio:3/2; }
  .info-text{ max-width:100%; }
  .info-text p{ max-width:92%; }
  .info-row + .info-row::before{
    content:""; display:block; width:65%; height:1px; background:#c8c8c8; margin:48px auto;
  }

  /* Trio in colonna, centrato e più compatto */
  .extracted-style-1{
    display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important;
    padding-inline: clamp(24px, 8vw, 48px)!important; gap: clamp(20px, 5vw, 32px)!important; margin-bottom:120px;
  }
  .extracted-style-3, .extracted-style-13, .extracted-style-23{
    padding-inline: clamp(14px, 4.8vw, 26px)!important; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px!important;
  }
  .extracted-style-4, .extracted-style-14, .extracted-style-24{
    position:static!important; width:100%; max-width: clamp(140px, 46vw, 200px)!important; height:auto!important; margin:0 auto 4px!important;
  }
  .extracted-style-5, .extracted-style-15, .extracted-style-25{ width:100%; height:auto; object-fit:contain; }
  .extracted-style-6, .extracted-style-16, .extracted-style-26{ position:static!important; align-self:center; margin-top:4px; }
  .extracted-style-7, .extracted-style-17, .extracted-style-27{ display:inline-block; text-align:center; }
  .extracted-style-8, .extracted-style-18, .extracted-style-28{ display:none; } /* frecce nascoste su phone */
  .extracted-style-9, .extracted-style-19, .extracted-style-29{ position:static!important; left:0; bottom:0; max-width:100%; text-align:center; margin-top:12px; }

  /* Bottoni */
  .button-group{ flex-direction:row; justify-content:center; gap:6px; }
  .button-link{ padding:14px 20px; font-size:1rem; }
}

/* 480 extra small */
@media (max-width:480px){
  .slider-box{ height:220px; }
  .slider-box-custom{ height:320px; }
  .image-placeholder{ max-height:50vh; }
  .content-title{ font-size:clamp(2rem, 10vw, 3rem); }
  .logo-title-box .logo-img{ width:70%; }
  .dot{ width:9px; height:9px; }
}
/* ===========================================================
   OVERRIDES RICHIESTE (incolla in fondo al file)
   =========================================================== */

/* 1) Telefono verticale: titolo più grande nel box logo+titolo */
@media (max-width: 767px) and (orientation: portrait) {
  .content-box.logo-title-box .content-title {
    font-size: clamp(2rem, 11.5vw, 5rem) !important;
    line-height: 1.04 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

/* 2) "Tutti i trattamenti": bottoni SEMPRE in verticale su TUTTI i dispositivi */
.content.content-2 .button-group {
  display: flex;
  flex-direction: column !important;   /* forza il layout verticale */
  align-items: stretch;
  gap: 10px;
}
.content.content-2 .button-group .button-link {
  width: 100%;
  text-align: center;
  white-space: normal;                  /* testo va a capo se serve */
}
/* opzionale: limita la larghezza massima su schermi grandi */
@media (min-width: 1025px) {
  .content.content-2 .button-group .button-link { max-width: 520px; margin-inline: auto; }
}

/* 3) Trio su mobile verticale: ingrandisci SOLO il 3° box (extracted-style-22/23) */
@media (max-width: 767px) and (orientation: portrait) {
  #trio .extracted-style-22 {           /* wrapper del 3° box */
    max-width: 680px !important;        /* più largo degli altri */
    width: 100%;
    margin-inline: auto;
  }
  #trio .extracted-style-22 .extracted-style-23 {  /* card interna */
    padding: 22px !important;
    border-radius: 24px !important;
    min-height: 280px !important;
  }
  /* immagine dentro al 3° box più grande rispetto agli altri */
  #trio .extracted-style-22 .extracted-style-24 {
    max-width: clamp(200px, 70vw, 340px) !important;
    margin-bottom: 10px !important;
  }
  /* testo del 3° box leggermente più grande */
  #trio .extracted-style-22 .extracted-style-31 {  /* titolo "Orari di apertura" */
    font-size: clamp(1.1rem, 5.8vw, 1.45rem) !important;
  }
  #trio .extracted-style-22 .extracted-style-30 {  /* paragrafo */
    font-size: clamp(1rem, 4.8vw, 1.25rem) !important;
  }
}

/* ===========================================================
   OVERRIDES — Trio + iPad portrait
   Incolla in fondo al file
   =========================================================== */

/* TRIO — box più grandi (uguali) e immagini un filo più piccole */
#trio .extracted-style-2,
#trio .extracted-style-12,
#trio .extracted-style-22{
  /* allarga i 3 wrapper allo stesso identico size */
  max-width: 640px !important;
  flex: 0 1 640px !important;
}

#trio .extracted-style-3,
#trio .extracted-style-13,
#trio .extracted-style-23{
  /* aumenta l’altezza dei box in modo responsivo */
  height: clamp(340px, 26vw, 420px) !important;
  padding: 18px !important;
}

/* riduci leggermente l’area immagine dentro i box */
#trio .extracted-style-4,
#trio .extracted-style-14,
#trio .extracted-style-24
  height: 78% !important; /* era ~85% */
}

/* mantieni le immagini contenute, senza “stirarle” */
#trio .extracted-style-5,
#trio .extracted-style-15,
#trio .extracted-style-25{
  width: auto !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* iPad — portrait: staff + titolo più grandi,
   e trio sempre uniforme (box più grandi, immagini un filo più piccole) */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){

  /* header: immagine staff più grande */
  .content-box.logo-title-box .logo-img.logo-img-shadowed{
    width: clamp(180px, 24vw, 340px) !important; /* prima max 220px */
  }

  /* header: titolo più grande */
  .content-box.logo-title-box .content-title{
    font-size: clamp(2rem, 6.8vw, 4.8rem) !important; /* prima max ~3.4rem */
    line-height: 1.06 !important;
  }

  /* trio: uniforma e ingrandisci i box */
  #trio .extracted-style-2,
  #trio .extracted-style-12,
  #trio .extracted-style-22{
    max-width: 580px !important;
    flex: 0 1 580px !important;
  }

  #trio .extracted-style-3,
  #trio .extracted-style-13,
  #trio .extracted-style-23{
    min-height: 340px !important;
  }

  /* immagini del trio leggermente più piccole su iPad portrait */
  #trio .extracted-style-4,
  #trio .extracted-style-14,
  #trio .extracted-style-24{
    max-width: clamp(180px, 26vw, 300px) !important; /* prima 200–320px */
  }
}
/* ===========================================================
   TRIO — iPad vertical & Mobile vertical
   (incolla in fondo; usa !important per superare regole precedenti)
   =========================================================== */

/* iPad – portrait (768–1024) */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){

  /* Contenitore trio in colonna e centrato */
  #trio.extracted-style-1{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap: clamp(20px, 3.6vw, 32px) !important;
    padding-inline: clamp(24px, 6vw, 60px) !important;
  }

  /* Ogni wrapper ha la stessa larghezza */
  #trio .extracted-style-2,
  #trio .extracted-style-12,
  #trio .extracted-style-22{
    width:100% !important;
    max-width: 720px !important;
    margin-inline:auto !important;
    flex: 0 1 auto !important;
  }

  /* Card: colonna, centrata, altezza coerente col desktop */
  #trio .extracted-style-3,
  #trio .extracted-style-13,
  #trio .extracted-style-23{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    padding: 20px !important;
    min-height: 380px !important;
    height: auto !important;
  }

  /* Contenitore immagine centrato e più compatto */
  #trio .extracted-style-4,
  #trio .extracted-style-14,
  #trio .extracted-style-24{
    position: static !important;
    width: 100% !important;
    max-width: clamp(220px, 36vw, 320px) !important;
    height: auto !important;
    margin: 0 auto 10px !important;
  }

  /* Immagine dentro al contenitore: non si deforma */
  #trio .extracted-style-5,
  #trio .extracted-style-15,
  #trio .extracted-style-25{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Bottone centrato sotto l’immagine */
  #trio .extracted-style-6,
  #trio .extracted-style-16,
  #trio .extracted-style-26{
    position: static !important;
    align-self: center !important;
    margin-top: 8px !important;
  }
  #trio .extracted-style-7,
  #trio .extracted-style-17,
  #trio .extracted-style-27{
    display: inline-block !important;
    text-align: center !important;
  }
  /* Freccia del bottone: inline, non assoluta */
  #trio .extracted-style-8,
  #trio .extracted-style-18,
  #trio .extracted-style-28{
    position: static !important;
    transform: none !important;
    display: inline !important;
  }

  /* Testo centrato, non assoluto */
  #trio .extracted-style-9,
  #trio .extracted-style-19,
  #trio .extracted-style-29{
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-top: 10px !important;
  }

  /* Blocco orari (quando aperto): centrato e leggibile */
  #trio #schedule-box{
    position: static !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 10px auto 0 !important;
    text-align: center !important;
  }
}

/* Mobile – portrait (767) */
@media (max-width:767px) and (orientation:portrait){

  /* Contenitore trio in colonna e centrato */
  #trio.extracted-style-1{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap: clamp(18px, 5vw, 28px) !important;
    padding-inline: clamp(18px, 7vw, 40px) !important;
  }

  /* Stessa larghezza per tutti i box */
  #trio .extracted-style-2,
  #trio .extracted-style-12,
  #trio .extracted-style-22{
    width: 100% !important;
    max-width: 600px !important;
    margin-inline: auto !important;
  }

  /* Card verticali e centrate */
  #trio .extracted-style-3,
  #trio .extracted-style-13,
  #trio .extracted-style-23{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    padding: 18px !important;
    min-height: 340px !important;
  }

  /* Immagini un filo più piccole e centrate */
  #trio .extracted-style-4,
  #trio .extracted-style-14,
  #trio .extracted-style-24{
    position: static !important;
    width: 100% !important;
    max-width: clamp(180px, 58vw, 260px) !important;
    height: auto !important;
    margin: 0 auto 8px !important;
  }
  #trio .extracted-style-5,
  #trio .extracted-style-15,
  #trio .extracted-style-25{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Bottone e testo centrati */
  #trio .extracted-style-6,
  #trio .extracted-style-16,
  #trio .extracted-style-26{
    position: static !important;
    align-self: center !important;
    margin-top: 6px !important;
  }
  #trio .extracted-style-7,
  #trio .extracted-style-17,
  #trio .extracted-style-27{
    display:inline-block !important;
    text-align:center !important;
  }
  /* Su phone teniamo le frecce nascoste (coerente col resto del CSS) */
  #trio .extracted-style-8,
  #trio .extracted-style-18,
  #trio .extracted-style-28{
    display:none !important;
  }

  #trio .extracted-style-9,
  #trio .extracted-style-19,
  #trio .extracted-style-29{
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-top: 10px !important;
  }

  #trio #schedule-box{
    position: static !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 8px auto 0 !important;
    text-align: center !important;
  }
}
/* ===========================================================
   1) PC NORMALE — RIPRISTINO TRIO
   (annulla i precedenti override globali)
   =========================================================== */
@media (min-width: 1025px){
  /* wrapper: nessuna larghezza forzata */
  #trio .extracted-style-2,
  #trio .extracted-style-12,
  #trio .extracted-style-22{
    max-width: none !important;
    width: auto !important;
    flex: 1 1 auto !important;
    margin-inline: 0 !important;
  }

  /* card: torna alle altezze/spacing originali */
  #trio .extracted-style-3,
  #trio .extracted-style-13,
  #trio .extracted-style-23{
    height: clamp(220px, 20vw, 300px) !important; /* coerente con regole <=1439 */
    padding: 15px !important;
  }

  /* contenitore immagine: come in origine (più alto) */
  #trio .extracted-style-4,
  #trio .extracted-style-14,
  #trio .extracted-style-24{
    height: 85% !important;
    width: auto !important;
    position: relative !important;
    margin-bottom: 0 !important;
  }

  /* immagine: comportamento originale */
  #trio .extracted-style-5,
 #trio .extracted-style-15,
  #trio .extracted-style-25{
    width: auto !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* ===========================================================
   2) IPAD & PHONE — PORTRAIT
   Immagini più piccole, meno spazio tra immagine e bottone,
   box più alti, layout verticale e centrato
   =========================================================== */

/* iPad – portrait (768–1024) */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
  /* impila e centra */
  #trio.extracted-style-1{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap: clamp(18px, 3.4vw, 28px) !important;
    padding-inline: clamp(24px, 6vw, 60px) !important;
  }

  /* stessa larghezza per i 3 box */
  #trio .extracted-style-2,
  #trio .extracted-style-12,
  #trio .extracted-style-22{
    width: 100% !important;
    max-width: 680px !important;
    margin-inline: auto !important;
    flex: 0 1 auto !important;
  }

  /* box più alti e centrati */
  #trio .extracted-style-3,
  #trio .extracted-style-13,
  #trio .extracted-style-23{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    padding: 20px !important;
    min-height: 420px !important;      /*  aumenta altezza */
    height: auto !important;
  }

  /* immagine più piccola */
  #trio .extracted-style-4,
  #trio .extracted-style-14,
  #trio .extracted-style-24{
    position: static !important;
    width: 100% !important;
    max-width: clamp(200px, 32vw, 280px) !important; /*  ridotta */
    height: auto !important;
    margin: 0 auto 6px !important;     /*  meno spazio sotto l’immagine */
  }

  #trio .extracted-style-5,
  #trio .extracted-style-15,
  #trio .extracted-style-25{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* bottone più vicino all’immagine */
  #trio .extracted-style-6,
  #trio .extracted-style-16,
  #trio .extracted-style-26{
    position: static !important;
    align-self: center !important;
    margin-top: 4px !important;        /*  riduci spazio sopra bottone */
  }

  /* testo centrato e non assoluto */
  #trio .extracted-style-9,
  #trio .extracted-style-19,
  #trio .extracted-style-29{
    position: static !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-top: 10px !important;
  }

  /* orari (quando aperti) centrati */
  #trio #schedule-box{
    position: static !important;
    width: 100% !important;
    max-width: 540px !important;
    margin: 10px auto 0 !important;
    text-align: center !important;
  }
}

/* Mobile – portrait (767) */
@media (max-width:767px) and (orientation:portrait){
  /* impila e centra */
  #trio.extracted-style-1{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap: clamp(16px, 5vw, 26px) !important;
    padding-inline: clamp(18px, 8vw, 44px) !important;
  }

  /* stessa larghezza per i 3 box */
  #trio .extracted-style-2,
  #trio .extracted-style-12,
  #trio .extracted-style-22{
    width: 100% !important;
    max-width: 600px !important;
    margin-inline: auto !important;
  }

  /* box più alti e centrati */
  #trio .extracted-style-3,
  #trio .extracted-style-13,
  #trio .extracted-style-23{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    padding: 18px !important;
    min-height: 380px !important;      /*  aumenta altezza */
  }

  /* immagine più piccola */
  #trio .extracted-style-4,
  #trio .extracted-style-14,
  #trio .extracted-style-24{
    position: static !important;
    width: 100% !important;
    max-width: clamp(160px, 52vw, 230px) !important; /*  ridotta */
    height: auto !important;
    margin: 0 auto 6px !important;     /*  meno spazio sotto l’immagine */
  }

  #trio .extracted-style-5,
  #trio .extracted-style-15,
  #trio .extracted-style-25{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* bottone più vicino all’immagine */
  #trio .extracted-style-6,
  #trio .extracted-style-16,
  #trio .extracted-style-26{
    position: static !important;
    align-self: center !important;
    margin-top: 4px !important;        /*  riduci spazio sopra bottone */
  }

  /* testo centrato */
  #trio .extracted-style-9,
  #trio .extracted-style-19,
  #trio .extracted-style-29{
    position: static !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-top: 10px !important;
  }

  #trio #schedule-box{
    position: static !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 8px auto 0 !important;
    text-align: center !important;
  }
}
/* ===========================================================
   TRIO — Uniforma 2° e 3° box allo stile del 1°
   (desktop e base; i breakpoint già esistenti continueranno a funzionare)
   =========================================================== */

/* Wrapper dei tre box */
#trio .extracted-style-2,
#trio .extracted-style-12,
#trio .extracted-style-22{
  /* stesso comportamento flessibile del primo */
  flex: 1 1 0 !important;
  max-width: none !important;
}

/* Card interna (stesso background, ombra, raggio, padding, altezza) */
#trio .extracted-style-3,
#trio .extracted-style-13,
#trio .extracted-style-23{
  background: var(--card) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 0 20px rgba(0,0,0,.2) !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 15px !important;
  height: clamp(220px, 20vw, 300px) !important; /* come il primo */
}

/* Contenitore immagine (stessa posizione/dimensioni) */
#trio .extracted-style-4,
#trio .extracted-style-14,
#trio .extracted-style-24{
  position: relative !important;
  height: 85% !important;
  width: auto !important;
  z-index: 0 !important;
}

/* Immagine (stesso fit, ombra e bordi) */
#trio .extracted-style-5,
#trio .extracted-style-15,
#trio .extracted-style-25{
  height: 100% !important;
  width: auto !important;
  object-fit: cover !important;
  border-top-left-radius: 20px !important;
  filter: drop-shadow(3px 3px 8px rgba(0,0,0,.3)) !important;
}

/* Bottone: stessa posizione relativa del primo */
#trio .extracted-style-6,
#trio .extracted-style-16,
#trio .extracted-style-26{
  position: relative !important;
  left: 6% !important;
  bottom: 1% !important;
  z-index: 1 !important;
}

/* Stile bottone identico */
#trio .extracted-style-7,
#trio .extracted-style-17,
#trio .extracted-style-27{
  font-size: 1.1rem !important;
  padding: 12px 64px 12px 20px !important;
  text-align: left !important;
}

/* Freccia dentro al bottone: stessa posizione assoluta */
#trio .extracted-style-8,
#trio .extracted-style-18,
#trio .extracted-style-28{
  position: absolute !important;
  right: 65% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 1.2rem !important;
}

/* Testo descrittivo: stessa posizione */
#trio .extracted-style-9,
#trio .extracted-style-19,
#trio .extracted-style-29{
  position: relative !important;
  left: 45% !important;
  z-index: 1 !important;
  max-width: 50% !important;
  text-align: right !important;
  bottom: 12% !important;
}

/* Tipografia del testo e del titolo in grassetto */
#trio .extracted-style-10,
#trio .extracted-style-20,
#trio .extracted-style-30{
  margin: 0 !important;
  color: #fff !important;
  font-size: 1rem !important;
}
#trio .extracted-style-11,
#trio .extracted-style-21,
#trio .extracted-style-31{
  font-weight: bold !important;
}
/* ===========================================================
   1) PC NORMALE — RIPRISTINO TRIO
   (annulla i precedenti override globali)
   =========================================================== */
@media (min-width: 1025px){
  /* wapper: nessuna larghezza forzata */
  #trio .extracted-style-2,
  #trio .extracted-style-12,
  #trio .extracted-style-22{
    max-width: none !important;
    width: auto !important;
    flex: 1 1 auto !important;
    margin-inline: 0 !important;
  }

  /* card: torna alle altezze/spacing originali */
  #trio .extracted-style-3,
  #trio .extracted-style-13,
  #trio .extracted-style-23{
    height: clamp(220px, 20vw, 300px) !important; /* coerente con regole <=1439 */
    padding: 15px !important;
  }

  /* contenitore immagine: come in origine (più alto) */
  #trio .extracted-style-4,
  #trio .extracted-style-14,
  #trio .extracted-style-24{
    height: 85% !important;
    width: auto !important;
    position: relative !important;
    margin-bottom: 0 !important;
  }

  /* immagine: comportamento originale */
  #trio .extracted-style-5,
  #trio .extracted-style-15,
  #trio .extracted-style-25{
    width: auto !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* ===========================================================
   2) IPAD & PHONE — PORTRAIT
   Immagini più piccole, meno spazio tra immagine e bottone,
   box più alti, layout verticale e centrato
   =========================================================== */

/* iPad – portrait (768–1024) */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
  /* impila e centra */
  #trio.extracted-style-1{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap: clamp(18px, 3.4vw, 28px) !important;
    padding-inline: clamp(24px, 6vw, 60px) !important;
  }

  /* stessa larghezza per i 3 box */
  #trio .extracted-style-2,
  #trio .extracted-style-12,
  #trio .extracted-style-22{
    width: 100% !important;
    max-width: 680px !important;
    margin-inline: auto !important;
    flex: 0 1 auto !important;
  }

  /* box più alti e centrati */
  #trio .extracted-style-3,
  #trio .extracted-style-13,
  #trio .extracted-style-23{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    padding: 20px !important;
    min-height: 420px !important;      /*  aumenta altezza */
    height: auto !important;
  }

  /* immagine più piccola */
  #trio .extracted-style-4,
  #trio .extracted-style-14,
  #trio .extracted-style-24{
    position: static !important;
    width: 100% !important;
    max-width: clamp(200px, 32vw, 280px) !important; /*  ridotta */
    height: auto !important;
    margin: 0 auto 6px !important;     /*  meno spazio sotto l’immagine */
  }

  #trio .extracted-style-5,
  #trio .extracted-style-15,
  #trio .extracted-style-25{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* bottone più vicino all’immagine */
  #trio .extracted-style-6,
  #trio .extracted-style-16,
  #trio .extracted-style-26{
    position: static !important;
    align-self: center !important;
    margin-top: 4px !important;        /*  riduci spazio sopra bottone */
  }

  /* testo centrato e non assoluto */
  #trio .extracted-style-9,
  #trio .extracted-style-19,
  #trio .extracted-style-29{
    position: static !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-top: 10px !important;
  }

  /* orari (quando aperti) centrati */
  #trio #schedule-box{
    position: static !important;
    width: 100% !important;
    max-width: 540px !important;
    margin: 10px auto 0 !important;
    text-align: center !important;
  }
}

/* Mobile – portrait (767) */
@media (max-width:767px) and (orientation:portrait){
  /* impila e centra */
  #trio.extracted-style-1{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap: clamp(16px, 5vw, 26px) !important;
    padding-inline: clamp(18px, 8vw, 44px) !important;
  }

  /* stessa larghezza per i 3 box */
  #trio .extracted-style-2,
  #trio .extracted-style-12,
  #trio .extracted-style-22{
    width: 100% !important;
    max-width: 600px !important;
    margin-inline: auto !important;
  }

  /* box più alti e centrati */
  #trio .extracted-style-3,
  #trio .extracted-style-13,
  #trio .extracted-style-23{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    padding: 18px !important;
    min-height: 380px !important;      /*  aumenta altezza */
  }

  /* immagine più piccola */
  #trio .extracted-style-4,
  #trio .extracted-style-14,
  #trio .extracted-style-24{
    position: static !important;
    width: 100% !important;
    max-width: clamp(160px, 52vw, 230px) !important; /*  ridotta */
    height: auto !important;
    margin: 0 auto 6px !important;     /*  meno spazio sotto l’immagine */
  }

  #trio .extracted-style-5,
  #trio .extracted-style-15,
  #trio .extracted-style-25{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* bottone più vicino all’immagine */
  #trio .extracted-style-6,
  #trio .extracted-style-16,
  #trio .extracted-style-26{
    position: static !important;
    align-self: center !important;
    margin-top: 4px !important;        /*  riduci spazio sopra bottone */
  }

  /* testo centrato */
  #trio .extracted-style-9,
  #trio .extracted-style-19,
  #trio .extracted-style-29{
    position: static !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-top: 10px !important;
  }

  #trio #schedule-box{
    position: static !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 8px auto 0 !important;
    text-align: center !important;
  }
}
/* ===========================================================
   1) CENTRA "SCOPRI DI PIÙ" NEL 1° BOX (MAPPA)
   (vale per tutti i breakpoint)
   =========================================================== */
.extracted-style-2 .extracted-style-6{
  position: static !important;          /* annulla left/bottom */
  left: auto !important;
  bottom: auto !important;
  display: flex !important;
  justify-content: center !important;   /* centra orizzontalmente */
  align-items: center !important;
}
.extracted-style-2 .extracted-style-7{
  text-align: center !important;
  padding: 12px 24px !important;
}
.extracted-style-2 .extracted-style-8{   /* freccia: inline, non assoluta */
  position: static !important;
  transform: none !important;
  margin-left: .5em !important;
  display: inline !important;
}

/* ===========================================================
   2) TELEFONI — TRIO UNIFORME COME IL 1° BOX
   (stessa dimensione, stesso stile; annulla il 3° box "più grande")
   =========================================================== */
@media (max-width: 767px){
  /* wrapper uguali */
  #trio .extracted-style-2,
  #trio .extracted-style-12,
  #trio .extracted-style-22{
    width: 100% !important;
    max-width: 600px !important;
    margin-inline: auto !important;
    flex: 0 1 auto !important;
  }

  /* card interne: stesso background/ombra/raggio/altezza */
  #trio .extracted-style-3,
  #trio .extracted-style-13,
  #trio .extracted-style-23{
    background: var(--card) !important;
    border-radius: 20px !important;
    box-shadow: inset 0 0 20px rgba(0,0,0,.2) !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 15px !important;
    min-height: 360px !important;       /* <— stessa altezza per tutti */
    height: auto !important;
    text-align: center !important;
  }

  /* contenitore immagine e immagine: come nel 1° box */
  #trio .extracted-style-4,
  #trio .extracted-style-14,
  #trio .extracted-style-24{
    position: relative !important;
    width: auto !important;
    height: 85% !important;             /* come il 1° */
    margin: 0 auto 0 !important;
  }
  #trio .extracted-style-5,
  #trio .extracted-style-15,
  #trio .extracted-style-25{
    width: auto !iportant;
    height: 100% !important;
    object-fit: cover !important;
    border-top-left-radius: 20px !important;
    filter: drop-shadow(3px 3px 8px rgba(0,0,0,.3)) !important;
  }

  /* bottone: centrato su tutti (coerente e leggibile su phone) */
  #trio .extracted-style-6,
  #trio .extracted-style-16,
  #trio .extracted-style-26{
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 6px !important;
  }
  #trio .extracted-style-7,
  #trio .extracted-style-17,
  #trio .extracted-style-27{
    text-align: center !important;
    padding: 12px 20px !important;
  }

  /* frecce dentro al bottone: tienile nascoste anche sul 2° e 3° */
  #trio .extracted-style-8,
  #trio .extracted-style-18,
  #trio .extracted-style-28{
    display: none !important;
  }

  /* testo descrittivo: centrato e non assoluto */
  #trio .extracted-style-9,
  #trio .extracted-style-19,
  #trio .extracted-style-29{
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-top: 10px !important;
  }
  #trio .extracted-style-10,
  #trio .extracted-style-20,
  #trio .extracted-style-30{
    margin: 0 !important;
    color: #fff !important;
    font-size: 1rem !important;
  }
  #trio .extracted-style-11,
  #trio .extracted-style-21,
  #trio .extracted-style-31{
    font-weight: bold !important;
  }

  /* orari (quando aperti): invariati e centrati */
  #trio #schedule-box{
    position: static !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 8px auto 0 !important;
    text-align: center !important;
  }
}
/* ===========================================================
   PATCH — TRIO
   1) Bottone "Scopri di più" centrato su TUTTE le versioni
   =========================================================== */
#trio .extracted-style-6{
  position: static !important;     /* annulla left/bottom assoluti */
  left: auto !important;
  bottom: auto !important;
  display: flex !important;        /* centra il link dentro al wrapper */
  justify-content: center !important;
  align-items: center !important;
  margin-top: 6px !important;
}
#trio .extracted-style-7{
  text-align: center !important;   /* testo del link centrato */
  padding: 12px 24px !important;   /* padding uniforme */
}
/* Freccia solo su 768px: inline accanto al testo (su mobile resta nascosta) */
@media (min-width:768px){
  #trio .extracted-style-8{
    position: static !important;
    transform: none !important;
    display: inline !important;
    margin-left: .5em !important;
  }
}

/* ===========================================================
   PATCH — TRIO su TELEFONI (767px)
   2) Immagini responsive e sempre contenute nel loro contenitore
   =========================================================== */
@media (max-width:767px){
  /* Contenitore immagine: niente altezze forzate, dimensioni compatte */
  #trio .extracted-style-4{
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-width: clamp(160px, 58vw, 240px) !important; /* riduce l’impatto visivo */
    margin: 0 auto 8px !important;
  }
  /* Immagine: scala dentro al contenitore, niente “cover” enorme */
  #trio .extracted-style-5{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;    /* << chiave per tenerla dentro */
    max-height: 42vh !important;       /* evita che svetti in altezza */
  }
}
/* ===========================================================
   PC NORMALE (1025px) — RIPRISTINO TRIO ORIGINALE
   =========================================================== */
@media (min-width:1025px){
  /* Bottone: torna relativo, in basso a sinistra */
  #trio .extracted-style-6{
    position: relative !important;
    left: 6% !important;
    bottom: 1% !important;
    display: inline-block !important;
    margin-top: 0 !important;
    z-index: 1 !important;
  }
  #trio .extracted-style-7{
    text-align: left !important;
    padding: 12px 64px 12px 20px !important;
  }
  /* Freccia interna come in origine */
  #trio .extracted-style-8{
    position: absolute !important;
    right: 65% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: block !important;
  }
  /* Testo: lato opposto, allineato a destra */
  #trio .extracted-style-9{
    position: relative !important;
    left: 45% !important;
    bottom: 12% !important;
    max-width: 50% !important;
    text-align: right !important;
    z-index: 1 !important;
  }
}

/* ===========================================================
   iPAD — ORIZZONTALE (768–1024) — BOTTONE SOTTO, TESTO OPPOSTO
   =========================================================== */
@media (min-width:768px) and (max-width:1024px) and (orientation:landscape){
  /* Assicura un contesto di posizionamento */
  #trio .extracted-style-3{ position: relative !important; }

  /* Bottone: in basso a sinistra, sotto l'immagine */
  #trio .extracted-style-6{
    position: absolute !important;
    left: 14px !important;
    bottom: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    z-index: 2 !important;
  }
  #trio .extracted-style-7{
    text-align: left !important;
    padding: 10px 18px !important;
  }
  /* Freccia: inline accanto al testo su iPad orizzontale */
  #trio .extracted-style-8{
    position: static !important;
    transform: none !important;
    display: inline !important;
    margin-left: .45em !important;
  }

  /* Testo: in basso a destra, sulla stessa linea del bottone */
  #trio .extracted-style-9{
    position: absolute !important;
    right: 16px !important;
    bottom: 12px !important;
    left: auto !important;
    max-width: 48% !important;
    text-align: right !important;
    margin: 0 !important;
    z-index: 2 !important;
  }
}
/* ===========================================================
   1) iPad (768–1024) — testo e bottoni leggermente più piccoli
   =========================================================== */
@media (min-width:768px) and (max-width:1024px){
  /* bottoni trio */
  #trio .extracted-style-7,
  #trio .extracted-style-17,
  #trio .extracted-style-27,
  /* qualunque bottone generico */
  .button-link{
    font-size: clamp(.82rem, 1.05vw, .95rem) !important;
    padding: 8px 16px !important;
  }

  /* testo descrittivo dentro ai box del trio */
  #trio .extracted-style-10,
  #trio .extracted-style-20,
  #trio .extracted-style-30{
    font-size: clamp(.9rem, 1.2vw, 1.05rem) !important;
    line-height: 1.45 !important;
  }
  /* titoletti in grassetto */
  #trio .extracted-style-11,
  #trio .extracted-style-21,
  #trio .extracted-style-31{
    font-size: clamp(1rem, 1.35vw, 1.15rem) !important;
  }
}

/* ===========================================================
   2) Tutti i dispositivi — nel box ORARI nascondi il bottone
      quando gli orari sono visibili
   Nota: usa :has(), supportato dai browser moderni.
   =========================================================== */
#trio .extracted-style-23:has(#schedule-box:not(.schedule-box-hidden)) #button-box{
  display:none !important;
}

/* ===========================================================
   3) iPad verticale — testo degli ORARI più grande/leggibile
   =========================================================== */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
  #schedule-box p.extracted-style-30{
    font-size: clamp(1.05rem, 2.8vw, 1.5rem) !important;
    line-height: 1.6 !important;
  }
  #schedule-box .extracted-style-31{
    font-size: clamp(1.2rem, 3.4vw, 1.7rem) !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: .25em !important;
  }
  /* pulsante "Torna indietro" un filo più compatto per restare proporzionato */
  #schedule-box .button-link{
    font-size: clamp(.9rem, 1.2vw, 1rem) !important;
    padding: 10px 16px !important;
  }
}

/* ==========================================================
   4) Tutti i bottoni — CENTRA SEMPRE il TESTO nel bottone
   (non cambia la posizione del bottone nella card)
   =========================================================== */
.button-link{
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  white-space: normal !important; /* va a capo se serve */
}
/* se esistono varianti specifiche, uniformale */
.button-link.extracted-style-7,
.button-link.extracted-style-27{
  text-align: center !important;
}

/* (opzionale) Se su iPad orizzontale vuoi mantenere i bottoni compatti */
@media (min-width:768px) and (max-width:1024px) and (orientation:landscape){
  .button-link{
    padding: 8px 14px !important;
    font-size: clamp(.82rem, 1vw, .92rem) !important;
  }
}


/* --- Card del TRIO: dimensione fissa-adattiva + overlay orari --- */
@media (min-width:1025px){ /* desktop; puoi rimuovere il media se vuoi ovunque */
  #trio{ --card-h: clamp(220px, 20vw, 300px); }

  /* 1) card con altezza bloccata e contesto posizionato */
  #trio .extracted-style-23{
    height: var(--card-h) !important;
    position: relative !important;
  }

  /* 2) orari come OVERLAY assoluto che non altera il layout */
  #trio #schedule-box{
    position: absolute !important;
    inset: 0 !important;
    display: none !important;           /* base: nascosto */
    margin: 0 !important;
    padding: 0 16px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #trio #schedule-box:not(.schedule-box-hidden){
    display: flex !important;           /* visibile come layer */
  }

  /* 3) quando gli orari sono visibili, nascondi il resto SENZA collasso */
  #trio .extracted-style-23:has(#schedule-box:not(.schedule-box-hidden)) #clock-box,
  #trio .extracted-style-23:has(#schedule-box:not(.schedule-box-hidden)) #text-box,
  #trio .extracted-style-23:has(#schedule-box:not(.schedule-box-hidden)) #button-box{
    visibility: hidden !important;      /* niente display:none qui */
  }

  /* 4) assicurati che i tre box abbiano larghezze sempre uguali */
  #trio .extracted-style-2,
  #trio .extracted-style-12,
  #trio .extracted-style-22{
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }
}

/* la classe "nascosta" deve battere tutto */
.schedule-box-hidden{ display: none !important; }

/* iPad / tablet in orizzontale (1180px tipico iPad Air)  */
@media (orientation: landscape) and (min-width: 1024px) and (max-width: 1366px)
       and (hover: none) and (pointer: coarse) {

  /* BOTTONI rosa "Scopri di più" dentro al trio */
  #trio #button-box .button-link,
  #trio .extracted-style-26 .button-link {      /* backup sul wrapper del bottone */
    font-size: 0.78rem !important;
    padding: 4px 8px !important;
    line-height: 1.05 !important;
  }

  /* TESTI sotto l’icona: riga normale + titolino in grassetto */
  #trio #text-box p {
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
  }
  #trio #text-box p span {
    font-size: 0.9rem !important;   /* “Via… / E-Commerce / Orari di apertura” */
    font-weight: 700 !important;
  }

  /* stringo leggermente gli spazi verticali dei due blocchi */
  #trio #button-box { margin-top: 4px !important; }
  #trio #text-box   { margin-top: 4px !important; }
}
/* iPad / tablet orizzontale (es. iPad Air 10.9" ~1180px) */
@media only screen
  and (orientation: landscape)
  and (min-width: 1024px) and (max-width: 1366px)
  and (hover: none) and (pointer: coarse) {

  /* --- Bottoni "Scopri di più" (tutte e tre le card) --- */
  #trio .extracted-style-6  .button-link,  /* MAPPA */
  #trio .extracted-style-16 .button-link,  /* SHOP  */
  #trio .extracted-style-26 .button-link,  /* ORARI */
  #trio #button-box         .button-link { /* fallback terza card */
    font-size: 0.86rem !important;         /* leggermente piccolo ma leggibile */
    padding: 9px 16px !important;          /* più spazio interno, non esagerato */
    line-height: 1.1 !important;
    display: inline-block !important;
  }

  /* Alza i bottoni per portarli al livello dei testi */
  #trio .extracted-style-6,
  #trio .extracted-style-16,
  #trio .extracted-style-26,
  #trio #button-box {
    margin-top: 0 !important;
    transform: translateY(-28px);           /* alzati di ~6px */
  }

  /* --- Testi descrittivi --- */
  #trio .extracted-style-9  p,  /* MAPPA */
  #trio .extracted-style-19 p,  /* SHOP  */
  #trio .extracted-style-29 p,  /* ORARI */
  #trio #text-box          p {  /* fallback terza card */
    font-size: 0.7rem !important;         /* un poco più piccoli */
    line-height: 1.18 !important;
  }

  /* Titoletti in grassetto (Via…, E-Commerce, Orari di apertura) */
  #trio .extracted-style-9  p span,
  #trio .extracted-style-19 p span,
  #trio .extracted-style-29 p span,
  #trio #text-box          p span {
    font-size: 0.86rem !important;         /* leggermente più piccolo del default */
    font-weight: 700 !important;
  }
}