/* ============================================================= *
 * KIT SOLAR CHILE · CSS GLOBAL                                    *
 * Tokens de marca + reset base + header (topbar/nav/menú móvil)   *
 * + footer. Encolado desde functions.php → aplica a TODO el sitio.*
 * El markup vive en WPCode; el JS también. Aquí SOLO el CSS.      *
 * ============================================================= */

/* ===== TOKENS de marca (Paleta web Kit Solar Chile) ===== */
:root{
  --ksc-gold:#D4A93F;        /* Dorado Solar — primario */
  --ksc-gold-2:#F2C24D;      /* Amarillo Cálido — hover/resaltes */
  --ksc-ink:#11161C;         /* Negro Grafito — header/footer/texto fuerte */
  --ksc-ink-2:#1A2430;       /* Azul Carbón — superficies oscuras / hero */
  --ksc-bg:#f5f2ef;          /* Beige Crema — fondo general */
  --ksc-surface:#FFFFFF;     /* Tarjetas / superficies claras */
  --ksc-border:#E8E4DD;      /* Bordes / divisores */
  --ksc-text:#1C2128;        /* Texto principal */
  --ksc-muted:#6E737B;       /* Texto secundario */
}

/* ===== Reset base global ===== */
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--ksc-bg); color:var(--ksc-text);
  font-family:'Manrope',sans-serif; line-height:1.6;
  padding-top:124px; /* alto barra utilitaria + header */
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
h1,h2,h3,.ksc-font-title{font-family:'Montserrat',sans-serif;}
.ksc-wrap{max-width:1240px; margin:0 auto; padding:0 24px;}
@media (max-width:768px){ body{padding-top:64px;} }

/* ============================================================= *
 * HEADER: barra utilitaria + nav + menú móvil                    *
 * ============================================================= */

/* --- Barra utilitaria superior --- */
.ksc-topbar{ position:fixed; top:0; left:0; right:0; z-index:10000; background:var(--ksc-ink); color:#cfd4da; font-size:.78rem; font-family:'Manrope',sans-serif; }
.ksc-topbar .ksc-wrap{ display:flex; align-items:center; justify-content:center; gap:34px; height:42px; flex-wrap:wrap; overflow:hidden; }
.ksc-topbar span{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.ksc-topbar svg{ width:15px; height:15px; stroke:var(--ksc-gold); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* --- Header principal (claro) --- */
.ksc-nav{ position:fixed; top:42px; left:0; right:0; z-index:9999; background:var(--ksc-surface); border-bottom:1px solid var(--ksc-border); transition:box-shadow .3s, padding .3s; }
.ksc-nav.scrolled{ box-shadow:0 6px 24px rgba(17,22,28,.07); }
.ksc-nav .ksc-wrap{ display:flex; align-items:center; gap:28px; height:82px; }
.ksc-logo{ display:flex; align-items:center; flex-shrink:0; }
.ksc-logo img{ height:56px; width:auto; }
.ksc-logo-fallback{ display:flex; align-items:center; gap:10px; font-family:'Montserrat',sans-serif; }
.ksc-logo-fallback .mark{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#D4A93F,#F2C24D); flex-shrink:0; }
.ksc-logo-fallback .txt b{ display:block; font-weight:800; font-size:1.12rem; letter-spacing:.04em; color:var(--ksc-ink); line-height:1; }
.ksc-logo-fallback .txt span{ font-weight:600; font-size:.7rem; letter-spacing:.42em; color:var(--ksc-gold); }
.ksc-nav-links{ display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0; flex:1; }
.ksc-nav-links a{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ksc-text); padding:6px 0; position:relative; transition:color .2s; }
.ksc-nav-links a:hover{ color:var(--ksc-gold); }
.ksc-nav-links a.active{ color:var(--ksc-gold); }
.ksc-nav-links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--ksc-gold); border-radius:2px; }
.ksc-nav-tools{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.ksc-icon-btn{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:10px; color:var(--ksc-text); transition:background .2s,color .2s; position:relative; }
.ksc-icon-btn:hover{ background:var(--ksc-bg); color:var(--ksc-gold); }
.ksc-icon-btn svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ksc-cart-count{ position:absolute; top:-3px; right:-3px; background:var(--ksc-gold); color:var(--ksc-ink); font-family:'Montserrat',sans-serif; font-weight:700; font-size:.6rem; min-width:17px; height:17px; padding:0 4px; border-radius:50px; display:flex; align-items:center; justify-content:center; }
.ksc-btn{ display:inline-flex; align-items:center; gap:9px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.02em; padding:12px 22px; border-radius:10px; cursor:pointer; transition:background .2s,color .2s,transform .2s,box-shadow .2s; border:1px solid transparent; white-space:nowrap; }
.ksc-btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ksc-btn-primary{ background:var(--ksc-gold); color:#fff; box-shadow:0 6px 18px rgba(212,169,63,.28); }
.ksc-btn-primary:hover{ background:var(--ksc-gold-2); color:var(--ksc-ink); transform:translateY(-2px); box-shadow:0 10px 26px rgba(212,169,63,.4); }
.ksc-btn-outline{ background:transparent; color:var(--ksc-text); border-color:var(--ksc-ink); }
.ksc-btn-outline:hover{ background:var(--ksc-border); }
.ksc-btn-outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.ksc-btn-outline-light:hover{ background:rgba(255,255,255,.1); border-color:#fff; }
.ksc-nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.ksc-nav-toggle span{ width:24px; height:2px; background:var(--ksc-ink); border-radius:2px; transition:.3s; }
/* Override hover de Elementor (rojo): hamburger → dorado de marca */
.ksc-nav-toggle:hover, .ksc-nav-toggle:focus{ background:none !important; }
.ksc-nav-toggle:hover span, .ksc-nav-toggle:focus span{ background:var(--ksc-gold) !important; }

/* Entra deslizándose desde la derecha. No se usa display:none (no es animable): el panel
   espera fuera de pantalla y visibility evita que capture toques mientras está cerrado. */
.ksc-mobile-menu{ display:flex; position:fixed; top:64px; left:0; right:0; bottom:0; background:var(--ksc-surface); z-index:9998; padding:20px 24px; overflow-y:auto; flex-direction:column; gap:2px;
  transform:translateX(100%); visibility:hidden;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), visibility 0s linear .3s; }
.ksc-mobile-menu.open{ transform:translateX(0); visibility:visible;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), visibility 0s; }
@media (prefers-reduced-motion:reduce){ .ksc-mobile-menu, .ksc-mobile-menu.open{ transition:none; } }
.ksc-mobile-menu a{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:1rem; text-transform:uppercase; letter-spacing:.03em; padding:15px 0; border-bottom:1px solid var(--ksc-border); }
.ksc-mobile-menu a:hover{ color:var(--ksc-gold) !important; }  /* override hover rojo de Elementor */
.ksc-mobile-menu a.active{ color:var(--ksc-gold) !important; }
.ksc-mobile-menu .ksc-btn{ margin-top:18px; justify-content:center; }

/* Ítems extra del menú móvil (user/carrito con ícono) */
.ksc-mobile-menu .ksc-m-item{ display:flex; align-items:center; gap:12px; }
.ksc-mobile-menu .ksc-m-item svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* Toggle global del sorteo: oculta el link de Sorteo (nav + menú móvil) en TODO el sitio.
   La home además ensancha el hero — esa regla vive en el bloque de la página.
   .ksc-sorteo-alt = fallback del CTA (p.ej. "Ver Productos"): visible SOLO con sorteo apagado. */
.ksc-sorteo-off .ksc-sorteo-el{ display:none !important; }
.ksc-sorteo-alt{ display:none !important; }
.ksc-sorteo-off .ksc-sorteo-alt{ display:inline-flex !important; }

@media (max-width:1080px){ .ksc-nav-links{display:none;} .ksc-nav-toggle{display:flex;} }
/* Sobre el breakpoint no hay hamburguesa: si el menú quedó abierto y se ensancha la ventana
   (rotar a horizontal, tablet), el panel debe replegarse solo o taparía la página sin salida. */
@media (min-width:1081px){ .ksc-mobile-menu, .ksc-mobile-menu.open{ transform:translateX(100%); visibility:hidden; } }
@media (max-width:768px){
  .ksc-topbar{ display:none; }
  .ksc-nav{ top:0; }
  .ksc-nav .ksc-wrap{ height:64px; gap:16px; }
  /* En mobile, los íconos y el botón viven dentro del menú desplegable */
  .ksc-nav-tools .ksc-icon-btn,
  .ksc-nav-tools .ksc-nav-quote{ display:none; }
  /* Hamburguesa alineada a la derecha (nav-links está oculto y ya no empuja) */
  .ksc-nav-tools{ margin-left:auto; }
}

/* ============================================================= *
 * FOOTER                                                         *
 * ============================================================= */
.ksc-footer{ background:var(--ksc-ink); color:#aeb6bf; font-family:'Manrope',sans-serif; padding:56px 0 0; border-top:3px solid var(--ksc-gold); }
.ksc-footer .ksc-wrap{ max-width:1240px; margin:0 auto; padding:0 24px; }
.ksc-footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr 1.1fr; gap:36px; padding-bottom:44px; }
.ksc-footer-brand img{ height:56px; width:auto; margin-bottom:16px; }
.ksc-footer-brand p{ font-size:.88rem; color:#9aa3ad; margin:0 0 18px; max-width:26ch; }
.ksc-footer-soc{ display:flex; gap:10px; }
.ksc-footer-soc a{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; transition:background .2s,color .2s; }
.ksc-footer-soc a:hover{ background:var(--ksc-gold); color:var(--ksc-ink); }
.ksc-footer-soc svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ksc-footer h4{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:#fff; margin:0 0 18px; }
.ksc-footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.ksc-footer ul li{ font-size:.88rem; color:#9aa3ad; }  /* ítems sin link (ej. categorías como texto) */
.ksc-footer ul a{ font-size:.88rem; color:#9aa3ad; transition:color .2s; }
.ksc-footer ul a:hover{ color:var(--ksc-gold); }
.ksc-footer-contact li{ display:flex; align-items:flex-start; gap:10px; font-size:.88rem; color:#9aa3ad; }
.ksc-footer-contact svg{ width:16px; height:16px; stroke:var(--ksc-gold); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; margin-top:3px; }
.ksc-pay h4{ margin-bottom:14px; }
.ksc-pay-row{ display:flex; gap:8px; flex-wrap:wrap; }
.ksc-pay-row span{ background:#fff; border-radius:6px; padding:6px 9px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:.62rem; color:var(--ksc-ink); letter-spacing:.02em; }
.ksc-footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding:18px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.ksc-footer-bottom span, .ksc-footer-bottom a{ font-size:.78rem; color:#7e878f; }
.ksc-footer-bottom a:hover{ color:var(--ksc-gold); }
.ksc-footer-legal{ display:flex; gap:24px; }
@media (max-width:980px){ .ksc-footer-grid{ grid-template-columns:1fr 1fr; gap:30px; } }
@media (max-width:560px){ .ksc-footer-grid{ grid-template-columns:1fr; } }