/* ==========================================================================
   KINTSUGI HUMANO™
   Libro Web™

   Editorial Design System
   v2.0

   BLOQUE 01
   Design Tokens
   Reset
   Base
   Typography
========================================================================== */



/* ==========================================================================
   01. DESIGN TOKENS
========================================================================== */

:root{

    /* ======================================================================
       COLOR SYSTEM
    ====================================================================== */

    --kw-color-gold:#D4AF37;
    --kw-color-gold-light:#E8C96B;
    --kw-color-gold-dark:#A88617;

    --kw-color-rose:#E89BB0;
    --kw-color-rose-soft:#F8DCE5;

    --kw-color-white:#FFFFFF;

    --kw-color-ink:#181818;
    --kw-color-text:#2F2F2F;

    --kw-color-muted:#6E6E6E;
    --kw-color-soft:#A0A0A0;

    --kw-color-border:#E8E3DA;

    --kw-color-background:#FBFAF8;
    --kw-color-surface:#FFFFFF;

    --kw-color-selection:rgba(212,175,55,.20);



    /* ======================================================================
       TYPOGRAPHY
    ====================================================================== */

    --kw-font-heading:
        "Cormorant Garamond",
        Georgia,
        serif;

    --kw-font-body:
        "Inter",
        system-ui,
        sans-serif;

    --kw-font-mono:
        "JetBrains Mono",
        monospace;



    /* ======================================================================
       FLUID TYPE SCALE
    ====================================================================== */

    --kw-fs-xs:
        clamp(.76rem,.74rem + .10vw,.86rem);

    --kw-fs-sm:
        clamp(.92rem,.90rem + .12vw,1rem);

    --kw-fs-base:
        clamp(1rem,.97rem + .20vw,1.125rem);

    --kw-fs-lg:
        clamp(1.25rem,1.12rem + .55vw,1.55rem);

    --kw-fs-xl:
        clamp(1.8rem,1.55rem + 1vw,2.55rem);

    --kw-fs-2xl:
        clamp(2.6rem,2.1rem + 2vw,4rem);

    --kw-fs-3xl:
        clamp(3.6rem,2.8rem + 3vw,5.6rem);



    /* ======================================================================
       LINE HEIGHT
    ====================================================================== */

    --kw-leading-tight:1.05;

    --kw-leading-heading:1.14;

    --kw-leading-body:1.82;

    --kw-leading-loose:1.95;



    /* ======================================================================
       LETTER SPACING
    ====================================================================== */

    --kw-letter-tight:-.03em;

    --kw-letter-normal:0;

    --kw-letter-wide:.18em;



    /* ======================================================================
       SPACING SCALE
    ====================================================================== */

    --kw-space-0:0;

    --kw-space-1:.25rem;
    --kw-space-2:.50rem;
    --kw-space-3:.75rem;
    --kw-space-4:1rem;
    --kw-space-5:1.5rem;
    --kw-space-6:2rem;
    --kw-space-7:3rem;
    --kw-space-8:4rem;
    --kw-space-9:6rem;
    --kw-space-10:8rem;
    --kw-space-11:10rem;
    --kw-space-12:14rem;



    /* ======================================================================
       EDITORIAL WIDTHS
    ====================================================================== */

    --kw-width-reading:720px;

    --kw-width-narrow:620px;

    --kw-width-wide:980px;

    --kw-width-ultra:1280px;



    /* ======================================================================
       RADIUS
    ====================================================================== */

    --kw-radius-sm:10px;

    --kw-radius-md:18px;

    --kw-radius-lg:30px;

    --kw-radius-xl:42px;



    /* ======================================================================
       SHADOWS
    ====================================================================== */

    --kw-shadow-xs:
        0 2px 8px rgba(0,0,0,.04);

    --kw-shadow-sm:
        0 10px 28px rgba(0,0,0,.05);

    --kw-shadow-md:
        0 24px 60px rgba(0,0,0,.08);



    /* ======================================================================
       MOTION
    ====================================================================== */

    --kw-speed-fast:.20s;

    --kw-speed:.35s;

    --kw-speed-slow:.70s;


    /* ======================================================================
   EDITORIAL RHYTHM
====================================================================== */



    --kw-scene-padding-top:3rem;

    --kw-scene-padding-bottom:4rem;



--kw-scene-gap:
    clamp(2rem,3vw,3.5rem);

--kw-block-gap:
    clamp(1.25rem,2vw,2rem);

--kw-reading-gap:
   clamp(1.6rem, 2vw, 1.9rem);

--kw-transition-editorial:
    .35s cubic-bezier(.22,.61,.36,1);


    /* ======================================================================
       Z INDEX
    ====================================================================== */

    --kw-z-progress:1000;

    --kw-z-overlay:900;

}



/* ==========================================================================
   02. RESET
========================================================================== */

*,
*::before,
*::after{

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

}



body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure,
ul,
ol,
dl{

    margin:0;

}



ul,
ol{

    padding:0;

}



img,
picture,
svg,
video{

    display:block;

    max-width:100%;

}



button,
input,
textarea,
select{

    font:inherit;

}



button{

    cursor:pointer;

    border:none;

    background:none;

}



table{

    border-collapse:collapse;

    border-spacing:0;

}



hr{

    border:none;

}



/* ==========================================================================
   03. BASE
========================================================================== */

html{

    background:

        var(--kw-color-background);

}



body{

    min-height:100vh;

    overflow-x:hidden;

    background:

        var(--kw-color-background);

    color:

        var(--kw-color-text);

    font-family:

        var(--kw-font-body);

    font-size:

        var(--kw-fs-base);

    font-weight:400;

    line-height:

        var(--kw-leading-body);

    text-rendering:

        optimizeLegibility;

    -webkit-font-smoothing:

        antialiased;

    -moz-osx-font-smoothing:

        grayscale;

}



section{

    position:relative;

}



figure{

    overflow:hidden;

}



img{

    height:auto;

}



a{

    color:inherit;

    text-decoration:none;

    transition:

        color var(--kw-speed);

}



a:hover{

    color:

        var(--kw-color-gold);

}



strong{

    font-weight:600;

}



em{

    font-style:italic;

}



::selection{

    background:

        var(--kw-color-selection);

}



/* ==========================================================================
   04. TYPOGRAPHY
========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:

        var(--kw-font-heading);

    font-weight:500;

    line-height:

        var(--kw-leading-heading);

    letter-spacing:

        var(--kw-letter-tight);

    color:

        var(--kw-color-ink);

    text-wrap:balance;

}



h1{

    font-size:

        var(--kw-fs-3xl);

}



h2{

    font-size:

        var(--kw-fs-2xl);

}



h3{

    font-size:

        var(--kw-fs-xl);

}



h4{

    font-size:

        var(--kw-fs-lg);

}



p{

    max-width:62ch;

    text-wrap:pretty;

    hanging-punctuation:first;

    orphans:2;

    widows:2;

}



blockquote{

    text-wrap:balance;

}



small{

    font-size:

        var(--kw-fs-sm);

}



code{

    font-family:

        var(--kw-font-mono);

}



/* ==========================================================================
   ACCESSIBILITY
========================================================================== */

:focus-visible{

    outline:

        2px solid var(--kw-color-gold);

    outline-offset:

        4px;

}



/* ==========================================================================
   REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion:reduce){

    html{

        scroll-behavior:auto;

    }

    *{

        animation:none!important;

        transition:none!important;

    }

}
/* ==========================================================================
   05. LAYOUT
========================================================================== */

#kw-app{

    position:relative;

    width:100%;

    overflow:hidden;

}



/* ==========================================================================
   SECTIONS
========================================================================== */

section{

    position:relative;

    padding-top:
        var(--kw-scene-padding-top);

    padding-bottom:
        var(--kw-scene-padding-bottom);

}

section:first-child{

    padding-top:0;

}



/* ==========================================================================
   PAGE WIDTH
========================================================================== */

.kw-editorial{

    width:min(
        calc(100% - 2rem),
        var(--kw-width-reading)
    );

    margin-inline:auto;

}

.kw-editorial--narrow{

    width:min(
        calc(100% - 2rem),
        var(--kw-width-narrow)
    );

    margin-inline:auto;

}

.kw-editorial--wide{

    width:min(
        calc(100% - 2rem),
        var(--kw-width-wide)
    );

    margin-inline:auto;

}

.kw-editorial--ultra{

    width:min(
        calc(100% - 2rem),
        var(--kw-width-ultra)
    );

    margin-inline:auto;

}



/* ==========================================================================
   READING RHYTHM
========================================================================== */

.kw-editorial p + p{

    margin-top:

        var(--kw-reading-gap);

}

.kw-editorial h2{

    max-width:14ch;

    margin-inline:auto;

    margin-bottom:2.75rem;

    text-align:center;

}

.kw-editorial h3{

    max-width:22ch;

    margin-top:4rem;

    margin-bottom:2rem;

    line-height:1.18;

}

.kw-editorial h4{

    margin-top:3rem;

    margin-bottom:1rem;

}

.kw-editorial ul,

.kw-editorial ol{

    margin-top:2rem;

}

.kw-editorial li + li{

    margin-top:.85rem;

}



/* ==========================================================================
   FLOW SYSTEM
========================================================================== */

.kw-flow > * + *{

    margin-top:1.5rem;

}

.kw-flow-lg > * + *{

    margin-top:2.5rem;

}

.kw-flow-xl > * + *{

    margin-top:4rem;

}



/* ==========================================================================
   STACK SYSTEM
========================================================================== */

.kw-stack > * + *{

    margin-top:var(--kw-space-6);

}

.kw-stack-lg > * + *{

    margin-top:var(--kw-space-8);

}

.kw-stack-xl > * + *{

    margin-top:var(--kw-space-10);

}



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

.kw-grid{

    display:grid;

    gap:2rem;

}

.kw-grid-2{

    display:grid;

    grid-template-columns:

        repeat(2,minmax(0,1fr));

    gap:2rem;

}

.kw-grid-3{

    display:grid;

    grid-template-columns:

        repeat(3,minmax(0,1fr));

    gap:2rem;

}



/* ==========================================================================
   CLUSTER
========================================================================== */

.kw-cluster{

    display:flex;

    flex-wrap:wrap;

    gap:1rem;

    align-items:center;

}



/* ==========================================================================
   CENTER
========================================================================== */

.kw-center{

    text-align:center;

}



/* ==========================================================================
   SPACING UTILITIES
========================================================================== */

.mt-0{

    margin-top:0!important;

}

.mt-4{

    margin-top:2rem!important;

}

.mt-6{

    margin-top:4rem!important;

}

.mt-8{

    margin-top:6rem!important;

}

.mb-0{

    margin-bottom:0!important;

}

.mb-4{

    margin-bottom:2rem!important;

}

.mb-6{

    margin-bottom:4rem!important;

}

.py-section{

    padding-top:
        var(--kw-scene-padding-top);

    padding-bottom:
        var(--kw-scene-padding-bottom);

}



/* ==========================================================================
   DIVIDER
========================================================================== */

.kw-divider{

    position:relative;

    width:180px;

    height:1px;

    margin-inline:auto;

    margin-block:1.75rem;

    background:

        rgba(212,175,55,.22);

}

.kw-divider::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:10px;

    height:10px;

    border-radius:50%;

    background:

        var(--kw-color-gold);

    transform:

        translate(-50%,-50%);

}



/* ==========================================================================
   PROGRESS BAR
========================================================================== */

#kw-progress{

    position:fixed;

    inset:0 auto auto 0;

    width:100%;

    height:4px;

    background:transparent;

    z-index:

        var(--kw-z-progress);

}

#kw-progress-bar{

    width:0;

    height:100%;

    background:

        linear-gradient(
            90deg,
            var(--kw-color-gold),
            var(--kw-color-gold-light)
        );

    transition:

        width .15s linear;

}



/* ==========================================================================
   SCROLLBAR
========================================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:

        var(--kw-color-background);

}

::-webkit-scrollbar-thumb{

    border-radius:999px;

    background:

        rgba(212,175,55,.35);

}

::-webkit-scrollbar-thumb:hover{

    background:

        rgba(212,175,55,.55);

}



/* ==========================================================================
   IMAGES
========================================================================== */

img{

    border-radius:

        var(--kw-radius-sm);

}

figcaption{

    margin-top:1rem;

    text-align:center;

    color:

        var(--kw-color-muted);

    font-size:

        var(--kw-fs-sm);

    line-height:1.7;

}



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

@media (max-width:992px){

    .kw-grid-2,

    .kw-grid-3{

        grid-template-columns:1fr;

    }

}



@media (max-width:768px){

    section{

    padding-top:

        clamp(4rem,8vw,6rem);

    padding-bottom:

        clamp(4rem,9vw,6rem);

}

    .kw-editorial,

    .kw-editorial--wide,

    .kw-editorial--narrow,

    .kw-editorial--ultra{

        width:min(
            calc(100% - 1.5rem),
            100%
        );

    }

}



@media (max-width:576px){

    .kw-divider{

        width:120px;

    }

}

/* ==========================================================================
   READER TOOLBAR
   FASE 2.1
========================================================================== */

.kw-reader-toolbar{

    position:sticky;

    top:4px;

    z-index:950;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:2rem;

    width:100%;

    min-height:68px;

    padding:

        .90rem
        clamp(1rem,3vw,2rem);

    background:

        rgba(255,255,255,.92);

    backdrop-filter:

        blur(18px);

    -webkit-backdrop-filter:

        blur(18px);

    border-bottom:

        1px solid rgba(212,175,55,.10);

    transition:

        background var(--kw-speed),
        border-color var(--kw-speed),
        box-shadow var(--kw-speed);

}

.kw-reader-toolbar.is-scrolled{

    box-shadow:

        0 10px 24px rgba(0,0,0,.05);

}

.kw-reader-toolbar__left,

.kw-reader-toolbar__center,

.kw-reader-toolbar__right{

    display:flex;

    align-items:center;

    gap:1rem;

}

.kw-reader-toolbar__left{

    flex:1;

    min-width:0;

}

.kw-reader-toolbar__center{

    justify-content:center;

}

.kw-reader-toolbar__right{

    justify-content:flex-end;

    flex:1;

}

.kw-reader-status{

    display:flex;

    flex-direction:column;

    min-width:0;

}

.kw-current-chapter{

    font-size:.78rem;

    font-weight:600;

    letter-spacing:.14em;

    text-transform:uppercase;

    color:

        var(--kw-color-gold-dark);

}

.kw-current-scene{

    margin-top:.20rem;

    font-size:

        var(--kw-fs-sm);

    color:

        var(--kw-color-muted);

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.kw-reader-metrics{

    display:flex;

    align-items:center;

    gap:1.25rem;

    font-size:

        var(--kw-fs-sm);

    color:

        var(--kw-color-muted);

    white-space:nowrap;

}

.kw-reader-metric{

    display:flex;

    align-items:center;

    gap:.35rem;

}

.kw-reader-metric strong{

    color:

        var(--kw-color-ink);

    font-weight:600;

}

.kw-toolbar-button{

    width:42px;

    height:42px;

    display:grid;

    place-items:center;

    border-radius:50%;

    border:1px solid transparent;

    transition:

        background var(--kw-speed),
        border-color var(--kw-speed),
        transform var(--kw-speed);

}

.kw-toolbar-button:hover{

    background:

        rgba(212,175,55,.08);

    border-color:

        rgba(212,175,55,.15);

}



/* ==========================================================================
   METRICS
========================================================================== */

.kw-reader-metrics{

    display:flex;

    align-items:center;

    gap:1rem;

    white-space:nowrap;

    font-size:

        var(--kw-fs-sm);

    color:

        var(--kw-color-muted);

}



.kw-reader-metrics span{

    display:inline-flex;

    align-items:center;

}



/* ==========================================================================
   TOOLBAR BUTTON
========================================================================== */

.kw-toolbar-button{

    width:42px;

    height:42px;

    display:grid;

    place-items:center;

    border-radius:50%;

    transition:

        background var(--kw-speed),
        transform var(--kw-speed);

}



.kw-toolbar-button:hover{

    background:

        rgba(212,175,55,.08);

}



/* ==========================================================================
   READER NAVIGATION
   FASE 2.2
========================================================================== */

.kw-reader-navigation{

    position:fixed;

    left:50%;

    bottom:2rem;

    transform:translateX(-50%);

    z-index:920;

    display:flex;

    align-items:center;

    gap:1rem;

}

.kw-nav-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.60rem;

    min-width:170px;

    min-height:54px;

    padding:

        0 1.80rem;

    border-radius:999px;

    background:

        rgba(255,255,255,.96);

    border:

        1px solid var(--kw-color-border);

    box-shadow:

        var(--kw-shadow-sm);

    font-weight:600;

    transition:

        transform var(--kw-speed),
        box-shadow var(--kw-speed),
        border-color var(--kw-speed),
        background var(--kw-speed);

}

.kw-nav-button:hover{

    transform:

        translateY(-2px);

    border-color:

        rgba(212,175,55,.35);

}

.kw-nav-button:disabled{

    opacity:.45;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}

.kw-nav-primary{

    background:

        var(--kw-color-gold);

    color:

        var(--kw-color-white);

    border:none;

}

.kw-nav-primary:hover{

    background:

        var(--kw-color-gold-dark);

}


/* ==========================================================================
   OVERLAY + TOC
   FASE 2.3 · 2.6
========================================================================== */

#kw-overlay{

    position:fixed;

    inset:0;

    display:none;

    z-index:

        var(--kw-z-overlay);

    background:

        rgba(24,24,24,.28);

    backdrop-filter:

        blur(8px);

}

#kw-overlay.is-visible{

    display:block;

}

.kw-reader-panel{

    position:absolute;

    inset:0 auto 0 0;

    width:min(380px,92vw);

    height:100%;

    overflow:auto;

    background:

        var(--kw-color-white);

    box-shadow:

        20px 0 48px rgba(0,0,0,.08);

    padding:

        2rem;

}

.kw-reader-panel h3{

    margin-bottom:2rem;

}

.kw-toc{

    list-style:none;

    padding:0;

    margin:0;

}

.kw-toc li + li{

    margin-top:.35rem;

}

.kw-toc button{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:

        .90rem 1rem;

    border-radius:

        var(--kw-radius-md);

    text-align:left;

    transition:

        background var(--kw-speed);

}

.kw-toc button:hover{

    background:

        rgba(212,175,55,.08);

}

.kw-toc .is-current{

    background:

        rgba(212,175,55,.12);

    color:

        var(--kw-color-gold-dark);

}

.kw-toc .is-visited{

    opacity:.80;

}

.kw-toc .is-pending{

    opacity:.45;

}

/* ==========================================================================
   06. COVER
========================================================================== */

.kw-cover{

    position:relative;

    min-height:100svh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    overflow:hidden;

    isolation:isolate;

    background:

        radial-gradient(
            circle at top,
            rgba(212,175,55,.06),
            transparent 42%
        ),

        linear-gradient(
            180deg,
            #ffffff 0%,
            var(--kw-color-background) 100%
        );

}



/* ==========================================================================
   BACKGROUND DECORATION
========================================================================== */

.kw-cover::before{

    content:"";

    position:absolute;

    inset:auto;

    top:-16rem;

    right:-14rem;

    width:34rem;

    height:34rem;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(212,175,55,.08),

            transparent 72%

        );

    pointer-events:none;

    z-index:-1;

}

.kw-cover::after{

    content:"";

    position:absolute;

    bottom:-14rem;

    left:-14rem;

    width:28rem;

    height:28rem;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(232,155,176,.08),

            transparent 72%

        );

    pointer-events:none;

    z-index:-1;

}



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

.kw-cover__hero{

    text-align:center;

    padding-top:

        .75rem;

    padding-bottom:

        .25rem;

}

.kw-cover__eyebrow{

    display:inline-block;

    margin-bottom:2rem;

    font-size:.80rem;

    font-weight:600;

    letter-spacing:.34em;

    text-transform:uppercase;

    color:

        var(--kw-color-gold);

}

.kw-cover__title{

    max-width:10ch;

    margin-inline:auto;

    font-size:

        clamp(
            3.5rem,
            6vw,
            5.8rem
        );

    line-height:.94;

    letter-spacing:-.04em;

}

.kw-cover__subtitle{

    max-width:44rem;

    margin:

        2.25rem auto 0;

    font-size:

        clamp(
            1.10rem,
            .95rem + .40vw,
            1.35rem
        );

    line-height:1.9;

letter-spacing:.01em;

    color:

        var(--kw-color-muted);

}



/* ==========================================================================
   IMAGE
========================================================================== */

.kw-cover__media{

    padding-top:.75rem;

    padding-bottom:2rem;

}

.kw-cover__intro{

    width:min(100%, 680px);

    margin:

        2rem auto 0;

    text-align:center;

}

.kw-cover__intro p{

    margin:0;

    font-size:clamp(1.05rem,.98rem + .25vw,1.2rem);

    line-height:1.9;

    color:var(--kw-color-muted);

    max-width:42rem;

    margin-inline:auto;

}

.kw-cover__figure{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:fit-content;

    margin-inline:auto;

    padding:

        clamp(1.5rem,3vw,2.5rem);

    overflow:visible;

    background:transparent;

    box-shadow:none;

}

.kw-cover__image{

    display:block;

    width:min(100%, 420px);

    margin-inline:auto;

    aspect-ratio:2 / 3;

    object-fit:cover;

    border-radius:var(--kw-radius-lg);

    box-shadow:var(--kw-shadow-md);

    transition:

        transform .9s ease;

}

.kw-cover__figure:hover .kw-cover__image{

    transform:scale(1.02);

}

.kw-cover__caption{

    width:100%;

    max-width:420px;

    margin-top:1.25rem;

    padding:0;

    font-size:var(--kw-fs-sm);

    line-height:1.6;

    color:var(--kw-color-muted);

    text-align:center;

}



/* ==========================================================================
   AUTHOR
========================================================================== */

.kw-cover__author{

    text-align:center;

    padding-top:3.5rem;

    padding-bottom:4rem;

}

/* ==========================================
   AUTORA · RETRATO EDITORIAL
========================================== */

.kw-cover__author-figure{

    margin:0 auto 1.75rem;

    display:flex;

    justify-content:center;

}

.kw-cover__author-photo{

    display:block;

    width:min(100%, 240px);

    aspect-ratio:2 / 3;

    object-fit:cover;

    border-radius:var(--kw-radius-xl);

    background:var(--kw-color-white);

    box-shadow:var(--kw-shadow-lg);

    transition:transform .35s ease;

}

.kw-cover__author-photo:hover{

    transform:translateY(-4px);

}

.kw-cover__author-label{

    display:block;

    margin-bottom:.9rem;

    font-size:.78rem;

    letter-spacing:.28em;

    text-transform:uppercase;

    color:

        var(--kw-color-soft);

}

.kw-cover__author-name{

    margin-bottom:.5rem;

}

.kw-cover__author-role{

    display:block;

    width:fit-content;

    max-width:36rem;

    margin:

        .75rem auto 0;

    text-align:center;

    font-size:var(--kw-fs-md);

    line-height:1.7;

    color:var(--kw-color-muted);

}



/* ==========================================================================
   EDITORIAL QUOTE
========================================================================== */

.kw-cover__quote{

    padding-block:

        clamp(4rem,7vw,6rem);

}

.kw-cover__quote blockquote{

    max-width:18ch;

    margin-inline:auto;

    font-family:

        var(--kw-font-heading);

    font-size:

        clamp(
            2rem,
            2vw + 1.4rem,
            3.3rem
        );

    line-height:1.18;

    text-align:center;

    color:

        var(--kw-color-ink);

}

.kw-cover__quote blockquote::before{

    content:"“";

    display:block;

    margin-bottom:.6rem;

    font-size:5rem;

    line-height:.6;

    color:

        rgba(212,175,55,.18);

}



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

.kw-cover__footer{

    margin-top:auto;

    padding-bottom:3rem;

    display:flex;

    justify-content:center;

}



/* ==========================================================================
   SCROLL INDICATOR
========================================================================== */

.kw-scroll-indicator{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:1rem;

    opacity:.72;

    transition:

        opacity var(--kw-speed);

}

.kw-scroll-indicator:hover{

    opacity:1;

}

.kw-scroll-indicator p{

    margin:0;

    font-size:.78rem;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:

        var(--kw-color-muted);

}

.kw-scroll-indicator__mouse{

    position:relative;

    width:28px;

    height:48px;

    border-radius:999px;

    border:1.5px solid rgba(0,0,0,.18);

}

.kw-scroll-indicator__mouse::before{

    content:"";

    position:absolute;

    left:50%;

    top:8px;

    width:4px;

    height:9px;

    border-radius:999px;

    background:

        var(--kw-color-gold);

    transform:translateX(-50%);

    animation:

        kwScroll 2.2s infinite;

}



/* ==========================================================================
   COVER ANIMATION
========================================================================== */

@keyframes kwScroll{

    0%{

        opacity:0;

        transform:

            translate(-50%,0);

    }

    30%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:

            translate(-50%,14px);

    }

}



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

@media (max-width:992px){

    .kw-cover__hero{

        padding-top:5rem;

    }

}



@media (max-width:768px){

    .kw-cover{

        min-height:auto;

    }

    .kw-cover__figure{

        border-radius:

            var(--kw-radius-lg);

    }

    .kw-cover__quote blockquote{

        font-size:

            clamp(
                1.8rem,
                7vw,
                2.4rem
            );

    }

}



@media (max-width:576px){

    .kw-cover__subtitle{

        line-height:1.85;

    }

    .kw-cover__caption{

        padding:1.25rem;

    }

}
/* ==========================================================================
   07. LETTER
========================================================================== */

.kw-letter{

    position:relative;

    background:

        var(--kw-color-surface);

}

.kw-letter::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        linear-gradient(
            180deg,
            rgba(212,175,55,.015),
            transparent 18%,
            transparent 82%,
            rgba(212,175,55,.015)
        );

}



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

.kw-letter__header{

    text-align:center;

    margin-bottom:

        clamp(
            4rem,
            6vw,
            6rem
        );

}

.kw-letter__eyebrow{

    display:inline-block;

    margin-bottom:1.5rem;

    font-size:.80rem;

    font-weight:600;

    letter-spacing:.32em;

    text-transform:uppercase;

    color:

        var(--kw-color-gold);

}

.kw-letter__title{

    max-width:11ch;

    margin-inline:auto;

}

.kw-letter__title + p{

    margin-top:2rem;

}



/* ==========================================================================
   CONTENT
========================================================================== */

.kw-letter__content{

    width:min(
        100%,
        var(--kw-width-reading)
    );

    margin-inline:auto;

}

.kw-letter__content p{

    font-size:

        clamp(
            1.08rem,
            .98rem + .35vw,
            1.28rem
        );

    line-height:1.92;

    color:

        var(--kw-color-text);

    max-width:none;

}

.kw-letter__content p + p{

    margin-top:

        var(--kw-reading-gap);

}



/* ==========================================================================
   DROP CAP
========================================================================== */

.kw-letter__content p:first-child::first-letter{

    float:left;

    margin-top:.28rem;

    margin-right:.70rem;

    font-family:

        var(--kw-font-heading);

    font-size:

        clamp(
            4.8rem,
            7vw,
            6rem
        );

    line-height:.82;

    color:

        var(--kw-color-gold);

}



/* ==========================================================================
   EMPHASIS
========================================================================== */

.kw-letter__content strong{

    color:

        var(--kw-color-ink);

    font-weight:600;

}

.kw-letter__content em{

    color:

        var(--kw-color-muted);

}



/* ==========================================================================
   EDITORIAL QUOTE
========================================================================== */

.kw-letter__quote{

    width:min(
        100%,
        22ch
    );

    margin:2.5rem auto 1.5rem;

    text-align:center;

    position:relative;

}

.kw-letter__quote::before{

    content:"“";

    position:absolute;

    left:50%;

    top:-2.6rem;

    transform:translateX(-50%);

    font-family:

        var(--kw-font-heading);

    font-size:5.8rem;

    line-height:.5;

    color:

        rgba(212,175,55,.16);

}

.kw-letter__quote blockquote{

    font-family:

        var(--kw-font-heading);

    font-size:

        clamp(
            2rem,
            2vw + 1.3rem,
            3rem
        );

    line-height:1.20;

    color:

        var(--kw-color-ink);

}



/* ==========================================================================
   SIGNATURE
========================================================================== */

.kw-letter__footer{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:.85rem;

    margin:2rem auto 1.75rem;

    text-align:center;

}

.kw-letter__signature{

    display:flex;

    justify-content:center;

    margin-bottom:2rem;

}

.kw-letter__signature img{

    width:min(
        220px,
        55vw
    );

    opacity:.92;

}

.kw-letter__author{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    gap:.45rem;

    max-width:420px;

    margin:0 auto;

}

.kw-letter__role{

    color:var(--kw-color-muted);

    line-height:1.9;

    text-align:center;

}

.kw-letter__role-secondary{

    margin-top:.15rem;

    font-size:.92rem;

    font-weight:500;

    color:var(--kw-color-muted);

    text-align:center;

    line-height:1.6;

}

.kw-letter__role br{

    display:block;

    content:"";

    margin-top:.20rem;

}



/* ==========================================================================
   SIGNATURE DIVIDER
========================================================================== */

.kw-letter__footer .kw-divider{

    margin-bottom:

        3rem;

}



/* ==========================================================================
   MICRO TYPOGRAPHY
========================================================================== */

.kw-letter__content p{

    hyphens:auto;

    hanging-punctuation:first;

}



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

@media (max-width:768px){

    .kw-letter__content p{

        font-size:1.08rem;

    }

    .kw-letter__content p:first-child::first-letter{

        font-size:4.5rem;

        margin-right:.55rem;

    }

}



@media (max-width:576px){

    .kw-letter__header{

        margin-bottom:3.5rem;

    }

    .kw-letter__quote{

        width:100%;

    }

    .kw-letter__quote blockquote{

        font-size:

            clamp(
                1.9rem,
                8vw,
                2.4rem
            );

    }

}
/* ==========================================================================
   08. CHAPTER
========================================================================== */

.kw-chapter{

    position:relative;

    background:

        var(--kw-color-background);

}



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

.kw-chapter__hero{

    text-align:center;

    width:min(100%,720px);

    margin-inline:auto;

    margin-bottom:

        clamp(3rem,6vw,5rem);

}

.kw-chapter__eyebrow{

    display:inline-flex;

    align-items:center;

    gap:1rem;

    margin-bottom:

        clamp(1.8rem,3vw,2.6rem);

    font-size:.80rem;

    font-weight:600;

    letter-spacing:.30em;

    text-transform:uppercase;

    color:

        var(--kw-color-gold);

}

.kw-chapter__eyebrow::before{

    content:"";

    width:36px;

    height:1px;

    background:

        currentColor;

    opacity:.45;

}

.kw-chapter__title{

    width:min(
        100%,
        10ch
    );

    margin-inline:auto;

    margin-bottom:

        clamp(1.6rem,3vw,2.2rem);

}

.kw-chapter__subtitle{

     width:min(
        100%,
        42rem
    );

    margin:

        0 auto;

    font-size:

        clamp(
            1.08rem,
            .98rem + .35vw,
            1.30rem
        );

    color:

        var(--kw-color-muted);

    line-height:1.9;

letter-spacing:.01em;

}



/* ==========================================================================
   IMAGE
========================================================================== */

.kw-chapter__image{

    margin-bottom:

        calc(
            var(--kw-scene-gap) * 1.15
        );

}

.kw-chapter__figure{

    overflow:hidden;

    border-radius:

        var(--kw-radius-xl);

    background:

        var(--kw-color-surface);

    box-shadow:

        var(--kw-shadow-md);

    margin-top:

    clamp(3rem,6vw,4.5rem);

margin-bottom:

    clamp(5rem,8vw,6.5rem);

}

.kw-chapter__figure img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    transition:

        transform .9s ease;

}

.kw-chapter__figure:hover img{

    transform:scale(1.025);

}

.kw-chapter__figure figcaption{

    padding:

        1.75rem 2rem;

}



/* ==========================================================================
   NARRATIVE
========================================================================== */

.kw-chapter__narrative{

    width:min(
        100%,
        var(--kw-width-reading)
    );

    margin-inline:auto;

    margin-bottom:

        calc(
            var(--kw-scene-gap) * 1.3
        );

}

.kw-chapter__narrative header{

    margin-bottom:

        clamp(2rem,4vw,3rem);

}

.kw-chapter__narrative h3{

    text-align:center;

    width:min(100%,18ch);

    margin-inline:auto;

    margin-top:0;

    line-height:1.18;

}

.kw-chapter__narrative p{

    font-size:

        clamp(
            1.10rem,
            1rem + .30vw,
            1.30rem
        );

    line-height:1.88;

    max-width:none;

    color:

        var(--kw-color-text);

}

.kw-chapter__narrative p + p{

    margin-top:

        var(--kw-reading-gap);

}



/* ==========================================================================
   DROP CAP
========================================================================== */

.kw-chapter__narrative p:first-child::first-letter{

    float:left;

    margin-right:.70rem;

    margin-top:.28rem;

    font-family:

        var(--kw-font-heading);

    font-size:

        clamp(
            5rem,
            6vw,
            6rem
        );

    line-height:.82;

    color:

        var(--kw-color-gold);

}



/* ==========================================================================
   SIGNALS
========================================================================== */

.kw-chapter__signals{

    margin-block:
        clamp(4rem,7vw,6rem);

}

.kw-callout{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #FDFBF8 100%
        );

    border:
        1px solid rgba(212,175,55,.16);

    border-left:
        6px solid var(--kw-color-gold);

    border-radius:
        var(--kw-radius-xl);

    padding:
        clamp(2.4rem,4vw,3.25rem);

    box-shadow:
        0 18px 42px rgba(0,0,0,.06);

}

.kw-callout::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(212,175,55,.07),
            transparent 62%
        );

    pointer-events:none;

}

.kw-callout .kw-badge{

    margin-bottom:2rem;

    background:
        rgba(212,175,55,.10);

}

.kw-checklist{

    list-style:none;

    margin:0;

    padding:0;

}

.kw-checklist li{

    position:relative;

    padding:

        1.35rem 0 1.35rem 2.2rem;

    line-height:1.85;

    border-bottom:

        1px solid rgba(212,175,55,.14);

}

.kw-checklist li:last-child{

    border-bottom:none;

    padding-bottom:0;

}

.kw-checklist li:first-child{

    padding-top:.25rem;

}

.kw-checklist li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:1.45rem;

    color:

        var(--kw-color-gold);

    font-size:1rem;

    font-weight:700;

}

.kw-checklist li:hover{

    color:

        var(--kw-color-ink);

}


/* ==========================================================================
   IMPACT
========================================================================== */

.kw-chapter__impact{

    margin-block:
        clamp(5rem,8vw,7rem);

}

.kw-impact-card{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #FFFDF9 0%,
            #FFFFFF 100%
        );

    border:
        1px solid rgba(212,175,55,.18);

    border-radius:
        var(--kw-radius-xl);

    padding:
        clamp(2.5rem,4vw,3.4rem);

    box-shadow:
        var(--kw-shadow-sm);

}

.kw-impact-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:4px;

    background:
        linear-gradient(
            90deg,
            var(--kw-color-gold),
            var(--kw-color-gold-light)
        );

}

.kw-impact-card .kw-badge{

    margin-bottom:2rem;

}

.kw-impact-card h3{

    margin-bottom:2rem;

    max-width:18ch;

    line-height:1.18;

}

.kw-impact-list{

    list-style:none;

    margin:0;

    padding:0;

}

.kw-impact-list li{

    position:relative;

    padding:

        1.2rem 0 1.2rem 2.4rem;

    border-bottom:

        1px solid rgba(212,175,55,.12);

    line-height:1.8;

}

.kw-impact-list li:last-child{

    border-bottom:none;

}

.kw-impact-list li::before{

    content:"—";

    position:absolute;

    left:0;

    color:

        var(--kw-color-gold-dark);

    font-weight:700;

    font-size:1.2rem;

}


/* ==========================================================================
   KINTSUGI PILLAR
========================================================================== */

.kw-chapter__pillar{

    margin-block:
        clamp(6rem,9vw,8rem);

}

.kw-pillar{

    position:relative;

    max-width:760px;

    margin-inline:auto;

    padding:

        clamp(3rem,5vw,4rem);

    text-align:center;

    background:
        linear-gradient(
            180deg,
            #FFFDF9,
            #FFFFFF
        );

    border:

        1px solid rgba(212,175,55,.18);

    border-radius:

        var(--kw-radius-xl);

    box-shadow:

        var(--kw-shadow-sm);

}

.kw-pillar::before{

    content:"";

    position:absolute;

    left:50%;

    top:-22px;

    transform:translateX(-50%);

    width:44px;

    height:44px;

    border-radius:50%;

    background:

        var(--kw-color-background);

    border:

        1px solid rgba(212,175,55,.18);

}

.kw-pillar::after{

    content:"✦";

    position:absolute;

    left:50%;

    top:-11px;

    transform:translateX(-50%);

    color:

        var(--kw-color-gold);

    font-size:1rem;

}

.kw-pillar .kw-badge{

    margin-bottom:2rem;

}

.kw-pillar h3{

    max-width:14ch;

    margin:

        0 auto 2rem;

    font-size:

        clamp(
            2rem,
            2vw + 1rem,
            2.8rem
        );

    line-height:1.15;

}

.kw-pillar p{

    max-width:58ch;

    margin-inline:auto;

    font-size:

        clamp(
            1.08rem,
            1rem + .25vw,
            1.24rem
        );

    line-height:1.95;

    color:

        var(--kw-color-text);

}

/* ==========================================================================
   TRANSICIÓN CARTA → PRIMERA GRIETA
========================================================================== */

.kw-letter + .kw-chapter{

    padding-top:1.75rem;

}

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

@media (max-width:768px){

    .kw-chapter__figure{

        border-radius:

            var(--kw-radius-lg);

    }

    .kw-callout,

    .kw-impact-card,

    .kw-pillar{

        border-radius:

            var(--kw-radius-lg);

    }

    .kw-chapter__narrative p:first-child::first-letter{

        font-size:4.5rem;

    }

}



@media (max-width:576px){

    .kw-chapter__hero{

        margin-bottom:4rem;

    }

    .kw-chapter__subtitle{

        line-height:1.85;

    }

}

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

.kw-chapter__footer{

    margin-top:

        clamp(5rem,8vw,7rem);

}

.kw-chapter__footer .kw-card{

    position:relative;

    max-width:760px;

    margin-inline:auto;

    padding:

        clamp(3.5rem,6vw,4.8rem);

}

.kw-chapter__footer .kw-card::after{

    content:"✦";

    position:absolute;

    top:1.4rem;

    left:50%;

    transform:translateX(-50%);

    color:

        rgba(212,175,55,.75);

    font-size:1rem;

}

.kw-chapter__closing{

    width:min(100%,30ch);

    margin:

        1.8rem auto 0;

    font-family:

        var(--kw-font-heading);

    font-size:

        clamp(
            1.7rem,
            1.4rem + .8vw,
            2.2rem
        );

    line-height:1.42;

    letter-spacing:-.02em;

    text-align:center;

    color:

        var(--kw-color-ink);

}
/* ==========================================================================
   09. REFLECTION
   10. EXERCISE
   11. DIAGNOSIS
========================================================================== */



/* ==========================================================================
   REFLECTION
   RC2.7
========================================================================== */

.kw-reflection{

    background:
        linear-gradient(
            180deg,
            #FFFFFF,
            #FCFBF8
        );

}

.kw-reflection > .container{

    max-width:900px;

}

.kw-reflection__header{

    width:100%;
    max-width:720px;

    margin-inline:auto;

    text-align:center;

    margin-bottom:clamp(3.5rem,5vw,5rem);

}

.kw-reflection__title{

    max-width:11ch;

    margin-inline:auto;

}

.kw-reflection__intro{

    max-width:42rem;

    margin:

        2rem auto 0;

    text-align:center;

    color:var(--kw-color-muted);

    line-height:1.9;

}

.kw-reflection__quote-wrapper{

    margin:

        clamp(2rem,4vw,3rem)

        auto;

}

.kw-reflection__quote{

    width:min(100%,18ch);

    margin:

        clamp(2.75rem,5vw,4rem)

        auto;

    text-align:center;

    position:relative;

}

.kw-reflection__content{

    max-width:720px;

    margin:

        0 auto;

}

.kw-reflection__footer{

    margin-top:3rem;

    text-align:center;

}

.kw-reflection__closing{

    max-width:34ch;

    margin-inline:auto;

    font-family:

        var(--kw-font-heading);

    font-size:

        clamp(
            1.6rem,
            1.4rem + .6vw,
            2rem
        );

    line-height:1.45;

}

/* ==========================================
   RC2.7
   Layout editorial
========================================== */

.kw-reflection .col-xl-9,
.kw-reflection .col-lg-10{

    display:flex;
    flex-direction:column;
    align-items:center;

}

.kw-reflection__header,
.kw-reflection__content,
.kw-reflection__questions,
.kw-kintsugi-note,
.kw-reflection__footer,
.kw-reflection__transition,
.kw-scene-indicator{

    width:100%;
    max-width:720px;
    margin-inline:auto;

}

.kw-richtext{

    max-width:42rem;

    margin-inline:auto;

}

.kw-richtext p{

    font-size:1.08rem;

    line-height:2;

    color:var(--kw-color-text);

}

.kw-richtext p+p{

    margin-top:1.8rem;

}

.kw-reflection__content{

    margin-top:0;

}

.kw-reflection__content > .kw-richtext{

    margin-top:0;

}

.kw-reflection__content > .kw-richtext > p:first-child{

    margin-top:0;

}

/* ==========================================================================
   REFLECTION QUOTE
========================================================================== */


.kw-reflection__quote blockquote{

    font-family:

        var(--kw-font-heading);

    font-size:

        clamp(
            2.2rem,
            2vw + 1.5rem,
            3.3rem
        );

    line-height:1.18;

    letter-spacing:-.02em;

    color:

        var(--kw-color-ink);

    text-wrap:balance;

}



/* ==========================================================================
   QUESTIONS
========================================================================== */

.kw-reflection__questions{

    margin-top:

        clamp(2.5rem,4vw,3rem);

}

.kw-reflection__questions-header{

    text-align:center;

    margin-bottom:3rem;

}

.kw-reflection__questions-header h3{

    max-width:14ch;

    margin:

        1rem auto 0;

}

.kw-reflection__list{

    list-style:none;

    display:grid;

    gap:1.25rem;

}

.kw-reflection__list li{

    padding:

        2rem;

    border-radius:

        22px;

    background:

        linear-gradient(
            180deg,
            #FFFFFF,
            #FDFBF8
        );

    border:

        1px solid rgba(212,175,55,.12);

    box-shadow:

        0 12px 28px rgba(0,0,0,.04);

}

.kw-reflection__list li:hover{

    border-color:

        rgba(212,175,55,.35);

    transform:

        translateY(-2px);

}



/* ==========================================================================
   KINTSUGI NOTE
========================================================================== */

.kw-kintsugi-note{

    max-width:760px;

    margin:

        clamp(3rem,5vw,4rem)

        auto;

    padding:

        clamp(3rem,5vw,4rem);

    text-align:center;

    background:

        linear-gradient(
            180deg,
            #FFFDF9,
            #FFFFFF
        );

    border:

        1px solid rgba(212,175,55,.12);

    border-radius:

        var(--kw-radius-xl);

    box-shadow:

        var(--kw-shadow-sm);

}

.kw-kintsugi-note p{

    margin:

        1.5rem auto 0;

    max-width:34ch;

    line-height:1.9;

}



/* ==========================================================================
   EXERCISE
========================================================================== */

.kw-exercise{

    position:relative;

    background:

        var(--kw-color-background);

}

.kw-exercise__header{

    text-align:center;

    margin-bottom:

        clamp(2.5rem,4vw,3.5rem);

}

.kw-exercise__eyebrow{

    display:inline-block;

    margin-bottom:1rem;

    font-size:.78rem;

    font-weight:600;

    letter-spacing:.30em;

    text-transform:uppercase;

    color:

        var(--kw-color-gold);

}

.kw-exercise__title{

    width:min(
        100%,
        14ch
    );

    margin-inline:auto;

}

.kw-exercise__intro{

    width:min(
        100%,
        44rem
    );

    margin:

        2rem auto 0;

    text-align:center;

    color:

        var(--kw-color-muted);

}



/* ==========================================================================
   WORKBOOK CARD
========================================================================== */

.kw-exercise__card{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #FDFBF8 100%
        );

    border:
        1px solid rgba(212,175,55,.10);

    border-radius:
        var(--kw-radius-xl);

    padding:
        clamp(2.5rem,4vw,3.5rem);

    box-shadow:
        var(--kw-shadow-sm);

}

/* --------------------------------------------------
   Bloques editoriales
--------------------------------------------------- */

.kw-exercise__block{

    position:relative;

    padding-block:
        clamp(2.2rem,4vw,3rem);

}

.kw-exercise__block:first-child{

    padding-top:0;

}

.kw-exercise__block:last-child{

    padding-bottom:0;

}

.kw-exercise__block + .kw-exercise__block{

    border-top:
        1px solid rgba(212,175,55,.08);

}

/* --------------------------------------------------
   Introducción del ejercicio
--------------------------------------------------- */

.kw-exercise__block:nth-child(-n+2){

    padding-bottom:
        clamp(2rem,3vw,2.5rem);

}

.kw-exercise__block:nth-child(2){

    margin-bottom:
        clamp(1.5rem,3vw,2rem);

}

/* --------------------------------------------------
   Paso a paso
--------------------------------------------------- */

.kw-exercise__block:nth-child(3){

    margin-top:
        .5rem;

    margin-bottom:
        clamp(2.5rem,4vw,3.5rem);

}

/* --------------------------------------------------
   Integración
--------------------------------------------------- */

.kw-exercise__block:nth-child(n+4){

    max-width:720px;

    margin-inline:auto;

}
/* ==========================================================================
   PASOS DEL EJERCICIO
========================================================================== */

.kw-exercise__steps{

    display:flex;

    flex-direction:column;

    gap:1.75rem;

    position:relative;

}

/* Línea editorial vertical */

.kw-exercise__steps::before{

    content:"";

    position:absolute;

    top:1.5rem;

    bottom:1.5rem;

    left:2.2rem;

    width:2px;

    background:linear-gradient(
        180deg,
        rgba(212,175,55,.20),
        rgba(212,175,55,.06)
    );

}

/* Paso */

.kw-exercise__step{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:1.5rem;

    padding:

        1.6rem
        1.8rem;

    background:#FFFFFF;

    border:1px solid rgba(212,175,55,.12);

    border-radius:var(--kw-radius-xl);

    box-shadow:0 10px 26px rgba(0,0,0,.03);

    transition:

        transform .30s ease,
        border-color .30s ease,
        box-shadow .30s ease;

}

.kw-exercise__step:hover{

    transform:translateY(-3px);

    border-color:rgba(212,175,55,.30);

    box-shadow:0 18px 40px rgba(0,0,0,.06);

}

/* Número */

.kw-exercise__step-number{

    position:relative;

    z-index:2;

    flex:0 0 72px;

    width:72px;

    height:72px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:linear-gradient(
        180deg,
        rgba(212,175,55,.16),
        rgba(212,175,55,.08)
    );

    border:1px solid rgba(212,175,55,.20);

    color:var(--kw-color-gold-dark);

    font-size:1.35rem;

    font-weight:700;

    box-shadow:0 8px 20px rgba(212,175,55,.10);

}

/* Contenido */

.kw-exercise__step-content{

    flex:1;

    padding-top:.25rem;

}

.kw-exercise__step-content p{

    margin:0;

    max-width:none;

    line-height:1.9;

    font-size:1.03rem;

}

/* Responsive */

@media (max-width:768px){

    .kw-exercise__steps::before{

        left:1.7rem;

    }

    .kw-exercise__step{

        gap:1rem;

        padding:1.35rem;

    }

    .kw-exercise__step-number{

        flex:0 0 56px;

        width:56px;

        height:56px;

        font-size:1.15rem;

    }

}


/* ==========================================================================
   DIAGNOSIS
   RC2.8
========================================================================== */

.kw-diagnosis{

    background:
        linear-gradient(
            180deg,
            #FFFFFF,
            #FCFBF8
        );

}

.kw-diagnosis > .container{

    width:min(100%,900px);

    margin-inline:auto;

    padding-inline:1rem;

}

.kw-diagnosis__header{

    width:100%;
    max-width:720px;

    margin-inline:auto;

    text-align:center;

    margin-bottom:
         clamp(1.5rem,2vw,2rem);

}

.kw-diagnosis__title{

    max-width:11ch;

    margin-inline:auto;

}

.kw-diagnosis__subtitle{

    max-width:42rem;

    margin:
        2rem auto 0;

    color:var(--kw-color-muted);

    line-height:1.9;

}

.kw-diagnosis__intro{

    width:100%;
    max-width:720px;

    margin:
        0 auto
         clamp(2.5rem,4vw,3.25rem);

}

.kw-diagnosis__intro p{

    font-size:1.08rem;

    line-height:2;

    color:var(--kw-color-text);

}

.kw-diagnosis__intro .kw-card{

    margin-top:2rem;

}

/* ==========================================================================
   LEAD MAGNET
========================================================================== */

.kw-diagnosis__results{

    width:100%;
    max-width:760px;

    margin:
        clamp(3.5rem,6vw,4.5rem)
        auto
        clamp(5rem,8vw,6rem);

}

.kw-diagnosis__lead-header{

    max-width:680px;

    margin:
        0 auto
        clamp(2.5rem,4vw,3rem);

    text-align:center;

}

.kw-diagnosis__lead-header h3{

    max-width:11ch;

    margin:
        0 auto
        2rem;

    font-size:
        clamp(
            2.5rem,
            2vw + 1.6rem,
            3.4rem
        );

    line-height:1.08;

    letter-spacing:-.03em;

}

.kw-diagnosis__lead-header p{

    max-width:44rem;

    margin-inline:auto;

    font-size:1.12rem;

    line-height:2;

    color:var(--kw-color-muted);

}

.kw-diagnosis__lead-card{

    max-width:820px;

    margin-inline:auto;

    padding:
        clamp(3.5rem,6vw,4.5rem);

    background:
        linear-gradient(
            180deg,
            #FFFFFF,
            #FCFBF8
        );

    border:1px solid rgba(212,175,55,.12);

    border-radius:var(--kw-radius-xl);

    box-shadow:
        0 24px 60px rgba(0,0,0,.05);

}

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

.kw-lead-form{

    display:flex;

    flex-direction:column;

    gap:2rem;

}

.kw-form-group{

    display:flex;

    flex-direction:column;

    gap:.7rem;

}

.kw-form-group label{

    font-size:.92rem;

    font-weight:600;

    color:var(--kw-color-text);

}

.kw-form-group input{

    width:100%;

    min-height:58px;

    padding:0 1.25rem;

    border-radius:16px;

    border:1px solid rgba(212,175,55,.16);

    background:#FFFFFF;

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

}

.kw-form-group input:hover{

    border-color:
        rgba(212,175,55,.30);

}

.kw-form-group input:focus{

    outline:none;

    border-color:var(--kw-color-gold);

    box-shadow:
        0 0 0 5px rgba(212,175,55,.10);

}

.kw-form-check{

    display:flex;

    align-items:flex-start;

    gap:.85rem;

    font-size:.95rem;

    line-height:1.8;

    color:var(--kw-color-muted);

}

.kw-form-check input{

    margin-top:.35rem;

    accent-color:var(--kw-color-gold);

}

.kw-form-feedback{

    margin-top:.5rem;

    text-align:center;

    font-size:.92rem;

    color:var(--kw-color-muted);

}
/* ==========================================================================
   BOTÓN DEL DIAGNÓSTICO
========================================================================== */

#kw-send-diagnosis{

    width:100%;

    min-height:60px;

    margin-top:.5rem;

    border:none;

    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            var(--kw-color-gold),
            var(--kw-color-gold-dark)
        );

    color:#FFFFFF;

    font-size:1rem;

    font-weight:600;

    letter-spacing:.02em;

    transition:
        transform .30s ease,
        box-shadow .30s ease;

    box-shadow:
        0 16px 34px rgba(212,175,55,.24);

}

#kw-send-diagnosis:hover{

    transform:translateY(-2px);

    box-shadow:
        0 22px 44px rgba(212,175,55,.30);

}

#kw-send-diagnosis:hover{

    transform:translateY(-2px);

    box-shadow:
        0 18px 36px rgba(212,175,55,.28);

}


/* ==========================================================================
   QUESTIONS
========================================================================== */

.kw-diagnosis__questions{

    display:grid;

    gap:1.5rem;

}

.kw-question{

    padding:

    clamp(
        1.75rem,
        2.8vw,
        2.25rem
    );

    background:

        var(--kw-color-surface);

    border-radius:

        var(--kw-radius-lg);

    border:

        1px solid var(--kw-color-border);

    transition:

        border-color var(--kw-speed),

        transform var(--kw-speed),

        box-shadow var(--kw-speed);

}

.kw-question:hover{

    border-color:

        rgba(212,175,55,.35);

    transform:

        translateY(-2px);

    box-shadow:

        var(--kw-shadow-xs);

}



/* ==========================================================================
   RESULTS
========================================================================== */

.kw-diagnosis__results{

    margin-top:

        calc(var(--kw-scene-gap) * 2);

}

.kw-result-grid{

    display:grid;

    grid-template-columns:

        repeat(3,minmax(0,1fr));

    gap:2rem;

}

.kw-result-card{

    background:

        var(--kw-color-surface);

    border-radius:

        var(--kw-radius-xl);

    padding:

    clamp(
        2rem,
        3vw,
        2.75rem
    );

    text-align:center;

    box-shadow:

        var(--kw-shadow-sm);

}

.kw-result-card span{

    width:72px;

    height:72px;

    display:grid;

    place-items:center;

    margin:0 auto 1.5rem;

    border-radius:50%;

    background:

        rgba(212,175,55,.10);

    color:

        var(--kw-color-gold-dark);

    font-weight:700;

}

.kw-result-card h4{

    margin-bottom:1rem;

}



/* ==========================================================================
   NEXT STEP
========================================================================== */

.kw-diagnosis__next{

    margin-top:

        calc(var(--kw-scene-gap) * 1.8);

}

.kw-diagnosis__quote{

    width:min(
        100%,
        20ch
    );

    margin-inline:auto;

    text-align:center;

}

.kw-diagnosis__quote blockquote{

    font-family:

        var(--kw-font-heading);

    font-size:

        clamp(
            2rem,
            2vw + 1.4rem,
            3rem
        );

    line-height:1.2;

}



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

@media (max-width:992px){

    .kw-grid-2{

        grid-template-columns:1fr;

    }

    .kw-grid-3{

        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:1.5rem;

    }

}

@media (max-width:768px){

    .kw-grid-3{

        grid-template-columns:1fr;
        gap:1.5rem;

    }

    .kw-cta__journey{

        margin-top:4rem;

    }

}



@media (max-width:768px){

    .kw-exercise__step{

        align-items:flex-start;

    }

}



@media (max-width:576px){

    .kw-question,

    .kw-result-card,

    .kw-kintsugi-note,

    .kw-exercise__card{

        border-radius:

            var(--kw-radius-lg);

    }

}

/* ==========================================================================
   NUEVOS COMPONENTES EDITORIALES
   Assessment · Journey · Footer · Results
========================================================================== */

/* =========================
   CHAPTER ASSESSMENT
========================= */

.kw-chapter__assessment{

    margin-top:clamp(5rem,8vw,7rem);

}

.kw-chapter__assessment-header{

    max-width:760px;

    margin-inline:auto;

    margin-bottom:

        clamp(3rem,5vw,4rem);

    text-align:center;

}

.kw-assessment__scale,
.kw-assessment__questions{

    display:grid;
    gap:1rem;

}

.kw-assessment__scale{

    list-style:none;
    padding:0;

}

.kw-assessment__scale li,
.kw-assessment__questions li{

    padding:

        1.6rem 1.8rem;

    background:

        #FFFFFF;

    border:

        1px solid rgba(212,175,55,.10);

    border-radius:

        var(--kw-radius-lg);

    box-shadow:

        0 10px 24px rgba(0,0,0,.03);

    transition:

        border-color .25s ease,

        box-shadow .25s ease,

        transform .25s ease;

}

.kw-assessment__questions li:hover{

    transform:

        translateY(-2px);

    border-color:

        rgba(212,175,55,.25);

    box-shadow:

        0 16px 32px rgba(0,0,0,.05);

}

.kw-assessment__intro{

    width:min(100%,60ch);

    margin:

        1.5rem auto 0;

    font-size:1.05rem;

    line-height:1.8;

    text-align:center;

    color:var(--kw-color-text-soft);

}

/* =========================
   RESPUESTAS
========================= */

.kw-assessment__questions label{

    display:inline-flex;

    align-items:center;

    gap:.45rem;

    margin:

        .85rem 1.4rem 0 0;

    cursor:pointer;

    font-size:

        .95rem;

    color:

        var(--kw-color-text);

    transition:

        color var(--kw-speed);

}

.kw-assessment__questions label:hover{

    color:

        var(--kw-color-gold-dark);

}

.kw-assessment__questions input[type="radio"]{

    accent-color:

        var(--kw-color-gold);

    transform:

        scale(1.05);

}

@media (max-width:768px){

    .kw-assessment__questions label{

        display:flex;

        width:100%;

        margin:

            .85rem 0 0;

    }

}

/* ==========================================================================
   MICROACCIÓN EDITORIAL
========================================================================== */

.kw-exercise .kw-card{

    position:relative;

    overflow:hidden;

    max-width:760px;

    margin-inline:auto;

    padding:

        clamp(3rem,5vw,4rem);

    text-align:center;

    border:

        1px solid rgba(212,175,55,.16);

    background:

        linear-gradient(
            180deg,
            #FFFDF9 0%,
            #FFFFFF 100%
        );

    box-shadow:

        0 22px 48px rgba(0,0,0,.05);

}

/* Halo muy sutil */

.kw-exercise .kw-card::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(
            circle at top,
            rgba(212,175,55,.08),
            transparent 62%
        );

}

/* Badge */

.kw-exercise .kw-card .kw-badge{

    margin-bottom:2rem;

}

/* Título */

.kw-exercise .kw-card h3{

    max-width:12ch;

    margin:

        0 auto
        1.5rem;

    font-size:

        clamp(
            2.1rem,
            2vw + 1rem,
            3rem
        );

    line-height:1.12;

}

/* Acción */

.kw-exercise .kw-card p{

    max-width:34ch;

    margin-inline:auto;

    font-size:

        clamp(
            1.08rem,
            1rem + .25vw,
            1.22rem
        );

    line-height:1.9;

    color:

        var(--kw-color-text);

}

/* Separación editorial */

.kw-exercise__block:nth-child(5){

    margin-top:

        clamp(3rem,5vw,4rem);

    margin-bottom:

        clamp(3rem,5vw,4rem);

}

/* ==========================================================================
   CIERRE EDITORIAL DEL EJERCICIO
========================================================================== */

/* ---------------------------------
   Frase de cierre
----------------------------------*/

.kw-exercise__closing{

    max-width:34ch;

    margin-inline:auto;

    text-align:center;

    font-family:

        var(--kw-font-heading);

    font-size:

        clamp(
            1.6rem,
            1.4rem + .7vw,
            2.15rem
        );

    line-height:1.42;

    letter-spacing:-.02em;

    color:

        var(--kw-color-ink);

}

/* ---------------------------------
   Espacio contemplativo
----------------------------------*/

.kw-exercise__transition{

    margin:

        clamp(5rem,8vw,7rem)

        auto

        clamp(4rem,6vw,5rem);

}

/* ---------------------------------
   Footer editorial
----------------------------------*/

.kw-exercise__footer{

    max-width:760px;

    margin-inline:auto;

    margin-top:0;

}

.kw-exercise__footer .kw-card{

    padding:

        clamp(2.8rem,5vw,3.6rem);

    text-align:center;

}

.kw-exercise__footer .kw-badge{

    margin-bottom:2rem;

}

.kw-exercise__message{

    max-width:42ch;

    margin-inline:auto;

    font-size:

        clamp(
            1.05rem,
            1rem + .25vw,
            1.18rem
        );

    line-height:1.9;

    color:

        var(--kw-color-text);

}

/* ---------------------------------
   Escena siguiente
----------------------------------*/

.kw-scene-indicator{

    margin-top:

        clamp(4rem,7vw,5.5rem);

}

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

.kw-diagnosis__footer{

    margin-top:5rem;

}


/* ==========================================================================
   12. CTA
   13. UTILITIES
========================================================================== */



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

.kw-cta{

    position:relative;

    overflow:hidden;

    background:

        linear-gradient(
            180deg,
            #FFFFFF,
            #FCFAF7
        );

}

.kw-cta::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(

            circle at top right,

            rgba(212,175,55,.05),

            transparent 55%

        );

}

.kw-cta__inner{

    width:min(
        100%,
        860px
    );

    margin-inline:auto;

    text-align:center;

}

.kw-cta__eyebrow{

    display:inline-block;

    margin-bottom:1.25rem;

    font-size:.78rem;

    font-weight:600;

    letter-spacing:.30em;

    text-transform:uppercase;

    color:

        var(--kw-color-gold);

}

.kw-cta__title{

    max-width:12ch;

    margin-inline:auto;

}

.kw-cta__subtitle{

    max-width:44rem;

    margin:

        2rem auto 0;

    color:

        var(--kw-color-muted);

    line-height:1.9;

letter-spacing:.01em;

}

.kw-cta__actions{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:1rem;

    margin-top:

    calc(var(--kw-scene-gap) * 1.3);

}



/* ==========================================================================
   BUTTONS
========================================================================== */

.btn-gold{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.6rem;

    min-height:56px;

    padding:

        0 2rem;

    border-radius:999px;

    background:

        var(--kw-color-gold);

    color:

        var(--kw-color-white);

    font-weight:600;

    letter-spacing:.02em;

    transition:

        transform var(--kw-speed),

        background var(--kw-speed),

        box-shadow var(--kw-speed);

    box-shadow:

        0 12px 28px rgba(212,175,55,.22);

}

.btn-gold:hover{

    background:

        var(--kw-color-gold-dark);

    transform:

        translateY(-2px);

    box-shadow:

        0 18px 36px rgba(212,175,55,.28);

}

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:56px;

    padding:

        0 2rem;

    border-radius:999px;

    border:

        1px solid var(--kw-color-border);

    background:

        transparent;

    color:

        var(--kw-color-text);

    transition:

        all var(--kw-speed);

}

.btn-outline:hover{

    border-color:

        var(--kw-color-gold);

    color:

        var(--kw-color-gold-dark);

}



/* ==========================================================================
   BADGES
========================================================================== */

.kw-badge{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    padding:

        .55rem 1rem;

    border-radius:999px;

    background:

        rgba(212,175,55,.08);

    color:

        var(--kw-color-gold-dark);

    font-size:

        .76rem;

    font-weight:600;

    letter-spacing:.10em;

    text-transform:uppercase;

}

.kw-badge--soft{

    background:

        #F5F5F5;

    color:

        var(--kw-color-muted);

}


/* ==========================================================================
   SCENE INDICATOR
   FASE 2.4
========================================================================== */

.kw-scene-indicator{

    display:flex;

    justify-content:center;

    margin:1.5rem 0;

}

.kw-scene-indicator span{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    padding:

        .60rem 1rem;

    border-radius:999px;

    background:

        rgba(212,175,55,.08);

    color:

        var(--kw-color-gold-dark);

    font-size:.78rem;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

}


/* ==========================================================================
   UNIVERSAL CARD
========================================================================== */

.kw-card{

    position:relative;

    overflow:hidden;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,1),
            rgba(252,250,247,1)
        );

    border:

        1px solid rgba(212,175,55,.10);

    border-radius:

        var(--kw-radius-xl);

    padding:

    clamp(
        1.9rem,
        3vw,
        2.7rem
    );

    box-shadow:

        var(--kw-shadow-sm);

    transition:

        transform var(--kw-transition-editorial),

        box-shadow var(--kw-transition-editorial),

        border-color var(--kw-transition-editorial);

}

.kw-card:hover{

    transform:

        translateY(-4px);

    border-color:

        rgba(212,175,55,.28);

    box-shadow:

        var(--kw-shadow-md);

}

.kw-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at top right,
            rgba(212,175,55,.045),
            transparent 58%
        );

    pointer-events:none;

    opacity:0;

    transition:

        opacity var(--kw-transition-editorial);

}

.kw-card:hover::before{

    opacity:1;

}



/* ==========================================================================
   TEXT HELPERS
========================================================================== */

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.text-muted{

    color:

        var(--kw-color-muted);

}

.text-gold{

    color:

        var(--kw-color-gold);

}



/* ==========================================================================
   BACKGROUND HELPERS
========================================================================== */

.bg-white{

    background:

        var(--kw-color-white);

}

.bg-soft{

    background:

        #F8F7F5;

}



/* ==========================================================================
   DISPLAY HELPERS
========================================================================== */

.d-flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.d-grid-center{

    display:grid;

    place-items:center;

}



/* ==========================================================================
   WIDTH HELPERS
========================================================================== */

.w-reading{

    max-width:

        var(--kw-width-reading);

}

.w-wide{

    max-width:

        var(--kw-width-wide);

}

.mx-auto{

    margin-inline:auto;

}



/* ==========================================================================
   VISIBILITY
========================================================================== */

.is-hidden{

    display:none !important;

}

.is-visible{

    display:block !important;

}



/* ==========================================================================
   HOVER HELPERS
========================================================================== */

.kw-hover{

    transition:

        transform var(--kw-speed),

        box-shadow var(--kw-speed);

}

.kw-hover:hover{

    transform:

        translateY(-3px);

    box-shadow:

        var(--kw-shadow-md);

}



/* ==========================================================================
   IMAGE TREATMENT
========================================================================== */

.kw-editorial img{

    filter:

        saturate(.97)

        contrast(1.02);

    transition:

        filter var(--kw-speed),

        transform var(--kw-speed);

}

.kw-editorial img:hover{

    filter:

        saturate(1)

        contrast(1.05);

}



/* ==========================================================================
   ACCESSIBILITY
========================================================================== */

[aria-hidden="true"]{

    pointer-events:none;

}

[hidden]{

    display:none !important;

}



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

@media (max-width:768px){

    .kw-card{

        border-radius:

            var(--kw-radius-lg);

    }

    .kw-cta__actions{

        flex-direction:column;

        align-items:center;

    }

    .btn-gold,

    .btn-outline{

        width:100%;

        max-width:360px;

    }

}

/* ==========================================================================
   EDITORIAL BLOCKQUOTES
========================================================================== */

.kw-letter__quote,
.kw-reflection__quote,
.kw-diagnosis__quote,
.kw-cta blockquote{

    width:min(100%,22ch);
    margin-inline:auto;
    text-align:center;

}

.kw-letter__quote blockquote,
.kw-reflection__quote blockquote,
.kw-diagnosis__quote,
.kw-cta blockquote{

    font-family:var(--kw-font-heading);
    font-size:clamp(2rem,2vw + 1.35rem,3rem);
    line-height:1.22;
    letter-spacing:-.02em;
    color:var(--kw-color-ink);
    text-wrap:balance;

}

@media (max-width:768px){

    .kw-letter__quote blockquote,
    .kw-reflection__quote blockquote,
    .kw-diagnosis__quote,
    .kw-cta blockquote{

        font-size:clamp(1.8rem,7vw,2.35rem);

    }

}

/* ==========================================================================
   14. ANIMATIONS
   15. RESPONSIVE
   16. PRINT

   END OF EDITORIAL DESIGN SYSTEM
========================================================================== */



/* ==========================================================================
   REVEAL
========================================================================== */

.kw-reveal{

    opacity:0;

    transform:translateY(28px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.kw-reveal.is-visible{

    opacity:1;

    transform:none;

}



/* ==========================================================================
   FADE
========================================================================== */

.kw-fade{

    animation:

        kwFade .8s ease forwards;

}

@keyframes kwFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



/* ==========================================================================
   FLOAT
========================================================================== */

.kw-float{

    transition:

        transform var(--kw-speed);

}

.kw-float:hover{

    transform:

        translateY(-4px);

}



/* ==========================================================================
   SCROLL INDICATOR
========================================================================== */

@keyframes kwScroll{

    0%{

        opacity:0;

        transform:

            translate(-50%,0);

    }

    30%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:

            translate(-50%,14px);

    }

}



/* ==========================================================================
   GLOBAL TRANSITIONS
========================================================================== */

img,
a,
button{

    transition:

        color var(--kw-speed),

        background var(--kw-speed),

        border-color var(--kw-speed),

        transform var(--kw-speed),

        opacity var(--kw-speed),

        box-shadow var(--kw-speed);

}



/* ==========================================================================
   HORIZONTAL RULE
========================================================================== */

hr{

    border:0;

    border-top:

        1px solid var(--kw-color-border);

}



/* ==========================================================================
   TABLES
========================================================================== */

table{

    width:100%;

}

th,
td{

    padding:1rem;

    text-align:left;

    border-bottom:

        1px solid var(--kw-color-border);

}

th{

    font-weight:600;

}



/* ==========================================================================
   LISTS
========================================================================== */

ul{

    padding-left:1.25rem;

}

ol{

    padding-left:1.35rem;

}

li{

    line-height:1.9;

}



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



/* --------------------------------------------------------------------------
   ≤ 1200
--------------------------------------------------------------------------- */

@media (max-width:1200px){

    :root{

        --kw-width-reading:700px;

        --kw-width-wide:920px;

    }

}



/* --------------------------------------------------------------------------
   ≤ 992
--------------------------------------------------------------------------- */

@media (max-width:992px){

    h1{

        font-size:

            clamp(
                3rem,
                7vw,
                4.5rem
            );

    }

    h2{

        font-size:

            clamp(
                2.3rem,
                5vw,
                3.2rem
            );

    }

     section{

        padding-block:4rem;

    }

}



/* --------------------------------------------------------------------------
   ≤ 768
--------------------------------------------------------------------------- */

@media (max-width:768px){

    html{

        font-size:16px;

    }

    body{

        line-height:1.85;

    }

    h1{

        line-height:1.02;

    }

    h2{

        line-height:1.10;

    }

    h3{

        line-height:1.15;

    }

    p{

        text-wrap:auto;

    }

}



/* --------------------------------------------------------------------------
   ≤ 576
--------------------------------------------------------------------------- */

@media (max-width:576px){

    .container,
    .kw-editorial,
    .kw-editorial--wide,
    .kw-editorial--narrow,
    .kw-editorial--ultra{

        width:100%;
        max-width:100%;
        margin-inline:auto;
        padding-inline:1.5rem;

    }

    h1{

        letter-spacing:-.02em;

    }

}



/* ==========================================================================
   REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion:reduce){

    html{

        scroll-behavior:auto;

    }

    *{

        animation:none!important;

        transition:none!important;

    }

}



/* ==========================================================================
   PRINT
========================================================================== */

@media print{

    :root{

        --kw-color-background:#FFFFFF;

    }

    body{

        background:#FFFFFF;

        color:#000000;

        font-size:11pt;

        line-height:1.65;

    }

    #kw-progress,

    .kw-scroll-indicator,

    .btn-gold,

    .btn-outline{

        display:none!important;

    }

    section{

        page-break-inside:avoid;

        break-inside:avoid;

        padding-block:2.25rem;

    }

    .kw-card,

    .kw-callout,

    .kw-impact-card,

    .kw-pillar,

    .kw-question,

    .kw-result-card{

        box-shadow:none!important;

        border:

            1px solid #D8D8D8;

    }

    img{

        break-inside:avoid;

        page-break-inside:avoid;

    }

    a{

        color:#000;

        text-decoration:none;

    }

}


/* ==========================================================================
   MOBILE READING WIDTH
========================================================================== */

@media (max-width:768px){

    .kw-letter__content,
    .kw-chapter__narrative,
    .kw-reflection__intro,
    .kw-reflection__body,
    .kw-exercise__card,
    .kw-diagnosis__intro,
    .kw-impact-card,
    .kw-pillar,
    .kw-callout,
    .kw-card{

        width:100%;
        max-width:100%;

    }

    .kw-letter__content p,
    .kw-chapter__narrative p,
    .kw-reflection__body p{

        max-width:none;

    }

}

/* ==========================================================================
   RESPONSIVE
   FASE 2
========================================================================== */

@media (max-width:768px){

    .kw-reader-toolbar{

        min-height:60px;

        padding:

            .75rem 1rem;

    }

    .kw-reader-toolbar__center{

        display:none;

    }

    .kw-reader-metrics{

        gap:.75rem;

        font-size:.82rem;

    }

    .kw-reader-navigation{

        left:0;

        right:0;

        bottom:1rem;

        transform:none;

        justify-content:center;

        padding-inline:1rem;

    }

    .kw-nav-button{

        flex:1;

        min-width:0;

    }

    .kw-reader-panel{

        width:100%;

    }

}

/* ==========================================================================
   END
========================================================================== */

/*

KINTSUGI HUMANO™

Editorial Design System

Version 2.0

────────────────────────────────────────

Arquitectura

01 Design Tokens

02 Reset

03 Base

04 Typography

05 Layout

06 Editorial Grid

07 Cover

08 Letter

09 Chapter

10 Reflection

11 Exercise

12 Diagnosis

13 CTA

14 Utilities

15 Animations

16 Responsive

17 Print

────────────────────────────────────────

CSS puro

Bootstrap únicamente para layout

Sin Tailwind

Sin Sass

Sin dependencias

Optimizado para:

• Desktop

• Tablet

• Mobile

• Print

• Accesibilidad

• Performance

• Lectura editorial

────────────────────────────────────────

Las 7 Grietas Invisibles
que Están Robando tu Energía

Método Kintsugi Humano™

*/