/* ==========================================================
   FLIP CARDS LEXVITA — 1:1 port of demo-3's .flip-card
   (web/demo-3/assets/css/custom.css + the Tailwind utilities
   used in index.php's #compromiso section).
   ========================================================== */

.lv-flip-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    width: 100%;
}

@media (min-width: 768px) {
    .lv-flip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.lv-flip {
    line-height: 1.5;
    perspective: 1600px;
    height: 360px;
    outline: none;
}

.lv-flip__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .7s cubic-bezier(.16, 1, .3, 1);
    transform-style: preserve-3d;
}

.lv-flip:hover .lv-flip__inner,
.lv-flip:focus-within .lv-flip__inner,
.lv-flip:focus .lv-flip__inner {
    transform: rotateY(180deg);
}

.lv-flip__front,
.lv-flip__back {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.25rem;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.lv-flip__front {
    background: linear-gradient(150deg, #202c46 0%, #121926 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

.lv-flip__back {
    background: var(--brand-teal, #1F858A);
    color: #ffffff;
    transform: rotateY(180deg);
}

.lv-flip__back--gold {
    background: var(--brand-gold, #C5A566);
    color: #121926;
}

.lv-flip .lv-flip__number {
    margin-bottom: 1rem;
    font-family: var(--font-serif, "Playfair Display", serif);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    opacity: .6;
}

.lv-flip .lv-flip__title {
    margin: 0;
    font-family: var(--font-serif, "Playfair Display", serif);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.25rem;
    color: inherit;
}

.lv-flip .lv-flip__subtitle {
    display: block;
    margin-top: 1rem;
    font-size: .875rem;
    line-height: 1.25rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .7;
}

.lv-flip .lv-flip__text {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.625;
    color: inherit;
}

/* Scroll-in entrance (demo-3 reveal-left / reveal-scale / reveal-right) */
[data-lv-reveal] .lv-reveal-left,
[data-lv-reveal] .lv-reveal-right,
[data-lv-reveal] .lv-reveal-scale {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: .85s;
    transition-timing-function: cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}

[data-lv-reveal] .lv-reveal-left  { transform: translateX(-50px); }
[data-lv-reveal] .lv-reveal-right { transform: translateX(50px); }
[data-lv-reveal] .lv-reveal-scale { transform: scale(.92); }

[data-lv-reveal] .is-visible {
    opacity: 1;
    transform: none;
}

/* Elementor editor: always show the cards. */
.elementor-editor-active [data-lv-reveal] .lv-flip { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    [data-lv-reveal] .lv-flip { opacity: 1; transform: none; transition: none; }
    .lv-flip__inner { transition: none; }
}

/* Widget wrapper fills its flex parent (avoid min-content collapse). */
.elementor-widget-lexvita_flip_cards { width: 100%; }