/* ============================================================
   BLOG 2026 — Figma "Cubicup-Web" › "Blog Desktop" (1440 × 5589)
   Medidas sacadas del .fig. Va sobre home.css (base, CTA final, pie).
   ============================================================ */

/* ---------------- HERO (Figma "Header", 865px) ---------------- */
.blog-hero {
    position: relative;
    height: 865px;
    max-height: 100svh;
    min-height: 640px;
    overflow: hidden;
    isolation: isolate;
    color: var(--text-inverse);
}
.blog-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--opacity-dark-40); }
.blog-hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* Figma "Ellipse 1": 1175px, línea blanca al 40 % de 0,5px, en x 132 / y −155 */
.blog-hero__circle {
    position: absolute; z-index: -1;
    left: calc(50% - 720px + 132px); top: -155px;
    width: 1175px; height: 1175px;
    border: var(--base-thin) solid rgba(255,255,255,.4);
    border-radius: 50%;
    pointer-events: none;
}
.blog-hero__inner {
    position: absolute;
    left: var(--base-16); right: var(--base-16); bottom: var(--base-16);
    display: flex; justify-content: space-between; align-items: flex-end; gap: var(--base-32);
}
.blog-hero__text { display: flex; flex-direction: column; gap: var(--base-20); max-width: 680px; }
.blog-hero__text .eyebrow { margin-bottom: -8px; } /* Figma: 12px de eyebrow a titular dentro de un bloque con gap 20 */
.blog-hero__title {
    font-size: var(--heading-xxl-size);
    line-height: var(--heading-xxl-line-height);
    letter-spacing: var(--heading-xxl-tracking);
    font-weight: var(--font-weight-regular);
}
.blog-hero__title .reveal-line {
    display: block;
    animation: line-appear 1s cubic-bezier(.22,.61,.36,1) both;
    animation-delay: calc(.2s + var(--i, 0) * .16s);
}
.blog-hero__topics { display: flex; flex-wrap: wrap; gap: 0; }
.blog-hero__topics .tag-glass { color: var(--glass-text-primary); text-decoration: none; transition: background-color var(--transition); }
.blog-hero__topics .tag-glass:hover { background: rgba(40,40,40,.6); }
.blog-hero__desc {
    width: 274px; flex: none;
    font-size: var(--body-sm-size);
    line-height: var(--body-sm-line-height);
}

/* ---------------- SECCIONES (Figma: padding 120 / 32, gap 80) ---------------- */
.blog-section { padding: var(--layout-section-padding-y-base) 0; }
.blog-intro {
    display: flex; justify-content: space-between; align-items: center; gap: var(--base-24);
    margin-bottom: var(--layout-section-title-content-gap-base);
}
.blog-intro .eyebrow { color: var(--text-primary); }

/* Figma "Filter-bar": lupa + texto en mayúsculas gris #9a8e84 */
.blog-search { display: flex; align-items: center; gap: 6px; color: #9a8e84; margin: 0; }
.blog-search .icon { flex: none; }
.blog-search input {
    width: 150px; /* "BUSCAR ARTÍCULO" entero también con Inter, más ancha que Saans */
    padding: 0; border: 0; background: transparent;
    font-family: var(--font-family-title);
    font-size: var(--label-eyebrow-size);
    line-height: var(--label-eyebrow-line-height);
    font-weight: var(--label-eyebrow-weight);
    letter-spacing: var(--label-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--text-primary);
    transition: width var(--transition);
}
.blog-search input::placeholder { color: #9a8e84; opacity: 1; }
.blog-search input:focus { outline: none; width: 220px; text-transform: none; letter-spacing: 0; }
.blog-search:focus-within { color: var(--text-primary); }

/* Figma "Tag": 11px en mayúsculas, padding 5/6 */
.post-tag {
    display: inline-flex; align-items: center;
    height: 18px; padding: 0 6px; box-sizing: border-box; /* Figma: 18px de alto */
    font-size: var(--label-tag-size); line-height: 1; letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tag-text);
    background: var(--background-page);
}
.post-tag--white { background: #fff; }

/* ---------------- MÁS POPULARES: carrusel de 564px ---------------- */
.blog-populares__track {
    display: flex; gap: var(--layout-grid-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* arranca alineado con el contenedor y se sale por la derecha, como en el Figma */
    padding: 0 var(--layout-grid-margin) 0 max(var(--layout-grid-margin), calc((100% - var(--layout-max)) / 2 + var(--layout-grid-margin)));
    scroll-padding-left: max(var(--layout-grid-margin), calc((100% - var(--layout-max)) / 2 + var(--layout-grid-margin)));
    cursor: grab;
}
.blog-populares__track::-webkit-scrollbar { display: none; }
.blog-populares__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
/* flechas a los lados, centradas en la altura de la foto (406px) */
.blog-populares__carousel { position: relative; }
.blog-populares__arrow {
    position: absolute; z-index: 2;
    top: calc(406px / 2 - 22px);
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    transition: opacity var(--transition), background-color var(--transition), color var(--transition);
}
.blog-populares__arrow[hidden] { display: inline-flex; opacity: 0; pointer-events: none; }
.blog-populares__arrow--prev { left: max(var(--base-16), calc((100% - var(--layout-max)) / 2 + var(--base-16))); }
.blog-populares__arrow--next { right: var(--base-16); }
.post-card { flex: 0 0 564px; display: flex; flex-direction: column; gap: var(--base-16); scroll-snap-align: start; }
.post-card__media { display: block; height: 406px; overflow: hidden; background: var(--background-subtle); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.post-card__info { display: flex; flex-direction: column; gap: 6px; }
.post-card__row { display: flex; gap: var(--base-16); }
.post-card__title { flex: 1 1 0; font-size: var(--title-sm-size); line-height: var(--title-sm-line-height); font-weight: var(--title-sm-weight); }
.post-card__title a, .post-row__title a { color: inherit; text-decoration: none; }
.post-card__title a:hover, .post-row__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-card__desc { flex: 1 1 0; font-size: var(--body-sm-size); line-height: var(--body-sm-line-height); }
.post-card__tags { margin-top: 22px; display: flex; gap: var(--component-tag-gap); }

/* ---------------- ÚLTIMOS ARTÍCULOS: filas con línea fina ---------------- */
.post-list { border-top: 1px solid var(--accordion-default-border); }
.post-row {
    display: flex; gap: var(--base-16);
    padding: var(--base-16) 0;
    border-bottom: 1px solid var(--accordion-default-border);
}
.post-row:last-child { border-bottom: 0; }
.post-row__media { flex: 0 0 448px; height: 266px; overflow: hidden; display: block; background: var(--background-subtle); }
.post-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.22,.61,.36,1); }
.post-row:hover .post-row__media img { transform: scale(1.03); }
.post-row__info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.post-row__top { display: flex; justify-content: space-between; gap: var(--base-16); }
.post-row__title { width: 332px; font-size: 20px; line-height: 28px; font-weight: var(--font-weight-regular); }
.post-row__desc { width: 390px; font-size: var(--body-sm-size); line-height: var(--body-sm-line-height); }
.post-row__tags { display: flex; gap: var(--component-tag-gap); }

.blog-pager { display: flex; justify-content: center; align-items: center; gap: var(--base-8); margin-top: var(--layout-section-title-content-gap-tight); }
.blog-pager .page-numbers {
    min-width: 44px; height: 44px; padding: 0 var(--base-12);
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--component-button);
    font-size: var(--action-button-size); font-weight: var(--action-button-weight); letter-spacing: var(--action-button-tracking);
    color: var(--text-primary); text-decoration: none;
    transition: background-color var(--transition), color var(--transition);
}
.blog-pager a.page-numbers:hover { background: #fff; }
.blog-pager .page-numbers.current { background: var(--button-primary-background-default); color: #fff; }
.blog-pager .page-numbers.dots { min-width: auto; padding: 0 4px; }

/* ---------------- NUESTRAS TEMÁTICAS: 4 tarjetas de 332px ---------------- */
.blog-tematicas { padding-bottom: var(--layout-section-padding-y-base); }
.topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--layout-grid-gutter); }
.topic-card { display: flex; flex-direction: column; gap: var(--base-8); color: var(--text-primary); text-decoration: none; }
.topic-card__media { display: block; aspect-ratio: 332 / 414; overflow: hidden; background: var(--background-subtle); }
.topic-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.topic-card__title { font-size: var(--title-sm-size); line-height: var(--title-sm-line-height); font-weight: var(--title-sm-weight); }

/* ---------------- RESPONSIVE (Figma "Blog Mobile", 390) ---------------- */
@media (max-width: 1024px) {
    .post-row__media { flex-basis: 40%; height: auto; aspect-ratio: 448 / 266; }
    .post-row__top { flex-direction: column; }
    .post-row__title, .post-row__desc { width: auto; }
    .topic-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .blog-hero { height: 100svh; }
    .blog-hero__title .reveal-line { display: inline; } /* el titular fluye: los cortes son los del escritorio */
    .blog-hero__inner { flex-direction: column; align-items: flex-start; }
    .blog-hero__desc { width: auto; }
    .blog-hero__circle { left: 50%; transform: translateX(-50%); width: 760px; height: 760px; top: -80px; }
    .post-card { flex-basis: 85%; }
    .post-card__media { height: auto; aspect-ratio: 564 / 406; }
    /* en móvil la foto mide 85vw × (406/564): las flechas se centran en ella */
    .blog-populares__arrow { top: calc(85vw * 406 / 564 / 2 - 22px); }
    .post-card__row { flex-direction: column; gap: var(--base-8); }
    .post-row { flex-direction: column; }
    .post-row__media { flex-basis: auto; }
    .blog-intro { flex-wrap: wrap; }
}