html{ margin:0 !important}
body { background: #fff;font-family: "Poppins", sans-serif !important; ;margin:0; padding:0 !important; color: #014445; position:relative; font-size:20px!important; line-height: 25pxpx; width:100%;font-weight: 300}
h1, h2, h3, h4, h5, h6 {font-family: "Poppins", sans-serif  !important;color:#014445; 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:#014445 }
nav ul,ol,ul{ line-height: normal}
a {text-decoration:none!important; color:#014445; /*-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: 95%;  margin: 0 auto; max-width: 1420px }
.row_at{display: flex; align-items: center; justify-content: center; flex-wrap: wrap}
.img_fluid.size-full,.img_fluid,.size-full{ max-width: 100%; display: block; height: auto}
.aligncenter,.alignleft,.alignright {display: block;padding: 0; height: auto}
.aligncenter {float: none;margin: .5em auto 1em; width: 100%}
.alignright {float: right;margin: .5em 0 1em 1.5em;}
.alignleft {float: left;margin: .5em 1.5em 1em 0;}
.btn_at{ text-transform: uppercase; font-size: 14px; line-height: 20px; display: inline-flex; align-items: center; justify-content: center;letter-spacing: 4px; font-weight: 500; border-radius: 0; border: 1px solid #014445; padding: 5px 25px;position: relative; overflow: hidden;transition: all 100ms ease-out}
.btn_at:hover{ background: #014445; color: #fff}
.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}


#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:#014445; color: #fff;  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: #014445; transform: scale(1.07)}
#pagination ul li.page_text a{ background: #014445;  text-transform: uppercase; width: auto; padding: 0 10px}

.elementor-widget-text-editor a{}
.elementor-widget-text-editor a:hover{ text-decoration: underline}
elementor-widget-text-editor ul, .elementor-widget-text-editor ul{ padding-left: 15px!important}
/******************************* HEADER *****************************/

#cont_header{ background: transparent; background: #fff; width: 100%; position: sticky; top: 0; left: 0; z-index: 991; padding: 10px 0}
#cont_header.header_fix{ background: #fff}
#cont_header .row_at{ justify-content: space-between}
#h_left{ width: 160px}
#h_center{ width: calc(100% - 330px)}
#h_right{ width: calc(170px); display: flex; justify-content: flex-end}
#h_right .tel_top { list-style: none!important}
#h_right .tel_top a{ background: #fff; border: 1px solid #014445; border-radius: 10px; padding: 10px 20px;display: flex; align-items: center; justify-content: center;color: #fff; text-align: right; font-size: 16px; font-weight: 600; color: #014445}
#h_right .tel_top a i{ width: 18px; height: 18px; margin-right: 10px}
#h_right .tel_top a svg{ width: 18px; height: 18px; height: auto; fill:#014445}
#h_right .tel_top a:hover{ background: #014445; color: #fff}
#h_right .tel_top a:hover svg{ fill:#fff}
/******************************* Menu *****************************/

#access{}
#access ul,#access ul li{ list-style: none!important}
#access .menu_ppal{ display: flex; align-items: center; justify-content: center;}
#access .menu_ppal li { margin: 0 5px; position: relative}
#access .menu_ppal li a,.btn_menu{ color: #014445;font-weight: 400;  font-size: 16px; line-height: 16px; position: relative; padding: 5px 10px; display: block}
#access .menu_ppal li a:after{content: ''; display: block; width: 0%; height: 2px; background: #014445; position: absolute; left: 0; bottom: -2px;transition: all 400ms ease-out;}
#access .menu_ppal li:hover a:after{ width: 100%;transition: all 400ms ease-out;}
#access .menu_ppal a:hover,.btn_menu:hover,#access li.active a,#access  [aria-current]:not([aria-current="false"]){ color: #014445;}
#access  [aria-current]:not([aria-current="false"]):after{ width: 100%}

.btn_menu{ display: flex; align-items: center}
.btn_menu i{ width: 10px; height: 10px; border-left: 2px solid #014445; border-top: 2px solid #014445;transform: rotate(-137deg) translate(-5px, 9px);}
#access .menu_ppal ul.sub-menu{ display: none; background: #fff;padding: 10px 15px !important;position: absolute;left: 3%;bottom: -180px;min-width: 300px;}

/******************************* BLOG *****************************/

#blog_ATM{}
#blog_ATM #migas_pan,#single_blog #migas_pan{ margin: 15px 0}
#blog_ATM .header_ATM,#single_blog .header_blog{ height: auto; min-height: auto; background: #F3F3F3; padding: 15px 0}
#blog_ATM .header_ATM h1, #single_blog .header_blog h1{font-size: 30px;font-weight: 500;color: #014445; text-align: center}
#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}
#single_blog .header_blog .header_list ul{justify-content: center}


#list_blog{ align-items: flex-start}

#intro_blog{ position: relative; overflow: hidden; border-radius:0; width: 50% }
#intro_blog .summary{background: #014445; width: 100%; height: 100%; display: flex; align-items: center; position: absolute; top: 0; left: 0; justify-content: space-between;padding: 20px 20px 20px 0px}
#intro_blog .summary img{ width: 40%}
#intro_blog .summary .text_summary{ width: calc(100% - 40%)}
#intro_blog .summary h5{color: #fff;  font-weight: 600; font-size: 30px}
#intro_blog .summary h4{color: #fff;  font-weight: 600; font-size: 30px}
#intro_blog .summary h3{color: #fff;  font-weight: 700; font-size: 30px; ;margin: 15px auto 30px auto}
#intro_blog .summary p{ font-size: 20px; line-height: 25px;color: #fff;  margin-bottom: 30px; font-weight: 300; padding-right: 30px}
#intro_blog .summary #migas_pan,#blog_ATM #intro_blog .summary #migas_pan a{color:#014445!important }


.item_blog{ width: calc( 33.33% - 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 figure{ padding: 0px; margin: 0}
.item_blog h2{font-size: 14px; 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: 14px; line-height: 18px; font-weight: 400}
.item_blog:hover .btn_at:before{content: ''; background: #014445; }
.item_blog .btn_at:hover{background: #014445; color: #fff}
.item_blog .btn_at:hover svg{ fill:#fff}



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


#cont_wp.cont_at{ max-width: 1170px; width: 100% }
.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; }
.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: #014445; 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: #014445!important; margin-bottom: 10px!important;font-size: 21px; line-height: 25px;}
#cont_wp ol li::marker{ color:#014445; 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') #014445; margin-right: 10px; padding: 3px; background-size: cover!important;width: 12px; height: 12px; border-radius: 50px}

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

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

.post-navigation-cards .cont_at {
    max-width: 1170px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 40px;
}
.post-navigation-cards .item_blog{ width: auto}
.nav-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 180px;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
}

.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;
    }
}
#cont_table { margin-top: 55px}
#cont_table h3{ display: flex; align-items: center}
#cont_table h3 i{width: 30px; height: 30px}
#cont_table h3 i svg{ width: 30px; height: auto}
#cont_table .cont_at{    max-width: 1170px;    width: 100%;}
#cont_table ul{ display: grid;grid-template-columns: repeat(2, 1fr);gap: 10px 20px;}
#cont_table ul li{ margin-bottom: 5px}


/*********REDES********/

.redes_sociales{ padding: 0!important;}

.redes_sociales ul {list-style: none;  margin: 0;display: flex; justify-content: flex-start; align-items: center}
.redes_sociales li { margin-right: 15px} 
.redes_sociales li:last-child { margin-right: 0} 

.redes_sociales a{ position: relative; text-align: center; display: block}
.redes_sociales a:before{ font-family: "Font Awesome 5 Brands";content: "\f415"; color: #014445 }
.redes_sociales a:hover:before{ }
.text_redes{}


.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: "\f0e1"; }
.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: "\f167";}
.redes_sociales a[href*="pinterest.es"]:before {content: "\f231";}
.redes_sociales a[href*="pinterest.com"]:before {content: "\f231";}
.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: #f2f2f2; padding-top: 55px; padding-bottom: 0}
#cont_foo .row_at{ align-items: flex-start}
#cont_foo .col_foo{ width: 33.33%}
#cont_foo .col_foo ul li{ list-style: none!important}
#logo_foo{ width: 180px; display: table; margin-bottom: 15px}
.foo_1{}
.foo_1 p{ font-size: 15px; line-height: 19px;}
.col_foo .cont_foo{  padding: 10px}
.cont_foo h4{ margin-bottom: 15px; font-weight: 600}

.info_cto li,#menu_foo li{ margin-bottom: 15px}
.info_cto li i{ color: #014445; margin-right: 5px}
.info_cto li,#menu_foo li a{  font-size:15px; line-height: 15px}
#menu_foo li a{ display: block}
#redes_foo{ margin-top: 25px}
.foo_2 .cont_foo{ display: flex; flex-direction: column; justify-content: center; align-items: center}
.foo_3 .cont_foo{ display: flex; flex-direction: column; justify-content: flex-end; align-items: center}

#foo_bt.row_at{ align-items: center; padding: 15px 0}
#foo_bt .separar_anchor{ margin: 0 10px}
#foo_bt p,#foo_bt a{ font-size: 13px}
#foo_bt p{ margin-bottom: 0px}
#foo_bt a{ display: flex; align-items: center}

#menu{border: none;}
#menu span{ width: 75%; margin: 0 auto;height: 3px; background: #014445 }
#menu .linea_1{}
#menu .linea_2{ margin: 5px auto}
#menu .linea_3{}
/*********RESPONSIVE********/

#cont_header_mb{ background: #fff; padding:  10px 0; position: fixed; width: 100%; top: 0; left: 0; z-index: 9991}
#cont_header_mb .row_at{ justify-content: space-between}
#cont_header_mb #h_left{ width: 120px; margin-left: 20px}
#cont_header_mb #h_right{ width: calc(100% - 150px); display: flex; align-items: center; justify-content: flex-end}
#cont_header_mb #menu{ display: flex; align-items: center; flex-direction: column; justify-content: center; margin-right: 15px; width: 50px; height: 50px; background: #fff }



#access_mb{ position: fixed; top: 0; left: -150%; width: 100%; height: 100%; background: #fff; z-index: 9999999991 }
#access_mb.on{ left: 0%}
#access_mb ul.menu-accordion{ margin-top: 35px!important}
#access_mb ul.menu-accordion li{  list-style:none!important}
#access_mb ul.menu-accordion li a,#access_mb ul.menu-accordion li .menu-parent-trigger{ display: block; text-transform: uppercase; color: #014445; font-weight: 500; padding: 10px; font-size: 20px}

.header_menu{ display: flex; align-items: center; justify-content: space-between; padding: 10px;; border-bottom: 1px solid #f5f5f5}
.header_menu img{ width: 140px;}
#close_menu {cursor: pointer;background: #014445;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;}
#close_menu svg {    transform: rotate(0deg); width: 30px; fill:#fff}

/* Estructura básica */
.menu-accordion,.menu-accordion ul {    list-style: none;    margin: 0;    padding: 0;}


.menu-accordion > li { }
.menu-parent-trigger,.menu-accordion a  { display: block; padding: 5px 15px; text-transform: uppercase;background: #fff; border-bottom: 1px solid #014445; color: #1d1d1b; cursor: pointer; position: relative;transition: all 0.3s ease;}

.menu-parent-trigger.is_open {    background: #014445; color: #fff}

/* Submenús - ocultos por defecto */
.menu-accordion .sub-menu {display: none;padding: 10px 15px 30px 15px!important;}
.elementos_hijos li{ margin-bottom: 5px}
.elementos_hijos li:last-child{ margin: 0!important}
.elementos_hijos a{text-transform: none!important; padding: 0!important; border: none!important}
/* Toggle indicator */
.submenu-toggle { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; transition: all 0.3s ease;}

.submenu-toggle::before,.submenu-toggle::after {content: '';position: absolute;background: #014445;transition: all 0.3s ease;}

.submenu-toggle::before {width: 12px;height: 2px;left: 4px;top: 9px;}

.submenu-toggle::after {width: 2px;height: 12px;left: 9px;top: 4px;}

/* Estado abierto */
.is-open > .sub-menu {display: block;}

.is-open .submenu-toggle::after {transform: rotate(90deg);opacity: 0;}

@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: calc(100% - 30px);padding: 0 15px;}
   .info_cto_foo li.tel,.info_cto_foo li.mail{ font-size: 30px}
     .h1_home b{ font-size: 25px !important;}
    .aligncenter, .alignleft, .alignright{ height: auto; width: 100%}
    #cont_wp.cont_at{ width: 95%}
    .item_blog{ width: 100%}
    #intro_blog{ width: 100%; margin-bottom: 35px}
    #intro_blog .summary{ position: relative}
    #blog_ATM .header_ATM{ height: 170px}
    .header_ATM .title_archive .title_2 span:before{ width: 35px; height: 5px}
    .header_blog{ height: auto; padding: 90px 10px 35px 10px}
    .header_blog .summary_blog{ width: 100%}
    .header_blog h1{ font-size: 30px}
    .entry_blog h2{ text-align: center}
    .header_ATM .title_archive{ font-size: 35px; text-align: center}
    .entry_blog h2{font-size: 25px;line-height: 30px;}
.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}
    .atm-logos-carousel .logo-item{ padding: 10px!important}
    #cont_foo{padding-bottom: 20px}
    #cont_foo .row_at{ }
    .foo_right{ justify-content: center; align-items: center;}
    .foo_center{ margin: 25px auto}
    .foo_left{ display: flex;flex-direction: column; justify-content: center; align-items: center}
    .foo_right p{ text-align: center;}
    #foo_bt .col_foo{ width: calc(100% - 30px); padding: 0 15px}
    #foo_bt .col_foo h2{ margin-bottom: 15px!important}
    #menu_foo li{ margin-bottom: 10px}
    #menu_foo li a{ display: block;  text-align: center}
    .sect_opiones {padding: 0 10px !important;}
    #cont_table ul{grid-template-columns: 1fr;}
    .header_list ul { justify-content: center}
    .header_list ul li{ margin-bottom: 5px}
    .header_blog #migas_pan span{ font-size: 12px; line-height: 12px}
    .btn_blog{ text-align: center; font-size: 16px; line-height: 20px}
    .entry_blog p {font-size: 18px;line-height: 23px;    margin-bottom: 10px;font-weight: 400;}
    .entry_blog h2, .entry_blog h3, .entry_blog h4, .entry_blog h5, .entry_blog h6{text-align: center}
    .post-navigation-cards .cont_at{grid-template-columns: 1fr;}
    #cont_table h3 {display: flex;align-items: center;justify-content: center;}
    .off_table{ padding: 30px 10px}
    #cont_table ul li a{ font-size: 16px; line-height: 16px; }
    #cont_foo .col_foo ul{ padding: 0!important}
    #cont_foo .col_foo {    width: 100%;}
    #logo_foo{ display: table; margin: 10px auto}
    #redes_foo ul{justify-content: center}
}