* {
    font-family: 'Inter', sans-serif;
}
body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    width: auto;
}
h1,h2,h3,h4,h5,h6 {
    color: #222222;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {color: inherit;}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover {color: #001D35}
h1 {
	font-size: 64px;
	font-weight: 600;
	line-height: 150px;
	color: #ffffff;
}
h2 {font-size: 40px;line-height: 40px;}
h3 {font-size: 36px;}
h4 {font-size: 22px;}
h5 {font-size: 16px;}
p {
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
	color: #222222;
    font-family: 'Inter', sans-serif;
}
span, input, button, select, textarea {
    font-family: 'Inter', sans-serif;
	transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
}
.table td, .table th {
    border-top: 1px solid #dee2e6;
}
ul {
	margin: 0px;
	padding: 0px;
}
li {
	list-style: none
}
img {
    transition: all 0.3s ease-out 0s;
}
a:not([href]):not([class]), 
a:not([href]):not([class]):hover {
    text-decoration: none;
    border-radius: 40px;
}
a{
	text-decoration: none;
}
.fix{
	overflow: hidden;
}
a:focus,
.button:focus {
	text-decoration: none;
	outline: none;
}
a:focus,
a:hover{
	color: inherit;
	text-decoration: none;
}
.container-wrapper{
	max-width: 1430px;
	margin: 0 auto;
}
.container-wrapper-home4{max-width: 1480px; margin: 0 auto;}
.extra-padding-40{padding-left: 40px; padding-right: 40px;}
.slider-wrapper{max-width: 1820px; margin:0 auto}
.home-page-4-bg {
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: top center;
	background-color: #f5f5f5;
}
a,button,li{
	transition: .3s;
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-ms-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s;
}
.over-hidden{overflow: hidden;}
.clear-both{clear: both;}
.over-scroll{overflow: scroll;}
.over-x-hidden{overflow-x: hidden;}
.over-x-scroll{ overflow-y: scroll;}
.transition-3{transition: .3s;}
.mlr-15{margin-left: -15px;margin-right: -15px;}
a:focus,button:focus,.btn:focus {
	text-decoration: none;
	outline: 0;
	box-shadow: none;
}
a:focus,a:hover,.portfolio-cat a:hover,.footer-menu li a:hover {
	color: #222222;
	text-decoration: none;
	outline: 0 none;
}
*::-moz-selection {
	background: #fc8459;
	color: #fff;
	text-shadow: none;
}
::-moz-selection {
	background: #444;
	color: #fff;
	text-shadow: none;
}
::selection {
	background: #444;
	color: #fff;
	text-shadow: none;
}
*::-moz-placeholder {
	color: #858585;
	font-size: 14px;
	opacity: .6;
}
*::placeholder {
	color: #858585;
	font-size: 14px;
	opacity: .6;
}
.transition{transition: .3s;}
.btn:focus{
	outline: 0 none;
}
.icon-clear{color: #999;}
.btn {
	padding: 20px 75px;
	font-size: 16px;
	line-height: 21px;
	border-radius: 0;
	background: #ffffff;
	color: #000000;
	outline:0 none;
	text-transform: capitalize;
	transition: .3s;
	white-space: nowrap;
    vertical-align: middle;
    font-family: 'Inter', sans-serif;
}
.btn:hover{color: #ffffff;background: #000000;}
.single-blog .btn,.footer-widget .btn {padding: 16px 52px;}
.subscriber-area .btn {
	background: transparent;
	color: #fff;}
.footer-widget .btn:hover{
	background: #fff;
	color: #000000;
}
.btn.btn3{
	color: #fff;
	background: #222;
	line-height: 55px;
	padding: 15px 75px;
}
.subscribe-form .btn,.blog-subscribe .btn{padding: 20px 90px; background: #000; color: #fff;}
.contact-form-right .btn {background: #222;}
.contact-form-right .btn:hover {background: #000;}
.border-right {
    border-right: 1px solid #dee2e6 !important;
}
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}
.breadcrumb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: .25rem;
}
.slick-dots {
	position: absolute;
	right: 55px;
	top: 50%;
	transform: translateY(-50%);
}
.slider-2 .slick-dots,.slider-3 .slick-dots,.slider-6 .slick-dots,.slider-4 .slick-dots,.testimonial-active .slick-dots{
	right: auto;
	top: auto;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
}
.slick-dots li {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 0 1 #ffffff;
	opacity: 0.3;
	display: block;
	text-indent: -10000px;
	margin: 10px 2px;
	border: 2px solid transparent;
}
.slider-2 .slick-dots li,.slider-3 .slick-dots li,.slider-6 .slick-dots li, .slider-4 .slick-dots li,.testimonial-active .slick-dots li{display: inline-block;margin: 0 10px;}
.slider-6 .slick-dots li {background: #000;box-shadow: 0 0 1 #000000;}
.slick-dots li.slick-active {position: relative;background: transparent;opacity: 1;}
.slick-dots li.slick-active::before {
	position: absolute;
	content: "";
	width: 16px;
	height: 16px;
	top: -5px;
	left: -5px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: transparent;
}
.slider-6 .slick-dots li.slick-active::before {border: 2px solid #000000;}
.slider-2 .slick-dots li.slick-active::before,.slider-3 .slick-dots li.slick-active::before,.slider-6 .slick-dots li.slick-active::before {top: -5px;}
.slick-arrow .l-a, .slick-arrow .r-a,.blog-post-active .slick-arrow .l-a,.blog-post-active .slick-arrow .r-a {
	position: absolute;
	left: 10px;
	top: 36%;
	transform: translateY(-50%);
	border: 0;
	background: none;
	color: #fff;
	z-index: 1;
	font-size: 28px;
	visibility: hidden;
	transition: .7s;
}
.slick-arrow .r-a {
	right: 10px;
	left: auto;
}
.blog-post-active .slick-arrow .l-a, .blog-post-active .slick-arrow .r-a {
	top: 35%;
	left: 10px;
	background: #000;
	padding: 8px 15px;
}
.blog-post-active .slick-arrow .r-a{right: 10px; left: auto;}
.blog-slider-active:hover .slick-arrow .r-a,.blog-slider-active:hover .slick-arrow .l-a,.blog-post-active:hover .slick-arrow .l-a,.blog-post-active:hover .slick-arrow .r-a{visibility: visible; }
.tooltip-inner {
	background-color: #fff;
	color: #222;
	border: 1px solid #222;
	font-size: 12px;
	border-radius: 100%;
	padding: 1px 10px;
}
.tooltip .arrow { display: none;}
.section-title p{
    font-size: 24px;
}
.store-product-position .section-title p,.subscribe-area .section-title p{font-size: 16px;color: #666666;}
.section-title-2 h2{font-weight: 400; color: #ffffff;}
.underline::before {
	position: absolute;
	content: "";
	width: 35px;
	height: 2px;
	background: #000;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.section-content span,.section-content p {
	font-size: 16px;
	line-height: 16px;
	text-transform: capitalize;
}
.section-content a.btn2 {font-size: 14px;}
.section-content a.btn2::before{
	position: absolute;
	width: 24px;
	height: 1px;
	background: #fff;
	content: "";
	bottom: 0;
	left: 0;
	transition: .3s;
}
.section-content a:hover::before{width: 100%;}
.section-content-position {top: 0;left: 0;right: 0;bottom: 0;}
.page-title h2 {font-size: 50px;}
.page-height{min-height: 590px;}
.header {
	left: 0;
	top:0;
	width: 100%;
	z-index: 22;
	transition: .3s;
	position: relative;
}
.body-overlay {
	background-color: rgba(0, 0, 0, 0.5);
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 999;
	left: 0;
	opacity: 0;
	visibility: hidden;
	transition: all .3s ease-out  ;
	-webkit-transition: all .3s ease-out  ;
	-moz-transition: all .3s ease-out  ;
	-ms-transition: all .3s ease-out  ;
	-o-transition: all .3s ease-out  ;
}
.body-overlay.opened {
	opacity: 1;
	visibility: visible;
}
.sticky-menu {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 22;
	width: 100%;
}
.sticky-menu .header-6 {top: -20px;}
.sticky-menu .header{
	background: #fff;
	-webkit-box-shadow: 0 8px 4px -7px rgba(115,115,115,0.1);
	-moz-box-shadow: 0 8px 4px -7px rgba(115,115,115,0.1);
	box-shadow: 0 8px 4px -7px rgba(115,115,115,0.1);
}
.header-area.sticky-menu,.header:hover {
    background: #fff;
}
.logo img {max-width: 100px;}
.sticky-menu .header .logo img,.header-area:hover .logo img,.header-2 .logo img,.header-6 .logo img{
    filter: invert(0) sepia(0) hue-rotate(0deg) brightness(0);
    margin-top: 0px;
    width: auto;
}
.sticky-menu .header a.active::before,.header-area:hover a.active::before,.header.header-2 a.active::before,.header.header-6 a.active::before {background: #222;}
.main-menu ul li {
	display: inline-block;
	margin: 0 22px;
	position: relative;
}
.main-menu ul li > a {
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	display: inline-block;
	text-transform: capitalize;
	padding: 38px 0;
	position: relative;
	text-decoration: none;
}
.main-menu ul li:hover > a {color: #222;}
.main-menu ul li > a::before{
    content: "";
    position: absolute;
    right: 0;
    bottom: 30px;
    background: #fff;
    transition: 0.3s;
}
.main-menu ul li > a.active::before{width: 100%;}
.main-menu ul li > a:hover::before,.main-menu ul li > a:hover a.active::before{
    background: #222;
    left: 0;
}
.main-menu ul li .mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
	display: flex;
    height: auto;
    background: #fff;
    padding-left: 20px;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center top;
    box-shadow: 0 0 30px 0 rgba(0,0,0,0.1);
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
    transition: .5s;
    -webkit-transition: transform 500ms ease, opacity 500ms ease;
    -moz-transition: transform 500ms ease, opacity 500ms ease;
    -ms-transition: transform 500ms ease, opacity 500ms ease;
    -o-transition: transform 500ms ease, opacity 500ms ease;
    transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
}
.header-area.white-bg .mega-menu{top: 100%;}
.main-menu ul li:hover> .mega-menu{opacity: 1; visibility: visible; transform: scaleY(1);}
.main-menu ul li:hover> .mega-menu.mega-sub-menu{
    top: -25px;
    background-color: #ffffff;
    padding-right: 0px;
    width: 100em;
}
.main-menu ul li .mega-menu li {
    display: block;
    height: auto;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 25px;
    margin-right: 0;
}
.main-menu ul li .mega-menu a {
	font-size: 14px;
	font-weight: 400;
	color: #222222;
	padding: 0 10px;
	display: block;
}
.main-menu ul li .mega-menu a::before{position: static;}
.main-menu ul li .mega-menu li a:hover {color: #001D35; padding-left: 30px;}
.main-menu ul li .mega-menu li a.mega-title:hover{padding-left: 0;}
.main-menu ul li .mega-menu li > a:hover{padding-left: 10px;}
.main-menu ul li .mega-menu li .mega-menu{left: 100%; top: 0;}
.main-menu ul li .mega-menu .mega-title a,.main-menu ul li .mega-menu a.mega-title{font-size: 18px;}
.main-menu ul li .mega-menu .mega-title a{padding-top: 30px;}
.main-menu ul li .mega-menu.mega-dropdown-menu,.main-menu ul li .mega-menu .mega-sub-menu{min-width: 250px;}
.mega-dropdown-menu li a span{
	font-size: 13px;
	font-weight: 300;
}
.main-menu ul li.full-mega-menu-position {position: static;}
.mean-container.main-menu ul li.full-mega-menu-position{position: inherit;}
.mean-container .mega-menu{background-image: none !important;}
.main-menu ul li .mega-menu.full-mega-menu{top: 100%; width: 100%; display: flex;}
.mega-menu.full-mega-menu > li {
	min-width: 220px;
	padding-left: 55px;
	padding-top: 35px;
}
.mean-container .mega-menu.full-mega-menu > li{
	padding-left: 0;
	padding-top: 0;
}
.main-menu .mega-menu ul > li {margin-left: 0;}
.main-menu ul li .mega-menu.full-mega-menu a {padding: 0;}
.header-right ul li {padding-left: 26px;}
.header-right ul li a,a.mobile-menubar {
	color :#fff;
	font-size: 18px;
}
.header a.mobile-menubar {font-size: 20px;}
.s-count {
	font-size: 12px;
	padding-left: 3px;
}
.main-menu ul li.logo > a::before {display: none;}
.header-2 .main-menu ul li,.header-3 .main-menu ul li {margin-left: 45px;margin-right: 0;}
.header-2 ul li a, .header-2 .header-right li a{color: #222222;}
.sticky-menu .header a,.header-area:hover a,.header.header-2 a,.header.header-6 a{color: #222222;}
.header-right .header-login a, .header-2 .header-right .search a {font-size: 14px;}
.slider-height{min-height: 900px;}
.slider-2 .slider-active{min-height: 820px;}
.slider-height-2,.slider-site{min-height: 815px;}
.slider-height-3{min-height: 800px;}
.slider-height-4{min-height: 660px;}
.slider-height-5{min-height: 100vh;}
.slider-5{min-height: 100vh;}
.slider-height-6{min-height: 765px;}
.page-height4{min-height: 285px;}
.single-slider{
	background-size: cover;
	background-position: center right;
}
.slider-content{
	position: absolute;
	left: 15.5%;
}
.slider-2 .slider-content,.slider-4 .slider-content{left: 5.5%;}
.slider-4 .slider-content{left: 8.6%;}
.slider-3 .slider-content{left: 13.5%;}
.slider-6 .slider-content{left: 12.8%;}
.slider-5 .slider-content{left: 7.5%; position: relative;}
.slider-2 h1{font-size: 116px;}
.slider-4 h1{font-size: 100px;}
.slider-5 h1 {font-size: 88px;line-height: 1;}
.slider-6 h1 {font-size: 120px; margin-top: 30px;}
.slider-content span {
	font-size: 16px;
	letter-spacing: 1px;
	line-height: 60px;
	text-transform: capitalize;
}
.slider-content-5{
	top: 50%;
	transform: translateY(-50%);
}
.slider-content > span::before, .history-title span:before {
	position: absolute;
	content: "";
	width: 30px;
	height: 2px;
	background: #fff000;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.history-title span::before {
	background: #000;
	left: -140px;
	width: 100px;
}
.slider-6 .slider-content > span::before{background: #000000;}
.slider-content p {line-height: 24px;}
.single-banner img{min-height: 265px;}

.single-product{
	transition: all .3s ease-out;
}
.single-product:hover{box-shadow: 0 0 25px rgba(0,0,0,0.1);}
.single-product-img  img{width: 100%;}
.countdown-time .count-time{padding: 6px 0 2px;}
.single-product-button li a span,.sale-tag {
	width: 50px;
	height: 50px;
	background-color: #222;
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	margin: 5px;
	display: inline-block;
}
.timer{padding: 8px 1px 3px 1px;}
.timer span {
	font-size: 10px;
	color: #222;
	min-width: 45px;
	display: inline-block;
	text-align: center;
	line-height: 1;
	font-weight: 500;
}
.timer p {
	text-transform: uppercase;
	font-size: 10px;
	margin-bottom: 0;
	line-height: 2.1;
}
.timer .time-count{position: relative;}
.timer .time-count::after {
	content: '';
	position: absolute;
	bottom: -3px;
	left: 12px;
	right: 12px;
	height: 1px;
	background: -moz-linear-gradient(left,#f5f5f5 0%,#ededed 36%,#ededed 56%,#ededed 57%,#f5f5f5 76%,#f5f5f5 100%);
}
.single-product-img .countdown-time {
	bottom: 0;
	left: 50%;
	transform: translate(-50%);
	opacity: 1;
	transition: .3s;
}
.single-product:hover .countdown-time{opacity: 0;}
.single-product-button{
	bottom: 25px;
	left: 55%;
	transform: translate(-50%);
	opacity: 0;
	transition:.5s
}
.single-product:hover .single-product-button{left: 50%; opacity: 1;}
.single-product-button li a span{color: #ffffff;}
.single-product-button li a span:hover{background: #006699;}
.product-price span {
	font-weight: 500;
	font-size: 14px;
}
.product-price span.old-price{color: #999999;}
.sale-tag {
	font-size: 13px;
	top: 10px;
	left: 10px;
	background: #f54949;
	z-index: 1;
}
.single-product-hover-img {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.single-product-hover-img a img{opacity: 0; transition: .3s;}
.single-product:hover .single-product-hover-img a img{opacity: 1;}
.product-dot span {
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 50%;
}
.product-offer-height .single-feature > img {
	min-height: 450px;
	transition: .3s;
}
.date{color: #006699;}
.single-blog .blog-img{height:290px;}
.instagram-img img{
	width: 100%;
	opacity: 1;
	transition: .3s;
}
.instagram-img img:hover{ opacity: .93;}
.product-modal{
	padding-left: 15px;
	padding-right: 15px;
	max-width: 1080px;
	border-radius: 0;
	transition: all .3s ease-out;
}
.product-view-scroll-area .dialog-modal-dialog {height: auto;}
.close { font-size: 30px;}
.modal-content {border-radius: 0;}
.product-tabs{width: 100px;}
.product-tabs .nav-link {
	width: 80px;
	height: 100px;
	padding: 0;
	opacity: .6;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link,.nav-pills .nav-link:hover, .nav-pills .show > .nav-link  {background-color: transparent;opacity: 1;}
.product-modal-left h4{font-size:30px}
.product-modal-left .price > span {
	font-size: 20px;
	font-weight: 500;
}
.modal-old-price{
	color: #999;
	font-size: 16px !important;
}
.product-modal-left p{
	font-size: 14px;
}
.available p,.suk p{line-height: 1;}
.quantity-field {
	position: relative !important;
}
.add-cart-btn{
	height: 62px;
	line-height: 60px;
	padding: 0 40px;
	background: #131215;
	color: #fff;
	border: 1px solid transparent;
	display: inline-block;
	margin-bottom: 20px;
}
.add-cart-btn:hover{
	border-color: #131215;
	color: #131215;
	background: #fff
}
.quantity-field input {
	width: 110px;
	height: 63px;
	padding: 0 20px;
}
.custom-prev,.custom-next {
	position: absolute;
	right: 32px;
	top: 60%;
	transform: translateY(-50%);
	font-size:12px;
	color: #c8c8c8;
}
.custom-next {
	top: 40%;
}
.social-sharing li {
	font-size: 14px;
	display: inline-block;
}
.social-sharing li a {
	font-size: 14px;
	width: 40px;
	height: 40px;
	display: inline-block;
	background: #fff;
	color: #555555;
	border: 1px solid #e1e1e1;
	border-radius: 50%;
	line-height: 40px;
	text-align: center;
	margin-right: 10px;
	transition: .3s;
}
.social-sharing li a:hover{background:#004A80; color: #fff;border: 0;}
.store-product-title {
	top: 0;
	left: 0;
}
.store-product-title h4{font-size: 21px;}
.store-product-title span a{
	font-size: 14px;
	color: #888;
}
.single-store-product img{max-height: 370px;}
.author-signature img{width: 180px;}
.welcome-bg {
	height: 970px;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}
.single-service-feature h4{font-size: 18px;}
.single-service-feature p{font-size: 14px;}
.service-feature-bg {
    background-color: #001D35;
	padding: 20px;
}
.ser-f-icon::before,.ser-f-icon span::after {
	font-size: 50px;
}
.single-service-feature {padding: 0 20px;}
.product-left-img-info .social-sharing li a {margin-right: 10px; margin-left: 0;}
.product-left-img-info .price span{font-size: 24px;font-weight: 700;}
.product-view-tab .nav-link {
	color: #999;
	font-size: 20px;
	border-bottom: 2px solid transparent;
}
.product-view-tab .nav-link:hover{color: #222222;}
.product-view-tab .nav-link.active{color: #222222; border-bottom: 2px solid #222222;}
.desc-title{font-size: 18px; font-weight: 600;}
.describe-text p{font-size: 14px;color: #555; line-height: 30px;}
.add-color-area h6,.add-brand-area h6{font-weight: 600;}
.add-color li {font-style: italic;}
.add-brand-area,.group-p-table thead{background: rgba(0,0,0,.025);}
.group-p-table .table td, .table th {padding: 22px;}
.group-p-table a {font-size: 15px;}
.rat{
	display: none;
	top: -2px;
	left: 0;
	right: 0;
	bottom: 0;
	transition: .3s;
}
.ratting a {color: #ffae00;font-size: 14px;}
.product-review .ratting:hover .rat{display: block;}
.product-left-img-info p,.quantity{font-size: 14px;}
.product-left-img img {
	cursor: crosshair;
	margin-bottom: 40px;
}
.product-left-img{height: 600px; overflow-x: hidden;}
.tbl-title{min-width: 150px;}
.p-view-position .dialog-modal-dialog {
	max-width: 470px;
	box-shadow: 0 10px 25px rgba(0,0,0,.5);
}
.product-img a{cursor: crosshair;}
.p-view-position .modal-content {
	border-radius: 4px;
	border:18px solid #f9f9f9;
	background: #fff;
}
.p-view-position .close span {
	border-radius: 50px;
	width: 32px;
	height: 32px;
	font-size: 24px;
	border: 2px solid #fff;
	line-height: 22px;
}
.p-view-position .modal-close{top: 0px;right: 0;}
.product-gallery-btn a {
	box-shadow: 0 0 4px rgba(0,0,0,.2);
	border-radius: 100px;
	padding: 10px 15px;
}
.product-gallery-btn {left: 0;top: 0;}
.product-gallery-btn.right-site {left: auto;right: 0;}
.vertical-left-tab .product-gallery-btn {left: auto;right: 0;top: 0; }
.product-gallery-btn  a:hover{box-shadow: 0 0 10px rgba(0,0,0,.2);}
.cart-img {width: 120px; margin: 0 auto;}
.cart-table .table td, .cart-table .table th {padding: 20px 10px;vertical-align: middle;}
.cart-area .sub-btn {padding: 28px 48px;}
.coupon-code-area input {height: 62px;border: 1px solid #dee2e6;}
.total-price-area h2 {font-size: 22px;}
.p-name{font-size:14px;}
.coupon-content,.checkout-content,#ship-box-info, #cbox-account-info{display: none;}
#login,#couponshow{cursor: pointer;}
.coupon-accordion h6 {
	background: #f9f9f9;
	border-top: 3px solid #000;
	font-size: 16px;
	font-weight: 500;
	position: relative;
}
.coupon-accordion h6::before {
	content: "\f07b";
	left: 20px;
	top: 17px;
	position: absolute;
	color: #000000;
	font-family: "Font Awesome 5 Free";
	font-weight: 800;
}
.close {
    float: right;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}
.coupon-area span,.checkout-area span,.checkout-area label{font-size: 16px;color: #222;line-height: 1.5;}
.coupon-area span:hover{color: #006699;text-decoration: underline;}
.checkout-area label{display: block;}
.checkbox-form .checkout-area label span,.lost-password a{color: #006699;}
.coupon-area input,.checkout-area input,.country-select select {
	height: 45px;
	margin: 0 0 14px;
	padding: 0 0 0 10px;
	border-radius: 0;
}
.coupon-area .form-control:focus,.checkout-area .form-control:focus,.country-select select .form-control:focus{border-color: #e7e7e7;}
.country-select select.form-control:not([size]):not([multiple]) {height: 45px; font-size: 15px;}
.save-info input,.shipping .r-inpt{height: auto !important;}
.checkout-area .nice-select { border-radius: 0;height: 45px;line-height: 42px;width: 100%;}
.checkout-area .different-address .nice-select {line-height: 2.3 }
.checkout-area .nice-select::after {height: 8px;right: 22px;width: 8px;}
.checkout-area h4{font-size: 26px;}
.save-info p{font-size: 16px;font-weight: 500;color: #222;letter-spacing: .1px;}
.order-notes textarea {height: 90px;}
.order-notes textarea::placeholder {opacity: 1;}
.your-order {background: #f9f9f9;}
.your-order-table table th {
	border-top: medium none;
	vertical-align: middle;
	white-space: nowrap;
	width: 50%;
}
.your-order-table table th, .your-order-table table td {
	border-bottom: 1px solid #e7e7e7;
	border-right: medium none;
	color: #777;
	font-size: 15px;
	padding: 15px 0;
}
.payment-method h6 .btn-link{
	font-size:13px;
	color:#292929; 
	font-weight: 500; 
	cursor: pointer;
}
.page-height3{min-height: 500px;}
.nice-select.open .list {border-radius: 0;}
.nice-select .option.selected {font-weight: normal;}
.nice-select {height: 22px;line-height: 20px;}
.shop-title h5,.product-filter a,.single-product-content p{font-size: 14px;}
.ser-icon {
	min-width: 22px;
	height: 16px;
	display: block;
}
.nav-tabs .nav-item.show .nav-link.ser-icon, .nav-tabs .nav-link:hover .ser-icon, .nav-tabs .nav-item.show .nav-link.ser-icon, .nav-tabs .nav-link.active .ser-icon, .nav-tabs .nav-item.show .nav-link .ser-icon, .nav-tabs .nav-link:focus .ser-icon{
	filter: invert(0) sepia(0) hue-rotate(0deg) brightness(0);
}
.option-input:checked::after{
	background: #000;
	content: "";
	display: block;
	position: relative;
	z-index: 1;
}
.option-input.radio{border-radius: 50%;}
.option-input.radio::after{border-radius: 50%;}
.option-input{
	appearance: none;
	position: relative;
	top: 0;
	right: 0;
	bottom: 0;
	height: 20px;
	width: 20px;
	transition: .15s;
	border: 1px solid #e1e1e1;
	color: #000;
	cursor: pointer;
	display: inline-block;
	outline: none;
	z-index: 1;
}
.product-choose-colors .option-input {
	height: 25px;
	width: 25px;
}
.option-input:checked::before {
	position: absolute;
	content: "✓";
	display: inline-block;
	font-size: 14px;
	left: 50%;
	top: 45%;
	transform: translate(-50%,-50%);
}
.f-choose-color .option-input{color: #fff;}
.product-menubar a{color: #999; font-size: 14px;}
.product-menubar h4,.single-product-content h5{font-size: 18px;}
.product-menubar a:hover{color: #222222;}
.product-menubar{height: 210px;}
.ui-widget.ui-widget-content {
	border: 1px solid #000;
	background: #ebebeb;
	height: 3px;
}
.ui-widget-header {background: #000;}
.ui-slider-horizontal .ui-slider-handle {
	top: -10px;
	border-radius: 50px;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
	border: 6px solid #000;
	background: #fff;
	font-weight: normal;
	color: #454545;
}
.product-filter-details{
	width: 100%;
	box-shadow: 0 8px 32px -8px rgba(0,0,0,.1);
	top: 50px;
	left: 0;
	transition: .5s;
	z-index: 11;
	display: none;
}
.product-filter-details.product-filter-block{box-shadow: none;}
#col5 .container-wrapper .col-xl-2{min-width: 20% !important;}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link:hover, .nav-tabs .nav-link.active, .nav-tabs .nav-link:focus {border-color: transparent;}
.nav-tabs a {
	color: #999;
	padding-left: 8px;
}
.product-search input{height: 50px;}
.product-search p{
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
}
.shop-left-sidebar-area #col-5 .single-product:hover {box-shadow:none;background:none;}
.fitler-input input {
	max-width: 90px;
	font-size: 14px;
}
.single-product-list .single-product-img img{
	min-width: 330px;
}
.single-product-img a{display: block;}
.shop-sidebar-left .product-search p{right: 50px;}
.single-product-list-button li.tool a:hover{border: 1px solid #000000;}
.single-product-list-button li{
	padding: 0 !important;
	border: none !important;
}
.single-product-list-button li a span {
	display: inline-block;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	color: #343a40;
}
#list .single-product-list-button li a span {
	width: 54px;
	height: 54px;
	line-height: 54px;
}
.single-product-list-button span {
	line-height: 54px;
	text-align: center;
	display: block;
}
.wishlist-area a{font-size: 14px;}
.table-content .p-img img{width: 90px; height: 100px;}
.table th {
	border-top: none;
	font-weight: 400;
}
.table td, .table th {
	vertical-align: middle;
	border-bottom: 1px solid #dee2e6;
}
.table thead th {border-top: 1px solid #dee2e6; border-bottom: 0;}
.table-content.table-content1 {
	width: 20px;
}
.table-content.table-content2 {
	width: 110px;
}
.wishlist-area .table-content6 a{font-size: 16px;}
.wishlist-area .btn.p-add-cart{width: 220px; color: #fff; background: #000;}
.btn.p-add-cart2{color: #fff; background: #000;}
.coupon-and-update-area .btn.p-add-cart2 {
	padding: 18px 50px;
	color: #fff;
	background: #000;
}
.btn.p-add-cart2:hover {
	color: #000;
	background: #fff;
	border: 1px solid #000;
}
.mobile-wishlist .p-img img{max-width: 110px;}
.p-remove {right: 0;top: 30px;}
.pn {
	margin-top: 10px;
}
.page-title-content h2{font-size: 50px;}
.page-title-content .blog-tag li a{font-size: 16px;}
.page-height-2{min-height: 900px;}
.page-height-2::before {
	position: absolute;
	content: "";
	background: rgba(0, 0, 0, .65);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.page-nav{left: 0;right: 0;bottom: 30px;}
.blog-testimonial .testimonials-text {font-size: 24px; line-height: 44px;}
.blog-testimonial .client h5 {font-size: 18px;}
.blog-content .post-tag li, .social-link li {display: inline-block;}
.blog-content .post-tag li a:hover{color: #fff; background: #000;}
.author-post span,.blog-posts a{font-size: 18px;}
.author-post span::before {
	position: absolute;
	content: "";
	width: 30px;
	height: 2px;
	background: #222;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.single-author-post li a span {font-size: 16px;}
.author-img {max-width: 125px;}
.reply-form form .save-info input {height: 0;}
.reply-form h3{font-size: 30px; font-weight: 600;}
.blog-testimonial-client-img {
	width: 110px;
}
.single-blog-box img {height: 275px; width: 100%;}
.blog-large-img{ width: 100%;}
.blog-large-img img{height: 590px; width: 100%;}
.single-box-content h4{font-size: 24px;}
.single-box-content{
	top: 40%;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(rgba(0,0,0,0) 0%,#000 60%);
}
.single-box-text{left: 0;right: 0;bottom: 0;}
.single-blog-box-hover{
	margin: 0;
	transition: .3s ease;
}
.single-blog-box{transition: .3s;}
.single-blog-box:hover .single-blog-box-hover{transform: translateY(-20px);}
.single-box-content .blog-post-data {
	transition: all .3s ease;
	opacity: 0;
}
.single-blog-box:hover .blog-post-data {opacity: 1;height: 12%;}
.single-blog-box .blog-post-data li{width: 50%;}
.blog-grid-img img {
	transition:.3s;
	opacity: 0;
	visibility: hidden;
}
.blog-gird-content {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	z-index: 1;
}
.blog-grid-iteams .blog-gird-content:hover{	background:rgba(0, 0, 0, .8)}
.blog-grid-iteams:hover .blog-grid-img img{visibility: visible; opacity: 1;}
.blog-grid-iteams:hover p,.blog-grid-iteams:hover li,.blog-grid-iteams:hover h4,.blog-grid-iteams :hover a{color: #fff;}
.blog-tag li a{
	background: #069;
	padding: 6px 12px;
	font-size: 14px;
	margin-right: 5px;
}
.blog-right-sidebar-left-content h3 {font-size: 30px;}
.blog-right-sidebar-left-content p {
	line-height: 30px;
	color: #555;
}.blog-post-data li {
	display: inline-block;
	color: #555;
}
.blog-widget h5{font-size: 20px;}
.blog-widget h5 {position: relative;}
.blog-widget h5::before {
	position: absolute;
	background: #222;
	width: 40px;
	height: 2px;
	content: "";
	bottom: 0;
	left: 0;
}
.blog-search-form {
	background: #cde5d3;
}
.blog-widget input {
	height: 60px;
	padding: 25px 22px;
	border-radius: 0;
	border: 1px solid #222;
}
.blog-widget.blog-search-form form span {
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
}
.blog-slider-active span,.blog-subscribe p,.blog-widget p {font-size: 14px;}
.blog-subscribe{background: #f2e1e0;}
.search-tag li{display: inline-block;}
.search-tag li a {
	font-size: 12px;
	color: #7d7d7d;
	background: #f5f5f5;
	padding: 7px 16px;
	margin: 0 10px 8px 0;
	display: block;
	border-radius: 30px;
	transition: .3s;
}
.search-tag li a:hover{background: #069;color: #fff;}
.blog-instagram-img{background: #e0e7f2;}
.blog-widget .instagram-img {
	height: 100px;
	width: 100px;
}
.agota-page .page-item.active .page-link {
	color: #fff;
	background-color: #006699;
	border-color: #006699;
}
.agota-page .page-link {
	width: 42px;
	height: 40px;
	text-align: center;
	color: #888;
	border: 1px solid #dee2e6;
	margin-right: 10px;
	line-height: 24px;
	display: block;
	font-size: 14px;
}
.agota-page .page-item.active .page-link {
	color: #fff;
	background-color: #006699;
	border-color: #006699;
}
.agota-page .page-link:hover{	
	background-color: #006699;
	border-color: #006699;
	color: #fff;
}
.page-item:last-child .page-link,.page-item:first-child .page-link {
	border-radius: 0;
}
.single-page {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.single-portfolio .portfolio-img img{width: 100%;}
.our-single-service h5 {
	font-size: 24px;
}
.ship-icon span::before {font-size: 130px;}
.our-icon span::before {font-size: 62px;}
.shipping-content{
	height: 800px;
	background-attachment: fixed;
}
.team-member h5,.client h5 {
	font-size: 18px;
}
.client.text-center span {
	color: #e7b6bb;
}
.testimonial-bg {
	background-color: transparent;
	background-image: linear-gradient(180deg,#97545b 100%,#f2295b 100%);
	height: 800px;
}
.quit a{font-size: 30px;}
.client img{max-width: 300px; margin: 0 auto;}
.about-bg{background: #161619;height: 100vh;}
.about-me-img {
	left: 0;
	top: 0;
	width: 50%;
	bottom: 0;
	background-position: left center;
	background-size: cover;
	height: 100%;
}
.about-d-height {
	top: 0;
	right: 0;
	width: 50%;
	bottom: 0;
}
.about-details {
	max-width: 75%;
	max-height: 70vh;
	overflow: hidden;
	overflow-y: scroll;
	margin: auto;
}
.about-details p,.about-details li{
	color: #999999;
	line-height: 24px;
}
.about-details li{color: #fff; line-height: 24px;}
.about-details h1{font-size:80px;line-height: 1;}
.my-social-info li{display: inline-block;}
.my-social-info li a {
	font-size: 16px;
	width: 120px;
	height: 40px;
	line-height: 40px;
}
.about-footer {margin-top: -90px;}
.about-footer ul li a,.about-footer a,.about-footer p{color: #fff; font-size:14px;}
.about-footer .copyright-text::before {display: none;}
.no-page-height{height: 950px;}
.no-page-height h3{font-size: 48px;}
.no-page-height h1{font-size: 220px;}
.contact-form-area {z-index: 100;}
.contact-form-left span,.contact-form-right span {
	font-size: 18px;
}
.contact-form-right input,.comment textarea {
	height: 55px;
	border-radius: 0;
	padding: 20px;
}
/* Esto asegura que el select herede el estilo de tus inputs */

.comment textarea {
	min-height: 150px;
}
.contact-map {
	z-index: -1;
	top: -270px;
	margin-bottom: -275px;
	width: 100%
}
.contact-map iframe{width: 100%;height: 570px; border: 0;}
.login-area,.register-area{width: 85%;}
.login-form{background: #f7f7f7;}
.login-register-area h5{font-size: 20px;}
.login-form label,.login-form .login-check p,.f-get-pass a,.register-form label, .register-form input{
	font-size: 14px;
	color: #222222;
}
.login-register-area input{height: 55px; border-radius:0}
.login-register-area input.form-control:focus {
	border-color: #7d7d7d;
	border: 2px solid #7d7d7d;
	box-shadow: none;
}
.f-get-pass a {border-bottom: 2px solid #222;}
.register-form h6 {font-size: 16px;}
.register-form p {
	font-size: 14px;
	line-height: 26px;
	color: #555;
}
.footer-widget h4{
	font-size: 13px;
	font-weight: 900;
}
.widget-area p,.widget-area li,.widget-area li a{
	color: #999999;
	font-size: 14px;
	margin-bottom: 15px;
	display: block;
}
.footer-widget p:hover,.footer-widget li:hover,.footer-widget li a:hover{color: #ffffff;}
.footer-info form input {
	width: 420px;
	height: 55px;
	padding-left: 20px;
	background: transparent;
	border: 1px solid #999;
	color: #fff;
}
.footer-4 .footer-info form input {border: 1px solid #2e2e30; width:95%; text-align: center; color:#fff}
.footer-4 .footer-info form input:focus{border: 1px solid #ffffff;}
.footer-4 .footer-widget.subscriber-area{border-left: 1px solid #2e2e30;border-right: 1px solid #2e2e30;}
.copyright-text::before {
	position: absolute;
	content: "";
	background: #999999;
	width: 1px;
	height: 25px;
	right: 60px;
	top: 0;
}
.copyright-text-4::before {
	display: none;
}
.footer-area-2 .copyright-text::before{display: none;}
.copyright-area p,.copyright-area li,.copyright-area li a{margin-bottom: 0;}
.copyright-text p a:hover{color:#069!important;}
.copyright-menu {margin-left: -26px;}
.copyright-area .copyright-menu li {margin-right: 25px;}
.footer-area-2 .copyright-menu li a{color: #222; font-size: 14px;}
.footer-6 .footer-address li {margin-bottom: 12px;}
.footer-4 .footer-widget li a{color: #e1e1e1;}
.footer-area-5 {bottom: 60px;width: 100%;}
.footer-area-5 .copyright-menu li a {color: #999;}
.footer-area-5 .copyright-text p {font-size: 14px;}
.top {
    position: fixed;
    color: #555555;
    right: 30px;
    bottom: 30px;
    cursor: pointer;
    background: #fff;
	border-radius: 5px;
}
.top span {
	font-size: 18px;
	padding: 12px 12px;
	display: block;
}
.header-search-details {
	width: 100%;
	position: fixed;
	top: -250%;
	left: 0;
	z-index: 55;
	height: 100%;
	transition: .5s;
}
.header-search-details.open-search-info {top: 0;}
.header-search-content h4 {font-size: 30px;}
.header-search-details .close-icon {font-size: 30px;}
.header-search-content ul li a {
	font-size: 18px;
	color: #888;
	margin: 30px;
	display: block;
}
.header-search-content ul li a:hover,.header-search-details ul li a.active{color: #222222;}
.header-search-content form a{left: 10px; top: 18px; font-size: 22px; color: #555555;}
.header-search-content form input,.subscribe-form input{
	border: 0;
	border-bottom: 2px solid #e1e1e1;
	padding: 0;
	width: 100%;
	padding-left: 45px;
	margin: 0;
	color: #555;
	padding-left: 10px;
	font-size: 14px;
	background: none;
	box-shadow: none;
	height: 45px;
	text-indent: 40px;
}
.subscribe-form form input{text-align: center; height: 55px; padding-left: 0;}
.header-search-content form input:focus,.subscribe-form input:focus{border-bottom: 2px solid #222;}
.header-shopping-cart-details {
	width: 400px;
	position: fixed;
	right: -205%;
	top: 0;
	z-index:999;
	height: 100%;
	transition: .7s;
}
.header-shopping-cart-details.open-shopping-info {right: 0;}
.header-shopping-cart-details h5 {font-size: 18px;}
.h-shop-cart-img img {max-width: 85px;}
.h-shop-cart-contetn ul li {
	display: inline-block;
}
.side-mobile-menu{
	width: 340px;
	position: fixed;
	left: -340px;
	top: 0;
	z-index:9999;
	height: 100%;
	transition: all .3s ease-out;
	overflow: scroll;
}
.side-mobile-menu.open-menubar {left: 0;}
.close-icon {font-size: 30px;}
.side-mobile-menu .header-search-content ul li a {
	font-size: 16px;
	margin: 12px;
	color: #222;
}
.side-mobile-menu .header-search-content ul li a:hover,.side-mobile-menu .header-search-content ul li a.active{color: #006699;}
.side-mobile-menu .header-search-content form a{right: 10px; left: auto; font-size: 18px;}
.side-mobile-menu .header-search-content form input{text-indent: 0;}
.side-mobile-menu .menu-login ul li a {
	color: #222;
	font-size: 16px;
}
.side-mobile-menu .menu-login ul li {
	padding: 15px 0;
}
.side-mobile-menu .menu-login {clear: both;}
#preloader {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	width: 100%;
	height: 100%;
	overflow: visible;
	background: #fff url('../images/icon/agota-preloader.gif') no-repeat center center;
  }
.cartmini-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 995;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(15px);
    visibility: hidden;
    opacity: 0;
    transition: 0.45s ease-in-out;
}
.cartmini-overlay.openeds {
    opacity: 1;
    visibility: visible;
}
.img-menu {
	max-height: 200px;
}
.slider-area {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1;
}
.slider-active {
  position: relative;
  z-index: 2;
}
.single-slider {
    height: 100vh;
}
.slider-content {
  position: relative;
  z-index: 3;
}
.slider-content h1,
.slider-content p {
    color: #fff;
}
.contenedor-seccion-fiido {
    max-width: 1100px;
    margin: 50px auto;
    padding: 0 20px;
}
.fila-tarjetas-visuales {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}
.tarjeta-fiido-visual {
    position: relative;
    flex: 1;
    min-width: 300px;
    max-width: 350px;
    height: 450px;
    overflow: hidden;
    border-radius: 4px;
    display: block;
    text-decoration: none;
}
.tarjeta-fiido-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.capa-oscura {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
    z-index: 1;
}
.info-sobre-imagen {
    position: absolute;
    bottom: 30px;
    left: 25px;
    z-index: 2;
    color: #ffffff;
}
.info-sobre-imagen h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #fff;
}
.info-sobre-imagen span {
    font-size: 16px;
    text-decoration: underline;
    font-weight: 400;
    opacity: 0.9;
}
.tarjeta-fiido-visual:hover img {
    transform: scale(1.05);
}
.tarjeta-fiido-visual:hover span {
    opacity: 1;
    text-decoration: none;
}
.fiido-testimonials {
    padding: 100px 0;
    background-color: #ffffff;
    text-align: center;
    overflow: hidden;
}
.fiido-testi-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
.fiido-testi-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 60px;
    color: #000;
    letter-spacing: -0.5px;
}
.fiido-logos-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}
.fiido-logo-item {
    cursor: pointer;
    transition: all 0.4s ease;
    opacity: 0.3;
    filter: grayscale(100%);
}
.fiido-logo-item:hover, 
.fiido-logo-item.active {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.1);
}
.fiido-logo-item img {
    max-height: 40px;
    width: auto;
    display: block;
}
.fiido-quote-container {
    max-width: 900px;
    margin: 0 auto;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fiido-quote-text {
    font-size: 26px;
    line-height: 1.4;
    color: #111;
    font-weight: 400;
    margin: 0;
    transition: opacity 0.3s ease;
}
@media (max-width: 991px) {
    .fiido-logos-row {
        gap: 40px;
    }
    .fiido-testi-title {
        font-size: 24px;
    }
}
.testimonial-container {
  display: flex;
  gap: 20px;
  padding: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.testimonial-card {
  position: relative;
  width: 350px;
  height: 450px;
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  color: white;
}
.testimonial-overlay {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85) 60%);
  padding: 25px 20px;
  width: 100%;
}
.stars {
  margin-bottom: 12px;
}
.testimonial-text {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 15px 0;
    font-weight: 300;
    color: #FFFFFF;
}
.testimonial-author {
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.9;
    color: #FBFBFB;
}
.testimonial-author strong {
  font-weight: 600;
}
@media (max-width: 768px) {
  .testimonial-card {
    width: 100%;
    height: 400px;
  }
}

#count-up {
	font-size: 120px;
    display: inline-block;
    min-width: 120px; /* Evita que el texto "salte" mientras crecen los dígitos */
    transition: all 0.3s ease;
}

.section-title h2 {
    font-variant-numeric: tabular-nums; /* Mantiene los números alineados si la fuente lo soporta */
}

/* --- UI Apple Style / Nav --- */
.ap-nav { 
    width: 100%; position: fixed; top: 0; left: 0; z-index: 1000;
    font-family: -apple-system, system-ui, sans-serif;
    background: transparent; transition: all 0.4s ease;
}

.ap-container-wide {
    max-width: 1300px; /* Ancho justo y equilibrado */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 65px;
    padding: 0 20px;
}

.ap-nav-list { display: flex; align-items: center; gap: 40px; list-style: none; margin: 0; padding: 0; }
.ap-top-link { 
    font-size: 13px; font-weight: 400; color: #ffffff; 
    text-decoration: none; opacity: 0.9; transition: all 0.3s; 
}

/* Logos: Blancos sobre fondo oscuro, color original en scroll/hover */
.ui-logo-img { 
    height: 26px; filter: brightness(0) invert(1); 
    transition: all 0.4s ease; opacity: 0.9;
}

/* --- ESTADO SCROLLED / HOVER --- */
.ap-nav.scrolled, .ap-nav:hover { background: #fff; box-shadow: 0 2px 20px rgba(0,0,0,0.05); }
.ap-nav.scrolled .ap-top-link, .ap-nav:hover .ap-top-link { color: #1d1d1f; opacity: 0.8; }
.ap-nav.scrolled .ui-logo-img, .ap-nav:hover .ui-logo-img { filter: none; opacity: 1; }

/* --- Mega Menú Full Pantalla --- */
.ap-has-mega { position: static !important; }
.ap-mega-panel {
    position: absolute; top: 100%; left: 0; width: 100vw;
    background: #fff; border-top: 1px solid #f2f2f2;
    display: none; z-index: 9999; box-shadow: 0 40px 80px rgba(0,0,0,0.06);
}
.ap-has-mega:hover .ap-mega-panel { display: block; animation: apFade 0.3s ease; }

.ap-mega-inner { max-width: 1300px; margin: 0 auto; display: flex; min-height: 480px; }

/* Sidebar Limpia */
.ap-sidebar { width: 260px; list-style: none; padding: 60px 0; margin: 0; border-right: 1px solid #f9f9f9; }
.ap-cat {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; color: #86868b; text-decoration: none; font-size: 14px; transition: 0.3s;
}
.ap-cat.active, .ap-cat:hover { color: #1d1d1f; padding-left: 10px; }
.ap-arrow { color: #ff5400; font-size: 16px; opacity: 0; transition: 0.3s; transform: translateX(-10px); }
.ap-cat.active .ap-arrow, .ap-cat:hover .ap-arrow { opacity: 1; transform: translateX(0); }

/* Grilla de Productos Automática */
.ap-display-area { flex: 1; padding: 40px 0 40px 60px; display: flex; align-items: center; }
.ap-product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; width: 100%; }
.ap-card { text-align: center; }
.ap-card img { width: 100%; max-width: 260px; height: auto; margin-bottom: 15px; transition: transform 0.5s ease; }
.ap-card:hover img { transform: scale(1.05) translateY(-5px); }
.ap-card h4 { font-size: 14px; font-weight: 600; color: #111; margin: 0; }

@keyframes apFade { from { opacity: 0; } to { opacity: 1; } }


/* --- Press & Testimonials Styles --- */

/* Prensa Logos */
.press-logos-wrapper {
    gap: 40px;
    opacity: 0.7;
}

.press-logo-item {
    cursor: pointer;
    transition: all 0.3s ease;
    filter: grayscale(100%);
}

.press-logo-item:hover, 
.press-logo-item.active {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

.press-logo-item img {
    max-height: 30px;
    width: auto;
}

.press-quote-text {
    font-size: 28px;
    font-weight: 500;
    font-style: italic;
    max-width: 800px;
    margin: 0 auto;
    transition: opacity 0.3s ease;
    line-height: 1.4;
}

/* Review Cards */
.customer-review-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.customer-review-card:hover {
    transform: translateY(-5px);
}

.review-img-box img {
    border-radius: 12px;
    display: block;
    object-fit: cover;
    height: auto;
}

.review-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.stars-wrapper {
    margin-top: 8px;
}

.review-content p {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
    .press-logos-wrapper { gap: 20px; }
    .press-quote-text { font-size: 20px; }
    .press-logo-item img { max-height: 20px; }
}

/* --- Sistema de Botones Fiido --- */
.btn-secondary-fiido {
    background-color: #ffffff;
    color: #001D35 !important; /* El color azul oscuro que pediste */
    padding: 14px 40px;
    border-radius: 50px; /* Bordes totalmente redondeados (pill-shape) */
    font-weight: 600;
    font-size: 16px;
    display: inline-block;
    border: 2px solid #ffffff; /* Borde blanco para que no salte en el hover */
    transition: all 0.3s ease-in-out;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}

/* Hover: Exactamente al revés */
.btn-secondary-fiido:hover {
    background-color: #001D35;
    color: #ffffff !important;
    border-color: #001D35; /* Cambiamos el borde al azul oscuro */
    transform: translateY(-2px); /* Un pequeño salto sutil */
}/* --- Estilos Generales de Contacto --- */


/* --- Información de Contacto (Izquierda) --- */
.contact-icon-box {
    width: 50px;
    height: 50px;
    background-color: #001D35; /* Azul marino corporativo de Fiido */
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 20px;
    flex-shrink: 0; /* Asegura que el icono no se deforme */
    border-radius: 4px; /* Un toque profesional sutil */
}

.contact-text h6 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 2px;
    color: #001D35;
    letter-spacing: -0.3px;
}

.contact-text p {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    font-weight: 400;
}

/* --- Formulario de Contacto (Limpieza Total) --- */
.contact-form input, 
.contact-form textarea,
.contact-form select {
    width: 100% !important;
    display: block !important;
    background-color: #f9f9f9; 
    border: 1px solid #eeeeee;
    padding: 10px 25px; /* Bajamos un poco el padding superior para centrar */
    border-radius: 8px; 
    font-size: 15px;
    color: #001D35;
    outline: none;
    transition: all 0.3s ease-in-out;
    height: 54px; /* Altura exacta */
    box-sizing: border-box; /* Fundamental para que el padding no lo estire de más */
}

/* Retoque específico para que el SELECT no use el estilo del sistema */
.contact-form select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer;
    /* Flecha personalizada */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23001D35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 14px;
}

/* Quitar la flecha en Internet Explorer / Edge antiguo */
.contact-form select::-ms-expand {
    display: none;
}

/* Estado Focus */
.contact-form input:focus, 
.contact-form textarea:focus,
.contact-form select:focus {
    background-color: #ffffff;
    border-color: #001D35;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

/* Placeholder styling */
.contact-form input::placeholder, 
.contact-form textarea::placeholder {
    color: rgba(0, 29, 53, 0.4); 
    font-weight: 400;
}

/* Esto arregla el tamaño y diseño del desplegable */
.contact-form select.no-nice {
    width: 100% !important;
    height: 55px !important;
    display: block !important;
    background-color: #f9f9f9 !important;
    border: 1px solid #eeeeee !important;
    border-radius: 8px !important;
    padding: 0 25px !important;
    /* Cambiamos el color por este que tiene la transparencia del placeholder */
    color: rgba(0, 29, 53, 0.2) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23001D35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
}

/* Esto elimina el duplicado chiquito que te molestaba */
.contact-form .nice-select {
    display: none !important;
}

/* --- Botón Primario --- */
.btn-primary-fiido {
    background-color: #001D35;
    color: #ffffff !important;
    padding: 15px 80px; 
    border-radius: 50px; 
    font-weight: 600;
    font-size: 16px;
    border: 2px solid #001D35;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

.btn-primary-fiido:hover {
    background-color: #ffffff;
    color: #001D35 !important;
    transform: translateY(-2px); 
}
/* --- Utilidades de Accesibilidad --- */
/* Oculta label visualmente pero lo mantiene para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* --- Responsive Adjustments (Medios Consultas) --- */
@media (max-width: 991px) {
    .section-title h2 {
        font-size: 32px;
        text-align: center;
    }
    .contact-info-list {
        padding-right: 0;
        margin-bottom: 50px;
    }
    .contact-form button {
        width: 100%; /* El botón ocupa todo el ancho en móviles */
        max-width: 320px;
    }
}
/* --- Estilos Institucionales / Distribuidores (CORREGIDO) --- */
.distributor-parallax-area {
    /* Mantenemos el Parallax */
    background-attachment: fixed;
    background-position: right center; /* Alineamos la imagen a la derecha para que el manubrio no tape el texto */
    background-repeat: no-repeat;
    
    /* CAMBIO CLAVE 1: Evitamos el estirado agresivo */
    /* Usamos un porcentaje (ej: 80% del ancho) o 'contain' para que la imagen respire.
       'contain' asegura que se vea toda la imagen sin cortar, escalando suavemente. */
    background-size: fixed; 
    
    /* CAMBIO CLAVE 2: Color de fondo sólido para rellenar */
    background-color: #001D35; /* El azul marino de Fiido */
    
    /* Espaciados y estructura (sin cambios) */
    padding-top: 150px;
    padding-bottom: 150px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 550px;
}

/* Micro-interacción: Pequeña animación de flotación para el logo */
.distributor-logo img {
    animation: float-logo 3s ease-in-out infinite;
}

@keyframes float-logo {
    0% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

/* --- Responsive Adjustments --- */
@media (max-width: 991px) {
    .distributor-parallax-area {
        padding-top: 100px;
        padding-bottom: 100px;
        text-align: center;
        background-position: center center; /* Centramos la imagen en móvil */
        
        /* En móvil, a veces es mejor quitar el fixed si da problemas de rendimiento */
        /* background-attachment: scroll; */
    }
    
    .distributor-logo img {
        margin-left: auto;
        margin-right: auto;
        max-width: 150px !important;
    }

    .distributor-content h2 {
        font-size: 32px;
    }
}

/* --- Ajuste Técnico Footer --- */
.footer-legal-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin-bottom: 0;
    /* Forzamos una sola línea en pantallas grandes */
    white-space: nowrap; 
}

/* En móviles permitimos que rompa línea para no desbordar el contenedor */
@media (max-width: 575px) {
    .footer-legal-text {
        white-space: normal;
        font-size: 12px;
        line-height: 1.5;
    }
}

.footer-fiido-area .container {
    max-width: 1400px; /* Aseguramos que el contenedor tenga buen ancho */
}

/* ==========================================================================
   OPTIMIZACIÓN DE UI: BOTÓN WHATSAPP MINIMALISTA (Puro SVG)
   - Sin fondos, sin bordes, solo el icono puro con micro-interacciones.
   ========================================================================== */

.whatsapp-pure-izq {
    position: fixed;
    bottom: 30px; /* Separación del borde inferior */
    left: 30px;   /* Separación del borde izquierdo */
    z-index: 10000; /* Siempre por encima de todo */
    display: block;
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Transición Apple-like */
    
    /* Animación de pulso suave constante (opcional, pero muy pro) */
    animation: wa-pulse 3s infinite ease-in-out;
}

/* Estilo de la imagen SVG pura */
.wa-icon-pure {
    width: 60px;  /* Tamaño premium idéntico al anterior */
    height: 60px;
    display: block;
    /* Un drop-shadow ultra suave para que no se pierda en fondos claros */
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12));
    transition: transform 0.3s ease;
}

/* --- MICRO-INTERACCIONES PREMIUM --- */

/* Hover: Un salto sutil y un giro levísimo (Apple style) */
.whatsapp-pure-izq:hover {
    transform: translateY(-5px) rotate(3deg) scale(1.03); /* Combinación premium */
    animation: none; /* Frenamos el pulso al hover */
}

/* Hover de la imagen: brillo extra suave */
.whatsapp-pure-izq:hover .wa-icon-pure {
    filter: drop-shadow(0 8px 16px rgba(0,29,53,0.2)); /* Sombra de marca Fiido */
}

/* Animación de pulso sutil */
@keyframes wa-pulse {
    0% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-4px); opacity: 0.95; } /* Un pequeño salto suave */
    100% { transform: translateY(0); opacity: 1; }
}

/* RESPONSIVE: En móviles lo hacemos un poquito más chico */
@media (max-width: 767px) {
    .whatsapp-pure-izq {
        bottom: 20px;
        left: 20px;
    }
    .wa-icon-pure {
        width: 50px;
        height: 50px;
    }
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif !important;
}

:root {
    --text-main: #1d1d1f;
    --text-soft: rgba(255, 255, 255, 0.7);
    --border: #f2f2f2;
    --header-height: 70px;
}

.ap-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
    transition: background 0.3s ease;
}

/* Logos a los extremos de la pantalla */
.ap-container-fluid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px; /* Bajamos de 50px a 20px para que los logos lleguen a los extremos */
    height: var(--header-height);
    width: 100%;
}

.ap-logo-wrapper { 
    flex: 1; 
    display: flex; /* Convertimos en flex para controlar la dirección del logo */
}

/* Este es el contenedor del logo de KASIA */
.ap-logo-wrapper.text-right { 
    justify-content: flex-end; /* Empuja el SVG al final del contenedor (derecha) */
}

.ui-logo-img {
    height: 35px;
    width: auto; /* Importante para que el SVG no se deforme */
    filter: brightness(0) invert(1);
    opacity: 0.8;
    transition: 0.3s;
    display: block; /* Quita espacios fantasmales de línea de texto */
}

/* Si el SVG tiene espacio en blanco interno, este ajuste lo termina de pegar */
.text-right .ui-logo-img {
    margin-right: -5px; 
}

/* Navegación Desktop */
.ap-nav-list {
    display: flex;
    list-style: none;
    gap: 40px;
    flex: 2;
    justify-content: center;
}

.ap-top-link {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-soft);
    text-decoration: none;
    padding: 25px 0;
    display: block;
    transition: 0.3s;
}

/* Efecto Scrolled */
.ap-header.scrolled, .ap-header:hover {
    background: #ffffff;
    border-bottom: 1px solid var(--border);
}

.ap-header.scrolled .ap-top-link, .ap-header:hover .ap-top-link { color: var(--text-main); }
.ap-header.scrolled .ui-logo-img, .ap-header:hover .ui-logo-img { filter: none; opacity: 1; }

/* MEGA MENU 100% PANTALLA */
.ap-has-mega { position: static; }

.ap-mega-panel {
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100vw;
    background: #ffffff;
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* PUENTE DE CONTACTO: evita que se cierre al bajar el mouse */
    padding-top: 1px; 
}

.ap-has-mega:hover .ap-mega-panel {
    visibility: visible;
    opacity: 1;
    height: 550px;
    border-top: 1px solid var(--border);
}

.ap-mega-inner {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    height: 100%;
}

.ap-mega-sidebar {
    width: 350px;
    padding: 30px 0;
    border-right: 1px solid var(--border);
}

.ap-cat-item {
    display: block;
    padding: 15px 20px;
    color: #86868b;
    text-decoration: none;
    font-size: 12px;
}

.ap-cat-item.active, .ap-cat-item:hover {
    color: var(--text-main);
    background: #fbfbfb;
}

.ap-mega-content { flex: 1; padding: 60px; }

.ap-prod-group { display: none; gap: 40px; }
.ap-prod-group.active { display: flex; }

.ap-prod-link { text-decoration: none; text-align: center; width: 300px; }
.ap-prod-link img { width: 100%; margin-bottom: 15px; transition: 0.3s; }
.ap-prod-link span { font-size: 13px; color: var(--text-main); font-weight: 500; }
.ap-prod-link:hover img { transform: translateY(-5px); }

/* MOBILE HAMBURGER */
.ap-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 11000;
}

.hamburger {
    display: block;
    width: 22px;
    height: 1.5px;
    background: #ffffff; /* Inicial blanco */
    position: relative;
    transition: 0.3s;
}

.scrolled .hamburger, .ap-header:hover .hamburger { background: #000; }

.hamburger::before, .hamburger::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1.5px;
    background: inherit;
    left: 0;
    transition: 0.3s;
}
.hamburger::before { top: -6px; }
.hamburger::after { bottom: 6px; }

/* MOBILE FULL PAGE */
@media (max-width: 991px) {
    .ap-menu-toggle { display: block; }
    .ap-nav-list {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #fff;
        flex-direction: column;
        justify-content: flex-start;
        padding: 100px 40px;
        transform: translateY(-100%);
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .ap-nav-list.active { transform: translateY(0); }
    .ap-top-link {
        font-size: 28px;
        color: var(--text-main);
        font-weight: 600;
        border-bottom: 1px solid var(--border);
        width: 100%;
    }
    .ap-mega-panel { display: none !important; }
}

/* --- Botón Back to Top Premium --- */
.ap-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.8); /* Efecto Glassmorphism */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    
    /* Estado inicial: Oculto */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Estado visible (activado por JS) */
.ap-back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Micro-interacción Hover */
.ap-back-to-top:hover {
    background: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    color: #000;
}
/* --- Estilos del Nuevo Bloque --- */
.ap-page-header-lifestyle {
    position: relative;
    height: 450px; /* Altura premium para no ser tan invasivo como el video */
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #000;
    overflow: hidden;
}

.ap-ph-media {
    position: absolute;
    inset: 0;
}

.ap-ph-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.ap-ph-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.2);
}

.ap-ph-content {
    position: relative;
    z-index: 10;
    width: 100%;
}

.ap-ph-title {
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -1px;
    margin: 0;
}

/* --- Barra Azul (Atributos) --- */
.ap-attributes-bar {
    background-color: #001D35;
    padding: 20px 0;
    color: #fff;
}

.ap-attr-wrapper {
    display: flex;
    justify-content: center;
    gap: 60px;
}

.ap-attr-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

/* Ajuste para que el contenido de abajo no quede pegado */
main {
    background: #fff;
}
/* Si el fondo es oscuro en alguna sección, el botón resalta por el blur *//* --- Global --- */
.ap-cat-section {
    width: 100%;
    padding: 80px 0;
    background-color: #ffffff;
}

.ap-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Header Categoría --- */
.ap-cat-header {
    text-align: center;
    margin-bottom: 50px;
}

.ap-cat-title {
    font-size: 28px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 12px;
}

.ap-cat-subtitle {
    font-size: 16px;
	font-weight: 300;
    color: #666;
    max-width: 700px;
    margin: 0 auto 20px;
    line-height: 1.6;
}

.ap-cat-line {
    width: 35px;
    height: 3px;
    background-color: #001D35;
    margin: 0 auto;
}

/* --- Grid Centrado --- */
.ap-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 300px); 
    gap: 30px;
    justify-content: center;
    width: 100%;
}

/* --- Tarjeta Figma Fidelity --- */
.ap-card {
    background-color: #fafafa;
    border-radius: 20px;
    padding: 35px 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    min-height: 520px;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid transparent;
}

.ap-card:hover {
    transform: translateY(-8px);
    background-color: #ffffff;
    box-shadow: 0 15px 35px rgba(0,0,0,0.07);
    border: 1px solid #f2f2f2;
}

/* --- Imagen Grande --- */
.ap-card-img-box {
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.ap-card-img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ap-card-name {
    font-size: 20px;
    color: #1d1d1f;
    margin-bottom: 12px;
}

.ap-card-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    height: 65px;
    overflow: hidden;
    margin-bottom: 25px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.btn-secondary-fiido {
    display: inline-block;
    padding: 12px 0;
    width: 100%;
    max-width: 180px;
    margin: 0 auto;
    border-radius: 50px;
    border: 1.5px solid #001D35;
    background-color: #ffffff;
    color: #001D35 !important;
    text-decoration: none;
    transition: 0.3s;
    font-size: 14px;
	font-weight: 400;
}

/* --- Responsive Corregido (Vertical en mobile) --- */
@media (max-width: 1024px) {
    .ap-cat-grid {
        grid-template-columns: repeat(2, 300px);
    }
}

@media (max-width: 650px) {
    .ap-cat-grid {
        grid-template-columns: 1fr;
    }
    .ap-card {
        max-width: 320px;
        margin: 0 auto;
        min-height: auto;
    }
    .ap-cat-section {
        padding: 40px 0;
    }
    .ap-cat-title {
        font-size: 24px;
    }
}/* --- Bloque 1: Intro de Categoría (Refinado) --- */
.ap-cat-intro-section {
    padding-top: 60px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 20px; /* Padding equilibrado */
    background-color: #ffffff;
}

.ap-cat-intro-content {
    text-align: left; 
}

.ap-cat-main-title {
    font-size: 44px; /* Un poco más de presencia */
    font-weight: 700;
    color: #1d1d1f; 
    margin-bottom: 15px; /* Reducido para evitar el "hueco" */
    letter-spacing: -1.2px;
    line-height: 1.1;
}

.ap-cat-main-desc {
    font-size: 16.5px; /* Tamaño moderno */
    line-height: 1.55; /* Interlineado balanceado */
    color: #424245; /* Gris suave profesional, no negro puro */
    max-width: 1440px; 
    font-weight: 400;
    margin-top: 0;
    letter-spacing: -0.1px; /* Para quitar sensación de template viejo */
}

/* Responsive */
@media (max-width: 768px) {
    .ap-cat-main-title {
        font-size: 34px;
        letter-spacing: -0.8px;
    }
    .ap-cat-main-desc {
        font-size: 15px;
        line-height: 1.5;
    }
}
/* --- Bloque 2: Detalle de Producto --- */
.ap-prod-detail-section {
    padding: 40px 0;
    background-color: #ffffff;
}

.ap-prod-main-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Info más angosto que la foto lifestyle */
    gap: 40px;
    align-items: center;
    margin-bottom: 50px;
}

/* Imagen de producto (La bici sola) */
.ap-prod-img-featured {
    width: 100%;
    margin-bottom: 20px;
    padding-top: 0px;
}

.ap-prod-img-featured img {
    width: 100%;
    max-width: 450px; /* Agrandamos la bici */
    height: auto;
    display: block;
    padding-top: 0px;
}

/* Info del Producto */
.ap-prod-name-h2 {
    font-size: 48px; /* H2 Bien grande */
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 5px;
}

.ap-prod-rating {
    color: #ffcc00;
    font-size: 18px;
    margin-bottom: 15px;
}

.ap-prod-price {
    font-size: 42px;
    font-weight: 700;
    color: #28a745; /* Verde Fiido */
    margin-bottom: 20px;
}

.ap-prod-specs-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.ap-prod-specs-list li {
    font-size: 15px;
    color: #666;
    margin-bottom: 8px;
    position: relative;
    padding-left: 15px;
}

.ap-prod-specs-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #ccc;
}

/* Botón Primario (Azul Sólido) */
.btn-primary-fiido {
    display: inline-block;
    padding: 14px 60px;
    background-color: #001D35; /* Azul institucional */
    color: #ffffff !important;
    border-radius: 50px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.3s ease;
}

.btn-primary-fiido:hover {
    background-color: #002d54;
}

/* Imagen Lifestyle */
.ap-img-lifestyle {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* Footer de Texto Largo */
.ap-prod-footer-desc {
    max-width: 100%;
    border-top: 1px solid #f0f0f0;
    padding-top: 40px;
}

.ap-prod-footer-desc p {
    font-size: 16px;
    color: #424245;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .ap-prod-main-grid {
        grid-template-columns: 1fr; /* Todo vertical en tablets/mobile */
    }
}
/* --- Bloque de Detalle (Reciclado) --- */
.ap-prod-detail-section {
    padding: 40px 0; /* Ajustado a 40px como pediste */
    background-color: #ffffff;
    border-bottom: 1px solid #f0f0f0;
}

/* Clase de utilidad para intercalar fondos */
.ap-bg-gray {
    background-color: #fafafa !important;
}

.ap-prod-main-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 40px;
}

/* Imagen de producto (Agrandada) */
.ap-prod-img-featured {
    width: 100%;
    margin-bottom: 15px;
}

.ap-prod-img-featured img {
    width: 100%;
    max-width: 480px; /* Un poco más de presencia */
    height: auto;
    object-fit: contain;
}

/* Info del Producto */
.ap-prod-name-h2 {
    font-size: 52px; /* Más grande como pediste */
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 2px;
    letter-spacing: -1.5px;
}

.ap-prod-rating {
    color: #ffcc00;
    font-size: 16px;
    margin-bottom: 12px;
}

.ap-prod-price {
    font-size: 42px;
    font-weight: 700;
    color: #28a745;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

/* Lista de Specs */
.ap-prod-specs-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.ap-prod-specs-list li {
    font-size: 14.5px;
    color: #424245;
    margin-bottom: 10px;
    padding-left: 18px;
    position: relative;
    line-height: 1.4;
}

.ap-prod-specs-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #86868b;
    font-weight: bold;
}

/* Botón Primario (Azul Fiido) */
.btn-primary-fiido {
    display: inline-block;
    padding: 16px 55px;
    background-color: #001D35;
    color: #ffffff !important;
    border-radius: 50px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-align: center;
}

.btn-primary-fiido:hover {
    background-color: #002d54;
    box-shadow: 0 4px 12px rgba(0, 29, 53, 0.2);
}

/* Imagen Lifestyle (Mantenemos el radio sutil) */
.ap-img-lifestyle {
    width: 100%;
    border-radius: 12px;
    display: block;
}

/* Footer de Texto Largo */
.ap-prod-footer-desc {
    max-width: 100%;
    padding-top: 30px;
}

.ap-prod-footer-desc p {
    font-size: 16px;
    color: #424245;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Responsive (Vertical en mobile) */
@media (max-width: 991px) {
    .ap-prod-main-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .ap-prod-img-featured img {
        max-width: 100%;
    }
    .ap-prod-name-h2 {
        font-size: 42px;
    }
}
/* --- Sección Producto Hero (Layout 60/40) --- */
.ap-product-hero {
    padding: 80px 0;
    background-color: #ffffff;
}

/* --- SECCIÓN PRODUCTO HERO (Layout 60/40) --- */
.ap-product-hero {
    padding: 80px 0;
    background-color: #ffffff;
}

.ap-product-main-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* 60% Imagen - 40% Info */
    gap: 60px;
    /* CAMBIO CLAVE: Alineamos al inicio (arriba) para que el texto no salte */
    align-items: flex-start; 
}

/* Ajuste opcional para que el texto no pegue tan arriba del todo 
   si la imagen es muy grande */
.ap-product-info {
    padding-top: 20px; 
}

.ap-product-title {
    font-size: 52px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 8px;
    letter-spacing: -1.5px;
    line-height: 1.1; /* Asegura que el interlineado sea prolijo */
}

/* El resto de tus estilos (.ap-product-price-large, etc.) se mantienen igual */

/* Galería Interactiva */
.ap-product-gallery {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.ap-gallery-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ap-thumb {
    width: 70px;
    height: 70px;
    object-fit: contain;
    border: 1.5px solid #f0f0f2;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.ap-thumb.active, .ap-thumb:hover {
    border-color: #001D35;
    background-color: #fafafa;
}

.ap-main-image-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.ap-main-image-container img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transition: opacity 0.3s ease-in-out;
}

/* Info de Producto */
.ap-product-title {
    font-size: 52px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 8px;
    letter-spacing: -1.5px;
}

.ap-product-price-large {
    font-size: 34px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 25px;
}

.ap-product-short-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #424245;
    margin-bottom: 40px;
}

/* BOTÓN PRIMARIO: Azul Sólido Institucional */
.btn-primary-fiido {
    display: inline-block;
    padding: 16px 50px;
    background-color: #001D35;
    color: #ffffff !important;
    border-radius: 50px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    transition: background 0.3s ease;
}

.btn-primary-fiido:hover {
    background-color: #002d54;
}

/* --- Barra de Características (Reciclada #fafafa) --- */
.ap-features-bar {
    background-color: #fafafa;
    padding: 60px 0;
    border-top: 1px solid #f0f0f0;
}

.ap-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    text-align: center;
}

.ap-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.ap-feature-icon-box {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ap-feature-icon-box img {
    max-width: 100%;
    height: auto;
    filter: opacity(0.6); /* Iconos sutiles como en la home */
}

.ap-feature-text strong {
    display: block;
    font-size: 16px;
    color: #1d1d1f;
    margin-bottom: 4px;
    font-weight: 600;
}

.ap-feature-text span {
    font-size: 13px;
    color: #86868b;
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .ap-product-main-grid { grid-template-columns: 1fr; gap: 40px; }
    .ap-product-gallery { flex-direction: column-reverse; align-items: center; }
    .ap-gallery-thumbnails { flex-direction: row; }
    .ap-product-info { text-align: top; }
    .ap-features-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}

@media (max-width: 600px) {
    .ap-features-grid { grid-template-columns: 1fr; }
    .ap-product-title { font-size: 38px; }
}.ap-details-accordion-section { padding: 80px 0; background: #fff; }
.ap-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: flex-start; }
.ap-details-main-title { font-size: 32px; font-weight: 700; margin-bottom: 20px; }
.ap-details-p { font-size: 16px; line-height: 1.6; color: #424245; }

/* Acordeón Base */
.ap-accordion-col { border-top: 1px solid #d2d2d7; margin-top: 25px; }
.ap-accordion-item { border-bottom: 1px solid #d2d2d7; overflow: hidden; }
.ap-accordion-header { 
    width: 100%; display: flex; justify-content: space-between; align-items: center; 
    padding: 20px 0; background: none; border: none; cursor: pointer; 
}
.ap-acc-label { font-size: 18px; font-weight: 500; color: #1d1d1f; }
.ap-accordion-icon { font-size: 20px; }

/* Contenedor Animado */
.ap-accordion-content { 
    max-height: 0; overflow: hidden; 
    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1); 
}
.ap-accordion-item.active .ap-accordion-content { max-height: 2000px; transition: max-height 0.8s ease-in; }

/* INTERIORES */
/* 1. Cards */
.ap-acc-grid-cards { display: flex; flex-direction: column; gap: 15px; padding-bottom: 25px; }
.ap-acc-card { background: #f7f7f7; border-radius: 12px; padding: 20px; }
.ap-acc-card h3 { font-size: 16px; margin-bottom: 15px; font-weight: 600; }
.ap-acc-card ul { list-style: none; padding: 0; margin: 0; }
.ap-acc-card li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; font-size: 14px; }

/* 2. Caja */
.ap-acc-box-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding-bottom: 25px; }
.ap-box-img { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 10px; margin-bottom: 5px; }
.ap-box-img img { width: 100%; display: block; }
.ap-box-item span { font-size: 11px; display: block; text-align: center; color: #6e6e73; }

/* 3. Tabla */
.ap-acc-table-wrapper { padding-bottom: 25px; }
.ap-table-header { background: #f2f2f2; padding: 10px; font-size: 13px; font-weight: 700; margin-top: 10px; }
.ap-table-row { display: grid; grid-template-columns: 1fr 1fr; padding: 10px; border-bottom: 1px solid #eee; font-size: 13px; }

/* 4. FAQ */
.ap-acc-faq-list { padding-bottom: 25px; }
.ap-faq-item a { color: #00c2cb; text-decoration: none; font-weight: 500; }

/* RESPONSIVE */
@media (max-width: 991px) {
    .ap-details-grid { grid-template-columns: 1fr; gap: 40px; }
    .ap-acc-box-grid { grid-template-columns: repeat(3, 1fr); }
}
/* --- Bloque Galería Lifestyle --- */
.ap-lifestyle-gallery-section {
    padding: 100px 0;
    background-color: #fafafa; /* Fondo sutil para separar */
}

.ap-gallery-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px; /* Centrado y con aire abajo */
}

/* Grilla Mosaico (CSS Grid) */
.ap-gallery-mosaic-grid {
    display: grid;
    /* 4 columnas en desktop para armar el mosaico */
    grid-template-columns: repeat(4, 1fr);
    /* Alto fijo para las filas, el aspect-ratio de las fotos lo define */
    grid-auto-rows: minmax(200px, auto); 
    gap: 15px; /* Espacio minimalista entre fotos */
}

.ap-gallery-item {
    overflow: hidden;
    border-radius: 12px; /* Bordes redondeados premium */
    position: relative;
    /* Efecto sutil de sombra */
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.ap-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Clave: la foto llena el espacio sin deformarse */
    display: block;
    transition: transform 0.5s ease; /* Para un hover sutil */
}

/* Hover sutil UX */
.ap-gallery-item:hover img {
    transform: scale(1.05);
}

/* Definición de los tamaños del mosaico (Desktop) */
.ap-gallery-item-large {
    grid-column: span 2; /* Ocupa 2 columnas de ancho */
    grid-row: span 2;    /* Ocupa 2 filas de alto */
    aspect-ratio: 1 / 1; /* Cuadrada perfecta */
}

.ap-gallery-item-small {
    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio: 1 / 1; /* Cuadradas pequeñas */
}

/* RESPONSIVE: Blindado y Prolijo */
@media (max-width: 991px) {
    .ap-lifestyle-gallery-section {
        padding: 60px 0;
    }
    
    .ap-gallery-mosaic-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en Tablets */
        gap: 10px;
    }
    
    /* Reajustamos tamaños para 2 columnas */
    .ap-gallery-item-large {
        grid-column: span 2; /* Ocupa todo el ancho */
        aspect-ratio: 16 / 9; /* Se vuelve apaisada */
    }
    
    .ap-gallery-item-small {
        grid-column: span 1; /* 2 fotos por fila */
    }
}

@media (max-width: 600px) {
    .ap-gallery-mosaic-grid {
        grid-template-columns: 1fr; /* Una columna en celulares */
        gap: 10px;
    }
    
    .ap-gallery-item {
        grid-column: span 1 !important; /* Todas ocupan todo el ancho */
        grid-row: span 1 !important;
        aspect-ratio: 16 / 9; /* Formato video para todas */
    }
}
/* --- Bloque de Impacto Visual (Ajustado) --- */
.ap-visual-impact-section {
    padding: 80px 0 40px 0;
    text-align: center;
    /* Degradado con 20% de opacidad basado en tus colores */
    background: linear-gradient(180deg, 
        rgba(166, 181, 133, 0.2) 0%, 
        rgba(145, 148, 132, 0.2) 100%
    );
}

.ap-visual-header {
    max-width: 700px;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    padding: 0 20px;
}

.ap-visual-header .ap-section-title-large {
    font-size: 36px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 12px;
    letter-spacing: -1px;
}

.ap-visual-header .ap-section-text-medium {
    font-size: 17px;
    color: #424245;
    line-height: 1.4;
}

/* Ajuste de tamaño de la imagen */
.ap-visual-img-box {
    width: 100%;
    max-width: 850px; /* Reducido para que no quede gigante */
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.ap-img-fluid {
    width: 60%; /* Un poco menos de ancho total para dar aire */
    height: auto;
    display: block;
    object-fit: contain;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .ap-visual-impact-section {
        padding: 50px 0 20px 0;
    }
    .ap-visual-header .ap-section-title-large {
        font-size: 26px;
    }
    .ap-visual-img-box {
        max-width: 100%;
    }
}
/* --- Bloque Mosaico Características (Corregido: Cobertura Total) --- */
.ap-features-mosaic-section {
    padding: 20px 0;
    background-color: #ffffff;
}

.ap-features-mosaic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px; /* Espacio entre fotos */
}

.ap-feature-tile {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    background-color: #1a1a1a; 
    /* Eliminamos cualquier padding que pueda estar achicando la imagen */
    padding: 0; 
}

/* La imagen debe llenar el 100% del contenedor SIEMPRE */
.ap-feature-tile img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* Esta es la clave para que no se corte y llene todo */
    display: block;
    transition: transform 0.6s ease;
}

/* Oscurecimiento base para que el texto blanco resalte */
.ap-feature-tile::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%; /* Gradiente solo en la mitad inferior */
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Textos sobre las fotos */
.ap-tile-caption {
    position: absolute;
    bottom: 25px;
    left: 25px;
    color: #ffffff !important;
    font-size: 20px;
    font-weight: 600;
    z-index: 2;
    margin: 0;
}

/* Proporciones del Mosaico */
.ap-tile-wide {
    grid-column: span 3;
    aspect-ratio: 16 / 8; /* Proporción panorámica para la de arriba y abajo */
}

/* Las 3 fotos del medio (Batería, Manillar, Triángulo) */
.ap-feature-tile:not(.ap-tile-wide) {
    aspect-ratio: 1 / 1; /* Cuadradas perfectas para que llenen la fila */
}

/* Tile de abajo con texto a la izquierda */
.ap-tile-info-overlay {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    color: #ffffff !important;
    max-width: 400px;
    z-index: 2;
}

.ap-tile-info-overlay h2 {
    color: #ffffff !important;
    font-size: 34px;
    margin-bottom: 15px;
    font-weight: 700;
}

.ap-tile-info-overlay p {
    color: #f0f0f0 !important;
    font-size: 16px;
    opacity: 0.9;
}

/* --- RESPONSIVE BLINDADO --- */
@media (max-width: 991px) {
    .ap-features-mosaic-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ap-tile-wide {
        grid-column: span 2;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 600px) {
    .ap-features-mosaic-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .ap-tile-wide, .ap-feature-tile {
        grid-column: span 1 !important;
        aspect-ratio: 4 / 3; /* Formato más cómodo para scrollear en móvil */
    }
    .ap-tile-info-overlay {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        padding: 40px 25px;
        background: #111;
    }
}/* --- Bloque Highlights Scroll (Versión Liviana) --- */
.ap-highlights-section {
    padding: 60px 0; /* Bajamos el padding general */
    background-color: #fbfbfd;
    overflow-x: hidden;
}

.ap-highlights-title {
    text-align: center;
    font-size: 32px; /* Un poco más pequeña */
    font-weight: 700;
    margin-bottom: 40px;
    letter-spacing: -0.5px;
    color: #1d1d1f;
}

.ap-highlights-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    /* Mantenemos el alineado con el container */
    padding-left: calc((100vw - 1200px) / 2); 
    padding-right: 40px;
    scrollbar-width: none;
}

.ap-highlights-inner {
    display: flex;
    gap: 20px; /* Gap más apretado */
    padding-bottom: 30px;
}

/* Tarjeta más compacta */
.ap-highlight-card {
    flex: 0 0 350px; /* Reducimos el ancho de 420px a 350px */
    background: #ffffff;
    border-radius: 18px; /* Bordes un poco menos exagerados */
    box-shadow: 0 8px 20px rgba(0,0,0,0.04);
    scroll-snap-align: start;
}

.ap-highlight-img {
    width: 100%;
    /* Cambiamos de 4/5 (alto) a 16/13 (más bajo/horizontal) */
    aspect-ratio: 16 / 13; 
    overflow: hidden;
    border-radius: 18px 18px 0 0;
}

.ap-highlight-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ap-highlight-info {
    padding: 20px 20px 25px 20px; /* Reducimos paddings internos */
}

.ap-highlight-info h3 {
    font-size: 19px; /* Fuente más liviana */
    font-weight: 700;
    margin-bottom: 8px;
    color: #1d1d1f;
    line-height: 1.2;
}

.ap-highlight-info p {
    font-size: 13.5px; /* Texto más pequeño y elegante */
    line-height: 1.5;
    color: #6e6e73;
    margin: 0;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
    .ap-highlights-scroll-wrapper {
        padding-left: 20px;
    }
}

@media (max-width: 768px) {
    .ap-highlight-card {
        flex: 0 0 280px; /* Tarjetas más pequeñas en móvil para ver más la siguiente */
    }
    .ap-highlights-title {
        font-size: 26px;
    }
}/* --- Bloque Autonomía (CSS Grid Blindado) --- */
.ap-range-section {
    padding: 80px 0;
    background-color: #ffffff;
    text-align: center;
}

.ap-range-header { margin-bottom: 50px; }

.ap-range-subtitle {
    font-size: 20px;
    font-weight: 500;
    color: #1d1d1f;
    margin-top: 10px;
}

/* Gráfico con Grid */
.ap-range-chart {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.ap-range-bar-item {
    display: grid;
    /* Desktop: Label (120px) | Barra (1fr) | Valor (180px) */
    grid-template-columns: 120px 1fr 180px;
    align-items: center;
    gap: 20px;
}

.ap-range-label {
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
    text-align: right;
}

.ap-range-bar-container {
    width: 100%;
    height: 38px;
    background-color: #f5f5f7;
    border-radius: 6px;
    overflow: hidden;
}

.ap-range-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #327776 0%, #5DDDBB 100%);
    width: 0%; /* Inicia en 0 para el JS */
    transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.ap-range-chart.animated .ap-range-bar-fill {
    width: var(--final-width);
}

.ap-range-value {
    font-size: 14px;
    font-weight: 500;
    color: #424245;
    text-align: left;
}

.ap-range-disclaimer {
    max-width: 700px;
    margin: 60px auto 0;
    font-size: 13px;
    color: #86868b;
    line-height: 1.6;
    padding: 0 20px;
}

/* --- RESPONSIVE FIX --- */
@media (max-width: 768px) {
    .ap-range-bar-item {
        /* En mobile cambiamos a una sola columna */
        grid-template-columns: 1fr;
        gap: 8px;
        text-align: left;
        padding: 0 20px;
    }

    .ap-range-label {
        text-align: left;
        font-size: 16px;
    }

    .ap-range-bar-container {
        height: 30px;
    }

    .ap-range-value {
        text-align: left;
        font-size: 13px;
        margin-bottom: 10px;
    }
}	/* --- Bloque Geometría (Versión 40/60 + Sticky Reforzado) --- */
.ap-geometry-section {
    padding: 100px 0;
    background-color: #fafafa;
    /* IMPORTANTE: El contenedor padre NO debe tener overflow: hidden */
    overflow: visible; 
}

/* Contenedor centralizado */
.ap-geometry-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Cabecera alineada a la izquierda */
.ap-geometry-header {
    text-align: left;
    margin-bottom: 40px;
    max-width: 500px;
}

.ap-geometry-title {
    font-size: 38px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 12px;
}

.ap-geometry-subtitle {
    font-size: 16px;
    color: #86868b;
    line-height: 1.5;
}

/* Grilla con Flexbox para asegurar que las columnas midan lo mismo */
.ap-geometry-grid {
    display: flex;
    gap: 50px;
    align-items: stretch; /* Estira la columna de la imagen al alto de la tabla */
}

/* TABLA (40% - Compacta y Liviana) */
.ap-geometry-table-wrapper {
    flex: 0 0 40%; 
    min-width: 0;
}

.ap-geometry-table {
    width: 100%;
    border-collapse: collapse;
}

/* Encabezado con línea de acento */
.ap-geometry-table thead tr {
    border-bottom: 2px solid #1d1d1f;
}

.ap-geometry-table th {
    text-align: left;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 700;
    color: #1d1d1f;
}

.ap-geometry-table th:last-child {
    text-align: right;
}

/* Filas con el Hover que recuperamos */
.ap-geometry-table tr {
    border-bottom: 1px solid #e5e5e7;
    transition: background-color 0.2s ease;
}

.ap-geometry-table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04); 
}

.ap-geometry-table td {
    padding: 14px 0; /* Más apretado para que sea liviana */
    font-size: 14px;
    color: #1d1d1f;
}

.ap-geom-key {
    font-weight: 600;
}

.ap-geom-val {
    text-align: right;
    color: #424245;
}

/* COLUMNA IMAGEN (60% - El Sticky) */
.ap-geometry-images-col {
    flex: 0 0 60%;
    position: relative;
    /* No le ponemos un height fijo, que lo herede del stretch del padre */
}

/* Este es el contenedor que se queda pegado */
.ap-geom-sticky-box {
    position: -webkit-sticky;
    position: sticky;
    top: 80px; /* Se queda a 80px del borde superior de la pantalla */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

.ap-geom-img-main {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Botón debajo de la tabla */
.ap-geom-cta {
    margin-top: 40px;
}

/* --- RESPONSIVE BLINDADO --- */
@media (max-width: 991px) {
    .ap-geometry-grid {
        flex-direction: column;
        gap: 30px;
    }

    .ap-geometry-table-wrapper, 
    .ap-geometry-images-col {
        flex: 0 0 100%;
        width: 100%;
    }

    .ap-geometry-images-col {
        order: -1; /* La bici primero en mobile */
    }

    .ap-geom-sticky-box {
        position: relative; /* Desactivamos sticky en celulares */
        top: 0;
    }

    .ap-geometry-header {
        text-align: center;
        margin: 0 auto 40px;
    }
}
/* --- Hero Product Video Header --- */
.ap-product-hero-video {
    position: relative;
    width: 100%;
    height: 600px; /* Altura fija solicitada */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #000; /* Fondo de respaldo mientras carga */
    color: #ffffff;
}

/* El video como background */
.ap-hero-media-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.ap-hero-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Clave: no deforma el video */
    display: block;
}

/* Capa oscura para legibilidad del texto */
.ap-hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25); /* Ajustar según el video */
}

/* Capa de contenido */
.ap-hero-video-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 20px;
}

.ap-hero-video-title {
    font-size: clamp(36px, 6vw, 56px);
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -1px;
    line-height: clamp(36px, 6vw, 56px);
}

.ap-hero-video-subtitle {
    font-size: 18px;
    color: #FFFFFF;
    font-weight: 400;
    margin-bottom: 40px;
    opacity: 0.95;
}

.ap-hero-video-price {
    display: block;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Botones y acciones */
.ap-hero-video-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
	}

.btn-hero-buy {
    background-color: #001D35; /* Color corporativo */
    color: #fff;
    padding: 14px 45px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.btn-hero-buy:hover {
    background-color: #00335c;
    transform: scale(1.05);
    color: #FFFFFF;
    font-weight: 400;
}

.btn-video-full {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.8;
}

.btn-video-full:hover {
    opacity: 1;
}

/* --- RESPONSIVE BLINDADO --- */
@media (max-width: 768px) {
    .ap-product-hero-video {
        height: 500px; /* Un poco más corto en móviles para UX */
    }
    
    .ap-hero-video-subtitle {
        font-size: 16px;
        padding: 0 10%;
    }
}

@media (max-width: 480px) {
    .ap-product-hero-video {
        height: 100vh; /* En móviles muy chicos, a veces rinde más pantalla completa */
    }
}

/* --- Bloque Legales: Estética Limpia y Alineada --- */
.ap-legal-section {
    padding: 80px 0;
    background-color: #ffffff;
    /* Fuente optimizada para lectura larga */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #1d1d1f;
}

/* Contenedor central que alinea todo el bloque */
.ap-container-narrow {
    max-width: 850px; /* Ancho ideal para lectura (proporción áurea) */
    margin: 0 auto;
    padding: 0 25px;
}

/* Alineación perfecta de encabezados */
.ap-legal-main-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 50px;
    letter-spacing: -1px;
    text-align: left; /* Siempre a la izquierda */
}

.ap-legal-block {
    margin-bottom: 45px;
    text-align: left;
}

.ap-legal-block h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1d1d1f;
}

.ap-legal-intro {
    font-weight: 600;
    margin-bottom: 15px;
    display: block;
}

/* Listas alineadas con el texto */
.ap-legal-list {
    padding-left: 1.2rem; /* Sangría mínima para alinear con el párrafo superior */
    margin: 0;
}

.ap-legal-list li {
    margin-bottom: 12px;
    font-size: 15px;
    color: #424245; /* Gris Apple para no cansar la vista */
}

.ap-legal-list li a {
    color: #0066cc;
    text-decoration: none;
}

.ap-legal-list li a:hover {
    text-decoration: underline;
}

.ap-legal-divider {
    border: 0;
    border-top: 1px solid #e5e5e7;
    margin: 50px 0;
}

/* --- TABLA PROLIJA Y RESPONSIVE --- */
.ap-legal-table-wrapper {
    margin-top: 30px;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    overflow: hidden; /* Para que los bordes redondeados funcionen */
}

.ap-legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background-color: #fff;
}

.ap-legal-table th {
    background-color: #f5f5f7;
    padding: 18px 20px;
    font-weight: 700;
    text-align: left;
    color: #1d1d1f;
    border-bottom: 1px solid #e5e5e7;
}

.ap-legal-table td {
    padding: 20px;
    vertical-align: top;
    border-bottom: 1px solid #f0f0f2;
    color: #424245;
}

.ap-legal-table tr:last-child td {
    border-bottom: none;
}

.ap-table-bold {
    font-weight: 700;
    color: #1d1d1f;
    width: 25%; /* Ancho fijo para la primera columna en desktop */
}

/* --- RESPONSIVE BLINDADO --- */
@media (max-width: 768px) {
    .ap-legal-section {
        padding: 50px 0;
    }

    .ap-legal-main-title {
        font-size: 28px;
        margin-bottom: 35px;
    }

    .ap-legal-block h3 {
        font-size: 20px;
    }

    /* Scroll horizontal suave en móviles para la tabla */
    .ap-legal-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ap-legal-table {
        min-width: 600px; /* Asegura que no se amontone el texto */
    }

    .ap-legal-table td, .ap-legal-table th {
        padding: 15px;
    }
}
/* --- Bloque Contact Cards --- */
.ap-contact-grid-section {
    padding: 100px 0;
    background-color: #ffffff;
    text-align: center;
}

.ap-contact-main-title {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 60px;
    color: #1d1d1f;
}

/* Grilla de 3 columnas */
.ap-contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* Tarjeta Estilo Premium */
.ap-contact-card {
    background-color: #f5f5f7; /* Fondo gris suave */
    padding: 40px 30px;
    border-radius: 20px;
    text-align: left; /* Alineado a la izquierda como el print */
    transition: transform 0.3s ease;
}

.ap-contact-card:hover {
    transform: translateY(-5px);
}

.ap-contact-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 25px;
}

.ap-contact-icon img {
    width: 100%;
    height: auto;
    filter: brightness(0.2); /* Oscurece el icono si es muy claro */
}

.ap-contact-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 15px;
}

.ap-contact-link a {
    color: #0066cc; /* Azul Apple/Fiido para links */
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}

.ap-contact-link a:hover {
    text-decoration: underline;
}

.ap-contact-detail, .ap-contact-detail-only {
    font-size: 14px;
    color: #86868b;
    margin-top: 5px;
    line-height: 1.5;
}

.ap-contact-detail-only {
    color: #1d1d1f; /* Mayor contraste para textos sin link */
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    .ap-contact-cards-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets */
    }
}

@media (max-width: 767px) {
    .ap-contact-grid-section {
        padding: 60px 0;
    }
    
    .ap-contact-cards-grid {
        grid-template-columns: 1fr; /* 1 columna en móviles */
        gap: 20px;
    }
    
    .ap-contact-card {
        padding: 30px;
    }

    .ap-contact-main-title {
        font-size: 28px;
        margin-bottom: 40px;
    }
}

/* --- AJUSTE GLOBAL DE IMÁGENES --- */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- AJUSTE DE LA GRILLA DE IMÁGENES (Mosaico) --- */
/* Suponiendo que tu contenedor se llama .ap-gallery-grid o similar */
@media (max-width: 768px) {
    .ap-gallery-grid {
        display: flex !important;
        flex-direction: column !important; /* Las pone una debajo de otra */
        gap: 15px !important;
        padding: 0 15px;
    }

    .ap-gallery-item {
        width: 100% !important;
        height: 300px !important; /* Altura fija para que no queden gigantes */
    }
    
    /* Ajuste para el bloque de "Diseño elegante" */
    .ap-design-content {
        padding: 40px 20px !important;
        text-align: center !important;
    }
}

/* ============================================================
   SOLUCIÓN PARA MOBILE (PEGAR AL FINAL DEL ARCHIVO)
   ============================================================ */

@media (max-width: 768px) {
    
    /* 1. Ajuste de imágenes: que no se amontonen */
    .ap-gallery-grid, 
    .ap-contact-cards-grid,
    .ap-acc-grid-cards,
    .ap-acc-box-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important; /* Por si usas Grid */
        gap: 20px !important;
        padding: 0 15px !important;
    }

    /* 2. Que las fotos del mosaico tengan un buen tamaño */
    .ap-gallery-item {
        width: 100% !important;
        height: 350px !important;
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    /* 3. El texto "Diseño elegante" y Hero Video */
    .ap-hero-video-title, 
    .ap-design-content h2,
    .ap-legal-main-title {
        font-size: 28px !important; /* Tamaño cómodo para leer en mano */
        line-height: 1.2 !important;
    }

    .ap-design-content,
    .ap-product-hero-video {
        padding: 60px 20px !important;
        height: auto !important; /* Que se estire según el texto */
        min-height: 400px !important;
    }

    /* 4. Las 6 tarjetas de contacto */
    .ap-contact-card {
        width: 100% !important;
        text-align: center !important;
    }
    
    .ap-contact-icon {
        margin: 0 auto 15px !important;
    }

    /* 5. Acordeones y Tablas */
    .ap-acc-table-wrapper {
        overflow-x: auto !important; /* Permite deslizar tablas largas */
    }
    
    .ap-table-row span {
        font-size: 13px !important;
    }
}
/* ============================================================
   HERO FIIDO CLON - CSS FINAL REFORZADO
   ============================================================ */

.fiido-hero-clon {
    position: relative;
    width: 100%;
    background-color: #000;
}

.fiido-video-wrapper {
    position: relative;
    width: 100%;
    height: 720px !important;
    overflow: hidden;
}

.fiido-video-src {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fiido-video-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 50%);
    z-index: 1;
}

/* POSICIONAMIENTO DEL TEXTO (SUBIDO) */
.fiido-caption-box {
    position: absolute;
    bottom: 100px !important; /* Más aire respecto a la barra */
    left: 0;
    width: 100%;
    z-index: 10;
}

.fiido-text-left {
    padding-left: 50px !important;
}

.fiido-main-title {
    font-size: 37px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

.fiido-sub-title {
    font-size: 16px !important;
    color: #ffffff !important;
    opacity: 0.9 !important;
    font-weight: 300 !important;
    margin: 0 0 30px 0 !important;
}

/* --- BOTÓN PRINCIPAL (AZUL FIIDO) --- */
.fiido-btn-primary {
    display: inline-block !important;
    background-color: #001D35 !important; /* Azul Marino */
    color: #ffffff !important;
    padding: 14px 45px !important;
    border-radius: 50px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: 2px solid #001D35 !important;
    transition: all 0.3s ease !important;
    text-align: center;
}

.fiido-btn-primary:hover {
    background-color: #ffffff !important;
    color: #001D35 !important;
    border-color: #ffffff !important;
    transform: translateY(-3px);
}

/* BARRA AZUL */
.fiido-services-bar {
    background-color: #001D35 !important;
    padding: 20px 0 !important;
    width: 100% !important;
}

.fiido-service-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.fiido-service-item img {
    width: 24px !important;
    filter: brightness(0) invert(1);
}

.fiido-service-item span {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .fiido-video-wrapper { height: 550px !important; }
    .fiido-caption-box { bottom: 50px !important; }
    .fiido-text-left { padding-left: 25px !important; }
    .fiido-main-title { font-size: 30px !important; }
    .fiido-btn-primary { padding: 12px 35px !important; font-size: 14px !important; }
    
    .fiido-service-item { flex-direction: column; text-align: center; }
    .fiido-service-item span { font-size: 10px !important; line-height: 1.2; }
}

/* ============================================================
   GRILLA HORIZONTAL FULL WIDTH (6 TARJETAS)
   ============================================================ */

.ap-full-grid-section {
    width: 100%;
    padding: 60px 0;
    background-color: #fff;
    overflow-x: hidden; /* Evita scroll lateral no deseado */
}

.ap-full-wrapper {
    display: flex;
    width: 100%;
    /* Si quieres un pequeño espacio entre ellas, usa gap: 10px; */
    gap: 15px; 
    padding: 0 15px; /* Pequeño respiro en los bordes de la pantalla */
}

.ap-full-card {
    flex: 1; /* Esto hace que las 6 tarjetas midan exactamente lo mismo */
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 20px; /* Bordes como el print */
    overflow: hidden;
    text-decoration: none !important;
    border: 1px solid #eee;
    transition: transform 0.3s ease;
}

.ap-full-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

/* Contenedor de Imagen */
.ap-full-img {
    width: 100%;
    height: 380px; /* Ajusta este alto según prefieras */
}

.ap-full-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bloque de texto inferior */
.ap-full-info {
    padding: 25px 15px;
    text-align: center;
    background: #fff;
}

.ap-full-info h3 {
    font-size: 18px !important; /* Tamaño equilibrado para 6 columnas */
    font-weight: 600 !important;
    color: #000 !important;
    margin: 0 !important;
    line-height: 1.3;
}

/* --- RESPONSIVE (Blindado) --- */
@media (max-width: 1200px) {
    .ap-full-info h3 { font-size: 16px !important; }
    .ap-full-img { height: 300px; }
}

@media (max-width: 991px) {
    .ap-full-wrapper {
        flex-wrap: wrap; /* En tablets se ponen 3 y 3 */
    }
    .ap-full-card {
        flex: 0 0 calc(33.33% - 15px);
    }
}

@media (max-width: 767px) {
    .ap-full-card {
        flex: 0 0 calc(50% - 15px); /* En celulares 2 y 2 */
    }
    .ap-full-img { height: 240px; }
}

@media (max-width: 480px) {
    .ap-full-card {
        flex: 0 0 100%; /* En celulares chicos 1 sola por fila */
    }
}
/* ============================================================
   SECCIÓN APP FIIDO - REPLICA OFICIAL
   ============================================================ */

.ap-app-official-hero {
    width: 100%;
    height: 100vh; /* Pantalla completa */
    min-height: 700px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../images/slider/app-fido.png);
    background-size: cover;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ap-app-full-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2); /* Sutil para que respire el paisaje */
    z-index: 1;
}

.z-index-2 { z-index: 2; }

/* Tipografía Oficial */
.ap-app-official-title {
    font-size: clamp(32px, 5vw, 50px) !important;
    font-weight: 400 !important; /* Peso liviano como en la imagen */
    color: #ffffff !important;
    margin-bottom: 40px !important;
    letter-spacing: 0.5px !important;
}

/* Tiendas */
.ap-app-official-stores {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.ap-app-official-stores img {
    height: 50px; /* Tamaño badges Apple/Google */
    width: auto;
}

.ap-app-official-desc {
    font-size: 16px !important;
    color: #ffffff !important;
    opacity: 0.9;
    margin-bottom: 60px !important;
}

/* Grilla de Iconos (3 columnas en PC) */
.ap-app-official-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 20px;
    max-width: 900px;
    margin: 0 auto;
}

.ap-app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.ap-app-item img {
    width: 100px; /* Tamaño del círculo del icono */
    height: 100px;
    object-fit: contain;
    /* Si tus SVGs no tienen el círculo gris, se puede añadir por CSS */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    padding: 15px;
    backdrop-filter: blur(5px);
}

.ap-app-item span {
    font-size: 14px;
    color: #ffffff;
    font-weight: 300;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .ap-app-official-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en mobile */
        gap: 30px 10px;
    }
    .ap-app-official-title { font-size: 28px !important; }
}
/* ============================================================
   ESTILOS APP FIIDO V2 - BICICLETA PROTEGIDA (CORREGIDO)
   ============================================================ */

.fiido-lock-area-v2 {
    width: 100%;
    height: 100vh;
    min-height: 700px;
    position: relative;
    background: url('../images/slider/bicicleta-protegida') no-repeat center center;
    background-size: cover;
    display: flex;
    /* CAMBIO: Alineamos al final para que el texto baje */
    align-items: flex-end; 
    overflow: hidden;
    /* Ajustamos el padding-bottom para posicionar el bloque de texto */
    padding-bottom: 120px; 
}

.fiido-lock-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45); /* Un toque más de contraste */
    z-index: 1;
}

.fiido-z-index-10 { z-index: 10; }

/* --- TEXTOS --- */
.fiido-text-white { color: #ffffff !important; }

.fiido-lock-main-title {
    font-size: clamp(32px, 5vw, 48px) !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    margin-bottom: 15px !important;
    letter-spacing: -0.5px !important;
}

.fiido-lock-main-desc {
    font-size: 16px !important;
    color: #ffffff !important;
    max-width: 650px;
    margin: 0 auto 40px auto !important;
    line-height: 1.5 !important;
    opacity: 0.9;
}

/* --- ICONO DEL CANDADO (80x80 y Animación Fluida) --- */
.fiido-candado-v2-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fiido-candado-v2-circulo {
    position: relative;
    width: 80px; 
    height: 80px;
}

.fiido-candado-v2-icon {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0, 194, 203, 0.7); 
    backdrop-filter: blur(5px);
    z-index: 10;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.fiido-candado-v2-icon img {
    width: 28px;
    height: auto;
}

/* ANIMACIÓN PULSO: Optimizada para que no se trabe */
.fiido-candado-v2-pulso {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 50%;
    background-color: rgba(0, 194, 203, 0.4);
    z-index: 1;
    pointer-events: none;
    /* Animación lineal y continua */
    animation: lock-pulse-fiido 3s infinite linear; 
}

.fiido-p2 {
    animation-delay: 1.5s;
}

@keyframes lock-pulse-fiido {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .fiido-lock-area-v2 {
        padding-bottom: 60px;
        align-items: center; /* En móvil centramos para que no se pise con el footer */
    }
    .fiido-lock-main-title { font-size: 30px !important; }
}/* ============================================================
   BLOQUE APP: LIBERTAD SIN LLAVE (CORREGIDO)
   ============================================================ */

.fiido-bg-libertad {
    width: 100%;
    height: 100vh; /* Ocupa toda la pantalla */
    min-height: 600px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../images/slider/libertado-sin-llave.jpg);
    background-size: cover;
    display: flex;
    align-items: flex-start; /* Empuja el contenido hacia arriba */
    justify-content: center;
    /* Ajustá este valor para subir o bajar el texto respecto al techo */
    padding-top: 100px;
    overflow: hidden;
}

/* --- ESTILO DE TEXTO NEGRO (OFICIAL) --- */
.fiido-txt-libertad-title {
    font-size: 32px !important;
    font-weight: 400 !important; /* Peso regular/fino */
    color: #000000 !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

.fiido-txt-libertad-desc {
    font-size: 16px !important;
    color: #000000 !important;
    max-width: 800px;
    margin: 0 auto !important;
    line-height: 1.5 !important;
    font-weight: 300 !important;
    opacity: 0.9;
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    .fiido-bg-libertad {
        height: 70vh; /* Menos alto en tablets */
        padding-top: 80px;
    }
    .fiido-txt-libertad-title { font-size: 28px !important; }
}

@media (max-width: 767px) {
    .fiido-bg-libertad {
        height: auto;
        padding: 60px 20px; /* En móviles fluye con el contenido */
    }
    .fiido-txt-libertad-title { font-size: 24px !important; }
    .fiido-txt-libertad-desc { font-size: 14px !important; }
}/* ============================================================
   SECCIÓN CONFIGURACIÓN DE LA BICI - REPLICA OFICIAL
   ============================================================ */

.ap-bici-config-hero-full {
    width: 100%;
    height: 100vh; /* Full Height de la pantalla */
    min-height: 800px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../images/slider/configuracin-bici);
    background-size: cover;
    display: flex;
    overflow: hidden;
}

/* CAPA NEGRA DE OPACIDAD (Superposición para legibilidad) */
.ap-bici-config-overlay {
    position: absolute;
    inset: 0;
    /* Ajustá esta opacidad (0.5 es 50%) según la claridad de tu foto */
    background: rgba(0, 0, 0, 0.5); 
    z-index: 1;
}

/* Asegura que el contenido esté por encima de la capa negra */
.z-index-10 { z-index: 10; }

/* Contenedor principal con Flex y Space-Between */
.ap-bici-config-wrapper {
    width: 100%;
    height: 100%;
}

/* Utilidades de Padding */
.ap-pt-80 { padding-top: 100px; }
.ap-pb-60 { padding-bottom: 60px; }
.ap-pb-20 { padding-bottom: 20px; }

/* ============================================================
   A) ESTILOS SUPERIORES (Título y Bajada - Texto Blanco)
   ============================================================ */

.ap-bici-config-title {
    font-size: clamp(32px, 5vw, 50px) !important;
    font-weight: 400 !important; /* Peso regular oficial */
    color: #ffffff !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.5px !important;
    line-height: 1.1 !important;
}

.ap-bici-config-desc {
    font-size: 16.5px !important;
    color: #ffffff !important;
    max-width: 650px;
    margin: 0 auto !important;
    line-height: 1.5 !important;
    opacity: 0.95;
    font-weight: 300 !important;
}

/* ============================================================
   B) ESTILOS INFERIORES (Grilla de 3 Iconos Centrados)
   ============================================================ */

.ap-bici-config-icons-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 80px; /* Aire entre iconos de 3 columnas */
    max-width: 1000px;
    margin: 0 auto;
}

.ap-config-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
    flex: 0 0 calc(33.33% - 40px); /* 3 columnas */
}

.ap-config-item img {
    width: 40px; /* Tamaño del icono SVG */
    height: 40px;
    object-fit: contain;
}

.ap-config-item span {
    font-size: 14.5px;
    color: #ffffff;
    font-weight: 300;
    line-height: 1.3;
}

/* ============================================================
   C) ESTILOS PIE DE PÁGINA (Aclaración Legal - Izquierda)
   ============================================================ */

.ap-legal-container {
    padding-left: 20px; /* Alinear a la izquierda */
    width: 100%;
    max-width: 900px;
}

.ap-bici-config-legal-text {
    font-size: 12px !important; /* Pequeño y sutil */
    color: #ffffff !important;
    opacity: 0.7;
    margin: 0 !important;
    text-align: left; /* Alineación a la izquierda */
    line-height: 1.4 !important;
}

/* --- RESPONSIVE BLINDADO --- */
@media (max-width: 991px) {
    .ap-bici-config-hero-full {
        height: auto;
        padding-top: 120px;
        padding-bottom: 40px;
    }
    .ap-bici-config-icons-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en Tablets */
        gap: 30px;
        padding: 0 20px;
    }
}

@media (max-width: 767px) {
    .ap-bici-config-hero-full {
        height: auto;
    }
    .ap-bici-config-title { font-size: 28px !important; }
    .ap-bici-config-icons-grid {
        grid-template-columns: 1fr; /* 1 columna en celulares */
        gap: 20px;
    }
}/* ============================================================
   SECCIÓN ESTADO Y PROGRESO - REPLICA OFICIAL
   ============================================================ */

.ap-progreso-hero-full {
    width: 100%;
    height: 100vh; /* Full Pantalla */
    min-height: 700px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../images/slider/progreso.jpg);
    background-size: cover;
    display: flex;
    overflow: hidden;
}

/* No agregamos overlay negro aquí para que el agua y el cielo se vean claros como en el print */

.ap-pt-100 {
    padding-top: 100px; /* Altura idéntica a los bloques anteriores */
}

/* --- TEXTOS EN NEGRO --- */
.ap-progreso-title {
    font-size: 32px !important;
    font-weight: 400 !important; /* Estilo regular/fino oficial */
    color: #000000 !important;
    margin-bottom: 15px !important;
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

.ap-progreso-desc {
    font-size: 16px !important;
    color: #000000 !important;
    max-width: 850px; /* Un poco más ancho para que entre en dos líneas como el print */
    margin: 0 auto !important;
    line-height: 1.5 !important;
    font-weight: 300 !important;
    opacity: 0.9;
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    .ap-progreso-hero-full {
        height: 70vh; /* Bajamos altura en tablet */
        padding-top: 80px;
    }
    .ap-progreso-title { 
        font-size: 26px !important; 
    }
    .ap-progreso-desc {
        font-size: 14px !important;
        padding: 0 20px;
    }
}

@media (max-width: 480px) {
    .ap-progreso-hero-full {
        height: auto;
        padding: 60px 0;
        background-position: 70% center; /* Ajustamos el fondo para que se vea la chica en móvil */
    }
    .ap-progreso-title {
        font-size: 24px !important;
    }
}/* ============================================================
   ESTILO SECCIÓN COMUNIDAD - MOSAICO PNG
   ============================================================ */

/* Reutilizando clases de utilidad anteriores */
.ap-pt-80 { padding-top: 80px; }
.ap-pb-80 { padding-bottom: 80px; }
.ap-text-center { text-align: center; }
.ap-text-black { color: #000 !important; }
.ap-mb-15 { margin-bottom: 15px !important; }
.ap-mb-60 { margin-bottom: 60px !important; }

/* Tipografía Oficial (Mismo estilo que secciones anteriores) */
.ap-bici-main-title {
    font-size: clamp(32px, 5vw, 42px) !important;
    font-weight: 400 !important;
    color: #000 !important;
    letter-spacing: -0.5px !important;
    text-transform: none !important;
}

.ap-app-official-desc {
    font-size: 16px !important;
    color: #FFFFFF !important;
    opacity: 0.8;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 300 !important;
}

/* --- MANEJO DE LA IMAGEN PNG --- */
.ap-comunidad-image-wrapper {
    width: 100%;
    /* No le ponemos altura fija para que escale */
    display: flex;
    justify-content: center;
    overflow: hidden; /* Evita que el mosaico desborde la pantalla */
}

.ap-comunidad-img {
    max-width: 1400px; /* Ancho máximo para que no se pixele en PC grandes */
    width: 100%; /* Ocupa todo el ancho disponible */
    height: auto; /* Mantiene la proporción original */
    display: block;
}

/* --- RESPONSIVE BLINDADO --- */
@media (max-width: 1200px) {
    .ap-container {
        padding: 0 30px; /* Más aire a los costados en tablets */
    }
}

@media (max-width: 768px) {
    .ap-pt-80 { padding-top: 60px; }
    .ap-pb-80 { padding-bottom: 60px; }
    .ap-mb-60 { margin-bottom: 40px !important; }
    
    .ap-bici-main-title {
        font-size: 28px !important;
    }
    
    .ap-app-official-desc {
        font-size: 14px !important;
        padding: 0 15px;
    }
    
    /* En móvil, la imagen PNG escalará proporcionalmente y se verá más pequeña */
}
/* --- COMPORTAMIENTO STICKY --- */
.ap-product-main-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* 60/40 */
    gap: 50px;
    align-items: flex-start; /* Importante para que el sticky funcione */
}

.ap-left-sticky-col {
    position: sticky;
    top: 100px; /* Ajusta según la altura de tu header para que no se pegue al techo */
}

/* --- BARRA DE FEATURES (MÁXIMA PRECISIÓN) --- */
.ap-features-grid-inline {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px 10px !important; /* Espacio vertical muy corto entre filas */
    margin-top: 20px !important;
    padding-top: 5px !important;
    border-top: 1px solid #eee !important;
    width: 100% !important;
}

.ap-feature-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    
}

/* --- ICONOS UNIFORMES --- */
.ap-feature-item img {
    /* Ahora que el SVG está limpio, forzamos un tamaño visual idéntico */
    width: 26px !important; 
    height: 26px !important;
    object-fit: contain !important;
    /* Pegamos el icono al texto */
   
    display: block !important;
}

.ap-feature-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Título (17,5 kg, Sensor, etc.) */
.ap-feature-text strong {
    font-size: 13px !important;
    color: #000 !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Bajada (Ligero, Pedaleo premium, etc.) */
.ap-feature-text span {
    font-size: 11px !important;
    color: #888 !important;
    line-height: 1.1 !important;
    margin-top: 2px !important; /* Espacio mínimo con el strong */
}

/* RESPONSIVE */
@media (max-width: 480px) {
    .ap-features-grid-inline {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .ap-features-grid-inline {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en móvil */
        gap: 20px 10px;
    }
}
    .ap-left-sticky-col {
        position: relative; /* Sacamos el sticky en móvil */
        top: 0;
    }
    .ap-features-grid-inline {
        grid-template-columns: repeat(2, 1fr);
    }
    }
/* --- BLOQUE DE DESCRIPCIÓN --- */
.ap-description-container {
    position: relative;
    margin-top: 15px;
    margin-bottom: 25px; /* Espacio para separar del botón azul */
}

.ap-product-short-desc {
    position: relative;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    overflow: hidden;
    max-height: 90px; /* Ajuste para 4 líneas aprox */
    transition: max-height 0.4s ease;
}

/* Efecto degrade para indicar que sigue el texto */
.ap-text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
    transition: opacity 0.3s;
}

/* Estados de expansión */
.ap-product-short-desc.expanded {
    max-height: 1000px;
}
.ap-product-short-desc.expanded .ap-text-overlay {
    opacity: 0;
}

/* BOTÓN LEER MÁS: Pegado al texto y separado del CTA */
.ap-read-more-btn {
    display: block;
    background: none !important;
    border: none !important;
    color: #001D35 !important;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    margin-top: 5px;      /* Pegado al texto */
    margin-bottom: 25px;  /* Aire respecto al botón de Descargar */
}

/* BOTÓN AZUL (Descargar brochure) */
.btn-primary-fiido {
    display: inline-block;
    padding: 15px 35px;
    background-color: #001D35;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    transition: background 0.3s;
}.ap-reviews-section {
    padding: 60px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.ap-section-title {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 30px;
    padding-left: 15px; /* Alineado con las tarjetas */
    text-align: left;
}

.ap-video-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 videos por fila */
    gap: 20px;
    padding: 0 15px;
}

.ap-video-item {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Mantiene formato 16:9 */
    height: 0;
    border-radius: 20px; /* Borde de 20px solicitado */
    overflow: hidden;
    background: #000;
}

/* Esto obliga al iframe a entrar en el cuadrado con bordes de 20px */
.ap-video-item iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: none;
}

.ap-video-caption {
    margin-top: 15px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
}

/* Responsive para celular */
@media (max-width: 768px) {
    .ap-video-grid { grid-template-columns: 1fr; }
    .ap-section-title { text-align: center; }
}

/* --- ESTILOS DEL BLOQUE HERO BLANCO --- */
.ap-hero-section {
    position: relative;
    width: 100%;
    height: 80vh;           /* Altura: 80% de la pantalla */
    min-height: 450px;      /* Para que nunca se vea muy petiso */
    display: flex;
    align-items: center;    /* Centra el texto verticalmente */
    justify-content: center; /* Centra el texto horizontalmente */
    
    /* Configuración de Imagen */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #222; /* Fondo de seguridad si no carga la foto */
}

/* La capa de oscuridad (Overlay) */
.ap-hero-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Oscurece la foto un 40% */
    z-index: 1;
	
}

/* Contenedor del texto */
.ap-hero-container {
    position: relative;
    z-index: 2;             /* Se pone encima de la sombra negra */
    max-width: 800px;       /* Para que los renglones no sean tan largos */
    padding: 0 20px;
    text-align: center;     /* Centrado de texto */
}

/* TÍTULO BLANCO (Menos negrita) */
.ap-hero-title {
    color: #ffffff !important; /* BLANCO PURO */
    font-size: 50px;
    font-weight: 500;       /* Menos negrita, estilo premium */
    margin-bottom: 20px;
    line-height: 1.1;
    letter-spacing: -0.5px;
	text-align: center;
}

/* PÁRRAFO BLANCO */
.ap-hero-text {
    color: #ffffff !important; /* BLANCO PURO */
    font-size: 18px;
    text-align: left;
    line-height: 1.6;
    font-weight: 400;
    opacity: 0.9;            /* Un toque de transparencia para que no brille tanto */
}

/* Ajuste para celular */
@media (max-width: 768px) {
    .ap-hero-title { font-size: 50px; }
    .ap-hero-text { font-size: 16px; }
}
.ap-configurator {
    padding: 60px 0;
    text-align: center;
    background-color: #f9f9f9;
}

.ap-config-title {
    font-size: 50px;
    font-weight: 500;
    margin-bottom: 30px;
}

.ap-product-viewer {
    position: relative;
    max-width: 960px; /* Tu medida */
    margin: 0 auto;
    aspect-ratio: 960 / 554;
}

.ap-layer-base {
    width: 100%;
    display: block;
}

.ap-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.4s ease; /* Efecto suave */
    z-index: 2;
}

.ap-hidden {
    opacity: 0;
    pointer-events: none;
}

.ap-visible {
    opacity: 1;
}

/* --- SELECTORES --- */
.ap-config-selectors {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

.ap-selector {
    width: 60px;
    height: 60px;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    padding: 5px;
    transition: all 0.2s;
}

.ap-selector img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ap-selector.active {
    border: 2px solid #000;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.ap-config-label {
    margin-top: 20px;
    font-size: 14px;
    color: #666;
}
/* Estilo del link debajo del botón */
.ap-link-full-video {
    display: block;
    color: #B0B0AD;
    text-decoration: underline;
     font-size: 14px;
    cursor: pointer;
    text-align: center;
}

/* Modal Estilos */
.ap-modal-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
}
.ap-modal-content {
    position: relative;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; max-width: 900px;
}
.ap-video-responsive {
    position: relative;
    padding-bottom: 56.25%; height: 0;
}
.ap-video-responsive iframe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}
.ap-modal-close {
    position: absolute;
    top: -40px; right: 0;
    color: #fff; font-size: 40px; cursor: pointer;
}
.ap-color-group {
    margin-bottom: 25px;
    text-align: center;
}

.ap-config-subtitle {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    color: #666;
}

.ap-color-selectors {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.ap-color-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s, border-color 0.2s;
    border: 2px solid transparent;
}

.ap-color-btn:hover {
    transform: scale(1.1);
}

/* Círculo de selección activo */
.ap-color-btn.active {
    border-color: #000;
    box-shadow: 0 0 0 2px #fff inset;
}

/* Estilo para los selectores de accesorios activos */
.ap-selector.active {
    border: 2px solid #000 !important;
    background: #f9f9f9;
}/* Contenedor principal */
.ap-parallax-split {
    width: 100%;
}

.ap-parallax-block {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

/* Contenedor Flex para posicionar el texto */
.ap-parallax-container-flex {
    height: 100%;
    display: flex;
    justify-content: flex-end; /* Empuja a la derecha */
    align-items: flex-end;    /* Empuja abajo */
    padding-bottom: 80px;      /* Distancia desde el borde inferior */
    padding-right: 50px;       /* Distancia desde el borde derecho */
}

/* Estilo del bloque de texto */
.ap-parallax-content-right {
    text-align: right; /* Alinea el texto a la derecha */
    max-width: auto;
}

.ap-parallax-title {
    color: #ffffff;
    font-size: 60px; /* Tamaño grande como el print */
    font-weight: 500;
    line-height: 1;
    margin-bottom: 15px;
    text-shadow: 0 2px 15px rgba(0,0,0,0.3);
}

.ap-parallax-subtitle {
    color: #ffffff;
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .ap-parallax-block {
        background-attachment: scroll;
    }
    .ap-parallax-container-flex {
        justify-content: center; /* En móvil lo centramos para que no se corte */
        align-items: center;
        padding: 20px;
    }
    .ap-parallax-content-right {
        text-align: center;
    }
    .ap-parallax-title {
    font-size: 35px;
    line-height: 50px;
    }
    .ap-parallax-subtitle {
        font-size: 16px;
    }
}

/* --- SECCIÓN VIDEO FEATURES CORREGIDA --- */
.ap-video-features-section {
    padding: 60px 0;
    background-color: #ffffff;
}

.ap-video-features-title {
    font-size: 32px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 30px;
    color: #000;
}

/* Video Wrapper */
.ap-video-main-wrapper {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 40px auto;
    border-radius: 15px;
    overflow: hidden;
    line-height: 0;
}

.ap-video-content {
    width: 100%;
    height: auto;
    display: block;
}

/* --- GRID DE ICONOS (CORRECCIÓN) --- */
.ap-video-features-grid {
    display: flex;
    flex-direction: row; /* Fuerza la fila */
    flex-wrap: wrap;     /* Permite bajar si no hay espacio */
    justify-content: space-between; /* Distribuye espacio igual entre ellos */
    align-items: flex-start;
    max-width: 1100px;   /* Alineado con el ancho del video */
    margin: 0 auto;
    padding: 0 10px;
}

/* Item Individual */
.ap-video-feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;             /* Todos ocupan el mismo espacio */
    min-width: 252px;    /* Evita que se amontonen */
    padding: 10px;
}

.ap-video-feature-item img {
    width: 60px;         /* Tamaño del círculo del icono */
    height: auto;
    flex-shrink: 0;
    max-width: 40px;
    min-width: 0px;
}

.ap-feature-text {
    font-size: 16px;
    color: #000;
    text-align: left;    /* Texto alineado a la izquierda del icono */
    line-height: 1.2;
    font-weight: 400;
}

/* --- RESPONSIVE --- */

@media (max-width: 1024px) {
    .ap-video-features-grid {
        justify-content: center; /* En tablets los centra */
    }
}

@media (max-width: 768px) {
    .ap-video-features-grid {
        flex-direction: column; /* Solo en móvil real se apilan */
        align-items: center;
    }
    
    .ap-video-feature-item {
        width: 100%;
        max-width: 350px;
        justify-content: flex-start; /* Icono a la izq, texto al lado */
    }
}
/* --- SECCIÓN FULL SCREEN --- */
.ap-full-image-section {
    width: 100%;
    height: 100vh; /* Ocupa el 100% de la altura de la ventana */
    overflow: hidden;
    line-height: 0;
}

.ap-full-image-wrapper {
    width: 100%;
    height: 100%;
}

.ap-full-img {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* CLAVE: Ajusta la imagen sin deformarla */
    object-position: center; /* Centra la imagen si se recorta */
}

/* --- AJUSTE PARA MÓVILES --- */
@media (max-width: 768px) {
    .ap-full-image-section {
        height: 70vh; /* En móviles bajamos un poco la altura para que no sea eterno el scroll */
    }
}
/* --- CONTROLES UNIFICADOS: RIEL VERDE + FLECHAS --- */
.ap-highlights-controls {
    display: flex;
    align-items: center; /* Alineación vertical perfecta al centro */
    justify-content: space-between;
    margin: 50px auto 0 auto;
    gap: 40px; 
    max-width: 86%; 
}

/* El Riel (Línea de 2px en el verde solicitado) */
.ap-progress-bar-container {
    flex-grow: 1; 
    height: 2px; /* Grosor un poco más presente */
    background: #e0e0e0; /* Color de fondo del riel (gris muy claro) */
    position: relative;
    margin: 0; 
}

/* El indicador que se mueve (Verde #327776) */
.ap-progress-bar-fill {
    position: absolute;
    height: 2px;
    width: 25%; /* Tamaño del segmento que indica el avance */
    background: #327776; /* TU COLOR: Verde Esmeralda Fiido */
    left: 0;
    top: 0;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Contenedor de flechas */
.ap-nav-arrows {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.ap-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* Borde muy fino para no competir con el riel */
    border: 0.5px solid #d1d1d1;
    background: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
}

/* Icono de la flecha (SVG delicado) */
.ap-nav-btn svg {
    width: 18px;
    height: 18px;
    stroke: #327776; /* Las flechas también usan tu color verde */
    stroke-width: 1.2px; /* Grosor delicado */
    transition: all 0.3s;
}

/* HOVER: El botón se destaca sutilmente */
.ap-nav-btn:hover {
    border-color: #327776;
    background-color: #f4f9f9; /* Un toque de verde muy pálido al fondo */
}

.ap-nav-btn:hover svg {
    stroke-width: 1.8px; /* Se pone un poquito más gruesa al tocarla */
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .ap-highlights-controls {
        max-width: 90%;
        gap: 20px;
    }
    .ap-nav-arrows {
        display: none; /* En móvil se desplaza con el dedo */
    }
}
/* --- ESTILOS GENERALES FIIDO MATE (RESPETANDO TU WEB) --- */
.fiido-mate-experience {
    width: 100%;
    background-color: #fbfbfb; /* Fondo gris tenue tipo Apple */
    overflow: hidden; /* Evita scrolls laterales en animaciones */
    padding: 60px 0;
}

.fiido-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

.mate-block {
    margin-bottom: 80px; /* Espaciado generoso entre bloques */
    position: relative;
}

/* --- TÍTULOS Y SUBTÍTULOS (Usa tus fuentes actuales) --- */
.mate-title {
    font-size: 54px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 15px;
    color: #111;
}

.mate-subtitle {
    font-size: 18px;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px auto;
    color: #555;
    line-height: 1.6;
}

.mate-section-title {
    font-size: 38px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 60px;
    color: #111;
}

/* --- IMÁGENES LIFESTYLE Y EFECTO PARALLAX --- */
.mate-lifestyle-bg {
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.mate-img-lifestyle img {
    width: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease-out; /* Suavizado Parallax */
}

.mate-text-overlay {
    position: absolute;
    bottom: 10%;
    left: 8%;
    color: #fff;
    z-index: 2;
}

.mate-text-overlay h2 {
    font-size: 46px;
    font-weight: 700;
}

/* --- EL GRID DE CARDS PASTEL --- */
.mate-grid-pastel {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    gap: 30px;
    margin-bottom: 30px; /* Espacio antes del card gris */
}

.mate-card {
    border-radius: 24px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.card-content h3 {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
}

.card-img {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-img img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* COLORES DE LOS CARDS */
.card-celeste {
    background-color: #e3f2fd; /* Celeste pastel */
}

.card-rosa {
    background-color: #fce4ec; /* Rosa pastel */
}

/* CARD GRIS (LLAMADAS BT) */
.card-gris {
    background-color: #f5f5f7; /* Gris claro Apple */
    flex-direction: row; /* Imagen a la derecha, texto a la izquierda */
    align-items: center;
    padding: 0 80px;
    width: 100%;
    margin-bottom: 80px;
}

.card-gris .card-content {
    flex: 1;
}

.card-gris .card-img {
    flex: 1;
    margin-top: 0;
    display: flex;
    justify-content: flex-end;
}

.card-gris .card-img img {
    max-width: 80%; /* Ajuste para que no sea gigante */
}

/* --- BLOQUE SINCRONIZACIÓN DATOS --- */
.mate-sync {
    text-align: center;
}

.sync-img-parallax {
    display: flex;
    justify-content: center;
}

.sync-img-parallax img {
    max-width: 100%;
    height: auto;
}

/* --- BLOQUE INICIO PROXIMIDAD (RELOJ GRANDE) --- */
.mate-proximity {
    text-align: center;
}

.proximity-img-zoom {
    display: flex;
    justify-content: center;
    overflow: hidden; /* Importante para el efecto de zoom */
    border-radius: 15px;
}

.proximity-img-zoom img {
    max-width: 100%;
    height: auto;
    transition: transform 0.8s ease-out; /* Suavizado Zoom */
}

/* --- EL CANDADO DE SEGURIDAD (BANNER) --- */
.mate-security {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.security-banner {
    display: flex;
    align-items: center;
    background-color: #1de9b6; /* Verde Fiido del candado */
    color: #fff;
    padding: 25px 45px;
    border-radius: 50px;
    gap: 25px;
    max-width: 800px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.security-icon img {
    width: 100px;
    height: auto;
}

.security-text p {
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

/* --- CLASES PREPARADAS PARA JS (ESTADO INICIAL ANIMACIONES) --- */
.ap-scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.ap-scroll-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- RESPONSIVE PERFECTO --- */

@media (max-width: 1024px) {
    .mate-title { font-size: 42px; }
    .mate-text-overlay h2 { font-size: 36px; }
    .card-gris { padding: 0 40px; }
}

@media (max-width: 768px) {
    .fiido-mate-experience { padding: 40px 0; }
    .mate-title { font-size: 32px; }
    .mate-subtitle { font-size: 16px; margin-bottom: 40px; }
    .mate-section-title { font-size: 28px; margin-bottom: 40px; }
    
    .mate-block { margin-bottom: 50px; }
    
    .mate-img-full { border-radius: 10px; }
    .mate-text-overlay { bottom: 5%; left: 5%; }
    .mate-text-overlay h2 { font-size: 24px; }
    
    .mate-grid-pastel {
        grid-template-columns: 1fr; /* 1 columna en móvil */
        gap: 20px;
    }
    
    .mate-card { padding: 30px; }
    .card-content h3 { font-size: 20px; }
    
    .card-gris {
        flex-direction: column; /* Apilado en móvil */
        padding: 30px;
        text-align: center;
    }
    
    .card-gris .card-content { margin-bottom: 30px; }
    .card-gris .card-img { justify-content: center; }
    .card-gris .card-img img { max-width: 100%; }
    
    .security-banner {
        flex-direction: column;
        text-align: center;
        border-radius: 20px;
        padding: 30px;
    }
}
/* --- SECCIÓN SEGURIDAD NFC CORREGIDA --- */
.ap-mate-security-section {
    width: 100%;
    padding: 60px 0;
    /* NO aplicamos fondo aquí, heredará el blanco de la página */
    background: transparent; 
}

/* Contenedor que alinea con el resto de la web */
.ap-mate-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- El Banner Principal (La caja con degradado) --- */
.mate-security-banner {
    display: flex;
    align-items: center; /* Alineación vertical perfecta */
    justify-content: center; /* Centrado horizontal del contenido */
    
    /* TU DEGRADADO: Horizontal suave */
    background: linear-gradient(90deg, #327776 0%, #5DDDDB 100%);
    
    padding: 50px 70px; /* Aire interno generoso */
    
    /* BORDES REDONDEADOS: Igual que el sector de arriba */
    border-radius: 20px; 
    
    gap: 40px; /* Espacio entre icono y texto */
    margin-bottom: 30px; /* Espacio para el aviso legal debajo */
    
    /* Sombra suave para darle profundidad */
    box-shadow: 0 12px 30px rgba(50, 119, 118, 0.15);
    
    width: 100%;
    box-sizing: border-box; /* Para que el padding no estire la caja */
}

.security-icon img {
    width: 75px; /* Tamaño del candado */
    height: auto;
    filter: brightness(0) invert(1); /* Fuerza a que el icono sea blanco */
    flex-shrink: 0;
}

.security-text p {
    font-size: 24px; /* Tamaño impactante y premium */
    color: #ffffff; /* Blanco puro */
    line-height: 1.4;
    margin: 0;
    font-weight: 500;
    text-align: left;
    max-width: 800px;
}

/* --- El Aviso Legal (Disclaimer) debajo con fondo blanco --- */
.mate-security-disclaimer {
    font-size: 14px;
    color: #888; /* Gris suave */
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.5;
    padding: 20px 0;
    font-weight: 400;
}

/* --- RESPONSIVE PERFECTO --- */
@media (max-width: 1024px) {
    .mate-security-banner {
        padding: 40px 50px;
        gap: 30px;
    }
    .security-text p {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .ap-mate-security-section { padding: 40px 0; }
    
    .mate-security-banner {
        flex-direction: column; /* Apilado en móvil */
        text-align: center;
        padding: 40px 25px;
        gap: 20px;
        border-radius: 12px; /* Bordes un poco menos agresivos en móvil */
    }

    .security-icon img {
        width: 60px;
    }

    .security-text p {
        font-size: 18px;
        text-align: center; /* Texto centrado en móvil */
    }
    
    .mate-security-disclaimer {
        font-size: 12px;
    }
}
/* --- CONTENEDOR LIFESTYLE --- */
#blockLifestyle1 {
    position: relative;
    overflow: hidden;
    border-radius: 20px; /* Bordes redondeados como el resto */
}

/* CAPA OSCURA SUTIL (Overlay) */
/* Usamos un degradado para que la parte de arriba de la foto siga brillante 
   y solo se oscurezca donde está el texto */
#blockLifestyle1::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 50%);
    z-index: 1;
    pointer-events: none; /* Para que no interfiera con clics */
}

/* TEXTO BLANCO Y POSICIONAMIENTO */
.mate-text-overlay {
    position: absolute;
    bottom: 40px; /* Espacio desde abajo */
    left: 40px;   /* Espacio desde la izquierda */
    z-index: 2;   /* Por encima de la capa negra */
}

.mate-text-overlay h2 {
    color: #ffffff; /* Blanco puro */
    font-size: 38px;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Sombra extra para máxima legibilidad */
}

/* AJUSTE DE IMAGEN */
.mate-img-lifestyle img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .mate-text-overlay {
        bottom: 20px;
        left: 20px;
    }
    .mate-text-overlay h2 {
        font-size: 26px;
    }
}
/* --- CARD GRIS (LLAMADAS BLUETOOTH) --- */
#blockCardGris {
    background-color: #f5f5f7;
    display: flex;
    align-items: center; /* Centra el texto verticalmente respecto a la imagen */
    justify-content: space-between;
    padding: 0; /* Quitamos todo el padding inicial */
    overflow: hidden;
    border-radius: 24px;
    width: 100%;
}

#blockCardGris .card-content {
    flex: 1;
    padding-left: 80px; /* Le damos el aire al texto desde adentro */
    padding-right: 20px;
}

#blockCardGris .card-content h3 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    color: #1d1d1f;
    margin: 0;
    max-width: 350px;
}

#blockCardGris .card-img {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* Pega la imagen a la derecha */
    align-items: flex-end;    /* Pega la imagen a la base */
    line-height: 0;           /* Elimina espacios fantasma debajo de imágenes */
}

#blockCardGris .card-img img {
    max-width: 100%;
    height: auto;   /* La altura del DIV ahora depende de la altura de esta imagen */
    display: block; /* Elimina el margen inferior por defecto de las imágenes */
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    #blockCardGris .card-content { padding-left: 40px; }
    #blockCardGris .card-content h3 { font-size: 22px; }
}

@media (max-width: 768px) {
    #blockCardGris {
        flex-direction: column;
        padding: 40px 0 0 0; /* Espacio arriba para el texto, nada abajo */
    }
    #blockCardGris .card-content {
        padding: 0 20px 30px 20px;
        text-align: center;
    }
    #blockCardGris .card-content h3 { max-width: 100%; }
}

/* 1. Reset general: solo para las imágenes, para que no dejen aire abajo */
.mate-block img {
    display: block;
    width: 100%;
    margin: 0;
}

/* 2. Pegamos SOLO el bloque lifestyle al de arriba */
/* Usamos el ID del bloque de la foto para ser precisos */
#blockLifestyle1 {
    margin-top: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    line-height: 0;
}

/* 3. El bloque de la foto de arriba (Intro) también sin margen abajo */
#blockIntro {
    margin-bottom: 0 !important;
    line-height: 0;
}

/* 4. Devolvemos el espacio a los bloques de abajo (Grid y el resto) */
/* Esto le da aire al grid de los cards celeste y rosa */
.mate-grid-pastel, 
.mate-sync, 
.mate-proximity, 
.mate-security-section,
.card-gris {
    margin-top: 80px !important; /* El aire que querías */
}

/* 5. Si el grid está dentro de un bloque, aseguramos su separación */
.mate-grid-pastel {
    margin-bottom: 80px !important;
}

/* --- UNIÓN BLOQUE PROXIMIDAD + LIFESTYLE 2 --- */

/* 1. Quitamos el espacio abajo del bloque del reloj */
#blockProximity {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Evitamos que la imagen del reloj deje aire abajo */
.proximity-img-zoom {
    line-height: 0;
    margin-bottom: 0;
}

.proximity-img-zoom img {
    display: block;
    margin-bottom: 0;
}

/* 2. Quitamos el espacio arriba de la foto de abajo y ajustamos bordes */
#blockLifestyle2 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    /* Quitamos los bordes redondeados de arriba para que encastre perfecto */
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

#blockLifestyle2 .mate-img-lifestyle img {
    display: block;
    /* Un pequeño margen negativo de 1px ayuda a eliminar cualquier línea blanca residual */
    margin-top: -1px; 
}
/* --- CORRECCIONES RESPONSIVE (MOBILE FIRST / REPAIR) --- */

@media (max-width: 991px) {
    /* 1. Forzar que las columnas ocupen el 100% y no se queden pegadas */
    .ap-product-main-grid {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .ap-left-sticky-col, 
    .ap-product-info {
        width: 100% !important;
        position: static !important; /* Quita el sticky en móvil para que no falle el scroll */
    }

    /* 2. Galería de imágenes: Cambiar thumbnails a horizontal debajo o encima */
    .ap-product-gallery {
        flex-direction: column-reverse; /* Thumbnails debajo de la imagen principal */
        gap: 15px;
    }

    .ap-gallery-thumbnails {
        flex-direction: row !important; /* Thumbnails en fila */
        overflow-x: auto; /* Scroll horizontal si hay muchos */
        justify-content: flex-start;
        padding-bottom: 10px;
        width: 100%;
    }

    .ap-thumb {
        width: 70px !important; /* Tamaño fijo para thumbnails en móvil */
        height: 70px !important;
        flex: 0 0 auto;
    }

    /* 3. Iconos de características: de 2 en 2 o 1 en 1 */
    .ap-features-grid-inline {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Dos columnas de iconos */
        gap: 15px !important;
    }

    .ap-feature-item {
        justify-content: flex-start;
        padding: 10px;
    }

    /* 4. Acordeones y tablas */
    .ap-acc-grid-cards {
        grid-template-columns: 1fr !important; /* Cartas de especificaciones una debajo de otra */
    }

    .ap-acc-box-grid {
        grid-template-columns: repeat(3, 1fr) !important; /* "Qué hay en la caja" de 3 en 3 */
        gap: 10px;
    }

    .ap-table-row {
        flex-direction: column; /* Tablas de especificaciones: título arriba, valor abajo */
        align-items: flex-start;
        gap: 5px;
        padding: 10px 0;
    }

    /* 5. Ajustes de texto */
    .ap-product-title {
        font-size: 28px !important;
    }

    .ap-product-price-large {
        font-size: 24px !important;
    }
}

@media (max-width: 480px) {
    /* Ajuste para pantallas muy pequeñas */
    .ap-features-grid-inline {
        grid-template-columns: 1fr !important; /* Iconos uno debajo de otro */
    }
    
    .ap-acc-box-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* "Qué hay en la caja" de 2 en 2 */
    }
}/* --- CORRECCIÓN HERO (Para que todo vuelva al centro) --- */
.ap-hero-video-content {
    position: absolute; /* O relative, dependiendo de tu contenedor padre */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrado perfecto */
    z-index: 5; /* Por encima del video de fondo */
    text-align: center;
    width: 100%;
}

/* --- CORRECCIÓN DEL MODAL (Para que no aparezca suelto) --- */
.ap-modal-video {
    display: none; /* Invisible hasta que se hace clic */
    position: fixed; /* Siempre fijo a la pantalla, no al contenido */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999; /* El número más alto para que tape todo */
    background-color: rgba(0,0,0,0.9); /* Fondo negro puro */
    align-items: center;
    justify-content: center;
}

/* Asegurar que el video de fondo no se mueva */
#heroVideoBackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* El nivel más bajo */
}
/* --- CORRECCIÓN FINAL: PAGE HEADER LIFESTYLE (MOBILE) --- */

@media (max-width: 768px) {
    .ap-page-header-lifestyle {
        position: relative;
        /* Subimos un poco la altura para dar más aire a la foto recortada */
        height: 380px !important; 
        overflow: hidden;
        display: flex;
        align-items: center; /* Centrado vertical */
        justify-content: center;
        background-color: #000; /* Fondo de seguridad */
    }

    .ap-ph-media {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .ap-ph-img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Mantenemos cover para no deformar */
        
        /* --- ESTA ES LA CLAVE DEL RECORTE --- */
        /* Forzamos a que el recorte muestre la parte inferior derecha (Sujeto) */
        object-position: bottom right !important; 
    }

    .ap-ph-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Oscurecemos un poco más (0.4) para contrastar el texto */
        background: rgba(0, 0, 0, 0.4); 
        z-index: 1;
    }

    .ap-ph-content {
        position: relative;
        z-index: 2;
        text-align: center;
        width: 100%;
        padding: 0 10%; /* Más aire lateral */
    }

    /* --- CORRECCIÓN TIPOGRÁFICA (Texto Unido y Legible) --- */
    .ap-ph-title {
        color: #ffffff !important;
        font-size: 38px !important; /* Tamaño potente */
        font-weight: 700 !important;
        text-transform: capitalize; /* "Todos Los Modelos" */
        
        /* Reducimos el interlineado radicalmente para unir las líneas */
        line-height: 1.1 !important; 
        
        /* Quitamos márgenes fantasmas */
        margin: 0 !important; 
        
        /* Sombra de texto suave para separar de la foto */
        text-shadow: 0 2px 15px rgba(0,0,0,0.4); 
    }
}
.ap-modal-generico {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: none; /* Se activa con JS */
    align-items: center;
    justify-content: center;
}

.ap-modal-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
}

.ap-modal-container {
    position: relative;
    width: 90%;
    max-width: 1000px;
    z-index: 10;
}

.ap-video-full {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.ap-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 35px;
    cursor: pointer;
}
/* --- ESTILOS Picture-in-Picture (PiP) AGRANDADO --- */

/* 1. Contenedor Principal del Mosaico */
.ap-tile-pip-container {
    position: relative;
    overflow: hidden;
    background-color: #000;
}

/* 2. El Video de Fondo (Pantalla/Manillar) */
.ap-pip-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
}

/* 3. Sombra de fondo para legibilidad */
.ap-tile-pip-container::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%; /* Solo oscurecemos la mitad inferior */
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

/* 4. Contenedor del Frente (PiP + Texto) */
.ap-tile-foreground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px; /* Aumentamos el aire en las esquinas */
    z-index: 3;
    display: flex;
    flex-direction: column-reverse; /* El texto queda arriba del video chico */
    gap: 20px; /* Más espacio entre video y texto */
    pointer-events: none;
}

/* 5. EL VIDEO CHICO (PICTURE-IN-PICTURE) - AHORA MÁS GRANDE */
.ap-pip-wrapper {
    /* Aumentado de 33% a 45% para que destaque más */
    width: 45%; 
    max-width: 450px; 
    min-width: 280px; /* Asegura que no sea minúsculo en tablets */
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 16px; /* Bordes más redondeados, más moderno */
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    line-height: 0;
    border: 1px solid rgba(255,255,255,0.1); /* Un borde sutil para definirlo mejor */
}

.ap-pip-video-mini {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 6. El Texto Caption */
.ap-pip-caption {
    position: static !important;
    color: #ffffff;
    font-size: 28px; /* Texto más grande e impactante */
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    background: transparent !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .ap-pip-wrapper { width: 50%; }
    .ap-pip-caption { font-size: 22px; }
    .ap-tile-foreground { padding: 30px; }
}

@media (max-width: 768px) {
    /* En móvil se apila para no tapar el fondo */
    .ap-tile-pip-container { height: auto !important; display: block; }
    .ap-pip-bg-video { position: relative; height: 250px; }
    
    .ap-tile-foreground {
        position: relative;
        padding: 20px;
        background: #000;
        flex-direction: column; 
    }
    
    .ap-pip-wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        border-radius: 12px;
    }

    .ap-pip-caption {
        font-size: 20px;
        text-align: left;
    }
}/* --- BASE DE SECCIÓN --- */
.ap-sticky-full-section {
    background-color: #1a1a1a !important;
    position: relative;
    width: 100%;
    overflow: visible !important; /* Crucial para el sticky */
}

.ap-sticky-wrapper {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

/* --- COLUMNA VISUAL (STICKY) --- */
.ap-sticky-visual {
    width: 55%;
    height: 100vh;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    order: 2; /* Desktop: Derecha */
}

.ap-image-container {
    position: relative;
    width: 100%;
    height: 60vh;
}

.ap-sticky-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    max-width: 95%;
    height: auto;
    opacity: 0;
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.ap-sticky-img.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* --- COLUMNA TEXTO --- */
.ap-sticky-content {
    width: 45%;
    padding: 20vh 40px;
    order: 1; /* Desktop: Izquierda */
}

.ap-sticky-main-title {
    font-size: 36px;
    margin-bottom: 8vh;
    color: #ffffff !important;
    font-weight: 600;
}

.ap-sticky-tab {
    padding: 30px 0;
    margin-bottom: 5vh;
    opacity: 0.2;
    transition: all 0.4s ease;
    cursor: pointer;
}

.ap-sticky-tab.active {
    opacity: 1;
}

.ap-sticky-tab h3 {
    font-size: 24px;
    color: #ffffff !important;
    margin-bottom: 10px !important;
}

.ap-sticky-tab p {
    font-size: 16px;
    color: #a0a0a0 !important;
    line-height: 1.5;
}

/* --- ADAPTACIÓN MOBILE (CRÍTICO) --- */
@media (max-width: 991px) {
    .ap-sticky-wrapper {
        flex-direction: column; /* Apilado vertical */
    }

    .ap-sticky-visual {
        width: 100%;
        height: 45vh; /* Altura fija para el video/imagen en móvil */
        position: -webkit-sticky;
        position: sticky;
        top: 0; /* Se pega al borde superior del móvil */
        background-color: #1a1a1a;
        z-index: 100;
        order: 1; /* Imagen arriba */
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }

    .ap-sticky-content {
        width: 100%;
        padding: 40px 20px;
        order: 2; /* Texto abajo */
        position: relative;
        z-index: 10;
    }

    .ap-sticky-tab {
        height: auto;
        min-height: 40vh; /* Para que cada texto tenga su espacio al scrollear */
        opacity: 0.3; /* En móvil también se habilitan al llegar al centro */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .ap-sticky-tab.active {
        opacity: 1;
    }

    .ap-sticky-main-title {
        font-size: 28px;
        text-align: center;
        margin-top: 20px;
    }
}
.ap-hero-lifestyle {
    position: relative;
    width: 100%;
    height: 100vh; /* Full Screen exacto */
    display: flex;
    align-items: center; /* Centrado vertical del contenido */
    overflow: hidden;
    background-color: #f4f4f4;
}

/* Manejo de la Imagen */
.ap-hero-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.ap-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* Por defecto centrada */
}

.ap-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.1) 0%, transparent 50%);
    z-index: 2;
}

/* Contenedor de Texto estilo Apple */
.ap-hero-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 80px; /* Margen lateral en Desktop */
}

.ap-hero-content {
    max-width: 700px; /* Limita el ancho del texto */
}

.ap-hero-title {
    color: #ffffff;
    font-size: clamp(32px, 4vw, 56px); /* Tamaño fluido */
    font-weight: 500;
    line-height: 1.1;
    text-shadow: 0 2px 15px rgba(0,0,0,0.2);
    margin: 0;
	text-align: left;
	
}

/* --- ADAPTACIÓN MOBILE --- */
@media (max-width: 768px) {
    .ap-hero-lifestyle {
        height: 80vh; /* Un poco menos de altura para que no sea infinito en móvil */
    }

    .ap-hero-container {
        padding: 0 30px; /* Menos margen en móvil */
        text-align: left;
    }

    .ap-hero-media img {
        /* Movemos la imagen para que la ciclista (que está a la derecha) se vea bien */
        object-position: 75% center; 
    }

    .ap-hero-title {
        font-size: 34px;
        max-width: 280px; /* Forzamos el salto de línea para que se vea como en el diseño */
    }
    
    .ap-hero-overlay {
        /* En móvil oscurecemos un poco más el lado izquierdo para leer bien el texto */
        background: linear-gradient(90deg, rgba(0,0,0,0.3) 0%, transparent 70%);
    }
}
.ap-split-lifestyle-section {
    width: 100%;
    height: 100vh; /* Full Screen en Desktop */
    background-color: #000;
    overflow: hidden;
}

.ap-split-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
}

.ap-split-column {
    flex: 1; /* Esto obliga a que cada columna sea exactamente del 50% */
    height: 100%;
    position: relative;
    overflow: hidden;
}

.ap-split-column img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen llene su mitad sin deformarse */
    object-position: center;
    display: block;
    transition: transform 0.8s ease;
}

/* Efecto sutil al pasar el mouse (opcional) */
.ap-split-column:hover img {
    transform: scale(1.05);
}

/* --- ADAPTACIÓN MOBILE --- */
@media (max-width: 991px) {
    .ap-split-lifestyle-section {
        height: auto; /* En móvil dejamos que la altura sea fluida */
    }

    .ap-split-wrapper {
        flex-direction: column; /* Apilamos las imágenes una arriba de la otra */
    }

    .ap-split-column {
        width: 100%;
        height: 50vh; /* Cada imagen ocupa la mitad de la altura de la pantalla del móvil */
    }
}
/* --- FIX ESPECÍFICO PARA BOTONES DE ESTADO (FIIDO X) --- */

/* 1. Solo afecta a los botones de texto de esta sección */
.ap-state-selectors .ap-selector.ap-btn-state {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Dimensiones de botón principal */
    min-width: 160px !important; 
    height: 48px !important;
    padding: 0 20px !important;
    
    /* Colores de marca #001D35 */
    background-color: #ffffff !important;
    border: 1px solid #001D35 !important;
    border-radius: 8px !important;
    
    /* Texto */
    color: #001D35 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 2. El botón activo con el azul oscuro de marca */
.ap-state-selectors .ap-selector.ap-btn-state.active {
    background-color: #001D35 !important;
    color: #ffffff !important;
    border-color: #001D35 !important;
}

/* 3. Hover para estos botones */
.ap-state-selectors .ap-selector.ap-btn-state:hover:not(.active) {
    background-color: rgba(0, 29, 53, 0.05) !important;
    border-color: #001D35 !important;
}

/* --- REPARACIÓN DE ACCESORIOS (ICONOS PEQUEÑOS) --- */

/* Esto fuerza a que los accesorios vuelvan a su tamaño original 
   y no hereden los 160px de los botones de arriba */
.ap-acc-thumbs-selectors .ap-selector {
    min-width: 50px !important; 
    max-width: 50px !important;
    height: 50px !important;
    padding: 5px !important;
    border-radius: 6px !important;
    border: 1px solid #ddd !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Asegura que la imagen del accesorio no se estire */
.ap-acc-thumbs-selectors .ap-selector img {
    width: 35px !important;
    height: 35px !important;
    object-fit: contain !important;
}
/* Contenedor principal */
.ap-scroll-story {
    position: relative;
    width: 100%;
    background-color: #000; /* Fondo de seguridad */
}

/* Background Sticky */
.ap-story-background {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    overflow: hidden;
}

.ap-story-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Capa negra con opacidad (Overlay) */
.ap-story-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Oscurecemos un poco más para resaltar el blanco */
    z-index: 2;
}

/* Contenedor de los textos */
.ap-story-content {
    position: relative;
    z-index: 3;
    margin-top: -100vh; /* Solapamiento sobre el sticky */
}

/* Forzar blanco en todos los niveles del scroll */
.ap-story-step {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 10%;
    text-align: center;
    /* Reset de color global para esta sección */
    color: #ffffff !important; 
}

/* Títulos y Párrafos */
.ap-story-step h2, 
.ap-story-step h3, 
.ap-story-step h4, 
.ap-story-step p, 
.ap-story-step span {
    color: #ffffff !important; /* Garantía total de color blanco */
    margin-left: auto;
    margin-right: auto;
}

/* Ajustes de tamaño y espaciado */
.ap-step-title-large {
    font-size: clamp(26px, 4.5vw, 48px);
    line-height: 1.2;
    font-weight: 500;
    max-width: 1000px;
}

.ap-evolution-container {
    max-width: 850px;
    padding: 40px 0;
}

.ap-evolution-main-title {
    font-size: clamp(28px, 3.5vw, 40px);
    margin-bottom: 60px;
    font-weight: 600;
}

.ap-evolution-item {
    margin-bottom: 45px;
}

.ap-evolution-item h4 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: none; /* Mantener estilo original */
}

.ap-evolution-item p {
    font-size: 17px;
    line-height: 1.6;
    opacity: 0.95; /* Casi blanco total */
}

/* Responsive */
@media (max-width: 768px) {
    .ap-story-step {
        padding: 0 25px;
    }
    .ap-evolution-item {
        margin-bottom: 35px;
    }
}
.ap-comparison-section {
    padding: 60px 0 100px;
    /* CAMBIA ESTA LÍNEA */
    background-color: #f7f7f7 !important; 
    width: 100%;
}

.ap-comp-header {
    text-align: center;
    margin-bottom: 20px;
}

.ap-comp-title {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 500;
}

/* Imagen Full Width */
.ap-comp-full-image {
    width: 100%;
    margin-bottom: 40px;
}

.ap-comp-full-image img {
    width: 100%;
    height: auto;
    display: block;
    /* Ajusta si el PNG tiene mucho aire transparente a los lados */
    object-fit: contain; 
}

/* Contenedor de Tabla */
.ap-comp-table-container {
    max-width: 1100px; /* Ancho máximo para la tabla */
    margin: 0 auto;
}

.ap-comp-grid {
    display: flex;
    width: 100%;
}

.ap-comp-col {
    flex: 1;
    padding: 0 5% 0 0; /* Espaciado interno */
}

/* Divisor vertical entre columnas */
.ap-col-border-left {
    padding-left: 5% !important;
    padding-right: 0 !important;
    border-left: 1px solid #e5e5e5;
}

.ap-comp-model-name {
    font-size: 22px;
    font-weight: 500;
    padding: 30px 0;
    color: #000;
}

.ap-comp-row {
    padding: 22px 0;
    border-bottom: 1px solid #efefef;
    font-size: 16px;
    color: #444;
    min-height: 75px; /* Alineación perfecta de filas enfrentadas */
    display: flex;
    align-items: center;
}

.ap-comp-row strong {
    color: #000;
    font-weight: 600;
}

/* --- ADAPTACIÓN MOBILE --- */
@media (max-width: 768px) {
    .ap-comp-col {
        padding: 0 15px 0 0;
    }
    
    .ap-col-border-left {
        padding-left: 15px !important;
    }

    .ap-comp-model-name {
        font-size: 18px;
    }

    .ap-comp-row {
        font-size: 14px;
        min-height: 85px; /* Más altura por saltos de línea en móvil */
    }
}
/* --- ESTILOS GENERALES (Asegúrate de tener esto o similar) --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif; /* Cambia esto por la tipografía de tu web */
}

/* Contenedor estándar para centrar contenido */
.ap-container {
    width: 100%;
    max-width: 1440px; /* Ancho máximo opcional */
    margin: 0 auto;
    padding: 0 20px; /* Padding de seguridad lateral */
}


/* --- ESTILOS ESPECÍFICOS DEL HERO --- */
.ap-simple-hero {
    position: relative; /* Necesario para que el overlay se posicione correctamente */
    width: 100%;
    min-height: 80vh; /* Altura de la sección. Usamos vh (viewport height) */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Centrado Flexbox */
    display: flex;
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    
    /* Asegurar que el texto sea blanco */
    color: #ffffff;
    
    /* Padding para que el texto no toque bordes en mobile si es muy largo */
    padding: 80px 0; 
}

/* Capa Negra con Opacidad (Overlay) */
.ap-simple-hero::before {
    content: ""; /* Obligatorio para pseudo-elementos */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Color negro al 50% de opacidad. Ajusta el 0.5 si quieres más o menos oscuridad */
    z-index: 1; /* Se coloca detrás del texto */
}

/* Asegurar que el contenido del texto esté por encima de la capa negra */
.ap-hero-content-wrapper {
    position: relative;
    z-index: 2; /* Mayor que el z-index del overlay */
}

.ap-hero-text-container {
    max-width: 800px; /* Ancho máximo para el texto, para que sea legible */
    margin: 0 auto; /* Centrar la caja de texto */
    text-align: center; /* Centrar el texto por dentro */
}

/* Estilos de Título */
.ap-hero-title {
    font-size: clamp(32px, 5vw, 56px); /* Responsive font size: min, preferred, max */
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 24px;
    text-transform: none; /* Asegura que no se fuerce a mayúsculas si no quieres */
}

/* Estilos de Subtítulo */
.ap-hero-subtitle {
    font-size: clamp(16px, 1.3vw, 20px); /* Responsive font size */
    line-height: 1.6;
    font-weight: 400;
    opacity: 0.9; /* Un poco menos opaco para dar jerarquía */
    color: #FFFFFF;
}


/* --- ADAPTACIÓN PARA MOBILE --- */
@media (max-width: 768px) {
    .ap-simple-hero {
        min-height: 60vh; /* Un poco más bajito en mobile */
        padding: 60px 0;
    }
}
/* Forzamos que este contenedor específico no sea un grid aunque comparta clase */
.ap-title-fix {
    display: block !important; 
    margin-bottom: 30px !important;
    padding-top: 40px;
}

.ap-main-title-black {
    color: #000000 !important;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 600;
    text-align: left;
    margin: 0;
    line-height: 1.2;
	padding-left: 50px;
}

/* Ajuste responsive para mantener la alineación en móviles */
@media (max-width: 768px) {
    .ap-title-fix {
        padding-top: 20px;
        margin-bottom: 20px !important;
    }
}
/* --- SECTION ACCESORIOS FIIDO --- */
#ap-accesorios-grid {
    background-color: #ffffff;
}

.ap-accessories-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 por fila */
    gap: 60px;
    margin-top: 60px;
	
}

.ap-accessory-card {
    background: #fff;
    border-radius: 12px; /* Esquinas redondeadas suaves */
    border: 1px solid #f0f0f0; /* El borde muy finito gris que pediste */
    padding: 20px;
    transition: all 0.3s ease; /* Para que el sombreado aparezca suave */
    text-align: left;
    display: flex;
    flex-direction: column;
}

.ap-accessory-card:hover {
    border-color: #e0e0e0; /* El borde se oscurece apenas un toque */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); /* Sombreado muy sutil y elegante */
    transform: translateY(-5px); /* Pequeño salto hacia arriba para dar interacción */
}

.ap-accessory-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.ap-accessory-image {
    width: 100%;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
}

.ap-accessory-image img {
    max-width: 100%;
    height: auto;
}

.ap-accessory-card:hover img {
    transform: scale(1.05);
    margin-right: 40px;
}

.ap-accessory-info {
    padding: 15px 5px;
    text-align: left;
}

.ap-accessory-info h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #000;
}

.ap-accessory-price {
    display: block;
    font-size: 16px;
    color: #4CAF50; /* El verde que tenés en la captura */
    font-weight: 700;
    margin-bottom: 15px;
}

.ap-accessory-btn {
    display: inline-block;
    background-color: #001D35;
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: background 0.3s ease;
}

.ap-accessory-card:hover .ap-accessory-btn {
    background-color: #002d52; /* El botón también reacciona al hover de la tarjeta */
}

/* --- RESPONSIVE --- */

@media (max-width: 1100px) {
    .ap-accessories-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .ap-accessories-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .ap-accessories-wrapper {
        grid-template-columns: 1fr; /* 1 por fila en mobile */
    }
}
/* --- ESTILO ESPECÍFICO PARA LA PÁGINA DE ACCESORIOS --- */

/* 1. Solo cuando el body es #accesorios-page, la navbar es blanca y fija */
#accesorios-page .ap-navbar.ap-navbar-solid {
    background-color: #ffffff !important;
    position: fixed !important; 
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid #eeeeee;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* 2. Forzamos textos negros y logos originales (sin filtros) */
#accesorios-page .ap-navbar-solid .ap-top-link { 
    color: #000000 !important; 
}
#accesorios-page .ap-navbar-solid .ui-logo-img { 
    filter: none !important; 
}

/* 3. La hamburguesa del menú móvil en negro para que se vea */
#accesorios-page .ap-navbar-solid .hamburger,
#accesorios-page .ap-navbar-solid .hamburger::before,
#accesorios-page .ap-navbar-solid .hamburger::after {
    background-color: #000000 !important;
}

/* 4. LA CLAVE: Empujamos la sección de accesorios hacia abajo */
/* Esto evita que el menú tape el título "Accesorios para bicicletas..." */
#accesorios-page #ap-accesorios-grid {
    padding-top: 140px !important; 
}

/* 5. Aseguramos que el Mega Menú (desplegable) también sea blanco en esta página */
#accesorios-page .ap-navbar-solid .ap-mega-panel {
    top: 100% !important;
    background-color: #ffffff !important;
    border-top: 1px solid #eeeeee;
}/* --- LISTA DE ACCESORIOS CON LINKS --- */
.ap-accessories-list {
    margin: 25px 0;
    padding: 20px;
    border: 1px solid #eeeeee;
    border-radius: 15px;
    background-color: #ffffff;
}

.ap-acc-list-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #000;
}

.ap-acc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #f5f5f5;
    gap: 15px;
}

.ap-acc-row:last-child {
    border-bottom: none;
}

/* Contenedor del link (Imagen + Nombre) */
.ap-acc-link-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none !important; /* Quita el subrayado azul */
    flex-grow: 1;
}

.ap-acc-link-wrapper:hover .ap-acc-name {
    color: #ff0000; /* Opcional: un color de acento al pasar el mouse */
}

.ap-acc-img {
    width: 60px;
    height: 60px;
    background: #f9f9f9;
    border-radius: 8px;
    flex-shrink: 0;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.ap-acc-link-wrapper:hover .ap-acc-img {
    transform: scale(1.05);
}

.ap-acc-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ap-acc-name {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: #333;
    transition: color 0.2s ease;
}

.ap-acc-price-column {
    flex-shrink: 0;
}

.ap-acc-price-wrapper {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.ap-acc-price {
    font-size: 15px;
    font-weight: 700;
    color: #000;
}

/* Badge de Incluido */
.ap-acc-badge {
    display: none;
    background-color: #59a859;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 2px;
}

/* Estado Incluido */
.ap-acc-row.is-included .ap-acc-badge {
    display: inline-block;
}

.ap-acc-row.is-included .ap-acc-price {
    text-decoration: line-through;
    color: #999;
    font-weight: 400;
}

/* Mobile */
@media (max-width: 576px) {
    .ap-acc-name {
        font-size: 14px;
    }
}
/* ============================================================
   LAYOUT DE PRODUCTO (STICKY DESKTOP + RESPONSIVE MOBILE)
   ============================================================ */

/* Contenedor Principal */
.ap-product-main-grid {
    display: flex;
    align-items: flex-start; /* Permite que el sticky funcione */
    gap: 50px;
    position: relative;
    width: 100%;
    margin-bottom: 50px;
}

/* --- COLUMNA IZQUIERDA (Galería de Fotos) --- */
.ap-left-sticky-col {
    flex: 0 0 60%; /* No se encoge, se mantiene al 60% */
    position: sticky;
    top: 120px; /* Espacio para que no tape el menú blanco */
    height: fit-content;
}

/* --- COLUMNA DERECHA (Información y Accesorios) --- */
.ap-product-info {
    flex: 1; /* Toma todo el 40% restante */
    min-width: 0; /* Evita desbordamientos */
    display: flex;
    flex-direction: column;
}

/* Ajustes de los elementos internos de la derecha */
.ap-product-title {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 5px;
}

.ap-product-price-large {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 25px;
}

/* Caja de Accesorios (Checklist) */
.ap-accessories-list {
    width: 100%;
    margin: 25px 0;
    padding: 20px;
    border: 1px solid #eeeeee;
    border-radius: 15px;
    background-color: #ffffff;
    box-sizing: border-box;
}

/* Botón Primary Fiido (Brochure) */
.btn-primary-fiido {
    display: block;
    width: 100%;
    background-color: #001D35;
    color: #fff !important;
    text-align: center;
    padding: 18px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: background 0.3s ease;
    margin-top: 10px;
}

.btn-primary-fiido:hover {
    background-color: #002d52;
}

/* --- VERSIÓN MOBILE (HASTA 991PX) --- */
@media (max-width: 991px) {
    
    .ap-product-main-grid {
        flex-direction: column; /* Apila una columna sobre otra */
        gap: 30px;
    }

    /* La imagen deja de ser fija y ocupa todo el ancho */
    .ap-left-sticky-col {
        flex: none;
        width: 100%;
        position: relative !important;
        top: 0 !important;
    }

    /* La info ocupa todo el ancho sin márgenes raros */
    .ap-product-info {
        width: 100%;
        flex: none;
        padding: 0 15px; /* Aire a los costados para que no toque el borde del cel */
        box-sizing: border-box;
    }

    /* Ajuste de fuentes para celular */
    .ap-product-title {
        font-size: 32px;
    }

    .ap-product-price-large {
        font-size: 24px;
    }
    
    /* El botón de brochure siempre cómodo abajo */
    .btn-primary-fiido {
        margin-bottom: 40px;
    }
}
/* BARRA AZUL SUPERIOR */
#barra-emergente-distribuidor {
    background-color: #001D35;
    width: 100%;
    height: 0; /* Cerrada al inicio */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: height 0.3s ease;
}

#barra-emergente-distribuidor a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 4px;
    white-space: nowrap;
}

/* EFECTO AL HACER SCROLL */
/* El header se mantiene arriba y la barra se desliza */
#main-header.is-sticky #barra-emergente-distribuidor {
    height: 50px; /* Se abre suavemente */
}

/* Ajuste necesario para que el header sea el bloque sticky */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    display: flex;
    flex-direction: column; /* Apila barra y nav */
}
/* Contenedor de créditos */
.ap-credits {
    font-size: 11px; /* Más chico que el principal */
    color: rgba(255, 255, 255, 0.4); /* Blanco muy sutil/transparente */
    margin-top: 8px;
    text-align: center;
    letter-spacing: 0.5px;
    font-weight: 300;
}

/* Estilo del link */
.ap-credits a {
    color: rgba(255, 255, 255, 0.5); /* Un poquito más de luz al nombre */
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent; /* Para un efecto de subrayado suave */
}

/* Hover sutil */
.ap-credits a:hover {
    color: #ffffff; /* Se ilumina al pasar el mouse */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}