/* =========================================================
   DIGITAL AID KIT — TEAM CARDS
   ========================================================= */

#section-speakers .row.g-4 > .col-lg-4 > .hover {
    position: relative !important;
    width: 100% !important;
    height: 330px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
}

#section-speakers .row.g-4 > .col-lg-4 > .hover > img {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

/* Andrés Arévalo */
#section-speakers img[src*="gerald-platforms"] {
    object-position: center center !important;
}

/* Gabriela Arévalo */
#section-speakers img[src*="andrea-team"] {
    object-position: center 18% !important;
}

/* Juan Turry */
#section-speakers img[src*="andres-arevalo-team"] {
    object-position: center 20% !important;
}

/* Information panel — always at bottom */
#section-speakers .row.g-4 > .col-lg-4 .abs.w-100.start-0.bottom-0.z-3 {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    z-index: 3 !important;
}

/* Same panel size and position */
#section-speakers .row.g-4 > .col-lg-4 .bg-blur {
    margin: 0 16px 16px 16px !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
}

/* Same name typography */
#section-speakers .row.g-4 > .col-lg-4 .bg-blur h3 {
    font-size: 24px !important;
    line-height: 1.15 !important;
    margin: 0 0 4px 0 !important;
}

/* Same position/title typography */
#section-speakers .row.g-4 > .col-lg-4 .bg-blur span {
    display: block !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
}

/* =========================================================
   SERVICES CAROUSEL — EQUAL CARD SIZE
   ========================================================= */

#section-tickets .owl-carousel .item {
    height: 100% !important;
}

#section-tickets .owl-carousel .item > div {
    height: 100% !important;
}

#section-tickets .owl-carousel .item .relative.rounded-1 {
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Same image area */
#section-tickets .owl-carousel .item .relative.rounded-1 > img {
    width: 100% !important;
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
    object-fit: cover !important;
}

/* Same content area */
#section-tickets .owl-carousel .item .relative.rounded-1 > .relative {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Keep bottom information aligned */
#section-tickets .owl-carousel .item .relative.rounded-1 .abs.bottom-0 {
    margin-top: auto !important;
}

@media (max-width: 767px) {
    #section-tickets .owl-carousel .item .relative.rounded-1 {
        height: 420px !important;
        min-height: 420px !important;
        max-height: 420px !important;
    }
}

/* =========================================================
   SERVICES — FORCE ALL CARDS TO IDENTICAL HEIGHT
   ========================================================= */

#section-tickets .owl-carousel .owl-stage {
    display: flex !important;
}

#section-tickets .owl-carousel .owl-item {
    display: flex !important;
    height: auto !important;
}

#section-tickets .owl-carousel .owl-item > .item {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
}

#section-tickets .owl-carousel .owl-item > .item > div {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Entire service card */
#section-tickets .owl-carousel .owl-item .ticket-card,
#section-tickets .owl-carousel .owl-item .bg-dark-2 {
    height: 520px !important;
    min-height: 520px !important;
    max-height: 520px !important;
}

/* Keep the three main service columns equal */
#section-tickets .owl-carousel .owl-item {
    min-height: 520px !important;
}

/* Content area */
#section-tickets .owl-carousel .owl-item .py-4 {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Button always at the same bottom position */
#section-tickets .owl-carousel .owl-item .btn-main {
    margin-top: auto !important;
}

/* Prevent text from changing card height */
#section-tickets .owl-carousel .owl-item h2 {
    min-height: 70px !important;
}

#section-tickets .owl-carousel .owl-item h4 {
    min-height: 30px !important;
}

@media (max-width: 767px) {

    #section-tickets .owl-carousel .owl-item {
        min-height: 500px !important;
    }

    #section-tickets .owl-carousel .owl-item .ticket-card,
    #section-tickets .owl-carousel .owl-item .bg-dark-2 {
        height: 500px !important;
        min-height: 500px !important;
        max-height: 500px !important;
    }
}


/* =========================================================
   SERVICES — ALL CARDS EXACTLY THE SAME SIZE
   ========================================================= */

#section-tickets .owl-stage {
    display: flex !important;
    align-items: stretch !important;
}

#section-tickets .owl-item {
    display: flex !important;
    height: auto !important;
}

#section-tickets .owl-item > .item {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
}

#section-tickets .owl-item > .item > .d-ticket {
    height: 245px !important;
    min-height: 245px !important;
    max-height: 245px !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Remove remaining decorative logos */
#section-tickets .d-ticket > img[src*="digital-aid-kit-logo"],
#section-tickets .d-ticket > img[src*="logo-big-white"] {
    display: none !important;
}

/* Barcode stays in the same position */
#section-tickets .d-ticket > img[src*="barcode"] {
    position: absolute !important;
    right: 8px !important;
    top: 20px !important;
}

/* Same title area */
#section-tickets .d-ticket h2 {
    min-height: 58px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
}

/* Same price spacing */
#section-tickets .d-ticket h4 {
    margin-bottom: 18px !important;
}

/* Same body height */
#section-tickets .owl-item > .item > .relative {
    min-height: 210px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Same list height */
#section-tickets .owl-item > .item .ul-check {
    min-height: 145px !important;
    margin-bottom: 15px !important;
}

/* Buttons always aligned */
#section-tickets .owl-item > .item > .btn-main {
    margin-top: auto !important;
    height: 56px !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Desktop */
@media (min-width: 768px) {
    #section-tickets .owl-item > .item {
        min-height: 525px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    #section-tickets .owl-item > .item > .d-ticket {
        height: 230px !important;
        min-height: 230px !important;
    }

    #section-tickets .owl-item > .item > .relative {
        min-height: 200px !important;
    }
}


/* =========================================================
   SERVICES — FINAL STRUCTURE FIX
   ========================================================= */

/* Each carousel item is a vertical card */
#section-tickets .owl-carousel .owl-item {
    display: flex !important;
    align-items: stretch !important;
}

#section-tickets .owl-carousel .owl-item > .item {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

/* Header occupies the full card width */
#section-tickets .owl-carousel .owl-item > .item > .d-ticket {
    width: 100% !important;
    height: 245px !important;
    min-height: 245px !important;
    max-height: 245px !important;
    flex: 0 0 245px !important;
    box-sizing: border-box !important;
}

/* Content goes UNDER the header */
#section-tickets .owl-carousel .owl-item > .item > .relative {
    width: 100% !important;
    min-height: 205px !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
}

/* Keep all content inside the card */
#section-tickets .owl-carousel .owl-item > .item > .relative .py-4 {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Keep the button at the bottom */
#section-tickets .owl-carousel .owl-item > .item > .btn-main {
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    margin-top: auto !important;
    flex: 0 0 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Same title area */
#section-tickets .d-ticket h2 {
    width: calc(100% - 55px) !important;
    min-height: 58px !important;
    margin-bottom: 12px !important;
}

/* Barcode */
#section-tickets .d-ticket img[src*="barcode"] {
    position: absolute !important;
    right: 8px !important;
    top: 20px !important;
}

/* Remove decorative logos completely */
#section-tickets .d-ticket img[src*="digital-aid-kit-logo"],
#section-tickets .d-ticket img[src*="logo-big-white"] {
    display: none !important;
}

/* Equal card height */
#section-tickets .owl-stage {
    display: flex !important;
    align-items: stretch !important;
}

#section-tickets .owl-item {
    height: auto !important;
}

#section-tickets .owl-item > .item {
    min-height: 506px !important;
}

/* Desktop */
@media (min-width: 768px) {
    #section-tickets .owl-item > .item {
        min-height: 506px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    #section-tickets .owl-item > .item {
        min-height: 500px !important;
    }

    #section-tickets .owl-item > .item > .d-ticket {
        height: 230px !important;
        min-height: 230px !important;
        flex-basis: 230px !important;
    }
}


/* =====================================================
   DIGITAL AID KIT — ANIMATED CTA
   ===================================================== */

.dak-cta-cycle {
    position: relative;
    overflow: hidden;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    height: 48px;
    white-space: nowrap;
}

.dak-cta-top {
    min-width: 270px;
    padding-left: 32px !important;
    padding-right: 32px !important;
}

.dak-cta-hero {
    width: 410px;
    max-width: 90vw;
    height: 54px;
    margin: 12px auto 0;
    font-size: 14px;
    letter-spacing: 1.6px;
}

.dak-cta-text {
    position: relative;
    display: block;
    width: 100%;
    height: 22px;
    overflow: hidden;
}

.dak-cta-text > span {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    font-weight: 700;
    letter-spacing: 1.4px;
    animation: dakCtaSwitch 6s infinite ease-in-out;
}

.dak-cta-text > span:nth-child(2) {
    animation-delay: 3s;
    opacity: 0;
    transform: translateY(18px);
}

@keyframes dakCtaSwitch {

    0% {
        opacity: 0;
        transform: translateY(18px);
    }

    10%,
    40% {
        opacity: 1;
        transform: translateY(0);
    }

    50%,
    100% {
        opacity: 0;
        transform: translateY(-18px);
    }
}

@media (max-width: 767px) {

    .dak-cta-top {
        min-width: 210px;
    }

    .dak-cta-hero {
        width: 100%;
        max-width: 340px;
    }
}


/* ==========================================
   DIGITAL AID KIT — HOVER FLIP CTA
   ========================================== */

.dak-flip-cta {
    position: relative;
    overflow: hidden;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    perspective: 700px;
}

.dak-cta-top {
    min-width: 290px;
    height: 48px;
}

.dak-cta-hero {
    width: 430px;
    max-width: 90vw;
    height: 54px;
    margin: 12px auto 0;
}

.dak-flip-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 24px;
    transform-style: preserve-3d;
}

.dak-flip-front,
.dak-flip-back {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-weight: 700;
    letter-spacing: 1.5px;
    backface-visibility: hidden;
    transition:
        transform .45s cubic-bezier(.22,.61,.36,1),
        opacity .45s ease;
}

.dak-flip-front {
    transform: rotateX(0deg);
    opacity: 1;
}

.dak-flip-back {
    transform: rotateX(90deg);
    opacity: 0;
}

.dak-flip-cta:hover .dak-flip-front {
    transform: rotateX(-90deg);
    opacity: 0;
}

.dak-flip-cta:hover .dak-flip-back {
    transform: rotateX(0deg);
    opacity: 1;
}

@media (max-width: 767px) {
    .dak-cta-top {
        min-width: 230px;
    }

    .dak-cta-hero {
        width: 100%;
        max-width: 360px;
    }
}

.dak-cta-text,
.dak-cta-text > span {
    animation: none !important;
}

/* ===== CTA COLORS ===== */

.dak-flip-front {
    background: linear-gradient(135deg, #ff3b1f 0%, #ff5a1f 35%, #ff2d55 100%);
    color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 18px rgba(255, 79, 47, 0.35);
}

.dak-flip-back {
    background: linear-gradient(135deg, #7c5cff 0%, #8a63ff 45%, #6d4dff 100%);
    color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 18px rgba(124, 92, 255, 0.35);
}

/* para que el contenedor del flip no tape el color */
.dak-flip-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.dak-flip-front,
.dak-flip-back {
    width: 100%;
    height: 100%;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

/* =====================================================
   DIGITAL AID KIT — TRUE 3D CUBE CTA
   ===================================================== */

.dak-flip-cta {
    position: relative !important;
    display: inline-block !important;
    overflow: visible !important;
    perspective: 900px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
}

/* TOP BUTTON */
.dak-cta-top {
    width: 300px !important;
    height: 54px !important;
}

/* HERO BUTTON */
.dak-cta-hero {
    width: 420px !important;
    max-width: 90vw !important;
    height: 58px !important;
    margin: 12px auto 0 !important;
}

/* THE CUBE */
.dak-flip-inner {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;

    transform-style: preserve-3d !important;
    transform-origin: center center !important;

    animation: dakCubeRotate 6s infinite cubic-bezier(.65,0,.35,1) !important;
}

/* BOTH FACES */
.dak-flip-front,
.dak-flip-back {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 24px !important;

    border-radius: 10px !important;

    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 1.7px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;

    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;

    animation: none !important;
    opacity: 1 !important;
}

/* PURPLE FACE */
.dak-flip-front {
    transform: rotateX(0deg) translateZ(27px) !important;

    background:
        linear-gradient(
            135deg,
            #7653f6 0%,
            #6d49ed 50%,
            #825dff 100%
        ) !important;

    box-shadow:
        0 8px 24px rgba(112, 76, 245, .30) !important;
}

/* RED LIVE FACE */
.dak-flip-back {
    transform: rotateX(-90deg) translateZ(27px) !important;

    background:
        linear-gradient(
            135deg,
            #ff1f32 0%,
            #ff3b20 45%,
            #ff174d 100%
        ) !important;

    box-shadow:
        0 8px 28px rgba(255, 30, 55, .36),
        0 0 18px rgba(255, 45, 35, .20) !important;
}

/* REMOVE OLD HOVER EFFECT */
.dak-flip-cta:hover .dak-flip-front,
.dak-flip-cta:hover .dak-flip-back {
    opacity: 1 !important;
}

/* REAL CUBE ROTATION */
@keyframes dakCubeRotate {

    0%,
    38% {
        transform: rotateX(0deg);
    }

    48%,
    88% {
        transform: rotateX(90deg);
    }

    98%,
    100% {
        transform: rotateX(180deg);
    }
}

/* MOBILE */
@media (max-width: 767px) {

    .dak-cta-top {
        width: 250px !important;
    }

    .dak-cta-hero {
        width: 340px !important;
        max-width: 90vw !important;
    }
}


/* =====================================================
   DIGITAL AID KIT — 3 FACE ROTATING CTA
   ===================================================== */

.dak-flip-cta{
    position: relative !important;
    display: inline-block !important;
    perspective: 1200px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    padding: 0 !important;
}

.dak-cta-top{
    width: 300px !important;
    height: 56px !important;
}

.dak-cta-hero{
    width: 430px !important;
    max-width: 92vw !important;
    height: 60px !important;
    margin: 14px auto 0 !important;
}

.dak-flip-inner{
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    transform-style: preserve-3d !important;
    transform-origin: center center !important;
    animation: dakTriRoll 9s linear infinite !important;
}

/* 3 faces */
.dak-flip-face{
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 22px !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-align: center !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    box-sizing: border-box !important;
}

/* face 1 - purple */
.dak-face-1{
    background: linear-gradient(135deg, #7b5cff 0%, #6b46f2 50%, #8d6bff 100%) !important;
    box-shadow: 0 10px 30px rgba(115, 86, 255, .32) !important;
    transform: rotateX(0deg) translateZ(34px) !important;
}

/* face 2 - red live */
.dak-face-2{
    background: linear-gradient(135deg, #ff2348 0%, #ff4b2b 45%, #ff1f5a 100%) !important;
    box-shadow: 0 10px 30px rgba(255, 50, 70, .34) !important;
    transform: rotateX(-120deg) translateZ(34px) !important;
}

/* face 3 - aqua / green-blue */
.dak-face-3{
    background: linear-gradient(135deg, #11c5d9 0%, #1fd1b3 50%, #3ae3ff 100%) !important;
    box-shadow: 0 10px 30px rgba(32, 214, 214, .30) !important;
    transform: rotateX(-240deg) translateZ(34px) !important;
}

/* smooth continuous roll */
@keyframes dakTriRoll{
    0%{
        transform: rotateX(0deg);
    }
    33.333%{
        transform: rotateX(120deg);
    }
    66.666%{
        transform: rotateX(240deg);
    }
    100%{
        transform: rotateX(360deg);
    }
}

/* remove old face styles if still present */
.dak-flip-front,
.dak-flip-back{
    all: unset !important;
}

@media (max-width: 767px){
    .dak-cta-top{
        width: 250px !important;
        height: 52px !important;
    }

    .dak-cta-hero{
        width: 340px !important;
        height: 56px !important;
    }

    .dak-flip-face{
        font-size: 12px !important;
        letter-spacing: 1.1px !important;
        padding: 0 16px !important;
    }
}


/* =====================================================
   DIGITAL AID KIT — CLEAN ROTATING CTA
   ===================================================== */

.dak-flip-cta {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    perspective: 700px !important;
}

.dak-cta-top {
    width: 300px !important;
    height: 54px !important;
}

.dak-cta-hero {
    width: 420px !important;
    max-width: 90vw !important;
    height: 58px !important;
    margin: 12px auto 0 !important;
}

.dak-roll-stage {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.dak-roll-face {
    position: absolute !important;
    inset: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    border-radius: 10px !important;

    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    white-space: nowrap !important;

    opacity: 0;
    transform-origin: center center;
    backface-visibility: hidden;

    animation: dakCleanCube 9s infinite cubic-bezier(.6,0,.4,1);
}

/* PURPLE */
.dak-roll-purple {
    background: linear-gradient(135deg,#7654f6,#6844e9,#815fff) !important;
    box-shadow: 0 8px 25px rgba(110,75,245,.30) !important;
    animation-delay: 0s;
}

/* LIVE RED */
.dak-roll-red {
    background: linear-gradient(135deg,#ff1744,#ff3d21,#ff225c) !important;
    box-shadow:
        0 8px 28px rgba(255,35,60,.32),
        0 0 18px rgba(255,40,30,.18) !important;
    animation-delay: 3s;
}

/* AQUA */
.dak-roll-aqua {
    background: linear-gradient(135deg,#00bfcf,#16d0b0,#25c7ff) !important;
    box-shadow: 0 8px 28px rgba(20,205,210,.28) !important;
    animation-delay: 6s;
}

/* one face enters, stays, then rolls away */
@keyframes dakCleanCube {

    0% {
        opacity: 0;
        transform: rotateX(90deg) translateY(18px);
    }

    8% {
        opacity: 1;
        transform: rotateX(0deg) translateY(0);
    }

    28% {
        opacity: 1;
        transform: rotateX(0deg) translateY(0);
    }

    36% {
        opacity: 0;
        transform: rotateX(-90deg) translateY(-18px);
    }

    100% {
        opacity: 0;
        transform: rotateX(-90deg) translateY(-18px);
    }
}

/* kill previous animations */
.dak-flip-inner,
.dak-flip-front,
.dak-flip-back,
.dak-flip-face,
.dak-face-1,
.dak-face-2,
.dak-face-3 {
    animation: none !important;
}

@media (max-width: 767px) {

    .dak-cta-top {
        width: 250px !important;
    }

    .dak-cta-hero {
        width: 340px !important;
    }

    .dak-roll-face {
        font-size: 12px !important;
        letter-spacing: 1px !important;
    }
}