/* ==================================
   MODERN BLOG STYLES
   ================================== */

/* Modern Blog Hero Section */
.blog-hero-section {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    padding: 120px var(--space-lg) var(--space-2xl);
}

.blog-hero-section .hero-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
}

.blog-hero-section .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    color: var(--brand-light);
    font-size: 0.875rem;
    font-weight: 500;
    backdrop-filter: var(--glass-blur);
    margin-bottom: var(--space-lg);
}

.blog-hero-section .hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--space-lg);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.blog-hero-section .title-primary,
.blog-hero-section .title-secondary,
.blog-hero-section .title-accent {
    display: block;
}

.blog-hero-section .title-accent {
    color: var(--yellow-custom);
    -webkit-text-fill-color: var(--yellow-custom);
    text-shadow: 0 0 32px rgba(239, 183, 45, 0.5);
}

.blog-hero-section .lead-text {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.blog-hero-section .highlight {
    color: var(--brand-light);
    font-weight: 600;
}

/* Modern Split Screen Blog Layout */
.blog-split-main {
    height: 100vh;
    width: 100vw;
    display: flex;
    position: relative;
    z-index: 2;
}

.blog-section {
    width: 50vw;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.section-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.section-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-section:hover .section-bg img {
    transform: scale(1.05);
}

.section-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(10, 10, 15, 0.8) 0%,
        rgba(26, 26, 46, 0.7) 50%,
        rgba(22, 33, 62, 0.8) 100%
    );
    backdrop-filter: blur(2px);
}

.section-content {
    position: relative;
    z-index: 10;
    padding: var(--space-xl);
    width: 100%;
    max-width: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-link {
    display: block;
    text-decoration: none;
    width: 100%;
    color: inherit;
    cursor: pointer;
}

.modern-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    backdrop-filter: var(--glass-blur);
    transition: all 0.3s ease;
    text-align: center;
    width: 350px;
    height: 400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-link:hover .modern-card,
.blog-section:hover .modern-card {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-8px);
}

.left-section .modern-card {
    border-color: var(--brand-primary);
}

.left-section .card-link:hover .modern-card,
.left-section:hover .modern-card {
    border-color: var(--brand-light);
    box-shadow: var(--shadow-brand);
}

.right-section .modern-card {
    border-color: var(--yellow-custom);
}

.right-section .card-link:hover .modern-card,
.right-section:hover .modern-card {
    border-color: var(--yellow-custom);
    box-shadow: 0 8px 32px rgba(239, 183, 45, 0.3);
}

.card-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--gradient-primary);
    color: white;
    border-radius: var(--radius-xl);
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: var(--space-md);
    box-shadow: var(--shadow-brand);
}

.left-section .card-badge {
    background: var(--gradient-primary);
}

.right-section .card-badge {
    background: linear-gradient(135deg, var(--yellow-custom) 0%, var(--accent-orange) 100%);
    box-shadow: 0 8px 32px rgba(239, 183, 45, 0.3);
}

.card-title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--space-md);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.card-link:hover .card-title {
    color: var(--brand-light);
    text-shadow: 0 0 16px rgba(185, 147, 234, 0.6);
}

.right-section .card-link:hover .card-title {
    color: var(--yellow-custom);
    text-shadow: 0 0 16px rgba(239, 183, 45, 0.6);
}

.card-description {
    color: var(--text-secondary);
    line-height: 1.5;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    font-size: 0.95rem;
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.card-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    color: var(--text-muted);
    font-size: 0.8rem;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--glass-border);
}

.read-time {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--brand-light);
    font-weight: 500;
}

section#article-1 .container {
    background-color: color-mix(in srgb, var(--brand) 70%, transparent);
    color: var(--base-200);
    border: 1px solid var(--brand);
}

article h3 {
    margin-bottom: 1rem;
    text-shadow: var(--text-shadow-strong);
}

article p {
    margin-bottom: 1rem;
    text-shadow: var(--text-shadow);
}

p.post-meta {
    font-size: 0.9rem;
    margin-bottom: 2rem;
    text-shadow: none;
}

section .container {
    padding: 1rem;
    width: 45vw;
    border-radius: var(--radius);
}

section#article-2 .container {
    background-color: color-mix(in srgb, var(--brand-3) 70%, transparent);
    border: 1px solid var(--brand-3);
    color: var(--base-200);
}

.article-link {
    text-decoration: none;
    display: inline-block;
    width: 100%;
    text-shadow: var(--text-shadow-strong);
}

.article-link.brand-3 {
    color: var(--base-200);
    background-color: var(--brand-3);
    border-radius: var(--radius);
    transition: all 0.3s ease;
}

.article-link.brand-3:hover {
    background-color: var(--surface);
    color: var(--brand-3);
    text-shadow: none;
}

.article-link.brand {
    color: var(--base-200);
    background-color: var(--brand);
    border-radius: var(--radius);
    transition: all 0.3s ease;
}

.article-link.brand:hover {
    background-color: var(--surface);
    color: var(--brand);
    text-shadow: none;
}

@media (max-width: 768px) {

    section .container {
        width: 90vw;
        margin-top: 20px;
    }
}

#blog-post {
    height: 100dvh;
    width: 100vw;
}

#blog-post.image-background {
    background-size: cover;
    background-position: center;
    text-align: center;
    position: relative;
}

#blog-post.image-background.article-1 {
    background-image: url('/houses-8618837_1280.jpg');
}

#blog-post.image-background.article-2 {
    background-image: url('/spain-4967963_1280.jpg');
}

#blog-post .container {
    background-color: color-mix(in srgb, var(--brand) 70%, transparent);
    color: var(--base-200);
    border: 1px solid var(--brand);
    padding: 2rem;
    width: 45vw;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: var(--radius);
}

#blog-post .container.bg-brand-3 {
    background-color: color-mix(in srgb, var(--brand-3) 70%, transparent);
    border: 1px solid var(--brand-3);
}

#article-1 .block,
#article-1 .bg,
article#article-1 .feature {
    background-image: url('/casa-de-hormigon-amarillo-y-marron-bajo-un-cielo-despejado.jpg');
}

#article-2 .block,
#article-2 .bg,
article#article-2 .feature {
    background-image: url('/placa-despanya-7214152_1280.jpg');
}

.item {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    transition: 0.5s;
    position: relative;
    padding: 50px 20px;
    position: absolute;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    .bg {
        top: 0px;
        left: 0px;
        opacity: 1;
        width: 100%;
        height: 100%;
        transition: 0.5s;
        position: absolute;
        transform: scale(1.03);
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }

    .blur {
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        transition: 0.5s;
        filter: blur(5px);
        position: absolute;
        transform: scale(1.03);
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }

    .block {
        width: 100%;
        height: fit-content;
        padding: 20px;
        color: #ffffff;
        transition: box-shadow 0.5s;
        max-width: 80%;
        overflow: hidden;
        max-height: 450px;
        border-radius: 10px;
        transform: scale(1.03);
        box-sizing: border-box;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        box-shadow: none;

        .circleLight {
            top: 0px;
            left: 0px;
            opacity: 0;
            content: '';
            width: 100%;
            height: 100%;
            display: block;
            transition: 0.5s;
            position: absolute;
            border-radius: 10px;
            background: radial-gradient(circle at 80px 40px, #fff, transparent);
        }

        .text {
            width: 100%;
            height: fit-content;
            padding: 2rem 1.5rem;
            text-align: center;
            background-position: center;
            background-attachment: fixed;

            & h2 {
                font-size: 2.5rem;
                text-shadow: var(--text-shadow-strong);
                margin-bottom: 2.5rem;
            }

            & p {
                font-size: 1.5rem;
                text-shadow: var(--text-shadow-strong);
                margin: 0;
            }
        }

        &:hover {
            box-shadow: 0px 0px 70px #111;

            .circleLight {
                opacity: 0.4;
            }
        }
    }
}

/* ==================================
   RESPONSIVE SPLIT BLOG STYLES
   ================================== */

@media (max-width: 1024px) {
    .section-content {
        padding: var(--space-lg);
        max-width: 350px;
    }
    
    .modern-card {
        padding: var(--space-lg);
        width: 320px;
        height: 380px;
    }
    
    .card-title {
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) {
    .blog-hero-section {
        min-height: 40vh;
        padding-top: 80px;
    }

    .blog-hero-section .hero-content {
        padding: var(--space-lg) var(--space-md);
    }

    .blog-hero-section .hero-title {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
    }

    .blog-hero-section .lead-text {
        font-size: 1rem;
    }

    .blog-split-main {
        flex-direction: column;
        height: auto;
    }

    .blog-section {
        width: 100vw;
        height: 80vh;
        min-height: 500px;
    }

    .section-content {
        padding: var(--space-md);
        max-width: 350px;
    }

    .modern-card {
        padding: var(--space-md);
        width: 300px;
        height: 350px;
    }

    .card-title {
        font-size: 1.2rem;
    }

    .card-description {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .blog-hero-section {
        min-height: 35vh;
        padding-top: 70px;
    }

    .blog-hero-section .hero-badge {
        font-size: 0.75rem;
        padding: var(--space-xs) var(--space-sm);
    }

    .blog-section {
        height: 70vh;
        min-height: 450px;
    }

    .section-content {
        padding: var(--space-md);
        max-width: 350px;
    }

    .modern-card {
        padding: var(--space-md);
        width: 280px;
        height: 320px;
    }

    .card-title {
        font-size: 1.25rem;
    }

    .card-description {
        font-size: 0.95rem;
    }

    .card-badge {
        font-size: 0.75rem;
        padding: var(--space-xs) var(--space-sm);
    }
}

/* ==================================
   MODERN ARTICLE STYLES
   ================================== */

/* Modern Article Layout */
article {
    position: relative;
    z-index: 2;
}

/* Fixed background image with overlay */
article .feature {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Dark overlay on background */
article .feature::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(10, 10, 15, 0.8) 0%,
        rgba(26, 26, 46, 0.7) 50%,
        rgba(22, 33, 62, 0.8) 100%
    );
    backdrop-filter: blur(2px);
}

/* Scrollable content card */
article .content {
    position: relative;
    z-index: 10;
    width: min(800px, 90vw);
    margin: 0 auto;
    padding: var(--space-2xl);
    background: rgba(10, 10, 15, 0.55);
    backdrop-filter: var(--glass-blur);
    border: 2px solid var(--brand-light);
    border-radius: var(--radius-xl);
    margin-top: 120px;
    margin-bottom: var(--space-4xl);
    box-shadow: var(--shadow-lg), 0 0 20px rgba(185, 147, 234, 0.3);
    /* Permite que el contenido crezca automáticamente */
    height: auto;
    overflow: visible;
}

article .content h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: var(--space-xl);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    text-shadow: none;
}

article .content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-light);
    margin: var(--space-xl) 0 var(--space-md) 0;
}

article .content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

article .content ul {
    margin: var(--space-lg) 0;
    padding-left: var(--space-xl);
}

article .content li {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

article .content strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Articles layout adjustments */

/* Article-specific background images */
article#article-1 .feature {
    background-image: url('/casa-de-hormigon-amarillo-y-marron-bajo-un-cielo-despejado.jpg');
    background-size: cover;
    background-position: center;
}

article#article-2 .feature {
    background-image: url('/placa-despanya-7214152_1280.jpg');
    background-size: cover;
    background-position: center;
}

.item .bg:has(+ .block:hover) {
    transform: scale(1.1);
    filter: blur(2px);
    opacity: 0.7;
}

.block:hover {
    cursor: pointer;
}

* {
    box-sizing: border-box;
}

:root {
    --color: #1e293b;
    --c1: #fbda61;
    --c2: #ff5acd;
    --c3: #2563eb;
    --gradient: linear-gradient(60deg,
            var(--c3),
            var(--c2),
            var(--c1),
            var(--c2),
            var(--c3));
    --scale-start: 0.5;
    --scale-end: 1.001;
    --hover-offset: 5%;

    /* 
    linear easing generator
    https://linear-easing-generator.netlify.app/
  */
    /* prettier-ignore */
    --ease-elastic: linear(0, 0.186 2.1%, 0.778 7.2%, 1.027 9.7%, 1.133, 1.212, 1.264, 1.292 15.4%,
            1.296, 1.294, 1.285, 1.269 18.9%, 1.219 20.9%, 1.062 25.8%, 0.995 28.3%,
            0.944 31.1%, 0.93, 0.921, 0.92 35.7%, 0.926, 0.94 39.7%, 1.001 47%, 1.014,
            1.021 52.4%, 1.02 56.4%, 1 65.5%, 0.994 70.7%, 1.001 88.4%, 1);
    --ease-bounce-out: cubic-bezier(0.34, 1.56, 0.64, 1);
}


.feature {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation: animated-bg linear both;
    animation-timeline: view();
}

@keyframes animated-bg {
    50% {
        background-size: 100%;
        filter: blur(0);
        background-position: center;
    }

    75% {
        background-size: 125%;
        background-position: center;
        filter: blur(5px);
    }

    100% {
        background-size: 125%;
        background-position: center;
        filter: blur(5px);
    }
}

.content {
    width: min(1120px, 90vw);
    margin: 0 auto;
    position: relative;

    & h1 {
        margin-top: 0;
        margin-bottom: 4rem;
        font-size: 3rem;
        text-shadow: var(--text-shadow-strong);
        text-align: center;
    }

    & p {
        margin-top: 0;
        margin-bottom: 1.5rem;
        line-height: 1.6;
        text-shadow: var(--text-shadow);
        font-size: 1.2rem;
    }
}

/* Modern Article Responsive */
@media (max-width: 1024px) {
    article .content {
        width: min(700px, 85vw);
        padding: var(--space-xl);
    }

    article .content h1 {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
    }

    article .content h3 {
        font-size: 1.3rem;
    }

    article .content p {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    article .content {
        width: min(600px, 95vw);
        padding: var(--space-lg);
        margin-top: 100px;
        margin-bottom: var(--space-4xl);
    }

    article .content h1 {
        font-size: clamp(1.5rem, 5vw, 2rem);
        margin-bottom: var(--space-lg);
    }

    article .content h3 {
        font-size: 1.2rem;
        margin: var(--space-lg) 0 var(--space-sm) 0;
    }

    article .content p {
        font-size: 1rem;
        margin-bottom: var(--space-md);
    }

    article .content li {
        font-size: 0.95rem;
    }

    .content h1 {
        font-size: 2rem;
    }

    .feature {
        background-size: cover !important;
    }

    main {
        height: 200dvh !important;
        flex-direction: column ;
    }

    main section {
        width: 100vw !important;
    }

    div.hero {
        position: fixed;
        top: 7.5vh;
        font-size: 1rem;
        width: 100vw;
    }

    div.text {
        padding: 0 !important;

        & h2 {
            font-size: 1.5rem !important;
        }
        & p {
            font-size: 0.867rem !important;
        }
    }

    a.block {
        margin-top: 10vh !important;
    }
}

@media (max-width: 480px) {
    article .content {
        width: 95vw;
        padding: var(--space-md);
        margin-top: 90px;
        margin-bottom: var(--space-4xl);
    }

    article .content h1 {
        font-size: clamp(1.25rem, 6vw, 1.75rem);
    }

    article .content h3 {
        font-size: 1.1rem;
    }

    article .content p,
    article .content li {
        font-size: 0.9rem;
    }
}