/* ==========================================================================
   brand-vip.css — capa de marca y legibilidad de blackbutton.vip
   --------------------------------------------------------------------------
   Se carga la ULTIMA, despues de style.css y responsive.css. No modifica
   ningun fichero del tema Nexelit: todo lo de aqui son anulaciones.
   Para revertir por completo, basta con quitar la linea que la carga en
   frontend/partials/header.blade.php.

   La tipografia y el color de marca vienen de `static_options`
   (heading_font_family, body_font_family, site_color). Aqui solo se ajustan
   tamanos, pesos, espaciado y los casos en los que el tema deja texto
   ilegible.
   ========================================================================== */

:root {
    --bb-tinta: #141414;      /* titulares                                   */
    --bb-texto: #3d3d3d;      /* texto corrido: 10.4 sobre blanco            */
    --bb-suave: #6f6a64;      /* metadatos: 5.2 sobre blanco                 */
    --bb-oro: #B8893B;        /* filetes, bordes e iconos                    */
    --bb-bronce: #8C6D1F;     /* el dorado cuando ES texto: 4.9 sobre blanco */
    --bb-linea: #e6e2db;
    --bb-crema: #faf8f5;

    /* La tipografia NO se toca aqui: Nunito es una eleccion del cliente y se
       administra desde los ajustes de tipografia del admin. Estos dos alias
       solo reenvian a los tokens del tema, para que las reglas de esta hoja
       sigan cualquier fuente que se configure alli. */
    --bb-titular: var(--heading-font);
    --bb-texto-fuente: var(--body-font);

    /* `--main-color-one` venia en #47ccf1, el cian de la demo de Nexelit. El
       bronce da 4.9 sobre blanco y 4.9 en blanco sobre el, asi que vale igual
       de texto que de fondo de boton; el dorado #B8893B se queda solo para
       filetes y bordes, donde el contraste no aplica. */
    --main-color-one: #8C6D1F;
}

/* ==========================================================================
   1. LEGIBILIDAD
   El tema define `--paragraph-color: #d9d9d9`, un gris pensado para el texto
   sobre las fotos de cabecera. Todo lo que no lo sobrescriba lo hereda, y
   sobre fondo blanco da un contraste de 1.41: invisible. Se corrige solo en
   las zonas de fondo claro; las cabeceras con foto se dejan intactas.
   ========================================================================== */

.blog-details-item .content-area,
.blog-details-item .content-area p,
.blog-details-item .content-area li,
.blog-details-item .content-area blockquote,
.blog-classic-item-01 .content p,
.blog-content-area p,
.blog-details-content-area p {
    color: var(--bb-texto);
}

/* Barra lateral: enlaces de categorias, archivos y entradas recientes. */
.widget-area,
.widget-area p,
.widget-area li,
.widget-area li a,
.widget-area .widget ul li a,
.widget-area .recent-post-item .content .title a {
    color: var(--bb-texto);
}

.widget-area li a:hover,
.widget-area .widget ul li a:hover {
    color: var(--bb-bronce);
}

/* Paginacion: con 34 paginas de blog, invisible equivale a roto. */
.pagination .page-link,
.pagination-wrapper .page-link {
    color: var(--bb-texto);
    border-color: var(--bb-linea);
}

.pagination .page-item.active .page-link,
.pagination-wrapper .page-item.active .page-link {
    background-color: var(--bb-tinta);
    border-color: var(--bb-tinta);
    color: #fff;
}

.pagination .page-link:hover,
.pagination-wrapper .page-link:hover {
    color: var(--bb-bronce);
    border-color: var(--bb-oro);
    background-color: transparent;
}

.pagination .page-item.disabled .page-link {
    color: #8f8a83;
}

/* Etiquetas del pie del post. */
.blog-details-footer .left .tags li a {
    color: var(--bb-texto);
}

/* Paginas de servicio: la descripcion completa heredaba `--paragraph-color`,
   asi que el texto de las seis paginas de servicio salia a 1.41 sobre blanco. */
.service-description,
.service-description p,
.service-description div,
.service-description span,
.service-description li {
    color: var(--bb-texto);
}

/* Etiquetas «Email» y «Telefono» de la barra superior, presente en todas las
   paginas: el rotulo salia en el mismo gris y solo se leia el dato. */
.construction-info-list .content .subtitle,
.left-content-wrap .construction-single-info-list-item .content .subtitle {
    color: var(--bb-suave);
}

/* Metadatos: autor, fecha y categoria. */
.post-meta li,
.post-meta li a,
.blog-classic-item-01 .content .post-meta li,
.blog-classic-item-01 .content .post-meta li a {
    color: var(--bb-suave);
}

.post-meta li a:hover {
    color: var(--bb-bronce);
}

/* ==========================================================================
   2. TIPOGRAFIA
   Solo el uso de mayusculas. La familia y los pesos son los del tema.
   ========================================================================== */

/* El tema pone `capitalize` en los titulos, que convierte
   «chofer privado en el Circuit» en «Chofer Privado En El Circuit». */
.page-title,
.breadcrumb-area .page-title,
.section-title .title,
.blog-classic-item-01 .content .title,
.blog-details-item .entry-content .title,
.single-blog-grid-02 .content .title {
    text-transform: none;
}

/* ==========================================================================
   3. LISTADO DEL BLOG
   ========================================================================== */

.blog-content-area .blog-classic-item-01 {
    border-bottom: 1px solid var(--bb-linea);
    padding-bottom: 44px;
}

.blog-content-area .blog-classic-item-01.margin-bottom-60 {
    margin-bottom: 52px;
}

.blog-content-area .blog-classic-item-01:last-of-type {
    border-bottom: 0;
}

.blog-classic-item-01 .thumbnail {
    overflow: hidden;
    border-radius: 2px;
}

.blog-classic-item-01 .thumbnail img {
    width: 100%;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-classic-item-01:hover .thumbnail img {
    transform: scale(1.035);
}

.blog-classic-item-01 .content {
    padding-top: 26px;
}

/* La categoria pasa a rotulo en versalitas, el recurso mas barato para que
   algo parezca editorial en vez de un boton mas. */
.blog-classic-item-01 .content .post-meta .cats a,
.blog-details-item .post-meta .cats a {
    font-family: var(--bb-texto-fuente);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bb-bronce);
}

.blog-classic-item-01 .content .post-meta .cats i,
.blog-classic-item-01 .content .post-meta li i {
    color: var(--bb-oro);
}

.blog-classic-item-01 .content .title {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.24;
    margin-bottom: 14px;
}

.blog-classic-item-01 .content .title a {
    color: var(--bb-tinta);
    background-image: linear-gradient(var(--bb-oro), var(--bb-oro));
    background-repeat: no-repeat;
    background-size: 0 1px;
    background-position: 0 100%;
    transition: background-size 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-classic-item-01 .content .title a:hover {
    color: var(--bb-tinta);
    background-size: 100% 1px;
}

.blog-classic-item-01 .content p {
    font-size: 15.5px;
    line-height: 1.72;
    margin-bottom: 22px;
}

/* El boton negro macizo se sustituye por un enlace con filete dorado.
   `.boxed-btn` del tema trae `background:#000 !important` y `width:100%`,
   asi que aqui hace falta `!important` para ganarle. */
.blog-classic-item-01 .btn-wrapper .boxed-btn,
.blog-classic-item-01 .btn-wrapper .boxed-btn.reverse-color {
    background: transparent !important;
    color: var(--bb-tinta) !important;
    width: auto !important;
    min-width: 0 !important;
    border: 0;
    border-bottom: 1px solid var(--bb-oro);
    border-radius: 0;
    padding: 0 0 4px;
    height: auto;
    line-height: 1;
    font-family: var(--bb-texto-fuente);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.3s ease, border-color 0.3s ease;
}

/* El tema anima el boton con un pseudo-elemento que se desliza; sin fondo
   macizo solo dejaria una mancha. */
.blog-classic-item-01 .btn-wrapper .boxed-btn::before,
.blog-classic-item-01 .btn-wrapper .boxed-btn::after {
    display: none !important;
}

.blog-classic-item-01 .btn-wrapper .boxed-btn:hover,
.blog-classic-item-01 .btn-wrapper .boxed-btn.reverse-color:hover {
    background: transparent !important;
    color: var(--bb-bronce) !important;
    border-bottom-color: var(--bb-bronce);
}

/* --------------------------------------------------------------------------
   3.0 Titular de la portada del blog. El texto lo pone el admin
   (Blog Page Settings); si los tres campos estan vacios no se pinta nada.
   -------------------------------------------------------------------------- */

.blog-intro {
    max-width: 840px;
    margin: 0 auto 56px;
    text-align: center;
}

.blog-intro .kicker {
    display: block;
    font-family: var(--bb-texto-fuente);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bb-bronce);
}

/* Filete corto bajo el antetitulo: separa sin meter otra linea de texto. */
.blog-intro .kicker::after {
    content: "";
    display: block;
    width: 38px;
    height: 1px;
    margin: 15px auto 0;
    background: var(--bb-oro);
}

.blog-intro .title {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.18;
    color: var(--bb-tinta);
    margin: 18px 0 0;
}

.blog-intro .lead {
    max-width: 660px;
    margin: 18px auto 0;
    font-size: 17px;
    line-height: 1.75;
    color: var(--bb-texto);
}

/* --------------------------------------------------------------------------
   3.a Categorias en circulos, al estilo de las historias destacadas de
   Instagram. Cada circulo lleva la foto de la entrada mas reciente de su
   categoria; las que no tienen ninguna entrada no se pintan.
   -------------------------------------------------------------------------- */

/* La tira nunca se parte en varias filas: se desliza en horizontal, como las
   destacadas de Instagram. `width: max-content` + `margin: 0 auto` la centra
   mientras quepa y la deja pegada a la izquierda en cuanto desborda; centrarla
   con `justify-content` dejaria el primer circulo cortado e inalcanzable. */
.blog-category-circles {
    margin-bottom: 54px;
    padding-top: 6px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--bb-linea);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.blog-category-circles::-webkit-scrollbar {
    display: none;
}

.blog-category-circles-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: max-content;
    max-width: none;
    margin: 0 auto;
    gap: 26px;
}

.blog-category-circle {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 104px;
}

/* El aro es lo que da la lectura de "historia destacada": un hueco blanco de
   3 px entre el borde y la foto, como en Instagram. */
.blog-category-circle .ring {
    display: block;
    width: 90px;
    height: 90px;
    padding: 3px;
    border: 1px solid var(--bb-linea);
    border-radius: 999px;
    background: #fff;
    transition: border-color 0.35s ease, box-shadow 0.35s ease,
                transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-category-circle .img {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    overflow: hidden;
    background: var(--bb-crema);
}

.blog-category-circle .img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Respaldo para una categoria cuya entrada mas reciente no tenga imagen. */
.blog-category-circle .letter {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bb-titular);
    font-size: 26px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--bb-bronce);
}

.blog-category-circle.is-all .letter {
    font-size: 20px;
}

.blog-category-circle .name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 11px;
    font-family: var(--bb-texto-fuente);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    line-height: 1.34;
    text-align: center;
    text-transform: uppercase;
    color: var(--bb-texto);
    transition: color 0.3s ease;
}

.blog-category-circle:hover .ring {
    border-color: var(--bb-oro);
    transform: translateY(-3px);
}

.blog-category-circle:hover .img img {
    transform: scale(1.07);
}

.blog-category-circle:hover .name {
    color: var(--bb-bronce);
}

/* El doble filete marca la categoria que se esta viendo sin mover el aro. */
.blog-category-circle.is-active .ring {
    border-color: var(--bb-oro);
    box-shadow: 0 0 0 1px var(--bb-oro);
}

.blog-category-circle.is-active .name {
    color: var(--bb-bronce);
}

/* La tira de la home se desliza sola y se para al pasar el raton por encima o
   al tocarla. La pista lleva las categorias dos veces y la animacion recorre
   exactamente la mitad, asi que el fotograma final coincide con el inicial y el
   bucle no da el salto. Para que esa mitad sea exacta, la separacion entre
   circulos no puede venir de `gap` (que solo se pone ENTRE elementos, no
   detras del ultimo): va como `margin-right` en cada circulo. */
.blog-category-circles.is-marquee {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
    overflow: hidden;
}

.blog-category-circles.is-marquee .blog-category-circles-track {
    margin: 0;
    gap: 0;
    animation: bb-circulos-marquesina 55s linear infinite;
}

.blog-category-circles.is-marquee .blog-category-circle {
    margin-right: 26px;
}

@keyframes bb-circulos-marquesina {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.blog-category-circles.is-marquee:hover .blog-category-circles-track,
.blog-category-circles.is-marquee:focus-within .blog-category-circles-track,
.blog-category-circles.is-marquee.is-paused .blog-category-circles-track {
    animation-play-state: paused;
}

/* Quien ha pedido menos movimiento al sistema ve la tira quieta. */
@media (prefers-reduced-motion: reduce) {
    .blog-category-circles.is-marquee .blog-category-circles-track {
        animation: none;
    }
}

/* Franja de la home: hereda el fondo de la seccion del formulario, encima. */
.bb-home-circulos {
    padding-bottom: 110px;
}

/* --------------------------------------------------------------------------
   3.b Rejilla de tres columnas: tres en escritorio, dos en tableta y una en
   movil (las clases col-* del marcado). Anula el formato de ficha apilada a
   ancho completo que traen las reglas de arriba.
   -------------------------------------------------------------------------- */

.blog-grid-row {
    margin-left: -15px;
    margin-right: -15px;
}

.blog-grid-row > [class*="col-"] {
    display: flex;
}

.blog-content-area .blog-grid-row .blog-classic-item-01,
.blog-content-area .blog-grid-row .blog-classic-item-01.margin-bottom-60 {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 44px;
}

/* Misma caja 3:2 que el carrusel de relacionadas: las fotos del blog vienen
   con proporciones muy distintas y sin ella la rejilla queda escalonada. */
.blog-grid-row .blog-classic-item-01 .thumbnail {
    display: block;
    position: relative;
    padding-top: 66.66%;
    background: var(--bb-crema);
}

.blog-grid-row .blog-classic-item-01 .thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-grid-row .blog-classic-item-01 .content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding-top: 18px;
}

.blog-grid-row .blog-classic-item-01 .content .post-meta {
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.blog-grid-row .blog-classic-item-01 .content .title {
    font-size: 19px;
    line-height: 1.34;
    margin-bottom: 10px;
}

/* Titulares y entradillas de longitudes muy distintas descuadraban la fila:
   se recortan a un numero fijo de lineas y el enlace se ancla al fondo para
   que las tres columnas terminen a la misma altura. */
.blog-grid-row .blog-classic-item-01 .content .title a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-grid-row .blog-classic-item-01 .content p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14.5px;
    line-height: 1.7;
    margin-bottom: 18px;
}

.blog-grid-row .blog-classic-item-01 .btn-wrapper {
    margin-top: auto;
}

/* --------------------------------------------------------------------------
   3.c Circulo de la categoria del post, montado sobre el borde inferior de la
   cabecera. El margen negativo tiene que cancelar el `padding-top` de la
   seccion (100 px) ANTES de empezar a morder la foto.
   -------------------------------------------------------------------------- */

.blog-post-category-badge {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    margin: -142px 0 34px;
}

.blog-post-category-badge .blog-category-circle {
    width: auto;
    max-width: 180px;
}

/* Aqui el aro es dorado y macizo: el circulo no acompana a una fila, es el
   enlace. La sombra lo despega de la foto de cabecera. */
.blog-category-circle.is-solo .ring {
    width: 112px;
    height: 112px;
    padding: 4px;
    border: 2px solid var(--bb-oro);
    box-shadow: 0 12px 28px rgba(20, 20, 20, 0.22);
}

.blog-category-circle.is-solo .name {
    margin-top: 14px;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--bb-tinta);
}

.blog-category-circle.is-solo:hover .ring {
    border-color: var(--bb-bronce);
}

/* ==========================================================================
   4. PAGINA DEL POST
   ========================================================================== */

/* Foto destacada: se ve entera, nunca recortada.
   Las imagenes del blog son muy dispares —hay verticales de 1200x1600 y
   apaisadas de solo 640 px de ancho—, asi que estirarlas al ancho del
   contenedor dejaba las pequenas borrosas y las verticales por encima de los
   1400 px de alto. Con `width: auto` cada una se muestra a su tamano real,
   centrada, sin ampliar; el tope de alto solo interviene con las mas altas,
   que se reducen en proporcion (siguen viendose completas). */
.blog-details-item .thumb {
    text-align: center;
}

.blog-details-item .thumb img {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 78vh;
    border-radius: 2px;
}

.blog-details-item .entry-content {
    padding-top: 26px;
}

/* El texto va a ancho completo por peticion expresa. La linea sale larga
   (unos 120 caracteres), asi que el interlineado sube un poco para que el ojo
   no pierda el renglon. Para acotar la medida basta con devolver aqui un
   `max-width: 68ch`. */
.blog-details-item .content-area {
    font-size: 17px;
    line-height: 1.85;
}

.blog-details-item .content-area > p:first-of-type {
    font-size: 19px;
    line-height: 1.68;
    color: #2f2f2f;
}

.blog-details-item .content-area h2 {
    font-size: 27px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--bb-tinta);
    margin-top: 2.2em;
    margin-bottom: 0.55em;
}

.blog-details-item .content-area h3 {
    font-size: 21px;
    font-weight: 600;
    color: var(--bb-tinta);
    margin-top: 1.8em;
    margin-bottom: 0.5em;
}

.blog-details-item .content-area p {
    margin-bottom: 1.35em;
}

.blog-details-item .content-area ul,
.blog-details-item .content-area ol {
    margin: 0 0 1.5em 1.15em;
    padding-left: 0.6em;
}

.blog-details-item .content-area li {
    margin-bottom: 0.55em;
    padding-left: 0.25em;
}

.blog-details-item .content-area li::marker {
    color: var(--bb-oro);
}

.blog-details-item .content-area blockquote {
    border-left: 2px solid var(--bb-oro);
    margin: 2em 0;
    padding: 0.35em 0 0.35em 1.35em;
    font-style: italic;
    color: #2f2f2f;
}

.blog-details-item .content-area strong {
    font-weight: 600;
    color: var(--bb-tinta);
}

/* Pie del post: etiquetas como pastillas de borde fino.

   `display: block` en vez de la fila del tema: con cuatro o cinco etiquetas no
   quedaba sitio, las pastillas se partian en dos lineas y los iconos de
   compartir tambien. «Compartir» va debajo de «Etiquetas». */
.blog-details-footer {
    display: block;
    border-top: 1px solid var(--bb-linea);
    margin-top: 44px;
    padding-top: 26px;
}

.blog-details-footer .right {
    margin-top: 22px;
}

.blog-details-footer .left .tags li.title,
.blog-details-footer .right .social-share li.title {
    font-family: var(--bb-texto-fuente);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bb-suave);
}

.blog-details-footer .left .tags li a {
    background: transparent;
    border: 1px solid var(--bb-linea);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 12.5px;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.blog-details-footer .left .tags li a:hover {
    border-color: var(--bb-oro);
    color: var(--bb-bronce);
    background: transparent;
}

/* --------------------------------------------------------------------------
   Carrusel de publicaciones relacionadas
   -------------------------------------------------------------------------- */

.related-post-area {
    position: relative;
}

.related-post-area .section-title > .title,
.blog-category-area .section-title > .title {
    font-size: 23px;
    font-weight: 600;
    color: var(--bb-tinta);
    margin: 0;
}

/* Canalones entre piezas sin que la primera y la ultima se despeguen del borde. */
.related-post-area .related-news-carousel .slick-list {
    margin: 0 -12px;
}

.related-post-area .single-blog-grid-02 {
    margin: 0 12px;
}

/* Las miniaturas del blog vienen con proporciones distintas y el carrusel
   quedaba escalonado. La caja fija 3:2 y la imagen se recorta al centro. */
.related-post-area .single-blog-grid-02 .thumb {
    display: block;
    position: relative;
    padding-top: 66.66%;
    overflow: hidden;
    border-radius: 2px;
    background: var(--bb-crema);
}

.related-post-area .single-blog-grid-02 .thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.related-post-area .single-blog-grid-02:hover .thumb img {
    transform: scale(1.05);
}

.related-post-area .single-blog-grid-02 .content {
    padding-top: 16px;
}

.related-post-area .single-blog-grid-02 .content .date {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--bb-suave);
}

.related-post-area .single-blog-grid-02 .content .date i {
    margin-right: 5px;
    color: var(--bb-oro);
}

.single-blog-grid-02 .content .title {
    font-size: 17px;
    line-height: 1.34;
    font-weight: 600;
    margin: 0;
}

.single-blog-grid-02 .content .title a {
    color: var(--bb-tinta);
}

.single-blog-grid-02 .content .title a:hover {
    color: var(--bb-bronce);
}

/* Flechas arriba a la derecha, a la altura del titulo de la seccion.
   Slick solo anade `slick-arrow` a las flechas personalizadas: `slick-prev` y
   `slick-next` son de su marcado por defecto, asi que hay que posicionarlas
   por las clases propias. Y como `.slick-slider` es `position: relative`, el
   origen es el carrusel, no la seccion: de ahi el desplazamiento negativo. */
.related-post-area .prev-icon,
.related-post-area .next-icon {
    position: absolute;
    top: -62px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bb-linea);
    border-radius: 999px;
    background: #fff;
    color: var(--bb-tinta);
    cursor: pointer;
    z-index: 2;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.related-post-area .prev-icon:hover,
.related-post-area .next-icon:hover {
    border-color: var(--bb-oro);
    color: var(--bb-bronce);
}

.related-post-area .prev-icon {
    right: 42px;
}

.related-post-area .next-icon {
    right: 0;
}

.related-post-area .slick-arrow.slick-disabled {
    opacity: 0.35;
    cursor: default;
}

.related-post-area .slick-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.related-post-area .slick-dots li button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--bb-linea);
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
}

.related-post-area .slick-dots li.slick-active button {
    background: var(--bb-oro);
}

/* ==========================================================================
   5. BARRA LATERAL
   ========================================================================== */

.widget-area .widget {
    background: var(--bb-crema);
    border: 1px solid var(--bb-linea);
    border-radius: 2px;
}

.widget-area .widget .widget-title,
.widget-area .widget h4 {
    font-family: var(--bb-titular);
    font-size: 19px;
    font-weight: 600;
    color: var(--bb-tinta);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bb-linea);
    position: relative;
}

/* Filete dorado corto bajo el titulo del widget. */
.widget-area .widget .widget-title::after,
.widget-area .widget h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 34px;
    height: 1px;
    background: var(--bb-oro);
}

.widget-area .widget ul li {
    border-bottom: 1px solid var(--bb-linea);
}

.widget-area .widget ul li:last-child {
    border-bottom: 0;
}

.widget-area .widget_search .form-control {
    border: 1px solid var(--bb-linea);
    border-radius: 2px;
    color: var(--bb-texto);
}

.widget-area .widget_search .form-control::placeholder {
    color: #9c968e;
}

.widget-area .widget_search .submit-btn {
    background: var(--bb-tinta);
    border-radius: 2px;
}

/* ==========================================================================
   6. CABECERA DE PAGINA
   El titulo va sobre una foto, asi que el contraste depende de la imagen.
   Un velo oscuro lo deja fijo y legible en todas.
   ========================================================================== */

.breadcrumb-area::before {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.34) 0%, rgba(10, 10, 10, 0.62) 100%);
}

.breadcrumb-area .page-title {
    font-weight: 500;
    letter-spacing: 0.005em;
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.38);
}

/* Las migas quedaban casi invisibles cuando la foto era clara. */
.breadcrumb-area .breadcrumb-inner .page-list,
.breadcrumb-area .breadcrumb-inner .page-list li,
.breadcrumb-area .breadcrumb-inner .page-list li a,
.breadcrumb-area .breadcrumb-inner ul li a {
    color: #f4efe5;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

.breadcrumb-area .breadcrumb-inner .page-list li a:hover {
    color: #fff;
}

/* El hero de la home no lleva velo: el titular y el parrafo caen sobre una
   foto con ventanas muy claras y ahi el texto se pierde. El degradado es mas
   denso por la izquierda, que es donde va el texto, para no apagar la foto. */
.header-area.construction-home {
    position: relative;
}

.header-area.construction-home::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(100deg, rgba(8, 8, 8, 0.66) 0%, rgba(8, 8, 8, 0.42) 42%, rgba(8, 8, 8, 0.10) 100%);
    pointer-events: none;
    z-index: 0;
}

.header-area.construction-home > * {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   7. PANTALLAS PEQUENAS
   ========================================================================== */

@media (max-width: 767px) {
    .blog-classic-item-01 .content .title {
        font-size: 22px;
    }

    .blog-post-category-badge {
        margin: -118px 0 26px;
    }

    .blog-category-circle.is-solo .ring {
        width: 92px;
        height: 92px;
    }

    .blog-details-item .content-area {
        font-size: 16.5px;
        line-height: 1.72;
    }

    .blog-details-item .content-area > p:first-of-type {
        font-size: 17.5px;
    }

    .blog-details-item .content-area h2 {
        font-size: 23px;
    }

    .breadcrumb-area .page-title {
        font-size: 32px;
        line-height: 1.2;
    }

    .related-post-area .related-news-carousel .slick-list {
        margin: 0;
    }

    .related-post-area .single-blog-grid-02 {
        margin: 0;
    }

    .blog-intro {
        margin-bottom: 38px;
    }

    .blog-intro .title {
        font-size: 27px;
    }

    .blog-intro .lead {
        font-size: 16px;
    }

    .blog-category-circles {
        margin-bottom: 38px;
        padding-bottom: 24px;
    }

    .blog-category-circles-track {
        gap: 18px;
    }

    .blog-category-circles.is-marquee .blog-category-circle {
        margin-right: 18px;
    }

    .bb-home-circulos {
        padding-bottom: 70px;
    }

    .blog-category-circle {
        width: 88px;
    }

    .blog-category-circle .ring {
        width: 78px;
        height: 78px;
    }

    /* En una sola columna la tarjeta recupera el titular grande del listado. */
    .blog-grid-row .blog-classic-item-01 .content .title {
        font-size: 21px;
    }

    .blog-grid-row .blog-classic-item-01 .content .title a,
    .blog-grid-row .blog-classic-item-01 .content p {
        -webkit-line-clamp: none;
    }
}

/* ==========================================================================
   8. MOVIL: CABECERA Y FOTO DE LA ENTRADA
   ========================================================================== */

/* Por debajo de 992 px el tema oculta el .left-content-wrap de la barra
   superior y centra lo que queda. Antes no quedaba nada, asi que se veia una
   franja blanca de 30 px encima de la cabecera negra y esta hoja la ocultaba
   entera. Desde que la barra lleva el selector de idioma ya no esta vacia: se
   deja a la vista, mas estrecha, porque en movil es el unico sitio donde el
   visitante puede cambiar de idioma. Por debajo de 414 px el tema esconde
   ademas el boton de presupuesto, asi que ahi queda solo el selector. */
@media (max-width: 991px) {
    .construction-support-area .support-inner {
        padding: 8px 0;
    }

    /* El logotipo se metia por debajo del boton del menu: ocupaba hasta x=297
       y el boton empieza en x=275. El tope de alto conserva la proporcion (la
       imagen es de 1250x372) y el de ancho le reserva sitio al boton en
       pantallas mas estrechas, donde solo el alto no bastaba. */
    .header-style-03.header-variant-09 .navbar-area .nav-container .logo-wrapper {
        max-width: calc(100% - 72px);
    }

    .header-style-03.header-variant-09 .navbar-area .nav-container .logo-wrapper img {
        max-height: 58px;
    }
}

@media (max-width: 767px) {
    /* La foto destacada, a sangre: se come los 15 px de cada lado que ponen el
       container y la columna. En pantalla ancha sigue centrada y sin ampliar. */
    .blog-details-item .thumb {
        margin-left: -15px;
        margin-right: -15px;
    }

    .blog-details-item .thumb img {
        display: block;
        width: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
    }
}

/* ==========================================================================
   SELECTOR DE IDIOMA (topbar de navbar-05)
   El tema no tenia estilo para esto: su control era un <select> nativo. Los
   enlaces heredan el color de los titulares del propio bar, que es lo que se
   lee sobre su fondo claro, y el idioma en curso se marca con peso y color de
   marca en vez de con un subrayado, para no parecer un enlace mas.

   A partir de 414 px el tema oculta el boton de presupuesto
   (responsive.css, `.construction-support-area .support-inner .boxed-btn`),
   asi que en moviles pequenos el bar se quedaba vacio: ahora queda el
   selector, centrado por la regla de <=991 px.
   ========================================================================== */

.construction-support-area .support-inner .right-content-wrap ul li.bb-idiomas {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
}

.construction-support-area .support-inner .right-content-wrap ul li.bb-idiomas a {
    color: var(--bb-texto);
    padding: 2px 2px;
    line-height: 1;
    transition: color .15s ease;
}

.construction-support-area .support-inner .right-content-wrap ul li.bb-idiomas a:hover,
.construction-support-area .support-inner .right-content-wrap ul li.bb-idiomas a:focus-visible {
    color: var(--bb-bronce);
}

.construction-support-area .support-inner .right-content-wrap ul li.bb-idiomas span {
    color: var(--bb-linea);
}

/* El idioma en curso: no es un destino, es el estado. */
.construction-support-area .support-inner .right-content-wrap ul li.bb-idiomas a.bb-idioma-activo {
    color: var(--bb-bronce);
    font-weight: 800;
    cursor: default;
}