/* =========================================================
   ANUNCIOS — diseño portado de news4.html (Tana, Magazine/News HTML
   Template): masthead editorial en blanco y negro, tipografia
   Montserrat/Georgia, hero a pantalla ancha, bloque de 3 columnas
   estilo "news-block", galeria con tira de miniaturas y fila de
   categorias. Todo bajo el prefijo .anw- para no chocar con nada del
   sitio (navbar, footer y el modal siguen siendo los del sitio, sin
   tocar — ver pages/anuncios.php e inc/components/modal-announcement.php).

   Nota de tema: el modo CLARO se queda fiel al original (papel blanco,
   tinta negra, sin color) porque es el look que se pidió portar tal
   cual. El modo OSCURO -- el default del sitio, ver base/variables.css
   -- ya no fuerza ese papel blanco encima de una pagina oscura: usa el
   navy y el azul de marca del sitio (--bg-dark, --cyan-glow,
   --primary-blue) para el fondo y los acentos, via body.light-theme
   mas abajo que resuelve cual de los dos esta activo. */

/* .nav-glass es fixed (ver components/navbar-bar.css, ~81px de alto):
   a diferencia de otras paginas que usan --page-shell-padding (130px)
   porque su contenido arranca con margen propio, aqui el hero
   (.anw-hero) es a pantalla ancha y pegado al top, asi que un padding
   mayor al alto real de la navbar deja una franja vacia visible entre
   la barra y la imagen. Se usa el alto de la navbar nada mas. */
.announcements-main {
    padding-top: 81px;
}

.anw {
    /* Oscuro (default): navy + acento azul, tomados de los tokens
       globales del sitio (base/variables.css) para no duplicar la
       paleta ni desincronizarse si esos tokens cambian. */
    --anw-ink: var(--text-main);
    --anw-ink-70: var(--muted-text);
    --anw-ink-50: var(--soft-text);
    --anw-line: rgba(255, 255, 255, 0.14);
    --anw-line-strong: rgba(255, 255, 255, 0.3);
    --anw-paper: var(--bg-dark);
    --anw-wash: rgba(255, 255, 255, 0.055);
    --anw-accent: var(--cyan-glow);
    --anw-accent-strong: var(--primary-blue);
    --anw-on-accent: #04101f;
    --anw-ghost-opacity: 0.14;
    /* Bebas es la fuente unica del sitio (base/variables.css): estos
       dos alias del diseno portado de news4.html apuntan a ella para
       no reintroducir Montserrat/Georgia en esta pagina. */
    --anw-sans: var(--font-bebas);
    --anw-serif: var(--font-bebas);

    background: var(--anw-paper);
    color: var(--anw-ink);
    font-family: var(--anw-serif);
    padding-bottom: 60px;
}

/* Claro: el papel blanco / tinta negra original, sin acento de color
   (asi se ve news4.html de verdad -- el azul es correccion especifica
   del modo oscuro, no un rebranding del claro). */
body.light-theme .anw {
    --anw-ink: #0b0b0c;
    --anw-ink-70: rgba(11, 11, 12, 0.7);
    --anw-ink-50: rgba(11, 11, 12, 0.5);
    --anw-line: rgba(11, 11, 12, 0.16);
    --anw-line-strong: rgba(11, 11, 12, 0.4);
    --anw-paper: #ffffff;
    --anw-wash: rgba(11, 11, 12, 0.045);
    --anw-accent: #0b0b0c;
    --anw-accent-strong: #0b0b0c;
    --anw-on-accent: #ffffff;
    --anw-ghost-opacity: 0.06;
}

.anw * {
    box-sizing: border-box;
}

.anw a {
    color: inherit;
    text-decoration: none;
}

/* Los "post" son <button> (misma convencion que el resto del sitio para
   abrir el modal de detalle, ver [data-announcement-index] en
   assets/js/pages/anuncios.js) -- se resetean a apariencia neutra antes
   de que cada clase de post/CTA le ponga su propio look. */
.anw button {
    font: inherit;
    color: inherit;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
}

.anw img {
    display: block;
    max-width: 100%;
}

.anw-shell {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------------------------------------------------------
   HERO — "news-slider" a pantalla ancha
   --------------------------------------------------------- */
.anw-hero {
    position: relative;
    width: 100%;
    height: min(72vh, 640px);
    min-height: 420px;
    overflow: hidden;
    background: var(--anw-paper);
}

.anw-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.anw-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Un gesto de entrada distinto por slide, en vez del mismo crossfade
   repetido: la saliente se oculta al instante (visibility no esta en
   la transition), asi que solo se ve animar la que entra. Se cicla
   cada 4 slides por nth-of-type -- funciona para cualquier cantidad
   de anuncios sin tocar el PHP ni el JS.

   El ":not(.is-active)" es obligatorio: sin el, esta regla y
   ".anw-hero-slide.is-active" empatan en especificidad (0,2,0 las
   dos) y por orden de aparicion esta gana, asi que el slide activo se
   quedaba con el transform de reposo en vez de resetear a "none" --
   el desplazamiento/zoom quedaba fijo SIEMPRE (activo o no), nunca se
   veia animar y ademas recortaba el texto contra el overflow:hidden
   del contenedor. */
.anw-hero-slide:nth-of-type(4n+2):not(.is-active) {
    transform: translateX(70px);
    transition-timing-function: var(--ease-out);
}

.anw-hero-slide:nth-of-type(4n+3):not(.is-active) {
    transform: translateX(-70px);
    transition-timing-function: var(--ease-out);
}

.anw-hero-slide:nth-of-type(4n):not(.is-active) {
    transform: scale(1.08);
    transition-duration: 1.1s;
}

.anw-hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.anw-hero-tint {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.15) 46%, rgba(0, 0, 0, 0.35) 100%);
}

.anw-hero-box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px clamp(20px, 5vw, 72px) 56px;
    color: #fff;
    max-width: 880px;
}

.anw-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--anw-sans);
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.anw-meta-a {
    font-weight: 700;
    color: var(--anw-accent);
}

.anw-meta-b {
    opacity: 0.72;
}

.anw-meta-a + .anw-meta-b::before {
    content: '\2022';
    margin-right: 10px;
}

/* Sobre foto (hero, galeria) el kicker se queda blanco siempre: el
   acento (--anw-accent) es negro en modo claro y no se leeria sobre el
   velo oscuro de la imagen. */
.anw-hero-box .anw-meta-a,
.anw-slide-box .anw-meta-a {
    color: #fff;
}

.anw-hero-title {
    font-family: var(--anw-sans);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    line-height: 1.12;
    margin: 0 0 14px;
}

.anw-hero-lead {
    font-family: var(--anw-serif);
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.88;
    margin: 0 0 20px;
    max-width: 620px;
}

.anw-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--anw-sans);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    background: var(--anw-accent);
    color: var(--anw-on-accent);
    padding: 13px 22px;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.anw-cta:hover {
    background: transparent;
    color: #fff;
    box-shadow: inset 0 0 0 1px #fff;
}

.anw-hero-nav {
    position: absolute;
    right: clamp(20px, 5vw, 72px);
    bottom: 26px;
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 2;
}

.anw-arrow {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.anw-arrow:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: #fff;
}

.anw-hero-dots {
    display: flex;
    gap: 8px;
}

.anw-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.anw-dot.is-active {
    /* Los controles del hero viven siempre sobre el velo oscuro de la
       foto (.anw-hero-tint), sin importar el tema del sitio -- se
       quedan blancos, igual que .anw-arrow, en vez de seguir
       --anw-accent (que en modo claro es negro y no se leeria ahi). */
    background: #fff;
}

/* ---------------------------------------------------------
   BLOQUE EDITORIAL — "news-block" de 3 columnas
   --------------------------------------------------------- */
.anw-block {
    padding-top: 44px;
}

.anw-grid {
    display: grid;
    gap: 40px;
}

.anw-grid--3col {
    grid-template-columns: 1fr 3.2fr 1fr;
}

.anw-grid--even {
    grid-template-columns: 1fr 1fr 1fr;
}

.anw-title-mid {
    font-family: var(--anw-sans);
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--anw-line-strong);
}

.anw-list {
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------
   POST — patrones compartidos (list / feature / thumb / mini)
   --------------------------------------------------------- */
.anw-post {
    display: block;
    position: relative;
    width: 100%;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.35;
}

.anw-post h4 {
    font-family: var(--anw-sans);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 1.3;
    margin: 0 0 8px;
    color: var(--anw-ink);
}

.anw-post h6 {
    font-family: var(--anw-serif);
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    line-height: 1.35;
    margin: 0;
    color: var(--anw-ink);
}

.anw-post p {
    font-family: var(--anw-serif);
    font-size: 14px;
    color: var(--anw-ink-70);
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.anw-post .anw-meta {
    margin-bottom: 0;
    text-transform: none;
    font-size: 11px;
}

.anw-post:hover h4,
.anw-post:hover h6 {
    color: var(--anw-accent);
}

.anw-post--list {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--anw-line);
}

.anw-post--feature .anw-post-image {
    position: relative;
    aspect-ratio: 5 / 3;
    overflow: hidden;
    background: var(--anw-wash);
    margin-bottom: 16px;
}

.anw-post--feature .anw-post-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.anw-post--feature:hover .anw-post-image::after {
    opacity: 1;
}

.anw-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.anw-post--feature:hover .anw-post-image img {
    transform: scale(1.04);
}

.anw-post--feature h4 {
    font-size: 18px;
    margin-top: 4px;
}

.anw-post--thumb {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 18px;
    padding-top: 4px;
}

.anw-post-thumb {
    width: 84px;
    height: 84px;
    flex: 0 0 auto;
    overflow: hidden;
    background: var(--anw-wash);
}

.anw-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.anw-post--thumb h4,
.anw-post--thumb p,
.anw-post--thumb .anw-meta {
    flex: 1 1 calc(100% - 102px);
    min-width: 160px;
}

.anw-post--thumb h4 {
    margin-bottom: 4px;
}

.anw-post--thumb p {
    -webkit-line-clamp: 1;
}

.anw-post--mini {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--anw-line);
}

.anw-post--mini .anw-meta {
    margin-bottom: 4px;
}

.anw-category-block {
    margin-bottom: 8px;
}

.anw-category-block--compact {
    margin-bottom: 36px;
}

/* auto-fit: con un solo bloque de anuncios ocupa todo el ancho (una
   columna); con dos o mas bloques distintos se reparten en 2 columnas.
   Asi nunca se ve el mismo anuncio repetido en la columna de al lado. */
.anw-subgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 0 40px;
}

.anw-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--anw-sans);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--anw-accent);
    color: var(--anw-accent);
    padding-bottom: 2px;
}

.anw-more:hover {
    opacity: 0.6;
}

.anw-border-line {
    border-top: 2px solid var(--anw-line);
    margin: 36px 0;
}

/* ---------------------------------------------------------
   ANUNCIO / CTA lateral (equivalente al "ads-placeholder")
   --------------------------------------------------------- */
.anw-ad {
    display: block;
    margin-top: 28px;
    padding: 34px 22px;
    text-align: center;
    background: var(--anw-wash);
    transition: background 0.2s ease;
}

.anw-ad:hover {
    background: var(--anw-accent);
    color: var(--anw-on-accent);
}

.anw-ad-kicker {
    display: block;
    font-family: var(--anw-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 10px;
}

.anw-ad-title {
    display: block;
    font-family: var(--anw-sans);
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.3;
}

/* ---------------------------------------------------------
   GALERIA — "photo-news-slider" con tira de miniaturas
   --------------------------------------------------------- */
.anw-block-title {
    font-family: var(--anw-sans);
    font-weight: 800;
    font-size: clamp(28px, 4vw, 44px);
    text-transform: uppercase;
    color: var(--anw-ink);
    position: relative;
    margin: 0 0 24px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
}

.anw-block-title::after {
    content: attr(data-title);
    position: absolute;
    color: var(--anw-accent);
    opacity: var(--anw-ghost-opacity);
    font-size: 3.2em;
    top: -0.55em;
    left: -0.02em;
    white-space: nowrap;
    z-index: -1;
}

.anw-block-title .anw-more {
    font-size: 12px;
}

.anw-gallery-main {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    background: var(--anw-paper);
    overflow: hidden;
}

.anw-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.anw-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Mismo mecanismo de gesto ciclico que .anw-hero-slide (ver arriba, y
   la misma razon para el ":not(.is-active)": sin el, empata en
   especificidad con ".anw-slide.is-active" y por orden en el archivo
   el transform de reposo ganaba tambien en el slide activo -- se
   quedaba fijo desplazado/escalado en vez de animar. */
.anw-slide:nth-of-type(4n+2):not(.is-active) {
    transform: translateX(60px);
    transition-timing-function: var(--ease-out);
}

.anw-slide:nth-of-type(4n+3):not(.is-active) {
    transform: translateX(-60px);
    transition-timing-function: var(--ease-out);
}

.anw-slide:nth-of-type(4n):not(.is-active) {
    transform: scale(1.1);
    transition-duration: 0.9s;
}

.anw-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.anw-slide-box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px clamp(16px, 4vw, 48px);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.78), transparent);
    color: #fff;
}

.anw-slide-box .anw-meta {
    color: #fff;
}

.anw-slide-box h4 {
    color: #fff;
    font-size: clamp(15px, 2vw, 20px);
    margin: 4px 0 6px;
}

.anw-slide-box p {
    color: rgba(255, 255, 255, 0.8);
    max-width: 640px;
    -webkit-line-clamp: 2;
}

.anw-slide-hit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}

.anw-gallery-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.anw-gallery-thumb {
    flex: 0 0 auto;
    width: 90px;
    height: 60px;
    padding: 0;
    border: 2px solid transparent;
    background: none;
    cursor: pointer;
    opacity: 0.55;
    overflow: hidden;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.anw-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.anw-gallery-thumb.is-active,
.anw-gallery-thumb:hover {
    opacity: 1;
    border-color: var(--anw-accent);
}

/* ---------------------------------------------------------
   CATEGORIAS — fila final de 3 columnas
   --------------------------------------------------------- */
.anw-categories {
    padding-top: 8px;
}

/* ---------------------------------------------------------
   Estado vacio / error (hereda .announcements-empty del sitio, ver
   assets/css/pages/anuncios.css, pero centrado dentro del papel .anw)
   --------------------------------------------------------- */
.anw-shell .announcements-empty {
    margin: 40px auto;
}

/* ---------------------------------------------------------
   SCROLL REVEAL — un gesto distinto por seccion, todos disparados por
   ns.utils.observeReveal (ver assets/js/pages/anuncios-news.js), que
   agrega ".is-visible" al elemento observado cuando entra en pantalla
   (o de una vez si hay prefers-reduced-motion / no hay
   IntersectionObserver -- el contenido nunca depende del efecto).

   Cada [data-reveal] es el nodo observado; sus hijos animan via
   ".is-visible" en el propio nodo, y el retraso entre hijos sale de
   su posicion (:nth-child), no de JS -- no hace falta tocar PHP para
   escalonarlos.
   --------------------------------------------------------- */

/* HERO — el texto entra con fade + rise, linea por linea. */
.anw-hero-box > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.anw-hero-box > *:nth-child(1) { transition-delay: 0.05s; }
.anw-hero-box > *:nth-child(2) { transition-delay: 0.15s; }
.anw-hero-box > *:nth-child(3) { transition-delay: 0.26s; }
.anw-hero-box > *:nth-child(4) { transition-delay: 0.37s; }

[data-reveal].is-visible .anw-hero-box > * {
    opacity: 1;
    transform: none;
}

/* SIDEBARS (Recientes / Por confirmar / Más anuncios) — lista que
   sube con fade, escalonada. La tercera columna de Categorias
   ("También te puede interesar") usa su propio gesto mas abajo, junto
   con el resto de esa fila. */
.anw-col--side .anw-list > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

[data-reveal].is-visible .anw-col--side .anw-list > *,
.anw-col--side[data-reveal].is-visible .anw-list > * {
    opacity: 1;
    transform: none;
}

.anw-col--side .anw-list > *:nth-child(1) { transition-delay: 0.02s; }
.anw-col--side .anw-list > *:nth-child(2) { transition-delay: 0.09s; }
.anw-col--side .anw-list > *:nth-child(3) { transition-delay: 0.16s; }
.anw-col--side .anw-list > *:nth-child(4) { transition-delay: 0.23s; }
.anw-col--side .anw-list > *:nth-child(5) { transition-delay: 0.3s; }
.anw-col--side .anw-list > *:nth-child(6) { transition-delay: 0.37s; }

/* GRILLA CENTRAL (category-block) — la tarjeta "aterriza": fade +
   rise + un ligero zoom desde 0.96, distinto del simple fade de las
   listas de al lado. */
.anw-col--main .anw-category-block {
    opacity: 0;
    transform: translateY(36px) scale(0.97);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

[data-reveal].is-visible .anw-category-block {
    opacity: 1;
    transform: none;
}

.anw-subgrid > .anw-category-block:nth-child(2) { transition-delay: 0.14s; }

/* GALERIA — la foto se descubre con un wipe (clip-path), no con fade:
   un gesto de "cortina" que no se repite en ninguna otra seccion. Las
   miniaturas debajo entran con su propio fade escalonado. */
.anw-gallery-main {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.9s var(--ease-out);
}

[data-reveal].is-visible .anw-gallery-main {
    clip-path: inset(0 0 0 0);
}

.anw-gallery-thumb {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), border-color 0.2s ease;
}

[data-reveal].is-visible .anw-gallery-thumb {
    opacity: 1;
    transform: none;
}

.anw-gallery-thumb:nth-child(1) { transition-delay: 0.5s; }
.anw-gallery-thumb:nth-child(2) { transition-delay: 0.56s; }
.anw-gallery-thumb:nth-child(3) { transition-delay: 0.62s; }
.anw-gallery-thumb:nth-child(4) { transition-delay: 0.68s; }
.anw-gallery-thumb:nth-child(5) { transition-delay: 0.74s; }
.anw-gallery-thumb:nth-child(n+6) { transition-delay: 0.8s; }

/* TITULOS DE BLOQUE (galeria) — fade + rise simple, sin escalonado
   (es un solo titulo). */
.anw-block-title {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.anw-block-title.is-visible {
    opacity: 1;
    transform: none;
}

/* LINEAS DIVISORAS — crecen de 0 a su ancho completo, como un trazo. */
.anw-border-line[data-reveal] {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s var(--ease-out);
}

.anw-border-line[data-reveal].is-visible {
    transform: scaleX(1);
}

/* CATEGORIAS — las tres columnas entran desde direcciones distintas
   (izquierda / derecha / abajo), para que la fila se lea como un
   conjunto y no como una repeticion de la grilla central. */
.anw-categories .anw-grid > .anw-col {
    opacity: 0;
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.anw-categories .anw-grid > .anw-col:nth-child(1) { transform: translateX(-36px); }
.anw-categories .anw-grid > .anw-col:nth-child(2) { transform: translateX(36px); transition-delay: 0.08s; }
.anw-categories .anw-grid > .anw-col:nth-child(3) { transform: translateY(30px); transition-delay: 0.16s; }

.anw-categories .anw-grid > .anw-col.is-visible {
    opacity: 1;
    transform: none;
}

.anw-categories .anw-col .anw-post--mini {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s var(--ease-out) 0.2s, transform 0.5s var(--ease-out) 0.2s;
}

.anw-categories .anw-col.is-visible .anw-post--mini {
    opacity: 1;
    transform: none;
}

.anw-categories .anw-post--mini:nth-of-type(1) { transition-delay: 0.22s; }
.anw-categories .anw-post--mini:nth-of-type(2) { transition-delay: 0.28s; }
.anw-categories .anw-post--mini:nth-of-type(3) { transition-delay: 0.34s; }
.anw-categories .anw-post--mini:nth-of-type(4) { transition-delay: 0.4s; }
.anw-categories .anw-post--mini:nth-of-type(5) { transition-delay: 0.46s; }

@media (prefers-reduced-motion: reduce) {
    .anw-hero-box > *,
    .anw-list > *,
    .anw-category-block,
    .anw-gallery-main,
    .anw-gallery-thumb,
    .anw-block-title,
    .anw-border-line[data-reveal],
    .anw-categories .anw-grid > .anw-col,
    .anw-categories .anw-col .anw-post--mini {
        opacity: 1;
        transform: none;
        clip-path: none;
        transition: none;
    }

    /* Los carruseles (hero + galeria) mantienen el crossfade pero sin
       el desplazamiento/zoom por slide (ver los :nth-of-type de arriba). */
    .anw-hero-slide,
    .anw-slide {
        transition: opacity 0.5s ease;
        transform: none !important;
    }
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 992px) {
    .anw-grid--3col {
        grid-template-columns: 1fr 1fr;
    }

    .anw-grid--3col > .anw-col--main {
        grid-column: 1 / -1;
        order: -1;
    }

    .anw-grid--even {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .anw-hero {
        height: 62vh;
        min-height: 380px;
    }

    .anw-grid--3col,
    .anw-grid--even {
        grid-template-columns: 1fr;
    }

    .anw-grid--3col > .anw-col--main {
        order: 0;
    }

    .anw-subgrid {
        grid-template-columns: 1fr;
    }

    .anw-gallery-main {
        aspect-ratio: 4 / 5;
    }
}

@media (max-width: 480px) {
    .anw-shell {
        padding: 0 16px;
    }

    .anw-post--thumb h4,
    .anw-post--thumb p,
    .anw-post--thumb .anw-meta {
        flex-basis: 100%;
        min-width: 0;
    }
}

/* ---------------------------------------------------------
   EN VIDEO — reels del TikTok de Radio Doliv, incrustados con
   el embed oficial (pages/anuncios.php + tiktok.com/embed.js).
   El <iframe> que inyecta TikTok es de otro dominio y siempre
   viene con fondo blanco: no se puede recolorear desde aqui.
   Lo que si hacemos es envolverlo en una .anw-video-card con
   los colores del sitio (--anw-*, cambian con el modo claro/
   oscuro) y una tira de pie propia, para que el bloque blanco
   quede como una "tarjeta" intencional y no un recuadro suelto.
   --------------------------------------------------------- */
.anw-video {
    margin-top: 40px;
}

.anw-video-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}

.anw-video-card {
    display: flex;
    flex-direction: column;
    flex: 0 1 325px;
    max-width: 360px;
    min-width: 260px;
    margin: 0;
    background: var(--anw-wash);
    border: 1px solid var(--anw-line);
    border-radius: 16px;
    padding: 10px;
    gap: 10px;
}

.anw-video-card .anw-video-embed.tiktok-embed {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--anw-wash);
}

.anw-video-caption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 4px 4px;
    font-family: var(--anw-serif);
}

.anw-video-caption-user {
    font-family: var(--anw-sans);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--anw-accent);
}

.anw-video-caption-text {
    font-size: 14px;
    line-height: 1.35;
    color: var(--anw-ink-70);
}

/* Tira "Mas videos del perfil": el creator embed de TikTok, a todo el
   ancho de la seccion, dentro de la misma tarjeta tematica. */
.anw-video-feed-label {
    margin: 32px 0 12px;
    font-family: var(--anw-sans);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--anw-ink-70);
    text-align: center;
}

.anw-video-feed {
    display: flex;
    justify-content: center;
}

.anw-video-card--feed {
    flex: 1 1 auto;
    width: 100%;
    max-width: 780px;
}

.anw-video-card--feed .anw-video-embed.tiktok-embed {
    min-height: 420px;
}

@media (max-width: 640px) {
    .anw-video-grid {
        gap: 16px;
    }

    .anw-video-card {
        flex-basis: 100%;
        max-width: 100%;
    }

    .anw-video-feed-label {
        margin-top: 24px;
    }
}