/*
Theme Name: Aplitec Informàtica Theme Child
Theme URI: https://aplitecinformatica.com/
Template: hello-elementor
Author: Aplitec Informàtica disseny
Author URI: https://aplitecinformatica.com/
Description: heh
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.5.1765975827
Updated: 2025-12-17 13:50:27
*/

/* FIX HEADER – FORÇAT I ROBUST */

:root {
  --header-height: 90px;
  --flower-rotation: 0deg;
}

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

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body > #page > #masthead,
#masthead {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

#masthead {
  transition: transform 0.35s cubic-bezier(.4,0,.2,1) !important;
  will-change: transform;
}

#masthead.is-hidden {
  transform: translateY(-100%) !important;
}

#masthead.is-visible {
  transform: translateY(0) !important;
}

/* ================================
   LOGO HEADER (LOTTIE + SVG)
   ================================ */

.header-logo {
  position: relative;
  width: 200px; /* ajusta si cal */
  height: 80px; /* ajusta segons header */
}

.logo-lottie,
.logo-static {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Estat inicial */
.logo-static {
  display: none;
}

/* Assegura que Lottie no es desquadri */
.logo-lottie svg {
  width: 100% !important;
  height: 100% !important;
}

/* ================================
   ICONES MENU – ACTIU + HOVER
   ================================ */

/* Base */
.hfe-nav-menu .menu-item {
  position: relative;
}

/* Pseudo-element base (net) */
.hfe-nav-menu .menu-item > a.hfe-menu-item::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;

  width: 11px;
  height: 11px;

  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;

  pointer-events: none;
  opacity: 0 !important;
}

/* =========================
   ELEMENT ACTIU (sempre)
   ========================= */
.hfe-nav-menu li.current-menu-item > a.hfe-menu-item::before,
.hfe-nav-menu li.current_page_item > a.hfe-menu-item::before,
.hfe-nav-menu li.current_page_parent > a.hfe-menu-item::before {
  background-image: url("https://pacem.cat/wp-content/uploads/2025/12/Icon-Header_Active.png");
  background-color: transparent !important;
  opacity: 1 !important;
}

/* =========================
   HOVER (només NO actius)
   ========================= */
.hfe-nav-menu
li:not(.current-menu-item):not(.current_page_item):not(.current_page_parent)
> a.hfe-menu-item:hover::before {
  background-image: url("https://pacem.cat/wp-content/uploads/2025/12/Icon-Header_Hover.png");
  background-color: transparent !important;
  opacity: 1 !important;
}

/* =========================
   Eliminar efectes Elementor
   ========================= */
.hfe-nav-menu .menu-item a.hfe-menu-item::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
/* FORÇAR aparició instantània */
.hfe-nav-menu .menu-item > a.hfe-menu-item::before {
  transition: none !important;
}

/* =========================
   SOLUCIÓ TALL ELEMENTOR
   ========================= */

/* Contenidor pare que talla */
[data-id="8886cb8"],
[data-id="8886cb8"] > .e-con-inner {
  overflow: visible !important;
}

/* Contenidor de la flor */
[data-id="b948846"],
[data-id="b948846"] > .e-con-inner {
  overflow: visible !important;
}

/* Widget HTML de la flor */
[data-id="ea638fb"],
[data-id="ea638fb"] .elementor-widget-container {
  overflow: visible !important;
}

/* Tots els e-con i contenidors flex */
.e-con,
.e-con-inner,
.e-con-boxed,
.e-con-full {
  overflow: visible !important;
}

/* Elementor general */
.elementor-widget-html {
  overflow: visible !important;
}

.elementor-element {
  overflow: visible !important;
}

.elementor-container {
  overflow: visible !important;
}

.elementor-section {
  overflow: visible !important;
}

/* =========================
   HERO FLOWER
   ========================= */

/* WRAP */
.hero-flower-wrap {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 1 / 1;
  margin-left: auto;
  transform: scale(0.9);
  transform-origin: center right;
  overflow: visible !important;
}

/* FLOR = REFERENT */
.hero-flower {
  position: absolute;
  inset: 0;
  overflow: visible !important;
}

/* SVG */
.hero-flower-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible !important;
}

/* ROTACIÓ NOMÉS DE LA MÀSCARA */
.flower-mask-rotator {
  will-change: transform;
}

/* ICONA COPYRIGHT – ANCORADA CORRECTAMENT */
.hero-copyright {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  transform: translate(35%, 20%);
  background-image: url('https://pacem.cat/wp-content/uploads/2025/12/C-copiright.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 9999;
  pointer-events: none;
}

/* =====================================================
   PATH TEXT – SOTA DEL HERO (CORRECTE)
   ===================================================== */
.curved-text-wrapper {
  position: absolute;
  bottom: 100px;
  right: 60px;
  z-index: 10;
  pointer-events: none;
}
.curved-text {
  width: 600px;
  height: auto;
  display: block;
}

/* ADAPTACIÓ MÒBIL */
@media (max-width: 768px) {
  .curved-text-wrapper {
    right: 10px;
    top:-50px;
    left: auto;
    bottom: 00px;
  }
  .curved-text {
    width: 90%;
    max-width: 400px;
  }
}

/* ==========================
   H2 DRAW LINE – FRONTEND
   ========================== */
.h2-draw-wrap {
  position: relative;
  overflow: visible;
}

/* H2 = capa superior */
.h2-draw {
  position: relative;
  z-index: 2;
}

/* SVG sota l’H2 */
.h2-draw-line {
  z-index: 1;
  width: 120%;
  height: 2em;
  margin: -1em 0 0 -6%;
  display: block;
  pointer-events: none;
}

/* Animació INACTIVA per defecte */
.h2-draw-line .draw-path {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}

/* Quan entra al viewport */
.h2-draw-line.is-visible .draw-path {
  animation: draw-line 1.2s ease-out forwards;
}


@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

/* ==========================
   ICON SYSTEM – ELEMENTOR (FIX)
   ========================== */

/* Icona blanca fixa */
.elementor-widget-icon.icon-white .elementor-icon svg,
.elementor-widget-icon.icon-white .elementor-icon svg path {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Icona amb color accent */
.elementor-widget-icon.icon-accent .elementor-icon svg,
.elementor-widget-icon.icon-accent .elementor-icon svg path {
  fill: var(--e-global-color-primary) !important;
  stroke: var(--e-global-color-primary) !important;
}

/* Icona que hereta el color del text */
.elementor-widget-icon.icon-inherit .elementor-icon svg,
.elementor-widget-icon.icon-inherit .elementor-icon svg path {
  fill: currentColor !important;
  stroke: currentColor !important;
}


/* ==============================
   QUI SOM
   ============================== */
   
   .quote-yellow {
  color: #FEBA35;
}

.circle-container {
  position: absolute;
  left: calc((100vw - 100%) / -2 - 200px); /* Era -200px, ara -300px */
  top: 50%;
  transform: translateY(-50%);
  width: 400px;
  height: 800px;
  pointer-events: none;
  z-index: 10;
  overflow: visible;
}
.animated-circle {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.moving-dot {
  transition: all 0.1s ease-out;
}

/* Pantalles mitjanes */
@media (max-width: 1440px) {
  .circle-container {
    left: -500px;
  }
}

/* Pantalles petites */
@media (max-width: 1024px) {
  .circle-container {
    left: -280px;
  }
}

/* Tauletes */
@media (max-width: 768px) {
  .circle-container {
    display: none; /* Amaga el cercle en mòbil si vols */
  }
}

/* Quan entres a la zona, tots baixen */
.mem-list:hover .mem-item {
  opacity: 0.3 !important;
  transition: opacity 0.25s ease;
}

/* MEMORIA */

.mem-list .mem-item:hover {
  opacity: 1 !important;
}

.mem-item {
  cursor: pointer !important;
}

.mem-item * {
  cursor: pointer !important;
}

/* Hover del CONTENIDOR → estil del botó */
.mem-item:hover .elementor-button {
  background: transparent !important;
  color: #FEBA35 !important;
  border: 2px solid #FEBA35 !important;
}


.img-stroke {
  position: relative;
  display: inline-block;
}

/* Traç desplaçat a l'esquerra i avall */
.img-stroke::after {
  content: "";
  position: absolute;

  /* MIDA del traç (quasi igual que la imatge) */
  top: 12px;        /* més avall */
  left: -14px;      /* cap a l'esquerra */
  right: 6px;
  bottom: -18px;    /* més avall */

  border: 5px solid #FEBA35;
  border-radius: 35px;

  z-index: 0;
  pointer-events: none;
}

/* Imatge per sobre */
.img-stroke img {
  position: relative;
  z-index: 2;
  border-radius: 35px;
}

/* Estat inicial: stroke ocult */
.img-stroke::after {
  opacity: 0;
  transform: translate(-10px, 10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Quan entra al viewport */
.img-stroke.is-visible::after {
  opacity: 1;
  transform: translate(0, 0);
}

/* Sticky tabs */
.custom-tabs-pills .e-n-tabs-heading {
  position: sticky;
  top: 120px;              /* ajusta segons header */
  align-self: flex-start;  /* IMPORTANT en layouts flex */
}

/* =========================================================
   RESET (treu estils visuals d’Elementor del tab)
   ========================================================= */
.custom-tabs-pills .e-n-tab-title {
  position: relative;
  overflow: hidden;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0.75em 1.25em !important;
  margin: 0 !important;
}

/* =========================================================
   VARIABLES DE COLOR PER ESTAT
   ========================================================= */
.custom-tabs-pills .e-n-tab-title {
  --tab-color: #FFEFBF; /* normal */
}

.custom-tabs-pills .e-n-tab-title[aria-selected="true"] {
  --tab-color: #FEBA35; /* actiu */
}

/* =========================================================
   LÍNIA CENTRAL FIXA (color uniforme, mai opacitat)
   ========================================================= */
.custom-tabs-pills .e-n-tab-title::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  height: 10px;
  background-color: var(--tab-color);
  border-radius: 999px;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
}

/* =========================================================
   PASTILLES (8 exactes, NO-REPEAT, moviment smooth)
   ========================================================= */
.custom-tabs-pills .e-n-tab-title::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--tab-color);
  -webkit-mask-image: url("https://pacem.cat/wp-content/uploads/2025/12/tabs-pills2.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: auto 100%;
  -webkit-mask-position: right center;
  mask-image: url("https://pacem.cat/wp-content/uploads/2025/12/tabs-pills2.svg");
  mask-repeat: no-repeat;
  mask-size: auto 100%;
  mask-position: right center;
  transition:
    -webkit-mask-position 0.6s cubic-bezier(.4,0,.2,1),
    mask-position 0.6s cubic-bezier(.4,0,.2,1);
  z-index: 1;
  pointer-events: none;
}

/* TEXT SEMPRE PER SOBRE */
.custom-tabs-pills .e-n-tab-title > * {
  position: relative;
  z-index: 2;
}

/* =========================================================
   ACTIU = pastilles a l’esquerra (i color fort ja via var)
   ========================================================= */
.custom-tabs-pills .e-n-tab-title[aria-selected="true"]::before {
  -webkit-mask-position: left center;
  mask-position: left center;
}

/* =========================================================
   HOVER (NOMÉS si NO és actiu):
   - manté color normal
   - mou pastilles a l’esquerra
   ========================================================= */
.custom-tabs-pills .e-n-tab-title:not([aria-selected="true"]):hover::before {
  -webkit-mask-position: left center;
  mask-position: left center;
}


/* ESPAI PREVENCIO */

.elementor-element-e49eafd, 
.elementor-element-e49eafd > .e-con-inner {
    overflow: visible !important;
    align-items: flex-start !important; /* Evita que la sidebar s'estiri fins a baix */
}

.elementor-element-70af483.sidebar-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 170px !important; /* 150px header + 20px marge */
    height: auto !important; /* Obligatori perquè no ocupi tota la columna */
    align-self: flex-start !important;
    z-index: 10;
}

html, body {
    overflow-x: clip !important; /* Evita el ball horitzontal */
}


.scroll-rotate img,
.scroll-rotate .elementor-icon,
.scroll-rotate .elementor-icon svg {
  display: inline-block;
  will-change: transform;
  transform-origin: 50% 50%;
  transition: transform 0.1s linear;
}

@media (max-width: 768px) {
  .custom-tabs-pills .e-n-tab-title {
    margin-top: 0.5em !important;
    margin-bottom: 0.51em !important;
    margin-bottom: 12px; /* separació ENTRE pastilles */
  }
}


/* ===============================
   TITLES – TREURE MAJÚSCULES (GLOBAL TYPO)
   =============================== */
.hfe-post-title,
.hfe-post-title a {
  --e-global-typography-primary-text-transform: none;
  --e-global-typography-text-transform: none;
  text-transform: none !important;
}

/* ===============================
   POST CARD – CONTENIDOR
   =============================== */
.hfe-post-card {
  position: relative;
}

/* ===============================
   READ MORE – ABAIX A LA DRETA
   =============================== */
.hfe-post-card a.hfe-read-more {
  position: absolute;
  right: 24px;
  bottom: 24px;

  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;

  background-color: #FEBA35;
  color: #1C1405 !important;

  border: 2px solid #FEBA35;
  text-decoration: none;
  font-weight: 500;

  transition: all 0.25s ease;
}

.hfe-post-card a.hfe-read-more:hover {
  background-color: transparent;
  color: #FEBA35 !important;
  border-color: #FEBA35;
}

/* Evitar solapament amb el text */
.hfe-post-excerpt {
  padding-bottom: 56px;
}


/* =========================
   CONTENIDOR BASE
========================= */

.card-cta {
    background-color: #FEBA35 !important;
    border: 2px solid #FEBA35;
    border-radius: 35px;
    transition: all 0.35s ease;
    cursor: pointer;
}

/* Elimina qualsevol subratllat */
.card-cta,
.card-cta * {
    text-decoration: none !important;
}

/* Transicions suaus per text i icona */
.card-cta h1,
.card-cta h2,
.card-cta h3,
.card-cta p,
.card-cta .elementor-heading-title,
.card-cta svg,
.card-cta svg * {
    transition: all 0.35s ease;
}


/* =========================
   HOVER DEL CONTENIDOR
========================= */

.card-cta:hover {
    background-color: transparent !important;
    border: 2px solid #FEBA35;
}


/* =========================
   TEXT EN HOVER
========================= */

.card-cta:hover h1,
.card-cta:hover h2,
.card-cta:hover h3,
.card-cta:hover p,
.card-cta:hover .elementor-heading-title {
    color: #FEBA35 !important;
}


/* =========================
   ICONA COLOR EN HOVER
========================= */

.card-cta:hover .elementor-widget-icon.icon-white .elementor-icon svg,
.card-cta:hover .elementor-widget-icon.icon-white .elementor-icon svg path {
    stroke: #FEBA35 !important;
    fill: #FEBA35 !important;
}



/* =========================
   ANIMACIÓ FLETXA
========================= */

.arrow-icon {
    transition: transform 0.35s cubic-bezier(.4,0,.2,1);
}

/* Quan hoveres el contenidor, no la icona */
.card-cta:hover .arrow-icon {
    transform: translate(10px, -10px);
}