* { margin:0; padding:0; }

html{ margin:0 !important}
body { background: #fff;font-family: "Montserrat", sans-serif !important; ;margin:0; padding:0 !important; color: #1d1d1b; position:relative; font-size:15px!important; line-height: 18px; width:100%;font-weight: 300}
h1, h2, h3, h4, h5, h6 {font-family: "Montserrat", sans-serif !important;color:#1d1d1b; margin: 0; font-weight: 500 }
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:#1d1d1b }
nav ul,ol,ul{ margin:0 !important; padding:0 !important; line-height: normal}
ul, li{ list-style: none}
a {text-decoration:none!important; color:#1d1d1b; /*-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, li{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: calc(100% - 60px);  margin: 0 auto; max-width: 1420px; padding: 0 30px }
.cont_at_full{ width: calc(100% - 60px);  margin: 0 auto; max-width: 100%; padding: 0 30px }
.row_at{display: flex; align-items: center; justify-content: center; flex-wrap: wrap}
.img_fluid.size-full,.img_fluid{ max-width: 100%; display: block; height: auto}
.aligncenter,.alignleft,.alignright {display: block;padding: 0;}
.aligncenter {float: none;margin: .5em auto 1em;}
.alignright {float: right;margin: .5em 0 1em 1.5em;}
.alignleft {float: left;margin: .5em 1.5em 1em 0;}
.btn_at{  font-size: 14px; line-height: 14px; display: inline-flex; align-items: center; justify-content: center; font-weight: 400; border-radius: 0; border: 1px solid #1d1d1b; padding: 5px 15px 5px 25px;position: relative; overflow: hidden;transition: all 100ms ease-out}

.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:#1d1d1b; 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: #fff!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: #FFFFFF;}
.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: #038999;margin: 0 25px;}
.header_ATM #migas_pan{ justify-content: center; color: #fff; margin-top: 15px}
.header_ATM #migas_pan a ,#banner_blog #migas_pan span{ color: #fff; 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; }
#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;  color: #1d1d1b;  font-weight: 500; text-align: center;width: 30px; height: 30px; border-radius: 3px; line-height: 30px; border: 1px solid #fff }
.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; color: #1d1d1b}
.rocket_left i{}
.rocket_right i{}
#pagination ul li span.current,#pagination ul li a:hover{transform: scale(1.07); border: 1px solid #038999}
#pagination ul li.page_text a{ text-transform: uppercase; width: auto; padding: 0 10px}

.elementor-widget-text-editor a{}
.elementor-widget-text-editor a:hover{ text-decoration: underline}
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
/******************************* HEADER *****************************/
#markesina{ background: #038999; color: #fff; padding: 10px 0; text-align: center; text-transform: uppercase; font-weight: 700; font-size: 13px; line-height: 13px}
.sticky_top{ position: sticky; top: 0; left: 0; z-index: 991}
#cont_header{ background: rgb(245, 245, 245); width: 100%; padding:  0}
#cont_header.header_fix{ }
#cont_header .row_at{ justify-content: space-between}
#h_left,#h_right{ width: calc(50% - 90px) }
#h_center{  width: 90px}
#h_center #logo_top{ display: table; padding: 5px}
#h_right{  display: flex; justify-content: flex-end}
#auto_translate_button_wrapper{margin-right: 15px}
 
/******************************* Menu *****************************/

#access{}
#access .menu_ppal{ display: flex; align-items: center; justify-content: flex-start;}
#access .menu_ppal li { margin: 0 5px; position: relative}
#access .menu_ppal li a{ color: #333; text-transform: uppercase; font-weight: 400;font-size: 13px; line-height: 13px; position: relative; padding: 35px 10px; display: block}
#access .menu_ppal li a:after{content: ''; display: block; width: 0%; height: 2px; background: #1d1d1b; position: absolute; left: 0; bottom: 0;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: #1d1d1b;}
#access  [aria-current]:not([aria-current="false"]):after{ width: 100%}
#access  .sub-menu{ display: none; background: #f5f5f5; position: absolute; left: calc(100% - 150px);width: 230px; bottom: -99px; box-shadow: 0px 0px 3px rgba(0,0,0,0.15); border-top: 2px solid #1d1b1b;}
#access  li:hover .sub-menu { display: block}
#access  li .sub-menu li a{ text-transform: inherit!important; padding:10px!important}
#access  li .sub-menu li a:after{ display: none!important}
/* Activo */
#access [aria-current]:not([aria-current="false"]):after{width:100%;!important}

#access  .custom-html-widget ul li{margin-bottom: 5px}
#access   span.mega-indicator:after{  content: '+'}
/* Oculta la línea del activo al pasar por otro item */
#access .menu_ppal:hover li:not(:hover) > [aria-current]:not([aria-current="false"]):after{
    width:0;
}

.mega-sub-menu{ background: rgb(245, 245, 245)!important}

/* Muestra la línea del item hover */
#access .menu_ppal li:hover > a:after{
    width:100%;
}
/******************************* 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: #1d1d1b; 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: #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}
#intro_blog .summary p{ font-size: 20px; line-height: 25px;color: #fff; font-weight: 300; padding-right: 16%}
#intro_blog .summary #migas_pan,#blog_ATM #intro_blog .summary #migas_pan a{color:#1d1d1b!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: #1d1d1b; }
.item_blog .btn_at:hover{background: #1d1d1b; color: #fff}
.item_blog .btn_at:hover svg{ fill:#fff}



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

.header_blog{background: #1d1d1b; 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: #fff}
.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: #fff}
.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: #038999; 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: #1d1d1b!important; margin-bottom: 10px!important;font-size: 21px; line-height: 25px;}
#cont_wp ol li::marker{ color:#038999; 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') #1d1d1b; margin-right: 10px; padding: 3px; background-size: cover!important;width: 12px; height: 12px; border-radius: 50px}

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

.btn_blog:hover{background: #1d1d1b; border-color: #1d1d1b; color: #fff; 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: #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;}
}

/******************************* ELEMENTOR EDITOR *****************************/
.elementor-widget-text-editor h2,.elementor-widget-text-editor h3,.elementor-widget-text-editor h4{ margin-bottom: 15px}

.elementor-widget-text-editor ul,.elementor-widget-text-editor ol{ margin-bottom: 15px!important; margin-left: 15px!important}
.elementor-widget-text-editor ul li{ list-style: circle!important}
.elementor-widget-text-editor ol li{ list-style: decimal!important}
.elementor-widget-text-editor ul li,.elementor-widget-text-editor ol li{ margin-bottom: 5px!important}
/******************************* FOOTER *****************************/

#cont_foo{ background: #1d1d1b; padding-top: 85px;  position: relative}
#cont_foo .row_at{ align-items: flex-start}
#logo_foo{ display: flex; justify-content: center; align-items: center; margin: 0 auto; background: #1d1d1b;  width: 85px; height: 85px; position: absolute; top: -50px; left: 0; right: 0; border-radius: 200px; padding: 15px; }
#logo_foo img{ width: 85%;}
#foo_top{margin-bottom: 35px; width: 90%}
#foo_top .row{}

.foo_ATM{ width: calc(100% / 4)}
.item_foo_redes{ display: flex; align-items: center;justify-content: center; margin-bottom: 35px}
h3.title_foo {text-transform: uppercase; font-size: 14px; margin-bottom: 14px; letter-spacing: 2px;color: #fff}}
h3.title_foo span{color: #fff} 

#info_cto li { color: #fff; font-size: 14px; line-height: 14px; }
.foo_menu li,#info_cto li{ margin-bottom: 15px}
.foo_menu li a{ font-size: 14px; line-height: 14px; color: #fff; display: table}
.foo_menu li a:hover{color: #fff; text-decoration: underline!important}
.foo_info{ display: flex;flex-direction: column;align-items: flex-start;width: 100%;flex-wrap: wrap;margin: 0 auto;}

#foo_2 .item_foo{display: flex; flex-wrap: wrap; flex-direction: column; padding-left: 10%}
#boletin p{ color: #fff; font-size: 14px; line-height: 26px}
#boletin form{ position: relative}
#boletin .wpcf7-text{ border: none; border-bottom: 2px solid #fff!important; font-size: 13px; color: #fff!important; font-weight: 300; letter-spacing: 2px}
#boletin .requerido{color:#fff; font-weight: 400 }
#boletin input:focus::-webkit-input-placeholder { color:#fff ; }
#boletin input:focus::-moz-placeholder { color:#fff ; } 
#boletin input:focus::-ms-input-placeholder { color:#fff ; } 
#boletin input:focus::-o-placeholder { color:#fff ; }

#boletin input::-webkit-input-placeholder { color:#fff ; }
#boletin input::-moz-placeholder { color:#fff ; } 
#boletin input::-ms-input-placeholder { color :#fff ; } 
#boletin input::-o-placeholder { color:#fff ; }
#boletin .btn_boletin{position: absolute;font-size: 17px;width: 35px;height: 35px;border: none;;cursor: pointer; color: #fff; top: 0;right: 0px}

#iconos_foo{margin: 15px 0!important}
#iconos_foo li span{ font-size: 18px;    color: #fff ; }

#text_foo .cont_at{ padding-bottom: 10px}
#text_foo .row_at{ align-items: center}
#metod_shop{margin-top: 15px}
#metod_shop h3.title_foo{margin-bottom: 10px}
#text_foo{padding: 10px 0; background: #038999 ; text-align: center; }
#text_foo p{ color: #fff; margin-bottom: 0!important; font-size: 11px; line-height: 11px; text-transform:uppercase; margin-right: 15px}
#anchor_at{ font-size: 11px; color: #fff!important; text-transform:uppercase; display: flex; align-items: center}
#text_foo span.separar_anchor{margin: 0 10px; color: #fff}
#anchor_at i{ width: 15px; display: inline-block; margin-right: 5px}

#menu{border: none; border-radius: 5px}
#menu span{ width: 75%; margin: 0 auto;height: 3px; background: #1d1d1b }
#menu .linea_1{}
#menu .linea_2{ margin: 10px auto}
#menu .linea_3{}
/* 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 #038999; color: #1d1d1b; cursor: pointer; position: relative;transition: all 0.3s ease;}

.menu-parent-trigger.is_open {    background: #000; 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: #000;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;}

#enlaces_menu{ background: #038999; width: 100%; position: absolute; left: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between}
#enlaces_menu li{ width: calc(100% / 3); border-right: 1px solid #fff}
#enlaces_menu li a{color: #fff; text-transform: uppercase; font-size: 13px; display: block;padding: 15px 5px; text-align: center}


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

#cont_header_mb{ background: #f5f5f5; padding:  0; position: fixed; width: 100%; top: 0; left: 0; z-index: 9991}
#cont_header_mb .row_at{ justify-content: space-between; padding: 5px 0}
#cont_header_mb #h_center{ width: 65px;}
#cont_header_mb #h_right,#cont_header_mb #h_left{ width: calc(50% - 65px)}
#cont_header_mb #menu{ display: flex; align-items: center; flex-direction: column; justify-content: center; width: 50px; height: 50px; background: #f5f5f5 }
#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{ }
#access_mb ul.menu-accordion li a,#access_mb ul.menu-accordion li .menu-parent-trigger{ display: block; text-transform: uppercase; color: #038999; 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 #logo_top{ width: 75px;}
#close_menu {cursor: pointer;background: #038999;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}

@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,.cont_at_full {width: calc(100% - 10px);margin: 0 auto;max-width: 1420px; padding: 0 5px}
    .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;}

    #foo_top{ width: auto}
    .foo_ATM {width: calc(100% / 1); padding: 15px 10px; text-align: center}
    #foo_1 .foo_info{ align-items: center}
    #foo_4{}
    .auto_translate_button_wrapper{--wpat-float-offset-y: 25%!important;}
    
    .wa__btn_popup{ bottom: 35%!important; right: 5px !important}
}