/* Preload critical images and optimize loading */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

img[loading="lazy"] {
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* Preconnect for faster resource loading */
@media (prefers-reduced-motion: no-preference) {
  * {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
}

@media (min-width: 1025px) {
  .cores-bolas-desktop {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 12px;
    justify-content: flex-start;
  }
  .cor-bola-desktop {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
    outline: none;
    transition: border 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    padding: 0;
    background-clip: padding-box;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .cor-bola-desktop.selected {
    border: 2px solid #b8742f;
    box-shadow: 0 0 0 2px #b8742f44;
  }
}
@media (min-width: 1025px) {
  .design-menu-btns-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
}

/* MAIÚSCULAS APENAS NOS BOTÕES COM TEXTO COMERCIAL SOLICITADOS */
.ver-mais-btn,
.gama-expand,
.btn-cupra-filled,
.btn-cupra-outline,
.site-nav__links a { /* manter navegação superior em caps se já fazia parte do layout */
  text-transform: uppercase;
  letter-spacing: .04em;
}

header h1{
    max-width: 850px;
}

/* Garantir que elementos funcionais internos não forçam uppercase global */
.design-menu-btn,
.tech-menu-btn,
.slide-control,
.gallery-dot,
.slider-prev,
.slider-next,
.faq-question,
.close-btn,
#design-prev, #design-next,
#design-prev-leon, #design-next-leon,
#design-prev-terramar, #design-next-terramar,
#tech-prev, #tech-next,
#tech-prev-leon, #tech-next-leon,
#tech-prev-terramar, #tech-next-terramar {
  text-transform: none;
}

/* Bolas de cor continuam sem transformação */
.cor-bola-desktop, .cor-bola-mobile { text-transform: none !important; }

/* OVERRIDE FINAL: garantir uppercase nos botões comerciais mesmo que outras rules antigas sobrescrevam */
.ver-mais-btn,
.slide-btn,
.gama-expand {
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

@media (max-width: 1024px) {
  .design-menu-btns-col {
    display: flex;
    flex-direction: row;
    gap: 6px;
    width: 100%;
    justify-content: flex-start;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .design-menu-btns-col::-webkit-scrollbar {
    display: none;
  }
}
@media (min-width: 1025px) {
  .design-menu-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    width: auto;
  }
  .design-menu-btns-col{
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    will-change: transform;
  }
  .design-nav-vertical-arrows {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
/* .ev-btn-more removido: agora reutilizamos .ver-mais-btn existente para consistência */
    cursor: pointer;
    transition: background 0.2s;
    opacity: 1;
  }
  .design-nav-vertical:active {
    background: #b8742f;
  }
  .design-nav-vertical[disabled] {
    opacity: 0.4;
    pointer-events: none;
  }
}
@media (min-width: 1025px) {
  .cores-info-box-mobile {
    display: none !important;
  }

}
@media (min-width: 1025px) {
  .design-menu-btn.expanded svg {
    display: none !important;
  }
  .design-menu-btn .cores-info-inside-btn {
    display: none;
  }
  .design-menu-btn .cores-label-desktop {
    display: inline-block;
    font-weight: 300;
    font-size: 1rem;
    margin-left: 8px;
    vertical-align: middle;
  }
  .design-menu-btn.expanded .cores-label-desktop {
    display: none;
  }
  .design-menu-btn.expanded .cores-info-inside-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: none;
    color: #fff;
    padding: 0;
    margin-top: 0;
    font-size: 1rem;
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    animation: fadeInUp 0.3s;
  }
}
@media (max-width: 1024px) {
  .cores-info-inside-btn {
    display: none !important;
  }
}
@media (min-width: 1025px) {
  .design-menu {
    flex-direction: column;
    align-items: flex-start;
  }
  .design-menu-btn {
    width: 260px;
    max-width: 100%;
    transition: width 0.3s, min-height 0.3s, background 0.3s;
    overflow: hidden;
  }
  .design-menu-btn .cores-info-inside-btn {
    display: none;
  }
  .design-menu-btn.expanded .cores-info-inside-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: none;
    color: #fff;
    padding: 0;
   margin-bottom: 8px;
    font-size: 1rem;
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    animation: fadeInUp 0.3s;
  }
  .design-menu-btn.expanded {
    width: 350px;
    min-height: 90px;
    background: #1f2022;
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.18);
    align-items: flex-start;
    white-space: normal;
    z-index: 2;
  }
}
@media (max-width: 1024px) {
  .design-menu-btn .cores-info-inside-btn {
    display: none !important;
  }
  .design-menu-btn.expanded {
    width: 100%;
    min-height: unset;
    background: #1f2022;
    box-shadow: none;
    align-items: center;
    white-space: nowrap;
    z-index: 1;
  }
}
  .cores-info-title {
    font-weight: 700;
    font-size: 1.08rem;
    margin-bottom: 4px;
    letter-spacing: 0.01em;
  }
  .cores-info-text {
    color: rgba(255,255,255,0.85);
    font-size: 0.98rem;
    font-weight: 300;
    line-height: 1.45;
  }
@media (min-width: 1025px) {
  .design-menu {
    position: relative;
    /* Ensure the menu sits above the absolute .design-content overlay */
    z-index: 2002;
  }
  .design-menu-btn {
    position: relative;
    z-index: 2002;
    overflow: visible;
  }
  .cores-info-box-desktop {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-8px);
    min-width: 260px;
    background: #1f2022;
    color: #fff;
    border-radius: 14px;
    padding: 18px 22px 16px 22px;
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.22);
    font-size: 1rem;
    z-index: 10;
    flex-direction: column;
    gap: 8px;
    animation: fadeInUp 0.3s;
  }
  .design-menu-btn.expanded {
    z-index: 20;
  }
  .design-menu-btn.expanded .cores-info-box-desktop {
    display: flex;
  }
  .cores-info-title {
    font-weight: 400;
    font-size: 1.08rem;
    margin-bottom: 4px;
    letter-spacing: 0.01em;
  }
  .cores-info-text {
    color: rgba(255,255,255,0.85);
    font-size: 0.98rem;
    font-weight: 300;
    line-height: 1.45;
  }
}
@media (max-width: 1024px) {
  .cores-info-box-desktop { display: none !important; }
}
@media (max-width: 340px) {
  .cores-bolas-mobile {
    flex-wrap: wrap;
    row-gap: 6px;
    justify-content: flex-start;
    min-width: 0;
  }
}
@media (max-width: 1024px) {
  .design-nav-arrow svg {
    width: 16px !important;
    height: 24px !important;
    display: block;
  }
  .design-nav-arrow.left svg, .tech-nav-arrow.left svg {
    margin-left:6px;
  }
  .design-nav-arrow.right svg, .tech-nav-arrow.right svg {
    margin-right: 20px;
  }
  .cores-info-box-mobile {
    position: absolute; /* inside the design overlay, not the viewport */
    left: 16px;
    right: 16px;
    bottom: 20px;
    background: #1f2022;
    color: #fff;
    border-radius: 18px;
    padding: 12px 16px;
    min-height: 44px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.10);
    flex-direction: column;
    gap: 10px;
    z-index: 30;
    max-width: 90%;
    margin: 0 auto;
    font-size: 0.9rem;
    align-items: flex-start;
    text-align: left;
    display: none;
  }

  .design-section.active .cores-info-box-mobile {
    display: flex !important;
  }

  .cores-info-box-mobile > div:first-child {
    color: rgba(255, 255, 255, .78);
    text-align: left;
    font-weight: 300;
    margin: 0;
    font-size: .85rem;
    line-height: 1.4;
    width: 100%;
  }
  .cores-info-box-mobile strong {
    font-weight: 700;
    font-size: 1rem;
    margin-right: 6px;
    text-align: left;
    display: block;
  }

    @media (max-width: 536px) {

      .garage-cta__title {
    max-width: 100%!important;
}
}

  /* Para dispositivos muito pequenos - layout ainda mais compacto */
  @media (max-width: 480px) {
    .cores-info-box-mobile {
      left: 12px;
      right: 12px;
      padding: 10px 12px;
      font-size: 0.85rem;
      gap: 6px;
      max-width: 95%;
    }

    .cores-info-box-mobile strong {
      font-size: 0.9rem;
      margin-right: 6px;
    }
    .cores-bolas-mobile {
      gap: 4px;
    }
    .cor-bola-mobile {
      width: 18px;
      height: 18px;
    }
  }

  .cores-bolas-mobile {
    display: flex;
    flex-direction: row;
    gap: 6px;
    margin: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    text-align: left;
    align-items: center;
    min-width: 0;
    flex-shrink: 0;
  }
  .cor-bola-mobile {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: border 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
    padding: 0;
    outline: none;
  }
  .cor-bola-mobile.selected {
    border: 2px solid #b8742f;
    box-shadow: 0 0 0 2px #b8742f44;
  }

  /* Aplicar thumbnails às bolas via data-img (JS vai setar inline, isto é backup) */
  .cor-bola-mobile[data-img] { background-color: #000; }
  .cor-bola-mobile:focus-visible { box-shadow: 0 0 0 2px #ffffffaa, 0 0 0 4px #b8742f; }
}
/* Bloco de info de cores (estilo iPhone) */

.cores-info-box {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 72px;
  background: #5a463a;
  color: #fff;
  border-radius: 22px;
  padding: 10px 18px 8px 18px;
  min-height: 38px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.10);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  z-index: 20;
  max-width: 340px;
}

.cores-info-box strong {
  font-weight: 700;
  font-size: 1rem;
}

.cores-bolas {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin: 0;
}

.cor-bola {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  cursor: pointer;
  transition: border 0.2s;
}

.cor-bola.selected {
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 2px #d18a3a;
}

/* Exemplo de cores */
.cor-bola.laranja { background: #d18a3a; }
.cor-bola.azul { background: #ffffff; }
.cor-bola.branco { background: #fff; border: 2px solid #e0e0e0; }
/* CUPRA Landing Tailwind complement styles (only what utilities can't express cleanly) */
/* CUPRA Font Family - Servidor SAPO */
@font-face {font-family:"Cupra";src:url("https://pub.web.sapo.io/static/2025/pub/Cupra/09/05/fonts/Cupra-ExtraLight.otf") format("opentype");font-weight:200;font-style:normal;font-display:swap;}
@font-face {font-family:"Cupra";src:url("https://pub.web.sapo.io/static/2025/pub/Cupra/09/05/fonts/Cupra-ExtraLightItalic.otf") format("opentype");font-weight:200;font-style:italic;font-display:swap;}
@font-face {font-family:"Cupra";src:url("https://pub.web.sapo.io/static/2025/pub/Cupra/09/05/fonts/Cupra-Light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap;}
@font-face {font-family:"Cupra";src:url("https://pub.web.sapo.io/static/2025/pub/Cupra/09/05/fonts/Cupra-LightItalic.otf") format("opentype");font-weight:300;font-style:italic;font-display:swap;}
@font-face {font-family:"Cupra";src:url("https://pub.web.sapo.io/static/2025/pub/Cupra/09/05/fonts/Cupra-Book.otf") format("opentype");font-weight:350;font-style:normal;font-display:swap;}
@font-face {font-family:"Cupra";src:url("https://pub.web.sapo.io/static/2025/pub/Cupra/09/05/fonts/Cupra-BookItalic.otf") format("opentype");font-weight:350;font-style:italic;font-display:swap;}
@font-face {font-family:"Cupra";src:url("https://pub.web.sapo.io/static/2025/pub/Cupra/09/05/fonts/Cupra-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap;}
@font-face {font-family:"Cupra";src:url("https://pub.web.sapo.io/static/2025/pub/Cupra/09/05/fonts/Cupra-Italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap;}
@font-face {font-family:"Cupra";src:url("https://pub.web.sapo.io/static/2025/pub/Cupra/09/05/fonts/Cupra-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap;}
@font-face {font-family:"Cupra";src:url("https://pub.web.sapo.io/static/2025/pub/Cupra/09/05/fonts/Cupra-MediumItalic.otf") format("opentype");font-weight:500;font-style:italic;font-display:swap;}
@font-face {font-family:"Cupra";src:url("https://pub.web.sapo.io/static/2025/pub/Cupra/09/05/fonts/Cupra-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap;}
@font-face {font-family:"Cupra";src:url("https://pub.web.sapo.io/static/2025/pub/Cupra/09/05/fonts/Cupra-BoldItalic.otf") format("opentype");font-weight:700;font-style:italic;font-display:swap;}
@font-face {font-family:"Cupra";src:url("../fonts/Cupra-ExtraBold.otf") format("opentype");font-weight:800;font-style:normal;font-display:swap;}
@font-face {font-family:"Cupra";src:url("../fonts/Cupra-ExtraBoldItalic.otf") format("opentype");font-weight:800;font-style:italic;font-display:swap;}

body, button, input, textarea, select, .site-nav, .section-title, .card-title, .garage-cta__title {
  font-family:"Cupra",system-ui,sans-serif !important;
  -webkit-font-smoothing:antialiased;
}
html, body {
  scroll-behavior:smooth !important;
}
html{overscroll-behavior-y:none;}
* {
  scroll-behavior:smooth !important;
}
/* Brand palette override (blue replacing former copper) */
:root{--brand-main:#2a5567;--brand-accent:#4e8ea6;--slider-vh:100vh;}

/* Sections styling */
.section-white { background: #fff; color: #111; }
.section-dark { background: #111; color: #fff; padding: 8rem 0 6rem; }
/* Dark gradient with subtle copper hue top-left for Terramar & EV sections */
.section-dark-nuance {
  position: relative;
  /* Smaller, subtler copper flare */
  background: #16181d;
  color: #fff;
  padding: 8rem 0 6rem;
  overflow: hidden;
}
/* Optional subtle noise overlay (can be swapped for an inline SVG if desired) */
.section-dark-nuance:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 35%),
              repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0 2px, rgba(0,0,0,0) 2px 4px);
  mix-blend-mode: overlay;
  opacity: .4;
  pointer-events: none;
}

/* Local nuance block (BEV only) allowing inner rounded panel without affecting whole section */
/* Sub-panels inside veículos eletrificados (PHEV + BEV) */
.eletricos-nuance-sub {
  position: relative;
  padding: 4rem 2rem 4rem;
  background: #16181d;
}
@media (max-width: 860px){
  .eletricos-nuance-sub { padding:3rem 1.25rem 3rem; }
}

/* Strengthen Terramar nuance specifically */
#terramar.section-dark-nuance {
  background: #16181d;
}

/* PHEV / BEV split blocks */
.phev-block { padding:4rem 2rem 4rem; background: transparent; }
@media (max-width:860px){ .phev-block{padding:3rem 1.25rem 3rem;} }

.bev-bg { background:#16181d; }
.bev-block { padding:4rem 2rem 4rem; }
@media (max-width:860px){ .bev-block{padding:3rem 1.25rem 3rem;} }
.section-title-dark { color: #111; }
.section-title-white { color: #fff; font-size: clamp(2.5rem,5vw,4rem); font-weight: 300; margin-bottom: 1.5rem; }
.section-sub-dark { color: rgba(17,17,17,0.7); }
.section-sub-white { color: rgba(255,255,255,0.8); font-size: 1.2rem; max-width: 900px; margin: 0 auto; }
.section-head-spacing { margin-bottom: 7rem; }
.title-cupra-black { color: #000; }
.subtitle-phev { color: #fff; font-size: clamp(1.8rem,3vw,2.5rem); font-weight: 300; }
.text-phev { color: rgba(255,255,255,0.8); font-size: clamp(1rem,2vw,1.2rem); font-weight: 300; }
.img-aspect-34 { aspect-ratio: 3/4; border-radius: 0; }

/* Sections styling */
.section-white { background: #fff; color: #111; }
.section-dark { background: #111; color: #fff; padding: 8rem 0 6rem; }
.section-title-dark { color: #111; }
.section-title-white { color: #fff; font-size: clamp(2.5rem,5vw,4rem); font-weight: 300; margin-bottom: 1.5rem; }
.section-sub-dark { color: rgba(17,17,17,0.7); }
.section-sub-white { color: rgba(255,255,255,0.8); font-size: 1.2rem; max-width: 900px; margin: 0 auto; }
.section-head-spacing { margin-bottom: 7rem; }
.title-cupra-black { color: #000; }
.subtitle-phev { color: #fff; font-size: clamp(1.8rem,3vw,2.5rem); font-weight: 300; }
.text-phev { color: rgba(255,255,255,0.8); font-size: clamp(1rem,2vw,1.2rem); font-weight: 300; }
.img-aspect-34 { aspect-ratio: 3/4; border-radius: 0; }
/* Top navigation */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:60;background:linear-gradient(to bottom,rgba(0,0,0,.6),rgba(0,0,0,0));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .35s,top .4s cubic-bezier(.4,0,.2,1);} 
.site-nav__inner{max-width:1436px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.25rem;}
@media (min-width:768px){.site-nav__inner{padding:1rem 2rem;}}
.site-nav__brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:#fff;}
.site-nav__logo{height:24px;width:auto;display:block;object-fit:contain;filter:brightness(1) contrast(1.05);} 
.site-nav__links{display:flex;gap:1.5rem;align-items:center;}
.site-nav__links a{position:relative;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:rgba(255,255,255,.75);font-weight:500;transition:.3s;line-height:1;padding:.5rem .25rem;}
.site-nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:#fff;transition:.35s cubic-bezier(.4,0,.2,1);}
.site-nav__links a:hover{color:#fff;}
.site-nav__links a:hover::after{width:100%;}
.site-nav__links a.active{color:#fff;}
.site-nav__links a.active::after{width:100%;background:#fff;}
.site-nav.scrolled{background:rgba(0,0,0,.75);}

/* Mobile nav toggle */
.site-nav__toggle{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:42px;height:42px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:6px;cursor:pointer;transition:.35s cubic-bezier(.4,0,.2,1);position:relative;z-index:50;}
.site-nav__toggle span{display:block;width:20px;height:2px;background:#fff;transition:.4s cubic-bezier(.4,0,.2,1);border-radius:2px;}
.site-nav__toggle:hover{background:rgba(255,255,255,.15);} 
.site-nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.site-nav__toggle.is-open span:nth-child(2){opacity:0;transform:scaleX(0);}
.site-nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} 

/* Mobile navigation (hamburger menu) */
@media (max-width:1268px){
  .site-nav__toggle{display:inline-flex;}
  .site-nav__links{position:fixed;inset:0 0 auto 0;top:0;right:0;flex-direction:column;align-items:flex-start;padding:6rem 2rem 3rem;background:rgba(14,15,16,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);gap:1.75rem;transform:translateY(-100%);transition:transform .55s cubic-bezier(.4,0,.2,1);width:100%;height:100vh;overflow-y:auto;}
  .site-nav__links a{font-size:.9rem;letter-spacing:.22em;padding:.25rem 0;}
  .site-nav__links.is-open{transform:translateY(0);} 
}

/* Desktop navigation (horizontal menu) */
@media (min-width:1268px){
  .site-nav__toggle{display:none;}
  .site-nav__links{display:flex;gap:1.5rem;align-items:center;position:static;transform:none;width:auto;height:auto;background:none;backdrop-filter:none;padding:0;flex-direction:row;}
}

/* Buttons (retangulares) */
.btn-cupra-filled,.btn-cupra-outline{position:relative;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;padding:4px 40px;min-height:44px;border-radius:0;font-size:16px;line-height:20px;font-weight:400;cursor:pointer;text-decoration:none;-webkit-font-smoothing:antialiased;transition:.3s ease-out;letter-spacing:0;}
.btn-cupra-filled{background:#dbd3cb;color:#000;border:none;box-shadow:none;}
.btn-cupra-filled:hover{background:#ebe6e1;}
.btn-cupra-outline{background:transparent;color:#dbd3cb;border:1px solid #dbd3cb;}
.btn-cupra-outline:hover{background:#dbd3cb;color:#000;}

/* Section wrapper (full width) */
.section-wrapper{width:100%;padding:5rem 0 6rem;} 
@media (min-width:768px){.section-wrapper{padding:5rem 0 6rem;}}
/* Inner constrained containers */
.section-inner{max-width:1436px;margin:0 auto;padding:0 1.5rem;}
@media (min-width:768px){.section-inner{padding:0 3rem;}}
.section-inner-pass{max-width:1436px;margin:0 auto;padding:0 1.5rem;}
@media (min-width:768px){.section-inner-pass{padding:0 3rem;}}
/* Helper: center media blocks but keep text left */
.media-center{text-align:left;}
.media-center > *{margin-left:auto;margin-right:auto;}
/* Extra vertical spacing only when explicitly added */
.vpad-lg{padding-top:7rem;padding-bottom:8rem;}
@media (min-width:768px){.vpad-lg{padding-top:8rem;padding-bottom:9rem;}}
.section-head{margin-bottom:5rem;}
.section-head > * + *{margin-top:1.1rem;}
.section-title{font-size:2rem;font-weight:300;line-height:1.15;}

@media (min-width:768px){.section-title{font-size:2.5rem;}}
.section-sub{font-size:1rem;line-height:1.55;color:rgba(255,255,255,.6);font-weight:300;max-width:52rem;}

@media (min-width:768px){.section-sub{font-size:1.15rem;}}

/* Gradient helper substituído por cor sólida */
.grad-copper{background:none !important;color:#ffffff;-webkit-background-clip:initial !important;background-clip:initial !important;}
/* Overrides Tailwind gradient utilities para cor sólida */
:root .from-cupra-copper, :root .to-cupra-copperLight{--tw-gradient-from:#2a5567 !important;--tw-gradient-to:#2a5567 !important;--tw-gradient-stops:#2a5567,#2a5567 !important;}
.bg-gradient-to-r.from-cupra-copper.to-cupra-copperLight{background:none !important;color:#2a5567 !important;-webkit-background-clip:initial !important;background-clip:initial !important;}

/* Video thumbnails */
.video-thumb{position:relative;cursor:pointer;border-radius:0;overflow:hidden;box-shadow:0 8px 24px -6px rgba(0,0,0,.55);background:#000;aspect-ratio:16/9;}
.video-thumb .thumb-img, .video-thumb iframe{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.4,0,.2,1),filter .5s cubic-bezier(.4,0,.2,1);border-radius:0;will-change:transform;} 
.video-thumb:hover .thumb-img{transform:scale(1.05);} 
.video-thumb::after{content:"▶";position:absolute;bottom:.65rem;left:.7rem;font-size:1.15rem;color:#fff;text-shadow:0 2px 8px #0009;}
.play-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:3rem;color:#fff;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.55),rgba(0,0,0,.15));opacity:0;transition:.5s;} 
.video-thumb:hover .play-badge{opacity:1;}

/* Form fields */
.field{width:100%;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);padding:.85rem 1rem;font-size:.85rem;color:#fff;line-height:1.3;font-family:inherit;transition:.35s cubic-bezier(.4,0,.2,1);} 
.field::placeholder{color:rgba(255,255,255,.3);} 
.field:focus{outline:2px solid var(--brand-main);outline-offset:1px;border-color:var(--brand-main);background:rgba(255,255,255,.1);} 

/* Content cards (3 blocks) */
.content-card{--mask:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,.15));position:relative;overflow:hidden;border-radius:0;min-height:420px;display:flex;align-items:flex-end;padding:2rem;background:#111;background-image:var(--bg);background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 10px 30px -8px #000;transition:background-size .7s ease;} 
.content-card:hover{background-size:cover;}
.content-card::before{content:"";position:absolute;inset:0;background:var(--mask);border-radius:0;} 
.content-inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:1rem;}
.card-title{font-size:1.6rem;font-weight:300;letter-spacing:.5px;}
.card-text{font-size:.85rem;line-height:1.55;color:rgba(255,255,255,.8);} 
.card-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:14px;line-height:18px;font-weight:400;letter-spacing:0;text-transform:none;color:#000;background:#dbd3cb;padding:4px 18px 5px;min-height:36px;border-radius:0;text-decoration:none;transition:.25s ease-out;cursor:pointer;width:auto;max-width: 40%;;}
.card-link:hover{background:#ebe6e1;color:#000;}


/* Sliders base (peeks calculados em JS agora) */
#video-slider .flex, #gallery-slider .flex {gap:0;}
#gallery-slider .flex{gap:24px;}
figure.group{border-radius:0 !important;}

/* Gallery captions */
.gallery-captions{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2.2rem;margin-top:2.5rem;padding-top:0;}
.gcap{opacity:.38;transition:.35s;color:rgba(255,255,255,.55);font-size:.7rem;letter-spacing:.05em;line-height:1.5;border-top:1px solid rgba(255,255,255,.12);padding-top:1.1rem;}
.gcap-title{font-size:.72rem;margin-bottom:.65rem;font-weight:600;letter-spacing:.08em;}
.gcap-active{opacity:1;color:#fff;border-top-color:#fff;}
.gcap-active .gcap-title{color:#fff;}



/* City Garage CTA */
.garage-cta{position:relative;width:100%;min-height:480px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.garage-cta__bg{position:absolute;inset:0;background:#111 url('../images/hibridos-electrificados.webp') center/cover no-repeat;filter:brightness(1);} 
.garage-cta__overlay{position:absolute;inset:0;background:linear-gradient(115deg,rgba(0,0,0,.85),rgba(0,0,0,.35));mix-blend-mode:normal;}
.garage-cta__inner{position:relative;z-index:2;width: 100%;max-width:1436px;margin:0 auto;padding:4rem 1.5rem;text-align:left;display:flex;flex-direction:column;gap:1.25rem;}
@media (min-width:768px){.garage-cta__inner{padding:4.5rem 3rem;}}
.garage-cta__title{font-size:2.2rem;font-weight:300;letter-spacing:.5px;max-width:50%;line-height: 1.12;}
@media (min-width:900px){.garage-cta__title{font-size:2.8rem;}}
.garage-cta__subtitle{font-size:1.1rem;font-weight:300;color:#dbd3cb;}
.garage-cta__text{font-size:.9rem;line-height:1.55;max-width:860px;color:rgba(255,255,255,.82);}
.garage-cta__btn{margin-top:.75rem;}
.garage-cta__actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
.garage-cta__actions .garage-cta__btn{align-self:auto;}


/* Scrollbar (optional subtle) */
::-webkit-scrollbar{width:10px;background:#0e0f10;} 
::-webkit-scrollbar-thumb{background:#202325;border-radius:20px;} 
::-webkit-scrollbar-thumb:hover{background:#2b2f32;}

/* Reduce motion preference */
@media (prefers-reduced-motion:reduce){
  .video-thumb .thumb-img, .video-thumb iframe{transition:none;}
  .btn-cupra-filled,.btn-cupra-outline{transition:none;}
}

/* (removido ruleset vazio antigo de .content-header/.section-wrapper) */

/* Passatempo section specific */
.passatempo-section{--p-color:#2a5567;background:#161819;color:#fff;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);width:100%;}
.passatempo-section .section-title{color:#fff;}
.passatempo-section .section-title .grad-copper{background:none;color:var(--p-color);-webkit-background-clip:initial;background-clip:initial;}
.passatempo-section .section-sub{color:rgba(255,255,255,.65);}
.passatempo-section .field{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);color:#fff;}
.passatempo-section .field::placeholder{color:rgba(255,255,255,.35);}
.passatempo-section .field:focus{outline:2px solid var(--p-color);border-color:var(--p-color);background:rgba(255,255,255,.1);}
.passatempo-section .btn-cupra-filled{background:#dbd3cb;color:#000;}
.passatempo-section .btn-cupra-outline{border-color:#dbd3cb;color:#dbd3cb;}
.passatempo-section .btn-cupra-outline:hover{background:#dbd3cb;color:#000;}
.passatempo-section label{color:rgba(255,255,255,.75);}
.passatempo-section #form-note{color:rgba(255,255,255,.45);}

/* Vertical Static Scroll Slider (versão simples) */
.vs-section{position:relative;width:100%;height:auto;}
.vs-pin{position:relative;min-height:300vh;} /* 3 * 100vh */
[data-vs-pin]{--vs-count:3;}
.vs-stack{position:sticky;top:0;left:0;width:100%;height:100vh;overflow:hidden;}
.vs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transform:translateY(0);will-change:transform;z-index:1;transition:none !important;}
/* Desativar qualquer transição residual */
.vs-img[data-vs-active="1"]{z-index:1;}
.vs-img[data-vs-state="past"]{z-index:1;}
@media (prefers-reduced-motion:reduce){.vs-img{transition:none !important;transform:none !important;} }

/* ================= MOBILE DESIGN BLOCKS ================= */

.mobile-design-blocks-section {
  padding: 80px 0;
  background: #0e0f10;
}

.mobile-design-blocks-section.galeria-expanded,
.mobile-design-blocks-section.design-expanded {
  padding: 0 !important;
}


.design-blocks-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

.design-blocks-container.galeria-expanded,
.design-blocks-container.design-expanded {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
}

.mobile-design-block {
  position: relative;
  height: 70vh;
  min-height: 500px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
}

/* Garantir que o galeria-block é sempre clicável */
#galeria-block {
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

#galeria-block * {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Formentor específico */
.mobile-design-block.formentor:nth-child(1) {
  background-image: url('../images/formentor.webp');
}

.mobile-design-block.formentor:nth-child(2) {
  background-image: url('../images/formentor-design.webp');
}

.mobile-design-block.formentor:nth-child(3) {
  background-image: url('../images/formentor-tecnologia.webp');
}

/* Leon específico */
.mobile-design-block.leon:nth-child(1) {
  background-image: url('../images/leon.webp');
}

.mobile-design-block.leon:nth-child(2) {
  background-image: url('../images/leon-design.webp');
}

.mobile-design-block.leon:nth-child(3) {
  background-image: url('../images/leon-tecnologia.webp');
}

/* Terramar específico */
.mobile-design-block.terramar:nth-child(1) {
  background-image: url('../images/terramar.webp');
}

.mobile-design-block.terramar:nth-child(2) {
  background-image: url('../images/terramar-design.webp');
}

.mobile-design-block.terramar:nth-child(3) {
  background-image: url('../images/terramar-tecnologia.webp');
}


.mobile-design-block::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  z-index: 1;
}

/* Galeria expandida */
.design-blocks-container {
  transition: grid-template-columns 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.design-blocks-container.galeria-expanded {
  grid-template-columns: 1fr !important;
  overflow: hidden;
}

.design-blocks-container.galeria-expanded #galeria-block {
  grid-column: 1;
  transform: scale(1);
  z-index: 10;
}
/* Promote Leon and Terramar galeria tiles when expanded */
.design-blocks-container.galeria-expanded #galeria-block-leon,
.design-blocks-container.galeria-expanded #galeria-block-terramar {
  grid-column: 1;
  transform: scale(1);
  z-index: 10;
}

/* Desktop only: esconder outros blocos quando galeria está expandida */
@media (min-width: 1025px) {
  .design-blocks-container.galeria-expanded #design-block,
  .design-blocks-container.galeria-expanded #tecnologia-block {
    display: none;
  }
  /* Leon scoped */
  #leon .design-blocks-container.galeria-expanded #design-block-leon,
  #leon .design-blocks-container.galeria-expanded #tecnologia-block-leon { display: none; }
  /* Terramar scoped */
  #terramar .design-blocks-container.galeria-expanded #design-block-terramar,
  #terramar .design-blocks-container.galeria-expanded #tecnologia-block-terramar { display: none; }
}

/* Design block expansion */
.design-blocks-container.design-expanded {
  grid-template-columns: 1fr !important;
  overflow: hidden;
}

.design-blocks-container.design-expanded #design-block {
  grid-column: 1;
  transform: scale(1);
  z-index: 10;
  background-image: url('../images/formentor-design.webp') !important;
}

/* Desktop only: esconder outros blocos quando design está expandido */
@media (min-width: 1025px) {
  .design-blocks-container.design-expanded #galeria-block,
  .design-blocks-container.design-expanded #tecnologia-block {
    display: none;
  }
  /* Leon scoped */
  #leon .design-blocks-container.design-expanded #galeria-block-leon,
  #leon .design-blocks-container.design-expanded #tecnologia-block-leon { display: none; }
  /* Terramar scoped */
  #terramar .design-blocks-container.design-expanded #galeria-block-terramar,
  #terramar .design-blocks-container.design-expanded #tecnologia-block-terramar { display: none; }
/* Leon: Design expanded visuals and visibility */
#leon .design-blocks-container.design-expanded #design-block-leon {
  grid-column: 1;
  transform: scale(1);
  z-index: 10;
  background-image: url('../images/leon-design.webp') !important;
  background-size: cover;
  background-position: center;
}
#leon .design-blocks-container.design-expanded #galeria-block-leon,
#leon .design-blocks-container.design-expanded #tecnologia-block-leon {
  display: none;
}

/* Leon default tile bg images */
#leon #design-block-leon { background-image: url('../images/leon-design.webp'); background-size: cover; background-position: center; }
#leon .design-blocks-container.galeria-expanded #design-block-leon,
#leon .design-blocks-container.tech-expanded #design-block-leon { background-image: none; }

/* Leon: when galeria is expanded, hide other blocks except galeria content */
#leon .design-blocks-container.galeria-expanded #design-block-leon,
#leon .design-blocks-container.galeria-expanded #tecnologia-block-leon { display: none; }
/* Terramar: Design expanded visuals and visibility */
#terramar .design-blocks-container.design-expanded #design-block-terramar {
  grid-column: 1;
  transform: scale(1);
  z-index: 10;
}
/* Terramar default tile background (neutral state) */
#terramar #design-block-terramar { background-image: url('../images/terramar-design.webp'); background-size: cover; background-position: center; }
#terramar .design-blocks-container.galeria-expanded #design-block-terramar,
#terramar .design-blocks-container.tech-expanded #design-block-terramar { background-image: none; }
}

.mobile-design-block {
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              min-width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Conteúdo expandido da galeria */
.galeria-expanded-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
  z-index: 5;
  display: flex;
  flex-direction: column;
}

.design-blocks-container.galeria-expanded .galeria-expanded-content {
  opacity: 1;
  visibility: visible;
}

/* Hide only the expanded block's tile content, keep others visible */
.design-blocks-container.galeria-expanded #galeria-block .mobile-design-content,
.design-blocks-container.galeria-expanded #galeria-block-leon .mobile-design-content,
.design-blocks-container.galeria-expanded #galeria-block-terramar .mobile-design-content {
  opacity: 0;
  visibility: hidden;
}

/* Esconder imagem de fundo quando expandido */
.design-blocks-container.galeria-expanded #galeria-block {
  background-image: none;
}

.design-blocks-container.design-expanded #design-block {
  background-image: none;
}

/* Design expanded content behaves like overlay (align with galeria/tech) */
.design-expanded-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
  /* Must sit above .design-content (z-index: 1000) to allow clicks on the menu */
  z-index: 2001;
  display: flex;
  flex-direction: column;
}

.design-blocks-container.design-expanded .design-expanded-content {
  opacity: 1;
  visibility: visible;
}

.design-blocks-container.design-expanded #design-block .mobile-design-content,
.design-blocks-container.design-expanded #design-block-leon .mobile-design-content,
.design-blocks-container.design-expanded #design-block-terramar .mobile-design-content {
  opacity: 0;
  visibility: hidden;
}

/* Tecnologia block expansion */
.design-blocks-container.tech-expanded {
  grid-template-columns: 1fr !important;
  overflow: hidden;
}

.design-blocks-container.tech-expanded #tecnologia-block {
  grid-column: 1;
  transform: scale(1);
  z-index: 10;
  background-image: url('../images/formentor-tecnologia.webp') !important;
}

/* Desktop only: esconder outros blocos quando tecnologia está expandida */
@media (min-width: 1025px) {
  .design-blocks-container.tech-expanded #galeria-block,
  .design-blocks-container.tech-expanded #design-block {
    display: none;
  }
}

/* Conteúdo expandido da tecnologia */
.tech-expanded-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
  z-index: 5;
  display: flex;
  flex-direction: column;
}

.design-blocks-container.tech-expanded .tech-expanded-content {
  opacity: 1;
  visibility: visible;
}

.design-blocks-container.tech-expanded #tecnologia-block .mobile-design-content,
.design-blocks-container.tech-expanded #tecnologia-block-leon .mobile-design-content,
.design-blocks-container.tech-expanded #tecnologia-block-terramar .mobile-design-content {
  opacity: 0;
  visibility: hidden;
}

/* Container da galeria */
.gallery-container {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.gallery-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease-in-out, visibility 1.2s ease-in-out;
}

.gallery-item.active {
  opacity: 1;
  visibility: visible;
}

.gallery-item video,
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Navegação por dots */
/* Leon Tecnologia expanded state and visibility */
#leon .design-blocks-container.tech-expanded #tecnologia-block-leon {
  grid-column: 1;
  transform: scale(1);
  z-index: 10;
  background-image: url('../images/leon-tecnologia.webp') !important;
}
@media (min-width: 1025px) {
  #leon .design-blocks-container.tech-expanded #galeria-block-leon {
    display: none;
  }
}
/* Leon: when tecnologia is expanded on desktop, also hide the design tile */
@media (min-width: 1025px) {
  #leon .design-blocks-container.tech-expanded #design-block-leon {
    display: none;
  }
}

/* Terramar Tecnologia expanded state and visibility */
#terramar .design-blocks-container.tech-expanded #tecnologia-block-terramar {
  grid-column: 1;
  transform: scale(1);
  z-index: 10;
  background-image: url('../images/terramar-tecnologia.webp') !important;
}
@media (min-width: 1025px) {
  #terramar .design-blocks-container.tech-expanded #galeria-block-terramar {
    display: none;
  }
  /* Also hide the Terramar design tile while tecnologia is expanded */
  #terramar .design-blocks-container.tech-expanded #design-block-terramar {
    display: none;
  }
}
.gallery-dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  z-index: 10;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 16px 28px;
  border-radius: 30px;
  backdrop-filter: blur(15px);
  min-width: 120px;
}

.gallery-dot {
  border: none;
  cursor: pointer;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background: rgba(255, 255, 255, 0.6);
}

/* Estado inicial - todos círculos exceto o ativo */
.gallery-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background: rgba(255, 255, 255, 0.6);
}

/* O dot ativo fica retangular */
.gallery-dot.active {
  width: 45px;
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 1);
}

/* Dots não ativos ficam círculos */
.gallery-dot:not(.active) {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}

.gallery-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 20;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease;
}

.close-btn:hover {
  background: rgba(0, 0, 0, 0.9);
}

.mobile-design-content {
  position: relative;
  z-index: 2;
  padding: 40px 20px;
  text-align: left;
  color: white;
}

.mobile-design-content h2 {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: 12px;
  color: white;
}

/* Override para garantir que o título fica branco */
.mobile-design-content .section-title {
  color: white;
}

.mobile-design-content .section-title .grad-copper {
  background: none;
  color: white;
  -webkit-background-clip: initial;
  background-clip: initial;
}

.mobile-design-content p {
  margin: 0;
  font-size: .85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
  opacity: .85;
  max-width: 420px;
  margin-bottom: 20px;
}

/* Botões "SABER MAIS" / "VER MAIS" / "MAIS" (slide-btn) alinhados com .btn-cupra-filled e em MAIÚSCULAS */
.ver-mais-btn,
.slide-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: .4rem;
  background: #dbd3cb; /* igual a .btn-cupra-filled */
  color: #000;
  border: none;
  box-shadow: none;
  padding: 4px 40px; /* igual a .btn-cupra-filled */
  min-height: 44px;   /* igual a .btn-cupra-filled */
  border-radius: 0;   /* igual a .btn-cupra-filled */
  font-size: 16px;    /* igual a .btn-cupra-filled */
  line-height: 20px;
  font-weight: 400;
  letter-spacing: .08em; /* consistente com regra de botões comerciais */
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  transition: .3s ease-out;
}

.ver-mais-btn:hover,
.slide-btn:hover {
  background: #ebe6e1; /* hover igual ao .btn-cupra-filled */
  color: #000;
}

/* Opcional: esconder o ícone de seta inline para uniformizar com "Ver Vídeos" */
.ver-mais-btn svg {
  display: none;
}

/* Responsive para mobile - uma coluna */
@media (max-width: 1024px) {
  .mobile-design-blocks-section {
    padding: 60px 0;
  }
  
  .design-blocks-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  /* IMPORTANTE: Manter expansão da galeria em mobile */
  .design-blocks-container.galeria-expanded {
    grid-template-columns: 1fr !important;
  }
  
  .design-blocks-container.design-expanded {
    grid-template-columns: 1fr !important;
  }
  
  .mobile-design-block {
    height: 50vh;
    min-height: 400px;
  }
  
  .mobile-design-content {
    padding: 30px 20px;
  }
  
  .mobile-design-content h2 {
    font-size: 1.5rem;
  }
}

/* VERTICAL SLIDER */
.vertical-slider-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.slider-container {
  position: relative;
  height: 100%;
  width: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transform: translateY(100%);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
}

.slide.active {
  opacity: 1;
  transform: translateY(0);
  z-index: 2;
}

.slide.next {
  opacity: 1;
  transform: translateY(100%);
  z-index: 1;
}

.slide.prev {
  opacity: 1;
  transform: translateY(-100%);
  z-index: 1;
}

.slide.exiting {
  opacity: 1;
  z-index: 1;
}

.slide.overlapping {
  opacity: 1;
  z-index: 3;
}

.slide.sliding-up {
  transform: translateY(-5%);
  transition: transform 0.6s ease-out;
  z-index: 1;
}

.slide.sliding-down {
  transform: translateY(5%);
  transition: transform 0.6s ease-out;
  z-index: 1;
}

.slide-content {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  position: relative;
}

.slide-text {
  position: absolute;
  left: 2%;
  top: 50%;
  transform: translateY(-50%) translateX(-100%);
  z-index: 10;
  color: white;
  max-width: 600px;
  padding: 40px;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide.active .slide-text {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

.slide.exiting .slide-text {
  transform: translateY(-50%) translateX(-100%);
  opacity: 0;
}

.slide-text h2 {
  font-size: clamp(2.2rem,5vw,3.6rem);
  font-weight: 300;
  letter-spacing: .5px;
  margin: 0 0 1rem;
  line-height: 1.04;
}

.slide-text h3 {
  font-size: clamp(1.4rem,3.5vw,2.2rem);
  font-weight: 300;
  letter-spacing: 1px;
  margin: 0 0 1.5rem;
  line-height: 1.12;
}

.slide-text p {
  font-size: 1.1rem;
  line-height: 1.5;
  margin-bottom: 30px;
  opacity: 0.9;
}

.slide-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

.slide-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateX(5px);
}

.slide-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.slide-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1;
  pointer-events: none;
}

.slide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.slider-controls {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.slide-control {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.slide-control.active {
  background: white;
  border-color: white;
}

.slide-control:hover {
  border-color: white;
  transform: scale(1.2);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
  .vertical-slider-section {
    height: 70vh; /* Menor altura em mobile */
  }
  
  .slide-text {
    left: 20px;
    right: 20px;
    max-width: none;
    padding: 30px 20px;
    top: auto;
    bottom: 40px;
    transform: translateX(-100%);
  }
  
  .slide.active .slide-text {
    transform: translateX(0);
    opacity: 1;
  }
  
  .slide.exiting .slide-text {
    transform: translateX(-100%);
    opacity: 0;
  }
  
  .slide-text h2 {
    font-size: clamp(1.9rem,8vw,2.6rem);
    font-weight: 300;
  }
  
  .slide-text h3 {
    font-size: clamp(1.1rem,6vw,1.8rem);
    margin-bottom: 1rem;
  }
  
  .slide-text p {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }
  
  .slider-controls {
    right: 20px;
    bottom: 20px;
    top: auto;
    transform: none;
    flex-direction: row;
  }
}

/* ================= DESIGN BLOCK EXPANSION ================= */
/* Menu de navegação - Desktop */
.design-menu {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  gap: 8px;
  /* Keep menu above .design-content (z-index:1000) and expanded content */
  z-index: 2002;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Desktop: tornar menu scrollável para nunca cortar o último botão */
@media (min-width: 1025px){
  .design-menu{
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

.design-blocks-container.design-expanded .design-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.design-menu-btn {
      background: #1f2022;
  border: none;
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 15px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  white-space: nowrap;
  text-align: left;
  min-width: 180px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0px;
}

.design-menu-btn svg {
  stroke-width: 1.5;
}


.design-menu-btn:hover {
  background: #26272a;
  /* Mantém no mesmo sítio, só muda a cor */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.design-menu-btn.active {
  background: #26272a;
  color: #ffffff;
  /* Mantém no mesmo sítio, só muda a cor */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* ===== TECNOLOGIA MENU (Overlay) ===== */
.tech-menu {
  display: flex;
  flex-direction: row;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 20px;
  top: auto;
  transform: none;
  gap: 6px;
  padding: 0 15px;
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tech-menu::-webkit-scrollbar{ display:none; }
.design-blocks-container.tech-expanded .tech-menu { opacity: 1; visibility: visible; }

/* Desktop overrides: vertical menu on the left with vertical arrows */
@media (min-width: 1025px){
  .tech-menu{ left:20px; right:auto; top:50%; bottom:auto; transform: translateY(-50%); padding:0; gap:8px; width:auto; overflow-x: visible; overflow-y: visible; flex-direction: column; }
  .tech-menu-wrapper{ display:flex; flex-direction: row; align-items:center; position: relative; width:auto; }
  .tech-menu-btns-col{ display:flex; flex-direction: column; gap:12px; }
  .tech-nav-vertical-arrows, .design-nav-vertical-arrows{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; margin-right:18px; position:relative; z-index:10; }
  /* Tecnologia vertical arrow buttons (match Design) */
  .tech-nav-vertical, .design-nav-vertical{
        background: #1f2022;
    border: none;
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.18);
    cursor: pointer;
    transition: background 0.2s;
    opacity: 1;
  }
  .tech-nav-vertical:active{ background:#b8742f; }
  .tech-nav-vertical[disabled]{ opacity:.4; pointer-events:none; }
}

.tech-menu-btn {
      background: #1f2022;
  border: none; color: #ffffff; padding: 8px 20px; border-radius: 15px;
  font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 13px;
  cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(10px);
  white-space: nowrap; text-align: left; min-width: 180px; display: flex;
  align-items: center; justify-content: flex-start; gap: 0px;
}
/* Default: allow desktop column behavior; mobile overrides later */
.tech-menu-wrapper{ width:auto; }
.tech-menu-btns-col{ display:flex; gap: 5px; }
.tech-menu-btn svg{ stroke-width: 1.5; }
.tech-menu-btn:hover{ background: #26272a; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.tech-menu-btn.active{ background: #26272a; color:#fff; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }

/* (kept above) */

@media (min-width: 1025px){
  .tech-menu-btn{ width:260px; max-width:100%; transition: width .3s, min-height .3s, background .3s; overflow: visible; position: relative; z-index:1; }
  .tech-menu-btn .cores-info-inside-btn{ display:none; }
  .tech-menu-btn.expanded{ width:350px; min-height:90px; background: #1f2022; box-shadow: 0 4px 24px 0 rgba(0,0,0,0.18); align-items:flex-start; white-space: normal; z-index:2; }
  .tech-menu-btn.expanded .cores-info-inside-btn{ display:flex; flex-direction:column; align-items:flex-start; background:none; color:#fff; padding:0; margin-bottom: 8px; font-size:1rem; width:100%; box-shadow:none; border-radius:0; animation: fadeInUp .3s; }
  .tech-menu-btn.expanded svg{ display:none !important; }
  .tech-menu-btn .cores-label-desktop{ display:inline-block; font-weight:300; font-size:1rem; margin-left:8px; vertical-align: middle; }
  .tech-menu-btn.expanded .cores-label-desktop{ display:none; }
}

@media (max-width: 1024px){
  .tech-menu-btn{ flex-shrink:0; padding:8px 16px; font-size:12px; min-width: fit-content; border-radius:20px; background: #1f2022; font-weight:400; }
  .tech-menu-btns-col{ flex-direction: row; flex-wrap: nowrap; }
}

/* Conteúdo das secções */
.design-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 200px; /* Espaço para o menu lateral (mobile fallback) */
  padding-right: 40px;
  background-color: #000;
  background-image: url('../images/formentor-design.webp');
  background-size: cover;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
}
/* Em desktop, a imagem ocupa todo o overlay; o respiro para o menu é dado pelo padding-left base (200px) */
.design-content .design-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* ===== TECNOLOGIA CONTENT ===== */
.tech-content.formentor{
  position: absolute; inset: 0; width: 100%; height: 100%; display:flex; align-items:center; justify-content:center; padding-left: 40px; padding-right:40px; background-color:#000; background-image: url('../images/formentor-tecnologia.webp'); background-size: cover; background-position: center; opacity:0; visibility:hidden; transition: all .6s cubic-bezier(0.4,0,0.2,1); z-index:1000;
}

.tech-content.terramar{
  position: absolute; inset: 0; width: 100%; height: 100%; display:flex; align-items:center; justify-content:center; padding-left: 40px; padding-right:40px; background-color:#000; background-image: url('../images/terramar-tecnologia.webp'); background-size: cover; background-position: center; opacity:0; visibility:hidden; transition: all .6s cubic-bezier(0.4,0,0.2,1); z-index:1000;
}

.tech-content.leon{
  position: absolute; inset: 0; width: 100%; height: 100%; display:flex; align-items:center; justify-content:center; padding-left: 40px; padding-right:40px; background-color:#000; background-image: url('../images/leon-tecnologia.webp'); background-size: cover; background-position: center; opacity:0; visibility:hidden; transition: all .6s cubic-bezier(0.4,0,0.2,1); z-index:1000;
}
@media (min-width: 1025px){ .tech-content{ padding-left:200px; } }
.design-blocks-container.tech-expanded .tech-content{ opacity:1; visibility: visible; }
.tech-content .tech-video{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; z-index:-2; }

.tech-section{ display:none; text-align:center; max-width:600px; }
.tech-section.active{ display:block; }

/* Hide tech menu when info panel is active (both desktop and mobile) */
.tech-content.hide-menu ~ .tech-menu,
.tech-expanded-content.hide-menu .tech-menu { display:none !important; }

/* Side arrows for Tecnologia (desktop default) */
.tech-nav-arrow{ position: absolute; top:50%; transform: translateY(-50%); width:42px; height:42px; background: rgba(30,30,30,0.92); border-radius:50%; display:none; align-items:center; justify-content:center; z-index:40; border:none; color:#fff; font-size:1.5rem; box-shadow:0 2px 8px 0 rgba(0,0,0,0.18); cursor:pointer; transition: background .2s; }
.tech-nav-arrow.left{ left:20px; }
.tech-nav-arrow.right{ right:20px; }
.tech-nav-arrow:active{ background:#ffffff; }
.tech-nav-arrow[disabled]{ opacity:.4; pointer-events:none; }

/* Mobile arrows override to bottom corners */
@media (max-width: 1024px){
  .tech-nav-arrow{ position: fixed; left:0; right:auto; bottom:20px; top:auto; transform:none; display:flex; }
  .tech-nav-arrow.left{ left:0; transform: translateX(-50%); }
  .tech-nav-arrow.right{ right:0; left:auto; transform: translateX(50%); }
  .tech-content{ padding-left:20px; padding-right:20px; padding-bottom:120px; }
}

/* Show mobile info for tech when active */
@media (max-width: 1024px){
  .tech-section.active .cores-info-box-mobile{ display:flex !important; }
}



.design-blocks-container.design-expanded .design-content {
  opacity: 1;
  visibility: visible;
}

.design-content .close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1002;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease;
}

.design-content .close-btn:hover {
  background: rgba(0, 0, 0, 0.9);
}

.design-section {
  display: none;
  text-align: center;
  max-width: 600px;
}

.design-section.active {
  display: block;
  /* animation removed for instant appearance */
}

.design-section h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #d19a66, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.design-section p {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

/* Mobile responsive para o design expandido */
@media (max-width: 1024px) {
  .design-menu {
    /* Keep the menu inside the expanded design overlay on mobile */
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: 20px;
    transform: none;
    flex-direction: row;
    width: 100%;
    padding: 0 15px;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 2002; /* above .design-content (1000) and within overlay (2001) */
  }

  /* Esconde o menu só quando .hide-menu está presente */
  .design-content.hide-menu ~ .design-menu,
  .design-expanded-content.hide-menu .design-menu {
    display: none !important;
  }

  /* Setas de navegação laterais */
  .design-nav-arrow {
    position: absolute; /* anchor to .design-content overlay */
    left: 0;
    right: auto;
    bottom: 20px;
    width: 38px;
    height: 38px;
    background: rgba(30,30,30,0.92);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.18);
    cursor: pointer;
    transition: background 0.2s;
  }
  .design-nav-arrow.left {
    left: 0;
    right: auto;
    transform: translateX(-50%);
  }
  .design-nav-arrow.right {
    right: 0;
    left: auto;
    transform: translateX(50%);
  }
  .design-nav-arrow:active { background: #ffffff; }
  .design-nav-arrow[disabled] { opacity: 0.4; pointer-events: none; }

  .design-menu::-webkit-scrollbar {
    display: none;
  }

  .design-menu-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 12px;
    min-width: fit-content;
    border-radius: 20px;
    background: #1f2022;
    font-weight: 400;
  }

  .design-content {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 120px; /* Espaço para o menu horizontal (dentro do overlay) */
  }

  .design-section h3 {
    font-size: 2rem;
  }

  .design-section p {
    font-size: 1rem;
  }

  .design-expanded-content {
    padding: 60px 15px 15px;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================= FAQ SECTION ================= */
.faq-section{background:#fff;color:#111;padding:5rem 0 6rem;margin:0;}
.faq-section .section-inner{max-width:1436px;margin:0 auto;padding:0 1.5rem;}
@media (min-width:768px){.faq-section .section-inner{padding:0 3rem;}}
.faq-title{font-size:clamp(2rem,4.2vw,3.2rem);font-weight:300;letter-spacing:.02em;line-height:1.12;margin:0 0 2.2rem;color:#111;}
.faq-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(0,0,0,.08);}
.faq-item{border-bottom:1px solid rgba(0,0,0,.08);}
.faq-question{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:1.35rem 0;background:transparent;border:0;color:#111;font-size:clamp(1rem,1.6vw,1.35rem);line-height:1.55;cursor:pointer;}
.faq-question:focus-visible{outline:2px solid #2a5567;outline-offset:2px;border-radius:4px;}
.faq-qtext{font-weight:300;letter-spacing:.01em;}
.faq-icon{flex:0 0 auto;width:16px;height:16px;position:relative;display:inline-block;}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#111;border-radius:1px;}
.faq-icon::before{width:14px;height:2px;}
.faq-icon::after{width:2px;height:14px;transition:opacity .2s ease;}
.faq-question[aria-expanded="true"] .faq-icon::after{opacity:0;}
.faq-answer{font-weight:300;padding:0 0 0 0;color:#2a2a2a;font-size:1rem;line-height:1.65;}
.faq-answer p{margin:0;}

/* Smooth expand/collapse */
.faq-answer{max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease, opacity .25s ease, padding .25s ease;}
/* Espaço após resposta aberta é dado no pai para não ser cortado por overflow */
.faq-answer.is-open{opacity:1;padding:0;}
/* Novo: cria respiro antes da próxima pergunta */
.faq-item.faq-open{padding-bottom: 2.2rem;}



/* ================= CTA BUTTONS UNIFICATION (final override) ================= */
/* Garantir que .slide-btn (definido acima no Vertical Slider) e .ver-mais-btn
   ficam iguais ao botão principal .btn-cupra-filled, independentemente da ordem */
.ver-mais-btn,
.slide-btn {
  background: #dbd3cb;
  color: #000;
  border: none;
  box-shadow: none;
  padding: 4px 40px;
  min-height: 44px;
  border-radius: 0;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  gap: 10px;
}

.ver-mais-btn:hover,
.slide-btn:hover { background: #ebe6e1; color: #000; }

/* Remover seta inline para uniformizar com “Ver Vídeos” */
.ver-mais-btn svg { display: none; }

/* ================= VEÍCULOS ELETRIFICADOS SECTION ================= */
#motores-eletricos .grid {
  align-items: flex-start;
}

/* Imagem vertical - aspect ratio 3:4 */
#motores-eletricos img {
  aspect-ratio: 3/4;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 1023px) {
  #motores-eletricos .section-head {
    margin-bottom: 2rem !important;
  }
  
  #motores-eletricos .grid {
    gap: 2rem;
  }
  
  /* Mobile: manter layout horizontal - slider e texto lado a lado */
  #motores-eletricos .lg\\:col-span-4 {
    grid-column: span 5;
  }
  
  #motores-eletricos .lg\\:col-span-8 {
    grid-column: span 7;
  }
  
  #motores-eletricos .md\\:grid-cols-2 {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

@media (max-width: 1024px) {
  #motores-eletricos .space-y-6 > * + * {
    margin-top: 1.5rem !important;
  }
  
  #motores-eletricos h3 {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
  }
  
  /* Forçar layout horizontal das galerias PHEV/BEV em mobile */
  #motores-eletricos .md\\:grid-cols-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }
}

/* Garantir layout horizontal das galerias PHEV/BEV em dispositivos pequenos */
@media (max-width: 480px) {
  #motores-eletricos .md\\:grid-cols-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }
  
  #motores-eletricos img {
    aspect-ratio: 3/4 !important;
  }
  
  /* Slider horizontal em mobile */
  .electrification-slider .slider-track {
    width: 100% !important;
    transform: translateX(0%) !important;
  }
  
  .electrification-slider .slider-slide {
    min-width: 33.333% !important;
    flex: 0 0 33.333% !important;
  }
  
  .electrification-slider .slider-nav {
    display: none !important;
  }
}

/* Layout horizontal dos sliders em tablets e mobile */
@media (max-width: 1024px) {
  .electrification-slider {
    height: auto !important;
  }
  
  .electrification-slider .slider-container {
    overflow: hidden !important;
    height: auto !important;
    width: 100% !important;
  }
  
  .electrification-slider .slider-track {
    display: flex !important;
    flex-direction: row !important;
    width: 300% !important;
    height: auto !important;
    transition: transform 0.3s ease !important;
  }
  
  .electrification-slider .slider-slide {
    min-width: 33.333% !important;
    width: 33.333% !important;
    flex: 0 0 33.333% !important;
    height: auto !important;
  }
  
  .electrification-slider .slider-slide img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
  
  .electrification-slider .slider-nav {
    display: flex !important;
    flex-direction: row !important;
  }
}

/* ================= CONTENT CARDS WHITE BACKGROUND ================= */
#conteudos .content-card {
  /* Remover sombras e bordas */
  box-shadow: none;
  border: none;
}

#conteudos .content-card::before {
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.3));
}

/* Garantir que os títulos ficam brancos */
#conteudos .card-title {
  color: #fff !important;
}

/* Botões iguais ao "Ver vídeos" */
#conteudos .card-link {
  background: #dbd3cb;
  color: #000;
  border: none;
  box-shadow: none;
  padding: 4px 40px;
  min-height: 44px;
  border-radius: 0;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: .3s ease-out;
}

#conteudos .card-link:hover {
  background: #ebe6e1;
  color: #000;
}

/* SLIDER VERTICAL ORIGINAL (Formentor/Terramar/Leon) */
.electrification-slider {
  position: relative;
  width: 100%;
}

.slider-container {
  position: relative;
  overflow: hidden;
  border-radius: 0;
}

.slider-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  width: 300%;
}

.slider-slide {
  min-width: 33.333%;
  flex: 0 0 33.333%;
  position: relative;
}

.slider-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* (REMOVIDO) estilos antigos .phev-bev-slider */

/* (REMOVIDO) estilos genéricos antigos .slider-* agora não usados pelas novas galerias */

/* Additional utility classes */
.feature-title {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 400;
  color: #f7f7f7;
  margin: 0 0 10px 0;
}

.feature-text {
  color: white;
          font-size: 16px;
        line-height: 24px;
        margin-bottom: 8px;
                font-weight: 300;
}

.subtitle-bev {
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 300;
  margin-bottom: 1rem;
}

.section-sub-black {
  font-size: clamp(14px, 2vw, 18px);
  color: #000;
  margin: 0 0 20px 0;
}

/* Updated section title styles */
.section-title {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 300;
  letter-spacing: .02em;
  line-height: 1.12;
  margin: 0 0 1.5rem;
}

.faq-title {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 300;
  letter-spacing: .02em;
  line-height: 1.12;
  margin: 0 0 1.5rem;
}

/* Global paragraph styling */
p {
  font-weight: 300;
  color: #bdc3c6;
  letter-spacing: .02em;
}

.faq-item p {
  color: #2a2a2a;
}

footer   {  max-width: 1436px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Global h2 styling */
h2 {
  line-height: 4rem;
}

/* Scroll to Top Button */
.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  background: #dbd3cb;
  color: #000;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background: #fff;
  color: #000;
  transform: translateY(-2px);
}

.scroll-to-top:active {
  transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .scroll-to-top {
    width: 45px;
    height: 45px;
    bottom: 1.5rem;
    right: 1.5rem;
  }
}

/* Leon block overrides (fase 1) */
#leon #galeria-block-leon {
  background-image: url('../images/leon-galeria.webp') !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

#leon #galeria-block-leon * { cursor: pointer !important; pointer-events: auto !important; }

/* Expanded states for Leon Galeria */
#leon .design-blocks-container.galeria-expanded #galeria-block-leon { background-image: none !important; }

/* Terramar block overrides (fase 1) */
#terramar #galeria-block-terramar {
  background-image: url('../images/terramar-galeria.webp') !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
#terramar #galeria-block-terramar * { cursor: pointer !important; pointer-events: auto !important; }
#terramar .design-blocks-container.galeria-expanded #galeria-block-terramar { background-image: none !important; }

/* ==========================================================
   NOVO CARROSSEL EV (.ev-gallery) – PHEV & BEV
   Estrutura esperada no HTML:
   <div class="ev-gallery" id="gallery-phev|gallery-bev">
     <div class="ev-gallery__viewport">
       <div class="ev-gallery__track">
         <figure class="ev-gallery__slide" data-caption="..."><img ...><figcaption class="ev-gallery__caption"></figcaption></figure>
         ... (4 slides)
       </div>
     </div>
     <button class="ev-gallery__arrow ev-gallery__arrow--prev" ...>…</button>
     <button class="ev-gallery__arrow ev-gallery__arrow--next" ...>…</button>
     <div class="ev-gallery__dots" role="tablist"></div>
   </div>
   ========================================================== */

.ev-gallery {
  position: relative;
  max-width: 100%;
  margin: 0rem auto;
  --ev-arrow-size: 42px;
  --ev-dot-size: 10px;
  --ev-accent: #e57200;
  --ev-caption-bg: transparent;
  --ev-caption-color: #fff;
}

.ev-gallery__viewport {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.ev-gallery__track {
  display: flex;
  flex-wrap: nowrap;
  transition: transform .6s cubic-bezier(.65,.05,.36,1);
  will-change: transform;
}

.ev-gallery__slide {
  flex: 0 0 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0; /* remove gaps */
  box-sizing: border-box;
}

.ev-gallery__slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 4px;
}

/* Legenda colocada FORA da imagem (por baixo) */
.ev-gallery__caption {
  width: 100%;
  margin-top: .75rem;
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  line-height: 1.3;
  text-align: left;
  color: var(--ev-caption-color);
  background: var(--ev-caption-bg);
  padding: 0 .25rem;
  min-height: 1.4em; /* evita saltos quando muda */
}

/* Dots */
.ev-gallery__dots {
  display: flex;
  gap: .55rem;
  justify-content: center;
  align-items: center;
  margin: 1rem 0 0;
}

.ev-gallery__dot {
  width: var(--ev-dot-size);
  height: var(--ev-dot-size);
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  position: relative;
  transition: background .3s, transform .3s;
}

.ev-gallery__dot[aria-selected="true"] {
  background: #ffffff !important;
  transform: scale(1.15);
}

/* Reforço caso algum script remova aria-selected mas tenha classe utilitária */
.ev-gallery__dot.is-active { background:#ffffff !important; transform:scale(1.15); }

.ev-gallery__dot:focus-visible {
  outline: 2px solid var(--ev-accent);
  outline-offset: 2px;
}

/* Arrows */
.ev-gallery__arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: var(--ev-arrow-size);
  height: var(--ev-arrow-size);
  border-radius: 50%;
  border: 1px solid #fff;
  background: rgba(0,0,0,0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background .3s, color .3s, transform .3s;
  z-index: 2;
}

.ev-gallery__arrow:hover { background: rgba(0,0,0,0.65); }
.ev-gallery__arrow:active { transform: translateY(-50%) scale(.92); }
.ev-gallery__arrow:focus-visible { outline: 2px solid var(--ev-accent); }

.ev-gallery__arrow--prev { left: .75rem; }
.ev-gallery__arrow--next { right: .75rem; }

/* Ocultar setas se apenas 1 slide */
.ev-gallery[data-slides="1"] .ev-gallery__arrow { display: none; }

/* Responsivo */
@media (max-width: 900px) {
  .ev-gallery { --ev-arrow-size: 38px; }
  .ev-gallery__arrow { top: 40%; }
}

@media (max-width: 640px) {
  .ev-gallery { --ev-arrow-size: 34px; }
  .ev-gallery__arrow { top: 38%; }
  .ev-gallery__caption { font-size: clamp(0.85rem, 2.8vw, 0.95rem); }
}

/* Redução de movimento (acessibilidade) */
@media (prefers-reduced-motion: reduce) {
  .ev-gallery__track { transition: none; }
  .ev-gallery__dot { transition: none; }
  .ev-gallery__arrow { transition: none; }
}

/* Suporte a toque (pequeno ajuste para evitar seleção acidental) */
.ev-gallery__track, .ev-gallery__slide img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Hardening / overrides finais para evitar que utilitários anteriores quebrem o carrossel */
.ev-gallery__track { display: flex !important; flex-wrap: nowrap !important; }
.ev-gallery__slide { flex: 0 0 100% !important; max-width: 100% !important; }
.ev-gallery__arrow { pointer-events: auto !important; }
.ev-gallery__caption { display: block; }

/* Botão Saber Mais */
.ev-btn-more {
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .6rem 1.1rem;
  border: 1px solid #fff;
  color: #fff;
  border-radius: 2rem;
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  transition: background .35s, color .35s, transform .25s;
}
.ev-btn-more:hover { background: #fff; color:#000; }
.ev-btn-more:active { transform: scale(.94); }
.ev-btn-more:focus-visible { outline:2px solid #e57200; outline-offset:3px; }

/* Variante com ratio fixo (garantir mesma altura entre galerias) */
.ev-gallery--ratio .ev-gallery__viewport { position: relative; }
.ev-gallery--ratio .ev-gallery__viewport::before { content:""; display:block; width:100%; aspect-ratio: 16 / 9; }
.ev-gallery--ratio .ev-gallery__track { position:absolute; inset:0; }
.ev-gallery--ratio .ev-gallery__slide { height:100%; }
.ev-gallery--ratio .ev-gallery__slide img { height:100%; width:100%; object-fit: cover; }

@media (max-width: 900px){
  .ev-gallery--ratio .ev-gallery__viewport::before { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px){
  .ev-gallery--ratio .ev-gallery__viewport::before { aspect-ratio: 1 / 1; }
}

/* ===== ADDITIONAL PERFORMANCE OPTIMIZATIONS ===== */
/* Improve rendering performance */
.slide-container,
.gallery-container,
.tech-content {
  will-change: transform;
  transform: translateZ(0);
}

/* Optimize image containers for better loading */
.slide img,
.gallery-item img,
.tech-image {
  content-visibility: auto;
  contain-intrinsic-size: 300px 200px;
}

/* Reduce layout shift with aspect ratios */
.hero-image,
.main-model-image {
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* GPU acceleration for smooth animations */
@supports (backdrop-filter: blur(10px)) {
  .modal-backdrop,
  .overlay-element {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* Critical path optimization */
.above-the-fold {
  contain: layout style;
}

.below-the-fold {
  content-visibility: auto;
  contain-intrinsic-size: 1px 1000px;
}