/* ===============================
   0. GENERALS
================================= */

.entry-title,
.ast-single-post .entry-title,
.ast-page .entry-title,
h1.entry-title {
    display: none !important;
}

/* ===== Header sticky ===== */
:root{
  --header-height: 0px;
}

body{
  padding-top: var(--header-height);
}

/* Header fix al top */
#masthead{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  transition: background-color .35s ease, box-shadow .35s ease;
}

/* Transició a les barres internes d'Astra */
#masthead .ast-primary-header-bar,
#masthead .main-header-bar {
  transition: background-color .35s ease, box-shadow .35s ease;
}

.ast-desktop #masthead .main-header-menu .sub-menu a,
.ast-desktop #masthead .main-header-menu .sub-menu a.menu-link,
.ast-desktop #masthead .main-header-menu .sub-menu li > a,
.ast-desktop #masthead .main-header-menu .sub-menu .menu-link,
.ast-desktop #masthead .main-header-menu .sub-menu .menu-text,
.ast-desktop #masthead .main-header-menu .sub-menu li.menu-item > a,
.ast-desktop #masthead .main-header-menu .sub-menu .menu-item-object-page > a,
.ast-desktop #masthead .main-header-menu .sub-menu .menu-item-object-post > a {
    color: #202020 !important;
    fill: #202020 !important;
}

.ast-desktop #masthead .main-header-menu .sub-menu li:hover > a,
.ast-desktop #masthead .main-header-menu .sub-menu a.menu-link:hover,
.ast-desktop #masthead .main-header-menu .sub-menu li:hover .menu-link,
.ast-desktop #masthead .main-header-menu .sub-menu a:hover {
    color: #FC3636 !important;
    fill: #FC3636 !important;
}


#masthead .header-widget-area .gtranslate_wrapper a.glink,
#masthead .header-widget-area .gtranslate_wrapper a.glink * {
    transition: color .35s ease, fill .35s ease;
}

/* ===============================
   4. SUBMENÚ ESCRIPTORI
================================= */

/* Base submenu */
.ast-desktop .main-header-menu .sub-menu,
.ast-header-navigation .sub-menu {
    background-color: #F5F5F5 !important;
    border-top: 1px solid #E0E0E0 !important;
}

/* Text normal del submenu */
.ast-desktop .main-header-menu .sub-menu a,
.ast-header-navigation .sub-menu a {
    color: #202020 !important;
    background-color: transparent !important;
}

/* Reset d'Astra */
.ast-desktop .main-header-menu .sub-menu .menu-link,
.ast-desktop .main-header-menu .sub-menu .menu-text,
.ast-desktop .main-header-menu .sub-menu a .menu-text {
    color: inherit !important;
}

/* Hover vermell submenu */
.ast-desktop .main-header-menu .sub-menu li:hover > a,
.ast-desktop .main-header-menu .sub-menu a:hover,
.ast-desktop .main-header-menu .sub-menu .current-menu-item > a,
.ast-desktop .main-header-menu .sub-menu .current-menu-parent > a,
.ast-desktop .main-header-menu .sub-menu .current-menu-ancestor > a {
    color: #FC3636 !important;
    background-color: #F5F5F5 !important;
}

/* Fletxes submenu */
.ast-desktop .main-header-menu .sub-menu svg,
.ast-desktop .main-header-menu .sub-menu svg * {
    fill: #202020 !important;
}

.ast-desktop .main-header-menu .sub-menu li:hover svg,
.ast-desktop .main-header-menu .sub-menu li:hover svg * {
    fill: #FC3636 !important;
}


/* ===============================
   5. MENÚ MÒBIL (OUTCANVAS)
================================= */

/* Base submenu mòbil */
#ast-hf-mobile-menu .sub-menu {
    background-color: #F5F5F5 !important;
    border-top: 1px solid #E0E0E0 !important;
}

/* Text normal submenu mòbil */
#ast-hf-mobile-menu .sub-menu a {
    color: #202020 !important;
    background-color: transparent !important;
}

/* Reset d'Astra mòbil */
#ast-hf-mobile-menu .sub-menu .menu-link,
#ast-hf-mobile-menu .sub-menu .menu-text,
#ast-hf-mobile-menu .sub-menu a .menu-text {
    color: inherit !important;
}

/* Hover / actiu en mòbil */
#ast-hf-mobile-menu .sub-menu li:hover > a,
#ast-hf-mobile-menu .sub-menu a:hover,
#ast-hf-mobile-menu .sub-menu .current-menu-item > a,
#ast-hf-mobile-menu .sub-menu .current-menu-parent > a,
#ast-hf-mobile-menu .sub-menu .current-menu-ancestor > a {
    color: #FC3636 !important;
    background-color: #F5F5F5 !important;
}

/* Fletxes del submenu mòbil (botó ast-menu-toggle) */
#ast-hf-mobile-menu .ast-menu-toggle svg,
#ast-hf-mobile-menu .ast-menu-toggle svg * {
    fill: #202020 !important;
}

#ast-hf-mobile-menu li:hover > .ast-menu-toggle svg,
#ast-hf-mobile-menu li:hover > .ast-menu-toggle svg * {
    fill: #FC3636 !important;
}

/* Menú mòbil off-canvas: texts sempre negres (top i scrolled) */
.ast-mobile-header-content .ast-builder-menu-mobile #ast-hf-mobile-menu .menu-link {
    color: #202020 !important;
    background-color: transparent !important;
}


/* ===============================
   6. TEXT HERO MÒBIL
================================= */

@media (max-width: 767px) {
    .hero-mobile-white {
        color: #ffffff !important;
    }

    .hero-mobile-white .elementor-heading-title {
        color: #ffffff !important;
    }
}


/* ===============================
   7. CARTA DE SERVEIS (card-diagonal)
================================= */

.card-diagonal{
  cursor: pointer; 
  position: relative;
  overflow: hidden;
  border-radius: 3px;
}

.card-diagonal > *{
  position: relative;
  z-index: 2;
}

.card-diagonal::after{
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 84px;
  height: 84px;
  background: #F5F5F5;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  z-index: 1;
  transform: translate(1px, 1px);
}

.card-diagonal:hover {
  background-color: #ffffff;
}

.card-diagonal:hover a.elementor-button,
.card-diagonal:hover .elementor-button {
  background-color: #D3033B;
  border-color: #D3033B;
  color: #fff;
}

.card-diagonal:hover .elementor-button .elementor-button-text,
.card-diagonal:hover .elementor-button i,
.card-diagonal:hover .elementor-button svg,
.card-diagonal:hover .elementor-button .elementor-button-icon {
  color: #fff;
  fill: #fff;
}

.card-diagonal:hover *{
  color: #ffffff !important;
  fill: #ffffff !important;
}


/* ===============================
   8. SECCIÓ SERVEIS – CLIP PATH
================================= */

.tall-esquerra {
  clip-path: none;
}

@media (min-width: 768px) {
  .tall-esquerra {
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
  }
}
/* ===============================
   8.2 header button
================================= */

.ast-header-button-1 a,
.ast-header-button-1 .ast-builder-button-wrap a {
    text-decoration: none !important;
}

/* Opcional: garantir que tampoc hi hagi subratllat en hover o focus */
.ast-header-button-1 a:hover,
.ast-header-button-1 a:focus {
    text-decoration: none !important;
}

/* ===============================
   10. IMG ZOOM en card-diagonal
================================= */

.card-diagonal .img-zoomed {
    background-size: 100% !important;
    background-position: center center;
    background-repeat: no-repeat;
    transition: background-size 0.6s ease;
    overflow: hidden;
}

.card-diagonal:hover .img-zoomed {
    background-size: 110% !important;
}

.elementor-container.img-zoomed,
.elementor-column.img-zoomed,
.img-zoomed {
    background-size: 100% !important;
    background-position: center center;
    background-repeat: no-repeat;
    transition: background-size 0.6s ease;
    overflow: hidden;
}

.elementor-container.img-zoomed:hover,
.elementor-column.img-zoomed:hover,
.img-zoomed:hover {
    background-size: 110% !important;
}


/* ===============================
   11. POSTS – AMAGAR NAV
================================= */

nav.navigation.post-navigation {
    display: none !important;
}


/* ===============================
   12. CARD GALLERY
================================= */

.card-gallery{
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background-size: 105% 105% !important;
  background-position: center center !important;
  background-repeat: no-repeat;
  transition:
    background-size 0.55s ease-out,
    filter 0.25s ease,
    opacity 0.25s ease;
}

.card-gallery > *{
  position: relative;
  z-index: 2;
}

.card-gallery::after{
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 84px;
  height: 84px;
  background: #F5F5F5;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  z-index: 1;
  transform: translate(1px, 1px);
}

.card-gallery:hover{
  background-size: 110% 110% !important;
}

.card-gallery .elementor-widget-button{
  position: relative;
  transition: transform 0.35s ease;
}

.card-gallery:hover .elementor-widget-button{
  transform: translateX(-8px);
}

.card-gallery .elementor-widget-heading{
  position: relative;
  transition: transform 0.35s ease;
}

.card-gallery:hover .elementor-widget-heading{
  transform: translateX(8px);
}

.card-gallery{
  filter: none;
  opacity: 1;
}

.card-gallery.is-dimmed{
  filter: grayscale(70%) brightness(1);
  opacity: 0.9;
}




/* ===============================
   14. ETIQUETA "NOU" A LES CARDS
================================= */

.card-diagonal.novetat {
    overflow: visible;
}

.card-diagonal.novetat::before {
    content: "";
    position: absolute;
    top: -4px;      
    left: -4px;
    width: 75px;
    height: 75px;
    background-image: url("https://stage4.aplitec.com/wp-content/uploads/2025/11/Etiqueta-NOU-3.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
    z-index: 99999;
    pointer-events: none;
}


/* FORÇAR ÍTEM ACTIU AL TOP AMB ESPECIFICITAT MÀXIMA */
body:not(.header-scrolled) #masthead .main-header-menu li.current-menu-item > a.menu-link,
body:not(.header-scrolled) #masthead .main-header-menu li.current_page_item > a.menu-link {
    color: #FC3636 !important;
}

/* Si Astra pinta inline "style=color: white" → sobrescriptura directa */
body:not(.header-scrolled) #masthead .main-header-menu li.current-menu-item > a.menu-link[style],
body:not(.header-scrolled) #masthead .main-header-menu li.current_page_item > a.menu-link[style] {
    color: #FC3636 !important;
}


/* ========================================
   HERO container → must contain absolute items
========================================= */
.hero-section,
.elementor-element-f2267db { /* substitueix si la teva secció té un altre ID */
    position: relative !important;
}

/* ========================================
   Diagonal-AE (imatge hero)
========================================= */
.Diagonal-AE,
.elementor-element-dc84c70 {
    position: absolute !important;
    bottom: 15%;      /* separació del bottom del hero */
    right: 5%;       /* separació del right del hero */
    z-index: 1;

    /* Més gran (ajusta a gust) */
    width: 55vw;         /* era 40–45vw → ara més gran */
    max-width: 1200px;    /* límit en pantalles grans */
    height: auto;
}

.Diagonal-AE img,
.elementor-element-dc84c70 img {
    width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   Scroll Button → dins del contenidor Diagonal-AE
   i enganxat a BOTTOM RIGHT del contenidor
========================================= */

/* ========================================
   Scroll Button – idle animation
========================================= */

@keyframes scrollIdle {
    0%   { transform: translateY(0); opacity: 1; }
    50%  { transform: translateY(10px); opacity: 0.85; }
    100% { transform: translateY(0); opacity: 1; }
}

.scroll-btn {
    animation: scrollIdle 2.6s ease-in-out infinite;
    /* Manté el posicionament que ja tens */
    position: absolute !important;
    bottom: 5%;
    right: 3%;
    margin: 0 !important;
    z-index: 10;
}

.scroll-btn,
.scroll-btn * {
    text-decoration: none !important;
}