/* ============================================================

   GANAR SRL

   LOGISTICA E TRASPORTO

   ============================================================ */



/* ============================================================

   LOGISTICA PAGE / HERO

   ============================================================ */



.logistica-page {

  position: relative;

  width: 100%;

  min-height: 100vh;

  height: 100vh;

  overflow: hidden;

  isolation: isolate;

  background: #17120f;

}



/* ============================================================

   BACKGROUND SLIDER

   ============================================================ */



.logistica-slides {

  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;

}



.logistica-slide {

  position: absolute;

  inset: 0;



  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;



  opacity: 0;

  transform: scale(1.04);



  transition:

    opacity 1.1s ease,

    transform 4s ease;

}



.logistica-slide.active {

  opacity: 1;

  transform: scale(1);

}



/* ============================================================

   OVERLAY

   ============================================================ */



.logistica-overlay {

  position: absolute;

  inset: 0;

  z-index: 1;



  background: linear-gradient(

    180deg,

    rgba(0, 0, 0, 0.94) 0%,

    rgba(0, 0, 0, 0.76) 28%,

    rgba(0, 0, 0, 0.58) 60%,

    rgba(0, 0, 0, 0.72) 100%

  );



  pointer-events: none;

}



/* ============================================================

   CONTENT

   ============================================================ */



.logistica-content {

  position: relative;

  z-index: 2;



  width: min(1100px, 88vw);

  min-height: 100vh;



  margin: 0 auto;



  padding-top: calc(var(--header-height) + 85px);

  padding-bottom: 45px;



  display: flex;

  flex-direction: column;

  justify-content: space-between;



  opacity: 0;

  transform: translateY(30px);



  animation: logisticsContentIn 1.5s cubic-bezier(0.22, 0.9, 0.3, 1) 0.15s

    forwards;

}



/* ============================================================

   HEADER

   ============================================================ */



.header-logistic {

  background-color: #07091a;

}



/* ============================================================

   HEADING

   ============================================================ */



.logistica-heading {

  width: 100%;

}



.logistica-title {

  margin: 0;



  max-width: 1050px;



  color: #ffffff;



  font-size: clamp(2.2rem, 4.2vw, 4.2rem);

  line-height: 1.2;

  font-weight: 600;



  letter-spacing: -0.025em;

}



/* ============================================================

   BLUE / CYAN LINE

   ============================================================ */



.logistica-line {

  width: 100%;

  margin-top: 34px;

  overflow: hidden;

}



.logistica-line span {

  display: block;



  width: 100%;

  height: 5px;



  background: linear-gradient(90deg, #171cff 0%, #006eff 45%, #00e5e5 100%);



  transform-origin: left center;

  transform: scaleX(0);



  animation: logisticsLineIn 1.2s ease 0.65s forwards;

}



/* ============================================================

   SERVICES

   ============================================================ */



.logistica-services {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));



  gap: 30px;



  width: 100%;

  margin-top: 30px;

}



.logistica-service {

  position: relative;

  min-width: 0;



  opacity: 0;

  transform: translateY(20px);



  animation: logisticsServiceIn 1.2s ease forwards;

}



.logistica-service:nth-child(1) {

  animation-delay: 0.85s;

}



.logistica-service:nth-child(2) {

  animation-delay: 1s;

}



.logistica-service:nth-child(3) {

  animation-delay: 1.15s;

}



.logistica-service:nth-child(4) {

  animation-delay: 1.3s;

}



.logistica-service-title {

  display: block;



  color: #ffffff;



  font-size: clamp(1rem, 1.7vw, 1.55rem);

  line-height: 1.25;

  font-weight: 600;

}



/* ============================================================

   BOTTOM

   ============================================================ */



.logistica-bottom {

  width: 100%;



  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;



  gap: 15px;



  opacity: 0;

  transform: translateY(20px);



  animation: logisticsBottomIn 1.2s ease 1.4s forwards;

}



.logistica-bottom-line {

  display: block;



  width: 1px;

  height: 45px;



  background: rgba(255, 255, 255, 0.45);

}



.logistica-location {

  color: #ffffff;



  font-size: clamp(1.2rem, 2vw, 1.8rem);

  line-height: 1.2;

  font-weight: 600;



  letter-spacing: 0.03em;

  text-align: center;

}



/* ============================================================

   LOGISTIC HEADER LOGO

   ============================================================ */



.logistic-logo {

  flex: 0 0 40px;



  width: 40px;

  height: 40px;



  display: flex;

  align-items: center;

  justify-content: center;



  margin-right: 10px;

}



.logistic-logo-text {

  flex: 0 0 130px;



  width: 220px;

  height: 35px;



  display: flex;

  align-items: center;

  justify-content: center;



  margin-right: 10px;

  /* margin-top: 13px; */

}



/* ============================================================

   ANIMATIONS

   ============================================================ */



@keyframes logisticsContentIn {

  from {

    opacity: 0;

    transform: translateY(30px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes logisticsLineIn {

  from {

    transform: scaleX(0);

  }



  to {

    transform: scaleX(1);

  }

}



@keyframes logisticsServiceIn {

  from {

    opacity: 0;

    transform: translateY(25px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes logisticsBottomIn {

  from {

    opacity: 0;

    transform: translateY(20px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* ============================================================

   SERVICES OVERVIEW

   ============================================================ */



.services-overview {

  position: relative;



  width: 100%;

  min-height: 100vh;



  padding: 120px 0 100px;



  background: #07091a;



  overflow: hidden;

}



.services-overview-container {

  width: min(1270px, 88vw);

  margin: 0 auto;

}



/* ============================================================

   SERVICES OVERVIEW HEADER

   ============================================================ */



.services-overview-header {

  max-width: 1050px;



  margin: 0 auto 65px;



  text-align: center;

}



.services-eyebrow {

  display: block;



  margin-bottom: 32px;



  color: #159fe5;



  font-size: clamp(1.4rem, 2.5vw, 2.4rem);

  font-weight: 700;

  line-height: 1;



  letter-spacing: -0.04em;

}



.services-overview-title {

  margin: 0;



  color: #ffffff;



  font-size: clamp(2.5rem, 5vw, 4.5rem);

  line-height: 1.05;

  font-weight: 600;



  letter-spacing: -0.045em;

}



.services-overview-description {

  max-width: 1050px;



  margin: 30px auto 0;



  color: rgba(255, 255, 255, 0.65);



  font-size: clamp(1rem, 1.5vw, 1.35rem);

  line-height: 1.55;

  font-weight: 500;

}



/* ============================================================

   SERVICES GRID

   ============================================================ */



.services-overview-grid {

  display: grid;



  grid-template-columns: repeat(3, minmax(0, 1fr));



  gap: 30px;



  width: 100%;

}



/* ============================================================

   SERVICE CARD

   ============================================================ */



.service-overview-card {

  position: relative;



  min-height: 375px;



  padding: 38px 38px 34px;



  border-radius: 42px;



  background: #151936;



  display: flex;

  flex-direction: column;

  justify-content: space-between;



  overflow: hidden;



  transition:

    transform 0.4s ease,

    background 0.4s ease;

}



.service-overview-card:hover {

  transform: translateY(-8px);

  background: #191e42;

}



/* ============================================================

   CARD TOP

   ============================================================ */



.service-overview-card-top {

  display: grid;



  grid-template-columns: auto 3px 1fr;



  align-items: center;



  column-gap: 22px;

}



.service-overview-number {

  display: block;



  color: #ffffff;



  font-size: clamp(4rem, 6vw, 5.5rem);

  line-height: 0.9;

  font-weight: 600;



  letter-spacing: -0.06em;

}



.service-overview-line {

  display: block;



  width: 3px;

  height: 86px;



  background: #159fe5;

}



.service-card-gold .service-overview-line {

  background: #d4ad4d;

}



.service-card-green .service-overview-line {

  background: #16e45a;

}



/* ============================================================

   CARD TITLE

   ============================================================ */



.service-overview-card-title {

  margin: 0;



  color: #ffffff;



  font-size: clamp(1.5rem, 2.2vw, 2.15rem);

  line-height: 1.08;

  font-weight: 650;



  letter-spacing: -0.035em;

}



/* ============================================================

   CARD DESCRIPTION

   ============================================================ */



.service-overview-card-description {

  margin: 40px 0 0;



  color: rgba(255, 255, 255, 0.92);



  font-size: clamp(0.95rem, 1.25vw, 1.2rem);

  line-height: 1.55;

  font-weight: 500;

}



/* ============================================================

   OPERATIONAL PROCESS

   ============================================================ */



.operational-process {

  position: relative;



  width: 100%;

  min-height: 100vh;



  padding: 100px 0 110px;



  background: #07091a;



  overflow: hidden;

}



.operational-process-container {

  width: min(1100px, 88vw);

  margin: 0 auto;

}



.operational-process-intro {

  width: 100%;

  margin-bottom: 70px;

}



.operational-process-description {

  max-width: 1120px;



  margin: 0;



  color: rgba(255, 255, 255, 0.68);



  font-size: clamp(1.2rem, 2.1vw, 1.8rem);

  line-height: 1.45;

  font-weight: 500;

}



/* ============================================================

   OPERATIONAL GRID

   ============================================================ */



.operational-process-grid {

  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  column-gap: 90px;

  row-gap: 55px;



  width: 100%;

}



/* ============================================================

   OPERATIONAL STEP

   ============================================================ */



.operational-step {

  position: relative;

  min-width: 0;

}



.operational-step-number {

  display: block;



  margin-bottom: 22px;



  color: #159fe5;



  font-size: 1.8rem;

  line-height: 1;

  font-weight: 600;



  letter-spacing: -0.03em;

}



.operational-step-line {

  width: 100%;

  height: 8px;



  margin-bottom: 25px;



  background: #159fe5;

}



.operational-step-title {

  margin: 0 0 18px;



  color: #ffffff;



  font-size: clamp(1.5rem, 2.2vw, 2rem);

  line-height: 1.1;

  font-weight: 650;



  letter-spacing: -0.025em;

}



.operational-step-description {

  max-width: 520px;



  margin: 0;



  color: rgba(255, 255, 255, 0.94);



  font-size: clamp(1rem, 1.45vw, 1.35rem);

  line-height: 1.45;

  font-weight: 450;

}



/* ============================================================

   SERVICE DETAIL

   ============================================================ */



.service-detail {

  position: relative;



  width: 100%;

  min-height: 100vh;



  display: flex;

  align-items: center;



  background: #07091a;



  overflow: hidden;

}



.service-detail-container {

  position: relative;



  width: min(1100px, 88vw);

  min-height: 100vh;



  margin: 0 auto;



  display: flex;

  flex-direction: column;

}



/* ============================================================

   SERVICE DETAIL VISUAL

   ============================================================ */



.service-detail-visual {

  width: 100%;

  height: 390px;



  display: flex;

  align-items: center;

  justify-content: flex-end;



  overflow: hidden;



  opacity: 0;

  transform: translateY(35px);



  animation: serviceDetailIn 1.1s cubic-bezier(0.22, 0.9, 0.3, 1) forwards;

}



.service-detail-image {

  display: block;



  width: min(760px, 65vw);

  max-height: 360px;



  object-fit: contain;

  object-position: center right;



  opacity: 1;



  transform: translateY(5px);

}



/* ============================================================

   SERVICE DETAIL HEADING

   ============================================================ */



.service-detail-heading {

  width: 100%;



  padding-bottom: 90px;



  opacity: 0;

  transform: translateY(35px);



  animation: serviceDetailIn 1.1s cubic-bezier(0.22, 0.9, 0.3, 1) 0.2s forwards;

}



.service-detail-number {

  display: flex;

  align-items: center;



  gap: 22px;



  margin-bottom: 20px;

}



.service-detail-number > span:first-child {

  color: #159fe5;



  font-size: clamp(1.6rem, 2.4vw, 2.3rem);

  line-height: 1;

  font-weight: 600;



  letter-spacing: -0.04em;

}



.service-detail-category {

  color: #159fe5;



  font-size: clamp(1.4rem, 2.3vw, 2.2rem);

  line-height: 1;

  font-weight: 600;



  letter-spacing: -0.04em;

}



.service-detail-title {

  margin: 0;



  max-width: 1150px;



  color: #ffffff;



  font-size: clamp(3.8rem, 7vw, 7.5rem);

  line-height: 0.95;

  font-weight: 600;



  letter-spacing: -0.055em;

}



.service-detail-description {

  max-width: 1120px;



  margin: 55px 0 0;



  color: rgba(255, 255, 255, 0.66);



  font-size: clamp(1.15rem, 1.8vw, 1.65rem);

  line-height: 1.45;

  font-weight: 500;

}



/* ============================================================

   SERVICE DETAIL LINE

   ============================================================ */



.service-detail-line {

  width: 100%;

  margin-top: 45px;

  overflow: hidden;

}



.service-detail-line span {

  display: block;



  width: 370px;

  max-width: 55%;

  height: 6px;



  background: #159fe5;



  transform-origin: left center;

}



/* ============================================================

   URBAN DISTRIBUTION

   ============================================================ */



.urban-distribution-section {

  position: relative;



  width: 100%;

  min-height: 100vh;



  display: flex;

  align-items: center;



  padding: 90px 5vw;



  background: #07070b;

  color: #ffffff;



  overflow: hidden;

}



.urban-distribution-container {

  width: 100%;

  max-width: 1350px;



  margin: 0 auto;

}



/* ============================================================

   URBAN HEADER

   ============================================================ */



.urban-distribution-header {

  width: 100%;

  margin-bottom: 30px;

}



.urban-distribution-label {

  display: block;



  margin-bottom: 16px;



  color: #1595e5;



  font-size: 38px;

  line-height: 1;

  font-weight: 800;



  letter-spacing: -1.5px;

  text-transform: uppercase;

}



.urban-distribution-title {

  max-width: 1250px;



  margin: 0;



  color: #ffffff;



  font-size: clamp(38px, 4vw, 64px);

  line-height: 1.02;

  font-weight: 800;



  letter-spacing: -2px;

}



.urban-distribution-description {

  max-width: 1250px;



  margin: 18px 0 0;



  color: rgba(255, 255, 255, 0.68);



  font-size: clamp(20px, 1.7vw, 30px);

  line-height: 1.25;

  font-weight: 700;



  letter-spacing: -0.5px;

}



/* ============================================================

   URBAN CONTENT

   ============================================================ */



.urban-distribution-content {

  width: min(1050px, 88vw);

  min-height: 90vh;



  margin: 0 auto;



  display: grid;



  grid-template-columns:

    minmax(0, 1fr)

    5px

    minmax(0, 1fr);



  column-gap: 45px;



  align-items: center;

}



/* ============================================================

   URBAN IMAGE

   ============================================================ */



.urban-distribution-image-wrapper {

  width: 100%;

  height: 550px;



  overflow: hidden;



  border-radius: 12px;



  background: #111426;

}



.urban-distribution-image {

  display: block;



  width: 100%;

  height: 100%;



  object-fit: cover;



  transition: transform 0.7s ease;

}



.urban-distribution-image-wrapper:hover .urban-distribution-image {

  transform: scale(1.035);

}



/* ============================================================

   URBAN INFO

   ============================================================ */



.urban-distribution-info {

  position: relative;



  min-height: 465px;



  display: flex;

  align-items: stretch;



  gap: 22px;

}



.urban-distribution-line {

  flex: 0 0 5px;



  width: 5px;



  margin-top: 18px;



  background: #1595e5;

}



.urban-distribution-text {

  max-width: 650px;

  padding: 18px 0 0;

}



/* ============================================================

   URBAN NUMBER

   ============================================================ */



.urban-distribution-number {

  display: block;



  margin-bottom: 14px;



  color: #1595e5;



  font-size: 48px;

  line-height: 1;

  font-weight: 800;



  letter-spacing: -2px;

}



/* ============================================================

   URBAN CARD TITLE

   ============================================================ */



.urban-distribution-card-title {

  margin: 0 0 20px;



  color: #ffffff;



  font-size: clamp(32px, 3vw, 46px);

  line-height: 1.05;

  font-weight: 800;



  letter-spacing: -1.5px;

}



.urban-distribution-card-description {

  max-width: 650px;



  margin: 0;



  color: rgba(255, 255, 255, 0.68);



  font-size: clamp(21px, 1.6vw, 29px);

  line-height: 1.4;

  font-weight: 700;

}



/* ============================================================

   SERVICE FEATURE

   ============================================================ */



.service-feature {

  position: relative;



  width: 100%;

  min-height: 100vh;



  display: flex;

  align-items: center;



  background: #07091a;



  overflow: hidden;

}



.service-feature-container {

  width: min(1050px, 88vw);

  min-height: 100vh;



  margin: 0 auto;



  display: grid;



  grid-template-columns:

    minmax(0, 1fr)

    5px

    minmax(0, 1fr);



  column-gap: 45px;



  align-items: center;

}



/* ============================================================

   SERVICE FEATURE CONTENT

   ============================================================ */



.service-feature-content {

  display: flex;

  flex-direction: column;

  align-items: flex-end;



  padding: 60px 0;



  text-align: right;



  opacity: 0;

  transform: translateX(-35px);



  animation: serviceFeatureContentIn 1.1s cubic-bezier(0.22, 0.9, 0.3, 1) 0.15s

    forwards;

}



.service-milla-content {

  display: flex;

  flex-direction: column;

  align-items: flex-start;



  padding: 60px 0;

}



/* ============================================================

   SERVICE FEATURE NUMBER

   ============================================================ */



.service-feature-number {

  width: 100%;

  margin-bottom: 35px;

}



.service-feature-number span {

  display: block;



  color: #159fe5;



  font-size: clamp(3rem, 5vw, 4.5rem);

  line-height: 1;

  font-weight: 650;



  letter-spacing: -0.055em;

}



/* ============================================================

   SERVICE FEATURE TITLE

   ============================================================ */



.service-feature-title {

  width: 100%;



  margin: 0;



  color: #ffffff;



  font-size: clamp(2.8rem, 4.5vw, 4.5rem);

  line-height: 1.05;

  font-weight: 600;



  letter-spacing: -0.045em;

}



/* ============================================================

   SERVICE FEATURE DESCRIPTION

   ============================================================ */



.service-feature-description {

  width: 100%;

  max-width: 610px;



  margin: 28px 0 0;



  color: rgba(255, 255, 255, 0.68);



  font-size: clamp(1.15rem, 1.65vw, 1.55rem);

  line-height: 1.5;

  font-weight: 500;

}



/* ============================================================

   SERVICE FEATURE DIVIDER

   ============================================================ */



.service-feature-divider {

  width: 5px;

  height: 535px;

  max-height: 70vh;



  display: flex;

  align-items: center;

  justify-content: center;



  opacity: 0;

  transform: scaleY(0);

  transform-origin: center;



  animation: serviceFeatureDividerIn 1s ease 0.35s forwards;

}



.service-feature-divider span {

  display: block;



  width: 5px;

  height: 100%;



  background: #159fe5;

}



/* ============================================================

   SERVICE FEATURE IMAGE

   ============================================================ */



.service-feature-image-wrapper {

  width: 100%;

  height: 550px;



  overflow: hidden;



  border-radius: 12px;



  background: #111426;



  opacity: 0;

  transform: translateX(35px);



  animation: serviceFeatureImageIn 1.1s cubic-bezier(0.22, 0.9, 0.3, 1) 0.25s

    forwards;

}



.service-feature-image {

  display: block;



  width: 100%;

  height: 100%;



  object-fit: cover;

  object-position: center;



  border-radius: 12px;

}



/* ============================================================

   SERVICE FEATURE 03

   ============================================================ */



.service-feature-03 .service-feature-content {

  grid-column: 3;



  align-items: flex-start;

  text-align: left;

}



.service-feature-03 .service-feature-image-wrapper {

  grid-column: 1;

  grid-row: 1;

}



.service-feature-03 .service-feature-divider {

  grid-column: 2;

  grid-row: 1;

}



.service-feature-03 .service-feature-number {

  margin-bottom: 35px;

}



/* ============================================================

   SERVICE FEATURE ANIMATIONS

   ============================================================ */



@keyframes serviceDetailIn {

  from {

    opacity: 0;

    transform: translateY(35px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes serviceFeatureContentIn {

  from {

    opacity: 0;

    transform: translateX(-35px);

  }



  to {

    opacity: 1;

    transform: translateX(0);

  }

}



@keyframes serviceFeatureDividerIn {

  from {

    opacity: 0;

    transform: scaleY(0);

  }



  to {

    opacity: 1;

    transform: scaleY(1);

  }

}



@keyframes serviceFeatureImageIn {

  from {

    opacity: 0;

    transform: translateX(35px);

  }



  to {

    opacity: 1;

    transform: translateX(0);

  }

}



/* ============================================================

   TABLET

   ============================================================ */



@media (max-width: 950px) {

  .services-overview {

    padding: 100px 0 80px;

  }



  .services-overview-grid {

    grid-template-columns: 1fr;



    max-width: 650px;



    margin: 0 auto;

  }



  .service-overview-card {

    min-height: 330px;

  }

}



@media (max-width: 900px) {

  .logistica-content {

    width: min(92vw, 760px);



    padding-top: calc(var(--header-height) + 70px);

  }



  .logistica-title {

    font-size: clamp(2rem, 5vw, 3.2rem);

  }



  .logistica-services {

    grid-template-columns: repeat(2, minmax(0, 1fr));



    gap: 25px 30px;

  }



  .operational-process {

    padding: 90px 0;

  }



  .operational-process-container {

    width: min(760px, 90vw);

  }



  .operational-process-grid {

    column-gap: 45px;

    row-gap: 50px;

  }



  .service-detail-container {

    width: min(90vw, 760px);

  }



  .service-detail-visual {

    height: 320px;

    justify-content: center;

  }



  .service-detail-image {

    width: 80vw;

    max-height: 300px;

    object-position: center;

  }



  .service-detail-title {

    font-size: clamp(3rem, 8vw, 5rem);

  }



  .service-detail-description {

    margin-top: 40px;

  }



  .urban-distribution-section {

    padding: 75px 6vw;

  }



  .urban-distribution-content {

    grid-template-columns: 1fr;



    padding-left: 0;



    gap: 35px;

  }



  .urban-distribution-image-wrapper {

    max-width: 650px;

  }



  .urban-distribution-info {

    min-height: auto;

  }



  .service-feature-container {

    width: min(90vw, 760px);



    grid-template-columns:

      minmax(0, 1fr)

      4px

      minmax(0, 1fr);



    column-gap: 30px;

  }



  .service-feature-content {

    padding: 50px 0;

  }



  .service-feature-number span {

    font-size: 3rem;

  }



  .service-feature-title {

    font-size: clamp(2.3rem, 5vw, 3.5rem);

  }



  .service-feature-description {

    font-size: 1.1rem;

  }



  .service-feature-divider {

    width: 4px;

    height: 500px;

  }



  .service-feature-divider span {

    width: 4px;

  }



  .service-feature-image-wrapper {

    height: 500px;

  }



  .service-feature-03 .service-feature-content {

    grid-column: 3;



    align-items: flex-start;

    text-align: left;

  }

}



/* ============================================================

   MOBILE

   ============================================================ */



@media (max-width: 600px) {

  .logistica-page {

    min-height: 100svh;

    height: 100svh;

  }



  .logistica-slide {

    background-position: center center;

  }



  .logistica-overlay {

    background: linear-gradient(

      180deg,

      rgba(0, 0, 0, 0.95) 0%,

      rgba(0, 0, 0, 0.75) 45%,

      rgba(0, 0, 0, 0.72) 100%

    );

  }



  .logistica-content {

    width: 90vw;



    min-height: 100svh;



    padding-top: calc(var(--header-height) + 50px);

    padding-bottom: 25px;

  }



  .logistica-title {

    font-size: clamp(1.8rem, 8vw, 2.8rem);

    line-height: 1.16;

  }



  .logistica-line {

    margin-top: 25px;

  }



  .logistica-line span {

    height: 4px;

  }



  .logistica-services {

    grid-template-columns: 1fr;



    gap: 17px;



    margin-top: 25px;

  }



  .logistica-service-title {

    font-size: 1.05rem;

    line-height: 1.3;

  }



  .logistica-bottom {

    margin-top: 20px;

  }



  .logistica-bottom-line {

    height: 30px;

  }



  .logistica-location {

    font-size: 1.15rem;

  }



  /* -----------------------------------------

     SERVICES OVERVIEW

     ----------------------------------------- */



  .services-overview {

    min-height: auto;



    padding: 80px 0 70px;

  }



  .services-overview-container {

    width: 90vw;

  }



  .services-overview-header {

    margin-bottom: 45px;

  }



  .services-eyebrow {

    margin-bottom: 22px;

  }



  .services-overview-title {

    font-size: clamp(2.1rem, 9vw, 3rem);

  }



  .services-overview-description {

    margin-top: 22px;

    font-size: 1rem;

  }



  .services-overview-grid {

    gap: 20px;

  }



  .service-overview-card {

    min-height: 310px;



    padding: 30px 28px;



    border-radius: 30px;

  }



  .service-overview-card-top {

    column-gap: 17px;

  }



  .service-overview-number {

    font-size: 4rem;

  }



  .service-overview-line {

    width: 2px;

    height: 70px;

  }



  .service-overview-card-title {

    font-size: 1.55rem;

  }



  .service-overview-card-description {

    margin-top: 30px;

    font-size: 1rem;

  }



  /* -----------------------------------------

     OPERATIONAL PROCESS

     ----------------------------------------- */



  .operational-process {

    min-height: auto;



    padding: 75px 0 80px;

  }



  .operational-process-container {

    width: 90vw;

  }



  .operational-process-intro {

    margin-bottom: 50px;

  }



  .operational-process-description {

    font-size: 1.1rem;

    line-height: 1.5;

  }



  .operational-process-grid {

    grid-template-columns: 1fr;



    gap: 45px;

  }



  .operational-step-number {

    margin-bottom: 16px;



    font-size: 1.5rem;

  }



  .operational-step-line {

    height: 5px;



    margin-bottom: 20px;

  }



  .operational-step-title {

    margin-bottom: 14px;



    font-size: 1.45rem;

  }



  .operational-step-description {

    font-size: 1rem;

    line-height: 1.5;

  }



  /* -----------------------------------------

     SERVICE DETAIL

     ----------------------------------------- */



  .service-detail {

    min-height: 100svh;

  }



  .service-detail-container {

    width: 90vw;

    min-height: 100svh;

  }



  .service-detail-visual {

    height: 270px;



    padding-top: 60px;



    justify-content: center;

  }



  .service-detail-image {

    width: 92vw;

    max-height: 240px;



    object-position: center;

  }



  .service-detail-heading {

    padding-bottom: 60px;

  }



  .service-detail-number {

    gap: 15px;



    margin-bottom: 18px;

  }



  .service-detail-number > span:first-child {

    font-size: 1.4rem;

  }



  .service-detail-category {

    font-size: 1.35rem;

  }



  .service-detail-title {

    font-size: clamp(2.8rem, 12vw, 4.2rem);

    line-height: 0.98;

  }



  .service-detail-description {

    margin-top: 35px;



    font-size: 1.05rem;

    line-height: 1.5;

  }



  .service-detail-line {

    margin-top: 32px;

  }



  .service-detail-line span {

    width: 220px;

    max-width: 70%;

    height: 5px;

  }



  /* -----------------------------------------

     URBAN DISTRIBUTION

     ----------------------------------------- */



  .urban-distribution-section {

    min-height: auto;



    padding: 70px 22px;

  }



  .urban-distribution-label {

    font-size: 27px;

    letter-spacing: -1px;

  }



  .urban-distribution-title {

    font-size: 37px;

    letter-spacing: -1.5px;

  }



  .urban-distribution-description {

    font-size: 20px;

    line-height: 1.3;

  }



  .urban-distribution-content {

    gap: 28px;

  }



  .urban-distribution-image-wrapper {

    height: auto;

    aspect-ratio: 1 / 1;

  }



  .urban-distribution-info {

    min-height: 300px;



    gap: 17px;

  }



  .urban-distribution-line {

    flex-basis: 4px;

    width: 4px;



    margin-top: 10px;

  }



  .urban-distribution-text {

    padding-top: 8px;

  }



  .urban-distribution-number {

    margin-bottom: 10px;



    font-size: 38px;

  }



  .urban-distribution-card-title {

    margin-bottom: 15px;



    font-size: 31px;

  }



  .urban-distribution-card-description {

    font-size: 19px;

    line-height: 1.4;

  }



  /* -----------------------------------------

     SERVICE FEATURE

     ----------------------------------------- */



  .service-feature {

    min-height: auto;



    padding: 80px 0;

  }



  .service-feature-container {

    width: 90vw;

    min-height: auto;



    display: flex;

    flex-direction: column;

    align-items: stretch;



    gap: 0;

  }



  .service-feature-content {

    order: 1;



    align-items: flex-start;



    padding: 0;



    text-align: left;

  }



  .service-feature-number {

    margin-bottom: 20px;

  }



  .service-feature-number span {

    font-size: 2.8rem;

  }



  .service-feature-title {

    font-size: clamp(2.4rem, 10vw, 3.5rem);

    line-height: 1;

  }



  .service-feature-description {

    margin-top: 25px;



    font-size: 1.05rem;

    line-height: 1.5;

  }



  .service-feature-divider {

    order: 2;



    width: 100%;

    height: 4px;

    max-height: none;



    margin: 35px 0;

  }



  .service-feature-divider span {

    width: 100%;

    height: 4px;

  }



  .service-feature-image-wrapper {

    order: 3;



    width: 100%;

    height: 360px;



    border-radius: 10px;

  }



  .service-feature-image {

    border-radius: 10px;

  }



  /* -----------------------------------------

     SERVICE FEATURE 03

     ----------------------------------------- */



  .service-feature-03 .service-feature-container {

    display: flex;

    flex-direction: column;

  }



  .service-feature-03 .service-feature-image-wrapper {

    order: 1;

  }



  .service-feature-03 .service-feature-divider {

    order: 2;

  }



  .service-feature-03 .service-feature-content {

    order: 3;



    align-items: flex-start;



    text-align: left;

  }

}



/* ============================================================

   REDUCED MOTION

   ============================================================ */



@media (prefers-reduced-motion: reduce) {

  .logistica-content,

  .logistica-line span,

  .logistica-service,

  .logistica-bottom,

  .service-detail-visual,

  .service-detail-heading,

  .service-feature-content,

  .service-feature-divider,

  .service-feature-image-wrapper {

    animation: none;

    opacity: 1;

    transform: none;

  }



  .logistica-slide,

  .service-overview-card,

  .urban-distribution-image {

    transition: none;

  }

}



/* ============================================================

   TRANSICIONES DE SECCIONES

   La primera sección hero NO se modifica

   ============================================================ */



/* ============================================================

   TRANSICIONES DE SECCIONES

   ============================================================ */



.services-overview,

.operational-process,

.service-detail,

.urban-distribution-section,

.service-feature,

.service-feature-03 {

  opacity: 0;

  transform: translateY(60px);

  transition:

    opacity 0.9s ease,

    transform 0.9s ease;

}



.services-overview.is-visible,

.operational-process.is-visible,

.service-detail.is-visible,

.urban-distribution-section.is-visible,

.service-feature.is-visible,

.service-feature-03.is-visible {

  opacity: 1;

  transform: translateY(0);

}





/* ============================================================

   ANIMACIÓN INTERNA DE LOS ELEMENTOS

   ============================================================ */



/* ============================================================

   TRANSICIONES DE SECCIONES - MÁS LENTAS

   ============================================================ */



.services-overview,

.operational-process,

.service-detail,

.urban-distribution-section,

.service-feature,

.service-feature-03,

.milano-section,

.concierge-section,

#bancali.bancali-section {

  opacity: 0;

  transform: translateY(80px);

  transition:

    opacity 1.8s cubic-bezier(0.22, 0.9, 0.3, 1),

    transform 1.8s cubic-bezier(0.22, 0.9, 0.3, 1);

}



/* Estado visible activado por JavaScript */

.services-overview.is-visible,

.operational-process.is-visible,

.service-detail.is-visible,

.urban-distribution-section.is-visible,

.service-feature.is-visible,

.service-feature-03.is-visible,

.milano-section.is-visible,

.concierge-section.is-visible,

#bancali.bancali-section.is-visible {

  opacity: 1;

  transform: translateY(0);

}



.services-overview.is-visible .service-card,

.operational-process.is-visible .process-item,

.service-detail.is-visible .service-detail-content,

.urban-distribution-section.is-visible .service-feature,

.service-feature.is-visible .service-feature-content,

.service-feature-03.is-visible .service-feature-content {

  animation: logisticaContentIn 0.8s ease forwards;

}



.services-overview.is-visible .service-card,

.operational-process.is-visible .process-item,

.service-detail.is-visible .service-detail-content,

.urban-distribution-section.is-visible .service-feature,

.service-feature.is-visible .service-feature-content,

.service-feature-03.is-visible .service-feature-content {

  animation: logisticaContentIn 1.6s cubic-bezier(0.22, 0.9, 0.3, 1) forwards;

}



/* ============================================================

   KEYFRAME

   ============================================================ */



@keyframes logisticaContentIn {

  from {

    opacity: 0;

    transform: translateY(40px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}





/* ============================================================

   REDUCED MOTION

   ============================================================ */



@media (prefers-reduced-motion: reduce) {

  .services-overview,

  .operational-process,

  .service-detail,

  .urban-distribution-section,

  .service-feature,

  .service-feature-03 {

    opacity: 1;

    transform: none;

    transition: none;

  }



  .services-overview.is-visible .service-card,

  .operational-process.is-visible .process-item,

  .service-detail.is-visible .service-detail-content,

  .urban-distribution-section.is-visible .service-feature,

  .service-feature.is-visible .service-feature-content,

  .service-feature-03.is-visible .service-feature-content {

    animation: none;

  }

}



/* ============================================================

   ÚLTIMA SECCIÓN

   ============================================================ */



.service-feature-03 {

  width: 100%;

  min-height: auto;



  padding: 120px 5vw 130px;



  display: flex;

  justify-content: center;

  align-items: center;



  background: #ffffff;

  color: #111111;



  box-sizing: border-box;

}



/* ============================================================

   CONTENEDOR

   ============================================================ */



.service-feature-03 .service-feature-container {

  width: 100%;

  max-width: 1400px;



  margin: 0 auto;



  display: flex;

  flex-direction: column;



  align-items: center;

  justify-content: center;



  text-align: center;



  gap: 0;

}



/* ============================================================

   CONTENIDO

   ============================================================ */



.service-feature-03 .service-feature-content {

  width: 100%;

  max-width: 1400px;



  margin: 0 auto;



  display: flex;

  flex-direction: column;



  align-items: center;

  justify-content: center;



  text-align: center;

}



/* ============================================================

   TÍTULO

   ============================================================ */



.service-feature-03 .service-feature-title {

  width: 100%;

  max-width: 950px;



  margin: 0 auto 45px;



  text-align: center;



  font-size: clamp(2.2rem, 4vw, 4.5rem);

  line-height: 1.05;

  font-weight: 500;

  letter-spacing: -0.04em;

}



/* ============================================================

   IMAGEN

   ============================================================ */



.service-feature-03 .service-feature-image-wrapper {

  width: 100%;

  max-width: 1350px;



  margin: 0 auto;



  display: flex;

  justify-content: center;

  align-items: center;



  overflow: hidden;

}



/* Imagen */



.service-feature-03 .service-feature-image-wrapper img {

  display: block;



  width: 100%;

  height: auto;



  max-height: 700px;



  object-fit: cover;



  transition: transform 0.8s ease;

}



/* Efecto muy sutil al pasar el mouse */



.service-feature-03 .service-feature-image-wrapper:hover img {

  transform: scale(1.015);

}



/* ============================================================

   PÁRRAFO DEBAJO DE LA IMAGEN

   ============================================================ */



.service-feature-03 .service-feature-description {

  width: 100%;

  max-width: 900px;



  margin: 45px auto 0;



  text-align: center;



  font-size: clamp(1rem, 1.2vw, 1.2rem);



  line-height: 1.8;



  font-weight: 400;



  color: rgba(17, 17, 17, 0.72);

}



/* ============================================================

   LÍNEA DECORATIVA

   ============================================================ */



.service-feature-03 .service-feature-divider {

  width: 70px;

  height: 1px;



  margin: 0 auto 35px;



  background: rgba(17, 17, 17, 0.35);

}



/* ============================================================

   TABLET

   ============================================================ */



@media (max-width: 900px) {

  .service-feature-03 {

    padding: 90px 5vw 100px;

  }



  .service-feature-03 .service-feature-title {

    margin-bottom: 35px;

  }



  .service-feature-03 .service-feature-image-wrapper {

    max-width: 100%;

  }



  .service-feature-03 .service-feature-description {

    margin-top: 35px;

  }

}



/* ============================================================

   MOBILE

   ============================================================ */



@media (max-width: 600px) {

  .service-feature-03 {

    padding: 75px 20px 85px;

  }



  .service-feature-03 .service-feature-title {

    font-size: 2.1rem;

    line-height: 1.1;



    margin-bottom: 30px;

  }



  .service-feature-03 .service-feature-image-wrapper {

    width: 100%;

  }



  .service-feature-03 .service-feature-image-wrapper img {

    width: 100%;

    max-height: 500px;

  }



  .service-feature-03 .service-feature-description {

    margin-top: 30px;



    font-size: 1rem;

    line-height: 1.7;

  }

}



/* ============================================================

   SEZIONE BANCALI - FLOTTA E ACCESSO ALLA CITTÀ

   ============================================================ */



#bancali.bancali-section {

  width: 100%;

  padding: 110px 40px 120px;

  background: #0b1120; /* Azul oscuro como en la imagen */

  color: #ffffff;

  box-sizing: border-box;

}



/* CONTENEDOR */

#bancali .bancali-container {

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}



/* TÍTULOS */

#bancali .bancali-heading {

  width: 100%;

  max-width: 900px;

  margin: 0 auto 45px;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}



#bancali .bancali-heading h2 {

  margin: 0;

  color: #159fe5; /* Azul como en la imagen */

  font-size: clamp(2.2rem, 4vw, 3.6rem);

  font-weight: 700;

  line-height: 1.1;

  letter-spacing: -0.02em;

  text-align: center;

  text-transform: uppercase;

}



#bancali .bancali-heading p {

  margin: 20px 0 0;

  color: #ffffff;

  font-size: clamp(1.6rem, 2.6vw, 2.4rem);

  font-weight: 500;

  line-height: 1.2;

  letter-spacing: -0.01em;

  text-align: center;

}



/* IMAGEN */

#bancali .bancali-image-wrapper {

  width: 100%;

  max-width: 900px;

  margin: 0 auto;

  overflow: hidden;

  border-radius: 22px; /* Bordes redondeados como en la imagen */

  display: flex;

  justify-content: center;

  align-items: center;

}



#bancali .bancali-image {

  display: block;

  width: 100%;

  height: auto;

  max-height: 500px;

  object-fit: cover;

  object-position: center;

  border-radius: 22px;

  transition: transform 0.8s ease;

}



#bancali .bancali-image-wrapper:hover .bancali-image {

  transform: scale(1.015);

}



/* TEXTO DESCRIPTIVO */

#bancali .bancali-description {

  width: 100%;

  max-width: 850px;

  margin: 45px auto 0;

  color: rgba(255, 255, 255, 0.82);

  font-size: clamp(1rem, 1.2vw, 1.18rem);

  font-weight: 400;

  line-height: 1.8;

  letter-spacing: 0.01em;

  text-align: center;

}



/* ============================================================

   TABLET

   ============================================================ */



@media (max-width: 900px) {

  #bancali.bancali-section {

    padding: 90px 30px 100px;

  }



  #bancali .bancali-heading {

    margin-bottom: 35px;

  }



  #bancali .bancali-heading h2 {

    font-size: clamp(1.8rem, 5vw, 2.6rem);

  }



  #bancali .bancali-heading p {

    font-size: clamp(1.3rem, 3vw, 1.8rem);

  }



  #bancali .bancali-image-wrapper {

    max-width: 100%;

    border-radius: 18px;

  }



  #bancali .bancali-image {

    border-radius: 18px;

    max-height: 450px;

  }



  #bancali .bancali-description {

    max-width: 750px;

    margin-top: 35px;

  }

}



/* ============================================================

   MOBILE

   ============================================================ */



@media (max-width: 600px) {

  #bancali.bancali-section {

    padding: 70px 20px 80px;

  }



  #bancali .bancali-heading {

    margin-bottom: 28px;

  }



  #bancali .bancali-heading h2 {

    font-size: 1.8rem;

    line-height: 1.15;

  }



  #bancali .bancali-heading p {

    margin-top: 14px;

    font-size: 1.3rem;

    line-height: 1.25;

  }



  #bancali .bancali-image-wrapper {

    width: 100%;

    border-radius: 14px;

  }



  #bancali .bancali-image {

    border-radius: 14px;

    max-height: 320px;

  }



  #bancali .bancali-description {

    margin-top: 28px;

    font-size: 0.95rem;

    line-height: 1.7;

  }

}



/* ============================================================

   ACCESSIBILITÀ

   ============================================================ */



@media (prefers-reduced-motion: reduce) {

  #bancali .bancali-image {

    transition: none;

  }

}



/* ============================================================

   SEZIONE - CENTRO DI MILANO / TRACCIAMENTO GPS

   ============================================================ */



.milano-section {

  position: relative;

  width: 100%;

  min-height: 100vh;



  display: flex;

  align-items: center;



  padding: 110px 5vw;



  background: #07091a;

  color: #ffffff;



  overflow: hidden;

}



.milano-container {

  width: 100%;

  max-width: 1400px;



  margin: 0 auto;



  display: grid;

  grid-template-columns: 1fr 380px;

  column-gap: 60px;

  row-gap: 60px;



  align-items: start;

}



/* ============================================================

   BLOQUES DE TEXTO

   ============================================================ */



.milano-block {

  max-width: 850px;

}



.milano-title {

  margin: 0 0 18px;



  color: #ffffff;



  font-size: clamp(2rem, 4vw, 3.5rem);

  line-height: 1.05;

  font-weight: 700;



  letter-spacing: -0.03em;

}



/* Línea azul decorativa debajo del título */

.milano-line {

  width: 180px;

  height: 5px;



  margin-bottom: 22px;



  background: #159fe5;

}



.milano-description {

  max-width: 850px;



  margin: 0;



  color: rgba(255, 255, 255, 0.85);



  font-size: clamp(1rem, 1.5vw, 1.35rem);

  line-height: 1.5;

  font-weight: 500;

}



/* ============================================================

   IMAGEN

   ============================================================ */



.milano-image-wrapper {

  grid-column: 2;

  grid-row: 1 / 3;



  width: 100%;

  height: 100%;



  display: flex;

  align-items: center;

  justify-content: flex-end;



  overflow: hidden;



  border-radius: 12px;

}



.milano-image {

  display: block;



  width: 100%;

  height: 100%;

  max-height: 480px;



  object-fit: cover;

  object-position: center;



  border-radius: 12px;



  transition: transform 0.8s ease;

}



.milano-image-wrapper:hover .milano-image {

  transform: scale(1.02);

}



/* ============================================================

   TABLET

   ============================================================ */



@media (max-width: 950px) {

  .milano-section {

    padding: 90px 5vw;

  }



  .milano-container {

    grid-template-columns: 1fr;

    column-gap: 0;

    row-gap: 50px;

  }



  .milano-image-wrapper {

    grid-column: 1;

    grid-row: auto;



    max-width: 500px;



    margin: 0 auto;

  }



  .milano-image {

    max-height: 400px;

  }

}



/* ============================================================

   MOBILE

   ============================================================ */



@media (max-width: 600px) {

  .milano-section {

    padding: 75px 22px 85px;

  }



  .milano-title {

    font-size: clamp(1.8rem, 8vw, 2.5rem);

  }



  .milano-line {

    width: 120px;

    height: 4px;



    margin-bottom: 18px;

  }



  .milano-description {

    font-size: 1rem;

    line-height: 1.55;

  }



  .milano-image {

    max-height: 320px;

  }

}



/* ============================================================

   REDUCED MOTION

   ============================================================ */



@media (prefers-reduced-motion: reduce) {

  .milano-image {

    transition: none;

  }



  .milano-image-wrapper:hover .milano-image {

    transform: none;

  }

}



/* ============================================================

   SEZIONE - LUXURY PERSONAL CONCIERGE

   ============================================================ */



.concierge-section {

  position: relative;

  width: 100%;

  min-height: 100vh;



  display: flex;

  align-items: center;



  padding: 120px 5vw;



  background: #07091a;

  color: #ffffff;



  overflow: hidden;

}



.concierge-container {

  width: 100%;

  max-width: 1200px;



  margin: 0 auto;



  display: flex;

  flex-direction: column;

  align-items: flex-start;



  gap: 0;

}



/* ============================================================

   IMAGEN DECORATIVA (ARRIBA)

   ============================================================ */



.concierge-image-wrapper {

  width: 100%;

  max-width: 750px;



  margin: 0 auto 40px;



  display: flex;

  justify-content: center;

  align-items: center;



  overflow: visible;

}



.concierge-image {

  display: block;



  width: 100%;

  height: auto;

  max-height: 280px;



  object-fit: contain;



  transition: transform 0.8s ease;

}



.concierge-image-wrapper:hover .concierge-image {

  transform: scale(1.02);

}



/* ============================================================

   CONTENIDO

   ============================================================ */



.concierge-content {

  width: 100%;

  max-width: 850px;



  display: flex;

  flex-direction: column;

  align-items: flex-start;



  margin: 0 auto;

}



/* Etiqueta "02 SERVIZIO" */

.concierge-label {

  display: block;



  margin-bottom: 22px;



  color: #d4ad4d; /* Dorado */



  font-size: clamp(1rem, 1.5vw, 1.25rem);

  line-height: 1;

  font-weight: 700;



  letter-spacing: 0.08em;

  text-transform: uppercase;

}



/* Título principal */

.concierge-title {

  margin: 0 0 30px;



  color: #ffffff;



  font-size: clamp(2.8rem, 6vw, 5.5rem);

  line-height: 1.02;

  font-weight: 700;



  letter-spacing: -0.04em;

}



/* Descripción */

.concierge-description {

  max-width: 850px;



  margin: 0 0 35px;



  color: rgba(255, 255, 255, 0.85);



  font-size: clamp(1rem, 1.5vw, 1.35rem);

  line-height: 1.55;

  font-weight: 500;

}



/* Línea decorativa DORADA (como en la imagen) */

.concierge-line {

  width: 280px;

  height: 5px;



  margin-top: 10px;



  background: #d4ad4d; /* Dorado */

}



/* ============================================================

   TABLET

   ============================================================ */



@media (max-width: 950px) {

  .concierge-section {

    padding: 100px 5vw;

  }



  .concierge-image-wrapper {

    max-width: 600px;

    margin-bottom: 35px;

  }



  .concierge-image {

    max-height: 240px;

  }



  .concierge-title {

    font-size: clamp(2.4rem, 7vw, 4rem);

  }



  .concierge-line {

    width: 220px;

    height: 4px;

  }

}



/* ============================================================

   MOBILE

   ============================================================ */



@media (max-width: 600px) {

  .concierge-section {

    min-height: auto;

    padding: 80px 22px 90px;

  }



  .concierge-image-wrapper {

    max-width: 100%;

    margin-bottom: 30px;

  }



  .concierge-image {

    max-height: 180px;

  }



  .concierge-label {

    margin-bottom: 16px;

    font-size: 0.9rem;

  }



  .concierge-title {

    margin-bottom: 22px;

    font-size: clamp(2rem, 9vw, 3rem);

    line-height: 1.05;

  }



  .concierge-description {

    margin-bottom: 28px;

    font-size: 1rem;

    line-height: 1.55;

  }



  .concierge-line {

    width: 150px;

    height: 4px;

  }

}



/* ============================================================

   REDUCED MOTION

   ============================================================ */



@media (prefers-reduced-motion: reduce) {

  .concierge-image {

    transition: none;

  }



  .concierge-image-wrapper:hover .concierge-image {

    transform: none;

  }

}