.pt-4 {
       padding-top: 40px;
   }

   .pt-3 {
       padding-top: 30px;
   }

   .pt-2 {
       padding-top: 20px;
   }

   .pb-4 {
       padding-bottom: 40px;
   }

   .pb-3 {
       padding-bottom: 30px;
   }

   .pb-2 {
       padding-bottom: 20px;
   }

   .mt-4 {
       margin-top: 40px;
   }

   .mt-3 {
       margin-top: 30px;
   }

   .mt-2 {
       margin-top: 20px;
   }

   .mb-2 {
       margin-bottom: 20px;
   }

   .mb-3 {
       margin-bottom: 30px;
   }

   .mb-4 {
       margin-bottom: 40px;
   }

   /*reset container*/

   .contentSectionO .container {
       background-color: white;
       margin: 0px !important;
       padding: 0px !important;
       width: 100% !important;
   }

   @media (min-width:768px) {
       .contentSectionO .container {
           width: 100% !important;
       }
   }

   @media (min-width:992px) {
       .contentSectionO .container {
           width: 100% !important;
       }
   }

   @media (min-width:1200px) {
       .contentSectionO .container {
           width: 100% !important;
       }
   }

   .home-title {
       font-size: 40px;
       margin-bottom: 10px;
   }

   .home-subtitle {
       font-size: 24px;
       font-family: 'Instrument Sans', sans-serif;
       font-weight: 500;
   }

   /* Barra de filtros  AUTOS seccion 2*/

   .model-filters {
       margin: 20px 0 10px;
   }

   .model-filters .btn-filter {
       background: transparent;
       border: 0;
       padding: 12px 38px;
       font-weight: 300;
       color: #666666c8;
       position: relative
   }

   .model-filters .btn-filter:hover {
       font-weight: 600;
       color: #666666;
   }

   .model-filters .btn-filter.active {
       color: #111;
       font-weight: 600;
   }

   .model-filters .btn-filter.active:after {
       font-weight: 600;
       content: "";
       position: absolute;
       left: 12px;
       right: 12px;
       bottom: -2px;
       height: 3px;
       background: #e53935;
       border-radius: 2px
   }

   .filters-hr {
       margin: 0;
       border: 0;
       height: 2px;
       background: #ddd;
       margin-top: -10px;
   }

   .thumb-strip,
   #heroDragZone {
       touch-action: pan-y;
       /* permitimos scroll vertical del documento */
       /*cursor: grab; */
       z-index: 1;
   }

   .thumb-strip.dragging {
       cursor: grabbing;
   }

   /* Tira de miniaturas (drag to scroll) */

   .thumb-strip {
       position: relative;
       overflow: hidden;
       user-select: none;
       cursor: grab;
       padding: 10px 0;
       touch-action: pan-y;
   }

   .thumbs {
       white-space: nowrap;
   }

   .thumb {
       display: inline-block;
       text-align: center;
       margin: 0 35px;
       width: 120px;
   }

   .thumb .thumb-img {
       width: 120px;
       height: 58px;
       object-fit: contain;
       filter: grayscale(.2);
       opacity: .35;
       transition: .2s;
       user-select: none;
   }

   @media (min-width: 769px) {
       .thumb-img {
           -webkit-user-drag: none;
           user-select: none;
           pointer-events: none;
       }
   }

   .thumb .name {
       margin-top: 6px;
       font-weight: 300;
       color: #666666bc;
       font-size: 14px;
       white-space: normal
   }

   .thumb.is-selected .thumb-img {
       opacity: 1;
       filter: none;
       transform: scale(1.02);
   }

   .thumb.is-selected .name {
       color: #111;
       font-weight: 600;
   }

   /*scroll*/

   #thumbStrip {
       overflow-x: scroll;
       overflow-y: hidden;
       white-space: nowrap;
       padding-bottom: 10px;
       -webkit-overflow-scrolling: touch;
   }

   #thumbStrip::-webkit-scrollbar {
       height: 8px;
       display: none !important;
   }

   #thumbStrip::-webkit-scrollbar-track {
       border-radius: 8px;
       -webkit-border-radius: 8px;
   }

   #thumbStrip::-webkit-scrollbar-thumb {
       background: #111;
   }

   #thumbStrip::-webkit-scrollbar-thumb:hover {
       background: #000;
   }

   #thumbStrip::-webkit-scrollbar-button {
       width: 0;
       height: 0;
       display: none;
       -webkit-border-radius: 8px;
       border-radius: 8px;
   }

   ::-webkit-scrollbar-button {
       width: 0;
       height: 0;
       display: none;
       -webkit-border-radius: 8px;
       border-radius: 8px;
   }

   #thumbStrip {
       cursor: grab;
   }

   #thumbStrip.dragging {
       cursor: grabbing;
   }

   /* ====== Firefox ====== */

   #thumbStrip {
       scrollbar-width: thin;
       /* m¨˘s delgado */
       scrollbar-color: #111 #d1d1d1;
       /* thumb / pista */
   }

   /* HERO */

   .hero-stage {
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       /* Altura fluida: m¨Şnima 240px, crece con el viewport, m¨˘x 380px */
       height: clamp(240px, 42vw, 380px);
       /* evita saltos por carga de imagen */
       background: transparent;
   }

   .hero-wrap {
       position: relative;
       padding: 30px 0 10px;
       text-align: center;
       user-select: none;
   }

   .hero-img {
       max-height: 100%;
       width: auto;
       /* mantiene proporci¨Žn */
       max-width: 100%;
       /* no excede el ancho del contenedor */
       height: auto;
       /* natural */
       object-fit: contain;
       /* por si en alg¨˛n momento se cambia a height fijo */
   }

   .hero-meta {
       margin: 24px auto 10px;
       max-width: 768px;
   }

   .hero-meta .spec {
       text-align: right;
   }

   .spec h5 {
       margin: 0;
       color: #888;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: .4px;
   }

   .spec .val {
       font-size: 18px;
       font-weight: 700;
       color: #222;
   }

   .hero-info {
       margin: 20px 0 40px;
       align-items: center;
       /* centra verticalmente en pantallas grandes */
   }

   .hero-cta .btn {
       padding: 12px 24px;
       border-radius: 6px;
   }

   .btn-explorar {
       background: #111;
       color: #fff;
   }

   .btn-comparar {
       background: #fff;
       color: #111;
       border: 1px solid #cfd8dc;
   }

   /* Flechas desktop (ocultas en mobile) */

   .nav-arrow {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       width: 46px;
       height: 46px;
       border-radius: 50%;
       border: 0;
       background-color: #ffffff;
       box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
       font-size: 22px;
       line-height: 46px;
       text-align: center;
       color: #000000;
       cursor: pointer;
       opacity: .95;
       transition: box-shadow .2s;
       z-index: 5;
       pointer-events: auto;
   }

   .nav-arrow:hover {
       box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
       background: rgba(14, 14, 14, 0.6);
   }

   .nav-prev {
       left: 10px;
   }

   .nav-next {
       right: 10px;
   }

   .fsBottonDisplayMB {
       display: none;
   }

   .fsBottonHideMB {
       display: block;
   }

   .back-hero {
       max-width: 1170px;
       /* opcional: ancho m¨˘ximo del contenido */
       margin: 0 auto;
       /* centra el contenido dentro del contenedor */
       padding: 20px;
       position: relative;
       z-index: 1;
   }

   .back-hero::after {
       z-index: 0;
   }

   .hero-header {
       display: flex;
       justify-content: space-between;
       /* nombre a la izq, tags a la der */
       align-items: center;
       margin-bottom: 12px;
   }

   .hero-name {
       font-size: 26px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: .6px;
       margin: 0;
       padding-left: 100px;
       color: #111;
   }

   .hero-tags {
       font-size: 14px;
       color: #7b7b7b;
       text-transform: uppercase;
       font-weight: 600;
       padding-right: 100px;
   }

   .full-width {
       background: linear-gradient(180deg, transparent 60%, #cbcbcb 100%);
       width: 100%;
       margin: 0;
       padding: 0;
   }

   @media (max-width: 768px) {
       .thumb {
           width: 100px;
           margin: 0 15px;
       }

       .thumb .thumb-img {
           width: 100px;
           height: 52px;
       }

       .nav-arrow {
           top: 30%;
       }

       .nav-prev {
           left: -10px;
       }

       .nav-next {
           right: -10px;
       }

       .hero-img {
           max-width: 90%;
       }

       /* ocultar flechas en mobile */
       .hero-stage {
           height: clamp(200px, 52vw, 360px);
       }

       .hero-tags {
           padding-right: 5px;
       }

       .hero-name {
           padding-left: 5px;
       }

       .hero-meta .spec {
           text-align: center;
       }

       .model-filters .btn-filter {
           padding: 12px 10px;
       }

       .fsBottonDisplayMB {
           display: block;
       }

       .fsBottonHideMB {
           display: none;
       }
   }

   /**********BOTONES************/

   .btn-link {
       display: inline-flex;
       align-items: center;
       font-weight: 600;
       font-size: 16px;
       text-decoration: none;
       color: #111;
       /* texto negro */
       transition: color .2s ease;
   }

   .btn-link .arrow {
       margin-left: 6px;
       color: #e44141;
       /* rojo */
       transition: transform .3s ease;
       display: inline-block;
       font-size: 35px;
       font-weight: 100;
       margin-top: -10px;
   }

   .btn-link:hover {
       color: #111;
       text-decoration: none;
   }

   .btn-link:hover .arrow {
       transform: translateX(4px);
       /* mueve la flecha a la derecha */
   }

   /*************************************************************************************/

   .feature-slider {
       padding: 40px 16px;
       background-color: #000;
       color: white;
   }

   .fs-inner {
       max-width: 1200px;
       margin: 0 auto;
       display: flex;
       gap: 32px;
       align-items: center;
       padding-top: 100px;
   }

   .fs-copy {
       flex: 1 1 44%;
   }

   .fs-title {
       font-size: 40px;
       line-height: 1.1;
       margin: 0 0 16px;
   }

   .fs-kicker {
       margin: 0 0 8px;
       font-family: Instrument Sans;
       font-weight: 600;
       font-style: SemiBold;
       font-size: 32px;
   }

   .fs-desc {
       color: #ffffff;
       max-width: 520px;
       padding-bottom: 30px;
       font-weight: 400;
       font-style: Regular;
       font-size: 16px;
   }

   .fs-btn-primary {
       display: inline-flex;
       align-items: center;
       gap: 10px;
       padding: 12px 18px;
       background: #111;
       color: #fff;
       border-radius: 8px;
       text-decoration: none;
       font-weight: 700;
   }

   .fs-btn-primary span {
       font-size: 20px;
       transition: transform .25s;
       line-height: 1;
   }

   .fs-btn-primary:hover span {
       transform: translateX(4px);
   }

   /* contenedor de la columna derecha */

   .fs-viewport-wrap {
       display: flex;
       align-items: center;
       gap: 16px;
   }

   /* ?rea visible: 690x480 en desktop */

   .fs-viewport {
       position: relative;
       overflow: hidden;
       border-radius: 10px;
       width: 100%;
       height: 550px;
       /* tama?o solicitado */
       background: #000;
   }

   .fs-track {
       display: flex;
       transition: transform .45s ease;
       will-change: transform;
   }

   .fs-slide {
       position: relative;
       min-width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden;
   }

   .fs-slide img,
   .fs-slide video {
       width: 100%;
       height: 550px;
       object-fit: cover;
       /* llena el ¨˘rea sin deformarse */
       object-position: center;
       /* centrado siempre */
       display: block;
   }

   /* Bot¨Žn overlay dentro del media */

   .fs-cta {
       position: absolute;
       bottom: 18px;
       left: 50%;
       transform: translateX(-50%);
   }

   /* Flechas: FUERA del ¨˘rea en desktop */

   .fs-nav {
       margin: 0 auto;
       margin-top: 16px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       width: 200px;
   }

   .fs-arrow {
       width: 40px;
       height: 40px;
       border-radius: 999px;
       border: 1px solid rgba(255, 255, 255, 0.45);
       background-color: white;
       color: #000000 !important;
       font-size: 20px;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
       cursor: pointer;
       flex: 0 0 auto;
       transition: background .25s ease, border-color .25s ease, transform .25s ease;
   }

   .fs-arrow i {
       line-height: 1;
   }

   .fs-arrow:hover {
       background: rgba(190, 190, 190, 0.65);
       border-color: rgba(0, 0, 0, 0.75);
       transform: translateY(-1px);
   }

   /* Paginaci¨Žn (barras) SIEMPRE abajo, fuera del media */

   .fs-dots {

       display: flex;
       justify-content: center;
       align-items: center;
       gap: 8px;
       flex: 1 1 auto;
       margin: 0;
       margin-top: -20px;

   }

   .fs-dot {
       width: 8px;
       height: 8px;
       border-radius: 999px;
       background: rgba(255, 255, 255, 0.45);
       opacity: 0.8;
       transition: width .25s ease, background-color .25s ease, opacity .25s ease;
   }

   .fs-dot.is-active {
       width: 28px;
       /* pastilla alargada */
       background: #ffffff;
       opacity: 1;
   }

   /* ------- Mobile ------- */

   @media (max-width: 992) {
       .fs-copy {
           margin-left: 50px;
       }
   }

   @media (max-width: 768px) {
       .fs-viewport-wrap {
           position: relative;
           gap: 0;
           /* juntamos */
       }

       .fs-viewport {
           width: 100%;
           height: auto;
           /*aspect-ratio: 16 / 23; */
       }

       /* Flechas SOBRE el contenido en mobile */
       .fs-arrow {
           position: static;
           transform: none;
           /*top: 50%;
            transform: translateY(-50%);
            z-index: 2;*/
       }

       .fs-nav {
           justify-content: center;
           gap: 16px;
       }


       .fs-prev {
           left: 10px;
       }

       .fs-next {
           right: 10px;
       }

       .fs-copy {
           text-align: center;
       }

       .fs-desc {
           margin: 0 auto;
       }

       .fs-viewport-wrap {
           margin-top: 20px;
       }

       .fs-inner {
           padding-top: 0px;
       }

       .home-title {
           text-align: center;
       }

       .fs-kicker {
           text-align: center;
       }
   }

   .container-fs-copy {
       max-height: 550px;
       margin-top: 120px;
   }

   .color-black {
       color: black;
   }