/* ============================================================
 *  Space Paintball — Páginas de contenido
 *  assets/css/paginas.css
 * ------------------------------------------------------------
 *  Modos de juego (juegos/) y Contacto (contacto/).
 *
 *  Carga DESPUÉS de estilos.css y ANTES de personalizado.css, así
 *  que usa las variables del tema y se puede sobrescribir a mano.
 *
 *  Sigue el brandbook: azul #005DB6, amarillo #F9D70D, blanco y
 *  negro. Las tipografías y las variables de marca viven en
 *  estilos.css, que carga antes y aplica en todo el sitio.
 * ============================================================ */

/* Las @font-face y las variables --sp-display, --sp-texto, --sp-azul
   y --sp-amarillo se movieron a estilos.css: ahora son globales y
   aplican en todo el sitio, no solo en estas dos páginas. */

/* ============================================================
   Encabezado de página
   ============================================================ */
.pg-hero {
    padding: 48px 0 36px;
    text-align: center;
}
.pg-hero--corto {
    padding: 36px 0 24px;
}

.pg-hero__eyebrow {
    margin: 0 0 10px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--sp-azul);
}

/* Space Age no trae minúsculas reales, así que todo lo que la use
   va en mayúsculas con mucho espaciado, como en el brandbook. */
.pg-hero__titulo {
    margin: 0 0 14px;
    font-family: var(--sp-display);
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--sp-navy);
}

.pg-hero__bajada {
    max-width: 620px;
    margin: 0 auto;
    color: var(--sp-muted);
    font-size: 1.05rem;
}

/* El archivo mide 259x38. Estirarlo a 720px lo dejaba borroso, así
   que se muestra a su tamaño real y solo se achica si no cabe. */
.pg-separador {
    display: block;
    width: 259px;
    max-width: 100%;
    height: auto;
    margin: 8px auto 40px;
    opacity: .7;
}

.pg-seccion__titulo {
    margin: 0 0 8px;
    font-family: var(--sp-display);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sp-navy);
}
.pg-seccion__titulo--claro { color: #fff; }

.pg-seccion__intro {
    max-width: 660px;
    margin: 0 0 26px;
    color: var(--sp-muted);
}
.pg-seccion__intro--claro { color: #c7d3e6; }

/* Dentro de la franja de bandos el bloque va centrado. El título ya
   lo estaba por el text-align del contenedor, pero la bajada tiene
   max-width y sin margin auto quedaba pegada a la izquierda. */
.pg-bandos .pg-seccion__intro {
    margin-left: auto;
    margin-right: auto;
}

.pg-nota {
    margin-top: 22px;
    font-size: .92rem;
    color: var(--sp-muted);
}

/* ============================================================
   Formatos (Paintball / Gel Blaster)
   ------------------------------------------------------------
   Fichas horizontales: miniatura cuadrada de 132px a la izquierda y
   el texto a la derecha. Antes eran verticales con la foto a 220px
   de alto; como los archivos son apaisados salían mal recortadas y
   además empujaban los modos de partida fuera de la primera
   pantalla, que es lo que de verdad se quiere que se vea.
   ============================================================ */
.pg-formatos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 20px;
}

.pg-formato {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    background: #fff;
    border: 1px solid var(--sp-line);
    border-radius: 14px;
    padding: 20px;
}

/* aspect-ratio + object-fit recortan al centro sin deformar. */
.pg-formato__foto {
    width: 132px;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--sp-bg);
}
.pg-formato__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pg-formato__cuerpo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pg-formato__nombre {
    margin: 0 0 6px;
    font-family: var(--sp-display);
    font-size: 1.3rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sp-navy);
}

.pg-formato__desc {
    margin: 0 0 14px;
    font-size: .93rem;
}

.pg-datos {
    list-style: none;
    margin: 0 0 16px;
    padding: 14px 0 0;
    border-top: 1px solid var(--sp-line);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}
.pg-datos li {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.pg-datos span {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--sp-muted);
}
.pg-datos strong {
    font-size: .98rem;
    color: var(--sp-navy);
}

.pg-formato .btn {
    margin-top: auto;
    align-self: flex-start;
}

/* ============================================================
   Bandos — la única franja a sangre completa
   ------------------------------------------------------------
   Se sale del contenedor con el truco de los 50vw negativos para
   que el azul llegue a los bordes de la ventana sin sacar la
   sección del flujo del documento.
   ============================================================ */
.pg-bandos {
    margin: 56px var(--sp-sangria);
    padding: 52px var(--sp-sangria-pad);
    background: var(--sp-azul);
    color: #fff;
    text-align: center;
}

.pg-bandos__par {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    max-width: 900px;
    margin: 34px auto 0;
}

.pg-bando__escudo {
    width: 118px;
    height: auto;
    margin: 0 auto 14px;
    display: block;
}

.pg-bando__nombre {
    margin: 0 0 8px;
    font-family: var(--sp-display);
    font-size: 1.4rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.pg-bando--aliens .pg-bando__nombre { color: var(--sp-amarillo); }
.pg-bando--humanos .pg-bando__nombre { color: #fff; }

.pg-bando__desc {
    margin: 0;
    font-size: .95rem;
    color: #c7d3e6;
}

.pg-bandos__vs {
    font-family: var(--sp-display);
    font-size: 2.2rem;
    letter-spacing: 2px;
    color: var(--sp-amarillo);
}

/* ============================================================
   Modos de partida
   ============================================================ */
.pg-modos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.pg-modo {
    position: relative;
    background: #fff;
    border: 1px solid var(--sp-line);
    border-radius: 14px;
    padding: 24px 24px 20px;
    border-top: 4px solid var(--sp-line);
    border-radius: 0 0 14px 14px;
}
.pg-modo--humanos { border-top-color: var(--sp-azul); }
.pg-modo--aliens  { border-top-color: var(--sp-amarillo); }

.pg-modo__num {
    position: absolute;
    top: 16px;
    right: 20px;
    font-family: var(--sp-display);
    font-size: 1.7rem;
    color: var(--sp-line);
    line-height: 1;
}

.pg-modo__nombre {
    margin: 0 0 6px;
    padding-right: 44px;
    font-family: var(--sp-display);
    font-size: 1.2rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sp-navy);
}

.pg-modo__objetivo {
    margin: 0 0 12px;
    font-weight: 700;
    font-size: .9rem;
    color: var(--sp-green);
}

.pg-modo__desc {
    margin: 0 0 16px;
    font-size: .94rem;
}

.pg-modo__meta {
    list-style: none;
    margin: 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--sp-line);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    font-size: .88rem;
}
.pg-modo__meta span {
    color: var(--sp-muted);
    margin-right: 4px;
}

/* ============================================================
   Cierre
   ============================================================ */
.pg-cierre {
    text-align: center;
    padding: 12px 0 40px;
}
.pg-cierre__titulo {
    margin: 0 0 10px;
    font-family: var(--sp-display);
    font-size: clamp(1.4rem, 3vw, 2rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sp-navy);
}
.pg-cierre__texto {
    max-width: 560px;
    margin: 0 auto 22px;
    color: var(--sp-muted);
}
.pg-cierre__acciones {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ============================================================
   Contacto
   ============================================================ */
.ct-cols {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding-bottom: 48px;
}

.ct-datos {
    background: #fff;
    border: 1px solid var(--sp-line);
    border-radius: 16px;
    padding: 24px;
}

.ct-wa {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: var(--sp-green);
    color: #fff !important;
    text-decoration: none;
}
.ct-wa__icono {
    flex: 0 0 auto;
}
.ct-wa__texto {
    min-width: 0;
}
.ct-wa:hover { background: #196b3d; }
.ct-wa__titulo {
    display: block;
    font-weight: 700;
    font-size: 1.02rem;
}
.ct-wa__nota {
    display: block;
    margin-top: 2px;
    font-size: .85rem;
    opacity: .9;
}

.ct-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ct-lista li {
    padding: 12px 0;
    border-bottom: 1px solid var(--sp-line);
    font-size: .94rem;
}
.ct-lista li:last-child { border-bottom: 0; }
.ct-lista span {
    display: block;
    margin-bottom: 2px;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--sp-muted);
}

.ct-aviso {
    margin: 18px 0 0;
    padding: 12px 14px;
    background: var(--sp-bg);
    border-radius: 10px;
    font-size: .88rem;
    color: var(--sp-muted);
}

.ct-form {
    background: #fff;
    border: 1px solid var(--sp-line);
    border-radius: 16px;
    padding: 26px 28px 28px;
}
/* El .form global topa en 460px; acá la caja ya acota. */
.ct-form form { max-width: none; }

.ct-codigo[hidden] { display: none; }

.ct-form .campo-grupo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

/* Trampa antibots: fuera de la pantalla, no display:none. Algunos
   robots ignoran los campos ocultos con display y este los atrapa. */
.ct-trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ============================================================
   Contacto — mapa
   ============================================================ */
.ct-mapa {
    padding-bottom: 48px;
}

/* El iframe llega con width/height propios; el marco con aspect-ratio
   manda sobre eso y lo deja responsive sin tocar el atributo. */
.ct-mapa__marco {
    aspect-ratio: 16 / 9;
    border: 1px solid var(--sp-line);
    border-radius: 16px;
    overflow: hidden;
    background: var(--sp-bg);
}
.ct-mapa__marco iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.ct-mapa__acciones {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0 0;
}

/* ============================================================
   Términos y condiciones
   ============================================================ */
.tc-doc {
    max-width: 760px;
    margin: 0 auto;
    padding-bottom: 8px;
}

.tc-intro {
    margin: 0 0 30px;
    font-size: 1.02rem;
    color: var(--sp-muted);
}

.tc-clausula {
    padding: 22px 0;
    border-top: 1px solid var(--sp-line);
}
.tc-clausula:first-of-type { border-top: 0; padding-top: 0; }

.tc-clausula__titulo {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 10px;
    font-family: var(--sp-display);
    font-size: 1.1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sp-navy);
}

.tc-clausula__num {
    flex: 0 0 auto;
    min-width: 32px;
    padding: 2px 0;
    text-align: center;
    background: var(--sp-amarillo);
    color: var(--sp-navy);
    border-radius: 6px;
    font-size: .9rem;
    letter-spacing: 0;
}

.tc-clausula__texto {
    margin: 0;
    font-size: .98rem;
    line-height: 1.75;
}

.tc-cierre {
    margin: 30px 0 0;
    padding: 18px 20px;
    background: var(--sp-bg);
    border-left: 3px solid var(--sp-azul);
    border-radius: 0;
    font-size: .96rem;
    color: var(--sp-muted);
}

/* ============================================================
   Responsive — mismos cortes que el resto del sitio
   ============================================================ */
@media (max-width: 900px) {
    .ct-cols {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 700px) {
    .pg-bandos__par {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .pg-bandos__vs {
        font-size: 1.6rem;
    }
    .pg-formatos {
        grid-template-columns: 1fr;
    }
    .pg-formato {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 16px;
    }
    .pg-formato__foto { width: 96px; }
    .ct-form .campo-grupo {
        grid-template-columns: 1fr;
    }
    .pg-hero {
        padding: 32px 0 26px;
    }
}

/* ============================================================
   Acceso: iniciar sesión y crear cuenta
   ------------------------------------------------------------
   Dos columnas en escritorio. En celular se apilan, y el login
   queda arriba porque quien vuelve es mayoría.

   La de registro es más ancha (5fr contra 4fr) porque tiene siete
   campos contra dos: con columnas iguales el login quedaba con la
   mitad de la caja vacía.
   ============================================================ */
.acc-cols {
    display: grid;
    grid-template-columns: 4fr 5fr;
    gap: 24px;
    align-items: start;
    padding-bottom: 56px;
}

.acc-caja {
    background: #fff;
    border: 1px solid var(--sp-line);
    border-radius: 16px;
    padding: 28px clamp(20px, 3vw, 32px) 30px;
    scroll-margin-top: 90px;
}

/* La de crear cuenta lleva el acento de marca: es la acción que
   queremos que gane cuando alguien llega sin decidir. */
.acc-caja--registro {
    border-top: 4px solid var(--sp-amarillo);
}

.acc-caja__titulo {
    margin: 0 0 6px;
    font-family: var(--sp-display);
    font-size: 1.25rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sp-navy);
}

.acc-caja__intro {
    margin: 0 0 20px;
    font-size: .93rem;
    color: var(--sp-muted);
}

/* El .form global topa en 460px; acá la caja ya acota. */
.acc-caja form { max-width: none; }

.acc-caja .campo-grupo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.acc-regalo {
    margin: 0 0 18px;
    padding: 12px 14px;
    background: #fffbea;
    border: 1px solid #fde68a;
    border-radius: 10px;
    font-size: .9rem;
    color: #7c5c0a;
}

.acc-recordar {
    margin: 4px 0 18px;
}
.acc-recordar small {
    display: block;
    margin-top: 2px;
}

.acc-caja__pie {
    margin: 16px 0 0;
    font-size: .9rem;
}

.acc-legal {
    margin: 4px 0 18px;
    font-size: .84rem;
    color: var(--sp-muted);
    line-height: 1.6;
}

/* Los saltos entre bloques solo tienen sentido cuando están
   apilados: en dos columnas los dos formularios se ven a la vez. */
.acc-salto { display: none; }

@media (max-width: 900px) {
    .acc-cols {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .acc-salto {
        display: block;
        margin: 18px 0 0;
        padding-top: 16px;
        border-top: 1px solid var(--sp-line);
        text-align: center;
        font-size: .92rem;
    }
}

@media (max-width: 560px) {
    .acc-caja .campo-grupo {
        grid-template-columns: 1fr;
    }
}