/* =================================================================
   HITO - LIVELLO RESPONSIVE
   -----------------------------------------------------------------
   Questo foglio si carica DOPO il CSS di pagina (vedi i <link> negli
   HTML di brand-hito): contiene solo media query, nessuna regola
   incondizionata. Il CSS desktop esistente non e' stato toccato.

   STRATEGIA - derivata da Cosmetic Center
   -----------------------------------------------------------------
   CC (css/pages/index.css, css/components/navbar.css) lavora cosi':

     >= 2560   "monitor 4K"        ingrandisce tipografia e componenti
     >= 1925   "monitor Full HD"   ingrandisce navbar, hero, titoli
     baseline  (>= 1400 su CC)     il frame di progetto, intoccabile
     <= 1310   laptop piccoli      tipografia in clamp(), nav compatta
     <= 1100   tablet grandi       hamburger, griglie che si impilano
     <=  800   tablet piccoli      colonne singole, hero a tutta larghezza
     <=  590   smartphone          riordino dei blocchi, corpi minimi
     <=  481   smartphone standard padding e max-width del testo stretti
     <=  340   smartphone piccoli  ultima messa a punto

   La LOGICA riusata qui e' questa, non i numeri (CC stesso usa valori
   diversi file per file): una baseline intoccabile al centro, due tier
   che INGRANDISCONO sopra, una scala che STRINGE sotto, e i container
   che diventano "max-width + margin auto" invece di allargarsi.

   HITO ha gia' la sua scala discendente, costruita sul frame Figma 1440
   e funzionante: 1199 / 991 / 767 / 575 / 419 su index, 1310 / 1100 /
   900 / 800 / 700 su brand, 1100 / 900 / 700 / 540 su training, 1200 /
   992 / 800 / 480 su contatti (ereditata dal componente di CC). Quei
   valori NON sono stati rinumerati: coprono gli stessi passaggi di CC e
   rinumerarli avrebbe cambiato la resa fra 1200 e 1310 senza risolvere
   nulla. Quello che mancava del tutto e' il resto:

     1. i tier sopra la baseline (nessuna regola oltre il frame 1440);
     2. le due hero con object-fit: fill, che deforma la foto appena il
        rapporto della fascia si allontana da quello nativo;
     3. l'ultimo gradino per gli smartphone piccoli (CC arriva a 340);
     4. il telefono in orizzontale, dove le hero sono piu' alte dello
        schermo.

   SOGLIA DEI TIER GRANDI
   -----------------------------------------------------------------
   Il primo tier parte da 1600px e non da 1536: 1536 e' la viewport di
   un 15" Windows a scala 125%, cioe' proprio la baseline da preservare.
   Da 1600 in su si e' sicuri di essere su un monitor esterno.

   ULTRAWIDE
   -----------------------------------------------------------------
   Niente breakpoint dedicato: le altezze delle fasce sono scritte come
   min(<px>, 88vh), cosi' su un 3440x1440 o 5120x1440 - dove lo schermo
   e' largo ma basso - la fascia non supera mai l'altezza utile.
================================================================== */

/* =================================================================
   RESPONSIVE
   Tutte le media query del file, raggruppate per soglia e in ordine
   decrescente. Dentro ogni blocco le regole sono nell'ordine in cui
   comparivano prima, cosi' la cascata resta identica.
================================================================== */

@media (min-width: 1600px) {
  /* =================================================================
  TIER A - MONITOR ESTERNI E DESKTOP STANDARD (>= 1600)
  Il contenuto smette di seguire la finestra e si incolonna dentro
  container centrati, come fa CC con .container-title / .custom-grid.
  ================================================================== */
  /* ---- NAVBAR (condivisa da tutte le pagine Hito) ---- */
  /* CC ingrandisce logo e voci di menu sui monitor grandi: qui serve
     anche perche' il lockup Hito affianca due loghi. */
  body .hito-navbar {
    height: 104px;
    padding: 0 56px;
    gap: 36px;
  }

  .hito-navbar .hito-logo-main {
    width: 262px !important;
  }

  .hito-navbar .hito-logo-cosmetic {
    width: 186px !important;
  }

  .hito-navbar .nav-links {
    gap: 64px;
  }

  .hito-navbar .nav-links a,
  .hito-navbar .nav-links .dropbtn {
    font-size: 19px;
    line-height: 27px;
  }

  .hito-navbar .lang-switch {
    font-size: 19px;
  }

  /* ---- HOME: hero ---- */
  /* La baseline tiene la foto in posizione con --hito-hero-zoom/shift e
     object-fit: fill. Oltre il frame 1440 quel fill stira la foto
     (1440x510) in orizzontale: si passa a cover, che taglia invece di
     deformare, e zoom/shift tornano neutri perche' non servono piu'. */
  .hito-hero {
    --hito-hero-zoom: 100%;
    --hito-hero-shift: 0%;
    min-height: min(clamp(720px, 40vw, 820px), 88vh);
  }

  .hito-hero-media img,
  .hito-hero-media video {
    object-fit: cover;
    object-position: center;
  }

  /* Il blocco resta ancorato a destra come nel Figma, ma il margine
     cresce con la finestra invece di restare fermo a 66px */
  .hito-hero-content {
    padding-right: clamp(66px, 4.58vw, 120px);
    padding-bottom: clamp(56px, 3.9vw, 88px);
  }

  .hito-hero-logo {
    width: clamp(243px, 17vw, 300px);
  }

  .hito-hero-title {
    max-width: 900px;
    font-size: clamp(48px, 3.33vw, 58px);
  }

  .hito-hero-cta {
    min-width: 230px;
    height: 62px;
    font-size: 18px;
  }

  /* ---- HOME: benvenuto ---- */
  .hito-welcome {
    gap: 44px;
    padding: clamp(120px, 7vw, 170px) 10vw !important;
  }

  .hito-welcome-line {
    height: 130px;
  }

  .hito-welcome-text h2 {
    font-size: clamp(36px, 2.5vw, 44px);
    line-height: 1.17;
  }

  .hito-welcome-text p {
    font-size: clamp(24px, 1.7vw, 28px);
    line-height: 1.2;
  }

  /* ---- HOME: la linea completa ---- */
  .hito-family img {
    width: min(1200px, 100%);
  }

  .hito-family-claim {
    max-width: 1000px;
    font-size: clamp(24px, 1.7vw, 28px);
    line-height: 1.2;
  }

  /* ---- HOME: prodotti ---- */
  /* La colonna di contenuto e' 1264px nel Figma: qui si allarga di un
     passo, non si libera. Il bottone catalogo deve seguire la stessa
     misura, altrimenti perde l'allineamento con la prima scheda. */
  .hito-products {
    scroll-margin-top: 118px;
  }

  .hito-products-tabs,
  .hito-products-grid {
    width: min(1400px, 100%);
  }

  .hito-products-tabs {
    font-size: 22px;
    line-height: 26px;
  }

  .hito-products-catalog {
    width: 248px;
    height: 62px;
    margin-left: max(0px, calc((100% - 1400px) / 2));
    font-size: 18px;
  }

  .hito-product-card h3 {
    font-size: 16px;
    line-height: 19px;
  }

  .hito-product-card p {
    font-size: 15px;
  }

  /* Alla larghezza di scheda di questo tier i 226px fissi del Figma
     lasciano mezza scheda vuota sotto il testo */
  .hito-product-link {
    width: 100%;
    height: 43px;
  }

  /* ---- HOME: man, naturally ---- */
  .hito-concept {
    min-height: min(clamp(702px, 42vw, 820px), 88vh);
  }

  .hito-concept-content {
    width: min(1560px, 100%);
  }

  .hito-concept-content h2 {
    font-size: clamp(36px, 2.5vw, 42px);
    line-height: 1.2;
  }

  .hito-concept-content p {
    max-width: 620px;
    font-size: clamp(24px, 1.7vw, 28px);
    line-height: 1.45;
  }

  .hito-concept-btn {
    min-width: 160px;
    height: 62px;
    font-size: 18px;
  }

  /* ---- HOME: academy ---- */
  /* L'unica sezione senza alcun tetto: con padding 10vw e due colonne in
     fr, su un monitor esterno il testo e il collage di foto finivano agli
     antipodi. Qui diventa un container centrato come le altre. */
  .hito-academy {
    width: min(1264px, calc(100% - 96px));
    margin-inline: auto;
    gap: 64px;
    padding: 110px 0 124px;
  }

  .hito-academy-content {
    max-width: 680px;
  }

  .hito-academy-heading {
    margin-left: -48px;
  }

  .hito-academy-kicker {
    font-size: clamp(48px, 3.3vw, 56px);
    line-height: 1.19;
    /* Il 20% della baseline si risolve sulla larghezza del contenitore:
       allargandolo il titolo scendeva sempre piu'. Qui e' in px. */
    margin-top: 110px;
  }

  .hito-academy-content h2 {
    font-size: 22px !important;
    line-height: 1.5;
  }

  .hito-academy-content p {
    max-width: 640px;
    font-size: 20px;
    line-height: 1.5;
    /* stesso motivo del kicker: il -25% cresceva con il container e il
       paragrafo sarebbe finito sopra il titolo */
    margin-top: -130px;
  }

  .hito-academy .hito-btn-secondary {
    min-width: 186px;
    height: 62px;
    font-size: 18px;
  }

  .hito-academy-media {
    --hito-academy-img: 380px;
    min-height: 820px;
    padding-left: 130px;
  }

  .hito-academy-image-primary {
    width: var(--hito-academy-img);
  }

  .hito-academy-image-secondary {
    width: calc(var(--hito-academy-img) - 30px);
  }

  .hito-academy-vertical-wrap {
    right: calc(var(--hito-academy-img) + 48px);
  }

  .hito-academy-vertical {
    font-size: 24px;
  }

  .hito-academy-line {
    height: clamp(278px, 20vw, 320px);
  }

  /* ---- HOME: quick view ---- */
  .hito-view-dialog {
    grid-template-columns: 560px minmax(0, 1fr);
    width: min(1120px, 100%);
    height: min(720px, 100%);
  }

  /* ---- BRAND ---- */
  .hito-brand-main {
    padding-top: 104px;
  }

  .hito-brand-intro {
    width: min(1560px, calc(100% - 64px));
  }

  .hito-brand-principles {
    width: min(1560px, calc(100% - 64px));
  }

  .hito-brand-commitment {
    width: min(1560px, 100%);
  }

  .hito-brand-page .hito-brand-claim-text {
    max-width: 1300px;
  }

  /* ---- TRAINING ---- */
  /* La hero ha width: min(1440px, 100%) e margin: 0 auto, ma subito dopo
     un margin-left: 3% che annulla il centraggio: su un monitor esterno
     il testo restava appeso al bordo sinistro. */
  .hito-training-hero-content {
    width: min(1560px, 100%);
    margin-left: auto;
    margin-right: auto;
  }

  .hito-training-hero {
    min-height: min(clamp(821px, 44vw, 900px), 92vh);
  }

  .hito-training-hero-media img {
    object-fit: cover;
    object-position: center;
  }

  .hito-training-paths,
  .hito-training-how {
    width: min(1560px, calc(100% - 64px));
  }

  .hito-training-course {
    width: min(1480px, calc(100% - 48px));
  }

  .hito-training-method {
    min-height: min(clamp(662px, 46vw, 780px), 88vh);
  }

  .hito-training-method-copy {
    width: min(1560px, 100%);
  }

  /* ---- CONTATTI ---- */
  /* Il componente condiviso usa width: 85% senza tetto: oltre i 1600px
     la card diventava una fascia. */
  body.hito-contacts-page .contact-content-card {
    max-width: 1600px;
  }

  /* ---- MANUTENZIONE ---- */
  .hito-maintenance-main {
    padding-top: 150px;
  }

  .hito-maintenance-card {
    width: min(900px, 100%);
  }
}

@media (min-width: 1925px) {
  /* =================================================================
  TIER B - MONITOR FULL HD E OLTRE (>= 1925)
  Corrisponde al blocco "monitor Full HD" di CC: stessa logica, cioe'
  la composizione resta quella ma corpi e componenti crescono perche'
  il testo non risulti minuscolo a distanza di visione da scrivania.
  ================================================================== */
  /* ---- NAVBAR ---- */
  body .hito-navbar {
    height: 124px;
    padding: 0 72px;
    gap: 44px;
  }

  .hito-navbar .hito-logo-main {
    width: 320px !important;
  }

  .hito-navbar .hito-logo-cosmetic {
    width: 226px !important;
  }

  .hito-navbar .nav-links {
    gap: 80px;
  }

  .hito-navbar .nav-links a,
  .hito-navbar .nav-links .dropbtn {
    font-size: 23px;
    line-height: 32px;
  }

  .hito-navbar .lang-switch {
    font-size: 23px;
  }

  /* ---- HOME: hero ---- */
  .hito-hero {
    min-height: min(clamp(820px, 38vw, 980px), 88vh);
  }

  .hito-hero-content {
    padding-right: clamp(120px, 4.58vw, 150px);
    padding-bottom: clamp(88px, 3.9vw, 110px);
  }

  .hito-hero-logo {
    width: clamp(300px, 17vw, 360px);
  }

  .hito-hero-title {
    max-width: 1080px;
    font-size: clamp(58px, 3.33vw, 68px);
  }

  .hito-hero-cta {
    min-width: 270px;
    height: 70px;
    font-size: 21px;
  }

  /* ---- HOME: benvenuto ---- */
  .hito-welcome {
    gap: 56px;
  }

  .hito-welcome-line {
    height: 150px;
  }

  .hito-welcome-text h2 {
    font-size: clamp(44px, 2.5vw, 52px);
  }

  .hito-welcome-text p {
    font-size: clamp(28px, 1.7vw, 33px);
  }

  /* ---- HOME: la linea completa ---- */
  .hito-family img {
    width: min(1400px, 100%);
  }

  .hito-family-claim {
    max-width: 1150px;
    font-size: clamp(28px, 1.7vw, 33px);
  }

  /* ---- HOME: prodotti ---- */
  .hito-products {
    scroll-margin-top: 140px;
  }

  .hito-products-tabs,
  .hito-products-grid {
    width: min(1680px, 100%);
  }

  .hito-products-tabs {
    font-size: 26px;
    line-height: 30px;
  }

  .hito-products-tabs button.is-active::after {
    width: 124px;
  }

  .hito-products-catalog {
    width: 280px;
    height: 66px;
    margin-left: max(0px, calc((100% - 1680px) / 2));
    font-size: 19px;
  }

  .hito-product-badge {
    font-size: 15px;
    line-height: 19px;
  }

  .hito-product-card h3 {
    font-size: 18px;
    line-height: 21px;
  }

  .hito-product-card p {
    font-size: 17px;
  }

  .hito-product-link {
    height: 48px;
    font-size: 15px;
  }

  /* ---- HOME: man, naturally ---- */
  .hito-concept {
    min-height: min(clamp(820px, 40vw, 1100px), 88vh);
  }

  .hito-concept-content {
    width: min(1760px, 100%);
  }

  .hito-concept-content h2 {
    font-size: clamp(42px, 2.5vw, 48px);
  }

  .hito-concept-content p {
    max-width: 720px;
    font-size: clamp(28px, 1.7vw, 33px);
  }

  .hito-concept-btn {
    min-width: 180px;
    height: 70px;
    font-size: 21px;
  }

  /* ---- HOME: academy ---- */
  .hito-academy {
    width: min(1500px, calc(100% - 120px));
    gap: 80px;
    padding: 130px 0 150px;
  }

  .hito-academy-content {
    max-width: 780px;
  }

  .hito-academy-kicker {
    font-size: clamp(56px, 3.3vw, 64px);
    margin-top: 130px;
  }

  .hito-academy-content h2 {
    font-size: 26px !important;
  }

  .hito-academy-content p {
    max-width: 740px;
    font-size: 23px;
    margin-top: -150px;
  }

  .hito-academy .hito-btn-secondary {
    min-width: 210px;
    height: 70px;
    font-size: 21px;
  }

  /* min-height: la scritta verticale cresce con il corpo e la foto in
     basso sale con il bottom in %. A 960px le due si sfioravano: 1020
     riporta lo stacco a una ventina di pixel, come nella baseline. */
  .hito-academy-media {
    --hito-academy-img: 460px;
    min-height: 1020px;
    padding-left: 160px;
  }

  .hito-academy-vertical {
    font-size: 28px;
  }

  .hito-academy-line {
    height: clamp(320px, 20vw, 380px);
  }

  /* ---- HOME: quick view ---- */
  .hito-view-dialog {
    grid-template-columns: 640px minmax(0, 1fr);
    width: min(1280px, 100%);
    height: min(820px, 100%);
  }

  .hito-view-dialog h2 {
    font-size: 30px;
    line-height: 35px;
  }

  .hito-view-text {
    font-size: 17px;
    line-height: 20px;
  }

  .hito-view-format {
    font-size: 24px;
    line-height: 28px;
  }

  .hito-view-download {
    font-size: 17px;
  }

  /* ---- BRAND ---- */
  .hito-brand-main {
    padding-top: 124px;
  }

  .hito-brand-intro,
  .hito-brand-principles {
    width: min(1760px, calc(100% - 96px));
  }

  .hito-brand-commitment {
    width: min(1760px, 100%);
  }

  .hito-brand-page .hito-brand-eyebrow {
    font-size: 19px;
    line-height: 22px;
  }

  .hito-brand-page .hito-brand-intro-copy h1 {
    max-width: 760px;
    font-size: clamp(36px, 2.5vw, 44px);
    line-height: 1.17;
  }

  .hito-brand-page .hito-brand-lead {
    max-width: 800px;
    font-size: clamp(32px, 2.2vw, 38px);
    line-height: 1.2;
  }

  .hito-brand-page .hito-brand-text,
  .hito-brand-page .hito-brand-worlds-copy p:not(.hito-brand-eyebrow),
  .hito-brand-page .hito-brand-split-half p,
  .hito-brand-page .hito-brand-principle p {
    font-size: clamp(17.25px, 1.2vw, 21px);
    line-height: 1.45;
  }

  .hito-brand-page .hito-brand-text {
    max-width: 820px;
  }

  .hito-brand-page .hito-brand-principle p {
    max-width: 420px;
  }

  .hito-brand-page .hito-brand-principle h3 {
    max-width: 380px;
    font-size: 19px;
    line-height: 22px;
  }

  .hito-brand-page .hito-brand-worlds-copy h2,
  .hito-brand-page .hito-brand-commitment-copy h2 {
    font-size: clamp(24px, 1.7vw, 30px);
    line-height: 1.33;
  }

  .hito-brand-page .hito-brand-commitment-copy p:not(.hito-brand-eyebrow) {
    max-width: 560px;
    font-size: clamp(16px, 1.1vw, 19px);
  }

  .hito-brand-page .hito-brand-claim-text {
    max-width: 1500px;
    font-size: clamp(36px, 2.5vw, 44px);
    line-height: 1.28;
  }

  /* ---- TRAINING ---- */
  .hito-training-hero {
    min-height: min(clamp(900px, 42vw, 1000px), 92vh);
  }

  .hito-training-hero-content {
    width: min(1760px, 100%);
  }

  .hito-training-page .hito-training-hero-content h1 {
    max-width: 1100px;
    font-size: clamp(24px, 1.7vw, 30px);
    line-height: 1.35;
  }

  .hito-training-page .hito-training-hero-text {
    max-width: 1140px;
    font-size: clamp(24px, 1.7vw, 30px);
    line-height: 1.35;
  }

  .hito-training-paths,
  .hito-training-how {
    width: min(1760px, calc(100% - 96px));
  }

  .hito-training-course {
    width: min(1680px, calc(100% - 96px));
  }

  .hito-training-method {
    min-height: min(clamp(780px, 46vw, 900px), 88vh);
  }

  .hito-training-method-copy {
    width: min(1760px, 100%);
  }

  .hito-training-page .hito-training-eyebrow {
    font-size: 19px;
    line-height: 22px;
  }

  .hito-training-page .hito-training-paths-header h2,
  .hito-training-page .hito-training-method-copy h2 {
    max-width: 1000px;
    font-size: clamp(24px, 1.7vw, 30px);
    line-height: 1.33;
  }

  .hito-training-page .hito-training-method-copy p,
  .hito-training-page .hito-training-how-item p,
  .hito-training-page .hito-training-cta p {
    font-size: clamp(17.25px, 1.2vw, 21px);
    line-height: 1.45;
  }

  .hito-training-page .hito-training-method-copy p {
    max-width: 800px;
  }

  .hito-training-page .hito-training-how-item h3 {
    max-width: 380px;
    font-size: 19px;
    line-height: 22px;
  }

  .hito-training-page .hito-training-how-item p {
    max-width: 380px;
  }

  .hito-training-page .hito-training-course-copy h2 {
    font-size: clamp(20px, 1.4vw, 25px);
    line-height: 1.35;
  }

  .hito-training-page .hito-training-course-copy p {
    font-size: 18px;
    line-height: 1.6;
  }

  .hito-training-page .hito-training-meta li span:last-child,
  .hito-training-page .hito-training-meta li strong {
    font-size: 17px;
    line-height: 24px;
  }

  .hito-training-page .hito-training-cta h2 {
    max-width: 1500px;
    font-size: clamp(36px, 2.5vw, 44px);
    line-height: 1.28;
  }

  .hito-training-page .hito-training-cta p {
    max-width: 1200px;
  }

  /* I tre bottoni a riquadro del Figma: stessa proporzione, corpo maggiore */
  .hito-training-page .hito-training-hero-btn,
  .hito-training-page .hito-training-paths-btn,
  .hito-training-page .hito-training-cta-btn,
  .hito-brand-page .hito-brand-outline-btn {
    height: 60px;
    font-size: 21px;
  }

  .hito-brand-page .hito-brand-filled-btn {
    width: 260px;
    height: 58px;
    font-size: 17px;
  }

  /* ---- CONTATTI ---- */
  body.hito-contacts-page .contact-content-card {
    max-width: 1800px;
  }

  /* ---- MANUTENZIONE ---- */
  .hito-maintenance-card {
    width: min(1050px, 100%);
  }

  .hito-maintenance-card h1 {
    font-size: clamp(50px, 4vw, 64px);
  }

  .hito-maintenance-copy {
    font-size: clamp(18px, 1.4vw, 22px);
  }
}

@media (min-width: 2560px) {
  /* =================================================================
  TIER C - 4K, 5K E ULTRAWIDE (>= 2560)
  CC chiude il suo blocco 4K a 4096px: qui il tier resta aperto, cosi'
  un 5K o un ultrawide da 5120px non ricade nella baseline da 1440.
  ================================================================== */
  /* ---- NAVBAR ---- */
  body .hito-navbar {
    height: 160px;
    padding: 0 96px;
    gap: 56px;
  }

  .hito-navbar .hito-logo-main {
    width: 420px !important;
  }

  .hito-navbar .hito-logo-cosmetic {
    width: 300px !important;
  }

  .hito-navbar .nav-links {
    gap: 110px;
  }

  .hito-navbar .nav-links a,
  .hito-navbar .nav-links .dropbtn {
    font-size: 30px;
    line-height: 42px;
  }

  .hito-navbar .lang-switch {
    font-size: 30px;
    gap: 12px;
  }

  /* ---- HOME: hero ---- */
  .hito-hero {
    min-height: min(clamp(980px, 34vw, 1200px), 88vh);
  }

  .hito-hero-content {
    padding-right: clamp(150px, 4.58vw, 200px);
    padding-bottom: clamp(110px, 3.9vw, 140px);
  }

  .hito-hero-logo {
    width: clamp(360px, 15vw, 460px);
  }

  .hito-hero-title {
    max-width: 1500px;
    font-size: clamp(68px, 3vw, 88px);
  }

  .hito-hero-cta {
    min-width: 340px;
    height: 88px;
    font-size: 26px;
  }

  /* ---- HOME: benvenuto ---- */
  .hito-welcome {
    gap: 72px;
  }

  .hito-welcome-line {
    width: 4px;
    height: 190px;
  }

  .hito-welcome-text h2 {
    font-size: clamp(52px, 2.3vw, 68px);
  }

  .hito-welcome-text p {
    font-size: clamp(33px, 1.6vw, 42px);
  }

  /* ---- HOME: la linea completa ---- */
  .hito-family img {
    width: min(1800px, 100%);
  }

  .hito-family-claim {
    max-width: 1500px;
    font-size: clamp(33px, 1.6vw, 42px);
  }

  /* ---- HOME: prodotti ---- */
  .hito-products {
    scroll-margin-top: 180px;
  }

  .hito-products-tabs,
  .hito-products-grid {
    width: min(2200px, 100%);
  }

  .hito-products-tabs {
    font-size: 32px;
    line-height: 37px;
  }

  .hito-products-tabs button.is-active::after {
    width: 160px;
  }

  .hito-products-catalog {
    width: 340px;
    height: 80px;
    margin-left: max(0px, calc((100% - 2200px) / 2));
    font-size: 24px;
  }

  .hito-product-badge {
    font-size: 18px;
    line-height: 22px;
    padding: 9px 16px;
  }

  .hito-product-card h3 {
    font-size: 22px;
    line-height: 26px;
  }

  .hito-product-card p {
    font-size: 21px;
  }

  .hito-product-link {
    height: 58px;
    font-size: 18px;
  }

  .hito-product-link span {
    width: 44px;
  }

  /* ---- HOME: man, naturally ---- */
  .hito-concept {
    min-height: min(clamp(1100px, 36vw, 1400px), 88vh);
  }

  .hito-concept-content {
    width: min(2200px, 100%);
  }

  .hito-concept-content h2 {
    font-size: clamp(48px, 2.3vw, 62px);
  }

  .hito-concept-content p {
    max-width: 900px;
    font-size: clamp(33px, 1.6vw, 42px);
  }

  .hito-concept-btn {
    min-width: 230px;
    height: 88px;
    font-size: 26px;
  }

  /* ---- HOME: academy ---- */
  .hito-academy {
    width: min(1900px, calc(100% - 160px));
    gap: 110px;
    padding: 170px 0 190px;
  }

  .hito-academy-content {
    max-width: 1000px;
  }

  .hito-academy-heading {
    margin-left: -64px;
    gap: 56px;
  }

  .hito-academy-kicker {
    font-size: clamp(64px, 3vw, 82px);
    margin-top: 170px;
  }

  .hito-academy-content h2 {
    font-size: 34px !important;
  }

  .hito-academy-content p {
    max-width: 950px;
    font-size: 29px;
    margin-top: -200px;
  }

  .hito-academy .hito-btn-secondary {
    min-width: 280px;
    height: 88px;
    font-size: 26px;
  }

  /* stesso motivo del tier precedente: a 36px la scritta verticale e'
     alta oltre 400px e la foto bassa va allontanata */
  .hito-academy-media {
    --hito-academy-img: 600px;
    min-height: 1320px;
    padding-left: 210px;
  }

  .hito-academy-vertical {
    font-size: 36px;
  }

  .hito-academy-line {
    width: 4px;
    height: clamp(380px, 20vw, 460px);
  }

  /* ---- HOME: quick view ---- */
  .hito-view-dialog {
    grid-template-columns: 820px minmax(0, 1fr);
    width: min(1680px, 100%);
    height: min(1040px, 100%);
  }

  .hito-view-body {
    padding: 70px 34px 40px 70px;
  }

  .hito-view-dialog h2 {
    font-size: 38px;
    line-height: 44px;
  }

  .hito-view-text {
    font-size: 21px;
    line-height: 26px;
  }

  .hito-view-format {
    font-size: 30px;
    line-height: 35px;
  }

  .hito-view-download {
    font-size: 21px;
  }

  .hito-view-close {
    width: 44px;
    height: 44px;
    font-size: 36px;
  }

  /* ---- BRAND ---- */
  .hito-brand-main {
    padding-top: 160px;
  }

  .hito-brand-intro,
  .hito-brand-principles {
    width: min(2200px, calc(100% - 128px));
  }

  .hito-brand-commitment {
    width: min(2200px, 100%);
  }

  .hito-brand-page .hito-brand-eyebrow {
    font-size: 24px;
    line-height: 28px;
  }

  .hito-brand-page .hito-brand-intro-copy h1 {
    max-width: 980px;
    font-size: clamp(44px, 2.3vw, 56px);
  }

  .hito-brand-page .hito-brand-lead {
    max-width: 1020px;
    font-size: clamp(38px, 2vw, 48px);
  }

  .hito-brand-page .hito-brand-text,
  .hito-brand-page .hito-brand-worlds-copy p:not(.hito-brand-eyebrow),
  .hito-brand-page .hito-brand-split-half p,
  .hito-brand-page .hito-brand-principle p {
    font-size: clamp(21px, 1.1vw, 26px);
  }

  .hito-brand-page .hito-brand-text {
    max-width: 1040px;
  }

  .hito-brand-page .hito-brand-split-half p {
    max-width: 420px;
  }

  .hito-brand-page .hito-brand-principle p {
    max-width: 530px;
  }

  .hito-brand-page .hito-brand-principle h3 {
    max-width: 480px;
    font-size: 24px;
    line-height: 28px;
  }

  .hito-brand-principle-icon,
  .hito-brand-principle-icon--wide {
    height: 86px;
  }

  .hito-brand-page .hito-brand-worlds-copy h2,
  .hito-brand-page .hito-brand-commitment-copy h2 {
    max-width: 880px;
    font-size: clamp(30px, 1.6vw, 38px);
  }

  .hito-brand-page .hito-brand-commitment-copy p:not(.hito-brand-eyebrow) {
    max-width: 720px;
    font-size: clamp(19px, 1vw, 24px);
  }

  .hito-brand-page .hito-brand-claim-text {
    max-width: 1900px;
    font-size: clamp(44px, 2.3vw, 56px);
  }

  .hito-brand-page .hito-brand-claim-caption {
    font-size: 22px;
    line-height: 26px;
  }

  .hito-brand-page .hito-brand-collage-item figcaption {
    width: 240px;
    height: 58px;
    font-size: clamp(20px, 1.2vw, 26px);
  }

  .hito-brand-line {
    width: 120px;
  }

  /* ---- TRAINING ---- */
  .hito-training-hero {
    min-height: min(clamp(1000px, 36vw, 1300px), 92vh);
  }

  .hito-training-hero-content {
    width: min(2200px, 100%);
  }

  .hito-training-page .hito-training-hero-content h1,
  .hito-training-page .hito-training-hero-text {
    max-width: 1440px;
    font-size: clamp(30px, 1.6vw, 38px);
  }

  .hito-training-paths,
  .hito-training-how {
    width: min(2200px, calc(100% - 128px));
  }

  .hito-training-course {
    width: min(2100px, calc(100% - 128px));
  }

  .hito-training-method {
    min-height: min(clamp(900px, 42vw, 1100px), 88vh);
  }

  .hito-training-method-copy {
    width: min(2200px, 100%);
  }

  .hito-training-page .hito-training-eyebrow {
    font-size: 24px;
    line-height: 28px;
  }

  .hito-training-page .hito-training-paths-header h2,
  .hito-training-page .hito-training-method-copy h2 {
    max-width: 1300px;
    font-size: clamp(30px, 1.6vw, 38px);
  }

  .hito-training-page .hito-training-method-copy p,
  .hito-training-page .hito-training-how-item p,
  .hito-training-page .hito-training-cta p {
    font-size: clamp(21px, 1.1vw, 26px);
  }

  .hito-training-page .hito-training-method-copy p {
    max-width: 1040px;
  }

  .hito-training-page .hito-training-how-item h3 {
    max-width: 480px;
    font-size: 24px;
    line-height: 28px;
  }

  .hito-training-page .hito-training-how-item p {
    max-width: 500px;
  }

  .hito-training-how-icon {
    width: 164px;
    height: 164px;
  }

  .hito-training-how-icon img {
    max-width: 86px;
    max-height: 86px;
  }

  .hito-training-page .hito-training-card-label {
    font-size: clamp(20px, 1.2vw, 28px);
    line-height: 1.2;
  }

  .hito-training-page .hito-training-card-text {
    font-size: clamp(16px, 0.95vw, 22px);
    line-height: 1.4;
  }

  .hito-training-page .hito-training-course-copy h2 {
    font-size: clamp(25px, 1.3vw, 32px);
  }

  .hito-training-page .hito-training-course-copy p {
    font-size: 23px;
  }

  .hito-training-meta-icon {
    width: 76px;
    height: 76px;
  }

  .hito-training-page .hito-training-meta li span:last-child,
  .hito-training-page .hito-training-meta li strong {
    font-size: 22px;
    line-height: 30px;
  }

  .hito-training-page .hito-training-course-link {
    font-size: 19px;
  }

  .hito-training-page .hito-training-cta h2 {
    max-width: 1900px;
    font-size: clamp(44px, 2.3vw, 56px);
  }

  .hito-training-page .hito-training-cta p {
    max-width: 1500px;
  }

  .hito-training-line {
    width: 120px;
  }

  .hito-training-page .hito-training-hero-btn,
  .hito-training-page .hito-training-paths-btn,
  .hito-training-page .hito-training-cta-btn,
  .hito-brand-page .hito-brand-outline-btn {
    width: 380px;
    height: 76px;
    font-size: 26px;
  }

  .hito-brand-page .hito-brand-filled-btn {
    width: 320px;
    height: 76px;
    font-size: 22px;
  }

  /* ---- CONTATTI ---- */
  body.hito-contacts-page .contact-content-card {
    max-width: 2300px;
  }

  body.hito-contacts-page .contact-left p {
    max-width: 760px;
    font-size: clamp(20px, 1.1vw, 26px);
    line-height: 1.3;
  }

  body.hito-contacts-page .value {
    font-size: clamp(20px, 1.1vw, 26px);
    line-height: 1.3;
  }

  body.hito-contacts-page .label {
    font-size: clamp(16px, 0.9vw, 21px);
    line-height: 1.3;
  }

  body.hito-contacts-page .submit-btn {
    min-width: 280px;
    min-height: 76px;
    font-size: 22px;
  }

  /* ---- MANUTENZIONE ---- */
  .hito-maintenance-main {
    padding-top: 220px;
  }

  .hito-maintenance-card {
    width: min(1300px, 100%);
  }

  .hito-maintenance-card h1 {
    font-size: clamp(64px, 3.4vw, 86px);
  }

  .hito-maintenance-copy {
    font-size: clamp(22px, 1.2vw, 28px);
  }

  .hito-maintenance-btn {
    min-width: 260px;
    padding: 20px 30px;
    font-size: 19px;
  }
}

@media (max-width: 1199px) {
  /* =================================================================
  HERO - IMMAGINI SOTTO LA BANDA BASELINE (<= 1199)
  Le due hero usano object-fit: fill. Dentro il frame di progetto
  (1200-1599) e' una scelta voluta e resta com'e': la foto e' larga
  quanto il frame e lo stiramento verticale e' quello previsto dalle
  manopole --hito-hero-zoom / --hito-hero-shift.
  Sotto, pero', la fascia diventa quasi quadrata (390x500 su uno
  smartphone contro una foto 1440x510) e fill schiaccia il viso in
  modo evidente. Dalla soglia tablet in giu' si passa a cover, che
  ritaglia mantenendo le proporzioni, con il fuoco al centro: e' li'
  che stanno il rasoio e il viso.
  ================================================================== */
  .hito-hero {
    --hito-hero-zoom: 100%;
    --hito-hero-shift: 0%;
  }

  .hito-hero-media img,
  .hito-hero-media video {
    object-fit: cover;
    object-position: center;
  }

  .hito-training-hero-media img {
    object-fit: cover;
    object-position: center;
  }
}

@media (max-width: 575px) {
  /* Il 35% del punto di fuoco gia' previsto a 419px vale da qui in giu':
  piu' la fascia si stringe, piu' il viso scivola fuori quadro a destra */
  .hito-hero-media img {
    object-position: 42% center;
  }

  .hito-training-hero-media img {
    object-position: 55% center;
  }
}

@media (max-width: 340px) {
  /* =================================================================
  SMARTPHONE PICCOLI (<= 340)
  Ultimo gradino della scala di CC, che in Hito mancava: index si
  fermava a 419, brand a 700, training a 540.
  ================================================================== */
  /* ---- HOME ---- */
  .hito-hero-content {
    padding: 0 14px 24px;
  }

  .hito-hero-title {
    font-size: 21px;
    line-height: 1.15;
    text-wrap: balance;
  }

  .hito-hero-cta {
    min-width: 0;
    width: 100%;
    height: 50px;
    font-size: 14px;
  }

  .hito-welcome {
    padding: 40px 14px !important;
  }

  .hito-welcome-text h2 {
    font-size: 24px;
    line-height: 1.2;
    text-wrap: balance;
  }

  .hito-welcome-text p {
    font-size: 15px;
    line-height: 1.35;
  }

  .hito-family {
    padding: 0 14px 48px;
  }

  .hito-family-claim {
    font-size: 15px;
    line-height: 1.4;
  }

  .hito-products {
    padding: 40px 14px 80px;
  }

  .hito-products-tabs {
    gap: 8px 10px;
    font-size: 12px;
  }

  .hito-products-catalog {
    width: 100%;
    height: 50px;
    font-size: 14px;
  }

  .hito-academy {
    padding: 56px 14px 64px;
  }

  .hito-academy-kicker {
    font-size: 34px;
    line-height: 1.15;
  }

  .hito-academy-content p {
    font-size: 14px;
  }

  .hito-view {
    padding: 10px;
  }

  .hito-view-body {
    padding: 22px 16px 20px;
  }

  /* ---- BRAND ---- */
  /* Il collage 2x2 non regge sotto i 340: le targhette da 140px sono
     piu' larghe della colonna stretta e il testo veniva tagliato. */
  .hito-brand-collage-row:first-child,
  .hito-brand-collage-row:last-child {
    grid-template-columns: 1fr;
  }

  .hito-brand-collage-row:first-child .hito-brand-collage-item,
  .hito-brand-collage-row:first-child .hito-brand-collage-item--fullbody,
  .hito-brand-collage-row:last-child .hito-brand-collage-item,
  .hito-brand-collage-row:last-child .hito-brand-collage-item--capelli {
    aspect-ratio: 16 / 11;
  }

  .hito-brand-page .hito-brand-collage-item figcaption {
    width: 150px;
    height: 36px;
    font-size: 14px;
  }

  .hito-brand-page .hito-brand-intro-copy h1,
  .hito-brand-page .hito-brand-lead {
    text-wrap: balance;
  }

  .hito-brand-split-content {
    padding: 20px 16px;
  }

  .hito-brand-claim {
    padding: 56px 16px 96px;
  }

  /* ---- TRAINING ---- */
  .hito-training-hero-content {
    margin-left: 0;
    padding-left: 16px;
    padding-right: 16px;
  }

  .hito-training-page .hito-training-hero-content h1,
  .hito-training-page .hito-training-hero-text {
    line-height: 1.35;
    text-wrap: pretty;
  }

  .hito-training-how-icon {
    width: 84px;
    height: 84px;
  }

  .hito-training-how-icon img {
    max-width: 44px;
    max-height: 44px;
  }

  .hito-training-cta {
    padding: 28px 16px 30px;
  }
}

@media (max-height: 540px) and (orientation: landscape) {
  /* =================================================================
  SMARTPHONE IN ORIZZONTALE (schermo basso)
  Non e' un breakpoint di larghezza in piu': e' il caso che la scala
  per larghezza non puo' vedere. Con 390px di altezza utile una hero
  da 550px (home) o 680px (training) occupa una schermata e mezza e
  il pulsante resta sempre sotto la piega.
  ================================================================== */
  .hito-hero {
    min-height: 92vh;
  }

  .hito-hero-content {
    padding-bottom: 20px;
  }

  .hito-hero-logo {
    width: clamp(120px, 14vw, 180px);
  }

  .hito-hero-title {
    margin-top: 10px;
    font-size: clamp(18px, 2.4vw, 24px);
  }

  .hito-hero-cta {
    height: 44px;
    margin-top: 14px;
    font-size: 14px;
  }

  .hito-training-hero {
    min-height: 100vh;
  }

  .hito-training-hero-content {
    padding-top: clamp(70px, 12vh, 120px);
    padding-bottom: 24px;
  }

  .hito-concept {
    min-height: 92vh;
  }

  /* Il pannello di navigazione mobile vive dentro la finestra: su uno
     schermo basso deve scorrere, non sforare */
  .hito-navbar .nav-links {
    padding-top: 16px;
    padding-bottom: 16px;
    gap: 10px;
  }

  .hito-navbar .nav-links a,
  .hito-navbar .nav-links .dropbtn {
    padding: 8px 0;
  }
}