* { margin:0; padding:0; }

html{ margin:0 !important}
body { background: #fff;font-family: "Roboto Condensed", sans-serif !important; ;margin:0; padding:0 !important; color: #000; position:relative; font-size:20px!important; line-height: 25pxpx; width:100%;font-weight: 300}
h1, h2, h3, h4, h5, h6 {font-family: "Roboto Condensed", sans-serif !important;color:#000; margin: 0; letter-spacing: 3px }
h1 { font-size:35px;}
h2 { font-size:25px;}
h3 { font-size:20px; }
h4 { font-size:16px;  }
input:focus, select:focus, textarea:focus,.btn_cerra:focus,button:focus { outline:none }
input, input[type="text"], input[type="file"] { background: none; border: none;color:#000 }
nav ul,ol,ul{ margin:0 !important; padding:0 !important; line-height: normal}
ul, li{ list-style: none}
a {text-decoration:none!important; color:#000; /*-webkit-transition: all 400ms ease-out; -o-transition: all 400ms ease-out; -moz-transition: all 400ms ease-out; -ms-transition: all 400ms ease-out; transition: all 400ms ease-out;*/ }
a:hover { text-decoration:none;}
a img { border:none; -webkit-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -moz-transition: all 800ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out;}
a:hover img{-webkit-transition: all 300ms ease-out; -o-transition: all 00ms ease-out; -moz-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out;}
.clear { clear:both; }

.no_padding{ padding:0}
.no_gutter > [class*='col-'] {  padding-right:0; padding-left:0;} 

p{letter-spacing: 1.5px}
.h_100{ height: 100%;}

.material-symbols-outlined {  font-variation-settings:  'FILL' 0,  'wght' 500,  'GRAD' 0,  'opsz' 48}

b, strong{ font-weight: 600}

.cont_at{ width: 100%;  margin: 0 auto; max-width: 1420px }
.row_at{display: flex; align-items: center; justify-content: center; flex-wrap: wrap}
.img_fluid{ max-width: 100%; width: 100%; display: block; height: auto}

.btn_at{ text-transform: uppercase; font-size: 14px; line-height: 14px; display: inline-flex; align-items: center; justify-content: center;letter-spacing: 4px; font-weight: 500; border-radius: 0; border: 1px solid #000; padding: 5px 15px 5px 25px;position: relative; overflow: hidden;transition: all 100ms ease-out}
.btn_at:before{content: ''; background: #f5921e; border-radius: 0; color:#000; display: block; width: 100%; height: 100%; position: absolute; top: 0; left:0%; right: 0; bottom: 0; transform: scale(0); transform-origin: center; z-index: 1;transition: all 100ms ease-out}
.btn_at:hover:before{transform: scale(1.1);}
.btn_at span,.btn_at i{position: relative; z-index: 10}
.btn_at i{ margin-left: 10px;transition: all 300ms ease-out;}
.btn_at i,.btn_at i svg{width: 20px; height: auto}

.header_ATM{ height: 450px;background:#000; margin-bottom: 55px }
.header_ATM .row_at,.header_ATM .cont_at{ display: flex;align-items: flex-end; height: 100%}
.header_ATM .col_left,.header_ATM .col_right{  width: 50%}
.header_ATM .col_left .summary{transform:  translate(18% , 74%)}
.header_ATM  h4,.header_ATM  h5{ color: #000!important; font-size: 30px; margin-bottom: 10px; text-transform: uppercase; font-weight: 400}
.header_ATM  .title_archive{ font-size: 100px; text-align: right;font-weight: 500;font-style: oblique;line-height: 0.95em;color: #000000;}
.header_ATM  .title_archive .title_2 span {    display: inline-block;    position: relative;}
.header_ATM  .title_archive .title_2 span:before {content: '';display: inline-block;width: 95px;height: 10px;background: #f5921e;margin: 0 25px;}
.header_ATM #migas_pan{ justify-content: center; color: #000; margin-top: 15px}
.header_ATM #migas_pan a ,#banner_blog #migas_pan span{ color: #000; left: 15px; letter-spacing: 2px}
#migas_pan i {line-height: 10px;font-size: 17px;height: 17px;text-align: center; margin: 0; display: inline-block}

#pagination{ margin-top: 70px; padding-bottom: 120px}
#pagination ul{ display: flex; align-items: center; justify-content: center}
#pagination ul li{ margin: 0 5px}
#pagination ul li a,#pagination ul li span{ display: block; background:#000; color: #000;  font-weight: 500; text-align: center;width: 30px; height: 30px; border-radius: 40px; line-height: 30px }
.rocket_left a,.rocket_right a{ background: none!important; display: flex!important;align-content: center;justify-content: center;}
.rocket_left a i,.rocket_right a i{ font-size: 20px;line-height: 30px}
.rocket_left i{transform: rotate(-140deg) translate(-6px , 2px)}
.rocket_right i{transform: rotate(40deg)}
#pagination ul li span.current,#pagination ul li a:hover{background: #f5921e; transform: scale(1.07)}
#pagination ul li.page_text a{ background: #f5921e;  text-transform: uppercase; width: auto; padding: 0 10px}

.elementor-widget-text-editor a{}
.elementor-widget-text-editor a:hover{ text-decoration: underline}

/******************************* HEADER *****************************/

#cont_header{ background: rgba(0,0,0,25%); padding: 10px 0; position: fixed; width: 100%; top: 0; left: 0; z-index: 90}
#cont_header.header_fix,#cont_header.internas{ background: rgba(0,0,0,100%); }
#cont_header .row_at{ justify-content: space-between}
#cont_header #h_left{ width: 190px; margin-left: 10px}
#cont_header #h_right{ width: calc(100% - 200px); display: flex; align-items: center; justify-content: flex-end}
#cont_header #h_right .tel_top{ color: #fff}
#cont_header #menu{ background: #000; display: flex; align-items: center; flex-direction: column; justify-content: center; margin-left: 25px; width: 50px; height: 50px; border:1px solid #fff; border-radius: 90px}
#menu{border: none;; cursor: pointer; margin-right: 15px}
#menu span{ width: 20px; margin: 0 auto;height: 2px; background: #fff }
#menu .linea_1{}
#menu .linea_2{ margin: 5px auto}
#menu .linea_3{}
 
/******************************* Menu *****************************/

#access_mb{background: #000;
background: linear-gradient(180deg, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 1) 31%, rgba(0, 0, 0, 1) 61%, rgba(22, 37, 59, 1) 100%);;width: 40%;height: calc(100% - 58px);position: fixed;top: 0;right: -200%;z-index: 99991;transition: all 400ms ease-out;padding: 35px 0 35px 65px;display: flex;flex-wrap: wrap;align-content: space-between;flex-direction: column;justify-content: space-between;}
#access_mb.on{ right: 0;transition: all 400ms ease-out;}
#access_mb .menu_ppal{ padding-left: 65px; display: flex; position: relative; z-index: 15; flex-direction: column;align-items: flex-start; justify-content: flex-start;}
#access_mb .menu_ppal li { margin: 15px 5px}
#access_mb .menu_ppal li a{ color: #fff; text-transform: uppercase; font-weight: 300; letter-spacing: 4px; font-size: 16px; line-height: 16px; position: relative; padding: 5px 0; display: block}
#access_mb .menu_ppal li a:after{content: ''; display: block; width: 0%; height: 2px; background: #fff; position: absolute; left: 0; bottom: -2px;transition: all 400ms ease-out;}
#access_mb .menu_ppal li:hover a:after{ width: 100%;transition: all 400ms ease-out;}
#access_mb .menu_ppal a:hover,.btn_menu:hover,#access li.active a,#access  [aria-current]:not([aria-current="false"]){ color: #F5921E;}
#access_mb  [aria-current]:not([aria-current="false"]):after{ width: 100%}

.header_sidebar_top {width: 100%;}
.header_sidebar_top ul {display: flex;flex-direction: column;gap: 2px;}
.header_sidebar_top ul li {color: #fff;display: flex; gap: 76px; align-items: center; font-size: 16px;line-height: 22px;}
.header_sidebar_top ul li a {color: #fff;text-decoration: none;font-weight: 400;}
.header_sidebar_top ul li span {display: block;min-width: 95px;}

.anim_menu{width: 100%;height: 75vh;position: absolute; top: 0; bottom: 0; right: -30%; margin: auto; animation: upDownAnim 2s infinite linear;}
.anim_menu img{ opacity: 0.15 }
/******************************* BLOG *****************************/

#blog_ATM{}
#blog_ATM .header_ATM{ height: 350px}
#blog_ATM .header_ATM .row_at, #blog_ATM  .header_ATM .cont_at{ justify-content: flex-end}
#blog_ATM .encabezado_section{ text-align: center; margin-bottom: 55px}
#blog_ATM .encabezado_section h4{ text-transform: uppercase; font-size: 25px; line-height: 30px; margin-bottom: 10px}

#blog_ATM .encabezado_section h5{ font-size: 30px; font-weight: 400; margin-bottom: 15px}



#list_blog{ align-items: flex-start}

#intro_blog{ position: relative; overflow: hidden; border-radius:20px; width: 40% }
#intro_blog .summary{background: #000; width: 100%; height: 100%; display: flex; flex-direction: column; position: absolute; top: 0; left: 0; justify-content: center;padding: 20px}
#intro_blog .summary h5{color: #000;  font-weight: 600; font-size: 30px}
#intro_blog .summary h4{color: #000;  font-weight: 600; font-size: 30px}
#intro_blog .summary h3{color: #000;  font-weight: 700; font-size: 30px; ;margin: 15px auto}
#intro_blog .summary p{ font-size: 20px; line-height: 25px;color: #000; font-weight: 300; padding-right: 16%}
#intro_blog .summary #migas_pan,#blog_ATM #intro_blog .summary #migas_pan a{color:#000!important }


.item_blog{ width: calc( 50% - 40px); margin: 0 10px 45px 10px; display: flex; flex-direction: column; justify-content: center;  align-items: flex-start;padding: 10px}
.item_blog.last_blog{ width: calc( 100% - 40%);}
.item_blog h2{font-size: 14px; text-transform: uppercase; line-height: 17px; min-height: 40px}
.header_list ul{margin: 15px 0!important; display: flex; flex-wrap: wrap; justify-content:flex-start; align-items: center; width: 100%} 
.header_list ul li { display: flex; align-items: center; margin-right: 15px; font-size: 15px}
.summary_blog{ min-height:70px; margin-bottom: 10px }
.summary_blog p{  font-size: 16px; line-height: 20px; font-weight: 400}
.item_blog:hover .btn_at:before{content: ''; background: #000; }
.item_blog .btn_at:hover{background: #000; color: #000}
.item_blog .btn_at:hover svg{ fill:#000}



/******************************* BLOG INTERNA *****************************/

.header_blog{background: #000; height: 320px; padding-bottom: 35px; margin-bottom: 45px }
.header_blog .cont_at{ height: 100%; display: flex;flex-direction: column;flex-wrap: wrap;align-items: center;justify-content: flex-end;}
.header_blog h1,.header_blog li,.header_blog a,.header_blog p{color: #000}
.header_blog .summary_blog{ height: auto;min-height: inherit; width: 650px; text-align: center}
.header_blog #migas_pan{ margin-bottom: 20px}
.header_blog #migas_pan span{ display: flex; align-items: center; justify-content: center; color: #000}
.header_blog #migas_pan i{ line-height: 17px}

#cont_wp.cont_at{ }
.single_blog{ }
.single_blog .entry_blog {}
.entry_blog h2,.entry_blog h3,.entry_blog h4,.entry_blog h5,.entry_blog h6{ margin-bottom: 15px}
.entry_blog h2{ font-size: 30px; line-height: 30px; text-align: center}
.entry_blog h3{font-size: 23px; line-height: 23px}
.entry_blog h4{font-size: 20px; line-height: 20px; margin: 10px 0 20px 0!important}
.entry_blog h5{font-size: 20px; line-height: 20px}

.entry_blog p{ font-size: 22px; line-height: 28px; margin-bottom: 10px; font-weight: 350}
.entry_blog a[href*="atmagenciadigital.com"]{ color: #f5921e; text-decoration: underline!important}
.entry_blog b,.entry_blog strong{  font-weight: 500}
#cont_wp ul,#cont_wp ol{ margin-bottom: 1em!important}

#cont_wp ul li, #cont_wp ol li{ color: #000!important; margin-bottom: 10px!important;font-size: 21px; line-height: 25px;}
#cont_wp ol li::marker{ color:#f5921e; font-size: 20px; font-weight: 800;font-family: "Sulphur Point", sans-serif!important;}
#cont_wp ol li,#cont_wp ol{ list-style: decimal}
#cont_wp ol{margin-left: 20px!important}
#cont_wp ul li{position: relative}
#cont_wp ul li:before{content: ''; display: inline-block; vertical-align: top; transform: translateY(2px);background: url('https://www.atmagenciadigital.com/wp-content/uploads/2024/05/ico-admin.png') #000; margin-right: 10px; padding: 3px; background-size: cover!important;width: 12px; height: 12px; border-radius: 50px}

 
.btn_blog{ background: #f5921e; text-transform: uppercase; font-size: 18px; line-height: 18px; letter-spacing: 4px; font-weight: 600; border-radius: 0; border: 1px solid #f5921e; position: relative; overflow: hidden;transition: all 250ms ease-out; padding: 15px 35px; margin: 25px auto 35px auto; display: table}

.btn_blog:hover{background: #000; border-color: #000; color: #000; transform: translateY(-10px);transition: all 250ms ease-out;}

.post-navigation-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 40px;
}

.nav-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 180px;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: #000;
}

.nav-card-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.6);
    transition: 0.3s ease;
}

.nav-card:hover .nav-card-image {
    transform: scale(1.05);
    filter: brightness(0.5);
}

.nav-card-content {
    position: relative;
    padding: 20px;
    z-index: 2;
}

.meta-nav {
    font-size: 12px;
    opacity: 0.8;
    display: block;
    margin-bottom: 5px;
}

.nav-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

/* Responsive */
@media (max-width: 768px) {
    .post-navigation-cards {
        grid-template-columns: 1fr;
    }
}



@keyframes upDownAnim {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(15px);
    }
    0% {
        transform: translateY(0);
    }
}


/*******Redes********/
.redes_sociales{ padding: 0!important;}
.redes_sociales h4{ margin-bottom: 10px; font-size: 16px; letter-spacing: 3px; font-weight: 400; color: #fff; text-transform: uppercase}

.redes_sociales ul {list-style: none;  margin: 0}
.redes_sociales li {display: inline-block; vertical-align: middle; margin-right: 5px } 

.redes_sociales a{background: none; display: flex; align-items: center; justify-content: center;text-align: center; position: relative;width: 35px; height: 35px; border: 1px solid #fff; border-radius: 90px }
.redes_sociales a:before{ font-size: 20px; font-family: "Font Awesome 5 Brands";content: "\f415"; color: #fff;  display: block; line-height: 30px;  }
.redes_sociales a:hover:before{ }




.redes_sociales a[href*="codepen.io"]:before {content: "\f1cb ";}
.redes_sociales a[href*="digg.com"]:before {content: "\f1a6 ";}
.redes_sociales a[href*="dribbble.com"]:before {content: "\f17d ";}
.redes_sociales a[href*="dropbox.com"]:before {	content: "\f16b ";}
.redes_sociales a[href*="facebook.com"]:before {content: "\f39e"; }
.redes_sociales a[href*="flickr.com"]:before {content: "\f16e ";}
.redes_sociales a[href*="foursquare.com"]:before {content: "\f180 ";}
.redes_sociales a[href*="plus.google.com"]:before {	content: "\f0d5";}
.redes_sociales a[href*="github.com"]:before {content: "\f09b";}
.redes_sociales a[href*="instagram.com"]:before {content: "\f16d "; }
.redes_sociales a[href*="linkedin.com"]:before {content: "\f08c "; }
.redes_sociales a[href*="pinterest.com"]:before {content: "\f231";}
.redes_sociales a[href*="getpocket.com"]:before {content: "\f265";}
.redes_sociales a[href*="f281 .com"]:before {content: "\f222";}
.redes_sociales a[href*="skype.com"]:before {content: "\f17e ";}
.redes_sociales a[href*="twitter.com"]:before {	content: "\f099 "; }
.redes_sociales a[href*="vimeo.com"]:before {content: "\f27d ";}
.redes_sociales a[href*="youtube.com"]:before {	content: "\f431 ";}
.redes_sociales a[href*="api.whatsapp.com"]:before {	content: "\f232 ";}
.redes_sociales a[href*="tiktok.com"]:before {	content: "\e07b ";}

.text_redes{ display: none }
/******************************* FOOTER *****************************/

#cont_foo{ background: #000; padding-top: 55px; padding-bottom: 35px}
#cont_foo li, #cont_foo li a, #cont_foo h2,#cont_foo h4,#cont_foo p{ color: #fff}
#cont_foo .row_at{justify-content: space-between; align-items: center}
.foo_left,.foo_right{ width:  calc(25% - 30px)}
.col_foo h2,#foo_bt h2,.col_foo h4{color: #fff; font-size: 14px; text-transform: uppercase; font-weight: 400; margin-bottom: 20px; letter-spacing: 2px}
.foo_left{padding-left: 30px}
.foo_left p{ font-size: 14px; line-height: 20px}
.foo_left .btn_foo{ margin-top: 20px; font-size: 14px; padding: 5px 15px 5px 25px}
#menu_foo{margin-bottom: 20px}
#menu_foo li{ margin-bottom: 5px; text-transform: uppercase}
#menu_foo li a{ font-size: 12px; line-height: 12px}



.foo_center{ width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center}
.foo_center #logo_foo{width:230px; display: table; margin: 0 auto 35px auto}
.foo_center h4{  }
.info_cto_foo li{ margin-bottom: 20px; text-align: center}
.info_cto_foo li.tel{ font-size: 50px}
.info_cto_foo li.mail{ font-size: 45px}


.foo_right{display: flex;flex-direction: column;align-items: flex-end; padding-right: 30px}



#foo_bt.row_at{align-items: center; padding-top: 40px}
#foo_bt .col_foo{width: 33.33%}
.col_foo .btn_foo{ border-color: #fff; color: #fff }
.col_foo .btn_at:hover{border-color: #f5921e!important}
.col_foo .btn_foo i{  height:auto;; margin-left: 10px}
.col_foo .btn_foo i svg{ fill:#fff}
.col_foo .btn_foo:hover i svg{ fill:#fff}
#foo_bt h2,#foo_bt p{ margin-bottom: 0!important; text-transform: uppercase; font-size: 11px; line-height: 11px; letter-spacing: 4px}
#foo_bt h2{ text-align: right; }


/*********RESPONSIVE********/



@media (min-width: 1920px) and (max-width: 1440px) {
    .serv_left.serv_light .elementor-element-populated{}
    .serv_right.serv_dark .elementor-element-populated{}
}

@media (max-width: 1440px) {
    .serv_left .elementor-element-populated,.serv_right .elementor-element-populated,.text_seo > .elementor-element-populated{padding: 55px 30px!important}
    .sect_opiones {padding: 0 30px!important}
   
}
@media (max-width: 767px) {
    .cont_at {width: 100%;margin: 0 auto;max-width: 1420px;}
    .serv_left .elementor-element-populated,.serv_right .elementor-element-populated,.text_seo > .elementor-element-populated{padding: 35px 10px!important}
    .foo_left, .foo_right, .foo_center{width: 100%}
   .info_cto_foo li.tel,.info_cto_foo li.mail{ font-size: 30px}
     .h1_home b{ font-size: 32px !important;}
    
}