/*//////////////////////////////////////////////////////*/
/*///VARIABLES//////////////////////////////////////////*/
/*//////////////////////////////////////////////////////*/

:root {
    /* colores */
    --clr-neutral-100: hsl(0, 0%, 100%);
    --clr-neutral-200: hsl(120, 11%, 98%);
    --clr-neutral-300: hsl(0, 0%, 80%);
    --clr-neutral-350: hsl(0, 0%, 70%);
    --clr-neutral-400: hsl(0, 0%, 33%); 
    --clr-neutral-700: hsl(0, 0%, 20%);
    
    --clr-primary-300: hsl(196, 100%, 50%);
    --clr-primary-400: hsl(196, 100%, 43%);

    --clr-secondary-400: hsl(209, 100%, 27%);
    
	--clr-alert-300: hsl(50, 90%, 95%);
	--clr-alert-400: hsl(50, 90%, 50%);
	--clr-alert-500: hsl(50, 90%, 25%);
	
	--clr-error-300: hsl(0, 90%, 95%);
	--clr-error-400: hsl(0, 90%, 50%);
	--clr-error-500: hsl(0, 90%, 25%);
	
	--clr-success-300: hsl(111, 90%, 95%);
	--clr-success-400: hsl(111, 90%, 50%);
	--clr-success-500: hsl(111, 90%, 25%);
	
    --clr-overlay: hsl(0, 0%, 0%, 50%);
    
    /* fuentes */
    --ff-icon: "Font Awesome 6 Free";
    --ff-icon-brand: "Font Awesome 6 Brands";

    --ff-body: var(--ff-primary);
    --ff-heading: var(--ff-secondary);
    
    --fs-200: 0.750rem;
    --fs-300: 0.875rem;
    --fs-400: 1rem;
    --fs-500: 1.125rem;
    --fs-550: 1.375rem;
    --fs-600: 1.500rem;
    --fs-700: 2rem;
    --fs-800: 2.5rem;
    --fs-900: 3rem;
    --fs-950: 3.1rem;
    
    --fs-body: var(--fs-300);
    --fs-primary-heading: var(--fs-700);
    --fs-secondary-heading: var(--fs-700);
    --fs-tertiary-heading: var(--fs-550);
    --fs-nav: var(--fs-300);
    --fs-footer: var(--fs-400);
    
    --fw-regular: 400;
    --fw-semi-bold: 600;
    --fw-bold: 700;
    
    /* separaciones */
    --gap-100: 0.25rem;
    --gap-200: 0.5rem;
    --gap-300: 0.75rem;
    --gap-400: 1rem;
    --gap-450: 1.5rem;
    --gap-500: 2rem;
    --gap-600: 3rem;
    --gap-700: 4rem;
    --gap-800: 5rem;
    --gap-900: 6rem;
    
    /* velocidad */
    --spd-faster: 0.1s;
    --spd-fast: 0.2s;
    --spd-normal: 0.3s;
    --spd-slow: 0.4s;
    --spd-slower: 0.5s;
    
    /* otros */
    --container-max-width: 1400px;
    --content-max-width: 1162px;
    --mobile-inline-gap: 5.46875%;
    
    /* sombras */
    --box-shadow: 0px 25px 20px -20px hsl(186, 57%, 10%, 10%);
    --button-shadow: 0px 25px 20px -20px hsl(186, 57%, 10%, 30%);
    --icon-shadow: 0px 20px 40px -10px hsl(186, 57%, 10%, 10%);
}

@media (width >= 992px) {
    
    :root {
        /* fuentes */
        --fs-body: var(--fs-400);
        --fs-primary-heading: var(--fs-950);
        --fs-secondary-heading: var(--fs-800);
        --fs-tertiary-heading: var(--fs-600);
        --fs-nav: var(--fs-400);
    }
    
}

/*//////////////////////////////////////////////////////*/
/*///GENERAL////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////*/

html {
    scroll-behavior: smooth;
}

.contenedor {
    width: calc(100% - var(--mobile-inline-gap) * 2);
    max-width: var(--content-max-width);
    margin-inline: auto;
}

.button {
    background: var(--clr-primary-400);
    color: var(--clr-neutral-100) !important;
    font-size: 16px;
    padding: var(--gap-450) var(--gap-500);
    transition: background ease var(--spd-normal), color ease var(--spd-normal);
}

.button:hover {
    background: var(--clr-primary-300);
}
/*
@media (width < 1200px) {
    
    .hb-basic-text-section {
        padding: 50px 5.46875% 0;
    }
    
}*/

@media (prefers-reduced-motion: reduce) {
    
    html:focus-within {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
}

/* Header */

.c_header_section-a {
    border: none;
    margin-top: 25px;
}

/* Hero */

.c_hero-c {
    background-image: url(../files/bg-hero.webp);
}

.c_hero-c video {
    display: none;
}

.c_hero_txt-c {
    font-size: 16px;
}

@media (width < 768px) {
    
    .c_hero_inner-a {
        background: rgba(0,0,0,0.5);
    }
    
}

/* PDF */

.pdf {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 50px;
    row-gap: 20px;
    padding-bottom: 90px;
}

.pdf a {
    display: grid;
    grid-template-columns: 20px auto;
    gap: 10px;
    align-items: center;
}

@media (width < 768px) {
    
    .pdf {
        grid-template-columns: 1fr;
    }
    
}

/* Panorama */

.hb-basic-panorama .section_bg .c_section_inner-b :is(p,h2) {
    max-width: var(--content-max-width);
    margin-inline: auto;
}

/*//////////////////////////////////////////////////////*/
/*///CTA////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////*/

.cta:not(.footer) {
    --current-color: var(--clr-neutral-100);
    background: var(--clr-neutral-700);
    color: var(--current-color);
    padding: 50px;
    position: relative;
}

div:has(> .cta.footer) {
    background: #eee;
    padding-block: 80px;
}

.cta:not(.footer)::before {
    content: "";
    background: url(../files/b5987944d6480da94f0f7f6d5dbeb8.jpg) no-repeat center center;
    background-size: cover;
    position: absolute;
    inset: 0;
    opacity: 0.2;
    z-index: 1;
}

.cta:not(.footer) > * {
    position: relative;
    z-index: 2;
}

.cta h2 {
    font-size: 32px;
    font-weight: normal;
    text-align: center;
}

.cta p {
    font-size: 20px;
    text-align: center;
    margin: 20px 0 30px;
}

.cta:not(.footer) option {
    background: var(--clr-neutral-700);
}

.cta:not(.footer) input[type="date"],
.cta:not(.footer) input[type="time"] {
    color-scheme: dark;
}

.btn-cta .c_list-nav ul li a:after {
    transform: rotate(90deg);
}

@media (width < 768px) {
    
    .cta:not(.footer) {
        padding: 50px var(--mobile-inline-gap);
    }
    
    .cta h2 {
        font-size: 20px;
    }
    
    .cta p {
        font-size: 16px;
    }
    
}

/*//////////////////////////////////////////////////////*/
/*///FORMULARIOS////////////////////////////////////////*/
/*//////////////////////////////////////////////////////*/

.form .fields {
    display: grid;
    gap: var(--gap-450);
    column-gap: var(--gap-600);
}

.form-field {
    display: grid;
    align-content: start;
    text-align: left;
    width: 100%;
    position: relative;
    transition: border ease var(--spd-normal), background-color ease var(--spd-normal);
}

.form-field:hover {
    cursor: pointer;
}

.form-field:has(input:checked) {
    background-color: var(--clr-primary-100);
    border-color: var(--clr-primary-400);
}

.form-field.check::before {
    content: "\f00c";
    background: var(--clr-neutral-100);
    border: 1px solid var(--clr-neutral-300);
    border-radius: 100%;
    color: transparent;
    font-family: var(--ff-icon);
    font-weight: 600;
    line-height: var(--fs-600);
    text-align: center;
    width: var(--fs-600);
    height: var(--fs-600);
    margin: -6px 0;
    transition: border ease var(--spd-normal), color ease var(--spd-normal);
}

.form-field.check:has(input:checked)::before {
    color: var(--clr-primary-400);
    border-color: var(--clr-primary-400);
}

.form-field:has(select)::after {
    content: "\f107";
    font-family: var(--ff-icon);
    font-weight: 600;
    position: absolute;
    top: 20px;
    right: 0;
}

.form-field .label {
    pointer-events: none;
    position: absolute;
    inset: var(--gap-450) auto auto 0;
    transition: font ease var(--spd-normal), opacity ease var(--spd-normal), top ease var(--spd-normal);
}

.form-field:focus-within .label,
.form-field:has(.filled) .label,
.form-field:has(select,[type="date"],[type="time"]) .label {
    font-size: 0.8em;
    opacity: 0.7;
    top: 0;
}

.form-field input,
.form-field select,
.form-field textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--current-color, var(--clr-neutral-300));
    box-shadow: none;
    line-height: 1;
    padding: var(--gap-450) 0;
    transition: padding ease var(--spd-normal),  border ease var(--spd-normal);
    width: 100%;
}

.form-field select {
    appearance: none;
}

.form-field input[type="date"],
.form-field input[type="time"] {
    accent-color: var(--current-color);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: transparent;
}
/*
.form-field:focus-within input,
.form-field input.filled,
.form-field select,
.form-field:focus-within textarea,
.form-field textarea.filled {
    padding: calc(var(--gap-450) + 5px) 0 calc(var(--gap-450) - 5px);
}*/

.submit-form {
    margin-top: var(--gap-700);
    text-align: center;
}

.submit-form > div {
    width: auto;
}

.notice {
    font-size: 12px;
    padding-top: var(--gap-200);
    margin-bottom: -8px;
    width: 100%;
    display: none;
}

.error label,
.error input,
.error .check::before,
.check.error::before {
    border-color: var(--clr-error-400) !important;
}

.error.product label::before {
    background-color: var(--clr-error-400) !important;
}

.error .notice {
    color: var(--clr-error-400);
    display: block;
    grid-column: 1 / -1;
}

.form-message {
    background-color: var(--clr-neutral-200);
    text-align: left;
    align-items: center;
    justify-items: start !important;
    grid-template-columns: var(--fs-600) 1fr;
    gap: var(--gap-400);
    width: 100%;
    padding: var(--gap-500);
    margin: var(--gap-600) 0 0;
    display: none;
}

.form-message::before {
    content: "";
    background-color: var(--clr-neutral-100);
    border-radius: 100%;
    color: var(--clr-neutral-100);
    font-family: var(--ff-icon);
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    width: var(--fs-600);
    height: var(--fs-600);
    margin: -6px 0;
}

.form-message.error {
    /*background-color: var(--clr-error-300);*/
    color: var(--clr-error-500);
    display: grid;
}

.form-message.error::before {
    content: "\f00d";
    background-color: var(--clr-error-400);
}

.form-message.success {
    /*background-color: var(--clr-success-300);*/
    color: var(--clr-success-500);
    display: grid;
}

.form-message.success::before {
    content: "\f00c";
    background-color: var(--clr-success-400);
}

.success-message,
.test-message {
    background-color: var(--clr-overlay);
    display: grid;
    align-items: center;
    position: fixed;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: auto;
    z-index: 10;
}

.success-message.active,
.test-message.active {
    opacity: 1;
    visibility: visible;
}

.success-message .box,
.test-message .box {
    background-color: var(--clr-neutral-100);
    border-radius: var(--fs-500);
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-400);
    width: min(600px, 100% - (var(--mobile-inline-gap) * 2));
    padding: var(--gap-500);
    margin-inline: auto;
    transform: scale(0.8);
    opacity: 0;
    overflow: hidden;
    transition: all ease var(--spd-normal);
}

.test-message .box {
    font-size: var(--fs-500);
}

.success-message.active .box,
.test-message.active .box {
    transform: scale(1);
    opacity: 1;
}

.success-message .box > i,
.test-message .box > i {
    background-color: var(--clr-success-400);
    border-radius: 100%;
    color: var(--clr-neutral-100);
    font-size: var(--fs-600);
    line-height: var(--gap-600);
    width: var(--gap-600);
}

.test-message.yes .box > i {
    background-color: var(--clr-primary-400);
}

.test-message.no .box > i {
    background-color: var(--clr-neutral-350);
}


@media (width >= 992px) {
    
    .form .fields {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .form .form-field {
        display: flex;
        flex-direction: column;
    }
    
    .form-field textarea {
        height: 100%;
    }
    
    .form-message {
        margin-top: var(--gap-700);
    }

    .success-message .box,
    .test-message .box {
        gap: var(--gap-500);
        padding: var(--gap-600);
    }
    
    .success-message .box > i,
    .test-message .box > i {
        font-size: var(--fs-700);
        line-height: var(--gap-700);
        width: var(--gap-700);
    }
    
}

/*//////////////////////////////////////////////////////*/
/*///FOOTER/////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////*/

.sg-footer-area #l_footer {
    padding-block: 30px;
}

#l_footer .c_sns {
    padding: 0;
}

#l_footer .copyright {
    color: rgba(137, 137, 137, 0.8);
    width: 100%;
}

#l_footer .copyright img {
    display: inline-block;
    height: 11px;
    margin: 0 0 2px 2px;
    opacity: 0.3;
    transition: opacity ease 0.3s;
}

#l_footer .copyright img:hover {
    opacity: 1;
}

.c_list-nav ul li a:before {
    color: #272727;
}

@media (width >= 1200px) {

    #l_footer .l_structure-a {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        align-items: center;
        gap: 30px;
    }
    
}

@media (width >= 768px) {
    
    .hb-basic-next-move-link-two-layers {
        display: none;
    }
    
}

@media (width < 768px) {
    
    .hb-basic-next-move-link-two-layers {
        position: fixed;
        inset: auto 0 0;
        z-index: 99999;
    }
    
    .c_list-nav:last-child {
        padding-bottom: 10px;
    }
    
}