/*
Theme Name: Aplitec Child
Theme URI: https://aplitecinformatica.com
Template: astra
Author: Aplitec Informàtica
Author URI: https://aplitecinformatica.com
Description: .
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.11.15.1763365911
Updated: 2025-11-17 08:51:51

*/

/* === HEADER STICKY === */
header.site-header {
  position: sticky!important;
  top: 0;
  z-index: 999!important;
  background: #FAFAFA!important;
  transition: all 0.3s ease;
}

/* === Reduïm marges laterals del header === */
.site-primary-header-wrap .ast-container,
.ast-primary-header-bar .ast-container,
.site-header-primary-section-left .ast-container {
  max-width: 90%;     /* ocupa gairebé tota l’amplada */
  margin-left: auto;
  margin-right: auto;
  padding-left: 50px; /* ajusta segons t’agradi */
  padding-right: 50px;
}

/* === MAIN MENU WRAP === */
#ast-hf-menu-1,
.main-header-menu {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 28px;             /* espai entre elements */
  flex-wrap: nowrap;     /* evita que faci 2 files */
  white-space: nowrap;
  padding-top: 10px;
}

.ast-primary-header-bar .main-navigation {
  margin-left: 0;
  margin-right: auto;
}

/* === MAIN MENU ITEMS === */
.main-header-menu .menu-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  padding: 12px 18px;
  padding-left: 26px; 
  min-width: 120px;
  text-align: center;
  box-sizing: border-box;
}

/* Evitem el "salt" quan passa a bold: */
.main-header-menu .menu-link::after {
  content: attr(data-text);
  font-weight: 700;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* === HOVER I ACTIU === */
.main-header-menu .menu-link:hover,
.main-header-menu .current-menu-item > .menu-link {
  font-weight: 500; /* mantenim el mateix pes */
  -webkit-text-stroke: 0.5px currentColor;
  text-stroke: 0.5px currentColor;
  letter-spacing: -0.01em; /* compensació òptica */
}

/* === ICONA ESTRELLA === */
.main-header-menu .menu-link::before {
  content: "";
  position: absolute; 
  left: 8px;
  width: 16px;
  height: 16px;
  background-image: url("https://wearehelenagency.com/wp-content/uploads/2025/10/Quart_Estrella_HA-2.svg");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .15s ease, transform .15s ease;
}

/* Mostrem la estrella en hover o actiu */
.main-header-menu .menu-link:hover::before,
.main-header-menu .current-menu-item > .menu-link::before {
  opacity: 1;
  transform: translateX(0);
}
/* Fixar el hero PER SOTA */
.hero-under {
    position: fixed !important;
    top: 95px;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0 !important;
}

/* reset per defecte a totes les pàgines */
#content, #primary, .site-content { margin-top: 0; }

/* aplica només a la home */
.home #content,
.home #primary,
.home .site-content,
.front-page #content,
.front-page #primary,
.front-page .site-content {
  margin-top: 100vh;
}


/* === HERO MASK – border radius invertit alineat al contenidor === */
#hero-mask {
  /* Variables globals */
  --gutter: 50px;   /* distància lateral desktop */
  --circle: 13px;   /* diàmetre del forat */
  --top: 6px;       /* desplaçament vertical */
  position: relative;
  width: 100%;
  height: calc(var(--circle) + var(--top) + 4px);
  z-index: 999;
  pointer-events: none;
  margin-bottom: -5px;   /* enganxat al següent bloc */
  line-height: 0;
  background: transparent;
}

#hero-mask::before,
#hero-mask::after {
  content: '';
  position: absolute;
  top: var(--top);
  width: var(--circle);
  height: var(--circle);
}

#hero-mask::before {
  left: var(--gutter);
  background: radial-gradient(circle at top right, transparent var(--circle), #FAFAFA var(--circle));
}

#hero-mask::after {
  right: var(--gutter);
  background: radial-gradient(circle at top left, transparent var(--circle), #FAFAFA var(--circle));
}

/* ======== Responsive ======== */
/* Tablet */
@media (max-width: 1024px) {
  #hero-mask {
    --gutter: clamp(36px, 5vw, 50px);
    --circle: 18px;
    --top: 5px;
    margin-bottom: -5px;
  }
}

/* Mòbil (contenidor de 90vw ⇒ marge 5vw) */
@media (max-width: 768px) {
  #hero-mask {
    --gutter: 5vw;
    --circle: 13px;
    --top: 4px;
    margin-bottom: -5px;
  }
}

/* Mòbil petit */
@media (max-width: 480px) {
  #hero-mask {
    --gutter: 5vw;
    --circle: 14px;
    --top: 3px;
    margin-bottom: -5px;
  }
}

/* ===== Seccio ===== */
.sec-impacto {
  position: relative;
  text-align: center;
}
.impacto-wrap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
/* ===== Heading ===== */
.impacto{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.2px;
  font-size: clamp(32px, 6vw, 70px);
  margin: 0 0 28px 0;
  color: #000;
  text-align: center;
  position: relative;
  z-index: 2;
}
.impacto .strong.agrandir{
  font-family: "Agrandir", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 6.8vw, 90px);
  color: #000;
}
/* ===== Contenidor de l'estrella ===== */
.star-crop{
  position: relative;
  height: 210px;
  overflow: hidden;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  -webkit-mask-image: linear-gradient(to top, #FAFAFA 0%, #FAFAFA 70%, transparent 100%);
  mask-image: linear-gradient(to top, #FAFAFA 0%, #FAFAFA 70%, transparent 100%);
}
/* ===== Estrella principal ===== */
.star-main{
  position: absolute;
  width: 420px;
  bottom: 0;
  transform-origin: center center;
  will-change: transform;
  pointer-events: none;
  z-index: 999!important;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* ===== Fons d'estrelles ===== */
.stars-bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.stars-bg .bg-star{
  position: absolute;
  opacity: 0;
  animation: starTwinkle ease-in-out infinite;
  z-index: 0;
  will-change: opacity, transform;
}
@keyframes starTwinkle{
  0%{
    opacity: 0; 
    transform: scale(0.7) rotate(0deg);
  }
  15%{
    opacity: 0.3; 
    transform: scale(1) rotate(20deg);
  }
  50%{
    opacity: 0.3; 
    transform: scale(1.05) rotate(45deg);
  }
  85%{
    opacity: 0.3; 
    transform: scale(1) rotate(70deg);
  }
  100%{
    opacity: 0; 
    transform: scale(0.7) rotate(90deg);
  }
}

@media (max-width: 768px) {
  .star-main {
    bottom: 100px !important; /* abans 0 → ara més amunt */
    width: clamp(220px, 60vw, 300px); /* opcional: una mica més petita */
  }

  .stars-bg { 
    overflow: hidden; /* evita que surtin fora visualment */
  }

  .bg-star {
    max-width: 10vw;
    transition: opacity .3s ease;
    will-change: opacity, transform;
  }
}



/* ===== Secció Helena Hero ===== */
.ha-hero {
  position: relative;
  text-align: center;
}
.ha-hero__wrap {
  position: relative;
  max-width: 1900px;
  margin: 0 auto;
  padding: 40px 24px 0;
}

/* ===== Estrella (ara .star-about) ===== */
.ha-hero {
  position: relative; /* necessari per posicionar els fills absoluts */
  text-align: center;
}

.ha-hero__wrap {
  position: relative;
  max-width: 1900px;
  margin: 0 auto;
  padding: 40px 24px 0;
}

.ha-hero__star-crop {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 80px;         /* mou el “crop” cap avall → estrella més amunt */
  width: 100%;
  max-width: none;
  height: 350px;        /* alçada visible (tall inferior) */
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.star-about { 
  position: absolute;
  max-width: none !important;
  width: clamp(800px, 75vw, 900px);
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: center center;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 0;
}

/* ===== Imatge (capa mitja) ===== */
.ha-hero__img {
  position: relative;
  z-index: 2;
  width: min(460px, 90vw);
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 12px !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
}

/* ===== Logo (a sobre de tot) ===== */
.ha-hero__logo {
  position: relative;
  z-index: 4;
  display: block;
  width: min(820px, 92vw);
  margin: -170px auto 0;
  pointer-events: none;
}

/* ===== Degradat sota el logo (ARREGLAT) ===== */
.ha-hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + 40px);
  height: 180px; /* ← treta la “¡” que trencava la regla */
  background: linear-gradient(to bottom, transparent 0%, #FAFAFA 100%);
  z-index: 3; /* per sobre de la imatge i de l’estrella, però sota del logo */
  pointer-events: none;
  mix-blend-mode: normal;
  will-change: opacity, transform;
}

/* ===== Responsiu ===== */

/* Tablet */
@media (max-width: 1024px) {
  .ha-hero__star-crop { height: 300px; bottom: 40px; }
  .star-about { width: clamp(720px, 72vw, 820px); }
  .ha-hero__img { width: min(420px, 88vw); }
  .ha-hero__logo { width: min(720px, 92vw); margin-top: -150px; }

  .ha-hero__fade { 
    top: calc(50% + 30px);
    height: 160px;
  }
}

/* ==== Ajust final per a mòbil ==== */
@media (max-width: 768px) {
  /* El crop és més ample que el viewport per no tallar la star */
  .ha-hero__star-crop {
    width: 100vw;          /* afegeix marge lateral invisible */
    left: 50%;
    transform: translateX(-50%);
    height: 200px;
    bottom: 20px;
    overflow: hidden;
  }

  /* Estrella dins amb ample total */
  .star-about {
    width: clamp(360px, 90vw, 520px); /* una mica més petita */
    top: -20px;
  }

  /* Logo una mica més avall per respirar */
  .ha-hero__logo {
    width: min(560px, 90vw);
    margin-top: -80px; /* abans -100px */
  }

  /* Degradat més avall i més llarg */
  .ha-hero__fade {
    left: 50%;
    width: 100vw;              /* ocupa tot l’ample de la pantalla */
    transform: translateX(-50%); /* la centra perfectament */
  }
}

/* videos petits */
.elementor-element.elementor-widget-video,
.elementor-element.elementor-widget-video > .elementor-widget-container {
  overflow: visible !important;
  z-index: 10; /* assegura que la shadow no quedi tallada per cap altre element */
}

.elementor-video{
    border-radius:12px!important;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

}


/* Servicios*/
.ha-servicios-follow{
  --c-bg:#FAFAFA;
  --c-text:#0D0D0D;
  --c-accent:#293A84;
  --ff-title:'Agrandir', system-ui, sans-serif;
  --ff-body:'Poppins', system-ui, sans-serif;
}
.ha-svcs{ max-width:min(1200px,90vw); margin:0 auto; }

.svc-item{
  position:relative;
  display:grid;
  grid-template-columns:90px 1fr;   /* icona + text */
  gap:24px;
  align-items:center;
  padding:30px 18px;                /* demanat */
  color:var(--c-text);
  background:var(--c-bg);
  transition:background-color .25s ease,color .25s ease;
  border-top:1px solid rgba(13,13,13,.15);
}
.svc-item:last-of-type{ border-bottom:1px solid rgba(13,13,13,.15); }

.svc-icon{ width:90px; height:90px; display:grid; place-items:center; }
.svc-icon img{ width:70px; height:70px; object-fit:contain; display:block; }
.svc-icon .icon-white{ display:none; }

.svc-title{
  margin:0 0 6px;
  font-family:var(--ff-title);
  font-weight:800;
  line-height:1.15;
  font-size:30px;
  color:var(--c-text);
}
.svc-desc{
  margin:0;
  font-family:var(--ff-body);
  font-size:18px;
  line-height:1.55;
  opacity:.9;
}

/* Hover */
.svc-item:hover,
.svc-item.is-hover{
  background:var(--c-accent);
  color:#FAFAFA;
}
.svc-item:hover .svc-title,
.svc-item.is-hover .svc-title{ color:#FAFAFA; }
.svc-item:hover .svc-desc,
.svc-item.is-hover .svc-desc{ opacity:1; }
.svc-item:hover .svc-icon .icon-black,
.svc-item.is-hover .svc-icon .icon-black{ display:none; }
.svc-item:hover .svc-icon .icon-white,
.svc-item.is-hover .svc-icon .icon-white{ display:block; }

/* Emoji follower */
.hover-fly{
  position:fixed;
  left:0; top:0;
  font-size:76px;
  line-height:1;
  pointer-events:none;
  opacity:0;
  transform:translate3d(0,0,0) scale(.98);
  transition:opacity .12s ease,transform .12s ease;
  z-index:9999;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.25));
}
.hover-fly.is-visible{ opacity:1; transform:translate3d(0,0,0) scale(1); }

@media (max-width:768px){
  .svc-item{ grid-template-columns:60px 1fr; gap:16px; padding:24px 14px; }
  .svc-icon{ width:60px; height:60px; }
  .svc-icon img{ width:48px; height:48px; }
  .svc-title{ font-size:22px; }
  .hover-fly{ display:none !important; }
}
@media (prefers-reduced-motion:reduce){
  .hover-fly{ transition:none; }
}


/* ENTRADAS WIDHT */

.single-post .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1300px !important;  /* ajusta a tu gusto */
}
/* Si el tema envuelve el contenido con un contenedor estrecho (Astra, etc.) */
.single-post .ast-container,
.single-post .site-content .container {
  max-width: 100% !important;
}

/* LLISTAT PUNTS ESTRELLA */
.ha-lista-estrella {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  color: #4D4D4D;
}

.ha-lista-estrella li {
  position: relative;
  margin: 14px 0;           /* més espai entre línies */
  padding-left: 42px;       /* espai extra per l’icona més gran */
  line-height: 1.9;         /* línies més airejades */
}

.ha-lista-estrella li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  transform: translateY(-50%);
  width: 22px;              /* mida de la estrella augmentada */
  height: 22px;
  background: url("https://wearehelenagency.com//wp-content/uploads/2025/10/Estrella_HA-1.svg")
              no-repeat center / contain;
}

/* Responsive */
@media (max-width: 768px) {
  .ha-lista-estrella li {
    padding-left: 34px;
    font-size: 16px;
    line-height: 1.8;
  }
  .ha-lista-estrella li::before {
    width: 18px;
    height: 18px;
  }
}

/*boto contacto phone */
.ast-builder-button-wrap{
    margin-bottom: 20px!important;
    margin-top:20px!important;
    
}

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