@media (min-width: 1400px) {
  :root {
    --negro: #111315;
    --blanco: #fff;
    --gris-claro: #F6F6F7;
    --verde: #13FF18;
    --rosa: #C448EB;
    --azul: #1fb6d3;
    --verde-t: #13FF1870;
    --rosa-t: #C448EB85;
    --beis-t: #B59C7DDE;
    --azul-t: #1FB6D36E;
    --negro-t: #0000007A;
    --shadow: 0 8px 42px 0 rgba(32,40,52,0.13);
    --font-main: 'Montserrat', Arial, sans-serif;
    --font-art: 'DM Serif Display', serif;
  }

  html, body {
    font-size: 18px;
    background: var(--blanco);
    min-height: 100vh;
    color: var(--negro);
    font-family: var(--font-main);
    margin: 0px;
  }

  #background-art {
    opacity: .17;
    position: fixed;
    z-index: 0;
    top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none;
    background:
      radial-gradient(ellipse 40% 18% at 90% 4%, #1fb6d3 0%, transparent 100%),
      radial-gradient(ellipse 30% 23% at 12% 80%, #C448EB 0%, transparent 100%),
      radial-gradient(ellipse 37% 16% at 70% 80%, #13FF18 0%, transparent 100%);
    filter: blur(34px);
  }

  /* ========== HERO ========== */
  .hero {
    position: relative;
    min-height: 780px;
    height: 82vh;
    max-height: 960px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    overflow: hidden;
    margin-bottom: 3.5em;
    background: none;
  }
  #hero-bg-video {
    position: absolute;
    top: 0; left: 0; width: 100vw; height: 100%;
    min-height: 780px;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    filter: brightness(0.89) blur(11px) grayscale(0.09);
    pointer-events: none;
  }
  .hero-video-overlay {
    position: absolute;
    top: 0; left: 0; width: 100vw; height: 100%;
    background: 
      linear-gradient(90deg, #00000099 60%, #1fb6d3 100%),
      linear-gradient(120deg, #000000 14%, #c448eb 94%);
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: lighten;
    opacity: 0.82;
  }
  .hero-content {
    position: relative;
    z-index: 2;
    background: rgba(255,255,255,0.15);
    border-radius: 70px 22px 90px 55px / 62px 88px 62px 98px;
    box-shadow: 0 10px 80px 0 #1fb6d334, 0 1px 40px #C448EB25;
    padding: 4rem 3rem 3.5rem 3rem;
    max-width: 610px;
    margin: auto;
    text-align: center;
    border: 3px solid rgba(31,182,211,0.10);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.7rem;
    overflow: visible;
    backdrop-filter: blur(18px) saturate(1.13);
  }
  .hero-content::before {
    content: "";
    position: absolute;
    top: -40px; left: -50px; width: 125%; height: 115%;
    border-radius: 95px 30px 90px 120px / 75px 100px 90px 135px;
    pointer-events: none;
    z-index: 0;
    background: 
      radial-gradient(circle at 18% 40%, #13FF1870 0, transparent 60%),
      radial-gradient(circle at 77% 14%, #C448EB65 0, transparent 74%),
      radial-gradient(circle at 93% 90%, #1fb6d366 0, transparent 67%);
    opacity: 0.22;
    filter: blur(16px);
  }
  .hero-content::after {
    content: "";
    position: absolute;
    left: 7%; top: -52px;
    width: 120px; height: 60px;
    background: url('/recursos/imagenes/nota-musical.svg') no-repeat center;
    background-size: contain;
    opacity: 0.13;
    pointer-events: none;
    z-index: 1;
  }
  .logo-remor-hero {
    width: 300px;
    max-width: 85vw;
    display: block;
    filter: drop-shadow(0 6px 34px #1fb6d369);
    background: transparent;
    border-radius: 100%;
    pointer-events: none;
    z-index: 2;
    position: relative;
  }
  .remor-logo-text { display: none; }
  .hero-desc {
    font-size: 1.23rem;
    margin-bottom: 0.6em;
    line-height: 1.5;
    font-weight: 700;
    background: linear-gradient(90deg, var(--verde) 16%, var(--rosa) 65%, var(--azul) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    letter-spacing: .03em;
    position: relative;
    z-index: 2;
  }
  .boton-grad, .boton-artista {
    display: inline-block;
    margin: 1.2em auto 0 auto;
    padding: 1.11em 2.9em;
    border-radius: 2.1em;
    border: none;
    background: linear-gradient(90deg, var(--verde), var(--rosa) 80%);
    color: var(--blanco);
    font-family: inherit;
    font-size: 1.13rem;
    font-weight: 900;
    letter-spacing: .04em;
    box-shadow: 0 6px 28px #1fb6d338;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
    transition: filter 0.17s, box-shadow 0.18s, background 0.19s;
    position: relative;
    z-index: 2;
  }
  .boton-grad:hover, .boton-artista:hover, .boton-grad:focus {
    filter: brightness(1.13) saturate(1.16);
    background: linear-gradient(90deg, var(--rosa), var(--azul));
    box-shadow: 0 10px 35px #C448EB40;
  }
  .logos-espacios {
    display: flex;
    justify-content: center;
    gap: 2.4rem;
    margin-bottom: 0.2rem;
    margin-top: 1.5rem;
    position: relative;
    z-index: 2;
  }
  .logo-espai {
    width: 54px; height: 54px; object-fit: contain;
    filter: grayscale(0.13) brightness(1.12) drop-shadow(0 3px 12px #C448EB22);
    transition: filter 0.18s, transform 0.17s;
    background: #fff;
    border-radius: 50%;
    padding: .14em;
    border: 1.2px solid #ededf1;
  }
  .logo-espai:hover { filter: none; transform: scale(1.09); }

  /* ========== SOBRE NOSOTROS ========== */
  .sobre {
    padding: 5.5em 0 4em 0;
    z-index: 2;
  }
  .sobre-grid {
    display: grid;
    grid-template-columns: 2fr 1.15fr;
    gap: 4vw;
    align-items: center;
    max-width: 1140px;
    margin: auto;
    background: #fff;
    border-radius: 1.1em;
    box-shadow: 0 7px 44px #c5c5c523;
    padding: 2.6em 2.5em;
    border: 2.5px solid #e5e5e9;
    position: relative;
  }
  .sobre-texto h2 {
    font-family: var(--font-art);
    font-size: 2.5rem;
    margin-bottom: .44em;
    letter-spacing: .01em;
    font-weight: 800;
    color: #111315;
    text-shadow: 0 2px 12px #1fb6d333;
  }
  .grad-title {
    background: linear-gradient(90deg, var(--verde), var(--rosa) 70%, var(--azul) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
  }
  .sobre-texto .musica { color: var(--verde); font-weight: 700; }
  .sobre-texto .escenicas { color: var(--rosa); font-weight: 700; }
  .sobre-texto .plasticas { color: var(--azul); font-weight: 700; }
  .sobre-texto p {
    font-size: 1.15rem;
    color: #232326;
    line-height: 1.7;
    font-weight: 400;
    margin-bottom: 0;
  }
  .img-art-container {
    position: relative;
    border-radius: 2.1em;
    overflow: hidden;
    max-width: 420px;
    min-height: 230px;
    height: 300px;
    box-shadow: 0 16px 54px 0 #1fb6d340;
    margin: auto;
    background: #1113150c;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .img-artistica,
  .sobre-carrusel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.9s cubic-bezier(.19,1,.22,1);
    border-radius: 2em;
    box-shadow: 0 8px 44px 0 #1fb6d325;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 1;
  }
  .sobre-carrusel-img.active {
    opacity: 1;
    z-index: 2;
  }
  .sobre-carrusel-dots {
    display: flex;
    justify-content: center;
    gap: 0.65em;
    margin-top: 1em;
    position: absolute;
    width: 100%;
    bottom: 16px;
    left: 0;
    z-index: 5;
  }
  .sobre-carrusel-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid #1fb6d3;
    opacity: 0.54;
    transition: all .18s;
    cursor: pointer;
  }
  .sobre-carrusel-dot.active {
    opacity: 1;
    border-color: #1fb6d3;
    background: #1fb6d3;
    box-shadow: 0 1px 8px #1fb6d3;
  }
  .img-gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 65%, var(--azul) 100%);
    opacity: 0.19;
    pointer-events: none;
    z-index: 1;
  }

  /* ==== GALERÍA CARRUSEL EFECTO AGUA VIVA ==== */
  .galeria {
    padding: 4.8em 0 3.5em 0;
    text-align: center;
  }
  .galeria h2 {
    font-family: var(--font-art);
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1.7em;
    letter-spacing: .01em;
    background: linear-gradient(90deg, var(--azul), var(--rosa), var(--verde));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block;
  }
  .galeria-carrusel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5em;
    padding: 4em 0 2em 0;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 3.5em auto;
    position: relative;
    overflow: visible;
  }
  .galeria-carrusel-track {
    display: flex;
    gap: 2.5em;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 270px;
  }
.galeria-carrusel-item {
  position: relative;
  width: 260px;        /* Más grande que antes */
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: visible !important;
  box-sizing: content-box;
  padding: 30px;       /* Esto es la clave para dejar margen de onda */
}
   .galeria-carrusel {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3.2em;
      padding: 4em 0 2em 0;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto 3em auto;
      position: relative;
      overflow: visible;
    }
    .galeria-carrusel-track {
      display: flex;
      gap: 3.2em;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 260px;
    }
    .galeria-carrusel-item {
      position: relative;
      width: 230px;
      height: 230px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border-radius: 50%;
      overflow: visible;
    }
    .galeria-carrusel-img {
      width: 230px;
      height: 230px;
      object-fit: cover;
      background: #fff;
      display: block;
      transition: box-shadow 0.21s;
      box-shadow: 0 4px 40px #1fb6d325;
      will-change: clip-path;
    }
.galeria-carrusel-img {
  width: 200px;       /* Menor que el contenedor, así la onda cabe */
  height: 200px;
  object-fit: cover;
  display: block;
  background: #fff;
  transition: clip-path 0.6s cubic-bezier(.76,1.7,.56,1.01), filter 0.3s;
  will-change: clip-path;
}
  .galeria-ver-mas {
    display: inline-block;
    margin: 2.7em auto 0 auto;
    padding: 1.2em 3.2em;
    background: linear-gradient(90deg, var(--azul), var(--rosa), var(--verde));
    color: #fff;
    font-family: var(--font-main);
    font-size: 1.08rem;
    font-weight: 900;
    border: none;
    border-radius: 2.4em;
    box-shadow: 0 4px 22px #1fb6d31a;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .08em;
    transition: background 0.19s, filter 0.15s, box-shadow 0.17s;
  }
  .galeria-ver-mas:hover {
    filter: brightness(1.08) saturate(1.19);
    box-shadow: 0 10px 28px #C448EB40;
    background: linear-gradient(90deg, var(--rosa), var(--azul), var(--verde));
  }

  /* ========== ACTIVIDADES ========== */
  .actividades {
    padding: 4.7em 0 3em 0;
    background: none;
    text-align: center;
  }
  .actividades h2 {
    font-family: var(--font-art);
    font-size: 2.05rem;
    font-weight: 800;
    letter-spacing: .01em;
    margin-bottom: 2.5rem;
    background: linear-gradient(90deg, var(--azul), var(--rosa), var(--verde));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block;
  }
  .actividades-categorias {
    display: flex;
    justify-content: center;
    gap: 1.9em;
    margin-bottom: 2em;
    flex-wrap: wrap;
  }
  .categoria-tab {
    font-family: var(--font-art);
    font-size: 1.17rem;
    font-weight: 800;
    padding: .63em 2.2em;
    border-radius: 2.7em;
    border: none;
    background: linear-gradient(90deg, var(--azul-t) 0, var(--rosa-t) 80%);
    color: #1e1e1e;
    cursor: pointer;
    letter-spacing: .01em;
    margin-bottom: 0.7em;
    box-shadow: 0 3px 14px #1fb6d325;
    outline: none;
    transition: background 0.19s, color 0.13s, box-shadow 0.15s, filter 0.12s;
    border: 2.2px solid #ededf1;
  }
  .categoria-tab.active, .categoria-tab:focus {
    background: linear-gradient(90deg, var(--azul), var(--rosa) 80%);
    color: #fff;
    filter: brightness(1.13) drop-shadow(0 3px 18px #C448EB22);
    box-shadow: 0 6px 28px #C448EB16;
    border-color: var(--rosa);
  }
  .actividades-etiquetas {
    margin-bottom: 2.3em;
    min-height: 64px;
    position: relative;
  }
  .etiquetas-tabs {
    display: none;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    position: absolute;
    left: 0; right: 0;
    top: 0;
  }
  .etiquetas-tabs.active {
    display: flex;
    position: relative;
  }
  .actividad-tag {
    font-family: var(--font-main);
    font-size: 1em;
    padding: .41em 1.5em;
    border-radius: 2em;
    background: #F6F6F7;
    border: 2.1px solid #ededf1;
    color: #29282b;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: .4em;
    margin-right: .09em;
    transition: 
      background 0.16s, 
      color 0.15s, 
      border 0.17s, 
      box-shadow 0.13s, 
      transform 0.16s;
    box-shadow: 0 2px 10px #1fb6d313;
  }
  .actividad-tag.active, .actividad-tag:focus {
    background: linear-gradient(90deg, var(--rosa-t), var(--azul-t), var(--verde-t));
    color: #fff;
    border-color: var(--azul);
    box-shadow: 0 4px 18px #1fb6d33c;
    filter: brightness(1.09);
    transform: scale(1.07);
  }
  .actividad-ficha {
    display: flex;
    gap: 2.4em;
    max-width: 880px;
    margin: 2.7em auto 0 auto;
    align-items: stretch;
    background: rgba(255,255,255,0.97);
    border-radius: 2em;
    box-shadow: 0 6px 36px #C448EB15;
    border: 2px solid #ededf1;
    overflow: hidden;
    min-height: 285px;
  }
  .actividad-ficha-media {
    flex: 0 0 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F6F6F7;
    min-height: 100%;
    border-right: 1.5px solid #ededf1;
    position: relative;
    overflow: hidden;
  }
  #actividad-ficha-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-width: 250px;
    min-height: 235px;
    border-radius: 1.8em 0 0 1.8em;
    box-shadow: 0 8px 44px 0 #1fb6d326;
    background: #1fb6d322;
    transition: opacity 0.6s cubic-bezier(.19,1,.22,1);
  }
  .actividad-ficha-texto {
    flex: 1;
    padding: 2.5em 2.7em 2.2em 1.2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
  }
  #actividad-ficha-titulo {
    font-family: var(--font-art);
    font-size: 1.55rem;
    margin-bottom: .38em;
    font-weight: 800;
    background: linear-gradient(90deg, var(--azul), var(--rosa) 65%, var(--verde) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    letter-spacing: .01em;
  }
  #actividad-ficha-desc {
    font-size: 1.15em;
    color: #212125;
    font-family: var(--font-main);
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 0;
  }
}