/*
Theme Name: Aplitec Child
Theme URI: https://aplitecinformatica.com/
Template: astra
Author: Aplitec Informàtica
Author URI: https://aplitecinformatica.com/
Description: hehe
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.12.1.1769498033
Updated: 2026-01-27 08:13:53

*/

:root{
  --header-offset: 8px; /* ajust fi: 6–12px segons font */
}

/* Quan la topbar està amagada 
body.topbar-hidden .header-wrapper{
  transform: translateY(var(--header-offset));
}

*/
/* c-pare */
.c-pare {
  position: relative;
  overflow: visible !important;
}

/* c-wrapper */
.c-wrapper {
  position: relative;
  overflow: visible !important;
}

/* img-vending */
.img-vending {
  position: absolute !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 80%;
  max-width: 320px;
  transition: transform 0.4s ease;
}
/* Hover del CONTENIDOR → anima la imatge (només desktop) */
@media (min-width: 769px) {
  .c-pare:hover .img-vending {
    transform: translate(-50%, -50%) translateY(-30px);
  }
}
/* Imatge */
.img-vending img {
  width: 100%;
  height: auto;
  display: block;
}

/* MÒBIL - Animació parallax basada en scroll */
@media (max-width: 768px) {
  .img-vending {
    transform: translate(-50%, -50%) translateY(var(--vending-offset, 0px)) !important;
    transition: none !important; /* Desactivem transition per scroll fluid */
  }
}


.img-vending-float {
  position: absolute !important;
  left: 50%;
  top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  z-index: 3;
  transition: transform 0.4s ease;
}

@media (min-width: 769px) {
  .c-pare:hover .img-vending-float {
    transform: translate(-50%, -50%) translateY(-30px);
  }
}

.img-vending-float img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .img-vending-float {
    transform: translate(-50%, -50%) translateY(var(--vending-offset, 0px)) !important;
    transition: none !important;
  }
}



/* Hover del contenidor → efecte hover al botó */
.c-pare:hover .card-btn .elementor-button {
  background-color: white;

}

/* Títol: transició suau */
.card-title .elementor-heading-title {
  transition: color .25s ease;
}

/* Hover del contenidor → canvia color del títol REAL */
.c-pare:hover .card-title .elementor-heading-title {
  color: #D3031C !important;
}



/* Estat base: només botons amb classe card-btn */
.card-btn .elementor-button-icon {
  transition: transform .25s ease;
}

/* Hover del CONTENIDOR */
.c-pare:hover .card-btn .elementor-button-icon {
  transform: translateX(6px);
}

/* Hover directe del BOTÓ (opcional però recomanat) */
.card-btn .elementor-button:hover .elementor-button-icon {
  transform: translateX(6px);
}



.cards-wrapper {
  display: flex;
  gap: 24px;
}

.cards-wrapper .card {
  position: relative;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Quan el ratolí entra al wrapper → tots grisos */
.cards-wrapper:hover .card {
  filter: grayscale(100%) saturate(0.2);
  opacity: 0.6;
}

/* EXCEPCIÓ: la card en hover recupera color */
.cards-wrapper .card:hover {
  filter: none;
  opacity: 1;
}


/* =========================
   CARD BASE
========================= */
.vending-card {
  cursor: pointer;
}

/* =========================
   TEXTOS (títol + text)
========================= */

/* Transicions */
.vending-card p,
.vending-card .vending-card__text,
.vending-card .vending-card__title .elementor-heading-title {
  transition: color 0.25s ease;
}

/* Hover unificat */
.vending-card:hover p,
.vending-card:hover .vending-card__text,
.vending-card:hover .vending-card__title .elementor-heading-title {
  color: #D3031C !important;
}

/* =========================
   BOTÓ
========================= */
.vending-card:hover .vending-card__btn .elementor-button {
  background-color: #FFFFFF !important;
  border-radius: 10px !important;
  color: #D3031C !important;
  border-color: transparent !important;
}

/* =========================
   ICONA DEL BOTÓ
========================= */
.vending-card__btn .elementor-button-icon {
  transition: transform 0.25s ease;
}

.vending-card:hover .vending-card__btn .elementor-button-icon,
.vending-card__btn .elementor-button:hover .elementor-button-icon {
  transform: translateX(6px);
}

/* =========================
   IMATGE + SHADOW SÒLIDA
========================= */
.vending-card__image {
  position: relative;
  z-index: 1;
  border-radius: 10px;
  overflow: visible;
}

.vending-card__image img {
  transition: transform 0.25s ease;
  border-radius: 10px;
}

.vending-card:hover .vending-card__image img {
  transform: translate(-4px, -4px);
}

.vending-card__image::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 16px;
  width: 97%;
  height: 97%;
  background-color: #D3031C;
  border-radius: 10px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.vending-card:hover .vending-card__image::after {
  opacity: 1;
}


.icon-red svg path {
  fill: #D3031C !important;
}

@media (max-width: 767px) {
  .icon-red svg path {
    fill: #D3031C !important;
  }
}

.icon-red {
  line-height: 0;          /* elimina baseline */
}

.icon-red svg {
  display: block;          /* evita espai descendent */
  width: 50px;
  height: 50px;
}


/* =========================
   CARD PRODUCTE
========================= */

.card-producte {
  position: relative;
  overflow: visible !important;
}

/* =========================
   WRAPPER IMATGE FLOTANT
========================= */

.img-producte {
  /* Mida base */
  --img-size: 170px;

  position: absolute;
  top: 50%;
  right: calc(var(--img-size) * -0.20);
  transform: translateY(-50%) rotate(45deg);

  z-index: 5;
  overflow: visible !important;
  pointer-events: none;

  transition: transform 0.45s cubic-bezier(.22,.61,.36,1);
}

/* =========================
   WIDGET IMAGE ELEMENTOR
========================= */

.img-producte.elementor-widget-image {
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
}

/* =========================
   IMG REAL
========================= */

.img-producte img {
  width: var(--img-size) !important;
  max-width: none !important;
  height: auto;
  display: block;
}

/* =========================
   HOVER → ROTACIÓ A 0°
========================= */

.card-producte:hover .img-producte {
  transform: translateY(-50%) rotate(0deg);
}

/* =========================
   TABLET
========================= */

@media (max-width: 1024px) {
  .img-producte {
    --img-size: 150px;
    right: calc(var(--img-size) * -0.30);
  }
}

/* =========================
   MÒBIL
========================= */

@media (max-width: 768px) {
  .img-producte {
    --img-size: 120px;
    right: -18px;
    transform: translateY(-50%) rotate(0deg);
  }
}

/* ===============================
   CONTENIDOR PARE
================================ */
.card-overlap {
  position: relative;
  overflow: visible !important;
}

/* ===============================
   CONTENIDOR IMATGE FLOTANT
================================ */
.card-overlap-img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  pointer-events: none;
}

/* VERSIÓ NORMAL - imatge a la dreta */
.card-overlap:not(.is-reverse) .card-overlap-img {
  right: max(
    clamp(-520px, -38vw, -440px),
    calc(-100vw + 520px + 32px)
  );
}

/* ===============================
   IMATGE
================================ */
.card-overlap-img-inner img {
  width: clamp(380px, 35vw, 520px);
  height: auto;
  display: block;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 1024px) {
  .card-overlap-img {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    margin-top: 32px;
    pointer-events: auto;
  }
  
  .card-overlap-img-inner img {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
  }
}




.carousel-fade-edges {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 20%,
    black 100%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 20%,
    black 100%,
    transparent 100%
  );
}