/* blogs: estilos migrados preservando el diseño original. */

/* ==========================================================
   ANTHORIA — BLOGS PAGE

   Estilos exclusivos de blogs.html.

   Contiene:
   - Fondo general.
   - Distribución principal.
   - Carrusel destacado.
   - Latest Insights.
   - Tarjetas de artículos.
   - Estados hover.
   - Tema oscuro.
   - Responsive específico.

   Los estilos globales permanecerán en styles.css.
   ========================================================== */


/* ==========================================================
   FONDO DE BLOGS
   ========================================================== */

body.blogs-page {
    min-height: 100vh;

    background-image:
        linear-gradient(rgba(244, 239, 230, 0.72),
            rgba(244, 239, 230, 0.72)),
        url(../../assets/images/home-background.jpg);

    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}


/* ==========================================================
   SECCIÓN PRINCIPAL
   ========================================================== */

body.blogs-page main>.blogs-section {
    width: 100%;
    max-width: none;
}


/* ==========================================================
   DISTRIBUCIÓN PRINCIPAL

   Escritorio:
   - Carrusel a la izquierda.
   - Latest Insights a la derecha.
   ========================================================== */

body.blogs-page .blogs-layout {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 42px;
    align-items: start;

    margin-top: 20px;
}


/* ==========================================================
   IMÁGENES GENERALES
   ========================================================== */

body.blogs-page .blog-image {
    display: block;

    width: 100%;
    height: 100%;

    margin-top: 0;

    object-fit: cover;
}


/* ==========================================================
   CARRUSEL PRINCIPAL
   ========================================================== */

body.blogs-page .blog-slide {
    position: relative;

    height: 520px;

    overflow: hidden;

    border: 1px solid transparent;
    border-radius: 18px;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}


body.blogs-page .blog-slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ==========================================================
   TEXTO SOBRE EL CARRUSEL
   ========================================================== */

body.blogs-page .blog-slide-content {
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;

    padding: 18px 32px;

    background:
        linear-gradient(transparent,
            rgba(0, 0, 0, 0.8));

    color: #ffffff;
}


body.blogs-page .blog-slide-content h2 {
    transition:
        color 0.3s ease;
}


/* ==========================================================
   PANEL LATEST INSIGHTS
   ========================================================== */

body.blogs-page .insights-panel {
    position: relative;
}


body.blogs-page .insights-panel-title {
    position: absolute;
    bottom: 100%;

    margin-bottom: 23px;

    color: #b78a3d;

    font-size: 1.3rem;
}


/* ==========================================================
   ENLACES DE LOS ARTÍCULOS
   ========================================================== */

body.blogs-page .insight-card-link {
    display: block;

    color: inherit;

    text-decoration: none;
}


/* ==========================================================
   ARTÍCULO DESTACADO
   ========================================================== */

body.blogs-page .featured-insight {
    position: relative;

    overflow: hidden;

    border: 1px solid transparent;
    border-radius: 18px;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}


body.blogs-page .featured-insight-image {
    display: block;

    width: 100%;
    height: 170px;

    object-fit: cover;
    object-position: center 80%;
}


/* ==========================================================
   TEXTO DEL ARTÍCULO DESTACADO
   ========================================================== */

body.blogs-page .featured-insight-content {
    position: absolute;
    left: 0;
    bottom: -14px;

    width: 100%;

    padding: 24px;

    background:
        linear-gradient(transparent,
            rgba(0, 0, 0, 0.8));

    color: #ffffff;
}


body.blogs-page .featured-insight-content h3 {
    transition:
        color 0.3s ease;
}


/* ==========================================================
   CUADRÍCULA DE ARTÍCULOS PEQUEÑOS
   ========================================================== */

body.blogs-page .small-insights-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin-top: 16px;
}


/* ==========================================================
   TARJETAS PEQUEÑAS
   ========================================================== */

body.blogs-page .small-insight-card {
    position: relative;

    height: 159px;

    overflow: hidden;

    border: 1px solid transparent;
    border-radius: 18px;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}


body.blogs-page .small-insight-card img {
    display: block;

    width: 100%;
    height: 115%;

    object-fit: cover;
    object-position: center 62%;

    transform: scale(1.15);
}


/* ==========================================================
   TEXTO DE LAS TARJETAS PEQUEÑAS
   ========================================================== */

body.blogs-page .small-insight-content {
    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;

    padding: 12px;

    background:
        linear-gradient(transparent,
            rgba(45, 41, 36, 0.85));

    color: #ffffff;
}


body.blogs-page .small-insight-content .blog-category {
    margin-bottom: 4px;

    font-size: 0.7rem;
}


body.blogs-page .small-insight-content h3 {
    margin: 0;

    font-size: 1rem;
    line-height: 1.1;

    transition:
        color 0.3s ease;
}


/* ==========================================================
   HOVER DE ARTÍCULOS
   ========================================================== */

body.blogs-page .insight-card-link:hover .featured-insight,
body.blogs-page .small-insight-card:hover,
body.blogs-page .blog-slide:hover {
    border-color: #b78a3d;

    box-shadow:
        0 0 0 1px rgba(183, 138, 61, 0.32),
        0 0 22px rgba(183, 138, 61, 0.28);

    transform: translateY(-3px);
}


body.blogs-page .insight-card-link:hover h3,
body.blogs-page .small-insight-card:hover h3,
body.blogs-page .blog-slide:hover h2 {
    color: #e1bd73;
}


/* ==========================================================
   DARK THEME — BLOGS
   ========================================================== */

body.blogs-page.dark-theme {
    background-image:
        linear-gradient(rgba(10, 9, 8, 0.68),
            rgba(10, 9, 8, 0.68)),
        url(../../assets/images/home-background-dark.jpg);

    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}


body.blogs-page.dark-theme .insights-panel-title {
    color: #d1a85f;
}

/* ==========================================================
   TABLET Y MÓVIL — BLOGS
   ========================================================== */

@media (max-width: 768px) {

    body.blogs-page {
        min-height: 100svh;

        background-image:
            linear-gradient(rgba(244, 237, 226, 0.76),
                rgba(244, 237, 226, 0.86)),
            url(../../assets/images/home-mobile-ivory.jpg);

        background-color: #f4ede2;
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-attachment: scroll;
    }

    body.blogs-page.dark-theme {
        background-image:
            linear-gradient(rgba(5, 6, 5, 0.78),
                rgba(5, 6, 5, 0.88)),
            url(../../assets/images/home-mobile-dark.jpg);

        background-color: #050605;
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-attachment: scroll;
    }

    body.blogs-page main,
    body.blogs-page main>section.blogs-section {
        background: transparent;
        background-color: transparent;
    }

    body.blogs-page main>section.blogs-section {
        width: calc(100vw - 36px);
        max-width: none;

        margin-left: calc(50% - 50vw + 18px);
        margin-bottom: 0;

        padding-top: 82px;

        transform: none;
    }

    /* ==========================================================
       BLOGS — SELECTOR DE ARTÍCULOS TIPO VIDEOJUEGO
       SOLO MÓVIL
       ========================================================== */

    body.blogs-page .blogs-layout {
        display: block;

        width: 100%;

        margin-top: 42px;

        overflow: visible;
    }

    /* Contenedor principal */

    body.blogs-page #blogCarousel {
        position: relative;

        width: calc(100% + 40px);
        margin: 6px -20px 48px;

        padding: 34px 0 66px;

        overflow: hidden;

        background:
            radial-gradient(circle at 50% 45%,
                rgba(185, 130, 39, 0.14),
                transparent 48%);

        perspective: 1000px;
        isolation: isolate;
    }

    /* Etiqueta superior */

    body.blogs-page #blogCarousel::before {
        content: "SELECT AN INSIGHT";

        position: absolute;
        top: 3px;
        left: 50%;

        z-index: 8;

        color: rgba(152, 101, 31, 0.76);

        font-family: Arial, sans-serif;
        font-size: 0.58rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.25em;

        transform: translateX(-50%);

        pointer-events: none;
    }

    /* Línea decorativa superior */

    body.blogs-page #blogCarousel::after {
        content: "";

        position: absolute;
        top: 20px;
        left: 50%;

        z-index: 8;

        width: 88px;
        height: 1px;

        background:
            linear-gradient(90deg,
                transparent,
                var(--anthoria-gold),
                transparent);

        box-shadow:
            0 0 12px rgba(185, 130, 39, 0.34);

        transform: translateX(-50%);

        pointer-events: none;
    }

    /* Área de las tarjetas */

    body.blogs-page #blogCarousel .carousel-inner {
        position: relative;

        width: 100%;
        height: 430px;

        overflow: visible;

        transform-style: preserve-3d;
    }

    /* Todas las diapositivas se colocan en el mismo centro */

    body.blogs-page #blogCarousel .carousel-item {
        position: absolute;
        top: 0;
        left: 50%;

        display: block;

        width: min(76vw, 300px);
        height: 390px;

        margin: 0;

        opacity: 0;
        visibility: hidden;

        transform:
            translateX(-50%) scale(0.72) translateZ(-120px);

        transform-origin: center center;

        transition:
            transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.4s ease,
            filter 0.4s ease;

        pointer-events: none;
    }

    /* Tarjeta activa */

    body.blogs-page #blogCarousel .carousel-item.active {
        z-index: 4;

        opacity: 1;
        visibility: visible;

        transform:
            translateX(-50%) scale(1) translateZ(0);

        filter: none;

        pointer-events: auto;
    }

    /* Tarjeta que sale hacia la izquierda */

    body.blogs-page #blogCarousel .carousel-item.carousel-item-start,
    body.blogs-page #blogCarousel .carousel-item.carousel-item-prev {
        z-index: 2;

        opacity: 0.54;
        visibility: visible;

        transform:
            translateX(-112%) scale(0.78) rotateY(9deg) translateZ(-100px);

        filter:
            brightness(0.72) blur(0.6px);
    }

    /* Tarjeta que entra desde la derecha */

    body.blogs-page #blogCarousel .carousel-item.carousel-item-end,
    body.blogs-page #blogCarousel .carousel-item.carousel-item-next {
        z-index: 2;

        opacity: 0.54;
        visibility: visible;

        transform:
            translateX(12%) scale(0.78) rotateY(-9deg) translateZ(-100px);

        filter:
            brightness(0.72) blur(0.6px);
    }

    /* Enlace completo */

    body.blogs-page #blogCarousel .blog-slide-link {
        display: block;

        width: 100%;
        height: 100%;

        color: inherit;
        text-decoration: none;
    }

    /* Tarjeta */

    body.blogs-page #blogCarousel .blog-slide {
        position: relative;

        width: 100%;
        height: 100%;

        margin: 0;
        padding: 0;

        overflow: hidden;

        border: 1px solid rgba(185, 130, 39, 0.40);
        border-radius: 26px;

        background: #111;

        box-shadow:
            0 30px 65px rgba(71, 49, 21, 0.28),
            0 0 0 1px rgba(255, 255, 255, 0.22) inset,
            0 0 36px rgba(185, 130, 39, 0.10);

        transform: none;
    }

    /* Resplandor alrededor de la tarjeta elegida */

    body.blogs-page #blogCarousel .carousel-item.active .blog-slide {
        animation:
            anthoria-selected-card 3.2s ease-in-out infinite;
    }

    /* Imagen */

    body.blogs-page #blogCarousel .blog-image {
        position: absolute;
        inset: 0;

        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;

        transform: scale(1.03);

        transition:
            transform 5s ease;
    }

    body.blogs-page #blogCarousel .carousel-item.active .blog-image {
        transform: scale(1.10);
    }

    /* Oscurecimiento para que el texto se lea */

    body.blogs-page #blogCarousel .blog-slide::before {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 1;

        background:
            linear-gradient(to bottom,
                rgba(8, 8, 7, 0.04) 14%,
                rgba(8, 8, 7, 0.24) 43%,
                rgba(8, 8, 7, 0.94) 100%);

        pointer-events: none;
    }

    /* Marco interior tecnológico */

    body.blogs-page #blogCarousel .blog-slide::after {
        content: "";

        position: absolute;
        inset: 11px;
        z-index: 2;

        border:
            1px solid rgba(208, 164, 87, 0.24);

        border-radius: 18px;

        pointer-events: none;
    }

    /* Texto */

    body.blogs-page #blogCarousel .blog-slide-content {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 3;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        padding: 28px 24px 26px;

        color: #fff;

        text-align: left;

        transform: none;
    }

    /* Categoría */

    body.blogs-page #blogCarousel .blog-category {
        margin: 0 0 12px;

        color: #e1b55f;

        font-family: Arial, sans-serif;
        font-size: 0.63rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.19em;
        text-transform: uppercase;
    }

    /* Título */

    body.blogs-page #blogCarousel .blog-slide-content h2 {
        width: 100%;
        max-width: none;

        margin: 0 0 12px;

        color: #fff;

        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: clamp(1.55rem, 7vw, 2rem);
        font-weight: 500;
        line-height: 1.02;
        letter-spacing: -0.025em;

        text-shadow:
            0 3px 15px rgba(0, 0, 0, 0.55);
    }

    /* Descripción */

    body.blogs-page #blogCarousel .blog-slide-content>p:last-child {
        display: block;

        max-width: 31ch;
        margin: 0;

        color: rgba(255, 255, 255, 0.76);

        font-family: Arial, sans-serif;
        font-size: 0.78rem;
        line-height: 1.48;
    }

    /* Estado de selección */

    body.blogs-page #blogCarousel .carousel-item.active .blog-slide-content::before {
        content: "SELECTED";

        display: none;
        align-items: center;

        min-height: 25px;

        margin-bottom: 13px;
        padding: 0 10px;

        border:
            1px solid rgba(208, 164, 87, 0.48);

        border-radius: 999px;

        background:
            rgba(7, 8, 7, 0.44);

        color: #e1b55f;

        font-family: Arial, sans-serif;
        font-size: 0.52rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.18em;

        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    /* Flechas de navegación */

    body.blogs-page #blogCarousel .carousel-control-prev,
    body.blogs-page #blogCarousel .carousel-control-next {
        position: absolute;
        top: auto;
        bottom: 7px;
        z-index: 10;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 48px;
        height: 48px;

        border:
            1px solid rgba(185, 130, 39, 0.38);

        border-radius: 50%;

        background:
            rgba(255, 252, 247, 0.68);

        opacity: 1;

        box-shadow:
            0 10px 25px rgba(71, 49, 21, 0.13);

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    body.blogs-page #blogCarousel .carousel-control-prev {
        left: calc(50% - 66px);
    }

    body.blogs-page #blogCarousel .carousel-control-next {
        right: calc(50% - 66px);
    }

    /* Sustituye el icono de Bootstrap */

    body.blogs-page #blogCarousel .carousel-control-prev-icon,
    body.blogs-page #blogCarousel .carousel-control-next-icon {
        width: auto;
        height: auto;

        background: none;

        color: #98651f;

        font-family: Arial, sans-serif;
        font-size: 1.1rem;
        line-height: 1;
    }

    body.blogs-page #blogCarousel .carousel-control-prev-icon::before {
        content: "←";
    }

    body.blogs-page #blogCarousel .carousel-control-next-icon::before {
        content: "→";
    }

    /* Dark Theme */

    body.blogs-page.dark-theme #blogCarousel {
        background:
            radial-gradient(circle at 50% 45%,
                rgba(208, 164, 87, 0.13),
                transparent 48%);
    }

    body.blogs-page.dark-theme #blogCarousel .carousel-control-prev,
    body.blogs-page.dark-theme #blogCarousel .carousel-control-next {
        border-color: rgba(208, 164, 87, 0.34);

        background:
            rgba(10, 11, 10, 0.72);

        box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.34);
    }

    body.blogs-page.dark-theme #blogCarousel .carousel-control-prev-icon,
    body.blogs-page.dark-theme #blogCarousel .carousel-control-next-icon {
        color: var(--anthoria-gold);
    }

    /* Animación del marco seleccionado */

    @keyframes anthoria-selected-card {

        0%,
        100% {
            box-shadow:
                0 30px 65px rgba(71, 49, 21, 0.28),
                0 0 0 1px rgba(255, 255, 255, 0.20) inset,
                0 0 24px rgba(185, 130, 39, 0.08);
        }

        50% {
            box-shadow:
                0 35px 75px rgba(71, 49, 21, 0.34),
                0 0 0 1px rgba(208, 164, 87, 0.42) inset,
                0 0 42px rgba(185, 130, 39, 0.22);
        }
    }

    /* Evita movimiento intenso si el usuario lo prefiere */

    @media (prefers-reduced-motion: reduce) {

        body.blogs-page #blogCarousel .carousel-item,
        body.blogs-page #blogCarousel .blog-image,
        body.blogs-page #blogCarousel .blog-slide {
            animation: none !important;
            transition: none !important;
        }
    }

    /* ==========================================================
       BLOGS — SEGUNDO SELECTOR: LATEST INSIGHTS
       SOLO MÓVIL
       ========================================================== */

    /* Cuadro exterior */

    body.blogs-page .insights-panel {
        position: relative;

        display: block;

        width: calc(100% + 40px);
        margin: 0 -20px 54px;
        padding: 66px 0 72px;

        overflow: hidden;

        border-top:
            1px solid rgba(185, 130, 39, 0.18);

        border-bottom:
            1px solid rgba(185, 130, 39, 0.18);

        background:
            radial-gradient(circle at 50% 30%,
                rgba(185, 130, 39, 0.14),
                transparent 48%);

        isolation: isolate;
    }

    /* Título principal del cuadro */

    body.blogs-page .insights-panel-title {
        position: absolute;
        top: 21px;
        left: 50%;
        z-index: 8;

        width: max-content;
        margin: 0;

        color: rgba(152, 101, 31, 0.78);

        font-family: Arial, sans-serif;
        font-size: 0.58rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.25em;
        text-transform: uppercase;

        transform: translateX(-50%);
    }

    /* Línea tecnológica debajo del título */

    body.blogs-page .insights-panel-title::after {
        content: "";

        position: absolute;
        top: 22px;
        left: 50%;

        width: 92px;
        height: 1px;

        background:
            linear-gradient(90deg,
                transparent,
                var(--anthoria-gold),
                transparent);

        box-shadow:
            0 0 12px rgba(185, 130, 39, 0.32);

        transform: translateX(-50%);
    }

    /* Convierte los cinco enlaces en una fila desplazable */

    body.blogs-page .insights-panel {
        white-space: nowrap;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: calc((100vw - min(76vw, 300px)) / 2);

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    body.blogs-page .insights-panel::-webkit-scrollbar {
        display: none;
    }

    /* El título no forma parte de la fila */

    body.blogs-page .insights-panel-title {
        white-space: normal;
    }

    /* Todos los enlaces se convierten en tarjetas */

    body.blogs-page .insights-panel>.insight-card-link,
    body.blogs-page .small-insights-grid>.insight-card-link {
        display: inline-block;

        width: min(76vw, 300px);
        height: 390px;

        margin: 0 7px;

        vertical-align: top;

        white-space: normal;

        color: inherit;
        text-decoration: none;

        scroll-snap-align: center;
        scroll-snap-stop: always;

        transform: scale(0.92);

        transition:
            transform 0.35s ease,
            opacity 0.35s ease,
            filter 0.35s ease;
    }

    /* Espacio inicial para centrar la primera tarjeta */

    body.blogs-page .insights-panel>.insight-card-link:first-of-type {
        margin-left:
            calc((100vw - min(76vw, 300px)) / 2);
    }

    /* El contenedor de las cuatro tarjetas deja de ser cuadrícula */

    body.blogs-page .small-insights-grid {
        display: inline;

        width: auto;
        margin: 0;
        padding: 0;

        white-space: nowrap;
    }

    /* Espacio final para centrar la última tarjeta */

    body.blogs-page .small-insights-grid>.insight-card-link:last-child {
        margin-right:
            calc((100vw - min(76vw, 300px)) / 2);
    }

    /* Todas las tarjetas tendrán la misma forma */

    body.blogs-page .featured-insight,
    body.blogs-page .small-insight-card {
        position: relative;

        display: block;

        width: 100%;
        height: 100%;

        margin: 0;
        padding: 0;

        overflow: hidden;

        border:
            1px solid rgba(185, 130, 39, 0.40);

        border-radius: 26px;

        background: #111;

        box-shadow:
            0 28px 62px rgba(71, 49, 21, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.20),
            0 0 30px rgba(185, 130, 39, 0.09);

        transform: none;
    }

    /* Todas las imágenes ocupan la tarjeta completa */

    body.blogs-page .featured-insight-image,
    body.blogs-page .small-insight-card>img {
        position: absolute;
        inset: 0;

        display: block;
        z-index: 0;
        visibility: visible !important;
        opacity: 1 !important;

        width: 100%;
        height: 100%;

        object-fit: cover;

        transform: scale(1.04);

        transition:
            transform 4s ease;
    }

    /* Degradado oscuro */

    body.blogs-page .featured-insight::before,
    body.blogs-page .small-insight-card::before {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 1;

        background:
            linear-gradient(to bottom,
                rgba(8, 8, 7, 0.03) 12%,
                rgba(8, 8, 7, 0.24) 44%,
                rgba(8, 8, 7, 0.95) 100%);

        pointer-events: none;
    }

    /* Marco interior */

    body.blogs-page .featured-insight::after,
    body.blogs-page .small-insight-card::after {
        content: "";

        position: absolute;
        inset: 11px;
        z-index: 2;

        border:
            1px solid rgba(208, 164, 87, 0.24);

        border-radius: 18px;

        pointer-events: none;
    }

    /* Contenido textual */

    body.blogs-page .featured-insight-content,
    body.blogs-page .small-insight-content {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 3;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;
        padding: 28px 24px 26px;

        color: #fff;

        text-align: left;

        transform: none;
    }

    /* Categoría */

    body.blogs-page .insights-panel .blog-category {
        margin: 0 0 12px;

        color: #e1b55f;

        font-family: Arial, sans-serif;
        font-size: 0.62rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    /* Títulos */

    body.blogs-page .featured-insight-content h3,
    body.blogs-page .small-insight-content h3 {
        width: 100%;
        max-width: none;

        margin: 0;

        color: #fff;

        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: clamp(1.5rem, 6.8vw, 1.95rem);
        font-weight: 500;
        line-height: 1.04;
        letter-spacing: -0.025em;

        text-shadow:
            0 3px 15px rgba(0, 0, 0, 0.55);
    }

    /* Etiqueta visual en cada tarjeta */

    body.blogs-page .featured-insight-content::before,
    body.blogs-page .small-insight-content::before {
        content: "LATEST INSIGHT";

        display: none;
        align-items: center;

        min-height: 25px;

        margin-bottom: 13px;
        padding: 0 10px;

        border:
            1px solid rgba(208, 164, 87, 0.46);

        border-radius: 999px;

        background:
            rgba(7, 8, 7, 0.46);

        color: #e1b55f;

        font-family: Arial, sans-serif;
        font-size: 0.50rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.17em;

        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    /* Texto inferior de ayuda */

    body.blogs-page .insights-panel::after {
        content: "SWIPE TO EXPLORE  •  05 ARTICLES";

        position: absolute;
        bottom: 24px;
        left: 50%;
        z-index: 8;

        width: max-content;

        color: rgba(152, 101, 31, 0.60);

        font-family: Arial, sans-serif;
        font-size: 0.52rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.19em;

        transform: translateX(-50%);

        pointer-events: none;
    }

    /* Pulsación táctil */

    body.blogs-page .insights-panel .insight-card-link:active {
        transform: scale(0.89);
    }

    /* Dark Theme */

    body.blogs-page.dark-theme .insights-panel {
        border-color:
            rgba(208, 164, 87, 0.17);

        background:
            radial-gradient(circle at 50% 30%,
                rgba(208, 164, 87, 0.13),
                transparent 48%);
    }

    body.blogs-page.dark-theme .featured-insight,
    body.blogs-page.dark-theme .small-insight-card {
        border-color:
            rgba(208, 164, 87, 0.38);

        box-shadow:
            0 30px 68px rgba(0, 0, 0, 0.50),
            inset 0 1px 0 rgba(255, 255, 255, 0.045),
            0 0 32px rgba(208, 164, 87, 0.08);
    }

    /* Pantallas muy estrechas */

    @media (max-width: 390px) {

        body.blogs-page .insights-panel>.insight-card-link,
        body.blogs-page .small-insights-grid>.insight-card-link {
            width: 78vw;
            height: 372px;
        }

        body.blogs-page .insights-panel>.insight-card-link:first-of-type {
            margin-left: 11vw;
        }

        body.blogs-page .small-insights-grid>.insight-card-link:last-child {
            margin-right: 11vw;
        }
    }

    /* ==========================================================
       BLOGS — ANIMACIÓN AMBIENTAL DEL SEGUNDO SELECTOR
       SOLO CSS / SOLO MÓVIL
       ========================================================== */

    /* Movimiento suave del fondo del cuadro */

    body.blogs-page .insights-panel {
        background-size: 160% 160%;

        animation:
            anthoria-insights-background 10s ease-in-out infinite alternate;
    }

    /* Tarjetas con movimiento alternado */

    body.blogs-page .insights-panel>.insight-card-link,

    body.blogs-page .small-insights-grid>.insight-card-link {
        animation:
            anthoria-insight-float-left 5.8s ease-in-out infinite;
    }

    /* Las tarjetas pares se mueven en sentido contrario */

    body.blogs-page .small-insights-grid>.insight-card-link:nth-child(even) {
        animation-name:
            anthoria-insight-float-right;

        animation-duration: 6.6s;
    }

    /* Variación para evitar que todas se muevan a la vez */

    body.blogs-page .insights-panel>.insight-card-link:first-of-type {
        animation-delay: -1.4s;
    }

    body.blogs-page .small-insights-grid>.insight-card-link:nth-child(1) {
        animation-delay: -2.8s;
    }

    body.blogs-page .small-insights-grid>.insight-card-link:nth-child(2) {
        animation-delay: -4.1s;
    }

    body.blogs-page .small-insights-grid>.insight-card-link:nth-child(3) {
        animation-delay: -1.9s;
    }

    body.blogs-page .small-insights-grid>.insight-card-link:nth-child(4) {
        animation-delay: -3.5s;
    }

    /* Zoom lento de las imágenes */

    body.blogs-page .insights-panel .featured-insight-image,

    body.blogs-page .insights-panel .small-insight-card>img {
        animation:
            anthoria-insight-image-breathe 9s ease-in-out infinite alternate;
    }

    /* Variación de velocidad entre imágenes */

    body.blogs-page .small-insights-grid .insight-card-link:nth-child(even) .small-insight-card>img {
        animation-duration: 11s;
        animation-direction: alternate-reverse;
    }

    /* Resplandor que recorre el marco interior */

    body.blogs-page .featured-insight::after,
    body.blogs-page .small-insight-card::after {
        border-color:
            rgba(208, 164, 87, 0.22);

        box-shadow:
            inset 0 0 16px rgba(208, 164, 87, 0.03);

        animation:
            anthoria-insight-frame-glow 4.8s ease-in-out infinite;
    }

    /* Indicador inferior con pulso suave */

    body.blogs-page .insights-panel::after {
        animation:
            anthoria-insight-label-pulse 2.8s ease-in-out infinite;
    }

    /* Movimiento hacia la izquierda */

    @keyframes anthoria-insight-float-left {

        0%,
        100% {
            transform:
                translate3d(0, 0, 0) scale(0.92);
        }

        50% {
            transform:
                translate3d(-5px, -7px, 0) scale(0.935);
        }
    }

    /* Movimiento hacia la derecha */

    @keyframes anthoria-insight-float-right {

        0%,
        100% {
            transform:
                translate3d(0, -3px, 0) scale(0.92);
        }

        50% {
            transform:
                translate3d(5px, 5px, 0) scale(0.94);
        }
    }

    /* Respiración de las imágenes */

    @keyframes anthoria-insight-image-breathe {
        0% {
            transform:
                scale(1.04) translate3d(-1%, 0, 0);
        }

        100% {
            transform:
                scale(1.12) translate3d(1%, -1%, 0);
        }
    }

    /* Movimiento de la iluminación del cuadro */

    @keyframes anthoria-insights-background {
        0% {
            background-position:
                40% 30%;
        }

        100% {
            background-position:
                62% 48%;
        }
    }

    /* Pulso del marco */

    @keyframes anthoria-insight-frame-glow {

        0%,
        100% {
            border-color:
                rgba(208, 164, 87, 0.18);

            box-shadow:
                inset 0 0 14px rgba(208, 164, 87, 0.02);
        }

        50% {
            border-color:
                rgba(208, 164, 87, 0.42);

            box-shadow:
                inset 0 0 22px rgba(208, 164, 87, 0.09);
        }
    }

    /* Pulso del texto inferior */

    @keyframes anthoria-insight-label-pulse {

        0%,
        100% {
            opacity: 0.45;
            letter-spacing: 0.19em;
        }

        50% {
            opacity: 0.9;
            letter-spacing: 0.22em;
        }
    }

    /* Detiene la flotación durante el toque para facilitar el deslizamiento */

    body.blogs-page .insights-panel .insight-card-link:active {
        animation-play-state: paused;

        transform:
            scale(0.89);
    }

    /* Accesibilidad */

    @media (prefers-reduced-motion: reduce) {

        body.blogs-page .insights-panel,

        body.blogs-page .insights-panel .insight-card-link,

        body.blogs-page .insights-panel img,

        body.blogs-page .featured-insight::after,

        body.blogs-page .small-insight-card::after,

        body.blogs-page .insights-panel::after {
            animation: none !important;
        }
    }

    /* Capa final para mantener legibles los textos del carrusel. */
    body.blogs-page #blogCarousel .blog-slide::before {
        background:
            linear-gradient(to bottom,
                rgba(8, 8, 7, 0.08) 10%,
                rgba(8, 8, 7, 0.30) 48%,
                rgba(8, 8, 7, 0.94) 100%);
    }
}