/* ==========================================================================
   PUBLICIDAD — estilos sobrios
   Tema oscuro de estilos.css (#121212 / #1e1e1e / acento #4CAF50).
   Sin animaciones, sin sticky, sin nada que se mueva solo.
   ========================================================================== */

/* --- Rótulo obligatorio: el anuncio tiene que distinguirse del contenido --- */

.publi-rotulo {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6b6b6b;
    margin-bottom: 5px;
    text-align: left;
}

.publi-caja {
    /* Reservamos el alto antes de pedir el anuncio para que no salte la
       página mientras alguien está leyendo. */
    min-height: 60px;
}

/* --- Rieles laterales (solo escritorio ancho) --- */

.publi-riel {
    position: fixed;
    top: 90px;
    width: 160px;
    z-index: 10;
    display: none; /* lo habilita la media query de abajo */
}

/* El contenedor del sitio mide 900px y está centrado: 450px desde el centro
   hasta el borde, +24px de aire antes del riel. */
.publi-riel-izq { right: calc(50% + 474px); }
.publi-riel-der { left: calc(50% + 474px); }

@media (min-width: 1280px) {
    .publi-riel { display: block; }
}

/* En torneos.html el contenedor es de 1200px, así que el riel necesita más
   ancho de ventana para no pisarlo. */
.pagina-ancha .publi-riel-izq { right: calc(50% + 624px); }
.pagina-ancha .publi-riel-der { left: calc(50% + 624px); }

.pagina-ancha .publi-riel { display: none; }

@media (min-width: 1620px) {
    .pagina-ancha .publi-riel { display: block; }
}

/* --- Bloque de cierre --- */

#publi-cierre {
    width: 100%;
    box-sizing: border-box;
    margin: 22px auto 0 auto;
    max-width: 900px;
}

#publi-cierre:empty { margin: 0; }

/* En torneos.html el contenedor es de 1200px: el bloque acompaña ese ancho
   en vez de quedar angosto y descentrado respecto del contenido. */
.pagina-ancha #publi-cierre { max-width: none; }

/* --- Mercado Libre Afiliados --- */

.publi-afiliados {
    background-color: #1a1a1a;
    border: 1px solid #2c2c2c;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
    font-family: 'Roboto', sans-serif;
}

.publi-afiliados-head {
    margin-bottom: 13px;
}

.publi-afiliados-head h3 {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: .95rem;
    color: #e0e0e0;
    font-weight: 700;
    letter-spacing: .02em;
}

.publi-afiliados-nota {
    display: block;
    margin-top: 4px;
    font-size: .68rem;
    line-height: 1.4;
    color: #777;
}

.publi-afiliados-grilla {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.publi-prod {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background-color: #222;
    border: 1px solid #303030;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .15s ease;
}

.publi-prod:hover { border-color: #4CAF50; }

.publi-prod-img {
    width: 100%;
    /* Las fotos de Mercado Libre vienen sobre fondo blanco. Las limitamos en
       alto para que el bloque no se convierta en un parche brillante dentro
       de una pagina oscura. */
    height: 148px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.publi-prod-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.publi-prod-txt {
    padding: 9px 10px 11px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.publi-prod-nombre {
    font-size: .78rem;
    line-height: 1.25;
    color: #ccc;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.publi-prod-precio {
    font-size: .92rem;
    font-weight: 700;
    color: #4CAF50;
    margin-top: auto;
}

@media (max-width: 560px) {
    .publi-afiliados { padding: 13px; }
    .publi-prod-img { height: 92px; }
    .publi-afiliados-grilla { gap: 8px; }
    .publi-prod-nombre { font-size: .72rem; }
    .publi-prod-precio { font-size: .82rem; }
}

/* --- Pie legal (AdSense exige política de privacidad accesible) --- */

.pie-legal {
    text-align: center;
    padding: 18px 10px 26px 10px;
    font-family: 'Roboto', sans-serif;
}

.pie-legal a {
    color: #6b6b6b;
    font-size: .74rem;
    text-decoration: none;
}

.pie-legal a:hover { color: #4CAF50; text-decoration: underline; }