/* ===== HOME (hero + shelf + cards) — atualizado (sem bordas arredondadas) ===== */

/* Fonte CTA */
@font-face{
  font-family:"ABCDiatypeExpanded";
  src:url("https://y1nrmnwgpdmg1oxw.public.blob.vercel-storage.com/FONTS/ABCDiatypeExpanded-Light-Trial.woff2") format("woff2"),
      url("https://y1nrmnwgpdmg1oxw.public.blob.vercel-storage.com/FONTS/ABCDiatypeExpanded-Light-Trial.otf") format("opentype");
  font-weight:300; font-style:normal; font-display:swap;
}

/* ================= Vars editáveis ================= */
:root{
  --bg:#fff;
  --text:#111;
  --muted:#666;
  --line:#e6e6e6;

  /* Fonte padrão da Home */
  --font-primary: "ABCDiatypeExpanded", system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;

  /* === HERO === */
  --hero-cta-scale: 0.7;              /* 2x maior */
  --hero-cta-base-font: 48px;         /* base para cálculo */
  --hero-cta-base-pad-x: 28px;
  --hero-cta-base-pad-y: 32px;
  --hero-dots-under-cta: 70px;        /* distância dos dots abaixo do CTA */

  --hero-dot-size: 18px;
  --hero-dots-gap: 12px;

  /* === Cards estáticos (Quero esse) === */
  --cards-gap-x: 10px;
  --cards-gap-y: 16px;
  --card-aspect: 3/4;                 /* desktop */
  --cards-radius: 0;                   /* sem arredondar */
  --cards-button-padding-x: 14px;
  --cards-button-padding-y: 8px;

  /* === Shelf (carrossel) === */
  --shelf-gap: 20px;                   /* espaço entre cards */
  --shelf-card-w: 280px;               /* largura do card */
  --shelf-card-radius: 0;              /* sem arredondar */
  --shelf-actions-gap: 8px;
  --shelf-btn-size: 42px;
  --shelf-edge-fade: 0px;
  --shelf-media-aspect: 1/2;           /* mais “fino” que 1/1 (altura menor) */
  --shelf-body-pad: 10px;

  /* Loader */
  --loader-backdrop: #fff;
}

/* Reset básico */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: var(--font-primary);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
button{font:inherit}

/* Herdar fonte para elementos-chave (evita sobrescritas) */
*,
button, input, select, textarea,
.hero .hero-cta,
.hero-cta-bottom,
.shelf-title,
.shelf-card .actions .btn,
.card-cta .btn-center {
  font-family: inherit;
}

.container{max-width:1280px; margin:0 auto; padding:0 20px}
.container.wide{max-width:1440px}

/* ===== Loader global (logo.svg centralizado) ===== */
#pageLoader{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--loader-backdrop); z-index:9999;
}
#pageLoader[aria-hidden="true"]{ display:none }
#pageLoader .spin{
  width:28px; height:28px; border-radius:999px;
  border:3px solid rgba(0,0,0,.18); border-top-color:#111;
  animation:home-spin 1s linear infinite;
}
@keyframes home-spin{to{transform:rotate(360deg)}}

/* ===== HERO ===== */
.hero{max-width:none; margin:0; padding:0}
.hero-full{height:100svh; position:relative}
.hero-full .banner{position:relative; height:100%; overflow:hidden}
.banner-rail{display:flex; height:100%; will-change:transform; transform:translateX(0); transition:transform .6s ease}
.banner-rail .slide{min-width:100%; height:100%; position:relative}
.banner-rail .slide img{width:100%; height:100%; object-fit:cover; object-position:center}

/* CTA central do banner (texto sublinhado, como solicitado) */
.hero .hero-cta{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%, -50%);
  background: transparent !important;
  color:#fff !important;
  border:0 !important;
  text-decoration: underline !important;
  text-underline-offset: 1px;
  text-decoration-thickness: 1px;
  box-shadow:none !important;

  font-family:"ABCDiatypeExpanded", system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  font-weight:300; font-synthesis-weight:none;

  font-size: calc(var(--hero-cta-base-font) * var(--hero-cta-scale));
  line-height: .5;
  letter-spacing: -0.015em;
  padding: calc(var(--hero-cta-base-pad-y) * var(--hero-cta-scale))
           calc(var(--hero-cta-base-pad-x) * var(--hero-cta-scale));
  white-space:nowrap;
}

/* Dots logo abaixo do CTA (ajuste com --hero-dots-under-cta) */
.banner-dots{
  position:absolute;
  left:50%;
  top: calc(50% + var(--hero-dots-under-cta));
  transform: translateX(-50%);
  bottom:auto;
  display:flex; gap: var(--hero-dots-gap);
}
.banner-dots button{
  width:var(--hero-dot-size); height:var(--hero-dot-size);
  border-radius:999px; border:0; cursor:pointer;
  background:rgba(255,255,255,.85);
  transition:opacity .15s ease, transform .15s ease;
}
.banner-dots button.active{ background:#fff }
.banner-dots button:active{ transform:scale(.96) }

/* ===== Shelf (carrossel) ===== */
.shelf{ position:relative; padding:28px 0 12px; overflow:hidden; }
.shelf[hidden]{display:none !important}
.shelf-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:16px; padding:0 4px;
}
.shelf-title{ margin:0; font-size:28px; letter-spacing:-0.02em; font-weight:700; }

.shelf-viewport{ position:relative; overflow:hidden; isolation:isolate; }
.shelf-edges{ pointer-events:none; }
.shelf-edges::before,
.shelf-edges::after{
  content:""; position:absolute; top:0; bottom:0; width:var(--shelf-edge-fade);
  z-index:2; background:linear-gradient(90deg,#fff, rgba(255,255,255,0));
}
.shelf-edges::before{ left:0; }
.shelf-edges::after{ right:0; transform: scaleX(-1); }

.shelf-track{
  display:flex; gap:var(--shelf-gap);
  will-change:transform;
  transform:translateX(var(--x, 0px));
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
  padding:4px 2px;
}

.shelf-card{
  flex:0 0 var(--shelf-card-w);
  border:1px solid var(--line);
  border-radius:var(--shelf-card-radius);
  overflow:hidden; background:#fff;
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
}
.shelf-card .media{
  height: 190px;
  position:relative; aspect-ratio: auto;
  background:#f5f5f7;
}
.shelf-card .media img{width:100%; height:100%; object-fit:cover; object-position: center;}
.shelf-card .media .media-loader{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.05));
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.shelf-card .media .media-loader.is-visible{opacity:1}
.shelf-card .media .spin{
  width:28px; height:28px; border-radius:50%;
  border:3px solid #fff5; border-top-color:#fff;
  animation:home-spin .8s linear infinite;
}

.shelf-card .body{padding:var(--shelf-body-pad)}
.shelf-card .row{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;
}
/* Mostrar nome completo no carrossel (sem reticências) */
.shelf-card .name{
  white-space: normal;   /* permite quebrar linha */
  overflow: visible;     /* não corta o texto */
  text-overflow: clip;   /* remove “…” */
}
.shelf-card .row{
  display: flex;
  flex-direction: column;   /* empilha */
  align-items: flex-start;  /* alinha à esquerda */
  gap: 4px;                 /* espaço entre nome e preço */
  margin-bottom: 10px;      /* mantém respiro antes do botão */
}
/* Centralizar o botão "Veja mais" */
.shelf-card .actions{
  justify-content: center;   /* centraliza o conteúdo do bloco de ações */
}
.shelf-card .actions .btn.more{
  margin: 0 auto;            /* garante centralização mesmo se o container mudar */
}

.shelf-card .price{font-weight:500}
.shelf-card .actions{ display:flex; gap:var(--shelf-actions-gap); margin-top:10px; }

/* “Veja mais” — estilo linha como no CTA do banner */
.shelf-card .actions .btn.more{
  border:0; background:transparent; color:#111;
  text-decoration: underline;
  text-underline-offset: 1px;
  text-decoration-thickness: 1px;
  height:40px; padding:0; cursor:pointer;
}

/* Botões flutuantes (sem barra de scroll) */
.shelf-nav{ position:absolute; inset:0; display:contents; }
.shelf-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:var(--shelf-btn-size); height:var(--shelf-btn-size);
  border:0px solid #111; background:Transparent; border-radius:0; cursor:pointer;
  z-index:3; display:grid; place-items:center;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.shelf-btn.prev{ left: min(24px, 2vw); }
.shelf-btn.next{ right: min(24px, 2vw); }

/* ===== Cards estáticos (abaixo do banner) ===== */
.home-cards{padding-block:40px}
.card-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  column-gap: var(--cards-gap-x);
  row-gap: var(--cards-gap-y);
}
@media (max-width:1000px){
  .card-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .card-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.card-cta{position:relative; overflow:hidden; border-radius:var(--cards-radius)}
.card-cta img{
  width:100%; height:auto; display:block;
  aspect-ratio: var(--card-aspect);
  object-fit:cover; object-position:center;
  border-radius:var(--cards-radius);
}
.card-cta .btn-center{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  background: transparent; color:#fff; border: 1px solid #fff; border-radius:0;
  padding:var(--cards-button-padding-y) var(--cards-button-padding-x);
  font-weight:600; letter-spacing:-0.015em;
  box-shadow:none; cursor:pointer; white-space:nowrap;
}
.card-cta a.btn-center{ text-decoration:none; display:inline-block }
.card-cta .btn-center:hover,
.card-cta .btn-center:focus-visible{ opacity:.9; outline:0 }

/* CTA final (se houver) — preserva estilo de “faixa preta” */
/* container do CTA final */
.cta-bottom{
  display:grid; place-items:center;
  padding:36px 0 56px;
}

.hero-cta-bottom{
  background:#000 !important;   /* fundo preto */
  color:#fff !important;        /* fonte branca */
  border:0 !important;
  border-radius:0;
  text-decoration:none;
  font-size: 28px;              /* controle do size da fonte */
  line-height: 1;
  padding: 16px 36px;           /* tamanho do botão */
  text-decoration: underline;          /* linha */
  text-underline-offset: 4px;          /* distância da linha ao texto */
  text-decoration-thickness: 1px;      /* espessura da linha */
  font-weight: 300;                     /* (corrigido para dentro do bloco) */
}

@media (max-width: 960px){
  .hero-cta-bottom{
    font-size: 24px;
    padding: 14px 28px;
  }
}

/* ===== Responsivo ===== */
/* Mobile: largura menor do card do carrossel + imagens coladas nas bordas */
@media (max-width: 960px){
  :root{
    --shelf-card-w: 46vw;  /* metade (aprox.) da largura da viewport */
    --shelf-gap: 8px;      /* diminui o espaço entre cards */
  }
  .shelf-card .media{
    height: 150px;  /* diminua aqui (ex: 130px, 120px) */
    aspect-ratio: auto; /* opcional, para ignorar o aspect-ratio variável */
  }
  /* zera as laterais da seção abaixo do carrossel */
  .home-cards.container{
    padding-left: 0.2 !important;
    padding-right: 0.2 !important;
  }

  /* se o grid tiver padding, zere também */
  .card-grid{
    column-gap: 0.5 !important;
    row-gap: 1 !important;
    padding: 0 !important;
    margin: 1 !important;
  }

  /* figure geralmente tem margin default do navegador */
  .card-cta{
    height: 380px; 
    margin: 0 !important;
    border-radius: 0;
  }

  /* garante que a imagem encoste e ocupe tudo */
  .card-cta img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;     /* preenche o card */
    border-radius: 0;
  }
}