/* Ranking Pádel Valdebebas
   Paleta tomada del logo: azul marino, azul claro y blanco. */

:root {
    --marino-900: #08192b;
    --marino-800: #0f2e4c;
    --marino-700: #16406a;
    --azul-500: #3e92d0;
    --azul-400: #5aa9e0;
    --azul-100: #dbeefb;
    --blanco: #ffffff;
    --hueso: #f5f8fb;
    --gris-600: #5b6b7c;
    --gris-300: #d6dee6;
    --verde: #22a06b;
    --ambar: #e8a13a;
    --ambar-texto: #8a5c14;

    --ancho: 1120px;
    --radio: 16px;
    --sombra: 0 10px 40px rgba(8, 25, 43, .10);
    --sombra-alta: 0 20px 60px rgba(8, 25, 43, .18);
    --transicion: .4s cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
    /* iOS agranda el texto por su cuenta dentro de algunos bloques. Con una
       rejilla de columnas fijas como la de la clasificación, eso la descuadra:
       las letras crecen y las columnas no. Safari y Chrome en iPhone usan el
       mismo motor, así que afecta a los dos. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    scroll-behavior: smooth;
    /* El encabezado fijo no debe tapar la sección a la que se salta */
    scroll-padding-top: 84px;
}

body {
    margin: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--marino-800);
    background: var(--blanco);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0 0 .6em;
    font-weight: 800;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1.1em; }

.contenedor {
    width: min(100% - 2.5rem, var(--ancho));
    margin-inline: auto;
}

/* ---------------------------------------------------------------- Encabezado */

.encabezado {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    padding: 1.1rem 0;
    transition: padding var(--transicion), background var(--transicion),
                box-shadow var(--transicion);
}

/* Al bajar, la barra se compacta y se vuelve sólida */
.encabezado.compacto {
    padding: .5rem 0;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 var(--gris-300), 0 8px 30px rgba(8, 25, 43, .07);
}

.encabezado__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.marca {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--blanco);
    transition: color var(--transicion);
}

.encabezado.compacto .marca { color: var(--marino-800); }

.marca img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    /* El logotipo tiene fondo blanco, así que se le da forma de teja en vez de
       dejar un recuadro pálido flotando sobre el héroe oscuro */
    background: var(--blanco);
    border-radius: 10px;
    padding: 3px;
    transition: width var(--transicion), height var(--transicion);
}

.encabezado.compacto .marca img { width: 34px; height: 34px; }

.marca__texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca__texto small {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .65;
}

.navegacion { display: flex; align-items: center; gap: .35rem; }

.navegacion a {
    padding: .5rem .85rem;
    border-radius: 10px;
    text-decoration: none;
    font-size: .93rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    transition: background var(--transicion), color var(--transicion);
}

.encabezado.compacto .navegacion a { color: var(--gris-600); }
.navegacion a:hover { background: rgba(255, 255, 255, .14); color: var(--blanco); }
.encabezado.compacto .navegacion a:hover { background: var(--azul-100); color: var(--marino-800); }

.menu-movil {
    display: none;
    background: none;
    border: 0;
    padding: .5rem;
    cursor: pointer;
    color: currentColor;
}

/* ------------------------------------------------------------------- Botones */

.boton {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.6rem;
    border-radius: 999px;
    border: 0;
    font: inherit;
    font-weight: 700;
    font-size: .97rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--transicion), box-shadow var(--transicion),
                background var(--transicion);
}

.boton--principal {
    background: linear-gradient(135deg, var(--azul-500), var(--azul-400));
    color: var(--blanco);
    box-shadow: 0 10px 30px rgba(62, 146, 208, .38);
}

.boton--principal:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(62, 146, 208, .5);
}

.boton--fantasma {
    background: rgba(255, 255, 255, .1);
    color: var(--blanco);
    border: 1px solid rgba(255, 255, 255, .3);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.boton--fantasma:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }

.boton--oscuro { background: var(--marino-800); color: var(--blanco); }
.boton--oscuro:hover { background: var(--marino-700); transform: translateY(-2px); }

.boton--pequeno { padding: .6rem 1.1rem; font-size: .88rem; }

/* --------------------------------------------------------------------- Héroe */

.heroe {
    position: relative;
    min-height: 100svh;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--blanco);
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% 0%, var(--marino-700) 0%, var(--marino-900) 65%);
}

/* Pista de pádel dibujada con CSS, en perspectiva */
.heroe__pista {
    position: absolute;
    inset: auto 50% -18% auto;
    translate: 50% 0;
    width: min(140%, 1500px);
    aspect-ratio: 2 / 1;
    border: 2px solid rgba(90, 169, 224, .3);
    border-radius: 4px;
    transform: perspective(700px) rotateX(62deg);
    background:
        linear-gradient(rgba(90, 169, 224, .28) 2px, transparent 2px) 0 50% / 100% 50%,
        linear-gradient(90deg, rgba(90, 169, 224, .18) 2px, transparent 2px) 25% 0 / 25% 100%;
    opacity: .5;
    pointer-events: none;
    will-change: transform;
}

/* Destellos que respiran por detrás del contenido.
   El degradado radial imita el desenfoque sin usar filter: blur(), que obliga
   al navegador a recalcular el desenfoque en cada fotograma de la animación. */
.heroe::before,
.heroe::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}

.heroe::before {
    width: 620px; height: 620px;
    background: radial-gradient(circle, rgba(62, 146, 208, .42) 0%,
                                        rgba(62, 146, 208, .16) 42%,
                                        transparent 70%);
    top: -220px; left: -180px;
    animation: flotar 16s ease-in-out infinite;
}

.heroe::after {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(22, 64, 106, .65) 0%,
                                        rgba(22, 64, 106, .25) 45%,
                                        transparent 70%);
    bottom: -180px; right: -140px;
    animation: flotar 20s ease-in-out infinite reverse;
}

@keyframes flotar {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(40px, -30px, 0); }
}

.heroe__contenido { position: relative; z-index: 2; padding: 7rem 0 5rem; }

.heroe__etiqueta {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem 1rem;
    margin-bottom: 1.6rem;
    border-radius: 999px;
    background: rgba(62, 146, 208, .18);
    border: 1px solid rgba(90, 169, 224, .45);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.punto-vivo {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--verde);
    box-shadow: 0 0 0 0 rgba(34, 160, 107, .7);
    animation: latido 2s infinite;
}

@keyframes latido {
    70% { box-shadow: 0 0 0 10px rgba(34, 160, 107, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 160, 107, 0); }
}

.heroe h1 { margin-bottom: .35em; }

.heroe h1 span {
    background: linear-gradient(120deg, var(--azul-400), #9fd4f5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.heroe__lema {
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    color: rgba(255, 255, 255, .8);
    max-width: 42ch;
    margin-inline: auto;
    margin-bottom: 2.2rem;
}

.heroe__botones {
    display: flex;
    gap: .9rem;
    justify-content: center;
    flex-wrap: wrap;
}

.bajar {
    position: absolute;
    bottom: 2rem; left: 50%;
    translate: -50% 0;
    z-index: 2;
    color: rgba(255, 255, 255, .5);
    animation: rebotar 2.4s ease-in-out infinite;
}

@keyframes rebotar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* ------------------------------------------------------------------ Secciones */

.seccion { padding: clamp(4rem, 9vw, 7rem) 0; }
.seccion--hueso { background: var(--hueso); }

.seccion--oscura {
    background: linear-gradient(160deg, var(--marino-800), var(--marino-900));
    color: var(--blanco);
}

.seccion__titulo { max-width: 46ch; margin-bottom: 3rem; }
.seccion__titulo.centrado { margin-inline: auto; text-align: center; }

.antetitulo {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--azul-500);
    margin-bottom: .8rem;
}

.entradilla { font-size: 1.08rem; color: var(--gris-600); }
.seccion--oscura .entradilla { color: rgba(255, 255, 255, .72); }

/* --------------------------------------------------------------------- Cifras */

.cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    padding: 2.5rem;
    margin-top: -5rem;
    position: relative;
    z-index: 5;
    background: var(--blanco);
    border-radius: var(--radio);
    box-shadow: var(--sombra-alta);
}

.cifra { text-align: center; }

.cifra__numero {
    font-size: clamp(2.2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--marino-800);
    line-height: 1;
}

.cifra__etiqueta {
    font-size: .88rem;
    color: var(--gris-600);
    margin-top: .5rem;
}

/* -------------------------------------------------------------------- Tarjetas */

.rejilla {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.tarjeta {
    padding: 2rem;
    background: var(--blanco);
    border: 1px solid var(--gris-300);
    border-radius: var(--radio);
    transition: transform var(--transicion), box-shadow var(--transicion),
                border-color var(--transicion);
}

.tarjeta:hover {
    transform: translateY(-6px);
    box-shadow: var(--sombra);
    border-color: var(--azul-400);
}

.seccion--oscura .tarjeta {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
}

.seccion--oscura .tarjeta:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(90, 169, 224, .5);
}

.tarjeta__icono {
    width: 52px; height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 1.2rem;
    border-radius: 14px;
    background: var(--azul-100);
    color: var(--marino-700);
}

.seccion--oscura .tarjeta__icono {
    background: rgba(62, 146, 208, .2);
    color: var(--azul-400);
}

.tarjeta p { margin-bottom: 0; color: var(--gris-600); font-size: .97rem; }
.seccion--oscura .tarjeta p { color: rgba(255, 255, 255, .7); }

/* ---------------------------------------------------------------------- Pasos */

.pasos { counter-reset: paso; display: grid; gap: 1.2rem; }

.paso {
    counter-increment: paso;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.4rem;
    align-items: start;
    padding: 1.6rem;
    border-radius: var(--radio);
    background: var(--blanco);
    border: 1px solid var(--gris-300);
    transition: transform var(--transicion), box-shadow var(--transicion);
}

.paso:hover { transform: translateX(6px); box-shadow: var(--sombra); }

.paso::before {
    content: counter(paso);
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--marino-800), var(--marino-700));
    color: var(--blanco);
    font-weight: 800;
    font-size: 1.1rem;
}

.paso h3 { margin-bottom: .3em; }
.paso p { margin: 0; color: var(--gris-600); font-size: .97rem; }

/* ----------------------------------------------------------------- Puntuación */

.puntos { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.punto {
    position: relative;
    padding: 2rem 1.6rem;
    text-align: center;
    border-radius: var(--radio);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    overflow: hidden;
    transition: transform var(--transicion), border-color var(--transicion);
}

.punto:hover { transform: translateY(-6px); border-color: var(--azul-400); }

.punto__valor {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(120deg, var(--azul-400), #9fd4f5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.punto__concepto { font-weight: 700; margin: .7rem 0 .3rem; }
.punto p { color: rgba(255, 255, 255, .65); font-size: .92rem; margin: 0; }

.punto--destacado { border-color: rgba(232, 161, 58, .5); background: rgba(232, 161, 58, .08); }
.punto--destacado .punto__valor { background: linear-gradient(120deg, var(--ambar), #f6cd8e); -webkit-background-clip: text; background-clip: text; }

/* ---------------------------------------------------------------- Desempates */

.desempates { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; justify-content: center; }

.desempate {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    font-size: .88rem;
}

.desempate span {
    display: grid; place-items: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--azul-500);
    color: var(--blanco);
    font-size: .72rem;
    font-weight: 700;
}

/* ------------------------------------------------------------------- Llamada */

.llamada {
    position: relative;
    padding: clamp(3rem, 7vw, 5rem);
    border-radius: 24px;
    text-align: center;
    color: var(--blanco);
    background: linear-gradient(135deg, var(--marino-700), var(--azul-500));
    overflow: hidden;
}

/* Brillo estático. Antes rotaba, y repintar un degradado del tamaño del bloque
   sesenta veces por segundo bloqueaba el hilo principal. */
.llamada::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, .22), transparent 45%),
        radial-gradient(circle at 82% 88%, rgba(255, 255, 255, .12), transparent 40%);
    pointer-events: none;
}

.llamada > * { position: relative; z-index: 1; }
.llamada h2 { margin-bottom: .4em; }
.llamada p { color: rgba(255, 255, 255, .85); max-width: 50ch; margin-inline: auto; }

/* Contacto secundario, debajo del botón de inscripción */
.llamada__nota { margin: 1.5rem 0 0; font-size: .93rem; }
.llamada__nota a { text-decoration: underline; text-underline-offset: 3px; color: var(--blanco); }
.llamada__nota a:hover { text-decoration-thickness: 2px; }

/* ------------------------------------------------------------------- Dos columnas */

.dos-columnas {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

/* Dentro de dos columnas el espacio es la mitad, así que las tarjetas se
   apilarían en una sola fila muy larga. En 2x2 el bloque queda equilibrado. */
.dos-columnas .rejilla { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 620px) {
    .dos-columnas .rejilla { grid-template-columns: 1fr; }
}

.dos-columnas__imagen {
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra-alta);
    background: var(--hueso);
    padding: 2rem;
}

/* -------------------------------------------------------------------- Reglas */
/* Cada regla es una ficha con su propio dibujo, hecho con CSS a partir de lo
   que cuenta: el emparejamiento del grupo, el marcador, la red, el plazo... */

.reglas {
    display: grid;
    /* El min() evita que la ficha desborde en pantallas más estrechas que 290px */
    grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
    gap: 1.2rem;
}

.regla {
    display: flex;
    flex-direction: column;
    background: var(--blanco);
    border: 1px solid var(--gris-300);
    border-radius: var(--radio);
    overflow: hidden;
    padding-bottom: 1.7rem;
}

/* El dibujo va a sangre; el texto, con su margen */
.regla > :not(.figura) { padding-inline: 1.7rem; }
.regla > :last-child { margin-bottom: 0; }

.regla h3 { margin: 0 0 .7rem; font-size: 1.05rem; text-wrap: balance; }
.regla p { color: var(--gris-600); margin-bottom: .8rem; }

/* La franja del dibujo lleva la misma trama de pista que el héroe */
.figura {
    margin: 0 0 1.5rem;
    height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border-bottom: 1px solid var(--gris-300);
    background:
        linear-gradient(rgba(62, 146, 208, .09) 1px, transparent 1px) 0 0 / 100% 29px,
        linear-gradient(90deg, rgba(62, 146, 208, .09) 1px, transparent 1px) 0 0 / 29px 100%,
        var(--hueso);
}

/* ---- Piezas de los dibujos ---- */

/* Jugador con su puesto en la clasificación */
.ficha {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--marino-800);
    color: var(--blanco);
    font-weight: 800; font-size: .95rem;
}
.ficha--sale { background: transparent; border: 2px dashed var(--gris-300); color: var(--gris-600); }
.ficha--entra { background: var(--verde); }

.contra {
    margin: 0 .7rem;
    font-size: .7rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--gris-600);
}

.flecha { margin: 0 .5rem; color: var(--gris-600); font-size: 1.3rem; }

/* Semanas de plazo: la cuarta es la opcional */
.semana {
    width: 42px; height: 42px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: var(--azul-100);
    color: var(--marino-700);
    font-size: .74rem; font-weight: 700;
}
.semana--opcional { background: transparent; border: 1px dashed var(--azul-500); color: var(--azul-500); }

/* Marcador: dos sets jugados y el tercero que no llega a jugarse */
.marcador { display: grid; grid-template-columns: repeat(3, 34px); gap: 6px; }
.marcador span {
    height: 34px;
    display: grid; place-items: center;
    border: 1px solid var(--gris-300);
    border-radius: 8px;
    background: var(--blanco);
    font-weight: 800; font-size: .9rem;
}
.marcador .sin-jugar { border-style: dashed; background: transparent; color: var(--gris-300); }

/* Los tres valores que suman */
.chip-punto {
    min-width: 46px; height: 46px;
    padding: 0 .7rem;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--azul-100);
    color: var(--marino-700);
    font-weight: 800; font-size: 1.1rem;
}
.chip-punto--extra { background: rgba(232, 161, 58, .18); color: var(--ambar-texto); }

/* Escalera de criterios de desempate, de más a menos peso */
.escalera { display: grid; gap: 7px; width: 155px; }
.escalera span { height: 9px; border-radius: 99px; background: var(--azul-100); }
.escalera span:nth-child(1) { width: 100%; background: var(--marino-800); }
.escalera span:nth-child(2) { width: 76%; background: var(--azul-500); }
.escalera span:nth-child(3) { width: 54%; }
.escalera span:nth-child(4) { width: 32%; }

/* Uno sube el resultado desde el móvil y los otros tres confirman */
.movil {
    width: 42px; height: 66px;
    border: 2px solid var(--marino-800);
    border-radius: 10px;
    display: grid; place-items: center;
    position: relative;
    color: var(--verde);
    font-weight: 800; font-size: 1.25rem;
}
.movil::before {
    content: "";
    position: absolute; top: 6px; left: 50%; translate: -50% 0;
    width: 13px; height: 2px; border-radius: 2px;
    background: var(--marino-800);
}
.confirman { display: grid; gap: 5px; margin-left: .9rem; }
.confirman span {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(34, 160, 107, .15);
    color: var(--verde);
    font-size: .7rem; font-weight: 800;
}

/* Cuanto antes avises, más margen queda hasta el partido */
.plazo { position: relative; width: 176px; height: 4px; border-radius: 99px; background: var(--gris-300); }
.plazo i {
    position: absolute; top: 50%; translate: 0 -50%;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--ambar);
    left: 12%;
}
.plazo::after {
    content: "";
    position: absolute; top: 50%; right: 0; translate: 0 -50%;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--marino-800);
}

/* Tres ausencias sin justificar */
.tache {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: rgba(232, 161, 58, .16);
    color: var(--ambar-texto);
    font-weight: 800;
}

/* Los cuatro a un lado y otro de la red */
.jugador { width: 15px; height: 15px; border-radius: 50%; background: var(--azul-500); }
.red {
    width: 2px; height: 58px;
    margin: 0 1.1rem;
    background: repeating-linear-gradient(var(--marino-800) 0 4px, transparent 4px 8px);
}

/* La primera jornada, a partir de la cual ya no hay devolución */
.calendario {
    width: 58px; height: 60px;
    border: 2px solid var(--marino-800);
    border-radius: 10px;
    display: grid; place-items: center;
    padding-top: 12px;
    position: relative;
    font-weight: 800; font-size: .9rem;
}
.calendario::before {
    content: "";
    position: absolute; inset: 0 0 auto;
    height: 12px;
    background: var(--marino-800);
    border-radius: 7px 7px 0 0;
}

/* ---- Avisos ---- */

.regla--aviso .figura { background-color: #fdf7ec; }

.regla--aviso h3::before {
    content: "Importante";
    display: block;
    margin-bottom: .5rem;
    font-size: .7rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ambar-texto);
}

.lista-limpia { margin: 0; padding-left: 1.2rem; color: var(--gris-600); }
.lista-limpia li { margin-bottom: .4rem; }

/* --------------------------------------------------------------------- Pie */

.pie {
    padding: 3.5rem 0 2rem;
    background: var(--marino-900);
    color: rgba(255, 255, 255, .6);
    font-size: .92rem;
}

.pie__fila {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
    align-items: start;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.pie a { color: var(--azul-400); text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie__enlaces { display: flex; flex-direction: column; gap: .5rem; }
.pie__legal { padding-top: 1.5rem; text-align: center; font-size: .85rem; }

/* ------------------------------------------------- Animaciones de aparición */

.aparece {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}

.aparece.visible { opacity: 1; transform: none; }

/* Escalonado: cada hijo entra un poco después que el anterior */
.aparece:nth-child(2) { transition-delay: .08s; }
.aparece:nth-child(3) { transition-delay: .16s; }
.aparece:nth-child(4) { transition-delay: .24s; }
.aparece:nth-child(5) { transition-delay: .32s; }

/* Quien pide menos movimiento, no lo recibe */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .aparece { opacity: 1; transform: none; transition: none; }
    .heroe::before, .heroe::after, .bajar, .punto-vivo { animation: none; }
    * { transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------------- Móvil */

@media (max-width: 860px) {
    .dos-columnas { grid-template-columns: 1fr; }
    .cifras { margin-top: -3rem; padding: 1.8rem; }

    .menu-movil { display: block; }

    .navegacion {
        position: fixed;
        inset: 0 0 auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 5.5rem 1.5rem 2rem;
        background: var(--blanco);
        box-shadow: var(--sombra-alta);
        transform: translateY(-100%);
        transition: transform var(--transicion);
    }

    .navegacion.abierta { transform: none; }

    .navegacion a {
        color: var(--marino-800);
        padding: .9rem .5rem;
        border-bottom: 1px solid var(--gris-300);
        border-radius: 0;
    }

    .navegacion .boton { margin-top: 1rem; justify-content: center; border-bottom: 0; }
}

@media (max-width: 620px) {
    /* En el móvil la franja del dibujo se achica para no comerse la pantalla */
    .figura { height: 96px; margin-bottom: 1.2rem; }
    .regla { padding-bottom: 1.4rem; }
    .regla > :not(.figura) { padding-inline: 1.4rem; }
}

/* --------------------------------------------------------------- Simulador */
/* La clasificación imita a la de la aplicación: mismos colores, mismo orden de
   columnas y el mismo degradado en la cabecera. Los colores de Tailwind que usa
   la app se declaran aquí dentro y no se escapan al resto del sitio. */

.simulador {
    --app-azul: #2563eb;
    --app-esmeralda: #059669;
    --app-morado: #9333ea;
    --app-rosa: #db2777;
    --app-verde: #22c55e;
    --app-rojo: #ef4444;
    --app-ambar: #fbbf24;
    --app-gris: #d1d5db;

    background: var(--blanco);
    border: 1px solid var(--gris-300);
    border-radius: 20px;
    box-shadow: var(--sombra);
    overflow: hidden;
}

.simulador__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--gris-300);
    background: var(--hueso);
}

.simulador__estado {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gris-600);
}

.simulador__acciones { display: flex; align-items: center; gap: .8rem; }

.boton-plano {
    border: 0;
    background: none;
    padding: .4rem .2rem;
    font: inherit;
    font-size: .88rem;
    color: var(--gris-600);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.boton-plano:hover { color: var(--marino-800); }

/* Pestañas: solo aparecen en el móvil. En escritorio los dos paneles caben
   uno al lado del otro y no hacen falta. */
.simulador__pestanas { display: none; }

.simulador__pestana {
    flex: 1;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    padding: .85rem .5rem;
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    color: var(--gris-600);
    cursor: pointer;
}
.simulador__pestana.es-activa {
    color: var(--app-azul);
    border-bottom-color: var(--app-azul);
}

.simulador__cuerpo {
    display: grid;
    /* La clasificación lleva más columnas, así que se le da más sitio */
    grid-template-columns: 1.45fr 1fr;
    gap: 1.2rem;
    padding: 1.4rem;
    background: var(--hueso);
}

.simulador__titulo {
    margin: 0 0 .9rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--azul-500);
}

.simulador__nota {
    margin: 0;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gris-300);
    background: var(--blanco);
    font-size: .85rem;
    color: var(--gris-600);
}

/* ---- La tarjeta de clasificación, calcada de la aplicación ---- */

.tarjeta-app {
    border: 1px solid #f3f4f6;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(8, 25, 43, .12);
    background: var(--blanco);
}

.tarjeta-app__cabecera {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem 1.05rem;
    background: linear-gradient(90deg, var(--app-azul), var(--app-morado));
    color: var(--blanco);
    font-weight: 600;
    font-size: .95rem;
}
.tarjeta-app__cabecera svg { width: 20px; height: 20px; flex: none; }

.tabla-sim { list-style: none; margin: 0; padding: 0; }

.fila-sim {
    /* Columnas fijas, no flex ni auto: cada fila es una rejilla independiente,
       así que si una medida se calcula sola las filas dejan de cuadrar entre
       sí. Con la medalla pasaba justo eso: sólo la llevan los tres primeros y
       empujaba el avatar y el nombre 33 px en el resto.
       El 1fr del jugador absorbe lo que ocupen las insignias, de modo que la
       columna de puntos no se mueve nunca. */
    display: grid;
    grid-template-columns:
        28px            /* grupo    */
        1.15rem         /* puesto   */
        1.45rem         /* medalla: los emojis de Apple son más anchos */
        2.1rem          /* cambio   */
        32px            /* avatar   */
        minmax(0, 1fr)  /* jugador  */
        auto            /* marcas   */
        2.4rem;         /* puntos   */
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    border-bottom: 1px solid #e5e7eb;
    /* Las filas se mueven con transform al reordenarse */
    will-change: transform;
}
.fila-sim:last-child { border-bottom: 0; }

/* El color del grupo depende de su número, igual que en la app */
.fila-sim__grupo {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--blanco);
    font-weight: 700;
    font-size: .78rem;
}
.fila-sim__grupo--1 { background: var(--app-azul); }
.fila-sim__grupo--2 { background: var(--app-esmeralda); }
.fila-sim__grupo--3 { background: var(--app-morado); }
.fila-sim__grupo--0 { background: var(--app-rosa); }

.fila-sim__puesto {
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.fila-sim__medalla { font-size: 1rem; line-height: 1; text-align: center; overflow: hidden; }

/* Cambio de posición: flecha y cuántos puestos */
.fila-sim__cambio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .12rem;
    font-size: .8rem;
    font-weight: 700;
}
.fila-sim__cambio svg { width: 15px; height: 15px; }
.fila-sim__cambio--sube { color: #16a34a; }
.fila-sim__cambio--baja { color: #dc2626; }
.fila-sim__cambio--igual { color: #9ca3af; font-size: 1.05rem; font-weight: 400; }

.fila-sim__avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(90deg, #3b82f6, #a855f7);
    color: var(--blanco);
    font-weight: 600;
    font-size: .72rem;
}

.fila-sim__jugador { min-width: 0; }

.fila-sim__nombre {
    display: block;
    font-size: .86rem;
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Historial: un punto por jornada jugada */
.fila-sim__historial { display: flex; gap: .22rem; margin-top: .24rem; }
.fila-sim__historial i { width: 8px; height: 8px; border-radius: 50%; background: var(--app-gris); }
.fila-sim__historial i.gana { background: var(--app-verde); }
.fila-sim__historial i.pierde { background: var(--app-rojo); }
.fila-sim__historial i.empata { background: var(--app-ambar); }

/* Las dos insignias comparten celda para no descuadrar la de puntos */
.fila-sim__marcas { display: flex; align-items: center; gap: .3rem; }

.fila-sim__suma,
.fila-sim__racha {
    white-space: nowrap;
    font-size: .68rem;
    font-weight: 700;
    padding: .1rem .4rem;
    border-radius: 99px;
    animation: asomar .45s cubic-bezier(.2, .8, .2, 1) both;
}
.fila-sim__suma { background: rgba(34, 197, 94, .16); color: #15803d; }
.fila-sim__racha { background: rgba(251, 191, 36, .24); color: #92400e; }

@keyframes asomar {
    from { opacity: 0; transform: translateX(6px); }
    to   { opacity: 1; transform: none; }
}

.fila-sim__puntos {
    text-align: right;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--app-azul);
    font-variant-numeric: tabular-nums;
}

/* ---- Los grupos ---- */

.grupos-sim { display: grid; gap: .8rem; }

.grupo-sim {
    padding: .9rem 1rem;
    border: 1px solid var(--gris-300);
    border-radius: 12px;
    background: var(--blanco);
    animation: asomar .4s cubic-bezier(.2, .8, .2, 1) both;
}

.grupo-sim__nombre {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .55rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gris-600);
}
.grupo-sim__nombre .fila-sim__grupo { width: 21px; height: 21px; font-size: .66rem; }

.grupo-sim__enfrentamiento {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .7rem;
}

.grupo-sim__equipo { font-size: .88rem; line-height: 1.35; }
.grupo-sim__equipo i { font-style: normal; color: var(--gris-600); }
.grupo-sim__equipo.es-ganador { font-weight: 800; }

.grupo-sim__contra,
.grupo-sim__marcador {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gris-600);
    text-align: center;
}

.grupo-sim__marcador {
    font-size: .95rem;
    letter-spacing: 0;
    color: var(--blanco);
    background: var(--app-azul);
    border-radius: 8px;
    padding: .2rem .55rem;
    white-space: nowrap;
}

@media (max-width: 900px) {
    /* Apilados, los dos paneles dejaban la tarjeta en más de 1000 px: más de
       dos pantallas de móvil. Al pulsar "Jugar la jornada" los marcadores
       salían en el panel de grupos, fuera de pantalla, así que se perdía la
       mitad de lo que pasa. Con pestañas se ve una cosa cada vez. */
    .simulador__pestanas {
        display: flex;
        border-bottom: 1px solid var(--gris-300);
        background: var(--blanco);
    }

    .simulador__cuerpo { grid-template-columns: 1fr; padding: 1.1rem; }
    .simulador__panel { display: none; }
    .simulador__panel.es-activo { display: block; }

    /* Nada de barra pegajosa: con las pestañas la tarjeta cabe casi en una
       pantalla, y al quedarse fija tapaba las propias pestañas al desplazarse */
    .simulador__barra { padding: 1rem 1.1rem; }

    .simulador__nota { padding: 1rem 1.1rem; }
}

@media (max-width: 560px) {
    /* En el móvil el nombre se quedaba en 57 px y salía "Ro..." en vez de
       "Rocío B.". Las insignias bajan a una segunda línea, debajo del nombre,
       y le devuelven el ancho. No se quita ninguna celda: se colocan por
       nombre de área, que es la única forma de mover una sin descuadrar
       la rejilla. */
    .fila-sim {
        grid-template-columns: 24px 1.05rem 1.25rem 1.85rem 26px minmax(0, 1fr) 2.3rem;
        grid-template-areas:
            "grupo puesto medalla cambio avatar jugador puntos"
            "grupo puesto medalla cambio avatar marcas  puntos";
        column-gap: .3rem;
        row-gap: 0;
        padding: .55rem .6rem;
    }

    .fila-sim__grupo   { grid-area: grupo; width: 24px; height: 24px; font-size: .7rem; }
    .fila-sim__puesto  { grid-area: puesto; font-size: 1.1rem; }
    .fila-sim__medalla { grid-area: medalla; font-size: .8rem; }
    .fila-sim__cambio  { grid-area: cambio; font-size: .74rem; }
    .fila-sim__cambio svg { width: 13px; height: 13px; }
    .fila-sim__avatar  { grid-area: avatar; width: 26px; height: 26px; font-size: .62rem; }
    .fila-sim__jugador { grid-area: jugador; }
    .fila-sim__marcas  { grid-area: marcas; }
    .fila-sim__marcas:not(:empty) { margin-top: .25rem; }
    .fila-sim__puntos  { grid-area: puntos; }

    /* Que el botón no parta en dos líneas en pantallas estrechas */
    .simulador__acciones .boton { white-space: nowrap; }

    .grupo-sim__enfrentamiento { grid-template-columns: 1fr; text-align: center; gap: .35rem; }
}