:root {
    --main-link-color: #ffffff;
    --main-nav-link-color: #000000;
    --main-background-color: #001159;
    --main-nav-background-color: #ffffff;
    --main-button-color: #001159;
    --main-button-text-color: #ffffff;
    --base-font-size: 50px;
}

/***************************************************************/
/*********************** TYPE SELECTOR *************************/
/***************************************************************/

/* Fondo: color sólido marino (--main-background-color: #001159) */
html {
    background-color: var(--main-background-color);
}

/***************************************************************/
/************************ ID SELECTOR **************************/
/***************************************************************/

#lnkHome {
    color: var(--main-nav-link-color);
}

#promotionLogoH1_Bis {
    margin-top: 40px;
}

#promotionLogoH1 {
    color: var(--main-link-color);
}

/* Logo (645 x 155): que no se corte en pantallas pequeñas.
   Mismo patron que ES26ConcursoTicketsHS / ES26BraunCashbackXMAS. */
.header-logo-wrapper {
    width: 100%;
    display: block;
    text-align: center;
    overflow: hidden;
}

#promotionLogoH1_Bis {
    width: 100% !important;
    max-width: 645px !important;
    height: auto !important;
}

#myTopnav {
    background-color: var(--main-nav-background-color) !important;
}

#hlSkipToMain {
    background-color: var(--main-nav-background-color);
    color: var(--main-nav-link-color);
}

#hlSkipToMain:focus {
    outline: 3px solid var(--main-nav-background-color);
    outline-offset: 4px;
}

.skip-to-main-content-link {
    display: inline-block;
    padding: 0.5em 1em;
    line-height: normal;
    white-space: normal;
    overflow: visible;
    box-sizing: border-box;
    top: 0px;
}

/***************************************************************/
/*********************** CLASS SELECTOR ************************/
/***************************************************************/

.link-menu-item {
    color: var(--main-nav-link-color) !important;
}

.link-footer {
    text-decoration: underline;
}

.link-footer, .link-footer:hover, .link-footer:focus {
    color: var(--main-link-color);
}

.link-footer:hover, .link-footer:focus {
    outline: 3px solid var(--main-link-color);
    outline-offset: 3px;
    border-radius: 3px;
}

#lnkImgHome:focus img {
    outline: 3px solid var(--main-link-color);
    outline-offset: 3px;
    border-radius: 3px;
    filter: brightness(0.8);
    transition: filter 0.2s;
}

.texto-footer-letrapeq {
    color: var(--main-link-color);
}

/* El menu es blanco: el borde de la hamburguesa en negro para que se vea */
.navbar-default .navbar-toggle {
    border-color: var(--main-nav-link-color);
}

input[type=submit], .btn-participa, .btn-primario {
    background-color: var(--main-button-color);
    color: var(--main-button-text-color);
    border-color: var(--main-button-color);
}

/***************************************************************/
/* GOTHAM + TEXTO SUPERPUESTO (HOME, HEADER Y FOOTER)           */
/* Los font-size van en pt, por tramos de ancho de ventana.     */
/* Parten de los tamaños de guide.pdf (Bold y Medium) reducidos */
/* a la escala de la imagen en pantalla, para que cada linea    */
/* quepa en el cielo libre sin partirse.                        */
/***************************************************************/
@font-face {
    font-family: 'Gotham Condensed';
    /* Se prueban en orden hasta que una exista en el servidor (css/fonts/...) */
    src: url('fonts/Gotham/GothamCondensed-Bold.otf') format('opentype'),
         url('fonts/GothamCondensed-Bold.otf') format('opentype'),
         url('fonts/Gotham%20Condensed%20Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Gotham Condensed Medium (la guia de la agencia la usa en los textos secundarios).
   Si el archivo no existe en el servidor, cae a Gotham Condensed Bold. */
@font-face {
    font-family: 'Gotham Condensed Medium';
    src: url('fonts/Gotham/GothamCondensed-Medium.otf') format('opentype'),
         url('fonts/GothamCondensed-Medium.otf') format('opentype'),
         url('fonts/Gotham%20Condensed%20Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

.home-floating-container {
    position: relative;
    width: 100%;
    display: grid;
}

.home-floating-container img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------------- CAMBIO DE IMAGEN POR ANCHO ----------------
   Se fija aqui para que la imagen mostrada y el tamaño del texto
   usen SIEMPRE los mismos breakpoints:
     desktop >= 1025px | tablet 501-1024px | movil <= 500px
   Para mover el limite de tablet, cambiar 1024/1025 en TODO este archivo. */
@media (min-width: 1025px) {
    #homeImageDesktop, #headerImageDesktop, #footerImageDesktop { display: block !important; }
    #homeImageTablet, #homeImageMobile, #headerImageTablet, #headerImageMobile,
    #footerImageTablet, #footerImageMobile { display: none !important; }
}

@media (min-width: 501px) and (max-width: 1024px) {
    #homeImageTablet, #headerImageTablet, #footerImageTablet { display: block !important; }
    #homeImageDesktop, #homeImageMobile, #headerImageDesktop, #headerImageMobile,
    #footerImageDesktop, #footerImageMobile { display: none !important; }
}

@media (max-width: 500px) {
    #homeImageMobile, #headerImageMobile, #footerImageMobile { display: block !important; }
    #homeImageDesktop, #homeImageTablet, #headerImageDesktop, #headerImageTablet,
    #footerImageDesktop, #footerImageTablet { display: none !important; }
}

/***************************************************************/
/* TEXTO SUPERPUESTO EN LA HOME (tamaños de guide.pdf, escalados a la imagen) */
/***************************************************************/
.text-box-home-floating-text {
    position: absolute;
    box-sizing: border-box;
    text-align: center;
    font-family: 'Gotham Condensed', 'Arial Narrow', Arial, sans-serif;
    font-weight: 700;
    line-height: 1.02;
    color: #ffffff;
}

.text-box-home-floating-text > br { display: none; }

.text-box-home-floating-text > span {
    display: block;
    color: #ffffff;
}

/* Linea 2: Medium. Si falta la fuente Medium, usa Gotham Condensed Bold */
.text-box-home-floating-text > span:nth-of-type(2) {
    font-family: 'Gotham Condensed Medium', 'Gotham Condensed', 'Arial Narrow', Arial, sans-serif;
    font-weight: 500;
    margin-top: 0.12em;
}

/* Posicion sobre la imagen (en % de la imagen) */
@media (min-width: 1025px) {
    .text-box-home-floating-text { left: 23%; width: 50%; top: 14%; }
}
@media (min-width: 501px) and (max-width: 1024px) {
    .text-box-home-floating-text { left: 4%; width: 92%; top: 16%; }
}
@media (max-width: 500px) {
    .text-box-home-floating-text { left: 3%; width: 94%; top: 17.3%; }
}

/* Tamaños de letra en pt por tramo de ancho (Bold = linea 1, Medium = linea 2) */
@media (min-width: 1921px) {
    .text-box-home-floating-text > span:nth-of-type(1) { font-size: 63pt !important; }
    .text-box-home-floating-text > span:nth-of-type(2) { font-size: 32.2pt !important; }
}
@media (min-width: 1601px) and (max-width: 1920px) {
    .text-box-home-floating-text > span:nth-of-type(1) { font-size: 57.7pt !important; }
    .text-box-home-floating-text > span:nth-of-type(2) { font-size: 29.5pt !important; }
}
@media (min-width: 1401px) and (max-width: 1600px) {
    .text-box-home-floating-text > span:nth-of-type(1) { font-size: 49.2pt !important; }
    .text-box-home-floating-text > span:nth-of-type(2) { font-size: 25.2pt !important; }
}
@media (min-width: 1201px) and (max-width: 1400px) {
    .text-box-home-floating-text > span:nth-of-type(1) { font-size: 42.6pt !important; }
    .text-box-home-floating-text > span:nth-of-type(2) { font-size: 21.8pt !important; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
    .text-box-home-floating-text > span:nth-of-type(1) { font-size: 36.5pt !important; }
    .text-box-home-floating-text > span:nth-of-type(2) { font-size: 18.6pt !important; }
}
@media (min-width: 851px) and (max-width: 1024px) {
    .text-box-home-floating-text > span:nth-of-type(1) { font-size: 62.7pt !important; }
    .text-box-home-floating-text > span:nth-of-type(2) { font-size: 21.4pt !important; }
}
@media (min-width: 701px) and (max-width: 850px) {
    .text-box-home-floating-text > span:nth-of-type(1) { font-size: 51.7pt !important; }
    .text-box-home-floating-text > span:nth-of-type(2) { font-size: 17.7pt !important; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .text-box-home-floating-text > span:nth-of-type(1) { font-size: 43.4pt !important; }
    .text-box-home-floating-text > span:nth-of-type(2) { font-size: 14.8pt !important; }
}
@media (min-width: 501px) and (max-width: 600px) {
    .text-box-home-floating-text > span:nth-of-type(1) { font-size: 36.7pt !important; }
    .text-box-home-floating-text > span:nth-of-type(2) { font-size: 12.5pt !important; }
}
@media (min-width: 361px) and (max-width: 500px) {
    .text-box-home-floating-text > span:nth-of-type(1) { font-size: 29.2pt !important; }
    .text-box-home-floating-text > span:nth-of-type(2) { font-size: 9.9pt !important; }
}
@media (min-width: 321px) and (max-width: 360px) {
    .text-box-home-floating-text > span:nth-of-type(1) { font-size: 23.1pt !important; }
    .text-box-home-floating-text > span:nth-of-type(2) { font-size: 7.9pt !important; }
}
@media (max-width: 320px) {
    .text-box-home-floating-text > span:nth-of-type(1) { font-size: 20.4pt !important; }
    .text-box-home-floating-text > span:nth-of-type(2) { font-size: 6.9pt !important; }
}

picture.header-floating-container {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
}

.header-floating-container img {
    display: block;
    width: 100%;
    height: auto;
}
/***************************************************************/
/* TEXTO SUPERPUESTO EN EL HEADER (tamaños de guide.pdf, escalados a la imagen) */
/***************************************************************/
.text-box-header-floating-text {
    position: absolute;
    box-sizing: border-box;
    text-align: center;
    font-family: 'Gotham Condensed', 'Arial Narrow', Arial, sans-serif;
    font-weight: 700;
    line-height: 1.02;
    color: #ffffff;
}

.text-box-header-floating-text > br { display: none; }

.text-box-header-floating-text > span {
    display: block;
    color: #ffffff;
}

/* Linea 2: Medium. Si falta la fuente Medium, usa Gotham Condensed Bold */
.text-box-header-floating-text > span:nth-of-type(2) {
    font-family: 'Gotham Condensed Medium', 'Gotham Condensed', 'Arial Narrow', Arial, sans-serif;
    font-weight: 500;
    margin-top: 0.12em;
}

/* Posicion sobre la imagen (en % de la imagen) */
@media (min-width: 1025px) {
    .text-box-header-floating-text { left: 11.5%; width: 40%; top: 25%; }
}
@media (min-width: 501px) and (max-width: 1024px) {
    .text-box-header-floating-text { left: 20.8%; width: 48.6%; top: 15.5%; }
}
@media (max-width: 500px) {
    .text-box-header-floating-text { left: 3.5%; width: 81%; top: 9%; }
}

/* Tamaños de letra en pt por tramo de ancho (Bold = linea 1, Medium = linea 2) */
@media (min-width: 1921px) {
    .text-box-header-floating-text > span:nth-of-type(1) { font-size: 55.6pt !important; }
    .text-box-header-floating-text > span:nth-of-type(2) { font-size: 28.4pt !important; }
}
@media (min-width: 1601px) and (max-width: 1920px) {
    .text-box-header-floating-text > span:nth-of-type(1) { font-size: 51pt !important; }
    .text-box-header-floating-text > span:nth-of-type(2) { font-size: 26pt !important; }
}
@media (min-width: 1401px) and (max-width: 1600px) {
    .text-box-header-floating-text > span:nth-of-type(1) { font-size: 43.4pt !important; }
    .text-box-header-floating-text > span:nth-of-type(2) { font-size: 22.2pt !important; }
}
@media (min-width: 1201px) and (max-width: 1400px) {
    .text-box-header-floating-text > span:nth-of-type(1) { font-size: 37.6pt !important; }
    .text-box-header-floating-text > span:nth-of-type(2) { font-size: 19.2pt !important; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
    .text-box-header-floating-text > span:nth-of-type(1) { font-size: 32.2pt !important; }
    .text-box-header-floating-text > span:nth-of-type(2) { font-size: 16.4pt !important; }
}
@media (min-width: 851px) and (max-width: 1024px) {
    .text-box-header-floating-text > span:nth-of-type(1) { font-size: 32.5pt !important; }
    .text-box-header-floating-text > span:nth-of-type(2) { font-size: 16.6pt !important; }
}
@media (min-width: 701px) and (max-width: 850px) {
    .text-box-header-floating-text > span:nth-of-type(1) { font-size: 26.8pt !important; }
    .text-box-header-floating-text > span:nth-of-type(2) { font-size: 13.7pt !important; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .text-box-header-floating-text > span:nth-of-type(1) { font-size: 22.5pt !important; }
    .text-box-header-floating-text > span:nth-of-type(2) { font-size: 11.5pt !important; }
}
@media (min-width: 501px) and (max-width: 600px) {
    .text-box-header-floating-text > span:nth-of-type(1) { font-size: 19pt !important; }
    .text-box-header-floating-text > span:nth-of-type(2) { font-size: 9.7pt !important; }
}
@media (min-width: 361px) and (max-width: 500px) {
    .text-box-header-floating-text > span:nth-of-type(1) { font-size: 24.9pt !important; }
    .text-box-header-floating-text > span:nth-of-type(2) { font-size: 12.7pt !important; }
}
@media (min-width: 321px) and (max-width: 360px) {
    .text-box-header-floating-text > span:nth-of-type(1) { font-size: 19.7pt !important; }
    .text-box-header-floating-text > span:nth-of-type(2) { font-size: 10.1pt !important; }
}
@media (max-width: 320px) {
    .text-box-header-floating-text > span:nth-of-type(1) { font-size: 17.3pt !important; }
    .text-box-header-floating-text > span:nth-of-type(2) { font-size: 8.9pt !important; }
}

picture.footer-floating-container {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
}

.footer-floating-container img {
    display: block;
    width: 100%;
    height: auto;
}
/***************************************************************/
/* TEXTO SUPERPUESTO EN EL FOOTER (reglas aparte del header, mismas medidas hoy) */
/***************************************************************/
.text-box-footer-floating-text {
    position: absolute;
    box-sizing: border-box;
    text-align: center;
    font-family: 'Gotham Condensed', 'Arial Narrow', Arial, sans-serif;
    font-weight: 700;
    line-height: 1.02;
    color: #ffffff;
}

.text-box-footer-floating-text > br { display: none; }

.text-box-footer-floating-text > span {
    display: block;
    color: #ffffff;
}

/* Linea 2: Medium. Si falta la fuente Medium, usa Gotham Condensed Bold */
.text-box-footer-floating-text > span:nth-of-type(2) {
    font-family: 'Gotham Condensed Medium', 'Gotham Condensed', 'Arial Narrow', Arial, sans-serif;
    font-weight: 500;
    margin-top: 0.12em;
}

/* Posicion sobre la imagen (en % de la imagen) */
@media (min-width: 1025px) {
    .text-box-footer-floating-text { left: 11.5%; width: 40%; top: 25%; }
}
@media (min-width: 501px) and (max-width: 1024px) {
    .text-box-footer-floating-text { left: 20.8%; width: 48.6%; top: 15.5%; }
}
@media (max-width: 500px) {
    .text-box-footer-floating-text { left: 3.5%; width: 81%; top: 9%; }
}

/* Tamaños de letra en pt por tramo de ancho (Bold = linea 1, Medium = linea 2) */
@media (min-width: 1921px) {
    .text-box-footer-floating-text > span:nth-of-type(1) { font-size: 55.6pt !important; }
    .text-box-footer-floating-text > span:nth-of-type(2) { font-size: 28.4pt !important; }
}
@media (min-width: 1601px) and (max-width: 1920px) {
    .text-box-footer-floating-text > span:nth-of-type(1) { font-size: 51pt !important; }
    .text-box-footer-floating-text > span:nth-of-type(2) { font-size: 26pt !important; }
}
@media (min-width: 1401px) and (max-width: 1600px) {
    .text-box-footer-floating-text > span:nth-of-type(1) { font-size: 43.4pt !important; }
    .text-box-footer-floating-text > span:nth-of-type(2) { font-size: 22.2pt !important; }
}
@media (min-width: 1201px) and (max-width: 1400px) {
    .text-box-footer-floating-text > span:nth-of-type(1) { font-size: 37.6pt !important; }
    .text-box-footer-floating-text > span:nth-of-type(2) { font-size: 19.2pt !important; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
    .text-box-footer-floating-text > span:nth-of-type(1) { font-size: 32.2pt !important; }
    .text-box-footer-floating-text > span:nth-of-type(2) { font-size: 16.4pt !important; }
}
@media (min-width: 851px) and (max-width: 1024px) {
    .text-box-footer-floating-text > span:nth-of-type(1) { font-size: 32.5pt !important; }
    .text-box-footer-floating-text > span:nth-of-type(2) { font-size: 16.6pt !important; }
}
@media (min-width: 701px) and (max-width: 850px) {
    .text-box-footer-floating-text > span:nth-of-type(1) { font-size: 26.8pt !important; }
    .text-box-footer-floating-text > span:nth-of-type(2) { font-size: 13.7pt !important; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .text-box-footer-floating-text > span:nth-of-type(1) { font-size: 22.5pt !important; }
    .text-box-footer-floating-text > span:nth-of-type(2) { font-size: 11.5pt !important; }
}
@media (min-width: 501px) and (max-width: 600px) {
    .text-box-footer-floating-text > span:nth-of-type(1) { font-size: 19pt !important; }
    .text-box-footer-floating-text > span:nth-of-type(2) { font-size: 9.7pt !important; }
}
@media (min-width: 361px) and (max-width: 500px) {
    .text-box-footer-floating-text > span:nth-of-type(1) { font-size: 24.9pt !important; }
    .text-box-footer-floating-text > span:nth-of-type(2) { font-size: 12.7pt !important; }
}
@media (min-width: 321px) and (max-width: 360px) {
    .text-box-footer-floating-text > span:nth-of-type(1) { font-size: 19.7pt !important; }
    .text-box-footer-floating-text > span:nth-of-type(2) { font-size: 10.1pt !important; }
}
@media (max-width: 320px) {
    .text-box-footer-floating-text > span:nth-of-type(1) { font-size: 17.3pt !important; }
    .text-box-footer-floating-text > span:nth-of-type(2) { font-size: 8.9pt !important; }
}