:root {
    --main-link-color: #ffffff;
    --main-nav-link-color: #000000;
    --main-background-color: #000056/*#2e2f5e*/;
    --main-nav-background-color: #ffffff;
    --base-font-size: 50px;
}

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

html {
    background-color:var(--main-background-color);
}

/***************************************************************/
/***************************************************************/


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

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

#promotionLogoH1_Bis {
	margin-top: 40px;
	max-width: calc(100% - 32px); /* el logo es una sola imagen: que no se salga en mobile */
	height: auto;
}
#promotionLogoH1 {
    color: var(--main-link-color);
}

#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; /* ❌ evita valores fijos como 1.5em si rompen el diseño */
  white-space: normal; /* permite salto si el texto crece */
  overflow: visible;   /* deja expandirse al contenido */
  box-sizing: border-box;
  top: 0px;
}

/*#imgFooter {
	display: none;
}*/


/*#divCapaFraseLegalNew, #ContentPlaceHolder_divCapaFraseLegalNew {
    background: #f2f6f8;
    font-weight: normal;
    font-size: 0.875rem;
    color: rgb(78, 117, 145);
    padding: 5px 10px;
    height: auto;
    overflow-y: hidden;
    border-style: hidden;
}*/

/***************************************************************/
/***************************************************************/

/***************************************************************/
/*********************** 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,
#homeImageDesktop.hover, #homeImageDesktop.focus,
#homeImageTablet.hover, #homeImageTablet.focus,
#homeImageMobile.hover, #homeImageMobile.focus {
  outline: 3px solid var(--main-link-color); /* borde o contorno accesible */
  outline-offset: 3px;        /* separa el borde del texto */
  border-radius: 3px;         /* opcional: esquinas redondeadas */
}

#lnkImgHome:focus img {
	  outline: 3px solid var(--main-link-color); /* borde o contorno accesible */
  outline-offset: 3px;        /* separa el borde del texto */
  border-radius: 3px;         /* opcional: esquinas redondeadas */
    filter: brightness(0.8);  /* oscurece la imagen un poco al foco */
    transition: filter 0.2s;
}


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

/*Hamburguesa*/
.navbar-default .navbar-toggle {
    border-color: var(--main-link-color);
}

/***************************************************************/
/***************************************************************/

.survey tbody tr td input {
    margin-top: -4px;
}

/***************************************************************/

/***************************************************************/
/* FUENTE: Futura PT (Demi 600 / Bold 700)
   Subir los archivos a css/fonts/Futura/ con estos nombres.
   Basta con uno de los formatos: el navegador usa el primero que encuentre.
   Mientras no estén, tira de Futura Std (css/fonts/FuturaStd/), que ya está en el proyecto:
   Demi -> FuturaStd-Heavy, Bold -> FuturaStd-Bold. */
@font-face {
    font-family: 'Futura PT';
    src: url('fonts/Futura/FuturaPT-Demi.woff2') format('woff2'),
         url('fonts/Futura/FuturaPT-Demi.woff') format('woff'),
         url('fonts/Futura/FuturaPT-Demi.otf') format('opentype'),
         url('fonts/Futura/FuturaPT-Demi.ttf') format('truetype'),
         url('fonts/FuturaStd/FuturaStd-Heavy.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Futura PT';
    src: url('fonts/Futura/FuturaPT-Bold.woff2') format('woff2'),
         url('fonts/Futura/FuturaPT-Bold.woff') format('woff'),
         url('fonts/Futura/FuturaPT-Bold.otf') format('opentype'),
         url('fonts/Futura/FuturaPT-Bold.ttf') format('truetype'),
         url('fonts/FuturaStd/FuturaStd-Bold.woff') format('woff'),
         url('fonts/FuturaStd/FuturaStd-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/***************************************************************/
/* HOME FLOATING BASE
   Todos los tamaños en pt. Como el pt no escala con la imagen, cada tramo
   de media query lleva su propio tamaño (calculado para un ancho de referencia).
   Clases en AltTextImageHome:
     --medium / --small  -> PARTICIPA Y PODRÁS
     --extralarge        -> GANAR <BR> ENTRADAS
     --large             -> Y MÁS PREMIOS / CADA SEMANA */
.home-floating-container {
    position: relative;
    width: 100%;
    display: grid;
}

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

.text-box-home-floating-text {
    position: absolute;
    box-sizing: border-box;
    padding: 0;
    text-align: center;
    font-family: 'Futura PT', 'Century Gothic', 'Trebuchet MS', Arial, sans-serif;
    color: #ffffff;
    text-transform: uppercase;
    /* Desktop (1920x897) */
    top: 54.5%;
    left: 20%;
    transform: translate(-50%, -50%);
    width: 30%;
}

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

/* Y MÁS PREMIOS / CADA SEMANA */
.home-floating-text--large {
    font-weight: 700;
    font-size: 26.5pt;
    line-height: 1;
    margin-bottom: 0.12em;
}

/* GANAR / ENTRADAS */
.home-floating-text--extralarge {
    font-weight: 700;
    font-size: 46.5pt;
    line-height: 1;
    margin-bottom: 0.12em;
}

/* PARTICIPA Y PODRÁS */
.home-floating-text--medium,
.home-floating-text--small {
    font-weight: 600;
    font-size: 20pt;
    line-height: 1;
    margin-bottom: 0.4em;
}

/* Insignia "makro" (fondo cian claro, texto oscuro) dentro del texto flotante.
   Uso en el contenido de AltTextImageHome:
   <span class="home-badge">makro</span> */
.home-badge {
    display: inline-block;
    background-color: #a7e8f0;
    color: #003366;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 4px;
}

/* Boton "PARTICIPA AQUÍ" (pildora amarilla) dentro del texto flotante.
   Uso en el contenido de AltTextImageHome:
   <a href="URL_DESTINO" class="home-cta-button">PARTICIPA AQUÍ</a> */
.home-cta-button {
    display: inline-block;
    background-color: #f5d800;
    color: #000000;
    font-weight: bold;
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 30px;
    margin-top: 12px;
    font-size: 20px;
}

.home-cta-button:hover,
.home-cta-button:focus {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

/* DESKTOP PEQUEÑO (1025–1399px): se sigue viendo la imagen desktop, texto algo más pequeño */
@media (min-width: 1025px) and (max-width: 1399.98px) {
    .home-floating-text--large      { font-size: 22.5pt; }  /* Y MÁS PREMIOS / CADA SEMANA */
    .home-floating-text--extralarge { font-size: 39.5pt; }  /* GANAR / ENTRADAS */
    .home-floating-text--medium,
    .home-floating-text--small      { font-size: 17pt; }    /* PARTICIPA Y PODRÁS */
}

/* IPAD (701–1024px): se sigue viendo la imagen desktop, texto más pequeño */
@media (min-width: 701px) and (max-width: 1024.98px) {
    .home-floating-text--large      { font-size: 11pt; }    /* Y MÁS PREMIOS / CADA SEMANA */
    .home-floating-text--extralarge { font-size: 19.5pt; }  /* GANAR / ENTRADAS */
    .home-floating-text--medium,
    .home-floating-text--small      { font-size: 8.5pt; }   /* PARTICIPA Y PODRÁS */
}

/* TABLET (imagen 700x600 — dasmcore la muestra entre 501 y 700px) */
@media (min-width: 501px) and (max-width: 700px) {
    .text-box-home-floating-text {
        top: 33%;
        left: 36.5%;
        width: 40%;
    }
    .home-floating-text--large      { font-size: 10.5pt; font-weight: 600; line-height: 1;    margin-bottom: 0.3em; } /* Y MÁS PREMIOS / CADA SEMANA */
    .home-floating-text--extralarge { font-size: 25.5pt; font-weight: 700; line-height: 0.88; margin-bottom: 0.15em; } /* GANAR / ENTRADAS */
    .home-floating-text--medium,
    .home-floating-text--small      { font-size: 14.5pt; font-weight: 700; line-height: 1.15; margin-bottom: 0; }     /* PARTICIPA Y PODRÁS */
}

/* MOBILE (imagen 400x600) */
@media (max-width: 500px) {
    /* Recorta la franja de logos de arriba de homemobile.jpg (ya salen en la cabecera):
       se queda con los 520px de abajo de los 600 originales. */
    #homeImageMobile {
        aspect-ratio: 400 / 520;
        height: auto;
        object-fit: cover;
        object-position: bottom;
    }
    .text-box-home-floating-text {
        top: 17.5%;   /* recalculado sobre la imagen recortada */
        left: 50%;
        width: 90%;
    }
    .home-floating-text--medium,
    .home-floating-text--small      { font-size: 9.5pt;  font-weight: 600; line-height: 1;    margin-bottom: 0.3em; } /* PARTICIPA Y PODRÁS (Demi) */
    .home-floating-text--extralarge { font-size: 24.5pt; font-weight: 700; line-height: 0.88; margin-bottom: 0.15em; } /* GANAR / ENTRADAS */
    .home-floating-text--large      { font-size: 14pt;   font-weight: 700; line-height: 1.15; margin-bottom: 0; }     /* Y MÁS PREMIOS / CADA SEMANA */
}

/***************************************************************/
/* HEADER FLOATING TEXT
   Mismo estilo que la home, con la posición adaptada a las imágenes de cabecera
   (texto a la izquierda, entre los logos y el logo de Champions).
   Medido sobre headerdesktop (3840x1100), headertablet (1440x825) y headermobile (864x636).
   Las imágenes cambian en los mismos cortes que la home (dasmcore): >700 / 501–700 / ≤500.
   Vale tanto con las clases de la home como con las de header en AltTextImageHeader:
     home-floating-text--small       / header-floating-text--small       -> PARTICIPA Y PODRÁS
     home-floating-text--extralarge  / header-floating-text--extralarge  -> GANAR <BR> ENTRADAS
     home-floating-text--large       / header-floating-text--large       -> Y MÁS PREMIOS / CADA SEMANA */
.header-floating-container,
picture.header-floating-container {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
}

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

.header-floating-container .text-box-home-floating-text,
.header-floating-container .text-box-header-floating-text {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    padding: 0;
    text-align: center;
    font-family: 'Futura PT', 'Century Gothic', 'Trebuchet MS', Arial, sans-serif;
    color: #ffffff;
    text-transform: uppercase;
    /* Desktop (headerdesktop 3840x1100) */
    top: 51.5%;
    left: 17.75%;
    right: auto;
    transform: translate(-50%, -50%);
    width: 25%;
}

.header-floating-container .text-box-home-floating-text > span,
.header-floating-container .text-box-header-floating-text > span {
    display: block;
    color: #ffffff;
    font-family: inherit;
    font-style: normal;
}

.header-floating-container .home-floating-text--small,
.header-floating-container .home-floating-text--medium,
.header-floating-container .header-floating-text--small      { font-size: 20pt;  font-weight: 600; line-height: 1;    margin-bottom: 0.3em; }  /* PARTICIPA Y PODRÁS (Demi) */
.header-floating-container .home-floating-text--extralarge,
.header-floating-container .header-floating-text--extralarge { font-size: 46.5pt; font-weight: 700; line-height: 0.88; margin-bottom: 0.15em; } /* GANAR / ENTRADAS */
.header-floating-container .home-floating-text--large,
.header-floating-container .header-floating-text--large      { font-size: 26.5pt;  font-weight: 700; line-height: 1.1;  margin-bottom: 0; }      /* Y MÁS PREMIOS / CADA SEMANA */

/* CABECERA DESKTOP PEQUEÑO (1025–1399px) */
@media (min-width: 1025px) and (max-width: 1399.98px) {
    .header-floating-container .home-floating-text--small,
    .header-floating-container .home-floating-text--medium,
    .header-floating-container .header-floating-text--small      { font-size: 17pt; }
    .header-floating-container .home-floating-text--extralarge,
    .header-floating-container .header-floating-text--extralarge { font-size: 39.5pt; }
    .header-floating-container .home-floating-text--large,
    .header-floating-container .header-floating-text--large      { font-size: 22.5pt; }
}

/* CABECERA IPAD (701–1024px) */
@media (min-width: 701px) and (max-width: 1024.98px) {
    .header-floating-container .home-floating-text--small,
    .header-floating-container .home-floating-text--medium,
    .header-floating-container .header-floating-text--small      { font-size: 8.5pt; }
    .header-floating-container .home-floating-text--extralarge,
    .header-floating-container .header-floating-text--extralarge { font-size: 19.5pt; }
    .header-floating-container .home-floating-text--large,
    .header-floating-container .header-floating-text--large      { font-size: 11pt; }
}

/* CABECERA TABLET (headertablet 1440x825) */
@media (min-width: 501px) and (max-width: 700px) {
    .header-floating-container .text-box-home-floating-text,
    .header-floating-container .text-box-header-floating-text {
        top: 40.5%;
        left: 14.7%;
        width: 26%;
    }
    .header-floating-container .home-floating-text--small,
    .header-floating-container .home-floating-text--medium,
    .header-floating-container .header-floating-text--small      { font-size: 7.5pt; }
    .header-floating-container .home-floating-text--extralarge,
    .header-floating-container .header-floating-text--extralarge { font-size: 19pt; }
    .header-floating-container .home-floating-text--large,
    .header-floating-container .header-floating-text--large      { font-size: 11pt; }
}

/* CABECERA MOBILE (headermobile 864x636) */
@media (max-width: 500px) {
    /* Tapa la franja de logos de arriba de headermobile.jpg (ya salen en la cabecera)
       con el mismo azul del fondo, manteniendo el alto original de la imagen. */
    picture.header-floating-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 20%;
        background: #020056;
        z-index: 1;
        pointer-events: none;
    }
    .header-floating-container .text-box-home-floating-text,
    .header-floating-container .text-box-header-floating-text {
        top: 41%;
        left: 20%;
        width: 34%;
    }
    .header-floating-container .home-floating-text--small,
    .header-floating-container .home-floating-text--medium,
    .header-floating-container .header-floating-text--small      { font-size: 6.5pt; }
    .header-floating-container .home-floating-text--extralarge,
    .header-floating-container .header-floating-text--extralarge { font-size: 17pt; }
    .header-floating-container .home-floating-text--large,
    .header-floating-container .header-floating-text--large      { font-size: 10pt; }
}


/***************************************************************/
/* FOOTER FLOATING TEXT
   Textos entre los logos del footer: "DISFRUTA CON [Gillette] Y [Braun] DE UNA PIEL DE [Champions]".
   Cada span se coloca por separado (1º, 2º y 3º) en el hueco que le toca de la imagen.
   Medido sobre los diseños: footerdesktop (3840x1100), footertablet (1440x825) y footermobile (864x636).
   Las imágenes cambian en los mismos cortes que la home (dasmcore): >700 / 501–700 / ≤500.
   HTML en AltTextImageFooter:
   <span class="text-box-footer-floating-text">
     <span class="footer-floating-text--small">DISFRUTA CON</span>
     <span class="footer-floating-text--small">Y</span>
     <span class="footer-floating-text--small">DE UNA PIEL DE</span>
   </span> */
.footer-floating-container,
picture.footer-floating-container {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
}

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

/* La caja ocupa toda la imagen; cada texto se posiciona dentro */
.text-box-footer-floating-text {
    position: absolute;
    inset: 0;
    padding: 0;
    font-family: 'Futura PT', 'Century Gothic', 'Trebuchet MS', Arial, sans-serif;
    color: #ffffff;
    text-transform: uppercase;
    pointer-events: none;
}

.footer-floating-text--small {
    position: absolute;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    color: #ffffff;
    font-weight: 600;          /* Futura PT Demi */
    line-height: 1;
    /* Desktop (footerdesktop 3840x1100) */
    top: 39.2%;
    font-size: 29pt;           /* pantallas de 1800px o más */
}

/* Desktop: la imagen se estrecha, así que el texto baja por tramos para no pisar los logos */
@media (min-width: 1400px) and (max-width: 1799.98px) {
    .footer-floating-text--small { font-size: 22pt; }
}
@media (min-width: 1025px) and (max-width: 1399.98px) {
    .footer-floating-text--small { font-size: 18pt; }
}
@media (min-width: 701px) and (max-width: 1024.98px) {
    .footer-floating-text--small { font-size: 9pt; }
}

/* Posición horizontal (centro de cada texto), desktop */
.footer-floating-text--small:nth-child(1) { left: 19.6%; }  /* DISFRUTA CON   (antes de Gillette) */
.footer-floating-text--small:nth-child(2) { left: 45.4%; }  /* Y              (entre Gillette y Braun) */
.footer-floating-text--small:nth-child(3) { left: 67.8%; }  /* DE UNA PIEL DE (entre Braun y Champions) */

/* FOOTER TABLET (footertablet 1440x825) */
@media (min-width: 501px) and (max-width: 700px) {
    .footer-floating-text--small {
        top: 44.1%;
        font-size: 9.5pt;
    }
    .footer-floating-text--small:nth-child(1) { left: 15.5%; }
    .footer-floating-text--small:nth-child(2) { left: 45.1%; }
    .footer-floating-text--small:nth-child(3) { left: 70.4%; }
}

/* FOOTER MOBILE (footermobile 864x636) */
@media (max-width: 500px) {
    .footer-floating-text--small {
        top: 46.4%;
        font-size: 6pt;
    }
    .footer-floating-text--small:nth-child(1) { left: 14.6%; }
    .footer-floating-text--small:nth-child(2) { left: 44.8%; }
    .footer-floating-text--small:nth-child(3) { left: 70.5%; }
}

/*Homes Extensions*/

#pnlHomeExtension1
{
    background-color: #007f4a;
    color: #ffffff;
    padding-top: 15px;
    padding-bottom: 15px;
    min-height: 500px;
}

#pnlHomeExtension1 h3, h4
{
    font-weight: bold !important;
}

    #pnlHomeExtension2 {
        background-color: #ffffff;
        color: #007f4a;
        padding-top: 15px;
        padding-bottom: 15px;
        min-height: 400px;
    }

#pnlHomeExtension2 h3, h4 {
    font-weight: bold !important;
}

.img-responsive-custom {
    margin: 15px 0px;
    padding: 0px;
}

.btn-ext-home1 {
    top: -37px;
    margin: 8px 0px;
}

.btn-ext-home2 {
    margin: 20px 0px;
}

.btn-ext-home1, .btn-ext-home2 {
    background-color: #ff0000;
    color: white;
    border: 2px solid white;
    border-radius: 30px;
    cursor: pointer;
    font-size: 30px;
    padding: 8px 50px;
    position: relative;
}

    .btn-ext-home1:hover, .btn-ext-home2:hover {
        opacity: 1;
        box-shadow: 0 0 0 5px black;
    }

/*.btn-ext-home2 {
    background-color: #1a81cd;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
    padding: 8px 20px;
    margin: 8px 0px;
}

    .btn-ext-home2:hover {
        box-shadow: 0 0 0 2px black;
    }*/

.fw-normal {
    font-size: 22px;
}

.fw-large {
    font-size: 28px;
}

.fw-xlarge {
    font-size: 32px;
}

.fw-extra-large {
    font-size: 36px;
}

.ps-4 {
    padding-left: 1.5rem !important;
}

.ps-5 {
    padding-left: 2rem !important;
}

.h-20 {
    height: 20px;
}

.mh-300 {
    min-height: 300px;

}
.fw-500 {
    font-weight: 500;
}
.spacer-lg {
    height: 100px;
}
.color-title-1 {
    color: #ffffff;
}

@media (max-width: 991.98px) {
    .img-responsive-custom {
        max-width: 80%;
    }
}

@media (max-width: 1200px) {
    .spacer-lg {
        display: none;
    }
}

/*Fin Homes Extensions*/