/*
 * Main Styles
 *
 * This file contains general theme styles that tie together base, layout,
 * components and WooCommerce.  It includes header and footer styling,
 * hero section appearance and global adjustments.  Additional
 * utilities can be added here as Figma designs are implemented.
 */

 @import url("utilities.css");
 @import url("modules/hero-page.css");
 @import url("components/buttons.css");
 @import url("components/forms.css");
 @import url("typography.css");
 @import url("modules/cards-4.css");
 @import url("modules/home-pillars.css");
 @import url("modules/hero.css");
 @import url("modules/philosophy.css");
 @import url("modules/banner-test.css");
 @import url("modules/section-invert.css");
 @import url("modules/cta-panel.css");
 @import url("modules/blog.css");
 @import url("canal-profesional.css");
 @import url("components/side-cart.css");


 


 


/* Header */

/* NAV desktop: separació i mida controlada */
.primary-navigation ul{
  gap: var(--spacing-m, 0.5rem);
}

.primary-navigation a{
  font-family: var(--font-family-base, var(--font-body));
  font-size: var(--font-size-label-s, 0.875rem);
  line-height: var(--line-height-label-s, 1.3);
  letter-spacing: var(--letter-spacing-label-s, 0.02em);
  padding: var(--spacing-xs, .5rem) var(--spacing-xs, .5rem);
  white-space: nowrap;
}


/* =========================
   HEADER · spacing + icons
   ========================= */

/* Més aire vertical (desktop + mobile) */
.site-header{
  padding-block: var(--space-sm, 0.5rem); /* afegeix aire fora del header-inner */
}

/* L'inner també amb més alçada */
.header-inner{
  padding-top: var(--space-sm, 0.75rem);
  padding-bottom: var(--space-sm, 0.75rem);
  min-height: 72px; /* ajusta a gust: 64–80 */
}

/* Icons right: separació i “hit area” */
.header-right{
  gap: var(--space-md, 1rem); /* abans era md però ara assegurem fallback */
}

.header-icon a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;   /* hit area accessible */
  height: 44px;
  border-radius: 999px;
  text-decoration: none;
}

/* Icon size real */
.header-icon img{
  width: 22px;
  height: 22px;
}

/* Hover subtil (opcional) */
.header-icon a:hover,
.header-icon a:focus-visible{
  background: color-mix(in srgb, var(--color-text), white 92%);
}

/* Mobile: una mica menys d’alçada si cal */
@media (max-width: 768px){
  .header-inner{
    min-height: 64px;
    padding-top: var(--space-xs, 0.5rem);
    padding-bottom: var(--space-xs, 0.5rem);
  }
  .header-right{ gap: var(--space-sm, 0.75rem); }
}


.site-header {
  background-color: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border);
  padding-left: 60px;
  padding-right: 60px;
    /* Hacer que el header se quede pegado arriba al hacer scroll */
    position: sticky;
    top: 0;
    z-index: 1000; /* Asegura que quede por encima del contenido */
}


@media (max-width: 768px) {
  .site-header {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}

.header-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  max-width: 150px;
}

.header-center {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

/* Icon sizes */
.header-icon img {
  width: 24px;
  height: 24px;
  display: block;
}


/* Footer */
.site-footer {
  background-color: var(--color-brand);
  padding: var(--spacing-lg) 0;
  border-top: 1px solid var(--color-border);
}

/* Footer layout */
.footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-lg);
}

/* Cada columna separada por líneas */
.footer-inner .footer-column {
  padding-bottom: var(--spacing-md);
  border-bottom: 0.5px solid var(--color-bg-hard);
}

/* --- Banner info (logo/text vs hashtag/contact) --- */
.banner-info .footer-logo {
  margin-bottom: var(--spacing-sm);
}

.banner-info .banner-text {
  margin: 0;
}

/* Separa el bloc (logo+text) del bloc (hashtag+contacte) */
.banner-info .banner-hashtag {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-xs);
}

.banner-info .banner-email {
  margin: 0;
}

/* --- Mòbil: més separació entre newsletter i banner-info --- */
@media (max-width: 767px) {
  .newsletter-banner .banner-info {
    margin-top: var(--spacing-xl);
  }
}


@media (min-width: 768px) {
  .footer-inner .footer-column {
    border-bottom: none;
    border-right: 0.5px solid var(--color-bg-hard);
    padding-right: var(--spacing-lg);
  }
  .footer-inner .footer-column:last-child {
    border-right: none;
    padding-right: 0;
  }
}
/* Tarjeta de la newsletter */
.newsletter-banner .newsletter-content {
  background-color: var(--color-bg-hard);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

/*
 * Distribución de columnas: en pantallas a partir de 768px usamos flex
 * con proporción 2:1 para que la newsletter ocupe el doble que la info.
 * En móviles se apilan automáticamente.
 */
@media (min-width: 768px) {
  .newsletter-banner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-lg);
  }
  .newsletter-banner .newsletter-content {
    flex: 2 1 0;
    margin-right: 0; /* se evita separación extra */
  }
  .newsletter-banner .banner-info {
    flex: 1 1 0;
    align-items: flex-start;
  }
}

/* Tamaño y separación del logo en el banner del footer */
.footer-logo img {
  max-width: 150px;
  height: auto;
  display: block;
  margin-bottom: var(--spacing-sm);
}

/* Márgenes y alineación de los iconos en la columna Lonjeba */
.footer-social-icons {
  margin-bottom: var(--spacing-md);
  justify-content: flex-start; /* evita que se centren si hay espacio */
}

/* Alinear los iconos sociales en la columna Lonjeba sin viñetas */
.footer-social-icons {
  list-style: none;       /* elimina los bullets */
  display: flex;          /* coloca los elementos en fila */
  gap: var(--spacing-sm); /* separa los iconos con tu variable de espaciado */
  margin: 0;
  padding: 0;
}

.footer-social-icons li {
  margin: 0;              /* evita márgenes laterales que puedan crear sangrías */
}


.footer-legal-bar {
  text-transform: uppercase;
  text-align: center;
  font-size: 0.75rem;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
}

.newsletter-checkbox{
  font-size: 0.75rem;
  font-weight: 500;

}

.footer-legal-bar a {
  color: var(--color-text);
  text-decoration: none;
  margin: 0 var(--spacing-xs);
}

.footer-legal-bar a:hover,
.footer-legal-bar a:focus {
  color: var(--color-text-inverted);
  text-decoration: underline;
}


/* Encabezados de las columnas en mayúsculas */
.footer-heading {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
  text-transform: uppercase;
}

/* Listas de enlaces */
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

.footer-links li {
  margin-bottom: var(--spacing-xs);
}

.footer-links a {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.875rem;
}

.footer-links a:hover,
.footer-links a:focus {
  color: var(--color-text-inverted);
}

/* Franja inferior del footer */
.footer-bottom {
  margin-top: var(--spacing-lg);
  border-top: 1px solid var(--color-text);
  padding-top: var(--spacing-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  text-align: center;
}

.footer-bottom a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--font-weight-normal);
}

.footer-bottom a:hover,
.footer-bottom a:focus {
  color: var(--color-primary);
}

.footer-inner {
  gap: var(--spacing-xl);
}

.footer-heading {
  margin-bottom: var(--spacing-md);
  margin-top: 20px;
}

/* Aumenta el espacio dentro de la newsletter y separa del resto del footer */
.newsletter-banner {
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}


/* Overrides: links específicos dentro del bloque newsletter (no invertidos por defecto) */
.site-footer .newsletter-content .newsletter-privacy a,
.site-footer .banner-email a {
  color: var(--color-text);
}

.site-footer .newsletter-content .newsletter-privacy a:visited,
.site-footer .banner-email a:visited {
  color: var(--color-text);
}

.site-footer .newsletter-content .newsletter-privacy a:hover,
.site-footer .newsletter-content .newsletter-privacy a:focus,
.site-footer .banner-email a:hover,
.site-footer .banner-email a:focus {
  color: var(--color-text-inverted);
  text-decoration: underline; /* recomendado AA */
}

.banner-info .banner-text {
  font-size: 1.125rem;   /* 18px */
  line-height: 1.4;
}

.banner-info .banner-hashtag,
.banner-info .banner-email a {
  font-size: 1rem;       /* 16px */
  line-height: 1.4;
}

.footer-logo img {
  max-width: 180px; /* puja/baixa segons Figma */
}

.newsletter-banner .banner-info { padding-top: 8px; }


/* Newsletter: més aire entre elements */
.newsletter-form {
  display: flex;
  align-items: stretch;           /* mateixa alçada input i botó */
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
}

.newsletter-label{
  font-size: 0.75rem; /* 14px */
  font-weight: 600;
}

/* Input ocupa el màxim espai */
.newsletter-input {
  flex: 1 1 auto;
  height: 44px;                   /* alçada consistent */
  padding: 0 var(--spacing-md);
  border-radius: var(--radius-sm);
}

/* Botó mateixa alçada que l’input */
.newsletter-submit {
  height: 44px;
  padding: 0 var(--spacing-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Espai entre blocs dins la targeta newsletter */
.newsletter-subtext {
  margin-bottom: var(--spacing-md);
}

.newsletter-privacy {
  margin-top: var(--spacing-md);
}

/* Hover del botó: text a --color-text */
.newsletter-submit:hover,
.newsletter-submit:focus {
  color: var(--color-text);
}

/* Hover/focus del botó Enviar (newsletter) */
.newsletter-submit:hover,
.newsletter-submit:focus {
  background-color: var(--color-text);
  color: var(--color-bg-soft);
  border: 0px;
}



@media (max-width: 480px) {
  .newsletter-form {
    flex-direction: column;
  }
  .newsletter-input,
  .newsletter-submit {
    width: 100%;
  }
}


@media (min-width: 768px) {
  .newsletter-banner {
    gap: 48px; /* més aire entre esquerra i dreta (ajusta si vols) */
  }

  .newsletter-banner .newsletter-content {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .newsletter-banner .banner-info {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 16px; /* extra separació visual */
  }
}



@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* Márgenes laterales para escritorio */
.site-footer {
  padding-left: 60px;
  padding-right: 60px;
}

/* Márgenes laterales para móvil */
@media (max-width: 767px) {
  .site-footer {
    padding-left: 20px;
    padding-right: 20px;
  }
}



.site-info {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.site-info a {
  color: var(--color-primary);
}

/* Hero Section */
.hero-section {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  padding: var(--spacing-xxl) 0;
  text-align: center;
}

.hero-section .hero-title {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-md);
}

.hero-section .hero-description {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-lg);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Content area adjustments */
.content-area-main {
  width: 100%;
}

.widget-area {
  background-color: var(--color-surface);
  padding: var(--spacing-md);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-md);
}

/* Comments form style (basic) */
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"] {
  width: 100%;
  padding: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-sm);
}

.comment-form input[type="submit"] {
  /* Style comment submit button like primary button */
  background-color: var(--color-primary);
  color: #fff;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.comment-form input[type="submit"]:hover,
.comment-form input[type="submit"]:focus {
  background-color: var(--color-secondary);
}


.lonjeba-shop-page__header{
  padding: clamp(24px, 4vw, 56px) 0;
}

.lonjeba-shop-page__title{
  margin: 0 0 10px 0;
}

.lonjeba-shop-page__subtitle{
  margin: 0;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4;
  opacity: .8;
}




/* ============================================================
   PRODUCT FAQ (fullwidth) + accordion icons
   ============================================================ */

   .prod-faq.fullbleed{
    background: var(--color-surface, #fff);
    padding: clamp(48px, 6vw, 96px) 0;
  }
  
  .prod-faq__inner{
    width: min(1200px, calc(100% - 80px));
    margin: 0 auto;
  }
  
  @media (max-width: 768px){
    .prod-faq__inner{
      width: calc(100% - 32px);
    }
  }
  
  .prod-faq__title{
    margin: 0 0 28px;
  }
  
  /* Accordion base (reusable) */
  .prod-accordion{
    border-top: 1px solid var(--color-border, #ddd);
  }
  
  .prod-accordion__item{
    border-bottom: 1px solid var(--color-border, #ddd);
  }
  
  .prod-accordion__summary{
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
  }
  
  .prod-accordion__summary::-webkit-details-marker{ display:none; }
  .prod-accordion__summary::marker{ content:""; }
  
  .prod-accordion__q{
    font-weight: 600;
    color: var(--color-text, #111);
  }
  
  /* Content */
  .prod-accordion__a{
    padding: 0 0 18px;
    color: color-mix(in srgb, var(--color-text, #111) 75%, transparent);
    max-width: 64ch;
  }
  
  /* Icon (plus/minus) – same style everywhere */
  .prod-accordion__summary::after{
    content: "";
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1.5px currentColor;
    opacity: .9;
  
    /* PLUS */
    background:
      linear-gradient(currentColor, currentColor) center/12px 1.6px no-repeat,
      linear-gradient(currentColor, currentColor) center/1.6px 12px no-repeat;
  }
  
  /* MINUS when open */
  .prod-accordion__item[open] > .prod-accordion__summary::after{
    background:
      linear-gradient(currentColor, currentColor) center/12px 1.6px no-repeat;
  }
  

  /* =========================
   FAQ: fons blanc + màxim 1200px
   ========================= */

.prod-faq.fullbleed{
  background: #fff !important; /* força fons blanc */
  padding: clamp(48px, 6vw, 96px) 0;
}

.prod-faq__inner{
  max-width: 1200px;         /* màxim total */
  width: calc(100% - 80px);  /* marges laterals desktop */
  margin: 0 auto;
}

@media (max-width: 768px){
  .prod-faq__inner{
    width: calc(100% - 32px); /* marges laterals mòbil */
  }
}

/* (opcional) si el text se t’estira massa, limita una mica el paràgraf */
.prod-faq .prod-accordion__a{
  max-width: 100%;
}




  /* =========================
   PROGRAMAS
   ========================= */


   /* ===== Program Landing (Lonjeba) ===== */
.lonjeba-program__hero{
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 5rem);
  overflow: hidden;
}

.lonjeba-program__hero-media{
  position:absolute; inset:0;
  background: var(--hero-bg);
  background-size: cover;
  background-position:center;
  filter: saturate(1.05);
}

.lonjeba-program__hero-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.45) 42%, rgba(0,0,0,.22) 100%);
}

.lonjeba-program__hero-inner{
  position:relative;
  max-width: 60rem;
  color:#fff;
}

.lonjeba-program__kicker{
  margin:0 0 .75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.85rem;
  opacity:.9;
}

.lonjeba-program__title{
  margin:0 0 1rem;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  letter-spacing:.02em;
}

.lonjeba-program__intro p{ margin:0 0 .75rem; max-width: 58ch; }

.lonjeba-program__hero-ctas{
  display:flex; gap:.75rem; flex-wrap:wrap;
  margin-top: 1.25rem;
}

.lonjeba-program__section{ padding-block: clamp(2rem, 4vw, 3.5rem); }
.lonjeba-program__section--alt{ padding-block: clamp(2rem, 4vw, 3.5rem); }

.lonjeba-program__grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.2vw, 1.75rem);
}
@media (max-width: 980px){
  .lonjeba-program__grid-2{ grid-template-columns:1fr; }
}

.lonjeba-program__grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(.9rem, 1.8vw, 1.25rem);
  margin-top: 1.25rem;
}
@media (max-width: 980px){
  .lonjeba-program__grid-3{ grid-template-columns:1fr; }
}

.card{
  border-radius: 16px;
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.9);
}
.card--soft{
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.02);
}

.h2{ margin:0 0 .75rem; letter-spacing:.02em; }
.muted{ opacity:.8; }

.list-check, .list-bullets{
  margin:0; padding-left: 1.1rem;
}
.list-check li{ margin:.55rem 0; }
.list-bullets li{ margin:.55rem 0; }

.feature{
  border-radius: 14px;
  padding: 1rem;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.02);
}

.steps{ margin:0; padding-left: 1.2rem; }
.steps li{ margin:.6rem 0; }

.purchase{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
}
@media (max-width: 980px){
  .purchase{ flex-direction: column; align-items: stretch; }
}

.purchase__cta{ text-align:right; }
@media (max-width: 980px){ .purchase__cta{ text-align:left; } }

.micro{ margin:.6rem 0 0; font-size:.9rem; opacity:.75; }

.upsell{
  display:flex; align-items:center; justify-content:space-between;
  gap: 1rem; padding: clamp(1rem, 2vw, 1.4rem);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.02);
}
@media (max-width: 980px){
  .upsell{ flex-direction:column; align-items:flex-start; }
}




  /* ============================================================
   HEADER FIX TOP (desktop + mobile) + MOBILE MENU OVERLAY
   Objectiu:
   - Header sempre fix al top (no sticky)
   - En clicar hamburger NO es desfixa ni "puja"
   - El menú desplega sota el header, visible, sense moure el scroll
   ============================================================ */

/* 1) Header sempre fix */
.site-header{
  position: fixed;       /* en lloc de sticky */
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 2000;         /* per sobre de tot */
}

/* Manté el look */
.site-header{
  background-color: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border);
}

/* 2) Evita que el contingut quedi sota el header */
:root{
  --header-height: 30px; /* ajusta si cal (72–96). millor que 72 si hi ha padding */
}

.site-content{
  /*padding-top: var(--header-height);*/
  padding-top: calc(var(--header-height) + 70px);
}

/* Si tens pàgines amb hero enganxat, això evita salts */
@media (max-width: 768px){
  :root{ --header-height: 30px; }
}

/* 3) El header-inner no ha de duplicar padding (tu el tens definit 2 cops) */
.header-inner{
  min-height: var(--header-height);
}

/* 4) Menú mòbil com overlay sota header (NO mou el layout) */
@media (max-width: 1024px){
  /* IMPORTANT: assegura que el contenidor del menú pot ser overlay */
  .header-center{
    position: static; /* perquè el menú no es limiti estranyament */
  }

  /* El nav real. El teu HTML posa la nav dins header-center via custom_theme_primary_menu() */
  .primary-navigation{
    position: fixed;
    left: 0;
    right: 0;

    /* enganxat sota el header fix */
    top: var(--header-height);

    z-index: 1999;
    background: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);

    /* estat tancat */
    max-height: 0;
    overflow: hidden;

    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;

    transition:
      max-height 420ms cubic-bezier(.22, 1, .36, 1),
      opacity 260ms ease,
      transform 420ms cubic-bezier(.22, 1, .36, 1);
  }

  /* Quan el menú està obert */
  body.menu-open .primary-navigation{
    max-height: calc(100vh - var(--header-height));
    overflow: auto;

    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Llista vertical en mòbil (si ja ho tens en un altre fitxer, això només ajuda) */
  .primary-navigation ul{
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 12px 20px 18px;
    margin: 0;
  }

  .primary-navigation li{
    border-top: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
  }

  .primary-navigation li:first-child{
    border-top: 0;
  }

  .primary-navigation a{
    display: block;
    padding: 14px 0;
  }
}

/* 5) Desktop: manté el menú a lloc (inline) */
@media (min-width: 1025px){
  .primary-navigation{
    position: static;
    max-height: none;
    overflow: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    background: transparent;
    border: 0;
  }
}

/* 6) Assegura que cap "toggled" o estats et trenquin el position */
.site-header.toggled,
.site-header.is-open,
.site-header.is-active{
  position: fixed;
  top: 0;
}

/* 7) Si algun parent té transform/overflow que trenca sticky/fixed, ho neutralitzem */
body{
  overflow-x: hidden;
}





/* =========================
   Newsletter modal
   ========================= */

   .c-modal{
    display: none; /* ocult per defecte */
  }
  
  .c-modal.is-open{
    display: block;
  }
  
  /* overlay pantalla completa */
  .c-modal__overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9998;
  }
  
  /* caixa modal centrada */
  .c-modal__panel{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100% - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
  
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    z-index: 9999;
  
    outline: none;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
  }
  
  /* botó tancar */
  .c-modal__close{
    position: absolute;
    top: 10px;
    right: 10px;
  
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
  }
  
  /* tipografia bàsica */
  .c-modal__title{ margin: 0 0 8px; }
  .c-modal__text{ margin: 0 0 16px; opacity: .85; }
  
  .c-modal__label{ display:block; margin: 12px 0 6px; font-weight: 600; }
  .c-modal__input{
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 12px;
  }
  
  .c-modal__check{
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 12px 0 16px;
  }
  
  /* bloqueig scroll del body quan modal obert */
  .is-modal-open{
    overflow: hidden;
  }
  


  /* =========================
   404
   ========================= */

   .l-404{ padding: clamp(56px, 8vw, 110px) 0; }
.l-404 .u-container{ width: min(860px, calc(100% - 2rem)); margin: 0 auto; }
.l-404__code{ margin: 0 0 10px; opacity: .55; letter-spacing: .12em; font-weight: 600; }
.l-404__title{ margin: 0 0 12px; line-height: 1.1; }
.l-404__lead{ margin: 0 0 22px; opacity: .85; max-width: 58ch; }
.l-404__actions{ display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }
.l-404__note{ margin: 0; opacity: .75; }
.l-404__note a{ text-decoration: underline; }



  /* =========================
   TOAST ADD TO CART
   ========================= */


.lonjeba-toast[hidden]{display:none;}

.lonjeba-toast{
  position: fixed;
  top: calc(var(--header-h, 72px) + 12px);
  right: 12px;
  z-index: 99999;
  max-width: min(520px, calc(100vw - 24px));
}

.lonjeba-toast__inner{
  background: var(--color-surface, #fff);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  display: flex;
  align-items: center;
  gap: 12px;
}

.lonjeba-toast__msg{flex:1;}
.lonjeba-toast__link{white-space:nowrap; text-decoration: underline;}

.lonjeba-toast__close{
  border:0; background:transparent; cursor:pointer;
  font-size:20px; line-height:1;
}





/* Tutor LMS (base) – ocultar autor/instructor en single + listados */
.tutor-course-details-instructors,
.tutor-course-instructors,
.tutor-single-course-author,
.tutor-course-author,
.tutor-course-instructor,
.tutor-course-loop-meta .tutor-course-author,
.tutor-course-loop-meta .tutor-avatar,
.tutor-course-loop-meta .tutor-meta,
.tutor-course-card .tutor-meta,
.tutor-course-card .tutor-avatar,
.tutor-course-card .tutor-course-author,
.tutor-course-card .tutor-course-instructor {
  display: none !important;
}


/* CookieYes: ocultar botón flotante "revisit consent" */
.cky-btn-revisit-wrapper,
div[data-cky-tag="revisit-consent"],
.cky-btn-revisit {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}