/* ============================================================
   BLOG · SIMPLE MEDIA
   Listado basado en la lógica de Lois & Lira.
   Hero, secciones y CTA estandarizados al sistema visual
   actual de Simple Media (mismo patrón de Agencia/Web).
   ============================================================ */

:root{
    --blog-hero-height:920px;
    --blog-card-border:#dedede;
}

.sm-header .nav-link.active{
    color:var(--sm-pink);
}

/* Hero estándar Simple Media
================================================== */
.sm-hero{
    position:relative;
    display:flex;
    align-items:center;
    height:var(--blog-hero-height);
    min-height:720px;
    overflow:hidden;
    background-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.95) 35%,rgba(0,0,0,.47) 72%,rgba(0,0,0,.76) 100%),var(--sm-hero-image);
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}

.sm-grid{
    position:absolute;
    inset:0;
    background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:100px 100px;
    mask-image:linear-gradient(90deg,#000,transparent);
}

.sm-hero .container{
    z-index:2;
    padding-top:65px;
}

.sm-kicker{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:24px;
    color:var(--sm-pink);
    font-size:.75rem;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.sm-kicker span{
    width:34px;
    height:2px;
    background-color:var(--sm-pink);
}

.sm-hero h1,
.sm-section h2{
    margin:0;
    font-size:clamp(3.75rem,6vw,6rem);
    font-weight:800;
    letter-spacing:-.065em;
    line-height:.98;
}

.sm-section h2{
    font-size:clamp(2.8rem,4vw,4.4rem);
}

.sm-hero h1 em,
.sm-section h2 em{
    color:var(--sm-pink);
    font-style:normal;
}

.sm-hero-lead{
    max-width:650px;
    margin:34px 0;
    color:#b5b5ba;
    font-size:1.1rem;
    line-height:1.75;
}

.sm-actions{
    display:flex;
    align-items:center;
    gap:35px;
}

.sm-button{
    display:inline-flex;
    align-items:center;
    gap:28px;
    padding:19px 24px;
    border:1px solid transparent;
    border-radius:4px;
    color:#fff;
    background:linear-gradient(135deg,var(--sm-pink),var(--sm-red));
    font-size:.85rem;
    font-weight:800;
    transition:.2s;
}

.sm-button:hover,
.sm-button:focus{
    border-color:var(--sm-pink);
    color:var(--sm-pink);
    background:transparent;
}

.sm-text-link{
    display:inline-flex;
    align-items:center;
    gap:13px;
    padding-bottom:5px;
    border-bottom:1px solid rgba(255,255,255,.45);
    color:#fff;
    font-size:.85rem;
    font-weight:700;
}

.sm-text-link:hover,
.sm-text-link:focus{
    border-color:var(--sm-pink);
    color:var(--sm-pink);
}

.sm-section-index{
    position:absolute;
    right:45px;
    bottom:45px;
    display:flex;
    align-items:center;
    gap:13px;
    color:#777;
    font-size:.7rem;
    writing-mode:vertical-rl;
}

.sm-section-index b{
    color:#fff;
}

.sm-section-index span{
    width:1px;
    height:55px;
    background-color:#666;
}

/* Listado estándar
================================================== */
.sm-section-heading{
    margin-bottom:65px;
}

.sm-section-heading p{
    margin-bottom:0;
    color:#66666d;
    font-size:1.05rem;
    line-height:1.8;
}

.sm-solutions{
    color:#111;
    background-color:#fff;
}

.blog-list-count{
    margin:18px 0 0;
    color:#111;
    font-size:.8rem;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.blog-list-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:30px;
}

.blog-list-card{
    display:flex;
    min-width:0;
    flex-direction:column;
    border:1px solid var(--blog-card-border);
    background:#fff;
    box-shadow:0 14px 40px rgba(0,0,0,.04);
    transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}

.blog-list-card:hover{
    transform:translateY(-5px);
    border-color:var(--sm-pink);
    box-shadow:0 18px 50px rgba(0,0,0,.09);
}

.blog-list-card__media{
    position:relative;
    display:block;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#111;
}

.blog-list-card__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .4s ease;
}

.blog-list-card:hover .blog-list-card__media img{
    transform:scale(1.035);
}

.blog-list-card__media-empty{
    display:flex;
    width:100%;
    height:100%;
    align-items:center;
    justify-content:center;
    color:var(--sm-pink);
    font-size:2.4rem;
}

.blog-list-card__body{
    display:flex;
    flex:1;
    flex-direction:column;
    padding:28px;
}

.blog-list-card__meta{
    display:flex;
    flex-wrap:wrap;
    gap:9px 16px;
    margin-bottom:18px;
    color:#7b7b7b;
    font-size:.75rem;
}

.blog-list-card__meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.blog-list-card__meta i{
    color:var(--sm-pink);
}

.blog-list-card h2{
    margin:0 0 14px;
    color:#111;
    font-size:1.55rem;
    font-weight:800;
    line-height:1.15;
    letter-spacing:-.03em;
}

.blog-list-card h2 a{
    color:#111;
}

.blog-list-card p{
    margin:0 0 24px;
    color:#666;
    line-height:1.7;
}

.blog-list-card__link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:auto;
    color:#111;
    font-size:.82rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.blog-list-card__link i{
    color:var(--sm-pink);
    transition:transform .2s ease;
}

.blog-list-card__link:hover{
    color:var(--sm-pink);
}

.blog-list-card__link:hover i{
    transform:translateX(4px);
}

.blog-list-empty{
    padding:70px 32px;
    border:1px solid #e5e5e5;
    text-align:center;
}

.blog-list-empty i{
    color:var(--sm-pink);
    font-size:2.6rem;
}

.blog-list-empty h2{
    margin:18px 0 10px;
    color:#111;
    font-size:2rem;
    font-weight:800;
    letter-spacing:-.035em;
}

.blog-list-empty p{
    margin:0;
    color:#666;
}

/* CTA estándar Simple Media
================================================== */
.sm-contact{
    color:#fff;
    background:linear-gradient(135deg,var(--sm-pink),var(--sm-red));
}

.sm-contact h2{
    font-size:clamp(3.4rem,5vw,5.3rem);
}

.sm-kicker-light{
    color:#fff;
}

.sm-kicker-light span{
    background-color:#fff;
}

.sm-contact p{
    font-size:1.05rem;
    line-height:1.75;
}

.sm-button-dark{
    margin-top:20px;
    background:#000;
}

.sm-button-dark:hover,
.sm-button-dark:focus{
    border-color:#fff;
    color:#000;
    background:#fff;
}

@media (max-width:991.98px){
    .sm-hero{
        height:820px;
    }

    .sm-hero .container{
        padding-top:45px;
    }

    .sm-hero h1{
        font-size:clamp(3rem,9vw,4.5rem);
    }

    .sm-section-index{
        display:none;
    }

    .blog-list-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:575.98px){
    .sm-hero{
        height:780px;
    }

    .sm-hero h1{
        font-size:2.85rem;
    }

    .sm-hero-lead{
        font-size:1rem;
    }

    .sm-actions{
        align-items:flex-start;
        flex-direction:column;
        gap:25px;
    }

    .sm-section h2{
        font-size:2.55rem;
    }

    .blog-list-grid{
        grid-template-columns:1fr;
        gap:24px;
    }

    .blog-list-card__body{
        padding:24px;
    }

    .sm-contact h2{
        font-size:3rem;
    }
}

/* CTA · contraste del énfasis sobre fondo rosado
================================================== */
.sm-contact h2 em{
    color:#fff;
}

/* ============================================================
   BLOG · ARQUITECTURA SILO
   ============================================================ */

.blog-categories-section{
    background:#fff;
}

.blog-category-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:20px;
}

.blog-category-card{
    display:flex;
    min-width:0;
    flex-direction:column;
    border:1px solid #e3e3e3;
    background:#fff;
    transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}

.blog-category-card:hover{
    transform:translateY(-5px);
    border-color:var(--sm-pink);
    box-shadow:0 18px 45px rgba(0,0,0,.08);
}

.blog-category-card__media{
    position:relative;
    display:block;
    aspect-ratio:4/3;
    overflow:hidden;
    background:#111;
}

.blog-category-card__media::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.28) 100%);
    pointer-events:none;
}

.blog-category-card__media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .4s ease;
}

.blog-category-card:hover .blog-category-card__media img{
    transform:scale(1.04);
}

.blog-category-card__body{
    display:flex;
    flex:1;
    flex-direction:column;
    padding:24px 22px 22px;
}

.blog-category-card h3{
    margin:0 0 10px;
    color:#111;
    font-size:1.4rem;
    font-weight:800;
    line-height:1.1;
    letter-spacing:-.03em;
}

.blog-category-card h3 a{
    color:#111;
}

.blog-category-card p{
    margin:0 0 22px;
    color:#666;
    font-size:.92rem;
    line-height:1.65;
}

.blog-category-card__link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:auto;
    color:#111;
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.blog-category-card__link i{
    color:var(--sm-pink);
    transition:transform .2s ease;
}

.blog-category-card__link:hover{
    color:var(--sm-pink);
}

.blog-category-card__link:hover i{
    transform:translateX(4px);
}

.blog-list-section{
    color:#111;
    background:#f7f7f7;
}

.blog-list-card__category{
    margin-bottom:12px;
    color:var(--sm-pink);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.blog-pagination{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:20px;
    margin-top:55px;
    padding-top:28px;
    border-top:1px solid #dedede;
}

.blog-pagination__prev,
.blog-pagination__next{
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:#111;
    font-size:.82rem;
    font-weight:800;
}

.blog-pagination__next{
    justify-self:end;
}

.blog-pagination__prev:hover,
.blog-pagination__next:hover{
    color:var(--sm-pink);
}

.blog-pagination__pages{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
}

.blog-pagination__pages a,
.blog-pagination__pages span{
    display:flex;
    width:40px;
    height:40px;
    align-items:center;
    justify-content:center;
    border:1px solid #d8d8d8;
    color:#111;
    background:#fff;
    font-size:.8rem;
    font-weight:800;
}

.blog-pagination__pages span:not(.is-active){
    width:auto;
    border:0;
    background:transparent;
}

.blog-pagination__pages a:hover,
.blog-pagination__pages .is-active{
    border-color:var(--sm-pink);
    color:#fff;
    background:var(--sm-pink);
}

@media (max-width:1199.98px){
    .blog-category-grid{
        width:100%;
        max-width:900px;
        margin-right:auto;
        margin-left:auto;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .blog-category-grid > .blog-category-card:first-child{
        grid-column:1 / -1;
    }
}

@media (max-width:767.98px){
    .blog-category-grid{
        max-width:720px;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .blog-pagination{
        grid-template-columns:1fr 1fr;
    }

    .blog-pagination__pages{
        grid-column:1/-1;
        grid-row:1;
        flex-wrap:wrap;
    }

    .blog-pagination__prev{
        grid-column:1;
        grid-row:2;
    }

    .blog-pagination__next{
        grid-column:2;
        grid-row:2;
    }
}

@media (max-width:575.98px){
    .blog-category-grid{
        max-width:100%;
        grid-template-columns:1fr;
    }

    .blog-category-grid > .blog-category-card:first-child{
        grid-column:auto;
    }

    .blog-category-card__media{
        aspect-ratio:16/10;
    }
}

/* ============================================================
   BLOG · RECORTE Y FOCO DE IMÁGENES DE CATEGORÍAS
   Las imágenes fueron compuestas con el sujeto principal a la derecha.
   ============================================================ */

.blog-category-card__media img{
    object-position:right center;
}

/* Cuando el primer clúster ocupa las dos columnas, se convierte
   en una ventana panorámica: no debe crecer proporcionalmente en altura. */
@media (min-width:576px) and (max-width:1199.98px){
    .blog-category-grid > .blog-category-card:first-child .blog-category-card__media{
        aspect-ratio:auto;
        height:clamp(280px,34vw,360px);
    }
}

/* En móvil vuelve a la proporción normal, conservando el foco derecho. */
@media (max-width:575.98px){
    .blog-category-grid > .blog-category-card:first-child .blog-category-card__media{
        height:auto;
        aspect-ratio:16/10;
    }
}