/* =========================================================
   CUSTOM EFFECTS — Semanario Tucumano
   Bordes redondeados + zoom al pasar el mouse + parallax
   ========================================================= */

:root {
    --img-radius: 18px;
}

/* -------------------------------------------------------
   1) Bordes redondeados en TODAS las imágenes del sitio
   (se excluyen logos y avisos de cabecera)
   ------------------------------------------------------- */
img {
    border-radius: var(--img-radius);
}

.logo-area img,
.footer-logo img,
.comment-author img,
.comment-author {
    border-radius: 50% !important; /* los avatares se mantienen circulares */
}

/* Banners publicitarios (970x90 y 300x250): se mantienen cuadrados, sin zoom */
.header-advert-area,
.header-advert-area img,
.advert-thumb,
.advert-thumb img {
    border-radius: 0 !important;
}

/* -------------------------------------------------------
   2) Contenedores de imagen: recortan el zoom y
   mantienen el radio también en el contenedor
   ------------------------------------------------------- */
.bg-img,
.blog-post-thumbnail,
.todays-post-thumb,
.editorial-post-thumb,
.dont-miss-post-thumb,
.video-post-thumb,
.single-catagory-post-thumb,
.single-post-thumb,
.single-blog-post-slide {
    border-radius: var(--img-radius);
    overflow: hidden;
}

/* Las áreas de fondo a pantalla completa no llevan esquinas redondeadas */
.footer-area.bg-img,
.catagory-welcome-post-area.bg-img,
.catagory-welcome-post-area .bg-img,
.breadcumb-area.bg-img {
    border-radius: 0;
}

/* -------------------------------------------------------
   3) Efecto zoom al pasar el mouse (imágenes <img>)
   ------------------------------------------------------- */
.blog-post-thumbnail img,
.todays-post-thumb img,
.editorial-post-thumb img,
.dont-miss-post-thumb img,
.video-post-thumb img,
.single-catagory-post-thumb img,
.single-post-thumb img {
    border-radius: var(--img-radius);
    transition: transform .5s ease;
    will-change: transform;
}

.blog-post-thumbnail:hover img,
.todays-post-thumb:hover img,
.editorial-post-thumb:hover img,
.dont-miss-post-thumb:hover img,
.video-post-thumb:hover img,
.single-catagory-post-thumb:hover img,
.single-post-thumb:hover img {
    transform: scale(1.08);
}

/* -------------------------------------------------------
   4) Efecto zoom al pasar el mouse (imágenes de fondo .bg-img)
   No aplica a footer / secciones de bienvenida de categoría
   ------------------------------------------------------- */
.single-blog-post-slide.bg-img {
    transition: transform .6s ease;
    will-change: transform;
}

.single-blog-post-slide.bg-img:hover {
    transform: scale(1.06);
}

/* -------------------------------------------------------
   5) Efecto Parallax
   Las secciones grandes (banner de bienvenida, footer,
   categoría) se mueven a distinta velocidad que el scroll.
   El desplazamiento real lo calcula js/custom-effects.js
   ------------------------------------------------------- */
.footer-area.bg-img,
.catagory-welcome-post-area .bg-img,
.single-blog-post-slide.bg-img,
.breadcumb-area.bg-img {
    background-position: center center;
    background-size: cover;
    will-change: background-position;
}

/* En pantallas muy chicas se desactiva el cálculo por rendimiento */
@media (max-width: 576px) {
    .footer-area.bg-img,
    .catagory-welcome-post-area .bg-img,
    .single-blog-post-slide.bg-img,
    .breadcumb-area.bg-img {
        background-position: center center !important;
    }
}

/* =========================================================
   6) Sección Deporte: imágenes más grandes
   ========================================================= */
.deporte-page .blog-post-thumbnail {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.deporte-page .blog-post-thumbnail img {
    width: 100%;
    height: 480px;
    object-fit: cover;
}

@media (max-width: 767px) {
    .deporte-page .blog-post-thumbnail img {
        height: 320px;
    }
}

/* =========================================================
   7) Modo oscuro: letras en blanco
   Refuerza el color de texto en elementos que aún
   conservaban un color oscuro fijo
   ========================================================= */
html[data-theme="dark"] {
    --st-text-heading: #ffffff;
    --st-text-body:    #ffffff;
    --st-text-muted:   #cfcfcf;
}

html[data-theme="dark"] a {
    color: #ffffff;
}

html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus {
    color: var(--st-accent);
}

html[data-theme="dark"] .dont-miss-post-content span,
html[data-theme="dark"] .gazette-single-catagory-post span,
html[data-theme="dark"] .team-member-designation-social-info h5,
html[data-theme="dark"] .post-share-btn-group a,
html[data-theme="dark"] .social-info a,
html[data-theme="dark"] .comment-content span,
html[data-theme="dark"] .widget-title h5,
html[data-theme="dark"] .sidebar-area h5,
html[data-theme="dark"] .sidebar-area p,
html[data-theme="dark"] .sidebar-area span,
html[data-theme="dark"] .sidebar-area li,
html[data-theme="dark"] .single-post-content,
html[data-theme="dark"] .single-post-content p,
html[data-theme="dark"] .single-post-content li,
html[data-theme="dark"] .single-post-content span,
html[data-theme="dark"] blockquote,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] label {
    color: #ffffff;
}

/* La etiqueta de categoría (fondo rojo) ya tiene texto blanco por diseño */