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

:root {
    
    --primary: #0D73BB;
    --secondary: #F5A802;
    --accent: #EE1D22;
    
    --title-dark: #142432;
    --text-dark: #617287;
    --title-light: #ffffff;
    --text-light: #EAF5FF;


    --white: #ffffff;
    --white-alt: #F3F7FA;
    --white-alt2: #F6F5F5;

    --dark: #011021;
    --dark-alt: #02233A;
    --dark-alt2: #04244D;


    --light-gray:#f1f4f7;
    --border: #e6e9ee;
    --whatsapp: #1b8f4d;

    --ok:#23c2a5;
    --alert:#ff9900;
    --error:#950000;

}
html {
    scroll-behavior: smooth;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background: var(--white);
}

body.no-scroll {
    overflow: hidden;
}

section{ scroll-margin-top: 80px;}
/* ========================= */
/* OVERLAY */
/* ========================= */

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(7, 16, 29, .58);
    opacity: 0;
    visibility: hidden;
    transition: .25s;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}


/* ========================= */
/* HEADER */
/* ========================= */

.site-header {
    position: absolute;
    top: 80px;
    width: 95%;
    left: 2.5%;
    margin: auto;
    z-index: 900;
    
}

.site-header.is-sticky{
    position: fixed;
    width: 100%;
    left: unset;
    top: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
}

.header-inner {
    max-width: 1440px;
    margin: auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 20px;
    gap: 36px;
}

.logo img {
    height: 70px;
}

.desktop-nav {
    display: flex;
    gap: 28px;
    margin-left: auto;
}

.desktop-nav a {
    text-decoration: none;
    color: var(--title-dark);
    font-size: 15px;
    font-weight: bold;
}

.contact-btn {
    border: none;
    background: var(--primary);
    color: var(--white);
    padding: 14px 20px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

.menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--primary);
    margin: 5px auto;
}


/* ========================= */
/* PANEL LATERAL */
/* ========================= */

.side-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(80vw, 500px);
    height: 100vh;
    background: var(--white);
    z-index: 1100;
    transform: translateX(100%);
    transition: transform .3s ease;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.side-panel.active {
    transform: translateX(0);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header img {
    height: 40px;
}

.close-btn {
    border: none;
    background: transparent;
    font-size: 34px;
    cursor: pointer;
    line-height: 1;
}

.mobile-nav-cont{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    align-content: space-between;
}

.mobile-nav {
    display: flex;
    width: 100%;
    flex-direction: column;
    margin-top: 48px;
}

.mobile-nav a {
    padding: 18px 0;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    font-size: 18px;
}

.panel-divider {
    height: 1px;
    background: var(--border);
    margin: 28px 0;
}

.panel-contact {
    width: 100%;
}


/* ========================= */
/* PROMOCIONES */
/* ========================= */

.promo-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    pointer-events: none;
}

.promo-modal.active {
    pointer-events: auto;
}

.promo-box {
    position: relative;
    width: object-fit;
    padding: 10px;
    max-height: 90vh;
    background:var(--white);
    border-radius: 10px;
    overflow: hidden;
    transform: scale(.96);
    opacity: 0;
    transition: .25s;
}

.promo-modal.active .promo-box {
    transform: scale(1);
    opacity: 1;
}

.promo-slider {
    position: relative;
}

.promo-slide {
    display: none;
}

.promo-slide.active {
    display: block;
}

.promo-slide img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 10px;
}

.promo-box .close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
}

.promo-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    font-size: 28px;
    cursor: pointer;
}

.promo-arrow.left {
    left: 16px;
}

.promo-arrow.right {
    right: 16px;
}

.promo-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.promo-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.55);
    cursor: pointer;
    box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, .2);
}

.promo-dot.active {
    background: var(--accent);
}


/* ========================= */
/* PLACEHOLDER */
/* ========================= */

.placeholder {
    min-height: 100vh;
    display: grid;
    place-content: center;
    text-align: center;
}


/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media (max-width: 1024px) {
.site-header{
    position: fixed;
    width: 100%;
    left: unset;
    top: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
}

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

    .desktop-nav,
    .header-inner > .contact-btn {
        display: none;
    }

    .menu-toggle {
        display: block;
        margin-left: auto;
    }

}

@media (max-width: 600px) {

    .header-inner {
        height: 70px;
        padding: 0 18px;
    }

    .logo img {
        height: 36px;
    }

    .promo-box {
        width: 94vw;
    }

    .promo-arrow {
        display: none;
    }

}

/* =========================================
   PANEL DE CONTACTO
========================================= */

.contact-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(80vw, 600px);
    height: 100vh;
    background: var(--white);
    z-index: 1300;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 35px rgba(0,0,0,.12);
}

.contact-panel.active {
    transform: translateX(0);
}

.contact-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 30px 32px 22px;
    border-bottom: 1px solid var(--border);
}

.contact-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--secondary);
    margin-bottom: 7px;
}

.contact-header h2 {
    font-size: 27px;
    line-height: 1.15;
    color: var(--primary);
}

.contact-content {
    padding: 28px 32px 35px;
    overflow-y: auto;
}

.contact-description {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    margin-bottom: 22px;
}

.contact-context {
    background: var(--white);
    border-left: 3px solid var(--secondary);
    padding: 13px 15px;
    margin-bottom: 25px;
    border-radius: 0 7px 7px 0;
    font-size: 14px;
    color: var(--primary);
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 7px;
    color: var(--primary);
}

.form-group input,
.form-group textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    padding: 13px 14px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    color: var(--text);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(29,111,220,.10);
}

.input-error {
    border-color: #d93025 !important;
    box-shadow: 0 0 0 3px rgba(217, 48, 37, .10) !important;
}

.contact-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}

.contact-action {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border-radius: 9px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: transform .2s, box-shadow .2s;
}

.contact-action:hover {
    transform: translateY(-1px);
}

.contact-action.whatsapp {
    border: none;
    background: var(--whatsapp);
    color: var(--white);
    box-shadow: 0 5px 15px rgba(27,143,77,.16);
}

.contact-action.email {
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--primary);
}

.action-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 18px;
}

.whatsapp .action-icon {
    background: rgba(255,255,255,.15);
}

.email .action-icon {
    background: var(--light-gray);
}

.contact-action strong,
.contact-action small {
    display: block;
}

.contact-action strong {
    font-size: 14px;
    margin-bottom: 3px;
}

.contact-action small {
    font-size: 12px;
    opacity: .75;
}

.contact-privacy {
    margin-top: 20px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text);
    text-align: center;
}


/* =========================================
   HERO
========================================= */

.hero {
    background: var(--white);
    padding: 220px 28px 80px;
    position: relative;
}

.hero-inner {
    max-width: 1440px;
    padding: 0 20px;
    margin: auto;
    display: grid;
    grid-template-columns: minmax(500px, 1.25fr);
    gap: 55px;
    z-index: 1;
    position: relative;
    align-items: center;
}

.hero-content {
    padding: 15px 0;
}

.hero-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--primary);
    margin-bottom: 16px;
}

.hero h1 {
    margin: 0;
    font-size: clamp(40px, 4vw, 62px);
    line-height: 1.02;
    letter-spacing: -.035em;
    color: var(--title-light);
    width: clamp(400px, 50%, 600px);
}

.hero h1 span {
    display: block;
    color: var(--accent);
}

.hero-description {
    max-width: 570px;
    margin-top: 22px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--white);
    width:clamp(200px, 30%, 400px);
}

.hero-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 30px;
}

.hero-feature {
    display: flex;
    align-items: center;
    gap: 12px;
}

.feature-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--white);
    font-size: 17px;
    flex-shrink: 0;
}

.hero-feature strong,
.hero-feature span {
    display: block;
}

.hero-feature strong {
    font-size: 14px;
    color: var(--secondary);
    margin-bottom: 2px;
}

.hero-feature span {
    font-size: 12px;
    color: var(--white);
}

.hero-actions {
    display: flex;
    gap: 11px;
    margin-top: 32px;
}
.hero-actions i{margin-right: 5px}

.hero-btn {
    min-height: 48px;
    padding: 0 22px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: .2s;
}

.hero-btn.primary {
    background: transparent;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--white);
    border: 1px solid var(--white);
}

.hero-btn.secondary {
    background: var(--primary);
    border: none;
    color:var(--white); ;
}

.hero-btn:hover {
    transform: translateY(-1px);
}

.hero-image {
    position: absolute;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #e9edf2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}
.hero-image:after{
    content: "";
    position: absolute;
    width:100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(270deg,#00122500 40%, #001225dd 75%, #001225ff 100%);
    bottom: 0;
    right: 0;
}
.hero-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.hero-bottom{width: 100%; margin: auto; padding: 30px 60px; gap: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--dark-alt2); border-radius: 20px; margin-top: clamp(40px, 5vw, 80px);}
.hero-bottom-item{display: grid;grid-template-columns: auto 1fr; gap: 10px; align-items: center; position: relative;}
.hero-bottom-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 10%;
    right: -20px;
    width: 1px;
    height: 80%;
    background: #ddd;
}
.hero-bottom i{color: var(--title-light); font-size: clamp(1.5rem, 2.5vw + 1rem, 3rem);}
.hero-bottom h2{color: var(--title-light); font-size: 1.1rem; margin-bottom: 10px}
.hero-bottom p{color: var(--text-light);}


/* =========================================
   PLACEHOLDER
========================================= */

.placeholder-section {
    min-height: 400px;
    display: grid;
    place-items: center;
    background: #f5f7f9;
    color: #78818d;
}


/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 1024px) {

.hero-bottom{grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-bottom-item:nth-child(even)::after { opacity: 0;}
.hero{padding: 160px 28px 80px;}
}
@media (max-width: 1000px) {

    .hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 760px;
    }

    .hero-content {
        order: 2;
    }

    .hero-image {
        order: 1;
    }

    .hero h1 {
        font-size: clamp(40px, 7vw, 56px);
    }

}

@media (max-width: 767px) {
.hero-bottom{grid-template-columns: repeat(1, minmax(0, 1fr)); padding: 15px }
.hero-inner{padding: 0}
.hero-bottom-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: inherit;
    bottom: -20px;
    right: 0;
    width: 1px;
    height: 80%;
    height: 1px;
    width: 100%;
    background: #ddd;
}
.hero-bottom-item:nth-child(even)::after { opacity: 1;}

.hero-image:after{
    background: linear-gradient(280deg,#00122500 0%, #001225dd 60%, #001225ff 100%);
}

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

    .contact-panel {
        width: 80vw;
    }

    .contact-header {
        padding: 23px 20px 18px;
    }

    .contact-content {
        padding: 22px 20px 30px;
    }

    .contact-header h2 {
        font-size: 23px;
    }

    .hero {
        padding: 25px 18px 55px;
    }

    .hero-inner {
        gap: 30px;
    }

    .hero-content {
        padding: 0;
        padding-top: 80px;
    }

    .hero h1 {
        font-size: 39px;
        width: 100%;
    }

    .hero-description {
        font-size: 15px;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-btn {
        width: 100%;
    }

}

/* =========================================
   MODELOS DE CASAS
========================================= */

.models-section {
    padding: 100px 28px;
    background: var(--white-alt2);
}

.models-container {
    max-width: 1440px;
    margin: auto;
}

.models-header{width: 100%; display: flex; gap: 20px}

.models-heading {
    width: 100%;
    max-width:460px;
    margin-bottom: 40px;
}

.models-eyebrow {
    display: block;

    font-size: 16px;
    font-weight: 700;

    letter-spacing: .12em;

    color: var(--title-dark);

    margin-bottom: 10px;
}

.models-heading h2 {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;

    color: var(--title-dark);

    letter-spacing: -.025em;
}

.models-heading p {
    margin-top: 14px;

    font-size: 16px;
    line-height: 1.6;

    color: #697380;
}


/* =========================================
   FILTROS
========================================= */

.models-filters {
    flex: 1;
    display: flex;
    align-items: flex-end;

    gap: 14px;

    padding: 18px;

    border-radius: 12px;

    margin-bottom: 30px;
}

.filter-group {
    flex: 1;
}

.filter-group label {
    display: block;

    font-size: 12px;
    font-weight: 600;

    color: var(--primary);

    margin-bottom: 7px;
}

.filter-group select {
    width: 100%;

    height: 45px;

    padding: 0 12px;

    border: 1px solid #dfe4ea;

    border-radius: 7px;

    background: #fff;

    color: var(--text);

    font-family: inherit;

    font-size: 14px;

    cursor: pointer;

    outline: none;
}

.filter-group select:focus {
    border-color: var(--accent);
}

.clear-filters {
    height: 45px;

    padding: 0 17px;

    border: 1px solid #dfe4ea;

    background: #fff;

    border-radius: 7px;

    color: #68717d;

    font-family: inherit;

    font-size: 13px;

    cursor: pointer;

    white-space: nowrap;
}

.clear-filters:hover {
    border-color: var(--accent);
    color: var(--accent);
}


/* =========================================
   GRID
========================================= */

.models-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 22px;
}

.model-card {
    background: #fff;
    position: relative;
    border-radius: 14px;

    overflow: hidden;

    border: 1px solid #e5e9ed;
    box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.15);

    transition:
        transform .25s,
        box-shadow .25s;

}

.model-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(10,25,45,.10);
}


/* =========================================
   IMAGEN
========================================= */

.model-image {
    position: relative;

    /*aspect-ratio: 4 / 3;*/

    /*overflow: hidden;*/

    background: #e9edf2;
}

.model-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .4s;
}

.model-card:hover .model-image img {
    transform: scale(1.03);
}

.model-type {
    position: absolute;
    bottom: -20px;
    left: 14px;
    padding: 8px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    font-size: 11px;
    font-weight: 600;
}

.model-type img{width: 50px ; height: auto}

/* =========================================
   CONTENIDO
========================================= */

.model-card-content {
    padding: 20px;
    position: relative;
}
 .model-card-head{display: flex; gap: 20px;justify-content: space-between; align-items: center; margin-bottom: 10px; position: relative;}
.model-card h3 {
    font-size: 16px;

    color: var(--title-dark);

    margin-bottom: 8px;
    margin-top: 8px;
    flex: 1;
}
.model-precio{
    line-height: 1.55;
    color: var(--white);
    background: var(--dark-alt2);
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 14px;
    width: fit-content;

}
.model-precio.regular{}
.model-precio.antes{position: absolute; background: transparent; color: var(--text-dark); text-decoration: line-through; top: -19px; right: 0; padding: 0}
.model-precio.despues{ background:var(--accent); font-size: 17px }

.model-description {
    font-size: 13px;

    line-height: 1.55;

    color: #747e89;

    min-height: 41px;
}
.model-description span{
    color: var(--secondary);
    font-weight: bold;
}

.model-data {
    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    margin-bottom: 17px;
}

.model-data span {
    padding: 6px 0;
    border-radius: 5px;

    color: var(--text-dark);

    font-size: 10px;
    position: relative;
}
.model-data span:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 10%;
    right: -10px;
    width: 1px;
    height: 80%;
    background: #ddd;
}

.model-data strong {
    color: var(--text-dark);
}


/* =========================================
   BOTÓN
========================================= */

.model-detail-btn {
    width: 100%;

    height: 35px;

    margin-top: 20px;

    border: none;

    color: var(--primary);
    background: transparent;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    display: flex;

    align-items: center;
    gap: 10px;

    padding: 0 15px 0 25px;
    position: relative;
}
.model-detail-btn:after {
    content: "";
    left: 0;
    top: 0;
    position: absolute;
    background: var(--secondary);
    width: 12px;
    height: 100%;
}

.model-detail-btn span {
    font-size: 18px;

    transition: transform .2s;
}

.model-detail-btn:hover span {
    transform: translateX(3px);
}


/* =========================================
   SIN RESULTADOS
========================================= */

.no-models {
    display: none;

    padding: 70px 20px;

    text-align: center;
}

.no-models.active {
    display: block;
}

.no-models-icon {
    font-size: 36px;

    color: #aab2bc;

    margin-bottom: 12px;
}

.no-models h3 {
    color: var(--primary);

    font-size: 20px;
}

.no-models p {
    margin-top: 6px;

    color: #7b8590;

    font-size: 14px;
}

.no-models button {
    margin-top: 18px;

    border: none;

    background: var(--accent);

    color: #fff;

    padding: 11px 17px;

    border-radius: 7px;

    cursor: pointer;

    font-family: inherit;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1024px) {

    .models-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
    .models-header{flex-wrap: wrap;}
    .models-heading{ max-width:inherit; margin-bottom:0 }
    .models-filters {padding: 18px 0}

}

@media (max-width: 700px) {

    .models-section {
        padding: 70px 18px;
    }

    .models-filters {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 12px;
    }

    .filter-group {
        width: 100%;
    }

    .clear-filters {
        width: 100%;
    }

    .models-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 450px) {

    .models-filters {
        grid-template-columns: 1fr;
    }

}

/* =========================================
   MODAL DETALLE MODELO
========================================= */

.model-modal {
    position: fixed;

    inset: 0;

    z-index: 1250;

    background: rgba(7, 16, 29, .68);

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 25px;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .25s,
        visibility .25s;
}

.model-modal.active {
    opacity: 1;
    visibility: visible;
}

.model-modal-box {
    position: relative;

    width: min(1100px, 100%);

    max-height: 92vh;

    overflow-y: auto;

    background: #fff;

    border-radius: 16px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.25);

    transform: translateY(15px) scale(.98);

    transition: transform .25s;
}

.model-modal.active .model-modal-box {
    transform: translateY(0) scale(1);
}

.model-modal-close {
    position: absolute;

    top: 16px;
    right: 16px;

    z-index: 10;

    width: 42px;
    height: 42px;

    border: none;

    border-radius: 50%;

    background: rgba(255,255,255,.94);

    color: var(--primary);

    font-size: 30px;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 3px 12px rgba(0,0,0,.12);
}


/* =========================================
   DETALLE
========================================= */

.model-detail {

    display: grid;

    grid-template-columns:
        1.08fr
        .92fr;

    min-height: 600px;
}


/* =========================================
   GALERÍA
========================================= */

.model-gallery {
    padding: 24px;

    background: #f2f4f6;
}

.model-main-image {
    width: 100%;
    overflow: hidden;

    border-radius: 11px;

    background: #e2e6ea;
}

.model-main-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

.model-thumbnails {
    display: flex;

    gap: 9px;

    margin-top: 12px;

    overflow-x: auto;

    padding-bottom: 3px;
}

.model-thumbnail {
    width: 76px;
    height: 58px;

    flex-shrink: 0;

    padding: 0;

    border: 2px solid transparent;

    border-radius: 6px;

    overflow: hidden;

    background: none;

    cursor: pointer;

    opacity: .65;

    transition: .2s;
}

.model-thumbnail:hover {
    opacity: 1;
}

.model-thumbnail.active {
    border-color: var(--accent);

    opacity: 1;
}

.model-thumbnail img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* =========================================
   INFORMACIÓN
========================================= */

.model-detail-content {
    padding: 50px 42px 42px;

    display: flex;

    flex-direction: column;
}

.detail-eyebrow {
    font-size: 11px;

    font-weight: 700;

    letter-spacing: .12em;

    color: var(--secondary);

    margin-bottom: 8px;
}

.model-detail-content h2 {
    margin: 0;

    font-size: 38px;

    line-height: 1.1;

    letter-spacing: -.025em;

    color: var(--dark);
}

.detail-description {
    margin-top: 15px;

    font-size: 14px;

    line-height: 1.65;

    color: #68727e;
}


/* =========================================
   CARACTERÍSTICAS
========================================= */

.detail-features {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 9px;

    margin-top: 25px;
}

.detail-feature {
    padding: 12px;

    background: #f5f7f9;

    border-radius: 7px;
}

.detail-feature span {
    display: block;

    font-size: 10px;

    color: #7b8590;

    margin-bottom: 4px;
}

.detail-feature strong {
    display: block;

    font-size: 13px;

    color: var(--primary);
}


/* =========================================
   DESCRIPCIÓN
========================================= */

.detail-section {
    margin-top: 28px;
    padding-top: 15px;
    border-top: 1px solid #e7eaed;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    position: relative;
}


.detail-section h3 {
    font-size: 15px;
    color: var(--primary);
}

.detail-section p {
    font-size: 18px;
    line-height: 1.65;
    color: #697380;
}

.price-regular{color: var(--title-dark);}
.price-before{ text-decoration: line-through; color: var(--text-dark); font-size: 14px; position: absolute; right: 0; top: 0px;}
.price-final{ color:var(--accent); font-size:24px }
/* =========================================
   CONTACTO
========================================= */

.detail-contact {
    margin-top: auto;

    padding-top: 28px;
}

.detail-contact-btn {
    width: 100%;

    min-height: 50px;

    padding: 0 17px;

    border: none;

    border-radius: 8px;

    background: var(--secondary);

    color: #fff;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: space-between;

    transition: .2s;
}

.detail-contact-btn:hover {
    transform: translateY(-1px);

    box-shadow:
        0 7px 18px rgba(29,111,220,.18);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 800px) {

    .model-modal {
        padding: 12px;
    }

    .model-modal-box {
        max-height: 94vh;

        border-radius: 12px;
    }

    .model-detail {
        display: block;
    }

    .model-gallery {
        padding: 12px;
    }

    .model-main-image {
        
    }

    .model-detail-content {
        padding: 28px 22px 25px;
    }

    .model-detail-content h2 {
        font-size: 30px;
    }

    .detail-contact {
        margin-top: 25px;
    }

}
@media (max-width: 767px) {
    .detail-feature{    grid-column: 1 / -1;}
}
@media (max-width: 450px) {

    .model-modal {
        padding: 0;
    }

    .model-modal-box {
        width: 100%;

        height: 100%;

        max-height: 100vh;

        border-radius: 0;
    }

    .model-gallery {
        padding: 10px;
    }

    .model-main-image {
        border-radius: 8px;
    }

    .model-detail-content {
        padding: 24px 18px;
    }

    .detail-features {
        grid-template-columns: 1fr 1fr;
    }

}


/* =========================================
   CASOS DE ÉXITO
========================================= */

.projects-section {
    padding: 100px 20px;

    background: var(--dark);
}

.project-content{position: relative;}

.project-details{ position:relative; }
.project-details:after{
    content: "";
    position: absolute;
    top: 10%;
    right: -20px;
    width: 1px;
    height: 80%;
    background: #ddd;
}

.projects-heading {
    max-width: 1000px;

    margin: 0 auto 50px;

    text-align: center;
}


.projects-eyebrow {
    display: block;

    margin-bottom: 10px;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: .12em;

    color: var(--secondary);
}


.projects-heading h2 {
    margin: 0;

    color: var(--title-light);

    font-size:
        clamp(30px, 4vw, 46px);

    line-height: 1.1;

    letter-spacing: -.025em;
}
.projects-heading h2 span {
    color: var(--secondary);
}


.projects-heading p {
    margin: 17px auto 0;

    max-width: 500px;

    color: var(--text-light);

    line-height: 1.65;

    font-size: 14px;
}



/* =========================================
   CONTENEDOR
========================================= */

.project-showcase {
    max-width: 1200px;

    margin: auto;
}


.project-card {
    overflow: hidden;

    background: #f5f6f7;

    border-radius: 14px;
}


/* =========================================
   IMAGEN PRINCIPAL
========================================= */

.project-main-image {
    width: 100%;

    aspect-ratio: 16 / 8;

    overflow: hidden;

    background: #ddd;
}


.project-main-image > img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================
   MINIATURAS
========================================= */

.project-thumbnails {
    display: flex;

    gap: 10px;

    padding: 14px 16px;
    padding-bottom: 0;
    padding-left: 0;

    overflow-x: auto;

    scrollbar-width: thin;
}


.project-thumbnail {
    position: relative;

    flex: 0 0 82px;

    width: 82px;
    height: 62px;

    padding: 0;

    border: 2px solid transparent;

    border-radius: 7px;

    overflow: hidden;

    background: #ddd;

    cursor: pointer;

    opacity: .7;

    transition:
        border-color .2s,
        opacity .2s,
        transform .2s;
}


.project-thumbnail:hover {
    opacity: 1;

    transform: translateY(-2px);
}


.project-thumbnail.active {
    opacity: 1;

    border-color:
        var(--accent);
}


.project-thumbnail img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.thumbnail-before-after {
    position: absolute;

    right: 5px;
    bottom: 5px;

    width: 20px;
    height: 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(0,0,0,.65);

    color: #fff;

    font-size: 12px;

    line-height: 1;
}


/* =========================================
   INFORMACIÓN
========================================= */

.project-info {
    padding:20px;
    display: grid;
    gap: 40px;
    grid-template-columns: 300px minmax(0, 1fr);
    position: absolute;
    width: 90%;
    left: 5%;
    bottom: -120px;
    background: var(--white);
    z-index: 10;
    border-radius: 20px;
    overflow: hidden;
}


.project-info h3 {
    margin:
        6px 0 18px;

    color: var(--primary);

    font-size: 32px;

    line-height: 1.1;

    letter-spacing: -.02em;
}


.project-features {
    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    /*border-top:
        1px solid #e1e4e7;

    border-bottom:
        1px solid #e1e4e7;*/
}


.project-features div {
    padding: 7px;
}

.project-features div{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icon label"
        "icon value";

    align-items: center;
    gap: 0px 7px;
    padding: 7px;
}

.project-features div i{
    grid-area: icon;
    font-size: 1rem;
    align-self: center;
}

.project-features div span{
    grid-area: label;
    font-size: 0.75rem;
    opacity: .7;
}

.project-features div strong{
    grid-area: value;
    font-size: 0.8rem;
    font-weight: 600;
}


.project-features div:last-child {
    border-right: none;
}


.project-features span {
    display: block;

    margin-bottom: 5px;

    color: #7c858e;

    font-size: 9px;
}


.project-features strong {
    display: block;

    color: var(--primary);

    font-size: 12px;
}


.project-description {
    max-width: 800px;

    margin: 18px 0 0;

    color: #697480;

    font-size: 13px;

    line-height: 1.65;
}


/* =========================================
   COMPARADOR ANTES / DESPUÉS
========================================= */

.project-comparison {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    --position: 50%;
}


/* Imagen DESPUÉS
   Siempre ocupa todo el espacio */

.comparison-after {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 1;
}

.comparison-before {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    z-index: 2;

    clip-path:
        inset(
            0
            calc(100% - var(--position))
            0
            0
        );
}

/*
   IMPORTANTE:
   La imagen conserva el tamaño
   completo del contenedor original.
*/

.comparison-before .comparison-image {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* Línea divisoria */

.comparison-line {
    position: absolute;

    top: 0;
    bottom: 0;

    left: var(--position);

    width: 2px;

    background: #fff;

    transform: translateX(-50%);

    z-index: 5;

    pointer-events: none;

    box-shadow:
        0 0 5px rgba(0,0,0,.25);
}


/* Botón */

.comparison-button {
    position: absolute;

    top: 50%;
    left: var(--position);

    transform:
        translate(-50%, -50%);

    z-index: 6;

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 2px;

    border-radius: 50%;

    background: #fff;

    color: var(--primary);

    font-size: 21px;

    font-weight: 600;

    box-shadow:
        0 3px 15px rgba(0,0,0,.25);

    pointer-events: none;
}


/* Slider invisible que recibe
   el movimiento del usuario */

.comparison-slider {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;

    opacity: 0;

    cursor: ew-resize;

    z-index: 10;
}


/* Etiquetas */

.comparison-label {
    position: absolute;

    top: 15px;

    z-index: 7;

    padding: 6px 9px;

    border-radius: 4px;

    background:
        rgba(0,0,0,.5);

    color: #fff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .08em;

    pointer-events: none;
}

.comparison-label-before {
    left: 15px;
}

.comparison-label-after {
    right: 15px;
}

/* =========================================
   LÍNEA
========================================= */

.comparison-line {
    position: absolute;

    top: 0;
    bottom: 0;

    left: var(--position);

    width: 4px;

    background: #fff;

    transform:
        translateX(-50%);

    z-index: 5;

    pointer-events: none;

    box-shadow:
        0 0 5px rgba(0,0,0,.25);
}


/* =========================================
   BOTÓN CENTRAL
========================================= */

.comparison-button {
    position: absolute;

    top: 50%;
    left: var(--position);

    transform:
        translate(-50%, -50%);

    z-index: 6;

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 2px;

    border-radius: 50%;

    background: var(--secondary);

    color: var(--white);

    font-size: 21px;

    font-weight: 600;

    box-shadow:
        0 3px 15px
        rgba(0,0,0,.25);

    pointer-events: none;
}


/* =========================================
   CONTROL INVISIBLE
========================================= */

.comparison-slider {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;

    opacity: 0;

    cursor: ew-resize;

    z-index: 10;
}


/* =========================================
   ETIQUETAS
========================================= */

.comparison-label {
    position: absolute;

    top: 15px;

    z-index: 7;

    padding: 10px 15px;

    border-radius: 4px;

    background:
        rgba(0,0,0,.5);

    color: #fff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .08em;

    pointer-events: none;
    opacity: 0.75;
}


.comparison-label-before {
    left: 15px;
    background: var(--dark);
}


.comparison-label-after {
    right: 15px;
    background: var(--secondary);
}


/* =========================================
   NAVEGACIÓN DE PROYECTOS
========================================= */

.project-navigation {
    display: flex;

    width: 100%;

    align-items: center;
    justify-content: space-between;

    margin-top: 135px;

    gap: 20px;
}


.project-nav-button {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 10px 0;

    border: none;

    background: none;

    color: var(--white);

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: .2s;
}

.project-nav-button i{ font-size: 16px; width:30px; height:30px; border-radius:50%; background:var(--dark-alt2); display:flex; justify-content:center; align-items:center; }

.project-nav-button:hover {
    color: var(--secondary);
}


.project-next {
    justify-content: flex-end;
}


.project-counter {
    min-width: 50px;

    text-align: center;

    color: #89929b;

    font-size: 11px;

    font-weight: 600;
}

@media (max-width: 800px) {

    .projects-section {
        padding: 75px 15px;
    }


    .project-main-image {
        aspect-ratio: 4 / 3;
    }


    .project-info {
        padding: 25px 22px 28px;
        grid-template-columns: 0.8fr minmax(0, 1fr);
    }


    .project-info h3 {
        font-size: 27px;
    }


    .project-features {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .project-features div:nth-child(3),
    .project-features div:nth-child(6) {
        border-right: none;
    }

}
@media (max-width: 767px) {
.project-info { grid-template-columns: minmax(0, 1fr); gap:20px; position:relative; bottom:unset; width:100%; margin:0; left:unset;  }
.project-navigation { margin-top:20px }
}
@media (max-width: 520px) {

    .project-main-image {
        aspect-ratio: 4 / 3;
    }


    .project-thumbnails {
        padding:
            12px;
    }


    .project-thumbnail {
        flex-basis: 72px;

        width: 72px;

        height: 56px;
    }


    .project-info {
        padding:
            22px 18px 25px;
    }


    .project-features {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .project-features div:nth-child(even) {
        border-right: none;
    }


    .project-navigation {
        grid-template-columns:
            1fr auto 1fr;

        gap: 8px;
    }


    .project-nav-button {
        font-size: 10px;
    }

    .project-counter {
        font-size: 10px;
    }


    .comparison-button {
        width: 38px;
        height: 38px;

        font-size: 18px;
    }

}

/* =========================================
   MAPA
========================================= */
.maps-section{width: 100%; background: var(--white-alt2); padding: 40px 40px; position: relative;}
.maps-deco{position: absolute; width: 100px; height: 200px; }
.deco-left{top: 0; left: 0; background: var(--secondary);z-index: 1; clip-path: polygon(0% 0%, 100% 0%, 0% 100%);}
.deco-right{bottom: 0; right: 0; background: var(--secondary); z-index: 1;clip-path: polygon(100% 0%, 100% 100%, 0% 100%);}
.deco-right2{bottom: 0; right: 0; background: var(--primary); z-index: 2;clip-path: polygon(100% 40%, 100% 100%, 40% 100%);}
.maps-container { width:100%; max-width: 1440px; margin: auto; display: grid; gap: 40px; grid-template-columns:0.85fr 1.3fr 0.85fr; z-index: 3; position: relative; align-items: center;}

.maps-eyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--secondary);
}
.maps-heading h2 {
    margin: 0;
    color: var(--title-dark);
    font-size:
    clamp(30px, 4vw, 46px);
    line-height: 1.1;
    letter-spacing: -.025em;
}
.maps-heading p {
    margin: 17px auto 0;
    max-width: 580px;
    color: #697480;
    line-height: 1.65;
    font-size: 14px;
}
.maps-perks{margin-top: 20px; display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr);}
.maps-perks article{display: flex; align-items: center; gap: 5px}
.maps-perks i{width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; background: var(--dark); border-radius: 50%; color: var(--secondary);}
.maps-perks p{font-size: 12px; margin: 0}
.maps-heading h2 span{color: var(--secondary);}

.maps-map{width: 100%; height: 350px; border-radius: 15px; overflow: hidden;}

.maps-info{width: 100%;}

.maps-info article{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icon label"
        "icon value";

    align-items: center;
    gap: 0px 10px;
    padding: 30px 10px;
    border-bottom: 1px solid var(--border);
}

.maps-info article i{
    grid-area: icon;
    font-size: 2rem;
    align-self: center;
    color: var(--secondary);
}

.maps-info article h2{
    grid-area: label;
    font-size: 1rem;
    margin-bottom: 10px;
    color: var(--title-dark);
}
.maps-info article p{
    grid-area: value;
    font-size: 1rem;
    color: var(--text-dark);
}

.maps-info article p a{
    color: var(--text-dark);
    text-decoration: none;
    color: var(--secondary);
}


@media (max-width: 1440px) {
.maps-deco{position: absolute; width: 60px; height: 120px; }
}
@media (max-width: 1024px) {
    .maps-container {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "item1 item3"
            "map   map";
        }
    .maps-container > :nth-child(1) {
    grid-area: item1;
    }

    .maps-container > :nth-child(2) {
        grid-area: map;
    }

    .maps-container > :nth-child(3) {
        grid-area: item3;
    }
}
@media (max-width: 767px) {
    .maps-eyebrow{text-shadow: 2px 2px 3px #000a;}
    .maps-section{padding: 15px}
    .maps-perks{grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));}
    .maps-container {
        grid-template-columns: 1fr;

        grid-template-areas:
            "item1"
            "map"
            "item3";
    }

}
/* =========================================
   ABOUT
========================================= */
.about-section {
    width: 100%;
    overflow: hidden;
    background: #fff;
}


.about-container {
    width: 100%;
    min-height: 620px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    grid-template-areas:
        "content image";

    position: relative;
}


/* =========================
   CONTENIDO
========================= */

.about-content {
    grid-area: content;

    background: var(--dark-alt);

    padding: 70px 10% 70px 9%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    position: relative;
    z-index: 2;

}
.about-content:after{
        content: "";
        width: 100px;
        height: 100%;
        position: absolute;
        right: -99px;
        top: 0;
        clip-path: polygon(0% 0%, 100% 0, 0% 100%);
        background: var(--dark-alt);
    }


.about-eyebrow {
    color: #ffb000;

    font-size: 16px;
    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 12px;
}


.about-content h2 {
    margin: 0 0 20px;

    color: #fff;

    font-size: clamp(32px, 3vw, 48px);
    line-height: 1.05;
    font-weight: 700;
}


.about-content h2 strong {
    color: #ffad00;
}


.about-content p {
    max-width: 620px;

    margin: 0 0 35px;

    color: #fff;

    font-size: 14px;
    line-height: 1.55;
}


/* =========================
   CARACTERÍSTICAS
========================= */

.about-features {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin-bottom: 35px;
}


.about-feature {
    display: grid;

    grid-template-columns: auto 1fr;

    grid-template-areas:
        "icon text";
    grid-template-columns: 1fr;

        grid-template-areas:
            "icon"
            "text";

    align-items: center;

    gap: 10px;

    padding: 0 18px;

    border-right: 1px solid rgba(255,255,255,.35);
}


.about-feature:first-child {
    padding-left: 0;
}


.about-feature:last-child {
    border-right: 0;
}


.about-feature-icon {
    grid-area: icon;

    font-size: 32px;
}


.about-feature:nth-child(1) .about-feature-icon {
    color: #ffb000;
}

.about-feature:nth-child(2) .about-feature-icon {
    color: #087ee8;
}

.about-feature:nth-child(3) .about-feature-icon {
    color: #ff2538;
}

.about-feature:nth-child(4) .about-feature-icon {
    color: #008cff;
}


.about-feature span {
    grid-area: text;

    color: #fff;

    font-size: 14px;
    line-height: 1.25;
}


/* =========================
   BOTÓN
========================= */

.about-button {
    width: fit-content;

    display: inline-flex;
    align-items: center;
    gap: 18px;

    padding: 14px 24px;

    background: #ffb000;
    color: #10242f;

    border-radius: 30px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

    transition: .25s ease;
}


.about-button:hover {
    background: #fff;

    transform: translateY(-2px);
}


.about-button i {
    font-size: 15px;
}


/* =========================
   IMAGEN
========================= */

.about-image {
    grid-area: image;

    position: relative;

    min-height: 620px;

    overflow: hidden;
}


.about-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


/* =========================
   FRASES SOBRE LA IMAGEN
========================= */

.about-slogan {
    position: absolute;

    right: 20px;
    bottom: 0;
    width: 200px;
    height: 134px;


    color: #fff;

    display: flex;
    flex-direction: column;

    font-family: cursive;
    display: flex;
    justify-content: center;
    align-items: center;
    background: ;background: radial-gradient(line at bottom right,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 0.5) 35%, rgba(0, 212, 255, 0) 100%);
}
.about-image .about-slogan img{ width: 100%; object-fit: contain;transform: rotate(-5deg);}

.about-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at bottom right, #011021, transparent 50%);
    z-index: 0;
    opacity: 0.95;
}

/* =========================
   FRANJAS DECORATIVAS
========================= */

.about-stripe {
    position: absolute;
    width: 35px;
    height: 45vh;
    right: -100px;
    z-index: 5;
    transform: rotate(13deg);
}


.stripe-yellow {
    background: #ffae00;
    top: -70px;
}


.stripe-blue {
    background: #087ee8;
    top: 20%;
    right: -70px;
}


.stripe-red {
    background: #ff2638;
    bottom: -20px;
    right: -50px;

}

@media (max-width: 1400px) {
    .stripe-red {right: -40px;}
    .about-stripe {transform: rotate(11deg);}
}
@media (max-width: 768px) {

    .about-container {

        grid-template-columns: 1fr;

        grid-template-areas:
            "image"
            "content";

        min-height: auto;
    }


    /* =========================
       IMAGEN
    ========================= */

    .about-image {
        min-height: 400px;
        height: 400px;
    }


    /* =========================
       CONTENIDO
    ========================= */

    .about-content {
        padding: 55px 25px 60px;
    }



    .about-content h2 {
        font-size: 34px;
    }


    .about-content p {
        font-size: 14px;
    }


    /* =========================
       CARACTERÍSTICAS
    ========================= */

    .about-features {
        grid-template-columns: 1fr 1fr;

        gap: 25px 0;
    }


    .about-feature {
        padding: 0 15px;

        border-right: 1px solid
            rgba(255,255,255,.3);
    }


    .about-feature:nth-child(2) {
        border-right: 0;
    }


    /* =========================
       FRANJAS
    ========================= */

    .about-stripe {

        top: 0;
        bottom: inherit;
        right: inherit;
        width: 50%;
        height: 24px;
        transform: rotate(5deg);

    }


    .stripe-yellow {
        top: -15px;
        right:-20px ;
    }


    .stripe-blue {
        top: -10px;
        left: 25%;
    }


    .stripe-red {
        top: -10px;
        left:-20px ;
    }

}


/* ========================================
    DELTE MODALE
=========================================*/

.delete-modal{
    position:fixed;
    inset:0;

    z-index:10000;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:20px;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);

    opacity:0;
    visibility:hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.delete-modal.show{
    opacity:1;
    visibility:visible;
}


.delete-modal-box{

    width:min(100%, 420px);

    padding:35px 30px;

    border-radius:18px;

    background:#fff;

    text-align:center;

    box-shadow:
        0 25px 80px rgba(0,0,0,.25);

    transform:scale(.92);

    transition:
        transform .25s ease;
}


.delete-modal.show .delete-modal-box{
    transform:scale(1);
}


/* ICONO */

.delete-modal-icon{

    width:64px;
    height:64px;

    margin:0 auto 20px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:#fff0f0;

    color:#dc3545;

    font-size:1.35rem;
}


/* TITULO */

.delete-modal-box h3{

    margin:0;

    font-size:1.35rem;

    color:#1c252c;

}


.delete-modal-box h3 span{
    color:#dc3545;
}


/* NOMBRE */

.delete-modal-name{

    margin:12px 0 8px;

    font-size:1rem;

    font-weight:700;

    color:#1c252c;

    word-break:break-word;
}


/* ADVERTENCIA */

.delete-modal-warning{

    margin:0;

    font-size:.88rem;

    color:#777;

}


/* BOTONES */

.delete-modal-actions{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-top:28px;
}


.delete-modal-actions button{

    min-width:120px;

    height:44px;

    padding:0 20px;

    border:0;

    border-radius:9px;

    font-family:inherit;

    font-size:.9rem;

    font-weight:600;

    cursor:pointer;

    transition:.2s;
}


.delete-cancel{

    background:#eef1f3;

    color:#1c252c;
}


.delete-cancel:hover{

    background:#e1e5e8;
}


.delete-confirm{

    background:#dc3545;

    color:#fff;
}


.delete-confirm:hover{

    background:#c82333;

    transform:translateY(-1px);
}

/* =========================================
   FOOTER
========================================= */

.footer{
    font-family: 'Poppins', sans-serif;
    background:#fff;
    overflow:hidden;
}

/* ==========================
   TOP
========================== */

.footer-top{
    max-width:1440px;
    margin:auto;
    display:grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr;
    gap:40px;
    padding:50px 40px;
    align-items: center;
}
.footer-item{position: relative;}
.footer-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -20px;
    width: 1px;
    height: 150px;
    background: #ddd;
}
.footer-brand img{
    max-width:220px;
    margin-bottom:20px;
}

.footer-brand p{
    color:#5f6d7b;
    line-height:1.6;
    margin-bottom:25px;
}

.social-links{
    display:flex;
    gap:15px;
}

.social-links a{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#005ca9;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:.3s;
}

.social-links a:hover{
    transform:translateY(-3px);
}

/* ==========================
   FEATURES
========================== */

.footer-feature{
    padding:0;

}

.footer-feature i{
    font-size:42px;
    color:#004b8d;
    margin-bottom:18px;
}

.footer-feature h4{
    color:#003d74;
    font-size:18px;
    margin-bottom:12px;
}

.footer-feature p{
    color:#607080;
    line-height:1.6;
}

/* ==========================
   NEWSLETTER
========================== */

.footer-newsletter{
    
}

.footer-newsletter h4{
    color:#003d74;
    font-size:26px;
    margin-bottom:10px;
}

.footer-newsletter p{
    color:#607080;
    margin-bottom:20px;
}

.footer-newsletter input{
    width:100%;
    height:58px;
    border:1px solid #d9d9d9;
    border-radius:30px;
    padding:0 25px;
    font-size:16px;
    outline:none;
}

/* ==========================
   BOTTOM
========================== */

.footer-bottom{
    position:relative;
    background:#004b8d;
    color:white;
}

.footer-bottom-container{
    max-width:1440px;
    width: 100%;
    margin:auto;
    padding:22px 40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index: 5;
    position: relative;
}

.footer-bottom p{
    margin:0;
    font-weight:600;
}

.footer-links{
    display:flex;
    align-items:center;
    gap:18px;
}

.footer-links a{
    color:white;
    text-decoration:none;
}

.footer-decoration{
    position:absolute;
    right:0;
    bottom:0;
    width:120px;
    height:80px;
    background:#f5a802;
    clip-path:polygon(30% 45%, 100% 0,100% 100%,0 100%);
}

.decoration-yellow{
    background:var(--secondary);
    z-index: 1;
}
.decoration-blue{
    background:var(--primary);
    z-index: 3;
    clip-path:polygon(80% 12%, 100% 0%,100% 100%,55% 100%);
}
.decoration-red{
    background:var(--accent);
    z-index: 2;
    clip-path:polygon(60% 25%, 100% 0%,100% 100%,35% 100%);

}

.footer-project-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 16px !important;
    border: none !important;
    border-radius: 6px;
    background: var(--secondary) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    transition: transform .2s ease, opacity .2s ease;
}

/* ==========================
   RESPONSIVE
========================== */

@media (max-width:1200px){

    .footer-top{
        grid-template-columns:repeat(2,1fr);
    }

    .footer-brand{
        grid-column:1/-1;
    }
}

@media (max-width:768px){
    .footer-item:not(:last-child)::after {
    opacity: 0;
}

    .footer-top{
        grid-template-columns:1fr;
        gap:30px;
    }

    .footer-brand,
    .footer-feature{
        border-right:none;
        border-bottom:1px solid #e5e5e5;
        padding-bottom:25px;
    }

    .footer-bottom-container{
        flex-direction:column;
        gap:15px;
        text-align:center;
    }

    .footer-links{
        flex-wrap:wrap;
        justify-content:center;
    }

    .footer-decoration{
        width:70px;
    }
}

/* =========================================
   CALCULADORA
========================================= */

.calculator-section {
    padding: 100px 20px;
    display: none;
    background: #f7f8f9;
}


.calculator-container {
    max-width: 1050px;

    margin: auto;
}

.calculator-heading {
    max-width: 700px;

    margin: 0 auto 50px;

    text-align: center;
}


.calculator-eyebrow {
    display: block;

    margin-bottom: 10px;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: .12em;

    color: var(--accent);
}


.calculator-heading h2 {
    margin: 0;

    color: var(--primary);

    font-size:
        clamp(30px, 4vw, 46px);

    line-height: 1.1;

    letter-spacing: -.025em;
}


.calculator-heading p {
    margin: 17px auto 0;

    max-width: 580px;

    color: #697480;

    line-height: 1.65;

    font-size: 14px;
}

/* =========================================
   FORMULARIO
========================================= */

.calculator-form {
    padding: 35px;

    background: #fff;

    border:
        1px solid #e5e8eb;

    border-radius: 14px;

    box-shadow:
        0 10px 35px
        rgba(0,0,0,.04);
}


.calculator-fields {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 25px;
}


.calculator-field {
    padding: 25px;

    border:
        1px solid #e5e8eb;

    border-radius: 10px;

    background: #fafbfc;
}


.calculator-field label {
    display: block;

    margin-bottom: 7px;

    color: var(--primary);

    font-size: 16px;

    font-weight: 700;
}


.field-description {
    

    margin-bottom: 18px;

    color: #7a838c;

    font-size: 12px;

    line-height: 1.5;
}


/* =========================================
   INPUT NUMÉRICO
========================================= */

.number-input {
    display: flex;
    align-items: center;

    width: 100%;
    max-width: 100%;
    height: 52px;

    box-sizing: border-box;

    overflow: hidden;

    border: 1px solid #dce0e4;
    border-radius: 8px;

    background: #fff;
}

.number-input input {
    flex: 1 1 auto;

    width: 0;
    min-width: 0;
    max-width: 100%;

    height: 100%;

    padding: 0;

    box-sizing: border-box;

    border: none;
    outline: none;

    text-align: center;

    color: var(--primary);

    font-size: 20px;
    font-weight: 700;

    background: transparent;
}

.number-unit {
    flex: 0 0 auto;

    margin-right: 8px;

    color: #89929a;

    font-size: 12px;
    font-weight: 600;
}

.number-button {
    flex: 0 0 48px;

    width: 48px;
    height: 100%;

    padding: 0;

    border: none;

    background: transparent;

    color: var(--primary);

    font-size: 22px;

    cursor: pointer;
}


/* quitar flechas del input */

.number-input input::-webkit-inner-spin-button,
.number-input input::-webkit-outer-spin-button {
    -webkit-appearance: none;

    margin: 0;
}


.number-input input[type="number"] {
    appearance: textfield;
}


.number-button:hover {
    background: #f0f2f4;

    color: var(--accent);
}


/* =========================================
   BOTÓN CALCULAR
========================================= */

.calculator-button {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 15px;

    width: 100%;

    margin-top: 25px;

    padding: 17px 25px;

    border: none;

    border-radius: 8px;

    background: var(--primary);

    color: #fff;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s,
        opacity .2s;
}


.calculator-button:hover {
    transform:
        translateY(-2px);

    opacity: .92;
}


.calculator-button span {
    font-size: 18px;
}


/* =========================================
   RESULTADOS
========================================= */

.calculator-results {
    display: none;

    margin-top: 60px;
}


.calculator-results.visible {
    display: block;

    animation:
        calculatorResultsIn
        .5s ease;
}


@keyframes calculatorResultsIn {

    from {
        opacity: 0;

        transform:
            translateY(20px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


.results-heading {
    margin-bottom: 30px;

    text-align: center;
}


.results-heading > span {
    display: block;

    margin-bottom: 8px;

    color: var(--accent);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .12em;
}


.results-heading h3 {
    margin: 0;

    color: var(--primary);

    font-size: 27px;
}


.results-heading p {
    margin: 10px auto 0;

    max-width: 550px;

    color: #707a84;

    font-size: 13px;
}


/* =========================================
   TARJETAS
========================================= */

.result-cards {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;
}


.result-card {
    position: relative;

    padding: 28px 25px;

    border:
        1px solid #e2e5e8;

    border-radius: 12px;

    background: #fff;

    text-align: center;

    transition:
        transform .2s,
        box-shadow .2s;
}


.result-card:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.06);
}


.result-icon {
    margin-bottom: 12px;

    font-size: 28px;
}


.result-level {
    display: block;

    margin-bottom: 10px;

    color: #7a838c;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .1em;
}


.result-card strong {
    display: block;

    color: var(--primary);

    font-size: 27px;

    line-height: 1.1;
}

.result-select-button {
    width: 100%;

    margin-top: 20px;

    padding: 11px 15px;

    border: 1px solid #dce0e4;

    border-radius: 7px;

    background: #fff;

    color: var(--primary);

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background .2s,
        border-color .2s,
        color .2s;
}


.result-select-button:hover {
    border-color: var(--accent);

    color: var(--accent);
}


.result-card.selected {
    border: 2px solid var(--accent);

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.08);
}


.result-card.selected
.result-select-button {

    border-color: var(--accent);

    background: var(--accent);

    color: #fff;
}
/* =========================================
   INFORMACIÓN
========================================= */

.result-info-button {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 20px;

    padding: 0;

    border: none;

    background: transparent;

    color: var(--accent);

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;
}


.result-info-button span {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    border:
        1px solid currentColor;

    border-radius: 50%;

    font-size: 13px;
}


.result-description {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows .3s ease;
}


.result-description p {
    overflow: hidden;

    margin: 0;

    color: #707a84;

    font-size: 11px;

    line-height: 1.6;
}


.result-card.description-open
.result-description {
    grid-template-rows: 1fr;

    margin-top: 15px;
}


.result-card.description-open
.result-description p {
    padding-top: 1px;
}


/* =========================================
   CTA
========================================= */

.calculator-cta {
    margin-top: 45px;
    padding: 35px;

    border-radius: 12px;

    background: var(--primary);

    color: #fff;

    text-align: center;
}


.calculator-cta h3 {
    margin: 0 0 8px;

    font-size: 22px;
}


.calculator-cta p {
    max-width: 550px;

    margin: 0 auto 20px;

    color: rgba(255,255,255,.75);

    font-size: 12px;

    line-height: 1.6;
}


.calculator-cta-button {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 13px 20px;

    border: none;

    border-radius: 7px;

    background: #fff;

    color: var(--primary);

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s;
}


.calculator-cta-button:hover {
    transform:
        translateY(-2px);
}


/* =========================================
   AVISO
========================================= */

.calculator-disclaimer {
    margin-top: 20px;

    color: #89929a;

    font-size: 12px;

    line-height: 1.6;

    text-align: center;
}


.calculator-disclaimer strong {
    color: #68717a;
}

@media (max-width: 750px) {

    .calculator-section {
        padding: 75px 15px;
    }


    .calculator-form {
        padding: 20px;
    }


    .calculator-fields {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .calculator-field {
        padding: 20px;
    }


    .result-cards {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .result-card {
        padding: 25px 20px;
    }


    .calculator-cta {
        padding: 28px 20px;
    }

}


@media (max-width: 450px) {

    .calculator-field {
        padding: 17px;
    }


    .field-description {
        min-height: auto;
    }


    .result-card strong {
        font-size: 24px;
    }


    .calculator-disclaimer {
        font-size: 9px;
    }

}


/* =========================================
   POR QUÉ CONSTRUIR CON NOSOTROS
========================================= */

.why-us {
    width: 100%;
    display: none;
    padding: 110px 20px;

    background: var(--white);

    box-sizing: border-box;
}


.why-us-container {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;
}


/* =========================================
   ENCABEZADO
========================================= */

.why-us-header {
    max-width: 720px;

    margin: 0 auto 65px;

    text-align: center;
}


.section-label {
    display: inline-block;

    margin-bottom: 14px;

    font-size: 16px;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: var(--accent);
}


.why-us-header h2 {
    margin: 0;

    color: var(--primary);

    font-size: clamp(
        30px,
        4vw,
        46px
    );

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -1px;
}


.why-us-header p {
    max-width: 620px;

    margin: 20px auto 0;

    color: #68717a;

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================
   GRID
========================================= */

.why-us-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;
}


/* =========================================
   TARJETA
========================================= */

.why-us-card {
    position: relative;

    min-height: 245px;

    padding: 28px;

    box-sizing: border-box;

    border: 1px solid #e5e8eb;

    border-radius: 12px;

    background: #f7f8f9;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.why-us-card:hover {
    transform: translateY(-5px);

    border-color: #d9dee3;

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, .07);
}


/* =========================================
   PARTE SUPERIOR
========================================= */

.why-us-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;
}


.why-us-number {
    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    color: #a2a9af;
}


.why-us-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 9px;

    background: #f1f3f5;

    color: var(--accent);

    font-size: 17px;
}


/* =========================================
   TEXTO
========================================= */

.why-us-card h3 {
    margin: 0 0 10px;

    color: var(--primary);

    font-size: 18px;

    line-height: 1.3;

    font-weight: 750;
}


.why-us-card p {
    margin: 0;

    color: #737b82;

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================
   CTA
========================================= */

.why-us-cta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    margin-top: 55px;

    padding: 32px 36px;

    border-radius: 14px;

    background: var(--primary);

    box-sizing: border-box;
}


.why-us-cta-content {
    min-width: 0;
}


.why-us-cta-label {
    display: block;

    margin-bottom: 8px;

    color: var(--accent);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.why-us-cta h3 {
    margin: 0;

    color: #fff;

    font-size: 25px;

    line-height: 1.25;
}


.why-us-cta p {
    margin: 9px 0 0;

    color: rgba(255,255,255,.7);

    font-size: 14px;

    line-height: 1.5;
}


/* =========================================
   BOTÓN
========================================= */

.why-us-cta-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    flex: 0 0 auto;

    min-height: 48px;

    padding: 0 22px;

    border: none;

    border-radius: 7px;

    background: var(--accent);

    color: #fff;

    font-size: 12px;

    font-weight: 750;

    cursor: pointer;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


.why-us-cta-button:hover {
    transform: translateY(-2px);

    opacity: .92;
}


.why-us-cta-button i {
    font-size: 11px;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {

    .why-us {
        padding: 85px 18px;
    }


    .why-us-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .why-us-cta {
        align-items: flex-start;

        flex-direction: column;

        gap: 25px;
    }


    .why-us-cta-button {
        width: 100%;
    }

}


@media (max-width: 600px) {

    .why-us {
        padding: 70px 16px;
    }


    .why-us-header {
        margin-bottom: 40px;
    }


    .why-us-header h2 {
        font-size: 31px;

        letter-spacing: -.6px;
    }


    .why-us-header p {
        font-size: 14px;
    }


    .why-us-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .why-us-card {
        min-height: auto;

        padding: 23px;
    }


    .why-us-card-top {
        margin-bottom: 20px;
    }


    .why-us-cta {
        margin-top: 35px;

        padding: 28px 22px;
    }


    .why-us-cta h3 {
        font-size: 21px;
    }


    .why-us-cta p {
        font-size: 13px;
    }

}


/* =========================================
   PREGUNTAS FRECUENTES
========================================= */

.faq-section {
    width: 100%;
    display: none;
    padding: 110px 20px;

    background: #f7f8f9;

    box-sizing: border-box;
}


.faq-container {
    width: 100%;
    max-width: 900px;
    background: var(--white);
    padding: 35px;
    border-radius: 14px;
    margin: 0 auto;
}


/* =========================================
   ENCABEZADO
========================================= */

.faq-header {
    max-width: 700px;

    margin: 0 auto 50px;

    text-align: center;
}


.faq-header h2 {
    margin: 0;

    color: var(--primary);

    font-size: clamp(
        30px,
        4vw,
        44px
    );

    line-height: 1.15;

    letter-spacing: -1px;
}


.faq-header p {
    max-width: 620px;

    margin: 18px auto 0;

    color: #737b82;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================
   CATEGORÍAS
========================================= */

.faq-categories {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 8px;

    margin-bottom: 35px;
}


.faq-category {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 40px;

    padding: 0 14px;

    border: 1px solid #e2e5e8;

    border-radius: 7px;

    background: #fff;

    color: #68717a;

    font-family: inherit;

    font-size: 12px;

    font-weight: 650;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.faq-category i {
    font-size: 12px;
}


.faq-category:hover {
    border-color: #cfd4d9;
}


.faq-category.active {
    border-color: var(--primary);

    background: var(--primary);

    color: #fff;
}


/* =========================================
   LISTA
========================================= */

.faq-list {
    width: 100%;
}


.faq-item {
    border-bottom: 1px solid #e5e7e9;
}


.faq-item:first-child {
    border-top: 1px solid #e5e7e9;
}


/* =========================================
   PREGUNTA
========================================= */

.faq-question {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    width: 100%;

    min-height: 68px;

    padding: 18px 4px;

    border: none;

    background: transparent;

    color: var(--primary);

    font-family: inherit;

    font-size: 15px;

    font-weight: 700;

    text-align: left;

    cursor: pointer;
}


.faq-question i {
    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    background: #f2f3f4;

    color: #6d747a;

    font-size: 11px;

    transition:
        transform .25s ease,
        background .25s ease;
}


.faq-item.open
.faq-question i {
    transform: rotate(180deg);

    background: var(--accent);

    color: #fff;
}


/* =========================================
   RESPUESTA
========================================= */

.faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows .3s ease;
}


.faq-answer p {
    overflow: hidden;

    margin: 0;

    color: #70787f;

    font-size: 14px;

    line-height: 1.7;
}


.faq-item.open
.faq-answer {
    grid-template-rows: 1fr;
}


.faq-item.open
.faq-answer p {
    padding:
        0 55px
        20px
        4px;
}


/* =========================================
   CONTACTO
========================================= */

.faq-contact {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 55px;

    padding: 25px 28px;

    border: 1px solid #e2e5e8;

    border-radius: 12px;

    background: #f7f8f9;
}


.faq-contact-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    width: 48px;
    height: 48px;

    border-radius: 10px;

    background: var(--primary);

    color: #fff;

    font-size: 18px;
}


.faq-contact-content {
    flex: 1;
}


.faq-contact-content h3 {
    margin: 0 0 4px;

    color: var(--primary);

    font-size: 17px;
}


.faq-contact-content p {
    margin: 0;

    color: #737b82;

    font-size: 13px;

    line-height: 1.5;
}


.faq-contact-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    flex: 0 0 auto;

    min-height: 44px;

    padding: 0 18px;

    border: none;

    border-radius: 7px;

    background: var(--accent);

    color: #fff;

    font-family: inherit;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


.faq-contact-button:hover {
    transform: translateY(-2px);

    opacity: .92;
}


/* =========================================
   RESPONSIVE FAQ
========================================= */

@media (max-width: 700px) {

    .faq-section {
        padding: 75px 16px;
    }

    .faq-container{padding: 20px}

    .faq-header {
        margin-bottom: 35px;
    }


    .faq-header h2 {
        font-size: 31px;

        letter-spacing: -.6px;
    }


    .faq-header p {
        font-size: 14px;
    }


    .faq-categories {
        justify-content: flex-start;

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 8px;

        margin-left: -16px;
        margin-right: -16px;

        padding-left: 16px;
        padding-right: 16px;

        scrollbar-width: none;
    }


    .faq-categories::-webkit-scrollbar {
        display: none;
    }


    .faq-category {
        flex: 0 0 auto;
    }


    .faq-question {
        min-height: 64px;

        padding: 16px 0;

        font-size: 14px;
    }


    .faq-item.open
    .faq-answer p {
        padding:
            0 40px
            18px
            0;
    }


    .faq-contact {
        align-items: flex-start;

        flex-direction: column;

        padding: 24px 20px;

        gap: 16px;
    }


    .faq-contact-button {
        width: 100%;
    }

}





.project-thumbnails,
.model-thumbnails,
.faq-categories {
    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

    touch-action: pan-x;

    scrollbar-width: thin;
}

.admin-editor{width: 100%; position: absolute; display: grid; grid-template-columns: 1fr 1fr; bottom: 0; left: 0}
.admin-editor a, .admin-editor button{display: flex; justify-content: center; align-items: center; padding: 10px; text-align: center; text-decoration: none; gap: 5px; width: 100%; border: none; height: 38px; font-size: 16px}
.admin-edit {background: var(--dark-alt); color: var(--white);}
.admin-del { background:var(--error); color:var(--white); cursor:pointer; }
.plekxi{background: var(--dark-alt); color: #fff; padding: 10px}
.plekxi p{text-align: center;width: 100%; font-size: 14px}
.plekxi p a{text-decoration: none; color: var(--secondary);}

.switch-publi{
    width:70px;
    height:38px;
    border-radius:50px;
    position:relative;
    cursor:pointer;
    transition:.25s;
    background:#d9d9d9;
    border:2px solid #c2c2c2;
    box-sizing:border-box;
    position: absolute;
    right: 10px;
    top: 10px;
}

.switch-publi.active{
    background:#22c55e;
    border-color:#22c55e;
}

.switch-circle{
    width:28px;
    height:28px;
    border-radius:50%;
    background:#fff;
    position:absolute;
    top:3px;
    left:3px;
    transition:.25s;
    box-shadow:0 2px 5px rgba(0,0,0,.25);
}

.switch-publi.active .switch-circle{
    left:35px;
}

.switch-publi.loading{
    opacity:.6;
    pointer-events:none;
}
.hide-gray{filter: grayscale(1);}