/* KRAFTHOME — copia exacta del diseño Kloout Home (tema Shopify Dawn), marca propia */
:root{
  --color-foreground:#161616;
  --color-background:#ffffff;
  --color-accent:#ff6700;
  --color-accent-hover:#e05e00;
  --color-button:#ff6700;
  --color-button-text:#ffffff;
  --color-badge-bg:#ff6700;
  --color-badge-text:#ffffff;
  --color-border:#e5e5e5;
  --color-bg-soft:#fffcf0;
  --color-red:#dd1d1d;
  --color-green:#4ac571;
  --page-width:1200px;
  --font:'Outfit',sans-serif;
  --radius:12px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --shadow-lg:0 20px 60px rgba(0,0,0,.15);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--color-foreground);background:var(--color-background);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.container{max-width:var(--page-width);margin:0 auto;padding:0 20px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ===== Announcement bar ===== */
.announcement-bar{background:var(--color-foreground);color:#fff;text-align:center;font-size:13px;letter-spacing:.4px;padding:10px 16px;font-weight:500}
.announcement-bar b{color:#ffd9bd}

/* ===== Header ===== */
.header{position:sticky;top:0;z-index:100;background:var(--color-background);border-bottom:1px solid var(--color-border)}
.header-in{max-width:var(--page-width);margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.header-logo{display:flex;align-items:center;gap:10px}
.header-logo img{height:52px;width:auto;object-fit:contain}
.header-logo .brand{font-size:22px;font-weight:700;letter-spacing:.5px}
.header-logo .brand b{color:var(--color-accent)}
.header-nav{display:flex;gap:26px;font-size:14.5px;font-weight:500}
.header-nav a{color:var(--color-foreground);opacity:.85;transition:.2s}
.header-nav a:hover{opacity:1;color:var(--color-accent)}
.header-icons{display:flex;gap:14px;align-items:center}
.header-icons svg{width:20px;height:20px}
.header-cta{background:var(--color-accent);color:#fff;font-size:13.5px;font-weight:700;padding:10px 20px;border-radius:999px;transition:.2s;display:inline-flex;align-items:center;gap:7px}
.header-cta:hover{background:var(--color-accent-hover);transform:translateY(-1px)}
@media(max-width:900px){.header-nav{display:none}}

/* ===== Hero slider ===== */
.hero{position:relative;overflow:hidden;background:#f7f7f7}
.hero-slide{position:relative;width:100%;height:560px;display:none}
.hero-slide.active{display:block;animation:fadeIn .6s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.hero-slide img{width:100%;height:100%;object-fit:cover}
.hero-slide .overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 50%,transparent 100%)}
.hero-slide .content{position:absolute;top:50%;left:0;transform:translateY(-50%);max-width:560px;padding:0 8%;color:#fff}
.hero-slide .kicker{font-size:13px;letter-spacing:2.5px;text-transform:uppercase;font-weight:600;color:#ffc9a3;margin-bottom:14px;display:block}
.hero-slide h1{font-size:clamp(32px,4.5vw,54px);font-weight:700;line-height:1.1;margin-bottom:16px;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero-slide p{font-size:16.5px;line-height:1.6;margin-bottom:26px;text-shadow:0 1px 10px rgba(0,0,0,.3);max-width:460px}
.hero-slide .btn-hero{display:inline-flex;align-items:center;gap:9px;background:var(--color-accent);color:#fff;font-weight:700;font-size:15.5px;padding:14px 34px;border-radius:999px;box-shadow:0 10px 30px rgba(255,103,0,.35);transition:.25s}
.hero-slide .btn-hero:hover{background:var(--color-accent-hover);transform:translateY(-2px);box-shadow:0 14px 36px rgba(255,103,0,.45)}
.hero-slide .btn-hero svg{width:18px;height:18px}
.hero-dots{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5}
.hero-dots button{width:34px;height:4px;border-radius:4px;border:none;background:rgba(255,255,255,.45);cursor:pointer;transition:.25s}
.hero-dots button.active{background:var(--color-accent)}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:none;background:rgba(255,255,255,.9);box-shadow:0 6px 20px rgba(0,0,0,.18);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.hero-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.hero-arrow svg{width:20px;height:20px}
.hero-arrow.prev{left:18px}
.hero-arrow.next{right:18px}
@media(max-width:760px){.hero-slide{height:420px}.hero-slide .content{max-width:100%;padding:0 6%}.hero-arrow{display:none}}

/* ===== Secciones genéricas ===== */
.section{padding:72px 0}
.section-alt{background:var(--color-bg-soft)}
.section-head{text-align:center;max-width:680px;margin:0 auto 48px}
.section-head .kicker{font-size:12.5px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--color-accent);display:block;margin-bottom:12px}
.section-head h2{font-size:clamp(26px,3.4vw,40px);font-weight:700;line-height:1.15;margin-bottom:14px}
.section-head p{font-size:16px;color:#5c5c5c}