/* ==========================================================================
   ImSim Porsche Raceborn. Pagina de produto
   Estrutura inspirada na logica de uma pagina de produto Porsche (hero,
   banda de produto com variantes e numeros chave, capitulos de design e
   conducao, carrossel de detalhe, configurador de cor, comparador e fecho),
   construida inteiramente com os tokens do sistema ImSim v1.2.3.
   ========================================================================== */

/* --- 1. Hero ------------------------------------------------------------- */
/* Palco de produto, na logica de uma pagina de modelo Porsche: o nome em fundo,
   o produto por cima e a identidade por baixo, tudo em Ink.

   A rotacao: a seccao e uma pista mais alta do que o ecra e o .hero__pin fica
   colado ao topo enquanto ela corre. O JS le o progresso na pista e troca o
   frame, do 001 (perfil) ao 030 (de frente). Quando a pista acaba o pin
   descola e a pagina volta a andar.

   A altura da pista so cresce com .hero--spin, que o JS poe depois de ter os
   frames em memoria. Sem JS, ou com prefers-reduced-motion, isto fica uma
   seccao normal com o frame 001 parado. */
/* Nada de overflow:hidden aqui: um ancestral com overflow escondido desliga o
   position:sticky do filho. O recorte do nome em fundo faz-se no proprio pin. */
.hero{position:relative}
.hero--spin{height:calc(100svh + var(--spin-travel,240svh))}

.hero__pin{position:relative;overflow:hidden;display:flex;flex-direction:column;
  justify-content:center;gap:var(--s16);padding-block:var(--s48) var(--s32)}
.hero--spin .hero__pin{position:sticky;top:0;height:100svh}

.hero__backdrop{position:absolute;left:50%;top:clamp(56px,6vw,96px);
  transform:translateX(-50%);margin:0;z-index:0;pointer-events:none;
  font:700 clamp(48px,12vw,182px)/0.82 Geist,ui-sans-serif,system-ui,-apple-system,Helvetica,Arial,sans-serif;letter-spacing:-.04em;
  color:var(--ink-surface);white-space:nowrap}

/* O palco absorve o espaco que sobrar depois da identidade, por isso o conjunto
   cabe num ecra em qualquer altura de viewport sem numeros magicos. */
/* A imagem pode passar do palco: assenta em baixo, por isso o excesso sobe para
   cima do nome em fundo, que e onde ha espaco vazio. E o que a faz ler-se grande
   sem espremer a identidade nem rebentar o ecra. */
.hero__stage{position:relative;z-index:1;flex:1 1 auto;min-height:0;
  display:flex;align-items:flex-end;justify-content:center;
  margin:0;padding-inline:var(--margin)}
/* Os frames passaram a trazer chao, por isso cresceram de 1168x778 para
   1168x834 sem a maquina ter mudado de tamanho dentro deles. O palco sobe na
   mesma proporcao (834/778 = 1.072), senao a maquina aparecia 7% mais pequena
   do que a altura ja afinada. */
.hero__stage img{max-width:100%;width:auto;height:auto;object-fit:contain;
  max-height:var(--palco,47svh);
  /* Abaixo dos pes o frame traz 9.7% de altura que e so chao, e os ultimos 7%
     ja estao desvanecidos. Essa faixa sai da conta da altura: senao empurrava a
     maquina para cima e o pin cortava-lhe o topo. O que se sobrepoe a folga e
     chao quase transparente, que nao tapa nada. */
  margin-bottom:calc(var(--palco,47svh) * -0.072)}
/* o clamp poe um chao: em janelas muito baixas o calc ia a negativo e a
   altura maxima deixava de valer, com a imagem a transbordar o pin */
@media (min-width:700px){.hero__stage img{--palco:clamp(214px,62svh,calc(107svh - 413px))}}

.hero__id{position:relative;z-index:1;flex:0 0 auto;text-align:center;
  display:grid;justify-items:center;gap:var(--s16)}
.pills--centre{justify-content:center;margin-top:0}
.hero__name{max-width:none;margin-top:var(--s8)}
.tag{display:inline-block;padding:5px 12px;border-radius:var(--radius);
  background:var(--ink-surface);color:var(--steel-300)}
.hero__price{color:var(--steel-300)}
.hero__actions{display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:var(--s12) var(--s24);margin-top:var(--s8)}
@media (max-width:519px){.hero__actions{display:grid;width:100%}}

/* Numeros chave: primeira coisa depois de a rotacao acabar. Sem margem
   nenhuma: a hero e esta faixa sao ambas Ink e tocam-se, senao passava por ali
   o Paper do <body>. */
.figures{border-top:1px solid var(--steel-700)}

/* --- 2. Declaracao de abertura ------------------------------------------- */
.intro{display:grid;gap:var(--s24)}
@media (min-width:900px){
  .intro{grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);align-items:end}
  .intro__title{grid-column:1 / span 6}
  .intro__lede{grid-column:8 / span 5}
}
.intro__lede{color:var(--steel-300)}
.intro .caption+.h1{margin-top:var(--s12)}

/* --- Pills e numeros chave ----------------------------------------------- */
.pills{display:flex;flex-wrap:wrap;gap:var(--s8);margin-top:var(--s12)}
/* a pill le o ambiente em que esta. O corpo do site e env-paper, por isso
   selectores descendentes .env-paper/.env-ink aqui pintariam tudo ao contrario. */
.pill{min-height:var(--control-compact);padding:0 14px;border-radius:var(--radius);
  background:transparent;border:1px solid var(--rule);color:var(--fg);cursor:pointer;
  font:500 13px/1 Geist,ui-sans-serif,system-ui,-apple-system,Helvetica,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  transition:background-color .12s linear,border-color .12s linear,color .12s linear}
.pill:hover{border-color:var(--steel-500)}
.pill:focus-visible{outline:none;background:var(--focus-tertiary);border-color:var(--focus-tertiary);color:#fff}
.pill[aria-selected=true]{background:var(--fg);border-color:var(--fg);color:var(--bg)}

.figures__grid{display:grid;gap:var(--s32);padding-block:var(--s32)}
@media (min-width:768px){
  .figures__grid{grid-template-columns:repeat(3,1fr);gap:var(--s24);align-items:end}
  /* a RS traz quatro numeros: motion e feedback sensorial lado a lado */
  .figures__grid--4{grid-template-columns:repeat(2,1fr);gap:var(--s32) var(--s24)}
}
@media (min-width:1100px){.figures__grid--4{grid-template-columns:repeat(4,1fr);gap:var(--s24)}}
.figures__item .label{color:var(--steel-300);margin-bottom:var(--s12)}
.figure--text{font:600 clamp(21px,1.15rem + .9vw,30px)/1.18 Geist,ui-sans-serif,system-ui,-apple-system,Helvetica,Arial,sans-serif;letter-spacing:-.012em}
.figures__note{padding-bottom:var(--s32)}

/* --- Barra de produto ----------------------------------------------------- */
/* Fixa, e fora do fluxo, para nao deixar um degrau por baixo dos numeros quando
   esta escondida. So aparece quando o palco sai do ecra: enquanto ele se ve, as
   accoes ja la estao todas. Leva o nome e uma unica accao, mais nada. */
.product-bar{position:fixed;inset:0 0 auto;z-index:25;
  border-bottom:1px solid var(--steel-700)}
.product-bar[hidden]{display:none}
.product-bar__inner{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s16);min-height:56px}
.product-bar__name{font:600 15px/1.3 Geist,ui-sans-serif,system-ui,-apple-system,Helvetica,Arial,sans-serif;display:flex;align-items:baseline;gap:var(--s8);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-bar__name .technical{font-size:13px}   /* piso do sistema: 13px */
@media (max-width:767px){.product-bar__name .technical{display:none}}

/* --- 3. Par de imagens com Controlled Margin Break ------------------------ */
.pair{position:relative}
.pair__wide{margin:0}
.pair__inset{margin:calc(var(--s24) * -1) 0 0;width:64%;margin-left:auto}
.pair__text{margin-top:var(--s32)}
@media (min-width:900px){
  .pair{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter)}
  .pair__wide{grid-column:1 / span 9;grid-row:1}
  /* a unica quebra de grelha da pagina: 32px para la da coluna */
  .pair__inset{grid-column:8 / span 5;grid-row:1;align-self:end;width:auto;
    margin:0 calc(var(--break) * -1) calc(var(--break) * -1) 0;z-index:1}
  .pair__text{grid-column:1 / span 6;margin-top:var(--s64)}
  .pair--reverse .pair__wide{grid-column:4 / span 9;grid-row:1}
  .pair--reverse .pair__text{grid-column:1 / span 3;grid-row:1;align-self:center;margin-top:0}
}
@media (min-width:1200px){
  .pair--reverse .pair__text{grid-column:1 / span 4}
  .pair--reverse .pair__wide{grid-column:5 / span 8}
}

/* --- 4. Declaracao e cartoes --------------------------------------------- */
.statement{max-width:66ch}
.statement .h1+.body{margin-top:var(--s24)}
.statement .caption+.h1{margin-top:var(--s12)}
.statement--left{max-width:72ch}
.bleed-figure{margin:var(--s48) 0 0}
.bleed-figure img{width:100%}

.cards-2{display:grid;gap:var(--s48);margin-top:var(--s48)}
@media (min-width:900px){.cards-2{grid-template-columns:repeat(2,1fr);gap:var(--s64)}}
.card-open .h3+.body{margin-top:var(--s12)}
.card-open__more{margin-top:var(--s16)}
.card-open__more[hidden]{display:none}
.card-open__toggle{margin-top:var(--s16)}

/* --- 5. Movimento -------------------------------------------------------- */
.split{display:grid;gap:var(--s48)}
@media (min-width:1000px){
  .split{grid-template-columns:repeat(12,1fr);column-gap:var(--gutter)}
  .split__text{grid-column:1 / span 6}
  .cues{grid-column:8 / span 5;align-self:center}
}
.cues{display:grid;gap:var(--s32)}
.cue{display:grid;grid-template-columns:32px 1fr;gap:var(--s16);align-items:start}
.cue .h3+.small{margin-top:var(--s4)}
.band{margin:var(--s64) 0 0;display:block}
/* ancorada em baixo: e nos pes que se ve o movimento, nao no capo */
.band img{width:100%;max-height:70svh;object-fit:cover;object-position:50% 100%}

/* --- 6. Cartoes de experiencia ------------------------------------------- */
.cards-3{display:grid;gap:var(--s48)}
@media (min-width:900px){.cards-3{grid-template-columns:repeat(3,1fr);gap:var(--s32)}}
.card{display:flex;flex-direction:column}
.card__media{margin:0 0 var(--s24)}
.card__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card .h3+.body{margin-top:var(--s12)}
/* a linha tecnica assenta no fundo, para os tres cartoes fecharem a direito */
.card .body+.technical{margin-top:auto;padding-top:var(--s12);
  border-top:1px solid var(--rule)}
.card .body{margin-bottom:var(--s16)}

/* --- 7. Carrossel de detalhe --------------------------------------------- */
.rail__head{display:grid;gap:var(--s24);align-items:end}
@media (min-width:900px){.rail__head{grid-template-columns:1fr auto}}
.rail__nav{display:flex;gap:var(--s8)}
.rail-btn{width:var(--control-compact);height:var(--control-compact);display:grid;place-items:center;
  background:transparent;color:#fff;border:1px solid var(--steel-700);border-radius:var(--radius);
  cursor:pointer;transition:background-color .12s linear,border-color .12s linear}
.rail-btn:hover{border-color:var(--steel-500)}
.rail-btn:focus-visible{outline:none;background:var(--focus-tertiary);border-color:var(--focus-tertiary)}
.rail-btn[disabled]{color:var(--steel-500);border-color:var(--steel-700);pointer-events:none}
.rail-btn .icon{width:16px;height:16px;stroke-width:1.5}

.rail{display:flex;gap:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;
  margin-top:var(--s48);padding:0 var(--margin) var(--s16);
  /* sem isto o snap come a margem e o primeiro cartao encosta ao rebordo */
  scroll-padding-inline:var(--margin);
  scrollbar-width:thin;scrollbar-color:var(--steel-700) transparent}
.rail__item{flex:0 0 78%;scroll-snap-align:start}
@media (min-width:700px){.rail__item{flex-basis:44%}}
@media (min-width:1100px){.rail__item{flex-basis:30%}}
@media (min-width:1600px){.rail__item{flex-basis:24%}}
.rail__item figure{margin:0 0 var(--s16)}
.rail__item img{width:100%;aspect-ratio:4/5;object-fit:cover}
.rail__item .h3+.small{margin-top:var(--s4)}
/* recortes por foto, para o assunto ficar no centro do quadro */
.rail__item:nth-child(1) img{object-position:0% 50%}   /* o brasao esta a 25% da largura */
.rail__item:nth-child(2) img{object-position:44% 50%}
.rail__item:nth-child(3) img{object-position:50% 50%}
.rail__item:nth-child(4) img{object-position:90% 50%}  /* o lettering PORSCHE tem de caber */
.rail__item:nth-child(5) img{object-position:46% 52%}
.rail__item:nth-child(6) img{object-position:50% 56%}
.rail__item:nth-child(7) img{object-position:50% 42%}  /* pedais e a chapa TALENTO */
.rail__item:nth-child(8) img{object-position:35% 52%}  /* o transdutor ao centro */

/* --- 8. Configurador de cor ---------------------------------------------- */
.colour{display:grid;gap:var(--s32)}
@media (min-width:1000px){
  .colour{grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);align-items:center}
  .colour__stage{grid-column:1 / span 7}
  .colour__panel{grid-column:8 / span 5}
}
.colour__stage{margin:0;background:var(--ink)}
.colour__stage img{width:100%}
.swatches{display:flex;flex-wrap:wrap;gap:var(--s8);margin-top:var(--s12)}
.swatch{width:var(--control);height:var(--control);padding:5px;cursor:pointer;
  background:transparent;border:1px solid var(--steel-200);border-radius:var(--radius);
  transition:border-color .12s linear,background-color .12s linear}
.swatch::before{content:"";display:block;width:100%;height:100%;background:var(--chip);
  border:1px solid rgba(12,15,17,.14)}
.swatch:hover{border-color:var(--steel-500)}
.swatch:focus-visible{outline:none;background:var(--focus-secondary);border-color:var(--focus-secondary)}
.swatch[aria-pressed=true]{border-color:var(--ink);background:var(--ink)}
.colour__name{margin-top:var(--s12)}

/* --- 9. Comparador ------------------------------------------------------- */
.compare__switch{margin-bottom:var(--s32)}
.tiers{display:grid;gap:var(--s32)}
/* tres colunas so quando cabem sem partir as linhas das listas */
@media (min-width:1100px){.tiers{grid-template-columns:repeat(3,1fr);gap:var(--gutter)}}
.tier{background:var(--white);border:1px solid var(--steel-100);border-radius:var(--radius);
  padding:var(--s24);display:flex;flex-direction:column;gap:var(--s16)}
.tier .ticks{display:grid;gap:var(--s8)}
.ticks li{display:grid;grid-template-columns:16px 1fr;gap:var(--s8);
  font:400 15px/1.5 Geist,ui-sans-serif,system-ui,-apple-system,Helvetica,Arial,sans-serif;color:var(--steel-700)}
.ticks li::before{content:"";width:16px;height:16px;margin-top:4px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/16px no-repeat}
.tier .technical{margin-top:auto;padding-top:var(--s16);
  border-top:1px solid var(--steel-100);color:var(--steel-700)}
.table-scroll{overflow-x:auto}
.compare__table{min-width:760px}
.compare__table th[scope=row]{font:500 15px/1.5 Geist,ui-sans-serif,system-ui,-apple-system,Helvetica,Arial,sans-serif;width:22%;padding-right:var(--s24)}
.compare__table td{font:400 15px/1.5 Geist,ui-sans-serif,system-ui,-apple-system,Helvetica,Arial,sans-serif;color:var(--steel-700);padding-right:var(--s24)}

/* --- 10. Fecho ----------------------------------------------------------- */
.enquire{display:grid;gap:var(--s48)}
@media (min-width:1000px){
  .enquire{grid-template-columns:repeat(12,1fr);column-gap:var(--gutter)}
  .enquire__text{grid-column:1 / span 5}
  .enquire__form{grid-column:7 / span 6}
}
.enquire__row{display:grid;gap:var(--s16)}
@media (min-width:560px){.enquire__row{grid-template-columns:1fr 1fr}}
select.field{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A7ADB2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s16) center;background-size:20px;
  padding-right:48px}

/* --- Assentamento ---------------------------------------------------------
   Traducao do movimento medido em porsche.com (pagina do 911 Turbo S).

   O que la esta, medido e nao suposto: os blocos de conteudo NAO tem reveal de
   entrada, chegam opacos e sem transformacao. O unico movimento ligado ao
   scroll e no mosaico editorial, e nao e paralaxe linear: os items ficam
   parados, e a certa altura da passagem deslizam ate pousar, travando no fim.
   Mediram-se 335 px e 96 px de percurso num mosaico de 1905 px.

   A gramatica de tempo deles: duracoes 0,25 / 0,4 / 0,6 / 1,2 s e as curvas
   cubic-bezier(.25,.1,.25,1), (0,0,.2,1) e (.4,0,.5,1). As escalas subtis que
   declaram sao 0,99 e 0,993.

   Aqui a amplitude e menor porque as composicoes sao menores, e so toca
   fotografia: nunca texto, nunca controlos. Com prefers-reduced-motion nao
   acontece nada disto.

   NOTA DE SISTEMA: o brief da ImSim diz que nao existe movimento de posicao ou
   escala em lado nenhum. Isto abre uma excepcao, a pedido, e e a unica.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-assenta] {
    transform: translate3d(0, var(--assenta-y, 0px), 0) scale(var(--assenta-s, 1));
  }
}