/*
Theme Name: Hardcorito Clean
Template: hello-elementor
Description: Tema hijo de Hello Elementor con la direccion visual Azul de Envase.
Version: 1.0.0
*/

:root {
  --hc-bg: #F1F7FC;
  --hc-surface: #FFFFFF;
  --hc-ink: #0C2340;
  --hc-accent: #1B7FD4;
  --hc-deep: #0A2E63;
  --hc-eco: #2E8B33;
  --hc-line: #D3E2F0;
  --hc-muted: #5B7392;
  --hc-r-sm: 6px;
  --hc-r-md: 14px;
  --hc-r-pill: 999px;
}

body {
  background-color: var(--hc-bg);
  color: var(--hc-ink);
  font-family: 'Archivo', system-ui, sans-serif;
  line-height: 1.55;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Archivo Black', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.05;
  color: var(--hc-ink);
}

a { color: var(--hc-accent); }

/* Botones de WooCommerce con la identidad del envase */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: var(--hc-accent);
  color: #FFFFFF;
  border-radius: var(--hc-r-pill);
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 14px 28px;
  box-shadow: none;
  transition: background-color .18s ease, transform .18s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--hc-deep);
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* Precio */
.woocommerce .price,
.woocommerce ul.products li.product .price {
  color: var(--hc-accent);
  font-family: 'Archivo Black', sans-serif;
  font-weight: 400;
}

/* Tarjeta de producto en catalogo */
.woocommerce ul.products li.product {
  background: var(--hc-surface);
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-md);
  padding: 20px;
  box-shadow: 0 2px 10px rgba(12, 35, 64, .05);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 18px;
  line-height: 1.15;
  color: var(--hc-ink);
}

/* Mensajes de la tienda */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--hc-accent);
  border-radius: var(--hc-r-sm);
}

.woocommerce-message::before,
.woocommerce-info::before { color: var(--hc-accent); }

/* hero */
.elementor-element.elementor-element-hc0img img {
  max-height: 60vh !important;
  width: auto !important;
  max-width: 100% !important;
  margin-inline: auto;
  display: block;
  filter: drop-shadow(0 26px 34px rgba(10, 46, 99, .22));
}
@media (max-width: 767px) {
  .elementor-element.elementor-element-hc0img img { max-height: 42vh !important; }
}
/* composicion */
.hc-chip { display: inline-block; background: #FFFFFF; border: 1px solid #D3E2F0; border-radius: 999px; padding: 8px 16px; }
.hc-chip .elementor-heading-title { font-size: inherit; }
.elementor-element.elementor-element-hc0img img { transform: rotate(-4deg); transform-origin: 60% 60%; }
@media (min-width: 1025px) {
  .elementor-element.elementor-element-hc0col2 { margin-right: -60px; }
  .elementor-element.elementor-element-hc0col2::before {
    content: ''; position: absolute; width: 560px; height: 560px; border-radius: 50%;
    background: #E4EFFA; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0;
  }
  .elementor-element.elementor-element-hc0col2::after {
    content: ''; position: absolute; width: 640px; height: 640px; border-radius: 50%;
    border: 1.5px solid #D3E2F0; top: calc(50% - 20px); left: calc(50% + 18px);
    transform: translate(-50%, -50%); z-index: 0;
  }
  .elementor-element.elementor-element-hc0col2 { position: relative; }
  .elementor-element.elementor-element-hc0img { position: relative; z-index: 2; }
}
@media (max-width: 1024px) {
  .elementor-element.elementor-element-hc0img img { transform: none; }
}
.hc-precio { position: relative; }
.hc-precio::before {
  content: ''; position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
  width: 520px; height: 260%; z-index: 0; pointer-events: none;
  background: url('https://hardcoritoclean.cl/wp-content/uploads/2026/08/eco-detergente-3l.webp') right center / contain no-repeat;
  filter: brightness(0); opacity: .05;
}
.hc-precio > * { position: relative; z-index: 1; }
.hc-num-mega .elementor-counter-number-wrapper { justify-content: center; }
@media (max-width: 767px) { .hc-precio::before { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .elementor-element { animation: none !important; transition: none !important; }
}
/* reveal */
/* El contenido nace visible. Si el navegador soporta animacion por scroll, entra suave. */
.hc-reveal { opacity: 1; }
@keyframes hcEntra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hc-reveal { animation: hcEntra .7s cubic-bezier(.2,.7,.3,1) both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
  }
}
/* Red de seguridad: si Elementor deja algo invisible, se muestra igual */
.elementor-invisible { opacity: 1 !important; }

/* wsp flotante */
.hc-wsp { position: fixed; right: 18px; bottom: 18px; z-index: 9999; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(10,46,99,.28); }
.hc-wsp svg { width: 30px; height: 30px; fill: #fff; }
/* alto del hero */
/* Cabecera fija ~88px. El hero ocupa lo que queda de pantalla, ni mas ni menos. */
:root { --hc-header: 88px; }
.hc-hero {
  min-height: calc(100svh - var(--hc-header));
  display: flex; align-items: center;
}
.elementor-element.elementor-element-hc0img img {
  max-height: calc(100svh - var(--hc-header) - 90px) !important;
  width: auto !important; max-width: 100% !important;
  margin-inline: auto; display: block;
  filter: drop-shadow(0 26px 34px rgba(10, 46, 99, .22));
  transform: rotate(-4deg); transform-origin: 60% 60%;
}
@media (max-width: 1024px) {
  :root { --hc-header: 76px; }
  .hc-hero { min-height: auto; }
  .elementor-element.elementor-element-hc0img img { transform: none; max-height: 42svh !important; }
}
/* Con la barra de administracion visible la cabecera baja 32px */
.admin-bar .hc-hero { min-height: calc(100svh - var(--hc-header) - 32px); }
/* correcciones hero */
html, body { overflow-x: hidden; max-width: 100%; }
.hc-hero { overflow: hidden; }
.hc-chip { display: inline-flex; align-self: flex-start; width: auto; }
.hc-chip .elementor-widget-container { display: inline-flex; }
.elementor-element.elementor-element-hc0img img { max-height: calc(100svh - var(--hc-header) - 130px) !important; }
.admin-bar .elementor-element.elementor-element-hc0img img { max-height: calc(100svh - var(--hc-header) - 162px) !important; }
@media (max-width: 1024px) {
  .elementor-element.elementor-element-hc0img img { max-height: 40svh !important; }
  .hc-chip { align-self: center; }
}