/* ============================================================
   SKIN "HISPACACHIMBA / CLEAN"  —  para hctheme
   Estetica limpia y premium: blanco + gris claro, negro y un
   acento CIAN electrico. Tipografia Helvetica Neue (la del theme),
   titulares en negrita, hero en MAYUSCULAS con la palabra de
   acento PERFILADA (contorno), botones NEGROS tipo pastilla e
   iconos de ventaja en circulo cian.
   El skin trae su PROPIA paleta. Carga DESPUES de custom.css +
   hc-dynamic.css, asi que su :root gana: seleccionar el skin da
   el look completo de un clic (sin tocar el panel).
   La fuente es Helvetica Neue (nativa) → NO hace falta Google Fonts.
   ============================================================ */

:root{
  /* --- Paleta HispaCachimba: negro + blanco + cian --- */
  --hc-primary: #111214;         /* CTA / precios / titulares fuertes (negro) */
  --hc-primary-dark: #000000;    /* hover del primario */
  --hc-accent: #12a9cb;          /* CIAN — badges, eyebrows, iconos, detalles */
  --hc-tertiary: #8fd9e8;        /* cian claro (tints) */
  /* Badge "NOVEDAD" (feature de motor): en cian de marca */
  --hc-new-bg: #12a9cb;
  --hc-new-text: #ffffff;
  --hc-dark: #0e0e10;            /* barra superior / hero / footer (casi negro) */
  --hc-bg: #ffffff;              /* fondo general blanco */
  --hc-surface: #ffffff;         /* tarjetas / paneles / cabecera */
  --hc-surface-2: #f4f4f6;       /* secciones y cajas gris claro */
  --hc-text: #111214;            /* texto principal casi negro */
  --hc-text-soft: #4a4d55;       /* texto secundario */
  --hc-text-faint: #8a8d95;      /* texto tenue / metadatos */
  --hc-border: #e7e7ea;          /* bordes suaves */
  --hc-muted: #f4f4f6;           /* caja de imagen de producto (gris claro) */
  --hc-price: #111214;           /* precio negro, bold */
  --hc-buy-bg: #111214;          /* CTA "Comprar" = negro */
  --hc-buy-text: #ffffff;
  --hc-btn-primary-text: #ffffff;
  /* Boton "light" sobre fondo oscuro (hero/banner): pastilla BLANCA con texto negro
     (como "Descubrelas" del mockup). OJO: el theme usa -COLOR y -TEXT. */
  --hc-btn-light-color: #ffffff;
  --hc-btn-light-text: #111214;
  --hc-footer-bg: #0e0e10;       /* footer casi negro */
  /* Marquee (barra de aviso): negro con texto claro */
  --hc-mq-bg: #111214;
  --hc-mq-color: #ffffff;
  /* --- Formas: redondeado limpio + pastillas --- */
  --hc-radius: 16px;
  --hc-radius-card: 8px;         /* tarjetas mas limpias: esquinas poco redondeadas */
  --hc-radius-img: 8px;
  --hc-radius-btn: 40px;         /* pastilla */
  --hc-mega-radius: 16px;
  --hc-popup-radius: 20px;
  /* --- Fuentes: Helvetica Neue (nativa, la del theme) --- */
  --hc-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --hc-font-head: var(--hc-font);
  /* --- Sombras suaves (propias del skin) --- */
  --hcx-sh-sm: 0 1px 3px rgba(17,18,20,.06), 0 1px 2px rgba(17,18,20,.04);
  --hcx-sh: 0 8px 24px rgba(17,18,20,.10);
  --hcx-sh-cta: 0 8px 20px rgba(17,18,20,.22);
  /* Gradiente de marca para fondos de fila (boton "Grad" en Filas) = cian */
  --hc-grad: linear-gradient(120deg, #12a9cb 0%, #0e7f99 100%);
}

/* ---------- Tipografia ---------- */
body{ font-family:var(--hc-font); color:var(--hc-text); }
h1,h2,h3,h4,
.hc-hero-title,.hc-mb-head h2,.hc-prow-head h2,.hc-mb-title,.hc-cat-title,
.hc-promo2-title,.hc-pp-title,.hc-cb-title,.hc-faq-title,.hc-logo-text{
  font-family:var(--hc-font-head);
  letter-spacing:-.02em;
  font-weight:800;
}
/* Titulares de seccion (negrita marcada, NO mayusculas) */
.hc-prow-head h2,.hc-mb-head h2{ font-size:clamp(28px,3.6vw,40px); line-height:1.08; }
/* Logo texto (si no hay imagen): "HISPACACHIMBA" en negrita */
.hc-logo-text{ font-weight:800; letter-spacing:-.02em; }

/* Enlaces: hover en cian */
a:hover{ color:var(--hc-accent); }

/* ---------- HERO: mayusculas heavy + palabra de acento PERFILADA ---------- */
.hc-hero-title{
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:.96;
}
/* 2ª palabra del titulo del hero: contorno (relleno transparente + borde) como "ONE / HACK" */
.hc-hero-title .hc-hero-accent{
  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.6px currentColor;
  text-stroke:1.6px currentColor;
  paint-order:stroke fill;
}

/* ---------- Botones = pastillas ---------- */
.hc-btn,.hc-btn-primary,.hc-buy,.hc-btn-cart,.hc-cart-pay,.hc-cart-view,
.hc-more-btn,.hc-filter-fab,.hc-filter-clear,.hc-btn-light,.hc-toast-view,.hc-toast-pay,
.btn-primary,.btn-inverse{
  border-radius:var(--hc-radius-btn)!important;
  font-family:var(--hc-font)!important;
  font-weight:700;
  letter-spacing:.005em;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, filter .15s ease;
}
.hc-btn-primary,.hc-buy,.hc-btn-cart,.hc-more-btn,.hc-cart-pay,.btn-primary{
  box-shadow:var(--hcx-sh-cta);
}
.hc-btn-primary:hover,.hc-buy:hover,.hc-btn-cart:hover,.hc-more-btn:hover,.hc-cart-pay:hover,.btn-primary:hover{
  background:var(--hc-primary-dark)!important;
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(17,18,20,.28);
  filter:none;
}
/* Boton "light" del hero/banner oscuro = pastilla BLANCA solida con texto negro */
.hc-btn-light{
  background:#fff!important;
  color:#111214!important;
  border:none!important;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.hc-btn-light:hover{ background:#f0f0f2!important; transform:translateY(-2px); }
/* Boton outline sobre fondo oscuro: pastilla translucida rellena */
.hc-btn-outline{
  border:1px solid rgba(255,255,255,.35)!important;
  color:#fff!important;
  background:rgba(255,255,255,.10)!important;
  border-radius:var(--hc-radius-btn)!important;
  font-weight:700;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.hc-btn-outline:hover{ background:rgba(255,255,255,.20)!important; border-color:rgba(255,255,255,.5)!important; transform:translateY(-2px); }

/* ---------- Tarjetas de producto = limpias, elevacion suave ---------- */
.hc-pcard{
  background:var(--hc-surface);
  border:1px solid var(--hc-border)!important;
  border-radius:var(--hc-radius-card);
  box-shadow:var(--hcx-sh-sm);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hc-pcard:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(17,18,20,.12), 0 3px 8px rgba(17,18,20,.06);
  border-color:#d5d5da!important;
}
/* SIN marco: caja de imagen toda blanca, a ancho completo de la tarjeta y foto grande */
.hc-pcard-img{
  background:#fff;
  border-radius:0;
  margin:0!important;
  padding:0 12px;               /* solo un respiro lateral minimo; sin caja gris */
  overflow:hidden;
  height:300px;                 /* foto GRANDE en el grid/slider (novedades, coleccion...) */
}
.hc-pcard-img img{ width:100%; height:100%; object-fit:contain!important; }
@media(max-width:768px){ .hc-pcard-img{ height:210px!important; padding:0; } }
.hc-pcard-img img{ object-fit:contain!important; transition:transform .5s ease; }
.hc-pcard:hover .hc-pcard-img img{ transform:scale(1.05); }
/* Movil: SIN marco + foto mas grande */
@media(max-width:768px){
  .hc-pcard-img{ margin:0!important; padding:0; background:transparent; border-radius:0; height:190px!important; }
}
.hc-pcard-name{ font-family:var(--hc-font-head)!important; font-weight:700; color:var(--hc-text); }
.hc-pcard-brand{ color:var(--hc-accent); text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:11px; }
.hc-pcard-price{ font-family:var(--hc-font-head)!important; color:var(--hc-price); display:flex; flex-direction:column; align-items:flex-start; line-height:1.05; font-weight:800; }
.hc-pcard-old{ display:block; order:-1; margin:0 0 2px; font-size:13px; font-weight:600; }
/* Badge = azul claro suave (como "Nuevo"): fondo azul muy claro + texto azul */
.hc-pcard-badge{
  background:#e6effb;
  color:#2f68d8;
  font-weight:700;
  border-radius:40px;
}

/* ---------- Mini-banners (categorias) = esquinas redondeadas + titulo blanco bold ---------- */
.hc-mb-card{ border-radius:var(--hc-radius); overflow:hidden; }
/* velo inferior para que el titulo blanco se lea sobre cualquier foto */
.hc-mb-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:55%;
  background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
  pointer-events:none; z-index:1;
}
.hc-mb-title{
  font-family:var(--hc-font-head)!important;
  font-weight:900!important;          /* mas negrita y peso */
  color:#fff;
  font-size:clamp(20px,2.3vw,32px)!important;  /* un poco mas pequeno */
  letter-spacing:-.01em;
  text-align:center;                  /* centrado (mantiene el posicionado del tema) */
  text-shadow:0 2px 14px rgba(0,0,0,.4);
}

/* ---------- Ventajas: icono blanco dentro de CIRCULO NEGRO ---------- */
.hc-feature i{ color:#fff!important; background:var(--hc-text); width:46px; height:46px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:18px; line-height:1; }
.hc-feature-title,.hc-feature strong{ font-family:var(--hc-font-head)!important; font-weight:800; }

/* ---------- Cabecera: logo texto negro, iconos negros ---------- */
.hc-header .hc-logo-text{ color:var(--hc-text); }

/* ---------- Subtitulo/eyebrow de seccion: gris (algo mas claro que el titulo), NO azul ---------- */
.hc-prow-eyebrow{ color:var(--hc-text-faint)!important; font-weight:600; letter-spacing:.02em; text-transform:none; }

/* ---------- Marquee: SIEMPRE negro + texto blanco en este skin (fuerza sobre el ajuste por tienda) ---------- */
.hc-marquee{ background:#111214!important; color:#fff!important; }

/* Titulares monocromos (como el diseno real): la ultima palabra que envuelve el JS
   del footer NO se colorea → hereda el color del titular. */
.hc-title-hl{ color:inherit; }