/* Portada de Guías: hero nativo y cards inspiradas en la estética premium de Experiencias. */
.df-guide-index-hero {
    background:
        linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.58) 42%, rgba(0,0,0,.18) 76%, rgba(0,0,0,.08) 100%),
        linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.06) 62%, #050606 100%),
        var(--guide-hero-image) center center / cover no-repeat;
}

.df-guide-index-hero .df-guide-hero__inner { padding: 160px 0 80px; }

.df-guide-index-hero .df-kicker {
    color: #78e4d2;
    display: block;
    font: 800 12px/1.4 Poppins, Arial, sans-serif;
    letter-spacing: .36em;
    margin: 0 0 18px;
    text-transform: uppercase;
}

.df-guide-index-hero .df-title {
    color: #fff;
    font: 800 clamp(27px, 3.5vw, 50px)/1.08 Poppins, Arial, sans-serif;
    letter-spacing: 0;
    margin: 0;
    max-width: 660px;
}

.df-guide-index-hero .df-lead {
    color: rgba(255,255,255,.72);
    font: 400 19px/1.75 Lato, Arial, sans-serif;
    margin: 26px 0 0;
    max-width: 710px;
}

.df-guide-index-hero .df-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.df-guide-index-hero .df-btn {
    align-items: center;
    border: 1px solid rgba(120,228,210,.55);
    color: #fff;
    display: inline-flex;
    font: 800 12px/1 Poppins, Arial, sans-serif;
    gap: 12px;
    letter-spacing: 1px;
    padding: 18px 24px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}

.df-guide-index-hero .df-btn:hover {
    border-color: #78e4d2;
    color: #78e4d2;
    transform: translateY(-1px);
}

.df-guide-index-hero .df-btn-solid {
    background: #1abc9c;
    border-color: #1abc9c;
    color: #07110f;
}

.df-guide-index-hero .df-btn-solid:hover { color: #051010; }

.df-guide-library {
    background: radial-gradient(circle at 50% 12%, rgba(26,188,156,.1), transparent 30%), #050606;
    padding: clamp(82px, 9vw, 138px) 0 clamp(96px, 10vw, 156px);
    scroll-margin-top: 40px;
}

.df-guide-library__container { margin: 0 auto; max-width: 1240px; padding: 0 32px; }

.df-guide-library__header {
    align-items: start;
    display: grid;
    gap: clamp(20px, 3vw, 46px);
    grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
    margin: 0 auto clamp(58px, 6vw, 88px);
    max-width: 1020px;
    text-align: center;
}

.df-guide-library__header > div { min-width: 0; }
.df-guide-library__header .df-kicker { color: rgba(245,242,235,.62); margin: 0 0 13px; }

.df-guide-library__header h2 {
    align-items: center;
    display: flex;
    font: 500 clamp(28px, 2.5vw, 40px)/1.15 Poppins, sans-serif;
    gap: clamp(9px, 1vw, 16px);
    justify-content: center;
    letter-spacing: .08em;
    margin: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.df-guide-library__header h2 span { color: #f5f2eb; }
.df-guide-library__header h2 strong { color: #78e4d2; font-weight: 500; }
.df-guide-library__header h2 i { color: #1abc9c; font-size: .44em; font-style: normal; text-shadow: 0 0 8px rgba(120,228,210,.48); }

.df-guide-library__header > div > p:last-child {
    color: rgba(245,242,235,.68);
    font: 400 clamp(13px, 1vw, 16px)/1.6 Lato, sans-serif;
    letter-spacing: .06em;
    margin: 14px 0 0;
}

.df-guide-library__line {
    background: linear-gradient(90deg, transparent, rgba(120,228,210,.66));
    height: 1px;
    margin-top: clamp(40px, 3.6vw, 56px);
}

.df-guide-library__line:last-child { background: linear-gradient(90deg, rgba(120,228,210,.66), transparent); }

.df-guide-library__grid {
    display: grid;
    gap: clamp(28px, 3vw, 46px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: center;
}

.df-guide-library__grid:has(.df-guide-card:only-child) { grid-template-columns: minmax(300px, 380px); }

@property --df-guide-card-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.df-guide-card {
    aspect-ratio: 3 / 4.55;
    background: #050607;
    border: 1px solid rgba(120,228,210,.2);
    border-radius: 7px;
    box-shadow: inset 0 0 48px rgba(0,0,0,.48), 0 26px 70px rgba(0,0,0,.26);
    min-height: 520px;
    overflow: hidden;
    position: relative;
    transition: border-color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}

.df-guide-card::after {
    --df-guide-card-angle: 0deg;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    animation: df-guide-card-border 8s linear infinite;
    background: conic-gradient(from var(--df-guide-card-angle), transparent 0deg 312deg, rgba(26,188,156,.07) 320deg, rgba(120,228,210,.64) 332deg, #d8fff8 340deg, rgba(120,228,210,.56) 348deg, transparent 358deg);
    content: '';
    filter: drop-shadow(0 0 4px rgba(120,228,210,.68));
    inset: 0;
    mask-composite: exclude;
    padding: 1px;
    pointer-events: none;
    position: absolute;
    z-index: 6;
}

.df-guide-card:nth-child(2)::after { animation-delay: -2.6s; }
.df-guide-card:nth-child(3)::after { animation-delay: -5.2s; }

@keyframes df-guide-card-border { to { --df-guide-card-angle: 360deg; } }

.df-guide-card__image {
    color: transparent;
    font-size: 0;
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    transition: transform .85s cubic-bezier(.22,.61,.36,1), filter .85s ease;
    width: 100%;
}

.df-guide-card__shade {
    background: linear-gradient(180deg, rgba(2,3,4,.28) 0%, rgba(2,3,4,.1) 24%, rgba(2,3,4,.66) 62%, rgba(2,3,4,.96) 100%), linear-gradient(90deg, rgba(2,3,4,.66), rgba(2,3,4,.14));
    inset: 0;
    position: absolute;
    z-index: 1;
}

.df-guide-card__content {
    bottom: 0;
    left: 0;
    padding: 92px clamp(25px, 2vw, 34px) clamp(28px, 2.5vw, 40px);
    position: absolute;
    right: 0;
    z-index: 3;
}

.df-guide-card__number {
    color: #78e4d2;
    font: 300 clamp(44px, 3.3vw, 60px)/.95 Poppins, sans-serif;
    letter-spacing: -.035em;
    margin: 0 0 30px;
    position: relative;
}

.df-guide-card__number::after {
    background: linear-gradient(90deg, #78e4d2, rgba(120,228,210,.35), transparent);
    bottom: -14px;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    width: 92px;
}

.df-guide-card__eyebrow { color: #78e4d2; font: 600 10px/1.2 Poppins, sans-serif; letter-spacing: .22em; margin: 0 0 12px; text-transform: uppercase; }

.df-guide-card h3 {
    border-left: 1px solid rgba(120,228,210,.58);
    font: 600 clamp(21px, 1.55vw, 27px)/1.2 Poppins, sans-serif;
    margin: 0 0 18px -16px;
    padding: 3px 0 3px 16px;
}

.df-guide-card h3 a { color: #f7f3eb; text-decoration: none; }

.df-guide-card__copy {
    color: rgba(247,243,235,.76);
    display: -webkit-box;
    font: 300 15px/1.58 Lato, sans-serif;
    margin: 0 0 22px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.df-guide-card__link { align-items: center; color: #78e4d2; display: inline-flex; font: 600 11px/1.2 Poppins, sans-serif; gap: 10px; letter-spacing: .18em; text-decoration: none; text-transform: uppercase; }
.df-guide-card__link span { font-size: 17px; transition: transform .3s ease; }

.df-guide-card:hover { border-color: rgba(120,228,210,.38); box-shadow: inset 0 0 42px rgba(0,0,0,.36), 0 34px 82px rgba(0,0,0,.42); transform: translateY(-5px); }
.df-guide-card:hover .df-guide-card__image { filter: saturate(1.06); transform: scale(1.035); }
.df-guide-card:hover .df-guide-card__link span { transform: translateX(5px); }
.df-guide-library__empty { color: rgba(245,242,235,.7); grid-column: 1 / -1; text-align: center; }

@media (max-width: 991px) {
    .df-guide-library__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .df-guide-library__grid:has(.df-guide-card:only-child) { grid-template-columns: minmax(300px, 380px); }
}

@media (max-width: 700px) {
    .df-guide-index-hero { background: linear-gradient(90deg, rgba(0,0,0,.84), rgba(0,0,0,.4)), linear-gradient(180deg, rgba(0,0,0,.08), #050606 100%), var(--guide-hero-image) center center / cover no-repeat; }
    .df-guide-index-hero { min-height: auto; }
    .df-guide-index-hero .df-guide-hero__inner { padding: 122px 0 54px; }
    .df-guide-index-hero .df-title { font-size: 32px; }
    .df-guide-index-hero .df-lead { font-size: 16px; }
    .df-guide-library__container { padding: 0 20px; }
    .df-guide-library__header { gap: 12px; grid-template-columns: minmax(16px, 1fr) auto minmax(16px, 1fr); margin-bottom: 48px; }
    .df-guide-library__header .df-kicker { font-size: 9px; letter-spacing: .16em; }
    .df-guide-library__header h2 { font-size: clamp(18px, 5.6vw, 24px); gap: 6px; letter-spacing: .04em; }
    .df-guide-library__header > div > p:last-child { font-size: 12px; letter-spacing: .03em; }
    .df-guide-library__line { margin-top: 47px; }
    .df-guide-library__grid, .df-guide-library__grid:has(.df-guide-card:only-child) { grid-template-columns: minmax(0, 1fr); }
    .df-guide-card { aspect-ratio: 3 / 4.45; margin: 0 auto; max-width: 390px; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .df-guide-card::after { animation: none; }
    .df-guide-card, .df-guide-card__image, .df-guide-card__link span { transition: none; }
}