/* Las @font-face vienen del HTML: eran 2,5 KB repetidos en
   las 82.641 páginas. Aquí se descargan una vez y se cachean.
   Van las primeras para que el navegador las descubra en
   cuanto empiece a leer la hoja. */
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/lato-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/lato-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/lato-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/lato-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/lato-900-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/lato-900-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Lato Fallback';font-style:normal;font-weight:400;src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:96.29%;ascent-override:102.50%;descent-override:22.12%;line-gap-override:0%}@font-face{font-family:'Lato Fallback';font-style:normal;font-weight:700;src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:98.47%;ascent-override:100.23%;descent-override:21.63%;line-gap-override:0%}@font-face{font-family:'Lato Fallback';font-style:normal;font-weight:900;src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:100.47%;ascent-override:98.24%;descent-override:21.20%;line-gap-override:0%}

/* Estilos niveles - usa variables de css/clasico.css */
/* Solo se carga en plantillas que enlazan niveles.css; tipografía Lato en toda la página */
body {
    font-family: "Lato", "Lato Fallback", sans-serif;
    /* "Lato Fallback" es la fuente del sistema con las métricas de
       Lato: sostiene el texto sin moverlo hasta que llega la real.
       La define css/tipografia.css. */
}

body.niveles-body {
    margin: 0;
    padding: 0;
}




.nivel-accent {
    color: var(--nivel-accent);
}

.nivel-text-dark {
    color: var(--nivel-text-dark);
}



.nivel-header-cta:hover {
    background: var(--nivel-accent-hover);
    color: var(--nivel-white) !important;
}

.nivel-hero {
    min-height: 750px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.nivel-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}

.nivel-breadcrumb {
    color: var(--nivel-text-dark) !important;
    font-size: 14px;
    padding-top: 24px;
    display: flex;
    align-items: center;
    gap: 4px;

}

.nivel-breadcrumb:hover {
    color: var(--nivel-accent) !important;
}



.nivel-brand-card {
    background: var(--nivel-white);
    border: 1px solid var(--nivel-border);
    border-radius: 16px;
    padding: 16px;
    text-decoration: none !important;
    display: flex;
    color: var(--nivel-text-dark);
    transition: box-shadow .2s;
    height: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;

}

.nivel-brand-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: var(--nivel-accent);
}

.nivel-brand-card img {
    max-height: 60px;
    object-fit: contain;
}

.nivel-brand-card h3 {
    margin-top: 10px;
    font-weight: 800;
    color: var(--nivel-text-dark);
    font-size: 24px;
    line-height: 1;
    margin: 0;
}




.nivel-footer {
    background: var(--nivel-footer-bg);
    color: var(--nivel-white);
    padding: 30px 0;
}







/* Footer estilo nivel 3 */
.niveles-footer.darkblue {
    background-color: var(--nivel-footer-bg) !important;
    color: #fff !important;
}

.niveles-footer .white {
    color: #fff;
}

.niveles-footer .o-65 {
    opacity: 0.65;
}


.niveles-footer .comp-cta-phone,
header .comp-cta-phone {

    padding: 15px 20px;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 8px;
    font-size: 18px;
	width: fit-content;
}

/* El color de la marca tambien al pasar por encima.

   El boton lleva su color en un style del propio <a>, y esta regla lo pisaba
   con !important: pusiera lo que pusiera el HTML, al pasar el raton salia
   #ad5021, el naranja de la casa, porque --nivel-accent-hover solo se
   redefine en las paginas sin marca. En una landing de Balay el boton pasaba
   de azul a naranja.

   --marca-hover lo genera color_marca_wcag.py: el color de esa marca con la
   luminosidad al 80 %, el mismo salto que la casa da a su azul (#0B5FA5 ->
   #084C85). Las 114 quedan por encima de 6,4:1 con el blanco de su texto, de
   sobra para el 4,5:1 que pide WCAG 1.4.3 por la etiqueta de 10,5 px.

   El respaldo es el de siempre: sin data-marca -la home, las localidades, los
   legales y la 404- manda --nivel-accent-hover, que ahi ya es el azul. */
.niveles-footer .comp-cta-phone:hover,
header .comp-cta-phone:hover {
    background-color: var(--marca-hover, var(--nivel-accent-hover)) !important;
    color: #fff !important;
}



header .bed-logo img {
    max-width: 100%;
    height: 50px;
    width: auto;

}


/* Comienzo css original */

header.niveles-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;

    margin: 0;
    padding-top: 16px;
    padding-bottom: 16px;
    background-color: var(--nivel-white);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10);

}

.logos-header-b {
    display: flex;
    align-items: center;
	width: fit-content;
}

.logos-header-b .bed-logo-header-b {
    height: auto;
}

.logos-header-b .bed-logo-header-b img {
    height: auto;
    width: 120px;
    margin-left: 24px;
}

/* Header transparente arriba del scroll */
header.niveles-header.transparent {
    background-color: transparent;
}

/* Header sólido al hacer scroll.

   Estaba a rgba(255,255,255,.80) sin backdrop-filter, así que no era un
   cristal esmerilado: era la barra dejando pasar lo que corría por debajo.
   En la home el botón del hero se veía cruzando por detrás del logo. Opaco,
   con una sombra tenue que la separe del contenido. */
header.niveles-header.solid {
    background: var(--nivel-white, #fff);
    box-shadow: 0 1px 12px rgba(16, 24, 40, .08);
}

/* Logos del header: blanco cuando transparent, normal cuando solid */
header.niveles-header .logo-transparent,
header.niveles-header .logo-solid {
    max-width: 100%;
    vertical-align: middle;
	height: 50px;
    width: auto;
}

header.niveles-header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: row;
    width: 100%;
}

header.niveles-header.transparent .logo-transparent {
    display: block;
}

header.niveles-header.transparent .logo-solid {
    display: none;
}

header.niveles-header.solid .logo-transparent {
    display: none;
}

header.niveles-header.solid .logo-solid {
    display: block;
}

header.transparent .comp-cta-phone .cta-phone-icon.transparent {
    display: block;
}

header.transparent .comp-cta-phone .cta-phone-icon.solid {
    display: none !important;
}

header.solid .comp-cta-phone .cta-phone-icon.solid {
    display: block;
}

header.solid .comp-cta-phone .cta-phone-icon.transparent {
    display: none !important;
}

/* Icono teléfono CTA header (imagen SVG) */
header .comp-cta-phone .cta-phone-icon {
    vertical-align: middle;
    margin-right: 6px;
}

header .comp-cta-phone .cta-phone-icon.fa-flip-horizontal {
    transform: scaleX(-1);
}

header.niveles-header.transparent .comp-cta-phone {
    color: var(--nivel-accent);
    background-color: var(--nivel-white);
}

header.niveles-header.solid .comp-cta-phone {
    color: var(--nivel-white);
    background-color: var(--nivel-accent);
}

/* Separación texto «Atención inmediata» + número (evita &nbsp; con flex) */
header .comp-cta-phone .google_number {
    margin-left: 0.35em;
}


/* hero */

p.pretitulo {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 24px;
    line-height: 1.2;
}

#nivel-0.nivel-hero {
    background-image:
        linear-gradient(90deg, rgba(51, 51, 51, 0.80) 40.16%, rgba(51, 51, 51, 0.00) 100%),
        url("/images/hero-bg-industrial.jpg");

    background-position: 0 0, center;
    background-size: auto, cover;
    background-repeat: no-repeat;
}

.nivel-hero-overlay h1 {
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.1;
    font-weight: 500;
    margin-bottom: 16px;
    /* Sobre la foto oscurecida del hero un acento pensado para fondo blanco
       no se lee. Quien define el tono claro lo usa aqui; quien no, sigue con
       el de siempre. */
    color: var(--nivel-accent-claro, var(--nivel-accent));
}


.nivel-hero-overlay h1 .nivel-accent {
    font-weight: 800;
    line-height: 1.2;
}

/* El boton del hero se identifica por su fondo: sin el, el texto blanco se
   leeria como una linea mas del titular. Eso lo mete en el 1.4.11 de WCAG,
   que pide 3:1 con lo que tiene al lado, y el azul sobre la foto oscurecida
   se queda en 1,97:1. El anillo blanco lo separa del fondo (12:1) sin tocar
   el color del boton ni su tamano. Solo en las paginas sin marca: las de
   fabricante llevan su propio color y no son cosa de este cambio. */
body:not([data-marca]) .nivel-hero .nivel-header-cta {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .92);
}

/* Ese anillo esta siempre, asi que el foco tiene que ser otra cosa o no se
   nota: un contorno azul claro separado 4 px, que sobre la foto oscurecida
   da 6,45:1 y ademas contrasta con el propio anillo blanco. */
body:not([data-marca]) .nivel-hero .nivel-header-cta:focus-visible {
    outline: 3px solid var(--nivel-accent-claro);
    outline-offset: 4px;
}

.nivel-hero-overlay .small-title {
    font-size: clamp(26px, 5vw, 45px);
    color: var(--nivel-white);
    display: block;
    margin-bottom: 30px;
    line-height: 1.2;
    ;
}



.nivel-hero-overlay .small-title span.nombre-marca,
.nivel-hero-overlay .small-title span.nombre-ciudad {
    font-weight: 800;
}

span.nombre-marca {
    padding: 2px;
    background: white;
    line-height: 1;
    border-radius: 8px;
}


.nivel-header-cta {
    background: var(--nivel-accent);
    color: var(--nivel-white);
    padding: 16px 24px;
    font-weight: 700;
    text-decoration: none;
    font-size: 20px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* hero 1 */

/* El velo del hero de ciudad, en una variable para que cambie de forma segun
   el ancho sin repetir la foto en cada regla.

   El anterior -80 % hasta el 40 % y transparente a partir de ahi- dejaba el
   titular en 2,88:1 sobre la cara del tecnico, por debajo del 3 que pide WCAG
   para texto grande. Este llega a 6,29:1 y sigue dejando ver la foto.

   Solo toca #nivel-1, que es el hero de las paginas de ciudad. El de marca es
   #nivel-2 y se queda como esta. */
#nivel-1.nivel-hero {
    --velo: linear-gradient(90deg,
        rgba(24, 26, 30, 0.90) 0%,
        rgba(24, 26, 30, 0.86) 58%,
        rgba(24, 26, 30, 0.22) 100%);

    background-image:
        var(--velo),
        url("/images/cabeceras/nivel-1.svg?v=d4650601");

    background-position: 0 0, center;
    background-size: auto, cover;
    background-repeat: no-repeat;
}

/* Por debajo de 992 px el texto ocupa todo el ancho, asi que un velo que se
   aclara hacia la derecha deja el titular sobre la parte clara de la foto. Ahi
   va parejo. */
@media (max-width: 991.98px) {
    #nivel-1.nivel-hero {
        --velo: linear-gradient(rgba(24, 26, 30, 0.80), rgba(24, 26, 30, 0.80));
    }
}

/* hero 2 */
#nivel-2.nivel-hero {
    background-image:
        linear-gradient(90deg, rgba(51, 51, 51, 0.80) 40.16%, rgba(51, 51, 51, 0.00) 100%),
        var(--cabecera, url("/images/cabeceras/nivel-2.svg?v=d4650601"));

    background-position: 0 0, center;
    background-size: auto, cover;
    background-repeat: no-repeat;
}

section.img-texto {
    padding-top: 100px;
    padding-bottom: 100px;
}

section.img-texto .col-lg-7 {
    padding-left: 40px;
}

section.img-texto .nivel-section-title {
    color: var(--nivel-accent);
    font-weight: 800;
    font-size: clamp(28px, 5vw, 48px);
    line-height: 1.1;
    margin-bottom: 16px;
}

section.img-texto .nivel-divider {
    width: 60px;
    height: 6px;
    background: var(--nivel-accent);
    margin-bottom: 24px;
}

section.img-texto p {
    font-size: 28px;
    color: var(--nivel-text-dark) !important;
    margin-bottom: 30px;
    line-height: 1.4;
}

section.img-texto ul {
    margin-bottom: 40px;
}

section.img-texto li i.fa-check:before {
    content: "\f00c";
    font-size: 14px;
    background: var(--nivel-accent);
    padding: 4px;
    border-radius: 99px;
    color: var(--nivel-white);
    font-weight: 600;
}

section.img-texto li {
    font-size: 22px;
    color: var(--nivel-text-dark);
    margin-bottom: 20px;
    line-height: 1.4;
}

section.img-texto .nivel-offer-box {
    border: 2px solid var(--nivel-accent);
    border-radius: 24px;
    padding: 24px 16px;
}

.nivel-offer-box i.fas.fa-phone.mr-2 {
    transform: scaleX(-1);
}

section.img-texto .nivel-offer-box p {
    font-size: 20px;
    color: #535353;
    margin-bottom: 20px;

}

section.img-texto .nivel-offer-box p strong {
    color: var(--nivel-accent);
    text-transform: uppercase;
    font-weight: 700;

}

section.img-texto img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 16px 37.1px 0 rgba(0, 0, 0, 0.25);

}

section.seleccion {
    padding-top: 120px;
    padding-bottom: 120px;
    /* Esta regla venia exportada de Figma con el placeholder de imagen sin
       sustituir, asi que pedia una URL inexistente y provocaba un 404 en cada
       carga de pagina. Las dos capas inferiores (el overlay gris y esa imagen)
       quedaban ademas ocultas tras este gradiente, opaco de extremo a extremo,
       de modo que el resultado visual es identico sin ellas. */
    background: linear-gradient(180deg, #EDEDED 0%, #FFF 24.55%);

}

section.seleccion .nivel-section-title {
    font-size: clamp(32px, 5vw, 56px);
    color: var(--nivel-text-dark);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 24px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

section.seleccion h2.bold {
    font-weight: 900;
    font-size: clamp(24px, 5vw, 30px);
    color: var(--nivel-text-dark);
    line-height: 1.1;
    margin-bottom: 12px;
    line-height: 1.1;
}

section.seleccion .nivel-section-title span {
    font-weight: 500;
}

section.seleccion .nivel-divider {
    height: 6px;
    width: 60px;
    margin-left: auto;
    margin-right: auto;
    background: var(--nivel-text-dark);
    margin-bottom: 24px;
}

section.seleccion p {
    font-size: 28px;
    color: var(--nivel-text-dark);
    line-height: 1.4;
}

section#electrodomesticos-principal p {
    font-size: 18px;
    color: #737373;
}

.section.boxes {
    padding-top: 60px;
}

.section.boxes .box {
    padding: 16px;
    background: var(--nivel-white);
    border: 1px solid #EFEFEF;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 40.2px 0 rgba(0, 0, 0, 0.08);
    transition: box-shadow .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    gap: 16px;
    height: 100%;
}

.section.boxes .box:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
}

.section.boxes .box h3 {
    font-size: 28px;
    color: var(--nivel-accent);
    text-transform: uppercase;
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
}

.section.boxes .box span {
    color: #808080;
    font-weight: 500;
    font-size: 22px;
}

.section.boxes .col-lg-3 {
    padding: 15px;
}

/* nivel electrodomesticos */

.section.boxes .nivel-ed-card,
.electro-box {
    display: flex;
    align-items: center;
    justify-content: start;
    background: var(--nivel-white);
    border: 1px solid var(--nivel-border);
    border-radius: 8px;
    padding: 16px;
    height: 100%;
    gap: 12px;
}



.section.boxes .nivel-ed-card div {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-flow: column;
    gap: 2px;
}

.nivel-ed-card .nivel-ed-icon,
.nivel-ed-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: grayscale(100%);
    /* para <img> */
}

.nivel-ed-card:hover .nivel-ed-icon {
    filter: none;
}

.nivel-ed-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nivel-ed-card span,
#electrodomesticos-principal .electro-text span {
    font-size: 18px;
    color: #737373;
    font-weight: 400;
    margin: 0;
    line-height: 1.2;
}

#electrodomesticos-principal .electro-text h3 {
    display: flex;
    flex-flow: column;
    align-items: start;
}

.nivel-ed-card h3,
#electrodomesticos-principal .electro-text span.bold {
    font-size: 16px;
    font-weight: 700;
    color: var(--nivel-text-dark);
    margin: 0;
    line-height: 1.3;
}

.nivel-ed-card:hover span,
.nivel-ed-card:hover h3 {
    color: var(--nivel-accent);
}

/* nivel 3 */
.section.boxes .col-lg-4 {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* variant b */

.wrapper-b {
    background-image: var(--cabecera, url("/images/cabeceras/nivel-2.svg?v=d4650601"));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 120px !important;

}

.hero-b h1 {
    font-size: clamp(30px, 5vw, 48px);

}

/* Subrayado decorativo detrás del nombre del electrodoméstico (images/subrayado.svg) */
.hero-b h1 .electrodomestico {
    position: relative;
    z-index: 0;
    display: inline-block;
    vertical-align: baseline;
    isolation: isolate;
    background: linear-gradient(to bottom,
            transparent calc(100% - 16px),
            rgba(234, 0, 22, 0.3) calc(100% - 16px));
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    display: inline;
}

/* .hero-b h1 .electrodomestico::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.14em;
    width: calc(100% + 0.28em);
    height: 16px;
    transform: translateX(-50%);
    background: url("/images/subrayado.svg") no-repeat center center;
    background-size: 100% auto;
    z-index: -1;
    pointer-events: none;
} */

.hero-b h1 span.text-grey {
    color: #737373;
    font-size: 36px;
    line-height: 1.2;
    display: inline-flex;
    width: 80%;
}

.hero-b .mod-claim ul li.h4 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.hero-b .mod-claim ul li.h4 span {
    line-height: 1.3;
}

.hero-b .mod-claim .hero-b-list-check {
    flex-shrink: 0;
}

.hero-b .beneficios-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin: 1rem 0 1.25rem;
}

.hero-b .box-bnf {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #F3F5F7;
    border: 1px solid #e6e6e6;
    color: var(--nivel-text-dark, #1a1a1a);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.hero-b .box-bnf__icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: block;
}

.hero-b .box-bnf .box-bnf__text {
    font-size: 14px;
    font-weight: 600;
}

.hero-b ul li {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 8px;
}

.hero-b ul {
    margin-bottom: 40px;
}

.hero-b p#mensaje-horario {
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    line-height: 1.5;
}

.hero-b p#mensaje-horario span.text-grey {
    font-size: 14px;
    color: #737373;
    margin-top: 5px;
}

.hero-b .comp-cta-phone {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    padding: 20px 40px;
    border-radius: 12px;
    box-shadow: 0 8px 30px -8px rgba(234, 0, 22, 0.53);
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 6px;
    width: fit-content;
}

.hero-b .comp-cta-phone .hero-b-cta-llama {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.hero-b .comp-cta-phone .hero-b-cta-llama small {
    font-weight: 500;
	display:none;
}

.hero-b .comp-cta-phone .hero-b-cta-llama span {
    font-weight: 900;
}

.hero-b .comp-cta-phone .hero-b-cta-phone-icon {
    font-size: 20px;
    flex-shrink: 0;
    color: #fff;
}

.hero-b .comp-cta-phone .hero-b-cta-phone-num {
    display: flex;
    align-items: center;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
	gap: 8px;
}

.hero-b .comp-cta-phone:hover {
    box-shadow: 0 8px 30px -8px rgba(234, 0, 22, 0.30);
    opacity: 0.8;
}

/* Barra de 4 beneficios (debajo del hero, template-b) */
.hero-b-beneficios-barra {
    background: #f5f7f9;
    padding: 2.5rem 0 3rem;
}

.hero-b-beneficio-item {
    text-align: center;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.hero-b-beneficio-icon-wrap {
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-b-beneficio-icon {
    display: block;
    width: 55px;
    height: 55px;
    object-fit: contain;
}

.hero-b-beneficio-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--nivel-text-dark, #1a1a1a);
    line-height: 1.3;
    margin-bottom: 4px;
}

.hero-b-beneficio-text {
    font-size: 14px;
    font-weight: 400;
    color: #737373;
    line-height: 1.45;
    margin: 0;
}

.hero-b .col-lg-img {
    position: relative;
}

.hero-b img.img-hero {
    position: absolute;
    bottom: -1rem;
    height: 800px;
    max-width: fit-content;
    width: fit-content;
}

/* Cómo funciona — 3 pasos (template-b, debajo de beneficios) */
.hero-b-como-funciona {
    padding-top: 80px;
    padding-bottom: 80px;
    background: #fff;
}

.hero-b-como-funciona__head {
    margin-bottom: 2.5rem;
}

.hero-b-como-funciona__eyebrow {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #9ca3af;
    text-transform: uppercase;
    margin-bottom: 8px;
    text-align: center;
}

.hero-b-como-funciona__title {
    font-size: clamp(24px, 4vw, 30px);
    font-weight: 800;
    color: var(--nivel-text-dark, #1a1a1a);
    line-height: 1.15;
    margin-bottom: 8px;
    text-align: center;
}

.hero-b-como-funciona__subtitle {
    font-size: 18px;
    color: #737373;
    line-height: 1.45;
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}

.row.hero-b-como-funciona__grid {
    margin-top: 50px;
}

.hero-b-como-funciona__grid::before {
    content: "";
    position: absolute;
    left: 15%;
    right: 15%;
    top: 35px;
    height: 2px;
    background: #e5e7eb;
    z-index: 0;
    pointer-events: none;
}

.hero-b-paso {
    position: relative;
    z-index: 1;
}

.hero-b-paso__visual {
    position: relative;
    z-index: 1;
    max-width: 80px;
    margin-bottom: 5px;
}

.hero-b-paso__visual img {
    display: block;
    width: 80px;
    height: 80px;
}

.hero-b-paso__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--nivel-text-dark, #1a1a1a);
    line-height: 1.3;
    margin: 0 0 0.5rem;
}

.hero-b-paso__text {
    font-size: 16px;
    color: #737373;
    line-height: 1.3;
    margin: 0 auto;
    max-width: 280px;
}

@media (max-width: 991.98px) {
    .hero-b-como-funciona__grid::before {
        display: none;
    }

    /* Flecha entre pasos en lugar de la línea horizontal */
    .hero-b-como-funciona__grid>[class*="col-"] .hero-b-paso__visual::after  {
        content: "";
        display: block;
        width: 100%;
        height: 2rem;
        margin-top: 0;
        margin-bottom: 0.25rem;
        background: no-repeat center center;
        background-size: 1.5rem auto;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M6 15l6 6 6-6'/%3E%3C/svg%3E");
    }
}

@keyframes heroPretituloLivePulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(223, 32, 32, 0.55);
    }

    45% {
        transform: scale(1.2);
        box-shadow: 0 0 0 6px rgba(223, 32, 32, 0);
    }

    55% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(223, 32, 32, 0.35);
    }

    70% {
        transform: scale(1.12);
        box-shadow: 0 0 0 4px rgba(223, 32, 32, 0);
    }
}

.hero-b .pretitulo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #df2020;
    font-weight: 800;
    line-height: 1.4;
    padding: 8px 18px 8px 14px;
    border-radius: 999px;
    background: #fff0f0;
    border: 1px solid #df2020;
    margin-bottom: 24px;
}

.hero-b .pretitulo::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #df2020;
    animation: heroPretituloLivePulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .hero-b .pretitulo::before {
        animation: none;
    }
}


/* testimonios */

section.testimonios {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #F5F7F9;
}

section.testimonios h2 {
    font-weight: 900;
    font-size: clamp(24px, 5vw, 30px);
    color: var(--nivel-text-dark);
    line-height: 1.1;
    margin-bottom: 12px;

}

section.testimonios p {
    font-size: 18px;
    color: #737373;

}

section.testimonios .row-testimonios {
    padding-top: 40px;
    align-items: stretch;
}

section.testimonios .testimonial-box {
    padding: 24px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    background: var(--nivel-white);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    height: 100%;
    display: flex;
    flex-flow: column;
    align-items: start;
    justify-content: start;
}

.testimonial-box .testimonial-text {
    display: flex;
    flex-flow: column;
    align-items: start;

}

.testimonial-box .testimonial-icon {

    display: inline-block;
    margin-right: 12px;

}

.testimonial-box .header-box {
    display: flex;
    align-items: start;
    justify-content: start;
    margin-bottom: 12px;
}

.testimonial-box .header-box p.bold {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 4px;
    color: var(--nivel-text-dark);
}

.testimonial-box .header-box span.autor {
    font-size: 12px;
    color: #737373;
    font-weight: 400;
    line-height: 1.2;
}

.testimonial-box .body-box {
    display: flex;
    flex-flow: column;
    align-items: start;
    justify-content: center;
}

.testimonial-box .body-box img {
    margin-bottom: 12px;
}

.testimonial-box .body-box p {
    font-size: 14px;
    line-height: 1.3;
    color: #737373;
}

/* FAQ */

section.faq-section {
    background: #f1f3f5;
    padding-top: 56px;
    padding-bottom: 56px;
}

section.faq-section .faq-title {
    font-size: clamp(24px, 5vw, 30px);
    color: var(--nivel-text-dark);
    margin-bottom: 20px;
    font-weight: 900;
}

.faq-accordion .faq-card {
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 10px;
}

.faq-accordion .faq-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    border-color: #73737342;

}

.faq-accordion .faq-question {
    width: 100%;
    text-align: left;
    color: var(--nivel-text-dark);
    text-decoration: none;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 600;
}

.faq-accordion .faq-question:hover,
.faq-accordion .faq-question:focus {
    text-decoration: none;
    color: #737373;
    box-shadow: none;
}

.faq-accordion .faq-question i {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.faq-accordion .faq-question h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.faq-accordion .faq-question[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.faq-accordion .faq-answer {
    padding: 0 18px 14px;
    color: #666;
    font-size: 16px;
    line-height: 1.4;
}

/* FAQ acordeon */
.faq-accordion .faq-collapse {
    display: block;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
}

.faq-accordion .faq-collapse.is-open {
    opacity: 1;
}

/* footer */

footer.niveles-footer {
    padding-top: 50px;
    padding-bottom: 50px;
}

footer.niveles-footer p.white.o-65 {
    font-size: 18px;
}

footer.niveles-footer small.white {
    font-size: 16px;
    line-height: 1.4;
}

footer.niveles-footer .texto-legal {
    font-size: 16px;
    margin-top: 40px;
}

footer.niveles-footer .lista-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 0.5em;
}

footer.niveles-footer .lista-legal li+li::before {
    content: "|";
    margin-right: 0.5em;
    opacity: 0.8;
}

footer.niveles-footer .logotipo-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

footer.niveles-footer .lista-legal li a:hover {
    color: var(--nivel-accent);
}

footer small {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
    display: block;
    margin-bottom: 16px;
    margin-top: 16px;
    color: #B3B3B3;

}

/* parte superior landing principal */

.footer-principal {
    padding-bottom: 40px;
}

.footer-cta-block {
    padding-top: 50px;
    padding-bottom: 50px;
    background: var(--footer-degradado, linear-gradient(0deg, var(--color-grey-5, #0D0D0D) 0%, #777 100%));


}

.footer-cta-block h2 {
    color: #fff;
    font-size: clamp(24px, 4vw, 30px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 24px;
}

.footer-cta-block .footer-cta-subtitle {
    color: var(--nivel-white);
    font-size: 16px;
    margin-bottom: 24px;
}

.footer-cta-block .footer-cta-phone-wrap {
    margin-bottom: 24px;
}

.footer-cta-block .footer-cta-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 40px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    color: var(--nivel-white);
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid var(--nivel-white);
}

.footer-cta-block .footer-cta-phone:hover {
    opacity: 0.8;
}

.footer-cta-block .footer-cta-note {
    color: rgba(255, 255, 255, 0.50);
    font-size: 12px;
    margin-bottom: 0;
    letter-spacing: 0.2px;
}

@media screen and (max-width: 1400px) {
    .wrapper-b {
        background-position: right;
    }
}

@media screen and (max-width: 991.98px) {
    .hero-b img.img-hero {
        position: static;
        margin-top: 40px;
        height: 400px;
    }

    .hero-b .col-lg-img {
        display: flex;
        justify-content: center;
    }

    .wrapper-b {
        padding-bottom: 0px;
    }
}

@media screen and (max-width: 990px){
	 .wrapper-b {
        background: none;
        padding-top: 150px !important;
    }
}

@media screen and (max-width: 410px){
	
	 .wrapper-b {
        padding-top: 180px !important;
    }
}

@media screen and (max-width: 767px) {
	
	nav.row.no-visible-xs{
	display:none; 
	}
	
	.bed-logo-b{
padding-top: 80px !important;
}

    header.niveles-header .bed-logo .logo-transparent,
    header.niveles-header .bed-logo .logo-solid {
        width: 130px;
        height: auto;
    }
	
	header.niveles-header .logo-transparent, header.niveles-header .logo-solid{
	height: 40px;
	}

    header.niveles-header {
        padding-top: 10px;
        padding-bottom: 10px;
    }
	
	 .header-b.niveles-header {
		background-color: black;
    }
	
	.header-b.niveles-header.header-nivel-2{
	background: white;
	}

    .logos-header-b .bed-logo-header-b {
        height: auto;
    }
	

    .logos-header-b .bed-logo-header-b img {
        width: 80px;
    }

    header .comp-cta-phone {

        min-width: fit-content;
    }

    header .comp-cta-phone span {
        font-size: 14px;
    }


    .nivel-hero-overlay p.pretitulo {
        font-size: 20px;
        line-height: 1.4;
        margin-bottom: 12px;
    }

    .nivel-hero-overlay h1 {
        line-height: 1.3;
        margin-bottom: 8px;

    }
	
	.nivel-hero-overlay .small-title{
		margin-bottom: 40px;
	}

    .nivel-hero {
        min-height: 550px;
    }

    #nivel-0.nivel-hero {
        background-image:
            linear-gradient(#00000099, #00000099),
            url("/images/hero-bg-industrial.jpg");

    }

    #nivel-1.nivel-hero {
        background-image:
            var(--velo),
            url("/images/cabeceras/nivel-1.svg?v=d4650601");

    }

    #nivel-2.nivel-hero {
        background-image:
            linear-gradient(#00000099, #00000099),
            var(--cabecera, url("/images/cabeceras/nivel-2.svg?v=d4650601"));

    }



    .nivel-hero-overlay {
        padding-top: 50px;
    }

    .nivel-header-cta {
        font-size: 16px;
        width: 100%;
        padding: 12px 16px;
        text-align: center;
    }

    section.img-texto {
        padding-top: 30px;
        padding-bottom: 40px;
    }

    section.img-texto.marcas {
        padding-top: 40px;

    }

    section.img-texto .row {
        flex-flow: column-reverse;
    }

    section.img-texto .col-lg-7 {
        padding-left: 15px;
        margin-bottom: 40px;
    }

    section.img-texto p {
        font-size: 18px;
        margin-bottom: 24px;
    }

    section.img-texto li {
        font-size: 16px;
    }

    section.img-texto li i.fa-check:before {
        font-size: 12px;
        font-weight: 500;
    }

    section.img-texto .nivel-offer-box {
        margin-top: 30px;
        padding: 16px;
    }

    section.img-texto .nivel-offer-box p {
        font-size: 16px;
    }

    section.img-texto img {
        height: 290px;
        width: 100%;
    }

    section.seleccion {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    section.seleccion .nivel-section-title {
        width: 100%;
        margin-bottom: 16px;
    }

    section.seleccion p {
        font-size: 18px;
        color: var(--nivel-text-dark);
    }

    .section.boxes {
        padding-top: 30px;
    }

    .nivel-brand-card h3 {
        font-size: 16px;

    }

    .section.boxes .col-lg-3,
    .section.boxes .col-lg-4 {
        padding: 6px;
    }



    .nivel-ed-card h3,
    #electrodomesticos-principal .electro-text span.bold {
        font-size: 14px;
    }

    .nivel-ed-card span,
    #electrodomesticos-principal .electro-text span {
        font-size: 16px;
        margin-bottom: 4px;
    }

    .section.boxes .box {
        padding: 16px;
        gap: 8px;
    }

    .section.boxes .box h3 {
        font-size: 18px;
    }

    .section.boxes .box span {
        font-size: 16px;
    }

    .footer-cta-block .footer-cta-phone {
        display: none;
    }

    .footer-cta-block {
        padding-top: 30px;
        padding-bottom: 24px;
    }

    .footer-cta-block .footer-cta-subtitle {
        font-size: 16px;
    }

    .footer-principal {
        padding-bottom: 150px;
        padding-right: 16px;
        padding-left: 16px;
    }

    footer small {
        width: 100%;
    }

    /* footer */

    footer.niveles-footer .lista-legal {
        flex-flow: column;
    }

    footer.niveles-footer .lista-legal li {
        margin-bottom: 16px;
        ;
    }

    footer.niveles-footer small.white {
        font-size: 14px;
    }

    /* variante b */


    .hero-b {
        padding-top: 10px;
    }

    .hero-b .pretitulo {
        margin-bottom: 16px;
		width: 100%;
        justify-content: center;
    }

   

    .hero-b h1 {
        text-align: center;
        line-height: 1.2;
    }



    .hero-b h1 span.text-grey {
        font-size: 24px;
        text-align: center;
    }

    .hero-b p.btn {
        /*position: fixed;
        bottom: -2px;
        left: 0;
        right: 0;*/
        width: 100%;
        background: #fff;
        padding: 10px;
        border-top: 1px solid #e0e0e0;
        /*z-index: 1000;*/
        margin: 0;
		
    }

    .hero-b p.btn a {
        box-shadow: none;
        width: 100%;
        margin-top: 0 !important;
        margin-bottom: 0;
    }

    .hero-b h1 .electrodomestico::after {
        bottom: 0;
    }

    .hero-b .comp-cta-phone {
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .hero-b .comp-cta-phone .hero-b-cta-phone-num {
        font-size: 22px;
		gap: 8px;
    }


    .hero-b h1 .electrodomestico {
        background: linear-gradient(to bottom, transparent calc(100% - 10px), rgba(234, 0, 22, 0.3) calc(100% - 16px));
    }

    .hero-b .beneficios-hero {
        margin-bottom: 30px;
		justify-content:center;
    }
	
	.hero-b .box-bnf{
	flex: 0 0 30%;
	flex-flow: column;
	border:none;
	background: transparent;
	}
	
	.hero-b .box-bnf .box-bnf__text{
	text-align:center;
	}

	

    .hero-b p#mensaje-horario {
        text-align: center;
    }

    .hero-b-beneficios-barra {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .hero-b-como-funciona {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .hero-b-como-funciona__subtitle {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        font-size: 16px;
    }

    section#electrodomesticos-principal p,

    section.testimonios p {
        font-size: 14px;
        text-align: center;

        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

    .nivel-ed-card span,
    #electrodomesticos-principal .electro-text h3,
    #electrodomesticos-principal .electro-text span {
        text-align: left;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    section.testimonios {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    section.testimonios h2 {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 70%;
    }

    .testimonial-box .header-box p.bold {
        text-align: left;
        margin: 0 0 8px 0;
        width: 100%;
    }

    .testimonial-box .body-box p {
        text-align: left;
        margin: 0;
        width: 100%;
    }

    section.faq-section {
        padding-top: 30px;
        padding-bottom: 30px;
    }
	
	.faq-accordion .faq-question h3{
		font-size: 16px;
	}

}


@media screen and (max-width: 550px) {
    
    header .comp-cta-phone .cta-phone-icon {
        margin-right: 4px;
        width: 22px;
        height: auto;
    }



    header .comp-cta-phone {
        border-radius: 12px;
        padding:8px 16px;
        margin: 0;
    }


}

/* === ciudades:inicio === */
/* Listado de localidades: buscador + retícula densa de altura uniforme.
   Sustituye a las 79 tarjetas sueltas de alto desigual que habia antes. */

/* El CTA "Recibe asistencia en tu ciudad" salta a #ciudades, y la cabecera es
   fija: sin este margen el titulo de la seccion queda debajo de ella. */
section.seleccion { scroll-margin-top: 100px; }

.ciudades-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 820px;
    margin: 40px auto 0;
}

.ciudades-buscador {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 380px;
}

.ciudades-buscador .ciudades-icono {
    position: absolute;
    left: 18px;
    width: 20px;
    height: 20px;
    color: #8B9096;
    pointer-events: none;
}

.ciudades-input {
    width: 100%;
    font-size: 17px;
    font-family: inherit;
    color: var(--nivel-text-dark);
    padding: 15px 46px 15px 50px;
    /* WCAG 2.2, 1.4.11: el borde es lo unico que delimita el campo sobre
       fondo blanco, y a #E2E4E7 se quedaba en 1,27:1. Mismo gris, subido
       hasta 3,22:1. */
    border: 1px solid #8B9096;
    border-radius: 999px;
    background: var(--nivel-white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    transition: border-color .18s, box-shadow .18s;
    -webkit-appearance: none;
    appearance: none;
}

/* El texto del marcador de posicion es texto visible: pide 4,5:1, y el gris
   anterior daba 2,64. */
.ciudades-input::placeholder { color: #6E747A; }
.ciudades-input::-webkit-search-cancel-button { display: none; }

.ciudades-input:focus {
    outline: none;
    border-color: var(--nivel-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--nivel-accent) 16%, transparent);
}

/* WCAG 2.2, 1.4.11: el indicador de foco necesita 3:1 con lo de al lado. El
   contorno al 45 % se queda en 1,9:1 sobre blanco; a color entero sube a
   6,57:1. Y el aro del buscador, que al 16 % no se veia, pasa a un contorno
   de verdad sin perder el halo. */
body:not([data-marca]) .ciudad:focus-visible {
    outline-color: var(--nivel-accent);
}

body:not([data-marca]) .ciudades-input:focus-visible {
    outline: 2px solid var(--nivel-accent);
    outline-offset: 2px;
}

.ciudades-limpiar {
    position: absolute;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #EFF1F3;
    color: #5F6368;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.ciudades-limpiar svg { width: 14px; height: 14px; }
.ciudades-limpiar:hover { background: var(--nivel-accent); color: #fff; }

.ciudades-contador {
    margin: 0;
    font-size: 15px !important;
    color: #6B7075 !important;
    white-space: nowrap;
}

.ciudades-contador strong { color: var(--nivel-text-dark); font-weight: 700; }

.ciudades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 14px;
    margin-top: 34px;
}

.ciudad {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 82px;
    padding: 16px 18px;
    background: var(--nivel-white);
    border: 1px solid #E8EAEC;
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.ciudad:hover {
    transform: translateY(-2px);
    border-color: var(--nivel-accent);
    box-shadow: 0 10px 24px rgba(16, 24, 40, .10);
    text-decoration: none;
}

.ciudad:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--nivel-accent) 45%, transparent);
    outline-offset: 2px;
}

.ciudad-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.ciudad-nombre {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--nivel-text-dark);
}

.ciudad-zona {
    font-size: 12.5px;
    line-height: 1.3;
    /* A 12,5 px la norma pide 4,5:1 y el gris anterior se quedaba en 3,23.
       Mismo tono, oscurecido hasta 4,73. */
    color: #6E747A;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.ciudad-tel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--nivel-accent);
    white-space: nowrap;
}

.ciudad-tel-icono { width: 14px; height: 14px; }
.ciudad[hidden] { display: none; }

.ciudades-vacio {
    margin-top: 30px;
    text-align: center;
    font-size: 18px !important;
    color: #6B7075 !important;
}

.ciudades-vacio strong { color: var(--nivel-text-dark); }

@media (max-width: 991px) {
    .ciudades-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
}

@media (max-width: 575px) {
    .ciudades-panel { flex-direction: column; align-items: stretch; margin-top: 30px; }
    /* El panel pasa a columna, asi que el eje principal es el vertical y el
       "flex: 1 1 380px" del buscador dejaba de ser un ancho para convertirse
       en 380 px de ALTO: el campo quedaba flotando en medio, con 160 px de
       hueco por arriba y otros tantos por abajo. Aqui se ajusta a su
       contenido. */
    .ciudades-buscador { flex: 0 0 auto; }
    .ciudades-contador { white-space: normal; text-align: center; }
    .ciudades-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 24px; }
    .ciudad { min-height: 0; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
    .ciudad-nombre { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .ciudad, .ciudades-input, .ciudades-limpiar { transition: none; }
    .ciudad:hover { transform: none; }
}

/* --- Cobertura por municipio -------------------------------------------
   El grid de arriba son las 85 paginas propias. Estas otras tarjetas salen
   del buscador cuando alguien escribe un municipio sin pagina —Nerja, Dos
   Hermanas— y dicen quien le atiende. Comparten la anatomia de .ciudad para
   que las dos rejillas se lean como una sola. */

.zonas-grid { margin-top: 34px; }
.zonas-grid:empty { display: none; }

.ciudad--zona { align-items: center; }

.ciudad--zona .ciudad-zona {
    /* Con "Madrid · Servicio desde Torrejon de Ardoz" y la columna a cuatro
       por fila hacen falta tres lineas; truncar dejaria fuera justo el dato
       que se ha buscado, que es quien atiende. */
    -webkit-line-clamp: 3;
    white-space: normal;
}

.ciudad-estado {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
}

/* Colores de estado, no de marca: no cambian con data-marca. El verde
   #0B6B37 sobre #E7F5EC da 5,88:1 y el ambar #8A5200 sobre #FDF0DA da 5,67:1,
   los dos por encima del 4,5:1 que pide la norma a este cuerpo. */
.ciudad-senal {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    background: #E7F5EC;
    color: #0B6B37;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.ciudad-senal::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #12903F;
    flex-shrink: 0;
}

/* Lejos de la localidad que atiende: no se promete desplazamiento, se invita
   a preguntar. */
.ciudad-senal--consulta {
    background: #FDF0DA;
    color: #8A5200;
}

.ciudad-senal--consulta::before { background: #B87400; }

.ciudad-senal[hidden] { display: none; }

.ciudad--zona .ciudad-tel {
    font-size: 12.5px;
    font-weight: 600;
}

.zonas-mas {
    margin: 16px 0 0;
    text-align: center;
    font-size: 14px !important;
    color: #6B7075 !important;
}

@media (max-width: 575px) {
    /* A dos columnas de 150 px no caben nombre, procedencia, estado y
       telefono: los resultados de busqueda pasan a una sola columna y la
       tarjeta se lee como una fila de listado. */
    .zonas-grid,
    .ciudades-grid--buscando { margin-top: 24px; grid-template-columns: 1fr; }
    .ciudad--zona,
    .ciudades-grid--buscando .ciudad { flex-direction: row; align-items: center; gap: 12px; }
    .ciudad--zona .ciudad-zona { -webkit-line-clamp: 2; }
}

/* === ciudades:fin === */

/* === marcas:inicio === */
/* Listado de marcas: cuadrícula de wordmarks con buscador. Cada nombre lleva
   el color corporativo de su marca, que --c propaga al borde y al foco. */
section#marcas { scroll-margin-top: 100px; }

.marcas-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 920px;
    margin: 40px auto 0;
}

.marcas-buscador { position: relative; display: flex; align-items: center; flex: 1 1 340px; }

.marcas-buscador .marcas-icono {
    position: absolute;
    left: 18px;
    width: 20px;
    height: 20px;
    color: #8B9096;
    pointer-events: none;
}

.marcas-input {
    width: 100%;
    font-size: 17px;
    font-family: inherit;
    color: var(--nivel-text-dark);
    padding: 15px 46px 15px 50px;
    /* WCAG 2.2, 1.4.11: el borde es lo unico que delimita el campo sobre
       fondo blanco, y a #E2E4E7 se quedaba en 1,27:1. Mismo gris, subido
       hasta 3,22:1. */
    border: 1px solid #8B9096;
    border-radius: 999px;
    background: var(--nivel-white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    transition: border-color .18s, box-shadow .18s;
    -webkit-appearance: none;
    appearance: none;
}

.marcas-input::placeholder { color: #6E747A; }
.marcas-input::-webkit-search-cancel-button { display: none; }

.marcas-input:focus {
    outline: none;
    border-color: var(--nivel-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--nivel-accent) 16%, transparent);
}

/* El buscador de marcas anula su contorno igual que el de ciudades, asi que
   necesita el mismo sustituto para no dejar el foco en un halo del 16 %. */
body:not([data-marca]) .marcas-input:focus-visible {
    outline: 2px solid var(--nivel-accent);
    outline-offset: 2px;
}

.marcas-limpiar {
    position: absolute;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #EFF1F3;
    color: #5F6368;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.marcas-limpiar svg { width: 14px; height: 14px; }
.marcas-limpiar:hover { background: var(--nivel-accent); color: #fff; }

.marcas-contador {
    margin: 0;
    font-size: 15px !important;
    color: #6B7075 !important;
    white-space: nowrap;
}

.marcas-contador strong { color: var(--nivel-text-dark); font-weight: 700; }

/* Titulo de cada gama. Separa hogar de hosteleria sin meter una linea
   gruesa: basta un filete fino y el nombre en versalitas, que es lo que hace
   falta para que el ojo entienda que son dos bloques distintos. */
.marcas-gama { margin-top: 34px; }

.marcas-gama__tit {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--nivel-border, #eee);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nivel-text-dark, #333);
}

.marcas-gama__n {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #8a8f98;
}

.marcas-gama .marcas-grid { margin-top: 18px; }

@media (max-width: 575px) {
    .marcas-gama__tit { font-size: 13px; }
}

/* Hogar / Industrial. Van marcados los dos: quien llega ve el listado
   completo, y quien sabe lo que busca se quita de encima las 23 marcas que no
   le sirven. */
.marcas-ambitos {
    display: flex;
    gap: 10px;
    border: 0;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

.marcas-ambito {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 9px 12px;
    border: 1px solid var(--nivel-border, #eee);
    border-radius: 999px;
    background: #fff;
    font-size: 15px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.marcas-ambito:hover { border-color: #d4d4d8; }

.marcas-ambito input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--nivel-accent, #D7662D);
    cursor: pointer;
}

/* Marcado es el estado normal, asi que el peso visual lo lleva el activo y no
   al reves: desmarcar tiene que notarse. */
.marcas-ambito:has(input:checked) {
    border-color: var(--nivel-accent, #D7662D);
    color: var(--nivel-text-dark, #333);
    font-weight: 600;
}

.marcas-ambito:has(input:focus-visible) {
    outline: 2px solid var(--nivel-accent, #D7662D);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.marcas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 14px;
    margin-top: 34px;
}

.marca {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 18px 14px;
    background: var(--nivel-white);
    border: 1px solid #E8EAEC;
    border-radius: 14px;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* El hover recoge el color corporativo de cada marca (--c). */
.marca:hover {
    transform: translateY(-2px);
    border-color: var(--c, var(--nivel-accent));
    box-shadow: 0 10px 24px rgba(16, 24, 40, .12);
}

.marca:focus-visible {
    outline: 3px solid var(--c, var(--nivel-accent));
    outline-offset: 2px;
}

.marca-wordmark {
    font-size: 23px;
    line-height: 1.12;
    text-align: center;
    /* Se respeta la capitalizacion real de cada marca (beko, smeg, BOSCH),
       asi que aqui NO se fuerza mayusculas. */
    text-transform: none;
    /* break-word, no "anywhere": parte solo si de verdad no cabe, y nunca
       mete guion dentro de un nombre propio. */
    overflow-wrap: break-word;
    hyphens: manual;
}

/* Cuerpo por tramos de longitud del nombre. */
.marca.l .marca-wordmark  { font-size: 19px; }
.marca.xl .marca-wordmark { font-size: 16px; }

/* Las familias y el tracking los define el bloque identidad-marca mediante
   variables (--ff, --ls), que .marca-wordmark consume. Aqui solo queda lo
   propio de la retícula: el hueco que deja el tracking abierto al final. */
.t-wide .marca-wordmark { text-indent: .14em; }

.marca[hidden] { display: none; }

.marcas-vacio {
    margin-top: 30px;
    text-align: center;
    font-size: 18px !important;
    color: #6B7075 !important;
}

.marcas-vacio strong { color: var(--nivel-text-dark); }

@media (max-width: 575px) {
    .marcas-panel { flex-direction: column; align-items: stretch; margin-top: 30px; }
    .marcas-contador { white-space: normal; text-align: center; }
    .marcas-ambitos { justify-content: center; }
    .marcas-ambito { flex: 1 1 0; justify-content: center; padding: 10px 12px; }
    .marcas-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; margin-top: 24px; }
    .marca { min-height: 74px; padding: 14px 10px; }
    .marca-wordmark { font-size: 16px; }
    .marca.l .marca-wordmark  { font-size: 14px; }
    .marca.xl .marca-wordmark { font-size: 12.5px; }
    .t-wide .marca-wordmark { letter-spacing: .08em; text-indent: .08em; }
}

@media (prefers-reduced-motion: reduce) {
    .marca, .marcas-input, .marcas-limpiar { transition: none; }
    .marca:hover { transform: none; }
}
/* === marcas:fin === */

/* === marca-landing:inicio === */
/* El nombre de la marca en el hero de su landing, con la misma identidad que
   en el listado #marcas: color, familia, tracking y peso de cada fabricante.
   Las clases f-* y t-* son las mismas; aqui se aplican al propio <span>, no a
   un hijo, porque en el titular la marca va en linea con el resto del texto. */
.nivel-hero-overlay .small-title span.nombre-marca,
span.nombre-marca {
    /* El recuadro traia padding: 2px y el nombre quedaba pegado a los bordes.
       En em, para que el aire crezca con el cuerpo del titular. */
    padding: .06em .32em;
    /* Separacion del texto que lo rodea ("PARA _ EN GRANADA"). */
    margin: 0 .06em;
}

/* Familias y tracking vienen del bloque identidad-marca por variables. */
/* === marca-landing:fin === */

/* === bloque-reparacion:inicio === */
/* Bloque "Reparamos su electrodoméstico hoy" de las landings.
   --c es el color de la marca; asi no hacen falta estilos en linea.

   Los selectores van prefijados con section.img-texto porque el CSS heredado
   ya define ahi .nivel-divider y .nivel-offer-box p strong con el naranja de
   la marca del sitio: sin el prefijo ganaban ellos por especificidad y el
   bloque salia naranja en vez del color del fabricante. */
/* La imagen ocupaba 211 px frente a los 475 de la columna de texto y quedaba
   flotando. Ahora la fila estira ambas columnas y la foto cubre todo el alto. */
section.img-texto.electrodomesticos .rep-row {
    align-items: stretch;
}

section.img-texto .rep-media {
    display: flex;
}

section.img-texto .rep-media picture {
    display: flex;
    width: 100%;
}

section.img-texto .rep-media img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    border-radius: 16px;
}

@media (max-width: 991px) {
    section.img-texto .rep-media img { min-height: 260px; }
}

section.img-texto .rep-titulo {
    color: var(--c, var(--nivel-text-dark)) !important;
    line-height: 1.15;
}

section.img-texto .rep-divider {
    background: var(--c, var(--nivel-accent));
    width: 64px;
    height: 5px;
    border-radius: 3px;
    margin: 0 0 22px;
}

section.img-texto .rep-intro {
    font-size: 18px !important;
    line-height: 1.55;
    color: #5F6368 !important;
    margin-bottom: 22px;
}

section.img-texto .rep-ventajas {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
}

section.img-texto .rep-ventajas li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 11px;
    font-size: 17px;
    line-height: 1.45;
    color: var(--nivel-text-dark);
}

/* SVG en linea en lugar del icono de FontAwesome: la hoja de iconos se carga
   diferida y los checks aparecian en blanco durante el primer pintado. */
.rep-check {
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    margin-top: 1px;
    fill: var(--c, var(--nivel-accent));
}

section.img-texto .rep-oferta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px 22px;
    border: 1.5px solid var(--c, var(--nivel-accent));
    border-radius: 16px;
    /* Tinte muy leve del color de la marca, para que el recuadro pese sin gritar. */
    background: color-mix(in srgb, var(--c, var(--nivel-accent)) 5%, #fff);
}

section.img-texto .nivel-offer-box p.rep-horario {
    flex: 1 1 250px;
    margin: 0;
    font-size: 17px !important;
    line-height: 1.5;
    color: var(--nivel-text-dark) !important;
}

/* La hora y el "HOY MISMO", en el color del fabricante. */
section.img-texto .nivel-offer-box p.rep-horario strong {
    color: var(--c, var(--nivel-accent));
    font-weight: 800;
}

section.img-texto .nivel-offer-box p.rep-horario strong.rep-hora {
    white-space: nowrap;
}

section.img-texto .nivel-offer-box p.rep-horario .rep-asterisco {
    color: #6A6E73;
    font-weight: 400;
}

section.img-texto .rep-cta {
    background: var(--c, var(--nivel-accent)) !important;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 14px 22px;
    border-radius: 12px;
    font-size: 19px;
    white-space: nowrap;
}

section.img-texto .rep-cta:hover { filter: brightness(.92); color: #fff !important; }
.rep-tel { width: 19px; height: 19px; }

/* Bajo el recuadro: primero el reclamo del desplazamiento, en el color de la
   marca, y debajo la nota legal en cuerpo menor. */
section.img-texto .rep-desplazamiento {
    margin: 14px 2px 0;
    font-size: 15.5px !important;
    line-height: 1.4;
    color: #5F6368 !important;
}

/* Solo el reclamo va en mayusculas y en el color del fabricante; la condicion
   queda en minusculas y en gris, para que no compita con el. */
section.img-texto .rep-desplazamiento strong {
    color: var(--c, var(--nivel-accent));
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .01em;
}

section.img-texto .rep-desplazamiento span {
    font-weight: 400;
    text-transform: none;
}

section.img-texto .rep-nota {
    margin: 5px 2px 0;
    font-size: 13px !important;
    line-height: 1.4;
    color: #6A6E73 !important;
}

@media (max-width: 767px) {
    section.img-texto .rep-oferta { padding: 18px; gap: 16px; }
    section.img-texto .rep-cta { width: 100%; justify-content: center; }
    section.img-texto .rep-intro { font-size: 16.5px !important; }
    section.img-texto .rep-ventajas li { font-size: 16px; }
}
/* === bloque-reparacion:fin === */

/* === identidad-marca:inicio === */
/* Identidad tipográfica de cada fabricante, en un único sitio.
   Las clases f-* y t-* solo definen variables; los tres contextos donde
   aparece un nombre de marca las consumen. Como las variables CSS se heredan,
   la clase puede estar en el propio elemento o en un ancestro. */
:root {
    --ff-grotesk:  "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ff-geo:      Futura, "Century Gothic", "Avenir Next", "Trebuchet MS", sans-serif;
    --ff-humanist: Optima, "Gill Sans", "Gill Sans MT", Candara, "Trebuchet MS", sans-serif;
    --ff-serif:    Georgia, "Times New Roman", Times, serif;
}

.f-grotesk  { --ff: var(--ff-grotesk);  --fs: normal; }
.f-geo      { --ff: var(--ff-geo);      --fs: normal; }
.f-humanist { --ff: var(--ff-humanist); --fs: normal; }
.f-serif    { --ff: var(--ff-serif);    --fs: normal; }
.f-italic   { --ff: var(--ff-grotesk);  --fs: italic; }

.t-tight    { --ls: -.025em; }
.t-normal   { --ls: -.005em; }
.t-wide     { --ls: .14em; }

.marca-wordmark,
span.nombre-marca,
.marca-inline {
    font-family: var(--ff, inherit);
    font-style: var(--fs, normal);
    font-weight: var(--w, 700);
    letter-spacing: var(--ls, normal);
    color: var(--c, inherit);
}

/* El nombre dentro del titular "SERVICIO TÉCNICO ... EN ...".
   Sin recuadro: el fondo de esta sección ya es claro. */
.marca-inline {
    text-transform: none;
    white-space: nowrap;
}

/* A cuerpo de titular, el tracking abierto de marcas como BOSCH o SIEMENS
   separa demasiado: se modera en los dos titulares. */
span.nombre-marca.t-wide,
.marca-inline.t-wide { --ls: .05em; }

/* El peso de la ficha tiene que ganar a dos reglas heredadas mas especificas:
   .nivel-section-title span (500) en el titular de seccion y .small-title
   span.nombre-marca (800) en el hero. Sin esto, Balay salia a 500 en el
   titular y a 800 en el hero en vez de a su 700. */
section.seleccion .nivel-section-title span .marca-inline,
.nivel-hero-overlay .small-title span.nombre-marca {
    font-weight: var(--w, 700);
}
/* === identidad-marca:fin === */

/* === cta-telefono:inicio === */
/* Botón de teléfono de la cabecera. El icono iba con d-block d-md-none, asi
   que en escritorio no se veia; ahora es un SVG en linea siempre visible que
   hereda el color, sin peticiones extra. */
header .comp-cta-phone.cta-pro,
.niveles-footer .comp-cta-phone.cta-pro {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 8px 20px 8px 11px;
    border-radius: 12px;
    text-transform: none;
    text-decoration: none;
    line-height: 1.1;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .13);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

header .comp-cta-phone.cta-pro:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(16, 24, 40, .2);
    filter: brightness(1.04);
}

header .comp-cta-phone.cta-pro:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .8);
    outline-offset: 2px;
}

/* El icono, en un disco del propio color del texto al 15 %: funciona igual
   sobre la cabecera blanca y sobre la de color. */
.cta-pro .cta-ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 16%, transparent);
}

.cta-pro .cta-ico svg {
    width: 19px;
    height: 19px;
    /* El auricular del icono mira a la derecha; se voltea como el original. */
    transform: scaleX(-1);
}

.cta-pro .cta-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
}

.cta-pro .cta-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .085em;
    text-transform: uppercase;
    /* .78 dejaba el contraste en 4,24 sobre el azul del botón, por debajo del
       4,5 que pide la norma para texto de este tamaño. Con .85 sube a 4,73 y
       la etiqueta se sigue leyendo como secundaria frente al número. */
    opacity: .85;
}

.cta-pro .cta-num {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .005em;
    white-space: nowrap;
}

/* El botón de la home y de las landings no lleva color de marca inyectado:
   queda blanco con el naranja corporativo, que sobre blanco se queda en 3,6.
   El número lo salva por tamaño (19 px y peso 800 cuentan como texto grande,
   que pide 3,0), pero la etiqueta, a 10,5 px, necesita 4,5. Se le da un tono
   más oscuro y se le quita la atenuación, que la acercaba aún más al fondo.

   Solo mientras el botón sea blanco. La primera versión de esta regla no
   distinguía estado, y en cuanto el header pasa a sólido el botón se vuelve
   naranja: la etiqueta se quedaba en #BB5927 sobre ese naranja, es decir en
   1,27:1, prácticamente invisible. */
header.transparent .comp-cta-phone.cta-pro:not([style*="background"]) .cta-label,
header:not(.solid):not(.transparent) .comp-cta-phone.cta-pro:not([style*="background"]) .cta-label {
    color: var(--cta-etiqueta, #BB5927);
    opacity: 1;
}

/* Header sólido: el botón pasa a naranja y el texto va en blanco. El acento
   corporativo (#D7662D) deja el blanco en 3,60:1, suficiente para el número
   pero no para la etiqueta de 10,5 px. Se oscurece lo justo —#B85724, el
   mismo tono— hasta 4,74:1, que ya cumple para los dos. */
header.solid .comp-cta-phone.cta-pro:not([style*="background"]) {
    background-color: var(--cta-solido, #B85724);
}

header.solid .comp-cta-phone.cta-pro:not([style*="background"]) .cta-label,
header.solid .comp-cta-phone.cta-pro:not([style*="background"]) .cta-num {
    color: var(--nivel-white, #fff);
    opacity: 1;
}

@media (max-width: 575px) {
    header .comp-cta-phone.cta-pro { padding: 6px 14px 6px 8px; gap: 8px; }
    .cta-pro .cta-ico { width: 30px; height: 30px; }
    .cta-pro .cta-ico svg { width: 16px; height: 16px; }
    .cta-pro .cta-label { font-size: 9.5px; letter-spacing: .06em; }
    .cta-pro .cta-num { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    header .comp-cta-phone.cta-pro { transition: none; }
    header .comp-cta-phone.cta-pro:hover { transform: none; }
}
/* === cta-telefono:fin === */

/* === hero-producto:inicio === */
/* Hero de las páginas de producto. --c es el color del fabricante. */
.hero-pro .hero-titulo {
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.12;
    color: var(--nivel-text-dark);
    text-transform: none;
    margin-bottom: 18px;
}

.hero-pro .hero-divider {
    width: 64px;
    height: 5px;
    border-radius: 3px;
    background: var(--c, var(--nivel-accent));
    margin: 0 0 22px;
}

.hero-pro .hero-intro {
    font-size: 18.5px !important;
    line-height: 1.55;
    color: #5F6368;
    text-transform: none;
    margin-bottom: 22px;
}

.hero-pro .hero-ventajas { list-style: none; padding: 0; margin: 0 0 26px; }

.hero-pro .hero-ventajas li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 11px;
    font-size: 17px;
    line-height: 1.45;
    color: var(--nivel-text-dark);
}

/* Los checks eran de FontAwesome, que va diferida: salian en blanco al
   principio. En SVG se dibujan con el primer pintado. */
.hero-pro .hero-check {
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    margin-top: 1px;
    fill: var(--c, var(--nivel-accent));
}

.hero-pro .hero-oferta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px 22px;
    border: 1.5px solid var(--c, var(--nivel-accent));
    border-radius: 16px;
    background: color-mix(in srgb, var(--c, var(--nivel-accent)) 5%, #fff);
}

.hero-pro .hero-horario {
    flex: 1 1 250px;
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    text-align: left;
    text-transform: none;
    color: var(--nivel-text-dark);
}

.hero-pro .hero-horario strong { color: var(--c, var(--nivel-accent)); font-weight: 800; }
.hero-pro .hero-horario .hero-asterisco { color: #6A6E73; font-weight: 400; }

.hero-pro .hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex: 0 0 auto;
    padding: 11px 22px 11px 13px;
    border-radius: 12px;
    background: var(--c, var(--nivel-accent));
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .14);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.hero-pro .hero-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(16, 24, 40, .2);
    filter: brightness(1.05);
}

.hero-pro .hero-cta-ico {
    width: 19px;
    height: 19px;
    transform: scaleX(-1);
    flex: 0 0 auto;
}

.hero-pro .hero-cta-txt { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.hero-pro .hero-cta-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .085em;
    text-transform: uppercase;
    opacity: .85;
}
.hero-pro .hero-cta-num { font-size: 20px; font-weight: 800; white-space: nowrap; }

.hero-pro .hero-cita {
    margin: 14px 2px 0;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    text-transform: none;
    color: var(--c, var(--nivel-accent));
}

/* Con el bloque de la oferta subido bajo el titular, el texto de introducción
   pasa a ir detrás de la nota del asterisco y quedaba pegado a ella, sin
   respiro entre dos textos de tamaños muy distintos. */
.hero-pro .hero-nota + .hero-intro {
    margin-top: 26px;
}

.hero-pro .hero-nota {
    margin: 5px 2px 0;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    text-transform: none;
    color: #6A6E73;
}

@media (max-width: 767px) {
    .hero-pro .hero-oferta { padding: 18px; }
    .hero-pro .hero-cta { width: 100%; justify-content: center; }
    .hero-pro .hero-intro { font-size: 16.5px !important; }
    .hero-pro .hero-ventajas li { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-pro .hero-cta { transition: none; }
    .hero-pro .hero-cta:hover { transform: none; }
}
/* === hero-producto:fin === */

/* === cabecera-producto:inicio === */
/* Cabecera de las páginas de producto. El header de producto no lleva clase;
   las landings usan .niveles-header y quedan fuera de estos selectores.

   Tenía dos versiones distintas según el dispositivo: por debajo de 768 px un
   reclamo con el teléfono ("Pulsa en el teléfono y llama GRATIS ahora") y por
   encima una fila con el logo, cada una oculta en el otro tamaño. Unificadas
   en una sola —logo y botón, igual en todos los dispositivos—, quedan por
   corregir los estilos que daban por supuesta la versión antigua. */

/* Centrado vertical: clasico.css reparte el relleno de .bed-logo como 8 px
   arriba y 16 abajo sobre una altura fija de 70 px. align-items:center centra
   dentro de la caja de contenido, que esa diferencia sube 4 px, así que el
   botón y el logo no caían en el centro de la barra. */
header:not(.niveles-header) .bed-logo {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* El logo llevaba además su propio padding-top, que lo descentraba respecto
   al botón. */
header:not(.niveles-header) .bed-logo img {
    padding-top: 0 !important;
}

@media screen and (max-width: 768px) {
    /* Sin el reclamo, el hueco de 180 px que clasico.css le reservaba estiraba
       la barra y recortaba el logo por abajo. */
    header:not(.niveles-header) .bed-logo {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        justify-content: space-between !important;
        /* En pantallas estrechas logo y botón no caben en una línea: se
           apilan centrados en vez de desbordar. */
        flex-wrap: wrap;
        gap: 8px;
        row-gap: 10px;
        height: auto;
    }
}

@media screen and (max-width: 414px) {
    header:not(.niveles-header) .bed-logo {
        justify-content: center !important;
    }
}
/* === cabecera-producto:fin === */

/* === logo-marca:inicio === */
/* El logo de la marca ya no va anclado a la ventana: llevaba .fixed-mobile
   por debajo de 414 px y .fixed-desktop por encima de 992 px, con el tramo de
   tablet sin ninguna de las dos, de modo que se comportaba de tres maneras
   distintas segun el dispositivo. Ahora fluye con la pagina en todos los
   anchos, que es como ya se veia en tablet.

   En escritorio y tablet el espaciado nativo (pt-5 y mt-md-5) ya deja el logo
   holgado bajo la cabecera y no hay nada que corregir. En movil, en cambio,
   clasico.css da a .bed-logo un padding-top de 180 px: era el hueco que
   reservaba a la cabecera alta con el reclamo, que ya no existe, y ahora deja
   un vacio enorme. Se ajusta a la altura real de la cabecera mas un margen.

   El selector de hermano adyacente distingue este logo del que va dentro
   del <header>.
   Se usa "main >" y no "header +": al envolver el contenido en <main> para
   dar a la pagina un punto de referencia principal, el <header> dejo de ser
   hermano de estas secciones y los selectores basados en esa adyacencia
   dejaron de aplicar. */
@media screen and (max-width: 768px) {
    main > section.container .bed-logo {
        padding-top: 96px !important;
    }
}

@media screen and (max-width: 414px) {
    /* Por debajo de 415 px la cabecera apila logo y boton, y mide mas. */
    main > section.container .bed-logo {
        padding-top: 146px !important;
    }
}
/* === logo-marca:fin === */

/* === espaciado-producto:inicio === */
/* Separación entre la cabecera, el logo de la marca y el titular del hero.

   Se sumaban varias separaciones, cada una activa a un ancho distinto: el
   margen y el relleno superiores del wrapper, el margen del .container que
   lleva dentro y el del propio claim. El resultado no era una medida sino
   cuatro: 160 px en escritorio, 94 en tablet, 48 en móvil grande y 250 en
   móvil pequeño —este último era el hueco que se reservaba al logo cuando iba
   anclado con position:fixed, y al pasarlo al flujo quedó como un vacío.

   Aquí se anulan las separaciones apiladas y se deja una sola, proporcional
   al ancho. Hay dos casos, porque 43 de las 110 marcas no tienen imagen de
   logo y en sus páginas esa sección se retira por vacía: */

/* Caso 1: la marca tiene logo. La sección del logo va delante y ya separa el
   contenido de la cabecera fija, así que basta la separación propia. */
main > section.container + section.wrapper {
    margin-top: 0 !important;
    padding-top: 56px !important;
}

/* Caso 2: la marca no tiene logo. El wrapper queda pegado al <header>, que es
   fijo y no reserva espacio propio, así que aquí el relleno tiene que
   absorber además la altura de la cabecera (70 px, 72 en móvil y 122 cuando
   apila logo y botón por debajo de 415 px). */
main > section.wrapper:first-of-type {
    margin-top: 0 !important;
    padding-top: 126px !important;
}

main > section.container + section.wrapper .container.mt-sm-5,
main > section.container + section.wrapper .mod-claim,
main > section.wrapper:first-of-type .container.mt-sm-5,
main > section.wrapper:first-of-type .mod-claim {
    margin-top: 0 !important;
}

/* Entre 415 y 575 px clasico.css le da al claim un padding de 20 px por los
   cuatro lados, que ahí sumaba una cuarta separación. Se anula solo el
   superior: el lateral es parte del diseño del hero. */
main > section.container + section.wrapper .mod-claim,
main > section.wrapper:first-of-type .mod-claim {
    padding-top: 0 !important;
}

/* La columna crece con el texto de la derecha, y la foto es cuadrada: sobraban
   entre 95 y 146 px. Centrarla repartía ese sobrante arriba y abajo, pero
   entonces la imagen arrancaba por debajo del titular. Estirándola a la altura
   de la columna, foto y texto empiezan y terminan a la vez, sin huecos.

   object-fit: cover mantiene la proporción y recorta lo que sobra por los
   lados —alrededor de un 10 % a cada lado—, en vez de deformar la escena.

   El :not(.mt-lg-5) distingue las páginas que ya tienen foto propia: a esas se
   les quitó ese margen al alinearlas, y las que conservan la imagen genérica
   lo mantienen y no entran aquí. Solo desde 992 px: por debajo las columnas se
   apilan y la imagen ya ocupa su sitio. */
@media screen and (min-width: 992px) {
    main > section.container + section.wrapper .row > .col-lg-6.order-lg-0:not(.mt-lg-5),
    main > section.wrapper:first-of-type .row > .col-lg-6.order-lg-0:not(.mt-lg-5) {
        display: flex;
        flex-direction: column;
    }

    main > section.container + section.wrapper .row > .col-lg-6.order-lg-0:not(.mt-lg-5) > img,
    main > section.wrapper:first-of-type .row > .col-lg-6.order-lg-0:not(.mt-lg-5) > img,
    main > section.container + section.wrapper .row > .col-lg-6.order-lg-0:not(.mt-lg-5) > picture,
    main > section.wrapper:first-of-type .row > .col-lg-6.order-lg-0:not(.mt-lg-5) > picture {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    /* Con <picture> el que estira es el contenedor; la imagen de dentro tiene
       que rellenarlo, o se queda a su tamaño natural y deja hueco abajo. */
    main > section.container + section.wrapper .row > .col-lg-6.order-lg-0:not(.mt-lg-5) > picture > img,
    main > section.wrapper:first-of-type .row > .col-lg-6.order-lg-0:not(.mt-lg-5) > picture > img {
        display: block;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

@media screen and (max-width: 991px) {
    main > section.container + section.wrapper { padding-top: 44px !important; }
    main > section.wrapper:first-of-type { padding-top: 116px !important; }
}

@media screen and (max-width: 575px) {
    main > section.container + section.wrapper { padding-top: 32px !important; }
    main > section.wrapper:first-of-type { padding-top: 104px !important; }
}

@media screen and (max-width: 414px) {
    main > section.wrapper:first-of-type { padding-top: 154px !important; }
}
/* === espaciado-producto:fin === */

/* === imagenes-modernas:inicio === */
/* Fondo del hero: es el elemento LCP de la home.

   Servia la misma imagen de 1600 px a todos los dispositivos. En un movil de
   390 px eso son 1,2 Mpx que descargar y, sobre todo, descodificar con una CPU
   mucho mas lenta: el LCP se iba a 7 s aunque el primer pintado llegase a 1,3.
   Ahora cada tramo recibe su tamano; en movil son 0,3 Mpx, cuatro veces menos.

   La declaracion en JPG de mas arriba se queda como respaldo: un navegador que
   no entienda image-set() con type() ignora este bloque entero y sigue viendo
   el fondo, en vez de quedarse sin el. Los que si lo entienden descargan un
   unico fichero, nunca varios.

   Los cortes de ancho son los mismos que los de <link rel=preload> en el HTML.
   Si se cambian aqui, hay que cambiarlos alli: si no coinciden, el navegador
   precarga una imagen y luego descarga otra distinta. */
@supports (background-image: image-set(url("/images/x.webp") type("image/webp"))) {
    #nivel-0.nivel-hero {
        background-image:
            linear-gradient(90deg, rgba(51, 51, 51, 0.80) 40.16%, rgba(51, 51, 51, 0.00) 100%),
            image-set(url("/images/hero-bg-industrial.avif") type("image/avif"),
                      url("/images/hero-bg-industrial.webp") type("image/webp"),
                      url("/images/hero-bg-industrial.jpg") type("image/jpeg"));
    }

    @media (max-width: 600px) {
        #nivel-0.nivel-hero {
            background-image:
                linear-gradient(90deg, rgba(51, 51, 51, 0.80) 40.16%, rgba(51, 51, 51, 0.00) 100%),
                image-set(url("/images/hero-bg-industrial-800.avif") type("image/avif"),
                      url("/images/hero-bg-industrial-800.webp") type("image/webp"),
                      url("/images/hero-bg-industrial.jpg") type("image/jpeg"));
        }
    }

    @media (min-width: 601px) and (max-width: 1100px) {
        #nivel-0.nivel-hero {
            background-image:
                linear-gradient(90deg, rgba(51, 51, 51, 0.80) 40.16%, rgba(51, 51, 51, 0.00) 100%),
                image-set(url("/images/hero-bg-industrial-1200.avif") type("image/avif"),
                      url("/images/hero-bg-industrial-1200.webp") type("image/webp"),
                      url("/images/hero-bg-industrial.jpg") type("image/jpeg"));
        }
    }
}
/* === imagenes-modernas:fin === */

/* === iconos-svg:inicio === */
/* Iconos en línea que sustituyen a FontAwesome en la home. Heredan el color
   y el tamaño del texto, como hacía la fuente de iconos. */
.ico-check,
.ico-phone {
    display: inline-block;
    vertical-align: -0.125em;
}
/* === iconos-svg:fin === */

/* === listado-enlazado:inicio === */
/* Las tarjetas del listado pasan de <div> a <a>: hay que quitarles el aspecto
   de enlace y devolverles el del bloque que eran, mas la respuesta al pasar
   por encima que ahora corresponde a algo pulsable. */
a.electro-box {
    text-decoration: none;
    color: inherit;
    transition: transform .16s ease, box-shadow .16s ease;
}

/* La imagen y el texto eran inline-block alineados por arriba, y como no
   miden lo mismo (80 px la imagen, 60 u 87 el texto segun ocupe una linea o
   dos) quedaban descuadrados entre si: hasta 10 px en unas tarjetas y -3 en
   otras. En fila y centrados, la imagen y su rotulo quedan a la misma altura
   sea cual sea el largo del nombre. */
.electro-box {
    display: flex;
    align-items: center;
    gap: 5%;
}

.electro-box .electro-img {
    flex: 0 0 25%;
    width: 25%;
    margin-right: 0;
}

.electro-box .electro-text {
    flex: 1 1 auto;
    width: auto;
}

a.electro-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 24, 40, .12);
}

a.electro-box:focus-visible {
    outline: 3px solid var(--nivel-accent, #0065b7);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    a.electro-box { transition: none; }
    a.electro-box:hover { transform: none; }
}

/* El hueco de la imagen tenía ancho pero no alto, así que cada fichero
   imponía su proporción: las fotos salían a 80x80, los iconos a 48x48 y
   alguno a 48x52. En una cuadrícula eso se ve desigual.

   Ahora el hueco es cuadrado y la imagen lo llena centrada, sea del tamaño
   que sea el original. */
.electro-box .electro-img {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
}

.electro-box .electro-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Los iconos son dibujos planos, no fotos: recortarlos los dejaría a medias,
   así que se muestran enteros con aire alrededor. */
.electro-box .electro-img img[src$=".svg"] {
    object-fit: contain;
    padding: 16%;
}
/* === listado-enlazado:fin === */

/* === logos-marca:inicio === */
/* Los logos nuevos miden 640x180: son los pixeles del fichero, no el tamano
   al que se ven. Sin esta regla el navegador usaria el atributo width y el
   logo saldria a 640 px, mas del doble de lo que ocupaba.

   Mostrado a 261 px con 640 de fichero quedan 2,45x de densidad, suficiente
   para pantallas de doble y triple densidad. Los atributos width/height se
   quedan como estan porque son los que reservan el hueco y evitan que el
   texto salte mientras carga. */
img.logo {
    width: 261px;
    height: auto;
    max-width: 100%;
}

@media screen and (max-width: 768px) {
    img.logo { width: 160px; }
}
/* === logos-marca:fin === */

/* === oferta-dividida:inicio === */
/* El desplazamiento gratuito sale del recuadro: dentro competía con la
   promesa de plazo, que es la que sostiene la llamada al teléfono. Fuera
   sigue leyéndose, pero sin restarle peso. */
.hero-pro .hero-desplazamiento {
    margin: 14px 2px 0;
    font-size: 15px;
    line-height: 1.45;
    color: #3C4043;
}

/* La misma variable que usan los destacados de dentro del recuadro: --c es el
   color de la marca de la página. Con --nivel-accent salia el naranja del
   sitio y desentonaba al lado del azul de Beko. */
.hero-pro .hero-desplazamiento strong {
    color: var(--c, var(--nivel-accent));
    font-weight: 700;
}
/* === oferta-dividida:fin === */

/* === tarjetas-marca:inicio === */
/* Foto de producto en las tarjetas del listado de una landing de marca.

   El icono que habia mide 24 px y va en escala de grises, que es lo que le
   corresponde a un pictograma. Una foto no: se muestra a 46 px, que es el
   alto libre de la tarjeta (78 menos los 16 de padding por lado), asi que
   entra sin cambiar su altura, y en color.

   El hueco es cuadrado y la foto lo llena con cover, como en el listado de
   las paginas de producto, para que las dos rejillas se vean iguales. */
.nivel-ed-card .nivel-ed-foto {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 6px;
}

/* El icono se queda dibujado a 24 px, pero ocupando el mismo hueco de 46 que
   la foto. Si no, en una rejilla donde unas tarjetas llevan foto y otras
   icono, el texto de estas ultimas empieza 22 px antes y las columnas se ven
   descuadradas. El padding centra el pictograma dentro del hueco. */
.nivel-ed-card .nivel-ed-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    padding: 11px;
    box-sizing: border-box;
}

@media (max-width: 575px) {
    .nivel-ed-card .nivel-ed-foto,
    .nivel-ed-card .nivel-ed-icon { width: 40px; height: 40px; }
    .nivel-ed-card .nivel-ed-icon { padding: 8px; }
}
/* === tarjetas-marca:fin === */

/* Cabecera de las marcas de hosteleria.
   El fondo del nivel 2 es una cocina domestica con una lavadora, que a un
   restaurante no le dice nada. Estas landings llevan la clase
   .hero-industrial y cambian la foto, sin tocar el degradado ni la altura:
   solo la imagen. Va DESPUES de las reglas de #nivel-2 para ganarles, y
   repite la cascada completa —image-set y los tres cortes por ancho— porque
   si no, en las pantallas pequeñas volveria a salir la foto domestica. */
#nivel-2.nivel-hero.hero-industrial {
    background-image: linear-gradient(270deg, rgba(28, 28, 30, 0.82) 42%, rgba(28, 28, 30, 0.10) 100%), var(--cabecera, url("/images/cabeceras/industrial.svg?v=d4650601"));
    background-position: 0 0, center;
    background-size: auto, cover;
    background-repeat: no-repeat;
}

@supports (background-image: image-set(url("/images/x.webp") type("image/webp"))) {
    #nivel-2.nivel-hero.hero-industrial {
        background-image: linear-gradient(270deg, rgba(28, 28, 30, 0.82) 42%, rgba(28, 28, 30, 0.10) 100%), var(--cabecera, url("/images/cabeceras/industrial.svg?v=d4650601"));
    }
    @media (max-width: 1200px) {
        #nivel-2.nivel-hero.hero-industrial {
            background-image: linear-gradient(270deg, rgba(28, 28, 30, 0.82) 42%, rgba(28, 28, 30, 0.10) 100%), var(--cabecera, url("/images/cabeceras/industrial.svg?v=d4650601"));
        }
    }
    @media (max-width: 800px) {
        #nivel-2.nivel-hero.hero-industrial {
            background-image: linear-gradient(#00000099, #00000099), var(--cabecera, url("/images/cabeceras/industrial.svg?v=d4650601"));
        }
    }
}

@media screen and (max-width: 767px) {
    #nivel-2.nivel-hero.hero-industrial {
        background-image: linear-gradient(#00000099, #00000099), var(--cabecera, url("/images/cabeceras/industrial.svg?v=d4650601"));
    }
}

/* PRUEBA — hero industrial: texto a la derecha y color de la marca.
   Se quita entera con:  python3 scripts/hero_industrial.py --quitar

   El texto se va a la derecha porque el tecnico de la foto trabaja en el lado
   izquierdo y el degradado se lo comia. Con la sombra invertida, la mitad
   izquierda queda casi limpia y se ve lo que esta haciendo.

   El titular deja el naranja del sitio y toma el color de cada fabricante,
   que llega en --titular. No es el color tal cual: once de las veintitres
   marcas industriales son azules marinos o rojos oscuros que sobre una foto
   oscurecida no se leen, asi que el script los aclara conservando el tono
   hasta que contrastan. Los que ya son claros no se tocan. */
#nivel-2.hero-industrial .row {
    justify-content: flex-end;
}

#nivel-2.hero-industrial .col-lg-7 {
    text-align: right;
}

#nivel-2.hero-industrial .nivel-accent {
    color: var(--titular, var(--nivel-accent));
}

#nivel-2.hero-industrial .nivel-hero-overlay h1,
#nivel-2.hero-industrial .pretitulo {
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

@media (max-width: 991px) {
    /* En movil la columna ocupa todo el ancho y el degradado es plano: ahi el
       texto a la derecha no aporta nada y se lee peor. */
    #nivel-2.hero-industrial .col-lg-7 { text-align: left; }
}

/* === color-marca-wcag:inicio === */
/* Generado por scripts/color_marca_wcag.py. No editar a mano. */

/* El color de cada marca, ya con 4,5:1 sobre blanco. Vive aqui y no
   en cada pagina: el <body> solo lleva su data-marca.

   --marca-hover es ese mismo color un escalon mas oscuro, para el
   :hover del boton de telefono. Sin el, la regla del hover caia en
   --nivel-accent-hover y el boton de cualquier marca se volvia
   naranja al pasar por encima. */
[data-marca="aeg"]{--marca-ed:#E3000F;--marca-hover:#B6000C}
[data-marca="airwell"]{--marca-ed:#005CAD;--marca-hover:#004A8A}
[data-marca="amana"]{--marca-ed:#EC0A2E;--marca-hover:#BD0825}
[data-marca="angelo-po"]{--marca-ed:#E2001A;--marca-hover:#B50015}
[data-marca="arevalo"]{--marca-ed:#1C7FA7;--marca-hover:#166686}
[data-marca="ariston"]{--marca-ed:#C41230;--marca-hover:#9D0E26}
[data-marca="asdor"]{--marca-ed:#B16311;--marca-hover:#8E4F0E}
[data-marca="aspes"]{--marca-ed:#3E8600;--marca-hover:#326B00}
[data-marca="balay"]{--marca-ed:#0065B7;--marca-hover:#005192}
[data-marca="bauknecht"]{--marca-ed:#12347C;--marca-hover:#0E2A63}
[data-marca="baxiroca"]{--marca-ed:#005094;--marca-hover:#004076}
[data-marca="beko"]{--marca-ed:#2A7BB7;--marca-hover:#226292}
[data-marca="beretta"]{--marca-ed:#737C09;--marca-hover:#5C6307}
[data-marca="biasi"]{--marca-ed:#00519E;--marca-hover:#00417E}
[data-marca="bluesky"]{--marca-ed:#0070BA;--marca-hover:#005A95}
[data-marca="bosch"]{--marca-ed:#E20015;--marca-hover:#B50011}
[data-marca="bru"]{--marca-ed:#2E2E2E;--marca-hover:#595959}
[data-marca="buderus"]{--marca-ed:#0066B3;--marca-hover:#00528F}
[data-marca="candy"]{--marca-ed:#007DB8;--marca-hover:#006493}
[data-marca="carrier"]{--marca-ed:#003DA6;--marca-hover:#003185}
[data-marca="cata"]{--marca-ed:#E2001A;--marca-hover:#B50015}
[data-marca="chaffoteaux"]{--marca-ed:#003078;--marca-hover:#002660}
[data-marca="cointra"]{--marca-ed:#BF5901;--marca-hover:#994701}
[data-marca="comersa"]{--marca-ed:#1C659E;--marca-hover:#16517E}
[data-marca="corbero"]{--marca-ed:#EE000B;--marca-hover:#BE0009}
[data-marca="crolls"]{--marca-ed:#0044BF;--marca-hover:#003699}
[data-marca="daewoo"]{--marca-ed:#00599F;--marca-hover:#00477F}
[data-marca="daikin"]{--marca-ed:#007DBA;--marca-hover:#006495}
[data-marca="daitsu"]{--marca-ed:#008391;--marca-hover:#006974}
[data-marca="de-dietrich"]{--marca-ed:#003D88;--marca-hover:#00316D}
[data-marca="delonghi"]{--marca-ed:#01509F;--marca-hover:#01407F}
[data-marca="domusa"]{--marca-ed:#004A94;--marca-hover:#003B76}
[data-marca="ecron"]{--marca-ed:#C8102E;--marca-hover:#A00D25}
[data-marca="edesa"]{--marca-ed:#007EB4;--marca-hover:#006590}
[data-marca="electra"]{--marca-ed:#BA5C00;--marca-hover:#954A00}
[data-marca="electrolux"]{--marca-ed:#041E42;--marca-hover:#083D86}
[data-marca="eurast"]{--marca-ed:#E82005;--marca-hover:#BA1A04}
[data-marca="eurofred"]{--marca-ed:#005CA9;--marca-hover:#004A87}
[data-marca="eurotech"]{--marca-ed:#E82005;--marca-hover:#BA1A04}
[data-marca="fagor"]{--marca-ed:#EE0000;--marca-hover:#BE0000}
[data-marca="fer"]{--marca-ed:#EE0000;--marca-hover:#BE0000}
[data-marca="ferroli"]{--marca-ed:#CC4E00;--marca-hover:#A33E00}
[data-marca="firstline"]{--marca-ed:#000097;--marca-hover:#000079}
[data-marca="fleck"]{--marca-ed:#0072BB;--marca-hover:#005B96}
[data-marca="flonasa"]{--marca-ed:#1C659E;--marca-hover:#16517E}
[data-marca="franke"]{--marca-ed:#E12E40;--marca-hover:#BE1B2C}
[data-marca="frigicoll"]{--marca-ed:#317BB5;--marca-hover:#276291}
[data-marca="fujitsu"]{--marca-ed:#EE0109;--marca-hover:#BE0107}
[data-marca="gaggenau"]{--marca-ed:#2E2E2E;--marca-hover:#595959}
[data-marca="generalelectric"]{--marca-ed:#0073BD;--marca-hover:#005C97}
[data-marca="haier"]{--marca-ed:#004EA2;--marca-hover:#003E82}
[data-marca="hermann"]{--marca-ed:#D2232A;--marca-hover:#A81C22}
[data-marca="hitachi"]{--marca-ed:#CC0000;--marca-hover:#A30000}
[data-marca="hitecsa"]{--marca-ed:#E62708;--marca-hover:#B81F06}
[data-marca="hiyasu"]{--marca-ed:#00857B;--marca-hover:#006A62}
[data-marca="hoover"]{--marca-ed:#E4002B;--marca-hover:#B60022}
[data-marca="ignis"]{--marca-ed:#2E2E2E;--marca-hover:#595959}
[data-marca="indesit"]{--marca-ed:#005EB8;--marca-hover:#004B93}
[data-marca="infrico"]{--marca-ed:#317BB5;--marca-hover:#276291}
[data-marca="jemi"]{--marca-ed:#B41014;--marca-hover:#900D10}
[data-marca="johnson"]{--marca-ed:#EE010E;--marca-hover:#BE010B}
[data-marca="junkers"]{--marca-ed:#014F9C;--marca-hover:#013F7D}
[data-marca="lainox"]{--marca-ed:#014F9C;--marca-hover:#013F7D}
[data-marca="lennox"]{--marca-ed:#D22630;--marca-hover:#A81E26}
[data-marca="lg"]{--marca-ed:#A50034;--marca-hover:#84002A}
[data-marca="liebherr"]{--marca-ed:#284565;--marca-hover:#203751}
[data-marca="linea-blanca"]{--marca-ed:#0E5C99;--marca-hover:#0B4A7A}
[data-marca="lotus"]{--marca-ed:#B4610F;--marca-hover:#904E0C}
[data-marca="lynx"]{--marca-ed:#D74100;--marca-hover:#AC3400}
[data-marca="mainho"]{--marca-ed:#0A8A17;--marca-hover:#086E12}
[data-marca="manaut"]{--marca-ed:#9D6D21;--marca-hover:#7E571A}
[data-marca="mareno"]{--marca-ed:#005FAF;--marca-hover:#004C8C}
[data-marca="mcm"]{--marca-ed:#2339A5;--marca-hover:#1C2E84}
[data-marca="mepamsa"]{--marca-ed:#D71920;--marca-hover:#AC141A}
[data-marca="miele"]{--marca-ed:#8C0B2C;--marca-hover:#700923}
[data-marca="mitsubishi"]{--marca-ed:#E60012;--marca-hover:#B8000E}
[data-marca="movilfrit"]{--marca-ed:#E3292C;--marca-hover:#BE191B}
[data-marca="neckar"]{--marca-ed:#0061B2;--marca-hover:#004E8E}
[data-marca="neff"]{--marca-ed:#1A1A1A;--marca-hover:#393939}
[data-marca="negarra"]{--marca-ed:#0F5FA6;--marca-hover:#0C4C85}
[data-marca="newpol"]{--marca-ed:#094478;--marca-hover:#073660}
[data-marca="orbegozo"]{--marca-ed:#003681;--marca-hover:#002B67}
[data-marca="otsein"]{--marca-ed:#1764A1;--marca-hover:#125081}
[data-marca="panasonic"]{--marca-ed:#0033A0;--marca-hover:#002980}
[data-marca="pavailler"]{--marca-ed:#0F4C81;--marca-hover:#0C3D67}
[data-marca="quality-espresso"]{--marca-ed:#AF6308;--marca-hover:#8C4F06}
[data-marca="rational"]{--marca-ed:#003C71;--marca-hover:#00305A}
[data-marca="repagas"]{--marca-ed:#00438F;--marca-hover:#003672}
[data-marca="roca"]{--marca-ed:#0075BE;--marca-hover:#005E98}
[data-marca="romag"]{--marca-ed:#9F2201;--marca-hover:#7F1B01}
[data-marca="rommer"]{--marca-ed:#EE0000;--marca-hover:#BE0000}
[data-marca="saivod"]{--marca-ed:#56368B;--marca-hover:#452B6F}
[data-marca="sammic"]{--marca-ed:#CD3911;--marca-hover:#A42E0E}
[data-marca="samsung"]{--marca-ed:#1428A0;--marca-hover:#102080}
[data-marca="sat"]{--marca-ed:#EC101A;--marca-hover:#BD0D15}
[data-marca="saunier-duval"]{--marca-ed:#D3203D;--marca-hover:#A91A31}
[data-marca="servei-tecnic"]{--marca-ed:#EC101A;--marca-hover:#BD0D15}
[data-marca="servicio-tecnico"]{--marca-ed:#C05824;--marca-hover:#9A461D}
[data-marca="siemens"]{--marca-ed:#008484;--marca-hover:#006A6A}
[data-marca="sime"]{--marca-ed:#D6001C;--marca-hover:#AB0016}
[data-marca="smeg"]{--marca-ed:#2E2E2E;--marca-hover:#595959}
[data-marca="subzero-wolf"]{--marca-ed:#231F20;--marca-hover:#484042}
[data-marca="tango"]{--marca-ed:#01609F;--marca-hover:#014D7F}
[data-marca="teka"]{--marca-ed:#E30613;--marca-hover:#B6050F}
[data-marca="tifell"]{--marca-ed:#005AA9;--marca-hover:#004887}
[data-marca="toshiba"]{--marca-ed:#EE0000;--marca-hover:#BE0000}
[data-marca="unox"]{--marca-ed:#E30613;--marca-hover:#B6050F}
[data-marca="vaillant"]{--marca-ed:#00875C;--marca-hover:#006C4A}
[data-marca="viessmann"]{--marca-ed:#E1310E;--marca-hover:#B4270B}
[data-marca="westinghouse"]{--marca-ed:#002D6B;--marca-hover:#0055CA}
[data-marca="whirlpool"]{--marca-ed:#947100;--marca-hover:#765A00}
[data-marca="wolf"]{--marca-ed:#E30613;--marca-hover:#B6050F}
[data-marca="zanussi"]{--marca-ed:#2E2E2E;--marca-hover:#595959}
[data-marca="zummo"]{--marca-ed:#BC5B18;--marca-hover:#964913}

/* El SVG de cada icono, para usarlo de mascara. */
.ed-abatidor{--ed-i:url("/images/eds/icons/abatidor.svg")}
.ed-aire-acondicionado{--ed-i:url("/images/eds/icons/aire-acondicionado.svg")}
.ed-asadores{--ed-i:url("/images/eds/icons/asadores.svg")}
.ed-bano-maria{--ed-i:url("/images/eds/icons/bano-maria.svg")}
.ed-barbacoas{--ed-i:url("/images/eds/icons/barbacoas.svg")}
.ed-bomba-de-calor{--ed-i:url("/images/eds/icons/bomba-de-calor.svg")}
.ed-cafeteras{--ed-i:url("/images/eds/icons/cafeteras.svg")}
.ed-calderas{--ed-i:url("/images/eds/icons/calderas.svg")}
.ed-calderas-calentadores-termos{--ed-i:url("/images/eds/icons/calderas-calentadores-termos.svg")}
.ed-calentadores{--ed-i:url("/images/eds/icons/calentadores.svg")}
.ed-calientaplatos{--ed-i:url("/images/eds/icons/calientaplatos.svg")}
.ed-campana-industrial{--ed-i:url("/images/eds/icons/campana-industrial.svg")}
.ed-campanas{--ed-i:url("/images/eds/icons/campanas.svg")}
.ed-climatizacion{--ed-i:url("/images/eds/icons/climatizacion.svg")}
.ed-climatizacion-y-calderas{--ed-i:url("/images/eds/icons/climatizacion-y-calderas.svg")}
.ed-cocina{--ed-i:url("/images/eds/icons/cocina.svg")}
.ed-conductos{--ed-i:url("/images/eds/icons/conductos.svg")}
.ed-congeladores{--ed-i:url("/images/eds/icons/congeladores.svg")}
.ed-electrodomesticos{--ed-i:url("/images/eds/icons/electrodomesticos.svg")}
.ed-electrodomesticos-climatizacion-y-calderas{--ed-i:url("/images/eds/icons/electrodomesticos-climatizacion-y-calderas.svg")}
.ed-electrodomesticos-y-calderas{--ed-i:url("/images/eds/icons/electrodomesticos-y-calderas.svg")}
.ed-electrodomesticos-y-climatizacion{--ed-i:url("/images/eds/icons/electrodomesticos-y-climatizacion.svg")}
.ed-electrodomestics{--ed-i:url("/images/eds/icons/electrodomestics.svg")}
.ed-envasadoras{--ed-i:url("/images/eds/icons/envasadoras.svg")}
.ed-expositores{--ed-i:url("/images/eds/icons/expositores.svg")}
.ed-freidoras{--ed-i:url("/images/eds/icons/freidoras.svg")}
.ed-frigorificos{--ed-i:url("/images/eds/icons/frigorificos.svg")}
.ed-hielo{--ed-i:url("/images/eds/icons/hielo.svg")}
.ed-horno-industrial{--ed-i:url("/images/eds/icons/horno-industrial.svg")}
.ed-hornos{--ed-i:url("/images/eds/icons/hornos.svg")}
.ed-hornos-combinados{--ed-i:url("/images/eds/icons/hornos-combinados.svg")}
.ed-lavado{--ed-i:url("/images/eds/icons/lavado.svg")}
.ed-lavadoras{--ed-i:url("/images/eds/icons/lavadoras.svg")}
.ed-lavadoras-secadoras{--ed-i:url("/images/eds/icons/lavadoras-secadoras.svg")}
.ed-lavavajillas{--ed-i:url("/images/eds/icons/lavavajillas.svg")}
.ed-lavavajillas-industriales{--ed-i:url("/images/eds/icons/lavavajillas-industriales.svg")}
.ed-microondas{--ed-i:url("/images/eds/icons/microondas.svg")}
.ed-placas-de-gas{--ed-i:url("/images/eds/icons/placas-de-gas.svg")}
.ed-placas-de-induccion{--ed-i:url("/images/eds/icons/placas-de-induccion.svg")}
.ed-placas-de-vitroceramica{--ed-i:url("/images/eds/icons/placas-de-vitroceramica.svg")}
.ed-planchas{--ed-i:url("/images/eds/icons/planchas.svg")}
.ed-refrigeracion{--ed-i:url("/images/eds/icons/refrigeracion.svg")}
.ed-sartenes{--ed-i:url("/images/eds/icons/sartenes.svg")}
.ed-secadoras{--ed-i:url("/images/eds/icons/secadoras.svg")}
.ed-split{--ed-i:url("/images/eds/icons/split.svg")}
.ed-televisores{--ed-i:url("/images/eds/icons/televisores.svg")}
.ed-teppanyaki{--ed-i:url("/images/eds/icons/teppanyaki.svg")}
.ed-termos{--ed-i:url("/images/eds/icons/termos.svg")}
.ed-vinotecas{--ed-i:url("/images/eds/icons/vinotecas.svg")}
.ed-zumo{--ed-i:url("/images/eds/icons/zumo.svg")}

/* El icono ya no es un <img> sino un <span> pintado con su SVG de mascara:
   un <img> pinta su propio bitmap y ninguna regla de color le llega.

   El pictograma se dibuja a su tamano —24 px en las landings, 48 en las
   paginas de producto— centrado en el hueco, que sigue siendo el mismo. Antes
   ese centrado lo daba un padding, pero un padding no encoge una mascara: se
   consigue con mask-size, que es donde ahora vive la medida. */
.nivel-ed-icon,
.electro-img .ed-icono {
    display: inline-block;
    background-color: #737373;
    -webkit-mask: var(--ed-i) center / contain no-repeat;
    mask: var(--ed-i) center / contain no-repeat;
    transition: background-color .16s ease;
    filter: none;
}

.nivel-ed-card .nivel-ed-icon {
    padding: 0;
    -webkit-mask-size: 24px 24px;
    mask-size: 24px 24px;
}

.electro-img .ed-icono {
    width: 48px;
    height: 48px;
}

/* Al pasar por encima, el icono y el texto toman el color de la marca. El
   respaldo es el acento del sitio, por si una pagina no llevara data-marca. */
.nivel-ed-card:hover .nivel-ed-icon,
.nivel-ed-card:focus-visible .nivel-ed-icon,
a.electro-box:hover .ed-icono,
a.electro-box:focus-visible .ed-icono {
    background-color: var(--marca-ed, var(--nivel-accent));
}

.nivel-ed-card:hover span,
.nivel-ed-card:hover h3,
.nivel-ed-card:focus-visible span,
.nivel-ed-card:focus-visible h3,
a.electro-box:hover .electro-text p,
a.electro-box:focus-visible .electro-text p {
    color: var(--marca-ed, var(--nivel-accent));
}

/* El foco de teclado tambien: 3:1 es lo que pide WCAG 1.4.11 para un
   indicador, y el color ya viene con 4,5:1. */
.nivel-ed-card:focus-visible,
a.electro-box:focus-visible {
    outline: 3px solid var(--marca-ed, var(--nivel-accent));
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .nivel-ed-icon,
    .electro-img .ed-icono { transition: none; }
}
/* === color-marca-wcag:fin === */