.ct-section {
width:100%;
background-size:cover;
background-repeat:repeat;
}
.ct-section>.ct-section-inner-wrap {
display:flex;
flex-direction:column;
align-items:flex-start;
}
.ct-div-block {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.ct-new-columns {
display:flex;
width:100%;
flex-direction:row;
align-items:stretch;
justify-content:center;
flex-wrap:wrap;
}
.ct-link-text {
display:inline-block;
}
.ct-link {
display:flex;
flex-wrap:wrap;
text-align:center;
text-decoration:none;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-link-button {
display:inline-block;
text-align:center;
text-decoration:none;
}
.ct-link-button {
background-color: #1e73be;
border: 1px solid #1e73be;
color: #ffffff;
padding: 10px 16px;
}
.ct-image {
max-width:100%;
}
.ct-fancy-icon>svg {
width:55px;height:55px;}
.ct-inner-content {
width:100%;
}
.ct-slide {
display:flex;
flex-wrap:wrap;
text-align:center;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-nestable-shortcode {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-comments {
width:100%;
text-align:left;
}
.oxy-comment-form {
width:100%;
}
.oxy-login-form {
width:100%;
}
.oxy-search-form {
width:100%;
}
.oxy-tabs-contents {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab-content {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-testimonial {
width:100%;
}
.oxy-icon-box {
width:100%;
}
.oxy-pricing-box {
width:100%;
}
.oxy-posts-grid {
width:100%;
}
.oxy-gallery {
width:100%;
}
.ct-slider {
width:100%;
}
.oxy-tabs {
display:flex;
flex-wrap:nowrap;
flex-direction:row;
align-items:stretch;
}
.ct-modal {
flex-direction:column;
align-items:flex-start;
}
.ct-span {
display:inline-block;
text-decoration:inherit;
}
.ct-widget {
width:100%;
}
.oxy-dynamic-list {
width:100%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
			.ct-div-block,
			.oxy-post-content,
			.ct-text-block,
			.ct-headline,
			.oxy-rich-text,
			.ct-link-text { max-width: 100%; }
			img { flex-shrink: 0; }
			body * { min-height: 1px; }
		}            .oxy-testimonial {
                flex-direction: row;
                align-items: center;
            }
                        .oxy-testimonial .oxy-testimonial-photo-wrap {
                order: 1;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo {
                width: 125px;                height: 125px;                margin-right: 20px;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo-wrap, 
            .oxy-testimonial .oxy-testimonial-author-wrap, 
            .oxy-testimonial .oxy-testimonial-content-wrap {
                align-items: flex-start;                text-align: left;            }
            
                                                            .oxy-testimonial .oxy-testimonial-text {
                margin-bottom:8px;font-size: 21px;
line-height: 1.4;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
                                    .oxy-testimonial .oxy-testimonial-author {
                font-size: 18px;
-webkit-font-smoothing: subpixel-antialiased;
            }
                            

                                                .oxy-testimonial .oxy-testimonial-author-info {
                font-size: 12px;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
             
            
                        .oxy-icon-box {
                text-align: left;                flex-direction: column;            }
            
                        .oxy-icon-box .oxy-icon-box-icon {
                margin-bottom: 12px;
                align-self: flex-start;            }
            
                                                                        .oxy-icon-box .oxy-icon-box-heading {
                font-size: 21px;
margin-bottom: 12px;            }
            
                                                                                    .oxy-icon-box .oxy-icon-box-text {
                font-size: 16px;
margin-bottom: 12px;align-self: flex-start;            }
            
                        .oxy-icon-box .oxy-icon-box-link {
                margin-top: 20px;                            }
            
            
            /* GLOBALS */

                                                            .oxy-pricing-box .oxy-pricing-box-section {
                padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: center;            }
                        
                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                justify-content: center;            }
            
            /* IMAGE */
                                                                                    .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-graphic {
                justify-content: center;            }
            
            /* TITLE */
                                                            
                                    .oxy-pricing-box .oxy-pricing-box-title-title {
                font-size: 48px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-title-subtitle {
                font-size: 24px;
            }
            

            /* PRICE */
                                                .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                                                flex-direction: row;                                            }
            
                                    .oxy-pricing-box .oxy-pricing-box-currency {
                font-size: 28px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-main {
                font-size: 80px;
line-height: 0.7;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-decimal {
                font-size: 13px;
            }
                        
                                    .oxy-pricing-box .oxy-pricing-box-term {
                font-size: 16px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-sale-price {
                font-size: 12px;
color: rgba(0,0,0,0.5);
                margin-bottom: 20px;            }
            
            /* CONTENT */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-content {
                font-size: 16px;
color: rgba(0,0,0,0.5);
            }
            
            /* CTA */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-cta {
                justify-content: center;            }
            
        
                                .oxy-progress-bar .oxy-progress-bar-background {
            background-color: #000000;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);            animation: none 0s paused;        }
                
                .oxy-progress-bar .oxy-progress-bar-progress-wrap {
            width: 85%;        }
        
                                                        .oxy-progress-bar .oxy-progress-bar-progress {
            background-color: #66aaff;padding: 40px;animation: none 0s paused, none 0s paused;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);        
        }
                
                        .oxy-progress-bar .oxy-progress-bar-overlay-text {
            font-size: 30px;
font-weight: 900;
-webkit-font-smoothing: subpixel-antialiased;
        }
        
                        .oxy-progress-bar .oxy-progress-bar-overlay-percent {
            font-size: 12px;
        }
        
        .ct-slider .unslider-nav ol li {border-color: #ffffff; }.ct-slider .unslider-nav ol li.unslider-active {background-color: #ffffff; }.ct-slider .ct-slide {
				padding: 0px;			}
		
                        .oxy-superbox .oxy-superbox-secondary, 
            .oxy-superbox .oxy-superbox-primary {
                transition-duration: 0.5s;            }
            
            
            
            
            
        
        
        
        
            .oxy-shape-divider {
                width: 0px;
                height: 0px;
                
            }
            
            .oxy_shape_divider svg {
                width: 100%;
            }
            .oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu{
box-shadow:px px px px ;}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a div{
margin-left:0px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
width:30px;
height:30px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon{
padding-top:15px;
padding-right:15px;
padding-bottom:15px;
padding-left:15px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon, .oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon{
top:20px;
left:20px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
width:24px;
height:24px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon, .oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container{
background-color:#ffffff;
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-open-container{
background-image:url();
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item-has-children > a svg, .oxy-pro-menu .oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item-has-children > a svg{
font-size:24px;
}

.oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-open-container .menu-item-has-children ul, .oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-off-canvas-container .menu-item-has-children ul{
background-color:rgba(0,0,0,0.2);
border-top-style:solid;
}

.oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .oxy-pro-menu-list{
                    flex-direction: row;
               }
.oxy-pro-menu .oxy-pro-menu-container .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .menu-item, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .menu-item{
                    align-items: flex-start;
                }

            .oxy-pro-menu .oxy-pro-menu-off-canvas-container{
                    top: 0;
                    bottom: 0;
                    right: auto;
                    left: 0;
               }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item a, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }

            .oxy-site-navigation {
--oxynav-brand-color:#4831B0;
--oxynav-neutral-color:#FFFFFF;
--oxynav-activehover-color:#EFEDF4;
--oxynav-background-color:#4831B0;
--oxynav-border-radius:0px;
--oxynav-other-spacing:8px;
--oxynav-transition-duration:0.3s;
--oxynav-transition-timing-function:cubic-bezier(.84,.05,.31,.93);
}

.oxy-site-navigation .oxy-site-navigation__mobile-close-wrapper{
text-align:left;
}

.oxy-site-navigation > ul{ left: 0; }
.oxy-site-navigation {
                        --oxynav-animation-name: none; 
                    }

                .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1){ 
                    background-color: var(--oxynav-brand-color);
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                    border: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2){ 
                    background: transparent;
                    border: 1px solid currentColor;
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2):not(:hover) > img{
                    filter: invert(0) !important;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover{
                    background-color: var(--oxynav-activehover-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a{
                    color: var(--oxynav-neutral-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a::after{
                    color: var(--oxynav-neutral-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > button, .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }

                .ct-section-inner-wrap, .oxy-header-container{
  max-width: 1120px;
}
body {font-family: 'JetBrains Mono';}body {line-height: 1.6;font-size: 16px;font-weight: 400;color: #404040;}.oxy-nav-menu-hamburger-line {background-color: #404040;}h1, h2, h3, h4, h5, h6 {font-family: 'Bebas Neue';font-size: 30px;font-weight: 500;}h2, h3, h4, h5, h6{font-size: 26px;font-weight: 100;}h3, h4, h5, h6{font-size: 23px;}h4, h5, h6{font-size: 16px;}h5, h6{font-size: 16px;}h6{font-size: 16px;}a {color: #000000;font-weight: 600;text-decoration: none;}a:hover {text-decoration: none;}.ct-link-text {color: color(14);text-decoration: ;}.ct-link {color: color(4);text-decoration: ;}.ct-link-button {border-radius: 3px;}.ct-section-inner-wrap {
padding-top: 75px;
padding-right: 20px;
padding-bottom: 75px;
padding-left: 20px;
}.ct-new-columns > .ct-div-block {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}.oxy-header-container {
padding-right: 20px;
padding-left: 20px;
}@media (max-width: 992px) {
				.ct-columns-inner-wrap {
					display: block !important;
				}
				.ct-columns-inner-wrap:after {
					display: table;
					clear: both;
					content: "";
				}
				.ct-column {
					width: 100% !important;
					margin: 0 !important;
				}
				.ct-columns-inner-wrap {
					margin: 0 !important;
				}
			}
.oxel_iconlist {
}
.oxel_iconlist__row {
 padding-top:8px;
 padding-left:8px;
 padding-right:8px;
 padding-bottom:8px;
 width:100%;
 margin-top:0px;
}
.oxel_iconlist__row:not(.ct-section):not(.oxy-easy-posts),
.oxel_iconlist__row.oxy-easy-posts .oxy-posts,
.oxel_iconlist__row.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.oxel_iconlist__row__icon {
color: color(26);}.oxel_iconlist__row__icon 
>svg {width: 18px;height: 18px;}.oxel_iconlist__row__icon {
 margin-left:32px;
 margin-right:32px;
}
.oxel_iconlist__row__label {
}
.oxel_iconlist__row--dark {
 background-color:color(25);
}
.agencyb-heading-one {
 font-family:Bebas Neue;
 color:color(41);
 font-weight:700;
 font-size:64px;
 line-height:1;
}
@media (max-width: 767px) {
.agencyb-heading-one {
 font-size:64px;
}
}

@media (max-width: 479px) {
.agencyb-heading-one {
 font-size:56px;
}
}

.btn {
}
.secondary {
}
.text-primary {
}
.bg-body {
}
.margin-bottom-s {
}
.margin-bottom-m {
}
.gap-s {
}
.text-s {
}
.text-l {
 text-align:left;
}
.row {
}
.column--on-s {
}
.content-center {
}
.full-width {
}
.opacity-60 {
}
.oxel_logo_slider {
 width:100%;
 position:relative;
 overflow:hidden;
 background-color:#ffffff;
 text-align:center;
}
.oxel_logo_slider:not(.ct-section):not(.oxy-easy-posts),
.oxel_logo_slider.oxy-easy-posts .oxy-posts,
.oxel_logo_slider.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
.oxel_logo_slider__logo {
 transition-duration:0.3s;
 transition-timing-function:ease-in-out;
 width:20%;
 height:100px;
 text-align:center;
 padding-top:16px;
 padding-left:16px;
 padding-right:16px;
 padding-bottom:16px;
}
.oxel_logo_slider__logo:not(.ct-section):not(.oxy-easy-posts),
.oxel_logo_slider__logo.oxy-easy-posts .oxy-posts,
.oxel_logo_slider__logo.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.oxel_logo_slider__image_carrier {
 width:100%;
 text-align:left;
 flex-shrink:0;
 transition-duration:0.1s;
 transition-timing-function:linear;
}
.oxel_logo_slider__image_carrier:not(.ct-section):not(.oxy-easy-posts),
.oxel_logo_slider__image_carrier.oxy-easy-posts .oxy-posts,
.oxel_logo_slider__image_carrier.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:flex-start;
}
.oxel_logo_slider__image_carrier--delay {
}
.link {
}
.card {
 background-color:color(4);
 padding-top:0px;
 padding-left:0px;
 padding-right:0px;
 padding-bottom:0px;
 border-radius:1%;
 border-top-color:#e6e6e6;
 border-right-color:#e6e6e6;
 border-bottom-color:#e6e6e6;
 border-left-color:#e6e6e6;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-width:2px;
 border-right-width:2px;
 border-bottom-width:2px;
 border-left-width:2px;
 text-align:left;
}
.card:not(.ct-section):not(.oxy-easy-posts),
.card.oxy-easy-posts .oxy-posts,
.card.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
}
@media (max-width: 1120px) {
.card {
 height:auto;
}
}

@media (max-width: 991px) {
.card {
 height:auto;
 text-align:left;
}
.card:not(.ct-section):not(.oxy-easy-posts),
.card.oxy-easy-posts .oxy-posts,
.card.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:space-around;
}
}

@media (max-width: 767px) {
.card {
 text-align:left;
 margin-top:0px;
 height:auto;
 width:40vw;
}
.card:not(.ct-section):not(.oxy-easy-posts),
.card.oxy-easy-posts .oxy-posts,
.card.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:space-between;
}
}

@media (max-width: 479px) {
.card {
 width:41vw;
 margin-left:0px;
 margin-right:0px;
 height:auto;
}
.card:not(.ct-section):not(.oxy-easy-posts),
.card.oxy-easy-posts .oxy-posts,
.card.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
}
}

.bg-surface {
}
.text-body {
}
.padding-l {
}
.gap-l {
}
.columns-2 {
}
.columns-3 {
}
.columns-2--on-l {
}
.column--on-m {
}
.col-span-2 {
}
.col-span-1--on-m {
}
.items-stretch {
}
.radius-m {
}
.shadow-m {
}
.overflow-hidden {
}
.transition-global {
}
.oxel_dropdown_buttonv2__trigger {
 padding-top:8px;
 padding-bottom:8px;
 padding-left:16px;
 padding-right:16px;
 background-color:#374047;
 border-top-style:none;
 border-right-style:none;
 border-bottom-style:none;
 border-left-style:none;
 position:relative;
cursor: pointer;
}
.oxel_dropdown_buttonv2__trigger:not(.ct-section):not(.oxy-easy-posts),
.oxel_dropdown_buttonv2__trigger.oxy-easy-posts .oxy-posts,
.oxel_dropdown_buttonv2__trigger.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.oxel_dropdown_buttonv2 {
 background-color:#374047;
 position:relative;
 width:min-content ;
}
.oxel_dropdown_buttonv2:not(.ct-section):not(.oxy-easy-posts),
.oxel_dropdown_buttonv2.oxy-easy-posts .oxy-posts,
.oxel_dropdown_buttonv2.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.oxel_dropdown_buttonv2__submenu {
 position:absolute;
 left:0px;
 min-width:100%;
 padding-top:4px;
 width:200px;
 z-index:10;
 top:100%;
padding-inline-start: 0; margin-block-start: 0; margin-block-end: 0;
}
.oxel_dropdown_buttonv2__submenu--hidden {
 opacity:0;
pointer-events: none;
}
.oxel_dropdown_buttonv2__submenu--hidden:not(.ct-section):not(.oxy-easy-posts),
.oxel_dropdown_buttonv2__submenu--hidden.oxy-easy-posts .oxy-posts,
.oxel_dropdown_buttonv2__submenu--hidden.ct-section .ct-section-inner-wrap{
display:none;
}
.oxel_dropdown_buttonv2__submenubutton:hover{
 background-color:#dee1e3;
}
.oxel_dropdown_buttonv2__submenubutton {
 text-align:left;
 background-color:#eceeef;
 min-width:100%;
 color:#374047;
 transition-duration:0.3s;
 transition-timing-function:ease-in-out;
}
.oxel_dropdown_buttonv2__submenubutton:not(.ct-section):not(.oxy-easy-posts),
.oxel_dropdown_buttonv2__submenubutton.oxy-easy-posts .oxy-posts,
.oxel_dropdown_buttonv2__submenubutton.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
}
.oxel_dropdown_buttonv2__submenulabel {
 padding-top:8px;
 padding-bottom:8px;
 padding-left:16px;
 padding-right:16px;
 width:100%;
 color:#374047;
}
.oxel_dropdown_buttonv2__label {
 color:#f9f9fa;
white-space: nowrap;
}
.oxel_dropdown_buttonv2__symbol {
background-image: linear-gradient(135deg, rgba(0,0,0,0) 50%, #ffffff 50%);transform:rotate(45deg); width:8px;
 height:8px;
 margin-top:-4px;
 margin-left:16px;
min-width: 0 !important; min-height: 0 !important;
}
.icon {
background-color: color(9);
border: 1px solid color(9);
padding: 15px;color: color(4);}.icon 
>svg {width: 40px;height: 40px;}.icon {
}
@media (max-width: 479px) {
.icon {
padding: 13px;}.icon 
>svg {width: 32px;height: 32px;}.icon {
 margin-top:0px;
 margin-left:0px;
 margin-right:0px;
 margin-bottom:0px;
}
}

.logo {
 width:auto;
 max-height:35px;
}
@media (max-width: 991px) {
.logo {
 width:auto;
 height:30px;
}
}

@media (max-width: 767px) {
}

.c-overlay-subheader {
background-image:linear-gradient(rgba(15,15,15,0.75), rgba(15,15,15,0.75));}
.c-overlay-header {
background-image:linear-gradient(#0f0f0f, #0f0f0f);}
.small {
}
.text-light {
}
.margin-right-m {
}
.gap-4xs {
}
.gap-xs {
}
.font-400 {
}
.flex-row {
}
.items-middle {
}
.btn--icon {
color: currentColor;}.btn--icon 
>svg {width: 20px;height: 20px;}.btn--icon {
}
.c-menu-link:hover{
 color:#ffa500;
}
.c-menu-link {
 font-size:14px;
 font-weight:500;
 color:#686868;
white-space:nowrap;
}
.c-menu-link:not(.ct-section):not(.oxy-easy-posts),
.c-menu-link.oxy-easy-posts .oxy-posts,
.c-menu-link.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.c-menu {
 transition-duration:0.6s;
}
.c-menu:not(.ct-section):not(.oxy-easy-posts),
.c-menu.oxy-easy-posts .oxy-posts,
.c-menu.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
@media (max-width: 991px) {
.c-menu {
 background-color:#f9f9f9;
}
}

@media (max-width: 767px) {
}

.c-menu-open {
 text-align:center;
}
.c-menu-open:not(.ct-section):not(.oxy-easy-posts),
.c-menu-open.oxy-easy-posts .oxy-posts,
.c-menu-open.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
@media (max-width: 991px) {
.c-menu-open {
 width:100%;
 text-align:left;
}
.c-menu-open:not(.ct-section):not(.oxy-easy-posts),
.c-menu-open.oxy-easy-posts .oxy-posts,
.c-menu-open.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
}
}

.c-header-mobile-toggle {
}
@media (max-width: 991px) {
.c-header-mobile-toggle {
 padding-left:0px;
}
}

.c-submenu-1 {
 position:absolute;
 left:0px;
 top:100%;
 overflow:hidden;
 transition-duration:.6s;
 max-height:0px;
 width:100%;
 text-align:center;
 padding-left:20px;
 padding-right:20px;
 background-color:var(--bg-body);
 box-shadow:0px 10px 10px rgba(0,0,0,0.05);
/* Enable hardware acceleration to fix laggy transitions */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0);
}
.c-submenu-1:not(.ct-section):not(.oxy-easy-posts),
.c-submenu-1.oxy-easy-posts .oxy-posts,
.c-submenu-1.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
@media (max-width: 991px) {
.c-submenu-1 {
 position:relative;
 padding-top:0%;
 padding-left:0px;
 padding-right:0px;
 padding-bottom:0%;
 max-height:10000px;
 box-shadow:0px 0px 0px 0px rgba(0,0,0,0);
}
}

.c-menu-dropdown {
}
.padding-m {
}
.gap-m {
}
.font-600 {
}
.columns-5 {
}
.col-span-1--on-l {
}
.c-tagline {
 font-size:12px;
 letter-spacing:2px;
 text-transform:uppercase;
 font-weight:500;
}
.margin-bottom-l {
}
.columns-4 {
}
.oxel_accordion {
 border-top-color:#adb4b9;
 border-right-color:#adb4b9;
 border-bottom-color:#adb4b9;
 border-left-color:#adb4b9;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-top-style:none;
 border-right-style:none;
 border-bottom-style:none;
 border-left-style:none;
}
.oxel_accordion__row {
 font-family:JetBrains Mono;
 width:100%;
 padding-top:12px;
 padding-left:8px;
 padding-right:8px;
 padding-bottom:12px;
 text-align:justify;
 border-bottom-color:#eceeef;
 border-bottom-width:1px;
 border-bottom-style:solid;
 border-top-style:none;
 background-color:#f9f9fa;
 border-right-style:none;
 border-left-style:none;
 font-weight:600;
cursor: pointer;
}
.oxel_accordion__row:not(.ct-section):not(.oxy-easy-posts),
.oxel_accordion__row.oxy-easy-posts .oxy-posts,
.oxel_accordion__row.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
justify-content:space-between;
}
.oxel_accordion__icon {
color: #374047;}.oxel_accordion__icon 
>svg {width: 18px;height: 18px;}.oxel_accordion__icon {
 margin-right:8px;
 transition-duration:0.3s;
}
.oxel_accordion__row_left {
}
.oxel_accordion__row_left:not(.ct-section):not(.oxy-easy-posts),
.oxel_accordion__row_left.oxy-easy-posts .oxy-posts,
.oxel_accordion__row_left.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.oxel_accordion__content {
 width:100%;
 padding-top:8px;
 padding-left:8px;
 padding-right:8px;
 padding-bottom:8px;
 border-bottom-color:#98a1a8;
 border-bottom-width:2px;
 border-bottom-style:none;
 overflow:hidden;
 opacity:1;
 transition-duration:3s;
 border-top-style:none;
 border-right-style:none;
 border-left-style:none;
 transition-property:max-height;
 text-align:left;
 max-height:3000px;
 margin-top:0px;
}
.oxel_accordion__content:not(.ct-section):not(.oxy-easy-posts),
.oxel_accordion__content.oxy-easy-posts .oxy-posts,
.oxel_accordion__content.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
}
.oxel_accordion__content__hidden {
 max-height:0px;
 padding-left:8px;
 padding-right:8px;
 padding-top:0px;
 z-index:-1;
 padding-bottom:0px;
 transition-duration:0s;
}
.oxel_accordion__content__hidden:not(.ct-section):not(.oxy-easy-posts),
.oxel_accordion__content__hidden.oxy-easy-posts .oxy-posts,
.oxel_accordion__content__hidden.ct-section .ct-section-inner-wrap{
display:flex;
}
.oxel_accordion__row__label {
}
.c-custom--quote:before{
 position:absolute;
 content:"\"";
 font-size:200px;
 line-height:1;
 top:-30px;
 left:-30px;
 color:var(--dark-10);
}
.c-custom--quote {
 position:relative;
}
.avatar {
}
.padding-xl {
}
.margin-bottom-xl {
}
.text-2xl {
}
.font-500 {
}
.self-right {
}
.no-bg {
}
.bg-primary {
}
.text-title-overlay {
}
.text-dark {
}
.text-xl {
}
.font-300 {
}
.max-width-60 {
}
.tabs-4714-tab:hover{
 opacity:0.8;
}
.tabs-4714-tab {
 font-size:14px;
 font-weight:600;
 padding-top:12px;
 padding-bottom:12px;
 padding-left:36px;
 padding-right:36px;
 opacity:0.5;
 transition-duration:0.6s;
 color:var(--dark);
}
@media (max-width: 767px) {
.tabs-4714-tab {
 font-size:12px;
 padding-top:8px;
 padding-left:16px;
 padding-right:16px;
 padding-bottom:8px;
}
}

.tabs-4714-tab-active {
 border-radius:100px;
 background-color:var(--bg-surface);
 opacity:1;
 transition-duration:0.4s;
 transition-delay:0.2s;
 color:var(--primary);
 box-shadow:0px 5px 15px -5px rgba(0,0,0,0.15);
}
.tabs-contents-4714-tab {
 padding-top:0px;
 padding-left:0px;
 padding-right:0px;
 padding-bottom:0px;
}
.tiny-divider {
}
.padding-s {
}
.text-center {
}
.column--on-l {
}
.opacity-70 {
}
.relative {
}
.outline {
}
.large {
}
.bg-secondary-20 {
}
.padding-top-m {
}
.padding-bottom-m {
}
.gap-xl {
}
.flex-column {
}
.z-10 {
}
.c-bg-light {
 background-color:#f9f9f9;
}
.c-margin-bottom-m {
}
@media (max-width: 1120px) {
}

@media (max-width: 991px) {
}

.c-margin-bottom-s {
}
.c-rounded {
 border-radius:7px;
 overflow:hidden;
}
.c-shadow {
 box-shadow:0px 5px 15px rgba(0,0,0,0.08);
}
.c-bg-light-alt {
 background-color:#ffffff;
}
.c-h3 {
 font-weight:600;
 line-height:1.3;
}
@media (max-width: 991px) {
}

@media (max-width: 767px) {
}

@media (max-width: 479px) {
}

.c-heading-dark {
 color:#0f0f0f;
}
.c-text-m {
 font-weight:300;
 line-height:1.6;
}
@media (max-width: 1120px) {
}

@media (max-width: 767px) {
}

@media (max-width: 479px) {
}

.c-text-dark {
 color:#686868;
}
.c-text-s {
 font-weight:300;
}
.c-columns-m-1 {
}
@media (max-width: 767px) {
.c-columns-m-1 {
}
.c-columns-m-1:not(.ct-section):not(.oxy-easy-posts),
.c-columns-m-1.oxy-easy-posts .oxy-posts,
.c-columns-m-1.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
}
}

.c-transition {
 transition-duration:0.4s;
}
@media (max-width: 1120px) {
}

.c-h4 {
 font-weight:600;
 line-height:1.3;
}
@media (max-width: 479px) {
}

.c-columns-gap-l {
}
.c-margin-bottom-xs {
}
.c-link-m:hover{
 opacity:0.8;
}
.c-link-m {
 font-size:16px;
 font-weight:500;
 text-decoration:none;
}
.c-link-m:not(.ct-section):not(.oxy-easy-posts),
.c-link-m.oxy-easy-posts .oxy-posts,
.c-link-m.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
@media (max-width: 767px) {
.c-link-m {
}
}

@media (max-width: 479px) {
.c-link-m {
 font-size:14px;
}
}

.c-padding-l {
}
@media (max-width: 1120px) {
}

@media (max-width: 767px) {
}

.c-bg-accent-alt {
 background-color:#efefef;
}
.c-link-accent {
 color:#ffa500;
}
.c-columns-2-1 {
}
.c-margin-right-s {
}
@media (max-width: 767px) {
}

.c-link-s {
 font-size:13px;
 font-weight:600;
}
.c-link-s:not(.ct-section):not(.oxy-easy-posts),
.c-link-s.oxy-easy-posts .oxy-posts,
.c-link-s.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.c-center {
 text-align:center;
}
.c-center:not(.ct-section):not(.oxy-easy-posts),
.c-center.oxy-easy-posts .oxy-posts,
.c-center.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
.c-icon-accent-s {
color: #ffa500;}.c-icon-accent-s 
>svg {width: 18px;height: 18px;}.c-icon-accent-s {
}
.c-columns-blog-grid-1 {
}
.c-blog-recent-2 {
 text-align:left;
}
.c-blog-recent-2:not(.ct-section):not(.oxy-easy-posts),
.c-blog-recent-2.oxy-easy-posts .oxy-posts,
.c-blog-recent-2.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
}
.c-blog-recent-2-excerpt {
}
.c-blog-recent-2-content {
 text-align:left;
 height:100%;
 width:100%;
}
.c-blog-recent-2-content:not(.ct-section):not(.oxy-easy-posts),
.c-blog-recent-2-content.oxy-easy-posts .oxy-posts,
.c-blog-recent-2-content.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
}
@media (max-width: 991px) {
.c-blog-recent-2-content {
}
}

.c-h1-fat {
 font-weight:700;
 font-size:65px;
 line-height:1.2;
 max-width:800px;
}
@media (max-width: 1120px) {
.c-h1-fat {
 font-size:55px;
}
}

@media (max-width: 991px) {
.c-h1-fat {
 font-size:45px;
}
}

@media (max-width: 479px) {
.c-h1-fat {
 font-size:40px;
}
}

.c-text-l {
 font-weight:400;
 line-height:1.6;
 font-size:40px;
}
@media (max-width: 991px) {
}

@media (max-width: 767px) {
}

.c-max-width-640 {
 max-width:640px;
}
.c-heading-light {
 color:#ffffff;
}
.c-text-light {
 color:#ffffff;
}
.c-icon-light-m {
color: #ffffff;}.c-icon-light-m 
>svg {width: 24px;height: 24px;}.c-icon-light-m {
}
.c-hero-14 {
background-image:linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)), url(https://www.darkviolet-turtle-895047.hostingersite.com/wp-content/uploads/2024/10/Colorful-Spotlight-4-scaled.jpg); text-align:center;
 position:relative;
 height:100vh;
 background-attachment:fixed;
 background-color:var(--primary);
}
.c-hero-14:not(.ct-section):not(.oxy-easy-posts),
.c-hero-14.oxy-easy-posts .oxy-posts,
.c-hero-14.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
@media (max-width: 991px) {
.c-hero-14 {
 background-attachment:scroll;
}
}

.c-icon-hero-position {
 position:absolute;
 bottom:25px;
}
.c-columns-3 {
}
.c-full-width {
 width:100%;
}
.c-margin-bottom-l {
}
@media (max-width: 767px) {
}

@media (max-width: 479px) {
}

.c-h2 {
 font-weight:600;
 line-height:1.3;
 text-transform:capitalize;
}
@media (max-width: 1120px) {
}

@media (max-width: 991px) {
}

@media (max-width: 767px) {
}

@media (max-width: 479px) {
}

.c-icon-accent-m {
color: #ffa500;}.c-icon-accent-m 
>svg {width: 24px;height: 24px;}.c-icon-accent-m {
}
.c-left {
 text-align:left;
}
.c-left:not(.ct-section):not(.oxy-easy-posts),
.c-left.oxy-easy-posts .oxy-posts,
.c-left.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
}
.c-card-has-hover:hover{
transform:translateY(-7px);}
.c-card-has-hover {
}
.wc-subfooter-1 {
 background-color:var(--dark);
 text-align:justify;
}
.wc-subfooter-1 .ct-section-inner-wrap {
padding-top: 10px;
padding-bottom: 10px;
}
.wc-subfooter-1:not(.ct-section):not(.oxy-easy-posts),
.wc-subfooter-1.oxy-easy-posts .oxy-posts,
.wc-subfooter-1.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;
}
@media (max-width: 479px) {
.wc-subfooter-1 {
 text-align:justify;
}
.wc-subfooter-1:not(.ct-section):not(.oxy-easy-posts),
.wc-subfooter-1.oxy-easy-posts .oxy-posts,
.wc-subfooter-1.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
}
}

.wc-social-row {
 text-align:center;
}
.wc-social-row:not(.ct-section):not(.oxy-easy-posts),
.wc-social-row.oxy-easy-posts .oxy-posts,
.wc-social-row.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
.wc-follow-dark:hover{
 opacity:0.6;
}
.wc-follow-dark {
color: var(--primary);}.wc-follow-dark 
>svg {width: 16px;height: 16px;}.wc-follow-dark {
 margin-left:5px;
 margin-top:5px;
 margin-right:5px;
 margin-bottom:5px;
}
.margin-right-xs {
}
.padding-right-m {
}
.whatsapp-button {
position: fixed; bottom: 20px; /* Distancia desde la parte inferior */ right: 20px; /* Distancia desde el lado derecho */ z-index: 9999; /* Para que quede por encima de otros elementos */ background-color: #25D366; /* Color de WhatsApp */ padding: 10px; border-radius: 50%; /* Para que sea redondeado */ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}
@media (max-width: 479px) {
.whatsapp-button {
position: fixed; bottom: 20px; /* Distancia desde la parte inferior */ right: 20px; /* Distancia desde el lado derecho */ z-index: 9999; /* Para que quede por encima de otros elementos */ background-color: #25D366; /* Color de WhatsApp */ padding: 10px; border-radius: 50%; /* Para que sea redondeado */ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}
}

.c-columns-l-1 {
}
@media (max-width: 991px) {
}

.c-h1 {
 text-transform:capitalize;
 font-weight:400;
 line-height:1.3;
}
@media (max-width: 991px) {
}

@media (max-width: 767px) {
}

@media (max-width: 479px) {
}

.c-columns-gap-m {
}
.c-icon-light-l {
background-color: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.05);
padding: 24px;color: #ffffff;}.c-icon-light-l 
>svg {width: 24px;height: 24px;}.c-icon-light-l {
}
.c-btn-m {
 font-size:13px;
 padding-top:12px;
 padding-left:25px;
 padding-right:25px;
 padding-bottom:12px;
}
@media (max-width: 479px) {
.c-btn-m {
 width:100%;
 font-size:12px;
}
}

.c-btn-main:hover{
transform:translateY(-5px); border-bottom-color:color(undefined);
 border-top-style:none;
 border-right-style:none;
 border-bottom-style:none;
 border-left-style:none;
 color:#ffffff;
 box-shadow:0px 7px 25px -10px rgba(0,0,0,0.5);
}
.c-btn-main {
 border-radius:7px;
 border-top-width:2px;
 border-right-width:2px;
 border-bottom-width:2px;
 border-left-width:2px;
 border-top-style:none;
 border-right-style:none;
 border-bottom-style:none;
 border-left-style:none;
 text-transform:uppercase;
 letter-spacing:1px;
 border-top-color:#ffa500;
 border-right-color:#ffa500;
 border-bottom-color:#ffa500;
 border-left-color:#ffa500;
 text-align:center;
 background-color:#ffa500;
 color:#ffffff;
 font-weight:600;
 box-shadow:0px 10px 20px -15px rgba(0,0,0,0.5);
}
.c-btn-main:not(.ct-section):not(.oxy-easy-posts),
.c-btn-main.oxy-easy-posts .oxy-posts,
.c-btn-main.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
@media (max-width: 767px) {
.c-btn-main {
 font-size:13px;
}
}

@media (max-width: 479px) {
.c-btn-main {
 width:100%;
}
}

.c-card-light {
 text-align:left;
 background-color:#ffffff;
 width:100%;
 position:relative;
 border-radius:7px;
 box-shadow:0px 5px 15px rgba(0,0,0,0.08);
}
.c-card-light:not(.ct-section):not(.oxy-easy-posts),
.c-card-light.oxy-easy-posts .oxy-posts,
.c-card-light.ct-section .ct-section-inner-wrap{
display:flex;
}
@media (max-width: 1120px) {
}

.c-columns-2-auto {
}
@media (max-width: 767px) {
}

.c-icon-accent-l {
background-color: rgba(67,83,255,0.05);
border: 1px solid rgba(67,83,255,0.05);
padding: 24px;color: #ffa500;}.c-icon-accent-l 
>svg {width: 24px;height: 24px;}.c-icon-accent-l {
 box-shadow:0px 15px 15px -15px rgba(67,83,255,0.2);
}
@media (max-width: 991px) {
.c-icon-accent-l {
padding: 20px;}.c-icon-accent-l 
>svg {width: 20px;height: 20px;}.c-icon-accent-l {
}
}

.c-card-accent {
 background-color:#ffa500;
 border-radius:7px;
 width:100%;
 box-shadow:0px 5px 15px rgba(0,0,0,0.08);
}
.c-card-accent:not(.ct-section):not(.oxy-easy-posts),
.c-card-accent.oxy-easy-posts .oxy-posts,
.c-card-accent.ct-section .ct-section-inner-wrap{
display:flex;
}
@media (max-width: 767px) {
}

@media (max-width: 479px) {
}

.c-columns-xl-1 {
}
.c-text-xl {
 font-weight:500;
 max-width:700px;
 line-height:1.6;
}
@media (max-width: 1120px) {
}

.c-columns-gap-xl {
}
.c-padding-m {
}
.c-icon-star {
color: #eda900;}.c-icon-star 
>svg {width: 20px;height: 20px;}.c-icon-star {
}
.c-inline {
}
.c-inline:not(.ct-section):not(.oxy-easy-posts),
.c-inline.oxy-easy-posts .oxy-posts,
.c-inline.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.c-stars {
 text-align:center;
}
.c-stars:not(.ct-section):not(.oxy-easy-posts),
.c-stars.oxy-easy-posts .oxy-posts,
.c-stars.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
.c-avatar-xs {
 height:clamp(20px, 2vw, 30px) ;
 border-top-width:2px;
 border-right-width:2px;
 border-bottom-width:2px;
 border-left-width:2px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-color:#ffffff;
 border-right-color:#ffffff;
 border-bottom-color:#ffffff;
 border-left-color:#ffffff;
 border-radius:100%;
 width:clamp(20px, 2vw, 30px) ;
object-fit:cover;
}
.toggle-0690:hover{
}
.toggle-0690 {
 width:100%;
 max-width:100%;
 background-color:#ffffff;
}
.toggle-0690:not(.ct-section):not(.oxy-easy-posts),
.toggle-0690.oxy-easy-posts .oxy-posts,
.toggle-0690.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row-reverse;
}
.c-columns-2 {
}
.c-heading-accent {
 color:#ffa500;
}
.c-divider-full-dark {
 background-color:#e8e8e8;
 width:100%;
 height:1px;
 margin-top:clamp(12px, 3.5vmin, 30px) ;
 margin-bottom:clamp(12px, 3.5vmin, 30px) ;
}
.c-btn-l {
 font-size:17px;
 padding-left:35px;
 padding-right:35px;
 padding-top:15px;
 padding-bottom:15px;
}
@media (max-width: 767px) {
.c-btn-l {
 font-size:15px;
}
}

@media (max-width: 479px) {
.c-btn-l {
 padding-top:10px;
 padding-bottom:10px;
 font-size:14px;
 width:100%;
}
}

.c-gallery {
}
.c-icon-check {
color: #65d33d;}.c-icon-check 
>svg {width: 30px;height: 30px;}.c-icon-check {
}
@media (max-width: 767px) {
.c-icon-check {
}.c-icon-check 
>svg {width: 25px;height: 25px;}.c-icon-check {
}
}

.c-center-self {
 margin-left:auto;
 margin-right:auto;
}
.agencyb-hero-1-video:hover{
 transition-duration:0.2s;
 transition-timing-function:ease;
 transition-property:all;
transform: rotate(0deg);
}
.agencyb-hero-1-video {
 border-radius:20px;
 position:relative;
 overflow:hidden;
 transition-duration:0.5s;
 transition-timing-function:ease;
 transition-property:all;
 text-align:center;
 max-width:480px;
 box-shadow:0px 10px 40px color(43);
transform: rotate(-15deg); } .agencyb-hero-1-video:hover .agencyb-hero-1-play { opacity: 1; transform: rotate(0deg);
}
.agencyb-hero-1-video:not(.ct-section):not(.oxy-easy-posts),
.agencyb-hero-1-video.oxy-easy-posts .oxy-posts,
.agencyb-hero-1-video.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.agencyb-hero-1-play {
 width:96px;
 height:96px;
 opacity:0.7;
 position:absolute;
 transition-timing-function:ease;
 transition-property:all;
 transition-duration:0.2s;
transform: rotate(15deg);
}
@media (max-width: 479px) {
.agencyb-hero-1-play {
 width:64px;
 height:64px;
}
}

.agencyb-white-button:hover{
background-color :color(41);
border: 1px solid color(41);
}.agencyb-white-button:hover{
transform: scale(1.05,1.05);
}
.agencyb-white-button {
background-color :color(41);
border: 1px solid color(41);
color: color(42);
padding: 14px 22.4px;
}.agencyb-white-button {
 font-family:JetBrains Mono;
 button-hover_color:color(41);
 font-size:18px;
 font-weight:900;
 padding-left:48px;
 padding-right:48px;
 line-height:1.2;
 letter-spacing:2px;
 border-radius:100px;
 transition-duration:0.2s;
 transition-timing-function:ease;
 transition-property:all;
 text-align:center;
 box-shadow:0px 10px 40px color(43);
}
.agencyb-red-button:hover{
background-color :color(45);
border: 1px solid color(45);
}.agencyb-red-button:hover{
transform: scale(1.05,1.05);
}
.agencyb-red-button {
background-color :color(45);
border: 1px solid color(45);
color: color(41);
padding: 14px 22.4px;
}.agencyb-red-button {
 font-family:JetBrains Mono;
 button-hover_color:color(45);
 font-size:18px;
 font-weight:900;
 line-height:1.2;
 letter-spacing:2px;
 color:color(41);
 padding-left:48px;
 padding-right:48px;
 border-radius:100px;
 text-align:center;
 transition-duration:0.2s;
 transition-timing-function:ease;
 transition-property:all;
}
.agencyb-digits-1-column {
 text-align:center;
}
.agencyb-digits-1-column:not(.ct-section):not(.oxy-easy-posts),
.agencyb-digits-1-column.oxy-easy-posts .oxy-posts,
.agencyb-digits-1-column.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
}
.agencyb-heading-two {
 font-family:Bebas Neue;
 color:color(41);
 font-size:56px;
 font-weight:700;
 line-height:1;
}
@media (max-width: 767px) {
.agencyb-heading-two {
 font-size:56px;
}
}

@media (max-width: 479px) {
.agencyb-heading-two {
 font-size:48px;
}
}

.agencyb-digits-1-icon {
color: color(41);}.agencyb-digits-1-icon 
>svg {width: 36px;height: 36px;}.agencyb-digits-1-icon {
 margin-bottom:8px;
}
.agencyb-digits-1-digits {
 font-family:JetBrains Mono;
 color:color(41);
 font-size:72px;
 font-weight:900;
 line-height:1;
 margin-bottom:8px;
}
.agencyb-digits-1-text {
 font-family:JetBrains Mono;
 font-size:18px;
 color:color(41);
 font-weight:400;
}
.agencyb-red-outline-button:hover{
background-color: transparent;
border: 1px solid color(45);
color: color(45);
}.agencyb-red-outline-button:hover{
transform: scale(1.05,1.05);
}
.agencyb-red-outline-button {
background-color: transparent;
border: 1px solid color(45);
color: color(45);
padding: 13px 21.4px;
}.agencyb-red-outline-button {
 font-family:JetBrains Mono;
 button-hover_color:color(45);
 font-size:18px;
 font-weight:900;
 letter-spacing:2px;
 line-height:1.2;
 padding-left:48px;
 padding-right:48px;
 border-radius:100px;
 transition-duration:0.2s;
 transition-timing-function:ease;
 transition-property:all;
}
.agencyb-process-1-left-column {
 text-align:right;
}
.agencyb-process-1-left-column:not(.ct-section):not(.oxy-easy-posts),
.agencyb-process-1-left-column.oxy-easy-posts .oxy-posts,
.agencyb-process-1-left-column.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-end;
}
.agencyb-process-1-right-column {
 text-align:left;
}
.agencyb-process-1-right-column:not(.ct-section):not(.oxy-easy-posts),
.agencyb-process-1-right-column.oxy-easy-posts .oxy-posts,
.agencyb-process-1-right-column.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
}
.agencyb-process-1-center-column {
 text-align:center;
}
.agencyb-process-1-center-column:not(.ct-section):not(.oxy-easy-posts),
.agencyb-process-1-center-column.oxy-easy-posts .oxy-posts,
.agencyb-process-1-center-column.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
}
.agencyb-process-1-title {
 font-family:Bebas Neue;
 color:color(42);
 font-size:24px;
 font-weight:700;
 line-height:1.2;
 margin-bottom:4px;
}
.agencyb-process-1-text {
 font-family:JetBrains Mono;
 font-size:16px;
 font-weight:400;
 line-height:1.6;
 color:color(44);
}
.agencyb-process-1-icon {
color: color(41);}.agencyb-process-1-icon 
>svg {width: 36px;height: 36px;}.agencyb-process-1-icon {
}
.agencyb-process-1-icon-wrapper {
 background-color:#ec2758;
 padding-top:20px;
 padding-left:20px;
 padding-right:20px;
 padding-bottom:20px;
 border-radius:100%;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-width:5px;
 border-right-width:5px;
 border-bottom-width:5px;
 border-left-width:5px;
 border-top-color:#FFF;
 border-right-color:#FFF;
 border-bottom-color:#FFF;
 border-left-color:#FFF;
}
.agencyb-process-1-line {
 background-color:rgba(0,0,0,0.1);
}
@media (max-width: 767px) {
.agencyb-process-1-line {
}
.agencyb-process-1-line:not(.ct-section):not(.oxy-easy-posts),
.agencyb-process-1-line.oxy-easy-posts .oxy-posts,
.agencyb-process-1-line.ct-section .ct-section-inner-wrap{
display:none;
flex-direction:unset;
}
}

.agencyb-clients-1-image {
 width:13%;
 margin-left:1.5%;
 margin-right:1.5%;
}
@media (max-width: 991px) {
.agencyb-clients-1-image {
 width:25%;
 padding-bottom:1.5%;
 padding-top:1.5%;
}
}

@media (max-width: 479px) {
.agencyb-clients-1-image {
 width:40%;
 padding-top:6%;
 padding-bottom:6%;
 padding-left:3%;
 padding-right:3%;
}
}

.agencyb-services-1-text {
 font-family:JetBrains Mono;
 color:color(44);
 font-size:16px;
 font-weight:400;
 line-height:1.6;
}
.agencyb-service-1-title {
 font-family:Bebas Neue;
 color:color(42);
 font-size:24px;
 font-weight:700;
 line-height:1.2;
 text-align:left;
 margin-bottom:4px;
}
.agencyb-service-1-icon {
color: color(45);}.agencyb-service-1-icon 
>svg {width: 36px;height: 36px;}.agencyb-service-1-icon {
}
.agencyb-service-1-icon-wrapper {
 padding-top:20px;
 padding-left:20px;
 padding-right:20px;
 padding-bottom:20px;
 border-top-color:color(46);
 border-right-color:color(46);
 border-bottom-color:color(46);
 border-left-color:color(46);
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-radius:100%;
 margin-right:16px;
}
@media (max-width: 991px) {
.agencyb-service-1-icon-wrapper {
 margin-right:0px;
 margin-bottom:6px;
}
}

.agencyb-service-1-column {
}
.agencyb-service-1-column:not(.ct-section):not(.oxy-easy-posts),
.agencyb-service-1-column.oxy-easy-posts .oxy-posts,
.agencyb-service-1-column.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
}
@media (max-width: 991px) {
.agencyb-service-1-column {
 text-align:center;
}
.agencyb-service-1-column:not(.ct-section):not(.oxy-easy-posts),
.agencyb-service-1-column.oxy-easy-posts .oxy-posts,
.agencyb-service-1-column.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
}

.agencyb-service-1-text-wrapper {
 text-align:left;
}
.agencyb-service-1-text-wrapper:not(.ct-section):not(.oxy-easy-posts),
.agencyb-service-1-text-wrapper.oxy-easy-posts .oxy-posts,
.agencyb-service-1-text-wrapper.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
}
@media (max-width: 991px) {
.agencyb-service-1-text-wrapper {
 text-align:center;
}
.agencyb-service-1-text-wrapper:not(.ct-section):not(.oxy-easy-posts),
.agencyb-service-1-text-wrapper.oxy-easy-posts .oxy-posts,
.agencyb-service-1-text-wrapper.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
}

.agencyb-reviews-1-avatar {
 width:96px;
 border-radius:100%;
 border-top-width:5px;
 border-right-width:5px;
 border-bottom-width:5px;
 border-left-width:5px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-color:#fff;
 border-right-color:#fff;
 border-bottom-color:#fff;
 border-left-color:#fff;
 height:96px;
 margin-bottom:10px;
}
.agencyb-review-1-stars-wrapper {
 width:100%;
 text-align:center;
 margin-bottom:6px;
}
.agencyb-review-1-stars-wrapper:not(.ct-section):not(.oxy-easy-posts),
.agencyb-review-1-stars-wrapper.oxy-easy-posts .oxy-posts,
.agencyb-review-1-stars-wrapper.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
.agencyb-review-1-star-icon {
color: color(41);}.agencyb-review-1-star-icon 
>svg {width: 16px;height: 16px;}.agencyb-review-1-star-icon {
 padding-top:2px;
 padding-left:2px;
 padding-right:2px;
 padding-bottom:2px;
}
.agencyb-review-1-title {
 font-family:Bebas Neue;
 font-size:24px;
 color:color(41);
 font-weight:700;
 line-height:1.2;
 margin-bottom:12px;
}
.agencyb-review-1-text {
 font-family:JetBrains Mono;
 color:color(41);
 font-size:16px;
 font-weight:400;
 line-height:1.6;
}
.agencyb-works-1-wrapper {
 width:100%;
 background-color:color(41);
 text-align:center;
 padding-bottom:28px;
 height:100%;
 box-shadow:0px 10px 40px color(46);
}
.agencyb-works-1-wrapper:not(.ct-section):not(.oxy-easy-posts),
.agencyb-works-1-wrapper.oxy-easy-posts .oxy-posts,
.agencyb-works-1-wrapper.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
.agencyb-works-1-image {
background-size: cover; width:100%;
 background-color:#ec2758;
 margin-bottom:36px;
 padding-top:320px;
 background-attachment:scroll;
 background-repeat:no-repeat;
 text-align:center;
}
.agencyb-works-1-image:not(.ct-section):not(.oxy-easy-posts),
.agencyb-works-1-image.oxy-easy-posts .oxy-posts,
.agencyb-works-1-image.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
.agencyb-work-1-label {
 font-family:JetBrains Mono;
 color:color(41);
 font-size:12px;
 font-weight:400;
 background-color:color(45);
 padding-top:4px;
 padding-bottom:4px;
 padding-left:24px;
 padding-right:24px;
 line-height:1.4;
 border-radius:6px;
 margin-bottom:-12px;
}
.agencyb-work-1-text {
 font-family:JetBrains Mono;
 color:color(44);
 font-size:16px;
 font-weight:400;
 line-height:1.6;
 margin-bottom:24px;
 margin-left:48px;
 margin-right:48px;
}
.agencyb-work-1-title {
 font-family:Bebas Neue;
 color:color(42);
 font-size:24px;
 font-weight:700;
 line-height:1.2;
 margin-bottom:12px;
 margin-left:48px;
 margin-right:48px;
}
.agencyb-insta-1-image {
 box-shadow:0px 10px 40px rgba(0,0,0,0.3);
}
.agencyb-contact-1-column {
 text-align:center;
}
.agencyb-contact-1-column:not(.ct-section):not(.oxy-easy-posts),
.agencyb-contact-1-column.oxy-easy-posts .oxy-posts,
.agencyb-contact-1-column.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
}
.agencyb-contact-1-title {
 font-family:Bebas Neue;
 font-size:24px;
 font-weight:700;
 color:color(42);
 line-height:1.2;
 text-align:center;
 margin-bottom:6px;
}
.agencyb-contact-1-link:hover{
 color:color(45);
}
.agencyb-contact-1-link {
 font-family:JetBrains Mono;
 color:color(42);
 transition-duration:0.2s;
 transition-timing-function:ease;
 transition-property:all;
 font-size:16px;
 font-weight:400;
 line-height:1.6;
}
.agencyb-contact-1-icon-wrapper {
 width:80px;
 height:80px;
 border-top-color:color(46);
 border-right-color:color(46);
 border-bottom-color:color(46);
 border-left-color:color(46);
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-radius:100%;
 margin-bottom:12px;
 text-align:center;
}
.agencyb-contact-1-icon-wrapper:not(.ct-section):not(.oxy-easy-posts),
.agencyb-contact-1-icon-wrapper.oxy-easy-posts .oxy-posts,
.agencyb-contact-1-icon-wrapper.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.agencyb-contact-1-icon {
color: color(45);}.agencyb-contact-1-icon 
>svg {width: 36px;height: 36px;}.agencyb-contact-1-icon {
}
.agencyb-video-popup {
background-image: linear-gradient(135deg, rgba(255,159,46,0.9), rgba(247,35,196,0.9)); width:100%;
 height:100%;
 position:fixed;
 top:0px;
 left:0px;
 text-align:center;
 padding-top:24px;
 padding-left:24px;
 padding-right:24px;
 padding-bottom:24px;
z-index: 1000;
}
.agencyb-video-popup:not(.ct-section):not(.oxy-easy-posts),
.agencyb-video-popup.oxy-easy-posts .oxy-posts,
.agencyb-video-popup.ct-section .ct-section-inner-wrap{
display:none;
flex-direction:unset;
align-items:center;
justify-content:center;
}
.agencyb-modal-video {
}
.c-margin-right-xs {
}
.c-header-contact {
display: grid!important; grid-template-columns: auto auto; grid-gap: 0.8rem;
}
@media (max-width: 991px) {
.c-header-contact {
display:none!important;
}
.c-header-contact:not(.ct-section):not(.oxy-easy-posts),
.c-header-contact.oxy-easy-posts .oxy-posts,
.c-header-contact.ct-section .ct-section-inner-wrap{
flex-direction:unset;
}
}

.c-social-icon:hover{
color: #ffa500;}.c-social-icon:hover{
}
.c-social-icon {
color: #ffffff;}.c-social-icon 
>svg {width: 20px;height: 20px;}.c-social-icon {
 margin-left:5px;
 margin-right:5px;
 padding-left:5px;
 padding-right:5px;
}
@media (max-width: 767px) {
.c-social-icon {
}.c-social-icon 
>svg {width: 17px;height: 17px;}.c-social-icon {
 margin-left:0px;
}
}

.c-logo {
 width:auto;
 max-height:35px;
}
@media (max-width: 991px) {
.c-logo {
 width:auto;
 height:30px;
}
}

@media (max-width: 767px) {
}

.c-link-light:hover{
 opacity:0.8;
 color:#ffffff;
}
.c-link-light {
 color:#ffffff;
}
.c-link-light:not(.ct-section):not(.oxy-easy-posts),
.c-link-light.oxy-easy-posts .oxy-posts,
.c-link-light.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.c-icons-row {
 text-align:right;
}
.c-icons-row:not(.ct-section):not(.oxy-easy-posts),
.c-icons-row.oxy-easy-posts .oxy-posts,
.c-icons-row.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:flex-end;
}
.c-text-accent {
 color:#ffffff;
}
.c-h5 {
 font-weight:600;
 text-align:left;
 line-height:1.3;
}
.c-divider {
 width:40px;
 min-width:40px;
 max-width:40px;
 height:2px;
 min-height:2px;
 max-height:2px;
 background-color:#ffa500;
 opacity:0.6;
}
.tabs-6256-tab {
 margin-bottom:7px;
 max-width:500px;
 padding-top:35px;
 padding-left:35px;
 padding-right:35px;
 padding-bottom:35px;
 margin-top:7px;
 text-align:left;
}
@media (max-width: 767px) {
.tabs-6256-tab {
 max-width:100%;
 padding-top:20px;
 padding-bottom:20px;
 padding-left:25px;
 padding-right:25px;
}
.tabs-6256-tab:before{
 opacity:0;
}
}

.tabs-6256-tab-active:before{
  content:"";
border-color: transparent #d0deff transparent transparent; content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #efefef transparent transparent; position: absolute; top: 50%; left: -10px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: inherit; -o-transition: inherit; transition: inherit;
}
.tabs-6256-tab-active {
 background-color:#efefef;
 border-radius:15px;
 position:relative;
}
.tabs-contents-6256-tab {
 text-align:center;
 padding-right:50px;
}
.tabs-contents-6256-tab:not(.ct-section):not(.oxy-easy-posts),
.tabs-contents-6256-tab.oxy-easy-posts .oxy-posts,
.tabs-contents-6256-tab.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.c-tabs-1 {
}
.c-tabs-1:not(.ct-section):not(.oxy-easy-posts),
.c-tabs-1.oxy-easy-posts .oxy-posts,
.c-tabs-1.ct-section .ct-section-inner-wrap{
flex-direction:unset;
}
@media (max-width: 767px) {
.c-tabs-1 {
 text-align:center;
}
.c-tabs-1:not(.ct-section):not(.oxy-easy-posts),
.c-tabs-1.oxy-easy-posts .oxy-posts,
.c-tabs-1.ct-section .ct-section-inner-wrap{
display:flex;
align-items:center;
}
}

.c-tabs-1-titles {
 width:40%;
}
@media (max-width: 767px) {
.c-tabs-1-titles {
 width:100%;
}
}

.c-tabs-1-content {
 width:60%;
 text-align:left;
}
.c-tabs-1-content:not(.ct-section):not(.oxy-easy-posts),
.c-tabs-1-content.oxy-easy-posts .oxy-posts,
.c-tabs-1-content.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
}
@media (max-width: 767px) {
.c-tabs-1-content {
 width:100%;
}
}

.c-stretch {
align-items: stretch;
}
.c-columns-l-2 {
}
@media (max-width: 991px) {
}

.c-padding-bottom-m {
}
.c-relative {
 position:relative;
}
.c-buttons {
background-color :var(--primary);
border: 1px solid var(--primary);
}.c-buttons {
display:grid!important; grid-template-columns: auto auto; grid-gap:15px; align-items: center;
}
@media (max-width: 1120px) {
}

@media (max-width: 479px) {
.c-buttons {
grid-template-columns: 1fr; width: 100%;
}
}

.c-columns-1-2 {
}
.c-padding-top-m {
}
.c-z-index-5 {
 z-index:5;
}
.oxel-breadcrumb-wrapper {
 width:100%;
 color:#ffffff;
}
.oxel-breadcrumb-code {
 width:100%;
}
.x-carousel-1 {
 oxy-carousel-builder_slug_flickitypagedotsdotisselected_background_color:#c43838;
}
.x-carousel-1_cell {
background-image:linear-gradient(rgba(0,0,0,0.56), rgba(0,0,0,0.56)), url();background-size:auto,  cover; text-align:left;
 border-top-style:none;
 border-right-style:none;
 border-bottom-style:none;
 border-left-style:none;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 background-position:50% 50%;
}
.x-carousel-1_cell:not(.ct-section):not(.oxy-easy-posts),
.x-carousel-1_cell.oxy-easy-posts .oxy-posts,
.x-carousel-1_cell.ct-section .ct-section-inner-wrap{
align-items:flex-start;
justify-content:flex-end;
}
.x-post-carousel_prev {
color: #fff;}.x-post-carousel_prev 
>svg {width: 25px;height: 25px;}.x-post-carousel_prev {
 position:absolute;
 top:43%;
 left:-90px;
cursor: pointer;
}
@media (max-width: 1120px) {
.x-post-carousel_prev {
 position:absolute;
 left:0px;
}
}

.x-post-carousel_next {
color: #fff;}.x-post-carousel_next 
>svg {width: 25px;height: 25px;}.x-post-carousel_next {
transform:rotate(180deg); position:absolute;
 top:43%;
 right:-90px;
cursor: pointer;
}
@media (max-width: 1120px) {
.x-post-carousel_next {
 position:absolute;
 right:0px;
}
}

.c-columns-s-1 {
}
@media (max-width: 479px) {
}

.c-icon-dark-s {
color: #0f0f0f;}.c-icon-dark-s 
>svg {width: 18px;height: 18px;}.c-icon-dark-s {
}
.c-header {
 z-index:30;
 width:100%;
 visibility:visible;
}
.c-header:not(.ct-section):not(.oxy-easy-posts),
.c-header.oxy-easy-posts .oxy-posts,
.c-header.ct-section .ct-section-inner-wrap{
display:block;
}
.c-submenu-2 {
 position:absolute;
 top:90%;
 background-color:#ffffff;
 border-radius:5px;
 transition-duration:0.4s;
 text-align:left;
 overflow:hidden;
 box-shadow:0px 5px 30px -10px rgba(0,0,0,0.1);
/* Enable hardware acceleration to fix laggy transitions */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0);
}
.c-submenu-2:not(.ct-section):not(.oxy-easy-posts),
.c-submenu-2.oxy-easy-posts .oxy-posts,
.c-submenu-2.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
}
@media (max-width: 991px) {
.c-submenu-2 {
 position:relative;
 max-height:10000px;
 background-color:#f9f9f9;
 box-shadow:0px 0px 0px 0px rgba(0,0,0,0);
}
}

.c-submenu-2-single {
}
.c-submenu-2-double {
}
.c-submenu-2-triple {
}
.c-menu-link-small:hover{
 color:#ffa500;
}
.c-menu-link-small {
 font-size:11px;
 font-weight:300;
 color:#686868;
}
.c-bg-dark {
 background-color:#191919;
}
.c-footer-link-light:hover{
 color:#ffffff;
}
.c-footer-link-light {
 margin-bottom:10px;
 color:#ffffff;
 font-size:14px;
 font-weight:400;
 transition-duration:0.6s;
}
.c-follow-light:hover{
color: #ffa500;}.c-follow-light:hover{
 background-color:rgba(255,255,255,0.15);
}
.c-follow-light {
color: #ffffff;}.c-follow-light 
>svg {width: 18px;height: 18px;}.c-follow-light {
 padding-top:10px;
 padding-left:10px;
 padding-right:10px;
 padding-bottom:10px;
 margin-right:10px;
 background-color:rgba(255,255,255,0.1);
border-radius: 15px!important;
}
.c-padding-xl {
}
@media (max-width: 1120px) {
}

@media (max-width: 767px) {
}

.c-btn-alt:hover{
transform:translateY(-5px); color:#ffffff;
 background-color:#ffa500;
 box-shadow:0px 7px 25px -10px rgba(0,0,0,0.25);
}
.c-btn-alt {
 font-weight:600;
 color:#ffa500;
 text-transform:uppercase;
 border-radius:7px;
 background-color:#efefef;
 text-align:center;
 letter-spacing:1px;
}
.c-btn-alt:not(.ct-section):not(.oxy-easy-posts),
.c-btn-alt.oxy-easy-posts .oxy-posts,
.c-btn-alt.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
@media (max-width: 1120px) {
}

@media (max-width: 767px) {
}

@media (max-width: 479px) {
}

.c-btn-transparent:hover{
transform:translateY(-5px); background-color:#ffffff;
 color:#ffa500;
}
.c-btn-transparent {
 text-transform:uppercase;
 background-color:rgba(255,255,255,0.15);
 border-radius:7px;
 color:#ffffff;
 font-weight:600;
 letter-spacing:1px;
 text-align:center;
}
.c-btn-transparent:not(.ct-section):not(.oxy-easy-posts),
.c-btn-transparent.oxy-easy-posts .oxy-posts,
.c-btn-transparent.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
@media (max-width: 479px) {
}

.c-btn-xs {
 font-size:10px;
 padding-left:10px;
 padding-right:10px;
 padding-bottom:5px;
 padding-top:5px;
}
.c-btn-s {
 font-size:12px;
 padding-top:7px;
 padding-left:14px;
 padding-right:14px;
 padding-bottom:7px;
}
@media (max-width: 479px) {
.c-btn-s {
 font-size:11px;
}
}

.c-btn-xl {
 padding-top:15px;
 padding-bottom:15px;
 padding-left:35px;
 padding-right:35px;
 font-size:20px;
}
@media (max-width: 991px) {
.c-btn-xl {
 font-size:17px;
}
}

@media (max-width: 479px) {
.c-btn-xl {
 width:100%;
 font-size:15px;
}
}

.c-card-dark {
 width:100%;
 border-radius:7px;
 background-color:#191919;
 box-shadow:0px 5px 15px rgba(0,0,0,0.08);
}
@media (max-width: 767px) {
}

@media (max-width: 479px) {
}

.c-card-transparent {
 width:100%;
 border-radius:7px;
 overflow:hidden;
 background-color:rgba(255,255,255,0.2);
}
.c-card-transparent:not(.ct-section):not(.oxy-easy-posts),
.c-card-transparent.oxy-easy-posts .oxy-posts,
.c-card-transparent.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
}
@media (max-width: 1120px) {
}

.c-card-on-hover:hover{
transform:translateY(-10px); background-color:#ffffff;
 box-shadow:0px 25px 35px -14px rgba(0,0,0,0.15);
}
.c-card-on-hover {
 border-radius:7px;
}
@media (max-width: 1120px) {
.c-card-on-hover {
 padding-left:25px;
 padding-right:25px;
}
}

.c-h6 {
 line-height:1.3;
 font-weight:600;
}
.c-tagline-alt {
 background-color:#efefef;
 border-radius:7px;
 padding-top:5px;
 padding-left:12px;
 padding-right:12px;
 padding-bottom:5px;
 font-size:11px;
 font-weight:600;
 color:#ffa500;
}
.c-icon-dark-m {
color: #0f0f0f;}.c-icon-dark-m 
>svg {width: 24px;height: 24px;}.c-icon-dark-m {
}
.c-icon-dark-l {
background-color: rgba(15,15,15,0.05);
border: 1px solid rgba(15,15,15,0.05);
padding: 24px;color: #0f0f0f;}.c-icon-dark-l 
>svg {width: 24px;height: 24px;}.c-icon-dark-l {
 box-shadow:0px 15px 15px -15px rgba(0,0,0,0.2);
}
@media (max-width: 767px) {
.c-icon-dark-l {
padding: ;}.c-icon-dark-l 
>svg {width: 30px;height: 30px;}.c-icon-dark-l {
}
}

.c-icon-light-s {
color: #ffffff;}.c-icon-light-s 
>svg {width: 18px;height: 18px;}.c-icon-light-s {
}
.c-bg-dark-alt {
 background-color:#353535;
}
.c-bg-accent {
 background-color:#ffa500;
}
.c-bg-gradient {
background-image: linear-gradient(90deg, #0009c4, #200696);}
@media (max-width: 479px) {
.c-bg-gradient {
}
}

.c-bg-blur-s {
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.c-bg-blur-m {
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.c-bg-blur-l {
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.c-bg-blur-xl {
-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.c-avatar-s {
 border-radius:100%;
 width:clamp(30px, 3vw, 40px) ;
 height:clamp(30px, 3vw, 40px) ;
 border-top-width:2px;
 border-right-width:2px;
 border-bottom-width:2px;
 border-left-width:2px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-color:#ffffff;
 border-right-color:#ffffff;
 border-bottom-color:#ffffff;
 border-left-color:#ffffff;
object-fit:cover;
}
@media (max-width: 1120px) {
}

@media (max-width: 767px) {
}

.c-avatar-m {
background-size: cover; width:clamp(40px, 4vw, 60px) ;
 height:clamp(40px, 4vw, 60px) ;
 background-repeat:no-repeat;
 border-top-width:2px;
 border-right-width:2px;
 border-bottom-width:2px;
 border-left-width:2px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-color:#ffffff;
 border-right-color:#ffffff;
 border-bottom-color:#ffffff;
 border-left-color:#ffffff;
 border-radius:100%;
 background-position:50% 50%;
object-fit:cover;
}
.c-avatar-l {
 border-radius:100%;
 width:clamp(50px, 5vw, 80px) ;
 height:clamp(50px, 5vw, 80px) ;
 border-top-width:2px;
 border-right-width:2px;
 border-bottom-width:2px;
 border-left-width:2px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-color:#ffffff;
 border-right-color:#ffffff;
 border-bottom-color:#ffffff;
 border-left-color:#ffffff;
object-fit:cover;
}
@media (max-width: 1120px) {
}

@media (max-width: 479px) {
}

.c-avatar-xl {
background-size: cover; background-repeat:no-repeat;
 width:clamp(70px, 6.5vw, 140px) ;
 height:clamp(70px, 6.5vw, 140px) ;
 border-radius:100%;
 border-top-width:2px;
 border-right-width:2px;
 border-bottom-width:2px;
 border-left-width:2px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-color:#ffffff;
 border-right-color:#ffffff;
 border-bottom-color:#ffffff;
 border-left-color:#ffffff;
 background-position:50% 50%;
 box-shadow:0px 25px 35px -14px rgba(0,0,0,0.2);
object-fit:cover;
}
@media (max-width: 991px) {
}

.c-link-dark:hover{
 color:#ffa500;
}
.c-link-dark {
 color:#0f0f0f;
}
.c-link-l {
 font-size:20px;
 font-weight:500;
 text-decoration:underline;
}
.c-link-l:not(.ct-section):not(.oxy-easy-posts),
.c-link-l.oxy-easy-posts .oxy-posts,
.c-link-l.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
@media (max-width: 767px) {
.c-link-l {
 font-size:17px;
}
}

.c-link-xl {
 font-size:22px;
 font-weight:500;
}
.c-link-xl:not(.ct-section):not(.oxy-easy-posts),
.c-link-xl.oxy-easy-posts .oxy-posts,
.c-link-xl.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
.c-border-light {
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-color:#e8e8e8;
 border-right-color:#e8e8e8;
 border-bottom-color:#e8e8e8;
 border-left-color:#e8e8e8;
}
.c-border-dark {
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-color:#474747;
 border-right-color:#474747;
 border-bottom-color:#474747;
 border-left-color:#474747;
}
.c-3d-down {
transform: perspective(1000px) rotateX(-20deg);
}
.c-3d-left {
transform: perspective(1000px) rotatey(20deg);
}
.c-3d-right {
transform: perspective(1000px) rotatey(-20deg);
}
.c-3d-up {
transform: perspective(1000px) rotateX(20deg);
}
.c-hover-3d-down:hover{
transform:perspective(1000px) ;transform: perspective(1000px) rotateX(-20deg);
}
.c-hover-3d-down {
-webkit-perspective: 0; perspective: 0; -webkit-transform: rotate(0); transform: rotate(0);
}
.c-hover-3d-left:hover{
transform: perspective(1000px) rotateY(20deg);
}
.c-hover-3d-left {
-webkit-perspective: 0; perspective: 0; -webkit-transform: rotate(0); transform: rotate(0);
}
.c-hover-3d-right:hover{
transform: perspective(1000px) rotateY(-20deg);
}
.c-hover-3d-right {
-webkit-perspective: 0; perspective: 0; -webkit-transform: rotate(0); transform: rotate(0);
}
.c-hover-3d-up:hover{
transform:perspective(1000px) ;transform: perspective(1000px) rotateX(20deg);
}
.c-hover-3d-up {
-webkit-perspective: 0; perspective: 0; -webkit-transform: rotate(0); transform: rotate(0);
}
.c-hover-move-down:hover{
transform:translateY(10px);}
.c-hover-move-down {
}
.c-hover-move-left:hover{
transform:translate(-10px);}
.c-hover-move-left {
}
.c-hover-move-right:hover{
transform:translate(10px);}
.c-hover-move-right {
}
.c-hover-move-up:hover{
transform:translateY(-10px);}
.c-hover-move-up {
}
.c-hover-scale:hover{
transform:scale(1.05,1.05);}
.c-hover-scale {
}
.c-hover-scale-up:hover{
transform:scale(1.05,1.05) translateY(-10px);}
.c-hover-scale-up {
}
.c-margin-xs {
}
.c-margin-s {
}
.c-margin-m {
}
.c-margin-l {
}
.c-margin-xl {
}
.c-margin-xxl {
}
.c-margin-left-xs {
}
.c-margin-left-s {
}
.c-margin-left-m {
}
.c-margin-left-l {
}
.c-margin-left-xl {
}
.c-margin-left-xxl {
}
.c-margin-right-m {
}
@media (max-width: 479px) {
}

.c-margin-right-l {
}
@media (max-width: 767px) {
}

@media (max-width: 479px) {
}

.c-margin-right-xl {
}
@media (max-width: 991px) {
}

@media (max-width: 767px) {
}

.c-margin-right-xxl {
}
.c-margin-top-xs {
}
.c-margin-top-s {
}
.c-margin-top-m {
}
.c-margin-top-l {
}
.c-margin-top-xl {
}
.c-margin-top-xxl {
}
.c-margin-bottom-xl {
}
@media (max-width: 991px) {
}

@media (max-width: 767px) {
}

.c-margin-bottom-xxl {
}
.c-padding-xs {
}
.c-padding-s {
}
.c-padding-xxl {
}
.c-padding-left-xs {
}
.c-padding-left-s {
}
.c-padding-left-m {
}
.c-padding-left-l {
}
.c-padding-left-xl {
}
.c-padding-left-xxl {
}
.c-padding-right-xs {
}
.c-padding-right-s {
}
.c-padding-right-m {
}
.c-padding-right-l {
}
.c-padding-right-xl {
}
.c-padding-right-xxl {
}
.c-padding-top-xs {
}
.c-padding-top-s {
}
.c-padding-top-l {
}
.c-padding-top-xl {
}
.c-padding-top-xxl {
}
.c-padding-bottom-xs {
}
.c-padding-bottom-s {
}
.c-padding-bottom-l {
}
.c-padding-bottom-xl {
}
.c-padding-bottom-xxl {
}
.c-owl-xs {
}
.c-owl-s {
}
.c-owl-m {
}
.c-owl-l {
}
.c-owl-xl {
}
.c-owl-xxl {
}
.c-columns-gap-xs {
}
.c-columns-gap-s {
}
.c-columns-gap-xxl {
}
@media (max-width: 991px) {
}

.c-columns-1-3 {
}
.c-columns-2-3 {
}
.c-columns-3-1 {
}
.c-columns-3-2 {
}
.c-columns-4 {
}
.c-columns-5 {
}
.c-columns-6 {
}
.c-columns-xl-2 {
}
.c-columns-xl-3 {
}
.c-columns-xl-4 {
}
.c-columns-xl-5 {
}
.c-columns-l-3 {
}
@media (max-width: 991px) {
}

.c-columns-l-4 {
}
@media (max-width: 991px) {
}

.c-columns-m-2 {
}
@media (max-width: 767px) {
}

.c-columns-m-3 {
}
@media (max-width: 767px) {
}

.c-columns-s-2 {
}
@media (max-width: 479px) {
}

.c-row-span-2 {
}
@media (max-width: 991px) {
}

.c-row-span-3 {
}
.c-row-span-4 {
}
.c-row-span-5 {
}
.c-row-span-6 {
}
.c-row-span-7 {
grid-row: span 7 / span 7;
}
.c-row-span-l-1 {
}
.c-row-span-l-2 {
}
.c-row-span-l-3 {
}
.c-row-span-l-4 {
}
.c-row-span-l-5 {
}
.c-row-span-l-6 {
}
.c-row-span-m-1 {
}
.c-row-span-m-2 {
}
.c-row-span-m-3 {
}
.c-row-span-m-4 {
}
.c-row-span-m-5 {
}
.c-row-span-m-6 {
}
.c-row-span-s-1 {
}
.c-row-span-s-2 {
}
.c-row-span-s-3 {
}
.c-row-span-s-4 {
}
.c-row-span-s-5 {
}
.c-row-span-s-6 {
}
.c-row-span-xl-1 {
}
.c-row-span-xl-2 {
}
@media (max-width: 1120px) {
}

.c-row-span-xl-3 {
}
.c-row-span-xl-4 {
}
.c-row-span-xl-5 {
}
.c-row-span-xl-6 {
}
.c-row-start-1 {
}
.c-row-start-2 {
}
.c-row-start-3 {
}
.c-row-start-4 {
}
.c-row-start-5 {
}
.c-row-start-6 {
}
.c-row-start-l-1 {
}
.c-row-start-l-2 {
}
.c-row-start-l-3 {
}
.c-row-start-l-4 {
}
.c-row-start-l-5 {
}
.c-row-start-l-6 {
}
.c-row-start-m-1 {
}
.c-row-start-m-2 {
}
.c-row-start-m-3 {
}
.c-row-start-m-4 {
}
.c-row-start-m-5 {
}
.c-row-start-m-6 {
}
.c-row-start-s-1 {
}
.c-row-start-s-3 {
}
.c-row-start-s-4 {
}
.c-row-start-s-5 {
}
.c-row-start-s-6 {
}
.c-row-start-xl-1 {
}
.c-row-start-xl-2 {
}
.c-row-start-xl-3 {
}
.c-row-start-xl-4 {
}
.c-row-start-xl-5 {
}
.c-row-start-xl-6 {
}
.c-col-span-2 {
}
@media (max-width: 991px) {
}

.c-col-span-3 {
}
.c-col-span-4 {
}
.c-col-span-5 {
}
.c-col-span-6 {
}
.c-col-span-l-1 {
}
.c-col-span-l-2 {
}
.c-col-span-l-3 {
}
.c-col-span-l-4 {
}
.c-col-span-l-5 {
}
.c-col-span-l-6 {
}
.c-col-span-m-1 {
}
.c-col-span-m-2 {
}
.c-col-span-m-3 {
}
.c-col-span-m-4 {
}
.c-col-span-m-5 {
}
.c-col-span-m-6 {
}
.c-col-span-s-1 {
}
@media (max-width: 991px) {
}

.c-col-span-s-2 {
}
.c-col-span-s-3 {
}
.c-col-span-s-4 {
}
.c-col-span-s-5 {
}
.c-col-span-s-6 {
}
.c-col-span-xl-1 {
}
.c-col-span-xl-2 {
}
.c-col-span-xl-3 {
}
.c-col-span-xl-4 {
}
.c-col-span-xl-5 {
}
.c-col-span-xl-6 {
}
.c-col-start-2 {
}
.c-col-start-l-1 {
}
.c-col-start-l-2 {
}
.c-col-start-l-3 {
}
.c-col-start-l-4 {
}
.c-col-start-l-5 {
}
.c-col-start-l-6 {
}
.c-col-start-m-1 {
}
.c-col-start-m-2 {
}
.c-col-start-m-3 {
}
.c-col-start-m-4 {
}
.c-col-start-m-5 {
}
.c-col-start-m-6 {
}
.c-col-start-s-1 {
}
.c-col-start-s-2 {
}
.c-col-start-s-3 {
}
.c-col-start-s-4 {
}
.c-col-start-s-5 {
}
.c-col-start-s-6 {
}
.c-col-start-xl-1 {
}
.c-col-start-xl-2 {
}
.c-col-start-xl-3 {
}
.c-col-start-xl-4 {
}
.c-col-start-xl-5 {
}
.c-col-start-xl-6 {
}
.c-right {
 text-align:right;
}
.c-right:not(.ct-section):not(.oxy-easy-posts),
.c-right.oxy-easy-posts .oxy-posts,
.c-right.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-end;
}
.c-middle-center {
 text-align:center;
}
.c-middle-center:not(.ct-section):not(.oxy-easy-posts),
.c-middle-center.oxy-easy-posts .oxy-posts,
.c-middle-center.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
}
.c-middle-left {
 text-align:left;
}
.c-middle-left:not(.ct-section):not(.oxy-easy-posts),
.c-middle-left.oxy-easy-posts .oxy-posts,
.c-middle-left.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
}
.c-middle-right {
 text-align:right;
}
.c-middle-right:not(.ct-section):not(.oxy-easy-posts),
.c-middle-right.oxy-easy-posts .oxy-posts,
.c-middle-right.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-end;
justify-content:center;
}
.c-top-center {
 text-align:center;
}
.c-top-center:not(.ct-section):not(.oxy-easy-posts),
.c-top-center.oxy-easy-posts .oxy-posts,
.c-top-center.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
}
.c-top-left {
 text-align:left;
}
.c-top-left:not(.ct-section):not(.oxy-easy-posts),
.c-top-left.oxy-easy-posts .oxy-posts,
.c-top-left.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
}
.c-top-right {
 text-align:right;
}
.c-top-right:not(.ct-section):not(.oxy-easy-posts),
.c-top-right.oxy-easy-posts .oxy-posts,
.c-top-right.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-end;
justify-content:flex-start;
}
.c-bottom-center {
 text-align:center;
}
.c-bottom-center:not(.ct-section):not(.oxy-easy-posts),
.c-bottom-center.oxy-easy-posts .oxy-posts,
.c-bottom-center.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-end;
}
.c-bottom-left {
 text-align:left;
}
.c-bottom-left:not(.ct-section):not(.oxy-easy-posts),
.c-bottom-left.oxy-easy-posts .oxy-posts,
.c-bottom-left.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-end;
}
.c-bottom-right {
 text-align:right;
}
.c-bottom-right:not(.ct-section):not(.oxy-easy-posts),
.c-bottom-right.oxy-easy-posts .oxy-posts,
.c-bottom-right.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-end;
justify-content:flex-end;
}
.c-left-self {
 margin-right:auto;
}
.c-right-self {
 margin-left:auto;
}
.c-max-width-320 {
 max-width:320px;
}
.c-max-width-480 {
 max-width:480px;
}
.c-max-width-960 {
 max-width:960px;
}
.c-max-width-1120 {
 max-width:1120px;
}
.c-opacity-25 {
 opacity:0.25;
}
.c-opacity-50 {
 opacity:0.5;
}
.c-opacity-75 {
 opacity:0.75;
}
.c-uppercase {
 text-transform:uppercase;
}
.c-lowercase {
 text-transform:lowercase;
}
.c-underline {
 text-decoration:underline;
}
.c-bold {
 font-weight:600;
}
.c-italic {
 font-style:italic;
}
.oxel_reviewbox__image_wrapper__image {
 max-width:1000px;
 height:100%;
}
.oxel_reviewbox__image_wrapper {
 width:200px;
 overflow:hidden;
 text-align:center;
 border-radius:50%;
 border-top-color:color(20);
 border-right-color:color(20);
 border-bottom-color:color(20);
 border-left-color:color(20);
 border-top-width:8px;
 border-right-width:8px;
 border-bottom-width:8px;
 border-left-width:8px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 height:200px;
 flex-shrink:0;
 margin-right:16px;
}
.oxel_reviewbox__image_wrapper:not(.ct-section):not(.oxy-easy-posts),
.oxel_reviewbox__image_wrapper.oxy-easy-posts .oxy-posts,
.oxel_reviewbox__image_wrapper.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
@media (max-width: 767px) {
.oxel_reviewbox__image_wrapper {
 margin-bottom:32px;
 margin-left:auto;
 margin-right:auto;
}
}

@media (max-width: 479px) {
.oxel_reviewbox__image_wrapper {
 margin-bottom:32px;
 margin-left:auto;
 margin-right:auto;
}
}

.oxel_reviewbox__details_wrapper {
 padding-left:0px;
 flex-grow:1;
}
@media (max-width: 767px) {
.oxel_reviewbox__details_wrapper {
 text-align:center;
 padding-left:0px;
}
.oxel_reviewbox__details_wrapper:not(.ct-section):not(.oxy-easy-posts),
.oxel_reviewbox__details_wrapper.oxy-easy-posts .oxy-posts,
.oxel_reviewbox__details_wrapper.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
}

@media (max-width: 479px) {
.oxel_reviewbox__details_wrapper {
 padding-left:0px;
}
}

.oxel_reviewbox__details_wrapper__name {
 font-weight:600;
 text-transform:uppercase;
 font-size:32px;
 color:color(23);
 line-height:1.2;
 margin-bottom:8px;
}
.oxel_reviewbox__details_wrapper__star_wrapper {
 margin-top:8px;
 margin-bottom:8px;
}
.oxel_reviewbox__details_wrapper__star_wrapper:not(.ct-section):not(.oxy-easy-posts),
.oxel_reviewbox__details_wrapper__star_wrapper.oxy-easy-posts .oxy-posts,
.oxel_reviewbox__details_wrapper__star_wrapper.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
}
.oxel_reviewbox__star {
color: color(26);}.oxel_reviewbox__star 
>svg {width: 22px;height: 22px;}.oxel_reviewbox__star {
}
.oxel_reviewbox__row {
 width:100%;
 padding-top:32px;
 padding-left:32px;
 padding-right:32px;
 padding-bottom:32px;
 text-align:left;
}
.oxel_reviewbox__row:not(.ct-section):not(.oxy-easy-posts),
.oxel_reviewbox__row.oxy-easy-posts .oxy-posts,
.oxel_reviewbox__row.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:center;
justify-content:flex-start;
}
@media (max-width: 767px) {
.oxel_reviewbox__row {
 text-align:center;
}
.oxel_reviewbox__row:not(.ct-section):not(.oxy-easy-posts),
.oxel_reviewbox__row.oxy-easy-posts .oxy-posts,
.oxel_reviewbox__row.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
}

@media (max-width: 479px) {
}

.oxel_reviewbox__review_body {
}
@media (max-width: 767px) {
.oxel_reviewbox__review_body {
 text-align:left;
}
}

@media (max-width: 479px) {
.oxel_reviewbox__review_body {
 text-align:left;
}
}

.oxel_reviewbox {
 background-color:color(25);
 width:100%;
}
.oxel_reviewbox__details_wrapper__title {
 font-size:14px;
 color:color(22);
}
.oxel_toc__primary {
 color:color(23);
 font-size:14px;
 text-transform:capitalize;
 letter-spacing:1px;
 padding-left:8px;
 width:100%;
 padding-bottom:8px;
 border-top-color:color(22);
 border-right-color:color(22);
 border-bottom-color:color(21);
 border-left-color:color(22);
 border-bottom-style:solid;
 border-bottom-width:1px;
 margin-bottom:8px;
 padding-top:8px;
 border-left-width:2px;
 border-left-style:solid;
}
.oxel_toc__sub {
 text-decoration:underline;
 color:color(22);
 margin-left:16px;
}
.oxel_toc__sub__2 {
 margin-left:32px;
}
.oxel_toc__sub__1 {
}
.oxel_toc__container {
 padding-bottom:16px;
 width:100%;
}
.oxel_toc__sub__3 {
 margin-left:48px;
}
.oxel_toc__sub__4 {
 margin-left:64px;
}
.oxel_toc__template {
}
.prescipcion-div {
 width:25%;
}
.prescipcion-div:not(.ct-section):not(.oxy-easy-posts),
.prescipcion-div.oxy-easy-posts .oxy-posts,
.prescipcion-div.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
@media (max-width: 1120px) {
.prescipcion-div {
}
}

@media (max-width: 991px) {
.prescipcion-div {
 width:50%;
}
.prescipcion-div:not(.ct-section):not(.oxy-easy-posts),
.prescipcion-div.oxy-easy-posts .oxy-posts,
.prescipcion-div.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
}

@media (max-width: 767px) {
.prescipcion-div {
 width:50%;
 line-height:1.2;
 text-align:left;
 padding-top:0px;
 padding-left:0px;
 padding-right:0px;
 padding-bottom:0px;
}
}

.titulos-wheel-columna {
 text-transform:uppercase;
 line-height:1.2;
}
@media (max-width: 991px) {
.titulos-wheel-columna {
 line-height:1.2;
 font-size:1.5em;
 width:50vw;
}
}

@media (max-width: 479px) {
.titulos-wheel-columna {
 font-size:1.5rem;
 line-height:1.2;
}
}

.bloque-texto {
}
.bloque-texto:not(.ct-section):not(.oxy-easy-posts),
.bloque-texto.oxy-easy-posts .oxy-posts,
.bloque-texto.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
justify-content:center;
}
@media (max-width: 767px) {
.bloque-texto {
 padding-right:0%;
 padding-left:51%;
}
}

.imagen-n2 {
 width:75%;
 filter:brightness(100%);
}
@media (max-width: 991px) {
.imagen-n2 {
 width:100%;
}
}

@media (max-width: 767px) {
.imagen-n2 {
 width:70%;
}
}

@media (max-width: 479px) {
.imagen-n2 {
 width:90%;
}
}

.imagen-div {
 text-align:center;
 width:0%;
}
.imagen-div:not(.ct-section):not(.oxy-easy-posts),
.imagen-div.oxy-easy-posts .oxy-posts,
.imagen-div.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
@media (max-width: 991px) {
.imagen-div {
 width:50vw;
 padding-left:0px;
 text-align:center;
}
.imagen-div:not(.ct-section):not(.oxy-easy-posts),
.imagen-div.oxy-easy-posts .oxy-posts,
.imagen-div.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
}

.texto-prescripcion {
}
@media (max-width: 767px) {
.texto-prescripcion {
 font-size:12px;
}
}

@media (max-width: 479px) {
.texto-prescripcion {
 font-size:1rem;
}
}

.s3 {
 margin-top:2%;
 margin-bottom:2%;
}
.titulos-pie {
 color:color(4);
 font-size:1.2000000000000002rem;
 font-weight:600;
 line-height:1;
}
.div-pie {
 margin-right:1rem;
 padding-right:1%;
}
@media (max-width: 767px) {
.div-pie {
 text-align:left;
}
.div-pie:not(.ct-section):not(.oxy-easy-posts),
.div-pie.oxy-easy-posts .oxy-posts,
.div-pie.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
}
}

.text-pie {
 color:#ffffff;
 margin-bottom:0px;
}
@media (max-width: 767px) {
.text-pie {
 text-align:left;
 line-height:1.5;
 font-size:12px;
}
}

.iconbox-home {
color: #000000;}.iconbox-home 
>svg {width: 55px;height: 55px;}.iconbox-home {
 font-size:1px;
 margin-bottom:0px;
 padding-bottom:0px;
}
 
            
                        .iconbox-home {
                                flex-direction: column;            }
            
                        .iconbox-home .oxy-icon-box-icon {
                                align-self: flex-start;            }
            
                                                            
                                                                                    .iconbox-home .oxy-icon-box-text {
                align-self: flex-start;            }
            
            
            @media (max-width: 767px) {
.iconbox-home {
 background-color:#872727;
}
}

@media (max-width: 479px) {
.iconbox-home {
 padding-left:5%;
 padding-top:5%;
 padding-bottom:3%;
 padding-right:1%;
 margin-top:0%;
 margin-left:0%;
 margin-bottom:0%;
 margin-right:0%;
 icon_box_heading_typography_font-size:20px;
 icon_box_heading_typography_line-height:1;
}
 
            
                        .iconbox-home {
                text-align: left;                flex-direction: row;            }
            
                        .iconbox-home .oxy-icon-box-icon {
                margin-left: 5px;
margin-right: 23px;
margin-bottom: 0; margin-top: 0;                align-self: flex-start;            }
            
                                                                        .iconbox-home .oxy-icon-box-heading {
                font-size: 20px;
line-height: 1;
margin-bottom: 2px;            }
            
                                                                                    .iconbox-home .oxy-icon-box-text {
                margin-bottom: 2pxpx;align-self: flex-start;            }
            
            
            }

.div-iconos-home {
 background-color:color(4);
 margin-bottom:0%;
 margin-right:1%;
 margin-left:0%;
 padding-right:.5rem;
 height:20rem;
 padding-left:.5em;
 width:24%;
 padding-top:0rem;
 padding-bottom:0em;
 margin-top:0%;
 border-top-color:#e6e6e6;
 border-right-color:#e6e6e6;
 border-bottom-color:#e6e6e6;
 border-left-color:#e6e6e6;
 border-top-width:2px;
 border-right-width:2px;
 border-bottom-width:2px;
 border-left-width:2px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 text-align:left;
}
.div-iconos-home:not(.ct-section):not(.oxy-easy-posts),
.div-iconos-home.oxy-easy-posts .oxy-posts,
.div-iconos-home.ct-section .ct-section-inner-wrap{
display:flex;
align-items:flex-start;
}
@media (max-width: 479px) {
.div-iconos-home {
 padding-top:0rem;
 padding-bottom:0em;
 margin-top:0%;
 height:18vh;
 text-align:left;
 margin-left:0%;
 margin-right:0%;
 margin-bottom:0%;
}
.div-iconos-home:not(.ct-section):not(.oxy-easy-posts),
.div-iconos-home.oxy-easy-posts .oxy-posts,
.div-iconos-home.ct-section .ct-section-inner-wrap{
display:inline-flex;
flex-wrap:nowrap;
align-items:flex-start;
justify-content:center;
}
}

.fast-filter {
 margin-bottom:20px;
 max-width:768px;
 padding-bottom:14px;
}
@media (max-width: 479px) {
.fast-filter {
}
.fast-filter .ct-section-inner-wrap {
padding-bottom: 500px;
}
}

.test {
 color:color(4);
}
.titulo-blog {
}
.accion {
 button-hover_color:#;
}
.servicios {
 background-color:color(4);
 border-top-color:color(7);
 border-right-color:color(7);
 border-bottom-color:color(7);
 border-left-color:color(7);
 border-top-width:3px;
 border-right-width:3px;
 border-bottom-width:3px;
 border-left-width:3px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-radius:5px;
 margin-right:1%;
 width:24%;
 margin-top:-3%;
 z-index:5;
}
@media (max-width: 767px) {
.servicios {
 background-color:color(4);
 margin-top:2%;
 margin-left:4px;
 margin-right:4%;
 margin-bottom:2px;
 border-top-color:color(7);
 border-right-color:color(7);
 border-bottom-color:color(7);
 border-left-color:color(7);
 border-top-width:3px;
 border-right-width:3px;
 border-bottom-width:3px;
 border-left-width:3px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-radius:5px;
}
}

@media (max-width: 479px) {
.servicios {
 z-index:5;
}
}

.servicios-iconbox {
 icon_box_heading_typography_color:color(9);
 icon_box_text_typography_color:color(9);
}
 
            
                        .servicios-iconbox {
                text-align: center;                            }
            
                        .servicios-iconbox .oxy-icon-box-icon {
                                align-self: center;            }
            
                                                                        .servicios-iconbox .oxy-icon-box-heading {
                color: color(9);
margin-bottom: 4px;            }
            
                                                                                    .servicios-iconbox .oxy-icon-box-text {
                color: color(9);
margin-bottom: 4pxpx;align-self: center;            }
            
            
            @media (max-width: 767px) {
.servicios-iconbox {
}
 
            
                        .servicios-iconbox {
                text-align: left;                flex-direction: row;            }
            
                        .servicios-iconbox .oxy-icon-box-icon {
                margin-left: px;
margin-right: 12px;
margin-bottom: 0; margin-top: 0;                            }
            
                                                            
                                                                        
            
            }

@media (max-width: 479px) {
.servicios-iconbox {
 text-align:left;
 line-height:1;
 margin-right:24px;
 margin-left:0px;
}
 
            
                        .servicios-iconbox {
                                flex-direction: row;            }
            
                        .servicios-iconbox .oxy-icon-box-icon {
                margin-left: px;
margin-right: 12px;
margin-bottom: 0; margin-top: 0;                            }
            
                                                                        .servicios-iconbox .oxy-icon-box-heading {
                margin-bottom: 4px;            }
            
                                                                                    .servicios-iconbox .oxy-icon-box-text {
                margin-bottom: 4pxpx;            }
            
            
            }

.servicios-icon:hover{
background-color: color(12);
border: 1px solid color(12);
padding: ;color: color(10);}.servicios-icon:hover{
}
.servicios-icon {
background-color: color(12);
border: 1px solid color(12);
padding: 20px;color: color(10);}.servicios-icon 
>svg {width: 40px;height: 40px;}.servicios-icon {
 transition-duration:0.2s;
}
@media (max-width: 479px) {
.servicios-icon {
padding: 15px;}.servicios-icon 
>svg {width: 30px;height: 30px;}.servicios-icon {
}
}

.oxy-stock-content-styles {
}
.text-bloque {
 margin-bottom:0%;
}
@media (max-width: 991px) {
.text-bloque {
 padding-bottom:0px;
 width:0vh;
 padding-left:0px;
 padding-right:0px;
 padding-top:0px;
}
}

.categoria-articulo {
 text-shadow:0px 0px #;
}
.tag:hover{
}
.tag {
#link_text-171878 a:active
}
.recientes:hover{
 transition-duration:.2s;
 color:color(9);
}
.recientes {
 color:rgba(0,0,0,0.7);
}
.art-c2-titulo {
 color:#000000;
 text-align:left;
 line-height:1.5;
 font-size:1.5rem;
 text-transform:uppercase;
 margin-top:3%;
 margin-bottom:1%;
 font-weight:600;
}
.titulos-todos {
 font-family:Bebas Neue;
 text-transform:uppercase;
 line-height:1.2;
 text-shadow:-2px 2px 2px color(9);
}
@media (max-width: 991px) {
.titulos-todos {
 padding-left:0px;
 width:auto;
 margin-bottom:0px;
 margin-left:0px;
 padding-bottom:0px;
 padding-top:0px;
 padding-right:0px;
 margin-top:0px;
 margin-right:0px;
}
}

@media (max-width: 479px) {
.titulos-todos {
 padding-bottom:0px;
 font-size:30px;
 padding-left:0px;
 margin-left:0px;
 padding-right:0px;
 padding-top:0px;
 margin-right:0px;
 margin-top:0px;
 margin-bottom:0px;
}
}

.titulos-todos-b {
 padding-bottom:1%;
 text-shadow:-2px 2px 2px color(9);
color: black; -webkit-text-fill-color: white; /* Will override color (regardless of order) */ -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black;
}
@media (max-width: 767px) {
.titulos-todos-b {
 width:auto;
}
}

.banner-servicios {
background-image: linear-gradient(color(8), color(12)); height:40vh;
}
.banner-servicios .ct-section-inner-wrap {
padding-top: 2%;
padding-right: 6%;
padding-bottom: 0;
padding-left: 6%;
}
.banner-servicios:not(.ct-section):not(.oxy-easy-posts),
.banner-servicios.oxy-easy-posts .oxy-posts,
.banner-servicios.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
@media (max-width: 1120px) {
.banner-servicios {
 height:40vh;
}
.banner-servicios .ct-section-inner-wrap {
padding-right: 12%;
padding-left: 2%;
}
}

@media (max-width: 767px) {
.banner-servicios {
}
.banner-servicios .ct-section-inner-wrap {
padding-top: 5%;
padding-right: 0;
padding-left: 0;
}
}

@media (max-width: 479px) {
.banner-servicios {
 height:45vh;
 text-align:center;
}
.banner-servicios .ct-section-inner-wrap {
padding-top: 25%;
padding-right: 3%;
padding-bottom: 0;
padding-left: 3%;
}
.banner-servicios:not(.ct-section):not(.oxy-easy-posts),
.banner-servicios.oxy-easy-posts .oxy-posts,
.banner-servicios.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
}

.seccion-servicios {
 background-color:color(6);
}
.seccion-servicios .ct-section-inner-wrap {
padding-top: 1%;
padding-right: 1%;
padding-bottom: 1%;
padding-left: 1%;
}
@media (max-width: 479px) {
.seccion-servicios {
}
.seccion-servicios .ct-section-inner-wrap {
padding-top: 3%;
padding-right: 3%;
padding-bottom: 3%;
padding-left: 3%;
}
}

.caja-servicios {
 background-color:color(4);
 padding-top:1%;
 padding-left:1%;
 padding-right:1%;
 padding-bottom:1%;
 border-top-color:color(7);
 border-right-color:color(7);
 border-bottom-color:color(7);
 border-left-color:color(7);
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-width:3px;
 border-right-width:3px;
 border-bottom-width:3px;
 border-left-width:3px;
 border-radius:5px;
}
@media (max-width: 479px) {
.caja-servicios {
 padding-top:3%;
 padding-left:3%;
 padding-right:3%;
 padding-bottom:3%;
}
}

.icono-servicio {
 width:45px;
 margin-right:0px;
 padding-right:5px;
}
.marrcas {
}
.iframe-container {
}
.alturacartas {
 height:275px;
}
.alturacartas:not(.ct-section):not(.oxy-easy-posts),
.alturacartas.oxy-easy-posts .oxy-posts,
.alturacartas.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
}
@media (max-width: 991px) {
.alturacartas {
}
.alturacartas:not(.ct-section):not(.oxy-easy-posts),
.alturacartas.oxy-easy-posts .oxy-posts,
.alturacartas.ct-section .ct-section-inner-wrap{
justify-content:center;
}
}

.tarj01 {
 width:100%;
 height:200px;
}
.tarj01:not(.ct-section):not(.oxy-easy-posts),
.tarj01.oxy-easy-posts .oxy-posts,
.tarj01.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
justify-content:flex-start;
}
.round {
}
.margin-m {
}
.tabs-7678-tab {
}
.tabs-7678-tab-active {
}
.tabs-contents-7678-tab {
}
.bold {
}
.tabs-7910-tab {
}
.tabs-7910-tab-active {
}
.tabs-contents-7910-tab {
}
.slight {
}
.tertiary {
}
.badge {
}
.input {
}
.select {
}
.primary {
}
.move-up {
}
.filled {
}
.divider {
}
.vertical {
}
.half {
}
.sleek {
}
.checkbox {
}
.radio {
}
.bg-primary-5 {
}
.bg-primary-10 {
}
.bg-primary-20 {
}
.bg-primary-30 {
}
.bg-primary-40 {
}
.bg-primary-50 {
}
.bg-primary-60 {
}
.bg-primary-70 {
}
.bg-primary-80 {
}
.bg-primary-90 {
}
.bg-primary-d-1 {
}
.bg-primary-d-2 {
}
.bg-primary-d-3 {
}
.bg-primary-d-4 {
}
.bg-primary-l-1 {
}
.bg-primary-l-2 {
}
.bg-primary-l-3 {
}
.bg-primary-l-4 {
}
.text-primary-5 {
}
.text-primary-10 {
}
.text-primary-20 {
}
.text-primary-30 {
}
.text-primary-40 {
}
.text-primary-50 {
}
.text-primary-60 {
}
.text-primary-70 {
}
.text-primary-80 {
}
.text-primary-90 {
}
.text-primary-d-1 {
}
.text-primary-d-2 {
}
.text-primary-d-3 {
}
.text-primary-d-4 {
}
.text-primary-l-1 {
}
.text-primary-l-2 {
}
.text-primary-l-3 {
}
.text-primary-l-4 {
}
.border-primary {
}
.border-primary-5 {
}
.border-primary-10 {
}
.border-primary-20 {
}
.border-primary-30 {
}
.border-primary-40 {
}
.border-primary-50 {
}
.border-primary-60 {
}
.border-primary-70 {
}
.border-primary-80 {
}
.border-primary-90 {
}
.border-primary-d-1 {
}
.border-primary-d-2 {
}
.border-primary-d-3 {
}
.border-primary-d-4 {
}
.border-primary-l-1 {
}
.border-primary-l-2 {
}
.border-primary-l-3 {
}
.border-primary-l-4 {
}
.bg-secondariy {
}
.bg-secondariy-5 {
}
.bg-secondariy-10 {
}
.bg-secondariy-20 {
}
.bg-secondariy-30 {
}
.bg-secondariy-40 {
}
.bg-secondariy-50 {
}
.bg-secondariy-60 {
}
.bg-secondariy-70 {
}
.bg-secondariy-80 {
}
.bg-secondariy-90 {
}
.bg-secondariy-d-1 {
}
.bg-secondariy-d-2 {
}
.bg-secondariy-d-3 {
}
.bg-secondariy-d-4 {
}
.bg-secondariy-l-1 {
}
.bg-secondariy-l-2 {
}
.bg-secondariy-l-3 {
}
.bg-secondariy-l-4 {
}
.text-secondariy {
}
.text-secondariy-5 {
}
.text-secondariy-10 {
}
.text-secondariy-20 {
}
.text-secondariy-30 {
}
.text-secondariy-40 {
}
.text-secondariy-50 {
}
.text-secondariy-60 {
}
.text-secondariy-70 {
}
.text-secondariy-80 {
}
.text-secondariy-90 {
}
.text-secondariy-d-1 {
}
.text-secondariy-d-2 {
}
.text-secondariy-d-3 {
}
.text-secondariy-d-4 {
}
.text-secondariy-l-1 {
}
.text-secondariy-l-2 {
}
.text-secondariy-l-3 {
}
.text-secondariy-l-4 {
}
.border-secondariy {
}
.border-secondariy-5 {
}
.border-secondariy-10 {
}
.border-secondariy-20 {
}
.border-secondariy-30 {
}
.border-secondariy-40 {
}
.border-secondariy-50 {
}
.border-secondariy-60 {
}
.border-secondariy-70 {
}
.border-secondariy-80 {
}
.border-secondariy-90 {
}
.border-secondariy-d-1 {
}
.border-secondariy-d-2 {
}
.border-secondariy-d-3 {
}
.border-secondariy-d-4 {
}
.border-secondariy-l-1 {
}
.border-secondariy-l-2 {
}
.border-secondariy-l-3 {
}
.border-secondariy-l-4 {
}
.bg-tertiary {
}
.bg-tertiary-5 {
}
.bg-tertiary-10 {
}
.bg-tertiary-20 {
}
.bg-tertiary-30 {
}
.bg-tertiary-40 {
}
.bg-tertiary-50 {
}
.bg-tertiary-60 {
}
.bg-tertiary-70 {
}
.bg-tertiary-80 {
}
.bg-tertiary-90 {
}
.border-tertiary {
}
.border-tertiary-5 {
}
.border-tertiary-10 {
}
.border-tertiary-20 {
}
.border-tertiary-30 {
}
.border-tertiary-40 {
}
.border-tertiary-50 {
}
.border-tertiary-60 {
}
.border-tertiary-70 {
}
.border-tertiary-80 {
}
.border-tertiary-90 {
}
.text-title {
}
.bg-light {
}
.bg-light-5 {
}
.bg-light-10 {
}
.bg-light-20 {
}
.bg-light-30 {
}
.bg-light-40 {
}
.bg-light-50 {
}
.bg-light-60 {
}
.bg-light-70 {
}
.bg-light-80 {
}
.bg-light-90 {
}
.text-light-5 {
}
.text-light-10 {
}
.text-light-20 {
}
.text-light-30 {
}
.text-light-40 {
}
.text-light-50 {
}
.text-light-60 {
}
.text-light-70 {
}
.text-light-80 {
}
.text-light-90 {
}
.border-light {
}
.border-light-5 {
}
.border-light-10 {
}
.border-light-20 {
}
.border-light-30 {
}
.border-light-40 {
}
.border-light-50 {
}
.border-light-60 {
}
.border-light-70 {
}
.border-light-80 {
}
.border-light-90 {
}
.bg-dark {
}
.bg-dark-5 {
}
.bg-dark-10 {
}
.bg-dark-20 {
}
.bg-dark-30 {
}
.bg-dark-40 {
}
.bg-dark-50 {
}
.bg-dark-60 {
}
.bg-dark-70 {
}
.bg-dark-80 {
}
.bg-dark-90 {
}
.text-dark-5 {
}
.text-dark-10 {
}
.text-dark-20 {
}
.text-dark-30 {
}
.text-dark-40 {
}
.text-dark-50 {
}
.text-dark-60 {
}
.text-dark-70 {
}
.text-dark-80 {
}
.text-dark-90 {
}
.border-dark {
}
.border-dark-5 {
}
.border-dark-10 {
}
.border-dark-20 {
}
.border-dark-30 {
}
.border-dark-40 {
}
.border-dark-50 {
}
.border-dark-60 {
}
.border-dark-70 {
}
.border-dark-80 {
}
.border-dark-90 {
}
.bg-success {
}
.bg-success-5 {
}
.bg-success-10 {
}
.bg-success-20 {
}
.bg-success-30 {
}
.bg-success-40 {
}
.bg-success-50 {
}
.bg-success-60 {
}
.bg-success-70 {
}
.bg-success-80 {
}
.bg-success-90 {
}
.text-success {
}
.text-success-5 {
}
.text-success-10 {
}
.text-success-20 {
}
.text-success-30 {
}
.text-success-40 {
}
.text-success-50 {
}
.text-success-60 {
}
.text-success-70 {
}
.text-success-80 {
}
.text-success-90 {
}
.border-success {
}
.border-success-5 {
}
.border-success-10 {
}
.border-success-20 {
}
.border-success-30 {
}
.border-success-40 {
}
.border-success-50 {
}
.border-success-60 {
}
.border-success-70 {
}
.border-success-80 {
}
.border-success-90 {
}
.bg-error {
}
.bg-error-5 {
}
.bg-error-10 {
}
.bg-error-20 {
}
.bg-error-30 {
}
.bg-error-40 {
}
.bg-error-50 {
}
.bg-error-60 {
}
.bg-error-70 {
}
.bg-error-80 {
}
.bg-error-90 {
}
.text-error {
}
.text-error-5 {
}
.text-error-10 {
}
.text-error-20 {
}
.text-error-30 {
}
.text-error-40 {
}
.text-error-50 {
}
.text-error-60 {
}
.text-error-70 {
}
.text-error-80 {
}
.text-error-90 {
}
.border-error {
}
.border-error-5 {
}
.border-error-10 {
}
.border-error-20 {
}
.border-error-30 {
}
.border-error-40 {
}
.border-error-50 {
}
.border-error-60 {
}
.border-error-70 {
}
.border-error-80 {
}
.border-error-90 {
}
.padding-4xs {
}
.padding-3xs {
}
.padding-2xs {
}
.padding-xs {
}
.padding-2xl {
}
.padding-3xl {
}
.padding-4xl {
}
.padding-left-4xs {
}
.padding-left-3xs {
}
.padding-left-2xs {
}
.padding-left-xs {
}
.padding-left-s {
}
.padding-left-m {
}
.padding-left-l {
}
.padding-left-xl {
}
.padding-left-2xl {
}
.padding-left-3xl {
}
.padding-left-4xl {
}
.padding-right-4xs {
}
.padding-right-3xs {
}
.padding-right-2xs {
}
.padding-right-xs {
}
.padding-right-s {
}
.padding-right-l {
}
.padding-right-xl {
}
.padding-right-2xl {
}
.padding-right-3xl {
}
.padding-right-4xl {
}
.padding-top-4xs {
}
.padding-top-3xs {
}
.padding-top-2xs {
}
.padding-top-xs {
}
.padding-top-s {
}
.padding-top-l {
}
.padding-top-xl {
}
.padding-top-2xl {
}
.padding-top-3xl {
}
.padding-top-4xl {
}
.padding-bottom-4xs {
}
.padding-bottom-3xs {
}
.padding-bottom-2xs {
}
.padding-bottom-xs {
}
.padding-bottom-s {
}
.padding-bottom-l {
}
.padding-bottom-xl {
}
.padding-bottom-2xl {
}
.padding-bottom-3xl {
}
.padding-bottom-4xl {
}
.padding-horizontal-4xs {
}
.padding-horizontal-3xs {
}
.padding-horizontal-2xs {
}
.padding-horizontal-xs {
}
.padding-horizontal-s {
}
.padding-horizontal-m {
}
.padding-horizontal-l {
}
.padding-horizontal-xl {
}
.padding-horizontal-2xl {
}
.padding-horizontal-3xl {
}
.padding-horizontal-4xl {
}
.padding-vertical-4xs {
}
.padding-vertical-3xs {
}
.padding-vertical-2xs {
}
.padding-vertical-xs {
}
.padding-vertical-s {
}
.padding-vertical-m {
}
.padding-vertical-l {
}
.padding-vertical-xl {
}
.padding-vertical-2xl {
}
.padding-vertical-3xl {
}
.padding-vertical-4xl {
}
.margin-4xs {
}
.margin-3xs {
}
.margin-2xs {
}
.margin-xs {
}
.margin-s {
}
.margin-l {
}
.margin-xl {
}
.margin-2xl {
}
.margin-3xl {
}
.margin-4xl {
}
.margin-left-4xs {
}
.margin-left-3xs {
}
.margin-left-2xs {
}
.margin-left-xs {
}
.margin-left-s {
}
.margin-left-m {
}
.margin-left-l {
}
.margin-left-xl {
}
.margin-left-2xl {
}
.margin-left-3xl {
}
.margin-left-4xl {
}
.margin-right-4xs {
}
.margin-right-3xs {
}
.margin-right-2xs {
}
.margin-right-s {
}
.margin-right-l {
}
.margin-right-xl {
}
.margin-right-2xl {
}
.margin-right-3xl {
}
.margin-right-4xl {
}
.margin-top-4xs {
}
.margin-top-3xs {
}
.margin-top-2xs {
}
.margin-top-xs {
}
.margin-top-s {
}
.margin-top-m {
}
.margin-top-l {
}
.margin-top-xl {
}
.margin-top-2xl {
}
.margin-top-3xl {
}
.margin-top-4xl {
}
.margin-bottom-4xs {
}
.margin-bottom-3xs {
}
.margin-bottom-2xs {
}
.margin-bottom-xs {
}
.margin-bottom-2xl {
}
.margin-bottom-3xl {
}
.margin-bottom-4xl {
}
.margin-horizontal-4xs {
}
.margin-horizontal-3xs {
}
.margin-horizontal-2xs {
}
.margin-horizontal-xs {
}
.margin-horizontal-s {
}
.margin-horizontal-m {
}
.margin-horizontal-l {
}
.margin-horizontal-xl {
}
.margin-horizontal-2xl {
}
.margin-horizontal-3xl {
}
.margin-horizontal-4xl {
}
.margin-vertical-4xs {
}
.margin-vertical-3xs {
}
.margin-vertical-2xs {
}
.margin-vertical-xs {
}
.margin-vertical-s {
}
.margin-vertical-m {
}
.margin-vertical-l {
}
.margin-vertical-xl {
}
.margin-vertical-2xl {
}
.margin-vertical-3xl {
}
.margin-vertical-4xl {
}
.gap-3xs {
}
.gap-2xs {
}
.gap-2xl {
}
.gap-3xl {
}
.gap-4xl {
}
.text-xs {
}
.text-m {
}
.text-3xl {
}
.text-4xl {
}
.line-height-xs {
}
.line-height-s {
}
.line-height-m {
}
.line-height-l {
}
.line-height-xl {
}
.italic {
}
.lowercase {
}
.uppercase {
}
.underline {
}
.font-100 {
}
.font-200 {
}
.font-700 {
}
.font-800 {
}
.font-900 {
}
.text-left {
}
.text-right {
}
.product-title {
}
.tagline {
}
.column {
}
.columns-6 {
}
.columns-7 {
}
.columns-8 {
}
.column--on-xl {
}
.row--on-xl {
}
.columns-2--on-xl {
}
.columns-3--on-xl {
}
.columns-4--on-xl {
}
.columns-5--on-xl {
}
.columns-6--on-xl {
}
.row--on-l {
}
.columns-3--on-l {
}
.columns-4--on-l {
}
.columns-5--on-l {
}
.columns-6--on-l {
}
.row--on-m {
}
.columns-2--on-m {
}
.columns-3--on-m {
}
.columns-4--on-m {
}
.columns-5--on-m {
}
.columns-6--on-m {
}
.row--on-s {
}
.columns-2--on-s {
}
.columns-3--on-s {
}
.columns-4--on-s {
}
.columns-5--on-s {
}
.columns-6--on-s {
}
.columns-min-5 {
}
.columns-min-10 {
}
.columns-min-20 {
}
.columns-min-30 {
}
.columns-min-40 {
}
.columns-min-50 {
}
.columns-min-60 {
}
.columns-min-70 {
}
.flex-1 {
}
.flex-2 {
}
.flex-3 {
}
.flex-wrap {
}
.flex-nowrap {
}
.col-span-3 {
}
.col-span-4 {
}
.col-span-5 {
}
.col-span-6 {
}
.col-span-7 {
}
.col-span-8 {
}
.col-span-1--on-xl {
}
.col-span-2--on-xl {
}
.col-span-3--on-xl {
}
.col-span-4--on-xl {
}
.col-span-5--on-xl {
}
.col-span-6--on-xl {
}
.col-span-2--on-l {
}
.col-span-3--on-l {
}
.col-span-4--on-l {
}
.col-span-5--on-l {
}
.col-span-6--on-l {
}
.col-span-2--on-m {
}
.col-span-3--on-m {
}
.col-span-4--on-m {
}
.col-span-5--on-m {
}
.col-span-6--on-m {
}
.col-span-1--on-s {
}
.col-span-2--on-s {
}
.col-span-3--on-s {
}
.col-span-4--on-s {
}
.col-span-5--on-s {
}
.col-span-6--on-s {
}
.col-start-1 {
}
.col-start-2 {
}
.col-start-3 {
}
.col-start-4 {
}
.col-start-5 {
}
.col-start-6 {
}
.col-start-7 {
}
.col-start-8 {
}
.col-start-1--on-xl {
}
.col-start-2--on-xl {
}
.col-start-3--on-xl {
}
.col-start-4--on-xl {
}
.col-start-5--on-xl {
}
.col-start-6--on-xl {
}
.col-start-1--on-l {
}
.col-start-2--on-l {
}
.col-start-3--on-l {
}
.col-start-4--on-l {
}
.col-start-5--on-l {
}
.col-start-6--on-l {
}
.col-start-1--on-m {
}
.col-start-2--on-m {
}
.col-start-3--on-m {
}
.col-start-4--on-m {
}
.col-start-5--on-m {
}
.col-start-6--on-m {
}
.col-start-1--on-s {
}
.col-start-2--on-s {
}
.col-start-3--on-s {
}
.col-start-4--on-s {
}
.col-start-5--on-s {
}
.col-start-6--on-s {
}
.row-span-2 {
}
.row-span-3 {
}
.row-span-4 {
}
.row-span-5 {
}
.row-span-6 {
}
.row-span-7 {
}
.row-span-8 {
}
.row-span-1--on-xl {
}
.row-span-2--on-xl {
}
.row-span-3--on-xl {
}
.row-span-4--on-xl {
}
.row-span-5--on-xl {
}
.row-span-6--on-xl {
}
.row-span-1--on-l {
}
.row-span-2--on-l {
}
.row-span-3--on-l {
}
.row-span-4--on-l {
}
.row-span-5--on-l {
}
.row-span-6--on-l {
}
.row-span-1--on-m {
}
.row-span-2--on-m {
}
.row-span-3--on-m {
}
.row-span-4--on-m {
}
.row-span-5--on-m {
}
.row-span-6--on-m {
}
.row-span-1--on-s {
}
.row-span-2--on-s {
}
.row-span-3--on-s {
}
.row-span-4--on-s {
}
.row-span-5--on-s {
}
.row-span-6--on-s {
}
.row-start-1 {
}
.row-start-2 {
}
.row-start-3 {
}
.row-start-4 {
}
.row-start-5 {
}
.row-start-6 {
}
.row-start-7 {
}
.row-start-8 {
}
.row-start-1--on-xl {
}
.row-start-2--on-xl {
}
.row-start-3--on-xl {
}
.row-start-4--on-xl {
}
.row-start-5--on-xl {
}
.row-start-6--on-xl {
}
.row-start-1--on-l {
}
.row-start-2--on-l {
}
.row-start-3--on-l {
}
.row-start-4--on-l {
}
.row-start-5--on-l {
}
.row-start-6--on-l {
}
.row-start-1--on-m {
}
.row-start-2--on-m {
}
.row-start-3--on-m {
}
.row-start-4--on-m {
}
.row-start-5--on-m {
}
.row-start-6--on-m {
}
.row-start-1--on-s {
}
.row-start-2--on-s {
}
.row-start-3--on-s {
}
.row-start-4--on-s {
}
.row-start-5--on-s {
}
.row-start-6--on-s {
}
.items-left {
}
.content-left {
}
.items-center {
}
.items-right {
}
.content-right {
}
.items-top {
}
.content-top {
}
.content-middle {
}
.items-bottom {
}
.content-bottom {
}
.content-stretch {
}
.space-between {
}
.space-around {
}
.self-left {
}
.self-center {
}
.self-top {
}
.self-middle {
}
.self-bottom {
}
.self-stretch {
}
.full-height {
}
.screen-width {
}
.screen-height {
}
.auto-width {
}
.auto-height {
}
.width-90 {
}
.width-80 {
}
.width-70 {
}
.width-60 {
}
.width-50 {
}
.width-40 {
}
.width-30 {
}
.width-20 {
}
.width-10 {
}
.max-site-width {
}
.max-width-140 {
}
.max-width-130 {
}
.max-width-120 {
}
.max-width-110 {
}
.max-width-100 {
}
.max-width-90 {
}
.max-width-80 {
}
.max-width-70 {
}
.max-width-50 {
}
.max-width-40 {
}
.max-width-30 {
}
.max-width-20 {
}
.max-width-10 {
}
.radius-xs {
}
.radius-s {
}
.radius-l {
}
.radius-xl {
}
.radius-full {
}
.border {
}
.border-left {
}
.border-right {
}
.border-top {
}
.border-bottom {
}
.shadow-xs {
}
.shadow-s {
}
.shadow-l {
}
.shadow-xl {
}
.opacity-0 {
}
.opacity-10 {
}
.opacity-20 {
}
.opacity-30 {
}
.opacity-40 {
}
.opacity-50 {
}
.opacity-80 {
}
.opacity-90 {
}
.opacity-100 {
}
.aspect-1 {
}
.aspect-4-3 {
}
.aspect-3-4 {
}
.aspect-3-2 {
}
.aspect-2-3 {
}
.aspect-16-9 {
}
.aspect-9-16 {
}
.fit-contain {
}
.fit-cover {
}
.fit-fill {
}
.bg-blur-xs {
}
.bg-blur-s {
}
.bg-blur-m {
}
.bg-blur-l {
}
.bg-blur-xl {
}
.grayscale {
}
.rotate-90 {
}
.rotate-180 {
}
.display-none {
}
.visible {
}
.hidden {
}
.overflow-auto {
}
.overflow-x-hidden {
}
.overflow-x-auto {
}
.overflow-y-hidden {
}
.overflow-y-auto {
}
.list-none {
}
.white-space-nowrap {
}
.absolute {
}
.sticky {
}
.fixed {
}
.inset-0 {
}
.bottom-0 {
}
.top-0 {
}
.left-0 {
}
.right-0 {
}
.pointer {
}
.not-allowed {
}
.cursor-auto {
}
.no-pointer-events {
}
.z--1 {
}
.z-0 {
}
.z-1 {
}
.z-100 {
}
.z-1000 {
}
.z-10000 {
}
.oxy-superbox-primary {
}
.oxy-superbox-secondary {
}
.hover-float {
}
.btn-whatsapp {
color: #333333;}.btn-whatsapp 
>svg {width: 40px;height: 40px;}.btn-whatsapp {
}
.image-size {
 width:150px;
}
.ccc-grid-3 {
}
.ccc-grid-3:not(.ct-section):not(.oxy-easy-posts),
.ccc-grid-3.oxy-easy-posts .oxy-posts,
.ccc-grid-3.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
}
.ccc-related-grid {
}
.ccc-related-grid:not(.ct-section):not(.oxy-easy-posts),
.ccc-related-grid.oxy-easy-posts .oxy-posts,
.ccc-related-grid.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
}
.ccc-header-btn {
}
:root{--ccc-bg:#0f1115;--ccc-card-bg:#181b21;--ccc-card-hover:#1e2229;--ccc-text-main:#ffffff;--ccc-text-muted:#9ca3af;--ccc-accent:#3b82f6;--ccc-accent-glow:rgba(59,130,246,0.4);--ccc-border:#2d3748;--ccc-glass:rgba(255,255,255,0.03);--ccc-font-body:'Inter',system-ui,-apple-system,sans-serif;--ccc-font-titles:'Bebas Neue',sans-serif}body{background-color:var(--ccc-bg)!important;color:var(--ccc-text-main);font-family:var(--ccc-font-body);margin:0;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}.ccc-container{max-width:1100px;margin:0 auto;width:100%}.ccc-section-padding{padding:80px 20px}@media (min-width:768px){.ccc-section-padding{padding:100px 20px}}.ccc-btn-primary,.ccc-btn-secondary,.ccc-main-title,.ccc-section-heading,.ccc-tagline,h3{font-family:var(--ccc-font-titles)!important;letter-spacing:1px}.ccc-main-title{font-size:clamp(2.5rem,8vw,4.5rem);font-weight:400;text-transform:uppercase;text-align:center;width:100%;max-width:900px;margin-left:auto!important;margin-right:auto!important;margin-bottom:20px;line-height:1.1;background:linear-gradient(to bottom right,#ffffff,#94a3b8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}@media (max-width:768px){.ccc-main-title{font-size:2.8rem;letter-spacing:0px!important;line-height:1.3!important}}@media (max-width:380px){.ccc-main-title{font-size:2.2rem}}.ccc-tagline{text-align:center;color:var(--ccc-accent);font-size:0.85rem;letter-spacing:2px;text-transform:uppercase;font-weight:700;margin-bottom:20px;display:block}.ccc-lead{text-align:center;font-size:clamp(1rem,2vw,1.25rem);line-height:1.6;max-width:800px;margin:0 auto 50px;color:var(--ccc-text-muted);font-weight:300;padding:0 10px}.ccc-lead strong{color:#fff;font-weight:600}.ccc-section-heading{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:800;margin-bottom:50px;text-align:center;background:linear-gradient(90deg,#fff,#9ca3af);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:block}.ccc-btn-primary{background:var(--ccc-accent);color:#ffffff!important;padding:15px 35px;border-radius:50px;text-decoration:none;font-weight:700;text-transform:uppercase;font-size:0.9rem;display:inline-block;box-shadow:0 10px 20px -5px var(--ccc-accent-glow);border:none}.ccc-btn-secondary{background:transparent;color:#ffffff!important;border:1px solid var(--ccc-border);padding:14px 34px;border-radius:50px;text-decoration:none;font-weight:700;text-transform:uppercase;font-size:0.9rem;display:inline-block}.ccc-section-white{background-color:#ffffff!important;padding:40px 0;color:#1a1d24!important}.ccc-logo-slider{width:100%;overflow:hidden;position:relative;background:#ffffff;mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent)}.ccc-logo-track{display:flex;width:max-content;gap:60px;animation:ccc-scroll 30s linear infinite}.ccc-client-logo{height:40px;width:auto;filter:grayscale(100%);opacity:0.6;mix-blend-mode:multiply}@keyframes ccc-scroll{to{transform:translateX(-50%)}}:root{--ccc-bg:#0f1115;--ccc-card-bg:#181b21;--ccc-card-hover:#1e2229;--ccc-text-main:#ffffff;--ccc-text-muted:#9ca3af;--ccc-accent:#3b82f6;--ccc-accent-glow:rgba(59,130,246,0.4);--ccc-border:#2d3748;--ccc-glass:rgba(255,255,255,0.03);--ccc-font:'Inter',system-ui,-apple-system,sans-serif;--ccc-heading-font:'Bebas Neue',sans-serif}body{background-color:var(--ccc-bg)!important;color:var(--ccc-text-main);font-family:var(--ccc-font);margin:0;line-height:1.6;-webkit-font-smoothing:antialiased}h1,h2,h3,.ccc-main-title,.ccc-section-heading{font-family:var(--ccc-heading-font)!important;text-transform:uppercase;font-weight:400}.ccc-navbar{position:fixed;top:0;left:0;width:100%;padding:20px 0;background:rgba(15,17,21,0.9);backdrop-filter:blur(12px);z-index:1000;border-bottom:1px solid rgba(255,255,255,0.05)}.ccc-hero-section{padding-top:180px;padding-bottom:80px;text-align:center}.ccc-hero-buttons{display:flex;gap:20px;justify-content:center;margin-top:40px;flex-wrap:wrap}.ccc-btn-primary,.ccc-btn-secondary{padding:15px 35px;border-radius:50px;text-decoration:none;font-weight:700;text-transform:uppercase;font-size:0.9rem;transition:all 0.3s ease;display:inline-block;color:#fff!important}.ccc-btn-primary{background:var(--ccc-accent);box-shadow:0 10px 20px -5px var(--ccc-accent-glow);border:none}.ccc-btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 30px -5px var(--ccc-accent-glow)}.ccc-btn-secondary{background:transparent;border:1px solid var(--ccc-border)}.ccc-btn-secondary:hover{border-color:#fff;background:rgba(255,255,255,0.05)}.ccc-main-title{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:400;text-align:center;margin:0 0 15px 0;line-height:1.1;letter-spacing:-1px;text-transform:uppercase;background:linear-gradient(to bottom right,#ffffff,#94a3b8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.ccc-tagline{text-align:center;color:var(--ccc-accent);font-size:0.9rem;letter-spacing:3px;text-transform:uppercase;font-weight:700;margin-bottom:20px;display:block}.ccc-lead{text-align:center;font-size:clamp(1.1rem,2vw,1.3rem);max-width:800px;margin:0 auto 40px;color:var(--ccc-text-muted);font-weight:300}.ccc-lead strong{color:#fff;font-weight:600}.ccc-section-heading{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:400;margin-bottom:50px;text-align:center;display:block;color:#fff}.ccc-section-white{background-color:#ffffff!important;padding:50px 0;overflow:hidden;width:100%}.ccc-section-white .ccc-text-muted{color:#64748b!important}.ccc-logo-slider{width:100%;position:relative;background:#ffffff;mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent)}.ccc-logo-track{display:flex;width:max-content;gap:60px;animation:ccc-scroll 40s linear infinite}@media (hover:hover){.ccc-logo-track:hover{animation-play-state:paused}}.ccc-slide{width:200px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.ccc-client-logo{max-width:130px;height:auto;filter:grayscale(100%) opacity(0.8);transition:all 0.3s ease;mix-blend-mode:multiply}.ccc-client-logo:hover{filter:grayscale(0%) opacity(1);transform:scale(1.1)}@keyframes ccc-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}.ccc-values-grid{display:grid;grid-template-columns:1fr;gap:30px;margin-top:40px}@media (min-width:992px){.ccc-values-grid{grid-template-columns:repeat(3,1fr)}}.ccc-value-card{background:linear-gradient(145deg,#1a1d24,#131519);border:1px solid var(--ccc-border);padding:40px 30px;border-radius:20px;transition:all 0.3s ease;position:relative;top:0}.ccc-value-card:hover{top:-5px;border-color:var(--ccc-accent);box-shadow:0 15px 30px -10px var(--ccc-accent-glow);background:linear-gradient(145deg,#1e2229,#181b21)}.ccc-value-icon{width:60px;height:60px;background:rgba(59,130,246,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--ccc-accent);margin-bottom:20px;transition:all 0.3s ease}.ccc-value-card:hover .ccc-value-icon{background:var(--ccc-accent);color:#fff;transform:scale(1.1)}.ccc-value-card h3{color:#fff;margin-bottom:10px;font-weight:700}.ccc-value-card p{color:var(--ccc-text-muted);font-size:0.95rem;margin:0}#resultados .ccc-video-wrapper{background:var(--ccc-card-bg);border:1px solid var(--ccc-border);border-radius:24px;padding:25px!important;display:grid;grid-template-columns:1fr;gap:30px;align-items:center}@media(min-width:992px){#resultados .ccc-video-wrapper{grid-template-columns:1fr 1fr;padding:30px!important}}.ccc-video-container{width:100%;max-width:300px!important;aspect-ratio:16/9!important;margin:0 auto;border-radius:18px;overflow:hidden;box-shadow:0 20px 50px -20px rgba(0,0,0,0.6);background:#000;border:3px solid #2d3748;position:relative}.ccc-video-frame{position:absolute!important;top:0;left:0;width:100%;height:100%;border:none;object-fit:cover}.ccc-video-text{text-align:left}.ccc-services-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:40px}@media (min-width:768px){.ccc-services-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1200px){.ccc-services-grid{grid-template-columns:repeat(4,1fr)}}.ccc-service-card{background:rgba(24,27,33,0.6);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:30px 25px;display:flex;flex-direction:column;text-decoration:none;transition:all 0.3s cubic-bezier(0.25,0.8,0.25,1);height:100%;position:relative;top:0}.ccc-service-card:hover{background:rgba(24,27,33,0.95);border-color:var(--ccc-accent);transform:translateY(-6px);box-shadow:0 15px 35px -10px rgba(59,130,246,0.25)}.ccc-service-cat{color:var(--ccc-accent);font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}.ccc-service-card h3{color:#fff;font-size:1.15rem;font-weight:800;margin:0 0 12px 0;line-height:1.25}.ccc-service-card p{color:var(--ccc-text-muted);font-size:0.9rem;line-height:1.5;margin-bottom:25px;flex-grow:1}.ccc-service-link{margin-top:auto;color:#fff;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;display:flex;align-items:center}.ccc-service-link::after{content:'→';margin-left:6px;color:var(--ccc-accent);transition:margin 0.2s}.ccc-service-card:hover .ccc-service-link::after{margin-left:10px}.ccc-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;width:100%}.ccc-blog-card{background:var(--ccc-card-bg);border:1px solid var(--ccc-border);border-radius:16px;overflow:hidden;transition:transform 0.3s ease;display:flex;flex-direction:column;height:100%;text-decoration:none}.ccc-blog-card:hover{transform:translateY(-8px);border-color:var(--ccc-accent)}.ccc-blog-thumb{height:220px;width:100%;background-size:cover;background-position:center;background-color:#232730}.ccc-blog-content{padding:25px;flex-grow:1;display:flex;flex-direction:column}.ccc-blog-date{font-size:0.75rem;color:var(--ccc-accent);margin-bottom:8px;text-transform:uppercase;font-weight:700}.ccc-blog-title{font-size:1.15rem;font-weight:700;color:#fff;margin:0 0 15px 0;line-height:1.4}.ccc-blog-link{margin-top:auto;color:var(--ccc-text-muted);font-size:0.9rem;font-weight:500}.ccc-blog-card:hover .ccc-blog-link{color:#fff}.ccc-director-compact{background:var(--ccc-card-bg);border:1px solid var(--ccc-border);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;max-width:900px;margin:0 auto}@media (min-width:768px){.ccc-director-compact{flex-direction:row;align-items:stretch;max-height:380px}}.ccc-director-img-col{width:100%;height:300px;position:relative}@media (min-width:768px){.ccc-director-img-col{width:40%;height:auto;min-height:100%}}.ccc-director-photo{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}.ccc-director-info-col{padding:30px;display:flex;flex-direction:column;justify-content:center;width:100%}@media (min-width:768px){.ccc-director-info-col{width:60%;padding:40px}}.ccc-director-name{font-size:2rem;font-weight:800;color:#fff;margin:0 0 15px 0;line-height:1.1}.ccc-director-quote{font-size:1rem;color:var(--ccc-text-muted);font-style:italic;margin-bottom:20px;border-left:3px solid var(--ccc-accent);padding-left:20px;line-height:1.6}.ccc-director-quote strong{color:#fff}.ccc-director-sig{font-size:0.85rem;color:#64748b;margin-top:auto;background:rgba(255,255,255,0.03);padding:10px 15px;border-radius:8px;align-self:flex-start}.ccc-promise-box{text-align:left;background:linear-gradient(145deg,#1a1d24,#131519);border:1px solid var(--ccc-border);border-radius:24px;padding:40px}.ccc-form-header{text-align:center;margin-bottom:30px}.piotnet-forms-fields-wrapper{gap:25px!important}.piotnetforms-field-label{color:var(--ccc-text-muted)!important;font-size:0.8rem!important;text-transform:uppercase!important;letter-spacing:2px!important;font-weight:700!important}.piotnetforms-field{background:var(--ccc-glass)!important;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1)!important;border-radius:12px!important;color:#fff!important;padding:18px 20px!important}.piotnetforms-button{background:linear-gradient(90deg,#2563eb,var(--ccc-accent),#60a5fa)!important;color:#ffffff!important;border-radius:50px!important;padding:22px 40px!important;font-weight:800!important;text-transform:uppercase!important;border:none!important}.ccc-container{max-width:1100px;margin:0 auto;padding:0 20px}.ccc-section-padding{padding:80px 20px}@media(min-width:768px){.ccc-section-padding{padding:100px 20px}}@keyframes ccc-fade-up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.ccc-animate-entry{animation:ccc-fade-up 0.8s cubic-bezier(0.2,0.8,0.2,1) forwards}.ccc-delay-1{animation-delay:0.1s}/* =========================================
   CSS PÁGINA NOSOTROS (MASTER)
   ========================================= */

/* --- 1. CORE & VARIABLES --- */
:root {
    --ccc-bg: #0f1115;
    --ccc-card-bg: #181b21;
    --ccc-card-hover: #1e2229;
    --ccc-text-main: #ffffff;
    --ccc-text-muted: #9ca3af;
    --ccc-accent: #3b82f6; 
    --ccc-accent-glow: rgba(59, 130, 246, 0.4);
    --ccc-border: #2d3748;
    --ccc-glass: rgba(255, 255, 255, 0.03);
    --ccc-font: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
    background-color: var(--ccc-bg) !important;
    color: var(--ccc-text-main);
    font-family: var(--ccc-font);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --- 2. HERO SECTION --- */
.ccc-hero-section {
    padding-top: 150px;
    padding-bottom: 80px;
    text-align: center;
}

.ccc-main-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900; text-align: center; margin: 0 0 15px 0;
    line-height: 1.1; letter-spacing: -1px; text-transform: uppercase;
    background: linear-gradient(to bottom right, #ffffff, #94a3b8);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.ccc-tagline {
    text-align: center; color: var(--ccc-accent); font-size: 0.9rem;
    letter-spacing: 3px; text-transform: uppercase; font-weight: 700;
    margin-bottom: 20px; display: block;
}

.ccc-lead {
    text-align: center; font-size: clamp(1.1rem, 2vw, 1.3rem);
    max-width: 800px; margin: 0 auto 40px; color: var(--ccc-text-muted); font-weight: 300;
}

/* --- 3. HISTORIA & ACRÓNIMO (SECCIÓN BLANCA) --- */
.ccc-section-white {
    background-color: #ffffff !important;
    color: #1a1d24 !important;
}

.ccc-grid-2-text {
    display: grid;
    grid-template-columns: 1fr; /* Móvil */
    gap: 50px;
    align-items: center;
}

@media(min-width: 992px) {
    .ccc-grid-2-text { grid-template-columns: 1fr 1fr; }
}

/* Caja Acrónimo */
.ccc-acronym-box {
    background: #f8fafc;
    padding: 40px;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
}

.ccc-acronym-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e2e8f0;
}

.ccc-acronym-item:last-child {
    margin-bottom: 0; padding-bottom: 0; border-bottom: none;
}

.ccc-letter {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--ccc-accent);
    width: 60px;
    flex-shrink: 0;
}

.ccc-meaning strong {
    display: block; font-size: 1.1rem; color: #0f1115; margin-bottom: 5px;
}

.ccc-meaning p { margin: 0; font-size: 0.95rem; color: #64748b; }


/* --- 4. EXPERTISE (GRID 2x2 & CYBER CARDS) --- */
.ccc-tech-bg-container {
    position: relative; background: #0f1115; overflow: hidden;
}

.ccc-digital-grid {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
    background-size: 40px 40px; z-index: 1; opacity: 0.5;
    mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
}

.ccc-expertise-grid {
    display: grid;
    grid-template-columns: 1fr; /* Móvil: 1 columna */
    gap: 30px;
    margin-top: 40px;
}

@media (min-width: 768px) {
    .ccc-expertise-grid {
        grid-template-columns: repeat(2, 1fr); /* PC: 2 columnas exactas */
    }
}

.ccc-cyber-card {
    background: rgba(20, 25, 35, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(59, 130, 246, 0.1);
    padding: 35px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ccc-cyber-card:hover {
    transform: translateY(-8px);
    border-color: var(--ccc-accent);
    box-shadow: 0 20px 40px -20px rgba(59, 130, 246, 0.2);
    background: rgba(20, 25, 35, 0.8);
}

.ccc-card-corners {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; opacity: 0.3; transition: opacity 0.3s;
}
.ccc-card-corners::before, .ccc-card-corners::after {
    content: ''; position: absolute; width: 20px; height: 20px; border-color: var(--ccc-accent);
}
.ccc-card-corners::before { top: 10px; left: 10px; border-top: 2px solid; border-left: 2px solid; }
.ccc-card-corners::after { bottom: 10px; right: 10px; border-bottom: 2px solid; border-right: 2px solid; }
.ccc-cyber-card:hover .ccc-card-corners { opacity: 1; }

.ccc-glow-icon {
    width: 60px; height: 60px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; margin-bottom: 20px;
    z-index: 2; position: relative;
}

.ccc-cyber-card h3 { color: #fff; font-size: 1.3rem; margin-bottom: 15px; font-weight: 700; z-index: 2; position: relative; }
.ccc-cyber-card p { color: var(--ccc-text-muted); font-size: 0.95rem; margin: 0; z-index: 2; position: relative; }


/* --- 5. DIRECTOR (COMPACTO HORIZONTAL) --- */
.ccc-director-compact {
    background: var(--ccc-card-bg);
    border: 1px solid var(--ccc-border);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Móvil: Apilado */
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .ccc-director-compact {
        flex-direction: row; /* PC: Lado a Lado */
        align-items: stretch;
        max-height: 380px; /* Control de altura para compactar */
    }
}

.ccc-director-img-col {
    width: 100%;
    height: 300px; /* Altura en Móvil */
    position: relative;
}

@media (min-width: 768px) {
    .ccc-director-img-col {
        width: 35%; /* Ancho Foto PC */
        height: auto;
        min-height: 100%;
    }
}

.ccc-director-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%; /* Ajuste de rostro */
    display: block;
}

.ccc-director-info-col {
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

@media (min-width: 768px) {
    .ccc-director-info-col {
        width: 65%; /* Ancho Texto PC */
        padding: 40px;
    }
}

.ccc-director-name {
    font-size: 2rem; font-weight: 800; color: #fff;
    margin: 0 0 15px 0; line-height: 1.1;
}

.ccc-director-quote {
    font-size: 1rem; color: var(--ccc-text-muted); font-style: italic;
    margin-bottom: 20px; border-left: 3px solid var(--ccc-accent);
    padding-left: 20px; line-height: 1.6;
}
.ccc-director-quote strong { color: #fff; }

.ccc-director-sig {
    font-size: 0.85rem; color: #64748b; margin-top: auto;
    background: rgba(255,255,255,0.03); padding: 10px 15px;
    border-radius: 8px; align-self: flex-start;
}


/* --- 6. CTA / PROMISE BOX --- */
.ccc-promise-box {
    background: linear-gradient(135deg, #1a1d24, #131519);
    border: 1px solid var(--ccc-border);
    color: #fff; border-radius: 24px;
    padding: 50px 30px; text-align: center;
}

.ccc-btn-primary {
    padding: 15px 35px; border-radius: 50px; text-decoration: none;
    font-weight: 700; text-transform: uppercase; font-size: 0.9rem;
    display: inline-block; color: var(--ccc-accent) !important;
    background: #fff; box-shadow: 0 10px 20px -5px rgba(255,255,255,0.3);
    transition: transform 0.3s ease;
}
.ccc-btn-primary:hover { transform: translateY(-3px); }

/* --- 7. UTILS & ANIMACIONES --- */
.ccc-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.ccc-section-padding { padding: 80px 20px; }
@media(min-width: 768px) { .ccc-section-padding { padding: 100px 20px; } }
.ccc-section-heading {
    font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800;
    margin-bottom: 50px; text-align: center; display: block; color: #fff;
}

@keyframes ccc-fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.ccc-animate-entry { animation: ccc-fade-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.ccc-delay-1 { animation-delay: 0.1s; } .ccc-delay-2 { animation-delay: 0.2s; }
.ccc-delay-3 { animation-delay: 0.3s; } .ccc-delay-4 { animation-delay: 0.4s; }/* --- ADD-ON BLOG: FILTROS & NAVEGACIÓN --- */

/* Contenedor de Pills con Scroll Horizontal */
.ccc-category-scroll {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 30px;
    padding-bottom: 10px; /* Espacio para scrollbar si aparece */
}

/* Estilo de la "Píldora" */
.ccc-cat-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--ccc-border);
    color: var(--ccc-text-muted);
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap; /* Evita que el texto se rompa */
}

.ccc-cat-pill:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--ccc-accent);
    color: #fff;
    transform: translateY(-2px);
}

/* Estado Activo (Para la categoría actual) */
.ccc-cat-pill.active {
    background: var(--ccc-accent);
    color: #fff;
    border-color: var(--ccc-accent);
    box-shadow: 0 5px 15px -5px var(--ccc-accent-glow);
}

/* Ajuste móvil para scroll */
@media (max-width: 768px) {
    .ccc-category-scroll {
        justify-content: flex-start; /* Alineado a la izquierda */
        overflow-x: auto; /* Scroll horizontal */
        padding-left: 20px;
        padding-right: 20px;
        margin-left: -20px; /* Rompe el margen del contenedor */
        margin-right: -20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Ocultar scrollbar en Firefox */
    }
    
    .ccc-category-scroll::-webkit-scrollbar {
        display: none; /* Ocultar scrollbar en Chrome/Safari */
    }
}/* --- ESTILOS PÁGINA SERVICIOS (MEJORADO) --- */

/* Grid de 2 Columnas para Servicios */
.ccc-grid-2-services {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media(min-width: 768px) {
    .ccc-grid-2-services {
        grid-template-columns: 1fr 1fr;
    }
}

/* Tarjeta de Servicio Expandida */
.ccc-service-card {
    background: var(--ccc-card-bg);
    border: 1px solid var(--ccc-border);
    border-radius: 20px;
    padding: 40px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
}

.ccc-service-card:hover {
    transform: translateY(-5px);
    border-color: var(--ccc-accent);
    background: var(--ccc-card-hover);
    box-shadow: 0 15px 30px -10px rgba(0,0,0,0.3);
}

.ccc-service-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    background: rgba(255,255,255,0.05);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.ccc-service-body h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.ccc-service-desc {
    color: var(--ccc-text-muted);
    font-size: 0.95rem;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Lista de Puntos Clave (Bullets) */
.ccc-service-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.ccc-service-list li {
    color: #cbd5e1;
    font-size: 0.9rem;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.ccc-service-list li::before {
    content: '•';
    color: var(--ccc-accent);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* ===== ENLACES "VER ..." MEJORADOS ===== */
.ccc-read-more {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 20px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--ccc-accent) !important;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-radius: 30px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
}

.ccc-read-more:hover {
    background: var(--ccc-accent);
    color: #000 !important;
    border-color: var(--ccc-accent);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--ccc-accent-glow);
}

.ccc-read-more::after {
    content: '→';
    display: inline-block;
    margin-left: 5px;
    transition: transform 0.2s ease;
}

.ccc-read-more:hover::after {
    transform: translateX(4px);
}

/* ===== PREGUNTAS FRECUENTES - GRID RESPONSIVO ===== */
.ccc-faq-grid {
    display: grid;
    grid-template-columns: 1fr;        /* 1 columna en móvil */
    gap: 20px;
}

@media (min-width: 768px) {
    .ccc-faq-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablet */
    }
}

@media (min-width: 1024px) {
    .ccc-faq-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas en escritorio */
    }
}

.ccc-faq-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--ccc-border);
    padding: 25px;
    border-radius: 12px;
    height: 100%;                     /* Para que todas las cajas tengan la misma altura si es necesario */
    display: flex;
    flex-direction: column;
}

.ccc-faq-item h4 {
    color: #fff;
    margin: 0 0 10px 0;
    font-size: 1.1rem;
}

.ccc-faq-item p {
    color: var(--ccc-text-muted);
    margin: 0;
    font-size: 0.95rem;
    flex-grow: 1;
}/* --- ESTILOS PÁGINA INVESTIGACIÓN --- */

/* Ajuste del Grid de Investigación (5 elementos) */
.ccc-research-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media(min-width: 768px) {
    .ccc-research-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* El 5to elemento se centra abajo o ocupa todo el ancho */
}

/* Caja de Entregables (Layout) */
.ccc-deliverables-box {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    align-items: center;
    background: var(--ccc-card-bg);
    border: 1px solid var(--ccc-border);
    border-radius: 24px;
    padding: 40px;
}

@media(min-width: 992px) {
    .ccc-deliverables-box {
        grid-template-columns: 1fr 0.8fr;
        padding: 60px;
    }
}

/* Lista de Chequeo Estilizada */
.ccc-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ccc-check-list li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    color: #e2e8f0;
    font-size: 1rem;
    line-height: 1.5;
}

.ccc-check-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    background: var(--ccc-accent);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
}

.ccc-check-list li strong {
    color: #fff;
    font-weight: 600;
}

/* Mockup Visual del Reporte (Decorativo) */
.ccc-report-mockup {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 
        0 20px 50px -10px rgba(0,0,0,0.5),
        0 0 0 10px rgba(255,255,255,0.05); /* Borde externo */
    transform: rotate(-3deg);
    transition: transform 0.3s ease;
}

.ccc-report-mockup:hover {
    transform: rotate(0deg) scale(1.05);
}

.ccc-mockup-header {
    background: var(--ccc-accent);
    color: #fff;
    padding: 10px;
    font-size: 0.8rem;
    font-weight: 900;
    text-align: center;
    border-radius: 6px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.ccc-mockup-body .ccc-line {
    height: 8px;
    background: #e2e8f0;
    margin-bottom: 10px;
    border-radius: 4px;
}

.ccc-chart-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 10px solid #cbd5e1;
    border-top-color: var(--ccc-accent);
    border-right-color: #3b82f6;
    margin: 20px auto;
}/* --- ESTILOS ESPECÍFICOS: PÁGINA PUBLICIDAD --- */

/* 1. Grid 2x2 Exacto (Para la sección de Ingeniería/Tácticas) */
.ccc-tech-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media(min-width: 768px) {
    .ccc-tech-grid-2x2 {
        grid-template-columns: 1fr 1fr !important; /* Fuerza 2 columnas */
    }
}

/* 2. Corrección de Botones Invisibles (En tarjetas blancas) */
/* Fuerza el botón secundario a ser oscuro */
.ccc-price-card .ccc-btn-secondary {
    color: #0f1115 !important;
    border: 1px solid #cbd5e1 !important;
    background: transparent !important;
    display: inline-block;
    text-align: center;
}

.ccc-price-card .ccc-btn-secondary:hover {
    background: #0f1115 !important;
    color: #ffffff !important;
    border-color: #0f1115 !important;
}

/* 3. Estilos de las Tarjetas de Precio */
.ccc-price-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 40px 30px;
    position: relative;
    transition: transform 0.3s ease;
}

.ccc-price-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1);
}

.ccc-price-featured {
    background: #1a1d24;
    border-color: var(--ccc-accent);
    transform: scale(1.05);
    z-index: 2;
    box-shadow: 0 20px 50px -10px rgba(59, 130, 246, 0.3);
}

/* 4. Badges y Textos de Precio */
.ccc-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ccc-accent);
    color: #fff;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ccc-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0f1115;
    margin-bottom: 30px;
}

.ccc-price-list li {
    padding-left: 25px;
    margin-bottom: 12px;
    position: relative;
    list-style: none;
}

.ccc-price-list li::before {
    content: '✔';
    color: var(--ccc-accent);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* --- FIX: TEXTO INVISIBLE EN LISTAS (FONDO BLANCO) --- */

/* Esto fuerza a los elementos de la lista con palomita 
   a ser oscuros cuando están dentro de una sección blanca */
.ccc-section-white .ccc-check-list li {
    color: #4b5563 !important; /* Gris oscuro para el texto normal */
}

/* Esto asegura que las partes en negrita (<strong>) 
   también se vean oscuras */
.ccc-section-white .ccc-check-list li strong {
    color: #0f1115 !important; /* Negro para el énfasis */
}/* --- ESTILOS PÁGINA AUTOMATIZACIÓN --- */

/* Caja de Alerta (Problema) */
.ccc-alert-box {
    background: #fef2f2; /* Fondo rojizo muy suave */
    border-left: 4px solid #ef4444;
    padding: 25px;
    border-radius: 0 10px 10px 0;
    margin-top: 20px;
}

.ccc-problem-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ccc-problem-list li {
    color: #7f1d1d; /* Rojo oscuro */
    margin-bottom: 15px;
    position: relative;
    padding-left: 20px;
}

.ccc-problem-list li::before {
    content: '✕';
    position: absolute;
    left: 0;
    color: #ef4444;
    font-weight: bold;
}

.ccc-problem-list strong {
    color: #991b1b;
}

/* Números de Pasos (01, 02...) */
.ccc-step-number {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.05); /* Muy sutil */
    line-height: 1;
    pointer-events: none;
}

.ccc-cyber-card:hover .ccc-step-number {
    color: rgba(59, 130, 246, 0.1); /* Se ilumina levemente al hover */
}/* --- FIX: VIDEO HORIZONTAL (YOUTUBE STANDARD) --- */

/* Esto sobrescribe la configuración anterior y fuerza 
   el formato panorámico (16:9) en lugar del vertical */
.ccc-video-container {
    max-width: 100% !important; /* Permite que use todo el ancho disponible */
    aspect-ratio: 16 / 9 !important; /* Formato horizontal estándar */
    border-radius: 12px !important; /* Radio de borde más sutil para video horizontal */
}/* --- FIX FINAL: TARJETA DESTACADA CORTADA --- */
.ccc-price-featured {
    margin-top: 40px !important;    /* Más espacio arriba para que el badge no se corte */
    margin-bottom: 40px !important; /* Espacio abajo para balancear */
    transform: scale(1.05);         /* Mantenemos el efecto de grandeza */
    z-index: 10;                    /* Asegura que flote sobre todo */
    position: relative;
}

/* En móviles quitamos la escala para evitar desbordes */
@media (max-width: 768px) {
    .ccc-price-featured {
        transform: scale(1);
        margin-top: 50px !important;
    }
}

/* --- FIX FINAL: AJUSTE DE ALTURA Y MENÚ FLOTANTE --- */

/* 1. Freno para el Menú Flotante */
#paquetes {
    scroll-margin-top: 140px; /* Frena 140px antes para que el menú no tape nada */
}

/* 2. Tarjetas más Compactas (Para que quepan en pantalla estándar) */
.ccc-price-card {
    padding: 30px 25px !important; /* Reducimos el relleno vertical (antes era 40px) */
}

.ccc-price {
    margin-bottom: 20px !important; /* Menos espacio bajo el precio */
    font-size: 2.2rem !important;   /* Precio un pelín más chico */
}

.ccc-price-desc {
    margin-bottom: 15px !important; /* Menos espacio en la descripción */
    font-size: 0.85rem !important;
    min-height: 30px !important;    /* Ajuste de altura mínima */
}

.ccc-price-list {
    margin-bottom: 20px !important;
}

.ccc-price-list li {
    margin-bottom: 8px !important; /* Items de lista más pegaditos */
}

/* 3. Tarjeta Destacada Controlada */
.ccc-price-featured {
    transform: scale(1.03) !important; /* Zoom más sutil (1.03 en vez de 1.05) */
    margin-top: 10px !important;       /* Menos margen extra arriba */
    margin-bottom: 10px !important;
    z-index: 5; /* Asegura que esté encima de las otras pero debajo del menú */
}

/* 4. Asegurar que el contenedor no corte la sombra */
.ccc-section-white {
    overflow: visible !important;
}

/* --- FIX: TARJETAS COMPACTAS (AHORRO DE ESPACIO VERTICAL) --- */

/* 1. Freno para que el título no quede escondido tras el menú */
#paquetes {
    scroll-margin-top: 150px; 
}

/* 2. Reducción General de la Tarjeta */
.ccc-price-card {
    padding: 25px 20px !important; /* Mucho menos relleno interno */
}

/* 3. Títulos más compactos */
.ccc-price-card h3 {
    font-size: 1.3rem !important;
    margin-bottom: 5px !important;
}

/* 4. Descripción más pequeña y pegada */
.ccc-price-desc {
    font-size: 0.85rem !important;
    margin-bottom: 15px !important;
    min-height: auto !important; /* Quitamos altura forzada */
    line-height: 1.4 !important;
}

/* 5. Precio más pequeño */
.ccc-price {
    font-size: 2rem !important; /* Reducido de 2.5rem a 2rem */
    margin-bottom: 15px !important;
}

/* "Desde" más pequeño */
.ccc-price span {
    font-size: 0.85rem !important;
}

/* 6. Listas más densas */
.ccc-price-list {
    margin-bottom: 20px !important;
}

.ccc-price-list li {
    margin-bottom: 5px !important; /* Items casi pegados */
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
}

/* 7. Tarjeta Destacada (Zoom Sutil) */
.ccc-price-featured {
    /* Zoom mínimo para que destaque pero no se salga */
    transform: scale(1.02) !important; 
    z-index: 5;
    /* Ajuste de márgenes para móvil vs escritorio */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ajuste móvil: Quitar zoom completamente */
@media (max-width: 768px) {
    .ccc-price-featured {
        transform: scale(1) !important;
        margin: 20px 0 !important;
    }
}---

### 2. El CSS (Agrégalo a tu hoja Global)

Este CSS reemplaza todos esos estilos viejos (`.filtro-categorias-blog`, `.boton-categoria`, etc.). Ahora usa las variables de tu tema oscuro (bordes sutiles, hover neón, fondo transparente).

```css
/* --- ESTILOS DE NAVEGACIÓN DE BLOG (ELITE) --- */

/* Contenedor del Scroll */
.ccc-category-nav-wrapper {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.ccc-category-scroll {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 15px;
}

/* Estilo de la "Píldora" (Tech Style) */
.ccc-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03); /* Fondo casi invisible */
    border: 1px solid var(--ccc-border);   /* Borde gris sutil */
    color: var(--ccc-text-muted);
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
}

/* Iconos dentro de la píldora */
.ccc-cat-icon {
    font-size: 1.1rem;
    filter: grayscale(100%); /* Iconos en gris por defecto */
    transition: all 0.3s ease;
}

/* Hover State */
.ccc-cat-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #fff;
    color: #fff;
    transform: translateY(-2px);
}

.ccc-cat-pill:hover .ccc-cat-icon {
    filter: grayscale(0%); /* Iconos a color al pasar el mouse */
    transform: scale(1.2);
}

/* Active State (Para la categoría actual) */
.ccc-cat-pill.active {
    background: var(--ccc-accent); /* Tu azul eléctrico */
    color: #fff;
    border-color: var(--ccc-accent);
    box-shadow: 0 5px 15px -5px var(--ccc-accent-glow);
}

.ccc-cat-pill.active .ccc-cat-icon {
    filter: grayscale(0%);
}

/* Hint de Scroll (Solo visible en móvil) */
.ccc-scroll-hint {
    display: none;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 5px;
    animation: pulse 2s infinite;
}

/* RESPONSIVE: MÓVIL (Scroll Horizontal) */
@media (max-width: 768px) {
    .ccc-category-scroll {
        justify-content: flex-start; /* Alineado a la izquierda */
        flex-wrap: nowrap;           /* No bajar de línea */
        overflow-x: auto;            /* Scroll lateral */
        padding: 10px 20px 20px 20px; /* Espacio para el dedo */
        margin-left: -20px;          /* Romper márgenes del contenedor */
        margin-right: -20px;
        -webkit-overflow-scrolling: touch;
        
        /* Ocultar barra de scroll fea */
        scrollbar-width: none; 
    }
    
    .ccc-category-scroll::-webkit-scrollbar {
        display: none;
    }

    .ccc-scroll-hint {
        display: block; /* Mostrar indicación de scroll */
    }
}

@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

/* --- FIX: ETIQUETAS DE CATEGORÍA SOBRE IMAGEN --- */
.ccc-card-cat {
    position: absolute;
    top: 15px;
    right: 15px;
    /* Fondo oscuro semitransparente fuerte para contraste */
    background: rgba(15, 17, 21, 0.85) !important; 
    color: #ffffff !important; /* Texto blanco puro */
    padding: 6px 15px !important; /* Más "gordita" la pastilla */
    border-radius: 50px !important; /* Bordes completamente redondos */
    font-size: 0.75rem !important;
    font-weight: 700 !important; /* Texto más grueso */
    letter-spacing: 0.5px;
    text-transform: uppercase;
    /* Efecto "Cristal" moderno */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* Borde sutil brillante para definirla */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important; /* Sombra para dar profundidad */
    z-index: 5;
}

/* --- FIX: TEXTO NEGRO AL PIE DE PAGINACIÓN --- */

/* Apunta al contenedor o párrafo que sigue inmediatamente a la paginación */
.oxy-repeater-pages + p,
.oxy-repeater-pages + div,
.oxy-repeater-pages ~ p {
    color: rgba(255, 255, 255, 0.7) !important; /* Color gris claro legible */
    text-align: center;
    margin-top: 30px;
}

/* Si ese texto contiene un enlace, lo ponemos en el color acento */
.oxy-repeater-pages + p a,
.oxy-repeater-pages + div a,
.oxy-repeater-pages ~ p a {
    color: var(--ccc-accent) !important; /* Azul eléctrico */
    text-decoration: none;
    font-weight: 700;
}

.oxy-repeater-pages + p a:hover,
.oxy-repeater-pages ~ p a:hover {
    text-decoration: underline;
}

/* --- FIX: CENTRADO DE HEADER EN NAVEGACIÓN --- */

/* Forzamos al contenedor del título a ser bloque y centrado */
.ccc-category-nav-wrapper .categories-header {
    display: flex !important;
    flex-direction: column !important; /* Uno debajo del otro */
    align-items: center !important;    /* Centrados horizontalmente */
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important;              /* Espacio entre el tagline y el título */
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto 40px auto !important; /* Centrado en la página */
}

/* Aseguramos que el Tagline (Sigue explorando) se vea bien */
.ccc-category-nav-wrapper .ccc-tagline {
    display: inline-block !important;
    margin: 0 !important;
    width: auto !important;
}

/* Aseguramos que el Título (Descubre otras...) se vea bien */
.ccc-category-nav-wrapper h2 {
    width: 100% !important;
    margin: 0 !important;
}

/* =========================================
   PAGINACIÓN (CORREGIDA - TÉCNICA INFALIBLE)
   ========================================= */

/* 1. FORZAR AL CONTENEDOR A OCUPAR TODO EL ANCHO */
.oxy-repeater-pages-wrap {
    display: flex !important;
    justify-content: center !important; /* Centrado Horizontal Flex */
    align-items: center !important;
    width: 100% !important;
    min-width: 100% !important; /* Asegura que no se encoja */
    margin: 60px auto 40px auto !important; /* Centrado por margen también */
    clear: both !important; /* Evita que flote al lado de los posts */
}

/* 2. EL CONTENEDOR DE LOS NÚMEROS */
.oxy-repeater-pages {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 auto !important; /* Doble seguridad de centrado */
}

/* 3. ESTILO DE LOS BOTONES (Números y Flechas) */
.oxy-repeater-pages a.page-numbers,
.oxy-repeater-pages span.page-numbers {
    display: inline-flex !important; /* Inline-flex se comporta mejor con texto */
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    
    /* Tema Oscuro */
    background-color: var(--ccc-card-bg, #181b21) !important; 
    border: 1px solid var(--ccc-border, #2d3748) !important;
    color: var(--ccc-text-muted, #9ca3af) !important;
    
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* 4. HOVER */
.oxy-repeater-pages a.page-numbers:hover {
    border-color: var(--ccc-accent, #3b82f6) !important;
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px -5px rgba(59, 130, 246, 0.3);
}

/* 5. ACTIVO */
.oxy-repeater-pages span.page-numbers.current {
    background-color: var(--ccc-accent, #3b82f6) !important;
    color: #ffffff !important;
    border-color: var(--ccc-accent, #3b82f6) !important;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
    pointer-events: none;
}

/* 6. SIGUIENTE / ANTERIOR (Ajuste de ancho) */
.oxy-repeater-pages a.next,
.oxy-repeater-pages a.prev {
    width: auto !important;
    padding: 0 20px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}/* --- ESTILOS DE LECTURA (DARK MODE) --- */
/* Aplica esto a la clase .ccc-article-body */

.ccc-article-body {
    font-size: 1.15rem; /* Un poco más grande para lectura cómoda */
    line-height: 1.8;
    color: #cbd5e1; /* Gris claro muy legible */
    font-family: 'Inter', system-ui, sans-serif; /* O tu fuente corporativa */
}

/* Títulos dentro del post (H2, H3) */
.ccc-article-body h2 {
    color: #fff;
    margin-top: 60px;
    margin-bottom: 25px;
    font-size: 1.8rem;
    letter-spacing: -0.5px;
}

.ccc-article-body h3 {
    color: #fff;
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 1.4rem;
}

/* Enlaces dentro del texto */
.ccc-article-body a {
    color: var(--ccc-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: all 0.2s;
}

.ccc-article-body a:hover {
    color: #fff;
    background: var(--ccc-accent);
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 4px;
}

/* Listas (Bullets) */
.ccc-article-body ul {
    margin-bottom: 30px;
    padding-left: 20px;
}

.ccc-article-body li {
    margin-bottom: 10px;
    position: relative;
    list-style: none; /* Quitamos el punto por defecto */
}

.ccc-article-body li::before {
    content: '•';
    color: var(--ccc-accent);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* --- CORRECCIÓN FINAL: GRID DE RELACIONADOS --- */

/* 1. El Contenedor Padre (Repeater): Solo asegura el ancho */
.ccc-related-grid {
    display: block !important; /* IMPORTANTE: No usar grid aquí */
    width: 100% !important;
}

/* 2. La Lista Interna (Donde viven los items): AQUÍ va el Grid */
.ccc-related-grid .oxy-dynamic-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 columnas reales */
    gap: 30px !important; /* Espacio entre tarjetas */
    width: 100% !important;
    justify-content: center;
}

/* 3. Las Tarjetas: Que llenen su hueco */
.ccc-related-grid .ccc-blog-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* --- RESPONSIVE --- */

/* Tablet: 2 Columnas */
@media (max-width: 992px) {
    .ccc-related-grid .oxy-dynamic-list {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Móvil: 1 Columna */
@media (max-width: 768px) {
    .ccc-related-grid .oxy-dynamic-list {
        grid-template-columns: 1fr !important;
    }
}

.single .oxy-repeater-pages-wrap {
    display: none !important;
}/* --- HEADER "ELITE GLASS" --- */

/* 1. Fondo de Cristal (Backdrop Filter) */
.oxy-header-wrapper, 
#masthead {
    background-color: rgba(15, 17, 21, 0.85) !important; /* Negro semitransparente */
    backdrop-filter: blur(12px); /* Efecto borroso detrás */
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Borde sutil inferior */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

/* 2. FIX LOGO: Control por Altura */
.ccc-logo-link {
    display: flex;
    align-items: center;
    height: 100%; /* Ocupa la altura de la fila */
}

.ccc-logo-link img {
    display: block;
    width: auto !important; /* Que el ancho se ajuste solo */
    height: auto !important; /* Reseteamos alturas fijas */
    max-height: 50px !important; /* TOPPE MÁXIMO: Ajusta este número si lo quieres más grande/chico */
    object-fit: contain; /* Asegura que la imagen entre completa sin deformarse */
    transition: transform 0.3s ease;
}

.ccc-logo-link:hover img {
    transform: scale(1.05);
}

/* 3. Menú de Navegación (Estilo Limpio) */
.oxy-pro-menu .menu-item a {
    font-family: 'Inter', sans-serif; /* O tu fuente global */
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 10px 15px !important;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.oxy-pro-menu .menu-item a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--ccc-accent) !important;
    text-shadow: 0 0 10px var(--ccc-accent-glow);
}

/* 4. Botón de Acción (Reemplaza al verde) */
.ccc-header-btn {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid var(--ccc-accent) !important;
    padding: 10px 24px !important;
    border-radius: 50px !important; /* Redondo estilo cápsula */
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease !important;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.1); /* Brillo suave inicial */
}

.ccc-header-btn:hover {
    background: var(--ccc-accent) !important; /* Se llena de azul al hover */
    color: #000 !important; /* Texto negro para contraste */
    box-shadow: 0 0 20px var(--ccc-accent-glow) !important; /* Brillo fuerte */
    transform: translateY(-2px);
}

/* =========================================
   FIX FINAL: BLOQUEO DE SCROLL (APP FEEL)
   ========================================= */

/* 1. CONGELAR LA PÁGINA (Cuando el menú está abierto) */
/* Oxygen agrega esta clase al body automáticamente */
body.oxy-nav-menu-open {
    overflow: hidden !important; /* Prohíbe el scroll */
    height: 100vh !important;
    position: fixed !important; /* Doble candado para iOS */
    width: 100% !important;
}

/* 2. ASEGURAR QUE EL MENÚ SEA UNA CAPA FIJA */
.oxy-pro-menu-off-canvas-container {
    position: fixed !important; /* Fijo en la pantalla */
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important; /* Altura dinámica para móviles modernos */
    
    /* Control del contenido interno */
    overflow-y: auto !important; /* Si el menú es muy largo, permite scroll DENTRO del menú */
    overscroll-behavior: contain; /* Evita que el scroll "pase" a la página de atrás */
    
    /* Diseño Flex para centrar */
    display: flex; 
    flex-direction: column;
    justify-content: center; /* Centrado vertical */
    align-items: center;
    z-index: 99999 !important;
}

/* Ajuste de seguridad para móviles muy pequeños */
@media (max-height: 600px) {
    .oxy-pro-menu-off-canvas-container {
        justify-content: flex-start !important; /* Alinea arriba para que no se corte */
        padding-top: 80px !important; /* Espacio para no tapar la X */
        padding-bottom: 40px !important;
    }
}/* =========================================
   CSS ESPECÍFICO: CRECIMIENTO CON CONTROL (CORREGIDO)
   ========================================= */

/* --- 1. HERO CON GLOW Y ACOLCHADO (FIX MENÚ) --- */
#ccc-landing-master {
    position: relative;
    overflow: hidden;
    /* AQUÍ ESTÁ EL ARREGLO: Empujamos el contenido hacia abajo */
    padding-top: 180px; 
    padding-bottom: 80px;
}

/* El brillo de fondo */
#ccc-landing-master::before {
    content: '';
    position: absolute;
    top: -10%; left: 50%; transform: translateX(-50%);
    width: 80%; height: 500px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, rgba(0,0,0,0) 70%);
    z-index: -1; pointer-events: none;
}

/* --- 2. EL RETO (Tarjetas) --- */
.ccc-feature-card {
    background: linear-gradient(145deg, #181b21, #131518);
    border: 1px solid var(--ccc-border);
    border-radius: 16px; padding: 35px 30px;
    transition: all 0.3s ease; height: 100%;
    display: flex; flex-direction: column; align-items: flex-start;
}
.ccc-feature-card:hover {
    transform: translateY(-5px); border-color: var(--ccc-accent);
    box-shadow: 0 10px 30px -10px var(--ccc-accent-glow);
}
.ccc-card-icon {
    font-size: 2rem; margin-bottom: 20px;
    background: rgba(255,255,255,0.05);
    width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
    border-radius: 12px; color: var(--ccc-accent);
}
.ccc-feature-card h3 { color: #fff; font-size: 1.25rem; margin-bottom: 10px; font-weight: 700; }
.ccc-feature-card p { color: var(--ccc-text-muted); font-size: 0.95rem; line-height: 1.5; margin: 0; }

/* --- 3. SERVICIOS --- */

/* La rejilla de tarjetas */
.ccc-services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 0 !important; /* Ajuste fino */
}

@media (min-width: 768px) { .ccc-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ccc-services-grid { grid-template-columns: repeat(3, 1fr); } }

/* Estilos de tarjeta */
.ccc-service-card {
    background: rgba(24, 27, 33, 0.6);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px; padding: 35px 30px;
    transition: all 0.3s ease; height: 100%;
    display: flex; flex-direction: column;
}
.ccc-service-card:hover {
    background: #1a1d24; border-color: var(--ccc-accent); transform: translateY(-5px);
}
.ccc-quote-badge {
    display: inline-block; background: rgba(59, 130, 246, 0.15);
    color: var(--ccc-accent); font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; padding: 6px 12px;
    border-radius: 4px; margin-bottom: 15px; border-left: 2px solid var(--ccc-accent);
}
.ccc-service-title { color: #fff; font-size: 1.4rem; font-weight: 800; margin-bottom: 20px; line-height: 1.2; }
.ccc-list { list-style: none; padding: 0; margin: 0; }
.ccc-list li { color: #9ca3af; font-size: 0.9rem; margin-bottom: 8px; padding-left: 20px; position: relative; }
.ccc-list li::before { content: "•"; color: var(--ccc-accent); position: absolute; left: 0; font-weight: bold; font-size: 1.2rem; line-height: 1; top: -2px; }

/* --- ESPACIADO EXTRA PARA SECCIONES --- */
.ccc-section-spacer {
    padding-top: 70px !important;   
    padding-bottom: 70px !important;
}

/* --- 4. CÓMO TRABAJAMOS --- */
.ccc-method-row {
    display: grid; grid-template-columns: 1fr; gap: 30px; margin: 60px 0; position: relative;
}
@media (min-width: 768px) {
    .ccc-method-row { grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .ccc-method-row::before {
        content: ''; position: absolute; top: 40px; left: 10%; right: 10%; height: 2px;
        background: linear-gradient(90deg, transparent, #2d3748 20%, #2d3748 80%, transparent); z-index: 0;
    }
}
.ccc-step {
    text-align: center; background: #0f1115; border: 1px solid var(--ccc-border);
    border-radius: 20px; padding: 30px 20px; transition: transform 0.3s ease;
    position: relative; z-index: 1;
}
.ccc-step:hover { border-color: var(--ccc-accent); transform: translateY(-5px); background: #131519; }
.ccc-step-num {
    display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin: 0 auto 15px;
    background: #1a1d24; border-radius: 50%; font-size: 1.5rem; font-weight: 800; color: #fff;
    border: 2px solid var(--ccc-border); transition: all 0.3s ease;
}
.ccc-step:hover .ccc-step-num { border-color: var(--ccc-accent); color: var(--ccc-accent); box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
.ccc-step-title { display: block; color: #fff; font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

/* --- 5. PROMESA & CTA FINAL --- */
.ccc-promise-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; margin-top: 30px;
}
.ccc-promise-item {
    background: rgba(255,255,255,0.02); border: 1px solid var(--ccc-border);
    border-radius: 16px; padding: 25px 10px; text-align: center; color: #fff;
    font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
    transition: border-color 0.3s ease;
}
.ccc-promise-item span { display: block; font-size: 2.5rem; font-weight: 900; margin-bottom: 10px; line-height: 1; }
.ccc-promise-item.bad span { color: #ef4444; }
.ccc-promise-item.good span { color: #10b981; }
.ccc-promise-item.best span { color: var(--ccc-accent); }
.ccc-promise-item:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); }

/* CONTENEDOR DEL FORMULARIO FINAL */
.ccc-final-cta-wrapper {
    margin-top: 100px;
    background: linear-gradient(180deg, rgba(20,23,28,0) 0%, rgba(59,130,246,0.05) 100%);
    border: 1px solid var(--ccc-border);
    border-radius: 24px;
    padding: 60px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.ccc-final-cta-wrapper::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--ccc-accent), transparent);
}/* --- FIX FINAL: BLOQUEO DE DESBORDE HORIZONTAL --- */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important; /* Corta cualquier cosa que se salga a los lados */
    width: 100% !important;
    position: relative; /* Asegura que el contenedor respete los límites */
}/* ==========================================================================
   PÁGINA · SISTEMAS OPERATIVOS A LA MEDIDA
   darkviolet-turtle-895047.hostingersite.com/servicios/sistemas-operativos-negocio/

   IMPORTANTE — este archivo NO redefine :root a propósito.
   Los tokens (--ccc-bg, --ccc-card-bg, --ccc-border, --ccc-text-muted,
   --ccc-accent, --ccc-heading-font) se heredan del CSS global del sitio.
   Si aquí se vuelven a declarar, esta página se despega del resto.

   Las retículas llevan nombre propio (.pmd-*) a propósito: reusar
   .ccc-grid-3 chocaría con las reglas que ya viven en la hoja global
   y aplican en todo el sitio.

   Doble clase (.pmd-sistemas .pmd-x) para ganar por especificidad sin
   depender del orden de carga.

   minmax(0, 1fr) en TODAS las columnas. Sin eso, el contenido largo
   revienta la retícula — es el bug clásico y ya costó horas antes.

   ORDEN DE CARGA: después de la hoja global.
   ========================================================================== */

.pmd-sistemas * { box-sizing: border-box; }


/* ==========================================================================
   1. SEÑALES · 4 tarjetas cortas
      Escritorio 4 · Tablet 2 · Teléfono carrusel deslizable.
      Son tarjetas de poca información: apiladas obligan a un scroll
      largo por muy poco contenido.
   ========================================================================== */
.pmd-sistemas .pmd-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.pmd-sistemas .pmd-signal {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    height: 100%;
    padding: 1.75rem 1.5rem;
    background: var(--ccc-card-bg, #181b21);
    border: 1px solid var(--ccc-border, #2d3748);
    border-radius: 12px;
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.pmd-sistemas .pmd-signal:hover {
    border-color: var(--ccc-accent, #3b82f6);
    transform: translateY(-4px);
}

.pmd-sistemas .pmd-signal-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.pmd-sistemas .pmd-signal h3 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
    color: #fff;
}

.pmd-sistemas .pmd-signal p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ccc-text-muted, #9ca3af);
}


/* ==========================================================================
   2. HERRAMIENTAS · 5 tarjetas densas
      Escritorio: 2 + 2 + la quinta a lo ancho, en horizontal.
      Tres columnas no caben: el contenido es largo y quedaría ilegible.
      La quinta a lo ancho evita la tarjeta huérfana.
   ========================================================================== */
.pmd-sistemas .pmd-grid-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
    align-items: stretch;
}

.pmd-sistemas .pmd-grid-tools > *:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: calc(50% - 0.875rem); /* mitad del contenedor menos medio gap */
}

/* --------------------------------------------------------------------------
   EL ARREGLO DEL AIRE

   La hoja global trae:  .ccc-service-card p { margin-bottom:25px; flex-grow:1 }

   Como aquí el cuerpo de la tarjeta es una columna flex, ese flex-grow hace
   que CADA párrafo se estire para llenar el espacio sobrante — la cita y la
   descripción crecen y empujan las viñetas al fondo. No era problema de
   márgenes: por eso ajustarlos no lo resolvía.
   -------------------------------------------------------------------------- */
.pmd-sistemas .pmd-grid-tools .ccc-service-card p {
    flex-grow: 0;
    margin-bottom: 0;
}

/* Escala vertical dentro de la tarjeta, de arriba a abajo */
.pmd-sistemas .pmd-grid-tools .ccc-service-card    { padding: 26px 24px; }
.pmd-sistemas .pmd-tool-head                       { margin-bottom: 0.7rem; }
.pmd-sistemas .pmd-grid-tools .ccc-service-body h3 { margin: 0 0 0.5rem; }
.pmd-sistemas .pmd-grid-tools .ccc-service-desc    { margin: 0 0 0.9rem; }
.pmd-sistemas .pmd-grid-tools .ccc-service-list    { margin: 0 0 1.1rem; }
.pmd-sistemas .pmd-grid-tools .ccc-service-list li { margin-bottom: 5px; }


/* --- Encabezado compacto: icono y cita en la misma fila ---
   Apilados se comen una fila completa de alto por tarjeta. De lado
   ahorran ~60px cada una, que en una retícula de tres filas es
   media pantalla menos de scroll. */
.pmd-sistemas .pmd-tool-head {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.pmd-sistemas .pmd-tool-head .ccc-service-icon {
    flex: 0 0 auto;
    margin: 0;
}

.pmd-sistemas .pmd-tool-head .pmd-quote {
    margin: 0;
    padding-top: 0.15rem;
}

/* --- Viñetas en una columna, para lectura rápida ---
   Si la tarjeta vuelve a crecer de alto, cambiar a repeat(2, minmax(0,1fr))
   las acomoda en dos y ahorra dos renglones. */
.pmd-sistemas .pmd-grid-tools .ccc-service-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
}

/* --- Cuerpo en columna, con el botón siempre abajo ---
   Iguala el alto visual de las tarjetas de una misma fila. */
.pmd-sistemas .pmd-grid-tools .ccc-service-card {
    display: flex;
    flex-direction: column;
}

.pmd-sistemas .pmd-grid-tools .ccc-service-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.pmd-sistemas .pmd-grid-tools .ccc-service-body .ccc-read-more {
    align-self: flex-start;
    margin-top: auto;
    padding: 10px 22px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pmd-sistemas .pmd-grid-tools .ccc-service-body .ccc-read-more:hover {
    background: var(--ccc-accent, #3b82f6);
    border-color: var(--ccc-accent, #3b82f6);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px -5px var(--ccc-accent-glow, rgba(59, 130, 246, 0.4));
}

/* Suaviza el bold de la descripción para no competir con el título */
.pmd-sistemas .pmd-grid-tools .ccc-service-desc strong {
    font-weight: 500;
    color: #cbd5e1;
}

/* --- Cita del cliente: presente, sin pelear con el título --- */
.pmd-sistemas .pmd-quote {
    padding-left: 12px;
    font-size: 0.95rem;
    line-height: 1.4;
    font-style: italic;
    color: var(--ccc-text-muted, #9ca3af);
    border-left: 2px solid rgba(59, 130, 246, 0.4);
}

/* --- Aviso: los demos no son trabajo de cliente --- */
.pmd-sistemas .pmd-nota {
    margin-top: 35px;
    padding: 20px 24px;
    background: var(--ccc-glass, rgba(255, 255, 255, 0.03));
    border: 1px dashed var(--ccc-border, #2d3748);
    border-radius: 12px;
}

.pmd-sistemas .pmd-nota p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ccc-text-muted, #9ca3af);
}

.pmd-sistemas .pmd-nota strong { color: #fff; }


/* ==========================================================================
   3. CÓMO SE CONSTRUYE · 4 pasos cortos, en fila
      El número grande hace de ancla visual. Se genera por CSS para que
      el marcado no cargue numeración que después haya que reordenar.
   ========================================================================== */
.pmd-sistemas .pmd-grid-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    counter-reset: pmd;
}

.pmd-sistemas .pmd-step {
    position: relative;
    padding: 1.75rem 1.5rem 1.5rem;
    background: var(--ccc-card-bg, #181b21);
    border: 1px solid var(--ccc-border, #2d3748);
    border-radius: 12px;
}

.pmd-sistemas .pmd-step::before {
    counter-increment: pmd;
    content: counter(pmd);
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--ccc-heading-font, 'Bebas Neue', sans-serif);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--ccc-accent, #3b82f6);
}

.pmd-sistemas .pmd-step h3 {
    margin: 0 0 0.5rem;
    font-size: 1.02rem;
    line-height: 1.25;
    color: #fff;
}

.pmd-sistemas .pmd-step p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ccc-text-muted, #9ca3af);
}


/* ==========================================================================
   3b. CAJA DE ADOPCIÓN
      No usa .ccc-alert-box: esa clase trae fondo claro (#fef2f2) y borde
      rojo, pensada para secciones blancas. Sobre fondo oscuro el texto
      queda invisible, y el rojo es tono de advertencia — esta sección es
      consejo. Ámbar, que en el sistema es el color de la tensión, y va
      racionado: es la única aparición en toda la página.
   ========================================================================== */
.pmd-sistemas .pmd-alert {
    margin-top: 20px;
    padding: 25px 28px;
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-left: 4px solid #f59e0b;
    border-radius: 0 12px 12px 0;
}

.pmd-sistemas .pmd-alert p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ccc-text-muted, #9ca3af);
}

.pmd-sistemas .pmd-alert p + p { margin-top: 15px; }
.pmd-sistemas .pmd-alert strong { color: #fff; }


/* ==========================================================================
   4. PREGUNTAS FRECUENTES
      Mismo patrón que el FAQ del home, con clase en vez de estilo en línea.
   ========================================================================== */
.pmd-sistemas .pmd-faq {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pmd-sistemas .pmd-faq--last {
    padding-bottom: 0;
    border-bottom: 0;
}

.pmd-sistemas .pmd-faq h3 {
    margin: 0 0 10px;
    font-size: 1.2rem;
    color: #fff;
}

.pmd-sistemas .pmd-faq p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ccc-text-muted, #9ca3af);
}


/* ==========================================================================
   5. CIERRE
   ========================================================================== */
.pmd-sistemas .ccc-promise-box h2 {
    margin: 0 0 10px;
    font-size: 2rem;
    color: #fff;
}

.pmd-sistemas .ccc-promise-box > p {
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.7);
}


/* ==========================================================================
   6. UTILIDADES
      Sustituyen los estilos en línea. Nombradas por lo que hacen, no por
      dónde se usan, para poder reordenar secciones sin tocar el CSS.
   ========================================================================== */
.pmd-sistemas .pmd-hero    { padding-bottom: 60px; }
.pmd-sistemas .pmd-narrow  { max-width: 800px; margin-left: auto; margin-right: auto; }
.pmd-sistemas .pmd-layer   { position: relative; z-index: 2; }
.pmd-sistemas .pmd-mt-15   { margin-top: 15px; }
.pmd-sistemas .pmd-mt-30   { margin-top: 30px; }
.pmd-sistemas .pmd-mt-40   { margin-top: 40px; }
.pmd-sistemas .pmd-mb-40   { margin-bottom: 40px; }


/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

/* ---------- TABLET ---------- */
@media (max-width: 992px) {

    .pmd-sistemas .pmd-grid-4,
    .pmd-sistemas .pmd-grid-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Herramientas → una por fila; la quinta deja de ser horizontal */
    .pmd-sistemas .pmd-grid-tools {
        grid-template-columns: minmax(0, 1fr);
    }

        }

/* ---------- TELÉFONO ---------- */
@media (max-width: 600px) {

    /* SEÑALES → carrusel deslizable con freno en cada tarjeta.
       El margen negativo hace que sangre a los bordes de la pantalla,
       para que se vea que hay más contenido a la derecha. */
    .pmd-sistemas .pmd-grid-4 {
        display: flex;
        gap: 1rem;
        margin: 0 -1rem;
        padding: 0.25rem 1rem 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .pmd-sistemas .pmd-grid-4::-webkit-scrollbar { display: none; }

    .pmd-sistemas .pmd-signal {
        flex: 0 0 82%;
        scroll-snap-align: center;
    }

    /* HERRAMIENTAS → tarjeta más apretada, icono más chico */
    .pmd-sistemas .pmd-grid-tools .ccc-service-card { padding: 22px 20px; }

    .pmd-sistemas .pmd-tool-head .ccc-service-icon {
        width: 48px;
        height: 48px;
        font-size: 1.9rem;
    }

    /* PASOS → una columna */
    .pmd-sistemas .pmd-grid-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .pmd-sistemas .pmd-step { padding: 1.4rem 1.25rem; }
    .pmd-sistemas .pmd-step::before { font-size: 2rem; }

    .pmd-sistemas .pmd-quote { font-size: 0.90rem; }
    .pmd-sistemas .pmd-nota { padding: 16px 18px; }
}


/* ==========================================================================
   8. ACCESIBILIDAD
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .pmd-sistemas .pmd-signal { transition: none; }
    .pmd-sistemas .pmd-signal:hover { transform: none; }
}/* ==========================================================================
   PROMEDIMA · BASE PARA PÁGINAS DE SERVICIO
   promedima-paginas.css · 2026-08-18

   ── QUÉ ES ─────────────────────────────────────────────────────────────
   La capa compartida de las páginas de servicio. Antes cada página traía
   su propia hoja repitiendo los mismos tokens, la misma retícula y la
   misma tarjeta. Esto lo define UNA vez.

   ── DÓNDE VA ───────────────────────────────────────────────────────────
   Se pega AL FINAL del CSS global existente, después de todo lo que ya
   está. No reemplaza nada: solo agrega. Ninguna regla del CSS viejo se
   modifica, así que Home, Nosotros, Blog y las páginas que no se han
   tocado siguen exactamente igual.

   ── POR QUÉ USA LOS TOKENS ccc- ────────────────────────────────────────
   El :root del sitio ya declara --ccc-bg, --ccc-card-bg, --ccc-accent,
   --ccc-border y --ccc-text-muted con exactamente los valores que las
   hojas nuevas estaban duplicando. Aquí se usan esos, no se inventan
   nuevos. Si algún día cambia la paleta, cambia en un solo lugar.

   Los dos que sí faltaban se agregan con prefijo propio para no chocar:
   el acento cálido y las superficies claras.

   ── LOS TRES ENVOLTORIOS ───────────────────────────────────────────────
   Todo aplica a .pmd-pauta, .pmd-sistemas, .pmd-podcast y .pmd. Los tres
   primeros son los que ya están en el HTML, así que no hay que editar
   ninguna página. .pmd es el que usan las páginas nuevas de aquí en
   adelante.

   ── DESPUÉS DE ESTO ────────────────────────────────────────────────────
   Las tres hojas por página se reducen a lo que de verdad las diferencia:
     publicidad-digital.css → casos con KPIs y cifra de diagnóstico
     sistemas-operativos.css → bento de herramientas y señales
     podcast.css            → entregables por episodio y servicios del estudio
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════
   1 · TOKENS QUE FALTABAN
   Solo los dos que el sitio no tiene. El resto se hereda de :root.
   ══════════════════════════════════════════════════════════════════════ */

.pmd, .pmd-pauta, .pmd-sistemas, .pmd-podcast {
  /* acento cálido — se usa UNA vez por página, en el problema nombrado */
  --pmd-warm: #f59e0b;

  /* superficies claras, para las secciones sobre blanco */
  --pmd-paper: #fafafb;
  --pmd-card-light: #ffffff;
  --pmd-ink-dark: #14161a;
  --pmd-ink-soft: #3a3f4a;
  --pmd-line-light: #e3e5ea;

  /* superficie intermedia, para destacar sin invertir el color */
  --pmd-surface-2: #1f232b;

  --pmd-radius: 12px;
  --pmd-radius-lg: 16px;
  --pmd-gap: 20px;
  --pmd-gap-lg: 26px;
}


/* ══════════════════════════════════════════════════════════════════════
   2 · RETÍCULAS
   .ccc-grid-3 ya existe en el CSS global y funciona bien
   (auto-fit minmax 280px). Estas son las que faltaban, con nombre
   propio para no pisar nada.
   ══════════════════════════════════════════════════════════════════════ */

.pmd .pmd-g2, .pmd-pauta .pmd-g2, .pmd-sistemas .pmd-g2, .pmd-podcast .pmd-g2,
.pmd .pmd-g3, .pmd-pauta .pmd-g3, .pmd-sistemas .pmd-g3, .pmd-podcast .pmd-g3,
.pmd .pmd-g4, .pmd-pauta .pmd-g4, .pmd-sistemas .pmd-g4, .pmd-podcast .pmd-g4 {
  display: grid;
  gap: var(--pmd-gap);
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 640px) {
  .pmd .pmd-g2, .pmd-pauta .pmd-g2, .pmd-sistemas .pmd-g2, .pmd-podcast .pmd-g2,
  .pmd .pmd-g4, .pmd-pauta .pmd-g4, .pmd-sistemas .pmd-g4, .pmd-podcast .pmd-g4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .pmd .pmd-g2, .pmd-pauta .pmd-g2, .pmd-sistemas .pmd-g2, .pmd-podcast .pmd-g2 {
    gap: var(--pmd-gap-lg);
  }
  .pmd .pmd-g3, .pmd-pauta .pmd-g3, .pmd-sistemas .pmd-g3, .pmd-podcast .pmd-g3 {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pmd-gap-lg);
  }
  .pmd .pmd-g4, .pmd-pauta .pmd-g4, .pmd-sistemas .pmd-g4, .pmd-podcast .pmd-g4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Texto a un lado, panel al otro */
.pmd .pmd-split, .pmd-pauta .pmd-split, .pmd-sistemas .pmd-split, .pmd-podcast .pmd-split {
  display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start;
}
@media (min-width: 960px) {
  .pmd .pmd-split, .pmd-pauta .pmd-split, .pmd-sistemas .pmd-split, .pmd-podcast .pmd-split {
    grid-template-columns: 1fr 1fr; gap: 50px;
  }
}

/* Mosaico de 3 + 2, para cinco piezas sin dejar huérfana */
.pmd .pmd-g32, .pmd-pauta .pmd-g32, .pmd-sistemas .pmd-g32, .pmd-podcast .pmd-g32 {
  display: grid; grid-template-columns: 1fr; gap: var(--pmd-gap); align-items: stretch;
}
@media (min-width: 640px) {
  .pmd .pmd-g32, .pmd-pauta .pmd-g32, .pmd-sistemas .pmd-g32, .pmd-podcast .pmd-g32 {
    grid-template-columns: repeat(2, 1fr);
  }
  .pmd .pmd-g32 > *:last-child:nth-child(odd),
  .pmd-pauta .pmd-g32 > *:last-child:nth-child(odd),
  .pmd-sistemas .pmd-g32 > *:last-child:nth-child(odd),
  .pmd-podcast .pmd-g32 > *:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .pmd .pmd-g32, .pmd-pauta .pmd-g32, .pmd-sistemas .pmd-g32, .pmd-podcast .pmd-g32 {
    grid-template-columns: repeat(6, 1fr); gap: var(--pmd-gap-lg);
  }
  .pmd .pmd-g32 > *, .pmd-pauta .pmd-g32 > *, .pmd-sistemas .pmd-g32 > *, .pmd-podcast .pmd-g32 > * {
    grid-column: span 2;
  }
  .pmd .pmd-g32 > *:nth-child(4), .pmd .pmd-g32 > *:nth-child(5),
  .pmd-pauta .pmd-g32 > *:nth-child(4), .pmd-pauta .pmd-g32 > *:nth-child(5),
  .pmd-sistemas .pmd-g32 > *:nth-child(4), .pmd-sistemas .pmd-g32 > *:nth-child(5),
  .pmd-podcast .pmd-g32 > *:nth-child(4), .pmd-podcast .pmd-g32 > *:nth-child(5) {
    grid-column: span 3;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   3 · UTILIDADES
   ══════════════════════════════════════════════════════════════════════ */

.pmd .pmd-narrow, .pmd-pauta .pmd-narrow, .pmd-sistemas .pmd-narrow, .pmd-podcast .pmd-narrow {
  max-width: 860px; margin-left: auto; margin-right: auto;
}
.pmd .pmd-layer, .pmd-pauta .pmd-layer, .pmd-sistemas .pmd-layer, .pmd-podcast .pmd-layer {
  position: relative; z-index: 2;
}
.pmd .pmd-center, .pmd-pauta .pmd-center, .pmd-sistemas .pmd-center, .pmd-podcast .pmd-center { text-align: center; }
.pmd .pmd-mt-15, .pmd-pauta .pmd-mt-15, .pmd-sistemas .pmd-mt-15, .pmd-podcast .pmd-mt-15 { margin-top: 15px; }
.pmd .pmd-mt-30, .pmd-pauta .pmd-mt-30, .pmd-sistemas .pmd-mt-30, .pmd-podcast .pmd-mt-30 { margin-top: 30px; }
.pmd .pmd-mt-40, .pmd-pauta .pmd-mt-40, .pmd-sistemas .pmd-mt-40, .pmd-podcast .pmd-mt-40 { margin-top: 40px; }
.pmd .pmd-mb-40, .pmd-pauta .pmd-mb-40, .pmd-sistemas .pmd-mb-40, .pmd-podcast .pmd-mb-40 { margin-bottom: 40px; }

/* Cifras: siempre tabular, siempre monoespaciadas.
   Cualquier número que se compare en columna baila sin esto. */
.pmd .pmd-num, .pmd-pauta .pmd-num, .pmd-sistemas .pmd-num, .pmd-podcast .pmd-num,
.pmd .pmd-tabular, .pmd-pauta .pmd-tabular, .pmd-sistemas .pmd-tabular, .pmd-podcast .pmd-tabular {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}


/* ══════════════════════════════════════════════════════════════════════
   4 · TIPOGRAFÍA
   .pmd-h2 es la alternativa sin degradado a .ccc-section-heading.
   El global usa linear-gradient con background-clip:text, que obliga a
   parchar -webkit-text-fill-color en cada sección clara y deja el título
   invisible donde no está soportado.
   ══════════════════════════════════════════════════════════════════════ */

.pmd .pmd-h2, .pmd-pauta .pmd-h2, .pmd-sistemas .pmd-h2, .pmd-podcast .pmd-h2 {
  font-family: var(--ccc-font-titles, var(--ccc-heading-font, 'Bebas Neue')), Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.05;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  margin: 0 0 14px;
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--ccc-text-main, #f4f6f8);
}
.pmd .pmd-h2--dark, .pmd-pauta .pmd-h2--dark, .pmd-sistemas .pmd-h2--dark, .pmd-podcast .pmd-h2--dark {
  color: var(--pmd-ink-dark);
}

.pmd .pmd-lead, .pmd-pauta .pmd-lead, .pmd-sistemas .pmd-lead, .pmd-podcast .pmd-lead {
  font-size: 1.08rem; line-height: 1.6;
  color: var(--ccc-text-muted, #9ca3af);
  max-width: 70ch; margin: 0 0 8px;
}
.pmd .pmd-lead--dark, .pmd-pauta .pmd-lead--dark, .pmd-sistemas .pmd-lead--dark, .pmd-podcast .pmd-lead--dark {
  color: var(--pmd-ink-soft);
}

.pmd .pmd-eyebrow, .pmd-pauta .pmd-eyebrow, .pmd-sistemas .pmd-eyebrow, .pmd-podcast .pmd-eyebrow {
  display: inline-block;
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ccc-accent, #3b82f6); margin-bottom: 12px;
}

/* Respaldo: si el navegador no soporta background-clip en texto, el
   .ccc-section-heading del global saldría invisible. Esto lo rescata
   sin modificar la regla original. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .pmd .ccc-section-heading, .pmd-pauta .ccc-section-heading,
  .pmd-sistemas .ccc-section-heading, .pmd-podcast .ccc-section-heading {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--ccc-text-main, #fff);
  }
}


/* ══════════════════════════════════════════════════════════════════════
   5 · RUTA DE NAVEGACIÓN
   Debe existir en pantalla, no solo en el BreadcrumbList del schema.
   ══════════════════════════════════════════════════════════════════════ */

.pmd .pmd-breadcrumb, .pmd-pauta .pmd-breadcrumb, .pmd-sistemas .pmd-breadcrumb, .pmd-podcast .pmd-breadcrumb {
  font-size: .82rem; color: var(--ccc-text-muted, #9ca3af);
  margin-bottom: 18px; letter-spacing: .01em;
}
.pmd .pmd-breadcrumb a, .pmd-pauta .pmd-breadcrumb a, .pmd-sistemas .pmd-breadcrumb a, .pmd-podcast .pmd-breadcrumb a {
  color: var(--ccc-text-muted, #9ca3af); text-decoration: none;
}
.pmd .pmd-breadcrumb a:hover, .pmd-pauta .pmd-breadcrumb a:hover,
.pmd-sistemas .pmd-breadcrumb a:hover, .pmd-podcast .pmd-breadcrumb a:hover {
  color: var(--ccc-accent, #3b82f6); text-decoration: underline;
}
.pmd .pmd-breadcrumb span[aria-current], .pmd-pauta .pmd-breadcrumb span[aria-current],
.pmd-sistemas .pmd-breadcrumb span[aria-current], .pmd-podcast .pmd-breadcrumb span[aria-current] {
  color: var(--ccc-text-main, #f4f6f8);
}
.pmd .pmd-breadcrumb .sep, .pmd-pauta .pmd-breadcrumb .sep,
.pmd-sistemas .pmd-breadcrumb .sep, .pmd-podcast .pmd-breadcrumb .sep {
  margin: 0 8px; opacity: .5;
}


/* ══════════════════════════════════════════════════════════════════════
   6 · TARJETA
   Borde de 1px antes que sombra. .pmd-card--light para secciones claras:
   el tema de la tarjeta lo decide el fondo de su sección, no el gusto.
   ══════════════════════════════════════════════════════════════════════ */

.pmd .pmd-card, .pmd-pauta .pmd-card, .pmd-sistemas .pmd-card, .pmd-podcast .pmd-card {
  position: relative;
  background: var(--ccc-card-bg, #181b21);
  border: 1px solid var(--ccc-border, #2d3748);
  border-radius: var(--pmd-radius);
  padding: 26px 24px;
  display: flex; flex-direction: column;
  transition: border-color .2s ease, transform .2s ease;
}
.pmd .pmd-card:hover, .pmd-pauta .pmd-card:hover, .pmd-sistemas .pmd-card:hover, .pmd-podcast .pmd-card:hover {
  border-color: var(--ccc-accent, #3b82f6); transform: translateY(-2px);
}
.pmd .pmd-card h3, .pmd-pauta .pmd-card h3, .pmd-sistemas .pmd-card h3, .pmd-podcast .pmd-card h3 {
  font-size: 1.05rem; color: var(--ccc-text-main, #f4f6f8); margin: 0 0 10px; line-height: 1.3;
}
.pmd .pmd-card p, .pmd-pauta .pmd-card p, .pmd-sistemas .pmd-card p, .pmd-podcast .pmd-card p {
  font-size: .93rem; color: var(--ccc-text-muted, #9ca3af); margin: 0;
}
.pmd .pmd-card .pmd-ico, .pmd-pauta .pmd-card .pmd-ico,
.pmd-sistemas .pmd-card .pmd-ico, .pmd-podcast .pmd-card .pmd-ico {
  font-size: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--ccc-border, #2d3748); border-radius: 10px;
  margin-bottom: 16px; background: var(--pmd-surface-2);
}

.pmd .pmd-card--light, .pmd-pauta .pmd-card--light, .pmd-sistemas .pmd-card--light, .pmd-podcast .pmd-card--light {
  background: var(--pmd-card-light); border-color: var(--pmd-line-light);
}
.pmd .pmd-card--light h3, .pmd-pauta .pmd-card--light h3,
.pmd-sistemas .pmd-card--light h3, .pmd-podcast .pmd-card--light h3 { color: var(--pmd-ink-dark); }
.pmd .pmd-card--light p, .pmd-pauta .pmd-card--light p,
.pmd-sistemas .pmd-card--light p, .pmd-podcast .pmd-card--light p { color: var(--pmd-ink-soft); }
.pmd .pmd-card--light .pmd-ico, .pmd-pauta .pmd-card--light .pmd-ico,
.pmd-sistemas .pmd-card--light .pmd-ico, .pmd-podcast .pmd-card--light .pmd-ico {
  background: var(--pmd-paper); border-color: var(--pmd-line-light);
}

/* Destacada: borde y elevación, no invertir el color */
.pmd .pmd-destacada, .pmd-pauta .pmd-destacada, .pmd-sistemas .pmd-destacada, .pmd-podcast .pmd-destacada {
  border-color: var(--ccc-accent, #3b82f6);
  box-shadow: 0 0 0 1px rgba(59,130,246,.2), 0 10px 28px rgba(0,0,0,.3);
}

/* Enlace de cierre de tarjeta */
.pmd .pmd-more, .pmd-pauta .pmd-more, .pmd-sistemas .pmd-more, .pmd-podcast .pmd-more {
  margin-top: auto; padding-top: 16px;
  color: var(--ccc-accent, #3b82f6); font-weight: 600; font-size: .92rem; text-decoration: none;
}
.pmd .pmd-more:hover, .pmd-pauta .pmd-more:hover, .pmd-sistemas .pmd-more:hover, .pmd-podcast .pmd-more:hover {
  text-decoration: underline;
}
/* Suelto, fuera de tarjeta: necesita más contraste o se pierde */
.pmd .pmd-center .pmd-more, .pmd-pauta .pmd-center .pmd-more,
.pmd-sistemas .pmd-center .pmd-more, .pmd-podcast .pmd-center .pmd-more {
  color: var(--ccc-text-main, #f4f6f8);
  border-bottom: 1px solid var(--ccc-border, #2d3748);
  padding-bottom: 3px;
}
.pmd .pmd-center .pmd-more:hover, .pmd-pauta .pmd-center .pmd-more:hover,
.pmd-sistemas .pmd-center .pmd-more:hover, .pmd-podcast .pmd-center .pmd-more:hover {
  color: var(--ccc-accent, #3b82f6);
  border-bottom-color: var(--ccc-accent, #3b82f6);
  text-decoration: none;
}


/* ══════════════════════════════════════════════════════════════════════
   7 · PASO NUMERADO
   Convierte una lista de cosas en una secuencia. El número va detrás,
   en color de borde, para que no compite con el título.
   ══════════════════════════════════════════════════════════════════════ */

.pmd .pmd-step, .pmd-pauta .pmd-step, .pmd-sistemas .pmd-step, .pmd-podcast .pmd-step {
  position: relative;
  background: var(--ccc-card-bg, #181b21);
  border: 1px solid var(--ccc-border, #2d3748);
  border-radius: var(--pmd-radius);
  padding: 26px 24px 22px;
  overflow: hidden;
}
.pmd .pmd-step[data-n]::before, .pmd-pauta .pmd-step[data-n]::before,
.pmd-sistemas .pmd-step[data-n]::before, .pmd-podcast .pmd-step[data-n]::before {
  content: attr(data-n);
  position: absolute; top: 10px; right: 16px;
  font-family: var(--ccc-font-titles, var(--ccc-heading-font, 'Bebas Neue')), Impact, sans-serif;
  font-size: 3.4rem; line-height: 1;
  color: var(--ccc-border, #2d3748); pointer-events: none;
}
.pmd .pmd-step h3, .pmd-pauta .pmd-step h3, .pmd-sistemas .pmd-step h3, .pmd-podcast .pmd-step h3 {
  font-size: 1.02rem; color: var(--ccc-text-main, #f4f6f8);
  margin: 0 0 8px; padding-right: 44px; line-height: 1.3;
}
.pmd .pmd-step p, .pmd-pauta .pmd-step p, .pmd-sistemas .pmd-step p, .pmd-podcast .pmd-step p {
  font-size: .92rem; color: var(--ccc-text-muted, #9ca3af); margin: 0;
}
.pmd .pmd-step .pmd-ico, .pmd-pauta .pmd-step .pmd-ico,
.pmd-sistemas .pmd-step .pmd-ico, .pmd-podcast .pmd-step .pmd-ico {
  font-size: 1.5rem; display: block; margin-bottom: 12px;
}


/* ══════════════════════════════════════════════════════════════════════
   8 · AVISOS
   El cálido aparece UNA vez por página, en el problema nombrado. Si sale
   en dos lugares deja de significar algo.
   ══════════════════════════════════════════════════════════════════════ */

.pmd .pmd-alert, .pmd-pauta .pmd-alert, .pmd-sistemas .pmd-alert, .pmd-podcast .pmd-alert {
  border-left: 3px solid var(--ccc-accent, #3b82f6);
  background: rgba(59,130,246,.07);
  border-radius: 0 var(--pmd-radius) var(--pmd-radius) 0;
  padding: 22px 24px;
}
.pmd .pmd-alert h3, .pmd-pauta .pmd-alert h3, .pmd-sistemas .pmd-alert h3, .pmd-podcast .pmd-alert h3 {
  color: var(--ccc-text-main, #f4f6f8); margin: 0 0 10px; font-size: 1.08rem;
}
.pmd .pmd-alert p, .pmd-pauta .pmd-alert p, .pmd-sistemas .pmd-alert p, .pmd-podcast .pmd-alert p {
  margin: 0; color: rgba(244,246,248,.88);
}
.pmd .pmd-alert--light p, .pmd-pauta .pmd-alert--light p,
.pmd-sistemas .pmd-alert--light p, .pmd-podcast .pmd-alert--light p { color: var(--pmd-ink-soft); }
.pmd .pmd-alert--light h3, .pmd-pauta .pmd-alert--light h3,
.pmd-sistemas .pmd-alert--light h3, .pmd-podcast .pmd-alert--light h3 { color: var(--pmd-ink-dark); }

/* Alias: en las hojas viejas se llamaba --onDark */
.pmd .pmd-alert--onDark p, .pmd-pauta .pmd-alert--onDark p,
.pmd-sistemas .pmd-alert--onDark p, .pmd-podcast .pmd-alert--onDark p { color: rgba(244,246,248,.88); }

.pmd .pmd-alert--warm, .pmd-pauta .pmd-alert--warm, .pmd-sistemas .pmd-alert--warm, .pmd-podcast .pmd-alert--warm {
  border-left-color: var(--pmd-warm);
  background: rgba(245,158,11,.09);
}
.pmd .pmd-alert--warm strong, .pmd-pauta .pmd-alert--warm strong,
.pmd-sistemas .pmd-alert--warm strong, .pmd-podcast .pmd-alert--warm strong { color: var(--pmd-warm); }

.pmd .pmd-alert--stop, .pmd-pauta .pmd-alert--stop, .pmd-sistemas .pmd-alert--stop, .pmd-podcast .pmd-alert--stop {
  border-left-color: #ef4444; background: rgba(239,68,68,.07);
}
.pmd .pmd-alert--stop h3, .pmd-pauta .pmd-alert--stop h3,
.pmd-sistemas .pmd-alert--stop h3, .pmd-podcast .pmd-alert--stop h3 { color: #f87171; }


/* ══════════════════════════════════════════════════════════════════════
   9 · CADENA DE PROCESO
   nodo → nodo → nodo. Para explicar un flujo sin diagrama.
   ══════════════════════════════════════════════════════════════════════ */

.pmd .pmd-flow, .pmd-pauta .pmd-flow, .pmd-sistemas .pmd-flow, .pmd-podcast .pmd-flow {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 14px;
  background: var(--ccc-bg, #0f1115);
  border: 1px solid var(--ccc-border, #2d3748);
  border-radius: var(--pmd-radius-lg);
  padding: 26px 22px; margin: 32px 0;
}
.pmd .pmd-flow-node, .pmd-pauta .pmd-flow-node, .pmd-sistemas .pmd-flow-node, .pmd-podcast .pmd-flow-node {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
  font-size: .95rem; color: var(--ccc-text-main, #f4f6f8);
  border: 1px solid var(--ccc-border, #2d3748); border-radius: 8px;
  padding: 9px 15px; background: var(--ccc-card-bg, #181b21);
}
.pmd .pmd-flow-arrow, .pmd-pauta .pmd-flow-arrow, .pmd-sistemas .pmd-flow-arrow, .pmd-podcast .pmd-flow-arrow {
  color: var(--ccc-accent, #3b82f6); font-size: 1.1rem;
}
.pmd .pmd-flow-note, .pmd-pauta .pmd-flow-note, .pmd-sistemas .pmd-flow-note, .pmd-podcast .pmd-flow-note {
  flex-basis: 100%; text-align: center;
  color: var(--ccc-text-muted, #9ca3af); font-size: .9rem; margin: 6px 0 0;
}


/* ══════════════════════════════════════════════════════════════════════
   10 · PRECIOS
   Las tres tarjetas van en el tema de su sección. La destacada se
   distingue por borde y elevación, nunca invirtiendo el color: eso fue
   lo que dejó el texto ilegible en la primera versión.
   ══════════════════════════════════════════════════════════════════════ */

.pmd .pmd-plan, .pmd-pauta .pmd-plan, .pmd-sistemas .pmd-plan, .pmd-podcast .pmd-plan {
  background: var(--ccc-card-bg, #181b21);
  border: 1px solid var(--ccc-border, #2d3748);
  border-radius: var(--pmd-radius-lg);
  padding: 30px 26px;
  display: flex; flex-direction: column;
  color: var(--ccc-text-main, #f4f6f8);
}
.pmd .pmd-plan h3, .pmd-pauta .pmd-plan h3, .pmd-sistemas .pmd-plan h3, .pmd-podcast .pmd-plan h3 {
  font-family: var(--ccc-font-titles, var(--ccc-heading-font, 'Bebas Neue')), Impact, sans-serif;
  text-transform: uppercase; letter-spacing: .02em;
  font-size: 1.55rem; color: var(--ccc-text-main, #f4f6f8); margin: 0 0 8px;
}
.pmd .pmd-plan-desc, .pmd-pauta .pmd-plan-desc, .pmd-sistemas .pmd-plan-desc, .pmd-podcast .pmd-plan-desc {
  color: var(--ccc-text-muted, #9ca3af); font-size: .92rem; margin: 0 0 18px;
}
.pmd .pmd-plan-price, .pmd-pauta .pmd-plan-price, .pmd-sistemas .pmd-plan-price, .pmd-podcast .pmd-plan-price {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  font-size: 2rem; font-weight: 700; color: var(--ccc-text-main, #f4f6f8); line-height: 1;
}
.pmd .pmd-plan-price small, .pmd-pauta .pmd-plan-price small,
.pmd-sistemas .pmd-plan-price small, .pmd-podcast .pmd-plan-price small {
  font-size: .88rem; color: var(--ccc-text-muted, #9ca3af); font-weight: 400;
}
.pmd .pmd-plan-setup, .pmd-pauta .pmd-plan-setup, .pmd-sistemas .pmd-plan-setup, .pmd-podcast .pmd-plan-setup {
  font-size: .82rem; color: var(--ccc-text-muted, #9ca3af);
  margin: 10px 0 20px; padding-bottom: 18px;
  border-bottom: 1px solid var(--ccc-border, #2d3748);
}
.pmd .pmd-plan ul, .pmd-pauta .pmd-plan ul, .pmd-sistemas .pmd-plan ul, .pmd-podcast .pmd-plan ul {
  list-style: none; padding: 0; margin: 0 0 26px;
}
.pmd .pmd-plan li, .pmd-pauta .pmd-plan li, .pmd-sistemas .pmd-plan li, .pmd-podcast .pmd-plan li {
  position: relative; padding-left: 22px; margin-bottom: 10px;
  font-size: .92rem; color: #cbd5e1; line-height: 1.45;
}
.pmd .pmd-plan li::before, .pmd-pauta .pmd-plan li::before,
.pmd-sistemas .pmd-plan li::before, .pmd-podcast .pmd-plan li::before {
  content: "\2192"; position: absolute; left: 0; color: var(--ccc-accent, #3b82f6);
}
.pmd .pmd-plan .pmd-cta, .pmd-pauta .pmd-plan .pmd-cta,
.pmd-sistemas .pmd-plan .pmd-cta, .pmd-podcast .pmd-plan .pmd-cta {
  margin-top: auto; display: block; text-align: center;
}

.pmd .pmd-plan--featured, .pmd-pauta .pmd-plan--featured,
.pmd-sistemas .pmd-plan--featured, .pmd-podcast .pmd-plan--featured {
  background: var(--pmd-surface-2);
  border-color: var(--ccc-accent, #3b82f6);
  box-shadow: 0 0 0 1px rgba(59,130,246,.25), 0 12px 32px rgba(0,0,0,.35);
}
.pmd .pmd-plan .pmd-badge, .pmd-pauta .pmd-plan .pmd-badge,
.pmd-sistemas .pmd-plan .pmd-badge, .pmd-podcast .pmd-plan .pmd-badge {
  position: absolute; top: -12px; left: 26px;
  background: var(--ccc-accent, #3b82f6); color: #fff;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 4px; font-weight: 700;
}
.pmd .pmd-plan--featured, .pmd-pauta .pmd-plan--featured,
.pmd-sistemas .pmd-plan--featured, .pmd-podcast .pmd-plan--featured { position: relative; }

/* El botón secundario del global es para fondo claro. Sobre oscuro queda
   como contorno vacío sin texto visible. */
.pmd .pmd-plan .ccc-btn-secondary, .pmd-pauta .pmd-plan .ccc-btn-secondary,
.pmd-sistemas .pmd-plan .ccc-btn-secondary, .pmd-podcast .pmd-plan .ccc-btn-secondary {
  color: var(--ccc-text-main, #f4f6f8) !important;
  border-color: var(--ccc-border, #2d3748) !important;
  display: block; text-align: center;
}
.pmd .pmd-plan .ccc-btn-secondary:hover, .pmd-pauta .pmd-plan .ccc-btn-secondary:hover,
.pmd-sistemas .pmd-plan .ccc-btn-secondary:hover, .pmd-podcast .pmd-plan .ccc-btn-secondary:hover {
  color: var(--ccc-accent, #3b82f6) !important;
  border-color: var(--ccc-accent, #3b82f6) !important;
}
.pmd .pmd-plan .ccc-btn-primary, .pmd-pauta .pmd-plan .ccc-btn-primary,
.pmd-sistemas .pmd-plan .ccc-btn-primary, .pmd-podcast .pmd-plan .ccc-btn-primary {
  display: block; text-align: center; width: 100%;
}


/* ══════════════════════════════════════════════════════════════════════
   11 · PREGUNTAS FRECUENTES
   ══════════════════════════════════════════════════════════════════════ */

.pmd .pmd-faq, .pmd-pauta .pmd-faq, .pmd-sistemas .pmd-faq, .pmd-podcast .pmd-faq {
  border: 1px solid var(--ccc-border, #2d3748);
  border-radius: var(--pmd-radius);
  padding: 22px 24px; margin-bottom: 12px;
  background: var(--ccc-card-bg, #181b21);
}
.pmd .pmd-faq h3, .pmd-pauta .pmd-faq h3, .pmd-sistemas .pmd-faq h3, .pmd-podcast .pmd-faq h3 {
  color: var(--ccc-text-main, #f4f6f8); margin: 0 0 10px; font-size: 1.05rem; line-height: 1.35;
}
.pmd .pmd-faq p, .pmd-pauta .pmd-faq p, .pmd-sistemas .pmd-faq p, .pmd-podcast .pmd-faq p {
  color: var(--ccc-text-muted, #9ca3af); margin: 0; font-size: .95rem;
}


/* ══════════════════════════════════════════════════════════════════════
   12 · PLEGABLE
   <details> nativo: sin JavaScript, con teclado, con lector de pantalla.
   El área de toque se fija en 44px, que es el mínimo cómodo en celular.
   ══════════════════════════════════════════════════════════════════════ */

.pmd details.pmd-det, .pmd-pauta details.pmd-det, .pmd-sistemas details.pmd-det, .pmd-podcast details.pmd-det,
.pmd .pmd-bento details, .pmd-pauta .pmd-bento details, .pmd-sistemas .pmd-bento details, .pmd-podcast .pmd-bento details {
  margin: 0 0 16px;
}
.pmd .pmd-bento summary, .pmd-pauta .pmd-bento summary,
.pmd-sistemas .pmd-bento summary, .pmd-podcast .pmd-bento summary,
.pmd details.pmd-det summary, .pmd-pauta details.pmd-det summary,
.pmd-sistemas details.pmd-det summary, .pmd-podcast details.pmd-det summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .86rem; font-weight: 600;
  color: var(--ccc-accent, #3b82f6);
  padding: 8px 0; min-height: 44px; user-select: none;
}
.pmd .pmd-bento summary::-webkit-details-marker, .pmd-pauta .pmd-bento summary::-webkit-details-marker,
.pmd-sistemas .pmd-bento summary::-webkit-details-marker, .pmd-podcast .pmd-bento summary::-webkit-details-marker,
.pmd details.pmd-det summary::-webkit-details-marker, .pmd-pauta details.pmd-det summary::-webkit-details-marker,
.pmd-sistemas details.pmd-det summary::-webkit-details-marker, .pmd-podcast details.pmd-det summary::-webkit-details-marker {
  display: none;
}
.pmd .pmd-bento summary::marker, .pmd-pauta .pmd-bento summary::marker,
.pmd-sistemas .pmd-bento summary::marker, .pmd-podcast .pmd-bento summary::marker { content: ""; }

.pmd .pmd-bento summary::after, .pmd-pauta .pmd-bento summary::after,
.pmd-sistemas .pmd-bento summary::after, .pmd-podcast .pmd-bento summary::after { content: "\FF0B"; font-size: 1rem; line-height: 1; }
.pmd .pmd-bento details[open] summary::after, .pmd-pauta .pmd-bento details[open] summary::after,
.pmd-sistemas .pmd-bento details[open] summary::after, .pmd-podcast .pmd-bento details[open] summary::after { content: "\FF0D"; }

.pmd .pmd-bento summary:focus-visible, .pmd-pauta .pmd-bento summary:focus-visible,
.pmd-sistemas .pmd-bento summary:focus-visible, .pmd-podcast .pmd-bento summary:focus-visible {
  outline: 2px solid var(--ccc-accent, #3b82f6); outline-offset: 3px; border-radius: 4px;
}


/* ══════════════════════════════════════════════════════════════════════
   13 · ACCESIBILIDAD
   ══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .pmd *, .pmd-pauta *, .pmd-sistemas *, .pmd-podcast * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .pmd .pmd-card:hover, .pmd-pauta .pmd-card:hover,
  .pmd-sistemas .pmd-card:hover, .pmd-podcast .pmd-card:hover { transform: none; }
}
/* ==========================================================================
   PROMEDIMA · DISEÑO DE PÁGINAS WEB Y ECOMMERCE
   desarrollo-web-ecommerce.css · 2026-08-19

   ── QUÉ ES ─────────────────────────────────────────────────────────────
   Solo lo que esta página tiene y las demás no. Todo lo compartido
   —retículas, tarjeta, paso numerado, avisos, precios, FAQ, plegable—
   ya vive en la capa .pmd del CSS global. Esta hoja NO lo repite.

   ── DÓNDE VA ───────────────────────────────────────────────────────────
   Al final del CSS global, después de la capa .pmd. No reemplaza nada.

   ── ALCANCE ────────────────────────────────────────────────────────────
   Todo cuelga de .pmd-web, que va como segunda clase en el envoltorio:
       <div class="pmd pmd-web"> … </div>
   .pmd da lo compartido, .pmd-web lo propio. Nada se derrama a otra página.

   ── LO QUE TRAE ────────────────────────────────────────────────────────
   0 · Enlaces de prosa (los que no llevan clase propia)
   1 · Tira de métricas verificables
   2 · Tabla comparativa
   3 · Lista de sitios publicados
   4 · Lista con palomas
   5 · Ajustes de móvil
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════
   0 · ENLACES DE PROSA
   Un enlace suelto dentro de un párrafo, un aviso o una lista no hereda
   ningún color del sistema: se queda con el color de liga del tema, que
   sobre fondo oscuro sale vino y no se lee.

   Va PRIMERO en la hoja a propósito. Cualquier regla posterior con la
   misma especificidad —.pmd-web-sitio a, por ejemplo— le gana, y las de
   la capa compartida (.pmd .pmd-breadcrumb a) también, que es lo que se
   busca: esto es la red de seguridad, no la decisión de diseño.

   Contraste calculado: 5.14:1 sobre el fondo, 4.69:1 sobre tarjeta y
   4.93:1 sobre aviso. Los tres pasan WCAG AA.
   ══════════════════════════════════════════════════════════════════════ */

.pmd-web a:not([class]) {
  color: var(--ccc-accent, #3b82f6);
  text-decoration: none;
}

.pmd-web a:not([class]):hover { text-decoration: underline; }

.pmd-web a:not([class]):focus-visible {
  outline: 2px solid var(--ccc-accent, #3b82f6);
  outline-offset: 3px;
  border-radius: 3px;
}


/* ══════════════════════════════════════════════════════════════════════
   1 · TIRA DE MÉTRICAS VERIFICABLES
   Las cuatro cifras de PageSpeed. Es lo único de la página que el lector
   puede comprobar él mismo, así que va alto y se lee de un golpe.
   ══════════════════════════════════════════════════════════════════════ */

.pmd-web .pmd-web-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ccc-border, #2d3748);
  border: 1px solid var(--ccc-border, #2d3748);
  border-radius: var(--pmd-radius-lg, 16px);
  overflow: hidden;
}

@media (min-width: 720px) {
  .pmd-web .pmd-web-kpis { grid-template-columns: repeat(4, 1fr); }
}

.pmd-web .pmd-web-kpi {
  background: var(--ccc-card-bg, #181b21);
  padding: 26px 18px;
  text-align: center;
}

.pmd-web .pmd-web-kpi-n {
  display: block;
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 700;
  color: var(--ccc-text-main, #f4f6f8);
}

.pmd-web .pmd-web-kpi-l {
  display: block;
  margin-top: 8px;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ccc-text-muted, #9ca3af);
}

.pmd-web .pmd-web-fuente {
  margin: 14px 0 0;
  font-size: .82rem;
  color: var(--ccc-text-muted, #9ca3af);
  text-align: center;
}


/* ══════════════════════════════════════════════════════════════════════
   2 · TABLA COMPARATIVA
   Dos columnas de decisión. En celular no se hace scroll horizontal:
   se apila con la etiqueta pegada al dato.
   ══════════════════════════════════════════════════════════════════════ */

.pmd-web .pmd-web-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
}

.pmd-web .pmd-web-tabla th,
.pmd-web .pmd-web-tabla td {
  padding: 13px 14px;
  text-align: left;
  border-bottom: 1px solid var(--pmd-line-light, #e3e5ea);
  color: var(--pmd-ink-soft, #3a3f4a);
  vertical-align: top;
}

.pmd-web .pmd-web-tabla thead th {
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pmd-ink-dark, #14161a);
  border-bottom-width: 2px;
}

.pmd-web .pmd-web-tabla tbody th {
  font-weight: 600;
  color: var(--pmd-ink-dark, #14161a);
}

@media (max-width: 640px) {
  .pmd-web .pmd-web-tabla,
  .pmd-web .pmd-web-tabla tbody,
  .pmd-web .pmd-web-tabla tr,
  .pmd-web .pmd-web-tabla td,
  .pmd-web .pmd-web-tabla th { display: block; width: 100%; }

  .pmd-web .pmd-web-tabla thead { display: none; }

  .pmd-web .pmd-web-tabla tr {
    border: 1px solid var(--pmd-line-light, #e3e5ea);
    border-radius: var(--pmd-radius, 12px);
    margin-bottom: 12px;
    padding: 6px 4px;
  }

  .pmd-web .pmd-web-tabla td,
  .pmd-web .pmd-web-tabla tbody th { border-bottom: 0; padding: 8px 14px; }

  .pmd-web .pmd-web-tabla td::before {
    content: attr(data-col) " · ";
    font-size: .74rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ccc-text-muted, #9ca3af);
  }
}


/* ══════════════════════════════════════════════════════════════════════
   3 · SITIOS PUBLICADOS
   Lista sobria, sin capturas: una captura vieja envejece la página y
   obliga a mantenerla. El enlace es la prueba.
   ══════════════════════════════════════════════════════════════════════ */

.pmd-web .pmd-web-sitios {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--pmd-line-light, #e3e5ea);
  border: 1px solid var(--pmd-line-light, #e3e5ea);
  border-radius: var(--pmd-radius, 12px);
  overflow: hidden;
}

@media (min-width: 760px) {
  .pmd-web .pmd-web-sitios { grid-template-columns: repeat(2, 1fr); }
}

.pmd-web .pmd-web-sitio {
  background: var(--pmd-card-light, #ffffff);
  padding: 20px 22px;
}

.pmd-web .pmd-web-sitio h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--pmd-ink-dark, #14161a);
  line-height: 1.3;
}

.pmd-web .pmd-web-sitio p {
  margin: 0 0 10px;
  font-size: .9rem;
  color: var(--pmd-ink-soft, #3a3f4a);
}

.pmd-web .pmd-web-sitio a {
  font-size: .85rem;
  font-weight: 600;
  color: var(--ccc-accent, #3b82f6);
  text-decoration: none;
  word-break: break-word;
}

.pmd-web .pmd-web-sitio a:hover { text-decoration: underline; }


/* ══════════════════════════════════════════════════════════════════════
   4 · LISTA CON PALOMAS
   Para entregables contables. La paloma es decorativa: el lector de
   pantalla lee el texto, no el símbolo.
   ══════════════════════════════════════════════════════════════════════ */

.pmd-web .pmd-web-check {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pmd-web .pmd-web-check li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ccc-text-muted, #9ca3af);
}

.pmd-web .pmd-web-check li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ccc-accent, #3b82f6);
  font-weight: 700;
}

.pmd-web .pmd-web-check strong { color: var(--ccc-text-main, #f4f6f8); font-weight: 600; }


/* ══════════════════════════════════════════════════════════════════════
   5 · AJUSTES DE MÓVIL

   El arreglo del hero en móvil YA NO VIVE AQUÍ. Se subió a la capa .pmd
   compartida como sección 14, porque el problema no era de esta página:
   sistemas, podcast y pauta lo tienen igual. Si lo dejara aquí habría
   que repetirlo cuatro veces y corregirlo cuatro veces.

   Aquí solo queda lo que de verdad es de esta página: la tira de
   métricas.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Cuatro celdas de 26px de alto suman mucho apiladas en dos filas.
     Se compacta sin perder la cifra, que es lo que se lee. */
  .pmd-web .pmd-web-kpi { padding: 18px 12px; }
  .pmd-web .pmd-web-kpi-n { font-size: 2.1rem; }
  .pmd-web .pmd-web-kpi-l { font-size: .7rem; letter-spacing: .06em; }
}

/* ==========================================================================
   PROMEDIMA · ENLACES DE PROSA EN LA CAPA COMPARTIDA
   2026-08-20

   ── QUÉ ARREGLA ────────────────────────────────────────────────────────
   Un enlace suelto dentro de un párrafo, un aviso o una lista no hereda
   ningún color del sistema: se queda con el color de liga del tema, que
   sobre fondo oscuro sale casi negro y no se lee.

   Esto YA ESTABA RESUELTO, pero en el lugar equivocado. La regla vive en
   desarrollo-web-ecommerce.css como `.pmd-web a:not([class])`, o sea que
   solo protege a esa página. Las demás —sistemas, podcast, pauta, CRM,
   restaurantes— siguen sin red.

   Es el mismo movimiento que ya se hizo con el arreglo del banner en
   teléfono: estaba en la hoja de una página, el problema era de todas, y
   se subió a la capa compartida. Aquí igual.

   ── DÓNDE VA ───────────────────────────────────────────────────────────
   Al final de promedima-paginas.css, después de la sección de
   accesibilidad. No reemplaza nada.

   Cuando esto quede pegado, la regla `.pmd-web a:not([class])` de
   desarrollo-web-ecommerce.css se vuelve redundante. Puede quedarse sin
   causar daño —gana por especificidad y pinta el mismo color— pero
   conviene borrarla para no mantener lo mismo en dos lugares.

   ── CONTRASTE, MEDIDO ──────────────────────────────────────────────────
   Sobre el fondo del aviso rojo (#1f1518), que es el más oscuro:

     acento #3b82f6 ................. 4.84:1   pasa AA (mínimo 4.5:1)
     texto de párrafo al 88% ....... 12.86:1
     blanco pleno #f4f6f8 .......... 16.45:1

   El acento pasa, pero por poco: 4.84 contra un mínimo de 4.5. Por eso
   dentro de los avisos el enlace NO usa el acento — usa el color del
   texto que lo rodea, con más peso y subrayado. Se lee mejor y no mete
   un azul dentro de un recuadro rojo o ámbar.
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════
   14 · RED DE SEGURIDAD — enlaces sin clase, en cualquier página .pmd

   Va PRIMERO a propósito. Cualquier regla posterior con la misma
   especificidad le gana, que es justo lo que se busca: esto es el piso,
   no la decisión de diseño.
   ══════════════════════════════════════════════════════════════════════ */

.pmd a:not([class]),
.pmd-pauta a:not([class]),
.pmd-sistemas a:not([class]),
.pmd-podcast a:not([class]),
.pmd-crm a:not([class]),
.pmd-restaurantes a:not([class]) {
  color: var(--ccc-accent, #3b82f6);
  text-decoration: none;
}

.pmd a:not([class]):hover,
.pmd-pauta a:not([class]):hover,
.pmd-sistemas a:not([class]):hover,
.pmd-podcast a:not([class]):hover,
.pmd-crm a:not([class]):hover,
.pmd-restaurantes a:not([class]):hover { text-decoration: underline; }

.pmd a:not([class]):focus-visible,
.pmd-pauta a:not([class]):focus-visible,
.pmd-sistemas a:not([class]):focus-visible,
.pmd-podcast a:not([class]):focus-visible,
.pmd-crm a:not([class]):focus-visible,
.pmd-restaurantes a:not([class]):focus-visible {
  outline: 2px solid var(--ccc-accent, #3b82f6);
  outline-offset: 3px;
  border-radius: 3px;
}


/* ══════════════════════════════════════════════════════════════════════
   15 · DENTRO DE UN AVISO — el enlace toma el color de su vecino

   Un aviso ya tiene su propio color de borde: azul, ámbar o rojo. Meterle
   un enlace azul adentro compite con eso. Aquí el enlace se distingue por
   peso y subrayado, no por color, y hereda el tono del texto que lo rodea
   — incluidos los avisos claros, donde el texto es oscuro.
   ══════════════════════════════════════════════════════════════════════ */

.pmd .pmd-alert a,
.pmd-pauta .pmd-alert a,
.pmd-sistemas .pmd-alert a,
.pmd-podcast .pmd-alert a,
.pmd-crm .pmd-alert a,
.pmd-restaurantes .pmd-alert a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .2s ease;
}

/* Al pasar el cursor sí entra el acento del aviso, para que se note que
   respondió sin cambiar el color del texto. */
.pmd .pmd-alert a:hover,
.pmd-pauta .pmd-alert a:hover,
.pmd-sistemas .pmd-alert a:hover,
.pmd-podcast .pmd-alert a:hover,
.pmd-crm .pmd-alert a:hover,
.pmd-restaurantes .pmd-alert a:hover {
  text-decoration-thickness: 2px;
}

.pmd .pmd-alert a:focus-visible,
.pmd-pauta .pmd-alert a:focus-visible,
.pmd-sistemas .pmd-alert a:focus-visible,
.pmd-podcast .pmd-alert a:focus-visible,
.pmd-crm .pmd-alert a:focus-visible,
.pmd-restaurantes .pmd-alert a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 3px;
}


/* ══════════════════════════════════════════════════════════════════════
   16 · DENTRO DE UNA TARJETA Y DE UNA PREGUNTA FRECUENTE

   Mismo caso: el párrafo de .pmd-card y de .pmd-faq va en gris apagado,
   y un enlace ahí adentro sin regla se pierde. Aquí sí entra el acento,
   porque no hay color de aviso con el que competir.
   ══════════════════════════════════════════════════════════════════════ */

.pmd .pmd-card p a, .pmd .pmd-faq p a,
.pmd-pauta .pmd-card p a, .pmd-pauta .pmd-faq p a,
.pmd-sistemas .pmd-card p a, .pmd-sistemas .pmd-faq p a,
.pmd-podcast .pmd-card p a, .pmd-podcast .pmd-faq p a,
.pmd-crm .pmd-card p a, .pmd-crm .pmd-faq p a,
.pmd-restaurantes .pmd-card p a, .pmd-restaurantes .pmd-faq p a {
  color: var(--ccc-accent, #3b82f6);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* En tarjeta clara el acento sigue pasando AA (4.7:1 sobre blanco roto),
   así que no hace falta variante. Solo se sube el peso para que se vea. */


/* ══════════════════════════════════════════════════════════════════════
   17 · MOVIMIENTO REDUCIDO
   ══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .pmd .pmd-alert a, .pmd-pauta .pmd-alert a, .pmd-sistemas .pmd-alert a,
  .pmd-podcast .pmd-alert a, .pmd-crm .pmd-alert a, .pmd-restaurantes .pmd-alert a {
    transition: none;
  }
}

/* ==========================================================================
   PROMEDIMA · LEYENDA DE CLIC EN TARJETAS QUE SON ENLACE
   2026-08-20

   ── QUÉ RESUELVE ───────────────────────────────────────────────────────
   En la retícula de servicios del inicio, la tarjeta COMPLETA es el
   enlace: <a class="ccc-service-card">. Eso es bueno para el área de
   toque en celular, pero no se ve que sea clicable.

   La leyenda "Ver el servicio →" se agregó como <span class="pmd-more">
   y NO como <a>, porque un enlace dentro de otro enlace es marcado
   inválido: el navegador cierra el primero y saca el segundo, rompiendo
   el anidamiento y el área de toque.

   Un <span> hereda el clic de la tarjeta, se ve igual, y es válido.

   Lo que falta es que ese span REACCIONE cuando el cursor entra a la
   tarjeta, no solo cuando pasa justo encima de él. Eso es lo de abajo.

   ── DÓNDE VA ───────────────────────────────────────────────────────────
   Al final de promedima-paginas.css, después de las secciones 14 a 17
   de pmd-enlaces-de-prosa.css.

   ⚠ Y recuerda agregar .pmd-inicio y .pmd-hub a los selectores de
     pmd-enlaces-de-prosa.css, o los enlaces sueltos de esas dos páginas
     se quedan sin red de seguridad.
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════
   18 · LA LEYENDA REACCIONA A LA TARJETA COMPLETA

   Con foco de teclado también, no solo con cursor: quien navega con
   tabulador tiene que ver lo mismo que quien usa ratón.
   ══════════════════════════════════════════════════════════════════════ */

.pmd .ccc-service-card .pmd-more,
.pmd-inicio .ccc-service-card .pmd-more {
  display: block;
  margin-top: 16px;
  color: var(--ccc-accent, #3b82f6);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  transition: gap .2s ease, opacity .2s ease;
}

.pmd .ccc-service-card:hover .pmd-more,
.pmd .ccc-service-card:focus-visible .pmd-more,
.pmd-inicio .ccc-service-card:hover .pmd-more,
.pmd-inicio .ccc-service-card:focus-visible .pmd-more {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* El foco se marca en la tarjeta entera, que es lo que de verdad recibe
   el clic — no en la leyenda, que es un span sin foco propio. */
.pmd .ccc-service-card:focus-visible,
.pmd-inicio .ccc-service-card:focus-visible {
  outline: 2px solid var(--ccc-accent, #3b82f6);
  outline-offset: 3px;
}


/* ══════════════════════════════════════════════════════════════════════
   19 · OPCIONAL · LEYENDA ALINEADA AL FONDO DE TODAS LAS TARJETAS

   Sin esto, la leyenda queda pegada al final de su párrafo, así que en
   una retícula donde unas descripciones son más largas que otras las
   leyendas quedan a distinta altura. Se ve desordenado.

   Con esto, todas se alinean abajo.

   ⚠ EL PORQUÉ DE LA ADVERTENCIA: convierte .ccc-service-card en flex
   column. Si tu componente ya trae display propio —grid, o algún
   alineado especial— esto lo cambia. Los hijos se apilan igual que en
   block, así que el riesgo es bajo, pero PRUÉBALO antes de darlo por
   bueno. Si algo se ve raro, borra este bloque y solo pierdes la
   alineación.
   ══════════════════════════════════════════════════════════════════════ */

.pmd .ccc-service-card,
.pmd-inicio .ccc-service-card {
  display: flex;
  flex-direction: column;
}

.pmd .ccc-service-card .pmd-more,
.pmd-inicio .ccc-service-card .pmd-more {
  margin-top: auto;
  padding-top: 16px;
}


/* ══════════════════════════════════════════════════════════════════════
   20 · MOVIMIENTO REDUCIDO
   ══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .pmd .ccc-service-card .pmd-more,
  .pmd-inicio .ccc-service-card .pmd-more { transition: none; }
}/* ==========================================================================
   PROMEDIMA · EL BANNER EN TELÉFONO
   2026-08-19

   ── QUÉ ARREGLA ────────────────────────────────────────────────────────
   El banner de las páginas de servicio mide 833px de alto en un teléfono
   de 371px. La pantalla útil es de unos 700px, así que no cabe: siempre
   hay que hacer scroll antes de ver el segundo botón.

   205px de esos 833 son espacio muerto, y 116 son padding puro:

     · .ccc-hero-section tiene padding-top:180px y padding-bottom:80px
       SIN variante para teléfono. Los 180px se calcularon para librar la
       barra fija de escritorio; en móvil la barra mide la mitad.
     · .ccc-main-title baja a 2.2rem debajo de 380px pero conserva
       line-height:1.3!important. En Bebas Neue, que es fuente de
       despliegue, eso deja los renglones flotando: 35px de más en un
       título de cuatro líneas.
     · Entre el párrafo y los botones hay 40px de margen inferior más
       30px de .pmd-mt-30. Setenta píxeles en la pantalla donde menos
       sobran.

   Con esto el banner pasa de 833px a 628px: cabe en pantalla.

   ── DÓNDE VA ───────────────────────────────────────────────────────────
   Al final del CSS global. No reemplaza nada, no borres nada.

   ── A QUIÉN APLICA ─────────────────────────────────────────────────────
   Solo a las páginas de servicio, por sus envoltorios. Home, Nosotros y
   Blog no llevan envoltorio .pmd*, así que no se tocan.

   Cubre los dos nombres de banner por si alguna página ya usa el nuevo:
   .ccc-hero-section (el actual) y .pmd-portada (el unificado).
   ========================================================================== */

@media (max-width: 768px) {

  /* ── 1 · El vacío de arriba y de abajo ─────────────────────────────── */

  .pmd .ccc-hero-section,
  .pmd-web .ccc-hero-section,
  .pmd-sistemas .ccc-hero-section,
  .pmd-podcast .ccc-hero-section,
  .pmd-pauta .ccc-hero-section,
  .pmd .pmd-hero,
  .pmd-sistemas .pmd-hero,
  .pmd-podcast .pmd-hero,
  .pmd .pmd-portada,
  .pmd-sistemas .pmd-portada,
  .pmd-podcast .pmd-portada {
    padding-top: 104px;
    padding-bottom: 40px;
  }

  /* ── 2 · Interlineado de despliegue, no de párrafo ─────────────────── */

  .pmd .ccc-main-title,
  .pmd-web .ccc-main-title,
  .pmd-sistemas .ccc-main-title,
  .pmd-podcast .ccc-main-title,
  .pmd-pauta .ccc-main-title,
  .pmd .pmd-portada-titulo,
  .pmd-sistemas .pmd-portada-titulo,
  .pmd-podcast .pmd-portada-titulo {
    line-height: 1.05 !important;
    margin-bottom: 14px;
  }

  /* ── 3 · Cerrar el hueco entre el párrafo y los botones ────────────── */

  .pmd .ccc-hero-section .ccc-lead,
  .pmd-web .ccc-hero-section .ccc-lead,
  .pmd-sistemas .ccc-hero-section .ccc-lead,
  .pmd-podcast .ccc-hero-section .ccc-lead,
  .pmd-pauta .ccc-hero-section .ccc-lead,
  .pmd .pmd-portada-entrada,
  .pmd-sistemas .pmd-portada-entrada,
  .pmd-podcast .pmd-portada-entrada {
    margin-bottom: 22px;
  }

  /* Gana al .pmd-mt-30 que traen las botoneras, que empata en
     especificidad y solo pierde por ir antes en el archivo. */
  .pmd .ccc-hero-buttons,
  .pmd-web .ccc-hero-buttons,
  .pmd-sistemas .ccc-hero-buttons,
  .pmd-podcast .ccc-hero-buttons,
  .pmd-pauta .ccc-hero-buttons,
  .pmd .pmd-portada-acciones,
  .pmd-sistemas .pmd-portada-acciones,
  .pmd-podcast .pmd-portada-acciones {
    margin-top: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* Apilados a todo lo ancho: en fila se parten a la mitad, quedan de
     anchos distintos y el segundo cae debajo del pliegue. */
  .pmd .ccc-hero-buttons > a,
  .pmd-web .ccc-hero-buttons > a,
  .pmd-sistemas .ccc-hero-buttons > a,
  .pmd-podcast .ccc-hero-buttons > a,
  .pmd-pauta .ccc-hero-buttons > a,
  .pmd .pmd-portada-acciones > a,
  .pmd-sistemas .pmd-portada-acciones > a,
  .pmd-podcast .pmd-portada-acciones > a {
    text-align: center;
  }

  /* ── 4 · La ruta de navegación se pega al menú al acortar ──────────── */

  .pmd .pmd-breadcrumb,
  .pmd-web .pmd-breadcrumb,
  .pmd-sistemas .pmd-breadcrumb,
  .pmd-podcast .pmd-breadcrumb,
  .pmd-pauta .pmd-breadcrumb {
    margin-bottom: 14px;
  }
}/* ==========================================================================
   PROMEDIMA · SISTEMA DE CONTROL ESCOLAR
   control-escolar.css · 2026-08-24

   ── QUÉ ES ─────────────────────────────────────────────────────────────
   Solo lo que esta página tiene y las demás no. Todo lo compartido
   —retículas, tarjeta, paso numerado, avisos, FAQ, ruta de navegación,
   utilidades, tokens— ya vive en la capa .pmd de promedima-paginas.css.
   Esta hoja NO lo repite.

   La primera versión sí lo repetía: volvía a declarar .pmd-breadcrumb,
   .pmd-alert, .pmd-faq, .pmd-narrow, .pmd-num y sus propios tokens con
   prefijo --esc-. Eso es justo lo que la capa compartida existe para
   evitar, y significaba mantener la misma decisión en dos lugares.

   ── DÓNDE VA ───────────────────────────────────────────────────────────
   Al final del CSS global, después de la capa .pmd. No reemplaza nada.

   ── ALCANCE ────────────────────────────────────────────────────────────
   Todo cuelga de .pmd-escolar, que va como segunda clase:
       <div class="pmd pmd-escolar"> … </div>
   .pmd da lo compartido, .pmd-escolar lo propio.

   Como el envoltorio lleva .pmd, la página YA queda cubierta por la red
   de seguridad de enlaces de prosa (secciones 14 a 16) y por el arreglo
   del banner en teléfono. No hay que agregar .pmd-escolar a ninguna
   lista de selectores.

   ── QUÉ SE REUSA Y DE DÓNDE ────────────────────────────────────────────
   De la capa .pmd:  .pmd-g2 · .pmd-g4 · .pmd-g32 · .pmd-card · .pmd-step
                     .pmd-alert · .pmd-alert--warm · .pmd-faq · .pmd-h2
                     .pmd-lead · .pmd-breadcrumb · .pmd-narrow · .pmd-center
                     .pmd-layer · .pmd-mt-* · .pmd-mb-40
   Del CSS global:   .ccc-hero-section · .ccc-container · .ccc-tagline
                     .ccc-main-title · .ccc-lead · .ccc-hero-buttons
                     .ccc-btn-primary · .ccc-btn-secondary
                     .ccc-section-padding · .ccc-tech-bg-container
                     .ccc-digital-grid · .ccc-promise-box · .ccc-read-more

   NOTA sobre .pmd-g32: es la retícula de 3 + 2 pensada justo para cinco
   piezas sin dejar huérfana. Esta página tiene exactamente cinco módulos,
   así que encaja sin tocar nada.

   ── LO QUE TRAE ────────────────────────────────────────────────────────
   1 · Cifra de diagnóstico
   2 · Las dos columnas de decisión (comprado contra a la medida)
   3 · Lista con flechas
   4 · Notas
   5 · Servicios vecinos
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════
   1 · CIFRA DE DIAGNÓSTICO

   Silueta distinta a las retículas de tarjetas, para que dos secciones
   seguidas no se lean como la misma plantilla dos veces.
   ══════════════════════════════════════════════════════════════════════ */

.pmd-escolar .pmd-esc-costo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: center;
  border-left: 3px solid var(--ccc-accent, #3b82f6);
  background: var(--ccc-card-bg, #181b21);
  border-radius: 0 var(--pmd-radius-lg, 16px) var(--pmd-radius-lg, 16px) 0;
  padding: 24px 26px;
}

.pmd-escolar .pmd-esc-costo-n {
  margin: 0;
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-size: 3.4rem;
  line-height: 1;
  font-weight: 700;
  color: var(--ccc-accent, #3b82f6);
}

.pmd-escolar .pmd-esc-costo-t {
  margin: 0;
  font-size: .98rem;
  line-height: 1.55;
  color: var(--ccc-text-muted, #9ca3af);
}

@media (max-width: 560px) {
  .pmd-escolar .pmd-esc-costo { grid-template-columns: 1fr; gap: 12px; }
  .pmd-escolar .pmd-esc-costo-n { font-size: 2.6rem; }
}


/* ══════════════════════════════════════════════════════════════════════
   2 · LAS DOS COLUMNAS DE DECISIÓN

   Son .pmd-card de la capa compartida. Lo único propio es la banda de
   color de arriba, que es lo que las distingue entre sí, y el cierre
   pegado al fondo para que las dos terminen a la misma altura aunque
   una liste cinco puntos y la otra cuatro.
   ══════════════════════════════════════════════════════════════════════ */

.pmd-escolar .pmd-esc-col--frio   { border-top: 3px solid var(--ccc-text-muted, #9ca3af); }
.pmd-escolar .pmd-esc-col--calido { border-top: 3px solid var(--ccc-accent, #3b82f6); }

/* La tarjeta compartida ya es flex column, así que auto en el margen
   superior empuja el cierre hasta abajo. */
.pmd-escolar .pmd-esc-cierre {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--ccc-border, #2d3748);
  color: var(--ccc-text-main, #f4f6f8);
  font-weight: 600;
  font-size: .92rem;
}


/* ══════════════════════════════════════════════════════════════════════
   3 · LISTA CON FLECHAS

   La capa compartida define listas dentro de .pmd-plan, no dentro de
   .pmd-card. Esta es la equivalente para tarjeta.
   ══════════════════════════════════════════════════════════════════════ */

.pmd-escolar .pmd-esc-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}

.pmd-escolar .pmd-esc-lista li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  font-size: .91rem;
  line-height: 1.45;
  color: var(--ccc-text-muted, #9ca3af);
}

.pmd-escolar .pmd-esc-lista li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--ccc-accent, #3b82f6);
}


/* ══════════════════════════════════════════════════════════════════════
   4 · NOTAS
   ══════════════════════════════════════════════════════════════════════ */

/* Al pie de una sección: aclara sin competir con el contenido. */
.pmd-escolar .pmd-esc-nota {
  margin-top: 30px;
  border: 1px dashed var(--ccc-border, #2d3748);
  border-radius: var(--pmd-radius, 12px);
  padding: 18px 20px;
}

.pmd-escolar .pmd-esc-nota p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ccc-text-muted, #9ca3af);
}

/* Debajo de los botones del banner: "se abre sin registro". */
.pmd-escolar .pmd-esc-nota-hero {
  margin-top: 14px;
  font-size: .84rem;
  color: var(--ccc-text-muted, #9ca3af);
}


/* ══════════════════════════════════════════════════════════════════════
   5 · SERVICIOS VECINOS

   No son tarjetas a propósito: tres tarjetas más al final competirían
   con la retícula de módulos de arriba. Aquí el peso lo lleva el enlace.
   ══════════════════════════════════════════════════════════════════════ */

.pmd-escolar .pmd-esc-vecinos p {
  margin: 0 0 16px;
  padding-left: 18px;
  border-left: 2px solid var(--ccc-border, #2d3748);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ccc-text-muted, #9ca3af);
}

.pmd-escolar .pmd-esc-vecinos a {
  color: var(--ccc-text-main, #f4f6f8);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--ccc-accent, #3b82f6);
}

.pmd-escolar .pmd-esc-vecinos a:hover { color: var(--ccc-accent, #3b82f6); }

.pmd-escolar .pmd-esc-vecinos a:focus-visible {
  outline: 2px solid var(--ccc-accent, #3b82f6);
  outline-offset: 3px;
  border-radius: 3px;
}.piotnetforms-button{
 font-family:Bebas Neue;
 background-color:var(--primary);
}