/* Tarjetas (tarjetas.php, includes/niveles_tarjetas.php): los tres niveles con
   su tarjeta de muestra, sobre base.css, listados.css (las discotecas donde
   valen) y tarjeta-3d.css (la tarjeta, sus colores y sus tokens). */

.niveles[data-activo="lista-gratis"] .niveles__selector { --nivel: var(--nivel-lista-gratis); }
.niveles[data-activo="vip"] .niveles__selector { --nivel: var(--nivel-vip); }
.niveles[data-activo="gold"] .niveles__selector { --nivel: var(--nivel-gold); }

.niveles-cabecera { max-width: 680px; margin-bottom: 28px; }
.niveles-cabecera .boton { margin-top: 4px; }
.niveles-seccion { font-size: 1.5rem; }

/* ----- Selector de nivel ----- */
.niveles__selector {
    --nivel: var(--nivel-vip);
    position: relative;
    display: flex;
    width: 100%;
    max-width: 460px;
    margin: 0 auto 32px;
    padding: 4px;
    background: var(--fondo-elevado);
    border: 1px solid var(--borde);
    border-radius: 999px;
}
.niveles__pestana {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 999px;
    color: var(--texto-suave);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transicion), background-color var(--transicion);
}
.niveles__pestana:hover { color: var(--texto); }
.niveles__punto {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--punto);
    box-shadow: 0 0 8px var(--punto);
}
.niveles__punto--lista-gratis { --punto: var(--nivel-lista-gratis); }
.niveles__punto--vip { --punto: var(--nivel-vip); }
.niveles__punto--gold { --punto: var(--nivel-gold); }

/* Sin JS: la pestaña del ancla (o la inicial) lleva su fondo. Con JS, el fondo
   es el indicador, que se desliza hasta la pestaña elegida. */
.niveles:not(.niveles--js):not(:has(.nivel:target)) .niveles__pestana--inicial,
.niveles:not(.niveles--js):has(#nivel-lista-gratis:target) .niveles__pestana--lista-gratis,
.niveles:not(.niveles--js):has(#nivel-vip:target) .niveles__pestana--vip,
.niveles:not(.niveles--js):has(#nivel-gold:target) .niveles__pestana--gold {
    background: var(--superficie);
    color: var(--texto);
}
.niveles--js .niveles__pestana[aria-selected="true"] { color: var(--texto); }
.niveles__indicador {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    display: none;
    width: var(--pestana-ancho, 0px);
    border-radius: 999px;
    background: color-mix(in srgb, var(--nivel) 14%, var(--superficie));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nivel) 45%, transparent), 0 0 22px -6px color-mix(in srgb, var(--nivel) 70%, transparent);
    transform: translateX(var(--pestana-x, 0px));
    transition: transform .45s var(--curva), width .45s var(--curva), background-color .45s, box-shadow .45s;
}
.niveles--js .niveles__indicador { display: block; }
.niveles__indicador--quieto { transition: none; }

/* ----- Cada nivel: la tarjeta y su texto ----- */
/* Al entrar con su ancla (#nivel-gold), el selector queda a la vista bajo la
   cabecera: su alto y su margen, además del scroll-padding de base.css. */
.nivel { display: grid; gap: 24px; align-items: center; scroll-margin-top: 86px; }
/* Sin JS, el del ancla o el inicial; sin :has() (navegadores viejos), los tres seguidos. */
.niveles:not(.niveles--js):not(:has(.nivel:target)) .nivel:not(.nivel--inicial),
.niveles:not(.niveles--js):has(.nivel:target) .nivel:not(:target) { display: none; }
.nivel + .nivel { margin-top: 56px; }
.niveles--js .nivel + .nivel { margin-top: 0; }
@media (min-width: 900px) {
    .nivel { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 56px; }
}

.nivel__antetitulo { color: var(--nivel); }
.nivel__titulo { margin-bottom: 10px; font-size: clamp(2rem, 1.5rem + 2vw, 2.6rem); letter-spacing: -0.03em; }
.nivel--gold .nivel__titulo {
    width: fit-content;
    background: var(--oro);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.nivel__personas {
    margin: 20px 0;
    padding: 16px 18px;
    background: var(--fondo-elevado);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}
.nivel__personas p { margin: 0 0 12px; color: var(--texto-suave); }
.nivel__cifra {
    margin-right: 4px;
    color: var(--nivel);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: -.1em;
    text-shadow: 0 0 18px color-mix(in srgb, var(--nivel) 45%, transparent);
}
.nivel__datos { margin: 0 0 16px; }
.nivel__datos div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--borde);
}
.nivel__datos div:last-child { border-bottom: 1px solid var(--borde); }
.nivel__datos dt { color: var(--texto-tenue); font-size: .875rem; }
.nivel__datos dd { margin: 0; }
.nivel__como { margin-bottom: 16px; color: var(--texto-suave); }

/* ----- Comparación, la puerta, las discotecas y el pie ----- */
.niveles-tabla thead th { color: var(--texto); font-size: .9375rem; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.niveles-tabla thead a { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; }
.niveles-tabla tbody th { color: var(--texto-suave); font-weight: 400; }
.niveles-tabla td { min-width: 96px; }

.pasos-puerta { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
@media (min-width: 720px) {
    .pasos-puerta { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
.pasos-puerta__paso { counter-increment: paso; }
.pasos-puerta__paso::before {
    content: counter(paso);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-bottom: 14px;
    border: 1px solid color-mix(in srgb, var(--acento) 50%, var(--borde-fuerte));
    border-radius: 50%;
    color: var(--acento);
    font-size: .875rem;
    font-weight: 600;
}
.pasos-puerta__paso h3 { margin-bottom: 6px; font-size: 1.0625rem; }

.niveles-socios {
    padding: 28px;
    background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--acento) 14%, transparent), transparent 60%), var(--fondo-elevado);
}
/* El título de este bloque no es la etiqueta pequeña de .tarjeta h2. */
.niveles-socios h2 { margin-bottom: 8px; color: var(--texto); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; text-transform: none; }
.niveles-socios .texto-suave { max-width: 620px; }
.niveles-legal { margin-top: 32px; font-size: .8125rem; }

/* ----- Movimiento: entrar de lado al cambiar de nivel y los puntos que se
   encienden (la tarjeta que se mece, en tarjeta-3d.css). ----- */
@media (prefers-reduced-motion: no-preference) {
    .nivel--entra-derecha .tarjeta-3d { animation: tarjeta-entra-derecha .6s var(--curva) both; }
    .nivel--entra-izquierda .tarjeta-3d { animation: tarjeta-entra-izquierda .6s var(--curva) both; }
    .nivel--entra-derecha .nivel__texto,
    .nivel--entra-izquierda .nivel__texto { animation: nivel-texto-entra .5s .06s ease both; }
    .nivel--entra-derecha .personas__punto--on,
    .nivel--entra-izquierda .personas__punto--on { animation: punto-enciende .35s ease both; }
    .personas__punto:nth-child(1) { animation-delay: .16s; }
    .personas__punto:nth-child(2) { animation-delay: .2s; }
    .personas__punto:nth-child(3) { animation-delay: .24s; }
    .personas__punto:nth-child(4) { animation-delay: .28s; }
    .personas__punto:nth-child(5) { animation-delay: .32s; }
    .personas__punto:nth-child(6) { animation-delay: .36s; }
    .personas__punto:nth-child(7) { animation-delay: .4s; }
    .personas__punto:nth-child(8) { animation-delay: .44s; }
    .personas__punto:nth-child(9) { animation-delay: .48s; }
    .personas__punto:nth-child(10) { animation-delay: .52s; }
}
@media (prefers-reduced-motion: reduce) {
    .niveles__indicador { transition: none; }
}

@keyframes tarjeta-entra-derecha {
    from { opacity: 0; transform: translateX(12%) scale(.94); }
}
@keyframes tarjeta-entra-izquierda {
    from { opacity: 0; transform: translateX(-12%) scale(.94); }
}
@keyframes nivel-texto-entra {
    from { opacity: 0; transform: translateY(10px); }
}
@keyframes punto-enciende {
    from { opacity: 0; transform: scale(.4); }
}