/* color="#8dd2ff" - Azul Claro Viscoform
color="#3569ef" - Azul Viscoform
color="#152752" - Azul Oscuro Viscoform
color="#e4e4e4" - Gris Viscoform
color="#252121" - Negro Viscoform
color="#ffffff" - Blanco Viscoform */
: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", 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;
/* --bs-accordion-color: var(--bs-surface-color);
--bs-accordion-bg: var(--bs-body-bg);
--bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
--bs-accordion-border-color: var(--bs-border-color);
--bs-accordion-border-width: var(--bs-border-acc);
--bs-accordion-border-radius: 0rem;
--bs-accordion-inner-border-radius: calc(0.5rem - (var(--bs-border-width)));
--bs-accordion-btn-padding-x: 1.5rem;
--bs-accordion-btn-padding-y: 1.15rem;
--bs-accordion-btn-color: var(--bs-surface-color);
--bs-accordion-btn-bg: var(--bs-accordion-bg);
--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234f4f4f' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
--bs-accordion-btn-icon-width: 1.25rem;
--bs-accordion-btn-icon-transform: rotate(-180deg);
--bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233b71ca' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
--bs-accordion-btn-focus-box-shadow: inset 0 -1px 0 var(--bs-border-color);
--bs-accordion-body-padding-x: 1.5rem;
--bs-accordion-body-padding-y: 1.15rem;
--bs-accordion-active-color: #3b71ca;
--bs-accordion-active-bg: var(--bs-surface-bg);
--bs-accordion-btn-padding-y: 0.75rem; */
--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(8,22,38,.62);
--oniric-border:rgba(8,22,38,.14);
--oniric-radius-pill:999px;
--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;
}
.dropdown-menu {
--bs-dropdown-bg: #f8f9fa;
--bs-dropdown-border-radius: 0;
}
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-oniric-white-rgb), var(--bs-text-opacity)) !important;
}
.btn-info {
--bs-btn-color: #000;
--bs-btn-bg: #8dd2ff;
--bs-btn-border-color: #8dd2ff;
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: #e4e4e4;
--bs-btn-hover-border-color: #222;
--bs-btn-focus-shadow-rgb: 11, 172, 204;
--bs-btn-active-color: #000;
--bs-btn-active-bg: #3dd5f3;
--bs-btn-active-border-color: #222;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #000;
--bs-btn-disabled-bg: #8dd2ff;
--bs-btn-disabled-border-color: #8dd2ff;
}
.btn-outline-info {
--bs-btn-color: #3569ef;
--bs-btn-border-color: #3569ef;
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: #0dcaf0;
--bs-btn-hover-border-color: #0dcaf0;
--bs-btn-focus-shadow-rgb: 13, 202, 240;
--bs-btn-active-color: #000;
--bs-btn-active-bg: #0dcaf0;
--bs-btn-active-border-color: #0dcaf0;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #0dcaf0;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #0dcaf0;
--bs-gradient: none;
}
.carousel-indicators {
margin-bottom: 0rem;
}
#darkened-slide {
position: relative;
}
#darkened-slide::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2); /* Ajusta la opacidad según sea necesario */
z-index: 1;
}
.oniric-error-page * {
box-sizing: border-box;
}
.icono {
width: 32px;
height: 32px;
color: #fff;
fill: #fff;
margin-bottom: 3px;
margin-right: 10px;
}
.icono-vform {
width: 32px;
height: 32px;
color: var(--bs-azul-claro-viscoform);
fill: var(--bs-azul-claro-viscoform);
margin-bottom: 3px;
margin-right: 10px;
}
.form-control:focus {
color: #212529;
background-color: #fff;
border-color: #7fce9a;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(93, 191, 144, 0.25);
}
.form-check-input:checked {
background-color: var(--bs-link-hover-color);
border-color: var(--bs-link-hover-color);
}
.form-check-input:focus {
box-shadow: 0 0 0 0.25rem rgba(93, 191, 144, 0.25);
}
main > .container, main > .container-fluid
{
padding: 15px 15px 20px;
margin-top: 2em;
}
.footer {
background-color: #f5f5f5;
font-size: .9em;
height: 60px;
}
.footer > .container, .footer > .container-fluid {
padding-right: 15px;
padding-left: 15px;
}
/** @section Footers */
.footer-classic .footer-inner-1 {
padding: 50px 0;
color: #adb8c0;
background: var(--bs-azul-oscuro-viscoform);
}
.footer-classic .footer-inner-1 h1, .footer-classic .footer-inner-1 h2, .footer-classic .footer-inner-1 h3, .footer-classic .footer-inner-1 h4, .footer-classic .footer-inner-1 h5, .footer-classic .footer-inner-1 h6, .footer-classic .footer-inner-1 [class^='heading-'] {
color: #adb8c0;
}
.footer-classic .footer-inner-2 {
padding: 20px 0;
color: #82929c;
background: var(--bs-azul-oscuro-viscoform);
}
.footer-classic a {
color: inherit;
}
.footer-classic a:hover {
color: #ffffff;
}
.footer-classic * + .contact-list {
margin-top: 20px;
}
.footer-classic * + .footer-list {
margin-top: 10px;
}
.footer-classic * + .row {
margin-top: 20px;
}
@media (min-width: 992px) {
.footer-classic .footer-inner-1 {
padding: 90px 0 70px;
}
.footer-classic * + .contact-list {
margin-top: 22px;
}
.footer-classic * + .footer-list {
margin-top: 23px;
}
.footer-classic * + .row {
margin-top: 23px;
}
}
.footer-list > li + li {
margin-top: 5px;
}
@media (min-width: 992px) {
.footer-list > li + li {
margin-top: 12px;
}
}
.not-set {
color: #c55;
font-style: italic;
}
/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
content: '';
left: 3px;
display: inline-block;
width: 0;
height: 0;
border: solid 5px transparent;
margin: 4px 4px 2px 4px;
background: transparent;
}
a.asc:after {
border-bottom: solid 7px #212529;
border-top-width: 0;
}
a.desc:after {
border-top: solid 7px #212529;
border-bottom-width: 0;
}
.grid-view th,
.grid-view td:last-child {
white-space: nowrap;
}
.grid-view .filters input,
.grid-view .filters select {
min-width: 50px;
}
.hint-block {
display: block;
margin-top: 5px;
color: #999;
}
.error-summary {
color: #a94442;
background: #fdf7f7;
border-left: 3px solid #eed3d7;
padding: 10px 20px;
margin: 0 0 15px 0;
}
/* align the logout "link" (button in form) of the navbar */
.navbar form > button.logout {
margin-top: 6px;
padding-top: 1px;
color: rgba(var(--bs-viscoform-rgb), var(--bs-bg-opacity)));
}
@media(max-width:767px) {
.navbar form > button.logout {
display:block;
text-align: left;
width: 100%;
padding: 10px 0;
}
}
.navbar form > button.logout:focus,
.navbar form > button.logout:hover {
text-decoration: none;
color: rgba(55, 55, 55, 0.75);
}
.navbar form > button.logout:focus {
outline: none;
}
/* marco code css */
.masthead {
position: relative;
margin-top: -50px;
background: url("../assets/images/artesanoynatural.jpg") no-repeat center center;
background-size: cover;
padding-top: 8rem;
padding-bottom: 8rem;
}
.masthead:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0.5;
}
.masthead h1, header.masthead .h1 {
font-size: 2rem;
}
@media (min-width: 768px) {
.masthead {
padding-top: 12rem;
padding-bottom: 12rem;
}
.masthead h1, .masthead .h1 {
font-size: 3rem;
}
}
.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: #152752;
--bs-btn-border-color: #171c34;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #3569ef;
--bs-btn-hover-border-color: #2e4f9e;
--bs-btn-focus-shadow-rgb: 49, 132, 253;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #152752;
--bs-btn-active-border-color: #171c34;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #637a70;
--bs-btn-disabled-border-color: #637a70;
}
.btn-link {
--bs-btn-font-weight: 400;
--bs-btn-color: var(--bs-link-color);
--bs-btn-bg: transparent;
--bs-btn-border-color: transparent;
--bs-btn-hover-color: var(--bs-link-hover-color);
--bs-btn-hover-border-color: transparent;
--bs-btn-active-color: var(--bs-link-hover-color);
--bs-btn-active-border-color: transparent;
--bs-btn-disabled-color: #6c757d;
--bs-btn-disabled-border-color: transparent;
--bs-btn-box-shadow: none;
--bs-btn-focus-shadow-rgb: 49, 132, 253;
text-decoration: underline;
}
.navbar-dark {
--bs-nav-link-font-weight: 700;
--bs-navbar-color: rgba(80, 80, 80, 0.8);
--bs-navbar-hover-color: rgba(60, 60, 60, 1);
--bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
--bs-navbar-active-color: #fff;
--bs-navbar-brand-color: #fff;
--bs-navbar-brand-hover-color: #fff;
--bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-vform {
--bs-nav-link-font-weight: 700;
--bs-navbar-color: rgba(80, 80, 80, 0.8);
--bs-navbar-hover-color: rgba(60, 60, 60, 1);
--bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
--bs-navbar-active-color: var(--bs-azul-oscuro-viscoform);
--bs-navbar-brand-color: var(--bs-azul-oscuro-viscoform);
--bs-navbar-brand-hover-color: var(--bs-gris-viscoform);
--bs-navbar-toggler-border-color: rgba(200, 200, 200, 0.1);
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath stroke='rgba%28100, 100, 100, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-brand img {
height: 58px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: -12px;
}
.bg-dark {
--bs-bg-opacity: 0.85;
background-color: rgba(var(--bs-oniric-black-rgb), var(--bs-bg-opacity)) !important;
}
.bg-vform {
--bs-bg-opacity: 0.95;
background-color: rgba(var(--bs-black), var(--bs-bg-opacity)) !important;
}
/* marco code end */
/* style breadcrumb widget as in previous bootstrap versions */
.breadcrumb {
background-color: var(--bs-gray-200);
border-radius: .25rem;
padding: .75rem 1rem;
margin-top: 5em;
}
.breadcrumb-item > a
{
text-decoration: none;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}
.marketing h2 {
font-weight: 400;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
}
/* rtl:end:ignore */
/* Featurettes
------------------------- */
.featurette-divider {
margin: 5rem 0; /* Space out the Bootstrap
more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
/* rtl:remove */
letter-spacing: -.05rem;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
.carousel-item {
max-height: 10em;
}
@media (min-width: 768px) {
.row-cols-md-4 > * {
flex: 0 0 auto;
width: 33%;
}
}
@media (min-width: 1100px) {
.row-cols-md-4 > * {
flex: 0 0 auto;
width: 25%;
}
.carousel-item {
max-height: 16em;
}
}
.carousel-caption h1 {
font-size: calc(1.5rem + 1.6vw);
}
.carousel-caption p {
font-size: 0.85rem;
line-height: 0.9;
}
@media (min-width: 60em) {
/* Bump up size of carousel content */
.carousel-item {
max-height: 35em;
}
.carousel-caption h1 {
font-size: calc(2.5rem + 2vw);
}
.carousel-caption p {
margin-bottom: 0.5rem;
font-size: 1.25rem;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
@media (min-width: 62em) {
.featurette-heading {
margin-top: 7rem;
}
}
.u-shading {
color: #ffffff;
}
.marco-a {
color: #ffffff;
display: block;
height: 100%;
font-size:1.5em;
font-weight: bold;
}
.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
margin-top: 50px;
margin-bottom: 50px;
}
@media (min-width: 992px) {
.rounded-lg-3 { border-radius: .8rem; }
}
.bg-green-100 {
--tw-bg-opacity: 1;
background-color: #ecf4f0;
background-color: rgba(236,244,240,var(--tw-bg-opacity));
}
.flex {
display: -ms-flexbox;
display: flex
}
.inline-flex {
display: -ms-inline-flexbox;
display: inline-flex
}
.pr-2 {
padding-right: .5rem
}
.rounded-lg {
border-radius: .5rem;
}
.text-gray-800 {
font-size: .9em;
--tw-text-opacity: 1;
color: #2d3748;
color: rgba(45,55,72,var(--tw-text-opacity))
}
.text-green-900 {
--tw-text-opacity: 1;
color: #4b866c;
color: rgba(75,134,108,var(--tw-text-opacity))
}
.alert{
position: fixed;
top: 25%;
left: 15%;
transform: translate(-50%, -50%);
width: 30rem;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 1000; /* Asegura que la ventana flotante esté en la parte superior */
}
.whatsapp-float {
position: fixed;
bottom: 60px;
right: 20px;
z-index: 1000;
}
/* Estilo del icono de WhatsApp */
.whatsapp-float img {
width: 80px; /* Ajusta el tamaño del icono según tus preferencias */
height: auto;
border-radius: 15%; /* Para hacer el icono redondo, ajusta según sea necesario */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
}
.badge {
font-size: 0.9em !important;
}
.list-group-item-success-custom {
background-color: #198754; /* Color verde de Bootstrap para "success" */
}
.list-group-item-current {
background-color: #ffc107; /* Color amarillo de Bootstrap para "warning", utilizado aquí para indicar el estado actual */
color: black;
}
/* Añade margen derecho a los elementos del list-group, excepto al último */
.list-group-horizontal .list-group-item:not(:last-child) {
margin-right: 0.75rem;
}
.marketing .col-lg-3 {
margin-bottom: 1.5rem;
text-align: center;
}
/* Definimos la animación */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Aplicamos la animación a la imagen */
.animated-image {
animation: fadeIn 2s ease-in-out;
}
.animated-image:hover {
transform: scale(1.1);
}
@keyframes flash {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.large {
transform: scale(1.1);
animation: flash 0.5s ease;
}
.zoom-image {
animation: fadeIn 2s ease-in-out;
}
.zoom-image:hover {
transform: scale(1.6);
}
.picContainer {position:relative;}
.overlay-image {
position: absolute;
top: 18rem;
left: 0;
}
.comfortaa- {
font-family: "Comfortaa", sans-serif;
font-optical-sizing: auto;
font-weight: ;
font-style: normal;
}
.texto-quotes {
font-family: var(--bs-vform-font-family);
font-weight: 700;
}
.btn-circle {
width: 30px;
height: 30px;
padding: 6px 0px;
border-radius: 15px;
text-align: center;
font-size: 12px;
line-height: 1.42857;
}
.icon-imc {
max-width: 96px;
}
.help-block {
width: 100%;
margin-top: 0.5rem;
font-size: 0.75em;
color: red;
}
.control-label {
font-weight: bold;
}
.inpmrk {
width: 24%;
margin-top: 5px;
}
label {
padding-right: 1em;
}
.bar-container {
display: flex;
align-items: center;
background-color: rgba(220,220,220,0.5);
width: 100%;
}
.bar {
border: 3px solid #aaa;
position: relative;
width: 100%;
height: 80px;
box-sizing: border-box;
overflow: hidden; /* Asegura que las líneas no sobresalgan */
}
.bar div {
position: absolute;
height: 100%;
background-color: rgba(0,0,255,0.5);
transition: width 2s; /* Añade la transición de 2 segundos */
}
.line {
position: absolute;
height: 120px;
border-left: 3px solid #ccc;
}
.pill {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
background-color: #FFF;
border: 2px solid #AAA;
border-radius: 25px;
padding: 12px 10px;
font-size: 25px;
color: #fff;
transition: right 2s;
}
.data-value {
font-weight: 700;
}
@media (max-width: 600px) {
.chart svg {
width: 340px;
height: 340px;
}
}
.image-container {
max-width: 100%; /* Ancho deseado */
height: 680px; /* Alto deseado */
overflow: hidden;
position: relative;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
blockquote > b {
text-align: center;
color: var(--bs-viscoform);
font-size: 1.6em;
line-height: 36px;
font-style: italic;
font-family: "Funnel", sans-serif;
/* border-left: 2px solid #AAA; */
}
.nav-link {
--bs-nav-link-font-size: 0.9em;
--bs-nav-link-font-weight: 500;
}
.accordion {
--bs-accordion-color: var(--bs-surface-color);
--bs-accordion-bg: var(--bs-body-bg);
--bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
--bs-accordion-border-color: var(--bs-border-color);
--bs-accordion-border-width: var(--bs-border-acc);
--bs-accordion-border-radius: 1rem;
--bs-accordion-inner-border-radius: calc(0.5rem - (var(--bs-border-acc)));
--bs-accordion-btn-padding-x: 1.5rem;
--bs-accordion-btn-padding-y: 1.15rem;
--bs-accordion-btn-color: var(--bs-surface-color);
--bs-accordion-btn-bg: var(--bs-accordion-bg);
--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234f4f4f' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
--bs-accordion-btn-icon-width: 1.25rem;
--bs-accordion-btn-icon-transform: rotate(-180deg);
--bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233b71ca' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
--bs-accordion-body-padding-x: 1.5rem;
--bs-accordion-body-padding-y: 1.15rem;
--bs-accordion-active-color: #3b71ca;
--bs-accordion-active-bg: var(--bs-surface-bg);
--bs-accordion-btn-focus-box-shadow: inset 0 0 0 var(--bs-border-color);
--bs-accordion-btn-padding-y: 0.75rem;
}
.accordion-button {
position: relative;
display: flex;
align-items: center;
width: 100%;
padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
font-size: 1rem;
color: var(--bs-accordion-btn-color);
text-align: left;
background-color: var(--bs-accordion-btn-bg);
border: 0;
border-radius: 0;
overflow-anchor: none;
transition: var(--bs-accordion-transition)
}
@media(prefers-reduced-motion: reduce) {
.accordion-button {
transition: none
}
}
.accordion-button:not(.collapsed) {
color: var(--bs-accordion-active-color);
background-color: var(--bs-accordion-active-bg);
box-shadow: inset 0 calc(-1*var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)
}
.accordion-button:not(.collapsed)::after {
background-image: var(--bs-accordion-btn-active-icon);
transform: var(--bs-accordion-btn-icon-transform)
}
.accordion-button::after {
flex-shrink: 0;
width: var(--bs-accordion-btn-icon-width);
height: var(--bs-accordion-btn-icon-width);
margin-left: auto;
content: "";
background-image: var(--bs-accordion-btn-icon);
background-repeat: no-repeat;
background-size: var(--bs-accordion-btn-icon-width);
transition: var(--bs-accordion-btn-icon-transition)
}
@media(prefers-reduced-motion: reduce) {
.accordion-button::after {
transition: none
}
}
.accordion-button:hover {
z-index: 2
}
.accordion-button:focus {
z-index: 3;
outline: 0;
box-shadow: var(--bs-accordion-btn-focus-box-shadow)
}
.accordion-header {
margin-bottom: 0
}
.accordion-item {
color: var(--bs-accordion-color);
background-color: var(--bs-accordion-bg);
border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color)
}
.accordion-item:first-of-type {
border-top-left-radius: var(--bs-accordion-border-radius);
border-top-right-radius: var(--bs-accordion-border-radius)
}
.accordion-item:first-of-type>.accordion-header .accordion-button {
border-top-left-radius: var(--bs-accordion-inner-border-radius);
border-top-right-radius: var(--bs-accordion-inner-border-radius);
}
.accordion-item:not(:first-of-type) {
border-top: 0
}
.accordion-item:last-of-type {
border-bottom-right-radius: var(--bs-accordion-border-radius);
border-bottom-left-radius: var(--bs-accordion-border-radius)
}
.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed {
border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
border-bottom-left-radius: var(--bs-accordion-inner-border-radius)
}
.accordion-item:last-of-type>.accordion-collapse {
border-bottom-right-radius: var(--bs-accordion-border-radius);
border-bottom-left-radius: var(--bs-accordion-border-radius)
}
.accordion-body {
padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x)
}
.accordion-flush>.accordion-item {
border-right: 0;
border-left: 0;
border-radius: 0
}
.accordion-flush>.accordion-item:first-child {
border-top: 0
}
.accordion-flush>.accordion-item:last-child {
border-bottom: 0
}
.accordion-flush>.accordion-item>.accordion-header .accordion-button,.accordion-flush>.accordion-item>.accordion-header .accordion-button.collapsed {
border-radius: 0
}
.accordion-flush>.accordion-item>.accordion-collapse {
border-radius: 0
}
[data-mdb-theme=dark] .accordion-button::after {
--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233b71ca'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}
.precant {
text-decoration: line-through;
font-style: italic;
color: #ccc;
}
.sticky-map {
position: sticky;
top: 10px; /* Espacio superior al hacer scroll */
height: 70vh; /* Ajusta el tamaño vertical */
}
#map {
width: 100%;
height: 100%;
background-color: #e0e0e0; /* Placeholder si no se carga el mapa */
}
#mapa-container {
background-color: #e0e0e0; /* Placeholder si no se carga el mapa */
}
.switch {
position: relative;
display: inline-block;
width: 34px;
height: 20px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 20px;
}
.slider:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #2196F3;
}
input:checked + .slider:before {
transform: translateX(14px);
}
.menufoot {
text-decoration: none;
color: #00aeef;
outline: none;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out; }
.menufoot a:hover, a:focus {
text-decoration: none;
color: #7a7a7a;
outline: none; }
:focus {
outline: none; }
.cookie-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 998;
}
.pr-1px {
padding-right: 1px;
}
.mh-47 {
max-height: 47px;
}
/* =========================
ONIRIC HERO
========================= */
.oniric-hero {
height: 100vh;
background: linear-gradient(
rgba(0,0,0,0.1),
rgba(0,0,0,0.05)
),
url('../images/oniric/hero-cyclist.jpg') center center / cover no-repeat;
}
.hero-title {
font-size: 3.5rem;
font-weight: 600;
line-height: 1.1;
margin-bottom: 1.5rem;
}
.hero-subtitle {
font-size: 1.2rem;
opacity: 0.85;
margin-bottom: 2rem;
max-width: 500px;
}
.hero-cta {
display: flex;
gap: 1rem;
}
/* BOTONES ONIRIC */
.btn-oniric-primary {
background: #ffffff;
color: #000;
padding: 12px 28px;
font-weight: 600;
border-radius: 50px;
border: none;
transition: 0.3s;
}
.btn-oniric-primary:hover {
background: #ddd;
}
.btn-oniric-secondary {
background: transparent;
color: #fff;
border: 1px solid #fff;
padding: 12px 28px;
border-radius: 50px;
transition: 0.3s;
}
.btn-oniric-secondary:hover {
background: #fff;
color: #000;
}
/* =========================
NAVBAR ONIRIC
========================= */
.navbar {
background: transparent !important;
transition: 0.3s;
}
.navbar.scrolled {
background: rgba(0,0,0,0.85);
}
.nav-link {
color: #fff !important;
}
.nav-link:hover {
opacity: 0.7;
}
/* =========================
ONIRIC COUNTDOWN
========================= */
.oniric-countdown-section {
position: relative;
}
.oniric-countdown-section::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.45) 0%,
rgba(0, 0, 0, 0.72) 100%
);
z-index: 1;
}
.oniric-countdown-section .parallax-content {
position: relative;
z-index: 2;
}
.oniric-eyebrow {
display: inline-block;
margin-bottom: 18px;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.72);
}
.oniric-countdown-title {
font-size: 3rem;
line-height: 1.05;
font-weight: 600;
margin-bottom: 18px;
color: #fff;
}
.oniric-countdown-subtitle {
max-width: 760px;
margin: 0 auto 18px;
font-size: 1.35rem;
color: #fff;
}
.oniric-countdown-text {
max-width: 720px;
margin: 0 auto 42px;
font-size: 1.05rem;
line-height: 1.6;
color: rgba(255,255,255,0.82);
}
.oniric-countdown-section .countdown-circle-bg {
stroke: rgba(255,255,255,0.18);
stroke-width: 4;
fill: transparent;
}
.oniric-countdown-section .countdown-circle-fg {
stroke: #ffffff;
stroke-width: 4;
fill: transparent;
}
.oniric-countdown-section .countdown-counter {
color: #fff;
font-weight: 700;
}
.oniric-countdown-section .countdown-title {
color: rgba(255,255,255,0.75);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.8rem;
}
.button-default-outline {
display: inline-block;
padding: 12px 28px;
border: 1px solid #fff;
border-radius: 999px;
color: #fff;
background: transparent;
font-weight: 600;
transition: all 0.25s ease;
text-decoration: none;
}
.button-default-outline:hover {
background: #fff;
color: #000;
}
@media (max-width: 991.98px) {
.oniric-countdown-title {
font-size: 2.3rem;
}
.oniric-countdown-subtitle {
font-size: 1.1rem;
}
.oniric-countdown-text {
font-size: 0.98rem;
}
}
/* =========================
ONIRIC MANIFIESTO
========================= */
.oniric-manifiesto {
background: #000;
color: #fff;
padding: 120px 0;
text-align: center;
}
.oniric-manifiesto .oniric-eyebrow {
display: inline-block;
margin-bottom: 20px;
font-size: 0.8rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
}
.oniric-manifiesto-title {
font-size: 2.8rem;
font-weight: 600;
line-height: 1.2;
margin-bottom: 30px;
}
.oniric-manifiesto-lead {
font-size: 1.3rem;
opacity: 0.9;
margin-bottom: 20px;
}
.oniric-manifiesto-text {
font-size: 1.1rem;
opacity: 0.75;
margin-bottom: 10px;
}
.oniric-manifiesto-highlight {
font-size: 2rem;
font-weight: 600;
margin: 20px 0;
}
.oniric-manifiesto-claim {
font-size: 1.6rem;
font-weight: 600;
margin-top: 40px;
}
/* Responsive */
@media (max-width: 991.98px) {
.oniric-manifiesto {
padding: 80px 0;
}
.oniric-manifiesto-title {
font-size: 2rem;
}
.oniric-manifiesto-highlight {
font-size: 1.5rem;
}
.oniric-manifiesto-claim {
font-size: 1.3rem;
}
}
/* =========================
ONIRIC PRODUCTS
========================= */
.oniric-products {
background: #0a0a0a;
color: #fff;
padding: 120px 0;
}
.oniric-products-title {
font-size: 2.8rem;
font-weight: 600;
line-height: 1.15;
margin-bottom: 22px;
}
.oniric-products-intro {
max-width: 760px;
margin: 0 auto;
font-size: 1.08rem;
line-height: 1.7;
color: rgba(255,255,255,0.72);
}
.oniric-product-card {
height: 100%;
background: #111;
border: 1px solid rgba(255,255,255,0.08);
overflow: hidden;
transition: transform 0.3s ease, border-color 0.3s ease;
}
.oniric-product-card:hover {
transform: translateY(-4px);
border-color: rgba(255,255,255,0.18);
}
.oniric-product-card-featured {
background: linear-gradient(180deg, #111 0%, #171717 100%);
}
.oniric-product-media {
position: relative;
overflow: hidden;
background: #000;
min-height: 320px;
}
.oniric-product-media img {
width: 100%;
height: 320px;
object-fit: cover;
display: block;
}
.oniric-product-body {
padding: 36px 32px 34px;
}
.oniric-product-kicker {
display: inline-block;
margin-bottom: 8px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
}
.oniric-product-name {
font-size: 2rem;
font-weight: 600;
margin-bottom: 18px;
color: #fff;
}
.oniric-product-text {
font-size: 1rem;
line-height: 1.7;
color: rgba(255,255,255,0.78);
margin-bottom: 22px;
text-align: left;
}
.oniric-product-list {
padding-left: 0;
margin: 0 0 24px 0;
list-style: disc;
text-align: left;
}
.oniric-product-list li {
position: relative;
padding-left: 24px;
margin-bottom: 12px;
color: rgba(255,255,255,0.88);
line-height: 1.55;
}
.oniric-product-list li::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
opacity: 0.8;
}
.oniric-product-note {
color: rgba(255,255,255,0.6);
font-size: 0.98rem;
line-height: 1.65;
margin-bottom: 28px;
}
.oniric-product-actions {
margin-top: auto;
}
.oniric-products .button-primary {
border-radius: 999px;
padding: 12px 26px;
}
@media (max-width: 991.98px) {
.oniric-products {
padding: 80px 0;
}
.oniric-products-title {
font-size: 2.1rem;
}
.oniric-product-media,
.oniric-product-media img {
min-height: 260px;
height: 260px;
}
.oniric-product-body {
padding: 28px 24px 28px;
}
.oniric-product-name {
font-size: 1.7rem;
}
}
/* Banner */
.c365-cookie {
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 9999;
border-radius: 16px;
box-shadow: 0 12px 40px rgba(0,0,0,.20);
overflow: hidden;
}
.c365-cookie-inner {
background: #111827; /* gris muy oscuro */
color: #fff;
padding: 18px 18px 14px 18px;
}
.c365-cookie-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.c365-cookie-text { font-size: .92rem; opacity: .92; margin-bottom: 12px; line-height: 1.35; }
.c365-cookie-links a { color: #fff; text-decoration: underline; opacity: .95; }
.c365-cookie-actions {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
margin-top: 10px;
}
/* Botón flotante para reabrir preferencias */
.c365-cookie-fab {
position: fixed;
left: 16px;
bottom: 16px;
z-index: 9998;
width: 46px;
height: 46px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
background: #111827;
color: #fff;
border: 1px solid rgba(255,255,255,.15);
box-shadow: 0 12px 28px rgba(0,0,0,.22);
cursor: pointer;
}
.c365-cookie-fab:hover { filter: brightness(1.08); }
/* Ajustes responsive */
@media (min-width: 992px) {
.c365-cookie { left: auto; right: 16px; width: 520px; }
}
/* =========================
ONIRIC CONTACT
========================= */
.oniric-contact-hero {
background: #000;
color: #fff;
padding: 120px 0 60px;
}
.oniric-contact-title {
font-size: 3rem;
font-weight: 600;
margin-bottom: 20px;
}
.oniric-contact-subtitle {
max-width: 600px;
margin: 0 auto;
opacity: 0.7;
}
/* SECTION */
.oniric-contact-section {
background: #0a0a0a;
color: #fff;
padding: 80px 0 120px;
}
/* INFO */
.oniric-contact-info h3 {
font-size: 1.8rem;
margin-bottom: 20px;
}
.oniric-contact-info p {
opacity: 0.7;
margin-bottom: 20px;
}
.oniric-contact-points {
list-style: none;
padding: 0;
}
.oniric-contact-points li {
margin-bottom: 10px;
opacity: 0.9;
}
.oniric-contact-claim {
margin-top: 40px;
font-size: 1.3rem;
font-weight: 600;
}
/* FORM */
.oniric-contact-form {
background: #111;
padding: 40px;
border: 1px solid rgba(255,255,255,0.08);
}
.oniric-input {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid rgba(255,255,255,0.2);
padding: 14px 0;
color: #fff;
margin-bottom: 20px;
}
.oniric-input::placeholder {
color: rgba(255,255,255,0.4);
}
.oniric-input:focus {
outline: none;
border-color: #fff;
}
/* LEGAL */
.oniric-contact-legal {
margin-top: 20px;
font-size: 0.8rem;
opacity: 0.5;
}
/* RESPONSIVE */
@media (max-width: 991px) {
.oniric-contact-title {
font-size: 2rem;
}
.oniric-contact-form {
margin-top: 40px;
}
}
/* =========================
ONIRIC TEST
========================= */
.oniric-test-hero {
position: relative;
background-size: cover;
background-position: center;
padding: 140px 0 100px;
color: #fff;
}
.oniric-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.6);
}
.oniric-test-hero .container {
position: relative;
z-index: 2;
}
.oniric-test-title {
font-size: 3rem;
font-weight: 600;
margin-bottom: 20px;
}
.oniric-test-subtitle {
max-width: 600px;
margin: 0 auto;
opacity: 0.8;
}
/* INTRO */
.oniric-test-intro {
background: #000;
color: #fff;
padding: 80px 0;
}
.oniric-test-lead {
font-size: 1.3rem;
margin-bottom: 20px;
}
.oniric-test-text {
opacity: 0.7;
margin-bottom: 30px;
}
.oniric-test-features {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
opacity: 0.9;
}
/* FORM */
.oniric-test-form-section {
background: #333;
padding: 80px 0 120px;
}
.oniric-test-form-wrapper {
background: #333;
padding: 40px;
border: 1px solid rgba(255,255,255,0.08);
}
/* =========================
ONIRIC TEST FORM
========================= */
.oniric-test-form {
background: #333;
color: #fff;
}
.oniric-form-container {
max-width: 1180px;
padding-top: 0;
padding-bottom: 100px;
}
.oniric-test-form-inner {
display: block;
}
.oniric-form-section {
background: #333;
border: 1px solid rgba(255,255,255,0.08);
padding: 36px 32px;
margin-bottom: 28px;
}
.oniric-form-section-header {
margin-bottom: 28px;
}
.oniric-form-step {
display: inline-block;
font-size: 0.82rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
margin-bottom: 12px;
}
.oniric-form-section-header h3 {
font-size: 1.7rem;
font-weight: 600;
margin-bottom: 10px;
color: #fff;
}
.oniric-form-section-header p {
margin: 0;
color: rgba(255,255,255,0.65);
max-width: 760px;
}
.oniric-help-box {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
padding: 18px;
color: rgba(255,255,255,0.72);
font-size: 0.95rem;
line-height: 1.6;
}
.oniric-input,
.oniric-select,
.oniric-test-form .form-control,
.oniric-test-form .form-select,
.oniric-test-form textarea {
background: #333;
color: #eee;
border: none;
border-bottom: 1px solid rgba(255,255,255,0.18);
border-radius: 0;
padding: 14px 0;
box-shadow: none;
}
.oniric-input:focus,
.oniric-select:focus,
.oniric-test-form .form-control:focus,
.oniric-test-form .form-select:focus,
.oniric-test-form textarea:focus {
background: #333;
color: #eee;
border-color: #fff;
box-shadow: none;
}
.oniric-test-form label,
.oniric-test-form .form-label {
color: rgba(255,255,255,0.92);
font-weight: 500;
margin-bottom: 10px;
}
.oniric-test-form .help-block,
.oniric-test-form .invalid-feedback {
color: #ff8a8a;
}
.oniric-range {
accent-color: #ffffff;
}
.oniric-range-output {
display: inline-flex;
justify-content: center;
align-items: center;
min-width: 62px;
min-height: 62px;
border: 1px solid rgba(255,255,255,0.18);
color: #fff;
font-size: 1.2rem;
font-weight: 600;
background: rgba(255,255,255,0.03);
}
.oniric-radio-list label,
.oniric-test-form .radio label {
display: block;
padding: 10px 14px;
margin-bottom: 8px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.02);
cursor: pointer;
transition: 0.2s ease;
}
.oniric-radio-list label:hover,
.oniric-test-form .radio label:hover {
border-color: rgba(255,255,255,0.22);
background: rgba(255,255,255,0.04);
}
.oniric-radio-list input[type="radio"],
.oniric-test-form .radio input[type="radio"] {
margin-right: 10px;
}
.oniric-problems-table {
margin-top: 10px;
}
.oniric-problems-head {
padding: 0 0 12px;
color: rgba(255,255,255,0.6);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.oniric-problem-row {
padding: 18px 0;
border-top: 1px solid rgba(255,255,255,0.08);
}
.oniric-problem-label {
color: #fff;
font-weight: 500;
}
.oniric-problem-radios {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.oniric-radio-empty {
display: flex;
justify-content: center;
align-items: center;
min-height: 48px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.02);
cursor: pointer;
}
.oniric-radio-dot {
display: none;
}
.oniric-radio-empty span {
width: 14px;
height: 14px;
border: 1px solid rgba(255,255,255,0.5);
border-radius: 50%;
display: inline-block;
position: relative;
}
.oniric-radio-dot:checked + span::after {
content: "";
width: 8px;
height: 8px;
background: #fff;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
}
.oniric-test-form .checkbox label {
color: rgba(255,255,255,0.88);
line-height: 1.6;
}
.oniric-test-form .checkbox a {
color: #fff;
text-decoration: underline;
}
.oniric-submit-wrap {
padding-top: 10px;
text-align: center;
}
.oniric-submit-btn {
min-width: 320px;
padding: 16px 28px;
border-radius: 999px;
}
.iti {
width: 100%;
}
@media (max-width: 991.98px) {
.oniric-form-section {
padding: 28px 22px;
}
.oniric-form-section-header h3 {
font-size: 1.4rem;
}
.oniric-problem-radios {
gap: 6px;
}
.oniric-submit-btn {
min-width: 100%;
}
}
/* =========================
ONIRIC TEST RESULT
========================= */
.oniric-result-hero {
position: relative;
background-size: cover;
background-position: center;
padding: 140px 0 100px;
color: #fff;
}
.oniric-result-hero .container {
z-index: 2;
}
.oniric-result-title {
font-size: 3rem;
font-weight: 600;
margin-bottom: 18px;
}
.oniric-result-subtitle {
max-width: 720px;
margin: 0 auto;
color: rgba(255,255,255,0.82);
font-size: 1.08rem;
}
.oniric-result-summary,
.oniric-result-components,
.oniric-result-score {
background: #0a0a0a;
color: #fff;
padding: 90px 0;
}
.oniric-result-components {
background: #0d0d0d;
}
.oniric-chart-box {
border: 1px solid rgba(255,255,255,0.08);
padding: 24px;
}
.oniric-section-title {
color: #111;
font-size: 2.2rem;
font-weight: 600;
margin-bottom: 18px;
}
.oniric-section-text {
color: rgba(255,255,255,0.72);
line-height: 1.7;
}
.oniric-metric-card {
background: #111;
border: 1px solid rgba(255,255,255,0.08);
padding: 22px;
height: 100%;
}
.oniric-metric-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
margin-bottom: 12px;
}
.oniric-metric-name {
font-weight: 600;
color: #333;
}
.oniric-metric-value {
min-width: 42px;
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,0.15);
background: rgba(255,255,255,0.03);
color: #fff;
font-weight: 700;
}
.oniric-metric-help {
margin: 0;
color: rgba(255,255,255,0.58);
font-size: 0.92rem;
line-height: 1.6;
}
.oniric-score-circle {
width: 180px;
height: 180px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 3rem;
font-weight: 700;
margin: 18px 0 26px;
border: 1px solid rgba(255,255,255,0.12);
}
.oniric-score-circle.is-good {
background: rgba(40, 167, 69, 0.18);
color: #d7ffe0;
}
.oniric-score-circle.is-medium {
background: rgba(255, 193, 7, 0.18);
color: #fff0bc;
}
.oniric-score-circle.is-low {
background: rgba(220, 53, 69, 0.18);
color: #ffd1d7;
}
.oniric-score-title {
font-size: 2rem;
font-weight: 600;
margin-bottom: 14px;
}
.oniric-score-text,
.oniric-score-note {
color: rgba(255,255,255,0.72);
line-height: 1.7;
max-width: 780px;
margin: 0 auto 18px;
}
/* WRAP */
.oniric-score-bar-wrap {
margin: 28px 0 14px;
}
/* CONTENEDOR */
.bar-container {
width: 100%;
}
/* BASE BAR */
.bar {
height: 20px;
border-radius: 999px;
position: relative;
overflow: hidden;
background: #E9E6E3;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.08);
}
/* PROGRESS CON GRADIENTE ONIRIC */
#progress {
height: 100%;
border-radius: 999px;
position: relative;
transition: width 1.6s ease;
background: linear-gradient(
90deg,
#3FAF6C 0%, /* verde */
#7FD36B 35%,
#F2B84B 45%, /* transición */
#E9552C 55%, /* naranja Oniric */
#D43C2F 65%, /* rojo */
#8A1F1A 80%, /* rojo oscuro */
#2D2926 100% /* negro Oniric */
);
box-shadow:
0 0 12px rgba(233,85,44,0.25),
inset 0 0 6px rgba(255,255,255,0.2);
}
/* PILL (indicador flotante) */
.pill {
position: absolute;
right: -18px;
top: -40px;
min-width: 38px;
height: 30px;
padding: 0 10px;
border-radius: 999px;
background: linear-gradient(145deg, #2D2926, #111);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
box-shadow:
0 6px 18px rgba(0,0,0,0.25),
0 0 0 2px rgba(255,255,255,0.05);
}
/* TRIÁNGULO DEL PILL */
.pill::after {
content: "";
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: #111 transparent transparent transparent;
}
/* LÍNEAS DE ESCALA */
.line {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255,255,255,0.35);
opacity: 0.5;
}
/* OPCIONAL: HOVER (desktop) */
.bar:hover #progress {
filter: brightness(1.05);
}
.oniric-result-recommendation {
background: #000;
color: #fff;
padding: 100px 0 120px;
}
.oniric-recommendation-box {
background: linear-gradient(180deg, #101010 0%, #0b0b0b 100%);
border: 1px solid rgba(255,255,255,0.08);
padding: 48px 36px;
}
.oniric-recommendation-text {
color: rgba(255,255,255,0.88);
line-height: 1.8;
font-size: 1.06rem;
max-width: 820px;
margin: 0 auto 24px;
}
.oniric-recommendation-note {
color: rgba(255,255,255,0.62);
line-height: 1.7;
max-width: 760px;
margin: 0 auto;
}
@media (max-width: 991.98px) {
.oniric-result-title {
font-size: 2.2rem;
}
.oniric-section-title {
font-size: 1.7rem;
}
.oniric-result-summary,
.oniric-result-components,
.oniric-result-score,
.oniric-result-recommendation {
padding: 70px 0;
}
.oniric-recommendation-box {
padding: 32px 22px;
}
}
/* =========================
ONIRIC PRODUCT DETAIL
========================= */
.oniric-product-detail {
background: var(--bs-oniric-white);
color: #111;
padding: 120px 0 90px;
}
.oniric-product-gallery {
position: sticky;
top: 110px;
}
.oniric-product-main-img {
position: relative;
background: #f5f5f3;
padding: 36px;
min-height: 560px;
display: flex;
align-items: center;
justify-content: center;
}
.oniric-product-main-img img {
width: 100%;
height: auto;
object-fit: contain;
}
.oniric-product-thumbs {
display: flex;
gap: 18px;
margin-top: 22px;
}
.oniric-product-thumbs .gallery-thumb {
width: 116px;
height: 88px;
object-fit: cover;
background: #f5f5f3;
border: 1px solid transparent;
padding: 6px;
cursor: pointer;
opacity: 0.65;
transition: all .25s ease;
}
.oniric-product-thumbs .gallery-thumb.active,
.oniric-product-thumbs .gallery-thumb:hover {
border-color: #111;
opacity: 1;
}
.oniric-match-badge {
position: absolute;
top: 22px;
left: 22px;
z-index: 3;
background: #ffcf00;
color: #111;
padding: 8px 14px;
border-radius: 999px;
font-size: .8rem;
font-weight: 700;
}
.oniric-match-badge.secondary {
background: #111;
color: #fff;
}
.oniric-product-info {
padding-left: 32px;
}
.oniric-breadcrumb-mini {
font-size: .78rem;
color: rgba(0,0,0,.45);
margin-bottom: 26px;
}
.oniric-product-title {
font-size: clamp(2rem, 4vw, 3.4rem);
line-height: 1.05;
font-weight: 500;
margin-bottom: 28px;
color: #111;
}
.oniric-product-lead {
max-width: 620px;
font-size: 1.02rem;
line-height: 1.8;
color: rgba(0,0,0,.72);
margin-bottom: 34px;
}
.oniric-product-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid rgba(0,0,0,.1);
border-bottom: 1px solid rgba(0,0,0,.1);
margin-bottom: 34px;
}
.oniric-product-metric {
padding: 18px 16px;
border-right: 1px solid rgba(0,0,0,.1);
}
.oniric-product-metric:last-child {
border-right: 0;
}
.oniric-product-metric span {
display: block;
font-size: .75rem;
color: rgba(0,0,0,.45);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: .08em;
}
.oniric-product-metric strong {
font-size: 1.05rem;
font-weight: 600;
}
.oniric-product-selectors {
margin-bottom: 30px;
}
.oniric-select-wrap {
margin-bottom: 22px;
}
.oniric-select-wrap label {
display: block;
font-size: .86rem;
font-weight: 600;
margin-bottom: 10px;
color: #111;
}
.oniric-product-select,
.oniric-product-detail .bootstrap-select > .dropdown-toggle {
border: 1px solid rgba(0,0,0,.22) !important;
border-radius: 999px !important;
background: #fff !important;
color: #111 !important;
padding: 12px 18px !important;
min-height: 48px;
}
.oniric-product-price {
font-size: 2.2rem;
font-weight: 600;
margin: 34px 0;
color: #111;
}
.oniric-product-old-price {
margin-left: 16px;
color: rgba(0,0,0,.35);
text-decoration: line-through;
font-size: 1rem;
}
.oniric-product-actions {
display: flex;
gap: 14px;
align-items: center;
margin-bottom: 28px;
}
.oniric-btn-primary,
.oniric-btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 12px 30px;
border-radius: 999px;
font-weight: 600;
text-decoration: none;
transition: all .25s ease;
}
.oniric-btn-primary {
background: #000;
color: #fff;
border: 1px solid #000;
}
.oniric-btn-primary:hover {
background: #333;
color: #fff;
}
.oniric-btn-secondary {
background: #fff;
color: #000;
border: 1px solid rgba(0,0,0,.28);
}
.oniric-btn-secondary:hover {
background: #000;
color: #fff;
}
@media (max-width: 991.98px) {
.oniric-product-detail {
padding: 90px 0 60px;
}
.oniric-product-gallery {
position: static;
}
.oniric-product-main-img {
min-height: auto;
padding: 24px;
}
.oniric-product-info {
padding-left: 0;
}
.oniric-product-metrics {
grid-template-columns: 1fr;
}
.oniric-product-metric {
border-right: 0;
border-bottom: 1px solid rgba(0,0,0,.08);
}
.oniric-product-actions {
flex-direction: column;
align-items: stretch;
}
.oniric-btn-primary,
.oniric-btn-secondary {
width: 100%;
}
}
/* ==============================
ONIRIC - LEGAL PAGES
============================== */
.oniric-legal-page {
background:
radial-gradient(circle at 20% 20%, rgba(93, 169, 255, 0.14), transparent 35%),
radial-gradient(circle at 80% 70%, rgba(255, 140, 0, 0.10), transparent 35%),
#0A1F44;
color: #E6EAF2;
min-height: 100vh;
padding-top: 120px;
padding-bottom: 80px;
}
.oniric-legal-page .legal-card {
background: rgba(6, 18, 42, 0.88);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.38);
backdrop-filter: blur(10px);
}
.oniric-legal-page h1,
.oniric-legal-page h2,
.oniric-legal-page h3,
.oniric-legal-page h4 {
color: #FFFFFF;
}
.oniric-legal-page h1 {
margin-bottom: 2rem;
letter-spacing: -0.04em;
}
.oniric-legal-page h3 {
margin-bottom: 1rem;
color: #FFFFFF;
}
.oniric-legal-page p,
.oniric-legal-page li {
color: #C9D1E3;
line-height: 1.65;
}
.oniric-legal-page strong {
color: #FFFFFF;
}
.oniric-legal-page ul {
padding-left: 1.4rem;
margin-bottom: 1.5rem;
}
.oniric-legal-page li {
margin-bottom: 0.45rem;
}
.oniric-legal-page a {
color: #5DA9FF;
text-decoration: none;
}
.oniric-legal-page a:hover {
color: #8EC5FF;
text-decoration: underline;
}
.oniric-tech-hero,
.oniric-tech-cta {
background: #000;
color: #fff;
padding: 140px 0;
}
.oniric-tech-hero h1,
.oniric-tech-cta h2 {
font-size: 3.4rem;
font-weight: 600;
margin-bottom: 24px;
}
.oniric-tech-hero p,
.oniric-tech-cta p,
.oniric-tech-lead {
max-width: 760px;
color: rgba(255,255,255,.72);
font-size: 1.15rem;
line-height: 1.7;
}
.oniric-tech-section {
background: #0a0a0a;
color: #fff;
padding: 110px 0;
}
.oniric-tech-dark {
background: #000;
}
.oniric-tech-section h2 {
font-size: 2.6rem;
font-weight: 600;
margin-bottom: 24px;
}
.oniric-tech-section p,
.oniric-tech-section li {
color: rgba(255,255,255,.72);
line-height: 1.7;
}
.oniric-tech-card,
.oniric-tech-highlight,
.oniric-tech-product {
background: #111;
border: 1px solid rgba(255,255,255,.08);
padding: 32px;
height: 100%;
}
.oniric-tech-card h3,
.oniric-tech-product h3,
.oniric-tech-highlight h3 {
color: #fff;
font-size: 1.35rem;
margin-bottom: 16px;
}
.oniric-tech-product-featured {
background: linear-gradient(180deg, #151515 0%, #0f0f0f 100%);
border-color: rgba(255,255,255,.18);
}
@media (max-width: 991px) {
.oniric-tech-hero,
.oniric-tech-cta,
.oniric-tech-section {
padding: 80px 0;
}
.oniric-tech-hero h1,
.oniric-tech-cta h2,
.oniric-tech-section h2 {
font-size: 2.1rem;
}
}
.oniric-tech-lead, .oniric-tech-cta {
margin: 0 auto;
text-align: center;
}
.oniric-lang-switcher {
display: flex;
align-items: center;
gap: 6px;
}
.oniric-lang-switcher .nav-link {
color: rgba(255,255,255,.65);
font-size: 14px;
font-weight: 600;
letter-spacing: .06em;
padding: 6px 10px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 999px;
transition: all .25s ease;
}
.oniric-lang-switcher .nav-link:hover,
.oniric-lang-switcher .nav-link.active {
color: #fff;
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.35);
}
.oniric-event-test-create {
background: #333;
}
/* =========================================================
ONIRIC MOBILE SLEEP PERFORMANCE REPORT
CSS integrado desde view.php para evitar estilos inline.
Mantener este bloque al final para que sobrescriba los estilos
genéricos anteriores de .bar, .pill, .oniric-section-title, etc.
========================================================= */
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('/fonts/plus-jakarta/PlusJakartaSans-Regular.ttf') format('truetype');
font-weight: 400;
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('/fonts/plus-jakarta/PlusJakartaSans-Bold.ttf') format('truetype');
font-weight: 700;
}
:root {
--bs-oniric-red: #E1523E;
--bs-oniric-orange: #E9552C;
--bs-oniric-black: #2D2926;
--bs-oniric-bg: #F7F6F3;
--bs-oniric-soft: #FFF4F0;
--bs-oniric-line: #F0C8BE;
--bs-oniric-grey: #7a7470;
}
body {
background: var(--bs-oniric-bg);
}
.oniric-mobile-report {
font-family: 'Plus Jakarta Sans', sans-serif;
color: var(--bs-oniric-black);
background: var(--bs-oniric-bg);
overflow: hidden;
}
.oniric-report-section {
position: relative;
padding: 36px 18px;
}
.oniric-report-container {
max-width: 760px;
margin: 0 auto;
}
.oniric-eyebrow {
display: inline-block;
color: var(--bs-oniric-red);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
margin-bottom: 10px;
}
.oniric-report-title {
font-size: clamp(34px, 10vw, 58px);
line-height: .96;
font-weight: 700;
margin: 0;
}
.oniric-section-title {
font-size: clamp(27px, 7vw, 42px);
line-height: 1.05;
font-weight: 700;
margin: 0 0 14px;
}
.oniric-section-text {
font-size: 15px;
line-height: 1.55;
color: var(--bs-oniric-grey);
margin: 0;
}
.oniric-cover {
min-height: 92vh;
color: white;
display: flex;
align-items: flex-end;
background-image:
linear-gradient(180deg, rgba(45,41,38,.05), rgba(154,38,28,.35) 45%, rgba(0,0,0,.94)),
url('/images/oniric/test-calidad-resultados.jpg');
background-size: cover;
background-position: center;
padding: 28px 20px;
}
.oniric-cover-meta {
margin-top: 34px;
border-top: 1px solid rgba(255,255,255,.35);
}
.oniric-cover-meta-row {
display: grid;
grid-template-columns: 88px 1fr;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,.25);
font-size: 14px;
}
.oniric-cover-meta-row span {
opacity: .7;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.oniric-cover-footer {
margin-top: 38px;
display: flex;
justify-content: space-between;
gap: 24px;
font-size: 13px;
line-height: 1.35;
}
.oniric-score-card {
background: white;
border-radius: 28px;
padding: 30px 22px;
box-shadow: 0 18px 50px rgba(45,41,38,.08);
text-align: center;
}
.oniric-score-circle {
width: 210px;
height: 210px;
margin: 22px auto;
border-radius: 50%;
background:
radial-gradient(circle at center, white 0 56%, transparent 57%),
conic-gradient(var(--bs-oniric-red) 0 %, #D8D8D8 % 100%);
display: grid;
place-items: center;
}
.oniric-score-inner {
width: 156px;
height: 156px;
border-radius: 50%;
background: white;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.oniric-score-number {
color: var(--bs-oniric-red);
font-size: 58px;
line-height: .9;
font-weight: 700;
}
.oniric-score-max {
color: var(--bs-oniric-red);
font-size: 20px;
font-weight: 700;
}
.oniric-status {
margin-top: 8px;
font-size: 18px;
font-weight: 700;
}
.oniric-status.is-good {
color: #3F8F61;
}
.oniric-status.is-medium {
color: var(--bs-oniric-red);
}
.oniric-status.is-low {
color: #B92C22;
}
.oniric-status-text {
margin: 12px auto 0;
max-width: 480px;
color: var(--bs-oniric-grey);
font-size: 15px;
line-height: 1.5;
}
.oniric-radar-card {
margin-top: 18px;
background: var(--bs-oniric-soft);
border: 1px solid var(--bs-oniric-line);
border-radius: 24px;
padding: 24px 18px;
}
.oniric-chart-box {
min-height: 310px;
display: grid;
place-items: center;
overflow: hidden;
}
#chart {
width: 100%;
min-height: 300px;
}
.oniric-message-card {
margin-top: 18px;
background: var(--bs-oniric-soft);
border: 1px solid var(--bs-oniric-line);
border-radius: 22px;
padding: 20px;
font-size: 16px;
line-height: 1.45;
font-weight: 700;
}
.oniric-metrics-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin-top: 22px;
}
.oniric-metric-card {
background: white;
border: 1px solid #ece2de;
border-radius: 20px;
padding: 18px;
}
.oniric-metric-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.oniric-metric-name {
font-weight: 700;
font-size: 15px;
}
.oniric-metric-value {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--bs-oniric-soft);
color: var(--bs-oniric-red);
display: grid;
place-items: center;
font-weight: 700;
font-size: 18px;
flex: 0 0 auto;
}
.oniric-metric-help {
margin: 9px 0 0;
color: var(--bs-oniric-grey);
font-size: 13px;
line-height: 1.4;
}
.oniric-impact-list {
display: grid;
gap: 14px;
margin-top: 24px;
}
.oniric-impact-item {
display: grid;
grid-template-columns: 54px 1fr;
gap: 16px;
align-items: center;
}
.oniric-impact-icon {
height: 54px;
border-radius: 16px;
background: var(--bs-oniric-soft);
color: var(--bs-oniric-red);
display: grid;
place-items: center;
font-weight: 700;
}
.oniric-impact-item h3 {
margin: 0;
font-size: 17px;
line-height: 1.2;
color: #333;
}
.oniric-impact-item p {
margin: 4px 0 0;
color: var(--bs-oniric-grey);
font-size: 14px;
line-height: 1.4;
}
.oniric-global-score {
background: white;
border-radius: 28px;
padding: 26px 20px;
box-shadow: 0 18px 50px rgba(45,41,38,.08);
}
.oniric-psqi-number {
width: 118px;
height: 118px;
margin: 18px auto 20px;
border-radius: 50%;
background: var(--bs-oniric-soft);
border: 1px solid var(--bs-oniric-line);
color: var(--bs-oniric-red);
display: grid;
place-items: center;
font-size: 44px;
font-weight: 700;
}
.oniric-score-bar-wrap {
margin: 22px 0 12px;
}
.bar-container {
width: 100%;
}
.bar {
border: 1px solid #aaa;
height: 14px;
width: 100%;
border-radius: 999px;
overflow: hidden;
background: #E9E6E3;
}
#progress {
height: 100%;
width: var(--score-percent, 0%);
border-radius: 999px;
background-image: linear-gradient(
90deg,
#3FAF6C 0%,
#7FD36B 27.7%,
#F2B84B 38%,
#E9552C 55%,
#D43C2F 70%,
#8A1F1A 85%,
#2D2926 100%
);
background-size: calc(10000% / var(--score-percent-number)) 100%;
background-repeat: no-repeat;
}
.pill {
position: absolute;
right: -16px;
top: -34px;
min-width: 32px;
height: 26px;
border-radius: 999px;
background: var(--bs-oniric-black);
color: white;
display: grid;
place-items: center;
font-size: 12px;
font-weight: 700;
}
.line {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255,255,255,.55);
}
.oniric-recommendation-box {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at top left, rgba(225,82,62,.55), transparent 34%),
linear-gradient(145deg, #2D2926, #111);
color: white;
border-radius: 30px;
padding: 34px 22px;
}
.oniric-recommendation-text {
margin: 18px auto 0;
max-width: 560px;
color: rgba(255,255,255,.84);
font-size: 15px;
line-height: 1.55;
}
.oniric-recommendation-text p {
color: rgba(255,255,255,.84);
}
.oniric-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 12px 22px;
border-radius: 999px;
background: var(--bs-oniric-red);
color: white;
text-decoration: none;
font-weight: 700;
margin-top: 24px;
}
.oniric-button:hover {
color: white;
text-decoration: none;
opacity: .92;
}
.oniric-footer-note {
margin-top: 18px;
text-align: center;
color: var(--bs-oniric-grey);
font-size: 13px;
}
@media (min-width: 768px) {
.oniric-report-section {
padding: 56px 24px;
}
.oniric-metrics-grid {
grid-template-columns: repeat(2, 1fr);
}
.oniric-cover {
min-height: 760px;
padding: 44px;
}
}
@media (min-width: 992px) {
.oniric-metrics-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.oniric-body-data {
margin-top: 22px;
}
.oniric-body-data-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin-top: 20px;
}
.oniric-body-card {
background: var(--bs-oniric-soft);
border: 1px solid var(--bs-oniric-line);
border-radius: 18px;
padding: 18px;
}
.oniric-body-card small {
display: block;
color: var(--bs-oniric-red);
font-size: 9px;
line-height: 1;
letter-spacing: 1.2px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 8px;
}
.oniric-body-card strong {
display: block;
color: var(--bs-oniric-black);
font-size: 25px;
line-height: 1;
font-weight: 700;
}
.oniric-body-card span {
display: block;
margin-top: 9px;
color: var(--bs-oniric-grey);
font-size: 12px;
line-height: 1.35;
}
@media (min-width: 576px) {
.oniric-body-data-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.oniric-body-data-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* =========================
FIX SLEEP SCORE CIRCLE
========================= */
.oniric-score-circle,
.sleep-score-circle {
width: 180px;
height: 180px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 30px auto;
font-size: 3rem;
font-weight: 700;
position: relative;
/* estilo base */
border: 2px solid rgba(0,0,0,0.08);
background: #fff;
box-shadow:
0 10px 30px rgba(0,0,0,0.08),
inset 0 0 0 6px rgba(0,0,0,0.03);
}
/* estados tipo resultado */
.oniric-score-circle.is-good {
background: linear-gradient(145deg, #e6f7ec, #ffffff);
color: #3FAF6C;
}
.oniric-score-circle.is-medium {
width: 210px;
height: 210px;
margin: 22px auto;
border-radius: 50%;
background:
radial-gradient(circle at center, white 0 56%, transparent 57%),
conic-gradient(var(--bs-oniric-red) 0 68%, #D8D8D8 68% 100%);
display: grid;
place-items: center;
}
.oniric-score-circle.is-low {
background: linear-gradient(145deg, #fdeaea, #ffffff);
color: #D43C2F;
}
.oniric-error-page {
min-height: 78vh;
background: #F7F6F3;
color: #2D2926;
font-family: 'Plus Jakarta Sans', sans-serif;
display: flex;
align-items: center;
padding: 56px 18px;
}
.oniric-error-wrap {
max-width: 1080px;
margin: 0 auto;
width: 100%;
display: grid;
grid-template-columns: 1fr;
gap: 34px;
align-items: center;
}
.oniric-error-card {
background: white;
border: 1px solid #F0C8BE;
border-radius: 30px;
padding: clamp(28px, 6vw, 56px);
box-shadow: 0 24px 70px rgba(45,41,38,.08);
}
.oniric-eyebrow {
display: inline-block;
color: #E1523E;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
margin-bottom: 14px;
}
.oniric-error-title {
color: #333;
font-size: clamp(38px, 8vw, 72px);
line-height: .95;
font-weight: 700;
margin: 0 0 22px;
}
.oniric-error-text {
font-size: 17px;
line-height: 1.6;
color: #6f6b68;
max-width: 640px;
margin: 0 0 18px;
}
.oniric-error-code {
margin: 26px 0;
display: inline-flex;
align-items: center;
gap: 10px;
background: #FFF4F0;
border: 1px solid #F0C8BE;
border-radius: 999px;
padding: 10px 16px;
color: #2D2926;
font-size: 14px;
font-weight: 700;
}
.oniric-error-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.oniric-btn-main,
.oniric-btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 12px 22px;
border-radius: 999px;
text-decoration: none;
font-weight: 700;
}
.oniric-btn-main {
background: #E1523E;
color: white;
}
.oniric-btn-secondary {
background: #FFF4F0;
color: #2D2926;
border: 1px solid #F0C8BE;
}
.oniric-btn-main:hover,
.oniric-btn-secondary:hover {
text-decoration: none;
opacity: .9;
}
.oniric-error-visual {
min-height: 340px;
border-radius: 30px;
background:
radial-gradient(circle at 20% 20%, rgba(225,82,62,.35), transparent 28%),
radial-gradient(circle at 80% 30%, rgba(130,93,199,.28), transparent 30%),
linear-gradient(145deg, #2D2926, #111);
position: relative;
overflow: hidden;
display: grid;
place-items: center;
color: white;
}
.oniric-error-visual::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent, rgba(0,0,0,.35));
}
.oniric-error-number {
position: relative;
z-index: 2;
font-size: clamp(90px, 22vw, 180px);
line-height: 1;
font-weight: 700;
color: white;
}
.oniric-error-small {
position: absolute;
z-index: 2;
bottom: 28px;
left: 28px;
right: 28px;
font-size: 15px;
color: rgba(255,255,255,.78);
}
@media (min-width: 900px) {
.oniric-error-wrap {
grid-template-columns: 1.08fr .92fr;
}
}
/* ==========================================
QUOTE SECTION ONIRIC
========================================== */
.about-oniric .oniric-quote-band {
position: relative;
overflow: hidden;
background:
radial-gradient(
circle at 20% 30%,
rgba(225,82,62,0.28) 0%,
transparent 30%
),
radial-gradient(
circle at 80% 70%,
rgba(130,93,199,0.24) 0%,
transparent 35%
),
linear-gradient(
135deg,
#002f6c 0%,
#111118 40%,
#000000 100%
);
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.about-oniric .oniric-quote-band .container {
position: relative;
z-index: 2;
}
.about-oniric .oniric-quote-band .texto-quotes {
margin: 0;
color: #f1f1ee !important;
font-size: clamp(2rem, 4vw, 4.2rem);
font-weight: 300;
line-height: 1;
letter-spacing: -0.04em;
}
.about-oniric .oniric-quote-band .animated-image {
opacity: 0.8;
}
.about-oniric .oniric-quote-band blockquote p {
color: rgba(241,241,238,0.62) !important;
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* =====================================================
NAVBAR ONIRIC DARK / PERFORMANCE
===================================================== */
.navbar.main-navbar-dark{
min-height:78px;
padding:18px clamp(18px,4vw,56px);
background:transparent;
border-bottom:1px solid rgba(241,241,238,.08);
box-shadow:none;
transition:
background .25s ease,
box-shadow .25s ease,
padding .25s ease,
border-color .25s ease;
z-index:1040;
}
/* Estado scroll */
.navbar.main-navbar-dark.scrolled{
background:rgba(0,0,0,.82) !important;
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(241,241,238,.08);
box-shadow:0 12px 30px rgba(0,0,0,.35);
padding-top:12px;
padding-bottom:12px;
}
.main-navbar-dark .container-fluid{
padding:0;
}
/* Logo */
.main-navbar-dark .navbar-brand{
padding:0;
margin-right:clamp(28px,5vw,72px);
display:flex;
align-items:center;
}
.main-navbar-dark .navbar-brand img{
width:auto;
display:block;
}
/* Menú */
.main-navbar-dark .navbar-nav{
align-items:center;
gap:clamp(8px,1.6vw,24px);
}
.main-navbar-dark .nav-link{
position:relative;
color:var(--bs-oniric-white) !important;
font-size:.86rem;
line-height:1;
font-weight:500;
letter-spacing:-.02em;
padding:12px 0 !important;
opacity:.78;
transition:
opacity .22s ease,
color .22s ease;
}
.main-navbar-dark .nav-link:hover,
.main-navbar-dark .nav-link.active{
opacity:1;
}
.main-navbar-dark .nav-link::after{
content:'';
position:absolute;
left:0;
right:0;
bottom:3px;
height:1px;
background:var(--bs-oniric-white);
transform:scaleX(0);
transform-origin:left;
transition:transform .22s ease;
}
.main-navbar-dark .nav-link:hover::after,
.main-navbar-dark .nav-link.active::after{
transform:scaleX(1);
}
/* Selector idioma */
.main-navbar-dark .oniric-lang-switcher{
gap:8px;
margin-left:auto;
margin-right:22px;
}
.main-navbar-dark .oniric-lang-switcher .nav-link{
font-size:.72rem;
letter-spacing:.06em;
padding:8px 0 !important;
opacity:.42;
}
.main-navbar-dark .oniric-lang-switcher .nav-link.active,
.main-navbar-dark .oniric-lang-switcher .nav-link:hover{
opacity:1;
}
/* Variante circular idioma (como mockups) */
.main-navbar-dark .oniric-lang-switcher .nav-link.active{
width:34px;
height:34px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(241,241,238,.18);
}
/* Carrito */
.main-navbar-dark .oniric-cart-link{
display:inline-flex !important;
align-items:center;
gap:7px;
}
.main-navbar-dark .oniric-cart-count{
min-width:18px;
height:18px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
background:var(--bs-oniric-white);
color:var(--bs-oniric-black);
font-size:.68rem;
line-height:1;
padding:0 5px;
}
/* Hamburguesa móvil */
.main-navbar-dark .navbar-toggler{
border:0;
padding:8px;
box-shadow:none !important;
}
.main-navbar-dark .navbar-toggler-icon{
width:28px;
height:18px;
background-image:none;
position:relative;
border-top:1.5px solid var(--bs-oniric-white);
border-bottom:1.5px solid var(--bs-oniric-white);
}
.main-navbar-dark .navbar-toggler-icon::after{
content:'';
position:absolute;
left:0;
right:0;
top:50%;
height:1.5px;
background:var(--bs-oniric-white);
transform:translateY(-50%);
}
/* Hover performance opcional */
.main-navbar-dark .nav-link:hover{
color:#ffffff !important;
}
/* Mobile collapse */
@media (max-width:991px){
.main-navbar-dark .navbar-collapse{
margin-top:20px;
padding:24px;
background:rgba(10,10,10,.95);
backdrop-filter:blur(20px);
border:1px solid rgba(241,241,238,.08);
border-radius:24px;
}
.main-navbar-dark .navbar-nav{
gap:0;
}
.main-navbar-dark .nav-link{
padding:16px 0 !important;
}
}
.oniric-saved-profile-section .accordion-button {
background: linear-gradient(135deg, #002F6C 0%, #825DC7 45%, #E1523E 100%);
color: #F1F1EE;
border: 0;
box-shadow: none;
}
.oniric-saved-profile-section .accordion-button.collapsed {
background: #2D2926;
color: #F1F1EE;
}
.oniric-saved-profile-section .accordion-button:not(.collapsed) {
background: linear-gradient(135deg, #002F6C 0%, #825DC7 45%, #E1523E 100%);
color: #F1F1EE;
box-shadow: none;
}
.oniric-saved-profile-section .accordion-button::after {
filter: invert(1);
}
.oniric-profile-hero {
background:
radial-gradient(circle at 80% 20%, rgba(253, 218, 37, .22), transparent 28%),
linear-gradient(135deg, #002F6C 0%, #2D2926 55%, #825DC7 100%);
}
.oniric-eyebrow {
display: inline-block;
margin-bottom: 12px;
color: #FDDA25;
font-size: .78rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.oniric-result-card {
border: 1px solid rgba(241, 241, 238, .28);
border-radius: 24px;
padding: 28px;
background: rgba(45, 41, 38, .36);
backdrop-filter: blur(14px);
}
.oniric-result-card strong {
color: #FDDA25;
}
.oniric-data-card,
.oniric-profile-block,
.oniric-profile-cta {
border-radius: 24px;
padding: 28px;
background: #fff;
box-shadow: 0 18px 45px rgba(45, 41, 38, .08);
}
.oniric-data-icon {
max-height: 72px;
margin-bottom: 16px;
opacity: .9;
}
.oniric-data-card h4 {
color: #002F6C;
font-weight: 800;
margin-bottom: 10px;
}
.oniric-data-card h4 span {
color: #825DC7;
font-size: 1rem;
}
.oniric-data-card p {
margin-bottom: 0;
color: rgba(45, 41, 38, .72);
}
.oniric-profile-block h5,
.oniric-profile-cta h5 {
color: #002F6C;
font-weight: 800;
margin-bottom: 18px;
}
.oniric-profile-block .list-group-item {
padding: 14px 0;
border-color: rgba(45, 41, 38, .08);
color: rgba(45, 41, 38, .82);
}
.oniric-profile-block .list-group-item strong {
color: #2D2926;
}
.oniric-profile-cta {
background:
linear-gradient(135deg, rgba(0,47,108,.96), rgba(45,41,38,.96)),
radial-gradient(circle at 90% 20%, rgba(225,82,62,.35), transparent 35%);
color: #F1F1EE;
}
.oniric-profile-cta h5 {
color: #FDDA25;
}
.oniric-profile-cta p {
color: rgba(241, 241, 238, .84);
}
.oniric-profile-cta .btn-primary {
background: #E1523E;
border-color: #E1523E;
}
.oniric-profile-cta .btn-primary:hover {
background: #FDDA25;
border-color: #FDDA25;
color: #2D2926;
}
@media (max-width: 767px) {
.oniric-profile-hero {
padding: 28px !important;
}
.oniric-profile-cta .btn {
width: 100%;
margin: 6px 0 !important;
}
}
.oniric-eyebrow {
display: inline-block;
margin-bottom: 18px;
font-size: .78rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
}
.oniric-register-highlight {
display: inline-block;
padding: 18px 22px;
border-left: 4px solid #FDDA25;
background: rgba(241,241,238,.08);
border-radius: 0 18px 18px 0;
}
.oniric-register-form {
color: #2D2926;
}
.oniric-register-form h3 {
color: #2D2926;
font-weight: 700;
}
/* =========================================================
ONIRIC RECOVERY LAB - BUTTON SYSTEM
Look & Feel Performance / Web
========================================================= */
/* Base común */
.btn-oniric-primary,
.btn-oniric-secondary,
.btn-oniric-dark,
.btn-oniric-light,
.btn-oniric-outline,
.btn-oniric-outline-light,
.btn-oniric-ghost,
.btn-oniric-link,
.btn-outline-dark,
.btn-outline-light,
.btn-secondary,
.btn-light {
display:inline-flex;
align-items:center;
justify-content:center;
gap:.55rem;
min-height:46px;
padding:13px 25px;
border-radius:var(--oniric-radius-pill);
font-family:inherit;
font-size:.86rem;
font-weight:700;
line-height:1;
letter-spacing:.01em;
text-decoration:none!important;
border:1px solid transparent;
cursor:pointer;
transition:var(--oniric-transition);
position:relative;
overflow:hidden;
white-space:nowrap;
}
.btn-primary,
.btn-outline-secondary {
border-radius:var(--oniric-radius-pill);
}
.btn-oniric-primary:focus,
.btn-oniric-secondary:focus,
.btn-oniric-dark:focus,
.btn-oniric-light:focus,
.btn-oniric-outline:focus,
.btn-oniric-outline-light:focus,
.btn-oniric-ghost:focus,
.btn-oniric-link:focus,
.btn-outline-dark:focus,
.btn-outline-light:focus{
outline:none;
box-shadow:0 0 0 4px rgba(225,82,62,.22);
}
/* Botón principal: CTA de conversión */
.btn-oniric-primary{
color:#fff!important;
background:linear-gradient(135deg, var(--oniric-performance-red) 0%, #f06a3a 52%, var(--oniric-performance-violet) 135%);
border-color:rgba(225,82,62,.78);
box-shadow:var(--oniric-shadow-soft);
}
.btn-oniric-primary:hover{
color:#fff!important;
transform:translateY(-2px);
box-shadow:var(--oniric-shadow-hover);
filter:saturate(1.06) contrast(1.02);
}
.btn-oniric-primary:active{
transform:translateY(0);
box-shadow:0 10px 24px rgba(8,22,38,.18);
}
/* Variante secundaria: CTA técnico / Recovery Check */
.btn-oniric-secondary{
color:var(--oniric-ink)!important;
background:var(--oniric-white);
border-color:rgba(241,241,238,.85);
box-shadow:0 14px 32px rgba(8,22,38,.12);
}
.btn-oniric-secondary:hover{
color:var(--oniric-ink)!important;
background:#fff;
transform:translateY(-2px);
box-shadow:var(--oniric-shadow-hover);
}
/* Botón oscuro: producto / compra */
.btn-oniric-dark{
color:#fff!important;
background:linear-gradient(135deg, #071523 0%, var(--oniric-ink) 48%, #02060a 100%);
border-color:rgba(255,255,255,.08);
box-shadow:0 14px 34px rgba(8,22,38,.25);
}
.btn-oniric-dark:hover{
color:#fff!important;
transform:translateY(-2px);
box-shadow:0 22px 46px rgba(8,22,38,.34);
}
/* Botón claro: sobre fondos oscuros */
.btn-oniric-light{
color:var(--oniric-ink)!important;
background:rgba(255,255,255,.94);
border-color:rgba(255,255,255,.58);
box-shadow:0 14px 34px rgba(0,0,0,.18);
backdrop-filter:blur(12px);
}
.btn-oniric-light:hover{
color:var(--oniric-ink)!important;
background:#fff;
transform:translateY(-2px);
box-shadow:0 22px 46px rgba(0,0,0,.24);
}
/* Outline oscuro: CTA secundario en fondo claro */
.btn-oniric-outline,
.btn-outline-dark{
color:var(--oniric-ink)!important;
background:transparent;
border-color:rgba(8,22,38,.28);
box-shadow:none;
}
.btn-oniric-outline:hover,
.btn-outline-dark:hover{
color:#fff!important;
background:var(--oniric-ink);
border-color:var(--oniric-ink);
transform:translateY(-2px);
box-shadow:0 18px 38px rgba(8,22,38,.18);
}
/* Outline claro: para hero/parallax */
.btn-oniric-outline-light,
.btn-outline-light{
color:#fff!important;
background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.48);
box-shadow:none;
backdrop-filter:blur(10px);
}
.btn-oniric-outline-light:hover,
.btn-outline-light:hover{
color:var(--oniric-ink)!important;
background:#fff;
border-color:#fff;
transform:translateY(-2px);
box-shadow:0 18px 38px rgba(0,0,0,.22);
}
/* Ghost: navegación suave dentro de bloques */
.btn-oniric-ghost{
color:var(--oniric-ink)!important;
background:rgba(8,22,38,.04);
border-color:rgba(8,22,38,.08);
box-shadow:none;
}
.btn-oniric-ghost:hover{
color:var(--oniric-performance-red)!important;
background:rgba(225,82,62,.08);
border-color:rgba(225,82,62,.18);
transform:translateY(-1px);
}
/* Link elegante tipo look&feel Oniric */
.btn-oniric-link{
min-height:auto;
padding:0 0 5px;
border-radius:0;
color:var(--oniric-ink)!important;
background:transparent;
border:none;
border-bottom:1px solid currentColor;
box-shadow:none;
font-size:.84rem;
font-weight:700;
}
.btn-oniric-link:hover{
color:var(--oniric-performance-red)!important;
transform:translateY(-1px);
}
/* Tamaños */
.btn-oniric-sm{
min-height:38px;
padding:10px 18px;
font-size:.78rem;
}
.btn-oniric-lg{
min-height:54px;
padding:16px 31px;
font-size:.94rem;
}
/* Botón ancho para cards y mobile */
.btn-oniric-block{
width:100%;
}
/* Estados deshabilitados */
.btn-oniric-primary:disabled,
.btn-oniric-secondary:disabled,
.btn-oniric-dark:disabled,
.btn-oniric-light:disabled,
.btn-oniric-outline:disabled,
.btn-oniric-outline-light:disabled,
.btn-oniric-ghost:disabled,
.btn-oniric-link:disabled,
.btn-outline-dark:disabled,
.btn-outline-light:disabled,
.btn.disabled,
.btn:disabled{
opacity:.48;
cursor:not-allowed;
pointer-events:none;
transform:none!important;
box-shadow:none!important;
}
/* Iconos dentro de botón */
.btn-oniric-primary .material-symbols-outlined,
.btn-oniric-secondary .material-symbols-outlined,
.btn-oniric-dark .material-symbols-outlined,
.btn-oniric-light .material-symbols-outlined,
.btn-oniric-outline .material-symbols-outlined,
.btn-oniric-outline-light .material-symbols-outlined,
.btn-oniric-ghost .material-symbols-outlined{
font-size:1.08em;
line-height:0;
}
/* Micro-brillo premium en primary/dark */
.btn-oniric-primary::after,
.btn-oniric-dark::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 42%, transparent 68%);
transform:translateX(-120%);
transition:transform .55s ease;
pointer-events:none;
}
.btn-oniric-primary:hover::after,
.btn-oniric-dark:hover::after{
transform:translateX(120%);
}
/* Adaptación en grupos de botones */
.hero-cta,
.oniric-cta-group{
display:flex;
flex-wrap:wrap;
gap:14px;
align-items:center;
}
/* Botones dentro de cards Oniric */
.oniric-product-card .btn-oniric-primary,
.oniric-product-card .btn-oniric-dark,
.oniric-product-card .btn-outline-dark,
.oniric-product-card .btn-oniric-outline{
margin-top:.4rem;
}
/* Ajuste mobile */
@media (max-width:575.98px){
.btn-oniric-primary,
.btn-oniric-secondary,
.btn-oniric-dark,
.btn-oniric-light,
.btn-oniric-outline,
.btn-oniric-outline-light,
.btn-oniric-ghost,
.btn-outline-dark,
.btn-outline-light{
width:100%;
min-height:48px;
padding:14px 22px;
}
.btn-oniric-link{
width:auto;
min-height:auto;
padding:0 0 5px;
}
.hero-cta,
.oniric-cta-group{
width:100%;
gap:12px;
}
}
.material-symbols-outlined {
font-size: 46px;
color: chocolate;
padding-top: 10px;
}
/* =========================================================
ONIRIC SLEEP FITTING PAGE
========================================================= */
.oniric-lab-hero {
min-height: 86vh;
padding: 140px 0 100px;
background:
radial-gradient(circle at 78% 18%, rgba(130,93,199,.22), transparent 34%),
radial-gradient(circle at 18% 22%, rgba(225,82,62,.22), transparent 28%),
linear-gradient(135deg, #050607 0%, #081626 54%, #020305 100%);
position: relative;
overflow: hidden;
}
.oniric-lab-hero::after {
content: "";
position: absolute;
inset: auto -10% -30% -10%;
height: 45%;
background: linear-gradient(90deg, rgba(225,82,62,.20), rgba(253,218,37,.08), rgba(130,93,199,.18));
filter: blur(70px);
opacity: .9;
pointer-events: none;
}
.oniric-lab-hero .container {
position: relative;
z-index: 2;
}
.oniric-lab-hero-text {
max-width: 680px;
color: rgba(255,255,255,.78);
font-size: 1.08rem;
line-height: 1.8;
}
.oniric-lab-hero-card {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
border-radius: 26px;
padding: 34px;
color: #fff;
box-shadow: 0 28px 80px rgba(0,0,0,.34);
backdrop-filter: blur(18px);
}
.oniric-lab-hero-card-kicker {
display: inline-block;
margin-bottom: 22px;
color: #FDDA25;
font-weight: 800;
font-size: .78rem;
letter-spacing: .12em;
text-transform: uppercase;
}
.oniric-lab-hero-card h2 {
font-size: clamp(2rem, 3vw, 3.4rem);
line-height: 1;
margin-bottom: 20px;
}
.oniric-lab-hero-card p {
color: rgba(255,255,255,.72);
line-height: 1.7;
}
.oniric-lab-mini-scores {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 30px;
}
.oniric-lab-mini-scores div {
border-radius: 18px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.10);
padding: 18px 14px;
text-align: center;
}
.oniric-lab-mini-scores span {
display: block;
color: rgba(255,255,255,.56);
font-size: .74rem;
text-transform: uppercase;
letter-spacing: .08em;
}
.oniric-lab-mini-scores strong {
display: block;
margin-top: 8px;
color: #FDDA25;
font-size: 2rem;
line-height: 1;
}
/* Sections */
.oniric-lab-section {
padding: 110px 0;
}
.oniric-lab-highlight {
display: inline-block;
margin-top: 26px;
padding: 18px 24px;
border-radius: 999px;
background: rgba(225,82,62,.08);
color: #E1523E;
font-weight: 800;
}
/* Levels */
.oniric-lab-level-card {
height: 100%;
border-radius: 28px;
padding: 38px;
background: #fff;
border: 1px solid rgba(8,22,38,.10);
box-shadow: 0 24px 70px rgba(8,22,38,.10);
}
.oniric-lab-level-card-featured {
background:
radial-gradient(circle at 90% 0%, rgba(225,82,62,.13), transparent 32%),
#081626;
color: #fff;
border-color: rgba(255,255,255,.12);
}
.oniric-lab-level-tag {
display: inline-block;
margin-bottom: 18px;
padding: 8px 14px;
border-radius: 999px;
color: #E1523E;
background: rgba(225,82,62,.10);
font-weight: 800;
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .08em;
}
.oniric-lab-level-card-featured .oniric-lab-level-tag {
color: #FDDA25;
background: rgba(253,218,37,.12);
}
.oniric-lab-level-header h3 {
font-size: clamp(2rem, 2.5vw, 3rem);
line-height: 1;
margin-bottom: 20px;
}
.oniric-lab-level-header p {
color: rgba(8,22,38,.68);
line-height: 1.75;
}
.oniric-lab-level-card-featured .oniric-lab-level-header p {
color: rgba(255,255,255,.72);
}
.oniric-lab-check-list {
list-style: none !important;
padding: 0 !important;
margin: 34px 0 0 !important;
}
.oniric-lab-check-list li {
position: relative;
list-style: none !important;
padding-left: 34px;
margin-bottom: 15px;
color: rgba(8,22,38,.76);
}
.oniric-lab-check-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #E1523E;
font-weight: 900;
}
.oniric-lab-level-card-featured .oniric-lab-check-list li {
color: rgba(255,255,255,.78);
}
.oniric-lab-level-card-featured .oniric-lab-check-list li::before {
color: #FDDA25;
}
.oniric-lab-premium-note {
margin-top: 26px;
color: #FDDA25;
font-weight: 800;
}
.oniric-lab-level-footer {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 34px;
}
/* Table */
.oniric-lab-table {
overflow: hidden;
border-radius: 24px;
background: #fff;
box-shadow: 0 24px 70px rgba(8,22,38,.10);
}
.oniric-lab-table thead th {
background: #081626;
color: #fff;
border: none;
padding: 22px;
}
.oniric-lab-table tbody td {
padding: 20px 22px;
border-color: rgba(8,22,38,.08);
}
.oniric-lab-table tbody tr td:first-child {
font-weight: 800;
color: #081626;
}
/* Product bridge */
.oniric-lab-product-options {
display: grid;
gap: 18px;
}
.oniric-lab-product-options div {
padding: 24px;
border-radius: 22px;
background: #fff;
border: 1px solid rgba(8,22,38,.10);
box-shadow: 0 18px 46px rgba(8,22,38,.08);
}
.oniric-lab-product-options span {
display: inline-block;
margin-bottom: 8px;
color: #E1523E;
font-size: .76rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
}
.oniric-lab-product-options h3 {
margin-bottom: 8px;
font-size: 1.25rem;
}
.oniric-lab-product-options p {
margin-bottom: 0;
color: rgba(8,22,38,.64);
}
/* Final CTA */
.oniric-lab-final-cta {
padding: 120px 0;
background:
radial-gradient(circle at 50% 0%, rgba(225,82,62,.22), transparent 32%),
linear-gradient(135deg, #050607 0%, #081626 62%, #020305 100%);
color: #fff;
}
.oniric-lab-final-cta h2 {
font-size: clamp(2.4rem, 5vw, 5.6rem);
line-height: .95;
margin: 18px 0 24px;
}
.oniric-lab-final-cta p {
color: rgba(255,255,255,.74);
font-size: 1.08rem;
line-height: 1.75;
}
/* Modal preview */
.oniric-preview-modal .modal-content {
border: none;
border-radius: 28px;
overflow: hidden;
background: #F1F1EE;
}
.oniric-preview-modal .modal-header {
background: #081626;
color: #fff;
border-bottom: none;
padding: 28px 34px;
}
.oniric-preview-modal .modal-title {
font-size: 1.6rem;
line-height: 1.15;
}
.oniric-preview-modal .btn-close {
filter: invert(1);
opacity: .8;
}
.oniric-modal-kicker {
color: #FDDA25;
font-size: .75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .10em;
}
.oniric-preview-modal .modal-body {
padding: 0;
}
.oniric-report-preview {
background: #050607;
text-align: center;
padding: 28px;
}
.oniric-report-preview img {
max-height: 72vh;
width: auto;
max-width: 100%;
border-radius: 18px;
box-shadow: 0 22px 70px rgba(0,0,0,.38);
}
.oniric-report-preview-caption {
margin-top: 18px;
color: #fff;
}
.oniric-report-carousel .carousel-control-prev,
.oniric-report-carousel .carousel-control-next {
width: 9%;
}
.oniric-modal-footer-cta {
padding: 26px 34px 34px;
background: #F1F1EE;
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
}
.oniric-modal-footer-cta p {
margin: 0;
color: rgba(8,22,38,.70);
line-height: 1.6;
max-width: 720px;
}
/* Responsive */
@media (max-width: 991.98px) {
.oniric-lab-hero {
padding: 120px 0 80px;
}
.oniric-lab-section {
padding: 86px 0;
}
.oniric-lab-level-footer,
.oniric-modal-footer-cta {
flex-direction: column;
align-items: stretch;
}
}
@media (max-width: 575.98px) {
.oniric-lab-mini-scores {
grid-template-columns: 1fr;
}
.oniric-lab-level-card {
padding: 28px;
}
.oniric-lab-highlight {
border-radius: 22px;
}
.oniric-report-preview {
padding: 16px;
}
.oniric-preview-modal .modal-header {
padding: 24px;
}
}
.oniric-alert-strip {
background: linear-gradient(90deg, #2D2926 0%, #E1523E 50%, #825DC7 100%);
color: #F1F1EE;
padding: 12px 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: -0.01em;
}
.oniric-alert-strip .container {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.oniric-alert-strip a {
color: #F1F1EE;
font-weight: 700;
text-decoration: none;
border-bottom: 1px solid rgba(241, 241, 238, 0.8);
transition: opacity 0.2s ease, border-color 0.2s ease;
}
.oniric-alert-strip a:hover {
opacity: 0.75;
border-color: transparent;
}
@media (max-width: 576px) {
.oniric-alert-strip {
font-size: 12px;
line-height: 1.4;
padding: 10px 16px;
}
.oniric-alert-strip .container {
gap: 6px;
}
}
/* =========================================================
ONIRIC RECOVERY PROFILE · NIVEL 1
Añadir al final de site.css
========================================================= */
.recovery-profile-page {
--orp-bg: #F7F6F3;
--orp-soft: #FFF4F0;
--orp-line: #F0C8BE;
--orp-red: #E1523E;
--orp-orange: #E9552C;
--orp-yellow: #FDDA25;
--orp-violet: #825DC7;
--orp-blue: #002F6C;
--orp-black: #2D2926;
--orp-ink: #081626;
--orp-muted: rgba(45,41,38,.68);
background: var(--orp-bg);
color: var(--orp-black);
font-family: "Plus Jakarta Sans", sans-serif;
overflow: hidden;
}
.recovery-profile-page main > .container,
.recovery-profile-page main > .container-fluid {
margin-top: 0;
padding: 0;
}
.orp-section {
position: relative;
padding: clamp(76px, 9vw, 124px) 0;
}
.orp-section-soft {
background: var(--orp-bg);
}
.orp-section-white {
background: #fff;
}
.orp-section-dark {
background:
radial-gradient(circle at 12% 20%, rgba(225,82,62,.22), transparent 30%),
radial-gradient(circle at 86% 16%, rgba(130,93,199,.22), transparent 34%),
linear-gradient(135deg, #050607 0%, #081626 58%, #020305 100%);
color: #fff;
}
.orp-eyebrow {
display: inline-block;
margin-bottom: 16px;
color: var(--orp-red);
font-size: .78rem;
line-height: 1;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
.orp-section-dark .orp-eyebrow,
.orp-hero .orp-eyebrow {
color: var(--orp-yellow);
}
.orp-title {
color: inherit;
font-size: clamp(2.25rem, 5.3vw, 5.9rem);
line-height: .93;
font-weight: 800;
letter-spacing: -.065em;
margin: 0 0 24px;
}
.orp-section-title {
color: inherit;
font-size: clamp(2rem, 3.6vw, 4.2rem);
line-height: .98;
font-weight: 800;
letter-spacing: -.055em;
margin: 0 0 22px;
}
.orp-lead {
color: rgba(255,255,255,.78);
max-width: 720px;
font-size: clamp(1.05rem, 1.5vw, 1.28rem);
line-height: 1.7;
margin: 0 0 28px;
}
.orp-text {
color: var(--orp-muted);
font-size: 1.02rem;
line-height: 1.75;
margin: 0;
}
.orp-section-dark .orp-text {
color: rgba(255,255,255,.72);
}
/* HERO */
.orp-hero {
position: relative;
min-height: 88vh;
display: flex;
align-items: center;
padding: 150px 0 100px;
color: #fff;
background:
linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.56) 42%, rgba(0,0,0,.20) 100%),
radial-gradient(circle at 72% 20%, rgba(225,82,62,.42), transparent 28%),
url('/images/oniric/hero-cyclist.jpg') center center / cover no-repeat;
}
.orp-hero::after {
content: "";
position: absolute;
inset: auto -10% -28% -10%;
height: 45%;
background: linear-gradient(90deg, rgba(225,82,62,.22), rgba(253,218,37,.08), rgba(130,93,199,.18));
filter: blur(70px);
pointer-events: none;
}
.orp-hero .container {
position: relative;
z-index: 2;
}
.orp-hero-claim {
display: inline-block;
margin-top: 24px;
padding: 14px 18px;
border-left: 3px solid var(--orp-yellow);
background: rgba(255,255,255,.08);
border-radius: 0 18px 18px 0;
color: rgba(255,255,255,.82);
font-size: .95rem;
line-height: 1.55;
}
/* MOCKUP REPORT */
.orp-report-mockup {
position: relative;
background: rgba(247,246,243,.96);
color: var(--orp-black);
border-radius: 34px;
padding: 28px;
box-shadow: 0 30px 90px rgba(0,0,0,.34);
border: 1px solid rgba(255,255,255,.30);
}
.orp-report-mockup::before {
content: "";
position: absolute;
inset: -1px;
border-radius: 34px;
padding: 1px;
background: linear-gradient(135deg, rgba(253,218,37,.55), rgba(225,82,62,.55), rgba(130,93,199,.55));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.orp-report-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 18px;
margin-bottom: 24px;
}
.orp-report-head small {
display: block;
color: var(--orp-red);
font-size: .68rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.orp-report-head strong {
display: block;
color: var(--orp-black);
font-size: 1.5rem;
line-height: 1;
margin-top: 4px;
}
.orp-level-pill {
width: 54px;
height: 54px;
border-radius: 999px;
background: var(--orp-red);
color: white;
display: grid;
place-items: center;
font-weight: 800;
}
/* SCORE */
.orp-score-layout {
display: grid;
grid-template-columns: 190px 1fr;
gap: 24px;
align-items: center;
}
.orp-score-circle {
--score: 68;
width: 176px;
height: 176px;
border-radius: 50%;
background:
radial-gradient(circle at center, #F7F6F3 0 56%, transparent 57%),
conic-gradient(var(--orp-red) 0 calc(var(--score) * 1%), #D8D8D8 calc(var(--score) * 1%) 100%);
display: grid;
place-items: center;
box-shadow: inset 0 0 0 1px rgba(45,41,38,.08);
}
.orp-score-inner {
width: 128px;
height: 128px;
border-radius: 50%;
background: #F7F6F3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.orp-score-number {
color: var(--orp-red);
font-size: 52px;
line-height: .9;
font-weight: 800;
}
.orp-score-max {
color: var(--orp-red);
font-size: 18px;
font-weight: 800;
}
.orp-score-info h3 {
margin: 0 0 8px;
color: var(--orp-black);
font-size: 1.35rem;
line-height: 1.05;
font-weight: 800;
}
.orp-score-info p {
margin: 0;
color: var(--orp-muted);
font-size: .94rem;
line-height: 1.55;
}
.orp-status {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
color: var(--orp-red);
font-size: .78rem;
font-weight: 800;
letter-spacing: .10em;
text-transform: uppercase;
}
.orp-status::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
}
/* RADAR */
.orp-radar-card {
margin-top: 24px;
background: #fff;
border: 1px solid rgba(45,41,38,.10);
border-radius: 26px;
padding: 24px;
}
.orp-radar-card h4 {
margin: 0 0 8px;
color: var(--orp-black);
font-size: 1.15rem;
font-weight: 800;
}
.orp-radar-card p {
margin: 0;
color: var(--orp-muted);
font-size: .88rem;
line-height: 1.5;
}
.orp-radar-wrap {
margin-top: 18px;
width: 100%;
aspect-ratio: 1.28 / 1;
}
.orp-radar-wrap svg {
width: 100%;
height: 100%;
display: block;
}
.orp-radar-grid {
fill: none;
stroke: #E8DFDA;
stroke-width: 1.4;
}
.orp-radar-axis {
stroke: #E8DFDA;
stroke-width: 1.2;
}
.orp-radar-area {
fill: rgba(225,82,62,.10);
stroke: var(--orp-red);
stroke-width: 3;
stroke-linejoin: round;
}
.orp-radar-point {
fill: var(--orp-red);
}
.orp-radar-label {
fill: var(--orp-black);
font-size: 13px;
font-weight: 800;
}
/* BODY DATA */
.orp-data-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.orp-data-card {
height: 100%;
background: #fff;
border: 1px solid rgba(45,41,38,.10);
border-radius: 24px;
padding: 24px;
box-shadow: 0 18px 46px rgba(45,41,38,.08);
}
.orp-data-card small {
display: block;
color: var(--orp-red);
font-size: .68rem;
line-height: 1;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 800;
margin-bottom: 12px;
}
.orp-data-card strong {
display: block;
color: var(--orp-black);
font-size: clamp(1.7rem, 3vw, 2.35rem);
line-height: 1;
font-weight: 800;
}
.orp-data-card span {
display: block;
margin-top: 12px;
color: var(--orp-muted);
font-size: .88rem;
line-height: 1.45;
}
/* FEATURE CARDS */
.orp-feature-card {
height: 100%;
background: #fff;
border: 1px solid rgba(45,41,38,.10);
border-radius: 26px;
padding: 30px;
box-shadow: 0 18px 46px rgba(45,41,38,.08);
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.orp-feature-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 64px rgba(45,41,38,.14);
border-color: rgba(225,82,62,.25);
}
.orp-feature-icon {
width: 56px;
height: 56px;
border-radius: 18px;
background: var(--orp-soft);
color: var(--orp-red);
display: grid;
place-items: center;
margin-bottom: 20px;
}
.orp-feature-icon .material-symbols-outlined {
color: var(--orp-red);
font-size: 32px;
padding: 0;
}
.orp-feature-card h3 {
color: var(--orp-black);
font-size: 1.22rem;
line-height: 1.18;
font-weight: 800;
margin: 0 0 12px;
}
.orp-feature-card p {
color: var(--orp-muted);
line-height: 1.65;
margin: 0;
font-size: .96rem;
}
/* HORIZONTAL REPORT SUMMARY */
.orp-report-panel {
background: #fff;
border: 1px solid rgba(45,41,38,.10);
border-radius: 32px;
padding: clamp(24px, 4vw, 42px);
box-shadow: 0 24px 70px rgba(45,41,38,.09);
}
.orp-mini-score-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.orp-mini-score {
background: var(--orp-soft);
border: 1px solid var(--orp-line);
border-radius: 20px;
padding: 18px;
}
.orp-mini-score strong {
display: block;
color: var(--orp-red);
font-size: 2rem;
line-height: 1;
font-weight: 800;
}
.orp-mini-score span {
display: block;
margin-top: 8px;
color: var(--orp-black);
font-size: .82rem;
line-height: 1.25;
font-weight: 700;
}
.orp-progress-list {
display: grid;
gap: 18px;
}
.orp-progress-row span {
display: flex;
justify-content: space-between;
gap: 14px;
margin-bottom: 8px;
color: var(--orp-black);
font-size: .9rem;
font-weight: 800;
}
.orp-progress {
height: 12px;
border-radius: 999px;
background: #E8E4E0;
overflow: hidden;
}
.orp-progress i {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--orp-red), #F06A3A, var(--orp-violet));
}
/* INSIGHTS */
.orp-insight-list {
display: grid;
gap: 18px;
}
.orp-insight {
display: grid;
grid-template-columns: 58px 1fr;
gap: 18px;
align-items: start;
padding: 22px;
border-radius: 24px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
}
.orp-insight-num {
width: 48px;
height: 48px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--orp-yellow);
border: 1px solid rgba(253,218,37,.35);
font-weight: 800;
}
.orp-insight h3 {
margin: 0 0 8px;
color: #fff;
font-size: 1.2rem;
line-height: 1.18;
font-weight: 800;
}
.orp-insight p {
margin: 0;
color: rgba(255,255,255,.70);
line-height: 1.6;
}
/* NEXT STEP */
.orp-next-card {
height: 100%;
background:
radial-gradient(circle at 90% 0%, rgba(225,82,62,.20), transparent 34%),
#081626;
color: #fff;
border-radius: 32px;
padding: clamp(28px, 4vw, 46px);
box-shadow: 0 26px 78px rgba(8,22,38,.24);
}
.orp-next-card h3 {
color: #fff;
font-size: clamp(1.9rem, 3vw, 3.2rem);
line-height: .98;
font-weight: 800;
letter-spacing: -.045em;
margin: 0 0 20px;
}
.orp-next-card p {
color: rgba(255,255,255,.72);
line-height: 1.7;
}
.orp-check-list {
list-style: none;
padding: 0;
margin: 26px 0 0;
}
.orp-check-list li {
position: relative;
padding-left: 32px;
margin-bottom: 13px;
color: rgba(255,255,255,.78);
line-height: 1.55;
}
.orp-check-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--orp-yellow);
font-weight: 900;
}
/* FINAL CTA */
.orp-final-cta {
position: relative;
padding: clamp(90px, 11vw, 150px) 0;
color: #fff;
background:
linear-gradient(90deg, rgba(0,0,0,.86), rgba(0,0,0,.38)),
url('/images/oniric/test-calidad-resultados.jpg') center center / cover no-repeat;
}
.orp-final-cta h2 {
color: #fff;
font-size: clamp(2.4rem, 5vw, 5.4rem);
line-height: .95;
font-weight: 800;
letter-spacing: -.06em;
margin: 0 0 22px;
}
.orp-final-cta p {
color: rgba(255,255,255,.76);
max-width: 760px;
margin: 0 auto;
font-size: 1.08rem;
line-height: 1.75;
}
.orp-final-claim {
margin-top: 34px !important;
color: #fff !important;
font-weight: 800;
}
/* RESPONSIVE */
@media (max-width: 1199.98px) {
.orp-score-layout {
grid-template-columns: 1fr;
text-align: center;
}
.orp-score-circle {
margin: 0 auto;
}
}
@media (max-width: 991.98px) {
.orp-hero {
min-height: auto;
padding: 130px 0 80px;
}
.orp-report-mockup {
margin-top: 34px;
}
.orp-data-grid,
.orp-mini-score-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 575.98px) {
.orp-section {
padding: 66px 0;
}
.orp-hero {
padding: 118px 0 72px;
}
.orp-report-mockup,
.orp-report-panel,
.orp-next-card {
border-radius: 24px;
padding: 22px;
}
.orp-data-grid,
.orp-mini-score-grid {
grid-template-columns: 1fr;
}
.orp-insight {
grid-template-columns: 1fr;
}
.orp-radar-label {
font-size: 11px;
}
}
/* =========================================================
ONIRIC ADAPTIVE SLEEP PROGRAM
========================================================= */
.oniric-adaptive-page {
--oasp-black: #05080d;
--oasp-dark: #08111d;
--oasp-dark-2: #101c2a;
--oasp-white: #f1f1ee;
--oasp-muted: rgba(241, 241, 238, .68);
--oasp-soft: rgba(241, 241, 238, .1);
--oasp-line: rgba(241, 241, 238, .16);
--oasp-violet: #825DC7;
--oasp-blue: #002F6C;
--oasp-yellow: #FDDA25;
--oasp-radius: 28px;
background: var(--oasp-black);
color: var(--oasp-white);
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
overflow: hidden;
}
.oniric-adaptive-page h1,
.oniric-adaptive-page h2,
.oniric-adaptive-page h3,
.oniric-adaptive-page p {
margin-top: 0;
}
.oasp-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
color: #a7a4e0;
font-size: 12px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
}
.oasp-hero {
position: relative;
min-height: 760px;
display: flex;
align-items: center;
background-size: cover;
background-position: center right;
}
.oasp-hero-overlay {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 82% 32%, rgba(130, 93, 199, .14), transparent 34%),
linear-gradient(90deg, rgba(5, 8, 13, .98) 0%, rgba(5, 8, 13, .88) 35%, rgba(5, 8, 13, .42) 68%, rgba(5, 8, 13, .12) 100%),
linear-gradient(180deg, rgba(5, 8, 13, .15) 0%, rgba(5, 8, 13, .92) 100%);
z-index: 1;
}
.oasp-hero-content {
position: relative;
z-index: 2;
}
.oasp-hero-copy {
max-width: 690px;
padding: 120px 0 90px;
}
.oasp-hero h1 {
font-size: clamp(48px, 7vw, 92px);
line-height: .98;
letter-spacing: -.06em;
font-weight: 700;
margin-bottom: 28px;
}
.oasp-lead {
max-width: 620px;
font-size: clamp(18px, 2vw, 23px);
line-height: 1.45;
color: rgba(241, 241, 238, .86);
margin-bottom: 36px;
}
.oasp-hero-features {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
max-width: 720px;
margin-bottom: 40px;
border-top: 1px solid var(--oasp-line);
border-bottom: 1px solid var(--oasp-line);
}
.oasp-hero-features > div {
padding: 20px 22px;
border-right: 1px solid var(--oasp-line);
}
.oasp-hero-features > div:first-child {
padding-left: 0;
}
.oasp-hero-features > div:last-child {
border-right: 0;
}
.oasp-icon {
display: block;
color: var(--oasp-white);
font-size: 24px;
margin-bottom: 10px;
}
.oasp-hero-features strong {
display: block;
font-size: 14px;
font-weight: 700;
margin-bottom: 4px;
}
.oasp-hero-features small {
display: block;
color: var(--oasp-muted);
font-size: 12px;
}
.oasp-actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.btn-oasp-primary,
.btn-oasp-secondary,
.btn-oasp-outline {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 54px;
padding: 0 30px;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.btn-oasp-primary {
color: #fff;
background: linear-gradient(135deg, #825DC7 0%, #6f79ff 100%);
box-shadow: 0 18px 42px rgba(130, 93, 199, .28);
border: 1px solid rgba(255, 255, 255, .14);
}
.btn-oasp-secondary,
.btn-oasp-outline {
color: var(--oasp-white);
border: 1px solid rgba(167, 164, 224, .52);
background: rgba(255, 255, 255, .035);
}
.btn-oasp-primary:hover,
.btn-oasp-secondary:hover,
.btn-oasp-outline:hover {
color: #fff;
transform: translateY(-2px);
border-color: rgba(255, 255, 255, .5);
}
.oasp-intro,
.oasp-plans,
.oasp-cycle,
.oasp-commitment,
.oasp-final-cta {
position: relative;
padding: 86px 0;
}
.oasp-intro {
background:
radial-gradient(circle at 90% 0%, rgba(0, 47, 108, .35), transparent 34%),
linear-gradient(180deg, #08111d 0%, #05080d 100%);
border-top: 1px solid rgba(255,255,255,.06);
border-bottom: 1px solid rgba(255,255,255,.06);
}
.oasp-intro h2,
.oasp-section-heading h2,
.oasp-commitment h2,
.oasp-final-cta h2 {
font-size: clamp(34px, 4vw, 58px);
line-height: 1.05;
letter-spacing: -.045em;
font-weight: 600;
}
.oasp-intro p {
font-size: 17px;
line-height: 1.75;
color: var(--oasp-muted);
margin-bottom: 18px;
}
.oasp-plans {
background:
radial-gradient(circle at 50% 0%, rgba(130, 93, 199, .16), transparent 42%),
#05080d;
}
.oasp-section-heading {
max-width: 820px;
margin: 0 auto 46px;
}
.oasp-plan-card {
position: relative;
height: 100%;
padding: 32px;
border-radius: var(--oasp-radius);
background:
linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
rgba(8, 17, 29, .92);
border: 1px solid var(--oasp-line);
box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.oasp-plan-card:hover {
transform: translateY(-6px);
border-color: rgba(167, 164, 224, .55);
box-shadow: 0 34px 100px rgba(0, 0, 0, .42);
}
.oasp-plan-card.is-featured {
border-color: rgba(241, 241, 238, .55);
background:
radial-gradient(circle at 70% 0%, rgba(130, 93, 199, .24), transparent 36%),
linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.035)),
rgba(8, 17, 29, .96);
}
.oasp-plan-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
min-width: 150px;
padding: 8px 18px;
border-radius: 999px;
background: var(--oasp-white);
color: #10131a;
text-align: center;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
box-shadow: 0 16px 40px rgba(0,0,0,.3);
}
.oasp-plan-head {
display: flex;
justify-content: space-between;
gap: 20px;
align-items: flex-start;
margin-bottom: 22px;
}
.oasp-plan-head span {
display: block;
margin-bottom: 6px;
color: #a7a4e0;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .18em;
}
.oasp-plan-head h3 {
font-size: 38px;
line-height: 1;
color: #a7a4e0;
letter-spacing: -.045em;
margin-bottom: 0;
}
.oasp-plan-head img {
width: 145px;
max-width: 45%;
height: auto;
object-fit: contain;
filter: drop-shadow(0 18px 24px rgba(0,0,0,.45));
}
.oasp-plan-description {
min-height: 54px;
color: var(--oasp-muted);
font-size: 15px;
line-height: 1.55;
margin-bottom: 24px;
}
.oasp-price {
display: flex;
align-items: baseline;
gap: 7px;
margin-bottom: 6px;
}
.oasp-price small {
display: block;
width: 100%;
color: var(--oasp-muted);
font-size: 12px;
}
.oasp-price strong {
font-size: 34px;
line-height: 1;
letter-spacing: -.045em;
}
.oasp-price span {
color: var(--oasp-muted);
font-size: 15px;
}
.oasp-entry {
color: rgba(241, 241, 238, .72);
font-size: 13px;
margin-bottom: 24px;
}
.oasp-feature-list {
list-style: none;
padding: 0;
margin: 0 0 30px;
}
.oasp-feature-list li {
position: relative;
padding-left: 28px;
margin-bottom: 13px;
color: rgba(241, 241, 238, .82);
font-size: 14px;
line-height: 1.45;
}
.oasp-feature-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--oasp-white);
}
.oasp-note {
max-width: 960px;
margin: 26px auto 0;
color: rgba(241, 241, 238, .54);
font-size: 12px;
text-align: center;
line-height: 1.6;
}
.oasp-cycle {
background:
linear-gradient(180deg, #08111d 0%, #05080d 100%);
border-top: 1px solid rgba(255,255,255,.06);
border-bottom: 1px solid rgba(255,255,255,.06);
}
.oasp-cycle-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 22px;
margin-top: 38px;
}
.oasp-cycle-step {
position: relative;
padding-top: 34px;
}
.oasp-cycle-step::before {
content: "";
position: absolute;
top: 13px;
left: 42px;
right: -22px;
height: 1px;
background: rgba(241, 241, 238, .22);
}
.oasp-cycle-step:last-child::before {
display: none;
}
.oasp-step-number {
position: absolute;
top: 0;
left: 0;
width: 28px;
height: 28px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(241, 241, 238, .13);
border: 1px solid rgba(241, 241, 238, .2);
color: var(--oasp-white);
font-size: 11px;
font-weight: 800;
}
.oasp-cycle-step h3 {
font-size: 17px;
margin-bottom: 10px;
}
.oasp-cycle-step p {
color: var(--oasp-muted);
font-size: 13px;
line-height: 1.6;
}
.oasp-commitment {
background:
radial-gradient(circle at 0% 55%, rgba(130, 93, 199, .35), transparent 22%),
radial-gradient(circle at 0% 55%, rgba(111, 121, 255, .25), transparent 16%),
#05080d;
}
.oasp-commitment-box {
display: grid;
grid-template-columns: .95fr 1.25fr;
gap: 48px;
align-items: center;
padding: 48px;
border-radius: 34px;
border: 1px solid var(--oasp-line);
background:
linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
box-shadow: 0 30px 100px rgba(0,0,0,.32);
}
.oasp-commitment p,
.oasp-final-cta p {
color: var(--oasp-muted);
font-size: 16px;
line-height: 1.7;
}
.oasp-commitment-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.oasp-commitment-grid > div {
padding: 24px 18px;
border-radius: 22px;
border: 1px solid var(--oasp-line);
background: rgba(255, 255, 255, .035);
text-align: center;
}
.oasp-commitment-grid span {
display: block;
min-height: 36px;
margin-bottom: 12px;
font-size: 28px;
font-weight: 700;
}
.oasp-commitment-grid strong {
display: block;
font-size: 15px;
margin-bottom: 6px;
}
.oasp-commitment-grid small {
display: block;
color: var(--oasp-muted);
font-size: 12px;
line-height: 1.45;
}
.oasp-final-cta {
padding: 58px 0 72px;
background: #05080d;
}
.oasp-final-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 36px;
align-items: center;
padding-top: 34px;
border-top: 1px solid var(--oasp-line);
}
/* Responsive */
@media (max-width: 1199px) {
.oasp-cycle-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.oasp-cycle-step:nth-child(3)::before,
.oasp-cycle-step:nth-child(6)::before {
display: none;
}
.oasp-commitment-box {
grid-template-columns: 1fr;
}
}
@media (max-width: 991px) {
.oasp-hero {
min-height: auto;
background-position: center;
}
.oasp-hero-overlay {
background:
linear-gradient(90deg, rgba(5, 8, 13, .98) 0%, rgba(5, 8, 13, .82) 100%),
linear-gradient(180deg, rgba(5, 8, 13, .1) 0%, rgba(5, 8, 13, .92) 100%);
}
.oasp-hero-copy {
padding: 120px 0 72px;
}
.oasp-hero-features {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.oasp-hero-features > div {
border-bottom: 1px solid var(--oasp-line);
}
.oasp-hero-features > div:nth-child(2) {
border-right: 0;
}
.oasp-hero-features > div:nth-child(3),
.oasp-hero-features > div:nth-child(4) {
border-bottom: 0;
}
.oasp-hero-features > div:first-child {
padding-left: 22px;
}
.oasp-final-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.oasp-intro,
.oasp-plans,
.oasp-cycle,
.oasp-commitment,
.oasp-final-cta {
padding: 58px 0;
}
.oasp-hero h1 {
font-size: 48px;
}
.oasp-lead {
font-size: 17px;
}
.oasp-actions {
flex-direction: column;
}
.btn-oasp-primary,
.btn-oasp-secondary,
.btn-oasp-outline {
width: 100%;
}
.oasp-cycle-grid {
grid-template-columns: 1fr;
}
.oasp-cycle-step::before {
display: none;
}
.oasp-commitment-box {
padding: 28px;
}
.oasp-commitment-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 480px) {
.oasp-hero-features {
grid-template-columns: 1fr;
}
.oasp-hero-features > div {
border-right: 0;
border-bottom: 1px solid var(--oasp-line);
}
.oasp-hero-features > div:last-child {
border-bottom: 0;
}
.oasp-plan-card {
padding: 26px;
}
.oasp-plan-head {
flex-direction: column;
}
.oasp-plan-head img {
max-width: 180px;
width: 100%;
}
.oasp-commitment-grid {
grid-template-columns: 1fr;
}
}