:root {
    --main-link-color: #ffffff;
    --main-nav-link-color: #000000;
    --main-background-color: #000000;
    --main-nav-background-color: #ffffff;
}

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

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

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


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

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

#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;
}

/*#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;
}

/***************************************************************/
/* BRAUN LINEAR + TEXTO SUPERPUESTO (HOME y HEADER)            */
/* Tamaños de la agencia en pt (tamaño fuentes.txt):           */
/*   font-size: calc(var(--u) * <pt>)                          */
/* --u = cqw por cada pt, calibrado por imagen (ancho real     */
/* de la imagen => escala solo en cualquier resolucion).       */
/***************************************************************/
@font-face {
    font-family: 'Braun Linear';
    src: url('fonts/BraunLinear/BraunLinear-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Braun Linear';
    src: url('fonts/BraunLinear/BraunLinear-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.home-floating-container,
picture.header-floating-container {
    position: relative;
    width: 100%;
    container-type: inline-size;
}

.home-floating-container { display: grid; }
picture.header-floating-container { display: block; overflow: hidden; }

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


/* Bloque de texto: mismo HTML en home (text-box-home-floating-text) y en
   header (text-box-header-floating-text). Orden de hijos:
   1-2 = intro (--large), 3 = "Hasta" (--large), 4 = "120€" (--extralarge),
   5 = "de reembolso*" (--small). Se posiciona sobre la imagen en % y los
   tamaños van en cqw (escalan con el ancho real de la imagen). */
.text-box-home-floating-text,
.text-box-header-floating-text {
    position: absolute;
    left: var(--pl);
    width: var(--pw);
    top: var(--it);
    box-sizing: border-box;
    text-align: center;
    font-family: 'Braun Linear', Arial, sans-serif;
    font-weight: 400;
    line-height: 1.15;
    color: #ffffff;
}

.text-box-home-floating-text > span,
.text-box-header-floating-text > span { display: block; }

/* Intro: "No lo dejes escapar." / "Hazte con la precisión de Braun." */
.text-box-home-floating-text > .home-floating-text--large,
.text-box-header-floating-text .header-floating-text--large {
    font-size: calc(var(--u) * var(--pt-intro)) !important;
    font-weight: 400;
    color: #ffffff;
}

/* "Hasta" (3er hijo, lleva display:inline en el HTML => se fuerza bloque) */
.text-box-home-floating-text > .home-floating-text--large:nth-child(3),
.text-box-header-floating-text .header-floating-text--large:nth-child(3) {
    display: block !important;
    text-align: left;
    margin-top: var(--gap);
    margin-left: 6%;
    font-size: calc(var(--u) * var(--pt-hasta)) !important;
    line-height: 1;
    color: #1a1204;
}

/* "120€" */
.text-box-home-floating-text > .home-floating-text--extralarge,
.text-box-header-floating-text .header-floating-text--extralarge {
    font-size: calc(var(--u) * var(--pt-amount)) !important;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.95;
    margin: 0 !important;
    color: #1a1204;
}

/* "de reembolso*" */
.text-box-home-floating-text > .home-floating-text--small,
.text-box-header-floating-text .header-floating-text--small {
    font-size: calc(var(--u) * var(--pt-refund)) !important;
    font-weight: 700;
    line-height: 1.1;
    color: #1a1204;
}

/* Pasos (opcional, dentro del mismo bloque):
   <span class="braun-steps"><span class="braun-step braun-step--1">1. Compra.</span>... */
.text-box-home-floating-text > .braun-steps {
    position: absolute;
    left: var(--sl);
    width: var(--sw);
    top: var(--st);
    display: flex;
    justify-content: space-between;
    color: #ffffff;
    font-size: calc(var(--u) * var(--pt-steps));
    line-height: 1.15;
}

.braun-step { display: block; flex: 1 1 0; text-align: center; padding: 0 1%; }

.braun-step::before {
    content: "";
    display: block;
    width: var(--icon);
    height: var(--icon);
    margin: 0 auto 0.5em;
    background: no-repeat center / contain;
}

.braun-step--1::before { background-image: url('https://onlinepromotions.braun.com/dasmcore/img/ES26BraunCashbackXMAS/icon1.png'); }
.braun-step--2::before { background-image: url('https://onlinepromotions.braun.com/dasmcore/img/ES26BraunCashbackXMAS/icon2.png'); }
.braun-step--3::before { background-image: url('https://onlinepromotions.braun.com/dasmcore/img/ES26BraunCashbackXMAS/icon3.png'); }

/* ---------------- HOME DESKTOP (1920 x 897) ---------------- */
.text-box-home-floating-text {
    --u: 0.1938cqw;
    --pl: 54.2%; --pw: 39.3%; --it: 4.9%;
    --gap: 3cqw;
    --sl: 0%; --sw: 100%; --st: 32.6cqw; --icon: 4.6cqw;
    --pt-intro: 12.66; --pt-hasta: 18.56; --pt-amount: 71.79; --pt-refund: 22.73; --pt-steps: 6.73;
}

/* ---------------- HOME TABLET (700 x 600) ---------------- */
@media (max-width: 700px) {
    .text-box-home-floating-text {
        --u: 0.55cqw;
        --pl: 14%; --pw: 75%; --it: 2.6%;
        --gap: 3.6cqw;
        --sl: 74.7%; --sw: 33.3%; --st: 45.7cqw; --icon: 6.4cqw;
        --pt-intro: 6.55; --pt-hasta: 6.86; --pt-amount: 26.53; --pt-refund: 8.4; --pt-steps: 4.4;
    }
}

/* TABLET y MOVIL (<=700px): "120€" y "de reembolso*" en la misma linea */
@media (max-width: 700px) {
    .text-box-home-floating-text > .home-floating-text--extralarge,
    .text-box-home-floating-text > .home-floating-text--small {
        display: inline-block;
        vertical-align: baseline;
    }

    .text-box-home-floating-text > .home-floating-text--small { margin-left: 0.4cqw; }
}

/* Solo TABLET (501-700px): pasos en columna (icono a la izquierda del
   texto), segun diseño agencia. En movil van en horizontal. */
@media (min-width: 501px) and (max-width: 700px) {
    .text-box-home-floating-text > .braun-steps {
        flex-direction: column;
        align-items: flex-start;
        gap: 7.5cqw;
    }

    .text-box-home-floating-text .braun-step {
        display: flex;
        align-items: center;
        flex: none;
        text-align: left;
        padding: 0;
        gap: 1.6cqw;
    }

    .text-box-home-floating-text .braun-step::before {
        flex: 0 0 var(--icon);
        margin: 0;
    }
}

/* ---------------- HOME MOBILE (400 x 600) ---------------- */
@media (max-width: 500px) {
    .text-box-home-floating-text {
        --u: 0.95cqw;
        --pl: 4.5%; --pw: 90.75%; --it: 3.4%;
        --gap: 7.7cqw;
        --sl: 6%; --sw: 88%; --st: 46.3cqw; --icon: 13cqw;
        --pt-intro: 5.79; --pt-hasta: 4.81; --pt-amount: 18.59; --pt-refund: 5.89; --pt-steps: 2.96;
    }
}

/* ---------------- HEADER DESKTOP (3840 x 1100) ---------------- */
/* Desktop: "120€" y "de reembolso*" en la misma linea */
.text-box-header-floating-text {
    --u: 0.09635cqw;
    --pl: 46.5%; --pw: 49.75%; --it: 8%;
    --gap: 3.85cqw;
    --pt-intro: 19.89; --pt-hasta: 24.84; --pt-amount: 96.09; --pt-refund: 30.43;
}

/* "120€" lleva dentro el <span> "de reembolso*": ambos en la misma linea */
.text-box-header-floating-text > .header-floating-text--extralarge {
    text-align: left;
    margin-left: 2% !important;
    white-space: nowrap;
}

.text-box-header-floating-text .header-floating-text--large:nth-child(3) { margin-left: 3%; }

.text-box-header-floating-text .header-floating-text--small {
    display: inline;
    margin-left: 0.15em;
}

/* ---------------- HEADER TABLET (1440 x 825) ---------------- */
@media (max-width: 700px) {
    .text-box-header-floating-text {
        --u: 0.2639cqw;
        --pl: 54.4%; --pw: 42.8%; --it: 10.7%;
        --gap: 7.15cqw;
        --pt-intro: 10.45; --pt-hasta: 15.44; --pt-amount: 59.74; --pt-refund: 18.92;
    }
    /* Tablet/movil: "de reembolso*" debajo de "120€" */
    .text-box-header-floating-text > .header-floating-text--extralarge { text-align: center; margin-left: 0 !important; }
    .text-box-header-floating-text .header-floating-text--small { display: block; margin-left: 0; }
}

/* ---------------- HEADER MOBILE (864 x 636) ---------------- */
@media (max-width: 500px) {
    .text-box-header-floating-text {
        --u: 0.4398cqw;
        --pl: 14.4%; --pw: 71%; --it: 3%;
        --gap: 4.6cqw;
        --pt-intro: 8.74; --pt-hasta: 7.95; --pt-amount: 30.76; --pt-refund: 9.74;
    }
    /* Movil: "120€" y "de reembolso*" en la misma linea (diseño agencia) */
    .text-box-header-floating-text .header-floating-text--large:nth-child(3) { margin-left: 2%; }
    .text-box-header-floating-text .header-floating-text--small { display: inline; margin-left: 0.15em; }
}