/* =========================================================
   GOBIERNO MUNICIPAL DE COYOTEPEC
   coyotepec.css
   CSS GENERAL INSTITUCIONAL
   Administración 2025-2027

   BASE:
   Ayuntamiento Digital / Superfish

   OBJETIVO:
   - Personalización visual institucional
   - No alterar la estructura HTML de la plataforma
   - Compatible con Superfish
   - Responsive
   - Sin dependencia visual de morena.css
   ========================================================= */


/* =========================================================
   1. FUENTE INSTITUCIONAL — SIGNIKA
   ========================================================= */

@font-face {
    font-family: 'Signika';
    font-style: normal;
    font-weight: 300;
    src:
        local('Signika Light'),
        local('Signika-Light'),
        url('https://fonts.gstatic.com/s/signika/v8/vEFU2_JTCgwQ5ejvE_oEE3lJanAd.woff2')
        format('woff2');

    unicode-range:
        U+0100-024F,
        U+0259,
        U+1E00-1EFF,
        U+2020,
        U+20A0-20AB,
        U+20AD-20CF,
        U+2113,
        U+2C60-2C7F,
        U+A720-A7FF;
}

@font-face {
    font-family: 'Signika';
    font-style: normal;
    font-weight: 300;
    src:
        local('Signika Light'),
        local('Signika-Light'),
        url('https://fonts.gstatic.com/s/signika/v8/vEFU2_JTCgwQ5ejvE_oEE3dJag.woff2')
        format('woff2');

    unicode-range:
        U+0000-00FF,
        U+0131,
        U+0152-0153,
        U+02BB-02BC,
        U+02C6,
        U+02DA,
        U+02DC,
        U+2000-206F,
        U+2074,
        U+20AC,
        U+2122,
        U+2191,
        U+2193,
        U+2212,
        U+2215,
        U+FEFF,
        U+FFFD;
}

@font-face {
    font-family: 'Signika';
    font-style: normal;
    font-weight: 400;
    src:
        local('Signika Regular'),
        local('Signika-Regular'),
        url('https://fonts.gstatic.com/s/signika/v8/vEFR2_JTCgwQ5ejvG18mBkho.woff2')
        format('woff2');

    unicode-range:
        U+0100-024F,
        U+0259,
        U+1E00-1EFF,
        U+2020,
        U+20A0-20AB,
        U+20AD-20CF,
        U+2113,
        U+2C60-2C7F,
        U+A720-A7FF;
}

@font-face {
    font-family: 'Signika';
    font-style: normal;
    font-weight: 400;
    src:
        local('Signika Regular'),
        local('Signika-Regular'),
        url('https://fonts.gstatic.com/s/signika/v8/vEFR2_JTCgwQ5ejvG1EmBg.woff2')
        format('woff2');

    unicode-range:
        U+0000-00FF,
        U+0131,
        U+0152-0153,
        U+02BB-02BC,
        U+02C6,
        U+02DA,
        U+02DC,
        U+2000-206F,
        U+2074,
        U+20AC,
        U+2122,
        U+2191,
        U+2193,
        U+2212,
        U+2215,
        U+FEFF,
        U+FFFD;
}

@font-face {
    font-family: 'Signika';
    font-style: normal;
    font-weight: 600;
    src:
        local('Signika SemiBold'),
        local('Signika-SemiBold'),
        url('https://fonts.gstatic.com/s/signika/v8/vEFU2_JTCgwQ5ejvE44CE3lJanAd.woff2')
        format('woff2');

    unicode-range:
        U+0100-024F,
        U+0259,
        U+1E00-1EFF,
        U+2020,
        U+20A0-20AB,
        U+20AD-20CF,
        U+2113,
        U+2C60-2C7F,
        U+A720-A7FF;
}

@font-face {
    font-family: 'Signika';
    font-style: normal;
    font-weight: 600;
    src:
        local('Signika SemiBold'),
        local('Signika-SemiBold'),
        url('https://fonts.gstatic.com/s/signika/v8/vEFU2_JTCgwQ5ejvE44CE3dJag.woff2')
        format('woff2');

    unicode-range:
        U+0000-00FF,
        U+0131,
        U+0152-0153,
        U+02BB-02BC,
        U+02C6,
        U+02DA,
        U+02DC,
        U+2000-206F,
        U+2074,
        U+20AC,
        U+2122,
        U+2191,
        U+2193,
        U+2212,
        U+2215,
        U+FEFF,
        U+FFFD;
}

@font-face {
    font-family: 'Signika';
    font-style: normal;
    font-weight: 700;
    src:
        local('Signika Bold'),
        local('Signika-Bold'),
        url('https://fonts.gstatic.com/s/signika/v8/vEFU2_JTCgwQ5ejvE-oDE3lJanAd.woff2')
        format('woff2');

    unicode-range:
        U+0100-024F,
        U+0259,
        U+1E00-1EFF,
        U+2020,
        U+20A0-20AB,
        U+20AD-20CF,
        U+2113,
        U+2C60-2C7F,
        U+A720-A7FF;
}

@font-face {
    font-family: 'Signika';
    font-style: normal;
    font-weight: 700;
    src:
        local('Signika Bold'),
        local('Signika-Bold'),
        url('https://fonts.gstatic.com/s/signika/v8/vEFU2_JTCgwQ5ejvE-oDE3dJag.woff2')
        format('woff2');

    unicode-range:
        U+0000-00FF,
        U+0131,
        U+0152-0153,
        U+02BB-02BC,
        U+02C6,
        U+02DA,
        U+02DC,
        U+2000-206F,
        U+2074,
        U+20AC,
        U+2122,
        U+2191,
        U+2193,
        U+2212,
        U+2215,
        U+FEFF,
        U+FFFD;
}


/* =========================================================
   2. VARIABLES INSTITUCIONALES
   ========================================================= */

:root {

    --coyotepec-guinda: #8C1130;
    --coyotepec-guinda-oscuro: #6F0D26;
    --coyotepec-guinda-claro: #A12040;

    --coyotepec-dorado: #BF9B30;
    --coyotepec-dorado-claro: #C9A227;

    --coyotepec-blanco: #FFFFFF;
    --coyotepec-negro: #222222;

    --coyotepec-gris-texto: #555555;
    --coyotepec-gris-suave: #777777;
    --coyotepec-gris-borde: #E5E5E5;
    --coyotepec-gris-fondo: #F7F7F7;

}


/* =========================================================
   3. BASE GENERAL
   ========================================================= */

html,
body {
    font-family:
        'Signika',
        Arial,
        Helvetica,
        sans-serif;
}

body {
    margin: 0;

    color:
        var(--coyotepec-gris-texto);

    background:
        #FFFFFF;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
button,
input,
select,
textarea {
    font-family:
        'Signika',
        Arial,
        Helvetica,
        sans-serif;
}

a {
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease;
}

img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   4. ENCABEZADO
   ========================================================= */

.header-page {
    background:
        url('../img/bg_bg_1.jpg') 50% 75%;

    background-size: cover !important;

    border-bottom:
        4px solid var(--coyotepec-dorado);
}


/* =========================================================
   5. NAVEGACIÓN PRINCIPAL
   Compatible con Superfish / Ayuntamiento Digital
   ========================================================= */

#navigationmenu {

    position: relative;

    z-index: 9999;

    width: 100%;

    background:
        #FFFFFF;

    border-top:
        1px solid #E8E1DB;

    border-bottom:
        1px solid #E8E1DB;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, .08);
}


/* =========================================================
   6. MENÚ PRINCIPAL
   ========================================================= */

#nav,
#nav.sf-menu {

    display: flex !important;

    justify-content: center !important;
    align-items: stretch !important;

    flex-wrap: nowrap !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

#nav > li {

    position: relative !important;

    float: none !important;

    flex:
        0 0 auto !important;

    margin: 0 !important;

    padding: 0 !important;

    list-style: none !important;
}

#nav > li > a {

    display: block !important;

    position: relative;

    padding:
        18px 14px !important;

    color:
        var(--coyotepec-guinda) !important;

    background:
        transparent !important;

    text-decoration: none !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    white-space:
        nowrap !important;

    border-left:
        1px solid #EEE7E7;

    box-sizing:
        border-box;

    transition:
        color .25s ease,
        background-color .25s ease;
}

#nav > li:first-child > a {
    border-left: none;
}


/* =========================================================
   7. COLORES SUPERIORES DEL MENÚ
   ========================================================= */

#nav > li:nth-child(1) {
    box-shadow:
        inset 0 3px 0 #FFD205 !important;
}

#nav > li:nth-child(2) {
    box-shadow:
        inset 0 3px 0 #F3A46B !important;
}

#nav > li:nth-child(3) {
    box-shadow:
        inset 0 3px 0 #F76570 !important;
}

#nav > li:nth-child(4) {
    box-shadow:
        inset 0 3px 0 #C377E4 !important;
}

#nav > li:nth-child(5) {
    box-shadow:
        inset 0 3px 0 #1BBC9B !important;
}

#nav > li:nth-child(6) {
    box-shadow:
        inset 0 3px 0 #14B9D5 !important;
}

#nav > li:nth-child(7) {
    box-shadow:
        inset 0 3px 0 #FFD205 !important;
}

#nav > li:nth-child(8) {
    box-shadow:
        inset 0 3px 0 #F3A46B !important;
}

#nav > li:nth-child(9) {
    box-shadow:
        inset 0 3px 0 #F76570 !important;
}

#nav > li:nth-child(10) {
    box-shadow:
        inset 0 3px 0 #C377E4 !important;
}


/* =========================================================
   8. HOVER MENÚ
   ========================================================= */

#nav > li:hover > a,
#nav > li.sfHover > a,
#nav > li > a:focus {

    color:
        var(--coyotepec-dorado) !important;

    background:
        #FAF7F8 !important;
}


/* =========================================================
   9. FLECHAS SUPERFISH
   ========================================================= */

#nav .sf-with-ul {
    padding-right:
        34px !important;
}

#nav .sf-with-ul:after {

    content: '';

    position: absolute;

    top: 50%;
    right: 12px;

    width: 0;
    height: 0;

    margin-top: -2px;

    border:
        5px solid transparent;

    border-top-color:
        var(--coyotepec-guinda);

    transition:
        border-color .2s ease;
}

#nav > li:hover > .sf-with-ul:after,
#nav > li.sfHover > .sf-with-ul:after {

    border-top-color:
        var(--coyotepec-dorado);
}


/* =========================================================
   10. SUBMENÚ PRINCIPAL
   ========================================================= */

#nav ul {

    display: none;

    position: absolute;

    top: 100%;
    left: 0;

    width: 268px;

    min-width: 268px;
    max-width: 268px;

    margin: 0 !important;

    padding: 6px !important;

    background:
        #FFFFFF !important;

    border-top:
        4px solid var(--coyotepec-guinda);

    border-radius:
        0 0 12px 12px;

    box-shadow:
        0 16px 36px rgba(0, 0, 0, .16);

    list-style:
        none !important;

    z-index:
        99999;

    box-sizing:
        border-box;
}


/* Mostrar con Superfish */

#nav li:hover > ul,
#nav li.sfHover > ul {

    display:
        block;
}


/* =========================================================
   11. ELEMENTOS DEL SUBMENÚ
   ========================================================= */

#nav ul li {

    position:
        relative;

    width:
        100%;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;

    border:
        none !important;

    list-style:
        none !important;
}

#nav ul li a {

    display:
        block !important;

    width:
        100% !important;

    padding:
        10px 14px !important;

    margin:
        0 !important;

    color:
        #555555 !important;

    background:
        transparent !important;

    font-size:
        13px !important;

    font-weight:
        600 !important;

    line-height:
        1.35 !important;

    text-decoration:
        none !important;

    white-space:
        normal !important;

    border:
        none !important;

    border-radius:
        8px;

    box-sizing:
        border-box;

    transition:
        color .2s ease,
        background-color .2s ease;
}

#nav ul li a:hover,
#nav ul li.sfHover > a,
#nav ul li a:focus {

    color:
        #FFFFFF !important;

    background:
        var(--coyotepec-guinda) !important;
}


/* =========================================================
   12. FLECHAS DE SUBMENÚ
   ========================================================= */

#nav ul .sf-with-ul {

    padding-right:
        30px !important;
}

#nav ul .sf-with-ul:after {

    top:
        50%;

    right:
        10px;

    margin-top:
        -5px;

    border:
        5px solid transparent;

    border-left-color:
        #999999;
}

#nav ul li:hover > .sf-with-ul:after,
#nav ul li.sfHover > .sf-with-ul:after {

    border-left-color:
        #FFFFFF;
}


/* =========================================================
   13. SEGUNDO NIVEL
   ========================================================= */

#nav ul ul {

    top:
        0;

    left:
        100%;

    margin-left:
        4px !important;

    border-top:
        4px solid var(--coyotepec-guinda);

    border-radius:
        10px;

    padding:
        6px !important;
}


/* =========================================================
   14. SUBMENÚS DE LOS ÚLTIMOS ELEMENTOS
   Evita que salgan fuera de pantalla
   ========================================================= */

#nav > li:last-child > ul,
#nav > li:nth-last-child(2) > ul {

    left:
        auto;

    right:
        0;
}

#nav > li:last-child ul ul,
#nav > li:nth-last-child(2) ul ul {

    left:
        auto;

    right:
        100%;

    margin-left:
        0 !important;

    margin-right:
        4px !important;
}


/* =========================================================
   15. SLIDER PRINCIPAL
   ========================================================= */

.slider-container {

    position:
        relative;

    width:
        100% !important;

    max-width:
        1440px;

    margin:
        20px auto;

    overflow:
        hidden;

    border-radius:
        18px;

    background:
        #F5F5F5;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, .18);
}

.slider {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        1440 / 500;
}

.slide {

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        100%;

    opacity:
        0;

    transition:
        opacity .8s ease-in-out;
}

.slide.active {

    opacity:
        1;

    z-index:
        1;
}

.slide img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


/* =========================================================
   16. FLECHAS DEL SLIDER
   ========================================================= */

.prev,
.next {

    position:
        absolute;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        48px;

    height:
        48px;

    border:
        none;

    border-radius:
        50%;

    background:
        rgba(140, 17, 48, .88);

    color:
        #FFFFFF;

    font-size:
        22px;

    line-height:
        1;

    cursor:
        pointer;

    z-index:
        10;

    transition:
        background-color .25s ease,
        transform .25s ease;
}

.prev:hover,
.next:hover {

    background:
        var(--coyotepec-guinda-oscuro);

    transform:
        translateY(-50%) scale(1.08);
}

.prev {
    left:
        16px;
}

.next {
    right:
        16px;
}


/* =========================================================
   17. INDICADORES SLIDER
   ========================================================= */

.dots {

    position:
        absolute;

    bottom:
        16px;

    left:
        50%;

    transform:
        translateX(-50%);

    display:
        flex;

    gap:
        10px;

    z-index:
        10;
}

.dot {

    width:
        12px;

    height:
        12px;

    border-radius:
        50%;

    background:
        #FFFFFF;

    opacity:
        .5;

    transition:
        all .3s ease;
}

.dot.active {

    background:
        var(--coyotepec-guinda);

    opacity:
        1;

    transform:
        scale(1.2);
}


/* =========================================================
   18. ELEMENTOS GENERALES INSTITUCIONALES
   ========================================================= */

.sb-modern-skin .detailholder,
.header-page .header-pagetitle,
.mobx-top-bar,
.btn,
.lvermas,
.infoarchivesinglepost,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus,
#homeservices,
h1.h1_transparencia {

    background-color:
        var(--coyotepec-guinda) !important;

    color:
        #FFFFFF !important;
}


/* =========================================================
   19. SOMBRA DE TEXTO
   ========================================================= */

.btn,
.lvermas,
.sb-modern-skin .showbiz-title,
.homeservice p,
.homeservice a,
h1.h1_transparencia {

    text-shadow:
        1px 1px 1px rgba(0, 0, 0, .45) !important;
}


/* =========================================================
   20. ICONOS
   ========================================================= */

.iconarchivesinglepost a {

    border-right-color:
        #FFFFFF !important;
}


/* =========================================================
   21. FECHAS
   ========================================================= */

.datearchivesinglepost,
body > div.container.clearfix >
div.grid_8 >
h1.h1_transparencia >
span {

    background-color:
        var(--coyotepec-dorado);

    border-right-color:
        #111111 !important;

    box-shadow:
        inset -1px 0 4px -1px #000;

    text-shadow:
        1px 1px 1px #111111 !important;
}


/* =========================================================
   22. TÍTULOS
   ========================================================= */

.titlearchivesinglepost,
.mobx-title,
h2,
h3,
h4 {

    color:
        var(--coyotepec-guinda) !important;
}


/* =========================================================
   23. SERVICIOS
   ========================================================= */

.homeservice,
.sb-modern-skin .detailholder {

    border-top:
        4px solid var(--coyotepec-dorado);
}

.homeservice p,
.homeservice a {

    color:
        #FFFFFF !important;
}

.homeservice:hover {

    background-color:
        var(--coyotepec-guinda-claro);
}

.homeservice:hover {

    box-shadow:
        0 0 10px rgba(0, 0, 0, .35) !important;
}


/* =========================================================
   24. PAGINACIÓN
   ========================================================= */

.pagination {

    display:
        inline-block;

    padding-left:
        0;

    margin:
        20px 0;
}

.pagination > li {

    display:
        inline;
}

.pagination > li > a,
.pagination > li > span {

    position:
        relative;

    float:
        left;

    margin-left:
        -1px;

    padding:
        12px 18px;

    line-height:
        1.42857143;

    text-decoration:
        none;

    font-family:
        'Signika',
        Arial,
        Helvetica,
        sans-serif;

    font-weight:
        600 !important;

    color:
        var(--coyotepec-guinda) !important;

    background:
        #F7F7F7 !important;

    border:
        1px solid #E5E5E5;

    box-sizing:
        border-box;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {

    margin-left:
        0;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {

    z-index:
        2;

    color:
        #FFFFFF !important;

    background:
        var(--coyotepec-guinda) !important;

    border-color:
        var(--coyotepec-guinda);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {

    z-index:
        3;

    cursor:
        default;

    color:
        #FFFFFF !important;

    background:
        var(--coyotepec-guinda) !important;

    border-color:
        var(--coyotepec-guinda);
}

.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {

    cursor:
        not-allowed;

    opacity:
        .55;
}


/* =========================================================
   25. TRANSPARENCIA
   ========================================================= */

h1.h1_transparencia {

    padding:
        12px;

    box-sizing:
        border-box;
}

#menu_superior {

    float:
        right;
}

#menu_lateral,
#menu_superior,
ul.ul_transparencia {

    list-style:
        none;

    padding-left:
        0;

    margin-top:
        0;

    color:
        #000000;
}

ul.ul_transparencia li {

    height:
        100px !important;

    display:
        inline-block;

    margin-left:
        2%;

    color:
        #000000;
}

ul.ul_transparencia li label {

    font-size:
        60px;

    margin-top:
        5px;

    margin-left:
        0;

    float:
        left;

    color:
        #000000;
}

ul.ul_transparencia li span {

    float:
        left;

    margin-left:
        12px;

    margin-top:
        10px;

    max-width:
        271px;

    font-size:
        18px;

    font-weight:
        400;

    color:
        #000000;
}

ul.ul_transparencia li span a {

    color:
        #000000;
}


/* =========================================================
   26. FRACCIONES / CONTENIDO DE TRANSPARENCIA
   ========================================================= */

body > div.container.clearfix >
div.grid_8 >
div {

    line-height:
        2;

    background:
        #F6F8FA;

    padding:
        20px;

    text-align:
        justify;

    box-sizing:
        border-box;
}

body > div.container.clearfix >
div.grid_8 >
h1.h1_transparencia >
span {

    font-size:
        61px;

    float:
        left;

    margin:
        -12px 15px 0 -12px;

    padding:
        0 5px;
}


/* =========================================================
   27. TABLAS
   ========================================================= */

table {

    width:
        100%;

    margin-bottom:
        20px;

    border-collapse:
        collapse;

    border-spacing:
        0;

    text-align:
        center;
}

table > thead > tr > th {

    vertical-align:
        bottom;

    border-bottom:
        2px solid #DDDDDD;
}

table > tbody > tr:nth-child(odd) > td,
table > tbody > tr:nth-child(odd) > th {

    background:
        #FFFFFF;
}

table > tbody tr {

    border-bottom:
        1px solid #DDDDDD;
}

table > tbody tr td {

    padding:
        10px;
}


/* =========================================================
   28. LIGHTBOX
   ========================================================= */

.mobx-top-bar {

    background:
        var(--coyotepec-guinda) !important;

    box-shadow:
        3px 3px 3px #CCC !important;
}

.mobx-overlay {

    background-color:
        #FFFFFF !important;

    opacity:
        .95 !important;

    background-image:
        url('../img/bg_ok1.jpg');
}

.mobx-title {

    font-weight:
        700 !important;
}

.mobx-bottom-bar {

    background-color:
        #FFFFFF !important;

    border-top:
        1px solid #EBEEF2;
}

.mobx-share-tooltip ::after,
.mobx-thumb-video::after,
.mobx-ui button,
.mobx-video::after,
.mobx-video::before {

    background-color:
        #888 !important;
}

.mobx-counter {

    opacity:
        1 !important;
}

.mobx-top-bar button {

    opacity:
        1 !important;
}

.mobx-desc {

    font-size:
        14px !important;

    line-height:
        25px !important;

    color:
        #5E6D81 !important;
}


/* =========================================================
   29. PRENSA
   ========================================================= */

.showbiz-container {

    border-top:
        1px solid #333;

    border-right:
        1px solid #333;

    border-bottom:
        1px solid #333;
}

.sb-modern-skin .mediaholder_innerwrap img {

    width:
        100%;

    margin-bottom:
        10px;

    background-size:
        cover;

    background-position:
        top !important;
}

.showbiz ul li.sb-modern-skin {

    box-shadow:
        -4px -1px 5px 0 rgba(0, 0, 0, .3);

    border-left:
        1px solid #333;
}

.sb-modern-skin .showbiz-title {

    color:
        #FFFFFF;

    font-weight:
        600;

    line-height:
        27px;

    font-size:
        larger;
}

.descriptionarchivesinglepost {

    width:
        94.5%;
}

.archivesinglepost {

    width:
        96% !important;
}

.datearchivesinglepost {

    border-right:
        1px solid;
}

.datearchivesinglepost p {

    font-size:
        25px !important;
}

.datearchivesinglepost span {

    font-size:
        13px !important;
}

.infoarchivesinglepost,
.sb-modern-skin .detailholder,
.sb-modern-skin .detailholder:hover,
#homeservices {

    background:
        var(--coyotepec-guinda) !important;
}

.iconarchivesinglepost a {

    float:
        left;

    border-right:
        1px solid;

    width:
        24px;

    height:
        26px;

    padding:
        0 21px 37px 25px;

    background-repeat:
        no-repeat;

    background-position:
        center;
}

.datosvisitas {
    background-image:
        url('../img/bg_visto.png');
}

.datosfecha {
    background-image:
        url('../img/bg_publicado.png');
}

.datosTexto {
    background-image:
        url('../img/bg_texto.png');
}

.datosAudio {
    background-image:
        url('../img/bg_audio.png');
}

.datosVideo {
    background-image:
        url('../img/bg_video.png');
}

.titlearchivesinglepost,
h3,
h4 {

    text-shadow:
        1px 1px 1px #FFFFFF;
}

#galeria-prensa {

    list-style:
        none outside !important;

    margin-left:
        -40px;
}

#galeria-prensa li {

    display:
        block;

    height:
        auto;

    float:
        left;

    padding-bottom:
        0;

    margin-left:
        3%;

    margin-top:
        3%;

    margin-bottom:
        2%;

    width:
        30.3%;
}

#galeria-prensa li img {

    width:
        91% !important;

    background-size:
        auto,
        cover;

    background-repeat:
        no-repeat;

    background-position:
        center,
        center;
}

audio {

    width:
        32% !important;

    margin:
        10px 0;
}


/* =========================================================
   30. BOTONES GENERALES
   ========================================================= */

.lvermas {

    display:
        inline-block;

    padding:
        10px;

    margin:
        0;

    font-size:
        15px;

    color:
        #FFFFFF !important;

    background:
        var(--coyotepec-guinda) !important;

    text-decoration:
        none !important;

    border-radius:
        5px;
}

.btn p {

    font-weight:
        400 !important;
}


/* =========================================================
   31. HEMEROTECA MUNICIPAL
   COMPONENTE REUTILIZABLE
   ========================================================= */

.hemeroteca-content {

    --hemeroteca-guinda:
        #6B1930;

    --hemeroteca-guinda-oscuro:
        #521324;

    --hemeroteca-dorado:
        #C9A14A;

    --hemeroteca-gris-borde:
        #E6E6E6;

    --hemeroteca-texto:
        #444444;

    --hemeroteca-texto-suave:
        #666666;

    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    box-sizing:
        border-box !important;

    font-family:
        'Signika',
        Arial,
        Helvetica,
        sans-serif;
}


/* TARJETA */

.hemeroteca-card {

    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        24px !important;

    background:
        #FFFFFF;

    border:
        1px solid var(--hemeroteca-gris-borde);

    border-radius:
        10px;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, .05);

    box-sizing:
        border-box !important;

    overflow:
        hidden !important;
}


/* TÍTULO */

.hemeroteca-card h1 {

    width:
        100%;

    max-width:
        100%;

    margin:
        0;

    color:
        var(--hemeroteca-guinda) !important;

    font-size:
        2rem;

    line-height:
        1.2;

    font-weight:
        700;

    overflow-wrap:
        anywhere;
}


/* LÍNEA */

.hemeroteca-card .linea {

    width:
        90px;

    height:
        3px;

    background:
        var(--hemeroteca-dorado);

    margin:
        14px 0 22px;

    border-radius:
        3px;
}


/* INTRODUCCIÓN */

.hemeroteca-card .intro {

    width:
        100%;

    max-width:
        100%;

    margin-bottom:
        22px;

    padding:
        16px;

    background:
        #FAF8F6;

    border-left:
        4px solid var(--hemeroteca-guinda);

    border-radius:
        8px;

    box-sizing:
        border-box;

    overflow:
        hidden;
}

.hemeroteca-card .intro p {

    width:
        100%;

    max-width:
        100%;

    margin:
        0;

    color:
        var(--hemeroteca-texto);

    line-height:
        1.7;

    text-align:
        justify;

    font-size:
        .95rem;

    overflow-wrap:
        anywhere;
}


/* ENCABEZADO */

.hemeroteca-card .encabezado-listado {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    width:
        100%;

    max-width:
        100%;

    min-width:
        0;

    gap:
        10px;

    margin-bottom:
        16px;

    box-sizing:
        border-box;
}

.hemeroteca-card .encabezado-listado h2 {

    min-width:
        0;

    margin:
        0;

    color:
        var(--hemeroteca-guinda) !important;

    font-size:
        1.2rem;

    overflow-wrap:
        anywhere;
}


/* CONTADOR */

.hemeroteca-card .contador {

    flex:
        0 0 auto;

    padding:
        6px 11px;

    background:
        #F3E9ED;

    color:
        var(--hemeroteca-guinda);

    border-radius:
        20px;

    font-size:
        .78rem;

    font-weight:
        600;

    white-space:
        nowrap;
}


/* BUSCADOR */

.hemeroteca-card .busqueda {

    width:
        100%;

    max-width:
        100%;

    margin-bottom:
        18px;

    box-sizing:
        border-box;
}

.hemeroteca-card .busqueda input {

    display:
        block;

    width:
        100% !important;

    max-width:
        100% !important;

    height:
        auto;

    margin:
        0;

    padding:
        12px 14px;

    border:
        1px solid #D9D9D9;

    border-radius:
        8px;

    font-family:
        'Signika',
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        .95rem;

    line-height:
        1.4;

    outline:
        none;

    box-sizing:
        border-box !important;
}

.hemeroteca-card .busqueda input:focus {

    border-color:
        var(--hemeroteca-guinda);

    box-shadow:
        0 0 0 3px rgba(107, 25, 48, .08);
}


/* LISTA */

.hemeroteca-card .lista {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    width:
        100%;

    max-width:
        100%;

    min-width:
        0;

    box-sizing:
        border-box;

    overflow:
        hidden;
}


/* DOCUMENTO */

.hemeroteca-card .item {

    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(125px, auto);

    align-items:
        center;

    column-gap:
        12px;

    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        14px !important;

    background:
        #FFFFFF;

    border:
        1px solid var(--hemeroteca-gris-borde);

    border-radius:
        9px;

    box-sizing:
        border-box !important;

    overflow:
        hidden !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.hemeroteca-card .item:hover {

    border-color:
        var(--hemeroteca-guinda);

    box-shadow:
        0 3px 10px rgba(0, 0, 0, .05);
}


/* INFORMACIÓN */

.hemeroteca-card .info {

    width:
        auto !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    overflow:
        hidden;

    box-sizing:
        border-box;
}

.hemeroteca-card .tipo {

    display:
        block;

    width:
        100%;

    margin-bottom:
        5px;

    color:
        var(--hemeroteca-guinda);

    font-size:
        .68rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .25px;

    line-height:
        1.2;
}

.hemeroteca-card .info h3 {

    width:
        100%;

    max-width:
        100%;

    margin:
        0;

    color:
        var(--hemeroteca-guinda) !important;

    font-size:
        .98rem;

    line-height:
        1.25;

    font-weight:
        700;

    overflow-wrap:
        anywhere;
}

.hemeroteca-card .info p {

    width:
        100%;

    max-width:
        100%;

    margin:
        5px 0 0;

    color:
        var(--hemeroteca-texto-suave);

    font-size:
        .84rem;

    line-height:
        1.3;

    overflow-wrap:
        anywhere;
}


/* ACCIONES */

.hemeroteca-card .acciones {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    width:
        auto !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    box-sizing:
        border-box;

    overflow:
        hidden;
}


/* BOTÓN */

.hemeroteca-card .btn {

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    width:
        auto !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        9px 12px !important;

    border-radius:
        7px;

    font-family:
        'Signika',
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        .78rem;

    line-height:
        1.2;

    font-weight:
        600;

    text-align:
        center;

    text-decoration:
        none !important;

    white-space:
        normal !important;

    overflow-wrap:
        anywhere;

    box-sizing:
        border-box !important;
}

.hemeroteca-card .btn-ver {

    background:
        var(--hemeroteca-guinda);

    color:
        #FFFFFF !important;
}

.hemeroteca-card .btn-ver:hover {

    background:
        var(--hemeroteca-guinda-oscuro);

    color:
        #FFFFFF !important;

    transform:
        translateY(-1px);
}


/* SIN RESULTADOS */

.hemeroteca-card .sin-resultados {

    display:
        none;

    width:
        100%;

    padding:
        25px 15px;

    text-align:
        center;

    color:
        #777777;

    border:
        1px dashed #DDDDDD;

    border-radius:
        9px;

    box-sizing:
        border-box;
}

.hemeroteca-card .sin-resultados strong {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--hemeroteca-guinda);
}


/* NOTA */

.hemeroteca-card .nota {

    width:
        100%;

    max-width:
        100%;

    margin-top:
        18px;

    padding:
        12px 14px;

    background:
        #FAF8F6;

    border-left:
        4px solid var(--hemeroteca-dorado);

    border-radius:
        7px;

    color:
        #666666;

    font-size:
        .78rem;

    line-height:
        1.55;

    box-sizing:
        border-box;

    overflow-wrap:
        anywhere;
}


/* =========================================================
   32. CITATORIOS
   Compatibilidad específica con #modulo_1741
   ========================================================= */

#modulo_1741 {

    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    overflow:
        hidden !important;

    box-sizing:
        border-box !important;
}

#modulo_1741 .hemeroteca-content,
#modulo_1741 .hemeroteca-card,
#modulo_1741 .item,
#modulo_1741 .busqueda input {

    box-sizing:
        border-box !important;
}

#modulo_1741 .hemeroteca-content {

    font-family:
        'Signika',
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================================================
   33. RESPONSIVE — ESCRITORIO MEDIO
   ========================================================= */

@media (max-width: 1200px) {

    #nav > li > a {

        padding-left:
            11px !important;

        padding-right:
            11px !important;

        font-size:
            13px !important;
    }

}


/* =========================================================
   34. RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 950px) {

    #nav > li > a {

        padding:
            15px 9px !important;

        font-size:
            12px !important;
    }

    #nav ul {

        width:
            248px;

        min-width:
            248px;

        max-width:
            248px;
    }

    .slider-container {

        margin:
            10px auto;

        border-radius:
            14px;
    }

    .prev,
    .next {

        width:
            40px;

        height:
            40px;

        font-size:
            18px;
    }


    .hemeroteca-card {

        padding:
            18px !important;
    }

    .hemeroteca-card .item {

        grid-template-columns:
            minmax(0, 1fr)
            115px;

        column-gap:
            8px;

        padding:
            12px !important;
    }

    .hemeroteca-card .btn {

        padding:
            8px 9px !important;

        font-size:
            .75rem;
    }

}


/* =========================================================
   35. RESPONSIVE — MÓVIL
   ========================================================= */

@media (max-width: 768px) {

    /*
       IMPORTANTE:
       En móvil dejamos de forzar el menú horizontal.
       Superfish conserva sus funciones pero la presentación
       pasa a ser vertical.
    */

    #nav,
    #nav.sf-menu {

        display:
            block !important;

        width:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }

    #nav > li {

        display:
            block !important;

        width:
            100% !important;

        float:
            none !important;

        flex:
            none !important;

        margin:
            0 !important;

        border-bottom:
            1px solid #E8E1DB;
    }

    #nav > li > a {

        display:
            block !important;

        width:
            100% !important;

        padding:
            14px 18px !important;

        font-size:
            15px !important;

        line-height:
            1.3 !important;

        text-align:
            left !important;

        white-space:
            normal !important;

        border-left:
            none !important;

        box-sizing:
            border-box !important;
    }


    /*
       Líneas de color en móvil
    */

    #nav > li:nth-child(n) {

        box-shadow:
            inset 4px 0 0 var(--coyotepec-guinda) !important;
    }


    /*
       Submenús móviles
    */

    #nav ul {

        position:
            static !important;

        top:
            auto !important;

        left:
            auto !important;

        right:
            auto !important;

        display:
            none;

        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            none !important;

        margin:
            0 !important;

        padding:
            0 !important;

        background:
            #FAF7F8 !important;

        border:
            none !important;

        border-radius:
            0 !important;

        box-shadow:
            none !important;

        box-sizing:
            border-box !important;
    }


    /*
       Mostrar submenu cuando Superfish lo activa
    */

    #nav li.sfHover > ul {

        display:
            block !important;
    }


    #nav li:hover > ul {

        /*
           No dependemos solamente de :hover en móvil.
           Superfish puede utilizar sfHover.
        */

        display:
            block;
    }


    #nav ul li {

        width:
            100% !important;

        margin:
            0 !important;

        border:
            none !important;
    }

    #nav ul li a {

        display:
            block !important;

        width:
            100% !important;

        padding:
            12px 28px !important;

        color:
            #555555 !important;

        background:
            transparent !important;

        font-size:
            14px !important;

        line-height:
            1.35 !important;

        text-align:
            left !important;

        border:
            none !important;

        border-bottom:
            1px solid #EEE5E8 !important;

        border-radius:
            0 !important;

        box-sizing:
            border-box !important;
    }

    #nav ul li a:hover,
    #nav ul li.sfHover > a {

        color:
            #FFFFFF !important;

        background:
            var(--coyotepec-guinda) !important;
    }


    /*
       Segundo nivel en móvil
    */

    #nav ul ul {

        position:
            static !important;

        top:
            auto !important;

        left:
            auto !important;

        right:
            auto !important;

        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            none !important;

        margin:
            0 !important;

        padding:
            0 !important;

        border:
            none !important;

        border-radius:
            0 !important;

        box-shadow:
            none !important;
    }

    #nav ul ul li a {

        padding-left:
            42px !important;
    }


    /*
       Flechas móviles
    */

    #nav .sf-with-ul:after {

        right:
            18px;

        border-top-color:
            var(--coyotepec-guinda);
    }

    #nav ul .sf-with-ul:after {

        right:
            18px;

        border:
            5px solid transparent;

        border-top-color:
            #999999;
    }


    /*
       Slider
    */

    .slider-container {

        width:
            100% !important;

        margin:
            10px auto;

        border-radius:
            12px;
    }

    .slider {

        aspect-ratio:
            16 / 9;
    }

    .prev,
    .next {

        width:
            34px;

        height:
            34px;

        font-size:
            16px;
    }

    .prev {
        left:
            8px;
    }

    .next {
        right:
            8px;
    }

    .dots {

        bottom:
            10px;

        gap:
            8px;
    }

    .dot {

        width:
            10px;

        height:
            10px;
    }


    /*
       Hemeroteca
    */

    .hemeroteca-card {

        padding:
            16px !important;
    }

    .hemeroteca-card .encabezado-listado {

        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .hemeroteca-card .contador {

        align-self:
            flex-start;
    }

    .hemeroteca-card .item {

        display:
            block !important;

        width:
            100% !important;

        padding:
            14px !important;
    }

    .hemeroteca-card .info {

        width:
            100% !important;

        margin-bottom:
            12px;
    }

    .hemeroteca-card .acciones {

        display:
            block;

        width:
            100% !important;
    }

    .hemeroteca-card .btn {

        width:
            100% !important;

        max-width:
            100% !important;
    }


    /*
       Paginación
    */

    .pagination > li > a,
    .pagination > li > span {

        padding:
            9px 12px;

        font-size:
            13px;
    }

}


/* =========================================================
   36. RESPONSIVE — PANTALLAS MUY PEQUEÑAS
   ========================================================= */

@media (max-width: 400px) {

    #nav > li > a {

        padding:
            13px 16px !important;

        font-size:
            14px !important;
    }

    #nav ul li a {

        padding:
            11px 24px !important;

        font-size:
            13px !important;
    }

    #nav ul ul li a {

        padding-left:
            38px !important;
    }


    .hemeroteca-card {

        padding:
            12px !important;
    }

    .hemeroteca-card h1 {

        font-size:
            1.5rem;
    }

    .hemeroteca-card .item {

        padding:
            12px !important;
    }

}


/* =========================================================
   37. CORRECCIONES DE SEGURIDAD VISUAL
   Evita que contenidos externos desborden columnas
   ========================================================= */

.container,
.clearfix {

    box-sizing:
        border-box;
}

iframe {

    max-width:
        100%;

    border:
        none;
}

video {

    max-width:
        100%;

    height:
        auto;
}

input,
select,
textarea {

    max-width:
        100%;

    box-sizing:
        border-box;
}


/* =========================================================
   38. FIN
   ========================================================= */

/* =========================================================
   COYOTEPEC — HOMOLOGACION VISUAL CON VENTANILLA DIGITAL
   Capa de estilos globales. No modifica HTML ni hipervinculos.
   Referencia: coyotepecservicios.tech
   Fecha: 2026-08-24
   ========================================================= */

:root {
    --svc-vino: #861b38;
    --svc-vino-oscuro: #3b0918;
    --svc-vino-medio: #6d1029;
    --svc-dorado: #ead4ad;
    --svc-crema: #f5f1eb;
    --svc-papel: #fffdf9;
    --svc-tinta: #1d1719;
    --svc-texto: #3b3134;
    --svc-muted: #6c6063;
    --svc-verde: #15524d;
    --svc-rosa: #f4e6ea;
    --svc-borde: #e7ded4;
    --svc-sombra: 0 18px 46px rgba(59, 9, 24, .10);
    --svc-radio: 18px;
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--svc-tinta) !important;
    background: var(--svc-crema) !important;
    font-family: Aptos, "Segoe UI Variable", "Segoe UI", Arial, sans-serif !important;
    font-size: 16px;
    line-height: 1.6;
}

body,
body * {
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--svc-tinta);
    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 600;
    line-height: 1.12;
}

p,
a,
button,
input,
select,
textarea,
table {
    font-family: Aptos, "Segoe UI Variable", "Segoe UI", Arial, sans-serif !important;
}

a {
    color: var(--svc-vino);
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
}

a:hover,
a:focus {
    color: var(--svc-vino-oscuro);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--svc-dorado) !important;
    outline-offset: 3px;
}

img,
video,
iframe {
    max-width: 100%;
}

/* Encabezado y marca */

#navigationmenu {
    position: relative !important;
    z-index: 9999;
    width: 100%;
    margin: 0 !important;
    padding-top: 0;
    background: rgba(255, 253, 249, .98) !important;
    border-top: 34px solid var(--svc-vino-oscuro) !important;
    border-bottom: 1px solid var(--svc-borde) !important;
    box-shadow: 0 4px 18px rgba(59, 9, 24, .08) !important;
}

#navigationmenu::before {
    content: "GOBIERNO MUNICIPAL DE COYOTEPEC, ESTADO DE MEXICO 2025-2027";
    position: absolute;
    top: -34px;
    left: 0;
    right: 0;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    color: var(--svc-dorado);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .09em;
    text-align: center;
}

#navigationmenu > .container {
    width: min(1180px, calc(100% - 32px)) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
}

#navigationmenu .gridnavigation {
    width: 100% !important;
    margin: 0 !important;
}

#navigationmenu .gridnavigation > a {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 18px auto 12px;
}

#navigationmenu .gridnavigation > a > img {
    display: block;
    width: auto;
    max-width: min(470px, 100%);
    max-height: 100px;
    margin: 0 auto;
    object-fit: contain;
}

#navigationmenu nav {
    position: relative;
    padding-top: 1px;
    border-top: 1px solid var(--svc-borde);
}

#nav,
#nav.sf-menu {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--svc-papel) !important;
    list-style: none !important;
}

#nav > li,
#nav > li:nth-child(n) {
    float: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

#nav > li > a {
    min-height: 54px;
    display: flex !important;
    align-items: center;
    padding: 14px 13px !important;
    color: var(--svc-tinta) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    font-size: 13px !important;
    font-weight: 720 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

#nav > li:first-child > a {
    color: var(--svc-vino) !important;
    background: var(--svc-rosa) !important;
    border-bottom-color: var(--svc-vino) !important;
}

#nav > li:hover > a,
#nav > li.sfHover > a,
#nav > li > a:focus {
    color: var(--svc-vino) !important;
    background: var(--svc-rosa) !important;
    border-bottom-color: var(--svc-vino) !important;
}

#nav ul {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    padding: 8px !important;
    background: var(--svc-papel) !important;
    border: 1px solid var(--svc-borde) !important;
    border-top: 4px solid var(--svc-vino) !important;
    border-radius: 0 0 var(--svc-radio) var(--svc-radio) !important;
    box-shadow: var(--svc-sombra) !important;
}

#nav ul li a {
    padding: 11px 13px !important;
    color: var(--svc-texto) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    white-space: normal !important;
}

#nav ul li a:hover,
#nav ul li.sfHover > a,
#nav ul li a:focus {
    color: #fff !important;
    background: var(--svc-vino) !important;
}

/* Portada y slider */

#navigationmenu + .sectionhome {
    width: min(1180px, calc(100% - 32px)) !important;
    max-width: 1180px !important;
    margin: 24px auto 0 !important;
    overflow: hidden;
    background: var(--svc-vino-oscuro) !important;
    border: 1px solid rgba(59, 9, 24, .08);
    border-radius: 24px;
    box-shadow: 0 24px 58px rgba(52, 8, 21, .18);
}

#navigationmenu + .sectionhome img {
    display: block;
    width: 100%;
}

/* Accesos destacados */

#homeservices {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#homeservices > .container {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    width: min(1180px, calc(100% - 32px)) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 34px 0 28px !important;
}

#homeservices .homeservice {
    float: none !important;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 26px 20px 24px !important;
    color: var(--svc-tinta) !important;
    background: var(--svc-papel) !important;
    border: 1px solid var(--svc-borde);
    border-radius: var(--svc-radio);
    box-shadow: 0 14px 34px rgba(59, 9, 24, .08);
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease;
}

#homeservices .homeservice:hover {
    transform: translateY(-4px);
    box-shadow: var(--svc-sombra);
}

#homeservices .imgserviceopen {
    display: none !important;
}

#homeservices .imgservice {
    position: relative !important;
    inset: auto !important;
    width: 140px !important;
    height: 140px !important;
    margin: 0 auto 18px !important;
    overflow: hidden;
    background: var(--svc-rosa);
    border: 7px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--svc-borde), 0 12px 26px rgba(59, 9, 24, .13);
}

#homeservices .percentagehome {
    position: static !important;
    width: 126px !important;
    height: 126px !important;
    line-height: 126px !important;
    margin: 0 !important;
}

#homeservices .percentagehome img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

#homeservices .percentagehome canvas {
    display: none !important;
}

#homeservices h2 {
    margin: 0 0 8px !important;
    font-size: clamp(24px, 2.2vw, 31px) !important;
}

#homeservices h2 a {
    color: var(--svc-vino) !important;
    text-decoration: none !important;
}

#homeservices p {
    margin: 0 !important;
    color: var(--svc-muted) !important;
    font-size: 15px;
}

.divider {
    width: min(1120px, calc(100% - 48px));
    height: 1px !important;
    margin: 16px auto 28px !important;
    background: linear-gradient(90deg, transparent, var(--svc-dorado), transparent) !important;
    border: 0 !important;
}

/* Contenido y documentos: conserva todos los href existentes */

body > .container.clearfix {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
    width: min(1180px, calc(100% - 32px)) !important;
    max-width: 1180px !important;
    margin: 0 auto 28px !important;
    padding: 0 !important;
}

body > .container.clearfix > .grid_12 {
    float: none !important;
    flex: 0 0 100%;
    width: 100% !important;
    margin: 0 !important;
}

body > .container.clearfix > .grid_4 {
    float: none !important;
    flex: 1 1 calc(33.333% - 16px);
    width: auto !important;
    min-width: 280px;
    margin: 0 !important;
}

section.modulo {
    width: 100% !important;
    margin: 0 0 24px !important;
    padding: 14px !important;
    overflow: hidden;
    background: var(--svc-papel) !important;
    border: 1px solid var(--svc-borde);
    border-radius: var(--svc-radio);
    box-shadow: 0 12px 32px rgba(59, 9, 24, .07);
}

section.modulo > a {
    display: block;
    overflow: hidden;
    border-radius: 13px;
}

section.modulo img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 13px;
}

body > .container.clearfix > .grid_4 section.modulo_Imagen img {
    width: 100%;
    height: clamp(230px, 30vw, 430px);
    padding: 8px;
    background: #fff;
    object-fit: contain;
}

section.modulo iframe {
    display: block;
    width: 100% !important;
    border: 0 !important;
    border-radius: 13px;
    background: #fff;
}

/* Componentes comunes de páginas interiores */

.header-page,
.title-page,
.page-title {
    color: #fff !important;
    background: linear-gradient(135deg, var(--svc-vino-oscuro), var(--svc-vino)) !important;
    border-bottom: 4px solid var(--svc-dorado) !important;
}

.header-page h1,
.header-page h2,
.title-page h1,
.title-page h2,
.page-title h1,
.page-title h2 {
    color: #fff !important;
}

.panel,
.box,
.card,
.well,
.content-box,
.hemeroteca-card {
    color: var(--svc-tinta);
    background: var(--svc-papel) !important;
    border: 1px solid var(--svc-borde) !important;
    border-radius: var(--svc-radio) !important;
    box-shadow: 0 12px 32px rgba(59, 9, 24, .07) !important;
}

.btn,
button,
input[type="submit"],
input[type="button"] {
    color: #fff !important;
    background: var(--svc-vino) !important;
    border: 1px solid var(--svc-vino) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 18px rgba(109, 16, 41, .18);
    font-weight: 750 !important;
    text-decoration: none !important;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    color: #fff !important;
    background: var(--svc-vino-oscuro) !important;
    border-color: var(--svc-vino-oscuro) !important;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
    color: var(--svc-tinta) !important;
    background: #fff !important;
    border: 1px solid #d9d0c7 !important;
    border-radius: 12px !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--svc-vino) !important;
    box-shadow: 0 0 0 3px rgba(134, 27, 56, .10) !important;
}

table {
    width: 100%;
    overflow: hidden;
    color: var(--svc-texto);
    background: var(--svc-papel);
    border: 1px solid var(--svc-borde);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 14px;
}

table th {
    color: #fff !important;
    background: var(--svc-vino) !important;
}

table th,
table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--svc-borde);
}

table tr:last-child td {
    border-bottom: 0;
}

.pagination > li > a,
.pagination > li > span {
    color: var(--svc-vino) !important;
    background: var(--svc-papel) !important;
    border-color: var(--svc-borde) !important;
}

.pagination > .active > a,
.pagination > .active > span {
    color: #fff !important;
    background: var(--svc-vino) !important;
    border-color: var(--svc-vino) !important;
}

/* Franja final para un cierre institucional consistente */

body::after {
    content: "Gobierno Municipal de Coyotepec, Estado de Mexico 2025-2027  ·  Unidos para transformar";
    display: block;
    width: 100%;
    margin-top: 40px;
    padding: 30px 24px;
    color: rgba(255, 255, 255, .76);
    background: var(--svc-tinta);
    border-top: 5px solid var(--svc-vino);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

/* Responsive */

@media (max-width: 980px) {
    #nav > li > a {
        padding: 13px 10px !important;
        font-size: 12px !important;
    }

    #homeservices > .container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (max-width: 768px) {
    #navigationmenu {
        border-top-width: 46px !important;
    }

    #navigationmenu::before {
        top: -46px;
        height: 46px;
        font-size: 10px;
    }

    #navigationmenu .gridnavigation > a > img {
        max-height: 78px;
    }

    #nav,
    #nav.sf-menu {
        display: block !important;
    }

    #nav > li {
        width: 100% !important;
        border-bottom: 1px solid var(--svc-borde);
    }

    #nav > li > a {
        width: 100% !important;
        min-height: 0;
        padding: 13px 16px !important;
        white-space: normal !important;
    }

    #nav ul {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    #navigationmenu + .sectionhome {
        width: calc(100% - 20px) !important;
        margin-top: 10px !important;
        border-radius: 16px;
    }

    #homeservices > .container {
        grid-template-columns: 1fr;
        width: calc(100% - 24px) !important;
        padding-top: 22px !important;
    }

    body > .container.clearfix {
        display: block;
        width: calc(100% - 24px) !important;
    }

    body > .container.clearfix > .grid_4,
    body > .container.clearfix > .grid_12 {
        width: 100% !important;
        min-width: 0;
        margin: 0 0 18px !important;
    }

    section.modulo {
        padding: 10px !important;
        border-radius: 14px;
    }

    body > .container.clearfix > .grid_4 section.modulo_Imagen img {
        height: auto;
        max-height: 520px;
    }

    table {
        display: block;
        overflow-x: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* FIN — COYOTEPEC SERVICIOS DESIGN REFRESH */


/* AJUSTE RESPONSIVE: evita desbordamiento de controles heredados */
html, body {
    overflow-x: hidden !important;
}

.mobx-prev,
.mobx-next {
    max-width: 44px !important;
}


/* =========================================================
   R3 — PORTADA ADAPTABLE Y HOMOGENEIZACIÓN DE CONTENIDO
   ========================================================= */

/* Slider de Feria de San Cristóbal: conserva proporción y nunca invade el ancho */
#navigationmenu + .sectionhome {
    width: min(1180px, calc(100% - 32px)) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3.48 / 1;
    overflow: hidden !important;
}
#navigationmenu + .sectionhome .tp-banner-container,
#navigationmenu + .sectionhome .tp-banner,
#navigationmenu + .sectionhome .tp-banner > ul,
#navigationmenu + .sectionhome .tp-banner > ul > li,
#navigationmenu + .sectionhome .slotholder,
#navigationmenu + .sectionhome .tp-bgimg {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
}
#navigationmenu + .sectionhome .tp-bgimg {
    background-color: var(--svc-vino-oscuro) !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

/* Accesos destacados: cada tarjeta responde al enlace que contiene */
#homeservices .homeservice {
    position: relative;
}
#homeservices .homeservice h2 a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: var(--svc-radio);
}

/* Citatorios y convocatorias: documentos claros, compactos y coherentes */
#modulo_1737,
#modulo_1659,
#modulo_1645 {
    max-width: 900px !important;
    margin: 0 auto 28px !important;
    padding: clamp(16px, 3vw, 28px) !important;
}
#modulo_1737::before,
#modulo_1659::before,
#modulo_1645::before {
    display: block;
    margin: 0 0 18px;
    color: var(--svc-vino);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
}
#modulo_1737::before { content: "Citatorios"; }
#modulo_1659::before { content: "Convocatorias"; }
#modulo_1645::before { content: "Convocatorias"; }

#modulo_1737 > a,
#modulo_1659 > a,
#modulo_1645 > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    color: var(--svc-vino);
    text-decoration: none;
}
#modulo_1737 > a > img,
#modulo_1659 > a > img,
#modulo_1645 > a > img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 650px;
    object-fit: contain;
    box-shadow: 0 12px 30px rgba(59, 9, 24, .10);
}
#modulo_1737 > a::after,
#modulo_1659 > a::after,
#modulo_1645 > a::after {
    content: "Abrir documento";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 20px;
    color: #fff;
    background: var(--svc-vino);
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(109, 16, 41, .18);
    font-weight: 750;
}

/* Encabezados de columnas: banners compactos, no tarjetas vacías */
#modulo_1630,
#modulo_1631,
#modulo_1639 {
    min-height: 0 !important;
    padding: 8px !important;
}
#modulo_1630 > a,
#modulo_1631 > a,
#modulo_1639 > a {
    display: flex;
    min-height: 88px;
    align-items: center;
    justify-content: center;
    background: #fff;
}
#modulo_1630 img,
#modulo_1631 img,
#modulo_1639 img {
    width: 100% !important;
    height: auto !important;
    max-height: 96px;
    padding: 0 !important;
    object-fit: contain !important;
}

/* Oculta integraciones que ya no cargan; los banners y enlaces oficiales se conservan */
#modulo_1634,
#modulo_1632 {
    display: none !important;
}

/* Atención Ciudadana */
#modulo_1638 {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
#modulo_1638 img {
    width: 100% !important;
    height: auto !important;
    border-radius: var(--svc-radio);
    box-shadow: var(--svc-sombra);
}

/* Pie institucional con logo y derechos reservados */
body::after {
    content: "© 2026 Gobierno Municipal de Coyotepec, Estado de México. Todos los derechos reservados.AAdministración 2025-2027 · Unidos para transformar." !important;
    display: block !important;
    width: 100% !important;
    min-height: 190px;
    margin-top: 40px !important;
    padding: 132px 24px 30px !important;
    color: rgba(255,255,255,.78) !important;
    background-color: var(--svc-tinta) !important;
    background-image: url("https://www.coyotepec.gob.mx/contenidos/coyotepec/img/banner_2026_7_19_1784500215.6469.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center 28px !important;
    background-size: auto 76px !important;
    border-top: 5px solid var(--svc-vino) !important;
    white-space: pre-line !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

@media (max-width: 768px) {
    #navigationmenu + .sectionhome {
        width: calc(100% - 20px) !important;
        aspect-ratio: 16 / 9;
    }
    #modulo_1737 > a > img,
    #modulo_1659 > a > img,
    #modulo_1645 > a > img {
        max-height: 520px;
    }
    body::after {
        min-height: 180px;
        padding: 125px 18px 28px !important;
        background-size: auto 66px !important;
        background-position: center 26px !important;
    }
}


/* R4 — corrección de texto del pie institucional */
body::after {
  content: "© 2026 Gobierno Municipal de Coyotepec, Estado de México. Todos los derechos reservados. · Administración 2025-2027 · Unidos para transformar." !important;
  white-space: normal !important;
}


/* =========================================================
   R5 — NAVEGACIÓN Y CARRUSEL ESTABLES
   Ajuste transversal para escritorio, tablet y móvil.
   No modifica contenidos ni enlaces.
   ========================================================= */
html,
body {
    overflow-x: hidden !important;
}

/* Carrusel principal: conserva el encuadre completo y evita
   que Revolution Slider reescriba el alto o la posición. */
.tp-banner-container {
    width: calc(100% - 32px) !important;
    max-width: 1180px !important;
    height: auto !important;
    aspect-ratio: 1440 / 638 !important;
    margin: 28px auto 36px !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(112, 22, 50, .20) !important;
    border-radius: 20px !important;
    background: #2b101d !important;
    box-shadow: 0 14px 32px rgba(43, 16, 29, .16) !important;
}

.tp-banner-container .tp-banner,
.tp-banner-container .tp-banner > ul,
.tp-banner-container .tp-banner > ul > li,
.tp-banner-container .slotholder,
.tp-banner-container .tp-bgimg.defaultimg {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
}

.tp-banner-container .tp-banner,
.tp-banner-container .tp-banner > ul,
.tp-banner-container .tp-banner > ul > li,
.tp-banner-container .slotholder {
    overflow: hidden !important;
}

.tp-banner-container .tp-bgimg.defaultimg {
    position: absolute !important;
    inset: 0 !important;
    background-color: #2b101d !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center center !important;
}

.tp-banner-container .tp-bannertimer {
    background: #8d193f !important;
    height: 4px !important;
}


/* Formularios y tablas de contenido no salen del área útil. */
.sectionhome img,
.sectionhome iframe,
.section img,
.page img,
.page iframe {
    max-width: 100% !important;
}

@media (max-width: 768px) {
    /* Menú móvil: se muestra únicamente el selector compacto. */
    #navigationmenu {
        height: auto !important;
        min-height: 0 !important;
        padding: 0 0 14px !important;
    }

    #navigationmenu .container,
    #navigationmenu .grid_12,
    #navigationmenu .gridnavigation {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    #navigationmenu .gridnavigation > a:first-child {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 18px 0 14px !important;
    }

    #navigationmenu .gridnavigation > a:first-child img {
        width: auto !important;
        max-width: 225px !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    #navigationmenu nav {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    #navigationmenu nav > ul#nav {
        display: none !important;
    }


    #navigationmenu select.tinynav {
        display: block !important;
        position: static !important;
        visibility: visible !important;
        width: 100% !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 42px 0 15px !important;
        color: #421126 !important;
        background: #fffdf9 !important;
        border: 1px solid rgba(112, 22, 50, .28) !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 14px rgba(43, 16, 29, .10) !important;
        font: 600 15px/48px Signika, Arial, sans-serif !important;
        box-sizing: border-box !important;
    }

    .tp-banner-container {
        width: calc(100% - 20px) !important;
        margin: 12px auto 25px !important;
        border-radius: 15px !important;
        box-shadow: 0 9px 22px rgba(43, 16, 29, .14) !important;
    }

    .header-pagetitle {
        max-width: calc(100% - 28px) !important;
        margin-left: 14px !important;
        margin-right: 14px !important;
        font-size: clamp(29px, 9vw, 38px) !important;
        line-height: 1.15 !important;
    }

    .sectionhome table,
    .section table,
    .page table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    body::after {
        min-height: 166px !important;
        padding: 112px 16px 26px !important;
        background-size: auto 58px !important;
        background-position: center 24px !important;
        font-size: 13px !important;
    }
}


/* R6 — El contenedor de portada mantiene la proporción original
   del arte 1440 × 638, independientemente del zoom o dispositivo. */
#navigationmenu + .sectionhome {
    width: calc(100% - 32px) !important;
    max-width: 1180px !important;
    height: auto !important;
    aspect-ratio: 1440 / 638 !important;
    margin: 28px auto 36px !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(112, 22, 50, .20) !important;
    border-radius: 20px !important;
    background: #2b101d !important;
    box-shadow: 0 14px 32px rgba(43, 16, 29, .16) !important;
}

#navigationmenu + .sectionhome .tp-banner-container {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    #navigationmenu + .sectionhome {
        width: calc(100% - 20px) !important;
        margin: 12px auto 25px !important;
        border-radius: 15px !important;
        box-shadow: 0 9px 22px rgba(43, 16, 29, .14) !important;
    }
}


/* R7 — Contenedor de portada centrado en cualquier resolución. */
#navigationmenu + .sectionhome {
    display: block !important;
    float: none !important;
    clear: both !important;
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* R8 — Se retira el módulo vacío y su divisor de la portada. */
body > div.container.clearfix:nth-of-type(5) {
    display: none !important;
}


/* R9 — Atención Ciudadana se muestra a escala nítida.
   El archivo original es 600 × 285 px: no se amplía en escritorio. */
section#modulo_1638 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 34px 24px !important;
    box-sizing: border-box !important;
}

section#modulo_1638 > a {
    display: block !important;
    flex: 0 1 600px !important;
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

section#modulo_1638 > a > img {
    display: block !important;
    width: 100% !important;
    max-width: 600px !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    image-rendering: auto !important;
}

@media (max-width: 768px) {
    section#modulo_1638 {
        padding: 20px 10px !important;
    }
}


/* =========================================================
   R10 — SISTEMA VISUAL PARA SECCIONES INSTITUCIONALES
   Plantilla común de las páginas activas del portal.
   Mantiene contenido, archivos y enlaces existentes.
   ========================================================= */
body {
    background: #f5f1eb !important;
    color: #1d1719 !important;
}

/* Cabecera común de páginas interiores. */
body > section.header-page {
    min-height: 290px !important;
    margin: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    border-bottom: 5px solid #c79a4a !important;
    background:
        radial-gradient(circle at 17% 24%, rgba(255, 255, 255, .07) 0 2%, transparent 2.2%),
        radial-gradient(circle at 20% 52%, rgba(217, 169, 77, .14) 0 16%, transparent 16.3%),
        radial-gradient(circle at 92% 16%, rgba(255, 255, 255, .05) 0 20%, transparent 20.3%),
        linear-gradient(135deg, #3b0918 0%, #531021 54%, #811c38 100%) !important;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.12) !important;
}

body > section.header-page > div {
    width: calc(100% - 80px) !important;
    max-width: 1180px !important;
    min-height: 290px !important;
    margin: 0 auto !important;
    padding: 66px 0 !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
}

body > section.header-page .header-pagetitle {
    max-width: 780px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fffdf9 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: left !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(38px, 5vw, 66px) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -.025em !important;
    text-shadow: none !important;
}

body > section.header-page .header-pagetitle small:empty {
    display: none !important;
}

body > section.header-page + .divider {
    display: none !important;
}


/* Área de contenido: tarjeta clara, amplia y consistente. */
body > section.header-page + .divider + .container.clearfix {
    width: calc(100% - 80px) !important;
    max-width: 1180px !important;
    margin: -40px auto 70px !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
    float: none !important;
}

body > section.header-page + .divider + .container.clearfix > .grid_12 {
    width: 100% !important;
    margin: 0 !important;
    padding: clamp(28px, 4vw, 52px) !important;
    background: rgba(255, 253, 249, .98) !important;
    border: 1px solid rgba(71, 26, 38, .12) !important;
    border-radius: 28px !important;
    box-shadow: 0 24px 60px rgba(48, 10, 24, .12) !important;
    box-sizing: border-box !important;
}

body > section.header-page + .divider + .container.clearfix > .grid_12 > .modulo {
    margin: 0 0 32px !important;
}

body > section.header-page + .divider + .container.clearfix > .grid_12 > .modulo:last-child {
    margin-bottom: 0 !important;
}

/* Tipografía y medios coherentes para módulos sin estilo propio. */
body > section.header-page + .divider + .container.clearfix > .grid_12 > .modulo > h2,
body > section.header-page + .divider + .container.clearfix > .grid_12 > .modulo > h3 {
    color: #5e1630 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    line-height: 1.18 !important;
}

body > section.header-page + .divider + .container.clearfix img,
body > section.header-page + .divider + .container.clearfix iframe,
body > section.header-page + .divider + .container.clearfix video {
    max-width: 100% !important;
}

body > section.header-page + .divider + .container.clearfix table {
    max-width: 100% !important;
    border-color: rgba(91, 22, 48, .18) !important;
}

body > section.header-page + .divider + .container.clearfix table th {
    color: #fffdf9 !important;
    background: #5e1630 !important;
}


@media (max-width: 768px) {
    body > section.header-page {
        min-height: 210px !important;
        border-bottom-width: 4px !important;
    }

    body > section.header-page > div {
        width: calc(100% - 40px) !important;
        min-height: 210px !important;
        padding: 38px 0 !important;
    }

    body > section.header-page .header-pagetitle {
        font-size: clamp(32px, 10vw, 45px) !important;
        line-height: 1.08 !important;
    }

    body > section.header-page + .divider + .container.clearfix {
        width: calc(100% - 24px) !important;
        margin: -24px auto 42px !important;
    }

    body > section.header-page + .divider + .container.clearfix > .grid_12 {
        padding: 24px 16px !important;
        border-radius: 20px !important;
        box-shadow: 0 14px 35px rgba(48, 10, 24, .10) !important;
    }

    body > section.header-page + .divider + .container.clearfix > .grid_12 > .modulo {
        margin-bottom: 24px !important;
    }
}

@media (max-width: 420px) {
    body > section.header-page > div {
        width: calc(100% - 32px) !important;
    }

    body > section.header-page .header-pagetitle {
        font-size: 32px !important;
    }
}


/* R11 — La tarjeta institucional cubre las variantes grid_4,
   grid_8 y grid_12 de todas las secciones activas. */
body > section.header-page + .divider + .container.clearfix {
    padding: clamp(28px, 4vw, 52px) !important;
    background: rgba(255, 253, 249, .98) !important;
    border: 1px solid rgba(71, 26, 38, .12) !important;
    border-radius: 28px !important;
    box-shadow: 0 24px 60px rgba(48, 10, 24, .12) !important;
}

body > section.header-page + .divider + .container.clearfix > .grid_12 {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body > section.header-page + .divider + .container.clearfix > [class^="grid_"] {
    box-sizing: border-box !important;
}

body > section.header-page + .divider + .container.clearfix > [class^="grid_"] > .modulo {
    margin-bottom: 28px !important;
}

body > section.header-page + .divider + .container.clearfix > [class^="grid_"] > .modulo:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    body > section.header-page + .divider + .container.clearfix {
        padding: 24px 16px !important;
        border-radius: 20px !important;
        box-shadow: 0 14px 35px rgba(48, 10, 24, .10) !important;
    }

    body > section.header-page + .divider + .container.clearfix > .grid_12 {
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}


/* R12 — El encabezado y contenido conservan flujo vertical,
   especialmente en dispositivos móviles. */
body > section.header-page {
    display: block !important;
    float: none !important;
    clear: both !important;
}

body > section.header-page + .divider + .container.clearfix {
    float: none !important;
    clear: both !important;
}

@media (max-width: 768px) {
    body > section.header-page + .divider + .container.clearfix {
        margin: 0 auto 42px !important;
        z-index: auto !important;
    }
}


/* =========================================================
   R13 — Tipografía institucional
   Referencia visual: coyotepecservicios.tech
   ========================================================= */
:root {
  --coyotepec-sans: Aptos, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --coyotepec-serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

/* Lectura, navegación y controles */
body,
body input,
body select,
body textarea,
body button,
#navigationmenu,
#navigationmenu a,
#navigationmenu select.tinynav,
body .modulo,
body .modulo p,
body .modulo li,
body .modulo a,
body .modulo label,
body .modulo td,
body .modulo th,
body .modulo input,
body .modulo select,
body .modulo textarea,
body .modulo button,
body .header-page,
body .header-page p,
body footer,
body footer a {
  font-family: var(--coyotepec-sans) !important;
}

/* Títulos institucionales y encabezados */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body > section.header-page .header-pagetitle,
body > section.header-page + .divider + .container.clearfix > .grid_12 > .modulo > h2,
body > section.header-page + .divider + .container.clearfix > .grid_12 > .modulo > h3 {
  font-family: var(--coyotepec-serif) !important;
}


/* =========================================================
   R14 — Plantilla universal de navegación lateral
   Menú institucional a la izquierda + contenido a la derecha
   ========================================================= */
@media (min-width: 769px) {
  body > section.header-page + .divider + .container.clearfix:has(> .grid_4:first-child:has(ul, ol, .menu)) {
    display: grid !important;
    grid-template-columns: minmax(240px, 31%) minmax(0, 1fr) !important;
    gap: 28px !important;
    align-items: start !important;
  }

  body > section.header-page + .divider + .container.clearfix > .grid_4:first-child:has(ul, ol, .menu) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
    background: #fffdf9 !important;
    border: 1px solid #e5d7c8 !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 30px rgba(54, 20, 30, .08) !important;
  }

  body > section.header-page + .divider + .container.clearfix > .grid_4:first-child:has(ul, ol, .menu) ul,
  body > section.header-page + .divider + .container.clearfix > .grid_4:first-child:has(ul, ol, .menu) ol {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  body > section.header-page + .divider + .container.clearfix > .grid_4:first-child:has(ul, ol, .menu) li {
    margin: 0 !important;
    border-bottom: 1px solid #eee2d6 !important;
  }

  body > section.header-page + .divider + .container.clearfix > .grid_4:first-child:has(ul, ol, .menu) li:last-child {
    border-bottom: 0 !important;
  }

  body > section.header-page + .divider + .container.clearfix > .grid_4:first-child:has(ul, ol, .menu) a {
    display: block !important;
    padding: 12px 13px !important;
    color: #5e1630 !important;
    border-radius: 10px !important;
    font-family: var(--coyotepec-sans) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    transition: background-color .18s ease, color .18s ease !important;
  }

  body > section.header-page + .divider + .container.clearfix > .grid_4:first-child:has(ul, ol, .menu) a:hover,
  body > section.header-page + .divider + .container.clearfix > .grid_4:first-child:has(ul, ol, .menu) .current > a,
  body > section.header-page + .divider + .container.clearfix > .grid_4:first-child:has(ul, ol, .menu) .active > a {
    background: #5e1630 !important;
    color: #fffdf9 !important;
  }

  body > section.header-page + .divider + .container.clearfix > .grid_4:first-child:has(ul, ol, .menu) + .grid_8 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 6px 24px 24px !important;
    background: #fffdf9 !important;
    border: 1px solid #e5d7c8 !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 30px rgba(54, 20, 30, .08) !important;
  }
}

@media (max-width: 768px) {
  body > section.header-page + .divider + .container.clearfix:has(> .grid_4:first-child:has(ul, ol, .menu)) {
    display: block !important;
  }

  body > section.header-page + .divider + .container.clearfix > .grid_4:first-child:has(ul, ol, .menu),
  body > section.header-page + .divider + .container.clearfix > .grid_4:first-child:has(ul, ol, .menu) + .grid_8 {
    float: none !important;
    width: auto !important;
    margin: 0 0 20px !important;
    border-radius: 16px !important;
  }

  body > section.header-page + .divider + .container.clearfix > .grid_4:first-child:has(ul, ol, .menu) {
    padding: 10px !important;
  }

  body > section.header-page + .divider + .container.clearfix > .grid_4:first-child:has(ul, ol, .menu) + .grid_8 {
    padding: 4px 16px 18px !important;
  }
}


/* R15 — Activación compatible de la plantilla lateral */
@media (min-width: 769px) {
  body > section.header-page + .divider + .container.clearfix:has(> .grid_4:first-child ul),
  body > section.header-page + .divider + .container.clearfix:has(> .grid_4:first-child ol) {
    display: grid !important;
    grid-template-columns: minmax(240px, 31%) minmax(0, 1fr) !important;
    gap: 28px !important;
    align-items: start !important;
  }
}

@media (max-width: 768px) {
  body > section.header-page + .divider + .container.clearfix:has(> .grid_4:first-child ul),
  body > section.header-page + .divider + .container.clearfix:has(> .grid_4:first-child ol) {
    display: block !important;
  }
}


/* =========================================================
   R16 — Componentes institucionales universales
   Documentos, imágenes, tablas y módulos de contenido
   ========================================================= */
body > section.header-page + .divider + .container.clearfix .modulo_Lista a[href*="/docs/"],
body > section.header-page + .divider + .container.clearfix .modulo a[href*="/docs/"] {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  width: 100% !important;
  margin: 0 0 11px !important;
  padding: 13px 15px !important;
  background: #fffdf9 !important;
  color: #5e1630 !important;
  border: 1px solid #e5d7c8 !important;
  border-radius: 14px !important;
  box-shadow: 0 7px 18px rgba(54, 20, 30, .06) !important;
  font-family: var(--coyotepec-sans) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

body > section.header-page + .divider + .container.clearfix .modulo_Lista a[href*="/docs/"]:hover,
body > section.header-page + .divider + .container.clearfix .modulo a[href*="/docs/"]:hover {
  transform: translateY(-2px) !important;
  border-color: #a77731 !important;
  box-shadow: 0 12px 25px rgba(54, 20, 30, .12) !important;
}

body > section.header-page + .divider + .container.clearfix .modulo_Lista a[href*="/docs/"] img,
body > section.header-page + .divider + .container.clearfix .modulo a[href*="/docs/"] img {
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  object-fit: contain !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body > section.header-page + .divider + .container.clearfix .modulo_Imagen > img,
body > section.header-page + .divider + .container.clearfix .modulo_Imagen > a > img,
body > section.header-page + .divider + .container.clearfix .modulo img[src*="/contenidos/"]:not([src*="file_extension_"]) {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 760px !important;
  margin: 0 auto 18px !important;
  object-fit: contain !important;
  background: #fffdf9 !important;
  border: 1px solid #e5d7c8 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(54, 20, 30, .08) !important;
}

body > section.header-page + .divider + .container.clearfix .modulo table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  border: 1px solid #e5d7c8 !important;
  border-radius: 14px !important;
  background: #fffdf9 !important;
}

body > section.header-page + .divider + .container.clearfix .modulo th {
  padding: 12px 14px !important;
  background: #5e1630 !important;
  color: #fffdf9 !important;
  font-family: var(--coyotepec-sans) !important;
  font-weight: 800 !important;
}

body > section.header-page + .divider + .container.clearfix .modulo td {
  padding: 11px 14px !important;
  border-bottom: 1px solid #eee2d6 !important;
  color: #30262a !important;
}

body > section.header-page + .divider + .container.clearfix .modulo tr:last-child td {
  border-bottom: 0 !important;
}

body > section.header-page + .divider + .container.clearfix .modulo iframe,
body > section.header-page + .divider + .container.clearfix .modulo video {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(54, 20, 30, .08) !important;
}

@media (max-width: 768px) {
  body > section.header-page + .divider + .container.clearfix .modulo_Lista a[href*="/docs/"],
  body > section.header-page + .divider + .container.clearfix .modulo a[href*="/docs/"] {
    padding: 12px !important;
    gap: 10px !important;
    font-size: 15px !important;
  }

  body > section.header-page + .divider + .container.clearfix .modulo img[src*="/contenidos/"]:not([src*="file_extension_"]) {
    max-height: none !important;
    border-radius: 13px !important;
  }

  body > section.header-page + .divider + .container.clearfix .modulo table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }
}

/* R17 — Directorio premium: perfil institucional de Presidencia */
@media (min-width: 769px) {
  body .directorio-coyotepec {
    display: grid !important;
    grid-template-columns: minmax(330px, .92fr) minmax(0, 1.08fr) !important;
    column-gap: 30px !important;
    align-items: stretch !important;
  }
  body .directorio-coyotepec > .dc-titulo,
  body .directorio-coyotepec > .dc-linea,
  body .directorio-coyotepec > .dc-introduccion,
  body .directorio-coyotepec > .dc-seccion,
  body .directorio-coyotepec > .dc-grid { grid-column: 1 / -1 !important; }
  body .directorio-coyotepec > .dc-presidenta {
    grid-column: 1 !important;
    margin: 18px 0 34px !important;
    min-height: 440px !important;
  }
  body .directorio-coyotepec > .dc-presidenta-descripcion {
    grid-column: 2 !important;
    margin: 18px 0 34px !important;
  }
}
body .directorio-coyotepec > .dc-presidenta {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid #d8bc7a !important;
  border-radius: 24px !important;
  background: #3b0918 !important;
  box-shadow: 0 20px 42px rgba(54,20,30,.18) !important;
}
body .directorio-coyotepec .dc-presidenta-barra {
  position: absolute !important;
  z-index: 2 !important;
  top: 0 !important; right: 0 !important; left: 0 !important;
  height: 7px !important;
  background: linear-gradient(90deg,#b08331,#f0d79a,#a77731) !important;
}
body .directorio-coyotepec .dc-presidenta-foto,
body .directorio-coyotepec .dc-presidenta-foto img {
  width: 100% !important;
  height: 100% !important;
  min-height: 440px !important;
}
body .directorio-coyotepec .dc-presidenta-foto img {
  display: block !important;
  margin: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: saturate(1.04) contrast(1.03) !important;
}
body .directorio-coyotepec > .dc-presidenta-descripcion {
  position: relative !important;
  overflow: hidden !important;
  padding: 40px 42px 34px !important;
  border: 1px solid #5e1630 !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg,#4a0d20 0%,#691b35 58%,#8a2a4b 100%) !important;
  color: #fffdf9 !important;
  box-shadow: 0 20px 42px rgba(54,20,30,.18) !important;
}
body .directorio-coyotepec > .dc-presidenta-descripcion::before {
  position: absolute !important;
  top: -105px !important; right: -80px !important;
  width: 260px !important; height: 260px !important;
  border: 1px solid rgba(240,215,154,.28) !important;
  border-radius: 50% !important;
  content: "" !important;
}
body .directorio-coyotepec .dc-presidente-contenido { position: relative !important; z-index: 1 !important; }
body .directorio-coyotepec .dc-presidente-icono {
  width: 48px !important; height: 48px !important;
  margin: 0 0 18px !important;
  border: 1px solid rgba(240,215,154,.72) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.08) !important;
}
body .directorio-coyotepec .dc-presidente-titulo,
body .directorio-coyotepec .dc-presidenta-descripcion h2 {
  margin: 0 !important;
  color: #fffdf9 !important;
  font-family: var(--coyotepec-serif) !important;
  font-size: clamp(36px,4vw,54px) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  line-height: 1.04 !important;
}
body .directorio-coyotepec .dc-presidente-cargo {
  margin-top: 15px !important;
  color: #f0d79a !important;
  font-family: var(--coyotepec-sans) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .13em !important;
  line-height: 1.45 !important;
}
body .directorio-coyotepec .dc-presidente-linea {
  width: 64px !important; height: 3px !important;
  margin: 20px 0 !important;
  background: #f0d79a !important;
}
body .directorio-coyotepec .dc-presidenta-descripcion p {
  color: rgba(255,253,249,.93) !important;
  font-family: var(--coyotepec-sans) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}
body .directorio-coyotepec .dc-presidente-correo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 20px !important;
  padding: 10px 13px !important;
  border: 1px solid rgba(240,215,154,.42) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.08) !important;
  color: #fffdf9 !important;
  font-family: var(--coyotepec-sans) !important;
  font-weight: 700 !important;
}
body .directorio-coyotepec .dc-presidente-correo,
body .directorio-coyotepec .dc-presidente-correo a { color: #fffdf9 !important; }
@media (max-width: 768px) {
  body .directorio-coyotepec > .dc-presidenta,
  body .directorio-coyotepec > .dc-presidenta-descripcion {
    margin: 18px 0 22px !important;
    border-radius: 18px !important;
  }
  body .directorio-coyotepec .dc-presidenta-foto,
  body .directorio-coyotepec .dc-presidenta-foto img { min-height: 300px !important; }
  body .directorio-coyotepec > .dc-presidenta-descripcion { padding: 30px 24px !important; }
  body .directorio-coyotepec .dc-presidente-titulo,
  body .directorio-coyotepec .dc-presidenta-descripcion h2 { font-size: 38px !important; }
  body .directorio-coyotepec .dc-presidenta-descripcion p { font-size: 16px !important; line-height: 1.62 !important; }
}


/* R18 — Encuadre editorial para Presidencia Municipal */
html body .directorio-coyotepec > .dc-presidenta {
  min-height: 440px !important;
}
html body .directorio-coyotepec > .dc-presidenta .dc-presidenta-foto {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}
html body .directorio-coyotepec > .dc-presidenta .dc-presidenta-foto img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center top !important;
}
@media (max-width: 768px) {
  html body .directorio-coyotepec > .dc-presidenta {
    min-height: 300px !important;
  }
}

/* R19 — Directorio: fotografía institucional de Presidencia */
html body > section.header-page + .divider + .container.clearfix section#modulo_1756.directorio-coyotepec,
html body > section.header-page + .divider + .container.clearfix section#modulo_1756 .directorio-coyotepec > .dc-presidenta {
  position: relative !important;
}
html body > section.header-page + .divider + .container.clearfix section#modulo_1756 .directorio-coyotepec > .dc-presidenta .dc-presidenta-foto {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html body > section.header-page + .divider + .container.clearfix section#modulo_1756 .directorio-coyotepec > .dc-presidenta .dc-presidenta-foto img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center top !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}