/* ==========================================================================
   SECTIONS — Per-section layout and styles
   ========================================================================== */

/* ---- Header ---- */
.top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-l);
}
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.04em }
.logo svg { width: 32px; height: 32px; flex: none }
.logo img { display: block; height: 34px; width: auto }
.nav { display: flex; gap: 28px; font-size: .9375rem; font-weight: 500 }
.nav a { text-decoration: none; color: var(--muted-l); transition: color .15s }
.nav a:hover { color: var(--ink) }
@media (max-width: 820px) { .nav { display: none } }
@media (max-width: 420px) { .top .btn .long { display: none } .logo img { height: 28px } }

/* ---- Hero (centered, no gallery) ---- */
.hero { padding-block: clamp(56px, 9vw, 120px) clamp(56px, 9vw, 110px); text-align: center }
.hero .wrap { max-width: 780px }
.hero h1 { font-size: clamp(3rem, 7.5vw, 5.5rem); font-weight: 800; letter-spacing: -0.035em }
.hl { background: linear-gradient(transparent 60%, var(--lime) 60%, var(--lime) 94%, transparent 94%); padding-inline: .06em; margin-inline: -.06em }
.hero .lead { margin-top: 24px; font-size: clamp(1.0625rem, 1.7vw, 1.25rem); max-width: 54ch; color: var(--muted-l); margin-inline: auto }
.hero-cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center }
.fine { margin-top: 22px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; color: var(--muted-l) }

/* ---- Interactive product gallery ---- */
.gallery { position: relative; min-width: 0 }

.gallery-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(16px, 2.5vw, 26px);
}
.gallery-label {
  font-family: var(--f-mono);
  font-size: clamp(.58rem, .85vw, .7rem);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-l);
  margin: 0;
}

/* ---- Segmented switch ---- */
.gallery-switch {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  background: var(--mist);
  border: 1.5px solid var(--line-l);
  border-radius: 99px;
  padding: 3px;
  min-width: clamp(210px, 24vw, 250px);
  transition: border-color .35s;
}
.gallery[data-mode="premium"] .gallery-switch,
.gallery-switch[data-mode="premium"] {
  border-color: rgba(201, 168, 76, .35);
}

.gsw-btn {
  position: relative;
  z-index: 2;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font: 600 clamp(.78rem, 1.05vw, .88rem)/1 var(--f-body);
  color: var(--muted-l);
  padding: 10px clamp(16px, 2vw, 22px);
  border-radius: 99px;
  cursor: pointer;
  transition: color .24s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.gsw-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
.gsw-btn:hover:not(.gsw-active) { color: var(--ink) }
.gsw-active { color: var(--ink) }
.gallery[data-mode="premium"] .gsw-btn.gsw-active,
.models-sec[data-mode="premium"] .gsw-btn.gsw-active,
.gallery-switch[data-mode="premium"] .gsw-btn.gsw-active { color: #161205 }

/* Sliding thumb indicator */
.gsw-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  background: #fff;
  border-radius: 99px;
  box-shadow: 0 1px 4px rgba(11, 13, 8, .08), 0 1px 2px rgba(11, 13, 8, .04);
  transition: transform .38s cubic-bezier(.4, 0, .15, 1), box-shadow .38s, border-color .38s;
  z-index: 1;
}
.gallery[data-mode="premium"] .gsw-thumb,
.models-sec[data-mode="premium"] .gsw-thumb,
.gallery-switch[data-mode="premium"] .gsw-thumb {
  transform: translateX(100%);
  box-shadow: 0 2px 10px rgba(201, 168, 76, .26), 0 1px 3px rgba(11, 13, 8, .06);
  border: 1px solid rgba(201, 168, 76, .22);
}

/* Particle burst container */
.gsw-fx { position: absolute; inset: -30px; pointer-events: none; z-index: 10 }

@keyframes gswPop {
  0%   { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg) }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(var(--sc)) rotate(var(--rot)) }
}
.gsw-p {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  animation: gswPop var(--dur) cubic-bezier(.15, .85, .3, 1) forwards;
}

/* Description */
.gallery-desc {
  margin: 0;
  font-family: var(--f-body);
  font-size: clamp(.78rem, 1vw, .88rem);
  color: var(--muted-l);
  text-align: center;
  transition: opacity .22s;
  min-height: 1.4em;
}

/* ---- Gallery stage ---- */
.gallery-stage {
  position: relative;
  overflow: visible; /* nav buttons must not be clipped */
}

/* Ambient glow */
.gallery-glow {
  position: absolute;
  top: 10%;
  left: 5%;
  right: 5%;
  bottom: -6%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(24px);
  transition: background .7s ease;
}
.gallery[data-mode="default"] .gallery-glow {
  background: radial-gradient(ellipse at center, rgba(160, 237, 12, .12) 0%, transparent 70%);
}
.gallery[data-mode="premium"] .gallery-glow {
  background: radial-gradient(ellipse at center, rgba(201, 168, 76, .14) 0%, transparent 70%);
}

/* ---- Carousel wrapper ---- */
.gc-carousel-wrap {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* Fade-out edges to hint at scroll */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* ---- Carousel track ---- */
.gallery-grid {
  display: flex;
  gap: clamp(12px, 2vw, 18px);
  padding: 8px 10% 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
}
.gallery-grid:active { cursor: grabbing; }
/* Hide scrollbar */
.gallery-grid::-webkit-scrollbar { display: none; }
.gallery-grid { scrollbar-width: none; -ms-overflow-style: none; }

/* ---- Individual card ---- */
.gallery-card {
  margin: 0;
  flex: 0 0 clamp(180px, 44vw, 230px);
  scroll-snap-align: center;
  border-radius: clamp(10px, 1.6vw, 16px);
  overflow: hidden;
  background: #f5f6f2;
  position: relative;
  border: 1.5px solid transparent;
  cursor: default;
  transition: transform .24s cubic-bezier(.4, 0, .2, 1),
              box-shadow .24s ease,
              border-color .24s ease;
}
.gallery-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 18px 44px -10px rgba(11, 13, 8, .14);
  border-color: var(--line-l);
}
.gallery[data-mode="premium"] .gallery-card:hover {
  border-color: rgba(201, 168, 76, .3);
}

/* Image crossfade layer */
.gc-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.gc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: opacity, transform;
  transition: opacity .42s cubic-bezier(.4, 0, .2, 1),
              transform .42s cubic-bezier(.4, 0, .2, 1);
}

/* Default mode: show default images */
.gc-def  { opacity: 1; transform: translateY(0) scale(1) }
.gc-prem { opacity: 0; transform: translateY(6px) scale(.97) }

/* Premium mode: crossfade to premium images */
.gallery[data-mode="premium"] .gc-def  { opacity: 0; transform: translateY(-6px) scale(.97) }
.gallery[data-mode="premium"] .gc-prem { opacity: 1; transform: translateY(0) scale(1) }

/* Figcaption */
.gallery-card figcaption {
  padding: clamp(8px, 1.2vw, 13px) clamp(10px, 1.5vw, 16px);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: clamp(.74rem, 1.15vw, .88rem);
  color: var(--ink);
  text-align: center;
}

/* Hover tag — reveals current mode on hover */
.gallery-card figcaption::after {
  content: '· PADRÃO';
  font-family: var(--f-mono);
  font-size: clamp(.46rem, .68vw, .56rem);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--muted-l);
  margin-left: 6px;
  opacity: 0;
  transition: opacity .2s;
  vertical-align: middle;
}
.gallery-card:hover figcaption::after { opacity: 1 }
.gallery[data-mode="premium"] .gallery-card figcaption::after {
  content: '· PREMIUM';
  color: #B8942D;
}

/* Entrance animation (added/removed by JS) */
.gallery-card.gc-hidden {
  opacity: 0 !important;
  transform: translateY(16px) !important;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .gsw-thumb,
  .gallery-switch,
  .gallery-glow { transition-duration: 0s }
  .gc-img { transition: opacity .01s !important; transform: none !important }
  .gallery[data-mode="premium"] .gc-def  { transform: none !important }
  .gallery[data-mode="premium"] .gc-prem { transform: none !important }
  .gallery-card { transition-duration: 0s }
  .gallery-card.gc-hidden { opacity: 1 !important; transform: none !important }
  .gsw-p { animation: none !important; display: none }
}

/* ---- Carousel nav buttons ---- */
.gc-nav {
  position: absolute;
  /* Vertically centered on the gc-carousel-wrap track */
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(11,13,8,.12);
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(11,13,8,.1);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s;
  -webkit-tap-highlight-color: transparent;
}
.gc-nav:hover {
  transform: translateY(calc(-50% - 2px));
  box-shadow: 0 8px 24px rgba(11,13,8,.14);
  border-color: rgba(11,13,8,.22);
}
.gc-prev { left: 4px }
.gc-next { right: 4px }
.gc-nav:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
.gc-nav[disabled] { opacity: .28; pointer-events: none }
.gallery[data-mode="premium"] .gc-nav:hover { border-color: rgba(201,168,76,.4); }

/* ---- Carousel dots ---- */
.gc-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}
.gc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--line-l);
  cursor: pointer;
  transition: background .22s, transform .22s, width .22s;
  flex: none;
}
.gc-dot:hover { background: var(--muted-l) }
.gc-dot.active {
  background: var(--ink);
  width: 20px;
  border-radius: 99px;
}
.gallery[data-mode="premium"] .gc-dot.active { background: #C9A84C; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .gallery-grid { gap: 10px; padding-inline: 6% }
  .gallery-head { gap: 8px; margin-bottom: 14px }
  .gc-nav { width: 30px; height: 30px }
}


/* ---- Benefit strip ---- */
.strip { padding-block: 36px }
.strip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px 32px }
.strip h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px }
.strip h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); flex: none }
.strip p { margin-top: 6px; color: var(--muted-d); font-size: .9375rem }

/* ---- Products ---- */
.prod-list { list-style: none; margin: 48px 0 0; padding: 0; border-top: 1.5px solid var(--ink) }
.prod { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 24px 8px; border-bottom: 1px solid var(--line-l); transition: background-color .2s }
.prod:hover { background: var(--mist) }
.prod .ico { width: 56px; height: 56px; border-radius: 16px; background: var(--lime); display: grid; place-items: center }
.prod .ico svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.prod .ico svg.solid { fill: var(--ink); stroke: none }
.prod h3 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em }
.prod p { margin-top: 4px; color: var(--muted-l); max-width: 58ch }
.prod .tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-l); border: 1px solid var(--line-l); padding: 6px 10px; border-radius: 999px; white-space: nowrap }
@media (max-width: 640px) { .prod { grid-template-columns: 48px minmax(0, 1fr); gap: 16px } .prod .tag { display: none } .prod .ico { width: 48px; height: 48px; border-radius: 14px } }

/* ---- How it works (steps) ---- */
.steps { margin-top: 52px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px }
@media (max-width: 820px) { .steps { grid-template-columns: minmax(0, 1fr) } }
.step { border-top: 1px solid var(--line-d); padding-top: 24px }
.step .n { font-family: var(--f-display); font-weight: 800; font-size: 4.5rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--lime); letter-spacing: -0.04em }
.step h3 { margin-top: 18px; font-size: 1.5rem; font-weight: 700 }
.step p { margin-top: 10px; color: var(--muted-d); max-width: 34ch }

/* ---- Why NFC ---- */
.why-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px }
@media (max-width: 760px) { .why-grid { grid-template-columns: minmax(0, 1fr) } }
.why { padding: 26px 0 30px; border-top: 1.5px solid var(--ink) }
.why h3 { font-size: 1.5rem; font-weight: 700 }
.why p { margin-top: 10px; color: var(--muted-l); max-width: 44ch }

/* ---- Pricing ---- */
.price-grid { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 28px; align-items: start }
@media (max-width: 960px) { .price-grid { grid-template-columns: minmax(0, 1fr) } }
.tbl-wrap { background: var(--paper); border: 1.5px solid var(--ink); border-radius: 24px; overflow-x: auto; min-width: 0 }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums }
th { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; text-align: left; color: var(--muted-l); padding: 18px 20px; border-bottom: 1.5px solid var(--ink); white-space: nowrap }
td { padding: 20px; border-bottom: 1px solid var(--line-l); transition: background-color .2s; vertical-align: middle }
tbody tr:last-child td { border-bottom: 0 }
tbody tr:hover td { background: var(--mist) }
tbody tr.on td { background: var(--lime-soft) }
.qty { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; white-space: nowrap }
.pr { font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.03em; white-space: nowrap }
.pr small { font-family: var(--f-body); font-weight: 500; font-size: .8125rem; letter-spacing: 0; color: var(--muted-l) }
.save { font-family: var(--f-mono); font-size: 13px; color: var(--muted-l); white-space: nowrap }
.best { display: inline-block; margin-left: 8px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: var(--lime); padding: 4px 8px; border-radius: 999px; vertical-align: middle }
.rowwa { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: .9rem; background: var(--lime); color: var(--ink); border-radius: 999px; padding: 9px 14px; white-space: nowrap; transition: transform .15s }
.rowwa:hover { transform: translateY(-2px) }
.rowwa svg { width: 18px; height: 18px }
@media (max-width: 560px) {
  th, td { padding: 14px 12px }
  .rowwa .lbl { display: none }
  .rowwa { padding: 10px }
  .qty { font-size: 1.0625rem }
  .pr { font-size: 1.25rem }
  .best { display: block; margin: 6px 0 0; width: max-content }
}
.note { margin-top: 16px; font-size: .875rem; color: var(--muted-l); max-width: 62ch }

/* ---- Audience ---- */
.aud-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 64px); align-items: start }
@media (max-width: 900px) { .aud-grid { grid-template-columns: minmax(0, 1fr) } }
.chips { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; padding: 0 }
.chips li { list-style: none; border: 1.5px solid var(--ink); border-radius: 999px; padding: 10px 18px; font-weight: 600; transition: background-color .15s }
.chips li:hover { background: var(--lime) }
.custom { background: var(--ink); color: #fff; border-radius: 28px; padding: clamp(24px, 4vw, 40px); --focus: var(--lime) }
.custom h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700 }
.custom p { margin-top: 14px; color: var(--muted-d); max-width: 40ch }
.custom .btn { margin-top: 26px }
.swatches { margin-top: 28px; display: flex; gap: 10px }
.swatches span { width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--line-d) }

/* ---- Final CTA ---- */
.cta h2 { font-size: clamp(2.2rem, 6vw, 4.4rem); font-weight: 800; max-width: 16ch; letter-spacing: -0.035em }
.cta p { margin-top: 18px; max-width: 46ch; font-size: 1.125rem }
.cta .row { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px }
.cta .num { font-family: var(--f-mono); font-size: 14px; letter-spacing: .04em }

/* ---- Footer ---- */
footer { padding-block: clamp(48px, 7vw, 80px) 28px }
.foot { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); gap: 40px 32px }
@media (max-width: 1020px) { .foot { grid-template-columns: repeat(2, minmax(0, 1fr)) } .foot .brand { grid-column: 1 / -1 } }
@media (max-width: 520px) { .foot { grid-template-columns: minmax(0, 1fr) } }
.foot-logo { display: inline-block }
.foot-logo img { display: block; height: 64px; width: auto }
.brand p { margin-top: 18px; max-width: 34ch; color: var(--muted-d); font-size: .9375rem }
.brand .btn { margin-top: 22px }
.fh { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 0 0 18px }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: .9375rem; color: var(--muted-d) }
.foot ul a { text-decoration: none; transition: color .15s }
.foot ul a:hover { color: #fff }
.foot .terms li { line-height: 1.45 }
.foot .terms strong { display: block; color: #fff; font-weight: 600 }
.foot .contact a.num { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums }
.legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-d); display: grid; gap: 14px }
.legal .row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; font-size: .8125rem; color: var(--muted-d) }
.legal .row a { text-decoration: none; color: #fff; font-weight: 600 }
.legal .row a:hover { color: var(--lime) }
.legal .tm { font-size: .75rem; line-height: 1.55; color: #7C826F; max-width: 90ch }

/* ===== MODELS SECTION ===== */
.models-sec{background:var(--ink);color:#fff;overflow:hidden;padding-block:clamp(64px,10vw,112px) clamp(72px,10vw,104px);position:relative}
.models-bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.models-bg-glow{position:absolute;border-radius:50%;filter:blur(80px)}
.models-bg-glow--1{width:60vw;height:60vw;top:-20%;left:-10%;background:radial-gradient(circle,rgba(160,237,12,.08) 0%,transparent 70%)}
.models-bg-glow--2{width:50vw;height:50vw;bottom:-10%;right:-5%;background:radial-gradient(circle,rgba(160,237,12,.05) 0%,transparent 70%)}
.models-bg-grid{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(ellipse at 50% 50%,black 20%,transparent 80%);mask-image:radial-gradient(ellipse at 50% 50%,black 20%,transparent 80%)}
.models-sec[data-mode=premium] .models-bg-glow--1{background:radial-gradient(circle,rgba(201,168,76,.1) 0%,transparent 70%)}
.models-sec[data-mode=premium] .models-bg-glow--2{background:radial-gradient(circle,rgba(201,168,76,.06) 0%,transparent 70%)}
.models-header{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:clamp(36px,5vw,56px)}
.models-eyebrow{color:var(--lime);opacity:.85}
.models-title{color:#fff;font-size:clamp(2rem,5vw,3.5rem);margin-top:10px;line-height:1.1;max-width:24ch;margin-inline:auto;text-align:center}
.models-sub{margin-top:16px;color:rgba(255,255,255,.6);font-size:clamp(.9375rem,1.4vw,1.0625rem);max-width:54ch;margin-inline:auto;line-height:1.6;text-align:center}
.models-reel-outer{position:relative;z-index:2;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 5%,black 12%,black 88%,transparent 95%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,transparent 5%,black 12%,black 88%,transparent 95%,transparent 100%)}
.models-reel{display:flex;gap:clamp(16px,2.2vw,24px);padding-block:12px 20px;padding-inline:40px;will-change:transform;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.models-reel.is-dragging{cursor:grabbing}
.mod-card{flex:0 0 clamp(240px,28vw,320px);margin:0;border-radius:clamp(14px,2vw,20px);overflow:hidden;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s ease,border-color .28s ease;position:relative;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.mod-card:active{cursor:grabbing}
.models-reel.is-dragging .mod-card,
body.is-mod-dragging,
body.is-mod-dragging *{cursor:grabbing !important;user-select:none !important}
.mod-card:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.mod-card::after{content:'Ampliar ⤢';position:absolute;top:12px;right:12px;background:rgba(11,13,8,.75);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:99px;border:1px solid rgba(255,255,255,.18);opacity:0;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease;pointer-events:none;z-index:4}
.mod-card:hover::after{opacity:1;transform:translateY(0)}
.mod-card:hover{transform:translateY(-6px) scale(1.018);box-shadow:0 28px 64px -12px rgba(0,0,0,.65),0 0 0 1px rgba(160,237,12,.2);border-color:rgba(160,237,12,.25)}
.mod-wrap{position:relative;aspect-ratio:1/1;overflow:hidden;user-select:none;-webkit-user-select:none}
.mod-wrap .gc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none;user-drag:none;user-select:none}
.mod-card figcaption{display:flex;align-items:center;justify-content:center;padding:clamp(12px,1.6vw,16px);background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.07);text-align:center}
.mod-name{font-family:var(--f-body);font-weight:700;font-size:clamp(.88rem,1.3vw,1.02rem);color:#fff;text-align:center;letter-spacing:-0.01em}
.models-footer{position:relative;z-index:2;margin-top:clamp(36px,5vw,52px);display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.models-footer-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.models-sec .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.04);backdrop-filter:blur(8px)}
.models-sec .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-1px)}
.models-footer-fine{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.35)}
@media(prefers-reduced-motion:reduce){.mod-card{transition-duration:0s}.models-reel{transition:none !important}}
@media(max-width:640px){.mod-card{flex:0 0 clamp(200px,72vw,260px)}.models-title{font-size:clamp(1.75rem,7vw,2.5rem)}.models-reel{padding-inline:20px}}