html,body{margin:0;background:#f3f4f6;color:#202632;font-family:Arial,Helvetica,sans-serif}.kc-app{min-height:100vh}.d-none{display:none!important}.kc-home{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:5vh 5vw;background:radial-gradient(circle at top,#fff 0,#f1ecff 42%,#e8e2f7 100%)}.kc-home-card{width:88vw;min-height:74vh;background:white;border-radius:42px;padding:7vh 6vw;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.18);display:flex;flex-direction:column;align-items:center;justify-content:center}.kc-home-kicker{font-size:26px;font-weight:950;color:#7658ad;letter-spacing:3px;margin-bottom:22px}.kc-home h1{font-size:clamp(58px,8vw,118px);line-height:.95;margin:0 0 34px;font-weight:950}.kc-home p{font-size:clamp(28px,3vw,46px);line-height:1.15;color:#374151;max-width:1050px;margin:0 auto 44px}.kc-home-button{font-size:clamp(26px,3.5vw,48px);padding:28px 58px;border-radius:30px}.kc-home-help{margin-top:34px;font-size:clamp(20px,2vw,30px);color:#4b5563;font-weight:800}.kc-primary,.kc-add,.kc-added{border:0;border-radius:20px;background:#7658ad;color:white;font-weight:900}.kc-top{position:sticky;top:0;z-index:30;background:white;display:flex;align-items:center;justify-content:space-between;padding:13px 22px;border-bottom:1px solid #ddd;box-shadow:0 2px 12px rgba(0,0,0,.05)}.kc-top h1{margin:0;font-size:26px}.kc-top p{margin:2px 0 0;color:#6b7280;font-weight:700}.kc-list-btn{border:0;border-radius:18px;background:#7658ad;color:white;font-weight:900;padding:14px 22px;font-size:18px}.kc-count{background:white;color:#7658ad;border-radius:999px;padding:3px 10px}.kc-brandbar{position:sticky;top:74px;z-index:25;background:#f8f8fa;display:flex;gap:10px;overflow-x:auto;padding:12px 18px;border-bottom:1px solid #e5e7eb}.kc-brandbar button{white-space:nowrap;border:1px solid #ddd;background:white;border-radius:999px;padding:10px 18px;font-weight:950;font-size:16px}.kc-brandbar button.active{background:#7658ad;color:white;border-color:#7658ad}.kc-floating-home{position:fixed;right:20px;bottom:20px;z-index:25;border:0;border-radius:999px;background:#202632;color:white;font-weight:900;padding:14px 22px}.kc-brand-section{margin:18px;padding:18px;background:var(--brand-bg);border-radius:28px;box-shadow:0 8px 22px rgba(0,0,0,.08)}.kc-brand-section h2{margin:2px 8px 18px;font-size:34px;font-weight:950;letter-spacing:.5px;text-transform:uppercase}.kc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.kc-card{background:rgba(255,255,255,.94);border-radius:24px;overflow:hidden;box-shadow:0 7px 18px rgba(0,0,0,.08);border:1px solid rgba(255,255,255,.9)}.kc-img{width:100%;height:210px;border:0;background:white;display:flex;align-items:center;justify-content:center;cursor:pointer}.kc-img img{max-width:100%;max-height:200px;object-fit:contain}.kc-body{padding:16px}.kc-brand{font-size:12px;color:#7658ad;font-weight:950;text-transform:uppercase}.kc-body h3{font-size:21px;line-height:1.18;min-height:74px;margin:8px 0 12px}.kc-price{font-size:34px;font-weight:950;margin:4px 0 10px}.kc-stock{display:inline-block;background:#dcfce7;color:#166534;border-radius:999px;padding:7px 13px;font-weight:950}.kc-stock.low{background:#fef3c7;color:#92400e}.kc-packs{margin:13px 0;min-height:74px}.kc-pack-row{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px dashed #d1d5db;font-size:16px}.kc-pack-row strong{white-space:nowrap}.kc-pack-empty{color:#6b7280;font-weight:700}.kc-add,.kc-added{width:100%;font-size:18px;padding:14px}.kc-added{background:#16a34a}.kc-ghost{border:1px solid #d1d5db;border-radius:14px;background:white;font-weight:900;padding:12px 16px}.kc-list-body{padding:24px}.kc-list-body ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}.kc-list-body li{background:white;border-radius:18px;padding:18px;display:flex;align-items:center;gap:12px}.kc-list-body li strong{flex:1;font-size:22px}.kc-list-body li span{color:#4b5563}.kc-list-body li button{border:0;background:#fee2e2;color:#991b1b;border-radius:12px;padding:10px 14px;font-weight:900}.kc-list-footer{text-align:center;background:white;border-top:1px solid #ddd;padding:22px;position:sticky;bottom:0}.kc-list-footer p{font-size:24px;font-weight:900}.kc-img-modal{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:100;display:flex;align-items:center;justify-content:center;padding:30px}.kc-img-modal img{max-width:92vw;max-height:88vh;background:white;border-radius:26px;padding:20px}.kc-img-modal button{position:fixed;top:20px;right:25px;border:0;background:white;color:#111;border-radius:999px;width:56px;height:56px;font-size:38px;font-weight:900}.kc-timeout{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99;display:flex;align-items:center;justify-content:center}.kc-timeout>div{background:white;border-radius:24px;padding:34px;text-align:center;max-width:560px}.kc-empty,.kc-error,.kc-disabled{text-align:center;padding:50px;font-size:24px;font-weight:800}@media(max-width:1100px){.kc-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.kc-grid{grid-template-columns:repeat(2,1fr)}.kc-brand-section h2{font-size:26px}.kc-img{height:170px}.kc-home-card{min-height:78vh;width:86vw}.kc-brandbar{top:68px}}


/* ==========================================================
   HOME TABLET FULL SCREEN - KACHITO
   ========================================================== */

html,
body {
    width: 100%;
    min-height: 100%;
}

body:has(.kc-home:not(.d-none)) {
    overflow: hidden;
}

.kc-home {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    padding: 3.5vh 3.5vw;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 20% 15%, rgba(255,255,255,.95) 0, rgba(255,255,255,.35) 28%, transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(118,88,173,.25) 0, rgba(118,88,173,.08) 34%, transparent 55%),
        linear-gradient(135deg, #f7f3ff 0%, #ece5ff 45%, #f8f7fb 100%);
}

.kc-home-card {
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    border-radius: 46px;
    padding: 4.5vh 5vw;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    align-items: center;
    justify-items: center;
    gap: 2.2vh;
    background: rgba(255,255,255,.94);
    box-shadow: 0 26px 80px rgba(39, 30, 71, .22);
    overflow: hidden;
}

.kc-home-kicker {
    align-self: end;
    font-size: clamp(24px, 3vw, 48px);
    line-height: 1;
    font-weight: 950;
    color: #7658ad;
    letter-spacing: .16em;
    text-align: center;
    margin: 0;
}

.kc-home h1 {
    align-self: center;
    max-width: 1150px;
    font-size: clamp(70px, 11vw, 168px);
    line-height: .88;
    margin: 0;
    font-weight: 950;
    letter-spacing: -.04em;
    text-align: center;
    color: #202632;
}

.kc-home p {
    align-self: start;
    max-width: 1050px;
    font-size: clamp(30px, 4.1vw, 64px);
    line-height: 1.08;
    margin: 0;
    color: #374151;
    text-align: center;
    font-weight: 700;
}

.kc-home-button {
    font-size: clamp(30px, 4.2vw, 64px);
    line-height: 1;
    padding: clamp(22px, 3vh, 44px) clamp(46px, 7vw, 110px);
    border-radius: 34px;
    box-shadow: 0 16px 32px rgba(118, 88, 173, .34);
}

.kc-home-help {
    font-size: clamp(20px, 2.4vw, 38px);
    line-height: 1.15;
    max-width: 1000px;
    margin: 0;
    color: #4b5563;
    font-weight: 900;
    text-align: center;
}

/* En pantallas muy verticales, compacta sin generar scroll */
@media (max-aspect-ratio: 3/4) {
    .kc-home {
        padding: 2vh 2.5vw;
    }

    .kc-home-card {
        border-radius: 34px;
        padding: 3vh 4vw;
        gap: 1.6vh;
    }

    .kc-home h1 {
        font-size: clamp(54px, 13vw, 120px);
    }

    .kc-home p {
        font-size: clamp(24px, 5vw, 44px);
    }

    .kc-home-button {
        font-size: clamp(24px, 5vw, 44px);
        padding: 22px 42px;
    }

    .kc-home-help {
        font-size: clamp(17px, 3.8vw, 28px);
    }
}



/* ==========================================================
   AJUSTE HOME KIOSCO - TITULO MAS ARRIBA / BOTON MAS CENTRAL
   ========================================================== */

.kc-home-card{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:0 !important;
    padding:4vh 4.5vw !important;
}

.kc-home-kicker{
    margin-top:1vh !important;
    margin-bottom:4vh !important;
    font-size:clamp(24px,2.4vw,42px) !important;
}

.kc-home h1{
    margin:0 !important;
    margin-top:2vh !important;
    font-size:clamp(70px,10vw,150px) !important;
    line-height:.90 !important;
    max-width:1100px !important;
}

.kc-home p{
    margin-top:18vh !important;
    margin-bottom:4vh !important;
    font-size:clamp(28px,3.3vw,52px) !important;
    line-height:1.08 !important;
    max-width:1000px !important;
}

.kc-home-button{
    margin-top:1vh !important;
    margin-bottom:3vh !important;
    font-size:clamp(32px,4vw,60px) !important;
    padding:24px 70px !important;
    min-width:340px !important;
    border-radius:28px !important;
}

.kc-home-help{
    margin-top:1vh !important;
    font-size:clamp(18px,1.9vw,30px) !important;
    max-width:900px !important;
}

/* pantallas verticales / tablet portrait */
@media (max-aspect-ratio: 3/4){
    .kc-home-card{
        padding:3.5vh 4vw !important;
    }

    .kc-home-kicker{
        margin-top:.5vh !important;
        margin-bottom:3vh !important;
        font-size:clamp(20px,3vw,34px) !important;
    }

    .kc-home h1{
        margin-top:4vh !important;
        font-size:clamp(58px,11.5vw,110px) !important;
    }

    .kc-home p{
        margin-top:22vh !important;
        margin-bottom:3.2vh !important;
        font-size:clamp(24px,4.3vw,40px) !important;
    }

    .kc-home-button{
        font-size:clamp(24px,4.4vw,42px) !important;
        padding:20px 48px !important;
        min-width:280px !important;
    }

    .kc-home-help{
        font-size:clamp(16px,2.8vw,24px) !important;
    }
}



/* ==========================================================
   HOME CARTEL SIMPLE - KACHITO MOSTRADOR
   ========================================================== */

body:has(.kc-home:not(.d-none)) {
    overflow: hidden !important;
}

.kc-home {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    padding: 2.2vh 2.6vw !important;
    box-sizing: border-box !important;
    background: #f1ecfb !important;
}

.kc-home-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 45px rgba(37, 29, 70, .14) !important;
    padding: 0 4vw !important;
    display: grid !important;
    grid-template-rows: 11% 24% 31% 18% 16% !important;
    align-items: center !important;
    justify-items: center !important;
    overflow: hidden !important;
}

.kc-home-kicker {
    grid-row: 1 !important;
    align-self: center !important;
    margin: 0 !important;
    font-size: clamp(18px, 2.2vw, 34px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    color: #7658ad !important;
    letter-spacing: .22em !important;
    text-align: center !important;
}

.kc-home h1 {
    grid-row: 2 !important;
    align-self: center !important;
    margin: 0 !important;
    max-width: 1000px !important;
    font-size: clamp(44px, 7.4vw, 104px) !important;
    line-height: .90 !important;
    font-weight: 950 !important;
    letter-spacing: -.045em !important;
    text-align: center !important;
    color: #202632 !important;
}

.kc-home-button {
    grid-row: 3 !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
    min-width: min(78vw, 680px) !important;
    min-height: clamp(94px, 13vh, 170px) !important;
    padding: 0 7vw !important;
    border-radius: 22px !important;
    background: #7658ad !important;
    color: white !important;
    border: 0 !important;
    font-size: clamp(48px, 8vw, 112px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: .02em !important;
    box-shadow: 0 18px 36px rgba(118, 88, 173, .28) !important;
}

.kc-home p {
    grid-row: 4 !important;
    align-self: center !important;
    margin: 0 !important;
    max-width: 850px !important;
    font-size: clamp(24px, 3.3vw, 48px) !important;
    line-height: 1.12 !important;
    color: #202632 !important;
    text-align: center !important;
    font-weight: 850 !important;
}

.kc-home-help {
    grid-row: 5 !important;
    align-self: start !important;
    margin: 0 !important;
    max-width: 850px !important;
    font-size: clamp(19px, 2.5vw, 34px) !important;
    line-height: 1.18 !important;
    color: #202632 !important;
    font-weight: 900 !important;
    text-align: center !important;
}

@media (max-aspect-ratio: 3/4) {
    .kc-home {
        padding: 1.5vh 2vw !important;
    }

    .kc-home-card {
        border-radius: 18px !important;
        padding: 0 4.5vw !important;
        grid-template-rows: 10% 23% 32% 18% 17% !important;
    }

    .kc-home-kicker {
        font-size: clamp(16px, 3.2vw, 28px) !important;
    }

    .kc-home h1 {
        font-size: clamp(40px, 10vw, 78px) !important;
    }

    .kc-home-button {
        min-width: 72vw !important;
        min-height: clamp(88px, 12vh, 140px) !important;
        font-size: clamp(46px, 11vw, 88px) !important;
        border-radius: 18px !important;
    }

    .kc-home p {
        font-size: clamp(22px, 5vw, 38px) !important;
    }

    .kc-home-help {
        font-size: clamp(18px, 4.4vw, 30px) !important;
    }
}

/* ==========================================================
   KACHITO - MOSTRADOR TABLET: 3 COLUMNAS EN TABLET / MOBILE
   Fecha: 2026-06-21
   Objetivo: evitar que la vista de tablet baje a 2 columnas.
   ========================================================== */

/* Tablets en vertical o pantallas angostas: mantener 3 columnas */
@media (max-width: 760px) {
    .kc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .kc-brand-section {
        margin: 10px !important;
        padding: 10px !important;
        border-radius: 20px !important;
    }

    .kc-brand-section h2 {
        font-size: 22px !important;
        margin: 2px 4px 10px !important;
    }

    .kc-card {
        border-radius: 16px !important;
    }

    .kc-img {
        height: 118px !important;
    }

    .kc-img img {
        max-height: 112px !important;
    }

    .kc-body {
        padding: 9px !important;
    }

    .kc-brand {
        font-size: 10px !important;
    }

    .kc-body h3 {
        font-size: 14px !important;
        line-height: 1.15 !important;
        min-height: 48px !important;
        margin: 5px 0 7px !important;
    }

    .kc-price {
        font-size: 22px !important;
        margin: 3px 0 6px !important;
    }

    .kc-stock {
        font-size: 11px !important;
        padding: 5px 8px !important;
    }

    .kc-packs {
        min-height: 54px !important;
        margin: 8px 0 !important;
    }

    .kc-pack-row {
        font-size: 11px !important;
        gap: 5px !important;
        padding: 4px 0 !important;
    }

    .kc-add,
    .kc-added {
        font-size: 12px !important;
        padding: 9px 6px !important;
        border-radius: 13px !important;
    }
}

/* Tablets medianas: también mantener 3 columnas */
@media (min-width: 761px) and (max-width: 1100px) {
    .kc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}