@charset "UTF-8"; /*LENGUAJE DE ESTILOS DEL SITIO*/

a:focus-visible, button:focus-visible, select:focus-visible /*, input:focus-visible , textarea:focus-visible */
    {outline: 3px solid rgb(var(--color-primary)); outline-offset: 3px; }

.titlemain{font-size: var(--fontsize-tit); width: 70%;}
    /* Responsive */
    @media (max-width: 767px) {
        .titlemain {width: 100%;}
        }
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/ PRINCIPAL - INDEX /////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* MAIN - HEADER ===================================*/
/* Skip link - Es un atajo invisible para accesibilidad que mejora mucho la UX sin afectar el diseño. apunta al <main> y Siempre debe existir ese id #contenido anclado al contenido principal*/
.skip{ position: absolute; left: -9999px; top: 8px; background: #fff; padding: 10px 12px; border: var(--border); border-radius: 10px; z-index: 9999; }
    .skip:focus{ left: 16px; }

/* MAIN - Layout helpers */
.headtopbar{ font-size: var(--fontsize-min); background-color: rgb(var(--color-white));}
    .headtopbar_row{ display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 5px 0; flex-wrap: wrap; }
    .headtopbar_group{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    .headtopbar_badge{ display: flex; align-items:center; gap:8px; text-decoration: none; opacity: 0.7; transition: opacity var(--transition);}
    .headtopbar_badge:hover{ opacity: 1;}

/* MAIN - HEAD ===================================*/
.headmain{ background-image: url("../simg/_head_background.png"); background-repeat: no-repeat; background-position: center top; background-size: auto; overflow: hidden;}
    .headmain_info{position: relative;}
    .headmain_img{position: absolute; right: 0px; top: 0px;}

    @media only screen and (max-width : 850px){
        .headmain_img, .headtopbar{display: none;}

        }

/* MAIN - Mensaje del Presidente ===================================*/
.message{grid-gap: 1rem;}

    @media only screen and (max-width : 539px){
        .message ._groupinfo{ text-align: center; align-items: center; margin-left: auto; margin-right: auto; }
        }

/* MAIN - Teléfonos de emergencia ===================================*/
.emergency{color: rgb(var(--color-fixed-white)); padding: 2rem; border-radius: var(--radius-max);}
    .emergency>._groupinfo>small{opacity: 0.5;}
    .emergencybar{  display: grid; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: center; align-items: center; column-gap: clamp(1rem, 3vw, 2.2rem); overflow: hidden;
                    padding: clamp(.75rem, 2vw, 1.1rem) clamp(1rem, 3vw, 1.6rem); background: rgb(var(--color-primary)); color: rgb(var(--color-fixed-white)); box-shadow: var(--shadow-soft); border-radius: var(--radius-max); }

        .emergencybar_item{ display: grid; grid-auto-flow: column; align-items: center; justify-content: center; column-gap: .6rem; text-align: center; width: 150px; transition: transform var(--transition);}
            .emergencybar_item:hover{ transform: scale(1.05);}

            .emergencybar_icon{ opacity: .7;}
            .emergencybar_text{ display: flex; flex-direction: column; justify-items: center;}
                .emergencybar_text small{ font-size: var(--fontsize-min); opacity: .85;}
                .emergencybar_text strong{ font-size: var(--fontsize-tit); }
        .emergencybar_divider{ width: 1px; height: 32px; background: rgb(var(--color-fixed-white)); opacity: 0.2 }

    @media (max-width: 900px){
        .emergencybar_item{ grid-auto-flow: row; justify-items: center; row-gap: .35rem; column-gap: 0; width: 75px; }
        }

    @media (max-width: 520px){
        .emergencybar{ grid-auto-flow: row; grid-template-columns: repeat(2, max-content); justify-content: center; gap: .9rem 1.2rem; padding: .85rem 1rem; }
            .emergencybar_item{ width: 110px; }
            .emergencybar_divider{ display: none; }
        }

/*MAIN - CHILAQUIL - galería y Transparencia ===================================*/
    .gallerytransparencia { padding: 1rem 0rem; margin-inline: auto; }

        .gallerytransparencia_fila { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem;}
        @media (min-width: 768px) {
            .gallerytransparencia_fila { grid-template-columns: 1.2fr 1fr; }
            }    
        .gallerytransparencia_filb { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
        @media (min-width: 600px) {
            .gallerytransparencia_filb { grid-template-columns: repeat(2, 1fr); }
            }
        @media (min-width: 992px) {
            .gallerytransparencia_filb { grid-template-columns: repeat(3, 1fr); }
            }
    
    .card, .carb { background: rgb(var(--color-white)); border-radius: var(--radius-max); box-shadow: var(--shadow-strong); padding: 2rem; min-height: 220px; transition: transform var(--transition); overflow: hidden;}
    .card:hover { transform: scale(2);}
        .card_main {position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 280px; color:rgb(var(--color-fixed-white)); background-color: rgb(var(--color-secondary));}
        .card_overlay{position: absolute; inset: 0; background: linear-gradient( to bottom,  rgba(var(--color-fixed-black), 0.4) 0%, rgba(var(--color-fixed-black), 0.5) 60%, rgba(var(--color-fixed-black), 0.8) 100% );}
            .card_main>p{line-height: 1.3; opacity: 0.5;}
            .card_main>h2, .card_main>p, .card_main>.card_info {z-index: 0;}

            .card:hover>.card_info>.card_icon>span{transform: translateX(3px); opacity: 1;}

            .card_icon { width: 2.5rem;  height: 2.5rem; background: rgb(var(--color-primary)); flex-shrink: 0; border-radius: var(--radius-max); 
                        display: flex; align-items: center;}
            .card_icon>span{background-color: rgb(var(--color-fixed-white)); opacity: 0.5; transition: opacity var(--transition), transform var(--transition);
                            margin-left: 2px;}
            .card_title { font-size: var(--fontsize-sti);  margin: 0 0 0.5rem; }
            .card_info { display: flex; align-items: center; gap: 0.75rem; margin-top: auto;}

                .card_infNum { font-size: var(--fontsize-sti); line-height: 1; }
                .card_infDeta { font-size: var(--fontsize-min); opacity: 0.5; line-height: 1;}

                /* ─── Encabezado de card sueltos ──────────────────────────────── */
                .card_category { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; margin-bottom: 1.25rem; }

        .carb{display: flex; flex-direction: row; flex-wrap: wrap; transition: background var(--transition), margin var(--transition);}
        .carb:hover>span{background-color: rgb(var(--color-primary)); margin-left: 10px;}

        .carb>h3{color: rgb(var(--color-primary));}
        .carb>span{margin-top: 20px;}
        .carb>span:hover{padding-left: 10px;}

    .carc{ display: flex;  display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem;
        padding: 0.5rem 1rem; background-color: rgb(var(--color-primary)); color: rgb(var(--color-fixed-white)); border-radius: var(--radius-max); box-shadow: var(--shadow-strong);}
        .carc p{opacity: 0.5; transition: opacity var(--transition), margin var(--transition);}
        .carc button span{background-color: rgb(var(--color-fixed-white)); margin-right: 5px; opacity: 0.5; transition: opacity var(--transition), margin var(--transition);}
        .carc:hover button span{margin-right: 0px; opacity: 1;}
        .carc:hover p{opacity: 1; margin-left: 30px;}

/* MAIN - Que neceitas hacer hoy? - Busqueda ===================================*/
.section_search{margin: 70px 0px;}
    .search{ display:flex; align-items:center; gap:0.5rem; max-width:700px; width:100%; padding:0.4rem; border-radius:var(--radius-input); background:rgb(var(--color-white)); box-shadow:var(--shadow-soft); }
        .search_icon{ display:flex; align-items:center; justify-content:center; margin-left: 10px; opacity: 0.3; }
        .search_input{ flex:1; border:none; outline:none; font-family: normal; padding: 11px; background:rgb(var(--color-white)); color: var(--color-text);
                        font-size: var(--fontsize-nor); font-family: regular;}
        /* Botón derecho */
        .search_btn{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:none; border-radius:50%; background:rgb(var(--color-graylight)); cursor:pointer; transition: background-color var(--transition), transform var(--transition);}
            .search_btn:hover{ background:rgb(var(--color-primary)); transform:scale(1.05);}
            .search_btn:hover span{ background:rgb(var(--color-fixed-white)); }
            .search_btn:active{ transform:scale(0.96);}
            

/* MAIN - Noticias ===================================*/
.item_custom{border-radius: var(--radius-nor); box-shadow: var(--shadow-soft); background-color: transparent; transition: transform var(--transition);}
.item_custom:hover{transform: scale(1.02);}
.item_custom:hover img{transform: scale(1.07);}
    .item_custom img{transition: transform var(--transition);}
    .item_custom .item_info{position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem; z-index: 1;
                            color:rgb(var(--color-fixed-white)); background: linear-gradient(to top, rgba(var(--color-primary),0.9), transparent);}
    .item_info>._sicon{background-color: rgb(var(--color-fixed-white));}
    .item_title{font-family: bold; padding-bottom: 5px;}
    .item_added{font-size: var(--fontsize-min); opacity: 0.5;}
    .item_added>span{padding-right: 5px;}
    
.item_more{background-color: rgb(var(--color-primary)); display: flex; align-items: center; justify-content: center;}
    .item_more>span{background-color: rgb(var(--color-white)); transition: transform var(--transition);}
    .item_more:hover>span{ transform: scale(1.5);}

/* MAIN - Accesos Rápidos ===================================*/
.quicklyacces{margin: 70px 0px;}
    .quickcard{background-color: rgb(var(--color-white)); box-shadow: var(--shadow-soft); border-radius: 7px; transition: background var(--transition), color var(--transition), transform var(--transition);}
        .quickcard:hover{ background-color: rgb(var(--color-primary)); color: rgb(var(--color-fixed-white)); transform: scale(1.03);}
        .quickcard:hover .quickcard_icon{ background-color: rgb(var(--color-fixed-white)); }
        .quickcard:hover .quickcard_title span{ background-color: rgb(var(--color-fixed-white)); }

        .quickcard .quickcard_title span{opacity: 0.5;}

        .quickcard_icon{ margin-bottom: 15px; background-color: rgb(var(--color-primary));}
        .quickcard_title{ font-size:var(--fontsize-sti); }
        .quickcard_details{ opacity: 0.5;}

/* MAIN - Gallery ===================================*/
.galleryWebMain{position: relative; min-height: 80svh; border-radius: var(--radius-max); overflow: hidden; background-color: rgb(var(--color-fixed-black)); box-shadow: var(--shadow-strong);}
    .galleryWebMain_overlay{position: absolute; inset: 0; background: linear-gradient( to bottom,  rgba(var(--color-fixed-black), 0.3) 0%, rgba(var(--color-fixed-black), 0.5) 60%, rgba(var(--color-fixed-black), 0.9) 100% );}
    .galleryWebMain_content{  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.5rem; gap: 1rem; }
        /* son las */
        .galleryWebMain_title{ font-family: 'Playfair Display', serif; font-size: clamp(3.5rem, 12vw, 9rem); font-weight: 900; line-height: 1; letter-spacing: -0.02em; color: rgb(var(--color-fixed-white)); }
        .galleryWebMain_descr{ max-width: 36ch; font-size: clamp(0.875rem, 2vw, 1.05rem); font-weight: 300; line-height: 1.7; color: rgba(var(--color-fixed-white), 0.82); margin-top: 2.5rem; opacity: 0.7;}
        .galleryWebMain_actions{display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.5rem; color: rgb(var(--color-fixed-white)); font-size: var(--fontsize-min); opacity: 0.3; transition: opacity var(--transition), transform var(--transition);}
            .galleryWebMain_actions>span{background-color: rgb(var(--color-fixed-white));}
            .galleryWebMain_actions:hover{opacity: 1; }

        /*fullscreen*/
        .galleryWebMain:fullscreen { width: 100vw; height: 100vh; min-height: 100vh; overflow: hidden;}
        .galleryWebMain:fullscreen ._sblockGallerySlide { height: 100vh; min-height: 100vh;}
        /* Safari */
        .galleryWebMain:-webkit-full-screen { height: 100vh; min-height: 100vh; }
        .galleryWebMain:-webkit-full-screen ._sblockGallerySlide { height: 100vh; min-height: 100vh; }
        /* El fondo de la barra del navegador al entrar en fullscreen */
        .galleryWebMain:fullscreen .galleryWebMain_content { z-index: 10;}

/* ACCESIBILIDAD - página  ===================================*/

/* PRIVACIDAD - página  ===================================*/

/* MAPA SITIO - página  ===================================*/
.mapsite{margin: 70px 0px;}


/* FOOTER - Pie de pagina ===================================*/
.footerpage{ position: relative; padding-bottom: 100px; overflow: hidden;}
    .footerpage_inner { position: absolute; inset: 0; padding-inline: inherit; display: flex; align-items: flex-end; justify-content: space-between;}
        .footerpage_img{ max-width: 100%; pointer-events: none; user-select: none; z-index: 0; }

.footeroptions{display: flex; align-items: center; gap: 8px; flex-wrap: wrap;}
    .footersepartion{height: 20px; width: 1px; border-left: 1px dotted rgba(var(--color-black),0.3); margin-left: 5px;}
    @media (max-width: 1096px){
        .footeroptions{justify-content: center;  gap: 20px 30px; flex-wrap: wrap;}
        .footersepartion{display: none;}
        }
    /* Footer Accesibilidad: oculto visual pero legible para lectores */
    .sr_only{ position:absolute!important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0); white-space:nowrap;border:0; }


/* Top ribbon lines + slogan */
.footer_top{ display:flex; align-items:center; gap: 1rem; margin: 70px 0px 40px 0px; }
    .footer_line{ height: 3px; border-radius: 999px; flex: 1 1 auto;}
    .footer_line-g{ background: rgb(var(--color-secondary)); }
    .footer_line-r{ background: rgb(var(--color-primary)); }

/* Main grid */
.footer_inner{ display:grid; grid-template-columns: 1.05fr 1.3fr; gap: clamp(1.2rem, 3vw, 2.4rem); position: relative; z-index: 2; }
    .footer_information{display: flex; flex-direction: column; text-align: left; align-items: flex-start; margin:10px auto 0px 0px;}
    .footer_information>span{margin-bottom: 30px;}
    .footer_information>small, .footer_information>p{margin-bottom: 20px;}

    /* Right columns */
    .footer_cols{ position: relative;}
        .footer_menus{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); margin: 30px 0px 60px 0px;}
            .footer_menu_title{ margin: 0 0 1.5rem; font-size: var(--fontsize-nor); font-family: bold; }
                .footer_list{ list-style:none; padding:0; margin:0; display:grid; gap:.35rem; }
                .footer_link{ display: inline-block; opacity: .7; text-decoration: none; transition: opacity var(--transition), color var(--transition), transform var(--transition);}
                .footer_link:hover{ opacity: 1; color: rgb(var(--color-primary)); transform: scale(1.05);}

        .footer_searchdesc{margin: 1.2rem 0 .9rem; opacity: .7;}

        .sfooter_social{ display:flex; align-items:center; justify-content: flex-end; gap: .9rem; }
            .sfooter_socialList{ list-style:none; padding:0;margin:0; display:flex; gap: .55rem; }
            .sfooter_socialBtn{ width: 34px; height: 34px; display:grid; place-items:center; border-radius: 999px; background: rgb(var(--color-accent)); transition: background-color var(--transition);}
                .sfooter_socialBtn span{background-color: rgb(var(--color-fixed-white)); }
                .sfooter_socialBtn:hover{ background-color: rgb(var(--color-primary));}

    @media (max-width: 720px){
        .footer_inner{ grid-template-columns: 1fr; grid-template-rows: auto auto; gap:0px; margin-bottom: 100px;}
            .footer_information{ align-items: center; margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 70px;}
        .footer_menus{ margin: 0px 0px 40px 0px;}
        .footer_menu_title, .footer_list{ text-align: center; }
        }


/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/ GABINETE //////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.gabinete{ margin-bottom: 100px; padding-top: 30px; border-top: 1px solid rgba(var(--color-black),0.1);}
.gabinete>ul { list-style-type: none; padding: 0; margin: 0; }
    .gabinete>li { list-style-type: none; padding-left: 0;}

        .gabinete_photo{position: relative; width: 90%; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden;}
        .gabinete_name{font-family: bold; margin-top: 20px;}
        .gabinete_grupo{ margin: 7px 0px 0px 0px; font-family: bold; font-size: var(--fontsize-min); color: rgb(var(--color-primary));}
        .gabinete_cargo{ opacity: 0.5;}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/ CATÁLOGO DE SERVICIOS /////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/ ATENCIÓN CIUDADANA / CONTACTO /////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.cgrid{ display: grid; gap: 1rem; grid-template-columns: 1fr; }

    @media (min-width: 980px){
        .cgrid{ grid-template-columns: 1.6fr 1fr; align-items: start; }
        }
            
    /* Card */
    .ccard{ background-color: rgb(var(--color-white)); border-radius: var(--radius-max); box-shadow: var(--shadow-soft); padding: 1rem; margin-bottom: 1rem; }
    /* Titles inside cards */
    .csecTitle{ margin: 0 0 .7rem 0; font-size:var(--fontsize-nor); font-family:bold; }

    /* Notice */
    .cnotice{ margin-top:1rem; padding: .9rem .9rem; border-radius: var(--radius-nor); background: rgba(var(--color-black), .07); font-size: var(--fontsize-min); }
        .cnotice a{ color: rgba(var(--color-primary), 1); text-decoration: underline; text-underline-offset: .16em; }

    /* Form */
    .cform{ display: grid; gap: .95rem; }
        .cfield{ display: grid; gap: .35rem; }

        .cinput, .cselect, .ctextarea{ width: 100%; font: inherit; color: rgba(var(--color-black), .85); background: rgba(var(--color-white), 1); border: 1px solid var(--color-border); border-radius: var(--radius-nor); padding: .70rem .80rem;
            transition: border var(--transition), box-shadow var(--transition), transform var(--transition); }

        .cselect{ padding-right: 2.1rem; }
        .ctextarea{ resize: vertical; min-height: 9rem; line-height: 1.35; }
        .cinput:focus-visible,
        .cselect:focus-visible,
        .ctextarea:focus-visible{ outline: 3px solid rgba(var(--color-primary), .28); outline-offset: 2px; border-color: rgba(var(--color-primary), .55); }
        .chelp{ margin: 0; font-size: var(--fontsize-min); color: rgba(var(--color-black), .60); line-height: 1.3; }

    /* Actions */
    .cactions{ display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

    /* Alert placeholder */
    .calert{ border-radius: var(--radius-nor); padding: .85rem .9rem; border: 1px solid var(--color-border); background: rgba(var(--color-graylight), .65); font-size: var(--fontsize-min); line-height: 1.35;    }
    
    /* Legal list a–d */
    .clegal{ margin: 0; padding-left: 1.2rem; display: grid; gap: .65rem; font-size: var(--fontsize-min); color: rgba(var(--color-black), .72);}
        .clegal li{ padding-left: 0.5rem; }

    /* Map */
    .cmap{ border-radius: var(--radius-max); overflow: hidden; background: rgba(var(--color-graylight), 1); }
        .cmap iframe{ width: 100%; height: 320px; border: 0; display: block; }
    /* Aside */
    .caside{ padding: .25rem; }
        .asideDesc{ margin: 1rem 0rem 2.5rem 0rem; color: rgba(var(--color-black), .5); font-family: bold; }
        .asideSub{ margin: 2.5rem 0rem; font-family:bold; }

    /* Timeline (como tu imagen) */
    .timeline{ margin-left: .8rem; padding-left: 1.15rem; display: grid; gap: 1.05rem; border-left: 3px solid rgba(var(--color-black), .15); }
        .titem{ position: relative; padding-left: .2rem; }
        .tpoint{ position: absolute; left: calc(-1.15rem - 9px); top: .15rem; width: 14px; height: 14px; border-radius: 50%; background: rgba(var(--color-primary), 1); box-shadow: 0 0 0 4px rgba(var(--color-primary), .12); }
        .ttitle{ margin: 0 0 .35rem 0; font-size: var(--fontsize-nor); font-family: bold; line-height: 1.2; }
        .tdesc{ margin: 0; line-height: 1.35; color: rgba(var(--color-black), .6); }

    /* Honeypot hide - anti-spam (oculto para humanos) */
    .chp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/ NOTICIA ///////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.newgroup{display:grid; grid-template-columns: 3fr 2fr; align-items: start; padding-top: 3rem; gap: 2rem; overflow: hidden;}
    .newarticle{ border-right: 1px solid rgba(var(--color-black), 0.1); padding-right: 2rem;}
        .newarticle p{text-align: justify; text-indent: 3rem; padding-bottom: 2rem; line-height:2;}
        .newMainImg {height: 700px;}
        
        .newBlockimages{padding-top: 3rem;}
            .newImgs{ height: 180px; box-shadow: var(--shadow-soft);}
    .newAside{ position:sticky; top:50px; align-self:flex-start; overflow: hidden; display: flex; flex-direction: column; align-items: center; }
        .newAside>img { max-width: 100%;  height: auto;  width: auto; display: block; }
        .aside_resalt{font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; border: none; border-top: 1px solid rgba(var(--color-black),0.2); padding:2rem 0rem; font-size: var(--fontsize-sti);}
        .aside_inf{margin-top: 1rem;}
        .taglist{ list-style: none; padding: 0; margin: 1rem 0 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
            .tag{ display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; border-radius: var(--radius-max); background: rgb(var(--color-accent)); color: rgb(var(--color-white)); text-decoration: none; font: inherit; line-height: 1; white-space: nowrap;
                /* interacción */transition: background-color var(--transition); }
            .tag:hover{ background-color: rgb(var(--color-primary)); }
                        
    .new_resumen{border-top: 1px solid rgba(var(--color-black),0.2); padding:2rem 0rem; margin-top: 2rem; width: 100%;}

    @media (max-width: 720px){
        .newgroup{grid-template-columns: 1fr; grid-template-rows: auto auto;}
            .newarticle{ border-right: 0px; padding-right: 0rem;}
            .newAside{   /* Centrado horizontal */}
        }
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/ GALERIA ///////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.GridGallery{margin-top: 1rem;}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/ BUSCADOR //////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#busqueda { width: 100%;}

/*ya esta declarado .search_input{ width: 100%; border: 1px solid rgba(var(--color-black),.10); border-radius: var(--radius-input); padding: .75rem .9rem; background: rgb(var(--color-white)); color: rgba(var(--color-black),0.7); box-shadow:var(--shadow-soft); outline: none; 
                font-size: var(--fontsize-nor); font-family: regular;}*/
    .resultado { margin: 1.7rem 0rem 0rem 0rem; }
    .resultado a{ display: block; text-decoration: none; color: inherit; }

        .result-row { display: flex; gap: 12px; align-items: flex-start; }
            .result-icon { width: 37px; height: 37px; border-radius: 999px;  object-fit: contain; padding: 3px; box-sizing: border-box; flex-shrink: 0; background-color:rgb(var(--color-white)); }
            .result-icon img{ width: 50%; height: auto; object-fit: contain; }

        .result-body { min-width: 0; }

            .result-head { display: block; font-size: var(--fontsize-min); color: rgba(var(--color-black),0.5); margin-bottom: 2px; }
            .result-title { font-family:bold; color: rgba(var(--color-secondary),0.7); margin: 0 0 4px; }
            .result-desc { font-size: var(--fontsize-nor); line-height: 1.45; color: rgba(var(--color-black),0.5); margin: 0; }

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/ 404 y otros ///////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
    .err404_body { display: grid; grid-template-rows: auto 1fr; min-height: 100dvh; background: rgb(var(--color-primary)); overflow:hidden;}
        .err404_nav { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 10; padding: 2rem 0rem;}
            .err404_nav>a {color:rgb(var(--color-fixed-white)); font-size:var(--fontsize-sti);}
            .err404_nav>a>span {opacity: 0.5;}
        .err404_navlinks { display: flex; gap: clamp(.75rem, 2vw, 2rem); list-style: none; }
            .err404_navlinks a { color: rgba(var(--color-fixed-white),.5); text-decoration: none; transition: color var(--transition), padding var(--transition); }
            .err404_navlinks a:hover, .err404_navlinks a:focus-visible { color: rgba(var(--color-fixed-white),1); padding: 0 0.3rem;}

    /* ─── MAIN / CONTENEDOR ─── */
    .main { display: flex; align-items: center; justify-content: center; }

    /* ─── DECORACIÓN CIRCULAR DE FONDO ─── */
    .err404_stage { position: relative; display: flex; align-items: center; justify-content: center; width: min(700px, 95vw); }
        .err404_stage_circle { position: absolute; border-radius: 50%; background: rgba(var(--color-fixed-white),.07); pointer-events: none; }
            .err404_stage_circle_lg { width: 820px; height: 820px; }
            .err404_stage_circle_sm { width: 580px; height: 580px; background: rgba(var(--color-fixed-white),.06); }

    /* ─── CARD ─── */
    .err404_card { position: relative; z-index: 2; background: rgb(var(--color-fixed-white)); border-radius: var(--radius-max); padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 4rem); text-align: center; width: min(480px, 90vw); box-shadow: var(--shadow-strong); animation: cardIn .45s cubic-bezier(.22,.61,.36,1) both; }
        @keyframes cardIn {
            from { opacity: 0; transform: translateY(18px) scale(.97); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
            }

        .err404_card>img {width: 200px; height:auto; padding-bottom:2rem;}
        /*para enc ontrucción*/
        .err404_card>span {background-color: rgba(var(--color-fixed-black), .15); width:180px;height:180px;}

        .err404_code { font-size: clamp(4rem, 14vw, 6.5rem); font-weight: 700; color: rgba(var(--color-primary),0.3); line-height: 1; letter-spacing: -.03em; margin-bottom: .3em; }
        .err404_title { font-size: var(--fontsize-sti); font-weight: 600; color: rgba(var(--color-fixed-black), .6); margin-bottom: .6em; }
        .err404_desc { font-size: var(--fontsize-nor); color: rgba(var(--color-fixed-black), .45); line-height: 1.55; max-width: 28ch; margin: 0 auto 1.8em; }
    /* ─── BOTÓN ─── */
    .err404btn { display: inline-flex; align-items: center; gap: .4rem; background: rgb(var(--color-primary)); color: rgb(var(--color-fixed-white)); border: none; border-radius: 999px; padding: .6em 1.5em; font-size: var(--fontsize-nor); font-weight: 500; cursor: pointer; text-decoration: none; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); box-shadow: var(--shadow-soft); }
        .err404btn:hover,.err404btn:focus-visible { background: rgb(var(--color-secondary)); transform: translateY(-1px); box-shadow: var(--shadow-strong); }
        .err404btn:active { transform: translateY(0); }

    /* ─── SKIP LINK (accesibilidad) ─── */
    .err404_skip_link { position: absolute; top: -100%; left: 1rem; background: rgb(var(--color-primary, 0,0,0)); color: rgb(var(--color-fixed-white)); padding: .4rem .8rem; border-radius: var(--radius-nor); font-size: var(--fontsize-nor); z-index: 999; text-decoration: none; }
    .err404_skip_link:focus { top: 1rem; }

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/ CONSIDERACIONES Y OBSERVACIONES ///////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Respeta usuarios con reduce motion */
@media (prefers-reduced-motion: reduce){
  /* @media (prefers-reduced-motion: reduce) detecta si el usuario, en su sistema operativo, activó la opción de “reducir movimiento”.
        Hay personas que:
        Se marean con animaciones.
        Tienen vértigo.
        Tienen sensibilidad neurológica.
        Simplemente no quieren efectos visuales.
    Cuando esa preferencia está activa, el navegador te avisa con ese media query. */
}