@import url('base.css');

:root {
    /* Colors */
    --color-primary: #84CC16;
    --color-secondary: #2C3E33;
    --color-action: #00173A;
    --color-dark: #1A2C3E;
    --color-light: #FFFFFF;
    --color-muted: #F8FAFC;
    --color-primary50: #84CC1680;
    --color-secondary50: #2C3E3380;
    --color-action50: #00173A80;
    --color-dark50: #1A2C3E80;
    --color-light50: #FFFFFF80;
    --color-muted50: #F8FAFC80;
    --color-primary25: #84CC1640;
    --color-secondary25: #2C3E3340;
    --color-action25: #00173A40;
    --color-dark25: #1A2C3E40;
    --color-light25: #FFFFFF40;
    --color-muted25: #F8FAFC40;

    --color-status-success: #4CAF50;
    --color-status-warning: #FFB600;
    --color-status-info: #0D5EA6;
    --color-status-error: #FF0101;
    --color-status-neutral: #F6F3F4;
    --color-status-success-light: #E8F5E9;
    --color-status-warning-light: #FFF3E0;
    --color-status-info-light: #F6F3F6;
    --color-status-neutral-light: #F3E5F5;
    --color-status-neutral-error: #F76D6D;

    /* Font Family */
    --fontPrimary: 'Manrope', sans-serif;
    --fontSecondary: 'Roboto', sans-serif;
    --fontAwasome: 'FontAwesome';
    --fontAwasomeFree: 'Font Awesome 6 Free';
    --fontAwasomeBrands: 'Font Awesome 6 Brands';

    --padX: clamp(0.75rem, 0.044rem + 3.080vw, 3.75rem);
    --padIn: clamp(0.625rem, 0.144rem + 2.98vw, 3.75rem);

    /* tuning variables */
    --scale-factor: 1.2;
    /* base multiplier for smaller/bigger steps */
    --min-base: 0.875rem;
    /* smallest body font-size */
    --max-base: 1.125rem;
    /* largest body font-size */
    --fluid-slope: 1.2vw;
    /* controls how aggressively size scales with viewport */

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-action);
    color: var(--color-light);
    scroll-behavior: smooth;
}

a:visited {
    color: inherit;
}

/* minimalist clean spacing */
.section {
    padding: 5rem 0;
    margin-bottom: 0;
}

.section-sm {
    padding: 3rem 0;
}

.bg-soft-light {
    background-color: var(--color-muted);
}

.border-soft {
    border: 1px solid var(--color-dark25);
}

/* color-clases */
.color-primary {
    color: var(--color-primary);
}

.color-primary50 {
    color: var(--color-primary50);
}

.color-primary25 {
    color: var(--color-primary25);
}

.color-primary-hover {
    color: var(--color-primary-hover);
}

.color-secondary {
    color: var(--color-secondary);
}

.color-light {
    color: var(--color-light);
}

.color-dark {
    color: var(--color-dark);
}

.color-dark50 {
    color: var(--color-dark50);
}

.color-dark25 {
    color: var(--color-dark25);
}

.color-action {
    color: var(--color-action);
}

.color-reaction {
    color: var(--color-reaction);
}

.color-mute {
    color: var(--color-mute);
}

.color-status-success {
    color: var(--color-status-success);
}

.color-status-warning {
    color: var(--color-status-warning);
}

.color-status-info {
    color: var(--color-status-info);
}

.color-status-error {
    color: var(--color-status-error);
}

.color-status-neutral {
    color: var(--color-status-neutral);
}

.color-status-success-light {
    color: var(--color-status-success-light);
}

.color-status-warning-light {
    color: var(--color-status-warning-light);
}

.color-status-info-light {
    color: var(--color-status-info-light);
}

.color-status-neutral-light {
    color: var(--color-status-neutral-light);
}

.color-status-neutral-error {
    color: var(--color-status-neutral-error);
}

.bg-color-primary {
    background-color: var(--color-primary);
}

.bg-color-primary50 {
    background-color: var(--color-primary50);
}

.bg-color-primary25 {
    background-color: var(--color-primary25);
}

.bg-color-primary-hover {
    background-color: var(--color-primary-hover);
}

.bg-color-secondary {
    background-color: var(--color-secondary);
}

.bg-color-light {
    background-color: var(--color-light);
}

.bg-color-dark {
    background-color: var(--color-dark);
}

.bg-color-dark50 {
    background-color: var(--color-dark50);
}

.bg-color-dark25 {
    background-color: var(--color-dark25);
}

.bg-color-action {
    background-color: var(--color-action);
}

.bg-color-reaction {
    background-color: var(--color-reaction);
}

.bg-color-mute {
    background-color: var(--color-mute);
}

.bg-color-status-success {
    background-color: var(--color-status-success);
}

.bg-color-status-warning {
    background-color: var(--color-status-warning);
}

.bg-color-status-info {
    background-color: var(--color-status-info);
}

.bg-color-status-error {
    background-color: var(--color-status-error);
}

.bg-color-status-neutral {
    background-color: var(--color-status-neutral);
}

.bg-color-status-success-light {
    background-color: var(--color-status-success-light);
}

.bg-color-status-warning-light {
    background-color: var(--color-status-warning-light);
}

.bg-color-status-info-light {
    background-color: var(--color-status-info-light);
}

.bg-color-status-neutral-light {
    background-color: var(--color-status-neutral-light);
}

.bg-color-status-neutral-error {
    background-color: var(--color-status-neutral-error);
}

.btn-color-primary {
    background-color: var(--color-primary);
    color: var(--color-light);
    border: 1px solid var(--color-primary50);
    transition: all ease-in-out .15s;
}

.btn-color-primary:hover {
    background-color: var(--color-primary);
    color: var(--color-light);
    border: 1px solid var(--color-primary50);
    filter: brightness(1);
}

.btn-color-action {
    color: var(--color-light);
    border-color: var(--color-action);
    background-color: var(--color-action);
    transition: all ease-in-out .15s;
}

.btn-color-action:hover {
    color: var(--color-action);
    border-color: var(--color-action);
    background-color: var(--color-light);
    filter: brightness(1);
}

/* headings */
h1,
h2,
h3,
h4,
.display-heading {
    font-weight: 600;
    letter-spacing: -0.02em;
}

.display-mini {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--color-primary);
}
.head {
    text-align: center;
}

:is(.page, .post, article) .head,
:is(.page, .post, article) div:not([class]):has(>h1) {
    padding-top: 3rem;
    padding-bottom: 2rem;
}

.text-accent {
    color: var(--color-primary);
}

.btn-outline-accent {
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
    background: transparent;
    border-radius: 40px;
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-outline-accent:hover {
    background: var(--color-primary);
    color: var(--color-light);
    border-color: var(--color-primary);
}

.btn-accent {
    background: var(--color-primary);
    color: var(--color-light);
    border-radius: 40px;
    padding: 0.65rem 1.8rem;
    font-weight: 500;
    transition: 0.2s;
    border: none;
}

.btn-accent:hover {
    background: var(--color-primary);
    color: var(--color-light);
}
.btn-accent:visited {
    color: var(--color-light);
}

.card {
    border: none;
    background: var(--color-light);
    border-radius: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.02), 0 2px 6px rgba(0, 0, 0, 0.03);
    justify-content: center;
    align-items: center;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.08);
}

.border-card {
    border: 1px solid var(--color-muted);
}

.navbar {
    background-color: var(--color-light);
    backdrop-filter: blur(6px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    padding: 1rem 0 0;
    color: var(--color-action);
}

.navbar:where(.scrolling) {
    background: var(--color-light);

}

.top-bar .navbar-collapse {
    padding-top: 20px;
}

nav :is(.navbar-collapse, ul:not([class])) {
    background-color: transparent;
}
.navbar-nav {
    background-color: transparent;
}

.nav-clear-fix {
    height: 80px;
}
body:has(.home) .nav-clear-fix {
    height: 0;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    color: var(--color-secondary);
    width: fit-content;
    height: 80px;
}

.navbar-brand img {
    aspect-ratio: 16/9;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: scale(1.5);
}

.nav-link {
    font-size: clamp(0.85rem, calc(0.85rem + 0.6vw), var(--fs));
    font-weight: 500;
    color: var(--color-dark);
}
.nav-link:visited {
    color: var(--color-dark);
}
.nav-link:is(:hover, :focus) {
    color: var(--color-primary);
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--color-dark);
}

.submenu {
    border-color: var(--color-light);
    background-color: var(--color-action);
    backdrop-filter: blur(6px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    color: var(--color-light);
}

.bg-white,
.bg-soft-light {
    color: var(--color-dark);
}

.hero {
    background-color: transparent;
    padding: 5rem 0 4rem 0;
    position: relative;
}

.hero .section-bg::before {
    background: linear-gradient(to right, var(--color-action) 33%, transparent 100%);
    z-index: 1;
}

.hero .section-bg img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
    transform: scaleX(-1);
}

.badge-pill-light {
    background: var(--color-muted);
    color: var(--color-primary);
    padding: 0.3rem 0.9rem;
    border-radius: 40px;
    font-size: 0.8rem;
    font-weight: 500;
}

.footer {
    background: var(--color-secondary);
    color: var(--color-light);
    font-size: 0.9rem;
}

hr {
    opacity: 0.2;
}

.component-icon {
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

/* brand logo strip */
.brand-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    opacity: 1;
    filter: none;
}

.brand-item {
    font-weight: 600;
    font-size: 1.2rem;
    color: transparent;
    letter-spacing: -0.2px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--color-light);
    filter: none;
	height: auto;
	width: 100%;
	font-size: 0;
    overflow: hidden;
    padding: 1rem;
    aspect-ratio: 12/3;
    border-radius: 16px;
}
.brand-item:hover {
    filter: none;
}

.brand-item img {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    .section {
        padding: 3rem 0;
    }

    .hero {
        padding: 3rem 0;
    }
}

.list-check {
    list-style: none;
    padding-left: 0;
}

.list-check li {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.list-check li i {
    color: var(--color-primary);
    font-size: 1.1rem;
}

.price-badge {
    background: var(--color-muted);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    display: inline-block;
}

.contact-bar {
    padding-top: 0;
    top: 20px;
}
.contact-bar a[href*="tel"] {
    font-size: 0.75rem;
    color: var(--color-dark);
    width: auto;
    padding-inline: 2px;
    border-radius: 4px;
    font-weight: bold;
}
.contact-bar a[href*="tel"]:hover {
    background-color: var(--color-primary);
    color: var(--color-light);
}
.contact-bar a[href*="tel"]:hover i {
    color: var(--color-light);
}
.contact-bar a i {
    color: var(--color-primary);
}
.contact-bar a:hover {
    background-color: var(--color-primary);
}
.contact-bar a:hover i {
    color: var(--color-light);
}

.footer-wrapp {
    padding: min(40px, 2.080vw) 0 0;
    background-color: var(--color-action);
    color: var(--color-light);
    position: relative;
    border-top:1px solid;
}

.footer-wrapp :is(a, p) {
    font-size: clamp(0.75rem, 100%, 0.875rem);
    color: var(--color-light);
}

.footer-wrapp .row {
    align-items: center;
}

.footer-wrapp ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-menu li {
    color: var(--color-light);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.footer-menu li a {
    color: inherit;
    font-size: clamp(0.75rem, 33% + 0.5vw, 1rem);
}

.footer-menu li::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-color: var(--color-primary);
    position: relative;
    top: 0;
    left: -10px;
}

.footer-wrapp .contact-bar {
    justify-content: flex-end;
    font-size: clamp(0.625rem, 80%, 0.875rem);
}

.footer-wrapp .contact-bar a {
    color: var(--color-light) !important;
    text-transform: capitalize;
    background-color: transparent !important;
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all ease-in-out .15s;
    border-radius: 0;
    font-size: inherit;
    gap: 4px;
}
.footer-wrapp .contact-bar a:hover {
    color: var(--color-primary) !important;
}

.footer-bottom {
    border-top: 2px solid var(--color-action50);
    opacity: .8;
    padding: 20px 0;
}

.footer-bottom:hover {
    opacity: 1;
}

.footer-bottom p {
    margin-bottom: 0;
}



/* Single page */
.header-page {
    padding: min(40px, 2.5vw) 0;
    position: relative;
    text-align: center;
    color: var(--color-light);
    position: relative;
    --image-url: '';

}

.header-page::before {
    content: attr(data-bg);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: var(--image-url);
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 1;
    filter: brightness(0.8);
}

.body-page {
    min-height: 20vw;
    position: relative;
    margin-top: 20px;
}

.body-page .section {
    padding: min(20px, 2.08vw) 0 !important;
}

.body-page .brands .section-body {
    padding: 20px 0;
}

.mini-banner:not([style]) {
    border-radius: 6px;
    background-color: var(--color-light);
    padding: 32px;
}

.mini-banner {
    position: relative;
}

.body-page p:not([style*="text-align"]) {
    text-align: justify;
}

.contact-table {
    margin-bottom: 1rem;
}

.contact-table h5 {
    --fs: 1.25rem;
    font-weight: bold;
}

.contact-table h5 a {
    font-weight: bold;
}

.contact-table .icon-box {
    width: clamp(40px, 40px + 2vw, 80px);
    height: clamp(40px, 40px + 2vw, 80px);
    background-color: var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-light);
    font-size: clamp(.8rem, 1.8rem + 1vw, 2rem);
    margin-right: 12px;
    margin-bottom: 10px;
}

@media screen and (width < 600px) {
    .contact-table h5 {
        font-size: clamp(0.8rem, var(--fs) - 2.5vw, var(--fs));
    }

    .contact-table tr:not(:first-child) {
        border-top: 1px solid var(--color-muted);
    }
}

/* Single kit  */
.page-kit .img-box {
    width: 100%;
    height: 260px;
}

.page-kit img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.page-kit .card-title {
    --fs: 2.05rem;
}

.page-kit h2 {
    margin-bottom: 16px;
}

.page-kit .price {
    --fs: 1.5rem;
    display: block;
    text-align: center;
    border-radius: .35rem;
    padding: 12px 16px;
}

.page-kit .kit-products {
    margin-bottom: 40px;
}

.page-kit .kit-builders {
    margin-bottom: 40px;
}

.page-kit .kit-services {
    margin-bottom: 40px;
}

@media screen and (max-width: 1024px) {
    .page-kit img {
        object-fit: contain;
        aspect-ratio: 4/3;
    }
}



/* Archive page  */

.archive-item {
    border: 2px solid var(--color-light);
}

.archive-item .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.archive-item .card-text {
    font-weight: 400;
    max-height: 76px;
}

.archive-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    aspect-ratio: 4 / 3;
}

.archive-item h5 {
    font-size: 1.5rem;
    color: var(--color-dark);
    font-weight: bold;
    margin-top: 15px;
}

.archive-item .btn {
    margin-top: 15px;
    background-color: var(--color-primary);
    padding: 16px;
    color: var(--color-light);
    text-transform: uppercase;
    font-weight: 500;
}

.archive-item .btn:hover {
    background-color: var(--color-light);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}


/* modal quiz-calculator */

.quiz-card {
    color: var(--color-dark);
    box-shadow: none;
    border-bottom: 2px solid var(--color-dark25);
    border-radius: 0;
}
.quiz-header {
    color: var(--color-dark);
}

.quiz-card .step-indicator.active .step-circle {
    background-color: var(--color-action);
    color: var(--color-light);
    box-shadow: 0 0 0 4px var(--color-dark25);
}

.quiz-card .step-indicator.completed .step-circle {
    background-color: var(--color-primary50);
    color: var(--color-light);
}

.quiz-card .step-indicator.active .step-label {
    color: var(--color-action);
}

.quiz-content .question-icon {
    display: none;
}

.quiz-content .option-card {
    border: 2px solid var(--color-secondary);
    border-radius: 12px;
    padding: 2px 12px;
    background-color: transparent;
}
.quiz-content .option-card i {
    color: var(--color-action) !important;
}
.quiz-content .option-card:hover {
    border-color: var(--color-primary);
    background-color: var(--color-mute25);
}
.quiz-content .option-radio {
    accent-color: var(--color-primary);
}

.quiz-card .slider-value {
    color: var(--color-primary);
}

.quiz-card .text-warning {
    color: var(--color-primary) !important;
}

.quiz-card .result-card {
    background: linear-gradient(120deg, var(--color-muted), var(--color-dark25));
    border-left: 6px solid var(--color-dark50);
}

.quiz-card .form-check-input:checked {
    background-color: var(--color-action);
    border-color: var(--color-primary);
}

.quiz-card .btn-nav.btn-warning {
    color: var(--color-light);
    border-color: var(--color-primary);
    background-color: var(--color-action);
}

.quiz-card .form-range::-webkit-slider-thumb {
    background: var(--color-action);
    cursor: pointer;
}