/* Semiótica Tumbada · Navegación: capa sobre el tema, con sus mismas variables. */

.stn-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.stn-saltar {
    position: absolute;
    left: 12px;
    top: -64px;
    z-index: 1000;
    padding: 10px 14px;
    background: var(--st-ink, #171717);
    color: var(--st-paper, #fff);
    font-weight: 700;
    text-decoration: none;
}
.stn-saltar:focus { top: 12px; }
#contenido:focus { outline: none; }

.stn-etiqueta {
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--st-muted, #62625d);
}

/* Portada: la cabecera y las pestañas ya ocupan su lugar antes de que el código las complete.
   Así nada salta cuando entran «Próximos eventos» y la barra. Medidas de portal-vistas. */
body.home .site-header:not(.st-has-upcoming):not(.stn-sin-proximos) {
    box-sizing: border-box;
    min-height: 273px;
    padding: 24px 0 20px;
    margin-bottom: 24px;
}
body.home .site-header:not(.st-has-upcoming):not(.stn-sin-proximos) .site-logo { width: 96px; max-width: 96px; margin: 0 auto; }
html.stn-js body.home [data-stp-tabs-root]:not([data-stp-tabs-ready="true"]) .stp-tabs-nav { min-height: 62px; }
/* Mientras la barra no está lista: guarda su lugar y no muestra las otras secciones, para no descargar sus imágenes. Sin JavaScript se ve todo, como siempre. */
html.stn-js body.home [data-stp-tabs-root]:not([data-stp-tabs-ready="true"]) .stp-tabs-nav { display: block; visibility: hidden; }
html.stn-js body.home [data-stp-tabs-root]:not([data-stp-tabs-ready="true"]) .stp-panel:not(#publicaciones) { display: none; }
@media (max-width: 899px) {
    body.home .site-header:not(.st-has-upcoming):not(.stn-sin-proximos) { min-height: 277px; }
}
@media (max-width: 700px) {
    html.stn-js body.home [data-stp-tabs-root]:not([data-stp-tabs-ready="true"]) .stp-tabs-nav { min-height: 48px; }
}
@media (max-width: 599px) {
    body.home .site-header:not(.st-has-upcoming):not(.stn-sin-proximos) { min-height: 328px; padding: 20px 0 18px; margin-bottom: 20px; }
    body.home .site-header:not(.st-has-upcoming):not(.stn-sin-proximos) .site-logo { width: 88px; max-width: 88px; }
}
@media (max-width: 520px) {
    html.stn-js body.home [data-stp-tabs-root]:not([data-stp-tabs-ready="true"]) .stp-tabs-nav { min-height: 58px; }
}

/* Pestañas que acompañan al bajar. En el celular el tema las pone en relative: esta regla pesa más. */
.st-home-tabs .stp-tabs-nav.stn-fija {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    z-index: 70;
    background: var(--st-paper, #fff);
}
.stn-testigo { height: 1px; margin-bottom: -1px; }
.st-home-tabs .stp-tabs-nav.stn-pegada {
    padding-block: 8px;
    box-shadow: 0 1px 0 var(--st-line, #d7d7d0);
}
.st-home-tabs .stp-tabs-nav.stn-pegada .stp-tab { min-height: 40px; padding-block: 8px; }

/* En el celular, una flecha avisa que hay más pestañas a la derecha. */
.stn-mas { display: none; }
.st-home-tabs .stp-tabs-nav.stn-desborda .stn-mas {
    display: grid;
    place-items: center end;
    position: absolute;
    z-index: 2;
    top: var(--stn-mas-top, 0px);
    right: 1px;
    height: var(--stn-mas-alto, 60px);
    width: 56px;
    padding: 0 10px 0 0;
    border: 0;
    background: linear-gradient(90deg, rgba(245, 245, 241, 0), var(--st-wash, #f5f5f1) 48%);
    color: var(--st-ink, #171717);
    font: 800 26px/1 var(--font-main, sans-serif);
    cursor: pointer;
}

/* Enlaces entre secciones. */
.stn-cruce { margin: 0 0 var(--st-space-3, 24px); font-size: 14px; line-height: 1.5; color: var(--st-muted, #62625d); }
.stn-cruce a,
.stn-cruce-enlace { color: var(--st-ink, #171717); font-weight: 700; text-underline-offset: 3px; }
.stn-cruce-enlace { justify-self: start; font-size: 13px; }

.stn-cronicas {
    display: grid;
    gap: 8px;
    margin-top: var(--st-space-4, 32px);
    padding-top: var(--st-space-2, 16px);
    border-top: 1px solid var(--st-line, #d7d7d0);
}
.stn-cronicas ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.stn-cronicas a { color: var(--st-ink, #171717); font-weight: 700; text-underline-offset: 3px; }
.stn-cronicas li span { display: block; color: var(--st-muted, #62625d); font-size: 13px; }

/* Dispositivos: «Abrir» cubre toda la tarjeta; «Cómo se hizo» queda encima. */
#dispositivos .stn-disp .post-card { position: relative; }
#dispositivos .stn-disp-acciones {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
}
#dispositivos .stn-disp-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 8px;
    white-space: nowrap;
    border: 1px solid var(--st-ink, #171717);
    background: var(--st-paper, #fff);
    color: var(--st-ink, #171717);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
}
#dispositivos .stn-disp-abrir { background: var(--st-ink, #171717); color: var(--st-paper, #fff); }
#dispositivos .stn-disp-abrir::after { content: ''; position: absolute; inset: 0; z-index: 1; }
#dispositivos .stn-disp-como { position: relative; z-index: 2; }
#dispositivos .stn-disp-como:hover { background: var(--st-wash, #f5f5f1); }
#dispositivos .stn-disp-boton:focus-visible { outline: 2px solid var(--st-ink, #171717); outline-offset: 2px; }
#dispositivos .stn-disp-abrir:focus-visible::after { outline: 2px solid var(--st-ink, #171717); outline-offset: -4px; }
#dispositivos .stn-disp-pronto { border-style: dashed; color: var(--st-muted, #62625d); cursor: default; }
#dispositivos .stn-disp-pronto:hover { background: var(--st-paper, #fff); }

/* Lista de eventos: los símbolos más altos que anchos (faro, milpa, agua) se salían de su caja y tapaban la fecha. */
.st-events-agenda-card .st-events-agenda-card-header .st-events-symbol { position: relative; overflow: hidden; }
.st-events-agenda-card .st-events-agenda-card-header .st-events-symbol img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Leyenda del mes en el calendario. */
.stn-leyenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin: 8px 0 14px;
}
.stn-leyenda-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--st-ink, #171717);
    font: 700 13px/1.3 var(--font-main, sans-serif);
    text-align: left;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
}
.stn-leyenda-item img { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }

/* «Sigue leyendo» al final de cada artículo. */
.post-full-content .stn-sigue {
    display: grid;
    gap: var(--st-space-2, 16px);
    margin: var(--st-space-5, 48px) 0 0;
    padding-top: var(--st-space-3, 24px);
    border-top: 2px solid var(--st-ink, #171717);
}
.post-full-content .stn-sigue-titulo {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.post-full-content .stn-sigue-pares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--st-space-2, 16px); }
.post-full-content .stn-sigue-tarjeta {
    display: grid;
    gap: 4px;
    align-content: start;
    padding: 14px 16px;
    border: var(--st-border, 1px solid #171717);
    box-shadow: var(--st-shadow, 3px 3px 0 #171717);
    background: var(--st-paper, #fff);
    color: var(--st-ink, #171717);
    text-decoration: none;
}
.post-full-content .stn-sigue-tarjeta:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--st-ink, #171717); }
.post-full-content .stn-sigue-espacio { background: var(--st-wash, #f5f5f1); }
.post-full-content .stn-sigue-tarjeta strong { font-size: 16px; font-weight: 800; line-height: 1.3; }
.post-full-content .stn-sigue-tarjeta span:last-child { font-size: 14px; color: var(--st-muted, #62625d); }
.post-full-content .stn-sigue-todas { justify-self: start; color: var(--st-ink, #171717); font-weight: 700; text-underline-offset: 3px; }
@media (max-width: 600px) {
    .post-full-content .stn-sigue-pares { grid-template-columns: minmax(0, 1fr); }
}

/* Animaciones de los artículos como video: mismo marco que tenían los GIF. */
.post-full-content video.stn-video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 3 / 1;
    box-sizing: border-box;
    object-fit: cover;
    margin: 44px 0;
    border: 2px solid var(--color-black, #000);
    box-shadow: 3px 3px 0 var(--color-black, #000);
    background: var(--st-wash, #f5f5f1);
}
/* Asfalto conserva los márgenes que tenía su imagen dentro de la misma figura. */
.post-full-content video.stn-video--asfalto { margin: var(--space-l, 44px) 0; }
@media (max-width: 600px) {
    .post-full-content video.stn-video--asfalto { margin: var(--space-m, 28px) 0; }
}

/* Títulos internos de artículos antiguos: en el HTML pasan de h1 a h2 y se ven igual. */
.post-full-content h2[data-stn-nivel] {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
    margin: 52px 0 24px;
}
@media (max-width: 600px) {
    .post-full-content h2[data-stn-nivel] { margin-top: 36px; font-size: 1.35rem; }
}

/* Menú de lectura con las cinco secciones. */
.st-reading-nav .stn-marca { font-weight: 850; text-decoration: none; }

/* Página de error. */
.stn-error {
    display: grid;
    gap: var(--st-space-2, 16px);
    max-width: 720px;
    margin: var(--st-space-4, 32px) auto var(--st-space-5, 48px);
}
.stn-error-titulo {
    margin: 0;
    font-size: clamp(2rem, 7vw, 3.2rem);
    font-weight: 850;
    line-height: 1.02;
    letter-spacing: -0.035em;
}
.stn-error-texto { margin: 0; color: var(--st-muted, #62625d); }
.stn-error-secciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stn-error-secciones a {
    display: block;
    padding: 12px 8px;
    border: var(--st-border, 1px solid #171717);
    box-shadow: var(--st-shadow, 3px 3px 0 #171717);
    background: var(--st-paper, #fff);
    color: var(--st-ink, #171717);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}
.stn-error-secciones a.stn-oscuro { background: var(--st-ink, #171717); color: var(--st-paper, #fff); }
.stn-error-subtitulo { margin: var(--st-space-2, 16px) 0 0; }
.stn-error-recientes { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.stn-error-recientes a { color: var(--st-ink, #171717); font-weight: 700; text-underline-offset: 3px; }
.stn-error-recientes span { display: block; font-size: 13px; color: var(--st-muted, #62625d); }
@media (max-width: 520px) {
    .stn-error-secciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .post-full-content .stn-sigue-tarjeta:hover { transform: none; }
}