/* 1. RESET Y BASE (ads.css) */
/* Aseguramos que box-sizing esté globalmente definido para evitar problemas */
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden; /* Bloquea el rebote elástico del navegador */
    background: #000;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    overscroll-behavior-y: contain; /* Bloquea el "deslizar para actualizar" de Chrome */
}

/* 2. HEADER SUPERIOR (Logo BRIO) */
/* Se copia de main.css para tener consistencia */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    z-index: 1000; /* Asegura que esté por encima de las fotos y el overlay */
    pointer-events: none; /* Permite que el usuario pueda seguir haciendo scroll debajo del logo */
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);
    height: 100px; /* Suficiente altura para el gradiente */
}

.logo-text {
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    pointer-events: auto; /* Permitimos que el texto sea interactuable si hay enlaces, etc. */
}

/* 3. CONTENEDOR TIKTOK (SNAP SCROLL) */
#ads-container {
    height: calc(100dvh - 65px); /* Restamos la altura de la navbar inferior */
    width: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Oculta scrollbar en Firefox */
}

#ads-container::-webkit-scrollbar {
    display: none; /* Oculta scrollbar en Chrome/Safari */
}

/* 4. CADA SLIDE (PANTALLA COMPLETA) */
.ad-slide { /* Cambiamos el nombre de la clase para diferenciar de remates */
    height: calc(100dvh - 65px);
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    background: #111; /* Fondo oscuro por si no carga la imagen */
    overflow: hidden;
}

/* 5. MANEJO DE IMÁGENES */
.ad-bg-blur { /* Cambiamos el nombre */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(25px) brightness(0.2); /* Fondo más oscuro y desenfocado */
    z-index: 1;
    transform: scale(1.1);
}

.ad-img-main { /* Cambiamos el nombre */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Muestra la imagen completa sin estirarla */
    z-index: 2;
}

/* 6. CAPA DE GRADIENTE PARA LECTURA */
.ad-overlay { /* Cambiamos el nombre y el gradiente */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%; /* Un poco más de altura para la descripción larga */
    background: linear-gradient(to top, 
        rgba(0,0,0,1) 0%, 
        rgba(0,0,0,0.8) 40%, 
        transparent 100%);
    z-index: 3;
}

/* 7. BLOQUE DE CONTENIDO (ANCLADO AL FINAL) */
.ad-content { /* Cambiamos el nombre */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    padding: 20px; /* Un poco más de padding */
    padding-bottom: 35px; /* "Colchón" de seguridad sobre la navbar */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px; /* Más espacio entre elementos */
}

/* 8. ESTILOS DE TEXTO E INDICADORES */
.ad-timer-badge { /* Nuevo estilo para el contador */
    background:#4ade80; /* Fondo oscuro */
    color: #fff; /* Texto verde BRIO */
    padding: 8px 15px;
    border-radius: 40px;
    font-weight: bold;
    font-family: 'Roboto Mono', monospace; /* Fuente más técnica */
    font-size: 12px;
    text-transform: uppercase;
    box-shadow: 0 0 5px #4ade80;
    display: flex;
    align-items: center;
}

.ad-title { /* Título más grande */
    color: white;
    font-size: 25px;
    margin: 0;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.1;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

.ad-vendor-tag { /* Tag de la empresa */
    color: #fff;
    font-size: 15px;
    font-weight: 500;
}

.ad-price { /* Precio */
    font-size: 25px;
    color: white;
    font-weight: 900;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}

.ad-price span {
    color: #4ade80; /* Símbolo de moneda verde */
    margin-right: 5px;
}

.ad-description { /* Descripción del anuncio */
    color: #ccc;
    font-size: 15px;
    line-height: 1;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* 9. BOTÓN DE WHATSAPP */
.ad-whatsapp-btn { /* Cambiamos el nombre de la clase */
    background: #4ade80; /* Verde BRIO */
    color: #fff; /* Texto oscuro para contraste */
    width: 100%;
    padding: 16px; /* Botón más grande y fácil de tocar */
    border-radius: 16px;
    text-align: center;
    text-decoration: none;
    font-weight: 900;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    box-shadow: 0 6px 20px rgba(74, 222, 128, 0.4);
    transition: transform 0.2s ease, background 0.2s ease;
}

.ad-whatsapp-btn:active {
    transform: scale(0.97); /* Feedback táctil */
    background: #3ac06a; /* Un poco más oscuro al presionar */
}