.eventos { background-color: var(--color-eventos-bg, #e4e4e4); aspect-ratio: 1920 / 1300; min-height: 700px; max-height: 1400px; overflow: hidden; position: relative; display: flex; align-items: center; padding-block: clamp(var(--space-12, 3rem), 5vw, var(--space-20, 5rem)); } .eventos__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-6, 1.5rem), 3vw, var(--space-12, 3rem)); width: 100%; max-width: var(--container-max, 1400px); margin-inline: auto; padding-left: clamp(var(--space-6, 1.5rem), 5vw, var(--space-16, 4rem)); padding-right: 0; align-items: center; } .eventos__copy { grid-column: 1; grid-row: 1; } .eventos__wheel { grid-column: 2; grid-row: 1 / 3; position: relative; width: 100%; display: flex; align-items: center; justify-content: flex-end; } .eventos__title { font-family: var(--font-heading, "Montserrat", sans-serif); font-weight: var(--fw-bold, 700); font-size: clamp(2.875rem, 5.73vw, var(--fs-display-lg, 6.875rem)); line-height: 1; letter-spacing: -0.01em; color: var(--color-text-dark, #343a40); margin: 0 0 var(--space-6, 1.5rem); } .eventos__subtitle { font-weight: var(--fw-medium, 500); font-size: clamp(1rem, 1.5625vw, var(--fs-3xl, 1.875rem)); line-height: 1.3; color: var(--color-text-dark, #343a40); max-width: 28ch; margin: 0 0 clamp(var(--space-8, 2rem), 4vw, var(--space-16, 4rem)); } .eventos__details { position: relative; min-height: 0; } .event-detail { display: grid; grid-template-columns: auto 1fr; gap: clamp(var(--space-4, 1rem), 1.5vw, var(--space-6, 1.5rem)); align-items: flex-start; color: inherit; text-decoration: none; position: absolute; left: 0; right: 0; top: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity 0.55s var(--ease-out, ease), transform 0.55s var(--ease-out, ease); } .event-detail[data-active="true"] { position: relative; opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .event-detail:hover, .event-detail:focus { color: inherit; text-decoration: none; } .event-detail__date { width: clamp(64px, 5.25vw, 100px); aspect-ratio: 1; background-color: var(--color-canon-red-alt, #df1f26); color: var(--color-white, #fff); border-radius: 4px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .event-detail__day, .event-detail__month { font-family: var(--font-heading, "Montserrat", sans-serif); font-weight: var(--fw-semibold, 600); color: var(--color-white, #fff); line-height: 1; font-size: clamp(1rem, 1.2vw, 1.3rem); } .event-detail__month { text-transform: lowercase; margin-top: var(--space-1, 0.25rem); } .event-detail__title { font-weight: var(--fw-semibold, 600); font-size: clamp(1rem, 1.5vw, var(--fs-xl, 1.5rem)); color: var(--color-black, #000); line-height: 1.2; margin: 0; max-width: 38ch; } .event-detail__meta { display: inline-flex; align-items: center; gap: var(--space-2, 0.5rem); margin: var(--space-2, 0.5rem) 0 var(--space-3, 0.75rem); font-size: clamp(0.875rem, 1.2vw, var(--fs-lg, 1.25rem)); font-weight: var(--fw-semibold, 600); color: var(--color-canon-red-alt, #df1f26); } .event-detail__modality, .event-detail__time, .event-detail__dot { color: var(--color-canon-red-alt, #df1f26); } .event-detail__desc { margin: 0; color: var(--color-black, #000); font-weight: var(--fw-medium, 500); font-size: clamp(0.9rem, 1.15vw, var(--fs-md, 1.125rem)); line-height: 1.3; max-width: 40ch; } .eventos__controls { grid-column: 1; grid-row: 2; display: inline-flex; align-items: center; gap: var(--space-3, 0.75rem); margin-top: var(--space-8, 2rem); } .eventos__arrow { width: 48px; height: 48px; border-radius: var(--radius-full, 9999px); background-color: transparent; border: 2px solid var(--color-canon-red-alt, #df1f26); color: var(--color-canon-red-alt, #df1f26); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease), color var(--duration-fast, 150ms) var(--ease-out, ease), transform var(--duration-fast, 150ms) var(--ease-out, ease); } .eventos__arrow:hover { background-color: var(--color-canon-red-alt, #df1f26); color: var(--color-white, #fff); transform: translateY(-2px); } .eventos__arrow:focus-visible { outline: 2px solid var(--color-canon-red-alt, #df1f26); outline-offset: 3px; } .eventos__arrow i { font-size: 1.75rem; } .eventos__wheel-stage { position: relative; width: clamp(340px, 38vw, 680px); height: clamp(620px, 70vw, 1200px); } .event-photo { position: absolute; top: 50%; right: 0; width: clamp(240px, 28vw, 500px); aspect-ratio: 4 / 3; transform-origin: 165% 50%; --orbit-angle: 90deg; opacity: 0; transform: translateY(-50%) rotate(var(--orbit-angle)); transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease-out; will-change: transform, opacity; } .event-photo__inner { width: 100%; height: 100%; border-radius: clamp(48px, 6vw, 117px); overflow: hidden; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2), 0 6px 14px rgba(0, 0, 0, 0.1); --tilt: 0deg; --scale: 1; --shift-x: 0%; transform-origin: center; transform: translateX(var(--shift-x)) rotate(calc(var(--tilt) - var(--orbit-angle))) scale(var(--scale)); transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease-out; will-change: transform; background-color: rgba(0, 0, 0, 0.06); } .event-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .event-photo[data-slot="hidden"] { --orbit-angle: 95deg; opacity: 0; } .event-photo[data-slot="exit-top"] { --orbit-angle: 58deg; opacity: 0; } .event-photo[data-slot="enter-bottom"] { --orbit-angle: -58deg; opacity: 0; } .event-photo[data-slot="bottom"] { --orbit-angle: -32deg; opacity: 1; } .event-photo[data-slot="middle"] { --orbit-angle: 0deg; opacity: 1; z-index: 2; } .event-photo[data-slot="top"] { --orbit-angle: 32deg; opacity: 1; } .event-photo[data-slot="hidden"] .event-photo__inner, .event-photo[data-slot="exit-top"] .event-photo__inner, .event-photo[data-slot="enter-bottom"] .event-photo__inner, .event-photo[data-slot="bottom"] .event-photo__inner, .event-photo[data-slot="top"] .event-photo__inner { --tilt: 0deg; --scale: 1; --shift-x: 0%; } .event-photo[data-slot="exit-top"] .event-photo__inner { --tilt: 22deg; --scale: 0.92; } .event-photo[data-slot="enter-bottom"] .event-photo__inner { --tilt: -22deg; --scale: 0.92; } .event-photo[data-slot="bottom"] .event-photo__inner { --tilt: -14deg; } .event-photo[data-slot="middle"] .event-photo__inner { --tilt: 0deg; --scale: 1.42; --shift-x: -14%; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4), 0 18px 36px rgba(0, 0, 0, 0.22); } .event-photo[data-slot="top"] .event-photo__inner { --tilt: 14deg; } @media (max-width: 1200px) { .eventos__wheel-stage { width: clamp(300px, 38vw, 560px); height: clamp(540px, 64vw, 980px); } .event-photo { width: clamp(220px, 28vw, 420px); } } @media (max-width: 1024px) { .eventos { aspect-ratio: auto; min-height: 0; max-height: none; align-items: stretch; } .eventos__inner { grid-template-columns: 1fr; padding-right: clamp(var(--space-6, 1.5rem), 5vw, var(--space-16, 4rem)); } .eventos__copy, .eventos__wheel, .eventos__controls { grid-column: 1; grid-row: auto; } .eventos__copy { order: 1; } .eventos__wheel { order: 2; justify-content: center; } .eventos__controls { order: 3; } .eventos__wheel-stage { width: 100%; max-width: 480px; aspect-ratio: 4 / 3; height: auto; margin-inline: auto; } .event-photo { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: center; transform: none; opacity: 0; transition: opacity 0.4s ease-out; } .event-photo__inner { transform: scale(0.95); transition: transform 0.4s ease-out; } .event-photo[data-slot="middle"] { opacity: 1; } .event-photo[data-slot="middle"] .event-photo__inner { --scale: 1; --tilt: 0deg; --shift-x: 0%; transform: scale(1); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22); } } @media (max-width: 640px) { .eventos { padding-block: var(--space-12, 3rem); } .eventos__wheel-stage { max-width: 380px; } } @media (prefers-reduced-motion: reduce) { .event-photo, .event-photo__inner, .event-detail { transition: opacity 0.2s linear !important; } }