/* ========================================================================== 
   ONIRIC PRODUCT LANDING
   Estilos exclusivos de la landing comercial de producto.
   La retícula, botones, cards y banner base proceden de oniric-common.css.
   ========================================================================== */

.oniric-pl-page {
    --opl-bg: #050505;
    --opl-text: #f7f7f5;
    --opl-muted: rgba(255, 255, 255, 0.72);
    --opl-line: rgba(255, 255, 255, 0.22);

    width: 100%;
    overflow: clip;

    color: var(--opl-text);
    background: var(--opl-bg);
}

.oniric-pl-page--pro {
    --opl-bg: #7f5d48;
}

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

.oniric-pl-hero {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    min-height: clamp(44rem, 54vw, 64rem);

    background-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.14) 0%,
            rgba(0, 0, 0, 0.24) 48%,
            rgba(0, 0, 0, 0.82) 100%
        ),
        var(--oniric-pl-hero-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
	
	    background-attachment:
        fixed;
}

.oniric-pl-hero::after {
    content: "";

    position: absolute;
    z-index: -1;
    inset: auto 0 0;

    height: clamp(10rem, 18vw, 19rem);

    background: linear-gradient(
        180deg,
        rgba(5, 5, 5, 0) 0%,
        var(--opl-bg) 100%
    );

    pointer-events: none;
}

.oniric-pl-hero__frame {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: inherit;
}

.oniric-pl-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;

    width: min(100%, 66rem);
    padding-block: clamp(9rem, 13vw, 13rem) clamp(6rem, 9vw, 9rem);

    text-align: center;
}

.oniric-pl-hero__eyebrow,
.oniric-pl-section-header__eyebrow,
.oniric-pl-final-cta__eyebrow {
    margin: 0;

    color: rgba(255, 255, 255, 0.62);

    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.oniric-pl-hero__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;

    margin: 0;

    color: #fff;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(2.8rem, 5.6vw, 6.5rem);
    font-weight: 300;
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.oniric-pl-hero__title strong {
    font-weight: 200;
    font-size: smaller;
}

.oniric-pl-hero__title span {
    font-size: 0.62em;
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.oniric-pl-hero__lead {
    max-width: 48rem;
    margin: 0;

    color: rgba(255, 255, 255, 0.82);

    font-size: clamp(1rem, 1.35vw, 1.22rem);
    font-weight: 300;
    line-height: 1.65;
    text-wrap: pretty;
}

.oniric-pl-hero__actions,
.oniric-pl-final-cta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;

    margin-top: 1.25rem;
}

.oniric-pl-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;

    padding: 0.75rem 0.25rem;

    color: rgba(255, 255, 255, 0.82);

    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;

    transition: color 180ms ease, transform 180ms ease;
}

.oniric-pl-text-link:hover,
.oniric-pl-text-link:focus-visible {
    color: #fff;
    transform: translateX(0.2rem);
}

/* CUERPO ------------------------------------------------------------------ */

.oniric-pl-main {
    position: relative;
    z-index: 2;

    background: var(--opl-bg);
}

.oniric-pl-intro,
.oniric-pl-durability {
    background: transparent;
}

.oniric-pl-benefits {
    padding-block: var(--oniric-section-padding-y);
}

.oniric-pl-section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;

    max-width: 62rem;
    margin: 0 auto clamp(3.5rem, 6vw, 6rem);

    text-align: center;
}

.oniric-pl-section-header__title {
    margin: 0;

    color: #fff;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(2rem, 3.8vw, 4rem);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.oniric-pl-benefits__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(1.5rem, 2.46vw, 2.5rem);

    width: 100%;
}

.oniric-pl-benefit-card {
    min-width: 0;
    height: 100%;
}

/* CTA FINAL --------------------------------------------------------------- */

.oniric-pl-final-cta {
    min-height: clamp(38rem, 54vw, 58rem);
}

.oniric-pl-final-cta .oniric-banner-content-inner {
    display: flex;
}

.oniric-pl-final-cta__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.3rem;

    width: min(100%, 68rem);

    text-align: center;
}

.oniric-pl-final-cta__title {
    margin: 0;

    color: #fff;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(2rem, 4vw, 4.5rem);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

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

@media (max-width: 991.98px) {
    .oniric-pl-hero {
        min-height: 48rem;
        background-position: center top;
    }

    .oniric-pl-benefits__grid {
        grid-template-columns: 1fr;
    }

    .oniric-pl-benefit-card {
        max-width: 46rem;
        margin-inline: auto;
    }
}

@media (max-width: 575.98px) {
    .oniric-pl-hero {
        min-height: 43rem;
    }

    .oniric-pl-hero__content {
        align-items: flex-start;
        padding-block: 8rem 5rem;
        text-align: left;
    }

    .oniric-pl-hero__title {
        align-items: flex-start;
        font-size: clamp(2.45rem, 12vw, 4rem);
        text-wrap: pretty;
    }

    .oniric-pl-hero__lead {
        font-size: 0.98rem;
    }

    .oniric-pl-hero__actions,
    .oniric-pl-final-cta__actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .oniric-pl-hero__actions > *,
    .oniric-pl-final-cta__actions > * {
        justify-content: center;
        width: 100%;
        text-align: center;
    }

    .oniric-pl-section-header {
        align-items: flex-start;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oniric-pl-text-link {
        transition: none;
    }
}

     .oniric-banner-content-inner {
		    min-height: 48rem;
		    padding-top: 0rem;
		  }