/*
 Theme Name:   Voldor Child
 Description:  Tema Child per Voldor
 Template:     voldor
 Author:       Il tuo nome
 Text Domain:  voldor-child
*/

/* ═══════════════════════════════════════════════════════
   CAT — DESIGN TOKENS (root globale)
   Cardan and Transmission S.r.l.
   ═══════════════════════════════════════════════════════ */

:root {

  /* --- COLORI BRAND --- */
  --cat-green:          #198754;
  --cat-green-rgb:      25, 135, 84; /* Aggiunto */
  --cat-green-dark:     #146c43;
  --cat-green-light:    #f4f7f5;
  --cat-green-border:   #e8ede9;

  --cat-black:          #1a1618;
  --cat-black-rgb:      26, 22, 24; /* Aggiunto */
  --cat-white:          #ffffff;
  --cat-white-rgb:      255, 255, 255; /* Aggiunto */

  --cat-gray-100:       #f8f9fa;
  --cat-gray-200:       #e0e4e7;
  --cat-gray-400:       #6c757d;
  --cat-gray-600:       #495057;
  --cat-gray-800:       #333333;

  /* Colori personalizzati per valori hardcoded non direttamente mappati */
  --cat-text-color-body:    #555;    /* Aggiunto: per il colore #555 */
  --cat-text-color-muted:   #777;    /* Aggiunto: per il colore #777 */
  --cat-border-color-light: #eeeeee; /* Aggiunto: per il colore #eeeeee */
  --cat-border-color-f0:    #f0f0f0; /* Aggiunto: per il colore #f0f0f0 */
  --cat-bg-color-f7:        #f7f7f7; /* Aggiunto: per il colore #f7f7f7 */
  --cat-dark-bg-241f21:     #241F21; /* Aggiunto: per il colore #241F21 */

  /* --- TIPOGRAFIA --- */
  --cat-font-family:         inherit;
  --cat-font-size-xs:        11px;
  --cat-font-size-sm:        13px;
  --cat-font-size-md:        14px;
  --cat-font-size-lg:        16px;
  --cat-font-size-xl:        clamp(24px, 3vw, 36px);
  --cat-font-size-xxl:       42px;

  --cat-font-weight-medium:  500;
  --cat-font-weight-bold:    700;
  --cat-font-weight-black:   800;

  --cat-letter-spacing-sm:   0.08em;
  --cat-letter-spacing-md:   0.10em;
  --cat-letter-spacing-lg:   0.12em;
  --cat-letter-spacing-tag:  2px;
  --cat-letter-spacing-cap:  1px;

  --cat-line-height-title:   1.15;
  --cat-line-height-body:    1.6;

  /* --- SPAZIATURA --- */
  --cat-section-padding:      80px 0;
  --cat-section-padding-lg:   120px 0 120px; /* Aggiunto */
  --cat-section-padding-md:   100px 0; /* Aggiunto */
  --cat-section-padding-sm:   60px 0;  /* Aggiunto */

  --cat-container-max:        1500px;
  --cat-container-max-lg:     1400px; /* Aggiunto */
  --cat-container-max-md:     1200px; /* Aggiunto */
  --cat-container-max-sm:     1240px; /* Aggiunto */

  --cat-container-padding:    0 20px;
  --cat-container-padding-lg: 0 40px; /* Aggiunto */
  --cat-container-padding-md: 0 25px; /* Aggiunto */

  --cat-grid-gap:             15px;
  --cat-section-header-mb:    40px; /* Valore standard */
  --cat-section-header-mb-lg: 60px; /* Aggiunto */
  --cat-section-header-mb-xl: 70px; /* Aggiunto */
  --cat-tagline-mb:           10px;
  --cat-title-mb:             24px;

  /* --- BORDI & RAGGI --- */
  --cat-radius-sm:    4px;
  --cat-radius-full:  50%;
  --cat-border-width: 1px;

  /* --- TRANSIZIONI --- */
  --cat-transition-fast:    0.25s ease;
  --cat-transition-normal:  0.3s ease;
  --cat-transition-medium:  0.4s ease; /* Aggiunto */
  --cat-transition-semi-slow: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); /* Aggiunto */
  --cat-transition-slow:    0.7s ease;
  --cat-transition-extra-slow: 0.8s ease-out; /* Aggiunto */

  /* --- ANIMAZIONI --- */
  --cat-anim-duration:  800ms;
  --cat-anim-ease:      ease;

  /* --- OVERLAY GALLERY --- */
  --cat-overlay-bg:  rgba(25, 135, 84, 0.7);

  /* --- TAGLINE DECORATIVA --- */
  --cat-tagline-line-w:  40px;
  --cat-tagline-line-h:  2px;
  --cat-icon-size-sm:    16px;
  --cat-icon-size-md:    20px;
  --cat-icon-size-lg:    22px;
  --cat-icon-size-xl:    36px;

}


/* ═══════════════════════════════════════════════════════
   CAT — SECTION HEADERS (sistema unificato)
   ═══════════════════════════════════════════════════════ */

/* --- TAGLINE BASE --- */
.cat-tagline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--cat-tagline-mb); /* 10px */
}

.cat-tagline-line {
  width: var(--cat-tagline-line-w); /* 40px */
  height: var(--cat-tagline-line-h); /* 2px */
  background: var(--cat-green);
  flex-shrink: 0;
}

.cat-tagline-icon {
  width: var(--cat-icon-size-md); /* 20px */
  height: var(--cat-icon-size-md); /* 20px */
  color: var(--cat-green);
  flex-shrink: 0;
}

.cat-tagline-text {
  color: var(--cat-green);
  font-weight: var(--cat-font-weight-bold); /* 700 */
  letter-spacing: var(--cat-letter-spacing-tag); /* 2px */
  font-size: var(--cat-font-size-md); /* 14px */
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- TITOLO PRINCIPALE --- */
.cat-about-title {
  font-size: var(--cat-font-size-xl);
  font-weight: var(--cat-font-weight-black);
  color: var(--cat-black);
  text-transform: uppercase;
  margin: 0 0 var(--cat-title-mb) 0; /* 24px */
  line-height: var(--cat-line-height-title); /* 1.15 */
  letter-spacing: 0.02em;
}

/* --- WRAPPER HEADER DI SEZIONE (Gallery, Products, Download, ecc.) --- */
.cat-section-header {
  margin-bottom: var(--cat-section-header-mb); /* 40px */
  text-align: center;
  display: flex; /* Aggiunto */
  flex-direction: column; /* Aggiunto */
  gap: 15px; /* Aggiunto */
  align-items: center; /* Aggiunto */
}

/* --- Allineamento tagline specifica (centrato o sinistra) --- */
.cat-section-header .cat-tagline {
  justify-content: center;
}

.cat-about-content .cat-tagline {
  justify-content: flex-start;
}

/* ═══════════════════════════════════════════════════════
   CAT — SECTION ABOUT-HOME
   ═══════════════════════════════════════════════════════ */

/* --- Layout e componenti --- */
.cat-about-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  font-family: inherit;
}

/* Colonna immagini */
.cat-about-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  position: relative;
}

.cat-img-main,
.cat-img-secondary {
  position: relative;
  overflow: hidden;
}

.cat-img-main img,
.cat-img-secondary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 380px;
  max-height: 634px;
}

/* Box telefono sovrapposto */
.cat-phone-box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--cat-green);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  text-decoration: none;
  transition: background var(--cat-transition-fast);
}

.cat-phone-box:hover {
  background: var(--cat-green-dark);
}

.cat-phone-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cat-phone-icon svg {
  width: var(--cat-icon-size-lg); /* 22px */
  height: var(--cat-icon-size-lg); /* 22px */
  stroke: var(--cat-white);
}

.cat-phone-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-phone-label {
  font-size: var(--cat-font-size-xs);
  font-weight: var(--cat-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--cat-letter-spacing-lg);
  color: rgba(var(--cat-white-rgb),0.75);
  line-height: 1;
}

.cat-phone-number {
  font-size: 15px;
  font-weight: var(--cat-font-weight-bold);
  color: var(--cat-white);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* Colonna contenuto */
.cat-about-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Testi */
.cat-about-text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--cat-text-color-body);
  margin: 0;
}

.cat-about-text strong {
  color: var(--cat-green);
  font-weight: var(--cat-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Highlight box */
.cat-highlight-box {
  border-left: 4px solid var(--cat-green);
  background: var(--cat-green-light);
  padding: 18px 22px;
  border-radius: 0 var(--cat-radius-sm) var(--cat-radius-sm) 0;
}

.cat-highlight-text {
  font-size: var(--cat-font-size-md);
  font-weight: var(--cat-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--cat-letter-spacing-sm);
  color: var(--cat-black);
}

/* Riga counter + feature list */
.cat-bottom-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
}

/* Counter box */
.cat-counter-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: var(--cat-border-width) solid var(--cat-gray-200); /* Usato --cat-gray-200 al posto di #e0e4e0 */
  padding: 24px 28px;
  min-width: 130px;
  gap: 6px;
  background: var(--cat-white);
}
.cat-counter-number {
  font-size: var(--cat-font-size-xxl);
  font-weight: var(--cat-font-weight-black);
  color: var(--cat-green);
  line-height: 1;
  letter-spacing: -0.02em;
}

.cat-counter-label {
  font-size: var(--cat-font-size-xs);
  font-weight: var(--cat-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--cat-letter-spacing-lg);
  color: var(--cat-gray-400);
  text-align: center;
}

/* Feature list */
.cat-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cat-feature-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border: var(--cat-border-width) solid var(--cat-green-border);
  border-radius: var(--cat-radius-sm);
  background: var(--cat-white);
  font-size: var(--cat-font-size-md);
  font-weight: var(--cat-font-weight-medium);
  color: var(--cat-gray-800); /* Usato --cat-gray-800 al posto di #333 */
  transition: border-color var(--cat-transition-fast), background var(--cat-transition-fast), transform var(--cat-transition-fast);
  cursor: default;
}

.cat-feature-item:hover {
  border-color: var(--cat-green);
  background: var(--cat-green-light);
  transform: translateX(6px);
}

.cat-feature-icon {
  width: var(--cat-icon-size-xl); /* 36px */
  height: var(--cat-icon-size-xl); /* 36px */
  min-width: var(--cat-icon-size-xl);
  border: var(--cat-border-width) solid var(--cat-green);
  border-radius: var(--cat-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cat-white);
  flex-shrink: 0;
  transition: background var(--cat-transition-fast);
}

.cat-feature-icon svg {
  width: var(--cat-icon-size-sm); /* 16px */
  height: var(--cat-icon-size-sm); /* 16px */
  stroke: var(--cat-green);
  transition: stroke var(--cat-transition-fast);
}

.cat-feature-item:hover .cat-feature-icon {
  background: var(--cat-green);
  border-color: var(--cat-green);
}

.cat-feature-item:hover .cat-feature-icon svg {
  stroke: var(--cat-white);
}

/* CTA button */
.cat-cta-btn {
  display: block;
  width: 100%;
  padding: 17px 20px;
  background: var(--cat-black);
  color: var(--cat-white);
  text-align: center;
  font-size: var(--cat-font-size-sm);
  font-weight: var(--cat-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--cat-letter-spacing-md);
  text-decoration: none;
  transition: background var(--cat-transition-fast);
}

.cat-cta-btn:hover {
  background: var(--cat-green);
  color: var(--cat-white);
}

/* Responsive tablet */
@media (max-width: 992px) {
  .cat-about-block {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: var(--cat-container-padding);
  }

  .cat-about-images {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
  }

  .cat-img-main img,
  .cat-img-secondary img {
    min-height: 280px;
  }
}

@media (max-width: 768px) {
  .cat-about-block {
      gap: 30px;
  }
}

/* Responsive mobile */
@media (max-width: 576px) {
  .cat-about-images {
    grid-template-columns: 1fr;
  }

  .cat-img-main {
    display: none;
  }

  .cat-img-secondary img {
    min-height: 240px;
  }

  .cat-bottom-row {
    grid-template-columns: 1fr;
  }

  .cat-counter-box {
    flex-direction: row;
    gap: 12px;
    padding: 16px 20px;
    min-width: unset;
  }

  .cat-counter-label {
    text-align: left;
  }

  .cat-feature-item:hover {
    transform: none;
  }
}
/* ═══════════════════════════════════════════════════════
   CAT — SECTION PRODUCTS-HOME
   ═══════════════════════════════════════════════════════ */

/* --- Layout e componenti --- */
/* Animazioni reveal (.cat-animated) centralizzate in ANIMATION ENGINE più in basso nel file */

/* --- STILI DELLA SEZIONE --- */
.cat-products-section { background: #ffffff; }
.cat-products-container { max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
}

/* .cat-section-header qui usa il valore di default var(--cat-section-header-mb) = 40px,
   nessun override necessario per questa sezione. */
.cat-products-grid {
    display: grid;
    /* Utilizzo di auto-fit per un layout reattivo delle colonne */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 20px;
}

.cat-prod-card {
    position: relative;
    background: #1a1618;
    height: 480px;
    overflow: hidden;
     border-radius: 0;
    }

.cat-prod-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.cat-prod-card:hover .cat-prod-img img { transform: scale(1.1); }

.cat-prod-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(26, 22, 24, 0.85); display: flex; align-items: flex-end;
    padding: 30px; opacity: 0; transition: opacity 0.4s ease; border-bottom: 4px solid #198754;
}
.cat-prod-card:hover .cat-prod-overlay { opacity: 1; }

.cat-prod-info h3 { color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
     margin-bottom: 12px;
}

.cat-prod-info p {
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.cat-prod-link { display: inline-flex;
    width: 42px;
    height: 42px;
    background: #198754;
    color: #ffffff;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    transition: all 0.3s ease;
}

.cat-prod-link:hover { background: #ffffff; color: #198754; transform: translateX(5px); }

@media (max-width: 1200px) {
  .cat-products-grid {
    grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 992px) {
  .cat-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .cat-products-grid {
    grid-template-columns: 1fr;
  }
  .cat-prod-card {
    height: 400px;
  }
  .cat-about-title { /* specific to products section if used there, otherwise can be removed */
    font-size: 26px;
  }
}

/* ═══════════════════════════════════════════════════════
   CAT — SECTION WHY CHOOSE US-HOME
   ═══════════════════════════════════════════════════════ */

/* --- ANIMAZIONI — stati iniziali e finali --- */

.te-anim-from-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity var(--cat-transition-slow), transform var(--cat-transition-slow);
}

.te-anim-from-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity var(--cat-transition-slow) 0.15s, transform var(--cat-transition-slow) 0.15s;
}

/* --- L'animazione di ingresso agisce solo sul wrapper esterno --- */
.te-anim-from-bottom {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity  0.6s ease var(--te-delay, 0ms),
        transform 0.6s ease var(--te-delay, 0ms);
}

/* Stato finale (.te-anim-visible) centralizzato in ANIMATION ENGINE più in basso nel file */
/* Override mobile di .te-anim-from-left/right: vedi breakpoint 768px più avanti in questa sezione
   (copriva lo stesso intervallo con lo stesso valore a 767px — era ridondante) */

/* --- LAYOUT PRINCIPALE --- */

.te-why-split-wrapper {
    width: 100%;
    background-color: var(--cat-black);
    position: relative;
    padding-top: 60px; /* Base padding-top */
}

.te-why-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 700px;
}

/* --- COLONNA SINISTRA — Immagine --- */

.te-custom-thumb-container { position: relative; margin-top: -100px; z-index: 5; }
.te-custom-thumb-container::before {
    content: ""; width: 57px; height: 41px;
    background-color: var(--cat-gray-400); /* Usato --cat-gray-400 al posto di #797577 (rgb(121, 117, 119)), che è simile */
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
    position: absolute; right: -57px; top: 0; z-index: 6;
}

.te-custom-thumb-wrapper { width: 100%; height: 100%; position: relative; box-shadow: 0 15px 40px rgba(var(--cat-black-rgb),0.4); }
.te-custom-thumb-wrapper::after {
    content: ""; width: 130px; height: 200px;
    background-color: var(--cat-dark-bg-241f21);
    position: absolute; right: 0; bottom: 0; z-index: 2;
}

.te-why-cover-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    position: relative; z-index: 1; filter: grayscale(0.15);
    transition: 0.6s ease;
}
.te-custom-thumb-wrapper:hover .te-why-cover-img { filter: grayscale(0); }

/* --- COLONNA DESTRA — Testo --- */

.te-why-text-side { display: flex; align-items: center; padding: 0 6% 140px 10%; }
.te-why-inner { max-width: 600px; width: 100%; }
.te-why-label-row { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.te-why-tagline-line { width: 30px; height: 2px; background-color: var(--cat-green); }
.te-why-label-txt { font-size: var(--cat-font-size-md); font-weight: var(--cat-font-weight-bold); text-transform: uppercase; letter-spacing: 0.15em; color: var(--cat-green); }
.te-why-main-h2 {
    font-size: clamp(1.7rem, 2.5vw, 2.3rem);
    font-weight: var(--cat-font-weight-black);
    color: var(--cat-white);
    line-height: var(--cat-line-height-title);
    margin-bottom: 25px;
    text-transform: uppercase;
}

.te-why-paragraph {
    font-size: 15px;
    line-height: var(--cat-line-height-body);
    color: rgba(var(--cat-white-rgb),0.60);
    margin-bottom: 35px;
}
.te-why-paragraph strong { color: var(--cat-green); font-weight: var(--cat-font-weight-bold); }

.te-why-features-list { display: flex; flex-direction: column; gap: 8px; }
.te-why-f-item {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 14px;
    border: var(--cat-border-width) solid rgba(var(--cat-white-rgb),0.10);
    border-radius: var(--cat-radius-sm);
    background-color: rgba(var(--cat-white-rgb),0.04);
    color: rgba(var(--cat-white-rgb),0.85);
    font-size: var(--cat-font-size-md);
    transition: var(--cat-transition-fast);
}
.te-why-f-icon {
    width: var(--cat-icon-size-xl); /* 36px */
    height: var(--cat-icon-size-xl); /* 36px */
    border: var(--cat-border-width) solid var(--cat-green);
    border-radius: var(--cat-radius-sm);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: var(--cat-transition-fast);
}
.te-why-f-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--cat-green);
}
.te-why-f-item:hover { border-color: var(--cat-green); transform: translateX(6px); background-color: rgba(var(--cat-green-rgb),0.10); }
.te-why-f-item:hover .te-why-f-icon { background: var(--cat-green); }
.te-why-f-item:hover .te-why-f-icon svg { stroke: var(--cat-white); }

/* --- COUNTER BOXES — DESIGN & LIFT-UP --- */

.te-why-overlap-container {
    position: absolute; bottom: 0; left: 69%; transform: translate(-50%, 50%);
    width: 45%;
    z-index: 20;
}
.te-why-bottom-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }

/* --- Card Interna: gestisce l'effetto Lift-Up indipendentemente dall'animazione d'ingresso --- */
.te-why-counter-box {
    background-color: var(--cat-white);
    padding: 45px 25px;
      text-align: center;
    box-shadow: 0 10px 30px rgba(var(--cat-black-rgb),0.06);
    border: var(--cat-border-width) solid var(--cat-border-color-light);
    border-bottom: 3px solid transparent;
    border-radius: var(--cat-radius-sm);
    cursor: pointer;
    transition: all var(--cat-transition-semi-slow);
    transform: translateY(0); /* Stato neutro */
}

/* --- LIFT-UP EFFECT ALL'HOVER --- */
.te-why-counter-box:hover {
    background-color: var(--cat-green-light);
    border-color: var(--cat-gray-200); /* Usato --cat-gray-200 al posto di #e0e8e2 */
    border-bottom-color: var(--cat-green);
    transform: translateY(-20px);
    box-shadow: 0 35px 70px rgba(var(--cat-black-rgb),0.15);
  }

.te-counter-icon-wrap {
    width: 50px; height: 50px;
    background-color: var(--cat-white);
    border: var(--cat-border-width) solid rgba(var(--cat-green-rgb), 0.2);
    margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--cat-radius-sm);
    color: var(--cat-green);
    transition: var(--cat-transition-medium);
}
.te-counter-icon-wrap svg {
    width: var(--cat-icon-size-lg); /* 24px, usato 22px, è simile */
    height: var(--cat-icon-size-lg); /* 24px, usato 22px, è simile */
    stroke: var(--cat-green);
    transition: var(--cat-transition-medium);
}

.te-why-counter-box:hover .te-counter-icon-wrap { background-color: var(--cat-green); color: var(--cat-white); }
.te-why-counter-box:hover .te-counter-icon-wrap svg { stroke: var(--cat-white); transform: scale(1.1); }
.te-why-counter-num {
    display: block; font-size: var(--cat-font-size-xxl); font-weight: var(--cat-font-weight-black); color: var(--cat-black);
    line-height: 1; margin-bottom: 10px; letter-spacing: -0.02em;
}
.te-why-counter-num::after { content: "+"; font-size: 26px; color: var(--cat-green); margin-left: 3px; }

.te-why-counter-label {
    font-size: 12px;
    font-weight: var(--cat-font-weight-bold);
    color: var(--cat-text-color-muted);
    text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.5;
}
.te-why-counter-box:hover .te-why-counter-label { color: var(--cat-black); }

/* --- RESPONSIVE --- */
@media (max-width: 1024px) { /* Keep 1024px as it's common for tablets, covers 992px for main grid */
  .te-why-split-wrapper {
      padding-top: var(--cat-section-padding); /* Increase padding as image no longer uses negative margin, for better spacing */
  }
  .te-why-main-grid {
    grid-template-columns: 1fr;
    min-height: auto; /* Allow height to adjust */
  }
  .te-why-text-side {
      padding: 40px 6% 80px 10%;
  }
  .te-custom-thumb-container {
      display: none; /* Nasconde l'immagine sotto i 1024px */
  }
  .te-why-overlap-container {
    position: relative;
    transform: none;
    left: 0;
    width: 90%;
    margin: var(--cat-section-header-mb-lg) auto 0;
    display: none; /* Nasconde i contatori sotto i 1024px */
  }
  .te-why-bottom-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 768px) {
  .te-anim-from-left, .te-anim-from-right {
      transform: translateY(30px);
  }
  .te-why-text-side {
      padding: 40px 5% 60px 5%;
  }
  .te-why-main-h2 {
      font-size: clamp(1.5rem, 4vw, 2.3rem); /* Adjust clamp for smaller screens */
  }
  .te-why-split-wrapper {
      padding-top: var(--cat-section-padding-sm); /* Slightly reduce padding for smaller tablets */
  }
}
@media (max-width: 576px) {
  .te-why-bottom-row {
    grid-template-columns: 1fr;
  }
  .te-why-main-h2 {
    font-size: 1.7rem; /* Explicit size for small mobile, if clamp is too small */
  }
  .te-why-counter-box:hover {
    transform: translateY(-10px);
  }
  .te-why-split-wrapper {
      padding-top: 40px; /* Further adjust for small mobile screens */
  }
}

/* ═══════════════════════════════════════════════════════
   CAT — SECTION SERVICES-HOME
   ═══════════════════════════════════════════════════════ */

/* Animazioni reveal (.te-wow / .te-animated) centralizzate in ANIMATION ENGINE più in basso nel file */

/* --- LAYOUT & BACKGROUND --- */
.te-srv-section {
    position: relative;
    padding: 240px 0 120px;
    background-color: var(--cat-white);
}

.te-srv-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 60%;
    background-color: var(--cat-bg-color-f7);
    z-index: 1;
}

.te-srv-container {
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
    z-index: 2;
}

/* --- GRID & CARDS --- */
.te-srv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
.te-srv-card {
    position: relative; background-color: var(--cat-white); border: 1px solid var(--cat-border-color-light);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex; flex-direction: column;
}

.te-srv-icon-box { position: absolute; top: -22px; left: 25px; z-index: 10; }
.te-srv-f-icon {
    width: 44px; height: 44px; border: 1px solid var(--cat-green); border-radius: 4px;
    display: flex; align-items: center; justify-content: center; background: var(--cat-white);
    transition: all 0.35s ease;
}
.te-srv-f-icon svg { width: 22px; height: 22px; stroke: var(--cat-green); transition: all 0.35s ease; }

/* EFFETTO HOVER CARD */
.te-srv-card:hover { transform: translateY(-10px); border-color: var(--cat-green); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.te-srv-card:hover .te-srv-f-icon { background: var(--cat-green); }
.te-srv-card:hover .te-srv-f-icon svg { stroke: var(--cat-white); transform: rotateY(180deg); }

/* --- CONTENUTI CARD --- */
.te-srv-card-body { padding: 45px 25px 30px; flex-grow: 1; }
.te-srv-card-title { font-size: 17px; font-weight: 800; text-transform: uppercase; margin-bottom: 12px; }
.te-srv-card-title a { color: var(--cat-black); text-decoration: none; transition: 0.3s; }
.te-srv-card-text { font-size: 15px; line-height: 1.75; color: var(--cat-text-color-body); margin: 0; }

.te-srv-card-img { height: 220px; overflow: hidden; background-color: var(--cat-black); }
.te-srv-card-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: 0.8; transition: all 0.6s ease; }

.te-srv-card:hover .te-srv-card-img img { filter: grayscale(0); opacity: 1; transform: scale(1.1); }
.te-srv-card:hover .te-srv-card-title a { color: var(--cat-green); }

/* RESPONSIVE */
@media (max-width: 1200px) { .te-srv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
    .te-srv-section {
        padding: 180px 0 90px; /* Reduce padding slightly */
    }
}
@media (max-width: 576px) {
  .te-srv-grid { grid-template-columns: 1fr; }
  .te-srv-section { padding-top: 120px; }
}

/* ═══════════════════════════════════════════════════════
   CAT — SECTION CTA-HOME
   ═══════════════════════════════════════════════════════ */
/* --- 1. BASE & OVERLAY --- */
.te-cta-section-modern {
    position: relative;
    padding: 120px 0;
    /* Path root-relative (non dominio assoluto): si risolve correttamente sia in produzione
       che in ambienti locali/staging con dominio diverso (es. Docker) */
    background-image: url('/wp-content/uploads/2026/03/cta-cardan-2.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: 1;
    overflow: hidden;
}

.te-cta-overlay-graded {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Gradiente più scuro e professionale */
    background: linear-gradient(90deg, rgba(var(--cat-black-rgb), 0.95) 0%, rgba(var(--cat-green-rgb), 0.8) 100%);
    z-index: -1;
}

/* Pattern tecnico opzionale (puntini) */
.te-cta-tech-pattern {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(rgba(var(--cat-white-rgb),0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: -1;
    opacity: 0.3;
}

.te-cta-container {
    max-width: var(--cat-container-max-lg);
    margin: 0 auto;
    padding: var(--cat-container-padding-lg);
}

.te-cta-content-split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}

/* --- 2. TAGLINE & TYPOGRAPHY --- */
.te-cta-tag-txt {
    color: var(--cat-white);
    font-weight: var(--cat-font-weight-bold);
    letter-spacing: 0.15em;
    font-size: var(--cat-font-size-sm);
    text-transform: uppercase;
}

.te-highlight {
    color: var(--cat-white);
    display: block;
    -webkit-text-stroke: 1px rgba(var(--cat-white-rgb),0.5); /* Effetto tecnico outline */
    color: transparent;
}

.te-cta-subtitle {
    display: block;
    font-size: 1.1rem;
    font-weight: 300;
    margin-top: 20px;
    color: rgba(var(--cat-white-rgb),0.8);
    text-transform: none;
    letter-spacing: 0;
}

/* --- 3. THE "TE" TECHNICAL BUTTON --- */
.te-cta-btn-modern {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 22px 45px;
    background-color: var(--cat-green);
    color: var(--cat-white);
    font-size: var(--cat-font-size-md);
    font-weight: var(--cat-font-weight-black);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border: none;
    transition: all var(--cat-transition-medium) cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 10px 20px rgba(var(--cat-black-rgb),0.15);
}

.te-cta-btn-modern span { position: relative; z-index: 2; }

.te-cta-btn-modern:hover {
    background-color: var(--cat-white);
    color: var(--cat-green);
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(var(--cat-black-rgb),0.3);
}

.te-btn-icon {
    width: var(--cat-icon-size-md); /* 20px */
    height: var(--cat-icon-size-md); /* 20px */
    transition: transform var(--cat-transition-medium);
}

.te-cta-btn-modern:hover .te-btn-icon { transform: translateX(8px); }

/* --- 4. REVEAL SYSTEM: centralizzato in ANIMATION ENGINE più in basso nel file --- */

/* RESPONSIVE */
@media (max-width: 992px) {
  .te-cta-content-split {
      flex-direction: column;
      text-align: center;
      gap: 40px;
}
  .te-cta-btn-modern {
      width: 100%;
    justify-content: center;
}
}
@media (max-width: 768px) {
    .te-cta-container {
        padding: var(--cat-container-padding-md);
    }
    .te-cta-section-modern {
        padding: var(--cat-section-padding);
        /* background-attachment: fixed causa jank in scroll su mobile (e viene comunque
           ignorato da molti browser mobile) — disattivato sotto i 768px */
        background-attachment: scroll;
    }
    .te-cta-btn-modern {
        padding: 18px 30px;
    }
}
@media (max-width: 576px) {
    .te-cta-container {
        padding: 0 15px;
    }
    .te-cta-section-modern {
        padding: var(--cat-section-padding-sm);
    }
    .te-cta-btn-modern {
        font-size: var(--cat-font-size-sm);
        gap: 10px;
    }
}

/* ═══════════════════════════════════════════════════════
   CAT — SECTION WORKFLOW-HOME
   ═══════════════════════════════════════════════════════ */
/* ──────────────────────────────────────
   1. LAYOUT & HEADER (STYLE MATCH)
   ────────────────────────────────────── */
.te-wf-section { padding: 100px 0; background-color: var(--cat-white); position: relative; }
.te-wf-container { max-width: 1240px; margin: 0 auto; padding: 0 25px; }

/* ──────────────────────────────────────
   2. WORKFLOW STRUCTURE
   ────────────────────────────────────── */
.te-wf-wrapper { position: relative; }

.te-wf-connector {
    position: absolute;
    top: 26px;
    left: 0; width: 100%;
    height: 1px;
    background: var(--cat-border-color-f0);
    z-index: 1;
}

.te-wf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    position: relative;
    z-index: 2;
}

/* ═══════════════════════════════════════════════════════
   CAT — ANIMATION ENGINE (Sincronizzazione JS)
   Fonte unica per gli stati reveal usati da tutte le sezioni CAT e TE
   (era duplicato in Products/Services/CTA/Workflow/About — consolidato qui).
   ═══════════════════════════════════════════════════════ */

/* Stato iniziale per tutte le sezioni CAT e TE */
.cat-wow, .te-wow,
.te-anim-from-left, .te-anim-from-right, .te-anim-from-bottom {
    opacity: 0 !important;
    visibility: hidden;
    will-change: transform, opacity;
}

.te-wow {
    transform: translateY(20px);
}

/* Direzioni specifiche se non già coperte */
.cat-fadeInUp    { transform: translateY(40px); }
.cat-fadeInLeft  { transform: translateX(-60px); }
.cat-fadeInRight { transform: translateX(40px); }

/* Stato finale universale (Triggerato dal tuo script) */
.cat-animated, .te-animated, .te-anim-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(0, 0) !important;
    transition: opacity 0.8s ease, transform 0.8s ease !important;
}

/* ──────────────────────────────────────
   3. STEP & HOVER EFFECTS (DYNAMICS)
   ────────────────────────────────────── */
.te-wf-step { position: relative; cursor: default; }

.te-wf-num-container {
    width: 52px; height: 52px;
    background: var(--cat-white);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 35px;
}

.te-wf-num {
    width: 100%; height: 100%;
    border: 1px solid #efefef;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 900; color: var(--cat-black);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.te-wf-info {
    transition: transform 0.4s ease;
}

.te-wf-step-title {
    font-size: 1.15rem; font-weight: 800;
    color: var(--cat-black); margin-bottom: 18px;
    text-transform: uppercase;
    transition: color 0.4s ease;
}

.te-wf-step-text {
    font-size: 15px; line-height: 1.75; color: var(--cat-text-color-body);
    margin: 0;
    /* Bilanciamento altezze */
    min-height: 80px;
    transition: color 0.4s ease;
}

/* Effetto Hover Coordinato */
.te-wf-step:hover .te-wf-num {
    border-color: var(--cat-green);
    background-color: var(--cat-green);
    color: var(--cat-white);
    transform: scale(1.1);
}

.te-wf-step:hover .te-wf-info {
    transform: translateY(-8px);
}

.te-wf-step:hover .te-wf-step-title {
    color: var(--cat-green);
    transition-delay: 0.05s;
}

/* ──────────────────────────────────────
   4. RESPONSIVE (animazioni reveal centralizzate in ANIMATION ENGINE più in alto nel file)
   ────────────────────────────────────── */

@media (max-width: 992px) {
  .te-wf-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .te-wf-connector {
    display: none;
  }
  .te-wf-num-container {
    margin: 0 auto 20px; /* Center number container when single column */
  }
  .te-wf-step {
      text-align: center; /* Center content */
  }
  .te-wf-step-text {
    min-height: auto;
  }
}
@media (max-width: 768px) {
    .te-wf-section {
        padding: 80px 0;
}
}
@media (max-width: 576px) {
    .te-wf-section {
        padding: 60px 0;
    }
    .te-wf-grid {
        gap: 30px;
    }
}

/* ═══════════════════════════════════════════════════════
   CAT — SECTION ABOUT-ABOUT US
   ═══════════════════════════════════════════════════════ */

/* --- 1. LAYOUT & BASIS --- */
.te-about-wrap { padding: 120px 0; background: var(--cat-white); overflow: visible; } /* Cambiato in visible per non tagliare il badge se esce */
.te-about-container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.te-about-row { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 80px; align-items: center; }

/* --- 3. IMAGE STACK & DECORATION --- */
.te-about-left { position: relative; }

/* AGGIUNTO: Forza lo stack a non collassare */
.te-image-stack {
    position: relative;
    padding: 20px 20px 60px 0;
    display: block;
    min-height: 450px; /* Assicura che ci sia spazio per le immagini assolute */
}

.te-image-stack::after {
    content: "";
    position: absolute;
    top: -40px;
    right: 0;
    width: 250px;
    height: 350px;
    border: 15px solid var(--cat-green);
    z-index: 1; /* Portato a 1 per stare dietro le immagini ma sopra lo sfondo */
    animation: topBottom 4s ease-in-out infinite;
}

/* AGGIUNTO: !important per vincere sui reset di Elementor che vedevamo nello screen */
.te-img-main img {
    width: 95% !important;
    border-radius: 2px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
    position: relative;
    z-index: 2;
}

.te-img-sub {
    position: absolute !important;
    bottom: -20px;
    right: 15px;
    width: 57% !important;
    border: 10px solid var(--cat-white) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    z-index: 3 !important;
}

/* --- 4. COUNTER & BADGE --- */
.te-experience-badge-minimal {
    position: absolute !important;
    bottom: 10px;
    left: -45px;
    background: var(--cat-white);
    padding: 25px 35px;
    z-index: 10 !important;
    box-shadow: 0 15px 45px rgba(0,0,0,0.1);
    border-bottom: 4px solid var(--cat-green);
}

/* --- 5. TEXT CONTENT & MISSION --- */
.te-about-text p { font-size: 15px; line-height: 1.8; color: var(--cat-text-color-body); margin-bottom: 20px; }
.te-about-text strong { color: var(--cat-green); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }

.te-mission-box {
    margin-top: 40px;
    padding: 25px 30px;
    background-color: var(--cat-green-light);
    border-left: 4px solid var(--cat-green);
    border-radius: 0 4px 4px 0;
}
.te-mission-label { font-weight: 800; font-size: 12px; color: var(--cat-green); letter-spacing: 2px; display: block; margin-bottom: 8px; }

/* --- 6. ANIMATION SYSTEM: centralizzato in ANIMATION ENGINE più in alto nel file --- */

/* RESPONSIVE */
@media (max-width: 992px) {
    .te-about-row { grid-template-columns: 1fr; gap: 50px; }
    .te-about-container { padding: 0 20px; }
    .te-experience-badge-minimal { left: 10px; bottom: 0; }
    .te-img-sub { right: 0; width: 50%; }
}

/* ═══════════════════════════════════════════════════════
   CAT — SECTION QUALITY-ABOUT US
   ═══════════════════════════════════════════════════════ */

/* --- ISO SECTION DESIGN SYSTEM (V2: Focus on Logo) --- */
.te-iso-section-v2 {
    padding: 60px 0 120px;
    background: var(--cat-white);
    position: relative;
}

/* Card con ombra profonda e angoli vivi come nelle foto */
.te-iso-card {
    position: relative;
    background: var(--cat-white);
    padding: 70px 80px;
    border-radius: 2px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.08); /* Ombra coordinata con le immagini superiori */
    overflow: visible;
    z-index: 5;
}

/* La cornice verde "aperta" a sbalzo */
.te-iso-frame {
    position: absolute;
    top: -30px;
    left: -30px;
    width: 180px;
    height: 180px;
    border-top: 10px solid var(--cat-green);
    border-left: 10px solid var(--cat-green);
    z-index: -1;
    pointer-events: none;
}

.te-iso-grid-v2 {
    display: flex;
    align-items: center;
    gap: 70px; /* Aumentato gap per dare respiro al logo più grande */
    position: relative;
    z-index: 2;
}

/* Wrapper del logo: ricalibrato lo spazio */
.te-iso-logo-wrapper-v2 {
    display: flex;
    align-items: center;
    gap: 50px; /* Spazio tra logo e divisore */
    flex-shrink: 0;
}

/* Logo ISO: Tonto box, ingrandito e allineato */
.te-iso-logo-badge-v2 {
    background: transparent; /* Rimosso sfondo bianco */
    padding: 0; /* Rimosso padding */
    box-shadow: none; /* Rimossa ombra del box */
    border-bottom: none; /* Rimosso bordo verde inferiore */
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 180px; /* Aumentata min-width per il logo più grande */
}

.te-iso-logo-badge-v2 img {
    max-width: 160px; /* Ingrandito da 130px a 160px */
    height: auto;
    filter: grayscale(1);
    opacity: 0.75;
    transition: all 0.5s ease;
}

.te-iso-card:hover .te-iso-logo-badge-v2 img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.05); /* Mantenuto leggero effetto scale */
}

.te-iso-divider-v2 {
    width: 1px;
    height: 120px; /* Allungato divisore per bilanciare il logo più alto */
    background: var(--cat-border-color-f0);
}

/* Typography coerente */
.te-wf-title.small {
    font-size: 26px;
    margin-bottom: 18px;
    color: var(--cat-black);
}

.te-iso-text-v2 p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--cat-text-color-body);
    margin: 0;
    max-width: 750px;
}

/* Watermark Decorativo */
.te-iso-watermark {
    position: absolute;
    bottom: 20px;
    right: 30px;
    font-size: 120px;
    font-weight: 900;
    color: rgba(var(--cat-green-rgb), 0.025);
    letter-spacing: 8px;
    pointer-events: none;
    line-height: 1;
    user-select: none;
    z-index: 1;
}

/* Responsive Handling */
@media (max-width: 992px) {
    .te-iso-frame { top: -15px; left: -15px; width: 100px; height: 100px; border-width: 6px; }
    .te-iso-grid-v2 {
        flex-direction: column;
        text-align: left;
        align-items: center; /* Allineato centralmente su mobile */
        gap: 40px;
    }
    .te-iso-divider-v2 {
        display: none;
    }
    .te-iso-card {
        padding: 50px 30px;
        margin: 0 20px;
    }
    .te-iso-watermark {
        font-size: 60px;
        bottom: 10px;
        right: 10px;
    }
    .te-iso-logo-wrapper-v2 {
        justify-content: center;
        gap: 0;
    }
    .te-iso-logo-badge-v2 img {
        max-width: 140px; /* Ridotto leggermente su mobile per bilanciamento */
    }
}

/* ═══════════════════════════════════════════════════════
   CAT — SECTION GLOBAL APPLICATIONS-ABOUT US
   ═══════════════════════════════════════════════════════ */

/* --- SETUP SPECIFICO H2 (variante compatta per le pagine About Us — unica definizione,
   prima duplicata anche in WHY CHOOSE US-ABOUT US) ---
   Scoped a .te-industries-section/.cat-why-section (2026-07-16): prima era un
   .cat-about-title globale con !important che sovrascriveva qualunque color inline su
   QUALSIASI sezione del sito (es. i titoli bianchi della homepage in Why Choose Us-Home e
   nella CTA), non solo la variante compatta di About Us a cui era destinato. */
.te-industries-section .cat-about-title,
.cat-why-section .cat-about-title {
    font-size: clamp(1.6rem, 2.5vw, 2.2rem) !important;
    font-weight: var(--cat-font-weight-black) !important;
    color: var(--cat-black) !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
    line-height: var(--cat-line-height-title) !important;
    margin: 0 !important;
}

/* --- SETUP SEZIONE INDUSTRIES --- */
.te-industries-section {
    padding: 120px 0;
    background: #f9f9f9;
}

.te-section-header {
    margin-bottom: 60px;
    text-align: center;
}

/* Allineamento tagline al centro per questa sezione */
.te-section-header .cat-tagline {
    justify-content: center;
    margin-bottom: 15px;
}

/* Griglia e Card */
.te-industries-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.te-industry-card {
    background: var(--cat-white);
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    border-bottom: 3px solid transparent;
}

.te-industry-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.12);
    border-bottom-color: var(--cat-green);
}

.te-industry-img {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.te-industry-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.te-industry-card:hover .te-industry-img img {
    transform: scale(1.1);
}

.te-industry-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
}

.te-industry-body {
    padding: 45px 35px 35px;
    position: relative;
}

.te-industry-icon {
    width: 54px;
    height: 54px;
    background: var(--cat-green);
    color: var(--cat-white);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -27px;
    right: 35px;
    border-radius: 2px;
    box-shadow: 0 10px 20px rgba(var(--cat-green-rgb),0.3);
}

.te-industry-icon svg { width: 24px; height: 24px; }

.te-industry-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--cat-black);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

/* Utility per centrare */
.text-center { text-align: center; }

/* Responsive */
@media (max-width: 992px) {
    .te-industries-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ═══════════════════════════════════════════════════════
   CAT — SECTION WHY CHOOSE US-ABOUT US
   ═══════════════════════════════════════════════════════ */

.cat-why-section {
    padding: var(--cat-section-padding-lg) 0;
    background: var(--cat-white);
}

.cat-container {
    max-width: var(--cat-container-max-md);
    margin: 0 auto;
    padding: var(--cat-container-padding);
}

/* Header & H2 Specificity */
.cat-why-section .te-section-header {
    margin-bottom: var(--cat-section-header-mb-xl);
    text-align: center;
}

/* .cat-about-title qui è già coperto (valori identici) dall'override in
   SECTION GLOBAL APPLICATIONS-ABOUT US più in alto nel file — era una duplicazione */

/* Griglia Card */
.cat-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Card Base */
.cat-why-card {
    background: var(--cat-white);
    padding: 50px 35px;
    border-radius: 2px;
    border: var(--cat-border-width) solid var(--cat-green-border);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all var(--cat-transition-medium) cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Hover: Movimento laterale e ombra sottile */
.cat-why-card:hover {
    transform: translateX(8px);
    border-color: var(--cat-green);
    box-shadow: 0 15px 45px rgba(var(--cat-black-rgb),0.06);
}

/* Icona: Outline quadrata con tratto sottile */
.cat-why-icon {
    width: 65px;
    height: 65px;
    border: 1.5px solid var(--cat-green);
    border-radius: var(--cat-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: all var(--cat-transition-normal);
}

.cat-why-icon svg {
    width: 32px;
    height: 32px;
    stroke: var(--cat-green);
    transition: all var(--cat-transition-normal);
}

/* Hover Icona: Inversione Colori */
.cat-why-card:hover .cat-why-icon {
    background-color: var(--cat-green);
}

.cat-why-card:hover .cat-why-icon svg {
    stroke: var(--cat-white);
}

/* Tipografia Card */
.cat-why-card-title {
    font-size: 19px;
    font-weight: var(--cat-font-weight-black);
    color: var(--cat-black);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.25;
    margin: 0 0 18px 0;
    min-height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--cat-transition-normal);
}

.cat-why-card:hover .cat-why-card-title {
    color: var(--cat-green);
}

.cat-why-card .cat-about-text {
    font-size: 15px;
    line-height: var(--cat-line-height-body);
    color: var(--cat-text-color-body);
    margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .cat-why-grid { grid-template-columns: 1fr; gap: 20px; }
    .cat-why-card { padding: 40px 25px; }
    .cat-why-card:hover { transform: translateY(-5px); } /* Su mobile meglio verticale */
}

/* ═══════════════════════════════════════════════════════
   FIX RESPONSIVE — hero slider homepage (tema parent Voldor)
   ═══════════════════════════════════════════════════════
   .hero-three__title (parent, NON modificabile) è display:inline-block senza
   max-width esplicito — su desktop va bene (il bordo inferiore decorativo deve
   abbracciare solo il testo, non tutta la riga), ma su viewport stretti alcune
   slide con testo più lungo (es. "20+ YEARS OF EXPERIENCE IN POWER TRANSMISSION",
   "HIGH-PRECISION INDUSTRIAL CARDAN SHAFTS") non vanno a capo correttamente e
   sconfinano oltre il bordo dello schermo.
   Primo tentativo (solo max-width:100%) NON sufficiente: essendo inline-block,
   la percentuale si risolve contro un antenato (.hero-three__content) anch'esso
   inline-block senza larghezza propria definita — non costituisce un vincolo
   reale. Soluzione: forzare display:block SOLO su mobile, che fa risolvere la
   larghezza contro il primo antenato con una larghezza vera (la grid Bootstrap
   del tema), permettendo il wrap naturale del testo. Il bordo decorativo su
   mobile finisce così per abbracciare tutta la riga invece del solo testo —
   compromesso accettato per evitare il testo tagliato, molto più grave. */
@media (max-width: 767px) {
    .hero-three__content,
    .hero-three__title {
        display: block;
        max-width: 100%;
        box-sizing: border-box;
    }
    .hero-three__title {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}