.carousel-container {scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .no-scrollbar::-webkit-scrollbar {display: none; } .no-scrollbar {-ms-overflow-style: none; scrollbar-width: none; } .carousel-card {transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.4s ease; } .carousel-card.next-hidden {transform: translateX(40px); opacity: 0.6; } .carousel-card.prev-hidden {transform: translateX(-40px); opacity: 0.6; } .pagination-dot {transition: all 0.3s ease; width: .75rem; height: .75rem; display: flex; justify-content: center; align-items: center; padding: 2px; box-sizing: content-box; border-radius: 12px; } .pagination-dot::before {content: ''; display: block; width: .75rem; height: .75rem; border-radius: 0.75rem; background-color: #ccc; } .pagination-dot.active {width: 1.5rem !important; } .pagination-dot.active::before {width: 1.5rem; background-color: #333; } .app-frame-wrapper {width: 100%; position: relative; } .app-frame-wrapper:after {content: url(../images/movil-frame-front-buttons.svg); width: 100%; position: absolute; top: 0; left: 0; } .iframe-app-content .iframe-app-wrapper {width: 100%; aspect-ratio: 1 / 2; border-radius: 5%; overflow: hidden; padding-top: 0%; z-index: 1; position: relative; -webkit-mask-image: url('../images/frame-mask.svg'); mask-image: url('../images/frame-mask.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; background-color: hsl(0deg 0% 99%); max-height: 100%; } .iframe-app-content .iframe-app-wrapper::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .iframe-app-content iframe {position: absolute; width: max(375px, 100%); left: 0; top: 0; margin: 0; border-radius: 5%; padding: 0 4.8% 4.8% 4.8%; border-color: transparent; display: block; border: none; aspect-ratio: 1 / 2; } .iframe-app-content iframe::-webkit-resizer {display: none; background-color: transparent; } /* Estados & 3D */ .item__3d-frame {position: relative; width: 100%; height: 100%; transform: translateY(-4%) scale(0.85); transform-origin: center bottom; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), z-index 0.7s step-end; will-change: transform; } .item__3d-frame .iframe-app-content iframe {padding: 0 5% 4.8% 5%; } .item__3d-frame.isFront .iframe-app-content iframe {padding: 0 5% 5% 5%; } /* Estados generales */ .item__3d-frame.isScaled {transform: translateY(-3%) scale(1); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), z-index 0.7s step-start; transform-origin: bottom center; } /* .item__3d-frame.isLeft {transform: perspective(100vw) rotateY(-40deg); } .item__3d-frame.isRight {transform: perspective(100vw) rotateY(40deg) translateX(-17%); } */ .item__3d-frame.isLeft .app-frame-wrapper .iframe-app-content {transform: perspective(140vw) rotateY(-10deg) translateX(-16%) translatez(0px) translateY(0.2%) scaleX(0.98) scaleY(1.05); transform-origin: right center; } .item__3d-frame.isRight .app-frame-wrapper .iframe-app-content {transform: perspective(140vw) rotateY(10deg) translateX(14%) translatez(0px) translateY(0.2%) scaleX(1) scaleY(1.05); transform-origin: left center; } @media screen and (min-width: 768px) {.item__3d-frame.isScaled {transform: translateY(-3%) scale(1); } .item__3d-frame.isLeft .app-frame-wrapper .iframe-app-content {transform: perspective(110vw) rotateY(-10deg) translateX(-14%) translatez(0px) translateY(0.2%) scaleX(1.02) scaleY(1.05); transform-origin: right center; } .item__3d-frame.isRight .app-frame-wrapper .iframe-app-content {transform: perspective(110vw) rotateY(10deg) translateX(12%) translatez(0px) translateY(0.2%) scaleX(1.02) scaleY(1.05); transform-origin: left center; } } @media screen and (min-width: 1024px) {.item__3d-frame.isLeft .app-frame-wrapper .iframe-app-content {transform: perspective(min(60vw, 55rem)) rotateY(-24deg) translateX(-16%) translatez(0px) translateY(-1.1%) scaleX(1.09) scaleY(1.075); transform-origin: right center; } .item__3d-frame.isRight .app-frame-wrapper .iframe-app-content {transform: perspective(min(60vw, 55rem)) rotateY(24deg) translateX(14%) translatez(0px) translateY(-0.25%) scaleX(1.09) scaleY(1.075); transform-origin: left center; } .item__3d-frame .iframe-app-content iframe {padding: 0 8% 8% 8%; } .item__3d-frame.isFront .iframe-app-content iframe {padding: 0 8% 8% 8%; } .item__3d-frame.isScaled {transform: translateY(-6%) scale(1); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), z-index 0.7s step-start; transform-origin: bottom center; } } .item__3d-frame.isLeft .app-frame-wrapper::after {content: url(../images/movil-frame-left.svg); aspect-ratio: 146/292; height: 103%; position: absolute; top: -1%; transform-origin: 50%; /* transform: perspective(100vw) rotateY(25deg) scaleX(1.1); */ left: -10%; z-index: 70; width: auto; } .item__3d-frame.isRight .app-frame-wrapper::after {content: url(../images/movil-frame-right.svg); aspect-ratio: 146/292; height: 103%; position: absolute; top: -1%; transform-origin: 50%; /* transform: perspective(100vw) rotateY(-25deg) scaleX(1.1); */ left: -2%; z-index: 70; width: auto; } .item__3d-frame.item-shadow .app-frame-wrapper .iframe-app-content::after {content: url(../images/shadow.svg); position: absolute; left: -50%; width: 200%; bottom: -11%; transform: scaleY(0.5); } .video-simulator {position: relative; width: 100%; } .video-simulator-content {position: relative; width: 100%; height: 100%; overflow: hidden; } .play-button {top: 0; left: 0; z-index: 10; border: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; transition: opacity 0.3s; border-radius: 50%; padding: 8px; } /* ✅ Animación solo para el inicio .play-button.play-button-init {opacity: 0; pointer-events: none; animation: fadeInPlayBtn 0.001s linear 3s forwards; } */ @keyframes fadeInPlayBtn {to {opacity: 1; pointer-events: auto; } } .btn-circle {border-radius: 50%; width: 68px; height: 68px; padding: 1rem; font-size: 2rem; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: 2px solid rgba(0, 0, 0, 0.7) } .play-button .btn-circle {background: rgba(0, 0, 0, 0.7); } .btn-circle>svg {fill: white; } .play-button.hidden {opacity: 0; pointer-events: none; } .video-items {list-style: none; padding: 0; margin: 0; display: flex; flex-direction: row; width: 100%; overflow: hidden; } .video-item {position: relative; z-index: 1; min-width: 100%; } .video-item.active {opacity: 1; z-index: 2; transform: translateX(calc(var(--item-index) * -100%)); } .progress-container {display: flex; width: 90%; height: 6px; gap: 0.5rem; margin: 12px 5%; } .progress-dot {height: 100%; background: #e0e0e0; transition: all 0.3s ease; position: relative; overflow: hidden; border: none; padding: 0; cursor: pointer; outline: none; border-radius: 3px; } .progress-dot::after {content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: #4285f4; transition: width 0.3s ease; } .progress-dot.active::after {width: 100%; } /* .progress-dot.current {height: 0.25rem; margin-top: -1px; } */ .progress-dot:hover, .progress-dot:focus {opacity: 0.8; transform: scaleY(1.2); } .progress-dot:focus-visible {outline: 2px solid #4285f4; outline-offset: 2px; } .pause-button {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; display: none; cursor: pointer; } .pause-button.active {display: block; } .pause-button .btn-circle {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 40px; opacity: 0; transition: opacity 0.3s; } .pause-button:hover .btn-circle {opacity: 1; } .pause-button .btn-circle>svg {fill: rgba(0, 0, 0, 0.7); } /* gral */ nav {background-color: hsl(var(--secondary-foreground) / 0.95); } .dark nav {background-color: hsl(211 28% 29% / 0.9); } .loading::before {content: ""; position: absolute; height: 100%; width: 100%; background-image: url(../images/loading-dots.svg); background-repeat: no-repeat; background-size: 60px auto; background-position: center; top: 0; left: 0; /* Hereda el color del padre */ } body, body .font-sans {font-family: "Roboto", sans-serif !important; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-display: swap; } body {min-width: 320px; } .iframe-app-wrapper, iframe {pointer-events: none; } *:focus, .focus {outline: 2px solid hsl(var(--foreground)) !important; outline-offset: 2px !important; box-shadow: none !important; } /* logo */ nav .logo {width: 120px; height: auto; } footer .logo {width: 180px; height: auto; } @media screen and (min-width: 375px) {nav .logo {width: 150px; } } @media screen and (min-width: 768px) {nav .logo {width: 180px; } } /* menu */ .shadow-after::after {content: ''; position: absolute; bottom: 0; width: 100%; height: 100%; left: 0; --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); pointer-events: none; } @media screen and (max-width: 840px) {#primary-nav-menu {position: absolute; top: 4rem; left: 0; width: 100%; overflow: hidden; transform: scaleY(0); transform-origin: top; transition: transform 0.3s ease-out; } #primary-nav-menu.active {transform: scaleY(1); } #primary-nav-menu>ul {display: flex; flex-direction: column; width: 100%; background: hsl(var(--input)); gap: 16px; padding: 1rem 0; } #primary-nav-menu>ul>li {padding: 1rem; border-bottom: 1px solid #3d3d3d; width: 100%; padding: 0.5rem 1rem; transition: display 0.3s ease-out 1s; min-height: 1.5rem; } #primary-nav-menu>ul>li>a {display: none; } #primary-nav-menu.active>ul>li>a {display: block; } } @media screen and (min-width: 840px) {#menu-btn-wrapper {display: none; } #primary-nav-menu>ul {gap: 1rem; } } /* burger */ .burger {width: 100%; height: 3px; background: rgb(105, 105, 105); transition: 0.2s ease-in-out; position: relative; display: inline-block; border-radius: 3px; } .burger::before, .burger::after {content: ""; position: absolute; width: 100%; height: 3px; background: rgb(105, 105, 105); transition: 0.2s ease-in-out; left: 0px; border-radius: 3px; } .burger::before {transform: translateY(-8px); } .burger::after {transform: translateY(8px); } .burger::before {transform: translateY(-8px); } .burger::after {transform: translateY(8px); } #menu-btn.active .burger {background: transparent; } #menu-btn.active .burger::before {transform: rotate(45deg); } #menu-btn.active .burger::after {transform: rotate(-45deg); } #languageFakeSelect[aria-expanded="true"] svg {transform: rotate(180deg); } /*animated text */ .dynamic-text {display: inline-block; position: relative; padding-bottom: 8px; } .dynamic-text .underline {position: absolute; bottom: -16px; left: -4%; width: 110%; height: 24px; overflow: visible; } .dynamic-text .underline-path {stroke: hsl(var(--primary)); stroke-width: 24; fill: none; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw-underline 10s linear infinite; animation-delay: 3s; width: 100%; } @keyframes draw-underline {0% {stroke-dashoffset: 1000; } 10% {stroke-dashoffset: 0; } 100% {stroke-dashoffset: 0; } } /* lang switcher */ /* css slider */ .scroll-container {scroll-behavior: smooth; } .scroll-snap-x {scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .scroll-snap-item {scroll-snap-align: start; } /* Dots styles */ .dot {width: 0.75rem; height: 0.75rem; border-radius: 9999px; background-color: #ccc; transition: background-color 0.3s; border: none; cursor: pointer; } .dot.active {background-color: #333; width: 1.5rem; } /* tabs */ .tab-control-item {cursor: pointer; padding: 0.5rem 1rem; margin-right: 0.5rem; transition: all 0.3s ease; } /* Contenido de los tabs oculto por defecto */ .tab-image-item, .tab-txt-item {z-index: 0; opacity: 0; display: none; } .tab-image-item {padding-bottom: 1.5rem; } /* Mostrar contenido activo */ .tab-image-item.active-content, .tab-txt-item.active-content {/* transform: translate(calc(var(--item-index) * -100%)); */ z-index: 10; opacity: 1; display: block; } /* Estilo para control activo */ .tabs-content-controls::-webkit-scrollbar {display: none; } .tabs-content-controls {-ms-overflow-style: none; scrollbar-width: none; } .tabs-controls-horizontal .tab-control-item {border-bottom: 4px solid transparent; } .tabs-controls-horizontal .tab-control-item.active-control {font-weight: bold; color: hsl(var(--primary)); border-bottom: 4px solid hsl(var(--primary)); } .tabs-controls-vertical .tab-control-item {border-width: 0 0 4px 0; border-style: solid; border-color: transparent; } .tabs-controls-vertical .tab-control-item.active-control {border-color: hsl(var(--primary)); } .tabs-controls-icon .tab-control-item.active-control .icon-wrap {background-color: hsl(var(--primary)); } @media screen and (min-width:768px) {.tabs-controls-vertical .tab-control-item {border-width: 0 0 0 4px; } .tabs-controls-vertical {flex-direction: column; } } /********************* list check */ .list-check {display: flex; flex-direction: column; list-style: none; } .list-check>li {display: flex; gap: 0.5rem; width: 100%; align-items: center; padding: 0.5rem; height: 4rem; z-index: 1; opacity: 1; background-color: hsl(var(--background)); border-radius: 0.5rem; border: 1px solid gray; transition: transform 1.5s ease, background-color 1s ease; font-weight: 700; } .list-check>li .icon-check {min-width: 32px; max-width: 32px; height: 32px; position: relative; } .list-check>li .icon-check::before {content: ''; width: 28px; height: 28px; position: absolute; top: 2px; left: 2px; border: 2px solid gray; border-radius: 4px; } .list-check>li .icon-check svg {top: -6px; left: 3px; position: relative; width: 32px; height: 32px; } .icon-check-path {fill: none; stroke: #16999F; stroke-width: 3; stroke-dasharray: 200; stroke-dashoffset: 200; } .list-check>li.active .icon-check svg .icon-check-path {animation: draw 2s ease 1s forwards; } @keyframes draw {to {stroke-dashoffset: 0; } } @media screen and (max-width:460px) {#area-list {height: 4rem; overflow: hidden; border-radius: 0.5rem; --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .list-check>li:not(.last-active) {background: hsl(var(--secondary)); border-color: hsl(var(--secondary-foreground)); color: hsl(var(--secondary-foreground)); } .list-check>li.active {transform: translateY(calc(var(--item-index) * -100%)); z-index: 10; opacity: 1; } } @media screen and (min-width:460px) {#area-list {display: flex; flex-direction: column; gap: 1.5rem; } .list-check {gap: 1.5rem; flex-direction: row; justify-content: space-between; } .list-check>li {height: auto; } } /********************* list icons cards */ .list-icons-cards {position: relative; width: 100%; display: flex; flex-direction: column; padding: 0; box-sizing: border-box; padding: 0; list-style: none; flex-wrap: wrap; gap: 1.25rem; } .list-icons-cards>li {display: flex; gap: 0.5rem; align-items: center; gap: 1rem; border-radius: 1rem; --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); width: 100%; background-color: hsl(var(--yellow)); border: 3px solid hsl(var(--yellow)); padding: 1rem; color: hsl(211 28% 29%); border: 2px solid hsl(var(--yellow)); transition: all 0.5s ease; z-index: 1; opacity: 1; display: none; transform: translateY(100%); box-sizing: border-box; } .list-icons-cards>li>i {font-size: 3rem; height: 64px; width: 64px; display: flex; align-items: center; justify-content: center; } .list-icons-cards>li .svg-icon svg {width: 44px; height: 44px; fill: hsl(211 28% 29%); } @media screen and (min-width:460px) {.list-icons-cards>li .svg-icon svg {width: 64px; height: 64px; } } .list-icons-cards>li p {width: 100%; } /* active */ .dark .list-icons-cards>li .svg-icon svg {fill: hsl(211 28% 29%); } .list-icons-cards>li.active {background-color: #FFF; z-index: 3; display: flex; opacity: 1; } .dark .list-icons-cards>li.active {background-color: hsl(var(--background)); color: hsl(var(--yellow)); } .dark .list-icons-cards>li.active .svg-icon svg {fill: hsl(var(--yellow)); } @media screen and (max-width:460px) {.list-icons-cards>li.prev-active {z-index: 2; display: flex; opacity: 1; transform: translateY(0); position: absolute; } .list-icons-cards>li.active {animation: slide-in-from-bottom 0.3s ease-out forwards; } .dark .list-icons-cards>li.active {background-color: hsl(var(--background)); color: hsl(var(--yellow)); } } @media screen and (min-width:460px) {.list-icons-cards {flex-direction: row; justify-content: center; } .list-icons-cards>li {width: 180px; flex-direction: column; aspect-ratio: 1/1; text-align: center; transform: translateY(0); display: flex; } .dark .list-icons-cards>li {color: hsl(var(--yellow)); background-color: transparent; } .dark .list-icons-cards>li.active {background-color: hsl(var(--yellow)); color: hsl(211 28% 29%); } .dark .list-icons-cards>li.active {background-color: hsl(var(--yellow)); color: hsl(211 28% 29%); } .dark .list-icons-cards>li .svg-icon svg {fill: hsl(var(--yellow)); } } @keyframes slide-in-from-bottom {from {transform: translateY(100%); } to {transform: translateY(0%); } } @keyframes slide-out-to-bottom {from {transform: translateY(0); } to {transform: translateY(100%); } } /* fallback-class  */ .min-h-10 {height: 3rem; } .min-w-10 {width: 3rem; } .h-12 {height: 3rem; } .w-12 {width: 3rem; } .min-h-12 {height: 3rem; } .min-w-12 {width: 3rem; } .min-h-16 {min-height: 4rem; } .min-w-16 {min-width: 4rem; } /* diagrams */ .diagram-box {display: flex; flex-direction: column; align-items: center; gap: 0.5rem; justify-content: space-between; word-break: break-word; overflow-wrap: break-word; } .top-box {border: 0.25rem solid hsl(var(--secondary)); border-radius: 8px; padding: 0.25rem 1rem; } .title {font-size: 1.75rem; font-weight: 500; color: hsl(var(--secondary)); line-height: 1.2; text-align: center; } .middle-line {width: 0.25rem; height: 32px; background: hsl(var(--secondary)); border-radius: 4px; } .bar-tree {display: flex; justify-content: space-between; width: 68%; height: 32px; } .bar-tree .h-bar {flex: 1; width: 100%; height: 0.25rem; background: hsl(var(--secondary)); border-radius: 4px; margin: 0 -0.25rem; } .bar-tree .v-bar {width: 0.25rem; height: 32px; background: hsl(var(--secondary)); border-radius: 4px; } .bar-tree::before, .bar-tree::after {content: ''; width: 0.25rem; height: 32px; background: hsl(var(--secondary)); border-radius: 4px; } .boxes {display: flex; justify-content: space-between; gap: 1rem; width: 100%; } .box {flex: 1; border: 4px solid hsl(var(--secondary)); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: hsl(var(--secondary)); background: hsl(var(--input)); white-space: nowrap; } /* circles */ .source-node {border: 2px solid hsl(var(--secondary)); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; aspect-ratio: 1/1; padding: 1rem; position: relative; z-index: 2; background-color: hsl(var(--background)); } .source-node h2 {font-size: 2.5rem; margin: 0; color: hsl(var(--secondary)); } .source-node small {font-size: 1.25rem; color: hsl(var(--secondary)); } .session-box {position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; } .session .label {background-color: hsl(var(--background)); color: hsl(var(--secondary-foreground)); padding: 20%; border-radius: 50%; text-align: center; aspect-ratio: 1/1; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; margin-bottom: -20%; z-index: 2; position: relative; min-width: fit-content; } .session .label::before {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 50%; background-color: hsl(var(--secondary)); z-index: 0; } .session .label h3 {font-size: 1.5rem; margin: 0; line-height: 1.2; z-index: 1; } .session .label span {font-size: 1.25rem; display: block; opacity: 0.8; line-height: 1.2; z-index: 1; } .register-box {border-radius: 6px; background: hsl(var(--background)); z-index: 3; position: relative; padding: 5%; } .session .register-box::before {border-radius: 6px; content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: hsl(var(--secondary) / 0.05); z-index: 0; } .session .register-list {border: 1px solid hsl(var(--secondary)); border-radius: 6px; background: hsl(var(--background)); z-index: 1; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; box-sizing: border-box; width: max-content; position: relative; } .register {font-size: 1.2rem; line-height: 1.2; color: hsl(var(--secondary)); display: flex; align-items: center; word-wrap: anywhere; gap: 0.5rem; } .register .icon-check {min-width: 24px; max-width: 24px; height: 24px; position: relative; } .register .icon-check svg {top: 1px; margin-right: 0; position: relative; width: 19px; fill: hsl(var(--primary)); height: auto; } @media screen and (max-width: 1023px) {.diagram-circle {display: flex; flex-direction: column; align-items: center; min-width: fit-content; width: 100%; gap: 2rem; } .connections {width: 100%; display: flex; gap: 2rem; position: relative; z-index: 1; } .session {display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; flex: 1 1 auto; } .session .line {position: absolute; bottom: 100%; left: 50%; width: 8px; height: 100%; transform: rotate(65deg); transform-origin: bottom center; background-color: hsl(var(--secondary)); z-index: 0; margin-left: -16px; margin-bottom: -12px; z-index: 1; } .session:nth-child(2) .line {transform: rotate(0deg); height: 3rem; margin-left: 0px; transform: translateX(-50%); } .session:nth-child(3) .line {margin-left: 0px; transform: rotate(-65deg); margin-right: -16px; } } /*-------------------------------------------------------------------------*/ @media screen and (min-width: 1024px) {.source-node {margin-right: -10%; } .diagram-circle {align-items: flex-start; display: flex; flex-direction: row; gap: 0; min-width: fit-content; width: 100%; } .connections {display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 10px; width: 80%; } .session {display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; flex: 1 1 auto; } .session:nth-child(1) {grid-column: 1 / span 3; grid-row: 1; transform: translateY(5%); } /* Elemento 2: columnas 1 y 2, fila 2 */ .session:nth-child(2) {grid-column: 1 / span 2; grid-row: 2; transform: translateY(-45%); } /* Elemento 3: solo columna 1, fila 3 */ .session:nth-child(3) {grid-column: 1 / span 1; grid-row: 3; transform: translateY(-95%); } .session .content {display: flex; width: 100%; align-items: flex-start; justify-content: flex-end; } .session:nth-child(3) .content {flex-direction: column; } .session .line {background-color: transparent; transform: rotate(0); z-index: 1; display: flex; height: auto; width: 100%; margin: 0; } .session .line::before {flex: 1 1 auto; display: inline-block; background-color: hsl(var(--secondary)); content: ''; height: 8px; transform: rotate(0); transform-origin: right top; } .session .line::after {content: ''; background-color: hsl(var(--secondary)); height: 8px; display: inline-block; transform-origin: top left; margin-right: -2rem; width: 100px; margin-left: -0.1px; } .session:nth-child(1) .line::after {transform: rotate(25deg); } .session:nth-child(2) .line::after {transform: rotate(25deg); } .session:nth-child(3) .line {transform: translateY(-4rem); width: 100%; display: block; } .session:nth-child(3) .line::after {transform: rotate(64deg) scaleX(1) translate(-40%, 0); width: 100%; } .session-box {display: grid; grid-template-columns: repeat(2, auto); grid-auto-rows: auto; } .session .label {margin-bottom: -40%; padding: 30%; } .register-box {grid-row: 2; grid-column: 2; margin-left: -10%; } } /* countdown */ [data-countdown-finished="true"] {opacity: 0.5; pointer-events: none; } [data-countdown-finished="true"] > div {display: flex !important; } [data-countdown-finished="true"] + .countdown-msj {display: flex; } /* scaler */ [data-scaler] > * {transition: transform 0.3s ease; transform-origin: center top; }