/* Oniric Common Design System Styles & Tokens */

/* ===== EXTRACTED DESIGN VARIABLES FROM SITE.CSS ===== */
:root {
  /* ===== ONIRIC COLORS ===== */
  --bs-oniric-yellow: #FDDA25;
  --bs-oniric-red: #E1523E;
  --bs-oniric-violet: #825DC7;
  --bs-oniric-blue: #002F6C;
  --bs-oniric-white: #F1F1EE;
  --bs-oniric-black: #2D2926;

  --bs-oniric-yellow-rgb: 253, 218, 37;
  --bs-oniric-red-rgb: 225, 82, 62;
  --bs-oniric-violet-rgb: 130, 93, 199;
  --bs-oniric-blue-rgb: 0, 47, 108;
  --bs-oniric-white-rgb: 241, 241, 238;
  --bs-oniric-black-rgb: 45, 41, 38;
	
  --bs-blue: #3569ef;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-sabals: #47AD7C;
  --bs-sabals-rgb: 71, 173, 124;
   
  --bs-viscoform: #B2C5C4;
  --bs-gris-viscoform: #e4e4e4;
  --bs-azul-claro-viscoform: #8dd2ff;
  --bs-azul-viscoform: #3569ef;
  --bs-azul-oscuro-viscoform: #152752;
  --bs-negro-viscoform: #252121;

  --bs-azul-viscoform-rgb: 53, 105, 239;
  --bs-viscoform-rgb: 228, 228, 228;
   
  --bs-primary: #152752;
  --bs-primary-rgb: 21, 39, 82;
   
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-secondary: #152752;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 240, 241, 242;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
	
  /* ===== TYPOGRAPHY ===== */
  --bs-body-font-family: "Plus Jakarta Sans", Arial, sans-serif;
  --bs-vform-font-family: "Plus Jakarta Sans", sans-serif;
  --bs-font-sans-serif: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --bs-body-font-size: 1.1rem;
  --bs-body-font-weight: 350;
  --bs-body-line-height: 1.4;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-acc: 0;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0rem;
  --bs-border-radius-sm: 0rem;
  --bs-border-radius-lg: 0rem;
  --bs-border-radius-xl: 0rem;
  --bs-border-radius-2xl: 0rem;
  --bs-border-radius-pill: 0rem;
  --bs-link-color: #152752;
  --bs-link-color-rgb: 21, 39, 82;
  --bs-link-hover-color: #3569ef;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
  --bs-badge-font-size: 0.9em !important;
  
  --bs-emphasis-color: #222;
  --bs-border-radius-pill: 50rem;
	
  --oniric-black:#2D2926;
  --oniric-white:#F1F1EE;
  --oniric-performance-red:#E1523E;
  --oniric-performance-yellow:#FDDA25;
  --oniric-performance-violet:#825DC7;
  --oniric-performance-blue:#002F6C;
  --oniric-ink:#081626;
    --oniric-muted: rgba(255, 255, 255, 0.60);
  --oniric-border:rgba(8,22,38,.14);
  --oniric-radius-pill:91px; /* Rounded pill custom radius from Figma */
  --oniric-radius-soft:18px;
  --oniric-shadow-soft:0 16px 36px rgba(8,22,38,.14);
  --oniric-shadow-hover:0 22px 46px rgba(8,22,38,.22);
  --oniric-transition:all .22s ease;

  /* ===== BRAND FIGMA VARIABLES (NEWLY ADDED) ===== */
  --oniric-relleno-cristal: linear-gradient(99deg, rgba(255, 255, 255, 0.20) 8.05%, rgba(255, 255, 255, 0.12) 91.8%);  
  --oniric-relleno-cristal-hover: linear-gradient(99deg, rgba(255, 255, 255, 0.12) 8.05%, rgba(255, 255, 255, 0.20) 91.8%);
  --oniric-trazo-button: rgba(255, 255, 255, 0.25);
  --oniric-trazo-button-hover: rgba(102, 102, 102, 0.10);
  --oniric-efecto-blur: 6.8px;
  --oniric-sombra-cristal: 0px 4px 25px 0px rgba(255, 255, 255, 0.25);
  --oniric-sombra-cristal-hover: 0px 8px 30px 0px rgba(255, 255, 255, 0.35);
  --oniric-button-padding: 18px 32px;
  
    --oniric-font: 'Plus Jakarta Sans', sans-serif;
  --oniric-glass-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.08) 100%);
  --oniric-glass-border: rgba(255, 255, 255, 0.35);
  --oniric-glass-shadow: 0px 4px 25px 0px rgba(255, 255, 255, 0.15);
  --oniric-glass-blur: blur(8px);
  
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/plus-jakarta/PlusJakartaSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/plus-jakarta/PlusJakartaSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/plus-jakarta/PlusJakartaSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/plus-jakarta/PlusJakartaSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/plus-jakarta/PlusJakartaSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html,
body {
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    font-weight: 400;
	    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

body.oniric-fnd {
    --opv-bg: #071720;
}

body.oniric-theme-pro {
    --oniric-product-background: #071721;
}

body.oniric-theme-pro-fit {
    --oniric-product-background: #081925;
}

/* --------------------------------------------------------------------------
   1. Oniric Glassmorphism Pill Button - Figma-style
   -------------------------------------------------------------------------- */

.btn-oniric-glass {
    --oniric-glass-blur: .75em;
    --oniric-glass-fill: rgba(212, 212, 212, 0.15);
    --oniric-glass-fill-hover: rgba(255, 255, 255, 0.20);
    --oniric-glass-border: rgba(255, 255, 255, 0.26);
    --oniric-glass-border-hover: rgba(255, 255, 255, 0.42);

    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    font-family: var(--bs-body-font-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.2752px;

    color: var(--oniric-white) !important;
    text-decoration: none !important;
    white-space: nowrap;

    padding: var(--oniric-button-padding);
    border-radius: var(--oniric-radius-pill);
    border: 1px solid var(--oniric-glass-border);

    background: rgba(255, 255, 255, 0.08);

    -webkit-backdrop-filter: saturate(120%) blur(var(--oniric-glass-blur));
    backdrop-filter: saturate(120%) blur(var(--oniric-glass-blur));

    box-shadow:
        inset 0 0 1.75em rgba(242, 242, 242, 0.16),
        inset .1875em .28125em .09375em -.1875em rgba(179, 179, 179, 0.5),
        inset -.1875em -.28125em .09375em -.1875em rgba(179, 179, 179, 0.3),
        0 8px 24px rgba(0, 0, 0, 0.16);

    cursor: pointer;

    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Capa de relleno cristal */
.btn-oniric-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;

    border-radius: inherit;
    background:
        linear-gradient(
            99deg,
            rgba(255, 255, 255, 0.20) 8.05%,
            rgba(255, 255, 255, 0.08) 91.8%
        ),
        var(--oniric-glass-fill);

    opacity: 1;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Brillos, bordes internos y profundidad */
.btn-oniric-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    border-radius: inherit;
    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.38) 0%,
            rgba(255, 255, 255, 0.08) 28%,
            rgba(255, 255, 255, 0.00) 55%
        );

    box-shadow:
        inset .28125em .28125em .09375em -.328125em rgba(255, 255, 255, 0.8),
        inset -.28125em -.28125em .09375em -.328125em rgba(255, 255, 255, 0.5),
        inset .1875em .28125em .09375em -.1875em rgba(179, 179, 179, 0.5),
        inset -.1875em -.28125em .09375em -.1875em rgba(179, 179, 179, 0.3),
        inset 0 0 1.75em rgba(242, 242, 242, 0.30);

    mix-blend-mode: plus-lighter;
    opacity: 0.85;

    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-oniric-glass:hover {
    color: var(--bs-white) !important;
    border-color: var(--oniric-glass-border-hover);
    background-color: rgba(255, 255, 255, 0.12);

    transform: translateY(-2px);

    box-shadow:
        inset 0 0 1.75em rgba(242, 242, 242, 0.24),
        inset .1875em .28125em .09375em -.1875em rgba(255, 255, 255, 0.55),
        inset -.1875em -.28125em .09375em -.1875em rgba(179, 179, 179, 0.35),
        0 12px 32px rgba(0, 0, 0, 0.22);
}

.btn-oniric-glass:hover::before {
    background:
        linear-gradient(
            99deg,
            rgba(255, 255, 255, 0.28) 8.05%,
            rgba(255, 255, 255, 0.14) 91.8%
        ),
        var(--oniric-glass-fill-hover);
}

.btn-oniric-glass:hover::after {
    opacity: 1;
}

.btn-oniric-glass:active {
    transform: translateY(0);
}

.btn-oniric-glass:focus-visible {
    outline: none;
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow:
        inset 0 0 1.75em rgba(242, 242, 242, 0.24),
        0 0 0 3px rgba(255, 255, 255, 0.18),
        0 12px 32px rgba(0, 0, 0, 0.22);
}

/* Para iconos dentro del botón */
.btn-oniric-glass svg,
.btn-oniric-glass i,
.btn-oniric-glass img {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* Para asegurar que el texto queda por encima del cristal */
.btn-oniric-glass span {
    position: relative;
    z-index: 1;
}


/* --------------------------------------------------------------------------
   2. Oniric Glass Button 2 - Figma button_2
   -------------------------------------------------------------------------- */

.btn-oniric-glass-2 {
    --oniric-glass-2-radius: 91px;
    --oniric-glass-2-blur: 6.8px;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 18px 32px;

    font-family: "Plus Jakarta Sans", var(--bs-body-font-family);
    font-size: 16px;
    font-weight: 500;
    line-height: 13.76px;
    letter-spacing: -0.275px;

    color: #F1F1EE !important;
    text-decoration: none !important;
    white-space: nowrap;

    border: 1px solid transparent;
    border-radius: var(--oniric-glass-2-radius);

    background:
        linear-gradient(
            99deg,
            rgba(255, 255, 255, 0.50) 0%,
            rgba(255, 255, 255, 0.30) 100%
        ) padding-box,
        linear-gradient(
            99deg,
            rgba(255, 255, 255, 0.60) 0%,
            rgba(102, 102, 102, 0.10) 100%
        ) border-box;

    -webkit-backdrop-filter: blur(var(--oniric-glass-2-blur));
    backdrop-filter: blur(var(--oniric-glass-2-blur));

    box-shadow:
        0 4px 25px rgba(255, 255, 255, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        inset 0 -1px 0 rgba(102, 102, 102, 0.10);

    cursor: pointer;

    transition:
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Capa extra de cristal */
.btn-oniric-glass-2::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;

    border-radius: inherit;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.42) 0%,
            rgba(255, 255, 255, 0.18) 42%,
            rgba(255, 255, 255, 0.06) 100%
        );

    opacity: 0.75;
    pointer-events: none;
}

/* Brillo interno superior y borde inferior suave */
.btn-oniric-glass-2::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    border-radius: inherit;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 30% 0%,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.18) 34%,
            rgba(255, 255, 255, 0.00) 68%
        );

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.45),
        inset 0 -1px 1px rgba(45, 41, 38, 0.12),
        inset 0 0 18px rgba(255, 255, 255, 0.12);

    opacity: 0.9;
}

.btn-oniric-glass-2:hover {
    color: #FFFFFF !important;

    transform: translateY(-2px);

    background:
        linear-gradient(
            99deg,
            rgba(255, 255, 255, 0.58) 0%,
            rgba(255, 255, 255, 0.36) 100%
        ) padding-box,
        linear-gradient(
            99deg,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(102, 102, 102, 0.14) 100%
        ) border-box;

    box-shadow:
        0 6px 32px rgba(255, 255, 255, 0.32),
        0 12px 32px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.48),
        inset 0 -1px 0 rgba(102, 102, 102, 0.12);
}

.btn-oniric-glass-2:hover::before {
    opacity: 0.95;
}

.btn-oniric-glass-2:hover::after {
    opacity: 1;
}

.btn-oniric-glass-2:active {
    transform: translateY(0);
}

.btn-oniric-glass-2:focus-visible {
    outline: none;

    box-shadow:
        0 4px 25px rgba(255, 255, 255, 0.25),
        0 0 0 3px rgba(255, 255, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

/* Elementos internos */
.btn-oniric-glass-2 span,
.btn-oniric-glass-2 svg,
.btn-oniric-glass-2 i,
.btn-oniric-glass-2 img {
    position: relative;
    z-index: 1;
}

.btn-oniric-glass-2 svg,
.btn-oniric-glass-2 i,
.btn-oniric-glass-2 img {
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   3. Oniric Glass Button 3 - Figma transparent hover directional
   -------------------------------------------------------------------------- */

.btn-oniric-glass-3 {
    --btn-3-radius: 91px;
    --btn-3-blur: 6.8px;
	--relleno-cristal: background: linear-gradient(99deg, rgba(255, 255, 255, 0.20) 8.05%, rgba(255, 255, 255, 0.12) 91.8%);

    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

	padding: 1.125rem 2rem;
    border-radius: var(--btn-3-radius);
    border: 1px solid transparent;

    font-family: "Plus Jakarta Sans", var(--bs-body-font-family);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;
    letter-spacing: -0.01719rem;

    color: rgba(241, 241, 238, 1) !important;
    text-decoration: none !important;
    white-space: nowrap;

    /*
      Stroke degradado de Figma:
      #FFFFFF99 → #6666661A
    */
	background: var(--relleno-cristal, linear-gradient(99deg, rgba(255, 255, 255, 0.20) 8.05%, rgba(255, 255, 255, 0.12) 91.8%));
    -webkit-backdrop-filter: blur(var(--btn-3-blur));
    backdrop-filter: blur(var(--btn-3-blur));

    box-shadow:
        0 4px 25px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.01),
        inset 0 -1px 0 rgba(0, 0, 0, 0.01);

    cursor: pointer;

    transition:
        transform 300ms cubic-bezier(0, 0, 0.58, 1),
        box-shadow 300ms cubic-bezier(0, 0, 0.58, 1),
        border-color 300ms cubic-bezier(0, 0, 0.58, 1);
}

/* Relleno cristal: mucho más transparente que la versión anterior */
.btn-oniric-glass-3::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -2;

    border-radius: inherit;

    /*
      El degradado es más ancho para poder "moverlo".
      En reposo: más luz hacia la derecha.
      En hover: más luz hacia la izquierda.
    */
    background:
        linear-gradient(
            100deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.08) 35%,
            rgba(255, 255, 255, 0.16) 50%,
            rgba(255, 255, 255, 0.08) 65%,
            rgba(255, 255, 255, 0.05) 100%
        );

    background-size: 200% 100%;
    background-position: 100% 50%;

    opacity: 1;
    pointer-events: none;

    transition:
        background-position 300ms cubic-bezier(0, 0, 0.58, 1),
        opacity 300ms cubic-bezier(0, 0, 0.58, 1);
}

/* Capa de brillo direccional / efecto cristal */
.btn-oniric-glass-3::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;

    border-radius: inherit;
    pointer-events: none;

    /*
      Brillo suave lateral.
      También se mueve en hover.
    */
    background:
        radial-gradient(
            circle at 82% 50%,
            rgba(255, 255, 255, 0.24) 0%,
            rgba(255, 255, 255, 0.10) 34%,
            rgba(255, 255, 255, 0.00) 68%
        );

    opacity: 0.85;

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.22),
        inset 0 -1px 1px rgba(225, 225, 225, 0.16),
        inset 0 0 24px rgba(255, 255, 255, 0.06);

    transition:
        opacity 300ms cubic-bezier(0, 0, 0.58, 1),
        background 300ms cubic-bezier(0, 0, 0.58, 1),
        box-shadow 300ms cubic-bezier(0, 0, 0.58, 1);
}

/* Texto */
.btn-oniric-glass-3 span {
    position: relative;
    z-index: 1;

    opacity: 1;
    color: rgba(241, 241, 238, 1);

    transition:
        opacity 300ms cubic-bezier(0, 0, 0.58, 1),
        color 300ms cubic-bezier(0, 0, 0.58, 1);
}

/* Iconos si los hubiera */
.btn-oniric-glass-3 svg,
.btn-oniric-glass-3 i,
.btn-oniric-glass-3 img {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* Hover / estado activo */
.btn-oniric-glass-3:hover,
.btn-oniric-glass-3.is-active {
    transform: translateY(-1px);

    box-shadow:
        0 4px 25px rgba(255, 255, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -1px 0 rgba(225, 225, 225, 0.20);
}

/*
  Aquí se produce el cambio visible:
  el brillo/transparencia pasa del lado derecho al lado izquierdo.
*/
.btn-oniric-glass-3:hover::before,
.btn-oniric-glass-3.is-active::before {
    background-position: 0% 50%;
    opacity: 0.88;
}

.btn-oniric-glass-3:hover::after,
.btn-oniric-glass-3.is-active::after {
    background:
        radial-gradient(
            circle at 18% 50%,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.09) 34%,
            rgba(255, 255, 255, 0.00) 68%
        );

    opacity: 0.72;

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.18),
        inset 0 -1px 1px rgba(225, 225, 225, 0.18),
        inset 0 0 24px rgba(255, 255, 255, 0.04);
}

/*
  Atenuación del texto en hover,
  como se aprecia en la segunda captura.
*/
.btn-oniric-glass-3:hover span,
.btn-oniric-glass-3.is-active span {
    opacity: 0.58;
    color: rgba(241, 241, 238, 0.58);
}

.btn-oniric-glass-3:active {
    transform: translateY(0);
}

.btn-oniric-glass-3:focus-visible {
    outline: none;

    box-shadow:
        0 4px 25px rgba(255, 255, 255, 0.20),
        0 0 0 3px rgba(255, 255, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

/* --------------------------------------------------------------------------
   2. Generic Primary Solid Pill Button (Figma Node 123:28)
   -------------------------------------------------------------------------- */
.btn-oniric-primary-solid {
    font-family: var(--bs-body-font-family);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.2752px;
    color: var(--bs-black) !important;
    background-color: var(--bs-white);
    border: 1px solid var(--bs-white);
    border-radius: var(--oniric-radius-pill);
    padding: var(--oniric-button-padding);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    box-shadow: 0px 4px 15px rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.btn-oniric-primary-solid:hover {
    background-color: transparent;
    color: var(--bs-white) !important;
    border-color: var(--bs-white);
    transform: translateY(-2px);
    box-shadow: 0px 8px 25px rgba(255, 255, 255, 0.2);
}

.btn-oniric-primary-solid:active {
    transform: translateY(0);
}

/* Common Section Eyebrow Tag */
.oniric-eyebrow-tag {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.21rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.25rem;
    display: inline-block;
}

/* Cart Badge indicators */
.oniric-cart-badge-count {
    background: var(--bs-oniric-red);
    color: var(--bs-white);
    font-size: 9px;
    font-weight: 700;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: -2px;
    box-shadow: 0 0 6px rgba(225, 82, 62, 0.5);
}

.oniric-cart-capsule-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    position: relative;
}


/* ==========================================================================
   PORTADA HERO - DESKTOP (Figma Node 684:614)
   ========================================================================== */

.oniric-hero-portada {
    position: relative;
    width: 100%;
    min-height: 500px; /* Altura del frame en Figma */
    background-color: #000000; /* Fondo negro según Figma */
    padding: 100px 0;
    overflow: hidden;
}

.oniric-hero-portada-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 120px; /* Separación del botón con respecto al texto de Figma */
    width: 100%;
    max-width: 1280px;
    padding: 0 140px; /* Padding lateral de 140px de Figma */
}

/* Ajustes Responsivos de Espaciado */
@media (max-width: 991px) {
    .oniric-hero-portada-wrapper {
        padding: 0 40px;
        gap: 60px; /* Reducción de gap en móviles para mejorar la densidad */
    }
}

@media (max-width: 575px) {
    .oniric-hero-portada-wrapper {
        padding: 0 20px;
        gap: 40px;
    }
}

/* Bloque de Texto (Kicker + Title) */
.oniric-hero-portada-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Separación de 20px entre Kicker y Title en Figma */
}

/* Subtítulo / Eyebrow (Regular, tracking 3.36px) */
.oniric-hero-portada-kicker {
    font-family: var(--bs-body-font-family);
    font-size: 16px;
    font-weight: 400; /* Regular */
    color: var(--oniric-white, #F1F1EE);
    letter-spacing: 3.36px; /* Tracking 21% s/16px */
    text-transform: uppercase;
}

/* Título Principal (Light, 48px, line-height 1.03) */
.oniric-hero-portada-title {
    font-family: var(--bs-body-font-family);
    font-size: clamp(28px, 4.5vw, 48px); /* Responsive font sizing */
    font-weight: 300; /* Light */
    line-height: 1.03; /* Estricto line-height de Figma */
    color: var(--bs-white, #ffffff);
    margin: 0;
}

/* Botón de Vidrio Esmerilado (Glassmorphism Pill) */
.btn-oniric-glass-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Tipografía y geometría del botón */
    font-family: var(--bs-body-font-family);
    font-size: 12px;
    font-weight: 500; /* Medium */
    color: var(--oniric-white, #f1f1ee);
    letter-spacing: -0.2752px; /* Tracking estricto de Figma */
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;

    padding: 18px 32px; /* Padding de Figma py-18 px-32 */
    border-radius: var(--oniric-radius-pill, 91px); /* Radio de 91px */
    border: 1px solid rgba(255, 255, 255, 0.60); /* Borde de Figma */

    /* Relleno de Cristal y Difuminado */
    background: linear-gradient(129.4deg, 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); /* Blur de 3.4px de Figma */

    /* Sombra de Cristal */
    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;
}

/* Estado Interactivos (Hover & Active) */
.btn-oniric-glass-hero:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.90);
    background: linear-gradient(129.4deg, 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); /* Pequeña elevación interactiva */
}

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

/* 1. Ribbon/Alert Strip */
.oniric-top-ribbon {
    backdrop-filter: blur(3.4px);
    -webkit-backdrop-filter: blur(3.4px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: linear-gradient(163.6deg, rgba(255, 255, 255, 0.2) 8.05%, rgba(255, 255, 255, 0.12) 91.8%);
    box-shadow: 0px 4px 25px 0px rgba(255, 255, 255, 0.25);
    padding: 14px 24px;
    font-size: 12px;
    color: #ffffff;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1045;
}

.oniric-top-ribbon a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-position: from-font;
    font-weight: 500;
    transition: opacity 0.2s ease;
    margin-left: 8px;
}

.oniric-top-ribbon a:hover {
    opacity: 0.85;
}

/* =========================================================
   5. FULL-WIDTH BOTTOM IMAGE BANNER — ONIRIC RECOVERY LAB
   Figma:
   - Full width
   - Padding: 80px 147px
   - Gap: 20px
   - Background image + overlays
   ========================================================= */

.oniric-image-banner-block {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    width: 100%;
    /* min-height: 42rem; */
    /* height: 42rem; */

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 5rem 9.1875rem; /* 80px 147px */

    text-align: center;

    background-image: var(--banner-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Overlays de Figma:
   1) degradado negro superior -> transparente
   2) overlay negro semitransparente
   3) degradado rojizo */
.oniric-image-banner-block::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            #000000 0%,
            rgba(0, 0, 0, 0) 33.849%
        ),
        linear-gradient(
            180deg,
            rgba(225, 82, 62, 0.30) 0%,
            rgba(252, 219, 219, 0.30) 100%
        ),
        rgba(0, 0, 0, 0.60);
}

.oniric-banner-content-inner {
    position: relative;
    z-index: 2;
	
					    min-height: 42rem;

    width: 100%;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem; /* 20px */
}

.oniric-banner-claim {
    margin: 0;

    color: #F1F1EE;
    text-align: center;

    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    font-size: 1.5rem; /* 24px */
    line-height: 2.4375rem; /* 39px */
    letter-spacing: -0.00875rem; /* -0.14px */
    font-weight: 400;
}

.oniric-banner-claim-regular {
    font-weight: 200;
}

.oniric-banner-claim-bold {
    font-weight: 500;
}

    .oniric-image-banner-block {
        padding: 5rem 6rem;
        min-height: 60rem;
        height: 60rem;
    }

/* XL */
@media (max-width: 1399.98px) {
    .oniric-image-banner-block {
        padding: 5rem 6rem;
        min-height: 60rem;
        height: 60rem;
    }
}

/* LG */
@media (max-width: 1199.98px) {
    .oniric-image-banner-block {
        padding: 5rem 3rem;
        min-height: 46rem;
        height: 46rem;
    }
}

/* MD */
@media (max-width: 991.98px) {
    .oniric-image-banner-block {
        padding: 4.5rem 2rem;
        min-height: 40rem;
        height: 40rem;
    }

    .oniric-banner-claim {
        font-size: 1.375rem;
        line-height: 2rem;
    }
}

/* SM */
@media (max-width: 767.98px) {
    .oniric-image-banner-block {
        padding: 4rem 1.5rem;
        min-height: 34rem;
        height: 34rem;
    }

    .oniric-banner-claim {
        font-size: 1.25rem;
        line-height: 1.85rem;
    }
}

/* XS */
@media (max-width: 575.98px) {
	
	.oniric-banner-content-inner {
    min-height: 48rem !important;
	    }
		
    .oniric-image-banner-block {
        min-height: 57.625rem;
    }

    .oniric-banner-claim {
        font-size: 1rem;
        line-height: 1.25rem;
        font-weight: 200;
    }
	
	.flex-column {
		    flex-direction: column-reverse !important;
	}
	
	.oniric-eyebrow-tag {

font-size: 10px;
font-style: normal;
font-weight: 700;
line-height: 17.92px; /* 179.2% */
letter-spacing: 2.56px;
text-transform: uppercase;
}

.oniric-section-heading {
    font-size: clamp(1.5rem, 2.4vw, 2.75rem) !important;
        line-height: 1.625rem !important;
}

.btn-oniric-glass-3 {
width: 100% !important;
}

}

/* =========================================================
   ONIRIC — REUSABLE TEXT STAT SECTION
   Basado en:
   - Padding exterior Figma: 120px 147px
   - Separación entre bloques: 180px
   - Separación título/descripción: 100px
   - Desplazamiento descripción: 256px
   ========================================================= */

.oniric-text-stat-section {
    --oniric-text-stat-background: #000000;
    --oniric-text-stat-color: #ffffff;
    --oniric-text-stat-muted: rgba(255, 255, 255, 0.60);

    --oniric-text-stat-frame-width: 99rem; /* 1626px */
    --oniric-text-stat-section-padding-x: 9.1875rem; /* 147px */
    --oniric-text-stat-section-padding-y: 7.5rem; /* 120px */

    --oniric-text-stat-items-gap: 6.25rem; /* 180px */
    --oniric-text-stat-content-gap: 3rem;
    --oniric-text-stat-description-offset: 16rem; /* 256px */

    --oniric-text-stat-title-size: 3.375rem; /* 54px */
    --oniric-text-stat-body-size: 1.5rem; /* 24px */

    position: relative;
    width: 100%;
    overflow: hidden;

    padding:
        var(--oniric-text-stat-section-padding-y)
        var(--oniric-text-stat-section-padding-x);

    background: var(--oniric-text-stat-background);
    color: var(--oniric-text-stat-color);

}



/* Contenedor común centrado */
.oniric-text-stat-section__frame {
    width: 100%;
    max-width: var(--oniric-text-stat-frame-width);
    margin-inline: auto;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: var(--oniric-text-stat-items-gap);
}

/* Cada módulo título + descripción */
.oniric-text-stat {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: var(--oniric-text-stat-content-gap);
}

/* Zona superior */
.oniric-text-stat__heading {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 2.4375rem; /* 39px */
}

/* Etiqueta superior */
.oniric-text-stat__eyebrow {
    margin: 0;

    color: var(--oniric-text-stat-muted);

    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    font-size: 0.8rem; /* 12.8px */
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.16rem; /* 2.56px */

    text-transform: uppercase;
}

/* Titular principal */
.oniric-text-stat__title {
    width: 100%;

    margin: 0;

    color: var(--oniric-text-stat-color);

    font-size: clamp(
        2.5rem,
        3.2vw,
        var(--oniric-text-stat-title-size)
    );
    font-weight: 400;
    line-height: 1.1575;

    text-wrap: balance;
}

/* Contenedor del párrafo desplazado */
.oniric-text-stat__description-wrapper {
    width: 100%;
    padding-left: var(--oniric-text-stat-description-offset);

    display: flex;
    justify-content: flex-start;
}

/* Texto descriptivo */
.oniric-text-stat__description {
    width: 100%;

    margin: 0;

    color: var(--oniric-text-stat-color);
    font-size: clamp(
        1.125rem,
        1.5vw,
        var(--oniric-text-stat-body-size)
    );
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.015em;

    text-wrap: pretty;
}

/* Separador opcional entre módulos */
.oniric-text-stat--with-divider {
    padding-top: var(--oniric-text-stat-items-gap);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}


/* =========================================================
   VARIANTES
   ========================================================= */

/* Fondo Performance opcional */
.oniric-text-stat-section--performance {
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(225, 82, 62, 0.14) 0%,
            rgba(225, 82, 62, 0) 34%
        ),
        radial-gradient(
            circle at 5% 80%,
            rgba(130, 93, 199, 0.12) 0%,
            rgba(130, 93, 199, 0) 32%
        ),
        #000000;
}

/* Variante ligeramente más compacta */
.oniric-text-stat-section--compact {
    --oniric-text-stat-section-padding-y: 6rem;
    --oniric-text-stat-items-gap: 8rem;
    --oniric-text-stat-content-gap: 4rem;
}

/* Variante sin desplazamiento del texto inferior */
.oniric-text-stat-section--aligned {
    --oniric-text-stat-description-offset: 0rem;
}


/* =========================================================
   RESPONSIVE — XL
   ========================================================= */

@media (max-width: 1399.98px) {
    .oniric-text-stat-section {
        --oniric-text-stat-section-padding-x: 6rem;
        --oniric-text-stat-section-padding-y: 7rem;

        --oniric-text-stat-items-gap: 9rem;
        --oniric-text-stat-content-gap: 5.5rem;
        --oniric-text-stat-description-offset: 12rem;
    }

    .oniric-text-stat__title {
        max-width: 70rem;
    }

    .oniric-text-stat__description {
        max-width: 66rem;
    }
}


/* =========================================================
   RESPONSIVE — LG
   ========================================================= */

@media (max-width: 1199.98px) {
    .oniric-text-stat-section {
        --oniric-text-stat-section-padding-x: 3rem;
        --oniric-text-stat-section-padding-y: 6rem;

        --oniric-text-stat-items-gap: 8rem;
        --oniric-text-stat-content-gap: 4.5rem;
        --oniric-text-stat-description-offset: 8rem;
    }

    .oniric-text-stat__heading {
        gap: 2rem;
    }
}


/* =========================================================
   RESPONSIVE — MD
   ========================================================= */

@media (max-width: 991.98px) {
    .oniric-text-stat-section {
        --oniric-text-stat-section-padding-x: 2rem;
        --oniric-text-stat-section-padding-y: 5rem;

        --oniric-text-stat-items-gap: 6.5rem;
        --oniric-text-stat-content-gap: 3.5rem;
        --oniric-text-stat-description-offset: 4rem;

        --oniric-text-stat-title-size: 3rem;
        --oniric-text-stat-body-size: 1.375rem;
    }

    .oniric-text-stat__title {
        max-width: 100%;
    }

    .oniric-text-stat__description {
        max-width: 100%;
    }
}


/* =========================================================
   RESPONSIVE — SM
   ========================================================= */

@media (max-width: 767.98px) {
    .oniric-text-stat-section {
        --oniric-text-stat-section-padding-x: 1.5rem;
        --oniric-text-stat-section-padding-y: 4.5rem;

        --oniric-text-stat-items-gap: 5.5rem;
        --oniric-text-stat-content-gap: 2.5rem;
        --oniric-text-stat-description-offset: 0rem;

        --oniric-text-stat-title-size: 2.5rem;
        --oniric-text-stat-body-size: 1.25rem;
    }

    .oniric-text-stat__heading {
        gap: 1.5rem;
    }

    .oniric-text-stat__title {
        font-size: clamp(2rem, 8vw, 2.5rem);
        line-height: 1.18;
        letter-spacing: -0.025em;

        text-wrap: pretty;
    }

    .oniric-text-stat__description {
        font-size: 1.125rem;
        line-height: 1.5;
    }
}


/* =========================================================
   RESPONSIVE — XS
   ========================================================= */

@media (max-width: 575.98px) {
    .oniric-text-stat-section {
        --oniric-text-stat-section-padding-x: 1rem;
        --oniric-text-stat-section-padding-y: 4rem;

        --oniric-text-stat-items-gap: 4.5rem;
        --oniric-text-stat-content-gap: 2rem;
    }

    .oniric-text-stat__eyebrow {
        font-size: 0.6875rem;
        letter-spacing: 0.12rem;
    }

    .oniric-text-stat__title {
        font-size: clamp(1.875rem, 9vw, 2.25rem);
    }

    .oniric-text-stat__description {
        font-size: 1rem;
        line-height: 1.55;
    }
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

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

/* ==========================================================================
   ONIRIC COMMON — RETÍCULA GENERAL
   ========================================================================== */

:root {
    /*
     * Figma:
     * 1626px / 1920px = 84.6875%
     */
    --oniric-page-width: 84.6875%;
    --oniric-page-max-width: 101.625rem; /* 1626px */

    --oniric-page-width-tablet: 86.67%;
    --oniric-page-width-mobile: 86.67%;

    /* 40 / 1626 ≈ 2.46% */
    --oniric-grid-gap: 2.5vw;

    --oniric-section-padding-y:
        clamp(7.5rem, 6.25vw, 7.5rem);

    --oniric-ribbon-height: 60px;
    --oniric-navbar-top-with-ribbon: 100px;
    --oniric-home-hero-top-offset: 180px;
}

/* Corrige la custom property inválida que contenía "background:" en el valor. */
.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-page-frame {
    width: var(--oniric-page-width);
    max-width: var(--oniric-page-max-width);
    margin-right: 9.1875rem;
    margin-left: 9.1875rem;
    /* margin-top: 7.5rem; */
    box-sizing: border-box;
}

/* Titular de sección reutilizable. */
.oniric-section-heading {
    margin: 0;
    color: var(--oniric-white, #F1F1EE);
    font-size: clamp(2rem, 2.4vw, 2.75rem);
    font-weight: 400;
    line-height: 2.625rem;
    text-wrap: balance;
	    letter-spacing: 0em !important;

}

/* El banner final adopta la misma retícula horizontal. */
.oniric-image-banner-block {
    padding-inline: 0;
}

.oniric-banner-content-inner {
    width: var(--oniric-page-width);
    margin-inline: auto;
}

/* La sección de texto usada en sistemas-de-descanso usa el mismo ancho. */
.oniric-text-stat-section {
    --oniric-text-stat-section-padding-x: 0;
    --oniric-text-stat-description-offset: 15.744%;

    padding-inline: 0;
}

.oniric-text-stat-section__frame {
    width: var(--oniric-page-width);
    max-width: none;
}

.oniric-text-stat__title,
.oniric-text-stat__description {
    max-width: none;
}

@media (max-width: 991.98px) {
    .oniric-page-frame {
        width: var(--oniric-page-width-tablet);
        max-width: none;
		        /* margin-top: 3.75rem; */

    }

    .oniric-text-stat-section {
        --oniric-text-stat-description-offset: 8%;
    }
}

@media (max-width: 575.98px) {
    .oniric-page-frame {
        width: var(--oniric-page-width-mobile);
		        /* margin-top: 3.75rem; */

    }
	
.oniric-page-frame {

    margin-right: 2rem;
    margin-left: 2rem;

}	

    .oniric-home-index-view .oniric-steps-grid-heading .oniric-services-heading {
        /* width: min(100%, 19rem); */
        font-size: 1.5rem;
        line-height: 1.625rem;
    }

	
}

.orp-nav {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: min(var(--orp-container), calc(100% - 48px));
    margin: 0 auto;
    padding-top: 28px;

    transform: translateX(-50%);

    background: transparent;
}

.orp-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.orp-brand img {
    width: 172px;
    height: auto;
}

.orp-nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.orp-icon-button.btn-oniric-glass {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
}

.orp-icon-button svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}