/* KAILU Editorial — sistema visual de producto
   Papel, tinta y coral funcional. Documentos reales como protagonistas.
   Se aplica por secciones con .ke-* mientras se extiende al resto de la landing. */

:root {
    --ke-coral-hover: #E84523;
    --ke-paper: #F1ECE3;
    --ke-paper-2: #E7E0D3;
    --ke-sheet: #FFFDF8;
    --ke-receipt: #FBF7EF;
    --ke-ink: #141210;
    --ke-ink-2: #2B2723;
    --ke-grey: #6E665C;
    --ke-grey-2: #A1988B;
    --ke-rule: #D6CCBD;
    --ke-coral: #FF5A36;
    --ke-coral-deep: #C8391A;
    --ke-coral-wash: rgba(255, 90, 54, .18);
    --ke-sans: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
    --ke-impact: 'Anton', 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
    --ke-mono: 'Space Mono', ui-monospace, Menlo, monospace;
    --ke-ease: cubic-bezier(.2, .7, .2, 1);
    --ke-shadow: 0 1px 0 var(--ke-rule), 0 22px 40px -30px rgba(20, 18, 16, .5);
    --ke-pad: max(clamp(20px, 5vw, 56px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}

/* ─── Escala tipográfica ──────────────────────────────── */
.ke-meta { font-family: var(--ke-mono); font-size: 11px; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; }
.ke-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: var(--ke-grey); }
.ke-eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--ke-coral); }
.ke-h2 { margin: 0; font: 800 clamp(2rem, 3.4vw, 3.1rem)/1 var(--ke-sans); letter-spacing: -.04em; text-wrap: balance; }
.ke-h2 span { color: #8D857A; }

/* ─── Botón de compra ─────────────────────────────────── */
.ke-btn {
    display: inline-flex; align-items: stretch; min-height: 56px; padding: 0; border: 0; border-radius: 2px; cursor: pointer;
    background: var(--ke-ink); color: var(--ke-paper); font: 700 16px/1 var(--ke-sans); text-decoration: none;
    transition: transform 250ms var(--ke-ease);
}
.ke-btn__label { display: flex; align-items: center; padding: 10px 22px; line-height: 1.2; text-align: left; }
.ke-btn__arrow { display: flex; align-items: center; padding: 0 18px; background: var(--ke-coral); color: var(--ke-ink); font-size: 20px; transition: padding 250ms var(--ke-ease); }
.ke-btn:focus-visible, .ke-index button:focus-visible, .ke-textlink:focus-visible { outline: 2px solid var(--ke-coral); outline-offset: 3px; }
@media (hover: hover) {
    .ke-btn:hover { transform: translateY(-2px); }
    .ke-btn:hover .ke-btn__arrow { padding: 0 24px; }
}
.ke-price b { display: block; font: 800 2.2rem/1 var(--ke-sans); letter-spacing: -.04em; }
.ke-price span { display: block; margin-top: 6px; color: var(--ke-grey); }
.ke-textlink {
    display: inline-block; margin-top: 22px; padding-bottom: 3px; color: var(--ke-ink); font-weight: 600; text-decoration: none;
    background: linear-gradient(var(--ke-coral), var(--ke-coral)) 0 100% / 100% 2px no-repeat;
}

/* ─── HERO ────────────────────────────────────────────── */
.ke-hero { position: relative; overflow: hidden; background: #fff; color: var(--ke-ink); font-family: var(--ke-sans); padding: 100px var(--ke-pad) var(--kn-sec, 96px); }
/* Palabra editorial: gesto de fondo, nunca sobre el texto */
.ke-hero__word {
    position: absolute; right: -.06em; bottom: -.28em; margin: 0; z-index: 0; pointer-events: none; user-select: none;
    font: 400 min(22vw, 19rem)/.8 var(--ke-impact); letter-spacing: .01em; color: #F8F7F5;
}
.ke-hero__grid { position: relative; z-index: 1; }
.ke-hero__grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.ke-display { margin: 0; font: 400 clamp(3.6rem, 7.8vw, 7rem)/.84 var(--ke-impact); letter-spacing: -.005em; text-transform: uppercase; }
.ke-display .ke-amp { display: inline-block; color: var(--ke-coral); font-weight: 400; }
.ke-display .ke-line2 { display: block; padding-left: .4em; }
.ke-lead { margin: 26px 0 0; max-width: 34ch; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.5; color: var(--ke-ink-2); }
.ke-lead strong { display: block; color: var(--ke-ink); font-weight: 700; }
.ke-formats { margin: 22px 0 0; display: flex; flex-wrap: wrap; color: var(--ke-ink); }
.ke-formats span + span::before { content: '/'; margin: 0 10px; color: var(--ke-grey-2); }
.ke-buy { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 26px; margin-top: 34px; }

/* Hero: la acción principal se ve como acción */
.ke-hero .ke-btn { background: var(--ke-coral); color: var(--ke-ink); }
.ke-hero .ke-btn__arrow { background: var(--ke-ink); color: var(--ke-paper); }
@media (hover: hover) { .ke-hero .ke-btn:hover { background: var(--ke-coral-hover); } }

/* Índice del proceso */
.ke-index { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.ke-index li { flex: 1 1 auto; }
.ke-index button {
    all: unset; box-sizing: border-box; display: block; width: 100%; min-height: 52px; padding: 8px 12px; cursor: pointer;
    border: 1px solid var(--ke-rule); background: #fff; color: var(--ke-grey); font-family: var(--ke-mono); font-size: 10.5px; letter-spacing: .05em;
    transition: color 200ms var(--ke-ease), border-color 200ms var(--ke-ease), background-color 200ms var(--ke-ease);
}
.ke-index button b { display: block; margin-top: 3px; font: 700 15px/1.2 var(--ke-sans); letter-spacing: -.01em; color: var(--ke-ink); }
@media (hover: hover) { .ke-index button:hover { border-color: var(--ke-ink); } }
.ke-index button[aria-pressed="true"] { border-color: var(--ke-coral); background: var(--ke-coral-wash); color: var(--ke-coral-deep); }

/* Mesa con las piezas del proceso */
.ke-desk { position: relative; aspect-ratio: 100 / 89; container-type: inline-size; }
.ke-piece {
    position: absolute; margin: 0; rotate: var(--r, 0deg);
    transition: opacity 300ms var(--ke-ease), translate 300ms var(--ke-ease), filter 300ms var(--ke-ease);
    animation: keEnter 560ms var(--ke-ease) both; animation-delay: calc(var(--i) * 90ms + 120ms);
}
@keyframes keEnter { from { opacity: 0; transform: translateY(22px) rotate(calc(var(--r, 0deg) * -1)); } }
.ke-desk.is-focus .ke-piece:not(.is-active) { opacity: .68; filter: grayscale(.12); }
.ke-piece.is-active { z-index: 20; translate: 0 -8px; }
.ke-note { position: absolute; top: -22px; left: 0; color: var(--ke-coral-deep); white-space: nowrap; }
.ke-note::after { content: ''; display: inline-block; width: 28px; height: 1px; margin-left: 8px; vertical-align: middle; background: var(--ke-coral); }
.ke-sheet { background: var(--ke-sheet); box-shadow: var(--ke-shadow); }
.ke-hero .ke-sheet { box-shadow: 0 0 0 1px rgba(20, 18, 16, .07), 0 26px 46px -28px rgba(20, 18, 16, .55); }
.ke-hero .ke-receipt { filter: drop-shadow(0 16px 20px rgba(20, 18, 16, .22)); }

.ke-p-dm { --i: 0; --r: -2.5deg; left: 0; top: 5cqw; width: 42cqw; z-index: 3; }
.ke-p-dm .ke-sheet { padding: 3.2cqw 3.4cqw; border-radius: 18px 18px 18px 3px; }
.ke-p-dm .ke-meta { color: var(--ke-grey); font-size: max(9px, 1.8cqw); }
.ke-p-dm p { margin: 1.4cqw 0 0; font-size: max(13px, 2.7cqw); line-height: 1.35; font-weight: 500; }

.ke-p-rec { --i: 2; --r: 1.8deg; left: 6cqw; top: 33cqw; width: 30cqw; z-index: 4; }
.ke-receipt {
    --z: 10px; background: var(--ke-receipt); padding: 3cqw 3cqw 5cqw; font-family: var(--ke-mono); font-size: max(10px, 1.9cqw);
    -webkit-mask: conic-gradient(from 135deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--z) * 2) var(--z) repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - var(--z) + 1px) no-repeat;
    mask: conic-gradient(from 135deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--z) * 2) var(--z) repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - var(--z) + 1px) no-repeat;
    filter: drop-shadow(0 18px 18px rgba(20, 18, 16, .18));
}
.ke-receipt__title { display: block; margin-bottom: 2cqw; text-align: center; letter-spacing: .2em; }
.ke-receipt__row { display: flex; justify-content: space-between; padding: .5cqw 0; }
.ke-receipt hr { margin: 1.6cqw 0; border: 0; border-top: 1px dashed var(--ke-grey-2); }
.ke-total { position: relative; display: block; margin-top: 1cqw; text-align: right; font: 800 max(26px, 6.2cqw)/1 var(--ke-sans); letter-spacing: -.05em; }
.ke-total small { margin-left: .8cqw; font: 700 max(10px, 1.9cqw) var(--ke-mono); }
.ke-circle { position: absolute; inset: -2.4cqw -2cqw -2cqw -3cqw; width: calc(100% + 5cqw); height: calc(100% + 4.4cqw); overflow: visible; pointer-events: none; }
.ke-circle path { fill: none; stroke: var(--ke-coral); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 600ms var(--ke-ease); }
.is-reached .ke-circle path { stroke-dashoffset: 0; }

.ke-p-quote { --i: 3; --r: 2.4deg; right: 1cqw; top: 2cqw; width: 38cqw; z-index: 2; }
.ke-p-quote .ke-sheet { position: relative; aspect-ratio: 1 / 1.28; padding: 4cqw 3.6cqw 5cqw; }
.ke-p-quote h3 { margin: 0 0 .6cqw; font-size: max(15px, 3.4cqw); font-weight: 800; letter-spacing: -.03em; }
.ke-p-quote .ke-meta { color: var(--ke-grey); font-size: max(9px, 1.6cqw); }
.ke-fields { margin: 3cqw 0 0; display: grid; gap: 1.6cqw; }
.ke-fields div { padding-bottom: 1cqw; border-bottom: 1px solid var(--ke-rule); }
.ke-fields dt { font-family: var(--ke-mono); font-size: max(8px, 1.5cqw); letter-spacing: .06em; text-transform: uppercase; color: var(--ke-grey); }
.ke-fields dd { margin: .4cqw 0 0; font-size: max(12px, 2.3cqw); font-weight: 600; }
.ke-msgline { margin: 2.4cqw 0 0; padding-left: 1.6cqw; border-left: 2px solid var(--ke-coral); font-size: max(11px, 1.9cqw); line-height: 1.35; color: var(--ke-ink-2); }
.ke-msgline .ke-meta { display: block; margin-bottom: .4cqw; font-size: max(8px, 1.3cqw); color: var(--ke-grey); }
.ke-payrows { display: grid; gap: .6cqw; margin: 0 0 1.8cqw; padding-bottom: 1.4cqw; border-bottom: 1px solid var(--ke-rule); font-family: var(--ke-mono); font-size: max(9px, 1.5cqw); }
.ke-payrows div { display: flex; justify-content: space-between; gap: 8px; }
.ke-payrows dt { color: var(--ke-grey); text-transform: uppercase; letter-spacing: .04em; }
.ke-payrows dd { margin: 0; font-weight: 700; }
.ke-p-quote .ke-stamp { top: 23cqw; bottom: auto; }
.ke-mark { background: linear-gradient(transparent 55%, var(--ke-coral-wash) 55%); }
.ke-stamp {
    position: absolute; right: 2.4cqw; bottom: 1.4cqw; padding: 1cqw 1.8cqw; border: 2px solid var(--ke-coral); color: var(--ke-coral-deep);
    font-family: var(--ke-mono); font-weight: 700; font-size: max(10px, 2cqw); letter-spacing: .12em; text-transform: uppercase;
    rotate: -9deg; opacity: 0; scale: 1.35; transition: opacity 250ms var(--ke-ease), scale 250ms var(--ke-ease);
}
.is-reached .ke-stamp { opacity: 1; scale: 1; }

.ke-p-track { --i: 1; --r: -1.2deg; left: 11cqw; top: 76cqw; width: 57cqw; z-index: 5; }
.ke-ruler { padding: 2.6cqw 3cqw 2.8cqw; background: var(--ke-ink); color: var(--ke-paper); }
.ke-ruler .ke-meta { color: var(--ke-grey-2); font-size: max(9px, 1.6cqw); }
.ke-ruler dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.4cqw; margin: 1.8cqw 0 0; }
.ke-ruler dl div { padding-top: 1.2cqw; border-top: 1px solid rgba(241, 236, 227, .3); }
.ke-ruler dt { font-family: var(--ke-mono); font-size: max(8px, 1.4cqw); letter-spacing: .06em; text-transform: uppercase; color: var(--ke-grey-2); }
.ke-ruler dd { margin: .6cqw 0 0; font-size: max(12px, 2.4cqw); font-weight: 700; letter-spacing: -.01em; color: var(--ke-paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ke-p-pay { --i: 4; --r: -3deg; right: 0; top: 63cqw; width: 30cqw; z-index: 6; }
.ke-p-pay .ke-sheet { padding: 3cqw 3.2cqw 3.4cqw; border-top: 4px solid var(--ke-ink); }
.ke-p-pay .ke-meta { color: var(--ke-grey); font-size: max(9px, 1.6cqw); }
.ke-was { display: block; margin-top: 1.4cqw; color: var(--ke-grey-2); font: 600 max(12px, 2.4cqw)/1 var(--ke-sans); text-decoration: line-through; text-decoration-color: transparent; transition: text-decoration-color 300ms var(--ke-ease); }
.ke-amount { display: block; font: 800 max(24px, 5.6cqw)/1.05 var(--ke-sans); letter-spacing: -.05em; }
.ke-amount small { font: 700 max(10px, 1.9cqw) var(--ke-mono); }
.ke-paid { display: inline-block; margin-top: 1.4cqw; font-family: var(--ke-mono); font-weight: 700; font-size: max(10px, 1.9cqw); letter-spacing: .14em; background: linear-gradient(var(--ke-coral), var(--ke-coral)) 0 100% / 0 .9cqw no-repeat; transition: background-size 450ms var(--ke-ease); }
.is-reached .ke-was { text-decoration-color: var(--ke-coral); }
.is-reached .ke-paid { background-size: 100% .9cqw; }

/* ─── HERRAMIENTAS (mismo motor de escena, objetos editoriales) ── */
.kn-tools.ke-tools { background: #fff; color: var(--ke-ink); font-family: var(--ke-sans); }
.ke-tools .kn-sticky { height: auto; min-height: 0; padding: calc(var(--kn-sec, 96px) * .88) var(--ke-pad); }
.ke-tools .kn-tools__inner {
    max-width: 1240px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    column-gap: 64px; row-gap: 8px;
}
.ke-tools .kn-tools__head { grid-column: 1; grid-row: 1; text-align: left; align-self: end; }
.ke-tools .kn-stack { grid-column: 1 / -1; grid-row: 2; min-height: 500px; margin-top: 0; }
.ke-tools .kn-tools__caption { grid-column: 2; grid-row: 1; align-self: end; min-height: 0; text-align: left; }
.ke-tools .kn-tools__caption-in { max-width: none; margin: 0; }

.ke-tools .kn-layer {
    --w: min(360px, 27.5vw); --gap: min(186px, 15vw);
    background: none; border: 0; border-radius: 0; box-shadow: none; transition: transform 350ms var(--ke-ease), opacity 350ms var(--ke-ease);
}
.ke-tools .kn-layer.is-current { transform: translateY(-12px); border: 0; box-shadow: none; }
.ke-tools:not([data-index="0"]) .kn-layer:not(.is-current) { opacity: .35; }
.ke-tools .kn-layer__body { height: auto; padding: 0; display: block; }

/* Escritorio: la sección no retiene el scroll; el cursor elige la pieza */
@media (min-width: 900px) and (hover: hover), (min-width: 900px) and (min-height: 601px) {
    .kn-tools.ke-tools { height: auto; }
    .ke-tools .kn-sticky { position: relative; }
    .ke-tools .kn-layer { cursor: default; transition: transform 250ms var(--ke-ease), opacity 250ms var(--ke-ease), scale 250ms var(--ke-ease); }
    .ke-tools:not([data-index="0"]) .kn-layer:not(.is-current) { opacity: .6; }
    .ke-tools .kn-layer.is-current { z-index: 20; opacity: 1; scale: 1.03; }
}

/* Menos archivos, más herramienta: la web es la pieza grande */
.ke-tools .kn-layer--web { --w: min(420px, 32vw); }
.ke-tools .kn-layer--guides { --w: min(400px, 30vw); }

/* Ficha del objeto enfocado */
.ke-cap { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; padding-top: 14px; border-top: 1px solid var(--ke-ink); }
.ke-cap__n { grid-row: span 3; font: 800 2.4rem/1 var(--ke-sans); letter-spacing: -.05em; color: var(--ke-coral); }
.ke-cap .ke-meta { color: var(--ke-grey); }
.ke-cap h3 { margin: 2px 0 0; font: 800 clamp(1.4rem, 2.2vw, 2rem)/1.05 var(--ke-sans); letter-spacing: -.035em; }
.ke-cap p { margin: 6px 0 0; max-width: 42ch; font-size: 1rem; line-height: 1.5; color: var(--ke-ink-2); }

/* WEB: pieza oscura */
.ke-slab { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; aspect-ratio: 1 / 1.3; padding: 20px; background: var(--ke-ink); color: var(--ke-paper); box-shadow: var(--ke-shadow); }
.ke-slab__steps { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--ke-grey-2); }
.ke-slab__steps .is-on { color: var(--ke-paper); box-shadow: inset 0 -2px var(--ke-coral); }
.ke-slab__big { font: 800 3.4rem/.85 var(--ke-sans); letter-spacing: -.06em; }
.ke-slab__big small { margin-left: 6px; font: 700 11px var(--ke-mono); color: var(--ke-grey-2); }
.ke-slab__calc { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(241, 236, 227, .25); }
.ke-slab__calc div { padding: 8px 6px 0 0; }
.ke-slab__calc span { display: block; color: var(--ke-grey-2); font-size: 9px; white-space: nowrap; letter-spacing: .02em; }
.ke-slab__calc b { font: 700 1.05rem var(--ke-sans); }
.ke-slab__msg { margin: 0; padding: 6px 0 6px 12px; border-left: 3px solid var(--ke-coral); color: rgba(241, 236, 227, .8); font-size: .85rem; }

/* Guías: portadas reales, una junto a otra */
.ke-guides { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ke-guide { margin: 0; }
.ke-guide img { display: block; width: 100%; height: auto; box-shadow: var(--ke-shadow); }
.ke-guide:last-child { margin-top: 28px; }
.ke-guide figcaption { margin-top: 10px; color: var(--ke-ink); font-size: 10px; }
.ke-guide figcaption span { display: block; margin-top: 2px; color: var(--ke-grey); text-transform: none; letter-spacing: .02em; }

/* Cotización: hoja con esquina doblada */
.ke-docpage {
    position: relative; padding: 20px; background: var(--ke-sheet); box-shadow: var(--ke-shadow);
    clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%);
}
.ke-docpage::after { content: ''; position: absolute; top: 0; right: 0; width: 36px; height: 36px; background: linear-gradient(225deg, transparent 50%, #D2C9BA 50%); }
.ke-docpage__head { padding-right: 30px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--ke-ink); }
.ke-docpage h4 { margin: 0; font: 800 1.15rem/1.05 var(--ke-sans); letter-spacing: -.03em; }
.ke-docpage dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 12px 0 0; font-size: .85rem; }
.ke-docpage dt { padding-top: 2px; font-family: var(--ke-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--ke-grey); }
.ke-docpage dd { margin: 0; }
.ke-bracket { font-family: var(--ke-mono); font-size: .9em; color: var(--ke-coral-deep); }

/* ─── MÓVIL: una pieza principal por vez ─────────────── */
@media (max-width: 899px), (hover: none) and (max-height: 600px) {
    .ke-hero { padding: 80px var(--ke-pad) var(--kn-sec, 60px); }
    .ke-hero__grid { grid-template-columns: 1fr; }
    .ke-display { font-size: clamp(3.2rem, 16vw, 4.6rem); }
    .ke-hero__word { display: none; }
    .ke-index { display: none; }
    .ke-textlink { margin-top: 8px; padding: 16px 0 4px; }

    /* Mesa compacta: piezas solapadas en dos columnas, sin ocupar pantallas enteras */
    .ke-desk {
        display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); row-gap: 30px;
        aspect-ratio: auto; container-type: normal; margin-top: 8px; padding-top: 22px;
    }
    .ke-piece { position: relative; inset: auto; width: auto; max-width: 440px; animation: none; translate: 0 0; }
    .ke-desk .ke-piece { max-width: none; margin: 0; }
    .ke-desk .ke-p-dm { grid-column: 1 / 3; grid-row: 1; z-index: 3; }
    .ke-desk .ke-p-rec { grid-column: 1 / 3; grid-row: 3; z-index: 4; }
    .ke-desk .ke-p-quote { grid-column: 2 / 4; grid-row: 3 / 5; align-self: start; margin-top: 64px; z-index: 2; }
    .ke-desk .ke-p-quote .ke-note { left: auto; right: 0; }
    .ke-desk .ke-p-track { grid-column: 1 / 4; grid-row: 2; z-index: 5; }
    .ke-desk .ke-p-pay { grid-column: 1 / 3; grid-row: 5; z-index: 6; }
    .ke-note { top: -20px; }
    .ke-p-dm .ke-sheet { padding: 16px 18px; }
    .ke-p-dm .ke-meta { font-size: 10px; }
    .ke-p-dm p { margin-top: 8px; font-size: 1.05rem; }
    .ke-receipt { --z: 8px; padding: 18px 18px 30px; font-size: 12px; }
    .ke-receipt__title { margin-bottom: 12px; }
    .ke-receipt__row { padding: 3px 0; }
    .ke-receipt hr { margin: 10px 0; }
    .ke-total { font-size: 2.2rem; }
    .ke-total small { font-size: 11px; }
    .ke-circle { inset: -14px -12px -12px -18px; width: calc(100% + 30px); height: calc(100% + 26px); }
    .ke-p-quote .ke-sheet { aspect-ratio: auto; padding: 22px 20px 64px; }
    .ke-p-quote h3 { font-size: 1.4rem; }
    .ke-p-quote .ke-meta { font-size: 10px; }
    .ke-fields { gap: 10px; margin-top: 14px; }
    .ke-fields dt { font-size: 10.5px; }
    .ke-fields dd { font-size: .95rem; }
    .ke-stamp { right: 18px; bottom: 18px; padding: 5px 10px; font-size: 12px; }
    .ke-ruler { padding: 16px 14px 18px; }
    .ke-ruler .ke-meta { font-size: 10px; }
    .ke-ruler dl { gap: 0 14px; margin-top: 12px; }
    .ke-ruler dl div { padding-top: 8px; }
    .ke-ruler dt { font-size: 9.5px; }
    .ke-ruler dd { margin-top: 4px; font-size: .95rem; }
    .ke-desk .ke-p-track { margin-left: 0; margin-right: 0; }
    .ke-msgline { margin-top: 14px; padding-left: 10px; font-size: .88rem; }
    .ke-msgline .ke-meta { margin-bottom: 3px; font-size: 9.5px; }
    .ke-payrows { gap: 4px; margin-bottom: 12px; padding-bottom: 10px; font-size: 10.5px; }
    .ke-p-quote .ke-stamp { top: auto; bottom: 18px; }
    .ke-p-pay .ke-sheet { padding: 18px 20px 20px; }
    .ke-p-pay .ke-meta { font-size: 10px; }
    .ke-was { margin-top: 8px; font-size: 1rem; }
    .ke-amount { font-size: 2.4rem; }
    .ke-amount small { font-size: 11px; }
    .ke-paid { margin-top: 8px; font-size: 12px; background-size: 0 6px; }
    .is-reached .ke-paid { background-size: 100% 6px; }

    .ke-tools .kn-sticky { padding: var(--kn-sec, 60px) var(--ke-pad); }
    .ke-tools .kn-tools__inner { display: block; }
    .ke-tools .kn-tools__head { margin-bottom: 26px; }
    .ke-tools .kn-stack { display: grid; gap: 28px; min-height: 0; }
    .ke-tools .kn-layer { width: auto; max-width: 300px; }
    .ke-tools .kn-layer.is-current { transform: none; }
    .ke-tools .kn-layer:nth-child(even) { margin-left: 32px; }
    .ke-tools .kn-layer__cap { display: block; padding: 18px 0 0; }
    .ke-slab { aspect-ratio: auto; min-height: 250px; padding: 20px; }
    .ke-slab__steps, .ke-slab__calc span { font-size: 10.5px; }
    .ke-slab__calc span { white-space: normal; }
    .ke-slab__calc b { font-size: 1.2rem; }
    .ke-slab__msg { font-size: .95rem; }
    .ke-tools .kn-layer--web, .ke-tools .kn-layer--guides { max-width: 340px; }
    .ke-guide figcaption { font-size: 10.5px; }
    .ke-docpage dl { font-size: .95rem; }
    .ke-docpage dt { font-size: 10.5px; }
    .ke-slab__big { font-size: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ke-piece { animation: none; }
    .ke-hero *, .ke-tools * { transition-duration: 1ms !important; }
}

/* ─── PAGO CONFIRMADO: continuación de la landing ─────── */
body.ke-done-page { background: var(--ke-paper); color: var(--ke-ink); font-family: var(--ke-sans); }
.ke-done { padding: 128px var(--ke-pad) 120px; }
.ke-done__grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ke-done__title { font-size: clamp(3.2rem, 6.6vw, 6.2rem); }
.ke-done__title .ke-amp { font-weight: 800; }

.ke-done__desk { pointer-events: none; position: relative; aspect-ratio: 1 / .96; container-type: inline-size; }
.ke-done__rec { --i: 0; --r: -4deg; left: 0; top: 50cqw; width: 38cqw; z-index: 3; }
.ke-done__rec .ke-receipt { padding: 5cqw 5cqw 8cqw; font-size: max(11px, 3.1cqw); }
.ke-done__rec .ke-receipt__title { margin-bottom: 3.4cqw; }
.ke-done__rec .ke-receipt__row { padding: .8cqw 0; }
.ke-done__rec .ke-receipt hr { margin: 2.6cqw 0; }
.ke-done__rec .ke-total { font-size: max(28px, 10cqw); }
.ke-done__rec .ke-total small { margin-left: 1.2cqw; font-size: max(10px, 3cqw); }
.ke-done__mail { --i: 1; --r: 2.5deg; right: 0; top: 4cqw; width: 62cqw; z-index: 2; }

.ke-mail { position: relative; padding: 5.4cqw 5.4cqw 6.4cqw; border-top: 4px solid var(--ke-ink); }
.ke-mail__head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 2.4cqw; border-bottom: 1px solid var(--ke-rule); color: var(--ke-grey); font-size: max(9px, 2.5cqw); }
.ke-mail__head span:last-child { color: var(--ke-coral-deep); }
.ke-mail__to { display: block; margin-top: 3.4cqw; color: var(--ke-grey); font-size: max(9px, 2.5cqw); }
.ke-mail__title { margin: 1.4cqw 0 0; font: 800 max(22px, 7.4cqw)/.95 var(--ke-sans); letter-spacing: -.05em; }
.ke-mail__title span { color: var(--ke-coral); }
.ke-mail__text { margin: 2.6cqw 0 0; max-width: 30ch; font-size: max(13px, 3.4cqw); line-height: 1.45; color: var(--ke-ink-2); }
.ke-mail__link { display: inline-block; margin-top: 4cqw; padding-bottom: .6cqw; color: var(--ke-ink); font: 700 max(13px, 3.4cqw)/1.2 var(--ke-sans); background: linear-gradient(var(--ke-coral), var(--ke-coral)) 0 100% / 100% 2px no-repeat; }
.ke-mail__att { display: flex; align-items: center; gap: 2.4cqw; width: fit-content; margin-top: 3.4cqw; padding: 1.6cqw 3cqw 1.6cqw 1.6cqw; border: 1px solid var(--ke-rule); background: var(--ke-paper); }
.ke-mail__att img { width: max(28px, 7cqw); height: auto; box-shadow: 0 1px 0 var(--ke-rule); }
.ke-mail__att .ke-meta { color: var(--ke-ink); font-size: max(9px, 2.4cqw); }
.ke-mail .ke-stamp { top: 19cqw; right: -3cqw; bottom: auto; background: var(--ke-paper); font-size: max(10px, 3cqw); padding: 1.4cqw 2.6cqw; }

.ke-done__next { max-width: 1180px; margin: 88px auto 0; }
.ke-done__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.ke-done__steps li { padding-top: 14px; border-top: 1px solid var(--ke-ink); }
.ke-done__steps b { font: 700 11px/1 var(--ke-mono); color: var(--ke-coral-deep); }
.ke-done__steps h3 { margin: 10px 0 8px; font: 800 clamp(1.3rem, 2vw, 1.6rem)/1.1 var(--ke-sans); letter-spacing: -.03em; }
.ke-done__steps p { margin: 0; max-width: 34ch; font-size: 1rem; line-height: 1.55; color: var(--ke-ink-2); }
.ke-done__steps strong { color: var(--ke-ink); }
.ke-done__steps a { color: var(--ke-ink); text-decoration: none; background: linear-gradient(var(--ke-coral), var(--ke-coral)) 0 100% / 100% 1px no-repeat; }
.ke-done__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: 56px; }
.ke-done__actions .ke-textlink { margin-top: 0; }
.ke-done__actions--hero { margin-top: 36px; }
.ke-done__steps li.is-first { border-top-width: 3px; border-top-color: var(--ke-coral); }
.ke-done__steps li.is-first h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.ke-done__steps li.is-first p { color: var(--ke-ink); }
.ke-done__steps li.is-support { border-top-color: var(--ke-rule); }
.ke-done__steps li.is-support h3 { font-size: 1.15rem; color: var(--ke-ink-2); }
.ke-done__steps li.is-support p { font-size: .92rem; color: var(--ke-grey); }
.ke-done-page .footer { padding: 0; }
.ke-done-page .footer-bar { margin: 0; background: var(--ke-ink); }
.ke-done-page .footer-bar p { color: var(--ke-paper); }

/* Compra sin completar: misma composición, una sola pieza */
.ke-done--cancel .ke-done__copy .ke-done__actions { margin-top: 40px; }
.ke-done__help { margin: 22px 0 0; max-width: 46ch; font-size: .92rem; line-height: 1.55; color: var(--ke-grey); }
.ke-done__help a { color: var(--ke-ink); text-decoration: none; background: linear-gradient(var(--ke-coral), var(--ke-coral)) 0 100% / 100% 1px no-repeat; }
.ke-done--cancel .ke-done__desk { aspect-ratio: 1 / .86; }
.ke-done__rec--solo { --r: -3deg; left: 20cqw; top: 6cqw; width: 58cqw; }
.ke-done__rec--solo .ke-receipt__row span:last-child { text-align: right; }
.ke-done__rec--solo .ke-stamp { position: relative; display: inline-block; right: auto; bottom: auto; margin-top: 4cqw; font-size: max(10px, 3.2cqw); padding: 1.4cqw 2.6cqw; }
.ke-done--cancel { box-sizing: border-box; min-height: calc(100vh - 52px); min-height: calc(100svh - 52px); display: flex; align-items: center; }
.ke-done--cancel .ke-done__grid { flex: 1; }

@media (max-width: 899px), (hover: none) and (max-height: 600px) {
    body.ke-done-page { padding-bottom: 0; }
    .ke-done { padding: 96px var(--ke-pad) 80px; }
    .ke-done__grid { grid-template-columns: 1fr; gap: 36px; }
    .ke-done__title { font-size: clamp(2.9rem, 13.6vw, 4.2rem); }
    .ke-done__desk { display: grid; aspect-ratio: auto; container-type: normal; padding-bottom: 8px; }
    .ke-done__desk .ke-piece { position: relative; inset: auto; width: auto; grid-area: 1 / 1; animation: none; }
    .ke-done__mail { margin: 0 6px 0 0; max-width: 440px; }
    .ke-done__rec { display: none; }
    .ke-done__rec--solo { display: block; max-width: 320px; margin: 0 auto; }
    .ke-done--cancel .ke-done__grid { gap: 48px; }
    .ke-done__rec--solo .ke-receipt { padding: 22px 22px 34px; font-size: 13px; }
    .ke-done__rec--solo .ke-receipt__title { margin-bottom: 14px; }
    .ke-done__rec--solo .ke-total { font-size: 2.8rem; }
    .ke-done__rec--solo .ke-total small { font-size: 11px; }
    .ke-done__rec--solo .ke-stamp { margin-top: 14px; padding: 5px 10px; font-size: 12px; }
    .ke-done--cancel { display: block; min-height: 0; }
    .ke-done__actions .ke-textlink { padding: 15px 0 4px; }
    .ke-mail { padding: 20px 20px 24px; }
    .ke-mail__head, .ke-mail__to { font-size: 10.5px; }
    .ke-mail__head { padding-bottom: 10px; }
    .ke-mail__to { margin-top: 14px; }
    .ke-mail__title { margin-top: 6px; font-size: 2.1rem; }
    .ke-mail__text { margin-top: 10px; font-size: 1rem; }
    .ke-mail__link { margin-top: 16px; padding-bottom: 3px; font-size: 15px; }
    .ke-mail__att { gap: 10px; margin-top: 14px; padding: 6px 12px 6px 6px; }
    .ke-mail__att img { width: 30px; }
    .ke-mail__att .ke-meta { font-size: 10px; }
    .ke-done__actions--hero { margin-top: 28px; }
    .ke-mail .ke-stamp { top: 52px; right: -8px; padding: 5px 10px; font-size: 12px; }
    .ke-done__next { margin-top: 64px; }
    .ke-done__steps li:not(.is-first) { border-top-color: var(--ke-rule); }
    .ke-done__steps { grid-template-columns: 1fr; gap: 22px; }
    .ke-done__steps a { display: inline-block; padding: 16px 0 3px; }
    .ke-done__actions { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 40px; }
    .ke-done__actions .ke-btn { justify-content: space-between; }
    .ke-done__actions .ke-textlink { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .ke-done * { transition-duration: 1ms !important; }
}

/* ─── HERO V2: la historia de una colaboración ─────────── */
.ke-hero__grid { max-width: 1240px; }
.kh-story { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; row-gap: 30px; align-items: start; font-family: var(--ke-sans); color: var(--ke-ink); }
.kh-step { position: relative; margin: 0; }
.kh-dm { grid-column: 1; grid-row: 1; }
.kh-quote { grid-column: 2; grid-row: 1; margin-top: 52px; }
.kh-agree { grid-column: 1; grid-row: 2; margin-top: 6px; }
.kh-pay { grid-column: 2; grid-row: 2; margin-top: -6px; }

.kh-label { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font: 700 11px/1 var(--ke-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ke-ink); }
.kh-label b { font: 400 30px/.8 var(--ke-impact); letter-spacing: 0; color: var(--ke-coral); }

/* 01 · El DM */
.kh-chat { background: #fff; border: 1px solid #E4DFD8; border-radius: 22px; overflow: hidden; rotate: -1.5deg; box-shadow: 0 30px 50px -34px rgba(20, 18, 16, .55); }
.kh-chat__bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #EFEBE6; }
.kh-ico { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ke-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kh-avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ke-ink); color: var(--ke-paper); font: 400 16px/1 var(--ke-impact); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ke-coral); }
.kh-avatar--sm { width: 26px; height: 26px; font-size: 12px; box-shadow: none; }
.kh-chat__who { flex: 1; display: grid; gap: 3px; min-width: 0; }
.kh-chat__who b { display: flex; align-items: center; gap: 4px; font: 700 14px/1.1 var(--ke-sans); }
.kh-chat__who small { font-size: 12px; line-height: 1; color: var(--ke-grey); }
.kh-verified { flex: none; width: 13px; height: 13px; }
.kh-verified circle { fill: var(--ke-coral); }
.kh-verified path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kh-chat__icons { display: flex; gap: 12px; }
.kh-chat__body { display: grid; gap: 6px; padding: 14px 14px 16px; }
.kh-chat__time { justify-self: center; margin-bottom: 4px; font: 400 10px/1 var(--ke-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ke-grey-2); }
.kh-bubble { justify-self: start; max-width: 86%; margin: 0; padding: 10px 14px; border-radius: 20px; background: #EFEDEA; font: 500 15px/1.35 var(--ke-sans); color: var(--ke-ink); }
.kh-bubble b { font-weight: 700; }
.kh-chat__body > .kh-bubble { margin-left: 34px; }
.kh-chat__row { display: flex; align-items: flex-end; gap: 8px; }
.kh-chat__input { display: flex; align-items: center; justify-content: space-between; margin: 0 12px 12px; padding: 10px 14px; border: 1px solid #E4DFD8; border-radius: 999px; font-size: 14px; color: var(--ke-grey-2); }
.kh-chat__input .kh-ico { width: 18px; height: 18px; stroke: var(--ke-grey); }

/* 02 y 04 · Documentos de la herramienta */
.kh-doc { position: relative; background: var(--ke-receipt); box-shadow: 0 0 0 1px rgba(20, 18, 16, .08), 0 30px 50px -34px rgba(20, 18, 16, .6); }
.kh-quote .kh-doc { rotate: 1.2deg; }
.kh-pay .kh-doc { rotate: -1deg; }
.kh-doc__head { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 16px; background: var(--ke-ink); color: var(--ke-paper); font: 400 10px/1.2 var(--ke-mono); letter-spacing: .08em; text-transform: uppercase; }
.kh-doc__head b { color: var(--ke-coral); font-weight: 700; }
.kh-doc__body { position: relative; padding: 16px 18px 20px; }
.kh-doc__to { margin: 0 0 14px; font-size: 13px; color: var(--ke-grey); }
.kh-doc__to b { color: var(--ke-ink); }
.kh-stamp { position: absolute; top: 12px; right: 14px; padding: 4px 8px; border: 2px solid var(--ke-coral); color: var(--ke-coral-deep); font: 700 10px/1 var(--ke-mono); letter-spacing: .14em; text-transform: uppercase; rotate: -8deg; }
.kh-rows { display: grid; gap: 8px; margin: 0; }
.kh-rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--ke-rule); }
.kh-rows dt { font: 600 14px/1.3 var(--ke-sans); }
.kh-rows dt i { font: 400 12px var(--ke-mono); font-style: normal; color: var(--ke-grey); }
.kh-rows dd { margin: 0; font: 700 13px/1 var(--ke-mono); }
.kh-rows--mono dt { font: 400 11px/1.3 var(--ke-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ke-grey); }
.kh-total, .kh-due { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 16px 0 0; }
.kh-total span, .kh-due span { font: 700 11px/1 var(--ke-mono); letter-spacing: .1em; text-transform: uppercase; }
.kh-total b, .kh-due b { font: 400 44px/.9 var(--ke-impact); letter-spacing: .005em; white-space: nowrap; }
.kh-total small, .kh-due small { margin-left: 6px; font: 700 11px var(--ke-mono); letter-spacing: .06em; }
.kh-total b { box-shadow: inset 0 -12px var(--ke-coral-wash); }
.kh-due b { color: var(--ke-coral-deep); }
.kh-check { display: grid; gap: 7px; margin: 0 0 14px; padding: 0 0 14px; list-style: none; border-bottom: 1px dashed var(--ke-grey-2); font: 600 14px/1.3 var(--ke-sans); }
.kh-check li { display: flex; align-items: center; gap: 9px; }
.kh-check li::before { content: '✓'; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ke-ink); color: var(--ke-paper); font-size: 11px; }
.kh-state { display: inline-block; margin-top: 12px; padding: 6px 10px; background: var(--ke-coral); color: var(--ke-ink); font: 700 10.5px/1 var(--ke-mono); letter-spacing: .12em; text-transform: uppercase; }

/* 03 · Mensaje de confirmación + respuesta de la marca */
.kh-msg { padding: 18px 20px 20px; background: #fff; border: 1px solid var(--ke-rule); border-left: 3px solid var(--ke-coral); rotate: -.8deg; box-shadow: 0 30px 50px -36px rgba(20, 18, 16, .5); }
.kh-msg__label { margin: 0 0 8px; font: 700 10.5px/1 var(--ke-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ke-coral-deep); }
.kh-msg__text { margin: 0; font: 400 15px/1.45 var(--ke-sans); color: var(--ke-ink-2); }
.kh-msg__text b { font-weight: 700; color: var(--ke-ink); }
.kh-copy { display: inline-flex; margin-top: 14px; padding: 8px 12px; border: 1px solid var(--ke-ink); font: 700 10.5px/1 var(--ke-mono); letter-spacing: .08em; text-transform: uppercase; }
.kh-reply { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px; margin: -22px -14px 0 0; }
.kh-reply .kh-bubble { box-shadow: 0 0 0 3px #fff, 0 18px 30px -18px rgba(20, 18, 16, .5); }

/* Flechas del recorrido */
.kh-arrow { position: absolute; z-index: 3; overflow: visible; pointer-events: none; }
.kh-arrow path { fill: none; stroke: var(--ke-coral); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 220; stroke-dashoffset: 0; }
.kh-arrow--x { width: 60px; height: 42px; right: -62px; top: 42%; }
.kh-arrow--back { width: 84px; height: 76px; left: -66px; top: calc(100% + 8px); }
.kh-arrow--d { display: none; }

/* Aparición: la historia se cuenta en orden */
.kh-story.is-armed .kh-step { opacity: 0; translate: 0 18px; transition: opacity 500ms var(--ke-ease), translate 500ms var(--ke-ease); transition-delay: calc(var(--i) * 160ms); }
.kh-story.is-armed .kh-step.is-in { opacity: 1; translate: 0 0; }
.kh-story.is-armed .kh-arrow path { stroke-dashoffset: 220; transition: stroke-dashoffset 600ms var(--ke-ease); transition-delay: calc(var(--i) * 160ms + 380ms); }
.kh-story.is-armed .is-in .kh-arrow path { stroke-dashoffset: 0; }

/* Guía de scroll */
.kh-cue { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; width: max-content; margin: 40px auto 0; color: var(--ke-ink); text-decoration: none; font: 700 11px/1 var(--ke-mono); letter-spacing: .14em; text-transform: uppercase; }
.kh-cue i { position: relative; width: 2px; height: 40px; overflow: hidden; background: var(--ke-rule); }
.kh-cue i::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 45%; background: var(--ke-coral); animation: khCue 1.8s var(--ke-ease) infinite; }
.kh-cue::after { content: '↓'; margin-top: -8px; font-size: 14px; color: var(--ke-coral); }
@keyframes khCue { from { translate: 0 -100%; } to { translate: 0 230%; } }
.kh-cue:focus-visible { outline: 2px solid var(--ke-coral); outline-offset: 4px; }

@media (max-width: 1099px) {
    .ke-hero .ke-hero__grid { grid-template-columns: 1fr; gap: 64px; }
    .kh-story { max-width: 720px; }
}
@media (max-width: 699px) {
    .kh-story { grid-template-columns: 1fr; row-gap: 68px; }
    .kh-dm, .kh-quote, .kh-agree, .kh-pay { grid-column: 1; grid-row: auto; margin-top: 0; }
    .kh-arrow--x, .kh-arrow--back { display: none; }
    .kh-arrow--d { display: block; left: 50%; bottom: -62px; width: 28px; height: 52px; margin-left: -14px; }
    .kh-story.is-armed .kh-step { transition-delay: 0ms; }
    .kh-story.is-armed .kh-arrow path { transition-delay: 350ms; }
    .kh-chat { rotate: -1deg; }
    .kh-reply { margin-right: -4px; }
    .kh-cue { margin-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
    .kh-cue i::after { animation: none; }
}
.kh-msg { position: relative; }
.kh-stamp--ok { top: -13px; right: 16px; background: #fff; }
@media (max-width: 699px) {
    .kh-doc__head, .kh-msg__label, .kh-copy, .kh-stamp, .kh-state, .kh-chat__time { font-size: 11px; }
    .kh-label { font-size: 12px; }
}

/* ─── COMPRA (pago confirmado / sin completar): el mismo sistema del producto ─── */
body.ke-done-page { background: #fff; }
.ke-done { position: relative; overflow: hidden; background: #fff; padding: 112px var(--ke-pad) 104px; }
.ke-done > *:not(.ke-done__word) { position: relative; z-index: 1; }
.ke-done__word {
    position: absolute; right: -3%; bottom: -.18em; z-index: 0; margin: 0; pointer-events: none; user-select: none; white-space: nowrap;
    font: 400 clamp(120px, 18vw, 250px)/.86 var(--ke-impact); letter-spacing: .005em;
    color: transparent; -webkit-text-stroke: 1px rgba(20, 18, 16, .13);
}
.ke-done__grid { align-items: start; }
.ke-done__copy .ke-lead { max-width: 38ch; }
.ke-done .ke-btn { background: var(--ke-coral); color: var(--ke-ink); }
.ke-done .ke-btn__arrow { background: var(--ke-ink); color: var(--ke-paper); }
@media (hover: hover) { .ke-done .ke-btn:hover { background: var(--ke-coral-hover); } }

/* El recibo es un documento, no una card */
.ke-done__desk { aspect-ratio: auto; container-type: normal; pointer-events: auto; }
.ke-done__doc { max-width: 380px; margin-left: auto; rotate: -1.2deg; }
.ke-done--cancel .ke-done__doc { rotate: 1deg; }
.ke-done__doc .kh-doc__body { padding: 18px 20px 22px; }
.ke-done__doc .kh-total b { font-size: 46px; }
.kh-state--quiet { background: none; border: 1px solid var(--ke-ink); color: var(--ke-ink); }

/* Así llega a tu correo: se lee como un mensaje recibido */
.ke-done__inbox { margin: 96px auto 0; max-width: 1180px; display: grid; grid-template-columns: minmax(0, 32fr) minmax(0, 68fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.ke-done__inbox-intro h2 { margin: 12px 0 0; font: 400 clamp(2rem, 3.6vw, 3rem)/.92 var(--ke-impact); text-transform: uppercase; letter-spacing: .005em; }
.ke-done__inbox-intro p { margin: 14px 0 0; max-width: 30ch; font-size: 1rem; line-height: 1.55; color: var(--ke-ink-2); }
.ke-inbox { border: 1px solid #E4DFD8; background: #fff; box-shadow: 0 30px 50px -34px rgba(20, 18, 16, .5); }
.ke-inbox__bar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #EFEBE6; }
.ke-inbox__who { flex: 1; display: grid; gap: 3px; min-width: 0; }
.ke-inbox__who b { font: 700 15px/1.1 var(--ke-sans); }
.ke-inbox__who small { font: 400 12px/1 var(--ke-mono); color: var(--ke-grey); }
.ke-inbox__time { font: 400 11px/1 var(--ke-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ke-grey-2); }
.ke-inbox__new { display: inline-flex; align-items: center; gap: 6px; }
.ke-inbox__new::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ke-coral); }
.ke-inbox__body { padding: 18px 20px 22px; }
.ke-inbox__subject { margin: 0; font: 800 clamp(1.15rem, 1.8vw, 1.45rem)/1.2 var(--ke-sans); letter-spacing: -.03em; }
.ke-inbox__text { margin: 10px 0 0; max-width: 52ch; font-size: 1rem; line-height: 1.55; color: var(--ke-ink-2); }
.ke-inbox__att { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 14px 10px 10px; border: 1px solid var(--ke-rule); background: var(--ke-receipt); }
.ke-inbox__att img { display: block; width: 34px; height: 48px; object-fit: cover; box-shadow: 0 2px 8px -4px rgba(20, 18, 16, .6); }
.ke-inbox__att span { font: 700 11px/1.3 var(--ke-mono); letter-spacing: .06em; text-transform: uppercase; }
.ke-inbox__att small { display: block; font-weight: 400; color: var(--ke-grey); }
.ke-inbox__link { display: inline-block; margin-top: 18px; padding-bottom: 3px; font-weight: 700; color: var(--ke-ink);
    background: linear-gradient(var(--ke-coral), var(--ke-coral)) 0 100% / 100% 2px no-repeat; }

/* Qué sigue: recorrido, no tres cards */
.ke-done__next { margin-top: 96px; }
.ke-route { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 52px); margin: 28px 0 0; padding: 0; list-style: none; }
.ke-route li { padding-top: 16px; border-top: 1px solid var(--ke-ink); }
.ke-route li + li { border-top-color: var(--ke-rule); }
.ke-route b { display: block; font: 400 2.6rem/.85 var(--ke-impact); color: var(--ke-coral); }
.ke-route h3 { margin: 10px 0 8px; font: 700 11px/1.3 var(--ke-mono); letter-spacing: .12em; text-transform: uppercase; }
.ke-route p { margin: 0; max-width: 34ch; font-size: 1rem; line-height: 1.55; color: var(--ke-ink-2); }
.ke-route a { color: var(--ke-ink); text-decoration: none; background: linear-gradient(var(--ke-coral), var(--ke-coral)) 0 100% / 100% 1px no-repeat; }

@media (max-width: 899px), (hover: none) and (max-height: 600px) {
    .ke-done { padding: 88px var(--ke-pad) 72px; }
    .ke-done__grid { gap: 40px; }
    /* Orden: estado -> título -> explicación -> CTA -> recibo -> lo demás */
    .ke-done__doc { margin: 0 auto; max-width: 420px; rotate: -1deg; }
    /* La palabra editorial pasa a ser una separación, nunca estorba al texto ni al botón */
    .ke-done { display: flex; flex-direction: column; }
    .ke-done__grid { order: 1; }
    .ke-done__word { order: 2; position: static; display: block; margin: 40px -8vw 0 0; font-size: clamp(88px, 26vw, 150px); }
    .ke-done__inbox { order: 3; }
    .ke-done__next { order: 4; }
    .ke-done__inbox { margin-top: 64px; grid-template-columns: 1fr; gap: 22px; }
    .ke-done__next { margin-top: 64px; }
    .ke-route { grid-template-columns: 1fr; gap: 26px; }
    .ke-route b { font-size: 2.2rem; }
    .ke-done--cancel .ke-done__word { margin-top: 36px; }
}