.oniric-pv-page {
    --opv-bg: #0b1a25;
    --opv-hero-bg: #132c3e;
    --opv-text: #ffffff;
    --opv-text-soft: rgba(255, 255, 255, 0.60);
    --opv-line: rgba(255, 255, 255, 0.28);
    --opv-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
    --opv-glass-strong: linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.14));
    --opv-border: rgba(255, 255, 255, 0.38);
    --opv-radius: 1.5625rem;
    --opv-shell: 101.625rem;
    --opv-pad-x: clamp(1.25rem, 7.7vw, 9.1875rem);
    --opv-shadow: 0 0.25rem 1.5625rem rgba(255, 255, 255, 0.16);

    width: 100%;
    overflow: clip;
    background: var(--opv-bg);
    color: var(--opv-text);
    font-family: var(--oniric-font, "Plus Jakarta Sans", Arial, sans-serif);
}


/* ==========================================================================
   HOJA DE ESTILOS DEFINITIVA: ONIRIC PRO FIT LANDING (Figma Node 704:3229)
   ========================================================================== */
   
   @media (min-width: 992px) {
    .oniric-custom-navbar-desktop {
        top: 100px !important; /* Sitting perfectly below the 60px absolute ribbon (17px gap as in Figma) */
    }
    .oniric-custom-navbar-desktop.scrolled {
        top: 0 !important;
    }
    .oniric-home-hero {
        height: 100vh;
        min-height: 865px; /* Ensures exact minimum height from Figma specs */
        padding-top: 180px !important; /* Safe padding for absolute ribbon and capsule navbar spacing */
    }
    .oniric-hero-content-wrapper {
        gap: 120px; /* 120px gap from design specs between text block and button block */
    }
    .oniric-hero-title {
        line-height: 0.76; /* Extremely elegant, tight line height (76.02% from Figma spec) */
    }
    /* Overlap global footer on the homepage's bottom image banner */
    .oniric-footer {
        position: relative;
        z-index: 10;
        margin-top: -426px !important;
        background: var(--opv-bg) !important;
    }
    /* Shift banner text up to center it in the visible upper portion of the banner */
     .oniric-banner-content-inner {
		    min-height: 42rem;
			        padding-top: 0rem;


    } 
}

.oniric-image-banner-block::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            var(--opv-bg) 0%,
            rgba(0, 0, 0, 0) 33.849%
        ),
        linear-gradient(
            180deg,
            rgba(0, 37, 82, 0.30) 0%,
            rgba(0, 25, 43, 0.30) 100%
        ),
        rgba(0, 0, 0, 0.60);
}

/* Fondo general de la página profunda de Oniric */
.pro-fit-page {
    background-color: #0b1a25;
    color: #ffffff;
    font-family: var(--bs-body-font-family, 'Plus Jakarta Sans', sans-serif);
    overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   B. Hero Section & Cabecera Flotante
   -------------------------------------------------------------------------- */
.oniric-product-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 865px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 120px; /* Margen para no pisar el Nav flotante */
}

/* Degradado de máscara de Figma sobre el Hero Background */
.oniric-product-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(11, 26, 37, 0) 70.45%, rgb(11, 26, 37) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1;
}

.oniric-product-hero .container {
    position: relative;
    z-index: 2;
}

/* Hero Info Centrada */
.oniric-hero-info-wrapper {
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px; /* Separación de bloques en Figma */
}

.oniric-hero-subtitle {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 3.36px;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: -60px; /* Equilibrio con el gap */
}

.oniric-hero-title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 300;
    line-height: 1.09;
    color: #ffffff;
    margin: 0;
}

/* --------------------------------------------------------------------------
   C. Secciones del Cuerpo de la Página (Sección 1, 2, 3, 4)
   -------------------------------------------------------------------------- */
.oniric-product-main {
    background-color: #0b1a25;
}

.oniric-section {
    padding: 120px 240px; /* Padding exacto de Figma px-[240px] py-[120px] */
}

@media (max-width: 1399px) {
    .oniric-section {
        padding: 90px 100px;
    }
}

@media (max-width: 991px) {
    .oniric-section {
        padding: 60px 40px;
    }
}

@media (max-width: 575px) {
    .oniric-section {
        padding: 40px 20px;
    }
}

/* Ceja / Eyebrow */
.oniric-section-eyebrow {
    font-size: 12.8px;
    font-weight: 700;
    letter-spacing: 2.56px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.60);
}

/* Títulos Principales de Sección (54px Regular) */
.oniric-section-title {
    font-size: clamp(28px, 4.5vw, 54px);
    font-weight: 400;
    line-height: 1.157;
    color: #ffffff;
    margin-bottom: 0;
}
.oniric-section-title.max-w-1000 {
    max-width: 1000px;
}

/* Descripciones de Sección (24px, pl-256px de Figma adaptado responsive) */
.oniric-section-desc {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 400;
    line-height: 1.35;
    color: #ffffff;
}

/* Indentación de Figma implementada responsivamente para pantallas grandes */
@media (min-width: 992px) {
    .oniric-text-indent-desktop {
        padding-left: 120px; /* Indentación visual elegante para desktop */
    }
}

/* --------------------------------------------------------------------------
   C2. Columnas de Beneficios Tecnológicos (Biomecánica)
   -------------------------------------------------------------------------- */
.oniric-benefit-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

/* Glass Badge Circular (S / M) */
.oniric-benefit-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    border-radius: var(--oniric-radius-pill, 91px);
    border: 1px solid transparent;

    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
	
	border-radius: 5.6875rem;
background: linear-gradient(99deg, rgba(255, 255, 255, 0.20) 8.05%, rgba(255, 255, 255, 0.12) 91.8%), linear-gradient(99deg, rgba(255, 255, 255, 0.20) 8.05%, rgba(255, 255, 255, 0.12) 91.8%);
box-shadow: 0 4px 25px 0 rgba(255, 255, 255, 0.25);
backdrop-filter: blur(3.4000000953674316px);
	
}

.oniric-benefit-title {
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
    color: #ffffff;
    margin: 0;
}

.oniric-benefit-desc {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #ffffff;
    margin: 0;
}

/* --------------------------------------------------------------------------
   C3. Banner Final CTA
   -------------------------------------------------------------------------- */
.final-cta-section {
    background-color: #0b1a25;
    padding-bottom: 120px;
}

.oniric-cta-wrapper {
    max-width: 100%;
}

.oniric-cta-title {
    font-size: clamp(24px, 4vw, 48px);
    line-height: 1.09;
    color: #ffffff;
}


/* --------------------------------------------------------------------------
   E. Botón Esmerilado Genérico para Hero/CTA (Copiado de Oniric-Common)
   -------------------------------------------------------------------------- */
.btn-oniric-glass-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-family: var(--bs-body-font-family);
    font-size: 12px;
    font-weight: 500;
    color: var(--oniric-white, #f1f1ee);
    letter-spacing: -0.2752px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;

    padding: 18px 32px;
    border-radius: var(--oniric-radius-pill, 91px);
    border: 1px solid rgba(255, 255, 255, 0.60);

    background: linear-gradient(122.7deg, rgba(255, 255, 255, 0.20) 8.05%, rgba(255, 255, 255, 0.12) 91.8%);
    -webkit-backdrop-filter: blur(3.4px);
    backdrop-filter: blur(3.4px);

    box-shadow: 0px 4px 25px 0px rgba(255, 255, 255, 0.25);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
}

.btn-oniric-glass-hero:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.90);
    background: linear-gradient(122.7deg, rgba(255, 255, 255, 0.25) 8.05%, rgba(255, 255, 255, 0.16) 91.8%);
    box-shadow: 0px 8px 30px 0px rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
}

.btn-oniric-glass-hero:active {
    transform: translateY(0px);
    box-shadow: 0px 4px 15px 0px rgba(255, 255, 255, 0.20);
}

.intro-section {
    --oniric-text-stat-background: #0b1a25;
}

/* ========================================================================== 
   ONIRIC — PRODUCT DETAIL VIEW
   Figma: ficha de producto Oniric PRO / PRO FIT

   Dependencias:
   - oniric-common.css (tokens y botones glass)
   - Bootstrap 5 (grid, collapse, modal y toast)

   Todas las clases se encapsulan bajo .oniric-pv-page para evitar conflictos
   con la landing de producto y con las vistas legacy.
   ========================================================================== */



/* Corrige la variable local mal formada de .btn-oniric-glass-3 en el CSS común. */
.oniric-pv-page .btn-oniric-glass-3,
.oniric-pv-modal .btn-oniric-glass-3 {
    --relleno-cristal: linear-gradient(99deg, rgba(255, 255, 255, 0.20) 8.05%, rgba(255, 255, 255, 0.12) 91.8%);
}


.oniric-pv-page *,
.oniric-pv-page *::before,
.oniric-pv-page *::after {
    box-sizing: border-box;
}

.oniric-pv-shell {
    width: min(100%, var(--opv-shell));
    margin-inline: auto;
    padding-inline: var(--opv-pad-x);
}

/* --------------------------------------------------------------------------
   HERO / PRODUCT CONFIGURATOR
   -------------------------------------------------------------------------- */

.oniric-pv-hero {
    position: relative;
    isolation: isolate;
    min-height: 50rem;
    padding-block: clamp(18rem, 16vw, 13.5rem) clamp(5rem, 8vw, 7.5rem);
}

.oniric-pv-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 35rem) minmax(25rem, 1fr);
    gap: clamp(3rem, 5vw, 6.25rem);
    align-items: stretch;
}

/* Gallery */
.oniric-pv-gallery {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    min-width: 0;
}

.oniric-pv-gallery-card {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    min-height: 26.6875rem;
    /* padding: clamp(1.5rem, 3vw, 2.5rem); */
    border: 1px solid var(--opv-border);
    border-radius: var(--opv-radius);
    background: var(--opv-glass);
    box-shadow: var(--opv-shadow);
    -webkit-backdrop-filter: blur(0.425rem);
    backdrop-filter: blur(0.425rem);
}

.oniric-pv-gallery-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 8%, rgba(255, 255, 255, 0.22), transparent 38%),
        linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.20));
}

.oniric-pv-main-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    max-height: 22rem;
    object-fit: cover;
    filter: drop-shadow(0 1.5rem 2.5rem rgba(0, 0, 0, 0.24));
    opacity: 1;
    transform: scale(1);
    transition: opacity 180ms ease, transform 220ms ease;
}

.oniric-pv-main-image.is-changing {
    opacity: 0.25;
    transform: scale(0.985);
}

.oniric-pv-match {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: rgba(225, 82, 62, 0.76);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
    -webkit-backdrop-filter: blur(0.5rem);
    backdrop-filter: blur(0.5rem);
}

.oniric-pv-match.is-secondary {
    background: rgba(130, 93, 199, 0.72);
}

.oniric-pv-gallery-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
}

.oniric-pv-gallery-dot {
    position: relative;
    width: 1.1875rem;
    height: 1.1875rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 0.25rem 1.5625rem rgba(255, 255, 255, 0.16);
    cursor: pointer;
    transition: transform 200ms ease, background 200ms ease, border-color 200ms ease;
}

.oniric-pv-gallery-dot::after {
    content: "";
    position: absolute;
    inset: 0.25rem;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.85);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 200ms ease, transform 200ms ease;
}

.oniric-pv-gallery-dot:hover,
.oniric-pv-gallery-dot:focus-visible,
.oniric-pv-gallery-dot.is-active {
    border-color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.20);
    transform: scale(1.08);
    outline: none;
}

.oniric-pv-gallery-dot.is-active::after {
    opacity: 1;
    transform: scale(1);
}

/* Summary */
.oniric-pv-summary {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(2rem, 4vw, 3.75rem);
    min-width: 0;
}

.oniric-pv-summary-head {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.oniric-pv-kicker {
    margin: 0;
    color: var(--opv-text);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.21em;
    text-transform: uppercase;
}

.oniric-pv-title-block {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.oniric-pv-title {
    margin: 0;
    color: var(--opv-text);
    font-size: clamp(2.5rem, 4vw, 3rem);
    font-weight: 300;
    line-height: 1.03;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.oniric-pv-lead {
    max-width: 47rem;
    margin: 0;
    color: var(--opv-text);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.55;
    text-wrap: pretty;
}

/* Metrics */
.oniric-pv-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding-block: 1.0625rem;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.oniric-pv-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3125rem;
    min-width: 0;
    padding-inline: 0.75rem;
    text-align: center;
}

.oniric-pv-metric + .oniric-pv-metric {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.oniric-pv-metric dt {
    color: var(--opv-text-soft);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.16rem;
    text-transform: uppercase;
}

.oniric-pv-metric dd {
    margin: 0;
    color: var(--opv-text);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Selectors / buy */
.oniric-pv-buy-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
}

.oniric-pv-selectors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9375rem;
}

.oniric-pv-select-field {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}

.oniric-pv-select-field > label,
.oniric-pv-size-label {
    color: var(--opv-text-soft);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.oniric-pv-select-control {
    position: relative;
}

.oniric-pv-select-control select {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.875rem 3rem 0.875rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.70);
    border-radius: 5.6875rem;
    appearance: none;
    background: var(--opv-glass);
    color: var(--opv-text);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    outline: none;
    box-shadow: var(--opv-shadow);
    -webkit-backdrop-filter: blur(0.425rem);
    backdrop-filter: blur(0.425rem);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.oniric-pv-select-control select:focus {
    border-color: #fff;
    box-shadow: var(--opv-shadow), 0 0 0 0.1875rem rgba(255, 255, 255, 0.14);
}

.oniric-pv-select-control select option {
    background: #132c3e;
    color: #fff;
}

.oniric-pv-select-control svg {
    position: absolute;
    top: 50%;
    right: 1.5rem;
    width: 0.9375rem;
    height: 0.625rem;
    pointer-events: none;
    transform: translateY(-50%);
    fill: none;
    stroke: #fff;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.oniric-pv-price-row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    min-height: 3rem;
}

.oniric-pv-price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    color: #fff;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 400;
    line-height: 1;
}

.oniric-pv-old-price {
    color: var(--opv-text-soft);
    font-size: 0.9375rem;
    text-decoration: line-through;
}

.oniric-pv-add-button {
    width: 100%;
    min-height: 3.25rem;
}

.oniric-pv-add-button:disabled,
.oniric-pv-add-button[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
    filter: saturate(0.5);
}

.oniric-pv-add-button.is-loading span::after {
    content: "";
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    margin-left: 0.625rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -0.125rem;
    animation: oniric-pv-spin 700ms linear infinite;
}

@keyframes oniric-pv-spin {
    to { transform: rotate(360deg); }
}

.oniric-pv-booking-link,
.oniric-pv-text-link {
    align-self: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 0.75rem;
    line-height: 1.48;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.oniric-pv-booking-link:hover,
.oniric-pv-text-link:hover {
    color: #fff;
    opacity: 0.72;
}

.oniric-pv-size-box {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.05);
}

.oniric-pv-size-box p,
.oniric-pv-size-result {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.oniric-pv-size-result {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* --------------------------------------------------------------------------
   BODY SECTIONS
   -------------------------------------------------------------------------- */

.oniric-pv-main {
    background: var(--opv-bg);
}

.oniric-pv-section {
    padding-block: clamp(4.5rem, 8vw, 7.5rem);
}

.oniric-pv-section + .oniric-pv-section {
    padding-top: 0;
}

.oniric-pv-section-header {
    margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.oniric-pv-section-title {
    max-width: 70rem;
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 3.3vw, 2.25rem);
    font-weight: 400;
    line-height: 1.1575;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

/* Core card */
.oniric-pv-core-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(35rem, 56vw, 54rem);
    padding: clamp(2rem, 5vw, 3.75rem);
    border: 1px solid var(--opv-border);
    border-radius: var(--opv-radius);
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.64)),
        var(--oniric-pv-core-bg);
    background-position: center;
    background-size: cover;
    box-shadow: var(--opv-shadow);
}

.oniric-pv-core-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.20), transparent 35%),
        linear-gradient(0deg, rgba(11, 26, 37, 0.18), transparent 40%);
    pointer-events: none;
}

.oniric-pv-core-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: calc(clamp(51rem, 48vw, 39rem) - clamp(4rem, 10vw, 7.5rem));
}

.oniric-pv-core-description {
    max-width: 72rem;
    /* margin: auto 0 0; */
    color: #fff;
    font-size: clamp(1.0625rem, 1.65vw, 1.25rem);
    font-weight: 400;
    line-height: 1.45;
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   INFORMACIÓN SOBRE TALLAS — ONIRIC PRO
   Figma:
   - Container gap: 60px
   - 3 columnas con gap: 60px
   - Elemento talla gap: 20px
   - Copy gap: 10px
   -------------------------------------------------------------------------- */

.oniric-pv-sizes {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3.75rem; /* 60px */

    width: 100%;
}

.oniric-pv-sizes__header {
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.oniric-pv-sizes__title {
    max-width: none;
    margin: 0;

    font-size: 2.25rem; /* 36px */
    font-weight: 400;
    line-height: 1.1575;
}

.oniric-pv-sizes__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 3.75rem; /* 60px */

    width: 100%;
}


/* Cada talla ------------------------------------------------------------- */

.oniric-pv-size-card {
    align-items: flex-start;
    min-width: 0;

    /*
     * .oniric-benefit-card ya establece:
     * display: flex;
     * flex-direction: column;
     */
    gap: 1.25rem; /* 20px */
}

.oniric-pv-size-card__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem; /* 10px */

    width: 100%;
}


/* Cápsula S / M / L ------------------------------------------------------- */

.oniric-pv-size-card__badge {
    width: auto;
    min-width: 2.75rem;
    height: 2.0625rem;

    padding: 0.3125rem 0.9375rem;

    border: 1px solid transparent;
    border-radius: 5.6875rem;

    background:
        linear-gradient(
            99deg,
            rgba(255, 255, 255, 0.50) 8.05%,
            rgba(255, 255, 255, 0.30) 91.8%
        ) padding-box,

        linear-gradient(
            99deg,
            rgba(255, 255, 255, 0.60) 0%,
            rgba(102, 102, 102, 0.10) 100%
        ) border-box;

    color: #ffffff;

    box-shadow:
        0 0.25rem 1.5625rem
        rgba(255, 255, 255, 0.25);

    -webkit-backdrop-filter: blur(6.8px);
    backdrop-filter: blur(6.8px);

    font-family:
        Inter,
        "Plus Jakarta Sans",
        sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
}


/* Título y descripción --------------------------------------------------- */

.oniric-pv-size-card__title {
    margin: 0;

    color: #ffffff;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;
    font-size: 1.25rem; /* 20px */
    font-weight: 400;
    line-height: 2.375rem; /* 38px del JSON */
}

.oniric-pv-size-card__description {
    max-width: 100%;
    margin: 0;

    color: #ffffff;

    font-family:
        Inter,
        "Plus Jakarta Sans",
        sans-serif;
    font-size: 0.875rem; /* 14px */
    font-weight: 400;
    line-height: 1.375rem; /* 22px */

    text-wrap: pretty;
}

.oniric-pv-layer-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.oniric-pv-layer-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    padding: 0.625rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    font-size: 0.75rem;
    -webkit-backdrop-filter: blur(0.425rem);
    backdrop-filter: blur(0.425rem);
}

.oniric-pv-layer-chip img {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
}

/* Technology list */
.oniric-pv-technology-list {
    display: flex;
    flex-direction: column;
}

.oniric-pv-technology-item {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
    padding-block: 2.5rem;
}

.oniric-pv-technology-item + .oniric-pv-technology-item {
    border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.oniric-pv-technology-icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    color: #fff;
}

.oniric-pv-technology-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.oniric-pv-technology-copy {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.oniric-pv-technology-copy h3 {
    margin: 0;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.25;
}

.oniric-pv-technology-copy p {
    max-width: 70rem;
    margin: 0;
    color: #fff;
    font-family: Inter, var(--oniric-font, "Plus Jakarta Sans", sans-serif);
    font-size: 0.875rem;
    line-height: 1.57;
    text-wrap: pretty;
}

/* Related cards */
.oniric-pv-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
}

.oniric-pv-related-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 20rem;
    padding: 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: var(--opv-radius);
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.72)),
        var(--oniric-pv-related-bg);
    background-position: center;
    background-size: cover;
    color: #fff !important;
    font-size: 1.25rem;
    line-height: 1.2;
    text-decoration: none !important;
    box-shadow: var(--opv-shadow);
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms ease;
}

.oniric-pv-related-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 42%);
}

.oniric-pv-related-card:hover {
    color: #fff;
    transform: translateY(-0.375rem);
    box-shadow: 0 1rem 2.75rem rgba(0, 0, 0, 0.24), var(--opv-shadow);
}

.oniric-pv-related-card--contact {
    background:
        radial-gradient(circle at 75% 25%, rgba(225, 82, 62, 0.26), transparent 32%),
        radial-gradient(circle at 20% 80%, rgba(130, 93, 199, 0.24), transparent 35%),
        rgba(255, 255, 255, 0.04);
}

.oniric-pv-card-arrow {
    display: grid;
    place-items: center;
    align-self: flex-start;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    font-size: 1rem;
    transition: transform 300ms ease, background 300ms ease;
}

.oniric-pv-related-card:hover .oniric-pv-card-arrow {
    background: rgba(255, 255, 255, 0.18);
    transform: translateX(0.25rem);
}

/* FAQ */
.oniric-pv-faq {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.oniric-pv-faq-card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: var(--opv-radius);
    background: var(--opv-glass-strong);
    box-shadow: var(--opv-shadow);
    -webkit-backdrop-filter: blur(0.425rem);
    backdrop-filter: blur(0.425rem);
}

.oniric-pv-faq-trigger {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "meta action"
        "question question";
    gap: 1.25rem;
    width: 100%;
    padding: 2.5rem;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: left;
    cursor: pointer;
}

.oniric-pv-faq-meta {
    grid-area: meta;
    color: var(--opv-text-soft);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.16rem;
    text-transform: uppercase;
}

.oniric-pv-faq-action {
    grid-area: action;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
}

.oniric-pv-faq-action::before,
.oniric-pv-faq-action::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.875rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.8);
    transform: translate(-50%, -50%);
    transition: transform 220ms ease;
}

.oniric-pv-faq-action::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.oniric-pv-faq-trigger:not(.collapsed) .oniric-pv-faq-action::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.oniric-pv-faq-trigger strong {
    grid-area: question;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}

.oniric-pv-faq-answer {
    padding: 0 2.5rem 2.5rem;
    color: #fff;
    font-family: Inter, var(--oniric-font, "Plus Jakarta Sans", sans-serif);
    font-size: 1rem;
    line-height: 1.5;
}

.oniric-pv-faq-answer > :last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   MODAL / TOAST
   -------------------------------------------------------------------------- */

.oniric-pv-modal {
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 1.5625rem;
    background: rgba(11, 26, 37, 0.94);
    color: #fff;
    box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(1rem);
    backdrop-filter: blur(1rem);
}

.oniric-pv-modal .modal-header,
.oniric-pv-modal .modal-footer {
    border-color: rgba(255, 255, 255, 0.14);
}

.oniric-pv-modal-fields {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.oniric-pv-modal-fields > label {
    display: grid;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.oniric-pv-modal-input {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
}

.oniric-pv-modal-input input {
    min-width: 0;
    padding: 0.85rem 1rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
}

.oniric-pv-modal-input small {
    padding-right: 1rem;
    color: var(--opv-text-soft, rgba(255, 255, 255, 0.60));
}

.oniric-pv-modal-feedback {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(225, 82, 62, 0.55);
    border-radius: 0.75rem;
    background: rgba(225, 82, 62, 0.14);
}

.oniric-pv-toast-wrap {
    z-index: 1090;
}

.oniric-pv-toast {
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 1rem;
    background: rgba(11, 26, 37, 0.92);
    color: #fff;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.32);
    -webkit-backdrop-filter: blur(0.75rem);
    backdrop-filter: blur(0.75rem);
}

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

@media (max-width: 1199.98px) {
    .oniric-pv-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 3.5rem;
    }

    .oniric-pv-related-grid {
        gap: 1.5rem;
    }
}

@media (max-width: 991.98px) {
    .oniric-pv-page {
        --opv-pad-x: 2rem;
    }

    .oniric-pv-hero {
        min-height: auto;
        padding-top: 10rem;
    }

    .oniric-pv-hero-grid {
        grid-template-columns: 1fr;
    }

    .oniric-pv-gallery-card {
        min-height: 32rem;
    }

    .oniric-pv-main-image {
        max-height: 27rem;
    }

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

    .oniric-pv-related-card--contact {
        grid-column: 1 / -1;
        min-height: 14rem;
    }
}

@media (max-width: 767.98px) {
    .oniric-pv-page {
        --opv-pad-x: 1.5rem;
    }

    .oniric-pv-hero {
        padding-top: 8.5rem;
        padding-bottom: 4.5rem;
    }

    .oniric-pv-gallery-card {
        min-height: 23rem;
    }

    .oniric-pv-main-image {
        max-height: 19rem;
    }

    .oniric-pv-metrics {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .oniric-pv-metric {
        display: grid;
        grid-template-columns: 1fr auto;
        padding-block: 0.875rem;
        text-align: left;
    }

    .oniric-pv-metric + .oniric-pv-metric {
        border-top: 1px solid rgba(255, 255, 255, 0.16);
        border-left: 0;
    }

    .oniric-pv-metric dt,
    .oniric-pv-metric dd {
        text-align: left;
    }

    .oniric-pv-selectors {
        grid-template-columns: 1fr;
    }

    .oniric-pv-core-card {
        min-height: 34rem;
        background-position: center;
    }

    .oniric-pv-core-content {
        min-height: 28rem;
    }

    .oniric-pv-technology-item {
        grid-template-columns: 2rem minmax(0, 1fr);
        gap: 1.25rem;
    }

    .oniric-pv-related-grid {
        grid-template-columns: 1fr;
    }

    .oniric-pv-related-card,
    .oniric-pv-related-card--contact {
        grid-column: auto;
        min-height: 17rem;
    }

    .oniric-pv-faq-trigger,
    .oniric-pv-faq-answer {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .oniric-pv-page {
        --opv-pad-x: 1rem;
    }

    .oniric-pv-hero {
        padding-top: 7.5rem;
    }

    .oniric-pv-gallery-card {
        min-height: 19rem;
        padding: 1rem;
        border-radius: 1.25rem;
    }

    .oniric-pv-main-image {
        max-height: 16rem;
    }

    .oniric-pv-title {
        font-size: 2.25rem;
    }

    .oniric-pv-related-card,
    .oniric-pv-core-card,
    .oniric-pv-faq-card {
        border-radius: 1.25rem;
    }

    .oniric-pv-core-card {
        min-height: 30rem;
        padding: 1.5rem;
    }

    .oniric-pv-core-content {
        min-height: 26rem;
    }

    .oniric-pv-faq-trigger {
        gap: 1rem;
        padding-top: 1.75rem;
        padding-bottom: 1.75rem;
    }

    .oniric-pv-faq-meta {
        font-size: 0.6875rem;
        letter-spacing: 0.11rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oniric-pv-page *,
    .oniric-pv-page *::before,
    .oniric-pv-page *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.click-zoom__visual {
  aspect-ratio: 3 / 2;
  border-radius: .75em;
  width: 100%;
  overflow: hidden;
}

.click-zoom__img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

img[data-click-zoom],
[data-click-zoom] img,
[data-click-zoom-article] img {
  cursor: zoom-in;
}

[data-click-zoom-lightbox] > img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 0.75em;
}

.click-zoom__lightbox {
  z-index: 100;
  cursor: zoom-out;
  background-color: #000000e6;
  justify-content: center;
  align-items: center;
  padding: 3em;
  display: none;
  position: fixed;
  inset: 0%;
}