/* ============================================================
   AIRE COLOMBIANO — Elementor
   Solo lo imprescindible para que los widgets nazcan en marca
   sin tener que tocar cada uno a mano. Todo lo que se pueda
   resolver en Site Settings se resuelve allí, no aquí.
   ============================================================ */

/* --- Ancho de contenido y márgenes --------------------------
   Manual §05: 16px en móvil, 24px en tableta, 32px en escritorio. */

.e-con,
.elementor-section.elementor-section-boxed > .elementor-container {
  --container-default-padding-inline-start: var(--ac-e-4);
  --container-default-padding-inline-end: var(--ac-e-4);
}

@media (min-width: 640px) {
  .e-con,
  .elementor-section.elementor-section-boxed > .elementor-container {
    --container-default-padding-inline-start: var(--ac-e-6);
    --container-default-padding-inline-end: var(--ac-e-6);
  }
}

@media (min-width: 1024px) {
  .e-con,
  .elementor-section.elementor-section-boxed > .elementor-container {
    --container-default-padding-inline-start: var(--ac-e-8);
    --container-default-padding-inline-end: var(--ac-e-8);
  }
}

/* --- Botones de Elementor -----------------------------------
   Heredan el mismo contrato que los de WooCommerce: 44px de
   alto táctil, sin sombras, sin gradientes. */

/* Mismo caso que la rejilla Products (ver más abajo): el widget Button
   toma por defecto la tipografía y el color «Accent» del kit, que siguen
   de fábrica (Roboto 500, que no carga, y fondo verde). Sus reglas pesan
   más que esta, así que en vez de pisarlas se redefinen aquí las
   variables que leen. Lo que se ponga a mano en un botón sigue mandando. */
.elementor-button {
  --e-global-typography-accent-font-family: var(--ac-fuente-texto);
  --e-global-typography-accent-font-weight: 600;
  --e-global-color-accent: var(--ac-primario);
}

.elementor-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ac-fuente-texto);
  font-size: var(--ac-t-cuerpo-s);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--ac-r-s);
  transition: background var(--ac-transicion), color var(--ac-transicion),
              border-color var(--ac-transicion);
}

/* El arco es la firma del primario. Se aplica con esta clase
   desde el campo «CSS Classes» del widget, nunca por defecto:
   un solo botón primario por pantalla. */
.ac-primario .elementor-button,
.elementor-button.ac-primario {
  background: var(--ac-primario);
  border: 1px solid var(--ac-primario);
  color: var(--ac-texto-inverso);
  border-radius: var(--ac-r-arco);
}

.ac-primario .elementor-button:hover,
.elementor-button.ac-primario:hover {
  background: var(--ac-primario-hover);
  border-color: var(--ac-primario-hover);
  color: var(--ac-texto-inverso);
}

/* --- Títulos y texto ---------------------------------------- */

.elementor-heading-title {
  text-wrap: balance;
}

/* Clase de utilidad para poner un título en Fraunces sin tener
   que configurar la tipografía widget por widget. */
.ac-display .elementor-heading-title,
.elementor-heading-title.ac-display {
  font-family: var(--ac-fuente-display);
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* --- Divisor: siempre el pespunte ---------------------------
   Sustituye toda línea gris de separación entre secciones.
   Elementor dibuja la suya con un borde lógico (border-block-start)
   que carga después del tema y le gana a un border: 0 normal; sin
   el !important salen las dos líneas superpuestas. */

.elementor-widget-divider .elementor-divider-separator {
  --divider-border-width: 0px;
  border: 0 !important;
  height: 2px;
  background: var(--ac-pespunte);
}

/* --- Fondos de sección -------------------------------------- */

.ac-fondo-arena  { background-color: var(--ac-fondo-alt); }
.ac-fondo-nube   { background-color: var(--ac-azul-nube); }

.ac-fondo-indigo {
  background-color: var(--ac-indigo-900);
  color: var(--ac-tiza);
}

.ac-fondo-indigo .elementor-heading-title,
.ac-fondo-indigo p {
  color: var(--ac-tiza);
}

.ac-fondo-indigo a {
  color: var(--ac-hilo-claro);
}

/* --- Imágenes -----------------------------------------------
   Las fotos de producto no se redondean nunca. Elementor tiende
   a heredar radios de los ajustes globales. */

.ac-foto-producto img,
.elementor-widget-woocommerce-product-images img {
  border-radius: var(--ac-r-0) !important;
  background: var(--ac-fondo-alt);
}

/* --- Widgets de WooCommerce dentro de Elementor -------------
   El widget Products pinta el nombre y el precio con los globales
   «Primary» del kit: color var(--e-global-color-primary) y fuente
   var(--e-global-typography-primary-font-family). Mientras el kit siga
   con los de fábrica, eso es un azul claro (#6EC1E4) y Roboto 600, que
   ni siquiera carga porque el tema desactiva las fuentes de Google.

   Pelear por especificidad no basta: en la web el CSS del tema carga
   después y gana, pero en el editor Elementor inyecta sus estilos al
   final y el nombre seguía saliendo azul (v1.1.8).

   Así que, en vez de pisar sus reglas, se redefinen las variables que
   esas reglas leen, justo en el elemento que las consume. Elementor solo
   declara esas variables en el <body> (el kit), de modo que la
   declaración de aquí gana siempre, cargue en el orden que cargue.

   Lo que se ponga a mano en un widget concreto sigue mandando: eso
   Elementor lo escribe como valor directo, no como variable.

   La retícula no se toca aquí: woocommerce.css la resuelve con la
   clase columns-N, que respeta las columnas elegidas en el widget. */

/* Los widgets Product Related y Upsells de la ficha, y Archive Products de
   la tienda, usan las mismas
   reglas por defecto que Products, así que se cubren aquí los cuatro. */
.elementor-widget-woocommerce-products .woocommerce-loop-product__title,
.elementor-widget-woocommerce-product-related .woocommerce-loop-product__title,
.elementor-widget-woocommerce-product-upsell .woocommerce-loop-product__title,
.elementor-widget-wc-archive-products .woocommerce-loop-product__title {
  --e-global-color-primary: var(--ac-texto);
  --e-global-typography-primary-font-family: var(--ac-fuente-display);
  --e-global-typography-primary-font-weight: 500;
}

.elementor-widget-woocommerce-products .price,
.elementor-widget-woocommerce-product-related .price,
.elementor-widget-woocommerce-product-upsell .price,
.elementor-widget-wc-archive-products .price {
  --e-global-color-primary: var(--ac-texto);
  --e-global-typography-primary-font-family: var(--ac-fuente-texto);
  --e-global-typography-primary-font-weight: 600;
}

/* El precio tachado de una rebaja: gris y sin peso. */
.elementor-widget-woocommerce-products .price del,
.elementor-widget-woocommerce-product-related .price del,
.elementor-widget-woocommerce-product-upsell .price del,
.elementor-widget-wc-archive-products .price del {
  --e-global-color-primary: var(--ac-texto-suave);
  --e-global-typography-primary-font-weight: 400;
}

/* El título de la sección («También te puede gustar»): como cualquier h2
   de sección del home, Fraunces 400. */
.elementor-widget-woocommerce-product-related .related > h2,
.elementor-widget-woocommerce-product-upsell .upsells > h2 {
  --products-title-color: var(--ac-texto);
  --e-global-color-primary: var(--ac-texto);
  --e-global-typography-primary-font-family: var(--ac-fuente-display);
  --e-global-typography-primary-font-weight: 400;
  font-size: clamp(28px, 3.8vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.008em;
  margin-bottom: var(--ac-e-8);
}


/* ============================================================
   CABECERA PEGAJOSA
   El pegado lo activa Elementor (Advanced → Motion Effects →
   Sticky). Cuando la barra se fija, Elementor le añade la clase
   .elementor-sticky--effects: eso es lo que aprovechamos aquí
   para comprimirla, en lugar de configurarlo widget a widget.

   Se aplica poniendo la clase ac-barra en el contenedor de la
   barra principal, desde Advanced → CSS Classes.
   ============================================================ */

.ac-barra {
  transition: padding var(--ac-transicion), box-shadow var(--ac-transicion);
}

.ac-barra.elementor-sticky--effects {
  /* La barra adelgaza al fijarse: recupera altura de pantalla,
     que en móvil es lo más escaso que hay. */
  padding-top: var(--ac-e-2);
  padding-bottom: var(--ac-e-2);

  /* Al despegarse del flujo, el borde inferior deja de leerse
     como separación y pasa a leerse como raya suelta. Lo
     sustituye la sombra. */
  border-bottom-color: transparent;
  box-shadow: var(--ac-sombra);

  /* El fondo tiene que ser opaco sí o sí: al quedar fija, el
     contenido de la página pasa por debajo. */
  background: var(--ac-fondo);
}

/* El logotipo encoge con la barra para que no la desborde. */
.ac-barra.elementor-sticky--effects .ac-logo img,
.ac-barra.elementor-sticky--effects > .e-con img,
.ac-barra.elementor-sticky--effects > .e-con-inner > .e-con img {
  max-height: 32px;
  width: auto;
}

/* Los hijos directos de la barra no se encogen.
   Elementor deja que un widget en fila se comprima por debajo de su
   propio contenido, y cuando eso le pasa al menú los enlaces se parten
   en dos líneas. Con tres elementos en la barra —logo, menú, iconos—
   pasa siempre. Aquí se les dice que ocupen lo suyo y nada menos.
   Por debajo de 1024px el menú ya es hamburguesa, así que no hay
   riesgo de que se desborde en móvil. */
.ac-barra > .e-con,
.ac-barra > .elementor-widget,
.ac-barra > .e-con-inner > .e-con,
.ac-barra > .e-con-inner > .elementor-widget {
  flex-shrink: 0;
}

/* ============================================================
   CARRITO DE LA CABECERA
   ============================================================ */

/* Elementor pinta el contador aunque el carrito esté vacío. Un «0»
   permanente sobre el icono es ruido: la insignia tiene que aparecer
   solo cuando hay algo que contar. */
.ac-barra .elementor-button-icon-qty[data-counter="0"] {
  display: none;
}

/* El carrito es un icono, no un botón relleno: en la barra compite
   con el logotipo y con el menú, y no debe ganarles. */
.ac-barra .elementor-menu-cart__toggle .elementor-button {
  background: transparent;
  border: 0;
  min-height: 44px;
  padding: var(--ac-e-2);
  border-radius: var(--ac-r-s);
  transition: background var(--ac-transicion);
}

.ac-barra .elementor-menu-cart__toggle .elementor-button:hover {
  background: var(--ac-superficie-hund);
}

/* ============================================================
   LA BARRA EN MÓVIL
   En 360px no caben el logotipo a tamaño de escritorio, la
   hamburguesa y el carrito: la barra se parte en dos filas.
   En vez de encadenar ajustes por dispositivo en Elementor
   —que se pierden y son difíciles de recordar— el recorte va
   aquí, en un solo bloque que se lee de una vez.

   Lleva !important porque Elementor imprime la tipografía del
   widget con más especificidad y sin media query.
   ============================================================ */

@media (max-width: 767px) {

  /* Si la barra está en Boxed, Elementor mete a los hijos dentro de
     un .e-con-inner, y el hueco y el salto de línea se aplican ahí,
     no en la barra. Por eso cada regla de estructura de este archivo
     nombra los dos niveles: con uno solo no coincidía con nada, y ese
     fue el motivo real de que la barra siguiera en dos filas, no la
     caché. */
  .ac-barra,
  .ac-barra > .e-con-inner {
    gap: var(--ac-e-2) !important;
    flex-wrap: nowrap !important;
  }

  .ac-barra {
    /* El manual pide 16px de margen en móvil, no 32. */
    padding-left: var(--ac-e-4) !important;
    padding-right: var(--ac-e-4) !important;
  }

  /* El arco baja de 42 a 32: sigue leyéndose y libera 10px.
     Se busca por estructura y no solo por la clase ac-logo, que
     puede no estar puesta en el widget. */
  .ac-barra .ac-logo img,
  .ac-barra > .e-con img,
  .ac-barra > .e-con-inner > .e-con img {
    width: 32px !important;
    max-width: none;
  }

  /* El nombre baja de 21 a 16 y afloja el tracking. A este
     tamaño, 0.09em separa tanto que la palabra se deshace. */
  .ac-barra .elementor-widget-heading .elementor-heading-title {
    font-size: 16px !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap;
  }
}

/* El bloque del logotipo mide lo que mide su contenido.
   Elementor da el 100% de ancho a un contenedor anidado, y en una
   barra en fila eso deja al menú y al carrito sin sitio: bajan a una
   segunda línea. Se fija aquí y no en el editor porque un ancho por
   dispositivo se pierde en cuanto se restaura una revisión — ya pasó
   una vez y no hay motivo para que no vuelva a pasar. */
.ac-barra > .e-con,
.ac-barra > .e-con-inner > .e-con {
  width: auto !important;
  flex: 0 0 auto;
}

/* ============================================================
   FILTRO DE CORTE EN EL HOME
   Las píldoras enlazan a su categoría; assets/js/filtros.js las
   convierte en filtro sin recargar. La píldora elegida se marca
   con aria-pressed, que es a la vez el estilo y lo que anuncia
   un lector de pantalla.

   Lleva !important porque el estilo de cada píldora lo imprime
   Elementor con el id del elemento delante.
   ============================================================ */

.ac-oculta {
  display: none !important;
}

.ac-filtros--activos .elementor-button[aria-pressed="true"] {
  background-color: var(--ac-primario) !important;
  border-color: var(--ac-primario) !important;
  color: var(--ac-texto-inverso) !important;
}

/* Mientras el JS no ha entrado, ninguna píldora se ve «elegida»:
   son enlaces normales. */
.ac-filtros .elementor-button,
.ac-filtros-nav .elementor-button {
  cursor: pointer;
}

/* ============================================================
   PANEL LATERAL DEL CARRITO
   El widget Menu Cart de Elementor abre su propio panel, con sus
   colores de fábrica: botones gris piedra, nombre del producto en
   color de enlace y precio tachado en gris. Es lo primero que ve
   la clienta después de decidir comprar, así que tiene que verse
   como el resto de la tienda.
   ============================================================ */

.elementor-menu-cart__container {
  font-family: var(--ac-fuente-texto);
  color: var(--ac-texto);
}

.elementor-menu-cart__main {
  background: var(--ac-fondo);
  padding: var(--ac-e-6);
}

/* El nombre lleva la talla detrás («Jeans Catalina - 8»), así que es
   la línea que la clienta comprueba. Va en Fraunces y en color de
   texto, no de enlace. */
.elementor-menu-cart__product-name,
.elementor-menu-cart__product-name a {
  font-family: var(--ac-fuente-display);
  font-size: var(--ac-t-cuerpo);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ac-texto);
  text-decoration: none;
}

.elementor-menu-cart__product-price {
  font-family: var(--ac-fuente-texto);
  font-size: var(--ac-t-cuerpo-s);
  font-variant-numeric: tabular-nums;
  color: var(--ac-texto-suave);
}

.elementor-menu-cart__subtotal {
  font-family: var(--ac-fuente-texto);
  font-size: var(--ac-t-cuerpo);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ac-texto);
  border-top: 1px solid var(--ac-borde);
  border-bottom: 1px solid var(--ac-borde);
  padding: var(--ac-e-4) 0;
}

.elementor-menu-cart__footer-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--ac-e-2);
}

/* Dos botones, dos pesos: «Finalizar compra» es la acción; «Ver
   carrito» es el paso previo para quien quiera revisar antes. */
.elementor-menu-cart__footer-buttons .elementor-button {
  width: 100%;
  min-height: 48px;
  font-size: var(--ac-t-cuerpo-s);
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--ac-r-s);
}

.elementor-menu-cart__footer-buttons .elementor-button--checkout {
  background-color: var(--ac-primario);
  border: 1px solid var(--ac-primario);
  color: var(--ac-texto-inverso);
  border-radius: var(--ac-r-arco);
  order: -1;
}

.elementor-menu-cart__footer-buttons .elementor-button--checkout:hover {
  background-color: var(--ac-primario-hover);
  border-color: var(--ac-primario-hover);
  color: var(--ac-texto-inverso);
}

.elementor-menu-cart__footer-buttons .elementor-button--view-cart {
  background-color: transparent;
  border: 1px solid var(--ac-borde-fuerte);
  color: var(--ac-texto);
}

.elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover {
  background-color: var(--ac-superficie-hund);
  color: var(--ac-texto);
}

/* El carrito vacío no es un error: es el estado normal de quien
   acaba de llegar. */
.elementor-menu-cart__empty-message {
  font-size: var(--ac-t-cuerpo-s);
  color: var(--ac-texto-suave);
}

/* --- Cantidad editable en el panel --------------------------
   Sustituye el «1 × $130» de fábrica (ver functions.php). El −
   se detiene en 1: quitar el producto es trabajo de la ×. */

.ac-cantidad {
  display: flex;
  align-items: center;
  gap: var(--ac-e-2);
  margin-top: var(--ac-e-2);
}

.ac-cantidad__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-family: var(--ac-fuente-texto);
  font-size: var(--ac-t-cuerpo);
  line-height: 1;
  color: var(--ac-texto);
  background: var(--ac-superficie);
  border: 1px solid var(--ac-borde);
  border-radius: var(--ac-r-s);
  cursor: pointer;
  transition: border-color var(--ac-transicion), background var(--ac-transicion);
}

.ac-cantidad__boton:hover:not([disabled]) {
  border-color: var(--ac-borde-fuerte);
}

.ac-cantidad__boton:focus-visible {
  outline: 2px solid var(--ac-foco);
  outline-offset: 2px;
}

.ac-cantidad__boton[disabled] {
  opacity: 0.4;
  cursor: default;
}

.ac-cantidad__valor {
  min-width: 1.5em;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ac-texto);
}

.ac-cantidad__importe {
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ac-texto);
}

.ac-cantidad.ac-cargando {
  opacity: 0.6;
  pointer-events: none;
}

/* La barra de envío gratis, una vez colocada bajo el subtotal. */
.elementor-menu-cart__main .ac-envio-gratis {
  padding: var(--ac-e-4) 0;
}