/* assets/css/home.css */

/* ── BASE SECTION ── */
.soc-section-hdr {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  margin-bottom:   var(--sp-8);
}

.soc-section-title {
  font-size:   22px;
  font-family: var(--font-display); letter-spacing: var(--tracking-display); font-weight: var(--fw-bold);
  letter-spacing: -.01em;
  margin:      0;
}

@media (min-width: 1024px) { .soc-section-title { font-size: 26px; } }

.soc-section-link {
  font-size:       var(--text-xs);
  color:           var(--c-brand);
  border-bottom:   0.5px solid var(--c-brand);
  padding-bottom:  1px;
  text-decoration: none;
  white-space:     nowrap;
  flex-shrink:     0;
}

/* ── HERO (full-screen) ── */
.soc-hero {
  position: relative;
  overflow: hidden;
  width:    100%;
  height:   100vh;                                        /* fallback */
  height:   calc(var(--vh, 1vh) * 100 - var(--header-h)); /* real viewport (iOS) */
  display:  flex;
  flex-direction: column;
}
@supports (height: 100svh) { .soc-hero { height: calc(100svh - var(--header-h)); } }

/* ── TRACK (slider) ── */
.soc-hero__track {
  display:    flex;
  height:     100%;
  transition: transform 0.5s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

.soc-hero__slide {
  flex:     0 0 100%;
  width:    100%;
  height:   100%;
  position: relative;
}
.soc-hero__slide--plain { background: var(--c-brand); }

/* Background image/video */
.soc-hero__slide-bg {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  z-index:    0;
}

/* Media per device: swap only when a mobile media exists, else keep desktop.
   TEM de vir DEPOIS de .soc-hero__slide-bg: as duas têm a mesma especificidade
   (0,1,0) e no empate ganha a última. Estando antes, o `display:block` da regra
   base anulava este `none`, e a imagem de telemóvel — que é absoluta e vem
   depois no HTML — aparecia por cima da de computador. */
.soc-hero__slide-bg--mobile { display: none; }
@media (max-width: 767px) {
  .soc-hero__slide--has-mobile .soc-hero__slide-bg--desktop { display: none; }
  .soc-hero__slide--has-mobile .soc-hero__slide-bg--mobile  { display: block; }
}

/* Degrade de legibilidade, escolhido slide a slide no editor da homepage.
   ──────────────────────────────────────────────────────────────────────────
   Ate Set/2026 era um veu de `rgba(0,0,0,.38)` sobre a imagem INTEIRA, igual em
   todos os slides. Escurecia fotografias que nao precisavam — medido: o slide do
   sofa tinha 6,35:1 de contraste sem veu nenhum, muito acima dos 3:1 exigidos
   para texto grande, e ainda assim levava os mesmos 38%.
   Agora:
    · tom TEAL (7,43,51) e nao preto — a mesma receita dos cartoes da homepage
      (.soc-featcard__overlay), que e o que impede o escurecimento de sujar a cor;
    · DIRECCIONAL e a toda a largura: desce do topo quando o texto esta em cima,
      sobe do fundo nos outros casos — com o texto ao centro sobe ate a zona dele
      e apaga-se logo acima;
    · intensidade por slide, e `Nao` nao pinta rigorosamente nada.
   Fica SEMPRE por baixo do texto (z-index 1 contra 2 do conteudo): as letras
   mantem-se brancas puras, e o degrade so escurece o fundo. */
.soc-hero__overlay {
  position: absolute;
  inset:    0;
  z-index:  1;
}

/* Texto em cima — desce do topo e some a 80% da altura. */
.soc-hero__overlay.is-scrim-top.is-scrim-pouco { background: linear-gradient(to bottom, rgba(7,43,51,.45) 0%, rgba(7,43,51,.12) 52%, rgba(7,43,51,0) 80%); }
.soc-hero__overlay.is-scrim-top.is-scrim-medio { background: linear-gradient(to bottom, rgba(7,43,51,.62) 0%, rgba(7,43,51,.16) 52%, rgba(7,43,51,0) 80%); }
.soc-hero__overlay.is-scrim-top.is-scrim-muito { background: linear-gradient(to bottom, rgba(7,43,51,.78) 0%, rgba(7,43,51,.20) 52%, rgba(7,43,51,0) 80%); }

/* Texto ao centro — sobe do fundo ate a zona do texto. */
.soc-hero__overlay.is-scrim-center.is-scrim-pouco { background: linear-gradient(to top, rgba(7,43,51,.45) 0%, rgba(7,43,51,.24) 34%, rgba(7,43,51,.08) 52%, rgba(7,43,51,0) 68%); }
.soc-hero__overlay.is-scrim-center.is-scrim-medio { background: linear-gradient(to top, rgba(7,43,51,.62) 0%, rgba(7,43,51,.34) 34%, rgba(7,43,51,.12) 52%, rgba(7,43,51,0) 68%); }
.soc-hero__overlay.is-scrim-center.is-scrim-muito { background: linear-gradient(to top, rgba(7,43,51,.78) 0%, rgba(7,43,51,.46) 34%, rgba(7,43,51,.18) 52%, rgba(7,43,51,0) 68%); }

/* Texto em baixo — o mesmo dos cartoes: sobe do fundo e acaba acima do texto. */
.soc-hero__overlay.is-scrim-bottom.is-scrim-pouco { background: linear-gradient(to top, rgba(7,43,51,.45) 0%, rgba(7,43,51,.07) 38%, rgba(7,43,51,0) 56%); }
.soc-hero__overlay.is-scrim-bottom.is-scrim-medio { background: linear-gradient(to top, rgba(7,43,51,.62) 0%, rgba(7,43,51,.10) 38%, rgba(7,43,51,0) 56%); }
.soc-hero__overlay.is-scrim-bottom.is-scrim-muito { background: linear-gradient(to top, rgba(7,43,51,.78) 0%, rgba(7,43,51,.13) 38%, rgba(7,43,51,0) 56%); }

/* .soc-hero__slide usa .soc-container para alinhar com hamburger */
.soc-hero__slide .soc-container {
  width:    100%; /* flex item — stretch horizontally */
  position: relative;
  z-index:  2;
}

.soc-hero__content {
  max-width: 640px; /* constrain text width — do not centre */
}

.soc-hero__label {
  font-size:      var(--text-xs);
  letter-spacing: .16em;
  color:          rgba(255,255,255,.5);
  text-transform: uppercase;
  margin-bottom:  var(--sp-3);
}

.soc-hero__title {
  font-size:      28px;
  font-family: var(--font-display); letter-spacing: var(--tracking-display); font-weight: var(--fw-bold);
  color:          var(--c-white);
  line-height:    1.12;
  margin:         0 0 var(--sp-5);
  letter-spacing: -.02em;
}
/* Per-slide weight, chosen in the Homepage editor. The rule above stays as the
   default so nothing changes until someone picks one. */
.soc-hero__title.is-fw-light  { font-weight: var(--fw-light); }
.soc-hero__title.is-fw-medium { font-weight: var(--fw-medium); }
.soc-hero__title.is-fw-bold   { font-weight: var(--fw-bold); }

/* Subtitle — the eyebrow's typeface (the main sans, not the display face) but
   set as a paragraph: no caps, no tracking, and bright enough to actually read
   over a photo. The eyebrow's .5 opacity is deliberately quiet; a subtitle is not. */
.soc-hero__subtitle {
  font-family:    var(--font-main);
  font-size:      16px;
  font-weight:    var(--fw-light);
  line-height:    1.55;
  letter-spacing: 0;
  text-transform: none;
  color:          rgba(255,255,255,.88);
  max-width:      45ch;
  margin:         0 0 var(--sp-5);
}
.soc-hero__subtitle.is-fw-light  { font-weight: var(--fw-light); }
.soc-hero__subtitle.is-fw-medium { font-weight: var(--fw-medium); }
.soc-hero__subtitle.is-fw-bold   { font-weight: var(--fw-bold); }
/* Centre the measure too, otherwise a capped width reads off-centre. */
.soc-hero__content.is-h-center .soc-hero__subtitle { margin-inline: auto; }
.soc-hero__content.is-h-right  .soc-hero__subtitle { margin-inline: auto 0; }
/* The title owns the gap before the button; with a subtitle in between it
   would double up. */
.soc-hero__title:has(+ .soc-hero__subtitle) { margin-bottom: var(--sp-3); }
@media (min-width: 768px)  { .soc-hero__subtitle { font-size: 18px; margin-bottom: var(--sp-6); } }
@media (min-width: 1024px) { .soc-hero__subtitle { font-size: 20px; margin-bottom: var(--sp-8); } }

@media (min-width: 768px)  { .soc-hero__title { font-size: 40px; margin-bottom: var(--sp-6); } }
@media (min-width: 1024px) { .soc-hero__title { font-size: 52px; margin-bottom: var(--sp-8); } }

.soc-hero__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.soc-btn--hero-primary {
  background:      var(--c-white);
  color:           var(--c-brand);
  padding:         13px 28px;
  border-radius:   var(--r-pill);
  font-size:       var(--text-sm);
  font-weight:     var(--fw-medium);
  letter-spacing:  .04em;
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
}
.soc-btn--hero-primary:hover { background: var(--c-bg-warm); }

@media (min-width: 1024px) { .soc-btn--hero-primary { padding: 14px 36px; } }

.soc-btn--hero-outline {
  border:          0.5px solid rgba(255,255,255,.3);
  color:           rgba(255,255,255,.85);
  padding:         12px 24px;
  font-size:       var(--text-sm);
  letter-spacing:  .07em;
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
}

@media (min-width: 1024px) { .soc-btn--hero-outline { padding: 14px 36px; } }

/* ── NAV (bottom bar: dots · swipe cue · counter, all vertically aligned) ── */
.soc-hero__bar {
  position:       absolute;
  left:           0;
  right:          0;
  bottom:         var(--sp-10);
  z-index:        3;
  display:        grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:    center;
  padding-inline: var(--pad-mobile);
}
@media (min-width: 768px)  { .soc-hero__bar { padding-inline: var(--pad-tablet); } }
@media (min-width: 1024px) { .soc-hero__bar { padding-inline: var(--pad-desktop); } }

.soc-hero__cue {
  justify-self:   center;
  display:        inline-flex;
  align-items:    center;
  gap:            10px;
  background:     none;
  border:         0;
  padding:        8px 6px;
  cursor:         pointer;
  color:          rgba(255,255,255,.85);
  font-size:      var(--text-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight:    var(--fw-semibold);
  transition:     color var(--t-fast);
}
.soc-hero__cue:hover { color: #fff; }
.soc-hero__cue-arrow { animation: soc-hero-nudge 1.6s ease-in-out infinite; }
@keyframes soc-hero-nudge {
  0%, 100% { transform: translateX(0);   opacity: .75; }
  50%      { transform: translateX(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .soc-hero__cue-arrow { animation: none; }
}

.soc-hero__dots {
  justify-self: start;
  display:      flex;
  gap:          6px;
  align-items:  center;
}

.soc-hero__dot {
  width:         6px;
  height:        4px;
  border-radius: 2px;
  background:    rgba(255,255,255,.28);
  border:        none;
  padding:       0;
  cursor:        pointer;
  transition:    width var(--t-fast), background var(--t-fast);
}

.soc-hero__dot--active {
  width:      24px;
  background: var(--c-white);
}

.soc-hero__counter {
  justify-self:   end;
  font-size:      var(--text-xs);   /* same size as the SWIPE cue */
  font-weight:    var(--fw-semibold);
  color:          rgba(255,255,255,.85);
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
.soc-hero__counter-sep { opacity: .5; margin: 0 3px; }
#soc-hero-current { color: #fff; }

/* ── TRUST BAR ── */
.soc-trust-bar {
  background:    var(--c-white);
  border-top:    var(--border-light);
  border-bottom: var(--border-light);
}

.soc-trust-bar__inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  padding-top:           0;
  padding-bottom:        0;
}

@media (min-width: 1024px) {
  .soc-trust-bar__inner { grid-template-columns: repeat(4, 1fr); }
}

.soc-trust-bar__item {
  display:       flex;
  gap:           var(--sp-3);
  align-items:   center;
  padding:       var(--sp-5) var(--sp-3);
  border-right:  var(--border-light);
}

.soc-trust-bar__item:nth-child(2n),
.soc-trust-bar__item:last-child { border-right: none; }

/* Linha horizontal entre as duas linhas do grid em mobile/tablet */
@media (max-width: 1023px) {
  .soc-trust-bar__item:nth-child(3),
  .soc-trust-bar__item:nth-child(4) { border-top: var(--border-light); }
}

@media (min-width: 1024px) {
  .soc-trust-bar__item:nth-child(2n)  { border-right: var(--border-light); }
  .soc-trust-bar__item:last-child     { border-right: none; }
  .soc-trust-bar__item { padding: 18px var(--sp-6); }
}

.soc-trust-bar__item svg { flex-shrink: 0; }

.soc-trust-bar__label {
  font-size:   11px;
  font-weight: var(--fw-medium);
  margin-bottom: 2px;
}

.soc-trust-bar__sub {
  font-size: 10px;
  color:     var(--c-text-xlight);
}

/* ── CATEGORIES ── */
.soc-categories { padding: var(--sp-10) 0 var(--sp-8); }

@media (min-width: 1024px) { .soc-categories { padding: 56px 0 48px; } }

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

@media (min-width: 768px)  { .soc-categories__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .soc-categories__grid { grid-template-columns: repeat(5, 1fr); gap: 12px; } }

.soc-cat-card {
  position:        relative;
  height:          160px;
  overflow:        hidden;
  border-radius:   var(--r);
  display:         block;
  background:      var(--c-bg-alt);
  text-decoration: none;
}

@media (min-width: 1024px) { .soc-cat-card { height: 180px; } }

.soc-cat-card__img {
  border-radius: var(--r);
  overflow: hidden;
  width:      100%;
  height:     100%;
  position:   absolute;
  inset:      0;
}

.soc-cat-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow); }
@media (hover: hover) {
  .soc-cat-card:hover .soc-cat-card__img img { transform: scale(1.04); }
}

.soc-cat-card__label {
  position:    absolute;
  bottom:      0; left: 0; right: 0;
  padding:     28px 14px 12px;
  background:  linear-gradient(transparent, rgba(0,0,0,.28));
  color:       var(--c-white);
  font-size:   11px;
  letter-spacing: .07em;
  font-weight: var(--fw-medium);
}

/* ── FEATURED PRODUCTS ── */
.soc-featured-products {
  background: var(--c-white);
  padding:    var(--sp-10) 0;
}

@media (min-width: 1024px) { .soc-featured-products { padding: 56px 0 52px; } }

/* Homepage grid — 4 cols desktop (override woocommerce.css which uses 3) */
.soc-featured-products__grid.woocommerce ul.products {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

@media (min-width: 640px) {
  .soc-featured-products__grid.woocommerce ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
  }
}

@media (min-width: 1024px) {
  .soc-featured-products__grid.woocommerce ul.products {
    gap: 16px !important;
  }
}

/* ── CONFIGURATOR BANNER ── */
.soc-configurator-banner { padding: var(--sp-8) 0; }

@media (min-width: 1024px) { .soc-configurator-banner { padding: 56px 0; } }

.soc-configurator-banner__grid {
  display:     grid;
  min-height:  300px;
}

@media (min-width: 768px) {
  .soc-configurator-banner__grid {
    grid-template-columns: 1fr 1fr;
    min-height: 440px;
  }
}

.soc-configurator-banner__content {
  background:     var(--c-brand);
  padding:        var(--sp-10) var(--sp-8);
  display:        flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 1024px) {
  .soc-configurator-banner__content { padding: 72px 80px; }
}

.soc-configurator-banner__label {
  font-size:      var(--text-xs);
  letter-spacing: .16em;
  color:          rgba(255,255,255,.38);
  text-transform: uppercase;
  margin-bottom:  var(--sp-4);
}

.soc-configurator-banner__title {
  font-size:     36px;
  font-family: var(--font-display); letter-spacing: var(--tracking-display); font-weight: var(--fw-bold);
  color:         var(--c-white);
  line-height:   1.15;
  margin-bottom: var(--sp-4);
}

@media (min-width: 1024px) { .soc-configurator-banner__title { font-size: 44px; } }

.soc-configurator-banner__text {
  font-size:     14px;
  color:         rgba(255,255,255,.5);
  line-height:   1.75;
  margin-bottom: var(--sp-8);
  max-width:     360px;
}

.soc-btn--configurator {
  background:      var(--c-white);
  color:           var(--c-brand);
  padding:         14px 32px;
  font-size:       var(--text-sm);
  font-weight:     var(--fw-medium);
  letter-spacing:  .08em;
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
  gap:             9px;
  align-self:      flex-start;
}

.soc-configurator-banner__visual {
  background:      var(--c-brand-dark);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--sp-8);
  min-height:      200px;
}

.soc-configurator-banner__visual svg { width: 80%; opacity: .55; }

/* ── SPLIT BANNERS ── */
.soc-split-banners { padding-bottom: var(--sp-8); }

.soc-split-banners__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   2px;
}

@media (min-width: 768px) {
  .soc-split-banners__grid { grid-template-columns: 1fr 1fr; }
}

.soc-split-banners__item {
  aspect-ratio:     3 / 2;
  position:         relative;
  display:          flex;
  flex-direction:   column;
  justify-content:  flex-end;
  overflow:         hidden;
  background:       var(--c-bg-alt);
  background-size:  cover;
  background-position: center;
  text-decoration:  none;
}

.soc-split-banners__item--dark { background-color: var(--c-brand); }

.soc-split-banners__content {
  padding:     28px 32px 24px;
  background:  linear-gradient(transparent, rgba(0,0,0,.18));
}

.soc-split-banners__item--dark .soc-split-banners__content { background: none; }

.soc-split-banners__label {
  font-size:      var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom:  7px;
}

.soc-split-banners__item:not(.soc-split-banners__item--dark) .soc-split-banners__label { color: rgba(0,0,0,.4); }
.soc-split-banners__item--dark .soc-split-banners__label { color: rgba(255,255,255,.38); }

.soc-split-banners__title {
  font-size:     22px;
  font-family: var(--font-display); letter-spacing: var(--tracking-display); font-weight: var(--fw-bold);
  margin-bottom: var(--sp-3);
}

.soc-split-banners__item:not(.soc-split-banners__item--dark) .soc-split-banners__title { color: var(--c-text); }
.soc-split-banners__item--dark .soc-split-banners__title { color: var(--c-white); }

.soc-split-banners__cta {
  font-size:   11px;
  padding-bottom: 1px;
}

.soc-split-banners__item:not(.soc-split-banners__item--dark) .soc-split-banners__cta {
  color:       var(--c-brand);
  border-bottom: 0.5px solid var(--c-brand);
}

.soc-split-banners__item--dark .soc-split-banners__cta {
  color:       rgba(255,255,255,.7);
  border-bottom: 0.5px solid rgba(255,255,255,.4);
}

/* ── BLOG PREVIEW ── */
.soc-blog-preview { padding: var(--sp-10) 0 var(--sp-12); }

@media (min-width: 1024px) { .soc-blog-preview { padding: 56px 0 64px; } }

.soc-blog-preview__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--sp-8);
}

@media (min-width: 768px)  { .soc-blog-preview__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .soc-blog-preview__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.soc-blog-card { display: flex; flex-direction: column; }

.soc-blog-card__img-wrap {
  border-radius: var(--r);
  display:       block;
  aspect-ratio:  3 / 2;
  overflow:      hidden;
  background:    var(--c-bg-alt);
  margin-bottom: var(--sp-4);
}

.soc-blog-card__img-placeholder {
  border-radius: var(--r);
  overflow: hidden;
  width:  100%;
  height: 100%;
  background: var(--c-bg-alt);
}

.soc-blog-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow); }
@media (hover: hover) {
  .soc-blog-card:hover .soc-blog-card__img-wrap img { transform: scale(1.03); }
}

.soc-blog-card__cat {
  font-size:      var(--text-xs);
  letter-spacing: .1em;
  color:          var(--c-brand);
  text-transform: uppercase;
  margin-bottom:  7px;
}

.soc-blog-card__title {
  font-size:     17px;
  font-weight:   var(--fw-light);
  line-height:   1.35;
  margin-bottom: var(--sp-2);
}

.soc-blog-card__title a { color: var(--c-text); text-decoration: none; }
.soc-blog-card__title a:hover { color: var(--c-brand); }

.soc-blog-card__excerpt {
  font-size:     var(--text-xs);
  color:         var(--c-text-muted);
  line-height:   1.65;
  margin-bottom: var(--sp-3);
  flex:          1;
}

.soc-blog-card__meta {
  display:       flex;
  gap:           14px;
  font-size:     10px;
  color:         var(--c-text-xlight);
  margin-bottom: var(--sp-3);
}

.soc-blog-card__link {
  font-size:       var(--text-xs);
  color:           var(--c-brand);
  border-bottom:   0.5px solid var(--c-brand);
  padding-bottom:  1px;
  text-decoration: none;
  align-self:      flex-start;
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE v2 — editable sections (A2)
   ═══════════════════════════════════════════════════════════════ */

/* ── HERO: stage + block position ── */
.soc-hero__stage {
  position: relative;
  z-index:  2;
  height:   100%;
  display:  flex;
  flex-direction: column;
  padding-block: var(--sp-16);
}
.soc-hero__stage.is-v-top    { justify-content: flex-start; }
.soc-hero__stage.is-v-center { justify-content: center; }
/* Bottom: extra padding so the block clears the nav bar (dots/swipe/counter)
   and keeps the same visual margin as the top position. */
.soc-hero__stage.is-v-bottom { justify-content: flex-end; padding-bottom: calc(var(--sp-16) + 3.5rem); }

.soc-hero__content.is-h-left   { margin-right: auto; text-align: left; }
.soc-hero__content.is-h-center { margin-inline: auto; text-align: center; }
.soc-hero__content.is-h-right  { margin-left: auto;  text-align: right; }
.soc-hero__content.is-h-center .soc-hero__actions { justify-content: center; }
.soc-hero__content.is-h-right  .soc-hero__actions { justify-content: flex-end; }

/* ── SHARED SECTION HEADER ── */
.soc-home-sec { padding-block: var(--sp-16); }

.soc-home-sec__hdr { margin-bottom: var(--sp-8); }
.soc-home-sec__eyebrow {
  font-size:      var(--text-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          var(--c-accent);       /* coral as signage only */
  margin:         0 0 var(--sp-2);
  font-weight:    var(--fw-semibold);
}
.soc-home-sec__title {
  font-family:    var(--font-display);
  font-weight:    var(--fw-bold);
  letter-spacing: var(--tracking-display);
  font-size:      clamp(24px, 4vw, 34px);
  line-height:    1.1;
  margin:         0;
  color:          var(--c-text);
}
.soc-home-sec__sub {
  font-size:   var(--text-md);
  color:       var(--c-text-muted);
  margin:      var(--sp-3) 0 0;
  max-width:   58ch;
  line-height: var(--lh-body);
}

/* ── REUSABLE CAROUSEL ──
   Sem setas e sem barra de progresso: a pista corre de margem a margem, repete
   sem fim e arrasta-se com o rato. Numa pista sem fim uma barra prometeria um
   fim que não existe; o sinal de que há mais para o lado são os cards cortados
   na margem, que a largura total garante. */
/* Cabeçalho centrado — com o alternador centrado por baixo, o bloco todo fica
   simétrico sobre a pista à largura toda. */
.soc-carousel__head { margin-bottom: var(--sp-8); text-align: center; }
.soc-carousel__head .soc-home-sec__hdr { margin-bottom: 0; }
.soc-carousel__head .soc-home-sec__sub { margin-inline: auto; }

/* pan-x pan-y, não pan-x: com pan-x sozinho o browser assume que aqui só existe
   movimento horizontal e o gesto vertical morre — não se consegue rolar a página
   com o dedo em cima do carrossel. Declarar os dois eixos deixa o carrossel tratar
   do horizontal e a página receber o vertical. Mesmo remédio que já estava na
   galeria de produto ("touch-action:pan-y bloqueava o swipe horizontal"). */
.soc-carousel__track {
  min-width:   0;
  overflow-x:  auto;
  scrollbar-width:  none;
  -ms-overflow-style: none;
  padding:     4px 2px;
  cursor:      grab;
  touch-action: pan-x pan-y;
}
.soc-carousel__track::-webkit-scrollbar { display: none; }
.soc-carousel__track.is-dragging { cursor: grabbing; user-select: none; }
/* Links e imagens são arrastáveis por natureza: sem isto o browser começa o
   arrasto nativo do link e a pista nunca chega a mexer. */
.soc-carousel__track a,
.soc-carousel__track img { -webkit-user-drag: none; user-select: none; }

/* Sem setas, o teclado precisa de alcançar a própria pista: um contentor de
   scroll focável rola com as setas do teclado nativamente. */
.soc-carousel__track:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 4px; }

/* NÃO acrescentar `scroll-behavior: smooth` aqui: o salto que faz a pista
   parecer infinita tem de ser instantâneo, senão vê-se a viagem de volta. */

/* Largura total — a pista vive fora do .soc-container. Em ecrãs pequenos
   mantém o avanço lateral da página; em desktop encosta às duas margens. */
.soc-carousel__track { padding-inline: var(--pad-mobile); }
@media (min-width: 768px)  { .soc-carousel__track { padding-inline: var(--pad-tablet); } }
@media (min-width: 1024px) { .soc-carousel__track { padding-inline: 0; } }

/* ── CAROUSEL TABS ──
   Centradas, sempre visíveis. Os dois painéis são desenhados no servidor e o
   escondido usa `hidden`, não `visibility`, para sair da ordem de tabulação. */
.soc-carousel__tabs {
  display:       flex;
  gap:           4px;
  padding:       4px;
  width:         max-content;
  max-width:     100%;
  margin:        0 auto var(--sp-8);
  background:    var(--c-surface);
  border:        1px solid var(--c-border);
  border-radius: var(--r-pill);
}
.soc-carousel__tab {
  font-family:    var(--font-main);
  font-size:      var(--text-sm);
  font-weight:    var(--fw-semibold);
  letter-spacing: .02em;
  cursor:         pointer;
  border:         0;
  background:     transparent;
  color:          var(--c-text-muted);
  padding:        8px 20px;
  border-radius:  var(--r-pill);
  white-space:    nowrap;
  transition:     background var(--t-fast), color var(--t-fast);
}
.soc-carousel__tab[aria-selected="true"] { background: var(--c-brand); color: var(--c-white); }
.soc-carousel__tab:hover:not([aria-selected="true"]) { color: var(--c-text); }

/* A troca tem de se ver: com duas listas de cards parecidos, sem isto passa
   despercebida. A lista nova desliza do lado de onde vem. */
@keyframes soc-tab-in-r { from { opacity: 0; transform: translateX(26px);  } to { opacity: 1; transform: none; } }
@keyframes soc-tab-in-l { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

.soc-carousel__panel.is-in-r .soc-catcar__card,
.soc-carousel__panel.is-in-r .soc-bs__list > li { animation: soc-tab-in-r .42s cubic-bezier(.22,.61,.36,1) both; }
.soc-carousel__panel.is-in-l .soc-catcar__card,
.soc-carousel__panel.is-in-l .soc-bs__list > li { animation: soc-tab-in-l .42s cubic-bezier(.22,.61,.36,1) both; }

.soc-carousel__panel[class*="is-in-"] .soc-catcar__card:nth-child(2),
.soc-carousel__panel[class*="is-in-"] .soc-bs__list > li:nth-child(2) { animation-delay: .035s; }
.soc-carousel__panel[class*="is-in-"] .soc-catcar__card:nth-child(3),
.soc-carousel__panel[class*="is-in-"] .soc-bs__list > li:nth-child(3) { animation-delay: .070s; }
.soc-carousel__panel[class*="is-in-"] .soc-catcar__card:nth-child(4),
.soc-carousel__panel[class*="is-in-"] .soc-bs__list > li:nth-child(4) { animation-delay: .105s; }
.soc-carousel__panel[class*="is-in-"] .soc-catcar__card:nth-child(5),
.soc-carousel__panel[class*="is-in-"] .soc-bs__list > li:nth-child(5) { animation-delay: .140s; }
.soc-carousel__panel[class*="is-in-"] .soc-catcar__card:nth-child(n+6),
.soc-carousel__panel[class*="is-in-"] .soc-bs__list > li:nth-child(n+6) { animation-delay: .175s; }

@media (prefers-reduced-motion: reduce) {
  .soc-carousel__panel[class*="is-in-"] .soc-catcar__card,
  .soc-carousel__panel[class*="is-in-"] .soc-bs__list > li { animation: none; }
}

/* ── CATEGORY CAROUSEL (S02) ── */
.soc-catcar__track { display: flex; gap: 12px; }
.soc-catcar__card {
  flex:            0 0 46%;
  display:         flex;
  flex-direction:  column;
  gap:             10px;
  text-decoration: none;
  color:           var(--c-text);
}
.soc-catcar__img {
  display:       block;
  aspect-ratio:  3 / 4;
  overflow:      hidden;
  background:    var(--c-bg-alt);
  border-radius: var(--r);
}
.soc-catcar__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
/* @media (hover: hover): sem esta guarda o browser do telemóvel aplica :hover ao
   que estiver debaixo do dedo e vai trocando à medida que a página rola — as cards
   piscam durante o scroll. O padrão já era usado nas featcards; passa a valer para
   todas as cards com efeito de imagem. */
@media (hover: hover) {
  .soc-catcar__card:hover .soc-catcar__img img { transform: scale(1.04); }
}
.soc-catcar__name { font-size: var(--text-md); font-weight: var(--fw-medium); text-align: center; }

@media (min-width: 768px)  { .soc-catcar__card { flex-basis: 30%; } }
@media (min-width: 1024px) { .soc-catcar__card { flex-basis: calc((100% - 60px) / 6); } }

/* ── BEST SELLERS CAROUSEL (S05) ──
   Mesmo intervalo e mesma largura de card do carrossel de categorias: os dois
   mostram 6 por ecrã em desktop. Com escalas diferentes, trocar de separador
   parecia mudar de secção. */
.soc-carousel__track.soc-bs { padding-bottom: 6px; }
.soc-bs .products.soc-bs__list {
  display:       flex !important;
  flex-wrap:     nowrap;
  grid-template-columns: none !important;
  gap:           12px !important;
  width:         auto;             /* = track width; % basis resolves against it */
  margin:        0 !important;
  padding:       0 !important;
  list-style:    none;
}
.soc-bs .products.soc-bs__list li.product {
  flex:          0 0 46% !important;   /* 2 cards visible on mobile */
  width:         auto !important;
  margin:        0 !important;
}
@media (min-width: 768px)  { .soc-bs .products.soc-bs__list li.product { flex-basis: 30% !important; } }
@media (min-width: 1024px) { .soc-bs .products.soc-bs__list li.product { flex-basis: calc((100% - 60px) / 6) !important; } }

/* ── FEATURE CARDS (S03 · two cards · S03b · three cards) ──
   A mesma peça nos dois módulos; só mudam a grelha e a composição em telemóvel.
   Título e botão sempre visíveis e parados — nada aqui depende do rato. */

/* Módulos seguidos lêem-se como um só bloco: entre eles fica o mesmo intervalo
   que há entre as cards, e não a soma de dois espaçamentos de secção.
   Com `:has` para não depender da ordem — se um dos módulos não renderizar, o
   que fica mantém o espaçamento normal. */
.soc-featcards + .soc-featcards { padding-top: 0; }
.soc-featcards:has(+ .soc-featcards) { padding-bottom: 16px; }
@media (min-width: 768px) { .soc-featcards:has(+ .soc-featcards) { padding-bottom: 20px; } }

/* Telemóvel: o carrossel de categorias acaba no nome, sem título a ocupar o
   espaço, e os dois espaçamentos de secção somados liam-se como um buraco.
   Fica um só intervalo de 48px. Mesma lógica do `:has` acima. */
@media (max-width: 767px) {
  .soc-catcar:has(+ .soc-featcards) { padding-bottom: 0; }
  .soc-catcar + .soc-featcards      { padding-top: var(--sp-12); }
}

/* Base = telemóvel. Mostra-se MENOS, não o mesmo empilhado: o módulo de 2
   mostra 1 card e o de 3 mostra 2 lado a lado. Assim nenhuma fica sozinha numa
   linha, e os dois módulos distinguem-se também no telemóvel. */
.soc-featcards__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.soc-featcards--3 .soc-featcards__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.soc-featcards--2 .soc-featcard:nth-child(n+2) { display: none; }
.soc-featcards--3 .soc-featcard:nth-child(n+3) { display: none; }

@media (min-width: 768px) {
  .soc-featcards__grid { gap: 20px; }
  .soc-featcards--2 .soc-featcards__grid { grid-template-columns: 1fr 1fr; }
  .soc-featcards--3 .soc-featcards__grid { grid-template-columns: repeat(3, 1fr); }
  /* Mesma especificidade da regra que as esconde, senão não a vence. */
  .soc-featcards--2 .soc-featcard:nth-child(n+2),
  .soc-featcards--3 .soc-featcard:nth-child(n+3) { display: block; }
}

.soc-featcard {
  position:        relative;
  display:         block;
  overflow:        hidden;
  border-radius:   var(--r);
  text-decoration: none;
  color:           var(--c-white);
}
.soc-featcard__img {
  display:      block;
  position:     relative;
  aspect-ratio: 4 / 3;
  background:   var(--c-bg-alt);
}
/* A meia largura num ecrã de 390px, um card 4:3 fica com ~139px de altura e o
   título e o botão sobrepostos não cabem. Em retrato ganha a altura que falta. */
.soc-featcards--3 .soc-featcard__img { aspect-ratio: 3 / 4; }
@media (min-width: 768px) { .soc-featcards--3 .soc-featcard__img { aspect-ratio: 4 / 3; } }

.soc-featcard__img img,
.soc-featcard__img video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
@media (hover: hover) {
  .soc-featcard:hover .soc-featcard__img img,
  .soc-featcard:hover .soc-featcard__img video { transform: scale(1.04); }
}
.soc-featcard__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,43,51,.6) 0%, rgba(7,43,51,.06) 55%, transparent 100%);
}
.soc-featcard__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.soc-featcards--3 .soc-featcard__body { padding: 14px 12px 20px; }
@media (min-width: 768px) { .soc-featcards--3 .soc-featcard__body { padding: var(--sp-5) var(--sp-5) var(--sp-6); } }

.soc-featcard__title {
  font-family:    var(--font-display);
  font-weight:    var(--fw-bold);
  letter-spacing: var(--tracking-display);
  font-size:      clamp(20px, 3vw, 28px);
  line-height:    1.1;
}
.soc-featcards--3 .soc-featcard__title { font-size: 16px; }
@media (min-width: 768px) { .soc-featcards--3 .soc-featcard__title { font-size: clamp(18px, 2.2vw, 24px); } }

.soc-featcard__btn {
  display:         inline-flex;
  align-items:     center;
  margin-top:      14px;
  background:      var(--c-white);
  color:           var(--c-brand);
  padding:         10px 22px;
  border-radius:   var(--r-pill);
  font-size:       var(--text-sm);
  font-weight:     var(--fw-medium);
  letter-spacing:  .04em;
  white-space:     nowrap;
}
.soc-featcards--3 .soc-featcard__btn { margin-top: 10px; padding: 8px 16px; font-size: var(--text-xs); }
@media (min-width: 768px) { .soc-featcards--3 .soc-featcard__btn { margin-top: 14px; padding: 10px 20px; font-size: var(--text-sm); } }

/* ── O texto acompanha o scroll ──
   O título e o botão andam MAIS DEVAGAR do que a fotografia: começam mais
   acima dentro do card e vão assentando no lugar final enquanto o banner sobe.
   É a fotografia que passa por trás deles. Nada disto depende do rato.

   Ligado à posição da página, sem JavaScript: um listener de scroll numa
   homepage com carrosséis e vídeos custa a cada pixel scrollado.

   ATENÇÃO: qualquer ascendente com `overflow: hidden` mata isto sem dar erro —
   passa a contentor de scroll e o card deixa de se mover em relação a ele. A
   saída é `overflow: clip`, que clipa igual sem criar contentor de scroll.
   Verificado: nenhum invólucro acima do card define overflow. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* O texto arranca junto ao TOPO do card e desce até ao lugar final, no
       fundo. O percurso é portanto quase a altura do card — e essa muda com o
       ecrã e com o módulo, por isso não pode ser um valor fixo.

       `cqw` = largura do próprio card. Com 4:3, a altura é 75% da largura;
       tira-se o que o bloco de texto ocupa para ele não sair pelo topo. O
       `max()` é a rede: em cards muito estreitos o cálculo daria um valor
       negativo, que inverteria o movimento. */
    .soc-featcard { container-type: inline-size; }

    .soc-featcard                   { --soc-lag: max(60px, calc(75cqw - 130px)); }
    .soc-featcards--3 .soc-featcard { --soc-lag: max(50px, calc(75cqw - 110px)); }
    @media (max-width: 767px) {
      /* Neste tamanho o módulo de 3 usa cards em retrato: a altura é 133% da largura. */
      .soc-featcards--3 .soc-featcard { --soc-lag: max(40px, calc(133cqw - 80px)); }
    }

    .soc-featcard {
      view-timeline-name: --soc-featcard;
      view-timeline-axis: block;
    }
    @keyframes soc-featcard-lag {
      from { transform: translateY(calc(var(--soc-lag) * -1)); }
      to   { transform: translateY(0); }
    }
    .soc-featcard__body {
      animation: soc-featcard-lag linear both;
      /* Depois da abreviada: `animation:` repõe animation-timeline a `auto`. */
      animation-timeline: --soc-featcard;
      /* NÃO usar `entry`: o texto vive no fundo do card, e o fundo do card só
         assoma quando a entrada termina — o percurso todo decorria abaixo da
         dobra e via-se sempre o estado final. `cover` estende-o para depois de
         o banner estar à vista, que é quando há alguém a olhar. */
      animation-range: cover 20% cover 80%;
    }
  }
}

/* ── BRAND STATEMENT (S04) ── */
.soc-brand { padding-block: var(--sp-16); background: var(--c-surface); }
@media (min-width: 1024px) { .soc-brand { padding-block: 6rem; } }
.soc-brand__inner {
  max-width:  920px;
  margin:     0 auto;
  text-align: center;
  display:    flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
}
.soc-brand__title {
  font-family:    var(--font-display);
  font-weight:    var(--fw-light);
  letter-spacing: var(--tracking-display);
  font-size:      clamp(28px, 5.5vw, 52px);
  line-height:    1.12;
  color:          var(--c-text);
  margin:         0;
  text-wrap:      balance;
}
.soc-brand__accent { color: var(--c-accent); }
.soc-brand__btn {
  display:         inline-flex;
  align-items:     center;
  padding:         12px 30px;
  border-radius:   var(--r-pill);
  border:          1px solid var(--c-border-mid);
  background:      transparent;
  color:           var(--c-brand);
  font-size:       var(--text-sm);
  font-weight:     var(--fw-medium);
  letter-spacing:  .02em;
  text-decoration: none;
  transition:      background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.soc-brand__btn:hover {
  background:    var(--c-brand);
  border-color:  var(--c-brand);
  color:         #fff;
}