/* ========================================
   Saber más (Conocer más) — page-specific styles.
   Reuses .page-section, .page-carousel and the brand utilities
   from base.css; only the bits unique to this page live here.
   ======================================== */

.saber-mas {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    padding-top: var(--space-8);
    padding-bottom: var(--space-16);
}

/* Hero: title hugs the navbar like Calculadora's hero. */
.saber-mas-hero {
    align-items: start;
}

.saber-mas-hero .page-section__copy {
    padding-top: 32px;
}

.saber-mas-hero__title {
    font-size: 64px;
    line-height: 1.05;
}

@media (max-width: 1024px) {
    .saber-mas-hero__title {
        font-size: 48px;
    }
}

/* Hero image: 40px rounded corners + brand-gradient border. The
   wrapper handles the gradient border (via .gradient-border in
   base.css) and clips the image to the same radius. */
.saber-mas-hero__art {
    width: 480px;
    max-width: 100%;
    border-radius: 40px;
    overflow: hidden;
    align-self: center;
    justify-self: end;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .saber-mas-hero__art {
        justify-self: stretch;
    }
}

.saber-mas-hero__art img {
    display: block;
    width: 100%;
    height: auto;
}

/* ========================================
   Recursos y documentación
   ======================================== */

.saber-mas-recursos {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.saber-mas-recursos__title {
    font-size: 64px;
    line-height: 1.05;
}

@media (max-width: 1024px) {
    .saber-mas-recursos__title {
        font-size: 48px;
    }
}

.recursos-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
}

/* Resource link: pill button, transparent fill with brand-gradient
   border, leading download icon. */
.recurso-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    background:
        linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
        var(--gradient-brand) border-box;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition:
        transform var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}

.recurso-link:hover {
    color: var(--color-text);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 153, 184, 0.25);
}

.recurso-link__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: url('../img/download.png') no-repeat center / contain;
}

@media (max-width: 600px) {
    .saber-mas {
        gap: var(--space-8);
    }

    .recurso-link {
        padding: var(--space-3) var(--space-5);
    }
}