/* CSS Document */
/* =========================================================
   GUÍAS EASY-STOCK
   Portada editorial
   ========================================================= */


/* ---------------------------------------------------------
   BASE
   --------------------------------------------------------- */

.guias-page {
    background: var(--white, #ffffff);
}

.guias-shell {
    width: var(
        --container,
        min(1180px, calc(100% - 48px))
    );

    margin-inline: auto;
}

.guias-kicker {
    margin: 0 0 14px;

    color: var(--blue, #2294b5);

    font-size: .72rem;
    font-weight: 700;

    letter-spacing: .19em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.guias-hero {
    position: relative;
    overflow: hidden;

    border-bottom: 1px solid var(--line, #e4eaec);

    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(166, 255, 77, .20),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            var(--soft, #f4f8f9) 0%,
            #ffffff 62%,
            rgba(34, 148, 181, .05) 100%
        );
}

.guias-hero::before {
    content: "";

    position: absolute;
    top: -190px;
    right: -150px;

    width: 460px;
    height: 460px;

    border: 1px solid rgba(34, 148, 181, .10);
    border-radius: 50%;

    pointer-events: none;
}

.guias-hero::after {
    content: "";

    position: absolute;
    right: 120px;
    bottom: -140px;

    width: 280px;
    height: 280px;

    border: 1px solid rgba(166, 255, 77, .35);
    border-radius: 50%;

    pointer-events: none;
}

.guias-hero-grid {
    position: relative;
    z-index: 1;

    min-height: 500px;

    display: grid;
    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(320px, .72fr);

    gap: clamp(48px, 8vw, 110px);

    align-items: center;

    padding: 86px 0;
}

.guias-hero-copy {
    max-width: 760px;
}

.guias-hero h1 {
    max-width: 780px;

    margin: 0;

    color: var(--ink, #15242b);

    font-family: var(
        --serif,
        "DM Serif Display",
        serif
    );

    font-size: clamp(3rem, 6vw, 5.6rem);
    font-weight: 400;

    line-height: .96;
    letter-spacing: -.04em;
}

.guias-hero-text {
    max-width: 650px;

    margin: 28px 0 0;

    color: var(--muted, #607078);

    font-size: clamp(1rem, 1.3vw, 1.16rem);
    line-height: 1.8;
}

.guias-frequency {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    margin-top: 30px;
    padding: 11px 16px;

    border: 1px solid rgba(34, 148, 181, .14);
    border-radius: 999px;

    background: rgba(255, 255, 255, .80);

    color: var(--ink, #15242b);

    font-size: .86rem;
    font-weight: 700;

    box-shadow: 0 12px 35px rgba(21, 36, 43, .04);
}

.guias-frequency-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--green, #a6ff4d);

    box-shadow:
        0 0 0 6px rgba(166, 255, 77, .22);
}


/* HERO PANEL */

.guias-hero-panel {
    position: relative;

    padding: clamp(30px, 4vw, 44px);

    border: 1px solid var(--line, #e4eaec);
    border-radius: 30px;

    background: rgba(255, 255, 255, .90);

    box-shadow:
        0 28px 80px rgba(21, 36, 43, .08);

    backdrop-filter: blur(10px);
}

.guias-hero-panel::before {
    content: "";

    position: absolute;
    top: 34px;
    left: 0;

    width: 4px;
    height: 76px;

    border-radius: 0 999px 999px 0;

    background: var(--green, #a6ff4d);
}

.guias-panel-label {
    margin: 0 0 16px;

    color: var(--blue, #2294b5);

    font-size: .72rem;
    font-weight: 700;

    letter-spacing: .15em;
    text-transform: uppercase;
}

.guias-hero-panel h2 {
    margin: 0;

    color: var(--ink, #15242b);

    font-family: var(
        --serif,
        "DM Serif Display",
        serif
    );

    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 400;

    line-height: 1.05;
    letter-spacing: -.025em;
}

.guias-hero-panel > p:not(.guias-panel-label) {
    margin: 22px 0 0;

    color: var(--muted, #607078);

    font-size: .98rem;
    line-height: 1.75;
}

.guias-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 28px;
}

.guias-tags span {
    display: inline-flex;

    padding: 8px 13px;

    border: 1px solid rgba(34, 148, 181, .15);
    border-radius: 999px;

    background: var(--soft, #f4f8f9);

    color: var(--ink, #15242b);

    font-size: .77rem;
    font-weight: 700;
}


/* ---------------------------------------------------------
   GUÍA DESTACADA
   --------------------------------------------------------- */

.guias-featured {
    padding: 92px 0 54px;
}

.guias-featured-card {
    display: grid;
    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(0, .98fr);

    min-height: 470px;

    overflow: hidden;

    border: 1px solid var(--line, #e4eaec);
    border-radius: 34px;

    background: var(--soft, #f4f8f9);

    box-shadow:
        0 30px 90px rgba(21, 36, 43, .08);
}


/* IMAGEN DESTACADA */

.guias-featured-media,
.guia-card-media {
    position: relative;

    display: block;
    overflow: hidden;

    text-decoration: none;
}

.guias-featured-media img,
.guia-card-media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.guias-featured-media {
    min-height: 470px;
}


/* PLACEHOLDER DE IMÁGENES */

.guias-media-placeholder {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow: hidden;

    padding: 34px;

    background:
        radial-gradient(
            circle at 80% 18%,
            rgba(166, 255, 77, .70),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            #1d839f 0%,
            var(--blue, #2294b5) 48%,
            #16647a 100%
        );
}

.guias-media-placeholder::before {
    content: "";

    position: absolute;
    right: -80px;
    bottom: -90px;

    width: 280px;
    height: 280px;

    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
}

.guias-media-placeholder::after {
    content: "";

    position: absolute;
    right: 36px;
    bottom: 38px;

    width: 110px;
    height: 110px;

    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
}

.guias-placeholder-label {
    position: relative;
    z-index: 1;

    color: rgba(255, 255, 255, .92);

    font-size: .7rem;
    font-weight: 700;

    letter-spacing: .18em;
    text-transform: uppercase;
}

.guias-media-placeholder strong {
    position: relative;
    z-index: 1;

    color: rgba(255, 255, 255, .94);

    font-family: var(
        --serif,
        "DM Serif Display",
        serif
    );

    font-size: clamp(6rem, 11vw, 10rem);
    font-weight: 400;

    line-height: .75;
    letter-spacing: -.06em;
}


/* CONTENIDO DESTACADO */

.guias-featured-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: clamp(42px, 6vw, 76px);
}

.guias-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 9px;
}

.guias-meta span {
    display: inline-flex;

    padding: 7px 11px;

    border: 1px solid rgba(21, 36, 43, .10);
    border-radius: 999px;

    background: rgba(255, 255, 255, .72);

    color: var(--muted, #607078);

    font-size: .7rem;
    font-weight: 700;

    letter-spacing: .04em;
}

.guias-meta .guias-meta-new {
    border-color: rgba(166, 255, 77, .65);

    background: rgba(166, 255, 77, .25);

    color: var(--ink, #15242b);

    text-transform: uppercase;
}

.guias-featured-content h2 {
    margin: 26px 0 0;

    font-family: var(
        --serif,
        "DM Serif Display",
        serif
    );

    font-size: clamp(2.5rem, 4.2vw, 4.35rem);
    font-weight: 400;

    line-height: 1;
    letter-spacing: -.035em;
}

.guias-featured-content h2 a {
    color: var(--ink, #15242b);
    text-decoration: none;
}

.guias-featured-content > p {
    margin: 25px 0 0;

    color: var(--muted, #607078);

    font-size: 1.04rem;
    line-height: 1.8;
}

.guias-read-link {
    display: inline-flex;
    align-items: center;

    align-self: flex-start;

    gap: 11px;

    margin-top: 30px;

    color: var(--blue, #2294b5);

    font-size: .92rem;
    font-weight: 700;

    text-decoration: none;
}

.guias-read-link span {
    font-size: 1.2rem;

    transition: transform .2s ease;
}

.guias-read-link:hover span {
    transform: translateX(4px);
}


/* ---------------------------------------------------------
   BIBLIOTECA / GRILLA
   --------------------------------------------------------- */

.guias-library {
    padding: 64px 0 106px;
}

.guias-section-heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, .58fr);

    gap: 50px;

    align-items: end;

    margin-bottom: 48px;
}

.guias-section-heading h2 {
    max-width: 720px;

    margin: 0;

    color: var(--ink, #15242b);

    font-family: var(
        --serif,
        "DM Serif Display",
        serif
    );

    font-size: clamp(2.6rem, 4.7vw, 4.8rem);
    font-weight: 400;

    line-height: .98;
    letter-spacing: -.035em;
}

.guias-section-description {
    margin: 0;

    color: var(--muted, #607078);

    font-size: .98rem;
    line-height: 1.75;
}

.guias-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* TARJETA */

.guia-card {
    min-width: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--line, #e4eaec);
    border-radius: 28px;

    background: var(--white, #ffffff);

    box-shadow:
        0 22px 65px rgba(21, 36, 43, .055);
}

.guia-card-media {
    aspect-ratio: 16 / 10;

    background: var(--soft, #f4f8f9);
}

.guia-card-content {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 30px 28px 32px;
}

.guia-card h3 {
    margin: 22px 0 0;

    color: var(--ink, #15242b);

    font-size: 1.28rem;
    line-height: 1.3;
}

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

.guia-card-content > p {
    margin: 16px 0 0;

    color: var(--muted, #607078);

    font-size: .92rem;
    line-height: 1.72;
}

.guia-card .guias-read-link {
    margin-top: auto;
    padding-top: 26px;
}


/* ---------------------------------------------------------
   CIERRE
   --------------------------------------------------------- */

.guias-closing {
    padding: 0 0 104px;
}

.guias-closing-box {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 50px;

    align-items: center;

    overflow: hidden;

    padding: clamp(38px, 6vw, 68px);

    border: 1px solid var(--line, #e4eaec);
    border-radius: 32px;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(166, 255, 77, .24),
            transparent 27%
        ),
        var(--soft, #f4f8f9);
}

.guias-closing-box::before {
    content: "";

    position: absolute;
    top: 30px;
    left: 0;

    width: 4px;
    height: 88px;

    border-radius: 0 999px 999px 0;

    background: var(--green, #a6ff4d);
}

.guias-closing h2 {
    max-width: 720px;

    margin: 0;

    color: var(--ink, #15242b);

    font-family: var(
        --serif,
        "DM Serif Display",
        serif
    );

    font-size: clamp(2.35rem, 4vw, 4.1rem);
    font-weight: 400;

    line-height: 1;
    letter-spacing: -.035em;
}

.guias-closing p:not(.guias-kicker) {
    max-width: 650px;

    margin: 20px 0 0;

    color: var(--muted, #607078);

    font-size: 1rem;
    line-height: 1.75;
}

.guias-closing .btn-primary {
    position: relative;
    z-index: 1;

    flex-shrink: 0;
}


/* ---------------------------------------------------------
   INTERACCIONES
   --------------------------------------------------------- */

.guias-featured-content h2 a:hover,
.guia-card h3 a:hover {
    color: var(--blue, #2294b5);
}

.guias-featured-card,
.guia-card {
    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.guia-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 30px 80px rgba(21, 36, 43, .09);
}

.guias-featured-media img,
.guia-card-media img {
    transition: transform .35s ease;
}

.guias-featured-media:hover img,
.guia-card-media:hover img {
    transform: scale(1.025);
}

.guias-read-link:focus-visible,
.guias-featured-content h2 a:focus-visible,
.guia-card h3 a:focus-visible,
.guias-featured-media:focus-visible,
.guia-card-media:focus-visible {
    outline: 3px solid rgba(34, 148, 181, .32);
    outline-offset: 4px;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 980px) {

    .guias-hero-grid {
        grid-template-columns: 1fr;

        min-height: auto;

        padding: 76px 0;
    }

    .guias-hero-panel {
        max-width: 650px;
    }

    .guias-featured-card {
        grid-template-columns: 1fr;
    }

    .guias-featured-media {
        min-height: 390px;
    }

    .guias-section-heading {
        grid-template-columns: 1fr;

        gap: 24px;
    }

    .guias-section-description {
        max-width: 650px;
    }

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

    .guias-closing-box {
        grid-template-columns: 1fr;

        gap: 32px;
    }

    .guias-closing .btn-primary {
        justify-self: start;
    }

}


@media (max-width: 640px) {

    .guias-shell {
        width: min(100% - 32px, 1180px);
    }

    .guias-hero-grid {
        gap: 42px;

        padding: 62px 0;
    }

    .guias-hero h1 {
        font-size: clamp(3rem, 14vw, 4.1rem);
    }

    .guias-hero-text {
        font-size: 1rem;
        line-height: 1.68;
    }

    .guias-frequency {
        font-size: .79rem;
    }

    .guias-hero-panel {
        padding: 30px 26px;

        border-radius: 24px;
    }

    .guias-featured {
        padding: 64px 0 42px;
    }

    .guias-featured-card {
        border-radius: 25px;
    }

    .guias-featured-media {
        min-height: 270px;
    }

    .guias-featured-content {
        padding: 34px 26px 38px;
    }

    .guias-featured-content h2 {
        font-size: clamp(2.35rem, 11vw, 3.15rem);
    }

    .guias-featured-content > p {
        font-size: .98rem;
    }

    .guias-library {
        padding: 48px 0 78px;
    }

    .guias-section-heading {
        margin-bottom: 34px;
    }

    .guias-section-heading h2 {
        font-size: clamp(2.45rem, 12vw, 3.4rem);
    }

    .guias-grid {
        grid-template-columns: 1fr;
    }

    .guia-card {
        border-radius: 24px;
    }

    .guia-card-content {
        padding: 27px 24px 30px;
    }

    .guias-closing {
        padding-bottom: 78px;
    }

    .guias-closing-box {
        padding: 38px 27px;

        border-radius: 25px;
    }

    .guias-closing h2 {
        font-size: clamp(2.35rem, 11vw, 3.25rem);
    }

}


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

    .guias-featured-card,
    .guia-card,
    .guias-featured-media img,
    .guia-card-media img,
    .guias-read-link span {
        transition: none;
    }

    .guia-card:hover {
        transform: none;
    }

    .guias-featured-media:hover img,
    .guia-card-media:hover img {
        transform: none;
    }

}