/* =============================================================================
   VETERCALM COMPONENTS — ajustes finos sobre la base Woodmart + overrides.
   =============================================================================
   Solo contiene reglas que las variables no cubren. Todo scoped bajo .vc-theme
   (añadido en body_class desde functions.php) para no contaminar si alguna vez
   se desactiva el child.

   Orden interno:
     1) Typography primitives (eyebrow, link-underline, reveal)
     2) Buttons (WC add-to-cart, checkout, etc.)
     3) Forms (inputs, selects, checkboxes)
     4) Cards y product loop
     5) Tabla de carrito
     6) Checkout
     7) Mini-cart / dropdown
     8) Header + footer tweaks
     9) Focus rings accesibles
    10) Media (prefers-reduced-motion)
   ============================================================================= */

/* -----------------------------------------------------------------------------
 * 1. TYPOGRAPHY PRIMITIVES
 * -------------------------------------------------------------------------- */

.vc-theme .vc-eyebrow,
.vc-theme .eyebrow {
  font-family: var(--vc-font-sans);
  font-size: var(--vc-text-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--vc-tracking-eyebrow);
  color: var(--vc-amber);
  line-height: 1;
}

.vc-theme .vc-display-xl { font-size: var(--vc-text-display-xl); line-height: var(--vc-lh-display-xl); letter-spacing: var(--vc-tracking-xl); font-family: var(--vc-font-display); font-weight: 400; }
.vc-theme .vc-display-lg { font-size: var(--vc-text-display-lg); line-height: var(--vc-lh-display-lg); letter-spacing: var(--vc-tracking-lg); font-family: var(--vc-font-display); font-weight: 400; }
.vc-theme .vc-display-md { font-size: var(--vc-text-display-md); line-height: var(--vc-lh-display-md); letter-spacing: var(--vc-tracking-md); font-family: var(--vc-font-display); font-weight: 500; }

/* Italic serif highlight — estilo Vetercalm v2 (h1 em dentro) */
.vc-theme h1 em, .vc-theme h2 em, .vc-theme h3 em {
  font-style: italic;
  color: var(--vc-amber);
}

/* Underline animado para links inline */
.vc-theme a.vc-link,
.vc-theme .vc-link-underline {
  position: relative;
  display: inline-block;
  color: var(--vc-forest);
  text-decoration: none;
  transition: color var(--vc-duration-base) var(--vc-ease-out-expo);
}
.vc-theme a.vc-link::after,
.vc-theme .vc-link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 500ms var(--vc-ease-out-expo);
}
.vc-theme a.vc-link:hover,
.vc-theme .vc-link-underline:hover { color: var(--vc-amber); }
.vc-theme a.vc-link:hover::after,
.vc-theme .vc-link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Scroll reveal (estados del IntersectionObserver) */
.vc-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--vc-duration-slow) var(--vc-ease-out-expo),
    transform var(--vc-duration-slow) var(--vc-ease-out-expo);
  will-change: opacity, transform;
}
.vc-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* -----------------------------------------------------------------------------
 * 2. BOTONES — WooCommerce usa varias clases dispersas, las unificamos.
 * -------------------------------------------------------------------------- */

.vc-theme .button,
.vc-theme button.button,
.vc-theme input[type="submit"],
.vc-theme .btn,
.vc-theme .woocommerce .button,
.vc-theme .woocommerce-page .button,
.vc-theme .add_to_cart_button,
.vc-theme .single_add_to_cart_button,
.vc-theme .checkout-button,
.vc-theme .wc-proceed-to-checkout .button,
.vc-theme .wc-block-components-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: var(--vc-radius-pill);
  font-family: var(--vc-font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  line-height: 1.2;
  background-color: var(--vc-amber);
  color: var(--vc-bone);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--vc-duration-base) var(--vc-ease-out-expo),
    transform var(--vc-duration-base) var(--vc-ease-out-expo),
    box-shadow var(--vc-duration-base) var(--vc-ease-out-expo),
    border-color var(--vc-duration-base) var(--vc-ease-out-expo);
  box-shadow: none;
}

.vc-theme .button:hover,
.vc-theme button.button:hover,
.vc-theme input[type="submit"]:hover,
.vc-theme .btn:hover,
.vc-theme .woocommerce .button:hover,
.vc-theme .woocommerce-page .button:hover,
.vc-theme .add_to_cart_button:hover,
.vc-theme .single_add_to_cart_button:hover,
.vc-theme .checkout-button:hover,
.vc-theme .wc-proceed-to-checkout .button:hover,
.vc-theme .wc-block-components-button:hover {
  background-color: var(--vc-amber-hover);
  color: var(--vc-bone);
  transform: translateY(-2px);
  box-shadow: var(--vc-shadow-amber);
}

.vc-theme .button:active { transform: translateY(0); }

/* Variante ghost (outline forest) */
.vc-theme .btn-ghost,
.vc-theme .button.alt-outline,
.vc-theme .button.outline,
.vc-theme .woocommerce .button.wc-backward,
.vc-theme .woocommerce-message .button {
  background-color: transparent;
  color: var(--vc-forest);
  border: 1px solid var(--vc-forest-25);
}
.vc-theme .btn-ghost:hover,
.vc-theme .button.alt-outline:hover,
.vc-theme .button.outline:hover,
.vc-theme .woocommerce .button.wc-backward:hover,
.vc-theme .woocommerce-message .button:hover {
  background-color: transparent;
  border-color: var(--vc-forest);
  color: var(--vc-forest);
  transform: translateY(-2px);
  box-shadow: var(--vc-shadow-soft);
}

/* Plus/minus del qty selector: misma familia, más chicos */
.vc-theme .quantity .plus,
.vc-theme .quantity .minus {
  background: var(--vc-bone-warm);
  color: var(--vc-forest);
  border: 1px solid var(--vc-forest-15);
  border-radius: var(--vc-radius-sm);
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  line-height: 1;
  transition: background-color var(--vc-duration-fast) var(--vc-ease-out-expo);
}
.vc-theme .quantity .plus:hover,
.vc-theme .quantity .minus:hover {
  background: var(--vc-kraft-light);
  color: var(--vc-forest-deep);
  transform: none;
  box-shadow: none;
}


/* -----------------------------------------------------------------------------
 * 3. FORMULARIOS
 * -------------------------------------------------------------------------- */

.vc-theme input[type="text"],
.vc-theme input[type="email"],
.vc-theme input[type="tel"],
.vc-theme input[type="number"],
.vc-theme input[type="password"],
.vc-theme input[type="search"],
.vc-theme input[type="url"],
.vc-theme textarea,
.vc-theme select,
.vc-theme .woocommerce-input-wrapper input,
.vc-theme .select2-container--default .select2-selection--single {
  font-family: var(--vc-font-sans);
  font-size: 0.95rem;
  color: var(--vc-ink);
  background-color: var(--vc-bone);
  border: 1px solid var(--vc-forest-15);
  border-radius: var(--vc-radius-sm);
  padding: 0.625rem 0.875rem;
  height: 42px;
  line-height: 1.4;
  transition:
    border-color var(--vc-duration-fast) var(--vc-ease-out-expo),
    box-shadow var(--vc-duration-fast) var(--vc-ease-out-expo);
}

.vc-theme textarea {
  height: auto;
  min-height: 120px;
  padding: 0.875rem;
  resize: vertical;
}

.vc-theme input[type="text"]:focus,
.vc-theme input[type="email"]:focus,
.vc-theme input[type="tel"]:focus,
.vc-theme input[type="number"]:focus,
.vc-theme input[type="password"]:focus,
.vc-theme input[type="search"]:focus,
.vc-theme input[type="url"]:focus,
.vc-theme textarea:focus,
.vc-theme select:focus {
  border-color: var(--vc-amber);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--vc-amber-rgb), 0.15);
}

.vc-theme ::placeholder {
  color: var(--vc-ink-mute);
  opacity: 1;
}

/* Checkboxes y radios custom look */
.vc-theme input[type="checkbox"],
.vc-theme input[type="radio"] {
  accent-color: var(--vc-amber);
}

/* Labels */
.vc-theme label,
.vc-theme .woocommerce-form label {
  font-family: var(--vc-font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--vc-forest);
  letter-spacing: 0.02em;
}


/* -----------------------------------------------------------------------------
 * 3.1 CONTACT FORM 7 (wpcf7) — página /contacto/
 * Woodmart/Elementor renderiza CF7 con fallbacks square-black; forzamos el
 * lenguaje visual Vetercalm (forest + amber + pill). Alta especificidad
 * `.vc-theme .wpcf7 ...` para ganarle a Elementor Pro.
 * -------------------------------------------------------------------------- */

.vc-theme .wpcf7-form {
  font-family: var(--vc-font-sans);
  color: var(--vc-ink);
}

.vc-theme .wpcf7-form p,
.vc-theme .wpcf7-form label {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--vc-font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--vc-forest);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.vc-theme .wpcf7-form .wpcf7-form-control-wrap {
  display: block;
  margin-top: 0.375rem;
}

.vc-theme .wpcf7-form input[type="text"],
.vc-theme .wpcf7-form input[type="email"],
.vc-theme .wpcf7-form input[type="tel"],
.vc-theme .wpcf7-form input[type="url"],
.vc-theme .wpcf7-form input[type="number"],
.vc-theme .wpcf7-form input[type="date"],
.vc-theme .wpcf7-form select,
.vc-theme .wpcf7-form textarea {
  width: 100%;
  font-family: var(--vc-font-sans);
  font-size: 0.95rem;
  color: var(--vc-ink);
  background-color: var(--vc-bone);
  border: 1px solid var(--vc-forest-15);
  border-radius: var(--vc-radius-sm);
  padding: 0.75rem 1rem;
  height: 46px;
  line-height: 1.4;
  transition:
    border-color var(--vc-duration-fast) var(--vc-ease-out-expo),
    box-shadow var(--vc-duration-fast) var(--vc-ease-out-expo),
    background-color var(--vc-duration-fast) var(--vc-ease-out-expo);
  box-shadow: none;
}

.vc-theme .wpcf7-form textarea {
  height: auto;
  min-height: 160px;
  padding: 0.875rem 1rem;
  resize: vertical;
}

.vc-theme .wpcf7-form input:focus,
.vc-theme .wpcf7-form select:focus,
.vc-theme .wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--vc-amber);
  background-color: var(--vc-bone-warm, var(--vc-bone));
  box-shadow: 0 0 0 3px rgba(var(--vc-amber-rgb, 200, 134, 46), 0.18);
}

/* Submit — forza estética pill amber con hover lift (gana a black default) */
.vc-theme .wpcf7-form .wpcf7-submit,
.vc-theme .wpcf7-form input[type="submit"],
.vc-theme .wpcf7-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem !important;
  height: auto !important;
  min-height: 48px;
  width: auto;
  border-radius: var(--vc-radius-pill) !important;
  font-family: var(--vc-font-sans) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  background-color: var(--vc-amber) !important;
  color: var(--vc-bone) !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  margin-top: 0.5rem;
  transition:
    background-color var(--vc-duration-base) var(--vc-ease-out-expo),
    transform var(--vc-duration-base) var(--vc-ease-out-expo),
    box-shadow var(--vc-duration-base) var(--vc-ease-out-expo) !important;
  box-shadow: none !important;
}

.vc-theme .wpcf7-form .wpcf7-submit:hover,
.vc-theme .wpcf7-form input[type="submit"]:hover,
.vc-theme .wpcf7-form button[type="submit"]:hover {
  background-color: var(--vc-amber-hover) !important;
  color: var(--vc-bone) !important;
  transform: translateY(-2px);
  box-shadow: var(--vc-shadow-amber) !important;
}

.vc-theme .wpcf7-form .wpcf7-submit:active { transform: translateY(0); }

.vc-theme .wpcf7-form .wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Spinner + validación */
.vc-theme .wpcf7-spinner {
  background-color: var(--vc-forest-10);
  margin-left: 0.75rem;
}

.vc-theme .wpcf7-not-valid-tip {
  font-family: var(--vc-font-sans);
  font-size: 0.8rem;
  color: #b3261e;
  margin-top: 0.375rem;
}

.vc-theme .wpcf7-form .wpcf7-not-valid {
  border-color: #b3261e !important;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}

/* Mensajes de respuesta (éxito / error) */
.vc-theme .wpcf7-response-output {
  font-family: var(--vc-font-sans);
  font-size: 0.9rem;
  border-radius: var(--vc-radius-sm);
  padding: 0.875rem 1.125rem !important;
  margin: 1.5rem 0 0 !important;
  border: 1px solid var(--vc-forest-15) !important;
}

.vc-theme .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--vc-forest) !important;
  background-color: rgba(31, 61, 46, 0.06);
  color: var(--vc-forest);
}

.vc-theme .wpcf7 form.invalid .wpcf7-response-output,
.vc-theme .wpcf7 form.failed .wpcf7-response-output {
  border-color: #b3261e !important;
  background-color: rgba(179, 38, 30, 0.06);
  color: #b3261e;
}

/* Required asterisk sutil en amber */
.vc-theme .wpcf7-form label .required,
.vc-theme .wpcf7-form .required {
  color: var(--vc-amber);
  margin-left: 0.15rem;
}

/* Grid 2 columnas en desktop para pares lado a lado (nombre/email, etc.).
   CF7 por default pone cada campo en un <p> propio; si el editor usa grid
   de Elementor o columnas manuales, esto no interfiere. */
@media (min-width: 768px) {
  .vc-theme .wpcf7-form.vc-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
  }
  .vc-theme .wpcf7-form.vc-form-grid .vc-form-full,
  .vc-theme .wpcf7-form.vc-form-grid p:has(textarea),
  .vc-theme .wpcf7-form.vc-form-grid p:has(.wpcf7-submit) {
    grid-column: 1 / -1;
  }
}


/* -----------------------------------------------------------------------------
 * 4. CARDS Y PRODUCT LOOP
 * -------------------------------------------------------------------------- */

.vc-theme .products .product,
.vc-theme ul.products li.product,
.vc-theme .wd-products-element .product-grid-item {
  background: var(--vc-bone);
  border: 1px solid var(--vc-forest-10);
  border-radius: var(--vc-radius-sm);
  overflow: hidden;
  padding-bottom: 1.25rem;
  transition: border-color var(--vc-duration-base) var(--vc-ease-out-expo),
              transform var(--vc-duration-base) var(--vc-ease-out-expo);
}

.vc-theme .products .product:hover,
.vc-theme ul.products li.product:hover {
  border-color: var(--vc-forest-25);
  transform: translateY(-2px);
}

.vc-theme .products .product .woocommerce-loop-product__title,
.vc-theme .wd-entities-title a,
.vc-theme ul.products li.product h2.woocommerce-loop-product__title,
.vc-theme ul.products li.product h3.woocommerce-loop-product__title {
  font-family: var(--vc-font-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--vc-forest);
  line-height: 1.25;
  letter-spacing: var(--vc-tracking-md);
}

.vc-theme .products .price,
.vc-theme .price ins,
.vc-theme .wd-price {
  font-family: var(--vc-font-sans);
  font-weight: 600;
  color: var(--vc-forest);
  font-feature-settings: "tnum";
}

.vc-theme .products .price del {
  color: var(--vc-ink-mute);
  opacity: 0.7;
  font-weight: 400;
}

/* Single product — precio destacado */
.vc-theme .vc-product-price,
.vc-theme .product_title + .vc-product-price,
.vc-theme .single-product .price {
  font-family: var(--vc-font-sans);
  font-weight: 600;
  font-size: 1.75rem;
  color: var(--vc-forest);
  margin: 1rem 0 1.25rem;
  line-height: 1.2;
  font-feature-settings: "tnum";
}

.vc-theme .vc-product-price del,
.vc-theme .single-product .price del {
  font-size: 1.1rem;
  color: var(--vc-ink-mute);
  font-weight: 400;
  margin-right: 0.5rem;
}

.vc-theme .vc-product-price ins,
.vc-theme .single-product .price ins {
  text-decoration: none;
  color: var(--vc-amber);
}

/* Single product title (via override de title.php) */
.vc-theme .product_title.vc-display-md {
  margin: 0.5rem 0 0.75rem;
  color: var(--vc-forest);
  font-weight: 500;
}

/* Badge "Sale!" / "Oferta" más sobrio */
.vc-theme .onsale,
.vc-theme .product-label.onsale {
  background: var(--vc-kraft);
  color: var(--vc-forest-deep);
  font-family: var(--vc-font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: var(--vc-radius-pill);
  border: none;
}


/* -----------------------------------------------------------------------------
 * 5. TABLA DE CARRITO
 * -------------------------------------------------------------------------- */

.vc-theme .woocommerce-cart-form,
.vc-theme table.shop_table {
  border: 1px solid var(--vc-forest-10);
  border-radius: var(--vc-radius-sm);
  overflow: hidden;
  font-family: var(--vc-font-sans);
}

.vc-theme table.shop_table th,
.vc-theme table.shop_table thead th {
  background: var(--vc-bone-warm);
  color: var(--vc-forest);
  font-family: var(--vc-font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--vc-forest-15);
}

.vc-theme table.shop_table td {
  padding: 1.25rem;
  border-bottom: 1px solid var(--vc-forest-10);
  vertical-align: middle;
  color: var(--vc-ink);
}

.vc-theme table.shop_table .product-name a {
  color: var(--vc-forest);
  font-weight: 500;
}

.vc-theme .cart_totals {
  background: var(--vc-bone-warm);
  padding: 1.5rem;
  border-radius: var(--vc-radius-sm);
}

.vc-theme .cart_totals h2 {
  font-family: var(--vc-font-display);
  color: var(--vc-forest);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}


/* -----------------------------------------------------------------------------
 * 6. CHECKOUT
 * -------------------------------------------------------------------------- */

.vc-theme .woocommerce-checkout h3,
.vc-theme #order_review_heading,
.vc-theme .woocommerce-billing-fields h3,
.vc-theme .woocommerce-additional-fields h3 {
  font-family: var(--vc-font-display);
  color: var(--vc-forest);
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.vc-theme .woocommerce-checkout-review-order {
  background: var(--vc-bone-warm);
  padding: 1.5rem;
  border-radius: var(--vc-radius-sm);
}

.vc-theme .wc_payment_methods {
  list-style: none;
  padding: 0;
}

.vc-theme .wc_payment_method {
  padding: 1rem;
  background: var(--vc-bone);
  border: 1px solid var(--vc-forest-10);
  border-radius: var(--vc-radius-sm);
  margin-bottom: 0.75rem;
}

.vc-theme .wc_payment_method label {
  color: var(--vc-forest);
  font-weight: 500;
}


/* -----------------------------------------------------------------------------
 * 7. MINI-CART DROPDOWN
 * -------------------------------------------------------------------------- */

.vc-theme .widget_shopping_cart,
.vc-theme .woocommerce-mini-cart {
  background: var(--vc-bone);
  color: var(--vc-ink);
}

.vc-theme .woocommerce-mini-cart__total,
.vc-theme .widget_shopping_cart .total {
  border-top: 1px solid var(--vc-forest-15);
  padding-top: 1rem;
  color: var(--vc-forest);
  font-weight: 600;
}


/* -----------------------------------------------------------------------------
 * 8. HEADER — transparente, blur adaptativo, wordmark, menú editorial
 * --------------------------------------------------------------------------
 * Mobile-first PSI:
 *  - backdrop-filter con radius menor en mobile (blur barato en GPUs débiles).
 *  - contain: layout style aísla repaints del sticky → menos work por scroll.
 *  - Hover con transform: scaleX() (GPU-composited, sin layout trigger).
 *  - Hover effects desactivados en touch (@media hover: none) → menos JS/paint.
 *  - Wordmark = texto plano (0 HTTP req, 0 CLS, escalable).
 *  - Touch targets ≥ 44px en mobile (WCAG 2.5.5).
 * -------------------------------------------------------------------------- */

/* --- 8.1 Barra de header: translúcido + blur ---
 * IMPORTANTE: Woodmart mueve .whb-main-header entre position:relative (default)
 * y position:fixed (.whb-sticked), y usa un `.whb-clone` position:fixed para
 * el efecto slide. NO usar `contain: layout` acá — rompe el fixed descendiente.
 * Aplicamos el bg translúcido al ROW (.whb-row / .whb-general-header) que es
 * donde Woodmart pinta el color vía Customizer; sobreescribimos con !important
 * para ganarle a los inline styles runtime de class-styles.php. */
.vc-theme .whb-header,
.vc-theme .whb-main-header,
.vc-theme .whb-row,
.vc-theme .whb-general-header,
.vc-theme .whb-header-bottom,
.vc-theme .whb-top-bar,
.vc-theme .whb-clone .whb-row,
.vc-theme .whb-clone .whb-main-header {
  background-color: rgba(248, 245, 238, 0.85) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
          backdrop-filter: blur(8px) saturate(1.05);
}

/* El contenedor raíz y el clone NO necesitan bg (lo heredan del row interno),
 * así evitamos doble blur apilado. */
.vc-theme .whb-header,
.vc-theme .whb-clone {
  background-color: transparent !important;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* Blur un poco más intenso en desktop (donde el GPU sobra) */
@media (min-width: 1024px) {
  .vc-theme .whb-main-header,
  .vc-theme .whb-row,
  .vc-theme .whb-general-header,
  .vc-theme .whb-header-bottom,
  .vc-theme .whb-top-bar,
  .vc-theme .whb-clone .whb-row,
  .vc-theme .whb-clone .whb-main-header {
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
            backdrop-filter: blur(14px) saturate(1.08);
  }
}

/* Hairline inferior sólo cuando está pegado al top (evita línea dura sobre hero) */
.vc-theme .whb-sticked .whb-row:last-child,
.vc-theme .whb-clone.whb-sticked .whb-row:last-child {
  box-shadow: 0 1px 0 var(--vc-forest-10);
}

/* --- 8.1.1 OVERLAY MODE (home) ---
 * Usamos la clase nativa .whb-overcontent (inyectada por JS en functions.php)
 * solo para que Woodmart ponga position:absolute en .whb-main-header y
 * padding-top:0 en body → el hero toca el borde superior.
 * El bg del row se mantiene bone/.85 (igual que Astro landing) para que la
 * barra sea SIEMPRE legible — no cambiamos a full-transparent-on-hero. */
body.home.vc-theme .whb-sticky-prepared {
  padding-top: 0 !important;
}

/* Sticky (clone que aparece al scrollear) más opaco para legibilidad */
.vc-theme .whb-sticked .whb-row,
.vc-theme .whb-clone.whb-sticked .whb-row,
.vc-theme .whb-clone.whb-sticked .whb-main-header {
  background-color: rgba(248, 245, 238, 0.92) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
          backdrop-filter: blur(14px) saturate(1.2);
}


/* Fallback sin backdrop-filter: bg más opaco para no perder legibilidad */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vc-theme .whb-main-header,
  .vc-theme .whb-row,
  .vc-theme .whb-general-header,
  .vc-theme .whb-header-bottom,
  .vc-theme .whb-top-bar,
  .vc-theme .whb-clone .whb-row {
    background-color: rgba(248, 245, 238, 0.96) !important;
  }
}

/* --- 8.2 Wordmark "Veter·calm" ---
 * Render: dos <picture> stacked dentro del mismo <a>. Cross-fade hover vía
 * opacity (compositor-only, sin layout/paint) — cheap en mobile también.
 *
 * Sizing: la altura la dicta Woodmart (max-height heredado del row del HB).
 * Fijamos la altura del wordmark con clamp() y dejamos el width: auto para
 * preservar el aspect 840:115 sin romper overflow en mobile. */
.vc-theme .site-logo .wd-logo.vc-logo {
  position: relative;
  display: inline-block !important;
  text-decoration: none !important;
  line-height: 0;
  height: clamp(28px, 3.6vw, 44px);
  width: auto !important;
  max-width: 100%;
}
.vc-theme .vc-logo .vc-logo__img {
  display: block;
  height: 100%;
  width: auto;
}
.vc-theme .vc-logo .vc-logo__img img {
  display: block;
  height: 100%;
  width: auto;
  -webkit-user-select: none;
  user-select: none;
}
.vc-theme .vc-logo .vc-logo__img--hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity var(--vc-duration-base) var(--vc-ease-out-expo);
  pointer-events: none;
}

/* Cross-fade sólo en pointer fino (desktop) — en touch ahorramos el repaint */
@media (hover: hover) and (pointer: fine) {
  .vc-theme .vc-logo:hover .vc-logo__img--default,
  .vc-theme .vc-logo:focus-visible .vc-logo__img--default {
    opacity: 0;
  }
  .vc-theme .vc-logo:hover .vc-logo__img--hover,
  .vc-theme .vc-logo:focus-visible .vc-logo__img--hover {
    opacity: 1;
  }
  .vc-theme .vc-logo .vc-logo__img--default {
    transition: opacity var(--vc-duration-base) var(--vc-ease-out-expo);
  }
}

/* Mobile: altura más ajustada para convivir con hamburger + tools */
@media (max-width: 767px) {
  .vc-theme .site-logo .wd-logo.vc-logo {
    height: 26px;
  }
}

/* SR-only (por si Woodmart no lo define) */
.vc-theme .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* --- 8.3 Menú principal: tipografía editorial + hover underline-expand --- */
.vc-theme .whb-main-header .wd-nav > li > a,
.vc-theme .whb-main-header .wd-header-main-nav .wd-nav > li > a,
.vc-theme .whb-main-header .main-nav > ul > li > a {
  font-family: var(--vc-font-sans) !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: var(--vc-forest);
  padding-inline: 0.75rem;
  position: relative;
  transition: color var(--vc-duration-base) var(--vc-ease-out-expo);
}

/* Subrayado hover — sólo donde hay hover real (desktop/pointer fino) */
@media (hover: hover) and (pointer: fine) {
  .vc-theme .whb-main-header .main-nav > ul > li > a::after,
  .vc-theme .whb-main-header .wd-nav > li > a::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.25rem;
    height: 1px;
    background: var(--vc-amber);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 400ms var(--vc-ease-out-expo);
    pointer-events: none;
  }

  .vc-theme .whb-main-header .main-nav > ul > li > a:hover,
  .vc-theme .whb-main-header .wd-nav > li > a:hover {
    color: var(--vc-amber);
  }

  .vc-theme .whb-main-header .main-nav > ul > li > a:hover::after,
  .vc-theme .whb-main-header .wd-nav > li > a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

/* Estado activo (current page) también con underline completo */
.vc-theme .whb-main-header .main-nav > ul > li.current-menu-item > a,
.vc-theme .whb-main-header .main-nav > ul > li.current-menu-ancestor > a,
.vc-theme .whb-main-header .wd-nav > li.current-menu-item > a {
  color: var(--vc-amber);
}

/* En mobile el nav vive dentro del drawer (.wd-nav-mobile) — mismas reglas tipo */
.vc-theme .wd-nav-mobile > li > a,
.vc-theme .wd-nav-mobile-sub > li > a {
  font-family: var(--vc-font-sans);
  font-weight: 500;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--vc-forest);
  min-height: 48px;                 /* tap target holgado en mobile */
  display: flex;
  align-items: center;
}

/* --- 8.4 Tools (cart, wishlist, account) --- */
.vc-theme .whb-main-header .wd-header-cart > a,
.vc-theme .whb-main-header .wd-header-wishlist > a,
.vc-theme .whb-main-header .wd-header-my-account > a,
.vc-theme .whb-main-header .wd-tools-icon {
  color: var(--vc-forest);
  min-width: 44px;
  min-height: 44px;
  transition: color var(--vc-duration-fast) var(--vc-ease-out-expo);
}
@media (hover: hover) {
  .vc-theme .whb-main-header .wd-header-cart > a:hover,
  .vc-theme .whb-main-header .wd-header-wishlist > a:hover,
  .vc-theme .whb-main-header .wd-header-my-account > a:hover {
    color: var(--vc-amber);
  }
}

/* --- 8.5 Footer — verde bosque profundo
 * ---------------------------------------------------------------------------
 * El logo Vetercalm (01-*.png) y los iconos de contacto ya vienen en blanco,
 * por lo que desaparecían sobre bone-warm. Pasamos a forest-deep para darles
 * contraste. Textos en bone, links en kraft-light, hover amber-light.
 *
 * El composite Webpay/Transbank mezcla tipografías oscuras con rectángulos
 * blancos (Visa/MasterCard/Magna/Diners). En cualquier fondo uniforme algún
 * elemento pierde contraste, así que lo envolvemos en un card blanco con
 * padding — práctica estándar para badges de pago.
 * ------------------------------------------------------------------------- */
.vc-theme .footer-container,
.vc-theme .main-footer {
  background: var(--vc-footer-bg, var(--vc-forest));
  color: var(--vc-bone);
}

.vc-theme .footer-container a,
.vc-theme .main-footer a {
  color: var(--vc-kraft-light);
  text-decoration: none;
  transition: color var(--vc-duration-fast) var(--vc-ease-out-expo);
}

@media (hover: hover) {
  .vc-theme .footer-container a:hover,
  .vc-theme .main-footer a:hover {
    color: var(--vc-amber-light);
  }
}

/* Títulos de infobox ("Nuestro Email:", "Nuestro número:", "Dirección:")
   Woodmart los pinta con var --wd-heading-color; forzamos bone dentro del footer. */
.vc-theme .main-footer .info-box-title,
.vc-theme .main-footer .wd-info-box .info-box-title,
.vc-theme .main-footer h1,
.vc-theme .main-footer h2,
.vc-theme .main-footer h3,
.vc-theme .main-footer h4,
.vc-theme .main-footer h5,
.vc-theme .main-footer h6 {
  color: var(--vc-bone);
}

.vc-theme .main-footer .wd-info-box .info-box-inner,
.vc-theme .main-footer .wd-info-box p {
  color: rgba(248, 245, 238, 0.88); /* bone @ 88% — sube legibilidad al eliminar labels */
  margin: 0;
}

/* Ocultamos los títulos "Nuestro Email:", "Nuestro número:", "Dirección:" —
   el icono ya transmite qué es cada campo, texto redundante. */
.vc-theme .main-footer .wd-info-box .info-box-title {
  display: none;
}

/* Alineación icono-dato limpia: centrado vertical y gap consistente */
.vc-theme .main-footer .wd-info-box {
  align-items: center;
  padding-block: 6px;
}
.vc-theme .main-footer .wd-info-box .box-icon-wrapper {
  margin-top: 0;
}
.vc-theme .main-footer .wd-info-box .info-box-content {
  margin-top: 0;
}

/* Separador (divider de Elementor) — pierde contraste en forest, lo re-tinto */
.vc-theme .main-footer .elementor-divider-separator {
  border-top-color: rgba(232, 213, 168, 0.18) !important; /* kraft @ 18% */
}

/* Iconos sociales (Instagram).
   Reforzamos tres cosas que el CSS base de Elementor a veces no aplica cuando
   LiteSpeed/perf plugins defieren frontend.css:
     1) esconder el span.elementor-screen-only (texto SR-only)
     2) dar dimensión y color al <a> y al <svg>
     3) hover con amber-light */
.vc-theme .main-footer .elementor-screen-only {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
}

.vc-theme .main-footer .elementor-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(248, 245, 238, 0.08);
  color: var(--vc-bone);
  transition: background var(--vc-duration-fast) var(--vc-ease-out-expo),
              color var(--vc-duration-fast) var(--vc-ease-out-expo);
}

.vc-theme .main-footer .elementor-social-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

@media (hover: hover) {
  .vc-theme .main-footer .elementor-social-icon:hover {
    background: var(--vc-amber);
    color: var(--vc-footer-bg, var(--vc-forest-deep));
  }
}

/* Instagram: se estiliza como una 4ª fila de wd-info-box (ícono + texto) para
   mantener coherencia con email/teléfono/dirección. El link "instagram.com/
   vetercalm" se mantiene blanco en TODOS los estados (incluido :visited) para
   no romper la paleta del footer.

   !important en tamaños/margins/align-items porque Elementor y LiteSpeed
   pueden inyectar reglas concatenadas post-child (frontend.css deferido +
   combined CSS). Sin !important en prod el anchor a veces se renderizaba
   como la pill vieja de 38px. Mismo tamaño 20×20 que los íconos de infobox. */
.vc-theme .main-footer .elementor-element-0eb9614,
.vc-theme .main-footer .elementor-element-0eb9614 > .elementor-widget-container,
.vc-theme .main-footer .elementor-element-0eb9614 .elementor-social-icons-wrapper,
.vc-theme .main-footer .elementor-element-0eb9614 .elementor-grid {
  text-align: left !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-inline: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-inline: 0 !important;
  --grid-column-gap: 0 !important;
  --e-social-icons-grid-column-gap: 0 !important;
}
.vc-theme .main-footer .elementor-element-0eb9614 .elementor-social-icons-wrapper {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
}
.vc-theme .main-footer .elementor-element-0eb9614 .elementor-social-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 6px 0 !important;
  padding-inline: 0 !important;
  margin: 0 !important;
  margin-inline: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-family: var(--vc-font-sans, inherit);
  font-size: 0.95rem;
  line-height: 1.4;
  text-indent: 0 !important;
}
.vc-theme .main-footer .elementor-element-0eb9614 .elementor-social-icon svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  fill: currentColor !important;
}
.vc-theme .main-footer .elementor-element-0eb9614 .elementor-social-icon::after {
  content: 'instagram.com/vetercalm';
}
.vc-theme .main-footer .elementor-element-0eb9614 .elementor-social-icon,
.vc-theme .main-footer .elementor-element-0eb9614 .elementor-social-icon:link,
.vc-theme .main-footer .elementor-element-0eb9614 .elementor-social-icon:visited,
.vc-theme .main-footer .elementor-element-0eb9614 .elementor-social-icon:hover,
.vc-theme .main-footer .elementor-element-0eb9614 .elementor-social-icon:focus,
.vc-theme .main-footer .elementor-element-0eb9614 .elementor-social-icon:active {
  color: var(--vc-bone) !important;
  background: transparent !important;
}

/* ---------- Layout de 3 columnas (desktop ≥ 1024px)
 * ---------------------------------------------------------------------------
 * El cms_block del footer viene con 3 columnas flex 25/50/25. Para poder
 * colocar el Instagram DEBAJO del address (en la col central) y dejar solo
 * el composite Webpay/Transbank en la columna derecha, volcamos el contenedor
 * a CSS grid y aplicamos display:contents a la col-25 derecha para que sus
 * hijos (social icons + imagen Transbank) se ubiquen directamente en la grid
 * exterior. No hay edición de DOM — todo por CSS con nth-child/element-id
 * estables (be6b0d5, 442d811f, 7223391c, 0eb9614, 3efd160).
 * ------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .vc-theme .main-footer .elementor-element-5ca81a9d > .elementor-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0 56px;
    align-items: start;
    padding-block: 40px;
  }

  .vc-theme .main-footer .elementor-element-5ca81a9d
    > .elementor-container > .elementor-element-be6b0d5 {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    width: 100%;
    max-width: 100%;
  }

  .vc-theme .main-footer .elementor-element-5ca81a9d
    > .elementor-container > .elementor-element-442d811f {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: 100%;
  }

  /* En prod, `.elementor-widget-wrap` dentro de la col 442d811f recibe un
     `margin-inline: auto` (centrado automático de Elementor Pro / custom-
     frontend.min.css) que empuja los infoboxes ~84px a la derecha respecto
     al edge izquierdo de la grid-column 2. El IG widget — aplanado al grid
     por `display: contents` de la col 7223391c — queda en el edge izquierdo
     real de la col, generando el misalign visible. Fix: forzar el wrap a
     flex-start (margin-left: 0) en desktop para que infoboxes e IG queden
     todos anclados al mismo edge izquierdo de la col 2. */
  .vc-theme .main-footer .elementor-element-442d811f > .elementor-widget-wrap {
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-inline: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .vc-theme .main-footer .elementor-element-5ca81a9d
    > .elementor-container > .elementor-element-7223391c,
  .vc-theme .main-footer .elementor-element-5ca81a9d
    > .elementor-container > .elementor-element-7223391c
    > .elementor-widget-wrap {
    display: contents;
  }

  .vc-theme .main-footer .elementor-element-0eb9614 {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    /* 10px adicional para que el gap dirección→IG matchee el gap
       infobox→infobox (que en prod es 20px). El IG vive en otra col
       aplanada por display:contents y no hereda el ritmo vertical de
       los .wd-info-box. Medido en prod: ver project_vetercalm_pendientes.md */
    margin-top: 10px !important;
  }
  .vc-theme .main-footer .elementor-element-0eb9614 .elementor-social-icons-wrapper {
    justify-content: flex-start;
  }

  /* Columna central: textos alineados a la izquierda para seguir la vertical
     del logo Vetercalm a la izquierda y del composite Webpay a la derecha. */
  .vc-theme .main-footer .elementor-element-442d811f .elementor-widget-wd_infobox,
  .vc-theme .main-footer .elementor-element-442d811f .info-box-wrapper {
    text-align: left;
  }
  .vc-theme .main-footer .elementor-element-442d811f .wd-info-box {
    display: flex;
    text-align: left;
  }

  /* Columna 3: el composite Webpay se ancla al borde derecho de la columna
     para que el gap entre col 2 y el composite sea simétrico al gap entre
     el logo Vetercalm y col 2 (logo pegado al borde izquierdo de col 1). */
  .vc-theme .main-footer .elementor-element-3efd160 {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: start;
    justify-self: end;
    width: 100%;
  }
  .vc-theme .main-footer .elementor-element-3efd160 .elementor-widget-image {
    display: flex;
    justify-content: flex-end;
  }

  /* Tagline bajo el logo Vetercalm ("Bienestar que se nota, calma que se siente")
     Logo y tagline anclados al borde izquierdo de col 1 para que queden alineados
     con el copyright de la fila inferior. */
  .vc-theme .main-footer .elementor-element-be6b0d5 .elementor-widget-image {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .vc-theme .main-footer .elementor-element-be6b0d5 .elementor-widget-image::after {
    content: 'Bienestar que se nota, calma que se siente.';
    display: block;
    font-family: var(--vc-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.45;
    color: rgba(248, 245, 238, 0.82);
    text-align: left;
    margin: 1.25rem 0 0;
    max-width: 280px;
  }
}


/* Contenedor global de imágenes del footer — evita overflow cuando se cambia
   el fondo (el logo Vetercalm blanco antes quedaba "oculto" por colisión con
   bone-warm y nadie notó que el <img> no tenía max-width). */
.vc-theme .main-footer img {
  max-width: 100%;
  height: auto;
}

/* Mobile: neutralizar los margins negativos de .wd-negative-gap de Woodmart
   para que todo el contenido del footer (logo, infoboxes, IG, webpay,
   copyright) quede alineado al padding de 15px del .main-footer — usando la
   tarjeta webpay como vertical de referencia. Desktop mantiene el grid custom. */
@media (max-width: 1023.98px) {
  .vc-theme .main-footer .elementor-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Margen entre las "secciones" del footer mobile:
     logo → contacto (24px generoso),
     IG → webpay (24px aire antes de la card — referencia),
     webpay → línea del divider: debe coincidir con IG→webpay (24px).
     Entre email/teléfono/dirección y entre dirección/IG no se toca, para
     mantener el ritmo interno de las infoboxes que ya es consistente. */
  .vc-theme .main-footer .elementor-element-be6b0d5 {
    margin-bottom: 24px !important;
  }
  .vc-theme .main-footer .elementor-element-0eb9614 {
    margin-bottom: 24px !important;
  }
  .vc-theme .main-footer .elementor-element-3efd160 {
    margin-bottom: 0 !important;
  }

  /* Divider horizontal del footer (Elementor widget divider 77ae38c8):
     margin-top: 24px para igualar el gap IG→webpay de arriba (simétrico).
     padding-block: 0 arriba para que la línea quede pegada al top del widget;
     margin-bottom: 12px para dejar un respiro entre línea y copyright. */
  .vc-theme .main-footer .elementor-element-77ae38c8,
  .vc-theme .main-footer .elementor-widget-divider {
    margin-top: 24px !important;
    margin-bottom: 12px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-block: 0 !important;
  }
}

/* Logo del footer (sustituido por filtro PHP, ver functions.php sección 5-quater).
   Wordmark blanco con gota amber, idéntico al header default.
   Sizing height-based, en paridad con el header: clamp(32px, 3.6vw, 44px)
   en desktop y 32px en mobile.

   !important + aspect-ratio: la regla global `.main-footer img { height: auto }`
   combinada con el CSS combinado de LiteSpeed puede pisar las medidas y
   estirar el logo (width:100% + height:auto rompe el ratio al quedar más
   ancho que 7.33× la altura). aspect-ratio fuerza la proporción nativa del
   PNG (880×120) y object-fit: contain previene cualquier stretching residual. */
.vc-theme .main-footer .vc-footer-logo {
  display: block !important;
  height: clamp(32px, 3.6vw, 44px) !important;
  width: auto !important;
  max-width: 100% !important;
  aspect-ratio: 880 / 120;
  margin-inline: 0 !important;
  line-height: 0 !important;
}
.vc-theme .main-footer .vc-footer-logo__img {
  display: block !important;
  height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
  aspect-ratio: 880 / 120;
  object-fit: contain !important;
}
@media (max-width: 767px) {
  .vc-theme .main-footer .vc-footer-logo {
    height: 32px !important;
  }
}

/* Card cream para el composite Webpay/Transbank/Visa/Magna/Red Compra.
   Targeteamos por src porque el slug del archivo es estable y no depende del
   elementor-element-id (que puede cambiar si el bloque se duplica). */
.vc-theme .main-footer img[src*="PHOTO-2025-12-08-20-47-48-removebg-preview"] {
  background: #ffffff;
  padding: 14px 20px;
  border-radius: 12px;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.35);
  max-width: min(100%, 360px);
  height: auto;
}

/* Copyright: el <p> contiene un <i class="fa fa-copyright"> con el texto.
   Forzamos color cream con suavidad. El corazón/emoji dev keep original. */
.vc-theme .main-footer .wd-text-block p,
.vc-theme .main-footer .wd-text-block .fa-copyright {
  color: rgba(248, 245, 238, 0.72);
}
.vc-theme .main-footer .wd-text-block strong {
  color: var(--vc-bone);
  font-weight: 500;
}


/* -----------------------------------------------------------------------------
 * 9. FOCUS RINGS ACCESIBLES
 * -------------------------------------------------------------------------- */

.vc-theme *:focus-visible {
  outline: 2px solid var(--vc-amber);
  outline-offset: 2px;
  border-radius: var(--vc-radius-sm);
}

.vc-theme .button:focus-visible,
.vc-theme button:focus-visible,
.vc-theme input:focus-visible,
.vc-theme select:focus-visible,
.vc-theme textarea:focus-visible {
  outline-offset: 3px;
}


/* -----------------------------------------------------------------------------
 * 9.5 SINGLE PRODUCT — qty selector, add-to-cart, reorden summary Perros
 * -----------------------------------------------------------------------------
 * Qty: ensanchar input para que quepan 3 dígitos (stock puede ir a 888+).
 *      Usamos tabular-nums para que los dígitos ocupen ancho igual y no baile.
 * Add-to-cart: compactar un pelo sin perder ergonomía (sigue siendo pill).
 * Wrapper: gap entre qty y botón para aire visual.
 *
 * Reorden summary (postid-993): la página usa widgets Elementor de Woodmart,
 * hijos flex del container e-flex `b55bb08`. Setteamos order negativo en
 * title y short-desc para que queden arriba del price-container y del add-cart.
 * Resto de hijos queda en order:0 (DOM natural): price → add-cart → compare/
 * wishlist → divider → meta → social.
 *
 * Alcance qty/botón: todo .single-product (sirve también a gatos).
 * Alcance reorden: solo body.postid-993 (producto Perros).
 * -------------------------------------------------------------------------- */
/* OJO con la sintaxis: `.vc-theme.single-product` (sin espacio) porque
   ambas clases viven en el MISMO <body>. Con espacio (descendant) el
   selector nunca matchea — eso dejó las 3 reglas inertes en prod desde v24
   hasta v27, y el qty quedó en 30px de Woodmart (solo cabía 1 dígito). */
.vc-theme.single-product .quantity .qty {
  min-width: 3.5rem;
  width: auto;
  text-align: center;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  font-variant-numeric: tabular-nums;
}

.vc-theme.single-product .cart .single_add_to_cart_button {
  padding: 0.7rem 1.4rem;
  font-size: 0.85rem;
  min-height: auto;
}

.vc-theme.single-product form.cart {
  gap: 0.6rem;
}

/* Reorden widgets Elementor en productos Perros (993) y Gatos (1065).
 * Sin esto, el DOM viene: title → price-container → short-desc → add-cart …
 * Con esto, queda: (title oculto) → short-desc → price → add-cart …
 *
 * El `.wd-single-title` se oculta porque el hero interno del `.wd-single-short-desc`
 * ya muestra "Aceite VeterCalm® Perros/Gatos" con más jerarquía visual —
 * mantenerlo arriba duplica el texto y empuja el resto hacia abajo.
 *
 * Si en el futuro quieres volver a mostrar el título oficial del producto:
 *   - Comenta la línea `display: none` de abajo, o
 *   - Elimina el selector `.wd-single-title { display: none }` completo.
 * El `order: -2` ya está preparado para que, al reaparecer, quede arriba del hero.
 *
 * Al añadir un producto nuevo con el mismo patrón (hero en short-desc), agregar
 * su `.postid-XXXX` a los dos selectores de abajo. */
.vc-theme.postid-993 .wd-single-title,
.vc-theme.postid-1065 .wd-single-title      { order: -2; display: none; }

.vc-theme.postid-993 .wd-single-short-desc,
.vc-theme.postid-1065 .wd-single-short-desc { order: -1; }

/* Galería del producto — thumbnails cuadrados.
 * Woodmart renderiza los thumbs del single-product como `.wd-carousel-item`
 * dentro de `.wd-gallery-thumb`, con dimensiones por defecto ~122×44px
 * (ratio ~2.8:1 horizontal). Las fotos reales son verticales (1400×1737 o
 * ~4:5), así que object-fit: cover recortaba tanto que solo se veía una
 * franja central del medio.
 *
 * Fix: aspect-ratio 1/1 en cada thumb + object-fit: contain en el img para
 * que la foto se vea COMPLETA dentro de un cuadrado limpio. El contenedor
 * vertical se deja en height: auto para que el slider recomponga sin
 * overlap. `!important` porque el slider Woodmart inyecta `height: Xpx`
 * inline a cada item via JS al inicializar el carousel. */
.vc-theme.single-product .wd-gallery-thumb .wd-carousel-item {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  padding: 4px;
  box-sizing: border-box;
}
.vc-theme.single-product .wd-gallery-thumb .wd-carousel-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
}
/* Contenedor: height auto para que muestre todos los thumbs apilados,
   con un max-height cap (~4 items × 132 = 528) para no alargar demasiado
   la columna cuando hay muchas imágenes. overflow hidden oculta el
   remanente; el slider tiene su propia nav para pasar al resto. */
.vc-theme.single-product .wd-gallery-thumb,
.vc-theme.single-product .wd-gallery-thumb .wd-carousel-inner,
.vc-theme.single-product .wd-gallery-thumb .wd-carousel-wrap,
.vc-theme.single-product .wd-gallery-thumb .wd-carousel {
  height: auto !important;
  max-height: 540px !important;
}
.vc-theme.single-product .wd-gallery-thumb {
  overflow: hidden;
}


/* -----------------------------------------------------------------------------
 * 10. REDUCED MOTION
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .vc-theme *,
  .vc-theme *::before,
  .vc-theme *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .vc-theme .vc-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ============================================================================
   14. PÁGINA DE CONTACTO — /contacto/
   ----------------------------------------------------------------------------
   La página se arma con Elementor + Woodmart (wd_list para Email/Teléfono/
   Dirección y un social-icons para Instagram). El filtro PHP en
   inc/contact-page.php ya elimina Facebook y la fila "Horario de atención";
   acá sólo se estiliza lo que queda.

   Objetivo: iconos verdes (forest) delante de cada dato para que contrasten
   con el fondo blanco/bone del layout y quede consistente con el footer.
   ========================================================================== */

/* Ocultamos el widget completo de social-icons arriba del listado — en su
   lugar inyectamos el Instagram como 4ª fila del wd_list (ver contact-page.php).
   El widget se renderiza como .elementor-widget-social-icons dentro de una
   columna Elementor; lo tachamos entero. */
.vc-page-contacto .elementor-widget-social-icons {
  display: none !important;
}

/* Defensa en profundidad: si el filter PHP no corrió (caché stale de LiteSpeed,
   UCSS sirviendo HTML pre-filtrado, etc.) ocultamos por class del _id del
   repeater Elementor. Los _id son estables siempre que no se edite el widget. */
.vc-page-contacto .elementor-repeater-item-ea01fa9,  /* Facebook <a> */
.vc-page-contacto .elementor-grid-item:has(.elementor-repeater-item-ea01fa9),
.vc-page-contacto .elementor-grid-item:has(.elementor-social-icon-facebook),
.vc-page-contacto .elementor-repeater-item-e83e718    /* Horario <li> */ {
  display: none !important;
}

/* Lista wd_list: cada <li class="elementor-repeater-item-..."> contiene
   <div class="wd-list-content"> con el email/teléfono/dirección. */
.vc-page-contacto .wd-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.vc-page-contacto .wd-list > li {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding-block: 6px;
  color: var(--vc-ink);
}

.vc-page-contacto .wd-list > li::before {
  content: '';
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}

/* Por _id estable del repeater (más específico que nth-child).
   Email = bee7aa3 · Teléfono = 4bad296 · el ítem dirección no se muestra
   en la query porque cada id cambia, así que lo cubrimos por :nth-child(3). */
.vc-page-contacto .wd-list > li.elementor-repeater-item-bee7aa3::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3D2E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='4.5' width='19' height='15' rx='2'/><path d='M3 6.5l9 6 9-6'/></svg>");
}

.vc-page-contacto .wd-list > li.elementor-repeater-item-4bad296::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3D2E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7 12.8 12.8 0 0 0 .7 2.8 2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5 12.8 12.8 0 0 0 2.8.7A2 2 0 0 1 22 16.9z'/></svg>");
}

/* Fallback por posición: 1=email, 2=teléfono, 3=dirección.
   Orden mantiene su significado incluso si falla el match por _id. */
.vc-page-contacto .wd-list > li:nth-child(1)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3D2E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='4.5' width='19' height='15' rx='2'/><path d='M3 6.5l9 6 9-6'/></svg>");
}
.vc-page-contacto .wd-list > li:nth-child(2)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3D2E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7 12.8 12.8 0 0 0 .7 2.8 2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5 12.8 12.8 0 0 0 2.8.7A2 2 0 0 1 22 16.9z'/></svg>");
}
.vc-page-contacto .wd-list > li:nth-child(3)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3D2E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
}

/* 4º ítem — Instagram (inyectado por inc/contact-page.php, class .vc-instagram-row).
   Icono Instagram verde, mismo tamaño/alineación que los anteriores. El fallback
   por :nth-child(4) cubre si el match por class falla. */
.vc-page-contacto .wd-list > li.vc-instagram-row::before,
.vc-page-contacto .wd-list > li:nth-child(4)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3D2E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='2.5' width='19' height='19' rx='5'/><circle cx='12' cy='12' r='4'/><circle cx='17.5' cy='6.5' r='0.8' fill='%231F3D2E'/></svg>");
}

/* El <div class="wd-list-content"> heredaría flex porque el padre <li> es flex —
   aseguramos que no se colapse el texto. */
.vc-page-contacto .wd-list > li .wd-list-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Iconos sociales en la página de contacto (queda solo Instagram después del
   filter PHP). Contraste forest sobre bone/white, hover invertido. */
.vc-page-contacto .elementor-social-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid var(--vc-forest);
  color: var(--vc-forest);
  transition: color var(--vc-duration-fast) var(--vc-ease-out-expo),
              border-color var(--vc-duration-fast) var(--vc-ease-out-expo),
              background var(--vc-duration-fast) var(--vc-ease-out-expo);
}

.vc-page-contacto .elementor-social-icon svg,
.vc-page-contacto .elementor-social-icon i {
  width: 18px;
  height: 18px;
  font-size: 18px;
  color: inherit;
  fill: currentColor;
}

/* Fallback SVG: si FontAwesome no carga o la combinación CSS falla, pintamos
   el glyph de Instagram con un background inline para que el botón nunca
   salga vacío. El <i class="fab fa-instagram"></i> (si existe) se posiciona
   encima; si está vacío, se ve el fallback. */
.vc-page-contacto .elementor-social-icon-instagram::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3D2E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='2.5' width='19' height='19' rx='5'/><circle cx='12' cy='12' r='4'/><circle cx='17.5' cy='6.5' r='0.8' fill='%231F3D2E'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  pointer-events: none;
}
.vc-page-contacto .elementor-social-icon-instagram {
  position: relative;
}
/* Si FA carga, oculta el fallback (FA `<i>::before` ya pintará el icono). */
.vc-page-contacto .elementor-social-icon-instagram .fa-instagram + *,
.vc-page-contacto .elementor-social-icon-instagram .fab {
  z-index: 2;
  position: relative;
}

@media (hover: hover) {
  .vc-page-contacto .elementor-social-icon:hover {
    background: var(--vc-forest);
    color: var(--vc-bone);
    border-color: var(--vc-forest);
  }
  .vc-page-contacto .elementor-social-icon-instagram:hover::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8F5EE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='2.5' width='19' height='19' rx='5'/><circle cx='12' cy='12' r='4'/><circle cx='17.5' cy='6.5' r='0.8' fill='%23F8F5EE'/></svg>");
  }
}

/* Oculta el texto "Facebook" y "Instagram" de screen-only + cualquier label
   de texto plano residual ("Facebook   Instagram") que haya quedado del
   widget si el filter PHP no lo capturó (defensa en profundidad). */
.vc-page-contacto .elementor-screen-only {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
}