/* ==========================================================================
   CONSEJOS - PORTADA PUBLICA
   ========================================================================== */

.consejos-page{
    background:#fff;
    color:#111827;
    font-family:Arial, Helvetica, sans-serif;
}

.consejos-main{
    min-height:70vh;
}

.consejos-container{
    width:min(1380px, calc(100% - 48px));
    margin:0 auto;
}

.consejos-eyebrow{
    margin:0 0 12px;
    color:#00a4e4;
    font-size:12px;
    font-weight:850;
    letter-spacing:.13em;
    text-transform:uppercase;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.consejos-hero{
    padding:58px 0 38px;
}

.consejos-hero h1{
    margin:0;
    color:#111827;
    font-size:clamp(48px,7vw,88px);
    font-weight:850;
    letter-spacing:-.055em;
    line-height:.95;
}

.consejos-hero__lead{
    max-width:790px;
    margin:24px 0 0;
    color:#475467;
    font-size:clamp(19px,2vw,23px);
    line-height:1.6;
}


/* ==========================================================================
   CATEGORIAS
   ========================================================================== */

.consejos-categorias{
    padding:10px 0 78px;
}

.consejos-categorias__grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}

.consejos-category-card{
    position:relative;
    min-height:430px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.14);
    border-radius:26px;
    color:#fff;
    text-decoration:none;
    isolation:isolate;
    box-shadow:0 18px 44px rgba(15,23,42,.10);
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.consejos-category-card:hover{
    transform:translateY(-7px);
    color:#fff;
    text-decoration:none;
}

.consejos-category-card--vender{
    background:
        radial-gradient(circle at 78% 18%, rgba(0,179,255,.42), transparent 35%),
        linear-gradient(155deg,#0a6f9f 0%,#064b72 52%,#052d45 100%);
}

.consejos-category-card--vender:hover{
    border-color:rgba(0,190,255,.58);
    box-shadow:
        0 30px 70px rgba(0,128,190,.30),
        0 14px 30px rgba(15,23,42,.16);
}

.consejos-category-card--comprar{
    background:
        radial-gradient(circle at 80% 18%, rgba(255,184,82,.38), transparent 36%),
        linear-gradient(155deg,#9a5b22 0%,#71401b 50%,#44230e 100%);
}

.consejos-category-card--comprar:hover{
    border-color:rgba(255,192,102,.58);
    box-shadow:
        0 30px 70px rgba(180,102,31,.28),
        0 14px 30px rgba(15,23,42,.16);
}

.consejos-category-card--vivir{
    background:
        radial-gradient(circle at 78% 18%, rgba(152,210,109,.34), transparent 36%),
        linear-gradient(155deg,#426d4a 0%,#2f5538 52%,#193421 100%);
}

.consejos-category-card--vivir:hover{
    border-color:rgba(158,218,117,.58);
    box-shadow:
        0 30px 70px rgba(57,111,70,.28),
        0 14px 30px rgba(15,23,42,.16);
}

.consejos-category-card__visual{
    position:absolute;
    inset:0;
    z-index:-2;
    overflow:hidden;
}

.consejos-category-card__visual::before,
.consejos-category-card__visual::after{
    content:"";
    position:absolute;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.13);
}

.consejos-category-card__visual::before{
    width:290px;
    height:290px;
    top:-90px;
    right:-92px;
}

.consejos-category-card__visual::after{
    width:190px;
    height:190px;
    right:38px;
    bottom:-80px;
}

.consejos-category-card__visual svg{
    position:absolute;
    width:235px;
    height:235px;
    right:-6px;
    top:34px;
    fill:none;
    stroke:rgba(255,255,255,.23);
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
    transform:rotate(-3deg);
    transition:
        transform .35s ease,
        stroke .35s ease;
}

.consejos-category-card:hover .consejos-category-card__visual svg{
    transform:translate(-8px,6px) rotate(-1deg) scale(1.035);
    stroke:rgba(255,255,255,.32);
}

.consejos-category-card__overlay{
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        linear-gradient(180deg,rgba(7,17,27,.02) 0%,rgba(7,17,27,.20) 48%,rgba(7,17,27,.72) 100%);
}

.consejos-category-card__content{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:34px 32px 32px;
}

.consejos-category-card__kicker{
    margin:0 0 11px;
    color:#bdeaff;
    font-size:12px;
    font-weight:850;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.consejos-category-card--comprar .consejos-category-card__kicker{
    color:#ffd89e;
}

.consejos-category-card--vivir .consejos-category-card__kicker{
    color:#d1ee9f;
}

.consejos-category-card__content h2{
    max-width:360px;
    margin:0;
    color:#fff;
    font-size:clamp(31px,2.8vw,43px);
    font-weight:850;
    letter-spacing:-.045em;
    line-height:1.02;
}

.consejos-category-card__description{
    max-width:360px;
    margin:15px 0 0;
    color:rgba(255,255,255,.88);
    font-size:15px;
    line-height:1.55;
}

.consejos-category-card__link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    width:100%;
    margin-top:22px;
    color:#fff;
    font-size:14px;
    font-weight:800;
}

.consejos-category-card__link span{
    font-size:21px;
    line-height:1;
    transition:transform .2s ease;
}

.consejos-category-card:hover .consejos-category-card__link span{
    transform:translateX(5px);
}


/* ==========================================================================
   PUBLICACIONES
   ========================================================================== */

.consejos-publicaciones{
    padding:74px 0 98px;
    background:#f7f8fa;
}

.consejos-publicaciones__header{
    margin-bottom:28px;
}

.consejos-publicaciones__topline{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:14px;
}

.consejos-publicaciones__topline .consejos-eyebrow{
    margin:0;
}

.consejos-publicaciones__header h2{
    margin:0;
    color:#111827;
    font-size:clamp(34px,4.5vw,52px);
    font-weight:850;
    letter-spacing:-.045em;
    line-height:1;
}

.consejos-reset{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 16px;
    border:1px solid #d7dce3;
    border-radius:11px;
    background:#fff;
    color:#111827;
    box-sizing:border-box;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
    box-shadow:0 8px 22px rgba(15,23,42,.06);
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.consejos-reset:hover{
    transform:translateY(-2px);
    border-color:#111827;
    background:#fff;
    color:#111827;
    text-decoration:none;
    box-shadow:0 14px 30px rgba(15,23,42,.12);
}


/* ==========================================================================
   SELECTOR DE LOCALIDAD
   ========================================================================== */

.consejos-locality-picker{
    position:relative;
    width:min(800px,100%);
    margin:0 auto 30px;
    padding:22px 24px 22px 32px;
    overflow:hidden;
    border:1px solid #bfe4f3;
    border-radius:20px;
    background:
        linear-gradient(135deg,#ffffff 0%,#f7fcfe 100%);
    box-shadow:
        0 26px 64px rgba(0,164,228,.22),
        0 10px 26px rgba(15,23,42,.10),
        0 0 0 1px rgba(0,164,228,.07);
    box-sizing:border-box;
    transition:
        width .34s cubic-bezier(.22,.8,.24,1),
        max-width .34s cubic-bezier(.22,.8,.24,1),
        padding .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.consejos-locality-picker.is-open{
    width:100%;
    max-width:100%;
    padding:24px 24px 24px 32px;
    border-color:#a9daee;
    box-shadow:
        0 30px 72px rgba(0,164,228,.20),
        0 12px 30px rgba(15,23,42,.11),
        0 0 0 1px rgba(0,164,228,.08);
}

.consejos-locality-picker::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:7px;
    background:#00a4e4;
}

.consejos-locality-picker__intro{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    transition:gap .28s ease;
}

.consejos-locality-picker__eyebrow{
    margin:0 0 7px;
    color:#00a4e4;
    font-size:11px;
    font-weight:850;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.consejos-locality-picker__label{
    margin:0;
    color:#111827;
    font-size:20px;
    font-weight:850;
    letter-spacing:-.025em;
    line-height:1.15;
}

.consejos-locality-picker__help{
    margin:6px 0 0;
    color:#667085;
    font-size:13px;
    line-height:1.55;
}

.consejos-locality-picker__trigger{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    min-width:220px;
    min-height:46px;
    padding:0 15px 0 17px;
    border:1px solid #d4d9e0;
    border-radius:12px;
    background:#f9fafb;
    color:#111827;
    box-sizing:border-box;
    font:inherit;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:
        border-color .18s ease,
        background-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.consejos-locality-picker__trigger:hover{
    transform:translateY(-1px);
    border-color:#111827;
    background:#fff;
    box-shadow:0 10px 24px rgba(15,23,42,.08);
}

.consejos-locality-picker__trigger[aria-expanded="true"]{
    border-color:#111827;
    background:#fff;
    box-shadow:0 0 0 3px rgba(17,24,39,.06);
}

.consejos-locality-picker__chevron{
    font-size:16px;
    line-height:1;
    transition:transform .2s ease;
}

.consejos-locality-picker__trigger[aria-expanded="true"]
.consejos-locality-picker__chevron{
    transform:rotate(180deg);
}

.consejos-locality-picker__panel{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:9px;
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid #e6e9ed;
    opacity:1;
    transform:translateY(0);
    transition:
        opacity .22s ease .08s,
        transform .26s ease .06s;
}

.consejos-locality-picker__panel[hidden]{
    display:none;
}

.consejos-locality-picker.is-opening
.consejos-locality-picker__panel{
    opacity:0;
    transform:translateY(-8px);
}

.consejos-locality-option{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:42px;
    padding:0 13px;
    border:1px solid #e1e5ea;
    border-radius:11px;
    background:#fbfcfd;
    color:#475467;
    box-sizing:border-box;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    transition:
        transform .16s ease,
        border-color .16s ease,
        background-color .16s ease,
        box-shadow .16s ease,
        color .16s ease;
}

.consejos-locality-option:hover{
    transform:translateY(-2px);
    border-color:#aeb7c2;
    background:#fff;
    color:#111827;
    text-decoration:none;
    box-shadow:0 9px 22px rgba(15,23,42,.075);
}

.consejos-locality-option.is-active{
    border-color:#111827;
    background:#111827;
    color:#fff;
    box-shadow:0 10px 24px rgba(15,23,42,.13);
}


/* ==========================================================================
   TARJETAS
   ========================================================================== */

.consejos-post-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:22px;
}

.consejos-post-card{
    grid-column:span 2;
    min-width:0;
    overflow:hidden;
    border:1px solid #e2e5e9;
    border-radius:22px;
    background:#fff;
    box-shadow:0 14px 40px rgba(15,23,42,.055);
    transition:
        transform .26s ease,
        box-shadow .26s ease,
        border-color .26s ease;
}

.consejos-post-card:hover{
    transform:translateY(-7px);
    border-color:#b8c1cc;
    box-shadow:
        0 30px 70px rgba(15,23,42,.15),
        0 8px 20px rgba(15,23,42,.08);
}

.consejos-post-card--featured:hover{
    border-color:#008fc8;
    box-shadow:
        0 0 0 5px rgba(0,164,228,.12),
        0 34px 78px rgba(0,121,174,.19),
        0 12px 28px rgba(15,23,42,.10);
}

.consejos-post-card--featured{
    border:2px solid #00a4e4;
    background:
        linear-gradient(135deg,#fff 0%,#f8fdff 100%);
    box-shadow:
        0 0 0 4px rgba(0,164,228,.08),
        0 20px 58px rgba(15,23,42,.08);
}

.consejos-post-card__media{
    position:relative;
    display:block;
    height:240px;
    overflow:hidden;
    background:#eef2f5;
}

.consejos-post-card__media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .35s ease;
}

.consejos-post-card:hover .consejos-post-card__media img{
    transform:scale(1.025);
}

.consejos-post-card__placeholder{
    height:240px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#98a2b3;
    font-size:22px;
    font-weight:850;
}

.consejos-post-card__featured-label{
    position:absolute;
    top:16px;
    left:16px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:36px;
    padding:0 14px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:999px;
    background:#00a4e4;
    color:#fff;
    font-size:12px;
    font-weight:900;
    letter-spacing:.07em;
    text-transform:uppercase;
    box-shadow:
        0 10px 24px rgba(0,126,180,.28),
        0 2px 8px rgba(15,23,42,.12);
}

.consejos-post-card__featured-label span{
    font-size:13px;
    line-height:1;
}

.consejos-post-card__body{
    display:flex;
    flex-direction:column;
    padding:24px;
}

.consejos-post-card__category{
    margin:0 0 10px;
    color:#00a4e4;
    font-size:11px;
    font-weight:850;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.consejos-post-card h3{
    margin:0;
    color:#111827;
    font-size:25px;
    font-weight:850;
    letter-spacing:-.035em;
    line-height:1.08;
}

.consejos-post-card h3 a{
    color:inherit;
    text-decoration:none;
}

.consejos-post-card h3 a:hover{
    color:#111827;
    text-decoration:none;
}

.consejos-post-card__excerpt{
    margin:15px 0 0;
    color:#667085;
    font-size:15px;
    line-height:1.65;
}

.consejos-post-card__footer{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
    margin-top:auto;
    padding-top:22px;
    color:#98a2b3;
    font-size:12px;
    font-weight:650;
}



/* ==========================================================================
   DISTRIBUCION DE DESTACADAS
   ========================================================================== */

/* Una destacada: conserva el formato grande de 2/3 y deja 1/3
   disponible para la primera publicación normal. */
.consejos-post-grid--featured-1
.consejos-post-card--featured{
    grid-column:span 4;
    display:block;
}

/* Dos destacadas: comparten una única fila, mitad y mitad.
   Las publicaciones normales empiezan automáticamente en la fila siguiente. */
.consejos-post-grid--featured-2
.consejos-post-card--featured{
    grid-column:span 3;
    display:block;
}

/* Tres destacadas: las tres ocupan una sola fila de tres columnas. */
.consejos-post-grid--featured-3
.consejos-post-card--featured{
    grid-column:span 2;
    display:block;
}


/* ==========================================================================
   PAGINACION
   ========================================================================== */

.consejos-pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:52px;
}

.consejos-pagination a{
    width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #dde3e8;
    border-radius:10px;
    background:#fff;
    color:#546273;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.consejos-pagination a:hover,
.consejos-pagination a.is-active{
    border-color:#00a4e4;
    background:#00a4e4;
    color:#fff;
    transform:translateY(-1px);
    text-decoration:none;
}

/* ==========================================================================
   VACIO
   ========================================================================== */

.consejos-empty{
    padding:48px 42px;
    border:1px solid #e2e5e9;
    border-radius:22px;
    background:#fff;
    text-align:center;
}

.consejos-empty h3{
    margin:0;
    color:#111827;
    font-size:30px;
    font-weight:850;
    letter-spacing:-.035em;
}

.consejos-empty > p:not(.consejos-eyebrow){
    max-width:620px;
    margin:14px auto 0;
    color:#667085;
    font-size:15px;
    line-height:1.65;
}


@media (max-width: 1180px){

    .consejos-locality-picker__panel{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 980px){

    .consejos-locality-picker__panel{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

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

    .consejos-category-card--vivir{
        grid-column:1 / -1;
        min-height:360px;
    }

    .consejos-post-grid{
        grid-template-columns:repeat(6,minmax(0,1fr));
    }

    .consejos-post-card{
        grid-column:span 3;
    }

    .consejos-post-card--featured,
    .consejos-post-grid--featured-1 .consejos-post-card--featured,
    .consejos-post-grid--featured-2 .consejos-post-card--featured,
    .consejos-post-grid--featured-3 .consejos-post-card--featured{
        grid-column:1 / -1;
    }
}

@media (max-width: 760px){

    .consejos-locality-picker,
    .consejos-locality-picker.is-open{
        width:100%;
        max-width:100%;
    }

    .consejos-locality-picker__panel{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .consejos-container{
        width:min(100% - 32px, 1380px);
    }

    .consejos-categorias__grid{
        grid-template-columns:1fr;
    }

    .consejos-category-card,
    .consejos-category-card--vivir{
        grid-column:auto;
        min-height:360px;
    }

    .consejos-category-card__content{
        padding:30px 26px 28px;
    }

    .consejos-post-card--featured,
    .consejos-post-grid--featured-1 .consejos-post-card--featured,
    .consejos-post-grid--featured-2 .consejos-post-card--featured,
    .consejos-post-grid--featured-3 .consejos-post-card--featured{
        display:block;
    }

}

@media (max-width: 640px){

    .consejos-container{
        width:calc(100% - 24px);
    }

    .consejos-hero{
        padding:34px 0 28px;
    }

    .consejos-hero h1{
        font-size:52px;
    }

    .consejos-hero__lead{
        margin-top:18px;
        font-size:17px;
    }

    .consejos-categorias{
        padding:4px 0 52px;
    }

    .consejos-categorias__grid{
        gap:14px;
    }

    .consejos-category-card{
        min-height:330px;
        border-radius:20px;
    }

    .consejos-category-card__content{
        padding:26px 22px 24px;
    }

    .consejos-category-card__content h2{
        font-size:31px;
    }

    .consejos-category-card__description{
        font-size:14px;
    }

    .consejos-category-card__visual svg{
        width:205px;
        height:205px;
        right:-18px;
        top:24px;
    }

    .consejos-publicaciones{
        padding:52px 0 58px;
    }

    .consejos-publicaciones__header{
        margin-bottom:22px;
    }

    .consejos-publicaciones__topline{
        align-items:center;
        gap:12px;
    }

    .consejos-publicaciones__header h2{
        font-size:36px;
    }

    .consejos-reset{
        min-height:38px;
        padding:0 13px;
        font-size:12px;
    }

    .consejos-locality-picker{
        padding:18px 16px 16px 20px;
        border-radius:16px;
    }

    .consejos-locality-picker__label{
        font-size:19px;
    }

    .consejos-locality-picker__intro{
        align-items:flex-start;
        flex-direction:column;
        gap:14px;
    }

    .consejos-locality-picker__trigger{
        width:100%;
        min-width:0;
    }

    .consejos-locality-picker__panel{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .consejos-post-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .consejos-post-card,
    .consejos-post-card--featured,
    .consejos-post-grid--featured-1 .consejos-post-card--featured,
    .consejos-post-grid--featured-2 .consejos-post-card--featured,
    .consejos-post-grid--featured-3 .consejos-post-card--featured{
        grid-column:auto;
        border-radius:18px;
    }

    .consejos-post-card__media,
    .consejos-post-card--featured .consejos-post-card__media,
    .consejos-post-card__placeholder{
        height:220px;
    }

    .consejos-post-card__media img{
        height:100%;
    }

    .consejos-post-card__body,
    .consejos-post-card--featured .consejos-post-card__body{
        padding:22px 20px;
    }

    .consejos-post-card h3,
    .consejos-post-card--featured h3{
        font-size:27px;
    }

    .consejos-empty{
        padding:38px 22px;
        border-radius:18px;
    }

    .consejos-pagination{
        margin-top:40px;
    }
}