@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Montserrat:wght@600;700;800;900&display=swap');
 :root {
 --gold:#ffc928;
 --gold-light:#ffe287;
 --ink:#0c0d0f;
 --surface:#151619;
 --paper:#f7f5ef;
 --muted:#a8aaad;
 --line:rgba(255,255,255,.13);
 --shadow:0 18px 45px rgba(0,0,0,.22);
 --sans:'DM Sans',Arial,sans-serif;
 --display:'Montserrat',Arial,sans-serif
}

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

 html {
 scroll-behavior:smooth;
 scroll-padding-top:90px
}

 body {
 overflow-x:hidden;
 background:var(--paper);
 color:var(--ink);
 font-family:var(--sans)
}

 a {
 color:inherit
}

 .header {
 position:absolute;
 inset:0 0 auto;
 z-index:10;
 color:#fff
}

 .top-bar {
 border-bottom:1px solid var(--line);
 background:rgba(0,0,0,.42);
 font-size:.8rem
}

 .top-bar-container,.navbar-container {
 width:min(1180px,92%);
 margin:auto;
 display:flex;
 align-items:center;
 justify-content:space-between
}

 .top-bar-container {
 min-height:38px
}

 .top-info-left {
 display:flex;
 gap:1.6rem
}

 .top-link,.top-schedule,.top-phone {
 display:inline-flex;
 align-items:center;
 gap:.5rem;
 color:#e7e7e7;
 text-decoration:none
}

 .top-link:hover,.top-phone:hover {
 color:var(--gold)
}

 .top-link i,.top-schedule i,.top-phone i {
 color:var(--gold)
}

 .top-phone {
 font-weight:700
}

/* About page */
.about-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr); min-height:720px; padding:clamp(9rem,14vw,12rem) max(5%,calc((100% - 1180px)/2)) 5rem; overflow:hidden; background:#0a0b0d; color:#fff; }
.about-hero::before { position:absolute; inset:0; background:repeating-linear-gradient(125deg,transparent 0 45px,rgba(255,201,40,.055) 46px 48px); content:''; pointer-events:none; }
.about-hero__content,.about-hero__media { position:relative; z-index:1; }
.about-hero__content { align-self:center; max-width:620px; padding-right:clamp(1.5rem,5vw,5rem); }
.eyebrow { color:var(--gold); font-size:.75rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.about-hero h1 { max-width:650px; margin:.85rem 0 1.25rem; font-family:var(--display); font-size:clamp(3.2rem,6vw,6.2rem); font-weight:900; letter-spacing:-.065em; line-height:.96; }
.about-hero h1 span { color:var(--gold); }
.about-hero__lead { max-width:590px; color:#dbdcde; font-size:clamp(1.02rem,1.4vw,1.17rem); line-height:1.75; }
.about-hero__actions { display:flex; flex-wrap:wrap; align-items:center; gap:.85rem; margin:2rem 0 1.5rem; }
.about-hero__phone { display:inline-flex; align-items:center; gap:.55rem; min-height:53px; padding:.9rem 1.2rem; border:1px solid rgba(255,255,255,.42); border-radius:.3rem; color:#fff; font-weight:800; text-decoration:none; transition:.2s ease; }
.about-hero__phone i { color:var(--gold); }.about-hero__phone:hover { border-color:var(--gold); color:var(--gold); }
.about-hero__trust { display:flex; flex-wrap:wrap; gap:.7rem 1.25rem; padding:0; color:#c6c7c9; font-size:.84rem; list-style:none; }.about-hero__trust i { margin-right:.35rem; color:var(--gold); }
.about-hero__media { align-self:center; min-height:490px; border:1px solid rgba(255,255,255,.14); border-radius:.75rem; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.4); }
.about-hero__media::after { position:absolute; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.65)); content:''; pointer-events:none; }.about-hero__media img { width:100%; height:100%; min-height:490px; object-fit:cover; }
.about-hero__badge { position:absolute; z-index:1; right:1.2rem; bottom:1.2rem; display:grid; width:132px; min-height:132px; place-content:center; border:1px solid rgba(255,201,40,.65); border-radius:50%; background:rgba(9,10,11,.8); color:#fff; text-align:center; text-transform:uppercase; backdrop-filter:blur(5px); }.about-hero__badge strong { color:var(--gold); font-family:var(--display); font-size:1.05rem; }.about-hero__badge span { margin-top:.25rem; font-size:.63rem; font-weight:800; letter-spacing:.14em; }
.about-story { display:grid; grid-template-columns:minmax(280px,.9fr) minmax(330px,1.1fr); gap:clamp(2.5rem,8vw,8rem); align-items:center; width:min(1160px,90%); margin:0 auto; padding:clamp(4.5rem,9vw,8rem) 0; }.about-story__image { position:relative; min-height:470px; overflow:hidden; border-radius:.6rem; box-shadow:var(--shadow); }.about-story__image img { width:100%; height:100%; object-fit:cover; }.about-story__image::after { position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 55%); content:''; }.about-story__image span { position:absolute; z-index:1; bottom:1.25rem; left:1.25rem; padding:.65rem .75rem; background:var(--gold); color:#171204; font-size:.69rem; font-weight:900; letter-spacing:.13em; }.about-story__copy h2,.about-values h2,.about-process h2 { margin:.75rem 0 1.1rem; font-family:var(--display); font-size:clamp(2rem,3.6vw,3.4rem); letter-spacing:-.05em; line-height:1.06; }.about-story__copy>p:not(.eyebrow) { margin-top:1rem; color:#59616a; font-size:1.05rem; line-height:1.75; }.about-story__signature { display:grid; gap:.2rem; margin-top:1.7rem; padding-left:1rem; border-left:3px solid var(--gold); }.about-story__signature strong { font-family:var(--display); font-size:.9rem; letter-spacing:.08em; }.about-story__signature span { color:#6c7480; font-size:.78rem; font-weight:700; }
.about-values { padding:clamp(4.5rem,8vw,7rem) max(5%,calc((100% - 1180px)/2)); background:#efede7; }.about-values__heading { max-width:670px; }.about-values__heading>p:last-child { color:#59616a; font-size:1.04rem; line-height:1.7; }.about-values__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.4rem; }.about-value-card { position:relative; min-height:260px; padding:2rem; border:1px solid #dedbd2; border-radius:.6rem; background:#fff; overflow:hidden; transition:transform .25s ease,box-shadow .25s ease; }.about-value-card:hover { box-shadow:0 18px 34px rgba(24,22,18,.1); transform:translateY(-6px); }.about-value-card__number { position:absolute; top:1.3rem; right:1.5rem; color:#e6e0d1; font-family:var(--display); font-size:2rem; font-weight:900; }.about-value-card>i { display:grid; width:50px; aspect-ratio:1; place-items:center; border-radius:.4rem; background:#fff3c7; color:#946b06; font-size:1.2rem; }.about-value-card h3 { margin:1.4rem 0 .7rem; font-family:var(--display); font-size:1.2rem; }.about-value-card p { max-width:280px; color:#5c6470; line-height:1.65; }
.about-process { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2.5rem,7vw,7rem); align-items:center; width:min(1160px,90%); margin:0 auto; padding:clamp(4.5rem,9vw,8rem) 0; }.about-process__link { display:inline-flex; gap:.6rem; margin-top:1rem; color:#8a6508; font-size:.87rem; font-weight:900; text-decoration:none; }.about-process__link:hover { color:#111; }.about-process__steps { display:grid; gap:0; padding:0; list-style:none; }.about-process__steps li { display:grid; grid-template-columns:64px 1fr; gap:1.1rem; padding:1.45rem 0; border-top:1px solid #dedbd2; }.about-process__steps li:last-child { border-bottom:1px solid #dedbd2; }.about-process__steps span { color:var(--gold); font-family:var(--display); font-size:1.65rem; font-weight:900; }.about-process__steps h3 { margin:.2rem 0 .35rem; font-family:var(--display); font-size:1.12rem; }.about-process__steps p { color:#5c6470; line-height:1.6; }
@media(max-width:860px) { .about-hero { grid-template-columns:1fr; gap:3rem; min-height:auto; padding-top:9.5rem; }.about-hero__content { padding-right:0; }.about-hero__media { min-height:390px; max-width:700px; }.about-hero__media img { min-height:390px; }.about-story,.about-process { grid-template-columns:1fr; }.about-story__image { min-height:360px; }.about-values__grid { grid-template-columns:1fr; }.about-value-card { min-height:auto; } }
@media(max-width:520px) { .about-hero { padding-right:6%; padding-left:6%; }.about-hero__actions { align-items:stretch; flex-direction:column; }.about-hero__actions>a { width:100%; }.about-hero__trust { display:grid; gap:.6rem; }.about-hero__media,.about-hero__media img { min-height:300px; }.about-story__image { min-height:300px; }.about-process__steps li { grid-template-columns:48px 1fr; } }

 .navbar {
 border-bottom:1px solid var(--line);
 background:rgba(7,8,9,.77);
 backdrop-filter:blur(12px)
}

 .navbar-container {
 min-height:76px;
 gap:2rem
}

 .logo img {
 display:block;
 width:63px;
 height:auto;
 filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))
}

 .menu {
 display:flex;
 align-items:center;
 gap:1.8rem;
 list-style:none;
 margin-left:auto
}

 .menu li {
 position:relative
}

 .menu a {
 display:flex;
 align-items:center;
 gap:.4rem;
 padding:1.7rem 0;
 color:#f6f6f6;
 font-size:.88rem;
 font-weight:600;
 text-decoration:none;
 transition:color .25s ease
}

 .menu>li>a:after {
 position:absolute;
 right:0;
 bottom:1.15rem;
 left:0;
 height:2px;
 background:var(--gold);
 content:'';
 transform:scaleX(0);
 transform-origin:left;
 transition:transform .25s ease
}

 .menu>li>a:hover,.menu>li>a.activo {
 color:var(--gold)
}

 .menu>li>a:hover:after,.menu>li>a.activo:after {
 transform:scaleX(1)
}

 .arrow {
 font-size:.6rem;
 transition:transform .25s ease
}

 .has-dropdown:hover .arrow {
 transform:rotate(180deg)
}

 .dropdown {
 position:absolute;
 top:calc(100% - .75rem);
 left:-1rem;
 z-index:2;
 min-width:180px;
 padding:.45rem;
 border:1px solid var(--line);
 border-radius:.6rem;
 background:#191a1d;
 box-shadow:var(--shadow);
 list-style:none;
 opacity:0;
 pointer-events:none;
 transform:translateY(8px);
 transition:.25s ease
}

 .has-dropdown:hover .dropdown {
 opacity:1;
 pointer-events:auto;
 transform:translateY(0)
}

 .dropdown li a {
 padding:.7rem .8rem;
 border-radius:.35rem;
 color:#c8c8ca;
 font-size:.82rem
}

 .dropdown li a:hover {
 background:rgba(255,255,255,.07);
 color:var(--gold)
}

 .navbar-btn,.btn-enviar {
 display:inline-flex;
 justify-content:center;
 align-items:center;
 min-height:45px;
 padding:.8rem 1.1rem;
 border:0;
 border-radius:.3rem;
 background:var(--gold);
 color:#161204;
 font-family:var(--sans);
 font-size:.74rem;
 font-weight:800;
 letter-spacing:.08em;
 text-decoration:none;
 transition:.22s ease
}

 .navbar-btn:hover,.btn-enviar:hover {
 background:var(--gold-light);
 box-shadow:0 9px 22px rgba(255,201,40,.22);
 transform:translateY(-2px)
}

 .hero {
 position:relative;
 isolation:isolate;
 display:flex;
 align-items:center;
 min-height:760px;
 padding:150px 0 90px;
 overflow:hidden;
 background:linear-gradient(90deg,rgba(5,7,10,.88) 0%,rgba(7,8,10,.64) 43%,rgba(11,9,3,.10) 100%),url("assets/images/background/background_images.png") center / cover no-repeat,#08090b;
 color:#fff
}

 .hero:before {
 position:absolute;
 z-index:-1;
 inset:0;
 background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.025) 48%,transparent 70%);
 content:''
}

 .hero-contenido {
 width:min(1100px,90%);
 margin:auto
}

 .hero h1 {
 max-width:790px;
 font-family:var(--display);
 font-size:clamp(3.1rem,6.2vw,6rem);
 font-weight:900;
 letter-spacing:-.065em;
 line-height:.98;
 animation:reveal .75s both
}

 .hero h1 span {
 display:block;
 color:var(--gold);
 text-shadow:0 0 28px rgba(255,200,34,.19)
}

 .descripcion {
 max-width:640px;
 margin:1.8rem 0 2rem;
 color:#dedee0;
 font-size:clamp(1rem,1.4vw,1.12rem);
 line-height:1.7;
 animation:reveal .75s .12s both
}

 .botones {
 display:flex;
 flex-wrap:wrap;
 gap:.85rem;
 margin-bottom:1.8rem;
 animation:reveal .75s .2s both
}

 .btn {
 display:inline-flex;
 align-items:center;
 justify-content:center;
 min-height:53px;
 padding:.9rem 1.55rem;
 border-radius:.3rem;
 font-weight:800;
 text-decoration:none;
 transition:.25s ease
}

 .btn-principal {
 background:var(--gold);
 color:#171204;
 box-shadow:0 10px 24px rgba(255,196,27,.2)
}

 .btn-principal:hover {
 background:var(--gold-light);
 transform:translateY(-3px)
}

 .btn-secundario {
 border:1px solid rgba(255,255,255,.55);
 color:#fff
}

 .btn-secundario:hover {
 border-color:#fff;
 background:#fff;
 color:var(--ink)
}

 .confianza {
 color:#c6c6c8;
 font-size:.85rem;
 animation:reveal .75s .28s both
}

 .confianza span {
 margin:0 .5rem;
 color:var(--gold)
}

 .estadisticas {
 display:grid;
 grid-template-columns:repeat(3,1fr);
 background:#121315;
 color:#fff
}

 .estadistica {
 padding:2.5rem 1rem;
 border-right:1px solid var(--line);
 text-align:center
}

 .estadistica:last-child {
 border:0
}

 .estadistica strong {
 display:block;
 margin-bottom:.25rem;
 color:var(--gold);
 font-family:var(--display);
 font-size:clamp(2.2rem,4vw,3.25rem)
}

 .estadistica span {
 color:#b5b5b8;
 font-size:.75rem;
 font-weight:700;
 letter-spacing:.12em;
 text-transform:uppercase
}

 .servicios,.galeria {
 padding:clamp(4.5rem,9vw,7.5rem) 0
}

 .servicios {
 background:var(--paper)
}

 .seccion-titulo {
 width:min(1100px,90%);
 margin:0 auto 3rem;
 text-align:center
}

 .seccion-titulo p,.etiqueta {
 margin-bottom:.65rem;
 color:#8a6810;
 font-size:.73rem;
 font-weight:800;
 letter-spacing:.16em
}

 .seccion-titulo h2,.cotizacion h2 {
 font-family:var(--display);
 font-size:clamp(2rem,4vw,3.4rem);
 letter-spacing:-.045em;
 line-height:1.1
}

 .seccion-titulo span {
 display:block;
 margin-top:.9rem;
 color:#68696c
}

 .servicios-grid {
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:1.25rem;
 width:min(1100px,90%);
 margin:auto
}

 .servicio {
 padding:2.15rem;
 border:1px solid #dfddd5;
 border-radius:.65rem;
 background:#fff;
 box-shadow:0 5px 0 rgba(20,20,20,.02);
 transition:.3s ease
}

 .servicio:hover {
 border-color:var(--gold);
 box-shadow:var(--shadow);
 transform:translateY(-8px)
}

 .icono {
 display:grid;
 width:52px;
 height:52px;
 margin-bottom:1.5rem;
 border-radius:.45rem;
 place-items:center;
 background:#fff5cc;
 color:#745609;
 font-size:1.45rem
}

 .servicio h3 {
 margin-bottom:.7rem;
 font-family:var(--display);
 font-size:1.2rem
}

 .servicio p {
 color:#696a6d;
 line-height:1.65
}

 .galeria {
 background:#111214;
 color:#fff
}

 .galeria .seccion-titulo p {
 color:var(--gold)
}

 .galeria-grid {
 display:grid;
 grid-template-columns:1.15fr .85fr .85fr;
 gap:1rem;
 width:min(1100px,90%);
 margin:auto
}

 .galeria-item {
 position:relative;
 min-height:310px;
 overflow:hidden;
 border-radius:.55rem;
 background:linear-gradient(145deg,#9b7824,#342404 48%,#111)
}

 .galeria-item:nth-child(2) {
 background:linear-gradient(145deg,#354451,#080c10 58%,#a88029)
}

 .galeria-item:nth-child(3) {
 background:linear-gradient(145deg,#d0d1cd,#555d64 48%,#1c2023)
}

 .galeria-item:before {
 position:absolute;
 inset:0;
 background:repeating-linear-gradient(25deg,transparent 0 28px,rgba(255,255,255,.12) 29px 30px,transparent 31px 58px);
 content:'';
 opacity:.58;
 transition:transform .5s ease
}

 .galeria-item:after {
 position:absolute;
 right:1rem;
 bottom:1rem;
 padding:.5rem .7rem;
 border:1px solid rgba(255,255,255,.32);
 border-radius:.25rem;
 background:rgba(0,0,0,.35);
 color:#fff;
 content:'View project  ↗';
 font-size:.73rem;
 opacity:0;
 transform:translateY(8px);
 transition:.25s ease
}

 .galeria-item:hover:before {
 transform:scale(1.12)
}

 .galeria-item:hover:after {
 opacity:1;
 transform:translateY(0)
}

 .galeria-item img {
 display:none
}

 .cotizacion {
 padding:clamp(4.5rem,9vw,7rem) 0;
 background:linear-gradient(110deg,#edc82f,#ffdb4c)
}

 .cotizacion-contenido {
 display:grid;
 grid-template-columns:.85fr 1.15fr;
 gap:clamp(2rem,7vw,7rem);
 align-items:start;
 width:min(1100px,90%);
 margin:auto
}

 .cotizacion-texto {
 position:sticky;
 top:2rem
}

 .cotizacion-texto>p:last-child {
 max-width:380px;
 margin-top:1.2rem;
 color:#463c19;
 line-height:1.65
}

 .formulario {
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:1rem;
 padding:1.6rem;
 border-radius:.65rem;
 background:#fff;
 box-shadow:0 18px 35px rgba(60,45,0,.2)
}

 .campo {
 display:grid;
 gap:.45rem
}

.campo:nth-of-type(5),
.campo:nth-of-type(6),
.checkbox,
.btn-enviar {
    grid-column: 1 / -1;
}

 .campo label {
 color:#343538;
 font-size:.78rem;
 font-weight:700
}

 .campo input,.campo select,.campo textarea {
 width:100%;
 padding:.78rem .85rem;
 border:1px solid #d8d9dc;
 border-radius:.3rem;
 outline:none;
 color:#202124;
 font:inherit;
 transition:.2s ease
}

 .campo textarea {
 resize:vertical
}

.btn-archivo {
    display: inline-block;
    width: fit-content;
    padding: .65rem .9rem;
    border-radius: .3rem;
    background: #bd8e00;
    color: #fff !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: .2s ease;
}

.btn-archivo:hover {
    background: #a97d00;
}

#nombre-archivo {
    margin-top: .4rem;
    color: #66676a;
    font-size: .75rem;
}


/* .campo input[type="file"] {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px dashed #d0a30f;
    border-radius: .3rem;
    background: #fafafa;
    color: #66676a;
    font: inherit;
    cursor: pointer;
    transition: .2s ease;
}

.campo input[type="file"]:hover {
    background: #fffdf5;
    border-color: #bd8e00;
}

.campo input[type="file"]:focus {
    outline: none;
    border-color: #d0a30f;
    box-shadow: 0 0 0 3px rgba(255, 201, 40, .24);
}

.campo input[type="file"]::file-selector-button {
    padding: .55rem .85rem;
    margin-right: .75rem;
    border: none;
    border-radius: .3rem;
    background: #bd8e00;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.campo input[type="file"]::file-selector-button:hover {
    background: #a97d00;
} */

 .campo input:focus,.campo select:focus,.campo textarea:focus {
 border-color:#d0a30f;
 box-shadow:0 0 0 3px rgba(255,201,40,.24)
}

 .checkbox {
 display:flex;
 align-items:flex-start;
 gap:.55rem;
 color:#66676a;
 font-size:.78rem;
 line-height:1.4
}

 .checkbox input {
 accent-color:#bd8e00;
 margin-top:.1rem
}

 .btn-enviar {
 width:100%;
 min-height:52px;
 cursor:pointer
}

 footer {
 padding:3.5rem 1rem 1.8rem;
 background:#0c0d0f;
 color:#fff;
 text-align:center
}

 footer h3 {
 color:var(--gold);
 font-family:var(--display);
 font-size:1.05rem;
 letter-spacing:.08em
}

 footer>p:not(.copyright) {
 margin:.8rem 0 1.6rem;
 color:#bcbcc0
}

 .footer-links {
 display:flex;
 justify-content:center;
 flex-wrap:wrap;
 gap:1.3rem
}

 .footer-links a {
 color:#e6e6e8;
 font-size:.86rem;
 text-decoration:none;
 transition:color .2s ease
}

 .footer-links a:hover {
 color:var(--gold)
}

 .copyright {
 width:min(900px,100%);
 margin:2.2rem auto 0;
 padding-top:1.2rem;
 border-top:1px solid var(--line);
 color:#77787c;
 font-size:.75rem
}

 @keyframes reveal {
 from {
 opacity:0;
 transform:translateY(20px)
    }

 to {
 opacity:1;
 transform:translateY(0)
    }

}

 @keyframes float {
 50% {
 transform:translateY(-18px)
    }

}

 @media(max-width:860px) {
 .menu {
 gap:1rem
    }

 .navbar-btn {
 display:none
    }

 .servicios-grid {
 grid-template-columns:1fr;
 max-width:560px
    }

 .galeria-grid {
 grid-template-columns:1fr 1fr
    }

 .galeria-item:first-child {
 grid-column:1/-1
    }

 .cotizacion-contenido {
 grid-template-columns:1fr
    }

 .cotizacion-texto {
 position:static
    }

}

 @media(max-width:620px) {
 .top-bar-container {
 justify-content:center;
 min-height:36px
    }

 .top-info-left {
 gap:0
    }

 .top-schedule,.top-info-right {
 display:none
    }

 .navbar-container {
 min-height:66px
    }

 .menu {
 display:none
    }

 .hero {
 min-height:670px;
 padding-top:125px
    }

 .hero h1 {
 font-size:clamp(2.8rem,14vw,4rem)
    }

 .botones {
 flex-direction:column;
 max-width:330px
    }

 .btn {
 width:100%
    }

 .confianza {
 line-height:2
    }

 .estadistica {
 padding:1.55rem .5rem
    }

 .estadistica strong {
 font-size:2rem
    }

 .estadistica span {
 font-size:.62rem;
 letter-spacing:.08em
    }

 .galeria-grid {
 grid-template-columns:1fr
    }

 .galeria-item:first-child {
 grid-column:auto
    }

 .galeria-item {
 min-height:230px
    }

 .formulario {
 grid-template-columns:1fr;
 padding:1.1rem
    }

 .campo:nth-of-type(5),.checkbox,.btn-enviar {
 grid-column:auto
    }

}

@media(prefers-reduced-motion:reduce) {
 *,*:before,*:after {
 scroll-behavior:auto!important;
 animation-duration:.01ms!important;
 transition-duration:.01ms!important
    }

}

/* Chatbot flotante */
.faq {
    padding: clamp(4.5rem, 9vw, 7rem) 0;
    background: #f7f5ef;
}

.faq-list {
    display: grid;
    gap: .75rem;
    width: min(860px, 90%);
    margin: auto;
}

.faq-item {
    border: 1px solid #dedbd2;
    border-radius: .45rem;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.faq-item[open] {
    border-color: #e3b616;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    cursor: pointer;
    font-family: var(--display);
    font-size: .95rem;
    font-weight: 700;
    list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { color: #90700d; font-size: .8rem; transition: transform .2s ease; }
.faq-item[open] summary i { transform: rotate(45deg); }
.faq-item p { max-width: 730px; padding: 0 1.25rem 1.2rem; color: #65666a; line-height: 1.7; }

.faq-page { background: #f7f5ef; }

.faq-page__hero {
    position: relative;
    padding: 11.5rem 6% 4.5rem;
    overflow: hidden;
    background: #111215;
    color: #fff;
    text-align: center;
}

.faq-page__hero::before {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 110%, rgba(255, 201, 40, .28), transparent 42%), repeating-linear-gradient(125deg, transparent 0 48px, rgba(255, 201, 40, .06) 49px 51px);
    content: '';
}

.faq-page__hero > * { position: relative; }
.faq-page__hero h1 { margin: .75rem 0 1rem; font-family: var(--display); font-size: clamp(2.6rem, 6vw, 5.2rem); letter-spacing: -.06em; line-height: 1; }
.faq-page__hero h1 span { color: var(--gold); }
.faq-page__hero > p:last-child { max-width: 620px; margin: auto; color: #d6d6d7; font-size: 1.05rem; line-height: 1.7; }

.faq-page__content { padding-top: clamp(3rem, 6vw, 5rem); }
.faq-page__content .faq-list { width: min(1040px, 90%); }
.faq-page__content .faq-item summary { padding: 1.35rem 1.5rem; font-size: 1.03rem; }
.faq-page__content .faq-item p { max-width: 850px; padding: 0 1.5rem 1.35rem; }

.faq-page__contact {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    width: min(1040px, 90%);
    margin: 2rem auto 0;
    padding: 1.25rem 1.4rem;
    border: 1px solid #e0c45f;
    border-radius: .55rem;
    background: #fff9e9;
}

.faq-page__contact > i { display: grid; width: 44px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--gold); color: #181307; }
.faq-page__contact div { display: grid; gap: .2rem; }
.faq-page__contact strong { font-family: var(--display); }
.faq-page__contact span { color: #60616a; font-size: .9rem; }
.faq-page__contact a { margin-left: auto; color: #785806; font-size: .86rem; font-weight: 900; text-decoration: none; white-space: nowrap; }
.faq-page__contact a i { margin-left: .35rem; }

@media (max-width: 620px) {
    .faq-page__hero { padding-top: 9.5rem; }
    .faq-page__contact { align-items: flex-start; flex-wrap: wrap; }
    .faq-page__contact a { width: 100%; margin-left: 3.7rem; }
}

/* Llamada a la acción final y footer */
.reviews { padding: clamp(4.5rem, 9vw, 7rem) 0; background: #f7f7f6; }
.reviews .seccion-titulo { margin-bottom: 1.6rem; }
.reviews h2 em { color: #957311; font-style: normal; }
.review-stars { display: inline-flex; gap: .18rem; margin-top: .55rem; color: #f3b51a; font-size: .9rem; }
.reviews-panel { width: min(1120px, 92%); margin: auto; padding: clamp(1.5rem, 4vw, 2.7rem); border: 1px solid #dadada; border-radius: .75rem; background: #fff; box-shadow: 0 14px 27px rgba(0,0,0,.1); }
.reviews-panel .elfsight-app-010f9389-f94d-4505-9ef2-a4949dcbe47c { min-height: 230px; }
.reviews-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.reviews-summary h3 { font-family: var(--display); font-size: 1rem; }
.reviews-summary > div { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: .65rem; }
.reviews-summary strong { grid-row: span 2; color: #182233; font-family: var(--display); font-size: 1.85rem; }
.reviews-summary .review-stars { margin: 0; font-size: .78rem; }
.reviews-summary small { color: #8b8c90; font-size: .7rem; }
.reviews-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.review-card { display: flex; min-height: 205px; flex-direction: column; justify-content: space-between; padding: .8rem; border: 1px solid #eeeeee; border-radius: .55rem; box-shadow: 0 4px 10px rgba(0,0,0,.09); }
.review-card > div { display: flex; justify-content: space-between; gap: .4rem; }
.review-card__score { color: #ffb800; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.review-card__score i { font-size: .62rem; }
.review-card time { color: #4e6688; font-size: .58rem; white-space: nowrap; }
.review-card p { margin: .8rem 0; color: #2f4059; font-size: .68rem; line-height: 1.6; }
.review-card footer { display: flex; align-items: center; gap: .35rem; padding: 0; background: transparent; color: #516179; font-size: .62rem; text-align: left; }
.review-card footer > i { margin-left: auto; color: #4285f4; font-size: .88rem; }
.review-avatar { display: grid; width: 19px; height: 19px; border-radius: 50%; place-items: center; background: #9aa7b9; color: #fff; font-size: .48rem; font-weight: 800; }
.reviews-more { display: block; width: max-content; margin: 1.15rem auto 0; color: #1e293b; font-size: .7rem; font-weight: 800; text-decoration: none; }
.reviews-more:hover { color: #a37d0e; }

@media (max-width: 850px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .reviews-summary { align-items: flex-start; flex-direction: column; } .reviews-grid { grid-template-columns: 1fr; } }
.final-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(3.5rem, 7vw, 5.5rem) max(5%, calc((100% - 1100px) / 2)); background: linear-gradient(115deg, #1a1710, #3c2d06); color: #fff; }
.final-cta .etiqueta { color: var(--gold); }
.final-cta h2 { max-width: 660px; font-family: var(--display); font-size: clamp(2rem, 4vw, 3.3rem); letter-spacing: -.05em; }
.final-cta p:not(.etiqueta) { margin-top: .85rem; color: #d4d2cc; line-height: 1.6; }
.final-cta__actions { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: .75rem; }
.home-closing { overflow: hidden; background: #0c0d0f; color: #fff; }
.home-closing__top { display: grid; grid-template-columns: 1.05fr .95fr; border-bottom: 1px solid rgba(255, 202, 42, .32); }
.home-closing__story { position: relative; display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.8rem); min-height: 320px; padding: clamp(2rem, 4vw, 3.5rem) max(7%, calc((100% - 1000px) / 2)); overflow: hidden; background: linear-gradient(120deg, #101113, #17150f); }
.home-closing__person { align-self: center; flex: 0 0 clamp(185px, 20vw, 270px); width: clamp(185px, 20vw, 270px); margin: -3rem 0 -1.2rem -1.4rem; object-fit: contain; object-position: bottom; transform: translateY(-.75rem); filter: drop-shadow(12px 17px 15px rgba(0,0,0,.48)); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 79%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 79%, transparent 100%); }
.home-closing__story > div { position: relative; z-index: 1; }
.home-closing .etiqueta { color: var(--gold); }
.home-closing h2 { margin-top: .25rem; font-family: var(--display); font-size: clamp(1.35rem, 2.4vw, 2.15rem); letter-spacing: -.04em; }
.home-closing p:not(.etiqueta) { margin-top: .65rem; color: #c7c5c0; font-size: .88rem; line-height: 1.6; }
.home-closing__ceo { color: #f0c443 !important; font-size: .72rem !important; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.home-closing__signature { margin-top: .9rem !important; color: #fff !important; font-family: Georgia, serif; font-size: 1.05rem !important; font-style: italic; }.home-closing__signature span { display: block; margin-top: .15rem; color: #bcb9b1; font-family: var(--sans); font-size: .67rem; font-style: normal; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.home-closing__story a { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem; color: var(--gold); font-size: .75rem; font-weight: 900; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.home-closing__project { position: relative; display: grid; min-height: 270px; overflow: hidden; place-items: center; color: #fff; isolation: isolate; text-decoration: none; }
.home-closing__project::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,.05)); content: ''; }
.home-closing__project img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.home-closing__project:hover img { transform: scale(1.06); }
.home-closing__play { display: grid; width: 66px; height: 66px; margin-bottom: 2rem; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; place-items: center; background: rgba(0,0,0,.5); font-size: 1.3rem; }
.home-closing__project strong { position: absolute; bottom: 1.6rem; font-family: var(--display); font-size: clamp(1.2rem, 2vw, 1.7rem); letter-spacing: .04em; text-transform: uppercase; }
.home-closing__area { display: grid; grid-template-columns: .9fr 1fr; min-height: 225px; padding-left: 0; background: #121315; }
.home-closing__area > div:first-child { order: 2; align-self: center; max-width: 650px; padding: 2.6rem max(5%, calc((100% - 1100px) / 2)); }
.home-closing__area-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.15rem; padding: .72rem 1rem; border: 1px solid rgba(255, 202, 42, .7); color: #f2d273; font-size: .72rem; font-weight: 900; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; }
#home-service-map { order: 1; min-height: 225px; background: #151719; }
#home-service-map .leaflet-control-attribution { background: rgba(8, 9, 10, .75); color: #c9c9c9; font-size: .56rem; }
#home-service-map .leaflet-control-attribution a { color: #f0c54a; }
.home-map-tooltip { border: 0; border-radius: .25rem; background: rgba(10, 11, 13, .88); box-shadow: 0 3px 10px rgba(0,0,0,.3); color: #fff; font: 800 .7rem var(--sans); }
.home-map-tooltip::before { border-bottom-color: rgba(10, 11, 13, .88); }
.site-footer { padding: 4rem max(5%, calc((100% - 1100px) / 2)) 1.4rem; background: #090a0b; text-align: left; }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr .8fr 1.1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; }
.site-footer__brand img { width: 72px; margin-bottom: 1rem; }
.site-footer__brand > p { max-width: 355px; margin: 0; color: #babbc0; font-size: .88rem; line-height: 1.7; }
.site-footer h3 { margin-bottom: 1rem; color: var(--gold); font-family: var(--display); font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; }
.site-footer .footer-links, .footer-details { display: grid; justify-content: start; gap: .65rem; }
.site-footer .footer-links a, .footer-details a, .footer-details p { color: #d7d7da; font-size: .86rem; line-height: 1.55; text-decoration: none; }
.site-footer .footer-links a:hover, .footer-details a:hover { color: var(--gold); }
.footer-details i { width: 18px; color: var(--gold); }
.footer-details strong { color: #fff; font-weight: 600; }
.social-links { display: flex; gap: .55rem; margin-top: 1.35rem; }
.social-links a { display: grid; width: 34px; height: 34px; border: 1px solid #424346; border-radius: 50%; place-items: center; color: #fff; text-decoration: none; transition: .2s ease; }
.social-links a:hover { border-color: var(--gold); background: var(--gold); color: #161204; transform: translateY(-2px); }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.35rem; border-top: 1px solid var(--line); color: #77787c; font-size: .72rem; }

@media (max-width: 820px) { .final-cta { align-items: flex-start; flex-direction: column; } .site-footer__grid { grid-template-columns: repeat(2, 1fr); } .site-footer__bottom { flex-direction: column; } }
@media (max-width: 760px) { .home-closing__top,.home-closing__area { grid-template-columns: 1fr; }.home-closing__story { padding: 2rem 7%; }.home-closing__project { min-height: 235px; }.home-closing__area { padding-left: 0; }.home-closing__area > div:first-child { padding: 2rem 7%; }.home-closing #home-service-map { min-height: 235px; } }
@media (max-width: 480px) { .home-closing__story { align-items: flex-start; gap: .7rem; min-height: 0; padding-bottom: 1.75rem; }.home-closing__person { flex-basis: 122px; width: 122px; margin: -1.6rem 0 -1.8rem -.9rem; transform: translateY(-.25rem); }.home-closing__story > div { padding-bottom: 1.4rem; } }
@media (max-width: 520px) { .final-cta__actions { width: 100%; } .final-cta__actions .btn { flex: 1; } .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* Galería de proyectos */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.gallery-hero { display: grid; min-height: 400px; padding: 145px 5% 4rem; place-items: center; background: radial-gradient(circle at 75% 30%, rgba(255,201,40,.22), transparent 18%), linear-gradient(120deg, #08090b, #211b0a); color: #fff; text-align: center; }
.gallery-hero p { margin-bottom: .7rem; color: var(--gold); font-size: .75rem; font-weight: 800; letter-spacing: .18em; }
.gallery-hero h1 { font-family: var(--display); font-size: clamp(2.7rem, 6vw, 5rem); letter-spacing: -.06em; }
.gallery-hero h1 span { color: var(--gold); }
.gallery-hero > div > span { display: block; margin-top: 1rem; color: #d1d1d4; }
.project-gallery { padding: clamp(3.5rem, 7vw, 6rem) 0; background: #fafafa; }
.gallery-tabs { display: flex; width: max-content; max-width: 92%; margin: 0 auto 2.6rem; padding: .3rem; border: 1px solid #dadada; border-radius: 999px; }
.gallery-tab { padding: .78rem 1.55rem; border: 0; border-radius: 999px; background: transparent; color: #626870; cursor: pointer; font: 800 .88rem var(--sans); letter-spacing: .1em; text-transform: uppercase; transition: .2s ease; }
.gallery-tab span { color: #91781e; }
.gallery-tab.is-active { background: #0e0f10; color: #fff; }
.gallery-tab.is-active span { color: var(--gold); }
.project-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; width: min(1400px, 92%); margin: auto; }
.project-card { position: relative; min-height: 270px; overflow: hidden; border-radius: .7rem; background: linear-gradient(135deg, #8e9aa7, #e7e8e6 45%, #363d43); isolation: isolate; box-shadow: 0 6px 14px rgba(0,0,0,.08); }
.project-card[hidden] { display: none !important; }
.project-card > img, .project-card > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-card > video { background: #090909; }
.project-card::before { position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(18deg, transparent 0 18px, rgba(255,255,255,.17) 19px 20px, transparent 21px 39px); content: ''; transition: transform .5s ease; }
.project-card:hover::before { transform: scale(1.12); }
.project-card--2 { background: linear-gradient(135deg, #af652d, #d4bf9a 44%, #3a3d34); }.project-card--3 { background: linear-gradient(135deg, #31373d, #b9bec3 45%, #f3f0e4); }.project-card--4 { background: linear-gradient(135deg, #b8aa83, #515145 50%, #d8c595); }.project-card--5 { background: linear-gradient(135deg, #e9e6dd, #8e949a 48%, #383c40); }.project-card--6 { background: linear-gradient(135deg, #252e32, #b4afa0 47%, #ece7df); }.project-card--7 { background: linear-gradient(135deg, #0e1923, #8c6e50 45%, #d1c6ac); }.project-card--8 { background: linear-gradient(135deg, #232728, #d0d4d5 42%, #a49679); }
.project-card__content { position: absolute; right: 0; bottom: 0; left: 0; padding: 3.4rem 1rem 1rem; background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; opacity: 0; transform: translateY(10px); transition: .25s ease; }
.project-card:hover .project-card__content { opacity: 1; transform: translateY(0); }.project-card__content span { color: var(--gold); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.project-card__content h3 { margin-top: .25rem; font-family: var(--display); font-size: 1rem; }
.project-card--video { display: grid; min-height: 310px; place-items: center; background: linear-gradient(135deg, #101112, #4f4630); }.project-card--video-2 { background: linear-gradient(135deg, #1e2425, #685a35); }.project-card--video-3 { background: linear-gradient(135deg, #050505, #5d5030); }.project-play { position: relative; z-index: 2; display: grid; width: 62px; height: 62px; border: 0; border-radius: 50%; place-items: center; background: rgba(255,255,255,.92); color: #111; cursor: pointer; font-size: 1.1rem; transition: transform .2s ease; }.project-play:hover { transform: scale(1.1); }.project-card--video .project-card__content { z-index: 1; opacity: 1; transform: none; }
.gallery-pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 2.4rem; }.gallery-pagination button { min-width: 42px; height: 42px; padding: 0 .85rem; border: 1px solid #dedede; border-radius: .7rem; background: #fff; color: #24272b; cursor: pointer; font: 700 .82rem var(--sans); }.gallery-pagination button:disabled { color: #b7b7b7; cursor: not-allowed; }.gallery-pagination .is-current { border-color: #0d0e0f; background: #0d0e0f; color: #fff; }
@media (max-width: 960px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery-tab { padding: .7rem 1rem; font-size: .72rem; } .project-grid { grid-template-columns: 1fr; } .project-card { min-height: 250px; } }

/* Comparadores antes y después */
.before-after { width: min(1400px, 92%); margin: clamp(4rem, 8vw, 7rem) auto 0; }
.before-after h2 { margin-bottom: 2.4rem; color: #dca11c; font-family: var(--display); font-size: clamp(2rem, 4vw, 3.3rem); letter-spacing: -.04em; text-align: center; }
.before-after__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.comparison { position: relative; height: min(34vw, 520px); min-height: 310px; overflow: hidden; background: #17191b; line-height: 0; }
.comparison::before { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--position); width: 2px; background: #fff; content: ''; pointer-events: none; transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.comparison__after, .comparison__before { position: absolute; inset: 0; overflow: hidden; background: #17191b; }
.comparison__after::before, .comparison__before::before { display: none; }
.comparison__after img, .comparison__before img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.comparison__before { z-index: 1; }
.comparison__after { z-index: 2; clip-path: inset(0 0 0 var(--position)); -webkit-clip-path: inset(0 0 0 var(--position)); }
.comparison--two .comparison__after, .comparison--two .comparison__before { background: #17191b; }
.comparison__divider { position: absolute; z-index: 3; top: 50%; left: var(--position); display: grid; width: 54px; height: 54px; border: 2px solid #e1e1e1; border-radius: 50%; place-items: center; background: #fff; color: #111; font-size: 1rem; transform: translate(-50%, -50%); box-shadow: 0 4px 12px rgba(0,0,0,.18); pointer-events: none; }
.comparison__divider i { display: none; }.comparison__divider::before { content: '\21c4'; font-family: Arial, sans-serif; font-size: 1.55rem; font-weight: 800; line-height: 1; }
.comparison__tag { position: absolute; bottom: 1.2rem; z-index: 1; padding: .6rem .95rem; border-radius: .2rem; background: #fff; color: #111; font-weight: 700; line-height: 1.2; }
.comparison__before .comparison__tag { right: auto; left: max(1.2rem, calc(var(--position) - 7.5rem)); }
.comparison__tag--after { right: auto; left: calc(var(--position) + 1.2rem); }
.comparison__range { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; margin: 0; cursor: ew-resize; opacity: 0; }
@media (max-width: 700px) { .before-after__grid { grid-template-columns: 1fr; gap: 1rem; } .comparison { height: 65vw; min-height: 270px; } }

/* Visualizador de pisos */
.visualizer-page { background: #161719; }.floor-visualizer { display: grid; grid-template-columns: minmax(0, 1fr) 440px; min-height: 100vh; padding-top: 114px; font-family: var(--sans); }.visualizer-stage { position: relative; overflow: hidden; min-height: 760px; background: #424244; }.visualizer-toolbar { position: absolute; z-index: 3; top: 1.4rem; left: 1.4rem; display: flex; align-items: center; gap: .55rem; }.visualizer-home { display: grid; width: 60px; height: 60px; border-radius: .5rem; place-items: center; background: #111; }.visualizer-home img { width: 48px; }.visualizer-quote { padding: .85rem 1rem; border: 0; border-radius: .4rem; background: #f33829; color: #fff; cursor: pointer; font: 800 .85rem var(--sans); }.visualizer-icon { width: 42px; height: 42px; border: 0; border-radius: .4rem; background: #fff; color: #222; cursor: pointer; }.visualizer-estimate { position: absolute; z-index: 3; top: 6.7rem; left: 1.4rem; width: 290px; padding: .55rem; border-radius: .5rem; background: #fff; box-shadow: 0 7px 16px rgba(0,0,0,.22); }.visualizer-estimate > button { display: flex; justify-content: space-between; width: 100%; padding: .75rem; border: 1px solid #202124; border-radius: .35rem; background: #fff; font: 700 .85rem var(--sans); }.visualizer-estimate__form { display: none; gap: .65rem; padding: .9rem .35rem .2rem; }.visualizer-estimate.is-open .visualizer-estimate__form { display: grid; }.visualizer-estimate label { display: grid; grid-template-columns: 1fr 145px; align-items: center; gap: .5rem; color: #25272b; font-size: .75rem; }.visualizer-estimate select,.visualizer-estimate input { width: 100%; padding: .6rem; border: 1px solid #202124; border-radius: .35rem; font: inherit; }.visualizer-estimate__form p { margin: .25rem 0 0; color: #60636a; font-size: .72rem; }.visualizer-estimate__form strong { color: #1d1f22; }.visualizer-room { position: absolute; inset: 0; display: grid; grid-template-rows: 59% 41%; background-size: cover; background-position: center; }.visualizer-wall { background: repeating-linear-gradient(0deg, #d0d2d5 0 2px, #b7bbc0 3px 5px, #c9cbd0 6px 48px); box-shadow: inset 0 -10px #343638; }.visualizer-floor { --floor-color:#2d2e2c; --floor-accent:#d8d5c8; position: relative; background-color: var(--floor-color); background-image: radial-gradient(var(--floor-accent) 1px, transparent 2px), radial-gradient(#111 1px, transparent 2px); background-size: 12px 11px, 18px 18px; transform: perspective(600px) rotateX(2deg); }.visualizer-floor[data-system="solid"] { background-image: linear-gradient(130deg, rgba(255,255,255,.16), transparent 42%, rgba(0,0,0,.18)); }.visualizer-floor[data-system="metallic"] { background-image: repeating-radial-gradient(ellipse at 70% 30%, var(--floor-accent) 0 3px, var(--floor-color) 6px 22px); }.visualizer-watermark { position: absolute; bottom: .8rem; left: 1rem; z-index: 2; padding: .32rem .55rem; border-radius: .25rem; background: rgba(255,255,255,.7); color: #151515; font-size: .66rem; font-weight: 800; }.visualizer-watermark span { color: #9a7200; }.visualizer-sidebar { z-index: 4; padding: 1.8rem; overflow-y: auto; background: #fff; }.visualizer-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-bottom: 1.2rem; }.visualizer-tabs button { padding: .8rem .5rem; border: 1px solid #222; border-radius: .35rem; background: #fff; color: #161719; cursor: pointer; font: 700 .9rem var(--sans); }.visualizer-tabs button.is-active { background: #171819; color: #fff; }.visualizer-selected { display: flex; align-items: center; gap: .75rem; padding: .7rem; border-radius: .4rem; background: #f1f1ef; color: #202124; }.visualizer-selected > span { width: 68px; height: 52px; border-radius: .3rem; background: linear-gradient(135deg,#2d2e2c,#d8d5c8); }.visualizer-selected strong,.visualizer-selected small { display: block; }.visualizer-selected small { margin-top: .2rem; color: #72757b; font-size: .72rem; }.visualizer-search { display: flex; align-items: center; gap: .55rem; margin: 1rem 0; padding: .7rem; border: 1px solid #202124; border-radius: .35rem; }.visualizer-search input { width: 100%; border: 0; outline: 0; font: inherit; }.visualizer-system { display: flex; gap: .4rem; margin-bottom: 1rem; }.visualizer-system button { flex: 1; padding: .55rem; border: 1px solid #d1d1d1; border-radius: .3rem; background: #fff; cursor: pointer; font: 700 .72rem var(--sans); }.visualizer-system button.is-active { border-color: #191a1c; background: #191a1c; color: #fff; }.visualizer-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; }.visualizer-swatches button { display: grid; gap: .3rem; border: 0; background: transparent; color: #202124; cursor: pointer; font: 700 .76rem var(--sans); text-align: left; }.visualizer-swatches button.is-selected .swatch { outline: 3px solid #1b1c1d; outline-offset: 2px; }.visualizer-swatches small { color: #777a7f; font-size: .62rem; font-weight: 500; }.swatch { display: block; aspect-ratio: 1; border-radius: .3rem; background: radial-gradient(#d8d5c8 1px, transparent 2px), radial-gradient(#111 1px, transparent 2px), #2d2e2c; background-size: 9px 8px, 13px 13px; }.swatch--smoke { background-color:#737571; }.swatch--dolphin { background-color:#a7a293; }.swatch--granite { background-color:#9c927e; }.swatch--midnight { background:#252b34; }.swatch--sandstone { background:#c8b28b; }.swatch--copper { background:repeating-radial-gradient(ellipse,#e3b27f 0 3px,#99572f 6px 18px); }.swatch--silver { background:repeating-radial-gradient(ellipse,#e6e7e4 0 3px,#8a9195 6px 18px); }.visualizer-panel h2 { margin-bottom: .6rem; font-family: var(--display); font-size: 1.35rem; }.visualizer-panel > p { margin-bottom: 1.2rem; color: #62656a; line-height: 1.6; }.visualizer-upload { display: flex; justify-content: center; align-items: center; gap: .6rem; padding: 1rem; border: 1px solid #1b1c1d; border-radius: .35rem; cursor: pointer; font-weight: 800; }.visualizer-upload input { display:none; }.visualizer-image-presets { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; margin-top: 1rem; }.visualizer-image-presets button { min-height: 85px; border: 0; border-radius: .35rem; background: linear-gradient(145deg,#a7aaad,#5c6064); color: #fff; cursor: pointer; font: 700 .75rem var(--sans); }.visualizer-dialog { width: min(560px,90%); border: 0; border-radius: .8rem; padding: 2.5rem; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4); }.visualizer-dialog::backdrop { background: rgba(0,0,0,.6); }.visualizer-dialog > i { color:#d59814; font-size: 2rem; }.visualizer-dialog h2 { margin: .7rem 0; font-family: var(--display); }.visualizer-dialog p { color:#60636a; line-height:1.65; }.visualizer-dialog > button:first-child { position:absolute; top:.6rem; right:.8rem; border:0; background:transparent; cursor:pointer; font-size:1.5rem; }.visualizer-dialog__button { width:100%; margin-top:1.4rem; padding:.9rem; border:0; border-radius:.35rem; background:#f33829; color:#fff; cursor:pointer; font:800 1rem var(--sans); }
@media(max-width:980px) { .floor-visualizer { grid-template-columns: 1fr; }.visualizer-stage { min-height: 650px; }.visualizer-sidebar { min-height: auto; }.visualizer-swatches { grid-template-columns: repeat(4,1fr); } } @media(max-width:560px) { .visualizer-stage { min-height: 530px; }.visualizer-toolbar { top:.75rem; left:.75rem; }.visualizer-home { display:none; }.visualizer-quote { padding:.7rem; }.visualizer-estimate { top:4.8rem; left:.75rem; width:250px; }.visualizer-sidebar { padding:1rem; }.visualizer-swatches { grid-template-columns: repeat(3,1fr); } }

/* Texturas reales del visualizador */
.visualizer-floor {
    background-image: url("assets/textures/flake/Tuxedo.png");
    background-position: center;
    background-repeat: repeat;
    background-size: 260px auto;
}

.visualizer-selected > span {
    background: url("assets/textures/flake/Tuxedo.png") center / cover;
}

/* Escenarios con profundidad para el visualizador */
.visualizer-room {
    --scene-wall: #d7d8da;
    --scene-ceiling: #f3f3f1;
    --scene-shadow: rgba(11, 14, 18, .4);
    display: block;
    overflow: hidden;
    perspective: 1100px;
    background: radial-gradient(circle at 50% 20%, rgba(255,255,255,.95), transparent 30%), linear-gradient(135deg, #7e8388, #343a40);
}

.visualizer-ceiling {
    position: absolute;
    z-index: 1;
    top: -5%;
    left: 11%;
    width: 78%;
    height: 23%;
    border-bottom: 8px solid rgba(40, 44, 49, .28);
    background: repeating-linear-gradient(90deg, transparent 0 18%, rgba(58, 61, 65, .18) 18.2% 18.8%, transparent 19% 37%), var(--scene-ceiling);
    box-shadow: 0 12px 32px var(--scene-shadow);
    transform: rotateX(62deg);
    transform-origin: center top;
}

.visualizer-wall {
    position: absolute;
    z-index: 1;
    top: 8%;
    right: 11%;
    bottom: 37%;
    left: 11%;
    overflow: hidden;
    border: 6px solid #373c42;
    background: repeating-linear-gradient(0deg, rgba(70,75,80,.18) 0 2px, transparent 2px 47px), var(--scene-wall);
    box-shadow: inset 0 -18px 0 #242a30, 0 18px 25px var(--scene-shadow);
}

.visualizer-wall::before,
.visualizer-wall::after {
    position: absolute;
    top: 0;
    width: 13%;
    height: 100%;
    content: '';
    background: linear-gradient(90deg, rgba(20,24,28,.55), transparent);
}

.visualizer-wall::before { left: 0; }
.visualizer-wall::after { right: 0; transform: scaleX(-1); }
.visualizer-room-sign { position: absolute; top: 22%; left: 50%; padding: .5rem .8rem; border: 1px solid rgba(255,255,255,.5); background: rgba(17,20,24,.86); color: #f5c334; font-size: clamp(.55rem, 1vw, .8rem); font-weight: 800; letter-spacing: .14em; transform: translateX(-50%); }

.visualizer-floor {
    position: absolute;
    z-index: 2;
    top: 56%;
    right: -12%;
    bottom: -9%;
    left: -12%;
    height: auto;
    border-top: 5px solid rgba(35, 38, 42, .85);
    box-shadow: 0 -17px 30px rgba(0,0,0,.35), inset 0 70px 65px rgba(255,255,255,.08);
    clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
    transform: none;
}

.visualizer-room[data-room="workshop"] { --scene-wall: #bfc7c7; --scene-ceiling: #dfe8eb; background: radial-gradient(circle at 50% 15%, rgba(215,244,255,.92), transparent 32%), linear-gradient(135deg, #577078, #26343a); }
.visualizer-room[data-room="workshop"] .visualizer-wall { background-image: repeating-linear-gradient(90deg, transparent 0 10%, rgba(35,64,68,.35) 10.3% 11%, transparent 11.3% 20%), repeating-linear-gradient(0deg, rgba(70,75,80,.18) 0 2px, transparent 2px 47px); }
.visualizer-room[data-room="showroom"] { --scene-wall: #f0f0ed; --scene-ceiling: #fff; background: radial-gradient(circle at 50% 10%, #fff 0 10%, #9ba2a8 70%); }
.visualizer-room[data-room="showroom"] .visualizer-wall { border-color: #777d82; background-image: linear-gradient(90deg, transparent 0 48%, rgba(90,100,106,.3) 48.5% 49%, transparent 49.5%), linear-gradient(0deg, rgba(70,75,80,.12) 0 2px, transparent 2px 47px); }
.visualizer-room[data-room="patio"] { --scene-wall: #d9d0bd; --scene-ceiling: #dce9f0; background: linear-gradient(#b8d8ec 0 45%, #687e56 45% 100%); }
.visualizer-room[data-room="patio"] .visualizer-wall { border-color: #786a53; background-image: linear-gradient(90deg, rgba(255,255,255,.18) 0 48%, rgba(106,86,61,.35) 48.5% 49%, rgba(255,255,255,.18) 49.5%); }
.visualizer-room[data-room="patio"] .visualizer-ceiling { opacity: .45; }

.visualizer-image-presets { grid-template-columns: repeat(2, 1fr); }
.visualizer-image-presets button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; min-height: 92px; border: 1px solid #d5d7da; background: linear-gradient(145deg, #e7e8e7, #9da4a8); color: #15191c; }
.visualizer-image-presets button i { font-size: 1.2rem; }
.visualizer-image-presets button.is-selected { border-color: #171819; background: #171819; color: #fff; box-shadow: 0 5px 12px rgba(0,0,0,.18); }

/* Cada pestaña enseña exclusivamente las texturas de su sistema. */
.visualizer-swatches button[hidden] { display: none !important; }
.visualizer-swatches[data-active-system="flake"] > button:not([data-system="flake"]),
.visualizer-swatches[data-active-system="solid"] > button:not([data-system="solid"]),
.visualizer-swatches[data-active-system="metallic"] > button:not([data-system="metallic"]) { display: none !important; }

/* El catálogo de texturas se desplaza sin mover los filtros. */
.visualizer-swatches {
    max-height: calc(100vh - 390px);
    min-height: 260px;
    padding: .15rem .45rem .7rem .15rem;
    overflow-y: auto;
    scrollbar-color: #8c9197 #eef0f1;
    scrollbar-width: thin;
}

.visualizer-swatches::-webkit-scrollbar { width: 8px; }
.visualizer-swatches::-webkit-scrollbar-track { border-radius: 99px; background: #eef0f1; }
.visualizer-swatches::-webkit-scrollbar-thumb { border-radius: 99px; background: #8c9197; }

@media (max-width: 980px) {
    .visualizer-swatches { max-height: 58vh; }
}

/* Shop */
.shop-page { background: #f7f5f0; }.shop-hero { padding: clamp(9rem, 14vw, 12rem) 6% 4rem; text-align: center; background: radial-gradient(circle at 50% 0, #fff, #eeeae1); }.shop-hero h1 { margin: .45rem 0 .8rem; font-family: var(--display); font-size: clamp(2.5rem, 6vw, 5.3rem); }.shop-hero > p:last-child { max-width: 630px; margin: auto; color: #59616a; font-size: 1.08rem; line-height: 1.6; }.shop-builder { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(450px, 1.1fr); gap: clamp(2rem, 5vw, 5rem); width: min(1240px, 92%); margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) 0; }.shop-product-preview { display: grid; align-content: start; gap: 1.4rem; }.shop-bucket,.shop-flake-pouch { position: relative; width: min(100%, 470px); margin: auto; }.shop-bucket > img,.shop-flake-pouch > img { position: relative; z-index: 2; display: block; width: 100%; filter: drop-shadow(0 21px 16px rgba(0,0,0,.25)); }.shop-bucket__label { position: absolute; z-index: 3; top: 32%; right: 22%; left: 22%; display: grid; place-content: center; min-height: 31%; padding: 1rem; border: 4px solid #15191e; border-radius: .25rem; background-color: #2a2f35; background-position: center; background-size: cover; box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); color: #fff; text-align: center; text-shadow: 0 1px 3px #000; }.shop-bucket__label span,.shop-flake-pouch__label span { color: #f7c437; font-size: .65rem; font-weight: 900; letter-spacing: .16em; }.shop-bucket__label strong { margin: .35rem 0; font-family: var(--display); font-size: clamp(1.25rem, 3vw, 2rem); }.shop-bucket__label small { font-size: .62rem; font-weight: 800; letter-spacing: .1em; }.shop-flake-pouch__label { position: absolute; z-index: 3; top: 25%; right: 20%; left: 20%; display: grid; min-height: 16%; place-content: center; padding: .55rem; color: #fff; text-align: center; text-shadow: 0 1px 3px #000; }.shop-flake-pouch__label strong { margin: .2rem 0; font-family: var(--display); font-size: clamp(1.1rem, 2.6vw, 1.8rem); letter-spacing: .04em; }.shop-flake-pouch__label small { font-size: .56rem; font-weight: 800; letter-spacing: .1em; }.shop-product-copy { padding: 0 .8rem; text-align: center; }.shop-product-copy > span { color: #916b0e; font-size: .74rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }.shop-product-copy h2 { margin: .45rem 0; font-family: var(--display); font-size: 1.7rem; }.shop-product-copy p { color: #59616a; line-height: 1.6; }.shop-price { display: block; margin-top: 1rem; color: #0d1a2c; font-size: 1.55rem; }.shop-controls { padding: clamp(1.4rem, 3vw, 2.4rem); border: 1px solid #ddd8cd; border-radius: 1rem; background: #fff; box-shadow: 0 12px 35px rgba(30,28,24,.08); }.shop-controls__top { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }.shop-controls h2 { margin-top: .3rem; font-family: var(--display); font-size: 2rem; }.shop-cart { padding: .6rem .75rem; border-radius: 99px; background: #f2eee4; color: #72540d; font-size: .78rem; font-weight: 800; white-space: nowrap; }.shop-systems { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; margin: 1.8rem 0 1.2rem; }.shop-systems button { padding: .8rem .45rem; border: 1px solid #cfcabf; border-radius: .4rem; background: #fff; cursor: pointer; font: 800 .8rem var(--sans); }.shop-systems button.is-active { border-color: #17191d; background: #17191d; color: #fff; }.shop-textures { display: grid; grid-template-columns: repeat(4,1fr); max-height: 350px; gap: .85rem; padding: .2rem .55rem .5rem .2rem; overflow-y: auto; }.shop-textures button { display: grid; gap: .35rem; padding: 0; border: 0; background: none; color: #1c2430; cursor: pointer; font: 800 .72rem var(--sans); text-align: left; }.shop-textures span { display: block; aspect-ratio: 1; border: 2px solid transparent; border-radius: .4rem; background-position: center; background-size: cover; box-shadow: 0 3px 8px rgba(0,0,0,.12); }.shop-textures button.is-selected span { border-color: #101214; outline: 2px solid #101214; outline-offset: 2px; }.shop-actions { display: flex; align-items: end; gap: 1rem; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid #e5e1d9; }.shop-actions label { display: grid; flex: 1; gap: .4rem; color: #4e5661; font-size: .78rem; font-weight: 800; }.shop-actions select { padding: .8rem; border: 1px solid #bab5ac; border-radius: .35rem; background: #fff; font: inherit; }.shop-actions .btn { min-height: 44px; }.shop-actions .btn i { margin-left: .35rem; } @media (max-width: 850px) { .shop-builder { grid-template-columns: 1fr; }.shop-bucket,.shop-flake-pouch { max-width: 400px; }.shop-textures { grid-template-columns: repeat(3,1fr); } } @media (max-width: 480px) { .shop-controls { padding: 1.2rem; }.shop-controls__top { flex-direction: column; }.shop-textures { grid-template-columns: repeat(2,1fr); }.shop-actions { align-items: stretch; flex-direction: column; }.shop-actions .btn { width: 100%; } }

/* Etiqueta de bolsas Flake y fondo integrado con la página. */
.shop-flake-pouch > img { mix-blend-mode: multiply; }
.shop-flake-pouch__label { gap: .3rem; }
.shop-flake-pouch__label strong { margin: 0; color: #f7c437; }

/* Diseño premium para Shop */
.shop-page { background: #f2f0eb; }
.shop-hero { position: relative; overflow: hidden; min-height: 465px; padding: clamp(9rem, 13vw, 12rem) 6% clamp(4rem, 7vw, 6rem); background: linear-gradient(102deg, rgba(5,8,12,.98) 0%, rgba(9,14,20,.92) 52%, rgba(10,16,23,.58)), url("assets/textures/metalic/Gun Metal.png") center / cover; color: #fff; text-align: left; }
.shop-hero::after { position: absolute; right: -12%; bottom: -55%; width: min(65vw, 850px); aspect-ratio: 1; border: 1px solid rgba(243,194,54,.37); border-radius: 50%; box-shadow: 0 0 0 48px rgba(243,194,54,.06), 0 0 0 98px rgba(243,194,54,.04); content: ''; }
.shop-hero__content { position: relative; z-index: 1; width: min(730px, 100%); }.shop-hero .etiqueta { color: #f4c437; }.shop-hero .etiqueta i { margin-right: .4rem; }.shop-hero h1 { max-width: 680px; margin: .65rem 0 1rem; font-size: clamp(3rem, 6.3vw, 5.9rem); line-height: .96; letter-spacing: -.055em; }.shop-hero h1 em { color: #f4c437; font-style: normal; }.shop-hero > p { display: none; }.shop-hero__content > p:not(.etiqueta) { max-width: 605px; color: #d6dce2; font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.7; }.shop-hero__pills { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.8rem; }.shop-hero__pills span { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem .72rem; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; background: rgba(255,255,255,.08); color: #f3f5f6; font-size: .73rem; font-weight: 700; }.shop-hero__pills i { color: #f4c437; }
.shop-builder { position: relative; z-index: 2; margin-top: -2.4rem; }.shop-product-preview { padding: clamp(1.5rem, 3vw, 2.4rem); border: 1px solid rgba(255,255,255,.7); border-radius: 1rem; background: linear-gradient(145deg, #fff, #f3f1ec); box-shadow: 0 22px 55px rgba(23,27,31,.16); }.shop-bucket,.shop-flake-pouch { transition: transform .35s ease; }.shop-product-preview:hover .shop-bucket,.shop-product-preview:hover .shop-flake-pouch { transform: translateY(-8px) rotate(-1deg); }.shop-product-copy { padding: .35rem .3rem 0; }.shop-product-copy > span { display: inline-flex; padding: .35rem .55rem; border-radius: .25rem; background: #f6e6b0; color: #765609; }.shop-product-copy h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }.shop-price { position: relative; display: inline-block; padding-right: 1.2rem; color: #0c1b2e; font-size: 2rem; }.shop-price::after { position: absolute; top: 50%; right: 0; width: 7px; height: 7px; border-radius: 50%; background: #d5a619; content: ''; }.shop-includes { display: grid; gap: .5rem; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid #dedad0; text-align: left; }.shop-includes span { color: #45505b; font-size: .78rem; font-weight: 700; }.shop-includes i { margin-right: .35rem; color: #b88809; }
.shop-controls { border: 0; border-top: 4px solid #e8ba22; box-shadow: 0 22px 55px rgba(23,27,31,.14); }.shop-controls__top { padding-bottom: 1.2rem; border-bottom: 1px solid #ebe7de; }.shop-controls h2 { font-size: clamp(1.75rem, 3vw, 2.35rem); }.shop-cart { border: 1px solid #e5cf87; background: #fff8df; }.shop-systems { padding: .35rem; border-radius: .55rem; background: #f0eee8; }.shop-systems button { border: 0; transition: transform .2s ease, box-shadow .2s ease; }.shop-systems button:hover { transform: translateY(-2px); }.shop-systems button.is-active { box-shadow: 0 5px 12px rgba(0,0,0,.18); }.shop-textures { padding-top: .65rem; }.shop-textures span { transition: transform .22s ease, box-shadow .22s ease; }.shop-textures button:hover span { transform: translateY(-4px); box-shadow: 0 9px 16px rgba(0,0,0,.2); }.shop-actions { padding: 1.3rem; border: 1px solid #e2ddd3; border-radius: .65rem; background: #fbfaf7; }.shop-actions .btn { min-width: 190px; border-radius: .4rem; box-shadow: 0 7px 15px rgba(181,135,8,.22); }.shop-checkout-note { margin-top: .8rem; color: #65707a; font-size: .72rem; text-align: center; }.shop-checkout-note i { margin-right: .3rem; color: #9b7510; }
@media (max-width: 850px) { .shop-hero { min-height: auto; }.shop-builder { margin-top: -1rem; }.shop-hero h1 { font-size: clamp(2.8rem, 11vw, 4.5rem); } }

/* Shop presentation improvements */
.shop-product-preview {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid rgba(255, 201, 40, .35);
    background: linear-gradient(145deg, #fff, #f1eee6);
}

.shop-product-preview::before {
    position: absolute;
    z-index: -1;
    top: -30%;
    left: -25%;
    width: 78%;
    aspect-ratio: 1;
    border: 1px solid rgba(216, 167, 27, .16);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(216, 167, 27, .045), 0 0 0 68px rgba(216, 167, 27, .03);
    content: '';
}

.shop-product-preview > * { position: relative; z-index: 1; }

.shop-preview__top {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid #e4ded2;
    color: #75602a;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .1em;
}

.shop-preview__top span:last-child { color: #7b838a; }
.shop-preview__top i { margin-right: .3rem; color: #d09c0c; }

.shop-controls__hint {
    max-width: 370px;
    margin-top: .55rem;
    color: #68717b;
    font-size: .85rem;
    line-height: 1.5;
}

.shop-systems button { position: relative; min-height: 47px; }
.shop-systems button.is-active::after { position: absolute; right: 50%; bottom: -5px; width: 9px; height: 9px; background: #17191d; content: ''; transform: translateX(50%) rotate(45deg); }

.shop-textures button { padding: .35rem; border-radius: .55rem; transition: background .2s ease, transform .2s ease; }
.shop-textures button:hover { background: #f2efe8; }
.shop-textures button.is-selected { background: #fff7dd; }
.shop-textures button.is-selected span { border-color: #c89514; outline-color: #c89514; }

.shop-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    width: min(1240px, 92%);
    margin: 0 auto clamp(4rem, 8vw, 7rem);
    border: 1px solid #2b2d2f;
    border-radius: .8rem;
    overflow: hidden;
    background: #2b2d2f;
}

.shop-benefits article {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-height: 142px;
    padding: 1.5rem;
    background: #131416;
    color: #fff;
}

.shop-benefits article > i {
    display: grid;
    width: 42px;
    flex: 0 0 42px;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 201, 40, .12);
    color: var(--gold);
}

.shop-benefits h2 { margin: .1rem 0 .45rem; font-family: var(--display); font-size: 1rem; }
.shop-benefits p { color: #b8bbbf; font-size: .85rem; line-height: 1.55; }

@media (max-width: 760px) {
    .shop-benefits { grid-template-columns: 1fr; }
    .shop-preview__top { font-size: .58rem; }
}

@media (max-width: 480px) {
    .shop-preview__top span:last-child { display: none; }
    .shop-controls__hint { font-size: .8rem; }
}

/* Shop system rows and checkout */
.shop-catalog {
    width: min(1240px, 92%);
    margin: 0 auto;
    padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(4rem, 8vw, 7rem);
}

.shop-catalog__heading {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    align-items: end;
    margin-bottom: 2rem;
}

.shop-catalog__heading h2 { max-width: 650px; margin-top: .5rem; font-family: var(--display); font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.055em; line-height: 1.05; }
.shop-catalog__heading > p { max-width: 400px; color: #616974; line-height: 1.7; }

.shop-catalog__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .35fr); gap: 1.5rem; align-items: start; }
.shop-catalog__main { display: grid; gap: 1.2rem; }
.shop-system-rows { display: grid; gap: .7rem; }

.shop-system-row {
    display: grid;
    grid-template-columns: 68px 40px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    width: 100%;
    min-height: 108px;
    padding: .8rem 1.2rem .8rem .8rem;
    border: 1px solid #dad5ca;
    border-radius: .7rem;
    background: #fff;
    color: #101217;
    cursor: pointer;
    text-align: left;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.shop-system-row:hover { border-color: #d2a41b; box-shadow: 0 11px 22px rgba(23, 21, 16, .08); transform: translateY(-2px); }
.shop-system-row.is-active { border-color: #d7a617; box-shadow: 0 12px 26px rgba(167, 125, 5, .14); }
.shop-system-row__swatch { display: block; width: 68px; aspect-ratio: 1; border-radius: .45rem; background-position: center; background-size: cover; }
.shop-system-row__swatch--solid { background-image: linear-gradient(135deg, rgba(255,255,255,.2), transparent), url("assets/textures/solid/Charcoal.jpeg"); }
.shop-system-row__swatch--flake { background-image: url("assets/textures/flake/Tuxedo.png"); }
.shop-system-row__swatch--metallic { background-image: url("assets/textures/metalic/Brass.png"); }
.shop-system-row__number { color: #b58a10; font-family: var(--display); font-size: 1.35rem; font-weight: 900; }
.shop-system-row__copy { display: grid; gap: .35rem; }.shop-system-row__copy strong { font-family: var(--display); font-size: 1.1rem; }.shop-system-row__copy small { color: #68707a; font-size: .83rem; }
.shop-system-row__meta { display: inline-flex; gap: .75rem; align-items: center; color: #72550a; font-size: .7rem; font-weight: 900; letter-spacing: .05em; white-space: nowrap; }.shop-system-row__meta i { font-size: .8rem; transition: transform .2s ease; }.shop-system-row.is-active .shop-system-row__meta i { transform: rotate(90deg); }

.shop-configurator { display: grid; grid-template-columns: minmax(265px, .82fr) minmax(360px, 1.18fr); gap: 1.2rem; padding: 1.2rem; border: 1px solid #d8d3c9; border-radius: .8rem; background: #fff; box-shadow: 0 15px 34px rgba(28, 25, 18, .08); }
.shop-configurator .shop-product-preview { min-height: 100%; padding: 1.2rem; }.shop-configurator .shop-product-copy h2 { font-size: 1.45rem; }.shop-configurator .shop-bucket,.shop-configurator .shop-flake-pouch { max-width: 330px; }.shop-configurator .shop-flake-pouch { max-width: 260px; }.shop-configurator .shop-controls { display: flex; flex-direction: column; min-height: 100%; padding: 1.5rem; border-top: 4px solid #e8ba22; box-shadow: none; }
.shop-configurator .shop-textures { grid-template-columns: repeat(4, 1fr); flex: 1; max-height: 330px; }.shop-configurator .shop-textures button { font-size: .66rem; }

.shop-purchase-panel { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; align-items: end; margin-top: 1.25rem; padding: 1rem; border: 1px solid #e2ddd3; border-radius: .6rem; background: #fbfaf7; }
.shop-purchase-panel > label,.shop-quantity { display: grid; gap: .42rem; color: #505a65; font-size: .72rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }.shop-purchase-panel select { min-height: 43px; padding: .65rem; border: 1px solid #c6c0b5; border-radius: .35rem; background: #fff; color: #1b2025; font: 700 .82rem var(--sans); }
.shop-quantity > div { display: grid; grid-template-columns: 38px 1fr 38px; height: 43px; overflow: hidden; border: 1px solid #c6c0b5; border-radius: .35rem; background: #fff; }.shop-quantity button { border: 0; background: #f1eee7; color: #1a1d20; cursor: pointer; font-size: 1.2rem; }.shop-quantity button:hover { background: #e6c35e; }.shop-quantity output { display: grid; place-items: center; color: #13171a; font-size: .9rem; }
.shop-purchase-panel__total { display: flex; justify-content: space-between; grid-column: 1 / -1; padding-top: .85rem; border-top: 1px solid #e5e0d8; color: #5d6570; font-size: .82rem; }.shop-purchase-panel__total strong { color: #111923; font-family: var(--display); font-size: 1.2rem; }.shop-purchase-panel .btn { grid-column: 1 / -1; width: 100%; min-height: 50px; }.shop-purchase-panel .shop-checkout-note { grid-column: 1 / -1; margin: 0; }

.shop-cart-summary { position: sticky; top: 1.25rem; overflow: hidden; border: 1px solid #292b2e; border-radius: .8rem; background: #151618; box-shadow: 0 18px 34px rgba(0, 0, 0, .16); color: #fff; }.shop-cart-summary__top { display: flex; justify-content: space-between; align-items: center; padding: 1.05rem 1.15rem; border-bottom: 1px solid #383a3d; font-size: .77rem; font-weight: 900; letter-spacing: .08em; }.shop-cart-summary__top i { margin-right: .4rem; color: var(--gold); }.shop-cart-summary__top strong { padding: .35rem .5rem; border-radius: 99px; background: #303237; color: #f8cd36; font-size: .65rem; }
.shop-cart-summary__items { display: grid; gap: .85rem; max-height: 300px; padding: 1rem 1.15rem; overflow-y: auto; }.shop-cart-summary__items > p { color: #aeb1b6; font-size: .84rem; line-height: 1.55; }.shop-cart-summary__items article { display: grid; grid-template-columns: 45px minmax(0, 1fr) auto; gap: .65rem; align-items: start; }.shop-cart-summary__texture { width: 45px; aspect-ratio: 1; border-radius: .3rem; background-position: center; background-size: cover; }.shop-cart-summary__items strong { display: block; font-size: .76rem; line-height: 1.35; }.shop-cart-summary__items small { display: block; margin-top: .15rem; color: #adb2b9; font-size: .66rem; }.shop-cart-summary__items button { margin-top: .35rem; padding: 0; border: 0; background: none; color: #f0c343; cursor: pointer; font: 800 .62rem var(--sans); }.shop-cart-summary__items b { color: #f4f4f5; font-size: .75rem; white-space: nowrap; }
.shop-cart-summary__total { display: flex; justify-content: space-between; padding: 1rem 1.15rem; border-top: 1px solid #383a3d; color: #c5c8cd; font-size: .82rem; }.shop-cart-summary__total strong { color: var(--gold); font-family: var(--display); font-size: 1.2rem; }.shop-cart-summary__checkout { width: calc(100% - 2.3rem); min-height: 46px; margin: 0 1.15rem 1.15rem; border: 0; border-radius: .35rem; background: var(--gold); color: #171204; cursor: pointer; font: 900 .75rem var(--sans); letter-spacing: .06em; }.shop-cart-summary__checkout:disabled { background: #42454b; color: #90949a; cursor: not-allowed; }.shop-cart-summary__checkout i { margin-left: .35rem; }

@media (max-width: 980px) { .shop-catalog__layout { grid-template-columns: 1fr; }.shop-cart-summary { position: static; }.shop-configurator { grid-template-columns: 1fr; }.shop-configurator .shop-product-preview { max-width: 560px; margin: 0 auto; }.shop-cart-summary__items { max-height: 230px; } }
@media (max-width: 680px) { .shop-catalog__heading { display: grid; gap: 1rem; }.shop-system-row { grid-template-columns: 54px 30px minmax(0, 1fr); gap: .7rem; min-height: 94px; padding: .65rem; }.shop-system-row__swatch { width: 54px; }.shop-system-row__meta { grid-column: 3; justify-content: space-between; }.shop-system-row__number { font-size: 1.05rem; }.shop-configurator { padding: .7rem; }.shop-configurator .shop-controls { padding: 1.1rem; }.shop-configurator .shop-textures { grid-template-columns: repeat(3, 1fr); }.shop-purchase-panel { grid-template-columns: 1fr; }.shop-purchase-panel__total,.shop-purchase-panel .btn,.shop-purchase-panel .shop-checkout-note { grid-column: auto; } }

/* Acabado continuo: sin mosaicos ni bordes claros, con reflejo de resina. */
.visualizer-floor {
    overflow: hidden;
    isolation: isolate;
    border: 0 !important;
    background-color: #30343a;
    background-position: left top;
    background-repeat: repeat;
    background-size: 720px auto;
    box-shadow: 0 -15px 28px rgba(0, 0, 0, .38), inset 0 0 0 2px rgba(12, 15, 18, .28) !important;
}

.visualizer-floor::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: '';
    pointer-events: none;
    background: linear-gradient(118deg, rgba(255,255,255,.19) 0%, rgba(255,255,255,.05) 20%, transparent 39%, rgba(255,255,255,.1) 58%, transparent 75%), linear-gradient(180deg, rgba(0,0,0,.17), transparent 32%, rgba(255,255,255,.05) 66%, rgba(0,0,0,.13));
    mix-blend-mode: screen;
}

.visualizer-floor::before {
    position: absolute;
    z-index: 2;
    inset: 0;
    content: '';
    pointer-events: none;
    background: linear-gradient(118deg, transparent 0 18%, rgba(255,255,255,.5) 30%, rgba(255,255,255,.12) 37%, transparent 47%), linear-gradient(112deg, transparent 42%, rgba(255,255,255,.25) 52%, transparent 62%), radial-gradient(ellipse at 54% 13%, rgba(255,255,255,.34), transparent 42%);
    background-size: 150% 150%, 170% 170%, 100% 100%;
    mix-blend-mode: screen;
    opacity: .82;
    animation: resinLiquidGlow 9s ease-in-out infinite alternate;
}

.visualizer-floor {
    filter: brightness(1.12) contrast(1.04) saturate(1.08);
    box-shadow: 0 -17px 30px rgba(0, 0, 0, .4), inset 0 2px 2px rgba(255,255,255,.72), inset 0 -45px 60px rgba(0,0,0,.1) !important;
}

@keyframes resinLiquidGlow {
    0% { background-position: 0% 0%, 100% 100%, center; opacity: .5; }
    50% { background-position: 55% 28%, 45% 55%, center; opacity: .88; }
    100% { background-position: 100% 65%, 0% 20%, center; opacity: .58; }
}

@media (prefers-reduced-motion: reduce) {
    .visualizer-floor::before { animation: none; }
}

.swatch {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.service-choice { display: flex; flex-direction: column; }
.service-choice__link { display: inline-flex; align-items: center; gap: .5rem; width: max-content; margin-top: auto; padding-top: 1.5rem; color: #76580e; font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.service-choice__link:hover { color: #171717; }

/* Tarjetas de selección de sistemas */
.service-choice {
    position: relative;
    min-height: 410px;
    overflow: hidden;
    border-color: #ded9ca;
    box-shadow: 0 12px 24px rgba(26, 24, 16, .06);
}

.service-choice::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 142px;
    background: #555;
    background-position: center;
    background-size: cover;
    content: '';
    transition: transform .55s ease;
}

.service-choice::after {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: .38rem .6rem;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 999px;
    background: rgba(8, 11, 13, .55);
    color: #fff;
    content: 'PREMIUM SYSTEM';
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .1em;
}

.service-choice--flake::before { background-image: url("assets/textures/flake/Tuxedo.png"); }
.service-choice--solid::before { background-image: url("assets/textures/solid/Charcoal.jpeg"); }
.service-choice--metallic::before { background-image: url("assets/textures/metalic/Gun Metal.png"); }
.service-choice:hover::before { transform: scale(1.1); }

.service-choice .icono {
    position: relative;
    z-index: 1;
    width: 54px;
    height: 54px;
    margin-top: 103px;
    margin-bottom: 1.25rem;
    border: 4px solid #fff;
    background: var(--gold);
    box-shadow: 0 7px 15px rgba(0,0,0,.15);
    color: #201b09;
}

.service-choice h3 { font-size: 1.35rem; }
.service-choice p { max-width: 310px; }
.service-choice__link {
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 1.4rem;
    padding: .85rem 1rem;
    border: 1px solid #e0c353;
    border-radius: .35rem;
    background: #fff8dc;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.service-choice__link:hover {
    background: var(--gold);
    color: #171204;
    transform: translateX(4px);
}

/* Páginas de detalle de cada sistema */
.system-hero { --system-background: url("assets/textures/flake/Tuxedo.png"); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 3rem; align-items: end; min-height: 675px; padding: 180px max(5%, calc((100% - 1180px) / 2)) 5rem; overflow: hidden; background: linear-gradient(90deg, rgba(4, 8, 12, .9) 0%, rgba(5, 9, 13, .67) 47%, rgba(5, 9, 13, .25)), var(--system-background); background-position: center; background-size: cover; color: #fff; }
.system-hero::after { position: absolute; inset: 0; background: repeating-linear-gradient(12deg, transparent 0 20px, rgba(255,255,255,.035) 21px 22px, transparent 23px 47px); content: ''; pointer-events: none; }
.system-hero__content, .system-hero__quote { position: relative; z-index: 1; }
.system-hero__content > p:first-child { color: var(--gold); font-size: .76rem; font-weight: 800; letter-spacing: .14em; }
.system-hero h1 { max-width: 660px; margin: .55rem 0; font-family: var(--display); font-size: clamp(3rem, 6.5vw, 6rem); letter-spacing: -.07em; line-height: .94; text-transform: uppercase; }
.system-hero h2 { max-width: 550px; color: #f4f2eb; font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 2.2rem); line-height: 1.15; text-transform: uppercase; }
.system-hero__content > p:not(:first-child) { max-width: 520px; margin-top: 1.1rem; color: #eceae6; line-height: 1.6; }
.system-hero__benefits { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.system-hero__benefits span { display: grid; gap: .35rem; min-width: 86px; color: #f5f3ee; font-size: .7rem; font-weight: 800; text-align: center; text-transform: uppercase; }
.system-hero__benefits i { display: grid; width: 38px; height: 38px; margin: auto; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; place-items: center; color: var(--gold); font-size: .9rem; }
.system-hero__quote { padding: 1.5rem; border-radius: .6rem; background: #07192f; box-shadow: 0 14px 30px rgba(0,0,0,.3); }
.system-hero__quote span { display: block; color: var(--gold); font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.system-hero__quote strong { display: block; margin: .55rem 0 .8rem; color: #fff; font-family: var(--display); font-size: 1.35rem; line-height: 1.1; text-transform: uppercase; }
.system-hero__quote p { color: #dee4eb; font-size: .8rem; line-height: 1.8; }
.system-hero__quote a { display: block; margin-top: 1rem; padding: .85rem; border-radius: .28rem; background: var(--gold); color: #171204; font-size: .78rem; font-weight: 900; text-align: center; text-decoration: none; text-transform: uppercase; }
.system-details { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3.5rem); padding: clamp(4rem, 8vw, 7rem) max(5%, calc((100% - 1100px) / 2)); background: #fff; }
.system-details h2 { margin: .6rem 0 1rem; color: #0f1724; font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.5rem); letter-spacing: -.04em; }
.system-details__intro { max-width: 670px; }.system-details__intro > p:not(.etiqueta) { max-width: 510px; color: #535b65; line-height: 1.7; }
.system-use-cases { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }.system-use-cases span { display: flex; align-items: center; gap: .4rem; color: #1b2734; font-size: .78rem; font-weight: 800; }.system-use-cases i { color: #987411; }
.system-process { padding: 1.8rem; border-radius: .55rem; background: #f4f2ec; }.system-process ol { display: grid; gap: 1rem; margin-top: 1.4rem; list-style: none; }.system-process li { display: grid; grid-template-columns: 31px 1fr; gap: .75rem; align-items: start; }.system-process li b { display: grid; width: 28px; height: 28px; border-radius: 50%; place-items: center; background: #0b1b31; color: #fff; font-size: .75rem; }.system-process li strong,.system-process li small { display: block; }.system-process li strong { color: #142033; font-size: .86rem; }.system-process li small { margin-top: .25rem; color: #626970; font-size: .76rem; line-height: 1.5; }
.system-process__lead {
    margin-top: -.35rem;
    color: #626970;
    font-size: .83rem;
    line-height: 1.5;
}

.system-diagram {
    margin: 1.35rem 0 0;
    overflow: hidden;
    border: 1px solid #dedbd3;
    border-radius: .5rem;
    background: #fff;
    box-shadow: 0 12px 28px rgba(23, 31, 42, .1);
}

.system-diagram-gallery {
    display: block;
    margin-top: 1.35rem;
}

.system-diagram-gallery .system-diagram {
    margin: 0;
}

.system-diagram-carousel__viewport {
    overflow: hidden;
}

.system-diagram-carousel__slide:not([hidden]) {
    animation: system-slide-in .28s ease both;
}

.system-diagram-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    margin-top: 1rem;
}

.system-diagram-carousel__controls button {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .72rem 1rem;
    border: 1px solid #c9b27a;
    border-radius: .3rem;
    background: #fff;
    color: #18253a;
    font-family: inherit;
    font-size: .73rem;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.system-diagram-carousel__controls button:hover {
    background: #a38233;
    color: #fff;
    transform: translateY(-2px);
}

.system-diagram-carousel__controls span {
    min-width: 3.5rem;
    color: #6b737d;
    font-size: .75rem;
    font-weight: 800;
    text-align: center;
}

@keyframes system-slide-in {
    from { opacity: 0; transform: translateX(14px); }
    to { opacity: 1; transform: translateX(0); }
}

.system-diagram img {
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
}

.system-diagram__composition {
    position: relative;
    display: block;
    padding: .65rem .65rem .65rem 0;
    background: #fff;
}

.system-diagram__composition > img {
    position: relative;
    z-index: 1;
    width: 64.5%;
}

.system-layer-indicators {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.system-layer-indicator {
    position: absolute;
    inset: 0;
}

.system-layer-indicator__dot {
    position: absolute;
    z-index: 3;
    top: var(--anchor-y);
    left: var(--anchor-x);
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 50%;
    background: #b89a5b;
    box-shadow: 0 0 0 1px rgba(133, 100, 33, .24);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.system-layer-indicator__line {
    position: absolute;
    z-index: 2;
    top: var(--anchor-y);
    left: var(--anchor-x);
    width: calc(var(--card-x) - var(--anchor-x));
    height: calc(var(--card-y) - var(--anchor-y));
    min-height: 2px;
    background:
        linear-gradient(#b89a5b, #b89a5b) 0 0 / 42% 2px no-repeat,
        linear-gradient(#b89a5b, #b89a5b) 42% 0 / 2px 100% no-repeat,
        linear-gradient(#b89a5b, #b89a5b) 42% 100% / 58% 2px no-repeat;
}

.system-layer-indicator__card {
    position: absolute;
    z-index: 4;
    top: var(--card-y);
    right: 0;
    left: var(--card-x);
    padding: .55rem .65rem;
    border-left: 3px solid #b89a5b;
    border-radius: .25rem;
    background: #f0ede5;
    box-shadow: 0 2px 5px rgba(25, 31, 39, .08);
    transform: translateY(-50%);
    pointer-events: auto;
}

.system-layer-indicator__card strong,
.system-layer-indicator__card small {
    display: block;
}

.system-layer-indicator__card strong {
    color: #111b2b;
    font-family: Georgia, serif;
    font-size: clamp(.64rem, 1.1vw, .78rem);
    letter-spacing: .025em;
    line-height: 1.05;
    text-transform: uppercase;
}

.system-layer-indicator__card small {
    margin-top: .18rem;
    color: #394250;
    font-size: clamp(.57rem, .9vw, .67rem);
    line-height: 1.28;
}

.system-diagram__callouts {
    position: relative;
    z-index: 4;
    display: block;
    align-self: stretch;
    min-height: 100%;
    margin: 0;
    list-style: none;
}

.system-diagram__callouts li {
    position: absolute;
    display: block;
    top: var(--callout-position);
    right: 0;
    left: 0;
    grid-template-columns: none;
    gap: 0;
    align-items: initial;
    transform: translateY(-50%);
}

.system-diagram__callouts li::before {
    display: none;
}

.system-diagram__callouts li::after {
    display: none;
}

.system-diagram__callouts span {
    display: block;
    padding: .55rem .65rem;
    border-left: 3px solid #b89a5b;
    border-radius: .25rem;
    background: #f0ede5;
    box-shadow: 0 2px 5px rgba(25, 31, 39, .08);
}

.system-diagram__callouts strong,
.system-diagram__callouts small {
    display: block;
}

.system-diagram__callouts strong {
    color: #111b2b;
    font-family: Georgia, serif;
    font-size: clamp(.64rem, 1.1vw, .78rem);
    letter-spacing: .025em;
    line-height: 1.05;
    text-transform: uppercase;
}

.system-diagram__callouts small {
    margin-top: .18rem;
    color: #394250;
    font-size: clamp(.57rem, .9vw, .67rem);
    line-height: 1.28;
}

.system-diagram figcaption {
    padding: .75rem 1rem;
    border-top: 1px solid #e8e4da;
    color: #69717a;
    font-size: .74rem;
    line-height: 1.45;
}

.system-diagram figcaption strong {
    display: block;
    margin-bottom: .16rem;
    color: #172439;
    font-size: .77rem;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .system-diagram__composition {
        padding: .65rem;
    }

    .system-diagram__composition > img {
        width: 100%;
    }

    .system-layer-indicators {
        position: static;
        display: grid;
        gap: .5rem;
        margin-top: .75rem;
    }

    .system-layer-indicator {
        position: static;
    }

    .system-layer-indicator__dot,
    .system-layer-indicator__line {
        display: none;
    }

    .system-layer-indicator__card {
        position: static;
        transform: none;
    }
}

.system-diagram__layers {
    padding: 1rem;
    border-top: 1px solid #e8e4da;
    background: #faf9f6;
}

.system-diagram__layers > p {
    margin-bottom: .7rem;
    color: #967013;
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.system-diagram__layers ol {
    display: grid;
    gap: .65rem;
    margin: 0;
    list-style: none;
}

.system-diagram__layers li {
    display: grid;
    grid-template-columns: 1.55rem 1fr;
    gap: .55rem;
    align-items: start;
}

.system-diagram__layers li b {
    display: grid;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    place-items: center;
    background: #9d7d31;
    color: #fff;
    font-size: .65rem;
}

.system-diagram__layers li strong,
.system-diagram__layers li small {
    display: block;
}

.system-diagram__layers li strong {
    color: #182337;
    font-size: .72rem;
    text-transform: uppercase;
}

.system-diagram__layers li small {
    margin-top: .1rem;
    color: #606975;
    font-size: .7rem;
    line-height: 1.35;
}

.system-layer-stack {
    display: grid;
    gap: .7rem;
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid #dedbd3;
    border-radius: .45rem;
    background: #fff;
}

.system-layer {
    display: grid;
    grid-template-columns: 44% 1fr;
    gap: 1rem;
    align-items: center;
}

.system-layer__slab {
    position: relative;
    display: block;
    height: 32px;
    border: 1px solid rgba(9, 20, 33, .18);
    border-radius: .25rem;
    background-position: center;
    background-size: cover;
    box-shadow: 0 7px 0 rgba(15, 25, 35, .18), 0 11px 15px rgba(9, 19, 29, .15);
    transform: perspective(160px) rotateX(32deg) rotateZ(-1deg);
    transform-origin: center bottom;
}

.system-layer__slab::after {
    position: absolute;
    right: 5%;
    bottom: -7px;
    left: 5%;
    height: 7px;
    border-radius: 0 0 .18rem .18rem;
    background: rgba(13, 25, 37, .24);
    content: '';
}

.system-layer div {
    min-width: 0;
}

.system-layer strong,
.system-layer small {
    display: block;
}

.system-layer strong {
    color: #132035;
    font-size: .78rem;
    text-transform: uppercase;
}

.system-layer small {
    margin-top: .18rem;
    color: #67707a;
    font-size: .68rem;
    line-height: 1.35;
}
.system-colors { padding: 0 max(5%, calc((100% - 1100px) / 2)) clamp(4rem, 8vw, 7rem); background: #fff; }.system-colors .seccion-titulo { width: 100%; text-align: left; }
.system-color-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }.system-color span { display: block; aspect-ratio: 1; border-radius: .35rem; background-color: #e8e8e8; background-position: center; background-repeat: no-repeat; background-size: cover; box-shadow: 0 3px 8px rgba(0,0,0,.13); }.system-color strong { display: block; margin-top: .55rem; color: #1a2533; font-size: .75rem; text-align: center; }
.system-detail-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: clamp(3.5rem, 6vw, 5rem); padding: 1.8rem 2rem; border-radius: .5rem; background: #08192f; color: #fff; }.system-detail-cta h2 { font-family: var(--display); font-size: clamp(1.2rem, 2.5vw, 2rem); }.system-detail-cta p { margin-top: .3rem; color: #d6dce5; }
@media (max-width: 850px) { .system-hero { grid-template-columns: 1fr; min-height: 720px; }.system-hero__quote { max-width: 390px; }.system-details { grid-template-columns: 1fr; }.system-color-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .system-hero { padding-top: 135px; padding-bottom: 2rem; }.system-hero__benefits { gap: .7rem; }.system-hero__benefits span { min-width: 62px; font-size: .58rem; }.system-details { padding: 3.5rem 5%; }.system-process { padding: 1.3rem; }.system-detail-cta { align-items: flex-start; flex-direction: column; padding: 1.5rem; }.system-detail-cta .btn { width: 100%; }.system-color-grid { gap: .7rem; } }
.chatbot {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 100;
}

.chatbot-toggle {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--gold);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
    color: var(--ink);
    cursor: pointer;
    font: 800 .8rem var(--sans);
    transition: transform .2s ease;
}

.chatbot-toggle:hover { transform: translateY(-3px); }
.chatbot-toggle i { font-size: 1.1rem; }
.chatbot-panel { position: absolute; right: 0; bottom: 4.1rem; display: grid; grid-template-rows: auto 1fr auto; width: min(350px, calc(100vw - 2rem)); height: 400px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: .8rem; background: #fff; box-shadow: 0 20px 45px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transform: translateY(12px) scale(.96); transform-origin: bottom right; transition: .25s ease; }
.chatbot.is-open .chatbot-panel { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.chatbot-panel header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; background: #111214; color: #fff; font-weight: 800; }
.chatbot-panel header i { color: var(--gold); }
.chatbot-close { border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 1.5rem; line-height: 1; }
.chatbot-messages { display: flex; flex-direction: column; gap: .65rem; padding: 1rem; overflow-y: auto; background: #f5f5f3; }
.chat-message { max-width: 82%; padding: .65rem .75rem; border-radius: .55rem; font-size: .85rem; line-height: 1.4; }
.chat-message--bot { align-self: flex-start; background: #e4e4e1; color: #202124; }
.chat-message--user { align-self: flex-end; background: var(--gold); color: #201904; }
.chatbot-form { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid #e2e2e2; }
.chatbot-input { min-width: 0; flex: 1; padding: .65rem; border: 1px solid #d1d1d1; border-radius: .35rem; outline: none; font: inherit; }
.chatbot-form button { width: 42px; border: 0; border-radius: .35rem; background: var(--gold); color: var(--ink); cursor: pointer; }

/* Mapa de zonas atendidas */
.service-area { width: min(1400px, 92%); margin: clamp(3rem, 7vw, 6rem) auto; overflow: hidden; border-radius: .85rem; box-shadow: var(--shadow); }
.service-area__heading { padding: 1.05rem 1.35rem; background: #0c0d0f; color: #fff; font-family: var(--display); font-weight: 800; letter-spacing: .02em; }
.service-area__heading i { margin-right: .55rem; color: var(--gold); }
.service-area__body { display: grid; grid-template-columns: minmax(250px, .55fr) 1fr; min-height: 570px; }
.service-area__cities { background: #fff; }
.service-area-city { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 58px; padding: .85rem 1.35rem; border: 0; border-bottom: 1px solid #dedede; background: #fff; color: #202124; cursor: pointer; font: 600 1rem var(--sans); text-align: left; transition: background .2s ease, color .2s ease; }
.service-area-city:hover, .service-area-city.is-active { background: #f0f0f0; }
.service-area-city:not(.is-active)::before { width: 9px; height: 9px; margin-right: .65rem; border-radius: 50%; background: var(--gold); content: ''; }
.service-area-city i { margin-left: auto; color: #777; font-size: .75rem; }
.service-area-city span { display: grid; gap: .2rem; }
.service-area-city small { color: #6c6c6c; font-size: .76rem; font-weight: 500; }
#service-map { min-height: 570px; z-index: 1; }

@media (max-width: 720px) {
    .chatbot { right: 1rem; bottom: 1rem; }
    .chatbot-toggle span { display: none; }
    .chatbot-toggle { width: 55px; height: 55px; justify-content: center; padding: 0; }
    .service-area__body { grid-template-columns: 1fr; }
    .service-area__cities { max-height: 330px; overflow-y: auto; }
    #service-map { min-height: 390px; }
}

/* Navegación responsive */
.menu-toggle {
    display: none;
    align-items: center;
    gap: .5rem;
    padding: .6rem .7rem;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: .3rem;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font: 700 .78rem var(--sans);
}

@media (max-width: 860px) {
    .navbar-container {
        position: relative;
    }

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

    .menu-toggle.is-open i::before {
        content: '\f00d';
    }

    .menu {
        position: absolute;
        top: calc(100% + 1px);
        right: 0;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .4rem 4%;
        border-bottom: 1px solid var(--line);
        background: #111214;
        box-shadow: 0 14px 24px rgba(0,0,0,.25);
    }

    .menu.is-open {
        display: flex;
        animation: menuReveal .2s ease both;
    }

    .menu li {
        width: 100%;
    }

    .menu a {
        justify-content: space-between;
        padding: .85rem 0;
    }

    .menu > li > a::after {
        bottom: .55rem;
    }

    .dropdown {
        position: static;
        display: none;
        min-width: 0;
        margin: 0 0 .5rem;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .has-dropdown .dropdown {
        display: block;
    }

    .dropdown li a {
        padding: .65rem .8rem;
    }
}

@keyframes menuReveal {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}