/*
Theme Name: Kadence Child
Template: kadence
*/
.site-header {
    z-index:9999!important
}
.etiqueta-superior {
    display: inline-flex;
    align-items: center;
    padding: 6px 18px;
    border: 2px solid #0018a9 !important;
    border-radius: 10px;
    color: #0018a9;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .25em;
    text-transform: uppercase;
    margin-bottom: 8px;
    line-height: 1;
    max-width: none !important; /* Anula el límite de 292px o cualquier otro */
    white-space: nowrap !important; /* Obliga al texto a quedarse en una sola línea */
}

.etiqueta-superior {
    letter-spacing: .1em !important; /* antes .25em - reduce el espaciado en desktop */
}

.etiqueta-superior::before {
    content: "—";
    color: #0018a9 !important;
    margin-right: 12px;
    font-weight: 900; 
    font-size: 14px;  
}

.etiqueta-superior,
.wp-block-kadence-advancedheading.kt-adv-heading22_0cca84-7f {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: fit-content !important;
    text-align: left !important; /* anula el center que mete Kadence */
}

@media (max-width: 600px) {
    .etiqueta-superior {
        letter-spacing: 0.05em !important; /* antes 0.12em - aún menos espacio en móvil */
        padding: 6px 12px !important;
    }
    .etiqueta-superior::before {
        margin-right: 8px !important;
        font-size: 12px !important;
    }
}
.titulo-hero {
    margin-top:0!important;
    padding-top:0!important
}
.kt-highlight {
    color:#0018a9!important;
    font-weight:800!important
}
.titulo-hero::after {
    content:"";
    display:block;
    font-weight:800!important;
    width:80px;
    height:5px;
    /* Azul de marca. Antes era #06f, uno de los tonos que se habian ido
       colando y que no es el de la marca. */
    background-color:#0018a9;
    margin-top:20px
}
.fila-hero-alineada {
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    gap:60px;
    flex-wrap:wrap
}
.fila-hero-alineada>.kt-row-column-wrap>.wp-block-kadence-column:first-child,.columna-texto-hero {
    flex:1;
    min-width:300px
}
.fila-hero-alineada>.kt-row-column-wrap>.wp-block-kadence-column:last-child,.columna-buscador-hero {
    flex:0 0 520px;
    display:flex;
    justify-content:flex-end
}
.nm-buscador {
    width:100%;
    max-width:520px;
    margin:0;
    padding:28px 28px 22px;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    color:#0f172a;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    box-shadow:0 20px 50px -20px rgb(0 0 0 / .15)
}
.nm-buscador__eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0!important;
    margin-bottom:0px!important;
    border:none;
    border-radius:0;
    color:#0018a9;
    font-size:12px;
    font-weight:700;
    letter-spacing:.1em
}

.nm-buscador__eyebrow::before {
    content:"";
    width:20px;
    height:20px;
    flex-shrink:0;
    background:#0018a9;
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 21l-4.35-4.35m0 0A7.5 7.5 0 1 0 6.15 6.15a7.5 7.5 0 0 0 10.5 10.5z" fill="none" stroke="black" stroke-width="2.4"/></svg>') no-repeat center / contain;
    mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 21l-4.35-4.35m0 0A7.5 7.5 0 1 0 6.15 6.15a7.5 7.5 0 0 0 10.5 10.5z" fill="none" stroke="black" stroke-width="2.4"/></svg>') no-repeat center / contain;
}

.nm-buscador__title {
    margin:0 0 8px!important;
    font-size:30px;
    font-weight:800;
    line-height:1.1;
    letter-spacing:.5px;
    color:#0f172a
}

.nm-buscador__accent {
    color:#0018a9
}

.nm-buscador__subtitle {
    margin:0 0 13px!important;
    color:#64748b;
    font-size:14px
}

.nm-buscador__tabs {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    background:#f1f3f6;
    border:1px solid #e9ebf0;
    border-radius:999px;
    padding:4px;
    margin-bottom:16px
}

.nm-buscador__tabs input {
    position:absolute;
    opacity:0;
    pointer-events:none
}

.nm-buscador__tabs label {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    text-align:center;
    padding:10px 8px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.05em;
    color:#8892a6;
    border-radius:999px;
    cursor:pointer;
    transition:all .2s ease
}

.nm-buscador__icon {
    width:16px;
    height:16px;
    flex-shrink:0;
    color:currentColor;
}

.nm-buscador__tabs input:checked+label {
    background:#0018a9;
    color:#ffffff;
    box-shadow:0 6px 16px -6px rgb(0 24 169 / .5)
}

.nm-buscador__fields {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:16px
}

.nm-buscador__select,.nm-buscador__input {
    width:100%;
    height:46px;
    padding:0 14px;
    border-radius:10px;
    border:1px solid #e9ebf0;
    background:#f8f9fb;
    color:#0f172a;
    font-size:14px;
    font-family:inherit;
    box-sizing:border-box
}

.nm-buscador__input::placeholder {
    color:#9aa3b2
}

.nm-buscador__submit {
    width:100%;
    height:50px;
    border:0;
    border-radius:999px;
    background:#0018a9;
    color:#fff;
    font-size:14px;
    font-weight:800;
    letter-spacing:.1em;
    cursor:pointer;
    transition:background .2s ease,transform .1s ease;
    box-shadow:0 12px 24px -10px rgb(0 24 169 / .5)
}

.nm-buscador__submit:hover {
    background:#001480
}

.nm-buscador__submit:active {
    transform:translateY(1px)
}

.nm-buscador__help {
    margin:24px 0 0 !important;
    text-align:center;
    color:#8892a6;
    font-size:13px
}

.nm-buscador__help a {
    color:#0018a9;
    font-weight:700;
    text-decoration:underline
}
.barra-estadisticas .wp-block-kadence-column:not(:last-child) {
    border-right:1px solid rgb(255 255 255 / .15)
}
@media (max-width:992px) {
    .barra-estadisticas .wp-block-kadence-column:not(:last-child) {
        border-right:none;
        border-bottom:1px solid rgb(255 255 255 / .15)
    }
}
/* 1. Contenedor principal del icono */
.icono-proceso {
    background-color: transparent !important; 
    transition: transform 0.3s ease;
    overflow: visible !important; /* ¡CLAVE 1! Permite que las sombras salgan del contenedor */
    filter: none !important; /* Limpiamos el filtro antiguo que tenías para evitar conflictos */
}

.icono-proceso:hover {
    transform: translateY(-5px);
}

/* 2. El círculo interior del icono */
.icono-proceso [class*="icon-wrap"],
.icono-proceso [class*="icon-container"],
.icono-proceso .wp-block-kadence-icon {
    background-color: #0018a9 !important;
    border: 6px solid #ffffff !important; /* Borde blanco real */
    border-radius: 50% !important; /* Aseguramos el círculo */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important; /* Sombra suave hacia abajo */
    overflow: visible !important; /* ¡CLAVE 2! Evita que el propio icono recorte la sombra */
    box-sizing: content-box !important; /* Evita que el borde encoja el icono interior */
}
.carretera-nito .kt-row-column-wrap {
    position:relative!important;
    z-index:1!important
}
.carretera-nito .kt-row-column-wrap::before {
    content:""!important;
    position:absolute!important;
    top:105px!important;
    left:5%!important;
    right:5%!important;
    height:12px!important;
    background-color:#e0e6ed!important;
    background-image:repeating-linear-gradient(90deg,#ffffff,#ffffff 15px,transparent 15px,transparent 30px)!important;
    background-size:100% 2px!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
    border-radius:10px!important;
    z-index:-2!important
}
.carretera-nito .kt-row-column-wrap::after {
    content:""!important;
    position:absolute!important;
    top:109px!important;
    width:150px!important;
    height:4px!important;
    background:linear-gradient(to right,transparent,rgb(0 70 213 / .4),rgb(255 255 255 / .9),rgb(0 70 213 / .4),transparent)!important;
    box-shadow:0 0 12px 3px rgb(0 70 213 / .3)!important;
    border-radius:10px!important;
    z-index:-1!important;
    animation:luz_corriendo 4s linear infinite!important
}
.carretera-nito {
    overflow:hidden!important
}
@keyframes luz_corriendo {
    0% {
        left:5%;
        opacity:0
    }
    10% {
        opacity:1
    }
    90% {
        opacity:1
    }
    100% {
        left:calc(95% - 150px);
        opacity:0
    }
}
.servicio-home {
    transition:all 0.4s cubic-bezier(.25,.8,.25,1)!important;
    border:1px solid transparent!important;
    border-radius:12px!important;
    cursor:pointer
}
@media (max-width:767px) {
    .carretera-nito .wp-block-kadence-column {
        padding-left:60px!important;
        text-align:left!important
    }
    .carretera-nito .kt-svg-icon-wrap,.carretera-nito .wp-block-image,.carretera-nito h2,.carretera-nito h3,.carretera-nito p {
        margin-left:0!important;
        margin-right:auto!important;
        text-align:left!important;
        justify-content:flex-start!important
    }
    .carretera-nito .kt-row-column-wrap::before {
        top:5%!important;
        bottom:5%!important;
        left:20px!important;
        right:auto!important;
        width:12px!important;
        height:auto!important;
        background-image:repeating-linear-gradient(180deg,#ffffff,#ffffff 15px,transparent 15px,transparent 30px)!important;
        background-size:2px 100%!important
    }
    .carretera-nito .kt-row-column-wrap::after {
        left:24px!important;
        width:4px!important;
        height:150px!important;
        background:linear-gradient(to bottom,transparent,rgb(0 70 213 / .4),rgb(255 255 255 / .9),rgb(0 70 213 / .4),transparent)!important;
        animation:luz_cayendo 4s linear infinite!important
    }
}
@media (max-width:767px) and (orientation:portrait) {
    .carretera-nito .kt-row-column-wrap::after {
        display:none!important
    }
}
@keyframes luz_cayendo {
    0% {
        top:5%;
        opacity:0
    }
    10% {
        opacity:1
    }
    90% {
        opacity:1
    }
    100% {
        top:calc(95% - 150px);
        opacity:0
    }
}
.servicio-home:hover {
    transform: translateY(-8px) !important;
    box-shadow: rgba(0, 85, 255, 0.7) 0px 0px 40px, rgba(0, 85, 255, 0.9) 0px 0px 15px, rgba(0, 0, 0, 0.6) 0px 15px 30px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgb(0, 85, 255) !important;
    border-image: initial !important;
}
.carrusel-marcas .kadence-blocks-gallery-item-inner {
    background-color:#ffffff!important;
    border:1px solid #e2e8f0!important;
    border-radius:8px!important
}
.carrusel-marcas img {
    object-fit:contain!important;
    padding:25px!important;
    box-sizing:border-box!important;
    width:100%!important;
    height:100%!important
}
.carrusel-marcas .splide__list,.carrusel-marcas .slick-track,.carrusel-marcas .kt-blocks-carousel-inner {
    transition-timing-function:linear!important;
    -webkit-transition-timing-function:linear!important
}
.carrusel-marcas {
    pointer-events:none!important
}
.kb-button,.kb-button-wrapper,.wp-block-button__link,.kadence-advanced-btn {
    display:inline-block!important;
    transition:all 0.3s cubic-bezier(.25,.46,.45,.94)!important
}
.kb-button:hover,.kb-button-wrapper:hover a,.wp-block-button__link:hover,.kadence-advanced-btn:hover {
    transform:translateY(-5px)!important;
    filter:brightness(1.1)
}
@media (min-width:1025px) {
    .site-footer [data-columns="5"] {
        display:grid!important;
        grid-template-columns:3fr 1fr 1fr 1fr 1fr!important;
        align-items:flex-start!important
    }
    .site-footer [data-columns="5"]>div:first-child {
        padding-right:80px!important
    }
}
.site-footer .widget {
    margin-top:0!important
}
.site-footer .widget>h2:first-child,.site-footer .widget>div>h2:first-child {
    margin-top:0!important;
    line-height:1!important
}
.motor-azul {
    color:#005eff!important
}
@media (max-width:480px) {
    .nm-buscador {
        padding:20px 15px
    }
    .nm-buscador__tabs label {
        font-size:10px;
        padding:10px 2px;
        letter-spacing:0
    }
    .nm-buscador__fields {
        grid-template-columns:1fr;
        gap:8px
    }
    .nm-buscador__title {
        font-size:24px
    }
}
@media (max-width:480px) {
    .nm-buscador {
        text-align:center!important
    }
    .nm-buscador__eyebrow {
        display:table!important;
        margin:0 auto 12px!important
    }
    .nm-buscador__title,.nm-buscador__subtitle {
        text-align:center!important;
        margin-left:auto!important;
        margin-right:auto!important
    }
    .nm-buscador__title {
        font-size:26px!important;
        line-height:1.1!important
    }
}
/* --- CONTENEDOR PRINCIPAL --- */
.nm-grid-comparativa {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 1050px !important;
    margin: 40px auto !important;
    gap: 15px !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
}

/* --- COLUMNAS BASE --- */
.nm-columna {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
    overflow: hidden !important;
}

.nm-columna-destacada {
    border: 2px solid #0018a9 !important;
    transform: scale(1.06) !important;
    box-shadow: 0 15px 40px rgba(0,24,169,0.15) !important;
    z-index: 2 !important;
}

/* --- CELDA BASE (Ponemos esto PRIMERO para que las excepciones le ganen) --- */
.nm-celda {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;
    justify-content: center !important;
    min-height: 95px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    text-align: center !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}
.nm-celda:last-child { border-bottom: none !important; }


/* --- CELDAS Y CABECERAS (El truco de la fuerza bruta) --- */
.nm-celda.nm-celda-header {
    flex-direction: row !important;
    gap: 12px !important;
    min-height: 85px !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    text-align: left !important;
    line-height: 1.3 !important;
    padding: 15px 20px !important;
}

/* Protegemos el icono de la cabecera para que no se aplaste */
.nm-celda.nm-celda-header svg {
    flex-shrink: 0 !important; 
    margin: 0 !important;
    width: 26px !important; 
    height: 26px !important;
}

/* Colores específicos de las cabeceras */
.nm-columna-conceptos .nm-celda-header { background: transparent !important; }
.nm-columna-destacada .nm-celda-header { background: #0018a9 !important; color: #ffffff !important; }
.nm-columna-normal .nm-celda-header { background: #111111 !important; color: #ffffff !important; }


/* --- DISEÑO ESPECÍFICO POR COLUMNA --- */

/* 1. Columna Conceptos (Izquierda) */
.nm-celda.nm-celda-concepto {
    flex-direction: row !important; /* Pone el icono y texto en horizontal */
    justify-content: flex-start !important;
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    text-transform: uppercase !important;
}
.nm-icono-concepto {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    background: #f0f4f8 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #0018a9 !important;
    margin-right: 15px !important;
    flex-shrink: 0 !important;
}

/* 2. Columna Destacada (Centro) - Celdas con iconos */
.nm-celda.nm-celda-con-icono {
    flex-direction: row !important; /* Icono a la izquierda, texto a la derecha */
    justify-content: center !important;
    gap: 15px !important;
}
.nm-icono-izq {
    color: #0018a9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 24px !important; 
}

.nm-bloque-texto {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 175px !important; 
}


/* --- ESTILOS DE TEXTO --- */
.nm-precio-bueno { color: #16a34a !important; font-weight: 900 !important; font-size: 20px !important; line-height: 1.2 !important; }
.nm-precio-malo { color: #dc2626 !important; font-weight: 900 !important; font-size: 20px !important; line-height: 1.2 !important; }
.nm-texto-bold { font-weight: 800 !important; font-size: 16px !important; color: #111111 !important; line-height: 1.2 !important;}
.nm-texto-verde { font-weight: 800 !important; font-size: 16px !important; color: #16a34a !important; line-height: 1.2 !important;}
.nm-subtexto { font-size: 13px !important; color: #6b7280 !important; margin-top: 4px !important; font-weight: 500 !important; }

/* Ocultar etiquetas móviles en PC */
.nm-label-movil { display: none !important; }


/* --- ADAPTACIÓN PARA MÓVILES --- */
@media (max-width: 768px) {
    .nm-grid-comparativa { flex-direction: column !important; padding: 15px !important; }
    .nm-columna-conceptos { display: none !important; }
    .nm-columna-destacada { transform: scale(1) !important; }
    .nm-label-movil { 
        display: block !important; 
        font-weight: 800 !important; 
        margin-bottom: 4px !important; 
        font-size: 12px !important; 
        color: #111111 !important; 
        text-transform: uppercase !important;
    }
    .nm-celda.nm-celda-con-icono { flex-direction: column !important; text-align: center !important; gap: 8px !important; }
    
    .nm-bloque-texto { 
        align-items: center !important; 
        text-align: center !important;
        width: auto !important; 
    }
}
.galeria-marcas-nito {
    max-width:1000px!important;
    margin:40px auto!important
}
.galeria-marcas-nito .kadence-blocks-gallery-item {
    background-color:#ffffff!important;
    border:1px solid #eeeeee!important;
    border-radius:10px!important;
    aspect-ratio:1 / 1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    overflow:hidden!important
}
.galeria-marcas-nito .kadence-blocks-gallery-item-inner,.galeria-marcas-nito .kb-gallery-figure,.galeria-marcas-nito .kb-gal-image-radius,.galeria-marcas-nito .kb-gallery-image-contain,.galeria-marcas-nito .kadence-blocks-gallery-intrinsic {
    width:100%!important;
    height:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    padding:0!important;
    position:relative!important;
    padding-bottom:0!important
}
.galeria-marcas-nito img {
    width:65%!important;
    height:65%!important;
    max-width:65%!important;
    max-height:65%!important;
    object-fit:contain!important;
    filter:grayscale(100%);
    opacity:.7;
    display:block!important;
    transition:all 0.3s ease!important
}
.galeria-marcas-nito .kadence-blocks-gallery-item:hover {
    border-color:#2563eb!important;
    box-shadow:0 8px 20px rgb(0 0 0 / .06)!important
}
.galeria-marcas-nito .kadence-blocks-gallery-item:hover img {
    filter:grayscale(0%);
    opacity:1;
    transform:scale(1.1)
}
@media (max-width:767px) {
    .galeria-marcas-nito .kt-blocks-gallery-items {
        grid-template-columns:repeat(3,1fr)!important;
        display:grid!important;
        gap:10px!important
    }
}
.galeria-marcas-nito {
    max-width:1100px!important;
    margin:40px auto!important
}
.galeria-marcas-nito .kt-blocks-gallery-items {
    display:grid!important;
    grid-template-columns:repeat(8,1fr)!important;
    gap:15px!important
}
.galeria-marcas-nito .kadence-blocks-gallery-item {
    background:#ffffff!important;
    border:1px solid #eeeeee!important;
    border-radius:12px!important;
    margin:0!important;
    aspect-ratio:1 / 1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
    overflow:hidden!important
}
.galeria-marcas-nito .kadence-blocks-gallery-item-inner,.galeria-marcas-nito .kb-gallery-figure,.galeria-marcas-nito .kb-gal-image-radius,.galeria-marcas-nito .kadence-blocks-gallery-intrinsic {
    padding:0!important;
    margin:0!important;
    width:100%!important;
    height:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:static!important
}
.galeria-marcas-nito img {
    width:70%!important;
    height:70%!important;
    max-width:70%!important;
    max-height:70%!important;
    object-fit:contain!important;
    filter:grayscale(100%);
    opacity:.6;
    transition:all 0.3s ease!important;
    position:relative!important;
    top:auto!important;
    left:auto!important
}
.galeria-marcas-nito .kadence-blocks-gallery-item:hover {
    border-color:#2563eb!important;
    box-shadow:0 8px 20px rgb(0 0 0 / .06)!important
}
.galeria-marcas-nito .kadence-blocks-gallery-item:hover img {
    filter:grayscale(0%);
    opacity:1;
    transform:scale(1.1)
}
@media (max-width:992px) {
    .galeria-marcas-nito .kt-blocks-gallery-items {
        grid-template-columns:repeat(4,1fr)!important
    }
}
@media (max-width:480px) {
    .galeria-marcas-nito .kt-blocks-gallery-items {
        grid-template-columns:repeat(2,1fr)!important;
        gap:10px!important
    }
}
.nm-errores-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    max-width:1100px;
    margin:40px auto
}
.nm-error-card {
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:15px;
    display:flex;
    align-items:center;
    gap:15px;
    box-shadow:0 4px 12px rgb(0 0 0 / .03);
    transition:transform 0.2s ease, border-color 0.2s ease
}
.nm-error-card:hover {
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgb(0 0 0 / .08);
    border-color:#0018a9
}
.nm-dtc-badge {
    background-color:#0018a9;
    color:#fff;
    font-weight:800;
    font-size:14px;
    padding:8px 12px;
    border-radius:6px;
    min-width:75px;
    text-align:center;
    flex-shrink:0
}
.nm-error-text {
    margin:0!important;
    font-size:14px;
    color:#334155;
    line-height:1.3;
    font-weight:500
}
@media (max-width:992px) {
    .nm-errores-grid {
        grid-template-columns:repeat(2,1fr)
    }
}
@media (max-width:600px) {
    .nm-errores-grid {
        grid-template-columns:1fr;
        padding:0 15px
    }
}
.nm-seccion-productos {
    max-width:1100px;
    margin:40px auto;
    padding:0 15px
}
.nm-productos-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-bottom:40px
}
.nm-producto-card {
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    text-decoration:none!important;
    transition:all 0.3s ease;
    box-shadow:0 4px 6px rgb(0 0 0 / .02)
}
.nm-producto-card:hover {
    transform:translateY(-5px);
    box-shadow:0 12px 24px rgb(0 0 0 / .08);
    border-color:#2563eb
}
.nm-producto-img {
    background:#f8fafc;
    padding:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:4 / 3
}
.nm-producto-img img {
    max-width:100%;
    height:auto;
    object-fit:contain;
    mix-blend-mode:multiply
}
.nm-producto-info {
    padding:20px;
    display:flex;
    flex-direction:column;
    flex-grow:1
}
.nm-producto-meta {
    font-size:11px;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:.5px;
    font-weight:600;
    margin-bottom:8px
}
.nm-producto-titulo {
    font-size:17px;
    color:#0f172a;
    font-weight:800;
    margin:0 0 20px 0!important;
    line-height:1.3
}
.nm-producto-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:15px;
    border-top:1px solid #f1f5f9;
    margin-top:auto
}
.nm-producto-precio {
    color:#06f;
    font-weight:800;
    font-size:18px
}
.nm-producto-link {
    color:#06f;
    font-weight:700;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.5px
}
.nm-productos-action {
    text-align:center;
    margin-top:10px
}
.nm-btn-buscador {
    display:inline-block;
    background-color:#06f;
    color:#ffffff!important;
    font-size:15px;
    font-weight:700;
    letter-spacing:.5px;
    padding:14px 36px;
    border-radius:50px;
    text-decoration:none!important;
    box-shadow:0 4px 14px rgb(0 102 255 / .25);
    transition:all 0.3s ease
}
.nm-btn-buscador:hover {
    background-color:#0052cc;
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgb(0 102 255 / .4)
}
@media (max-width:992px) {
    .nm-productos-grid {
        grid-template-columns:repeat(2,1fr)
    }
}
@media (max-width:600px) {
    .nm-productos-grid {
        grid-template-columns:1fr;
        gap:20px
    }
    .nm-btn-buscador {
        width:100%;
        box-sizing:border-box
    }
}
body .woocommerce-product-gallery .flex-direction-nav,body .wp-block-woocommerce-product-gallery .wc-block-components-product-gallery-carousel__arrows,body .wc-block-components-product-gallery .swiper-button-next,body .wc-block-components-product-gallery .swiper-button-prev,body .kadence-woo-gallery .flex-direction-nav {
    display:none!important
}
body .woocommerce-product-gallery figure.woocommerce-product-gallery__wrapper,body .wp-block-woocommerce-product-gallery .wc-block-components-product-gallery-image,body .wc-block-components-product-gallery-image {
    background-color:#f8fafc!important;
    border:1px solid #f1f5f9!important;
    border-radius:12px!important;
    padding:25px!important;
    margin-bottom:20px!important
}
body .woocommerce-product-gallery figure.woocommerce-product-gallery__wrapper img,body .wp-block-woocommerce-product-gallery .wc-block-components-product-gallery-image img {
    mix-blend-mode:multiply!important
}
body .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs,body .wp-block-woocommerce-product-gallery .wc-block-components-product-gallery-thumbnails,body .wc-block-components-product-gallery-thumbnails {
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    gap:15px!important;
    padding:0!important;
    margin:0!important
}
body .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li,body .wp-block-woocommerce-product-gallery .wc-block-components-product-gallery-thumbnails__thumbnail {
    width:100%!important;
    float:none!important;
    margin:0!important
}
body .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li img,body .wp-block-woocommerce-product-gallery .wc-block-components-product-gallery-thumbnails__thumbnail img {
    border:2px solid #e2e8f0!important;
    border-radius:8px!important;
    padding:5px!important;
    background-color:#ffffff!important;
    width:100%!important;
    height:100%!important;
    aspect-ratio:1 / 1!important;
    object-fit:contain!important;
    opacity:1!important;
    transition:all 0.3s ease!important
}
body .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li img.flex-active,body .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li img:hover,body .wp-block-woocommerce-product-gallery .wc-block-components-product-gallery-thumbnails__thumbnail.is-active img,body .wp-block-woocommerce-product-gallery .wc-block-components-product-gallery-thumbnails__thumbnail:hover img {
    border-color:#0066ff!important;
    transform:translateY(-2px)!important
}
.wp-block-woocommerce-product-gallery-large-image {
    background-color:#f8fafc!important;
    border:1px solid #f1f5f9!important;
    border-radius:12px!important;
    padding:30px!important;
    margin-bottom:20px!important;
    overflow:hidden!important;
    position:relative!important
}
.wp-block-woocommerce-product-gallery-large-image .wc-block-product-gallery-large-image__container {
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:hidden!important;
    margin:0!important;
    padding:0!important
}
.wp-block-woocommerce-product-gallery-large-image .wc-block-product-gallery-large-image__wrapper {
    min-width:100%!important;
    max-width:100%!important;
    flex-shrink:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important
}
.wp-block-woocommerce-product-gallery-large-image img {
    mix-blend-mode:multiply!important;
    width:100%!important;
    height:auto!important;
    max-height:450px!important;
    object-fit:contain!important
}
.wp-block-woocommerce-product-gallery-large-image button {
    display:none!important
}
.wc-block-product-gallery-thumbnails ul {
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    gap:15px!important;
    padding:0!important;
    margin:0!important
}
.wc-block-product-gallery-thumbnails li {
    width:100%!important;
    margin:0!important;
    border:none!important
}
.wc-block-product-gallery-thumbnails img {
    background-color:#ffffff!important;
    border:2px solid #e2e8f0!important;
    border-radius:8px!important;
    padding:5px!important;
    width:100%!important;
    height:100%!important;
    aspect-ratio:1 / 1!important;
    object-fit:contain!important;
    box-sizing:border-box!important;
    transition:all 0.2s ease!important;
    opacity:1!important
}
/* Miniatura seleccionada, o al pasar el raton: el borde azul.

   Esta regla estaba fusionada con la tipografia de .nito-descripcion-normal.
   Se perdio el final de su lista de selectores junto con sus declaraciones, y
   las de la tipografia quedaron colgando aqui, asi que la miniatura activa se
   quedo sin ningun distintivo: identica a las demas.

   Reconstruida contra el marcado que WooCommerce emite hoy, que no es el que
   describia el selector viejo. No hay <ul>/<li> ni aria-selected: la galeria
   de bloques pone un <div> por miniatura y marca la activa con la clase
   ...__thumbnail__image--is-active sobre el propio <img>. Verificado en
   /bmw/, donde aria-selected no aparece ni una vez.

   WooCommerce ya trae su propia version de esto
   (:where(...--active-outline ...) con border:1px solid y padding:2px), pero
   va dentro de :where() y por tanto con especificidad 0: la aplasta el
   border:2px solid #e2e8f0!important de la regla base de arriba. De ahi el
   !important de aqui — hay que ganarle a nuestra propia regla, no a la ajena.

   Y por eso mismo el selector arranca en el contenedor y nombra el img: la
   regla base es .wc-block-product-gallery-thumbnails img, 0-1-1, y entre dos
   !important decide la especificidad, no el orden. Con la clase de la
   miniatura a secas (0-1-0) el borde azul no se aplicaria nunca. Asi son
   0-2-1 y 0-3-1, que ganan sin depender de la posicion en el archivo.

   El azul es el #0066ff que ya usa la regla equivalente para el marcado
   antiguo (galeria clasica, mas arriba en este mismo archivo), no un tono
   nuevo.

   La miniatura activa lleva pointer-events:none de WooCommerce, asi que su
   :hover no dispara y las dos reglas no compiten. */
.wc-block-product-gallery-thumbnails img.wc-block-product-gallery-thumbnails__thumbnail__image--is-active,
.wc-block-product-gallery-thumbnails img.wc-block-product-gallery-thumbnails__thumbnail__image:hover,
.wc-block-product-gallery-thumbnails img.wc-block-product-gallery-thumbnails__thumbnail__image:focus-visible {
    border-color:#0066ff!important
}

/* El levantamiento, solo como respuesta al raton o al teclado: sobre la activa
   seria permanente y no comunicaria nada. */
.wc-block-product-gallery-thumbnails img.wc-block-product-gallery-thumbnails__thumbnail__image:hover,
.wc-block-product-gallery-thumbnails img.wc-block-product-gallery-thumbnails__thumbnail__image:focus-visible {
    transform:translateY(-2px)!important
}

/* Tipografia de la descripcion, suelta como en el original. Estaba pegada como
   descendiente de la galeria, asi que solo se aplicaba dentro de ella.

   De las cuatro declaraciones solo margin-bottom llega a actuar: font-size,
   color y line-height los vuelve a fijar con !important el bloque
   .nito-descripcion-normal de mas abajo (14px), que es el que manda. Y hoy
   ningun contenido usa la clase, asi que arreglarlo no cambia nada visible
   todavia — es para cuando se use. */
.nito-descripcion-normal {
    margin-bottom:25px;
    font-size:15px;
    color:#475569;
    line-height:1.6
}
.nito-descripcion-normal ul {
    list-style-type:disc!important;
    padding-left:20px!important;
    margin-top:15px
}
.nito-descripcion-normal ul li {
    margin-bottom:8px;
    padding-left:0!important
}
.nito-descripcion-normal ul li::before {
    content:none!important
}
.nito-caja-destacada {
    background-color:#fafafb!important;
    border-radius:8px!important;
    padding:20px 25px!important;
    margin: 10px 0 !important;
}
.nito-caja-destacada ul {
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:15px 10px!important;
    list-style:none!important;
    padding:0!important;
    margin:0!important
}
.nito-caja-destacada ul li {
    position:relative!important;
    padding-left:25px!important;
    font-size:14px!important;
    font-weight:700!important;
    color:#1e293b!important;
    margin:0!important
}
.nito-caja-destacada ul li::before {
    content:'✓'!important;
    position:absolute!important;
    left:0!important;
    top:0!important;
    color:#0018a9!important;
    font-weight:900!important;
    font-size:16px!important
}
@media (max-width:600px) {
    .nito-caja-destacada ul {
        grid-template-columns:1fr!important
    }
}
.reset_variations {
    display:none!important
}
.variations th.label {
    display:block!important;
    text-align:left!important;
    padding-bottom:15px!important
}
.variations th.label label {
    font-size:14px!important;
    text-transform:uppercase!important;
    font-weight:900!important;
    color:#0f172a!important;
    letter-spacing:.5px
}
.variations th.label span {
    display:none!important
}
.variations td.value>div,.variations td.value ul,.variations td.value .variable-items-wrapper {
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:15px!important;
    margin-bottom:15px!important;
    padding:0!important
}
.variations td.value [class*="swatch"],.variations td.value [class*="term"],.variations td.value .variable-item,.variations td.value label {
    background-color:#ffffff!important;
    border:2px solid #e2e8f0!important;
    border-radius:8px!important;
    padding:15px 10px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:70px!important;
    text-align:center!important;
    font-size:13px!important;
    font-weight:700!important;
    color:#0f172a!important;
    line-height:1.4!important;
    cursor:pointer!important;
    transition:all 0.3s ease!important;
    box-shadow:none!important;
    width:100%!important;
    box-sizing:border-box!important
}
.variations td.value [class*="swatch"]:hover,.variations td.value [class*="term"]:hover,.variations td.value .variable-item:hover,.variations td.value label:hover,.variations td.value [class*="selected"],.variations td.value [class*="active"],.variations td.value input:checked+label {
    border-color:#0018a9!important;
    background-color:#f8fafc!important;
    color:#0018a9!important;
    box-shadow:0 4px 12px rgb(0 102 255 / .15)!important;
    transform:translateY(-2px)!important
}
.variations td.value [class*="selected"] span,.variations td.value [class*="active"] span {
    color:#0018a9!important
}
@media (max-width:600px) {
    .variations td.value>div,.variations td.value ul,.variations td.value .variable-items-wrapper {
        grid-template-columns:1fr!important;
        gap:10px!important
    }
    .variations td.value [class*="swatch"],.variations td.value [class*="term"],.variations td.value .variable-item,.variations td.value label {
        min-height:auto!important;
        padding:12px!important
    }
}
.nito-descripcion-normal p,.nito-descripcion-normal ul li,.woocommerce-product-details__short-description p,.woocommerce-product-details__short-description ul li {
    font-size:14px!important;
    color:#475569!important;
    line-height:1.6!important
}
.nito-descripcion-normal ul {
    margin-bottom:25px!important;
    padding-left:20px!important
}
.nito-descripcion-normal ul li {
    margin-bottom:8px!important;
    list-style-type:disc!important
}
body .product .entry-summary h1,body .product .entry-summary h2,body .product .summary h1,body .product .summary h2,body h1.product_title,body h2.product_title,body h1.wp-block-woocommerce-product-title,body h2.wp-block-woocommerce-product-title,body h1.wc-block-components-product-title,body h2.wc-block-components-product-title,body h1.wp-block-post-title,body h2.wp-block-post-title {
    font-size:38px!important;
    font-weight:900!important;
    color:#0066ff!important;
    line-height:1.2!important;
    text-transform:uppercase!important;
    margin-top:5px!important;
    margin-bottom:15px!important;
    display:block!important
}
@media (max-width:600px) {
    body .product .entry-summary h2,body h2.product_title,body h2.wp-block-woocommerce-product-title {
        font-size:28px!important
    }
}
body .wc-block-components-product-rating__container {
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    margin-bottom:15px!important
}
/* Estrellas */
/* ===== 1. Estructura Clásica (Plantillas PHP) ===== */
.woocommerce-product-rating .star-rating,
.woocommerce-product-rating .star-rating span::before {
    color: #f59e0b !important;
    fill: #f59e0b !important;
}

.woocommerce-product-rating .star-rating::before {
    color: #e2e8f0 !important; 
}

/* ===== 2. Estructura de Bloques (Gutenberg / Categorías) ===== */
/* Color de las estrellas rellenas (Acento) */
body .wc-block-components-product-rating__stars,
body .wc-block-components-product-rating__stars span::before,
body .wc-block-grid__product-rating__stars,
body .wc-block-grid__product-rating__stars span::before {
    color: #f59e0b !important;
    fill: #f59e0b !important;
}

/* Color de las estrellas vacías (Fondo) */
body .wc-block-components-product-rating__stars::before,
body .wc-block-grid__product-rating__stars::before {
    color: #e2e8f0 !important;
}

/* ===== 3. Enlace de número de valoraciones ===== */
body .wc-block-components-product-rating__reviews_count a {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

body .wc-block-components-product-rating__reviews_count a:hover {
    color: #0066ff !important;
}

body h2.wp-block-post-title a,body .wp-block-post-title a,body h2.has-link-color a {
    color:#000000!important;
    text-decoration:none!important
}
body nav.wp-block-breadcrumbs,body .kadence-breadcrumbs,body .woocommerce-breadcrumb {
    text-align:left!important;
    padding-left:0!important;
    margin-left:0!important;
    margin-bottom:25px!important;
    display:block!important
}
body nav.wp-block-breadcrumbs a,body .kadence-breadcrumbs a,body .woocommerce-breadcrumb a {
    color:#0018a9!important;
    font-weight:700!important;
    font-size:14px!important;
    text-decoration:none!important;
    box-shadow:none!important
}
body nav.wp-block-breadcrumbs a:hover,body .kadence-breadcrumbs a:hover,body .woocommerce-breadcrumb a:hover {
    color:#0018a9!important
}
body nav.wp-block-breadcrumbs,body .kadence-breadcrumbs,body .woocommerce-breadcrumb,body nav.wp-block-breadcrumbs span:last-child {
    color:#0018a9!important;
    font-weight:700!important;
    font-size:14px!important
}
body nav.wp-block-breadcrumbs .separator,body .kadence-breadcrumbs .separator,body .woocommerce-breadcrumb .separator {
    color:#0018a9!important;
    font-weight:400!important;
    margin:0 10px!important
}
body nav.wp-block-breadcrumbs ol,body nav.wp-block-breadcrumbs ul,body .kadence-breadcrumbs ol,body .kadence-breadcrumbs ul,body .woocommerce-breadcrumb ol,body .woocommerce-breadcrumb ul {
    padding-left:0!important;
    margin-left:0!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important
}
body nav.wp-block-breadcrumbs li:first-child,body .kadence-breadcrumbs li:first-child,body .woocommerce-breadcrumb li:first-child {
    padding-left:0!important;
    margin-left:0!important
}
.single-product div.product p.price,.single-product div.product span.price,.woocommerce-variation-price .price {
    color:#0018a9!important;
    font-size:32px!important;
    font-weight:900!important;
    margin-top:15px!important;
    margin-bottom:25px!important;
    display:block!important;
    letter-spacing:-0.5px!important
}
.single-product div.product p.price del,.single-product div.product span.price del,.woocommerce-variation-price .price del {
    color:#94a3b8!important;
    font-size:18px!important;
    font-weight:600!important;
    margin-right:12px!important;
    opacity:0.7!important
}
.woocommerce-variation-add-to-cart,form.cart {
    display:flex!important;
    flex-wrap:wrap!important;
    gap:15px!important;
    align-items:stretch!important;
    margin-top:20px!important;
    margin-bottom:30px!important
}
.woocommerce .quantity .qty {
    width:80px!important;
    height:55px!important;
    border-radius:8px!important;
    border:2px solid #e2e8f0!important;
    font-size:18px!important;
    font-weight:700!important;
    color:#0f172a!important;
    text-align:center!important;
    padding:0!important;
    background-color:#f8fafc!important;
    transition:border-color 0.3s ease!important
}
.woocommerce .quantity .qty:focus {
    border-color:#0066ff!important;
    outline:none!important
}
.woocommerce div.product form.cart .button {
    flex-grow:1!important;
    height:55px!important;
    background-color:#0018a9!important;
    color:#ffffff!important;
    font-size:16px!important;
    font-weight:800!important;
    text-transform:uppercase!important;
    letter-spacing:0.5px!important;
    border-radius:8px!important;
    border:none!important;
    transition:all 0.3s ease!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important
}
.woocommerce div.product form.cart .button:hover {
    background-color:#0f172a!important;
    transform:translateY(-3px)!important;
    box-shadow:0 8px 20px rgb(0 102 255 / .25)!important
}
.variations_form.cart {
    margin-top:-30px!important
}
.variations {
    margin-bottom:0!important
}
.variations td.value {
    padding-bottom:5px!important
}
.single-product div.product p.price,.single-product div.product span.price,.woocommerce-variation-price {
    margin-top:0!important;
    margin-bottom:0!important;
    line-height:1!important;
    padding:5px 0!important
}
.wapf-wrapper {
    margin-top:-5px!important
}
.wapf-field-container {
    margin-top:0!important;
    margin-bottom:10px!important;
    padding:12px 15px!important
}
.wapf-field-label {
    margin-bottom:5px!important
}
.woocommerce-variation-add-to-cart,form.cart {
    padding-top:0!important;
    margin-top:0!important
}
.nito-compatible-vehicles {
    margin:50px 0!important;
    font-family:inherit
}
.nito-compatible-vehicles h2 {
    font-size:28px!important;
    font-weight:800!important;
    color:#0f172a!important;
    margin-bottom:8px!important
}
.nito-compatible-vehicles>p {
    color:#64748b!important;
    font-size:15px!important;
    margin-bottom:30px!important
}
.nito-vehicles-grid {
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    gap:20px!important
}
.nito-vehicle-card {
    background-color:#ffffff!important;
    border:1px solid #e2e8f0!important;
    border-radius:12px!important;
    padding:20px!important;
    text-align:center!important;
    text-decoration:none!important;
    transition:all 0.3s ease!important;
    display:flex!important;
    flex-direction:column!important;
    box-shadow:0 2px 5px rgb(0 0 0 / .02)!important
}
.nito-vehicle-card:hover {
    border-color:#0066ff!important;
    box-shadow:0 10px 25px rgb(0 102 255 / .1)!important;
    transform:translateY(-4px)!important
}
.nito-vehicle-image {
    background-color:#f8fafc!important;
    border-radius:8px!important;
    padding:20px!important;
    margin-bottom:15px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    height:140px!important
}
.nito-vehicle-image img {
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    mix-blend-mode:multiply!important
}
.nito-vehicle-title {
    font-size:14px!important;
    font-weight:700!important;
    color:#475569!important;
    margin:0 0 15px 0!important
}
.nito-vehicle-year {
    font-size:18px!important;
    font-weight:900!important;
    color:#0f172a!important;
    margin:0 0 5px 0!important
}
.nito-vehicle-desc {
    font-size:12px!important;
    color:#64748b!important;
    margin:0!important;
    line-height:1.4!important
}
@media (max-width:992px) {
    .nito-vehicles-grid {
        grid-template-columns:repeat(2,1fr)!important
    }
}
@media (max-width:600px) {
    .nito-vehicles-grid {
        grid-template-columns:1fr!important
    }
    .nito-compatible-vehicles h2 {
        font-size:24px!important
    }
}

/* --- Modo carrusel de los modelos ----------------------------------------
   Con 22 modelos, la rejilla de 4 columnas ocupaba seis filas y estiraba la
   pagina. En carrusel se ve una sola fila y el resto se desplaza.

   Reutiliza el mecanismo del carrusel de [nito_articulos]: el desplazamiento
   es nativo con scroll-snap, asi que funciona con el dedo y con la rueda
   aunque el JS no llegue; las flechas son un extra que se oculta solo cuando
   caben todas. Las flechas comparten los estilos de aquel a traves de la clase
   .nito-carrusel__flecha, para no duplicar el bloque entero.

   El display necesita !important y mas especificidad porque la regla base
   .nito-vehicles-grid ya trae display:grid!important. El grid-template-columns
   de esa regla y de sus media queries queda inerte en un contenedor flex, de
   ahi que el numero de columnas se controle aqui con una variable.

   Las tarjetas no cambian: mismo tamano, borde, fondo y :hover.
   -------------------------------------------------------------------------- */

.nito-vehicles-marco {
    position: relative;
}

.nito-vehicles-grid.nito-vehicles-grid--carrusel {
    --nito-vehiculos-columnas: 4;
    --nito-vehiculos-hueco: 20px;
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* overflow-x recorta en vertical: hay que dejar sitio a la sombra y al
       translateY(-4px) de la tarjeta al pasar el raton. */
    padding: 10px 0 18px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.nito-vehicles-grid--carrusel::-webkit-scrollbar {
    display: none;
}

.nito-vehicles-grid--carrusel .nito-vehicle-card {
    flex: 0 0 calc((100% - (var(--nito-vehiculos-columnas) - 1) * var(--nito-vehiculos-hueco)) / var(--nito-vehiculos-columnas));
    scroll-snap-align: start;
}

.nito-vehicles-grid--carrusel:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 4px;
}

/* Senal de que hay mas: el borde por el que se puede seguir se desvanece.
   Las clases las pone el JS, que ya calculaba esos limites para habilitar y
   deshabilitar las flechas; aqui solo se pintan. Sin JS no hay difuminado,
   pero el carrusel sigue desplazandose, asi que no se pierde funcionalidad.

   Mascara en los dos lados a la vez cuando se puede ir en ambas direcciones.
   Las dos propiedades van siempre juntas, con y sin prefijo. */

.nito-vehicles-grid--carrusel.hay-mas-despues:not(.hay-mas-antes) {
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
    mask-image: linear-gradient(to right, #000 82%, transparent 100%);
}

.nito-vehicles-grid--carrusel.hay-mas-antes:not(.hay-mas-despues) {
    -webkit-mask-image: linear-gradient(to left, #000 82%, transparent 100%);
    mask-image: linear-gradient(to left, #000 82%, transparent 100%);
}

.nito-vehicles-grid--carrusel.hay-mas-antes.hay-mas-despues {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

@media (max-width:992px) {
    /* Columnas fraccionarias a proposito: asomar el borde de la siguiente
       tarjeta es lo que delata que la fila continua. En escritorio no hace
       falta, porque estan las flechas y ahi conviene respetar el tamano de
       tarjeta original. */
    .nito-vehicles-grid.nito-vehicles-grid--carrusel {
        --nito-vehiculos-columnas: 2.2;
    }
}

@media (max-width:600px) {
    /* Es el caso critico: aqui las flechas estan ocultas y una tarjeta a
       ancho completo se lee como un bloque fijo. Con 1.15 siempre se ve el
       principio de la siguiente. */
    .nito-vehicles-grid.nito-vehicles-grid--carrusel {
        --nito-vehiculos-columnas: 1.15;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nito-vehicles-grid--carrusel {
        scroll-behavior: auto;
    }
}
.nito-seccion-referencias {
    text-align:center!important;
    margin-top:0!important;
    margin-bottom:60px!important
}
.nito-seccion-referencias .nito-ref-separador {
    width:45px!important;
    height:3px!important;
    background:linear-gradient(90deg,#0018a9,#93c5fd)!important;
    margin:-15px auto 35px auto!important;
    border-radius:2px!important
}
.nito-ref-contenedor-etiquetas {
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    gap:12px!important;
    max-width:1000px!important;
    margin:0 auto!important
}
.nito-ref-etiqueta {
    flex:0 0 200px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background-color:#ffffff!important;
    border:1px solid #c2dbfe!important;
    border-radius:50px!important;
    padding:10px!important;
    font-size:13px!important;
    font-weight:700!important;
    color:#0f172a!important;
    box-shadow:0 2px 4px rgb(0 0 0 / .02)!important;
    transition:all 0.3s ease!important;
    box-sizing:border-box!important
}
.nito-ref-etiqueta svg {
    width:14px!important;
    height:14px!important;
    margin-right:8px!important;
    flex-shrink:0!important
}
.nito-ref-etiqueta:hover {
    border-color:#0018a9!important;
    color:#0018a9!important;
    transform:translateY(-2px)!important
}
@media (max-width:480px) {
    .nito-ref-etiqueta {
        flex:0 0 calc(50% - 12px)!important;
        font-size:11px!important
    }
}
.nito-caja-profesional {
    display:block!important;
    width:100%!important;
    background-color:#fafafb!important;
    border-radius:8px!important;
    padding:15px!important;
    margin: 10px 0 !important;
    box-sizing:border-box!important;
    clear:both!important;
    font-family:inherit!important;
    -webkit-font-smoothing:antialiased!important;
    -moz-osx-font-smoothing:grayscale!important;
    text-rendering:optimizeLegibility!important
}
.nito-caja-profesional h3 {
    font-size:18px!important;
    font-weight:800!important;
    color:#0018a9!important;
    margin:0 0 4px 0!important;
    line-height:1.2!important;
    letter-spacing:0.5px!important
}
.nito-caja-profesional p {
    font-size:16px!important;
    font-weight:600!important;
    color:#000000!important;
    margin:0 0 15px 0!important;
    line-height:1.4!important
}
.nito-prof-opciones {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    width: 100% !important;
}

/* Aplicamos el diseño "activo" directamente al botón base */
.nito-opcion-btn {
    flex: 1 1 50% !important;
    display: flex !important;
    align-items: center !important;
    background: #000000 !important;
    border: 1px solid #ffffff !important;
    box-shadow: 0 4px 10px rgb(0 0 0 / .15) !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}
/* Dejamos solo las propiedades de tipografía para el texto */
.nito-texto-btn {
    color: #ffffff !important;
    font-weight: 800 !important; /* Falta de punto y coma corregida */
    line-height: 1.2 !important;
}
.nito-radio-circulo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    background: #ffffff !important;
    border: 1px solid #ffffff !important;
    border-radius: 4px !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    transition: all 0.3s ease !important;
}

/* Ocultamos cualquier contenido (svg, texto, iconos) que venga por defecto en el HTML */
.nito-radio-circulo * {
    display: none !important;
}

/* Dibujamos el check azul SOLAMENTE cuando la caja tiene la clase activa */
.nito-opcion-activa .nito-radio-circulo::after {
    content: "" !important;
    display: block !important;
    width: 4px !important;
    height: 8px !important;
    border: solid #0018a9 !important; /* Tu color azul */
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
    margin-bottom: 2px !important; /* Pequeño ajuste para que quede centrado en la caja */
}
@media (max-width: 480px) {
    .nito-prof-opciones {
        flex-direction: column !important;
        gap: 6px !important;
    }
    .nito-opcion-btn {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    .nito-texto-btn {
        font-size: 14px !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
}

/* Oculta los <p> vacíos que Kadence/WP genera dentro de las opciones */
.nito-prof-opciones > p:empty {
    display: none !important;
    margin: 0 !important;
}

/* Elimina los <br> dentro de los botones que fuerzan salto de línea extra */
.nito-opcion-btn br {
    display: none !important;
}
.nito-marcado {
    background-color:#ffffff!important;
    border-color:#001699!important
}
.nito-marcado::after {
    content:''!important;
    width:4px!important;
    height:8px!important;
    border:solid #ffffff!important;
    border-width:0 2px 2px 0!important;
    transform:translateY(-1px) rotate(45deg)!important
}
.woocommerce ul.products li.product {
    background-color:#fff;
    border:1px solid #d1d5db!important;
    border-radius:16px!important;
    padding-bottom:20px!important;
    text-align:left!important;
    overflow:hidden;
    box-shadow:0 4px 6px rgb(0 0 0 / .02);
    transition:all 0.3s ease
}
.woocommerce ul.products li.product:hover {
    box-shadow:0 10px 20px rgb(0 0 0 / .08);
    border-color:#a1a1aa!important
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,.woocommerce ul.products li.product .price,.woocommerce ul.products li.product .star-rating {
    padding-left:20px;
    padding-right:20px
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size:16px!important;
    font-weight:800!important;
    color:#111827!important;
    margin-top:15px;
    margin-bottom:10px!important;
    line-height:1.3
}
.woocommerce ul.products li.product .price {
    color:#0055ff!important;
    font-size:15px!important;
    font-weight:800!important;
    display:block;
    margin-bottom:10px
}
.woocommerce ul.products li.product .button {
    display:block;
    background-color:#0055ff!important;
    color:#ffffff!important;
    font-size:14px!important;
    font-weight:bold!important;
    text-transform:uppercase;
    padding:12px 20px!important;
    margin:15px 20px 0 20px!important;
    border-radius:8px!important;
    text-align:center!important;
    box-shadow:none!important;
    border:none!important
}
.woocommerce ul.products li.product .button:hover {
    background-color:#0033cc!important;
    color:#ffffff!important
}
.woocommerce ul.products li.product {
    border:2px solid #d1d5db!important;
    border-radius:12px!important;
    background-color:#e6edfc!important;
    overflow:hidden!important;
    text-align:center!important;
    padding-bottom:20px!important;
    transition:all 0.4s cubic-bezier(.175,.885,.32,1.275)!important;
    transform:translateY(0)
}
.woocommerce ul.products li.product:hover {
    box-shadow:0 15px 25px rgb(0 0 0 / .15)!important;
    border-color:#a1a1aa!important;
    transform:translateY(-10px)!important
}
.woocommerce ul.products li.product .kadence-woo-loop-summary,.woocommerce ul.products li.product .product-details {
    background-color:transparent!important
}
.woocommerce ul.products li.product img,.woocommerce ul.products li.product .kadence-woo-image-loop {
    background-color:#ffffff!important;
    width:100%!important;
    display:block;
    margin:0!important
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color:#0c125e!important;
    font-size:16px!important;
    font-weight:800!important;
    text-align:center!important;
    padding:20px 15px 10px 15px!important;
    margin:0!important;
    clear:both!important
}
.woocommerce ul.products li.product .star-rating {
    display:block!important;
    margin:0 auto 10px auto!important;
    float:none!important
}
.woocommerce ul.products li.product .price {
    color:#0055ff!important;
    font-size:15px!important;
    font-weight:800!important;
    display:block!important;
    width:100%!important;
    text-align:center!important;
    margin:0 auto 15px auto!important;
    padding:0!important;
    clear:both!important
}
.woocommerce ul.products li.product .button {
    display:block!important;
    background-color:#2145e6!important;
    color:#ffffff!important;
    font-size:15px!important;
    font-weight:600!important;
    text-transform:none!important;
    padding:12px 20px!important;
    margin:0 auto!important;
    width:85%!important;
    border-radius:50px!important;
    text-align:center!important;
    border:none!important;
    box-shadow:none!important;
    clear:both!important;
    transition:background-color 0.2s ease!important;
    transform:none!important
}
.woocommerce ul.products li.product .button:hover {
    background-color:#000a61!important
}
.woocommerce ul.products li.product .button::after {
    display:none!important
}
body .woocommerce ul.products li.product,body ul.wc-block-product-template li.wc-block-product {
    border:1px solid #0012a6!important;
    border-radius:12px!important;
    background-color:#ffffff!important;
    overflow:hidden!important;
    text-align:left!important;
    padding-bottom:20px!important;
    transition:all 0.4s cubic-bezier(.175,.885,.32,1.275)!important;
    transform:translateY(0)!important;
    position:relative!important
}
body .woocommerce ul.products li.product:hover,body ul.wc-block-product-template li.wc-block-product:hover {
    box-shadow:0 15px 25px rgb(0 0 0 / .12)!important;
    border-color:#000a61!important;
    transform:translateY(-8px)!important
}
body .woocommerce ul.products li.product::before,body ul.wc-block-product-template li.wc-block-product::before {
    content:'MÁS VENDIDO';
    position:absolute;
    top:15px;
    left:15px;
    background-color:#0012a6;
    color:#fff;
    font-size:10px;
    font-weight:800;
    padding:6px 12px;
    border-radius:20px;
    z-index:10
}
body .woocommerce ul.products li.product img,body ul.wc-block-product-template li.wc-block-product img {
    background-color:#ffffff!important;
    width:100%!important;
    display:block;
    margin:0!important
}
body .woocommerce ul.products li.product .woocommerce-loop-product__title,body ul.wc-block-product-template li.wc-block-product h2.wp-block-post-title {
    color:#111827!important;
    font-size:16px!important;
    font-weight:800!important;
    text-align:left!important;
    padding:0 20px!important;
    margin-top:15px!important;
    margin-bottom:15px!important;
    line-height:1.3!important;
    clear:both!important
}
body .woocommerce ul.products li.product .woocommerce-loop-product__title::after,body ul.wc-block-product-template li.wc-block-product h2.wp-block-post-title::after {
    content:'';
    display:block;
    width:100%;
    height:1px;
    background-color:#e5e7eb;
    margin-top:15px
}
body .woocommerce ul.products li.product .price,body ul.wc-block-product-template li.wc-block-product .wp-block-woocommerce-product-price {
    color:#0055ff!important;
    font-size:15px!important;
    font-weight:800!important;
    float:left!important;
    padding-left:20px!important;
    margin-bottom:0!important;
    line-height:1.5!important;
    width:auto!important;
    text-align:left!important
}
body ul.wc-block-product-template li.wc-block-product .wp-block-woocommerce-product-button {
    float:right!important;
    width:auto!important;
    margin:0!important;
    padding:0 20px 0 0!important
}
body .woocommerce ul.products li.product .button,body ul.wc-block-product-template li.wc-block-product .wp-block-button__link {
    background:transparent!important;
    color:#0055ff!important;
    font-size:13px!important;
    font-weight:800!important;
    text-transform:uppercase!important;
    padding:0!important;
    margin:0!important;
    line-height:1.5!important;
    box-shadow:none!important;
    border:none!important;
    border-radius:0!important
}
body .woocommerce ul.products li.product .button:hover,body ul.wc-block-product-template li.wc-block-product .wp-block-button__link:hover {
    color:#0012a6!important;
    background:transparent!important
}
/* El texto del botón de listado se muestra tal cual lo devuelve WooCommerce, para
   que la tienda distinga los dos modelos de negocio: "Solicitar reparación" en
   servicios y "Seleccionar opciones" / "Añadir al carrito" en venta directa.
   Antes se ocultaba el <span> con display:none y se pintaba content:"VER" encima,
   lo que además dejaba la etiqueta fuera del árbol de accesibilidad.
   La fuente de verdad es nito_texto_boton_listado() en functions.php, no este CSS. */
body ul.wc-block-product-template li.wc-block-product .wp-block-button__link span {
    max-width:100%!important
}
body ul.wc-block-product-template li.wc-block-product .wp-block-button__link::after {
    content:" \2192"!important;
    display:inline-block!important;
    font-size:16px;
    margin-left:4px
}
body.post-type-archive-product #content,body.post-type-archive-product .site-content,body.post-type-archive-product .content-area,body.post-type-archive-product #primary,body.post-type-archive-product .site-main {
    padding-bottom:0!important;
    margin-bottom:0!important
}
body.post-type-archive-product footer.site-footer,body.post-type-archive-product #colophon {
    margin-top:0!important
}
.secciones-inferiores-tienda {
    margin-bottom:0!important;
    padding-bottom:0!important;
    display:block!important
}
.secciones-inferiores-tienda>*:last-child,.secciones-inferiores-tienda .wp-block-group:last-child,.secciones-inferiores-tienda .wp-block-cover:last-child {
    margin-bottom:0!important
}
body.category .kadence-archive-header {
    padding-bottom:20px!important;
    margin-bottom:0!important
}
body.category .site-content,body.category .content-area,body.category .content-container {
    padding-top:0!important;
    margin-top:0!important
}
body.category #archive-container {
    margin-top:0!important;
    padding-top:0!important
}
.site-header.site-header-section-right {
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important
}
.site-header-item-html {
    display:flex!important;
    align-items:center!important;
    margin:0!important;
    padding:0!important
}
.nito-taller-cercano {
    display:flex!important;
    align-items:center!important;
    margin-top:-2px!important;
    margin-right:50px!important;
    margin-left:-40px!important
}
.wc-block-components-product-name {
    color:#111!important;
    font-weight:600!important;
    font-size:16px!important
}
.wc-block-components-product-details,.wc-block-components-product-details__name,.wc-block-components-product-details__value {
    color:#333!important;
    font-weight:500!important;
    font-size:14px!important
}
.wc-block-cart-items__header,.wc-block-cart-items__header-title,.wc-block-components-totals-item__label,.wc-block-components-totals-wrapper h2 {
    color:#111!important;
    font-weight:700!important
}
.wc-block-formatted-money-amount {
    color:var(--nito-price-color, #0018a9)!important;
    font-weight:700!important
}
/* Contenedor principal de la franja (Efecto Superpuesto) */
.nm-banner-beneficios {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    
    /* SIN BORDES SUPERIORES NI LATERALES */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    
    /* FRANJA EN EL MARGEN INFERIOR (MÁS GRUESA) */
    border-bottom: 8px solid #fafafb !important;
	border-top: 3px solid #fafafb !important;
    
    /* BORDES RECTOS */
    border-radius: 0px !important;
    box-shadow: none !important;
    
    padding: 30px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    
    /* DESPLAZAMIENTO PARA QUE SOBREPASE EL FONDO DE LA SECCIÓN */
    margin-top: 15px !important;
    margin-bottom: -60px !important; /* Tira de la tarjeta hacia abajo para romper el fondo */
    position: relative !important;
    z-index: 10 !important;
}
/* Cada columna individual */
.nm-beneficio-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1 !important;
    border-right: 1px solid #f0f0f0 !important;
}
.nm-beneficio-item:last-child {
    border-right: none !important;
}

/* Círculo con el icono */
.nm-beneficio-icono {
    /* MODIFICADO: Aumentamos el tamaño del círculo (de 52px a 65px) */
    width: 65px !important;
    height: 65px !important;
    min-width: 65px !important;
    
    background: #f0f4f8 !important;
    color: #0018a9 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 18px !important;
    flex-shrink: 0 !important;
}

/* MODIFICADO: Aumentamos el tamaño del SVG dentro del círculo (de 24px a 32px) */
.nm-beneficio-icono svg {
    width: 32px !important;
    height: 32px !important;
}

/* Bloque de texto derecho */
.nm-beneficio-texto {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}

.nm-beneficio-titulo {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    text-transform: uppercase !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.2 !important;
}

.nm-beneficio-desc {
    font-size: 12px !important;
    color: #6b7280 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Adaptación para Teléfonos */
@media (max-width: 900px) {
    .nm-banner-beneficios {
        flex-direction: column !important;
    }
    .nm-beneficio-item {
        width: 100% !important;
        border-right: none !important; 
        border-bottom: 1px solid #f0f0f0 !important; 
    }
    .nm-beneficio-item:last-child {
        border-bottom: none !important;
    }
}
/* Contenedor de cada fila (icono + texto) - aplica siempre */
.nm-beneficio-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 0 16px !important; /* espacio a los lados en TODAS las pantallas */
}

/* Icono */
.nm-beneficio-icono {
    flex-shrink: 0 !important;
}

/* Bloque de texto derecho */
.nm-beneficio-texto {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}
.nm-beneficio-titulo {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    text-transform: uppercase !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.2 !important;
}
.nm-beneficio-desc {
    font-size: 12px !important;
    color: #6b7280 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Adaptación para Teléfonos */
@media (max-width: 900px) {
    .nm-banner-beneficios {
        flex-direction: column !important;
    }
    .nm-beneficio-item {
        width: 100% !important;
        border-right: none !important; 
        border-bottom: 1px solid #f0f0f0 !important; 
        padding: 16px !important; /* más aire vertical en móvil, sustituye al padding general */
    }
    .nm-beneficio-item:last-child {
        border-bottom: none !important;
    }
}
/* Anular la altura mínima forzada en el ID específico de Kadence */
.kb-row-layout-id3623_635e9b-d6 > .kt-row-column-wrap {
    min-height: 0 !important;
    height: auto !important;
}
/* Contenedor principal de la mini tabla */
.nm-mini-caracteristicas {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    background: 
#fafafb !important;
    border-radius: 12px !important;

    /* ALINEACIÓN A LA IZQUIERDA DE LA CAJA COMPLETA */
    margin-top: 10px !important; 
    margin-left: 0 !important;
    margin-right: auto !important;

    width: 100% !important;
    max-width: 580px !important;
    box-sizing: border-box !important;
}
/* Cada una de las 3 columnas (Elementos centrados internamente) */
.nm-caract-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centra icono, título y texto */
    text-align: center !important;
    flex: 1 !important;
    padding: 15px 15px !important;
    border-right: 1px solid 
#e5e7eb !important;
}
.nm-caract-item:last-child {
    border-right: none !important;
}
/* Círculo para el icono */
.nm-caract-icono {
    width: 44px !important;
    height: 44px !important;
    background: 
#eef2ff !important;
    color: 
#0018a9 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
}
.nm-caract-icono svg {
    width: 20px !important;
    height: 20px !important;
}
/* Título de cada elemento */
.nm-caract-titulo {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: 
#111111 !important;
    text-transform: uppercase !important;
    margin: 0 0 4px 0 !important;
    letter-spacing: 0.3px !important;
}
/* Descripción */
.nm-caract-desc {
    font-size: 11px !important;
    color: 
#6b7280 !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
}
/* Adaptación para móviles */
@media (max-width: 600px) {
    .nm-mini-caracteristicas {
        flex-direction: column !important;
        padding: 15px !important;
        margin-left: auto !important; /* En móviles se vuelve a centrar */
        margin-right: auto !important;
    }
    .nm-caract-item {
        border-right: none !important;
        border-bottom: 1px solid 
#e5e7eb !important;
        padding: 15px 0 !important;
    }
    .nm-caract-item:last-child {
        border-bottom: none !important;
    }
}
.nm-destacado-pago {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: #E8ECFF !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
	margin: 10px 0 !important;
}

.nm-destacado-icono {
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    background-color: #eef2ff !important;
    border-radius: 8px !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230018a9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px 22px !important;
}

.nm-destacado-texto {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}

@media (max-width: 600px) {
    .nm-destacado-pago {
        padding: 14px 16px !important;
        gap: 10px !important;
    }
    .nm-destacado-texto {
        font-size: 12px !important;
    }
}
.single-content p.has-text-color.has-link-color.wp-elements-388489c56cebf5673361e088afed54ce.wp-block-paragraph {
    margin-bottom: 0 !important;
}
/* Botón Whatsapp */
.kb-btn3923_7585f5-3f {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: 
        0 4px 0 0 #1a9e5c,
        0 8px 16px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.15s ease !important;
}

.kb-btn3923_7585f5-3f:hover {
    transform: translateY(-2px) !important;
    box-shadow: 
        0 6px 0 0 #1a9e5c,
        0 10px 20px rgba(0, 0, 0, 0.2) !important;
}

.kb-btn3923_7585f5-3f:active {
    transform: translateY(2px) !important;
    box-shadow: 
        0 2px 0 0 #1a9e5c,
        0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.kb-btn3923_7585f5-3f .kb-svg-icon-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
}

.kb-btn3923_7585f5-3f .kb-svg-icon-wrap svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
}

.kb-btn3923_7585f5-3f .kt-btn-inner-text {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}
.proceso-trabajo p:first-of-type {
    margin-bottom: 4px !important;
}
.nito-taller-cercano {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nito-taller-icono {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.nito-ct__features-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.nito-ct__features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fbfcfe;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
}
.nito-ct__feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-left: 1px solid #e2e8f0;
}
.nito-ct__feature:first-child {
    border-left: none;
}
.nito-ct__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #F5F6FF;
}
.nito-ct__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #0018a9;
}
.nito-ct__feature-texto h3 {
    margin: 0 0 3px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .02em;
    color: #0f172a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.nito-ct__feature-texto p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #64748b;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@media (max-width: 900px) {
    .nito-ct__features {
        grid-template-columns: repeat(2, 1fr);
    }
    .nito-ct__feature:nth-child(2) {
        border-left: none;
    }
    .nito-ct__feature:nth-child(1),
    .nito-ct__feature:nth-child(2) {
        border-bottom: 1px solid #e2e8f0;
    }
}
@media (max-width: 480px) {
    .nito-ct__features {
        grid-template-columns: 1fr;
    }
    .nito-ct__feature {
        border-left: none !important;
        border-bottom: 1px solid #e2e8f0;
    }
    .nito-ct__feature:last-child {
        border-bottom: none;
    }
}
.kb-btn-con-iconos .kt-btn-inner-text {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.kb-btn-con-iconos .kt-btn-inner-text::before {
    content: "";
    display: inline-block;
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    align-self: center;
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zM12 14.4c-3.6 0-10.8 1.8-10.8 5.4v2.4h21.6v-2.4c0-3.6-7.2-5.4-10.8-5.4z" fill="black"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zM12 14.4c-3.6 0-10.8 1.8-10.8 5.4v2.4h21.6v-2.4c0-3.6-7.2-5.4-10.8-5.4z" fill="black"/></svg>') no-repeat center / contain;
}

.kb-btn-con-iconos .kt-btn-inner-text::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    align-self: center;
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
}
.nito-ct__features-section {
    width: 100%;
    max-width: var(--global-content-width, 1290px);
    margin: 0 auto;
    padding-left: var(--global-content-edge-padding);
    padding-right: var(--global-content-edge-padding);
    padding-top: 0;
    padding-bottom: 0;
}

.nito-ct__features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fafafb;
    border-top: 1px solid #e2e8f0;
    gap: 0;
    padding: 14px 0;
}

.nito-ct__feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 20px;
    border-left: 1px solid #e2e8f0;
}

.nito-ct__feature:first-child {
    border-left: none;
}

.nito-ct__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #F5F6FF;
}

.nito-ct__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #0018a9;
}

.nito-ct__feature-texto {
    width: 100%;
    max-width: 210px;
}

.nito-ct__feature-texto h3 {
    margin: 0 0 4px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .02em;
    color: #0f172a;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.nito-ct__feature-texto p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #64748b;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 900px) {
    .nito-ct__features {
        grid-template-columns: repeat(2, 1fr);
    }
    .nito-ct__feature:nth-child(2) {
        border-left: none;
    }
    .nito-ct__feature:nth-child(1),
    .nito-ct__feature:nth-child(2) {
        border-bottom: 1px solid #e2e8f0;
    }
}

@media (max-width: 480px) {
    .nito-ct__features {
        grid-template-columns: 1fr;
    }
    .nito-ct__feature {
        border-left: none !important;
        border-bottom: 1px solid #e2e8f0;
    }
    .nito-ct__feature:last-child {
        border-bottom: none;
    }
}
/* ==========================================================================
   HOME — SECCIONES ABS COCHE Y ABS MOTO
   ==========================================================================
   DOS secciones de la portada (página 2911) comparten todo este componente:
   "REPARACIÓN MÓDULO ABS COCHE" y, justo debajo, "REPARACIÓN MÓDULO ABS MOTO".
   Son dos bloques core/html dentro del contenido de esa página, no patrones ni
   plantillas, así que estas clases solo las usa ella: se puede tocar sin mirar
   a otras páginas. Comprobado con una consulta a post_content.

   La de moto NO tiene ni una clase propia, y es a propósito: la maqueta de
   referencia es idéntica a la de coche -mismas columnas, imagen a la derecha,
   mismo panel, mismos indicadores, mismo fondo- así que un modificador
   --moto no tendría ni una declaración dentro. Lo que cambia es contenido:
   el titular, la imagen, los seis logos y el destino del botón. Su marcado se
   generó COPIANDO el de coche y sustituyendo solo eso, para que las dos sean
   estructuralmente idénticas por construcción.

   Cualquier cambio aquí afecta a las dos. Si algún día divergen de verdad, ese
   es el momento de crear el modificador, no antes.

   No confundir con .nito-ct__features, que se le parece pero es otra cosa: 4
   columnas, icono al lado del texto, banda a todo el ancho, y la usan también
   el patrón 4120 "Red de Profesionales". La barra de tres indicadores de aquí
   es .nito-repmod__stats.

   Los logos salen de la biblioteca de medios:

     coche  bmw 71, audi 70, mercedes 4171, volkswagen 94, ford 76,
            renault 88            -> /reparar-abs/[marca]/
     moto   yamaha 5562, ktm 5564, ducati 5566, vespa 5565, suzuki 92,
            husqvarna 5563        -> /reparar-abs-moto/[marca]/

   Ojo con dos cosas: mercedes NO está en el rango 70-95 con los otros 25, se
   subió aparte; y los cinco de moto son Simple Icons descargados y
   normalizados al formato de la casa (fill="#0a0f24", viewBox 0 0 24 24, un
   único <path>), porque de moto solo había honda -que es la H de los coches, no
   el ala- y suzuki. BMW Motorrad se quedó FUERA de la fila de moto mientras la
   página 4835 arrastró la lista de modelos de los coches; desde el 2026-09-18
   esa página es un hub por series y ya puede entrar en la fila cuando haya un
   logo suyo normalizado.

   El orden de la fila de moto alterna emblema y logotipo de texto para que KTM
   y Vespa, que son los más ligeros, no queden juntos. La fila mezcla las dos
   formas igual que la de coche, donde Audi ocupa 8,3 de 24 de alto y Ford 9,0
   frente a los 24,0 de BMW, VW y Renault.

   Sobre las medidas: las capturas de referencia están reescaladas (799 px de
   ancho para un contenido de ~1290), así que de ellas se ha tomado la
   ESTRUCTURA y el color, no los tamaños en píxeles, que no se pueden derivar de
   forma fiable de una imagen reducida.
   ========================================================================== */

.nito-repmod {
    width: 100%;
    max-width: var(--global-content-width, 1290px);
    margin: 0 auto;
    padding-left: var(--global-content-edge-padding);
    padding-right: var(--global-content-edge-padding);
    padding-top: 32px;
    padding-bottom: 32px;
    background: #ffffff;
    border: none;
    border-radius: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.nito-repmod__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
}

.nito-repmod__col-izquierda,
.nito-repmod__col-derecha {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

/* Todo el espaciado vertical de la columna izquierda sale de este unico valor.
   Antes no: el gap del flex se SUMABA al margen de cada hijo, y como esos
   margenes los ponia el espaciado de bloques y no este fichero, los huecos
   salian a 57 / 31 / 52 / 52 / 20px. Los hijos van ahora a margin 0 (mas abajo,
   con selectores 0-2-0) y el hueco lo fija solo el gap.
   La columna derecha se queda con los 20px de arriba: el encargo no la toca. */
.nito-repmod__col-izquierda {
    --nito-repmod-hueco: 16px;
    gap: var(--nito-repmod-hueco);
}

/* Los cuatro selectores que siguen llevan el prefijo .nito-repmod para llegar a
   0-2-0: con la clase sola (0-1-0) perdian contra .single-content h2 y
   .single-content p, que son 0-1-1, y de ahi venian los margenes de sobra
   (33/11px en el H2, 32px en los parrafos). */
.nito-repmod .nito-repmod__eyebrow {
    display: block;
    margin: 0;
    color: #0018a9;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.nito-repmod .nito-repmod__titulo {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
}

/* font-size: inherit y no un valor propio: Kadence escribe el tamano general
   del sitio directamente en 'body' de su CSS en linea (17px), sin variable que
   leer, asi que heredar es la unica forma de seguirlo si algun dia cambia. */
.nito-repmod .nito-repmod__intro {
    margin: 0;
    font-size: inherit;
    line-height: 1.5;
    color: #475569;
}

.nito-repmod__intro strong {
    color: #0018a9;
}

.nito-repmod .nito-repmod__parrafo {
    margin: 0;
    font-size: inherit;
    line-height: 1.5;
    color: #475569;
}

.nito-repmod__parrafo strong {
    color: #0018a9;
}

/* --- La caja informativa -------------------------------------------------
   En la captura es UN solo panel con el texto de certificación y los tres
   indicadores dentro: medido sobre la imagen, el fondo va sin interrupción de
   y=173 a y=328. Por eso los indicadores pierden la tarjeta gris que tenían
   cada uno y pasan a separarse con filetes.

   El filo azul de la izquierda y el fondo #e8ecfb los pide el encargo; la
   captura, que está comprimida y desplazada de color -el blanco de la página se
   lee como #f5f5f5-, no sirve para sacar el tono. */
.nito-repmod__panel {
    width: 100%;
    /* Simetrico arriba/abajo. Antes era 16px arriba y 6px abajo, y se sumaba a
       la asimetria del propio item: 30px de aire sobre el icono contra 10px bajo
       la etiqueta. */
    padding: 12px 18px;
    border-left: 3px solid #0018a9;
    border-radius: 0 10px 10px 0;
    background: #e8ecfb;
}

.nito-repmod__panel .nito-repmod__parrafo {
    margin: 0;
}

.nito-repmod__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    width: 100%;
}

.nito-repmod__stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 12px 8px;
}

/* La divisoria va en un ::before y no en un border-left. Con el borde, y estando
   los items en box-sizing:border-box, el 2 y el 3 perdian 1px de ancho util y su
   contenido quedaba medio pixel a la derecha del centro de la celda. Asi los
   tres tienen exactamente el mismo ancho de contenido y los filetes caen justo
   en 1/3 y 2/3 de la barra, que es lo que los deja equidistantes. */
.nito-repmod__stat:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: #c1cbf5;
}

.nito-repmod__stat-icon {
    width: 34px;
    height: 34px;
    color: #0018a9;
}

.nito-repmod__stat-num {
    font-size: 11.5px;
    font-weight: 800;
    color: #0018a9;
}

/* #475569 y no el #94a3b8 de antes: sobre el #e8ecfb del panel ese gris se
   queda en 2,18:1, muy por debajo del 4,5:1 de la AA. Este da 6,43:1. */
.nito-repmod__stat-label {
    font-size: 10.5px;
    color: #475569;
}

.nito-repmod__checklist {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.nito-repmod__check-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    text-align: left;
}

.nito-repmod__check-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.nito-repmod__col-imagen {
    width: 100%;
}

.nito-repmod__col-imagen img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.nito-repmod__marcas {
    text-align: center;
    width: 100%;
}

/* El rótulo lleva un filete a cada lado. Se hace con pseudoelementos que se
   reparten el hueco sobrante, así que las líneas se ajustan solas al ancho de
   la palabra sin medir nada. El elemento es un <span>, de ahí el display. */
.nito-repmod__marcas-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    color: #0018a9;
}

.nito-repmod__marcas-label::before,
.nito-repmod__marcas-label::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: #c1cbf5;
}

/* Rejilla de seis y no flex-wrap: así el paso a dos filas de tres en móvil es
   una sola declaración, en vez de depender de por dónde rompa el wrap. */
.nito-repmod__marcas-logos {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: start;
    gap: 16px 8px;
}

/* El relleno no es decorativo: con él el enlace mide ~57px de alto y toda la
   celda responde al dedo, en la línea de los 44px mínimos que se aplicaron en
   el carrito. Sin él el área útil es el glifo del logo y poco más. */
.nito-repmod__marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    text-decoration: none;
}

/* 28px es el tamaño al que un emblema se reconoce de un vistazo, y opacidad 1
   en vez de .8: con el grayscale, el .8 dejaba los logos en un gris lavado
   mientras que en la referencia son negros. El grayscale se queda para que la
   fila sea uniforme -el rótulo de BMW es azul y blanco- y el color vuelve al
   pasar por encima. */
.nito-repmod__marcas-logos img {
    height: 28px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 1;
    transition: opacity .2s ease, filter .2s ease;
}

/* 9,5px en versalitas con letter-spacing era demasiado pequeño para leerlo con
   comodidad; 11px sigue siendo secundario. Y #64748b en vez de #94a3b8, que
   sobre blanco solo daba 2,56:1: este da 4,76:1. */
.nito-repmod__marca-nombre {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #64748b;
    text-transform: uppercase;
    transition: color .2s ease;
}

/* Al apuntar a una marca, su logo recupera el color y el rótulo se pone azul.
   Se declara también para :focus porque un enlace conserva el foco tras
   pulsarlo, y el indicador de teclado va aparte en :focus-visible. */
.nito-repmod__marca:hover img,
.nito-repmod__marca:focus img {
    filter: grayscale(0);
    opacity: 1;
}

.nito-repmod__marca:hover .nito-repmod__marca-nombre,
.nito-repmod__marca:focus .nito-repmod__marca-nombre {
    color: #0018a9;
}

.nito-repmod__marca:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 4px;
    border-radius: 4px;
}

.nito-repmod__cta {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.nito-repmod__boton {
    display: inline-block;
    padding: 14px 40px;
    background: #0018a9;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .05em;
    text-decoration: none;
    border-radius: 999px;
    transition: background .2s ease;
}

.nito-repmod__boton:hover {
    background: #001480;
}

@media (max-width: 768px) {
    .nito-repmod__grid {
        grid-template-columns: 1fr;
    }

    /* Dos filas de tres. */
    .nito-repmod__marcas-logos {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 8px;
    }
}

/* Los tres indicadores siguen cabiendo en fila en móvil -a 360px de ancho de
   columna son 120px cada uno-, pero sin tanto aire a los lados. */
@media (max-width: 480px) {
    .nito-repmod__panel {
        padding: 12px 12px;
    }

    .nito-repmod__stat {
        padding: 12px 4px;
    }
}
/* ==========================================================================
   Rejilla de articulos del blog  [nito_articulos]
   Sustituye al bloque kadence/postgrid de Kadence Blocks Pro.
   Componente propio: sin !important, salvo que haya que pelear con vendor.
   ========================================================================== */

.nito-articulos {
    width: 100%;
}

/* Estos dos rotulos no se usaban: las paginas ponian el titular en bloques
   kadence/advancedheading sueltos, encima del shortcode. El problema es que
   entonces el titular sobrevive a un carrusel vacio, porque el shortcode
   devuelve '' pero los bloques de al lado siguen ahi. Al pasar el texto a los
   atributos titulo= y subtitulo= la seccion se oculta como una unidad.

   Los valores cuadran con los demas H2 de seccion de la pagina, que son
   bloques kadence/advancedheading con fontSize [25, "", "xl"]. Ese array es
   [escritorio, tablet, movil], y Kadence lo emite como DOS reglas: 25px sin
   condicion, y la variable xl dentro de @media (max-width: 767px). O sea que
   el titular no mide lo mismo en las dos pantallas y hay que reproducir las
   dos; copiar solo el clamp lo dejaba a 36-48px en escritorio, al lado de
   hermanos de 25px.

   El breakpoint es el 767px de Kadence, no los 600/900 que usa el resto de
   este fichero: aqui el objetivo es cuadrar con los H2 vecinos, asi que manda
   el suyo. */

.nito-articulos__titulo {
    max-width: 736px;
    margin: 0 auto 6px;
    text-align: center;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    color: #000000;
}

/* El centrado horizontal necesita mas peso que la clase sola. El tema declara
   .single-content h2 { margin: 1.5em 0 .5em }, con especificidad 0-1-1, que
   gana a .nito-articulos__titulo (0-1-0) y anula los margenes laterales
   automaticos: la caja de 736px se quedaba pegada a la izquierda con el texto
   centrado dentro, que es justo el sintoma. Al subtitulo no le pasa porque es
   un <p> y ese selector no lo alcanza.

   Los H2 hermanos se libran por lo mismo al reves: su regla de Kadence es
   .wp-block-kadence-advancedheading.kt-adv-heading… (0-2-0) y si le gana.

   Se sube a 0-2-0 y se corrigen solo los margenes laterales, no el atajo
   completo: el ritmo vertical que impone el tema (1.5em arriba, .5em abajo) es
   el que se ve hoy y no hay motivo para cambiarlo. */

.nito-articulos .nito-articulos__titulo {
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .nito-articulos__titulo {
        font-size: var(--global-kb-font-size-xl, 3rem);
    }
}

.nito-articulos__subtitulo {
    max-width: 640px;
    margin: 0 auto 28px;
    text-align: center;
    font-weight: 300;
    line-height: 1.9;
    color: var(--global-palette5, #57575D);
}

.nito-articulos__marco {
    position: relative;
}

.nito-articulos__grid {
    --nito-articulos-hueco: 30px;
    display: grid;
    grid-template-columns: repeat(var(--nito-articulos-columnas, 3), minmax(0, 1fr));
    gap: var(--nito-articulos-hueco);
}

.nito-articulos__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--nito-articulos-fondo, #fafafb);
    border-radius: 28px;
    box-shadow: 0 0 14px rgba(0, 0, 0, .07);
    transition: transform .2s ease, box-shadow .2s ease;
}

.nito-articulos__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
}

.nito-articulos__imagen {
    display: block;
    overflow: hidden;
    line-height: 0;
}

.nito-articulos__imagen img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .4s ease;
}

.nito-articulos__card:hover .nito-articulos__imagen img {
    transform: scale(1.04);
}

.nito-articulos__cuerpo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px 25px 25px;
}

.nito-articulos__card-titulo {
    margin: 10px 0 5px;
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
}

.nito-articulos__card-titulo a {
    color: #0f172a;
    text-decoration: none;
}

.nito-articulos__card-titulo a:hover {
    color: #0018a9;
}

.nito-articulos__extracto {
    margin: 0 0 20px;
    font-size: .9rem;
    line-height: 1.6;
    color: #57575d;
}

/* margin-top auto: los botones quedan alineados aunque los extractos
   tengan distinta longitud. */
.nito-articulos__boton {
    display: inline-block;
    margin-top: auto;
    padding: 10px 26px;
    background: #fbfcfe;
    color: #0018a9;
    border: 1px solid rgba(0, 24, 169, .15);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.nito-articulos__boton:hover {
    background: #0018a9;
    color: #ffffff;
    border-color: #0018a9;
}

/* --- Modo carrusel -------------------------------------------------------
   El desplazamiento es nativo (scroll-snap): funciona con el dedo y con la
   rueda aunque el JS no llegue a ejecutarse. Las flechas son un extra. */

.nito-articulos__grid--carrusel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* overflow-x recorta en vertical, asi que hay que dejar sitio a la sombra
       y al desplazamiento de la tarjeta al pasar el raton. */
    padding: 10px 0 18px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.nito-articulos__grid--carrusel::-webkit-scrollbar {
    display: none;
}

.nito-articulos__grid--carrusel .nito-articulos__card {
    flex: 0 0 calc((100% - (var(--nito-articulos-columnas, 3) - 1) * var(--nito-articulos-hueco)) / var(--nito-articulos-columnas, 3));
    scroll-snap-align: start;
}

.nito-articulos__grid--carrusel:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 4px;
}

.nito-articulos__flecha,
.nito-carrusel__flecha {
    position: absolute;
    top: 38%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    transform: translateY(-50%);
    background: #ffffff;
    color: #0f172a;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, opacity .2s ease;
}

/* Kadence declara en global.min.css:
     button:hover, button:focus, button:active { color: var(--global-palette-btn-hover);
       background: var(--global-palette-btn-bg-hover); box-shadow: 0 15px 25px -7px ... }
   Eso es (0,1,1) y gana a .nito-carrusel__flecha, que es (0,1,0). El SVG de la
   flecha va con stroke="currentColor", asi que hereda ese color: al pulsarla, el
   boton se queda con el foco y --global-palette-btn-hover (palette9, #fbfcfe) la
   dejaba casi blanca sobre fondo blanco, es decir invisible. El fondo no cantaba
   porque --global-palette-btn-bg-hover es palette2 (#ffffff), justo el mismo
   blanco que ya tenia en reposo: solo se perdia la flecha.
   Se repite aqui el reposo con (0,2,0) para ganarle, box-shadow incluido, porque
   Kadence tambien le cambia la sombra.
   IMPORTANTE: este bloque va ANTES del :hover a proposito. Los dos son (0,2,0),
   asi que a igual especificidad decide el orden del archivo; puesto despues, la
   flecha enfocada se quedaria blanca y ya no viraria a azul al pasar el raton.
   Por eso esta regla se inserta aqui y no al final del archivo. */
.nito-articulos__flecha:focus,
.nito-carrusel__flecha:focus {
    background: #ffffff;
    color: #0f172a;
    border-color: rgba(15, 23, 42, .1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

.nito-articulos__flecha:hover,
.nito-carrusel__flecha:hover {
    background: #0018a9;
    color: #ffffff;
    border-color: #0018a9;
}

.nito-articulos__flecha:disabled,
.nito-carrusel__flecha:disabled {
    opacity: .3;
    cursor: default;
}

.nito-articulos__flecha:disabled:hover,
.nito-carrusel__flecha:disabled:hover {
    background: #ffffff;
    color: #0f172a;
    border-color: rgba(15, 23, 42, .1);
}

.nito-articulos__flecha[hidden],
.nito-carrusel__flecha[hidden] {
    display: none;
}

.nito-articulos__flecha svg,
.nito-carrusel__flecha svg {
    width: 18px;
    height: 18px;
}

.nito-articulos__flecha--prev,
.nito-carrusel__flecha--prev {
    left: -14px;
}

.nito-articulos__flecha--next,
.nito-carrusel__flecha--next {
    right: -14px;
}

@media (max-width: 900px) {
    .nito-articulos__grid {
        --nito-articulos-columnas: 2;
    }
}

@media (max-width: 600px) {
    .nito-articulos__grid {
        --nito-articulos-columnas: 1;
        --nito-articulos-hueco: 18px;
    }

    /* .nito-articulos__titulo no baja aqui: a este ancho ya le aplica la regla
       de 767px, cuyo clamp() toca fondo en 2.25rem. Un valor fijo lo dejaria
       por debajo de los H2 hermanos. */

    .nito-articulos__card-titulo {
        font-size: 20px;
        line-height: 26px;
    }

    /* En movil manda el dedo: las flechas taparian la tarjeta. */
    .nito-articulos__flecha,
    .nito-carrusel__flecha {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nito-articulos__grid--carrusel {
        scroll-behavior: auto;
    }

    .nito-articulos__card,
    .nito-articulos__imagen img {
        transition: none;
    }

    .nito-articulos__card:hover {
        transform: none;
    }

    .nito-articulos__card:hover .nito-articulos__imagen img {
        transform: none;
    }
}

/* 1. Control del espacio entre Estrellas y Precio */
.woocommerce-product-rating {
    margin-bottom: 4px !important; /* Reduce el espacio debajo de las estrellas (Ajusta a 0 si lo quieres pegado) */
}

.summary.entry-summary p.price {
    margin-top: 0 !important; /* Elimina el margen por defecto encima del precio */
    margin-bottom: 8px !important; /* Mantiene la separación controlada con tu descripción inferior */
}

/* 2. Control del espacio del contenedor de la descripción nativa */
.woocommerce-product-details__short-description {
    margin-top: 0 !important;
}

/* 3. Tu clase corporativa optimizada */
.categoria-descripcion-corta {
    font-size: 16px !important;
    color: #475569 !important;
    line-height: 1.6 !important;
    margin-top: 0 !important; 
    margin-bottom: 16px !important;
}

/* 4. Reseteo del párrafo interno para evitar saltos de línea extra */
.categoria-descripcion-corta p {
    margin: 0 !important; 
}

/* 5. Acento de color corporativo en negritas */
.categoria-descripcion-corta strong,
.categoria-descripcion-corta b {
    color: #0018a9;
}

.woocommerce div.product .product_title{
	 color: #000000!important;
}


/* ==========================================================================
   Bloque de video (kadence/videopopup)
   Estas reglas las generaba Kadence Blocks Pro por bloque. Al retirar el Pro
   el bloque sigue funcionando (lo registra el plugin gratuito) pero perdia su
   aspecto: marco recto y boton de play sin su circulo.
   Se apunta a .wp-block-kadence-videopopup, no al uniqueID generado
   (.kadence-video-popup3496_e6459d-a4), que no sobrevive a recrear el bloque.
   ========================================================================== */

.wp-block-kadence-videopopup .kadence-video-popup-wrap {
    border-radius: 20px;
}

.wp-block-kadence-videopopup .kadence-video-popup-wrap .kt-video-svg-icon {
    color: var(--global-palette9, #fbfcfe);
    font-size: 30px;
}

.wp-block-kadence-videopopup .kadence-video-popup-wrap .kt-video-svg-icon > svg {
    stroke-width: 2;
}

.wp-block-kadence-videopopup .kadence-video-popup-wrap .kt-video-svg-icon.kt-video-svg-icon-style-stacked {
    padding: 40px;
    background: var(--global-palette2, #ffffff);
    border-radius: 50%;
}

.wp-block-kadence-videopopup .kadence-video-popup-wrap:hover .kt-video-svg-icon.kt-video-svg-icon-style-stacked {
    background: var(--global-palette3, #000000);
}

/* ==========================================================================
   Visor de imagenes del producto (PhotoSwipe)

   La cabecera fija de este mismo fichero (.site-header, z-index 9999, al
   principio del archivo) se dibujaba POR ENCIMA del visor, que WooCommerce
   sirve en la capa 1500. Tapaba justo la barra superior, que es donde esta
   el aspa de cerrar: el visor abria a pantalla completa y no habia salida
   visible salvo el boton Atras del navegador.

   Se sube el visor por encima de todo, incluidos los cajones de Kadence
   (#mobile-drawer 99999 y .popup-drawer 100000). No hace falta !important:
   el tema hijo se encola despues de photoswipe.min.css.

   El comportamiento (que la barra no se desvanezca, tocar para cerrar) se
   configura en functions.php, en nito_opciones_visor_producto().
   ========================================================================== */

.pswp {
    z-index: 100001;
}

/* Red de seguridad por si el JS no aplicara las opciones: la barra con el
   aspa permanece visible aunque PhotoSwipe marque inactividad. */
.pswp__ui--idle .pswp__top-bar {
    opacity: 1;
}

/* --- Visor de la galeria de BLOQUES de WooCommerce -------------------------
   Es un componente distinto del anterior. Lo usan las paginas que incrustan
   un bloque woocommerce/single-product (por ejemplo /reparar-abs/bmw/).

   Abre su visor en un <dialog> NO modal (data-wp-bind--open, sin showModal),
   asi que no entra en la capa superior del navegador y le afecta el z-index.
   WooCommerce lo situa en la capa 1000 y la cabecera fija de este fichero
   esta en la 9999: la cabecera tapaba la esquina superior derecha, que es
   justo donde esta el aspa de cerrar. El visor abria a pantalla completa con
   la lista de imagenes y no habia forma visible de salir.

   WooCommerce declara la regla con :where(), de especificidad cero, asi que
   basta una regla normal. Este z-index NO es suficiente por si solo: ordena
   el visor frente a la galeria dentro de su fila, pero no lo saca de ella.
   Ver la regla de .kt-row-column-wrap justo debajo. */

.wc-block-product-gallery-dialog {
    z-index: 100001;
}

/* El z-index de arriba no bastaba en escritorio. El <dialog> cuelga de
   .kt-row-column-wrap, que Kadence Blocks declara position:relative con
   z-index:1. Eso crea un contexto de apilamiento y encierra al visor: su
   100001 solo ordena dentro de la fila, y hacia fuera la fila entera vale 1,
   por debajo de la cabecera (9999) y tambien de las filas que vienen despues
   en el DOM, que valen 1 igualmente y ganan por orden de documento.

   A diferencia de .pswp, que WooCommerce imprime como hijo directo de <body>
   y por eso vive en el contexto raiz, aqui no se arregla subiendo el z-index
   del propio visor: hay que subir la fila que lo contiene.

   En movil no se notaba porque la cabecera fija solo existe desde 1025px
   (#main-header, el unico que lleva .kadence-sticky-header, esta display:none
   por debajo). El visor estaba igual de encerrado, sin nada con que chocar.

   Solo actua mientras el visor esta abierto: el atributo [open] lo pone y lo
   quita WooCommerce. Especificidad 0-3-0 frente al 0-1-0 de Kadence, asi que
   no hace falta !important. */

.kt-row-column-wrap:has(.wc-block-product-gallery-dialog[open]) {
    z-index: 100001;
}

/* El aspa era un icono de 24px con 4px de relleno. Se le da un area de
   pulsacion comoda en movil y se hace evidente que es un boton.

   El circulo azul no lo pone WooCommerce, que declara background:none dentro
   de :where() y por tanto con especificidad 0: lo pinta la regla generica de
   Kadence para <button>. Se repite aqui con la misma variable para que la
   pareja normal/hover se lea junta y no dependa de esa regla ajena; el color
   sigue al paleta, no se fija a mano.

   El aspa se colorea con fill, no con color: el <svg> y su <path> no llevan
   atributo fill, asi que heredan el del boton. Sobre el azul iba en negro
   (el var(--wp--preset--color--contrast, #000) de WooCommerce, que en este
   tema cae siempre al #000), y se leia mal. */
.wc-block-product-gallery-dialog__close-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: var(--global-palette-btn-bg, #0018a9);
    fill: #ffffff;
    transition: background .2s ease, fill .2s ease;
}

/* Al pasar por encima el fondo se aclara, y ahi el blanco desapareceria: el
   aspa vuelve al negro de origen. */
.wc-block-product-gallery-dialog__close-button:hover,
.wc-block-product-gallery-dialog__close-button:focus-visible {
    background: #f1f5f9;
    fill: #000000;
}

/* ==========================================================================
   Listas dentro de un panel del acordeon

   Las respuestas del acordeon son bloques kadence/advancedheading y su unica
   declaracion propia es el tamano: font-size:var(--global-kb-font-size-sm).
   La familia, el color y el interlineado no los declaran, los heredan del
   cuerpo (Montserrat, #3D3D3D, 1.6).

   Una lista de WordPress en el mismo panel hereda igual la familia y el color,
   pero no ese tamano, porque no es un advancedheading y nadie se lo da: se
   quedaba en los 17px del cuerpo y se veia claramente mas grande que el parrafo
   que la introduce. Solo hay que igualar el tamano, y con la misma variable que
   usa el bloque en vez de un valor fijo, para que siga al tema si cambia.

   El interlineado no se toca: el 1.6 del cuerpo es un numero sin unidad, asi
   que se recalcula solo al cambiar el tamano.

   Sin !important: 0-2-1 frente al 0-0-1 de la regla base de Kadence.
   ========================================================================== */

.kt-accordion-panel-inner ul.wp-block-list,
.kt-accordion-panel-inner ol.wp-block-list {
    margin: .75em 0 0 1.5em;
    font-size: var(--global-kb-font-size-sm, 0.9rem);
}

/* Un respiro entre puntos, que a este tamano quedaban pegados. */
.kt-accordion-panel-inner .wp-block-list li + li {
    margin-top: .35em;
}

.landing-titulo-producto {
    margin-top: 0px;
    font-size: 35px;
	margin-bottom: 8px !important; /* nueva línea */
    font-weight: 800;
    font-family: Montserrat;
    text-transform: uppercase;
    color: #000000;
}

/* ==========================================================================
   Códigos DTC: plegado "ver más" y badges de varios códigos   (2026-08-19)
   Componente base en la línea 749. Se añade aquí, al final, porque el archivo
   se ordena por cuándo se escribió cada cosa, no por componente.
   ========================================================================== */

/* El badge llevaba flex-shrink:0 y ninguna cota de ancho. Con una sola
   referencia daba igual, pero hay filas que etiquetan cinco códigos a la vez
   ("5D90 / 5D91 / 5D92 / 5D93 / 5D94", 32 caracteres) y en la rejilla de tres
   columnas se comían el ancho de la descripción. Se le deja partir en varias
   líneas y se le pone un techo relativo a la tarjeta.
   Va con el contenedor delante (0-2-0) para ganar a .nm-dtc-badge (0-1-0). */
.nm-error-card .nm-dtc-badge {
    white-space: normal;
    max-width: 45%;
    line-height: 1.25;
}

/* Estado plegado. La clase la pinta PHP ya en el HTML, así que no hay salto al
   cargar; el JS solo la quita y la pone. Sin JS, el <noscript> del shortcode
   revela las extra y esconde el botón. */
.nm-errores--colapsado .nm-error-card--extra {
    display: none;
}

/* Con botón, la rejilla cede parte de su margen inferior para no dejar un hueco
   doble entre la última tarjeta y el botón. Va contra .nm-errores--plegable, que
   la pinta PHP y el JS nunca quita, y no contra :has(.nm-errores-mas): así el
   margen no depende del soporte de :has() ni cambia al desplegar. */
.nm-errores--plegable .nm-errores-grid {
    margin-bottom: 24px;
}

/* El inset lateral de móvil tiene que estar en el envoltorio, no en la rejilla.
   El botón es HERMANO de la rejilla, así que con el padding en la rejilla (regla
   original de la línea 794) las tarjetas se metían 15px por debajo de 600px y el
   botón no, y sus bordes no coincidían. En escritorio no hay padding y por eso
   allí sí cuadraba: era la única diferencia móvil/escritorio del componente.
   0-2-0 gana a la regla original, que es 0-1-0, sin depender del orden. */
@media (max-width: 600px) {
    .nm-errores {
        padding: 0 15px;
    }

    .nm-errores .nm-errores-grid {
        padding: 0;
    }
}

/* Azul corporativo de base y negro al interactuar, con la fuente siempre en
   blanco. El reposo tiene que ser el estado pintado: al desplegarse, la lista
   empuja el boton hacia abajo, el cursor deja de estar encima y :hover se cae,
   asi que un reposo claro se leia como que el boton se apagaba. */
.nm-errores-mas {
    display: block;
    margin: 0 auto 40px;
    padding: 12px 28px;
    background: #0018a9;
    color: #fff;
    border: 2px solid #0018a9;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Kadence declara en global.min.css:
     button:hover, button:focus, button:active { color: var(--global-palette-btn-hover);
       background: var(--global-palette-btn-bg-hover); box-shadow: 0 15px 25px -7px ... }
   Eso es 0-1-1, y GANA a .nm-errores-mas, que es 0-1-0. En este sitio
   --global-palette-btn-bg-hover es palette2 (#ffffff) y --global-palette-btn-hover
   es palette9 (#fbfcfe): blanco sobre casi blanco. Como un <button> conserva el
   foco despues del clic, "Ver menos codigos" salia con fondo blanco y texto
   invisible. Se repite aqui el reposo con 0-2-0 para ganarle.
   Va ANTES de :hover/:active a proposito: a igual especificidad decide el orden,
   asi que el negro sigue mandando cuando el raton esta encima de un boton que
   ademas tiene el foco. */
.nm-errores-mas:focus {
    background: #0018a9;
    border-color: #0018a9;
    color: #fff;
    box-shadow: none;
}

/* Negro mientras el raton esta encima o se esta pulsando. */
.nm-errores-mas:hover,
.nm-errores-mas:active {
    background: #000000;
    border-color: #000000;
    color: #fff;
}

/* El teclado necesita ver donde esta, pero con un aro, sin tocar el fondo: el
   reposo tiene que seguir siendo azul aunque el boton este enfocado. */
.nm-errores-mas:focus-visible {
    outline: 3px solid #000000;
    outline-offset: 3px;
}


/* ==========================================================================
   REGISTRO DE PROFESIONALES: ASISTENTE DE TRES PASOS
   ==========================================================================
   Estilos del formulario Kadence 5350 partido en pasos (ver functions.php,
   nito_registro_asistente_pasos). Los campos los sigue pintando Kadence: aqui
   solo se estilan el indicador de progreso, los titulos de cada paso y la
   botonera. Los colores salen de la paleta de Kadence
   (--global-palette1 es #0018a9, el azul de marca).
   ========================================================================== */

/* Los pasos solo se ocultan cuando el JS ha marcado el formulario. Sin JS no
   hay clase .nito-wizard, los tres grupos se ven seguidos y el formulario
   funciona igual que antes de partirlo. */
form.nito-wizard .nito-paso {
    display: none;
}

form.nito-wizard .nito-paso--activo {
    display: block;
}

/* --- Indicador de progreso (1-2-3) ------------------------------------- */
.nito-wizard__progreso {
    display: flex;
    gap: 10px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.nito-wizard__marca {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 0 12px;
    border-bottom: 3px solid var(--global-palette7, #fafafb);
    color: var(--global-palette6, #636363);
    font-size: 14px;
    line-height: 1.25;
}

.nito-wizard__numero {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--global-palette7, #fafafb);
    color: var(--global-palette6, #636363);
    font-size: 14px;
    font-weight: 700;
}

/* Paso activo: resaltado con el azul de marca. */
.nito-wizard__marca--activa {
    border-bottom-color: var(--global-palette1, #0018a9);
    color: var(--global-palette1, #0018a9);
    font-weight: 600;
}

/* Pasos ya completados: la linea queda azul, el texto vuelve al gris oscuro. */
.nito-wizard__marca--hecha {
    border-bottom-color: var(--global-palette1, #0018a9);
    color: var(--global-palette4, #3D3D3D);
}

.nito-wizard__marca--activa .nito-wizard__numero,
.nito-wizard__marca--hecha .nito-wizard__numero {
    background: var(--global-palette1, #0018a9);
    color: var(--global-palette2, #ffffff);
}

/* --- Cabeceras de cada paso -------------------------------------------- */
/* El prefijo del contenedor es para llegar a 0-2-0: Kadence declara
   .single-content h2/h3 { margin: 1.5em 0 .5em } a 0-1-1, que le gana a una
   sola clase y se llevaria por delante el margen de abajo. */
.nito-paso .nito-paso__titulo {
    margin: 0 0 6px;
    font-size: 20px;
    line-height: 1.3;
}

.nito-paso .nito-paso__titulo:focus {
    outline: none; /* el foco se mueve aqui al cambiar de paso, solo para lectores de pantalla */
}

.nito-paso .nito-paso__subtitulo {
    margin: 0 0 20px;
    color: var(--global-palette6, #636363);
    font-size: 14px;
}

.nito-paso .nito-paso__legal {
    margin: 20px 0 14px;
    color: var(--global-palette5, #57575D);
    font-size: 13px;
    line-height: 1.5;
}

/* Los enlaces que van dentro de los pasos -el del mapa de talleres en el texto
   legal y el de la politica de privacidad en su checkbox- se quedan azules en
   todos los estados. Kadence declara, con especificidad 0-1-1,
   a:hover, a:focus, a:active { color: var(--global-palette-highlight-alt) }
   y en este sitio esa variable es palette2, blanco: al pasar el raton el enlace
   desaparecia sobre el fondo. Con la clase del paso delante subimos a 0-1-2, que
   basta, y no hace falta !important. */
.nito-paso a,
.nito-paso a:link,
.nito-paso a:visited,
.nito-paso a:hover,
.nito-paso a:focus,
.nito-paso a:active {
    color: var(--global-palette1, #0018a9);
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* Lo unico que cambia al pasar el raton es el grosor del subrayado; el color no
   se mueve. */
.nito-paso a:hover,
.nito-paso a:focus {
    text-decoration-thickness: 2px;
}

/* --- Botonera ---------------------------------------------------------- */
.nito-wizard__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.nito-wizard__nav .kb-submit-field {
    margin: 0;
}

.nito-wizard__nav .nito-wizard__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 26px;
    border: 2px solid var(--global-palette1, #0018a9);
    border-radius: 22px;
    box-shadow: none;
    font-family: Montserrat, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.nito-wizard__nav .nito-wizard__btn--siguiente {
    background: var(--global-palette1, #0018a9);
    color: var(--global-palette2, #ffffff);
}

.nito-wizard__nav .nito-wizard__btn--atras {
    background: transparent;
    color: var(--global-palette1, #0018a9);
}

/* Kadence declara en global.min.css, sin media query,
   button:hover, button:focus, button:active { color: #ffffff; background: #fbfcfe }
   con especificidad 0-1-1, que le gana a un boton estilado con una sola clase.
   Un <button> mantiene el foco despues de pulsarlo, asi que sin repetir aqui
   los colores de reposo el boton se queda en blanco sobre blanco para el resto
   de la visita. Y este bloque tiene que ir ANTES del de :hover, porque los dos
   son 0-2-0 y decide el orden del archivo. */
.nito-wizard__nav .nito-wizard__btn--siguiente:focus {
    background: var(--global-palette1, #0018a9);
    color: var(--global-palette2, #ffffff);
    box-shadow: none;
}

.nito-wizard__nav .nito-wizard__btn--atras:focus {
    background: transparent;
    color: var(--global-palette1, #0018a9);
    box-shadow: none;
}

.nito-wizard__nav .nito-wizard__btn--siguiente:hover,
.nito-wizard__nav .nito-wizard__btn--siguiente:active {
    border-color: #000000;
    background: #000000;
    color: var(--global-palette2, #ffffff);
}

.nito-wizard__nav .nito-wizard__btn--atras:hover,
.nito-wizard__nav .nito-wizard__btn--atras:active {
    background: var(--global-palette1, #0018a9);
    color: var(--global-palette2, #ffffff);
}

/* --- El boton de envio ---------------------------------------------------- */
/* Este es marcado de Kadence, no un boton propio, y su hoja
   (kadence-blocks-advanced-form-css) se encola DESPUES de style.css: aqui no
   basta con empatar en especificidad, hay que superarla. Sus reglas son
   .kb-adv-form-submit-button.kb-btn-global-fill (0-2-0) y su :hover (0-2-1); con
   el contenedor delante subimos a 0-3-0 y 0-3-1 y ganamos sin !important.

   De serie sale con fondo azul y letra NEGRA, porque --global-palette-btn es
   palette3 (#000000), y al pasar el raton se queda blanco sobre casi blanco
   (--global-palette-btn-bg-hover es palette2 y --global-palette-btn-hover es
   palette9). Aqui se pone letra blanca sobre azul y el hover al contrario. */
.nito-wizard__nav .kb-adv-form-submit-button.kb-btn-global-fill {
    min-height: 48px;
    padding: 14px 42px;
    border: 2px solid var(--global-palette1, #0018a9);
    border-radius: 22px; /* el mismo redondeo que Atras y Siguiente */
    background: var(--global-palette1, #0018a9);
    color: var(--global-palette2, #ffffff);
    font-size: 17px;
    font-weight: 700;
}

/* El foco repite los colores de reposo, y va antes que :hover porque los dos
   son 0-3-1 y decide el orden del archivo. Sin esto el boton se queda con los
   colores de hover mientras siga enfocado, que es lo que pasa despues de
   pulsarlo. */
.nito-wizard__nav .kb-adv-form-submit-button.kb-btn-global-fill:focus {
    border-color: var(--global-palette1, #0018a9);
    background: var(--global-palette1, #0018a9);
    color: var(--global-palette2, #ffffff);
    box-shadow: none;
}

/* Al pasar el raton, al contrario: fondo blanco y letra azul. El borde ya esta
   puesto en reposo, del color del fondo, para que el boton no cambie de tamano
   cuando el borde se hace visible. */
.nito-wizard__nav .kb-adv-form-submit-button.kb-btn-global-fill:hover,
.nito-wizard__nav .kb-adv-form-submit-button.kb-btn-global-fill:active {
    border-color: var(--global-palette1, #0018a9);
    background: var(--global-palette2, #ffffff);
    color: var(--global-palette1, #0018a9);
    box-shadow: none;
}

.nito-wizard__nav .kb-adv-form-submit-button:focus-visible {
    outline: 3px solid #000000;
    outline-offset: 3px;
}

/* El indicador de teclado va aparte, con outline, para no tocar el relleno. */
.nito-wizard__nav .nito-wizard__btn:focus-visible {
    outline: 3px solid #000000;
    outline-offset: 3px;
}

/* --- Movil ------------------------------------------------------------- */
@media (max-width: 768px) {
    .nito-wizard__marca {
        font-size: 13px;
    }
}

@media (max-width: 600px) {
    /* Tres titulos no caben: se dejan solo los numeros, pero la etiqueta sigue
       en el DOM para quien navegue con lector de pantalla. */
    .nito-wizard__etiqueta {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .nito-wizard__marca {
        justify-content: center;
        gap: 0;
    }

    .nito-wizard__progreso {
        gap: 6px;
    }

    .nito-wizard__nav {
        flex-direction: column;
        align-items: stretch;
    }

    .nito-wizard__nav .nito-wizard__btn,
    .nito-wizard__nav .kb-submit-field .kb-adv-form-submit-button {
        width: 100%;
    }
}


/* ==========================================================================
   CARRITO (/carrito/): USABILIDAD
   ==========================================================================
   El carrito es el bloque de WooCommerce: las lineas y los totales los pinta
   React, asi que aqui solo se estilan las piezas que anade el tema por PHP
   (ver functions.php, "Carrito (/carrito/): mejoras de usabilidad") y se
   ajustan las clases .wc-block-* que ya trae el plugin.

   Las reglas que pisan al plugin llevan delante .wp-block-woocommerce-cart
   para subir un escalon de especificidad: la hoja de los bloques de
   WooCommerce se encola antes que style.css, pero no conviene depender solo
   del orden.
   ========================================================================== */

/* --- Seguir comprando --------------------------------------------------- */
.nito-carrito-volver {
    margin: 0 0 18px;
    font-size: 15px;
}

.nito-carrito-volver a,
.nito-carrito-volver a:link,
.nito-carrito-volver a:visited,
.nito-carrito-volver a:hover,
.nito-carrito-volver a:focus,
.nito-carrito-volver a:active {
    /* Igual que en el asistente de registro: Kadence pone el hover de los
       enlaces en --global-palette-highlight-alt, que aqui es blanco. */
    color: var(--global-palette1, #0018a9);
    text-decoration: none;
    font-weight: 600;
}

.nito-carrito-volver a:hover,
.nito-carrito-volver a:focus {
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* --- Aviso para profesionales ------------------------------------------- */
.nito-carrito-aviso {
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--global-palette1, #0018a9);
    border-left-width: 4px;
    border-radius: 6px;
    background: var(--global-palette9, #fbfcfe);
    color: var(--global-palette4, #3D3D3D);
    font-size: 14px;
    line-height: 1.45;
}

.nito-carrito-aviso a,
.nito-carrito-aviso a:link,
.nito-carrito-aviso a:visited,
.nito-carrito-aviso a:hover,
.nito-carrito-aviso a:focus,
.nito-carrito-aviso a:active {
    color: var(--global-palette1, #0018a9);
    text-decoration: underline;
    text-underline-offset: .2em;
    font-weight: 600;
}

/* --- Plazo por linea ---------------------------------------------------- */
/* El texto lo pone --nito-carrito-plazo, que se declara desde PHP para que la
   copia no viva en el CSS. Se ancla en .wc-block-cart-item__prices porque en
   la celda del producto el orden es nombre, precio, version y cantidad: asi
   la linea queda justo debajo del nombre. */
/* Sin texto desde el 2026-10-01: el plazo de 24-48 h ya no se anuncia. */
.wp-block-woocommerce-cart .wc-block-cart-item__prices::before {
    content: none;
    display: block;
    margin: 2px 0 6px;
    color: var(--global-palette6, #636363);
    font-size: 13px;
    line-height: 1.35;
}

/* --- Confianza junto al boton de pago ----------------------------------- */
.nito-carrito-pago {
    margin: 14px 0 0;
    text-align: center;
}

.nito-carrito-pago__sello {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    color: var(--global-palette4, #3D3D3D);
    font-size: 14px;
    font-weight: 600;
}

/* Candado en SVG incrustado, como el resto de iconos del tema: mask + color
   heredado para que siga al texto. */
.nito-carrito-pago__candado {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>') no-repeat center / contain;
}

.nito-carrito-pago__metodos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.nito-carrito-pago__metodo {
    margin: 0;
    font-size: 13px;
    line-height: 1;
}

.nito-carrito-pago__metodo img {
    max-height: 24px;
    width: auto;
}

/* --- Area tactil en movil ----------------------------------------------- */
/* De serie el boton "-"/"+" es min-width:30px, padding:0 y sin altura propia
   (unos 32px con el line-height del input), y la papelera es un enlace de
   texto de ~16px de alto. Los dos se quedan por debajo de los 44x44 px
   recomendados para el dedo. */
@media (max-width: 768px) {
    .wp-block-woocommerce-cart .wc-block-components-quantity-selector {
        width: auto;
    }

    .wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
        min-width: 44px;
        min-height: 44px;
        opacity: 1; /* de serie .6, que ademas deja poco contraste */
    }

    .wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
        min-height: 44px;
    }

    /* La papelera es el caso raro de los dos. WooCommerce la deja en escritorio
       dentro de un boton display:inline con width/height 24px -donde ni el
       ancho ni el alto aplican, porque el elemento es inline- y ademas la
       ESCONDE del todo cuando el contenedor del carrito es estrecho:
       .is-small / .is-mobile / .is-medium table.wc-block-cart-items
       .wc-block-cart-item__remove-link { display: none }, con especificidad
       0-3-1. Es decir, en el movil no habia forma de quitar una linea. Hay que
       recuperarla y darle area, y para ganarle a esa regla y a la base (0-4-1)
       el selector va por la cadena completa: 0-5-1. */
    .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-width: 44px;
        height: auto;
        min-height: 44px;
        padding: 0 6px;
    }
}

/* --- Aviso del IVA bajo el total ---------------------------------------- */
.nito-carrito-iva {
    margin: 8px 0 0;
    color: var(--global-palette6, #636363);
    font-size: 13px;
    line-height: 1.35;
}

/* --- Boton "Finalizar compra" ------------------------------------------- */
/* Es un <a class="wc-block-components-button wp-element-button
   wc-block-cart__submit-button contained">, asi que le caen encima los
   estilos de boton de Kadence: en reposo fondo var(--global-palette-btn-bg)
   -azul- pero color var(--global-palette-btn), que en este sitio es palette3,
   NEGRO; y en :hover/:focus/:active color palette9 sobre fondo palette2, es
   decir casi blanco sobre blanco, que es por lo que el boton desaparecia al
   pasar el raton. Ademas, al ser un <a>, tambien le entraba el a:hover del
   tema, que tira del mismo blanco.

   Las reglas de Kadence son 0-1-0 en reposo y 0-1-1 en los estados; con el
   contenedor delante estas son 0-2-0 y 0-2-1 y ganan sin !important. El anillo
   de foco de WooCommerce (0-3-0, box-shadow) se deja como esta a proposito:
   es el indicador de teclado. */
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
    border: 2px solid var(--global-palette1, #0018a9);
    border-radius: 10px;
    background: var(--global-palette1, #0018a9);
    color: var(--global-palette2, #ffffff);
    font-weight: 700;
}

/* El foco repite los colores de reposo y va ANTES de :hover, que empata en
   especificidad y decide el orden del archivo. */
.wp-block-woocommerce-cart .wc-block-cart__submit-button:focus {
    background: var(--global-palette1, #0018a9);
    color: var(--global-palette2, #ffffff);
}

/* Al pasar el raton, al contrario: fondo blanco y letra azul. El borde ya
   estaba puesto en reposo, del color del fondo, para que no cambie de tamano
   al hacerse visible. */
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart .wc-block-cart__submit-button:active {
    border-color: var(--global-palette1, #0018a9);
    background: var(--global-palette2, #ffffff);
    color: var(--global-palette1, #0018a9);
    box-shadow: none;
}

/* --- Aviso "no pagas nada por adelantado" -------------------------------- */
/* Sale encima del boton en el carrito y en el checkout (functions.php,
   nito_aviso_sin_pago_adelantado). Mismo lenguaje visual que el aviso para
   profesionales: filo azul a la izquierda y fondo casi blanco de la paleta. */
.nito-aviso-pago-adelantado {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--global-palette1, #0018a9);
    border-left-width: 4px;
    border-radius: 6px;
    background: var(--global-palette9, #fbfcfe);
    text-align: left;
}

.nito-aviso-pago-adelantado__icono {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1.3;
}

.nito-aviso-pago-adelantado__texto {
    margin: 0;
    color: var(--global-palette4, #3D3D3D);
    font-size: 14px;
    line-height: 1.5;
}

.nito-aviso-pago-adelantado__texto strong {
    color: var(--global-palette1, #0018a9);
}

@media (max-width: 600px) {
    .nito-aviso-pago-adelantado {
        padding: 12px 14px;
    }

    .nito-aviso-pago-adelantado__texto {
        font-size: 13.5px;
    }
}


/* ==========================================================================
   CHECKOUT POR PASOS
   ==========================================================================
   El reparto en pasos lo hace nito-child/woocommerce/checkout/form-checkout.php
   y el asistente vive en functions.php (nito_checkout_asistente_js). Las
   clases del asistente -.nito-paso, .nito-wizard*- son las mismas que las del
   formulario de registro, asi que el indicador de progreso y los botones ya
   estan estilados mas arriba en este archivo y aqui solo van los anadidos
   propios del checkout.
   ========================================================================== */

/* Sin JS no hay clase .nito-wizard y los cuatro bloques se ven seguidos; con
   ella, solo el paso activo. La regla de arriba (form.nito-wizard .nito-paso)
   ya lo hace, aqui solo se separan los bloques cuando se ven seguidos. */
.nito-checkout .nito-paso + .nito-paso {
    margin-top: 32px;
}

.nito-checkout.nito-wizard .nito-paso + .nito-paso {
    margin-top: 0;
}

/* En el checkout la columna de facturacion va a todo el ancho: el segundo
   bloque de #customer_details (la direccion de envio) se ha movido al paso 4. */
.nito-checkout #customer_details .col-1 {
    float: none;
    width: 100%;
}

/* La botonera va a la derecha y siempre al final del paso, que es donde estaba
   el boton de accion antes de partir el formulario: en el paso 4 eso la deja
   debajo del resumen del pedido, porque el resumen (#order_review) es el
   ultimo bloque del paso y la botonera se anade despues.
   Solo en el checkout: el formulario de registro de profesionales mantiene su
   botonera a la izquierda. */
.nito-checkout .nito-wizard__nav {
    justify-content: flex-end;
}

/* Mensajes de error del asistente, debajo del campo. */
.nito-checkout .nito-error {
    display: block;
    margin: 4px 0 0;
    color: #b3261e;
    font-size: 13px;
    line-height: 1.35;
}

/* La matricula, siempre en mayusculas. */
.nito-checkout .nito-campo-mayusculas input {
    text-transform: uppercase;
}

/* Ayuda del paso de envio. */
.nito-checkout .nito-checkout-envio-ayuda {
    margin: 0 0 18px;
    color: var(--global-palette6, #636363);
    font-size: 14px;
}

/* El dia de recogida se atenua cuando el envio lo hace el cliente: sigue
   visible -por si cambia de idea- pero deja de pedir atencion. */
.nito-checkout .nito-campo-inactivo {
    opacity: .55;
}

/* --- Documento de diagnosis --------------------------------------------- */
.nito-checkout .nito-diagnosis input[type="file"] {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 10px;
    border: 1px dashed var(--global-palette1, #0018a9);
    border-radius: 6px;
    background: var(--global-palette9, #fbfcfe);
    font-size: 14px;
}

.nito-checkout .nito-diagnosis__estado {
    display: block;
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.35;
}

.nito-checkout .nito-diagnosis__estado.is-ok {
    color: var(--global-palette1, #0018a9);
    font-weight: 600;
}

.nito-checkout .nito-diagnosis__estado.is-error {
    color: #b3261e;
}

/* --- Aviso de pago por transferencia ------------------------------------ */
.nito-checkout-pago {
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--global-palette1, #0018a9);
    border-left-width: 4px;
    border-radius: 6px;
    background: var(--global-palette9, #fbfcfe);
}

.nito-checkout-pago__texto {
    margin: 0;
    color: var(--global-palette4, #3D3D3D);
    font-size: 14px;
    line-height: 1.5;
}

.nito-checkout-pago__texto strong {
    color: var(--global-palette1, #0018a9);
}

/* --- Casillas legales --------------------------------------------------- */
.nito-checkout-legal {
    margin: 0 0 10px;
}

.nito-checkout-legal label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 1.45;
}

.nito-checkout-legal input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 3px;
}

.nito-checkout-legal a,
.nito-checkout-legal a:link,
.nito-checkout-legal a:visited,
.nito-checkout-legal a:hover,
.nito-checkout-legal a:focus,
.nito-checkout-legal a:active {
    color: var(--global-palette1, #0018a9);
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* --- Movil -------------------------------------------------------------- */
@media (max-width: 600px) {
    /* Area tactil suficiente en los campos del checkout. */
    .nito-checkout .form-row input.input-text,
    .nito-checkout .form-row select,
    .nito-checkout .form-row textarea {
        min-height: 44px;
    }

    .nito-checkout-legal input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }
}


/* ==========================================================================
   CHECKOUT: DOS COLUMNAS Y VERSION COMPACTA
   ==========================================================================
   Recupera la disposicion que tenia el checkout antes de partirlo en pasos:
   los campos a la izquierda y el resumen del pedido a la derecha, visible en
   todo momento. Kadence lo hacia con floats
   (form.checkout .col2-set { float:left; width:50% } y
    form.checkout .woocommerce-checkout-review-order { width:50%; float:left }),
   pero con el asistente la columna izquierda puede ser mas corta que el
   resumen y entonces el float lo tira debajo. Con grid la posicion es fija.
   ========================================================================== */

@media (min-width: 1025px) {
    .nito-checkout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
        grid-template-areas:
            "progreso progreso"
            "pasos    resumen";
        column-gap: 36px;
        align-items: start;
    }

    .nito-checkout .nito-wizard__progreso {
        grid-area: progreso;
    }

    .nito-checkout .nito-checkout-pasos {
        grid-area: pasos;
    }

    .nito-checkout .nito-checkout-resumen {
        grid-area: resumen;
        position: sticky;
        /* La cabecera fija solo existe desde 1025px, que es justo donde entra
           este bloque, asi que hay que descontarla. */
        top: 110px;
    }

    /* Kadence maqueta el checkout con floats y anchos del 50%:
         form.checkout .col2-set                          -> 0-2-1
         form.checkout #order_review_heading              -> 1-1-1
         form.checkout .woocommerce-checkout-review-order -> 0-2-1
       En un contenedor grid el float se ignora, pero el ancho NO, asi que hay
       que ganarle en especificidad y no solo en orden: con el 50% la columna
       izquierda ocupaba la mitad de su carril y dejaba un hueco enorme en
       medio. Se listan dos formas del selector: la larga gana por
       especificidad (0-3-1 y 1-2-1) y la corta cubre el caso de que el
       envoltorio .woocommerce dejara de estar ahi, empatando y ganando por
       orden de carga. */
    .woocommerce form.nito-checkout .col2-set,
    .woocommerce form.nito-checkout .nito-checkout-resumen,
    .woocommerce form.nito-checkout #order_review_heading,
    .woocommerce form.nito-checkout .woocommerce-checkout-review-order,
    form.nito-checkout .col2-set,
    form.nito-checkout .nito-checkout-resumen,
    form.nito-checkout #order_review_heading,
    form.nito-checkout .woocommerce-checkout-review-order {
        float: none;
        width: auto;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
        clear: none;
    }
}

/* --- Version compacta --------------------------------------------------- */
/* El formulario tenia mucho aire para un paso de compra: se aprieta el ritmo
   vertical sin bajar de las medidas tactiles en movil (ver el bloque de 600px
   mas abajo, que devuelve los 44px a los campos). */
.nito-checkout .nito-paso .nito-paso__titulo {
    margin: 0 0 4px;
    font-size: 18px;
}

.nito-checkout .nito-paso .nito-paso__subtitulo {
    margin: 0 0 12px;
    font-size: 13px;
}

/* Kadence aprieta -o afloja- las filas desde .woocommerce form .form-row
   (0-2-1, margin: 0 0 .8em). Hay que ir a 0-3-1 para ganarle: con 0-2-0 el
   formulario seguia con el espaciado de fabrica. */
.woocommerce form.nito-checkout .form-row,
.nito-checkout .form-row {
    margin: 0 0 10px;
}

/* Kadence pinta las etiquetas del checkout con
   .woocommerce form .form-row label { line-height:2.4; font-size:90% } a 0-2-2,
   y ese line-height de 2.4 es la mitad del aire que sobraba. Hay que subir a
   0-3-2 para ganarle. */
.woocommerce form.nito-checkout .form-row label,
.nito-checkout .form-row label {
    margin: 0 0 3px;
    font-size: 13px;
    line-height: 1.3;
}

.nito-checkout .form-row input.input-text,
.nito-checkout .form-row select,
.nito-checkout .form-row textarea {
    padding: 8px 10px;
    font-size: 15px;
    line-height: 1.35;
}

.nito-checkout .form-row textarea {
    height: auto;
    min-height: 92px;
}

.nito-checkout .nito-campos-paso {
    /* Cierra los floats de form-row-first / form-row-last. */
    display: flow-root;
}

.nito-checkout .nito-checkout-envio-ayuda {
    margin: 0 0 12px;
    font-size: 13px;
}

.nito-checkout .woocommerce-shipping-fields,
.nito-checkout .woocommerce-additional-fields {
    margin-top: 12px;
}

.nito-checkout .woocommerce-shipping-fields h3,
.nito-checkout .woocommerce-additional-fields h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

.nito-checkout .nito-wizard__nav {
    margin-top: 16px;
}

/* El indicador de progreso, tambien mas bajo. */
.nito-checkout .nito-wizard__progreso {
    margin-bottom: 20px;
}

.nito-checkout .nito-wizard__marca {
    padding-bottom: 8px;
    font-size: 13px;
}

.nito-checkout .nito-wizard__numero {
    width: 26px;
    height: 26px;
    font-size: 13px;
}

/* --- El resumen, mas apretado ------------------------------------------- */
/* El margen tambien lo pisa Kadence desde form.checkout #order_review_heading
   (1-1-1, margin: 0 0 .5em), asi que este selector va a 1-2-1. */
.woocommerce form.nito-checkout #order_review_heading,
.nito-checkout #order_review_heading {
    margin: 0 0 10px;
    font-size: 18px;
}

.nito-checkout .woocommerce-checkout-review-order {
    padding: 16px;
    border: 1px solid var(--global-palette7, #fafafb);
    border-radius: 8px;
    background: var(--global-palette9, #fbfcfe);
}

/* Y las filas del resumen las pinta .woocommerce table.shop_table td a 0-2-2,
   asi que este selector va a 0-3-1: gana en la columna de las clases. */
.woocommerce form.nito-checkout .woocommerce-checkout-review-order-table th,
.woocommerce form.nito-checkout .woocommerce-checkout-review-order-table td,
.nito-checkout .woocommerce-checkout-review-order-table th,
.nito-checkout .woocommerce-checkout-review-order-table td {
    padding: 6px 0;
    font-size: 14px;
    line-height: 1.35;
}

.nito-checkout .woocommerce-checkout-review-order-table {
    margin: 0 0 12px;
}

.nito-checkout #payment ul.payment_methods {
    margin: 0 0 10px;
    padding: 0;
}

.nito-checkout #payment div.payment_box {
    margin: 6px 0 10px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
}

.nito-checkout .nito-aviso-pago-adelantado {
    margin: 0 0 10px;
    padding: 10px 12px;
}

.nito-checkout .nito-aviso-pago-adelantado__texto {
    font-size: 13px;
}

/* El bloque de pago -forma de pago, aviso, casillas legales y "Realizar el
   pedido"- solo en el ultimo paso. La clase la pone el asistente; sin JS no
   hay clase .nito-wizard y el bloque se ve siempre, como en el checkout de
   siempre. */
.nito-checkout.nito-wizard:not(.nito-ultimo-paso) #payment {
    display: none;
}

/* Con una sola forma de pago, su nombre solo repite el aviso de encima. El
   input sigue en el DOM, asi que payment_method se envia igual. */
body.nito-pago-unico .nito-checkout #payment ul.payment_methods {
    display: none;
}

.nito-checkout .nito-checkout-legal {
    margin: 0 0 8px;
}

.nito-checkout .nito-checkout-legal label {
    font-size: 13px;
}

.nito-checkout #place_order {
    width: 100%;
}

/* --- Movil -------------------------------------------------------------- */
/* Por debajo de 1025px las dos columnas caen una debajo de otra: el resumen,
   despues de los pasos. */
@media (max-width: 1024px) {
    .nito-checkout .nito-checkout-resumen {
        margin-top: 28px;
    }
}

/* --- Aviso de privacidad de WooCommerce --------------------------------- */
/* El texto lo pone woocommerce_get_privacy_policy_text (ver functions.php);
   aqui solo se deja en letra pequena, que es informacion secundaria. */
.nito-checkout .woocommerce-privacy-policy-text {
    margin: 0 0 12px;
}

.nito-checkout .woocommerce-privacy-policy-text p {
    margin: 0;
    color: var(--global-palette6, #636363);
    font-size: 12px;
    line-height: 1.4;
}

.nito-checkout .woocommerce-privacy-policy-text a,
.nito-checkout .woocommerce-privacy-policy-text a:link,
.nito-checkout .woocommerce-privacy-policy-text a:visited,
.nito-checkout .woocommerce-privacy-policy-text a:hover,
.nito-checkout .woocommerce-privacy-policy-text a:focus,
.nito-checkout .woocommerce-privacy-policy-text a:active {
    color: var(--global-palette1, #0018a9);
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* --- "Realizar el pedido" ------------------------------------------------ */
/* Kadence lo pinta con sus colores de boton: fondo azul pero letra NEGRA
   (--global-palette-btn es palette3) y en :hover/:focus/:active casi blanco
   sobre blanco. Y encima WooCommerce declara #payment #place_order (2-0-0),
   asi que aqui hay que llegar a una especificidad que gane a un doble ID:
   body.woocommerce-checkout form.nito-checkout #payment #place_order suma
   2-2-2. */
body.woocommerce-checkout form.nito-checkout #payment #place_order {
    border: 2px solid var(--global-palette1, #0018a9);
    border-radius: 10px;
    background: var(--global-palette1, #0018a9);
    color: var(--global-palette2, #ffffff);
    font-weight: 700;
}

/* El foco repite el reposo, y va antes que :hover porque empatan. */
body.woocommerce-checkout form.nito-checkout #payment #place_order:focus {
    background: var(--global-palette1, #0018a9);
    color: var(--global-palette2, #ffffff);
}

body.woocommerce-checkout form.nito-checkout #payment #place_order:hover,
body.woocommerce-checkout form.nito-checkout #payment #place_order:active {
    border-color: var(--global-palette1, #0018a9);
    background: var(--global-palette2, #ffffff);
    color: var(--global-palette1, #0018a9);
    box-shadow: none;
}

/* --- Sugerencias de marca y modelo -------------------------------------- */
/* Lista propia en lugar del datalist del navegador, que pinta una flecha y se
   lee como un desplegable. El contenedor es .woocommerce-input-wrapper, al que
   se le pone position para que la caja se ancle al campo. */
.nito-checkout .nito-campos-paso .woocommerce-input-wrapper {
    position: relative;
    display: block;
}

.nito-sugerencias {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 240px;
    margin: 2px 0 0;
    padding: 4px 0;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--global-palette1, #0018a9);
    border-radius: 6px;
    background: var(--global-palette2, #ffffff);
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .25);
}

.nito-sugerencias__opcion {
    margin: 0;
    padding: 7px 12px;
    color: var(--global-palette4, #3D3D3D);
    font-size: 14px;
    line-height: 1.3;
    cursor: pointer;
}

.nito-sugerencias__opcion:hover,
.nito-sugerencias__opcion.is-activa {
    background: var(--global-palette1, #0018a9);
    color: var(--global-palette2, #ffffff);
}

/* --- Encabezado del checkout -------------------------------------------- */
.nito-checkout-encabezado {
    margin: 0 0 20px;
}

/* WooCommerce pinta su propio <h3>Detalles de facturación</h3> dentro de
   .woocommerce-billing-fields, y en los pasos ya hay un titulo propio
   ("Dirección de facturación"), asi que sobra. Se esconde en lugar de copiar
   otra plantilla de WooCommerce solo para borrar una linea; display:none lo
   saca tambien del arbol de accesibilidad, que es lo que se quiere: repetido
   no aporta nada. */
.nito-checkout .woocommerce-billing-fields > h3 {
    display: none;
}

/* --- Miniatura en el resumen del pedido --------------------------------- */
/* La celda pasa a ser una fila flexible: imagen, nombre y la cantidad que
   WooCommerce escribe justo despues del nombre. El padding derecho la separa
   de la columna Total: sin el, el "× 1" quedaba pegado al precio (Carla,
   2026-10-09). */
.nito-checkout .woocommerce-checkout-review-order-table td.product-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding-right: 16px;
}

.nito-checkout .woocommerce-checkout-review-order-table .nito-resumen__imagen {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 6px;
    background-color: var(--global-palette2, #ffffff);
    object-fit: contain;
}

/* El nombre ocupa lo justo para que la cantidad vaya detras de el
   ("MÓDULO ABS BMW × 1") y no al extremo derecho de la celda, junto al
   precio. */
.nito-checkout .woocommerce-checkout-review-order-table .nito-resumen__nombre {
    flex: 0 1 auto;
    min-width: 0;
}

.nito-checkout .woocommerce-checkout-review-order-table .product-quantity {
    flex: 0 0 auto;
    color: var(--global-palette6, #636363);
    font-weight: 600;
    white-space: nowrap;
}

/* La version («Módulos BMW: Módulo ABS estándar», «Módulo: 1 de 2») ocupa su
   propia linea a lo ancho de la celda y no mas: sin limite, el <dl> crecia lo
   que pedia su texto y se metia en la columna Total. Cada dato en una linea
   (Carla, 2026-10-09). */
.nito-checkout .woocommerce-checkout-review-order-table td.product-name dl.variation {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.nito-checkout .woocommerce-checkout-review-order-table td.product-name dl.variation dd::after {
    content: "\A";
    white-space: pre;
}


/* ==========================================================================
   PRECIOS AZULES — PROCESO DE COMPRA
   ==========================================================================
   El sitio mezcla los dos WooCommerce y por eso hacen falta dos familias de
   selectores: el carrito (pagina 3793) es el BLOQUE wp:woocommerce/cart, que
   pinta React, y el checkout (3794), el pedido recibido y "mi cuenta" son
   clasicos, con plantillas PHP.

   Verificado sobre el HTML que sirve cada pantalla, no sobre la documentacion:

   - Clasico: todo precio que pasa por wc_price() sale como
     <span class="woocommerce-Price-amount amount">, asi que basta acotar por
     el contenedor de cada pantalla. Confirmado en el checkout
     (.woocommerce-checkout-review-order-table), en el pedido recibido
     (.woocommerce-order-overview__total y .woocommerce-order-details) y en
     mi cuenta (.woocommerce-orders-table y .woocommerce-order-details).
   - Bloques: FormattedMonetaryAmount emite DOS clases a la vez,
     wc-block-formatted-money-amount y wc-block-components-formatted-money-amount
     (ver wc-cart-checkout-base-frontend.js), de ahi que la regla que ya habia
     mas arriba en este archivo -con la forma corta- si funcionara. Esa regla se
     mantiene y solo se le ha cambiado el hex por la variable, para que el azul
     tenga un unico sitio donde cambiarse.

   Dos avisos sobre esta lista:

   - El mini-carrito NO existe en este sitio: no hay widget_shopping_cart ni
     bloque wc-block-mini-cart. Lo que hay en la cabecera es el carrito de
     Kadence (.header-cart-wrap), y ahi solo se muestra el NUMERO de articulos,
     no un precio. Los selectores del mini-carrito se dejan puestos como red
     por si algun dia se anade uno, pero hoy no pintan nada.
   - No se toca el precio del catalogo (.woocommerce ul.products li.product
     .price, que usa otro azul, #0055ff) porque no es parte del proceso de
     compra.

   El !important es el de siempre en este archivo para marcado de terceros: en
   el lado de bloques hace falta para ganar a las reglas del plugin, y se
   mantiene en el lado clasico para que el grupo entero se comporte igual. Solo
   se declara el color: ni el peso ni el tamano se tocan.
   ========================================================================== */

:root {
    /* El azul de marca. Es el mismo valor que --global-palette1 de Kadence,
       pero con nombre propio para no depender de que la paleta no cambie. */
    --nito-price-color: #0018a9;
}

/* --- WooCommerce clasico ------------------------------------------------- */

/* Checkout: la tabla del resumen lleva dentro el precio de cada linea, el
   subtotal, el envio, el IVA y el total. */
.woocommerce-checkout-review-order-table .woocommerce-Price-amount,

/* Carrito clasico, por si la pagina 3793 volviera al shortcode. */
.woocommerce-cart-form .woocommerce-Price-amount,
.cart_totals .woocommerce-Price-amount,

/* Pedido recibido: el total del resumen de arriba y la tabla de detalles. */
.woocommerce-order-overview__total .woocommerce-Price-amount,
.woocommerce-order-details .woocommerce-Price-amount,

/* Mi cuenta: el listado de pedidos y la ficha de uno. */
.woocommerce-orders-table .woocommerce-Price-amount,

/* Red por si algun dia se activa el widget de carrito. */
.widget_shopping_cart .woocommerce-Price-amount,

/* El total de la barra fija de movil (ver nito_checkout_envolver_boton). */
.nito-accion-final__total-importe .woocommerce-Price-amount {
    color: var(--nito-price-color) !important;
    /* Todos los importes con el mismo peso: antes solo salian en negrita el
       total y el envio, porque WooCommerce los envuelve en <strong>, y el
       subtotal y el IVA quedaban finos al lado. */
    font-weight: 700;
}

/* --- WooCommerce Blocks -------------------------------------------------- */

/* Carrito de bloques: importes de cada linea, del resumen y de los totales. */
.wp-block-woocommerce-cart .wc-block-components-formatted-money-amount,
.wp-block-woocommerce-cart .wc-block-components-totals-item__value,
.wp-block-woocommerce-cart .wc-block-cart-item__prices,
.wp-block-woocommerce-cart .wc-block-components-product-price,

/* Checkout de bloques, por si la pagina 3794 volviera al bloque. */
.wp-block-woocommerce-checkout .wc-block-components-formatted-money-amount,
.wp-block-woocommerce-checkout .wc-block-components-totals-item__value,
.wp-block-woocommerce-checkout .wc-block-components-product-price,

/* Resumen del pedido de bloques, en carrito y en checkout. */
.wc-block-components-order-summary-item__total-price,

/* Red para el mini-carrito de bloques. */
.wc-block-mini-cart__footer-subtotal .wc-block-components-formatted-money-amount {
    color: var(--nito-price-color) !important;
    /* Todos los importes con el mismo peso: antes solo salian en negrita el
       total y el envio, porque WooCommerce los envuelve en <strong>, y el
       subtotal y el IVA quedaban finos al lado. */
    font-weight: 700;
}


/* ==========================================================================
   CHECKOUT: ACCIÓN PRINCIPAL Y MÉTODO DE ENVÍO
   ==========================================================================
   El bloque de pago (#payment) se ha movido al final del paso 4, en la columna
   izquierda, desde la plantilla form-checkout.php del tema hijo. El botón es el
   de WooCommerce, no un clon: solo va envuelto en .nito-accion-final (ver
   nito_checkout_envolver_boton en functions.php).

   Reparto:
     .nito-accion-final              la fila: [Atrás] · · · [principal]
     .nito-accion-final__principal   total + botón; en móvil, la barra fija
   El "Atrás" queda FUERA de __principal a propósito, para que en móvil se
   quede en el flujo y no dentro de la barra.
   ========================================================================== */

/* --- Método de envío en el paso 4 --------------------------------------- */
.nito-checkout .nito-envio {
    margin: 4px 0 14px;
    padding: 0;
    border: 0;
}

.nito-checkout .nito-envio__titulo {
    margin: 0 0 6px;
    padding: 0;
    color: var(--global-palette4, #3D3D3D);
    font-size: 13px;
    font-weight: 600;
}

.nito-checkout .nito-envio__opciones {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nito-checkout .nito-envio__opcion {
    margin: 0 0 6px;
}

.nito-checkout .nito-envio__opcion label {
    display: inline;
    margin: 0 0 0 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    cursor: pointer;
}

.nito-checkout .nito-envio__opcion input[type="radio"] {
    margin: 0;
    vertical-align: middle;
}

/* El envío en el resumen es solo un dato, sin radios. */
.nito-checkout .nito-envio-elegido {
    font-size: 14px;
}

/* --- La fila de la acción principal ------------------------------------- */
.nito-accion-final {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}

.nito-accion-final__principal {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-left: auto;
}

/* El total solo se usa en la barra de móvil. */
.nito-accion-final__total {
    display: none;
}

/* "Atrás" pierde el borde y pasa a fantasma para no competir con la acción
   principal. Los colores de reposo se repiten en :focus -y antes de :hover-
   porque Kadence declara button:hover, button:focus, button:active con sus
   propios colores a 0-1-1 y un <button> conserva el foco tras pulsarlo. */
.nito-accion-final .nito-wizard__btn--atras {
    padding: 12px 8px;
    border-color: transparent;
    background: transparent;
    color: var(--global-palette6, #636363);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.nito-accion-final .nito-wizard__btn--atras:focus {
    border-color: transparent;
    background: transparent;
    color: var(--global-palette6, #636363);
    box-shadow: none;
}

.nito-accion-final .nito-wizard__btn--atras:hover,
.nito-accion-final .nito-wizard__btn--atras:active {
    border-color: transparent;
    background: transparent;
    color: var(--nito-price-color, #0018a9);
    box-shadow: none;
}

/* En escritorio el botón no necesita ocupar todo el ancho de la columna. */
@media (min-width: 769px) {
    body.woocommerce-checkout form.nito-checkout #payment #place_order {
        width: auto;
        min-width: 220px;
    }
}

/* --- Móvil: barra fija -------------------------------------------------- */
@media (max-width: 768px) {
    /* Solo en el último paso: en los tres primeros no hay acción principal que
       fijar, y la clase la pone el asistente. */
    .nito-checkout.nito-wizard.nito-ultimo-paso .nito-accion-final__principal {
        position: fixed;
        z-index: 30;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0;
        padding: 10px 16px;
        border-top: 1px solid var(--global-palette7, #fafafb);
        background: var(--global-palette2, #ffffff);
        box-shadow: 0 -6px 18px -10px rgba(0, 0, 0, .35);
    }

    .nito-checkout.nito-wizard.nito-ultimo-paso .nito-accion-final__total {
        display: block;
        flex: 0 1 auto;
        color: var(--global-palette4, #3D3D3D);
        font-size: 13px;
        line-height: 1.25;
    }

    .nito-checkout.nito-wizard.nito-ultimo-paso .nito-accion-final__total-etiqueta {
        display: block;
        color: var(--global-palette6, #636363);
        font-size: 12px;
    }

    .nito-checkout.nito-wizard.nito-ultimo-paso .nito-accion-final__total-importe {
        font-size: 16px;
        font-weight: 700;
    }

    body.woocommerce-checkout form.nito-checkout.nito-ultimo-paso #payment #place_order {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        padding: 12px 20px;
    }

    /* Hueco para que la barra no tape el último campo. */
    .nito-checkout.nito-wizard.nito-ultimo-paso {
        padding-bottom: 84px;
    }

    /* El "Atrás" se queda en el flujo, a ancho completo. */
    .nito-accion-final {
        flex-direction: column;
        align-items: stretch;
    }

    .nito-accion-final .nito-wizard__btn--atras {
        order: 2;
    }
}

/* ==========================================================================
   AVISO AÑADIDO AL CARRITO
   ==========================================================================
   El marcado lo emite nito_aviso_anadido_carrito() en functions.php.

   Especificidades en juego, para no acabar en !important:

     button, .button, …                                    0-1-0  Kadence global
     .button:hover, .button:focus, .button:active           0-2-0  Kadence global
     .woocommerce .woocommerce-message .button              0-3-0  Kadence woo
     .woocommerce div.product div.summary .added_to_cart    0-4-2  Kadence woo
     .woocommerce.kadence-cart-button-normal … .added_to_cart 0-5-2  Kadence woo

   El botón del aviso se ancla en sus PROPIAS clases (0-3-1) y no en
   ".woocommerce …": en este sitio la clase "woocommerce" está solo en <body>
   y no hay ningún <div class="woocommerce"> envolvente, así que un selector
   con el prefijo "body" no casaría con nada. El enlace de AJAX sí usa la
   cadena de Kadence, porque hay que superar ese 0-5-2 concreto.

   El hover de Kadence es el problema de fondo: --global-palette-btn-bg-hover
   resuelve a #ffffff y --global-palette-btn-hover a #fbfcfe, o sea blanco
   sobre casi blanco. Por eso el estado invertido restablece los tres valores
   (fondo, color y box-shadow) y el borde azul está también en reposo, para que
   la caja no cambie de tamaño al invertirse.

   El envoltorio único (un solo <span> dentro de .woocommerce-message) está ahí
   por el column-reverse de Kadence, que NO es incondicional: vive en
   @media screen and (max-width: 540px), junto con un float:none para .button.
   Por debajo de 540px el aviso pasa a flex en columna invertida, así que con
   dos hijos las acciones saldrían encima del texto; con uno solo no hay nada
   que reordenar. En escritorio el aviso es un bloque normal, y el float:right
   que Kadence le da a .button lo ignora el navegador porque el botón es un
   elemento flex dentro de .nito-aviso-carrito__acciones.

   WooCommerce no aporta nada aquí: Kadence sustituye woocommerce.css por su
   propia hoja, así que no hay flecha ::after en .wc-forward ni estilo base de
   .woocommerce-message del plugin.
   ========================================================================== */

.nito-aviso-carrito {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
}

.nito-aviso-carrito__texto {
    flex: 1 1 260px;
}

.nito-aviso-carrito__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

/* --- Acción principal: "Ver carrito" ------------------------------------
   Mismo aspecto en el aviso y en el enlace que inserta el add-to-cart por
   AJAX, que ya se llama "Ver carrito" (i18n_view_cart), para que no haya dos
   tratamientos de la misma acción. */
.nito-aviso-carrito .nito-aviso-carrito__acciones a.nito-aviso-carrito__ver,
.woocommerce div.product div.summary a.added_to_cart.wc-forward,
.woocommerce ul.products li.product a.added_to_cart.wc-forward {
    display: inline-block;
    padding: 10px 22px;
    border: 2px solid #0018a9;
    border-radius: 10px;
    background: #0018a9;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Kadence le pone margin-top:.5em dentro del aviso; aquí lo coloca el gap. */
.nito-aviso-carrito .nito-aviso-carrito__acciones a.nito-aviso-carrito__ver {
    margin: 0;
}

.nito-aviso-carrito .nito-aviso-carrito__acciones a.nito-aviso-carrito__ver:hover,
.nito-aviso-carrito .nito-aviso-carrito__acciones a.nito-aviso-carrito__ver:focus,
.woocommerce div.product div.summary a.added_to_cart.wc-forward:hover,
.woocommerce div.product div.summary a.added_to_cart.wc-forward:focus,
.woocommerce ul.products li.product a.added_to_cart.wc-forward:hover,
.woocommerce ul.products li.product a.added_to_cart.wc-forward:focus {
    border-color: #0018a9;
    background: #ffffff;
    color: #0018a9;
    box-shadow: none;
}

/* El indicador de teclado va aparte: así sobrevive al invertirse los colores
   y no se dibuja también al pulsar con el ratón. */
.nito-aviso-carrito .nito-aviso-carrito__acciones a.nito-aviso-carrito__ver:focus-visible,
.woocommerce div.product div.summary a.added_to_cart.wc-forward:focus-visible,
.woocommerce ul.products li.product a.added_to_cart.wc-forward:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 3px;
}

/* --- Acción secundaria: "Seguir comprando" ------------------------------ */
.nito-aviso-carrito .nito-aviso-carrito__acciones a.nito-aviso-carrito__seguir {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: #0018a9;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.nito-aviso-carrito .nito-aviso-carrito__acciones a.nito-aviso-carrito__seguir:hover,
.nito-aviso-carrito .nito-aviso-carrito__acciones a.nito-aviso-carrito__seguir:focus {
    background: none;
    box-shadow: none;
    color: #0018a9;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.nito-aviso-carrito .nito-aviso-carrito__acciones a.nito-aviso-carrito__seguir:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .nito-aviso-carrito {
        justify-content: flex-start;
    }

    .nito-aviso-carrito__acciones {
        width: 100%;
    }

    .nito-aviso-carrito .nito-aviso-carrito__acciones a.nito-aviso-carrito__ver {
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   HOME — PRODUCTO DESTACADO
   ==========================================================================
   Sección de producto estrella de la portada. El marcado NO está en el
   contenido de la página: lo emite el shortcode [nito_producto_destacado]
   (functions.php), que lee precio, imagen, título, enlace y stock en vivo de
   WooCommerce. El ID del producto se cambia en la constante
   NITO_PRODUCTO_DESTACADO y el texto en nito_destacado_copy().

   Componente INDEPENDIENTE a propósito: no comparte ni una clase con
   .nito-repmod (las secciones de ABS coche y moto). Se valoró reutilizar su
   checklist y su botón, pero eso habría dejado tres secciones acopladas a un
   mismo par de reglas.

   Por qué la banda no va a sangre. Las tres secciones viven dentro de una fila
   de Kadence cuyo .kt-row-column-wrap ya declara
     max-width: var(--global-content-width, 1290px)
     padding-left/right: var(--global-content-edge-padding)
   así que desde dentro no se puede llegar al borde de la ventana sin un
   margin: calc(50% - 50vw), que arriesga barra horizontal. La banda es por
   tanto un panel redondeado al ancho del contenido. De paso: las secciones de
   ABS declaran otra vez ese max-width y ese padding dentro de un contenedor
   que ya los tiene, así que van con el doble de sangrado; aquí no se repite.

   Contrastes medidos (mínimo AA 4,5:1 para texto pequeño):
     blanco sobre #0018a9 (CTA, badges)        12,33:1
     #0f172a sobre #fafafb (titular)           17,11:1
     #475569 sobre #fafafb (cuerpo)             7,26:1
     #64748b sobre #fafafb (secundario)         4,56:1
     estrella #fbc72a sobre #0018a9             7,81:1

   El verde del botón de asesoría es #17843a y NO el #23b946 de la maqueta:
   con blanco encima ese daba 2,59:1 -y el verde oficial de WhatsApp, #25d366,
   1,98:1-, muy por debajo del mínimo. #17843a da 4,77:1 y sigue leyéndose como
   el verde de WhatsApp.
   ========================================================================== */

/* El fondo llega a todo el ancho de la ventana y el contenido se queda
   centrado, y se consigue SIN tocar la anchura del elemento.

   Lo evidente sería margin-inline: calc(50% - 50vw), y es justo lo que no hay
   que hacer aquí: 100vw incluye la barra de desplazamiento vertical, así que en
   escritorio se pasa ~8-9px por cada lado y aparece barra horizontal. Y no se
   puede compensar con overflow-x en un antepasado porque la sección vive dentro
   de una fila de Kadence, no en la raíz.

   En su lugar, el fondo se pinta con una sombra sólida de 100vmax de extensión
   -las sombras son solo tinta: no generan desbordamiento desplazable- y el
   clip-path la recorta arriba y abajo dejando pasar los lados. La caja sigue
   midiendo lo que medía, así que no hay nada que compensar.

   Ojo: clip-path crea contexto de apilamiento y recorta a los descendientes,
   así que no metas aquí nada position:fixed. */
.nito-destacado {
    width: 100%;
    padding: clamp(22px, var(--global-content-edge-padding, 2rem), 44px);
    background: #fafafb;
    box-shadow: 0 0 0 100vmax #fafafb;
    clip-path: inset(0 -100vmax);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.nito-destacado__interior {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 28px;
    align-items: start;
    max-width: var(--global-content-width, 1290px);
    margin: 0 auto;
}

/* Los iconos heredan el color del contexto: aquí sí se puede, porque van en
   línea en el HTML y no dentro de un <img>. */
.nito-destacado__icono {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: currentColor;
}

/* --- Columna de texto ---------------------------------------------------- */
.nito-destacado__texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.nito-destacado__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #0018a9;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
}

/* La estrella es el único color de fuera de la paleta, y viene de la maqueta. */
.nito-destacado__badge .nito-destacado__icono {
    width: 14px;
    height: 14px;
    color: #fbc72a;
}

.nito-destacado__titulo {
    margin: 0;
    color: #0f172a;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 800;
    line-height: 1.15;
}

/* La palabra en azul del titular va en <b> dentro del texto. */
.nito-destacado__titulo b {
    color: #0018a9;
    font-weight: 800;
}

/* El guion de la maqueta se pone desde el CSS para que no viaje en el texto. */
.nito-destacado__subtitulo {
    margin: -8px 0 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.nito-destacado__subtitulo::before {
    content: "\2013\00a0";
}

.nito-destacado__entrada {
    margin: 0;
    max-width: 46ch;
    color: #475569;
    font-size: 14px;
    line-height: 1.55;
}

.nito-destacado__entrada strong {
    color: #0018a9;
}

/* --- Los puntos técnicos ------------------------------------------------- */
.nito-destacado__puntos {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
    width: 100%;
}

.nito-destacado__punto {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0f172a;
    font-size: 13.5px;
    line-height: 1.4;
}

/* Cuadrado redondeado, no círculo: es lo que distingue estos checks de los de
   las secciones de ABS. Los colores van en el SVG porque son fijos. */
.nito-destacado__punto-icono {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* --- Los dos botones ----------------------------------------------------- */
.nito-destacado__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

/* Los colores de reposo se repiten en :focus -y ANTES de :hover- porque
   Kadence declara .button:hover/:focus/:active a 0-2-0 con sus propios colores
   (blanco sobre #fbfcfe) y un enlace conserva el foco tras pulsarlo. Aquí el
   selector no lleva la clase .button, así que esa regla no entra, pero se deja
   el patrón por si algún día se le añade. */
.nito-destacado__boton {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 24px;
    border: 2px solid #0018a9;
    border-radius: 999px;
    background: #0018a9;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.nito-destacado__boton:focus,
.nito-destacado__boton:hover,
.nito-destacado__boton:active {
    border-color: #0018a9;
    background: #ffffff;
    color: #0018a9;
    box-shadow: none;
}

.nito-destacado__boton:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 3px;
}

.nito-destacado__boton--asesoria {
    border-color: #17843a;
    background: #17843a;
}

.nito-destacado__boton--asesoria:focus,
.nito-destacado__boton--asesoria:hover,
.nito-destacado__boton--asesoria:active {
    border-color: #17843a;
    background: #ffffff;
    color: #17843a;
}

.nito-destacado__boton--asesoria:focus-visible {
    outline-color: #17843a;
}

/* --- La caja de indicadores ---------------------------------------------- */
/* auto-fit y no un número fijo de columnas: los indicadores salen de un array
   en PHP, así que la rejilla se adapta a cuántos haya. Hoy son dos, porque la
   cifra de kits entregados está sin confirmar. */
.nito-destacado__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 6px 4px;
    width: 100%;
    margin-top: 8px;
    padding: 14px 6px;
    border-radius: 14px;
    background: #e8ecfb;
}

.nito-destacado__stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px;
    border-left: 1px solid #c1cbf5;
}

.nito-destacado__stat:first-child {
    border-left: none;
}

.nito-destacado__stat-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #0018a9;
}

.nito-destacado__stat-icono .nito-destacado__icono {
    width: 20px;
    height: 20px;
}

.nito-destacado__stat-texto {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nito-destacado__stat-cifra {
    color: #0018a9;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

.nito-destacado__stat-pie {
    color: #475569;
    font-size: 11px;
    line-height: 1.3;
}

/* --- La tira de confianza ------------------------------------------------ */
.nito-destacado__confianza {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
    width: 100%;
    margin: 6px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid #c1cbf5;
    list-style: none;
}

.nito-destacado__confianza-item {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #475569;
    font-size: 12px;
}

.nito-destacado__confianza-item .nito-destacado__icono {
    width: 15px;
    height: 15px;
    color: #0018a9;
}

/* --- La tarjeta del producto --------------------------------------------- */
.nito-destacado__tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 40px -28px rgba(15, 23, 42, .35);
}

.nito-destacado__tarjeta-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;
    padding: 5px 12px;
    border-radius: 999px;
    background: #0018a9;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
}

/* El enlace de la imagen va aria-hidden y con tabindex -1 desde PHP: el
   titular y el "VER MÁS" ya llevan al mismo sitio, y así no hay tres paradas
   de tabulación seguidas hacia la misma URL. */
.nito-destacado__tarjeta-imagen {
    display: block;
    padding: 14px 0 0;
}

/* 4/3 y con techo de altura, no 1/1: a cuadrado, la imagen ocupa todo el ancho
   de la tarjeta y la deja ~300px mas alta que la columna de texto, con lo que
   la seccion queda descompensada. Medido en el render. El contain mantiene el
   modulo entero dentro del hueco. */
.nito-destacado__tarjeta-imagen img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 300px;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.nito-destacado__tarjeta-titulo {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
}

.nito-destacado__tarjeta-titulo a {
    color: #0f172a;
    text-decoration: none;
}

.nito-destacado__tarjeta-titulo a:hover,
.nito-destacado__tarjeta-titulo a:focus {
    color: #0018a9;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.nito-destacado__precio-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
}

/* El precio hereda el azul del resto del proceso de compra. La variable la
   define el bloque "PRECIOS AZULES — PROCESO DE COMPRA" de este mismo fichero. */
.nito-destacado__precio {
    color: var(--nito-price-color, #0018a9);
    font-size: 17px;
    font-weight: 700;
}

.nito-destacado__precio .woocommerce-Price-amount {
    color: var(--nito-price-color, #0018a9);
}

/* WooCommerce mete un <span class="screen-reader-text"> dentro de
   get_price_html() de los productos variables ("Rango de precios: desde…"),
   que es correcto para lectores de pantalla y no debe verse. */
.nito-destacado__precio .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nito-destacado__sin-stock {
    color: #475569;
    font-size: 14px;
    font-weight: 700;
}

.nito-destacado__vermas {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0018a9;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}

.nito-destacado__vermas:hover,
.nito-destacado__vermas:focus {
    color: #0018a9;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.nito-destacado__vermas:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 3px;
}

.nito-destacado__iva {
    margin: -4px 0 0;
    color: #64748b;
    font-size: 11.5px;
    line-height: 1.4;
}

.nito-destacado__features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin: 4px 0 0;
    padding: 12px 4px;
    border-radius: 12px;
    background: #e8ecfb;
    list-style: none;
}

.nito-destacado__feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    border-left: 1px solid #c1cbf5;
    color: #475569;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
}

.nito-destacado__feature:first-child {
    border-left: none;
}

.nito-destacado__feature .nito-destacado__icono {
    width: 20px;
    height: 20px;
    color: #0018a9;
}

/* --- Responsive ---------------------------------------------------------- */
/* Una columna, con el texto arriba y la tarjeta debajo: el titular y el badge
   son los que dicen qué es esto, y una tarjeta de producto suelta antes del H2
   aparecería sin contexto. Es además lo que ya hacen las dos secciones de ABS. */
@media (max-width: 900px) {
    .nito-destacado__interior {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 600px) {
    .nito-destacado {
        padding: 18px 14px;
    }

    .nito-destacado__stats {
        grid-template-columns: 1fr;
        gap: 12px 0;
    }

    /* En una columna el filete de la izquierda no separa nada: pasa a ser
       horizontal. */
    .nito-destacado__stat {
        border-left: none;
        border-top: 1px solid #c1cbf5;
        padding-top: 12px;
    }

    .nito-destacado__stat:first-child {
        border-top: none;
        padding-top: 4px;
    }

    .nito-destacado__acciones {
        width: 100%;
    }

    .nito-destacado__boton {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   CABECERA ABS  —  /reparar-abs-moto/  (y /reparar-abs/ cuando se aplique)
   ==========================================================================
   La clase es .nito-cabecera-abs, compartida a propósito: el diseño es el mismo
   para coche y para moto, como dice la propia maqueta. Lo que NO se comparte es
   el contenido: el titular, el párrafo y la FOTO viven en el contenido de cada
   página, no aquí. La foto es un bloque core/image con la clase
   .nito-cabecera-abs__foto, así que se cambia desde el editor y cada página
   lleva la suya; este bloque solo la coloca y la oscurece.

   Se aplica añadiendo className "nito-cabecera-abs" a la fila kadence/rowlayout
   de la cabecera. NO se usa body.page-id-NNNN -se rompe al cambiar de base de
   datos- ni los identificadores que genera Kadence, que desaparecen si el
   bloque se recrea.

   Lo que este bloque NO toca, y es deliberado:

     .nm-buscador          Su CSS base (líneas 88-245) lo comparten tres páginas
                           vivas: la Home y /reparar-abs/ por el patrón
                           sincronizado 4083, y esta por una copia en línea. Ya
                           es una tarjeta blanca sólida -fondo #ffffff, borde,
                           sombra, texto #0f172a-, así que sobre la foto sigue
                           teniendo el mismo contraste que sobre el azul: no
                           depende de lo que haya detrás. Aquí solo se le sube
                           la sombra, y con selector acotado.
     El patrón 3301        El botón "HABLAR CON UN TÉCNICO" está en 8 páginas.
                           Se hereda tal cual.

   Colores del texto: los ponen los atributos de cada bloque, no este CSS, para
   que Kadence emita su propio CSS y no haya que pelear con las clases
   has-theme-palette-N-color. Medidos sobre blanco: #000000 17,85:1,
   #3D3D3D 10,86:1, #0018a9 12,33:1. Todos por encima del 4,5:1 de la AA.
   ========================================================================== */

.nito-cabecera-abs {
    position: relative;
    overflow: hidden;
    background: #ffffff;
}

/* El contenido por encima de la foto. Se sube de capa en las COLUMNAS y no en
   .kt-row-column-wrap a proposito: si se posiciona el envoltorio interior, pasa
   a ser el bloque contenedor de la foto y esta deja de cubrir el padding
   vertical de la fila, con lo que aparece una banda blanca debajo. Medido en el
   render. La fila de Kadence ya acota el ancho a var(--global-content-width) y
   aplica var(--global-content-edge-padding). */
.nito-cabecera-abs .wp-block-columns {
    position: relative;
    z-index: 1;
    /* Core le pone margin-bottom: 32px por el block-gap, y al ser lo ultimo de
       la fila eso dejaba 32px de blanco entre la cabecera y la fila siguiente.
       Medido: el contenido acababa en y=793 y la fila en y=825. */
    margin-bottom: 0;
}

/* Kadence Blocks declara .kt-inside-inner-col { position: relative } (0-1-0) en
   style-blocks-column.css, y ese es el bloque contenedor que recortaba la foto:
   la dejaba dentro del area de contenido y por tanto sin cubrir el padding
   vertical xxl de la fila, con una banda blanca arriba y abajo. Se neutraliza
   SOLO dentro de la cabecera -0-2-0 contra su 0-1-0- para que el bloque
   contenedor de la foto pase a ser .nito-cabecera-abs. Esta columna no lleva
   overlay ni sticky, que son las dos cosas de Kadence que dependen de ese
   position. */
.nito-cabecera-abs .kt-inside-inner-col {
    position: static;
}

/* --- La foto ------------------------------------------------------------- */
/* Ocupa la mitad derecha y se sale hasta el borde de la ventana. El
   overflow:hidden del contenedor es lo que evita la barra horizontal, así que
   aquí sí se puede usar vw. */
.nito-cabecera-abs .nito-cabecera-abs__foto {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 34%;
    right: calc(50% - 50vw);
    padding: 0;
}

.nito-cabecera-abs .nito-cabecera-abs__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% center;
    border-radius: 0;
}

/* El 60% de arriba encuadra las fotos cuyo motivo cae a la derecha, que son
   las de modulo. Cuando el motivo esta a la izquierda -los dos mecanicos con
   el portatil de /profesionales-automocion/- ese encuadre los deja fuera y
   solo se ve el carro de herramientas. Se pone desde el editor anadiendo la
   clase al bloque de imagen. */
.nito-cabecera-abs .nito-cabecera-abs__foto--izquierda img {
    object-position: 22% center;
}

/* Motivo en la mitad de abajo: sube la foto. En /reparar-abs-moto/bmw-motorrad/
   (despiece) el borde inferior cae justo bajo los sensores negros, sin
   llegar al logo de la esquina (Carla, 2026-10-07). */
.nito-cabecera-abs .nito-cabecera-abs__foto--abajo img {
    object-position: 60% 62%;
}

/* El margen inferior de la figura hay que quitarlo, y no basta con 0-2-0.
   Kadence declara en content.min.css:

     .single-content figure.wp-block-image { margin-bottom: var(--global-md-spacing) }

   que es 0-2-1, y le gana a .nito-cabecera-abs .nito-cabecera-abs__foto (0-2-0)
   por la columna de elementos. Como la figura esta posicionada con top y bottom,
   ese margen le subia el borde inferior 32px y dejaba una franja blanca a la
   derecha, bajo la foto: la foto acababa en y=745 con la fila acabando en 777.
   Medido en el render, dos veces, porque la primera version del arreglo no
   ganaba la cascada.

   Nombrar las tres clases mas la etiqueta da 0-3-1, que gana sin empate y sin
   !important. */
.nito-cabecera-abs figure.wp-block-image.nito-cabecera-abs__foto {
    margin: 0;
}

/* Degradado de legibilidad: blanco opaco donde empieza el texto y transparente
   sobre la moto. Sin él, el párrafo cae sobre la foto en cuanto la pantalla se
   estrecha. */
.nito-cabecera-abs .nito-cabecera-abs__foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        #ffffff 0%,
        #ffffff 26%,
        rgba(255, 255, 255, .82) 42%,
        rgba(255, 255, 255, .35) 62%,
        rgba(0, 24, 169, .12) 100%);
}

/* Velo más suave, para fotos cuyo asunto ocupa todo el ancho.
   El degradado de arriba está calibrado para la foto de moto, donde la rueda
   queda a la derecha y el velo puede ser opaco hasta el 26%. En la de coche el
   vehículo ocupa el encuadre entero —medido: con "cover" solo se recorta un 7%
   del ancho— así que ese mismo velo le tapaba media carrocería. No es un
   problema de recorte, es de opacidad.

   Se resuelve con un modificador en la propia figura, porque la foto es
   contenido de cada página y su encuadre también: así cada una elige el velo
   que le va sin cambiar el de la otra. El texto sigue legible porque la columna
   izquierda acaba en x=576 y el velo aún está al 96% en x=536. */
.nito-cabecera-abs .nito-cabecera-abs__foto--suave::after {
    background: linear-gradient(90deg,
        #ffffff 0%,
        rgba(255, 255, 255, .96) 12%,
        rgba(255, 255, 255, .55) 26%,
        rgba(255, 255, 255, .12) 44%,
        rgba(0, 24, 169, .10) 100%);
}

/* --- Las dos columnas ---------------------------------------------------- */
/* Aqui NO se pone align-items: center. Core declara en su CSS en linea
   .wp-block-columns { align-items: normal !important }, que a 0-1-0 con
   !important gana a cualquier selector propio sin !important. Estuvo escrito y
   nunca hizo nada: el computado salia "normal". El centrado vertical se
   resuelve mas abajo, dentro de la columna, donde no hay nada que pelear. */
.nito-cabecera-abs .wp-block-columns {
    gap: 32px;
}

/* El 46% deja el texto holgadamente a la izquierda del punto en el que el
   degradado de la foto empieza a dejar ver la imagen. */
.nito-cabecera-abs .wp-block-columns > .wp-block-column:first-child {
    flex-basis: 46%;
    flex-grow: 0;
}

/* Y el parrafo, con medida de lectura, para que no llegue nunca al borde. */
.nito-cabecera-abs .wp-block-columns > .wp-block-column:first-child p {
    max-width: 46ch;
}

/* La columna del buscador pasa a ser contenedor flex para centrar la tarjeta
   verticalmente: la columna mide 633px de alto -se estira con la izquierda- y
   la tarjeta 378, asi que antes quedaba pegada arriba con 256px de aire debajo.
   justify-content si funciona aqui: el !important de core esta en
   .wp-block-columns, no en la columna. */
.nito-cabecera-abs .wp-block-columns > .wp-block-column:last-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-basis: 54%;
    flex-grow: 0;
}

/* Y el centrado horizontal, a proposito en vez de por casualidad. La columna de
   Kadence trae un margin-left "xl" de 64px en sus atributos, y con el
   max-width de 520px de la tarjeta el resultado eran 64px a cada lado: centrado
   por coincidencia, que se rompe en cuanto cambie cualquiera de los dos
   numeros. Se anula ese margen y se centra con margenes automaticos. */
.nito-cabecera-abs .wp-block-columns > .wp-block-column:last-child > .wp-block-kadence-column {
    width: 100%;
    margin-left: 0;
}

.nito-cabecera-abs .nm-wrapper-buscador {
    width: 100%;
}

/* --- El antetítulo, con su guion azul ------------------------------------ */
/* El texto del bloque ya empieza por "- ", así que el guion no se añade: solo
   se le da aire. El color lo pone el atributo del bloque. */
.nito-cabecera-abs .kt-adv-heading-wrap:first-child {
    margin-bottom: 0;
}

/* --- El H1 -------------------------------------------------------------- */
/* Sigue siendo el H1 del bloque kadence/advancedheading con level:1, con el
   mismo texto. Aquí solo se colorea la palabra ABS, que va envuelta en un
   <span> dentro del propio titular. */
.nito-cabecera-abs h1 .nito-cabecera-abs__acento {
    color: #0018a9;
}

/* --- La línea de certificación y los indicadores ------------------------- */
.nito-cabecera-abs__extras {
    /* Un unico valor para los dos huecos de la columna: certificacion ->
       indicadores, e indicadores -> boton de WhatsApp. El de abajo sale solo de
       aqui, porque el .kb-buttons-wrap que va despues no tiene margin-top ni
       padding-top (comprobado), asi que no hay dos margenes que colapsen. */
    --nito-cabecera-hueco: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--nito-cabecera-hueco);
    margin: 4px 0 var(--nito-cabecera-hueco);
}

/* El <p> de certificacion llegaba con 32px de margin-bottom del espaciado de
   bloques, que se SUMABAN al gap del flex: 32 + 18 = 50px arriba contra 30
   abajo. Se anula para que el unico hueco sea el del contenedor. Hace falta
   0-2-0 para ganarle a .single-content p, que es 0-1-1. */
.nito-cabecera-abs .nito-cabecera-abs__cert {
    margin: 0;
}

.nito-cabecera-abs__cert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 44ch;
    color: #3D3D3D;
    font-size: 14px;
    line-height: 1.45;
}

.nito-cabecera-abs__cert strong {
    display: block;
    color: #0018a9;
}

.nito-cabecera-abs__cert-icono {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: #0018a9;
}

.nito-cabecera-abs__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
}

.nito-cabecera-abs__stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
}

/* Filete entre items, nunca en los extremos. Va en el ::after del item y no en
   un border, para poder centrarlo en el hueco del flex (gap 22px -> -11px) y
   darle menos altura que el item. */
.nito-cabecera-abs__stat:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -11px;
    width: 1px;
    height: 65%;
    transform: translateY(-50%);
    background: #e6e8ef;
}

.nito-cabecera-abs__stat-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid #c1cbf5;
    background: #e8ecfb;
    color: #0018a9;
}

.nito-cabecera-abs__stat-icono svg {
    width: 20px;
    height: 20px;
}

.nito-cabecera-abs__stat-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.nito-cabecera-abs__stat-cifra {
    color: #0018a9;
    font-size: 12.5px;
    font-weight: 800;
}

.nito-cabecera-abs__stat-pie {
    color: #475569;
    font-size: 10.5px;
    letter-spacing: .02em;
}

/* --- El buscador: solo la sombra, y acotado ------------------------------ */
/* No se toca ni una propiedad del CSS base: sobre una foto con detalle la
   tarjeta necesita despegarse algo mas que sobre un degradado plano. */
.nito-cabecera-abs .nm-buscador {
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 28px 60px -22px rgba(15, 23, 42, .38);
}

/* --- Responsive ---------------------------------------------------------- */
/* Una columna, buscador a ancho completo y la foto pasa a ser una banda
   superior con altura fija, para que el texto no se aplaste encima. */
@media (max-width: 1024px) {
    .nito-cabecera-abs .nito-cabecera-abs__foto {
        left: 46%;
    }

    .nito-cabecera-abs .nito-cabecera-abs__foto::after {
        background: linear-gradient(90deg,
            #ffffff 0%,
            rgba(255, 255, 255, .95) 24%,
            rgba(255, 255, 255, .6) 48%,
            rgba(0, 24, 169, .10) 100%);
    }
}

@media (max-width: 767px) {
    .nito-cabecera-abs .wp-block-columns {
        gap: 22px;
    }

    .nito-cabecera-abs .wp-block-columns > .wp-block-column:first-child,
    .nito-cabecera-abs .wp-block-columns > .wp-block-column:last-child {
        flex-basis: 100%;
    }

    /* La foto deja de ser media pantalla y se convierte en el fondo completo,
       muy velado, para que el texto se lea sin depender del degradado lateral.
       El object-position se mueve al centro-izquierda: con "cover" en vertical,
       el 60% dejaba la rueda delantera fuera. */
    .nito-cabecera-abs .nito-cabecera-abs__foto {
        left: calc(50% - 50vw);
        right: calc(50% - 50vw);
    }

    .nito-cabecera-abs .nito-cabecera-abs__foto img {
        object-position: 45% center;
    }

    .nito-cabecera-abs .nito-cabecera-abs__foto::after {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, .94) 0%,
            rgba(255, 255, 255, .9) 55%,
            rgba(255, 255, 255, .82) 100%);
    }

    /* La columna del buscador lleva un margen izquierdo "xl" en sus atributos,
       que en escritorio la separa del texto y en movil la empujaba 64px a la
       derecha: medido, la tarjeta quedaba a left=88 y 278px de ancho en vez de
       los 342 disponibles. Se anula aqui, por estructura y no por el
       identificador generado por Kadence, que desaparece si se recrea el
       bloque. 0-4-0 contra el 0-2-0 con el que Kadence emite ese margen. */
    .nito-cabecera-abs .wp-block-columns > .wp-block-column:last-child > .wp-block-kadence-column {
        margin-left: 0;
    }

    .nito-cabecera-abs .nm-buscador {
        max-width: none;
    }

    .nito-cabecera-abs__extras {
        --nito-cabecera-hueco: 22px;
    }

    .nito-cabecera-abs__stats {
        gap: 12px 18px;
    }

    /* Aqui los tres items ya no caben en una linea y envuelven a dos filas, asi
       que el filete quedaria colgando al final de la primera. */
    .nito-cabecera-abs__stat:not(:last-child)::after {
        content: none;
    }

}

/* ==========================================================================
   AVISO DE ERROR DEL PROCESO DE COMPRA — SIN HOVER
   ==========================================================================
   El aviso de fallos del carrito y del checkout no debe reaccionar al ratón.

   Nota sobre el diagnóstico, porque importa para el mantenimiento: **no se
   encontró ninguna regla culpable**. Se recorrieron las 32 hojas que carga el
   checkout -incluidos los 22 bloques <style> en línea y las de los plugins-
   buscando las 184 reglas con :hover, y ninguna que cambie color o fondo
   alcanza a .woocommerce-error, ni a sus <li> y <strong>, ni al banner de
   bloques, ni a .nito-error, ni en /finalizar-compra/, ni en /carrito/, ni en
   /profesionales-automocion/.

   Así que esto no elimina una regla concreta: fija el aviso en sus valores de
   reposo para :hover, :focus y :focus-within, de modo que cualquier hover que
   llegue -de una hoja futura, de un plugin, de una extensión del navegador- no
   pueda cambiarlo. Se reutilizan las MISMAS variables de Kadence que pintan el
   aviso en reposo, no valores fijos, para que siga siguiendo al tema si este
   cambia su paleta.

   Acotado a las dos páginas del proceso de compra: fuera de ellas los avisos de
   WooCommerce se quedan como estaban.
   ========================================================================== */

body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-error:hover,
body.woocommerce-checkout .woocommerce-error:focus,
body.woocommerce-checkout .woocommerce-error:focus-within,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-cart .woocommerce-error:hover,
body.woocommerce-cart .woocommerce-error:focus,
body.woocommerce-cart .woocommerce-error:focus-within {
    background-color: var(--global-palette7, #fafafb);
    color: var(--global-palette4, #3D3D3D);
    border-left-color: #b81c23;
    box-shadow: none;
}

/* EL CULPABLE. El aviso de WooCommerce envuelve cada error en un enlace al
   campo que falla:

     <li data-id="billing_postcode"><a href="#billing_postcode">
       <strong>Código postal</strong> no es un código postal válido.</a></li>

   Y Kadence declara, sin condición, a:hover/:focus/:active { color:
   var(--global-palette-highlight-alt) }, que en este sitio resuelve a
   var(--global-palette2) = #ffffff. O sea: al pasar el ratón el texto del error
   se vuelve BLANCO sobre el #fafafb del aviso — 1,02:1 de contraste, invisible.
   Eso es el "se pone todo en blanco".

   Aquí el enlace se queda igual en todos los estados. Sigue subrayado para que
   se lea como enlace -y sigue llevando al campo al pulsarlo-, pero no cambia de
   color. Especificidad 0-3-2 contra el 0-1-1 de Kadence, sin !important. */
body.woocommerce-checkout .woocommerce-error a,
body.woocommerce-checkout .woocommerce-error a:link,
body.woocommerce-checkout .woocommerce-error a:visited,
body.woocommerce-checkout .woocommerce-error a:hover,
body.woocommerce-checkout .woocommerce-error a:focus,
body.woocommerce-checkout .woocommerce-error a:active,
body.woocommerce-cart .woocommerce-error a,
body.woocommerce-cart .woocommerce-error a:link,
body.woocommerce-cart .woocommerce-error a:visited,
body.woocommerce-cart .woocommerce-error a:hover,
body.woocommerce-cart .woocommerce-error a:focus,
body.woocommerce-cart .woocommerce-error a:active {
    background: none;
    color: var(--global-palette4, #3D3D3D);
    text-decoration: underline;
    text-underline-offset: .2em;
    box-shadow: none;
}

/* El indicador de teclado sí se mantiene: quitar el hover no debe dejar el
   enlace sin señal para quien navega con el tabulador. */
body.woocommerce-checkout .woocommerce-error a:focus-visible,
body.woocommerce-cart .woocommerce-error a:focus-visible {
    outline: 2px solid #b81c23;
    outline-offset: 2px;
}

/* Los <li> y el <strong> heredan del <ul>, pero se fijan también: si el hover
   viniera de una regla que los apunte a ellos, heredar no bastaría. */
body.woocommerce-checkout .woocommerce-error li,
body.woocommerce-checkout .woocommerce-error li:hover,
body.woocommerce-checkout .woocommerce-error strong,
body.woocommerce-checkout .woocommerce-error strong:hover,
body.woocommerce-cart .woocommerce-error li,
body.woocommerce-cart .woocommerce-error li:hover,
body.woocommerce-cart .woocommerce-error strong,
body.woocommerce-cart .woocommerce-error strong:hover {
    background: none;
    color: inherit;
}

/* El aviso por campo que pinta el asistente, igual. */
.nito-checkout .nito-error,
.nito-checkout .nito-error:hover,
.nito-checkout .nito-error:focus,
.nito-checkout .nito-error:focus-within {
    background: none;
    color: #b3261e;
}

/* Y el banner de avisos del carrito de bloques, que es otro componente. */
body.woocommerce-cart .wc-block-components-notice-banner.is-error,
body.woocommerce-cart .wc-block-components-notice-banner.is-error:hover,
body.woocommerce-cart .wc-block-components-notice-banner.is-error:focus-within {
    background-color: #fff0f0;
    color: #0f172a;
}

/* ---------------------------------------------------------------------------
   Marcas con las que trabajamos - [nito_grid_marcas]
   ---------------------------------------------------------------------------
   Sustituye a la galeria Kadence (.galeria-marcas-nito), que sigue viva en la
   pagina de motos 3388 y por eso no se ha borrado de este archivo.

   La uniformidad se reparte en dos sitios a proposito: el panel .__logo fija
   la caja y el padding igual para las 56 marcas -mismo criterio que
   .nito-vehicle-image en las tarjetas de modelo-, y los propios PNG vienen
   normalizados sobre un lienzo 400x224 con la marca escalada por area, que es
   lo que evita que un logo cuadrado pese el triple que un wordmark alargado
   aun ocupando los dos la misma caja.

   Sin !important: es markup propio, y la hoja hija ya carga despues de
   Kadence. Lo unico que llega de fuera es .entry-content a {text-decoration:
   none}, que es justo lo que queremos.
   --------------------------------------------------------------------------- */
.nito-marcas {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 14px;
    max-width: 1180px;
    margin: 40px auto;
}
.nito-marcas__item {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 2px 5px rgb(0 0 0 / .02);
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.nito-marcas__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    padding: 8px;
    margin-bottom: 8px;
    /* Blanco, no #f8fafc como en las tarjetas de modelo: el logo de Lada trae
       su fondo blanco incrustado y sobre un panel gris dibujaria un rectangulo. */
    background-color: #ffffff;
    border-radius: 8px;
}
.nito-marcas__logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Opacidad alta a proposito. La galeria anterior usaba .6, que funcionaba
       porque sus SVG eran #0a0f24 solido; estos logos traen su propia
       luminancia y en gris los plateados (Chrysler, Dodge, Aston Martin)
       desaparecian. Medido en pantalla, no deducido de la hoja. */
    filter: grayscale(100%);
    opacity: .85;
    transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
/* Sin logo el panel es el ultimo hijo (el nombre de debajo no se imprime, ya lo
   lleva dentro). Sin esto arrastraria el margen inferior y el rotulo quedaria
   descentrado en la tarjeta. */
.nito-marcas__logo:last-child {
    margin-bottom: 0;
}
/* Respaldo tipografico para una marca sin archivo de logo: misma caja, mismo
   padding, para que se lea como una decision y no como una imagen rota. */
.nito-marcas__rotulo {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.nito-marcas__nombre {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    color: #475569;
    transition: color .3s ease;
}
.nito-marcas__item:hover {
    border-color: #0066ff;
    box-shadow: 0 8px 20px rgb(0 102 255 / .1);
    transform: translateY(-3px);
}
.nito-marcas__item:hover .nito-marcas__logo img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.06);
}
.nito-marcas__item:hover .nito-marcas__nombre {
    color: #0018a9;
}
.nito-marcas__item:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .nito-marcas__item,
    .nito-marcas__item:hover,
    .nito-marcas__logo img,
    .nito-marcas__item:hover .nito-marcas__logo img {
        transition: none;
        transform: none;
    }
}
@media (max-width: 992px) {
    .nito-marcas {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 767px) {
    .nito-marcas {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 0 15px;
    }
}
@media (max-width: 480px) {
    .nito-marcas {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   PÁGINA 22 — TRES BENEFICIOS DEL ABS
   ==========================================================================
   Bloque core/html dentro del contenido de /reparar-abs/, justo debajo del
   párrafo que explica qué es el ABS. Solo lo usa esa página.

   Reutiliza la ESTRUCTURA de .nito-ct__features (círculo con icono + h3 + p)
   pero no sus clases, a propósito: aquel componente es una tira de 4 celdas
   grises separadas por filetes, y esto son 3 tarjetas blancas con borde y
   radio. Heredarlo habría obligado a sobreescribir el fondo, el grid, los
   filetes, los colores y el '.nito-ct__feature { border-left: none !important }'
   de su media query de 480px. Clases nuevas bajo el mismo prefijo, sin
   colisión con las existentes (comprobado: no hay ningún .nito-ct__benef*).
   ========================================================================== */
.nito-ct__beneficios-seccion {
    width: 100%;
    max-width: var(--global-content-width, 1290px);
    margin: 26px auto 4px;
    padding-left: var(--global-content-edge-padding);
    padding-right: var(--global-content-edge-padding);
}

.nito-ct__beneficios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.nito-ct__beneficio {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 22px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    text-align: left;
}

.nito-ct__beneficio-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #e8ecfb;
    color: #0018a9;
}

.nito-ct__beneficio-icono svg {
    width: 32px;
    height: 32px;
}

.nito-ct__beneficio-texto {
    min-width: 0;
}

.nito-ct__beneficio-texto h3 {
    margin: 0 0 7px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #0018a9;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.nito-ct__beneficio-texto p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #64748b;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 900px) {
    .nito-ct__beneficios {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* ==========================================================================
   22 y 3388 — BOTON DE WHATSAPP DE LA CABECERA, ALINEADO A LA IZQUIERDA
   ==========================================================================
   Kadence pone justify-content:center en .kb-buttons-wrap, asi que el boton
   salia centrado dentro de la primera columna del hero mientras el H1, el
   parrafo, .nito-cabecera-abs__cert y .nito-cabecera-abs__stats iban pegados
   al borde izquierdo.

   Se acota con .nito-cabecera-abs, que solo llevan estas dos paginas, y NO con
   la clase generada del boton: su uniqueID es 2911_4104ec-13, heredado de la
   portada, y el mismo wrap aparece en otras paginas fuera de la cabecera.
   0-2-0 contra el 0-1-0 de la regla de Kadence, asi que no hace falta
   !important. Solo hay un .kb-buttons-wrap dentro del hero (comprobado).
   ========================================================================== */
.nito-cabecera-abs .kb-buttons-wrap {
    justify-content: flex-start;
}

/* ==========================================================================
   BLOG — portada, categorias y scroll infinito
   ==========================================================================
   Acompana a home.php, category.php, template-parts/nito-tarjeta-articulo.php
   y assets/js/nito-blog.js.

   La TARJETA no se estiliza aqui. Es .nito-articulos__card, la misma del
   carrusel, y su CSS ya esta mas arriba en este fichero: la partial se extrajo
   del shortcode sin renombrar una sola clase justo para que siguiera valiendo.
   Lo unico que hace falta es una pista de rejilla que no sea la del carrusel,
   porque aquella es de scroll horizontal.

   Anchos y padding salen de las variables de Kadence, como el resto de las
   secciones nuevas del tema.
   ========================================================================== */

.nito-blog__cabecera {
    width: 100%;
    margin-bottom: 34px;
}

/* La cabecera de la portada es el contenido de la pagina "Blog", o sea bloques
   de Kadence que ya traen sus propios margenes y su propio ancho. Aqui solo se
   le quita el margen superior al primero para que no sume con el del #main. */
.nito-blog__cabecera--portada > :first-child {
    margin-top: 0;
}

.nito-blog__titulo {
    margin: 0 0 14px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    color: #0f172a;
    /* La primera letra del nombre del termino se guarda como la escribio quien
       creo la categoria ("fallos y averías"), y en un H1 queda raro en minuscula.
       Se arregla en CSS y no tocando el termino, que es lo que sale en los
       enlaces y en el pan de migas. */
    text-transform: none;
}

.nito-blog__titulo::first-letter {
    text-transform: uppercase;
}

.nito-blog__intro {
    max-width: 70ch;
    color: #475569;
    font-size: 15px;
    line-height: 1.7;
}

.nito-blog__intro p {
    margin: 0 0 12px;
}

.nito-blog__intro p:last-child {
    margin-bottom: 0;
}

/* Boton de texto, no un boton de caja: es un "ver mas" dentro de un parrafo.
   Lleva :focus con los colores de reposo porque Kadence declara button:focus con
   blanco sobre casi blanco y, al ser un <button>, el foco se queda puesto
   despues del clic. Ver la seccion de :focus mas arriba en este fichero. */
.nito-blog__intro-mas {
    display: inline-block;
    margin-top: 6px;
    padding: 0;
    border: none;
    background: none;
    color: #0018a9;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.nito-blog__intro-mas:focus {
    background: none;
    color: #0018a9;
    box-shadow: none;
}

.nito-blog__intro-mas:hover,
.nito-blog__intro-mas:active {
    background: none;
    color: #000000;
}

.nito-blog__intro-mas:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 3px;
}

/* --- Buscador ------------------------------------------------------------ */

.nito-blog__buscador {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 520px;
    /* 'auto' a los lados y no text-align: es un flex de 520px dentro de un
       contenedor mucho mas ancho, asi que lo que lo centra son los margenes. El
       modificador --categoria de abajo solo toca margin-top, asi que no lo
       deshace. */
    margin: 0 auto 40px;
}

/* Solo en las categorias: ahi el buscador es el primer hijo de #main y llega
   pegado al heroe; en /blog/ el propio #main ya deja 34px.
   Tiene que ir DESPUES de la regla de arriba: las dos son 0-1-0, y aquel
   'margin: 0 0 40px' es un atajo que pone margin-top en 0, asi que puesto antes
   no hacia nada. */
.nito-blog__buscador--categoria {
    margin-top: 40px;
}

.nito-blog__buscador-campo {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    background: #f8fafc;
    font-size: 15px;
    color: #0f172a;
}

.nito-blog__buscador-campo:focus {
    outline: none;
    border-color: #0018a9;
}

.nito-blog__buscador-boton {
    flex: 0 0 auto;
    padding: 12px 26px;
    border: none;
    border-radius: 24px;
    background: #0018a9;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.nito-blog__buscador-boton:focus {
    background: #0018a9;
    color: #ffffff;
    box-shadow: none;
}

.nito-blog__buscador-boton:hover,
.nito-blog__buscador-boton:active {
    background: #000000;
    color: #ffffff;
}

/* --- Bloques de la portada ----------------------------------------------- */

.nito-blog__bloque {
    width: 100%;
    margin-bottom: 52px;
}

.nito-blog__bloque:last-child {
    margin-bottom: 0;
}

.nito-blog__bloque-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 20px;
    padding-bottom: 12px;
    margin-bottom: 22px;
    border-bottom: 1px solid #e2e8f0;
}

/* 0-2-0 para ganarle a .single-content h2, que es 0-1-1 y le pondria
   margin: 1.5em 0 .5em. Mismo caso que .nito-articulos__titulo. */
.nito-blog__bloque .nito-blog__bloque-titulo {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    color: #0f172a;
    text-transform: uppercase;
}

/* Lleva padding y radio ya en reposo, con el fondo transparente, para que al
   pasar el raton la pastilla azul tenga forma en vez de pegarse al texto. */
.nito-blog__bloque-enlace {
    flex: 0 0 auto;
    padding: 7px 16px;
    border-radius: 20px;
    background: transparent;
    color: #0018a9;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.nito-blog__bloque-enlace:hover,
.nito-blog__bloque-enlace:focus {
    background: #0018a9;
    color: #ffffff;
    text-decoration: none;
}

.nito-blog__bloque-enlace:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 2px;
}

/* El relleno llega de golpe si alguien ha pedido menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    .nito-blog__bloque-enlace {
        transition: none;
    }
}

.nito-blog__vacio {
    margin: 0;
    color: #475569;
    font-size: 15px;
}

/* --- Rejilla -------------------------------------------------------------
   .nito-articulos__grid sin el modificador --carrusel ya es una rejilla de
   repeat(var(--nito-articulos-columnas, 3), ...), y mas arriba en este fichero
   ya hay media queries que bajan esa variable a 2 en 900px y a 1 en 600px.

   Aqui NO se declara --nito-articulos-columnas a proposito. Declararla la
   dejaria fija: seria una regla 0-1-0 escrita despues que esas media queries,
   que son 0-1-0 tambien, asi que ganaria por orden de fuente y la rejilla del
   blog se quedaria a 3 columnas tambien en movil. Con el valor por defecto del
   fallback se hereda el comportamiento que ya existe. */
.nito-blog__grid {
    width: 100%;
}

.nito-blog__listado {
    width: 100%;
}

/* Solo lo usa home.php. Ver el comentario de esa plantilla: /blog/ va en
   "content width: fullwidth" en Kadence, asi que su .content-container no acota
   y hay que acotar aqui lo que anade la plantilla. En las categorias no se
   aplica porque alli el contenedor de Kadence ya lo hace.

   El padding-bottom es lo que separa el ultimo bloque del pie. Hace falta aqui
   y no en el bloque: .nito-blog__bloque:last-child lleva margin-bottom: 0 -a
   proposito, para que los tres bloques tengan el mismo margen entre si- asi que
   el ultimo llegaba pegado al footer. Medido en /blog/: 0px de hueco antes de
   esto. Las paginas de categoria no lo necesitan, ya traen 80px de Kadence. */
.nito-blog__contenido {
    width: 100%;
    max-width: var(--global-content-width, 1290px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--global-content-edge-padding);
    padding-right: var(--global-content-edge-padding);
    padding-bottom: 56px;
}

/* --- Paginacion y "cargar mas" ------------------------------------------- */

.nito-blog__mas {
    display: block;
    margin: 34px auto 0;
    padding: 14px 34px;
    border: none;
    border-radius: 24px;
    background: #0018a9;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
}

.nito-blog__mas:focus {
    background: #0018a9;
    color: #ffffff;
    box-shadow: none;
}

.nito-blog__mas:hover,
.nito-blog__mas:active {
    background: #000000;
    color: #ffffff;
}

.nito-blog__mas[disabled] {
    opacity: .6;
    cursor: default;
}

/* Estado final: el boton no desaparece, se queda diciendo que ya esta todo
   cargado. No vale con el [disabled] de arriba, que baja la opacidad y lee como
   "esperando"; aqui no se espera nada, asi que va en gris neutro y a opacidad
   completa.

   Doble clase para llegar a 0-2-0 y empatar con .nito-blog__mas[disabled], que
   tambien es 0-2-0: al ir despues, gana por orden de fuente. Con una sola clase
   (0-1-0) perderia y se quedaria con la opacidad del disabled.

   El :hover esta repetido porque un <button> deshabilitado sigue casando :hover
   en varios navegadores, y sin esto se pondria negro al pasar por encima. */
.nito-blog__mas.nito-blog__mas--fin,
.nito-blog__mas.nito-blog__mas--fin:hover,
.nito-blog__mas.nito-blog__mas--fin:active,
.nito-blog__mas.nito-blog__mas--fin:focus {
    opacity: 1;
    background: #f1f5f9;
    color: #64748b;
    box-shadow: none;
    cursor: default;
}

@media (max-width: 900px) {
    .nito-blog__titulo {
        font-size: 26px;
    }
}

@media (max-width: 600px) {
    .nito-blog__contenido {
        padding-bottom: 40px;
    }

    .nito-blog__buscador {
        max-width: none;
    }

    .nito-blog__bloque-cabecera {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .nito-blog__mas {
        width: 100%;
    }
}

/* --- Heroe de categoria --------------------------------------------------
   Replica del heroe de /blog/, que alli es una fila de Kadence dentro de la
   pagina "Blog". Los valores estan medidos sobre esa fila en el navegador:
   degradado 135deg de #0693e3 al 78% a #14276d, interior de 1290px con 80px de
   padding vertical, texto #fbfcfe centrado, H1 de 32px/800 en mayusculas y
   parrafo de 18px con interlineado 1.6.

   Va a sangre porque category.php lo pinta FUERA de #primary: ahi el ancho es
   el de #inner-wrap (completo), mientras que .content-container acota a 1290. */
/* El tono NO es un degradado suelto: la fila de /blog/ apila DOS capas, y sin
   la segunda el azul sale mucho mas claro.

     fondo   background-color #0018a9 + linear-gradient(135deg, #0693e3 0%, #14276d 100%)
     encima  linear-gradient(135deg, #0693e3 78%, #14276d 100%) con
             mix-blend-mode: color-burn

   Es el mismo color-burn que ya aparece documentado en este proyecto a proposito
   de las filas de Kadence. Copiar solo el degradado de la capa de arriba, que es
   lo que se hizo primero, da un azul cian plano que no se parece.

   isolation: isolate acota el blend al heroe; sin el, color-burn mezclaria con lo
   que haya pintado detras en la pagina. */
.nito-blog__hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    background-color: #0018a9;
    background-image: linear-gradient(135deg, #0693e3 0%, #14276d 100%);
}

.nito-blog__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(135deg, #0693e3 78%, #14276d 100%);
    mix-blend-mode: color-burn;
    pointer-events: none;
}

.nito-blog__hero-interior {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--global-content-width, 1290px);
    margin: 0 auto;
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: var(--global-content-edge-padding);
    padding-right: var(--global-content-edge-padding);
    text-align: center;
}

/* No se reutiliza .etiqueta-superior: esa es azul sobre blanco, con
   border-color y color en #0018a9 y varios !important, y aqui hace falta lo
   contrario -blanca sobre azul-. Misma geometria, colores invertidos. */
.nito-blog__hero-etiqueta {
    display: inline-flex;
    align-items: center;
    margin: 0 0 18px;
    padding: 6px 18px;
    border: 2px solid #fbfcfe;
    border-radius: 10px;
    color: #fbfcfe;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.nito-blog__hero-etiqueta::before {
    content: "—";
    margin-right: 12px;
    font-size: 14px;
    font-weight: 900;
}

/* 0-2-0 para ganarle a .single-content h1, que es 0-1-1 y le metaria su propio
   margen. Mismo caso que .nito-articulos__titulo y .nito-blog__bloque-titulo. */
.nito-blog__hero .nito-blog__hero-titulo {
    margin: 0 0 16px;
    color: #fbfcfe;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

/* El texto introductorio hereda del heroe: el mismo componente se pintaba antes
   sobre fondo blanco, asi que los colores se redefinen aqui y no en la regla
   base, que sigue valiendo si algun dia vuelve a usarse sobre claro. */
.nito-blog__hero .nito-blog__intro {
    max-width: 78ch;
    margin: 0 auto;
    color: #fbfcfe;
    font-size: 18px;
    line-height: 1.6;
}

.nito-blog__hero .nito-blog__intro-mas {
    color: #fbfcfe;
}

.nito-blog__hero .nito-blog__intro-mas:focus {
    color: #fbfcfe;
}

.nito-blog__hero .nito-blog__intro-mas:hover,
.nito-blog__hero .nito-blog__intro-mas:active {
    color: #ffffff;
}

.nito-blog__hero .nito-blog__intro-mas:focus-visible {
    outline-color: #fbfcfe;
}

@media (max-width: 900px) {
    .nito-blog__hero-interior {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .nito-blog__hero .nito-blog__hero-titulo {
        font-size: 26px;
    }

    .nito-blog__hero .nito-blog__intro {
        font-size: 16px;
    }
}

@media (max-width: 600px) {
    .nito-blog__hero-interior {
        padding-top: 44px;
        padding-bottom: 44px;
    }

    .nito-blog__hero-etiqueta {
        letter-spacing: .06em;
        font-size: 12px;
    }
}

/* ==================================================================
   MENU: el elemento de la URL actual se queda marcado
   ==================================================================
   Kadence ya pintaba de #0018a9 el .current-menu-item de primer nivel,
   pero solo ese: en el desplegable lo pintaba al reves (texto #0018a9
   sobre el #1a1a1a del propio submenu), en el movil solo le cambiaba el
   color de la letra, y la cabecera pegajosa le devolvia el fondo negro a
   todos los enlaces -el activo incluido- con
   "#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start)
   .header-menu-container > ul > li > a", especificidad 1-4-3: por eso el
   bloque 2 de aqui repite esa cadena en vez de anadir una clase suelta,
   que no llegaria.

   Las seis clases van juntas porque WordPress reparte una distinta segun
   el item: current-menu-item / current_page_item para el enlace exacto,
   y las cuatro de ascendiente cuando estas en una pagina que cuelga de
   el -una marca bajo /reparar-abs/-. Ese ultimo caso lo completa
   nito_menu_marcar_ascendientes() en functions.php.

   Las reglas 1, 3 y 4 empatan en especificidad con las de Kadence y
   ganan por orden, porque kadence-global-inline-css se imprime antes que
   el enlace a style.css. No hace falta !important en ninguna. */

.main-navigation .primary-menu-container > ul > li.menu-item:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current-menu-parent,.current-page-ancestor,.current_page_ancestor) > a,
.main-navigation .primary-menu-container > ul > li.menu-item:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current-menu-parent,.current-page-ancestor,.current_page_ancestor) > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current-menu-parent,.current-page-ancestor,.current_page_ancestor) > a:focus {
    background: #0018a9;
    color: #ffffff;
}

#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .header-menu-container > ul > li.menu-item:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current-menu-parent,.current-page-ancestor,.current_page_ancestor) > a,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .header-menu-container > ul > li.menu-item:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current-menu-parent,.current-page-ancestor,.current_page_ancestor) > a:hover,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .header-menu-container > ul > li.menu-item:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current-menu-parent,.current-page-ancestor,.current_page_ancestor) > a:focus {
    background: #0018a9;
    color: #ffffff;
}

.header-navigation .header-menu-container ul ul li.menu-item:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current-menu-parent,.current-page-ancestor,.current_page_ancestor) > a,
.header-navigation .header-menu-container ul ul li.menu-item:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current-menu-parent,.current-page-ancestor,.current_page_ancestor) > a:hover,
.header-navigation .header-menu-container ul ul li.menu-item:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current-menu-parent,.current-page-ancestor,.current_page_ancestor) > a:focus {
    background: #0018a9;
    color: #ffffff;
}

/* Cajon movil. El enlace es display:block y width:100%, asi que el fondo
   ocupa toda la fila.

   Ojo con los items que tienen submenu: en el HTML servido el <a> cuelga
   directamente del <li>, pero el JS de Kadence lo envuelve al vuelo en un
   <div class="drawer-nav-drop-wrap"> flex, junto al boton que despliega.
   Leyendo solo el HTML parece que sobra ese selector -y entonces SERVICIOS
   se queda sin marcar, que es justo el item que importa en las paginas de
   marca y modelo. Ahi el fondo va en el propio wrap: pintando solo el <a>
   quedaban 39px sin pintar a la derecha, los del boton. */

.mobile-navigation ul li.menu-item:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current-menu-parent,.current-page-ancestor,.current_page_ancestor) > a,
.mobile-navigation ul li.menu-item:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current-menu-parent,.current-page-ancestor,.current_page_ancestor) > a:hover,
.mobile-navigation ul li.menu-item:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current-menu-parent,.current-page-ancestor,.current_page_ancestor) > a:focus,
.mobile-navigation ul li.menu-item:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current-menu-parent,.current-page-ancestor,.current_page_ancestor) > .drawer-nav-drop-wrap {
    background: #0018a9;
    color: #ffffff;
}

.mobile-navigation ul li.menu-item:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current-menu-parent,.current-page-ancestor,.current_page_ancestor) > .drawer-nav-drop-wrap > a,
.mobile-navigation ul li.menu-item:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current-menu-parent,.current-page-ancestor,.current_page_ancestor) > .drawer-nav-drop-wrap > a:hover,
.mobile-navigation ul li.menu-item:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current-menu-parent,.current-page-ancestor,.current_page_ancestor) > .drawer-nav-drop-wrap > a:focus,
.mobile-navigation ul li.menu-item:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current-menu-parent,.current-page-ancestor,.current_page_ancestor) > .drawer-sub-toggle,
.mobile-navigation ul li.menu-item:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current-menu-parent,.current-page-ancestor,.current_page_ancestor) > .drawer-nav-drop-wrap > .drawer-sub-toggle {
    background: transparent;
    color: #ffffff;
}

/* ==================================================================
   .nito-series -- selector de serie de la pagina hub de una marca
   ==================================================================
   Sustituye al grid de modelos ([nito_grid_modelos]) en las paginas de
   marca que agrupan por serie en vez de por modelo suelto: el visitante
   llega sabiendo que tiene una GS o una RT, no el ano exacto, asi que la
   puerta de entrada son cinco tarjetas y no cuarenta.

   Tres decisiones que conviene no deshacer:

   - Es una lista de enlaces reales, no un grid con JS encima. La tarjeta
     entera es el <a>, asi que el area tactil es toda la caja -75px de alto
     util en movil, muy por encima de los 48 minimos- y el texto ancla es
     "ABS Serie R", no "ver mas".
   - Las columnas van por consulta de medios explicita (1 / 2 / 3) en vez de
     auto-fit: con cinco tarjetas y un contenido de 1290px, auto-fit daria
     cuatro en la primera fila y una sola en la segunda, que es justo el
     escalon que se queria evitar.
   - No lleva ni un !important: es marcado propio dentro de un bloque
     core/html, no vendor de Kadence ni de WooCommerce. Ver "!important es
     era-dependiente" mas arriba en este mismo archivo.

   El corte de 600px es el que ya usa el resto del archivo; el de 1024 es el
   mismo al que Kadence deja de mostrar la cabecera movil. */

/* Sin max-width ni sangrado lateral propios: el componente vive dentro de una
   fila de Kadence con inheritMaxWidth, que ya aplica el ancho de contenido y
   el --global-content-edge-padding. Ponerlos aqui tambien sangraba dos veces
   -medido en un movil de 390px: la columna daba 331px y las tarjetas salian a
   283- y el texto de cada serie se partia en una linea de mas. */
.nito-series {
    width: 100%;
    margin: 0 auto;
}

/* El `padding: 0` necesita ganarle a la regla de listas del contenido, que es
   la que dejaba 34px de sangrado a la izquierda del grid. */
.nito-series .nito-series__lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nito-series__item {
    margin: 0;
}

/* La tarjeta es el enlace. `height:100%` la iguala con sus vecinas cuando la
   linea descriptiva de una serie ocupa dos lineas y la de otra solo una. */
.nito-series__tarjeta {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    min-height: 88px;
    padding: 20px 22px;
    background: #ffffff;
    border: 1px solid #c1cbf5;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 2px 5px rgb(0 24 169 / .04);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}

/* La foto del modelo mas representativo de la serie. Va a un lado y no
   encima del texto a proposito: con la imagen arriba la tarjeta pasaba de 83
   a ~210px de alto y las cinco dejaban de caber en el primer scroll del movil,
   que es el objetivo del bloque. A 150px de ancho la silueta y el color ya
   sirven para reconocer la serie, que es para lo que esta.

   Mismo tratamiento que .nito-vehicle-image en las tarjetas de modelo: panel
   #f8fafc y mix-blend-mode multiply, porque los recortes se suben con alfa. */
.nito-series__foto {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 84px;
    padding: 4px;
    background-color: #f8fafc;
    border-radius: 8px;
    overflow: hidden;
}

.nito-series__foto img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.nito-series__texto {
    flex: 1 1 auto;
    min-width: 0;
}

/* Nombre y flecha en la misma linea, con la flecha pegada al borde derecho.
   Antes la flecha era el tercer hijo de la tarjeta y habia que empujarla con
   margin-top:auto, lo que dejaba un hueco muerto bajo la linea de modelos en
   cuanto una tarjeta vecina ocupaba dos lineas y esta una. */
.nito-series__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0; /* ya no hay linea de modelos debajo */
}

.nito-series__nombre {
    display: block;
    color: #0018a9;
    font-weight: 800;
    font-size: 19px;
    line-height: 1.25;
    letter-spacing: .01em;
}

.nito-series__modelos {
    display: block;
    color: #57575D;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.45;
}

/* Flecha en SVG enmascarado para que herede el color del texto, que es la
   forma que usa el resto del archivo para los iconos monocromos. Las dos
   propiedades de mascara van siempre juntas. */
.nito-series__flecha {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background-color: #0018a9;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>') center / contain no-repeat;
    transition: transform .2s ease;
}

.nito-series__tarjeta--con-foto {
    min-height: 108px;
}

/* De 600px para arriba la foto se pone ENCIMA y a todo el ancho de la tarjeta.
   Con la foto al lado en una rejilla de tres columnas la moto se comia 150 de
   los 403px y la linea de modelos se partia en cuatro renglones. Arriba no hay
   presion de alto -la restriccion de caber en el primer scroll es solo del
   movil-, asi que ahi la foto puede lucir. Por debajo de 600 se queda al lado,
   que es lo que mantiene las cinco tarjetas en una pantalla. */
@media (min-width: 600px) {
    .nito-series__tarjeta--con-foto {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        min-height: 0;
    }

    .nito-series__tarjeta--con-foto .nito-series__foto {
        width: 100%;
        height: 132px;
        padding: 8px;
    }

    /* Cuatro tarjetas: dos por fila y la foto AL LADO, no encima. Es el caso
       fijo del bloque "otras series" dentro de una pagina de serie, donde el
       shortcode se quita a si mismo. A 613px de ancho la foto encima dejaba un
       hueco muerto entre la linea de modelos y la flecha, que se iba al fondo
       de la tarjeta por el margin-top:auto. De lado no sobra nada.

       La clase la pone el shortcode contando las filas visibles; con
       :nth-child no se podia, porque hay que cambiar tambien el numero de
       columnas de la lista. */
    .nito-series .nito-series__lista--cuatro {
        grid-template-columns: repeat(2, 1fr);
    }

    .nito-series__lista--cuatro .nito-series__item {
        grid-column: auto;
    }

    .nito-series__lista--cuatro .nito-series__tarjeta--con-foto {
        flex-direction: row;
        align-items: center;
        gap: 18px;
    }

    .nito-series__lista--cuatro .nito-series__tarjeta--con-foto .nito-series__foto {
        width: 190px;
        height: 107px;
        padding: 6px;
    }

}

.nito-series__tarjeta:hover,
.nito-series__tarjeta:focus {
    background: #e8ecfb;
    border-color: #0018a9;
    box-shadow: 0 10px 25px rgb(0 24 169 / .12);
    transform: translateY(-3px);
}

.nito-series__tarjeta:hover .nito-series__flecha,
.nito-series__tarjeta:focus .nito-series__flecha {
    transform: translateX(3px);
}

.nito-series__tarjeta:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 3px;
}

/* La salida para quien no sepa su serie. Va dentro del componente a
   proposito: si estuviera en un bloque aparte se separaria del grid en
   cuanto alguien reordenara la fila. */
.nito-series__salida {
    margin: 20px 0 0;
    color: #57575D;
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
}

.nito-series__salida a {
    color: #0018a9;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nito-series__salida a:hover {
    color: #000000;
}

/* Las columnas se declaran al doble y cada tarjeta ocupa dos, para poder
   centrar la ultima fila. Con cinco series y tres columnas, la 4 y la 5 se
   quedaban pegadas a la izquierda con un hueco a la derecha; desplazandolas
   media columna quedan centradas bajo las tres de arriba, en triangulo.

   Los selectores :nth-child(n):nth-last-child(m) solo se cumplen cuando hay
   exactamente cinco tarjetas, asi que una lista de otro tamano no se ve
   afectada y sigue rellenando de izquierda a derecha. */
@media (min-width: 600px) {
    .nito-series .nito-series__lista {
        grid-template-columns: repeat(4, 1fr);
    }

    .nito-series__item {
        grid-column: span 2;
    }

    /* La quinta de cinco, sola en su fila: se centra. */
    .nito-series__item:nth-child(5):nth-last-child(1) {
        grid-column: 2 / span 2;
    }
}

@media (min-width: 1024px) {
    .nito-series .nito-series__lista {
        grid-template-columns: repeat(6, 1fr);
    }

    /* La lista de cuatro conserva sus dos columnas: esta regla va despues de
       la de 600px y si no se repite aqui vuelve a las seis. */
    .nito-series .nito-series__lista--cuatro {
        grid-template-columns: repeat(2, 1fr);
    }

    .nito-series__lista--cuatro .nito-series__item {
        grid-column: auto;
    }

    /* La cuarta y la quinta de cinco, solas en la segunda fila. */
    .nito-series__item:nth-child(4):nth-last-child(2) {
        grid-column: 2 / span 2;
    }

    .nito-series__item:nth-child(5):nth-last-child(1) {
        grid-column: 4 / span 2;
    }


}

/* Movil: la tarjeta se compacta para que las cinco quepan en el primer scroll,
   que es el objetivo del bloque. Medido en 390x844, las cinco tarjetas pasan de
   588px de alto a 455 sin perder ni una linea de texto ni bajar de los 48px de
   area tactil. */
@media (max-width: 600px) {
    .nito-series__tarjeta {
        min-height: 64px;
        padding: 12px 14px;
        gap: 10px;
    }

    .nito-series__nombre {
        margin-bottom: 2px;
        font-size: 16px;
    }

    .nito-series__modelos {
        font-size: 13px;
        line-height: 1.35;
    }

    .nito-series__flecha {
        width: 18px;
        height: 18px;
    }

    .nito-series__foto {
        width: 104px;
        height: 58px;
        padding: 2px;
    }

    .nito-series__tarjeta--con-foto {
        min-height: 82px;
    }

    .nito-series .nito-series__lista {
        gap: 10px;
    }

    .nito-series__salida {
        margin-top: 16px;
        font-size: 14px;
    }
}

/* ==================================================================
   .nito-abs-gen -- las generaciones de ABS de una marca
   ==================================================================
   Nacio el 2026-09-18 para arreglar un error de bulto: la seccion de
   tecnologias ABS de la pagina 4835 se escribio con core/heading y
   core/paragraph sueltos, y salio como un articulo de texto corrido de
   1.242px de ancho alineado a la izquierda, con los H3 en la tipografia por
   defecto del tema. Medido contra sus vecinas, todas las demas secciones de
   esa pagina centran el texto y lo limitan a la caja de contenido, asi que
   aquella quedaba como un cuerpo extrano en mitad de la pagina.

   Aqui se usa el mismo lenguaje de tarjeta que .nito-series y las infobox de
   sintomas: caja blanca, borde #c1cbf5, titulo en azul de marca. Una tarjeta
   puede marcarse como --destacada para el sistema con mas averias, que es
   informacion real y no enfasis decorativo.

   Las columnas van por consulta de medios explicita, como en .nito-series. */

.nito-abs-gen {
    width: 100%;
    margin: 0 auto;
}

.nito-abs-gen .nito-abs-gen__lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nito-abs-gen__item {
    margin: 0;
}

/* Una sola generacion en la lista ocupa el ancho entero. Sin esto se quedaba
   en una de las tres columnas con 800px vacios al lado, que es como salio la
   seccion del Integral ABS de la Serie R, donde la lista tiene una tarjeta. */
.nito-abs-gen__item:only-child {
    grid-column: 1 / -1;
}

.nito-abs-gen__tarjeta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #c1cbf5;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgb(0 24 169 / .04);
    text-align: left;
}

/* El sistema con mas incidencia de averia. El borde y el sello son el unico
   sitio donde se dice cual es, asi que no es decoracion. */
.nito-abs-gen__tarjeta--destacada {
    border-color: #0018a9;
    box-shadow: 0 10px 25px rgb(0 24 169 / .10);
}

.nito-abs-gen__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.nito-abs-gen__anios {
    padding: 4px 10px;
    background: #e8ecfb;
    border-radius: 999px;
    color: #0018a9;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .04em;
    white-space: nowrap;
}

.nito-abs-gen__sello {
    padding: 4px 10px;
    background: #0018a9;
    border-radius: 999px;
    color: #ffffff;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.nito-abs-gen .nito-abs-gen__titulo {
    margin: 0;
    color: #0018a9;
    font-weight: 800;
    font-size: 20px;
    line-height: 1.2;
}

.nito-abs-gen__texto {
    margin: 0;
    color: #57575D;
    font-size: 15px;
    line-height: 1.6;
}

/* El bloque de datos: dos filas de etiqueta + valor. Se separa del cuerpo con
   una linea para que se lea como ficha y no como mas parrafo. */
.nito-abs-gen__datos {
    margin: 4px 0 0;
    padding-top: 14px;
    border-top: 1px solid #e8ecfb;
}

.nito-abs-gen__dato {
    margin: 0 0 8px;
    color: #57575D;
    font-size: 14px;
    line-height: 1.5;
}

.nito-abs-gen__dato:last-child {
    margin-bottom: 0;
}

.nito-abs-gen__etiqueta {
    display: block;
    color: #0f172a;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Frase de cierre bajo las tarjetas (Serie R: como saber que modulo lleva
   tu moto). */
.nito-abs-gen .nito-abs-gen__nota {
    max-width: 764px;
    margin: 24px auto 0;
    color: #57575D;
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
}

.nito-abs-gen__nota strong {
    color: #0f172a;
}

/* Tarjetas que enlazan a la ficha del modulo (Serie R). El titulo enlazado
   conserva su azul, y el enlace del pie se empuja al fondo con margin-top:auto
   para que quede a la misma altura en las tres tarjetas. */
.nito-abs-gen .nito-abs-gen__titulo a {
    color: inherit;
    text-decoration: none;
}

.nito-abs-gen .nito-abs-gen__titulo a:hover {
    text-decoration: underline;
}

.nito-abs-gen .nito-abs-gen__ficha {
    align-self: flex-end; /* a la derecha: la tarjeta es flex en columna */
    margin-top: auto;
    padding-top: 6px;
    color: #0018a9;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.nito-abs-gen .nito-abs-gen__ficha::after {
    content: " \2192";
}

.nito-abs-gen .nito-abs-gen__ficha:hover {
    text-decoration: underline;
}

/* Boton de WhatsApp bajo la nota. El aspecto es el de .nito-boton. */
.nito-abs-gen .nito-abs-gen__accion {
    margin: 16px 0 0;
    text-align: center;
}

/* Misma pastilla que el "Buscar modulo" del buscador (.nm-buscador__submit):
   radio completo, 50px de alto, espaciado de letra y sombra azul. */
.nito-abs-gen .nito-abs-gen__accion .nito-boton,
.nito-abs-gen .nito-abs-gen__accion .nito-boton:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 12px 28px;
    border: 0;
    border-radius: 999px;
    background: #0018a9;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .1em;
    box-shadow: 0 12px 24px -10px rgb(0 24 169 / .5);
    transition: background .2s ease, transform .1s ease;
}

.nito-abs-gen .nito-abs-gen__accion .nito-boton:hover {
    background: #001480;
    color: #ffffff;
}

.nito-abs-gen .nito-abs-gen__accion .nito-boton:active {
    background: #001480;
    color: #ffffff;
    transform: translateY(1px);
}

@media (min-width: 600px) {
    .nito-abs-gen .nito-abs-gen__lista {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Con tres tarjetas y dos columnas, la destacada ocupa la fila entera en
       vez de dejar un hueco al lado. */
    .nito-abs-gen__item--destacado {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .nito-abs-gen .nito-abs-gen__lista {
        grid-template-columns: repeat(3, 1fr);
    }

    .nito-abs-gen__item--destacado {
        grid-column: auto;
    }
}

@media (max-width: 600px) {
    .nito-abs-gen__tarjeta {
        padding: 18px;
    }

    .nito-abs-gen .nito-abs-gen__titulo {
        font-size: 18px;
    }

    .nito-abs-gen__texto {
        font-size: 14px;
    }
}

/* ==================================================================
   .nito-ref -- panel "¿es reparable la tuya?" de la cabecera de marca
   ==================================================================
   Sustituye al buscador de modulo en las landings de marca. En el hub
   /reparar-abs-moto/ el buscador tiene sentido porque el visitante aun no ha
   elegido marca; en una landing de BMW Motorrad ya la ha elegido, y ademas
   llegaba con la pestana COCHE marcada y con un desplegable de tres marcas.
   Preguntaba lo mismo que el selector de series de mas abajo, peor, y su
   boton era el mas grande de la pantalla.

   Este panel pregunta lo que si quiere contestar quien llega aqui: si SU
   unidad tiene arreglo. Reaprovecha la carcasa de .nm-buscador -mismo fondo,
   mismo antetitulo, mismo boton- para no inventar un segundo lenguaje visual
   en la misma fila, y solo anade la lista de pasos.

   No lleva campo de texto a proposito: lo que hace falta para contestar es
   una foto de la pegatina y del conector, no una referencia tecleada, y un
   campo que no lleva a ningun sitio es peor que no tenerlo. */

.nito-ref__pasos {
    display: grid;
    gap: 12px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    counter-reset: nito-ref;
}

.nito-ref__paso {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    color: #57575D;
    font-size: 14px;
    line-height: 1.5;
    counter-increment: nito-ref;
}

/* El numero se genera con counter para que el orden no dependa de que nadie
   se acuerde de renumerar a mano al reordenar los pasos. */
.nito-ref__paso::before {
    content: counter(nito-ref);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #e8ecfb;
    border-radius: 50%;
    color: #0018a9;
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
}

.nito-ref__paso strong {
    color: #0f172a;
}

/* El boton es un enlace, no un submit. .nm-buscador__submit fija
   height:50px y no centra nada por dentro: en un <button> el texto se centra
   solo, pero en un <a> con display:block se queda pegado arriba de la caja.
   De ahi el flex. */
.nito-ref .nm-buscador__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
}

/* El antetitulo de .nm-buscador trae una lupa, que era lo suyo cuando el panel
   era un buscador. Aqui lo que se pide es una foto, asi que el icono cambia.
   Las dos propiedades de mascara van siempre juntas. */
.nito-ref .nm-buscador__eyebrow::before {
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8.5h3l1.5-2.5h9L18 8.5h3v11H3z"/><circle cx="12" cy="13.5" r="3.5"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8.5h3l1.5-2.5h9L18 8.5h3v11H3z"/><circle cx="12" cy="13.5" r="3.5"/></svg>') no-repeat center / contain;
}


/* El panel de alta profesional pide un icono de ficha, no la camara de
   .nito-ref ni la lupa de .nm-buscador. Va despues para ganar por orden, que
   empata en especificidad con la regla de la camara. */
.nito-ref--alta .nm-buscador__eyebrow::before {
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h5"/><path d="m8 16.5 1.5 1.5L13 15"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h5"/><path d="m8 16.5 1.5 1.5L13 15"/></svg>') no-repeat center / contain;
}
/* ==========================================================================
   CARRITO CLASICO
   ==========================================================================
   Desde el 2026-09-22 /carrito/ usa el shortcode y no el bloque. Acompana al
   bloque "Carrito" de functions.php.

   Aqui hay poco porque casi todo se reaprovecha: .nito-carrito-volver,
   .nito-carrito-aviso, .nito-carrito-pago* y .nito-carrito-iva se escribieron
   sin el prefijo .wp-block-woocommerce-cart, asi que valen tal cual en los dos
   carritos. Solo hacen falta las dos piezas que no pueden compartirse.
   ========================================================================== */

/* --- Plazo por linea ----------------------------------------------------- */
/* En el carrito de bloques esto es el ::before de .wc-block-cart-item__prices,
   alimentado por la custom property --nito-carrito-plazo. Aqui el texto es un
   <p> de verdad (functions.php, nito_carrito_clasico_plazo), asi que solo hay
   que darle el mismo aspecto. Mismos valores que alli. */
.nito-carrito-plazo {
    margin: 2px 0 6px;
    color: var(--global-palette6, #636363);
    font-size: 13px;
    line-height: 1.35;
}

/* --- Boton "Finalizar compra" -------------------------------------------- */
/* Mismo sintoma que en el carrito de bloques -letra NEGRA sobre el azul, casi
   ilegible- pero NO la misma causa, y por eso no vale copiar aquella regla.

   Alli el boton es un <a class="wc-block-components-button ...> al que le cae
   el boton generico de Kadence, que es 0-1-0, y basta con poner el contenedor
   delante. Aqui el boton es <a class="checkout-button button alt wc-forward">
   y quien manda es la hoja de WooCommerce de Kadence con
   .woocommerce a.button.alt, que es 0-3-1. Un .cart_totals .checkout-button
   (0-2-0) matchea, aparece en la hoja y aun asi pierde: comprobado en el
   navegador, con color calculado rgb(0,0,0).

   Los dos declaran color: var(--global-palette-btn), que en este sitio es
   palette3, NEGRO, sobre var(--global-palette-btn-bg), azul.

   Nombrando tambien .woocommerce y .alt y el propio <a> esto queda en 0-4-1 y
   gana por especificidad, sin !important y sin depender del orden de las
   hojas. */
.woocommerce .cart_totals a.checkout-button.alt {
    border: 2px solid var(--global-palette1, #0018a9);
    border-radius: 10px;
    background: var(--global-palette1, #0018a9);
    color: var(--global-palette2, #ffffff);
    font-weight: 700;
}

/* El foco repite los colores de reposo y va ANTES de :hover, que empata en
   especificidad y decide el orden del archivo. */
.woocommerce .cart_totals a.checkout-button.alt:focus {
    background: var(--global-palette1, #0018a9);
    color: var(--global-palette2, #ffffff);
}

/* Al pasar el raton, al contrario: fondo blanco y letra azul. El borde ya
   estaba puesto en reposo, del color del fondo, para que no cambie de tamano
   al hacerse visible. */
.woocommerce .cart_totals a.checkout-button.alt:hover,
.woocommerce .cart_totals a.checkout-button.alt:active {
    border-color: var(--global-palette1, #0018a9);
    background: var(--global-palette2, #ffffff);
    color: var(--global-palette1, #0018a9);
    box-shadow: none;
}

/* ==========================================================================
   SEGURO DE MONTAJE Y DESMONTAJE
   ==========================================================================
   Acompana al bloque "Seguro de montaje y desmontaje" de functions.php.
   ========================================================================== */

/* --- La fila propia del bloque ------------------------------------------- */
/* El bloque no cabe en la celda "Producto": ahi la opcion larga se cortaba en
   "(Excluidos Concesion..." y la explicacion caia en una columna de cuatro
   palabras. Ocupa una fila entera debajo de la del modulo (ver functions.php,
   nito_seguro_fila), pegada a ella: sin borde arriba y sin espacio, para que se
   lean como una sola cosa. */
.nito-seguro-fila > td {
    padding-top: 0;
    border-top: 0;
}

/* --- El bloque del selector ---------------------------------------------- */
.nito-seguro {
    width: 100%;
    margin: 0 0 4px;
    padding: 10px 12px;
    /* --global-gray-400 es el gris con el que Kadence dibuja los bordes de los
       campos. NO vale --global-palette7: en esta paleta es #fafafb, casi
       blanco, y el borde no se veia. */
    border: 1px solid var(--global-gray-400, #cbd5e0);
    border-radius: 6px;
    background: var(--global-palette2, #ffffff);
}

/* Mientras no se ha elegido, el filo azul lo senala sin gritar: es el estado
   normal de una linea recien anadida, no un error. */
.nito-seguro--sin-elegir {
    border-left: 4px solid var(--global-palette1, #0018a9);
}

.nito-seguro__etiqueta {
    display: block;
    /* Pegado a las opciones: el titulo y los dos radios son una sola cosa. */
    margin: 0;
    color: var(--global-palette3, #1a1a1a);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

/* Las dos opciones. Son radios y no un desplegable porque el encargo pide
   exactamente dos entradas y ninguna marcada de salida, y un <select> sin
   entrada vacia marca siempre la primera (ver functions.php,
   nito_seguro_bloque). */
.nito-seguro__opciones {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0 0;
}

.nito-seguro__opcion {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: var(--global-palette4, #3D3D3D);
    font-size: 14px;
    line-height: 1.35;
    cursor: pointer;
}

.nito-seguro__radio {
    flex: 0 0 auto;
    margin: 1px 0 0;
    /* accent-color tine el control nativo con el azul de la marca sin tener que
       ocultarlo y dibujar uno falso, que es lo que rompe el foco de teclado. */
    accent-color: var(--global-palette1, #0018a9);
}

.nito-seguro__radio:focus-visible {
    outline: 2px solid var(--global-palette1, #0018a9);
    outline-offset: 2px;
}

/* Mientras viaja la peticion. El selector ya va disabled desde JS; esto solo
   lo cuenta. */
.nito-seguro--cargando {
    opacity: .6;
}

/* Si el AJAX falla se devuelve el control y se marca. El rojo es el de los
   avisos de WooCommerce, que es el unico que hay en juego en esta pagina: el
   tema no define ninguno propio y no se anade un color nuevo. */
.nito-seguro--error {
    border-color: #b32d2e;
}

/* --- "Finalizar compra" bloqueado ---------------------------------------- */
/* Es un <span>, no un <a>, para que no haya nada que pulsar. Aun asi le cae
   encima el .button generico de Kadence (0-1-0) y saldria azul como el bueno;
   con .woocommerce .cart_totals delante esto es 0-3-0 y gana. */
.nito-seguro__aviso {
    margin: 0 0 10px;
    color: var(--global-palette6, #636363);
    font-size: 13px;
    line-height: 1.4;
}

.woocommerce .cart_totals .nito-seguro__boton-bloqueado {
    display: block;
    width: 100%;
    border: 2px solid var(--global-gray-400, #cbd5e0);
    border-radius: 10px;
    background: var(--global-gray-400, #cbd5e0);
    color: var(--global-palette4, #3D3D3D);
    text-align: center;
    font-weight: 700;
    cursor: not-allowed;
    box-shadow: none;
}

/* --- Los dos titulos del carrito clasico, como en el de bloques ---------- */
/* "Resumen del carrito" y "Totales del carrito" salian a 42px en negro: los
   pinta una regla h2 pelada (0-0-1) de la hoja en linea que genera Kadence, y
   nadie los bajaba. En el carrito de bloques el equivalente -"TOTALES DEL
   CARRITO", el heading block del resumen- se sirve en minuscula tipografica y
   en versalitas, y es el aspecto que se queda.

   Los valores estan medidos en /carrito/, no elegidos a ojo: 14,4px (0.9rem),
   peso 500, uppercase y --global-palette4 (#3D3D3D). Se escriben en rem y no
   en px para que sigan escalando igual que alli, donde salen de un 0.9em.

   Con .woocommerce y el contenedor delante esto es 0-2-1 y gana de sobra a la
   regla de Kadence, sin !important. */
.woocommerce .cart-summary > h2,
.woocommerce .cart_totals > h2 {
    margin: 0 0 12px;
    color: var(--global-palette4, #3D3D3D);
    font-size: .9rem;
    font-weight: 500;
    text-transform: uppercase;
}

/* ==========================================================================
   CARRITO CLASICO: LA TABLA, CON EL REPARTO DEL CARRITO DE BLOQUES
   ==========================================================================
   La tabla clasica trae seis columnas -quitar,
   imagen, producto, precio, cantidad, subtotal- y queda estrecha y desordenada.
   El carrito de bloques usa tres, y es el aspecto que se copia. Medido en
   /carrito/: imagen 103px, la columna ancha 510px y el total 100px, con el
   precio unitario y el selector de cantidad DENTRO de la columna ancha, debajo
   del nombre.

   Se hace con grid sobre cada <tr> en vez de tocar el marcado, que lo sirve la
   plantilla de WooCommerce. Como las filas dejan de ser filas de tabla, la
   tabla ya no reparte columnas por si misma: por eso thead y tbody pasan
   tambien a bloque y TODAS las filas declaran el mismo grid-template-columns.
   Si alguna se quedara fuera, se veria descuadrada al instante.
   ========================================================================== */

.woocommerce-cart-form .shop_table,
.woocommerce-cart-form .shop_table thead,
.woocommerce-cart-form .shop_table tbody {
    display: block;
    width: 100%;
}

.woocommerce-cart-form .shop_table tr {
    display: grid;
    grid-template-columns: 103px minmax(0, 1fr) 100px;
    align-items: start;
    column-gap: 16px;
}

/* --- La cabecera: PRODUCTO y TOTAL --------------------------------------- */
/* Precio y cantidad ya no son columnas, asi que sus encabezados sobran; los de
   quitar e imagen siempre estuvieron vacios. */
.woocommerce-cart-form .shop_table thead th.product-remove,
.woocommerce-cart-form .shop_table thead th.product-thumbnail,
.woocommerce-cart-form .shop_table thead th.product-price,
.woocommerce-cart-form .shop_table thead th.product-quantity {
    display: none;
}

.woocommerce-cart-form .shop_table thead th.product-name {
    grid-column: 1 / 3;
}

.woocommerce-cart-form .shop_table thead th.product-subtotal {
    grid-column: 3;
    text-align: right;
}

/* --- Cada linea ---------------------------------------------------------- */
.woocommerce-cart-form .shop_table tr.cart_item > td {
    padding-left: 0;
    padding-right: 0;
}

.woocommerce-cart-form .shop_table tr.cart_item > td.product-thumbnail {
    grid-column: 1;
    grid-row: 1 / span 4;
}

.woocommerce-cart-form .shop_table tr.cart_item > td.product-name {
    grid-column: 2;
    grid-row: 1;
}

.woocommerce-cart-form .shop_table tr.cart_item > td.product-price {
    grid-column: 2;
    grid-row: 2;
    padding-top: 2px;
}

.woocommerce-cart-form .shop_table tr.cart_item > td.product-quantity {
    grid-column: 2;
    grid-row: 3;
    padding-top: 8px;
}

/* El aspa de quitar baja al final de la columna ancha, que es donde el carrito
   de bloques pone su enlace "Quitar". */
.woocommerce-cart-form .shop_table tr.cart_item > td.product-remove {
    grid-column: 2;
    grid-row: 4;
    padding-top: 8px;
    text-align: left;
}

.woocommerce-cart-form .shop_table tr.cart_item > td.product-subtotal {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
}

/* --- Las filas que ocupan todo el ancho ---------------------------------- */
/* colspan no significa nada cuando la fila es un grid: hay que decirlo con
   grid-column. Son la del bloque del seguro y la de "Actualizar carrito". */
.woocommerce-cart-form .shop_table tr > td[colspan] {
    grid-column: 1 / -1;
}

/* --- Movil --------------------------------------------------------------- */
/* --- Movil ---------------------------------------------------------------
   El corte son 719px y no 768 A PROPOSITO: es el que usa WooCommerce para su
   tabla responsive, y por debajo de el hace tres cosas, todas con !important,
   que desmontaban esta maqueta:

     .woocommerce table.shop_table_responsive tr    { display: block }
     .woocommerce table.shop_table_responsive tr td { display: block;
                                                      text-align: right }
     ...y td::before { content: attr(data-title) }, o sea "Producto: ",
     "Precio: ", "Cantidad: " delante de cada celda.

   Es decir: la rejilla se venia abajo, todo se apilaba a lo ancho y alineado a
   la DERECHA -de ahi que los dos recuadros del seguro salieran descuadrados- y
   encima aparecian etiquetas que aqui sobran, porque el contenido ya se lee
   solo. Su diseno responsive y este son incompatibles, asi que se desactiva el
   suyo entero en vez de parchear sintomas.

   La especificidad de WooCommerce es 0-2-2 en la fila y 0-2-3 en la celda;
   nombrando ademas el formulario esto es 0-3-2 y 0-3-3. El !important es
   obligatorio: el suyo lo lleva, y a un !important solo se le gana con otro.

   La imagen se encoge y el total baja a su propia linea, en lugar de competir
   por el ancho con el nombre. */
@media (max-width: 719px) {
    .woocommerce .woocommerce-cart-form table.shop_table_responsive tr {
        display: grid !important;
        grid-template-columns: 72px minmax(0, 1fr);
        column-gap: 12px;
    }

    .woocommerce .woocommerce-cart-form table.shop_table_responsive tr td {
        display: block !important;
        text-align: left !important;
    }

    /* Las etiquetas de WooCommerce: fuera. */
    .woocommerce .woocommerce-cart-form table.shop_table_responsive tr td::before {
        content: none !important;
    }

    .woocommerce-cart-form .shop_table tr.cart_item > td.product-subtotal {
        grid-column: 2;
        grid-row: 5;
        text-align: left;
    }

    /* Apilados y sin cabecera, el precio unitario y el total de la linea son
       dos importes seguidos sin nada que los distinga -identicos, ademas,
       cuando la cantidad es 1-. El de abajo lleva rotulo. Es la unica etiqueta
       que se recupera de las de WooCommerce, y se escribe aqui en vez de
       reactivar la suya porque la suya dice "Subtotal" y esta columna se
       llama "Total". */
    .woocommerce .woocommerce-cart-form table.shop_table_responsive tr.cart_item > td.product-subtotal::before {
        content: "Total: " !important;
        /* Sin esto el espacio final del content se colapsa y sale
           "Total:300,00 €". Misma trampa que en el <dt> de la version. */
        white-space: pre;
        color: var(--global-palette6, #636363);
        font-weight: 500;
    }
}

/* Entre 720 y 768 no manda nadie mas, asi que basta con estrechar la rejilla.
   La cabecera solo existe aqui: por debajo de 719 WooCommerce la esconde. */
@media (max-width: 768px) {
    .woocommerce-cart-form .shop_table tr {
        grid-template-columns: 72px minmax(0, 1fr);
        column-gap: 12px;
    }

    .woocommerce-cart-form .shop_table thead th.product-name {
        grid-column: 1 / -1;
    }

    .woocommerce-cart-form .shop_table thead th.product-subtotal {
        display: none;
    }

    .woocommerce-cart-form .shop_table tr.cart_item > td.product-subtotal {
        grid-column: 2;
        grid-row: 5;
        text-align: left;
    }
}

/* --- Bordes: uno por linea, no uno por celda ----------------------------- */
/* WooCommerce dibuja el filete con .woocommerce table.shop_table td
   { border-top: 1px solid var(--global-gray-400) }, contando con que cada fila
   sea una franja horizontal de celdas. Con el reparto en tres columnas las
   celdas se apilan, asi que ese mismo filete salia DENTRO de la linea: una raya
   bajo el nombre, otra bajo el precio y otra bajo la cantidad.

   Se le quita a las celdas y se le pone a la fila, que es donde se queria. La
   regla de WooCommerce es 0-2-2; nombrando tambien el formulario y cart_item
   esto es 0-4-2 y gana sin !important. */
.woocommerce .woocommerce-cart-form .shop_table td {
    border-top: 0;
}

.woocommerce .woocommerce-cart-form .shop_table tr.cart_item {
    padding-top: 14px;
    border-top: 1px solid var(--global-gray-400, #cbd5e0);
}

/* La fila del seguro va pegada a la de su modulo: sin filete y sin hueco, para
   que se lean como una sola cosa. */
.woocommerce .woocommerce-cart-form .shop_table tr.nito-seguro-fila {
    padding-top: 0;
    border-top: 0;
}

/* --- La cabecera, como la del carrito de bloques ------------------------- */
/* Medido alli: 14,4px (0.9rem), peso 700, versalitas y #111. */
.woocommerce .woocommerce-cart-form .shop_table thead th {
    padding: 0 0 10px;
    border-bottom: 0;
    color: #111111;
    font-size: .9rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* --- "Quitar" ------------------------------------------------------------ */
/* El texto lo pone PHP (nito_carrito_texto_quitar). Aqui solo deja de parecer
   el aspa roja que era: enlace discreto, subrayado al pasar por encima. El
   tamano del aspa lo fijaba .woocommerce a.remove con font-size grande y
   color rojo, que con una palabra en vez de un glifo quedaba enorme. */
.woocommerce .woocommerce-cart-form .shop_table td.product-remove a.remove {
    display: inline-block;
    width: auto;
    height: auto;
    /* !important porque WooCommerce declara .woocommerce a.remove
       { color: red !important }, pensado para un aspa y no para una palabra.
       Es el caso en que el tema si lo usa: pisar marcado de un proveedor. */
    color: var(--global-palette6, #636363) !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: underline;
    text-underline-offset: .2em;
    background: none;
}

.woocommerce .woocommerce-cart-form .shop_table td.product-remove a.remove:hover,
.woocommerce .woocommerce-cart-form .shop_table td.product-remove a.remove:focus {
    color: var(--global-palette1, #0018a9) !important;
    background: none;
}

/* ==========================================================================
   CARRITO CLASICO: EL RESUMEN DE CADA LINEA, COMO EN EL DE BLOQUES
   ==========================================================================
   Va con el bloque "El resumen de cada linea" de
   functions.php, que pone el nombre sin la version, la version como dato
   aparte, los botones de cantidad y la papelera. Aqui solo el aspecto.
   ========================================================================== */

/* --- El titulo del seguro, pegado a sus opciones ------------------------- */
/* Kadence da a todo <p> dentro de .single-content un margin-bottom de
   var(--global-md-spacing), que aqui son 32px, con selector .single-content p
   (0-1-1). Un .nito-seguro__etiqueta suelto es 0-1-0 y PIERDE por la columna de
   elementos, asi que el margin:0 no se aplicaba y quedaban 32px de hueco entre
   el titulo y las opciones. Con el contenedor delante esto es 0-2-0 y gana.
   Es la misma trampa que CLAUDE.md documenta para los encabezados propios. */
.nito-seguro .nito-seguro__etiqueta {
    margin: 0;
}

/* --- La imagen: 80x80, como en el bloque --------------------------------- */
.woocommerce .woocommerce-cart-form .shop_table td.product-thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

/* --- "Elige tu versión: ..." --------------------------------------------- */
/* Ahora que el nombre ya no la lleva dentro, WooCommerce la pinta como <dl>. */
.woocommerce .woocommerce-cart-form .shop_table td.product-name dl.variation {
    margin: 2px 0 0;
    color: var(--global-palette6, #636363);
    font-size: 13px;
    line-height: 1.35;
}

.woocommerce .woocommerce-cart-form .shop_table td.product-name dl.variation dt,
.woocommerce .woocommerce-cart-form .shop_table td.product-name dl.variation dd {
    display: inline;
    margin: 0;
    padding: 0;
    font-weight: 400;
}

.woocommerce .woocommerce-cart-form .shop_table td.product-name dl.variation dd p {
    display: inline;
    margin: 0;
}

/* Al poner <dt> y <dd> en linea se pegan -"Elige tu versión:2002"-, porque
   entre ellos solo hay el salto de linea del marcado, que se colapsa. */
.woocommerce .woocommerce-cart-form .shop_table td.product-name dl.variation dt::after {
    content: " ";
    white-space: pre;
}

/* --- La cantidad, con - y + ---------------------------------------------- */
.nito-cantidad {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--global-gray-400, #cbd5e0);
    border-radius: 6px;
    overflow: hidden;
}

/* El boton de restar va a la izquierda del campo; en el marcado se emiten los
   dos detras, para que el orden de tabulacion sea campo, restar, sumar. */
.nito-cantidad__boton[data-paso="-1"] {
    order: -1;
}

.nito-cantidad__boton {
    min-width: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--global-palette9, #fbfcfe);
    color: var(--global-palette4, #3D3D3D);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

/* Kadence pinta los <button> con su color de marca en hover y foco -y deja el
   texto casi blanco-, asi que hay que repetir los colores de reposo en :focus
   ANTES de :hover. Es la regla de CLAUDE.md para cualquier boton propio. */
.nito-cantidad__boton:focus {
    background: var(--global-palette9, #fbfcfe);
    color: var(--global-palette4, #3D3D3D);
    box-shadow: none;
}

.nito-cantidad__boton:hover,
.nito-cantidad__boton:active {
    background: var(--global-gray-400, #cbd5e0);
    color: var(--global-palette3, #000000);
    box-shadow: none;
}

.nito-cantidad .quantity {
    margin: 0;
}

.woocommerce .nito-cantidad .quantity .qty {
    width: 44px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--global-palette2, #ffffff);
    text-align: center;
    font-size: 14px;
    /* Las flechitas del input number sobran teniendo - y +. */
    -moz-appearance: textfield;
    appearance: textfield;
}

.woocommerce .nito-cantidad .quantity .qty::-webkit-outer-spin-button,
.woocommerce .nito-cantidad .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- La papelera --------------------------------------------------------- */
/* El SVG lo pone PHP (nito_carrito_papelera). El !important del color sigue
   siendo necesario: .woocommerce a.remove lo declara en rojo con !important.
   Desde el 2026-09-29 (Carla) es roja -el rojo de la paleta, palette13- y más
   grande, porque gris y a 20 px pasaba desapercibida, y va pegada a lo de
   encima y alineada a la izquierda con el texto: antes iba centrada en una caja
   de 32 px, 6 px a la derecha del texto y con ~36 px de aire encima. */
.woocommerce-cart-form .shop_table tr.cart_item > td.product-remove {
    padding-top: 2px;
    padding-bottom: 0;
}

.woocommerce .woocommerce-cart-form .shop_table td.product-remove a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 28px;
    height: 28px;
    color: var(--global-palette13, #b82105) !important;
    text-decoration: none;
    background: none;
}

.woocommerce .woocommerce-cart-form .shop_table td.product-remove a.remove svg {
    width: 26px;
    height: 26px;
    margin-left: -3px; /* el trazo del icono empieza 3 px dentro de su caja */
    fill: currentColor;
}

.woocommerce .woocommerce-cart-form .shop_table td.product-remove a.remove:hover,
.woocommerce .woocommerce-cart-form .shop_table td.product-remove a.remove:focus {
    color: #8a1804 !important;
    background: none;
}

/* --- Mientras viaja la peticion ------------------------------------------ */
.nito-cargando {
    opacity: .6;
    pointer-events: none;
}

/* --- Area tactil en movil ------------------------------------------------ */
/* Mismo criterio que ya se aplico al carrito de bloques: 44x44 para el dedo. */
@media (max-width: 768px) {
    .nito-cantidad__boton {
        min-width: 44px;
        min-height: 44px;
    }

    .woocommerce .nito-cantidad .quantity .qty {
        min-height: 44px;
    }

    /* 44x44 para el dedo, pero sin que se note: los márgenes negativos
       devuelven el alto de más, y el icono sigue alineado a la izquierda. */
    .woocommerce .woocommerce-cart-form .shop_table td.product-remove a.remove {
        width: 44px;
        height: 44px;
        margin: -18px 0 -8px 0; /* arriba más: la celda de encima trae ~10 px de relleno de más en móvil */
    }
}

/* --- La comision del seguro en "Totales del carrito" --------------------- */
/* WooCommerce le pone la clase .fee a su fila. El nombre puede ser largo
   -"Seguro de montaje y desmontaje (MÓDULO MK61)"- y con el ancho de esa
   columna conviene que no lo parta a mitad de palabra. */
.woocommerce .cart_totals .fee th {
    font-weight: 500;
    line-height: 1.35;
}

/* --- Ajustes finos de la linea ------------------------------------------- */

/* El nombre en negrita, como en el carrito de bloques, donde
   .wc-block-components-product-name va a 600. */
.woocommerce .woocommerce-cart-form .shop_table td.product-name > a {
    font-weight: 600;
}

/* El plazo se comia 32px por debajo: es el margin-bottom que Kadence da a todo
   <p> dentro de .single-content, con selector 0-1-1, contra el que una clase
   suelta (0-1-0) no puede. Con el formulario delante esto es 0-2-0 y gana.
   Misma trampa que con el titulo del seguro. */
.woocommerce-cart-form .nito-carrito-plazo {
    margin: 2px 0 0;
}

/* Y la version, pegada al plazo. */
.woocommerce .woocommerce-cart-form .shop_table td.product-name dl.variation {
    margin-top: 1px;
}

/* --- La cantidad, mas pequena -------------------------------------------- */
/* Salia a 80x55 por .woocommerce .quantity .qty, una regla antigua de la FICHA
   de producto que declara ancho, alto, borde, fondo y tipografia con
   !important y que alcanza tambien al carrito. Para ganarle hay que igualar el
   !important; la especificidad ya es mayor (0-4-0 contra 0-3-0) por nombrar
   .nito-cantidad. No se toca aquella regla porque sigue siendo la buena en la
   ficha de producto, que es donde se escribio. */
.woocommerce .nito-cantidad .quantity .qty {
    width: 44px !important;
    height: 32px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: var(--global-palette2, #ffffff) !important;
    color: var(--global-palette3, #000000) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.nito-cantidad__boton {
    min-height: 32px;
}

/* En movil se recupera el area tactil de 44px, que el bloque de arriba acaba
   de reducir a 32. */
@media (max-width: 768px) {
    .woocommerce .nito-cantidad .quantity .qty {
        width: 52px !important;
        height: 44px !important;
    }

    .nito-cantidad__boton {
        min-height: 44px;
    }
}

/* --- "Actualizar carrito" y "Vaciar carrito", con aspecto de enlace ---------
   Carla, 2026-09-30: que no destaquen tanto, igual que "Calcular envio". Siguen
   siendo <button> del formulario (WooCommerce necesita el name=update_cart y
   nuestro nito_vaciar_carrito), solo cambia el aspecto.

   Especificidad: el estado deshabilitado lo pinta WooCommerce con
   .woocommerce-cart table.cart td.actions .button:disabled (0-5-2), y Kadence
   pone button:hover/:focus en blanco sobre casi blanco. El selector nombra el
   atributo name / la clase propia para llegar a 0-4-1 / 0-5-1 sin !important,
   y :focus repite el reposo antes del :hover.

   Al pasar, solo se desplaza el subrayado (text-underline-offset), como hace
   Kadence con los enlaces; el color no cambia.

   WooCommerce sirve "Actualizar" DESHABILITADO hasta que cambia una cantidad:
   se rebaja y no reacciona, para que no parezca listo para pulsar. */
.woocommerce .woocommerce-cart-form td.actions button[name="update_cart"],
.woocommerce .woocommerce-cart-form td.actions button[name="update_cart"]:focus,
.woocommerce .woocommerce-cart-form td.actions button[name="update_cart"]:disabled,
.woocommerce .woocommerce-cart-form td.actions button.nito-vaciar-carrito,
.woocommerce .woocommerce-cart-form td.actions button.nito-vaciar-carrito:focus {
    min-height: 0;
    height: auto;
    margin: 0 0 0 20px;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--global-palette1, #0018a9);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.4;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: .1em;
    transition: text-underline-offset .2s ease;
    cursor: pointer;
}

.woocommerce .woocommerce-cart-form td.actions button[name="update_cart"]:hover:not(:disabled),
.woocommerce .woocommerce-cart-form td.actions button[name="update_cart"]:active:not(:disabled),
.woocommerce .woocommerce-cart-form td.actions button.nito-vaciar-carrito:hover,
.woocommerce .woocommerce-cart-form td.actions button.nito-vaciar-carrito:active {
    background: transparent;
    box-shadow: none;
    color: var(--global-palette1, #0018a9);
    text-underline-offset: .25em;
}

.woocommerce .woocommerce-cart-form td.actions button[name="update_cart"]:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.woocommerce .woocommerce-cart-form td.actions button[name="update_cart"]:focus-visible,
.woocommerce .woocommerce-cart-form td.actions button.nito-vaciar-carrito:focus-visible {
    outline: 2px solid var(--global-palette1, #0018a9);
    outline-offset: 2px;
}

/* "Calcular envio": Kadence pone a:hover en --global-palette-highlight-alt,
   que en este sitio es blanco, y el enlace desaparecia sobre el fondo claro.
   Al pasar solo se desplaza el subrayado, sin cambiar el color. */
.woocommerce-shipping-calculator .shipping-calculator-button,
.woocommerce-shipping-calculator .shipping-calculator-button:hover,
.woocommerce-shipping-calculator .shipping-calculator-button:focus {
    color: var(--global-palette1, #0018a9);
}

.woocommerce-shipping-calculator .shipping-calculator-button {
    text-underline-offset: .1em;
    transition: text-underline-offset .2s ease;
}

.woocommerce-shipping-calculator .shipping-calculator-button:hover {
    text-underline-offset: .25em;
}

/* --- La version en el resumen del pedido --------------------------------- */
/* El nombre ya no la lleva dentro (functions.php,
   nito_resumen_nombre_sin_variacion), asi que WooCommerce la pinta como <dl>
   debajo. Mismo aspecto que en el carrito. */
.woocommerce-checkout-review-order-table dl.variation {
    margin: 2px 0 0;
    color: var(--global-palette6, #636363);
    font-size: 12px;
    line-height: 1.35;
}

.woocommerce-checkout-review-order-table dl.variation dt,
.woocommerce-checkout-review-order-table dl.variation dd {
    display: inline;
    margin: 0;
    padding: 0;
    font-weight: 400;
}

.woocommerce-checkout-review-order-table dl.variation dd p {
    display: inline;
    margin: 0;
}

/* El espacio del salto de linea se colapsa al ponerlos en linea. */
.woocommerce-checkout-review-order-table dl.variation dt::after {
    content: " ";
    white-space: pre;
}

/* --- Facturacion: los campos condicionales ------------------------------- */
/* La clase la pone y la quita nito_facturacion_js() segun el tipo de cliente y
   el pais. Se oculta la FILA entera -label incluida-, no solo el campo. */
.nito-fact-oculto {
    display: none !important;
}

/* --- Talleres cercanos, en el checkout ----------------------------------- */
/* Lo pinta nito_talleres_js() cuando el tipo de cliente es particular. Mismo
   lenguaje visual que los avisos del carrito: filo azul y fondo casi blanco. */
.nito-talleres {
    margin: 16px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--global-gray-400, #cbd5e0);
    border-left: 4px solid var(--global-palette1, #0018a9);
    border-radius: 6px;
    background: var(--global-palette9, #fbfcfe);
}

.nito-talleres .nito-talleres__titulo {
    margin: 0 0 8px;
    color: var(--global-palette3, #000000);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.nito-talleres__lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nito-talleres__item {
    display: flex;
    flex-direction: column;
    margin: 0 0 10px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--global-gray-400, #cbd5e0);
    font-size: 13px;
    line-height: 1.4;
}

.nito-talleres__item:last-child {
    margin: 0;
    padding: 0;
    border-bottom: 0;
}

.nito-talleres__nombre {
    color: var(--global-palette3, #000000);
    font-weight: 600;
}

.nito-talleres__dato,
.nito-talleres__km {
    color: var(--global-palette6, #636363);
}

.nito-talleres__tel {
    align-self: flex-start;
    color: var(--global-palette1, #0018a9);
    font-weight: 600;
    text-decoration: none;
}

.nito-talleres__tel:hover,
.nito-talleres__tel:focus {
    text-decoration: underline;
    text-underline-offset: .2em;
}

.nito-talleres .nito-talleres__nota {
    margin: 10px 0 0;
    color: var(--global-palette6, #636363);
    font-size: 12px;
    line-height: 1.4;
}

/* --- Desplegables de select2: la opcion resaltada ------------------------ */
/* El desplegable de pais -y cualquier otro que WooCommerce convierta en
   select2- pintaba la opcion bajo el raton en NEGRO sobre el azul de marca, y
   no habia quien la leyera. No es cosa de select2: su hoja pone blanco sobre
   azul, pero Kadence la pisa con

     .select2-container--default .select2-results__option--highlighted[aria-selected]
     { background: var(--global-palette-btn-bg); color: var(--global-palette-btn) }

   y --global-palette-btn en este sitio es palette3, NEGRO. Es la misma causa
   que dejaba ilegible "Finalizar compra" y las flechas del carrusel.

   La regla de Kadence es 0-4-0; nombrando tambien el <ul> contenedor esto es
   0-5-0 y gana sin !important.

   Vale para todo el sitio a proposito: el fallo estaba en todos los select2,
   no solo en el del pais. */
.select2-container--default .select2-results__options .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__options .select2-results__option--highlighted[data-selected] {
    background: var(--global-palette1, #0018a9);
    color: var(--global-palette2, #ffffff);
}

/* --- El titular de la cabecera, con su peso de verdad --------------------- */
/* El texto del H1 va envuelto en <strong> -asi lo guarda el bloque-, y el
   navegador le da a <strong> un font-weight: bold, que son 700. Ese 700 pisaba
   los 800 del encabezado, con lo que el titular se veia mas fino de lo que el
   bloque pedia. Se nota sobre todo al lado de la palabra acentuada.

   Con inherit el <strong> deja de imponer peso y el titular se ve como toca, sea
   cual sea el que tenga el encabezado. Vale para las tres cabeceras que usan el
   componente: profesionales, contacto y quienes somos. */
.nito-cabecera-abs h1 strong,
.nito-cabecera-abs h1 b {
    font-weight: inherit;
}

/* ==========================================================================
   TRABAJA CON NOSOTROS: LA TARJETA DE CANDIDATURA
   ==========================================================================
   La seccion de envio de CV pasa a ser una tarjeta de dos mitades: a la
   izquierda un panel azul con lo que se ofrece, a la derecha el formulario
   sobre blanco.

   Se cuelga de .nito-empleo, una clase puesta a mano en el bloque de la fila.
   NO se usa el kb-row-layout-id… que genera Kadence: ese identificador lleva
   dentro el ID de la pagina y un hash, y desaparece en cuanto el bloque se
   recrea o se copia a otro sitio, llevandose el estilo por delante sin avisar.
   ========================================================================== */

/* La fila pierde su fondo: el color pasa a la tarjeta. */
.nito-empleo .kt-inside-inner-col > .wp-block-columns {
    /* El bloque venia con are-vertically-aligned-center, y por eso el panel de
       texto aparecia flotando a media altura del formulario, que es mucho mas
       largo. Estirados, las dos mitades empiezan arriba y la tarjeta cierra. */
    align-items: stretch;
    gap: 0;
    margin: 0;
    /* El relleno va en los paneles, no en la tarjeta. Heredado de la fila eran
       81px a cada lado, y en un movil de 386px dejaban 121px para las DOS
       columnas: la tarjeta se quedaba en dos tiras de 119px en vez de apilarse. */
    padding: 0;
    border: 1px solid var(--global-gray-400, #cbd5e0);
    border-radius: 14px;
    background: var(--global-palette2, #ffffff);
    /* Recorta las esquinas de los dos paneles sin tener que redondearlos uno a
       uno. */
    overflow: hidden;
    box-shadow: 0 18px 40px -28px rgba(0, 24, 169, .45);
}

.nito-empleo .kt-inside-inner-col > .wp-block-columns > .wp-block-column {
    /* Kadence y core reparten con flex-basis; aqui las dos mitades mandan por
       igual y el padding va dentro. */
    margin: 0;
    padding: 34px;
    /* Y esto es lo que de verdad estira los paneles: core pone
       .wp-block-column.is-vertically-aligned-center { align-self: center }, y un
       align-self en el hijo gana al align-items del contenedor por mucho que
       este lo pida. Sin esto el panel azul se quedaba a media altura, flotando
       junto a un formulario mucho mas largo. */
    align-self: stretch;
}

/* --- El panel de la izquierda -------------------------------------------- */
.nito-empleo .kt-inside-inner-col > .wp-block-columns > .wp-block-column:first-child {
    /* Color de reserva mientras carga la foto, y por si algun dia falta. */
    background: var(--global-palette3, #000000);
    color: var(--global-palette2, #ffffff);
    /* El texto al pie, sobre la parte oscurecida de la foto: es el reparto que
       usa la web publica. Arriba se ve el taller, abajo se lee. */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 420px;
}

/* El titulo y el texto los pinta Kadence con su color propio, azul sobre
   blanco, que aqui seria azul sobre azul. Se fuerzan a blanco: es el caso en
   que este tema si usa !important, pisar marcado de un proveedor. */
.nito-empleo .kt-inside-inner-col > .wp-block-columns > .wp-block-column:first-child .wp-block-kadence-advancedheading,
.nito-empleo .kt-inside-inner-col > .wp-block-columns > .wp-block-column:first-child p,
.nito-empleo .kt-inside-inner-col > .wp-block-columns > .wp-block-column:first-child strong {
    color: var(--global-palette2, #ffffff) !important;
}

.nito-empleo .kt-inside-inner-col > .wp-block-columns > .wp-block-column:first-child p {
    font-size: 15px;
    line-height: 1.55;
}

/* Las tres ventajas llevan el nombre en <strong>: se les da aire para que se
   lean como una lista y no como un parrafo corrido. */
.nito-empleo .kt-inside-inner-col > .wp-block-columns > .wp-block-column:first-child strong {
    display: inline-block;
    margin-top: 2px;
}

/* --- El panel del formulario --------------------------------------------- */
.nito-empleo .kt-inside-inner-col > .wp-block-columns > .wp-block-column:last-child {
    background: var(--global-palette2, #ffffff);
}

/* --- Movil ---------------------------------------------------------------- */
/* Core apila las columnas por debajo de 782px. La tarjeta se estrecha y los
   paneles pierden parte del relleno, que a esos anchos solo come pantalla. */
@media (max-width: 781px) {
    .nito-empleo .kt-inside-inner-col > .wp-block-columns {
        border-radius: 10px;
    }

    .nito-empleo .kt-inside-inner-col > .wp-block-columns > .wp-block-column {
        padding: 24px 20px;
    }
}

/* --- La foto del panel de candidatura ------------------------------------ */
/* Va como core/image dentro de la columna, no como background en el CSS: asi
   la URL vive en el contenido, donde la gestiona la biblioteca de medios, y no
   hay una ruta de uploads escrita a mano en la hoja de estilos.

   El panel se convierte en el contenedor, la foto lo cubre por detras y un velo
   azul va en medio: sin el, el texto blanco se pierde sobre una foto de taller
   llena de brillos y sombras. */
.nito-empleo .kt-inside-inner-col > .wp-block-columns > .wp-block-column:first-child {
    position: relative;
    overflow: hidden;
}

.nito-empleo__foto {
    position: absolute;
    z-index: 0;
    inset: 0;
    margin: 0;
}

.nito-empleo__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* La columna es estrecha y alta, asi que de la foto solo se ve una franja
       vertical: lo que decide que se ve es este porcentaje. Bajarlo desplaza la
       imagen hacia la DERECHA dentro del hueco, que es lo que hace falta para
       que el mecanico entre entero y no se le corte el cuerpo. */
    object-position: 42% center;
}

/* El velo. Va en un ::after y no en el background del panel porque ahi lo
   taparia la propia foto. */
.nito-empleo .kt-inside-inner-col > .wp-block-columns > .wp-block-column:first-child::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    /* Degradado y no color plano: un velo uniforme lo bastante opaco para que
       se lea el texto tapaba la foto entera y dejaba el panel como un
       rectangulo liso. Asi la parte de arriba se ve casi limpia y solo se
       oscurece donde hay letras. */
    background: linear-gradient(
        to top,
        rgba(6, 12, 46, .92) 0%,
        rgba(6, 12, 46, .78) 38%,
        rgba(6, 12, 46, .30) 70%,
        rgba(6, 12, 46, .10) 100%
    );
}

/* Y el texto, por encima de los dos. */
.nito-empleo .kt-inside-inner-col > .wp-block-columns > .wp-block-column:first-child > .wp-block-columns {
    position: relative;
    z-index: 2;
}

/* --- La etiqueta de la cabecera, a la medida de su texto ------------------ */
/* La pastilla superior -"- RED DE TALLERES", "- ÚNETE AL EQUIPO"...- llevaba un
   maxWidth en pixeles copiado del bloque original. Con un texto mas largo que
   aquel se queda corta y la etiqueta parte en dos lineas; con uno mas corto
   sobra hueco dentro de la pastilla.

   Ajustandola a su contenido deja de depender de un numero escrito a mano y
   vale para las cuatro cabeceras, midan lo que midan sus textos.

   El selector nombra el div a proposito: en este componente la etiqueta es el
   unico advancedheading con htmlTag div -el titular es h1 y el parrafo es p-,
   asi que no alcanza a los demas. Kadence fija su max-width con la clase
   generada del bloque, 0-1-0; esto es 0-2-1 y gana sin !important. */
.nito-cabecera-abs div.wp-block-kadence-advancedheading {
    width: fit-content !important;
    max-width: 100% !important;
}

/* --- El aire entre la etiqueta y el titular ------------------------------- */
/* Eran 64px: 32 de margen inferior de la pastilla mas 32 de margen superior del
   H1. No se funden en uno solo porque la columna es flexible, y ahi los
   margenes verticales no colapsan. Se deja el hueco en la mitad justa,
   quitandolo de la etiqueta y dejando un valor pequeno en el titular.

   !important por lo mismo que el ancho de la pastilla: estos margenes los
   escribe Kadence en el CSS que genera por bloque, y ahi no se le gana por
   especificidad. Vale para las cuatro cabeceras, que son el mismo componente. */
.nito-cabecera-abs div.wp-block-kadence-advancedheading {
    margin-bottom: 0 !important;
}

.nito-cabecera-abs h1.wp-block-kadence-advancedheading {
    margin-top: 14px !important;
}

/* ==========================================================================
   MOVIL: TAMANOS DE TITULAR RAZONABLES
   ==========================================================================
   Los titulares de seccion llevan en el bloque fontSize: [25, "", "xl"], que
   Kadence traduce a 25px en escritorio y a la variable xl por debajo de 767px.
   El problema es que esa variable es fluida y en un movil de 390px se resuelve
   en su MINIMO, 2.25rem = 36px: es decir, los titulos salian MAS GRANDES en el
   movil que en el escritorio, y un H2 de 36px en 390px de ancho ocupa tres
   lineas y empuja el contenido fuera de pantalla.

   Se corrige en las variables y no bloque a bloque a proposito: ese fontSize
   esta repetido en unas 190 paginas, muchas a traves de patrones
   sincronizados, asi que tocarlo pagina por pagina no acabaria nunca y volveria
   a colarse en la siguiente que se clone.

   Los valores son los de un movil normal: H1 sobre 32px, titulo de seccion 26,
   subtitulo 22. Se dejan md y sm como estan -17-20px y 13-14px-, que ya son
   tamanos correctos para texto corrido y para pies.
   ========================================================================== */
@media (max-width: 767px) {
    /* !important en variables: Kadence las define en un bloque de estilos EN
       LINEA que se imprime despues de esta hoja, asi que sin esto gana el suyo
       y los titulares seguian a 36px. Medido en el navegador a 390px. */
    :root {
        --global-kb-font-size-xxl: 2rem !important;
        --global-kb-font-size-xl: 1.625rem !important;
        /* lg NO se baja: es la que usan los H1 de las cabeceras, y a 1.375rem
           se quedaban en 22px, mas pequenos que un titulo de seccion. Se deja en
           su minimo original, 28px, que da la jerarquia correcta: H1 28 sobre
           H2 26. */
        --global-kb-font-size-lg: 1.75rem !important;
    }
}

/* --- Movil: dos excepciones que se salian de la escala -------------------- */
/* Medido a 390px en /reparar-abs/bmw/, que es la pagina con mas variedad de
   texto del sitio. El resto ya cae en 26-28px los titulares y 13-18px el texto;
   estas dos eran las unicas fuera de rango en los dos sentidos. */
@media (max-width: 767px) {
    /* El titulo del producto salia a 35px, mas que cualquier otro titulo de la
       pagina y en un ancho donde ocupa tres lineas. */
    .landing-titulo-producto {
        font-size: 26px;
    }

    /* Y las descripciones de la franja de caracteristicas a 11px, por debajo de
       lo que se lee comodo en un movil. La regla original las fija con
       !important, asi que hay que igualarlo para poder subirlas. */
    .nm-caract-desc {
        font-size: 13px !important;
    }
}

/* --- Pie: los enlaces, del color del texto ------------------------------- */
/* Al convertir los rotulos del pie en enlaces se volvieron NEGROS sobre el
   fondo oscuro: el texto lo pintaba el widget en blanco, pero un <a> toma el
   color de enlace del tema, que aqui resuelve a negro y desaparece.

   Heredar es mejor que fijar blanco: si algun dia cambia el color del pie, los
   enlaces lo siguen solos. El subrayado se reserva para el hover, que es lo que
   distingue al enlace del texto de alrededor. */
.site-footer .widget_block a,
.site-footer .wp-block-kadence-advancedheading a {
    color: inherit;
    text-decoration: none;
}

.site-footer .widget_block a:hover,
.site-footer .widget_block a:focus,
.site-footer .wp-block-kadence-advancedheading a:hover,
.site-footer .wp-block-kadence-advancedheading a:focus {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* --- Pie: la marca separada y las tres listas agrupadas ------------------- */
/* Las cuatro columnas salian a 60px iguales, y asi la marca pesa lo mismo que
   cada lista. Se reparte al reves: poco aire entre las tres listas, que son lo
   mismo y deben leerse como un bloque, y bastante entre la marca y ellas.

   Se hace con un hueco general pequeno mas un margen extra en la primera
   lista, en vez de con anchos de columna distintos: asi las tres listas
   conservan el mismo ancho entre si y solo cambia su separacion.

   Solo desde 768px: por debajo las columnas se apilan y un margen lateral las
   descolocaria. */
@media (min-width: 768px) {
    .site-top-footer-inner-wrap {
        column-gap: 28px;
    }

    /* El aire extra se le quita a la MARCA, no a la lista. Puesto como
       margen en la columna de servicios, esta se quedaba en 206px frente a los
       278 de las otras dos, y sus rotulos mas largos empezaban a partirse. La
       marca es texto corrido y absorbe la reduccion sin que se note. */
    .site-footer-top-section-1 {
        padding-right: 72px;
    }
}

/* ==========================================================================
   EL BUSCADOR DEL HERO DE LA HOME, EN MÓVIL
   ==========================================================================
   Solo afecta a la portada (2911). En el resto de páginas que llevan el
   buscador -22, 3388, 3496, 4835- la cabecera es .nito-cabecera-abs, que ya
   anula ese margen en su propio bloque responsive: medido a 390px, la tarjeta
   sale a left=20,3 y 334,5px de ancho en las cuatro.

   Qué lo empujaba a la derecha, medido en el render a 390, 480, 600 y 767px:
   NO es el justify-content:flex-end de .columna-buscador-hero -esa columna
   llega ya a ancho completo y su .kt-inside-inner-col se estira-, sino el
   margen izquierdo "xl" que lleva en sus atributos la columna del PATRÓN
   SINCRONIZADO 4083, que es donde vive el buscador. Kadence lo emite como

       .kadence-column22_97a6de-2e,
       .kt-inside-inner-col > .kadence-column22_97a6de-2e:not(.specificity)
           { margin-left: var(--global-kb-spacing-xl, 4rem) }

   o sea 64px a cualquier ancho. La tarjeta quedaba a left=84,3 con el hueco
   derecho a 0: 64px de aire a un lado y ninguno al otro.

   No se toca el atributo del patrón porque el patrón está TAMBIÉN en la 22, y
   allí ese margen es el que separa la tarjeta del texto en escritorio. Y no se
   escribe el identificador generado por Kadence, que desaparece si el bloque
   se recrea: se llega por estructura. La cadena es 0-6-0 contra el 0-3-0 de la
   regla de arriba -las dos clases mas el :not(.specificity)-, así que gana por
   especificidad y no hace falta ningún !important.

   Segundo efecto a 481-767px: el max-width de 520px de la tarjeta dejaba 127px
   muertos a su derecha dentro de una columna de 647px. Se quita para que ocupe
   el ancho disponible; los campos, el select y el botón ya son width:100%, así
   que basta con pasar la rejilla a una sola columna -lo que el bloque de 480px
   ya hacía para pantallas más pequeñas-.
   ========================================================================== */

@media (max-width: 767px) {
    .fila-hero-alineada > .kt-row-column-wrap > .wp-block-kadence-column:last-child > .kt-inside-inner-col > .wp-block-kadence-column {
        margin-left: 0;
    }

    .fila-hero-alineada .nm-buscador {
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    .fila-hero-alineada .nm-buscador__fields {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   EL BUSCADOR: LA PESTAÑA REFERENCIA Y EL ENLACE A LAS MARCAS
   ==========================================================================
   Las tres pestañas son tres <input type="radio"> del mismo name, así que el
   estado ya vive en el DOM y no hace falta JS para pintarlo. Lo que sí hace
   falta es :has(): los radios están dentro de .nm-buscador__tabs y los campos
   son HERMANOS de ese contenedor, no de los radios, así que un selector de
   hermanos (~) no llega. Se sube al formulario y se baja desde ahí.

   Por qué :has() y no una clase puesta por JS: así el estado correcto se pinta
   en el primer fotograma, sin parpadeo, y sigue funcionando si el script falla
   o llega tarde. Es soporte universal desde Firefox 121 (diciembre de 2023).

   Lo que el CSS NO puede hacer, y por eso hay un script de doce líneas en
   functions.php: poner disabled en el select -un campo oculto pero habilitado
   se sigue enviando- y cambiar el placeholder del input. Las dos mecánicas son
   independientes: si el script no corre, el select solo queda oculto y manda un
   marca= vacío, que es inofensivo; si el navegador no entendiera :has(), la
   regla :disabled de abajo lo oculta igual.

   Ojo al alcance: en la 3496 y la 4835 .nm-buscador es la carcasa de otro
   componente (.nito-ref), sin pestañas ni select. Todo lo de aquí cuelga de
   :has(...:checked) o de clases nuevas, así que no las toca.
   ========================================================================== */

/* --- Referencia: el select se va y el input se queda con toda la fila ----- */
.nm-buscador:has(#nm-tab-ref:checked) .nm-buscador__select {
    display: none;
}

/* Red de seguridad para un navegador sin :has(): el script ya lo ha
   deshabilitado, y un select deshabilitado dentro del buscador no pinta nada. */
.nm-buscador .nm-buscador__select:disabled {
    display: none;
}

.nm-buscador:has(#nm-tab-ref:checked) .nm-buscador__fields {
    grid-template-columns: 1fr;
}

/* --- El enlace a la sección de marcas del hub que toque ------------------- */
/* Los dos enlaces van siempre en el marcado y aquí se enseña el que
   corresponde. En Referencia no se enseña ninguno y se oculta el párrafo
   entero, para que no quede el hueco de una línea vacía.

   0-2-0 en el párrafo para ganarle a .single-content p, que es 0-1-1 y le
   metería el margen vertical del tema. Es el mismo motivo por el que
   .nm-buscador__help lleva su margin con !important; aquí no hace falta. */
.nm-buscador .nm-buscador__marcas {
    margin: -4px 0 14px;
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
    color: #8892a6;
}

.nm-buscador__marcas-enlace {
    display: none;
    color: #0018a9;
    font-weight: 700;
    text-decoration: underline;
}

.nm-buscador:has(#nm-tab-coche:checked) .nm-buscador__marcas-enlace--coche,
.nm-buscador:has(#nm-tab-moto:checked) .nm-buscador__marcas-enlace--moto {
    display: inline;
}

.nm-buscador:has(#nm-tab-ref:checked) .nm-buscador__marcas {
    display: none;
}

/* --- El hover del enlace de marcas ---------------------------------------- */
/* Kadence declara en global.min.css, sin media query:
 *
 *     a { color: var(--global-palette-highlight); text-underline-offset: .1em;
 *         transition: all .1s linear }
 *     a:hover, a:focus, a:active { color: var(--global-palette-highlight-alt);
 *                                  text-underline-offset: .25em }
 *
 * y en este sitio --global-palette-highlight-alt resuelve a #ffffff. La trampa es
 * la misma que ya documenta el bloque de los <button>: a:hover es 0-1-1 y
 * .nm-buscador__marcas-enlace es 0-1-0, asi que empatan en la columna de clases y
 * el tema padre gana por el elemento, aunque la hoja hija cargue despues.
 * Resultado: el enlace se volvia BLANCO sobre la tarjeta blanca, o sea invisible.
 *
 * Por que el enlace de .nm-buscador__help no tiene el problema: esa regla base es
 * .nm-buscador__help a, 0-1-1, empata con la de Kadence y ahi si decide el orden
 * de carga, que lo gana la hoja hija. Una clase mas y no habria hecho falta nada.
 *
 * Aqui SOLO se devuelve el color: el enlace se queda en el azul corporativo en los
 * tres estados. El aviso de que el raton esta encima ya lo da la otra mitad de la
 * regla de Kadence, el text-underline-offset que pasa de .1em a .25em, y esa se
 * deja correr a proposito -el subrayado se separa y se nota sin cambiar el color-.
 * Por eso tampoco importa el orden entre :hover y :focus, que en otros componentes
 * de este archivo si: los tres declaran lo mismo.
 *
 * No se usa !important: basta con anteponer el contenedor, que sube a 0-3-0. El
 * indicador de teclado va aparte, en :focus-visible, con un outline que no toca el
 * relleno. */
.nm-buscador .nm-buscador__marcas-enlace:hover,
.nm-buscador .nm-buscador__marcas-enlace:focus,
.nm-buscador .nm-buscador__marcas-enlace:active {
    color: #0018a9;
    text-decoration-color: currentColor;
}

.nm-buscador .nm-buscador__marcas-enlace:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 2px;
}

/* ==========================================================================
   TABLAS DE CONTENIDO — .nito-tabla
   ==========================================================================
   El tema no tenia tabla de contenido: .nm-grid-comparativa es una comparativa
   de precios hecha con divs y .nm-mini-caracteristicas son tres columnas de
   iconos, ninguna de las dos es una <table>. Asi que esto es un componente
   nuevo, escrito en la convencion mas reciente y pensado para colgar de un
   bloque core/table normal: se le pone className "nito-tabla" en el editor y la
   clase cae en el <figure>, que es lo que hace de marco.

   El scroll en movil es el <figure>, no la tabla: el bloque core ya trae
   overflow-x:auto, pero por si solo no sirve de nada, porque una tabla sin
   ancho minimo se comprime hasta caber y lo que se rompe son las palabras. El
   min-width es lo que la obliga a desbordar y, con el, a deslizarse.

   Las cabeceras de fila son <th scope="row">, no <td> en negrita: asi un lector
   de pantalla anuncia a que concepto pertenece cada celda al recorrerla, que en
   una tabla que se lee en horizontal es justo lo que se pierde.
   ========================================================================== */

.nito-tabla {
    margin: 24px 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.nito-tabla table {
    width: 100%;
    min-width: 620px;
    margin: 0;
    border-collapse: collapse;
    background: #ffffff;
    font-size: 15px;
}

.nito-tabla th,
.nito-tabla td {
    padding: 14px 18px;
    border: 1px solid #e9ebf0;
    text-align: left;
    vertical-align: top;
    line-height: 1.45;
}

.nito-tabla thead th {
    background: #0018a9;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* La celda vacia de la esquina no es una cabecera, asi que no se pinta como
   tal: queda como el hueco que es. */
.nito-tabla thead td {
    background: transparent;
    border-color: transparent;
}

.nito-tabla tbody th {
    background: #fbfcfe;
    color: #0f172a;
    font-weight: 700;
}

/* Kadence deja las tablas del contenido sin fondo alterno; el rayado se hace
   aqui y solo sobre las celdas de datos, para que no pelee con el fondo de la
   cabecera de fila. */
.nito-tabla tbody tr:nth-child(even) td {
    background: #fafafb;
}

@media (max-width: 767px) {
    .nito-tabla {
        margin-top: 18px;
    }

    .nito-tabla table {
        font-size: 14px;
    }

    .nito-tabla th,
    .nito-tabla td {
        padding: 12px 14px;
    }
}

/* ==========================================================================
   BUSCADOR: EL DESPLEGABLE DE SUGERENCIAS
   ==========================================================================
   El marcado lo crea el JS, asi que aqui no hay nada que se pinte sin el.

   Dos cosas condicionan el posicionamiento y conviene dejarlas escritas:

   - El desplegable NO cuelga del formulario, sino de un envoltorio propio
     (.nm-sug__marco) que el JS mete alrededor del input. .nm-buscador__fields
     es una rejilla de dos columnas en escritorio y de una en movil, asi que
     colgarlo del formulario obligaria a calcular el desplazamiento; colgandolo
     del input se alinea solo con el campo, tenga la rejilla las columnas que
     tenga.
   - La tarjeta del buscador NO lleva overflow:hidden -comprobado-, asi que el
     panel puede salirse por abajo sin recortarse. Si algun dia se le pone un
     overflow, esto deja de verse y hay que mirar aqui antes que al z-index.

   El z-index es 20 y basta: dentro de la tarjeta solo compite con el boton.
   Ojo si alguna vez se mete el buscador en una fila de Kadence con overlay:
   .kt-row-column-wrap crea contexto de apilamiento y el techo pasa a ser 1
   -esta documentado en el bloque de los overlays, mas arriba en este archivo-.
   ========================================================================== */

.nm-sug__marco {
    position: relative;
}

.nm-sug {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #e9ebf0;
    border-radius: 12px;
    box-shadow: 0 18px 40px -18px rgb(15 23 42 / .35);
}

.nm-sug__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
}

/* El resaltado es el mismo para el raton y para el teclado: el JS mueve
   aria-selected con las flechas y tambien al pasar por encima, asi que una
   sola regla cubre los dos casos y no pueden quedar dos filas marcadas. */
.nm-sug__item[aria-selected="true"] {
    background: #eef2ff;
}

.nm-sug__titulo {
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.nm-sug__sub {
    color: #8892a6;
    font-size: 12px;
    line-height: 1.3;
}

/* La landing de la marca es la respuesta buena en la mayoria de las busquedas,
   asi que se distingue de los modelos y de los productos. */
.nm-sug__item--marca .nm-sug__titulo {
    color: #0018a9;
}

@media (max-width: 767px) {
    .nm-sug {
        max-height: 260px;
    }

    .nm-sug__item {
        padding: 11px 12px;
    }
}

/* ==========================================================================
   CABECERA Y PIE SOBRE ASFALTO
   ==========================================================================
   La textura la pone el Personalizador -opciones header_main_background,
   header_sticky_background y footer_wrap_background-, porque es de donde salia
   el negro que habia antes. Aqui va solo lo que esa opcion no sabe hacer: el
   submenu, las huellas y la sombra del logotipo.

   La imagen es asfalto-oscuro-final.jpg, el original multiplicado por 0,62. Se
   oscurecio para que el texto destaque: la textura original promediaba una
   luminancia de 53 y el contraste del texto del pie (#fafafb) quedaba en
   11,76:1; con la oscura promedia 32 y sube a 15,54:1, casi lo mismo que tenia
   sobre el negro plano de antes (16,68:1).
   ========================================================================== */

/* --- El submenu -----------------------------------------------------------
   Kadence pinta el panel desplegable con dropdown_navigation_background, que es
   un control de COLOR y no admite imagen, asi que la textura tiene que venir de
   aqui. Se prefija con #masthead para llegar a 1-3-2 y ganarle a la regla
   generada, que es 0-3-2, sin recurrir a !important. #masthead es el id fijo de
   la plantilla de Kadence, no uno de los identificadores generados por bloque
   que desaparecen al recrearlos.

   Los <a> de dentro se quedan transparentes para que la textura corra por todo
   el panel en vez de quedar tapada por seis rectangulos planos; el azul del
   hover y el del elemento activo siguen siendo suyos y no se tocan. */
#masthead .header-navigation .header-menu-container ul ul.sub-menu,
#masthead .header-navigation .header-menu-container ul ul.submenu {
    background-color: #111111;
    background-image: url('/wp-content/uploads/2026/09/asfalto-oscuro-final.jpg');
    background-repeat: repeat;
    background-position: 50% 50%;
}

#masthead .header-navigation .header-menu-container ul ul li.menu-item > a,
#masthead .header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {
    background-color: transparent;
}

/* --- Las huellas de neumatico del pie -------------------------------------
   Van en un ::before y no como segunda capa de background porque el fondo del
   pie lo escribe el Personalizador: declarar background-image aqui lo pisaria
   entero y habria que repetir la textura tambien en el CSS, con dos sitios que
   mantener. Con el pseudoelemento cada cosa sigue en su sitio.

   El orden de pintado importa: un ::before posicionado se pinta DESPUES del
   contenido en flujo, asi que sin mas taparia el texto. Se le da z-index 0 y se
   suben los hijos directos del pie a posicionados, que al ir despues en el
   arbol quedan por encima.

   La opacidad es 0,28 y esta medida, no elegida a ojo: sobre el asfalto oscuro
   (luminancia media 32) un pixel de huella completamente opaco deja el fondo en
   32+(255-32)*0,28 = 94, y el texto #fafafb sobre ese gris da 6,2:1, por encima
   del 4,5 de la AA. Es el margen que hay para subirlas: a 0,4 bajaria a 4,6:1,
   justo en el limite, y a 0,5 se quedaria en 3,7:1, ya por debajo. */
#colophon {
    position: relative;
    overflow: hidden;
}

#colophon > * {
    position: relative;
}

#colophon::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(42%, 620px);
    background: url('/wp-content/uploads/2026/09/huellas-neumatico-final.webp') no-repeat right center / auto 100%;
    opacity: .28;
    pointer-events: none;
}

/* Por debajo de 992px el pie se apila y pasa de 384px de alto a mas de 1100:
   con "auto 100%" las huellas se estirarian a ~3400px de ancho para cubrirlo y
   no se reconoceria ni el dibujo. Ademas ahi el texto ocupa todo el ancho y les
   pasaria por encima. Se retiran. */
@media (max-width: 991px) {
    #colophon::before {
        content: none;
    }
}

/* --- El logotipo del pie --------------------------------------------------
   Sobre una textura, un texto grande sin sombra pierde el borde. Se le da una
   sombra corta y oscura, no un halo: el objetivo es despegarlo del grano, no
   que parezca que flota. Se llega por la columna y no por el identificador que
   Kadence genero para ese widget. */
#colophon .site-footer-top-section-1 h2 {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .45);
}

/* --- Anclas con la cabecera fija ------------------------------------------
   Desde que la cabecera es pegajosa tambien en movil, un salto a #marcas o a
   #buscador deja el destino debajo de la barra. Hoy no se nota porque las filas
   que llevan ancla tienen bastante relleno superior -medido: el H2 de #marcas
   aterriza a 206px y la barra acaba en 126-, pero eso es suerte y no diseño:
   en cuanto una fila con ancla lleve menos aire, el titular se mete debajo.

   scroll-margin-top solo afecta al salto, no a la maquetacion. 96px = los 80 de
   la barra mas un respiro. Va sin media query a proposito: la cabecera es fija
   en los dos tamaños, asi que el problema es el mismo arriba y abajo. */
.kb-row-layout-wrap[id],
.wp-block-kadence-column[id] {
    scroll-margin-top: 96px;
}

/* El azul del hover del submenu.
   Lo trae Kadence en dropdown_navigation_background -hover: palette1-, pero la
   regla de arriba que deja los <a> transparentes para que se vea la textura
   tambien se lo comia: esta escrita sin pseudoclase, asi que ganaba tambien en
   :hover. Se devuelve aqui, con la misma variable de la paleta que usa el menu
   principal en vez de un hexadecimal clavado, para que siga al tema si algun
   dia cambia el azul. 1-4-3 contra el 1-3-3 de la regla que lo apagaba. */
#masthead .header-navigation .header-menu-container ul ul li.menu-item > a:hover,
#masthead .header-navigation .header-menu-container ul ul li.menu-item > a:focus {
    background-color: var(--global-palette1, #0018a9);
}

/* --- El cajon del menu movil ---------------------------------------------
   El panel que se abre con la hamburguesa lo pinta Kadence en header.min.css
   con un color clavado: .popup-drawer .drawer-inner{background:#090c10}. No es
   una opcion del Personalizador -no hay ningun ajuste de fondo para el cajon-,
   asi que la textura solo puede venir de aqui.

   #mobile-drawer delante para llegar a 1-1-0 y ganarle al 0-2-0 de esa regla.
   El color se queda debajo como respaldo, igual que en la cabecera y el pie.

   El panel tiene overflow:auto y es mas alto que la pantalla, asi que la
   textura se repite en vertical, que es justo para lo que se preparo. */
#mobile-drawer .drawer-inner {
    background-color: #111111;
    background-image: url('/wp-content/uploads/2026/09/asfalto-oscuro-final.jpg');
    background-repeat: repeat;
    background-position: 50% 0;
}


/* ==========================================================================
   Ficha de producto maquetada: .nito-ficha (2026-09-24)

   La descripción de un producto se escribe en el editor clásico, así que no
   puede usar los bloques de Kadence de las páginas de marca. Esto reproduce su
   aspecto con marcado propio, midiendo en /reparar-abs/bmw/:

   - títulos de sección: Montserrat 25px / 800 / mayúsculas, centrados, con la
     palabra clave en #0018a9 y la raya de 75x3 px #0018a9 debajo (el
     kadence/spacer con divisor que llevan todas las secciones);
   - tarjetas de síntomas: blancas, radio 10px, icono #0018a9 arriba y título
     en mayúsculas 14.4px / 500 / #0018a9, sobre el fondo #f5f6ff de la fila;
   - preguntas: el acordeón de Kadence, borde 1px #1159af, fondo #fafbff,
     radio 4px, pregunta 16px / 500 / #3d3d3d y respuesta a 14.4px;
   - códigos de error: el propio [nito_errores_dtc], sin estilo nuevo.

   Todo cuelga de .nito-ficha para llegar a 0-2-0: Kadence da margen a los
   h2 y a los <p> de .single-content con 0-1-1, y una clase suelta pierde.
   Estilo propio de marcado propio, así que sin !important.
   ========================================================================== */

.nito-ficha {
    max-width: 1100px;
    margin: 0 auto;
}

.nito-ficha .nito-ficha__seccion {
    padding: 48px 32px;
    border-radius: 16px;
}

.nito-ficha .nito-ficha__seccion + .nito-ficha__seccion {
    margin-top: 24px;
}

.nito-ficha .nito-ficha__seccion--tinte {
    background: #f5f6ff;
}

.nito-ficha .nito-ficha__titulo {
    margin: 0 auto 28px;
    max-width: 820px;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.5;
    text-transform: uppercase;
    text-align: center;
    color: #000000;
}

.nito-ficha .nito-ficha__titulo::after {
    content: "";
    display: block;
    width: 75px;
    height: 3px;
    margin: 14px auto 0;
    background: #0018a9;
}

.nito-ficha .nito-ficha__resalte {
    background: none;
    color: #0018a9;
    padding: 0;
}

.nito-ficha .nito-ficha__intro {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    font-size: 16px;
    color: #3d3d3d;
}

/* La rejilla DTC trae su propio margin: 40px auto, pensado para ir suelta.
   Con botón hay que devolverle los 24px que la separan de él: esta regla es
   0-2-0 como .nm-errores--plegable .nm-errores-grid y va detrás, así que sin
   la segunda los anulaba y el botón quedaba pegado a las tarjetas. */
.nito-ficha .nm-errores-grid {
    margin-top: 28px;
    margin-bottom: 0;
}

.nito-ficha .nm-errores--plegable .nm-errores-grid {
    margin-bottom: 24px;
}

/* El botón trae 40px por debajo; aquí ya lo pone el relleno de la sección. */
.nito-ficha .nm-errores-mas {
    margin-bottom: 0;
}

.nito-ficha .nito-ficha__rejilla {
    display: grid;
    gap: 20px;
}

.nito-ficha .nito-ficha__rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.nito-ficha .nito-ficha__rejilla--2 { grid-template-columns: repeat(2, 1fr); }

/* --- Iconos: máscara + currentColor, uno por modificador ------------------ */

.nito-ficha .nito-ficha__tarjeta::before,
.nito-ficha .nito-ficha__beneficio::before,
.nito-ficha .nito-ficha__aviso::before {
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    background-color: currentColor;
    -webkit-mask: var(--nito-ficha-icono) no-repeat center / contain;
    mask: var(--nito-ficha-icono) no-repeat center / contain;
}

.nito-ficha__tarjeta--testigo { --nito-ficha-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><path d="M12 9v4M12 17h.01"/></svg>'); }
.nito-ficha__tarjeta--freno { --nito-ficha-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/></svg>'); }
.nito-ficha__tarjeta--sonido { --nito-ficha-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M23 9l-6 6M17 9l6 6"/></svg>'); }
.nito-ficha__tarjeta--intermitente { --nito-ficha-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>'); }
.nito-ficha__tarjeta--presion { --nito-ficha-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 14l4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></svg>'); }
.nito-ficha__tarjeta--comunicacion { --nito-ficha-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"/></svg>'); }
.nito-ficha__beneficio--ahorro { --nito-ficha-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><path d="M7 7h.01"/></svg>'); }
.nito-ficha__beneficio--definitiva { --nito-ficha-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>'); }
.nito-ficha__beneficio--garantia { --nito-ficha-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>'); }
.nito-ficha__beneficio--itv { --nito-ficha-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>'); }
.nito-ficha__aviso { --nito-ficha-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>'); }

/* --- Síntomas -------------------------------------------------------------- */

.nito-ficha .nito-ficha__tarjeta {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 24px 20px;
    text-align: center;
    color: #0018a9;
}

.nito-ficha .nito-ficha__tarjeta::before {
    margin: 0 auto 12px;
}

.nito-ficha .nito-ficha__tarjeta-titulo {
    margin: 0 0 10px;
    font-size: 14.4px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #0018a9;
}

.nito-ficha .nito-ficha__lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nito-ficha .nito-ficha__lista li {
    margin: 0;
    font-size: 14.4px;
    line-height: 1.6;
    color: #3d3d3d;
}

.nito-ficha .nito-ficha__lista li + li {
    margin-top: 6px;
}

/* --- Beneficios ------------------------------------------------------------ */

.nito-ficha .nito-ficha__beneficio {
    display: grid;
    grid-template-columns: 26px 1fr;
    grid-template-rows: auto 1fr;   /* el icono ocupa dos filas: que su alto no estire la del título */
    column-gap: 16px;
    align-items: start;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 24px;
    color: #0018a9;
}

/* Icono suelto, como en las tarjetas: la máscara recorta el pseudoelemento
   entero, así que un disco de fondo detrás del icono no es posible aquí. */
.nito-ficha .nito-ficha__beneficio::before {
    grid-row: 1 / span 2;
    margin-top: 1px;
}

.nito-ficha .nito-ficha__beneficio-titulo {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: #000000;
}

.nito-ficha .nito-ficha__beneficio p {
    margin: 0;
    font-size: 14.4px;
    line-height: 1.6;
    color: #3d3d3d;
}

/* --- Proceso --------------------------------------------------------------- */

.nito-ficha .nito-ficha__pasos {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: nito-paso;
    position: relative;
}

/* La línea que une los círculos, como en el patrón "Proceso de trabajo". */
.nito-ficha .nito-ficha__pasos::before {
    content: "";
    position: absolute;
    top: 27px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: #e5e7eb;
}

.nito-ficha .nito-ficha__paso {
    position: relative;
    margin: 0;
    text-align: center;
    counter-increment: nito-paso;
}

.nito-ficha .nito-ficha__paso::before {
    content: counter(nito-paso);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #0018a9;
    box-shadow: 0 0 0 6px #ffffff, 0 8px 18px rgba(0, 24, 169, .25);
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    position: relative;
}

.nito-ficha .nito-ficha__paso-titulo {
    margin: 0 0 8px;
    font-size: 14.4px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    color: #000000;
}

.nito-ficha .nito-ficha__paso p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #3d3d3d;
}

/* --- Patrón sincronizado "Proceso de trabajo" (3304) dentro de la ficha -----

   El patrón está hecho para las páginas de marca, y dos cosas suyas no casan
   aquí. Se corrigen solo dentro de .nito-ficha, sin tocar el patrón, que se
   usa en casi doscientas páginas:

   - La fila es alignfull y se sale a todo el ancho de la ventana; aquí se
     queda en los 1100px de las demás secciones.
   - La columna .proceso-trabajo lleva margin-bottom: -100px para montarse
     sobre la fila siguiente, y aquí tapaba el título de las preguntas. La
     columna cuelga de .kt-row-column-wrap, así que la regla de Kadence que
     la alcanza es la de una sola clase (0-1-0); con 0-3-0 basta. Se apunta
     a la clase propia, no al uniqueID del bloque. */

.nito-ficha .kb-row-layout-wrap.alignfull {
    margin-left: 0;
    margin-right: 0;
    width: auto;
    max-width: none;
}

.nito-ficha .kb-row-layout-wrap.alignfull > .kt-row-column-wrap {
    padding-left: 0;
    padding-right: 0;
}

.nito-ficha .kt-row-column-wrap > .proceso-trabajo {
    margin-bottom: 0;
}

.nito-ficha .kb-row-layout-wrap + .nito-ficha__seccion {
    margin-top: 24px;
}

/* --- Preguntas frecuentes -------------------------------------------------- */

.nito-ficha .nito-faq {
    max-width: 960px;
    margin: 0 auto;
}

.nito-ficha .nito-faq__item {
    background: #fafbff;
    border: 1px solid #1159af;
    border-radius: 4px;
}

.nito-ficha .nito-faq__item + .nito-faq__item {
    margin-top: 10px;
}

.nito-ficha .nito-faq__pregunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #3d3d3d;
    cursor: pointer;
    list-style: none;
}

.nito-ficha .nito-faq__pregunta::-webkit-details-marker {
    display: none;
}

.nito-ficha .nito-faq__pregunta::after {
    content: "";
    flex: 0 0 18px;
    height: 18px;
    background-color: #1159af;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') no-repeat center / contain;
    transition: transform .2s ease;
}

.nito-ficha .nito-faq__item[open] > .nito-faq__pregunta::after {
    transform: rotate(180deg);
}

.nito-ficha .nito-faq__pregunta:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 2px;
}

.nito-ficha .nito-faq__respuesta {
    padding: 4px 20px 20px;
}

.nito-ficha .nito-faq__respuesta p,
.nito-ficha .nito-faq__respuesta li {
    margin: 0;
    font-size: 14.4px;
    line-height: 1.6;
    color: #3d3d3d;
}

.nito-ficha .nito-faq__respuesta p + p,
.nito-ficha .nito-faq__respuesta p + ul {
    margin-top: 10px;
}

.nito-ficha .nito-faq__respuesta ul {
    margin: 0;
    padding-left: 20px;
}

.nito-ficha .nito-faq__respuesta li + li {
    margin-top: 6px;
}

.nito-ficha .nito-faq__respuesta a {
    color: #0018a9;
}

/* --- Aviso ----------------------------------------------------------------- */

.nito-ficha .nito-ficha__aviso {
    display: grid;
    grid-template-columns: 26px 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 14px;
    max-width: 960px;
    margin: 24px auto 0;
    padding: 20px 24px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #0018a9;
    border-radius: 10px;
    color: #0018a9;
}

.nito-ficha .nito-ficha__aviso::before {
    grid-row: 1 / span 2;
}

.nito-ficha .nito-ficha__aviso-titulo {
    margin: 2px 0 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: #000000;
}

.nito-ficha .nito-ficha__aviso p {
    margin: 0;
    font-size: 14.4px;
    line-height: 1.6;
    color: #3d3d3d;
}

/* --- Responsive: el 767 de Kadence, como los títulos de sección ------------ */

@media (max-width: 1024px) {
    .nito-ficha .nito-ficha__rejilla--3 { grid-template-columns: repeat(2, 1fr); }
    .nito-ficha .nito-ficha__pasos { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
    .nito-ficha .nito-ficha__pasos::before { display: none; }
}

@media (max-width: 767px) {
    /* El contenedor del sitio (24px) y el panel de la pestaña (17px) ya
       meten su relleno: la sección se queda con lo justo. */
    .nito-ficha .nito-ficha__seccion { padding: 28px 10px; border-radius: 12px; }
    .nito-ficha .nito-ficha__tarjeta,
    .nito-ficha .nito-ficha__beneficio { padding: 20px 16px; }
    .nito-ficha .nito-faq__respuesta { padding: 4px 16px 16px; }
    .nito-ficha .nito-ficha__aviso { padding: 16px; }
    .nito-ficha .nito-ficha__titulo { font-size: 20px; }
    .nito-ficha .nito-ficha__rejilla--3,
    .nito-ficha .nito-ficha__rejilla--2 { grid-template-columns: 1fr; }
    .nito-ficha .nito-ficha__pasos { grid-template-columns: 1fr; }
    .nito-ficha .nito-ficha__paso {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 16px;
        text-align: left;
    }
    .nito-ficha .nito-ficha__paso::before {
        grid-row: 1 / span 2;
        width: 44px;
        height: 44px;
        margin: 0;
        font-size: 17px;
        box-shadow: none;
    }
}

/* ==========================================================================
   Listados de las pestañas "Vehículos compatibles" y "Referencias" (2026-09-24)

   Los pinta nito_ficha_listado() dentro del mismo marco que la descripción
   maquetada (.nito-ficha > .nito-ficha__seccion--tinte, con su título de
   sección), así que aquí solo va la rejilla de fichas. Cada ficha repite la
   tarjeta de los códigos DTC: blanca, borde #e5e7eb, y al pasar sube, gana
   sombra y el borde se pone #0018a9.
   ========================================================================== */

.nito-ficha .nito-listado {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nito-ficha .nito-listado__item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgb(0 0 0 / .03);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #000000;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.nito-ficha .nito-listado__item:hover {
    transform: translateY(-3px);
    border-color: #0018a9;
    box-shadow: 0 8px 20px rgb(0 0 0 / .08);
}

.nito-ficha .nito-listado__item::before {
    content: "";
    flex: 0 0 20px;
    height: 20px;
    background-color: #0018a9;
    -webkit-mask: var(--nito-listado-icono) no-repeat center / contain;
    mask: var(--nito-listado-icono) no-repeat center / contain;
}

.nito-listado--vehiculos { --nito-listado-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>'); }
.nito-listado--referencias { --nito-listado-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9h16M4 15h16M10 3L8 21M16 3l-2 18"/></svg>'); }

/* La referencia se lee como un código, igual que la insignia DTC: azul
   corporativo y 800, con algo de aire entre caracteres. */
.nito-ficha .nito-listado--referencias .nito-listado__item {
    font-weight: 800;
    letter-spacing: .03em;
    color: #0018a9;
}

@media (max-width: 767px) {
    .nito-ficha .nito-listado {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* A 390px cada columna mide ~130px: sin esto el navegador partía
       "Independent" y "Adventure" a media palabra. */
    .nito-ficha .nito-listado__item {
        gap: 7px;
        padding: 10px;
        font-size: 13px;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: manual;
    }

    .nito-ficha .nito-listado__item::before {
        flex-basis: 15px;
        height: 15px;
    }
}

/* Subtítulo de grupo dentro de un listado de pestaña (una línea acabada en ":"
   en la meta). Mismo tratamiento que el título de las tarjetas de síntomas:
   mayúsculas, 14.4px, azul corporativo. */
.nito-ficha .nito-listado__grupo {
    margin: 0 0 12px;
    font-size: 14.4px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #0018a9;
}

.nito-ficha .nito-listado + .nito-listado__grupo {
    margin-top: 32px;
}

/* Título "Productos relacionados": el mismo tratamiento que los títulos de
   sección de la web (.nito-ficha__titulo, medido en /reparar-abs/bmw/): 25px,
   800, mayúsculas, centrado y la raya de 75x3 #0018a9 debajo. WooCommerce lo
   pinta como un <h2> pelado, y sin esto salía con el h2 global de Kadence a
   42px / 600, más grande que cualquier título de la página. Kadence le pone
   margin-bottom .5em con .woocommerce section.products > h2 (0-2-2), así que
   hace falta 0-3-2; sin !important. */
.woocommerce section.related.products > h2 {
    margin: 48px 0 28px;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.5;
    text-transform: uppercase;
    text-align: center;
    color: #000000;
}

.woocommerce section.related.products > h2::after {
    content: "";
    display: block;
    width: 75px;
    height: 3px;
    margin: 14px auto 0;
    background: #0018a9;
}

@media (max-width: 767px) {
    .woocommerce section.related.products > h2 {
        font-size: 20px;
    }
}

/* ==========================================================================
   Tarjetas de "Productos relacionados" y upsells (2026-09-24)

   Las pinta parciales/tarjeta-producto-relacionado.php, que nito_rel_plantilla()
   carga solo en esos dos bucles. El <li> sigue llevando las clases de siempre
   (li.product, content-bg…), así que la tarjeta de listado de la línea ~1815
   -fondo #e6edfc, texto centrado, borde de 2px y hover de -10px, todo con
   !important- le alcanza igual: aquí se neutraliza con !important y una clase
   más (.nito-rel, 0-3-2). Dentro, todo son clases propias que las reglas
   viejas no tocan, y ya no hace falta !important.

   El <li> queda transparente y la tarjeta es el <a>, que ocupa todo el alto:
   así las tarjetas de una fila miden lo mismo y el pie queda abajo.
   ========================================================================== */

.woocommerce ul.products li.product.nito-rel {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    overflow: visible !important;
    text-align: left !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    display: flex;
}

.woocommerce ul.products li.product.nito-rel:hover {
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.woocommerce ul.products li.product.nito-rel::before {
    content: none !important;
}

.nito-rel .nito-rel__tarjeta {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    overflow: hidden;
}

.nito-rel .nito-rel__tarjeta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgb(0 0 0 / .08);
    border-color: #0018a9;
}

.nito-rel .nito-rel__tarjeta:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 2px;
}

.nito-rel .nito-rel__imagen {
    display: block;
    margin-bottom: 14px;
    background: #ffffff;
}

.woocommerce ul.products li.product.nito-rel .nito-rel__imagen img {
    display: block;
    width: 100% !important;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    margin: 0 !important;
}

.nito-rel .nito-rel__meta {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Kadence (woocommerce.min.css) pinta todo h3 de un listado con
   .woocommerce ul.products li.product h3 (0-2-3): 1em, peso 500 y padding .5rem,
   que además deja asomar la tercera línea bajo el recorte. De ahí el 0-4-3. */
.woocommerce ul.products li.product.nito-rel h3.nito-rel__titulo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin: 0 0 14px;
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: none;
    text-align: left;
    color: #0a0f2c;
}

/* El pie es una franja a todo el ancho, pegada al borde inferior: los márgenes
   negativos anulan el padding de la tarjeta (16px, 12px en móvil) para que el
   fondo azul del hover llegue de lado a lado. La línea divisoria es su borde
   superior; el overflow: hidden de la tarjeta recorta sus esquinas. */
.nito-rel .nito-rel__pie {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: auto -16px -16px;
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    transition: background-color .2s ease;
}

.nito-rel .nito-rel__tarjeta:hover .nito-rel__pie {
    background-color: #0018a9;
}

.nito-rel .nito-rel__tarjeta:hover .nito-rel__precio,
.nito-rel .nito-rel__tarjeta:hover .nito-rel__ver {
    color: #ffffff;
}

.nito-rel .nito-rel__precio {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    color: #0018a9;
    white-space: nowrap;
}

.nito-rel .nito-rel__precio .woocommerce-Price-amount {
    color: inherit;
}

.nito-rel .nito-rel__desde {
    font-size: 12px;
    font-weight: 400;
}

.nito-rel .nito-rel__ver {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #0018a9;
    white-space: nowrap;
}

/* Dos columnas en móvil. Kadence pone grid-ss-col-2 en el <ul> pero no hay
   ninguna regla detrás: por debajo de 576px solo manda .grid-cols, una columna.
   De 576 a 1024 siguen sus 3 (grid-sm-col-3) y desde 1025 sus 4. */
@media (max-width: 575px) {
    .related.products ul.products.grid-cols,
    .up-sells.products ul.products.grid-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (max-width: 767px) {
    .nito-rel .nito-rel__tarjeta {
        padding: 12px;
    }

    .nito-rel .nito-rel__pie {
        flex-wrap: wrap;
        row-gap: 6px;
        margin: auto -12px -12px;
        padding: 10px 12px;
    }
}

/* --- Ficha maquetada, piezas añadidas con la 1ª y la 3ª generación de BMW ---
   (2026-09-24) Tres iconos más, tarjetas con párrafo en vez de viñetas, la
   lista de ventajas sin título y los subtítulos de la rejilla DTC agrupada. */

.nito-ficha__tarjeta--bateria { --nito-ficha-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="18" height="11" rx="2"/><path d="M22 11v3M6 12.5h4M8 10.5v4M14 12.5h3"/></svg>'); }
.nito-ficha__tarjeta--rele { --nito-ficha-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>'); }
.nito-ficha__tarjeta--conexion { --nito-ficha-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 1l22 22M16.72 11.06A10.94 10.94 0 0 1 19 12.55M5 12.55a10.94 10.94 0 0 1 5.17-2.39M10.71 5.05A16 16 0 0 1 22.58 9M1.42 9a15.91 15.91 0 0 1 4.7-2.88M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01"/></svg>'); }

/* Tarjeta con párrafo (explicación de cada error) en lugar de viñetas. */
.nito-ficha .nito-ficha__tarjeta p {
    margin: 0;
    font-size: 14.4px;
    line-height: 1.6;
    color: #3d3d3d;
}

/* Aire entre la entradilla de una sección y lo que viene debajo, y entre la
   rejilla de códigos y las tarjetas que la explican. */
.nito-ficha .nito-ficha__intro + .nito-ficha__rejilla,
.nito-ficha .nito-ficha__intro + .nito-listado {
    margin-top: 28px;
}

.nito-ficha .nm-errores + .nito-ficha__rejilla {
    margin-top: 28px;
}

/* Ventajas sin título: la ficha del listado de vehículos, con texto de frase. */
.nito-listado--ventajas { --nito-listado-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>'); }

.nito-ficha .nito-listado--ventajas {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.nito-ficha .nito-listado--ventajas .nito-listado__item {
    align-items: flex-start;
    font-size: 14.4px;
    font-weight: 500;
    line-height: 1.5;
    color: #3d3d3d;
}

.nito-ficha .nito-listado--ventajas .nito-listado__item::before {
    margin-top: 1px;
}

/* Rejilla DTC agrupada: subtítulo como el de los grupos de las pestañas. */
.nito-ficha .nm-errores__grupo {
    margin: 28px 0 0;
    font-size: 14.4px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #0018a9;
}

.nito-ficha .nm-errores--grupos .nm-errores-grid {
    margin-top: 12px;
}

/* Enlaces de texto: sin cambio de color al pasar, solo el desplazamiento del
   subrayado (2026-09-24).

   Kadence (global.min.css) declara a:hover, a:focus, a:active { color:
   var(--global-palette-highlight-alt); text-underline-offset: .25em }, y en esta
   paleta highlight-alt cae en palette2, que es #ffffff: todo enlace sin hover
   propio se volvía blanco sobre blanco. Se repone el color de reposo de Kadence
   (--global-palette-highlight, el azul) y el text-underline-offset sigue
   haciendo el efecto.

   Solo enlaces sin clase dentro del contenido, que son los que se escriben en
   el texto: botones, menús y tarjetas llevan clase. :where() deja la regla en
   0-1-1, lo mismo que la de Kadence, así que gana por cargar después sin pisar
   ningún componente que ya tenga su propio hover. */
:where(.entry-content, .single-content, .woocommerce-product-details__short-description) a:where(:not([class])):is(:hover, :focus, :active) {
    color: var(--global-palette-highlight);
}

/* ==========================================================================
   Cuenta de cliente (2026-09-24): icono de la cabecera, Mi cuenta, precio
   profesional y aviso del checkout. La lógica está en el plugin nito-cuenta.

   Colores del sitio: #0018a9 azul, #000 / #0a0f2c títulos, #3d3d3d texto,
   #e5e7eb bordes, #f5f6ff fondo tintado. Ámbar #f5a524 (palette15 de Kadence)
   solo para lo que espera un pago.
   ========================================================================== */

/* --- Icono de cuenta en la cabecera --------------------------------------
   Mismo color y tamaño que el carrito, medidos: #fbfcfe y 27 px en escritorio,
   19 px en móvil. En px y no en em: la inicial lleva su propio font-size y un
   em la dejaba en 22 px. Es un <button>, así que se anulan los estilos de
   botón de Kadence; y como button:focus de Kadence (0-1-1) pinta el hover, el
   reposo se repite en :focus con 0-2-0 (ver CLAUDE.md). */

.nito-cuenta-cab {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 14px;
}

.nito-cuenta-cab .nito-cuenta-cab__boton,
.nito-cuenta-cab .nito-cuenta-cab__boton:focus,
.nito-cuenta-cab .nito-cuenta-cab__boton:hover,
.nito-cuenta-cab .nito-cuenta-cab__boton:active {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #fbfcfe;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.nito-cuenta-cab .nito-cuenta-cab__boton:hover {
    opacity: .8;
}

.nito-cuenta-cab .nito-cuenta-cab__boton:focus-visible {
    outline: 2px solid #fbfcfe;
    outline-offset: 3px;
    border-radius: 50%;
}

.nito-cuenta-cab .nito-cuenta-cab__icono {
    width: 27px;
    height: 27px;
}

/* Con sesión: la inicial en un círculo del mismo tamaño que el icono. */
.nito-cuenta-cab .nito-cuenta-cab__inicial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

.nito-cuenta-cab .nito-cuenta-cab__globo {
    position: absolute;
    top: -5px;
    right: -7px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #f5a524;
    color: #0a0f2c;
    font-size: 10.4px;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
}

/* Móvil: el carrito de Kadence sale en #3d3d3d sobre el asfalto; se aclara
   al mismo color que el resto de la cabecera, y la cuenta va a su tamaño. */
#mobile-header .header-cart-button,
#mobile-header .header-cart-button:hover {
    color: #fbfcfe;
}

.nito-cuenta-cab--movil {
    margin-left: 12px;
}

.nito-cuenta-cab--movil .nito-cuenta-cab__icono,
.nito-cuenta-cab--movil .nito-cuenta-cab__inicial {
    width: 19px;
    height: 19px;
}

.nito-cuenta-cab--movil .nito-cuenta-cab__inicial {
    font-size: 11px;
}

/* Desplegable */
.nito-cuenta-cab .nito-cuenta-cab__panel {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    z-index: 1000;
    width: 320px;
    max-width: calc(100vw - 32px);
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgb(0 0 0 / .18);
    color: #3d3d3d;
    text-align: left;
    font-size: 14.4px;
    line-height: 1.5;
}

.nito-cuenta-cab .nito-cuenta-cab__panel[hidden] {
    display: none;
}

.nito-cuenta-cab .nito-cuenta-cab__titulo,
.nito-cuenta-cab .nito-cuenta-cab__hola {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 800;
    color: #0a0f2c;
}

.nito-cuenta-cab .nito-cuenta-cab__titulo--crear {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.nito-cuenta-cab .nito-cuenta-cab__rol {
    display: inline-block;
    margin: -6px 0 12px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #eef1ff;
    color: #0018a9;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.nito-cuenta-cab .nito-cuenta-cab__form p {
    margin: 0 0 10px;
}

.nito-cuenta-cab .nito-cuenta-cab__form label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #0a0f2c;
}

.nito-cuenta-cab .nito-cuenta-cab__form input[type="text"],
.nito-cuenta-cab .nito-cuenta-cab__form input[type="password"] {
    width: 100%;
    padding: 9px 12px;
    font-size: 14.4px;
}

.nito-cuenta-cab .nito-cuenta-cab__recordar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}

.nito-cuenta-cab .nito-cuenta-cab__recordar label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 500;
}

.nito-cuenta-cab .nito-cuenta-cab__recordar a {
    color: #0018a9;
}

.nito-cuenta-cab .nito-cuenta-cab__form .nito-boton {
    width: 100%;
    margin-top: 4px;
}

.nito-cuenta-cab .nito-cuenta-cab__crear {
    display: grid;
    gap: 8px;
}

.nito-cuenta-cab .nito-cuenta-cab__opcion {
    display: block;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    color: #3d3d3d;
    text-decoration: none;
    transition: border-color .2s ease;
}

.nito-cuenta-cab .nito-cuenta-cab__opcion:hover,
.nito-cuenta-cab .nito-cuenta-cab__opcion:focus-visible {
    border-color: #0018a9;
    color: #3d3d3d;
}

.nito-cuenta-cab .nito-cuenta-cab__opcion strong {
    display: block;
    font-size: 14.4px;
    color: #0018a9;
}

.nito-cuenta-cab .nito-cuenta-cab__opcion span {
    display: block;
    font-size: 12.5px;
    color: #6b7280;
}

.nito-cuenta-cab .nito-cuenta-cab__menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nito-cuenta-cab .nito-cuenta-cab__menu li {
    margin: 0;
    border-bottom: 1px solid #e5e7eb;
}

.nito-cuenta-cab .nito-cuenta-cab__menu li:last-child {
    border-bottom: 0;
}

.nito-cuenta-cab .nito-cuenta-cab__menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    color: #0a0f2c;
    font-weight: 600;
    text-decoration: none;
}

.nito-cuenta-cab .nito-cuenta-cab__menu a:hover,
.nito-cuenta-cab .nito-cuenta-cab__menu a:focus-visible {
    color: #0018a9;
}

.nito-cuenta-cab .nito-cuenta-cab__salir a {
    color: #6b7280;
    font-weight: 500;
}

.nito-cuenta-cab .nito-cuenta-cab__pendiente {
    padding: 1px 8px;
    border-radius: 999px;
    background: #fff3d6;
    color: #8a5a00;
    font-size: 11px;
    font-weight: 800;
}

/* --- Botones comunes -----------------------------------------------------
   La regla de la web: fondo azul corporativo y texto blanco; al pasar, fondo
   blanco y texto azul, con el borde azul para que el botón no desaparezca. */

.nito-boton,
a.nito-boton,
button.nito-boton,
.nito-boton:focus {
    display: inline-block;
    padding: 11px 20px;
    border: 2px solid #0018a9;
    border-radius: 8px;
    background: #0018a9;
    box-shadow: none;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.nito-boton:hover,
.nito-boton:active {
    background: #ffffff;
    border-color: #0018a9;
    color: #0018a9;
}

.nito-boton:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 2px;
}

.nito-boton.nito-boton--blanco,
.nito-boton.nito-boton--blanco:focus {
    background: #ffffff;
    border-color: #ffffff;
    color: #0018a9;
}

.nito-boton.nito-boton--borde-blanco,
.nito-boton.nito-boton--borde-blanco:focus {
    background: transparent;
    border-color: #ffffff;
    color: #ffffff;
}

/* Sobre la franja azul del pago pendiente el azul no se vería: ahí los dos
   botones invierten la regla y el hover los devuelve al contrario. */
.nito-boton.nito-boton--blanco:hover {
    background: transparent;
    border-color: #ffffff;
    color: #ffffff;
}

.nito-boton.nito-boton--borde-blanco:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #0018a9;
}

/* --- Precio profesional y aviso del checkout ----------------------------- */

.nito-precio-pro {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef1ff;
    color: #0018a9;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .03em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

.nito-aviso-cuenta {
    margin: 0 0 20px;
    padding: 14px 16px;
    border-left: 4px solid #0018a9;
    border-radius: 8px;
    background: #f5f6ff;
    color: #3d3d3d;
    font-size: 14.4px;
    line-height: 1.55;
}

.nito-aviso-cuenta a {
    color: #0018a9;
}

/* --- Estados (pedidos, facturas, consultas, verificación) ----------------- */

.nito-estado {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #374151;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

/* Seguimiento desde 2026-09-25 (estados.php de nito-cuenta). «Recibido» usa el
   gris por defecto de .nito-estado; «entregado» queda por los pedidos antiguos. */
.nito-estado--registrado,
.nito-estado--pend-envio,
.nito-estado--solic-recogida { background: #f1f5f9; color: #475569; }
.nito-estado--en-reparacion,
.nito-estado--reparado { background: #dbeafe; color: #1e3a8a; }
.nito-estado--pend-pago,
.nito-estado--pro-pendiente,
.nito-estado--consulta-abierta { background: #fff3d6; color: #8a5a00; }
.nito-estado--pago-recibido,
.nito-estado--pagada,
.nito-estado--pro-verificado,
.nito-estado--consulta-respondida { background: #dcfce7; color: #166534; }
.nito-estado--enviado { background: #eef1ff; color: #0018a9; }
.nito-estado--entregado,
.nito-estado--consulta-cerrada { background: #e5e7eb; color: #4b5563; }
.nito-estado--cancelled,
.nito-estado--failed,
.nito-estado--pro-rechazado { background: #fde8e8; color: #9b1c1c; }

/* --- Bloques y vacíos ------------------------------------------------------ */

.nito-cuenta-bloque {
    margin: 0 0 20px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.woocommerce-account .nito-cuenta-bloque .nito-cuenta-bloque__titulo {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #0a0f2c;
}

.nito-cuenta-bloque .nito-cuenta-bloque__sub {
    margin: -6px 0 14px;
    font-size: 13.5px;
    color: #6b7280;
}

.nito-vacio {
    margin: 0 0 14px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #f5f6ff;
    color: #3d3d3d;
    font-size: 14.4px;
}

.nito-vacio a {
    color: #0018a9;
}

/* --- Panel de inicio -------------------------------------------------------- */

.woocommerce-account .nito-panel .nito-panel__hola {
    margin: 0 0 4px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25;
    color: #000000;
}

.woocommerce-account .nito-panel .nito-panel__sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 22px;
    font-size: 15px;
    color: #3d3d3d;
}

.nito-panel .nito-panel__pago {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin: 0 0 20px;
    padding: 20px 22px;
    border-radius: 12px;
    background: #0018a9;
    color: #ffffff;
}

.woocommerce-account .nito-panel .nito-panel__pago p {
    margin: 0;
    color: #ffffff;
    font-size: 14.4px;
}

.woocommerce-account .nito-panel .nito-panel__pago .nito-panel__pago-titulo {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #f5a524;
}

.nito-panel .nito-panel__pago-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex-shrink: 0;
}

.nito-panel .nito-panel__rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.nito-panel .nito-panel__lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nito-panel .nito-panel__pedido {
    margin: 0 0 10px;
}

.nito-panel .nito-panel__pedido a {
    display: block;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    color: #3d3d3d;
    text-decoration: none;
    transition: border-color .2s ease;
}

.nito-panel .nito-panel__pedido a:hover,
.nito-panel .nito-panel__pedido a:focus-visible {
    border-color: #0018a9;
    color: #3d3d3d;
}

.nito-panel .nito-panel__pedido-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.nito-panel .nito-panel__pedido-num {
    font-weight: 800;
    color: #0a0f2c;
}

.nito-panel .nito-panel__pedido-producto {
    display: block;
    margin: 4px 0 10px;
    font-size: 13.5px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nito-progreso {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5e7eb;
}

.nito-progreso span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #0018a9;
}

.woocommerce-account .nito-panel .nito-panel__mas {
    margin: 4px 0 0;
    font-size: 14px;
}

.nito-panel .nito-panel__mas a,
.nito-panel .nito-panel__mensaje a:not(.nito-boton) {
    color: #0018a9;
}

.woocommerce-account .nito-panel .nito-panel__mensaje-asunto {
    margin: 0;
    font-weight: 800;
    color: #0a0f2c;
}

.woocommerce-account .nito-panel .nito-panel__mensaje-fecha {
    margin: 0 0 8px;
    font-size: 12.5px;
    color: #6b7280;
}

.woocommerce-account .nito-panel .nito-panel__mensaje-texto {
    margin: 0 0 14px;
    font-size: 14.4px;
}

.nito-panel .nito-panel__accesos {
    display: grid;
    /* Tres accesos: pedidos, consultas y empresa/datos (sin Facturas desde 2026-09-25). */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.nito-panel .nito-panel__acceso {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    color: #0a0f2c;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease;
}

.nito-panel .nito-panel__acceso:hover,
.nito-panel .nito-panel__acceso:focus-visible {
    border-color: #0018a9;
    color: #0018a9;
    transform: translateY(-2px);
}

.nito-panel .nito-panel__acceso::before {
    content: "";
    width: 24px;
    height: 24px;
    background-color: #0018a9;
    -webkit-mask: var(--nito-acceso-icono) no-repeat center / contain;
    mask: var(--nito-acceso-icono) no-repeat center / contain;
}

.nito-panel__acceso--pedidos { --nito-acceso-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12"/></svg>'); }
.nito-panel__acceso--facturas { --nito-acceso-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>'); }
.nito-panel__acceso--consultas { --nito-acceso-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>'); }
.nito-panel__acceso--empresa { --nito-acceso-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>'); }
.nito-panel__acceso--datos { --nito-acceso-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg>'); }

/* --- Línea de tiempo del pedido -------------------------------------------- */

.nito-linea {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: nito-linea;
}

.nito-linea .nito-linea__paso {
    position: relative;
    margin: 0;
    padding: 0 0 18px 38px;
    counter-increment: nito-linea;
}

/* El trazo que une los pasos. */
.nito-linea .nito-linea__paso::after {
    content: "";
    position: absolute;
    top: 26px;
    bottom: 0;
    left: 12px;
    width: 2px;
    background: #e5e7eb;
}

.nito-linea .nito-linea__paso:last-child::after {
    display: none;
}

.nito-linea .nito-linea__paso--hecho::after {
    background: #0018a9;
}

.nito-linea .nito-linea__paso::before {
    content: counter(nito-linea);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    background: #ffffff;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 800;
}

.nito-linea .nito-linea__paso--hecho::before {
    content: "✓";
    border-color: #0018a9;
    background: #0018a9;
    color: #ffffff;
}

.nito-linea .nito-linea__paso--actual::before {
    border-color: #0018a9;
    color: #0018a9;
    box-shadow: 0 0 0 4px #eef1ff;
}

.nito-linea .nito-linea__nombre {
    display: block;
    padding-top: 2px;
    font-weight: 700;
    color: #9ca3af;
}

.nito-linea .nito-linea__paso--hecho .nito-linea__nombre {
    color: #0a0f2c;
}

.nito-linea .nito-linea__paso--actual .nito-linea__nombre {
    color: #0018a9;
}

.nito-linea .nito-linea__fecha {
    display: block;
    font-size: 12.5px;
    color: #6b7280;
}

.nito-linea .nito-linea__nota {
    display: block;
    margin-top: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f5f6ff;
    font-size: 13.5px;
    color: #3d3d3d;
}

/* --- Pedido: aviso de pago y envío ------------------------------------------ */

.nito-aviso-pago {
    margin: 0 0 20px;
    padding: 20px;
    border: 1px solid #f5d38c;
    border-left: 4px solid #f5a524;
    border-radius: 12px;
    background: #fffaf0;
}

.woocommerce-account .nito-aviso-pago .nito-aviso-pago__titulo {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 800;
    color: #0a0f2c;
}

.woocommerce-account .nito-aviso-pago p {
    margin: 0 0 14px;
    font-size: 14.4px;
}

/* Línea secundaria (spam / Mis consultas). 0-3-0 para ganar a la de arriba. */
.woocommerce-account .nito-aviso-pago .nito-aviso-pago__sub {
    margin: 0;
    font-size: 13.5px;
    color: #5b6275;
}

.woocommerce-account .nito-aviso-pago .nito-aviso-pago__sub a {
    color: #0018a9;
    font-weight: 700;
}

.nito-envio {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #f5f6ff;
    font-size: 14.4px;
}

.nito-envio a {
    color: #0018a9;
    font-weight: 700;
}

/* --- Facturas, consultas y empresa ------------------------------------------ */

.woocommerce-account .nito-tabla td,
.woocommerce-account .nito-tabla th {
    vertical-align: middle;
}

.nito-tabla .nito-boton {
    padding: 7px 14px;
    font-size: 13px;
}

.nito-consultas {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nito-consultas .nito-consultas__item {
    margin: 0 0 8px;
}

.nito-consultas .nito-consultas__item a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    color: #3d3d3d;
    text-decoration: none;
}

.nito-consultas .nito-consultas__item a:hover,
.nito-consultas .nito-consultas__item a:focus-visible {
    border-color: #0018a9;
}

.nito-consultas .nito-consultas__asunto {
    flex: 1 1 200px;
    font-weight: 700;
    color: #0a0f2c;
}

.nito-consultas .nito-consultas__fecha {
    font-size: 12.5px;
    color: #6b7280;
}

.nito-hilo {
    display: grid;
    gap: 10px;
    margin: 0 0 18px;
}

.nito-hilo .nito-hilo__mensaje {
    max-width: 85%;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14.4px;
}

.nito-hilo .nito-hilo__mensaje p {
    margin: 0 0 6px;
}

.nito-hilo .nito-hilo__mensaje--cliente {
    justify-self: end;
    background: #eef1ff;
}

.nito-hilo .nito-hilo__mensaje--nito {
    justify-self: start;
    background: #f3f4f6;
}

.woocommerce-account .nito-hilo .nito-hilo__cabecera {
    margin: 0 0 4px;
    font-size: 12.5px;
    color: #6b7280;
}

.nito-datos {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 8px 20px;
    margin: 0 0 14px;
}

.nito-datos dt {
    font-weight: 700;
    color: #0a0f2c;
}

.nito-datos dd {
    margin: 0;
}

.nito-form textarea,
.nito-form select,
.nito-form input.input-text {
    width: 100%;
}

/* --- Responsive ----------------------------------------------------------------- */

@media (max-width: 1024px) {
    /* minmax(0, …) y no 1fr: 1fr no baja del ancho de su contenido, y el nombre
       largo del módulo (una línea con puntos suspensivos) ensanchaba la columna
       a ~470 px en un móvil de 390 y cortaba el bloque por la derecha. */
    .nito-panel .nito-panel__rejilla {
        grid-template-columns: minmax(0, 1fr);
    }

    .nito-panel .nito-panel__accesos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .nito-panel .nito-panel__pago {
        flex-direction: column;
        align-items: stretch;
    }

    .nito-panel .nito-panel__pago-acciones .nito-boton {
        flex: 1 1 auto;
    }

    .nito-cuenta-bloque {
        padding: 16px;
    }

    .woocommerce-account .nito-panel .nito-panel__hola {
        font-size: 22px;
    }

    .nito-hilo .nito-hilo__mensaje {
        max-width: 100%;
    }

    .nito-datos {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .nito-datos dd {
        margin-bottom: 8px;
    }
}

/* Mi cuenta en móvil: el menú de Kadence es una lista vertical de siete
   enlaces que empujaba el contenido media pantalla hacia abajo. Por debajo de
   768 px pasa a una fila de pestañas con desplazamiento lateral; el avatar con
   el nombre se oculta porque el panel ya saluda. La barra azul del activo es un
   border-left de 5 px del propio enlace (Kadence), que aquí se sustituye por el
   fondo azul de la pestaña. */
@media (max-width: 767px) {
    .woocommerce-account .woocommerce .account-navigation-wrap .kadence-account-avatar {
        display: none;
    }

    .woocommerce-account .account-navigation-wrap .woocommerce-MyAccount-navigation ul {
        display: flex;
        gap: 8px;
        margin: 0 -4px 18px;
        padding: 2px 4px 8px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .woocommerce-account .account-navigation-wrap .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
        display: none;
    }

    .woocommerce-account .account-navigation-wrap .woocommerce-MyAccount-navigation ul li {
        flex: 0 0 auto;
        margin: 0;
        border: 0;
    }

    .woocommerce-account .account-navigation-wrap .woocommerce-MyAccount-navigation ul li a {
        display: block;
        padding: 8px 14px;
        border: 1px solid #e5e7eb;
        border-radius: 999px;
        background: #ffffff;
        font-size: 13.5px;
        font-weight: 600;
        white-space: nowrap;
    }

    .woocommerce-account .account-navigation-wrap .woocommerce-MyAccount-navigation ul li.is-active a {
        border-color: #0018a9;
        background: #0018a9;
        color: #ffffff;
    }
    /* Que se note que se desplaza (Carla, 2026-09-29): el borde por donde quedan
       más opciones se desvanece y lleva una flecha redonda que las trae. Las
       clases las pone nito_cuenta_menu_desplazable_js() según la posición. */
    .woocommerce-account .account-navigation-wrap .woocommerce-MyAccount-navigation {
        position: relative;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation.nito-nav--derecha ul {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent calc(100% - 8px));
        mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent calc(100% - 8px));
    }

    .woocommerce-account .woocommerce-MyAccount-navigation.nito-nav--izquierda ul {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent calc(100% - 8px));
        mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent calc(100% - 8px));
    }

    .woocommerce-account .woocommerce-MyAccount-navigation.nito-nav--derecha.nito-nav--izquierda ul {
        -webkit-mask-image: linear-gradient(to right, transparent 8px, #000 64px, #000 calc(100% - 64px), transparent calc(100% - 8px));
        mask-image: linear-gradient(to right, transparent 8px, #000 64px, #000 calc(100% - 64px), transparent calc(100% - 8px));
    }

    .woocommerce-account .woocommerce-MyAccount-navigation .nito-nav__flecha {
        position: absolute;
        top: 3px;
        z-index: 1;
        display: none;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin: 0;
        padding: 0;
        border: 1px solid #c1cbf5;
        border-radius: 50%;
        background: #ffffff;
        color: #0018a9;
        box-shadow: 0 2px 6px rgba(15, 23, 42, .15);
        cursor: pointer;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation .nito-nav__flecha--derecha {
        right: -6px;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation .nito-nav__flecha--izquierda {
        left: -6px;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation.nito-nav--derecha .nito-nav__flecha--derecha,
    .woocommerce-account .woocommerce-MyAccount-navigation.nito-nav--izquierda .nito-nav__flecha--izquierda {
        display: inline-flex;
    }

    /* Reposo repetido en :focus antes de :hover: Kadence pinta button:focus en
       blanco sobre casi blanco (ver CLAUDE.md). */
    .woocommerce-account .woocommerce-MyAccount-navigation .nito-nav__flecha:focus {
        background: #ffffff;
        color: #0018a9;
        box-shadow: 0 2px 6px rgba(15, 23, 42, .15);
    }

    .woocommerce-account .woocommerce-MyAccount-navigation .nito-nav__flecha:hover,
    .woocommerce-account .woocommerce-MyAccount-navigation .nito-nav__flecha:active {
        background: #0018a9;
        color: #ffffff;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation .nito-nav__flecha:focus-visible {
        outline: 2px solid #0018a9;
        outline-offset: 2px;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation .nito-nav__flecha svg {
        width: 18px;
        height: 18px;
    }
}

/* La etiqueta de precio profesional dentro de la franja de la tarjeta de
   relacionados: en su línea, y blanca cuando la franja se pone azul. */
.nito-rel .nito-rel__precio .nito-precio-pro {
    margin-left: 4px;
    font-size: 9.5px;
    padding: 1px 6px;
}

.nito-rel .nito-rel__tarjeta:hover .nito-precio-pro {
    background: rgb(255 255 255 / .18);
    color: #ffffff;
}


/* Botones de WooCommerce en Mi cuenta (Acceso, Registrarse, Guardar…) con la
   misma regla que .nito-boton. Kadence los pinta con sus variables de paleta,
   que aquí dan texto negro sobre azul en reposo y blanco sobre casi blanco al
   pasar. .woocommerce-account + .woocommerce + button.button es 0-3-1: empata
   con .woocommerce button.button.alt de Kadence y gana por cargar después; sus
   :hover empatan igual. :focus repite el reposo (button:focus de Kadence). */
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce a.button,
.woocommerce-account .woocommerce input.button,
.woocommerce-account .woocommerce button.button:focus,
.woocommerce-account .woocommerce a.button:focus {
    border: 2px solid #0018a9;
    background: #0018a9;
    box-shadow: none;
    color: #ffffff;
    font-weight: 700;
}

.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce a.button:hover,
.woocommerce-account .woocommerce input.button:hover,
.woocommerce-account .woocommerce button.button:active {
    border-color: #0018a9;
    background: #ffffff;
    color: #0018a9;
}

.woocommerce-account .woocommerce button.button:focus-visible,
.woocommerce-account .woocommerce a.button:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 2px;
}

/* Títulos de las plantillas de WooCommerce dentro de Mi cuenta (Direcciones,
   editar dirección, Detalles del pedido, Dirección de facturación…): son <h2>
   y <h3> pelados y cogían el tamaño global de Kadence, 42 px. Se igualan al
   título de bloque de la cuenta (.nito-cuenta-bloque__titulo). 0-2-1: los
   títulos propios de la cuenta llevan clase y reglas de 0-3-0, no se tocan. */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #0a0f2c;
}

/* Direcciones: cada una como bloque, con el título y el enlace de editar en
   la misma línea en lugar de los float de WooCommerce. */
.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    margin-bottom: 10px;
}

/* Los ::before/::after son el clearfix de WooCommerce para los float
   (.woocommerce-account .addresses .title::before, display: table); dentro de un
   flex cuentan como un elemento más y empujaban el título 88 px. */
.woocommerce-account .woocommerce .woocommerce-Addresses .woocommerce-Address .woocommerce-Address-title::before,
.woocommerce-account .woocommerce .woocommerce-Addresses .woocommerce-Address .woocommerce-Address-title::after {
    content: none;
    display: none;
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title h3 {
    float: none;
    flex: 0 1 auto;
    width: auto;
    margin: 0;
    text-align: left;
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title .edit {
    float: none;
    font-size: 13.5px;
    font-weight: 600;
    color: #0018a9;
}

.woocommerce-account .woocommerce-Addresses address {
    font-size: 14.4px;
    font-style: normal;
    line-height: 1.6;
}

/* --- Mis pedidos (dos bloques) y garantías ----------------------------------- */

.nito-boton.nito-boton--pequeno {
    padding: 7px 16px;
    font-size: 13px;
}

.woocommerce-account .nito-pedidos td,
.woocommerce-account .nito-pedidos th {
    vertical-align: middle;
}

.nito-pedidos .nito-pedidos__modulo {
    font-size: 13.5px;
    color: #3d3d3d;
}

.nito-pedidos .nito-pedidos__mas {
    color: #6b7280;
    font-weight: 700;
}

.nito-pedidos .nito-pedidos__garantia {
    font-weight: 700;
    color: #0018a9;
    white-space: nowrap;
}

.nito-pedidos .nito-pedidos__sin {
    font-size: 13px;
    color: #9ca3af;
}

.nito-pedidos__nota {
    margin: 12px 0 0;
}

.nito-estado--garantia-revision { background: #fff3d6; color: #8a5a00; }
.nito-estado--garantia-aprobada { background: #dcfce7; color: #166534; }
.nito-estado--garantia-rechazada { background: #fde8e8; color: #9b1c1c; }

.nito-garantia {
    padding: 16px 18px;
    border-radius: 10px;
    border-left: 4px solid #f5a524;
    background: #fffaf0;
    font-size: 14.4px;
}

.nito-garantia--aprobada {
    border-left-color: #16a34a;
    background: #f0fdf4;
}

.nito-garantia--rechazada {
    border-left-color: #dc2626;
    background: #fef2f2;
}

.woocommerce-account .nito-garantia p {
    margin: 0 0 8px;
}

.nito-garantia .nito-garantia__cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.nito-garantia .nito-garantia__fecha,
.woocommerce-account .nito-garantia .nito-garantia__dato {
    font-size: 12.5px;
    color: #6b7280;
}

.nito-garantia .nito-garantia__motivo {
    margin: 0 0 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #ffffff;
    color: #3d3d3d;
}

.nito-garantia-item {
    margin: 0 0 16px;
}

.woocommerce-account .nito-garantia-item .nito-garantia-item__titulo {
    margin: 0 0 8px;
    font-weight: 700;
    color: #0a0f2c;
}

.nito-garantia-item .nito-garantia-item__titulo a {
    color: #0018a9;
}

.woocommerce-account .nito-form .nito-form__nota {
    margin: 0 0 14px;
    font-size: 13.5px;
    color: #6b7280;
}

.nito-garantia-pedir {
    margin: 0 0 20px;
}

.nito-form input[readonly] {
    background: #f5f6ff;
    color: #3d3d3d;
    cursor: default;
}

/* --- Mi panel: ¿Cómo solicitar una reparación? ------------------------------
   Cinco pasos numerados en círculos azules unidos por una línea, como el patrón
   «Proceso de trabajo»; en móvil pasan a lista vertical. */
.nito-como .nito-como__pasos {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: nito-como;
    position: relative;
}

.nito-como .nito-como__pasos::before {
    content: "";
    position: absolute;
    top: 19px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: #e5e7eb;
}

.nito-como .nito-como__paso {
    position: relative;
    margin: 0;
    text-align: center;
    counter-increment: nito-como;
}

.nito-como .nito-como__paso::before {
    content: counter(nito-como);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: #0018a9;
    box-shadow: 0 0 0 5px #ffffff;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
}

.nito-como .nito-como__nombre {
    display: block;
    margin-bottom: 4px;
    font-size: 13.5px;
    font-weight: 800;
    color: #0a0f2c;
}

.nito-como .nito-como__texto {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: #3d3d3d;
}

.nito-como .nito-como__texto a {
    color: #0018a9;
    font-weight: 700;
}

@media (max-width: 767px) {
    .nito-como .nito-como__pasos {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .nito-como .nito-como__pasos::before {
        top: 20px;
        bottom: 20px;
        left: 19px;
        right: auto;
        width: 2px;
        height: auto;
    }

    .nito-como .nito-como__paso {
        padding-left: 56px;
        text-align: left;
    }

    .nito-como .nito-como__paso::before {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
    }
}

/* --- Checkout corto: resumen de los datos de facturación -------------------- */
.nito-checkout-datos {
    margin: 0 0 20px;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #0018a9;
    border-radius: 12px;
}

.woocommerce-checkout .nito-checkout-datos .nito-checkout-datos__titulo {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #0a0f2c;
}

.woocommerce-checkout .nito-checkout-datos .nito-checkout-datos__resumen {
    margin: 0 0 10px;
    font-size: 14.4px;
    line-height: 1.6;
    color: #3d3d3d;
}

.nito-checkout-datos .nito-checkout-datos__editar > summary {
    display: inline-block;
    color: #0018a9;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.nito-checkout-datos .nito-checkout-datos__editar > summary::-webkit-details-marker {
    display: none;
}

.nito-checkout-datos .nito-checkout-datos__editar[open] > summary {
    margin-bottom: 14px;
}

/* Formulario de garantía: «Subir documento» es el <label> del input de
   archivo con el aspecto de .nito-boton; el input se oculta a la vista pero no
   al teclado ni al lector de pantalla, y su foco se ve en el botón. */
.nito-form .nito-garantia-archivo .nito-garantia-archivo__etiqueta {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    color: #0a0f2c;
}

.nito-form .nito-garantia-archivo .nito-garantia-archivo__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.nito-form .nito-garantia-archivo .nito-garantia-archivo__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 6px;
    padding: 12px;
    border: 1px dashed #cbd5e0;
    border-radius: 8px;
    background: #f5f6ff;
}

/* Es un <label>: la regla de etiquetas de formulario de WooCommerce le daba
   color gris y peso normal; se repone el aspecto del botón. */
.woocommerce form .nito-form .nito-garantia-archivo label.nito-boton,
.nito-form .nito-garantia-archivo label.nito-boton {
    margin: 0;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.woocommerce form .nito-form .nito-garantia-archivo label.nito-boton:hover,
.nito-form .nito-garantia-archivo label.nito-boton:hover {
    background: #ffffff;
    color: #0018a9;
}

.nito-form .nito-garantia-archivo .nito-garantia-archivo__input:focus-visible + .nito-garantia-archivo__fila label.nito-boton {
    outline: 2px solid #0018a9;
    outline-offset: 2px;
}

.nito-form .nito-garantia-archivo .nito-garantia-archivo__nombre {
    font-size: 13.5px;
    color: #3d3d3d;
    word-break: break-all;
}

.nito-form .nito-garantia-archivo .description {
    display: block;
    font-size: 12.5px;
    color: #6b7280;
}

/* Precio normal tachado delante del precio profesional (plugin nito-cuenta).
   Más pequeño y gris para que mande el precio que paga el taller; en la
   tarjeta de relacionados hereda el blanco de la franja al pasar el ratón. */
.nito-precio-normal {
    margin-right: 4px;
    color: #64748b;
    font-size: .8em;
    font-weight: 500;
    text-decoration: line-through;
    opacity: 1;
}

.nito-precio-normal .woocommerce-Price-amount {
    font-weight: inherit;
    color: inherit;
}

.nito-rel .nito-rel__tarjeta:hover .nito-precio-normal {
    color: rgb(255 255 255 / .75);
}


/* --- Precio en la ficha de producto --------------------------------------
   Hasta 2026-09-24 una regla de esta hoja lo ocultaba en todas las fichas
   (body.single-product .summary.entry-summary p.price { display:none }), de
   modo que ni el particular ni el profesional veían precio. Se ha quitado. */

/* --- Resumen del carrito en la cabecera ----------------------------------
   Mismo panel que el de la cuenta (.nito-cuenta-cab__panel). .nito-carrito-cab
   es un ancla de ancho cero justo detrás del icono del carrito: el panel se
   alinea por la derecha con el icono. */

.nito-carrito-cab {
    position: relative;
    align-self: stretch;
    width: 0;
}

.nito-carrito-cab .nito-carrito-cab__panel {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    z-index: 1000;
    width: 340px;
    max-width: calc(100vw - 32px);
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgb(0 0 0 / .18);
    color: #3d3d3d;
    text-align: left;
    font-size: 14.4px;
    line-height: 1.5;
}

.nito-carrito-cab .nito-carrito-cab__panel[hidden] {
    display: none;
}

.nito-carrito-cab .nito-carrito-cab__titulo {
    margin: 0 0 12px;
    color: #000000;
    font-size: 16px;
    font-weight: 800;
}

.nito-carrito-cab .woocommerce-mini-cart {
    max-height: 300px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

/* Con ul/li delante: las reglas del widget de WooCommerce
   (.woocommerce ul.cart_list li, 0-2-2) pisaban el relleno y la imagen. */
.nito-carrito-cab ul.woocommerce-mini-cart li.woocommerce-mini-cart-item {
    position: relative;
    display: block;
    min-height: 74px; /* 10 + 54 de imagen + 10: con menos, la imagen asoma y el listado hace scroll */
    margin: 0;
    padding: 10px 26px 10px 66px;
    border-bottom: 1px solid #eef0f4;
    color: #000000;
    font-size: 13.6px;
    font-weight: 700; /* el nombre va sin enlace si el producto no es visible */
    line-height: 1.4;
}

.nito-carrito-cab ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a:not(.remove) {
    display: block;
    color: #000000;
    font-weight: 700;
    text-decoration: none;
}

.nito-carrito-cab ul.woocommerce-mini-cart li.woocommerce-mini-cart-item img {
    float: none;
    position: absolute;
    top: 10px;
    left: 0;
    width: 54px;
    height: 54px;
    margin: 0;
    object-fit: contain;
    background: #f8fafc;
    border-radius: 8px;
}

.nito-carrito-cab ul.woocommerce-mini-cart li.woocommerce-mini-cart-item .quantity {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-weight: 400;
    text-align: left;
}

.nito-carrito-cab ul.woocommerce-mini-cart li.woocommerce-mini-cart-item .nito-precio-pro {
    margin-left: 4px;
    font-size: 9.5px;
    padding: 1px 6px;
}

.nito-carrito-cab ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a.remove {
    position: absolute;
    top: 8px;
    right: 0;
    width: 20px;
    height: 20px;
    color: #94a3b8;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
}

.nito-carrito-cab ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a.remove:hover {
    color: #b91c1c;
    background: transparent;
}

.nito-carrito-cab .woocommerce-mini-cart__total {
    display: flex;
    justify-content: space-between;
    margin: 14px 0;
    color: #000000;
    font-size: 15px;
}

.nito-carrito-cab .woocommerce-mini-cart__buttons {
    margin: 0;
}

/* Solo "Ver carrito", grande: el seguro de montaje se elige en el carrito,
   así que el checkout directo desde aquí se lo saltaría. */
.nito-carrito-cab .woocommerce-mini-cart__buttons .checkout {
    display: none;
}

.nito-carrito-cab .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout),
.nito-carrito-cab .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout):focus {
    display: block;
    width: 100%;
    padding: 14px 20px;
    background: #0018a9;
    border: 2px solid #0018a9;
    border-radius: 8px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.nito-carrito-cab .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout):hover {
    background: #ffffff;
    color: #0018a9;
}

.nito-carrito-cab .woocommerce-mini-cart__empty-message {
    margin: 0;
    color: #64748b;
}

/* --- Ventana «Añadido al carrito» ----------------------------------------
   Hija directa de <body> (wp_footer), así que está en el contexto de
   apilamiento raíz y su z-index sí gana a la cabecera fija (9999) y a los
   cajones (100000). Ver CLAUDE.md, «Overlays inside a Kadence row». */

.nito-anadido {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.nito-anadido[hidden] {
    display: none;
}

.nito-anadido__fondo {
    position: absolute;
    inset: 0;
    background: rgb(10 15 36 / .55);
}

.nito-anadido__caja {
    position: relative;
    width: 400px;
    max-width: 100%;
    padding: 32px 28px 28px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgb(0 0 0 / .3);
    text-align: center;
}

/* Animaciones y no transiciones: una transición necesita pintar un fotograma
   con el estado inicial antes de cambiarlo, y eso no ocurre si la pestaña no
   está en primer plano; la ventana se quedaba a medio aparecer. */
.nito-anadido.is-visible .nito-anadido__fondo {
    animation: nito-anadido-fundido .25s ease both;
}

.nito-anadido.is-visible .nito-anadido__caja {
    animation: nito-anadido-entra .35s cubic-bezier(.2, .9, .3, 1.2) both;
}

@keyframes nito-anadido-fundido {
    from { opacity: 0; }
}

@keyframes nito-anadido-entra {
    from { opacity: 0; transform: translateY(16px) scale(.96); }
}

/* El check se dibuja: primero el círculo y luego la marca. */
.nito-anadido__check {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    stroke: #0018a9;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nito-anadido__check circle {
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
}

.nito-anadido__check path {
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
}

.nito-anadido.is-visible .nito-anadido__check circle {
    animation: nito-anadido-trazo .5s ease-out .1s forwards;
}

.nito-anadido.is-visible .nito-anadido__check path {
    animation: nito-anadido-trazo .3s ease-out .55s forwards;
}

@keyframes nito-anadido-trazo {
    to { stroke-dashoffset: 0; }
}

.nito-anadido__titulo {
    margin: 0 0 16px;
    color: #000000;
    font-size: 20px;
    font-weight: 800;
}

.nito-anadido__producto {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
    text-align: left;
}

.nito-anadido__producto:has(.nito-anadido__nombre:empty) {
    display: none;
}

.nito-anadido__img {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.nito-anadido__img[hidden] {
    display: none;
}

.nito-anadido__nombre {
    color: #000000;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.nito-anadido__botones {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nito-anadido .nito-anadido__ver {
    display: block;
    width: 100%;
    padding: 14px 20px;
    font-size: 15px;
    text-align: center;
}

/* <button>: el reposo se repite en :focus para ganar a button:focus de
   Kadence (0-1-1), antes del :hover (ver CLAUDE.md). */
.nito-anadido .nito-anadido__seguir,
.nito-anadido .nito-anadido__seguir:focus {
    width: 100%;
    padding: 12px 20px;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: none;
    color: #0018a9;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.nito-anadido .nito-anadido__seguir:hover,
.nito-anadido .nito-anadido__seguir:active {
    background: #ffffff;
    border-color: #0018a9;
    color: #0018a9;
}

.nito-anadido .nito-anadido__x,
.nito-anadido .nito-anadido__x:focus {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    color: #94a3b8;
    font-size: 24px;
    line-height: 34px;
    cursor: pointer;
}

.nito-anadido .nito-anadido__x:hover,
.nito-anadido .nito-anadido__x:active {
    background: #f1f5f9;
    color: #000000;
}

.nito-anadido .nito-anadido__seguir:focus-visible,
.nito-anadido .nito-anadido__x:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .nito-anadido.is-visible .nito-anadido__caja,
    .nito-anadido.is-visible .nito-anadido__fondo {
        animation: none;
    }
    .nito-anadido__check circle,
    .nito-anadido__check path {
        stroke-dashoffset: 0;
        animation: none !important;
    }
}

/* Precio de las landings de marca (nito_landing_precio en functions.php):
   el mismo aspecto que el de la ficha de producto, medido allí: #0018a9 a
   32 px, pegado al título y con 8 px hasta la descripción. */
.wp-block-woocommerce-single-product .nito-landing-precio {
    margin: 0 0 8px;
    color: #0018a9;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
}

.wp-block-woocommerce-single-product .nito-landing-precio del {
    font-size: .6em;
}

/* --- "Añadir otro módulo igual" --------------------------------------------
   Sustituye a - 1 + en las lineas con seguro, que van de una en una (ver
   nito_carrito_cantidad_botones). Enlace de texto azul y no un boton gordo:
   es una accion secundaria al lado de la papelera. Es un <button>, asi que el
   reposo se repite en :focus antes del :hover (button:focus de Kadence). */
.nito-cantidad.nito-cantidad--unidad {
    border: 0;
    background: transparent;
}

.nito-cantidad .nito-cantidad__otro,
.nito-cantidad .nito-cantidad__otro:focus {
    padding: 4px 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #0018a9;
    font-size: 13.6px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
}

.nito-cantidad .nito-cantidad__otro:hover,
.nito-cantidad .nito-cantidad__otro:active {
    background: transparent;
    color: #000000;
    text-decoration: underline;
}

.nito-cantidad .nito-cantidad__otro:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 2px;
}

/* Enlaces dentro de los avisos de WooCommerce ("¿Deshacer?" del aviso de
   producto eliminado, y cualquier otro enlace de texto de un aviso).

   Caían en el a:hover de Kadence, que pinta --global-palette-highlight-alt, y en
   esta paleta eso es #ffffff: sobre el fondo casi blanco del aviso el enlace
   desaparecía al pasar el ratón. La regla de los enlaces de texto de más arriba
   no los alcanzaba porque llevan clase (a.restore-item). Mismo trato: el color
   se queda en el azul y el aviso lo da el subrayado, que se separa del texto.
   Los botones de los avisos (.button) tienen su propio estilo y quedan fuera.
   0-2-1, por encima del a:hover de Kadence (0-1-1), sin !important. */
:where(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) {
    color: var(--global-palette-highlight, #0018a9);
    text-decoration: underline;
    text-underline-offset: .1em;
    transition: text-underline-offset .2s ease;
}

:where(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button):is(:hover, :focus, :active) {
    color: var(--global-palette-highlight, #0018a9);
    text-underline-offset: .25em;
}

/* ==========================================================================
   Carrusel de logos de clientes (/profesionales-automocion/, 3496)
   Reutiliza .carrusel-marcas, pero sus logos llegan pre-normalizados: ya en
   gris, recortados y centrados en un lienzo 400x224 con su propio margen. Los
   25px de relleno de .carrusel-marcas (pensados para los SVG de marca) los
   dejaban diminutos; aqui basta un filo. Misma especificidad que la regla base
   (0-1-1) y ambas con !important: gana esta por ir despues.
   ========================================================================== */
.carrusel-clientes img {
    padding: 6px !important;
}

/* ==========================================================================
   Página de gracias: cómo preparar el módulo (nito_pago_gracias_envio(), en
   el plugin nito-cuenta). Resumen en una imagen y tres pasos con su dibujo y
   el texto en HTML. Componente propio: sin !important. Los títulos llevan dos
   clases (0-2-0) para ganar a `.single-content h2/h3` de Kadence (0-1-1), que
   si no les pondría sus márgenes.
   ========================================================================== */
/* Tarjeta y título: en el bloque «Página de gracias: estética de la web». */

/* figure y ol: dos clases, porque las listas y figuras del contenido de Kadence
   (0-1-1) les ponian margen y 34px de sangria. */
.nito-gracias-envio .nito-gracias-envio__resumen {
    margin: 0 0 24px;
}

.nito-gracias-envio__resumen-img {
    display: block;
    width: 100%;
    height: auto;
}

.nito-gracias-envio .nito-gracias-envio__pasos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nito-gracias-envio .nito-gracias-envio__paso {
    margin: 0;
    padding: 16px;
    border-radius: 10px;
    background: #f5f6ff;
}

.nito-gracias-envio__dibujo {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 12px;
    border-radius: 8px;
    background: #ffffff;
}

.nito-gracias-envio .nito-gracias-envio__paso-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    color: #0a0f2c;
}

.nito-gracias-envio__num {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0018a9;
    color: #ffffff;
    font-size: 14px;
    line-height: 28px;
    text-align: center;
}

.nito-gracias-envio .nito-gracias-envio__puntos {
    margin: 0;
    padding-left: 18px;
    font-size: 14.4px;
    line-height: 1.55;
    color: #3d3d3d;
}

.nito-gracias-envio__puntos li + li {
    margin-top: 6px;
}

.nito-gracias-envio__puntos strong {
    color: #0018a9;
}

@media (max-width: 767px) {
    .nito-gracias-envio .nito-gracias-envio__pasos {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* --- Página de gracias: avisos de envío (pago.php de nito-cuenta) ------------
   El título y las tarjetas de la página están en el bloque «Página de gracias:
   estética de la web», al final del archivo. */

.nito-gracias-avisos .nito-gracias-avisos__lista {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nito-gracias-avisos .nito-gracias-avisos__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    border-left: 4px solid #0018a9;
    border-radius: 8px;
    background: #f5f6ff;
}

/* El de la foto: es el que tiene consecuencias, en ámbar como el aviso de pago. */
.nito-gracias-avisos .nito-gracias-avisos__item--importante {
    border-left-color: #f5a524;
    background: #fffaf0;
}

.nito-gracias-avisos__icono {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1.3;
}

.nito-gracias-avisos .nito-gracias-avisos__texto {
    margin: 0;
    font-size: 14.4px;
    line-height: 1.55;
    color: #3d3d3d;
}

.nito-gracias-avisos__texto strong {
    color: #0a0f2c;
}


/* --- Página de gracias: resumen del pedido en una sola línea ----------------
   WooCommerce lo coloca con float y los cinco datos (≈1220 px) no cabían en los
   1178 px del contenido: «Método de pago» saltaba de línea. En flex, con el valor
   a 15 px en vez de 17 y menos separación, caben con holgura (≈1050 px).
   El prefijo body sube a 0-2-3 para ganar a `.woocommerce ul.order_details li`. */
body .woocommerce-order ul.woocommerce-order-overview {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin: 0 0 24px;
    padding: 0;
}

/* El clearfix de WooCommerce (::before/::after) serían dos elementos flex más. */
body .woocommerce-order ul.woocommerce-order-overview::before,
body .woocommerce-order ul.woocommerce-order-overview::after {
    display: none;
}

body .woocommerce-order ul.woocommerce-order-overview li {
    float: none;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0 18px 0 0;
    padding: 0 18px 0 0;
    font-size: 11.5px;
}

body .woocommerce-order ul.woocommerce-order-overview li:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: 0;
}

body .woocommerce-order ul.woocommerce-order-overview li strong {
    margin-top: 2px;
    font-size: 15px;
    line-height: 1.35;
}

/* Donde no pueden caber, se reparten en varias líneas. */
@media (max-width: 1024px) {
    body .woocommerce-order ul.woocommerce-order-overview {
        flex-wrap: wrap;
        row-gap: 14px;
    }
}

/* ==========================================================================
   Página de gracias: estética de la web
   La página es de WooCommerce (checkout/thankyou.php) más lo que añade
   nito-cuenta (pago.php). Se lleva al lenguaje del resto del sitio:
   - cabecera como las secciones de las landings: título Montserrat 800 en
     mayúsculas a 25 px y la rayita azul debajo;
   - cada bloque en una tarjeta blanca como las de Mi cuenta (.nito-cuenta-bloque);
   - un solo estilo de título de sección, en mayúsculas y centrado (WooCommerce
     ponía 42 px a «Detalles del pedido» y a las direcciones).
   Todo cuelga de .woocommerce-order, que solo existe en esta página y en
   ninguna otra plantilla del tema, así que no se filtra a Mi cuenta.
   ========================================================================== */

/* Cabecera. El <p> es el aviso de éxito de WooCommerce; el filtro de pago.php
   mete dentro el título. */
.woocommerce-order .woocommerce-thankyou-order-received {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 28px;
    padding: 0;
    border: 0;
    background: none;
    text-align: center;
}

.woocommerce-order .woocommerce-thankyou-order-received::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin-top: 16px;
    border-radius: 2px;
    background: #0018a9;
}

.woocommerce-order .nito-gracias__titulo {
    display: block;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
    color: #000000;
}

/* Tarjetas: resumen del pedido, cómo prepararlo, detalles, avisos y direcciones. */
body .woocommerce-order ul.woocommerce-order-overview,
.woocommerce-order .nito-gracias-envio,
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .nito-gracias-avisos,
.woocommerce-order .woocommerce-customer-details {
    margin: 0 0 24px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
}

body .woocommerce-order ul.woocommerce-order-overview {
    justify-content: center;
    padding: 18px 24px;
}

/* Títulos de sección, todos iguales. */
.woocommerce-order .nito-gracias-envio .nito-gracias-envio__titulo,
.woocommerce-order .woocommerce-order-details .woocommerce-order-details__title,
.woocommerce-order .nito-gracias-avisos .nito-gracias-avisos__titulo,
.woocommerce-order .woocommerce-customer-details .woocommerce-column__title {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .02em;
    text-align: center;
    text-transform: uppercase;
    color: #0a0f2c;
}

/* Tabla del pedido: sin marco, filas con línea fina y cabecera pequeña en gris. */
.woocommerce-order table.woocommerce-table--order-details {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    font-size: 14.4px;
}

.woocommerce-order table.woocommerce-table--order-details th,
.woocommerce-order table.woocommerce-table--order-details td {
    padding: 12px 8px;
    border: 0;
    border-bottom: 1px solid #eef0f4;
    background: none;
    vertical-align: top;
}

.woocommerce-order table.woocommerce-table--order-details thead th {
    padding-top: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
}

.woocommerce-order table.woocommerce-table--order-details tfoot th {
    font-weight: 600;
    color: #3d3d3d;
}

.woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child td {
    border-bottom: 0;
}

.woocommerce-order table.woocommerce-table--order-details .product-name a {
    font-weight: 700;
    color: #0a0f2c;
}

/* Direcciones: facturación y envío una al lado de la otra. Se quita el float y
   el clearfix de .col2-set, que en rejilla serían dos celdas más. */
.woocommerce-order .woocommerce-customer-details .woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
}

.woocommerce-order .woocommerce-customer-details .woocommerce-columns--addresses::before,
.woocommerce-order .woocommerce-customer-details .woocommerce-columns--addresses::after {
    display: none;
}

.woocommerce-order .woocommerce-customer-details .woocommerce-column {
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

.woocommerce-order .woocommerce-customer-details address {
    height: calc(100% - 42px);
    margin: 0;
    padding: 16px 18px;
    border: 0;
    border-radius: 10px;
    background: #f5f6ff;
    font-size: 14.4px;
    font-style: normal;
    line-height: 1.6;
    color: #3d3d3d;
}

.woocommerce-order .woocommerce-customer-details address p {
    margin: 6px 0 0;
}

/* Acceso final a Mis pedidos: la misma tarjeta, con el botón de la web en grande.
   0-2-0 solo para el tamaño; los colores y el hover son los de .nito-boton. */
.woocommerce-order .nito-gracias-cta {
    margin: 8px 0 0;
    padding: 28px 24px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    text-align: center;
}

.woocommerce-order .nito-gracias-cta .nito-gracias-cta__texto {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 700;
    color: #0a0f2c;
}

.woocommerce-order .nito-gracias-cta .nito-gracias-cta__boton {
    padding: 16px 40px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .woocommerce-order .nito-gracias__titulo {
        font-size: 21px;
    }
    .woocommerce-order .nito-gracias-cta .nito-gracias-cta__boton {
        display: block;
        padding: 15px 20px;
    }

    body .woocommerce-order ul.woocommerce-order-overview,
    .woocommerce-order .nito-gracias-envio,
    .woocommerce-order .woocommerce-order-details,
    .woocommerce-order .nito-gracias-avisos,
    .woocommerce-order .woocommerce-customer-details {
        padding: 16px;
    }

    .woocommerce-order .woocommerce-customer-details .woocommerce-columns--addresses {
        grid-template-columns: 1fr;
    }

    .woocommerce-order .woocommerce-customer-details address {
        height: auto;
    }
}
/* ==========================================================================
   Mis pedidos: buscador y paginación de completados (orders.php del tema)
   Componente propio, sin !important. El campo lleva dos clases para ganar a
   los estilos de input de WooCommerce/Kadence dentro de Mi cuenta.
   ========================================================================== */
.nito-pedidos-buscar {
    display: flex;
    gap: 10px;
    margin: 0 0 16px;
}

.nito-pedidos-buscar .nito-pedidos-buscar__campo {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 16px;
    border: 1px solid #d5dbe5;
    border-radius: 8px;
    background: #ffffff;
    font-size: 14.4px;
    color: #0a0f2c;
}

.nito-pedidos-buscar .nito-pedidos-buscar__campo:focus {
    border-color: #0018a9;
    outline: 2px solid rgba(0, 24, 169, .15);
    outline-offset: 0;
}

.nito-pedidos-buscar .nito-pedidos-buscar__boton {
    flex: 0 0 auto;
    height: 46px;
    padding: 0 22px;
}

.nito-pedidos-buscar__resultado {
    margin: -4px 0 16px;
    font-size: 14px;
    color: #3d3d3d;
}

.nito-pedidos-buscar__resultado a {
    margin-left: 6px;
    color: #0018a9;
    font-weight: 700;
}

.nito-paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 18px 0 6px;
}

.nito-paginacion .nito-paginacion__num,
.nito-paginacion .nito-paginacion__flecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #0a0f2c;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.nito-paginacion a.nito-paginacion__num:hover,
.nito-paginacion a.nito-paginacion__flecha:hover {
    border-color: #0018a9;
    color: #0018a9;
}

.nito-paginacion .nito-paginacion__num--actual {
    border-color: #0018a9;
    background: #0018a9;
    color: #ffffff;
}

.nito-paginacion__hueco {
    padding: 0 4px;
    color: #9ca3af;
}

.nito-paginacion__info {
    margin: 0 0 12px;
    font-size: 13px;
    text-align: center;
    color: #6b7280;
}

@media (max-width: 600px) {
    .nito-pedidos-buscar {
        flex-direction: column;
    }

    .nito-pedidos-buscar .nito-pedidos-buscar__boton {
        width: 100%;
    }
}

/* ==========================================================================
   Buscador del muro de marcas ([nito_grid_marcas buscador="si"], /reparar-abs/)
   Entre el título de la sección y la rejilla. Componente propio, sin !important;
   el campo lleva dos clases para ganar a los estilos de input de Kadence.
   ========================================================================== */
.nito-marcas-buscar {
    max-width: 640px;
    margin: 28px auto 0;
    padding: 0 16px;
}

.nito-marcas-buscar__caja {
    position: relative;
}

.nito-marcas-buscar__icono {
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    color: #0018a9;
    pointer-events: none;
}

.nito-marcas-buscar .nito-marcas-buscar__campo {
    width: 100%;
    height: 54px;
    padding: 0 20px 0 50px;
    border: 2px solid #d5dbe5;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 6px 20px -12px rgba(0, 24, 169, .35);
    font-size: 16px;
    color: #0a0f2c;
}

.nito-marcas-buscar .nito-marcas-buscar__campo:focus {
    border-color: #0018a9;
    outline: none;
}

.nito-marcas-buscar__estado,
.nito-marcas-buscar__vacio {
    min-height: 22px;
    margin: 10px 0 0;
    font-size: 14.4px;
    text-align: center;
    color: #3d3d3d;
}

.nito-marcas-buscar__estado a,
.nito-marcas-buscar__vacio a {
    color: #0018a9;
    font-weight: 800;
}

/* Con el buscador encima, la rejilla sube: el hueco ya lo da el buscador. */
.nito-marcas.nito-marcas--con-buscador {
    margin-top: 16px;
}

/* Las tarjetas ocultas por el filtro no ocupan su celda. */
.nito-marcas .nito-marcas__item[hidden] {
    display: none;
}

/* Con un filtro activo, los resultados se centran en vez de quedarse en las
   primeras celdas de la rejilla. Mismo ancho de tarjeta que en la rejilla
   (8 / 4 / 3 / 2 columnas, huecos de 14 y 10 px), para que no cambien de tamaño. */
.nito-marcas.nito-marcas--filtrado {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.nito-marcas.nito-marcas--filtrado .nito-marcas__item {
    width: calc((100% - 7 * 14px) / 8);
}

@media (max-width: 992px) {
    .nito-marcas.nito-marcas--filtrado .nito-marcas__item {
        width: calc((100% - 3 * 14px) / 4);
    }
}

@media (max-width: 767px) {
    .nito-marcas.nito-marcas--filtrado .nito-marcas__item {
        width: calc((100% - 2 * 10px) / 3);
    }
}

@media (max-width: 480px) {
    .nito-marcas.nito-marcas--filtrado .nito-marcas__item {
        width: calc((100% - 10px) / 2);
    }
}


/* «Volver al carrito» (aviso del checkout cuando el carrito tiene problemas,
   checkout/cart-errors.php) y «Volver a la tienda» (carrito vacío): los dos son
   a.button.wc-backward de WooCommerce y Kadence los pintaba con sus variables
   de paleta, texto negro sobre azul en reposo y blanco sobre casi blanco al
   pasar. Misma regla que .nito-boton: azul con texto blanco; al pasar, blanco
   con texto azul y el borde azul para que no desaparezca sobre el fondo claro
   del aviso. 0-3-1 gana a .button (0-1-0) y a .button:hover (0-2-0) de Kadence;
   :focus repite el reposo, porque button:focus / .button:focus de Kadence lo
   dejaría en los colores de hover tras pulsarlo. Forma y tamaño, los de Kadence. */
.woocommerce a.button.wc-backward,
.woocommerce a.button.wc-backward:focus {
    border: 2px solid #0018a9;
    background: #0018a9;
    box-shadow: none;
    color: #ffffff;
}

.woocommerce a.button.wc-backward:hover,
.woocommerce a.button.wc-backward:active {
    border-color: #0018a9;
    background: #ffffff;
    color: #0018a9;
}

.woocommerce a.button.wc-backward:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 2px;
}


/* --- Política de cookies: un desplegable por servicio ------------------------
   /politica-de-cookies/ lista las cookies que en producción pinta Complianz,
   como bloques core/details (.nito-cookies__servicio) con su tabla. Mismo fondo
   y radio que .nito-caja-destacada, con borde para separarlos; el marcador
   nativo se cambia por + / − a la derecha. Componente propio: sin !important. */
.nito-cookies__servicio {
    margin: 0 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
}

.nito-cookies__servicio > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
}

.nito-cookies__servicio > summary::-webkit-details-marker {
    display: none;
}

.nito-cookies__servicio > summary::after {
    content: '+';
    margin-left: auto;
    color: #0018a9;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.nito-cookies__servicio[open] > summary::after {
    content: '−';
}

.nito-cookies__servicio[open] > summary {
    border-bottom: 1px solid #e5e7eb;
}

.nito-cookies__servicio > :not(summary) {
    margin-right: 18px;
    margin-left: 18px;
}

.nito-cookies__servicio > p:first-of-type {
    margin-top: 16px;
}

.nito-cookies__tipo {
    padding: 2px 10px;
    border-radius: 999px;
    background: #e0e7ff;
    color: #0018a9;
    font-size: 12px;
    font-weight: 700;
}

/* Sin overflow-x: las celdas parten los nombres largos (overflow-wrap), así que la
   tabla nunca necesita desplazarse, y con él el redondeo de subpíxeles sacaba una
   barra de 1px. */
.nito-cookies__servicio .nito-cookies__tabla {
    margin-bottom: 18px;
    overflow-x: visible; /* el de WordPress (.wp-block-table, 0-1-0) es auto */
}

/* Bordes separados y no colapsados: con collapse, la mitad de los bordes de fuera
   sobresale 1px del contenedor y overflow-x saca una barra de desplazamiento. */
.nito-cookies__tabla table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-top: 1px solid #e5e7eb;
    border-left: 1px solid #e5e7eb;
    font-size: 14px;
}

.nito-cookies__tabla th,
.nito-cookies__tabla td {
    padding: 8px 10px;
    border: 0;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.nito-cookies__tabla thead th {
    background: #fafafb;
    font-weight: 700;
}

/* Los encabezados y la caducidad no se parten («Caducida / d»); los nombres sí. */
.nito-cookies__tabla th,
.nito-cookies__tabla td:nth-child(2) {
    overflow-wrap: normal;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .nito-cookies__servicio > summary {
        flex-wrap: wrap;
    }

    .nito-cookies__tabla table {
        font-size: 13px;
    }
}


/* --- Información básica sobre protección de datos ----------------------------
   nito_rgpd_html(): la capa informativa que pide la empresa de privacidad antes
   de la casilla de consentimiento de todos los formularios (checkout, registro
   de Mi cuenta y los de Kadence). Como en la web en producción: alto fijo con
   desplazamiento y letra pequeña, pero con el borde, el fondo y el radio del
   resto de cajas de la web. flex-basis 100%: los formularios de Kadence son flex
   y los campos se reparten la fila. Componente propio: sin !important. */
.nito-rgpd {
    box-sizing: border-box;
    flex: 0 0 100%;
    width: 100%;
    max-height: 120px;
    margin: 0 0 15px;
    padding: 10px 12px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafb;
    color: #555555;
    font-size: 11px;
    line-height: 1.4;
    text-align: left;
}

.nito-rgpd p {
    margin: 0 0 2px;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.nito-rgpd .nito-rgpd__titulo {
    margin-bottom: 4px;
    color: #1e293b;
    font-weight: 700;
    text-transform: uppercase;
}

.nito-rgpd strong {
    color: #1e293b;
}

.nito-rgpd a {
    color: #0018a9;
}

.nito-rgpd:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 2px;
}


/* --- Galería de bloques: respetar las imágenes que oculta al elegir variación --
   Al elegir una variación, la galería de WooCommerce deja solo sus imágenes y
   oculta las demás con el atributo hidden en su envoltorio (y en la miniatura).
   Las reglas de arriba (…large-image__wrapper, display:flex!important) ganaban a
   [hidden] y seguían a la vista: la galería se quedaba en la primera foto aunque
   la variación tuviera la suya. Una clase más y el atributo, con !important
   porque la regla a la que corrige lo lleva. */
.wp-block-woocommerce-product-gallery-large-image .wc-block-product-gallery-large-image__wrapper[hidden],
.wp-block-woocommerce-product-gallery .wc-block-product-gallery-thumbnails__thumbnail[hidden] {
    display: none !important;
}

/* --- Precio de la landing al elegir variación ----------------------------------
   nito_landing_precio_variacion_js(): el precio de arriba pasa al de la variación
   y se resalta con un destello del color de la marca. El de WooCommerce dentro
   del formulario se oculta aquí para no enseñar dos precios. */
.wp-block-woocommerce-single-product .woocommerce-variation-price {
    display: none;
}

.wp-block-woocommerce-single-product .nito-landing-precio {
    border-radius: 8px;
}

.wp-block-woocommerce-single-product .nito-landing-precio.nito-landing-precio--cambia {
    animation: nito-precio-cambia 1.6s ease-out;
}

@keyframes nito-precio-cambia {
    0%   { background-color: rgba(0, 24, 169, .16); box-shadow: 0 0 0 8px rgba(0, 24, 169, .16); }
    100% { background-color: transparent; box-shadow: 0 0 0 8px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-woocommerce-single-product .nito-landing-precio.nito-landing-precio--cambia {
        animation: none;
    }
}

/* La foto grande va dentro de un div.wc-block-components-product-image que se
   estira a todo el alto de la caja cuadrada pero es un bloque normal: una foto
   que no sea cuadrada se quedaba pegada arriba con todo el hueco debajo (la de
   la variación «x2» de Harley, 2026-09-28). Centrada en los dos ejes. */
.wp-block-woocommerce-product-gallery-large-image .wc-block-product-gallery-large-image__wrapper > .wc-block-components-product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Variación base (nito_variacion_base_js): con una opción oculta siempre
   elegida, «Limpiar» estaría siempre a la vista y no deja nada que limpiar:
   deseleccionar ya vuelve a la base. */
form.variations_form.nito-con-base .reset_variations {
    display: none !important;
}

form.variations_form.nito-con-base li.variable-item[hidden] {
    display: none !important;
}

/* En las landings, el formulario con variaciones va justo debajo de la caja
   «¿Eres profesional?», y el margin-top:-30px de .variations_form.cart (pensado
   para la ficha) lo subía hasta montar el nombre de la variación sobre la caja
   (-5px de hueco). Aquí, aire entre los dos. Una clase más para ganar al
   !important de aquella regla. Desde 2026-10-13, 0: el aire lo pone el
   margin-bottom de 10 px de la caja, como entre las cajas de encima. */
.wp-block-woocommerce-single-product .variations_form.cart {
    margin-top: 0 !important;
}

/* --- Ampliación de garantía en el carrito ------------------------------------
   nito_garantia_ampliada_bloque(): una casilla opcional detrás del seguro, en su
   misma fila. Mismo recuadro que .nito-seguro, pero sin el filo azul de «falta
   elegir», porque no es obligatoria; al marcarla se pinta el filo para que se
   vea que está contratada. */
.nito-garantia-ampliada {
    width: 100%;
    margin: 6px 0 4px;
    padding: 10px 12px;
    border: 1px solid var(--global-gray-400, #cbd5e0);
    border-radius: 6px;
    background: var(--global-palette2, #ffffff);
}

.nito-garantia-ampliada--elegida {
    border-left: 4px solid var(--global-palette1, #0018a9);
}

.nito-garantia-ampliada .nito-garantia-ampliada__opcion {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: var(--global-palette4, #3d3d3d);
    font-size: 14px;
    line-height: 1.35;
    cursor: pointer;
}

.nito-garantia-ampliada__opcion strong {
    color: var(--global-palette3, #1a1a1a);
}

.nito-garantia-ampliada__casilla {
    flex: 0 0 auto;
    margin: 1px 0 0;
    accent-color: var(--global-palette1, #0018a9);
}

.nito-garantia-ampliada__casilla:focus-visible {
    outline: 2px solid var(--global-palette1, #0018a9);
    outline-offset: 2px;
}

.nito-garantia-ampliada .nito-garantia-ampliada__nota {
    margin: 6px 0 0 24px;
    color: var(--global-palette6, #636363);
    font-size: 13px;
    line-height: 1.45;
}

.nito-garantia-ampliada.nito-cargando {
    opacity: .6;
}

/* Tarjetas de modelo que eligen la variante del producto (nito_modelos_variante_js):
   se pulsan, así que llevan mano y el foco del teclado visible. El :hover ya lo
   tienen todas las tarjetas. */
.nito-vehicle-card.nito-vehicle-card--elige {
    cursor: pointer;
}

.nito-vehicle-card.nito-vehicle-card--elige:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 3px;
}
.header-navigation .header-menu-container ul ul.sub-menu,
.header-navigation .header-menu-container ul ul.submenu {
  width: auto;
  min-width: 200px;
}

.header-navigation .header-menu-container ul ul li.menu-item > a {
  width: auto;
  white-space: nowrap;
}
/* ==========================================================================
   Sub-barra «Solicitar reparación» bajo la cabecera (nito_subbarra_pintar)
   ==========================================================================
   Componente propio: sin !important. Los selectores de control van a 0-2-0 para
   ganar a los de Kadence sobre elementos (select, input[type=search]:focus a
   0-1-1, button:focus a 0-1-1).

   Una sola fila en escritorio -título | controles | enlace-, ~64 px de alto y
   al ancho de la cabecera: #main-header va a ancho completo con 24 px
   (--global-content-edge-padding) a cada lado, así que la barra usa el mismo
   margen y no --global-content-width. El título queda a plomo con el logo y el
   enlace con el último elemento de la derecha.

   Fondo: azul de marca con un patrón de iconos (llave, centralita, disco de
   freno) en blanco al 7 %, como SVG en línea. */

.nito-subbarra {
    background-color: #0018a9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='64' viewBox='0 0 180 64' fill='none' stroke='white' stroke-opacity='.07' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(14 8) scale(1.1)'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/g%3E%3Cg transform='translate(78 22) scale(1.1)'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cpath d='M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3'/%3E%3C/g%3E%3Cg transform='translate(138 6) scale(1.1)'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 5v1M19 12h-1M12 19v-1M5 12h1'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    color: #ffffff;
}

.nito-subbarra__interior {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 64px;
    padding: 10px var(--global-content-edge-padding, 1.5rem);
    box-sizing: border-box;
}

.nito-subbarra .nito-subbarra__titulo {
    flex: 0 0 auto;
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    color: #ffffff;
}

.nito-subbarra .nito-subbarra__enlace {
    flex: 0 0 auto;
    color: #ffffff;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.nito-subbarra .nito-subbarra__enlace:hover,
.nito-subbarra .nito-subbarra__enlace:focus-visible {
    color: #c1cbf5;
}

.nito-subbarra__form {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 0;
}

/* Tipo: tres pastillas. El radio se oculta a la vista, no al teclado. */
.nito-subbarra .nito-subbarra__tipos {
    display: flex;
    flex: 0 0 auto;
    margin: 0;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 4px;
}

.nito-subbarra__radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.nito-subbarra__tipo {
    padding: 10px 18px;
    border-radius: 3px;
    background-color: transparent;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    cursor: pointer;
}

.nito-subbarra__radio:checked + .nito-subbarra__tipo {
    background-color: #ffffff;
    color: #0018a9;
}

.nito-subbarra__radio:focus-visible + .nito-subbarra__tipo {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.nito-subbarra__fila {
    display: flex;
    flex: 1 1 auto;
    gap: 12px;
    min-width: 0;
}

/* display:flex de arriba pisaría el atributo hidden. */
.nito-subbarra__fila[hidden] {
    display: none;
}

.nito-subbarra .nito-subbarra__select,
.nito-subbarra .nito-subbarra__campo {
    flex: 1 1 0;
    min-width: 0;
    height: 42px;
    margin: 0;
    padding: 0 40px 0 14px;
    border: 1px solid #ffffff;
    border-radius: 4px;
    background-color: #ffffff;
    color: #0f172a;
    font-size: 15px;
    box-shadow: none;
}

.nito-subbarra .nito-subbarra__select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    cursor: pointer;
}

/* En espera, no rotos: blancos y a media opacidad. */
.nito-subbarra .nito-subbarra__select:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.nito-subbarra .nito-subbarra__campo {
    padding-right: 14px;
}

.nito-subbarra .nito-subbarra__select:focus-visible,
.nito-subbarra .nito-subbarra__campo:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    border-color: #ffffff;
    color: #0f172a;
    box-shadow: none;
}

/* Botón blanco con texto azul, siempre visible; a baja opacidad hasta que la
   elección está completa. El reposo se repite en :focus ANTES de :hover (ver
   CLAUDE.md, «Any bespoke <button> needs its resting colours restated on
   :focus»). */
.nito-subbarra .nito-subbarra__boton {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 22px;
    border: 1px solid #ffffff;
    border-radius: 4px;
    background: #ffffff;
    color: #0018a9;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
}

.nito-subbarra .nito-subbarra__boton:focus {
    background: #ffffff;
    color: #0018a9;
    box-shadow: none;
}

.nito-subbarra .nito-subbarra__boton:hover,
.nito-subbarra .nito-subbarra__boton:active {
    border-color: #ffffff;
    background: #0a0f2c;
    color: #ffffff;
}

.nito-subbarra .nito-subbarra__boton:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.nito-subbarra .nito-subbarra__boton:disabled,
.nito-subbarra .nito-subbarra__boton:disabled:hover {
    border-color: #ffffff;
    background: #ffffff;
    color: #0018a9;
    opacity: .45;
    cursor: not-allowed;
}

/* Por debajo de 1800 px no cabe todo en una fila. Arriba: título, pastillas y,
   al extremo, el enlace; abajo, los selects con la línea entera -con las
   pastillas al lado, a 1100 px los rótulos «1. Seleccionar la marca» salían
   cortados-. Las pastillas están fuera del <form> justo para poder subirlas.
   Hasta el 2026-10-16 el corte era 1279 px: medido en el navegador, entre 1280
   y 1760 px los rótulos «1. Escribe o elige la marca» salían cortados (a 1440,
   «1. Escribe o e»); en una fila solo caben enteros desde ~1780 px. */
@media (max-width: 1799px) {
    .nito-subbarra__interior {
        flex-wrap: wrap;
        gap: 10px 20px;
        padding-top: 12px;
        padding-bottom: 14px;
    }

    .nito-subbarra .nito-subbarra__titulo {
        order: 1;
    }

    .nito-subbarra .nito-subbarra__tipos {
        order: 2;
    }

    .nito-subbarra .nito-subbarra__enlace {
        order: 3;
        margin-left: auto;
    }

    .nito-subbarra__form {
        order: 4;
        flex-basis: 100%;
    }

    .nito-subbarra__fila {
        gap: 8px;
    }

    .nito-subbarra .nito-subbarra__select,
    .nito-subbarra .nito-subbarra__campo {
        padding: 0 32px 0 12px;
        font-size: 14px;
        background-position: right 10px center;
    }

    .nito-subbarra .nito-subbarra__boton {
        padding: 0 16px;
    }
}

/* Tableta: el botón baja a su línea para que los tres selects se lean enteros. */
@media (max-width: 1023px) {
    .nito-subbarra__fila--selects {
        flex-wrap: wrap;
    }

    .nito-subbarra__fila--selects .nito-subbarra__boton {
        flex-basis: 100%;
    }
}

/* Móvil: todo en columna -título, enlace, pastillas y selects al 100 %-. */
@media (max-width: 767px) {
    .nito-subbarra__interior {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .nito-subbarra .nito-subbarra__enlace {
        order: 2;
        margin-left: 0;
    }

    .nito-subbarra .nito-subbarra__tipos {
        order: 3;
        margin-top: 8px;
    }

    .nito-subbarra__form {
        width: 100%;
        margin-top: 8px;
    }

    .nito-subbarra__fila {
        flex-direction: column;
    }

    .nito-subbarra .nito-subbarra__select,
    .nito-subbarra .nito-subbarra__campo,
    .nito-subbarra .nito-subbarra__boton {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ==========================================================================
   Entradas del blog (body.single-post) — lectura minimalista (2026-09-29)
   ==========================================================================
   Kadence las pintaba con los tamaños globales de cabecera -h1 80 px, h2 42 px,
   h3 31 px, pensados para las landings- y una columna de 1242 px, unos 140
   caracteres por línea. Aquí: columna de lectura de 720 px, jerarquía
   tipográfica contenida, y la imagen destacada con esquinas suaves y
   sin el degradado de Kadence. Sin !important: todo
   lo de Kadence que se pisa son selectores de elemento (h1, h2…) o de una
   clase, y aquí se entra con body.single-post por delante. */

body.single-post .content-container.site-container {
    max-width: calc(720px + 2 * var(--global-content-edge-padding, 1.5rem));
}

/* La imagen destacada puede ir algo más ancha que el texto, no 230 px más. */
body.single-post .wp-site-blocks .content-container .post-thumbnail.alignwide {
    margin: 48px -60px 0;
    /* .alignwide de Kadence le fija el ancho de la ventana: con márgenes
       propios se salía por la derecha (en móvil y a 1400 px). */
    width: auto;
    max-width: none;
}

/* Kadence la pone «detrás» del titular: le sube el texto encima con un margen
   negativo y la funde con un degradado del color de fondo. En una entrada
   minimalista la imagen va limpia y el titular debajo, sin solaparse. */
body.single-post .post-thumbnail.article-post-thumbnail {
    margin-bottom: 0;
    border-radius: 16px;
    overflow: hidden;
}

body.single-post .post-thumbnail.article-post-thumbnail::after {
    content: none;
}

/* La foto entera, con su proporción real (Carla, 2026-09-29: «en móvil no queda
   cuadrada, se corta»). Kadence encaja la imagen en una proporción fija con un
   padding-bottom y object-fit: cover, y las fotos del blog (5:3) no la tienen:
   se perdía un trozo arriba y abajo. */
body.single-post .post-thumbnail.article-post-thumbnail {
    padding-bottom: 0;
    height: auto;
}

body.single-post .post-thumbnail.article-post-thumbnail .post-thumbnail-inner {
    position: static;
}

body.single-post .post-thumbnail.article-post-thumbnail img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    object-fit: initial;
}

/* Cabecera: categoría, titular y meta. */
body.single-post .entry-header.post-title {
    margin: 40px 0 32px;
}

body.single-post .entry-header .entry-taxonomies {
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body.single-post .entry-header .entry-taxonomies a {
    color: #0018a9;
    text-decoration: none;
}

body.single-post .entry-header .entry-taxonomies a:hover {
    text-decoration: underline;
}

body.single-post .entry-header h1.entry-title {
    margin: 0 0 16px;
    font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #0f172a;
}

body.single-post .entry-header .entry-meta {
    font-size: 14px;
    color: #64748b;
}

body.single-post .entry-header .entry-meta a {
    color: inherit;
    text-decoration: none;
}

/* Cuerpo. */
body.single-post .single-content {
    font-size: 18px;
    line-height: 1.75;
    color: #334155;
}

body.single-post .single-content > p:first-of-type {
    font-size: 20px;
    line-height: 1.65;
    color: #0f172a;
}

body.single-post .single-content p,
body.single-post .single-content ul,
body.single-post .single-content ol {
    margin: 0 0 1.25em;
}

body.single-post .single-content ul,
body.single-post .single-content ol {
    padding-left: 1.25em;
}

body.single-post .single-content li {
    margin-bottom: .4em;
    padding-left: .25em;
}

body.single-post .single-content li::marker {
    color: #0018a9;
    font-weight: 700;
}

body.single-post .single-content h2 {
    margin: 1.1em 0 .6em; /* la mitad, Carla 2026-10-15 (antes 2.2em) */
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.25;
    color: #0f172a;
}

body.single-post .single-content h3 {
    margin: 1.8em 0 .5em;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
}

body.single-post .single-content a:not([class]) {
    color: #0018a9;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

body.single-post .single-content strong {
    color: #0f172a;
}

body.single-post .single-content figure.wp-block-image {
    margin: 2em 0;
}

body.single-post .single-content figure.wp-block-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

body.single-post .single-content figcaption {
    margin-top: 8px;
    font-size: 14px;
    color: #64748b;
    text-align: center;
}

body.single-post .single-content blockquote {
    margin: 2em 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid #0018a9;
    color: #0f172a;
    font-style: normal;
}

/* La caja de autor sale vacía -sin foto ni biografía- y repite el «Por Carla»
   de la cabecera. */
body.single-post .entry-author {
    display: none;
}

/* Siguiente / anterior: una línea fina y el título, sin caja. */
body.single-post .post-navigation-wrap {
    margin-top: 48px;
    padding: 24px 0 0;
    border-top: 1px solid #e5e7eb;
}

body.single-post .post-navigation .nav-links a {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: #0f172a;
    text-decoration: none;
}

body.single-post .post-navigation .nav-links a:hover {
    color: #0018a9;
}

body.single-post .post-navigation .post-navigation-sub small {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #64748b;
}

/* Relacionadas: más aire, tarjetas limpias. */
/* El ajuste «post_footer_area_boxed» de Kadence (.post-footer-area-boxed ~
   .entry-related, 0-2-0) la mete en la columna de 720 px; se le devuelve el
   ancho completo con los mismos valores que Kadence usa para .alignfull. */
body.single-post .entry-related,
body.single-post .post-footer-area-boxed ~ .entry-related {
    margin: 64px calc(50% - var(--global-vw, 100vw) / 2) 0;
    width: var(--global-vw, 100vw);
    max-width: 100vw;
    padding: 56px 0;
    background: #fafafb;
}

/* Su contenedor lleva la misma clase que el del artículo: sin esto heredaría la
   columna de 720 px y las tarjetas saldrían de 150 px. */
body.single-post .entry-related .content-container.site-container {
    max-width: calc(1100px + 2 * var(--global-content-edge-padding, 1.5rem));
}

body.single-post .wp-site-blocks .entry-related .content-container .entry-related-inner-content.alignwide {
    margin-left: 0;
    margin-right: 0;
}

body.single-post .entry-related-title {
    margin-bottom: 24px;
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
}

body.single-post .entry-related .loop-entry {
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

body.single-post .entry-related .loop-entry .entry-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

body.single-post .entry-related .loop-entry .entry-title a {
    color: #0f172a;
    text-decoration: none;
}

body.single-post .entry-related .loop-entry .entry-title a:hover {
    color: #0018a9;
}

body.single-post .entry-related .loop-entry .entry-meta {
    font-size: 13px;
    color: #64748b;
}

@media (max-width: 1024px) {
    /* width: .alignwide de Kadence le da el ancho de la ventana, y sin los
       márgenes negativos se salía 17 px por la derecha en móvil. */
    body.single-post .wp-site-blocks .content-container .post-thumbnail.alignwide {
        margin: 24px 0 0;
        width: auto;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    body.single-post .entry-header.post-title {
        margin: 28px 0 24px;
    }

    body.single-post .single-content {
        font-size: 17px;
    }

    body.single-post .single-content > p:first-of-type {
        font-size: 18px;
    }

    body.single-post .single-content h2 {
        font-size: 1.45rem;
    }

    body.single-post .single-content h3 {
        font-size: 1.15rem;
    }

    body.single-post .entry-related {
        padding: 40px 0;
    }
}

/* ==========================================================================
   Resumen (.nm-resumen) e índice (.nm-indice) al principio de las entradas
   ==========================================================================
   Los valores son los del encargo (2026-09-29). Los selectores llevan
   body.single-post .single-content delante porque el bloque «Entradas del blog»
   de arriba ya da margen a todos los <p> y subraya los enlaces del contenido a
   0-3-2: sin el prefijo, el margen inferior del último párrafo del resumen y el
   subrayado de los enlaces del índice ganarían a estas reglas. */

body.single-post .single-content .nm-resumen {
    background: #e8ecfb;
    border-left: 4px solid #0018a9;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}

body.single-post .single-content .nm-resumen .nm-resumen__titulo {
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #0018a9;
    margin: 0 0 .4rem;
}

body.single-post .single-content .nm-resumen p:last-child {
    margin-bottom: 0;
}

body.single-post .single-content .nm-indice {
    border: 1px solid #c1cbf5;
    border-radius: 6px;
    padding: .75rem 1.25rem;
    margin: 0 0 2rem;
}

body.single-post .single-content .nm-indice .nm-indice__titulo {
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #0018a9;
    cursor: pointer;
}

body.single-post .single-content .nm-indice ol {
    margin: .5rem 0 0;
    padding-left: 1.25rem;
}

body.single-post .single-content .nm-indice li {
    margin: .25rem 0;
}

body.single-post .single-content .nm-indice a {
    color: #0018a9;
    text-decoration: none;
}

body.single-post .single-content .nm-indice a:hover {
    text-decoration: underline;
}

h2[id] {
    scroll-margin-top: 120px;
}

/* ==========================================================================
   Carrusel de modelos en móvil: flechas visibles (2026-09-29)
   ==========================================================================
   Por debajo de 600 px las flechas estaban ocultas («En movil manda el dedo»)
   y, pese al borde desvanecido y a la tarjeta que asoma, no se notaba que la
   fila siguiera (Carla). Vuelven solo en el carrusel de modelos, con el aspecto
   de las del menú de Mi cuenta: pequeñas, pegadas al borde para no tapar la
   foto, y solo la del lado por el que quedan modelos -la deshabilitada se
   oculta en lugar de quedarse a media opacidad-. 0-2-0/0-3-0 ganan a la regla
   que las oculta (0-1-0). */
@media (max-width: 600px) {
    .nito-vehicles-marco .nito-carrusel__flecha {
        display: flex;
        top: 101px; /* a media altura de la foto (medido a 390 px) */
        width: 34px;
        height: 34px;
        border: 1px solid #c1cbf5;
        color: #0018a9;
        box-shadow: 0 2px 6px rgba(15, 23, 42, .15);
    }

    .nito-vehicles-marco .nito-carrusel__flecha--prev {
        left: -6px;
    }

    .nito-vehicles-marco .nito-carrusel__flecha--next {
        right: -6px;
    }

    .nito-vehicles-marco .nito-carrusel__flecha:disabled,
    .nito-vehicles-marco .nito-carrusel__flecha[hidden] {
        display: none;
    }

    /* Reposo en :focus antes que :hover (Kadence: button:focus en blanco). */
    .nito-vehicles-marco .nito-carrusel__flecha:focus {
        background: #ffffff;
        color: #0018a9;
        border-color: #c1cbf5;
        box-shadow: 0 2px 6px rgba(15, 23, 42, .15);
    }

    .nito-vehicles-marco .nito-carrusel__flecha:hover,
    .nito-vehicles-marco .nito-carrusel__flecha:active {
        background: #0018a9;
        color: #ffffff;
        border-color: #0018a9;
    }

    .nito-vehicles-marco .nito-carrusel__flecha:focus-visible {
        outline: 2px solid #0018a9;
        outline-offset: 2px;
    }
}

/* ==========================================================================
   Entradas del blog en pantalla ancha: texto + índice lateral (2026-09-29)
   ==========================================================================
   La columna de 720 px sola en el centro dejaba ~600 px vacíos a cada lado en
   un monitor ancho y Carla lo vio excesivo. Desde 1100 px el bloque toma el
   ancho de contenido del resto del sitio (--global-content-width, 1290 px): el
   texto a la izquierda -unos 890 px a 19 px, ~90 caracteres por línea, el tope
   cómodo- y el índice (.nm-indice, que pinta nito_blog_resumen_indice()) en
   una columna lateral de 320 px fija al desplazarse.

   Rejilla sobre .single-content: cada bloque del artículo va a la columna 1 y
   el índice a la 2, ocupando todas las filas para que el sticky tenga recorrido.
   En una rejilla los márgenes no se funden, por eso el margen superior de los
   H2 baja: el inferior del párrafo anterior ya aporta su parte. */
@media (min-width: 1100px) {
    body.single-post .content-container.site-container {
        max-width: calc(var(--global-content-width, 1290px) + 2 * var(--global-content-edge-padding, 1.5rem));
    }

    body.single-post .entry-related .content-container.site-container {
        max-width: calc(var(--global-content-width, 1290px) + 2 * var(--global-content-edge-padding, 1.5rem));
    }

    body.single-post .wp-site-blocks .content-container .post-thumbnail.alignwide {
        margin: 48px 0 0;
    }

    body.single-post .entry-header.post-title {
        max-width: 880px;
    }

    body.single-post .single-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        column-gap: 80px;
        align-items: start;
        font-size: 19px; /* con ~890 px de columna, ~90 caracteres por línea */
    }

    body.single-post .single-content > * {
        grid-column: 1;
    }

    body.single-post .single-content > .nm-indice {
        grid-column: 2;
        grid-row: 1 / span 400;
        position: sticky;
        top: 110px;
        margin: 0;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
    }

    body.single-post .single-content > h2 {
        margin-top: .7em; /* la mitad, Carla 2026-10-15 (antes 1.4em) */
    }

    body.single-post .single-content > h3 {
        margin-top: 1.1em;
    }

    body.single-post .post-navigation-wrap {
        max-width: calc(100% - 400px); /* el ancho de la columna de texto */
    }
}

/* ==========================================================================
   Buscador de la rejilla de modelos ([nito_grid_modelos buscador="si"])
   Reutiliza el aspecto de .nito-marcas-buscar; aqui solo lo propio: menos
   aire debajo, porque la rejilla va justo a continuacion, y las tarjetas
   que oculta el filtro. .nito-vehicle-card lleva display:flex!important, asi
   que el [hidden] necesita !important para ganarle.
   ========================================================================== */
.nito-marcas-buscar.nito-modelos-buscar {
    /* La columna de Kadence es flex: sin width se encoge al placeholder. */
    width: 100%;
    max-width: 460px; /* el de marcas mide 640; aqui basta con que quepa el placeholder */
    box-sizing: border-box;
    margin: 24px auto 4px;
}

.nito-vehicles-grid .nito-vehicle-card[hidden] {
    display: none !important;
}

/* Con pocas coincidencias, centradas en vez de pegadas a la izquierda.
   "safe" evita que, si aun desbordan, se corte el principio de la fila. */
.nito-vehicles-grid.nito-vehicles-grid--filtrada {
    justify-content: safe center !important;
}

/* Buscador de modelos, ajuste (2026-09-30): la rejilla pegada al buscador.
   .nito-compatible-vehicles trae margin:50px 0!important, de ahi el
   !important; solo se toca el de arriba y solo con buscador delante. Letra
   del campo mas pequeña para que el placeholder con ejemplos quepa entero. */
.nito-modelos-buscar + .nito-compatible-vehicles {
    margin-top: 4px !important;
}

.nito-modelos-buscar .nito-marcas-buscar__estado {
    min-height: 18px;
    margin: 6px 0 0; /* Kadence pone 32px debajo de cada <p> */
    font-size: 13px;
}

.nito-marcas-buscar.nito-modelos-buscar .nito-marcas-buscar__campo {
    font-size: 14px;
}

@media (max-width: 600px) {
    .nito-marcas-buscar.nito-modelos-buscar .nito-marcas-buscar__campo {
        padding-right: 12px;
        font-size: 13px;
    }
}

/* ==========================================================================
   .nito-modsel -- «Elige tu modulo» ([nito_modulos_alternativos])
   Otros productos que se piden desde la landing como si fueran variantes del
   producto principal. Copia el aspecto de las opciones de Woo Variation
   Swatches de «Elige tu version» (borde #e2e8f0, elegida en #0018a9 sobre
   #f8fafc, radio 8px). Son <button>: el :focus restablece los colores de
   reposo antes del :hover (Kadence button:focus, ver CLAUDE.md).
   ========================================================================== */
.nito-modsel {
    margin: 0 0 18px;
}

.nito-modsel .nito-modsel__titulo {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.nito-modsel__opciones {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.nito-modsel .nito-modsel__opcion,
.nito-modsel .nito-modsel__opcion:focus {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
    color: #0f172a;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.nito-modsel .nito-modsel__opcion:hover {
    border-color: #0018a9;
    background: #ffffff;
    color: #0f172a;
}

.nito-modsel .nito-modsel__opcion.is-elegida,
.nito-modsel .nito-modsel__opcion.is-elegida:focus,
.nito-modsel .nito-modsel__opcion.is-elegida:hover {
    border-color: #0018a9;
    background: #f8fafc;
    box-shadow: 0 4px 12px rgba(0, 102, 255, .15);
    color: #0018a9;
}

.nito-modsel .nito-modsel__opcion:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 2px;
}

/* Solo el nombre, en mayusculas: el precio ya lo cambia el precio grande. */
.nito-modsel__nombre {
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* Con una alternativa elegida: fuera «Elige tu version» y su precio, que son
   del producto principal, y fuera las miniaturas de su galeria. */
.nito-modsel--otro form.variations_form table.variations,
.nito-modsel--otro form.variations_form .single_variation,
.nito-modsel--sin-versiones form.variations_form table.variations,
.nito-modsel--sin-versiones form.variations_form .single_variation,
.nito-modsel--otro .wc-block-product-gallery-thumbnails,
.nito-modsel--otro .wc-block-product-gallery-large-image-next-previous {
    display: none !important;
}

/* La foto de la alternativa, encima de la del producto principal. */
.nito-modsel--otro .wc-block-product-gallery-large-image {
    position: relative;
}

.nito-modsel__vista {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: #ffffff;
}

.nito-modsel__vista img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 480px) {
    .nito-modsel .nito-modsel__opcion {
        font-size: 12px;
    }
}

/* El formulario de variaciones es flex en fila y su unico hijo es un <div>
   que envuelve la tabla y el boton: sin la tabla de versiones, que era la que
   lo estiraba, se encogia y el boton con el. */
.nito-modsel--otro form.variations_form > div,
.nito-modsel--sin-versiones form.variations_form > div {
    flex: 1 1 100%;
    width: 100%;
}

/* .nito-abs-gen con cuatro tarjetas (Serie R): 2x2 en escritorio en vez de
   3+1, y sin la tarjeta destacada ocupando la fila entera en tableta. */
@media (min-width: 600px) {
    .nito-abs-gen.nito-abs-gen--cuatro .nito-abs-gen__item--destacado {
        grid-column: auto;
    }
}

@media (min-width: 1024px) {
    .nito-abs-gen.nito-abs-gen--cuatro .nito-abs-gen__lista {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* [nito_modulos_alternativos fotos="primera"]: solo la primera foto de la
   galeria del producto principal, sin miniaturas ni flechas (Serie F). */
.nito-modsel--una-foto .wc-block-product-gallery-large-image__wrapper:not(:first-child),
.nito-modsel--una-foto .wc-block-product-gallery-thumbnails,
.nito-modsel--una-foto .wc-block-product-gallery-large-image-next-previous {
    display: none !important;
}

/* ==========================================================================
   .nito-dictado -- «Dictar por voz» bajo «Tipo de averia, observaciones y
   comentarios» del checkout. Lo pinta el JS solo si el navegador sabe
   reconocer voz. Es un <button>: :focus repite el reposo antes del :hover
   para ganar al button:focus de Kadence (blanco sobre casi blanco).
   ========================================================================== */
.nito-dictado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 8px;
}

.nito-dictado .nito-dictado__boton,
.nito-dictado .nito-dictado__boton:focus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 14px;
    border: 2px solid #0018a9;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: none;
    color: #0018a9;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.nito-dictado .nito-dictado__boton:hover,
.nito-dictado .nito-dictado__boton:active {
    background: #0018a9;
    color: #ffffff;
}

.nito-dictado .nito-dictado__boton:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 2px;
}

/* Escuchando: rojo y con el latido del punto de grabacion. */
.nito-dictado.is-escuchando .nito-dictado__boton,
.nito-dictado.is-escuchando .nito-dictado__boton:focus,
.nito-dictado.is-escuchando .nito-dictado__boton:hover {
    border-color: #b91c1c;
    background: #b91c1c;
    color: #ffffff;
}

.nito-dictado.is-escuchando .nito-dictado__boton svg {
    animation: nito-dictado-latido 1.2s ease-in-out infinite;
}

@keyframes nito-dictado-latido {
    50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
    .nito-dictado.is-escuchando .nito-dictado__boton svg {
        animation: none;
    }
}

.nito-dictado__estado {
    color: #57575D;
    font-size: 13px;
    line-height: 1.4;
}

/* Aviso bajo las opciones de envio cuando la zona no tiene recogida (fuera de
   la UE, Canarias, Ceuta, Melilla, Andorra). */
.nito-checkout .nito-envio .nito-envio__aviso {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-left: 3px solid #0018a9;
    border-radius: 0 8px 8px 0;
    background: #f5f6ff;
    color: #3d3d3d;
    font-size: 14px;
    line-height: 1.5;
}

/* "Actualizar" de la calculadora de envio del carrito. Salia con letra negra
   sobre el azul: es el boton generico de Kadence (color --global-palette-btn,
   que aqui es negro). La regla de la web: azul y letra blanca; al pasar, blanco
   con letra y borde azules. 0-2-1 gana a button:hover/:focus de Kadence
   (0-1-1) y a .button:hover (0-2-0); :focus repite el reposo antes del :hover. */
.woocommerce-shipping-calculator button[name="calc_shipping"],
.woocommerce-shipping-calculator button[name="calc_shipping"]:focus {
    border: 2px solid var(--global-palette1, #0018a9);
    border-radius: 10px;
    background: var(--global-palette1, #0018a9);
    box-shadow: none;
    color: #ffffff;
    font-weight: 700;
}

.woocommerce-shipping-calculator button[name="calc_shipping"]:hover,
.woocommerce-shipping-calculator button[name="calc_shipping"]:active {
    border-color: var(--global-palette1, #0018a9);
    background: #ffffff;
    box-shadow: none;
    color: var(--global-palette1, #0018a9);
}

.woocommerce-shipping-calculator button[name="calc_shipping"]:focus-visible {
    outline: 2px solid var(--global-palette1, #0018a9);
    outline-offset: 2px;
}

/* Cantidad y «Solicitar reparación» en móvil, en las landings
   (woocommerce/single-product). El formulario es flex con gap:15px y conserva
   el ::before/::after del clearfix de WooCommerce, que en un contenedor flex
   son ELEMENTOS: el ::before empujaba la cantidad 15 px a la derecha y el
   ::after compartía línea con el botón y le quitaba 15 px por la derecha, así
   que ninguno de los dos cuadraba con las cajas de arriba (Carla, captura en
   el móvil, 2026-09-30). Fuera los dos, la cantidad centrada y el botón a todo
   el ancho, a plomo con las cajas. Vale para el formulario simple y para el de
   variaciones, cuyo contenedor del botón hace lo mismo. */
@media (max-width: 767px) {
    .wp-block-woocommerce-single-product form.cart::before,
    .wp-block-woocommerce-single-product form.cart::after,
    .wp-block-woocommerce-single-product .woocommerce-variation-add-to-cart::before,
    .wp-block-woocommerce-single-product .woocommerce-variation-add-to-cart::after {
        display: none !important;
    }

    .wp-block-woocommerce-single-product form.cart,
    .wp-block-woocommerce-single-product .woocommerce-variation-add-to-cart {
        justify-content: center !important;
    }

    .wp-block-woocommerce-single-product form.cart .quantity {
        margin-right: 0 !important;
    }

    .wp-block-woocommerce-single-product form.cart .single_add_to_cart_button {
        flex: 1 1 100% !important;
    }
}

/* Nota bajo las opciones de un producto variable (_nito_nota_variaciones). */
.woocommerce .nito-nota-variaciones {
    flex: 1 1 100%;
    margin: 4px 0 14px;
    color: #57575D;
    font-size: 13px;
    line-height: 1.45;
}

/* La descripción de la variación elegida, con el mismo tamaño que la nota. */
.woocommerce .woocommerce-variation-description,
.woocommerce .woocommerce-variation-description p {
    color: #57575D;
    font-size: 13px;
    line-height: 1.45;
}

/* [caja_profesional] interactiva: «No, soy particular» es ahora un <button>.
   Se le quita lo que Kadence pone a todo botón (tipografía, radio de 22px,
   colores de :hover/:focus) para que se vea igual que el enlace de al lado. */
.nito-caja-profesional button.nito-opcion-btn {
    margin: 0 !important;
    font: inherit !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-align: left !important;
    min-height: 0 !important;
    color: #ffffff !important;
}
.nito-caja-profesional .nito-opcion-btn:focus {
    background: #000000 !important;
    box-shadow: 0 4px 10px rgb(0 0 0 / .15) !important;
    outline: none;
}
.nito-caja-profesional .nito-opcion-btn:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 2px;
}

/* Tarjeta de modelo elegida (al pulsarla o al llegar desde la sub-barra con
   ?nito_modelo=): borde azul de marca y un anillo, también encima del :hover.
   El anillo va por DENTRO (inset): el carrusel tiene overflow-x y recortaba
   el que sobresalía por los lados. */
.nito-vehicle-card.nito-vehicle-card--elegida {
    border-color: #0018a9 !important;
    box-shadow: inset 0 0 0 1px #0018a9, 0 10px 25px rgb(0 24 169 / .12) !important;
}

/* En móvil (1,15 columnas) las tarjetas encajan al CENTRO, no al inicio: con
   «start» cada tarjeta quedaba pegada a la izquierda, bajo el difuminado del 6 %
   de .hay-mas-antes, y se veía descentrada y con el borde izquierdo cortado. Al
   centro asoman las dos vecinas (~7 % por lado) y el difuminado cae sobre
   ellas. La primera y la última siguen a ras, porque no hay más allá. */
@media (max-width: 600px) {
    .nito-vehicles-grid--carrusel .nito-vehicle-card {
        scroll-snap-align: center;
    }
}

/* Ampliación de garantía en verde, con escudo (Carla, 2026-10-01: que destaque
   frente al seguro). Mismo recuadro, teñido de verde; al contratarla el filo
   izquierdo pasa a verde en lugar del azul. */
.nito-garantia-ampliada {
    border-color: #86efac;
    background: #f0fdf4;
}

.nito-garantia-ampliada.nito-garantia-ampliada--elegida {
    border-left: 4px solid #16a34a;
    background: #dcfce7;
}

.nito-garantia-ampliada .nito-garantia-ampliada__opcion {
    align-items: center;
}

.nito-garantia-ampliada .nito-garantia-ampliada__escudo {
    flex: 0 0 auto;
    color: #16a34a;
}

.nito-garantia-ampliada .nito-garantia-ampliada__opcion strong {
    color: #15803d;
}

.nito-garantia-ampliada .nito-garantia-ampliada__casilla {
    margin: 0;
    accent-color: #16a34a;
}

.nito-garantia-ampliada .nito-garantia-ampliada__casilla:focus-visible {
    outline-color: #16a34a;
}

.nito-garantia-ampliada .nito-garantia-ampliada__nota {
    margin-left: 54px;
}

/* ==========================================================================
   Carrusel de artículos en móvil: flechas y tarjeta siguiente asomando
   (Carla, 2026-10-01: «sino parece un artículo solo»)
   ==========================================================================
   Igual que el de modelos: 1,15 columnas para que asome la siguiente, encaje
   al centro y flechas pequeñas a media altura de la foto (3:2; ~102 px medido
   entre 360 y 412 px), solo la del lado por el que quedan artículos. Las
   oculta en móvil la regla de 600 px de .nito-articulos__flecha (0-1-0);
   estas son 0-2-0. Solo afecta al modo carrusel: la rejilla del blog sigue a
   una columna. */
@media (max-width: 600px) {
    .nito-articulos__grid.nito-articulos__grid--carrusel {
        --nito-articulos-columnas: 1.15;
    }

    .nito-articulos__grid--carrusel .nito-articulos__card {
        scroll-snap-align: center;
    }

    .nito-articulos__marco--carrusel .nito-articulos__flecha {
        display: flex;
        top: 102px;
        width: 34px;
        height: 34px;
        border: 1px solid #c1cbf5;
        color: #0018a9;
        box-shadow: 0 2px 6px rgba(15, 23, 42, .15);
    }

    .nito-articulos__marco--carrusel .nito-articulos__flecha--prev {
        left: -6px;
    }

    .nito-articulos__marco--carrusel .nito-articulos__flecha--next {
        right: -6px;
    }

    .nito-articulos__marco--carrusel .nito-articulos__flecha:disabled,
    .nito-articulos__marco--carrusel .nito-articulos__flecha[hidden] {
        display: none;
    }

    /* Reposo en :focus antes que :hover (Kadence: button:focus en blanco). */
    .nito-articulos__marco--carrusel .nito-articulos__flecha:focus {
        background: #ffffff;
        color: #0018a9;
        border-color: #c1cbf5;
        box-shadow: 0 2px 6px rgba(15, 23, 42, .15);
    }

    .nito-articulos__marco--carrusel .nito-articulos__flecha:hover,
    .nito-articulos__marco--carrusel .nito-articulos__flecha:active {
        background: #0018a9;
        color: #ffffff;
        border-color: #0018a9;
    }

    .nito-articulos__marco--carrusel .nito-articulos__flecha:focus-visible {
        outline: 2px solid #0018a9;
        outline-offset: 2px;
    }
}

/* Seguro simplificado (Carla, 2026-10-01): sin caja «¿En qué consiste?»; cada
   opción lleva su nombre en negrita y lo que significa, y la exclusión de
   concesionarios va una sola vez debajo, pequeña y gris. Las opciones siguen
   una debajo de otra (reglas de arriba): con la explicación no caben en una
   línea. */
.nito-seguro .nito-seguro__opcion strong {
    color: var(--global-palette3, #1a1a1a);
    font-weight: 700;
}

/* 0-2-0: Kadence da 32px de margen a todo <p> de .single-content (0-1-1). */
.nito-seguro .nito-seguro__nota {
    margin: 6px 0 0 24px;
    color: var(--global-palette6, #636363);
    font-size: 12px;
    line-height: 1.4;
}

/* El seguro en azul suave, con escudo (Carla, 2026-10-01: más agradable a la
   vista). Mismo recuadro que la garantía ampliada (en verde), en el azul de la
   marca. 0-2-0 para ganar a .nito-seguro y a .nito-seguro--sin-elegir. */
.nito-seguro.nito-seguro {
    padding: 12px 14px;
    border: 1px solid #c7d2fe;
    border-left: 4px solid #0018a9;
    border-radius: 8px;
    background: #f0f4ff;
}

.nito-seguro .nito-seguro__etiqueta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    color: #0018a9;
    font-size: 15px;
}

.nito-seguro .nito-seguro__escudo {
    flex: 0 0 auto;
    color: #0018a9;
}

.nito-seguro .nito-seguro__opciones {
    padding-left: 2px;
}

.nito-seguro .nito-seguro__opcion strong {
    color: #0018a9;
}

.nito-seguro .nito-seguro__nota {
    margin-left: 26px;
    color: #5b6478;
}

/* ==========================================================================
   Línea del carrito simplificada (Carla, 2026-10-01)
   ==========================================================================
   - Sin precio unitario bajo el nombre: queda solo el total, a la derecha (en
     móvil, bajo el nombre). Con cantidad > 1 lleva debajo «2 × 350,00 €»
     (nito_carrito_unidades_linea).
   - El total en una sola línea, con «+ IVA» como estaba.
   - La papelera en la misma fila que «+ Añadir otra pieza igual», a la
     derecha: las dos celdas comparten la fila 3 de la columna central y la de
     quitar se pega al borde (justify-self), sin mover marcado.
   Los !important de móvil ganan a los de la tabla responsive de WooCommerce
   (ver «Movil» más arriba). */
.woocommerce .woocommerce-cart-form .shop_table tr.cart_item > td.product-price {
    display: none;
}

.woocommerce-cart-form .shop_table tr {
    grid-template-columns: 103px minmax(0, 1fr) max-content;
}

.woocommerce-cart-form .shop_table tr.cart_item > td.product-subtotal {
    white-space: nowrap;
}

.woocommerce-cart-form .shop_table tr.cart_item > td.product-subtotal .nito-linea-unidades {
    display: block;
    margin-top: 2px;
    color: var(--global-palette6, #636363);
    font-size: 12px;
    font-weight: 400;
}

.woocommerce-cart-form .shop_table tr.cart_item > td.product-quantity {
    grid-row: 3;
    align-self: center;
    padding-top: 6px;
    padding-right: 48px; /* sitio para la papelera, que va encima a la derecha */
}

.woocommerce-cart-form .shop_table tr.cart_item > td.product-remove {
    grid-row: 3;
    justify-self: end;
    align-self: center;
    padding-top: 6px;
}

.woocommerce .woocommerce-cart-form .shop_table td.product-remove a.remove {
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
}

.woocommerce .woocommerce-cart-form .shop_table td.product-remove a.remove svg {
    margin-left: 0;
}

@media (max-width: 768px) {
    .woocommerce-cart-form .shop_table tr {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .woocommerce-cart-form .shop_table tr.cart_item > td.product-subtotal {
        grid-row: 2;
    }

    .woocommerce .woocommerce-cart-form .shop_table td.product-remove a.remove {
        width: 44px;
        height: 44px;
        margin: 0;
    }
}

@media (max-width: 719px) {
    .woocommerce .woocommerce-cart-form table.shop_table_responsive tr.cart_item > td.product-price {
        display: none !important;
    }

    .woocommerce .woocommerce-cart-form table.shop_table_responsive tr.cart_item > td.product-subtotal {
        grid-row: 2;
        padding-top: 2px;
    }

    /* Un solo importe ya no necesita rótulo. */
    .woocommerce .woocommerce-cart-form table.shop_table_responsive tr.cart_item > td.product-subtotal::before {
        content: none !important;
    }

    .woocommerce .woocommerce-cart-form table.shop_table_responsive tr.cart_item > td.product-remove {
        display: flex !important;
        justify-content: flex-end;
    }
}

/* «+ Añadir otra pieza igual» alineado con el texto de la línea (en móvil parte
   en dos líneas y, como <button>, las centraba). */
.woocommerce-cart-form .nito-cantidad .nito-cantidad__otro {
    text-align: left;
}

@media (max-width: 719px) {
    .woocommerce .woocommerce-cart-form table.shop_table_responsive tr.cart_item > td.product-quantity,
    .woocommerce .woocommerce-cart-form table.shop_table_responsive tr.cart_item > td.product-remove {
        align-self: center;
        padding-top: 4px;
        padding-bottom: 0;
    }
}

/* Papelera delante de «+ Añadir otra pieza igual», en la misma línea y bajo
   el nombre (Carla, 2026-10-01): [papelera] | + Añadir otra pieza igual.
   La caja de la papelera mide 40x40 y el icono va a su izquierda, a plomo con
   el nombre; quedan 14 px hasta el separador y 12 px de este al texto. Las dos
   celdas siguen compartiendo la fila 3 de la columna central. */
.woocommerce-cart-form .shop_table tr.cart_item > td.product-remove {
    justify-self: start;
}

.woocommerce .woocommerce-cart-form .shop_table td.product-remove a.remove {
    justify-content: flex-start;
}

.woocommerce-cart-form .shop_table tr.cart_item > td.product-quantity {
    padding-left: 40px;
    padding-right: 0;
}

.woocommerce-cart-form .nito-cantidad.nito-cantidad--unidad {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding-left: 12px;
    border-left: 1px solid #d1d5db;
}

.woocommerce-cart-form .nito-cantidad .nito-cantidad__otro {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .woocommerce .woocommerce-cart-form .shop_table td.product-remove a.remove {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 719px) {
    .woocommerce .woocommerce-cart-form table.shop_table_responsive tr.cart_item > td.product-remove {
        justify-content: flex-start;
    }

    .woocommerce .woocommerce-cart-form table.shop_table_responsive tr.cart_item > td.product-quantity {
        padding-left: 40px !important;
        padding-right: 0 !important;
    }
}

/* Kadence (woocommerce.min.css, <=719px) baja la papelera 10 px con
   transform: translateY(10px); con la papelera en la fila del texto la
   descuadraba. Aquí se anula. */
.woocommerce .woocommerce-cart-form .shop_table td.product-remove a.remove {
    transform: none;
}

/* A 360 px «+ Añadir otra pieza igual» se pasaba 14 px de su columna: un
   punto menos de letra y cabe en una línea. */
@media (max-width: 400px) {
    .woocommerce-cart-form .nito-cantidad .nito-cantidad__otro {
        font-size: 12.5px;
    }
}

/* El nombre del producto en negrita (Carla, 2026-10-01). Ya lo estaba cuando
   es enlace (td.product-name > a); estos productos se pintan como texto. La
   versión y los datos de debajo vuelven a su peso. */
.woocommerce .woocommerce-cart-form .shop_table td.product-name {
    font-weight: 700;
}

.woocommerce .woocommerce-cart-form .shop_table td.product-name dl.variation,
.woocommerce .woocommerce-cart-form .shop_table td.product-name .nito-carrito-plazo {
    font-weight: 400;
}

/* En escritorio la celda de la papelera era un bloque y su línea de texto la
   bajaba 4 px respecto a «+ Añadir otra pieza igual». */
.woocommerce-cart-form .shop_table tr.cart_item > td.product-remove {
    display: flex;
    align-items: center;
}

.woocommerce-cart-form .shop_table tr.cart_item > td.product-quantity,
.woocommerce-cart-form .shop_table tr.cart_item > td.product-remove {
    padding-bottom: 0;
}

/* «+ información» del seguro: a la derecha del título, pequeño y discreto. */
.nito-seguro .nito-seguro__etiqueta .nito-seguro__mas {
    margin-left: auto;
    padding-left: 12px;
    color: #0018a9;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.nito-seguro .nito-seguro__etiqueta .nito-seguro__mas:hover,
.nito-seguro .nito-seguro__etiqueta .nito-seguro__mas:focus {
    color: #000000;
}

/* «+ información» de la garantía ampliada: a la derecha de la línea, como el
   del seguro. El bloque pasa a flex para ponerlo junto al <label> (no puede ir
   dentro); la nota del precio especial, si la hay, baja a su propia línea. */
.nito-garantia-ampliada {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
}

.nito-garantia-ampliada .nito-garantia-ampliada__opcion {
    flex: 1 1 auto;
    min-width: 0;
}

.nito-garantia-ampliada .nito-garantia-ampliada__nota {
    flex-basis: 100%;
}

.nito-garantia-ampliada .nito-garantia-ampliada__mas {
    margin-left: auto;
    color: #15803d;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.nito-garantia-ampliada .nito-garantia-ampliada__mas:hover,
.nito-garantia-ampliada .nito-garantia-ampliada__mas:focus {
    color: #000000;
}

/* «¿Qué módulo lleva tu vehículo?» bajo el título de las variantes
   (nito_modelos_variante_js). El título va en versalitas y negrita: el enlace
   no hereda ni lo uno ni lo otro. */
.variations .label .nito-variaciones-ayuda {
    display: block;
    margin-top: 4px;
    color: #0018a9;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.35;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.variations .label .nito-variaciones-ayuda:hover,
.variations .label .nito-variaciones-ayuda:focus {
    color: #000000;
}

/* La papelera comparte celda de la rejilla con «+ Añadir otra pieza igual», y
   esa celda va después en el HTML: se pintaba encima y se quedaba con el clic
   y el toque (la papelera no hacía nada, en móvil ni en ordenador). Con la
   papelera por encima, cada una recibe lo suyo: la celda del botón empieza
   40 px a su derecha. */
.woocommerce-cart-form .shop_table tr.cart_item > td.product-remove {
    position: relative;
    z-index: 2;
}

/* Las descripciones de los campos del checkout (p. ej. «Informe del taller,
   captura del escáner o factura previa…» bajo el documento de diagnosis) salían
   a 17 px, el tamaño del texto de la página, por encima de los títulos de los
   campos y del subtítulo del paso (13 px). Mismo tamaño que ellos y gris de
   texto de apoyo (Carla, 2026-10-01). */
.nito-checkout .form-row .description {
    display: block;
    margin-top: 4px;
    color: var(--global-palette6, #636363);
    font-size: 13px;
    line-height: 1.45;
}

/* En móvil los botones del asistente se apilan, y «Atrás» (primero en el
   HTML) quedaba arriba. La acción que hace avanzar va primero (Carla,
   2026-10-01): «Siguiente», o el envío del formulario de profesionales. En
   escritorio siguen en fila, Atrás a la izquierda y Siguiente a la derecha. */
@media (max-width: 600px) {
    .nito-wizard__nav .nito-wizard__btn--siguiente,
    .nito-wizard__nav .kb-submit-field {
        order: -1;
    }
}

/* Textos de ejemplo de los campos en gris claro (Carla, 2026-10-01): iban en
   #636363 (Kadence: ::placeholder { color: var(--global-palette6) }) y lo
   escrito en #57575D, casi el mismo tono, y parecía que el campo ya estaba
   rellenado. Ahora el ejemplo es claramente más claro que lo escrito. Vale en
   todo el sitio: campos, el «Selecciona un país…» de select2 y los
   desplegables nativos mientras siguen en su opción vacía. */
input::placeholder,
textarea::placeholder {
    color: #9ca3af;
    opacity: 1; /* Firefox le baja la opacidad por su cuenta */
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9ca3af;
}

select:has(> option[value=""]:checked) {
    color: #9ca3af;
}

select:has(> option[value=""]:checked) option {
    color: var(--global-palette4, #3d3d3d);
}

/* Títulos de los campos y de cada paso del checkout en el azul de la marca,
   para que destaquen (Carla, 2026-10-01). Solo los títulos de campo: las
   casillas que llevan su texto como etiqueta (enviar a otra dirección, crear
   cuenta, condiciones) siguen en el color del texto. El asterisco de
   obligatorio conserva su rojo. */
.woocommerce form.nito-checkout .form-row label:not(.checkbox):not(.woocommerce-form__label-for-checkbox),
.nito-checkout .nito-paso .nito-paso__titulo,
.nito-checkout .nito-checkout-datos__titulo {
    color: #0018a9;
}

/* WhatsApp flotante (nito_whatsapp_flotante). Por debajo de la cabecera fija
   (9999), los cajones y la ventana «Añadido al carrito», que lo tapan cuando
   se abren. */
.nito-wa {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    transition: transform .2s ease, box-shadow .2s ease;
}

.nito-wa:hover,
.nito-wa:focus {
    color: #ffffff;
    transform: scale(1.06);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}

.nito-wa:focus-visible {
    outline: 3px solid #0018a9;
    outline-offset: 3px;
}

@media (max-width: 768px) {
    .nito-wa {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: 52px;
        height: 52px;
    }

    /* Último paso del checkout: encima de la barra fija del pedido. */
    body:has(.nito-checkout.nito-ultimo-paso) .nito-wa {
        bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .nito-wa { transition: none; }
    .nito-wa:hover, .nito-wa:focus { transform: none; }
}

/* Las flechas del menú de Mi cuenta (nito_cuenta_menu_desplazable_js) se crean
   en todas las pantallas, pero solo tienen estilo -y solo hacen falta- en móvil,
   donde el menú es una fila que se desplaza (@media max-width: 767px). En
   escritorio se veían como dos bolas azules bajo el menú (Carla, 2026-10-01). */
@media (min-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-navigation .nito-nav__flecha {
        display: none;
    }
}

/* --- Seccion «Recupera la funcionalidad…» encima del pie (2026-10-02) -----
   La pinta nito_pie_seccion_funcionalidad(): patrones 3921 + 3923 fuera del
   contenido. Las tarjetas de 3921 sobresalen de su fila por abajo a proposito,
   y aqui la columna del boton (3923), que va despues con z-index 1, las tapaba.
   Se sube la fila de las tarjetas por encima. */
.nito-pie-funcionalidad .kb-row-layout-wrap {
    z-index: 2;
}

/* --- Pie: el texto de la marca (2026-10-02) --------------------------------
   Sin particion silabica: no se quiere ver «reparacio-nes». Y alineado a la
   izquierda, no justificado: justificar sin partir palabras solo queda limpio
   con la columna a 356px o mas (la primera linea se queda en «Centro tecnico
   de reparaciones» y abre huecos de 20px), y a ese ancho la columna pesaba
   demasiado. Se eligio un ancho intermedio (~290px de texto, 4 lineas). */
#colophon .site-footer-top-section-1 p {
    text-align: left;
    hyphens: manual;
    -webkit-hyphens: manual;
}

@media (min-width: 768px) {
    /* La marca ocupa 1,25 partes y cada lista 1: con el padding-right de 72px
       la columna se quedaba en ~206px y el parrafo se partia en seis lineas. */
    #colophon .site-top-footer-inner-wrap {
        grid-template-columns: 1.25fr 1fr 1fr 1fr;
    }

    /* Separacion de la marca respecto a SERVICIOS; deja ~290px de texto. */
    #colophon .site-footer-top-section-1 {
        padding-right: 36px;
    }

    /* Los rotulos SERVICIOS / EMPRESA / CONTACTO, a la altura del logotipo:
       la caja de linea del rotulo mide lo mismo que la de «NITO MOTOR» (48px)
       y el texto queda centrado en ella, igual que el logotipo en la suya. Asi
       las listas empiezan tambien a la misma altura que el parrafo. */
    #colophon .site-footer-top-section-2 h2,
    #colophon .site-footer-top-section-3 h2,
    #colophon .site-footer-top-section-4 h2 {
        line-height: 48px;
    }
}

/* ==========================================================================
   ESPACIADO UNIFORME ENTRE SECCIONES (2026-10-02)
   ==========================================================================
   Regla: 64px de aire entre el borde de una seccion y su contenido en
   escritorio, 48 en tablet y 40 en movil; entre dos secciones claras quedan
   128 / 96 / 80 de contenido a contenido. El grueso se hizo en el padding de
   las filas de Kadence (atributos de bloque, copia de la base de datos en
   Downloads/nito-espaciado). Aqui solo lo que no se arregla desde el bloque:
   margenes del propio tema que sumaban aire de mas al final de una seccion. */

/* El carrusel de modelos lleva margin: 50px 0 !important. Cuando es lo ultimo
   de su columna, esos 50px de abajo se sumaban al padding de la fila. */
.kt-inside-inner-col > .nito-compatible-vehicles:last-child {
    margin-bottom: 0 !important;
}

/* La ficha de producto incrustada bajo la cabecera de las paginas de marca y
   modelo terminaba con margenes encadenados de WooCommerce: 32px del bloque de
   columnas, 30 del formulario y 30 del grupo del boton. Medido a 900px: 107px
   de aire bajo el boton con la fila a padding 0. Solo dentro de .entry-content:
   la ficha de /producto/ no se toca. */
.entry-content .wp-block-woocommerce-single-product > .wp-block-columns:last-child,
.entry-content .wp-block-woocommerce-single-product .wp-block-add-to-cart-form > form.cart:last-child,
.entry-content .wp-block-woocommerce-single-product .single_variation_wrap > .woocommerce-variation-add-to-cart:last-child {
    margin-bottom: 0 !important; /* .woocommerce-variation-add-to-cart,form.cart lleva 30px !important */
}

/* El clearfix ::after de WooCommerce es un elemento flex mas en estas dos cajas,
   y arrastra su gap: 34px bajo la ficha cuando las columnas se apilan (movil) y
   15px bajo el formulario en tablet. En flex no hay floats que limpiar. */
.entry-content .wp-block-woocommerce-single-product .wp-block-columns.product::after,
.entry-content .wp-block-woocommerce-single-product form.cart::after {
    display: none !important; /* .woocommerce div.product form.cart::after es 0-3-3 */
}

/* Un bloque de columnas de WordPress lleva margin-bottom 1.75em para separarse
   del siguiente bloque; cuando es el ultimo de su columna de Kadence no hay
   siguiente y esos ~32px solo engordaban el final de la seccion. */
.entry-content .kt-inside-inner-col > .wp-block-columns:last-child {
    margin-bottom: 0;
}

/* El pie empezaba 24px mas adentro que el contenido de las paginas: Kadence
   pone el relleno lateral dos veces, en .site-footer-row-container (max 1290 +
   24px) y otra vez en el .site-container interior. Medido a 1920: contenido en
   x=332, pie en x=356. Sin el relleno interior los dos arrancan en 332. */
#colophon .site-footer-row-container-inner > .site-container {
    padding-left: 0;
    padding-right: 0;
}

/* Y el relleno que queda, el mismo que usan las filas del contenido (la
   variable de Kadence), no los 24px fijos del pie: en movil y tablet el
   contenido arranca a 20px y el pie a 24. */
#colophon .site-footer-row-container {
    padding-left: var(--global-content-edge-padding, 24px);
    padding-right: var(--global-content-edge-padding, 24px);
}

/* --- Panel de Mi cuenta: aviso fijo del IBAN oficial ------------------------
   Contra el fraude del «cambio de cuenta»: siempre visible en el panel. Mismo
   filo azul que .nito-aviso-cuenta. El prefijo .woocommerce-account sube los
   <p> a la especificidad de los demás textos del panel. */
.nito-panel .nito-panel__iban {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 20px;
    padding: 14px 18px;
    border: 1px solid #0018a9;
    border-left-width: 4px;
    border-radius: 8px;
    background: #f5f6ff;
}

.nito-panel .nito-panel__iban-icono {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1.4;
}

/* 13px: a 14.4px la frase ocupa ~770px y el hueco del panel es ~706px; a 13px
   cabe en una línea en escritorio. Más estrecho, vuelve a partirse sola. */
.woocommerce-account .nito-panel .nito-panel__iban-texto {
    margin: 0;
    color: #3d3d3d;
    font-size: 13px;
    line-height: 1.55;
}

.nito-panel .nito-panel__iban-texto strong {
    display: block;
    margin-bottom: 2px;
    color: #0018a9;
    font-size: 15px;
}

.nito-panel .nito-panel__iban-numero {
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .nito-panel .nito-panel__iban {
        padding: 12px 14px;
    }

    .nito-panel .nito-panel__iban-numero {
        white-space: normal;
    }
}

/* Tarjetas de modelo (2026-10-06): la linea del modulo bajo los anios (p. ej.
   "Modulo ABS estandar") en azul corporativo y negrita. Gana al gris #64748b
   de la regla base de .nito-vehicle-desc. */
.nito-vehicle-card .nito-vehicle-desc {
    color: #0018a9 !important;
    font-weight: 700 !important;
}


/* Fichas de producto (2026-10-06): varios párrafos de entrada seguidos (ATE MK61)
   salían pegados; .nito-ficha__intro no trae margen entre hermanos. */
.nito-ficha__intro + .nito-ficha__intro {
    margin-top: 14px;
}

/* Fichas de «Vehículos compatibles» que enlazan con su modelo (ATE MK61,
   2026-10-06): toda la ficha es pulsable; el enlace se estira con ::after. */
.nito-ficha .nito-listado__item--enlace {
    position: relative;
}

.nito-ficha .nito-listado__item--enlace a {
    color: inherit;
    text-decoration: none;
}

.nito-ficha .nito-listado__item--enlace a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.nito-ficha .nito-listado__item--enlace:hover a,
.nito-ficha .nito-listado__item--enlace a:focus-visible {
    color: #0018a9;
}

/* ==========================================================================
   TIENDA DE RECAMBIOS (página 3393, 2026-10-06)
   Reutiliza las secciones, títulos, ventajas y FAQ de .nito-ficha; aquí solo
   lo propio: el marco de página, las tarjetas de categoría, el aviso de
   catálogo vacío y los dos caminos (kit / reparación).
   ========================================================================== */

.nito-ficha.nito-tienda {
    box-sizing: content-box;
    padding: 64px var(--global-content-edge-padding, 24px);
}

.nito-tienda .nito-tienda__categorias {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
    scroll-margin-top: 120px;
}

.nito-tienda .nito-tienda__categoria {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 24px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgb(0 0 0 / .03);
    text-align: center;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.nito-tienda .nito-tienda__categoria:hover {
    transform: translateY(-3px);
    border-color: #0018a9;
    box-shadow: 0 8px 20px rgb(0 0 0 / .08);
}

.nito-tienda .nito-tienda__categoria-icono {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #0018a9;
    position: relative;
}

.nito-tienda .nito-tienda__categoria-icono::before {
    content: "";
    position: absolute;
    inset: 14px;
    background-color: #ffffff;
    -webkit-mask: var(--nito-tienda-icono) no-repeat center / contain;
    mask: var(--nito-tienda-icono) no-repeat center / contain;
}

.nito-tienda__categoria--piezas-recambio { --nito-tienda-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>'); }
.nito-tienda__categoria--modulos-abs { --nito-tienda-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"/></svg>'); }
.nito-tienda__categoria--kits-reparacion { --nito-tienda-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>'); }

.nito-tienda .nito-tienda__categoria-titulo {
    margin: 6px 0 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
    color: #0018a9;
}

.nito-tienda .nito-tienda__categoria-enlace {
    color: inherit;
    text-decoration: none;
}

.nito-tienda .nito-tienda__categoria-enlace::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.nito-tienda .nito-tienda__categoria-texto {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #3d3d3d;
}

.nito-tienda .nito-tienda__estado {
    margin-top: auto;
    padding: 5px 14px;
    border-radius: 999px;
    background: #eef0f6;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
}

.nito-tienda .nito-tienda__estado--hay {
    background: #0018a9;
    color: #ffffff;
}

.nito-tienda .nito-tienda__vacio {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px;
    border: 2px dashed #c7cde4;
    border-radius: 14px;
    text-align: center;
    color: #3d3d3d;
}

.nito-tienda .nito-tienda__vacio p {
    margin: 0;
}

.nito-tienda .nito-tienda__vacio .nito-tienda__vacio-titulo {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 800;
    color: #000000;
}

.nito-tienda .nito-tienda__caminos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.nito-tienda .nito-tienda__camino {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 28px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
}

.nito-tienda .nito-tienda__camino--servicio {
    background: #0018a9;
    border-color: #0018a9;
    color: #ffffff;
}

.nito-tienda .nito-tienda__camino p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

.nito-tienda .nito-tienda__camino-titulo {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    color: #000000;
}

.nito-tienda .nito-tienda__camino--servicio .nito-tienda__camino-titulo {
    color: #ffffff;
}

.nito-tienda .nito-tienda__botones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.nito-tienda .nito-tienda__boton {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 999px;
    background: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    color: #0018a9;
    transition: background-color .2s ease, color .2s ease;
}

.nito-tienda .nito-tienda__camino--kit .nito-tienda__boton {
    align-self: flex-start;
    margin-top: auto;
}

.nito-tienda .nito-tienda__boton--borde {
    border: 2px solid #0018a9;
}

.nito-tienda .nito-tienda__boton:hover,
.nito-tienda .nito-tienda__boton:focus-visible {
    background: #000000;
    color: #ffffff;
}

.nito-tienda .nito-tienda__boton--borde:hover,
.nito-tienda .nito-tienda__boton--borde:focus-visible {
    border-color: #000000;
}

@media (max-width: 1024px) {
    .nito-ficha.nito-tienda {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

@media (max-width: 767px) {
    .nito-ficha.nito-tienda {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .nito-tienda .nito-tienda__categorias,
    .nito-tienda .nito-tienda__caminos {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   TIENDA DE RECAMBIOS v2 (página 3393, 2026-10-06)
   La página se monta con filas de Kadence como /reparar-abs/: cabecera
   .nito-cabecera-abs clonada, secciones alternas blanco / #f5f6ff y la
   etiqueta .etiqueta-superior. Aquí, lo que es propio de la tienda.
   ========================================================================== */

/* Cabecera de sección: etiqueta, título con palabra en azul y raya. */
.nito-tienda-cab {
    margin: 0 auto 36px;
    max-width: 820px;
    text-align: center;
}

.nito-tienda-cab .etiqueta-superior {
    margin: 0 0 18px;
}

.nito-tienda-cab .nito-tienda-cab__titulo {
    margin: 0;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
    color: #000000;
}

.nito-tienda-cab .nito-tienda-cab__titulo span {
    color: #0018a9;
}

.nito-tienda-cab .nito-tienda-cab__titulo::after {
    content: "";
    display: block;
    width: 54px;
    height: 3px;
    margin: 16px auto 0;
    border-radius: 2px;
    background: #0018a9;
}

.nito-tienda-cab .nito-tienda-cab__intro {
    margin: 16px 0 0;
    font-size: 16px;
    color: #3d3d3d;
}

/* Tarjeta «Busca tu recambio» de la cabecera: el aspecto del buscador de
   vehículos (.nm-buscador) de /reparar-abs/. */
.nito-tienda-busca {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 440px;
    margin-left: auto;
    padding: 28px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 20px 45px rgb(15 23 42 / .14);
}

.nito-tienda-busca p {
    margin: 0;
}

.nito-tienda-busca .nito-tienda-busca__etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #0018a9;
}

.nito-tienda-busca .nito-tienda-busca__etiqueta svg {
    width: 16px;
    height: 16px;
}

.nito-tienda-busca .nito-tienda-busca__titulo {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
    color: #0f172a;
}

.nito-tienda-busca .nito-tienda-busca__titulo span {
    color: #0018a9;
}

.nito-tienda-busca .nito-tienda-busca__texto {
    font-size: 14px;
    color: #64748b;
}

.nito-tienda-busca .nito-tienda-busca__campo {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    font-size: 15px;
    color: #0f172a;
}

.nito-tienda-busca .nito-tienda-busca__campo:focus {
    outline: 2px solid #0018a9;
    outline-offset: 1px;
    background: #ffffff;
}

.nito-tienda-busca .nito-tienda-busca__boton {
    height: 50px;
    border: 0;
    border-radius: 12px;
    background: #0018a9;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #ffffff;
    box-shadow: none;
    cursor: pointer;
}

/* Kadence pinta button:focus en blanco sobre casi blanco (ver CLAUDE.md). */
.nito-tienda-busca .nito-tienda-busca__boton:focus {
    background: #0018a9;
    color: #ffffff;
    box-shadow: none;
}

.nito-tienda-busca .nito-tienda-busca__boton:hover,
.nito-tienda-busca .nito-tienda-busca__boton:active {
    background: #000000;
    color: #ffffff;
}

.nito-tienda-busca .nito-tienda-busca__pie {
    font-size: 13px;
    text-align: center;
    color: #64748b;
}

.nito-tienda-busca .nito-tienda-busca__pie a {
    font-weight: 700;
    color: #0018a9;
}

/* Las tarjetas de categoría ya no van dentro de .nito-ficha: sin margen arriba. */
.nito-tienda .nito-tienda__categorias {
    margin-top: 0;
}

/* Catálogo: filtros a la izquierda, rejilla a la derecha. */
.nito-catalogo {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 32px;
    align-items: start;
    scroll-margin-top: 140px;
}

.nito-catalogo .nito-catalogo__filtros {
    position: sticky;
    top: 120px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgb(0 0 0 / .03);
}

.nito-catalogo .nito-catalogo__filtros-boton {
    display: none;
}

.nito-catalogo .nito-catalogo__form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 22px;
}

.nito-catalogo .nito-catalogo__grupo {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.nito-catalogo .nito-catalogo__grupo-titulo {
    display: block;
    margin: 0 0 10px;
    padding: 0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #0f172a;
}

.nito-catalogo .nito-catalogo__buscar {
    display: flex;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    overflow: hidden;
}

.nito-catalogo .nito-catalogo__buscar input {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    font-size: 14px;
}

.nito-catalogo .nito-catalogo__buscar button,
.nito-catalogo .nito-catalogo__buscar button:focus {
    width: 42px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #0018a9;
    color: #ffffff;
    box-shadow: none;
}

.nito-catalogo .nito-catalogo__buscar button:hover {
    background: #000000;
}

.nito-catalogo .nito-catalogo__buscar svg {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

.nito-catalogo .nito-catalogo__opcion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 15px;
    color: #3d3d3d;
    cursor: pointer;
}

.nito-catalogo .nito-catalogo__opcion input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #0018a9;
}

.nito-catalogo .nito-catalogo__opcion:has(input:checked) {
    font-weight: 700;
    color: #0018a9;
}

.nito-catalogo .nito-catalogo__cuenta {
    margin-left: auto;
    min-width: 26px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #eef0f6;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    color: #64748b;
}

.nito-catalogo .nito-catalogo__precio {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nito-catalogo .nito-catalogo__precio label {
    flex: 1;
    min-width: 0;
}

.nito-catalogo .nito-catalogo__precio input {
    width: 100%;
    height: 42px;
    padding: 0 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 14px;
}

.nito-catalogo .nito-catalogo__aplicar,
.nito-catalogo .nito-catalogo__aplicar:focus {
    height: 46px;
    border: 0;
    border-radius: 999px;
    background: #0018a9;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    color: #ffffff;
    box-shadow: none;
}

.nito-catalogo .nito-catalogo__aplicar:hover,
.nito-catalogo .nito-catalogo__aplicar:active {
    background: #000000;
    color: #ffffff;
}

.nito-catalogo .nito-catalogo__limpiar {
    margin-top: -10px;
    font-size: 13px;
    text-align: center;
    color: #64748b;
}

.nito-catalogo .nito-catalogo__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.nito-catalogo .nito-catalogo__total {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.nito-catalogo .nito-catalogo__orden {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #64748b;
}

.nito-catalogo .nito-catalogo__orden select {
    height: 40px;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background-color: #ffffff;
    font-size: 14px;
    color: #0f172a;
}

.nito-catalogo .nito-catalogo__paginas {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}

.nito-catalogo .nito-catalogo__pagina {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    font-weight: 700;
    text-decoration: none;
    color: #0f172a;
}

.nito-catalogo .nito-catalogo__pagina.is-actual,
.nito-catalogo .nito-catalogo__pagina:hover {
    border-color: #0018a9;
    background: #0018a9;
    color: #ffffff;
}

.nito-catalogo .nito-catalogo__vacio {
    padding: 40px 24px;
    border: 2px dashed #c7cde4;
    border-radius: 16px;
    background: #ffffff;
    text-align: center;
    color: #3d3d3d;
}

.nito-catalogo .nito-catalogo__vacio p {
    margin: 0;
}

.nito-catalogo .nito-catalogo__vacio .nito-catalogo__vacio-titulo {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
}

/* Rejilla del catálogo: 3 columnas, sin el margen inferior del listado. */
.nito-catalogo ul.products {
    margin: 0 !important;
}

/* Ventajas: tarjetas con icono en círculo, como las de «¿Qué es el ABS?». */
.nito-tienda-ventajas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.nito-tienda-ventaja {
    display: flex;
    gap: 14px;
    padding: 22px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}

.nito-tienda-ventaja p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #64748b;
}

.nito-tienda-ventaja .nito-tienda-ventaja__titulo {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    color: #0018a9;
}

.nito-tienda-ventaja .nito-tienda-ventaja__icono {
    position: relative;
    flex: 0 0 46px;
    height: 46px;
    border-radius: 50%;
    background: #eef0fb;
}

.nito-tienda-ventaja .nito-tienda-ventaja__icono::before {
    content: "";
    position: absolute;
    inset: 12px;
    background-color: #0018a9;
    -webkit-mask: var(--nito-ventaja-icono) no-repeat center / contain;
    mask: var(--nito-ventaja-icono) no-repeat center / contain;
}

.nito-tienda-ventaja--banco { --nito-ventaja-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v6c0 4.4-3 7.7-7 9-4-1.3-7-4.6-7-9V6l7-3z"/><path d="M9 12.5l2 2 4-4.5"/></svg>'); }
.nito-tienda-ventaja--diseno { --nito-ventaja-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>'); }
.nito-tienda-ventaja--precio { --nito-ventaja-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><circle cx="7" cy="7" r="1.5"/></svg>'); }
.nito-tienda-ventaja--asesoria { --nito-ventaja-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>'); }

/* ¿Kit o reparación?: dos tarjetas, la de reparación en azul corporativo. */
.nito-tienda-caminos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.nito-tienda-camino {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 34px 30px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
}

.nito-tienda-camino p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #3d3d3d;
}

.nito-tienda-camino .nito-tienda-camino__etiqueta {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #0018a9;
}

.nito-tienda-camino .nito-tienda-camino__titulo {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
    color: #000000;
}

.nito-tienda-camino--azul {
    background: #0018a9;
    border-color: #0018a9;
}

.nito-tienda-camino--azul p,
.nito-tienda-camino--azul .nito-tienda-camino__titulo,
.nito-tienda-camino--azul .nito-tienda-camino__etiqueta {
    color: #ffffff;
}

.nito-tienda-camino .nito-tienda-camino__botones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.nito-tienda-camino > .nito-tienda-boton {
    margin-top: auto;
}

.nito-tienda-boton {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 999px;
    background: #ffffff;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    color: #0018a9;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.nito-tienda-boton--borde {
    border: 2px solid #0018a9;
}

a.nito-tienda-boton:hover,
a.nito-tienda-boton:focus-visible {
    border-color: #000000;
    background: #000000;
    color: #ffffff;
}

/* La FAQ reutiliza .nito-ficha .nito-faq, pero sin el ancho de ficha. */
.nito-ficha.nito-tienda-faq {
    max-width: 900px;
}

@media (max-width: 1024px) {
    .nito-tienda-ventajas {
        grid-template-columns: repeat(2, 1fr);
    }

    .nito-tienda-busca {
        max-width: none;
        margin: 24px 0 0;
    }
}

@media (max-width: 900px) {
    .nito-catalogo {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .nito-catalogo .nito-catalogo__filtros {
        position: static;
    }

    .nito-catalogo .nito-catalogo__filtros-boton {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px;
        font-size: 14px;
        font-weight: 800;
        text-transform: uppercase;
        color: #0018a9;
        cursor: pointer;
        list-style: none;
    }

    .nito-catalogo .nito-catalogo__filtros-boton::-webkit-details-marker {
        display: none;
    }

    .nito-catalogo .nito-catalogo__filtros-boton::after {
        content: "+";
        font-size: 20px;
    }

    .nito-catalogo .nito-catalogo__filtros[open] .nito-catalogo__filtros-boton::after {
        content: "−";
    }

    .nito-catalogo .nito-catalogo__form {
        padding-top: 0;
    }
}

@media (max-width: 767px) {
    .nito-tienda-ventajas,
    .nito-tienda-caminos {
        grid-template-columns: 1fr;
    }

    .nito-tienda-camino {
        padding: 26px 22px;
    }
}

/* En la tienda no: «MÁS VENDIDO» lo pinta el CSS en todas las tarjetas
   (body .woocommerce ul.products li.product::before, 0-2-4) y aquí sería falso. */
body .nito-catalogo.woocommerce ul.products li.product::before {
    content: none;
    display: none;
}

.nito-catalogo .nito-catalogo__precio input,
.nito-catalogo .nito-catalogo__buscar input {
    box-sizing: border-box;
}

/* Tarjetas del catálogo de la tienda (2026-10-06): botón «Añadir al carrito»
   de verdad, al pie de la tarjeta, y el nombre con aspecto de enlace al pasar
   por encima. La tarjeta general de listados (líneas ~1923-1975) lleva
   !important en todo y 0-3-x; aquí se suma .nito-catalogo para ganarle. */
body .nito-catalogo.woocommerce ul.products li.product {
    display: flex !important;
    flex-direction: column;
}

body .nito-catalogo.woocommerce ul.products li.product .product-details {
    display: flex;
    flex: 1;
    flex-direction: column;
}

body .nito-catalogo.woocommerce ul.products li.product .woocommerce-loop-product__title a {
    color: #111827;
    text-decoration: none;
    transition: color .2s ease;
}

body .nito-catalogo.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover,
body .nito-catalogo.woocommerce ul.products li.product .woocommerce-loop-product__title a:focus-visible,
body .nito-catalogo.woocommerce ul.products li.product .woocommerce-loop-product__title a:active {
    color: #0018a9;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body .nito-catalogo.woocommerce ul.products li.product .price {
    float: none !important;
    display: block !important;
}

body .nito-catalogo.woocommerce ul.products li.product .product-action-wrap {
    margin-top: auto;
    padding: 16px 20px 20px;
}

body .nito-catalogo.woocommerce ul.products li.product .button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 999px !important;
    background: #0018a9 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    text-align: center;
    transition: background-color .2s ease;
}

body .nito-catalogo.woocommerce ul.products li.product .button:hover,
body .nito-catalogo.woocommerce ul.products li.product .button:active {
    background: #000000 !important;
    color: #ffffff !important;
}

body .nito-catalogo.woocommerce ul.products li.product .button:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 2px;
}

/* Tras añadir, WooCommerce pone «Ver carrito» debajo del botón. */
body .nito-catalogo.woocommerce ul.products li.product .added_to_cart {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    color: #0018a9;
}

body .nito-catalogo.woocommerce ul.products li.product .product-action-wrap {
    display: block !important;
    width: 100%;
    box-sizing: border-box;
}

body .nito-catalogo.woocommerce ul.products li.product .price {
    padding: 0 20px !important;
    text-align: left !important;
}

/* Paginación automática: el aviso de «Cargando» mientras llega la siguiente página. */
.nito-catalogo .nito-catalogo__cargando {
    display: none;
    margin-top: 24px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    color: #64748b;
}

.nito-catalogo.is-cargando .nito-catalogo__cargando {
    display: block;
}

.nito-catalogo.is-auto .nito-catalogo__paginas {
    display: none;
}

/* «Ver más» en los DTC agrupados y en las referencias (2026-10-06). */
.nm-errores--colapsado .nm-errores__grupo--extra,
.nm-errores--colapsado .nm-errores-grid--extra,
.nito-plegable.is-plegado .nito-plegable__extra {
    display: none;
}

.nito-plegable .nito-plegable__boton {
    display: block;
    margin: 24px auto 0;
}

/* Código corto junto a la referencia ATE de la unidad (pestaña Referencias). */
.nito-ficha .nito-listado__codigo {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef0fb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    color: #0018a9;
    white-space: nowrap;
}

/* Tarjetas del catálogo más compactas (2026-10-07): foto 4:3 en vez de
   cuadrada y sin los 64 px que se sumaban bajo «Añadir al carrito»
   (20 del botón + 24 de .product-details + 20 del li). */
body .nito-catalogo.woocommerce ul.products li.product {
    padding-bottom: 0 !important;
}

body .nito-catalogo.woocommerce ul.products li.product .woocommerce-loop-image-link img {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    object-fit: contain !important;
}

body .nito-catalogo.woocommerce ul.products li.product .product-details {
    margin: 0 !important;
    padding: 14px 16px 16px !important;
}

body .nito-catalogo.woocommerce ul.products li.product .woocommerce-loop-product__title {
    margin: 0 0 8px !important;
    padding: 0 !important;
}

body .nito-catalogo.woocommerce ul.products li.product .price {
    padding: 0 !important;
}

body .nito-catalogo.woocommerce ul.products li.product .product-action-wrap {
    padding: 12px 0 0;
}

/* Ficha dentro de la pestaña «Descripción» (2026-10-07): ocupa todo el ancho
   del panel en vez de quedarse en 1100px centrada con hueco a los lados.
   Solo en el panel: la tienda (.nito-ficha.nito-tienda) conserva su ancho. */
.woocommerce-Tabs-panel .nito-ficha {
    max-width: none;
}

/* Casillas de los formularios de Kadence (newsletter, contacto) (2026-10-07):
   Kadence les quita el aspecto nativo y las deja con borde blanco y fondo
   casi transparente, así que sobre fondo claro no se veía la de aceptar la
   política y nadie podía suscribirse. Casilla nativa, más grande, en azul. */
.kb-advanced-form .kb-radio-check-item input[type="checkbox"] {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    flex-shrink: 0;
    width: 20px !important;
    height: 20px !important;
    margin: 2px 10px 0 0 !important;
    accent-color: #0018a9;
    cursor: pointer;
}

.kb-advanced-form .kb-radio-check-item:has(input[type="checkbox"]) {
    display: flex;
    align-items: flex-start;
}

.kb-advanced-form .kb-radio-check-item input[type="checkbox"] + label {
    cursor: pointer;
}

/* Sugerencias de referencias en la sub-barra (2026-10-07): el JS envuelve el
   campo en .nito-subbarra__marco, que hereda el sitio flexible del campo. */
.nito-subbarra .nito-subbarra__marco {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
}

.nito-subbarra .nito-subbarra__marco .nito-subbarra__campo {
    width: 100%;
}

.nito-subbarra .nito-subbarra__sug {
    z-index: 1000;
}

/* Buscador de la pestaña «Referencias» (2026-10-07): las fichas y los grupos
   llevan display propio, que pisaría el atributo hidden del filtro. */
.nito-ficha .nito-listado[hidden],
.nito-ficha .nito-listado__grupo[hidden],
.nito-ficha .nito-listado__item[hidden],
.nito-ficha .nito-plegable__boton[hidden] {
    display: none !important;
}

.nito-ficha .nito-refs-buscar {
    margin-bottom: 24px;
}

/* Botones de la descripción que abren otra pestaña ([nito_ir_pestana]) y la
   pestaña «Valoraciones» con las opiniones de Google (2026-10-07). Marcado
   propio dentro de .nito-ficha: sin !important. */
.nito-ficha .nito-ficha__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 28px 0 0;
}

.nito-ficha .nito-ficha__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: 2px solid #0018a9;
    border-radius: 999px;
    background: #0018a9;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.nito-ficha .nito-ficha__cta::after {
    content: "\2192";
}

.nito-ficha .nito-ficha__cta--borde {
    background: #ffffff;
    color: #0018a9;
}

.nito-ficha .nito-ficha__cta:hover,
.nito-ficha .nito-ficha__cta:active {
    border-color: #000000;
    background: #000000;
    color: #ffffff;
}

.nito-ficha .nito-ficha__cta:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 2px;
}

.nito-ficha .nito-opiniones__resumen {
    margin: 0 0 24px;
    text-align: center;
    color: #475569;
    font-size: 15px;
}

.nito-ficha .nito-opiniones__resumen strong {
    color: #0f172a;
    font-size: 20px;
}

.nito-ficha .nito-opiniones {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #e9ebf0;
    border-radius: 12px;
    background: #ffffff;
}

.nito-ficha .nito-opinion {
    position: relative;
    margin: 0;
    padding: 24px 64px 24px 28px;
    border-bottom: 1px solid #eef0f4;
}

.nito-ficha .nito-opinion:last-child {
    border-bottom: 0;
}

.nito-ficha .nito-opinion__google {
    position: absolute;
    top: 24px;
    right: 24px;
}

.nito-ficha .nito-opinion__nombre {
    margin: 0;
    color: #334155;
    font-size: 17px;
    font-weight: 700;
}

.nito-ficha .nito-opinion__meta {
    margin: 4px 0 0;
    color: #94a3b8;
    font-size: 14px;
}

.nito-ficha .nito-opinion__estrellas {
    color: #f6a609;
    font-size: 18px;
    letter-spacing: 2px;
}

.nito-ficha .nito-opinion__texto {
    margin: 10px 0 0;
    color: #475569;
    font-size: 15px;
    line-height: 1.6;
}

@media (max-width: 767px) {
    .nito-ficha .nito-opinion {
        padding: 20px 52px 20px 18px;
    }

    .nito-ficha .nito-opinion__google {
        top: 20px;
        right: 16px;
    }
}

/* Botones del buscador de referencias/vehículos (2026-10-07): se muestran y
   ocultan con hidden, que el display propio de los botones pisaría. */
.nito-ficha .nito-ficha__ctas[hidden],
.nito-ficha .nito-ficha__cta[hidden] {
    display: none !important;
}

.nito-ficha .nito-refs-buscar__ctas {
    margin-top: 12px;
}

/* Fichas de «Referencias» y «Vehículos compatibles» centradas (2026-10-07).
   Vehículos: icono arriba, nombre y los años en su propia línea (los separa
   nito_listado_texto()). Referencias: icono, número y código corto en fila,
   centrados. En móvil, sin icono ni elevación: más limpio a dos columnas. */
.nito-ficha .nito-listado--vehiculos .nito-listado__item,
.nito-ficha .nito-listado--referencias .nito-listado__item {
    justify-content: center;
    text-align: center;
}

.nito-ficha .nito-listado--vehiculos .nito-listado__item {
    flex-direction: column;
    gap: 6px;
}

/* En columna, flex-basis da el alto: el ancho hay que darlo aparte. */
.nito-ficha .nito-listado--vehiculos .nito-listado__item::before {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.nito-ficha .nito-listado__anios {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
}

.nito-ficha .nito-listado--referencias .nito-listado__codigo {
    margin-left: 4px;
}

@media (max-width: 767px) {
    .nito-ficha .nito-listado--vehiculos .nito-listado__item,
    .nito-ficha .nito-listado--referencias .nito-listado__item {
        gap: 4px;
        padding: 10px 8px;
        font-size: 13.5px;
        box-shadow: none;
    }

    .nito-ficha .nito-listado--vehiculos .nito-listado__item::before,
    .nito-ficha .nito-listado--referencias .nito-listado__item::before {
        display: none;
    }

    .nito-ficha .nito-listado--vehiculos .nito-listado__item:hover,
    .nito-ficha .nito-listado--referencias .nito-listado__item:hover {
        transform: none;
    }

    /* La referencia entera en una línea: partida en el guion se leía mal. */
    .nito-ficha .nito-listado--referencias .nito-listado__item {
        flex-wrap: wrap;
        font-size: 13px;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .nito-ficha .nito-listado__anios {
        font-size: 12px;
    }
}

/* Con un filtro puesto (buscador o referencia → vehículos) quedan pocas
   fichas y la rejilla las dejaba arrimadas a la izquierda: se centran, con
   el título de su grupo (2026-10-07). */
.nito-ficha .is-filtrando .nito-listado {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.nito-ficha .is-filtrando .nito-listado__item {
    flex: 0 1 220px;
}

.nito-ficha .is-filtrando .nito-listado__grupo {
    text-align: center;
}

@media (max-width: 767px) {
    .nito-ficha .is-filtrando .nito-listado__item {
        flex-basis: calc(50% - 4px);
    }
}

/* Títulos de las pestañas de la ficha de producto en azul corporativo
   (2026-10-07). Las reglas de WooCommerce/Kadence para «ul.tabs li a» son
   de proveedor: se suma body y !important para ganarles. */
body.single-product .woocommerce-tabs ul.tabs li a,
body.single-product .woocommerce-tabs ul.tabs li a:visited {
    color: #0018a9 !important;
}

/* Siempre azul corporativo, también al tocar en el móvil: el toque deja la
   pestaña en :hover/:focus y antes la ponía en negro (2026-10-08). Al pasar,
   solo un subrayado. */
body.single-product .woocommerce-tabs ul.tabs li a:hover,
body.single-product .woocommerce-tabs ul.tabs li a:focus,
body.single-product .woocommerce-tabs ul.tabs li a:active {
    color: #0018a9 !important;
}

body.single-product .woocommerce-tabs ul.tabs li:not(.active) a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Filtro del listado de modelos por el módulo elegido en el producto
   (2026-10-07). La tarjeta que no lleva ese módulo se oculta; encima, un
   aviso con «Ver todos los modelos». */
.nito-vehicle-card.nito-vehicle-card--fuera {
    display: none !important;
}

.nito-vehicles-grid.nito-vehicles-grid--por-modulo {
    justify-content: safe center !important;
}

.nito-modelos-filtro {
    margin: 8px auto 0;
    text-align: center;
    color: #475569;
    font-size: 14px;
}

.nito-modelos-filtro[hidden] {
    display: none;
}

.nito-modelos-filtro .nito-modelos-filtro__todos {
    margin-left: 6px;
    white-space: nowrap;
    color: #0018a9;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* «Nuestro proceso de trabajo» (patrón 3304) dentro de la descripción de la
   ficha (2026-10-07): en las páginas los títulos de cada paso toman de Kadence
   .single-content h3 { margin: 1.5em 0 .5em } (21/7 px); dentro de la pestaña
   de WooCommerce no hay .single-content y quedaban a 0, pegados al icono. */
.woocommerce-Tabs-panel .proceso-trabajo .wp-block-kadence-advancedheading:is(h3, h4) {
    margin: 1.5em 0 .5em;
}

/* Mismo caso para el resto del bloque: Kadence da a .single-content p
   «0 0 var(--global-md-spacing)» y a h2 «.5em» abajo; en la pestaña quedaban
   con los márgenes del navegador (17 px arriba y abajo en «Sencillo · Rápido…»).
   La descripción de cada paso conserva su 4 px de .proceso-trabajo p:first-of-type. */
.woocommerce-Tabs-panel .proceso-trabajo p {
    margin: 0 0 var(--global-md-spacing, 2rem);
}

.woocommerce-Tabs-panel .proceso-trabajo h2.wp-block-kadence-advancedheading {
    margin-bottom: .5em;
}

/* Buscadores de «Referencias» y «Vehículos compatibles» más pegados a la lista
   (2026-10-08): 12 px de margen en vez de 24, y la línea de estado vacía
   («N vehículos») deja de ocupar sus 18 px hasta que hay algo que decir. */
.nito-ficha .nito-refs-buscar {
    margin-bottom: 12px;
}

.nito-ficha .nito-refs-buscar .nito-marcas-buscar__estado:empty {
    display: none;
}

/* Pestaña activa de la ficha en azul corporativo con texto blanco, en
   escritorio y en móvil (2026-10-08). Gana a la regla de títulos azules de
   arriba por especificidad (li.active) y al hover, que la dejaría en negro. */
body.single-product .woocommerce-tabs ul.tabs li.active {
    background: #0018a9 !important;
    border-color: #0018a9 !important;
}

body.single-product .woocommerce-tabs ul.tabs li.active a,
body.single-product .woocommerce-tabs ul.tabs li.active a:visited,
body.single-product .woocommerce-tabs ul.tabs li.active a:hover,
body.single-product .woocommerce-tabs ul.tabs li.active a:focus-visible {
    color: #ffffff !important;
}

/* En móvil Kadence (woocommerce.min.css) deja las pestañas no activas a
   opacity: 0.7, y el azul corporativo se veía desvaído (2026-10-08). */
body.single-product .woocommerce-tabs ul.tabs li a {
    opacity: 1 !important;
}

/* Referencias que se pueden pulsar (llevan a sus vehículos compatibles,
   2026-10-08): toda la ficha es pulsable (el ::after estirado de
   .nito-listado__item--enlace) y al pasar se subraya la referencia. */
.nito-ficha .nito-listado--referencias .nito-listado__item--enlace a:hover,
.nito-ficha .nito-listado--referencias .nito-listado__item--enlace a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Carrusel de modelos con pocas tarjetas (2026-10-08): las páginas de modelo
   pueden tener una sola, y pegada a la izquierda bajo un título centrado
   parecía un fallo. Centradas mientras caben; "safe" vuelve al principio en
   cuanto desbordan, así que el carrusel normal no cambia. */
.nito-vehicles-grid.nito-vehicles-grid--carrusel {
    justify-content: safe center !important;
}

/* Casilla de WhatsApp del checkout (2026-10-08): icono pequeño entre la
   casilla y el texto, en el verde de WhatsApp. */
.nito-whatsapp-consentimiento .nito-whatsapp-icono {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 6px 0 2px;
    vertical-align: -3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2325D366' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2z'/%3E%3Cpath fill='%23fff' d='M16.9 14.2c-.3-.1-1.6-.8-1.8-.9-.3-.1-.4-.1-.6.1l-.8 1c-.2.2-.3.2-.6.1-1.6-.8-2.7-1.4-3.7-3.2-.3-.5.3-.4.8-1.4.1-.2 0-.3 0-.5l-.8-1.9c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.2.3-.9.9-.9 2.2s1 2.6 1.1 2.7c.1.2 1.9 2.9 4.6 4.1 1.7.7 2.4.8 3.3.7.5-.1 1.6-.7 1.8-1.3.2-.6.2-1.2.2-1.3-.1-.1-.3-.2-.6-.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   BLOQUE DE PRECIO EN LA FICHA (.nito-precio, 2026-10-09)
   ==========================================================================
   Ficha del SBC (10674): el precio en grande a la izquierda, con lo que lo
   hace único, y «Qué incluye» a la derecha como lista con marcas. Componente
   propio, sin !important. Mismos azules y bordes que las tarjetas de la ficha.
   ========================================================================== */
.nito-ficha .nito-precio {
    display: grid;
    grid-template-columns: minmax(240px, 5fr) 7fr;
    gap: 20px;
    margin-top: 28px;
    text-align: left;
}

.nito-ficha .nito-precio__importe {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 28px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0018a9 0%, #14276d 100%);
    color: #ffffff;
}

.nito-ficha .nito-precio__etiqueta {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .8;
}

.nito-ficha .nito-precio__cifra {
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
}

.nito-ficha .nito-precio__iva {
    margin-left: 8px;
    font-size: 20px;
    font-weight: 600;
}

.nito-ficha .nito-precio__total {
    margin: 10px 0 0;
    font-size: 15px;
    opacity: .85;
}

.nito-ficha .nito-precio__sellos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 22px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .25);
    list-style: none;
}

.nito-ficha .nito-precio__sellos li,
.nito-ficha .nito-precio__lista li {
    position: relative;
    margin: 0;
    padding-left: 28px;
    line-height: 1.45;
}

.nito-ficha .nito-precio__sellos li {
    font-size: 15px;
    font-weight: 600;
}

/* Marca de verificación: máscara con el color del texto (blanca en el bloque
   azul, azul en la lista). */
.nito-ficha .nito-precio__sellos li::before,
.nito-ficha .nito-precio__lista li::before {
    content: "";
    position: absolute;
    top: .15em;
    left: 0;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
}

.nito-ficha .nito-precio__incluye {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
}

.nito-ficha .nito-precio__titulo {
    margin: 0 0 18px;
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
}

.nito-ficha .nito-precio__lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nito-ficha .nito-precio__lista li {
    font-size: 14px;
    color: #374151;
}

.nito-ficha .nito-precio__lista li::before {
    color: #0018a9;
}

@media (max-width: 900px) {
    .nito-ficha .nito-precio { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .nito-ficha .nito-precio__importe,
    .nito-ficha .nito-precio__incluye { padding: 22px 18px; }
    .nito-ficha .nito-precio__cifra { font-size: 44px; }
    .nito-ficha .nito-precio__lista { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BOTÓN FLOTANTE «SOLICITAR REPARACIÓN» EN MÓVIL (2026-10-09)
   ==========================================================================
   nito_solicitar_flotante() en functions.php. Barra fija abajo, solo hasta
   768px (el mismo corte que el WhatsApp flotante), y el WhatsApp sube encima
   mientras la barra está a la vista. Se esconde con el tutorial abierto, que
   pone su ventana abajo en móvil. El :focus repite los colores de reposo antes
   del :hover: Kadence pinta button:focus en blanco sobre blanco.
   ========================================================================== */
.nito-solicitar-flotante {
    display: none;
}

@media (max-width: 768px) {
    /* De borde a borde y pegada abajo, sin margen (Carla, 2026-10-09). */
    .nito-solicitar-flotante:not([hidden]) {
        display: block;
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 8999;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: #0018a9;
        transition: transform .25s ease, opacity .25s ease;
    }

    .nito-solicitar-flotante.nito-solicitar-flotante--oculta {
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
    }

    .nito-solicitar-flotante .nito-solicitar-flotante__boton {
        display: block;
        width: 100%;
        min-height: 52px;
        margin: 0;
        padding: 14px 20px;
        border: 0;
        border-radius: 0;
        background: #0018a9;
        color: #ffffff;
        box-shadow: 0 -4px 14px rgba(0, 0, 0, .18);
        font-family: Montserrat, sans-serif;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.2;
        text-transform: uppercase;
        letter-spacing: .02em;
        cursor: pointer;
    }

    .nito-solicitar-flotante .nito-solicitar-flotante__boton:focus {
        background: #0018a9;
        color: #ffffff;
        box-shadow: 0 -4px 14px rgba(0, 0, 0, .18);
    }

    .nito-solicitar-flotante .nito-solicitar-flotante__boton:hover,
    .nito-solicitar-flotante .nito-solicitar-flotante__boton:active {
        background: #000000;
        color: #ffffff;
    }

    .nito-solicitar-flotante .nito-solicitar-flotante__boton:focus-visible {
        outline: 3px solid #25d366;
        outline-offset: -5px;
    }

    /* El WhatsApp, justo encima de la barra: 52 de botón + 12. */
    body.nito-con-solicitar-flotante .nito-wa {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    /* El pie no queda tapado por la barra al llegar al final. Fijo mientras
       haya barra en la página, aparezca o no: si cambiara al mostrarse, el
       contenido daría saltos al hacer scroll. */
    body.nito-hay-solicitar-flotante {
        padding-bottom: 52px;
    }

    body:has(.nito-tour__caja) .nito-solicitar-flotante {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nito-solicitar-flotante:not([hidden]) { transition: none; }
}

/* Botón «Hablar con un técnico» de la home (columna .nito-cta-tecnico, 2911):
   el patrón sincronizado 3923 trae 104px arriba y 64 abajo en su columna, que
   en la home dejaban el botón flotando lejos del texto (Carla, 2026-10-09). Se
   recorta solo aquí; en el resto de páginas el patrón sigue igual.

   Ojo: las tarjetas de beneficios de la fila anterior (.nm-banner-beneficios,
   patrón 3921) cuelgan 60px sobre esta fila (margin-bottom: -60px). Por eso el
   fondo blanco de la columna se quita aquí -tapaba esa parte de las tarjetas- y
   el relleno de arriba se mide desde el borde de las tarjetas, no desde su
   texto: 60 que cuelgan + el hueco que se quiere (48 / 40 / 32). En móvil no
   cuelgan (terminan 4px antes de esta fila). */
.nito-cta-tecnico .wp-block-kadence-column > .kt-inside-inner-col {
    padding-top: 108px;
    padding-bottom: 64px;
    background: transparent;
}

@media (max-width: 1024px) {
    .nito-cta-tecnico .wp-block-kadence-column > .kt-inside-inner-col {
        padding-top: 100px;
        padding-bottom: 48px;
    }
}

@media (max-width: 767px) {
    .nito-cta-tecnico .wp-block-kadence-column > .kt-inside-inner-col {
        padding-top: 28px;
        padding-bottom: 40px;
    }
}

/* Página de modelo cuyos coches montan un solo módulo: no hay variante que
   elegir, así que la fila del selector no se enseña (nito_variante_unica_marca
   en functions.php). La opción sigue elegida dentro del formulario. */
table.variations tr:has(.nito-variante-unica) {
	display: none;
}

/* En las landings de marca la columna del producto lleva .product, y la regla
   de WooCommerce .woocommerce div.product p.price (0-3-2, font-size 1.25em)
   ganaba a la de arriba: el precio salía a 21 px en /bmw/ y a 32 px en
   /bmw/serie-5/. Mismo aspecto en las dos (Carla, 2026-10-13). */
.wp-block-woocommerce-single-product.woocommerce div.product p.nito-landing-precio {
    color: #0018a9;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
}

/* Del recuadro de profesionales a las opciones del producto, los mismos 10 px
   que hay entre las cajas de encima (Carla, 2026-10-13). Sobraban tres cosas:
   el margin-top de 16 px del formulario (regla .variations_form.cart de más
   arriba, puesta a 0), la fila vacía que el ::before de clearfix de WooCommerce
   ocupa dentro del form flex (más su gap de 15 px) y el interlineado de 37 px
   de la etiqueta de 14 px. El ::before ya se quitaba en el móvil; el ::after
   se queda en escritorio, que comparte fila con el botón. */
.wp-block-woocommerce-single-product form.cart::before {
    display: none !important;
}

.wp-block-woocommerce-single-product form.variations_form table.variations th.label {
    padding-top: 0;
}

.wp-block-woocommerce-single-product form.variations_form table.variations th.label label {
    display: block; /* inline-block se alineaba con el interlineado de 37 px del th */
    line-height: 1.2;
}

/* En las páginas de modelo la caja de profesionales va dentro del resumen del
   producto, cuyo margin-bottom de 12 px se imponía a sus 10. */
.wp-block-woocommerce-single-product .wc-block-components-product-summary:has(> .nito-caja-profesional:last-child) {
    margin-bottom: 10px;
}

/* Ficha de producto variable con opción por defecto: el precio de arriba ya es
   el de la opción elegida y cambia con ella (nito_ficha_precio_clase), así que
   el de la variación, debajo de las opciones, sobra (Carla, 2026-10-13). */
.single-product div.product .summary:has(.nito-ficha-precio) .woocommerce-variation-price {
    display: none;
}

/* Bloque de texto con lista dentro de una sección de ficha: alineado a la
   izquierda, no centrado como la intro suelta (Carla, 2026-10-13: «Antes de
   enviarlo, descarta esto» del ECB). Mismo ancho que la intro. */
.nito-ficha .nito-ficha__bloque {
    max-width: 820px;
    margin: 0 auto;
}

.nito-ficha .nito-ficha__bloque .nito-ficha__intro {
    margin: 0 0 16px;
    text-align: left;
}

.nito-ficha .nito-ficha__bloque .nito-ficha__lista li {
    font-size: 16px;
}

/* Iconos de ventajas para la ficha de 1.ª generación (2026-10-13): sistema
   original (enlace), fiabilidad (medalla) y plazo (reloj). Mismo trazo que el resto. */
.nito-ficha__beneficio--original { --nito-ficha-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>'); }
.nito-ficha__beneficio--fiable { --nito-ficha-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.48 12.89L17 22l-5-3-5 3 1.52-9.11"/></svg>'); }
.nito-ficha__beneficio--tiempo { --nito-ficha-icono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>'); }

/* Advertencia sobre la manipulación previa del módulo, al final de la
   descripción de las fichas de módulos (nito_advertencia_manipulacion). */
.nito-advertencia {
	max-width: 820px;
	margin: 16px auto 0;
	padding: 16px 20px;
	background: #fff8e6;
	border-left: 4px solid #f5a623;
	border-radius: 8px;
	text-align: left;
}
/* Tras una ficha maquetada, la última sección ya deja 48px de relleno abajo. */
.nito-ficha + .nito-advertencia { margin-top: -24px; }
@media (max-width: 767px) { .nito-ficha + .nito-advertencia { margin-top: -8px; } }
.nito-advertencia .nito-advertencia__titulo {
	margin: 0 0 6px;
	font-weight: 700;
	color: #111827;
}
.nito-advertencia .nito-advertencia__texto {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: #374151;
}

/* Rejilla de 3 con la última fila incompleta (5 síntomas en 7960): las
   tarjetas sueltas se centran en vez de quedarse a la izquierda. Seis
   columnas y cada tarjeta ocupa dos, así una fila de 1 o 2 cae en el centro.
   Carla, 2026-10-14. */
@media (min-width: 1025px) {
    .nito-ficha .nito-ficha__rejilla--3 { grid-template-columns: repeat(6, 1fr); }
    .nito-ficha .nito-ficha__rejilla--3 > * { grid-column: span 2; }
    .nito-ficha .nito-ficha__rejilla--3 > :last-child:nth-child(3n+1) { grid-column: 3 / span 2; }
    .nito-ficha .nito-ficha__rejilla--3 > :nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .nito-ficha .nito-ficha__rejilla--3 > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 10px);
    }
}

/* Foto de Carlos (CEO) en /quienes-somos/: a su tamaño real (374 px) para que
   no se pixele, centrada en la tarjeta. Carla, 2026-10-14. */
.wp-block-kadence-image.nito-foto-ceo {
    text-align: center;
    padding-top: 16px;
}
.wp-block-kadence-image.nito-foto-ceo img {
    display: block;
    width: auto !important;   /* Kadence la estira al 100 % de la tarjeta */
    max-width: min(374px, 100%) !important;
    margin: 0 auto;
    border-radius: 10px;
}

/* Enlace a LinkedIn bajo la tarjeta de Carlos en /quienes-somos/. */
.nito-linkedin {
    margin: 10px 0 0;
    text-align: center;
}
.nito-linkedin .nito-linkedin__enlace {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #0018a9;
    text-decoration: none;
}
.nito-linkedin .nito-linkedin__enlace::before {
    content: "";
    width: 18px;
    height: 18px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" rx="4" fill="%230018a9"/><path fill="white" d="M7.1 9.5H4.7V19h2.4V9.5zM5.9 5.2a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8zM19.3 13.5c0-2.6-.6-4.2-3.3-4.2-1.3 0-2.2.7-2.6 1.4V9.5h-2.3V19h2.4v-4.7c0-1.2.2-2.4 1.8-2.4 1.5 0 1.5 1.4 1.5 2.5V19h2.5v-5.5z"/></svg>') no-repeat center / contain;
}
.nito-linkedin .nito-linkedin__enlace:hover { text-decoration: underline; }

/* Marca y modelo de la sub-barra como campos para escribir o elegir
   (nito_subbarra_js, combobox; Carla, 2026-10-14). Heredan el aspecto del
   select (flecha incluida); el marco ocupa su hueco flexible. */
.nito-subbarra .nito-subbarra__combo .nito-subbarra__combo-campo {
    width: 100%;
    cursor: text;
}
.nito-subbarra .nito-subbarra__combo-campo::placeholder {
    color: #334155;
    opacity: 1;
}
.nito-subbarra .nito-subbarra__combo-campo:disabled::placeholder {
    color: #64748b;
}
.nito-subbarra .nito-subbarra__sin {
    cursor: default;
    color: #64748b;
    font-size: 13px;
}
@media (max-width: 767px) {
    .nito-subbarra .nito-subbarra__marco {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* SKU de las landings (bloque woocommerce/product-sku): es un código interno
   para Odoo y no se enseña al cliente (Carla, 2026-10-14). Solo se oculta en
   pantalla: sigue en los datos estructurados (schema Product) y en el feed de
   Google Merchant. */
.wp-block-woocommerce-product-meta .wc-block-components-product-sku {
    display: none !important;
}


/* ==================================================================
   PÁGINA DE AUTOR (/autor/<nombre>/) Y FIRMA EN LAS ENTRADAS
   ==================================================================
   author.php reutiliza el héroe azul del blog (.nito-blog__hero) y las
   tarjetas de artículo; aquí solo va lo propio: foto + texto en dos
   columnas en el héroe, biografía con ficha lateral y la caja «Escrito
   por» (.nito-firma) que nito_autor_caja() añade al final de cada
   entrada. Componente nuevo, sin !important. 2026-10-15. */
.nito-autor__hero-interior {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    text-align: left;
}

.nito-autor__foto img {
    display: block;
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fbfcfe;
    box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .45);
}

.nito-blog__hero .nito-autor__nombre {
    margin-bottom: 6px;
}

.nito-autor__cargo {
    margin: 0 0 16px;
    color: #fbfcfe;
    font-size: 18px;
    font-weight: 700;
    opacity: .9;
}

.nito-autor__resumen {
    max-width: 68ch;
    margin: 0 0 24px;
    color: #fbfcfe;
    font-size: 17px;
    line-height: 1.6;
}

.nito-autor__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}

.nito-autor__boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: 2px solid #fbfcfe;
    border-radius: 10px;
    color: #fbfcfe;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color .2s, color .2s;
}

.nito-autor__boton--linkedin {
    background: #fbfcfe;
    color: #0018a9;
}

.nito-autor__boton--linkedin::before {
    content: "";
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nito-autor__boton:hover {
    background: #fbfcfe;
    color: #0018a9;
}

.nito-autor__boton--linkedin:hover {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
}

/* Cuerpo: biografía y ficha lateral. */
.nito-autor__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 48px;
    align-items: start;
    margin-bottom: 64px;
}

.nito-autor__bio p {
    margin: 0 0 1.1em;
    color: #334155;
    font-size: 18px;
    line-height: 1.7;
}

/* 0-2-0: los h2 del tema le meterían su propio margen. */
.nito-autor__cuerpo .nito-autor__titulo {
    margin: 12px 0 20px;
    color: #0f172a;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
}

.nito-autor__ficha {
    padding: 28px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fafafb;
}

.nito-autor__ficha .nito-autor__ficha-titulo {
    margin: 0 0 14px;
    color: #0018a9;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.nito-autor__ficha .nito-autor__ficha-titulo:not(:first-child) {
    margin-top: 28px;
}

.nito-autor__hitos {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nito-autor__hitos li {
    position: relative;
    margin: 0;
    padding: 0 0 16px 22px;
    border-left: 2px solid #dbe3f5;
}

.nito-autor__hitos li:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
}

.nito-autor__hitos li::before {
    content: "";
    position: absolute;
    top: 4px;
    left: -7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0018a9;
    box-shadow: 0 0 0 3px #fafafb;
}

.nito-autor__hito-etiqueta {
    display: block;
    color: #0018a9;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
}

.nito-autor__hito-texto {
    display: block;
    color: #334155;
    font-size: 15px;
    line-height: 1.5;
}

.nito-autor__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nito-autor__chips li {
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: #e6edfc;
    color: #0018a9;
    font-size: 13px;
    font-weight: 700;
}

.nito-autor__datos {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #334155;
    font-size: 15px;
    line-height: 1.5;
}

.nito-autor__datos li {
    margin: 0 0 8px;
}

.nito-autor__datos a {
    color: #0018a9;
    font-weight: 700;
}

.nito-autor__articulos {
    margin-bottom: 32px;
}

.nito-autor__articulos .nito-articulos__titulo {
    margin: 0 0 28px;
    text-align: left;
}

@media (max-width: 900px) {
    .nito-autor__hero-interior {
        grid-template-columns: 1fr;
        gap: 24px;
        justify-items: center;
        text-align: center;
    }

    .nito-autor__foto img {
        width: 160px;
        height: 160px;
    }

    .nito-autor__resumen {
        margin-left: auto;
        margin-right: auto;
        font-size: 16px;
    }

    .nito-autor__acciones {
        justify-content: center;
    }

    .nito-autor__cuerpo {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .nito-autor__bio p {
        font-size: 17px;
    }
}

/* Firma «Escrito por» al final de la entrada. */
body.single-post .single-content .nito-firma {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin: 48px 0 0;
    padding: 24px;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #0018a9;
    border-radius: 12px;
    background: #fafafb;
}

.nito-firma__foto {
    flex-shrink: 0;
}

.nito-firma__foto img {
    display: block;
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 50%;
}

body.single-post .single-content .nito-firma p {
    margin: 0;
}

body.single-post .single-content .nito-firma .nito-firma__etiqueta {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body.single-post .single-content .nito-firma .nito-firma__nombre {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
}

body.single-post .single-content .nito-firma .nito-firma__nombre a {
    color: #0f172a;
    text-decoration: none;
}

body.single-post .single-content .nito-firma .nito-firma__cargo {
    margin-bottom: 8px;
    color: #0018a9;
    font-size: 14px;
    font-weight: 700;
}

body.single-post .single-content .nito-firma .nito-firma__resumen {
    margin-bottom: 10px;
    color: #334155;
    font-size: 16px;
    line-height: 1.6;
}

body.single-post .single-content .nito-firma .nito-firma__enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 14px;
    font-weight: 800;
}

body.single-post .single-content .nito-firma .nito-firma__enlaces a {
    color: #0018a9;
}

@media (max-width: 600px) {
    body.single-post .single-content .nito-firma {
        flex-direction: column;
        gap: 14px;
        padding: 20px;
    }

    .nito-firma__foto img {
        width: 72px;
        height: 72px;
    }
}

/* Entradas del blog: «También te puede interesar» sin relleno vertical en la
   franja ni margen bajo el carrusel (Carla, 2026-10-15). Kadence le sumaba
   padding fluido en .entry-related-inner-content (--global-xl-spacing, ~60 px),
   el carrusel con puntos lleva margin-bottom: 30px
   (.splide[data-slider-dots=true], 0-2-0) y #primary dejaba 80 px de margen
   debajo de la franja antes de la sección del pie. */
body.single-post .entry-related .entry-related-inner-content {
    padding-top: 0;
    padding-bottom: 0;
}

body.single-post .entry-related,
body.single-post .post-footer-area-boxed ~ .entry-related {
    margin-top: 48px;
    padding-top: 0;
    padding-bottom: 0;
}

body.single-post .entry-related .entry-related-carousel.splide {
    margin-bottom: 0;
}

body.single-post #primary.content-area {
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    body.single-post .entry-related,
    body.single-post .post-footer-area-boxed ~ .entry-related {
        margin-top: 40px;
        padding-top: 0;
        padding-bottom: 0;
    }
}

@media (max-width: 767px) {
    body.single-post .entry-related,
    body.single-post .post-footer-area-boxed ~ .entry-related {
        margin-top: 32px;
        padding-top: 0;
        padding-bottom: 0;
    }
}


/* ==================================================================
   HISTORIA DE NITO MOTOR (/quienes-somos/, 2026-10-15)
   ==================================================================
   Bloque core/html bajo la etiqueta y el H2 de Kadence: línea de tiempo
   de cinco hitos y tres pilares. Sustituye a la sección «equipo
   nitomotor». Componente propio, sin !important; los h3 van a 0-2-0
   para ganar a .single-content h3 (0-1-1) de Kadence. */
.nito-historia {
    max-width: 1100px;
    margin: 0 auto;
}

.nito-historia .nito-historia__intro {
    max-width: 720px;
    margin: 0 auto 48px;
    color: #334155;
    font-size: 18px;
    line-height: 1.6;
    text-align: center;
}

.nito-historia__hitos {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    margin: 0 0 56px;
    padding: 0;
    list-style: none;
}

/* La línea que une los cinco números. */
.nito-historia__hitos::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: #dbe3f5;
}

.nito-historia__hito {
    position: relative;
    margin: 0;
    text-align: center;
}

.nito-historia__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #0018a9;
    box-shadow: 0 0 0 6px #fbfcfe;
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
}

.nito-historia .nito-historia__hito-titulo {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
}

.nito-historia .nito-historia__hito-texto {
    margin: 0;
    color: #475569;
    font-size: 15px;
    line-height: 1.55;
}

.nito-historia__pilares {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.nito-historia__pilar {
    padding: 28px;
    border: 1px solid #e5e7eb;
    border-top: 4px solid #0018a9;
    border-radius: 12px;
    background: #ffffff;
}

.nito-historia .nito-historia__pilar-titulo {
    margin: 0 0 10px;
    color: #0018a9;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}

.nito-historia .nito-historia__pilar-texto {
    margin: 0;
    color: #334155;
    font-size: 16px;
    line-height: 1.6;
}

.nito-historia a {
    color: #0018a9;
    font-weight: 700;
}

@media (max-width: 900px) {
    .nito-historia__hitos {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 40px;
    }

    /* En columna la línea pasa a vertical, a la izquierda. */
    .nito-historia__hitos::before {
        top: 0;
        bottom: 0;
        left: 22px;
        right: auto;
        width: 2px;
        height: auto;
    }

    .nito-historia__hito {
        padding: 0 0 24px 66px;
        text-align: left;
    }

    .nito-historia__num {
        position: absolute;
        top: 0;
        left: 0;
    }

    .nito-historia .nito-historia__hito-titulo {
        padding-top: 12px;
    }

    .nito-historia__pilares {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .nito-historia .nito-historia__intro {
        margin-bottom: 32px;
        font-size: 16px;
    }
}

/* La etiqueta «Nuestra historia» es inline-flex y .etiqueta-superior le
   anula los márgenes laterales: se centra desde la columna. */
.nito-historia-columna > .kt-inside-inner-col {
    text-align: center;
}

.nito-historia-columna .nito-historia__pilar {
    text-align: left;
}

/* Quiénes somos: «Nuestro proceso de trabajo» (patrón 3304, compartido)
   llega con 93 / 77 / 69 px de padding superior. Solo en esta página, detrás
   de «¿A qué nos dedicamos?» (clase nito-qs-dedicamos en esa fila), se baja
   para que no quede tanto hueco. El patrón no se toca. 2026-10-15. */
.nito-qs-dedicamos + .kb-row-layout-wrap > .kt-row-column-wrap {
    padding-top: 48px;
}

@media (max-width: 1024px) {
    .nito-qs-dedicamos + .kb-row-layout-wrap > .kt-row-column-wrap {
        padding-top: 40px;
    }
}

@media (max-width: 767px) {
    .nito-qs-dedicamos + .kb-row-layout-wrap > .kt-row-column-wrap {
        padding-top: 40px;
    }
}


/* Historia en cronología (Quiénes somos, 2026-10-15). Sustituye a la línea
   horizontal de cinco números (.nito-historia__hitos, ya sin uso): línea
   central, un punto por hito, tarjeta con foto alternando de lado y la etapa
   o el año en grande en el lado libre. */
.nito-crono {
    position: relative;
    max-width: 1000px;
    margin: 0 auto 56px;
    padding: 0;
    list-style: none;
    text-align: left;
}

.nito-crono::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: #dbe3f5;
}

.nito-crono__hito {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 96px;
    margin: 0 0 40px;
}

.nito-crono__hito:last-child {
    margin-bottom: 0;
}

/* El punto sobre la línea, a la altura del principio de la tarjeta. */
.nito-crono__hito::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border-radius: 50%;
    background: #0018a9;
    box-shadow: 0 0 0 6px #fbfcfe;
    z-index: 1;
}

.nito-crono__marca {
    grid-row: 1;
    grid-column: 2;
    align-self: start;
    padding-top: 20px;
    color: #0018a9;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
}

.nito-crono__tarjeta {
    grid-row: 1;
    grid-column: 1;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

.nito-crono__hito:nth-child(even) .nito-crono__tarjeta {
    grid-column: 2;
}

.nito-crono__hito:nth-child(even) .nito-crono__marca {
    grid-column: 1;
    text-align: right;
}

.nito-crono .nito-crono__foto {
    margin: 0;
    aspect-ratio: 16 / 9;
    background: #f8fafc;
}

.nito-crono .nito-crono__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.nito-crono__cuerpo {
    padding: 22px 24px 24px;
}

.nito-crono .nito-crono__titulo {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
}

.nito-crono .nito-crono__texto {
    margin: 0;
    color: #334155;
    font-size: 16px;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .nito-crono {
        margin-bottom: 40px;
    }

    .nito-crono::before {
        left: 9px;
    }

    .nito-crono__hito {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 12px;
        padding-left: 40px;
        margin-bottom: 32px;
    }

    .nito-crono__hito::before {
        top: 4px;
        left: 9px;
    }

    .nito-crono__marca,
    .nito-crono__hito:nth-child(even) .nito-crono__marca {
        grid-row: 1;
        grid-column: 1;
        padding-top: 0;
        font-size: 20px;
        text-align: left;
    }

    .nito-crono__tarjeta,
    .nito-crono__hito:nth-child(even) .nito-crono__tarjeta {
        grid-row: 2;
        grid-column: 1;
    }
}

/* .single-content ol / li (0-1-1) de Kadence le meten margen y sangría a la
   lista y la descentraban de la línea: 0-2-0 para ganarles. */
.nito-historia .nito-crono {
    margin: 0 auto 56px;
    padding: 0;
}

.nito-historia .nito-crono__hito {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 900px) {
    .nito-historia .nito-crono {
        margin-bottom: 40px;
    }
}

/* Fotos de producto sobre blanco: la pieza entera, sin recortar. */
.nito-crono .nito-crono__foto--pieza {
    background: #ffffff;
}

.nito-crono .nito-crono__foto--pieza img {
    object-fit: contain;
    padding: 16px;
}

/* Retrato (Carlos): cuadrado y entero, sin recortarle la cara. */
.nito-crono .nito-crono__foto--retrato {
    aspect-ratio: 1 / 1;
}

.nito-crono .nito-crono__foto--retrato img {
    object-position: center top;
}

/* Cronología compacta (Carla, 2026-10-15: «muy amplia»). Tarjeta horizontal:
   miniatura a la izquierda y texto al lado, en vez de foto grande encima.
   Anula el aspect-ratio de las reglas anteriores; la foto ocupa todo el alto
   de la tarjeta. */
.nito-historia .nito-crono {
    max-width: 900px;
    margin-bottom: 48px;
}

.nito-historia .nito-crono__hito {
    column-gap: 64px;
    margin-bottom: 20px;
}

.nito-crono__hito::before {
    top: 22px;
}

.nito-crono__marca {
    padding-top: 12px;
    font-size: 22px;
}

.nito-crono__tarjeta {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
}

.nito-crono .nito-crono__foto,
.nito-crono .nito-crono__foto--retrato {
    aspect-ratio: auto;
    height: 100%;
    min-height: 130px;
}

.nito-crono .nito-crono__foto--pieza img {
    padding: 10px;
}

/* El logo es blanco con la M azul: va sobre el negro del pie. */
.nito-crono .nito-crono__foto--logo {
    background: #111111;
}

.nito-crono .nito-crono__foto--logo img {
    object-fit: contain;
    padding: 22px;
}

.nito-crono__cuerpo {
    padding: 14px 18px 16px;
}

.nito-crono .nito-crono__titulo {
    margin-bottom: 6px;
    font-size: 16px;
}

.nito-crono .nito-crono__texto {
    font-size: 14.5px;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .nito-historia .nito-crono {
        margin-bottom: 32px;
    }

    .nito-crono__hito::before {
        top: 4px;
    }

    .nito-crono__marca {
        padding-top: 0;
        font-size: 18px;
    }

    .nito-crono__tarjeta {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .nito-crono .nito-crono__foto,
    .nito-crono .nito-crono__foto--retrato {
        min-height: 96px;
    }
}

/* Zigzag: el año va encima de su tarjeta (no en el lado libre) y cada hito
   sube para encajar junto al anterior, que está en el otro lado. Así la
   mitad vacía de cada fila deja de ocupar alto. Solo desde 901 px. */
@media (min-width: 901px) {
    .nito-historia .nito-crono {
        max-width: 1040px;
    }

    .nito-historia .nito-crono__hito {
        grid-template-rows: auto auto;
        column-gap: 56px;
        margin-bottom: 0;
    }

    .nito-historia .nito-crono__hito + .nito-crono__hito {
        margin-top: -70px;
    }

    .nito-historia .nito-crono__hito::before {
        top: 8px;
    }

    .nito-historia .nito-crono__marca {
        grid-row: 1;
        grid-column: 1;
        padding: 0 0 8px;
        font-size: 18px;
        text-align: right;
    }

    .nito-historia .nito-crono__hito:nth-child(even) .nito-crono__marca {
        grid-column: 2;
        text-align: left;
    }

    .nito-historia .nito-crono__tarjeta {
        grid-row: 2;
    }
}

/* Móvil: la miniatura lateral dejaba el texto en ~190 px de ancho. Foto
   arriba a lo ancho; el retrato de Carlos entero (contain), sin recortar. */
@media (max-width: 900px) {
    .nito-historia .nito-crono__tarjeta {
        display: block;
    }

    .nito-historia .nito-crono .nito-crono__foto {
        height: auto;
        min-height: 0;
        aspect-ratio: 2 / 1;
    }

    .nito-historia .nito-crono .nito-crono__foto--retrato {
        background: #e9eef3;
    }

    .nito-historia .nito-crono .nito-crono__foto--retrato img {
        object-fit: contain;
    }
}

/* La fecha va DENTRO de la tarjeta, encima del título (Carla, 2026-10-15:
   flotando entre tarjetas se pisaban y no se sabía de cuál eran). El punto
   de la línea se alinea con la fecha. Anula la colocación en rejilla de las
   reglas anteriores. */
.nito-historia .nito-crono .nito-crono__marca,
.nito-historia .nito-crono .nito-crono__hito:nth-child(even) .nito-crono__marca {
    display: inline-block;
    grid-row: auto;
    grid-column: auto;
    margin: 0 0 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #e6edfc;
    color: #0018a9;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.4;
    text-align: left;
}

@media (min-width: 901px) {
    .nito-historia .nito-crono__hito {
        grid-template-rows: auto;
    }

    .nito-historia .nito-crono__tarjeta {
        grid-row: 1;
    }

    .nito-historia .nito-crono__hito::before {
        top: 18px;
    }

    .nito-historia .nito-crono__hito + .nito-crono__hito {
        margin-top: -60px;
    }
}

@media (max-width: 900px) {
    .nito-historia .nito-crono__hito {
        row-gap: 0;
    }

    .nito-historia .nito-crono__hito::before {
        top: 18px;
    }
}

/* Hover de la cronología: la tarjeta da un saltito y se le pone el borde
   azul corporativo; su fecha en la línea se oscurece a la vez. */
.nito-historia .nito-crono__tarjeta {
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.nito-historia .nito-crono__hito:hover .nito-crono__tarjeta {
    transform: translateY(-4px);
    border-color: #0018a9;
    box-shadow: 0 10px 24px -10px rgba(0, 24, 169, .35);
}

.nito-historia .nito-crono__marca {
    transition: background-color .2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .nito-historia .nito-crono__hito:hover .nito-crono__tarjeta {
        transform: none;
    }
}

/* Punto de la línea a la altura de la etiqueta de fecha (dentro de la
   tarjeta: padding 14px + mitad de la etiqueta ~11px - mitad del punto 9px). */
.nito-historia .nito-crono__hito::before,
.nito-historia .nito-crono .nito-crono__hito::before {
    top: 17px;
}

/* Fecha centrada en el bloque de texto de la tarjeta (Carla, 2026-10-15). */
.nito-historia .nito-crono .nito-crono__marca,
.nito-historia .nito-crono .nito-crono__hito:nth-child(even) .nito-crono__marca {
    display: table;
    margin: 0 auto 8px;
}


/* ==================================================================
   PÁGINA 404 (404.php, 2026-10-15)
   ==================================================================
   Al estilo de la de Balay (elegida por Carla): titular centrado y dos
   columnas, mosaico «roto» a la izquierda y enlaces a la derecha. El
   mosaico es la foto 10985 (módulo de coche + módulo de moto, 5:4)
   repartida en 5 x 4 baldosas cuadradas; cada una enseña su trozo con
   background-position y unas pocas son color de marca, un hueco o el
   testigo ámbar del ABS. Sin !important. */
.nito-404 {
    max-width: 1040px;
    margin: 0 auto;
    padding: 24px 0 16px;
}

.nito-404 .nito-404__titulo {
    margin: 0 0 40px;
    color: #0018a9;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.nito-404__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.nito-404__mosaico {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.nito-404__pieza {
    display: block;
    aspect-ratio: 1 / 1;
    /* La foto es de fondo blanco: multiply la tiñe del gris de la baldosa
       para que la rejilla se vea entera, también donde no hay pieza. */
    background-color: #e9eef5;
    background-blend-mode: multiply;
    background-image: var(--nito-404-foto, none);
    background-size: 500% 400%;
    background-repeat: no-repeat;
}

.nito-404__pieza--azul,
.nito-404__pieza--claro,
.nito-404__pieza--negro,
.nito-404__pieza--hueco,
.nito-404__pieza--testigo {
    background-image: none;
}

.nito-404__pieza--azul {
    background-color: #0018a9;
}

.nito-404__pieza--claro {
    background-color: #e6edfc;
}

.nito-404__pieza--negro {
    background-color: #111111;
}

.nito-404__pieza--hueco {
    background-color: transparent;
}

/* El testigo del cuadro: ámbar sobre negro, como encendido. */
.nito-404__pieza--testigo {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #111111;
    color: #f59e0b;
}

.nito-404__pieza--testigo svg {
    width: 78%;
    height: auto;
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, .55));
}

.nito-404__texto p {
    margin: 0 0 16px;
    color: #334155;
    font-size: 16px;
    line-height: 1.6;
}

.nito-404__texto .nito-404__vaya {
    margin-bottom: 8px;
    color: #0f172a;
    font-size: 20px;
    font-weight: 800;
}

.nito-404__enlaces {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.nito-404__enlaces li {
    margin: 0 0 8px;
}

.nito-404__enlaces a {
    color: #0018a9;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.nito-404__enlaces a::before {
    content: "›";
    display: inline-block;
    width: 18px;
    font-size: 20px;
    line-height: 1;
}

.nito-404__enlaces a:hover,
.nito-404__enlaces a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nito-404__buscador {
    display: flex;
    gap: 8px;
    padding: 5px;
    border: 1px solid #dbe3f5;
    border-radius: 12px;
    background: #ffffff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.nito-404__buscador:focus-within {
    border-color: #0018a9;
    box-shadow: 0 0 0 3px rgba(0, 24, 169, .12);
}

.nito-404__buscador .nito-404__campo {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    color: #0f172a;
    font-size: 15px;
}

.nito-404__buscador .nito-404__campo:focus {
    outline: none;
}

/* <button>: colores de reposo repetidos en :focus antes que :hover. */
.nito-404__buscador .nito-404__boton,
.nito-404__buscador .nito-404__boton:focus {
    padding: 9px 20px;
    border: 0;
    border-radius: 9px;
    background: #0018a9;
    box-shadow: none;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.nito-404__buscador .nito-404__boton:hover,
.nito-404__buscador .nito-404__boton:active {
    background: #000000;
    color: #ffffff;
}

@media (max-width: 900px) {
    .nito-404 .nito-404__titulo {
        margin-bottom: 28px;
        font-size: 24px;
    }

    .nito-404__cuerpo {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .nito-404__mosaico {
        max-width: 460px;
        margin: 0 auto;
        width: 100%;
    }
}

/* El «404» de fondo, en silueta azul clara detrás del contenido, y la
   etiqueta «Error 404» sobre el titular (Carla, 2026-10-15). */
.nito-404 {
    position: relative;
    isolation: isolate;
}

.nito-404 .nito-404__fondo {
    position: absolute;
    top: -10px;
    left: 50%;
    z-index: -1;
    margin: 0;
    transform: translateX(-50%);
    color: #e6edfc;
    font-size: clamp(180px, 34vw, 420px);
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: 1;
    opacity: .4; /* antes .7: que no estorbe la lectura (Carla) */
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.nito-404 .nito-404__etiqueta {
    margin: 0 0 8px;
    color: #0018a9;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .16em;
    text-align: center;
    text-transform: uppercase;
}

/* Foto de autor en cuadrado redondeado, no en círculo (Carla, 2026-10-15): el
   logo de la camisa de Miku cae en la esquina inferior derecha de la foto y
   el círculo la cortaba. Se encuadra por abajo para que entre entero. */
.nito-autor__foto img {
    border-radius: 24px;
    object-position: center bottom;
}

.nito-firma__foto img {
    border-radius: 14px;
    object-position: center bottom;
}

/* «Seguir leyendo» de las tarjetas del blog (Carla, 2026-10-15). Kadence
   pinta a:focus y a:active (0-1-1) con --global-palette-highlight-alt, casi
   blanco, y le ganaba a .nito-articulos__boton (0-1-0): tras el clic el texto
   desaparecía sobre el fondo claro. a.clase:estado (0-2-1) gana. Hover pedido:
   texto azul corporativo, fondo blanco y borde azul. El :focus va antes que
   :hover/:active a propósito (ver CLAUDE.md, botones). */
a.nito-articulos__boton:focus {
    background: #fbfcfe;
    color: #0018a9;
    border-color: rgba(0, 24, 169, .15);
}

a.nito-articulos__boton:hover,
a.nito-articulos__boton:active {
    background: #ffffff;
    color: #0018a9;
    border-color: #0018a9;
}

a.nito-articulos__boton:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 2px;
}

/* Aviso bajo la ampliación de garantía: el seguro sube con ella (2026-10-15). */
.nito-garantia-ampliada__seguro {
    display: block;
    margin-top: 2px;
    color: #475569;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
}

/* Totales del carrito (Carla, 2026-10-15): el seguro y la garantía ampliada en
   negrita como el resto de conceptos, y la fila que cambia al marcar o
   desmarcar algo se resalta con el mismo destello azul que el precio al
   cambiar de variación (nito-precio-cambia). La clase la pone nito_seguro_js(). */
.woocommerce .cart_totals .fee th {
    font-weight: 700;
}

.woocommerce .cart_totals tr.nito-totales--cambia th,
.woocommerce .cart_totals tr.nito-totales--cambia td {
    animation: nito-fila-cambia 1.8s ease-out;
}

/* Como nito-precio-cambia pero solo el fondo: el halo de box-shadow se
   cortaría en cada celda de la tabla. */
@keyframes nito-fila-cambia {
    0%   { background-color: rgba(0, 24, 169, .16); }
    100% { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce .cart_totals tr.nito-totales--cambia th,
    .woocommerce .cart_totals tr.nito-totales--cambia td {
        animation: none;
    }
}

/* Entradas: menos aire entre la autoría («Por … · fecha») y el resumen
   (Carla, 2026-10-15). Sumaban 56 px: 32 de la cabecera, 32 del contenido
   y 24 del .nm-resumen. Ahora ~20. */
body.single-post .entry-content-wrap .entry-header {
    margin-bottom: 20px;
}

body.single-post .entry-content-wrap .entry-content.single-content {
    margin-top: 0;
}

body.single-post .entry-content-wrap .single-content > .nm-resumen:first-child {
    margin-top: 0;
}

/* Kadence Blocks 3.8.0 (2026-10-15) añadió a todos sus títulos
   .wp-block-kadence-advancedheading { border-radius: var(--kb-heading-radius, …, 0) },
   en línea y detrás de esta hoja: con la misma especificidad, ganaba y dejaba las
   etiquetas «— SOBRE NITO MOTOR» con las esquinas rectas. Dar valor a su
   variable no basta: Kadence la fija en esa misma regla. Las dos clases juntas
   (0-2-0) ganan sin !important. */
.wp-block-kadence-advancedheading.etiqueta-superior {
    padding: 6px 18px; /* también se lo quitaba (0): en móvil sigue mandando el 6px 12px !important */
    border-radius: 10px;
}

/* La misma versión dejaba transparente el fondo de la fila de cabecera de las
   páginas de marca (.nito-cabecera-abs { background: #ffffff }, 0-1-0). */
.kb-row-layout-wrap.nito-cabecera-abs {
    background-color: #ffffff;
}

/* «SOLICITAR REPARACIÓN» de los servicios de la home: hover a negro como el
   resto de botones (Carla, 2026-10-15; antes solo oscurecía el azul a #001480).
   a.clase:estado (0-2-1) para ganar a a:focus/a:active de Kadence (0-1-1),
   que pintaría el texto casi blanco tras el clic; :focus antes que :hover. */
a.nito-repmod__boton:focus {
    background: #0018a9;
    color: #ffffff;
}

a.nito-repmod__boton:hover,
a.nito-repmod__boton:active {
    background: #000000;
    color: #ffffff;
}

a.nito-repmod__boton:focus-visible {
    outline: 2px solid #0018a9;
    outline-offset: 3px;
}

/* ==========================================================================
   Cabecera de escritorio en portátil (1025-1499 px) — Carla, 2026-10-16
   ==========================================================================
   El menú va en la columna central de Kadence (1fr auto 1fr), así que cada lado
   recibe la misma mitad del espacio sobrante. En el derecho no cabían «Tu taller
   más cercano» y los iconos, y el CSS adicional del Personalizador (custom_css
   3463) le pone a .nito-taller-cercano margin-left:-40px !important: el enlace
   se metía 40 px dentro del menú y se partía en dos o tres líneas, de 1100 a
   1440 px. Aquí:
   - la fila pasa a logo | menú (el espacio que quede) | lado derecho, para que
     el lado derecho tome lo que necesita;
   - se anula el margen negativo (#main-header sube la especificidad sobre la
     regla !important del Personalizador);
   - hasta 1365 px el menú baja a 16 px con menos relleno;
   - hasta 1199 px «Tu taller más cercano» queda solo con su chincheta (el texto
     sigue en el enlace para lectores de pantalla).
   Por debajo de 1025 px manda la cabecera móvil y nada de esto aplica. */
@media (min-width: 1025px) and (max-width: 1499px) {
    #main-header .site-main-header-inner-wrap.site-header-row-center-column {
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 24px;
    }
    #main-header .nito-taller-cercano {
        margin-left: 0 !important;
        margin-right: 20px !important;
    }
    #main-header .nito-taller-enlace {
        white-space: nowrap;
    }
}
@media (min-width: 1025px) and (max-width: 1365px) {
    #main-header .main-navigation .primary-menu-container > ul > li.menu-item > a {
        font-size: 16px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}
@media (min-width: 1025px) and (max-width: 1199px) {
    #main-header .nito-taller-enlace {
        font-size: 0 !important;
    }
    #main-header .nito-taller-enlace img.emoji {
        width: 22px !important;
        height: 22px !important;
        margin: 0 !important;
    }
}

/* Checkout, paso 3: aviso de componente a pedir según el código de error (2026-10-16) */
.nito-aviso-pieza {
    margin: 6px 0 0;
    padding: 8px 12px;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    background: #fff7e6;
    color: #3b2606;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
}
.nito-aviso-pieza[hidden] {
    display: none;
}

/* Pie: iconos de redes sociales bajo la presentación (2026-10-16) */
.nito-redes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.site-footer .nito-redes .nito-redes__enlace {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    color: #ffffff;
    text-decoration: none;
    transition: background-color .2s, border-color .2s;
}
.site-footer .nito-redes .nito-redes__enlace:hover,
.site-footer .nito-redes .nito-redes__enlace:focus-visible {
    background-color: #0018a9;
    border-color: #0018a9;
    color: #ffffff;
}
.nito-redes__icono {
    display: block;
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   Selector de idioma (2026-10-16)
   ==========================================================================
   Escritorio: botón (bandera + código) al final del menú principal, entre
   «Blog» y «Tu taller más cercano», con lista desplegable. Móvil: fila de
   banderas arriba del todo del menú desplegable. */
.nito-idiomas__bandera {
    display: block;
    flex: 0 0 auto;
    width: 22px;
    height: 15px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

/* --- Escritorio --- */
.main-navigation .nito-idiomas--escritorio {
    position: relative;
    display: flex;
    align-items: center;
}
.main-navigation .nito-idiomas--escritorio .nito-idiomas__boton,
.main-navigation .nito-idiomas--escritorio .nito-idiomas__boton:focus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 0 6px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: #ffffff;
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .03em;
    cursor: pointer;
}
.main-navigation .nito-idiomas--escritorio .nito-idiomas__boton:hover,
.main-navigation .nito-idiomas--escritorio.is-abierto .nito-idiomas__boton {
    border-color: #ffffff;
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}
.main-navigation .nito-idiomas--escritorio .nito-idiomas__boton:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}
.nito-idiomas__flecha {
    transition: transform .2s;
}
.nito-idiomas--escritorio.is-abierto .nito-idiomas__flecha {
    transform: rotate(180deg);
}
.main-navigation .nito-idiomas--escritorio .nito-idiomas__lista {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100;
    display: none;
    min-width: 190px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .25);
}
.main-navigation .nito-idiomas--escritorio.is-abierto .nito-idiomas__lista {
    display: block;
}
.main-navigation .nito-idiomas--escritorio .nito-idiomas__opcion a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 6px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
.main-navigation .nito-idiomas--escritorio .nito-idiomas__opcion a:hover,
.main-navigation .nito-idiomas--escritorio .nito-idiomas__opcion a:focus-visible {
    background: #eef1fb;
    color: #0018a9;
}
.main-navigation .nito-idiomas--escritorio .nito-idiomas__opcion.is-actual a {
    color: #0018a9;
    font-weight: 700;
}
.main-navigation .nito-idiomas--escritorio .nito-idiomas__opcion .nito-idiomas__codigo {
    margin-left: auto;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}
@media (min-width: 1025px) and (max-width: 1365px) {
    .main-navigation .nito-idiomas--escritorio .nito-idiomas__boton,
    .main-navigation .nito-idiomas--escritorio .nito-idiomas__boton:focus {
        margin-left: 2px;
        padding: 5px 6px;
        gap: 4px;
    }
}

/* --- Móvil (menú desplegable) --- */
.mobile-navigation .nito-idiomas--movil {
    padding: 4px 0 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.mobile-navigation .nito-idiomas--movil .nito-idiomas__lista {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mobile-navigation .nito-idiomas--movil .nito-idiomas__opcion a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 9px 2px 7px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}
.mobile-navigation .nito-idiomas--movil .nito-idiomas__opcion.is-actual a {
    border-color: #ffffff;
    background: rgba(255, 255, 255, .1);
}
.mobile-navigation .nito-idiomas--movil .nito-idiomas__nombre {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.mobile-navigation .nito-idiomas--movil .nito-idiomas__bandera {
    width: 26px;
    height: 17px;
}
.nito-idiomas .nito-idiomas__opcion a,
.nito-idiomas .nito-idiomas__opcion a:hover {
    text-decoration: none;
}

/* Pie: información de la subvención FEDER (2026-10-16). Fila horizontal entre las
   columnas y la barra inferior (nito_pie_subvencion() en kadence_bottom_footer).
   «a.» hace falta para ganar a .site-footer a de Kadence. */
.nito-subvencion-fila {
    max-width: var(--global-content-width, 1290px);
    margin: 0 auto;
    padding: 0 var(--global-content-edge-padding, 1.5rem);
}
.site-footer .nito-subvencion-fila .nito-subvencion {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 0 20px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
}
.nito-subvencion__logos {
    flex: 0 0 200px;
    padding: 4px 8px;
    background: #ffffff;
    border-radius: 4px;
}
.nito-subvencion__logos img {
    display: block;
    width: 100%;
    height: auto;
}
.nito-subvencion__texto {
    font-size: 11.5px;
    line-height: 1.9;
}
.site-footer .nito-subvencion-fila a.nito-subvencion__logos {
    transition: box-shadow .2s;
}
.site-footer .nito-subvencion-fila a.nito-subvencion__logos:hover,
.site-footer .nito-subvencion-fila a.nito-subvencion__logos:focus-visible {
    box-shadow: 0 0 0 2px #8fa3ff;
}
@media (max-width: 767px) {
    .site-footer .nito-subvencion-fila .nito-subvencion {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .nito-subvencion__logos {
        flex-basis: auto;
        width: 100%;
        max-width: 230px;
    }
}
/* Prueba (2026-10-16): texto primero y logos a la derecha. Para volver, borrar esta regla. */
@media (min-width: 768px) {
    .site-footer .nito-subvencion-fila .nito-subvencion {
        flex-direction: row-reverse;
        justify-content: center;
        gap: 32px;
    }
    /* Texto centrado en dos líneas parecidas (sin hueco al final de la segunda),
       a la altura de la tarjeta de logos; el conjunto va centrado en el pie. */
    .nito-subvencion__texto {
        flex: 0 1 auto;
        max-width: 820px;
        text-align: center;
        text-wrap: balance;
    }
}

/* ==========================================================================
   Formulario de contacto (/contacto/, kadence_form 2773) con el aspecto del
   resto de formularios de la web: tarjeta blanca, campos con borde fino,
   etiquetas pequeñas en negrita y botón píldora azul. Va colgado del grupo
   .nito-form-contacto que envuelve el bloque en la página (2026-10-16): las
   reglas de Kadence son .wp-block-kadence-advanced-form2773-cpt-id
   .kb-advanced-form input[…] (0-3-1), y estas llegan a 0-4-1.
   ========================================================================== */
.nito-form-contacto {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 30px -18px rgba(10, 15, 44, .25);
}
.nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}
.nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form > * {
    grid-column: 1 / -1;
    margin: 0;
}
.nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form > .wp-block-kadence-advanced-form-text,
.nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form > .wp-block-kadence-advanced-form-email,
.nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form > .wp-block-kadence-advanced-form-telephone {
    grid-column: auto;
}
.nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form .kb-adv-form-field > label,
.nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form .kb-adv-form-field > .kb-adv-form-label {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #0a0f2c;
}
.nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form .kb-adv-form-field input[type="text"],
.nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form .kb-adv-form-field input[type="email"],
.nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form .kb-adv-form-field input[type="tel"],
.nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form .kb-adv-form-field input[type="number"],
.nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form .kb-adv-form-field textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.35;
    color: #0a0f2c;
    background: #ffffff;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
.nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form .kb-adv-form-field textarea {
    min-height: 140px;
}
.nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form .kb-adv-form-field input:focus,
.nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form .kb-adv-form-field textarea:focus {
    outline: none;
    border-color: #0018a9;
    box-shadow: 0 0 0 3px rgba(0, 24, 169, .12);
}
.nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form .kb-adv-form-field .kb-adv-form-help {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
}
.nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form .wp-block-kadence-advanced-form-number input[type="number"] {
    max-width: 180px;
}
.nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form .wp-block-kadence-advanced-form-submit {
    margin-top: 4px;
}
.nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form .kb-adv-form-submit-button.kb-btn-global-fill {
    flex: 0 0 auto;
    width: auto;
    min-width: 180px;
    padding: 12px 30px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background: #0018a9;
    border: 2px solid #0018a9;
    border-radius: 22px;
    box-shadow: none;
}
.nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form .kb-adv-form-submit-button.kb-btn-global-fill:focus {
    color: #ffffff;
    background: #0018a9;
    box-shadow: none;
}
.nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form .kb-adv-form-submit-button.kb-btn-global-fill:hover,
.nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form .kb-adv-form-submit-button.kb-btn-global-fill:active {
    color: #ffffff;
    background: #000000;
    border-color: #000000;
}
@media (max-width: 767px) {
    .nito-form-contacto {
        padding: 20px 16px;
        border-radius: 10px;
    }
    .nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .nito-form-contacto .wp-block-kadence-advanced-form .kb-advanced-form .kb-adv-form-submit-button.kb-btn-global-fill {
        width: 100%;
    }
}

/* Sub-barra en móvil: botón de plegar y estado plegado (nito_subbarra_movil_js,
   2026-10-16). En escritorio el botón no se ve. */
.nito-subbarra .nito-subbarra__plegar {
    display: none;
}
@media (max-width: 767px) {
    .nito-subbarra__interior {
        position: relative;
    }
    .nito-subbarra .nito-subbarra__plegar {
        position: absolute;
        top: 10px;
        right: var(--global-content-edge-padding, 1.5rem);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
        color: #0018a9;
        background: #ffffff;
        border: 0;
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
        transition: transform .2s;
    }
    .nito-subbarra .nito-subbarra__plegar:focus {
        color: #0018a9;
        background: #ffffff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    }
    .nito-subbarra .nito-subbarra__plegar svg {
        transform: rotate(180deg);
        transition: transform .2s;
    }
    .nito-subbarra.nito-subbarra--plegada .nito-subbarra__plegar svg {
        transform: none;
    }
    .nito-subbarra .nito-subbarra__titulo {
        padding-right: 44px;
        min-height: 34px;
        display: flex;
        align-items: center;
    }
    .nito-subbarra.nito-subbarra--plegada .nito-subbarra__titulo {
        cursor: pointer;
    }
    .nito-subbarra.nito-subbarra--plegada .nito-subbarra__tipos,
    .nito-subbarra.nito-subbarra--plegada .nito-subbarra__form,
    .nito-subbarra.nito-subbarra--plegada .nito-subbarra__enlace {
        display: none;
    }
    .nito-subbarra.nito-subbarra--plegada .nito-subbarra__interior {
        min-height: 0;
    }
    /* Las sugerencias no pasan de media pantalla: con el campo arriba, quedan
       por encima del teclado. */
    .nito-subbarra .nm-sug {
        max-height: 45vh;
        overflow-y: auto;
    }
}

/* Sección de tipos de módulo bajo el listado de modelos (nito_tipos_modulo_seccion,
   2026-10-16). Las tarjetas son las de .nito-abs-gen; aquí solo el titular. */
.nito-tipos-modulo {
    max-width: 1100px;
    margin: 64px auto 0;
}
.nito-tipos-modulo .nito-tipos-modulo__titulo {
    max-width: 764px;
    margin: 0 auto 8px;
    font-size: 25px;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
}
.nito-tipos-modulo__titulo mark {
    color: #0018a9;
    background: transparent;
}
.nito-tipos-modulo .nito-tipos-modulo__intro {
    max-width: 764px;
    margin: 0 auto 24px;
    font-size: 14px;
    text-align: center;
}
@media (max-width: 767px) {
    .nito-tipos-modulo {
        margin-top: 48px;
    }
    .nito-tipos-modulo .nito-tipos-modulo__titulo {
        font-size: 22px;
    }
}

/* Servicios de la home en móvil: aire entre la lista de ventajas y la foto
   (estaban pegadas al apilarse las dos columnas; Carla, 2026-10-19). */
@media (max-width: 768px) {
    .nito-repmod__grid {
        row-gap: 28px;
    }
}

/* El ancla #nito-producto no queda bajo la cabecera fija al saltar. */
#nito-producto {
    scroll-margin-top: 140px;
}

/* .nito-abs-gen con dos tarjetas (tipos de módulo de una marca): las dos
   centradas, sin la tercera columna vacía a la derecha (2026-10-19). */
@media (min-width: 1024px) {
    .nito-abs-gen.nito-abs-gen--dos .nito-abs-gen__lista {
        grid-template-columns: repeat(2, minmax(0, 360px));
        justify-content: center;
    }
}

/* Resumen del pedido en el pago: columna Total de ancho fijo y separada del
   producto, para que un nombre largo («MODULE ABS BMW SÉRIE K») baje de línea
   en vez de meterse bajo el precio. Igual en todos los idiomas (2026-10-19). */
.nito-checkout .woocommerce-checkout-review-order-table {
    table-layout: fixed;
    width: 100%;
}
.nito-checkout .woocommerce-checkout-review-order-table thead th.product-total,
.nito-checkout .woocommerce-checkout-review-order-table td.product-total {
    width: 132px;
    padding-left: 16px;
    text-align: right;
    white-space: nowrap;
}
.nito-checkout .woocommerce-checkout-review-order-table td.product-name {
    min-width: 0;
}
.nito-checkout .woocommerce-checkout-review-order-table .nito-resumen__nombre {
    flex: 1 1 0;
    overflow-wrap: anywhere;
}

/* Cabecera: «Tu taller más cercano» solo con la chincheta cuando no cabe junto al
   selector de idioma (lo decide nito_cabecera_taller_compacto_js; 2026-10-20). */
#main-header.nito-cabecera--taller-compacto .nito-taller-enlace {
    font-size: 0 !important;
}
#main-header.nito-cabecera--taller-compacto .nito-taller-enlace img.emoji {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
}