/* ==========================================================================
   1. CONFIGURAÇÕES GERAIS E FONTES
   ========================================================================== */
   * {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* ✅ Previne scroll horizontal na página */
}

html {
    overflow-x: hidden; /* ✅ Previne scroll horizontal global */
}
body { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 700; overflow: hidden; }

/* ==========================================================================
   2. ESTRUTURA PRINCIPAL DO SLIDER
   ========================================================================== */
/* ==========================================================================
   CORREÇÃO PRINCIPAL - ESTRUTURA DO SLIDER (CORRIGIDA)
   ========================================================================== */

.slider-container { 
    position: relative; 
    width: 100vw; 
    height: 100vh; 
    overflow: hidden; /* ✅ ESSENCIAL - Esconde o que vaza */
    cursor: grab; 
}


.logo {
    
    width: 100px;
    height: 100px;
    
}

.slider-container:active { 
    cursor: grabbing; 
}

.slider-wrapper { 
    will-change: transform;
    display: flex; 
    width: 400%; /* 4 slides x 100% cada */
    height: 100%; 
    transition: transform 0.5s ease-in-out;
    /* ✅ CORREÇÃO CRÍTICA: Remove qualquer gap ou espaço */
    gap: 0;
    margin: 0;
    padding: 0;
}

.slide { 
    width: 25%; /* ✅ CORREÇÃO: 25% para 4 slides (100% ÷ 4) */
    min-width: 25%; /* ✅ Garante que não encolha */
    max-width: 25%; /* ✅ Garante que não cresça */
    height: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    color: #fff;
    /* ✅ Remove margens/paddings que podem causar vazamento */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* ✅ Previne overflow interno */
    overflow: hidden;
    flex-shrink: 0; /* ✅ Impede que o slide encolha */
}
/* ==========================================================================
   3. COMPONENTES GLOBAIS (Reutilizados nos slides)
   ========================================================================== */
.container { max-width: 400px; width: 90%; text-align: center; padding: 20px; }
.header { margin-bottom: 30px; }
.profile-pic {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto 15px;
}
.profile-pic img {
    /* Faz a imagem ocupar 100% da largura/altura da div */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta a imagem para cobrir a área sem distorcer */
    border-radius: 50%; /* Garante que a imagem também seja redonda */
}
h1 { font-size: 1.5em; font-weight: 700; margin: 0; }
.slogan { font-size: 1em; font-weight: 400; margin-top: 10px; }
.links a { display: flex; align-items: center; justify-content: center; padding: 15px; margin-bottom: 15px; border-radius: 8px; text-decoration: none; font-weight: 500; transition: all 0.3s ease; }
.links a:hover { transform: scale(1.05); }
.links a i { margin-right: 12px; font-size: 1.1em; }

/* ==========================================================================
   4. NAVEGAÇÃO (BARRAS E HINT DE "ARRASTE")
   ========================================================================== */
.navigation-bars { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; }
.bar { width: 30px; height: 6px; background-color: rgba(255, 255, 255, 0.3); border-radius: 6px; overflow: hidden; transition: width 0.4s ease-in-out; }
.bar.active { width: 80px; }
.bar-progress { width: 0%; height: 100%; background-color: #FFFFFF; border-radius: 6px; transition: width 0.4s linear; }
.bar.active .bar-progress { width: 100%; }
.swipe-indication { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.5); color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 0.8em; font-weight: 500; z-index: 10; pointer-events: none; animation: fadeInOut 5s ease-in-out forwards; }
@keyframes fadeInOut { 0% { opacity: 0; } 20% { opacity: 0.7; } 80% { opacity: 0.7; } 100% { opacity: 0; } }
@media (pointer: coarse) { .swipe-indication { display: none; } }

/* ==========================================================================
   5. ESTILOS ESPECÍFICOS DOS SLIDES
   ========================================================================== */

/* --- SLIDE 1: O PROFISSIONAL --- */
#slide1 { background-color: #0D1117; background-image: radial-gradient(ellipse at top, #0f3d22, #0D1117 70%); }
#slide1 .profile-pic {
    border: 3px solid transparent;
    background-image: linear-gradient(#0D1117, #0D1117), linear-gradient(to right, #39d47a, #1e59a8), url('https://i.ibb.co/LZnY7R3/torre-logo-fundp-tns.png');
    background-origin: border-box;
    background-clip: content-box, border-box;
}
#slide1 .slogan { color: #b0b0b0; }
#slide1 .links a { background-color: rgba(48, 54, 61, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); color: #FFFFFF; }
#slide1 .links a:hover { background: linear-gradient(to right, #39d47a, #1e59a8); border-color: #39d47a; }

/* --- SLIDE 2: VITRINE DE PROJETOS E-COMMERCE --- */
#slide2 {
    background-image: url('png/mesa3.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #1c1c1e;
    position: relative;
    overflow: hidden;
}
#slide2 h1 { font-family: 'Montserrat', sans-serif; font-size: 1.3em; color: #FFFFFF; text-shadow: 0 2px 4px rgba(0,0,0,0.5);}
#slide2 .slogan { color: #f0f0f0; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
#slide2 .links a {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #1c1c1e;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
#slide2 .links a:hover { background: #1c1c1e; color: #FFFFFF; }
.parallax-layer { position: absolute; background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 1; }

/* --- SOMBRAS REALISTAS ADICIONADAS AQUI --- */
.layer1 { 
    position: absolute;
    width: 450px; 
    height: 450px;
    rotate: 35deg; 
    top: 5%; 
    left: -40%; 
    background-image: url('png/celularepar.png'); 
    animation: float-animation 15s ease-in-out infinite;
    filter: drop-shadow(10px 15px 15px rgba(0,0,0,0.3));
}
.layer2 { 
    position: absolute;
    width: 450px; 
    height: 450px; 
    rotate: -5deg;
    bottom: -13%; 
    right: -15%; 
    background-image: url('png/fone.png'); 
    animation: float-animation 19s ease-in-out infinite reverse;
    filter: drop-shadow(10px 15px 15px rgba(0,0,0,0.25));
}
.layer4 { 
    position: absolute;
    width: 420px; 
    height: 420px; 
    rotate: 10deg;
    top: 20%; 
    left: 45%; 
    background-image: url('png/rlg.png'); 
    animation: float-animation 12s ease-in-out infinite;
    filter: drop-shadow(10px 15px 10px rgba(0,0,0,0.2));
}
.s2-content { position: relative; z-index: 10; }
@keyframes float-animation {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-25px) translateX(15px) rotate(5deg); }
    100% { transform: translateY(0px); }
}

/* --- SLIDE 3: LANDING PAGE DE CURSO --- */
#slide3 {
    background-color: #bdb5f59f;
    color: #1a1a1a;
    font-weight: 900;
    align-items: flex-start !important;
    padding: 0 20px 20px 20px; /* Top=0, lados=20, bottom=20 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    
}

.s3-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Cabeçalho */
.s3-header {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   position: relative;
   margin-bottom: 20px;
}

.s3-date-tape { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    margin-bottom: 20px; 
}

.s3-date-tape span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  padding: 8px 15px;
  background-color: #D9D9D9;
  color: #1A1A1A;
  font-size: 1em;
  font-weight: 700;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  border: 1px solid #1A1A1A;
  margin-bottom: 5px;
  white-space: nowrap;
  rotate: 10deg;
  z-index: 10;
}

.s3-main-label {
  background-color: #1A1A1A;
  color: #EFEFEF;
  padding: 15px 20px;
  border-radius: 5px;
  box-shadow: 3px 3px 7px rgba(0,0,0,0.2);
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  z-index: 2;
}

.s3-categories-title { font-size: 1.5em; margin: 0; }
.s3-general-design-title { font-size: 0.9em; font-weight: 400; margin: 0; }

/* Conteúdo principal */
.s3-course-main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    gap: 20px;
}
.s3-course-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.s3-course-title {
    font-size: 2.5em;
    font-weight: 900;
    margin: 0;
}
.s3-course-slogan {
    font-size: 1.2em;
    font-weight: 500;
    color: #555;
    margin: 0;
}
.s3-enroll-button {
    background-color: #1a1a1a;
    color: #fff;
    padding: 15px 30px;
    font-size: 1.2em;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.s3-enroll-button:hover {
    background-color: #333;
    transform: translateY(-2px);
}
.s3-course-image {
    width: 100%;
    max-width: 600px;
    border: 2px solid #1a1a1a;
    border-radius: 10px;
}

/* Caixa de informações */
.s3-info-box {
    background-color: #F0F0F0; 
    border: 2px solid #1A1A1A; 
    border-radius: 15px;
    padding: 15px; 
    text-align: left; 
    width: 100%; 
    box-sizing: border-box;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.s3-info-title { font-size: 1em; margin-bottom: 10px; }
.s3-info-text { font-size: 0.7em; text-transform: none; margin-bottom: 15px; line-height: 1.5; font-weight: 500; }
.s3-button-group { display: flex; gap: 10px; }
.s3-button { padding: 10px; border-radius: 8px; text-decoration: none; text-align: center; font-weight: 700; font-size: 0.8em; transition: all 0.2s ease; }
.s3-button.dark { background-color: #1a1a1a; color: #f0f0f0; flex-basis: 20%; }
.s3-button.light { background-color: #a8f0c0; color: #1a1a1a; border: 2px solid #1a1a1a; flex-basis: 80%; }
.s3-button:hover { transform: translateY(-2px); }

/* Ocultar elementos antigos */
#slide4 { display: none; }
.s3-text-vertical, .s3-sticker-container { display: none; }



/* ==========================================================================
   Estilos para o Slide 4 (Novo Design de E-commerce - CORRIGIDO)
   ========================================================================== */
#slide4 {
    background-color: #f9f9f9;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.new-ecommerce-design {
    display: flex;
    flex-direction: column;
    max-width: 450px;
    width: 95%;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 20px;
}

.product-header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
}

.product-header-nav a {
    color: #333;
    font-size: 1.2em;
}

.product-image-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-bottom: 20px;
}

.product-image-section img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 10px;
}

.image-indicators {
    display: flex;
    gap: 8px;
    margin-top: 15px;
}

.image-indicators span {
    width: 8px;
    height: 8px;
    background-color: #ccc;
    border-radius: 50%;
}

.image-indicators span.active {
    background-color: #333;
}

.product-variations {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.variation-item {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    border: 1px solid #ddd;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.variation-item.active {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.variation-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-details {
    margin-bottom: 25px;
}

.name-price {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 15px;
}

.product-title {
    font-size: 1.5em;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.product-price {
    font-size: 1.4em;
    font-weight: 600;
    color: #007bff;
    margin: 0;
}

.size-selection {
    margin-bottom: 20px;
}

.size-selection .size-label,
.size-selection .size-chart-link {
    font-size: 0.9em;
    color: #555;
    text-decoration: none;
}

.size-selection .size-label {
    font-weight: 700;
    margin-right: 10px;
}

.size-options {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.size-options button {
    padding: 10px 18px;
    border: 1px solid #ddd;
    background-color: #f0f0f0;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9em;
}

.size-options button.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

.product-description {
    font-size: 0.9em;
    color: #777;
    line-height: 1.4;
    font-weight: 400;
}

.product-description a {
    color: #007bff;
    text-decoration: none;
    font-weight: 600;
}

.call-to-action-container {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-top: 20px;
}

.cart-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    border: 1px solid #ddd;
    color: #333;
    font-size: 1.2em;
    transition: all 0.2s ease;
}

.cart-icon:hover {
    background-color: #f0f0f0;
}

.buy-button {
    flex: 1;
    padding: 15px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.buy-button:hover {
    background-color: #0056b3;
}

/* ==========================================================================
   6. REGRAS DE TEMA (Ex: Slide Claro)
   ========================================================================== */
.navigation-bars.light-theme .bar { background-color: rgba(0, 0, 0, 0.2); }
.navigation-bars.light-theme .bar.active .bar-progress { background-color: #000000; }