html, body {
    overflow-x: hidden;
}


/* Fer que les columnes es forcin a la mateixa alçada */
.wp-block-columns.is-layout-flex {
  display: flex;
  align-items: stretch;
}

/* Cada columna serà un contenidor flexible */
.wp-block-columns.is-layout-flex > .wp-block-column {
  display: flex;
}

/* Els Info Box amb la teva classe personalitzada */
.wp-block-columns.is-layout-flex > .wp-block-column .mi-classe-fixa {
  flex: 1;
  display: flex;
  flex-direction: column;
}


.text-acordio {
	text-align: justify;
	font-size: 18px !important;
}

.titol-acordio {
	font-size: 30px !important;
}

.uagb-block-5dfa1983 .wp-block-woocommerce-accordion-header { background: transparent !important; border: 0 !important; box-shadow: none !important; }

.uagb-block-5dfa1983 .accordion-item__toggle,
.uagb-block-5dfa1983 .accordion-item__toggle:hover,
.uagb-block-5dfa1983 .accordion-item__toggle:focus,
.uagb-block-5dfa1983 .accordion-item__toggle:active,
.uagb-block-5dfa1983 .wp-block-woocommerce-accordion-item.is-open .accordion-item__toggle,
.uagb-block-5dfa1983 .accordion-item__toggle[aria-expanded="true"] {
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.uagb-block-5dfa1983 .accordion-item__toggle .accordion-item__toggle-icon { color: inherit !important; }



/* Mantén el mateix color de lletra en tots els estats */
.uagb-block-5dfa1983 .wp-block-woocommerce-accordion-header,
.uagb-block-5dfa1983 .accordion-item__toggle,
.uagb-block-5dfa1983 .accordion-item__toggle:hover,
.uagb-block-5dfa1983 .accordion-item__toggle:focus,
.uagb-block-5dfa1983 .accordion-item__toggle:active,
.uagb-block-5dfa1983 .accordion-item__toggle:focus-visible,
.uagb-block-5dfa1983 .wp-block-woocommerce-accordion-item.is-open .accordion-item__toggle,
.uagb-block-5dfa1983 .accordion-item__toggle[aria-expanded="true"] {
  color: inherit !important;      /* conserva el color que tinguis definit al bloc */
  text-decoration: none !important; /* evita subratllats en hover/focus */
}




/* --- Layout robust --- */
.itinerary-wrap{
  max-width: 1200px;    /* centra i limita amplada */
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); /* nav ampla però no exagerada */
  gap: 32px;
  align-items: start;
}

/* --- Nav d'ancores --- */
.itinerary-nav{
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 120px);
  overflow: auto;              /* evita desbordaments */
  z-index: 2;                  /* per sobre del contingut de la dreta */
}
.itinerary-nav a{
  display: block;
  padding: 10px 12px;
  border-left: 3px solid transparent;
  text-decoration: none;
  opacity: .8;
  line-height: 1.25;
  font-size: 16px;             /* baixa una mica el cos */
  white-space: normal;         /* permet fer salt de línia */
  word-break: normal;          /* NO trenquis dins la paraula */
  overflow-wrap: break-word;   /* …però talla si una paraula és massa llarga */
  transition: opacity .2s, border-color .2s;
}
.itinerary-nav a.is-active{ opacity: 1; border-color: #2b6cb0; font-weight: 700; }

/* --- Seccions de dia --- */
.day-section{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
  scroll-margin-top: 120px;
  position: relative;
  z-index: 1;
  padding-bottom: 32px;
  max-width: 780px;            /* evita línies super llargues */
}
.day-section.is-visible{ opacity: 1; transform: none; }

/* Capçaleres de cada dia: limita mida i evita trencaments lletjos */
.day-section h2, .day-section h3{
  margin: 0 0 12px;
  line-height: 1.2;
  font-weight: 800;
  font-size: clamp(22px, 2.2vw + 12px, 34px); /* mida fluida, sense exagerar */
  word-break: keep-all;
  overflow-wrap: break-word;   /* trenca només si cal */
  hyphens: auto;
}

/* Responsive */
@media (max-width: 1024px){
  .itinerary-wrap{ grid-template-columns: 1fr; }
  .itinerary-nav{
    position: static;
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px;
  }
  .itinerary-nav a{
    border-left: none; border-bottom: 2px solid transparent; flex: 0 0 auto;
  }
  .itinerary-nav a.is-active{ border-bottom-color: #2b6cb0; }
}


.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

h2.visually-hidden {
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: -9999px; /* Manté el text fora de la pantalla */
}


/* Títol */
.contacte-titol {
  font-size: 1rem;      /* ajusta la mida segons disseny */
  font-weight: 700;       /* una mica més marcat */
  margin-bottom: 4px;     /* espai petit sota el títol */
  color: white;         /* color corporatiu (canvia si cal) */


}

/* Llista de contacte */
.contacte-llista {
  list-style: none;       /* treu els punts de la llista */
  margin: 0;
  padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

}

.contacte-llista li {
  margin: 2px 0;          /* espai vertical molt fi entre línies */
  font-size: 1rem;
  color: white;         /* gris fosc llegible */
}

/* Enllaços */
.contacte-llista a {
  color: inherit;         /* mateix color que el text */
  text-decoration: none;  /* treu el subratllat */
}

.contacte-llista a:hover {
  text-decoration: underline; /* subratllat només al hover */
}


/* Configuració per defecte: 3 columnes */
.meves-columnes {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px;
}

/* Quan la pantalla és de menys de 1450px: 1 columna */
@media (max-width: 1450px) {
  .meves-columnes {
    grid-template-columns: 1fr !important;
  }
}



/* Cabeceras de todas las tablas (WooCommerce y contenido) */
.entry-content table thead th,
.entry-content table thead th *,
.wp-block-table thead th,
.wp-block-table thead th *,
.woocommerce table thead th,
.woocommerce table thead th * {
  color: #111827 !important;            /* texto oscuro */
  -webkit-text-fill-color: #111827 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Fondo y borde del thead */
.entry-content table thead th,
.wp-block-table thead th,
.woocommerce table thead th {
  background: #ffffff !important;       /* franja clara */
  border-color: #e5e7eb !important;     /* línea separadora */
}

/* Asegura que los enlaces en th hereden color */
.entry-content table thead th a,
.wp-block-table thead th a,
.woocommerce table thead th a {
  color: inherit !important;
}


/* Títol principal "Detalls de la comanda" */
.woocommerce-order-details__title {
  color: #111827 !important; /* negre o el color de text principal */
}

/* Títols de columnes "Adreça de facturació / enviament" */
.woocommerce-column__title {
  color: #111827 !important;
}





/* ESLOGANS - ESTIL FIX I RESPONSIVE */
#eslogans-cycler {
  top: -2%; /* ajusta segons alçada del header */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  z-index: 9998;
  font-size: 2.2rem;
  font-family: "Segoe UI", sans-serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.2;
  color: white;
  pointer-events: none;
  padding: 0 20px;
}

#eslogans-cycler .eslogan span {
  opacity: 0;
  display: inline-block;
  animation: fadeInSoft 0.6s ease forwards;
}

@keyframes fadeInSoft {
  0% {
    opacity: 0;
    color: rgba(255, 255, 255, 0.2);
  }
  100% {
    opacity: 1;
    color: rgba(255, 255, 255, 0.85);
  }
}


/* Estil per a mòbils */
@media (max-width: 767px) {
  
	#ast-scroll-top {
  display: none !important;
	}
	
  #eslogans-cycler {
    top: -3%;
    font-size: 1rem;
    padding: 0 15px;
  }
	
	#ast-scroll-top {
  display: none !important;
}
}

/* Estil per a tauletes */
@media (min-width: 768px) and (max-width: 1024px) {
	
  #ast-scroll-top {
  display: none !important;
	}

  #eslogans-cycler {
    top: -3%;
    font-size: 1.4rem;
    padding: 0 30px;
  }
	
}


/* ESLOGANS MENORCA- ESTIL FIX I RESPONSIVE */
#eslogans-cycler-menorca {
  top: -2%; /* ajusta segons alçada del header */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  z-index: 9998;
  font-size: 2.2rem;
  font-family: "Segoe UI", sans-serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.2;
  color: white;
  pointer-events: none;
  padding: 0 20px;
}

#eslogans-cycler-menorca .eslogan span {
  opacity: 0;
  display: inline-block;
  animation: fadeInSoft 0.6s ease forwards;
}

/* Estil per a mòbils */
@media (max-width: 767px) {
  
  #eslogans-cycler-menorca {
    top: -3%;
    font-size: 1rem;
    padding: 0 15px;
  }

}

/* Estil per a tauletes */
@media (min-width: 768px) and (max-width: 1024px) {

  #eslogans-cycler-menorca {
    top: -3%;
    font-size: 1.4rem;
    padding: 0 30px;
  }
	
}



/*FI ESLOGANS*/

/*VIDEO*/
.hero-video {
  position: relative;
  height: 100vh;     /* fallback desktop i navegadors sense dvh */
  width: 100%;
  overflow: hidden;
}
/* Mòbil modern: evita el “jump” de la barra d’adreces */
@media (hover: none) and (pointer: coarse) {
  @supports (height: 100dvh) {
    .hero-video { height: 100dvh; }
  }
}

/* Hero 100% pantalla, incloent mòbils moderns */
.hero-video{ height:100vh; min-height:100svh; }
@supports (height: 100dvh){
  .hero-video{ height:100dvh; }
}

.hero-video video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.hero-video::after {
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(255,255,255,0.2) 100%);
}

/* Logo/títol centrat i estable (evita CLS) */
.brand img{ display:block; width:min(910px,85vw); height:auto; }


/* (Header Builder) */
.main-header-bar-wrap,
.site-header {
  top: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}



/*BOTÓT PUJAR*/
#ast-scroll-top {
  display: none !important;
}

/*FLETXA PER BAIXAR*/
/* Fletxa */
.scroll-down-indicator {
  position: absolute;
  bottom: -35%;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  opacity: 0.9;
  z-index: 10;
  cursor: pointer;
	color: #4F78BD;
}

.scroll-down-indicator svg {
  width: 100%;
  height: 100%;
  stroke: white;
  animation: arrowBounce 2s infinite;
  will-change: transform;
  backface-visibility: hidden;
}
@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* Respecta preferència d’animació */
@media (prefers-reduced-motion: reduce){
  .hero-video video{ display:none; }
}


/* Amaga el logo a la pàgina principal */
body.home #logo-condicional { 
  display: none !important; 
}

/* Estil bàsic del logo a la capçalera */
#logo-condicional img{
  max-height: 40px;   /* ajusta l'alçada si cal */
  display: block;
}
#logo-condicional a{
  display: inline-block;
  text-decoration: none;
}

#logo-movil img{
  max-height: 40px;   /* ajusta l'alçada si cal */
  display: block;
}

/* Centrar logo mòbil i tablet */
#logo-movil {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
}


#logo-movil a{
  display: inline-block;
  text-decoration: none;
}

body.home #logo-movil { 
  display: none !important; 
}


/*BOTONS CAPÇALERA*/
.header-auth-buttons {
    display: flex;
    gap: 20px;
    align-items: center;
    position: relative;
}

.auth-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #F7EFE6;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
		font-weight: bold;
}

.auth-btn:hover {
    color: #4F78BD;
}

.auth-btn i {
    font-size: 1.5em;
}

/* Només centrar els botons dins el menú off-canvas mòbil */
.ast-mobile-popup-inner .header-auth-buttons {
    justify-content: center;
    width: 100%;
	
}

.ast-mobile-popup-inner .header-auth-buttons .auth-btn {
    justify-content: center;
    width: auto;
	font-size: 16px;
	margin-top: 10px;
}


/* ========== COTTAISH · Submenú de ESCRITORIO moderno (Astra) ========== */
/* Solo escritorio: móvil/tablet quedan como están */
:root{
  /* Paleta y dimensiones */
  --sub-accent:     #0a66ff;         /* acento para activo/indicador */
  --sub-link:       #0f172a;         /* texto normal */
  --sub-hover:      #ffffff;         /* texto en hover/activo */

  --sub-radius:     14px;            /* radio tarjeta */
  --sub-item-min:   44px;            /* alto mínimo accesible */
  --sub-font:       23px;            /* tamaño de fuente */
  --sub-blur:       12px;            /* desenfoque del panel */

  /* Fondo “glass” y sombras */
  --sub-bg:         rgba(255,255,255,.65);
  --sub-border:     rgba(2,6,23,.08);
  --sub-shadow:     0 18px 40px rgba(2,6,23,.16);
	
}

/* Elimina la línia que Astra afegeix als enllaços de submenú */
.ast-desktop .main-header-menu .sub-menu .menu-link {
  border: none !important;
}


/* Modo oscuro del SO (opcional, automático) */
@media (prefers-color-scheme: dark){
  :root{
    --sub-bg:       rgba(15,23,42,.55);
    --sub-border:   rgba(255,255,255,.10);
    --sub-shadow:   0 18px 40px rgba(0,0,0,.45);
    --sub-link:     #e5e7eb;
    --sub-hover:    #0b1220;
    --sub-accent:   #69a1ff;
  }
}

/* —— ESCRITORIO: panel del submenú ——— */
.ast-desktop .main-header-menu .sub-menu{
  /* Tarjeta flotante “glass” */
  background: var(--sub-bg) !important;
  border: 1px solid var(--sub-border) !important;
  border-radius: var(--sub-radius) !important;
  box-shadow: var(--sub-shadow) !important;
  -webkit-backdrop-filter: blur(var(--sub-blur));
  backdrop-filter: blur(var(--sub-blur));
	
  padding: 8px !important;	
  margin-top: 16px !important;

  /* Tamaño adaptable y seguro en bordes */
  width: max-content !important;
  min-width: 180px !important;
  max-width: min(40ch, 90vw) !important;

  /* Centrado bajo el elemento padre */
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(6px) !important;
  transform-origin: top center !important;

  /* Aparición suave (respetando la lógica de Astra) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}


/* Mostrar el panel cuando Astra lo abra (hover/focus) */
.ast-desktop .main-header-menu .menu-item-has-children:hover > .sub-menu,
.ast-desktop .main-header-menu .menu-item-has-children:focus-within > .sub-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) !important;
}

/* Fallback si el navegador no soporta backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .ast-desktop .main-header-menu .sub-menu{
    background: #ffffff !important;
  }
  @media (prefers-color-scheme: dark){
    .ast-desktop .main-header-menu .sub-menu{ background:#0b1220 !important; }
  }
}

/* —— ESCRITORIO: items del submenú ——— */
.ast-desktop .main-header-menu .sub-menu > li{
  /* Animación en cascada */
  animation: subItemFade .28s ease both;
}
.ast-desktop .main-header-menu .sub-menu > li:nth-child(1){ animation-delay: .02s; }
.ast-desktop .main-header-menu .sub-menu > li:nth-child(2){ animation-delay: .04s; }
.ast-desktop .main-header-menu .sub-menu > li:nth-child(3){ animation-delay: .06s; }
.ast-desktop .main-header-menu .sub-menu > li:nth-child(4){ animation-delay: .08s; }
.ast-desktop .main-header-menu .sub-menu > li:nth-child(5){ animation-delay: .10s; }
.ast-desktop .main-header-menu .sub-menu > li:nth-child(6){ animation-delay: .12s; }
@keyframes subItemFade{
  from{ opacity: 0; transform: translateY(4px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Enlaces: “píldoras” centradas y legibles */
.ast-desktop .main-header-menu .sub-menu .menu-link{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5ch !important;

  min-height: var(--sub-item-min) !important;
  padding: 0 16px !important;

  text-align: center !important;
  white-space: nowrap !important;      /* no parte palabras */
  font-size: var(--sub-font) !important;
  line-height: 1.2 !important;
  color: var(--sub-link) !important;

  background: transparent !important;
  border-radius: calc(var(--sub-radius) - 6px) !important;

  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

/* Hover/activo con look contemporáneo */
.ast-desktop .main-header-menu .sub-menu .menu-link:hover,
.ast-desktop .main-header-menu .sub-menu .current-menu-item > .menu-link{
  color: var(--sub-hover) !important;
  background: color-mix(in oklab, var(--sub-accent) 86%, black 0%) !important; /* degradado sólido moderno */
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(2,6,23,.18);
}


.ast-desktop .main-header-menu .sub-menu .menu-link:hover::after,
.ast-desktop .main-header-menu .sub-menu .current-menu-item > .menu-link::after{
  background: var(--sub-hover) !important;
  opacity: .9;
}

/* Accesibilidad: foco visible para navegación con teclado */
.ast-desktop .main-header-menu .sub-menu .menu-link:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sub-accent) 45%, white 55%) inset,
              0 0 0 2px color-mix(in srgb, var(--sub-accent) 45%, black 55%);
}

/* Caret del item padre más discreto */
.ast-desktop .main-header-menu .menu-item-has-children > .menu-link:after{
  transform: translateY(-1px) scale(.92);
  opacity: .75;
  margin-left: 6px;
}

/* Encabezado transparente de Astra: conserva contraste del submenú */
.ast-transparent-header .main-header-menu .sub-menu .menu-link{
  color: var(--sub-link) !important;
}

/* Si tienes submenús cerca del borde derecho y se cortan, usa este min() */
@media (min-width: 1025px){
  .ast-desktop .main-header-menu .sub-menu{
    max-width: min(48ch, 92vw) !important;
  }
}

/*ICONES INSTA I TIKTOK WHATSAPP*/
:root{ --brand:#041e40; }

/* Contenidor fixes a baix-dreta */
.cottaish-social-fab{
  position: fixed;
  right: clamp(25px, 2vw, 18px);
  bottom: calc(env(safe-area-inset-bottom, 0) + 5px);
  display: flex;
  flex-direction: column;
  z-index: 2147483647 !important;
  pointer-events: none; /* evitem bloquejar clics del fons */
}

/* Botons */
.cottaish-social-fab .fab-item{
  pointer-events: auto;         /* tornem a permetre el clic al botó */
  width: 56px; height: 56px;
  display: grid; place-items: center;
  color: #fff;                  /* color de la icona */
  text-decoration: none;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.cottaish-social-fab .fab-item i{ font-size: 27px; line-height: 1; }

/* Hover/press */
.cottaish-social-fab .fab-item:hover{
  transform: translateY(-2px) scale(1.05);
}


/* Mòbil una mica més gran */
@media (max-width:480px){
	.cottaish-social-fab { gap: 4px; } 
  .cottaish-social-fab .fab-item{ width:40px; height:40px; border-radius:14px; }
  .cottaish-social-fab .fab-item i{ font-size:25px; }
	.cottaish-social-fab{
    right: 10px;                           /* més a la vora */
    bottom: calc(env(safe-area-inset-bottom, 0) + 10px); /* més amunt si hi ha barra/cookies */
  }
}

/* Oculta a impressió */
@media print{ .cottaish-social-fab{ display:none !important; } }


/* Focus global segur: oculta el contorn amb ratolí/tàctil, mantén-lo amb teclat */
:root { --focus-color: #041e40; } /* color corporatiu del focus, canvia’l si vols */

/* No molestar: si el focus NO és "visible" (no ve del teclat), no mostrem res */
*:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Focus accessible quan ve del teclat (Tab, etc.) */
:focus-visible {
  outline: 2px solid var(--focus-color) !important;
  outline-offset: 3px !important;
  /* opcional: lleu radi per a botons/enllaços */
  border-radius: 6px;
}

/* Alguns temes dibuixen anells amb pseudo-elements: neteja’ls si no són focus-visible */
*:focus:not(:focus-visible)::before,
*:focus:not(:focus-visible)::after {
  outline: none !important;
  box-shadow: none !important;
}

/* Redueix l’efecte “flash” en mòbil */
a, button, [role="button"], [tabindex] { -webkit-tap-highlight-color: transparent; }


/* ---------- ABOUT US (sense header/títol; slides ESQ, vídeo DRETA) ---------- */

/* Variables de marca i base */
:root{
  --brand:#041e40;
  --ink:#0f172a;
  --muted:#475569;

  --video-top: 20px;   /* separació superior del vídeo en escriptori */
}

/* ----- Layout 2/3 — 1/3 (slides a l'esquerra, vídeo a la dreta) ----- */
.about-sticky{
  display:grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas: "slides video";
  gap: clamp(16px,2vw,28px);
  align-items: stretch;             
  padding: clamp(24px,4vw,48px) 20px;

  position: relative;
  z-index: 0;

  /* evita padding lateral del builder; preserva només el gap entre columnes */
  padding-inline: 0 !important;
}

#about-sticky h2 {
  font-family: 'Bebas Neue', sans-serif;
}


/* Assignacions robustes d’àrees */
.about-sticky .col{ min-width:0; min-height:0; align-self: stretch; }
.about-sticky .col-right{ grid-area: slides; } /* SLIDES (esquerra, 2/3) */
.about-sticky .col-left{  grid-area: video;  } /* VÍDEO  (dreta, 1/3) */

/* Vídeo i stage visibles des de l’inici */
.about-sticky .video-frame,
.about-sticky .sticky-stage{
  opacity: 1;
  transform: none;
}

/* ----- Vídeo (dreta) ----- */
.video-frame{
  position: sticky;
  top: var(--video-top);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.10);
  contain: layout style paint;
}
.video-frame video{
  display:block;
  width:100%;
  height:auto;
}

/* ----- Sticky reveal (esquerra) ----- */
.sticky-wrapper{
  height: calc(var(--slides, 1) * 100vh); /* 1 slide = 1 viewport */
  position: relative;
}

/* Mòbil modern: mateix càlcul amb dvh per estabilitat */
@media (hover: none) and (pointer: coarse){
  @supports (height: 100dvh){
    .sticky-wrapper{ height: calc(var(--slides, 1) * 100dvh); }
  }
}

/* Entre 1000px i 1400px */
@media (max-width: 1100px) and (min-width: 900px) {
  #about-sticky .slides p {
    font-size: 1.2rem; /* una mica més petit */
   
  }
}

.sticky-stage{
  position: sticky;
  top: var(--vf-top, 0px);
  height: var(--vf-height, 100vh);
  z-index: 1;

  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.10);
  background: #0b1220;
}


/* Mòbil modern: usa dvh quan existeix */
@media (hover: none) and (pointer: coarse){
  @supports (height: 100dvh){
    .sticky-stage{
      height: var(--vf-height, 100dvh);
      min-height: 100dvh;
    }
  }
}


/* ----- Fons: imatges difuminades + crossfade ----- */
.bg-layer{
  position: absolute;
  inset:0;
  overflow:hidden;
}
.bg-layer .bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  filter: blur(10px);
  transform: scale(1.08);
  opacity:0;
  transition: opacity .45s ease;
  will-change: opacity, transform;
}
.bg-layer .bg.active{ opacity:.9; }
.bg-layer .bg-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 120% at 50% 30%,
      transparent 0%,
      rgba(0,0,0,.35) 60%,
      rgba(0,0,0,.60) 100%);
  pointer-events:none;
}

/* ----- Capa de contingut (slides) ----- */
.slides{
  position: relative;
  z-index: 2;
  height:100%;
  display:grid;
  place-items:center;
  padding: clamp(16px,3vw,36px);
}
.slide{
  position:absolute;
  width:100%;
  max-width: 720px;
  text-align:left;
  color:#fff;
  opacity:0;
  transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease;
  will-change: opacity, transform;
}
.slide.active{
  opacity:1;
  transform: translateY(0);
}

/* Cada slide ocupa tota l’alçada disponible de la stage */
.slides .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;       /* ✅ ara sí té tota l’alçada */
  color:#fff;
  opacity:0;
  transition: opacity .4s ease, transform .4s ease;
  will-change: opacity, transform;
}

/* Slide activa visible */
.slides .slide.active {
  opacity:1;
  transform:none;
}

/* Slide activa visible */
.slides .slide.active {
  opacity: 1;
  transform: none;
}

/* Títol amunt (desktop) */
.slides .slide h2 {
  position: absolute;
  top: 8%;
  left: 12%;                /* ✅ punt de referència horitzontal */
  right: 5%;
  margin: 0;
  font-size: clamp(46px, 4.5vw, 64px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: left;
}

/* Text centrat verticalment (desktop) */
.slides .slide p {
  position: absolute;
  top: 50%;
  left: 12%;                 /* ✅ mateix marge que el títol */
  transform: translateY(-50%); /* només movem verticalment */
  margin: 0;
  width: 100%;                /* 100% - (12%+12%) per mantenir alineació */
  max-width: 70ch;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.6;
  text-align: justify;
  font-weight: 500;
  color: rgba(255,255,255,.95);
}

/* --------- Responsiu: Tablet --------- */
@media (max-width: 1400px){
  .slides .slide h2 {
    top: 6%;
    left: 6%;
    right: 6%;
    font-size: clamp(34px, 6vw, 44px);
    line-height: 1.25;
  }

  .slides .slide p {
    left: 6%;                  /* ✅ alineat amb el títol */
    width: 88%;
    font-size: clamp(18px, 4vw, 22px);
    line-height: 1.5;
  }
}

/* --------- Responsiu: Mòbil --------- */
@media (max-width: 600px){
  .slides .slide h2 {
    top: 6%;
    left: 8%;
    right: 8%;
    font-size: clamp(24px, 8vw, 36px);
    line-height: 1.3;
    text-align: center;           /* mantenim alineació amb el text */
  }

  .slides .slide p {
    left: 8%;                   /* ✅ mateix marge que el títol */
    width: 84%;
    font-size: clamp(15px, 4.2vw, 18px);
    line-height: 1.4;
  }
}



/* Ajust fi d’espais dins del panell d’slides */
.slides{ padding: clamp(12px,2vw,20px) clamp(8px,1.6vw,16px); }
.slide{ max-width:none; }
.slide h3{ font-size: clamp(20px, 2.4vw, 30px); }
.slide p { font-size: clamp(15px, 1.2vw, 18px); }

/* ----- Preferència d’usuari per reduir animacions ----- */
@media (prefers-reduced-motion: reduce){
  .about-sticky{ transition: none !important; opacity: 1 !important; }
  .about-sticky .video-frame,
  .about-sticky .sticky-stage,
  .bg-layer .bg,
  .slide{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ----- Responsiu: TAULETA i MÒBIL ----- */
@media (max-width: 900px){
  .about-sticky{
    grid-template-columns: 1fr;
    grid-template-areas: "slides";
    gap: clamp(12px,2.4vw,20px);
  }

  .about-sticky .col-right{ grid-area: slides; }
  .about-sticky .col-left{  grid-area: auto;  }

  .about-sticky .col-left,
  .about-sticky .video-frame{
    display:none !important;
  }

  .sticky-wrapper{ height: auto; } 
  .sticky-stage{
    position: sticky !important;
    top: var(--vf-top, 0px);
    height: var(--vf-height, 100vh) !important;
  }

  .slide h2{ font-size: clamp(18px, 5vw, 26px); }
  .slide p { font-size: clamp(14px, 3.6vw, 16px); }
}

/* ----- Micro-ajust per pantalles molt grans ----- */
@media (min-width: 1440px){
  .slide{ max-width: 820px; }
}




/* ---------- Franja sticky 100vw sincronitzada amb les slides (imatge centrada, sense pan) ---------- */
:root{
  --hband-top: 10px;                            /* separació superior de la franja */
  --hband-h: clamp(150px, 25vh, 300px);         /* ALÇADA EDITABLE */
  --hband-radius: 16px;
  --hband-shadow: 0 12px 40px rgba(0,0,0,.12);
  --hband-on: #ffffff;
}


.hband-sticky{
  position: relative;
  padding: clamp(16px, 3vw, 32px) 0;
}

/* >>> Ara l’alçada només la del contingut, sense sincronització */
.hband-wrapper{
  position: relative;
  height: auto !important;
}

/* Franja sticky */ .hband-window{ position: sticky; top: var(--hband-top); height: var(--hband-h); width: 100vw; margin-left: calc(50% - 50vw); /* centra respecte el viewport */ border-radius: var(--hband-radius); overflow: hidden; box-shadow: var(--hband-shadow); background: #000; contain: layout paint; z-index: 5; }

/* Classe afegida quan ja ha aparegut la primera vegada */
.hband-window.hband-has-appeared {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  transition: none !important; /* evitem que faci "fade out" o baixada */
}

/* Imatge centrada */
.hband-img{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: auto;
  max-width: none;
  min-height: 100%;
  pointer-events: none;
  user-select: none;
}

/* Overlay (comptador) */
.hband-overlay{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  text-align: center; color: var(--hband-on);
  pointer-events: none; padding: 8px;
}
.hband-counter{
  font-weight: 800; line-height: 1;
  font-size: clamp(75px, 3.2vw, 28px);

}
.hband-sub{
  margin-top: .25em; font-weight: 700;
  font-size: clamp(16px, 3.2vw, 28px);
  opacity: .96;
}
.hband-note{
  margin-top: .1em; font-weight: 600;
  font-size: clamp(13px, 2.4vw, 18px);
  opacity: .9;
}

/* Responsiu */
@media (max-width: 900px){
  :root{ --hband-top: 12px; }
  .hband-window{ height: clamp(120px, 28vh, 260px); }
  .hband-counter{ font-size: clamp(36px, 16vw, 96px); }
  .hband-sub{ font-size: clamp(15px, 5vw, 22px); }
  .hband-note{ font-size: clamp(12px, 4vw, 16px); }
}

/* Força que el contenidor del bloc fix tingui només l’alçada del seu contingut */
#hband-sticky,
#hband-sticky .wp-block-uagb-container,
#hband-sticky .uagb-section__wrap,
#hband-sticky .wp-block-cover {
  min-height: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 100% !important;
}


/*------HISOTRIES-------*/
.story-device {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.device-frame {
  position: relative;
  width: 320px;   /* ample iPhone */
  height: 568px;  /* alt iPhone */
  border: 9px solid #000;
  border-radius: 36px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  overflow: hidden;
  background: #000;
}

.device-frame::before {
  content: "";
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 6px;
  border-radius: 3px;
  background: #222; /* notch simulada */
}

.device-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 24px;
}


/* Fa que les històries es redueixin en pantalles petites */
@media (max-width: 480px) {
  .device-frame {
  position: relative;
  width: 240px;   /* ample iPhone */
  height: 410px;  /* alt iPhone */
  border: 7px solid #000;
  border-radius: 36px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  overflow: hidden;
  background: #000;
}
	.device-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 24px;
}
}

@media (min-width: 1400px) {
  .wp-block-uagb-columns .uagb-columns__wrap {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}

@media (min-width: 750px) and (max-width: 1399px) {
  .wp-block-uagb-columns .uagb-columns__wrap {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 749px) {
  .wp-block-uagb-columns .uagb-columns__wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/*********FOOOOTER***********/


/* 1) Asegura flex en el UL del footer de Astra */
.footer-nav-wrap .astra-footer-horizontal-menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;       /* por si hay varias líneas */
  gap: 0;                /* el espacio lo daremos con padding en li+li */
}

/* 2) Inserta “barra” antes de cada li a partir del segundo */
.footer-nav-wrap .astra-footer-horizontal-menu li + li {
  position: relative;
  padding-left: 14px;    /* espacio a la izquierda del separador */
  margin-left: 14px;     /* espacio a la derecha del separador */
}


.footer-nav-wrap .astra-footer-horizontal-menu li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1em;           /* altura similar a la línea de texto */
  background: rgba(255,255,255,.6); /* color del separador */
}


/* Opcional: quita separadores en móvil/apilado */
@media (max-width: 640px) {
  .footer-nav-wrap .astra-footer-horizontal-menu {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-nav-wrap .astra-footer-horizontal-menu li + li {
    margin-left: 0;
    padding-left: 0;
  }
  .footer-nav-wrap .astra-footer-horizontal-menu li + li::before {
    display: none;
  }
}


/*		TARGETES!!!!!!!!!!!!! */


/********* TARGETES — INClOS (BLAU) i MLLK (GROC) — variant -2 mateix color *********/

/* =========================
   Variables de color
   ========================= */
:root{
  --scrim: rgba(0,0,0,.35);

  /* INClOS (BLAU) */
  --brand: #1e40af;              /* blau únic per a totes les INClOS */
  --brand-mob-rgb: 14,165,233;   /* #0ea5e9 – tint mòbil */

  /* MLLK (GROC) */
  --brand-mllk: #FFD23F;         /* groc únic per a totes les MLLK */
  --brand-mllk-mob-rgb: 255,210,63;
}

/* =========================
   Targeta base (comú)
   ========================= */
.card-inclos,
.cardmllk-inclos{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff; overflow: hidden;
  transition: transform .25s ease;
  container-type: inline-size; /* títol fluid */
  -webkit-tap-highlight-color: transparent;
}
.card-inclos:hover,
.cardmllk-inclos:hover{ transform: translateY(-2px); }

/* ── Capes ───────────────── */
.card-inclos::before,
.cardmllk-inclos::before{
  content:""; position:absolute; inset:0;
  opacity:.5; transition: opacity .25s, background .25s;
}
.card-inclos::after,
.cardmllk-inclos::after{
  content:""; position:absolute; inset:0;
  opacity:0; transition: opacity .25s;
}

/* —— COLORS CAPA SÒLIDA (::after) — variant -2 mateix color —— */
/* INClOS (blau) — aplica a .card-inclos i també a .card-inclos-2 */
.card-inclos::after,
.card-inclos.card-inclos-2::after{
  background: var(--brand) !important;
}

/* MLLK (groc) — aplica a .cardmllk-inclos i també a les variants -2 */
.cardmllk-inclos::after,
.cardmllk-inclos.cardmllk-inclos-2::after,
.cardmllk-inclos.cardsmllk-inclos-2::after{
  background: var(--brand-mllk) !important;
}

/* —— TINT MÒBIL (::before) — variant -2 mateix tint —— */
/* INClOS (blau) */
.card-inclos::before,
.card-inclos.card-inclos-2::before{
  background:
    linear-gradient(rgba(var(--brand-mob-rgb), .42), rgba(var(--brand-mob-rgb), .42)),
    linear-gradient(rgba(28,36,107), rgba(28,36,107)) !important;
}

/* MLLK (groc) */
.cardmllk-inclos::before,
.cardmllk-inclos.cardmllk-inclos-2::before,
.cardmllk-inclos.cardsmllk-inclos-2::before{
  background:
    linear-gradient(rgba(var(--brand-mllk-mob-rgb), .42), rgba(var(--brand-mllk-mob-rgb), .42)),
    linear-gradient(rgba(28,36,107), rgba(28,36,107)) !important;
}

/* =========================
   Contingut
   ========================= */
.card-inclos .card-inclos__content,
.cardmllk-inclos .card-inclos__content{
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: justify;
}
.card-inclos .card-inclos__title,
.cardmllk-inclos .card-inclos__title{
  margin:0; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  text-wrap:balance; word-break:break-word; hyphens:auto;
}

/* Descripció — MÒBIL (visible per defecte) */
.card-inclos .card-inclos__desc,
.cardmllk-inclos .card-inclos__desc{
  position: static !important; left:auto !important; right:auto !important; bottom:auto !important;
  opacity: 1 !important; transform: none !important; pointer-events: auto !important;
  transition: opacity .25s, transform .25s, position 0s .25s !important;
}

/* =========================
   ESCRIPTORI (≥1024px): només títol en repòs; text en hover/focus
   ========================= */
@media (min-width: 1024px){

  /* En repòs: treu tint i amaga capa sòlida */
  .card-inclos::before,
  .cardmllk-inclos::before{
    opacity: 0 !important;
    background: transparent !important;
  }
  .card-inclos::after,
  .cardmllk-inclos::after{
    opacity: 0 !important;
  }

  /* Layout en repòs */
  .card-inclos .card-inclos__content,
  .cardmllk-inclos .card-inclos__content{
    justify-content: center !important;
  }

  /* Descripció oculta com overlay en repòs */
  .card-inclos .card-inclos__desc,
  .cardmllk-inclos .card-inclos__desc{
    position: absolute !important;
    left: 1rem !important; right: 1rem !important; bottom: 1rem !important;
    opacity: 0 !important; transform: translateY(6px) !important; pointer-events: none !important;
  }

  /* Hover/Focus: activa capa i baixa el text al flux */
  .card-inclos:hover::after,
  .card-inclos:focus-within::after,
  .cardmllk-inclos:hover::after,
  .cardmllk-inclos:focus-within::after{
    opacity: 1 !important;
  }
  .card-inclos:hover .card-inclos__content,
  .card-inclos:focus-within .card-inclos__content,
  .cardmllk-inclos:hover .card-inclos__content,
  .cardmllk-inclos:focus-within .card-inclos__content{
    justify-content: flex-start !important;
  }
  .card-inclos:hover .card-inclos__desc,
  .card-inclos:focus-within .card-inclos__desc,
  .cardmllk-inclos:hover .card-inclos__desc,
  .cardmllk-inclos:focus-within .card-inclos__desc{
    position: static !important; left:auto !important; right:auto !important; bottom:auto !important;
    opacity: 1 !important; transform: none !important; pointer-events: auto !important; transition-delay: 0s !important;
  }
}

/* =========================
   Títol fluid (anti-talls)
   ========================= */
@container (max-width: 360px){ .card-inclos__title{ font-size:.95em; line-height:1.1; } }
@container (max-width: 300px){ .card-inclos__title{ font-size:.9em; } }
@container (max-width: 260px){ .card-inclos__title{ font-size:.85em; } }
@supports not (font-size: 1cqw){
  @container (max-width: 420px){ .card-inclos__title{ font-size:1.05em; } }
  @container (max-width: 360px){ .card-inclos__title{ font-size:.95em; } }
  @container (max-width: 320px){ .card-inclos__title{ font-size:.9em; } }
  @container (max-width: 280px){ .card-inclos__title{ font-size:.85em; } }
}


/* —— Fix “bleed” del degradat i cantonades arrodonides —— */
:root{ --card-radius: 16px; }

/* La targeta arrodonida i clip de contingut */
.card-inclos,
.cardmllk-inclos{
  border-radius: var(--card-radius) !important;
  overflow: hidden !important;              /* talla qualsevol overflow */
  isolation: isolate;                       /* evita mescles estranyes */
  backface-visibility: hidden;              /* millora render en mòbil */
}

/* Els pseudo-elements també arrodonits */
.card-inclos::before,
.card-inclos::after,
.cardmllk-inclos::before,
.cardmllk-inclos::after{
  border-radius: inherit !important;        /* mateix radius que la targeta */
}

/* Wrappers interns de Spectra/UAGB: també hereten radius i clipegen */
.card-inclos > .uagb-container-inner-blocks-wrap,
.cardmllk-inclos > .uagb-container-inner-blocks-wrap,
.card-inclos > .uagb-container__video-wrap,
.cardmllk-inclos > .uagb-container__video-wrap,
.card-inclos > .uagb-container__shape,
.cardmllk-inclos > .uagb-container__shape{
  border-radius: inherit !important;
  overflow: hidden !important;
}

/* Per si hi ha imatges/blocks dins que sobresurten */
.card-inclos img,
.cardmllk-inclos img{
  border-radius: inherit !important;
  display:block;
}

/* —— Recordatori de colors i comportament existents —— */
/* INClOS (blau únic per normal i -2) */
.card-inclos::after,
.card-inclos.card-inclos-2::after{
  background: var(--brand) !important;
}
.card-inclos::before,
.card-inclos.card-inclos-2::before{
  background:
    linear-gradient(rgba(var(--brand-mob-rgb), .42), rgba(var(--brand-mob-rgb), .42)),
    linear-gradient(rgba(28,36,107), rgba(28,36,107)) !important;
}

/* MLLK (groc únic per normal i -2) */
.cardmllk-inclos::after,
.cardmllk-inclos.cardmllk-inclos-2::after,
.cardmllk-inclos.cardsmllk-inclos-2::after{
  background: var(--brand-mllk) !important;
}
.cardmllk-inclos::before,
.cardmllk-inclos.cardmllk-inclos-2::before,
.cardmllk-inclos.cardsmllk-inclos-2::before{
  background:
    linear-gradient(rgba(var(--brand-mllk-mob-rgb), .42), rgba(var(--brand-mllk-mob-rgb), .42)),
    linear-gradient(rgba(28,36,107), rgba(28,36,107)) !important;
}

/* Desktop (≥1024px): el tint de ::before es desactiva i només apareix la capa sòlida en hover */
@media (min-width: 1024px){
  .card-inclos::before,
  .cardmllk-inclos::before{
    opacity: 0 !important;
    background: transparent !important;
  }
}



.menu-widget {
    color: #fff;
    line-height: 2em;
    padding: 0;
	margin-bottom: 20px;
}

.menu-widget h1 {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #fff;
}

.menu-widget a {
    display: block;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
    margin: 0;
    font-weight: 500;
}

.menu-widget a:hover {
    color: blue;
}



/* Desactiva completament el focus visual del menú hamburguesa */
button.menu-toggle:focus,
button.menu-toggle:focus-visible,
button.ast-mobile-menu-trigger-minimal:focus,
button.ast-mobile-menu-trigger-minimal:focus-visible,
button.menu-toggle-close:focus,
button.menu-toggle-close:focus-visible,
button.menu-toggle.main-header-menu-toggle.ast-mobile-menu-trigger-minimal:focus,
button.menu-toggle.main-header-menu-toggle.ast-mobile-menu-trigger-minimal:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    outline-offset: 0 !important;
}

/* Elimina l'efecte clic/blau d'iPhone i Android */
button.menu-toggle,
button.menu-toggle-close,
button.ast-mobile-menu-trigger-minimal {
    -webkit-tap-highlight-color: transparent !important;
}

/* Per si Astra aplica focus via classe .focus */
.ast-menu-toggle.focus,
.ast-menu-toggle:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}