/* Persianas Sergipe — catálogo.
   Paleta tirada do logo (marinho + cinza-aço) sobre um branco frio, de luz filtrada.
   As fotos já são quentes; o entorno fica frio para elas aparecerem. */
@property --lamina { syntax: "<length>"; inherits: false; initial-value: 0px; }

:root {
  --marinho: #16294a;
  --marinho-2: #223a63;
  --aco: #66758c;
  --prata: #d6dbe3;
  --papel: #f4f6f9;
  --branco: #fff;
  --areia: #c8b594;
  --titulo: "Red Hat Display", system-ui, sans-serif;
  --texto: "Instrument Sans", system-ui, sans-serif;
  --largura: 76rem;
  --borda: 1px solid var(--prata);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--marinho);
  font: 400 1.0625rem/1.6 var(--texto);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2 { font-family: var(--titulo); line-height: 1.1; margin: 0; }
:focus-visible { outline: 3px solid var(--areia); outline-offset: 3px; border-radius: 4px; }

.pular { position: absolute; left: -999px; top: 0; background: var(--marinho); color: #fff; padding: .75rem 1rem; z-index: 50; }
.pular:focus { left: 0; }

/* ---------- topo ---------- */
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: var(--largura); margin: 0 auto; padding: .75rem 1rem;
}
.topo__marca img { width: 11rem; height: auto; }
.topo__regiao {
  margin: 0; font: 500 .75rem/1.3 var(--titulo); letter-spacing: .14em; text-transform: uppercase;
  color: var(--aco); text-align: right; max-width: 9rem;
}

/* ---------- faixa de ícones ---------- */
.faixa { background: var(--branco); border-block: var(--borda); }
.faixa__lista {
  list-style: none; margin: 0 auto; padding: .5rem; max-width: var(--largura);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; /* celular: 4 × 2, nada escondido atrás de gesto */
}
.faixa__item {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  min-height: 5.25rem; padding: .6rem .2rem; border-radius: .75rem;
  text-decoration: none; text-align: center; color: var(--aco);
  font: 500 .75rem/1.2 var(--titulo); transition: color .2s, background-color .2s;
}
.faixa__item .ic { width: 2.5rem; height: 2.5rem; }
.faixa__item[aria-current] { color: var(--marinho); background: var(--papel); }
@media (hover: hover) { .faixa__item:hover { color: var(--marinho); background: var(--papel); } }
.faixa__item[aria-current] { box-shadow: inset 0 -3px 0 var(--marinho); }

/* ---------- abertura da home ---------- */
.abre { max-width: var(--largura); margin: 0 auto; padding: 2.25rem 1rem 1.25rem; }
.abre__titulo { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.75rem); font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; }
/* as três lâminas do P do logo, como assinatura sob o título */
.abre__titulo::after {
  content: ""; display: block; width: 3.5rem; height: 1.125rem; margin-top: 1rem;
  background: repeating-linear-gradient(var(--marinho) 0 .25rem, transparent .25rem .4375rem);
}

/* ---------- grade de modelos (todos lado a lado; o id da família fica no 1º cartão dela) ---------- */
.grade {
  max-width: var(--largura); margin: 0 auto; padding: 1rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .75rem;
}
.cartao { scroll-margin-top: 1rem; display: flex; flex-direction: column; text-decoration: none; }
.cartao__foto { position: relative; display: block; overflow: hidden; border-radius: .5rem; background: var(--prata); aspect-ratio: 4 / 5; }
.cartao__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
/* persiana que desce um pouco no hover */
.cartao__foto::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 0; pointer-events: none;
  background: repeating-linear-gradient(rgb(22 41 74 / .82) 0 .5rem, transparent .5rem .6875rem);
  transition: height .25s cubic-bezier(.2, .7, .2, 1);
}
/* toque/clique: a persiana desce até a metade da foto, rápido, e só então a página abre (classe posta pelo app.js) */
.cartao--fechando .cartao__foto::after { height: 50%; transition-duration: .28s; }
/* só com mouse: no toque o :hover gruda e a persiana fica cobrindo a foto enquanto a página troca */
@media (hover: hover) {
  .cartao:hover .cartao__foto::after, .cartao:focus-visible .cartao__foto::after { height: 22%; }
  .cartao:hover .cartao__foto img { transform: scale(1.03); }
}
.cartao__nome { margin-top: .75rem; font: 700 1.0625rem/1.2 var(--titulo); }
.cartao__resumo { display: none; margin-top: .3rem; color: var(--aco); font-size: .9375rem; line-height: 1.45; }
.cartao__ver { margin-top: .4rem; font: 500 .8125rem/1.2 var(--titulo); color: var(--aco); text-decoration: underline; text-underline-offset: .25em; }
.cartao:hover .cartao__ver { color: var(--marinho); }

/* ---------- página do modelo ---------- */
.modelo { max-width: var(--largura); margin: 0 auto; padding: 0 1rem; }
.trilha { display: flex; gap: .5rem; padding: 1.25rem 0 0; font-size: .875rem; color: var(--aco); }
.trilha { align-items: center; }
.trilha a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.modelo__corpo { display: grid; gap: 2rem; padding: 1rem 0 3rem; }
.modelo__nome { font-size: clamp(1.875rem, 1.2rem + 3vw, 3.25rem); font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; overflow-wrap: break-word; }
.modelo__resumo { margin: .75rem 0 0; font: 500 1.1875rem/1.4 var(--titulo); color: var(--marinho-2); }
.modelo__texto p { margin: 0 0 1rem; }
.modelo__texto h2 { margin: 2rem 0 .75rem; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--aco); }
.etiquetas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.etiquetas li { padding: .4rem .8rem; border: var(--borda); border-radius: 99px; background: var(--branco); font-size: .9375rem; }
.lista { list-style: none; margin: 0; padding: 0; border-top: var(--borda); }
.lista li { padding: .7rem 0; border-bottom: var(--borda); }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  margin-top: 2rem; min-height: 3.25rem; padding: .75rem 1.5rem; border-radius: .5rem;
  background: var(--marinho); color: #fff; text-decoration: none; font: 700 1rem/1.2 var(--titulo);
  transition: background-color .2s;
}
.botao:hover { background: var(--marinho-2); }

/* carrossel: desliza com o dedo (scroll-snap); setas, contador e miniaturas mostram que há mais fotos */
.carrossel { min-width: 0; }
.carrossel__trilho {
  position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: .5rem; background: var(--prata); aspect-ratio: 4 / 5; overscroll-behavior-x: contain;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__foto { flex: 0 0 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.carrossel__foto img { width: 100%; height: 100%; object-fit: cover; }
/* a primeira foto abre como persiana ao carregar */
.carrossel__foto:first-child { position: relative; }
.carrossel__foto:first-child::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(var(--marinho) 0 var(--lamina), transparent var(--lamina) 1.75rem);
  animation: abrir .45s cubic-bezier(.3, 0, .2, 1) both;
}
@keyframes abrir { from { --lamina: 1.75rem; } to { --lamina: 0px; } }
.carrossel__barra { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; }
.carrossel__seta {
  width: 3rem; height: 3rem; border: var(--borda); border-radius: 50%; background: var(--branco); color: var(--marinho);
  font: 500 1.75rem/1 var(--titulo); padding-bottom: .2rem; cursor: pointer; transition: background-color .2s, color .2s;
}
@media (hover: hover) { .carrossel__seta:hover { background: var(--marinho); color: #fff; } }
.carrossel__conta { margin: 0; font: 700 .875rem/1 var(--titulo); letter-spacing: .1em; color: var(--aco); }
.carrossel__minis { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; margin-top: .5rem; }
.carrossel__mini { padding: 0; border: 0; border-radius: .3rem; overflow: hidden; background: var(--prata); cursor: pointer; aspect-ratio: 4 / 5; opacity: .55; transition: opacity .2s; }
.carrossel__mini img { width: 100%; height: 100%; object-fit: cover; }
.carrossel__mini[aria-current] { opacity: 1; box-shadow: inset 0 -3px 0 var(--marinho); }

.preco { margin: 1rem 0 0; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.preco span { font: 700 .75rem/1 var(--titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--aco); }
.preco strong { font: 800 1.75rem/1 var(--titulo); letter-spacing: -.01em; }
.cartao__preco { margin-top: .35rem; font-size: .875rem; color: var(--aco); }
.cartao__preco strong { color: var(--marinho); font: 700 1rem var(--titulo); }

/* ---------- pé ---------- */
.pe { margin-top: 3rem; background: var(--marinho); color: #dfe5ee; }
.pe__dentro { max-width: var(--largura); margin: 0 auto; padding: 2.5rem 1rem; }
.pe__logo { width: 12rem; }
.pe__texto { margin: 1rem 0; color: #b9c3d3; }
.pe__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.pe__links a { display: inline-block; padding: .6rem 0; }

/* barra fixa (só nas páginas de modelo): no celular, o pedido mora embaixo, no alcance do polegar */
body:has(.barra) { padding-bottom: 5rem; }
.barra {
  position: fixed; inset: auto .75rem .75rem; z-index: 20;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.5rem; border-radius: .75rem; background: var(--marinho); color: #fff;
  text-decoration: none; font: 700 1rem/1 var(--titulo); box-shadow: 0 10px 30px rgb(12 22 40 / .28);
}

@media (min-width: 40rem) {
  .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.25rem; }
  .cartao__resumo { display: block; }
  .faixa__lista { grid-template-columns: repeat(8, 1fr); }
  .topo__regiao { max-width: none; }
  .topo__marca img { width: 13rem; }
}
@media (min-width: 62rem) {
  body:has(.barra) { padding-bottom: 0; }
  .barra { display: none; } /* no desktop o botão da coluna de texto já está à vista */
  .topo, .abre, .grade, .modelo, .pe__dentro { padding-inline: 2rem; }
  .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .abre { padding-top: 3.5rem; }
  .modelo__corpo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.5rem 4rem; align-items: start; grid-template-rows: auto 1fr; }
  .modelo__cabeca { grid-column: 1; grid-row: 1; }
  .modelo__texto { grid-column: 1; grid-row: 2; }
  .carrossel { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 1.5rem; max-width: 34rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carrossel__foto:first-child::after { animation: none; }
  .cartao__foto::after, .cartao__foto img { transition: none; }
  .cartao--fechando .cartao__foto::after { height: 0; }
}