/*
Theme Name: Stocka Shop
Theme URI: https://stocka.sercloud.cl
Description: Tema hijo de Storefront para la tienda demo de Stocka. Estructura y ritmo visual
             inspirados en una tienda WooCommerce profesional (topbar, header con buscador,
             barra de categorias, portada por secciones, franja de beneficios y footer oscuro),
             hecho con CSS propio: no usa Woodmart ni Elementor.
Author: SerCloud
Template: storefront
Version: 1.0
Text Domain: stocka-shop
*/

/* ============================================================
   Variables de marca
   ============================================================ */
:root {
  --sk-azul:      #2563eb;
  --sk-violeta:   #7c3aed;
  --sk-grad:      linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --sk-oscuro:    #0f172a;
  --sk-oscuro-2:  #1e293b;
  --sk-texto:     #1e293b;
  --sk-suave:     #64748b;
  --sk-borde:     #e2e8f0;
  --sk-fondo:     #f8fafc;
  --sk-radio:     14px;
  --sk-sombra:    0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  --sk-sombra-h:  0 8px 16px rgba(15,23,42,.08), 0 20px 40px rgba(37,99,235,.12);
}

/* ============================================================
   Base
   ============================================================ */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--sk-texto);
  background: #fff;
  font-size: 16px;
  line-height: 1.6;
}
h1, h2, h3, h4, .sk-titulo {
  font-family: inherit;
  color: var(--sk-oscuro);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}
a { color: var(--sk-azul); }
a:hover { color: var(--sk-violeta); }

.sk-ancho { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* Storefront mete un padding grande arriba del contenido; en la portada estorba */
.site-content { padding-top: 0; }
.site-content .col-full { max-width: 1240px; padding-left: 24px; padding-right: 24px; }

/* Storefront envuelve header, contenido y footer en .col-full (ancho limitado). El tema
   hijo pinta franjas a sangre, asi que ese contenedor se anula donde corresponde y el
   ancho real lo pone .sk-ancho. */
.storefront-breadcrumb { background: transparent; padding: 1.2em 0 0; margin-bottom: 0; }
.site-header { border-bottom: 0; padding: 0; background: transparent; margin: 0; }
.site-header > .col-full,
.site-footer > .col-full { max-width: none; padding: 0; margin: 0; width: 100%; }
.site-footer { background: var(--sk-oscuro); padding: 0; margin: 0; border: 0; }

/* La portada son franjas de borde a borde: no debe encajonarse en la grilla del tema. */
.page-template-template-portada .site-content .col-full { max-width: none; padding: 0 !important; }
.page-template-template-portada .content-area { width: 100%; margin: 0; float: none; }
.page-template-template-portada .site-main { margin: 0; }
.page-template-template-portada .entry-header,
.page-template-template-portada .storefront-breadcrumb { display: none; }

/* ============================================================
   Topbar de anuncio
   ============================================================ */
.sk-topbar {
  background: var(--sk-oscuro);
  color: #cbd5e1;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sk-topbar .sk-ancho {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 38px; gap: 16px; flex-wrap: wrap;
}
.sk-topbar strong { color: #fff; font-weight: 700; }
.sk-topbar-links { display: flex; gap: 18px; align-items: center; }
.sk-topbar-links a { color: #cbd5e1; text-decoration: none; }
.sk-topbar-links a:hover { color: #fff; }

/* ============================================================
   Header
   ============================================================ */
.sk-header {
  background: #fff;
  border-bottom: 1px solid var(--sk-borde);
  position: sticky; top: 0; z-index: 60;
}
.sk-header .sk-ancho {
  display: flex; align-items: center; gap: 28px;
  min-height: 78px;
}
.sk-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.sk-logo svg { display: block; height: 40px; width: auto; }
.sk-logo-txt { display: flex; flex-direction: column; line-height: 1.05; }
.sk-logo-txt b {
  font-size: 25px; font-weight: 800; letter-spacing: -.03em;
  background: var(--sk-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sk-logo-txt span { font-size: 10.5px; color: var(--sk-suave); letter-spacing: .1em; text-transform: uppercase; }

/* Menu principal */
.sk-nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.sk-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.sk-nav li { margin: 0; }
.sk-nav a {
  display: block; padding: 9px 14px; border-radius: 10px;
  color: var(--sk-texto); font-weight: 600; font-size: 14.5px; text-decoration: none;
  transition: background .15s, color .15s;
}
.sk-nav a:hover, .sk-nav .current-menu-item > a { background: #eff6ff; color: var(--sk-azul); }

/* Buscador */
.sk-buscar { margin-left: auto; flex: 0 1 320px; }
.sk-buscar form { display: flex; align-items: center; background: var(--sk-fondo); border: 1px solid var(--sk-borde); border-radius: 999px; padding: 4px 6px 4px 16px; transition: border-color .15s, box-shadow .15s; }
.sk-buscar form:focus-within { border-color: var(--sk-azul); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.sk-buscar input[type="search"], .sk-buscar input[type="text"] {
  border: 0; background: transparent; padding: 6px 0; font-size: 14px; width: 100%; box-shadow: none;
}
.sk-buscar input:focus { outline: none; box-shadow: none; }
.sk-buscar button {
  border: 0; background: var(--sk-grad); color: #fff; border-radius: 999px;
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; padding: 0; flex-shrink: 0;
}
.sk-buscar button:hover { filter: brightness(1.08); }
.sk-buscar button svg { width: 16px; height: 16px; }

/* Acciones (cuenta / carrito) */
.sk-acciones { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sk-accion {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px;
  color: var(--sk-texto); text-decoration: none; font-size: 13.5px; font-weight: 600;
}
.sk-accion:hover { background: var(--sk-fondo); color: var(--sk-azul); }
.sk-accion svg { width: 20px; height: 20px; stroke: currentColor; }
.sk-carrito { position: relative; }
.sk-carrito .sk-burbuja {
  position: absolute; top: 2px; left: 24px;
  background: var(--sk-violeta); color: #fff; font-size: 10.5px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; padding: 0 5px;
}
.sk-carrito-total { color: var(--sk-suave); font-weight: 700; }

/* ============================================================
   Barra de categorias
   ============================================================ */
.sk-cats { background: var(--sk-grad); }
.sk-cats .sk-ancho { display: flex; align-items: center; gap: 6px; min-height: 46px; overflow-x: auto; }
.sk-cats a {
  color: #fff; text-decoration: none; font-size: 13.5px; font-weight: 600;
  padding: 7px 13px; border-radius: 8px; white-space: nowrap; opacity: .92;
}
.sk-cats a:hover { background: rgba(255,255,255,.16); opacity: 1; }
.sk-cats .sk-cta {
  margin-left: auto; background: #fff; color: var(--sk-azul); font-weight: 700;
  box-shadow: 0 2px 8px rgba(15,23,42,.18);
}
.sk-cats .sk-cta:hover { background: #f1f5f9; color: var(--sk-violeta); }

/* ============================================================
   Hero
   ============================================================ */
.sk-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #1e3a8a 0%, #4338ca 45%, #7c3aed 100%);
  color: #fff;
}
.sk-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 420px at 82% 18%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(600px 360px at 8% 96%, rgba(124,58,237,.45), transparent 62%);
}
/* Cajas apiladas dibujadas con CSS: el motivo de la marca, sin foto de stock */
.sk-hero-arte {
  position: absolute; right: 6%; top: 50%; transform: translateY(-50%);
  width: 340px; height: 340px; opacity: .5; pointer-events: none;
}
.sk-hero-arte i {
  position: absolute; border: 3px solid rgba(255,255,255,.55); border-radius: 12px; display: block;
}
.sk-hero-arte i:nth-child(1) { width: 130px; height: 130px; left: 0;    bottom: 0; }
.sk-hero-arte i:nth-child(2) { width: 130px; height: 130px; left: 150px; bottom: 0; }
.sk-hero-arte i:nth-child(3) { width: 130px; height: 130px; left: 75px;  bottom: 150px; }
.sk-hero .sk-ancho { position: relative; padding-top: 76px; padding-bottom: 76px; }
.sk-hero-txt { max-width: 620px; }
.sk-hero .sk-ojo {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
}
.sk-hero h1 { color: #fff; font-size: clamp(30px, 4.2vw, 52px); margin: 0 0 16px; }
.sk-hero h1 em { font-style: normal; color: #fcd34d; }
.sk-hero p { font-size: 17.5px; color: rgba(255,255,255,.88); margin: 0 0 30px; max-width: 520px; }
.sk-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }

.sk-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: 15px;
  text-decoration: none; border: 0; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s;
}
.sk-btn-1 { background: #fff; color: var(--sk-azul); box-shadow: 0 6px 20px rgba(2,6,23,.25); }
.sk-btn-1:hover { transform: translateY(-2px); color: var(--sk-violeta); }
.sk-btn-2 { background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.sk-btn-2:hover { background: rgba(255,255,255,.2); color: #fff; transform: translateY(-2px); }

/* ============================================================
   Secciones de la portada
   ============================================================ */
.sk-seccion { padding: 68px 0; }
.sk-seccion.sk-gris { background: var(--sk-fondo); }
.sk-cab { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.sk-cab .sk-ojo2 {
  display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  background: var(--sk-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 10px;
}
.sk-cab h2 { font-size: clamp(25px, 3vw, 36px); margin: 0 0 12px; }
.sk-cab p { color: var(--sk-suave); font-size: 16px; margin: 0; }

/* Grid de categorias tipo bento */
.sk-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sk-bento a {
  position: relative; overflow: hidden; border-radius: var(--sk-radio);
  min-height: 190px; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end;
  text-decoration: none; color: #fff; box-shadow: var(--sk-sombra);
  transition: transform .18s, box-shadow .18s;
}
.sk-bento a:hover { transform: translateY(-4px); box-shadow: var(--sk-sombra-h); color: #fff; }
.sk-bento a::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 150px; height: 150px;
  border: 3px solid rgba(255,255,255,.22); border-radius: 22px; transform: rotate(18deg);
}
.sk-bento .sk-b-grande { grid-column: span 2; min-height: 240px; }
.sk-bento h3 { color: #fff; font-size: 21px; margin: 0 0 4px; position: relative; }
.sk-bento span { font-size: 13.5px; color: rgba(255,255,255,.85); position: relative; }
.sk-bento .sk-b-mas {
  position: relative; margin-top: 14px; font-size: 13px; font-weight: 700;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
  padding: 7px 15px; border-radius: 999px; align-self: flex-start;
}

/* Franja de beneficios */
.sk-benef { background: var(--sk-grad); color: #fff; }
.sk-benef .sk-ancho { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding-top: 40px; padding-bottom: 40px; }
.sk-benef .sk-ancho > div { display: flex; align-items: center; gap: 16px; }
.sk-benef .sk-ico {
  width: 50px; height: 50px; border-radius: 999px; border: 2px solid rgba(255,255,255,.55);
  display: grid; place-items: center; flex-shrink: 0;
}
.sk-benef .sk-ico svg { width: 22px; height: 22px; stroke: #fff; }
.sk-benef b { display: block; font-size: 15.5px; }
.sk-benef span { font-size: 13.5px; color: rgba(255,255,255,.85); }

/* Testimonios */
.sk-testi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sk-testi article {
  background: #fff; border: 1px solid var(--sk-borde); border-radius: var(--sk-radio);
  padding: 26px; box-shadow: var(--sk-sombra);
}
.sk-testi .sk-estrellas { color: #f59e0b; font-size: 15px; letter-spacing: 2px; margin-bottom: 12px; }
.sk-testi p { font-size: 14.5px; color: #475569; margin: 0 0 18px; }
.sk-testi footer { display: flex; align-items: center; gap: 12px; }
.sk-testi .sk-av {
  width: 40px; height: 40px; border-radius: 999px; background: var(--sk-grad);
  color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 14px;
}
.sk-testi b { display: block; font-size: 14px; }
.sk-testi small { color: var(--sk-suave); font-size: 12.5px; }

/* Bloque ERP (lo que se vende de verdad) */
.sk-erp { background: var(--sk-oscuro); color: #fff; }
.sk-erp .sk-ancho { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; padding-top: 62px; padding-bottom: 62px; }
.sk-erp h2 { color: #fff; font-size: clamp(24px, 2.8vw, 34px); margin: 0 0 14px; }
.sk-erp p { color: #cbd5e1; font-size: 16px; margin: 0 0 26px; }
.sk-erp ul { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; }
.sk-erp li { display: flex; gap: 10px; align-items: flex-start; color: #e2e8f0; font-size: 14.5px; }
.sk-erp li::before { content: "✓"; color: #4ade80; font-weight: 800; }
.sk-erp-caja {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--sk-radio); padding: 26px;
}
.sk-erp-caja .sk-fila { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px dashed rgba(255,255,255,.12); font-size: 14px; }
.sk-erp-caja .sk-fila:last-child { border-bottom: 0; }
.sk-erp-caja .sk-fila span { color: #94a3b8; }
.sk-erp-caja .sk-fila b { color: #fff; }

/* ============================================================
   Productos (grid y ficha)
   ============================================================ */
ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 0 0 32px; }
ul.products::before, ul.products::after { display: none !important; }
ul.products li.product {
  width: 100% !important; margin: 0 !important; float: none !important; clear: none !important;
  background: #fff; border: 1px solid var(--sk-borde); border-radius: var(--sk-radio);
  padding: 14px; display: flex; flex-direction: column; text-align: left;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--sk-sombra-h); border-color: #c7d2fe; }
ul.products li.product a img {
  border-radius: 10px; margin: 0 0 14px; background: var(--sk-fondo); aspect-ratio: 1/1; object-fit: cover;
}
ul.products li.product .woocommerce-loop-product__title {
  font-size: 14.5px !important; font-weight: 600; color: var(--sk-texto);
  padding: 0 !important; margin: 0 0 6px; line-height: 1.35; min-height: 39px;
}
ul.products li.product .price {
  color: var(--sk-oscuro) !important; font-size: 19px; font-weight: 800; margin: 0 0 12px; display: block;
}
ul.products li.product .price del { color: var(--sk-suave) !important; font-size: 14px; font-weight: 500; }
ul.products li.product .button, .woocommerce ul.products li.product .button {
  margin-top: auto; background: var(--sk-grad); color: #fff; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; padding: 11px 16px; text-align: center; width: 100%;
}
ul.products li.product .button:hover { filter: brightness(1.08); background: var(--sk-grad); color: #fff; }
ul.products li.product .added_to_cart { display: block; text-align: center; margin-top: 8px; font-size: 13px; font-weight: 600; }
.woocommerce span.onsale {
  background: var(--sk-violeta); color: #fff; border-radius: 999px; min-height: auto;
  padding: 5px 13px; font-size: 12px; font-weight: 700; line-height: 1.4; top: 20px; left: 20px; right: auto;
}

/* Botones generales de WooCommerce */
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt {
  background: var(--sk-grad); color: #fff; border-radius: 999px; font-weight: 700; border: 0;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover {
  background: var(--sk-grad); filter: brightness(1.08); color: #fff;
}

/* Encabezado de la tienda. Storefront le pone un padding-bottom enorme (heredado de su
   grilla) que dejaba un hueco en blanco entre el título y el listado. */
.woocommerce-products-header { text-align: center; padding: 34px 0 10px !important; }
.woocommerce-products-header__title { font-size: clamp(26px, 3vw, 38px) !important; }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { color: var(--sk-suave); font-size: 14px; }
.woocommerce .woocommerce-ordering select { border: 1px solid var(--sk-borde); border-radius: 10px; padding: 9px 12px; }

/* Ficha de producto */
.single-product div.product .product_title { font-size: clamp(24px, 3vw, 34px); }
.single-product div.product .price { color: var(--sk-oscuro); font-weight: 800; }
.single-product div.product .woocommerce-product-gallery img { border-radius: var(--sk-radio); background: var(--sk-fondo); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--sk-azul); }

/* Paginacion */
.woocommerce nav.woocommerce-pagination ul { border: 0; gap: 6px; display: flex; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
  border: 1px solid var(--sk-borde); border-radius: 10px; min-width: 40px; padding: 9px 12px; font-weight: 600;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--sk-grad); color: #fff; border-color: transparent;
}

/* ============================================================
   Footer
   ============================================================ */
.sk-footer { background: var(--sk-oscuro); color: #cbd5e1; padding: 58px 0 0; }
.sk-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.sk-footer h4 { color: #fff; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 16px; }
.sk-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sk-footer ul li { margin: 0; }
/* Storefront pinta los enlaces con su propio color; acá el fondo es oscuro. */
.sk-footer a, .sk-footer li a { color: #cbd5e1 !important; text-decoration: none; font-size: 14px; }
.sk-footer a:hover, .sk-footer li a:hover { color: #fff !important; }
.sk-footer .sk-logo-txt b { -webkit-background-clip: text; background-clip: text; }
.sk-footer p { font-size: 14px; color: #94a3b8; margin: 0 0 10px; }
.sk-footer .sk-logo-txt b { font-size: 24px; }
.sk-footer .sk-logo-txt span { color: #64748b; }
.sk-footer-fin {
  margin-top: 44px; border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: #64748b;
}
.sk-demo-tag {
  background: rgba(124,58,237,.22); border: 1px solid rgba(167,139,250,.35); color: #c4b5fd;
  padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .sk-bento { grid-template-columns: repeat(2, 1fr); }
  .sk-bento .sk-b-grande { grid-column: span 2; }
  ul.products { grid-template-columns: repeat(3, 1fr); }
  .sk-footer-grid { grid-template-columns: 1fr 1fr; }
  .sk-hero-arte { display: none; }
  .sk-erp .sk-ancho { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .sk-header .sk-ancho { flex-wrap: wrap; min-height: 0; padding-top: 12px; padding-bottom: 12px; gap: 12px; }
  .sk-nav { order: 3; width: 100%; overflow-x: auto; margin-left: 0; }
  .sk-buscar { flex: 1 1 180px; }
  .sk-benef .sk-ancho { grid-template-columns: 1fr; }
  .sk-testi { grid-template-columns: 1fr; }
  ul.products { grid-template-columns: repeat(2, 1fr); }
  .sk-seccion { padding: 48px 0; }
}
@media (max-width: 520px) {
  .sk-bento, .sk-bento .sk-b-grande { grid-template-columns: 1fr; grid-column: auto; }
  .sk-topbar-links { display: none; }
  .sk-accion span { display: none; }
  .sk-footer-grid { grid-template-columns: 1fr; }
}