{% load wagtailcore_tags wagtailimages_tags %} .carousel-responsivo__title { text-align: center; margin-bottom: 2rem; font-size: 2rem; font-weight: 700; color: var(--enap-primary-color, #1976d2); } .carousel-responsivo__container { position: relative; width: 100%; height: var(--carousel-height-mobile); overflow: hidden; border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } @media (min-width: 768px) { .carousel-responsivo__container { height: var(--carousel-height-desktop); } } .carousel-responsivo__slide[data-active="true"] { opacity: 1; } /* Efeito Fade */ .carousel-responsivo[data-efeito="fade"] .carousel-responsivo__slide { transition: opacity 0.8s ease-in-out; } /* Efeito Slide */ .carousel-responsivo[data-efeito="slide"] .carousel-responsivo__slide { transform: translateX(100%); transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out; } .carousel-responsivo[data-efeito="slide"] .carousel-responsivo__slide[data-active="true"] { transform: translateX(0); } .carousel-responsivo__slide-button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: rgba(255, 255, 255, 0.9); color: var(--enap-primary-color, #1976d2); text-decoration: none; border-radius: 0.375rem; font-weight: 600; transition: all 0.3s ease; backdrop-filter: blur(10px); } .carousel-responsivo__slide-button:hover, .carousel-responsivo__slide-button:focus { background: white; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); outline: 2px solid var(--enap-primary-color, #1976d2); outline-offset: 2px; } .carousel-responsivo__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%; color: var(--enap-primary-color, #1976d2); font-size: 24px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; z-index: 4; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); } .carousel-responsivo__nav:hover, .carousel-responsivo__nav:focus { background: white; transform: translateY(-50%) scale(1.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); outline: 2px solid var(--enap-primary-color, #1976d2); outline-offset: 2px; } /* Temas de cores */ .carousel-responsivo__slide--primary { --theme-color: var(--enap-primary-color, #1976d2); } .carousel-responsivo__slide--secondary { --theme-color: var(--enap-secondary-color, #424242); } .carousel-responsivo__slide--light { --theme-color: #ffffff; } .carousel-responsivo__slide--dark { --theme-color: #1a1a1a; }