/* =========================================================
   FULLPAGE SCROLL — CSS Scroll Snap natif
   ========================================================= */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;
    font-size: 14px;
    color: #000;
}

.fp-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.fp-section {
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================
   NAVIGATION DOTS
   ========================================================= */

.fp-nav {
    position: fixed;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.5rem;
}

.fp-nav-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 0;
    outline: none;
}

.fp-nav-dot:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.8);
}

.fp-nav-dot.active {
    background: white;
    border-color: white;
    transform: scale(1.3);
}

/* Dots on light sections */
.fp-nav.light .fp-nav-dot {
    background: rgba(30, 41, 59, 0.2);
    border-color: rgba(30, 41, 59, 0.4);
}
.fp-nav.light .fp-nav-dot.active {
    background: rgb(30, 41, 59);
    border-color: rgb(30, 41, 59);
}

/* =========================================================
   LANGUAGE SWITCHER (fixed top-right on public pages)
   ========================================================= */

.lang-switcher {
    position: fixed;
    top: 1.5rem;
    right: 3.5rem;
    z-index: 101;
}
.lang-switcher a
{
    border: 2px solid rgba(79, 164, 254, .5);
}

/* =========================================================
   VIDEO EMBED RESPONSIVE
   ========================================================= */

.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

.video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* =========================================================
   APP LAYOUT (protected pages)
   ========================================================= */

.app-body {
    background: #f8fafc;
    min-height: 100vh;
    overflow: auto;
}

/* Document cards */
.doc-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.doc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* File type badge colors */
.ext-pdf  { background: #fee2e2; color: #dc2626; }
.ext-doc,
.ext-docx { background: #dbeafe; color: #2563eb; }
.ext-xls,
.ext-xlsx { background: #dcfce7; color: #16a34a; }
.ext-ppt,
.ext-pptx { background: #fef9c3; color: #ca8a04; }
.ext-zip  { background: #f3e8ff; color: #9333ea; }
.ext-other { background: #f1f5f9; color: #64748b; }

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease both;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }


/* =========================================================
   MOTIVA CSS
   ========================================================= */
.bg-motiva
{
    background-color: #ecf4ff;
}
.btn-motiva
{
    background-color: #edf4ff;
    border: 3px solid rgba(79, 164, 254, .5);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .1);
    transition: .3s;
    color: #137ae1;
    font-weight: 700;
    box-sizing: border-box;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 9px 18px;
}
.btn-motiva:hover
{
    background-color: #d4e4ff;
    color: #1273d5 !important;
}
.block-motiva
{
    border: 4px solid #edf4ff;
    box-sizing: border-box;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .1);
    border-radius: 8px;
    background-color: #fff;
}
.label-motiva
{
    font-size: 12px;
    color: #828e9a;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.input-motiva
{
    height: 40px;
    width: 300px;
    border: 2px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 15px;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    display: block;
    padding: .375rem .75rem;
    line-height: 1.5;
    background-color: #fff;
    background-clip: padding-box;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}