/*
Theme Name: Hardcorito Clean (Woodmart)
Template: woodmart
Author: Cruech Group
Description: Tema hijo de Woodmart para Hardcorito Clean.
Version: 1.0.0
Text Domain: hardcorito-clean
*/


: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; }
}
/* seccion precio */
.hc-precio::before { display: none; }
.hc-precio-envase img { max-height: 460px; width: auto; filter: drop-shadow(0 28px 40px rgba(3, 18, 42, .5)); }
.hc-precio .hc-num-mega .elementor-heading-title { text-shadow: 0 8px 30px rgba(3,18,42,.35); }
@media (max-width: 767px) { .hc-precio-envase img { max-height: 260px; } }
/* carrusel del hero, medido en el navegador */
:root { --hc-header: 114px; }
@media (max-width: 1024px) { :root { --hc-header: 96px; } }
.elementor-widget-n-carousel .swiper,
.elementor-widget-n-carousel .swiper-wrapper,
.elementor-widget-n-carousel .swiper-slide {
  height: calc(100svh - var(--hc-header)) !important;
  min-height: 440px;
}
.admin-bar .elementor-widget-n-carousel .swiper,
.admin-bar .elementor-widget-n-carousel .swiper-wrapper,
.admin-bar .elementor-widget-n-carousel .swiper-slide {
  height: calc(100svh - var(--hc-header) - 32px) !important;
}
.elementor-widget-n-carousel .swiper-slide > .e-con {
  height: 100%;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center right;
}
.hc-slide { position: relative; }
.hc-slide::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(8,30,62,.93) 0%, rgba(8,30,62,.80) 38%, rgba(8,30,62,.20) 72%, rgba(8,30,62,0) 100%);
}
.hc-slide > * { position: relative; z-index: 1; }
.hc-slide .elementor-button { white-space: nowrap; }
.hc-pill { display: inline-block; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.34); border-radius: 999px; padding: 7px 15px; }
.elementor-widget-n-carousel .elementor-swiper-button { color: #FFFFFF; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.elementor-widget-n-carousel .swiper-pagination-bullet { background: #FFFFFF; opacity: .45; }
.elementor-widget-n-carousel .swiper-pagination-bullet-active { opacity: 1; }
@media (max-width: 767px) {
  .hc-slide::before { background: linear-gradient(180deg, rgba(8,30,62,.90) 0%, rgba(8,30,62,.84) 55%, rgba(8,30,62,.72) 100%); }
  .elementor-widget-n-carousel .swiper-slide > .e-con { background-position: center bottom; }
}
/* cabecera transparente */
body.home .elementor-location-header { position: absolute; top: 0; left: 0; right: 0; z-index: 99; }
body.home .elementor-element-hchead01 {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  transition: background-color .28s ease, box-shadow .28s ease, border-color .28s ease;
}
body.home .elementor-element-hchead01 .elementor-nav-menu a { color: #FFFFFF !important; text-shadow: 0 1px 10px rgba(6,22,48,.5); }
body.home .elementor-element-hchead01 .elementor-nav-menu a:hover,
body.home .elementor-element-hchead01 .elementor-nav-menu .current-menu-item a { color: #8FC7F0 !important; }
body.home .elementor-element-hchead01.elementor-sticky--effects {
  background-color: #FFFFFF !important;
  box-shadow: 0 2px 16px rgba(12,35,64,.10) !important;
  border-bottom: 1px solid #D3E2F0 !important;
}
body.home .elementor-element-hchead01.elementor-sticky--effects .elementor-nav-menu a { color: #0C2340 !important; text-shadow: none; }
body.home .elementor-element-hchead01.elementor-sticky--effects .elementor-nav-menu a:hover { color: #1B7FD4 !important; }
body.home .elementor-widget-n-carousel .swiper,
body.home .elementor-widget-n-carousel .swiper-wrapper,
body.home .elementor-widget-n-carousel .swiper-slide { height: 100svh !important; max-height: none; }
body.home.admin-bar .elementor-widget-n-carousel .swiper,
body.home.admin-bar .elementor-widget-n-carousel .swiper-wrapper,
body.home.admin-bar .elementor-widget-n-carousel .swiper-slide { height: calc(100svh - 32px) !important; }
body.home .elementor-widget-n-carousel .swiper-slide > .e-con { padding-top: 150px !important; }
/* Antes eran 120px, pensados para cuando el encabezado se montaba
   sobre el slide. Hoy el carrusel ya arranca debajo del encabezado, asi
   que ese espacio solo dejaba una franja azul vacia. */
@media (max-width: 1024px) { body.home .elementor-widget-n-carousel .swiper-slide > .e-con { padding-top: 48px !important; } }

.hc-nota-promo { font-size: 13px; line-height: 1.45; color: #5B7392; margin: -6px 0 14px; }
/* woocommerce color */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
  color: #1B7FD4 !important;
  font-family: 'Archivo Black', sans-serif !important;
  font-weight: 400 !important;
  text-decoration: none;
}
.woocommerce div.product p.price del,
.woocommerce ul.products li.product .price del {
  color: #8FA6C0 !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  opacity: 1;
}
.woocommerce span.onsale {
  background-color: #1B7FD4 !important;
  color: #FFFFFF !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  line-height: 1.2 !important;
}
.woocommerce div.product .stock { color: #2E8B33 !important; font-weight: 600; }
.woocommerce div.product .product_title { color: #0C2340; }
/* contraste accesible */
/* El azul de marca da 3.86:1 sobre el fondo claro: sirve para titulares grandes,
   no para texto chico. Se usa una variante oscura para texto y enlaces. */
:root {
  --hc-accent-texto: #14609E;   /* 4.9:1 sobre #F1F7FC */
  --hc-accent-boton: #1565A8;   /* blanco encima: 5.5:1 */
  --hc-muted-ok: #4A6180;       /* 6.1:1 */
  --hc-eco-texto: #1F6B25;      /* 5.4:1 */
  --hc-claro-sobre-azul: #C2D9F2;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product p.price ins,
.woocommerce ul.products li.product .price { color: var(--hc-accent-texto) !important; }
.woocommerce div.product p.price del { color: var(--hc-muted-ok) !important; }
a, .woocommerce-breadcrumb a { color: var(--hc-accent-texto); }
.woocommerce-breadcrumb, .woocommerce-breadcrumb span { color: var(--hc-muted-ok) !important; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.hc-wsp-boton { background-color: var(--hc-accent-boton) !important; }
.woocommerce span.onsale { background-color: var(--hc-accent-boton) !important; }
.woocommerce div.product .stock { color: var(--hc-eco-texto) !important; }
.hc-nota-promo { color: var(--hc-muted-ok) !important; }
.woocommerce div.product .woocommerce-product-attributes,
.woocommerce div.product .woocommerce-product-attributes th,
.woocommerce div.product .woocommerce-product-attributes td,
.woocommerce div.product .shop_attributes th,
.woocommerce div.product .shop_attributes td,
.woocommerce div.product .shop_attributes td p {
  background-color: #FFFFFF !important;
  color: #0C2340 !important;
  opacity: 1 !important;
}
.elementor-element-hcfoot1 p,
.elementor-element-hcfoot1 .elementor-widget-text-editor { color: var(--hc-claro-sobre-azul) !important; }
.skip-link { color: var(--hc-accent-texto) !important; }
/* contraste, ultimos tres */
.elementor-element-hchcta .elementor-button,
.elementor-element-hcsl1b1 .elementor-button {
  background-color: #1565A8 !important;
}
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb a,
nav.woocommerce-breadcrumb,
nav.woocommerce-breadcrumb a {
  color: #4A6180 !important;
}
.woocommerce .woocommerce-breadcrumb a:hover { color: #14609E !important; }
/* movil hero */
@media (max-width: 767px) {
  .elementor-widget-n-carousel .swiper-slide > .e-con {
    /* Iba al 155% de ancho y anclada abajo: la foto quedaba como una
       franja al pie y el resto era azul plano. Con cover llena el slide
       y el texto se lee sobre el degradado, igual que en escritorio. */
    background-position: 62% 35% !important;
    background-size: cover !important;
    align-items: flex-start !important;
    padding-top: 36px !important;
    padding-bottom: 40px !important;
  }
  .hc-slide::before {
    background: linear-gradient(180deg,
      rgba(8,30,62,.97) 0%,
      rgba(8,30,62,.96) 34%,
      rgba(8,30,62,.90) 46%,
      rgba(8,30,62,.72) 56%,
      rgba(8,30,62,.48) 66%,
      rgba(8,30,62,.26) 78%,
      rgba(8,30,62,.12) 100%) !important;
  }
  .elementor-widget-n-carousel .swiper-slide .e-con-inner > .e-con:first-child {
    width: 100% !important; justify-content: flex-start !important;
  }
  .elementor-widget-n-carousel .swiper-slide .e-con-inner > .e-con:last-child { display: none !important; }
  .elementor-widget-n-carousel .swiper-slide .e-con-inner { align-items: flex-start !important; }
  .hc-slide .elementor-widget-button { width: 100%; }
  .hc-slide .elementor-button {
    width: 100%; justify-content: center; min-height: 52px;
  }
  .hc-slide .elementor-widget-button + .elementor-widget-button { margin-top: 10px; }
  .elementor-widget-n-carousel .elementor-swiper-button-prev { left: 2px; }
  .elementor-widget-n-carousel .elementor-swiper-button-next { right: 2px; }
}
/* panel de texto sobre la foto */
.elementor-element-hcsl1::before,
.elementor-element-hcsl2::before,
.elementor-element-hcsl3::before { display: none !important; }
.elementor-element-hcsl1a,
.elementor-element-hcsl2a,
.elementor-element-hcsl3a {
  background: rgba(9, 32, 66, .72);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  padding: 34px 34px 36px !important;
  box-shadow: 0 22px 60px rgba(6, 22, 48, .28);
  max-width: 620px;
}
@media (max-width: 767px) {
  .elementor-element-hcsl1a,
  .elementor-element-hcsl2a,
  .elementor-element-hcsl3a {
    padding: 22px 20px 24px !important;
    border-radius: 14px;
    max-width: none;
  }
}

/* comparador antes y despues */
.hc-cmp { position: relative; overflow: hidden; line-height: 0; touch-action: pan-y; user-select: none; border-radius: 16px; box-shadow: 0 18px 44px rgba(12,35,64,.16); }
.hc-cmp > img.hc-cmp-base { display: block; width: 100%; height: auto; }
.hc-cmp-encima { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; clip-path: inset(0 calc(100% - var(--hc-pos)) 0 0); z-index: 2; }
.hc-cmp-encima img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.hc-cmp-linea { position: absolute; top: 0; bottom: 0; left: var(--hc-pos); width: 3px; background: #FFFFFF; transform: translateX(-50%); box-shadow: 0 0 16px rgba(7,26,56,.45); z-index: 3; pointer-events: none; }
.hc-cmp-manilla { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; }
.hc-cmp-manilla img { width: 96px; height: auto; max-width: none; filter: drop-shadow(0 10px 22px rgba(7,26,56,.5)); }
.hc-cmp-flechas { width: 52px; height: 52px; border-radius: 50%; background: #FFFFFF; color: #0C2340; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.hc-cmp-tag { position: absolute; top: 16px; z-index: 4; background: rgba(7,26,56,.82); color: #FFFFFF; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px; line-height: 1; padding: 9px 14px; border-radius: 999px; }
.hc-cmp-tag-izq { left: 16px; }
.hc-cmp-tag-der { right: 16px; }
.hc-cmp-rango { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 5; -webkit-appearance: none; appearance: none; background: transparent; }
.hc-cmp:focus-within .hc-cmp-linea { box-shadow: 0 0 0 3px #1B7FD4, 0 0 16px rgba(7,26,56,.45); }
@media (max-width: 767px) { .hc-cmp-manilla img { width: 64px; } }

/* panel de vidrio, ajuste */
.elementor-element-hcsl1a,
.elementor-element-hcsl2a,
.elementor-element-hcsl3a {
  background: rgba(10, 34, 70, .38) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  box-shadow: 0 16px 50px rgba(6, 22, 48, .22), inset 0 1px 0 rgba(255,255,255,.14) !important;
  border-radius: 18px !important;
}
.elementor-element-hcsl1a .elementor-heading-title,
.elementor-element-hcsl2a .elementor-heading-title,
.elementor-element-hcsl3a .elementor-heading-title {
  text-shadow: 0 2px 14px rgba(5, 18, 40, .55);
}
@media (min-width: 1025px) {
  .elementor-element-hcsl3a {
    max-width: 470px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  .elementor-element-hcsl3 { justify-content: flex-end; }
}

/* ---------------------------------------------------------------
   Catalogo del home. El pack manda y las botellas sueltas son la
   alternativa: la direccion Azul de Envase prohibe la fila de tres
   tarjetas iguales, asi que la jerarquia la da el tamano.
   --------------------------------------------------------------- */
.elementor-element-hcseccat {
	background: #F1F7FC;
	padding: 88px 24px;
}

.elementor-element-hccatcab {
	max-width: 1200px;
	margin: 0 auto 40px;
	display: block;
}

.elementor-element-hccatk .elementor-heading-title {
	font-family: Archivo, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hc-accent-texto, #14609E);
	margin: 0 0 10px;
}

.elementor-element-hccatt .elementor-heading-title {
	font-family: "Archivo Black", sans-serif;
	font-size: 44px;
	line-height: 1.05;
	color: #0C2340;
	margin: 0;
}

.elementor-element-hccatgrid {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 24px;
}

/* Tarjeta grande del pack */
.elementor-element-hccatpack {
	flex: 1 1 520px;
	background: #FFFFFF;
	border: 1px solid #D3E2F0;
	border-radius: 14px;
	padding: 36px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-shadow: 0 10px 28px rgba(12, 35, 64, .07);
}

.elementor-element-hccatpimg {
	width: 100%;
	margin-bottom: 4px;
}

.elementor-element-hccatpimg img {
	display: block;
	margin: 0 auto;
	max-width: 420px;
	width: 100%;
	height: auto;
}

.elementor-element-hccatpn .elementor-heading-title {
	font-family: "Archivo Black", sans-serif;
	font-size: 30px;
	line-height: 1.1;
	color: #0C2340;
	margin: 0 0 8px;
}

.elementor-element-hccatpd .elementor-heading-title {
	font-family: Archivo, sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.55;
	color: var(--hc-muted-ok, #4A6180);
	margin: 0;
	max-width: 46ch;
}

.elementor-element-hccatpp p {
	font-family: "Archivo Black", sans-serif;
	font-size: 42px;
	line-height: 1;
	color: #1B7FD4;
	margin: 20px 0 22px;
}

/* Columna de las botellas sueltas */
.elementor-element-hccatcol {
	flex: 1 1 380px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.elementor-element-hccatfa,
.elementor-element-hccatfv {
	flex: 1 1 auto;
	background: #FFFFFF;
	border: 1px solid #D3E2F0;
	border-radius: 14px;
	padding: 24px 28px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 22px;
}

.elementor-element-hccataimg,
.elementor-element-hccatvimg {
	flex: 0 0 auto;
	width: 108px;
}

.elementor-element-hccataimg img,
.elementor-element-hccatvimg img {
	display: block;
	width: 108px;
	height: auto;
}

.elementor-element-hccatatx,
.elementor-element-hccatvtx {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: 0;
}

.elementor-element-hccatan .elementor-heading-title,
.elementor-element-hccatvn .elementor-heading-title {
	font-family: "Archivo Black", sans-serif;
	font-size: 21px;
	line-height: 1.15;
	color: #0C2340;
	margin: 0;
}

.elementor-element-hccatap p,
.elementor-element-hccatvp p {
	font-family: "Archivo Black", sans-serif;
	font-size: 26px;
	line-height: 1;
	color: #1B7FD4;
	margin: 8px 0 14px;
}

/* Los botones heredan el pill azul del sitio; aqui solo se ajusta el peso */
.elementor-element-hccatab .elementor-button,
.elementor-element-hccatvb .elementor-button {
	font-size: 15px;
	padding: 11px 26px;
}

@media (max-width: 1024px) {
	.elementor-element-hcseccat {
		padding: 64px 20px;
	}

	.elementor-element-hccatt .elementor-heading-title {
		font-size: 34px;
	}

	.elementor-element-hccatfa,
	.elementor-element-hccatfv {
		flex-direction: row;
	}
}

@media (max-width: 600px) {
	.elementor-element-hccatpack {
		padding: 24px;
	}

	.elementor-element-hccatfa,
	.elementor-element-hccatfv {
		padding: 20px;
		gap: 16px;
	}

	.elementor-element-hccataimg,
	.elementor-element-hccatvimg,
	.elementor-element-hccataimg img,
	.elementor-element-hccatvimg img {
		width: 84px;
	}
}

/* Elementor gobierna el layout de sus contenedores con variables CSS,
   no con las propiedades directas: sin esto el grid queda apilado. */
.elementor-element-hccatgrid { --flex-direction: row; --flex-wrap: wrap; --align-items: stretch; --gap: 24px 24px; --width: 100%; }
.elementor-element-hccatpack { --width: 58%; --flex-direction: column; --align-items: flex-start; }
.elementor-element-hccatcol { --width: calc(42% - 24px); --flex-direction: column; --gap: 24px 24px; }
.elementor-element-hccatfa, .elementor-element-hccatfv { --flex-direction: row; --align-items: center; --gap: 22px 22px; --width: 100%; --flex-grow: 1; }
.elementor-element-hccatatx, .elementor-element-hccatvtx { --flex-direction: column; --align-items: flex-start; --width: auto; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }
@media (max-width: 900px) {
	.elementor-element-hccatpack { --width: 100%; }
	.elementor-element-hccatcol { --width: 100%; }
}

/* Ajuste fino del catalogo: el widget de texto no envuelve en <p>,
   y el boton global del sitio es azul marino cuadrado. */
.elementor-element-hccatpimg img { max-width: 300px; }
.elementor-element-hccatpp .elementor-widget-container { font-family: 'Archivo Black', sans-serif; font-size: 42px; line-height: 1; color: #1B7FD4; margin: 18px 0 20px; }
.elementor-element-hccatap .elementor-widget-container, .elementor-element-hccatvp .elementor-widget-container { font-family: 'Archivo Black', sans-serif; font-size: 26px; line-height: 1; color: #1B7FD4; margin: 6px 0 14px; }
.elementor-element-hccatpb .elementor-button, .elementor-element-hccatab .elementor-button, .elementor-element-hccatvb .elementor-button { background-color: var(--hc-accent-boton, #1565A8); color: #FFFFFF; border-radius: 999px; font-family: Archivo, sans-serif; font-weight: 600; letter-spacing: .01em; box-shadow: none; }
.elementor-element-hccatpb .elementor-button:hover, .elementor-element-hccatab .elementor-button:hover, .elementor-element-hccatvb .elementor-button:hover { background-color: #0F4C80; color: #FFFFFF; }
.elementor-element-hccatpb .elementor-button { font-size: 17px; padding: 14px 34px; }

/* El texto va directo en el div del widget: en Elementor 4 el
   text-editor ya no envuelve en .elementor-widget-container. */
.elementor-widget.elementor-element-hccatpp { font-family: 'Archivo Black', sans-serif; font-size: 42px; line-height: 1; color: #1B7FD4; margin: 16px 0 22px; }
.elementor-widget.elementor-element-hccatap, .elementor-widget.elementor-element-hccatvp { font-family: 'Archivo Black', sans-serif; font-size: 26px; line-height: 1; color: #1B7FD4; margin: 6px 0 14px; }
.elementor-element-hccatpimg img { max-width: 260px; }
.elementor-element-hccatpack { padding: 28px 32px 32px; }
.elementor-element-hccatcab { margin-bottom: 28px; }

/* La tarjeta del pack se estira a la altura de las dos de al lado:
   el envase crece para ocupar ese alto en vez de dejar aire. */
.elementor-element-hccatpack { justify-content: center; }
.elementor-element-hccatpimg img { max-width: 340px; }
.elementor-element-hccatpn .elementor-heading-title { margin-top: 4px; }

/* Envase a la izquierda y texto a la derecha dentro de la tarjeta del pack. */
.elementor-element-hccatpimg { --width: auto; --flex-grow: 0; --flex-shrink: 0; width: auto; }
.elementor-element-hccatpimg img { max-width: 268px; }
.elementor-element-hccatptx { --width: auto; --flex-grow: 1; }
.elementor-element-hccatpn .elementor-heading-title { font-size: 27px; }
.elementor-widget.elementor-element-hccatpp { font-size: 38px; margin: 14px 0 20px; }
.elementor-element-hccatpd .elementor-heading-title { font-size: 16px; max-width: 34ch; }

/* Ahora que la tarjeta es una fila, el contenido se centra en vertical. */
.elementor-element-hccatpack { --align-items: center; align-items: center; justify-content: flex-start; }
.elementor-element-hccatptx { align-self: center; }

/* La direccion pide que el precio siempre diga que incluye IVA. */
.hc-iva { display: block; font-family: Archivo, sans-serif; font-weight: 500; font-size: 13px; line-height: 1.3; letter-spacing: .02em; color: var(--hc-muted-ok, #4A6180); margin-top: 6px; }

/* Los swatches muestran los tres envases del pack: a 25px no se
   distingue una combinacion de otra. */
.wd-swatches-product .wd-swatch { width: 68px; height: 68px; border: 1px solid #D3E2F0; border-radius: 10px; background: #FFFFFF; }
.wd-swatches-product .wd-swatch .wd-swatch-bg { border-radius: 9px; }
.wd-swatches-product .wd-swatch img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.wd-swatches-product .wd-swatch.wd-active, .wd-swatches-product .wd-swatch:hover { border-color: var(--hc-accent-boton, #1565A8); box-shadow: 0 0 0 2px rgba(21, 101, 168, .18); }
.wd-swatches-product { gap: 10px; }

/* Pasos del checkout: sobre el fondo oscuro manda el verde del logo,
   tomado del propio archivo del logotipo (#30B810). */
.wd-checkout-steps li a, .wd-checkout-steps li a span { color: #3ECB1A; }
.wd-checkout-steps li a:hover, .wd-checkout-steps li a:hover span { color: #6FE356; }
.wd-checkout-steps .step-active > span, .wd-checkout-steps .step-active span { color: #FFFFFF; }
.wd-checkout-steps .step-active { border-bottom-color: #3ECB1A; }

/* Pie de pagina sobre el azul profundo de la marca. */
.wd-footer { background-color: #0A2E63; }
.wd-footer .footer-column { padding-top: 8px; }
.wd-footer .widget-title, .wd-footer .widgettitle { font-family: 'Archivo Black', sans-serif; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: #FFFFFF; margin-bottom: 16px; }
.wd-footer, .wd-footer p, .wd-footer li { color: #C7D8EC; font-size: 15px; line-height: 1.6; }
.wd-footer a { color: #C7D8EC; }
.wd-footer a:hover { color: #3ECB1A; }
.hc-pie-logo { display: block; max-width: 210px; height: auto; margin-bottom: 16px; }
.hc-pie-enlaces { list-style: none; margin: 0; padding: 0; }
.hc-pie-enlaces li { margin-bottom: 9px; }
.wd-copyrights { background-color: #08224A; color: #9FB6D2; }
.wd-copyrights a { color: #C7D8EC; }

/* Aviso de cobertura en carrito y checkout. */
.hc-aviso-rm {
	max-width: 1300px;
	margin: 0 auto 24px;
	padding: 14px 18px;
	background: #F1F7FC;
	border: 1px solid #D3E2F0;
	border-left: 4px solid var(--hc-accent-boton, #1565A8);
	border-radius: 6px;
	color: #0C2340;
	font-size: 15px;
	line-height: 1.55;
}

/* Logo del medio de pago en el pie. */
.hc-pago-logo { display: block; width: 48px; height: auto; margin: 4px 0 12px; border-radius: 8px; background: #FFFFFF; padding: 4px; }
.wd-copyrights img { height: 26px; width: auto; vertical-align: middle; border-radius: 6px; background: #FFFFFF; padding: 3px; }

/* Los sellos ahora son los recortes de la propia etiqueta. */
.elementor-element-hcseli1, .elementor-element-hcseli2, .elementor-element-hcseli3, .elementor-element-hcseli4, .elementor-element-hcseli5 img {
	width: 72px;
	height: 72px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}
.elementor-element-hcseli1, .elementor-element-hcseli2, .elementor-element-hcseli3, .elementor-element-hcseli4, .elementor-element-hcseli5 {
	margin-bottom: 12px;
}

/* Al pasar el mouse por la tarjeta, los sellos crecen apenas.
   La direccion pide movimiento discreto, asi que es un 8 por ciento. */
.elementor-element-hcseli1 img,
.elementor-element-hcseli2 img,
.elementor-element-hcseli3 img,
.elementor-element-hcseli4 img,
.elementor-element-hcseli5 img {
	transition: transform .25s ease;
	will-change: transform;
}
.elementor-element-hcsel1:hover .elementor-element-hcseli1 img,
.elementor-element-hcsel2:hover .elementor-element-hcseli2 img,
.elementor-element-hcsel3:hover .elementor-element-hcseli3 img,
.elementor-element-hcsel4:hover .elementor-element-hcseli4 img,
.elementor-element-hcsel5:hover .elementor-element-hcseli5 img {
	transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
	.elementor-element-hcseli1 img,
	.elementor-element-hcseli2 img,
	.elementor-element-hcseli3 img,
	.elementor-element-hcseli4 img,
	.elementor-element-hcseli5 img {
		transition: none;
	}
	.elementor-element-hcsel1:hover .elementor-element-hcseli1 img,
	.elementor-element-hcsel2:hover .elementor-element-hcseli2 img,
	.elementor-element-hcsel3:hover .elementor-element-hcseli3 img,
	.elementor-element-hcsel4:hover .elementor-element-hcseli4 img,
	.elementor-element-hcsel5:hover .elementor-element-hcseli5 img {
		transform: none;
	}
}

/* Woodmart deja una separacion de 40px bajo la cabecera. En las paginas
   armadas con Elementor a ancho completo el primer bloque ya trae su
   propio espacio, y ahi esa franja se ve como un hueco. */
body.page-template-elementor_header_footer main.wd-content-layout {
	padding-top: 0;
}

/* ---------------------------------------------------------------
   Aviso de compras recientes (PiWeb). El plugin lo ancla abajo a la
   derecha, justo encima del boton de WhatsApp: se corre a la
   izquierda, que ademas es donde se espera este tipo de aviso.
   --------------------------------------------------------------- */
.pi-popup {
	left: 20px !important;
	right: auto !important;
}

/* En el telefono ocupa el ancho y sube por sobre el WhatsApp */
@media (max-width: 767px) {
	.pi-popup {
		left: 12px !important;
		right: 12px !important;
		width: auto !important;
		max-width: none !important;
		bottom: 88px !important;
	}
}

/* ---------------------------------------------------------------
   Zona mayorista. Fondo azul profundo a proposito: el resto de la
   pagina le habla a quien compra un pack, esta zona le habla a otro
   cliente. El cambio de fondo marca ese corte; no es adorno.
   --------------------------------------------------------------- */
.elementor-element-hcsecmay {
	background: var(--hc-deep, #0A2E63);
	padding: 84px 24px;
}

.elementor-element-hcmayin {
	max-width: 1120px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 56px;
}

/* Columna del texto */
.elementor-element-hcmaytx {
	flex: 1 1 520px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: 0;
}

.elementor-element-hcmayk .elementor-heading-title {
	font-family: Archivo, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8FC4F0;
	margin: 0 0 12px;
}

.elementor-element-hcmayt .elementor-heading-title {
	font-family: "Archivo Black", sans-serif;
	font-size: 44px;
	line-height: 1.05;
	color: #FFFFFF;
	margin: 0 0 18px;
}

.elementor-element-hcmayd {
	font-family: Archivo, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: #C7DEF3;
	max-width: 48ch;
	margin: 0 0 28px;
}

.elementor-element-hcmayd p {
	margin: 0;
}

/* El boton invierte el par del sitio: blanco sobre el azul profundo */
.elementor-element-hcmayb .elementor-button {
	background: #FFFFFF;
	color: var(--hc-deep, #0A2E63);
	font-family: "Archivo Black", sans-serif;
	font-size: 16px;
	padding: 15px 32px;
	border-radius: var(--hc-r-pill, 999px);
	border: 2px solid #FFFFFF;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}

.elementor-element-hcmayb .elementor-button:hover,
.elementor-element-hcmayb .elementor-button:focus-visible {
	background: transparent;
	color: #FFFFFF;
	transform: translateY(-2px);
}

/* El foco tiene que verse sobre el azul profundo.
   Woodmart dibuja el foco con sus propias variables (base-deferred.css) y
   ademas declara a:focus{outline:none} en base.css, asi que una regla de
   outline propia no gana. En vez de pelear con !important se le cambian
   las variables a la seccion: el tema sigue dibujando el foco, pero con un
   color que si se ve contra este fondo. */
.elementor-element-hcsecmay {
	--wd-otl-color: #8FC4F0;
	--wd-otl-width: 3px;
	--wd-otl-style: solid;
}

/* Tarjeta con los datos duros */
.elementor-element-hcmaycard {
	flex: 0 1 380px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(143, 196, 240, .35);
	border-radius: var(--hc-r-md, 14px);
	padding: 34px 32px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.elementor-element-hcmaynum .elementor-heading-title {
	font-family: "Archivo Black", sans-serif;
	font-size: 76px;
	line-height: 1;
	color: #FFFFFF;
	margin: 0;
}

.elementor-element-hcmaynl .elementor-heading-title {
	font-family: Archivo, sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.35;
	color: #8FC4F0;
	margin: 6px 0 22px;
	max-width: 18ch;
}

.elementor-element-hcmaylista {
	font-family: Archivo, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	color: #C7DEF3;
	width: 100%;
}

.elementor-element-hcmaylista ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(143, 196, 240, .28);
}

.elementor-element-hcmaylista li {
	position: relative;
	padding: 12px 0 12px 24px;
	border-bottom: 1px solid rgba(143, 196, 240, .28);
}

.elementor-element-hcmaylista li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 20px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #8FC4F0;
}

@media (max-width: 1024px) {
	.elementor-element-hcsecmay {
		padding: 64px 20px;
	}

	.elementor-element-hcmayin {
		gap: 36px;
	}

	.elementor-element-hcmayt .elementor-heading-title {
		font-size: 36px;
	}
}

/* En el telefono la tarjeta pasa debajo del texto */
@media (max-width: 767px) {
	.elementor-element-hcmayin {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	.elementor-element-hcmaytx,
	.elementor-element-hcmaycard {
		flex: 1 1 auto;
	}

	.elementor-element-hcmayt .elementor-heading-title {
		font-size: 32px;
	}

	/* El widget se encoge por el align-items de la columna, asi que hay
	   que estirar el contenedor y no solo el boton de adentro. */
	.elementor-element-hcmayb {
		width: 100%;
	}

	.elementor-element-hcmayb .elementor-button {
		width: 100%;
		text-align: center;
	}

	.elementor-element-hcmaynum .elementor-heading-title {
		font-size: 60px;
	}
}

/* ---------------------------------------------------------------
   Campo del cupon: la etiqueta se queda a media altura al escribir y
   el codigo se lee encima de "Introduce el codigo".

   Woodmart fija top:21px para la etiqueta con un selector que le gana
   al top:6px de WooCommerce. En los campos de direccion no se nota
   porque esos viven dentro de .wc-block-components-form, y ahi
   WooCommerce tiene un selector mas especifico que si gana. El campo
   del cupon esta fuera de ese formulario, asi que se queda sin subir.
   Aqui se le devuelve el desplazamiento solo cuando esta activo.
   --------------------------------------------------------------- */
:is(div.wc-block-checkout, div.wc-block-cart) .wc-block-components-text-input.is-active > label,
.wc-block-components-totals-coupon__input.is-active > label {
	top: 6px;
}

/* ---------------------------------------------------------------
   Catalogo con el pack de 12. Ahora son dos packs arriba, uno al lado
   del otro, y las botellas sueltas pasan abajo en una fila. Antes las
   sueltas iban en columna al costado del unico pack; con dos packs ese
   costado queda demasiado angosto para leerlas.
   --------------------------------------------------------------- */
.elementor-element-hccatpk12 {
	background: #FFFFFF;
	border: 1px solid #D3E2F0;
	border-radius: 14px;
	padding: 32px;
	box-shadow: 0 10px 28px rgba(12, 35, 64, .07);
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
}

.elementor-element-hccatpack,
.elementor-element-hccatpk12 {
	flex: 1 1 460px;
}

.elementor-element-hccatcol {
	flex: 1 1 100%;
	flex-direction: row;
}

.elementor-element-hccatfa,
.elementor-element-hccatfv {
	flex: 1 1 0;
}

/* La foto de doce botellas es mas ancha que la de tres: necesita mas
   espacio o las filas del fondo quedan en miniatura. */
.elementor-element-hccatp12img {
	flex: 0 0 auto;
	width: 44%;
}

.elementor-element-hccatp12img img {
	display: block;
	width: 100%;
	height: auto;
}

.elementor-element-hccatp12tx {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: 0;
}

.elementor-element-hccatp12n .elementor-heading-title {
	font-family: "Archivo Black", sans-serif;
	font-size: 26px;
	line-height: 1.1;
	color: #0C2340;
	margin: 0 0 8px;
}

.elementor-element-hccatp12d .elementor-heading-title {
	font-family: Archivo, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: var(--hc-muted-ok, #4A6180);
	margin: 0;
	max-width: 34ch;
}

.elementor-element-hccatp12p p {
	font-family: "Archivo Black", sans-serif;
	font-size: 34px;
	line-height: 1;
	color: #1B7FD4;
	margin: 16px 0 18px;
}

.elementor-element-hccatp12b .elementor-button {
	font-size: 15px;
	padding: 12px 28px;
}

@media (max-width: 1024px) {
	.elementor-element-hccatpack,
	.elementor-element-hccatpk12 {
		flex: 1 1 100%;
	}
}

@media (max-width: 600px) {
	.elementor-element-hccatpk12 {
		flex-direction: column;
		align-items: flex-start;
		padding: 24px;
	}

	.elementor-element-hccatp12img {
		width: 100%;
	}

	.elementor-element-hccatp12img img {
		max-width: 420px;
		margin: 0 auto;
	}

	.elementor-element-hccatcol {
		flex-direction: column;
	}

	.elementor-element-hccatp12n .elementor-heading-title {
		font-size: 23px;
	}
}

/* ---------------------------------------------------------------
   El pack de 12 toma los mismos estilos que el de 3.
   Se escriben con el patron de selector que ya gana en esa tarjeta:
   el widget de texto no envuelve el precio en <p> (Elementor 4), y el
   boton necesita el selector completo para pasar por encima del estilo
   global del tema. Escribirlos "a la logica" no alcanza aqui.
   --------------------------------------------------------------- */
.elementor-element-hccatpk12 {
	--align-items: center;
	align-items: center;
	justify-content: flex-start;
}

.elementor-element-hccatp12img {
	--width: auto;
	--flex-grow: 0;
	--flex-shrink: 0;
	width: auto;
}

.elementor-element-hccatp12img img {
	display: block;
	max-width: 268px;
	width: 100%;
	height: auto;
}

.elementor-element-hccatp12tx {
	--width: auto;
	--flex-grow: 1;
	align-self: center;
}

.elementor-element-hccatp12n .elementor-heading-title {
	font-family: "Archivo Black", sans-serif;
	font-size: 27px;
	line-height: 1.1;
	color: #0C2340;
	margin: 4px 0 8px;
}

.elementor-element-hccatp12d .elementor-heading-title {
	font-family: Archivo, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.55;
	color: var(--hc-muted-ok, #4A6180);
	margin: 0;
	max-width: 34ch;
}

.elementor-widget.elementor-element-hccatp12p {
	font-family: 'Archivo Black', sans-serif;
	font-size: 38px;
	line-height: 1;
	color: #1B7FD4;
	margin: 14px 0 20px;
}

.elementor-element-hccatp12b .elementor-button {
	background-color: var(--hc-accent-boton, #1565A8);
	color: #FFFFFF;
	font-size: 17px;
	padding: 14px 34px;
	/* El resto de los botones del sitio son pastilla; este salia cuadrado */
	border-radius: var(--hc-r-pill, 999px);
}

.elementor-element-hccatp12b .elementor-button:hover,
.elementor-element-hccatp12b .elementor-button:focus-visible {
	background-color: #0F4C80;
	color: #FFFFFF;
}

@media (max-width: 600px) {
	.elementor-element-hccatp12img img {
		max-width: 300px;
		margin: 0 auto;
	}

	.elementor-element-hccatp12n .elementor-heading-title {
		font-size: 24px;
	}

	.elementor-widget.elementor-element-hccatp12p {
		font-size: 32px;
	}
}

/* ---------------------------------------------------------------
   Catalogo de la tienda.

   Las tarjetas no traen la misma cantidad de contenido: los packs
   muestran las miniaturas de sus combinaciones y las botellas sueltas
   no, asi que el boton de cada una quedaba a distinta altura y la fila
   se veia chueca. En vez de esconder las miniaturas —que son utiles—
   se estiran las tarjetas y el boton se empuja al fondo.
   --------------------------------------------------------------- */
.wd-products .product-grid-item,
.wd-products .product-grid-item > .wd-product-wrapper {
	height: 100%;
}

/* El selector va largo a proposito: con uno corto, Woodmart gana y el
   margen automatico no llega a aplicarse. */
.wd-products .product-grid-item .wd-product-wrapper > .wd-add-btn,
.wd-products .product-grid-item .product-wrapper > .wd-add-btn {
	margin-top: auto;
	padding-top: 14px;
}

/* El titulo a dos lineas fijas: con uno corto y otro largo, el precio
   de cada tarjeta terminaba en una altura distinta. */
.wd-products .product-grid-item .wd-entities-title {
	min-height: 2.6em;
}

/* ---------------------------------------------------------------
   Pasada visual a las tarjetas del catalogo del home.

   Son tarjetas que se pueden clickear entero y no daban ninguna senal
   de serlo: ni hover, ni foco de teclado. Se les agrega elevacion al
   pasar por encima —la sombra crece y la tarjeta sube dos pixeles, que
   es como se comporta algo que se puede levantar— y un borde de foco
   para quien navega con teclado.

   El enlace de cada boton NO se toca: esa ruta directa al checkout es
   lo que hace que la seccion venda.
   --------------------------------------------------------------- */
.elementor-element-hccatpack,
.elementor-element-hccatpk12,
.elementor-element-hccatfa,
.elementor-element-hccatfv {
	transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
	will-change: transform;
}

.elementor-element-hccatpack:hover,
.elementor-element-hccatpk12:hover,
.elementor-element-hccatfa:hover,
.elementor-element-hccatfv:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 38px rgba(12, 35, 64, .14);
	border-color: #B9D4EC;
}

/* El envase acompana el movimiento, apenas: la foto es lo que mira la
   persona y un cambio de escala muy marcado la despega de la tarjeta. */
.elementor-element-hccatpimg img,
.elementor-element-hccatp12img img,
.elementor-element-hccataimg img,
.elementor-element-hccatvimg img {
	transition: transform .28s ease;
}

.elementor-element-hccatpack:hover .elementor-element-hccatpimg img,
.elementor-element-hccatpk12:hover .elementor-element-hccatp12img img,
.elementor-element-hccatfa:hover .elementor-element-hccataimg img,
.elementor-element-hccatfv:hover .elementor-element-hccatvimg img {
	transform: scale(1.04);
}

/* Quien llega con el teclado tiene que ver donde esta parado. Woodmart
   apaga el outline de los enlaces, asi que el aviso lo da la tarjeta. */
.elementor-element-hccatpack:focus-within,
.elementor-element-hccatpk12:focus-within,
.elementor-element-hccatfa:focus-within,
.elementor-element-hccatfv:focus-within {
	box-shadow: 0 0 0 3px #1B7FD4, 0 16px 38px rgba(12, 35, 64, .14);
	border-color: transparent;
}

/* A quien pidio que no le animen la pantalla, no se le anima. */
@media (prefers-reduced-motion: reduce) {
	.elementor-element-hccatpack,
	.elementor-element-hccatpk12,
	.elementor-element-hccatfa,
	.elementor-element-hccatfv,
	.elementor-element-hccatpimg img,
	.elementor-element-hccatp12img img,
	.elementor-element-hccataimg img,
	.elementor-element-hccatvimg img {
		transition: none;
	}

	.elementor-element-hccatpack:hover,
	.elementor-element-hccatpk12:hover,
	.elementor-element-hccatfa:hover,
	.elementor-element-hccatfv:hover {
		transform: none;
	}

	.elementor-element-hccatpack:hover .elementor-element-hccatpimg img,
	.elementor-element-hccatpk12:hover .elementor-element-hccatp12img img,
	.elementor-element-hccatfa:hover .elementor-element-hccataimg img,
	.elementor-element-hccatfv:hover .elementor-element-hccatvimg img {
		transform: none;
	}
}

/* ---------------------------------------------------------------
   Catalogo del home en pantallas chicas.

   El problema real no era el ancho de las tarjetas sino el de las
   fotos: la imagen tenia un max-width de 268px pensado para una
   tarjeta de escritorio, y al angostarse la tarjeta se quedaba con
   todo el espacio. En tablet el bloque de texto llegaba a medir CERO
   pixeles de ancho y la tarjeta se estiraba a 850px de alto.

   La foto pasa a ocupar una fraccion del ancho disponible en vez de
   una medida fija, asi el texto siempre tiene su lugar.
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
	.elementor-element-hccatpimg,
	.elementor-element-hccatp12img {
		flex: 0 0 38%;
		width: 38%;
		max-width: 38%;
	}

	.elementor-element-hccatpimg img,
	.elementor-element-hccatp12img img {
		max-width: 100%;
	}

	.elementor-element-hccatptx,
	.elementor-element-hccatp12tx {
		flex: 1 1 auto;
		min-width: 0; /* sin esto el texto largo no deja encoger la columna */
	}

	.elementor-element-hccatpack,
	.elementor-element-hccatpk12 {
		padding: 24px;
	}
}

@media (max-width: 767px) {
	/* Sin esto la tarjeta envuelve y el texto se va debajo de la foto,
	   dejando un envase diminuto arriba y todo el texto abajo. */
	.elementor-element-hccatpack,
	.elementor-element-hccatpk12,
	.elementor-element-hccatfa,
	.elementor-element-hccatfv {
		flex-wrap: nowrap;
	}

	.elementor-element-hccatpimg,
	.elementor-element-hccatp12img {
		flex: 0 0 36%;
		width: 36%;
		max-width: 36%;
	}

	.elementor-element-hccatpack,
	.elementor-element-hccatpk12 {
		padding: 18px;
		gap: 16px;
	}

	/* En el telefono los titulos de escritorio se comen la pantalla */
	.elementor-element-hccatpn .elementor-heading-title,
	.elementor-element-hccatp12n .elementor-heading-title {
		font-size: 19px;
		margin: 0 0 6px;
	}

	.elementor-element-hccatpd .elementor-heading-title,
	.elementor-element-hccatp12d .elementor-heading-title {
		font-size: 14px;
		line-height: 1.45;
	}

	.elementor-widget.elementor-element-hccatpp,
	.elementor-widget.elementor-element-hccatp12p {
		font-size: 26px;
		margin: 10px 0 12px;
	}

	.elementor-element-hccatpb .elementor-button,
	.elementor-element-hccatp12b .elementor-button {
		font-size: 14px;
		padding: 11px 20px;
	}

	/* La leyenda bajo el precio se aprieta contra el numero */
	.hc-iva {
		display: block;
		margin-top: 2px;
	}
}

/* En pantallas muy angostas la foto se achica un poco mas, pero no
   tanto como para no distinguir de que producto se trata. */
@media (max-width: 400px) {
	.elementor-element-hccatpimg,
	.elementor-element-hccatp12img {
		flex: 0 0 33%;
		width: 33%;
		max-width: 33%;
	}
}

/* ---------------------------------------------------------------
   Las dos descripciones de los packs no tienen el mismo largo: la del
   pack de 3 ocupa tres lineas y la del de 12, cuatro. Eso corria el
   precio y el boton de una tarjeta respecto de la otra.
   Se les reserva el alto de cuatro lineas a ambas (4 x 24.8px) para
   que todo lo que va debajo arranque a la misma altura.
   --------------------------------------------------------------- */
@media (min-width: 1025px) {
	.elementor-element-hccatpd .elementor-heading-title,
	.elementor-element-hccatp12d .elementor-heading-title {
		min-height: 99px;
	}
}

/* ---------------------------------------------------------------
   Encuadre de cada slide en telefono.

   Al recortar a vertical, un mismo punto de anclaje no sirve para las
   dos fotos: en la del lavadero la persona y el envase estan a la
   derecha del cuadro, y en la del patio los ninos y el perro estan al
   centro-izquierda y abajo. Con un valor unico, una de las dos quedaba
   mostrando pared o sabanas vacias.
   --------------------------------------------------------------- */
@media (max-width: 767px) {
	.elementor-widget-n-carousel .swiper-slide > .e-con.elementor-element-hcsl1 {
		background-position: 65% 45% !important;
	}

	.elementor-widget-n-carousel .swiper-slide > .e-con.elementor-element-hcsl3 {
		background-position: 33% 62% !important;
	}
}

/* En telefono el hero ocupaba la pantalla completa (100svh). Al recortar
   una foto apaisada a ese alto, el encuadre se cierra tanto que se pierde
   la escena. Con un alto menor entra mas foto y ademas el catalogo queda
   mas cerca del primer scroll. */
@media (max-width: 767px) {
	body.home .elementor-widget-n-carousel .swiper,
	body.home .elementor-widget-n-carousel .swiper-wrapper,
	body.home .elementor-widget-n-carousel .swiper-slide {
		height: 74svh !important;
		min-height: 560px;
	}
}

/* En telefono el panel de texto ocupaba casi dos tercios del hero y
   tapaba justo la parte de la foto donde esta el producto. La nota al
   pie —que repite lo que ya dice la descripcion— se oculta: el panel
   queda mas corto y el envase vuelve a verse. En escritorio se mantiene,
   porque ahi el panel es una columna angosta y sobra espacio. */
@media (max-width: 767px) {
	.elementor-element-hcleg1,
	.elementor-element-hcleg3 {
		display: none !important;
	}

	.elementor-element-hcsl1t .elementor-heading-title,
	.elementor-element-hcsl3t .elementor-heading-title {
		font-size: 30px;
		line-height: 1.08;
	}

	.elementor-element-hcsl1a,
	.elementor-element-hcsl2a,
	.elementor-element-hcsl3a {
		padding: 20px 18px 22px !important;
	}
}

/* ---------------------------------------------------------------
   Hero compacto en telefono y tablet.

   En pantalla chica lo que tiene que leerse rapido es el mensaje y el
   boton; que la foto se luzca es secundario y se resigna a proposito.
   Con menos alto y textos mas chicos el slide deja de ocupar toda la
   pantalla y el catalogo aparece antes al hacer scroll.
   --------------------------------------------------------------- */

/* --- Tablet --- */
@media (min-width: 768px) and (max-width: 1024px) {
	body.home .elementor-widget-n-carousel .swiper,
	body.home .elementor-widget-n-carousel .swiper-wrapper,
	body.home .elementor-widget-n-carousel .swiper-slide {
		height: 62svh !important;
		min-height: 460px;
	}

	.elementor-element-hcsl1a,
	.elementor-element-hcsl2a,
	.elementor-element-hcsl3a {
		padding: 20px 22px 22px !important;
		max-width: 440px;
	}

	.elementor-element-hcsl1k .elementor-heading-title,
	.elementor-element-hcsl3k .elementor-heading-title {
		font-size: 12px;
	}

	.elementor-element-hcsl1t .elementor-heading-title,
	.elementor-element-hcsl3t .elementor-heading-title {
		font-size: 32px;
		line-height: 1.08;
	}

	.elementor-element-hcsl1d .elementor-heading-title,
	.elementor-element-hcsl3d .elementor-heading-title {
		font-size: 15px;
		line-height: 1.45;
	}

	.elementor-element-hcleg1,
	.elementor-element-hcleg3 {
		display: none !important;
	}

	.hc-slide .elementor-button {
		font-size: 15px;
		padding: 11px 24px;
		min-height: 0;
	}
}

/* --- Telefono --- */
@media (max-width: 767px) {
	body.home .elementor-widget-n-carousel .swiper,
	body.home .elementor-widget-n-carousel .swiper-wrapper,
	body.home .elementor-widget-n-carousel .swiper-slide {
		height: 58svh !important;
		min-height: 420px;
	}

	.elementor-widget-n-carousel .swiper-slide > .e-con {
		padding-top: 24px !important;
		padding-bottom: 28px !important;
	}

	.elementor-element-hcsl1a,
	.elementor-element-hcsl2a,
	.elementor-element-hcsl3a {
		padding: 16px 16px 18px !important;
	}

	.elementor-element-hcsl1k .elementor-heading-title,
	.elementor-element-hcsl3k .elementor-heading-title {
		font-size: 11px;
		margin-bottom: 6px;
	}

	.elementor-element-hcsl1t .elementor-heading-title,
	.elementor-element-hcsl3t .elementor-heading-title {
		font-size: 25px;
		line-height: 1.06;
		margin-bottom: 8px;
	}

	.elementor-element-hcsl1d .elementor-heading-title,
	.elementor-element-hcsl3d .elementor-heading-title {
		font-size: 14px;
		line-height: 1.4;
	}

	/* El boton no necesita ocupar todo el ancho: al hacerlo obliga a
	   estirar el panel y devuelve el alto que se acaba de recortar. */
	.hc-slide .elementor-widget-button {
		width: auto;
	}

	.hc-slide .elementor-button {
		width: auto;
		font-size: 15px;
		padding: 12px 26px;
		min-height: 44px; /* area tactil comoda, sin pasarse */
	}
}

/* ---------------------------------------------------------------
   Catalogo del home, ahora con el widget de productos de Woodmart.

   Las tarjetas hechas a mano se reemplazaron por wd_products: trae
   resuelto el comportamiento en pantallas chicas, que era justo lo que
   habia que parchar una y otra vez. El boton sigue yendo derecho al
   checkout gracias al filtro de hardcorito-core.

   Lo unico que necesita el widget aqui es que las miniaturas de
   combinacion se acomoden en fila: dentro de esta seccion heredan
   display block y se apilaban una debajo de otra, con las etiquetas
   encimadas.
   --------------------------------------------------------------- */
.elementor-element-hcseccat .wd-swatches-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 12px;
}

.elementor-element-hcseccat .wd-swatches-grid .wd-swatch {
	/* Las cuatro combinaciones entran siempre en una fila: en vez de un
	   tamano fijo —que segun el ancho de pantalla sobraba por unos pocos
	   pixeles y mandaba una miniatura abajo— se reparten el espacio
	   disponible y se achican solas si hace falta. */
	flex: 0 1 auto;
	width: calc((100% - 24px) / 4);
	max-width: 58px;
	height: auto;
	aspect-ratio: 1;
}

/* La etiqueta de texto de cada miniatura solo estorba: la imagen ya
   dice de que combinacion se trata, y en cuatro columnas no hay ancho
   para leerla. Se mantiene accesible para lectores de pantalla. */
.elementor-element-hcseccat .wd-swatches-grid .wd-swatch-text,
.elementor-element-hcseccat .wd-swatches-grid .wd-swatch > span:not([class]) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Las tarjetas parejas y el boton al fondo, igual que en la tienda */
.elementor-element-hcseccat .product-grid-item,
.elementor-element-hcseccat .product-grid-item > .wd-product-wrapper {
	height: 100%;
}

.elementor-element-hcseccat .product-grid-item .wd-product-wrapper > .wd-add-btn,
.elementor-element-hcseccat .product-grid-item .product-wrapper > .wd-add-btn {
	margin-top: auto;
	padding-top: 12px;
}

.elementor-element-hcseccat .product-grid-item .wd-entities-title {
	min-height: 2.6em;
}

/* El boton toma el azul del sitio y la forma de pastilla */
.elementor-element-hcseccat .product-grid-item .wd-add-btn .button,
.elementor-element-hcseccat .product-grid-item .hc-compra-directa {
	background-color: var(--hc-accent-boton, #1565A8);
	color: #FFFFFF;
	border-radius: var(--hc-r-pill, 999px);
	font-family: "Archivo Black", sans-serif;
	font-size: 15px;
	padding: 12px 24px;
	transition: background-color .18s ease;
}

.elementor-element-hcseccat .product-grid-item .wd-add-btn .button:hover,
.elementor-element-hcseccat .product-grid-item .hc-compra-directa:hover {
	background-color: #0F4C80;
	color: #FFFFFF;
}

@media (max-width: 767px) {
	.elementor-element-hcseccat .product-grid-item .wd-add-btn .button,
	.elementor-element-hcseccat .product-grid-item .hc-compra-directa {
		font-size: 13px;
		padding: 11px 16px;
	}

	.elementor-element-hcseccat .wd-swatches-grid .wd-swatch {
		width: 44px;
		height: 44px;
	}
}

/* En dos columnas la tarjeta mide unos 170px: a 44px las cuatro
   miniaturas no entraban y una saltaba sola a la fila de abajo. */
@media (max-width: 767px) {
	.elementor-element-hcseccat .wd-swatches-grid {
		gap: 5px;
	}

	.elementor-element-hcseccat .wd-swatches-grid .wd-swatch {
		width: 36px;
		height: 36px;
	}
}

/* ---------------------------------------------------------------
   Etiquetas de producto.

   Se usan las nativas del tema —que ya traen forma y posicion— pero el
   color venia de fabrica: la de destacado salia roja, y el rojo no esta
   en la paleta del sitio. El panel de opciones guarda el color pero no
   llega a regenerar su CSS, asi que se fijan aca.

   "Mas vendido" en azul de marca y "Nuevo" en el verde del envase: los
   dos colores que la persona ya vio en el producto.
   --------------------------------------------------------------- */
.wd .product-label.featured,
.product-labels .product-label.featured {
	background-color: var(--hc-accent-boton, #1565A8);
	color: #FFFFFF;
}

.wd .product-label.new,
.product-labels .product-label.new {
	background-color: var(--hc-eco, #2E8B33);
	color: #FFFFFF;
}

.wd .product-label.onsale,
.product-labels .product-label.onsale {
	background-color: #C2410C;
	color: #FFFFFF;
}

/* Acabado: la etiqueta de fabrica es muy pequena y se pierde sobre la
   foto. Con algo mas de aire, letra mas firme y una sombra corta queda
   despegada del fondo sin gritar. */
.product-labels .product-label {
	padding: 7px 13px;
	font-family: "Archivo Black", sans-serif;
	font-size: 11px;
	letter-spacing: .04em;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(12, 35, 64, .18);
}

/* En el telefono la tarjeta es chica: la etiqueta se achica con ella */
@media (max-width: 767px) {
	.product-labels .product-label {
		padding: 5px 9px;
		font-size: 10px;
	}
}