/** * Swiper 12.2.0 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2026 Vladimir Kharlampidi * * Released under the MIT License * * Released on: May 27, 2026 */ :root{--swiper-theme-color:#007aff}:host{display:block;margin-left:auto;margin-right:auto;position:relative;z-index:1}.swiper{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{box-sizing:initial;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{backface-visibility:hidden;transform:translateZ(0)}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-cube-shadow,.swiper-slide{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-bottom,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-slide-shadow{background:#00000026}.swiper-slide-shadow-left{background-image:linear-gradient(270deg,#00000080,#0000)}.swiper-slide-shadow-right{background-image:linear-gradient(90deg,#00000080,#0000)}.swiper-slide-shadow-top{background-image:linear-gradient(0deg,#00000080,#0000)}.swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,#00000080,#0000)}}.swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid #0000;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10}.swiper-watch-progress .swiper-slide-visible,.swiper:not(.swiper-watch-progress){.swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode{.swiper-wrapper:after{content:"";left:0;pointer-events:none;position:absolute;top:0}}.swiper-virtual.swiper-css-mode.swiper-horizontal{.swiper-wrapper:after{height:1px;width:var(--swiper-virtual-size)}}.swiper-virtual.swiper-css-mode.swiper-vertical{.swiper-wrapper:after{height:var(--swiper-virtual-size);width:1px}}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{align-items:center;color:var(--swiper-navigation-color,var(--swiper-theme-color));cursor:pointer;display:flex;height:var(--swiper-navigation-size);justify-content:center;position:absolute;width:var(--swiper-navigation-size);z-index:10;&.swiper-button-disabled{cursor:auto;opacity:.35;pointer-events:none}&.swiper-button-hidden{cursor:auto;opacity:0;pointer-events:none}.swiper-navigation-disabled &{display:none!important}::slotted(svg),svg{height:100%;object-fit:contain;transform-origin:center;width:100%;fill:currentColor;pointer-events:none}}.swiper-button-lock{display:none}.swiper-button-next,.swiper-button-prev{margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto;.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(180deg)}}.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}.swiper-horizontal{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{margin-left:0;margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev,&~.swiper-button-next,.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(180deg)}}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev{.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(0deg)}}}.swiper-vertical{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{left:var(--swiper-navigation-top-offset,50%);margin-left:calc(0px - var(--swiper-navigation-size)/2);margin-top:0;right:auto}.swiper-button-prev,~.swiper-button-prev{bottom:auto;top:var(--swiper-navigation-sides-offset,4px);.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(-90deg)}}.swiper-button-next,~.swiper-button-next{bottom:var(--swiper-navigation-sides-offset,4px);top:auto;.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(90deg)}}}.swiper-pagination{position:absolute;text-align:center;transform:translateZ(0);transition:opacity .3s;z-index:10;&.swiper-pagination-hidden{opacity:0}&.swiper-pagination-disabled,.swiper-pagination-disabled>&{display:none!important}}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);left:0;top:var(--swiper-pagination-top,auto);width:100%}.swiper-pagination-bullets-dynamic{font-size:0;overflow:hidden;.swiper-pagination-bullet{position:relative;transform:scale(.33)}.swiper-pagination-bullet-active,.swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullet-active-next-next{transform:scale(.33)}}.swiper-pagination-bullet{background:var(--swiper-pagination-bullet-inactive-color,#000);border-radius:var(--swiper-pagination-bullet-border-radius,50%);display:inline-block;height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));opacity:var(--swiper-pagination-bullet-inactive-opacity,.2);width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));button&{appearance:none;border:none;box-shadow:none;margin:0;padding:0}.swiper-pagination-clickable &{cursor:pointer}&:only-child{display:none!important}}.swiper-pagination-bullet-active{background:var(--swiper-pagination-color,var(--swiper-theme-color));opacity:var(--swiper-pagination-bullet-opacity,1)}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{left:var(--swiper-pagination-left,auto);right:var(--swiper-pagination-right,8px);top:50%;transform:translate3d(0,-50%,0);.swiper-pagination-bullet{display:block;margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0}&.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px;.swiper-pagination-bullet{display:inline-block;transition:transform .2s,top .2s}}}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets{.swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}&.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap;.swiper-pagination-bullet{transition:transform .2s,left .2s}}}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:transform .2s,right .2s}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,#00000040);position:absolute;.swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));height:100%;left:0;position:absolute;top:0;transform:scale(0);transform-origin:left top;width:100%}.swiper-rtl & .swiper-pagination-progressbar-fill{transform-origin:right top}&.swiper-pagination-horizontal,&.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-horizontal>&,.swiper-vertical>&.swiper-pagination-progressbar-opposite{height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0;width:100%}&.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,&.swiper-pagination-vertical,.swiper-horizontal>&.swiper-pagination-progressbar-opposite,.swiper-vertical>&{height:100%;left:0;top:0;width:var(--swiper-pagination-progressbar-size,4px)}}.swiper-pagination-lock{display:none}.swiper-scrollbar{background:var(--swiper-scrollbar-bg-color,#0000001a);border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;&.swiper-scrollbar-disabled,.swiper-scrollbar-disabled>&{display:none!important}&.swiper-scrollbar-horizontal,.swiper-horizontal>&{bottom:var(--swiper-scrollbar-bottom,4px);height:var(--swiper-scrollbar-size,4px);left:var(--swiper-scrollbar-sides-offset,1%);position:absolute;top:var(--swiper-scrollbar-top,auto);width:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);z-index:50}&.swiper-scrollbar-vertical,.swiper-vertical>&{height:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);left:var(--swiper-scrollbar-left,auto);position:absolute;right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);width:var(--swiper-scrollbar-size,4px);z-index:50}}.swiper-scrollbar-drag{background:var(--swiper-scrollbar-drag-bg-color,#00000080);border-radius:var(--swiper-scrollbar-border-radius,10px);height:100%;left:0;position:relative;top:0;width:100%}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{align-items:center;display:flex;height:100%;justify-content:center;text-align:center;width:100%;>canvas,>img,>svg{max-height:100%;max-width:100%;object-fit:contain}}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{left:0;opacity:0;pointer-events:none;position:absolute;top:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{margin:0 auto;transition-timing-function:ease-out}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-direction:column;flex-wrap:wrap}.swiper-fade{&.swiper-free-mode{.swiper-slide{transition-timing-function:ease-out}}.swiper-slide{pointer-events:none;transition-property:opacity;.swiper-slide{pointer-events:none}}.swiper-slide-active{pointer-events:auto;& .swiper-slide-active{pointer-events:auto}}}.swiper.swiper-cube{overflow:visible}.swiper-cube{.swiper-slide{backface-visibility:hidden;height:100%;pointer-events:none;transform-origin:0 0;visibility:hidden;width:100%;z-index:1;.swiper-slide{pointer-events:none}}&.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}.swiper-slide-active,.swiper-slide-next,.swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube-shadow{bottom:0;height:100%;left:0;opacity:.6;position:absolute;width:100%;z-index:0;&:before{background:#000;bottom:0;content:"";filter:blur(50px);left:0;position:absolute;right:0;top:0}}}.swiper-cube{.swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}}.swiper-cube{.swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-slide-shadow-cube.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}}.swiper.swiper-flip{overflow:visible}.swiper-flip{.swiper-slide{backface-visibility:hidden;pointer-events:none;z-index:1;.swiper-slide{pointer-events:none}}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}}.swiper-flip{.swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-slide-shadow-flip.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}}.swiper-creative{.swiper-slide{backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}}.swiper.swiper-cards{overflow:visible}.swiper-cards{.swiper-slide{backface-visibility:hidden;overflow:hidden;transform-origin:center bottom}} /* -------------------------------------------------------------------------- */ /* Global styles for the host document, outside of the Shadow DOM */ /* -------------------------------------------------------------------------- */ video-skin { --media-object-fit: cover; --media-object-position: center; } video-player, live-video-player, media-i18n { display: contents; } /* Required to override any default video and image styles (such as Tailwind's CSS reset) and ensure they fill the container as expected. */ video-player video, video-player [slot="poster"], live-video-player video, live-video-player [slot="poster"] { display: block; width: 100%; height: 100%; } video-player video::-webkit-media-text-track-container, live-video-player video::-webkit-media-text-track-container { z-index: 1; font-family: inherit; scale: 0.98; translate: 0 var(--media-caption-track-y, 0); transition: translate var(--media-caption-track-duration, 0) ease-out; transition-delay: var(--media-caption-track-delay, 0); } /* -------------------------------------------------------------------------- */ /* Shared styles for all HTML skins */ /* -------------------------------------------------------------------------- */ media-tooltip-group { display: contents; } :host { /* `display:grid` fixes a weird issue with Safari when setting aspect-ratio */ display: grid; width: 100%; } media-container { min-width: 0; min-height: 0; } /* Hide the volume popover when its slider is unavailable. */ .media-popover--volume:has(media-volume-slider[data-hidden]) { display: none; } .media-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; white-space: nowrap; border: 0; clip: rect(0, 0, 0, 0); } .media-minimal-skin *, .media-minimal-skin *::before, .media-minimal-skin *::after { box-sizing: border-box; } .media-minimal-skin img, .media-minimal-skin video, .media-minimal-skin svg { display: block; max-width: 100%; } .media-minimal-skin button { font: inherit; } .media-minimal-skin [hidden][hidden] { /* Keep authored templates hidden even when component classes set display. */ display: none; } @media (prefers-reduced-motion: no-preference) { .media-minimal-skin { interpolate-size: allow-keywords; } } .media-minimal-skin { /* Colors */ --accent-color: var(--media-accent-color, var(--default-accent-color)); --accent-contrast-color: contrast-color(var(--accent-color)); --accent-background-color: var( --media-accent-color, oklch(from var(--default-accent-color) l c h / calc(alpha * 0.1)) ); --accent-text-color: var(--media-accent-text-color, contrast-color(var(--media-accent-color, oklch(0 0 0)))); --shadow-current-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15)); --shadow-subtle-current-color: oklch(from var(--shadow-current-color) l c h / calc(alpha * 0.4)); --scrollbar-thumb-color: oklch(from currentColor l c h / 0.3); /* Scaling - used in video fullscreen to scale the UI. */ --scale: 1; /* Fixed scaling unit to avoid inheriting the document's root font size. This must be a CSS . */ --scale-unit: var(--media-scale-unit, 16px); --size: calc(var(--scale-unit) * var(--scale)); /* Create a Tailwind-like spacing unit where 1 equals 4px with default scaling. */ --spacing: calc(var(--size) / 4); /* Font sizes */ --font-size-medium: calc(0.9375 * var(--size)); /* 15px */ --font-size-base: calc(0.8125 * var(--size)); /* 13px */ --font-size-small: calc(0.6875 * var(--size)); /* 11px */ --font-size-tiny: calc(0.5625 * var(--size)); /* 9px */ --media-icon-size: calc(1.125 * var(--size)); /* 18px */ /* Radii */ --container-border-radius: var(--media-border-radius, 0.75rem); position: relative; display: block; width: 100%; height: 100%; container: media-root / inline-size; font-family: Inter Variable, Inter, ui-sans-serif, system-ui, sans-serif; font-size: var(--font-size-base); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; line-height: 1.5; letter-spacing: normal; outline: 2px solid transparent; outline-offset: -4px; scrollbar-color: var(--scrollbar-thumb-color) transparent; scrollbar-width: thin; border-radius: var(--container-border-radius); isolation: isolate; transition-timing-function: ease-out; transition-duration: 100ms; transition-property: outline-offset, outline-color; &:focus-visible { outline-color: var(--focus-ring-color); outline-offset: 2px; } &::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-color); border-radius: 9999px; } @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) { --scrollbar-thumb-color: oklch(from currentColor l c h / 0.8); scrollbar-width: auto; } } .media-minimal-skin ::slotted(video), .media-minimal-skin video { display: block; width: 100%; height: 100%; object-fit: var(--media-object-fit, contain); object-position: var(--media-object-position, center); } .media-minimal-skin ::slotted(video) { border-radius: var(--container-border-radius); } .media-minimal-skin video { border-radius: inherit; } .media-minimal-skin:fullscreen ::slotted(video), .media-minimal-skin:fullscreen video { object-fit: contain; } .media-minimal-skin .media-overlay { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient( to top, oklch(0 0 0 / 0.7), oklch(0 0 0 / 0.5) calc(var(--spacing) * 30), oklch(0 0 0 / 0) ); border-radius: inherit; opacity: 0; backdrop-filter: blur(0) saturate(1); transition-timing-function: ease-out; transition-duration: var(--controls-transition-duration); transition-property: opacity, backdrop-filter; } .media-minimal-skin .media-error ~ .media-overlay { transition-delay: var(--error-dialog-transition-delay); transition-duration: var(--error-dialog-transition-duration); } .media-minimal-skin .media-controls[data-visible] ~ .media-overlay, .media-minimal-skin .media-error[data-open] ~ .media-overlay { opacity: 1; } .media-minimal-skin .media-buffering-indicator[data-visible] ~ .media-overlay { background: oklch(0 0 0 / 0.35); opacity: 1; backdrop-filter: blur(8px); } .media-minimal-skin .media-error[data-open] ~ .media-overlay { backdrop-filter: blur(16px) saturate(1.2); } .media-minimal-skin .media-buffering-indicator { position: absolute; inset: 0; z-index: 10; display: none; place-content: center; color: oklch(1 0 0); pointer-events: none; &:not([data-visible]) { --media-spinner-animation: none; } &[data-visible] { display: grid; } @media (prefers-reduced-motion: reduce) { --media-spinner-animation: none; } } .media-minimal-skin .media-error:not([data-open]) { display: none; } .media-minimal-skin .media-error__title { font-weight: 600; line-height: 1.25; } .media-minimal-skin .media-error__description { overflow-wrap: anywhere; opacity: 0.7; } .media-minimal-skin .media-error__actions { display: flex; gap: calc(var(--spacing) * 2); > * { flex: 1; } } .media-minimal-skin .media-error[data-open] ~ .media-controls * { visibility: hidden; } .media-minimal-skin .media-controls { --media-popover-side-offset: calc(var(--spacing) * (var(--base-side-offset, 2) + 1)); --media-tooltip-side-offset: var(--media-popover-side-offset); --media-popover-boundary-offset: calc(var(--spacing) * (var(--base-boundary-offset, 0) + 1)); --media-tooltip-boundary-offset: var(--media-popover-boundary-offset); display: flex; align-items: center; padding: calc(var(--spacing) * 1); container: media-controls / inline-size; text-shadow: 0 1px 0 var(--shadow-current-color); background-color: var(--controls-background-color); backdrop-filter: var(--controls-backdrop-filter); &:dir(rtl) { flex-direction: row-reverse; } } .media-minimal-skin .media-time-controls { display: flex; flex: 1; flex-direction: row-reverse; gap: calc(var(--spacing) * 3); align-items: center; container: media-time-controls / inline-size; &:dir(rtl) { flex-direction: row; } } .media-minimal-skin .media-time-group { display: flex; gap: calc(var(--spacing) * 1); align-items: center; &:dir(rtl) { flex-direction: row-reverse; } } .media-minimal-skin .media-time { font-variant-numeric: tabular-nums; } .media-minimal-skin .media-time[role="button"] { cursor: pointer; outline: 2px solid transparent; outline-offset: -2px; border-radius: calc(var(--spacing) * 1); transition-timing-function: ease-out; transition-duration: 100ms; transition-property: outline-color, outline-offset; @supports (corner-shape: squircle) { border-radius: calc(var(--spacing) * 4); corner-shape: squircle; } &:focus-visible { outline-color: var(--focus-ring-color); outline-offset: 2px; } } .media-minimal-skin .media-time--current, .media-minimal-skin .media-time-separator { display: none; } @container media-root (width > 42rem) { .media-minimal-skin .media-time-controls { flex-direction: row; &:dir(rtl) { flex-direction: row-reverse; } } .media-minimal-skin .media-time--duration, .media-minimal-skin .media-time-separator { color: oklch(from currentColor l c h / 0.6); } .media-minimal-skin .media-time--current, .media-minimal-skin .media-time-separator { display: inline; } } /* Base button */ .media-minimal-skin .media-button { display: flex; flex-shrink: 0; align-items: center; justify-content: center; height: calc(var(--spacing) * 9.5); min-height: 0; padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4); text-align: center; touch-action: manipulation; cursor: pointer; user-select: none; outline: 2px solid transparent; outline-offset: -2px; border: none; border-radius: calc(var(--spacing) * 2); transition-timing-function: ease-out; transition-duration: 150ms; transition-property: background-color, outline-offset, scale; /* Fix weird jumping when clicking on the buttons in Safari. */ will-change: scale; &:focus-visible { outline-color: var(--focus-ring-color); outline-offset: 2px; } &:active:not([aria-disabled="true"]) { scale: 0.97; } &[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; } } @supports (corner-shape: squircle) { .media-minimal-skin .media-button { border-radius: calc(var(--spacing) * 4); corner-shape: squircle; } } /* Primary button variant */ .media-minimal-skin .media-button--primary { font-weight: 500; color: var(--accent-contrast-color); text-shadow: none; background: var(--accent-color); } /* Subtle button variant */ .media-minimal-skin .media-button--subtle { color: inherit; text-shadow: inherit; background: transparent; &:not([aria-disabled="true"]) { &:hover, &:focus-visible, &[aria-expanded="true"] { color: var(--accent-text-color); text-decoration: none; background-color: var(--accent-background-color); } } } /* Icon button variant */ .media-minimal-skin .media-button--icon { display: grid; aspect-ratio: 1; padding: 0; &:active:not([aria-disabled="true"]) { scale: 0.97; } .media-icon__container { display: grid; } .media-icon { grid-area: 1 / 1; filter: drop-shadow(0 1px 0 var(--shadow-current-color)); transition-timing-function: ease-out; transition-duration: 150ms; transition-property: opacity, scale; } } /* Seek button */ .media-minimal-skin .media-button--seek { .media-icon__label { position: absolute; right: -1px; bottom: -3px; font-size: 0.715em; /* 10px */ font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.05em; } &:has(.media-icon--flipped) .media-icon__label { right: unset; left: -1px; } } /* Playback rate button */ .media-minimal-skin .media-button--playback-rate { padding: 0; font-variant-numeric: tabular-nums; &::after { width: 4ch; content: attr(data-rate) "\00D7"; } &[data-inline-rate-label]::after { content: none; } } /* Settings button */ .media-minimal-skin .media-button--settings { .media-icon--settings { transition: transform 150ms ease-in-out; @media (prefers-reduced-motion: reduce) { transition-duration: 0ms; } } &[aria-expanded="true"] .media-icon--settings { transform: rotate(90deg); } } /* Live button — wide pill button with a status dot (gray → red at the live edge) rendered via ::before, and "LIVE" text rendered as the button's own text content. */ .media-minimal-skin .media-button--live { display: inline-flex; gap: calc(var(--spacing) * 1.5); align-items: center; width: auto; aspect-ratio: auto; padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3); font-size: var(--font-size-small); font-weight: 600; line-height: 1; text-transform: uppercase; letter-spacing: 0.05em; &::before { display: inline-block; flex-shrink: 0; width: calc(var(--spacing) * 2); height: calc(var(--spacing) * 2); content: ""; background-color: oklch(from currentColor l c h / 0.4); border-radius: 50%; transition: background-color 150ms ease-out; } &[data-live-edge]::before { background-color: oklch(0.65 0.22 27); } } @media (prefers-reduced-motion: reduce) { .media-minimal-skin .media-button { scale: 1; transition-property: background-color; will-change: auto; } } .media-minimal-skin .media-button-group { display: flex; gap: 1px; align-items: center; &:dir(rtl) { flex-direction: row-reverse; } } .media-minimal-skin .media-badge { padding: calc(var(--spacing) * 1) calc(var(--spacing) * 1.5); font-size: var(--font-size-small); font-weight: 500; line-height: 1; color: oklch(from currentColor l c h / 0.85); white-space: nowrap; background-color: oklch(from currentColor l c h / 0.1); border-radius: calc(var(--spacing) * 1); } .media-minimal-skin .media-icon__container { position: relative; } .media-minimal-skin .media-icon { flex-shrink: 0; width: var(--media-icon-size); height: var(--media-icon-size); } .media-minimal-skin .media-icon--flipped, .media-minimal-skin:dir(rtl) .media-menu__chevron { scale: -1 1; } .media-minimal-skin:dir(rtl) .media-menu__chevron.media-icon--flipped { scale: 1 1; } .media-minimal-skin media-poster, .media-minimal-skin > img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity 0.25s; } .media-minimal-skin media-poster:not([data-visible]), .media-minimal-skin > img:not([data-visible]) { opacity: 0; } .media-minimal-skin media-poster ::slotted(img), .media-minimal-skin media-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--media-object-fit, contain); object-position: var(--media-object-position, center); border-radius: var(--container-border-radius); } .media-minimal-skin > img { object-fit: var(--media-object-fit, contain); object-position: var(--media-object-position, center); border-radius: inherit; } .media-minimal-skin:fullscreen media-poster ::slotted(img), .media-minimal-skin:fullscreen media-poster img, .media-minimal-skin:fullscreen > img { object-fit: contain; } .media-minimal-skin .media-thumbnail { position: relative; pointer-events: none; background-color: oklch(0 0 0 / 0.9); border-radius: calc(var(--spacing) * 2); &::after { position: absolute; inset: 0; content: ""; border-radius: inherit; box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05), 0 1px 3px 0 oklch(0 0 0 / 0.2), 0 1px 2px -1px oklch(0 0 0 / 0.2); } .media-thumbnail__image { position: relative; display: block; max-width: var(--thumbnail-max-width); max-height: var(--thumbnail-max-height); overflow: clip; border-radius: inherit; } .media-thumbnail__spinner { position: absolute; top: 50%; left: 50%; opacity: 0; translate: -50% -50%; } .media-thumbnail__image, .media-thumbnail__spinner { transition: opacity 150ms ease-out; } &:not(:has(.media-thumbnail__image[data-loading])) { .media-thumbnail__spinner { --media-spinner-animation: none; } } @media (prefers-reduced-motion: reduce) { --media-spinner-animation: none; } &:has(.media-thumbnail__image[data-loading]) { width: var(--thumbnail-max-width); max-width: 100%; aspect-ratio: 16 / 9; overflow: hidden; .media-thumbnail__image { opacity: 0; } .media-thumbnail__spinner { opacity: 1; } } } .media-minimal-skin .media-slider { --track-size: calc(var(--spacing) * 1); --track-highlighted-size: calc(var(--spacing) * 1.75); --track-border-radius: 99px; --thumb-size: calc(var(--spacing) * 3); --chapter-gap: calc(var(--spacing) * 1); --chapter-inset-start: calc(var(--chapter-gap) / 2); --chapter-inset-end: calc(var(--chapter-gap) / 2); position: relative; display: flex; flex: 1; align-items: center; justify-content: center; cursor: pointer; outline: none; border-radius: var(--track-border-radius); &[data-orientation="horizontal"] { width: var(--slider-width, 100%); min-width: calc(var(--spacing) * 20); height: var(--slider-height, calc(var(--spacing) * 8)); } &[data-orientation="vertical"] { width: var(--slider-width, calc(var(--spacing) * 8)); height: var(--slider-height, calc(var(--spacing) * 20)); } /* Track */ .media-slider__track { position: relative; overflow: hidden; user-select: none; background-color: oklch(from currentColor l c h / 0.2); border-radius: inherit; isolation: isolate; &[data-orientation="horizontal"] { width: 100%; height: var(--track-size); } &[data-orientation="vertical"] { width: var(--track-size); height: 100%; } } /* Shared track fills */ .media-slider__buffer, .media-slider__fill { position: absolute; pointer-events: none; border-radius: inherit; &[data-orientation="horizontal"] { inset-block: 0; left: 0; width: 100%; } &[data-orientation="vertical"] { inset-inline: 0; bottom: 0; height: 100%; } @media (prefers-reduced-motion: no-preference) { transition: clip-path 200ms ease-out; } } &[data-dragging], &[data-seeking] { .media-slider__fill, .media-slider__buffer { transition-duration: 0ms; } } /* Buffer */ .media-slider__buffer { background-color: oklch(from currentColor l c h / 0.2); &[data-orientation="horizontal"] { clip-path: inset(0 calc(100% - var(--media-slider-buffer)) 0 0 round var(--track-border-radius)); } &[data-orientation="vertical"] { clip-path: inset(calc(100% - var(--media-slider-buffer)) 0 0 0 round var(--track-border-radius)); } } /* Fill */ .media-slider__fill { background-color: var(--accent-color); &[data-orientation="horizontal"] { clip-path: inset(0 calc(100% - var(--media-slider-fill)) 0 0 round var(--track-border-radius)); } &[data-orientation="vertical"] { clip-path: inset(calc(100% - var(--media-slider-fill)) 0 0 0 round var(--track-border-radius)); } } &[data-dragging] { .media-slider__fill[data-orientation="horizontal"] { clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius)); } .media-slider__fill[data-orientation="vertical"] { clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius)); } } /* Chapters */ .media-slider__chapters { position: relative; display: flex; flex: 1; align-items: center; min-width: 0; min-height: 0; border-radius: inherit; &[data-orientation="horizontal"] { width: 100%; height: 100%; } &[data-orientation="vertical"] { flex-direction: column-reverse; width: 100%; height: 100%; } } .media-slider__chapter { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; &:first-child { --chapter-inset-start: 0px; } &:last-child { --chapter-inset-end: 0px; } .media-slider__chapter-track { border-radius: var(--track-border-radius); @media (prefers-reduced-motion: no-preference) { transition: 200ms ease-out; transition-property: height, width; } } &[data-orientation="horizontal"] { clip-path: inset(0 calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start)); .media-slider__chapter-track { height: var(--track-size); clip-path: inset( 0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0 calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius) ); } &[data-highlighted] .media-slider__chapter-track { height: var(--track-highlighted-size); } } &[data-orientation="vertical"] { clip-path: inset(calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start) 0); .media-slider__chapter-track { width: var(--track-size); clip-path: inset( calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0 calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius) ); } &[data-highlighted] .media-slider__chapter-track { width: var(--track-highlighted-size); } } } /* Thumb */ .media-slider__thumb { position: absolute; z-index: 10; width: var(--thumb-size); height: var(--thumb-size); user-select: none; outline: 2px solid transparent; outline-offset: -2px; background-color: currentColor; border-radius: calc(Infinity * 1px); box-shadow: 0 0 0 1px var(--shadow-current-color, oklch(0 0 0 / 0.15)), 0 1px 3px 0 oklch(0 0 0 / 0.15), 0 1px 2px -1px oklch(0 0 0 / 0.15); opacity: 0; transform-origin: center; scale: 0.7; translate: -50% -50%; &[data-orientation="horizontal"] { top: 50%; left: var(--media-slider-fill); } &[data-orientation="vertical"] { top: calc(100% - var(--media-slider-fill)); left: 50%; } &:focus-visible { outline-color: var(--focus-ring-color); outline-offset: 2px; } &:focus-visible, &.media-slider__thumb--persistent { opacity: 1; scale: 1; } @media (prefers-reduced-motion: no-preference) { transition-timing-function: ease-out; transition-duration: 150ms; transition-property: opacity, outline-offset, left, top, scale; } } @media (hover: hover) and (pointer: fine) { &:hover .media-slider__thumb { opacity: 1; scale: 1; } } &[data-dragging] .media-slider__thumb { opacity: 1; scale: 0.9; @media (prefers-reduced-motion: no-preference) { transition-property: opacity, outline-offset, scale; } &[data-orientation="horizontal"] { left: var(--media-slider-pointer); } &[data-orientation="vertical"] { top: calc(100% - var(--media-slider-pointer)); } } /* Preview */ .media-slider__preview { --max-size-factor: 28; --max-size: min(calc(var(--spacing) * var(--max-size-factor)), 100cqi); min-width: 100%; height: calc(var(--spacing) * 1); @container media-root (width > 32rem) { --max-size-factor: 36; } @container media-root (width > 42rem) { --max-size-factor: 48; } .media-slider__thumbnail, .media-slider__value { position: absolute; left: var(--preview-left, var(--media-slider-pointer)); max-width: var(--max-size); opacity: 0; filter: blur(8px); transform-origin: bottom; scale: 0.8; translate: -50% calc(var(--spacing) * 2); transition-timing-function: ease-out; transition-duration: 150ms; transition-property: filter, opacity, scale; } .media-slider__thumbnail { --thumbnail-max-width: var(--max-size); --thumbnail-max-height: var(--max-size); bottom: calc(100% + (var(--spacing) * 11)); } .media-slider__value { bottom: calc(100% + (var(--spacing) * 5)); display: flex; flex-direction: row-reverse; gap: calc(var(--spacing) * 2); justify-content: center; padding-inline: calc(var(--spacing) * 3); text-shadow: 0 1px 0 var(--shadow-current-color); } .media-slider__chapter-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; &:empty { display: none; } } &::before { position: absolute; z-index: 1; pointer-events: none; content: ""; background-color: oklch(from currentColor l c h / 0.35); opacity: 0; scale: 0.5; translate: -50% -50%; transition-timing-function: ease-out; transition-duration: 200ms; transition-property: opacity, scale; } &[data-orientation="horizontal"]::before { top: 50%; left: var(--media-slider-pointer); width: 1px; height: calc(var(--spacing) * 5); } &[data-orientation="vertical"]::before { top: calc(100% - var(--media-slider-pointer)); left: 50%; width: calc(var(--spacing) * 5); height: 1px; } &[data-pointing]:not([data-dragging])::before { opacity: 1; scale: 1; } } &:is([data-pointing], :has(:focus-visible)) .media-slider__preview :is(.media-slider__value, .media-slider__thumbnail) { opacity: 1; filter: blur(0); scale: 1; } } .media-minimal-skin { --popup-transition: opacity var(--popup-transition-timing-function) var(--popup-transition-duration), filter var(--popup-transition-timing-function) var(--popup-transition-duration), transform var(--popup-transition-timing-function) var(--popup-transition-duration), scale var(--popup-transition-timing-function) var(--popup-transition-duration); } .media-minimal-skin .media-popover, .media-minimal-skin .media-tooltip { --popup-translate-distance: calc(var(--spacing) * 2); margin: 0; overflow: visible; color: inherit; border: 0; transition: var(--popup-transition); &[data-starting-style], &[data-ending-style] { opacity: 0; /* We have to use transform here for translate as the translate property is used for positioning by core. */ transform: translate(var(--popup-translate-x-distance, 0), var(--popup-translate-y-distance, 0)); scale: 0.95; } &[data-ending-style] { filter: blur(4px); transform: none; /* Speed up the exit transition. */ transition-duration: max(0ms, calc(var(--popup-transition-duration) - 50ms)); } &[data-side="top"] { --popup-translate-y-distance: var(--popup-translate-distance); transform-origin: bottom; } &[data-side="bottom"] { --popup-translate-y-distance: calc(var(--popup-translate-distance) * -1); transform-origin: top; } &[data-side="left"] { --popup-translate-x-distance: var(--popup-translate-distance); transform-origin: right; } &[data-side="right"] { --popup-translate-x-distance: calc(var(--popup-translate-distance) * -1); transform-origin: left; } /* Safe area between trigger and popup */ &::before { position: absolute; pointer-events: inherit; content: ""; } &[data-side="top"]::before, &[data-side="bottom"]::before { inset-inline: 0; width: 100%; } &[data-side="top"]::before { top: 100%; } &[data-side="bottom"]::before { bottom: 100%; } &[data-side="left"]::before, &[data-side="right"]::before { inset-block: 0; height: 100%; } &[data-side="left"]::before { left: 100%; } &[data-side="right"]::before { right: 100%; } } .media-minimal-skin .media-popover { &[data-side="top"]::before, &[data-side="bottom"]::before { height: var(--media-popover-side-offset); } &[data-side="left"]::before, &[data-side="right"]::before { width: var(--media-popover-side-offset); } } .media-minimal-skin .media-tooltip { padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2); font-size: var(--font-size-base); color: var(--tooltip-text-color); white-space: nowrap; background-color: var(--tooltip-background-color); border-radius: calc(var(--spacing) * 2); box-shadow: 0 0 0 1px var(--tooltip-border-color), 0 4px 6px -1px oklch(0 0 0 / 0.2), 0 2px 4px -2px oklch(0 0 0 / 0.2); backdrop-filter: var(--tooltip-backdrop-filter); /* `display: flex` must not apply while closed — it overrides UA `[popover]` hiding. */ &[data-open] { display: flex; column-gap: calc(var(--spacing) * 1); align-items: center; } &[data-side="top"]::before, &[data-side="bottom"]::before { height: var(--media-tooltip-side-offset); } &[data-side="left"]::before, &[data-side="right"]::before { width: var(--media-tooltip-side-offset); } .media-tooltip__kbd { min-width: 1.5em; padding: 0.1em; margin-right: calc(var(--spacing) * -1); font-family: inherit; font-size: var(--font-size-small); font-weight: 600; line-height: 1.25; text-align: center; background-color: oklch(from currentColor l c h / 0.15); border-radius: calc(var(--spacing) * 1); } } .media-minimal-skin .media-popover--volume:has(media-volume-slider[data-hidden]) { display: none; } .media-minimal-skin .media-menu { --menu-transition-duration: 250ms; --menu-max-height: calc(var(--spacing) * 56); --menu-padding: calc(var(--spacing) * 1); --menu-border-radius: calc(var(--spacing) * 2.5); --menu-item-border-radius: calc(var(--menu-border-radius) - var(--menu-padding)); box-sizing: border-box; min-width: max-content; max-width: var(--media-popover-available-width, none); max-height: min(var(--media-popover-available-height, var(--menu-max-height)), var(--menu-max-height)); padding: var(--menu-padding); overflow: auto; overscroll-behavior: none; background-color: var(--popover-background-color); border-radius: var(--menu-border-radius); box-shadow: 0 0 0 1px var(--popover-border-color), 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1); backdrop-filter: var(--popover-backdrop-filter); @media (prefers-reduced-motion: reduce) { --menu-transition-duration: 0ms; } & > .media-menu__panel { position: absolute; inset-inline: 0; top: 0; z-index: 10; max-height: inherit; padding: var(--menu-padding); overflow: auto; overscroll-behavior: none; outline: none; translate: 0 0; transition-timing-function: ease-out; transition-duration: var(--menu-transition-duration); transition-property: translate, filter; &:where([data-starting-style], [data-ending-style]) { overflow: hidden; pointer-events: none; filter: blur(8px); translate: 100% 0; } &:dir(rtl):where([data-starting-style], [data-ending-style]) { translate: -100% 0; } } .media-menu__separator { margin: calc(var(--spacing) * 1) 0; border-bottom: 1px solid oklch(1 0 0 / 0.1); } .media-menu__group { anchor-scope: --menu-item-highlight-anchor; display: flex; flex-direction: column; gap: calc(var(--spacing) * 0.5); @supports (top: anchor(top)) { &::before { position: absolute; position-anchor: --menu-item-highlight-anchor; inset: anchor(inside); /* Firefox treats the moving highlight as a content shift and re-scrolls the menu while hovering. Exclude it from scroll anchoring. */ overflow-anchor: none; pointer-events: none; content: ""; background-color: var(--accent-background-color); border-radius: var(--menu-item-border-radius); transition: inset 100ms ease-in-out; } &:has([data-highlighted=""])::before { transition-duration: 0ms; } } } .media-menu__item, .media-menu__back { position: relative; display: flex; gap: calc(var(--spacing) * 1.5); align-items: center; padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2); text-align: start; text-shadow: 0 1px 0 var(--shadow-current-color); cursor: pointer; user-select: none; outline: 2px solid transparent; outline-offset: -2px; border-radius: var(--menu-item-border-radius); transition: background-color, color; transition-timing-function: ease-in-out; transition-duration: 100ms; .media-icon { flex-shrink: 0; color: oklch(from currentColor l c h / 0.5); filter: drop-shadow(0 1px 0 var(--shadow-current-color)); } &:focus-visible { outline-color: var(--focus-ring-color); outline-offset: 2px; } &:hover, &[data-highlighted] { color: var(--accent-text-color); background-color: var(--accent-background-color); .media-icon { color: inherit; } } @supports (top: anchor(top)) { transition-duration: 50ms; &:hover, &[data-highlighted] { transition-duration: 200ms; } } } .media-menu__indicator { flex-shrink: 0; margin-inline: auto calc(var(--spacing) * -1); opacity: 0; } .media-menu__item { justify-content: space-between; font-variant-numeric: tabular-nums; color: inherit; &[aria-disabled="true"] { pointer-events: none; cursor: not-allowed; opacity: 0.5; } &[aria-checked="true"] .media-menu__indicator { opacity: 1; } &[data-availability="unavailable"], &[data-availability="unsupported"] { display: none; } &[data-highlighted] { @supports (top: anchor(top)) { anchor-name: --menu-item-highlight-anchor; background-color: transparent; } } } .media-menu__tier { padding-inline-start: calc(var(--spacing) * 0.5); padding-top: 1px; font-size: var(--font-size-tiny); font-weight: 600; line-height: 1; color: oklch(from currentColor l c h / 0.7); } .media-menu__back { width: 100%; margin-bottom: calc(var(--spacing) * 0.5); } .media-menu__hint { display: inline-flex; gap: calc(var(--spacing) * 1); align-items: center; min-width: 0; padding-inline-start: calc(var(--spacing) * 2); margin-inline-start: auto; color: oklch(from currentColor l c h / 0.65); } .media-menu__hint-label { max-width: calc(var(--spacing) * 24); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .media-menu__chevron { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); } /* Settings menu */ &.media-menu--settings { width: var(--media-menu-width); min-width: calc(var(--spacing) * 48); height: var(--media-menu-height); overflow: hidden; /* Only the menu size changes between panels. */ transition: var(--popup-transition), width var(--popup-transition-timing-function) var(--menu-transition-duration), height var(--popup-transition-timing-function) var(--menu-transition-duration); & > :not([data-submenu]) { translate: 0 0; transition: translate var(--menu-transition-duration) ease-out, filter var(--menu-transition-duration) ease-out; } &[data-submenu-expanded="true"] > :not([data-submenu]) { filter: blur(8px); translate: -100% 0; } &:dir(rtl)[data-submenu-expanded="true"] > :not([data-submenu]) { translate: 100% 0; } /* WebKit can restart the covered-content transition while the anchor-positioned highlight remains active. */ &[data-submenu-expanded] > :not([data-submenu])::before { display: none; } /* Don't transition size on open/close. */ &[data-starting-style], &[data-ending-style] { transition: var(--popup-transition); } } } .media-minimal-skin { --media-caption-track-duration: var(--controls-transition-duration); --media-caption-track-delay: 25ms; --media-caption-track-y: calc(var(--spacing) * -2); &:has(.media-controls[data-visible]) { --media-caption-track-y: calc(var(--spacing) * -18); } @container media-root (width > 42rem) { &:has(.media-controls[data-visible]) > * { --media-caption-track-y: calc(var(--spacing) * -12); } } } .media-minimal-skin video::-webkit-media-text-track-container { z-index: 1; font-family: inherit; scale: 0.98; translate: 0 var(--media-caption-track-y); transition: translate var(--media-caption-track-duration) ease-out; transition-delay: var(--media-caption-track-delay); } .media-minimal-skin .media-input-indicator-overlay { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; justify-items: center; overflow: hidden; color: oklch(1 0 0); pointer-events: none; border-radius: inherit; } .media-minimal-skin { .media-volume-indicator, .media-status-indicator--state { position: absolute; inset-inline: 0; top: 0; display: flex; justify-content: center; padding-top: calc(var(--spacing) * 3); padding-bottom: calc(var(--spacing) * 32); color: inherit; text-shadow: 0 1px 0 var(--shadow-current-color); pointer-events: none; background-image: linear-gradient( to bottom, oklch(0 0 0 / 0.35), oklch(0 0 0 / 0.2) calc(var(--spacing) * 12), oklch(0 0 0 / 0) ); transform-origin: top center; transition-timing-function: ease-out; transition-duration: 100ms; .media-volume-indicator__content, .media-status-indicator__content { display: flex; gap: calc(var(--spacing) * 2); align-items: center; justify-content: space-between; padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5); } .media-icon { display: none; flex-shrink: 0; filter: drop-shadow(0 1px 0 var(--shadow-current-color)); } .media-volume-indicator__value, .media-status-indicator__value { margin-left: auto; } @media (pointer: fine) { transition-property: translate, filter, opacity; will-change: translate, filter, opacity; } @media (pointer: coarse) { transition-property: translate, opacity; will-change: translate, opacity; } @media (pointer: fine) and (prefers-reduced-motion: no-preference) { transition-property: translate, filter, opacity; } @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) { .media-volume-indicator__content, .media-status-indicator__content { background: var(--controls-background-color); border-radius: calc(var(--spacing) * 2); } } &[data-starting-style], &[data-ending-style] { opacity: 0; transition-timing-function: ease-in; transition-duration: 400ms; @media (pointer: fine) and (prefers-reduced-motion: no-preference) { filter: blur(8px); } } &[data-ending-style] { @media (prefers-reduced-motion: no-preference) { translate: 0 -100%; } } } .media-seek-indicator, .media-status-indicator--playback { display: grid; grid-row: 1; grid-column: 2; place-content: center; padding: calc(var(--spacing) * 4); text-align: center; } } .media-minimal-skin .media-volume-indicator { .media-volume-indicator__content { width: min(80%, calc(var(--spacing) * 56)); transform: translateX(0); } .media-volume-indicator__progress { position: relative; width: 100%; height: calc(var(--spacing) * 0.75); background: oklch(from currentColor l c h / 0.2); border-radius: calc(Infinity * 1px); box-shadow: 0 1px 0 var(--shadow-subtle-current-color); &::before { position: absolute; inset-block: 0; left: 0; width: var(--media-volume-fill, 0%); content: ""; background: var(--accent-color); border-radius: inherit; transition: width 200ms linear; } } &[data-level="high"] .media-icon--volume-high, &[data-level="low"] .media-icon--volume-low, &[data-level="off"] .media-icon--volume-off { display: block; } @media (prefers-reduced-motion: no-preference) { &[data-min]:not([data-starting-style], [data-ending-style]) .media-volume-indicator__content, &[data-max]:not([data-starting-style], [data-ending-style]) .media-volume-indicator__content { transform: translateX(0.25px); transition: transform 300ms linear(0, -24 20%, 16 40%, -8 60%, 4 80%, 1); } } } .media-minimal-skin .media-status-indicator--state { &[data-status="captions-on"] .media-icon--captions-on, &[data-status="captions-off"] .media-icon--captions-off, &[data-status="fullscreen"] .media-icon--fullscreen-enter, &[data-status="exit-fullscreen"] .media-icon--fullscreen-exit, &[data-status="pip"] .media-icon--pip-enter, &[data-status="exit-pip"] .media-icon--pip-exit { display: block; } } .media-minimal-skin .media-status-indicator--playback { transition-timing-function: ease-out; transition-duration: 200ms; transition-property: opacity, scale; .media-icon { grid-area: 1 / 1; width: calc(var(--media-icon-size) * 2); height: calc(var(--media-icon-size) * 2); opacity: 0; scale: 0; transition-timing-function: ease-out; transition-duration: 150ms; transition-property: opacity, scale; } &[data-status="pause"] .media-icon--pause, &[data-status="play"] .media-icon--play { opacity: 1; scale: 1; } &[data-starting-style], &[data-ending-style] { opacity: 0; scale: 0.85; } &[data-ending-style] { transition-timing-function: ease-in; transition-duration: 100ms; } @media (prefers-reduced-motion: reduce) { transition-duration: 50ms; transition-property: opacity; &[data-starting-style], &[data-ending-style], .media-icon { scale: 1; } .media-icon { transition-duration: 50ms; transition-property: opacity; } } } .media-minimal-skin .media-seek-indicator { gap: calc(var(--spacing) * 1); .media-seek-indicator__value { font-variant-numeric: tabular-nums; } @container media-root (width > 24rem) { padding: calc(var(--spacing) * 6); } &[data-direction="backward"] { grid-column: 1; justify-self: left; } &[data-direction="forward"] { grid-column: 3; justify-self: right; } .media-icon--seek { display: block; width: calc(var(--media-icon-size) * 1.5); height: calc(var(--media-icon-size) * 1.5); } &[data-direction="backward"] .media-icon--seek { scale: -1 1; } @media (prefers-reduced-motion: no-preference) { .media-icon--seek { transition-timing-function: ease-in-out; transition-duration: 200ms; transition-property: translate, opacity; } &[data-starting-style] .media-icon--seek, &[data-ending-style] .media-icon--seek { opacity: 0; } &[data-direction="forward"][data-starting-style] .media-icon--seek { translate: -60% 0; } &[data-direction="backward"][data-starting-style] .media-icon--seek { translate: 60% 0; } } } /* ========================================================================== Icon State Visibility for Video Skins Data-attribute-driven visibility rules for multi-state icon buttons shared by the HTML and React skins. ========================================================================== */ /* --- All icons hidden by default --- */ .media-button--play .media-icon, .media-button--mute .media-icon, .media-button--fullscreen .media-icon, .media-button--pip .media-icon, .media-button--cast .media-icon, .media-button--airplay .media-icon, .media-button--captions .media-icon { opacity: 0; } .media-button--play .media-icon { scale: 0; } /* --- Active icon per state --- */ /* Play: ended → restart */ .media-button--play[data-ended] .media-icon--restart, /* Play: paused or not yet started (not ended) → play */ .media-button--play:not([data-ended])[data-paused] .media-icon--play, .media-button--play:not([data-ended]):not([data-started]) .media-icon--play, /* Play: started and not paused/ended → pause */ .media-button--play[data-started]:not([data-paused]):not([data-ended]) .media-icon--pause, /* Mute: muted → volume off */ .media-button--mute[data-muted] .media-icon--volume-off, /* Mute: volume low (not muted) → volume low */ .media-button--mute:not([data-muted])[data-volume-level="low"] .media-icon--volume-low, /* Mute: volume high (not muted, not low) → volume high */ .media-button--mute:not([data-muted]):not([data-volume-level="low"]) .media-icon--volume-high, /* Fullscreen: not fullscreen → enter */ .media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter, /* Fullscreen: fullscreen → exit */ .media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit, /* Picture-in-Picture: not active → enter */ .media-button--pip:not([data-pip]) .media-icon--pip-enter, /* Picture-in-Picture: active → exit */ .media-button--pip[data-pip] .media-icon--pip-exit, /* Cast: not connected → enter */ .media-button--cast:not([data-cast-state="connected"]) .media-icon--cast-enter, /* Cast: connected → exit */ .media-button--cast[data-cast-state="connected"] .media-icon--cast-exit, /* AirPlay: not connected → enter */ .media-button--airplay:not([data-airplay-state="connected"]) .media-icon--airplay-enter, /* AirPlay: connected → exit */ .media-button--airplay[data-airplay-state="connected"] .media-icon--airplay-exit, /* Captions: not active → captions off */ .media-button--captions:not([data-active]) .media-icon--captions-off, /* Captions: active → captions on */ .media-button--captions[data-active] .media-icon--captions-on { opacity: 1; scale: 1; } /* --- Pause keyframe animations on inactive icons --- */ /* The airplay-exit SVG defines its keyframes against CSS variables (mirroring the spinner pattern). When the AirPlay session isn't active the SVG is still in the DOM — just `display: none` — so its animations would keep running. Set the variables to `none` to short-circuit the keyframes. */ .media-button--airplay:not([data-airplay-state="connected"]) { --media-icon-airplay-fill-animation: none; --media-icon-airplay-triangle-animation: none; } @media (prefers-reduced-motion: reduce) { .media-button--airplay { --media-icon--airplay__fill-animation: none; --media-icon--airplay__triangle-animation: none; } } /* Container */ .media-minimal-skin--video { --default-accent-color: oklch(1 0 0); --border-color: light-dark(oklch(0 0 0 / 0.15), oklch(1 0 0 / 0.15)); --focus-ring-color: light-dark(oklch(0 0 0), oklch(1 0 0)); --media-video-border-radius: var(--container-border-radius); --controls-background-color: transparent; --controls-transition-duration: 100ms; --controls-transition-timing-function: ease-out; --error-dialog-transition-duration: 150ms; --error-dialog-transition-delay: 100ms; --error-dialog-transition-timing-function: ease-out; --popup-transition-duration: 100ms; --popup-transition-timing-function: ease-out; --popover-backdrop-filter: blur(16px) saturate(1.5); --popover-background-color: oklch(0 0 0 / 0.5); --popover-border-color: oklch(1 0 0 / 0.1); --tooltip-backdrop-filter: var(--popover-backdrop-filter); --tooltip-background-color: var(--popover-background-color); --tooltip-border-color: var(--popover-border-color); --tooltip-text-color: currentColor; overflow: clip; background: oklch(0 0 0); @media (prefers-reduced-motion: reduce) { --error-dialog-transition-duration: 50ms; --error-dialog-transition-delay: 0ms; --popup-transition-duration: 0ms; .media-error__dialog { scale: 1; transition-property: opacity; } } @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) { --controls-background-color: oklch(0 0 0); --tooltip-background-color: oklch(0 0 0); } &:has(.media-controls:not([data-visible])) { /* Slight delay to hide controls on non-touch devices after interaction */ @media (pointer: fine) { --controls-transition-duration: 300ms; } @media (pointer: coarse) { --controls-transition-duration: 150ms; } @media (prefers-reduced-motion: reduce) { --controls-transition-duration: 50ms; } } /* Inner border ring */ &::after { position: absolute; inset: 0; z-index: 10; pointer-events: none; content: ""; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--border-color); } &:fullscreen { --container-border-radius: 0; &::after { display: none; } @media (width >= 1280px) { --scale: 1.25; } @media (width >= 1536px) { --scale: 1.5; } @media (width >= 1920px) { --scale: 1.75; } } * { --focus-ring-color: oklch(1 0 0); } } /* Error Dialog */ .media-minimal-skin--video .media-error { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; pointer-events: none; outline: none; } .media-minimal-skin--video .media-error__dialog { display: flex; flex-direction: column; gap: calc(var(--spacing) * 3); width: 100%; max-width: calc(var(--spacing) * 64); padding: calc(var(--spacing) * 4); color: oklch(1 0 0); text-shadow: 0 1px 0 oklch(0 0 0 / 0.5); pointer-events: auto; transition-delay: var(--error-dialog-transition-delay); transition-timing-function: var(--error-dialog-transition-timing-function); transition-duration: var(--error-dialog-transition-duration); transition-property: opacity, scale; } .media-minimal-skin--video .media-error__content { display: flex; flex-direction: column; gap: calc(var(--spacing) * 2); padding: calc(var(--spacing) * 1.5) 0; } .media-minimal-skin--video .media-error__title { font-size: var(--font-size-medium); } .media-minimal-skin--video .media-error[data-starting-style] .media-error__dialog, .media-minimal-skin--video .media-error[data-ending-style] .media-error__dialog { opacity: 0; scale: 0.95; } .media-minimal-skin--video .media-error[data-ending-style] .media-error__dialog { transition-delay: 0ms; } /* Controls (hide/show behavior) */ .media-minimal-skin--video .media-controls { --base-side-offset: 5; --base-boundary-offset: 1; --inset-factor: 1; --inset: calc(var(--spacing) * var(--inset-factor)); --volume-mask: linear-gradient(to right, transparent 10%, #000 25%, #000 100%); position: absolute; inset-inline: var(--inset); bottom: var(--inset); z-index: 10; flex-wrap: wrap; column-gap: calc(var(--spacing) * 2); color: oklch(1 0 0); border-radius: calc(var(--spacing) * 3); transition-timing-function: var(--controls-transition-timing-function); /* Speed up the entry transition */ transition-duration: calc(var(--controls-transition-duration) / 2); @media (pointer: fine) { transition-property: translate, filter, opacity; } @media (pointer: coarse) { transition-property: translate, opacity; } &:not([data-visible]) { pointer-events: none; opacity: 0; transition-duration: var(--controls-transition-duration); @media (pointer: fine) and (prefers-reduced-motion: no-preference) { filter: blur(8px); } @media (prefers-reduced-motion: no-preference) { translate: 0 100%; } } .media-time-controls { --slider-height: calc(var(--spacing) * 5); flex: 0 0 100%; order: -1; padding-inline: calc(var(--spacing) * 1.5); } .media-button-group:first-child { flex: 1; text-align: left; } .media-button-group:last-child { flex: 1; justify-content: end; } :is(.media-time-controls, .media-button-group:last-child) { mask-image: var(--volume-mask-image, none); mask-repeat: no-repeat; mask-position: var(--volume-mask-position, 100% 0); mask-size: var(--volume-mask-size, 200% 100%); transition: mask-position 50ms ease-out; } @container media-root (width <= 42rem) { .media-popover--volume { --media-popover-side-offset: calc(var(--spacing) * 3); } } &:has(.media-button--mute[aria-expanded="true"]) { @container media-root (width <= 42rem) { .media-button-group:last-child { --volume-mask-image: var(--volume-mask); --volume-mask-position: 0 0; --volume-mask-size: 400% 100%; } } @container media-root (width > 42rem) { .media-time-controls { --volume-mask-image: var(--volume-mask); --volume-mask-position: 0 0; } } } @container media-root (width > 42rem) { --inset-factor: 2; --base-side-offset: 2; flex-wrap: nowrap; .media-time-controls { --slider-height: calc(var(--spacing) * 8); flex: 1; order: unset; } .media-button-group:first-child, .media-button-group:last-child { flex: 0 0 auto; } } } .media-minimal-skin--video .media-error[data-open] ~ .media-controls { display: none; } /* Hide cursor when controls are hidden */ .media-minimal-skin--video:has(.media-controls:not([data-visible])) { cursor: none; } /* Popups & Animations */ .media-minimal-skin--video .media-popover--volume { padding: 0; background: transparent; } /* Slider preview */ .media-minimal-skin--video .media-slider .media-slider__preview { --preview-end-inset: calc(100cqi - 100%); --preview-left: clamp( calc(var(--max-size) / 2), var(--media-slider-pointer), calc(100% - var(--max-size) / 2 + var(--preview-end-inset)) ); @container media-root (width > 42rem) { --preview-left: var(--media-slider-pointer); } } /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */ @layer properties; @font-face { font-family: "OpenDyslexic"; src: url(https://cdn3.bci.cl/uploads/852337c8-2d9d-429b-9a07-ebc03294c711/original/OpenDyslexic-Regular.otf) format("opentype"); } @layer theme, base, components, utilities; @layer theme { :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: #FDE7E8; --color-red-100: #FBCED1; --color-red-300: #F46D75; --color-red-400: #F13D47; --color-red-500: #ED0C19; --color-yellow-50: #FFFCE5; --color-yellow-100: #FFF9CC; --color-yellow-300: #FFEE66; --color-yellow-400: #FFE933; --color-yellow-500: #FFE300; --color-yellow-600: #F9B316; --color-green-50: #E9F3EA; --color-green-100: #D4E7D5; --color-green-200: #A9D0AA; --color-green-300: #7EB880; --color-green-400: #53A155; --color-green-500: #28892B; --color-green-600: #59A80F; --color-blue-50: #E5EEF9; --color-blue-100: #D4E3F5; --color-blue-300: #7DAAE0; --color-blue-400: #528ED6; --color-blue-500: #2772CC; --color-blue-600: #005FFF; --color-white: #FFFFFF; --spacing: 0.25rem; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --font-weight-extralight: 200; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --leading-tight: 1.25; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); --font-overpass: 'Overpass', arial, sans-serif; --color-dark: #232323; --color-darker: #121212; --color-grey-600: #2C3A41; --color-grey-500: #37474F; --color-grey-400: #546E7A; --color-grey-300: #BBC5CA; --color-grey-200: #E2E8EA; --color-grey-100: #EAEDEF; --color-grey-50: #F6F7F8; --color-blue-25: #F4F8FC; --text-1: clamp(1.625rem, 1rem + 2vw, 2.125rem); --text-2: clamp(1.5rem, 1.3438rem + 0.5vw, 1.625rem); --text-3: clamp(1.125rem, 0.8125rem + 1vw, 1.375rem); --text-4: 1.25rem; --text-5: 1.125rem; --text-6: 1rem; --text-7: 0.875rem; --text-8: 0.75rem; --filter-white: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(51%) hue-rotate(171deg) brightness(117%) contrast(100%); --filter-blue: brightness(0) saturate(100%) invert(23%) sepia(35%) saturate(7499%) hue-rotate(215deg) brightness(101%) contrast(106%); --filter-red: brightness(0) saturate(100%) invert(43%) sepia(97%) saturate(7205%) hue-rotate(347deg) brightness(88%) contrast(113%); --filter-yellow: brightness(0) saturate(100%) invert(74%) sepia(99%) saturate(447%) hue-rotate(359deg) brightness(103%) contrast(103%); --filter-green: brightness(0) saturate(100%) invert(40%) sepia(98%) saturate(385%) hue-rotate(72deg) brightness(87%) contrast(93%); --filter-grey: brightness(0) saturate(100%) invert(23%) sepia(25%) saturate(481%) hue-rotate(155deg) brightness(94%) contrast(85%); } } @layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentcolor; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } @layer utilities { .\@container { container-type: inline-size; } .invisible { visibility: hidden; } .visible { visibility: visible; } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .static { position: static; } .sticky { position: sticky; } .inset-0 { inset: calc(var(--spacing) * 0); } .top-0 { top: calc(var(--spacing) * 0); } .top-2 { top: calc(var(--spacing) * 2); } .top-32 { top: calc(var(--spacing) * 32); } .top-\[\.5rem\] { top: .5rem; } .top-\[0\.125rem\] { top: 0.125rem; } .right-2 { right: calc(var(--spacing) * 2); } .right-\[\.5rem\] { right: .5rem; } .right-\[0\.125rem\] { right: 0.125rem; } .bottom-0 { bottom: calc(var(--spacing) * 0); } .left-0 { left: calc(var(--spacing) * 0); } .z-1 { z-index: 1; } .z-2 { z-index: 2; } .z-3 { z-index: 3; } .z-4 { z-index: 4; } .z-5 { z-index: 5; } .z-9999 { z-index: 9999; } .col-span-2 { grid-column: span 2 / span 2; } .float-end { float: inline-end; } .float-start { float: inline-start; } .container { width: 100%; @media (width >= 36rem) { max-width: 36rem; } @media (width >= 48rem) { max-width: 48rem; } @media (width >= 62rem) { max-width: 62rem; } @media (width >= 75rem) { max-width: 75rem; } @media (width >= 87.5rem) { max-width: 87.5rem; } @media (width >= 100rem) { max-width: 100rem; } } .m-auto { margin: auto; } .my-10 { margin-block: calc(var(--spacing) * 10); } .ms-1 { margin-inline-start: calc(var(--spacing) * 1); } .ms-2 { margin-inline-start: calc(var(--spacing) * 2); } .-mt-1 { margin-top: calc(var(--spacing) * -1); } .-mt-5 { margin-top: calc(var(--spacing) * -5); } .-mt-15 { margin-top: calc(var(--spacing) * -15); } .-mt-\[3px\] { margin-top: calc(3px * -1); } .mt-2 { margin-top: calc(var(--spacing) * 2); } .mt-3 { margin-top: calc(var(--spacing) * 3); } .mt-4 { margin-top: calc(var(--spacing) * 4); } .mt-5 { margin-top: calc(var(--spacing) * 5); } .mt-6 { margin-top: calc(var(--spacing) * 6); } .mt-8 { margin-top: calc(var(--spacing) * 8); } .mt-10 { margin-top: calc(var(--spacing) * 10); } .mt-20 { margin-top: calc(var(--spacing) * 20); } .-mr-7 { margin-right: calc(var(--spacing) * -7); } .mb-1 { margin-bottom: calc(var(--spacing) * 1); } .mb-2 { margin-bottom: calc(var(--spacing) * 2); } .mb-3 { margin-bottom: calc(var(--spacing) * 3); } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .mb-6\.75 { margin-bottom: calc(var(--spacing) * 6.75); } .mb-8 { margin-bottom: calc(var(--spacing) * 8); } .mb-12 { margin-bottom: calc(var(--spacing) * 12); } .mb-20 { margin-bottom: calc(var(--spacing) * 20); } .mb-\[2rem\] { margin-bottom: 2rem; } .block { display: block; } .contents { display: contents; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none; } .inline { display: inline; } .h-3 { height: calc(var(--spacing) * 3); } .h-6 { height: calc(var(--spacing) * 6); } .h-8 { height: calc(var(--spacing) * 8); } .h-8\.5 { height: calc(var(--spacing) * 8.5); } .h-9 { height: calc(var(--spacing) * 9); } .h-10 { height: calc(var(--spacing) * 10); } .h-12 { height: calc(var(--spacing) * 12); } .h-12\.5 { height: calc(var(--spacing) * 12.5); } .h-16 { height: calc(var(--spacing) * 16); } .h-16\.25 { height: calc(var(--spacing) * 16.25); } .h-17\.5 { height: calc(var(--spacing) * 17.5); } .h-20 { height: calc(var(--spacing) * 20); } .h-25 { height: calc(var(--spacing) * 25); } .h-28 { height: calc(var(--spacing) * 28); } .h-36\.5 { height: calc(var(--spacing) * 36.5); } .h-50 { height: calc(var(--spacing) * 50); } .h-62\.5 { height: calc(var(--spacing) * 62.5); } .h-72\.5 { height: calc(var(--spacing) * 72.5); } .h-\[2\.5rem\] { height: 2.5rem; } .h-\[2\.875rem\] { height: 2.875rem; } .h-\[100\%\] { height: 100%; } .h-full { height: 100%; } .h-screen { height: 100vh; } .max-h-50 { max-height: calc(var(--spacing) * 50); } .max-h-70 { max-height: calc(var(--spacing) * 70); } .min-h-17\.5 { min-height: calc(var(--spacing) * 17.5); } .min-h-50 { min-height: calc(var(--spacing) * 50); } .min-h-\[4\.375rem\] { min-height: 4.375rem; } .w-6 { width: calc(var(--spacing) * 6); } .w-8 { width: calc(var(--spacing) * 8); } .w-9 { width: calc(var(--spacing) * 9); } .w-12 { width: calc(var(--spacing) * 12); } .w-19\.25 { width: calc(var(--spacing) * 19.25); } .w-20\.5 { width: calc(var(--spacing) * 20.5); } .w-21\.25 { width: calc(var(--spacing) * 21.25); } .w-25 { width: calc(var(--spacing) * 25); } .w-36\.5 { width: calc(var(--spacing) * 36.5); } .w-43 { width: calc(var(--spacing) * 43); } .w-44 { width: calc(var(--spacing) * 44); } .w-45 { width: calc(var(--spacing) * 45); } .w-80 { width: calc(var(--spacing) * 80); } .w-\[1\.5rem\] { width: 1.5rem; } .w-\[2\.875rem\] { width: 2.875rem; } .w-\[100\%\] { width: 100%; } .w-full { width: 100%; } .max-w-42\.5 { max-width: calc(var(--spacing) * 42.5); } .max-w-42\.75 { max-width: calc(var(--spacing) * 42.75); } .max-w-45 { max-width: calc(var(--spacing) * 45); } .max-w-62\.5 { max-width: calc(var(--spacing) * 62.5); } .max-w-113\.75 { max-width: calc(var(--spacing) * 113.75); } .max-w-130 { max-width: calc(var(--spacing) * 130); } .max-w-150 { max-width: calc(var(--spacing) * 150); } .max-w-175 { max-width: calc(var(--spacing) * 175); } .max-w-181\.25 { max-width: calc(var(--spacing) * 181.25); } .max-w-281\.25 { max-width: calc(var(--spacing) * 281.25); } .max-w-311\.25 { max-width: calc(var(--spacing) * 311.25); } .max-w-315 { max-width: calc(var(--spacing) * 315); } .max-w-\[15\.625rem\] { max-width: 15.625rem; } .max-w-\[38rem\] { max-width: 38rem; } .max-w-\[78\.75rem\] { max-width: 78.75rem; } .max-w-\[84\.375rem\] { max-width: 84.375rem; } .max-w-\[85\%\] { max-width: 85%; } .max-w-\[300px\] { max-width: 300px; } .max-w-\[400px\] { max-width: 400px; } .max-w-\[540px\] { max-width: 540px; } .max-w-\[570px\] { max-width: 570px; } .max-w-full { max-width: 100%; } .min-w-18 { min-width: calc(var(--spacing) * 18); } .min-w-42\.75 { min-width: calc(var(--spacing) * 42.75); } .min-w-51 { min-width: calc(var(--spacing) * 51); } .min-w-62\.5 { min-width: calc(var(--spacing) * 62.5); } .min-w-325 { min-width: calc(var(--spacing) * 325); } .min-w-\[15\.625rem\] { min-width: 15.625rem; } .min-w-\[17\.5rem\] { min-width: 17.5rem; } .min-w-\[81\.25rem\] { min-width: 81.25rem; } .flex-1 { flex: 1; } .flex-shrink { flex-shrink: 1; } .shrink-0 { flex-shrink: 0; } .-translate-x-full { --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-30 { --tw-translate-x: calc(var(--spacing) * 30); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-full { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } .rotate-\[180deg\] { rotate: 180deg; } .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } .cursor-pointer { cursor: pointer; } .resize { resize: both; } .list-disc { list-style-type: disc; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flex-col { flex-direction: column; } .flex-col-reverse { flex-direction: column-reverse; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-start { justify-content: flex-start; } .gap-0 { gap: calc(var(--spacing) * 0); } .gap-1 { gap: calc(var(--spacing) * 1); } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-4 { gap: calc(var(--spacing) * 4); } .gap-6 { gap: calc(var(--spacing) * 6); } .gap-8 { gap: calc(var(--spacing) * 8); } .gap-10 { gap: calc(var(--spacing) * 10); } .gap-12 { gap: calc(var(--spacing) * 12); } .gap-12\.5 { gap: calc(var(--spacing) * 12.5); } .gap-13 { gap: calc(var(--spacing) * 13); } .gap-\[1rem\] { gap: 1rem; } .gap-\[2rem\] { gap: 2rem; } .overflow-hidden { overflow: hidden; } .overflow-y-auto { overflow-y: auto; } .rounded-2xl { border-radius: var(--radius-2xl); } .rounded-3xl { border-radius: var(--radius-3xl); } .rounded-\[\.5rem\] { border-radius: .5rem; } .rounded-\[\.625rem\] { border-radius: .625rem; } .rounded-\[0\.5rem\] { border-radius: 0.5rem; } .rounded-\[0\.375rem\] { border-radius: 0.375rem; } .rounded-\[1\.25rem\] { border-radius: 1.25rem; } .rounded-\[1\.625rem\] { border-radius: 1.625rem; } .rounded-\[1\.875rem\] { border-radius: 1.875rem; } .rounded-full { border-radius: calc(infinity * 1px); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-none { border-radius: 0; } .rounded-sm { border-radius: var(--radius-sm); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-t-\[1\.625rem\] { border-top-left-radius: 1.625rem; border-top-right-radius: 1.625rem; } .rounded-t-none { border-top-left-radius: 0; border-top-right-radius: 0; } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-l { border-left-style: var(--tw-border-style); border-left-width: 1px; } .border-none { --tw-border-style: none; border-style: none; } .border-grey-100 { border-color: var(--color-grey-100); } .border-grey-300 { border-color: var(--color-grey-300); } .bg-blue-25 { background-color: var(--color-blue-25); } .bg-blue-50 { background-color: var(--color-blue-50); } .bg-dark\/50 { background-color: color-mix(in srgb, #232323 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-dark) 50%, transparent); } } .bg-green-50 { background-color: var(--color-green-50); } .bg-grey-50 { background-color: var(--color-grey-50); } .bg-grey-100 { background-color: var(--color-grey-100); } .bg-grey-500 { background-color: var(--color-grey-500); } .bg-transparent { background-color: transparent; } .bg-white { background-color: var(--color-white); } .bg-\[url\(\'https\:\/\/cdn3\.bci\.cl\/uploads\/89cc57d8-019f-49ab-8a17-a68094abddd9\/original\/fondo-figuras\.svg\'\)\] { background-image: url('https://cdn3.bci.cl/uploads/89cc57d8-019f-49ab-8a17-a68094abddd9/original/fondo-figuras.svg'); } .object-contain { object-fit: contain; } .object-cover { object-fit: cover; } .object-left { object-position: left; } .object-top { object-position: top; } .p-0 { padding: calc(var(--spacing) * 0); } .p-2 { padding: calc(var(--spacing) * 2); } .p-2\.5 { padding: calc(var(--spacing) * 2.5); } .p-3 { padding: calc(var(--spacing) * 3); } .p-4 { padding: calc(var(--spacing) * 4); } .p-5 { padding: calc(var(--spacing) * 5); } .p-6 { padding: calc(var(--spacing) * 6); } .p-8 { padding: calc(var(--spacing) * 8); } .p-12\.5 { padding: calc(var(--spacing) * 12.5); } .p-\[1\.5rem\] { padding: 1.5rem; } .p-\[2rem\] { padding: 2rem; } .px-0 { padding-inline: calc(var(--spacing) * 0); } .px-2 { padding-inline: calc(var(--spacing) * 2); } .px-2\.5 { padding-inline: calc(var(--spacing) * 2.5); } .px-3 { padding-inline: calc(var(--spacing) * 3); } .px-4 { padding-inline: calc(var(--spacing) * 4); } .px-6 { padding-inline: calc(var(--spacing) * 6); } .px-8 { padding-inline: calc(var(--spacing) * 8); } .px-\[1\.5rem\] { padding-inline: 1.5rem; } .py-2 { padding-block: calc(var(--spacing) * 2); } .py-4 { padding-block: calc(var(--spacing) * 4); } .py-8 { padding-block: calc(var(--spacing) * 8); } .py-10 { padding-block: calc(var(--spacing) * 10); } .ps-3 { padding-inline-start: calc(var(--spacing) * 3); } .ps-4 { padding-inline-start: calc(var(--spacing) * 4); } .ps-10 { padding-inline-start: calc(var(--spacing) * 10); } .pt-0 { padding-top: calc(var(--spacing) * 0); } .pt-0\.75 { padding-top: calc(var(--spacing) * 0.75); } .pt-4 { padding-top: calc(var(--spacing) * 4); } .pt-5 { padding-top: calc(var(--spacing) * 5); } .pt-7 { padding-top: calc(var(--spacing) * 7); } .pt-8 { padding-top: calc(var(--spacing) * 8); } .pt-10 { padding-top: calc(var(--spacing) * 10); } .pt-14 { padding-top: calc(var(--spacing) * 14); } .pt-\[1rem\] { padding-top: 1rem; } .pt-\[2\.5rem\] { padding-top: 2.5rem; } .pt-\[3px\] { padding-top: 3px; } .pb-0 { padding-bottom: calc(var(--spacing) * 0); } .pb-2 { padding-bottom: calc(var(--spacing) * 2); } .pb-6 { padding-bottom: calc(var(--spacing) * 6); } .pb-8 { padding-bottom: calc(var(--spacing) * 8); } .pb-10 { padding-bottom: calc(var(--spacing) * 10); } .pb-13\.75 { padding-bottom: calc(var(--spacing) * 13.75); } .pb-15 { padding-bottom: calc(var(--spacing) * 15); } .pb-16 { padding-bottom: calc(var(--spacing) * 16); } .pb-\[\.5rem\] { padding-bottom: .5rem; } .pl-4 { padding-left: calc(var(--spacing) * 4); } .text-center { text-align: center; } .text-left { text-align: left; } .text-start { text-align: start; } .text-6xl { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); } .text-1 { font-size: var(--text-1); } .text-2 { font-size: var(--text-2); } .text-3 { font-size: var(--text-3); } .text-4 { font-size: var(--text-4); } .text-5 { font-size: var(--text-5); } .text-6 { font-size: var(--text-6); } .text-7 { font-size: var(--text-7); } .text-8 { font-size: var(--text-8); } .leading-6 { --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); } .leading-\[1\.15\] { --tw-leading: 1.15; line-height: 1.15; } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .text-blue-400 { color: var(--color-blue-400); } .text-blue-600 { color: var(--color-blue-600); } .text-green-500 { color: var(--color-green-500); } .text-green-600 { color: var(--color-green-600); } .text-grey-400 { color: var(--color-grey-400); } .text-grey-500 { color: var(--color-grey-500); } .text-grey-600 { color: var(--color-grey-600); } .text-white { color: var(--color-white); } .opacity-0 { opacity: 0%; } .opacity-50 { opacity: 50%; } .opacity-100 { opacity: 100%; } .shadow-\[0_-2px_20px_rgba\(0\,0\,0\,0\.1\)\] { --tw-shadow: 0 -2px 20px var(--tw-shadow-color, rgba(0,0,0,0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-md { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-sm { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-xl { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .blur { --tw-blur: blur(8px); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .filter { filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .duration-300 { --tw-duration: 300ms; transition-duration: 300ms; } .duration-500 { --tw-duration: 500ms; transition-duration: 500ms; } .ease-in-out { --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .backface-hidden { backface-visibility: hidden; } .group-hover\:block { &:is(:where(.group):hover *) { @media (hover: hover) { display: block; } } } .group-hover\:translate-x-1 { &:is(:where(.group):hover *) { @media (hover: hover) { --tw-translate-x: calc(var(--spacing) * 1); translate: var(--tw-translate-x) var(--tw-translate-y); } } } .group-hover\:underline { &:is(:where(.group):hover *) { @media (hover: hover) { text-decoration-line: underline; } } } .group-hover\:opacity-100 { &:is(:where(.group):hover *) { @media (hover: hover) { opacity: 100%; } } } .marker\:text-blue-600 { & *::marker { color: var(--color-blue-600); } &::marker { color: var(--color-blue-600); } & *::-webkit-details-marker { color: var(--color-blue-600); } &::-webkit-details-marker { color: var(--color-blue-600); } } .last\:border-0 { &:last-child { border-style: var(--tw-border-style); border-width: 0px; } } .hover\:cursor-pointer { &:hover { @media (hover: hover) { cursor: pointer; } } } .hover\:bg-grey-50 { &:hover { @media (hover: hover) { background-color: var(--color-grey-50); } } } .hover\:text-red-500 { &:hover { @media (hover: hover) { color: var(--color-red-500); } } } .hover\:underline { &:hover { @media (hover: hover) { text-decoration-line: underline; } } } .hover\:opacity-100 { &:hover { @media (hover: hover) { opacity: 100%; } } } .hover\:shadow-xl { &:hover { @media (hover: hover) { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .focus\:ring-0 { &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .focus\:outline-none { &:focus { --tw-outline-style: none; outline-style: none; } } .sm\:mt-10 { @media (width >= 36rem) { margin-top: calc(var(--spacing) * 10); } } .sm\:grid { @media (width >= 36rem) { display: grid; } } .sm\:hidden { @media (width >= 36rem) { display: none; } } .sm\:w-auto { @media (width >= 36rem) { width: auto; } } .sm\:grid-cols-2 { @media (width >= 36rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .sm\:grid-cols-4 { @media (width >= 36rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .sm\:flex-row { @media (width >= 36rem) { flex-direction: row; } } .sm\:justify-between { @media (width >= 36rem) { justify-content: space-between; } } .sm\:text-end { @media (width >= 36rem) { text-align: end; } } .sm\:text-start { @media (width >= 36rem) { text-align: start; } } .md\:-mt-30 { @media (width >= 48rem) { margin-top: calc(var(--spacing) * -30); } } .md\:mb-0 { @media (width >= 48rem) { margin-bottom: calc(var(--spacing) * 0); } } .md\:mb-15 { @media (width >= 48rem) { margin-bottom: calc(var(--spacing) * 15); } } .md\:block { @media (width >= 48rem) { display: block; } } .md\:grid { @media (width >= 48rem) { display: grid; } } .md\:hidden { @media (width >= 48rem) { display: none; } } .md\:h-26\.25 { @media (width >= 48rem) { height: calc(var(--spacing) * 26.25); } } .md\:h-33\.75 { @media (width >= 48rem) { height: calc(var(--spacing) * 33.75); } } .md\:h-60 { @media (width >= 48rem) { height: calc(var(--spacing) * 60); } } .md\:h-65 { @media (width >= 48rem) { height: calc(var(--spacing) * 65); } } .md\:h-80 { @media (width >= 48rem) { height: calc(var(--spacing) * 80); } } .md\:h-87\.5 { @media (width >= 48rem) { height: calc(var(--spacing) * 87.5); } } .md\:h-110 { @media (width >= 48rem) { height: calc(var(--spacing) * 110); } } .md\:max-h-90 { @media (width >= 48rem) { max-height: calc(var(--spacing) * 90); } } .md\:w-33\.75 { @media (width >= 48rem) { width: calc(var(--spacing) * 33.75); } } .md\:w-113\.75 { @media (width >= 48rem) { width: calc(var(--spacing) * 113.75); } } .md\:w-\[calc\(50\%-16px\)\] { @media (width >= 48rem) { width: calc(50% - 16px); } } .md\:max-w-80 { @media (width >= 48rem) { max-width: calc(var(--spacing) * 80); } } .md\:flex-1 { @media (width >= 48rem) { flex: 1; } } .md\:grid-cols-2 { @media (width >= 48rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .md\:flex-col { @media (width >= 48rem) { flex-direction: column; } } .md\:flex-row { @media (width >= 48rem) { flex-direction: row; } } .md\:items-center { @media (width >= 48rem) { align-items: center; } } .md\:items-start { @media (width >= 48rem) { align-items: flex-start; } } .md\:justify-end { @media (width >= 48rem) { justify-content: flex-end; } } .md\:gap-6 { @media (width >= 48rem) { gap: calc(var(--spacing) * 6); } } .md\:rounded-3xl { @media (width >= 48rem) { border-radius: var(--radius-3xl); } } .md\:rounded-\[1\.25rem\] { @media (width >= 48rem) { border-radius: 1.25rem; } } .md\:rounded-\[1\.875rem\] { @media (width >= 48rem) { border-radius: 1.875rem; } } .md\:rounded-\[45px\] { @media (width >= 48rem) { border-radius: 45px; } } .md\:rounded-l-\[1\.25rem\] { @media (width >= 48rem) { border-top-left-radius: 1.25rem; border-bottom-left-radius: 1.25rem; } } .md\:p-6 { @media (width >= 48rem) { padding: calc(var(--spacing) * 6); } } .md\:p-10 { @media (width >= 48rem) { padding: calc(var(--spacing) * 10); } } .md\:px-4 { @media (width >= 48rem) { padding-inline: calc(var(--spacing) * 4); } } .md\:px-5\.5 { @media (width >= 48rem) { padding-inline: calc(var(--spacing) * 5.5); } } .md\:px-6 { @media (width >= 48rem) { padding-inline: calc(var(--spacing) * 6); } } .md\:px-8 { @media (width >= 48rem) { padding-inline: calc(var(--spacing) * 8); } } .md\:py-6 { @media (width >= 48rem) { padding-block: calc(var(--spacing) * 6); } } .md\:pt-6 { @media (width >= 48rem) { padding-top: calc(var(--spacing) * 6); } } .md\:pb-0 { @media (width >= 48rem) { padding-bottom: calc(var(--spacing) * 0); } } .md\:pb-6 { @media (width >= 48rem) { padding-bottom: calc(var(--spacing) * 6); } } .md\:pb-17\.5 { @media (width >= 48rem) { padding-bottom: calc(var(--spacing) * 17.5); } } .md\:text-start { @media (width >= 48rem) { text-align: start; } } .lg\:ms-8 { @media (width >= 62rem) { margin-inline-start: calc(var(--spacing) * 8); } } .lg\:mt-12 { @media (width >= 62rem) { margin-top: calc(var(--spacing) * 12); } } .lg\:mt-36 { @media (width >= 62rem) { margin-top: calc(var(--spacing) * 36); } } .lg\:block { @media (width >= 62rem) { display: block; } } .lg\:flex { @media (width >= 62rem) { display: flex; } } .lg\:grid { @media (width >= 62rem) { display: grid; } } .lg\:hidden { @media (width >= 62rem) { display: none; } } .lg\:h-12 { @media (width >= 62rem) { height: calc(var(--spacing) * 12); } } .lg\:h-85 { @media (width >= 62rem) { height: calc(var(--spacing) * 85); } } .lg\:h-102\.5 { @media (width >= 62rem) { height: calc(var(--spacing) * 102.5); } } .lg\:h-auto { @media (width >= 62rem) { height: auto; } } .lg\:h-full { @media (width >= 62rem) { height: 100%; } } .lg\:max-h-full { @media (width >= 62rem) { max-height: 100%; } } .lg\:w-12 { @media (width >= 62rem) { width: calc(var(--spacing) * 12); } } .lg\:w-27 { @media (width >= 62rem) { width: calc(var(--spacing) * 27); } } .lg\:w-60 { @media (width >= 62rem) { width: calc(var(--spacing) * 60); } } .lg\:w-70\.75 { @media (width >= 62rem) { width: calc(var(--spacing) * 70.75); } } .lg\:w-104\.5 { @media (width >= 62rem) { width: calc(var(--spacing) * 104.5); } } .lg\:w-150 { @media (width >= 62rem) { width: calc(var(--spacing) * 150); } } .lg\:w-240 { @media (width >= 62rem) { width: calc(var(--spacing) * 240); } } .lg\:w-\[calc\(33\.333\%-12px\)\] { @media (width >= 62rem) { width: calc(33.333% - 12px); } } .lg\:w-auto { @media (width >= 62rem) { width: auto; } } .lg\:max-w-281\.25 { @media (width >= 62rem) { max-width: calc(var(--spacing) * 281.25); } } .lg\:min-w-\[20rem\] { @media (width >= 62rem) { min-width: 20rem; } } .lg\:min-w-\[30rem\] { @media (width >= 62rem) { min-width: 30rem; } } .lg\:grid-cols-2 { @media (width >= 62rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .lg\:grid-cols-4 { @media (width >= 62rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .lg\:grid-cols-\[1fr_380px\] { @media (width >= 62rem) { grid-template-columns: 1fr 380px; } } .lg\:grid-cols-\[285px_1fr\] { @media (width >= 62rem) { grid-template-columns: 285px 1fr; } } .lg\:flex-col { @media (width >= 62rem) { flex-direction: column; } } .lg\:flex-row { @media (width >= 62rem) { flex-direction: row; } } .lg\:items-center { @media (width >= 62rem) { align-items: center; } } .lg\:justify-center { @media (width >= 62rem) { justify-content: center; } } .lg\:gap-4 { @media (width >= 62rem) { gap: calc(var(--spacing) * 4); } } .lg\:gap-20 { @media (width >= 62rem) { gap: calc(var(--spacing) * 20); } } .lg\:rounded-\[2\.5rem\] { @media (width >= 62rem) { border-radius: 2.5rem; } } .lg\:border { @media (width >= 62rem) { border-style: var(--tw-border-style); border-width: 1px; } } .lg\:bg-white { @media (width >= 62rem) { background-color: var(--color-white); } } .lg\:p-0 { @media (width >= 62rem) { padding: calc(var(--spacing) * 0); } } .lg\:p-10 { @media (width >= 62rem) { padding: calc(var(--spacing) * 10); } } .lg\:px-4 { @media (width >= 62rem) { padding-inline: calc(var(--spacing) * 4); } } .lg\:px-20 { @media (width >= 62rem) { padding-inline: calc(var(--spacing) * 20); } } .lg\:py-8 { @media (width >= 62rem) { padding-block: calc(var(--spacing) * 8); } } .lg\:ps-10 { @media (width >= 62rem) { padding-inline-start: calc(var(--spacing) * 10); } } .lg\:ps-72 { @media (width >= 62rem) { padding-inline-start: calc(var(--spacing) * 72); } } .lg\:pe-15 { @media (width >= 62rem) { padding-inline-end: calc(var(--spacing) * 15); } } .lg\:pb-6 { @media (width >= 62rem) { padding-bottom: calc(var(--spacing) * 6); } } .lg\:text-start { @media (width >= 62rem) { text-align: start; } } .lg\:text-4 { @media (width >= 62rem) { font-size: var(--text-4); } } .lg\:text-\[100px\] { @media (width >= 62rem) { font-size: 100px; } } .lg\:hover\:shadow-xl { @media (width >= 62rem) { &:hover { @media (hover: hover) { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } } .xl\:block { @media (width >= 75rem) { display: block; } } .xl\:max-h-139 { @media (width >= 75rem) { max-height: calc(var(--spacing) * 139); } } .xl\:w-281\.25 { @media (width >= 75rem) { width: calc(var(--spacing) * 281.25); } } .xl\:min-w-28 { @media (width >= 75rem) { min-width: calc(var(--spacing) * 28); } } .xl\:min-w-\[6\.25rem\] { @media (width >= 75rem) { min-width: 6.25rem; } } .xl\:grid-cols-4 { @media (width >= 75rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .xl\:px-0 { @media (width >= 75rem) { padding-inline: calc(var(--spacing) * 0); } } .\33 xl\:flex { @media (width >= 100rem) { display: flex; } } .\33 xl\:h-\[55vh\] { @media (width >= 100rem) { height: 55vh; } } .\33 xl\:items-center { @media (width >= 100rem) { align-items: center; } } .dark\:hidden { &:where(.dark, .dark *) { display: none; } } .dark\:border-0 { &:where(.dark, .dark *) { border-style: var(--tw-border-style); border-width: 0px; } } .dark\:border-none { &:where(.dark, .dark *) { --tw-border-style: none; border-style: none; } } .dark\:border-dark { &:where(.dark, .dark *) { border-color: var(--color-dark); } } .dark\:border-darker { &:where(.dark, .dark *) { border-color: var(--color-darker); } } .dark\:border-grey-50\/10 { &:where(.dark, .dark *) { border-color: color-mix(in srgb, #F6F7F8 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-grey-50) 10%, transparent); } } } .dark\:border-grey-500 { &:where(.dark, .dark *) { border-color: var(--color-grey-500); } } .dark\:border-white { &:where(.dark, .dark *) { border-color: var(--color-white); } } .dark\:bg-dark { &:where(.dark, .dark *) { background-color: var(--color-dark); } } .dark\:bg-darker { &:where(.dark, .dark *) { background-color: var(--color-darker); } } .dark\:bg-transparent { &:where(.dark, .dark *) { background-color: transparent; } } .dark\:bg-yellow-600 { &:where(.dark, .dark *) { background-color: var(--color-yellow-600); } } .dark\:bg-\[url\(\'\'\)\] { &:where(.dark, .dark *) { background-image: url(''); } } .dark\:text-darker { &:where(.dark, .dark *) { color: var(--color-darker); } } .dark\:text-white { &:where(.dark, .dark *) { color: var(--color-white); } } .dark\:text-yellow-600 { &:where(.dark, .dark *) { color: var(--color-yellow-600); } } .dark\:placeholder\:text-white\/75 { &:where(.dark, .dark *) { &::placeholder { color: color-mix(in srgb, #FFFFFF 75%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 75%, transparent); } } } } .dark\:hover\:bg-blue-600 { &:where(.dark, .dark *) { &:hover { @media (hover: hover) { background-color: var(--color-blue-600); } } } } .dark\:hover\:bg-green-50 { &:where(.dark, .dark *) { &:hover { @media (hover: hover) { background-color: var(--color-green-50); } } } } .dark\:hover\:text-green-500 { &:where(.dark, .dark *) { &:hover { @media (hover: hover) { color: var(--color-green-500); } } } } } html { scroll-behavior: smooth; scroll-padding-block: 8rem; } body { font-family: var(--font-overpass); color: var(--color-grey-500); font-optical-sizing: auto; font-weight: 300; font-style: normal; box-sizing: border-box; min-width: 375px !important; font-size: 16px; overflow-x: hidden; scroll-behavior: smooth; line-height: 1.25; size-adjust: 102%; &:where(.dark, .dark *) { --tw-font-weight: var(--font-weight-extralight); font-weight: var(--font-weight-extralight); } } * { box-sizing: border-box; font-variant-numeric: lining-nums; -moz-font-feature-settings: "lnum" 1; -moz-font-feature-settings: "lnum=1"; -ms-font-feature-settings: "lnum" 1; -o-font-feature-settings: "lnum" 1; -webkit-font-feature-settings: "lnum" 1; font-feature-settings: "lnum" 1; } b, strong { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); &:where(.dark, .dark *) { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } } button { &:hover { cursor: pointer; } } @keyframes load { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes skeleton { from { background-position: -200% 0; } to { background-position: 200% 0; } } @keyframes tabs { from { opacity: 0; } to { opacity: 1; } } @layer components { .container-custom { margin: auto; width: 100%; padding-inline: calc(var(--spacing) * 4); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; @media (min-width: 576px) { max-width: calc(var(--spacing) * 135); } @media (min-width: 768px) { max-width: calc(var(--spacing) * 180); } @media (min-width: 992px) { max-width: calc(var(--spacing) * 240); } @media (min-width: 1200px) { max-width: calc(var(--spacing) * 281.25); padding-inline: calc(var(--spacing) * 0); } } .espaciado { padding-block: calc(var(--spacing) * 8.75); @media (width >= 62rem) { padding-block: calc(var(--spacing) * 17.5); } } } .disabled { cursor: not-allowed; pointer-events: none; user-select: none; } @layer components { .lazy { --tw-translate-y: calc(var(--spacing) * 20); translate: var(--tw-translate-x) var(--tw-translate-y); opacity: 0%; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 500ms; transition-duration: 500ms; &.active { --tw-translate-y: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); opacity: 100%; } } } @layer components { .skeleton { position: relative; background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%); background-size: 200% 100%; animation: skeleton 1.5s infinite; border-radius: 4px; & * { opacity: 0; visibility: hidden !important; } &:after, &:before { opacity: 0; visibility: hidden !important; } } } select { appearance: none; min-width: 5rem; } select:focus { outline: none; } select:not([size]) { -webkit-print-color-adjust: exact; print-color-adjust: exact; background-image: url(https://cdn3.bci.cl/uploads/b3f91bb4-a221-4b3d-b5f9-b8952d6c711f/original/arrow-down.svg); background-position: right; background-repeat: no-repeat; background-size: 1.25rem 1.25rem; padding-right: 1.5rem; } .material-symbols-rounded { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .material-symbols-rounded.fill { font-variation-settings: 'FILL' 1; } .material-symbols-rounded.grad { font-variation-settings: 'GRAD' 200,; } @layer components { header { position: sticky; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); z-index: 4; width: 100%; min-width: calc(var(--spacing) * 93.75); overflow-x: hidden; background-color: var(--color-white); &:where(.dark, .dark *) { background-color: var(--color-darker); } & .spaceLeft { display: none; flex: 1; padding: calc(var(--spacing) * 2); @media (width >= 62rem) { display: block; } } & .spaceRight { display: none; flex: 1; @media (width >= 62rem) { display: block; } } & .header-top { position: relative; z-index: 5; display: flex; height: calc(var(--spacing) * 8.75); justify-content: space-between; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-grey-200); background-color: var(--color-grey-500); &:where(.dark, .dark *) { border-color: var(--color-darker); } & .header-top-center { width: 100%; padding-inline: calc(var(--spacing) * 4); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; @media (width >= 75rem) { max-width: calc(var(--spacing) * 281.25); } @media (width >= 75rem) { padding-inline: calc(var(--spacing) * 0); } & div { display: flex; height: 100%; width: 100%; align-items: center; justify-content: flex-end; & button { display: flex; height: calc(var(--spacing) * 8.75); align-items: center; gap: calc(var(--spacing) * 1); padding-inline: calc(var(--spacing) * 2); font-size: var(--text-8); color: var(--color-white); text-transform: uppercase; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; &:hover { @media (hover: hover) { cursor: pointer; } } &:hover { @media (hover: hover) { background-color: var(--color-white); } } &:hover { @media (hover: hover) { color: var(--color-grey-600); } } &:hover { & img { --tw-invert: invert(100%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } } & img { margin-top: calc(var(--spacing) * -0.5); height: calc(var(--spacing) * 5.25); width: calc(var(--spacing) * 5.25); } } } } } & .header-bottom { position: relative; z-index: 5; display: flex; min-height: calc(var(--spacing) * 15); width: 100%; align-items: center; justify-content: space-between; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-grey-200); background-color: var(--color-white); padding-inline: calc(var(--spacing) * 4); @media (width >= 75rem) { min-height: calc(var(--spacing) * 17.5); } @media (width >= 75rem) { padding-inline: calc(var(--spacing) * 0); } &:where(.dark, .dark *) { border-color: var(--color-dark); } &:where(.dark, .dark *) { background-color: var(--color-darker); } & .header-bottom-center { display: flex; height: 100%; width: 100%; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 3); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; @media (width >= 75rem) { width: calc(var(--spacing) * 281.25); } @media (width >= 75rem) { flex-wrap: nowrap; } @media (width >= 75rem) { border-right-style: var(--tw-border-style); border-right-width: 1px; } @media (width >= 75rem) { border-color: var(--color-grey-100); } @media (width >= 75rem) { padding-right: calc(var(--spacing) * 4); } &:where(.dark, .dark *) { border-color: var(--color-dark); } &>div:first-child { display: flex; height: 100%; flex: 1; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 4); @media (width >= 75rem) { flex: auto; } &>div { display: flex; height: 100%; min-height: calc(var(--spacing) * 15); align-items: center; justify-content: flex-start; gap: calc(var(--spacing) * 6); @media (width >= 75rem) { min-height: calc(var(--spacing) * 17.5); } & nav { display: none; height: 100%; @media (width >= 75rem) { display: block; } & ul { position: relative; display: flex; height: 100%; min-height: calc(var(--spacing) * 17.5); align-items: stretch; gap: calc(var(--spacing) * 3); &:where(.dark, .dark *) { color: var(--color-white); } & li { position: relative; text-align: center; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; & a { display: flex; height: 100%; align-items: center; color: var(--color-grey-400); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; &:where(.dark, .dark *) { color: color-mix(in srgb, #FFFFFF 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 80%, transparent); } } } &:before { position: absolute; bottom: calc(var(--spacing) * 0); left: 50%; height: calc(var(--spacing) * 1); width: calc(var(--spacing) * 0); border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-content: ''; content: var(--tw-content); } &.active { &:before { left: calc(var(--spacing) * 0); width: 100%; background-color: var(--color-blue-600); } } &:hover { & a { color: var(--color-grey-600); &:where(.dark, .dark *) { color: var(--color-white); } } } } } } } } &>div:last-child { display: flex; min-width: calc(var(--spacing) * 0); align-items: center; justify-content: flex-end; @media (width >= 48rem) { gap: calc(var(--spacing) * 3); } @media (width >= 75rem) { display: none; } @media (width >= 75rem) { flex: 1; } @media (width >= 75rem) { padding-inline: calc(var(--spacing) * 4); } & .btnSearch { display: flex; height: 100%; width: 100%; align-items: center; justify-content: center; gap: calc(var(--spacing) * 1); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); color: var(--color-grey-400); text-transform: uppercase; &:hover { @media (hover: hover) { cursor: pointer; } } @media (width >= 75rem) { justify-content: flex-start; } & span:first-child { font-size: 2rem !important; height: calc(var(--spacing) * 8); width: calc(var(--spacing) * 8); color: var(--color-blue-500); &:where(.dark, .dark *) { color: var(--color-white); } } } & .btnMenu { display: flex; align-items: center; justify-content: center; padding: calc(var(--spacing) * 1); color: var(--color-red-500); &:hover { @media (hover: hover) { cursor: pointer; } } @media (width >= 48rem) { padding-inline: calc(var(--spacing) * 2); } @media (width >= 75rem) { display: none; } } } } & .ctnBtnsDesktop { display: none; @media (width >= 48rem) { gap: calc(var(--spacing) * 3); } @media (width >= 75rem) { display: flex; } @media (width >= 75rem) { align-items: center; } @media (width >= 75rem) { justify-content: flex-end; } @media (width >= 75rem) { padding-inline: calc(var(--spacing) * 2); } &:where(.dark, .dark *) { border-color: var(--color-darker); } & .btnSearch { display: flex; height: 100%; width: 100%; align-items: center; justify-content: center; gap: calc(var(--spacing) * 1); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); color: var(--color-grey-400); text-transform: uppercase; &:hover { @media (hover: hover) { cursor: pointer; } } @media (width >= 75rem) { justify-content: flex-start; } &:where(.dark, .dark *) { color: var(--color-white); } & span:first-child { font-size: 1.75rem !important; height: calc(var(--spacing) * 8); width: calc(var(--spacing) * 8); color: var(--color-blue-500); &:where(.dark, .dark *) { color: var(--color-white); } } } } } & .ctnBuscador { pointer-events: none; visibility: hidden; position: fixed; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); z-index: 9999; height: 100%; width: 100%; background-color: color-mix(in srgb, #232323 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-dark) 50%, transparent); } opacity: 0%; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; &.active { pointer-events: auto; visibility: visible; opacity: 100%; &:last-child { --tw-translate-y: calc(var(--spacing) * -20); translate: var(--tw-translate-x) var(--tw-translate-y); opacity: 0%; } } & .ctnBuscador-one { position: relative; z-index: 2; width: 100%; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-grey-200); background-color: var(--color-white); &:where(.dark, .dark *) { border-color: var(--color-dark); } &:where(.dark, .dark *) { background-color: var(--color-darker); } & > div { display: flex; flex-direction: column; padding-inline: calc(var(--spacing) * 4); @media (width >= 36rem) { padding-inline: calc(var(--spacing) * 8); } @media (width >= 48rem) { margin: auto; } @media (width >= 48rem) { width: calc(var(--spacing) * 184); } @media (width >= 62rem) { width: calc(var(--spacing) * 240); } @media (width >= 75rem) { width: calc(var(--spacing) * 292); } & > div:first-child { display: flex; height: calc(var(--spacing) * 18); align-items: center; justify-content: flex-start; gap: calc(var(--spacing) * 4); @media (width >= 48rem) { height: calc(var(--spacing) * 22.5); } @media (width >= 48rem) { gap: calc(var(--spacing) * 8); } } } } & .ctnBuscador-two { position: relative; z-index: 1; height: 100%; width: 100%; overflow-y: auto; background-color: var(--color-white); padding: calc(var(--spacing) * 4); --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); @media (width >= 36rem) { border-bottom-right-radius: 0.625rem; border-bottom-left-radius: 0.625rem; } @media (width >= 36rem) { padding: calc(var(--spacing) * 8); } @media (width >= 48rem) { margin: auto; } @media (width >= 48rem) { height: auto; } @media (width >= 48rem) { min-height: calc(var(--spacing) * 90); } @media (width >= 48rem) { width: calc(var(--spacing) * 184); } @media (width >= 62rem) { width: calc(var(--spacing) * 240); } @media (width >= 75rem) { width: calc(var(--spacing) * 292); } &:where(.dark, .dark *) { background-color: var(--color-darker); } & > div:first-child { & > p { margin-bottom: calc(var(--spacing) * 8); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); &:where(.dark, .dark *) { color: var(--color-white); } } & ul { display: flex; flex-direction: column; gap: calc(var(--spacing) * 4); color: var(--color-blue-600); @media (width >= 48rem) { gap: calc(var(--spacing) * 6); } @media (width >= 48rem) { padding-inline: calc(var(--spacing) * 6); } &:where(.dark, .dark *) { color: var(--color-white); } & li { & a { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; &:hover { @media (hover: hover) { text-decoration-line: underline; } } } } } } & > div:last-child { margin-top: calc(var(--spacing) * 8); @media (width >= 48rem) { margin-left: calc(var(--spacing) * 6); } } } } & .menusDePago { pointer-events: none; visibility: hidden; position: fixed; height: 100vh; width: 100%; --tw-translate-y: calc(var(--spacing) * -10); translate: var(--tw-translate-x) var(--tw-translate-y); background-color: color-mix(in srgb, #232323 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-dark) 50%, transparent); } padding-bottom: calc(var(--spacing) * 25); opacity: 0%; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); @media (width >= 48rem) { padding-bottom: calc(var(--spacing) * 0); } &.active { pointer-events: auto; visibility: visible; z-index: 5; --tw-translate-y: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); opacity: 100%; } & .menusDePago-one { height: 100%; overflow-y: auto; background-color: var(--color-blue-25); padding-bottom: calc(var(--spacing) * 10); @media (width >= 48rem) { height: auto; } &:where(.dark, .dark *) { background-color: var(--color-darker); } &:where(.dark, .dark *) { color: var(--color-white); } & > div { & > div:first-child { display: flex; min-height: calc(var(--spacing) * 16.75); align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2); } & > div:last-child { display: flex; flex-direction: column; gap: calc(var(--spacing) * 10); border-radius: 1.25rem; @media (width >= 48rem) { background-color: var(--color-white); } @media (width >= 48rem) { padding: calc(var(--spacing) * 8); } @media (width >= 48rem) { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } @media (width >= 48rem) { &:where(.dark, .dark *) { background-color: var(--color-dark); } } @media (width >= 48rem) { &:where(.dark, .dark *) { color: var(--color-white); } } & > div:first-child { margin: auto; display: flex; width: 100%; max-width: calc(var(--spacing) * 181.25); flex-direction: column; gap: calc(var(--spacing) * 4); border-radius: var(--radius-2xl); background-color: var(--color-white); padding: calc(var(--spacing) * 6); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @media (width >= 48rem) { flex-direction: row; } @media (width >= 48rem) { border-radius: 0; } @media (width >= 48rem) { background-color: transparent; } @media (width >= 48rem) { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } &:where(.dark, .dark *) { background-color: var(--color-dark); } &:where(.dark, .dark *) { color: var(--color-white); } } } } } } & .menuMobile { visibility: hidden; position: fixed; z-index: 4; height: 100vh; width: 100%; opacity: 0%; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); @media (width >= 75rem) { display: none; } &.active { visibility: visible; opacity: 100%; } & > div:first-child { height: 100%; width: 100%; background-color: color-mix(in srgb, #232323 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-dark) 50%, transparent); } } & > div:last-child { position: absolute; top: calc(var(--spacing) * 0); right: calc(var(--spacing) * 0); z-index: 2; height: 100%; width: 100%; background-color: var(--color-white); padding: calc(var(--spacing) * 4); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); @media (width >= 48rem) { max-width: calc(var(--spacing) * 100); } @media (width >= 48rem) { padding: calc(var(--spacing) * 8); } &:where(.dark, .dark *) { background-color: var(--color-darker); } & .menuMobile-title { margin-bottom: calc(var(--spacing) * 5); border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-grey-100); padding-bottom: calc(var(--spacing) * 3); & p { font-size: var(--text-4); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); color: var(--color-blue-600); &:where(.dark, .dark *) { color: var(--color-white); } } } & nav { & ul { display: flex; flex-direction: column; gap: calc(var(--spacing) * 6); & li { & a { &:where(.dark, .dark *) { color: var(--color-white); } } } } } } } } } @layer components { .btnBci { display: inline-flex; height: calc(var(--spacing) * 9.5); min-width: calc(var(--spacing) * 25); align-items: center; justify-content: center; border-radius: 3.125rem; padding: .15rem 1.375rem 0 1.375rem; font-size: var(--text-7); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); white-space: nowrap; text-transform: uppercase; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); &:hover { @media (hover: hover) { cursor: pointer; } } &.medium { height: calc(var(--spacing) * 12); } &.large { height: calc(var(--spacing) * 14); } &.primary { &.green { background-color: var(--color-green-500); color: var(--color-white); &:hover { @media (hover: hover) { background-color: var(--color-green-400); } } &:active { background-color: var(--color-green-300); } } &.blue { background-color: var(--color-blue-500); color: var(--color-white); &:hover { @media (hover: hover) { background-color: var(--color-blue-400); } } &:active { background-color: var(--color-blue-300); } } &.red { background-color: var(--color-red-500); color: var(--color-white); &:hover { @media (hover: hover) { background-color: var(--color-red-400); } } &:active { background-color: var(--color-red-300); } } &.yellow { background-color: var(--color-yellow-500); color: var(--color-dark); &:hover { @media (hover: hover) { background-color: var(--color-yellow-400); } } &:active { background-color: var(--color-yellow-300); } } &.green.loading:before, &.blue.loading:before, &.red.loading:before { filter: var(--filter-white); } &.yellow.loading:before { filter: var(--filter-dark); } } &.secundary { &.green { border-style: var(--tw-border-style); border-width: 2px; border-color: var(--color-green-500); background-color: var(--color-white); color: var(--color-green-500); &:hover { @media (hover: hover) { background-color: var(--color-green-100); } } &:active { background-color: var(--color-green-500); } &:active { color: var(--color-white); } &:where(.dark, .dark *) { background-color: var(--color-dark); } &:where(.dark, .dark *) { color: var(--color-white); } &:where(.dark, .dark *) { &:hover { @media (hover: hover) { background-color: var(--color-green-200); } } } &:where(.dark, .dark *) { &:hover { @media (hover: hover) { color: var(--color-darker); } } } &.loading:before { filter: var(--filter-green); } } &.blue { border-style: var(--tw-border-style); border-width: 2px; border-color: var(--color-blue-500); background-color: var(--color-white); color: var(--color-blue-500); &:hover { @media (hover: hover) { background-color: var(--color-blue-100); } } &:active { background-color: var(--color-blue-500); } &:active { color: var(--color-white); } &.loading:before { filter: var(--filter-blue); } } &.red { border-style: var(--tw-border-style); border-width: 2px; border-color: var(--color-red-500); background-color: var(--color-white); color: var(--color-red-500); &:hover { @media (hover: hover) { background-color: var(--color-red-100); } } &:active { background-color: var(--color-red-500); } &:active { color: var(--color-white); } &.loading:before { filter: var(--filter-red); } } &.yellow { border-style: var(--tw-border-style); border-width: 2px; border-color: var(--color-yellow-500); background-color: var(--color-white); color: var(--color-dark); &:hover { @media (hover: hover) { background-color: var(--color-yellow-100); } } &:active { background-color: var(--color-yellow-500); } &:active { color: var(--color-white); } &.loading:before { filter: var(--filter-dark); } } &.grey { border-style: var(--tw-border-style); border-width: 2px; border-color: var(--color-grey-500); background-color: var(--color-white); color: var(--color-grey-500); &:hover { @media (hover: hover) { background-color: var(--color-grey-200); } } &:active { background-color: var(--color-grey-500); } &:active { color: var(--color-white); } } } &.loading { position: relative; cursor: not-allowed; pointer-events: none; user-select: none; color: transparent !important; overflow: hidden; &:before { position: absolute; top: 0; left: 0; content: ""; background-image: url(https://cdn3.bci.cl/uploads/47f5f110-986f-47e6-a8a7-21883076cf2b/original/loading.svg); background-position: center; background-repeat: no-repeat; background-size: 1.5rem; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; animation: load 2s linear infinite; } } &.disabled { cursor: not-allowed; pointer-events: none; user-select: none; &.primary { background-color: var(--color-grey-200); color: var(--color-grey-300); } &.secundary { border-color: var(--color-grey-200); color: var(--color-grey-300); } } } .btnLinks { display: inline-flex; height: calc(var(--spacing) * 9.5); min-width: calc(var(--spacing) * 25); cursor: pointer; justify-content: center; gap: calc(var(--spacing) * 1); border-radius: 50px; padding-block: calc(var(--spacing) * 2); padding-right: calc(var(--spacing) * 2.5); padding-left: calc(var(--spacing) * 4); font-size: var(--text-7); --tw-leading: var(--leading-tight); line-height: var(--leading-tight); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); white-space: nowrap; color: var(--color-blue-500); text-transform: uppercase; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); &:hover { @media (hover: hover) { background-color: var(--color-blue-100); } } &:where(.dark, .dark *) { color: var(--color-yellow-600); } &:where(.dark, .dark *) { &:hover { @media (hover: hover) { background-color: var(--color-yellow-50); } } } & .linkIcon { margin-top: calc(var(--spacing) * -0.5); height: calc(var(--spacing) * 6); width: calc(var(--spacing) * 6); font-size: var(--text-4); } &.reverse { flex-direction: row-reverse; padding-right: calc(var(--spacing) * 4); padding-left: calc(var(--spacing) * 2.5); } &.disabled { cursor: not-allowed; pointer-events: none; user-select: none; color: var(--color-grey-300); & img { filter: grayscale(100%); opacity: .2; } } } } @layer components { .titulos { position: relative; display: flex; flex-direction: column; gap: calc(var(--spacing) * 2); text-align: start; & .titulos_title { margin-top: calc(var(--spacing) * 6); font-size: var(--text-2); color: var(--color-grey-600); &:where(.dark, .dark *) { color: var(--color-white); } } & .titulos_bajada { font-size: var(--text-5); color: var(--color-grey-400); &:where(.dark, .dark *) { color: var(--color-white); } } &::before { content: ""; background-image: url(https://cdn3.bci.cl/uploads/48665b5d-e776-43b4-9758-2931ba65ecf5/original/figuras_bci.svg); background-size: contain; background-position: center; background-repeat: no-repeat; position: absolute; top: calc(var(--spacing) * 0); height: calc(var(--spacing) * 2.75); width: calc(var(--spacing) * 18); } &.center { text-align: center; &::before { left: 50%; margin-left: calc(var(--spacing) * -8.75); } } &.titulos--center-mobile { text-align: center; @media (width >= 48rem) { text-align: start; } &::before { left: 50%; margin-left: calc(var(--spacing) * -8.75); @media (width >= 48rem) { left: calc(var(--spacing) * 0); } @media (width >= 48rem) { margin-left: calc(var(--spacing) * 0); } } } } } @layer components { .listas { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--spacing) * 3); text-align: start; &.check { & li { display: flex; gap: calc(var(--spacing) * 1.5); &::before { content: ""; flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: -2px; background-image: url('https://cdn3.bci.cl/uploads/9d4a9c75-ed14-4b16-aff8-86404f9a8b73/original/check-circle.svg'); background-position: center; background-repeat: no-repeat; background-size: contain; filter: var(--filter-grey); } } &.green { & li::before { filter: var(--filter-green); } } &.blue { & li::before { filter: var(--filter-blue); } } &.red { & li::before { filter: var(--filter-red); } } &.yellow { & li::before { filter: var(--filter-yellow); } } &.filled { & li::before { background-image: url('https://cdn3.bci.cl/uploads/6b38f165-63d4-43ed-97fe-eaece4111970/original/check-icon-green-normaliza.svg'); filter: none; } } } &.personalizado { list-style-type: none; & li { display: flex; align-items: flex-start; gap: calc(var(--spacing) * 3); & img { margin-top: -1px; } } } } ul.listas:not(.check) { list-style: disc; } ol.listas:not(.check) { list-style: decimal; } } @layer components { .form-group { position: relative; display: flex; width: 100%; flex-direction: column; gap: calc(var(--spacing) * 1); text-align: start; & label { position: absolute; top: calc(var(--spacing) * -2); left: calc(var(--spacing) * 3); z-index: 2; background-color: var(--color-white); padding-right: calc(var(--spacing) * 3); padding-left: calc(var(--spacing) * 1); font-size: var(--text-7); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); color: var(--color-grey-500); &:where(.dark, .dark *) { background-color: var(--color-darker); } &:where(.dark, .dark *) { color: var(--color-white); } &.obligatorio { &:before { content: "*"; color: var(--color-red-500); width: 10px; height: 10px; padding-right: 2px; } } } & input, & textarea { height: calc(var(--spacing) * 12.5); width: 100%; border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-grey-300); background-color: var(--color-white); padding-inline: calc(var(--spacing) * 4); padding-top: calc(var(--spacing) * 1); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-outline-style: none; outline-style: none; &:focus { border-color: transparent; } &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } &:focus { --tw-ring-color: var(--color-blue-600); } &:where(.dark, .dark *) { border-color: color-mix(in srgb, #F6F7F8 35%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-grey-50) 35%, transparent); } } &:where(.dark, .dark *) { background-color: transparent; } &:where(.dark, .dark *) { color: var(--color-white); } &:where(.dark, .dark *) { &::placeholder { color: color-mix(in srgb, #F6F7F8 50%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-grey-50) 50%, transparent); } } } &[type="file"] { z-index: 3; } } & textarea { &:not(.no-resize) { max-height: calc(var(--spacing) * 75); min-height: calc(var(--spacing) * 30); resize: vertical; } height: calc(var(--spacing) * 30); resize: none; padding: calc(var(--spacing) * 3); } & .form-group-caracteres { padding-top: calc(var(--spacing) * 0.5); & p { font-size: var(--text-7); color: var(--color-grey-400); &:where(.dark, .dark *) { color: var(--color-white); } } } & .msjError { visibility: hidden; font-size: var(--text-7); color: var(--color-red-500); &:where(.dark, .dark *) { color: var(--color-white); } } &.error { & input, & textarea { border-color: transparent; --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--color-red-500); } & .msjError { visibility: visible; } } &.success { & input, & textarea { border-color: transparent; --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--color-green-500); } } &.money { & input { padding-left: calc(var(--spacing) * 8); } & .symbol { position: absolute; top: calc(var(--spacing) * 4.25); left: calc(var(--spacing) * 3.5); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-blue-500); } } &.tel { & input { padding-left: calc(var(--spacing) * 15); } & .symbol { position: absolute; top: calc(var(--spacing) * 4.25); left: calc(var(--spacing) * 3.5); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-blue-500); } } &.file { & button { position: absolute; z-index: 1; height: calc(var(--spacing) * 12.5); width: 100%; border-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-grey-300); padding-inline: calc(var(--spacing) * 4); padding-top: calc(var(--spacing) * 1); text-align: start; color: var(--color-grey-400); --tw-outline-style: none; outline-style: none; &:focus { border-color: transparent; } &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } &:focus { --tw-ring-color: var(--color-blue-600); } } &.error { & button { border-color: transparent; --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--color-red-500); } } &.success { & button { border-color: transparent; --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color: var(--color-green-500); } } & input { cursor: pointer; opacity: 0%; } & .symbol { position: absolute; top: calc(var(--spacing) * 3.25); right: calc(var(--spacing) * 3.5); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-blue-500); } } &.selects { position: relative; & input[readonly] { cursor: pointer; caret-color: transparent; &:focus { border-style: var(--tw-border-style); border-width: 1px; } &:focus { border-color: var(--color-grey-300); } &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } &:after { content: ""; width: 26px; height: 26px; background-image: url(https://cdn3.bci.cl/uploads/0991c5e3-c8cb-41df-8d4d-9e2bb58ea396/original/keyboard-blue.svg); background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; top: calc(var(--spacing) * 3); right: calc(var(--spacing) * 4); z-index: 2; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; } & ul { visibility: hidden; position: absolute; top: calc(var(--spacing) * 12); z-index: 3; max-height: calc(var(--spacing) * 60); width: 100%; overflow: auto; border-bottom-right-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-grey-300); background-color: var(--color-white); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); & li { position: relative; padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 3); &:hover { @media (hover: hover) { cursor: pointer; } } &:hover { @media (hover: hover) { background-color: var(--color-grey-50); } } &.selected { background-color: var(--color-blue-50); } } } &.activeSelect { & input { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } & ul { visibility: visible; } &:after { rotate: 180deg; } } &.multi { & ul { & li { position: relative; display: flex; align-items: center; gap: calc(var(--spacing) * 2); &:before { content: ""; width: 20px; height: 20px; background-image: url(https://cdn3.bci.cl/uploads/960ab7d9-8383-4cf4-9de6-4852605d59e6/original/checkbox-outline.svg); background-position: center; background-repeat: no-repeat; background-size: contain; filter: var(--filter-grey); margin-top: -2px; } &.selected { background-color: var(--color-blue-50); &:before { background-image: url(https://cdn3.bci.cl/uploads/b05d8b61-6c3d-4af4-ba79-7901c3482a9a/original/checkbox-checked.svg); filter: var(--filter-blue); } } } } } } } .form-check { display: flex; align-items: center; gap: calc(var(--spacing) * 4); text-align: start; & input[type="checkbox"] { appearance: none; width: 24px; height: 24px; flex-shrink: 0; margin-top: 0; border: 1px solid #BBC5CA; border-radius: 5px; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: 14px; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; &:checked { border-color: var(--color-blue-600); background-color: var(--color-blue-600); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } &:focus-visible { outline: 2px solid var(--color-blue-600); outline-offset: 2px; border-radius: 5px; } } & span { padding-top: calc(var(--spacing) * 1); font-size: var(--text-7); --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); color: var(--color-grey-500); &:where(.dark, .dark *) { color: var(--color-white); } } & label { cursor: pointer; } & a { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-blue-500); &:hover { @media (hover: hover) { text-decoration-line: underline; } } } &.error span { color: var(--color-red-500); } } } @layer components { .card-soluciones { display: flex; height: 100%; width: 100%; gap: calc(var(--spacing) * 4); overflow: hidden; border-radius: 1.25rem; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-grey-100); background-color: var(--color-white); padding: calc(var(--spacing) * 4); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; &:hover { @media (hover: hover) { --tw-scale-x: 103%; --tw-scale-y: 103%; --tw-scale-z: 103%; scale: var(--tw-scale-x) var(--tw-scale-y); } } &:hover { @media (hover: hover) { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } &:where(.dark, .dark *) { border-style: var(--tw-border-style); border-width: 0px; } &:where(.dark, .dark *) { background-color: var(--color-darker); } @media screen and (max-width: 640px) { flex-direction: column; } & .card-image { height: calc(var(--spacing) * 50); width: calc(var(--spacing) * 40); min-width: calc(var(--spacing) * 40); flex-shrink: 1; overflow: hidden; border-radius: var(--radius-2xl); @media screen and (max-width: 640px) { width: 100%; } & img { height: 100%; width: 100%; object-fit: cover; } } & .card-contenido { display: flex; width: 100%; flex-shrink: 1; flex-direction: column; justify-content: space-between; } & .card-body { width: 100%; padding-right: calc(var(--spacing) * 3); display: flex; height: 100%; flex-direction: column; justify-content: center; & .card-title { margin-bottom: calc(var(--spacing) * 4); font-size: var(--text-3); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); color: var(--color-grey-500); &:where(.dark, .dark *) { color: var(--color-white); } } & .card-bajada { color: var(--color-grey-400); &:where(.dark, .dark *) { color: var(--color-white); } } } & .card-footer { text-align: end; & .btnLinks { &:where(.dark, .dark *) { color: var(--color-yellow-600); } &:where(.dark, .dark *) { &:hover { @media (hover: hover) { color: var(--color-darker); } } } } } } .card-contacto { position: relative; display: flex; height: 100%; border-radius: 1.25rem; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-grey-100); background-color: var(--color-white); padding: calc(var(--spacing) * 12.5); padding-bottom: calc(var(--spacing) * 8); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; &:hover { @media (hover: hover) { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } &:where(.dark, .dark *) { border-color: var(--color-darker); } &:where(.dark, .dark *) { background-color: var(--color-darker); } & .card-image { position: absolute; top: calc(var(--spacing) * -6); left: calc(var(--spacing) * 10); height: calc(var(--spacing) * 12); width: calc(var(--spacing) * 12); overflow: hidden; border-radius: 100%; & img { height: 100%; width: 100%; object-fit: cover; } } & .card-contenido { display: flex; width: 100%; flex-direction: column; justify-content: space-between; gap: calc(var(--spacing) * 4); & .card-body { width: 100%; @media (width >= 48rem) { padding-right: calc(var(--spacing) * 3); } & .card-title { margin-bottom: calc(var(--spacing) * 4); text-align: start; font-size: var(--text-3); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); color: var(--color-grey-500); &:where(.dark, .dark *) { color: var(--color-white); } } & .card-bajada { font-size: var(--text-7); color: var(--color-grey-400); &:where(.dark, .dark *) { color: var(--color-white); } } } } & .card-footer { text-align: end; & .btnLinks { &:where(.dark, .dark *) { color: var(--color-yellow-600); } &:where(.dark, .dark *) { &:hover { @media (hover: hover) { color: var(--color-darker); } } } } } &.minify { & .card-image { left: calc(50% - 1.5rem); @media (width >= 48rem) { left: calc(var(--spacing) * 12.5); } @media (width >= 48rem) { height: calc(var(--spacing) * 12); } & img { height: 100%; width: 100%; object-fit: cover; } } & .card-contenido { & .card-body { & .card-title { text-align: center; @media (width >= 48rem) { margin-bottom: calc(var(--spacing) * 4); } @media (width >= 48rem) { text-align: start; } @media (width >= 48rem) { font-size: var(--text-3); } } & .card-bajada { display: none; @media (width >= 48rem) { display: block; } } } } & .card-footer { text-align: center; @media (width >= 48rem) { text-align: end; } & .btnLinks { &:where(.dark, .dark *) { color: var(--color-yellow-600); } &:where(.dark, .dark *) { &:hover { @media (hover: hover) { color: var(--color-darker); } } } } } } } .card-alternativas-de-pago { display: flex; height: 100%; flex-direction: column; gap: calc(var(--spacing) * 4); border-radius: 1.875rem; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-grey-100); background-color: var(--color-white); padding: calc(var(--spacing) * 4); &:where(.dark, .dark *) { border-color: var(--color-darker); } &:where(.dark, .dark *) { background-color: var(--color-darker); } & .card-head { position: relative; height: calc(var(--spacing) * 46.25); overflow: hidden; border-radius: 1.25rem; & .card-head-img { height: 100%; width: 100%; object-fit: cover; } & .card-head-icon { position: absolute; bottom: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); display: flex; height: calc(var(--spacing) * 16.25); width: calc(var(--spacing) * 16.25); align-items: center; justify-content: center; border-top-right-radius: .625rem; background-color: var(--color-white); padding: calc(var(--spacing) * 4); &:where(.dark, .dark *) { background-color: var(--color-darker); } & img { height: 100%; width: 100%; } } } & .card-body { margin-top: calc(var(--spacing) * 2); display: flex; flex: 1; flex-direction: column; gap: calc(var(--spacing) * 4); & .card-body-titles { & .card-title { font-size: var(--text-4); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); &:where(.dark, .dark *) { color: var(--color-white); } } & .card-subtitle { font-size: var(--text-5); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); &:where(.dark, .dark *) { color: var(--color-white); } } } & .card-body-text { color: var(--color-grey-400); &:where(.dark, .dark *) { color: color-mix(in srgb, #FFFFFF 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 80%, transparent); } } } } & .card-footer { padding-block: calc(var(--spacing) * 4); text-align: center; } } .card-canales { display: flex; flex-direction: column; border-radius: 1.25rem; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-grey-100); background-color: var(--color-white); padding-inline: calc(var(--spacing) * 7.5); padding-block: calc(var(--spacing) * 9); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; &:hover { @media (hover: hover) { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); } } @media (width >= 62rem) { &:hover { @media (hover: hover) { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } &:where(.dark, .dark *) { border-color: var(--color-darker); } &:where(.dark, .dark *) { background-color: var(--color-darker); } & .card-head { height: calc(var(--spacing) * 9); border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-grey-100); padding-bottom: calc(var(--spacing) * 2); & .card-title { font-size: var(--text-3); &:where(.dark, .dark *) { color: var(--color-white); } } } & .card-body { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: calc(var(--spacing) * 6); padding-top: calc(var(--spacing) * 6); &:where(.dark, .dark *) { color: var(--color-white); } & .card-body-btn { display: flex; justify-content: flex-end; & .btnBci { &:where(.dark, .dark *) { border-color: var(--color-green-500); } &:where(.dark, .dark *) { background-color: transparent; } &:where(.dark, .dark *) { color: var(--color-white); } &:where(.dark, .dark *) { &:hover { @media (hover: hover) { background-color: var(--color-green-100); } } } &:where(.dark, .dark *) { &:hover { @media (hover: hover) { color: var(--color-darker); } } } } } } } .card-pasos { height: 100%; width: 100%; border-radius: 1.25rem; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-grey-100); background-color: var(--color-white); padding: calc(var(--spacing) * 4); &:where(.dark, .dark *) { border-color: var(--color-darker); } &:where(.dark, .dark *) { background-color: var(--color-darker); } & .card-head { display: flex; align-items: flex-end; justify-content: space-between; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-grey-100); padding-bottom: calc(var(--spacing) * 6); &:where(.dark, .dark *) { border-color: var(--color-grey-500); } & .card-title { font-size: 22px; --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); color: var(--color-blue-600); &:where(.dark, .dark *) { color: var(--color-white); } } & .card-icono { display: flex; height: calc(var(--spacing) * 25); width: calc(var(--spacing) * 35); flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-xl); background-color: var(--color-blue-25); padding: calc(var(--spacing) * 3); @media (width >= 62rem) { height: calc(var(--spacing) * 20); } @media (width >= 62rem) { width: calc(var(--spacing) * 25); } @media (width >= 75rem) { height: calc(var(--spacing) * 25); } @media (width >= 75rem) { width: calc(var(--spacing) * 35); } &:where(.dark, .dark *) { background-color: var(--color-dark); } & img { height: 100%; width: auto; } } } & .card-body { padding-top: calc(var(--spacing) * 6); padding-bottom: calc(var(--spacing) * 3); & * { font-size: var(--text-7); &:where(.dark, .dark *) { color: var(--color-white); } } } } } @layer components { .necesitas-ayuda { position: relative; display: flex; height: calc(var(--spacing) * 44); width: 100%; max-width: calc(var(--spacing) * 135); gap: calc(var(--spacing) * 0); overflow: hidden; border-radius: 2.5rem; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-grey-100); background-color: var(--color-white); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; &:hover { @media (hover: hover) { --tw-scale-x: 103%; --tw-scale-y: 103%; --tw-scale-z: 103%; scale: var(--tw-scale-x) var(--tw-scale-y); } } &:hover { @media (hover: hover) { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } &:where(.dark, .dark *) { border-color: var(--color-darker); } &:where(.dark, .dark *) { background-color: var(--color-darker); } @media screen and (max-width: 640px) { height: auto; min-height: calc(var(--spacing) * 44); @media (width >= 48rem) { padding: calc(var(--spacing) * 4); } } @media screen and (max-width: 768px) { border-radius: 1.25rem; } & .necesitas-ayuda-image { height: 100%; width: calc(var(--spacing) * 30); overflow: hidden; border-radius: 1.25rem; @media (width >= 48rem) { height: calc(var(--spacing) * 44); } @media (width >= 48rem) { width: calc(var(--spacing) * 60); } @media (width >= 48rem) { min-width: calc(var(--spacing) * 60); } @media (width >= 48rem) { border-radius: 2.5rem; } & img { height: 100%; width: 100%; object-fit: cover; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 500ms; transition-duration: 500ms; } } & .necesitas-ayuda-texts { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--spacing) * 4); padding: calc(var(--spacing) * 8); text-align: center; & h2 { font-size: var(--text-4); &:where(.dark, .dark *) { color: var(--color-white); } } @media screen and (max-width: 768px) { padding: calc(var(--spacing) * 3); } } &:hover { & .necesitas-ayuda-image { & img { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); } } } } } @layer components { .medio-pago { position: relative; margin-bottom: calc(var(--spacing) * 1); display: flex; align-items: center; justify-content: center; border-radius: 1.25rem; text-align: center; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; @media (width >= 48rem) { margin-bottom: 16.5px; } @media (width >= 48rem) { border-style: var(--tw-border-style); border-width: 1px; } @media (width >= 48rem) { border-color: var(--color-grey-100); } @media (width >= 48rem) { background-color: var(--color-white); } @media (width >= 48rem) { padding-inline: calc(var(--spacing) * 8); } @media (width >= 48rem) { padding-block: calc(var(--spacing) * 10); } @media (width >= 48rem) { &:hover { @media (hover: hover) { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } @media (width >= 48rem) { &:where(.dark, .dark *) { border-color: var(--color-darker); } } @media (width >= 48rem) { &:where(.dark, .dark *) { background-color: var(--color-darker); } } & p { display: none; @media (width >= 48rem) { display: block; } } & .btnBci { width: calc(var(--spacing) * 42.5); @media (width >= 48rem) { position: absolute; } @media (width >= 48rem) { bottom: -16.5px; } @media (width >= 48rem) { width: auto; } } &:hover { & .btnBci { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; } } } } @layer components { .accordion { overflow: hidden; border-radius: 1.625rem; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-grey-100); background-color: var(--color-white); &:where(.dark, .dark *) { border-color: var(--color-darker); } & .accordion-element { overflow: hidden; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-grey-100); text-wrap: balance; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); &:last-child { --tw-border-style: none; border-style: none; } &:where(.dark, .dark *) { border-color: var(--color-dark); } &:where(.dark, .dark *) { background-color: var(--color-darker); } &:where(.dark, .dark *) { &:last-child { --tw-border-style: none; border-style: none; } } & > .accordion-head { display: flex; min-height: calc(var(--spacing) * 17.5); width: 100%; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 2); border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: transparent; padding-inline: calc(var(--spacing) * 6); padding-block: calc(var(--spacing) * 4); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; &:hover { @media (hover: hover) { cursor: pointer; } } &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #F6F7F8 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-grey-50) 50%, transparent); } } } &:where(.dark, .dark *) { background-color: var(--color-darker); } &:where(.dark, .dark *) { color: var(--color-white); } &:where(.dark, .dark *) { &:hover { @media (hover: hover) { background-color: var(--color-dark); } } } & > div { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 5); text-align: start; } &:after { content: ""; width: 26px; height: 26px; min-width: 26px; min-height: 26px; background-image: url(https://cdn3.bci.cl/uploads/0991c5e3-c8cb-41df-8d4d-9e2bb58ea396/original/keyboard-blue.svg); background-position: center; background-repeat: no-repeat; background-size: contain; filter: var(--filter-grey); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; } } & > .accordion-body { height: calc(var(--spacing) * 0); overflow: hidden; transition-property: height; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); &:where(.dark, .dark *) { color: var(--color-white); } & > div { padding-block: calc(var(--spacing) * 6); padding-inline-start: calc(var(--spacing) * 6); padding-right: calc(var(--spacing) * 16); } } &.active { & > .accordion-head { border-color: var(--color-grey-100); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); &:where(.dark, .dark *) { border-color: var(--color-dark); } &:where(.dark, .dark *) { background-color: var(--color-darker); } & .icon { filter: unset; opacity: 100%; } &:after { rotate: 180deg; } } } } &.accordion-embargo.icons { & .accordion-element .accordion-head .icon { opacity: 100%; filter: grayscale(1) brightness(1.45) contrast(0.88); } & .accordion-element.active .accordion-head .icon { opacity: 100%; filter: none; } } &.icons { & .accordion-element { & .accordion-head { & .icon { margin-top: calc(var(--spacing) * -0.5); height: calc(var(--spacing) * 5); min-height: calc(var(--spacing) * 5); width: calc(var(--spacing) * 5); min-width: calc(var(--spacing) * 5); flex-shrink: 0; font-size: var(--text-4); opacity: 35%; filter: brightness(0) saturate(100%) invert(35%) sepia(39%) saturate(299%) hue-rotate(154deg) brightness(103%) contrast(81%); } } & .accordion-body { & > div { padding-inline: calc(var(--spacing) * 8); @media (width >= 48rem) { padding-inline: calc(var(--spacing) * 16); } } } &.active { & .accordion-head { & .icon { opacity: 100%; filter: none; } } } } } &.flush { border-radius: 0; border-style: var(--tw-border-style); border-width: 0px; } &.borderless { border-radius: 0; border-style: var(--tw-border-style); border-width: 0px; & .accordion-element { --tw-border-style: none; border-style: none; & .accordion-head { border-radius: var(--radius-2xl); --tw-border-style: none; border-style: none; } &.active { & .accordion-head { background-color: var(--color-grey-100); } } } } &.multiple { & > .accordion-element { &.active { & > .accordion-head { background-color: var(--color-grey-50); } & > .accordion-body { height: auto; } } & > .accordion-body { & > div { padding: calc(var(--spacing) * 0); & .accordion { border-radius: 0; --tw-border-style: none; border-style: none; } } } } } } .tab-pane .accordion .accordion-head { @media (width >= 48rem) { padding-block: calc(var(--spacing) * 8); } } .dark { & .accordion { & .accordion-element { & .accordion-head { &:after { filter: var(--filter-white); } & .icon { margin-top: calc(var(--spacing) * -0.5); height: calc(var(--spacing) * 5); min-height: calc(var(--spacing) * 5); width: calc(var(--spacing) * 5); min-width: calc(var(--spacing) * 5); flex-shrink: 0; font-size: var(--text-4); opacity: 50%; filter: var(--filter-white) !important; } } &.active { & .icon { margin-top: calc(var(--spacing) * -0.5); height: calc(var(--spacing) * 5); min-height: calc(var(--spacing) * 5); width: calc(var(--spacing) * 5); min-width: calc(var(--spacing) * 5); flex-shrink: 0; font-size: var(--text-4); opacity: 100%; filter: unset !important; } } } } } } @layer components { .banners { margin-bottom: calc(var(--spacing) * 8); display: flex; flex-direction: column; gap: calc(var(--spacing) * 6); & .banner-contenido { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 6); & .contenido-text { display: flex; flex: 1; flex-direction: column; gap: calc(var(--spacing) * 4); padding-inline: calc(var(--spacing) * 6); @media (width >= 48rem) { padding-inline: calc(var(--spacing) * 0); } & .titulos { & .titulos_title { font-size: var(--text-1); color: var(--color-grey-500); &:where(.dark, .dark *) { color: var(--color-white); } } & .titulos_bajada { font-size: var(--text-5); color: var(--color-grey-500); @media (width >= 48rem) { font-size: var(--text-4); } &:where(.dark, .dark *) { color: color-mix(in srgb, #FFFFFF 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 80%, transparent); } } } } & .banner-botones { display: flex; gap: calc(var(--spacing) * 2); } } & .contenido-imagen { flex: 1; @media screen and (min-width: 1200px) { min-width: calc(var(--spacing) * 142.5); } & div { height: calc(var(--spacing) * 69.25); width: 100%; overflow: hidden; border-radius: 2.5rem; & img { height: 100%; width: 100%; object-fit: cover; } } } @media screen and (max-width: 768px) { flex-direction: column-reverse; align-items: flex-start; & .contenido-imagen { width: 100%; & div { height: calc(var(--spacing) * 38.75); width: 100%; border-radius: 1.25rem; } } & .contenido-text { justify-content: flex-start; padding-bottom: calc(var(--spacing) * 4); & .banner-botones { justify-content: center; } } } } } .banners-two { position: relative; height: 100%; min-height: calc(var(--spacing) * 62.5); width: 100%; @media (width >= 48rem) { height: calc(var(--spacing) * 87.5); } & .banners-two-img { height: 100%; min-height: calc(var(--spacing) * 62.5); width: 100%; overflow: hidden; @media (width >= 48rem) { min-height: calc(var(--spacing) * 87.5); } @media (width >= 48rem) { border-radius: 1.25rem; } @media (width >= 62rem) { border-radius: 2.5rem; } & img { height: 100%; min-height: calc(var(--spacing) * 62.5); width: 100%; object-fit: cover; object-position: right; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; @media (width >= 48rem) { min-height: calc(var(--spacing) * 87.5); } @media (width >= 48rem) { object-position: center; } } } & .banners-two-contenido { position: relative; z-index: 2; margin-top: calc(var(--spacing) * -20); height: 100%; padding: calc(var(--spacing) * 4); @media (width >= 36rem) { padding: calc(var(--spacing) * 6.25); } @media (width >= 48rem) { position: absolute; } @media (width >= 48rem) { top: calc(var(--spacing) * 0); } @media (width >= 48rem) { left: calc(var(--spacing) * 0); } @media (width >= 48rem) { margin: calc(var(--spacing) * 0); } & > div { display: flex; height: auto; align-items: center; border-radius: 1.25rem; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-grey-100); background-color: var(--color-white); padding: calc(var(--spacing) * 10); @media (width >= 48rem) { height: 100%; } @media (width >= 48rem) { max-width: calc(var(--spacing) * 128); } @media (width >= 48rem) { padding: calc(var(--spacing) * 12.5); } &:where(.dark, .dark *) { --tw-border-style: none; border-style: none; } &:where(.dark, .dark *) { background-color: var(--color-darker); } & .titulos { & .titulos_title { font-size: var(--text-1); } & .titulos_bajada { font-size: var(--text-4); } } } } &.reverse { & .banners-two-img { & > img { object-position: left; } } & .banners-two-contenido { right: calc(var(--spacing) * 0); left: auto; } } } } .swiper.swiperPrincipal { & .swiper-controls { display: flex; gap: calc(var(--spacing) * 6); padding-inline: calc(var(--spacing) * 15); & ul { display: flex; width: calc(var(--spacing) * 142.5); flex-wrap: wrap; justify-content: flex-start; gap: calc(var(--spacing) * 2); & li { & button { display: flex; height: calc(var(--spacing) * 7.5); align-items: center; gap: calc(var(--spacing) * 2); border-radius: var(--radius-4xl); padding-inline: calc(var(--spacing) * 3); padding-top: calc(var(--spacing) * 0.5); text-align: start; --tw-leading: calc(var(--spacing) * 1); line-height: calc(var(--spacing) * 1); opacity: 50%; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; &:hover { @media (hover: hover) { cursor: pointer; } } &:hover { @media (hover: hover) { background-color: var(--color-grey-100); } } &:where(.dark, .dark *) { color: var(--color-white); } &:where(.dark, .dark *) { opacity: 80%; } & img { margin-top: calc(var(--spacing) * -0.5); height: calc(var(--spacing) * 5); width: calc(var(--spacing) * 5); --tw-grayscale: grayscale(100%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } &.active { background-color: var(--color-blue-100); opacity: 100%; &:where(.dark, .dark *) { color: var(--color-dark); } & img { --tw-grayscale: grayscale(0%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } } } } } @media screen and (max-width: 1200px) { display: none; } } & .swiper-pagination { bottom: calc(var(--spacing) * 0); display: flex; height: calc(var(--spacing) * 4); align-items: center; justify-content: center; gap: calc(var(--spacing) * 1); @media screen and (min-width: 1200px) { display: none; } } & .swiper-wrapper { & .swiper-slide { padding-inline: calc(var(--spacing) * 15); @media screen and (max-width: 992px) { padding-inline: calc(var(--spacing) * 4); } } } & .swiper-button { margin-top: calc(var(--spacing) * -12.5); height: calc(var(--spacing) * 11.25); width: calc(var(--spacing) * 11.25); border-radius: var(--radius-4xl); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-grey-300); background-color: var(--color-white); padding: calc(var(--spacing) * 2); opacity: 0%; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; & .swiper-navigation-icon { height: calc(var(--spacing) * 4.5); --tw-grayscale: grayscale(100%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } &.swiper-button-prev { left: calc(var(--spacing) * 0); @media screen and (max-width: 1024px) { left: calc(var(--spacing) * 1.5); } } &.swiper-button-next { right: calc(var(--spacing) * 0); @media screen and (max-width: 1024px) { right: calc(var(--spacing) * 1.5); } } &:hover { background-color: var(--color-grey-100); } @media screen and (max-width: 992px) { display: none; } } &:hover { & .swiper-button { opacity: 100%; } } } @layer components { .slider-soluciones { position: relative; width: 100%; overflow: hidden; background-color: var(--color-white); &:where(.dark, .dark *) { background-color: transparent; } @media screen and (min-width: 1024px) { border-radius: 1.25rem; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-grey-100); &:where(.dark, .dark *) { border-color: var(--color-darker); } } & .slider-soluciones-card { display: flex; height: 100%; flex-direction: column; gap: calc(var(--spacing) * 0); &:where(.dark, .dark *) { background-color: var(--color-darker); } @media screen and (max-width: 1024px) { border-radius: 1.25rem; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-grey-100); } & .slider-soluciones-head { position: relative; height: calc(var(--spacing) * 50); min-height: calc(var(--spacing) * 50); overflow: hidden; border-top-left-radius: 1.25rem; border-top-right-radius: 1.25rem; @media (width >= 62rem) { height: calc(var(--spacing) * 61.75); } @media (width >= 62rem) { min-height: calc(var(--spacing) * 61.75); } &>img { height: 100%; width: 100%; object-fit: cover; object-position: top; } } & .slider-soluciones-body { display: flex; height: 100%; flex-direction: column; justify-content: space-between; gap: calc(var(--spacing) * 4); padding: calc(var(--spacing) * 6); @media (width >= 62rem) { padding-inline: calc(var(--spacing) * 13); } @media (width >= 62rem) { padding-top: calc(var(--spacing) * 15); } & .slider-soluciones-texts { display: flex; height: 100%; flex-direction: column; justify-content: space-between; gap: calc(var(--spacing) * 4); &:where(.dark, .dark *) { color: var(--color-white); } & div:first-child { display: flex; flex-direction: column; gap: calc(var(--spacing) * 4); & .slider-soluciones-title { font-size: var(--text-3); } & .slider-soluciones-bajada { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } } & div:last-child { margin-right: calc(var(--spacing) * -4); text-align: end; & .btnLinks { &:where(.dark, .dark *) { color: var(--color-yellow-600); } &:where(.dark, .dark *) { &:hover { @media (hover: hover) { color: var(--color-darker); } } } } } } } } } } .swiper.swiperSoluciones { & .swiper-button { margin-top: calc(var(--spacing) * -35); height: calc(var(--spacing) * 11.25); width: calc(var(--spacing) * 11.25); border-radius: var(--radius-4xl); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-grey-300); background-color: var(--color-white); padding: calc(var(--spacing) * 2); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; & .swiper-navigation-icon { height: calc(var(--spacing) * 4.5); --tw-grayscale: grayscale(100%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } &.swiper-button-prev { left: calc(var(--spacing) * 4); } &.swiper-button-next { right: calc(var(--spacing) * 4); } &:hover { background-color: var(--color-grey-100); } } & .swiper-pagination { top: calc(var(--spacing) * 67); height: calc(var(--spacing) * 4); } } @layer components { .sliderFinanciero { width: 100%; flex-shrink: 0; & .sliderFinanciero-int { display: flex; height: calc(var(--spacing) * 110); width: 100%; align-items: center; gap: calc(var(--spacing) * 0); @media screen and (max-width: 992px) { height: auto; flex-direction: column; padding-bottom: calc(var(--spacing) * 8); } & .sliderFinanciero-imagen { width: 100%; @media screen and (min-width: 767px) { flex: 1; } &>div { height: calc(var(--spacing) * 90); width: calc(100% + 2.5rem); overflow: hidden; border-radius: 1.25rem; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; @media screen and (max-width: 992px) { height: calc(var(--spacing) * 60); width: 100%; } & img { height: 100%; width: 100%; object-fit: cover; @media screen and (max-width: 992px) { object-position: top; } } } } & .sliderFinanciero-contenido { margin-left: calc(var(--spacing) * -2); flex: 1; @media screen and (max-width: 992px) { margin: calc(var(--spacing) * 0); margin-top: calc(var(--spacing) * -15); width: 100%; } &>div { position: relative; display: flex; height: auto; min-height: calc(var(--spacing) * 68); width: 100%; flex: 1; flex-direction: column; justify-content: center; border-radius: 1.25rem; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-grey-100); background-color: var(--color-white); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; &:where(.dark, .dark *) { border-style: var(--tw-border-style); border-width: 0px; } &:where(.dark, .dark *) { background-color: var(--color-darker); } @media screen and (max-width: 992px) { height: auto; padding: calc(var(--spacing) * 6); padding-top: calc(var(--spacing) * 10); } @media screen and (min-width: 992px) { padding: calc(var(--spacing) * 6); padding-left: calc(var(--spacing) * 10); } @media screen and (min-width: 1023px) { padding-inline: calc(var(--spacing) * 15); padding-block: calc(var(--spacing) * 10); padding-bottom: calc(var(--spacing) * 4); } & .sliderFinanciero-icono { position: absolute; top: 50%; height: calc(var(--spacing) * 12); width: calc(var(--spacing) * 12); @media screen and (max-width: 992px) { top: calc(var(--spacing) * 0); left: 50%; margin-top: calc(var(--spacing) * -6); margin-left: calc(var(--spacing) * -6); } @media screen and (min-width: 992px) { margin-top: calc(var(--spacing) * -6); margin-left: calc(var(--spacing) * -16); } @media screen and (min-width: 1023px) { margin-top: calc(var(--spacing) * -6); margin-left: calc(var(--spacing) * -21); } & img { height: 100%; width: 100%; object-fit: contain; } } & .sliderFinanciero-texts { display: flex; height: 100%; flex-direction: column; justify-content: center; gap: calc(var(--spacing) * 6); &>div:first-child { display: flex; flex-direction: column; gap: calc(var(--spacing) * 4); @media screen and (max-width: 767px) { text-align: center; } & .sliderFinanciero-title { font-size: var(--text-3); &:where(.dark, .dark *) { color: var(--color-white); } } & .sliderFinanciero-bajada { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: var(--text-6); &:where(.dark, .dark *) { color: var(--color-white); } } } &>div:last-child { margin-right: calc(var(--spacing) * -4); text-align: end; @media screen and (max-width: 767px) { text-align: center; } & .btnLinks { &:where(.dark, .dark *) { color: var(--color-yellow-600); } &:where(.dark, .dark *) { &:hover { @media (hover: hover) { color: var(--color-darker); } } } } } } } } &.reverse { flex-direction: row-reverse; & .sliderFinanciero-imagen { &>div { width: 100%; } } & .sliderFinanciero-contenido { margin-right: calc(var(--spacing) * -10); margin-left: calc(var(--spacing) * 0); &>div { @media screen and (max-width: 992px) { height: auto; padding: calc(var(--spacing) * 6); padding-top: calc(var(--spacing) * 10); } @media screen and (min-width: 992px) { padding: calc(var(--spacing) * 6); padding-right: calc(var(--spacing) * 10); } @media screen and (min-width: 1023px) { padding-inline: calc(var(--spacing) * 15); padding-block: calc(var(--spacing) * 10); padding-bottom: calc(var(--spacing) * 4); } & .sliderFinanciero-icono { position: absolute; top: 50%; right: calc(var(--spacing) * -6); height: calc(var(--spacing) * 12); width: calc(var(--spacing) * 12); @media screen and (max-width: 992px) { top: calc(var(--spacing) * 0); right: 50%; margin-top: calc(var(--spacing) * -6); margin-left: calc(var(--spacing) * -6); } @media screen and (min-width: 992px) { margin-top: calc(var(--spacing) * -6); margin-left: calc(var(--spacing) * -16); } @media screen and (min-width: 1023px) { margin-top: calc(var(--spacing) * -6); margin-left: calc(var(--spacing) * -21); } } & .sliderFinanciero-texts { &>div:last-child { margin-left: calc(var(--spacing) * -4); text-align: start; } } } } @media screen and (max-width: 992px) { height: auto; flex-direction: column; padding-bottom: calc(var(--spacing) * 8); & .sliderFinanciero-contenido { margin-right: calc(var(--spacing) * 0); width: 100%; &>div { & .sliderFinanciero-texts { &>div:last-child { margin-left: calc(var(--spacing) * 0); text-align: center; } } } } } } &:hover { & .sliderFinanciero-imagen>div, & .sliderFinanciero-contenido>div { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } } } .swiper.swiperFinanciero { & .swiper-slide { padding-inline: calc(var(--spacing) * 15); @media screen and (max-width: 992px) { padding: calc(var(--spacing) * 0); } } & .swiper-button { display: none; height: calc(var(--spacing) * 11.25); width: calc(var(--spacing) * 11.25); border-radius: var(--radius-4xl); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-grey-300); background-color: var(--color-white); padding: calc(var(--spacing) * 2); opacity: 50%; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; @media (width >= 62rem) { display: flex; } & .swiper-navigation-icon { height: calc(var(--spacing) * 4.5); --tw-grayscale: grayscale(100%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } &.swiper-button-prev { left: calc(var(--spacing) * 0); } &.swiper-button-next { right: calc(var(--spacing) * 0); } &:hover { background-color: var(--color-grey-100); opacity: 100%; } } & .swiper-pagination { bottom: calc(var(--spacing) * -3); height: calc(var(--spacing) * 10); width: 100%; } } @layer components { footer { padding-bottom: calc(var(--spacing) * 16); @media (width >= 48rem) { padding-bottom: calc(var(--spacing) * 0); } & .footer-desktop { margin: auto; display: none; width: 100%; max-width: calc(var(--spacing) * 281.25); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 12.5); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; @media (width >= 62rem) { display: flex; } @media (width >= 87.5rem) { padding-inline: calc(var(--spacing) * 0); } & > div:first-child { display: flex; flex: 1; gap: calc(var(--spacing) * 4); padding-right: calc(var(--spacing) * 10); & nav { flex: 1; & ul { display: flex; flex-direction: column; gap: calc(var(--spacing) * 3); & li { font-size: var(--text-7); opacity: 50%; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; &:hover { @media (hover: hover) { opacity: 100%; } } } } } } } & .footer-mobile { @media (width >= 62rem) { display: none; } & > div:first-child { display: flex; align-items: center; justify-content: center; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: color-mix(in srgb, #BBC5CA 25%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-grey-300) 25%, transparent); } padding-block: calc(var(--spacing) * 6); @media (width >= 62rem) { display: none; } } & .accordion { & .accordion-element { border-color: color-mix(in srgb, #BBC5CA 25%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-grey-300) 25%, transparent); } & .accordion-head { border-color: color-mix(in srgb, #BBC5CA 25%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-grey-300) 25%, transparent); } &:hover { @media (hover: hover) { background-color: transparent; } } &:after { filter: var(--filter-white); } } } } } & .footer-bottom { background-color: var(--color-grey-600); & > div { margin: auto; display: flex; width: 100%; max-width: calc(var(--spacing) * 281.25); align-items: flex-start; gap: calc(var(--spacing) * 6); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 6); } } } } .swiper { & .swiper-slide { height: auto; } & .swiper-pagination { display: flex; height: calc(var(--spacing) * 4); align-items: center; justify-content: center; gap: calc(var(--spacing) * 1); & .swiper-pagination-bullet { height: calc(var(--spacing) * 2.5); width: calc(var(--spacing) * 2.5); &:where(.dark, .dark *) { background-color: var(--color-grey-50); } &.swiper-pagination-bullet-active { height: calc(var(--spacing) * 3.5); width: calc(var(--spacing) * 3.5); color: var(--color-blue-600); &:where(.dark, .dark *) { background-color: var(--color-yellow-600); } } } } } @layer components { .modals { position: fixed; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); z-index: 9999; height: 100vh; max-height: 100%; width: 100%; max-width: 100%; overflow: hidden; background-color: color-mix(in srgb, #232323 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-dark) 50%, transparent); } & .modals-interno { position: relative; display: flex; height: 100%; width: 100%; align-items: center; justify-content: center; padding: calc(var(--spacing) * 4); @media (width >= 62rem) { padding: calc(var(--spacing) * 8); } & .modals-contenido { position: relative; z-index: 3; display: flex; height: auto; max-height: 100%; width: 100%; --tw-translate-y: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); flex-direction: column; overflow: hidden; border-radius: 1.25rem; background-color: var(--color-white); opacity: 100%; --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); @media (width >= 48rem) { height: auto; } @media (width >= 48rem) { max-width: calc(var(--spacing) * 150); } &:where(.dark, .dark *) { border-style: var(--tw-border-style); border-width: 2px; } &:where(.dark, .dark *) { border-color: var(--color-darker); } &:where(.dark, .dark *) { background-color: var(--color-darker); } & .modals-head { display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--spacing) * 4); @media (width >= 48rem) { padding-inline: calc(var(--spacing) * 7.5); } @media (width >= 48rem) { padding-top: calc(var(--spacing) * 7.5); } &>div { margin-bottom: calc(var(--spacing) * 2); width: 100%; text-align: end; &:where(.dark, .dark *) { color: var(--color-white); } } } & .modals-body { overflow-y: auto; padding: calc(var(--spacing) * 6); @media (width >= 48rem) { padding: calc(var(--spacing) * 7.5); } } & .modals-title { text-align: center; font-size: var(--text-4); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); color: var(--color-grey-500); @media (width >= 48rem) { font-size: var(--text-3); } &:where(.dark, .dark *) { color: var(--color-yellow-600); } } & .modals-description { margin-top: calc(var(--spacing) * 2); text-align: center; font-size: var(--text-6); color: var(--color-grey-400); @media (width >= 48rem) { font-size: var(--text-5); } &:where(.dark, .dark *) { color: var(--color-white); } } } &.full { align-items: flex-start; padding: calc(var(--spacing) * 0); @media (width >= 48rem) { align-items: center; } @media (width >= 48rem) { padding: calc(var(--spacing) * 4); } @media (width >= 62rem) { padding: calc(var(--spacing) * 8); } & .modals-contenido { height: 100%; border-radius: 0; @media (width >= 48rem) { height: auto; } @media (width >= 48rem) { border-radius: 1.25rem; } } } } } } @starting-style { .modals[open] { & .modals-contenido { --tw-translate-y: calc(var(--spacing) * 10); translate: var(--tw-translate-x) var(--tw-translate-y); opacity: 0%; } } } @layer components { .huincha-destacado { margin: auto; width: 100%; max-width: calc(var(--spacing) * 281.25); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; @media (width >= 62rem) { padding-inline: calc(var(--spacing) * 4); } @media (width >= 62rem) { padding-top: calc(var(--spacing) * 7.5); } @media (width >= 75rem) { padding-inline: calc(var(--spacing) * 0); } & .huincha-destacado-contenido { display: flex; align-items: center; justify-content: space-between; background-color: var(--color-blue-50); @media (width >= 48rem) { gap: calc(var(--spacing) * 4); } @media (width >= 48rem) { padding: calc(var(--spacing) * 3); } @media (width >= 48rem) { padding-right: calc(var(--spacing) * 4); } @media (width >= 62rem) { border-radius: 3.125rem; } &:where(.dark, .dark *) { background-color: var(--color-darker); } @media screen and (max-width: 768px) { flex-direction: column; align-items: flex-end; } & .huincha-destacado-left { display: flex; width: 100%; align-items: center; justify-content: center; gap: calc(var(--spacing) * 4); text-align: center; @media (width >= 48rem) { justify-content: flex-start; } @media (width >= 48rem) { text-align: start; } @media screen and (max-width: 767px) { background-color: var(--color-blue-600); padding: calc(var(--spacing) * 4); } & .huincha-destacado-img { height: calc(var(--spacing) * 18.5); width: calc(var(--spacing) * 18.5); flex-shrink: 0; overflow: hidden; border-radius: calc(infinity * 1px); & img { height: 100%; width: 100%; object-fit: cover; } @media screen and (max-width: 992px) { display: none; } } & .huincha-destacado-texts { max-width: calc(var(--spacing) * 175); &:where(.dark, .dark *) { color: var(--color-white); } & .huincha-destacado-title { font-size: var(--text-4); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); color: var(--color-blue-600); &:where(.dark, .dark *) { color: var(--color-yellow-600); } @media screen and (max-width: 767px) { font-size: var(--text-6); color: var(--color-white); } } & .huincha-destacado-bajada { display: none; font-size: var(--text-7); @media (width >= 48rem) { display: block; } } } } & .huincha-destacado-right { width: 100%; padding: calc(var(--spacing) * 3); text-align: center; @media (width >= 48rem) { width: auto; } @media (width >= 48rem) { padding: calc(var(--spacing) * 0); } & .btnLinks { color: var(--color-blue-600); &:where(.dark, .dark *) { color: var(--color-yellow-600); } } } } } .huincha-alerta { position: relative; z-index: 4; & .huincha-alerta-int { &.warning { background-color: var(--color-yellow-50); } &.danger { background-color: var(--color-red-50); } &.success { background-color: var(--color-green-50); } &.info { background-color: var(--color-blue-50); } & > div { margin: auto; height: 100%; width: 100%; padding-inline: calc(var(--spacing) * 4); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; @media (width >= 87.5rem) { width: calc(var(--spacing) * 281.25); } @media (width >= 87.5rem) { padding-inline: calc(var(--spacing) * 0); } & .huincha-alerta-contenido { display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 4); @media (width >= 48rem) { flex-direction: row; } & > div:first-child { display: flex; width: 100%; align-items: flex-start; justify-content: flex-start; gap: calc(var(--spacing) * 4); @media (width >= 48rem) { align-items: center; } & .huincha-alerta-img { height: calc(var(--spacing) * 5.75); width: calc(var(--spacing) * 5.75); flex-shrink: 0; overflow: hidden; border-radius: calc(infinity * 1px); & img { height: 100%; width: 100%; object-fit: cover; } } & .huincha-alerta-texts { display: flex; align-items: center; gap: calc(var(--spacing) * 4); @media screen and (max-width: 768px) { flex-direction: column; } & p { padding-top: calc(var(--spacing) * 1); text-align: start; font-size: var(--text-7); color: var(--color-grey-500); &:where(.dark, .dark *) { color: var(--color-grey-500); } @media screen and (max-width: 768px) { padding: calc(var(--spacing) * 0); } } } } & > div:last-child { width: 100%; text-align: end; @media (width >= 48rem) { width: auto; } } } } } } } @layer components { .widget-pagar-productos { position: sticky; top: calc(var(--spacing) * 30); margin: auto; max-width: calc(var(--spacing) * 90); border-radius: 1.25rem; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-grey-100); padding: calc(var(--spacing) * 4); text-align: center; @media (width >= 62rem) { top: calc(var(--spacing) * 35); } @media (width >= 62rem) { float: inline-end; } @media (width >= 62rem) { max-width: 20rem; } & .widget-pagar-productos-head { margin-bottom: calc(var(--spacing) * 4); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-xl); background-color: var(--color-blue-600); padding: calc(var(--spacing) * 4); & h2 { font-size: var(--text-4); --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); color: var(--color-white); } } & .widget-pagar-productos-body { display: flex; flex-direction: column; align-items: center; gap: calc(var(--spacing) * 4); & .btnBci { width: calc(var(--spacing) * 42.5); } & > div:last-child { height: calc(var(--spacing) * 50); width: 100%; overflow: hidden; border-radius: var(--radius-xl); & img { height: 100%; width: 100%; object-fit: cover; } } } } } @layer components { .nav-tabs { width: 100%; & .nav-items { & ul { & li { flex: 1; justify-content: space-between; & .nav-item { display: flex; width: 100%; align-items: center; justify-content: space-around; border-radius: var(--radius-md); padding: calc(var(--spacing) * 4); text-align: center; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); &:hover { @media (hover: hover) { background-color: var(--color-grey-50); } } &.active { background-color: var(--color-grey-100); padding-inline: calc(var(--spacing) * 2.5); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } } } } } & .tab-content { height: auto; & .tab-pane { display: none; opacity: 0%; transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 150ms; transition-duration: 150ms; &.active { display: block; opacity: 100%; animation: tabs .5s ease-out; } } } &.horizontal { display: grid; gap: calc(var(--spacing) * 10); & .nav-items { & ul { display: flex; & li { flex: 1; justify-content: space-between; & .nav-item { display: flex; width: 100%; align-items: center; justify-content: space-around; border-radius: var(--radius-md); padding: calc(var(--spacing) * 4); text-align: center; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); &:hover { @media (hover: hover) { background-color: var(--color-grey-50); } } &.active { background-color: var(--color-grey-100); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } } } } } } &.vertical { display: grid; gap: calc(var(--spacing) * 6); @media (width >= 48rem) { gap: calc(var(--spacing) * 12); } @media (width >= 62rem) { grid-template-columns: 285px 1fr; } & .nav-items { & ul { display: flex; flex-direction: column; } } } &.itemIcons { &.horizontal { & .nav-items { & ul { & li { & .nav-item { display: flex; align-items: center; justify-content: center; gap: calc(var(--spacing) * 3); & img { height: calc(var(--spacing) * 6); width: calc(var(--spacing) * 6); flex-shrink: 0; } } } } } } &.vertical { & .nav-items { & ul { & li { & .nav-item { display: flex; align-items: center; justify-content: flex-start; gap: calc(var(--spacing) * 3); & img { height: calc(var(--spacing) * 6); width: calc(var(--spacing) * 6); flex-shrink: 0; } } } } } } } } } @layer components { .action-contacto { display: flex; height: 100%; width: 100%; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--spacing) * 4); border-radius: var(--radius-xl); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-grey-100); background-color: var(--color-white); padding: calc(var(--spacing) * 4); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; &:hover { @media (hover: hover) { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); } } &:hover { @media (hover: hover) { cursor: pointer; } } &:hover { @media (hover: hover) { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } & img { height: calc(var(--spacing) * 9); width: calc(var(--spacing) * 9); flex-shrink: 1; transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: 300ms; transition-duration: 300ms; } &:hover { background-color: var(--color-blue-600); color: var(--color-white); & img { rotate: calc(25deg * -1); } } } } :root { --global-cursor-track: url('https://cdn3.bci.cl/uploads/adcfd69a-0e91-40e3-a7f1-5de1e9150531/original/cursor-default.png') 0 0, auto !important; --global-cursor-pointer: url('https://cdn3.bci.cl/uploads/95f813d2-4e6a-41b7-81e5-f1e38d61e09b/original/cursor-pointer.png') 40 0, pointer !important; } .fontSize0, .fontSize1, .fontSize2, .fontSize3, .fontSize4, .fontSize5 { transition: var(--transitions); } .fontSize0 { font-size: .8rem; } .fontSize1 { font-size: 1rem; } .fontSize2 { font-size: 1.15rem; } .fontSize3 { font-size: 1.25rem; } .fontSize4 { font-size: 1.3rem; } .fontSize5 { font-size: 1.4rem; } .custom_cursor { cursor: var(--global-cursor-track); } .custom_cursor .btnOptions, .custom_cursor a, .custom_cursor button { cursor: var(--global-cursor-pointer) !important; } .custom_pointer { cursor: var(--global-cursor-pointer); } .focus_block_top, .focus_block_bottom { background-color: #000000; opacity: 0.5; position: fixed; width: 100%; min-width: 100%; left: 0; right: 0; z-index: 200000; } .focus_block_top { top: 0; bottom: auto; } .focus_block_bottom { bottom: 0; top: auto; } .dislexia body { font-family: "OpenDyslexic" !important; } .deuteranopia { filter: sepia(1) hue-rotate(20deg) saturate(4) brightness(0.9); } .protanopia { filter: sepia(1) hue-rotate(-20deg) saturate(4) brightness(0.9); } .tritanopia { filter: sepia(0.6) hue-rotate(90deg) saturate(2) brightness(1.1); } ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } html.grey { filter: grayscale(100%); } html.dark { background-color: var(--color-dark); & body { background-color: var(--color-dark); & header { & .logoSite { content: url(https://cdn3.bci.cl/uploads/aa2ab183-568b-4f38-866f-db6ec11d5854/original/bci-normaliza-logo-modo-oscuro.svg); } } & img { filter: brightness(80%); } } } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-rotate-x { syntax: "*"; inherits: false; } @property --tw-rotate-y { syntax: "*"; inherits: false; } @property --tw-rotate-z { syntax: "*"; inherits: false; } @property --tw-skew-x { syntax: "*"; inherits: false; } @property --tw-skew-y { syntax: "*"; inherits: false; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-leading { syntax: "*"; inherits: false; } @property --tw-font-weight { syntax: "*"; inherits: false; } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false; } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false; } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false; } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false; } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false; } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0px; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-blur { syntax: "*"; inherits: false; } @property --tw-brightness { syntax: "*"; inherits: false; } @property --tw-contrast { syntax: "*"; inherits: false; } @property --tw-grayscale { syntax: "*"; inherits: false; } @property --tw-hue-rotate { syntax: "*"; inherits: false; } @property --tw-invert { syntax: "*"; inherits: false; } @property --tw-opacity { syntax: "*"; inherits: false; } @property --tw-saturate { syntax: "*"; inherits: false; } @property --tw-sepia { syntax: "*"; inherits: false; } @property --tw-drop-shadow { syntax: "*"; inherits: false; } @property --tw-drop-shadow-color { syntax: "*"; inherits: false; } @property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-drop-shadow-size { syntax: "*"; inherits: false; } @property --tw-duration { syntax: "*"; inherits: false; } @property --tw-ease { syntax: "*"; inherits: false; } @property --tw-content { syntax: "*"; inherits: false; initial-value: ""; } @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-border-style: solid; --tw-leading: initial; --tw-font-weight: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-duration: initial; --tw-ease: initial; --tw-content: ""; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; } } } /**********************************************************/ /* ENCUESTA ***********************************************/ /**********************************************************/ #nebula_div_btn { z-index: 3 !important; } /**********************************************************/ /* CHAT EN LÍNEA ******************************************/ /**********************************************************/ #lt-composer__parent-sitio-publico { left: 20px !important; } .chat-custom { width: 80px !important; height: 80px !important; background-size: contain !important; bottom: 1rem !important; right: 1rem !important; z-index: 4 !important; transition: all .3s ease-in-out; @media screen and (max-width: 768px) { z-index: 4 !important; width: 60px !important; height: 60px !important; bottom: .15rem !important; right: .5rem !important; } } /**********************************************************/ /* reCAPTCHA **********************************************/ /**********************************************************/ .grecaptcha-badge { visibility: hidden; }