/* === MOBILE DARK THEME — CLEAN RESET (2025-11-11) === */
@media (prefers-color-scheme: dark) and (max-width: 960px){

  /* Base background and text */
  html, body{
    background: linear-gradient(180deg, #0e0e10 0%, #FF3EA5 100%) !important;
    color: #fff !important;
  }

  /* Header, menu drawer, footer: solid lilac */
  .ldv-header,
  .ldv-header__nav,
  .footer{
    background: #7A3EFF !important;
    color: #fff !important;
  }
  .ldv-header__inner{ background: transparent !important; }
  .ldv-header a, .ldv-header__title{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    text-transform: none !important;
  }

  /* Burger icon visible */
  .ldv-header__toggle span,
  .ldv-header__toggle span::before,
  .ldv-header__toggle span::after{
    background:#fff !important;
  }

  /* Buttons: fuchsia solid, white text */
  button, .btn, .button, .cta, .ldv-btn, a.btn, a.button, a.cta{
    background:#FF3EA5 !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:#ff5cc2 !important;
    transform: translateY(-1px);
  }

  /* Notice banner box follows lilac header for consistency */
  .notice-banner__box{ background:#7A3EFF !important; color:#fff !important; }
  .notice-banner__cta.btn{ background:#FF3EA5 !important; color:#fff !important; }

  /* Cards/panels darker surface */
  .card, .panel, .tile, .countdown-card{
    background: rgba(0,0,0,.55) !important;
    color:#fff !important;
    border: 1px solid rgba(255,255,255,.08) !important;
  }
}


/* === MOBILE DARK THEME — CLEAN OVERRIDE v2 (fix bg & keep desktop intact) 2025-11-11 === */
@media (prefers-color-scheme: dark) and (max-width: 960px){

  :root{ color-scheme: dark; }

  /* Fondo oscuro global: anulamos cualquier rosa/gradiente heredado */
  html, body, main, .page, .site, .wrapper, .layout, .screen, .content, .container{
    background-color: #0e0e10 !important;
    background-image: radial-gradient(80% 60% at 50% 120%, rgba(255,62,165,.22), rgba(255,62,165,0) 60%) !important;
    color: #fff !important;
  }
  /* Elimina pseudo-elementos que pinten degradados rosas */
  html::before, html::after,
  body::before, body::after,
  .page::before, .page::after,
  .site::before, .site::after{
    content: none !important;
    background: none !important;
  }

  /* Header/menú/footer: lila sólido SOLO en móvil oscuro */
  .ldv-header, .ldv-header__nav, .footer{
    background: #7A3EFF !important;
    color:#fff !important;
  }
  .ldv-header__inner{ background: transparent !important; }
  .ldv-header a, .ldv-header__title{ color:#fff !important; -webkit-text-fill-color:#fff !important; }
  .ldv-header__toggle span,
  .ldv-header__toggle span::before,
  .ldv-header__toggle span::after{ background:#fff !important; }

  /* Botones coherentes */
  button, .btn, .button, .cta, .ldv-btn, a.btn, a.button, a.cta{
    background:#FF3EA5 !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:#ff5cc2 !important;
    transform: translateY(-1px);
  }

  /* Banner intrapágina */
  .notice-banner__box{ background:#7A3EFF !important; }
  .notice-banner__cta.btn{ background:#FF3EA5 !important; }

  /* Tarjetas/tiles oscuros */
  .card, .panel, .tile, .countdown-card{
    background:#17171a !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    color:#fff !important;
  }
}


/* === MOBILE DARK — HAMBURGER & FOOTER FIX (2025-11-11) === */
@media (prefers-color-scheme: dark) and (max-width: 960px){

  /* Hamburger: icon lines white, no pill/background */
  .ldv-header__toggle{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  .ldv-header__toggle span,
  .ldv-header__toggle span::before,
  .ldv-header__toggle span::after{
    background:#fff !important;
  }
  .ldv-header__toggle svg,
  .ldv-header__toggle svg *{
    stroke:#fff !important;
    fill: none !important;
  }

  /* Footer: solid lilac, remove extra stripes/overlays */
  .footer{
    background:#7A3EFF !important;
    color:#fff !important;
    box-shadow:none !important;
    border:0 !important;
  }
  .footer a{ color:#fff !important; -webkit-text-fill-color:#fff !important; }
  .footer::before, .footer::after{ content:none !important; background:none !important; }
  .footer .footer__bar,
  .footer .site-info,
  .footer .copyright,
  .footer .bottom,
  .footer .container{
    background: transparent !important;
    border: 0 !important;
  }

  /* Ensure social icons are visible */
  .footer svg, .footer svg *{ fill:#fff !important; stroke:#fff !important; }
}


/* ==== MOBILE: force header color on ALL buttons across pages (2025-11-11) ==== */
@media (max-width: 767px) {
  :root {
    --ldv-header-color: #7A3EFF;
    --ldv-header-color-700: #5f2fd1;
  }

  /* Generic button selectors */
  button,
  [type="button"],
  [type="submit"],
  [type="reset"],
  .button,
  a.button,
  .btn,
  a.btn,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-soon,
  /* Tabs that look like buttons */
  .ldv-tab,
  .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;
    border-width: 1.5px !important;
    border-style: solid !important;
    box-shadow: none !important;
  }

  /* Outlines shouldn't stay transparent on mobile */
  .btn-outline {
    background: var(--ldv-header-color) !important;
  }
}



/* ==== MOBILE: remove fuchsia from banner and hamburger active states (2025-11-11) ==== */
@media (max-width: 767px) {
  :root {
    --ldv-header-color: #7A3EFF;
  }

  /* Hamburger (menu toggle) */
  .ldv-header__toggle,
  .ldv-header__toggle:focus,
  .ldv-header__toggle:active,
  .ldv-header__toggle.is-open {
    background: transparent !important;
    color: #fff !important;
  }

  .ldv-header__toggle::before,
  .ldv-header__toggle::after,
  .ldv-header__toggle span {
    background-color: #fff !important;
  }

  /* Banner or hero button on "Inici" page */
  .hero-visual a.btn,
  .hero-visual .btn,
  .hero-banner .btn,
  .hero a.btn {
    background: var(--brand) !important;
    color: #fff !important;
    border-color: var(--brand-700) !important;
  }

  /* Remove any fuchsia hover/active tones */
  .hero-visual a.btn:hover,
  .hero-visual .btn:hover,
  .hero-banner .btn:hover,
  .hero a.btn:hover,
  .hero-visual a.btn:active,
  .hero-visual .btn:active,
  .hero-banner .btn:active,
  .hero a.btn:active {
    background: var(--ldv-header-color) !important;
    filter: brightness(1.05) !important;
  }
}



/* ==== MOBILE: "Veure al mapa" button uses header color (2025-11-11) ==== */
@media (max-width: 767px) {
  :root { --ldv-header-color: #7A3EFF; --ldv-header-color-700: #5f2fd1; }
  .notice-banner .notice-banner__cta,
  .section.notice-banner .notice-banner__cta,
  .notice-banner__cta.btn {
    background: var(--ldv-header-color) !important;
    color: #fff !important;
    border: 1.5px solid var(--ldv-header-color-700) !important;
    box-shadow: none !important;
  }
  .notice-banner .notice-banner__cta:hover,
  .notice-banner__cta.btn:hover {
    filter: brightness(1.05) !important;
  }
}



/* ==== MOBILE LIGHT: restore fuchsia for ALL buttons (2025-11-11) ==== */
/* Keep dark mode as-is; only target light color scheme on small screens */
@media (max-width: 767px) and (prefers-color-scheme: light) {
  :root {
    --ldv-fuchsia: #ff4acb;
    --ldv-fuchsia-700: #e33db4;
  }

  /* Generic button selectors */
  button,
  [type="button"],
  [type="submit"],
  [type="reset"],
  .button,
  a.button,
  .btn,
  a.btn,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-soon,
  /* Tabs that look like buttons */
  .ldv-tab,
  .ldv-tab.is-active,
  .ldv-tab[aria-selected="true"],
  /* Notice banner CTA (e.g., "Veure al mapa") */
  .notice-banner__cta {
    background: var(--ldv-fuchsia) !important;
    color: #fff !important;
    border-color: var(--ldv-fuchsia-700) !important;
    border-width: 1.5px !important;
    border-style: solid !important;
    box-shadow: none !important;
  }

  /* Outline variant should be filled in mobile light as antes */
  .btn-outline {
    background: var(--ldv-fuchsia) !important;
  }

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



/* ==== FINAL FIX: Mobile LIGHT banner 'Veure al mapa' back to fuchsia ==== */
@media (max-width: 767px) and (prefers-color-scheme: light) {
  .section.notice-banner .notice-banner__inner .notice-banner__cta.btn,
  .notice-banner .notice-banner__inner .notice-banner__cta.btn,
  .section.notice-banner .notice-banner__cta.btn,
  .notice-banner .notice-banner__cta.btn {
    background: #ff4acb !important;
    color: #fff !important;
    border: 1.5px solid #e33db4 !important;
    box-shadow: none !important;
  }
}



/* ==== MOBILE LIGHT: all buttons use header color (#7A3EFF) ==== */
@media (max-width: 767px) and (prefers-color-scheme: light) {
  :root { --ldv-header-color-light: #7A3EFF; --ldv-header-color-light-700: #5f2fd1; }

  /* Generic button selectors */
  button,
  [type="button"],
  [type="submit"],
  [type="reset"],
  .button,
  a.button,
  .btn,
  a.btn,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-soon,
  /* Tabs as buttons */
  .ldv-tab,
  .ldv-tab.is-active,
  .ldv-tab[aria-selected="true"],
  /* Notice banner CTA (e.g., Veure al mapa) */
  .notice-banner__cta,
  .notice-banner__cta.btn {
    background: var(--ldv-header-color-light) !important;
    color: #fff !important;
    border: 1.5px solid var(--ldv-header-color-light-700) !important;
    box-shadow: none !important;
  }

  /* Ensure outline variant is filled */
  .btn-outline {
    background: var(--ldv-header-color-light) !important;
  }
}



/* ==== MOBILE LIGHT (FINAL): buttons match LIGHT header color (fuchsia) ==== */
/* This block intentionally comes LAST to override previous light-mode rules */
@media (max-width: 767px) and (prefers-color-scheme: light) {
  :root { --ldv-header-light: #ff4acb; --ldv-header-light-700: #e33db4; }

  /* Core buttons & variants */
  .section.notice-banner .notice-banner__cta.btn,
  .notice-banner .notice-banner__cta.btn,
  .notice-banner__cta.btn,
  .btn, a.btn,
  .btn-primary, .btn-secondary, .btn-outline, .btn-soon,
  button, [type="button"], [type="submit"], [type="reset"],
  .button, a.button,
  /* Tabs */
  .ldv-tab, .ldv-tab.is-active, .ldv-tab[aria-selected="true"] {
    background: var(--ldv-header-light) !important;
    color: #fff !important;
    border: 1.5px solid var(--ldv-header-light-700) !important;
    box-shadow: none !important;
  }

  /* Make outline filled as well */
  .btn-outline { background: var(--ldv-header-light) !important; }
}



/* ==== MOBILE LIGHT: hamburger = fuchsia, no purple outline (2025-11-11) ==== */
@media (max-width: 767px) and (prefers-color-scheme: light) {
  .ldv-header__toggle,
  .ldv-header__toggle:hover,
  .ldv-header__toggle:focus,
  .ldv-header__toggle:focus-visible,
  .ldv-header__toggle:active,
  .ldv-header__toggle.is-open {
    background: #ff4acb !important;   /* fucsia */
    color: #fff !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* líneas del icono hamburguesa siempre blancas */
  .ldv-header__toggle::before,
  .ldv-header__toggle::after,
  .ldv-header__toggle span {
    background-color: #fff !important;
  }
}



/* ==== MOBILE LIGHT: header & buttons match LIGHT web (fuchsia) ==== */
@media (max-width: 767px) and (prefers-color-scheme: light) {
  :root { --ldv-fuchsia: #ff4acb; --ldv-fuchsia-700: #e33db4; }

  /* Header like light web */
  header.ldv-header {
    background: var(--ldv-fuchsia) !important;
    color: #fff !important;
  }
  header.ldv-header .ldv-header__title,
  header.ldv-header a,
  header.ldv-header .ldv-header__brand {
    color: #fff !important;
  }

  /* Hamburger consistent with light header */
  .ldv-header__toggle,
  .ldv-header__toggle:hover,
  .ldv-header__toggle:focus,
  .ldv-header__toggle:focus-visible,
  .ldv-header__toggle:active,
  .ldv-header__toggle.is-open {
    background: var(--ldv-fuchsia) !important;
    color: #fff !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  .ldv-header__toggle::before,
  .ldv-header__toggle::after,
  .ldv-header__toggle span { background-color: #fff !important; }

  /* Buttons like light web */
  button,
  [type="button"], [type="submit"], [type="reset"],
  .button, a.button,
  .btn, a.btn,
  .btn-primary, .btn-secondary, .btn-outline, .btn-soon,
  .ldv-tab, .ldv-tab.is-active, .ldv-tab[aria-selected="true"],
  .notice-banner__cta, .notice-banner__cta.btn {
    background: var(--ldv-fuchsia) !important;
    color: #fff !important;
    border: 1.5px solid var(--ldv-fuchsia-700) !important;
    box-shadow: none !important;
  }
  .btn-outline { background: var(--ldv-fuchsia) !important; }
}



/* ==== MOBILE LIGHT: full theme to match web light (2025-11-11) ==== */
@media (max-width: 767px) and (prefers-color-scheme: light) {
  :root { --ldv-fuchsia: #ff4acb; --ldv-fuchsia-700: #e33db4; }

  /* Header & Footer solid fuchsia */
  header.ldv-header,
  footer.footer {
    background: var(--ldv-fuchsia) !important;
    background-image: none !important;
    color: #fff !important;
  }
  footer.footer a,
  header.ldv-header a,
  header.ldv-header .ldv-header__title {
    color: #fff !important;
  }

  /* Remove focus outlines/glows on brand and toggle */
  .ldv-header__brand:focus,
  .ldv-header__brand:focus-visible,
  .ldv-header__brand:active,
  .ldv-header__toggle:focus,
  .ldv-header__toggle:focus-visible,
  .ldv-header__toggle:active {
    outline: none !important;
    box-shadow: none !important;
  }

  /* Hamburger styling */
  .ldv-header__toggle,
  .ldv-header__toggle:hover,
  .ldv-header__toggle.is-open {
    background: var(--ldv-fuchsia) !important;
    color: #fff !important;
    border: none !important;
  }
  .ldv-header__toggle::before,
  .ldv-header__toggle::after,
  .ldv-header__toggle span {
    background-color: #fff !important;
  }

  /* Buttons, tabs, CTAs */
  button,
  [type="button"], [type="submit"], [type="reset"],
  .button, a.button,
  .btn, a.btn,
  .btn-primary, .btn-secondary, .btn-outline, .btn-soon,
  .ldv-tab, .ldv-tab.is-active, .ldv-tab[aria-selected="true"],
  .notice-banner__cta, .notice-banner__cta.btn {
    background: var(--ldv-fuchsia) !important;
    color: #fff !important;
    border: 1.5px solid var(--ldv-fuchsia-700) !important;
    box-shadow: none !important;
  }
  .btn-outline { background: var(--ldv-fuchsia) !important; }
}


/* ==== MOBILE: header compacto y hamburguesa alineada (2025-11-16) ==== */
@media (max-width: 767px) {

  .ldv-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 10px;
  }

  .ldv-header__brand {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .ldv-header__brand img {
    width: 32px;
    height: auto;
  }

  .ldv-header__title {
    font-size: clamp(0.9rem, 3.4vw, 1.05rem);
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .ldv-header__toggle {
    position: relative;
    width: 38px;
    height: 34px;
    padding: 0;
    margin-left: 4px;
    border-radius: 999px;
  }

  .ldv-header__toggle::before,
  .ldv-header__toggle::after,
  .ldv-header__toggle span {
    left: 20%;
    right: 20%;
    height: 2px;
    border-radius: 999px;
  }

  .ldv-header__toggle::before { top: 9px; }
  .ldv-header__toggle span    { top: 16px; }
  .ldv-header__toggle::after  { bottom: 9px; }

}

/* === MOBILE HERO LAYOUT (más compacto) === */
@media (max-width: 640px){

  /* Hero container: menos alto y más tipo tarjeta */
  .hero-visual{
    margin-top: 8px;
  }

  .hero-visual .media{
    min-height: auto;
    display: block;
    padding: 10px 10px 14px;
    border-radius: 18px;
  }

  .hero-visual .media img{
    position: relative;
    inset: auto;
    width: 100%;
    height: 220px;
    max-height: 55vh;
    object-fit: cover;
    object-position: center 40%;
    border-radius: 14px;
  }

  /* Texto debajo de la imagen, más compacto */
  .hero-visual .copy{
    position: static;
    max-width: 100%;
    padding: 10px 4px 0;
    text-align: left;
  }

  .hero-visual .copy h1{
    font-size: clamp(1.25rem, 5vw, 1.6rem);
    line-height: 1.15;
  }

  .hero-visual .copy .subtitle{
    font-size: 0.95rem;
  }

  /* Botones del hero en columna para ahorrar ancho */
  .hero-actions{
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width:960px){
.rgpd-check{align-items:center !important;}
.rgpd-check input[type="checkbox"]{margin-top:0!important;}
}


@media (max-width: 600px){
  .hero-visual .copy{
    padding-bottom: 1.5rem;
  }
  .hero-actions .btn + .btn{
    margin-top: 0.25rem;
  }
}