/*
Theme Name: Astra La Vaca Encantada
Theme URI: https://scalerics.com
Description: Tema hijo de Astra para la tienda de La Vaca Encantada.
Author: Scalerics
Template: astra
Version: 1.2.0
Text Domain: astra-lavaca
*/

/* ==========================================================================
   Ajustes sobre la plantilla Brandstore.

   Solo cosmetica: nada de layout, grillas ni breakpoints. El responsive de la
   plantilla queda intacto. Los colores y tipografias van por la paleta global
   de Astra (ver scripts/aplicar-marca.php), no aca.
   ========================================================================== */

/* El logo del cliente es un JPG circular sobre fondo blanco: recortarlo como
   en la demo, si no se ve un cuadrado blanco sobre el header oscuro. */
/* Astra fuerza width:140px en el logo del header transparente, y como el
   archivo es cuadrado (629x629) queda un ovalo aplastado. Se fija cuadrado y
   se usa object-fit para no deformarlo. */
.custom-logo-link img,
.ast-theme-transparent-header #masthead .site-logo-img .transparent-custom-logo img,
.ast-header-break-point .custom-logo-link img {
  width: 62px !important;
  max-width: 62px !important;
  height: 62px !important;
  object-fit: contain;
  border-radius: 50%;
}

/* === PASADA DE DISENO ===
   Todo lo de aca es cosmetico: color, radio, sombra, tipografia. No se toca
   ninguna propiedad de layout (width, display, flex, grid, breakpoints), asi
   que el responsive de la plantilla queda como vino.

   Referencia: public/css/style.css de la demo.
   --dark #141613  --dark-2 #1E2119  --gris-linea #24261F
   --crema #F5F1E8  --rojo #C1272D  --rojo-osc #8E1D22
   radio 12px, botones pill.
   ========================================================================== */

:root {
  --lv-rojo: #C1272D;
  --lv-rojo-osc: #8E1D22;
  --lv-dark: #141613;
  --lv-dark-2: #1E2119;
  --lv-linea: #24261F;
  --lv-crema: #F5F1E8;
  --lv-radio: 12px;
  --lv-curva: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---- Botones -----------------------------------------------------------
   Spectra genera por bloque:
     .wp-block-uagb-buttons .uagb-block-XXXX.wp-block-uagb-buttons-child .uagb-buttons-repeater
   Son tres clases, asi que hay que igualar o superar esa especificidad o el
   boton se queda del color de la plantilla (casi negro, ilegible).
   En la demo el primario es rojo y tipo pastilla. */

.wp-block-uagb-buttons .wp-block-uagb-buttons-child .uagb-buttons-repeater.wp-block-button__link,
.wp-block-button .wp-block-button__link,
.ast-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button.alt,
.woocommerce input.button {
  background: var(--lv-rojo);
  background-color: var(--lv-rojo);
  border-color: var(--lv-rojo);
  color: #fff;
  border-radius: 999px;
  letter-spacing: .04em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset;
  transition: background-color .25s var(--lv-curva), transform .25s var(--lv-curva);
}

.wp-block-uagb-buttons .wp-block-uagb-buttons-child .uagb-buttons-repeater.wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:hover,
.ast-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover,
.woocommerce input.button:hover {
  background: var(--lv-rojo-osc);
  background-color: var(--lv-rojo-osc);
  border-color: var(--lv-rojo-osc);
  color: #fff;
  transform: translateY(-1px);
}

.wp-block-uagb-buttons .wp-block-uagb-buttons-child .uagb-buttons-repeater.wp-block-button__link:active,
.woocommerce a.button:active,
.woocommerce button.button:active { transform: translateY(0) scale(.985); }

/* Los CTA de los info-box (los tiles de categoria) usan otra clase:
   uagb-infobox-cta-link. Sin esto quedan del gris de la plantilla. */
/* La plantilla dejo estos CTA como 'button-type-text': Spectra les aplica
   background: unset y por debajo se cuela el estilo de boton de Astra, con lo
   que quedan como un boton gris roto. Probe cinco variantes de especificidad y
   la de Spectra gana igual, asi que aca va !important a proposito. Es la unica
   excepcion del archivo. */
body .uagb-ifb-button-wrapper .uagb-infobox-cta-link.wp-block-button__link {
  background: var(--lv-rojo) !important;
  background-color: var(--lv-rojo) !important;
  border-color: var(--lv-rojo) !important;
  color: #fff !important;
  border-radius: 999px !important;
  letter-spacing: .04em;
  transition: background-color .25s var(--lv-curva), transform .25s var(--lv-curva);
}
body .uagb-ifb-button-wrapper .uagb-infobox-cta-link.wp-block-button__link:hover {
  background: var(--lv-rojo-osc) !important;
  background-color: var(--lv-rojo-osc) !important;
  border-color: var(--lv-rojo-osc) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* El segundo boton del hero es secundario: contorno, no relleno. */
.wp-block-uagb-buttons .wp-block-uagb-buttons-child:nth-child(2) .uagb-buttons-repeater.wp-block-button__link {
  background: transparent;
  background-color: transparent;
  border: 2px solid rgba(245, 241, 232, .45);
  color: var(--lv-crema);
  box-shadow: none;
}
.wp-block-uagb-buttons .wp-block-uagb-buttons-child:nth-child(2) .uagb-buttons-repeater.wp-block-button__link:hover {
  background: var(--lv-crema);
  background-color: var(--lv-crema);
  border-color: var(--lv-crema);
  color: var(--lv-dark);
}

/* ---- Esquinas ----------------------------------------------------------
   La plantilla es toda rectangular. La demo redondea a 12px. */
.wp-block-uagb-container:not(.uagb-is-root-container),
.wp-block-uagb-info-box,
.woocommerce ul.products li.product img,
.woocommerce div.product div.images img,
.woocommerce .woocommerce-product-gallery__image,
.widget_media_image img,
.wp-block-image img {
  border-radius: var(--lv-radio);
}

/* Los contenedores con foto de fondo necesitan recortar la imagen al radio. */
.wp-block-uagb-container:not(.uagb-is-root-container) { overflow: hidden; }

/* ---- Tarjetas de producto ---------------------------------------------
   Las fotos son recortes sobre blanco: sueltas sobre el fondo negro quedan
   como parches. Se las apoya sobre una tarjeta oscura. */
.woocommerce ul.products li.product {
  background: var(--lv-dark-2);
  border: 1px solid var(--lv-linea);
  border-radius: var(--lv-radio);
  padding: 10px 10px 18px;
  transition: transform .3s var(--lv-curva), border-color .3s var(--lv-curva);
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  border-color: rgba(193, 39, 45, .55);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title { margin-top: 14px; }
.woocommerce ul.products li.product .price { color: var(--lv-crema); font-weight: 700; }

/* ---- Tipografia --------------------------------------------------------
   Poppins a 800 con el tracking por defecto queda flojo en tamanos grandes. */
h1, h2, .uagb-heading-text {
  letter-spacing: -.02em;
  line-height: 1.08;
}
h3, h4 { letter-spacing: -.01em; }

/* Los subtitulos de seccion respiran mal pegados al titulo. */
.uagb-heading-text + .uagb-desc-text { margin-top: 14px; opacity: .82; }

/* ---- Bordes duros ------------------------------------------------------
   Gris claro sobre fondo oscuro se ve como una raya. */
.woocommerce .woocommerce-tabs ul.tabs::before,
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
hr, .ast-container hr { border-color: var(--lv-linea); }

/* ---- Degradado sobre las fotos de fondo -------------------------------
   Las fotos son recortes sobre blanco (ya se las oscurecio a la mitad en
   scripts/preparar-fondos.py). Encima va un degradado hacia el fondo del
   sitio: arriba se ve la carne, abajo el texto apoya en oscuro y se lee.

   Se apilan como capas de background-image en vez de usar un pseudo-elemento
   para no tocar el posicionamiento de los contenedores de Spectra.

   Las clases uagb-block-* las genera la plantilla. Si se rehacen los bloques
   de la home, hay que volver a sacarlas. */

.wp-block-uagb-container.uagb-block-506cded2 {
  background-image:
    linear-gradient(to top, rgba(20,22,19,.94) 0%, rgba(20,22,19,.55) 30%, rgba(20,22,19,.05) 72%, rgba(20,22,19,0) 100%),
    url("/wp-content/uploads/2020/09/women-fashion-free-img.jpg");
}
.wp-block-uagb-container.uagb-block-c1eff5b6 {
  background-image:
    linear-gradient(to top, rgba(20,22,19,.94) 0%, rgba(20,22,19,.55) 30%, rgba(20,22,19,.05) 72%, rgba(20,22,19,0) 100%),
    url("/wp-content/uploads/2020/09/men-fashion-free-img.jpg");
}
.wp-block-uagb-container.uagb-block-640cb845 {
  background-image:
    linear-gradient(to top, rgba(20,22,19,.94) 0%, rgba(20,22,19,.55) 30%, rgba(20,22,19,.05) 72%, rgba(20,22,19,0) 100%),
    url("/wp-content/uploads/2020/09/footwear-free-img.jpg");
}
/* Tile de Pollo, agregado en produccion el 15-9: la foto es corte_pollo.jpg con
   el mismo tratamiento de scripts/preparar-fondos.py, subida como medio aparte. */
.wp-block-uagb-container.uagb-block-7b3e91c4 {
  background-image:
    linear-gradient(to top, rgba(20,22,19,.94) 0%, rgba(20,22,19,.55) 30%, rgba(20,22,19,.05) 72%, rgba(20,22,19,0) 100%),
    url("/wp-content/uploads/2026/09/tile-pollo-fondo.jpg");
}

/* El banner de envio lleva el texto a la izquierda: el degradado va de ese lado.
   Rutas relativas a la raiz, no absolutas: con http://lavacaencantada.local la
   migracion a Hostinger dejo los cuatro fondos sin foto, porque All-in-One WP
   Migration reemplaza el dominio en la base pero no en los archivos del tema. */
.wp-block-uagb-container.uagb-block-f6853360 {
  background-image:
    linear-gradient(to right, rgba(20,22,19,.92) 0%, rgba(20,22,19,.62) 45%, rgba(20,22,19,.10) 100%),
    url("/wp-content/uploads/2020/09/banner-03.jpg");
}

/* Los tiles ganan profundidad al pasar el mouse. */
.wp-block-uagb-container.uagb-block-506cded2,
.wp-block-uagb-container.uagb-block-c1eff5b6,
.wp-block-uagb-container.uagb-block-640cb845 {
  border: 1px solid var(--lv-linea);
  transition: transform .4s var(--lv-curva), border-color .4s var(--lv-curva);
}
.wp-block-uagb-container.uagb-block-506cded2:hover,
.wp-block-uagb-container.uagb-block-c1eff5b6:hover,
.wp-block-uagb-container.uagb-block-640cb845:hover {
  transform: translateY(-4px);
  border-color: rgba(193, 39, 45, .5);
}

/* === FACHA ===============================================================
   Capa de terminacion. Todo con transform/opacity (no dispara reflow) y el
   blur solo sobre el header, que es sticky. Nada de esto toca el layout.
   ========================================================================== */

/* ---- Entrada al hacer scroll ------------------------------------------
   El escalonado lo pone assets/lavaca.js via transition-delay. */
.lv-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--lv-curva), transform .8s var(--lv-curva);
  will-change: transform, opacity;
}
.lv-reveal.lv-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  .lv-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Header ------------------------------------------------------------
   Arriba de todo se apoya sobre el hero. Al scrollear se vuelve solido con
   blur. El blur va solo aca porque es sticky: sobre contenido que scrollea
   repinta en cada frame. */
.site-header,
#masthead {
  transition: background-color .45s var(--lv-curva), box-shadow .45s var(--lv-curva);
}
.lv-scrolleado #masthead,
.lv-scrolleado .site-header {
  background-color: rgba(20, 22, 19, .86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 rgba(245, 241, 232, .07), 0 18px 40px -30px rgba(0, 0, 0, .9);
}

/* ---- Grano -------------------------------------------------------------
   Un fondo oscuro plano se ve digital y barato. El grano le da cuerpo.
   Capa fija y sin eventos para que no repinte al scrollear. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Titulares ---------------------------------------------------------
   Fraunces aguanta tamanos grandes: el hero pedia mas escala y menos
   interlineado. clamp() escala solo, sin media queries. */
.uagb-heading-text,
h1.entry-title,
h1 {
  line-height: 1.02;
  letter-spacing: -.025em;
}
h2, .uagb-heading-text {
  font-variation-settings: "SOFT" 0, "WONK" 0;
}

/* Numeros de precio alineados en columna. */
.woocommerce .price,
.woocommerce-Price-amount { font-variant-numeric: tabular-nums; }

/* ---- Tarjetas de producto ---------------------------------------------- */
.woocommerce ul.products li.product a img {
  transition: transform .7s var(--lv-curva);
  will-change: transform;
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.045); }

/* La foto tiene que quedar recortada al radio de la tarjeta. */
.woocommerce ul.products li.product a { display: block; overflow: hidden; border-radius: var(--lv-radio); }

.woocommerce ul.products li.product {
  box-shadow: 0 24px 50px -40px rgba(0, 0, 0, .95);
}
.woocommerce ul.products li.product:hover {
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 1);
}

/* ---- Tiles de categoria ------------------------------------------------
   La foto de fondo se acerca despacio al pasar el mouse. */
.wp-block-uagb-container.uagb-block-506cded2,
.wp-block-uagb-container.uagb-block-c1eff5b6,
.wp-block-uagb-container.uagb-block-640cb845 {
  background-size: 130%;
  background-position: center 42%;
  transition: transform .5s var(--lv-curva), border-color .5s var(--lv-curva),
              background-size .9s var(--lv-curva);
}
.wp-block-uagb-container.uagb-block-506cded2:hover,
.wp-block-uagb-container.uagb-block-c1eff5b6:hover,
.wp-block-uagb-container.uagb-block-640cb845:hover {
  background-size: 138%;
}

/* ---- Foco --------------------------------------------------------------
   La plantilla lo deja en el default del navegador, que sobre oscuro no se ve. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--lv-rojo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Detalle del subrayado de seccion ---------------------------------- */
.uagb-heading-separator {
  background: linear-gradient(90deg, transparent, var(--lv-rojo), transparent);
  height: 2px;
  border: 0;
}

/* === PARECIDO A LA DEMO ==================================================
   La plantilla no trae barra de anuncio ni boton flotante; se inyectan desde
   functions.php y se visten aca. El resto son ajustes para acercar el hero y
   el header a la demo original (public/css/style.css del repo del Worker).
   ========================================================================== */

/* ---- Barra de anuncio --------------------------------------------------- */
.lv-barra-anuncio {
  background: var(--lv-rojo);
  color: #fff;
  text-align: center;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .015em;
  line-height: 1.3;
  position: relative;
  z-index: 4;
}
.lv-barra-icono {
  display: inline-flex;
  vertical-align: -2px;
  margin-right: 8px;
}

/* El header transparente se apoyaba arriba de todo; ahora arranca despues
   de la barra. */
.lv-barra-anuncio + #page .site-header,
.lv-barra-anuncio ~ #page #masthead { top: 0; }

/* ---- Boton flotante de WhatsApp ---------------------------------------- */
.lv-wsp {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 20;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .75);
  transition: transform .3s var(--lv-curva), box-shadow .3s var(--lv-curva);
}
.lv-wsp:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 18px 38px -10px rgba(0, 0, 0, .85);
  color: #fff;
}
.lv-wsp:active { transform: scale(.97); }
@media (max-width: 600px) {
  .lv-wsp { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}

/* ---- Hero centrado, como en la demo ------------------------------------
   Ojo: :first-of-type NO sirve para agarrar el hero. Todos los contenedores
   raiz son <div> y hay otros antes, asi que matchea el banner de envio. Hay
   que atarlo a la clase del bloque, igual que los tiles.
   uagb-block-474c825a es el contenedor del hero. */
/* El hero es un info-box, no un advanced-heading: el titular es
   h1.uagb-ifb-title-prefix dentro de .uagb-ifb-title-wrap. */
.wp-block-uagb-container.uagb-block-474c825a .uagb-ifb-content,
.wp-block-uagb-container.uagb-block-474c825a .uagb-ifb-title-wrap,
.wp-block-uagb-container.uagb-block-474c825a .uagb-ifb-title-prefix,
.wp-block-uagb-container.uagb-block-474c825a .uagb-ifb-title,
.wp-block-uagb-container.uagb-block-474c825a .uagb-ifb-desc,
.wp-block-uagb-container.uagb-block-474c825a .uagb-heading-text,
.wp-block-uagb-container.uagb-block-474c825a .uagb-desc-text,
.wp-block-uagb-container.uagb-block-474c825a p {
  text-align: center;
}
.wp-block-uagb-container.uagb-block-474c825a .uagb-ifb-button-wrapper,
.wp-block-uagb-container.uagb-block-474c825a .uagb-ifb-cta {
  justify-content: center;
  display: flex;
}
.wp-block-uagb-container.uagb-block-474c825a .wp-block-uagb-buttons,
.wp-block-uagb-container.uagb-block-474c825a .uagb-buttons__wrap {
  justify-content: center;
}
.wp-block-uagb-container.uagb-block-474c825a .uagb-container-inner-blocks-wrap {
  align-items: center;
}

/* El segundo boton del hero es el de WhatsApp. */
.wp-block-uagb-container.uagb-block-474c825a .wp-block-uagb-buttons-child:nth-child(2) .uagb-buttons-repeater.wp-block-button__link {
  background: #25D366;
  background-color: #25D366;
  border-color: #25D366;
  color: #0b2e18;
}
.wp-block-uagb-container.uagb-block-474c825a .wp-block-uagb-buttons-child:nth-child(2) .uagb-buttons-repeater.wp-block-button__link:hover {
  background: #1da851;
  background-color: #1da851;
  border-color: #1da851;
  color: #fff;
}

/* ---- Nombre del sitio al lado del logo --------------------------------- */
.site-title,
.site-title a {
  font-family: var(--lv-titular, inherit);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -.01em;
}

/* === RITMO ===============================================================
   La plantilla deja mucho aire muerto entre secciones y las tarjetas de
   categoria quedan mas altas de lo que pide su contenido.
   ========================================================================== */

/* La seccion de categorias arrancaba con 90px de aire ademas del alto del
   hero: quedaba un hueco enorme. */
.wp-block-uagb-container.uagb-block-179a4875 {
  padding-top: 46px;
  padding-bottom: 72px;
}

/* Las tarjetas son mas anchas que altas en la demo. */
.wp-block-uagb-container.uagb-block-506cded2,
.wp-block-uagb-container.uagb-block-c1eff5b6,
.wp-block-uagb-container.uagb-block-640cb845 {
  min-height: 340px;
  background-size: cover;
  background-position: center 45%;
}
.wp-block-uagb-container.uagb-block-506cded2:hover,
.wp-block-uagb-container.uagb-block-c1eff5b6:hover,
.wp-block-uagb-container.uagb-block-640cb845:hover {
  background-size: 112%;
}

/* El titulo de la tarjeta pega mas fuerte un poco mas grande. */
.wp-block-uagb-container.uagb-block-506cded2 .uagb-ifb-title,
.wp-block-uagb-container.uagb-block-c1eff5b6 .uagb-ifb-title,
.wp-block-uagb-container.uagb-block-640cb845 .uagb-ifb-title,
.wp-block-uagb-container.uagb-block-506cded2 .uagb-ifb-title-prefix,
.wp-block-uagb-container.uagb-block-c1eff5b6 .uagb-ifb-title-prefix,
.wp-block-uagb-container.uagb-block-640cb845 .uagb-ifb-title-prefix {
  font-size: clamp(1.5rem, 2.1vw, 1.9rem);
}

/* ---- Iconos de la barra de confianza -----------------------------------
   Se cambiaron los genericos de la plantilla (globo, tilde, etiqueta,
   candado) por unos de trazo que dicen algo. Spectra les fuerza fill en el
   path, asi que sin esto se ven como manchas solidas. */
.uagb-ifb-icon-wrap svg,
.uagb-ifb-icon-wrap svg path {
  fill: none !important;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.uagb-ifb-icon-wrap svg { overflow: visible; }

/* === HERO Y TITULARES ====================================================
   Anton: condensada, pesada, un solo peso. Es letra de cartel, que es lo que
   pide una carniceria de barrio. La jerarquia se arma con tamano.

   El hero cambia de idea: el video es lo que vale, asi que el texto se corre
   a un bloque compacto abajo a la izquierda y deja ver la parrilla, en vez de
   taparla con un titular enorme centrado.
   ========================================================================== */

h1, h2, h3,
.uagb-heading-text,
.uagb-ifb-title-prefix,
.uagb-ifb-title,
.woocommerce-loop-product__title,
.woocommerce-products-header__title,
.entry-title,
.site-title {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-weight: 400;
  letter-spacing: .005em;
  line-height: 1.04;
  text-transform: uppercase;
}

/* Los nombres de producto en mayuscula condensada serian ilegibles en grilla. */
.woocommerce-loop-product__title,
.woocommerce div.product .product_title {
  text-transform: none;
  letter-spacing: .01em;
}

/* ---- Hero -------------------------------------------------------------- */
.wp-block-uagb-container.uagb-block-474c825a .uagb-ifb-content,
.wp-block-uagb-container.uagb-block-474c825a .uagb-ifb-title-wrap,
.wp-block-uagb-container.uagb-block-474c825a .uagb-ifb-title-prefix,
.wp-block-uagb-container.uagb-block-474c825a .uagb-ifb-title,
.wp-block-uagb-container.uagb-block-474c825a p {
  text-align: left;
}
.wp-block-uagb-container.uagb-block-474c825a .uagb-ifb-button-wrapper,
.wp-block-uagb-container.uagb-block-474c825a .wp-block-uagb-buttons,
.wp-block-uagb-container.uagb-block-474c825a .uagb-buttons__wrap {
  justify-content: flex-start;
}

.wp-block-uagb-container.uagb-block-474c825a .uagb-ifb-title-prefix,
.wp-block-uagb-container.uagb-block-474c825a h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  line-height: .98;
  max-width: 15ch;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .6);
}

/* Subtitulo: liviano, corto, sin competir.
   OJO: en este info-box el subtitulo NO es un <p>, es un h3.uagb-ifb-title.
   El titular es el h1.uagb-ifb-title-prefix. Por eso se comia el tratamiento
   de titular (Anton en mayuscula) hasta que se lo saco a mano. */
.wp-block-uagb-container.uagb-block-474c825a h3.uagb-ifb-title,
.wp-block-uagb-container.uagb-block-474c825a .uagb-ifb-content p,
.wp-block-uagb-container.uagb-block-474c825a .uagb-ifb-text-wrap p {
  font-family: 'Instrument Sans', system-ui, sans-serif !important;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none !important;
  max-width: 38ch;
  margin: 14px 0 26px;
  opacity: .82;
}

/* Velo mas suave: el video tiene que verse. */
.wp-block-uagb-container.uagb-block-474c825a .uagb-container__video-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(20,22,19,.86) 0%, rgba(20,22,19,.62) 34%,
    rgba(20,22,19,.20) 62%, rgba(20,22,19,.34) 100%);
}
.wp-block-uagb-container.uagb-block-474c825a .uagb-container-inner-blocks-wrap {
  position: relative;
  z-index: 2;
}

/* === CATALOGO EN CELULAR =================================================
   Astra pone el contenido primero en mobile, asi que la barra lateral cae
   DEBAJO de los 31 productos. Un filtro al que llegas despues de scrollear
   todo el catalogo no sirve para nada.

   Aca se la sube arriba y se la deja corta: buscador y categorias como
   pastillas en una fila. El filtro de precio y "los mas pedidos" se ocultan:
   empujaban los productos media pantalla para abajo y en una carniceria con
   precios entre $180 y $550 el slider no aporta.

   921px es el corte de Astra para tablet/mobile.
   ========================================================================== */

@media (max-width: 921px) {

  .ast-container { flex-direction: column; }

  #secondary {
    order: -1;
    width: 100%;
    margin: 0 0 22px;
    padding: 0;
  }

  #secondary .widget_price_filter,
  #secondary .widget_top_rated_products {
    display: none;
  }

  #secondary .ast-woo-sidebar-widget {
    margin-bottom: 14px;
    padding: 0;
    border: 0;
  }

  /* Titulo "Categorias" al ras, sin el aire de la columna de escritorio. */
  #secondary .widget_product_categories .widget-title,
  #secondary .widget_product_categories .wp-block-heading {
    font-size: 1rem;
    margin-bottom: 10px;
  }

  /* Las categorias pasan a ser pastillas en una fila que scrollea. */
  #secondary .widget_product_categories ul.product-categories {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin: 0;
    list-style: none;
    scrollbar-width: none;
  }
  #secondary .widget_product_categories ul.product-categories::-webkit-scrollbar {
    display: none;
  }
  #secondary .widget_product_categories ul.product-categories li {
    flex: 0 0 auto;
    margin: 0;
    border: 0;
    padding: 0;
  }
  #secondary .widget_product_categories ul.product-categories li a {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--lv-dark-2);
    border: 1px solid var(--lv-linea);
    font-size: .92rem;
    white-space: nowrap;
  }
  #secondary .widget_product_categories ul.product-categories li a:hover {
    border-color: rgba(193, 39, 45, .55);
  }
  /* El contador entre parentesis al lado del nombre, no alineado a la derecha. */
  #secondary .widget_product_categories ul.product-categories li .count {
    float: none;
    opacity: .55;
    margin-left: 4px;
  }

  /* Dos productos por fila entran comodos; tres quedan diminutos. */
  .woocommerce ul.products li.product { padding: 8px 8px 14px; }
}

/* === HIGIENE =============================================================
   Cosas que no se ven en una captura pero se notan al usar la pagina.
   ========================================================================== */

/* Sin esto el navegador dibuja scrollbars, selects e inputs nativos en claro
   sobre un sitio oscuro. */
:root { color-scheme: dark; }

/* Saca el retardo de 300ms al tocar en celular. */
a, button, input, select, textarea,
.uagb-buttons-repeater, .uagb-infobox-cta-link, .lv-wsp {
  touch-action: manipulation;
}

/* Evita que un titular quede con una palabra sola en la ultima linea. */
h1, h2, h3,
.uagb-ifb-title-prefix,
.uagb-heading-text {
  text-wrap: balance;
}

/* Nombres de producto largos no tienen que romper la tarjeta. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  overflow-wrap: break-word;
  min-width: 0;
}

/* El resaltado azul del tap en celular queda mal sobre fondo oscuro. */
a, button { -webkit-tap-highlight-color: rgba(193, 39, 45, .18); }