@charset "UTF-8";
/*---------------------------------------------------------------------------*\
    #CONTENIDOS
    Guía de estilos orientativa:
        http://cssguidelin.es, por Harry Roberts @csswizardry
 
    RESET

    TIPOGRAFÍA

    AYUDA

    REGLAS GENERICAS

    MEDIA QUERY MÓVIL



    Autores:  Javier Cadenas
    Última versión: 2021
\*---------------------------------------------------------------------------*/





/*---------------------------------------------------------------------------*\
    #RESET
    Basado en el de Eric Meyer: http://meyerweb.com/eric/tools/css/reset/
\*---------------------------------------------------------------------------*/

html, body, div, span, object,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, cite, code,
del, dfn, em, i, img, ins, q,
strong, sub, sup,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, select, textarea, button,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, embed, figure, figcaption, footer,
header, nav, section, summary,
time, mark, audio, video {
    margin:     0;
    padding:    0;
    border:     0;
    outline:    0;
    line-height: inherit;
    font: inherit;
    font-size: 100%;
    color: inherit;
    vertical-align: baseline;
    background: transparent;
    box-sizing: border-box;
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
       -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
            text-size-adjust: 100%;
}

body {
    line-height: 1;
    min-height: 100%;
    image-rendering: -webkit-optimize-contrast;
}

article, aside, figcaption, figure, footer, header, hgroup, nav, section {
    display: block;
}

input, select, textarea {
    line-height: inherit;
    border-radius: 1px;
    -webkit-appearance: none;
       -moz-appearance: none;
}

input::-ms-clear {
    display: none;
}

textarea {
    overflow: auto;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

strong {
    font-weight: bold;
}

em, i, cite {
    font-style: italic;
}





/*---------------------------------------------------------------------------*\
    #TIPOGRAFÍA
\*---------------------------------------------------------------------------*/

@font-face {
    font-family:        'Crimson Pro';
    font-style:         normal;
    font-weight:        normal;
    src:                url(../fuentes/crimsonpro-regular.ttf) format('truetype');
}

body {
    font-family: 'Crimson Pro', serif;
    text-rendering: optimizeLegibility;
}





/*---------------------------------------------------------------------------*\
    #AYUDA
\*---------------------------------------------------------------------------*/

.texto-oculto {
    display: block;
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
}

.oculto {
    display: none;
}





/*---------------------------------------------------------------------------*\
    #REGLAS GENERICAS

    ESQUEMA DE COLORES
    Fondo:                       #f5f5f5 (gris claro)
    Cuerpo de texto:             #000    (negro)
    Detalles:                    #9d7878 (grana pálido)
\*---------------------------------------------------------------------------*/

body {
    background-color: #f5f5f5;
    font-size:   1.3125rem;
    line-height: 1.555555555555556;
    word-spacing: .08em;
}

img:not([class]) {
    max-width: 100%;
    display: block;
}

.logo {
    padding: 12.5rem 1.25rem 0 1.25rem;
}

.logo > img {
    margin: 0 auto;
}

.entradilla {
    width: 71.875rem;
    max-width: 100%;
    text-align: center;
    margin: 0 auto 3.125rem auto;
    font-size: 3rem;
    border-bottom: #ccc 2px solid;
    padding-bottom: 10.625rem;
}

.resaltado {
    color: #9d7878;
}

.principal {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 2;
    width: 71.875rem;
    max-width: 100%;
    margin: -9.375rem auto 0 auto;
}

.ahora {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    text-align: center;
}

.juego {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}

.juego__icono {
    display: block;
    width: 267px;
    height: 126px;
    background: #f5f5f5 url(../img/season.png) no-repeat;
    margin: 0 auto;
}

.juego__icono:hover {
    background-position: 0 -129px;
}

.twitter {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    margin-top: .9375rem;
}

.twitter__icono {
    display: block;
    width: 100px;
    height: 101px;
    background: #f5f5f5 url(../img/iconos.png) no-repeat;
    margin: 0 auto;
}

.twitter__icono:hover {
    background-position: 0 -101px;
}

.steam {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    margin-top: .9375rem;
}

.steam__icono {
    display: block;
    width: 100px;
    height: 101px;
    background: #f5f5f5 url(../img/iconos.png) no-repeat -100px 0;
    margin: 0 auto;
}

.steam__icono:hover {
    background-position: -100px -101px;
}

.pie {
    width: 500px;
    max-width: 100%;
    margin: 6.25rem auto 0 auto;
    text-align: center;
}





/*---------------------------------------------------------------------------*\
    #MEDIA QUERY MÓVIL
    Reglas específicas para la versión móvil
\*---------------------------------------------------------------------------*/

@media screen and (max-width: 600px) {

    .logo {
        padding-top: 3.125rem;
    }

    .principal {
        display: block;
    }

    .entradilla {
        font-size: 1.5rem;
        border-bottom: none;
    }

}