/* ==========================================================================
   Shiptimize PT — Base: reset, tipografia, layout
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* --- Tipografia --------------------------------------------------------- */

/* Todos os titulos a 700. A regra e simples e sem excepcoes: titulo pesado,
   corpo leve. O 500 fica reservado a labels, eyebrows e enfase dentro de
   texto corrido, onde nao deve competir com os titulos. */
h1, h2, h3, h4 {
  font-weight: var(--fw-bold);
  margin: 0;
  color: var(--c-ink);
  text-wrap: balance;
}

/* O hero e o unico sitio do site em peso 700. Divergencia deliberada do
   brand book corporate, para dar peso a entrada na vertical ecommerce. */
.t-display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-bold);
}

.t-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--fw-bold);
}

.t-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-bold);
}

.t-h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-bold);
}

.t-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-grey);
  max-width: var(--container-text);
}

.t-body   { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--container-text); }
.t-muted  { color: var(--c-grey); }
.t-caption{
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-grey-light);
}

/* Eyebrow: label uppercase que precede todas as seccoes chave.
   O quadrado de 0.5px ecoa o icone da marca e serve de marcador estrutural. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-label);
  margin: 0 0 var(--sp-base);
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border: 1px solid var(--c-orange);
  border-bottom-color: transparent;
  border-left-color: transparent;
}

p { margin: 0 0 var(--sp-base); max-width: var(--container-text); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--c-ink);
  text-decoration-color: var(--c-border);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur) var(--ease);
}
a:hover { text-decoration-color: var(--c-orange); }

/* --- Layout -------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section        { padding-block: var(--sp-3xl); }
.section--tight { padding-block: var(--sp-2xl); }
.section--alt   { background: var(--c-surface-2); }
.section--dark  { background: var(--c-surface-dark); color: var(--c-on-dark-body); }

.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--c-on-dark); }
.section--dark .eyebrow { color: var(--c-on-dark-label); }
.section--dark .t-lead  { color: var(--c-on-dark-body); }
.section--dark .t-body  { color: var(--c-on-dark-body); }
.section--dark p        { color: var(--c-on-dark-body); }

.grid { display: grid; gap: var(--sp-md); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .section { padding-block: var(--sp-2xl); }
}

.stack > * + * { margin-top: var(--sp-base); }
.stack-md > * + * { margin-top: var(--sp-md); }
.stack-lg > * + * { margin-top: var(--sp-lg); }

/* --- Acessibilidade ------------------------------------------------------ */

:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: var(--sp-base);
  top: calc(-1 * var(--sp-3xl));
  background: var(--c-ink);
  color: var(--c-on-dark);
  padding: var(--sp-sm) var(--sp-base);
  border-radius: var(--r-button);
  z-index: 100;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-base); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Ajustes responsivos
   ========================================================================== */

/* --- Tablet -------------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --gutter: var(--sp-md); }
  .section { padding-block: var(--sp-2xl); }
  /* Colunas duplas com espacamento grande em desktop nao devem herda-lo
     quando colapsam para uma coluna */
  .grid--2 { gap: var(--sp-xl) !important; }
}

/* --- Telemovel ----------------------------------------------------------- */
@media (max-width: 600px) {
  :root {
    --gutter: var(--sp-md);
    --sp-3xl: 64px;
    --sp-4xl: 80px;
  }

  .section { padding-block: var(--sp-xl); }
  .grid { gap: var(--sp-base) !important; }

  /* A palavra que roda passa para a sua propria linha, senao transborda */
  .rotator__mask { display: grid; }

  /* Botoes a largura total, mais faceis de acertar com o polegar */
  .btn { justify-content: center; }
  .section .btn,
  .form-actions .btn { flex: 1 1 auto; min-width: 0; }

  .card { padding: var(--sp-md); }
  .panel-dark { padding: var(--sp-lg) var(--sp-md); }
  .quote { padding: var(--sp-base) var(--sp-md); }

  /* Tabelas legais: rolam na horizontal em vez de espremer o texto */
  .table { min-width: 520px; }

  .steps { gap: var(--sp-sm); margin-bottom: var(--sp-lg); }
  .steps__label { display: none; }

  .site-footer { padding-block: var(--sp-xl) var(--sp-md); }
  .site-footer__bottom { margin-top: var(--sp-lg); }
}

/* --- Ecra muito estreito -------------------------------------------------- */
@media (max-width: 380px) {
  :root { --gutter: var(--sp-base); }
}

/* Hero de pagina interna: mais respiro em baixo, para separar da primeira
   seccao de conteudo sem depender de mudanca de fundo. */
.section--hero { padding-block: var(--sp-3xl) var(--sp-4xl); }
@media (max-width: 600px) { .section--hero { padding-block: var(--sp-xl) var(--sp-2xl); } }

/* ==========================================================================
   Reforcos para ecra pequeno
   Correcoes encontradas na auditoria movel.
   ========================================================================== */

/* Palavras longas sem espaco (emails, nomes de plataformas, URLs) partem
   em vez de alargar a pagina. */
body { overflow-wrap: break-word; }

/* Rede de seguranca: nada deve alargar a pagina horizontalmente. */
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 600px) {

  /* Alvo de toque minimo de 44px. Os botoes ficavam em ~42px. */
  .btn { min-height: 44px; }

  /* Ligacoes de texto no rodape e nos cards de pessoa: area de toque maior
     sem alterar o aspecto. */
  .site-footer a,
  .person__link,
  .breadcrumbs a { display: inline-block; padding-block: 2px; }

  /* O titulo do hero em 700 e corpo grande pode partir mal em ecra estreito. */
  .t-display { hyphens: none; }

  /* Faixa de transportadoras: com oito itens, reduzir para caber duas linhas. */
  .carrier-strip__item { padding-right: var(--sp-xs); font-size: 11px; }

  /* Legendas de imagem e notas ficam mais legiveis com menos aperto. */
  .shot__caption { line-height: 1.5; }
}

/* Ecra muito estreito: o iPhone SE tem 320px de largura util. */
@media (max-width: 380px) {
  .carrier-strip { gap: 6px; }
  .carrier-strip__item span { display: none; }   /* fica so o logotipo */
  .carrier-strip__item { padding: var(--sp-micro); }
  .steps__num { width: 24px; height: 24px; }
}