/* Olympus Beneficios - Direccion "Olympus Oro sobre Negro" * * Lo propio de esta pagina, frente al resto del sitio: el fondo respira entre * secciones. Va del negro carbon al negro entibiado y vuelve, con halos * dorados muy bajos colocados en sitios distintos en cada tramo. Es el mismo * par de colores de siempre, movido; por eso pega con lo demas sin repetirlo. */ .odt-b { --odt-bg: #101010; --odt-bg-warm: #14120e; --odt-surface: #191817; --odt-ink: #ffffff; --odt-muted: #a6a29b; --odt-accent: #b59953; --odt-support: #e7df9f; --odt-line: #2e2b26; --odt-radius: 10px; font-family: "Barlow", sans-serif; color: var(--odt-ink); background-color: var(--odt-bg); overflow-x: clip; } .odt-b *, .odt-b *::before, .odt-b *::after { box-sizing: border-box; } .odt-b .odt-b__wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; } .odt-b .odt-b__h2 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(30px, 4.2vw, 50px); line-height: 1.06; text-transform: uppercase; color: var(--odt-ink); margin: 0 0 16px; } .odt-b .odt-b__parrafo { font-size: 17px; line-height: 1.7; color: var(--odt-muted); max-width: 60ch; margin: 0 0 28px; } /* Aparicion al entrar en pantalla ---------------------------------------- */ /* Sin la marca en no hay animacion: el contenido se ve fijo. */ .odt-anim .odt-b [data-odt-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); /* El escalonado sale del orden que pinta PHP en cada bloque. */ transition-delay: calc(var(--odt-orden, 0) * 110ms); } .odt-anim .odt-b [data-odt-reveal].odt-visible { opacity: 1; transform: none; } /* Cabecera --------------------------------------------------------------- */ .odt-b .odt-b__hero { position: relative; display: flex; align-items: flex-end; min-height: 56vh; min-height: 56dvh; overflow: hidden; } .odt-b .odt-b__hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 28%; } .odt-b .odt-b__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(16, 16, 16, 0.5) 0%, rgba(16, 16, 16, 0.34) 26%, rgba(181, 153, 83, 0.1) 48%, rgba(16, 16, 16, 0.84) 76%, #101010 100% ); } .odt-b .odt-b__hero-inner { position: relative; z-index: 1; width: 100%; padding-bottom: 48px; } .odt-b .odt-b__hero-titulo { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(44px, 6.6vw, 88px); line-height: 1.02; text-transform: uppercase; color: var(--odt-ink); margin: 0 0 16px; } .odt-b .odt-b__hero-texto { font-size: 19px; line-height: 1.6; color: var(--odt-muted); max-width: 58ch; margin: 0; } /* Los beneficios: dos columnas con la derecha descolgada ------------------ */ .odt-b .odt-b__lista { position: relative; padding: 86px 0 96px; /* Halo dorado arriba a la izquierda. */ background: radial-gradient(70% 55% at 12% 0%, rgba(181, 153, 83, 0.09) 0%, rgba(181, 153, 83, 0) 70%), linear-gradient(180deg, var(--odt-bg) 0%, var(--odt-bg-warm) 100%); } .odt-b .odt-b__rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 48px; margin-top: 48px; } /* La segunda columna baja: rompe la simetria de rejilla sin desordenar. */ .odt-b .odt-b__item:nth-child(even) { transform: translateY(46px); } .odt-anim .odt-b .odt-b__item:nth-child(even) { transform: translateY(calc(46px + 26px)); } .odt-anim .odt-b .odt-b__item:nth-child(even).odt-visible { transform: translateY(46px); } .odt-b .odt-b__item { position: relative; padding: 26px 0 0; } /* Filete que se dibuja de izquierda a derecha al aparecer el bloque. */ .odt-b .odt-b__filete { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--odt-accent) 0%, rgba(181, 153, 83, 0.22) 55%, rgba(181, 153, 83, 0) 100%); transform-origin: left center; } .odt-anim .odt-b .odt-b__filete { transform: scaleX(0); transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: calc(var(--odt-orden, 0) * 110ms + 120ms); } .odt-anim .odt-b [data-odt-reveal].odt-visible .odt-b__filete { transform: scaleX(1); } .odt-b .odt-b__item-titulo { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(22px, 2.3vw, 28px); line-height: 1.12; letter-spacing: 0.02em; color: var(--odt-accent); margin: 0 0 10px; } .odt-b .odt-b__item-texto { font-size: 16px; line-height: 1.68; color: var(--odt-muted); margin: 0; max-width: 46ch; } /* Frase destacada -------------------------------------------------------- */ .odt-b .odt-b__cita { position: relative; padding: 104px 0; text-align: center; /* Aqui el halo se centra: el fondo cambia de sitio, no de color. */ background: radial-gradient(58% 78% at 50% 50%, rgba(181, 153, 83, 0.14) 0%, rgba(181, 153, 83, 0) 72%), linear-gradient(180deg, var(--odt-bg-warm) 0%, var(--odt-bg) 100%); } .odt-b .odt-b__cita-texto { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(30px, 5vw, 60px); line-height: 1.08; text-transform: uppercase; color: var(--odt-ink); max-width: 20ch; margin: 0 auto; padding: 0; border: 0; quotes: none; } .odt-b .odt-b__cita-texto::before, .odt-b .odt-b__cita-texto::after { content: none; } /* Cierre ----------------------------------------------------------------- */ .odt-b .odt-b__cierre { padding: 20px 0 96px; background: linear-gradient(180deg, var(--odt-bg) 0%, var(--odt-bg-warm) 100%); } .odt-b .odt-b__cierre-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .odt-b .odt-b__cierre-foto { overflow: hidden; border: 1px solid var(--odt-line); border-radius: var(--odt-radius); } .odt-b .odt-b__foto { display: block; width: 100%; height: auto; } .odt-b .odt-b__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; } .odt-b .odt-b__btn { display: inline-block; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: #101010; background: linear-gradient(135deg, var(--odt-accent) 0%, var(--odt-support) 100%); border: 1px solid var(--odt-accent); border-radius: 999px; padding: 14px 28px; transition: filter 0.2s ease, transform 0.12s ease; } .odt-b .odt-b__btn:hover { color: #101010; filter: brightness(1.08); } .odt-b .odt-b__btn:active { transform: translateY(1px); } .odt-b .odt-b__btn:focus-visible { outline: 2px solid var(--odt-support); outline-offset: 3px; } .odt-b .odt-b__btn--fantasma { color: var(--odt-accent); background: transparent; border: 1px solid var(--odt-accent); } .odt-b .odt-b__btn--fantasma:hover { color: var(--odt-support); border-color: var(--odt-support); filter: none; } /* Tableta ---------------------------------------------------------------- */ @media (max-width: 1024px) { .odt-b .odt-b__rejilla { gap: 28px 34px; } .odt-b .odt-b__cierre-grid { gap: 36px; } } /* Movil ------------------------------------------------------------------ */ @media (max-width: 780px) { .odt-b .odt-b__wrap { padding: 0 16px; } .odt-b .odt-b__hero { min-height: 46vh; min-height: 46dvh; } .odt-b .odt-b__hero-inner { padding-bottom: 34px; } .odt-b .odt-b__hero-texto { font-size: 17px; } .odt-b .odt-b__lista { padding: 56px 0 60px; } .odt-b .odt-b__cita { padding: 68px 0; } .odt-b .odt-b__cierre { padding: 10px 0 60px; } .odt-b .odt-b__rejilla { grid-template-columns: 1fr; gap: 4px; margin-top: 32px; } /* En una columna, el descolgado no aporta nada y solo abre un hueco. */ .odt-b .odt-b__item:nth-child(even), .odt-anim .odt-b .odt-b__item:nth-child(even).odt-visible { transform: none; } .odt-anim .odt-b .odt-b__item:nth-child(even) { transform: translateY(26px); } .odt-b .odt-b__item { padding: 22px 0 0; } /* Con 16ch la frase caia en cuatro lineas; una cita se lee de un golpe de vista o no cumple su funcion. */ .odt-b .odt-b__cita-texto { max-width: 22ch; } .odt-b .odt-b__cierre-grid { grid-template-columns: 1fr; gap: 26px; } .odt-b .odt-b__cierre-foto { order: -1; } .odt-b .odt-b__acciones .odt-b__btn { flex: 1 1 100%; text-align: center; } } /* Quien pida menos movimiento no recibe ninguno. El script ya evita poner la marca, y esto cubre el caso de que se cambie el ajuste con la pagina abierta. */ @media (prefers-reduced-motion: reduce) { .odt-anim .odt-b [data-odt-reveal], .odt-anim .odt-b [data-odt-reveal].odt-visible { opacity: 1; transform: none; transition: none; } .odt-anim .odt-b .odt-b__item:nth-child(even), .odt-anim .odt-b .odt-b__item:nth-child(even).odt-visible { transform: translateY(46px); } .odt-anim .odt-b .odt-b__filete { transform: scaleX(1); transition: none; } .odt-b .odt-b__btn { transition: none; } }