@import url('kushim-v2.css');

/* ============================================================
   KUSHIM HOME · ACCESO AL COTIZADOR PERSONALIZADO
   Archivo aditivo: conserva kushim-v2.css intacto.
   ============================================================ */

.v23-hero-quote-link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1.15rem;
    color: rgba(238, 244, 242, .66);
    font-family: 'Sora', sans-serif;
    font-size: .82rem;
    text-decoration: none;
    transition: color .25s ease, transform .25s ease;
}
.v23-hero-quote-link strong {
    color: #eef4f2;
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 214, 162, .34);
    padding-bottom: 2px;
    transition: border-color .25s ease, color .25s ease;
}
.v23-hero-quote-link i {
    color: #00d6a2;
    font-style: normal;
    transition: transform .25s ease;
}
.v23-hero-quote-link:hover { color: #eef4f2; transform: translateX(2px); }
.v23-hero-quote-link:hover strong { color: #00d6a2; border-color: #00d6a2; }
.v23-hero-quote-link:hover i { transform: translateX(4px); }

.v23-custom-quote {
    position: relative;
    overflow: hidden;
    margin-top: 2rem;
    padding: clamp(1.6rem, 3vw, 2.7rem);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 28px;
    background:
        radial-gradient(circle at 82% 18%, rgba(168,147,255,.11), transparent 32%),
        radial-gradient(circle at 10% 88%, rgba(0,214,162,.10), transparent 30%),
        linear-gradient(145deg, rgba(12,18,20,.96), rgba(8,12,14,.985));
    box-shadow: 0 28px 90px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.035);
    isolation: isolate;
}
.v23-custom-ambient {
    position: absolute;
    inset: auto -12% -46% 38%;
    height: 70%;
    background: radial-gradient(ellipse, rgba(0,214,162,.16), transparent 65%);
    filter: blur(30px);
    pointer-events: none;
    z-index: -1;
}
.v23-custom-grid {
    position: absolute;
    inset: 0;
    opacity: .2;
    pointer-events: none;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 88%);
}
.v23-custom-head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
    gap: 2rem;
    align-items: end;
    margin-bottom: 1.8rem;
}
.v23-custom-kicker {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .75rem;
    font: 600 .72rem/1 'Chivo Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: #00d6a2;
}
.v23-custom-kicker i {
    width: 7px; height: 7px; border-radius: 50%;
    background: #00d6a2;
    box-shadow: 0 0 14px rgba(0,214,162,.8);
}
.v23-custom-head h3 {
    margin: 0;
    color: #f3f7f5;
    font-family: 'Chivo', sans-serif;
    font-size: clamp(1.85rem, 3.5vw, 3.25rem);
    line-height: .98;
    letter-spacing: -.045em;
}
.v23-custom-head h3 span {
    color: transparent;
    background: linear-gradient(110deg, #00d6a2, #5edfff 62%, #a893ff);
    -webkit-background-clip: text;
    background-clip: text;
}
.v23-custom-head > p {
    margin: 0;
    color: rgba(232,239,236,.67);
    font-family: 'Sora', sans-serif;
    font-size: .94rem;
    line-height: 1.75;
}
.v23-custom-paths {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1rem;
}
.v23-custom-path {
    position: relative;
    min-height: 390px;
    display: flex;
    flex-direction: column;
    padding: clamp(1.25rem, 2.5vw, 1.8rem);
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 21px;
    background: rgba(255,255,255,.025);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.v23-custom-path::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
}
.v23-custom-path-build::before { background: radial-gradient(circle at 18% 5%, rgba(0,214,162,.14), transparent 38%); }
.v23-custom-path-guide::before { background: radial-gradient(circle at 82% 5%, rgba(168,147,255,.16), transparent 38%); }
.v23-custom-path:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.045);
    box-shadow: 0 22px 55px rgba(0,0,0,.22);
}
.v23-custom-path:hover::before { opacity: 1; }
.v23-path-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}
.v23-path-number {
    font: 500 .72rem/1 'Chivo Mono', monospace;
    letter-spacing: .08em;
    color: rgba(238,244,242,.36);
}
.v23-path-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .68rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(0,0,0,.16);
    color: rgba(238,244,242,.68);
    font: 600 .65rem/1 'Sora', sans-serif;
    text-transform: uppercase;
    letter-spacing: .075em;
}
.v23-path-status i { width: 6px; height: 6px; border-radius: 50%; background: #00d6a2; box-shadow: 0 0 9px rgba(0,214,162,.65); }
.v23-custom-path-guide .v23-path-status i { background: #a893ff; box-shadow: 0 0 9px rgba(168,147,255,.7); }
.v23-path-icon {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    margin-bottom: 1.05rem;
    border-radius: 14px;
    background: rgba(0,214,162,.075);
    border: 1px solid rgba(0,214,162,.18);
}
.v23-custom-path-guide .v23-path-icon { background: rgba(168,147,255,.075); border-color: rgba(168,147,255,.2); }
.v23-path-icon svg { width: 24px; height: 24px; fill: none; stroke: #00d6a2; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.v23-custom-path-guide .v23-path-icon svg { stroke: #a893ff; }
.v23-custom-path h4 {
    margin: 0 0 .6rem;
    color: #f3f7f5;
    font: 700 clamp(1.25rem,2vw,1.55rem)/1.08 'Chivo', sans-serif;
    letter-spacing: -.025em;
}
.v23-custom-path > p {
    margin: 0 0 1.25rem;
    color: rgba(232,239,236,.62);
    font: 400 .86rem/1.65 'Sora', sans-serif;
}
.v23-build-preview {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .55rem;
    margin: auto 0 1.2rem;
}
.v23-build-preview span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .62rem .72rem;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    background: rgba(0,0,0,.15);
}
.v23-build-preview b { color: rgba(238,244,242,.72); font: 500 .71rem/1 'Sora', sans-serif; }
.v23-build-preview i { color: #00d6a2; font-style: normal; font: 700 .78rem/1 'Chivo Mono', monospace; }
.v23-guide-preview {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: .8rem;
    align-items: start;
    margin: auto 0 1.2rem;
    padding: .8rem;
    border: 1px solid rgba(168,147,255,.15);
    border-radius: 12px;
    background: rgba(168,147,255,.045);
}
.v23-guide-avatar {
    width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: 11px;
    color: #0b0d0e;
    background: linear-gradient(135deg,#a893ff,#67dcff);
    font: 800 1rem/1 'Chivo', sans-serif;
}
.v23-guide-preview small { display:block; margin: .08rem 0 .35rem; color: #a893ff; font: 600 .59rem/1 'Chivo Mono', monospace; letter-spacing:.06em; }
.v23-guide-preview p { margin:0; color: rgba(238,244,242,.7); font: 400 .72rem/1.5 'Sora', sans-serif; }
.v23-path-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.075);
    color: #f3f7f5;
    font: 600 .82rem/1 'Sora', sans-serif;
}
.v23-path-cta span { color:#00d6a2; transition: transform .25s ease; }
.v23-custom-path-guide .v23-path-cta span { color:#a893ff; }
.v23-custom-path:hover .v23-path-cta span { transform: translateX(5px); }
.v23-custom-foot {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem 1.3rem;
    margin-top: 1.25rem;
    color: rgba(232,239,236,.48);
    font: 500 .69rem/1.3 'Sora', sans-serif;
}
.v23-custom-foot span { display:inline-flex; align-items:center; gap:.38rem; }
.v23-custom-foot i { color:#00d6a2; font-style:normal; }

[data-theme="light"] .v23-hero-quote-link { color: rgba(18,27,30,.62); }
[data-theme="light"] .v23-hero-quote-link strong { color:#152024; }
[data-theme="light"] .v23-custom-quote {
    border-color: rgba(12,22,25,.10);
    background:
        radial-gradient(circle at 82% 18%, rgba(121,98,224,.09), transparent 32%),
        radial-gradient(circle at 10% 88%, rgba(0,166,127,.08), transparent 30%),
        linear-gradient(145deg,#f8faf8,#eef3f0);
    box-shadow: 0 24px 70px rgba(28,48,44,.10), inset 0 1px 0 rgba(255,255,255,.8);
}
[data-theme="light"] .v23-custom-grid { opacity:.28; background-image:linear-gradient(rgba(21,32,36,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(21,32,36,.045) 1px,transparent 1px); }
[data-theme="light"] .v23-custom-head h3,
[data-theme="light"] .v23-custom-path h4,
[data-theme="light"] .v23-path-cta { color:#122024; }
[data-theme="light"] .v23-custom-head > p,
[data-theme="light"] .v23-custom-path > p { color:rgba(20,34,37,.66); }
[data-theme="light"] .v23-custom-path { border-color:rgba(20,34,37,.10); background:rgba(255,255,255,.55); }
[data-theme="light"] .v23-custom-path:hover { border-color:rgba(20,34,37,.18); background:rgba(255,255,255,.8); }
[data-theme="light"] .v23-path-number { color:rgba(20,34,37,.35); }
[data-theme="light"] .v23-path-status { color:rgba(20,34,37,.64); border-color:rgba(20,34,37,.08); background:rgba(255,255,255,.6); }
[data-theme="light"] .v23-build-preview span { border-color:rgba(20,34,37,.08); background:rgba(255,255,255,.52); }
[data-theme="light"] .v23-build-preview b,
[data-theme="light"] .v23-guide-preview p { color:rgba(20,34,37,.68); }
[data-theme="light"] .v23-path-cta { border-color:rgba(20,34,37,.09); }
[data-theme="light"] .v23-custom-foot { color:rgba(20,34,37,.48); }

@media (max-width: 900px) {
    .v23-custom-head { grid-template-columns:1fr; gap:1rem; align-items:start; }
    .v23-custom-paths { grid-template-columns:1fr; }
    .v23-custom-path { min-height:0; }
}
@media (max-width: 640px) {
    .v23-hero-quote-link { flex-wrap:wrap; row-gap:.3rem; }
    .v23-custom-quote { margin-top:1.35rem; padding:1.2rem; border-radius:20px; }
    .v23-custom-head h3 { font-size:1.8rem; line-height:1.04; }
    .v23-build-preview { grid-template-columns:1fr 1fr; }
    .v23-custom-foot { justify-content:flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .v23-hero-quote-link,
    .v23-hero-quote-link i,
    .v23-custom-path,
    .v23-custom-path::before,
    .v23-path-cta span { transition:none !important; }
}


/* ============================================================
   KUSHIM HOME · FASE COMERCIAL V1
   Selector de ruta + WhatsApp guiado + integraciones ambientales
   ============================================================ */

/* Integraciones: cinta ambiental continua, sin interacción ni pausa por hover */
.v21-integrations .integ-row,
.v21-integrations .integ-track,
.v21-integrations .integ-cell { pointer-events: none; }
.v21-integrations .integ-row:hover .integ-track { animation-play-state: running !important; }
.v21-integrations .integ-cell::after { display: none !important; }

/* CTA WhatsApp dentro del bloque de contacto */
.kx-contact-wa {
    appearance: none;
    border: 0;
    background: transparent;
    color: #00d6a2;
    padding: 0;
    font: 600 .82rem/1.4 'Sora', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    text-align: left;
}
.kx-contact-wa span { transition: transform .2s ease; }
.kx-contact-wa:hover span { transform: translateX(4px); }

/* Selector de ruta del Producto 01 */
.kx-route-modal {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
}
.kx-route-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.kx-route-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3,8,11,.78);
    backdrop-filter: blur(14px);
}
.kx-route-dialog {
    position: relative;
    z-index: 1;
    width: min(920px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: clamp(28px,4vw,48px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 28px;
    background:
        radial-gradient(circle at 15% 0%, rgba(0,214,162,.13), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(168,147,255,.12), transparent 35%),
        #0a1116;
    box-shadow: 0 35px 110px rgba(0,0,0,.5);
    transform: translateY(18px) scale(.985);
    transition: transform .32s cubic-bezier(.2,.8,.2,1);
}
.kx-route-modal.is-open .kx-route-dialog { transform: none; }
.kx-route-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.72);
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
}
.kx-route-kicker {
    color: #00d6a2;
    font: 600 .68rem/1 'Chivo Mono', monospace;
    letter-spacing: .12em;
}
.kx-route-dialog > h3 {
    margin: 14px 0 12px;
    max-width: 700px;
    color: #f4f8f6;
    font: 650 clamp(2rem,4.2vw,3.7rem)/.98 'Chivo', sans-serif;
    letter-spacing: -.05em;
}
.kx-route-dialog > p {
    margin: 0;
    max-width: 680px;
    color: rgba(229,238,234,.64);
    font: 400 .94rem/1.7 'Sora', sans-serif;
}
.kx-route-options {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    margin-top: 30px;
}
.kx-route-option {
    appearance: none;
    min-height: 230px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 20px;
    background: rgba(255,255,255,.025);
    color: inherit;
    cursor: pointer;
    transition: transform .28s ease, border-color .28s ease, background .28s ease;
}
.kx-route-option-new { background: radial-gradient(circle at 0 100%,rgba(0,214,162,.10),transparent 52%),rgba(255,255,255,.025); }
.kx-route-option:hover { transform: translateY(-4px); border-color: rgba(0,214,162,.34); background-color: rgba(255,255,255,.045); }
.kx-route-option > span { color: rgba(255,255,255,.34); font: 500 .7rem 'Chivo Mono', monospace; }
.kx-route-option > strong { margin: 32px 0 10px; color: #f2f7f5; font: 600 1.35rem/1.2 'Chivo', sans-serif; }
.kx-route-option > small { color: rgba(229,238,234,.6); font: 400 .82rem/1.6 'Sora', sans-serif; }
.kx-route-option > b { margin-top: auto; padding-top: 24px; color: #00d6a2; font: 600 .78rem 'Sora', sans-serif; }

html[data-theme="light"] .kx-route-modal-backdrop { background: rgba(229,236,232,.78); }
html[data-theme="light"] .kx-route-dialog { border-color: rgba(18,35,30,.1); background: radial-gradient(circle at 15% 0%,rgba(0,166,126,.10),transparent 34%),#f4f7f4; box-shadow: 0 35px 90px rgba(40,65,57,.18); }
html[data-theme="light"] .kx-route-dialog > h3,
html[data-theme="light"] .kx-route-option > strong { color:#13221d; }
html[data-theme="light"] .kx-route-dialog > p,
html[data-theme="light"] .kx-route-option > small { color:rgba(19,34,29,.64); }
html[data-theme="light"] .kx-route-option { border-color:rgba(19,34,29,.1); background-color:rgba(255,255,255,.62); }
html[data-theme="light"] .kx-route-close { color:#173028; border-color:rgba(19,34,29,.1); background:rgba(255,255,255,.7); }

@media (max-width: 720px) {
    .kx-route-modal { padding: 12px; }
    .kx-route-dialog { max-height: calc(100vh - 24px); padding: 28px 18px 18px; border-radius: 22px; }
    .kx-route-options { grid-template-columns: 1fr; }
    .kx-route-option { min-height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
    .kx-route-modal,
    .kx-route-dialog,
    .kx-route-option,
    .kx-contact-wa span { transition: none !important; }
}


/* ============================================================
   KUSHIM HOME · ENLACES A CASE STUDIES
   "Caso completo" ahora es un enlace real a /proyectos/{slug}.
   ============================================================ */
.kx-case-actions .kx-case-detail{
    display:inline-flex;
    align-items:center;
    gap:2px;
    text-decoration:none;
    background:transparent;
    border:0;
    cursor:pointer;
}