/* Variables de tema */
:root{
  --brand: #FF3EA5;      /* color principal (botones/acentos) */
  --brand-700: #E43391;
  --header-bg: linear-gradient(90deg, #3B214E 0%, #0F2A44 100%);

  /* Dark (por defecto) – estilo proyecto antiguo */
  --bg: linear-gradient(180deg, #211727 0%, #0E1826 100%);
  --panel: linear-gradient(180deg, rgba(255,74,203,0.08) 0%, rgba(122,92,255,0.06) 100%);
  --text:#FFFFFF;
  --muted:#CFD6DF;
  --border: rgba(255,255,255,0.10);

  --radius:16px;
  --shadow:0 8px 20px rgba(0,0,0,.25);
  --content-max:1120px;
  --content-pad: clamp(16px, 3vw, 28px);
}

/* Tema claro automático */


}

}

/* Tipografías */
html, body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,.brand .title{
  font-family:'Bowlby One SC', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  text-transform:uppercase; letter-spacing:.8px;
}
.h1, h1{ font-size: clamp(32px, 7vw, 72px); line-height:1.02; margin: 0 0 10px; }
h2{ font-size: clamp(20px, 3.2vw, 32px); line-height:1.1; margin: 0 0 8px; }
h3{ font-size: clamp(16px, 2.4vw, 22px); line-height:1.15; margin: 0 0 6px; }
p{ margin: 0 0 12px; }
p{ line-height: 1.7; max-width: 70ch; } /* improved readability */

/* A11y focus */
:focus-visible{ outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* Layout base */
.container{ width:min(var(--content-max),92vw); margin:0 auto; }
.section{ padding:14px 0 36px; }
.section h2{ width:min(var(--content-max),92vw); margin:8px auto 14px; }

/* Header */
.header{ position:sticky; top:0; z-index:50; background:var(--header-bg); border-bottom:none; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px var(--content-pad); }
.brand{ display:flex; gap:10px; align-items:center; }
.brand img{ width:36px; height:36px; border-radius:50%; }
.brand .title{ color:#fff; font-size:18px; line-height:1; }
.nav{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.nav a{ color:#fff; font-weight:700; padding:8px 12px; border-radius:999px; text-decoration:none; }
.nav a:hover, .nav a.active{ background:rgba(0,0,0,.18); }

/* Hero */
.hero-actions{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* Scroll reveal helpers */
.js-reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.js-reveal.is-visible{
  opacity: 1;
  transform: none;
}

/* Hero text animation on load */
.hero-visual .copy h1{
  opacity: 0;
  transform: translateY(14px);
  animation: heroFadeUpTitle .75s ease-out forwards;
}
.hero-visual .copy .subtitle{
  opacity: 0;
  transform: translateY(14px);
  animation: heroFadeUpSubtitle .75s ease-out forwards;
  animation-delay: .12s;
}

@keyframes heroFadeUpTitle{
  to{ opacity:1; transform:none; }
}
@keyframes heroFadeUpSubtitle{
  to{ opacity:1; transform:none; }
}

/* Card / product hover lift */
.card,
.product-card{
  transition: transform .18s ease-out, box-shadow .18s ease-out;
}
.card:hover,
.product-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0,0,0,.32);
}

.hero{ padding:64px 0 20px; background:transparent; }
.subtitle{ color:var(--muted); }
.hero-visual{
  position:relative; overflow:hidden; border-radius: clamp(12px, 2vw, 22px);
  border:1px solid var(--border); background: var(--panel); box-shadow: var(--shadow);
}
.hero-visual .media{
  position:relative; width:100%; min-height:65vh;
  display:grid; place-items:end start; isolation:isolate;
  background: radial-gradient(1200px 60% at 100% 0%, rgba(255,62,165,.25), transparent 60%),
              linear-gradient(0deg, rgba(0,0,0,.48), rgba(0,0,0,.28));
}
.hero-visual .media img{ 
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  z-index:-1; filter: saturate(.98) contrast(1.02);
}
/* Overlay text block */
.hero-visual .copy{
  padding: clamp(16px, 3.5vw, 32px);
  max-width: min(820px, 94%);
  color:#fff;
}
.hero-visual .actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }

/* Botones */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:999px; font-weight:700; text-decoration:none; }
.btn-primary{ background:var(--brand); color:#fff; border:1.5px solid var(--brand-700); }
.btn-outline{ background:transparent; color:#fff; border:1.5px solid #ff6ab9; }
.btn-outline:hover{ background:rgba(255,255,255,.06); }

/* Grid & cards */
.grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:760px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .grid{ grid-template-columns:repeat(3,1fr); } }

.card{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:clamp(16px, 2.4vw, 22px);
}

/* Galería */
.gallery-grid .card img{ display:block; width:100%; height:auto; border-radius:12px; }

/* Vídeo embed */
.video-embed iframe{ width:100%; aspect-ratio:16/9; border:0; }

/* Botiga (productos) */
.products{ width:min(var(--content-max),92vw); margin:8px auto 24px; }
.products-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:760px){ .products-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .products-grid{ grid-template-columns:repeat(3,1fr); } }
.product-card .thumb{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:10px; display:flex; align-items:center; justify-content:center; }

/* Footer */
.footer{ background:var(--header-bg); color:#fff; padding:18px var(--content-pad); }
.footer a{ color:#fff; text-decoration:none; }
.footer a:focus-visible, .footer a:hover{ text-decoration:underline; }


/* Footer legal links */
.footer .container{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
  text-align:left;
}
.footer-legal{
  font-size: 0.85rem;
  opacity: 0.8;
  font-family: inherit;
}
.footer-legal a{
  color:#fff;
  text-decoration:none;
}
.footer-legal a:hover,
.footer-legal a:focus-visible{
  text-decoration:underline;
}

/* Desktop: align footer content to left and full width */
@media (min-width: 960px){
  .footer .container{
    width:100%;
    max-width:none;
    margin:0 auto;
    align-items:flex-start;
  }
}


/* Utilidades */
img, video, iframe{ max-width:100%; height:auto; display:block; }
*{ box-sizing:border-box; }
.muted{ color:var(--muted); }
.kicker{ font-weight:700; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:#fff; opacity:.9;}

/* Modificadores por página para el hero */
.hero-visual--right .media img{ object-position: right center; }
.hero-visual--center-right .media img{ object-position: 70% center; }
/* Ligero zoom-out para mostrar más contenido de la imagen */
.hero-visual--zoomout .media img{ transform: scale(0.9); transform-origin: center; }
/* Sin botones: ocultamos .actions por si queda en versiones antiguas */
.hero-visual .actions{ display:none !important; }

/* Header: responsive logo and brand link (no underline) */
.header .brand{ text-decoration:none; }
.header .brand img{ height: clamp(40px, 6vh, 56px); width: auto; aspect-ratio: auto; }
/* Home hero: show full group by anchoring to top-center */
.hero-visual--top-center .media img{ object-position: center top; }
/* Stronger zoom out option */
.hero-visual--zoomout-strong .media img{ transform: scale(0.85); }
/* Center option */
.hero-visual--center .media img{ object-position: center center; }

/* Focal framing helpers */
.hero-visual--bottom .media img{ object-position: center 92%; } /* desplaza la vista hacia abajo para ver a la gente */
.hero-visual--right80 .media img{ object-position: 80% center; } /* mueve el foco más a la derecha */
.hero-visual--zoomout-xstrong .media img{ transform: scale(0.8); } /* aún más área visible */
.hero-visual--overlay-strong .media{
  background:
    radial-gradient(1200px 60% at 100% 0%, rgba(255,62,165,.28), transparent 60%),
    linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,.36));
}

/* Mostrar imagen completa sin cortes (usar en casos puntuales) */
.hero-visual--contain .media img{ 
  object-fit: contain; 
  object-position: 85% center;
  background: linear-gradient(90deg, rgba(0,0,0,.6), transparent 35%), transparent;
}

/* Integración visual: usa una capa de fondo difuminada con la misma imagen */
.hero-visual--blend .media::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--hero);
  background-size: cover; background-position: 85% center;
  filter: blur(22px) saturate(1.06);
  transform: scale(1.1);
  z-index:-2;
}
/* Asegura que la imagen principal esté por encima del fondo difuminado */
.hero-visual--blend .media img{ position:relative; z-index:0; }
/* Borde suave para que no se note el límite de la imagen cuando está en contain */
.hero-visual--blend .media img{ box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 0 40px rgba(0,0,0,.35) inset; border-radius: 0; }

/* Uniform hero modifier: ensure cover and consistent overlay */
.hero-visual--uniform .media img{ object-fit: cover; object-position: center center; transform: none; }

/* Ajuste fino de Qui-som: zoom-out suave */
.hero-visual--zoomout-soft .media img{ transform: scale(0.9); transform-origin: center right; }

/* FINAL ADJUSTMENTS v10 */
/* Qui-som hero: slightly more zoom-out and right focus to show full text */
.hero-visual--right80.hero-visual--zoomout-soft .media img{
  transform: scale(0.85);
  transform-origin: center right;
  object-position: 82% center;
}
/* Home hero: lift focus up to show people */
.hero-visual--bottom .media img{
  object-position: center 25%;
}

/* v11: Hero sin imagen (solo fondo negro degradado) */
.hero-visual--noimg .media{
  background: linear-gradient(180deg, #000 0%, #1a1a1a 100%);
}
.hero-visual--noimg .media img{ display:none; }


/* v12: Inici hero mostrar más gente (foco abajo) */
.hero-visual--bottom .media img{
  object-position: center 88%;
}



/* v14: Contacte hero - show full crest and branches */
.hero-visual--center-right .media img{
  object-fit: cover;
  object-position: 78% center;
  transform: scale(0.85);
  transform-origin: center right;
}




@media (max-width: 640px){
  
}


.hero-visual .media{ position: relative; } /* ensure containing block */


@media (max-width: 760px){
  
  
}

/* v24: Header brand logo improvements */
.header .brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.header .brand img{
  height: clamp(42px, 6vh, 58px);
  width: auto;
  object-fit: contain;
  border-radius: 0; /* no rounding on shield edges */
  image-rendering: auto;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.08));
}
.header .title{ text-decoration:none; }
/* ensure header background keeps brand color and content aligned */
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px var(--content-pad); }

/* v25: Header layout fix */
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px var(--content-pad); }
.header .brand{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
.header .brand .title{ font-weight:800; text-decoration:none; }
.header .nav{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

/* v26: header title visibility & alignment */
.header .brand .title{
  color:#fff;
  font-weight:900;
  letter-spacing:.4px;
  text-decoration:none;
  line-height:1;
}
@media (max-width:720px){
  .header .brand .title{ font-size:14px; }
}

/* Force white subtitle color in hero for visibility */
.hero-visual .subtitle { color: #fff !important; }

/* === Countdown styles === */
.section--countdown { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.countdown-wrap { text-align: center; }
.title--center, .subtitle--center { text-align: center; }
.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
  justify-items: stretch;
  margin-top: 1rem;
}
.cd-card {
  background: rgba(0,0,0,0.35);
  border-radius: 1.25rem;
  padding: 1.25rem;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.25) inset, 0 2px 8px rgba(0,0,0,0.15);
}
.cd-num {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1;
  font-weight: 800;
  background: linear-gradient(180deg, #FF4ACB 0%, #7A5CFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cd-label {
  margin-top: .25rem;
  opacity: .9;
}

/* Ensure countdown uses the same font as the site (body) */
.section--countdown .cd-num,
.section--countdown .cd-label {
  font-family:'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
}

@media (max-width: 720px) {
  .countdown { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}
/* Force white subtitle for visibility (kept) */
.hero-visual .subtitle { color: #fff !important; }
/* Allow other subtitles (like countdown) to inherit or use gradients */
.section--countdown .subtitle { color: inherit !important; }

/* === Qui Som cards === */
.section--qs .qs-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(260px,1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.qs-card{
  background: linear-gradient(180deg, rgba(255,74,203,0.15) 0%, rgba(122,92,255,0.10) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15) inset, 0 2px 6px rgba(0,0,0,0.2);
}
.qs-card--xl{ min-height: 260px; }
.qs-title{
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  margin-bottom: .75rem;
  text-transform: uppercase;
}
.qs-quote{
  border-left: 4px solid rgba(255,255,255,0.15);
  margin-top: 1rem;
  padding: .5rem 0 .5rem 1rem;
  color: rgba(255,255,255,0.85);
}
.qs-heading{
  margin: 2rem 0 1rem;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
}
.qs-values{
  display:grid;
  grid-template-columns: repeat(2, minmax(260px,1fr));
  gap: 1rem 1.5rem;
}
.qs-chip{
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.25rem;
  padding: 1rem 1.25rem;
}
.qs-chip__title{
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 800;
  background: linear-gradient(180deg, #FF4ACB 0%, #7A5CFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 .25rem 0;
}
.qs-chip__text{ margin: 0; opacity:.9; }
@media (max-width: 860px){
  .section--qs .qs-grid{ grid-template-columns: 1fr; }
  .qs-values{ grid-template-columns: 1fr; }
}


/* Gradient text utility matching countdown numbers */
.cd-gradient{
  background: linear-gradient(180deg, #FF4ACB 0%, #7A5CFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Fix: keep hero subtitle solid white (no gradient) */
.hero-visual .subtitle { color: #fff !important; -webkit-text-fill-color: #fff; background: none !important; }
/* Slight readability boost on busy photos */
.hero-visual .subtitle { text-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* Fix visual: hero & countdown subtitles as solid white (no gradients) */
.hero-visual .subtitle,
.section--countdown .subtitle { color:#fff !important; -webkit-text-fill-color:#fff; background:none !important; text-shadow:0 2px 8px rgba(0,0,0,.35); }

/* Ensure card/title/subtitle styles exist for Normatives page */
.card { background: linear-gradient(180deg, rgba(255,74,203,0.15) 0%, rgba(122,92,255,0.10) 100%);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 1.25rem; padding: 1.5rem; margin: 1rem 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.15) inset, 0 2px 6px rgba(0,0,0,.2); }
.card-title { font-weight: 800; text-transform: uppercase; color:#fff; margin: 0 0 .25rem 0; }
.card-subtitle { opacity:.9; margin:0 0 1rem 0; }

/* Imagen centrada en Normatives (tamaño moderado) */
.normatives-poster{
  display:block;
  margin: 1.5rem auto 0 auto;
  width: min(70%, 820px);
  height:auto;
  border-radius: .75rem;
}
@media (max-width: 720px){
  .normatives-poster{ width: 92%; }
}


/* === Gallery tweaks === */
.section--gallery .gallery-title{
  text-align:center;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:1rem;
}
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(1, minmax(280px, 860px));
  justify-content:center;
  gap:1.25rem;
}
.gallery-card{
  background: rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:1rem;
  padding:.75rem;
  box-shadow:0 2px 10px rgba(0,0,0,.2), inset 0 2px 10px rgba(0,0,0,.15);
}
.gallery-card img{
  display:block;
  width:100%;
  height:auto;
  border-radius:.75rem;
}
/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.8);
  z-index:9999;
  padding:1rem;
}
.lightbox.open{ display:flex; }
.lightbox-img{
  max-width: min(92vw, 1280px);
  max-height: 88vh;
  border-radius:.5rem;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.lightbox-close{
  position:absolute;
  top:1rem;
  right:1rem;
  background:transparent;
  border:0;
  font-size:2rem;
  line-height:1;
  color:#fff;
  cursor:pointer;
}



/* === Gallery: two side-by-side cards, equal visual size === */
.section--gallery .gallery-title{
  text-align:left;
  font-weight:800;
  text-transform:uppercase;
  margin: 0 0 .75rem 0;
}
.gallery-grid--two{
  display:grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 1rem 1.25rem;
  justify-items: center;
}
.gallery-card{
  width:100%;
  max-width: 720px;
  background: rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:1rem;
  padding:.6rem;
  box-shadow:0 2px 10px rgba(0,0,0,.2), inset 0 2px 10px rgba(0,0,0,.15);
}
.gallery-card img{
  display:block;
  width:100%;
  height: 320px;              /* altura fija para igualdad visual */
  object-fit: cover;          /* recorte elegante */
  border-radius:.75rem;       /* esquinas redondeadas */
}
@media (max-width: 900px){
  .gallery-grid--two{ grid-template-columns: 1fr; }
  .gallery-card img{ height: 260px; }
}



/* === Videos grid === */
.section--videos .gallery-title{ text-align:left; margin: 0 0 .75rem 0; }
.video-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 1rem 1.25rem;
}
.video-embed{
  position: relative;
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 2px 10px rgba(0,0,0,.2), inset 0 2px 10px rgba(0,0,0,.15);
}
.video-embed::before{
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 */
}
.video-embed iframe{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
@media (max-width: 900px){
  .video-grid{ grid-template-columns: 1fr; }
}



/* Video captions */
.video-caption{
  margin-top: .5rem;
  text-align: left;
  color: #fff;
  font-weight: 400;
  font-size: 1rem;
  opacity: .95;
}



/* === Botiga: Banderoles grid === */
.shop-grid{
  display:grid;
  gap: 1rem 1.25rem;
  justify-items: center;
}
.shop-grid--three{
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}
/* Reuse gallery card look */
.section--shop .gallery-card{
  width:100%;
  max-width: 520px;
  background: rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:1rem;
  padding:.6rem;
  box-shadow:0 2px 10px rgba(0,0,0,.2), inset 0 2px 10px rgba(0,0,0,.15);
}
.section--shop .gallery-card img{
  display:block;
  width:100%;
  height: 300px;
  object-fit: cover;
  border-radius:.75rem;
}
@media (max-width: 1100px){
  .shop-grid--three{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 720px){
  .shop-grid--three{ grid-template-columns: 1fr; }
  .section--shop .gallery-card img{ height: 240px; }
}



/* Two-column grid for SAMARRETES */
.shop-grid--two{
  display:grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 1rem 1.25rem;
  justify-items: center;
}
@media (max-width: 860px){
  .shop-grid--two{ grid-template-columns: 1fr; }
}



/* === Shop: titles & meta === */
.shop-card-title{ margin:.5rem 0 .25rem; font-weight:700; color:#fff; }
.shop-card-meta{ margin:0 0 .5rem; opacity:.8; }

/* Button 'Pròximament' */
.btn.btn-soon{
  display:inline-block;
  padding:.6rem 1rem;
  border-radius:1.5rem;
  border:1px solid #ff4acb55;
  background: transparent;
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
.btn.btn-soon:hover{ background: rgba(255,74,203,.15); }

/* Modal */
.modal-soon{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background: rgba(0,0,0,.75);
  z-index:10000; padding:1rem;
}
.modal-soon.open{ display:flex; }
.modal-soon__dialog{
  width:min(92vw,520px);
  background: #1a1a1f;
  border:1px solid rgba(255,255,255,.08);
  border-radius:1rem;
  padding:1.25rem;
  text-align:center;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.modal-soon__dialog h3{ margin:.25rem 0 .5rem; color:#fff; }
.modal-soon__dialog p{ margin:.25rem 0 .75rem; }



/* === Botiga final layout === */
.section--shop .shop-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 1.25rem 1.25rem;
  justify-items: center;
  align-items: start;
}
@media (max-width: 1024px){
  .section--shop .shop-grid{ grid-template-columns: repeat(2, minmax(200px, 1fr)); }
}
@media (max-width: 720px){
  .section--shop .shop-grid{ grid-template-columns: 1fr; }
}
.section--shop .gallery-card{
  width:100%;
  max-width: 380px;
  background: rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:0.75rem;
  padding:0.5rem;
  box-shadow:0 2px 8px rgba(0,0,0,.25), inset 0 1px 6px rgba(0,0,0,.15);
  transition: transform .2s ease, box-shadow .2s ease;
}
.section--shop .gallery-card:hover{
  transform: translateY(-4px);
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.section--shop .gallery-card img{
  display:block;
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:.5rem;
}
.section--shop .shop-card-title{
  margin:.5rem 0 0;
  font-weight:600;
  color:#fff;
  text-align:left;
  font-size:1rem;
}
.section--shop .btn.btn-soon{
  padding:.45rem .9rem;
  font-size:.9rem;
  border-radius:1rem;
}
/* Section spacing for breathing room */
.section--shop + .section--shop{
  margin-top:2.5rem;
}



/* Shop card body inside each card */
.shop-card-body{ padding:.5rem .25rem .75rem; text-align:center; }
.shop-card-title{
  margin:.35rem 0 .35rem;
  font-weight:600;
  color:#fff;
  font-size:.95rem;         /* smaller to fit 3 per row */
  line-height:1.25;
}
.shop-card-actions{ margin-top:.15rem; }
.section--shop .btn.btn-soon{
  padding:.4rem .8rem;
  font-size:.9rem;
  border-radius:1rem;
}

/* Tighten grid gaps a bit for better fit */
.section--shop .shop-grid{ gap: 1rem; }



/* === Botiga final (titles & button inside cards) — compact for 3/row === */
.section--shop .shop-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 1rem 1rem;
  justify-items: center;
}
@media (max-width: 1024px){
  .section--shop .shop-grid{ grid-template-columns: repeat(2, minmax(200px, 1fr)); }
}
@media (max-width: 720px){
  .section--shop .shop-grid{ grid-template-columns: 1fr; }
}
.section--shop .gallery-card{
  width:100%;
  max-width: 320px;
  background: rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:.75rem;
  padding:.5rem;
  box-shadow:0 2px 8px rgba(0,0,0,.25), inset 0 1px 6px rgba(0,0,0,.15);
}
.section--shop .gallery-card img{
  width:100%; height:200px; object-fit:cover; border-radius:.5rem;
}
.shop-card-content{ text-align:center; padding:.45rem .25rem .6rem; }
.shop-card-title{ margin:.15rem 0 .35rem; font-size:.9rem; font-weight:600; color:#fff; }
.section--shop .btn.btn-soon{ padding:.35rem .75rem; font-size:.85rem; border-radius:1rem; }



/* === Hotfix: Botiga grid stability (force 3/row on desktop) === */
.section--shop .shop-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
  gap: 1rem 1rem !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}
@media (max-width: 1024px){
  .section--shop .shop-grid{ grid-template-columns: repeat(2, minmax(200px, 1fr)) !important; }
}
@media (max-width: 720px){
  .section--shop .shop-grid{ grid-template-columns: 1fr !important; }
}
.section--shop .gallery-card{
  max-width: 100% !important;
  width: 100% !important;
  display: flex;
  flex-direction: column;
}
.section--shop .gallery-card img{
  height: 190px !important;
  width: 100% !important;
  object-fit: cover !important;
}
.section--shop .shop-card-content{
  text-align:center;
  padding: .5rem .5rem .7rem;
}
.section--shop .shop-card-title{
  font-size: .9rem !important;
  line-height: 1.2;
  margin: .25rem 0 .35rem !important;
  font-weight: 600;
  color: #fff;
  word-break: break-word;
}
.section--shop .btn.btn-soon{
  padding: .35rem .75rem !important;
  font-size: .85rem !important;
}



/* === Layout per section (exact columns) === */
.section--banderoles .shop-grid{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
  gap: 1rem 1rem !important;
  justify-items: center !important;
  align-items: stretch !important;
}
.section--samarretes .shop-grid{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
  gap: 1rem 1rem !important;
  justify-items: center !important;
  align-items: stretch !important;
}
@media (max-width: 1024px){
  .section--banderoles .shop-grid{ grid-template-columns: repeat(2, minmax(220px,1fr)) !important; }
  .section--samarretes .shop-grid{ grid-template-columns: repeat(2, minmax(220px,1fr)) !important; }
}
@media (max-width: 720px){
  .section--banderoles .shop-grid,
  .section--samarretes .shop-grid{ grid-template-columns: 1fr !important; }
}

/* Card sizing (consistent smaller cards) */
.section--shop .gallery-card{ max-width: 320px !important; }
.section--shop .gallery-card img{ height: 190px !important; }


/* Responsive Google Form embed */
.section--form .form-embed-wrap{
  width: 100%;
  min-height: 1200px; /* Forms are tall */
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: .75rem;
  overflow: hidden;
}
.section--form .form-embed{
  width: 100%;
  height: 1200px;
}
@media (max-width: 720px){
  .section--form .form-embed-wrap{ min-height: 1400px; }
  .section--form .form-embed{ height: 1400px; }
}


/* === Chrome-stable layout: exact columns per section === */
.section--banderoles > .container > .shop-grid{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  grid-auto-flow: row dense !important;
  gap: 1rem !important;
  justify-items: center !important;
  align-items: stretch !important;
}
.section--samarretes > .container > .shop-grid{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  grid-auto-flow: row dense !important;
  gap: 1rem !important;
  justify-items: center !important;
  align-items: stretch !important;
}
@media (max-width: 1024px){
  .section--banderoles > .container > .shop-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .section--samarretes > .container > .shop-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 720px){
  .section--banderoles > .container > .shop-grid,
  .section--samarretes > .container > .shop-grid{ grid-template-columns: 1fr !important; }
}

/* Cards compact & consistent */
.section--shop .gallery-card{
  width:100% !important;
  max-width: 320px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.section--shop .gallery-card img{
  width:100% !important;
  height: 190px !important;
  object-fit: cover !important;
  border-radius: .5rem !important;
}
.section--shop .shop-card-content{
  text-align:center !important;
  padding: .5rem .5rem .7rem !important;
}
.section--shop .shop-card-title{
  font-size: .9rem !important;
  line-height: 1.25 !important;
  margin: .2rem 0 .4rem !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.section--shop .btn.btn-soon{
  padding: .35rem .75rem !important;
  font-size: .85rem !important;
}



/* === Botiga: force exact columns & centering === */
.section--banderoles .container,
.section--samarretes .container{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.section--banderoles .shop-grid{
  display: grid !important;
  grid-template-columns: repeat(3, 340px) !important;
  gap: 16px !important;
  justify-content: center !important;
  align-items: start !important;
}
.section--samarretes .shop-grid{
  display: grid !important;
  grid-template-columns: repeat(2, 340px) !important;
  gap: 16px !important;
  justify-content: center !important;
  align-items: start !important;
}

/* Card sizing to fit fixed grid columns */
.section--banderoles .gallery-card,
.section--samarretes .gallery-card{
  width: 340px !important;
  max-width: 340px !important;
}
.section--banderoles .gallery-card img,
.section--samarretes .gallery-card img{
  height: 190px !important;
}

/* Responsive fallbacks */
@media (max-width: 1120px){
  .section--banderoles .shop-grid{ grid-template-columns: repeat(2, 340px) !important; }
}
@media (max-width: 740px){
  .section--banderoles .shop-grid,
  .section--samarretes .shop-grid{ grid-template-columns: 1fr !important; }
  .section--banderoles .gallery-card,
  .section--samarretes .gallery-card{ width: 100% !important; max-width: 100% !important; }
}



/* === FINAL HOTFIX: exact horizontal rows in Botiga === */
.section--banderoles .container,
.section--samarretes .container{
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.section--banderoles .shop-grid,
.section--samarretes .shop-grid{
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  gap: 16px !important;
}

.section--banderoles .gallery-card,
.section--samarretes .gallery-card{
  width: 340px !important;
  flex: 0 0 340px !important;
  max-width: 340px !important;
}

/* Image size inside cards */
.section--banderoles .gallery-card img,
.section--samarretes .gallery-card img{
  height: 190px !important;
}

/* Responsive: allow wrap only below thresholds */
@media (max-width: 1120px){
  .section--banderoles .shop-grid{ flex-wrap: wrap !important; }
}
@media (max-width: 740px){
  .section--banderoles .shop-grid,
  .section--samarretes .shop-grid{ flex-wrap: wrap !important; }
  .section--banderoles .gallery-card,
  .section--samarretes .gallery-card{ width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; }
}



/* === Botiga: harden grid via inline-style selectors (last resort) === */
.shop-grid[style*="repeat(3,340px)"] .gallery-card,
.shop-grid[style*="repeat(2,340px)"] .gallery-card{
  width:340px; max-width:340px;
}
.shop-grid[style*="repeat(3,340px)"] .gallery-card img,
.shop-grid[style*="repeat(2,340px)"] .gallery-card img{
  height:190px; object-fit:cover;
}

/* Responsive fallbacks */
@media (max-width: 980px){
  .shop-grid[style*="repeat(3,340px)"]{ grid-template-columns: repeat(2,340px) !important; }
}
@media (max-width: 640px){
  .shop-grid[style*="repeat(3,340px)"],
  .shop-grid[style*="repeat(2,340px)"]{ grid-template-columns: 1fr !important; }
  .shop-grid[style*="repeat(3,340px)"] .gallery-card,
  .shop-grid[style*="repeat(2,340px)"] .gallery-card{ width:100%; max-width:100%; }
}



/* === BOTIGA: exact rows, bulletproof === */
.section--banderoles .container, .section--samarretes .container{ max-width:1280px; margin-inline:auto; }
.section--banderoles .shop-grid, .section--samarretes .shop-grid{
  display:flex !important;
  justify-content:center !important;
  align-items:stretch !important;
  gap:16px !important;
}

/* Fixed card width so math is predictable */
.section--shop .gallery-card{ width:340px !important; max-width:340px !important; flex:0 0 340px !important; }
.section--shop .gallery-card img{ height:190px !important; object-fit:cover; }

/* Desktop: keep all on one row (no-wrap) */
.section--banderoles .shop-grid{ flex-wrap:nowrap !important; }   /* 3 items */
.section--samarretes .shop-grid{ flex-wrap:nowrap !important; }   /* 2 items */

/* Tablet: allow wrap to 2 per fila */
@media (max-width: 1080px){
  .section--banderoles .shop-grid{ flex-wrap:wrap !important; }
}

/* Mobile: 1 per fila */
@media (max-width: 740px){
  .section--banderoles .shop-grid, .section--samarretes .shop-grid{ flex-wrap:wrap !important; }
  .section--shop .gallery-card{ width:100% !important; max-width:100% !important; flex:1 1 auto !important; }
}



/* === FIX BOTIGA GRID LAYOUT ===
   Force consistent CSS Grid for product sections.
   Desktop: Banderoles -> 3 columns, Samarretes -> 2 columns
   Tablet (<=1080px): both -> 2 columns
   Mobile (<=740px): 1 column
*/
.section--shop .shop-grid{
  display: grid !important;
  gap: 1.25rem !important;
  align-items: stretch !important;
  justify-items: center !important;
}
.section--banderoles .shop-grid{
  grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
}
.section--samarretes .shop-grid{
  grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
}

/* Cards must fill the grid cell */
.section--shop .gallery-card{
  width: 100% !important;
  max-width: 100% !important;
}

/* Tablet */
@media (max-width: 1080px){
  .section--banderoles .shop-grid,
  .section--samarretes .shop-grid{
    grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
  }
}

/* Mobile */
@media (max-width: 740px){
  .section--banderoles .shop-grid,
  .section--samarretes .shop-grid{
    grid-template-columns: 1fr !important;
  }
}
/* === END FIX === */


/* Fallback targeting when section classes are missing/mis-typed */
main > section.section--shop:nth-of-type(2) .shop-grid{
  grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
}
main > section.section--shop:nth-of-type(3) .shop-grid{
  grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
}
@media (max-width:1080px){
  main > section.section--shop:nth-of-type(2) .shop-grid,
  main > section.section--shop:nth-of-type(3) .shop-grid{
    grid-template-columns: repeat(2, minmax(240px,1fr)) !important;
  }
}
@media (max-width:740px){
  main > section.section--shop:nth-of-type(2) .shop-grid,
  main > section.section--shop:nth-of-type(3) .shop-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Small note above embedded form */
.form-note{
  text-align:center;
  margin: 0 0 1rem 0;
  font-weight: 600;
}

/* Bigger gradient note above form, same style scale as gallery titles */
.form-note--big{
  text-align:center;
  margin: 1rem 0 1rem 0;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 800;
  text-transform: uppercase;
}

.footer{ background:var(--header-bg); color:#fff; padding:18px var(--content-pad); }



}



/* Restore classic nav/tab look */
.nav a{
  font-family:'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
}

/* Footer text style to classic */
.footer p{
  font-family:'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
  font-weight:700;
  letter-spacing:0;
  margin:0;
}


}

@media (prefers-color-scheme: light){
  :root{
    --header-bg: #FF3EA5; /* header/footer fucsia sólido */
  }
  html, body{
    background: linear-gradient(135deg, #FF5BB0 0%, #FFFFFF 100%) !important;
    background-attachment: fixed;
  }
  .nav a, .footer p{
    font-family:'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
    font-weight:700;
    text-transform:none;
    letter-spacing:0;
  }
}


/* === FINAL LIGHT MODE OVERRIDES (sticky header same as now) === */
@media (prefers-color-scheme: light){
  .header{ background:#FF3EA5 !important; }
  .footer{ background:#FF3EA5 !important; color:#fff !important; }
  .nav a, .footer p{
    font-family:'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
    font-weight:700 !important;
    text-transform:none !important;
    letter-spacing:0 !important;
  }
  html, body{
    background: linear-gradient(135deg, #FF5BB0 0%, #FFFFFF 100%) !important;
    background-attachment: fixed !important;
  }
  .header-inner{ padding:12px var(--content-pad) !important; }
}

/* Contact form fields */
.form-field{ margin: 0 0 12px 0; }
.form-field label{ display:block; font-weight:700; margin:0 0 6px 0; }
.form-field input, .form-field textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,0.15);
  background: linear-gradient(180deg, rgba(255,74,203,0.08), rgba(122,92,255,0.06));
  color:#fff;
}
.form-field input::placeholder, .form-field textarea::placeholder{ color:rgba(255,255,255,.65); }
@media (prefers-color-scheme: light){
  .form-field input, .form-field textarea{ color:#222; border:1px solid rgba(0,0,0,.12); background:#fff; }
  .form-field input::placeholder, .form-field textarea::placeholder{ color:#555; }
}

/* Success popup */
.popup-backdrop{
  position: fixed; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.5); opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  z-index: 999;
}
.popup-backdrop.open{ opacity: 1; pointer-events: auto; }
.popup-card{
  background: #fff; color: #111; border-radius: 16px; padding: 20px 22px; text-align: center; 
  min-width: 260px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: dark){
  .popup-card{ background: #111; color:#fff; }
}

/* Contacte visual tweaks */
.card.card--map iframe{ width:100%; height:360px; display:block; border:0; }
.card .card-title{ font-weight:800; text-transform:uppercase; }
/* Enforce consistent fonts on Contacte: Quicksand for body text inside cards */
.section .card p, .section .card label, .section .card input, .section .card textarea, .section .card button{
  font-family:'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
}

/* === Unified card visuals === */
.card{
  background: linear-gradient(180deg, rgba(255,74,203,0.18) 0%, rgba(122,92,255,0.12) 100%);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 12px 26px rgba(0,0,0,0.08);
}
@media (prefers-color-scheme: dark){
  .card{
    background: linear-gradient(180deg, rgba(255,74,203,0.08) 0%, rgba(122,92,255,0.06) 100%);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 12px 26px rgba(0,0,0,0.35);
  }
}

/* Contacte grid: equal card heights */
.grid--contact .card{ min-height: 460px; }
.card.card--map iframe{ width:100%; height: 360px; display:block; border:0; border-radius:12px; }
@media (max-width: 860px){
  .grid--contact{ grid-template-columns: 1fr !important; }
  .grid--contact .card{ min-height: unset; }
}

/* Typography consistency for small texts */
.hero-visual .copy p,
.hero-visual .copy small,
.countdown p,
.countdown small,
.countdown .note,
.countdown .subtitle{
  font-family: 'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  font-weight: 600;
}

/* Home hero: left align subtitle/text only on home */
.hero-visual.hero--home .copy{ text-align:left; }

/* Countdown texts: enforce Quicksand everywhere inside the countdown */
.countdown p,
.countdown small,
.countdown .note,
.countdown .subtitle,
.countdown .label,
.countdown .meta{
  font-family:'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

/* Home hero: left align subtitle only on home */
.hero-visual.hero--home .copy .subtitle{ text-align:left !important; }

/* Countdown typography scoped to countdown section only */
.section--countdown .subtitle,
.section--countdown .countdown p,
.section--countdown .countdown small,
.section--countdown .countdown .label,
.section--countdown .countdown .meta{
  font-family:'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

/* Countdown subtitle color to match heading */
.section--countdown .subtitle{
  color: var(--brand-700) !important; /* same accent as headings */
}


/* === Ajuste fino: subtítulo del contador igual que el título === */
.section--countdown .subtitle.cd-gradient {
  background: linear-gradient(180deg, #FF4ACB 0%, #7A5CFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  letter-spacing: 0.3px;
  margin-top: 0.75rem;
  display: inline-block;
}


/* === Subtítulo del contador: mismo color que el título, sin perder legibilidad === */
.section--countdown .subtitle.cd-gradient {
  color: #FF4ACB !important; /* mismo color fucsia del título */
  -webkit-text-fill-color: #FF4ACB !important;
  background: none !important;
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  letter-spacing: 0.3px;
  margin-top: 0.75rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15); /* mejora contraste */
}


/* === Corrección final: subtítulo y etiquetas con el mismo gradiente que título y números === */
/* Forzamos a sobreescribir cualquier regla previa con !important y mayor especificidad */
.section--countdown .countdown-wrap .subtitle.cd-gradient {
  background: linear-gradient(180deg, #FF4ACB 0%, #7A5CFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  letter-spacing: 0.3px;
  margin-top: 0.75rem;
  display: inline-block;
}

/* Etiquetas del contador (dies, h, min, s) con el mismo gradiente que los números */
.section--countdown .cd-label {
  background: linear-gradient(180deg, #FF4ACB 0%, #7A5CFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 600;
  opacity: 1;
}


/* === Restaurar fuente de títulos en "Qui Som" y "Valors" === */
.section--qs h2,
.section--qs .qs-card h3,
.section--qs .qs-card-title {
  font-family: 'Bowlby One SC', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}


/* === Títulos de vídeos (captions) con la misma tipografía de títulos del sitio === */
.section--videos .video-caption {
  font-family: 'Bowlby One SC', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
}


/* === Qui Som: forzar tipografía de títulos reales === */
.section--qs .qs-title,
.section--qs .qs-chip__title {
  font-family: 'Bowlby One SC', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .8px;
}


/* === Header nav: forzar tipografía correcta en claro/oscuro === */
.header .nav a {
  font-family:'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
  font-weight:700;
  letter-spacing:.2px;
}


/* === Qui Som: tipografía y legibilidad en tarjetas === */
/* Títulos ya están en Bowlby; forzamos textos corridos a Quicksand */
.section--qs .qs-card p,
.section--qs .qs-card .qs-quote,
.section--qs .qs-chip__text {
  font-family:'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
}

/* Mejorar contraste del texto dentro de las chips oscuras */
.section--qs .qs-chip .qs-chip__text {
  color: rgba(255,255,255,0.92);
}


/* === Normatives: títulos en blanco, descripción en negro === */
.section--normatives .card-title {
  font-family: 'Bowlby One SC', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.section--normatives .card p {
  font-family: 'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
  color: #000 !important;
  font-weight: 500;
  opacity: 1;
}


/* === Botiga: alinear "Pròximament" en todas las tarjetas === */
.section--shop .shop-card-content,
.section--shop .shop-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 120px;
  padding: .5rem .25rem .75rem;
  text-align: center;
}
.section--shop .shop-card-actions { margin-top: .25rem; }
.section--shop .btn-soon { margin-top: .15rem; }


/* === Botiga: modal "Pròximament" más legible === */
.modal-soon{
  background: rgba(0,0,0,.55) !important; /* antes .75: demasiado oscuro */
}
.modal-soon__dialog{
  background: #1b1b22 !important;
  color: #fff !important;
}
.modal-soon__dialog h3{ color:#fff !important; }
.modal-soon__dialog p{ color: rgba(255,255,255,.9) !important; }


/* === Preinscripció: reducir ancho del marco del formulario === */
.section--preinscripcio .form-wrapper,
.section--preinscripcio form {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 1.75rem;
  border-radius: 1.25rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}


/* === Contacte: subtítulo bajo "On som" y mapa a tamaño tarjeta === */
.card-subtitle{ margin:-.25rem 0 .75rem 0; color:#fff; font-weight:600; opacity:.9; }
.card.card--map .map{ height: 380px; }
@media (max-width: 720px){ .card.card--map .map{ height: 320px; } }
.card.card--map iframe{ width:100%; height:100%; display:block; border:0; }


/* === Botiga: igualar altura de títulos para alinear botones === */
.section--shop .shop-card-title{
  min-height: 3.6rem; /* reserva dos líneas aprox */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
}
@media (max-width: 720px){
  .section--shop .shop-card-title{ min-height: 3.0rem; }
}


/* === Botiga: popup con tipografías del sitio === */
.modal-soon__dialog h3{
  font-family:'Bowlby One SC', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
  text-transform: uppercase;
  letter-spacing:.8px;
}
.modal-soon__dialog p,
.modal-soon__dialog .btn{
  font-family:'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
}


/* === Botiga: ajustar encuadre de imágenes de "Samarretes" para que no se vean tan cortadas === */
.section--samarretes .gallery-card img{
  height: 260px;
  object-fit: cover;
  object-position: center 35%; /* baja un poco el encuadre */
}
@media (max-width: 720px){
  .section--samarretes .gallery-card img{ height: 220px; object-position: center 40%; }
}


/* === Contacte: unificar estilo de botones (Instagram y Enviar) === */
.section--contacte .btn,
.section--contacte .btn-primary,
.section--contacte .btn-outline{
  padding: .7rem 1.2rem;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1;
}
/* Instagram igual que Enviar (ambos sólidos en color de marca) */
.section--contacte .btn-outline{
  background: var(--brand) !important;
  color: #fff !important;
  border: 1.5px solid var(--brand-700) !important;
}
.section--contacte .btn-outline:hover,
.section--contacte .btn-primary:hover{
  filter: brightness(1.08);
}


/* === Normatives: unificar estilo y color de tarjetas === */
.section--normatives .card {
  background: linear-gradient(180deg, #f78ad0 0%, #f5a6d9 100%) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  border: none;
}

.section--normatives .card-title {
  color: #fff !important;
  font-family: 'Bowlby One SC', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.section--normatives .card p {
  color: #000 !important;
  font-family: 'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
  font-weight: 500;
  opacity: 1;
}


/* === Botiga: normalizar altura de imágenes de Banderoles para evitar saltos y alinear títulos/botones === */
.section--banderoles .gallery-card img{
  height: 220px;
  object-fit: cover;
  object-position: center;
}


/* === Botiga: suavizar sombras para render más ligero (evita cuelgues en algunos navegadores) === */
.gallery-card{ box-shadow: 0 2px 8px rgba(0,0,0,.18), inset 0 2px 6px rgba(0,0,0,.12); }


/* === Botiga: grid estable y tarjetas homogéneas === */
.section--shop .shop-grid{
  align-items: stretch;
}
.section--shop .gallery-card{
  display: flex;
  flex-direction: column;
  contain: layout paint; /* mejora rendimiento del render */
}
.section--shop .gallery-card .gallery-link{
  display: block;
}
/* Altura consistente del bloque de imagen para evitar saltos de layout */
.section--banderoles .gallery-card .gallery-link{ height: 220px; }
.section--banderoles .gallery-card img{ height: 100%; width:100%; object-fit: cover; }

.section--samarretes .gallery-card .gallery-link{ height: 260px; }
.section--samarretes .gallery-card img{ height: 100%; width:100%; object-fit: cover; object-position: center 35%; }

/* Cuerpo de card ocupa resto y alinea acciones abajo */
.section--shop .shop-card-body{ 
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; 
  padding:.5rem .25rem .75rem; text-align:center; flex: 1 1 auto;
}
.section--shop .shop-card-title{
  min-height: 3.6rem; 
  display:flex; align-items:flex-end; justify-content:center; text-align:center;
}
.section--shop .shop-card-actions{ margin-top:auto; padding-top:.25rem; }


/* === Botiga: sombras ligeras para evitar cuelgues === */
.gallery-card{ box-shadow: 0 2px 8px rgba(0,0,0,.18), inset 0 2px 6px rgba(0,0,0,.12) !important; }


/* === Contacte: botones 'Enviar' y 'Obrir Instagram' iguales (estilo + tipografía) === */
.section--contacte .btn,
.section--contacte .btn-primary,
.section--contacte .btn-outline{
  padding: .75rem 1.25rem;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1;
  font-family:'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
}
.section--contacte .btn-outline{
  background: var(--brand) !important;
  color: #fff !important;
  border: 1.5px solid var(--brand-700) !important;
}
.section--contacte .btn-outline:hover,
.section--contacte .btn-primary:hover{ filter: brightness(1.08); }

/* Click-to-copy email */
.copy-email{ cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.copy-toast{
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: var(--brand); color:#fff; padding:.6rem 1rem; border-radius:999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  display:none; z-index: 99999; font-weight:700;
}
.copy-toast.show{ display:block; animation: fadeout 1.6s ease forwards; }
@keyframes fadeout { 0%{opacity:1} 75%{opacity:1} 100%{opacity:0} }


/* === BOTONES: estilo unificado en toda la web === */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1.25rem;
  border-radius:999px;
  font-family:'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
  font-weight:700; line-height:1; text-decoration:none;
  transition: filter .15s ease, transform .05s ease;
  cursor:pointer; user-select:none;
}
/* Todas las variantes con el mismo look */
.btn, .btn-primary, .btn-outline, .btn-soon{
  background: var(--brand) !important;
  color:#fff !important;
  border:1.5px solid var(--brand-700) !important;
}
.btn:hover{ filter:brightness(1.1); }
.btn:active{ transform: translateY(1px); }
.btn[disabled], .btn.disabled{ opacity:.6; pointer-events:none; }


/* Ajuste fino: alinear el título de la primera banderola con el resto */
.product-card:first-child .product-title {
  margin-top: -6px;
}


/* === Light mode sitewide background (do not touch dark mode) === */
@media (prefers-color-scheme: light) {
  body {
    background: linear-gradient(135deg, #ffd0e4 0%, #d9e6ff 100%) !important;
  }
  /* Optional: soften section separators over the new background */
  .section { background: transparent !important; }
}


/* === Light Mode: sitewide background + unified card tones (dark mode untouched) === */
@media (prefers-color-scheme: light) {
  /* Fondo general en todas las páginas */
  html, body {
    background: linear-gradient(135deg, #ffd0e4 0%, #d9e6ff 100%) !important;
    color: #222;
  }

  /* Quitar fondos sólidos de secciones para que se vea el degradado */
  .section, .section--qs, .section--gallery, .section--shop, .section--countdown {
    background: transparent !important;
  }

  /* Tarjetas genéricas */
  .card, .product-card, .gallery-card, .qs-card, .info-box, .shop-card,
  .grid--contact .card, .section--normatives .card {
    background: rgba(255,255,255,0.78) !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
  }

  /* Chips de VALORS (gris suave) */
  .section--qs .qs-chip {
    background: rgba(150, 150, 160, 0.25) !important;
    border: 1px solid rgba(150,150,160,0.35) !important;
  }

  /* Cards de Botiga */
  .section--shop .gallery-card {
    background: rgba(255,255,255,0.78) !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
  }

  /* Normatives: mantener título blanco pero sobre tarjeta clara */
  .section--normatives .card-title { color:#222 !important; }
  .section--normatives .card p { color:#333 !important; }

  /* Contador: cajas más claras en claro */
  .section--countdown .cd-box,
  .section--countdown .countdown-box {
    background: rgba(0,0,0,0.10) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
  }

  /* Footer band permanece sólido de marca */
  .site-footer { background: var(--brand) !important; }
}


/* === Light Mode: stronger text contrast on clear cards (dark mode untouched) === */
@media (prefers-color-scheme: light) {
  /* Texto base más oscuro para legibilidad */
  body { color: #1f1f24; }

  /* Títulos dentro de tarjetas / secciones */
  .card-title,
  .shop-card-title,
  .gallery-card .title,
  .qs-title,
  .qs-chip__title,
  .section--normatives .card-title {
    color: #1e1e22 !important;
  }

  /* Párrafos y textos secundarios dentro de tarjetas */
  .card p,
  .product-card p,
  .gallery-card p,
  .qs-card p,
  .qs-quote,
  .qs-chip__text,
  .info-box p,
  .grid--contact .card p,
  .section--normatives .card p {
    color: #2b2f36 !important;
  }

  /* Vídeos: pie de foto */
  .video-caption, .figure-caption, .caption {
    color: #2b2f36 !important;
  }

  /* Qui Som chips (Valors) */
  .section--qs .qs-chip__title,
  .section--qs .qs-chip__text {
    color: #2b2f36 !important;
  }

  /* Contador: textos mejor visibles en claro */
  .section--countdown .subtitle,
  .section--countdown .cd-label,
  .section--countdown .countdown-box .label {
    color: #2b2f36 !important;
  }
}


/* === Light Mode: Botiga card text to black (buttons keep white) === */
@media (prefers-color-scheme: light) {
  .section--shop .gallery-card,
  .section--shop .shop-card,
  .section--shop .product-card {
    color: #000 !important;
  }
  .section--shop .shop-card-title,
  .section--shop .gallery-card .title,
  .section--shop .product-title,
  .section--shop .shop-card p,
  .section--shop .gallery-card p {
    color: #000 !important;
  }
  /* Keep CTA buttons consistent */
  .section--shop .btn, 
  .section--shop .btn-primary, 
  .section--shop .btn-outline, 
  .section--shop .btn-soon {
    color: #fff !important;
  }
}


/* === Countdown: números y labels en fucsia en ambos modos === */
.section--countdown .num,
.section--countdown .number,
.section--countdown .digits,
.section--countdown .cd-number,
.section--countdown .countdown-box .num,
.section--countdown .countdown-box .number {
  color: var(--brand) !important;
}
.section--countdown .cd-label,
.section--countdown .label,
.section--countdown .countdown-box .label {
  color: var(--brand) !important;
}

/* === Light Mode: armonizar tarjetas "VALORS" (Qui som) y cajas del contador === */
@media (prefers-color-scheme: light) {
  /* Chips de VALORS como el resto de tarjetas */
  .section--qs .qs-chip {
    background: rgba(255,255,255,0.82) !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
  }
  .section--qs .qs-chip__title,
  .section--qs .qs-chip__text { color: #1f1f24 !important; }

  /* Cajas del contador a tono claro */
  .section--countdown .cd-box,
  .section--countdown .countdown-box {
    background: rgba(255,255,255,0.82) !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
  }
}


/* === Light Mode: headings in brand fuchsia; "VALORS" stays black === */
@media (prefers-color-scheme: light) {
  /* 1) Mantener "VALORS" en negro */
  .section--qs .section-title { color: #000 !important; }

  /* 2) Títulos de chips (INCLUSIÓ, TRADICIÓ, RITME, FAMÍLIA) en fucsia */
  .section--qs .qs-chip__title { color: var(--brand) !important; }

  /* 3) Grandes títulos de sección (Fotos, Vídeos, Banderoles, Samarretes, etc.) en fucsia */
  .section .section-title,
  .section .section-heading,
  .section h2.section-title,
  .section h2.title,
  .section .title--section,
  .section--gallery .section-title,
  .section--shop .section-title,
  .section--botiga .section-title,
  .section--home .section-title {
    color: var(--brand) !important;
  }

  /* 4) Preinscripció: subtítulo / línea de intro en fucsia */
  .section--preins .lead,
  .section--preins .subtitle,
  .section--preins .intro {
    color: var(--brand) !important;
  }
}


    /* === Light Mode: headings in brand fuchsia; "VALORS" stays black === */
    @media (prefers-color-scheme: light) {
      /* 1) Mantener "VALORS" en negro */
      .section--qs .section-title { color: #000 !important; }

      /* 2) Títulos de chips (INCLUSIÓ, TRADICIÓ, RITME, FAMÍLIA) en fucsia */
      .section--qs .qs-chip__title { color: var(--brand) !important; }

      /* 3) Grandes títulos de sección (Fotos, Vídeos, Banderoles, Samarretes, etc.) en fucsia */
      .section .section-title,
      .section .section-heading,
      .section h2.section-title,
      .section h2.title,
      .section .title--section,
      .section--gallery .section-title,
      .section--shop .section-title,
      .section--botiga .section-title,
      .section--home .section-title {
        color: var(--brand) !important;
      }

      /* 4) Preinscripció: subtítulo / línea de intro en fucsia */
      .section--preins .lead,
      .section--preins .subtitle,
      .section--preins .intro {
        color: var(--brand) !important;
      }
    }
    

/* === Light Mode: softer fuchsia headings (#ff4db4); keep dark mode untouched === */
@media (prefers-color-scheme: light) {
  /* VALORS stays black */
  .section--qs .section-title { color: #000 !important; }

  /* Chip titles (INCLUSIÓ, TRADICIÓ, RITME, FAMÍLIA) */
  .section--qs .qs-chip__title { color: #ff4db4 !important; }

  /* Section headings across the site (Fotos, Vídeos, Banderoles, Samarretes, etc.) */
  .section .section-title,
  .section .section-heading,
  .section h2.section-title,
  .section h2.title,
  .section .title--section,
  .section--gallery .section-title,
  .section--shop .section-title,
  .section--botiga .section-title,
  .section--home .section-title {
    color: #ff4db4 !important;
  }

  /* Preinscripció intro/subtitle */
  .section--preins .lead,
  .section--preins .subtitle,
  .section--preins .intro {
    color: #ff4db4 !important;
  }
}


/* === Light Mode: robust fuchsia/black typography (dark mode untouched) === */
@media (prefers-color-scheme: light) {
  /* VALORS heading specifically in Qui Som stays black */
  .section--qs .gallery-title,
  .section--qs .section-title {
    color: #000 !important;
  }

  /* Chip titles (INCLUSIÓ, TRADICIÓ, RITME, FAMÍLIA) -> fuchsia */
  .section--qs .qs-chip__title {
    color: #ff4db4 !important;
  }

  /* Generic section headings (Fotos, Vídeos, Banderoles, Samarretes, etc.) -> fuchsia */
  .section .gallery-title,
  .section .section-title,
  .section h2.gallery-title,
  .section h2.title,
  .section .title--section {
    color: #ff4db4 !important;
  }

  /* Preinscripció intro line -> fuchsia */
  .section--preinscripcio .subtitle,
  .section--preinscripcio .lead,
  .section--preinscripcio .intro {
    color: #ff4db4 !important;
  }

  /* Botiga card text to black for readability */
  .section--shop .gallery-card,
  .section--shop .shop-card,
  .section--shop .product-card { color:#000 !important; }
  .section--shop .shop-card-title,
  .section--shop .gallery-card .title,
  .section--shop .product-title,
  .section--shop .shop-card p,
  .section--shop .gallery-card p { color:#000 !important; }

  /* Countdown: numbers & labels to fuchsia, remove gradient in light mode */
  .section--countdown .cd-num,
  .section--countdown .cd-label {
    background: none !important;
    -webkit-text-fill-color: #ff4db4 !important;
    color: #ff4db4 !important;
  }
  /* Inline subtitle near countdown to fuchsia too */
  .section--countdown .subtitle { 
    background: none !important;
    -webkit-text-fill-color: #ff4db4 !important;
    color: #ff4db4 !important;
  }
}


/* === Light Mode: precise color mapping for headings (dark mode untouched) === */
@media (prefers-color-scheme: light) {
  /* VALORS (Qui Som) stays black */
  .section--qs .qs-heading { color: #000 !important; }

  /* Chips titles (INCLUSIÓ, TRADICIÓ, RITME, FAMÍLIA) -> brand fuchsia */
  .section--qs .qs-chip__title { color: #ff4db4 !important; }

  /* Generic section headings that currently use cd-gradient -> fuchsia in light */
  .gallery-title.cd-gradient,
  .title.cd-gradient,
  h1.cd-gradient,
  h2.cd-gradient {
    background: none !important;
    -webkit-text-fill-color: #ff4db4 !important;
    color: #ff4db4 !important;
  }

  /* Preinscripció long heading line uses gallery-title cd-gradient */
  .section--preinscripcio .gallery-title.cd-gradient { 
    background: none !important;
    -webkit-text-fill-color: #ff4db4 !important;
    color: #ff4db4 !important;
  }
}


/* === Light Mode: finish touches === */
@media (prefers-color-scheme: light) {
  /* 1) 'Falten XX dies...' under countdown -> fuchsia */
  .section--countdown .subtitle,
  .section--countdown p.subtitle,
  .section--countdown .countdown-subtitle {
    color: #ff4db4 !important;
    -webkit-text-fill-color: #ff4db4 !important;
  }

  /* 2) Countdown cards: match light cards (remove grey) */
  .section--countdown .cd-box,
  .section--countdown .countdown-box {
    background-color: rgba(255,255,255,0.88) !important;
    background-image: none !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
  }
}



/* === FINAL LIGHT-MODE PATCH (Do not edit below) ========================= */
@media (prefers-color-scheme: light) {
  /* Keep VALORS in black */
  .section--qs .qs-heading,
  .section--qs h3.section-title,
  .section--qs .section-title {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    background: none !important;
  }

  /* INCLUSIÓ / TRADICIÓ / RITME / FAMÍLIA -> brand fuchsia */
  .section--qs .qs-chip__title,
  .section--qs .qs-chip h3,
  .section--qs .qs-chip h4 {
    color: var(--brand) !important;
    -webkit-text-fill-color: var(--brand) !important;
    background: none !important;
  }

  /* All big section titles (Fotos, Vídeos, Banderoles, Samarretes, etc.) -> brand fuchsia */
  .gallery-title.cd-gradient,
  .title.cd-gradient,
  h1.cd-gradient, h2.cd-gradient, h3.cd-gradient, h4.cd-gradient,
  .section .section-title, .section .section-heading, .section .title--section {
    color: var(--brand) !important;
    -webkit-text-fill-color: var(--brand) !important;
    background: none !important;
  }

  /* Preinscripció intro/lead -> brand fuchsia */
  .section--preinscripcio .lead,
  .section--preinscripcio .subtitle,
  .section--preinscripcio .intro,
  .section--preins .lead, .section--preins .subtitle, .section--preins .intro {
    color: var(--brand) !important;
    -webkit-text-fill-color: var(--brand) !important;
  }

  /* Countdown subtitle "Falten XX dies..." -> brand fuchsia */
  .section--countdown .subtitle,
  .section--countdown .countdown-subtitle,
  .section--countdown p.subtitle,
  .section--countdown .lead {
    color: var(--brand) !important;
    -webkit-text-fill-color: var(--brand) !important;
    background: none !important;
  }

  /* Countdown: numbers & labels -> brand fuchsia */
  .section--countdown .cd-number, .section--countdown .number, .section--countdown .num,
  .section--countdown .cd-label, .section--countdown .label, .section--countdown .unit {
    color: var(--brand) !important;
    -webkit-text-fill-color: var(--brand) !important;
  }

  /* Countdown cards: match light cards (remove grey tiles) */
  .section--countdown [class*="box"],
  .section--countdown .box,
  .section--countdown .card,
  .section--countdown .item,
  .section--countdown .tile {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
    backdrop-filter: saturate(120%) blur(4px);
  }
}
/* === END FINAL LIGHT-MODE PATCH ======================================== */



/* ===== Alignment fix for product cards in Botiga (uniform title height & image) ===== */
.section--shop .gallery-card{
  display: flex !important;
  flex-direction: column !important;
}
.section--shop .gallery-card img{
  height: 240px !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.section--shop .shop-card-body{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: .5rem .25rem .75rem !important;
  text-align: center !important;
}
.section--shop .shop-card-title{
  margin: .35rem 0 .35rem !important;
  font-size: .95rem !important;
  line-height: 1.25 !important;
  min-height: 3rem !important; /* reserve two lines so all align */
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  word-break: break-word !important;
  color: var(--text, #1e1e22) !important;
}
.section--shop .shop-card-actions{ margin-top: auto !important; }



/* === Fix: ensure Botiga card titles placed under image and black on light bg === */
.section--shop .gallery-card { position: static !important; }
.section--shop .gallery-card .gallery-link,
.section--shop .gallery-card img { display: block !important; position: static !important; margin: 0 !important; }
.section--shop .gallery-card .shop-card-body { 
  position: static !important; 
  margin-top: .5rem !important; 
  padding-top: .25rem !important;
}
.section--shop .gallery-card .shop-card-title {
  color: #000 !important;
  text-align: center !important;
  margin: .25rem 0 .35rem !important;
}
/* keep button pinned to bottom */
.section--shop .gallery-card .shop-card-actions { margin-top: auto !important; }



/* === Spacing tweak for Botiga cards: 15px gap under image === */
.section--shop .gallery-card .shop-card-body { 
  margin-top: 15px !important;
}


/* === Fine-tune spacing: only Banderoles titles get extra gap, Samarretes unaffected === */
.section--shop.section--banderoles .gallery-card .shop-card-body { margin-top: 22px !important; } /* like shirts spacing */

/* === Ensure Samarretes grid stays aligned === */
.section--shop.section--samarretes .shop-grid { 
  display: grid !important; 
  grid-template-columns: repeat(3, minmax(220px, 1fr)) !important; 
  gap: 24px !important; 
  justify-items: center !important; 
  align-items: start !important; 
}
@media (max-width: 900px){
  .section--shop.section--samarretes .shop-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)) !important; }
}
@media (max-width: 560px){
  .section--shop.section--samarretes .shop-grid { grid-template-columns: 1fr !important; }
}

/* === Normatives hero: show the person on the right by shifting focus down-right === */
.page-normatives .hero-visual,
body#normatives .hero-visual,
.hero-visual--normatives,
.hero-visual--center.normatives-hero {
  background-position: 80% 35% !important; /* shift focus to the right and slightly down */
  background-size: cover !important;
}
\n

/* === Banderoles: more breathing room between image/title/button === */
.section--shop.section--banderoles .gallery-card .shop-card-body { 
  margin-top: 26px !important;  /* a bit more than before */
  gap: 12px !important;         /* vertical spacing inside card body */
}
.section--shop.section--banderoles .shop-card-title { 
  margin-bottom: 8px !important; 
}

/* === Samarretes: normalize card heights and alignment === */
.section--shop.section--samarretes .gallery-card { 
  display: flex !important; 
  flex-direction: column !important; 
}
.section--shop.section--samarretes .gallery-card img { 
  height: 240px !important; 
  width: 100% !important; 
  object-fit: cover !important; 
  display: block !important;
}
.section--shop.section--samarretes .shop-card-body { 
  display: flex !important; 
  flex-direction: column !important; 
  gap: 10px !important; 
  margin-top: 16px !important;
  flex: 1 1 auto !important;
}
.section--shop.section--samarretes .shop-card-title { 
  min-height: 3rem !important; 
  text-align: center !important;
}
.section--shop.section--samarretes .shop-card-actions { 
  margin-top: auto !important; 
}

/* === Normatives hero: move focal point up into view by lowering Y% (show more head) === */
.page-normatives .hero-visual,
body#normatives .hero-visual,
.hero-visual--normatives,
.hero-visual--center.normatives-hero {
  background-position: 80% 22% !important; /* right + higher top in view */
  background-size: cover !important;
}
\n


/* ===== FINAL FIXES ===== */

/* 1) Samarretes: force equal heights consistently */
.section--shop.section--samarretes .shop-grid { align-items: stretch !important; }
.section--shop.section--samarretes .gallery-card { 
  display: flex !important; 
  flex-direction: column !important; 
  height: 100% !important; 
}
.section--shop.section--samarretes .gallery-card .gallery-link { display:block !important; }
.section--shop.section--samarretes .gallery-card img { 
  height: 240px !important; 
  width: 100% !important; 
  object-fit: cover !important; 
  display: block !important; 
}
.section--shop.section--samarretes .shop-card-body { 
  display: flex !important; 
  flex-direction: column !important; 
  flex: 1 1 auto !important; 
  margin-top: 16px !important; 
  gap: 10px !important; 
}
.section--shop.section--samarretes .shop-card-title { 
  min-height: 3.2rem !important; 
  display: flex !important; 
  align-items: flex-start !important; 
  justify-content: center !important; 
  text-align: center !important;
}
.section--shop.section--samarretes .shop-card-actions { margin-top: auto !important; }

/* 2) Dark theme support: white text in dark backgrounds */
@media (prefers-color-scheme: dark) {
  .section--shop .shop-card-title,
  .section--shop .gallery-card .title,
  .section--shop .gallery-card p { 
    color: #fff !important; 
  }
  .section--shop .gallery-card { 
    background: rgba(255,255,255,.06) !important; 
    border-color: rgba(255,255,255,.15) !important; 
  }
  .section--shop .btn.btn-soon { 
    color: #fff !important; 
  }
}

/* 3) Banderoles: if still tight, increase internal gap a tad */
.section--shop.section--banderoles .shop-card-actions { margin-top: auto !important; }
.section--shop.section--banderoles .shop-card-body { gap: 14px !important; }




/* ===== Tweaks v4 ===== */

/* Samarretes: absolutely equalize card heights */
.section--shop.section--samarretes .gallery-card { 
  min-height: 520px !important; /* unify total card height */
}
.section--shop.section--samarretes .shop-card-title { 
  min-height: 3.6rem !important; /* reserve a bit more for wrapping */
}

/* Normatives hero: lower the image to reveal more of the head */
.page-normatives .hero-visual,
body#normatives .hero-visual,
.hero-visual--normatives,
.hero-visual--center.normatives-hero {
  background-position: 80% 45% !important; /* move down */
  background-size: cover !important;
}




/* ===== Clean alignment without enlarging cards ===== */

/* Reset any forced min-heights on Samarretes cards from previous tweaks */
.section--shop.section--samarretes .gallery-card {
  min-height: 0 !important;
  height: auto !important;
}

/* Use a uniform image height to keep cards equal WITHOUT changing overall card size */
.section--shop.section--banderoles .gallery-card img,
.section--shop.section--samarretes .gallery-card img {
  height: 220px !important;     /* compact like original cards */
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Card body: small, consistent gap and flex so button stays abajo */
.section--shop .shop-card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 12px !important;
  flex: 1 1 auto !important;
}

/* Title: reserve just enough space for 2 líneas para que cuadre sin crecer la tarjeta */
.section--shop .shop-card-title {
  min-height: 2.8rem !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Botón fijo al fondo de cada tarjeta */
.section--shop .shop-card-actions { margin-top: auto !important; }

/* Dark mode: títulos y párrafos en blanco para buen contraste */
@media (prefers-color-scheme: dark) {
  .section--shop .shop-card-title,
  .section--shop .gallery-card .title,
  .section--shop .gallery-card p { color:#fff !important; }
}

/* ===== Normatives hero: bajar imagen para no cortar la cabeza ===== */
.page-normatives .hero-visual,
body#normatives .hero-visual,
.hero-visual--normatives,
.hero-visual--center.normatives-hero {
  background-position: 80% 65% !important; /* más abajo que antes */
  background-size: cover !important;
}



/* ===== EQUAL HEIGHTS - SAMARRETES (final pass) ===== */
/* Keep compact card size; hard-equalize total height on desktop/tablet */
.section--shop.section--samarretes .shop-grid { align-items: stretch !important; }
.section--shop.section--samarretes .gallery-card {
  display: flex !important;
  flex-direction: column !important;
  height: 480px !important;       /* fixed equal height close to original */
}
.section--shop.section--samarretes .gallery-card img {
  height: 220px !important;
  object-fit: cover !important;
}
.section--shop.section--samarretes .shop-card-body { 
  margin-top: 12px !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.section--shop.section--samarretes .shop-card-title {
  min-height: 2.8rem !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: center !important;
}
.section--shop.section--samarretes .shop-card-actions { margin-top: auto !important; }

/* On narrow screens, allow natural height */
@media (max-width: 700px){
  .section--shop.section--samarretes .gallery-card { height: auto !important; }
}

/* ===== NORMATIVES HERO - lower more so head is fully visible ===== */
.page-normatives .hero-visual,
body#normatives .hero-visual,
.hero-visual--normatives,
.hero-visual--center.normatives-hero {
  background-position: 80% 78% !important;  /* further down */
  background-size: cover !important;
}



/* ===== Samarretes: align text and button identically, no card size change ===== */
.section--shop.section--samarretes .gallery-card { 
  height: auto !important;           /* do NOT force card height */
}
.section--shop.section--samarretes .gallery-card img {
  height: 220px !important;          /* keep image uniform */
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.section--shop.section--samarretes .shop-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  margin-top: 14px !important;
  gap: 10px !important;
}
.section--shop.section--samarretes .shop-card-title {
  min-height: 3.2rem !important;     /* reserve same space for 2 lines */
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: center !important;
}
.section--shop.section--samarretes .shop-card-actions {
  margin-top: auto !important;       /* button anchored at the bottom */
}



/* ===== Samarretes: pixel-perfect alignment (titles + buttons) ===== */
.section--shop.section--samarretes .shop-card-body{ 
  margin-top: 14px !important; 
  gap: 10px !important; 
  display:flex !important; 
  flex-direction:column !important; 
  flex: 1 1 auto !important;
}

/* Lock title to exact 3.4rem so 2 líneas ocupan lo mismo en ambas tarjetas */
.section--shop.section--samarretes .shop-card-title{
  line-height: 1.25 !important;
  font-size: 0.95rem !important;
  min-height: 3.4rem !important;
  max-height: 3.4rem !important;
  display:flex !important; 
  align-items:flex-start !important; 
  justify-content:center !important; 
  text-align:center !important;
  margin: 0 0 .35rem !important;
  overflow:hidden !important;
}

/* Same button box on both cards */
.section--shop.section--samarretes .shop-card-actions{ 
  margin-top: auto !important; 
  padding-top: 0 !important;
}
.section--shop.section--samarretes .shop-card-actions .btn{ 
  min-height: 36px !important; 
  line-height: 36px !important; 
  padding: 0 14px !important; 
  display:inline-flex !important; 
  align-items:center !important; 
  justify-content:center !important;
}



/* Reset button sizing inside shop-card-actions to original design */
.section--shop .shop-card-actions .btn{
  min-height: initial !important;
  line-height: initial !important;
  padding: .5rem .9rem !important;
}


/* Normatives hero: with padded image, center-right focus and cover */
.page-normatives .hero-visual,
body#normatives .hero-visual,
.hero-visual--normatives,
.hero-visual--center.normatives-hero {
  background-position: 90% 55% !important;
  background-size: cover !important;
}


/* === Dark Mode: white text for Banderoles & Samarretes === */
@media (prefers-color-scheme: dark) {
  .section--shop.section--banderoles .shop-card-title,
  .section--shop.section--banderoles .shop-card-body,
  .section--shop.section--samarretes .shop-card-title,
  .section--shop.section--samarretes .shop-card-body,
  .section--shop.section--banderoles .shop-card-actions .btn,
  .section--shop.section--samarretes .shop-card-actions .btn {
    color: #fff !important;
  }
}



/* === LIGHT MODE FIXES (do not affect dark mode) === */
@media (prefers-color-scheme: light) {
  /* Countdown subtitle text "Falten 98 dies..." in fuchsia */
  .section--countdown .subtitle,
  .section--countdown .countdown-wrap .subtitle,
  .section--countdown .subtitle.cd-gradient {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: #ed1fa6 !important;
    text-shadow: none !important;
  }

  /* Countdown cards light style */
  .section--countdown .cd-card {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
  }
  .section--countdown .cd-num {
    color: #ed1fa6 !important;
  }
  .section--countdown .cd-label {
    color: #2b2f36 !important;
    opacity: 0.9 !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
  }

  /* Ensure page background/hero has same light gradient base */
  body, .page, .section {
    background: linear-gradient(180deg, #fbe3f2 0%, #ecebff 100%) !important;
    background-attachment: fixed !important;
  }
  .hero-visual .copy { color: #ffffff !important; } /* keep hero text white over image */
}



/* Stronger light-mode rule for the countdown subtitle */
@media (prefers-color-scheme: light){
  body:not([data-theme="dark"]) .section--countdown .subtitle,
  body:not([data-theme="dark"]) .section--countdown .subtitle.cd-gradient{
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: #ed1fa6 !important;
    text-shadow: none !important;
  }
}



/* === Nav active link: same style as others, only color fuchsia === */
.nav a.active,
.nav a.current,
.nav a.is-active,
.nav a[aria-current="page"]{
  font-weight: 700 !important;
  letter-spacing: inherit !important;
  text-decoration: none !important;
  color: #ed1fa6 !important;
}



/* === Header nav: active link identical to others (only color) === */
.header .nav a.active,
.header .nav a.current,
.header .nav a.is-active,
.header .nav a[aria-current="page"]{
  color: #ed1fa6 !important;
  font-weight: 700 !important;
  letter-spacing: inherit !important;
  text-decoration: none !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}



/* === NAV NORMALIZATION: active link identical to others (only color difference allowed) === */
.header .nav a{
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  font-synthesis-weight: none !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  letter-spacing: inherit !important;
}
.header .nav a.active,
.header .nav a.current,
.header .nav a.is-active,
.header .nav a[aria-current="page"]{
  color: #ed1fa6 !important;      /* active color only */
  font-weight: 700 !important; /* no bolder look */
  letter-spacing: inherit !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  padding-left: inherit !important;
  padding-right: inherit !important;
  transform: none !important;
}




/* ==== Disbauxa Header Fixes v5 ==== */

/* 1) Use Bowlby One SC on nav tabs to match light theme look, in all themes */
.header .nav a, .nav a{
  font-family: 'Bowlby One SC', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .8px;
}

/* 2) Light theme: make header text black (brand + tabs) */
@media (prefers-color-scheme: light){
  .header .brand .title,
  .header .nav a{
    color: #000 !important;
  }
  .header .nav a:hover{
    background: rgba(0,0,0,.08) !important;
  }
}

/* 3) Dark theme: keep white text but same font */
@media (prefers-color-scheme: dark){
  .header .nav a{
    color: #fff !important;
  }
}

/* 4) Mobile: show hamburger at right and collapse menu */
.nav-toggle{ display:none; }
@media (max-width: 768px){
  .header .header-inner{ gap:10px; }
  .nav-toggle{
    display:inline-block;
    margin-left:auto;
    background:transparent;
    border:0;
    font-size:1.8rem;
    line-height:1;
    padding:8px;
    cursor:pointer;
  }
  .header nav{ display:none; }
  .header nav.is-open{ display:block; }
  .header nav a{ display:block; padding:12px 10px; min-height:44px; }
}



/* ==== Mobile Nav Panel Fix v6 ==== */
.header{ position: sticky; top: 0; z-index: 1000; }

@media (max-width: 768px){
  .header .header-inner{ position: relative; }
  /* Dropdown panel */
  .header nav{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--header-bg, #FF3EA5);
    padding: 10px 12px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
  }
  .header .brand .title{ font-size: 16px !important; }
  .header .nav a{
    display:block !important;
    padding: 12px 10px !important;
    min-height: 44px !important;
    font-size: 16px !important;
    text-transform: none !important;
    letter-spacing: .3px !important;
  }
  /* Keep the hamburger on the right, inline with brand */
  .nav-toggle{ margin-left: auto !important; }
}


/* NAV LOWERCASE ENFORCED */
.header .nav a, .nav a{
  text-transform: none !important;
  letter-spacing: .3px !important;
}


/* MOBILE HAMBURGER DEFAULT HIDDEN + PANEL */
@media (max-width: 768px){
  .header nav{ display: none !important; }
  .header nav.is-open{ display: block !important; }
  .nav-toggle{ display: inline-block !important; }
  /* Make header compact */
  .header .header-inner{ padding: 10px var(--content-pad); }
}


/* === Mobile header layout + hamburger visibility (v8) === */
@media (max-width: 768px){
  .header .header-inner{ display:flex; align-items:center; gap:10px; }
  .header .brand{ display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; }
  .header .brand .title{ 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
    font-size: 16px !important;
  }
  .nav-toggle{ 
    flex: 0 0 auto; 
    display:inline-block !important; 
    margin-left:auto !important; 
    width:40px; height:32px; 
    position:relative; 
    color:#000 !important; /* light default */
  }
  /* bars */
  .nav-toggle::before, .nav-toggle::after, .nav-toggle span{
    content:""; position:absolute; left:8px; right:8px; height:3px; background:currentColor; border-radius:2px;
  }
  .nav-toggle::before{ top:8px; }
  .nav-toggle span{ top:14.5px; }
  .nav-toggle::after{ bottom:8px; }

  /* current tab chip */
  .current-tab{ 
    display:inline-flex; margin-left:8px; padding:2px 8px; border-radius:999px; 
    background:rgba(0,0,0,.12); color:#000; font: inherit; font-size:12px; 
  }
  /* dropdown panel */
  .header nav{ 
    display:none !important; position:absolute; top:100%; left:0; right:0; 
    background:var(--header-bg, #FF3EA5); padding:10px 12px; 
    border-bottom-left-radius:16px; border-bottom-right-radius:16px; 
    box-shadow:0 6px 20px rgba(0,0,0,.25);
  }
  .header nav.is-open{ display:block !important; }
  .header nav a{ display:block !important; padding:12px 10px !important; min-height:44px !important; }
}
@media (prefers-color-scheme: dark){
  .nav-toggle{ color:#fff !important; }
  @media (max-width:768px){
    .current-tab{ background:rgba(255,255,255,.14); color:#fff; }
  }
}


/* v9: visible hamburger + stacking */
.header{ position: sticky; top:0; z-index: 2000; }
@media (max-width: 768px){
  .nav-toggle{ display:inline-block !important; z-index: 2001; }
  .header .header-inner{ position: relative; }
  .header nav{ z-index: 2000; }
}


/* ===== Universal Hamburger Header (v10) ===== */
.header{ position: sticky; top:0; z-index: 3000; }

/* Header layout */
.header .header-inner{ display:flex; align-items:center; justify-content:flex-start; gap:12px; padding:12px var(--content-pad); }
.header .brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.header .brand .title{ font-size:18px; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Hamburger button (3 bars) shown on ALL widths */
.nav-toggle{ position:relative; width:40px; height:32px; background:transparent; border:0; cursor:pointer; margin-left:auto; display:inline-block !important; }
.nav-toggle::before, .nav-toggle::after, .nav-toggle span{
  content:""; position:absolute; left:8px; right:8px; height:3px; background: currentColor; border-radius:2px;
}
.nav-toggle::before{ top:8px; }
.nav-toggle span{ top:14.5px; }
.nav-toggle::after{ bottom:8px; }

/* Default: nav hidden (ALL widths). Opens as dropdown panel under header */
.header .header-inner{ position:relative; }
.header nav{ display:none !important; position:absolute; top:100%; left:0; right:0;
  background: var(--header-bg, #FF3EA5); padding:10px 12px;
  border-bottom-left-radius:16px; border-bottom-right-radius:16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.header nav.is-open{ display:block !important; }
.header nav a{ display:block; padding:12px 10px; min-height:44px; text-transform:none !important; letter-spacing:.3px !important; }

/* Colors for light/dark */
@media (prefers-color-scheme: light){
  .header .brand .title, .header .nav a, .nav-toggle{ color:#000 !important; }
}
@media (prefers-color-scheme: dark){
  .header .brand .title, .header .nav a, .nav-toggle{ color:#fff !important; }
}

/* Desktop tweaks: make links larger when panel open on wide screens */
@media (min-width: 769px){
  .header nav a{ font-size:16px; }
}

/* Prevent content jump under sticky header spacing handled by existing layout */


/* ===== LDV CLEAN HEADER v11 (scoped) ===== */

.ldv-header{ position: sticky; top:0; z-index:4000; }
.ldv-header__inner{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  padding:6px var(--content-pad);
  background: var(--header-bg, #FF3EA5);
}
.ldv-header__brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
}
.ldv-header__brand img{
  width:40px;
  height:auto;
  display:block;
}
.ldv-header__title{
  font-family: 'Bowlby One SC', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:1rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Toggle (three bars) always visible */
.ldv-header__toggle{ position:relative; width:40px; height:32px; margin-left:auto; background:transparent; border:0; cursor:pointer; color:inherit; }
.ldv-header__toggle::before, .ldv-header__toggle::after, .ldv-header__toggle span{
  content:""; position:absolute; left:8px; right:8px; height:3px; background: currentColor; border-radius:2px;
}
.ldv-header__toggle::before{ top:8px; }
.ldv-header__toggle span{ top:14.5px; }
.ldv-header__toggle::after{ bottom:8px; }

/* Dropdown panel */
.ldv-header__inner{ position:relative; }
.ldv-header__nav{ display:none; position:absolute; top:100%; left:0; right:0; background: var(--header-bg, #FF3EA5); padding:10px 12px; border-bottom-left-radius:16px; border-bottom-right-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.ldv-header__nav.is-open{ display:block; }
.ldv-header__nav a{ display:block; padding:12px 10px; min-height:44px; text-decoration:none; font-family: 'Bowlby One SC', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif; text-transform:none; letter-spacing:.3px; }

/* Colors per theme */
@media (prefers-color-scheme: light){
  .ldv-header__inner, .ldv-header__nav{ --header-bg:#FF3EA5; }
  .ldv-header__title, .ldv-header__nav a, .ldv-header__toggle{ color:#000 !important; }
}
@media (prefers-color-scheme: dark){
  .ldv-header__title, .ldv-header__nav a, .ldv-header__toggle{ color:#fff !important; }
}

/* Make links a bit larger on desktop panel */
@media (min-width:769px){
  .ldv-header__nav a{ font-size:16px; }
}


/* v12: Bowlby One SC on nav + current pill */
.ldv-header__nav a{
  font-family: 'Bowlby One SC', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
  text-transform: none !important;
  letter-spacing: .3px !important;
}
/* current page label next to title */
.ldv-header__current{
  display:inline-flex; align-items:center; gap:.4ch;
  margin-left:8px; padding:4px 10px; border-radius:999px;
  font-family: 'Bowlby One SC', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  font-size: 13px; line-height:1;
  background: rgba(0,0,0,.12); color:#000;
}
@media (prefers-color-scheme: dark){
  .ldv-header__current{ background: rgba(255,255,255,.16); color:#fff; }
}


/* ===== LDV HEADER v13 adjustments ===== */
/* Title visible in both themes */
@media (prefers-color-scheme: light){
  .ldv-header__title{ color:#000 !important; }
}
@media (prefers-color-scheme: dark){
  .ldv-header__title{ color:#fff !important; }
}

/* Nav tabs: lowercase + Bowlby */
.ldv-header__nav a{
  font-family: 'Bowlby One SC', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
  text-transform: none !important;
  letter-spacing: .3px !important;
}

/* Current-page pill: same background as header */
.ldv-header__current{
  display:inline-flex; align-items:center; padding:4px 10px; margin-left:8px;
  border-radius:999px; background: var(--header-bg, #FF3EA5);
  font-family: 'Bowlby One SC', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  font-size: 13px; line-height:1;
  /* subtle outline to stand out on same color */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  color:#000;
}
@media (prefers-color-scheme: dark){
  .ldv-header__current{ color:#fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
}


/* ===== LDV HEADER v14: mobile polish ===== */
@media (max-width: 600px){
  .ldv-header__inner{ gap:8px; padding:10px var(--content-pad); }
  .ldv-header__title{ font-size: clamp(14px, 4.4vw, 16px) !important; }
  /* hide the current-page pill to keep header clean */
  .ldv-header__current{ display:none !important; }
  /* make sure hamburger is clearly visible and tappable */
  .ldv-header__toggle{ width:44px; height:36px; margin-left:auto !important; }
  .ldv-header__toggle,
  .ldv-header__toggle::before,
  .ldv-header__toggle::after,
  .ldv-header__toggle span{ background: none; }
  .ldv-header__toggle::before,
  .ldv-header__toggle::after,
  .ldv-header__toggle span{
    background: currentColor !important;
  }
}

/* Make hamburger color explicit per theme for contrast */
@media (prefers-color-scheme: light){
  .ldv-header__toggle{ color:#000 !important; }
}
@media (prefers-color-scheme: dark){
  .ldv-header__toggle{ color:#fff !important; }
}

/* remove any unintended separators next to the toggle by collapsing whitespace */
.ldv-header__inner > *{ margin: 0; }


/* ===== LDV HEADER v15: perfect hamburger alignment + focus reset ===== */
.ldv-header__toggle{
  appearance: none; -webkit-appearance: none;
  outline: none; box-shadow: none;
  width: 44px; height: 36px; position: relative;
}
.ldv-header__toggle::before, .ldv-header__toggle::after, .ldv-header__toggle span{
  left: 9px; right: 9px; height: 3px; border-radius: 2px; background: currentColor;
}
.ldv-header__toggle::before{ top: 10px; }
.ldv-header__toggle span{ top: 17px; }
.ldv-header__toggle::after{ top: 24px; bottom: auto; }
.ldv-header__toggle:focus{ outline: none; box-shadow: none; }


/* ===== v17: Light-mode text color for Normatives + Contacte mobile link layout ===== */

/* Normatives: ensure headings and paragraphs are black in light mode */
@media (prefers-color-scheme: light){
  .section--normatives .card h3,
  .section--normatives .card p,
  .section--normatives .card .muted{
    color:#000 !important;
  }
}

/* Contacte: keep mail/instagram links tidy on mobile */
@media (max-width: 768px){
  .section--contacte a[href^="mailto:"],
  .section--contacte a[href*="instagram.com"]{
    display:inline-block !important;
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
    text-decoration-color: currentColor;
    text-underline-offset: 2px;
  }
  /* avoid odd underline spanning whole card if link is block */
  .section--contacte a{ display:inline; }
}


/* ===== v18: Light-mode card text (except shop) + Contacte alignment ===== */
@media (prefers-color-scheme: light){
  .section:not(.section--shop) .card .card-title,
  .section:not(.section--shop) .card .card-subtitle,
  .section:not(.section--shop) .card p{
    color:#000 !important;
  }
}

/* Contacte: email/instagram tidy in all themes */
.section .copy-email{
  display:inline-block; 
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: inherit;
}
.section a.btn.btn-outline{ display:inline-block; }

/* Contacte grid tighter on mobile */
@media (max-width: 768px){
  .grid.grid--contact{ grid-template-columns: 1fr !important; }
}


/* ===== v19: Decàleg light-mode readable + Contacte alignment ===== */
/* Make any card title/text black in light mode (except shop) even if no special classes are present */
@media (prefers-color-scheme: light){
  body:not([data-theme="dark"]) .section:not(.section--shop) .card h1,
  body:not([data-theme="dark"]) .section:not(.section--shop) .card h2,
  body:not([data-theme="dark"]) .section:not(.section--shop) .card h3,
  body:not([data-theme="dark"]) .section:not(.section--shop) .card h4,
  body:not([data-theme="dark"]) .section:not(.section--shop) .card p,
  body:not([data-theme="dark"]) .section:not(.section--shop) .card .muted{
    color:#000 !important;
    -webkit-text-fill-color:#000 !important;
    text-shadow:none !important;
  }
}

/* Contacte: email & Instagram cards consistent layout */
.section .card p{ margin: 0 0 1rem 0; }
@media (max-width: 768px){
  .section .grid[style*="grid-template-columns"]{ grid-template-columns: 1fr !important; }
  .section .card .btn{ width: auto; }
  .section .card .btn.btn-outline{ display:inline-block; }
  .copy-email{ display:inline-block; max-width:100%; overflow-wrap:anywhere; }
}


/* ===== v20: Contacte — stack Instagram under Correu on mobile ===== */
@media (max-width: 768px){
  .grid--contact-top{ grid-template-columns: 1fr !important; }
}


/* ===== v21: Mobile light-mode header text + hamburger white ===== */
@media (prefers-color-scheme: light) and (max-width: 768px){
  header.site-header, .header, .navbar {
    color: #fff !important;
  }
  header.site-header .site-title,
  header.site-header .nav-toggle,
  header.site-header .nav-toggle span,
  header.site-header .menu-icon,
  header.site-header .menu-icon::before,
  header.site-header .menu-icon::after {
    color: #fff !important;
    background-color: #fff !important;
  }
}


/* ===== v22b: header text/icons white (no background rectangles) ===== */
.ldv-header__title,
.ldv-header__nav a{
  color:#fff !important;
  background: transparent !important;
  -webkit-text-fill-color:#fff !important;
}
.ldv-header__toggle{ color:#fff !important; }
.ldv-header__toggle::before,
.ldv-header__toggle::after,
.ldv-header__toggle span{
  background-color:#fff !important;
}

/* Desktop alignment: keep hamburger at right */
@media (min-width: 769px){
  .ldv-header__inner{ display:flex; align-items:center; }
  .ldv-header__toggle{ margin-left:auto; }
}

/* Remove any visual "pill" next to the title */
.ldv-header__current{ display:none !important; }



/* ===================================================================
   LDV FINAL DESKTOP OVERRIDES (>=769px) — keep mobile intact
   =================================================================== */
@media (min-width: 769px){

  /* Single, solid header color */
  .ldv-header{ background:#0f1b2d !important; box-shadow: 0 4px 16px rgba(0,0,0,.25) !important; }
  .ldv-header__inner{ background:transparent !important; }
  .header, header{ background:transparent !important; }

  /* Header brand title: solid white */
  .ldv-header__title{
    color:#fff !important;
    background:none !important;
    -webkit-text-fill-color:#fff !important;
    -webkit-text-stroke:0 !important;
    text-shadow:none !important;
    mix-blend-mode:normal !important;
    filter:none !important;
  }

  /* Nav labels in lowercase */
  .ldv-header__nav a{ 
    text-transform: lowercase !important;
    color:#fff !important;
    opacity:.95;
  }
  .ldv-header__nav a:hover{ opacity:1; }

  /* Hide burger on desktop */
  .ldv-header__toggle{ display:none !important; }

  /* Hero title: force solid white */
  .hero-visual .copy h1{
    color:#fff !important;
    background:none !important;
    -webkit-text-fill-color:#fff !important;
    -webkit-text-stroke:0 !important;
    text-shadow:none !important;
    mix-blend-mode:normal !important;
    filter:none !important;
  }
  .hero-visual .copy{ color:#fff !important; }
}


/* === Header nav casing fix (2025-11-11): keep menu labels in normal case on desktop === */
.ldv-header__nav a { text-transform: none !important; }


/* === Header light/dark color fix (2025-11-11) === */
.ldv-header__inner{ background: #FF3EA5; }
@media (prefers-color-scheme: dark){
  .ldv-header__inner{ background: #C5006D; }
}


/* === Tabs for preinscripcio (2025-11-11) === */
.ldv-tabs{ display:flex; gap:.5rem; margin: 1rem 0 1.25rem 0; flex-wrap:wrap; }
.ldv-tab{ cursor:pointer; border:0; padding:.6rem .9rem; border-radius:9999px; background:rgba(255,255,255,.12); color:#fff; font-weight:700; letter-spacing:.3px; }
.ldv-tab.is-active{ background:#fff; color:#111; }
.ldv-tabpanel{ animation: fadein .22s ease; }
@keyframes fadein{ from{ opacity:0; transform: translateY(4px) } to{ opacity:1; transform:none } }
.form-embed-wrap{ aspect-ratio: 3/4; max-width: 920px; margin: 0 auto; }
.form-embed{ width: 100%; height: 100%; border:0; }
@media (min-width: 820px){
  .form-embed-wrap{ aspect-ratio: 16/10; }
}


/* === Preinscripcio: unified form background + theme-aware tabs (2025-11-11) === */

/* Consistent section background for all embedded forms */
.section--form{
  /* Light mode surface */
  background: var(--form-surface, #FFFFFF);
}
@media (prefers-color-scheme: dark){
  .section--form{
    /* Dark mode surface */
    background: var(--form-surface-dark, #121212);
  }
}

/* Form wrapper inherits the section background and adds subtle elevation */
.form-embed-wrap{
  background: inherit;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  overflow: hidden;
}

/* Tabs: theme-aware colors to match the rest of the site */
:root{
  --tab-bg: rgba(255,255,255,.14);
  --tab-fg: #FFFFFF;
  --tab-active-bg: #FFFFFF;
  --tab-active-fg: #111111;
  --tab-ring: rgba(255,255,255,.4);
}
@media (prefers-color-scheme: dark){
  :root{
    --tab-bg: rgba(255,255,255,.12);
    --tab-fg: #FFFFFF;
    --tab-active-bg: #FFFFFF;
    --tab-active-fg: #111111;
    --tab-ring: rgba(255,255,255,.45);
  }
}

/* Apply variables */
.ldv-tabs{ display:flex; gap:.5rem; margin: 1rem 0 1.25rem 0; flex-wrap:wrap; }
.ldv-tab{
  cursor:pointer; border:0; padding:.6rem .9rem; border-radius:9999px;
  background: var(--tab-bg); color: var(--tab-fg);
  font-weight:700; letter-spacing:.3px; transition: transform .08s ease, opacity .12s ease, background .12s ease;
}
.ldv-tab:hover{ opacity:.92; transform: translateY(-1px); }
.ldv-tab:focus-visible{ outline: 2px solid var(--tab-ring); outline-offset: 2px; }
.ldv-tab.is-active{ background: var(--tab-active-bg); color: var(--tab-active-fg); }

/* Ensure iframes fill the wrapper fully */
.form-embed{ width:100%; height:100%; display:block; border:0; background: transparent; }


/* === Preinscripcio tab color fix (2025-11-11) === */

/* Base style for tabs */
.ldv-tab {
  cursor: pointer;
  border: 0;
  padding: .6rem .9rem;
  border-radius: 9999px;
  font-weight: 700;
  letter-spacing: .3px;
  transition: transform .08s ease, opacity .12s ease, background .12s ease;
}

/* Light mode: fucsia buttons */
@media (prefers-color-scheme: light) {
  .ldv-tab {
    background: #FF3EA5;
    color: #fff;
  }
  .ldv-tab.is-active {
    background: #fff;
    color: #111;
    border: 2px solid #FF3EA5;
  }
}

/* Dark mode: inverted */
@media (prefers-color-scheme: dark) {
  .ldv-tab {
    background: #fff;
    color: #111;
  }
  .ldv-tab.is-active {
    background: #FF3EA5;
    color: #fff;
  }
}


/* === Header fucsia (light) + gris fondo formularios (2025-11-11) === */

/* Forzamos variable y uso del color del header por tema */
:root{
  --header-bg: #FF3EA5; /* fucsia en modo claro */
}
@media (prefers-color-scheme: dark){
  :root{
    --header-bg: #C5006D; /* tono más oscuro en modo oscuro */
  }
}
.ldv-header__inner{
  background: var(--header-bg) !important;
}

/* Fondo uniforme del bloque donde se integran los formularios */
.section--form{
  background: #f5f5f5 !important; /* gris claro */
}
@media (prefers-color-scheme: dark){
  .section--form{
    background: #1a1a1a !important; /* gris oscuro */
  }
}

/* El wrapper del iframe hereda el mismo gris para evitar "parches" blancos */
.section--form .form-embed-wrap{
  background: #f5f5f5 !important;
}
@media (prefers-color-scheme: dark){
  .section--form .form-embed-wrap{
    background: #1a1a1a !important;
  }
}


/* === Header desktop/mobile unify fix (2025-11-11) === */
/* Forzamos que TODO el header use el mismo fondo fucsia (light) / oscuro (dark) */
.ldv-header{ background: var(--header-bg) !important; }
.ldv-header__inner{ background: transparent !important; }

/* Menú: sin mayúsculas forzadas */
.ldv-header__nav a{ text-transform: none !important; }

/* Desktop: el nav va plano, sin caja negra ni sombra, y en la misma línea que la marca */
@media (min-width: 960px){
  .ldv-header__nav{
    position: static !important;
    display: flex !important;
    align-items: center;
    gap: 18px;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  .ldv-header__nav a{
    color: #fff !important;
    background: transparent !important;
    -webkit-text-fill-color: #fff !important;
  }
}

/* Mobile: el panel desplegable sí usa el color del header */
@media (max-width: 959px){
  .ldv-header__nav{
    background: var(--header-bg) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
  }
}


/* === Global buttons: fucsia bg + white text (2025-11-11) === */
button, .btn, .button, .cta, .ldv-btn, a.btn, a.button, a.cta {
  color: #fff !important;
  background-color: #FF3EA5 !important;
  border: none;
  transition: background-color .2s ease, transform .1s ease;
}
button:hover, .btn:hover, .button:hover, .cta:hover, .ldv-btn:hover, a.btn:hover, a.button:hover, a.cta:hover {
  background-color: #e21b8e !important;
  transform: translateY(-1px);
}
/* Ensure icons inside buttons are white */
button svg, .btn svg, .button svg, .cta svg, .ldv-btn svg, a.btn svg, a.button svg, a.cta svg {
  fill: #fff !important;
  stroke: #fff !important;
}

/* === Header/Footer colors per theme (2025-11-11) === */
:root{
  --header-bg: #FF3EA5; /* light */
  --footer-bg: #FF3EA5; /* light */
}
@media (prefers-color-scheme: dark){
  :root{
    --header-bg: #C5006D; /* dark */
    --footer-bg: #C5006D; /* dark */
  }
}
.ldv-header{ background: var(--header-bg) !important; }
.ldv-header__inner{ background: transparent !important; }
.footer{ background: var(--footer-bg) !important; color: #fff !important; }

/* Desktop nav inline, no dark box */
@media (min-width: 960px){
  .ldv-header__nav{
    position: static !important;
    display: flex !important;
    align-items: center;
    gap: 18px;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  .ldv-header__nav a{
    color: #fff !important;
    background: transparent !important;
    -webkit-text-fill-color: #fff !important;
    text-transform: none !important;
  }
}


/* === FINAL FIX: Buttons (light) + Dark header/footer gradient (2025-11-11) === */

/* 1) BOTONES (forzar texto blanco en TODOS los botones y CTAs) */
:is(button, a, .btn, .button, .cta, .ldv-btn):is(.btn, .button, .cta, .ldv-btn, [role="button"]),
button, a.btn, a.button, a.cta, a.ldv-btn {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
/* Si el botón es fucsia o rosa, mantenemos blanco igualmente */
:is(.btn, .button, .cta, .ldv-btn)[style*="FF3EA5"],
a[style*="FF3EA5"] {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* 2) HEADER/FOOTER: degradado lila en modo oscuro */
@media (prefers-color-scheme: dark){
  .ldv-header{
    background: linear-gradient(90deg, #7A3EFF 0%, #C5006D 100%) !important;
  }
  .ldv-header__inner{
    background: transparent !important;
  }
  .footer{
    background: linear-gradient(90deg, #7A3EFF 0%, #C5006D 100%) !important;
    color: #fff !important;
  }
  /* El menú en desktop sin caja superpuesta */
  @media (min-width: 960px){
    .ldv-header__nav{
      background: transparent !important;
      box-shadow: none !important;
    }
    .ldv-header__nav a{
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
      text-transform: none !important;
    }
  }
}

/* 3) HEADER/FOOTER en modo claro: fucsia sólido coherente */
@media (prefers-color-scheme: light){
  .ldv-header{ background: #FF3EA5 !important; }
  .ldv-header__inner{ background: transparent !important; }
  .footer{ background: #FF3EA5 !important; color:#fff !important; }
}

/* 4) Aumentamos especificidad contra posibles overrides locales */
html body .footer, html body .ldv-header { background-clip: padding-box !important; }


/* === Dark mode lilac gradient buttons (2025-11-11) === */
@media (prefers-color-scheme: dark) {
  button, .btn, .button, .cta, .ldv-btn, a.btn, a.button, a.cta {
    background: linear-gradient(90deg, #7A3EFF 0%, #C5006D 100%) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: none !important;
  }
  button:hover, .btn:hover, .button:hover, .cta:hover, .ldv-btn:hover,
  a.btn:hover, a.button:hover, a.cta:hover {
    background: linear-gradient(90deg, #8B5EFF 0%, #D31C8C 100%) !important;
    transform: translateY(-1px);
  }
}


/* === Intranet embed styles (2025-11-11) === */
.section--intranet{
  background: #f5f5f5;
}
@media (prefers-color-scheme: dark){
  .section--intranet{
    background: #1a1a1a;
  }
}
.app-embed-wrap{
  aspect-ratio: 16/10;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  background: #fff;
}
@media (prefers-color-scheme: dark){
  .app-embed-wrap{ background: #111; }
}
.app-embed{
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}


/* === Intranet: full-bleed embed (2025-11-11) === */
.section--intranet{ background: transparent !important; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.section--intranet .container{ max-width: 1400px; }
.app-embed-wrap--full{
  width: 100%;
  height: calc(100vh - 180px); /* viewport minus approx header+footer */
  min-height: 600px;
  margin: 0 auto;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden;
}
.app-embed{ width: 100%; height: 100%; display: block; border: 0; background: transparent; }
@media (max-width: 900px){
  .app-embed-wrap--full{ height: calc(100vh - 200px); min-height: 520px; }
}


/* === Notice banner (home, 2025-11-11) === */
.notice-banner{
  background: linear-gradient(90deg, #FF3EA5 0%, #7A3EFF 100%);
  color:#fff;
  padding: 12px 0;
}
.notice-banner__inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.notice-banner__text{
  display:flex; align-items:center; gap:10px; font-size: clamp(14px, 2.2vw, 20px); line-height:1.3;
}
.notice-banner__emoji{ font-size: 1.2em; }
.notice-banner__cta{
  display:inline-block; padding: .6rem 1rem; border-radius:9999px;
  background:#111; color:#fff; text-decoration:none; font-weight:700; letter-spacing:.3px;
  transition: transform .08s ease, opacity .12s ease;
}
.notice-banner__cta:hover{ transform: translateY(-1px); opacity:.95; }

@media (prefers-color-scheme: dark){
  .notice-banner{ background: linear-gradient(90deg, #7A3EFF 0%, #C5006D 100%); }
  .notice-banner__cta{ background:#fff; color:#111; }
}


/* === Notice banner (home, small, 2025-11-11) === */
.notice-banner{
  padding: 8px 0;
  /* Light: fuchsia solid */
  background: #FF3EA5;
  color:#fff;
}
@media (prefers-color-scheme: dark){
  .notice-banner{
    /* Dark: lilac -> fuchsia gradient */
    background: linear-gradient(90deg, #7A3EFF 0%, #C5006D 100%);
  }
}
.notice-banner .container{ max-width: var(--content-max, 1200px); }
.notice-banner__inner{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.notice-banner__text{
  display:flex; align-items:center; gap:8px;
  font-family: inherit; font-size: 1rem; line-height:1.35; font-weight:500;
}
.notice-banner__emoji{ font-size: 1.1em; }
.notice-banner__cta{
  display:inline-block; padding: .45rem .8rem; border-radius: 9999px;
  text-decoration:none; font-weight:700; letter-spacing:.3px;
  transition: transform .08s ease, opacity .12s ease;
  background:#111; color:#fff;
}
.notice-banner__cta:hover{ transform: translateY(-1px); opacity:.95; }
@media (prefers-color-scheme: dark){
  .notice-banner__cta{ background:#fff; color:#111; }
}


/* === Notice banner refinements (2025-11-11) === */
.notice-banner{ padding: 6px 0; }
.notice-banner .container{ max-width: var(--content-max, 1200px); }
.notice-banner__inner{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.notice-banner__text{
  display:flex; align-items:center; gap:8px;
  font-family: inherit; font-size: .95rem; line-height:1.3; font-weight:500;
}
.notice-banner__emoji{ font-size: 1em; }

/* CTA inherits .btn global styles; just tweak padding to be compact */
.notice-banner__cta{
  padding: .4rem .8rem !important;
  border-radius: 9999px !important;
}

/* Optional small rounding of banner edges to match cards */
.notice-banner .container{
  border-radius: 12px;
}


/* === Notice banner typography & sizing final (2025-11-11) === */
.notice-banner{ padding: 4px 0; margin-bottom: 10px; }
.notice-banner__inner{ gap: 6px; }
.notice-banner__text{
  font-family: inherit !important;
  font-size: 1rem !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
}
.notice-banner__text strong{
  font-weight: 600 !important;
}
.notice-banner__emoji{ font-size: 1em !important; }
/* Make CTA slightly smaller than default buttons for balance */
.notice-banner__cta.btn{
  font-size: .9rem !important;
  padding: .3rem .7rem !important;
  border-radius: 9999px !important;
}


/* === NOTICE BANNER: FINAL LIGHT/DARK + CENTER (2025-11-11) === */
/* Light mode: fuchsia solid */
.notice-banner{
  background: #FF3EA5 !important;
  color: #fff !important;
  padding: 6px 0;
  margin-bottom: 10px;
}
/* Center content */
.notice-banner .container{ max-width: var(--content-max, 1200px); }
.notice-banner__inner{
  display:flex; flex-wrap:wrap;
  gap: 8px;
  justify-content: center;  /* center horizontally */
  align-items:center;
  text-align:center;
}
.notice-banner__text{
  font-family: inherit !important;
  font-size: 1rem !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  color:#fff !important;
}
.notice-banner__text strong{ font-weight: 600 !important; }
.notice-banner__emoji{ font-size: 1em !important; margin-right: 6px; }

/* CTA smaller and centered */
.notice-banner__cta.btn{
  font-size: .85rem !important;
  padding: .25rem .6rem !important;
  border-radius: 9999px !important;
  align-self: center;
}

/* Dark mode: lilac -> fuchsia gradient */
@media (prefers-color-scheme: dark){
  .notice-banner{
    background: linear-gradient(90deg, #7A3EFF 0%, #C5006D 100%) !important;
    color:#fff !important;
  }
  .notice-banner__cta.btn{
    /* keep contrast in dark */
    background: #fff !important;
    color: #111 !important;
  }
}


/* === Notice banner: centered box, inherited typography (2025-11-11) === */
.notice-banner{ padding: 6px 0; margin-bottom: 10px; background: transparent !important; }
.notice-banner__box{
  max-width: 90%;
  margin: 0 auto;
  border-radius: 10px;
  padding: 6px 10px;
  background: #FF3EA5; /* light mode default */
  color: inherit;
}
@media (prefers-color-scheme: dark){
  .notice-banner__box{ background: linear-gradient(90deg, #7A3EFF 0%, #C5006D 100%); }
}
.notice-banner__inner{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; text-align:center;
}
.notice-banner__text{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family: inherit; font-size: 1rem; line-height: 1.35;
  font-weight: inherit; /* inherit site default */
}
.notice-banner__lead{ font-weight: inherit; }
.notice-banner__body{ font-weight: inherit; }
.notice-banner__emoji{ font-size: 1em; }

.notice-banner__cta.btn{
  font-size: .85rem !important;
  padding: .25rem .6rem !important;
  border-radius: 9999px !important;
  align-self: center;
}


/* === Notice banner FINAL FONT ALIGNMENT (2025-11-11) === */
.notice-banner__box{
  font-family: 'Quicksand', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: #fff !important;
  text-align: center !important;
}
.notice-banner__lead{
  font-family: 'Bowlby One SC', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.notice-banner__body{
  font-family: 'Quicksand', sans-serif !important;
}
.notice-banner__cta.btn{
  font-family: 'Quicksand', sans-serif !important;
  font-size: .85rem !important;
  padding: .25rem .6rem !important;
  border-radius: 9999px !important;
}


/* === Notice banner: mobile & dark-mode button unification (2025-11-11) === */
/* Dark mode: make CTA like all other buttons (gradient) */
@media (prefers-color-scheme: dark){
  .notice-banner__cta.btn{
    background: linear-gradient(90deg, #7A3EFF 0%, #C5006D 100%) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: none !important;
  }
  .notice-banner__cta.btn:hover{
    background: linear-gradient(90deg, #8B5EFF 0%, #D31C8C 100%) !important;
    transform: translateY(-1px);
  }
}

/* Mobile layout tweaks */
@media (max-width: 640px){
  .notice-banner{ padding: 6px 0; }
  .notice-banner__box{
    max-width: 94%;
    padding: 8px 10px;
    border-radius: 12px;
  }
  .notice-banner__inner{
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }
  .notice-banner__text{
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
  }
  .notice-banner__cta.btn{
    width: auto; /* keep compact, not full width */
    font-size: 0.9rem !important;
    padding: .35rem .8rem !important;
  }
}


/* === MOBILE DARK MODE RESCUE (2025-11-11) === */
/* Goal: restore proper dark theme on small screens (iOS/Android) */

@media (prefers-color-scheme: dark) {
  /* Base page */
  html, body {
    background: #0e0e10 !important;
    color: #eaeaea;
  }

  /* Header brand strip */
  .ldv-header {
    background: linear-gradient(90deg, #7A3EFF 0%, #C5006D 100%) !important;
    color: #fff !important;
  }
  .ldv-header__inner { background: transparent !important; }
  .ldv-header__title { color: #fff !important; }

  /* Mobile menu drawer */
  @media (max-width: 960px) {
    .ldv-header__nav {
      background: linear-gradient(180deg, #7A3EFF 0%, #C5006D 100%) !important;
      box-shadow: 0 18px 40px rgba(0,0,0,.45) !important;
      border-bottom-left-radius: 22px;
      border-bottom-right-radius: 22px;
    }
    .ldv-header__nav a {
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
      text-transform: none !important;
    }
    /* Burger icon lines */
    .ldv-header__toggle span,
    .ldv-header__toggle span::before,
    .ldv-header__toggle span::after {
      background: #fff !important;
    }
  }

  /* Notice banner (dark already handled elsewhere, ensure text visible) */
  .notice-banner__box, .notice-banner {
    color: #fff !important;
  }

  /* Footer */
  .footer {
    background: linear-gradient(90deg, #7A3EFF 0%, #C5006D 100%) !important;
    color: #fff !important;
  }

  /* Cards/sections default dark surface */
  .section, .card, .container--surface, .hero-visual .media {
    background: transparent;
  }
}

/* Avoid accidental bright fuchsia on dark at small screens */
@media (prefers-color-scheme: dark) and (max-width: 960px) {
  .ldv-header, .ldv-header__nav, .footer, .notice-banner__box {
    background-blend-mode: normal;
  }
}


/* ==== LDV DESKTOP HEADER: ONE LINE (ultra-scoped, from v22b base) ==== */
@media (min-width: 1024px) {
  /* Only the main site header */
  header.ldv-header {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    column-gap: 1rem !important;
  }
  header.ldv-header .ldv-header__inner {
    display: inline-flex !important;
    align-items: center !important;
    gap: .75rem !important;
    min-width: 0 !important;
  }
  header.ldv-header .ldv-header__title {
    white-space: nowrap !important;
  }
  header.ldv-header .ldv-header__toggle {
    display: none !important; /* solo escritorio */
  }
  header.ldv-header .ldv-header__nav {
    display: inline-flex !important;
    justify-self: end !important;
    align-items: center !important;
    gap: 1.25rem !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  header.ldv-header .ldv-header__nav a {
    display: inline-block !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    padding: .75rem 0 !important;
    font-size: clamp(14px, 1.6vw, 16px) !important;
  }
}



/* ==== FINAL TWEAKS (2025-11-11) ==== */

/* 1) Desktop: dar espacio por la izquierda al menú (pestañas) */
@media (min-width: 1024px) {
  header.ldv-header .ldv-header__nav {
    padding-left: 1rem !important; /* espacio a la izquierda del primer item */
  }
}

/* 2) Centrar botones de preinscripción (.ldv-tabs) en todas las resoluciones */
.section.section--form .ldv-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 6px 0 !important;
}
.section.section--form .ldv-tab {
  margin: 0 !important; /* por si algún CSS anterior los empuja a la derecha */
}



/* ==== Header desktop: right-side breathing space (2025-11-11) ==== */
@media (min-width: 1024px) {
  header.ldv-header .ldv-header__nav {
    padding-right: 1.5rem !important; /* espacio entre 'Contacte' y borde derecho */
  }
}



/* ==== MOBILE DARK: buttons = header color (2025-11-11) ==== */
@media (max-width: 767px) and (prefers-color-scheme: dark) {
  :root {
    --ldv-header-color: #7A3EFF;
    --ldv-header-color-700: #5f2fd1;
  }
  /* Botones primarios y genericos */
  .btn,
  .btn-primary {
    background: var(--ldv-header-color) !important;
    color: #fff !important;
    border-color: var(--ldv-header-color-700) !important;
  }
  /* "Pròximament" */
  .btn-soon {
    background: var(--ldv-header-color) !important;
    color: #fff !important;
    border: 1.5px solid var(--ldv-header-color-700) !important;
  }
  /* Píldoras/tab si existen con .ldv-tab -- no cambia tipografía ni layout */
  .ldv-tab.is-active,
  .ldv-tab[aria-selected="true"] {
    background: var(--ldv-header-color) !important;
    color: #fff !important;
    border-color: var(--ldv-header-color-700) !important;
  }
}



/* ==== MOBILE DARK: apply header color to ALL buttons (2025-11-11) ==== */
@media (max-width: 767px) and (prefers-color-scheme: dark) {
  :root {
    --ldv-header-color: #7A3EFF;
    --ldv-header-color-700: #5f2fd1;
  }

  /* Base button elements */
  button,
  [type="button"],
  [type="submit"],
  [type="reset"],
  .button,
  a.button,
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-soon,
  /* Tabs used as buttons */
  .ldv-tab,
  .ldv-tab.is-active,
  .ldv-tab[aria-selected="true"],
  /* Pills/chips potentially styled as buttons */
  .pill,
  .chip,
  .tag {
    background: var(--ldv-header-color) !important;
    color: #fff !important;
    border-color: var(--ldv-header-color-700) !important;
    border-width: 1.5px !important;
    border-style: solid !important;
  }

  /* Hover/active states */
  .btn:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-outline:hover,
  .btn-soon:hover,
  .ldv-tab:hover {
    filter: brightness(1.05) !important;
  }

  .btn:active,
  .btn-primary:active,
  .btn-secondary:active,
  .btn-outline:active,
  .btn-soon:active,
  .ldv-tab:active {
    filter: brightness(0.95) !important;
  }

  /* Ensure outline variants don't go transparent */
  .btn-outline {
    background: var(--ldv-header-color) !important;
  }

  /* Remove conflicting shadows if any */
  .btn, .btn-primary, .btn-secondary, .btn-outline, .btn-soon, .ldv-tab {
    box-shadow: none !important;
  }
}



/* ==== DARK WEB (DESKTOP & ALL) — unify with mobile dark (2025-11-11) ==== */
@media (prefers-color-scheme: dark) {
  /* Header & brand */
  header.ldv-header {
    background: #7A3EFF !important;
    color: #fff !important;
  }
  header.ldv-header .ldv-header__title,
  header.ldv-header a,
  header.ldv-header .ldv-header__brand {
    color: #fff !important;
  }
  /* Remove any fuchsia outline/glow around brand */
  .ldv-header__brand:focus,
  .ldv-header__brand:focus-visible,
  .ldv-header__brand:active {
    outline: none !important;
    box-shadow: none !important;
  }

  /* Footer solid like header */
  footer.footer {
    background: #7A3EFF !important;
    color: #fff !important;
  }
  footer.footer a {
    color: #fff !important;
  }

  /* Buttons in dark = header color */
  .btn, a.btn,
  .btn-primary, .btn-secondary, .btn-outline, .btn-soon,
  button, [type="button"], [type="submit"], [type="reset"],
  .button, a.button,
  .ldv-tab, .ldv-tab.is-active, .ldv-tab[aria-selected="true"],
  .notice-banner__cta, .notice-banner__cta.btn {
    background: #7A3EFF !important;
    color: #fff !important;
    border: 1.5px solid #5f2fd1 !important;
    box-shadow: none !important;
  }
  .btn-outline { background: #7A3EFF !important; }
}



/* === Extra punch visual effects (hero, gallery, buttons) === */

/* Home hero subtle movement */
.hero--home .media img{
  animation: heroDrift 18s ease-in-out infinite alternate;
  transform-origin: center 80%;
}

@keyframes heroDrift{
  0%{ transform: scale(1.02) translateY(0); }
  50%{ transform: scale(1.05) translateY(-6px); }
  100%{ transform: scale(1.03) translateY(-3px); }
}

/* Gallery cards hover tilt */
.gallery-card{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: radial-gradient(circle at 10% 0%, rgba(255,62,165,0.18), transparent 55%);
  transition: transform .22s ease-out, box-shadow .22s ease-out;
}
.gallery-card .gallery-link{
  display:block;
}
.gallery-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform .35s ease-out, filter .35s ease-out;
}
.gallery-card:hover{
  transform: translateY(-6px) rotate(-0.6deg);
  box-shadow: 0 18px 32px rgba(0,0,0,.45);
}
.gallery-card:hover img{
  transform: scale(1.04);
  filter: saturate(1.05) contrast(1.03);
}

/* Button micro-interactions */
.btn{
  transition: transform .16s ease-out, box-shadow .16s ease-out, background-color .16s ease-out, border-color .16s ease-out;
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
}
.btn:hover,
.btn:focus-visible{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.32);
}


/* === LDV HEADER: hover & scroll animation === */
.ldv-header{
  transition: box-shadow .22s ease-out, transform .22s ease-out, background .22s ease-out;
}
.ldv-header__nav a{
  position: relative;
  overflow: hidden;
  transition: color .18s ease-out, transform .18s ease-out, background .18s ease-out;
}
.ldv-header__nav a::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:6px;
  height:2px;
  border-radius:999px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  opacity:0;
  transition: transform .18s ease-out, opacity .18s ease-out;
}
.ldv-header__nav a:hover,
.ldv-header__nav a:focus-visible{
  transform: translateY(-1px);
}
.ldv-header__nav a:hover::after,
.ldv-header__nav a:focus-visible::after,
.ldv-header__nav a[aria-current="page"]::after{
  transform: scaleX(1);
  opacity:1;
}

/* Scroll state */
.ldv-header.is-scrolled{
  box-shadow: 0 14px 26px rgba(0,0,0,.45);
}
.ldv-header.is-scrolled .ldv-header__inner{
  backdrop-filter: blur(10px);
}

/* Logo hover micro-move */
.ldv-header__brand{
.ldv-header__brand img{
  width: 40px;
  height: auto;
  display:block;
}

  transition: transform .18s ease-out;
}
.ldv-header__brand:hover{
  transform: translateY(-1px);
}


/* === Desktop footer alignment === */
@media (min-width: 960px){
  .footer .container{
    width:100%;
    max-width:none;
    margin:0 auto;
    display:flex;
    justify-content:flex-start;
    align-items:center;
  }
  .footer p{
    text-align:left;
  }
}

/* === Gallery cards: enforce equal visual height and full clickable area === */
.gallery-grid--two{
  align-items: stretch;
}
.gallery-card{
  height: 100%;
}
.gallery-card .gallery-link{
  display:block;
  height:100%;
}

/* === Animated gradient titles === */
.cd-gradient{
  background-size: 200% 200%;
  animation: cdGradientShift 14s ease-in-out infinite alternate;
}

@keyframes cdGradientShift{
  0%{ background-position: 0% 0%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 100%; }
}

/* Countdown cards subtle glow pulse */
.cd-card{
  position: relative;
  overflow: hidden;
}
.cd-card::after{
  content:"";
  position:absolute;
  inset:-30%;
  background: radial-gradient(circle at 50% 0%, rgba(255,62,165,0.18), transparent 55%);
  opacity:0;
  transform: translateY(10px);
  transition: opacity .4s ease-out, transform .4s ease-out;
  pointer-events:none;
}
.section--countdown .js-reveal.is-visible .cd-card::after,
.section--countdown .cd-card:hover::after{
  opacity:1;
  transform: translateY(0);
}

/* Slight numeric pulse on hover/focus */
.cd-card:hover .cd-num,
.cd-card:focus-within .cd-num{
  transform: translateY(-2px);
}

/* Ensure smooth transform */
.cd-num{
  transition: transform .18s ease-out;
}

/* Card border glow on hover */
.card{
  position: relative;
  overflow: hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  background: radial-gradient(circle at 10% 0%, rgba(255,62,165,0.22), transparent 55%),
              linear-gradient(135deg, rgba(255,74,203,0.75), rgba(122,92,255,0.45));
  opacity:0;
  mix-blend-mode: screen;
  transition: opacity .22s ease-out;
  pointer-events:none;
}
.card:hover::before,
.card:focus-within::before{
  opacity:0.55;
}


/* Legal notes */
.legal-note{
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 6px;
}
.rgpd-check{
  display:flex;
  align-items:flex-start;
  gap:6px;
  font-size:0.85rem;
  margin:8px 0 10px;
}
.rgpd-check input[type="checkbox"]{
  margin-top:3px;
}

/* Footer override */
.footer .container{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
  text-align:left;
  width:100%;
  margin:0;
}
.footer-legal{
  font-size:0.85rem;
  opacity:0.8;
  font-family:inherit;
  margin:0;
}
.footer p{margin:0;}

/* Global font override to avoid Times New Roman in any page */
body, p, li, a, div, strong, em {
  font-family: 'Quicksand', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Legal pages hero, simple gradient background without photo */
.hero-visual--legal .media{
  min-height: clamp(140px, 24vh, 220px);
  border-radius: 24px;
  background: radial-gradient(circle at 0 0, rgba(255,62,165,0.35), transparent 55%),
              linear-gradient(135deg, #0b0b10 0%, #1f1025 40%, #2c1650 100%);
  display:flex;
  align-items:flex-end;
  padding: 18px 18px 20px;
}
.hero-visual--legal .copy{
  max-width: 640px;
}
.hero-visual--legal .copy h1{
  margin-bottom: 4px;
}

/* === Mobile-only interaction effects (do not affect desktop) === */
@media (hover: none) and (pointer: coarse){

  /* Tap feedback for buttons */
  .btn:active,
  .ldv-tab:active{
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 4px 10px rgba(0,0,0,.35);
  }

  /* Tap feedback for cards and gallery items */
  .card:active,
  .gallery-card:active,
  .product-card:active{
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 14px 26px rgba(0,0,0,.45);
  }

  /* Header links tap effect */
  .ldv-header__nav a:active{
    transform: translateY(1px) scale(0.97);
    opacity: .9;
  }

  /* Small press effect on hero image when tapped */
  .hero-visual .media:active{
    transform: scale(0.99);
  }
}

/* === FIX: Mobile Mobile — Botones rosas en todas las esquinas (2025-11-19) === */
@media (max-width: 960px) {
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-soon,
  .ldv-tab,
  .notice-banner__cta {
    background: var(--brand) !important;
    color: #fff !important;
    border-color: var(--brand-700) !important;
  }

  .btn-outline {
    background: transparent !important;
    color: var(--brand) !important;
    border-color: var(--brand) !important;
  }
}


@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero-visual .media img {
    animation: none !important;
    transform: none !important;
  }
}


/* LDV 2027: evita que Preinscripció y el resto del menú desborden la cabecera */
@media (min-width: 960px) {
  header.ldv-header {width:100%; max-width:100%; box-sizing:border-box;}
  header.ldv-header .ldv-header__inner {min-width:0; flex-shrink:1;}
  header.ldv-header .ldv-header__brand {min-width:0;}
  header.ldv-header .ldv-header__title {font-size:clamp(.82rem,1.15vw,1.15rem);}
  header.ldv-header .ldv-header__nav {min-width:0; max-width:100%; gap:clamp(7px,1.05vw,17px)!important; padding-left:8px!important; padding-right:12px!important; box-sizing:border-box;}
  header.ldv-header .ldv-header__nav a {font-size:clamp(11px,1.08vw,15px)!important; white-space:nowrap; padding:10px 0!important;}
}
/* En tablets, pasar al menú desplegable antes de que las pestañas se salgan */
@media (min-width: 960px) and (max-width: 1199px) {
  header.ldv-header .ldv-header__title {font-size:12px;}
  header.ldv-header .ldv-header__nav {gap:7px!important;}
  header.ldv-header .ldv-header__nav a {font-size:11px!important;}
}
/* Las tres pestañas de preinscripción permanecen dentro de su tarjeta */
.section--form .ldv-tabs {width:100%;max-width:100%;box-sizing:border-box;display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:10px!important;padding:8px!important;}
.section--form .ldv-tab {box-sizing:border-box;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center;flex:0 1 auto;}
.section--form .ldv-tabpanels,.section--form .form-embed-wrap {max-width:100%;min-width:0;}
@media(max-width:520px){.section--form .ldv-tab {flex:1 1 100%;}}