:root {
    --bg-body: #f2efe9;
    --bg-header: #f2efe9;
    --bg-laterales: #f2efe9;
    --bg-central: #f2efe9;
    --bg-footer: #443825;

    /* Colores cíclicos para las tarjetas y barras (10 en total) */
    --color-barra-1: #9ade98; /* verde */
    --color-barra-2: #f8c163; /* Amarillo huevo */
    --color-barra-3: #ff7f50; /* Naranja viejo */
    --color-barra-4: #70a1ff; /* Azul claro */
    --color-barra-5: #7bed9f; /* Verde menta */
    --color-barra-6: #ff6b81; /* chicle */
    --color-barra-7: #a29bfe; /* Lila suave */
    --color-barra-8: #dac66e; /* Dorado / Mostaza */
    --color-barra-9: #00cec9; /* Turquesa */
    --color-barra-10: #e84393; /* Frambuesa */
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-body);
}

*, *:before, *:after {
    box-sizing: inherit;
}

.sem-site-header {
    background-color: var(--bg-header);
    border-bottom: 4px solid #d2c7b1;
    padding: 1.2rem 16rem 0.8rem 16rem;
    margin-bottom: 0;
    width: 100%;
    box-sizing: border-box;
}

.sem-page-layout {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 0;
    padding: 0;
    align-items: stretch;
}

.sem-publicidad-lateral {
    background-color: var(--bg-laterales);
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
    flex: 0 0 240px;
}

.sem-publicidad-lateral:first-child {
    border-right: 2px dashed #d2c7b1;
}

.sem-columna-central {
    background-color: var(--bg-central);
    color: #333333;
    flex: 1;
    margin: 0;
    padding: 20px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.sem-publicidad-lateral:last-child {
    border-left: 2px dashed #d2c7b1;
}

.sem-site-footer {
    background-color: var(--bg-footer);
    margin-top: 20px;
}

.sem-tarjeta > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.sem-tarjeta-cuerpo-interno {
    display: grid;
    grid-template-rows: 60% minmax(0, 1fr);
    flex: 1;
    overflow: hidden;
}

.sem-tarjeta.ancho-2.alto-1 .sem-tarjeta-cuerpo-interno,
.sem-tarjeta.ancho-3.alto-1 .sem-tarjeta-cuerpo-interno {
    grid-template-columns: 52% 48%;
    grid-template-rows: 1fr;
}

.sem-tarjeta-cuerpo-interno img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sem-tarjeta-footer-lectura {
    background: #e9ecef;
    color: #292522;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 8px 14px;
    text-align: right;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    transition: filter 0.2s ease;
    width: 100%;
}

/* Ocultar cualquier mención a "Edición N° X" en las tarjetas y barras de notas */
.sem-edicion-num {
    display: none;
}

.sem-tarjeta-footer-lectura a {
    color: inherit;
    text-decoration: none;
}

.sem-tarjeta-footer-lectura a:hover {
    text-decoration: underline;
}

.sem-tarjeta-footer-lectura:hover {
    filter: brightness(0.95);
}

.sem-articulo {
    margin: 0;
    display: flex;
    flex-direction: column;
    padding: 25px 40px;
}

.sem-articulo-nav-superior {
    margin: 0;
    border-top: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background-color: var(--color-barra-1); 
    color: #5a3d0b;
}

.sem-articulo-nav-inferior {
    margin: 0;
    background-color: var(--color-barra-4); 
    color: #0c2461;
}

/* Secuencia cíclica de 10 colores para las tarjetas */
.sem-tarjeta:nth-child(10n + 1) .sem-tarjeta-footer-lectura {
    background-color: var(--color-barra-1); 
    color: #5a3d0b;
}

.sem-tarjeta:nth-child(10n + 2) .sem-tarjeta-footer-lectura {
    background-color: var(--color-barra-2); 
    color: #523706;
}

.sem-tarjeta:nth-child(10n + 3) .sem-tarjeta-footer-lectura {
    background-color: var(--color-barra-3); 
    color: #fff;
}

.sem-tarjeta:nth-child(10n + 4) .sem-tarjeta-footer-lectura {
    background-color: var(--color-barra-4); 
    color: #0c2461;
}

.sem-tarjeta:nth-child(10n + 5) .sem-tarjeta-footer-lectura {
    background-color: var(--color-barra-5); 
    color: #1e3799;
}

.sem-tarjeta:nth-child(10n + 6) .sem-tarjeta-footer-lectura {
    background-color: var(--color-barra-6); 
    color: #fff;
}

.sem-tarjeta:nth-child(10n + 7) .sem-tarjeta-footer-lectura {
    background-color: var(--color-barra-7); 
    color: #2c2c54;
}

.sem-tarjeta:nth-child(10n + 8) .sem-tarjeta-footer-lectura {
    background-color: var(--color-barra-8); 
    color: #4b382a;
}

.sem-tarjeta:nth-child(10n + 9) .sem-tarjeta-footer-lectura {
    background-color: var(--color-barra-9); 
    color: #004d40;
}

.sem-tarjeta:nth-child(10n + 10) .sem-tarjeta-footer-lectura {
    background-color: var(--color-barra-10); 
    color: #fff;
}

.sem-filtro-aviso {
    background: #e9ecef;
    border: 1px solid #ced4da;
    padding: 12px 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    color: #495057;
    margin-left: 20px;
    margin-right: 20px;
}

.sem-filtro-aviso a {
    color: #c9470b;
    font-weight: bold;
    text-decoration: none;
}

.sem-filtro-aviso a:hover {
    text-decoration: underline;
}

.sem-enlace-seccion {
    text-decoration: none;
    display: inline-block;
}

.sem-modulo-publicidad {
    margin-bottom: 15px;
    border-radius: 24px;
    border: 2px dashed #d2c7b1;
    overflow: hidden;
}

.sem-modulo-publicidad img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.sem-tarjeta {
    position: relative;
    overflow: hidden;
}

.sem-tarjeta-text {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.sem-tarjeta-text p {
    margin: 0;
}

.sem-tarjeta-texto, .sem-tarjeta-text {
    padding: 14px 20px;
    box-sizing: border-box;
}

/* =========================================================
   MÓVILES (Por defecto / Hasta 900px)
   ========================================================= */
.sem-foto-escritorio {
    display: none !important; /* Oculta la foto de la col derecha en móviles */
}

.sem-foto-movil {
    display: block;
    margin: 0 0 20px 0;
    width: 100%;
}

.sem-foto-movil img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 10;
}

.sem-cuerpo-dos-col {
    display: flex;
    flex-direction: column;
    gap: 0;
}

@media(max-width: 900px) {
    .sem-tarjeta,
    .sem-tarjeta.ancho-2.alto-1,
    .sem-tarjeta.ancho-3.alto-1 {
        height: auto;
    }

    .sem-tarjeta > a {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .sem-tarjeta-cuerpo-interno,
    .sem-tarjeta.ancho-2.alto-1 .sem-tarjeta-cuerpo-interno,
    .sem-tarjeta.ancho-3.alto-1 .sem-tarjeta-cuerpo-interno {
        display: flex;
        flex-direction: column;
        height: auto;
        grid-template-columns: none;
        grid-template-rows: none;
        position: relative;
    }

    .sem-tarjeta-cuerpo-interno img,
    .sem-sin-imagen {
        width: 100%;
        height: 200px;
        min-height: 200px;
        max-height: 200px;
        object-fit: cover;
    }

    .sem-tarjeta-text,
    .sem-tarjeta-texto {
        display: block;
        height: auto;
        overflow: visible;
        padding: 14px 16px;
    }

    .sem-enlace-seccion {
        position: static;
        margin-bottom: 4px;
        display: block;
    }

    .sem-site-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 1rem 1rem;
        gap: 4px;
    }

    .sem-site-header img {
        width: 100%;
        max-width: 380px;
        height: auto;
    }

    .sem-site-header div {
        width: 100%;
        text-align: center;
        font-size: 0.95rem;
    }

    .sem-page-layout {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 12px;
        align-items: start;
        padding: 0 15px 12px;
        box-sizing: border-box;
        background-color: var(--bg-laterales);
    }

    .sem-columna-central {
        order: 1;
        grid-column: 1 / -1;
        width: auto;
        margin: 0 -15px; 
        padding: 15px 0 0 0;
        border: none;
    }

    .sem-publicidad-lateral:first-child,
    .sem-publicidad-lateral:last-child {
        border: none;
    }

    .sem-publicidad-lateral {
        display: contents;
    }

    .sem-publicidad-izquierda .sem-modulo-publicidad { order: 2; }
    .sem-publicidad-derecha .sem-modulo-publicidad { order: 3; }

    .sem-publicidad-izquierda .sem-modulo-publicidad,
    .sem-publicidad-derecha .sem-modulo-publicidad {
        margin: 0; 
        width: auto;
        box-sizing: border-box;
    }

    .sem-articulo, .sem-filtro-aviso {
        padding-left: 15px;
        padding-right: 15px;
        margin-left: 0;
        margin-right: 0;
    }

    .sem-site-footer {
        margin-top: 30px;
    }

    .sem-modulo-publicidad img {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 0;
    }
}

.sem-tarjeta img,
.sem-tarjeta-cuerpo-interno img {
    object-fit: cover;
    background: #ddd6cf;
}
.sem-articulo figure img {
    width: 100%;
    object-fit: cover;
    height: auto;
}

/* =========================================================
   ORDENADORES / ESCRITORIO (Desde 1200px)
   ========================================================= */
@media (min-width: 1200px) {
    .sem-foto-movil {
        display: none !important; /* Esconde la versión móvil de la foto */
    }

    .sem-foto-escritorio {
        display: block !important; /* Muestra la foto arriba a la derecha */
        margin: 0 0 22px 0;
        width: 100%;
    }

    .sem-foto-escritorio img {
        width: 100%;
        height: auto;
        object-fit: cover;
        aspect-ratio: 16 / 10;
    }

    /* Removido column-count para usar una estructura Grid limpia y precisa */
    .sem-articulo.sem-articulo-con-columnas .sem-cuerpo-dos-col {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 64px;
        width: 100%;
        position: relative;
    }

    /* La línea queda centrada en el espacio entre dos columnas de idéntico ancho. */
    .sem-articulo.sem-articulo-con-columnas .sem-cuerpo-dos-col::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        background: #e3ded8;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .sem-articulo-con-columnas .sem-col-texto {
        padding-right: 0;
    }

    .sem-articulo-con-columnas .sem-col-foto {
        padding-left: 0;
        border-left: 0;
    }
}

/* =========================================================
   FOTOS RECTANGULARES 16:10 EN LAS TARJETAS DE LA PORTADA
   ========================================================= */
.sem-notas {
    grid-auto-rows: minmax(150px, auto);   
}

.sem-tarjeta-cuerpo-interno {
    flex: 1 1 auto;
    grid-template-rows: auto minmax(0, 1fr);   
}

.sem-tarjeta .sem-tarjeta-cuerpo-interno img,
.sem-tarjeta .sem-tarjeta-cuerpo-interno .sem-sin-imagen {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: 50% 30%;   
}

.sem-tarjeta .sem-tarjeta-cuerpo-interno .sem-sin-imagen {
    background: #ddd6cf;
}

@media (min-width: 901px) {
    .sem-tarjeta.ancho-2.alto-1 .sem-tarjeta-cuerpo-interno img,
    .sem-tarjeta.ancho-2.alto-1 .sem-tarjeta-cuerpo-interno .sem-sin-imagen,
    .sem-tarjeta.ancho-3.alto-1 .sem-tarjeta-cuerpo-interno img,
    .sem-tarjeta.ancho-3.alto-1 .sem-tarjeta-cuerpo-interno .sem-sin-imagen {
        align-self: start;
    }
}

.sem-tarjeta-text > * {
    flex-shrink: 0;
}

.sem-tarjeta h2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

@media (min-width: 651px) and (max-width: 900px) {
    .sem-tarjeta > a {
        height: 100%;
    }
}

/* =========================================================
   FOTO A LA DERECHA EN PORTADA (Anulación del Legacy viejo)
   ========================================================= */
@media (min-width: 651px) {
    .sem-tarjeta.imagen-derecha > a {
        display: flex;
        grid-template-columns: none;
        grid-template-rows: none;
    }
}

@media (min-width: 901px) {
    .sem-tarjeta.ancho-2.alto-1.imagen-derecha .sem-tarjeta-cuerpo-interno,
    .sem-tarjeta.ancho-3.alto-1.imagen-derecha .sem-tarjeta-cuerpo-interno {
        grid-template-columns: 48% 52%;
    }
    .sem-tarjeta.ancho-2.alto-1.imagen-derecha .sem-tarjeta-cuerpo-interno > img,
    .sem-tarjeta.ancho-2.alto-1.imagen-derecha .sem-tarjeta-cuerpo-interno > .sem-sin-imagen,
    .sem-tarjeta.ancho-3.alto-1.imagen-derecha .sem-tarjeta-cuerpo-interno > img,
    .sem-tarjeta.ancho-3.alto-1.imagen-derecha .sem-tarjeta-cuerpo-interno > .sem-sin-imagen {
        grid-column: 2;
        grid-row: 1;
    }
    .sem-tarjeta.ancho-2.alto-1.imagen-derecha .sem-tarjeta-text {
        grid-column: 1;
        grid-row: 1;
    }
}

/* Equilibrado final de las columnas del artículo en escritorio */
@media (min-width: 1200px) {
    .sem-articulo.sem-articulo-con-columnas .sem-cuerpo-dos-col {
        align-items: start;
    }
    .sem-articulo-con-columnas .sem-col-texto,
    .sem-articulo-con-columnas .sem-col-foto {
        min-width: 0;
    }
    .sem-articulo-con-columnas .sem-cuerpo-dos-col p {
        margin-top: 0;
        margin-bottom: 1em;
        line-height: 1.65;
    }
}