@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Playfair+Display:wght@700&display=swap');

html, body {
    margin: 0;
    padding: 0;
    background: #5b5b5b;
    font-family: 'Inter', Arial, sans-serif;
    color: #151515;
    scroll-behavior: smooth;
   background-image: radial-gradient(circle at center center, transparent,rgb(255,255,255)),linear-gradient(309deg, rgba(90, 90, 90,0.05) 0%, rgba(90, 90, 90,0.05) 50%,rgba(206, 206, 206,0.05) 50%, rgba(206, 206, 206,0.05) 100%),linear-gradient(39deg, rgba(13, 13, 13,0.05) 0%, rgba(13, 13, 13,0.05) 50%,rgba(189, 189, 189,0.05) 50%, rgba(189, 189, 189,0.05) 100%),linear-gradient(144deg, rgba(249, 249, 249,0.05) 0%, rgba(249, 249, 249,0.05) 50%,rgba(111, 111, 111,0.05) 50%, rgba(111, 111, 111,0.05) 100%),linear-gradient(166deg, rgba(231, 231, 231,0.05) 0%, rgba(231, 231, 231,0.05) 50%,rgba(220, 220, 220,0.05) 50%, rgba(220, 220, 220,0.05) 100%),linear-gradient(212deg, rgba(80, 80, 80,0.05) 0%, rgba(80, 80, 80,0.05) 50%,rgba(243, 243, 243,0.05) 50%, rgba(243, 243, 243,0.05) 100%),radial-gradient(circle at center center, hsl(107,19%,100%),hsl(107,19%,100%));
    background-blend-mode: overlay, overlay, overlay, normal;
}


.navbar {
  position: fixed; top:0; left:0; right:0; height: 62px; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  background-image: linear-gradient(135deg, rgba(244, 244, 244,0.07) 0%, rgba(244, 244, 244,0.07) 12.5%,rgba(211, 211, 211,0.07) 12.5%, rgba(211, 211, 211,0.07) 25%,rgba(178, 178, 178,0.07) 25%, rgba(178, 178, 178,0.07) 37.5%,rgba(145, 145, 145,0.07) 37.5%, rgba(145, 145, 145,0.07) 50%,rgba(113, 113, 113,0.07) 50%, rgba(113, 113, 113,0.07) 62.5%,rgba(80, 80, 80,0.07) 62.5%, rgba(80, 80, 80,0.07) 75%,rgba(47, 47, 47,0.07) 75%, rgba(47, 47, 47,0.07) 87.5%,rgba(14, 14, 14,0.07) 87.5%, rgba(14, 14, 14,0.07) 100%),linear-gradient(45deg, rgba(236, 236, 236,0.07) 0%, rgba(236, 236, 236,0.07) 12.5%,rgba(210, 210, 210,0.07) 12.5%, rgba(210, 210, 210,0.07) 25%,rgba(183, 183, 183,0.07) 25%, rgba(183, 183, 183,0.07) 37.5%,rgba(157, 157, 157,0.07) 37.5%, rgba(157, 157, 157,0.07) 50%,rgba(130, 130, 130,0.07) 50%, rgba(130, 130, 130,0.07) 62.5%,rgba(104, 104, 104,0.07) 62.5%, rgba(104, 104, 104,0.07) 75%,rgba(77, 77, 77,0.07) 75%, rgba(77, 77, 77,0.07) 87.5%,rgba(51, 51, 51,0.07) 87.5%, rgba(51, 51, 51,0.07) 100%),linear-gradient(90deg, #ffffff,#ffffff); color:#fff; box-shadow: 0 4px 16px #0001;
  padding: 0 30px; font-size: 1.08em; letter-spacing:0.02em;
}
.navbar .logo { font-weight:700; font-size:1.3em; letter-spacing:0.04em;color: #1d1d1b; }
.navbar nav { display: flex; gap:28px; }
.navbar nav a {
    text-decoration: none;
    font-weight: 500;
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
    transition: border .18s;
    color: #515151;
    font-family: 'Inter';
}
.navbar nav a:hover { border-bottom:2px solid #eb3b27; }
.landing-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #181818;
    font-family: 'Inter';
    font-size: 6px;
    color: #ffffff;
    padding-bottom: 7px;
}

.landing-hero h1 { font-size: 3.3em; font-weight: 700; margin-bottom: 0.25em; letter-spacing:0.01em;}
.landing-hero p { font-size:1.25em; max-width:460px; margin:auto; margin-bottom:2.5em; color:#242424; }
.hero-img {
    margin: 28px auto 0 auto; border-radius: 24px; height: 250px;
}
.cta-btn {
  background: #eb3b27; color:#fff; border:none; border-radius:8px; font-size:1.07em;
  padding: 15px 36px; font-weight:700; cursor:pointer; letter-spacing:0.02em; box-shadow: 0 2px 16px #eb3b2733;
  transition: background .18s;
}
.cta-btn:hover { background: #b42a1a; }
footer {
 padding: 1px;
    text-align: center;
    background: #141414;
    color: #fff;
    font-size: 1em;
    letter-spacing: 0.02em;
    box-shadow: 0 -4px 20px #0002;
    margin-top: 35px;
}
@media (max-width: 700px) {
  .navbar { padding: 0 10px; }
  .navbar nav { gap: 15px; font-size: 1em; }
  .landing-hero h1 { font-size: 2em; }
  .hero-img { max-width: 75vw; }
}
.artistas-section {
    background: #fff;
    padding: 0px 0 60px 0;
    max-width: 1220px;
    margin: auto;
    border-radius: 45px;
    margin: 38px auto 36px auto;
}
.artistas-section h2 {
    font-size: 60px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    margin: 0;
    padding: 20px 0px;
}
.artistas-grid {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); 
  gap: 27px; 
  width:96%; 
  margin:auto;
}
.artista-card {
    background: #fafbfc;
    border-radius: 18px;
    box-shadow: 1px 1px 20px #0606061a;
    padding: 26px 26px 22px 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow .14s, transform .14s;
    cursor: pointer;

}
.artista-card:hover { box-shadow: 0 10px 44px #0002; transform:translateY(-4px);}
.artista-card img {
  width: 100%; max-width: 100%; height: 220px; object-fit:cover; border-radius: 16px; margin-bottom: 22px;
  box-shadow: 0 4px 18px #0001;
}

.artista-card .artista-nombre {
    font-family: 'Playfair Display', serif;
    font-size: 1.5em;
    font-style: italic;
    font-weight: bold;
    text-align: center;
}

.artista-card .artista-desc {
    color: #444;
    min-height: 3.3em;
    margin-bottom: 7px;
    text-align: center;
    padding: 10px 20px;
    font-family: 'Inter';
    font-size: 14px;
}


.artista-card .artista-categoria { font-size:0.98em; color:#eb3b27; font-weight:500; margin-bottom:3px; }
@media (max-width: 700px){
  .artistas-section { padding:10px 0 22px 0; margin: 6% 3%; }
  .artistas-grid { gap:20px; }
  .artista-card img { width: 300px;
        max-width: 300px;
        height: 242px; }
}

.filtro-artistas-bar {
  display: flex; justify-content: center; gap: 18px;
  margin-bottom: 34px; flex-wrap: wrap;
  padding-top: 14px;
}
.filtro-btn {
    background: #e3e3e3;
    color: #222;
    border: none;
    outline: none;
    font-weight: 500;
    font-size: 1.02em;
    padding: 11px 24px;
    cursor: pointer;
    box-shadow: 0 2px 18px #0001;
    transition: background .17s, color .15s, box-shadow .17s;
    margin-bottom: 3px;
    border-top-left-radius: 21%;
    border-bottom-right-radius: 21%;
    font-family: 'Inter';
}
.filtro-btn.activo, .filtro-btn:hover {
    background: #000;
    color: #fff;
    box-shadow: 0 6px 26px #eb3b2722;
}

.contenedor-logo {
    display: flex;
    justify-content: center;
}


.titulo-grande {
  font-family: 'Playfair Display', serif;
  font-size: 3em;
  font-style: italic;
  font-weight: 700;
}


.subtitulo {
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.17em;
  font-weight: 400;
  text-transform: uppercase;
}

.descripcion-titulo {
  font-family: 'Playfair Display', serif;
  font-weight: bold;
  font-style: italic;
}

.descripcion-texto {
  font-family: 'Inter', sans-serif;
  font-size: 1.08em;
  line-height: 1.5;
}


.lang-switch {
    display: flex;
    align-items: center;
    background: #f3f3f3;
    border-radius: 22px;
    padding: 4px 5px;
    box-shadow: 0 1px 8px #0001;
    position: relative;
    font-size: 1.05em;
    width: 168px;
    height: 26px;
    justify-content: space-between;
    margin-bottom: 0px;
}

.lang-switch input[type="radio"] {
  display: none;
}

.lang-switch label {
  z-index: 2;
  min-width: 78px;
  border-radius: 18px;
  cursor: pointer;
  text-align: center;
  transition: color .14s, font-weight .14s;
  color: #6f6f6f;
  font-weight: 500;
  position: relative;
  font-size: 16px;
}

.lang-switch input[type="radio"]:checked + label {
    color: #ffffff;
    font-weight: 600;
    font-family: 'Inter';
    letter-spacing: 0.31px;
    font-size: 15px;
}

.lang-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 80px;
    height: 20px;
    border-radius: 18px;
    background: #c5c5c5;
    transition: left .22s cubic-bezier(.7,.3,.2,1);
    z-index: 1;
    box-shadow: 0 2px 16px #d9d9d9;
    padding-bottom: 7px;
}

/* El orden de input+label es importante para esto */
#lang-es:checked ~ label[for="lang-es"] ~ input#lang-en ~ label[for="lang-en"] ~ .lang-slider {
  left: 4px;
}
#lang-en:checked ~ .lang-slider {
  left: 90px;
}

@media (max-width: 600px) {
  .lang-switch label, .lang-slider {min-width: 60px; width: 48%; }
}