.how-arrive-container {
    background: var(--color-background-pg);
}

.how-arrive {
    max-width: 600px;
}
.how-arrive-container .commerce-kicker {
    margin-bottom: 16px;
    color: var(--color-text-dark);
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 300;
    text-transform: uppercase;
}

    .how-arrive-container h2 {
        color: var(--color-text-dark);
        font-size: 28px;
        font-weight: 300 !important;
        letter-spacing: -0.02em;
        line-height: 1.15;
    }

    .how-arrive-container p {
        color: var(--color-text-gray);
        font-size: 15px;
        font-weight: 400;
        line-height: 1.5;
    }
.arrive-benefits strong {
    font-size: 14px;
    color: var(--color-text-dark)
}
.arrive-benefits span {
    font-size: 13px;
}
/* Ícones circulares */
.how-arrive-container .mini-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f7f4ee;
    color: #4a3e3d;
    font-size: 14px;
    flex-shrink: 0;
}

    /* Ícone de folha (Sustentabilidade) */
    .how-arrive-container .mini-icon-leaf {
        background: #dbebd5;
        color: #356b43;
    }

/* Imagem e Badge do Card Principal */

.how-arrival-info-card {
  background-color: var(--color-text-white);
  border-radius: 2px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  box-shadow: 0 20px 50px rgba(44, 36, 22, 0.08);
  margin-left: auto;  
  margin-right: auto;
}


.how-arrival-info-card__media {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  height: 280px; 
}

.how-arrival-info-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.how-arrival-info-card__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 90px;
  height: 90px;
  border-radius: var(--radius-pill);
  background-color: var(--color-black);
  color: var(--color-text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
  padding: 20px;
  z-index: 2;
}


.how-arrival-info-card__content {
  padding: 16px; 
  display: flex;
  flex-direction: column;
}

.how-arrival-info-card__eyebrow {
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
  text-align: start;
}

.how-arrival-info-card__title {
  font-size: 26px; 
  line-height: 1.2;
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.how-arrival-info-card__text {
  color: var(--color-text-gray);
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.how-arrival-info-card__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.how-arrival-info-card__stat {
    display: flex;
    flex-direction: column; 
    gap: 8px;
    align-items: center;
}

.how-arrival-info-card__stat-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-dark);
}

.how-arrival-info-card__stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.2;
}

.how-arrival-info-card__stat-label {
    font-size: 13px;
    color: var(--color-text-gray);
    line-height: 1.45;
}

.how-arrival-info-card__highlight {
    background: #eef6ef;
    border: 1px solid rgba(45, 98, 67, 0.14);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}
.how-arrival-info-card__highlight-icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    margin-right: 18px;
    border-radius: 50%;
    background: rgba(22, 62, 43, 0.12);
    color: var(--color-green);
}
.how-arrival-info-card__highlight-body {
  flex: 1;
}

.how-arrival-info-card__highlight-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-green);
  line-height: 1.35;
  margin-bottom: 6px;
}

.how-arrival-info-card__highlight-text {
  font-size: 12px;
  color: var(--color-text-gray);
  line-height: 1.45;
}

.how-arrival-info-card__highlight-link {
  flex-shrink: 0;
  align-self: flex-end; 
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-green);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

    .how-arrive-container .badge-mobility {
        position: absolute;
        width: 80px;
        height: 80px;
        top: 16px;
        right: 16px;
        font-size: 8px;
        background: #1a1a1a;
        color: #ffffff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 1.2;
        letter-spacing: 0.05em;
        z-index: 2;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }

    /* Itens da Mini Grelha */
    .how-arrive-container .inner-info-box i {
        font-size: 14px;
        color: #dca742 !important;
    }

    .how-arrive-container .inner-info-box .style-desc {
        font-size: 0.7rem;
        line-height: 1.3;
    }

    /* Bloco de Sustentabilidade */
    .how-arrive-container .arrive-sustainability {
        background: #f3f9f4 !important;
        border: 1px solid rgba(53, 107, 67, 0.12);
        flex-direction: column;
        align-items: flex-start !important;
    }

    .how-arrive-container .btn-learn-more {
        margin-top: 12px;
        align-self: flex-end;
        font-size: 0.8rem;
        white-space: nowrap;
    }

        .how-arrive-container .btn-learn-more::after {
            content: "";
            display: inline-block;
            width: 12px;
            height: 8px;
            margin-left: 6px;
            background: currentColor;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath fill='black' d='M16.3.3 24 8l-7.7 7.7-1.4-1.4L20.2 9H0V7h20.2l-5.3-5.3z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath fill='black' d='M16.3.3 24 8l-7.7 7.7-1.4-1.4L20.2 9H0V7h20.2l-5.3-5.3z'/%3E%3C/svg%3E") no-repeat center / contain;
            vertical-align: middle;
        }

    /* Botões de Ação (Comportamento mobile empilhado) */
    .how-arrive-container .arrive-actions {
        flex-wrap: wrap;
        gap: 10px;
    }

.how-arrive-container .commerce-btn-amber,
.how-arrive-container .commerce-btn-ghost {
    width: 100%;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--radius-pill);
    text-transform: none;
    padding: 16px 32px;
}

.how-arrive-container .commerce-btn-amber {
    background: var(--color-primary);
    color: var(--color-accent);
    border: 2px solid var(--color-primary);
}
.how-arrive-container .commerce-btn-amber:hover {
    background: none;
}

.how-arrive-container .commerce-btn-ghost {
    color: var(--color-accent);
    border: 2px solid var(--color-primary);
}

.how-arrive-container .commerce-btn-ghost:hover {
   background: var(--color-primary);
   color: var(--color-accent);
   border: 2px solid var(--color-primary);
}


/* tablets */
@media (min-width: 768px) {
    .how-arrive-container h2 {
        font-size: 34px;
    }

    /* Restaura os botões de ação horizontais alinhados ao lado */
    .how-arrive-container .arrive-actions {
        flex-direction: row;
        gap: 0;
    }

    .how-arrive-container .commerce-btn-amber,
    .how-arrive-container .commerce-btn-ghost {
        width: auto;
    }

    /* Ajuste do bloco de sustentabilidade horizontal */
    .how-arrive-container .arrive-sustainability {
        flex-direction: row;
        align-items: center !important;
    }

    .how-arrive-container .btn-learn-more {
        margin-top: 0;
        align-self: center;
    }
}


/* desktop */
@media (min-width: 1024px) {
    .how-arrive-container h2 {
        font-size: 42px;
    }

    /* Faz com que a imagem acompanhe dinamicamente a altura total da coluna de texto */
    .how-arrive-container .arrive-photo-wrapper {
        height: auto;
        min-height: 100%;
    }

    /* Aumenta ligeiramente o badge circular no ecrã maior */
    .how-arrive-container .badge-mobility {
        width: 84px;
        height: 84px;
        top: 24px;
        right: 24px;
        font-size: 9px;
    }
}

@media (min-width: 992px) {
  .how-arrival-info-card {
    grid-template-columns: 1fr 1.15fr;
    gap: 32px;
    max-width: 950px;
  }
  .how-arrival-info-card__media {
    height: 100%;
    min-height: 480px;
  }

  .how-arrival-info-card__content {
    padding: 30px 40px 30px 4px;
  }

  .how-arrival-info-card__title {
    font-size: 34px;
    margin-bottom: 18px;
  }

  /* Divide as caixas de estatísticas em 3 colunas horizontais */
    .how-arrival-info-card__stats {
        grid-template-columns: repeat(3, 1fr); 
        gap: 20px;
    }

    .how-arrival-info-card__stat {
        flex-direction: row; 
        align-items: flex-start; 
        gap: 12px; 
        flex-wrap: wrap; 
    }

    .how-arrival-info-card__stat-value {
        width: calc(100% - 66px); 
        font-size: 18px;
    }

    
    .how-arrival-info-card__stat-label {
        width: calc(100% - 46px);
        margin-left: auto; 
    }

  .how-arrival-info-card__highlight {
    flex-direction: row;
    padding: 18px 20px;
    align-items: flex-start;
  }

  .how-arrival-info-card__highlight-link {
    align-self: center; 
  }
}